/* 지페 · 홈 장면 스타일 (스크롤 스토리). 공통 토큰·헤더·푸터·버튼은 site.css */
/* ── 헤더 · 파도 진행 표시 ───────────────────────── */
.qnav{position:fixed;z-index:90;left:clamp(14px,1.8vw,30px);top:50%;display:none;width:24px;height:168px;margin-top:-84px;color:var(--ink);--ringc:var(--blue);--op:0;transition:color .3s}
.is-story .qnav{display:block}
.qnav[data-theme="dark"]{color:#fff;--ringc:var(--wave)}
.qnav__wave{position:absolute;inset:0;overflow:visible}
.qnav__wave path{fill:none;stroke-width:1.7;stroke-linecap:round}
.qnav__wave .w0{stroke:currentColor;opacity:.22}
.qnav__wave .w1{stroke:var(--ringc);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--op))}
.qnav a{position:absolute;left:50%;top:var(--y);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;--sp:0}
.qnav a i{position:absolute;inset:3px;border-radius:50%;border:2px solid currentColor;background:#fff;opacity:.5;transition:transform .45s var(--spring),background .3s,border-color .3s,opacity .3s}
.qnav[data-theme="dark"] a i{background:#111317}
.qnav a.on i{opacity:1;border-color:var(--ringc);background:var(--ringc);transform:scale(1.3)}
.qnav a::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--ringc) calc(var(--sp)*360deg),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2px));opacity:0;transition:opacity .3s}
.qnav a.on::before{opacity:1}
.qnav a::after{content:attr(data-label);position:absolute;left:calc(100% + 16px);top:50%;padding:.4em .85em;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-6px,-50%);transition:opacity .25s,transform .35s var(--out)}
.qnav[data-theme="dark"] a::after{background:#fff;color:var(--ink)}
.qnav a:hover::after,.qnav a:focus-visible::after{opacity:1;transform:translate(0,-50%)}


/* ── 폰 (공용; em 단위로 화면 크기와 연동) ─────────── */
.device{position:relative;width:calc(var(--ph)*.486);height:var(--ph);margin:0 auto}
.phone{position:relative;width:100%;height:100%;font-size:calc(var(--ph)/42);padding:.5em;border-radius:3.5em;background:#0b0d12;box-shadow:0 0 0 .14em #3a404c inset,0 0 0 .08em #d5d9e0,0 4em 7em -2.5em rgba(17,19,23,.5)}
.is-story .phone{transform:perspective(1500px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg));will-change:transform}
.screen{position:absolute;inset:.5em;border-radius:3em;overflow:hidden;background:#fff;color:var(--ink)}
.phone__bar{position:absolute;z-index:6;left:.5em;right:.5em;top:.5em;height:3.1em;display:flex;align-items:center;justify-content:space-between;padding:0 2em;font-size:.78em;font-weight:700;color:var(--ink);transition:color .3s}
.phone__isl{position:absolute;left:50%;top:.9em;width:6.2em;height:1.9em;margin-left:-3.1em;border-radius:1em;background:#0b0d12}
.phone__bat{position:relative;width:1.9em;height:.9em;border:.12em solid currentColor;border-radius:.3em}
.phone__bat::after{content:"";position:absolute;inset:.1em .45em .1em .1em;border-radius:.1em;background:currentColor}
.story--a[data-step="1"] .phone__bar{color:#fff}
.scr{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translate3d(0,2.4em,0) scale(.985);transition:opacity .4s ease,transform .7s var(--out),visibility 0s .7s}
.story--a[data-step="1"] .scr--qr,
.story--a[data-step="2"] .scr--menu,.story--a[data-step="3"] .scr--menu,
.story--a[data-step="3"] .scr--pay,
.story--a[data-step="4"] .scr--done,
.story--c[data-step="1"] .scr--multi,.story--c[data-step="2"] .scr--ai,.story--c[data-step="3"] .scr--map,
.story--c[data-step="4"] .scr--take,.story--c[data-step="5"] .scr--shop,.story--c[data-step="6"] .scr--pt,
.story--b[data-step="0"] .scr--listed,.story--b[data-step="1"] .scr--biz,.story--b[data-step="2"] .scr--biz,
.story--b[data-step="3"] .scr--tbl,.story--b[data-step="4"] .scr--sales,.story--b[data-step="5"] .scr--ops,
.story--b[data-step="6"] .scr--fee{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .7s var(--out),visibility 0s}
.story--b:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .scr--listed,
.story--b:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .scr--biz,
.story--b:is([data-step="4"],[data-step="5"],[data-step="6"]) .scr--tbl,
.story--b:is([data-step="5"],[data-step="6"]) .scr--sales,
.story--b[data-step="6"] .scr--ops{transform:translate3d(0,-2.4em,0) scale(.985)}

/* 공용 부품 */
.cd{display:block;width:2.2em;height:1.5em;border-radius:.35em;background:var(--blue)}
.cd--b{background:#7da2ff}
.add{position:relative;display:block;width:3.8em;height:2.1em;overflow:hidden;border:.1em solid #cfd6e4;border-radius:1.05em;color:var(--blue);font-size:.82em;font-style:normal;font-weight:700;line-height:1.95em;text-align:center}
.add i,.add u{position:absolute;inset:0;font-style:normal;text-decoration:none}
.add u{background:var(--ink);color:#fff;transform:translateY(100%);transition:transform .45s var(--spring)}
.mn__tabs{display:flex;gap:.5em;padding:0 1.4em .7em;font-size:.82em}
.mn__tabs i{padding:.45em .95em;border-radius:1em;background:var(--mist);color:var(--ink2);font-style:normal;font-weight:700}
.mn__tabs i.on{background:var(--ink);color:#fff}

/* A-1 · QR */
.scr--qr{background:#0c0f14;color:#fff}
.qr__cam{position:absolute;inset:0;background:url("../img/table_pot.webp") 28% 50%/cover;filter:brightness(.5) saturate(.85) blur(.25em);transform:scale(1.1)}
.qr__box{position:absolute;left:50%;top:44%;width:17.5em;height:17.5em;margin:-8.75em 0 0 -8.75em}
.qr__card{position:absolute;inset:1.3em;padding:1.2em;border-radius:1.4em;background:#fff;box-shadow:0 1.5em 3em rgba(0,0,0,.45);transform:rotate(-4deg)}
.qr__card img{width:100%;height:100%}
.qr__k{position:absolute;width:3.1em;height:3.1em;border:.3em solid #fff}
.qr__k.tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:1.2em 0 0 0}
.qr__k.tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 1.2em 0 0}
.qr__k.bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 1.2em}
.qr__k.br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 1.2em 0}
.qr__line{position:absolute;left:.4em;right:.4em;top:8%;height:.22em;border-radius:1em;background:var(--wave);box-shadow:0 0 1.2em var(--wave);animation:scan 1.7s ease-in-out infinite alternate;animation-play-state:paused}
.story--a[data-step="1"] .qr__line{animation-play-state:running}
@keyframes scan{to{top:90%}}
.qr__ok{position:absolute;left:50%;bottom:9em;padding:.65em 1.3em;border-radius:999px;background:var(--wave);color:var(--ink);font-size:.95em;font-weight:800;opacity:0;transform:translateX(-50%) scale(.8)}
.story--a[data-step="1"] .qr__ok{animation:pop .6s 1.4s var(--spring) forwards}
@keyframes pop{to{opacity:1;transform:translateX(-50%) scale(1)}}

/* A-2·3 · 메뉴 + 결제 시트 */
.scr--menu{background:#fff}
.mn__top{display:flex;align-items:baseline;justify-content:space-between;padding:3.7em 1.5em .9em}
.mn__top b{font-size:1.25em;font-weight:800;letter-spacing:-.02em}
.mn__top span{font-size:.8em;font-weight:600;color:var(--ink3)}
.mn__list{padding:0 1.2em}
.mn__list li{display:flex;align-items:center;gap:1em;padding:.7em 0;border-bottom:1px solid var(--mist)}
.mn__list img{width:4.2em;height:4.2em;border-radius:1em;object-fit:cover}
.mn__list div{flex:1;min-width:0}
.mn__list b{display:block;font-size:1em;font-weight:700}
.mn__list div span{font-size:.82em;font-weight:600;color:var(--ink3)}
.story--a[data-step="2"] .add--1 u{transform:none;transition-delay:.5s}
.story--a[data-step="2"] .add--2 u{transform:none;transition-delay:.9s}
.story--a[data-step="3"] .scr--menu .add u{transform:none}
.mn__cart{position:absolute;left:1.1em;right:1.1em;bottom:1.2em;height:3.5em;display:flex;align-items:center;gap:.8em;padding:0 1.3em 0 .9em;border-radius:1.3em;background:var(--ink);color:#fff;font-weight:700;transform:translateY(140%);transition:transform .6s var(--spring)}
.mn__cart span{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--wave);color:var(--ink);font-size:.9em;font-weight:800}
.mn__cart b{margin-left:auto;font-weight:700}
.story--a[data-step="2"] .mn__cart{transform:none;transition-delay:1s}
.story--a[data-step="3"] .mn__cart{transform:none}
.scr--menu::after{content:"";position:absolute;inset:0;background:rgba(17,19,23,.5);opacity:0;pointer-events:none;transition:opacity .45s}
.story--a[data-step="3"] .scr--menu::after{opacity:1}
.sheet{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:1.5em 1.4em 1.4em;border-radius:2em 2em 0 0;background:#fff;transform:translateY(105%);transition:transform .65s var(--spring)}
.story--a[data-step="3"] .sheet{transform:none}
.sheet__t{font-size:.85em;font-weight:700;color:var(--ink3)}
.sheet__sum{margin:.1em 0 .6em;font-size:2.3em;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.sheet__sum small{margin-left:.15em;font-size:.5em;font-weight:700}
.sheet__split{display:flex;gap:.15em;height:.7em;margin-bottom:1em;overflow:hidden;border-radius:1em}
.sheet__split i{width:0;background:var(--blue);transition:width .9s var(--out) .3s}
.sheet__split i+i{background:#7da2ff}
.story--a[data-step="3"] .sheet__split i{width:var(--w)}
.sheet__cards li{display:flex;align-items:center;gap:.8em;padding:.5em 0;font-size:.95em}
.sheet__cards b{flex:1;font-weight:700}
.sheet__cards em{font-style:normal;font-weight:800}
.sheet__p{display:inline-block;margin:.4em 0 1em;padding:.35em .85em;border-radius:1em;background:#fff3c4;color:#6b4e00;font-size:.85em;font-weight:700}
.sheet__btn{display:grid;place-items:center;height:3.4em;border-radius:1.2em;background:var(--blue);color:#fff;font-weight:800}

/* A-4 · 완료 */
.scr--done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:3.6em 1.6em 2em;background:#fff;text-align:center}
.ok{width:6.2em;height:6.2em;fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ok circle{stroke-dasharray:214;stroke-dashoffset:214;transition:stroke-dashoffset .9s var(--out)}
.ok path{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .5s var(--out) .55s}
.story--a[data-step="4"] .ok circle,.story--a[data-step="4"] .ok path{stroke-dashoffset:0}
.done__t{margin-top:.4em;font-size:1.45em;font-weight:800;letter-spacing:-.02em}
.done__w{font-size:1em;font-weight:600;color:var(--ink2)}
.done__w b{display:block;width:max-content;margin:.05em auto 0;padding:0 .08em;font-size:4em;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--ink);background:linear-gradient(transparent 62%,var(--wave) 62%) 0 0/0% 100% no-repeat;transition:background-size .7s var(--out) .9s}
.story--a[data-step="4"] .done__w b{background-size:100% 100%}
.done__r{margin-top:.8em;font-size:.82em;font-weight:600;color:var(--ink3)}
.done__trk{position:absolute;left:1.4em;right:1.4em;bottom:1.8em;display:flex;gap:.5em;font-size:.8em;font-weight:700}
.done__trk li{flex:1;padding:.7em 0;border-radius:1em;background:var(--mist);color:var(--ink3);text-align:center}
.done__trk li.on{background:var(--blue);color:#fff}

/* C-1 · 카드 여러 장 */
.mu__top{display:flex;align-items:baseline;justify-content:space-between;padding:3.7em 1.5em .5em}
.mu__top b{font-size:1.25em;font-weight:800}
.mu__top span{font-size:.8em;font-weight:600;color:var(--ink3)}
.mu__sum{padding:0 1.4em;font-size:2.6em;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.mu__sum small{margin-left:.15em;font-size:.45em;font-weight:700}
.mu__bar{display:flex;gap:.2em;height:.8em;margin:.5em 1.4em 1.2em;overflow:hidden;border-radius:1em}
.mu__bar i{width:0;background:var(--c);transition:width .9s var(--out) .25s}
.story--c[data-step="1"] .mu__bar i{width:var(--w)}
.mu__cards{padding:0 1.4em}
.mu__cards li{display:flex;align-items:center;gap:.9em;padding:.85em 0;border-bottom:1px solid var(--mist);font-size:1em;opacity:0;transform:translate3d(2.4em,0,0);transition:opacity .35s,transform .7s var(--spring)}
.mu__cards .cd{width:2.6em;height:1.8em;border-radius:.4em}
.mu__cards b{flex:1;font-weight:700}
.mu__cards em{font-style:normal;font-weight:800}
.story--c[data-step="1"] .mu__cards li{opacity:1;transform:none;transition-delay:calc(.3s + var(--i)*.16s)}
.mu__btn{position:absolute;left:1.2em;right:1.2em;bottom:1.3em;display:grid;place-items:center;height:3.5em;border-radius:1.2em;background:var(--blue);color:#fff;font-weight:800}

/* C-2 · AI 주문 */
.ai__top{display:flex;align-items:center;gap:.6em;padding:3.7em 1.5em .8em}
.ai__top i{width:1.1em;height:1.1em;border-radius:50%;background:linear-gradient(135deg,#6d5df6,#a06bff)}
.ai__top b{font-size:1.15em;font-weight:800}
.ai__chat{display:flex;flex-direction:column;gap:.9em;padding:.4em 1.3em}
.ai__me{align-self:flex-end;max-width:80%;padding:.7em 1em;border-radius:1.1em 1.1em .3em 1.1em;background:var(--ai);color:#fff;font-size:.95em;font-weight:700;opacity:0;transform:translate3d(0,1em,0) scale(.95)}
.ai__slot{position:relative;min-height:15em}
.typing{display:inline-flex;gap:.3em;width:max-content;padding:.75em .95em;border-radius:1.1em 1.1em 1.1em .3em;background:var(--mist);opacity:0}
.typing i{width:.5em;height:.5em;border-radius:50%;background:#9a8cf0;animation:blink 1.1s infinite both}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{40%{opacity:.3}}
.ai__slot .typing{position:absolute;left:0;top:0}
.ai__rep{position:absolute;left:0;right:0;top:0;opacity:0;transform:translate3d(0,.8em,0)}
.ai__rep>p{max-width:88%;padding:.75em 1em;border-radius:1.1em 1.1em 1.1em .3em;background:var(--mist);font-size:.92em;font-weight:600;line-height:1.45}
.ai__card{display:flex;align-items:center;gap:.8em;margin-top:.7em;padding:.55em .8em .55em .55em;border:.1em solid var(--line);border-radius:1.2em;background:#fff;box-shadow:0 .5em 1.4em rgba(40,60,120,.1)}
.ai__card img{width:4em;height:4em;border-radius:.9em;object-fit:cover}
.ai__card div{flex:1}
.ai__card b{display:block;font-weight:800}
.ai__card span{font-size:.82em;font-weight:600;color:var(--ink3)}
.ai__in{position:absolute;left:1.2em;right:1.2em;bottom:1.3em;display:flex;align-items:center;justify-content:space-between;height:3.3em;padding:0 .7em 0 1.2em;border-radius:2em;background:var(--mist);color:var(--ink3);font-size:.9em;font-weight:600}
.ai__in i{width:2em;height:2em;border-radius:50%;background:var(--ai)}
.story--c[data-step="2"] .ai__me{animation:aiIn .55s .2s var(--spring) forwards}
.story--c[data-step="2"] .ai__slot .typing{animation:aiType 1.3s .9s ease both}
.story--c[data-step="2"] .ai__rep{animation:aiIn .7s 2.2s var(--out) forwards}
.story--c[data-step="2"] .ai__card .add u{transform:none;transition-delay:3.6s}
@keyframes aiIn{to{opacity:1;transform:none}}
@keyframes aiType{0%{opacity:0;transform:scale(.85)}15%,85%{opacity:1;transform:none}100%{opacity:0}}

/* C-3 · 내 주변 */
.scr--map{background:#e4f2ea}
.mp__svg{position:absolute;inset:0;width:100%;height:100%}
.mp__me{position:absolute;left:50%;top:38%;width:1.3em;height:1.3em;margin:-.65em 0 0 -.65em}
.mp__me b{position:absolute;inset:0;border-radius:50%;background:var(--blue);box-shadow:0 0 0 .22em #fff,0 .3em .9em rgba(30,77,216,.5)}
.mp__me i{position:absolute;inset:-.2em;border-radius:50%;background:rgba(30,77,216,.28);animation:ping 2s ease-out infinite;animation-play-state:paused}
.mp__me i:nth-child(2){animation-delay:1s}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(5.5);opacity:0}}
.story--c[data-step="3"] .mp__me i{animation-play-state:running}
.mp__ring{position:absolute;left:50%;top:38%;width:78%;aspect-ratio:1;margin:-39% 0 0 -39%;border:.16em dashed rgba(30,77,216,.55);border-radius:50%;opacity:0;transform:scale(.15)}
.mp__ring span{position:absolute;right:-.2em;top:50%;transform:translate(50%,-50%);padding:.25em .6em;border-radius:1em;background:var(--blue);color:#fff;font-size:.8em;font-weight:800}
.story--c[data-step="3"] .mp__ring{animation:ringGrow 1.1s .25s var(--out) forwards}
@keyframes ringGrow{to{opacity:1;transform:scale(1)}}
.pin{position:absolute;left:var(--x);top:var(--y);width:1.6em;height:1.6em;margin:-1.6em 0 0 -.8em;border-radius:50% 50% 50% 0;background:#ff5a4d;box-shadow:0 .4em .8em rgba(255,90,77,.45);transform:translate3d(0,-2em,0) rotate(-45deg) scale(0);opacity:0}
.pin::after{content:"";position:absolute;inset:.45em;border-radius:50%;background:#fff}
.story--c[data-step="3"] .pin{animation:pinDrop .6s var(--d) var(--spring) forwards}
@keyframes pinDrop{to{opacity:1;transform:rotate(-45deg) scale(1)}}
.mp__sheet{position:absolute;left:0;right:0;bottom:0;padding:1.1em 1.2em 1.3em;border-radius:2em 2em 0 0;background:#fff;box-shadow:0 -1em 2.4em rgba(20,60,40,.14);transform:translateY(105%);transition:transform .7s var(--spring)}
.story--c[data-step="3"] .mp__sheet{transform:none;transition-delay:1.4s}
.mp__t{font-size:.9em;font-weight:800;margin-bottom:.4em}
.mp__sheet li{display:flex;align-items:center;gap:.8em;padding:.5em 0}
.mp__sheet img{width:3.2em;height:3.2em;border-radius:.9em;object-fit:cover}
.mp__sheet div{flex:1}
.mp__sheet b{display:block;font-size:.95em;font-weight:800}
.mp__sheet span{font-size:.78em;font-weight:600;color:var(--ink3)}
.mp__sheet em{padding:.3em .8em;border-radius:1em;background:#e8f6ee;color:#127a4a;font-size:.78em;font-style:normal;font-weight:800}

/* C-4 · 쇼핑몰 */
.sh__top{display:flex;align-items:center;justify-content:space-between;padding:3.7em 1.5em .7em}
.sh__top>b{font-size:1.25em;font-weight:800}
.sh__cart{position:relative;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:var(--mist)}
.sh__cart svg{width:1.3em;height:1.3em;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sh__cart>b{position:absolute;right:-.3em;top:-.3em;width:1.45em;height:1.45em;overflow:hidden;border-radius:50%;background:#ff5a4d;color:#fff;font-size:.72em;font-weight:800}
.sh__cart i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;transition:transform .45s var(--spring),opacity .3s}
.sh__cart .c2{transform:translateY(120%)}
.sh__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9em;padding:.2em 1.2em}
.sh__grid li{position:relative;display:flex;flex-direction:column;gap:.15em;padding:.55em;border-radius:1.2em;background:var(--mist)}
.sh__grid img{width:100%;aspect-ratio:1;border-radius:.9em;object-fit:cover;margin-bottom:.35em}
.sh__grid b{font-size:.82em;font-weight:800;line-height:1.3}
.sh__grid span{font-size:.78em;font-weight:700;color:var(--ink2)}
.sh__grid .add{position:absolute;right:.9em;top:.9em;width:3.2em;height:1.9em;background:#fff;line-height:1.75em}
.story--c[data-step="5"] .sh__grid li:first-child .add u{transform:none;transition-delay:.7s}
.story--c[data-step="5"] .sh__cart .c1{transform:translateY(-120%);opacity:0;transition-delay:1s}
.story--c[data-step="5"] .sh__cart .c2{transform:none;transition-delay:1s}
.story--c[data-step="5"] .sh__cart{animation:bump .5s 1s var(--spring)}
@keyframes bump{40%{transform:scale(1.25)}}
.sh__toast{position:absolute;left:50%;bottom:1.6em;padding:.8em 1.3em;border-radius:1.2em;background:var(--ink);color:#fff;font-size:.88em;font-weight:700;white-space:nowrap;opacity:0;transform:translate3d(-50%,1.4em,0)}
.story--c[data-step="5"] .sh__toast{animation:toast 2.2s 1.1s var(--out) forwards}
@keyframes toast{12%,80%{opacity:1;transform:translate3d(-50%,0,0)}100%{opacity:0;transform:translate3d(-50%,.6em,0)}}

/* C-5 · 마일리지 (정수 카운터: @property --n) */
.pt__top{display:flex;align-items:baseline;justify-content:space-between;padding:3.7em 1.5em .5em}
.pt__top b{font-size:1.25em;font-weight:800}
.pt__top span{font-size:.8em;font-weight:600;color:var(--ink3)}
.pt__coin{display:flex;align-items:center;gap:.7em;margin:.6em 1.4em 0}
.pt__coin i{position:relative;flex:none;width:3.2em;height:3.2em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b8,var(--wave) 55%,#f0b400);box-shadow:inset 0 0 0 .25em rgba(255,255,255,.55),0 .5em 1.2em rgba(240,180,0,.45)}
.pt__coin i::after{content:"P";position:absolute;inset:0;display:grid;place-items:center;color:#8a5f00;font-size:1.3em;font-style:normal;font-weight:800}
.pt__num{font-size:2.5em;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.pt__num::before{content:"+" counter(pn) "P";counter-reset:pn var(--n)}
.story--c[data-step="6"] .scr--pt .pt__num{animation:cnt 1.5s .25s var(--out) both}
@keyframes cnt{from{--n:0}to{--n:960}}
.pt__bar{height:.8em;margin:1.1em 1.4em 1.3em;overflow:hidden;border-radius:1em;background:var(--mist)}
.pt__bar i{display:block;width:0;height:100%;border-radius:1em;background:linear-gradient(90deg,var(--wave),#ffb300);transition:width 1.2s var(--out) .4s}
.story--c[data-step="6"] .pt__bar i{width:72%}
.pt__list{padding:0 1.4em}
.pt__list li{display:flex;align-items:center;justify-content:space-between;padding:.8em 0;border-bottom:1px solid var(--mist);font-size:.95em;font-weight:600;opacity:0;transform:translate3d(0,.8em,0);transition:opacity .4s,transform .6s var(--out)}
.pt__list em{font-style:normal;font-weight:800;color:#b07a00}
.story--c[data-step="6"] .pt__list li{opacity:1;transform:none}
.story--c[data-step="6"] .pt__list li:nth-child(1){transition-delay:.7s}
.story--c[data-step="6"] .pt__list li:nth-child(2){transition-delay:.85s}
.story--c[data-step="6"] .pt__list li:nth-child(3){transition-delay:1s}
.pt__btn{position:absolute;left:1.2em;right:1.2em;bottom:1.3em;display:grid;place-items:center;height:3.5em;border-radius:1.2em;background:var(--ink);color:#fff;font-weight:800}

/* B · 가맹점앱 */
.phone--biz{background:#0b0d12}
.biz__top{display:flex;align-items:center;justify-content:space-between;padding:3.7em 1.4em .8em}
.biz__top b{font-size:1.2em;font-weight:800;letter-spacing:-.02em}
.biz__bell{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:var(--mist);transform-origin:50% 15%}
.biz__bell svg{width:1.2em;height:1.2em;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.story--b[data-step="1"] .biz__bell{animation:ring .9s .35s ease-in-out}
@keyframes ring{15%{transform:rotate(18deg)}35%{transform:rotate(-16deg)}55%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
.biz__tiles{display:grid;grid-template-columns:1fr 1.25fr;gap:.7em;padding:0 1.2em}
.biz__tiles>div{padding:.85em 1em;border-radius:1.2em;background:var(--mist);transition:transform .5s var(--spring),background .4s}
.biz__tiles small{display:block;font-size:.72em;font-weight:600;color:var(--ink3)}
.biz__tiles b{position:relative;display:block;height:1.4em;font-size:1.2em;font-weight:800;letter-spacing:-.02em;line-height:1.4}
.biz__tiles i{position:absolute;left:0;top:0;font-style:normal;white-space:nowrap;transition:opacity .35s,transform .5s var(--out)}
.biz__tiles .n13{opacity:0;transform:translateY(.6em)}
.story--b[data-step="1"] .n12,.story--b[data-step="2"] .n12,.story--b[data-step="3"] .n12{opacity:0;transform:translateY(-.6em)}
.story--b[data-step="1"] .n13,.story--b[data-step="2"] .n13,.story--b[data-step="3"] .n13{opacity:1;transform:none}
.story--b[data-step="3"] .biz__tiles>div{background:#fff3c4;transform:scale(1.04)}
.biz__list{padding:.4em 1.2em 0}
.ord{display:flex;flex-direction:column;gap:.45em;margin-top:.7em;padding:1em;border:.1em solid var(--line);border-radius:1.2em;background:#fff;transition:border-color .4s,background .4s,max-height .6s var(--out),opacity .4s,margin .5s,padding .5s}
.ord__h{display:flex;justify-content:space-between;align-items:baseline}
.ord__h b{font-size:.95em;font-weight:800}
.ord__h span{font-size:.72em;font-weight:600;color:var(--ink3)}
.ord p{font-size:.82em;color:var(--ink2);font-weight:500}
.ord__f{display:flex;align-items:center;justify-content:space-between}
.ord__f em{font-style:normal;font-size:.9em;font-weight:800}
.ord__st{position:relative;display:block;width:4.9em;height:2em}
.st{position:absolute;inset:0;display:grid;place-items:center;border-radius:.8em;font-size:.78em;font-style:normal;font-weight:800;background:var(--mist);color:var(--ink2);transition:opacity .3s,transform .45s var(--spring)}
.st--a{background:var(--blue);color:#fff}
.st--b{background:var(--wave);color:var(--ink);opacity:0;transform:scale(.8)}
.ord--new{max-height:0;margin-top:0;padding-top:0;padding-bottom:0;overflow:hidden;border-width:0;opacity:0}
.story--b[data-step="1"] .ord--new,.story--b[data-step="2"] .ord--new,.story--b[data-step="3"] .ord--new{max-height:11em;margin-top:.7em;padding:1em;border-width:.1em;opacity:1}
.story--b[data-step="2"] .ord--new,.story--b[data-step="3"] .ord--new{border-color:var(--wave);background:#fffbea}
.story--b[data-step="2"] .st--a,.story--b[data-step="3"] .st--a{opacity:0;transform:scale(.8)}
.story--b[data-step="2"] .st--b,.story--b[data-step="3"] .st--b{opacity:1;transform:none}
/* B-4 · 운영 */
.ops__top{display:flex;align-items:baseline;justify-content:space-between;padding:3.7em 1.5em .9em}
.ops__top b{font-size:1.25em;font-weight:800}
.ops__top span{font-size:.8em;font-weight:600;color:var(--ink3)}
.ops__grid{display:grid;grid-template-columns:1fr 1fr;gap:.8em;padding:0 1.2em}
.ops__grid li{display:flex;flex-direction:column;gap:.9em;justify-content:space-between;min-height:9.2em;padding:1em;border-radius:1.4em;background:var(--mist);opacity:0;transform:perspective(40em) rotateX(-70deg);transform-origin:50% 0;transition:opacity .4s,transform .7s var(--soft)}
.ops__grid svg{width:2.2em;height:2.2em;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ops__grid b{font-size:.95em;font-weight:800}
.story--b[data-step="5"] .ops__grid li{opacity:1;transform:none;transition-delay:calc(.2s + var(--i)*.12s)}
.ops__grid li:nth-child(2) svg{stroke:#7c5cfc}.ops__grid li:nth-child(3) svg{stroke:#ea580c}.ops__grid li:nth-child(4) svg{stroke:#127a4a}.ops__grid li:nth-child(6) svg{stroke:#c68a00}
/* B-5 · 정산 · 수수료 無 */
.fee__card{margin:.2em 1.2em 0;padding:1.1em 1.2em;border-radius:1.4em;background:var(--mist)}
.fee__row{display:flex;justify-content:space-between;align-items:baseline;padding:.55em 0;font-size:.95em;font-weight:600;color:var(--ink2)}
.fee__row b{font-weight:800;color:var(--ink)}
.fee__row--y b u{padding:0 .15em;text-decoration:none;background:linear-gradient(transparent 62%,var(--wave) 62%) 0 0/0% 100% no-repeat;transition:background-size .7s var(--out) .8s}
.story--b[data-step="6"] .fee__row--y b u{background-size:100% 100%}
.fee__note{margin:.9em 1.4em 0;font-size:.78em;font-weight:600;color:var(--ink3)}
.fee__no{position:absolute;left:0;right:0;bottom:1.2em;text-align:center;font-size:11em;font-weight:800;line-height:1;color:var(--wave);opacity:0;transform:scale(.6);transition:opacity .5s .5s,transform .9s .5s var(--spring)}
.story--b[data-step="6"] .fee__no{opacity:1;transform:none}

/* 폰 밖에 떠 있는 칩 */
.chip{position:absolute;z-index:4;display:inline-flex;align-items:center;padding:.75em 1.2em;border-radius:999px;background:#fff;color:var(--ink);font-size:calc(var(--ph)/44);font-weight:800;white-space:nowrap;box-shadow:0 .8em 2.4em rgba(25,31,40,.18),0 0 0 1px rgba(25,31,40,.04);opacity:0;transform:translate3d(0,1.2em,0) scale(.82);transition:opacity .3s,transform .7s var(--spring)}
.chip--split{right:calc(100% + .6em);top:60%}
.chip--pt{left:calc(100% + .6em);top:30%;background:var(--wave)}
.chip--zero{left:calc(100% + .6em);top:54%;background:var(--ink);color:#fff;font-size:calc(var(--ph)/30)}
.story--a[data-step="3"] .chip--split,.story--a[data-step="4"] .chip--pt,.story--a[data-step="4"] .chip--zero{opacity:1;transform:none}
.chip--c1{right:calc(100% + .6em);top:20%}
.chip--c2{left:calc(100% + .6em);top:34%;background:var(--ai);color:#fff}
.chip--c3{right:calc(100% + .6em);top:44%;background:var(--blue);color:#fff}
.chip--c4{left:calc(100% + .6em);top:50%;background:var(--navy);color:#fff}
.chip--c5{right:calc(100% + .6em);top:62%}
.chip--c6{left:calc(100% + .6em);top:60%;background:var(--wave)}
.story--c[data-step="1"] .chip--c1,.story--c[data-step="2"] .chip--c2,.story--c[data-step="3"] .chip--c3,
.story--c[data-step="4"] .chip--c4,.story--c[data-step="5"] .chip--c5,.story--c[data-step="6"] .chip--c6{opacity:1;transform:none;transition-delay:.5s}
.chip--myshop{right:calc(100% + .6em);top:20%;background:var(--wave)}
.chip--bell{right:calc(100% + .6em);top:22%}
.chip--sum{left:calc(100% + .6em);top:62%;background:var(--wave)}
.chip--ops{right:calc(100% + .6em);top:34%}
.chip--fee{left:calc(100% + .6em);top:40%;background:var(--wave)}
.story--b[data-step="0"] .chip--myshop,.story--b[data-step="1"] .chip--bell,.story--b[data-step="2"] .chip--cook,.story--b[data-step="3"] .chip--tbl,.story--b[data-step="4"] .chip--sum,.story--b[data-step="5"] .chip--ops,.story--b[data-step="6"] .chip--fee{opacity:1;transform:none}

/* ── 공용: 장면(스택 · 모바일) ────────────────────── */
.steps-title{font-size:var(--f-h2);font-weight:800;letter-spacing:-.03em;line-height:1.22}
.steps{font-size:var(--f-body)}
.steps li{padding:1.05em 0 1.15em;border-top:1px solid var(--line);opacity:.34;transition:opacity .35s ease,border-color .35s}
.steps li.on{opacity:1;border-color:var(--ink)}
.steps b{display:block;font-size:1.25em;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.steps p{max-height:0;margin-top:0;overflow:hidden;opacity:0;color:var(--ink2);font-size:.85em;line-height:1.5;transition:max-height .55s var(--out),opacity .4s ease,margin .4s}
.steps li.on p{max-height:5em;margin-top:.4em;opacity:1}
.steps--dark li{border-color:rgba(255,255,255,.16)}
.steps--dark li.on{border-color:#fff}
.steps--dark p{color:#aeb6c4}
.wipe{position:absolute;inset:0;z-index:6;display:none;background:var(--wc);clip-path:circle(0 at 50% 50%);pointer-events:none}
.is-story .wipe{display:block}
#top .wipe{--wc:#e3ebff}
#features .wipe{--wc:#111317}
#owner .wipe{--wc:#f2f4f6}

/* A · 히어로 → 주문 */
.story--a .stage{display:flex;flex-direction:column;padding-top:var(--hdr);background:#fff;overflow:clip}
.frame{position:relative;order:1;isolation:isolate;height:calc(100svh - var(--hdr) - 14px);min-height:540px;max-height:900px;margin:6px 10px 0;overflow:hidden;border-radius:28px;background:#222}
.frame__pic{position:absolute;inset:0;display:block}
.slide{position:absolute;inset:0;display:block;opacity:0;animation:slideFade 18s linear infinite;animation-delay:calc(var(--k)*6s - 1.1s)}
.slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;animation:kb 18s linear infinite;animation-delay:calc(var(--k)*6s - 1.1s)}
@keyframes slideFade{0%{opacity:0}6%,33%{opacity:1}39%,100%{opacity:0}}
@keyframes kb{0%{transform:scale(1)}33%{transform:scale(1.07)}100%{transform:scale(1.07)}}
.frame__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,16,.72),rgba(8,10,16,0) 62%),linear-gradient(to bottom,rgba(8,10,16,.3),rgba(8,10,16,0) 24%)}
.hint{position:absolute;z-index:2;left:18px;top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pill{display:inline-flex;align-items:baseline;gap:.35em;padding:.55em 1em .55em .95em;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-size:15px;font-weight:700;transition:background .3s,color .3s}
.pill__n{display:inline-block;min-width:1.5em;text-align:center;font-size:1.45em;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.pill.is-zero{background:var(--wave);color:var(--ink)}
.queue{display:flex;gap:5px;padding-left:4px}
.queue i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.88);transition:transform .4s var(--spring),opacity .3s}
.queue i.off{transform:scale(0);opacity:0}
.hl{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:0 22px 36px;color:#fff;font-size:var(--f-hero);font-weight:800;letter-spacing:-.03em;line-height:1.16}
.hl__a,.hl__b{display:block}
.wave{display:inline-block;width:1.2em;height:.52em;margin:0 .04em 0 .02em;vertical-align:.1em;overflow:visible;filter:drop-shadow(0 0 .14em rgba(255,216,77,.55));cursor:pointer;transition:filter .3s}
.wave.is-pulse{filter:drop-shadow(0 0 .38em rgba(255,216,77,.95))}
.wave path{fill:none;stroke:var(--wave);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .5s var(--out) forwards}
.wave .w1{stroke-width:5}
.wave .w2{stroke-width:3;opacity:.4}
.wave--dl{width:.9em;height:.4em}
@keyframes draw{to{stroke-dashoffset:0}}
.js .hl__a,.js .hl__b{opacity:0;transform:translate3d(0,.45em,0)}
.js.is-ready .hl__a,.js.is-ready .hl__b{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s var(--out)}
.js.is-ready .hl__b{transition-delay:.14s}
.chev,.slot{display:none}
.steps-copy,.c__copy,.own__copy{display:contents}
.story--a .steps-title{order:2;padding:72px 22px 24px}
.story--a .device{order:3;margin:8px auto 28px}
.story--a .steps{order:4;padding:8px 22px 80px}

/* C · 기능 (배경이 원으로 번짐) */
.story--c .stage{--ox:50%;--oy:42%;position:relative;display:flex;flex-direction:column;gap:28px;padding:96px 22px;overflow:clip;background:#e3ebff}
.c__bg{position:absolute;inset:0;z-index:0}
.c__bg i{position:absolute;inset:0;clip-path:circle(0 at var(--ox) var(--oy));transition:clip-path 1.1s var(--out)}
.c__bg i:nth-child(1){background:#e3ebff}
.c__bg i:nth-child(2){background:#ebe5ff}
.c__bg i:nth-child(3){background:#dff3ea}
.c__bg i:nth-child(4){background:#ffe3e8}
.c__bg i:nth-child(5){background:#ffeedd}
.c__bg i:nth-child(6){background:#fff2bf}
.story--c[data-step="1"] .c__bg i:nth-child(-n+1),.story--c[data-step="2"] .c__bg i:nth-child(-n+2),
.story--c[data-step="3"] .c__bg i:nth-child(-n+3),.story--c[data-step="4"] .c__bg i:nth-child(-n+4),
.story--c[data-step="5"] .c__bg i:nth-child(-n+5),.story--c[data-step="6"] .c__bg i:nth-child(-n+6){clip-path:circle(150% at var(--ox) var(--oy))}
.story--c .steps-title{order:1;position:relative;z-index:1}
.story--c .c__dev{order:2;position:relative;z-index:1;margin:8px auto}
.story--c .steps{order:3;position:relative;z-index:1}

/* B · 사장님 */
.story--b{background:var(--night);color:#fff}
.story--b .stage{display:flex;flex-direction:column;gap:40px;padding:96px 22px;background:var(--night)}
.own__t{order:1;font-size:var(--f-h2);font-weight:800;letter-spacing:-.03em;line-height:1.22}
.own__dev{order:2;margin:8px auto}
.story--b .steps{order:3}
.own__cta{order:4;display:flex;flex-wrap:wrap;gap:10px}

/* ── 고정(스크롤 스토리) 배치: ≥1024px · 모션 허용 ──── */
.is-story .story{height:calc(var(--len)*100svh)}
.is-story .story .stage{--W:min(100vw,1800px);--X0:calc((100vw - var(--W))/2);--ph:min(80svh,900px);position:sticky;top:0;display:block;height:100svh;padding:0;overflow:hidden}
.is-story .frame{position:absolute;inset:0;order:0;height:auto;min-height:0;max-height:none;margin:0;border-radius:0;clip-path:inset(64px 16px 24px 16px round 40px);will-change:clip-path}
.is-story .frame__img{object-position:50% 50%;will-change:transform}
.is-story .hint{left:clamp(28px,5vw,110px);top:96px}
.is-story .pill{font-size:clamp(14px,1.05vw,18px)}
.is-story .hl{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:0 clamp(28px,5vw,110px) clamp(32px,7.5svh,84px);will-change:transform,opacity}
.is-story .chev{position:absolute;z-index:2;left:50%;bottom:clamp(14px,2.4svh,28px);display:block;width:22px;height:22px;margin-left:-11px;border-right:3px solid #fff;border-bottom:3px solid #fff;border-radius:2px;opacity:.9;transform:rotate(45deg) scale(.55);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(8px) rotate(45deg) scale(.55)}}
.is-story .slot{position:absolute;display:block;visibility:hidden;left:calc(var(--X0) + var(--W)*.53);width:calc(var(--W)*.41);top:9svh;height:62svh}
.is-story .steps-copy,.is-story .c__copy,.is-story .own__copy{position:absolute;z-index:3;display:flex;flex-direction:column;justify-content:center;top:0;bottom:0;opacity:0}
.is-story .steps-copy,.is-story .own__copy{left:calc(var(--X0) + var(--W)*.06);width:calc(var(--W)*.4)}
.is-story .c__copy{left:calc(var(--X0) + var(--W)*.56);width:calc(var(--W)*.38)}
.is-story .steps-title,.is-story .own__t{padding:0 0 1.1em}
.is-story .story .steps{padding:0}
.is-story .story .device{position:absolute;z-index:4;top:10svh;margin:0 0 0 calc(var(--ph)*-.243);will-change:transform}
.is-story .story--a .device,.is-story .own__dev{left:calc(var(--X0) + var(--W)*.735)}
.is-story .c__dev{left:calc(var(--X0) + var(--W)*.265)}
.is-story .story--c .stage{--ox:calc(var(--X0) + var(--W)*.265);--oy:50%}
.is-story .own__cta{padding-top:2em}


/* ── 앱 받기 · 푸터 ──────────────────────────────── */
.dl{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(88px,11vw,200px) 0}
.dl__pulse{position:absolute;inset:0;pointer-events:none}
.dl__pulse i{position:absolute;right:calc(max(20px,(100% - 1500px)/2) + clamp(75px,6.5vw,120px));top:50%;width:min(46vw,760px);aspect-ratio:1;margin:calc(min(46vw,760px)/-2) calc(min(46vw,760px)/-2) 0 0;border:1px solid rgba(255,255,255,.2);border-radius:50%;opacity:0;animation:pulse 7.5s linear infinite;animation-delay:calc(var(--k,0)*2.5s)}
.dl__pulse i:nth-child(2){--k:1}.dl__pulse i:nth-child(3){--k:2}
@keyframes pulse{from{transform:scale(.18);opacity:.8}to{transform:scale(1);opacity:0}}
.dl__in{position:relative;width:min(100% - 44px,1500px);margin:0 auto}
.dl__t{font-size:var(--f-hero);font-weight:800;letter-spacing:-.03em;line-height:1.16}
.dl__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,56px)}
.store{display:inline-flex;align-items:center;height:3.4em;padding:0 1.7em;border-radius:16px;background:#fff;color:var(--ink);font-size:clamp(16px,1.15vw,19px);font-weight:800;transition:transform .25s var(--out),box-shadow .25s}
.store:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(0,0,0,.4)}
.dl__qr{display:none}
.dl__qr img{width:100%;height:auto}
.mcta{position:fixed;z-index:90;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;height:54px;border-radius:16px;background:var(--blue);color:#fff;font-size:17px;font-weight:800;box-shadow:0 10px 30px rgba(30,77,216,.35);transition:transform .4s var(--out),opacity .3s}
.mcta.is-hide{opacity:0;transform:translateY(140%);pointer-events:none}
/* PC·태블릿 하단 바로가기: 히어로를 지나면 올라오고, 앱 받기·파트너 구간에서는 내려감 */
.dock{position:fixed;z-index:95;left:50%;bottom:20px;display:none;align-items:center;gap:6px;padding:6px 6px 6px 6px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 18px 44px -14px rgba(17,19,23,.45),0 0 0 1px rgba(17,19,23,.07);transform:translateX(-50%);transition:transform .55s var(--out),opacity .3s}
.dock.is-hide{opacity:0;transform:translate(-50%,170%);pointer-events:none}
.dock a{display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:800;white-space:nowrap;transition:transform .25s var(--out),background .2s}
.dock a:hover{transform:translateY(-1px)}
.dock__app{background:var(--blue);color:#fff}
.dock__own{background:var(--mist);color:var(--ink)}
.dock__x{position:relative;flex:none;width:34px;height:34px;margin:0 4px 0 2px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.dock__x::before,.dock__x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink3);transition:background .2s}
.dock__x::before{transform:rotate(45deg)}.dock__x::after{transform:rotate(-45deg)}
.dock__x:hover::before,.dock__x:hover::after{background:var(--ink)}

/* ── 섹션 공통 ──────────────────────────────────── */
.sec__t{font-size:var(--f-h2);font-weight:800;letter-spacing:-.03em;line-height:1.22;text-align:center}
.sec__t--l{text-align:left}
.real__in,.how__in,.faq__in,.cta__in{width:min(100% - 40px,1500px);margin:0 auto}
.is-story .real__in,.is-story .how__in,.is-story .faq__in,.is-story .cta__in,.is-story .dl__in,.is-story .ft__in{padding-left:64px}


/* ── 가맹점 전용 홍보물 ───────────────────────── */
.story--k{background:#0b1226;color:#fff}
.story--k .stage{display:block;padding:96px 0 72px;background:#0b1226}
.k__head{padding:0 22px 28px}
.k__p{margin-top:.8em;color:#b6bfd3;font-size:.95em}
.k__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2em}
.k__tags li{padding:.7em 1.1em;border-radius:18px;background:rgba(255,255,255,.08);font-size:.95em;font-weight:800}
.k__tags span{display:block;color:#aab4cb;font-size:.82em;font-weight:500}
.k__track{display:flex;gap:14px;overflow-x:auto;padding:0 22px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.k__track::-webkit-scrollbar{display:none}
.k__ph{position:relative;flex:0 0 min(86vw,640px);margin:0;overflow:hidden;border-radius:28px;background:#162044;scroll-snap-align:center}
.k__ph img{display:block;width:100%;aspect-ratio:1400/781;object-fit:cover}
.k__ph figcaption{position:absolute;left:14px;bottom:14px;padding:.4em .95em;border-radius:999px;background:rgba(10,16,34,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;font-weight:700}
#kit .wipe{--wc:#fff}
.is-story .story--k .k__head{position:absolute;z-index:3;left:calc(var(--X0) + var(--W)*.06);top:calc(var(--hdr) + 5svh);width:calc(var(--W)*.6);padding:0}
.is-story .k__track{position:absolute;left:0;bottom:7svh;gap:2vw;overflow:visible;padding:0 0 0 calc(var(--X0) + var(--W)*.06);scroll-snap-type:none;will-change:transform}
.is-story .k__ph{flex:0 0 auto;height:min(50svh,600px);border-radius:32px}
.is-story .k__ph img{height:100%;width:auto}

/* ── 실제 화면 ───────────────────────────────── */
.real{padding:clamp(80px,10vw,176px) 0;background:#fff;overflow:hidden}
.real__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(24px,3vw,44px) 0 clamp(8px,1vw,20px)}
.real__tabs button{padding:.7em 1.35em;border:0;border-radius:999px;background:var(--mist);color:var(--ink2);font:inherit;font-size:clamp(15px,1.05vw,18px);font-weight:800;cursor:pointer;transition:background .3s,color .3s,transform .3s var(--spring)}
.real__tabs button:hover{transform:translateY(-2px)}
.real__tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.real__stage{position:relative;height:clamp(480px,48vw,820px)}
.rset{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .45s,transform .8s var(--out),visibility 0s .8s}
.real__stage[data-set="member"] .rset--member,.real__stage[data-set="biz"] .rset--biz,
.real__stage[data-set="pc"] .rset--pc,.real__stage[data-set="video"] .rset--video{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .8s var(--out),visibility 0s}
.rp{position:relative;flex:none;width:clamp(150px,17.5vw,270px);margin:0 clamp(-26px,-1.6vw,-10px);font-size:clamp(8px,1.05vw,15px);translate:calc((var(--i) - var(--c,1.5))*8%) calc((var(--i) - var(--c,1.5))*(var(--i) - var(--c,1.5))*2.4%);rotate:calc((var(--i) - var(--c,1.5))*4.5deg);transition:translate .5s var(--out),rotate .5s var(--out)}
.rp__f{overflow:hidden;border:.5em solid #0b0d12;border-radius:2.6em;background:#0b0d12;box-shadow:0 2.4em 4em -1.8em rgba(17,19,23,.5)}
.rp__f img{display:block;width:100%;height:auto}
.rp.is-on,.rp:hover{translate:0 -3%;rotate:0deg;z-index:3}
.rset--pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:clamp(12px,1.6vw,24px);width:min(100%,960px);margin:0 auto}
.rw{margin:0;font-size:clamp(9px,1vw,15px);transition:scale .5s var(--out)}
.rw__f{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 1.4em 2.6em -1.6em rgba(17,19,23,.35)}
.rw__f i{position:relative;display:block;height:1.7em;border-bottom:1px solid var(--line);background:#eef1f6}
.rw__f i::before{content:"";position:absolute;left:.8em;top:.55em;width:.6em;height:.6em;border-radius:50%;background:#ff5f57;box-shadow:1em 0 #febc2e,2em 0 #28c840}
.rw__f img{display:block;width:100%;height:auto}
.rw.is-on{scale:1.03;z-index:2}
.rset--video{flex-direction:column;gap:1.4em}
.rv{--ph:min(56svh,580px)}
.rv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rv__cap{max-width:30em;color:var(--ink2);font-weight:600;text-align:center}
.real__cap{min-height:3em;margin-top:clamp(12px,2vw,28px);color:var(--ink2);font-size:clamp(16px,1.2vw,21px);font-weight:700;text-align:center}

/* ── 이용방법 ────────────────────────────────── */
.how{padding:clamp(80px,10vw,176px) 0;background:var(--mist)}
.how__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,32px);margin-top:clamp(36px,4vw,72px)}
.how__col{padding:clamp(22px,2.4vw,40px);border-radius:32px;background:#fff;box-shadow:0 12px 24px rgba(59,96,145,.08)}
.how__col h3{margin-bottom:.8em;font-size:1.4em;font-weight:800;letter-spacing:-.02em}
.how__steps{counter-reset:st}
.how__steps li{position:relative;padding:.9em 0 .9em 3.2em;border-top:1px solid var(--line);counter-increment:st}
.how__steps li:first-child{border-top:0}
.how__steps li::before{content:counter(st);position:absolute;left:0;top:.8em;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--ink);color:#fff;font-size:.85em;font-weight:800}
.how__steps b{display:block;font-weight:800}
.how__steps p{margin-top:.15em;color:var(--ink2);font-size:.86em}
.how__vids{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,32px);margin-top:clamp(16px,2vw,32px)}
.vcard{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;padding:0;border:0;border-radius:28px;background:#000;cursor:pointer}
.vcard img,.vcard video{display:block;width:100%;height:100%;object-fit:cover}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%);pointer-events:none}
.vcard b{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;font-size:1.05em;font-weight:800;text-align:left;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.vcard__play{position:absolute;z-index:2;left:50%;top:50%;width:4.4em;height:4.4em;margin:-2.2em;border-radius:50%;background:rgba(255,255,255,.92);transition:transform .35s var(--spring)}
.vcard__play::before{content:"";position:absolute;left:52%;top:50%;margin:-.8em 0 0 -.5em;border-left:1.3em solid var(--ink);border-top:.8em solid transparent;border-bottom:.8em solid transparent}
.vcard:hover .vcard__play{transform:scale(1.1)}
.vcard.is-playing::after,.vcard.is-playing .vcard__play,.vcard.is-playing b{display:none}
.how__note{margin-top:clamp(20px,2vw,32px);color:var(--ink2);font-size:.9em;text-align:center}

/* ── 앱 받기 보강 · FAQ · 파트너 · 푸터 ─────────── */
.dl__pc{display:flex;align-items:center;gap:.9em;width:max-content;max-width:100%;margin-top:1.4em;padding:.9em 1.3em;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(255,255,255,.08);color:#fff;transition:background .3s,transform .3s var(--out)}
.dl__pc:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.dl__pc i{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:rgba(255,255,255,.14)}
.dl__pc svg{width:1.4em;height:1.4em;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dl__pc b{display:block;font-size:.95em;font-weight:800}
.dl__pc em{color:#b9c4e0;font-size:.82em;font-style:normal}
.faq{padding:clamp(80px,10vw,176px) 0;background:#fff}
.faq__list{max-width:900px;margin:clamp(32px,4vw,64px) auto 0}
.cta{padding:clamp(72px,9vw,150px) 0;background:var(--wave);color:var(--ink)}
.cta__t{font-size:var(--f-h2);font-weight:800;letter-spacing:-.03em;line-height:1.22}
.cta__p{margin-top:.8em;font-weight:600;opacity:.8}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.4vw,40px)}
.btn--n{background:var(--navy);color:#fff}
.btn--o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

/* ══ v4 · 실제 기능 반영 (16.10.2026) ═════════════════════════════════════════ */

/* 예시 화면 표시 + AI 생성 이미지 표시 */
.story .device::after{content:"예시 화면";position:absolute;left:50%;top:calc(100% + .8em);transform:translateX(-50%);color:var(--ink3);font-size:12px;font-weight:700;white-space:nowrap}
.story--b .device::after{color:#7d8696}
.pill__ex{align-self:center;margin-left:.55em;padding:.18em .6em;border-radius:999px;background:rgba(255,255,255,.22);font-size:.72em;font-style:normal;font-weight:700}
.pill.is-zero .pill__ex{background:rgba(25,31,40,.12)}
.aitag{position:absolute;z-index:2;right:18px;top:18px;padding:.35em .85em;border-radius:999px;background:rgba(8,10,16,.4);color:rgba(255,255,255,.86);font-size:11px;font-weight:700}
.is-story .aitag{right:clamp(28px,5vw,110px);top:96px}
.c__note{margin-top:1.4em;color:var(--ink2);font-size:.82em;font-weight:600}

/* C-2 · AI 칩 */
.ai__chips{position:absolute;left:1.2em;right:1.2em;bottom:5.3em;display:flex;gap:.4em;font-size:.72em;font-weight:700;white-space:nowrap}
.ai__chips i{padding:.5em .85em;border:.1em solid #d9ddf5;border-radius:1em;background:#fff;color:#5b4fd6;font-style:normal}
.ai__slot{min-height:13em}

/* C-3 · 지도: 필터 칩 + 2km → 5km */
.mp__chips{position:absolute;z-index:2;left:1em;right:1em;top:3.7em;display:flex;gap:.4em;font-size:.72em;font-weight:800;white-space:nowrap}
.mp__chips i{padding:.5em .9em;border-radius:1em;background:#fff;color:var(--ink2);font-style:normal;box-shadow:0 .3em .9em rgba(20,60,40,.14)}
.mp__chips .c1{background:var(--ink);color:#fff}
.story--c[data-step="3"] .mp__chips .c1{animation:chipOff .3s 2.4s forwards}
.story--c[data-step="3"] .mp__chips .c3{animation:chipOn .55s 2.4s var(--spring) forwards}
@keyframes chipOff{to{background:#fff;color:var(--ink2)}}
@keyframes chipOn{50%{transform:scale(1.14)}to{background:var(--ink);color:#fff}}
.mp__ring{top:42%;margin:-39% 0 0 -39%}
.mp__me{top:42%}
.mp__dist{position:absolute;z-index:2;right:1em;top:6.5em;display:grid;place-items:center;padding:.45em 1em;border-radius:1em;background:var(--blue);color:#fff;font-size:.74em;font-weight:800;box-shadow:0 .4em 1.2em rgba(30,77,216,.4)}
.mp__dist span{grid-area:1/1}
.mp__dist .d5{opacity:0}
.story--c[data-step="3"] .mp__ring{animation:ringGrow 1.1s .25s var(--out) forwards,ring5 1s 2.4s var(--out) forwards}
.story--c[data-step="3"] .mp__dist .d2{animation:fadeOut .3s 2.4s forwards}
.story--c[data-step="3"] .mp__dist .d5{animation:fadeIn .4s 2.6s forwards}
.mp__ring span{display:none}
@keyframes ring5{to{transform:scale(1.55)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeIn{to{opacity:1}}

/* C-4 · 포장 · 픽업 */
.scr--take{background:#fff}
.tk__top{display:flex;align-items:baseline;justify-content:space-between;padding:3.7em 1.5em .7em}
.tk__top b{font-size:1.25em;font-weight:800}
.tk__top span{font-size:.8em;font-weight:600;color:var(--ink3)}
.tk__row{display:flex;align-items:center;gap:.9em;margin:0 1.2em;padding:.7em .8em;border-radius:1.2em;background:var(--mist)}
.tk__row img{width:3.6em;height:3.6em;border-radius:.9em;object-fit:cover}
.tk__row div{flex:1}
.tk__row b{display:block;font-size:.95em;font-weight:800}
.tk__row span{font-size:.8em;font-weight:600;color:var(--ink3)}
.tk__label{margin:1.1em 1.5em .5em;font-size:.8em;font-weight:700;color:var(--ink3)}
.tk__times{display:flex;gap:.5em;padding:0 1.2em;font-size:.8em}
.tk__times i{padding:.6em .95em;border-radius:1em;background:var(--mist);color:var(--ink2);font-style:normal;font-weight:700;white-space:nowrap}
.tk__times .t1{background:var(--ink);color:#fff}
.story--c[data-step="4"] .tk__times .t1{animation:chipOff .3s .9s forwards}
.story--c[data-step="4"] .tk__times .t2{animation:chipOn .55s .9s var(--spring) forwards}
.tk__ring{position:relative;width:9.4em;height:9.4em;margin:1.1em auto .5em}
.tk__ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tk__ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.tk__ring .trk{stroke:var(--mist)}
.tk__ring .prg{stroke:var(--blue);stroke-dasharray:1;stroke-dashoffset:1}
.story--c[data-step="4"] .tk__ring .prg{animation:fillRing 2.4s 1.3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fillRing{to{stroke-dashoffset:0}}
.tk__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tk__c b{font-size:1.5em;font-weight:800;letter-spacing:-.03em}
.tk__c span{font-size:.8em;font-weight:700;color:var(--ink3)}
.tk__status{display:grid;place-items:center;width:max-content;margin:0 auto}
.tk__status span{grid-area:1/1;padding:.45em 1.1em;border-radius:1em;font-size:.82em;font-weight:800}
.tk__status .s1{background:var(--wave);color:var(--ink)}
.tk__status .s2{background:#e3f5ec;color:#127a4a;opacity:0;transform:scale(.8)}
.story--c[data-step="4"] .tk__status .s1{animation:stOut .35s 3.8s forwards}
.story--c[data-step="4"] .tk__status .s2{animation:stIn .6s 3.8s var(--spring) forwards}
.tk__btn{position:absolute;left:1.2em;right:1.2em;bottom:1.3em;display:grid;place-items:center;height:3.5em;border-radius:1.2em;background:var(--blue);color:#fff;font-weight:800}
.tk__push{position:absolute;z-index:5;left:.8em;right:.8em;top:3.7em;display:flex;align-items:center;gap:.7em;padding:.8em 1em;border-radius:1.3em;background:#191f28;color:#fff;font-size:.78em;box-shadow:0 1em 2em rgba(0,0,0,.25);opacity:0;transform:translate3d(0,-140%,0)}
.tk__push i{flex:none;width:2.2em;height:2.2em;border-radius:.6em;background:var(--blue)}
.tk__push b{display:block;font-weight:800}
.tk__push span{display:block;font-weight:500;line-height:1.35;opacity:.86}
.story--c[data-step="4"] .tk__push{animation:pushIn .7s 3.9s var(--spring) forwards}
@keyframes pushIn{to{opacity:1;transform:none}}

/* B-0 · 입점 → 지도에 나타남 */
.scr--listed{background:#e4f2ea}
.ls__find{position:absolute;left:1.1em;right:1.1em;top:3.8em;display:flex;align-items:center;gap:.6em;height:2.8em;padding:0 1em;border-radius:1.4em;background:#fff;box-shadow:0 .5em 1.4em rgba(20,60,40,.14);font-size:.82em;font-weight:700;color:var(--ink2)}
.ls__find i{width:1em;height:1em;border:.18em solid var(--ink3);border-radius:50%}
.ls__pin{position:absolute;left:46%;top:40%;width:2.6em;height:2.6em;margin:-2.6em 0 0 -1.3em;opacity:0;transform:translate3d(0,-3em,0)}
.ls__pin b{position:absolute;inset:0;border-radius:50% 50% 50% 0;background:var(--blue);box-shadow:0 .6em 1.2em rgba(30,77,216,.45);transform:rotate(-45deg)}
.ls__pin b::after{content:"";position:absolute;inset:.75em;border-radius:50%;background:#fff}
.ls__pin i{position:absolute;left:50%;bottom:-.3em;width:2em;height:2em;margin-left:-1em;border:.16em solid rgba(30,77,216,.5);border-radius:50%;opacity:0}
.story--b[data-step="0"] .ls__pin{animation:pinIn .8s .6s var(--spring) forwards}
.story--b[data-step="0"] .ls__pin i{animation:lsRipple 2.2s 1.3s ease-out infinite}
@keyframes pinIn{to{opacity:1;transform:none}}
@keyframes lsRipple{from{transform:scale(.2);opacity:.9}to{transform:scale(4.2);opacity:0}}
.ls__card{position:absolute;left:1em;right:1em;bottom:1.2em;display:flex;align-items:center;gap:.8em;padding:.7em .9em .7em .7em;border-radius:1.5em;background:#fff;box-shadow:0 -.5em 2em rgba(20,60,40,.18);transform:translateY(130%);transition:transform .7s var(--spring)}
.story--b[data-step="0"] .ls__card{transform:none;transition-delay:1.7s}
.ls__card img{width:4em;height:4em;border-radius:1em;object-fit:cover}
.ls__card div{flex:1;min-width:0}
.ls__card b{display:block;font-size:.98em;font-weight:800}
.ls__card b u{margin-left:.4em;padding:.15em .55em;border-radius:1em;background:#e3f5ec;color:#127a4a;font-size:.7em;text-decoration:none;vertical-align:.1em}
.ls__card span{font-size:.78em;font-weight:600;color:var(--ink3)}
.ls__card em{padding:.35em .8em;border-radius:1em;background:var(--wave);color:var(--ink);font-size:.75em;font-style:normal;font-weight:800}

/* B-1·2 · 새 주문 → 조리 시작 → 서빙 완료 */
.st--d{background:#e3f5ec;color:#127a4a;opacity:0;transform:scale(.8)}
.story--b[data-step="1"] .biz__tiles>div{animation:tileHit .9s .55s var(--spring)}
@keyframes tileHit{40%{background:#fff3c4;transform:scale(1.05)}}
.story--b[data-step="2"] .st--b{animation:stOut .35s 1.9s forwards}
.story--b[data-step="2"] .st--d{animation:stIn .5s 1.9s var(--spring) forwards}
.story--b[data-step="2"] .ord--new{animation:ordDone .5s 1.9s forwards}
@keyframes stOut{to{opacity:0;transform:scale(.8)}}
@keyframes stIn{to{opacity:1;transform:none}}
@keyframes ordDone{to{border-color:#9adbb7;background:#f1fbf5}}

/* B-3 · 테이블 + 주방 주문표 */
.scr--tbl{background:#eef1f7}
.tb__top{display:flex;align-items:baseline;justify-content:space-between;padding:3.7em 1.4em .8em}
.tb__top b{font-size:1.25em;font-weight:800}
.tb__top span{display:flex;gap:.4em;font-size:.72em;font-weight:800}
.tb__top i{padding:.35em .8em;border-radius:1em;font-style:normal}
.tb__top i:first-child{background:#ffe3e1;color:#c0332b}
.tb__top i:last-child{background:#fff0cf;color:#9a6200}
.tb__grid{display:grid;grid-template-columns:1fr 1fr;gap:.7em;padding:0 1.1em}
.tb{display:flex;flex-direction:column;gap:.15em;min-height:5.4em;padding:.7em .85em;border:.14em solid #dfe3ec;border-radius:1.1em;background:#fff;opacity:0;transform:translate3d(0,1em,0) scale(.95)}
.tb b{font-size:1.15em;font-weight:800}
.tb small{font-size:.74em;font-weight:600;color:var(--ink2)}
.tb em{margin-top:auto;font-size:.82em;font-style:normal;font-weight:800}
.tb--new{border-color:#e5483d;background:#ffecea}
.tb--new b,.tb--new em{color:#c0332b}
.tb--cook{border-color:#e0a21c;background:#fff6dd}
.tb--cook em{color:#9a6200}
.tb--done{border-color:#d4d9e3;background:#e9ecf2}
.tb--done b,.tb--done small,.tb--done em{color:var(--ink3)}
.tb--empty{border-style:dashed;background:transparent}
.tb--empty b,.tb--empty small{color:var(--ink3)}
.story--b[data-step="3"] .tb{animation:aiIn .55s calc(.25s + var(--i)*.1s) var(--out) forwards}
.story--b[data-step="3"] .tb--new{animation:aiIn .55s calc(.25s + var(--i)*.1s) var(--out) forwards,tbBlink 1.6s 1.4s ease-in-out infinite}
@keyframes tbBlink{50%{box-shadow:0 0 0 .3em rgba(229,72,61,.22)}}
.tb__ticket{position:absolute;right:1em;bottom:4.3em;width:9.2em;max-height:0;padding:0 .9em;overflow:hidden;border-bottom:.2em dashed #cfd6e4;background:#fff;box-shadow:0 .8em 1.8em rgba(17,19,23,.22);font-size:.8em;transform:rotate(3deg)}
.tb__ticket b{display:block;padding-top:.9em;font-weight:800}
.tb__ticket span{display:block;color:var(--ink2);font-weight:600}
.tb__ticket i{display:block;height:.9em}
.story--b[data-step="3"] .tb__ticket{animation:ticketOut 1.3s 1.5s var(--out) forwards}
@keyframes ticketOut{to{max-height:8em}}
.tb__kds{position:absolute;left:1em;bottom:1.3em;display:flex;align-items:center;gap:.6em;padding:.7em 1.1em;border-radius:1.2em;background:var(--night);color:#fff;font-size:.8em;font-weight:800;opacity:0;transform:translateY(1em)}
.tb__kds i{width:.7em;height:.7em;border-radius:50%;background:#2fbf71;box-shadow:0 0 .8em #2fbf71}
.story--b[data-step="3"] .tb__kds{animation:aiIn .6s 1.3s var(--out) forwards}

/* B-4 · 매출 */
.scr--sales{background:#fff}
.sl__top{display:flex;align-items:baseline;justify-content:space-between;padding:3.7em 1.5em .6em}
.sl__top b{font-size:1.25em;font-weight:800}
.sl__top span{font-size:.8em;font-weight:600;color:var(--ink3)}
.sl__seg{position:relative;display:flex;gap:.35em;margin:0 1.3em;padding:.3em;border-radius:1.1em;background:var(--mist);font-size:.76em;font-weight:800}
.sl__seg::before{content:"";position:absolute;left:.3em;top:.3em;bottom:.3em;width:calc((100% - 1.3em)/3);border-radius:.85em;background:#fff;box-shadow:0 .2em .6em rgba(0,0,0,.1)}
.sl__seg i{position:relative;flex:1;padding:.5em 0;color:var(--ink2);font-style:normal;text-align:center}
.story--b[data-step="4"] .sl__seg::before{animation:segMove 1.1s 2.4s var(--out) forwards}
@keyframes segMove{to{transform:translateX(calc(100% + .35em))}}
.sl__sum{padding:.9em 1.4em 0;font-size:2.1em;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.sl__sum small{margin-left:.15em;font-size:.45em;font-weight:700}
.sl__bars{display:flex;align-items:flex-end;gap:.55em;height:7.6em;margin:.9em 1.4em 0;border-bottom:.1em solid var(--line)}
.sl__bars i{flex:1;height:0;border-radius:.5em .5em 0 0;background:#c9d7fb;transition:height .9s var(--out)}
.sl__bars i:nth-child(5){background:var(--blue)}
.story--b[data-step="4"] .sl__bars i{height:var(--h);transition-delay:calc(.3s + var(--k,0)*.08s)}
.sl__rank{padding:.9em 1.4em 0}
.sl__rank li{display:flex;align-items:center;gap:.8em;padding:.6em 0;border-bottom:1px solid var(--mist);font-size:.92em;font-weight:700;opacity:0;transform:translate3d(0,.8em,0);transition:opacity .4s,transform .6s var(--out)}
.sl__rank b{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:.5em;background:var(--mist);font-size:.85em}
.sl__rank li:first-child b{background:var(--blue);color:#fff}
.sl__rank em{margin-left:auto;color:var(--ink2);font-style:normal}
.story--b[data-step="4"] .sl__rank li{opacity:1;transform:none}
.story--b[data-step="4"] .sl__rank li:nth-child(1){transition-delay:.9s}
.story--b[data-step="4"] .sl__rank li:nth-child(2){transition-delay:1.05s}
.story--b[data-step="4"] .sl__rank li:nth-child(3){transition-delay:1.2s}

/* B · 칩 */
.chip--cook{right:calc(100% + .6em);top:46%;background:var(--wave)}
.chip--tbl{left:calc(100% + .6em);top:34%}

.rset--biz .rp{margin:0 clamp(10px,1.4vw,24px)}


/* ── 앱 받기: 두 앱 ──────────────────────────────── */
.dl__grp{margin-top:clamp(22px,2.4vw,40px)}
.dl__t+.dl__grp{margin-top:clamp(28px,3vw,56px)}
.dl__lab{margin-bottom:.7em;color:#b9c4e0;font-size:.85em;font-weight:800}
.dl__grp .dl__row{margin-top:0}
.store--o{background:rgba(255,255,255,.14);color:#fff}
.store--o:hover{background:rgba(255,255,255,.24)}
/* 수수료 각주: 14px 이상, 대비 5.9:1 이상 */
.fee__note{margin:.9em 1.4em 0;color:#5a6473;font-size:.84em;font-weight:600;line-height:1.45}
/* ══ v4 END ══ */

/* ── 반응형 · 모션 감소 ──────────────────────────── */
@media (min-width:768px){
  .mcta{display:none}
  .dock{display:flex}
  .dl__qr{display:block;position:absolute;right:0;top:50%;width:clamp(150px,13vw,240px);padding:14px;border-radius:24px;background:#fff;transform:translateY(-50%)}
  .is-static .story--a .stage,.is-static .story--c .stage,.is-static .story--b .stage{max-width:820px;margin:0 auto}
}
@media (max-width:1023px){
  .how__cols,.how__vids{grid-template-columns:1fr}
  .real__stage{height:auto}
  .rset{position:static;display:none;opacity:1;visibility:visible;transform:none;transition:none}
  .real__stage[data-set="member"] .rset--member,.real__stage[data-set="biz"] .rset--biz{display:flex;justify-content:flex-start;gap:12px;overflow-x:auto;padding:8px 22px 24px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .real__stage[data-set="pc"] .rset--pc{display:grid}
  .real__stage[data-set="video"] .rset--video{display:flex}
  .rp{width:min(58vw,250px);margin:0;translate:none;rotate:none;scroll-snap-align:center}
  .rp.is-on,.rp:hover{translate:none}
}
@media (max-width:767px){
  .chip--split,.chip--c1,.chip--c3,.chip--c5{right:auto;left:-6%}
  .chip--pt,.chip--zero,.chip--c2,.chip--c4,.chip--c6{left:auto;right:-4%}
  .chip--split{top:64%}.chip--pt{top:26%}.chip--zero{top:60%}.chip--c1{top:22%}.chip--c2{top:32%}.chip--c3{top:60%}.chip--c4{top:46%}.chip--c5{top:70%}.chip--c6{top:56%}
  .chip--myshop,.chip--bell,.chip--cook,.chip--tbl,.chip--sum,.chip--ops,.chip--fee{display:none}
  .dl__pulse i{right:-30vw;top:30%}
  .ft{padding-bottom:96px}
}
@media (max-width:560px){
  .rset--pc{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .hl__a,.js .hl__b{opacity:1;transform:none}
  .wave path{stroke-dashoffset:0}
  .slide,.slide img{animation:none!important}
  .slide:first-child{opacity:1}
}