/* 홈 영상 칸 슬라이드: 1 영상 / 2 10월 쇼핑대전 배너 (2026-10-27) */
#app .hvid.es-on .es-s{position:absolute;inset:0;width:100%;height:100%;transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
#app .hvid.es-on[data-es="2"] .es-s1{transform:translateX(-100%)}
#app .hvid.es-on .es-s2{transform:translateX(100%);overflow:hidden;background:#2a63c9}
#app .hvid.es-on[data-es="2"] .es-s2{transform:none}
#app .hvid .es-s2 img{position:absolute;display:block;border:0;max-width:none;inset:auto;object-fit:fill}
#app .hvid .es-s2 .es-fill{inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px)}
#app .hvid .es-stage{position:absolute;left:0;top:0;transform-origin:0 0}
#app .hvid .es-stage .es-l{pointer-events:none;user-select:none;-webkit-user-select:none}
/* 디오라마 둥둥 */
@keyframes esFloat{0%{transform:translateY(0)}100%{transform:translateY(-16px)}}
#app .hvid .es-float{animation:esFloat 3.2s ease-in-out infinite alternate}
/* 혜택 카드 스퀴시 바운스 등장 (배너가 보일 때마다 하나씩) */
@keyframes esPop{0%{opacity:0;transform:translateY(40px) scale(.35,.3)}45%{opacity:1;transform:translateY(0) scale(1.12,.86)}65%{transform:scale(.93,1.08)}82%{transform:scale(1.03,.97)}100%{opacity:1;transform:none}}
#app .hvid .es-card{transform-origin:50% 90%}
#app .hvid[data-es="2"] .es-card{animation:esPop .7s cubic-bezier(.3,1.3,.5,1) both}
#app .hvid[data-es="2"] .es-c1{animation-delay:.35s}#app .hvid[data-es="2"] .es-c2{animation-delay:.53s}
#app .hvid[data-es="2"] .es-c3{animation-delay:.71s}#app .hvid[data-es="2"] .es-c4{animation-delay:.89s}
/* 점 버튼: 클레이 하늘색/남색 */
#app .hvid .es-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:2px;z-index:3;pointer-events:none}
#app .hvid .es-dot{pointer-events:auto;width:auto;min-width:28px;height:28px;padding:0 4px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
#app .hvid .es-dot::after{content:"";display:block;width:12px;height:12px;border-radius:99px;background:linear-gradient(180deg,#E3EEFC,#A9C6F0);box-shadow:inset 0 -2px 0 rgba(28,58,140,.28),inset 0 2px 1px rgba(255,255,255,.9),0 2px 5px rgba(8,24,80,.35);transition:width .4s cubic-bezier(.3,1.7,.5,1),background .3s}
#app .hvid .es-dot.on::after{width:30px;background:linear-gradient(180deg,#4A72D6,#1C3A8C);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),inset 0 2px 1px rgba(255,255,255,.45),0 2px 6px rgba(8,24,80,.4);animation:esDot .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes esDot{0%{transform:scale(.7,.6)}50%{transform:scale(1.15,.85)}75%{transform:scale(.95,1.08)}100%{transform:none}}
/* PC 좌우 화살표 */
#app .hvid .es-arw{position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#1C3A8C;
  background:radial-gradient(circle at 34% 28%,#fff 0,#E3EEFC 35%,#A9C6F0 100%);box-shadow:inset 0 -3px 0 rgba(28,58,140,.25),inset 0 2px 2px rgba(255,255,255,.9),0 4px 10px rgba(8,24,80,.3);opacity:.92;transition:opacity .2s}
#app .hvid .es-arw:hover{opacity:1}
#app .hvid .es-prev{left:12px}#app .hvid .es-next{right:12px}
@media (prefers-reduced-motion: reduce){
  #app .hvid.es-on .es-s{transition:none}
  #app .hvid .es-float,#app .hvid[data-es="2"] .es-card,#app .hvid .es-dot.on::after{animation:none!important}
  #app .hvid .es-dot::after{transition:none}
}