/* v5-5 Soft Grid — v5-3 의 배치 + v5-4 의 모눈종이 지면 + 구체 위쪽에 걸친 망점 워드마크. 스크럽·장면 좌표는 motion.js 그대로. */
html:root{--g-bg:#f0f2ea;--g-bg-2:#f7f8f2;--g-line:rgba(60,110,70,.13);--g-line-2:rgba(60,110,70,.05);--g-ink:#263624;--g-green:#23a24f;--g-tc:#6f7668}
html[data-hero-bg=beige]:root{--g-bg:#f1ece1;--g-bg-2:#f8f5ee;--g-line:rgba(120,95,60,.15);--g-line-2:rgba(120,95,60,.055);--g-ink:#2b2a24;--g-tc:#7a7365}
html[data-bg] .story-background{z-index:-3;background-color:var(--g-bg);background-image:radial-gradient(circle at 74% 55%,var(--g-bg-2) 0,var(--g-bg) 24%,transparent 50%),linear-gradient(var(--g-line) 1px,transparent 1px),linear-gradient(90deg,var(--g-line) 1px,transparent 1px),linear-gradient(var(--g-line-2) 1px,transparent 1px),linear-gradient(90deg,var(--g-line-2) 1px,transparent 1px);background-size:auto,96px 96px,96px 96px,24px 24px,24px 24px;background-position:0 0}
html[data-bg] .story-background::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 74% 55%,var(--g-bg) 0,transparent 44%);opacity:1}
body .story-stage{background:#f3f5ef}
body .story-grain{background:radial-gradient(ellipse at 73% 51%,#d7e8c76b,transparent 55%)}
.shared-core{background:transparent}
.shared-core.has-halftone>video,.shared-core.has-halftone>.last-frame{opacity:0}
.shared-core .halftone-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.shared-core.halftone-done .halftone-canvas{display:none}
.shared-core.halftone-done>video{opacity:1}
/* 워드마크: 구체(z 7) 뒤, 구체와 같은 중심(x 74%)에 가운데 정렬, 구체 위쪽 1/3 높이에 걸친다 */
.hero-word{position:absolute;left:74%;top:42%;width:var(--word-w,42vw);z-index:5;transform:translate(calc(-50% + var(--drift,0px)),-50%);pointer-events:none;opacity:0;transition:opacity .2s}
.hero-word[data-ready]{opacity:1}
.hero-word .halftone-canvas{position:static;width:100%;height:auto;display:block;object-fit:unset}
/* 카피: v5-3 그대로 */
body .intro-copy{color:var(--g-ink);width:46%;top:50%}
body .intro-copy h1{color:var(--g-ink);font-size:clamp(56px,5.8vw,92px);font-weight:720;letter-spacing:-.065em;line-height:1.06;margin:20px 0 14px}
html[data-accent] .intro-copy h1>span,body .intro-copy h1>span{color:var(--g-green);-webkit-text-fill-color:currentColor}
body .intro-copy>.eyebrow{color:var(--g-tc);font-family:var(--v5-mono);font-weight:400;letter-spacing:.12em;font-size:11px;gap:14px}
body .intro-copy>.eyebrow .idx{color:var(--g-green)}
.hero-serif{font-family:var(--v5-serif);font-style:italic;font-weight:500;font-size:clamp(22px,2.1vw,30px);color:#2f5230;margin:0 0 22px}
body .intro-copy>p:not(.eyebrow):not(.hero-serif){color:var(--g-tc);font-size:16px;line-height:1.85}
body .film-link{color:#50604b;border-top:1px solid #26362420;padding-top:20px;margin-top:30px;width:100%;justify-content:space-between}
html[data-accent] .film-link span,body .film-link span{color:var(--g-green);background:none}
.hero-chips{display:flex;gap:6px;margin-top:22px}
.hero-chips span{font-family:var(--v5-mono);font-size:10px;letter-spacing:.06em;color:#50604b;border:1px solid #cdd4c8;border-radius:2px;padding:6px 9px}
/* 스티커: 구체 주변 */
.hero-stk{position:absolute;z-index:8;background:#fff;border:1.5px solid var(--g-ink);box-shadow:3px 3px 0 var(--g-ink);padding:10px 14px;font-family:var(--v5-mono);font-size:11px;line-height:1.55;color:var(--g-ink);pointer-events:none;letter-spacing:.02em}
.hero-stk b{font-weight:600}
.hero-stk.k{font-family:Pretendard,sans-serif;font-weight:700;font-size:13px;letter-spacing:-.02em}
.hero-stk.a{left:50%;top:79%}
.hero-stk.b{right:7%;top:25%}
.story-topline{border-top:0;padding-top:0;font-family:var(--v5-mono);letter-spacing:.1em;color:var(--g-tc)} /* 모눈 위 가로줄은 겹쳐 보여 제거(2026-09-14) */
.story-topline .topline-mid{position:absolute;left:50%;transform:translateX(-50%)}
.film-progress{color:var(--g-tc)}.film-progress>div{background:#26362422}html[data-accent] .film-progress i,.film-progress i{background:var(--g-green)}
.chapter-nav [aria-current=step]{color:var(--g-ink)}.chapter-nav [aria-current=step] i{background:var(--g-green)}
@media(max-width:760px){
 html[data-bg] .story-background{background-size:auto,72px 72px,72px 72px,18px 18px,18px 18px;background-image:radial-gradient(circle at 50% 73%,var(--g-bg-2) 0,var(--g-bg) 20%,transparent 46%),linear-gradient(var(--g-line) 1px,transparent 1px),linear-gradient(90deg,var(--g-line) 1px,transparent 1px),linear-gradient(var(--g-line-2) 1px,transparent 1px),linear-gradient(90deg,var(--g-line-2) 1px,transparent 1px)}
 html[data-bg] .story-background::after{background:radial-gradient(circle at 50% 73%,var(--g-bg) 0,transparent 40%)}
 body .intro-copy{width:88%;top:17%}
 body .intro-copy h1{font-size:42px;line-height:1.08;margin:12px 0 8px}
 .hero-serif{font-size:17px;margin-bottom:10px}
 body .intro-copy>.eyebrow{font-size:9px;gap:10px}
 .story-topline{padding-top:8px}.story-topline .topline-mid{display:none}
 body .intro-copy>p:not(.eyebrow):not(.hero-serif){font-size:13px}
 .hero-chips{display:none}
 body .film-link{margin-top:14px;padding-top:10px;font-size:10px}
 .hero-word{left:50%;top:66%;width:92vw;transform:translate(calc(-50% + var(--drift,0px)),-50%)}
 .hero-stk{font-size:9px;padding:7px 9px;box-shadow:2px 2px 0 var(--g-ink)}
 .hero-stk.a{left:4%;top:77%}.hero-stk.b{right:4%;top:56%}
}
/* 모바일 히어로: 워드마크와 구체만 남기고 장식(스티커·세리프 한 줄)은 덜어낸다 */
@media(max-width:760px){
 .hero-stk{display:none}
 .hero-serif{display:none}
 body .intro-copy>.eyebrow{font-size:10px}
 body .film-link{font-size:11px}
 .film-progress>span:first-child{display:none}
}