/* ==========================================================================
   Transition — 판면 디자인 체계
   A4(210×297mm) 고정 판면. 화면에서는 .sheets 를 zoom 으로 줄여 보여주고,
   인쇄에서는 한 쪽씩 그대로 나간다. 좁은 화면(720px 미만)에서는 흐르는 글로 바뀐다.

   규칙 (아트 디렉터 검수 뒤 정리)
   - 작은 글자는 두 가지 크기만 쓴다: 설명 7.8pt, 라벨 7pt (영문 대문자 라벨 6.8pt)
   - 선 굵기는 세 가지만 쓴다: 가는 선 .25mm, 구획 선 .6mm, 강조 선 1.1mm
   - 흰 면의 큰 숫자는 먹색, 남색 면의 큰 숫자는 호박색
   - 색의 뜻: 수소 청록, 질소 연보라, 혼합가스 민트, 암모니아 호박색, 전기 연노랑
   - 상자를 늘려 빈자리를 메우지 않는다. 남으면 내용을 더 넣는다
   ========================================================================== */

:root {
  --night: #0A1420; --navy: #10233B; --mist: #AEBBCB; --soft: #D5DDE6;
  --paper: #FFFFFF; --bone: #F2EFE9; --ink: #10151B; --ink2: #56616D; --rule: #C9CED6;
  --amber: #F7A823; --amber-ink: #A65E00;
  --h2: #5FD0E0; --n2: #8FA4F5; --mix: #7FE3C8; --nh3: #F7A823; --elec: #FFE27A;
  --f-mast: "League Gothic", "Arial Narrow", sans-serif;
  --f-head: "Hahmlet", "Noto Serif KR", serif;
  --f-body: "Noto Serif KR", "Nanum Myeongjo", serif;
  --f-sans: "IBM Plex Sans KR", "Malgun Gothic", sans-serif;
  --f-cond: "IBM Plex Sans Condensed", "IBM Plex Sans KR", sans-serif;
  --mt: 16mm; --mb: 20mm; --mo: 14mm; --mi: 17mm; --lh: 5.4mm; --gut: 4.6mm;
  --hair: .25mm; --mid: .6mm; --bold: 1.1mm;
  --bleed: 0mm;   /* 재단 여분. 인쇄소용(?bleed=3)에서만 3mm 가 된다 */
  --iw: 420mm;    /* 펼침면을 가로지르는 사진의 폭 = 두 면 폭 + 양쪽 여분 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: #14171B; color: var(--ink); font-family: var(--f-sans); }
[hidden] { display: none !important; }
a { color: inherit; }
/* 스크립트가 숫자와 지도를 다 채운 뒤에 보여준다. 빈 채로 찍히는 일을 막는다.
   스크립트가 멈췄을 때의 대비책은 magazine.html 머리의 짧은 스크립트에 있다 */
html:not(.ready) .sheets { visibility: hidden; }
/* 본문 속 쪽 번호: data-pg 로 가리킨 면의 번호를 스크립트가 넣는다 */
.pg::before { content: attr(data-n1); }

/* ---------- 화면용 상단 바 ---------- */
.bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 18px;
  background: rgba(12,15,19,.93); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.09); color: #C9D2DC; font: 500 13.5px/1 var(--f-sans); }
