/* 토큰: lib/theme.dart(SmColors, 2026-10-28 리디자인) 그대로. 다크는 시스템 추종. */
:root{--bg:#FBFAF8;--card:#FFFFFF;--neutral:#EFECE8;--fg:#1D1B1A;--mut:#5F5A55;--line:#ECE8E3;
--acc:#4C3FD1;--accSoft:#F1EEFB;--blush:#D98C7E;--blushSoft:#FBE9E3;--focus:#1E6BFF;
--g1:#2E8B6E;--g2:#6B7280;--g3:#B5751E;--g4:#7A4E9C;--shadow:0 2px 12px rgba(29,27,26,.08);--onacc:#fff;
--goodBg:#E8F3EE;--goodFg:#1F6B4E;--okBg:#F3F0EC;--okFg:#4A4541;--careBg:#FBF1E6;--careFg:#8A4A0B;--ink3:#6B6560}
@media(prefers-color-scheme:dark){:root{--bg:#121110;--card:#1C1A19;--neutral:#2A2725;--fg:#F3F0EC;--mut:#B5AFA9;--line:#332F2C;
--acc:#ABA3F7;--accSoft:#2A2640;--blush:#E6A99D;--blushSoft:#33231F;--focus:#79A8FF;
--g1:#6CC9A8;--g2:#A1A7B3;--g3:#E0A54D;--g4:#C09BE0;--shadow:none;--onacc:#121110;
--goodBg:#183329;--goodFg:#8FD3B4;--okBg:#2E2A27;--okFg:#D6D0C9;--careBg:#3A2A14;--careFg:#F3C27A;--ink3:#A39C95}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",Roboto,system-ui,sans-serif;background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{margin:0;padding:0 16px;background:var(--bg)}
main{max-width:720px;margin:0 auto;padding:24px 0 64px}
h1{font-size:1.6rem;line-height:1.3;margin:.4em 0}h2{font-size:1.15rem;margin:1.6em 0 .4em}p,li{margin:.4em 0}
a{color:var(--acc)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
nav a{text-decoration:none;color:var(--mut);padding:4px 0}nav a:hover{color:var(--fg)}nav a:first-child{font-weight:700;color:var(--fg)}
nav .sp{flex:1}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--mut);font-size:.85rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.mut{color:var(--mut)}
label{display:block;margin:12px 0 4px}input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font:inherit}
button{padding:10px 18px;border:0;border-radius:14px;background:var(--acc);color:var(--onacc);font:inherit;font-weight:600;cursor:pointer}button[disabled]{opacity:.5}
table{border-collapse:collapse;width:100%;font-size:.92rem}td,th{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left;vertical-align:top}
#turnstile{margin:12px 0}
/* ko·en 을 한 파일에 두고 ?lang= 으로 하나만 보인다. JS 가 없으면 둘 다 보인다. */
html[data-lang=ko] [lang=en]{display:none}html[data-lang=en] [lang=ko]{display:none}
/* 한국어는 어절 단위로 줄바꿈(음절 중간에서 끊지 않는다), 긴 단어만 예외. */
:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== 랜딩(index) ===== */
.landing{max-width:1080px;padding-top:0}
.landing>nav{position:sticky;top:0;z-index:10;background:var(--bg);margin:0 -16px;padding:12px 16px}
@supports (backdrop-filter:blur(8px)){.landing>nav{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px)}}
.brand{display:inline-flex;align-items:center;gap:8px}
.brand img{width:26px;height:26px;border-radius:7px;flex:none}
.landing section{margin:96px 0;scroll-margin-top:72px}
.landing h2{font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.25;letter-spacing:-.01em;margin:0 0 10px}
.lead{color:var(--mut);margin:0 0 28px;max-width:60ch;font-size:1.05rem}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.sub{color:var(--mut)}
.landing .eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin:0 0 8px}

