/* Prism 스타일시트 v2 — 신문 (2026-09-22 닉님 확정)
   스터디 site/drafts/2026-09-22-concepts.html 의 B안. 워드마크는 ②(명조).
   명조 제목·명조 관점 / 신문지 바탕 / 먹빛 괘선 / 강조는 먹적색 하나.
   다크는 순검정이 아니라 따뜻한 먹색 — 신문지 톤을 밤에도 유지한다.
   런타임 JS 0. 브랜드 v2 팔레트는 쓰지 않는다(제품 자체 팔레트). */

:root{
  --bg:#F5F3EE; --surface:#FBFAF6; --sunk:#EDEAE1;
  --ink:#1A1814; --ink-2:#4E4A42; --ink-3:#8A8477;
  --line:#DDD8CD; --line-2:#BFB8A8;
  --acc:#8C2F22; --acc-soft:#F3E7E3;
  --up:#8C2F22; --down:#2C5578;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16140F; --surface:#1C1A14; --sunk:#221F18;
    --ink:#EDE8DC; --ink-2:#B5AE9E; --ink-3:#7E7768;
    --line:#2C2921; --line-2:#443F34;
    --acc:#D9705E; --acc-soft:#2A1D18;
    --up:#D9705E; --down:#8AAFCF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16140F; --surface:#1C1A14; --sunk:#221F18;
  --ink:#EDE8DC; --ink-2:#B5AE9E; --ink-3:#7E7768;
  --line:#2C2921; --line-2:#443F34;
  --acc:#D9705E; --acc-soft:#2A1D18;
  --up:#D9705E; --down:#8AAFCF;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16.5px; line-height:1.78; word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  padding-block:0 84px;
}
.serif{font-family:"Gowun Batang","Noto Serif KR",serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:2px}
b,strong{font-weight:600; color:var(--ink)}

/* 폭은 하나다. 제호·본문·표·도표·푸터가 전부 --read.
   대신 제호와 푸터의 괘선만 화면 끝까지 간다(신문 제호선).
   좁은 본문이 빈 배경에 떠 있지 않고 지면 위에 놓이게 하려는 것이다.
   --read 760 = 한국어 16.5px 에서 한 줄 약 45자. */
:root{--read:760px; --gut:20px}
.wrap,.col{max-width:var(--read); margin-inline:auto}
.wrap{padding-inline:var(--gut)}
/* 선은 화면 끝까지, 내용은 본문과 같은 자리에.
   패딩을 .wrap 과 같은 안쪽 요소에 둬야 좌우가 정확히 맞는다. */
.bar > *{max-width:var(--read); margin-inline:auto; padding-inline:var(--gut)}

/* ── 제호 ─────────────────────────── */
.mast{display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-block:28px 12px}
.mast .brand{display:flex; align-items:baseline; gap:13px; min-width:0}
/* 제호는 화면을 따라 줄어야 한다. 고정값이면 모바일에서 기사 제목(28px)과
   같은 크기가 돼 브랜드가 기사보다 커 보인다. */
.mast h1{margin:0; font-family:"Gowun Batang","Noto Serif KR",serif;
  font-size:clamp(20px,4.4vw,27px); font-weight:700; letter-spacing:-.012em}
.mast h1 a{color:inherit}
.mast .tag{font-size:13px; color:var(--ink-3)}
.nav{display:flex; gap:3px; flex-wrap:wrap}
.nav a{font-size:14px; color:var(--ink-2); padding:4px 10px; border-radius:3px}
.nav a:hover{background:var(--sunk); text-decoration:none}
.nav a[aria-current]{color:var(--acc); font-weight:600}
.mast-bar{border-bottom:3px double var(--ink)}
.draft{margin:12px 0 0; font-size:12.5px; color:var(--ink-3)}

/* ── 기사 ─────────────────────────── */
.doc{padding-block:30px 0}
.kicker{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-3); margin-bottom:13px}
.kicker .topic{color:var(--acc); font-weight:600; letter-spacing:.04em}
.kicker .sep{width:3px; height:3px; border-radius:50%; background:var(--line-2)}
.headline{margin:0; font-family:"Gowun Batang","Noto Serif KR",serif;
  font-size:clamp(28px,4.2vw,40px); line-height:1.24; font-weight:700;
  letter-spacing:-.012em; text-wrap:balance}

/* 부제(deck) — 헤드라인 바로 아래, 라벨 없이. 이 기사의 결론 한 문장.
   라벨을 붙이면 헤드라인과 끊겨 '이게 뭐지'가 먼저 온다. */
.deck{margin:16px 0 0; padding:0 0 20px; border-bottom:1px solid var(--line-2);
  font-family:"Gowun Batang","Noto Serif KR",serif; font-size:clamp(20px,2.6vw,23px);
  line-height:1.52; color:var(--ink-2)}

