`
왜 뺐는가. 640 판 도해는 파일마다 아래 네 줄을 손으로 적고 있었고, 그래서 판마다
여백이 조금씩 달랐다. 판형은 그림의 내용이 아니라 **지면의 성질**이므로 지면 쪽에 있어야
한다. p05·p06 을 처음부터 다시 짜는 김에 뺐다 (Ryan 2026-09-09 · 「새 이름으로 뺀다」).
⚠️ 배경·글자색은 여기 안 적는다 — 지면 클래스(`.hanji` 등)가 이미 준다.
두 곳에서 주면 갈라진다.
⚠️ 폭을 바꾸려면 여기 하나만 고친다. 다만 640 은 **폰 글자 크기와 맞바꿈**이라
(640→780 이면 작은 글자가 8.4pt→6.9pt) 숫자를 만지기 전에 활자 눈금을 같이 볼 것. */
.diagram.pane640 {
width: 640px;
box-sizing: border-box;
/* 🔴 2026-09-22 저녁 — 하단 48(도장 예약)·좌우 30 → **20**. Ryan *"도장 때문에 추가로 어셋 길이를 늘리는 것은 최대한 지양해줘"* ·
*"우상단이던 우하던이던 우측 모서리에 넣어줘"*. 이제 `hanji.mount` 가 **비어 있는 오른쪽 모서리를 스스로 고른다** —
그래서 하단을 도장 높이만큼 비워 둘 이유가 없다. 좌우도 20 으로 좁혀 글 폭을 12px 늘렸다.
실측(62장) — 접힘 355 → 343 · 세로 합 64,533 → 62,167px(-2,366). 넘침 0. 폭 680 안은 넘침 124 라 버렸다(판형은 640). */
padding: 44px 20px 20px;
} /* 서체는 지면(.hanji)이 준다 — 여기 적으면 두 곳 */
.diagram.light {
--paper: #faf8f4;
--paper-sunk: #f1ece2;
--ink: #1a1815;
--ink-2: #5b554c;
--ink-3: #6e6659;
--rule: #dcd5c8;
--rule-strong: #a8a093;
--accent: #b8341c;
--accent-ink: #b8341c;
--accent-sheet: #f6e3de;
--dgm-cheap: #0f766e; /* 싼 쪽·유리한 쪽 — 밝은 판에서 읽히는 청록 */
--dgm-costly: #b91c1c; /* 비싼 쪽·불리한 쪽 */
--mark-plate: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #141310;
--paper-sunk: #1d1b17;
--ink: #ede8de;
--ink-2: #a69e90;
--ink-3: #948c7d;
--rule: #332f28;
--rule-strong: #4c473d;
--accent: #f07e62;
--accent-ink: #f5a38c;
--accent-sheet: #2a1e1a;
--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 20px -8px rgb(0 0 0 / 60%);
}
}
/* ─────────────────────────────────────────────────────────────
3. 바탕
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scrollbar-color: var(--rule-strong) var(--paper);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--f-sans);
font-size: var(--t-body);
font-weight: 400;
line-height: var(--lh-body);
font-variant-numeric: tabular-nums;
word-break: keep-all; /* 한글은 어절 단위로 끊는다 */
overflow-wrap: anywhere; /* 단 URL 은 어디서든 끊는다 */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* 브라우저가 그리는 표면도 이 판의 일부다. */
::selection { background: var(--accent-sheet); color: var(--ink); }
:focus-visible {
outline: var(--bold) solid var(--accent);
outline-offset: 3px;
border-radius: 1px;
}
:where(a) {
color: inherit;
text-decoration-color: var(--rule-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
transition: text-decoration-color 160ms var(--ease-out);
}
:where(a):hover { text-decoration-color: var(--accent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
background: var(--rule-strong); border: 3px solid var(--paper); border-radius: 99px;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: var(--s7) 0; }
figcaption {
margin-top: var(--s3); font-size: var(--t-meta); line-height: var(--lh-meta);
color: var(--ink-3);
}
hr {
border: 0; height: var(--hair); background: var(--rule); margin: var(--s7) 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
padding: var(--s2) var(--s4); background: var(--ink); color: var(--paper);
z-index: 10;
}
.skip-link:focus { left: var(--s4); top: var(--s2); }
/* ─────────────────────────────────────────────────────────────
4. 골격
───────────────────────────────────────────────────────────── */
.site {
max-width: var(--measure-wide);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* 글·정적 페이지는 이것을 함께 단다. 마스트헤드 괘선이 본문 폭과 정확히
같아져 판이 하나로 읽힌다. 색인은 넓게, 읽는 화면은 좁게. */
.site--read { max-width: calc(var(--measure) + 2 * var(--gutter)); }
/* 매체가 무엇인지 말하는 한 줄. 필명 매체라 이 문장이 바이라인을 대신한다. */
/* 매체 소개 한 줄 — **본문이 아니라 머리말**이다. 본문 폭(`--measure`)을 여기에
걸면 한 문장이 억지로 접히고 「출처를 답니다.」만 둘째 줄에 남는다.
⚠️ 좁은 화면에서는 접힐 수밖에 없으므로 `balance` 로 줄 길이를 고르게 한다 —
한 단어만 떨어지는 것이 접히는 것보다 나쁘다. */
.site-note {
margin: var(--s5) 0 var(--s7);
font-size: var(--t-small); line-height: 1.75; color: var(--ink-2);
text-wrap: balance;
}
#main { display: block; }
.masthead {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--s4) var(--s6);
padding-block: var(--s6) var(--s3);
border-bottom: var(--bold) solid var(--ink);
}
.masthead__wordmark {
font-family: var(--f-serif);
font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 900; letter-spacing: -0.02em; /* 2026-10-09 Ryan 「크게 굵게」 — 종전 1.375rem · 700 · .top__brand 와 같은 값 */
line-height: 1; text-decoration: none; margin-right: auto;
}
.brand-seal { /* 워드마크 앞 원형 도장 — 종전 뒤의 빨간 점(10-09)을 대신한다 · 글자 높이 (Ryan 10-11 시안 B · 파비콘과 같은 도장) */
display: inline-block; max-width: none;
width: 0.74em; height: 0.74em; margin-right: 0.14em; vertical-align: -0.02em;
}
.masthead__nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.masthead__nav a {
font-size: var(--t-meta); font-weight: 500; letter-spacing: 0.06em;
color: var(--ink-2); text-decoration: none;
padding-bottom: 2px; border-bottom: var(--bold) solid transparent;
}
.masthead__nav a:hover,
.masthead__nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
/* 언어 선택기 — 있는 언어만 나온다. 사람이 고른 언어가 자동 감지를 이긴다. */
.lang {
display: flex; align-items: baseline; gap: var(--s3);
font-size: var(--t-meta); letter-spacing: 0.04em;
}
.lang a { color: var(--ink-3); text-decoration: none; }
.lang a:hover { color: var(--ink); text-decoration: underline; }
.lang__current { color: var(--ink); font-weight: 600; }
.lang__current::before {
content: ""; display: inline-block;
width: 0.32em; height: 0.32em; margin-right: 0.4em; vertical-align: 0.1em;
background: var(--accent); border-radius: 50%;
}
.colophon {
margin-top: var(--s7);
padding-block: var(--s5) var(--s6);
border-top: var(--hair) solid var(--rule);
font-size: var(--t-meta); line-height: var(--lh-meta); color: var(--ink-3);
display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
}
.colophon a { color: var(--ink-2); }
/* ─────────────────────────────────────────────────────────────
5. 메타 행 — 번호 · 날짜 · 상태. 제목 위에 오는 유일한 것.
라벨이 아니라 독자가 실제로 쓰는 정보다 (연재 번호 · 발행일 · 추적 여부).
───────────────────────────────────────────────────────────── */
.meta-row {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
font-size: var(--t-meta); line-height: var(--lh-meta);
color: var(--ink-3);
letter-spacing: 0.04em;
}
.meta-row__no {
font-family: var(--f-serif); font-weight: 700; font-size: var(--t-small);
color: var(--ink); letter-spacing: 0.01em;
}
.meta-row__date { font-variant-numeric: tabular-nums; }
.badge {
display: inline-flex; align-items: center; gap: 0.4em;
padding: 0.15em 0.6em 0.2em;
font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.07em;
line-height: 1.5;
border-radius: 2px;
background: var(--paper-sunk); color: var(--ink-2);
}
.badge::before {
content: ""; width: 0.42em; height: 0.42em; border-radius: 50%;
background: currentcolor;
}
.badge--tracking { background: var(--accent-sheet); color: var(--accent-ink); }
.badge--closed { background: var(--paper-sunk); color: var(--ink-2); }
/* 포맷 배지 — 상태 배지와 **다른 축**이라 다르게 생겨야 한다. 점 없이 테두리만. */
.badge--format {
background: transparent; color: var(--ink-2);
border: 1px solid var(--rule-strong); padding: 0.1em 0.55em 0.15em;
}
.badge--format::before { display: none; }
/* 읽기 시간 — 독자가 먼저 묻는 것은 「지금 읽을 수 있나」다. */
.meta-row__read { font-variant-numeric: tabular-nums; }
.badge--closed::before { border-radius: 0; }
/* ─────────────────────────────────────────────────────────────
5.5 홈 섹션 — 「고르게 하는 화면」 (스펙 §6)
데이터가 없는 섹션은 애초에 안 지어진다. 여기 CSS 는 있는 것만 꾸민다.
───────────────────────────────────────────────────────────── */
.section { margin-top: var(--s8); }
.section__title {
font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em;
color: var(--ink-3);
margin: 0 0 var(--s4); padding-bottom: var(--s2);
border-bottom: var(--hair) solid var(--rule);
}
/* 대표 글 — 하나뿐이다. 캐러셀을 쓰지 않는 이유는 「고르게 한다」가 목적이라서다.
⚠️ 홈은 더 안 쓴다(대표 1편은 아래 롤러가 대신한다 · 설계 2026-09-23 §5) — 주제
페이지가 아직 `_index_body(featured=True)` 로 쓸 수 있어 규칙은 남긴다. */
.featured { margin-top: var(--s6); }
.featured .index { border-top: var(--bold) solid var(--ink); }
.featured .entry { border-bottom: 0; }
/* ── 홈 롤러 · 추적 중인 질문 (설계 §5 · gc §4.1) ─────────────────── */
.roller .slides { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px;
overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 0 var(--s2); }
.roller .slide { scroll-snap-align: start; }
.roller__ctl { display: flex; justify-content: center; align-items: center; gap: var(--s3); margin-block: var(--s3) var(--s6); }
.roller__ctl button { font: inherit; background: none; border: var(--hair) solid var(--rule); border-radius: 50%;
width: 44px; height: 44px; color: var(--ink); cursor: pointer; }
.dots { display: flex; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: var(--hair) solid var(--ink-3);
background: none; padding: 0; cursor: pointer; }
.dot[aria-current] { background: var(--accent); border-color: var(--accent); }
@media (max-width: 720px) { .roller .slides { grid-auto-columns: 88%; } .dots { display: none; } }
/* 피처드 카드 — 이미지 + 제목 두 줄 (Ryan 2026-09-27 「이미지가 메인」) */
.feature { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
.feature__title { font-family: var(--f-sans); font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feature__title em { font-style: normal; color: var(--accent); }
.feature:hover .feature__title { color: var(--accent-ink); }
/* 도는 질문 띠 — 시안 A (도장 + Q번호 + 세리프 헤드라인 + 메타 한 줄 · 2026-10-01 Ryan 승인).
🔴 키 제약(Ryan) — 데스크톱 높이 ≤ 옛 띠(40.5px)의 1.5배, 폰(390px)은 최대한 낮게.
한 슬라이드 높이는 `--qh` 하나로 고정한다 — 창(`.qstrip__win`)·행(`.qstrip__row`)·회전 스텝
(`@keyframes`)이 전부 이 값을 같이 봐야 창 밖으로 안 밀린다. 그래서 헤드라인·메타 둘 다
**항상 한 줄**(ellipsis) — 슬라이드마다 줄 수가 다르면 다음 슬라이드가 창 경계에서 잘린다. */
.qstrip { display: block; margin-block: 0 var(--s6);
padding: 8px 16px; background: var(--paper-sunk); border-radius: 6px; --qh: 44px; }
.qstrip__win { overflow: hidden; height: var(--qh); }
.qstrip__win ul { list-style: none; margin: 0; padding: 0; animation: p3t-tick-q calc(var(--n) * 5s) steps(var(--n)) infinite; }
.qstrip__row { display: flex; align-items: flex-start; gap: 10px; height: var(--qh); overflow: hidden; }
.qstrip__seal { width: 32px; height: 32px; flex: 0 0 auto; align-self: center; } /* 띠 높이의 정중앙 (Ryan 10-01) */
.qstrip__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.qstrip__head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.qstrip__eyebrow { display: flex; align-items: baseline; gap: 6px; margin: 0; flex: 0 0 auto;
font: 700 var(--t-micro)/1.1 var(--f-sans); letter-spacing: 0.06em; color: var(--ink-3); white-space: nowrap; }
.qstrip__eyebrow .no { color: var(--ink-2); }
.qstrip__eyebrow .sep { color: var(--rule-strong); }
.qstrip__q { margin: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.qstrip__q a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--f-serif); font-weight: 700; font-size: 0.95rem; line-height: 1.3;
color: var(--ink); text-decoration: none; }
.qstrip__meta { display: flex; align-items: baseline; gap: 0 6px; margin: 0; overflow: hidden;
font: var(--t-meta)/1.3 var(--f-sans); color: var(--ink-2); white-space: nowrap; }
.qstrip__meta .sep { color: var(--rule-strong); flex: 0 0 auto; }
.qstrip__next { flex: 0 0 auto; white-space: nowrap; }
.qstrip__post { flex: 1 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); }
.qstrip__q a:hover, .qstrip__post:hover { color: var(--accent-ink); }
.qstrip__post:hover { text-decoration-color: var(--accent-ink); }
.qstrip:hover ul, .qstrip:focus-within ul { animation-play-state: paused; }
.qstrip .section__more { float: none; flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
@keyframes p3t-tick-q { to { transform: translateY(calc(var(--n) * -1 * var(--qh))); } }
@media (prefers-reduced-motion: reduce) { .qstrip__win ul { animation: none; } }
@media (max-width: 560px) {
/* 「다음 확인」은 폰에서 뺀다 — 편수·최신글·전체보기만으로도 한 줄이 빠듯하다(Ryan
「모바일은 최대한 낮게」). 각 세그먼트가 구분점까지 한 덩어리라 통째로 사라진다. */
.qstrip { padding: 7px 12px; --qh: 40px; }
.qstrip__seal { width: 28px; height: 28px; }
.qstrip__q a { font-size: 0.85rem; }
.qstrip__eyebrow { font-size: 0.675rem; }
.qstrip__meta { font-size: 0.75rem; }
.qstrip__next { display: none; }
}
.tracking__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
.tracking__row { border-top: var(--hair) solid var(--rule); padding-top: var(--s2); }
.tracking__row p { margin: 0.25em 0; color: var(--ink-2); font-size: var(--t-small); }
.tracking__row a { display: block; color: var(--ink); text-decoration: none; min-height: 44px; }
.section__more { float: right; font: var(--t-meta)/1 var(--f-sans); color: var(--ink-3); }
.section__more-line { text-align: right; margin: 0 0 var(--s4); }
@media (max-width: 860px) { .tracking__list { grid-template-columns: minmax(0, 1fr); } }
/* 주제 내비 — 상단 고정 (Ryan 2026-08-25). 모든 페이지에서 닿아야 한다.
⚠️ 마스트헤드 괘선 **아래**에 붙어 한 줄로 흐른다. 좁은 화면에서는 가로로
밀어서 본다 — 접어 내리면 본문이 아래로 밀린다 (스펙 §11). */
.topicnav {
display: flex; gap: var(--s5);
padding-block: var(--s3);
border-bottom: var(--hair) solid var(--rule);
overflow-x: auto; scrollbar-width: none;
font-size: var(--t-meta); letter-spacing: 0.02em;
}
.topicnav::-webkit-scrollbar { display: none; }
.topicnav a {
white-space: nowrap; color: var(--ink-2); text-decoration: none;
padding-bottom: 2px; border-bottom: var(--bold) solid transparent;
}
.topicnav a:hover { color: var(--ink); }
.topicnav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
/* 🔴 2026-09-27 — 주제가 대질문 10칸으로 늘어 한 줄(863px)이 본문 폭(684px)을 넘었다.
넓은 화면은 두 줄로 접는다 · 좁은 화면은 가로 스크롤을 지키되 「질문」 칸은 오른쪽 끝에
붙여 둔다 — 스크롤 끝에 숨으면 질문 페이지로 가는 길이 사라진다. */
@media (min-width: 721px) { .topicnav { flex-wrap: wrap; row-gap: var(--s2); } }
@media (max-width: 720px) {
.topicnav__questions { position: sticky; right: 0; background: var(--paper);
padding-left: var(--s3); box-shadow: -12px 0 12px -4px var(--paper); }
}
/* 나머지 편 — 대표 카드 아래 목차처럼. 순서가 정보라 번호를 앞에 둔다. */
.series__parts { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.part { border-bottom: var(--hair) solid var(--rule); }
.part:first-child { border-top: var(--hair) solid var(--rule); }
.part__link {
display: grid; grid-template-columns: 4.5rem 2.6rem 4rem 1fr; align-items: center;
gap: var(--s3);
padding-block: var(--s4);
text-decoration: none; color: inherit;
}
.part__no {
font-family: var(--f-serif); font-weight: 700; font-size: var(--t-meta);
color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.part__sub { font-size: var(--t-meta); color: var(--ink-3); }
.part__title {
font-family: var(--f-serif); font-size: var(--t-small); font-weight: 600;
line-height: 1.5;
}
.part__link:hover .part__title { color: var(--accent-ink); }
@media (max-width: 32rem) {
.part__link { grid-template-columns: 3.5rem 1fr; grid-auto-rows: min-content; }
.part__thumb { grid-row: 1 / span 2; width: 3.5rem; }
.part__no, .part__sub { grid-column: 2; display: inline; }
.part__title { grid-column: 2; }
}
/* 주제 카드 — 이름 + 편수. 무엇이 들었는지 모르면 클릭할 근거가 없다. */
.topics__list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--s3);
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.topic__link {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s3);
padding: var(--s4);
background: var(--paper-sunk);
border-radius: 3px;
text-decoration: none; color: inherit;
transition: background 160ms var(--ease-out);
}
.topic__link:hover { background: var(--accent-sheet); }
.topic__name { font-family: var(--f-serif); font-weight: 600; font-size: var(--t-small); }
.topic__count {
font-size: var(--t-micro); color: var(--ink-3);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────
6. 색인 — 홈 · 주제 페이지 공용
글이 셋 미만이면 첫 글을 크게 눕히고, 셋 이상이면 같은 행 구조가 그리드로
접힌다. 편수를 코드에 박지 않는다 (설계 §4.1 과 같은 원칙).
───────────────────────────────────────────────────────────── */
.index {
list-style: none; margin: 0; padding: 0;
border-top: var(--hair) solid var(--rule);
}
.entry { border-bottom: var(--hair) solid var(--rule); }
.entry__link {
display: grid; gap: var(--s4);
padding-block: var(--s6);
text-decoration: none; color: inherit;
/* 같은 줄의 카드들이 같은 높이를 갖게 한다 — 어긋난 바닥선은 미완성으로 읽힌다. */
height: 100%; align-content: start;
}
.entry__text { display: grid; gap: var(--s3); align-content: start; }
/* 썸네일 — 이미지가 있는 글만. 없는 글은 자리를 비우지 않고 그냥 안 붙인다.
비율을 고정해 이미지가 늦게 와도 카드가 안 튄다. */
/* 🔴 썸네일은 **맛보기**이지 전체 보기가 아니다. 이미지가 부모 높이를 밀지
못하게 절대 위치로 잠근다 — 안 그러면 세로 5,200px 짜리 도표가 카드를
1,225px 로 늘리고 옆 칸에 거대한 빈 공간이 생긴다 (실렌더 확인).
⭐ 여백은 블록 **안**이 아니라 바깥에서 만든다 (볼트 표준). */
.entry__thumb {
position: relative;
aspect-ratio: 1200 / 630; overflow: hidden; /* = 커버 실제 비율(OG 1200×630). 16/9 로 두면 좌우 3.3% 가 잘려 모서리 도장이 잘린다 (Ryan 2026-09-22 실렌더) */
background: var(--paper-sunk); border-radius: 2px;
}
.entry__thumb img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
/* 🔴 2026-09-27 Ryan 「생성한 이미지는 중간이 크롭되어 보이는데 최상단이 보이는게 낫지 않아?」 — 위 기준으로 바꾼다.
한지 판은 맨 위에 제목 글자가 있어 가운데 기준이면 그 줄이 잘렸다(#13 실렌더).
⚠️ 옛 이유(세로로 아주 긴 도표는 위쪽이 여백이라 빈 칸만 보인다)는 자산 `focus` 인라인으로 개별 처리한다. */
object-position: 50% 0%;
}
/* 실물·AI 원본 카드 (설계 2026-09-24 §3.2) — 문서·웹페이지 캡처는 제목이 위에 있다. 자산에 focus 가 있으면 인라인이 이긴다. */
.entry__thumb--source img { object-position: 50% 0%; }
/* 호버 확대는 두지 않는다 (DESIGN.md 「움직임 — 하나뿐이다」). 3% 확대는 여백 1.5% 의 모서리 도장을 잘랐다 (2026-09-22). */
/* 카드 설명은 두 줄까지. 스펙 §7 — 카드는 훑는 것이지 읽는 것이 아니다. */
.entry__lede {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.entry__title {
font-family: var(--f-serif);
font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-head);
letter-spacing: -0.005em;
margin: 0;
text-wrap: balance;
}
.entry__link:hover .entry__title { color: var(--accent-ink); }
.entry__lede {
margin: 0; max-width: var(--measure);
font-size: var(--t-small); line-height: 1.75; color: var(--ink-2);
}
/* 카테고리 줄 — 링크다. 폰에서는 가로 스크롤 칩 (설계 §2 폰). */
.topicrow {
display: flex; gap: var(--s3); flex-wrap: nowrap; overflow-x: auto;
margin-top: var(--s6); padding-bottom: var(--s2);
font-size: var(--t-small); scrollbar-width: none;
}
.topicrow a {
flex: 0 0 auto; padding: var(--s1) var(--s3);
border: var(--hair) solid var(--rule-strong); border-radius: 999px;
text-decoration: none; color: var(--ink-2);
}
.topicrow a[aria-current="page"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.topicrow__n { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 0.25em; }
@media (min-width: 48rem) { .topicrow { flex-wrap: wrap; overflow: visible; } }
/* 카드 그리드 — 3열 · 폰 1열. 편수를 세는 :has 규칙은 폐기했다 — 그리드는 선언이다. */
.index--grid { display: grid; grid-template-columns: 1fr; column-gap: var(--s6); border-top-width: var(--bold); border-top-color: var(--ink); }
@media (min-width: 48rem) { .index--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .index--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entry__thumb--paper img { opacity: 0.9; }
.entry__title em { font-style: normal; color: var(--accent); }
.meta-row__topic { color: var(--ink-3); }
/* 대표 — 카드 좌 58% · 글 우 (설계 §2). 폰은 카드 위 · 글 아래. */
@media (min-width: 48rem) {
.index--featured .entry__link { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: var(--s6); align-items: start; }
}
/* 🔴 히어로 대접은 **대표 글 목록에만** 준다. 예전에는 `.index > .entry:first-child`
였는데, 홈이 섹션으로 갈리면서 「최근 글」의 첫 항목까지 커졌다 — 「대표는
하나」가 그 자리에서 깨진다 (실렌더 확인). */
.index--featured .entry__title { font-size: var(--t-h1); font-weight: 500; }
.index--featured .entry__lede { font-size: var(--t-lede); line-height: var(--lh-lede); }
.index--featured .entry__link { padding-block: var(--s6) var(--s7); }
/* ─────────────────────────────────────────────────────────────
7. 글
───────────────────────────────────────────────────────────── */
.post { padding-block: var(--s7) 0; }
.post__head { max-width: var(--measure); }
.post__title {
font-family: var(--f-serif);
font-size: var(--t-h1); font-weight: 500; line-height: 1.28;
letter-spacing: -0.01em;
margin: var(--s4) 0 0;
text-wrap: pretty; /* balance 는 두 줄 길이를 맞추려 뜻 단위를 자른다 (Ryan 2026-09-29) */
}
.post__title em { font-style: normal; color: var(--accent); }
.post__deck {
margin: var(--s3) 0 0; max-width: var(--measure);
font-family: var(--f-serif); font-size: var(--t-lede); line-height: var(--lh-lede); font-weight: 400;
color: var(--ink-2); text-wrap: pretty;
}
/* 부제는 문장 단위로 끊는다 — 넓은 화면에서 한 문장 한 줄 (「놓치는 것이 / 있습니다」 방지 · Ryan 2026-09-29) */
@media (min-width: 721px) { .post__deck-s { display: block; } }
.post__lede {
margin: var(--s5) 0 0;
font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--ink-2);
}
/* 브리프 넷 — 제목 바로 아래. 라벨은 주홍 · 값은 잉크. */
.brief { margin: var(--s5) 0 0; padding: var(--s4) 0; border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); display: grid; gap: var(--s2); max-width: var(--measure); }
.brief__row { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--s3); align-items: baseline; }
.brief__row dt { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.06em; color: var(--accent-ink); }
.brief__row dd { margin: 0; font-size: var(--t-small); line-height: 1.7; }
/* 판정 카드 — 글자 카드만(실물 캡처 판은 reality-check 템플릿 뒤). */
.verdict { margin: var(--s5) 0 0; padding: var(--s4); background: var(--paper-sunk); border-left: var(--bold) solid var(--ink); max-width: var(--measure); }
.verdict__label { margin: 0; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); }
.verdict__p3t { margin-left: 0.4em; padding: 0.1em 0.5em; border-radius: 999px; background: var(--ink); color: var(--paper); letter-spacing: 0; }
.verdict__claim { margin: var(--s2) 0 0; font-family: var(--f-serif); font-size: var(--t-body); }
.verdict__quote { margin: var(--s2) 0 0; padding-left: var(--s3); border-left: var(--hair) solid var(--rule-strong); color: var(--ink-2); font-size: var(--t-small); }
.verdict__source { margin: var(--s2) 0 0; font-size: var(--t-micro); color: var(--ink-3); }
/* 출처 접기 — summary 가 h2 를 품는다. 열림 표시는 브라우저 기본 마커(▶) —
summary 에 display: flex/block 을 주면 마커가 사라진다(list-item 이 아니게 된다).
그래서 안을 inline 으로만 채운다. */
.sources__fold > summary { cursor: pointer; }
.sources__fold > summary h2 { display: inline; margin: 0; }
.sources__count { margin-left: var(--s3); font-size: var(--t-micro); color: var(--ink-3); }
/* 연재 눈금 레일 — 이 글이 연재의 어디인지 한 눈에. 폭이 좁아도 유지된다. */
.serial {
margin-top: var(--s7);
padding-top: var(--s4);
border-top: var(--hair) solid var(--rule);
}
.serial__label {
font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.09em;
color: var(--ink-3); margin: 0 0 var(--s3);
}
.serial__rail {
list-style: none; display: flex; gap: 3px; margin: 0 0 var(--s4); padding: 0;
}
.serial__tick {
height: 5px; flex: 1 1 0; min-width: 3px;
background: var(--rule);
border-radius: 1px;
}
.serial__tick[aria-current] { background: var(--accent); }
.serial__tick--done { background: var(--rule-strong); }
.serial p {
margin: 0 0 var(--s2);
font-size: var(--t-small); line-height: 1.7; color: var(--ink-2);
}
.serial__prev { color: var(--ink-3); }
/* 한 줄 요약 — 한 문장이다. 넘치면 원고가 틀린 것이고 게이트가 잡는다. */
.post__tldr {
margin: var(--s7) 0 0; max-width: var(--measure);
padding: var(--s5) 0;
border-top: var(--bold) solid var(--accent);
font-family: var(--f-serif);
font-size: var(--t-lede); font-weight: 500; line-height: 1.65;
}
/* 뉴스 「P3T 가 보는 의미」 — 사실이 아니라 해석이라는 표시. 본문과 눈으로 갈린다. */
.post__take {
margin: var(--s6) 0 0; max-width: var(--measure);
padding: var(--s4) var(--s5);
border-left: var(--bold) solid var(--accent);
background: var(--paper-2, transparent);
}
.post__take-label { font-size: var(--t-small); font-weight: 700; color: var(--ink-2); }
.post__take p { margin: var(--s2) 0 0; font-family: var(--f-serif); line-height: 1.7; }
.badge--now-confirmed, .badge--now-reported, .badge--now-unconfirmed { font-weight: 600; }
/* 인사이트 셋 — 번호가 순서를 나른다. */
.post__insights {
list-style: none;
margin: var(--s6) 0 0; padding: 0;
max-width: var(--measure);
}
/* 🔴 grid 금지 (2026-10-10) — 본문 사이 각주
` 와 `` 가 같은 자리에 오므로
블록으로 세우고 밑줄은 hover 에서만 — 목록이 파란 줄로 덮이면 질문이 안 읽힌다. */
/* ⭐ 링크는 쉬는 상태에서도 문처럼 보여야 한다. 「갈 데 없는 링크는 거짓말」의
반대편도 참이다 — 문인데 문으로 안 보이면 아무도 안 연다. 다만 목록이 파란
줄로 덮이면 질문이 안 읽히므로, 밑줄은 두되 색을 괘선까지 낮춘다. */
a.agenda__q { display: block; color: inherit;
text-decoration: underline; text-decoration-color: var(--rule);
text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a.agenda__q:hover, a.agenda__q:focus-visible {
text-decoration-color: var(--accent); }
/* ── 정적 페이지 · 콜로폰 법정 링크 ────────────────────────────
🔴 개인정보 처리방침은 §30 이 「공개」를 요구한다 — 모든 페이지 바닥에서
닿아야 하고, 그래서 이 링크는 장식이 아니라 요건이다. */
.colophon__legal { display: flex; flex-wrap: wrap; gap: var(--s4); }
.colophon__legal a { color: var(--ink-3); text-decoration: none; }
.colophon__legal a:hover, .colophon__legal a:focus-visible {
color: var(--ink); text-decoration: underline;
text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
/* 본문 폭은 글과 같은 잣대를 쓴다 — 읽는 것은 같은 종류의 것이다 */
.site--read main > h2,
.site--read main > p,
.site--read main > ul { max-width: var(--measure); margin-inline: auto; }
.site--read main > h2 {
font-family: var(--f-serif); font-size: var(--t-h2); line-height: var(--lh-head);
margin: var(--s7) auto var(--s3);
}
.site--read main > p { font-size: var(--t-body); line-height: var(--lh-body);
margin: 0 auto var(--s4); }
.site--read main > ul { margin: 0 auto var(--s5); padding-left: 1.1em;
font-size: var(--t-body); line-height: var(--lh-body); }
.site--read main > ul li { margin-bottom: var(--s2); }
/* ─────────────────────────────────────────────────────────────
도해 서명 — 만든 곳은 이미지가 지고 다닌다 (Ryan 2026-09-08)
🔴 본문 밑에 「이미지 출처 · 도해 · P3T」를 세 줄 붙이는 대신 그림 안에 넣는다.
갈무리돼 퍼져도 표시가 남고, 본문은 깨끗해진다.
⚠️ 화면 갈무리(제3자 이미지)는 이 CSS 를 안 타므로 서명이 붙지 않는다 — 그게 맞다.
───────────────────────────────────────────────────────────── */
.diagram { position: relative; }
.diagram::after {
content: "P3T";
position: absolute; right: 20px; bottom: 14px;
font-family: var(--f-sans); font-size: 12px; font-weight: 700;
letter-spacing: .10em; color: var(--ink-3); opacity: .5;
pointer-events: none;
}
/* ── 레일 셸 (설계 2026-09-23 §2 · gc §1 과 같은 격자) ───────────── */
/* 🔴 2026-09-27 Ryan 「아웃스탠딩은 화면에 넓게 퍼지는데 P3T 는 좁게」 — 1280 상자를 풀고 전폭으로 쓴다.
레일은 화면 왼쪽 끝에 붙고 괘선으로 본문과 가른다(아웃스탠딩 대조). 상한 없음 — Ryan 「화면 폭에 맞춰」. */
.site--rail { max-width: none; padding-inline: 0; }
.site--rail > .top, .site--rail > .top__note { padding-inline: clamp(16px, 2.5vw, 40px); }
.site--rail .shell { padding-inline-end: clamp(16px, 2.5vw, 40px); }
.site--rail .shell > .nav { padding-inline: clamp(16px, 2.5vw, 40px) 20px; border-right: var(--hair) solid var(--rule); }
/* 소개 띠 — P3T 바로 아래 한 줄(Ryan 2026-09-27 「얇게」) */
.site-note.top__note { margin: 0; padding-block: 0.55em; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2);
background: var(--paper-sunk); border-bottom: var(--hair) solid var(--rule); text-wrap: balance; }
.top { display: grid; grid-template-columns: 248px minmax(200px, 360px) minmax(0, 1fr); gap: 32px;
align-items: center; padding-block: var(--s4); border-bottom: var(--bold) solid var(--ink); }
/* 2026-10-09 Ryan 「p3t 를 좀 크게 굵게 · 지금은 너무 소심하게」 — 종전 700 · 본문 리드 크기 */
.top__brand { font-family: var(--f-serif); font-weight: 900; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
line-height: 1; letter-spacing: -0.02em; color: var(--ink);
text-decoration: none; white-space: nowrap; }
.search { position: relative; }
/* type="search" 는 WebKit 계열에서 네이티브 폼 크롬(-webkit-appearance: searchfield)을 그려
저자 background 를 무시할 수 있다 — QA Q2. appearance:none 으로 크롬을 끄고 아래 authored
background/border 만 쓰게 한다(다크 배경 흰 칸 방지). */
.search input { width: 100%; font: inherit; padding: 0.5em 0.75em; border: var(--hair) solid var(--rule);
background: var(--paper); color: var(--ink); border-radius: 4px;
appearance: none; -webkit-appearance: none; }
.search__results { position: absolute; z-index: 5; inset-inline: 0; top: calc(100% + 4px); margin: 0; padding: 0;
list-style: none; background: var(--paper); border: var(--hair) solid var(--rule); box-shadow: var(--shadow); }
.search__results li { padding: 0.5em 0.75em; font-size: var(--t-small); }
.search__results a { color: var(--ink); text-decoration: none; display: block; min-height: 44px; }
/* 검색 결과 (Ryan 2026-09-30) — 제목 · #번호·날짜·카테고리 · 본문 한 줄(걸린 단어 표시). 전부 보여 주고 드롭다운은 스크롤. */
.search__results { max-height: min(70vh, 36rem); overflow-y: auto; }
.search__results a strong, .search-page__results a strong { display: block; font-weight: 700; line-height: 1.4; }
.search__results a small, .search-page__results a small { display: block; color: var(--ink); opacity: 0.7; margin-block: 0.15em; }
.search__results a span, .search-page__results a span { display: block; line-height: 1.5; }
.search__results mark, .search-page__results mark { background: var(--accent-sheet); color: var(--accent-ink); padding: 0 0.1em; }
.search__results li + li { border-top: var(--hair) solid var(--rule); }
.search-page__count { font-size: var(--t-small); }
.search-page__results { list-style: none; margin: 0; padding: 0; }
.search-page__results li { padding-block: var(--s4); border-bottom: var(--hair) solid var(--rule); }
.search-page__results a { color: var(--ink); text-decoration: none; display: block; }
.ticker { height: 1.8em; overflow: hidden; background: var(--paper-sunk); border-radius: 4px; padding-inline: 0.75em; font-size: var(--t-small); }
.ticker ul { list-style: none; margin: 0; padding: 0; animation: p3t-tick calc(var(--n) * 4s) steps(var(--n)) infinite; }
.ticker li { height: 1.8em; line-height: 1.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker a { color: var(--ink); text-decoration: none; }
.ticker:hover ul, .ticker:focus-within ul { animation-play-state: paused; }
@keyframes p3t-tick { to { transform: translateY(calc(var(--n) * -1.8em)); } }
@media (prefers-reduced-motion: reduce) { .ticker ul { animation: none; } }
.shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; padding-block: var(--s6); }
.nav { font-size: var(--t-small); }
.nav__q, .nav__sub { display: flex; justify-content: space-between; gap: 0.5em; padding-block: 0.45em; min-height: 44px;
align-items: center; color: var(--ink); text-decoration: none; line-height: 1.4; }
.nav__sub { padding-inline-start: 1em; font-size: var(--t-meta); }
/* 🔴 2026-09-27 A안 — 대분류(대질문) 아래 소분류(본질 질문 41). 위계는 굵기·색·들여쓰기로 가른다.
데스크톱 레일은 포인터라 소분류 44px 칸을 풀어 높이를 줄인다(41 × 44px = 1,800px) · 모바일 메뉴는 44px 그대로. */
.nav__q { font-weight: 600; }
.nav__sub { color: var(--ink-2); font-weight: 400; }
.nav__sub:hover { color: var(--ink); }
.nav__sub[aria-current] { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.shell > .nav .nav__q { min-height: 0; padding-block: 0.55em 0.3em; }
.shell > .nav .nav__sub { min-height: 0; padding-block: 0.28em; line-height: 1.35; }
.nav__q small, .nav__sub small { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav__q[aria-current] { border-bottom: var(--bold) solid var(--accent); }
.nav__q--wait { color: var(--ink-3); }
.nav__rule { border: 0; border-top: var(--hair) solid var(--rule); margin-block: var(--s2); }
/* 대질문 접기 (Ryan 2026-09-27 · 기본 닫힘) — 대질문 글자는 링크, 오른쪽 ▸ 가 여닫는다 */
.nav__grp > summary { display: flex; align-items: center; gap: 0.35em; list-style: none; cursor: pointer; }
.nav__grp > summary::-webkit-details-marker { display: none; }
.nav__grp > summary > .nav__q { flex: 1 1 auto; }
.nav__grp > summary::after { content: "\25B8"; color: var(--ink-3); font-size: 0.8em; transition: transform 0.15s; }
.nav__grp[open] > summary::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .nav__grp > summary::after { transition: none; } }
/* 레일 맨 아래 「완료된 질문 N」 (IA 설계 §3.4) — 자리는 늘 있다 · 0 이면 링크 없는 흐린 글자 */
.nav__closed { display: flex; justify-content: space-between; gap: 0.5em; padding-block: 0.45em; min-height: 44px;
align-items: center; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.nav__closed:hover { color: var(--ink); }
.nav__closed[aria-current] { color: var(--ink); border-bottom: var(--bold) solid var(--accent); }
.nav__closed--none { color: var(--ink-3); }
.nav__closed small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.shell > .nav .nav__closed { min-height: 0; padding-block: 0.4em; }
.channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s6); }
.channel { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
.channel svg { fill: currentColor; }
.channel--planned { color: var(--rule-strong); }
/* QA Q3 — 라이트 --rule-strong(#a8a093)은 --paper(#faf8f4) 위에서 대비 충분하지만,
다크 --rule-strong(#4c473d)은 다크 --paper(#141310) 위에서 실측 2.0:1 뿐이라
비텍스트 최소 3:1 미달. --ink-3(다크 #948c7d · 대비 5.6:1)로 다크만 올린다 —
라이트 톤은 그대로(요구사항). 이 규칙은 위 기본 선언 *뒤*에 와야 이긴다(동일 특이성). */
@media (prefers-color-scheme: dark) {
.channel--planned { color: var(--ink-3); }
}
.menu { display: none; }
@media (max-width: 860px) {
/* QA Q1 — 브랜드(auto)가 검색(1fr) 앞 칸에 있으면 auto 트랙이 콘텐츠 폭대로 고정되고
검색 input 이 나머지를 가져간다. 종전 순서(1fr auto)는 브랜드 칸이 0으로 눌려
글자가 세로로 줄바꿈됐다 — 이제 브랜드 칸은 절대 0이 되지 않는다. */
.top { grid-template-columns: auto minmax(0, 1fr); }
.top .ticker { grid-column: 1 / -1; }
.shell { grid-template-columns: minmax(0, 1fr); }
.shell > .nav { display: none; }
.menu { display: block; border-bottom: var(--hair) solid var(--rule); padding-block: var(--s2); }
.site--rail .shell, .site--rail > .menu { padding-inline: clamp(16px, 2.5vw, 40px); }
}
/* ── 질문 페이지 (설계 §6.1) ─────────────────────────────── */
/* 🔴 `.page-head .page-head__sub` — 두 클래스로 specificity 를 `.page-head p`
(0,1,1) 보다 높인다(0,2,0). 홑 클래스로 두면 기존 규칙이 이겨 --t-lede·
--ink-2 로 나온다 — 부제는 본문 lede 가 아니라 메타 줄이라 --t-small 이 맞다. */
.page-head .page-head__sub { color: var(--ink-3); font-size: var(--t-small); margin: 0.25em 0 var(--s5); }
.subq__list { list-style: none; margin: 0; padding: 0; }
.subq__row { border-top: var(--hair) solid var(--rule); padding-block: var(--s2); }
.subq__row a { display: block; color: var(--ink); min-height: 44px; }
/* QA Q4 — border-color 만 주고 .badge 자체엔 border-width/style 이 없어(초기값 none)
테두리가 그려지지 않았다(죽은 선언). 배지 계열의 기존 표현(배경 시트 · 점)으로 맞춘다 —
.badge--tracking/.badge--closed 와 같은 패턴(background+color), 새 토큰 없음. */
.badge--open { background: var(--accent-sheet); color: var(--accent-ink); }
.badge--held { background: var(--paper-sunk); color: var(--ink-3); }
.next-q { display: inline-block; margin-top: var(--s6); padding: 0.6em 1em; border: var(--hair) solid var(--ink);
color: var(--ink); text-decoration: none; border-radius: 4px; }
/* 본질 질문 (2026-09-26) — 카테고리 › 본질 질문 › 추적 질문.
🔴 위계는 크기·굵기로 세운다: 칸 제목(--t-h2 · 700) > 본질 질문(--t-lede · 700) > 추적 질문(--t-body · 500).
추적 질문의 주홍 막대는 괘선으로 내린다 — 주홍은 본질 질문이 가진다(render-qa 1회차 · 위계 역전). */
.essentials__preface { font-size: var(--t-body); line-height: var(--lh-body); margin: 0 0 var(--s6); }
.essentials__cat { margin: 0 0 var(--s7); }
.essentials__cat > h3 { font-size: var(--t-h2); font-weight: 700; line-height: var(--lh-head);
margin: 0 0 var(--s5); padding-bottom: var(--s2);
border-bottom: var(--hair) solid var(--rule-strong); }
.essential { margin: 0 0 var(--s6); padding-left: var(--s4);
border-left: 3px solid var(--accent); scroll-margin-top: var(--s6); }
.essential__q { font-size: var(--t-lede); font-weight: 700; line-height: var(--lh-head); margin: 0; }
.essential__why { margin: var(--s2) 0 0; color: var(--ink-2); font-size: var(--t-small);
line-height: 1.55; } /* 폭 상한 없음 — .agenda__why 와 같은 이유 */
.essential ol.agendas { margin: var(--s4) 0 0; gap: var(--s3); }
.essential .agenda { border-left: var(--bold) solid var(--rule); padding: var(--s1) 0 var(--s1) var(--s3); }
.essential .agenda__q { font-size: var(--t-body); font-weight: 500; }
.essential .agenda__why { font-size: var(--t-meta); }
.essentials__cat > ol.agendas { margin: 0; }
/* 합류 한 줄 — 합류한 질문 아래 · 가장 낮은 위계 */
.agenda__merged { margin: var(--s2) 0 0; font-size: var(--t-meta); color: var(--ink-3); line-height: 1.5; }
/* /questions/closed/ — 질문 · 층 · 닫힌 날 · 답 · 닫은 이유 · 답이 된 글 */
.closed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.closed { border-left: var(--bold) solid var(--rule-strong); padding: var(--s1) 0 var(--s1) var(--s4); scroll-margin-top: var(--s6); }
.closed__layer { font-size: var(--t-meta); color: var(--ink-3); letter-spacing: 0.04em; }
.closed__q { font-size: var(--t-lede); font-weight: 700; line-height: var(--lh-head); margin: var(--s1) 0 0; }
.closed__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s3);
margin: var(--s3) 0 0; font-size: var(--t-small); line-height: 1.55; max-width: var(--measure); }
.closed__meta dt { color: var(--ink-3); }
.closed__meta dd { margin: 0; color: var(--ink-2); }
.closed__meta dd a { display: block; }
/* 글 위 큰 질문 한 줄 — 제목·덱보다 가볍게(작은 산세리프 · 먹 2) · 위 내비와 붙지 않게 위 여백 */
.post__essential { display: block; max-width: var(--measure); margin: var(--s5) auto var(--s4);
font-size: var(--t-small); line-height: var(--lh-meta); color: var(--ink-2); }
.post__essential a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule);
text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.post__essential a:hover, .post__essential a:focus-visible { text-decoration-color: var(--accent); }
.about__questions { margin-top: var(--s6); }
/* 🔴 2026-09-27 Ryan 「첫 인상이 텍스트가 압도」 — 레일 셸의 그리드 카드 제목을 산세리프 두 줄로 줄인다(아웃스탠딩 카드 대조).
글 페이지·색인(한 열 셸)은 그대로다. */
.site--rail .index--grid .entry__title { font-family: var(--f-sans); font-size: 1.1rem; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 칸 수는 폭이 정한다 — 카드 최소 300px (아웃스탠딩 1440 에서 3칸 · 넓어지면 4·5칸) */
@media (min-width: 64rem) { .site--rail .index--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
/* 레일 셸 본문 첫 섹션은 위 여백을 두지 않는다 — 레일 첫 줄과 롤러 위 끝이 맞는다(실렌더 2026-09-27 · 100px 빈칸) */
.site--rail #main > .section:first-child { margin-top: 0; }
/* 롤러 점 — `.roller__ctl button` 의 44px 원을 점에서 풀고 누르는 자리만 넓힌다 */
.roller__ctl .dot { width: 10px; height: 10px; border: var(--hair) solid var(--ink-3); outline-offset: 6px;
box-sizing: content-box; padding: 0; margin: 8px 4px; }
.roller__ctl .dot[aria-current] { background: var(--accent); border-color: var(--accent); }
/* ── 이미지 주 · 글자 보조 (Ryan 2026-09-27 「이미지를 메인, 텍스트를 보조로 톤앤매너」) ──────────
레일 셸의 카드만 바꾼다(글 페이지·한 열 색인은 그대로). 아웃스탠딩 카드 대조 —
이미지 → 제목 두 줄 → 요약 두 줄(흐리게) → 메타 한 줄(가장 작게). 굵은 괘선·카드 밑줄은 걷는다. */
.site--rail .index--grid { border-top: 0; column-gap: 24px; row-gap: var(--s6); }
.site--rail .index--grid .entry,
.site--rail .roller .entry { border-bottom: 0; }
.site--rail .index--grid .entry__link { gap: var(--s3); padding-block: 0; }
.site--rail .index--grid .entry__text { gap: var(--s2); }
.site--rail .index--grid .meta-row { order: 3; font-size: var(--t-micro); color: var(--ink-3); gap: 0.6em; }
.site--rail .index--grid .meta-row__no { font: inherit; font-weight: 600; color: var(--ink-3); }
.site--rail .index--grid .entry__title { order: 1; font-size: 1.02rem; font-weight: 600; }
.site--rail .index--grid .entry__lede { order: 2; font-size: var(--t-meta); line-height: 1.6; color: var(--ink-3); }
.site--rail .entry__thumb { border-radius: 4px; }
.site--rail .feature__title { font-size: 1rem; }
.site--rail .roller .slides { padding-bottom: 0; }
.site--rail .roller__ctl { margin-block: var(--s3) var(--s5); }
/* Now 섹션 (2026-10-08 two-sections Task 4) — 모양은 실렌더 뒤 Ryan 리뷰로 고친다 */
/* 🔴 2026-10-08 Ryan 모바일 실렌더 — .top 은 「브랜드·검색·티커」 3칸 격자라 topnav 가 끼면 자동 배치가 한 칸씩 밀렸다
(390 에서 topnav 칸 0px → 「인사이트」 세로 · 1440 에서 티커가 브랜드 아래로). 칸 이름으로 고정하고 topnav 는 자기 줄. */
.top { grid-template-areas: "brand search ticker" "topnav topnav topnav"; }
.top__brand { grid-area: brand; }
.top .search { grid-area: search; }
.top .ticker { grid-area: ticker; }
.topnav { grid-area: topnav; }
@media (max-width: 860px) { .top { grid-template-areas: "brand search" "topnav topnav" "ticker ticker"; } }
/* 섹션 탭 — 지금 섹션은 진한 글자 + 강조색 밑줄, 나머지는 흐리게 (Ryan 2026-10-08 「메뉴 같아 보이지 않아」) */
.topnav { display: flex; gap: var(--s5); align-items: stretch; margin-bottom: calc(-1 * var(--s4));
border-top: var(--hair) solid var(--rule); font-weight: 700; font-size: var(--t-body); }
.topnav a, .topnav__wait { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
border-bottom: 3px solid transparent; color: var(--ink-2); text-decoration: none; }
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.topnav__wait { opacity: .45; }
/* 레일 섹션 머리 = 가장 큰 위계 · 그 아래 칸(.nav__q)은 한 단계 작고 가늘게 (Ryan 2026-10-08 「카테고리는 제목이 크고 하위가 작게」) */
.nav__sec { display: block; margin: var(--s5) 0 var(--s1); font-size: var(--t-body); font-weight: 800; line-height: 1.3;
color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.nav__sec:first-child { margin-top: 0; }
a.nav__sec:hover { color: var(--accent-ink); }
.nav__sec--wait { color: var(--ink-3); }
.site--rail .nav .nav__q, .site--rail .menu .nav__q { font-weight: 500; }
.site--rail .menu .nav__q { font-size: var(--t-small); }
.site--rail .menu .nav__sec { font-size: 1.25rem; }
.nowstrip .section__title a{color:inherit;text-decoration:none}
/* 띠 = 롤러 아래 · 위아래 선으로 영역을 나눈다 · 한 줄 4칸(태블릿 2 · 폰 1) — Ryan 2026-10-08 */
.nowstrip { border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); padding-block: var(--s5); }
.site--rail .nowstrip .index--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .site--rail .nowstrip .index--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .site--rail .nowstrip .index--grid { grid-template-columns: 1fr; } }