/* 히어로 */
.hero{display:grid;gap:24px;align-items:center;text-align:center;padding:40px 0 0;margin:8px 0 0!important;position:relative}
.hero::before{content:"";position:absolute;inset:-60px -16px 0;z-index:-1;pointer-events:none;
background:radial-gradient(50% 60% at 70% 30%,var(--accSoft) 0,transparent 70%),radial-gradient(40% 50% at 20% 70%,var(--blushSoft) 0,transparent 70%)}
.hero h1{font-size:clamp(2rem,6.2vw,3.5rem);line-height:1.15;letter-spacing:-.02em;margin:16px auto 14px;max-width:16ch}
.hero .lead{margin:0 auto 24px;font-size:1.12rem}
@media(min-width:860px){.hero{grid-template-columns:1.15fr .85fr;text-align:left;padding-top:56px}.hero h1,.hero .lead{margin-left:0}.hero .stores,.hero .facts{justify-content:flex-start}}
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px;background:var(--card);border:1px solid var(--line);font-size:.88rem;font-weight:600}
.badge svg{width:16px;height:16px;flex:none;color:var(--g1)}
.facts{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;list-style:none;padding:0;margin:16px 0 0;color:var(--mut);font-size:.9rem}
.facts li{margin:0;display:inline-flex;align-items:center;gap:6px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
/* 스토어 배지 — 출시 전엔 회색 테두리, data-*-url 이 채워지면 .live */
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.store{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px 0 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);text-decoration:none;font-weight:600;cursor:default}
.store svg{width:24px;height:24px;flex:none}
.store small{display:block;font-size:.72rem;font-weight:500;line-height:1.1;color:var(--mut)}
.store>span>span{display:block;line-height:1.2}
.store .go{display:none}
.store.live{background:var(--fg);color:var(--bg);border-color:var(--fg);cursor:pointer}
.store.live small{color:inherit;opacity:.8}
.store.live .go{display:block}.store.live .soon{display:none}

/* 히어로 그림 — 추상 모션(거울 스캔 라인 + 라벨 성분 하이라이트) */
.hv{width:min(100%,420px);margin:0 auto}
@media(max-width:859px){.hv{width:min(100%,320px)}}
.hv svg{display:block;width:100%;height:auto;overflow:visible}
.hv .ring{fill:#fff;filter:drop-shadow(0 18px 30px rgba(76,63,209,.28))}
.hv .lbl{fill:var(--card);stroke:var(--line);stroke-width:1.5;filter:drop-shadow(0 12px 24px rgba(29,27,26,.12))}
.hv .bar{fill:var(--neutral)}.hv .bar.k{fill:var(--mut);opacity:.55}
.hv .h1f{fill:var(--g1)}.hv .h3f{fill:var(--g3)}.hv .h4f{fill:var(--g4)}
.hv .hl rect{opacity:.2}
.hv .pt{fill:#fff}
.hv .tw{fill:var(--acc)}
@media(prefers-reduced-motion:no-preference){
.hv .scan{animation:scan 4.2s cubic-bezier(.45,0,.55,1) infinite alternate}
.hv .float{animation:float 7s ease-in-out infinite}
.hv .hl{transform-box:fill-box;transform-origin:left center;animation:hl 6.6s ease-in-out infinite both}
.hv .hl.b{animation-delay:1.1s}.hv .hl.c{animation-delay:2.2s}
.hv .pt{transform-box:fill-box;transform-origin:center;animation:pt 4.2s ease-in-out infinite both}
.hv .pt.b{animation-delay:.7s}.hv .pt.c{animation-delay:1.4s}.hv .pt.d{animation-delay:2.1s}
.hv .tw{transform-box:fill-box;transform-origin:center;animation:tw 3s ease-in-out infinite}
.hv .tw.b{animation-delay:1.5s}
.hv.paused *{animation-play-state:paused!important}}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(250px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hl{0%,10%{opacity:0;transform:scaleX(.2)}22%,72%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
@keyframes pt{0%,100%{opacity:.25;transform:scale(.6)}40%{opacity:1;transform:scale(1.25)}}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* 기능 행 + 스크린샷 자리 */
.feature{display:grid;gap:32px;align-items:center;margin:72px 0}
@media(min-width:780px){.feature{grid-template-columns:1fr 1.1fr;gap:64px}.feature.flip .media{order:2}}
.feature h3{font-size:clamp(1.3rem,2.8vw,1.75rem);line-height:1.3;letter-spacing:-.01em;margin:0 0 10px}
.feature p{color:var(--mut);margin:0 0 14px}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:30px;margin:8px 0}
.ticks li::before{content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--accSoft);color:var(--acc);font-size:12px;font-weight:700;line-height:20px;text-align:center}
.media{display:flex;justify-content:center;align-items:flex-start;position:relative;padding:12px 0}
.media::before{content:"";position:absolute;z-index:-1;width:min(380px,90%);aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(closest-side,var(--accSoft),transparent),radial-gradient(closest-side at 70% 70%,var(--blushSoft),transparent)}
.shot{position:relative;flex:none;width:min(250px,64vw);aspect-ratio:1290/2796;border-radius:34px;overflow:hidden;margin:0;
background:linear-gradient(160deg,var(--accSoft) 0,var(--neutral) 55%,var(--blushSoft) 100%);border:1px solid var(--line);box-shadow:0 24px 48px rgba(29,27,26,.14)}
.shot .mark{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:14px;background:url(/icon.svg) center/cover;opacity:.9}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent;transition:opacity .6s ease}
html.js .shot:not(.ok) img{opacity:0}
.shot.ok .mark,.shot.ok::after{display:none}
@media(prefers-reduced-motion:no-preference){
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:250% 100%;animation:sheen 3.8s ease-in-out infinite}}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.duo .shot{width:min(220px,44vw)}
.duo .shot+.shot{margin-left:-28px;margin-top:56px}
/* 33개 언어 흐름 띠 */
.langs{overflow:hidden;margin:20px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.langs ul{display:flex;gap:8px;width:max-content;list-style:none;padding:0;margin:0;animation:marq 70s linear infinite}
.langs li{margin:0;white-space:nowrap;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.88rem}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.langs{-webkit-mask-image:none;mask-image:none}.langs ul{flex-wrap:wrap;width:auto}.langs .dup{display:none}}