/* 작은 라벨 — 한눈에 · 요약 · 그룹 제목이 공유한다 */
.lab-s{margin:0 0 13px; font-size:13px; font-weight:700; color:var(--acc); letter-spacing:.05em}
.glance-wrap{margin-top:30px}
.summary{margin:0; font-size:16px; color:var(--ink-2)}

/* 한눈에 */
.glance{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.glance li{position:relative; padding-left:19px; font-size:15.4px; color:var(--ink-2)}
.glance li::before{content:"·"; position:absolute; left:5px; top:-.1em; color:var(--acc); font-size:19px}

/* 구획 — 사실 / 관점 / 남은 의문 */
/* 위계는 단계마다 다른 장치를 쓴다. 전부 가로선이면 1단과 3단이 구분되지 않는다.
   구획 = 굵은 선 / 그룹 = 색 + 공백 / 항목 = 가는 선 */
.part{margin-top:54px}
.part-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:9px; margin-bottom:22px; border-bottom:2px solid var(--ink)}
.part-head .lab{font-family:"Gowun Batang","Noto Serif KR",serif; font-size:19px;
  font-weight:700; color:var(--ink); letter-spacing:-.01em; white-space:nowrap}
.part-head .hint{font-size:12.5px; color:var(--ink-3); text-align:right}

.group{margin-bottom:36px}
.group:last-child{margin-bottom:0}
/* 그룹 제목은 선을 쓰지 않는다. 구획이 이미 굵은 선을 썼고,
   바로 아래 또 선을 그으면 15px 간격으로 두 줄이 겹쳐 사다리가 된다. */
.group > h3{margin:0 0 13px; font-size:13px; font-weight:700; color:var(--acc);
  letter-spacing:.05em}
.fact{padding:15px 0; border-top:1px solid var(--line)}
.fact:first-of-type{border-top:0; padding-top:0}
.fact h4{margin:0 0 7px; font-size:16.8px; line-height:1.45; font-weight:600; letter-spacing:-.008em}
.fact p{margin:0 0 9px; color:var(--ink-2); font-size:15.4px}
.fact p:last-child{margin-bottom:0}
.refs{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:9px; font-size:13px}
.refs a{color:var(--ink-3)}
.refs a:hover{color:var(--acc)}
.refs a::before{content:"↗"; margin-right:4px; opacity:.6}

/* 관점 — 명조 본문, 좌측 먹적색 선 */
.view-body{border-left:2px solid var(--acc); padding:3px 0 3px 18px}
.view-body h4{margin:0 0 10px; font-family:"Gowun Batang",serif; font-size:19px; line-height:1.45; font-weight:700}
.view-body p{margin:0 0 13px; font-family:"Gowun Batang","Noto Serif KR",serif;
  font-size:16.4px; line-height:1.86; color:var(--ink-2)}
.view-body p:last-child{margin-bottom:0}

/* 남은 의문 */
.open-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.open-list li{padding-top:12px; border-top:1px dotted var(--line-2); font-size:15.3px; color:var(--ink-2)}
.open-list li:first-child{border-top:0; padding-top:0}
.open-empty{margin:0; padding-top:12px; border-top:1px dotted var(--line-2);
  font-size:14.3px; color:var(--ink-3)}
/* 사실 구획 안의 '없음' 메시지. 점선은 '남은 의문'의 장치라 여기 쓰지 않는다. */
.none{margin:0; font-size:14.4px; color:var(--ink-3)}

/* 용어 괄호 풀이 */
.term{border-bottom:1px dotted var(--line-2)}
.term i{font-style:normal; color:var(--ink-3); font-size:.92em}

/* 개념 (긴 풀이) */
.learn{margin-top:30px; padding:19px 21px; background:var(--sunk)}
.learn .lab{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc); font-weight:600}
.learn h4{margin:7px 0 10px; font-family:"Gowun Batang",serif; font-size:18.5px; font-weight:700}
.learn p{margin:0 0 10px; font-size:15.3px; color:var(--ink-2)}
.learn p:last-child{margin-bottom:0}

/* 도표 */
figure.fig{margin:40px 0 0}
/* 상단 선은 두지 않는다. SVG 가 그룹마다 선을 그려 바로 아래에서 겹친다. */
figure.fig .plate{border-bottom:1px solid var(--line-2); padding:0 0 14px}
figure.fig svg{display:block; width:100%; height:auto; color:var(--ink)}
figure.fig figcaption{margin-top:11px; font-size:13.2px; color:var(--ink-3)}
.fig-l{font-size:13px; fill:var(--ink-2)}
.fig-v{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500; fill:var(--ink)}
.fig-g{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; fill:var(--ink-3)}
.slot{margin:40px 0 0; padding:24px 20px; border:1px dashed var(--line-2); text-align:center;
  color:var(--ink-3); font-size:13.8px}
.slot b{display:block; color:var(--ink-2); font-weight:600; font-size:14.3px; margin-bottom:5px}

