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

:root{
  --bg:#F5F3EE; --surface:#FBFAF6; --sunk:#EDEAE1;
  --ink:#1A1814; --ink-2:#4E4A42; --ink-3:#8A8477;
  --line:#DDD8CD; --line-2:#BFB8A8;
  --rule:#1A1814;   /* 구조를 세우는 강한 선(제호·구획·카드). 라이트는 먹색 */
  --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;
    --rule:#756E60;  /* 다크: 글자는 밝아야 하지만 선까지 글자 밝기면 괘선이 튄다(2026-09-23 닉님) */
    --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;
  --rule:#756E60;  /* 다크: 글자는 밝아야 하지만 선까지 글자 밝기면 괘선이 튄다(2026-09-23 닉님) */
  --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 56px;
  /* 푸터를 화면 맨 아래에 붙인다. 글이 짧은 날 푸터가 화면 중간에 떠 있었다. */
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
}
body > .wrap{flex:1 0 auto; width:100%}
.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 760: 글을 읽는 폭. 기사 본문·표·도표. 한국어 16.5px 에서 한 줄 약 45자.
   --wide 1280: 페이지 폭. 제호·푸터·첫 화면 격자·상세의 목차|본문|최근 글 3단.
   괘선은 화면 끝이 아니라 --wide 까지(2026-09-23 닉님. 09-22 '선만 풀폭' 대체).
   주제가 늘어나도 첫 화면은 격자의 줄이 늘 뿐 모양이 바뀌지 않는다. */
:root{--read:760px; --wide:1280px; --gut:20px}
.wrap{max-width:var(--wide); margin-inline:auto; padding-inline:var(--gut)}
.col{max-width:var(--read); margin-inline:auto}
/* 여백은 바깥(.bar)에, 괘선은 안쪽 요소에. 그래야 괘선 끝이 본문 글자 끝과 맞는다. */
.bar{padding-inline:var(--gut)}
.bar > *{max-width:calc(var(--wide) - 2 * var(--gut)); margin-inline:auto}

