/* 홈 장점 — 한 번에 하나만 크게. 내용에 맞는 전용 아이콘 모션 16개(틀 없이 아이콘만).
   장면이 화면에 보이는 동안 3초마다 다음 장점으로 넘어가고, 누르면 바로 다음으로 간다.
   현재 줄(li.cur)에만 .in 이 붙어 그 아이콘 모션이 재생된다. JS 가 없으면 평범한 목록이다. */
.hs-ic{ flex:none; display:grid; place-items:center; }
.hs-ic:empty{ display:none; }
.hs-ic svg{ width:30px; height:30px; display:block; overflow:visible; }
.hs-ic svg *{ transform-box:fill-box; transform-origin:center; }
.hs-ic svg [transform]{ transform-box:view-box; transform-origin:0 0; } /* 속성 transform(rotate 등)은 SVG 원래 방식 그대로 */

.hs-live .hs-adv{ display:grid; margin-top:26px; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }
.hs-live .hs-adv li{ grid-area:1/1; align-self:center; gap:16px; opacity:0; visibility:hidden; transform:translateY(12px);
  font-size:clamp(22px,2.7vw,32px); line-height:1.3; letter-spacing:-.03em;
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .4s; }
.hs-live .hs-adv li.cur{ opacity:1; visibility:visible; transform:none; transition-delay:.12s,.12s,0s; }
.hs-live .hs-ic svg{ width:60px; height:60px; }
.hs-prog{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.hs-prog b{ position:relative; flex:none; width:120px; height:2px; background:#E3EAE8; overflow:hidden; }
.hs-prog i{ position:absolute; inset:0; background:var(--mint-ink); transform:scaleX(0); transform-origin:left; }
.hs-prog i.go{ animation:hsProg var(--hs-gap,3s) linear forwards; }
.hs-dots{ display:flex; gap:2px; }
.hs-dots button{ position:relative; width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; }
.hs-dots button::before{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#C9D6D2; transition:background .2s, transform .2s; }
.hs-dots button.on::before{ background:var(--mint-ink); transform:scale(1.25); }
.hs-dots button:focus-visible{ outline:2px solid var(--mint-ink); outline-offset:-2px; border-radius:50%; }
.hs-prog em{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
@keyframes hsProg{ to{ transform:scaleX(1) } }

/* 1 동의서가 들어오고 X 로 지워진다 */
.in .ic-nodoc .p{ animation:icNoDoc 1.5s cubic-bezier(.2,.8,.2,1) both; }
.in .ic-nodoc .x{ stroke-dasharray:100; animation:icDraw .5s ease-out .75s both; }
@keyframes icNoDoc{ 0%{ transform:translateX(-14px) rotate(-8deg); opacity:0 } 35%{ transform:none; opacity:1 } 100%{ transform:none; opacity:.85 } }
@keyframes icDraw{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }

/* 2 카드 실적 게이지가 차오른다 */
.ic-ring .r{ stroke-dashoffset:22; }
.in .ic-ring .r{ stroke-dasharray:100; animation:icRing 1.4s cubic-bezier(.3,.7,.2,1) both; }
@keyframes icRing{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:22 } }

/* 3 공제 태그가 흔들리며 %가 한 바퀴 돈다 */
.in .ic-pct .t{ animation:icTag 1.1s cubic-bezier(.22,1,.36,1) both; transform-origin:50% 0; }
.in .ic-pct .s{ animation:icSpin .9s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes icTag{ 0%{ transform:rotate(-24deg) } 55%{ transform:rotate(9deg) } 100%{ transform:rotate(0) } }
@keyframes icSpin{ from{ transform:scale(0) rotate(-270deg) } to{ transform:none } }

/* 4 콩이 포물선으로 날아가 선물 상자에 들어간다 */
.in .ic-bean .b{ animation:icBean 1.3s cubic-bezier(.4,0,.4,1) both; }
.in .ic-bean .box{ animation:icBox .5s ease-out .95s both; transform-origin:50% 100%; }
@keyframes icBean{ 0%{ transform:translate(-16px,-8px) scale(.5); opacity:0 } 20%{ opacity:1 } 60%{ transform:translate(-5px,-2px) scale(1) } 100%{ transform:translate(0,17px) scale(.55); opacity:0 } }
@keyframes icBox{ 0%{ transform:scale(1) } 40%{ transform:scale(1.14,.88) } 100%{ transform:scale(1) } }

/* 5 점이 계좌까지 곧장 달려가 도착 표시 */
.in .ic-route .d{ animation:icRun 1.2s ease-in-out 2 both; }
.in .ic-route .bk{ animation:icPop .5s cubic-bezier(.22,1,.36,1) 1.1s both; }
@keyframes icRun{ 0%{ transform:translateX(0); opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ transform:translateX(16px); opacity:0 } }
@keyframes icPop{ from{ transform:scale(.6) } to{ transform:scale(1) } }

/* 6 현금이 접혀서 카드로 바뀐다 */
.in .ic-morph .bill{ animation:icOut .45s ease-in .35s both; }
.in .ic-morph .cd{ animation:icIn .5s cubic-bezier(.22,1,.36,1) .8s both; }
@keyframes icOut{ to{ transform:scaleX(0) } }
@keyframes icIn{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* 7 카드 한 묶음이 세 장으로 펼쳐진다 */
.in .ic-fan .c1{ animation:icFanL 1s cubic-bezier(.22,1,.36,1) .3s both; }
.in .ic-fan .c3{ animation:icFanR 1s cubic-bezier(.22,1,.36,1) .3s both; }
@keyframes icFanL{ from{ transform:none } to{ transform:translate(-4px,3px) rotate(-17deg) } }
@keyframes icFanR{ from{ transform:none } to{ transform:translate(4px,3px) rotate(17deg) } }
.ic-fan .c1{ transform:translate(-4px,3px) rotate(-17deg); } .ic-fan .c3{ transform:translate(4px,3px) rotate(17deg); }

/* 8 여섯 칸이 한 달씩 켜진다 */
.ic-months rect{ fill:#1F7A63; }
.in .ic-months rect{ animation:icMonth .5s ease-out both; }
.in .ic-months .m2{ animation-delay:.15s } .in .ic-months .m3{ animation-delay:.3s } .in .ic-months .m4{ animation-delay:.45s }
.in .ic-months .m5{ animation-delay:.6s } .in .ic-months .m6{ animation-delay:.75s }
@keyframes icMonth{ 0%{ fill:#DDF1EB; transform:scale(.8) } 60%{ transform:scale(1.12) } 100%{ fill:#1F7A63; transform:scale(1) } }

/* 9 카드번호가 한 칸씩 찍히고 커서가 깜빡인다 */
.in .ic-type .k{ animation:icDot .4s cubic-bezier(.22,1,.36,1) both; }
.in .ic-type .k2{ animation-delay:.25s } .in .ic-type .k3{ animation-delay:.5s }
.in .ic-type .cr{ animation:icBlink .8s steps(1) .2s 4 both; }
@keyframes icDot{ from{ transform:scale(0) } to{ transform:scale(1) } }
@keyframes icBlink{ 50%{ opacity:0 } }

/* 10 0원 동전이 팽그르르 */
.in .ic-zero .co{ animation:icCoin 1.3s ease-in-out both; }
@keyframes icCoin{ 0%{ transform:scaleX(1) } 20%{ transform:scaleX(0) } 40%{ transform:scaleX(1) } 60%{ transform:scaleX(0) } 80%{ transform:scaleX(1) } 100%{ transform:scale(1.08) } }

/* 11 정산 스위치가 10분 → 익일 → 3일로 넘어간다 */
.in .ic-switch .kb{ animation:icSw 2.4s cubic-bezier(.5,0,.3,1) both; }
@keyframes icSw{ 0%,18%{ transform:translateX(0) } 30%,52%{ transform:translateX(11px) } 66%,100%{ transform:translateX(22px) } }

/* 12 개인 카드가 뒤집혀 법인 카드로 */
.in .ic-corp .cg{ animation:icOut2 1.2s ease-in-out .2s both; }
.in .ic-corp .a{ animation:icA 1.2s linear .2s both; }
.in .ic-corp .b{ animation:icB 1.2s linear .2s both; }
.ic-corp .a{ opacity:0; } .ic-corp .b{ opacity:1; }
@keyframes icOut2{ 0%{ transform:scaleX(1) } 50%{ transform:scaleX(0) } 100%{ transform:scaleX(1) } }
@keyframes icA{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@keyframes icB{ 0%,49%{ opacity:0 } 50%,100%{ opacity:1 } }

/* 13 자물쇠가 철컥 잠긴다 */
.in .ic-lock .sh{ animation:icShackle .7s cubic-bezier(.4,0,.2,1) .35s both; }
.in .ic-lock .lk{ animation:icShake .35s ease-out 1s both; }
@keyframes icShackle{ from{ transform:translateY(-7px) } to{ transform:none } }
@keyframes icShake{ 0%{ transform:translateY(0) } 40%{ transform:translateY(2px) } 100%{ transform:none } }

/* 14 말풍선이 튀어나오고 점 세 개가 통통 */
.in .ic-chat .bb{ animation:icBubble .6s cubic-bezier(.22,1,.36,1) both; transform-origin:0% 100%; }
.in .ic-chat .d{ animation:icBounce .6s cubic-bezier(.45,0,.55,1) .5s 3 both; }
.in .ic-chat .d2{ animation-delay:.65s } .in .ic-chat .d3{ animation-delay:.8s }
@keyframes icBubble{ from{ transform:scale(.2) } to{ transform:scale(1) } }
@keyframes icBounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }

/* 15 시계가 한 바퀴 돌며 24시간 고리를 채운다 */
.ic-clock .hd{ transform-box:view-box; transform-origin:24px 24px; }
.in .ic-clock .hd{ animation:icTurn 1.8s cubic-bezier(.4,0,.3,1) both; }
.in .ic-clock .arc{ stroke-dasharray:100; animation:icDraw 1.8s cubic-bezier(.4,0,.3,1) both; }
@keyframes icTurn{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

/* 16 카드 둘레로 결제 물결이 퍼진다 */
.in .ic-pay .w{ animation:icWave 1.2s ease-out 3 both; }
.in .ic-pay .w2{ animation-delay:.4s }
.ic-pay .w{ opacity:0; }
@keyframes icWave{ 0%{ transform:scale(.8); opacity:.9 } 100%{ transform:scale(2.6); opacity:0 } }

@media (prefers-reduced-motion:reduce){ .hs-ic, .hs-ic *{ animation:none !important; transition:none !important; } }

/* 17 QR 위로 스캔 선이 오르내린다 */
.in .ic-qrscan .sc{ animation:icScan 1.1s ease-in-out 3 both; }
@keyframes icScan{ 0%,100%{ transform:translateY(-12px) } 50%{ transform:translateY(12px) } }

/* 장점 한 줄: 글자가 한 글자씩 솟아오르는 모션 (아이콘은 쓰지 않음) */
.hs-live .hs-adv{ justify-items:center; margin-top:22px; }
.hs-live .hs-adv li{ justify-content:center; text-align:center; font-size:clamp(22px,3vw,34px) !important; color:#1F7A63; }
.hs-prog{ justify-content:center; }
.hs-prog b{ display:block !important; width:90px; }
.hs-adv .w{ display:inline-block; white-space:nowrap; }
.hs-adv .c{ display:inline-block; white-space:pre; }
.hs-live .hs-adv li.cur .c{ animation:kIn .8s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * 26ms + 120ms); }
@keyframes kIn{ from{ opacity:0; transform:translateY(70%); filter:blur(7px) } to{ opacity:1; transform:none; filter:blur(0) } }
@media (prefers-reduced-motion:reduce){ .hs-live .hs-adv li.cur .c{ animation:none; } }
#scenes .hs-ic{ display:none; }