:root{--bg:#f8f7f4;--bg-2:#f3f2ee;--panel:#ffffff;--panel-2:#f3f2ee;--panel-3:#e9e7e2;--line:rgba(20,18,14,.09);--line-2:rgba(20,18,14,.16);--ink:#1d1c1a;--text:#3d3c39;--dim:#6d6b66;--faint:#a19f99;
--accent:#3d7d76;--accent-2:#2f6660;--accent-ink:#ffffff;--sand:#b8955a;--rose:#b8766b;--slate:#6b7a9c;--err:#b5503f;--ok:#3f8a5f;--warn:#a07a2c;
--c-chat:#3d7d76;--c-image:#c9a66a;--c-audio:#c48479;--c-model3d:#7f8db0;--c-video:#9a8fb8;--c-host:#a8a59e;
--hi:20 18 14;--acc:61 125 118;--sh:20 18 14;--shk:.22;--head:rgba(248,247,244,.72);--head-2:rgba(248,247,244,.9);--glass:rgba(255,255,255,.82);--ring:rgba(255,255,255,.7);
--btn-bg:#1d1c1a;--btn-ink:#faf9f6;--btn-hover:#000;--btn-glow:rgba(20,18,14,.25);--grain:rgba(20,18,14,.07);--deep:#efede8;
--r-s:7px;--r:12px;--r-l:16px;--r-xl:24px;--ease:cubic-bezier(.16,1,.3,1);--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--lift:0 1px 2px rgba(20,18,14,.05),0 12px 32px -10px rgba(20,18,14,.14);--float:0 0 0 1px rgba(20,18,14,.03),0 30px 70px -24px rgba(20,18,14,.28),0 2px 6px rgba(20,18,14,.05);--pop1:#ff6a3d;--pop2:#ffc83a;--pop3:#2fc79f;--pop4:#4b9dff;--pop5:#ff7cb2;--pop6:#9a7cff;--pop-ink:#1d1c1a;--spring:cubic-bezier(.34,1.56,.64,1);color-scheme:light}
:root[data-theme=dark]{--bg:#121315;--bg-2:#0e0f11;--panel:#18191c;--panel-2:#1f2024;--panel-3:#282a2f;--line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.13);--ink:#ebe9e4;--text:#cfcdc8;--dim:#9b9ca1;--faint:#6b6c72;
--accent:#86b8b1;--accent-2:#a6ccc6;--accent-ink:#0f1413;--sand:#cdb27f;--rose:#c99289;--slate:#8e9bb8;--err:#e0897a;--ok:#8fc4a4;--warn:#d6b46e;
--c-chat:#86b8b1;--c-image:#cdb27f;--c-audio:#c99289;--c-model3d:#8e9bb8;--c-video:#a99fbd;--c-host:#6f727a;
--hi:255 255 255;--acc:134 184 177;--sh:0 0 0;--shk:1;--head:rgba(18,19,21,.7);--head-2:rgba(18,19,21,.85);--glass:rgba(28,29,33,.8);--ring:rgba(18,19,21,.55);
--btn-bg:#ebe9e4;--btn-ink:#121315;--btn-hover:#fff;--btn-glow:rgba(235,233,228,.35);--grain:rgba(255,255,255,.07);--deep:#0e0f11;
--lift:0 1px 0 rgba(255,255,255,.05) inset,0 1px 2px rgba(0,0,0,.35),0 12px 32px -14px rgba(0,0,0,.55);--float:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(255,255,255,.04),0 40px 90px -30px rgba(0,0,0,.8);--pop1:#ff7d55;--pop2:#ffd257;--pop3:#4fd8b2;--pop4:#6aafff;--pop5:#ff93c0;--pop6:#ad95ff;color-scheme:dark}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:15px/1.6 Geist,'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',system-ui,sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}@media(max-width:640px){.wrap{width:calc(100% - 32px)}}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
h1,h2,h3{color:var(--ink);margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.12}
h1{font-size:clamp(34px,4.4vw,54px)}h2{font-size:clamp(26px,2.9vw,36px)}h3{font-size:15.5px;letter-spacing:-.015em;line-height:1.4}
p{margin:0;text-wrap:pretty}h1,h2,h3{text-wrap:balance}.dim{color:var(--dim)}.faint{color:var(--faint)}.small{font-size:13px}.xs{font-size:12px}
.lede{font-size:16.5px;color:var(--dim);max-width:56ch;line-height:1.65}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px 5px 10px;background:rgb(var(--hi) / .03);backdrop-filter:blur(8px)}.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.kicker{font-size:13px;color:var(--dim);margin:0 0 14px}
.ico{width:16px;height:16px;flex:0 0 auto}

header.top{position:sticky;top:0;z-index:30;background:var(--head);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}header.top.scrolled{border-bottom-color:var(--line);background:var(--head-2)}
.top .wrap{display:flex;align-items:center;gap:28px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}.brand svg{width:22px;height:22px}.brand small{font-size:11px;font-weight:500;color:var(--dim);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px}
.top nav{display:flex;gap:2px;font-size:14px;color:var(--dim)}.top nav a{padding:6px 11px;border-radius:var(--r-s);transition:color .2s var(--ease),background .2s var(--ease)}.top nav a:hover{color:var(--ink)}.top nav a.on{color:var(--ink);background:rgb(var(--hi) / .06)}.top nav a.out::after{content:'';display:inline-block;width:6px;height:6px;margin-left:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-2px);opacity:.6}
.top .me{margin-left:auto;display:flex;gap:8px;align-items:center}.top .btn.dl .ico{width:14px;height:14px;margin-top:-2px}.round.theme{width:32px;height:32px;border-color:transparent;background:transparent}.round.theme .moon,:root[data-theme=dark] .round.theme .sun{display:none}:root[data-theme=dark] .round.theme .moon{display:block}
@media(max-width:820px){.top nav{display:none}.top .me .btn.ghost{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;border-radius:10px;padding:9px 16px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);cursor:pointer;line-height:1.2;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 1px 2px rgb(var(--sh) / calc(.3 * var(--shk)));transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
.btn:hover{background:var(--panel-3);border-color:rgb(var(--hi) / .2);transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}
.btn.main{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 20px -8px var(--btn-glow)}.btn.main:hover{background:var(--btn-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--dim);box-shadow:none}.btn.ghost:hover{color:var(--ink);background:rgb(var(--hi) / .06);transform:none}
.btn.big{padding:12px 20px;font-size:15px;border-radius:12px}.btn.sm{padding:6px 11px;font-size:13px;border-radius:var(--r-s)}.btn.wide{width:100%}
.btn.danger{color:var(--err);background:transparent;box-shadow:none}.btn.danger:hover{background:rgba(224,137,122,.08);border-color:rgba(224,137,122,.35)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}.link:hover{text-decoration-color:var(--ink)}

main{padding:0 0 96px}section{padding:96px 0 0}
.note{border:1px solid var(--line-2);background:var(--panel);border-radius:var(--r);padding:11px 14px;font-size:13.5px;color:var(--text);margin:0 0 20px}.note.err{border-color:rgba(224,137,122,.4);color:var(--err)}.note.ok{border-color:rgba(143,196,164,.35)}

/* 첫 화면: 가운데 큰 입력창 + 은은한 빛 */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:112px 0 0;isolation:isolate}
.aura{position:absolute;z-index:-1;left:50%;top:-60px;width:100vw;bottom:-40px;transform:translateX(-50%);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.aura::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 100%,rgba(134,184,177,.42),transparent 70%),radial-gradient(45% 45% at 12% 85%,rgba(142,155,184,.45),transparent 70%),radial-gradient(45% 45% at 88% 80%,rgba(201,146,137,.45),transparent 70%),radial-gradient(35% 30% at 50% 35%,rgba(205,178,127,.12),transparent 70%)}
.aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9;animation:drift 22s ease-in-out infinite alternate}
.aura i:nth-child(1){width:760px;height:560px;left:calc(50% - 760px);top:300px;background:radial-gradient(closest-side,rgba(134,184,177,.6),transparent)}
.aura i:nth-child(2){width:700px;height:520px;left:calc(50% + 40px);top:340px;background:radial-gradient(closest-side,rgba(201,146,137,.5),transparent);animation-delay:-7s}
.aura i:nth-child(3){width:680px;height:480px;left:calc(50% - 340px);top:560px;background:radial-gradient(closest-side,rgba(142,155,184,.55),transparent);animation-delay:-13s}
.aura i:nth-child(4){width:420px;height:320px;left:calc(50% - 160px);top:140px;background:radial-gradient(closest-side,rgba(205,178,127,.22),transparent);animation-delay:-4s}
.aura::after{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--grain) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 45% at 50% 30%,#000,transparent);mask-image:radial-gradient(ellipse 60% 45% at 50% 30%,#000,transparent)}
/* 밝은 바탕에서는 빛을 더 진하게 (Lovable처럼 화면 아래를 덮게, 색은 차분히) */
:root:not([data-theme=dark]) .aura::before{background:radial-gradient(75% 60% at 50% 100%,rgba(61,125,118,.34),transparent 72%),radial-gradient(48% 50% at 10% 88%,rgba(107,122,156,.42),transparent 72%),radial-gradient(48% 50% at 90% 84%,rgba(196,132,121,.42),transparent 72%),radial-gradient(40% 32% at 50% 30%,rgba(201,166,106,.16),transparent 70%)}
:root:not([data-theme=dark]) .aura i:nth-child(1){background:radial-gradient(closest-side,rgba(61,125,118,.42),transparent)}
:root:not([data-theme=dark]) .aura i:nth-child(2){background:radial-gradient(closest-side,rgba(196,132,121,.42),transparent)}
:root:not([data-theme=dark]) .aura i:nth-child(3){background:radial-gradient(closest-side,rgba(107,122,156,.45),transparent)}
@keyframes drift{to{transform:translate3d(40px,-30px,0) scale(1.08)}}
.hero h1{font-size:clamp(36px,5vw,60px);margin:22px 0 14px;letter-spacing:-.045em}.hero .lede{margin:0 auto;text-align:center}
.prompt{position:relative;width:min(700px,100%);margin:40px auto 0;text-align:left;border-radius:var(--r-xl);background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--line-2);box-shadow:var(--float);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.prompt:focus-within{border-color:rgb(var(--hi) / .22);box-shadow:var(--float),0 0 0 5px rgb(var(--acc) / .08)}
.prompt textarea{display:block;width:100%;min-height:92px;max-height:240px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px;line-height:1.55;padding:20px 22px 6px}.prompt textarea::placeholder{color:var(--faint)}
.prompt .bar{display:flex;align-items:center;gap:8px;padding:10px 12px 12px 14px}
.round{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:rgb(var(--hi) / .03);color:var(--dim);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}.round:hover{color:var(--ink);background:rgb(var(--hi) / .07)}
.round.go{margin-left:auto;background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 16px -6px var(--btn-glow)}.round.go:hover{transform:translateY(-1px);background:var(--btn-hover)}.round.go:active{transform:scale(.95)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:rgb(var(--hi) / .02);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}.pill:hover{color:var(--ink);border-color:var(--line-2);background:rgb(var(--hi) / .05);transform:translateY(-1px)}
.ideas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto 0;max-width:720px}
.hero .meta{margin-top:26px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;color:var(--faint);font-size:12.5px}.hero .meta span{display:inline-flex;align-items:center;gap:6px}

