/* Preregister landing — ported verbatim from team DS templates/preregister2/Preregister2.dc.html
 * (keptti-style "Landing v2"). Depends on tokens.css. */
.page{background:var(--surface-base);color:var(--text-primary);font:var(--type-body);min-height:100vh;overflow-x:hidden}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.center{text-align:center}
.grad-text{background:linear-gradient(90deg,var(--c-purple-500),var(--c-magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.heart{color:var(--c-flame)}
.mob-br{display:none}
.hero-peek-mob{display:none}
.row{display:flex;flex-wrap:wrap;gap:14px}
.mt8{margin-top:8px}.mt18{margin-top:18px}.mt24{margin-top:24px}
.eyebrow{font:var(--type-tag);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.h1{font-weight:var(--fw-black);font-size:clamp(34px,5.6vw,58px);line-height:1.06;letter-spacing:var(--ls-tight);margin:0 0 18px}
.lead{color:var(--text-secondary);font-size:var(--fs-18);line-height:1.55;margin:0 0 18px}
.muted{color:var(--text-tertiary);font-size:var(--fs-14);line-height:1.55;margin:0 0 10px}
.fine{color:var(--text-muted);font-size:var(--fs-12);line-height:1.5;margin:0}
/* ── mascots ── */
.mascot{display:block;height:auto;max-width:100%;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.float{animation:float 6s var(--ease-in-out) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.mascot-inline{width:84px;margin:0 auto 8px}
/* ── CTA anchors ── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-16);letter-spacing:var(--ls-tight);line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-base) var(--ease-out)}
.cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.cta:active{transform:scale(.98)}
.cta-primary{background:var(--accent);color:var(--c-black);box-shadow:var(--glow-accent)}
.cta-gradient{background:linear-gradient(90deg,var(--c-purple-500),var(--c-magenta));color:var(--c-white);box-shadow:0 10px 34px rgba(204,124,255,.45),0 2px 8px rgba(245,61,255,.3)}
.cta-gradient:hover{box-shadow:0 14px 42px rgba(204,124,255,.62),0 3px 10px rgba(245,61,255,.42)}
.cta-outline{background:rgba(255,255,255,.06);color:var(--c-white);box-shadow:inset 0 0 0 1px var(--border-strong);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
.cta-outline:hover{background:rgba(255,255,255,.12)}
.cta-i{font-size:.95em;line-height:1}
.cta-i.play{font-size:.78em;opacity:.85}
.cta-light{background:var(--c-white);color:var(--c-purple-700)}
.cta-sm{height:40px;padding:0 18px;font-size:var(--fs-14)}
/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:rgba(13,13,13,.72);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-subtle)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav{transition:transform .32s var(--ease-out,ease)}
.nav.nav-hidden{transform:translateY(-100%)}
.navlink{color:var(--text-tertiary);font-weight:var(--fw-bold);font-size:var(--fs-14);text-decoration:none;padding:0 6px}
.navlink:hover{color:var(--text-secondary)}
/* ── hero (v1 유지) ── */
.hero{position:relative;overflow:hidden;background:var(--surface-base);padding:84px 24px 0}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 46% at 50% -4%,rgba(204,124,255,.30),transparent 70%),radial-gradient(40% 38% at 82% 26%,rgba(245,61,255,.18),transparent 70%),radial-gradient(42% 42% at 14% 56%,rgba(255,53,53,.14),transparent 72%)}
.hero-deco span{position:absolute;z-index:1;line-height:1;opacity:.85}
.d1{top:108px;left:13%;color:var(--c-sky);font-size:26px}
.d2{top:188px;right:16%;color:var(--c-magenta);font-size:18px}
.d3{bottom:120px;left:9%;color:var(--c-flame);font-size:24px}
.d4{top:150px;right:9%;color:var(--c-purple-300);font-size:20px}
.hero-grid{position:relative;z-index:2;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;min-height:560px}
.hero-text{max-width:560px;align-self:center;padding:24px 0 56px}
.hero-figure{position:relative;z-index:3;align-self:stretch;overflow:visible;display:flex;justify-content:center;align-items:flex-start}
.hero-figure .mascot{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.22);transform-origin:50% 0;margin-top:20px;filter:drop-shadow(0 0 40px rgba(0,0,0,.45))}
/* ── ticker ── */
.ticker{overflow:hidden;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:18px 0;white-space:nowrap;background:var(--surface-base)}
.ticker-run{display:flex;width:max-content;animation:marq 40s linear infinite}
.ticker-alt .ticker-run{animation-duration:52s}
.ticker-seg{display:inline-flex;flex:0 0 auto;white-space:nowrap}
.ticker-item{font-weight:var(--fw-bold);font-size:18px;color:var(--text-secondary);padding:0 6px}
.ticker-item.hot{color:var(--accent)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── section blocks (색상으로 영역 구분) ── */
.block{padding:88px 0;border-bottom:1px solid var(--border-faint)}
.block-raised{background:var(--surface-raised)}
.block-accent{background:var(--surface-raised);border-bottom:1px solid var(--border-faint)}
.shead{text-align:center;max-width:740px;margin:0 auto 48px}
.s-eyebrow{font:var(--type-tag);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.s-title{font-weight:var(--fw-black);font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:var(--ls-tight);margin:0 0 16px}
.s-lead{color:var(--text-secondary);font-size:var(--fs-18);line-height:1.55;margin:0 auto;max-width:640px}
/* ── split (mascot + text) ── */
.split{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.split-fig{display:flex;justify-content:center}
.split-fig .mascot{width:100%;max-width:300px}
/* ── big statement ── */
.morex{position:relative}
.morex .mascot{position:absolute;right:0;bottom:-22px;width:178px;z-index:1}
.more{font-weight:var(--fw-black);font-size:clamp(24px,3.5vw,40px);line-height:1.3;letter-spacing:var(--ls-tight);margin:0}
.more .dim{color:var(--text-muted)}
.more .up{color:var(--c-purple-300)}
/* ── feature rows (STEP 1-5) ── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature-rev .feature-media{order:2}
.feature-rev .feature-body{order:1}
.steptag{font:var(--type-tag);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.steptitle{font-weight:var(--fw-black);font-size:clamp(24px,2.8vw,32px);line-height:1.14;letter-spacing:var(--ls-tight);margin:0 0 16px}
.sub{color:var(--text-secondary);font-size:var(--fs-16);line-height:1.5;margin:0 0 18px}
.flead{font:var(--type-title);color:var(--text-primary);margin:0 0 14px}
.spark{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.spark li{position:relative;padding-left:26px;font-size:var(--fs-16);line-height:1.45;color:var(--text-secondary)}
.spark li::before{content:"✧";position:absolute;left:0;top:1px;color:var(--accent)}
.spark b{color:var(--text-primary)}
.feedback{font-size:var(--fs-14);color:var(--text-tertiary);border-left:2px solid var(--border-strong);padding:4px 0 4px 14px;margin:22px 0 0}
.feedback a{color:var(--accent)}
/* ── media placeholder slot ── */
.shot{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--radius-xl);box-shadow:var(--ring-subtle);background:repeating-linear-gradient(135deg,#202024,#202024 13px,#26262b 13px,#26262b 26px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}
.block-raised .shot{background:repeating-linear-gradient(135deg,#202024,#202024 13px,#2b2b31 13px,#2b2b31 26px)}
.shot-label{font:var(--type-tag);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.shot-hint{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;color:var(--text-muted)}
.shot-peek{position:absolute;right:-6px;bottom:-10px;width:108px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
/* ── app-screen mockups (DS components) ── */
.mock{position:relative;background:var(--surface-raised);border-radius:24px;box-shadow:0 28px 64px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);padding:16px;max-width:384px;margin:0 auto;display:flex;flex-direction:column;gap:13px}
.block-raised .mock{background:var(--surface-field)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:2px 4px 4px}
.mock-dot{width:9px;height:9px;border-radius:50%;background:var(--surface-control)}
.mock-bar b{margin-left:auto;font:var(--type-tag);text-transform:uppercase;letter-spacing:.12em;color:var(--text-tertiary)}
.mock-frame{width:100%;height:560px;border:none;border-radius:18px;background:var(--surface-base);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:block}
.mock-peek{position:absolute;bottom:-26px;width:96px;z-index:4;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.mock-peek.r{right:-30px}.mock-peek.l{left:-30px}
.cd-wrap{display:flex;flex-direction:column;gap:6px;align-items:center}
/* ── inventory / stock dashboard (Step 3) ── */
.inv{display:flex;flex-direction:column;gap:11px}
.inv-title{font-weight:var(--fw-black);font-size:var(--fs-18);letter-spacing:var(--ls-tight);line-height:1.15;margin:2px 2px 3px}
.inv-sum{display:flex;gap:9px}
.inv-stat{flex:1;background:var(--surface-base);border-radius:14px;padding:11px 13px;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.block-raised .inv-stat{background:var(--surface-raised)}
.inv-stat .k{font:var(--type-tag);text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);margin:0 0 6px;display:block}
.inv-stat .v{font-weight:var(--fw-black);font-size:23px;line-height:1;letter-spacing:var(--ls-tight)}
.inv-stat .v.accent{color:var(--accent)}
.inv-stat .v small{font-size:13px;font-weight:var(--fw-bold);color:var(--text-tertiary);letter-spacing:0}
.inv-list{display:flex;flex-direction:column;gap:8px}
.inv-row{display:flex;align-items:center;gap:11px;background:var(--surface-base);border-radius:14px;padding:9px 11px 9px 9px;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.block-raised .inv-row{background:var(--surface-raised)}
.inv-th{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface-control)}
.inv-meta{flex:1;min-width:0}
.inv-top{display:flex;align-items:center;gap:8px}
.inv-nm{font-weight:var(--fw-bold);font-size:var(--fs-14);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.inv-ct{font-weight:var(--fw-black);font-size:var(--fs-13);line-height:1;flex:none;white-space:nowrap}
.inv-ct b{color:var(--text-primary)}
.inv-ct span{color:var(--text-tertiary);font-weight:var(--fw-bold)}
.inv-sold{font-weight:var(--fw-black);font-size:var(--fs-13);line-height:1;flex:none;white-space:nowrap;color:var(--accent)}
.inv-sold span{color:var(--text-tertiary);font-weight:var(--fw-bold)}
.inv-left{font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-tertiary);margin-top:6px;line-height:1}
.inv-bar{height:6px;border-radius:999px;background:var(--surface-control);margin-top:8px;overflow:hidden}
.inv-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c-purple-500),var(--c-magenta))}
.inv-fill.low{background:linear-gradient(90deg,#d5fb65,#f5d33d)}
.inv-fill.out{background:var(--text-muted)}
.inv-pill{font-weight:var(--fw-bold);font-size:10px;line-height:1;padding:4px 7px;border-radius:var(--radius-pill);flex:none;letter-spacing:.04em;text-transform:uppercase}
.inv-pill.low{background:rgba(213,251,101,.92);color:#2a2e00}
.inv-pill.out{background:var(--surface-control);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.inv-foot{display:flex;align-items:center;gap:6px;justify-content:center;font:var(--type-tag);text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);margin-top:2px}
.inv-dot{width:6px;height:6px;border-radius:50%;background:#74F89A;box-shadow:0 0 0 3px rgba(116,248,154,.22);animation:invpulse 2s var(--ease-in-out) infinite}
@keyframes invpulse{0%,100%{opacity:1}50%{opacity:.4}}
/* ── mini 2-shop cart (Step 5) ── */
.cart-sh{display:flex;align-items:center;gap:9px;padding:2px 2px 12px}
.cart-sh img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface-control)}
.cart-sh .nm{font-weight:var(--fw-bold);font-size:var(--fs-14);line-height:1.15}
.cart-sh .hd{font-size:var(--fs-12);color:var(--text-tertiary);line-height:1.25}
.cart-bleed{height:1px;background:var(--border-subtle);margin:15px -16px}
.cart-lbl{font:var(--type-tag);text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);margin:0 0 10px 2px}
.ship-pills{display:flex;gap:8px;margin-bottom:15px}
.ship-pill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 10px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-weight:var(--fw-bold);font-size:var(--fs-14);background:var(--surface-base);box-shadow:var(--ring-subtle);color:var(--text-tertiary);line-height:1}
.ship-pill em{font-style:normal;font-size:var(--fs-12);opacity:.85;font-weight:var(--fw-bold)}
.ship-pill.on{background:rgba(204,124,255,.14);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text-primary)}
.ship-pill.on em{color:var(--accent)}
.cd-cap{font:var(--type-tag);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.qr{width:124px;height:124px;margin:2px auto;border-radius:14px;background:#fff;background-image:repeating-conic-gradient(#0d0d0d 0 25%,#fff 0 50%);background-size:17px 17px;box-shadow:var(--ring-subtle)}
.qr-img{width:150px;height:150px;margin:2px auto;border-radius:14px;background:#fff;padding:9px;box-shadow:var(--ring-subtle);display:block;image-rendering:pixelated}
.ok-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:rgba(116,248,154,.16);color:#74F89A;font-weight:var(--fw-bold);font-size:var(--fs-14);padding:7px 13px;border-radius:var(--radius-pill)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pwrap{position:relative}
.soldscrim{position:absolute;top:0;left:0;width:100%;aspect-ratio:1/1;border-radius:var(--radius-xl);background:rgba(13,13,13,.5);z-index:1}
.stk{position:absolute;top:9px;left:9px;z-index:2;font-weight:var(--fw-bold);font-size:var(--fs-12);padding:5px 9px;border-radius:var(--radius-pill);line-height:1}
.stk.low{background:rgba(213,251,101,.92);color:#2a2e00}
.stk.out{background:rgba(13,13,13,.82);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.mock-div{display:flex;align-items:center;gap:10px;margin:4px 2px 0;font:var(--type-tag);text-transform:uppercase;letter-spacing:.12em;color:var(--text-tertiary)}
.mock-div::after{content:"";flex:1;height:1px;background:var(--border-subtle)}
.chat{display:flex;flex-direction:column;gap:8px;padding:2px 0}
.mock-foot{margin:6px -16px -16px;border-bottom-left-radius:24px;border-bottom-right-radius:24px;overflow:hidden}
/* ── tags ── */
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* ── pricing (accent block · 0% 강조) ── */
.price{max-width:760px;margin:0 auto;text-align:center}
.price-label{font:var(--type-tag);text-transform:uppercase;letter-spacing:.18em;color:var(--c-purple-300);margin:0}
.price-num{font-weight:var(--fw-black);font-size:clamp(92px,15vw,160px);line-height:.86;letter-spacing:-.04em;background:linear-gradient(92deg,#fff,var(--c-pink-300));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.fee-hero{display:flex;align-items:flex-end;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:34px}
.fee-tag{position:relative;width:285px;height:246px;flex:0 0 auto}
.fee-tag-img{width:100%;height:100%;display:block}
.fee-tag-gift{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%);width:54%;height:auto}
.fee-right{display:flex;flex-direction:column;align-items:center;gap:4px}
.fee-label{font-weight:var(--fw-black);font-size:clamp(26px,3vw,36px);letter-spacing:var(--ls-tight);color:var(--c-white);transform:rotate(-3deg)}
.fee-box{position:relative;width:360px;height:246px;display:flex;align-items:center;justify-content:center}
.fee-frame-img{position:absolute;inset:0;width:100%;height:100%}
.fee-num{position:relative;z-index:1;font-weight:var(--fw-black);font-size:clamp(74px,9vw,104px);line-height:1;letter-spacing:-.02em;color:#fff}
.price-title{font-weight:var(--fw-black);font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:var(--ls-tight);color:var(--c-white);margin:6px 0 0}
.price-sub{color:rgba(255,255,255,.85);font-size:var(--fs-18);line-height:1.5;margin:12px 0 0}
.values{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.vchip{border-radius:var(--radius-lg);padding:14px 18px;font-size:var(--fs-14);font-weight:var(--fw-bold);background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.price-fine{color:rgba(255,255,255,.74);font-size:var(--fs-14);line-height:1.6;margin:16px auto 0;max-width:560px}
.fb-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1000px;margin:0 auto}
.fb-body{text-align:left}
.fb-mock{position:relative;background:var(--surface-base);border-radius:24px;box-shadow:0 28px 64px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);padding:18px}
.fb-chat{display:flex;flex-direction:column;gap:9px}
.fb-peek{position:absolute;right:-22px;bottom:-24px;width:90px;z-index:3;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.benefit-wrap{width:100%;max-width:675px}
.benefits{padding:8px 14px;text-align:left}
.blist{list-style:none;padding:0;margin:0;display:grid;gap:15px}
.blist li{display:flex;align-items:center;gap:12px;font-size:var(--fs-20);font-weight:var(--fw-bold);color:var(--text-primary)}
.bx{flex:0 0 auto;color:var(--c-white);font-weight:var(--fw-black);font-size:var(--fs-20);line-height:1}
/* ── sound familiar (problem) cards ── */
.sf-grid{display:grid;grid-template-columns:0.92fr 1fr 1fr;gap:20px;align-items:stretch}
.sf-intro{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius-xl);background:var(--accent);padding:30px;min-height:392px}
.sf-intro-text{font-weight:var(--fw-black);font-size:clamp(19px,1.9vw,24px);line-height:1.32;letter-spacing:var(--ls-tight);color:#1a0a2e;margin:0;max-width:92%}
.sf-intro-mascot{position:absolute;right:14px;bottom:14px;width:150px;height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}
.sf-brand{color:#fff}
.bounce{animation:bounce 2.4s var(--ease-in-out) infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.sf-card{position:relative;display:flex;flex-direction:column;background:var(--surface-field);border-radius:var(--radius-xl);box-shadow:var(--ring-subtle);padding:26px;min-height:392px}
.sf-note{position:relative;height:196px;margin-bottom:6px}
.sf-note-back{position:absolute;top:30px;right:10px;width:74%;height:128px;border-radius:20px;transform:rotate(6deg)}
.sf-note-back.pink{background:#CEB5FF}
.sf-note-back.green{background:#74F89A}
.sf-note-front{position:absolute;top:4px;left:4px;width:84%;min-height:150px;background:#fff;border-radius:20px;transform:rotate(-4deg);padding:20px 22px;box-shadow:0 12px 28px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:30px}
.sf-note-num{font-weight:var(--fw-medium);font-size:var(--fs-14);color:#333;margin:0}
.sf-note-title{font-weight:var(--fw-black);font-size:var(--fs-20);line-height:1.15;letter-spacing:var(--ls-tight);color:#111;margin:0}
.sf-desc{color:var(--text-secondary);font-size:var(--fs-16);line-height:1.55;margin:auto 0 0}
/* ── showcase ── */
.showcase{overflow:hidden;padding:8px 0 2px}
.showcase-track{display:flex;gap:16px;width:max-content;animation:slideX 48s linear infinite}
.showcase:hover .showcase-track{animation-play-state:paused}
.work{width:200px;flex:0 0 auto}
.work-thumb{width:200px;height:264px;border-radius:var(--radius-xl);box-shadow:var(--ring-subtle);background:repeating-linear-gradient(135deg,var(--surface-raised),var(--surface-raised) 13px,#1e1e1e 13px,#1e1e1e 26px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);font-family:ui-monospace,monospace;font-size:12px;padding:14px}
.work-cap{font-size:var(--fs-12);color:var(--text-tertiary);margin-top:10px}
.work-cap b{color:var(--text-primary)}
@keyframes slideX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── final CTA ── */
.finalcta{position:relative;overflow:hidden;text-align:center;padding:88px 24px 104px;background:var(--surface-base)}
.finalcta-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 100%,rgba(204,124,255,.26),transparent 70%),radial-gradient(40% 50% at 80% 20%,rgba(245,61,255,.16),transparent 70%)}
.finalcta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
/* ── footer ── */
.footer{padding:52px 24px 76px;text-align:center;color:var(--text-tertiary);font-size:var(--fs-14);line-height:1.9;background:var(--surface-base)}
.footer a{color:var(--text-secondary)}
.fab-wrap{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.fab-wrap.show{opacity:1;transform:none;pointer-events:auto}
.fab{position:relative;z-index:1;box-shadow:0 12px 38px rgba(204,124,255,.5),0 2px 10px rgba(245,61,255,.35)}
.fab-mascot{position:absolute;right:16px;bottom:64%;width:92px;height:auto;z-index:0;pointer-events:none;transform:rotate(6deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:transform .25s var(--ease-out)}
.fab-wrap:hover .fab-mascot{transform:rotate(6deg) translateY(-5px)}
.footer .fine{margin-top:10px}
@media (prefers-reduced-motion:reduce){.ticker-run,.showcase-track,.float,.bounce{animation:none}.ticker{white-space:normal}.fab-wrap{transition:opacity .3s}}
@media (max-width:860px){.block{padding:60px 0}.shead{margin-bottom:34px}.feature{grid-template-columns:1fr;gap:24px}.feature-rev .feature-media{order:1}.feature-rev .feature-body{order:2}.hero{padding:72px 20px 52px}.hero-deco span{display:none}.hero-grid{grid-template-columns:1fr;text-align:center;min-height:0}.hero-text{max-width:none;padding-bottom:0}.hero-figure{order:-1;align-self:auto}.hero-figure .mascot{max-width:340px;height:330px;margin:0 auto;transform:none}.hero-text .row{justify-content:center}.hero-text .fx{justify-content:center}.split{grid-template-columns:1fr;gap:20px;text-align:center}.split .tagrow{justify-content:center}.morex .mascot{display:none}.sf-grid{grid-template-columns:1fr}.sf-card,.sf-intro{min-height:0}.sf-intro{min-height:300px}.fb-split{grid-template-columns:1fr;gap:28px}.fb-body{text-align:center}}
/* ── phone: open up line spacing + paragraph rhythm (안 답답하게) ── */
@media (max-width:600px){
.h1{line-height:1.16;margin-bottom:20px}
.lead{font-size:var(--fs-16);line-height:1.68;margin-bottom:20px}
.sub{line-height:1.66;margin-bottom:20px}
.s-title{line-height:1.22}
.s-lead{line-height:1.66}
.steptitle{line-height:1.26;margin-bottom:16px}
.spark{gap:15px}
.spark li{line-height:1.6}
.more{line-height:1.44}
.muted,.fine{line-height:1.75}
.footer{line-height:2.05}
.shead{margin-bottom:30px}
.price-title,.s-title{margin-bottom:18px}
.fee-tag{display:none}
.fee-hero{margin-top:20px}
.more .ln{display:block}
.feature{gap:34px}
.mob-br{display:inline}
/* hero: left-align content, character peeks from behind CTA (bottom-right) */
.hero{padding:20px 20px 0;position:relative;overflow:hidden}
.hero-grid{text-align:left;gap:4px}
.hero-text{text-align:left;padding-bottom:130px;position:relative;z-index:2}
.hero-text .row{justify-content:flex-start;position:relative;z-index:2;flex-direction:column;align-items:flex-start}
.hero-text .row .cta{width:auto}
.hero-text .fx{justify-content:flex-start;margin-bottom:11px !important}
.hero-figure{display:none}
.hero-peek-mob{display:block;position:absolute;right:-130px;bottom:0;width:300px;height:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}
}