/* ── 제호 ─────────────────────────── */
.mast{display:flex; align-items:baseline; justify-content:space-between; gap:8px 18px; flex-wrap:wrap;
  padding-block:26px 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-about{margin-left:auto; color:var(--ink-3)}
.mast .cat{color:var(--acc); font-weight:600}
.mast .cat::after{content:" · "; color:var(--ink-3); font-weight:400}
@media (max-width:560px){ .mast .cat{display:none} }  /* 좁은 화면은 한 줄만. 분류 문구는 공유 카드 · 소개에 있다 */
.about-page .part{margin-top:34px} .about-page .lab{margin:0 0 10px}
.about-page .part p{font-size:16px; line-height:1.75; margin:0 0 12px}
.about-stats td.k{white-space:nowrap; font-weight:600; width:1%}
/* 판 정보: 오늘 판 · 갱신 · 다음 판. 몇 건 냈는지(만드는 쪽 언어) 대신 언제 다시 오면 되는지. */
.edition{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin:0; font-size:12.8px; color:var(--ink-3)}
.edition .ed-d{font-family:"Gowun Batang","Noto Serif KR",serif; font-size:14.5px; font-weight:700; color:var(--ink)}
/* 주제 띠. 주제가 늘면 옆으로 늘고, 좁은 화면에서는 가로로 민다. 10개 안팎까지 버틴다. */
.topics{display:flex; gap:2px 22px; overflow-x:auto; white-space:nowrap; scrollbar-width:none;
  padding-block:9px 10px; border-top:1px solid var(--line); border-bottom:3px double var(--rule)}
.topics::-webkit-scrollbar{display:none}
.topics a{font-size:14.5px; color:var(--ink-2); padding-block:2px}
.topics a:hover{color:var(--ink); text-decoration:none}
.topics a[aria-current]{color:var(--acc); font-weight:600}
.draft{margin:12px 0 0; font-size:12.5px; color:var(--ink-3)}

/* ── 기사 3단: 목차 | 본문 | 같은 주제 최근 글 ───── */
/* 넓은 화면 3단, 중간 2단(오른쪽 칸은 본문 아래로), 좁은 화면 1단(목차는 위에 붙는 가로 띠).
   상세와 주제 목록이 같은 골격을 쓴다. 페이지마다 본문 시작점이 달라 어긋나 보였다(2026-09-23). */
.doc-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:0 44px; justify-content:center}
.doc-grid > .doc{margin:0; width:100%}
.toc,.rail{font-size:13.5px; line-height:1.5}
.toc-h{margin:0 0 10px; font-size:11.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em}
.toc ol,.rail ol{list-style:none; margin:0; padding:0}
.toc li a{display:block; padding:4px 0; color:var(--ink-2)}
.toc li a:hover{color:var(--acc); text-decoration:none}
.toc ol ol{margin:0 0 4px 11px; padding-left:10px; border-left:1px solid var(--line)}
.toc ol ol a{font-size:12.8px; color:var(--ink-3); padding:3px 0}
.rail li a{display:block; padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-2)}
.rail li a:hover{text-decoration:none}
.rail li a:hover .r-t{color:var(--acc)}
.rail li a[aria-current] .r-t{color:var(--ink); font-weight:600}
.rail li a[aria-current]{box-shadow:inset 2px 0 0 var(--acc); padding-left:10px}
.r-d{display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}
.r-t{display:block; margin-top:2px; font-size:13.8px; line-height:1.5}
.r-all{display:inline-block; margin-top:12px; font-size:13px; font-weight:600}
.maker{margin-top:32px; padding-top:14px; border-top:1px solid var(--line)}
.rail .maker:first-of-type{margin-top:40px}  /* 최근 글 · 발행 목록과 아래 블록 사이를 띄운다(09-30 닉님: 다닥다닥) */
/* 위계: 1차 = '전체 보기'(강조색 · 굵게), 2차 = 받아보기 · 만든 곳(옅은 강조색 · 보통 굵기). 같은 색 계열이라 링크로 읽히고, 옅어서 1차와 다투지 않는다 */
.maker .about a.soft{color:color-mix(in srgb, var(--acc) 62%, var(--ink-3)); font-weight:500}
.maker .about a.soft:hover{color:var(--acc); text-decoration:none}
.home-sub{display:grid; grid-template-columns:1fr 1fr; gap:0 48px; margin-top:40px}
@media (max-width:640px){ .home-sub{grid-template-columns:1fr} }
.report{margin-top:38px; padding-top:16px; border-top:1px solid var(--line-2)}
.report summary{cursor:pointer; font-size:13.8px; color:var(--ink-2); font-weight:600}
.rp{margin-top:14px; padding:16px 18px; border:1px solid var(--line); background:var(--sunk); font-size:14px; line-height:1.65; overflow-x:auto}
.rp p{margin:0 0 8px} .rp ul{margin:0 0 10px; padding-left:20px}
.rp table{margin:4px 0 12px; font-size:13.4px}
.rp td,.rp th{border-color:var(--line) !important}  /* 붙여 넣을 때는 인라인 #ccc, 화면에서는 테마 괘선 */
.rp-copy{margin-top:10px; font:inherit; font-size:13px; font-weight:600; padding:6px 14px; border:1px solid var(--rule); background:var(--bg); color:var(--ink); cursor:pointer}
[id]{scroll-margin-top:18px}
.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px}
.prevnext a{display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px solid var(--line); background:var(--surface)}
.prevnext a:hover{border-color:var(--line-2); text-decoration:none}
.pn-next{text-align:right}
.pn-l{font-size:12px; font-weight:600; color:var(--acc)}
.pn-t{font-family:"Gowun Batang","Noto Serif KR",serif; font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.45}
.pn-d{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}
@media (max-width:560px){ .prevnext{grid-template-columns:1fr} .pn-next{text-align:left} }
/* JS 가 있을 때만: 목차에서 지금 읽는 곳 */
.toc a.on{color:var(--acc); font-weight:600}
@media (min-width:980px){
  /* 2단일 때는 헤더 왼쪽 끝에 목차를 맞춘다 */
  .doc-grid{grid-template-columns:180px minmax(0,var(--read)); justify-content:start}
  .toc,.rail{position:sticky; top:24px; align-self:start; max-height:calc(100vh - 48px); overflow:auto; padding-top:34px}
  .rail{grid-column:2; position:static; max-height:none; padding-top:48px}
}
@media (min-width:1240px){
  .doc-grid{grid-template-columns:180px minmax(0,var(--read)) 220px; justify-content:space-between}
  .rail{grid-column:auto; position:sticky; max-height:calc(100vh - 48px); padding-top:34px}
}
@media (max-width:979px){
  /* 좁은 화면: 목차는 본문 위에 붙는 가로 띠. 하위 목차는 뺀다. */
  .toc{position:sticky; top:0; z-index:2; margin-inline:calc(-1 * var(--gut)); padding:8px var(--gut);
    background:var(--bg); border-bottom:1px solid var(--line); overflow-x:auto}
  .toc .toc-h, .toc ol ol{display:none}
  .toc:empty{display:none}  /* 기록이 없는 주제 목록: 빈 띠가 남지 않게 */
  .toc > ol{display:flex; gap:18px; white-space:nowrap}
  .toc li a{padding:4px 0}
  [id]{scroll-margin-top:56px}
  .rail{padding-top:40px}
}

