/* 지페 · 홈 모션 (HM) — 기존 섹션 보강
   manifesto · multipay · aimenu · real · how · values · download · partner (+ kit 갤러리)
   원칙: transform/opacity 위주 · '처음 숨김' 상태는 섹션에 .fx-live(JS가 모션을 켠 뒤)가 붙었을 때만 ·
         prefers-reduced-motion → JS가 .fx-live 를 달지 않아 최종 상태 그대로 · 호버 효과는 포커스/탭에도 · 레이아웃 이동 없음 */

@keyframes fxPop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes fxRise{from{opacity:0;transform:translate3d(0,22px,0)}}
@keyframes fxRing{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.45)}}

/* ── 결제의 기준을 바꿉니다. ───────────────────────── */
.mf__in,.tick{position:relative;z-index:1}
.mf::before{content:"";position:absolute;z-index:0;left:0;top:0;width:min(64vw,880px);aspect-ratio:1;margin:calc(min(64vw,880px)/-2) 0 0 calc(min(64vw,880px)/-2);border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,77,.14),rgba(30,77,216,.1) 52%,transparent 72%);opacity:0;transform:translate3d(var(--sx,0px),var(--sy,0px),0);transition:opacity .7s;pointer-events:none}
.mf.fx-spot::before{opacity:1}
.mf.fx-live .fxw{opacity:.3;transition:opacity .4s ease}
.mf.fx-live .fxw.on{opacity:1}
/* JS 없이도 읽히게: 헤드라인 줄 · 밑줄을 숨긴 채로 두지 않음 */
html:not(.js) .mf__ln>span{transform:none}
html:not(.js) .mf__ul path{stroke-dashoffset:0}
.mf__badge b{position:relative;display:inline-block;transform-origin:50% 62%}
.mf.fx-live:not(.fx-badge) .mf__badge b{opacity:0}
.mf__badge b::after{content:"";position:absolute;inset:-.1em -.3em;border:2px solid var(--wave);border-radius:999px;opacity:0;pointer-events:none}
.mf__badge.fx-ring b::after{animation:fxRing 1.3s var(--out) 2}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mf__badge.fx-shine b{background:linear-gradient(105deg,var(--wave) 38%,#fff 50%,var(--wave) 62%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShine 1.5s ease-out 1}
}
@keyframes fxShine{from{background-position:100% 0}to{background-position:0 0}}
.tick[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:-8px;border-radius:0}

/* ── 다중결제 체험: 값이 바뀔 때의 손맛 (동작 로직은 multipay.js 그대로) ── */
.mp5.fx-live:not(.fx-in) .mp5__box{opacity:0;transform:translate3d(0,34px,0)}
.mp5.fx-live .mp5__box{transition:opacity .8s var(--out),transform .95s var(--out)}
.mp5.fx-live:not(.fx-in) .mpr{opacity:0}
.mp5.fx-live.fx-in .mpr{animation:fxRise .75s var(--out) backwards}
.mp5.fx-live.fx-in .mpr:nth-child(1){animation-delay:.3s}
.mp5.fx-live.fx-in .mpr:nth-child(2){animation-delay:.42s}
.mp5.fx-live.fx-in .mpr:nth-child(3){animation-delay:.54s}
.mpr{position:relative;isolation:isolate}
.mpr::before{content:"";position:absolute;z-index:-1;inset:-10px -14px;border-radius:20px;background:var(--c);opacity:0;transform:scale(.97);transition:opacity .25s,transform .4s var(--out);pointer-events:none}
.mpr.is-act::before,.mpr:focus-within::before{opacity:.1;transform:none}
.mpr__h strong{transform-origin:100% 50%}
.mpr__r::-webkit-slider-thumb{transition:transform .3s var(--spring),box-shadow .3s}
.mpr__r:active::-webkit-slider-thumb,.mpr.is-act .mpr__r::-webkit-slider-thumb{box-shadow:0 3px 9px rgba(25,31,40,.22),0 0 0 9px rgba(30,77,216,.14);box-shadow:0 3px 9px rgba(25,31,40,.22),0 0 0 9px color-mix(in srgb,var(--c) 24%,transparent)}
.mpr__r:focus-visible::-webkit-slider-thumb{box-shadow:0 3px 9px rgba(25,31,40,.22),0 0 0 6px rgba(30,77,216,.25)}
.mp5.fx-live.fx-in .mp5__box:not(.fx-touched) .mpr:first-child .mpr__r:not(:disabled)::-webkit-slider-thumb{animation:fxPing 2.4s ease-out 1.4s 4}
.mp5.fx-live.fx-in .mp5__box:not(.fx-touched) .mpr:first-child .mpr__r:not(:disabled)::-moz-range-thumb{animation:fxPing 2.4s ease-out 1.4s 4}
@keyframes fxPing{0%{box-shadow:0 3px 9px rgba(25,31,40,.22),0 0 0 0 rgba(30,77,216,.5)}75%,100%{box-shadow:0 3px 9px rgba(25,31,40,.22),0 0 0 18px rgba(30,77,216,0)}}
.mp5__bar i{transition:width .55s cubic-bezier(.3,1.35,.5,1)}
.mp5__sum b{display:inline-flex;align-items:center;gap:.5em}
.mp5__sum b::before{content:"";flex:none;width:1.3em;height:1.3em;border-radius:50%;background:#0b8a5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/68% no-repeat}
.mp5__sum.fx-tick b::before{animation:fxPop .45s var(--spring)}
.mp5__pay{position:relative}
.mp5__pay::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none}
.mp5__box.is-paid .mp5__pay::after{animation:fxPayRing 1s var(--out)}
@keyframes fxPayRing{0%{opacity:1;box-shadow:0 0 0 0 rgba(11,138,90,.5)}100%{opacity:0;box-shadow:0 0 0 18px rgba(11,138,90,0)}}
.mp5__box.is-paid .mp5__pay::before{content:"";flex:none;width:1.15em;height:1.15em;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230b8a5a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;animation:fxPop .5s var(--spring)}
.mp5__box.is-paid .mp5__bar i{animation:fxHop .55s ease-out}
.mp5__box.is-paid .mp5__bar i:nth-child(2){animation-delay:.09s}
.mp5__box.is-paid .mp5__bar i:nth-child(3){animation-delay:.18s}
@keyframes fxHop{40%{filter:brightness(1.3)}}
.mp5__box.is-paid .mp5__msg{animation:fxRise .5s var(--out)}

/* ── AI 주문: 등록 → 대화 → 주문 순서대로 켜지는 흐름 ────── */
.aim__in{position:relative}
.aim__ctl{display:none;justify-content:center;margin-top:clamp(24px,2.4vw,40px)}
.aim.fx-live .aim__ctl{display:flex}
.aim__replay{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s,transform .3s var(--spring)}
.aim__replay:hover{background:rgba(255,255,255,.2)}
.aim__replay:active{transform:scale(.92)}
.aim__replay svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--out)}
.aim__replay:hover svg,.aim__replay:focus-visible svg{transform:rotate(-200deg)}
.aim__replay:focus-visible{outline-color:#b9a9ff}
.aim.is-reset *,.aim.is-reset *::before,.aim.is-reset *::after{transition:none!important;animation:none!important}
.aic{transition:transform .5s var(--out),box-shadow .5s}
.aic::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle 300px at var(--mx,50%) var(--my,0%),rgba(124,92,252,.2),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none}
.aic:hover::before{opacity:1}
.aic>*{position:relative}
.aic__bar{display:none}
.aim.fx-live .aic__bar{display:block;position:absolute;left:clamp(24px,2.6vw,44px);right:clamp(24px,2.6vw,44px);top:clamp(12px,1.1vw,18px);height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;pointer-events:none}
.aim.fx-live .aic__bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ai),#b9a9ff);transform-origin:0 50%;transform:scaleX(0)}
.aim.fx-live.s1 .aic--1 .aic__bar::after{transform:none;transition:transform 2.1s linear}
.aim.fx-live.s2 .aic--2 .aic__bar::after{transform:none;transition:transform 3s linear}
.aim.fx-live.s3 .aic--3 .aic__bar::after{transform:none;transition:transform 1.8s linear}
.aim.fx-live .aic.is-cur{z-index:2;transform:translate3d(0,-6px,0);box-shadow:inset 0 0 0 1px rgba(124,92,252,.55),0 24px 48px -24px rgba(124,92,252,.5)}
.aim.fx-live .aic__who span{transition:background-color .4s,color .4s,transform .5s var(--spring)}
.aim.fx-live .aic.is-cur .aic__who span,.aim.fx-live .aic.is-done .aic__who span{background:var(--ai);color:#fff}
.aim.fx-live .aic.is-cur .aic__who span{transform:scale(1.15)}
.aim.fx-live .aic{cursor:pointer}
/* 카드 사이 연결점 */
.aim.fx-live .aic:not(:last-child)::after{background-color:#3a3f4d;transition:background-color .4s,scale .4s var(--spring)}
.aim.fx-live.s2 .aic--1::after,.aim.fx-live.s3 .aic--2::after{background-color:var(--ai);animation:fxChev .8s var(--out)}
@keyframes fxChev{0%{scale:1;box-shadow:0 0 0 5px var(--night),0 0 0 0 rgba(124,92,252,.7)}35%{scale:1.4}100%{scale:1;box-shadow:0 0 0 5px var(--night),0 0 0 18px rgba(124,92,252,0)}}
/* 1 · 메뉴 등록 */
.aim.fx-live:not(.s1) .aif--reg li{opacity:0;transform:translate3d(0,12px,0)}
.aim.fx-live .aif--reg li{transition:opacity .5s var(--out),transform .6s var(--out)}
.aim.fx-live.s1 .aif--reg li:nth-child(1){transition-delay:.15s}
.aim.fx-live.s1 .aif--reg li:nth-child(2){transition-delay:.5s}
.aim.fx-live.s1 .aif--reg li:nth-child(3){transition-delay:.85s}
.aim.fx-live:not(.s1) .aif--reg li i.on{transform:scale(0)}
.aim.fx-live .aif--reg li i.on{transition:transform .5s var(--spring)}
.aim.fx-live.s1 .aif--reg li:nth-child(1) i.on{transition-delay:.6s}
.aim.fx-live.s1 .aif--reg li:nth-child(2) i.on{transition-delay:.95s}
.aim.fx-live.s1 .aif__add>span:first-child{animation:fxPlus 1.1s var(--out) 1.3s backwards}
@keyframes fxPlus{0%{rotate:-90deg;scale:.6}60%{rotate:10deg;scale:1.14}100%{rotate:0deg;scale:1}}
/* 2 · 대화 */
.aif__typing{display:none}
.aim.fx-live .aif--chat .aif__ai{position:relative}
.aim.fx-live .aif__typing{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.3em;padding:.85em 1.05em;border-radius:1.2em 1.2em 1.2em .3em;background:#fff;opacity:0;pointer-events:none}
.aim.fx-live.s2 .aif--chat .aif__ai{animation:fxBubble 2.6s linear both}
@keyframes fxBubble{0%,80%{background-color:transparent}100%{background-color:#fff}}
.aif__typing i{width:.5em;height:.5em;border-radius:50%;background:#b9a9ff}
.aim.fx-live.s2 .aif__typing{animation:fxTyping 1.5s linear .6s backwards}
.aim.fx-live.s2 .aif__typing i{animation:fxDot .8s ease-in-out .6s 2}
.aim.fx-live.s2 .aif__typing i:nth-child(2){animation-delay:.72s}
.aim.fx-live.s2 .aif__typing i:nth-child(3){animation-delay:.84s}
@keyframes fxTyping{0%{opacity:0}10%,86%{opacity:1}100%{opacity:0}}
@keyframes fxDot{50%{transform:translate3d(0,-.35em,0)}}
.aim.fx-live:not(.s2) .aif__me{opacity:0;transform:translate3d(18px,8px,0) scale(.96)}
.aim.fx-live .aif__me{transition:opacity .4s,transform .55s var(--out)}
.aim.fx-live.s2 .aif__me{transition-delay:.1s}
.aim.fx-live:not(.s2) .aif--chat .aif__ai{opacity:0;transform:translate3d(-14px,8px,0)}
.aim.fx-live .aif--chat .aif__ai{transition:opacity .4s,transform .55s var(--out)}
.aim.fx-live.s2 .aif--chat .aif__ai{transition-delay:.5s}
.aim.fx-live:not(.s2) .aif__ai>p,.aim.fx-live:not(.s2) .aif__card{opacity:0}
.aim.fx-live .aif__ai>p,.aim.fx-live .aif__card{transition:opacity .45s,transform .6s var(--spring)}
.aim.fx-live.s2 .aif__ai>p{transition-delay:2.1s}
.aim.fx-live.s2 .aif__card{transition-delay:2.5s}
.aim.fx-live:not(.s2) .aif__card{transform:translate3d(0,10px,0) scale(.96)}
/* 3 · 바로 주문 */
.aim.fx-live:not(.s3) .aif__row{opacity:0;transform:translate3d(0,14px,0)}
.aim.fx-live .aif__row{transition:opacity .5s var(--out),transform .6s var(--out)}
.aim.fx-live:not(.s3) .aif__row i{transform:scale(0)}
.aim.fx-live .aif__row i{transition:transform .5s var(--spring)}
.aim.fx-live.s3 .aif__row i{transition-delay:.55s}
.aim.fx-live:not(.s3) .aif__pay{opacity:.4;transform:scale(.97)}
.aim.fx-live .aif__pay{transition:opacity .5s,transform .6s var(--spring)}
.aim.fx-live.s3 .aif__pay{transition-delay:.35s;animation:fxPayPulse 1.1s var(--out) 1s}
@keyframes fxPayPulse{0%{box-shadow:0 0 0 0 rgba(30,77,216,.6)}100%{box-shadow:0 0 0 16px rgba(30,77,216,0)}}

/* ── 가맹점 전용 홍보물: 드래그 · 기울임 · 확대 힌트 ──────── */
/* 스토리 모드(≥1024px): 제목 · 소개 · 태그를 2열로 낮춰, 첫 사진이 태그 줄을 덮지 않게 (사진 높이 = 남는 높이) */
.is-story .story--k .k__head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(28px,4vw,72px);align-items:end;width:calc(var(--W)*.88);top:calc(var(--hdr) + 3.5svh)}
.is-story .story--k .k__head .own__t{grid-row:1/3;padding:0}
.is-story .story--k .k__head .k__p{align-self:end;margin:0}
.is-story .story--k .k__head .k__tags{align-self:start;margin-top:.9em}
.is-story .k__ph{height:min(clamp(560px,38vw,700px),calc(100svh - 10.5svh - var(--hdr) - min(8.13vw,156px) - 32px))}
.k__ph{transition:transform .3s var(--out),box-shadow .4s}
.k__ph img{-webkit-user-drag:none;user-select:none}
.k__ph.is-tilt{z-index:2;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.012);box-shadow:0 30px 60px -28px rgba(0,0,0,.7);transition:transform .12s linear,box-shadow .4s}
.k__ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.2),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.k__ph.is-tilt::after{opacity:1}
.k__ph::before{content:"";position:absolute;z-index:2;right:14px;top:14px;width:40px;height:40px;border-radius:50%;background:rgba(10,16,34,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/g%3E%3C/svg%3E") center/22px no-repeat;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:scale(.8);transition:opacity .25s,transform .35s var(--spring);pointer-events:none}
.k__ph:hover::before,.k__ph:focus-within::before{opacity:1;transform:none}
@media (hover:none){.k__ph::before{opacity:.9;transform:none}}
.k__ph img:focus-visible{outline:3px solid var(--wave);outline-offset:-5px;border-radius:inherit}
.k__track.is-drag,.k__track.is-drag [data-lightbox]{cursor:grabbing;-webkit-user-select:none;user-select:none}
.k__cur{position:fixed;z-index:60;left:0;top:0;display:flex;align-items:center;gap:.5em;padding:.6em 1.05em;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:14px;font-weight:800;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translate3d(-200px,-200px,0);transition:opacity .2s;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.k__cur.is-on{opacity:1}

/* ── 실제 화면: 탭 인디케이터 · 폰 기울임 · 캡션 ─────────── */
.real.fx-live:not(.fx-in) .rp{opacity:0;scale:.92}
.real.fx-live .rp{transition:translate .5s var(--out),rotate .5s var(--out),opacity .7s var(--out) calc(var(--i,0)*.1s),scale .8s var(--out) calc(var(--i,0)*.1s)}
.real__tabs{position:relative;isolation:isolate;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;gap:2px;padding:5px;border-radius:999px;background:var(--mist)}
.real__tabs button{position:relative;background:transparent}
.real__tabs.fx-tabs button[aria-selected="true"]{background:transparent;color:#fff}
.real__tabs.fx-tabs::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--tw,0);height:var(--th,0);border-radius:999px;background:var(--ink);transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .5s var(--spring),width .45s var(--out),height .45s var(--out)}
.rp__f{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--out),box-shadow .5s}
.rp.is-tilt .rp__f{transition:transform .12s linear,box-shadow .5s}
.rp__f::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.rp.is-tilt .rp__f::after{opacity:1}
.rp.is-on .rp__f,.rp:hover .rp__f{box-shadow:0 2.8em 4.6em -1.8em rgba(30,77,216,.38)}
.real__cap{position:relative}
.real__cap.fx-cap{animation:fxRise .5s var(--out)}
.real__cap:not(:empty)::before,.real__cap:not(:empty)::after{content:"";position:absolute;left:50%;bottom:-16px;width:64px;height:3px;margin-left:-32px;border-radius:3px}
.real__cap::before{background:var(--line)}
.real__cap::after{background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.real.fx-live .real__cap.fx-cap::after{animation:fxCapBar 3.2s linear forwards}
.real__stage:has(.rp:hover)+.real__cap::after{animation-play-state:paused}
@keyframes fxCapBar{to{transform:none}}

/* ── 이용방법: 스크롤에 따라 이어지는 선 ──────────────────── */
.how__steps{position:relative}
.how.fx-live .how__steps::before,.how.fx-live .how__steps::after{content:"";position:absolute;left:calc(.935em - 1px);top:var(--y0,0px);height:calc(var(--y1,0px) - var(--y0,0px));width:2px;border-radius:2px;pointer-events:none}
.how.fx-live .how__steps::before{background:var(--line)}
.how.fx-live .how__steps::after{background:linear-gradient(var(--blue),#6f93ff);transform-origin:50% 0;transform:scaleY(var(--f,0));transition:transform .25s linear}
.how__steps li::before{z-index:1;transition:background-color .4s,color .4s,box-shadow .4s,transform .45s var(--spring)}
.how.fx-live .how__steps li:not(.is-on)::before{background:#fff;color:var(--ink3);box-shadow:inset 0 0 0 2px var(--line)}
.how.fx-live .how__steps li.is-pop::before{animation:fxPop .55s var(--spring)}
.how__steps li:hover::before{transform:scale(1.14)}
.how__steps li b{transition:transform .35s var(--out)}
.how__steps li:hover b{transform:translate3d(4px,0,0)}
.how.fx-live:not(.fx-in) .how__col{opacity:0;transform:translate3d(0,28px,0)}
.how.fx-live .how__col{transition:opacity .8s var(--out),transform .95s var(--out)}
.how.fx-live .how__col:nth-child(2){transition-delay:.12s}
.how.fx-live:not(.fx-in) .vcard{opacity:0;transform:translate3d(0,20px,0)}
.how.fx-live .vcard{transition:opacity .8s var(--out) .25s,transform .9s var(--out) .25s}
.vcard img{transition:transform .8s var(--out)}
.vcard:hover img,.vcard:focus-visible img{transform:scale(1.04)}
.vcard__play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:0}
.vcard:hover .vcard__play::after,.vcard:focus-visible .vcard__play::after{animation:fxRing 1.3s var(--out) infinite}

/* ── 핵심 가치: 순서대로 등장 · 호버 스포트라이트 ───────────── */
.val__list li{position:relative;isolation:isolate;transition:opacity .35s}
.val__list li::before{content:"";position:absolute;z-index:-1;inset:-14px -16px;border-radius:22px;background:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),rgba(30,77,216,.1),transparent 72%);opacity:0;transition:opacity .35s;pointer-events:none}
.val__list li.is-act::before{opacity:1}
.val__list.has-act li:not(.is-act){opacity:.45}
.val__list b{transition:color .35s}
.val__list li.is-act b{color:var(--blue)}
.val.fx-live .val__list li{border-top-color:transparent}
.val.fx-live .val__list li>:is(b,p){transition:opacity .8s var(--out) calc(.25s + var(--vi,0)*.12s),transform .95s var(--out) calc(.25s + var(--vi,0)*.12s),color .35s}
.val.fx-live:not(.fx-in) .val__list li>:is(b,p){opacity:0;transform:translate3d(0,26px,0)}
.val.fx-live .val__list li::after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--ink);transform-origin:0 50%;transition:transform .9s var(--out) calc(var(--vi,0)*.12s)}
.val.fx-live:not(.fx-in) .val__list li::after{transform:scaleX(0)}

/* ── 앱 받기: QR 스캔 · 스토어 버튼 ─────────────────────── */
.dl.fx-live:not(.fx-vis) .dl__pulse i,.dl.fx-live:not(.fx-vis) .dl__qr::after{animation-play-state:paused}
.dl.fx-live:not(.fx-in) .dl__grp{opacity:0;transform:translate3d(0,24px,0)}
.dl.fx-live .dl__grp{transition:opacity .8s var(--out),transform .95s var(--out)}
.dl.fx-live .dl__grp+.dl__grp{transition-delay:.15s}
.dl.fx-live:not(.fx-in) .dl__qr{opacity:0;scale:.9}
.dl.fx-live .dl__qr{transition:opacity .8s var(--out) .3s,scale .9s var(--spring) .3s}
.dl__qr{overflow:hidden}
.dl__qr::before{content:"";position:absolute;z-index:1;inset:11px;border-radius:14px;pointer-events:none;background:
  linear-gradient(#1e4dd8,#1e4dd8) 0 0/20px 3px,linear-gradient(#1e4dd8,#1e4dd8) 0 0/3px 20px,
  linear-gradient(#1e4dd8,#1e4dd8) 100% 0/20px 3px,linear-gradient(#1e4dd8,#1e4dd8) 100% 0/3px 20px,
  linear-gradient(#1e4dd8,#1e4dd8) 0 100%/20px 3px,linear-gradient(#1e4dd8,#1e4dd8) 0 100%/3px 20px,
  linear-gradient(#1e4dd8,#1e4dd8) 100% 100%/20px 3px,linear-gradient(#1e4dd8,#1e4dd8) 100% 100%/3px 20px;
  background-repeat:no-repeat;transition:transform .5s var(--spring)}
.dl__qr:hover::before{transform:scale(.93)}
.dl.fx-live .dl__qr::after{content:"";position:absolute;z-index:1;left:14px;right:14px;top:14px;bottom:14px;background:linear-gradient(180deg,transparent 0,transparent 78%,rgba(30,77,216,.16) 93%,rgba(30,77,216,.95) 99%,rgba(30,77,216,0) 100%);transform:translate3d(0,-100%,0);opacity:0;pointer-events:none;animation:fxScan 3.4s cubic-bezier(.45,0,.3,1) infinite}
@keyframes fxScan{0%{opacity:0;transform:translate3d(0,-100%,0)}8%{opacity:1}56%{opacity:1;transform:translate3d(0,0,0)}64%,100%{opacity:0;transform:translate3d(0,0,0)}}
.dl .store{position:relative;overflow:hidden;isolation:isolate}
.dl .store::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translate3d(-130%,0,0);transition:transform .75s var(--out);pointer-events:none}
.dl .store--o::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%)}
.dl .store:hover::after,.dl .store:focus-visible::after{transform:translate3d(130%,0,0)}
.dl .store:active{transform:scale(.97)}
.dl__pc::after{content:"";flex:none;width:.6em;height:.6em;margin-left:.2em;border-top:2px solid #fff;border-right:2px solid #fff;opacity:0;transform:translate3d(-8px,0,0) rotate(45deg);transition:opacity .3s,transform .4s var(--out)}
.dl__pc:hover::after,.dl__pc:focus-visible::after{opacity:1;transform:rotate(45deg)}
.dl__pc:hover i{animation:fxPop .5s var(--spring)}

/* ── 파트너: 자석 버튼 · 스포트라이트 ───────────────────── */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta__in{position:relative;z-index:1}
.cta::before{content:"";position:absolute;z-index:0;left:0;top:0;width:min(60vw,760px);aspect-ratio:1;margin:calc(min(60vw,760px)/-2) 0 0 calc(min(60vw,760px)/-2);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent 72%);opacity:0;transform:translate3d(var(--sx,0px),var(--sy,0px),0);transition:opacity .7s;pointer-events:none}
.cta.fx-spot::before{opacity:1}
.cta.fx-live:not(.fx-in) .cta__t,.cta.fx-live:not(.fx-in) .cta__p,.cta.fx-live:not(.fx-in) .cta__row{opacity:0;transform:translate3d(0,24px,0)}
.cta.fx-live .cta__t,.cta.fx-live .cta__p,.cta.fx-live .cta__row{transition:opacity .8s var(--out),transform .95s var(--out)}
.cta.fx-live .cta__p{transition-delay:.12s}
.cta.fx-live .cta__row{transition-delay:.24s}
.cta__row .btn{transition:transform .25s var(--out),background .2s,box-shadow .25s,color .2s,translate .3s var(--out)}
.cta__row .btn:active{transform:scale(.97)}