:root{
  --ink:#121516;--muted:#5d6467;--mint:#00b4c9;--mint-dark:#007f91;--paper:#f4f5f1;
  --blast:#e0533a;--found:#f0a23a;--night:#0c1011;
  --cap-bg:rgba(247,248,244,.9);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#dfe3dd;color:var(--ink);font-family:"Noto Sans KR",sans-serif;word-break:keep-all;overflow-x:hidden}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 임시 헤더(공통 헤더 스크립트가 교체) */
.topbar{position:fixed;inset:0 0 auto;z-index:50;height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(17,17,17,.12);font-size:13px;font-weight:800}
.topbar a{text-decoration:none}
.topbar img{height:26px}

/* ---------- 고정 레이어 ---------- */
#stage{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;transition:filter .9s ease}
#stage canvas{display:block;width:100%;height:100%}
#stage.blur{filter:blur(5px)}
#hero-intro{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none;overflow:hidden;background:#dfe3dd}
.no-webgl #hero-intro{display:none}
#hero-intro.gpu{background:transparent}
#hero-intro.gpu picture,#hero-intro.gpu .intro-map{visibility:hidden}
#hero-intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%}
#hero-intro .intro-map{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform-origin:50% 50%}
#hero-intro .intro-graphic,#hero-intro .intro-lift1,#hero-intro .intro-lift2,#hero-intro .intro-between{opacity:0}
#hero-intro:after{content:"";position:absolute;inset:0;opacity:var(--intro-shade,1);background:linear-gradient(180deg,rgba(223,227,221,.22),transparent 50%,rgba(223,227,221,.08))}
.intro-source{position:absolute;right:18px;bottom:18px;z-index:1;font-size:10px;letter-spacing:.02em;color:#fff;text-shadow:0 1px 4px #252d25}
@media(max-width:819px){#hero-intro img{object-position:42% 50%}.intro-source{right:12px;bottom:18px;font-size:9px;max-width:calc(100% - 24px);text-align:right;line-height:1.45}}
#veil{position:fixed;inset:0;z-index:1;background:var(--night);opacity:0;pointer-events:none}
#mist{position:fixed;inset:0;z-index:1;background:#e6e9e3;opacity:0;pointer-events:none}
#labels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;visibility:hidden;will-change:transform}
.lbl-in{position:absolute;left:0;bottom:22px;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.25)}
.lbl{color:#fff}
.lbl:after{content:"";position:absolute;left:0;bottom:0;width:1px;height:18px;background:currentColor;opacity:.8}
.lbl:before{content:"";position:absolute;left:-2.5px;bottom:-2.5px;width:5px;height:5px;border-radius:50%;background:currentColor}
.lbl b{font-weight:800}
.lbl.big .lbl-in{font-size:clamp(14px,1.3vw,18px);bottom:30px;color:var(--ink);text-shadow:0 0 8px rgba(255,255,255,.8),0 0 2px rgba(255,255,255,.9)}
.lbl.big{color:var(--ink)}.lbl.big:after{height:26px}
.lbl.mint,.lbl.mint .lbl-in{color:#7ff0ff}
.lbl.big.mint,.lbl.big.mint .lbl-in{color:var(--mint-dark)}
.lbl.dim .lbl-in{color:#fff;font-weight:500;opacity:.92}
.lbl.blast,.lbl.blast .lbl-in{color:#ffb4a3}
.lbl.found,.lbl.found .lbl-in{color:#ffd28a}
.lbl.zone,.lbl.zone .lbl-in{color:#ffc2b4}
.lbl.x .lbl-in{color:#fff;font-size:13px}
.lbl.target{color:#7af2ed}
.lbl.target .lbl-in{bottom:40px;background:rgba(10,25,25,.94);border:1px solid #7af2ed;border-radius:4px;padding:10px 14px;color:#efffff;font-size:clamp(12px,1.05vw,16px);line-height:1.5;box-shadow:0 4px 20px #0005;text-shadow:none}
.lbl.target .lbl-in small{display:block;color:#c1d7d2;font-size:10px;font-weight:500}
.lbl.target:after{height:34px;width:2px;background:#7af2ed}
.lbl.target:before{left:-4px;bottom:-4px;width:8px;height:8px;background:#efffff;box-shadow:0 0 0 4px #00b4c970,0 0 16px #7af2ed}
.target-pulse{position:absolute;left:-26px;top:-26px;width:52px;height:52px}
.target-pulse:before,.target-pulse:after{content:"";position:absolute;inset:0;border:2px solid currentColor;border-radius:50%;animation:target-sonar 2.4s ease-out infinite;box-shadow:0 0 10px #00b4c945}
.target-pulse:after{border-style:dashed;animation-delay:-1.2s}
@keyframes target-sonar{0%{transform:scale(.45);opacity:.95}85%,100%{transform:scale(1.65);opacity:0}}
.lbl.target.blast{color:#ffc0a4}
.lbl.target.blast .lbl-in{border-color:#ffc0a4}
.lbl.target.blast:after{background:#ffc0a4}.lbl.target.blast:before{box-shadow:0 0 0 4px #e0533a70,0 0 16px #ffc0a4}
.lbl.big.range .lbl-in{bottom:38px;display:flex;align-items:baseline;gap:7px;padding:8px 13px;background:rgba(12,25,23,.94);border:1px solid #c6d9ce;border-radius:4px;color:#fff;font-size:clamp(13px,1.3vw,20px);text-shadow:none;box-shadow:0 4px 16px #0004}
.lbl.big.range .lbl-in b{font-size:clamp(22px,2.3vw,36px);line-height:1.1}
.lbl.big.range.mint .lbl-in{border-color:#66ede9;color:#8bf7ef}
.lbl.structure-mdl .lbl-in{bottom:66px;padding:5px 8px;background:rgba(12,25,23,.94);border:1px solid #66ede9;border-radius:3px;text-shadow:none}
.lbl.structure-mdl:after{height:60px;background:#66ede9}
.lbl.big.range:after{height:32px;width:2px;background:#f1f7ed}
.lbl.big.range:before{width:8px;height:8px;left:-4px;bottom:-4px;background:#f1f7ed;box-shadow:0 0 0 5px #fffffd30}
#range-recap{position:fixed;z-index:3;left:50%;top:calc(88px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 20px;background:rgba(11,26,23,.94);color:#fff;border:1px solid #94b1a1;border-radius:4px;opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;font-size:clamp(13px,1.4vw,20px);box-shadow:0 6px 25px #0003}
#range-recap b,#range-recap strong{font-size:clamp(20px,2vw,30px)}
#range-recap strong{color:#7ef1e7}#range-recap i{font-style:normal;color:#adbdaf}
.evi-on .lbl.target,.evi-on #range-recap{visibility:hidden!important}
@media(max-width:600px){.lbl.big.range .lbl-in{padding:6px 8px;gap:4px;font-size:11px}.lbl.big.range .lbl-in b{font-size:21px}#range-recap{gap:7px;padding:10px 12px;font-size:11px}#range-recap b,#range-recap strong{font-size:19px}.lbl.target .lbl-in{padding:8px 10px;font-size:12px}.target-pulse{left:-22px;top:-22px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.target-pulse:before,.target-pulse:after{animation:none;opacity:.75}.target-pulse:after{display:none}}

/* 4km 진행바 */
#track{position:fixed;z-index:3;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 48px));transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;padding:30px 0 0}
.tr-line{position:relative;height:2px;background:rgba(18,21,22,.28)}
.tr-line:before{content:"";position:absolute;left:0;right:0;top:-4px;height:10px;background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.0))}
.tr-tick{position:absolute;top:-5px;width:1px;height:12px;background:var(--ink)}
.tr-tick.s{left:0}.tr-tick.m{left:50%;background:var(--mint-dark);width:2px;margin-left:-1px}.tr-tick.n{right:0}
.tr-dot{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(255,255,255,.85),0 1px 6px rgba(0,0,0,.25)}
.tr-read{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;text-shadow:0 0 6px rgba(255,255,255,.9)}
.tr-labels{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;font-weight:700;color:var(--ink);text-shadow:0 0 6px rgba(255,255,255,.9)}
.tr-labels span:nth-child(2){color:var(--mint-dark)}

/* ---------- 스크롤 본문 ---------- */
#story{position:relative;z-index:4}
.step,.gap{position:relative;height:calc(var(--h,100) * 1vh)}
.step.auto{height:auto;min-height:100vh}
.cap-wrap{position:absolute;inset:0;display:flex;align-items:center;padding:0 clamp(18px,6vw,96px)}
.cap{max-width:430px;padding:22px 24px 24px;background:var(--cap-bg);border-left:3px solid var(--mint);box-shadow:0 10px 40px rgba(20,30,30,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cap p{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.75;letter-spacing:-.015em}
.cap p+p{margin-top:10px}
.cap .em{font-weight:800}
.cap .date{display:block;white-space:nowrap;font-size:clamp(30px,3.3vw,48px);font-weight:900;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px}
.cap .eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--mint-dark);margin-bottom:10px}
.cap.note{border-left-color:var(--ink)}
.cap.note p{font-size:14px;color:#33393b}
.cap.right{margin-left:auto}
.cap ol{list-style:none;margin:0;padding:0}
.cap.lines p{font-size:clamp(18px,1.6vw,23px);font-weight:700;line-height:1.55}
.cap.lines p.big{font-size:clamp(26px,2.6vw,36px);font-weight:900;letter-spacing:-.03em}
.cap.lines p .mint{color:var(--mint-dark)}

/* HERO */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding-top:clamp(40px,8vh,96px)}
.hero .kicker,.hero h1,.hero .byline{position:relative}
.hero .kicker{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--mint-dark)}
.hero h1{margin:16px 0 0;font-weight:900;letter-spacing:-.05em;line-height:1.08;color:var(--ink);text-shadow:0 0 30px rgba(223,227,221,.9)}
.hero h1 .t1{display:block;font-size:clamp(26px,3.3vw,46px);font-weight:800;letter-spacing:-.035em;color:#2c3234}
.hero h1 .t2{display:block;margin-top:8px;font-size:clamp(40px,6vw,86px)}
.hero .byline{margin:20px 0 0;font-size:12.5px;font-weight:600;color:#40484b;letter-spacing:.02em}
/* 제목 悲 아래 훈 표기(회색, 한자 폭 이내). 바이라인은 제목 오른쪽 끝에 맞춘다. */
.hero .hero-head{position:relative}
.hero h1 .bi{position:relative}
.hero h1 .bi::after{content:attr(data-gloss);position:absolute;left:50%;top:calc(100% - .06em);transform:translateX(-50%);font-size:.25em;font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:#7f898b;text-shadow:none}
.hero .hero-head .byline{margin-top:45px;text-align:right;font-size:14px;font-weight:700;color:#2c3234}
@media (max-width:800px){.hero .hero-head .byline{margin-top:24px;font-size:calc(clamp(26px,7.6vw,40px) * .25)}}
.scroll-cue{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10.5px;font-weight:800;letter-spacing:.24em;color:#3d4547}
.scroll-cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--ink),transparent);animation:cue 1.9s ease-in-out infinite}
.hero .scroll-cue{top:calc(100svh - 130px);bottom:auto;transform:translate(-50%,var(--intro-title-y,0px))}
@keyframes cue{50%{transform:translateY(10px);opacity:.45}}

/* sticky 장면 공통 */
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* 조사 결과 */
.inv{position:absolute;inset:0;display:flex;align-items:center;padding:0 clamp(18px,6vw,96px)}
.inv-card{width:min(440px,100%);padding:26px 26px 22px;background:rgba(12,16,17,.86);color:#eef1ef;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:3px solid var(--mint)}
.inv-card h2{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.16em;color:#7ee6f2}
.flow{list-style:none;margin:0;padding:0}
.flow li{position:relative;display:flex;align-items:center;gap:12px;font-size:clamp(16px,1.4vw,19px);font-weight:700;opacity:.18;transition:opacity .5s ease}
.flow li.on{opacity:1}
.flow li+li{margin-top:30px}
.flow li+li:before{content:"";position:absolute;left:8px;top:-26px;width:1px;height:22px;background:rgba(255,255,255,.4)}
.flow i{flex:none;width:17px;height:17px;border-radius:50%}
.flow .b i{background:var(--blast)}
.flow .r i{border:2px dashed var(--mint)}
.flow .f i{border:2px solid var(--found)}
.facts{margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14.5px;line-height:1.5;opacity:.18;transition:opacity .5s ease}
.facts.on{opacity:1}
.facts dt{font-weight:800;color:#9fb0b4}
.facts dd{margin:0;font-weight:700}
.facts .head{grid-column:1/-1;font-size:12.5px;color:#9fb0b4;font-weight:600}
.inv-note{margin:16px 0 0;font-size:11.5px;color:#8b979a}

/* 非 → 悲 */
.hanja{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f1f2ee;--word:0}
.h-block{display:flex;flex-direction:column;align-items:center;gap:.3em;padding-top:4vh;font-size:clamp(54px,10.5vw,152px);opacity:var(--word)}
.h-ko,.h-line{display:flex;gap:.06em;margin:0;line-height:1;white-space:nowrap}
.h-ko span,.h-line .hc,.h-line .morph{display:inline-block;width:1em;height:1em;text-align:center}
.h-ko{font-weight:800;color:#8a9496}   /* 한자가 주, 한글은 읽기 보조: 명도만 낮춤 */
.h-ko span:first-child{color:var(--mint)}   /* 한글 비 ↔ 한자 非/悲 같은 민트로 대응 */
.h-line .morph .m-g{color:var(--mint)}
.h-line{font-weight:900}
.h-line .morph{position:relative}
.m-stage{position:absolute;inset:0;display:block}
.m-g{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;line-height:1;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
/* 엔딩: 悲만 아주 미세하게 */
.finale .bi{transition:color .6s ease}

/* X-ray */
.xr{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 clamp(18px,6vw,96px) calc(120px + env(safe-area-inset-bottom,0px))}
.xr-card{max-width:420px;padding:18px 22px;background:rgba(12,16,17,.82);color:#eef1ef;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:3px solid var(--mint)}
.xr-card h2{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.16em;color:#7ee6f2}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:14px;font-weight:700}
.legend i{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;border-radius:2px}
.legend .lm i{background:#7a5a3a;border-radius:1px;width:14px;height:9px;vertical-align:0;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.legend .lu i{background:#5e5850;box-shadow:0 0 0 1px rgba(255,255,255,.4);border-radius:6px;width:16px;height:7px;vertical-align:1px}
.legend .lr i{background:#ece6d6;width:14px;height:4px;vertical-align:2px}
.xr-warn{margin:14px 0 0;font-size:13px;font-weight:700;color:#ffd28a}

/* 4km */
.km4{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.km4 b{font-size:clamp(90px,15vw,220px);font-weight:900;letter-spacing:-.06em;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.35)}

/* 엔딩 */
.finale{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding-top:calc(64px + env(safe-area-inset-top,0px) + clamp(28px,6vh,80px));--title:0}
.finale h2{margin:0;font-weight:900;letter-spacing:-.05em;line-height:1.08;opacity:var(--title)}
.finale h2 .t1{display:block;font-size:clamp(26px,3.3vw,46px);font-weight:800;letter-spacing:-.035em;color:#2c3234}
.finale h2 .t2{display:block;margin-top:8px;font-size:clamp(40px,6vw,86px);text-shadow:0 0 30px rgba(223,227,221,.9)}

/* ---------- 이야기 이후 ---------- */
.after{position:relative;z-index:5;background:#fff}
.sources{padding:clamp(70px,9vw,120px) clamp(22px,7vw,112px);background:#0c1011;color:#eef1ef}
.sources .wrap{max-width:960px;margin:0 auto}
.sources .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.16em;color:#7ee6f2}
.sources ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.sources li{padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.sources li b{display:block;font-size:15.5px}
.sources li span{display:block;margin-top:6px;font-size:13.5px;line-height:1.65;color:#a9b1b5}
.sources .disclaimer{margin-top:26px;font-size:12.5px;line-height:1.8;color:#8a9296}
.editor-note{position:relative;min-height:max(720px,100svh);padding:clamp(42px,5vw,78px) clamp(22px,7vw,112px);display:flex;overflow:hidden;background:#000 url('../../shelter/images/ending.webp') center/cover no-repeat;color:#fff}
.editor-copy{position:relative;z-index:2;width:min(44vw,560px);display:flex;flex-direction:column;align-items:flex-start}
.editor-kicker{font-size:clamp(15px,1.3vw,20px);line-height:1.8;color:#b7bbbd}
.editor-kicker strong{display:block;color:#fff}
.editor-title{margin:clamp(42px,6vh,74px) 0 0;font-size:clamp(66px,7vw,118px);font-weight:900;line-height:.78;letter-spacing:-.08em}
.editor-title span{display:block}
.editor-title .mint{color:var(--mint)}
.editor-body{margin-top:clamp(45px,7vh,75px);font-size:clamp(14px,1.25vw,19px);line-height:2;color:#c5c7c8}
.editor-byline{margin-top:28px;font-size:11px;color:#a4a7a8}
.editor-link{margin-top:auto;padding-top:30px;color:#7f888b;text-decoration:none;font-size:9px;letter-spacing:.2em}
.editor-mark{position:absolute;right:-2vw;bottom:-.16em;font-size:clamp(140px,21vw,390px);font-weight:900;letter-spacing:-.1em;color:#ffffff09;white-space:nowrap}
.site-footer{padding:26px clamp(22px,7vw,112px);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:11px;letter-spacing:.04em;color:#8a9296;background:#050708}

/* WebGL 불가 시 */
.fallback{display:none}
body.no-webgl #stage{display:none}
body.no-webgl .fallback{display:block;position:fixed;inset:0;z-index:0;background:#dfe3dd}
body.no-webgl .fallback svg{position:absolute;left:50%;top:55%;width:min(900px,92vw);transform:translate(-50%,-50%)}
body.no-webgl .sticky .hanja,body.no-webgl .tl{background:var(--night)}
body.no-webgl .m-g.m-bi{opacity:1}

/* OG 캡처 */
body.og #story,body.og .after{visibility:hidden!important}
body.og #track,body.og #labels,body.og .vnh-header,body.og .vnh-overlay,body.og .topbar{display:none!important}
body.og{padding-top:0!important}

@media (max-width:800px){
  .cap-wrap{align-items:flex-end;padding:0 16px calc(118px + env(safe-area-inset-bottom,0px))}
  .cap{max-width:none;width:100%;padding:18px 18px 20px}
  .cap.right{margin-left:0}
  .inv{align-items:flex-end;padding:0 16px calc(24px + env(safe-area-inset-bottom,0px))}
  .inv-card{width:100%;padding:20px 18px 16px}
  .flow li+li{margin-top:22px}
  .flow li+li:before{top:-19px;height:16px}
  .facts{margin-top:18px;padding-top:14px;font-size:13.5px}
  .xr{padding:0 16px calc(108px + env(safe-area-inset-bottom,0px))}
  .xr-card{max-width:none;width:100%}
  .lbl-in{font-size:11.5px}
  .editor-note{min-height:820px;background-position:64% center}
  .editor-copy{width:100%}
  .editor-title{font-size:clamp(62px,20vw,92px)}
  #track{width:calc(100% - 40px)}
}
@media (prefers-reduced-motion:reduce){.scroll-cue i{animation:none}#stage{transition:none}}
.xr-card{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.xr-card.on{opacity:1;transform:none}

.ph{margin:0;width:min(520px,100%);padding:10px 10px 14px;background:rgba(12,16,17,.92);color:#dfe5e6;box-shadow:0 14px 50px rgba(0,0,0,.18)}
.ph img{display:block;width:100%;height:auto;background:#222}
.ph figcaption{margin-top:10px;padding:0 4px;font-size:12.5px;line-height:1.65;color:#b9c2c4}
.ph-tag{display:block;margin:2px 4px 10px;font-size:12px;font-weight:800;letter-spacing:.12em;color:#7ee6f2}
/* 조사 결과 사진 (단계 진행에 따라 교체) */
.inv{justify-content:space-between;gap:28px}
.inv-ph{position:relative;order:2;width:min(460px,38vw);height:60vh}
.inv-ph .ph{position:absolute;left:0;right:0;top:50%;width:auto;transform:translateY(calc(-50% + 12px));opacity:0;transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.inv-ph .ph.on{opacity:1;transform:translateY(-50%)}
@media (max-width:800px){
  .ph{width:100%}
  .inv{flex-direction:column;justify-content:flex-end}
  .inv-ph{position:absolute;order:0;left:16px;right:16px;top:calc(76px + env(safe-area-inset-top,0px));width:auto;height:auto}
  .inv-ph .ph{top:0;transform:translateY(8px)}
  .inv-ph .ph.on{transform:none}
  .inv-ph .ph img{max-height:20vh;object-fit:cover}
  .inv-ph .ph figcaption{font-size:11.5px;margin-top:6px}
}

/* 단계 안의 순차 요소 */
.phase{transition:opacity .45s ease}
.phase:not(.on){opacity:0;pointer-events:none}

/* 실제 사진: 3D를 잠시 끊는 증거 화면 */
.evi{position:absolute;inset:0;z-index:3;margin:0;display:flex;align-items:center;justify-content:center;padding:calc(64px + env(safe-area-inset-top,0px) + 28px) 28px 28px;background:rgba(7,9,10,.9);opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
.evi.on{opacity:1;visibility:visible}
.evi-in{display:flex;flex-direction:column;align-items:flex-start;max-width:min(1040px,100%);transform:scale(.985);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.evi.on .evi-in{transform:none}
.evi-in.small{max-width:min(600px,100%)}
.evi img{display:block;width:auto;max-width:100%;height:auto;max-height:64vh}
.evi-in.small img{width:100%}
.evi-tag{display:block;margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:#7ee6f2}
.evi figcaption{margin-top:12px;max-width:760px;font-size:13px;line-height:1.7;color:#aab4b6}

/* 시간 변화: 같은 3D 공간의 상태 변화 + 연도 */
.tl{position:absolute;inset:0;color:#fff}
.tl-rail{position:absolute;z-index:2;left:50%;top:calc(64px + env(safe-area-inset-top,0px) + 22px);transform:translateX(-50%);display:flex;gap:clamp(16px,2.6vw,34px);margin:0;padding:12px 22px 0;list-style:none;background:rgba(10,13,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tl-year{position:relative;padding-bottom:11px;font-size:clamp(13px,1.2vw,16px);font-weight:800;letter-spacing:.02em;color:rgba(255,255,255,.38);transition:color .4s ease}
.tl-year.past{color:rgba(255,255,255,.62)}
.tl-year.on{color:#fff}
.tl-year.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mint)}
.tl-cap:before{content:"";position:absolute;left:-30vw;right:-30vw;bottom:-30vh;height:70vh;z-index:-1;background:radial-gradient(ellipse at 30% 80%,rgba(6,9,10,.62),rgba(6,9,10,0) 62%);pointer-events:none}
.tl-cap{position:absolute;z-index:1;left:clamp(18px,6vw,96px);bottom:calc(56px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 36px));height:200px}
.tl-state{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.tl-state.on{opacity:1;transform:none}
.tl-state b{display:block;font-size:clamp(58px,7.4vw,112px);font-weight:900;letter-spacing:-.05em;line-height:.95;text-shadow:0 6px 34px rgba(0,0,0,.4)}
.tl-state p{margin:14px 0 0;font-size:clamp(17px,1.6vw,22px);font-weight:700;line-height:1.5;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.tl-state small{display:block;margin-top:4px;font-size:13px;font-weight:600;color:#c8d2d4}

@media (max-width:800px){
  .evi{padding:calc(64px + env(safe-area-inset-top,0px) + 16px) 14px 16px}
  .evi img{max-height:46vh}
  .evi figcaption{font-size:12px}
  .tl-rail{gap:14px;padding:10px 14px 0;width:max-content}
  .tl-year{font-size:12.5px}
  .tl-cap{left:16px;bottom:calc(40px + env(safe-area-inset-bottom,0px));height:170px}
  .tl-state b{font-size:clamp(48px,15vw,64px)}
  .tl-state p{font-size:16px}
}
body.snap *,body.snap *:before,body.snap *:after{transition:none!important}
body.evi-on #labels,body.evi-on #track{opacity:0!important;transition:opacity .3s ease}
.step > .cap-wrap{position:sticky;inset:auto;top:0;height:100vh;height:100svh}
body.no-webgl .gl-why{position:absolute;left:50%;top:calc(64px + 18px);transform:translateX(-50%);z-index:2;margin:0;padding:10px 16px;max-width:calc(100% - 32px);background:#121516;color:#fff;font-size:13px;line-height:1.5;text-align:center}
@media (max-width:800px){
  .hero h1 .t2,.finale h2 .t2{font-size:clamp(26px,7.6vw,40px)}
  .h-block{font-size:clamp(44px,15vw,72px)}
}

/* 정전협정의 원래 DMZ → 현재 (非→悲 직전, 같은 어두운 화면) */
.pact{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;gap:clamp(28px,6vw,100px);padding:calc(64px + 28vh) 24px 0;color:#f1f2ee}
.pact-col{min-width:190px;transform:translateY(0);transition:opacity .5s ease,transform .5s ease}
.pact-col:not(.on){transform:translateY(10px)}
.pact-col b{display:block;font-size:clamp(30px,3.4vw,50px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.pact-col small{display:block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:#9fb0b4}
.pact-col ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.28)}
.pact-col li{padding:11px 0;font-size:clamp(16px,1.35vw,20px);font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:800px){
  .pact{flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:64px 32px 0}
  .pact-col{min-width:0;width:100%}
  .pact-col b{font-size:28px}
  .pact-col ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:0 16px;border-top:0}
  .pact-col li{padding:4px 0;font-size:15px;border:0}
}
.xr-fact{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:#d6dddf}
.pact-col.now{padding-left:22px;border-left:2px solid var(--mint)}
@media (max-width:800px){.pact-col.now{padding-left:14px}}

/* 뉴시스 관련기사 */
.related{padding:clamp(60px,8vw,104px) clamp(22px,7vw,112px) clamp(48px,6vw,80px);background:#fff;color:var(--ink)}
.related .wrap{max-width:960px;margin:0 auto}
.related .eyebrow{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--mint-dark)}
.related ol{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--ink)}
.related li{border-bottom:1px solid #e3e6e7}
.related a{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:baseline;padding:16px 4px;text-decoration:none}
.related a:hover span,.related a:focus-visible span{text-decoration:underline;text-underline-offset:4px;color:var(--mint-dark)}
.related time{font-size:13px;font-weight:800;color:var(--mint-dark);letter-spacing:.02em}
.related span{font-size:clamp(15px,1.25vw,17px);font-weight:700;line-height:1.55}
@media (max-width:800px){.related a{grid-template-columns:1fr;gap:4px;padding:14px 0}}
/* 非·悲 풀이: 첫 글자 아래에만, 작고 절제되게 */
.h-gloss{display:flex;gap:.06em;margin:-.08em 0 0;height:.4em;line-height:1}
.h-gloss .cell{position:relative;width:1em;overflow:hidden}
.h-gloss i{position:absolute;left:50%;top:0;transform:translateX(-50%);font-style:normal;font-size:.31em;text-align:center;font-weight:500;letter-spacing:.01em;white-space:nowrap;color:#7f898b}
.h-gloss .g-hi{opacity:var(--g-hi,0)}
.h-gloss .g-bi{opacity:calc(var(--g-bi,0) * .85);color:var(--mint)}

/* 선택형 X-ray 탐색: 수직 스크롤은 기본 동작을 유지한다. */
.xr{touch-action:pan-y}
.xr-hint{position:absolute;left:50%;top:28%;z-index:5;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);margin:0;padding:20px 28px;text-align:center;font-size:clamp(28px,3.4vw,44px);font-weight:700;line-height:1.5;color:#f1f3ee;background:rgba(12,16,17,.9);box-shadow:0 8px 32px rgba(0,0,0,.2);pointer-events:none;transition:opacity .45s ease}
.xr-hint span{display:block;margin-top:10px;font-size:13px;font-weight:400;color:#bccdce}
.xr-hint.dismissed{opacity:0!important}
@media(max-width:800px){.xr-hint{top:24%;padding:20px 18px;font-size:26px}}
body.no-webgl .xr-hint{display:none}

/* 엔딩에서만 사용하는 거리별 다시보기. 본문의 거리 표시는 그대로 둔다. */
.revisit[hidden]{display:none}
.revisit{width:min(460px,calc(100% - 48px));margin-top:32px;padding:18px 24px;background:rgba(223,227,221,.88);text-align:center;transition:opacity .5s ease}
.revisit label{display:block;font-size:15px;font-weight:700}
.revisit output{display:block;margin-top:12px;font-size:13px;font-weight:700;color:var(--mint-dark)}
.revisit input{display:block;width:100%;height:36px;margin:0;accent-color:var(--mint-dark);cursor:ew-resize;touch-action:pan-y}
.revisit input:focus-visible{outline:2px solid var(--mint-dark);outline-offset:3px}
.revisit-labels{display:flex;justify-content:space-between;font-size:11px}
.revisit p{margin:12px 0 0;font-size:11px;color:#495653}
body.no-webgl .revisit,body.og .revisit{display:none}