/* 홍보 영상 자리 */
.promo{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:28px;overflow:hidden;border:1px solid var(--line);
background:linear-gradient(135deg,#6A5FE0 0,#4C3FD1 55%,#3A2FB0 100%);box-shadow:0 24px 60px rgba(76,63,209,.25)}
.promo.tall{aspect-ratio:9/16;max-width:min(380px,100%)}
.promo video{display:block;width:100%;height:100%;background:#000}
.promo-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;padding:16px}
.promo-ph svg{width:72px;height:72px}
.promo-ph p{margin:0;font-weight:600;opacity:.92}
@media(prefers-reduced-motion:no-preference){.promo-ph svg{animation:pt 3s ease-in-out infinite}}

/* 등급 */
.grades{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.grades{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grades{grid-template-columns:repeat(4,1fr)}}
.grade{margin:0;display:flex;gap:14px;align-items:flex-start}
.grade .ico{font-size:28px;line-height:1;width:36px;flex:none;text-align:center;font-weight:700}
.grade h3{font-size:1rem;margin:2px 0 4px}.grade p{margin:0;color:var(--mut);font-size:.95rem}
.g1{color:var(--g1)}.g2{color:var(--g2)}.g3{color:var(--g3)}.g4{color:var(--g4)}
.noscore{display:flex;gap:12px;align-items:flex-start;background:var(--accSoft);border-radius:20px;padding:16px;margin-top:16px}
.noscore svg{width:28px;height:28px;flex:none;margin-top:2px;color:var(--acc)}
.noscore p{margin:0}
/* 기능 그리드 */
.feats{display:grid;gap:12px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
@media(min-width:620px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.feats{grid-template-columns:repeat(4,1fr)}}
.feats li{margin:0}
.feats svg{width:28px;height:28px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.feats h3{font-size:1rem;margin:0 0 4px}.feats p{margin:0;color:var(--mut);font-size:.95rem}
/* 프라이버시 */
.priv{display:grid;gap:12px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
.priv li{margin:0;display:flex;gap:12px;align-items:flex-start}
.priv svg{width:24px;height:24px;flex:none;stroke:var(--g1);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.priv b{display:block}.priv span.d{color:var(--mut);font-size:.95rem}
/* 고지 */
.notice{border:1px solid var(--line);border-left:4px solid var(--g3);border-radius:14px;padding:16px 20px;background:var(--card)}
.notice p{margin:0}.notice p+p{margin-top:6px;color:var(--mut);font-size:.95rem}
/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;display:flex;gap:12px;align-items:center;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--mut);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 14px;color:var(--mut)}
/* 마지막 CTA */
.cta{text-align:center;padding:48px 20px;border-radius:28px;background:linear-gradient(160deg,var(--accSoft),var(--blushSoft));border:1px solid var(--line)}
.cta img{width:72px;height:72px;border-radius:18px;margin:0 auto 12px;display:block}
.cta .stores{margin-top:20px}.cta .lead{margin:0 auto}
.priv+.sub{margin-top:16px}
/* 스크롤 등장 — JS 가 있고 움직임을 허용할 때만 숨겼다 보인다 */
@media(prefers-reduced-motion:no-preference){
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
.feats .rv:nth-child(4n+2),.grades .rv:nth-child(4n+2),.priv .rv:nth-child(2n){transition-delay:.08s}
.feats .rv:nth-child(4n+3),.grades .rv:nth-child(4n+3){transition-delay:.16s}
.feats .rv:nth-child(4n+4),.grades .rv:nth-child(4n+4){transition-delay:.24s}}
/* 푸터(랜딩) */
.landing footer{line-height:1.8}
.landing footer nav{border:0;padding:0 0 8px;font-size:.9rem}
.landing footer nav a:first-child{font-weight:400;color:var(--mut)}