.head{display:grid;gap:12px;max-width:620px;margin:0 0 40px}
/* 견본 화면 띠 (끝없이 흐른다) */
.reel{justify-self:start;width:100vw;margin:56px 0 0 calc(50% - 50vw);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding:10px 0 60px}
.reel .track{display:flex;gap:22px;width:max-content;animation:reel 70s linear infinite}.reel:hover .track{animation-play-state:paused}@keyframes reel{to{transform:translateX(calc(-50% - 11px))}}
.phone{margin:0;width:170px;flex:0 0 auto;aspect-ratio:312/640;border-radius:24px;overflow:hidden;border:1px solid rgb(var(--hi) / .16);background:var(--panel);box-shadow:0 0 0 5px var(--ring),0 30px 60px -20px rgb(var(--sh) / calc(.85 * var(--shk)));transform:translateY(var(--y,0))}.phone img{width:100%;height:100%;object-fit:cover}
.ships-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ships-strip div{display:flex;gap:clamp(18px,4vw,52px);flex-wrap:wrap}.ships-strip b{font-size:clamp(16px,1.8vw,21px);font-weight:600;letter-spacing:-.02em;color:var(--dim)}
/* 견본 모음 (실제 화면) */
.row-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;max-width:none}@media(max-width:820px){.row-head{grid-template-columns:minmax(0,1fr)}}
.games{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}@media(max-width:1000px){.games{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:620px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}
.game{display:block;border-radius:var(--r-l);border:1px solid var(--line);background:var(--panel);overflow:hidden;box-shadow:var(--lift);transition:transform .5s var(--ease),border-color .3s var(--ease)}.game:hover{transform:translateY(-4px);border-color:var(--line-2)}
.game .pic{aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--line)}.game .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .8s var(--ease)}.game:hover .pic img{transform:scale(1.05)}
.game .pic{position:relative}.play-b{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);transition:transform .45s var(--spring)}.play-b svg{width:12px;height:12px}.game:hover .play-b{transform:scale(1.08)}
.playbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgb(12 11 10 / .66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:pbin .25s ease both}.playbox[hidden]{display:none}html.locked{overflow:hidden}
.pb-in{display:flex;align-items:center;gap:32px}.pb-phone{height:min(86dvh,820px);aspect-ratio:390/800;border-radius:46px;padding:10px;background:#1d1c1a;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px -30px rgba(0,0,0,.7);animation:pbpop .55s var(--spring) both}
.pb-phone iframe{width:100%;height:100%;border:0;border-radius:36px;background:#000;display:block}
.pb-side{display:grid;gap:12px;width:230px;color:#f5f3ee}.pb-side .pb-name{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}.pb-side p{margin:0 0 6px;color:rgba(245,243,238,.7);font-size:14.5px;line-height:1.5}.pb-side .btn.ghost{color:#f5f3ee;border-color:rgba(255,255,255,.28)}.pb-side .btn.main{background:#f5f3ee;color:#1d1c1a;border-color:#f5f3ee}
@keyframes pbin{from{opacity:0}}@keyframes pbpop{from{opacity:0;transform:translateY(30px) scale(.92)}}
@media(max-width:900px){.pb-side{display:none}}
.game .meta{padding:11px 13px 13px;display:grid;gap:2px}.game .meta b{color:var(--ink);font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game .meta span{font-size:12px;color:var(--faint)}
.caret{display:inline-block;width:2px;height:16px;background:var(--accent);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}

@media(max-width:900px){.deep{grid-template-columns:minmax(0,1fr);padding:36px 22px}}


.band{margin-top:96px;border:1px solid var(--line);border-radius:28px;padding:72px 32px;display:grid;justify-items:center;text-align:center;gap:18px;position:relative;overflow:hidden;isolation:isolate;background:var(--panel)}
.band::before{content:'';position:absolute;z-index:-1;inset:-30% -10% auto;height:120%;background:radial-gradient(40% 50% at 30% 0%,rgb(var(--acc) / .18),transparent 70%),radial-gradient(40% 50% at 75% 10%,rgba(201,146,137,.14),transparent 70%)}
.faq{margin-top:36px;border-top:1px solid var(--line);max-width:860px}.faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;list-style:none;padding:20px 0;color:var(--ink);font-weight:500;display:flex;justify-content:space-between;gap:16px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';font-family:var(--mono);color:var(--faint);transition:transform .3s var(--ease)}.faq details[open] summary::after{transform:rotate(45deg)}.faq details p{padding:0 0 20px;color:var(--dim);max-width:70ch}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:44px 0 0;padding:0;border-top:1px solid var(--line)}.steps li{list-style:none;padding:22px 24px 0 0}.steps .no{font-family:var(--mono);font-size:12px;color:var(--faint)}.steps h3{margin:10px 0 8px}.steps p{font-size:14px;color:var(--dim)}
@media(max-width:820px){.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:28px}}
.idea{width:min(700px,100%);border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--panel);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;margin:28px 0 0;box-shadow:var(--lift)}.idea p{flex:1;color:var(--ink);white-space:pre-wrap}

.page-head{padding:80px 0 8px;display:grid;gap:16px;max-width:760px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px}
.plan{padding:28px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--lift)}.plan.pick{background:linear-gradient(180deg,rgb(var(--acc) / .07),transparent 40%),var(--panel-2);border-color:var(--line-2)}
.plan .price{font-size:40px;font-weight:500;letter-spacing:-.04em;color:var(--ink);font-family:var(--mono)}.plan .price small{font-size:14px;color:var(--dim);font-family:Geist,'Pretendard Variable',sans-serif;margin-left:6px;letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:14px;color:var(--text)}.plan li{display:grid;grid-template-columns:16px 1fr;gap:8px}.plan li::before{content:'';width:9px;height:5px;border-left:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(-45deg) translate(2px,5px)}
.plan .go{margin-top:auto;padding-top:10px}.plan .badge{font-size:11.5px;color:var(--accent);font-weight:500}
@media(max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
.rows{border-top:1px solid var(--line)}.rows .r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px}.rows .r .k{color:var(--ink);font-weight:500}.rows .r.head{font-size:12px;color:var(--faint);padding:10px 0}
@media(max-width:700px){.rows .r{grid-template-columns:minmax(0,1fr) auto}.rows .r .hide-s{display:none}}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}.split>div:first-child{position:sticky;top:96px}@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split>div:first-child{position:static}}