/* 지표 */
.tw{overflow-x:auto}
table.data{border-collapse:collapse; width:100%; min-width:460px; font-size:14.3px}
table.data th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:0 12px 8px 0;
  border-bottom:1px solid var(--ink)}
table.data td{padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2)}
table.data td:first-child{color:var(--ink); font-weight:500}
table.data td.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
table.data td.up{color:var(--up)} table.data td.down{color:var(--down)}

/* 일정 */
.cal{list-style:none; margin:0; padding:0}
.cal li{display:flex; gap:14px; padding:5px 0; font-size:14.7px; color:var(--ink-2)}
.cal .d{font-family:"IBM Plex Mono",monospace; color:var(--acc); min-width:56px; white-space:nowrap}

/* 출처 */
.sources{margin-top:38px; padding-top:16px; border-top:1px solid var(--line-2)}
.sources summary{cursor:pointer; font-size:13.8px; color:var(--ink-2); font-weight:500}
.sources ol{margin:13px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.sources li{font-size:13.4px; color:var(--ink-3)}
.disclaimer{margin-top:22px; font-size:12.7px; color:var(--ink-3); line-height:1.65}

/* ── 첫 화면 ───────────────────────── */
.lead{padding-block:34px 30px; border-bottom:2px solid var(--ink)}
.lead h2{margin:0; font-family:"Gowun Batang","Noto Serif KR",serif;
  font-size:clamp(28px,4.8vw,44px); line-height:1.22; font-weight:700;
  letter-spacing:-.012em; text-wrap:balance}
.lead h2 a{color:inherit}
.lead .deck{margin-top:16px}
.rest{display:grid; gap:0 34px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); padding-block:4px 0}
.rest article{padding-block:24px; border-bottom:1px solid var(--line)}
.rest .kicker{margin-bottom:9px}
.rest h3{margin:0 0 8px; font-family:"Gowun Batang",serif; font-size:20px; line-height:1.42; font-weight:700}
.rest h3 a{color:inherit}
.rest p{margin:0; font-size:14.8px; color:var(--ink-2)}
.empty{padding:66px 0; max-width:50ch}
.empty h2{margin:0 0 12px; font-family:"Gowun Batang",serif; font-size:27px; font-weight:700}
.empty p{margin:0 0 8px; color:var(--ink-2)}

/* ── 스트림 ───────────────────────── */
.stream{padding-block:30px 0}
.stream > h2{margin:0 0 4px; font-family:"Gowun Batang",serif; font-size:26px; font-weight:700}
.stream > .sub{margin:0 0 28px; color:var(--ink-3); font-size:14.3px}
.week{margin-bottom:32px}
.week > .wk{display:flex; align-items:center; gap:10px; margin-bottom:5px}
.week > .wk span{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.09em;
  color:var(--ink-3); white-space:nowrap}
.week > .wk .rule{flex:1; height:1px; background:var(--line)}
.entry{display:flex; gap:17px; padding:15px 0; border-bottom:1px solid var(--line)}
.entry .when{font-family:"IBM Plex Mono",monospace; font-size:12.3px; color:var(--ink-3);
  min-width:74px; padding-top:5px; white-space:nowrap}
.entry .body{min-width:0}
.entry h3{margin:0 0 6px; font-family:"Gowun Batang",serif; font-size:18.5px; line-height:1.45; font-weight:700}
.entry h3 a{color:inherit}
.entry p{margin:0; font-size:14.7px; color:var(--ink-2)}

/* ── 다이제스트 ────────────────────── */
.themes{display:flex; flex-wrap:wrap; gap:7px; margin:24px 0 0}
.theme{background:var(--sunk); border-radius:3px; padding:4px 10px; font-size:13.3px; color:var(--ink-2)}
.cards{display:grid; gap:0 30px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:26px}
.card{padding:16px 0; border-top:1px solid var(--line-2)}
.card h4{margin:0 0 10px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--acc); font-weight:600}
.card ul{margin:0; padding-left:17px; display:flex; flex-direction:column; gap:8px}
.card li{font-size:14.9px; color:var(--ink-2)}
.event{padding:15px 0; border-top:1px solid var(--line)}
.event:first-of-type{border-top:0}
.event .when{font-family:"IBM Plex Mono",monospace; font-size:12.3px; color:var(--acc)}
.event h4{margin:3px 0 6px; font-size:17px; font-weight:600; line-height:1.45}
.event p{margin:0; font-size:15.2px; color:var(--ink-2)}

/* ── 꼬리 ─────────────────────────── */
.foot-bar{margin-top:52px; border-top:3px double var(--ink); padding-block:18px 0}
.foot{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  color:var(--ink-3); font-size:12.8px}

@media (prefers-reduced-motion:no-preference){
  .doc,.lead,.stream{animation:rise .3s ease-out}
  @keyframes rise{from{opacity:.001; transform:translateY(5px)} to{opacity:1; transform:none}}
}