.bar .brand { font: 400 27px/1 var(--f-mast); letter-spacing: .05em; color: #fff; text-decoration: none; padding-top: 3px; }
.bar .issue { color: #8D99A8; white-space: nowrap; }
.bar nav { display: flex; gap: 16px; margin-left: auto; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.bar a { color: #C9D2DC; text-decoration: none; }
.bar a:hover { color: var(--amber); }
.bar .tools { display: flex; gap: 6px; align-items: center; }
.bar button { font: 600 12.5px/1 var(--f-sans); color: #C9D2DC; background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 7px 9px; cursor: pointer; white-space: nowrap; }
.bar button:hover { border-color: var(--amber); color: #fff; }
.bar button[aria-pressed="true"] { color: #0A1420; background: var(--amber); border-color: var(--amber); }
.bar .pdf { color: #0A1420; background: #fff; border-color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- 판 ---------- */
.sheets { zoom: var(--z, 1); display: flex; flex-direction: column; align-items: center; gap: 12mm; padding: 9mm 0 18mm; }
.spread { display: flex; box-shadow: 0 5mm 18mm rgba(0,0,0,.55); }
body[data-view="single"] .spread { flex-direction: column; gap: 12mm; box-shadow: none; }
body[data-view="single"] .page { box-shadow: 0 5mm 18mm rgba(0,0,0,.55); }

.page { position: relative; flex: none; width: 210mm; height: 297mm; overflow: hidden; background: var(--paper); color: var(--ink);
  font: 400 9.2pt/var(--lh) var(--f-body); word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.page.dark { background: var(--night); color: #EDF2F7; }
.live { position: absolute; top: var(--mt); bottom: var(--mb); left: var(--mo); right: var(--mi); display: flex; flex-direction: column; min-height: 0; }
.page.right .live { left: var(--mi); right: var(--mo); }
.grow { flex: 1; min-height: 0; }

.folio { position: absolute; z-index: 3; bottom: 8.6mm; left: var(--mo); right: var(--mi); display: flex; align-items: baseline; gap: 3mm;
  font: 500 6.8pt/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.page.right .folio { left: var(--mi); right: var(--mo); flex-direction: row-reverse; }
.folio b { font: 400 13pt/1 var(--f-mast); letter-spacing: .03em; color: var(--ink); }
.folio b::before { content: attr(data-n); }
.folio i { font: 500 7pt/1 var(--f-sans); font-style: normal; letter-spacing: .02em; text-transform: none; }
.page.dark .folio, .folio.on-dark { color: var(--soft); }
.page.dark .folio b, .folio.on-dark b { color: #fff; }

/* ---------- 글자 ---------- */
.kicker { display: flex; align-items: center; gap: 2.2mm; margin: 0 0 5mm; font: 600 6.8pt/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--amber-ink); }
.kicker::before { content: ""; width: 2.2mm; height: 2.2mm; background: var(--amber); flex: none; }
.kicker i { font: 600 7pt/1 var(--f-sans); font-style: normal; letter-spacing: .02em; text-transform: none; color: var(--ink2); }
.dark .kicker { color: var(--amber); }
.dark .kicker i { color: var(--soft); }
.hed-xl { margin: 0; font: 900 58pt/1.07 var(--f-head); letter-spacing: -.04em; }
.hed-l { margin: 0; font: 800 29pt/1.17 var(--f-head); letter-spacing: -.035em; text-wrap: balance; }
.hed-m { margin: 0; font: 800 18.5pt/1.22 var(--f-head); letter-spacing: -.03em; text-wrap: balance; }
.hed-s { margin: 0; font: 800 13.5pt/1.25 var(--f-head); letter-spacing: -.035em; }
.deck { margin: 5mm 0 0; max-width: 132mm; font: 500 11.4pt/18pt var(--f-sans); letter-spacing: -.012em; color: #26303A; text-wrap: balance; }
.dark .deck { color: var(--soft); }
.cap { margin: 0; font: 400 7.8pt/11.4pt var(--f-sans); color: var(--ink2); text-wrap: pretty; }
.cap b { font-weight: 600; color: var(--ink); }
.dark .cap { font-weight: 500; color: var(--soft); }
.dark .cap b { color: #fff; }
.lab { margin: 0 0 2mm; font: 600 7pt/1 var(--f-sans); letter-spacing: .02em; color: var(--amber-ink); }
.dark .lab { color: var(--amber); }
.tnum { font-variant-numeric: tabular-nums; }
/* 상자 머리: 어느 면에서나 같은 모양 */
.ph { display: flex; align-items: baseline; justify-content: space-between; gap: 5mm; padding-bottom: 2.2mm; border-bottom: var(--hair) solid currentColor; }
.ph b { font: 800 13.5pt/1.25 var(--f-head); letter-spacing: -.035em; }
.ph span { font: 400 7.8pt/11.4pt var(--f-sans); color: var(--ink2); text-align: right; }
.dark .ph span, .on-night .ph span { font-weight: 500; color: var(--soft); }
/* 공정 단계 번호: 본문·사진·도표·카드에서 모두 같은 표시 */
.ref { display: inline-grid; place-items: center; width: 1.36em; height: 1.36em; border-radius: 50%; background: var(--amber); color: #0A1420;
  font: 700 .8em/1 var(--f-cond); letter-spacing: 0; vertical-align: .1em; text-indent: 0; }
/* 큰 숫자 */
.bign { display: block; font: 400 40pt/.9 var(--f-mast); letter-spacing: .01em; white-space: nowrap; }
.bign small { margin-left: 1mm; font: 600 9pt/1 var(--f-cond); letter-spacing: .03em; }

/* 본문 단: 양끝 맞춤, 문단은 들여쓰기로 구분. 본문만 글자 단위로 줄을 바꾼다 */
.cols { column-gap: var(--gut); column-fill: balance; text-align: justify; text-justify: inter-character; line-break: strict; word-break: normal; orphans: 2; widows: 2; }
.c3 { column-count: 3; }
.c2 { column-count: 2; }
.cols p { margin: 0; text-indent: 1em; }
.cols p.first, .cols h3 + p { text-indent: 0; }
.cols p.keep { break-inside: avoid; }   /* 두세 줄짜리 짧은 문단이 단 사이에서 갈라지지 않게 */
.cols h3 { margin: var(--lh) 0 0; font: 700 9.4pt/var(--lh) var(--f-sans); letter-spacing: -.015em; text-align: left; break-after: avoid; color: var(--ink); }
.cols h3::before { content: ""; display: inline-block; width: 1.9mm; height: 1.9mm; margin-right: 1.5mm; background: var(--amber); vertical-align: .1mm; }
.dropcap::first-letter { float: left; margin: -.4mm 1.7mm 0 0; font: 900 47pt/15.6mm var(--f-head); color: var(--ink); }
.endmark { display: inline-block; width: 1.9mm; height: 1.9mm; margin-left: 1.2mm; background: var(--amber); vertical-align: .1mm; }
.pull { margin: auto 0 6mm; padding-top: 4mm; border-top: var(--bold) solid var(--amber); min-height: 21mm; font: 800 15.5pt/22.5pt var(--f-head); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }

/* ---------- 그림 자리 ---------- */
.art { position: relative; margin: 0; overflow: hidden; background: var(--navy); }
.art img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art.half-l img, .art.half-r img { width: var(--iw); max-width: none; }
.art.half-r img { left: -210mm; }
.art.is-fpo img { filter: saturate(.45) brightness(.5); }
.art .fpo { display: none; position: absolute; z-index: 2; left: 3mm; top: 3mm; padding: 1.2mm 1.8mm; background: var(--amber); color: #0A1420; font: 600 7pt/1 var(--f-sans); white-space: nowrap; }
.art.is-fpo .fpo { display: block; }
.art figcaption, .art-cap { position: absolute; z-index: 2; left: var(--mo); right: 46mm; margin: 0; font: 500 7.8pt/11.4pt var(--f-sans); color: #fff; text-shadow: 0 0 2mm rgba(0,0,0,.9), 0 0 .6mm rgba(0,0,0,.6); text-wrap: pretty; }
.art figcaption { bottom: 4mm; }
.art-cap { bottom: 19mm; }
.art.is-fpo figcaption, .art.is-fpo .mk { display: none; }
.panel { background: var(--bone); padding: 5mm 5.5mm; flex: none; }

/* ==========================================================================
   표지
   ========================================================================== */
.cover { background: #1B2632; color: #fff; }
.cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
.cover .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,13,20,.5) 0, rgba(8,13,20,.12) 24%, rgba(8,13,20,0) 40%, rgba(8,13,20,0) 58%, rgba(6,10,16,.78) 100%); }
.cv-mast { position: absolute; left: 12mm; top: 8.4mm; font: 400 54.4mm/.86 var(--f-mast); letter-spacing: .02em; white-space: nowrap; }
.cv-strap { position: absolute; left: 12mm; right: 12mm; top: 57.4mm; display: flex; justify-content: space-between; align-items: baseline; border-top: .4mm solid #fff; padding-top: 2.4mm; font: 600 9.5pt/1 var(--f-sans); }
.cv-strap .en { font: 600 9pt/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; }
.cv-main { position: absolute; left: 12mm; bottom: 15mm; width: 118mm; }
.cv-main .kick { margin-bottom: 4mm; font: 700 8pt/1 var(--f-cond); letter-spacing: .26em; color: var(--amber); }
.cv-main h1 { margin: 0; font: 900 60pt/1.05 var(--f-head); letter-spacing: -.04em; white-space: nowrap; }
.cv-main h1 small { display: block; font: 700 25pt/1.3 var(--f-head); letter-spacing: -.03em; }
.cv-main p { margin: 4.6mm 0 0; font: 500 11pt/17pt var(--f-sans); color: #EAF0F5; text-wrap: balance; }
.cv-lines { position: absolute; right: 12mm; bottom: 15mm; width: 64mm; margin: 0; padding: 0; list-style: none; border-bottom: var(--hair) solid rgba(255,255,255,.6); }
.cv-lines li { display: grid; grid-template-columns: 11mm 1fr; align-items: baseline; padding: 2.4mm 0 2.6mm; border-top: var(--hair) solid rgba(255,255,255,.6); }
.cv-lines b { font: 400 19pt/1 var(--f-mast); letter-spacing: .03em; color: var(--amber); }
.cv-lines b::before { content: attr(data-n); }
.cv-lines strong { display: block; font: 700 11pt/15pt var(--f-sans); }
.cv-lines div > span { display: block; font: 500 8.6pt/12.5pt var(--f-sans); color: #DCE4EC; }

/* ==========================================================================
   편집 노트 · 목차
   ========================================================================== */
.ed .ghost { position: absolute; right: 10mm; top: 6mm; font: 400 96mm/.8 var(--f-mast); letter-spacing: .01em; color: transparent; -webkit-text-stroke: .3mm rgba(174,187,203,.5); pointer-events: none; }
.ed h2 { margin: 0 0 10mm; font: 800 44pt/1.2 var(--f-head); letter-spacing: -.04em; color: #fff; }
.ed .cols { color: #E3EAF1; font-size: 10.2pt; line-height: 6.1mm; font-weight: 400; }
.ed .sign { margin-top: 6.1mm; font: 600 7.8pt/var(--lh) var(--f-sans); color: var(--soft); text-align: right; }
.nums { margin-top: auto; }
.nums .ph { color: #fff; }
.nums-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gut); }
.nums-g div { display: grid; grid-template-columns: 37mm 1fr; align-items: end; padding: 5mm 0 5.6mm; border-bottom: var(--hair) solid rgba(255,255,255,.5); }
.nums-g div:nth-child(n+3) { border-bottom: 0; padding-bottom: 0; }
.nums-g b { display: block; font: 400 80pt/.86 var(--f-mast); letter-spacing: .01em; color: var(--amber); }
.nums-g span { display: block; margin-bottom: 2.2mm; font: 500 8.6pt/13pt var(--f-sans); color: var(--soft); }

.toc-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 4.5mm; border-bottom: var(--mid) solid var(--ink); }
.toc-head h2 { margin: 0; font: 400 47pt/.82 var(--f-mast); letter-spacing: .035em; }
.toc-head span { font: 500 7.8pt/11.4pt var(--f-sans); color: var(--ink2); text-align: right; }
.toc { margin: 0; padding: 0; list-style: none; }
.toc li { display: grid; grid-template-columns: 20mm 1fr 34mm; align-items: center; padding: 4.5mm 0 4.7mm; border-bottom: var(--hair) solid var(--rule); }
.toc .pn { font: 400 29pt/1 var(--f-mast); letter-spacing: .02em; color: var(--ink); }
.toc .pn::before { content: attr(data-n); }
.toc a { display: block; color: inherit; text-decoration: none; }
.toc strong { display: block; font: 800 13.5pt/1.3 var(--f-head); letter-spacing: -.03em; }
.toc p { margin: .8mm 0 0; font: 400 7.8pt/11.4pt var(--f-sans); color: var(--ink2); text-wrap: pretty; }
.toc em { font: 600 6.8pt/1 var(--f-cond); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); text-align: right; }
.on-cover { margin: auto 0 0; }
.on-cover .art { height: 80mm; }
.on-cover .art img { object-position: 78% 50%; }
.on-cover .txt { display: grid; grid-template-columns: 34mm 1fr; gap: 0 var(--gut); align-items: baseline; margin-top: 3mm; }
.on-cover .lab { margin: 0; }

/* ==========================================================================
   이달의 지도 (펼침면)
   ========================================================================== */
.half { position: absolute; left: 0; width: 100%; overflow: hidden; }
.half > svg { position: absolute; top: 0; left: 0; width: 200%; height: 100%; display: block; }
.half.b > svg { left: -100%; }
.map-pg .half { top: 60mm; height: 170mm; }
.map-pg .hed-l { color: #fff; }
.map-legend { display: grid; gap: 1.8mm; justify-items: end; font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); text-align: right; }
.map-legend i { display: inline-block; width: 2.6mm; height: 2.6mm; border-radius: 50%; margin-right: 1.6mm; vertical-align: -.2mm; }
.map-info { min-height: 10mm; max-width: 100mm; margin-top: 1.5mm; padding: 2mm 2.6mm; border: var(--hair) solid rgba(255,255,255,.5); font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); text-align: left; }
.map-info b { color: #fff; font-weight: 600; }
.map-bottom { margin-top: auto; min-height: 44mm; color: #fff; }
.rank { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gut); }
.rank li { display: grid; grid-template-columns: 6mm 1fr auto; gap: 0 1.5mm; align-items: baseline; padding: 1.2mm 0 1.4mm; border-bottom: var(--hair) solid rgba(255,255,255,.5); font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); }
.rank li b { font: 400 12pt/1 var(--f-mast); color: var(--amber); }
.rank li strong { display: block; font-weight: 600; color: #fff; }
.rank li em { font: 600 8.6pt/11.4pt var(--f-cond); font-style: normal; color: #fff; text-align: right; white-space: nowrap; }
.rank li em small { display: block; font: 500 7pt/11.4pt var(--f-sans); color: var(--soft); }
.stagebar { display: flex; height: 14mm; gap: .5mm; margin-top: 3.4mm; }
.stagebar div { min-width: 0; display: flex; align-items: flex-end; padding: 0 1.8mm 1.4mm; font: 400 19pt/1 var(--f-mast); letter-spacing: .03em; color: #0A1420; }
.stagekey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 3mm; margin-top: 2.6mm; }
.stagekey div { min-width: 0; padding-top: 1.6mm; border-top: var(--bold) solid var(--c); font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); }
.stagekey b { display: block; font-weight: 600; color: #fff; white-space: nowrap; }
/* 그림 속 글자 */
.sv-n { font: 700 17px/1 var(--f-cond); fill: #0A1420; }
.sv-t { font: 600 13px/1 var(--f-sans); fill: #E3EAF1; }
.sv-s { font: 500 11.5px/1 var(--f-sans); fill: var(--soft); }
/* 지도 번호표: 번호는 호박색, 이름은 흰색. 지도 선 위에서도 읽히게 어두운 테두리를 두른다 */
.sv-lab text { font: 600 12px/1 var(--f-sans); fill: #E3EAF1; paint-order: stroke; stroke: #0A1420; stroke-width: 3.2px; stroke-linejoin: round; }
.sv-lab .n { font: 700 12.5px/1 var(--f-cond); fill: #FFD98A; }
.sv text, text.sv { font-family: var(--f-sans); }

/* ==========================================================================
   특집
   ========================================================================== */
.art.full { position: absolute; inset: 0; }
.op .bar-a { width: 18mm; height: var(--bold); margin: 7mm 0 0; background: var(--amber); }
.op .byline { margin: 5mm 0 6mm; padding-top: 2.6mm; border-top: var(--hair) solid var(--rule); font: 500 7.8pt/1 var(--f-sans); color: var(--ink2); display: flex; gap: 5mm; }
.op .byline b { font-weight: 600; color: var(--ink); }
.op .cols { font-size: 9.7pt; line-height: 5.8mm; }
.keys { margin-top: auto; }
.keys-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gut); padding-top: 4.4mm; }
.keys-g div + div { padding-left: var(--gut); border-left: var(--hair) solid #BDB6A8; }
.keys-g p { margin: 2.6mm 0 0; font: 400 7.8pt/11.4pt var(--f-sans); color: var(--ink); text-wrap: pretty; }
.keys-g .bign small { color: var(--ink2); }

.sec-head { padding-top: 3.4mm; margin-bottom: 6mm; border-top: var(--mid) solid var(--ink); }
.sec-head .kicker { margin-bottom: 3mm; }

/* 도표 상자: 8쪽과 9쪽의 상자는 높이가 같고 판면 아래 끝에 붙는다 */
.dens { margin-top: auto; }
.dens svg, .chain svg { display: block; width: 100%; height: auto; margin-top: 4mm; }
.dens .cap, .chain .cap { margin-top: 3.4mm; padding-top: 2.6mm; border-top: var(--hair) solid #BDB6A8; column-count: 2; column-gap: 6mm; }
.g-name { font: 700 13.5px/1 var(--f-sans); fill: var(--ink); }
.g-cond { font: 400 11.5px/1 var(--f-sans); fill: var(--ink2); }
.g-val { font: 400 34px/1 var(--f-mast); fill: var(--ink); letter-spacing: .01em; }
.g-unit { font: 600 12px/1 var(--f-cond); fill: var(--ink2); }
.g-tick { font: 500 10.5px/1 var(--f-cond); fill: var(--ink2); }
.g-note { font: 500 11px/1 var(--f-sans); fill: var(--ink2); }
.g-grp { font: 600 10.5px/1 var(--f-sans); fill: var(--amber-ink); letter-spacing: .02em; }
.g-pct { font: 600 10.5px/1 var(--f-sans); fill: var(--ink); }

/* ==========================================================================
   공정 해부 (펼침면)
   ========================================================================== */
.proc-pg .hed-l { color: #fff; }
.proc-pg .lede { column-count: 2; column-gap: 5mm; font: 500 9.2pt/14.4pt var(--f-sans); color: #E3EAF1; text-wrap: pretty; }
.proc-pg .lede p { margin: 0 0 1.6mm; break-inside: avoid; }
.proc-pg .pano { position: absolute; left: 0; right: 0; top: 59mm; height: 113mm; }
.proc-pg .half { top: 181mm; height: 56mm; }
.proc-pg .pano-cap { position: absolute; z-index: 2; left: var(--mo); right: var(--mi); top: 174mm; }
.proc-pg.right .pano-cap { left: var(--mi); right: var(--mo); text-align: right; }
/* 사진 위 번호표. --x, --y 는 그림 전체에서의 위치(0~1)다. 그림은 폭 --iw(두 면 폭 420mm)에 맞춰 놓이고
   높이는 그 0.428571배(21:9)이며, 띠 높이 113mm 를 넘는 만큼 위아래가 똑같이 잘려 보인다.
   같은 번호표를 양쪽 면에 다 넣어 두면 자기 면 밖의 것은 잘려 안 보인다 */
.mk { position: absolute; z-index: 2; left: calc(var(--x) * var(--iw)); top: calc(var(--y) * var(--iw) * .428571 - (var(--iw) * .428571 - 113mm) / 2); display: grid; justify-items: center; transform: translate(-50%, -100%); }
.half-r .mk { left: calc(var(--x) * var(--iw) - 210mm); }
.mk.flow-only { display: none; }   /* 좁은 화면 전용. 인쇄 판면에서 종이 밖에 놓이면 모든 쪽이 줄어 찍힌다 */
.mk .ref { width: 5.6mm; height: 5.6mm; font: 700 9.5pt/1 var(--f-cond); box-shadow: 0 0 0 .5mm rgba(10,20,32,.7); }
.mk::after { content: ""; width: .3mm; height: var(--l, 7mm); background: #fff; box-shadow: 0 0 .6mm rgba(0,0,0,.8); }
.mk::before { content: ""; order: 3; width: 1.5mm; height: 1.5mm; margin-bottom: -.75mm; border-radius: 50%; background: #fff; box-shadow: 0 0 .6mm rgba(0,0,0,.8); }
.steps { margin-top: auto; display: grid; gap: 0 var(--gut); }
.steps.s3 { grid-template-columns: repeat(3, 1fr); }
.steps.s4 { grid-template-columns: repeat(4, 1fr); }
.step { border-top: var(--hair) solid rgba(255,255,255,.6); padding-top: 2.6mm; min-height: 35mm; }
.step strong { display: block; font: 700 10pt/1.3 var(--f-sans); color: #fff; }
.step strong .ref { margin-right: 1.5mm; }
.step em { display: block; margin: 1.2mm 0 1.4mm; font: 600 7pt/1.3 var(--f-sans); font-style: normal; letter-spacing: .02em; color: var(--amber); }
.step p { margin: 0; font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); text-wrap: pretty; }
.proc-m { display: none; }

/* ==========================================================================
   현장의 기계 (펼침면)
   ========================================================================== */
.mach-pg .live { bottom: 77mm; }
.mach-pg .top { height: 52mm; margin-bottom: 6mm; flex: none; }
.readme { height: 100%; padding: 5mm 5.5mm; background: var(--bone); display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; align-content: center; }
.readme p { margin: 0; font: 400 8.6pt/13pt var(--f-sans); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.readme p + p { margin-top: 1.5mm; }
.readme .lab { margin: 0 0 2mm; font: 600 7pt/1 var(--f-sans); letter-spacing: .02em; color: var(--amber-ink); }
.readme b { font-weight: 700; }
/* 카드 세 장이 같은 가로줄(사진, 번호, 이름, 설명)을 나눠 써서 줄이 맞는다 */
.machs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 78.2mm auto auto 1fr; gap: 0 var(--gut); }
.mach { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; align-content: start; min-width: 0; border-top: var(--mid) solid var(--ink); }
.mach .art { margin-top: 2.6mm; }
.mach .no { margin-top: 3.4mm; display: flex; align-items: center; gap: 1.2mm; font: 600 9pt/1 var(--f-sans); color: var(--ink2); }
.mach .no .ref { width: 5.4mm; height: 5.4mm; font: 700 9.5pt/1 var(--f-cond); }
.mach h3 { margin: 2mm 0 0; font: 800 13.5pt/1.3 var(--f-head); letter-spacing: -.035em; }
.mach dl { margin: 1.4mm 0 0; font: 400 8.6pt/13pt var(--f-sans); letter-spacing: -.01em; text-wrap: pretty; }
.mach dt { margin-top: 2.6mm; font: 600 7pt/1 var(--f-sans); letter-spacing: .02em; color: var(--amber-ink); }
.mach dd { margin: 1.2mm 0 0; }
/* overflow: hidden 은 띠 밖으로 뻗는 노선(.stations::before)을 잘라 준다. 종이 밖으로 나간 요소가 있으면 인쇄할 때 모든 쪽이 줄어 찍힌다 */
.flowband { position: absolute; left: 0; right: 0; bottom: 0; height: 69mm; overflow: hidden; background: var(--night); color: #EDF2F7; }
.flowband .in { position: absolute; top: 7mm; bottom: 19mm; left: var(--mo); right: var(--mi); display: flex; flex-direction: column; }
.page.right .flowband .in { left: var(--mi); right: var(--mo); }
.flowband h3 { margin: 0; display: flex; align-items: center; gap: 2mm; font: 800 13.5pt/1.25 var(--f-head); letter-spacing: -.035em; color: #fff; }
.flowband h3 .ref { width: 5.6mm; height: 5.6mm; font: 700 9.5pt/1 var(--f-cond); }
.stations { position: relative; margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gut); }
.stations::before { content: ""; position: absolute; left: -17mm; right: -17mm; top: 2.1mm; height: .9mm; background: var(--amber); }
.station { position: relative; padding-top: 8mm; }
.station::before { content: attr(data-k); position: absolute; left: 0; top: 0; width: 5.2mm; height: 5.2mm; border-radius: 50%; background: #fff; color: #0A1420; display: grid; place-items: center; font: 700 8pt/1 var(--f-cond); box-shadow: 0 0 0 .7mm var(--night); }
.station strong { display: block; font: 700 10pt/1.3 var(--f-sans); color: #fff; }
.station p { margin: 1.3mm 0 0; font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); text-wrap: pretty; }
.station.side-st::before { display: none; }
.flowband .side { margin: 0; padding-left: 3mm; border-left: var(--hair) solid rgba(255,255,255,.6); }

/* ==========================================================================
   인류와 지구 (펼침면)
   ========================================================================== */
.imp-l .art.top { position: absolute; left: 0; right: 0; top: 0; height: 104mm; }
.imp-l .live { top: 112mm; }
.imp-l .hed-l { margin-bottom: 6mm; }
.cols sup, .cite { font: 600 6.8pt/1 var(--f-sans); color: var(--amber-ink); vertical-align: 1.2mm; letter-spacing: 0; }
.stats { margin-top: auto; background: var(--night); color: #fff; padding: 5mm 5.5mm; }
.stats .ph { color: #fff; }
.stats .ph span { font-weight: 500; color: var(--soft); }
.stats-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--gut); padding-top: 4.4mm; }
.stats-g div + div { padding-left: var(--gut); border-left: var(--hair) solid rgba(255,255,255,.5); }
.stats-g .bign { color: var(--amber); }
.stats-g span { display: block; margin-top: 2.4mm; font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); text-wrap: pretty; }
.stats .cap { margin-top: 4mm; padding-top: 2.4mm; border-top: var(--hair) solid rgba(255,255,255,.5); color: var(--soft); font-weight: 500; }
.stats .cap sup { font: 600 7pt/1 var(--f-sans); color: var(--amber); vertical-align: 1mm; }

.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--gut); }
.use { border-top: var(--bold) solid var(--ink); padding-top: 3.4mm; }
.use h3 { margin: 0; font: 800 18.5pt/1.22 var(--f-head); letter-spacing: -.04em; }
.use p { margin: 2.6mm 0 0; font: 400 8.6pt/13pt var(--f-sans); letter-spacing: -.01em; color: #26303A; text-wrap: pretty; }
.matrix { margin-top: 7mm; }
.mx { display: grid; grid-template-columns: 30mm repeat(4, 1fr); }
.mx > * { display: flex; align-items: center; justify-content: center; min-height: 8.4mm; padding: 1.4mm 0; border-bottom: var(--hair) solid var(--rule); font: 400 7.8pt/11.4pt var(--f-sans); }
.mx .h { min-height: 7.4mm; font: 600 7pt/10pt var(--f-sans); letter-spacing: .02em; color: var(--ink2); text-align: center; }
.mx .h:first-child, .mx .r { justify-content: flex-start; }
.mx .r { font: 700 9pt/11.4pt var(--f-sans); }
.mx .c i { display: block; border-radius: 50%; }
/* 15쪽 아래 목록은 판면 끝에 붙인다. 둘째 줄의 가로선이 14쪽 숫자 상자의 윗변과 같은 높이에 온다 */
.imp-r .sec-b { margin-top: auto; }
.mx .c .big { width: 4.4mm; height: 4.4mm; background: var(--amber); box-shadow: 0 0 0 .3mm var(--amber-ink); }
.mx .c .mid { width: 3mm; height: 3mm; border: .45mm solid var(--ink); }
.mx .c .non { width: 3mm; height: .3mm; border-radius: 0; background: #A7A093; }
.mx-key { display: flex; gap: 6mm; margin-top: 2.4mm; font: 400 7.8pt/11.4pt var(--f-sans); color: var(--ink2); }
.mx-key i { display: inline-block; vertical-align: -.3mm; margin-right: 1.4mm; border-radius: 50%; }
.mx-key .big { width: 3.2mm; height: 3.2mm; background: var(--amber); box-shadow: 0 0 0 .3mm var(--amber-ink); }
.mx-key .mid { width: 2.6mm; height: 2.6mm; border: .4mm solid var(--ink); }
.mx-key .non { width: 3mm; height: .3mm; border-radius: 0; background: #A7A093; vertical-align: .9mm; }
.conds { margin: 2mm 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gut); counter-reset: c; }
.conds li { counter-increment: c; display: grid; grid-template-columns: 8mm 1fr; align-content: start; padding: 3.5mm 0 4.4mm; border-top: var(--hair) solid var(--rule); }
.conds li::before { content: counter(c); font: 400 22pt/.9 var(--f-mast); color: var(--ink); }
.conds strong { display: block; font: 700 9.6pt/13.4pt var(--f-sans); letter-spacing: -.025em; }
.conds p { margin: 1mm 0 0; font: 400 8.6pt/13pt var(--f-sans); letter-spacing: -.01em; color: #26303A; text-wrap: pretty; }
.conds li.fin { display: block; background: var(--bone); border-top: 0; padding: 4mm 4.6mm; align-self: stretch; }
.conds li.fin::before { content: none; }
.conds li.fin p { margin: 0; font: 800 11.5pt/17pt var(--f-head); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }

/* ==========================================================================
   프로젝트 파일 (펼침면)
   ========================================================================== */
.file-pg .top { height: 46mm; margin-bottom: 6mm; flex: none; }
.file-note { height: 100%; padding: 5mm 5.5mm; background: var(--bone); display: grid; grid-template-columns: 1fr 1fr 47mm; gap: 0 6mm; align-content: center; }
.fstage { margin: 0; padding: 0; list-style: none; }
.fstage li { display: grid; grid-template-columns: auto 1fr auto; gap: 0 2.4mm; align-items: center; padding: 1.1mm 0; border-bottom: var(--hair) solid #BDB6A8; font: 400 7.8pt/11.4pt var(--f-sans); }
.fstage li:first-child { border-top: var(--hair) solid #BDB6A8; }
.fstage .dots { margin: 0; }
.fstage b { font: 400 12.5pt/1 var(--f-mast); letter-spacing: .02em; }
/* 표: 번호 | 프로젝트·국가·용도 | 단계 | 발주처·EPC | 규모. 글자를 자르지 않는다 */
.rows-h, .prow { display: grid; grid-template-columns: 8mm 56mm 22mm 1fr 18mm; gap: 0 3mm; }
.rows-h { padding-bottom: 2mm; border-bottom: var(--mid) solid var(--ink); font: 600 7pt/1 var(--f-sans); letter-spacing: .02em; color: var(--ink2); }
.rows-h span:last-child { text-align: right; }
.rows { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.prow { flex: 1 0 auto; align-content: start; align-items: start; border-bottom: var(--hair) solid var(--rule); padding: 1.9mm 0 1mm; font: 400 7.8pt/10.6pt var(--f-sans); }
.prow > * { min-width: 0; }
.prow .ix { font: 400 14pt/1 var(--f-mast); color: var(--ink); letter-spacing: .02em; }
.prow .nm strong { display: block; font: 700 8.6pt/11.4pt var(--f-sans); letter-spacing: -.015em; }
.prow .nm span { display: block; margin-top: .3mm; font: 500 7pt/10pt var(--f-sans); color: var(--ink2); }
.prow .nm p { margin: .9mm 0 0; text-wrap: pretty; }
.prow .st b { display: block; font: 600 7.8pt/11.4pt var(--f-sans); }
.dots { display: flex; gap: .9mm; margin-top: 1.2mm; }
.dots i { width: 2.1mm; height: 2.1mm; border-radius: 50%; border: .3mm solid var(--ink2); }
.dots i.on { background: var(--amber); border-color: var(--amber-ink); }
.prow .who { text-wrap: pretty; }
.prow .who small { margin-right: 1.4mm; font: 600 7pt/1 var(--f-sans); letter-spacing: .02em; color: var(--amber-ink); }
.prow .who div + div { margin-top: .5mm; }
.prow.more { flex: 0 0 auto; border-bottom: 0; }
.prow .val { text-align: right; }
.prow .val b { display: block; font: 400 14pt/1 var(--f-mast); letter-spacing: .02em; white-space: nowrap; }
.prow .val b small { margin-left: .7mm; font: 600 7pt/1 var(--f-sans); letter-spacing: 0; color: var(--ink2); }
.prow .val span { display: block; font: 500 7pt/10pt var(--f-sans); color: var(--ink2); }
.na { color: #6B7684; }
.pcards { display: none; }

/* ==========================================================================
   판권
   ========================================================================== */
.colo .live { justify-content: space-between; }
.colo .hed-l { color: #fff; margin-bottom: 8mm; }
.colo-cols { column-count: 2; column-gap: 7mm; font: 500 8.4pt/13.2pt var(--f-sans); letter-spacing: -.01em; color: var(--soft); text-wrap: pretty; }
.colo-cols section { break-inside: avoid; margin: 0 0 6mm; }
.colo-cols .lab { margin: 0 0 2mm; padding-top: 2.6mm; border-top: var(--hair) solid rgba(255,255,255,.6); }
.colo-cols p { margin: 0 0 1.4mm; }
.colo-cols ul { margin: 0; padding-left: 3.4mm; }
.colo-cols li { margin-bottom: .8mm; }
.colo-cols a { color: #fff; text-underline-offset: .6mm; }
.src-wrap .ph { color: #fff; }
.srcs { margin: 2.4mm 0 0; padding: 0; list-style: none; column-count: 3; column-gap: var(--gut); font: 500 7.8pt/11.4pt var(--f-sans); color: var(--soft); }
.srcs li { margin: 0; padding: .55mm 0; display: grid; grid-template-columns: 6mm 1fr; break-inside: avoid; overflow-wrap: anywhere; }
.srcs b { font: 700 7.8pt/11.4pt var(--f-cond); color: var(--amber); }
.srcs a { color: inherit; text-decoration: none; }
.colo-foot { border-top: .4mm solid #fff; padding-top: 3mm; }
.colo-foot .wm { font: 400 51.6mm/.84 var(--f-mast); letter-spacing: .02em; color: #fff; white-space: nowrap; }
.colo-foot p { margin: 2.4mm 0 0; display: flex; justify-content: space-between; font: 500 7.8pt/1 var(--f-sans); color: var(--soft); }

/* ==========================================================================
   용어 풀이: 세 묶음 × 여섯 낱말. 가로줄이 세 단에 걸쳐 같은 높이에 온다
   ========================================================================== */
.gloss-pg .top { height: 46mm; margin-bottom: 6mm; flex: none; }
.gloss { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto repeat(6, 1fr); grid-auto-flow: column; gap: 0 var(--gut); }
.gloss .lab { margin: 0; padding: 2.6mm 0 2.4mm; border-top: var(--mid) solid var(--ink); }
.gloss > div { min-height: 0; padding-top: 2.8mm; border-top: var(--hair) solid var(--rule); }
.gloss h3 { margin: 0; font: 700 10pt/1.35 var(--f-sans); letter-spacing: -.02em; }
.gloss h3 small { margin-left: 1.2mm; font: 600 7pt/1 var(--f-sans); letter-spacing: .02em; color: var(--ink2); }
.gloss > div p { margin: 1.3mm 0 0; font: 400 9pt/13.6pt var(--f-sans); letter-spacing: -.01em; color: #26303A; text-wrap: pretty; }

/* ==========================================================================
   뒤표지: 이번 호의 한 문장. 오른쪽 아래 42×28mm 는 바코드 자리로 비워 둔다
   ========================================================================== */
/* 사진을 어둡게 까는 일은 위에 덮는 남색 막으로만 한다. filter 를 쓰면 PDF 에서 사진이 낮은 해상도의 그림으로 바뀐다 */
.bc .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.bc .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,32,.93) 0, rgba(10,20,32,.8) 20%, rgba(10,20,32,.74) 46%, rgba(10,20,32,.87) 74%, rgba(10,20,32,.97) 100%); }
.bc-top { position: absolute; left: var(--mo); right: var(--mi); top: var(--mt); display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 3mm; border-bottom: .4mm solid #fff; font: 600 9.5pt/1 var(--f-sans); color: #fff; }
.bc-top .wm { font: 400 30pt/.9 var(--f-mast); letter-spacing: .05em; }
.bc-top .en { font: 600 9pt/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; }
.bc-main { position: absolute; left: var(--mo); right: var(--mi); top: 98mm; }
.bc-main .bar-a { width: 18mm; height: var(--bold); background: var(--amber); }
.bc-main .q { margin: 8mm 0 0; font: 900 46pt/1.18 var(--f-head); letter-spacing: -.04em; color: #fff; }
.bc-main .s { margin: 9mm 0 0; max-width: 120mm; font: 500 12.5pt/19.5pt var(--f-sans); letter-spacing: -.012em; color: var(--soft); text-wrap: balance; }
.bc-main .from { margin: 5mm 0 0; font: 600 7.8pt/1 var(--f-sans); color: var(--amber); }
.bc-foot { position: absolute; left: var(--mo); bottom: var(--mb); display: grid; gap: 2mm; font: 500 7.8pt/1 var(--f-sans); color: var(--soft); }
.barcode { position: absolute; right: var(--mi); bottom: var(--mb); width: 42mm; height: 28mm; margin: 0; padding: 2mm; background: #fff; display: grid; place-items: center; }
.barcode img { max-width: 100%; max-height: 100%; }

/* ==========================================================================
   인쇄소용 재단 여분 (?bleed=3)
   .page 의 투명 테두리 3mm 가 여분 자리다. 바탕색은 테두리 밑까지 칠해지므로 남색 면은 그대로 이어지고,
   가장자리에 닿는 그림과 띠만 여기서 따로 늘린다. 재단선 안쪽의 글과 그림 위치는 바뀌지 않는다.
   ========================================================================== */
html.bleed .page { box-sizing: content-box; border: var(--bleed) solid transparent; overflow: visible; clip-path: inset(0); }
/* 위아래로는 종이 끝에서 0.1mm 안쪽까지만 늘린다(--edge). 종이 맨 위에 딱 붙은 그림은 인쇄할 때
   앞쪽 종이로 넘어간 것으로 계산되어 통째로 사라지는 일이 있었다. 0.1mm 는 재단 때 잘려 나가는 자리다 */
html.bleed { --edge: calc(.1mm - var(--bleed)); }
/* 전면 그림: 표지, 특집 여는 면, 뒤표지 */
html.bleed .cover .bg, html.bleed .bc .bg { inset: auto; top: var(--edge); left: calc(-1 * var(--bleed)); width: calc(100% + 2 * var(--bleed)); height: calc(100% + 2 * var(--bleed) - .2mm); }
html.bleed .cover .shade, html.bleed .bc .shade, html.bleed .art.full { inset: var(--edge) calc(-1 * var(--bleed)); }
/* 펼침면을 가로지르는 사진: 바깥 여분까지 닿도록 그림 폭(--iw)을 426mm 로 키운다. 접히는 자리는 그대로 그림의 한가운데다 */
html.bleed .proc-pg .pano { left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); }
/* 펼침면을 가로지르는 지도와 노선도: 안쪽(접히는 쪽) 여분에 맞은편 그림이 3mm 이어지게 한다 */
html.bleed .half.a { width: calc(100% + var(--bleed)); }
html.bleed .half.b { left: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed)); }
html.bleed .half > svg { width: 420mm; }
html.bleed .half.b > svg { left: calc(-210mm + var(--bleed)); }
/* 14쪽 위 사진 */
html.bleed .imp-l .art.top { left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); top: var(--edge); height: calc(104mm + var(--bleed) - .1mm); }
html.bleed .imp-l .art.top figcaption { left: calc(var(--mo) + var(--bleed)); }
/* 12–13쪽 아래 남색 띠 */
html.bleed .flowband { left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); bottom: var(--edge); height: calc(69mm + var(--bleed) - .1mm); }
html.bleed .flowband .in { left: calc(var(--mo) + var(--bleed)); right: calc(var(--mi) + var(--bleed)); bottom: calc(19mm + var(--bleed) - .1mm); }
html.bleed .page.right .flowband .in { left: calc(var(--mi) + var(--bleed)); right: calc(var(--mo) + var(--bleed)); }
html.bleed .stations::before { left: -21mm; right: -21mm; }

/* ==========================================================================
   교정 모드 (?only=4,5)
   ========================================================================== */
body.proof { background: #fff; }
.proof .bar, .proof .screen-only { display: none !important; }
.proof .sheets { zoom: 1 !important; gap: 0; padding: 0; align-items: flex-start; }
.proof .spread { box-shadow: none !important; gap: 0 !important; }
.proof .page { box-shadow: none !important; }

/* ==========================================================================
   인쇄: A4 한 쪽씩
   ========================================================================== */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar, .screen-only { display: none !important; }
  .sheets { zoom: 1 !important; display: block; padding: 0; gap: 0; }
  .spread { display: block !important; box-shadow: none !important; }
  .page { box-shadow: none !important; break-after: page; break-inside: avoid; }
  .pcards, .proc-m { display: none !important; }
  .colo-cols a, .srcs a { text-decoration: none; }
}

/* ==========================================================================
   좁은 화면: 흐르는 글
   ========================================================================== */
@media screen and (max-width: 719px) {
  body { background: var(--paper); }
  .bar { gap: 10px; padding: 0 12px; }
  .bar nav a:not(.keep), .bar .issue, .bar .tools .vw { display: none; }
  .sheets { zoom: 1 !important; display: block; padding: 0; gap: 0; }
  .spread { display: block; box-shadow: none; }
  .page { width: auto; height: auto; overflow: visible; font: 400 16px/1.85 var(--f-body); }
  .live, .page.right .live { position: static; display: block; padding: 40px 20px 44px; }
  .folio, .ghost { display: none; }
  .fixed-in-flow { width: 210mm; height: 297mm; overflow: hidden; zoom: var(--mz, .49); font: 400 9.2pt/var(--lh) var(--f-body); }
  .kicker { font-size: 11.5px; margin-bottom: 14px; } .kicker::before { width: 8px; height: 8px; } .kicker i { font-size: 12.5px; }
  .hed-xl { font-size: 46px; } .hed-l { font-size: 32px; } .hed-m { font-size: 24px; } .hed-s { font-size: 19px; }
  .deck { font-size: 17.5px; line-height: 1.6; max-width: none; margin-top: 14px; }
  .cap { font-size: 13.5px; line-height: 1.6; } .lab { font-size: 12.5px; margin-bottom: 8px; }
  .ph { display: block; padding-bottom: 8px; } .ph b { font-size: 20px; display: block; } .ph span { font-size: 13px; line-height: 1.5; text-align: left; } .ph > span { display: block; margin-top: 4px; }
  .bign { font-size: 52px; } .bign small { font-size: 14px; }
  .cols, .op .cols, .ed .cols { column-count: 1; text-align: left; word-break: keep-all; font-size: 16px; line-height: 1.85; }
  .cols p { text-indent: 0; margin: 0 0 1em; }
  .cols h3 { margin: 1.6em 0 .5em; font-size: 18px; line-height: 1.4; }
  .cols h3::before { width: 8px; height: 8px; margin-right: 7px; }
  .dropcap::first-letter { font-size: 58px; line-height: 56px; margin: 4px 8px 0 0; }
  .endmark { width: 8px; height: 8px; }
  .pull { font-size: 22px; line-height: 1.5; margin: 26px 0 22px; padding-top: 14px; border-top-width: 4px; min-height: 0; }
  .art .fpo { font-size: 11px; left: 10px; top: 10px; padding: 5px 7px; }
  .art figcaption { left: 20px; right: 20px; bottom: 10px; font-size: 12.5px; line-height: 1.5; }
  .panel { padding: 18px 16px; }
  /* 편집 노트 · 목차 */
  .ed h2 { font-size: 30px; margin-bottom: 22px; } .ed .sign { font-size: 13px; }
  .nums { margin-top: 34px; } .nums-g div { display: block; padding: 14px 0 16px; } .nums-g b { font-size: 62px; } .nums-g span { font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
  .toc-head h2 { font-size: 64px; } .toc-head span { font-size: 12.5px; line-height: 1.5; } .toc-head { padding-bottom: 14px; }
  .toc li { grid-template-columns: 58px 1fr; padding: 16px 0; } .toc .pn { font-size: 40px; } .toc strong { font-size: 20px; } .toc p { font-size: 14px; line-height: 1.6; } .toc em { display: none; }
  .on-cover { margin-top: 28px; } .on-cover .art { height: 190px; } .on-cover .txt { display: block; margin-top: 12px; } .on-cover .lab { margin-bottom: 6px; }
  /* 지도: 제목 → 지도(옆으로 밀어 보기) → 목록 순서로 다시 놓는다 */
  .half.b { display: none; }
  .half, .map-pg .half, .proc-pg .half { position: static; height: auto; overflow-x: auto; margin: 0; width: auto; }
  .half > svg { position: static; width: 860px; height: auto; }
  .map-pg, .proc-pg { display: flex; flex-direction: column; }
  .map-pg .live, .proc-pg .live, .map-pg.right .live, .proc-pg.right .live { display: contents; }
  .map-pg .top { order: 1; padding: 40px 20px 0; }
  .map-pg .deck::after { content: " 지도는 옆으로 밀어 볼 수 있다."; }
  .map-pg .half { order: 2; margin-top: 22px; }
  .map-pg .map-bottom { order: 3; padding: 0 20px 44px; margin-top: 30px; min-height: 0; }
  .map-pg.right .top { padding-top: 0; }
  .map-legend { justify-items: start; text-align: left; font-size: 13px; line-height: 1.5; gap: 6px; } .map-legend i { width: 9px; height: 9px; margin-right: 6px; }
  .map-info { font-size: 13.5px; line-height: 1.6; padding: 10px 12px; max-width: none; min-height: 46px; }
  .rank { grid-template-columns: 1fr; } .rank li { grid-template-columns: 26px 1fr auto; font-size: 13px; line-height: 1.5; padding: 9px 0; } .rank li b { font-size: 20px; } .rank li strong { font-size: 14.5px; white-space: normal; }
  .rank li em { font-size: 14px; line-height: 1.4; } .rank li em small { font-size: 12px; line-height: 1.4; }
  .stagebar { height: 44px; margin-top: 12px; } .stagebar div { font-size: 24px; padding: 0 6px 5px; } .stagekey { grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; } .stagekey div { font-size: 12.5px; line-height: 1.5; padding-top: 6px; border-top-width: 3px; }
  /* 특집 */
  .op .bar-a { width: 64px; height: 4px; margin-top: 22px; } .op .byline { font-size: 12.5px; display: block; line-height: 1.7; margin: 18px 0 24px; padding-top: 10px; }
  .keys { margin-top: 28px; } .keys-g { grid-template-columns: 1fr; padding-top: 6px; } .keys-g div, .keys-g div + div { padding: 14px 0; border-left: 0; border-bottom: 1px solid #BDB6A8; } .keys-g div:last-child { border-bottom: 0; } .keys-g p { font-size: 15px; line-height: 1.6; margin-top: 6px; }
  .sec-head { padding-top: 12px; margin-bottom: 20px; } .sec-head .kicker { margin-bottom: 8px; }
  .scroll-x { overflow-x: auto; margin: 0 -16px; padding: 0 16px; } .scroll-x svg { min-width: 560px; }
  .dens .ph span::after, .chain .ph span::after { content: " · 옆으로 밀어 보기"; }
  .dens .cap, .chain .cap { column-count: 1; margin-top: 16px; padding-top: 10px; }
  .dens, .chain { margin-top: 6px; }
  /* 공정 */
  .proc-pg .top { order: 1; padding: 40px 20px 0; } .proc-pg.right .top { padding-top: 0; }
  .proc-pg .lede { column-count: 1; font-size: 15.5px; line-height: 1.75; margin-top: 0; } .proc-pg .lede p { margin-bottom: 10px; }
  /* 사진은 잘리지 않게 그림 비율 그대로 놓고, 번호표 일곱 개를 모두 그 위에 올린다 */
  .proc-pg .pano { order: 2; position: relative; top: auto; left: auto; right: auto; height: auto; aspect-ratio: 21 / 9; margin: 22px 0 0; } .proc-pg .pano.half-r { display: none; }
  .proc-pg .pano.half-l img { width: 100%; }
  .mk, .half-r .mk { left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); }
  .mk.flow-only { display: grid; }
  .mk .ref { width: 17px; height: 17px; font: 700 11px/1 var(--f-cond); box-shadow: 0 0 0 1.5px rgba(10,20,32,.7); }
  .mk::after { width: 1px; height: 9px; } .mk::before { width: 4px; height: 4px; margin-bottom: -2px; }
  .proc-pg .pano-cap, .proc-pg.right .pano-cap { order: 3; position: static; text-align: left; margin-top: 10px; padding: 0 20px; }
  .proc-pg.right .pano-cap { order: 9; padding-bottom: 40px; }
  .proc-pg .half { display: none; } .proc-m { order: 4; display: block; width: calc(100% - 40px); max-width: 380px; height: auto; margin: 26px auto 6px; }
  .steps, .steps.s3, .steps.s4 { order: 5; grid-template-columns: 1fr; margin: 18px 20px 0; } .proc-pg.right .steps { margin-bottom: 26px; }
  .step { min-height: 0; padding: 12px 0 14px; border-top-width: 1px; }
  .step strong { font-size: 17px; } .step strong .ref { margin-right: 6px; } .step em { font-size: 12.5px; margin: 4px 0 4px; } .step p { font-size: 14.5px; line-height: 1.65; }
  /* 기계 */
  .mach-pg .top { height: auto; margin-bottom: 24px; }
  .readme { height: auto; display: block; padding: 16px; } .readme p { font-size: 14px; line-height: 1.65; margin-bottom: 8px; } .readme p + p { margin-top: 0; }
  .readme div + div { margin-top: 16px; } .readme .lab { font-size: 12.5px; margin-bottom: 8px; }
  .machs { display: block; } .mach { display: block; margin-bottom: 34px; border-top-width: 2px; } .mach .art { aspect-ratio: 4 / 5; margin-top: 10px; }
  .mach .no { font-size: 14px; margin-top: 12px; gap: 6px; } .mach .no .ref { width: 24px; height: 24px; font-size: 14px; } .mach h3 { font-size: 21px; margin-top: 6px; }
  .mach dl { font-size: 15px; line-height: 1.7; margin-top: 8px; } .mach dt { font-size: 12.5px; margin-top: 10px; } .mach dd { margin-top: 3px; }
  .mach-pg.right .live { padding-top: 0; }
  .flowband { position: static; height: auto; } .flowband .in, .page.right .flowband .in { position: static; display: block; padding: 30px 20px 6px; }
  .mach-pg.right .flowband .in { padding-top: 0; padding-bottom: 34px; }
  .flowband h3 { font-size: 21px; margin-bottom: 20px; gap: 8px; } .flowband h3 .ref { width: 26px; height: 26px; font-size: 15px; } .mach-pg.right .flowband h3 { display: none; }
  .stations { grid-template-columns: 1fr; gap: 0; } .stations::before { left: 9px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .station { padding: 0 0 20px 38px; } .station::before { width: 21px; height: 21px; font-size: 12px; box-shadow: 0 0 0 3px var(--night); } .station strong { font-size: 16px; } .station p { font-size: 14px; line-height: 1.6; margin-top: 3px; }
  .flowband .side { font-size: 14px; line-height: 1.7; }
  /* 인류와 지구 */
  .imp-l .art.top { position: relative; height: 220px; } .imp-l .hed-l { margin-bottom: 20px; }
  .cols sup, .cite { font-size: 11px; vertical-align: 5px; }
  .stats { margin-top: 28px; padding: 18px 16px; } .stats-g { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding-top: 14px; } .stats-g div + div { padding-left: 0; border-left: 0; } .stats-g span { font-size: 13px; line-height: 1.55; margin-top: 4px; }
  .stats .cap { font-size: 12px; line-height: 1.55; margin-top: 16px; padding-top: 10px; } .stats .cap sup { font-size: 10px; vertical-align: 4px; }
  .uses { grid-template-columns: 1fr; gap: 26px; } .use { border-top-width: 4px; padding-top: 12px; } .use h3 { font-size: 26px; } .use p { font-size: 15px; line-height: 1.7; margin-top: 8px; }
  .matrix { margin-top: 30px; } .mx { grid-template-columns: 84px repeat(4, 1fr); } .mx > * { padding: 9px 0; font-size: 13px; line-height: 1.4; } .mx .h { font-size: 11.5px; line-height: 1.35; } .mx .r { font-size: 14px; }
  .mx .c .big { width: 17px; height: 17px; } .mx .c .mid { width: 12px; height: 12px; border-width: 2px; } .mx .c .non { width: 12px; height: 2px; }
  .mx-key { display: grid; gap: 4px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; } .mx-key .big { width: 12px; height: 12px; } .mx-key .mid { width: 10px; height: 10px; border-width: 2px; } .mx-key .non { width: 12px; height: 2px; vertical-align: 4px; }
  .imp-r .sec-head + .sec-head, .imp-r .sec-b { margin-top: 40px; }
  .conds { display: block; margin-top: 4px; } .conds li { grid-template-columns: 34px 1fr; padding: 14px 0 16px; border-top-width: 1px; } .conds li::before { font-size: 32px; } .conds strong { font-size: 17px; line-height: 1.45; } .conds p { font-size: 15px; line-height: 1.7; margin-top: 4px; }
  .conds li.fin { padding: 18px 16px; margin-top: 8px; } .conds li.fin p { font-size: 19px; line-height: 1.55; }
  .imp-r .live { padding-top: 0; }
  /* 프로젝트 파일 */
  .file-pg .top { height: auto; margin-bottom: 20px; } .rows-h, .rows { display: none; } .pcards { display: block; }
  .pcard { border-bottom: 1px solid var(--rule); } .pcard:first-child { border-top: 2px solid var(--ink); }
  .pcard summary { list-style: none; cursor: pointer; position: relative; padding: 13px 30px 13px 38px; line-height: 1.45; font-family: var(--f-sans); }
  .pcard summary::-webkit-details-marker { display: none; }
  .pcard summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font: 400 22px/1 var(--f-sans); color: var(--amber-ink); }
  .pcard[open] summary::after { content: "−"; }
  .pcard summary i { position: absolute; left: 0; top: 13px; font: 400 20px/1 var(--f-mast); font-style: normal; }
  .pcard summary b { display: block; font-size: 16px; font-weight: 700; } .pcard summary span { font-size: 13.5px; color: var(--ink2); }
  .pcard dl { margin: 0 0 14px 38px; display: grid; grid-template-columns: 64px 1fr; gap: 5px 10px; font: 400 14px/1.6 var(--f-sans); } .pcard dt { color: var(--ink2); } .pcard dd { margin: 0; overflow-wrap: anywhere; }
  .file-note { height: auto; display: block; padding: 16px; } .file-note > div + div { margin-top: 16px; }
  .fstage li { font-size: 13.5px; line-height: 1.6; padding: 7px 0; gap: 0 10px; } .fstage b { font-size: 19px; }
  .src-wrap { margin-top: 28px; } .src-wrap .ph { margin-bottom: 4px; }
  .file-pg.right .live { padding-top: 0; }
  /* 용어 풀이 */
  .gloss-pg .top { height: auto; margin-bottom: 22px; }
  .gloss { display: block; } .gloss .lab { margin-top: 26px; padding: 10px 0 8px; border-top-width: 2px; font-size: 12.5px; } .gloss .lab:first-child { margin-top: 0; }
  .gloss > div { padding: 12px 0 14px; } .gloss h3 { font-size: 17px; } .gloss h3 small { font-size: 12.5px; margin-left: 6px; } .gloss > div p { font-size: 15px; line-height: 1.7; margin-top: 4px; }
  /* 판권 */
  .colo .hed-l { margin-bottom: 24px; } .colo-cols { column-count: 1; font-size: 14.5px; line-height: 1.7; } .colo-cols section { margin-bottom: 22px; } .colo-cols .lab { padding-top: 10px; margin-bottom: 8px; }
  .colo-cols ul { padding-left: 18px; } .srcs { column-count: 1; font-size: 13.5px; line-height: 1.7; padding-left: 0 !important; } .srcs li { grid-template-columns: 26px 1fr; }
  .colo-foot { margin-top: 30px; padding-top: 12px; } .colo-foot .wm { font-size: 23vw; } .colo-foot p { font-size: 12.5px; display: block; line-height: 1.7; margin-top: 10px; } .colo-foot p > span { display: block; }
}