/* base.css — qns 공통 엔진 · 아이덴티티 = 시안 f3-19 (검정 바탕 · 흰 명조 제목 · 금색 수치 · Pretendard 본문 · 가는 금색 괘선)
   사용: <html lang="ko" data-lang="ko"> … <body class="v NN"> — 모든 텍스트는 data-copy 바인딩(app.js). 모바일 우선 390 → 834 → 1440. */
:root {
  --bg:#0e0c09; --fg:#e9e2d6; --fg-strong:#fbf6ee; --fg-muted:#b8ad9c; --accent:#e9a93a; --accent-2:#8a5a14;
  --rule:#3f3628; --rule-gold:rgba(233,169,58,.55); --panel-alt:#1a1610; --scrim:rgba(14,12,9,.92);
  --font-display:"Noto Serif KR","Noto Serif CJK KR","Apple SD Gothic Neo",serif;
  --font-body:"Pretendard","Noto Sans CJK KR","Apple SD Gothic Neo",sans-serif;
  --font-num:"Noto Serif KR","Noto Serif CJK KR",serif;
  --rule-w:1px;
  --pad:clamp(20px,5vw,56px);
  --fs-body:clamp(16px,1rem + .2vw,18px); --lh-body:1.75;
  --fs-small:.875rem; --fs-cap:.8125rem; --fs-kicker:.75rem; --ls-kicker:.16em;
  --measure:38rem;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --head-h:56px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}   /* smooth 금지: ScrollTrigger.refresh()가 스크롤된 상태에서 위치를 틀리게 잰다 (w1 REQUEST 4) */
body{margin:0;min-height:100dvh;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);word-break:keep-all;overflow-wrap:anywhere;line-break:strict;overflow-x:clip;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1,"liga" 1;-webkit-tap-highlight-color:transparent;padding-left:var(--safe-l);padding-right:var(--safe-r)}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,figcaption,details,summary{margin:0}
ul,ol{padding:0;list-style:none}
summary{list-style:none}summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-copy-missing],[data-img-missing]{outline:2px dashed #e0301e}

/* ---------- 타이포 ---------- */
.title,h1{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.012em;color:var(--fg-strong)}
h1.title{font-size:clamp(52px,15vw,150px)}
.title-en{font-family:var(--font-display);font-weight:400;letter-spacing:.14em;color:var(--fg-strong)}
h2,.h2:not(body){font-family:var(--font-display);font-weight:700;font-size:clamp(26px,2.2rem,40px);line-height:1.25;color:var(--fg-strong)}   /* :not(body): 안의 축 클래스 body.h2 와 충돌 방지 (w1 REQUEST) */
h3,.h3:not(body){font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.4rem,26px);line-height:1.3;color:var(--fg-strong)}
h3 .n,.h3 .n{color:var(--accent);margin-right:.35em;font-weight:500}
.kicker{font-family:var(--font-body);font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--fg-muted);line-height:1.4}
.kicker.serif{font-family:var(--font-display);font-weight:500;color:var(--fg-strong);letter-spacing:.12em}
p,li,.body{font-size:var(--fs-body);line-height:var(--lh-body)}
p+p{margin-top:.9em}
.lead{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,1.45rem,30px);line-height:1.55;color:var(--fg-strong)}
.line{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,5.6vw,38px);line-height:1.4;color:var(--fg-strong);text-wrap:balance}
.small,.small p{font-size:var(--fs-small);line-height:1.6}
.caption,figcaption,.cap{font-size:var(--fs-cap);line-height:1.5;color:var(--fg-muted)}
.num,.numbers .value{font-family:var(--font-num);font-variant-numeric:tabular-nums lining-nums;color:var(--accent)}
.en,.latin{font-family:var(--font-display)}
.dbar{font-family:"Pretendard","Inter",sans-serif}
.accent{color:var(--accent)}.muted{color:var(--fg-muted)}.strong{color:var(--fg-strong)}
.measure{max-width:var(--measure)}
.rule{border:0;border-top:var(--rule-w) solid var(--rule);margin:1.5rem 0}
.rule-gold{border:0;border-top:var(--rule-w) solid var(--rule-gold);margin:1.5rem 0}
.serif-body{font-family:var(--font-display);font-weight:400;line-height:1.85}

/* ---------- 레이아웃 ---------- */
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1200px;margin-left:auto;margin-right:auto}
.section{padding:clamp(48px,9vh,112px) 0}
.grid-2{display:grid;grid-template-columns:1fr;gap:clamp(20px,4vw,48px)}
@media (min-width:834px){.grid-2{grid-template-columns:1fr 1fr}}
.stack>*+*{margin-top:var(--gap,1.25rem)}
.vh{min-height:100dvh}

