/* 무대(다크) 화면 — 홈 · 스토리 · 인트로. 포스터 팔레트 */
:root{
  --ink:#031410; --ink2:#072B26; --deep:#01694F; --em:#018E6C; --em2:#13B28A; --mint:#7CB4A1; --haze:#CFE5DC; --paper:#E8EDEA;
  --serif:"Instrument Serif","Times New Roman",serif;
}
body.stage{background:var(--ink);color:var(--paper);overflow-x:clip}
html:has(body.stage){background:var(--ink)}
body.stage .stagewrap{overflow-x:clip}
body.stage .app{background:transparent;max-width:none}
body.stage .cta .in{background:linear-gradient(transparent,rgba(3,20,16,.92) 35%);max-width:560px}
body.stage .btn{background:var(--em);color:#fff;box-shadow:0 10px 30px -10px rgba(1,142,108,.7)}
body.stage .btn.sec{background:rgba(232,237,234,.08);color:var(--paper);box-shadow:none;border:1px solid rgba(232,237,234,.14)}
body.stage .toast{background:var(--paper);color:var(--ink)}
.ic{display:inline-block;vertical-align:middle;flex:none}

/* 배경: 포스터의 가로 모션 블러 띠 + 그레인 */
.streaks{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 70% at 50% 40%,#04231c 0%,var(--ink) 70%)}
.streaks i{position:absolute;left:-30%;width:160%;border-radius:50%;filter:blur(38px);opacity:.85;will-change:transform;animation:drift var(--d,18s) ease-in-out infinite alternate}
.streaks i:nth-child(1){top:4%;height:16%;background:linear-gradient(90deg,transparent,#0e9f7a 30%,#7cb4a1 55%,#0e9f7a 75%,transparent);--d:16s;opacity:.55}
.streaks i:nth-child(2){top:22%;height:7%;background:linear-gradient(90deg,transparent,#01694f 20%,#018e6c 60%,transparent);--d:22s;animation-delay:-6s}
.streaks i:nth-child(3){top:41%;height:11%;background:linear-gradient(90deg,transparent 5%,#018e6c 35%,#13b28a 50%,#018e6c 65%,transparent 95%);--d:19s;animation-delay:-3s;opacity:.7}
.streaks i:nth-child(4){top:58%;height:5%;background:linear-gradient(90deg,transparent,#01694f 40%,transparent);--d:25s;animation-delay:-12s}
.streaks i:nth-child(5){top:70%;height:18%;background:linear-gradient(90deg,transparent,#018e6c 25%,#0aa27e 50%,#018e6c 80%,transparent);--d:20s;animation-delay:-9s;opacity:.8}
.streaks i:nth-child(6){top:90%;height:14%;background:linear-gradient(90deg,transparent,#7cb4a1 40%,transparent);--d:27s;opacity:.35}
@keyframes drift{0%{transform:translate3d(-6%,0,0) scaleY(1)}50%{transform:translate3d(4%,-6px,0) scaleY(1.25)}100%{transform:translate3d(9%,4px,0) scaleY(.9)}}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
  animation:grain .9s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* 상단바 (무대) */
.stagebar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:8px;height:58px;padding:calc(env(safe-area-inset-top,0px)) 14px 0;color:var(--paper);transition:background .35s,backdrop-filter .35s}
.stagebar.solid{background:rgba(3,20,16,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stagebar button,.stagebar a{border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none;display:grid;place-items:center;border-radius:12px}
.stagebar .ib{width:40px;height:40px}
.stagebar .brand{flex:1;font-weight:800;letter-spacing:-.4px;font-size:15px;opacity:.95}
.stagebar .pill{padding:0 14px;height:34px;border-radius:999px;font-size:13px;font-weight:700;background:rgba(232,237,234,.1);border:1px solid rgba(232,237,234,.18)}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--em2);z-index:21;width:0;box-shadow:0 0 12px var(--em2)}

.stagewrap{position:relative;z-index:2}
.sec-pad{padding:0 22px;max-width:560px;margin:0 auto}

/* 히어로 */
.hero2{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:90px 40px;position:relative;overflow:hidden}
.hero2 .eyeb{font-weight:800;font-size:15px;line-height:1.35;letter-spacing:-.3px}
.hero2 .eyeb small{display:block;font-weight:500;font-size:12px;color:var(--mint);margin-top:6px;letter-spacing:0}
.titlewrap{position:relative;margin:7vh -6px 0;aspect-ratio:2000/497;will-change:transform}
.titlewrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.titlewrap .t-main{filter:drop-shadow(0 0 28px rgba(207,229,220,.25))}
.titlewrap .t-ghost{opacity:.5;mix-blend-mode:screen;filter:blur(2px) sepia(1) hue-rotate(100deg) saturate(4)}
.titlewrap.in .t-main{animation:titleIn 1.6s cubic-bezier(.2,.7,.1,1) both}
.titlewrap.in .t-ghost{animation:ghostIn 2.2s cubic-bezier(.2,.7,.1,1) both}
@keyframes titleIn{0%{opacity:0;filter:blur(24px);transform:scaleX(1.25)}60%{opacity:1}100%{opacity:1;filter:blur(0) drop-shadow(0 0 28px rgba(207,229,220,.25));transform:none}}
@keyframes ghostIn{0%{opacity:0;transform:translateX(-12%)}100%{opacity:.5;transform:none}}
.tagline{margin-top:4vh;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tagline .en{font-size:clamp(26px,8vw,40px);line-height:1.02;font-weight:800;letter-spacing:-1px;color:#04382d;-webkit-text-stroke:0}
.tagline .en em,.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.tagline .en{color:var(--em2);mix-blend-mode:screen}
.tagline .ko{font-size:clamp(46px,15vw,76px);font-weight:900;letter-spacing:-3px;line-height:.9;color:#0b5e4a;text-shadow:0 0 40px rgba(19,178,138,.35)}
.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1)}
.reveal-up.on{opacity:1;transform:none}
.hero2 .meta2{margin-top:5vh;display:flex;gap:18px;align-items:flex-end;justify-content:space-between}
.hero2 .date{font-weight:900;letter-spacing:-1.5px;font-size:clamp(30px,10vw,46px);line-height:.95}
.hero2 .date sup{font-size:.35em;font-weight:800;margin-left:2px;vertical-align:.9em}
.hero2 .place{font-size:13px;color:var(--haze);text-align:right;line-height:1.5}
.scrollhint{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;letter-spacing:2px;color:var(--mint);opacity:.8}
.scrollhint i{width:1px;height:34px;background:linear-gradient(var(--mint),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 스크롤 타이핑(글자 단위 노출) */
.scrub{font-size:clamp(24px,7.2vw,36px);font-weight:800;line-height:1.38;letter-spacing:-.8px;word-break:keep-all}
.scrub span{opacity:.13;transition:opacity .25s,color .25s}
.scrub span.on{opacity:1}
.scrub .hl.on{color:var(--em2)}
.type-caret::after{content:"";display:inline-block;width:2px;height:1em;background:var(--em2);margin-left:3px;vertical-align:-.12em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.block{padding-block:16vh}
.kicker{font-size:12px;letter-spacing:3px;color:var(--mint);font-weight:700;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1px;background:var(--mint)}
.verse-ref{margin-top:22px;color:var(--mint);font-size:14px}
.verse-en{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.35;color:var(--haze)}

/* 카드 · 그리드 (무대) */
.glass{background:linear-gradient(180deg,rgba(232,237,234,.07),rgba(232,237,234,.03));border:1px solid rgba(232,237,234,.12);border-radius:22px;padding:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lineup{display:grid;gap:12px}
.lineup .role{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--mint)}
.lineup .who{font-weight:800;font-size:19px;letter-spacing:-.4px;margin-top:2px}
.lineup .who small{font-weight:500;font-size:12px;color:var(--mint);margin-left:6px}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qcell{position:relative;border:1px solid rgba(232,237,234,.12);background:rgba(232,237,234,.04);border-radius:18px;padding:16px 10px 13px;color:var(--paper);font:inherit;font-size:13px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.qcell:active{transform:scale(.96)}
.qcell:hover{background:rgba(1,142,108,.14);border-color:rgba(19,178,138,.5)}
.qcell .icw{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(19,178,138,.12);color:var(--em2)}
.qcell.soon{opacity:.55}
.qcell.soon .icw{background:rgba(232,237,234,.06);color:var(--mint)}
.soonb{position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;letter-spacing:.3px;padding:2px 6px;border-radius:999px;background:rgba(124,180,161,.18);color:var(--mint)}
.h2s{font-size:22px;font-weight:800;letter-spacing:-.6px;margin:0 0 14px}
.sgap{height:12vh}
.status-wrap .card{background:var(--paper);color:#191F28}
.phasebar{display:grid;gap:8px}
.phase{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(232,237,234,.1)}
.phase.now{background:rgba(1,142,108,.18);border-color:rgba(19,178,138,.55)}
.phase .pn{font-weight:800}.phase .pd{font-size:12px;color:var(--mint)}.phase .pp{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.phase .nowb{font-size:10px;font-weight:800;background:var(--em);color:#fff;padding:2px 7px;border-radius:999px;margin-left:6px}
.bigcd{font-variant-numeric:tabular-nums;font-weight:900;font-size:clamp(34px,11vw,52px);letter-spacing:-1.5px;line-height:1}
.bigcd small{font-size:13px;font-weight:600;color:var(--mint);letter-spacing:0;margin-left:6px}
.faq2 details{border-bottom:1px solid rgba(232,237,234,.1)}
.faq2 summary{list-style:none;cursor:pointer;font-weight:700;padding:16px 0;display:flex;justify-content:space-between;gap:12px}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary .ic{transition:transform .25s;color:var(--mint)}
.faq2 details[open] summary .ic{transform:rotate(45deg)}
.faq2 details div{padding:0 0 16px;color:var(--haze);font-size:14px;line-height:1.65}
.foot2{color:var(--mint);font-size:12px;line-height:1.8;padding-block:40px 140px;opacity:.85}
.foot2 a{color:inherit}
.banner2{display:flex;align-items:center;gap:10px;background:rgba(1,142,108,.18);border:1px solid rgba(19,178,138,.4);color:var(--paper);border-radius:14px;padding:12px 14px;font-size:14px;font-weight:700;text-decoration:none;margin-top:12px}
.storylink{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--paper)}
.storylink .arr{margin-left:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--em);color:#fff;transition:transform .3s}
.storylink:hover .arr{transform:translateX(4px)}

/* 스토리(어바웃) */
.chap{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:14vh}
.chap .num{font-family:var(--serif);font-style:italic;font-size:72px;line-height:1;color:var(--em2);opacity:.9}
.chap .ttl{font-size:clamp(30px,9vw,44px);font-weight:900;letter-spacing:-1.4px;margin:6px 0 28px;line-height:1.15}
.chap p.scrub{font-size:clamp(19px,5.4vw,24px);font-weight:600;line-height:1.75;letter-spacing:-.3px}
.noise-words{position:relative;height:42vh;margin:6vh -22px 0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.noise-words span{position:absolute;white-space:nowrap;font-weight:800;color:rgba(232,237,234,.16);font-size:var(--s,22px);animation:float var(--t,14s) linear infinite;left:100%}
@keyframes float{to{transform:translateX(calc(-100vw - 120%))}}
.verse-big{font-size:clamp(24px,7vw,34px);font-weight:800;line-height:1.5;letter-spacing:-.6px}
.verse-big .hl{color:var(--em2)}
.hanja{font-family:var(--serif);font-size:clamp(96px,32vw,160px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--mint);letter-spacing:4px;transition:color 1.4s,-webkit-text-stroke-color 1.4s}
.hanja.on{color:var(--em2);-webkit-text-stroke-color:transparent;text-shadow:0 0 50px rgba(19,178,138,.4)}
.lean{display:inline-block;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.lean.on{transform:rotate(-8deg) translateX(-4px)}
.finale{min-height:120svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;text-align:center;padding-block:10vh 30vh}
.finale .titlewrap{margin:0 -6px}
.sheep{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6vh 0}
.sheep i{width:10px;height:10px;border-radius:50%;background:var(--mint);opacity:.25;transition:all 1s cubic-bezier(.2,.7,.1,1)}
.sheep.on i{opacity:1;background:var(--em2);box-shadow:0 0 12px var(--em2)}
.skip{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:14px;z-index:25;border:1px solid rgba(232,237,234,.22);background:rgba(3,20,16,.55);backdrop-filter:blur(10px);color:var(--paper);font:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px}
.dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:8px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(232,237,234,.25);transition:all .3s}
.dots i.on{background:var(--em2);height:18px;border-radius:3px}

/* 공개 예정 */
.soonpage{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-inline:28px}
.soonpage .icw{width:84px;height:84px;border-radius:28px;display:grid;place-items:center;background:rgba(19,178,138,.12);color:var(--em2);margin-bottom:22px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(19,178,138,0)}0%,100%{box-shadow:0 0 0 0 rgba(19,178,138,.35)}}

@media (prefers-reduced-motion:reduce){.streaks i,.grain,.scrollhint i,.soonpage .icw{animation:none}.reveal-up{opacity:1;transform:none}.scrub span{opacity:1}}
@media (min-width:720px){.qgrid{grid-template-columns:repeat(4,1fr)}.sec-pad{max-width:720px}.hero2{padding-top:110px}}
.sec-pad{box-sizing:border-box;width:100%}
.sheep i{transform:translate(var(--x),var(--y))}
.sheep.on i{transform:translate(0,0)}
.sheep i:nth-child(3n){transition-delay:.15s}.sheep i:nth-child(4n){transition-delay:.3s}.sheep i:nth-child(5n){transition-delay:.45s}
body.stage .drawer{background:#06201a;color:var(--paper)}
body.stage .drawer .who{border-color:rgba(232,237,234,.1)}
body.stage .drawer a,body.stage .drawer button.m{color:var(--paper)}
body.stage .drawer a.lock{color:var(--mint)}
body.stage .drawer .sec{color:var(--mint)}
.drawer a .ic,.drawer button.m .ic{color:var(--key);opacity:.9}
body.stage .drawer a .ic{color:var(--em2)}
.drawer a.lock .ic{opacity:.55}