/* 정정 · 안내. 부제 바로 아래. 해석이 아니라 사실 장치라 산세리프. 게재한 숫자는 그대로 두고 여기서 바로잡는다 */
.corr{margin:20px 0 0; padding:12px 16px 14px; border-top:2px solid var(--rule); background:var(--sunk); font-size:14.3px}
.corr-h{display:flex; justify-content:space-between; gap:12px; margin:0 0 8px; font-weight:700; color:var(--ink)}
.corr-h span{font-weight:400; font-size:12.5px; color:var(--ink-3)}
.corr ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.corr li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; line-height:1.6; color:var(--ink-2)}
.corr .ck{font-size:12px; color:var(--acc); padding-top:2px}
.cmark{margin-left:4px; color:var(--acc); font-weight:700; text-decoration:none}

/* ── 기사 ─────────────────────────── */
.doc{padding-block:30px 0}
.kicker{display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; font-size:12.5px; color:var(--ink-3); margin-bottom:13px}
.kicker > span{white-space:nowrap}  /* 휴대폰에서 '시장·경제' '주간' 이 글자 중간에서 꺾이던 것(10/2) */
.tools{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:14px 0 0; font-size:13px}
.tools .tool{font:inherit; font-size:13px; background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3); text-decoration:none}
.tools .rp-go{color:color-mix(in srgb, var(--acc) 62%, var(--ink-3)); font-weight:500}
.tools .tool:hover{color:var(--acc)}
.nf{max-width:var(--read); padding:48px 0 8px}
.nf h1{font-family:"Gowun Batang","Noto Serif KR",serif; font-size:26px; line-height:1.35; margin:0 0 12px}
.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}

/* 한눈에 */
.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(--rule)}
.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}

/* 관점 — 명조 본문, 좌측 먹적색 선 */
/* 세로선은 뺐다. 구획 머리가 이미 '여기부터 해석'이라 말하고, 색 막대는 흔한 템플릿 장치로 읽힌다.
   대신 첫 문단을 리드로 키워 판단의 핵심이 먼저 읽히게 한다(2026-09-23). */