/* ---------- 헤더(고정) + KO|EN ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(var(--head-h) + var(--safe-t));padding:var(--safe-t) var(--pad) 0;background:linear-gradient(to bottom,rgba(14,12,9,.9) 0%,rgba(14,12,9,.55) 60%,rgba(14,12,9,0) 100%);pointer-events:none}
.site-head>*{pointer-events:auto}
.site-head .brand{display:flex;align-items:baseline;gap:.5em;font-family:var(--font-display);color:var(--fg-strong);min-height:44px;line-height:44px}
.site-head .brand .ko{font-weight:700;font-size:1.05rem}
.site-head .brand .en{font-weight:400;letter-spacing:.12em;font-size:.8rem;color:var(--fg-muted)}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--font-body);font-size:.8rem;letter-spacing:.08em}
.lang button{min-width:44px;min-height:44px;color:var(--fg-muted);padding:0 6px}
.lang button[aria-pressed="true"]{color:var(--accent)}
.lang .sep{color:var(--rule);line-height:44px}

/* ---------- 이미지 ---------- */
.fig{position:relative;overflow:hidden;background-color:var(--panel-alt);background-size:cover;background-position:center}
.fig img{width:100%;height:auto;object-fit:cover}
.fig.cover,.fig.cover img{height:100%}
.fig .cap,.fig figcaption{padding-top:.6rem}
.fig.on-image figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem var(--pad) 1rem;background:linear-gradient(to top,rgba(14,12,9,.9),rgba(14,12,9,0));color:rgba(255,255,255,.86)}
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;background-size:cover;background-position:center}
.bg img{width:100%;height:100%;object-fit:cover}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,9,.94) 0%,rgba(14,12,9,.72) 32%,rgba(14,12,9,.2) 62%,rgba(14,12,9,0) 100%)}
.scrim-top{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,9,.7) 0%,rgba(14,12,9,0) 38%)}
.on-image{color:#fff}.on-image .caption,.on-image .kicker,.on-image .muted{color:rgba(255,255,255,.82)}

/* ---------- 히어로 H1 (세로 렌더 전면 + 점등) ---------- */
.hero{position:relative;min-height:100dvh;display:grid;align-content:end;padding:calc(var(--head-h) + var(--safe-t) + 24px) var(--pad) calc(var(--pad) + var(--safe-b));overflow:hidden;isolation:isolate}
.hero>.bg{z-index:0}.hero>*:not(.bg){position:relative;z-index:1}
.hero-h1 .bg img{filter:brightness(.12);transform:scale(1.06);transform-origin:50% 40%;transition:filter 2.5s cubic-bezier(.2,.6,.2,1),transform 2.5s cubic-bezier(.2,.6,.2,1);will-change:filter,transform}
.hero-h1.lit .bg img{filter:brightness(1);transform:scale(1)}
.hero .tb{max-width:40rem}
.hero .tb .kicker{margin-bottom:.9rem}
.hero .tb .title-en{margin-top:.5rem;font-size:clamp(16px,2.2vw,24px)}
.hero .tb .tagline{margin-top:1.2rem;font-size:clamp(16px,1.05rem,19px);line-height:1.6;color:rgba(255,255,255,.92);max-width:32rem}
.hero .hero-cap{margin-top:1.4rem;color:rgba(255,255,255,.7)}
/* ---------- 히어로 H2 (타이포 검정 표지 + 면 띠) ---------- */
.hero-h2{background:var(--bg);min-height:100dvh;display:grid;grid-template-rows:1fr auto;padding:calc(var(--head-h) + var(--safe-t) + 24px) 0 0}
.hero-h2 .tb{padding:0 var(--pad);align-self:center}
.hero-h2 .band{position:relative;height:clamp(180px,32vh,360px);overflow:hidden;margin-top:clamp(24px,6vh,64px)}
.hero-h2 .band img{width:100%;height:100%;object-fit:cover}

/* ---------- S1 장(chapter) ---------- */
.chapter{position:relative;min-height:100dvh;display:grid;align-content:end;padding:calc(var(--head-h) + var(--safe-t) + 16px) var(--pad) calc(var(--pad) + var(--safe-b));overflow:hidden;isolation:isolate}
.chapter>*:not(.bg){position:relative;z-index:1}
.chapter .idx{display:flex;gap:.5em;align-items:baseline;font-family:var(--font-num);color:var(--accent);font-size:.95rem;letter-spacing:.08em;margin-bottom:.8rem}
.chapter .idx .sep,.chapter .idx .tot{color:var(--fg-muted)}
.chapter .label{margin-bottom:.6rem}
.chapter .line{max-width:30ch}
.chapter .more{margin-top:1.2rem;max-width:var(--measure)}

/* ---------- 더 읽기 ---------- */
details.more summary{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-family:var(--font-body);font-size:var(--fs-small);letter-spacing:.08em;cursor:pointer;gap:.4em}
details.more summary::after{content:"";width:.5em;height:.5em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .25s;margin-left:.2em;margin-top:-.2em}
details.more[open] summary::after{transform:rotate(-135deg);margin-top:.2em}
details.more .body{padding-top:.4rem;color:var(--fg)}

/* ---------- 수치 띠 ---------- */
.numbers{display:grid;grid-template-columns:repeat(var(--ncols,2),1fr);gap:1.1rem 1.5rem}
@media (min-width:834px){.numbers{--ncols:4}}
.numbers .item{border-top:var(--rule-w) solid var(--rule-gold);padding-top:.7rem}
.numbers .label{font-size:var(--fs-cap);color:var(--fg-muted);letter-spacing:.06em}
.numbers .value{font-size:clamp(26px,2.3rem,44px);line-height:1.15;font-weight:500}
.numbers .value.sm{font-size:clamp(18px,1.4rem,26px)}
.numbers .unit{font-family:var(--font-body);font-size:var(--fs-cap);color:var(--fg-muted);margin-left:.35em}
.numbers .note{font-size:var(--fs-cap);color:var(--fg-muted);margin-top:.3rem}
/* ---------- 데이터 과정 ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:834px){.steps{grid-template-columns:repeat(4,1fr);gap:0 1.5rem}}
.steps .step{display:grid;grid-template-columns:2.2rem 1fr;column-gap:.6rem;padding:1rem 0;border-top:var(--rule-w) solid var(--rule)}
.steps .n{font-family:var(--font-num);font-size:1.6rem;line-height:1;color:var(--accent);font-weight:500}
.steps .t{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--fg-strong)}
.steps .k{display:block;font-size:var(--fs-cap);color:var(--fg-muted);margin:.25rem 0 .5rem}
.steps .b{font-size:var(--fs-small);line-height:1.65}
/* ---------- 용어 ---------- */
.terms .item{display:grid;grid-template-columns:minmax(7.5rem,30%) 1fr;column-gap:1rem;padding:.8rem 0;border-top:var(--rule-w) solid var(--rule)}
.terms .term{font-family:var(--font-display);font-weight:700;color:var(--fg-strong);font-size:1rem;line-height:1.5}
.terms .def{font-size:var(--fs-small);line-height:1.6}
/* ---------- 크레딧 ---------- */
.credits .row{display:grid;grid-template-columns:5.5rem 1fr;column-gap:1rem;padding:.55rem 0;border-top:var(--rule-w) solid var(--rule);font-size:var(--fs-small);line-height:1.6}
.credits .k{font-size:var(--fs-cap);letter-spacing:.08em;color:var(--fg-muted);padding-top:.15rem}
/* ---------- 범례(선택) ---------- */
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem 1.2rem}
@media (min-width:834px){.legend{grid-template-columns:repeat(3,1fr)}}
.legend .item{display:grid;grid-template-columns:1.4rem 1fr;column-gap:.6rem;align-items:start}
.legend .sw{width:1.4rem;height:1.2rem;border:1px solid rgba(255,255,255,.22);margin-top:.15rem}
.legend .name{font-size:var(--fs-small);font-weight:600;line-height:1.4}.legend .desc{font-size:var(--fs-cap);color:var(--fg-muted);line-height:1.4}
/* ---------- 갤러리 ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:834px){.gallery{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:1200px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery .fig{aspect-ratio:auto;overflow:visible}
.gallery .fig img{width:100%;height:auto;aspect-ratio:var(--ar,3/4);object-fit:cover}   /* 캡션이 .fig 안에 있어도 잘리지 않게 (w1 REQUEST 5) */
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 var(--pad);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .fig{flex:0 0 min(78vw,420px);scroll-snap-align:start}
/* ---------- 모션 공통 ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.pc-wrap{position:relative;overflow:hidden;background-color:var(--bg)}
.pc-wrap canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.pc-wrap.pc-on canvas{opacity:1}
.pc-wrap .pc-fallback{position:absolute;inset:0;transition:opacity 1.2s ease}
.pc-wrap.pc-on .pc-fallback{opacity:0}
/* ---------- 푸터 ---------- */
.site-foot{padding:2.5rem var(--pad) calc(2.5rem + var(--safe-b));border-top:var(--rule-w) solid var(--rule);color:var(--fg-muted);font-size:var(--fs-cap)}
/* ---------- 접근성: 모션 감소 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-snap-type:none!important}
  .hero-h1 .bg img{filter:none!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .pc-wrap canvas{display:none}.pc-wrap .pc-fallback{opacity:1!important}
}