/* Keep each bag decoded in its own layer so changing bags only animates opacity. */
.bag-float,.bag-float .hero-bag,.hero-bag{animation:none!important}
.bag-image-window{position:absolute;inset:0;overflow:hidden;isolation:isolate;pointer-events:none}
.bag-image-window .hero-bag{z-index:1;opacity:0;transform:none!important;transition:opacity .48s ease!important;will-change:opacity}
.bag-image-window .hero-bag.is-active{z-index:2;opacity:1}
.hotspots{transition:none}
.hotspot{
  animation:none!important;
  opacity:1;
  transform:none;
  transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--hotspot-delay,0ms);
}
.hotspot-label{
  position:absolute;
  left:0;
  top:0;
  right:auto;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--hotspot-delay,0ms) + 70ms);
}
.hotspot.flip .hotspot-label{right:auto}
.bag-visual.bag-transitioning .hotspots{pointer-events:none}
.bag-visual.bag-transitioning .hotspot{
  opacity:0;
  transform:translateY(8px) scale(.96);
  transition-delay:0ms;
}
.bag-visual.bag-transitioning .hotspot-label{
  opacity:0;
  transform:translateY(5px);
  transition-delay:0ms;
}
.bag-visual .hero-bag{filter:drop-shadow(0 14px 15px rgba(33,48,62,.10))}
.bag-visual .ground-shadow{opacity:.22}
/* 2026-10-29 옥성이 관리자에서 순서를 바꿔 첫 칸(key=backpack)에 캐리어, 둘째 칸(key=luggage)에 백팩 그림이 있다.
   크기·색 보정은 칸(key)이 아니라 지금 그 칸의 그림에 맞춘 값이다 — 관리자에서 그림을 바꾸면 함께 본다. */
.bag-visual .hero-bag[data-bag-image=backpack]{height:92%;width:92%;left:4%;top:8%;filter:grayscale(1) contrast(.82) brightness(1.08) blur(.4px) drop-shadow(0 14px 15px rgba(33,48,62,.10))}
.bag-visual .hero-bag[data-bag-image=luggage]{height:88%;width:88%;left:3.5%;top:4%}
.bag-visual .hero-bag[data-bag-image=duffel]{filter:grayscale(1) drop-shadow(0 14px 15px rgba(33,48,62,.10))}
.bag-visual .hero-bag[data-bag-image=duffel]{height:70%;width:100%;left:0;top:15%}
.bag-visual[data-bag=backpack] .hotspot:nth-child(7) .hotspot-label{position:absolute;left:34px;bottom:0}
html:not(.v1-showroom) .bag-visual .hero-bag[data-bag-image=backpack]{height:103%;width:82%;left:9%;top:-2%}
html:not(.v1-showroom) .bag-visual[data-bag=backpack] .hotspot:nth-child(3){left:34%!important}
html:not(.v1-showroom) .bag-visual[data-bag=backpack] .hotspot:nth-child(4){left:35%!important;top:73%!important}
html:not(.v1-showroom) .bag-visual[data-bag=backpack] .hotspot:nth-child(6){left:64%!important;top:62%!important}
@media(max-width:650px){
  .bag-visual .hero-bag[data-bag-image=luggage]{height:88%;width:92%;left:2.5%;top:3%}
  html:not(.v1-showroom) .bag-visual .hero-bag[data-bag-image=backpack]{height:93%;width:92%;left:4%;top:1%}
}
@media(prefers-reduced-motion:reduce){.hero-bag,.hotspots,.hotspot,.hotspot-label{transition:none!important}}