.view-body{padding:3px 0}
.view-body.lede > p:first-child{font-size:19.5px; line-height:1.75; color:var(--ink)}
.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-size:11.5px; font-weight:700; letter-spacing:.04em;
  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-size:12px; font-weight:500; 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-size:11.5px; font-weight:500;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:0 12px 8px 0;
  border-bottom:1px solid var(--rule)}
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.txt{white-space:nowrap}
table.data td.k{white-space:nowrap}
table.data td.up{color:var(--up)} table.data td.down{color:var(--down)}
/* 좁은 화면: 표를 줄 카드로. 한 줄에 항목·값·변화, 아랫줄에 메모.
   가로 스크롤 안에 메모를 숨기지 않는다(2026-09-23, 390px 에서 메모 열이 잘렸다). */
@media (max-width:560px){
  table.data{min-width:0}
  table.data thead{display:none}
  table.data tr{display:grid; column-gap:12px; row-gap:3px; align-items:baseline;
    padding:11px 0; border-bottom:1px solid var(--line)}
  table.data.metrics tr{grid-template-columns:1fr auto auto}
  table.data.movers tr{grid-template-columns:auto 1fr auto}
  table.data td{border:0; padding:0}
  table.data td.memo{grid-column:1/-1; font-size:13.5px; line-height:1.55; color:var(--ink-3)}
}

/* 일정 */
.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}

/* ── 첫 화면 ───────────────────────── */
/* 주제마다 같은 크기. 첫 기사만 크게 두면 발행 순서가 중요도처럼 읽힌다. */
.sec{margin:34px 0 0; font-family:"Gowun Batang","Noto Serif KR",serif; font-size:19px; font-weight:700}
.day .story{margin-top:14px}
.headlines ol{list-style:none; margin:12px 0 0; padding:0; border-top:2px solid var(--rule)}
.headlines li{display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:4px 18px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line)}
.hl-t{font-size:12.5px; font-weight:600; color:var(--acc)}
.headlines a{font-family:"Gowun Batang","Noto Serif KR",serif; font-size:17px; font-weight:700; color:var(--ink)}
.hl-s{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
@media (max-width:560px){ .headlines li{grid-template-columns:1fr} }
.soon{margin:28px 0 0; font-size:13.5px; color:var(--ink-3)}
.stories{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:0 40px}
.story{position:relative; display:flex; flex-direction:column; padding-block:24px 26px; border-top:2px solid var(--rule); margin-top:22px}
.story h2{margin:0; font-family:"Gowun Batang","Noto Serif KR",serif;
  font-size:clamp(21px,2.2vw,24px); line-height:1.36; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
.story h2 a{color:inherit}
/* 카드 어디를 눌러도 전문으로 간다. JS 없이 제목 링크를 카드 전체로 넓힌다. */
.story h2 a::after{content:""; position:absolute; inset:0}
.story:hover h2 a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
.story .deck{margin-top:10px; padding-bottom:14px; font-size:16px; line-height:1.65}
.story .glance-wrap{margin-top:14px}
.story .glance-wrap .lab-s{display:none}
.story .glance li{font-size:14.3px; line-height:1.62}
.go{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin:auto 0 0; padding-top:16px}
.go-l{color:var(--acc); font-weight:600; font-size:14.5px}
.go-s{color:var(--ink-3); font-size:12.8px}
.none-yet p{margin:0; color:var(--ink-3); font-size:15px}
.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}
.doc-grid > .stream{margin:0; width:100%}
.month{margin-top:30px}
.mh{display:flex; align-items:baseline; gap:10px; margin:0 0 4px; padding-bottom:8px; border-bottom:2px solid var(--rule);
  font-family:"Gowun Batang","Noto Serif KR",serif; font-size:18px; font-weight:700}
.mh span{font-family:"IBM Plex Sans KR",sans-serif; font-size:12.5px; font-weight:500; color:var(--ink-3)}
.about{margin:0 0 10px; font-size:13.5px; color:var(--ink-2); line-height:1.6}
.lens,.when{list-style:none; margin:0 0 22px; padding:0}
.lens li{padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink)}
.when li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13.3px; color:var(--ink-2)}
.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}
.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)}


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

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