.auth{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;align-items:center;min-height:min(calc(100dvh - 200px),720px);padding:48px 0}@media(max-width:860px){.auth{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0}}
.auth .side h1{font-size:clamp(30px,3.6vw,44px);margin:18px 0 14px}
.form-card{border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:28px;box-shadow:var(--float)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);margin:0 0 22px}.tabs a{text-align:center;padding:7px;border-radius:var(--r-s);font-size:14px;color:var(--dim)}.tabs a.on{background:var(--panel-3);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
form.f{display:grid;gap:16px}.field{display:grid;gap:7px}.field label{font-size:13px;color:var(--text);font-weight:500}.field .help{font-size:12px;color:var(--faint)}
.field input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font-size:15px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}.field input:focus{outline:none;border-color:rgb(var(--hi) / .28);box-shadow:0 0 0 4px rgb(var(--acc) / .1)}.field input.code{font-family:var(--mono);letter-spacing:.4em;text-align:center;font-size:20px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.check{display:flex;gap:8px;align-items:center;color:var(--dim);font-size:13px}.check input{accent-color:var(--accent)}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px}.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

.shell{display:grid;grid-template-columns:216px minmax(0,1fr);gap:40px;padding-top:40px}.shell nav.side{position:sticky;top:92px;align-self:start;display:grid;gap:2px;font-size:14px}.shell nav.side a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-s);color:var(--dim);transition:background .2s var(--ease),color .2s var(--ease)}.shell nav.side a:hover{color:var(--ink);background:rgb(var(--hi) / .04)}.shell nav.side a.on{color:var(--ink);background:rgb(var(--hi) / .07)}.shell nav.side .who{display:flex;gap:10px;align-items:center;padding:4px 10px 16px;margin:0 0 8px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim);overflow:hidden}.shell nav.side .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent),var(--sand))}
@media(max-width:860px){.shell{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:24px}.shell nav.side{position:static;display:flex;overflow-x:auto}.shell nav.side .who{display:none}}
.greet{padding:12px 0 28px}.greet h1{font-size:clamp(26px,3vw,34px)}.greet .prompt{margin:22px 0 0;width:100%}
.block{border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);margin:0 0 16px;overflow:hidden;box-shadow:var(--lift)}.block .bh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line)}.block .bh h2{font-size:16.5px;letter-spacing:-.02em}.block .bb{padding:22px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}.stats>div{padding:20px 22px;border-left:1px solid var(--line)}.stats>div:first-child{border-left:0}.stats .k{font-size:12.5px;color:var(--dim)}.stats .v{font-family:var(--mono);font-size:26px;color:var(--ink);letter-spacing:-.03em;margin-top:6px}.stats .s{font-size:12px;color:var(--faint);margin-top:2px}
@media(max-width:700px){.stats{grid-template-columns:minmax(0,1fr)}.stats>div{border-left:0;border-top:1px solid var(--line)}.stats>div:first-child{border-top:0}}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}form.inline{display:inline}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}.seg a{padding:4px 11px;border-radius:var(--r-s);font-size:13px;color:var(--dim)}.seg a.on{background:var(--panel-3);color:var(--ink)}
.usage-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 18px}.usage-top .v{font-family:var(--mono);font-size:30px;color:var(--ink);letter-spacing:-.03em}
.chart svg{width:100%;height:auto;overflow:visible}.chart .grid line{stroke:var(--line)}.chart text{font-size:10.5px;fill:var(--faint);font-family:var(--mono)}.chart g.d:hover rect.s{opacity:.8}.chart g.d rect.hit{fill:transparent}.chart g.d:hover rect.hit{fill:rgb(var(--hi) / .03)}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:18px;border-top:1px solid var(--line)}.legend div{display:flex;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}.legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}.legend .v{margin-left:auto;font-family:var(--mono);color:var(--ink);padding-right:16px}
.empty{padding:36px 0;color:var(--dim);font-size:14px;max-width:60ch}

.game-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.5fr);gap:20px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}.game-row:last-child{border-bottom:0}
.game-row .name{color:var(--ink);font-weight:500}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--faint);margin-right:7px;vertical-align:1px}.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(143,196,164,.14)}.dot.err{background:var(--err)}
.game-row form{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.game-row select{padding:7px 10px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font-size:13px;max-width:100%}
@media(max-width:860px){.game-row{grid-template-columns:minmax(0,1fr)}.game-row form{justify-content:flex-start}}

footer{border-top:1px solid var(--line);padding:56px 0 64px;font-size:13px;color:var(--dim)}footer .wrap{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px}footer h4{margin:0 0 12px;font-size:12px;font-weight:500;color:var(--faint)}footer a{display:block;padding:3px 0}footer a:hover{color:var(--ink)}footer .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);color:var(--faint);font-size:12px}
@media(max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.js .rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}.js .rv.in{opacity:1;transform:none}
.reel .track{will-change:transform}@media(prefers-reduced-motion:reduce){.reel .track{animation:none}.js .rv{opacity:1;transform:none;transition:none}.aura i,.gems b,.caret,.eyebrow i{animation:none}.acc button.on::after{animation:none;width:100%}}
/* ── 첫 화면 4판: 움직임과 이야기 ── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:40;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),var(--sand),var(--rose));opacity:.8;pointer-events:none}
.words .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.25em);animation:wordin 1s var(--ease) forwards;animation-delay:calc(120ms + var(--i) * 90ms)}@keyframes wordin{to{opacity:1;filter:none;transform:none}}
.aura i{will-change:transform}
/* 스크롤 이야기: 왼쪽 단계, 오른쪽 붙어 있는 스튜디오 창 */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.story-steps .step{min-height:56vh;display:flex;flex-direction:column;justify-content:center;gap:10px;opacity:.28;transition:opacity .6s var(--ease)}.story-steps .step.on{opacity:1}.story-steps .step:last-child{min-height:62vh}
.story-steps .no{font-family:var(--mono);font-size:12px;color:var(--faint)}.story-steps .step h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.03em}.story-steps .step p{color:var(--dim);font-size:16px;max-width:40ch}
.story-stage{position:sticky;top:max(88px,calc(50vh - 280px))}
.studio{border-radius:20px;border:1px solid var(--line-2);background:var(--panel);box-shadow:var(--float);overflow:hidden}
.bar3{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--bg-2);font-size:12px;color:var(--faint)}.bar3 i{width:10px;height:10px;border-radius:50%;background:var(--panel-3)}.bar3 span{margin-left:10px}.bar3 .ver{margin-left:auto;font-style:normal;font-family:var(--mono);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.body3{display:grid;grid-template-columns:minmax(0,1fr) 230px;height:520px}
.chat3{padding:18px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line);font-size:13.5px;line-height:1.55;overflow:hidden}
.chat3 .msg{padding:10px 13px;border-radius:14px;background:var(--panel-2);color:var(--text);max-width:92%;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease);display:none}.chat3 .msg.me{align-self:flex-end;background:var(--btn-bg);color:var(--btn-ink)}.chat3 .msg .tag{display:block;font-size:11px;color:var(--faint);margin-bottom:3px}
.chat3 .msg.show{display:block}.chat3 .msg.in{opacity:1;transform:none}
.chip3{display:inline-block;font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:6px;padding:0 6px;margin:6px 6px 0 0;color:var(--accent)}
.type3{margin-top:auto;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;color:var(--faint);font-size:12.5px;display:flex;align-items:center;min-height:42px}
.dots{display:inline-flex;gap:4px}.dots i{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:dot 1.2s ease-in-out infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{40%{transform:translateY(-4px);opacity:.4}}
.view3{display:grid;place-items:center;padding:18px;background:radial-gradient(70% 60% at 50% 40%,rgb(var(--acc) / .12),transparent 70%),var(--bg-2)}
.phone3{position:relative;width:100%;aspect-ratio:312/640;max-height:480px;border-radius:24px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 24px 48px -20px rgb(var(--sh) / calc(.8 * var(--shk)))}
.phone3 img{width:100%;height:100%;object-fit:cover;transition:filter 1.2s var(--ease),transform 1.2s var(--ease)}
.studio[data-step="1"] .phone3 img,.studio[data-step="2"] .phone3 img,.studio[data-step="3"] .phone3 img{filter:sepia(.9) hue-rotate(-28deg) saturate(1.9) brightness(1.04)}
.doc3,.ship3{position:absolute;left:10px;right:10px;bottom:10px;border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-2);padding:10px 12px;display:grid;gap:6px;font-size:11px;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);color:var(--text)}
.doc3 div{display:grid;grid-template-columns:28px 1fr 30px;gap:8px;align-items:center}.doc3 i{height:5px;border-radius:3px;background:var(--panel-3);position:relative;overflow:hidden}.doc3 i::after{content:'';position:absolute;inset:0;width:var(--v);background:var(--dim);border-radius:3px;transform-origin:0;transform:scaleX(0);transition:transform 1s var(--ease)}.doc3 .hot i::after{background:var(--warn)}.doc3 .hot{color:var(--ink);font-weight:500}.doc3 b{font-family:var(--mono);font-weight:500;text-align:right}
.studio[data-step="2"] .doc3{opacity:1;transform:none}.studio[data-step="2"] .doc3 i::after{transform:scaleX(1)}
.ship3 div{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.35;transition:opacity .4s var(--ease);transition-delay:calc(var(--i) * 140ms)}.ck{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--panel-3);color:transparent;transition:background .4s var(--ease),color .4s var(--ease);transition-delay:inherit}
.studio[data-step="3"] .ship3{opacity:1;transform:none}.studio[data-step="3"] .ship3 div{opacity:1}.studio[data-step="3"] .ship3 .ck{background:var(--accent);color:var(--accent-ink)}
@media(max-width:900px){.story{grid-template-columns:minmax(0,1fr);gap:0}.story-stage{position:sticky;top:64px;z-index:2;order:-1;margin:0 -4px 8px}.body3{grid-template-columns:minmax(0,1fr) 120px;height:300px}.chat3{font-size:12px;padding:12px}.story-steps .step{min-height:46vh}.phone3{border-radius:16px}.doc3,.ship3{font-size:9.5px;padding:6px 8px;gap:3px}.doc3 div{grid-template-columns:22px 1fr 24px;gap:4px}.ship3 div{font-size:10px}}
/* 기능 칸 (빛이 커서를 따라간다) */
.bento2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}
@media(max-width:960px){.bento2{grid-template-columns:minmax(0,1fr)}.span2,.span3,.span4{grid-column:auto}}
.tile2{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--lift);padding:24px;display:flex;flex-direction:column;gap:18px;min-height:300px;overflow:hidden;isolation:isolate;transition:border-color .3s var(--ease),transform .5s var(--ease)}
.tile2::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,-999px) var(--my,-999px),rgb(var(--acc) / .1),transparent 60%);opacity:0;transition:opacity .4s var(--ease)}.tile2:hover::before{opacity:1}.tile2:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tile2 .t{display:grid;gap:8px;max-width:52ch}.tile2 .t p{font-size:14px;color:var(--dim)}.tile2 .ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);margin-bottom:4px}
.viz{margin-top:auto}
.bars2{display:flex;gap:8px;align-items:flex-end;height:130px}.bars2 i{flex:1;height:100%;position:relative;border-radius:8px 8px 3px 3px;background:var(--panel-2);overflow:hidden}.bars2 i::before{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--v);background:linear-gradient(180deg,rgb(var(--acc) / .55),rgb(var(--acc) / .25));border-radius:8px 8px 3px 3px;transform-origin:bottom;transform:scaleY(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 70ms)}.bars2 i.hot::before{background:var(--warn);opacity:.85}.in .bars2 i::before,.bars2.in i::before{transform:scaleY(1)}.bars2 b{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink);opacity:.7}
.tl{display:grid;gap:0;border-left:1px solid var(--line-2);margin-left:6px}.tl div{position:relative;padding:7px 0 7px 16px;display:grid;gap:1px;font-size:12.5px;color:var(--dim)}.tl div::before{content:'';position:absolute;left:-4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--panel-3);border:1px solid var(--line-2)}.tl div.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgb(var(--acc) / .15)}.tl b{font-family:var(--mono);font-weight:500;color:var(--ink);font-size:11.5px}
.assets{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.assets i{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;background:var(--panel-2)}.assets i img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:0;transform:scale(1.15);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 160ms + 200ms)}.assets i::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(var(--hi) / .12) 50%,transparent 70%);background-size:220% 100%;animation:shim 1.6s linear infinite}.tile2.in .assets i img{opacity:1;transform:none}.tile2.in .assets i::after{animation:none;opacity:0;transition:opacity .4s;transition-delay:calc(var(--i) * 160ms + 400ms)}@keyframes shim{to{background-position:-120% 0}}
.wave{grid-column:1/-1;display:flex;align-items:center;gap:3px;height:34px;margin-top:6px}.wave b{flex:1;border-radius:2px;background:var(--rose);opacity:.6;height:30%;animation:wave 1.4s ease-in-out infinite;animation-delay:calc(var(--i) * -63ms)}@keyframes wave{50%{height:100%}}
.srv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.srv>div:not(.live){border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--bg-2);display:grid;gap:4px;transition:border-color .4s var(--ease),background .4s var(--ease)}.srv>div.on{border-color:var(--line-2);background:var(--panel-2)}.srv b{color:var(--ink);font-weight:600}.srv .p{font-family:var(--mono);color:var(--ink);font-size:18px;margin-top:6px}.srv .p small{font-size:11px;color:var(--faint);margin-left:2px}
.srv .meter{display:flex;gap:3px;margin:8px 0 2px}.srv .meter i{flex:1;height:5px;border-radius:2px;background:var(--panel-3)}.srv .meter i.f{background:var(--accent)}
.live{grid-column:1/-1;display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--dim)}.live b{font-family:var(--mono);color:var(--ink);font-weight:500}
@media(max-width:560px){.srv{grid-template-columns:minmax(0,1fr)}}
.check{display:grid;gap:8px}.check div{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dim);opacity:.5;transition:opacity .5s var(--ease),color .5s var(--ease);transition-delay:calc(var(--i) * 260ms + 300ms)}.check .ck{transition-delay:calc(var(--i) * 260ms + 300ms)}.tile2.in .check div{opacity:1;color:var(--text)}.tile2.in .check .ck{background:var(--accent);color:var(--accent-ink)}
.link3{display:flex;align-items:center;gap:0;padding:6px 0 4px}.link3>div{display:grid;justify-items:center;gap:8px}.link3 .n{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);box-shadow:var(--lift)}.link3 .n svg{width:22px;height:22px}.link3 em{font-style:normal;font-size:12px;color:var(--dim)}
.link3>i{flex:1;height:2px;margin:0 6px 24px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:flow 1s linear infinite;border-radius:2px}@keyframes flow{to{background-position:24px 0}}
/* 숫자 줄 */
.numbers{margin-top:96px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.numbers>div{padding:30px 24px;display:grid;gap:6px;border-left:1px solid var(--line)}.numbers>div:first-child{border-left:0;padding-left:0}.numbers b{font-family:var(--mono);font-weight:500;font-size:clamp(34px,4vw,48px);letter-spacing:-.04em;color:var(--ink);line-height:1}.numbers b small{font-size:.45em;color:var(--dim);margin-left:4px;font-family:inherit}.numbers>div>span{font-size:13px;color:var(--dim)}
@media(max-width:760px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}.numbers>div:nth-child(3){border-left:0;padding-left:0}.numbers>div{border-top:1px solid var(--line)}.numbers>div:nth-child(-n+2){border-top:0}}
/* 견본 거르기 */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:-12px 0 20px}.filters .pill.on{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.game{transition:transform .5s var(--ease),border-color .3s var(--ease),opacity .4s var(--ease)}.game.off{display:none}.game.pop{animation:pop2 .5s var(--ease)}@keyframes pop2{from{opacity:0;transform:scale(.96)}}
/* 요금 맛보기 */
.ptease{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}@media(max-width:820px){.ptease{grid-template-columns:minmax(0,1fr)}}
.pt{position:relative;display:grid;gap:6px;padding:24px;border-radius:20px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--lift);transition:transform .5s var(--ease),border-color .3s var(--ease)}.pt:hover{transform:translateY(-3px);border-color:var(--line-2)}.pt.pick{background:linear-gradient(160deg,rgb(var(--acc) / .1),transparent 50%),var(--panel)}
.pt .nm{font-size:14px;color:var(--dim)}.pt .pr{font-family:var(--mono);font-size:40px;letter-spacing:-.04em;color:var(--ink)}.pt .pr small{font-size:14px;color:var(--faint);margin-left:4px}.pt .ln{font-size:14px;color:var(--text)}.pt .arr{position:absolute;right:20px;top:22px;color:var(--faint);transition:transform .4s var(--ease),color .3s}.pt:hover .arr{transform:translateX(4px);color:var(--ink)}
/* 맨 아래 */
.finale{position:relative;isolation:isolate;margin-top:112px;padding:96px 24px 88px;border-radius:32px;overflow:hidden;display:grid;justify-items:center;text-align:center;gap:14px;border:1px solid var(--line);background:var(--panel)}.finale h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.04em}.finale .prompt{margin-top:22px}
.aura.soft{top:0;bottom:0;width:100%;left:0;transform:none;-webkit-mask-image:none;mask-image:none}.aura.soft i:nth-child(1){left:-10%;top:30%}.aura.soft i:nth-child(2){left:55%;top:20%}.aura.soft i:nth-child(3){left:20%;top:60%}
.btn.main.big{will-change:transform}
@media(prefers-reduced-motion:reduce){.words .w{animation:none;opacity:1;filter:none;transform:none}.wave b,.link3>i,.dots i{animation:none}.story-steps .step{opacity:1}}
/* ── 첫 화면 5판: 팝 (2026-10-26 사용자: 정형화되지 않고 팝팝하게, 애플 같은 스크롤 모션) ── */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.hero h1{font-size:clamp(40px,6.6vw,84px);font-weight:700;letter-spacing:-.055em;line-height:1.02;max-width:12ch;margin:22px auto 18px}
.hero h1 .w{position:relative}
.hero h1 .mk{isolation:isolate}.hero h1 .mk::before{content:'';position:absolute;z-index:-1;left:-.08em;right:-.08em;bottom:.06em;height:.42em;background:var(--pop2);border-radius:.12em;transform:skewX(-8deg) scaleX(0);transform-origin:0 50%;animation:mk .7s var(--ease) forwards;animation-delay:1.1s}@keyframes mk{to{transform:skewX(-8deg) scaleX(1)}}
.hero h1 .st{color:var(--pop-ink);padding:0 .16em;margin:0 .04em;border-radius:.22em;background:var(--pop5);box-shadow:0 .08em 0 rgb(var(--sh) / calc(.18 * var(--shk)));animation:wordin 1s var(--ease) forwards,tilt .8s var(--spring) forwards;animation-delay:calc(120ms + var(--i) * 90ms),1.3s}@keyframes tilt{to{transform:rotate(-4deg)}}
:root[data-theme=dark] .hero h1 .mk::before{opacity:.45}.eyebrow{background:var(--panel);box-shadow:0 2px 0 rgb(var(--sh) / calc(.08 * var(--shk)));transform:rotate(-2deg)}.eyebrow i{background:var(--pop3)}
/* 떠다니는 스티커 (커서를 따라 겹겹이 움직인다) */
.stk{position:absolute;inset:0;z-index:-1;pointer-events:none}
.stk>span{position:absolute;left:var(--x);top:var(--y);width:var(--s);translate:calc(var(--cx,0) * var(--d) * 1px) calc(var(--cy,0) * var(--d) * 1px)}
.stk>span{will-change:translate}.stk .bob{display:grid;place-items:center;animation:bob var(--t,7s) ease-in-out infinite alternate}.stk .bob>i{grid-area:1/1;display:block;width:100%;transition:transform .8s var(--spring),opacity .35s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}.stk .bob svg{display:block;width:100%;height:auto}
.stk .sk{width:min(100%,64px);transform:scale(.2) rotate(-120deg);opacity:0}
:root[data-theme=dark] .stk .sh{transform:scale(.2) rotate(120deg);opacity:0}
:root[data-theme=dark] .stk .sk{transform:none;opacity:1}
:root[data-theme=dark] .stk>span:hover .sk{transform:rotate(-12deg) scale(1.1)}
@keyframes bob{from{transform:translateY(-8px) rotate(var(--r0,-8deg))}to{transform:translateY(10px) rotate(var(--r1,10deg))}}
@media(max-width:760px){.stk>span{width:calc(var(--s) * .62)}.stk>span.far{display:none}}
.glow{position:absolute;z-index:-1;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in oklab,var(--pop2) 45%,transparent),transparent);translate:50vw -999px;opacity:.7;will-change:translate}
:root[data-theme=dark] .glow{opacity:.35}
/* 밝은 빛을 팝 색으로 */
:root:not([data-theme=dark]) .aura::before,.aura::before{background:radial-gradient(70% 55% at 50% 100%,color-mix(in oklab,var(--pop2) 55%,transparent),transparent 70%),radial-gradient(45% 50% at 8% 88%,color-mix(in oklab,var(--pop4) 50%,transparent),transparent 72%),radial-gradient(45% 50% at 92% 82%,color-mix(in oklab,var(--pop5) 55%,transparent),transparent 72%),radial-gradient(30% 30% at 50% 30%,color-mix(in oklab,var(--pop3) 18%,transparent),transparent 70%)}
:root:not([data-theme=dark]) .aura i:nth-child(1),.aura i:nth-child(1){background:radial-gradient(closest-side,color-mix(in oklab,var(--pop3) 45%,transparent),transparent)}
:root:not([data-theme=dark]) .aura i:nth-child(2),.aura i:nth-child(2){background:radial-gradient(closest-side,color-mix(in oklab,var(--pop1) 40%,transparent),transparent)}
:root:not([data-theme=dark]) .aura i:nth-child(3),.aura i:nth-child(3){background:radial-gradient(closest-side,color-mix(in oklab,var(--pop6) 35%,transparent),transparent)}
:root[data-theme=dark] .aura{opacity:.55}
/* 입력창: 무지개 테두리가 돈다 */
.prompt::before{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang),var(--pop1),var(--pop2),var(--pop3),var(--pop4),var(--pop5),var(--pop1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.45;transition:opacity .4s var(--ease);animation:spin 6s linear infinite;pointer-events:none}
.prompt:hover::before,.prompt:focus-within::before{opacity:1;animation-duration:2.6s}@keyframes spin{to{--ang:360deg}}
.prompt{transition:transform .5s var(--spring),box-shadow .3s var(--ease);backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel)}
/* 흐림 필터는 움직이면 매 프레임 다시 그려서 무겁다: 빛 덩어리는 그라디언트만 쓴다 */
.aura i{filter:none}.prompt:focus-within{transform:translateY(-2px) rotate(-.3deg)}
.ideas .pill:nth-child(1){--pc:var(--pop3)}.ideas .pill:nth-child(2){--pc:var(--pop5)}.ideas .pill:nth-child(3){--pc:var(--pop2)}
.ideas .pill{background:color-mix(in oklab,var(--pc,var(--pop4)) 16%,var(--panel));border-color:color-mix(in oklab,var(--pc,var(--pop4)) 40%,transparent);color:var(--ink);transition:transform .45s var(--spring),background .2s}.ideas .pill:nth-child(odd){transform:rotate(-1.5deg)}.ideas .pill:nth-child(even){transform:rotate(1.5deg)}.ideas .pill:hover{transform:rotate(0) scale(1.06)}
/* 단추: 통통 튀고 누른 곳에서 물결 */
.btn,.round.go,.pill{position:relative;overflow:hidden}.btn{transition:background .2s var(--ease),border-color .2s var(--ease),transform .45s var(--spring),box-shadow .2s var(--ease),color .2s var(--ease)}
.rip{position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;background:currentColor;opacity:.28;transform:scale(0);animation:rip .6s var(--ease) forwards}@keyframes rip{to{transform:scale(var(--k,24));opacity:0}}
/* 견본 띠: 끌고, 스크롤 빠르기에 따라 빨라지고 기운다 */
.reel{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.reel.drag{cursor:grabbing}
.reel .track{animation:none;transform:translate3d(var(--off,0px),0,0) skewX(var(--sk,0deg))}
.reel .phone{transform:none;translate:0 var(--y,0);rotate:var(--r,0deg);transition:translate .5s var(--spring),rotate .5s var(--spring),scale .5s var(--spring),box-shadow .4s var(--ease)}
.reel .phone:hover{translate:0 calc(var(--y,0px) - 18px);rotate:0deg;scale:1.06;box-shadow:0 0 0 5px var(--ring),0 40px 70px -20px rgb(var(--sh) / calc(.9 * var(--shk)))}
.reel img{pointer-events:none;-webkit-user-drag:none}
/* 테이프 (두 줄이 엇갈려 흐른다) */
.tapes{position:relative;width:100vw;margin:24px 0 0 calc(50% - 50vw);height:170px;overflow:hidden}
.tape{position:absolute;left:-5vw;width:110vw;padding:14px 0;white-space:nowrap;font-size:clamp(20px,2.6vw,32px);font-weight:700;letter-spacing:-.03em;color:var(--pop-ink)}
.tape .in{display:inline-flex;align-items:center;gap:22px;will-change:transform;transform:translate3d(var(--off,0px),0,0)}
.tape svg{width:.8em;height:.8em;flex:0 0 auto}
.tape.a{top:34px;background:var(--pop2);rotate:-3deg;z-index:1;box-shadow:0 10px 30px -14px rgb(var(--sh) / calc(.4 * var(--shk)))}
.tape.b{top:64px;background:var(--ink);color:var(--bg);rotate:2deg}.tape.b svg{color:var(--pop5)}
/* 애플식 확대: 화면이 고정되고, 스크롤에 맞춰 커다란 화면이 손 안 크기로 내려앉는다 */
.zoom{height:280vh;position:relative;padding:0}
.zoom-pin{position:sticky;top:0;height:100dvh;overflow:hidden;display:grid;place-items:center}
.z-h{position:absolute;left:0;right:0;top:11vh;text-align:center;font-size:clamp(34px,5.4vw,72px);font-weight:700;letter-spacing:-.05em;line-height:1.02;z-index:2;pointer-events:none}
.z-h{will-change:transform,opacity;text-shadow:0 0 24px var(--bg),0 0 48px var(--bg),0 0 80px var(--bg)}.z-h.a{opacity:calc(1 - var(--a,0) * 1.6);transform:translateY(calc(var(--a,0) * -50px)) scale(calc(1 - var(--a,0) * .08))}
.z-h.b{opacity:var(--b,0);transform:translateY(calc((1 - var(--b,0)) * 40px))}.z-h .st{display:inline-block;color:var(--pop-ink);background:var(--pop3);border-radius:.2em;padding:0 .16em;rotate:-3deg}
/* 크게 그려 두고 줄인다: 작은 그림을 키우면 흐려진다 */
.z-dev{--Z:2.2;position:absolute;left:50%;top:calc(50% + 6vh);translate:-50% -50%;height:calc(min(64dvh,600px) * var(--Z));aspect-ratio:390/800;border-radius:calc(44px * var(--Z));padding:calc(9px * var(--Z));background:var(--ink);box-shadow:0 calc(60px * var(--Z)) calc(120px * var(--Z)) calc(-40px * var(--Z)) rgb(var(--sh) / calc(.7 * var(--shk)));transform:translateY(calc((1 - var(--a,0)) * (var(--Z) - 1) * min(32dvh,300px))) scale(calc((var(--Z) - var(--a,0) * (var(--Z) - 1)) / var(--Z))) rotate(calc((1 - var(--a,0)) * -9deg));will-change:transform}
.z-dev .scr{position:relative;width:100%;height:100%;border-radius:calc(36px * var(--Z));overflow:hidden;background:var(--panel)}.z-dev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.z-dev img.warm{filter:sepia(.9) hue-rotate(-28deg) saturate(1.9);opacity:var(--b,0);will-change:opacity}
.z-tags{position:absolute;left:50%;top:calc(50% + 6vh);width:0;height:0}
.z-tags{z-index:0}.z-dev{z-index:1}
.z-boom{position:absolute;left:50%;top:calc(50% + 6vh);width:0;height:0;z-index:0;pointer-events:none}
.z-boom i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:var(--c);opacity:0}
.z-boom i.l{width:8px;height:18px;border-radius:3px}.z-boom i.o{border-radius:50%}.z-boom i.s{width:18px;height:18px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.zoom.boom .z-boom i{animation:zboom .9s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:var(--t)}
@keyframes zboom{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}15%{opacity:1}100%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--dr))}}
.z-tags span{position:absolute;width:clamp(92px,9vw,136px);aspect-ratio:390/800;translate:-50% -50%;scale:.35;rotate:0deg;opacity:0;transition:translate .9s var(--spring),scale .9s var(--spring),rotate .9s var(--spring),opacity .25s;transition-delay:calc(var(--i) * 70ms)}
.zoom[data-stage="2"] .z-tags span,.zoom[data-stage="3"] .z-tags span{translate:calc(var(--x) - 50%) calc(var(--y) - 50%);scale:1;rotate:var(--r);opacity:1}
.z-tags span>i{display:block;height:100%;border-radius:18px;padding:5px;background:var(--ink);box-shadow:0 22px 44px -16px rgb(var(--sh) / calc(.55 * var(--shk)));animation:zbob 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.6s)}
.z-tags span img{width:100%;height:100%;object-fit:cover;border-radius:13px;display:block}
@keyframes zbob{to{transform:translateY(-10px) rotate(1.5deg)}}
.zoom[data-stage="2"] .z-tags span,.zoom[data-stage="3"] .z-tags span{transform:scale(1) rotate(var(--r))}
@media(max-width:760px){.zoom{height:220vh}.z-tags{z-index:2}.z-tags span{width:64px}.zoom[data-stage="2"] .z-tags span,.zoom[data-stage="3"] .z-tags span{translate:calc(var(--xm) - 50%) calc(var(--y) * 1.3 - 50%)}.z-tags span>i{border-radius:12px;padding:3px}.z-tags span img{border-radius:9px}.z-tags span:nth-child(2),.z-tags span:nth-child(5){display:none}.z-dev{border-radius:calc(30px * var(--Z));padding:calc(6px * var(--Z))}.z-dev .scr{border-radius:calc(25px * var(--Z))}}
/* 읽는 만큼 글자가 켜진다 */
.say{max-width:980px;padding-top:120px}.say p{font-size:clamp(26px,3.6vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1.22;color:var(--ink)}
.say .sw{opacity:.14;transition:opacity .35s var(--ease),color .35s var(--ease)}.say .sw.lit{opacity:1}.say .sw.c1.lit{color:var(--pop1)}.say .sw.c3.lit{color:var(--pop3)}.say .sw.c4.lit{color:var(--pop4)}.say .sw.c5.lit{color:var(--pop5)}
/* 쪽지 같은 소제목 */
.kicker{display:inline-block;justify-self:start;width:max-content;max-width:100%;font-weight:600;font-size:13px;color:var(--pop-ink);background:var(--kc,var(--pop2));padding:4px 12px;border-radius:999px;rotate:-2.5deg;box-shadow:0 3px 0 rgb(var(--sh) / calc(.1 * var(--shk)))}
section:nth-of-type(3n) .kicker{--kc:var(--pop3);rotate:2deg}section:nth-of-type(3n+1) .kicker{--kc:var(--pop5)}
.story-steps .no{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;font-weight:600;color:var(--pop-ink);background:var(--pop2);rotate:-6deg;transition:rotate .5s var(--spring),scale .5s var(--spring)}.story-steps .step:nth-of-type(3) .no{background:var(--pop3)}.story-steps .step:nth-of-type(4) .no{background:var(--pop5)}.story-steps .step:nth-of-type(5) .no{background:var(--pop4)}.story-steps .step.on .no{rotate:4deg;scale:1.15}
.studio{border-radius:26px}.chat3 .msg.in{animation:msgpop .55s var(--spring)}@keyframes msgpop{from{transform:scale(.85)}}
/* 채팅 장면: 말풍선·스티커·단계마다 바뀌는 색 (2026-10-27 사용자: 시각 요소 강화) */
.studio{border:0;box-shadow:0 0 0 1px var(--line-2),0 50px 100px -40px rgb(var(--sh) / calc(.7 * var(--shk)))}
.chat3{font-size:14px;gap:12px}.chat3 .msg{padding:11px 14px}
.chat3 .msg.me{background:var(--pop1);color:#fff;font-weight:500;border-radius:20px 20px 6px 20px;box-shadow:0 10px 24px -14px var(--pop1)}
.chat3 .msg.ai{background:color-mix(in oklab,var(--pop3) 13%,var(--panel));color:var(--ink);border-radius:20px 20px 20px 6px}
.chat3 .msg .tag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px}.chat3 .av{display:inline-grid;width:22px;height:22px;color:var(--ink)}.chat3 .av svg{width:22px;height:22px}
.chip3{font-family:inherit;font-weight:700;font-size:11.5px;border:0;border-radius:999px;padding:2px 9px;color:var(--pop-ink);background:var(--pop2)}.chip3+.chip3{background:var(--pop4)}
.type3{border-radius:999px;border-color:var(--line-2);background:var(--panel)}
.view3{position:relative;overflow:hidden;--vc:var(--pop2);background:radial-gradient(75% 65% at 50% 45%,color-mix(in oklab,var(--vc) 55%,transparent),transparent 78%),var(--bg-2);transition:--vc .6s}
.studio[data-step="1"] .view3{--vc:var(--pop3)}.studio[data-step="2"] .view3{--vc:var(--pop5)}.studio[data-step="3"] .view3{--vc:var(--pop4)}
.phone3{border:6px solid #1d1c1a;border-radius:30px}
.stk3{position:absolute;inset:0;z-index:2;pointer-events:none}.stk3 b{position:absolute;white-space:nowrap;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--pop-ink);box-shadow:0 12px 24px -12px rgb(var(--sh) / calc(.6 * var(--shk)));transform:scale(0) rotate(calc(var(--r) * 4));transition:transform .6s var(--spring)}
.stk3 .k0{left:8px;top:14%;background:var(--pop2)}.stk3 .k1{right:6px;top:10%;background:var(--pop3)}.stk3 .k1b{left:6px;top:42%;background:var(--pop2);transition-delay:.12s}.stk3 .k2{right:6px;top:18%;background:var(--pop5)}.stk3 .k3{left:50%;margin-left:-50px;top:8%;background:var(--pop4)}
.studio[data-step="0"] .k0,.studio[data-step="1"] .k1,.studio[data-step="1"] .k1b,.studio[data-step="2"] .k2,.studio[data-step="3"] .k3{transform:scale(1) rotate(var(--r))}
.doc3 i::after{background:var(--pop3)}.doc3 .hot i::after{background:var(--pop1)}.doc3 .hot b,.doc3 .hot span{color:var(--pop1);font-weight:700}
.studio[data-step="3"] .ship3 .ck{background:var(--pop3);color:#fff}
@property --vc{syntax:'<color>';inherits:true;initial-value:transparent}
/* 기능 칸: 칸마다 다른 색, 살짝 기울어 있다 */
.bento2 .tile2{--tc:var(--pop4);background:color-mix(in oklab,var(--tc) 11%,var(--panel));border-color:color-mix(in oklab,var(--tc) 22%,transparent);border-radius:28px;transition:border-color .3s var(--ease),transform .6s var(--spring)}
.bento2 .tile2:nth-child(1){--tc:var(--pop2)}.bento2 .tile2:nth-child(2){--tc:var(--pop5);transform:rotate(1.2deg)}.bento2 .tile2:nth-child(3){--tc:var(--pop3);transform:rotate(-1.2deg)}.bento2 .tile2:nth-child(4){--tc:var(--pop4)}.bento2 .tile2:nth-child(5){--tc:var(--pop1);transform:rotate(-.8deg)}.bento2 .tile2:nth-child(6){--tc:var(--pop6);transform:rotate(.8deg)}
.bento2 .tile2.rv:not(.in){transform:translateY(30px) rotate(0)}
.bento2 .tile2:hover{transform:rotate(0) translateY(-6px) scale(1.01)}
.tile2 .ic{background:var(--tc);color:var(--pop-ink);border-color:transparent;border-radius:12px;rotate:-6deg}
.bars2 i::before{background:linear-gradient(180deg,var(--pop2),color-mix(in oklab,var(--pop2) 50%,transparent))}.bars2 i.hot::before{background:var(--pop1);opacity:1}
.wave b{background:var(--pop5);opacity:.9}.tl div.on::before{background:var(--pop5);border-color:var(--pop5);box-shadow:0 0 0 4px color-mix(in oklab,var(--pop5) 25%,transparent)}
.srv .meter i.f,.check .ck,.tile2.in .check .ck{background:var(--pop3);color:var(--pop-ink)}.tile2:not(.in) .check .ck{background:var(--panel-3);color:transparent}
.link3 .n{border-radius:18px;transition:transform .5s var(--spring)}.link3>div:nth-child(1) .n{rotate:-6deg}.link3>div:nth-child(5) .n{rotate:6deg}.tile2:hover .link3 .n{transform:translateY(-4px)}
/* 숫자: 둥근 스티커 */
.numbers{border:0;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}.numbers>div,.numbers>div:first-child{border:0;padding:28px 24px;border-radius:28px;background:color-mix(in oklab,var(--nc) 20%,var(--panel));transition:rotate .6s var(--spring),scale .6s var(--spring)}
.numbers>div:nth-child(1){--nc:var(--pop2);rotate:-2deg}.numbers>div:nth-child(2){--nc:var(--pop3);rotate:1.5deg;translate:0 18px}.numbers>div:nth-child(3){--nc:var(--pop5);rotate:-1deg}.numbers>div:nth-child(4){--nc:var(--pop4);rotate:2deg;translate:0 12px}
.numbers.feats{grid-template-columns:repeat(3,minmax(0,1fr))}.numbers.feats span{font-size:16px;line-height:1.5}@media(max-width:760px){.numbers.feats{grid-template-columns:minmax(0,1fr)}.numbers.feats>div{translate:none}}.numbers>div:hover{rotate:0deg;scale:1.04}.numbers b{font-family:inherit;font-weight:700;font-size:clamp(40px,5vw,64px)}
@media(max-width:760px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}.numbers>div{border-top:0!important;padding:22px 18px!important}}
/* 견본: 들쭉날쭉, 커서 쪽으로 기울고 빛이 비친다 */
.games{gap:16px;padding-bottom:28px}.games .game:nth-child(even){translate:0 28px}.games .game{border-radius:22px}
@media(max-width:620px){.games .game:nth-child(even){translate:0 18px}}
.game,.pt{transform-style:preserve-3d}.game.tilt,.pt.tilt{transition:transform .12s linear,border-color .3s}
.game::after,.pt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}.game{position:relative}.game.tilt::after,.pt.tilt::after{opacity:1}
.filters .pill.on{background:var(--pop-ink);color:#fff;border-color:var(--pop-ink);rotate:-2deg}:root[data-theme=dark] .filters .pill.on{background:var(--pop2);color:var(--pop-ink);border-color:var(--pop2)}
.filters .pill{transition:transform .45s var(--spring),rotate .45s var(--spring),background .2s}
/* 요금 맛보기 */
.pt{border-radius:26px}.pt.pick{background:color-mix(in oklab,var(--pop2) 26%,var(--panel));border-color:color-mix(in oklab,var(--pop2) 50%,transparent);rotate:-1.5deg}.pt.pick .nm::after{content:attr(data-badge);margin-left:8px;font-size:11.5px;font-weight:600;color:var(--pop-ink);background:var(--pop5);border-radius:999px;padding:2px 8px;display:inline-block;rotate:4deg}
/* 맨 아래: 색이 가득 */
.finale{border:0;border-radius:40px;background:color-mix(in oklab,var(--pop2) 30%,var(--panel))}.finale h2{font-weight:700;font-size:clamp(34px,5vw,64px);letter-spacing:-.05em}
.finale .aura.soft i:nth-child(1){background:radial-gradient(closest-side,color-mix(in oklab,var(--pop5) 60%,transparent),transparent)}.finale .aura.soft i:nth-child(2){background:radial-gradient(closest-side,color-mix(in oklab,var(--pop3) 55%,transparent),transparent)}.finale .aura.soft i:nth-child(3){background:radial-gradient(closest-side,color-mix(in oklab,var(--pop4) 50%,transparent),transparent)}
.finale .aura.soft::before{display:none}
/* 밝게·어둡게: 누른 곳에서 동그랗게 번진다 */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.progress{height:3px;background:linear-gradient(90deg,var(--pop1),var(--pop2),var(--pop3),var(--pop4),var(--pop5));opacity:1}
@media(prefers-reduced-motion:reduce){.zoom{height:auto}.zoom-pin{position:relative;height:auto;padding:80px 0;display:grid;gap:24px}.z-h{position:static}.z-h.a{display:none}.z-h.b{opacity:1;transform:none}.z-dev{--Z:1;position:relative;left:auto;top:auto;translate:none;transform:none;margin:0 auto}.z-dev img.warm{display:none}.z-tags,.z-boom{display:none}.say .sw{opacity:1}.stk>span>svg,.prompt::before,.hero h1 .mk::before,.hero h1 .st{animation:none}.hero h1 .mk::before{transform:skewX(-8deg)}.hero h1 .st{opacity:1;filter:none;transform:rotate(-4deg)}.reel{overflow-x:auto}.glow{display:none}}
/* 언어 (2026-10-26): 머리줄 메뉴 + 바닥글 목록. 일본어·중국어는 그 언어 글꼴과 줄바꿈 */
.lang{position:relative}.lang summary{list-style:none}.lang summary::-webkit-details-marker{display:none}
.lang .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;padding:6px;border-radius:14px;border:1px solid var(--line-2);background:var(--panel);box-shadow:var(--float);display:grid;gap:2px;z-index:40;animation:menuin .35s var(--spring)}@keyframes menuin{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.lang .menu a{padding:8px 12px;border-radius:9px;font-size:14px;color:var(--text)}.lang .menu a:hover{background:rgb(var(--hi) / .06);color:var(--ink)}.lang .menu a.on{background:var(--pop2);color:var(--pop-ink);font-weight:600}
footer .langs{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:16px}footer .langs a{display:inline;padding:0;font-size:12.5px}footer .langs a.on{color:var(--ink);font-weight:600}
.hero h1{max-width:10em}
@media(max-width:480px){header.top .brand .bn{display:none}header.top .wrap{gap:12px}}
:lang(ja) body,:lang(ja) .btn{font-family:Geist,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',Meiryo,system-ui,sans-serif}
:lang(zh-Hans) body,:lang(zh-Hans) .btn{font-family:Geist,'PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif}
:lang(zh-Hant) body,:lang(zh-Hant) .btn{font-family:Geist,'PingFang TC','Noto Sans TC','Microsoft JhengHei',system-ui,sans-serif}
:lang(ja) body,:lang(zh-Hans) body,:lang(zh-Hant) body{word-break:normal;line-break:strict}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ja) .lede,:lang(ja) .say p{word-break:auto-phrase}
.nb{white-space:nowrap}.doc3 div{grid-template-columns:auto 1fr 30px}
:lang(ja) h1,:lang(ja) h2,:lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(zh-Hant) h1,:lang(zh-Hant) h2{letter-spacing:-.02em}
:lang(en) h1,:lang(en) h2{letter-spacing:-.04em}
/* ── 시네마틱 한 겹 (2026-10-26 사용자: scrolltide.co 같은 효과를 적절히, 힙하게) ── */
/* 필름 그레인: 고정된 한 장, 위치만 조금씩 튄다 (transform만 → 다시 그리지 않는다) */
body::after{content:'';position:fixed;inset:-60px;z-index:60;pointer-events:none;opacity:var(--grain-o,.045);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite}
:root[data-theme=dark]{--grain-o:.075}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-14px,9px)}40%{transform:translate(11px,-16px)}60%{transform:translate(-7px,-5px)}80%{transform:translate(17px,12px)}}
/* 별: 어두운 화면에서만, 두 겹이 엇갈려 반짝인다 */
.stars{position:absolute;z-index:-1;left:50%;width:100vw;translate:-50% 0;top:-60px;height:760px;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.stars i{position:absolute;inset:0;animation:twinkle 3.4s ease-in-out infinite alternate}.stars i+i{animation-delay:-1.7s;animation-duration:4.6s}
:root[data-theme=dark] .stars{opacity:.9}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
/* 작은 제목: 고정폭 대문자 + 숨 쉬는 점 */
.kicker{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--pop-ink);opacity:.75;animation:breathe 2.4s ease-in-out infinite}
.eyebrow{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.eyebrow::after{content:'→';opacity:.55;margin-left:2px}
:lang(ja) .kicker,:lang(zh-Hans) .kicker,:lang(zh-Hant) .kicker,:lang(ja) .eyebrow,:lang(zh-Hans) .eyebrow,:lang(zh-Hant) .eyebrow,:lang(ko) .kicker,:lang(ko) .eyebrow{font-family:inherit;font-size:12.5px;letter-spacing:.02em}
/* 큰 버튼: 테두리를 도는 빛 */
.btn.main.big::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang),transparent 0 52%,var(--pop2) 68%,var(--pop5) 80%,var(--pop3) 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3.2s linear infinite;pointer-events:none;z-index:1}
.btn.main.big{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 28px -10px color-mix(in oklab,var(--pop5) 70%,transparent),0 8px 20px -8px var(--btn-glow)}
/* 마지막 구역: 하프톤 점 무늬 (WebGL, 보일 때만 돈다) */
.finale .ht{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease);-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,rgba(0,0,0,.18),#000 78%);mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,rgba(0,0,0,.18),#000 78%)}
.finale .ht.on{opacity:1}
.finale:has(.ht.on) .aura.soft{opacity:.35}
@media(prefers-reduced-motion:reduce){body::after,.stars i,.kicker::before,.btn.main.big::before{animation:none}.stk .bob>i{transition:none}}