/* gallhub — 색지 관보 (4단계 구현, 2026-09-25)
 * 원칙: 선은 표에만 있다 · 무게가 곧 추천이다 · 색지는 한 장, 하늘 인주는 '지금' 에만(한 화면 3곳 이하, 면 0).
 * tokens.css 의 변수만 쓴다 — raw 색 0. 둥근 모서리 · 그림자 0. 표 밖에서는 테두리를 긋지 않는다.
 * 너비 경계: 720 · 960 · 1120 · 1200 (tokens.css --breakpoint-* 를 값으로 옮겨 쓴다 — 미디어 쿼리는 변수를 못 읽는다).
 */

/* ── 리셋 — :where() 로 특이성 0 (lessons #49) ───────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body, h1, h2, h3, p, ol, ul, dl, dd, figure, table, caption) { margin: 0; }
:where(ol, ul)[role="list"] { list-style: none; padding: 0; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; }
:where(table) { border-collapse: separate; border-spacing: 0; }
:where(th) { font-weight: inherit; text-align: left; }
:where(abbr[title]) { text-decoration: none; }
:where(summary) { cursor: pointer; }
[hidden] { display: none !important; }

/* ── 지면 ────────────────────────────────────────────────────────────────────── */
html {
  background: var(--color-bg);
  color-scheme: dark;
  scroll-padding-top: calc(var(--spacing) * 4);
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  color: var(--color-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
.frame {
  width: min(100% - 2 * var(--spacing-margin), var(--spacing-frame));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: calc(var(--spacing) * 4);
  top: calc(var(--spacing) * -20);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 4);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: var(--font-weight-head);
  text-decoration: none;
}
.skip:focus { top: calc(var(--spacing) * 2); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

a:hover { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ── 윗줄 ────────────────────────────────────────────────────────────────────── */
.topline__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: calc(var(--spacing) * 9);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.topline__acct { display: flex; align-items: center; gap: calc(var(--spacing) * 1); }
.topline__acct a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-target);
  margin-block: calc(var(--spacing) * -1);
  padding-inline: calc(var(--spacing) * 1.5);
  color: var(--color-ink);
  text-decoration: none;
}
.topline__acct a:hover { text-decoration: underline; }

/* ── 제호 ────────────────────────────────────────────────────────────────────── */
.mast { view-transition-name: masthead; }
.mast__in {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 6);
  min-height: calc(var(--spacing) * 16);
}
.mast--big .mast__in { min-height: calc(var(--spacing) * 20); align-items: baseline; padding-top: calc(var(--spacing) * 4); }
.mark {
  font-family: var(--font-display);
  font-weight: var(--font-weight-mast);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.mast--big .mark { font-size: var(--text-h1); }
.mark a { text-decoration: none; }
.mast__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.mast .well--search { margin-inline-start: auto; width: calc(var(--spacing) * 80); align-self: center; }
.mast--big .well--search { width: calc(var(--spacing) * 100); }
.mast__m { display: none; }
.issue-m { display: none; }

/* 우물 — 테두리 없이 한 계단 파인 면(입력 '모양'). 입력은 없다 */
.well {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: var(--spacing-target);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
  background: var(--color-surface-well);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  text-decoration: none;
}
a.well:hover { background: var(--color-surface-row); }
.well--search { justify-content: space-between; }
.well__go { font-family: var(--font-display); font-weight: var(--font-weight-head); color: var(--color-ink); }
.well__q { color: var(--color-ink); font-weight: var(--font-weight-head); }

/* ── 목차 띠 (먹띠) ──────────────────────────────────────────────────────────── */
.toc { background: var(--color-band); }
.toc__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: var(--spacing-target);
}
.toc__list { display: flex; align-items: stretch; margin-inline-start: calc(var(--spacing) * -4); }
.toc__i a,
.toc__more summary {
  display: flex;
  align-items: center;
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.toc__i a:hover,
.toc__more summary:hover { background: var(--color-surface-row); }
.toc__i a[aria-current="page"] { background: var(--color-surface-well); font-weight: var(--font-weight-title); }
.toc__more { display: none; }
.toc__more summary { list-style: none; font-family: var(--font-display); }
.toc__more summary::-webkit-details-marker { display: none; }
.toc__more ul {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  min-width: calc(var(--spacing) * 40);
  padding-block: calc(var(--spacing) * 1);
  background: var(--color-band);
}
.toc__more ul a { display: flex; align-items: center; min-height: var(--spacing-target); padding-inline: calc(var(--spacing) * 4); text-decoration: none; }
.toc__more ul a:hover { background: var(--color-surface-row); }
.toc__stat { font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 쪽 ─────────────────────────────────────────────────────────────────────── */
.page { padding-block: calc(var(--spacing) * 9) var(--spacing-section); }
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-block) var(--spacing-gutter);
  align-items: start;
}
.col-main { min-width: 0; }

.sec-h {
  font-family: var(--font-display);
  font-weight: var(--font-weight-head);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  letter-spacing: var(--tracking-display);
}
.sec-h__n { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.rail-h {
  font-family: var(--font-display);
  font-weight: var(--font-weight-head);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  margin-bottom: var(--spacing-stack);
}
.more-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-target);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  text-decoration: none;
}
.more-link a:hover { text-decoration: underline; }

/* ── 조작: 토글 · 반전 블록 · 괄호 버튼 (알약 0 · radius 0) ─────────────────────── */
.tog { display: flex; flex-wrap: wrap; }
.tg {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
  border-radius: var(--radius-none);
}
.tg:hover { background: var(--color-surface-row); color: var(--color-ink); }
.tg[aria-pressed="true"] { background: var(--color-surface-well); color: var(--color-ink); font-weight: var(--font-weight-title); }

.inv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 6);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius-none);
  white-space: nowrap;
}
.inv:hover { background: var(--color-ink-soft); }
.inv--wide { display: flex; width: 100%; }
.inv--tall { min-height: calc(var(--spacing) * 12); font-size: var(--text-lead); }

.brk {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  min-height: var(--spacing-target);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 1);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.brk:hover { background: var(--color-surface-row); }
.brk__b { color: var(--color-ink-soft); font-weight: 400; }
.brk[aria-pressed="true"] { font-weight: var(--font-weight-title); }

.check {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 1);
  margin-inline-start: calc(var(--spacing) * -1);
  font-size: var(--text-row);
}
.check:hover { background: var(--color-surface-row); }
.check__box { font-size: 1.15em; line-height: 1; }

/* ── 필명 도형 ■ □ ◆ ◇ ─────────────────────────────────────────────────────── */
.nick { display: inline-flex; align-items: baseline; gap: 0.3em; max-width: 100%; color: var(--color-ink); }
.sh { flex: none; color: var(--color-ink-soft); font-size: 0.85em; }
.flo { flex: none; font-size: var(--text-2xs); color: var(--color-ink-soft); }

/* ══════════════════════════════════════ 표 — 선은 여기에만 ══════════════════════════════════════
 * 위 복괘(3px double 흰 잉크) · 머리 행 먹띠 · 행 사이 1px 괘선(칸 위쪽) · 아래 1px 흰 잉크.
 * 괘선을 칸 '위' 에 긋는 이유: 몸통(tbody)을 숨기고 바꿔 끼워도 마지막 줄 괘선과 표 아래 선이 겹치지 않는다. */
.tbl {
  width: 100%;
  table-layout: fixed;
  border-top: 3px double var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}
.tbl thead th {
  padding: var(--spacing-cell-y) var(--spacing-cell-x);
  background: var(--color-band);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-ink);
  text-align: center;
  white-space: nowrap;
}
.tbl td,
.tbl tbody th {
  padding: var(--spacing-cell-y) var(--spacing-cell-x);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
}
.tbl tbody > tr:first-child > td,
.tbl tbody > tr:first-child > th { border-top: 0; }
.tbl .notices ~ tbody > tr:first-child > td { border-top: 1px solid var(--color-rule); }
.tbl--tight td { padding-block: var(--spacing-cell-y-tight); }
.tbl .c-t,
.tbl thead .c-t { text-align: left; }
.tbl tbody tr:hover > td { background: var(--color-surface-row); }
.tbl .c-by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl .c-head { font-family: var(--font-display); font-weight: 500; color: var(--color-ink-soft); }
.tbl .c-gal a { color: var(--color-ink); font-family: var(--font-display); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tbl .c-gal a:hover { text-decoration: underline; }
.tbl .c-rec { color: var(--color-ink); }

/* 열 폭 (wireframe §10-2 실측 — 번호 64 · 말머리 56 · 글쓴이 112 · 작성일 60 · 조회 60 · 추천 48) */
.tbl--list th.c-no { width: calc(var(--spacing) * 16); }
.tbl--list th.c-head { width: calc(var(--spacing) * 14); }
.tbl--list th.c-by { width: calc(var(--spacing) * 28); }
.tbl--list th.c-date,
.tbl--list th.c-view { width: calc(var(--spacing) * 15); }
.tbl--list th.c-rec { width: calc(var(--spacing) * 12); }
.tbl--best th.c-gal { width: calc(var(--spacing) * 22); }
.tbl--best th.c-rec { width: calc(var(--spacing) * 12); }
.tbl--best th.c-time { width: calc(var(--spacing) * 14); }
.tbl--new th.c-date { width: calc(var(--spacing) * 16); }
.tbl--new th.c-t { width: calc(var(--spacing) * 32); }
.tbl--new th.c-field { width: calc(var(--spacing) * 22); }
.tbl--new th.c-by { width: calc(var(--spacing) * 28); }
.tbl--new .c-first { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink); }
.tbl--cmt th.c-by { width: calc(var(--spacing) * 38); }
.tbl--cmt th.c-time { width: calc(var(--spacing) * 16); }
.tbl--res th.c-gal,
.tbl--rcmt th.c-gal { width: calc(var(--spacing) * 20); }
.tbl--res th.c-by,
.tbl--rcmt th.c-by { width: calc(var(--spacing) * 28); }
.tbl--res th.c-date,
.tbl--rcmt th.c-time { width: calc(var(--spacing) * 15); }
.tbl--res th.c-rec { width: calc(var(--spacing) * 12); }
.tbl--gall th.c-field { width: calc(var(--spacing) * 24); }
.tbl--gall th.c-view,
.tbl--gall th.c-rec { width: calc(var(--spacing) * 20); }
.tbl--hist th.c-date { width: calc(var(--spacing) * 30); }
.tbl--hist th.c-by { width: calc(var(--spacing) * 34); }
.tbl--hist .c-t { color: var(--color-ink); }

/* 제목 칸 — 함렛, 추천 계단이 굵기를 정한다 */
.tl { display: flex; align-items: baseline; gap: calc(var(--spacing) * 1.5); min-width: 0; }
.tl .t,
.minis .t {
  font-family: var(--font-display);
  font-size: var(--text-row);
  line-height: var(--text-row--line-height);
  color: var(--color-ink);
  text-decoration: none;
}
.tl .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .t:hover,
.minis .t:hover { text-decoration: underline; }
.rec-1 { font-weight: var(--font-weight-rec-1); }
.rec-2 { font-weight: var(--font-weight-rec-2); }
.rec-3 { font-weight: var(--font-weight-rec-3); }
.rec-4 { font-weight: var(--font-weight-rec-4); }
.rec-5 { font-weight: var(--font-weight-rec-5); }
.hp { display: none; flex: none; font-family: var(--font-display); font-weight: 500; color: var(--color-ink-soft); }
.cc { flex: none; font-size: var(--text-2xs); color: var(--color-ink-soft); }
.new {
  flex: none;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-title);
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
}
.now-mark { color: var(--color-accent); }
.now-tag { flex: none; font-style: normal; font-size: var(--text-2xs); font-weight: var(--font-weight-title); color: var(--color-ink); }
.tbl tr.is-now > td { background: var(--color-surface-row); }
.is-notice .c-no { font-family: var(--font-display); font-weight: var(--font-weight-head); color: var(--color-ink); }

/* 서식 표 · 정보 표 — 2열, th 는 함렛 */
.tbl--sheet,
.tbl--info { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.tbl--sheet tbody th,
.tbl--info tbody th {
  width: calc(var(--spacing) * 30);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
  text-align: left;
  vertical-align: top;
  padding-top: calc(var(--spacing-cell-y) + var(--spacing) * 3);
}
.tbl--sheet .sheet__colh { width: calc(var(--spacing) * 30); }
.tbl--info tbody th { width: calc(var(--spacing) * 24); padding-top: var(--spacing-cell-y); vertical-align: middle; }
.tbl--sheet td,
.tbl--info td { text-align: left; color: var(--color-ink); }
.tbl--sheet td { padding-block: calc(var(--spacing) * 2.5); }
.tbl--sheet tbody tr:hover > td,
.tbl--info tbody tr:hover > td { background: none; }
.sheet__cap {
  caption-side: top;
  padding-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  text-align: left;
}
.sheet__hint { margin-top: calc(var(--spacing) * 1.5); font-size: var(--text-xs); color: var(--color-ink-soft); }
.well--field { width: 100%; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 2); }
.well--area {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 1.5);
  min-height: calc(var(--spacing) * 80);
  padding-block: calc(var(--spacing) * 3);
}
.edtools { display: flex; flex-wrap: wrap; gap: 0 calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 2); margin-inline-start: calc(var(--spacing) * -1); }
.sheet__row2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); }
.sheet__secure { font-size: var(--text-xs); color: var(--color-ink-soft); }
.tbl--sheet .sheet__go td { padding-top: calc(var(--spacing) * 4); }
.sheet__fail,
.sheet__sent { display: none; }
.tbl .sheet__fail > td,
.tbl .sheet__sent > td { background: var(--color-surface-row); color: var(--color-ink); font-weight: var(--font-weight-head); padding-block: calc(var(--spacing) * 3); }
body[data-fail] .sheet__fail,
body[data-sent] .sheet__sent { display: table-row; }
body[data-fail] .sheet__fail + tr > td { border-top: 1px solid var(--color-rule); }
body[data-fail] .well--id { outline: 2px solid var(--color-accent); outline-offset: -2px; color: var(--color-ink); }
.well__dots { letter-spacing: 0.12em; }
.sheet__acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 5); }
.help-links { display: flex; flex-wrap: wrap; margin-top: calc(var(--spacing) * 3); margin-inline-start: calc(var(--spacing) * -2); }
.help-links a,
.side-blk__links a,
.gline__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
}
.help-links a + a::before,
.side-blk__links a + a::before,
.gline__links a + a::before { content: "·"; margin-inline-end: calc(var(--spacing) * 3); margin-inline-start: calc(var(--spacing) * -1); color: var(--color-ink-soft); }
.help-links a:hover,
.side-blk__links a:hover,
.gline__links a:hover { text-decoration: underline; }

/* ── 쪽 번호 ─────────────────────────────────────────────────────────────────── */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 calc(var(--spacing) * 1); }
.pager ol { display: flex; flex-wrap: wrap; justify-content: center; }
.pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-target);
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
  text-decoration: none;
}
.pg:hover { background: var(--color-surface-row); color: var(--color-ink); }
.pg[aria-current="page"] { background: var(--color-surface-well); color: var(--color-ink); font-weight: var(--font-weight-title); }
.pg--edge { color: var(--color-ink); font-family: var(--font-display); }
.pager--link { margin-top: calc(var(--spacing) * 4); }

/* ── 도판 — 비율 상자 + 사진. 사진은 부모 색지 위에서 luminosity 로 찍힌다(흑백 사진이 회청 톤이 된다).
 *    틀 · 모서리 · 그림자 0, 사진 위 글자 0. 설명은 figcaption(함렛). */
.ph {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg);
}
.ph[data-ratio="3:2"] { aspect-ratio: 3 / 2; }
.ph[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.ph[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; }

/* ══════════════════════════════════════ (1) 허브 ══════════════════════════════════════ */
.popband { display: none; }
.hub {
  display: grid;
  gap: var(--spacing-block) var(--spacing-gutter);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "best" "side";
}
.hub__pop { grid-area: pop; display: none; }
.hub__best { grid-area: best; min-width: 0; }
.hub__side { grid-area: side; display: grid; gap: var(--spacing-block); align-content: start; }
.cap-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4); margin-bottom: var(--spacing-stack); }
.cap-row__meta { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.hub__best .more-link { text-align: right; }

.lead-fig { margin-top: var(--spacing-stack); }
.lead-fig__a { display: block; text-decoration: none; }
.lead-fig figcaption { margin-top: calc(var(--spacing) * 2); font-family: var(--font-display); font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-soft); }
.lead-fig figcaption a { color: var(--color-ink); font-weight: var(--font-weight-head); text-decoration: none; }
.lead-fig .rk { font-family: var(--font-sans); color: var(--color-ink); }

/* 점 리더 목록 — 리더는 '·' 글자(선 아님) */
.leaders { margin-top: calc(var(--spacing) * 2); }
.leaders a {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1.5);
  text-decoration: none;
}
.leaders .rk { flex: none; width: 1.4em; font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.leaders .nm { flex: none; font-family: var(--font-display); font-weight: 500; font-size: var(--text-row); line-height: var(--text-row--line-height); color: var(--color-ink); }
.leaders .ld { flex: 1; min-width: 1em; overflow: hidden; white-space: nowrap; color: var(--color-ink-soft); font-size: var(--text-xs); line-height: 1; }
.leaders .ld::before { content: "· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·"; }
.leaders .n { flex: none; font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.leaders a:hover .nm { text-decoration: underline; }

.side-blk .sec-h { margin-bottom: var(--spacing-stack); }
.side-blk__p { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-soft); margin-bottom: var(--spacing-stack); }
.side-blk__links { display: flex; flex-wrap: wrap; margin-top: calc(var(--spacing) * 1); margin-inline-start: calc(var(--spacing) * -2); }
.side-blk__links a { font-size: var(--text-xs); }
.notes li { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); }
.notes a { font-family: var(--font-display); font-size: var(--text-row); line-height: var(--text-row--line-height); text-decoration: none; }
.notes a:hover { text-decoration: underline; }
.notes time { flex: none; font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.tally4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 4) calc(var(--spacing) * 6); }
.tally4 dt { font-size: var(--text-xs); color: var(--color-ink-soft); }
.tally4 dd { font-family: var(--font-display); font-weight: var(--font-weight-title); font-size: var(--text-h3); line-height: 1.2; font-variant-numeric: tabular-nums; }

/* 사진란 — 신문 사진란: 틀 · 바탕 · 그림자 0 */
.photos { margin-top: var(--spacing-section); }
.photos__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--spacing) * 6); margin-top: var(--spacing-stack); }
.photos__grid a { display: grid; gap: calc(var(--spacing) * 1); text-decoration: none; }
.photos__name { margin-top: calc(var(--spacing) * 1.5); font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-base); line-height: 1.35; }
.photos__line { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-soft); }
.photos__meta { font-size: var(--text-2xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.photos__grid a:hover .photos__name { text-decoration: underline; }

.hub-low { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-block) var(--spacing-gutter); margin-top: var(--spacing-section); }
.hub-low .sec-h { margin-bottom: var(--spacing-stack); }
.fields { columns: 3; column-gap: calc(var(--spacing) * 6); }
.fields__g { break-inside: avoid; margin-bottom: calc(var(--spacing) * 4); }
.fields__h { font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-row); margin-bottom: calc(var(--spacing) * 1); }
.fields a { display: inline-block; padding-block: calc(var(--spacing) * 0.75); font-size: var(--text-sm); color: var(--color-ink-soft); text-decoration: none; }
.fields a:hover { color: var(--color-ink); text-decoration: underline; }

/* ══════════════════════════════════════ 방주 · 공용 목록 ══════════════════════════════════════ */
.rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-block); align-content: start; min-width: 0; }
.minis li { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1.5); }
.minis .t { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.minis__n { flex: none; font-size: var(--text-2xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.minis--words a { display: inline-flex; align-items: baseline; gap: calc(var(--spacing) * 2); font-family: var(--font-display); font-size: var(--text-row); text-decoration: none; }
.minis--words .rk { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-ink-soft); }
.minis--words a:hover { text-decoration: underline; }
.rules-sum { display: grid; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-soft); counter-reset: rs; }
.rules-sum li { counter-increment: rs; position: relative; padding-inline-start: 1.4em; }
.rules-sum li::before { content: counter(rs); position: absolute; left: 0; font-variant-numeric: tabular-nums; }
.rules-sum b { color: var(--color-ink); font-weight: var(--font-weight-head); }
.rail-p { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-soft); }
.staff { display: grid; gap: calc(var(--spacing) * 1.5); font-size: var(--text-sm); }
.staff div { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 3); }
.staff dt { color: var(--color-ink-soft); }
.heads-dl { display: grid; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); }
.heads-dl div { display: grid; grid-template-columns: calc(var(--spacing) * 12) minmax(0, 1fr); }
.heads-dl dt { font-family: var(--font-display); font-weight: var(--font-weight-head); }
.heads-dl dd { color: var(--color-ink-soft); }

/* ══════════════════════════════════════ (2) 갤러리 목록 ══════════════════════════════════════ */
.ghead { display: grid; grid-template-columns: calc(var(--spacing) * 30) minmax(0, 1fr); gap: calc(var(--spacing) * 6); align-items: start; }
.ghead__h {
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.ghead__line { margin-top: calc(var(--spacing) * 0.5); font-family: var(--font-display); font-size: var(--text-body); line-height: 1.5; }
.ghead__meta { margin-top: calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.ghead__role { margin-inline-start: 0.15em; }
.nw { white-space: nowrap; }
.ghead__acts { display: flex; flex-wrap: wrap; gap: 0 calc(var(--spacing) * 2); margin-top: 0; margin-inline-start: calc(var(--spacing) * -1); }
.ghead--rules { grid-template-columns: calc(var(--spacing) * 24) minmax(0, 1fr); margin-top: calc(var(--spacing) * 8); align-items: center; }

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3); }
.bar--heads { margin-top: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 2); }
.bar__per {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--spacing) * 9);
  padding-inline: calc(var(--spacing) * 3);
  margin-inline-start: auto;
  background: var(--color-surface-well);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}
.tog--heads .tg { min-height: calc(var(--spacing) * 9); }
.legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 2); font-size: var(--text-2xs); color: var(--color-ink-soft); }
.bar--foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 5); }
.bar--foot .pager { grid-column: 2; }
.bar--foot .inv { grid-column: 3; justify-self: end; }
.gsearch { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); max-width: calc(var(--spacing) * 150); margin: calc(var(--spacing) * 6) auto 0; }
.well--sel { flex: none; width: calc(var(--spacing) * 30); justify-content: space-between; }
.well--q { flex: 1; min-width: calc(var(--spacing) * 40); }

/* 말머리 거르기(견본 데이터 안에서) — 사진은 따로 찍은 몸통이 있고, 나머지는 행을 가린다 */
body[data-hf="normal"] .tbl--list tbody:not(.notices) tr:not([data-h="normal"]),
body[data-hf="q"] .tbl--list tbody:not(.notices) tr:not([data-h="q"]),
body[data-hf="info"] .tbl--list tbody:not(.notices) tr:not([data-h="info"]),
body[data-hf="review"] .tbl--list tbody:not(.notices) tr:not([data-h="review"]),
body[data-hf="photo"] .tbl--list tbody:not(.notices) tr:not([data-h="photo"]) { display: none; }
body[data-page="list"][data-tab="notice"] #board tbody:not(.notices) { display: none !important; }

/* ══════════════════════════════════════ (3) 글 보기 ══════════════════════════════════════ */
.gline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(var(--spacing) * 4); }
.gline__g { font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-h3); text-decoration: none; }
.gline__g:hover { text-decoration: underline; }
.gline__links { display: flex; }
.post__head { max-width: var(--spacing-measure); margin-top: calc(var(--spacing) * 6); }
.post__h-head { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-soft); }
.post__h {
  margin-block: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.post__meta { font-size: var(--text-xs); line-height: 1.7; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.dot { margin-inline: 0.55em; }
.post__body { max-width: var(--spacing-measure); margin-top: var(--spacing-block); font-size: var(--text-body); line-height: var(--text-body--line-height); }
.post__body > * + * { margin-top: calc(var(--spacing) * 5); }
.fig figcaption { margin-top: calc(var(--spacing) * 2); font-family: var(--font-display); font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--color-ink-soft); }
.fig--narrow { width: 60%; }
.post__body > .fig { margin-block: calc(var(--spacing) * 8); }

.vote { display: flex; justify-content: center; gap: calc(var(--spacing) * 3); max-width: var(--spacing-measure); margin-top: var(--spacing-section); }
.vote__b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  width: calc(var(--spacing) * 30);
  height: calc(var(--spacing) * 24);
  background: var(--color-surface-well);
  color: var(--color-ink);
}
.vote__b:hover { background: var(--color-surface-row); }
.vote__n {
  display: inline-flex;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-size: var(--text-tally);
  line-height: var(--text-tally--line-height);
  font-variant-numeric: tabular-nums;
}
.vote__n .d { display: inline-block; }
.vote__l { font-size: var(--text-xs); color: var(--color-ink-soft); }
.vote__b[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); }
.vote__b[aria-pressed="true"] .vote__l { color: var(--color-bg); }
.vote__note { max-width: var(--spacing-measure); margin-top: calc(var(--spacing) * 3); text-align: center; font-size: var(--text-xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.post__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); margin-top: var(--spacing-block); }
.post__tools-l { display: flex; flex-wrap: wrap; gap: 0 calc(var(--spacing) * 1); margin-inline-start: calc(var(--spacing) * -1); }

.cmts { margin-top: var(--spacing-section); }
.tbl--cmt td { vertical-align: baseline; }
.tbl--cmt .c-by { text-align: left; }
.tbl--cmt .c-cmt { text-align: left; font-size: var(--text-row); line-height: 1.6; color: var(--color-ink); }
.tbl--cmt .is-re .c-cmt { padding-inline-start: calc(var(--spacing-cell-x) + var(--spacing) * 6); }
.re { margin-inline-end: 0.4em; color: var(--color-ink-soft); }
.cmt__like { margin-inline-start: 0.6em; font-size: var(--text-2xs); color: var(--color-ink-soft); white-space: nowrap; }
.tbl--cmt tfoot td { padding-block: calc(var(--spacing) * 3); border-top: 1px solid var(--color-rule); text-align: left; }
.cmts__more td { text-align: center; }
.cmts__more a { display: inline-flex; align-items: center; min-height: var(--spacing-target); padding-inline: calc(var(--spacing) * 3); font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-ink); text-decoration: none; }
.cmts__more a:hover { background: var(--color-surface-row); }
.reply__closed { display: flex; align-items: center; gap: calc(var(--spacing) * 3); }
.well--line { flex: 1; min-width: 0; }
.reply__open { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.reply__in { min-height: 0; overflow: hidden; display: grid; gap: calc(var(--spacing) * 2); }
body[data-reply] .reply__open { grid-template-rows: 1fr; visibility: visible; }
body[data-reply] .reply__closed { display: none; }
.reply__cap { font-size: var(--text-xs); color: var(--color-ink-soft); }
.reply__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: calc(var(--spacing) * 2); }
.well--area3 { min-height: calc(var(--spacing) * 24); align-items: flex-start; padding-block: calc(var(--spacing) * 3); }
.reply__acts { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 3); }

.around { margin-top: var(--spacing-section); }

/* ══════════════════════════════════════ (4) 글쓰기 · (5) 로그인 ══════════════════════════════════════ */
.phead__h {
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.phead__line { margin-top: calc(var(--spacing) * 2); font-family: var(--font-display); font-size: var(--text-body); line-height: 1.5; }
.phead + .tbl { margin-top: var(--spacing-block); }
.tbl--login { max-width: calc(var(--spacing) * 140); }
.preview { display: grid; grid-template-rows: 0fr; visibility: hidden; margin-top: var(--spacing-block); }
.preview__clip { min-height: 0; overflow: hidden; }
body[data-preview] .preview { grid-template-rows: 1fr; visibility: visible; }
.preview__in { max-width: var(--spacing-measure); }
.noticeband {
  margin-bottom: var(--spacing-block);
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 5);
  background: var(--color-band);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

/* ══════════════════════════════════════ (6) 규칙 ══════════════════════════════════════ */
.noticefull { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5); background: var(--color-band); font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.noticefull__h { font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-row); margin-bottom: calc(var(--spacing) * 1); }
.art-toc-m { display: none; }
.tbl--info { margin-top: calc(var(--spacing) * 8); }
.arts { margin-top: calc(var(--spacing) * 8); columns: 1; column-gap: var(--spacing-gutter); }
.art { break-inside: avoid; padding: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); }
.art__h { font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-lead); line-height: var(--text-lead--line-height); margin-bottom: calc(var(--spacing) * 2); }
.art__cl { display: grid; gap: calc(var(--spacing) * 1.5); font-size: var(--text-row); line-height: 1.75; }
.art__cl li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); }
.art__n { color: var(--color-ink-soft); }
.art:target { background: var(--color-surface-row); }
.art:target .art__h::before { content: "▶ "; color: var(--color-accent); }
.hist { margin-top: var(--spacing-section); }
.hist .sec-h { margin-bottom: var(--spacing-stack); }

/* ══════════════════════════════════════ (7) 검색 ══════════════════════════════════════ */
.phead--search { margin-bottom: var(--spacing-block); }
.phead--search .bar { justify-content: space-between; }
.res + .res { margin-top: var(--spacing-section); }
.res .sec-h { margin-bottom: var(--spacing-stack); }
.res .pager { margin-top: calc(var(--spacing) * 4); }
mark { padding-inline: 0.1em; background: var(--color-surface-row); color: var(--color-ink); font-weight: var(--font-weight-title); }
.gcell { display: flex; align-items: center; gap: calc(var(--spacing) * 3); text-decoration: none; }
.gcell > span:last-child { display: grid; min-width: 0; }
.gcell b { font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-row); color: var(--color-ink); }
.gcell small { font-size: var(--text-2xs); color: var(--color-ink-soft); }
.gcell:hover b { text-decoration: underline; }
.ph--xs { flex: none; width: calc(var(--spacing) * 14); }
.stamp { flex: none; display: grid; place-items: center; width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); background: var(--color-surface-well); font-family: var(--font-display); font-weight: var(--font-weight-title); font-size: var(--text-h3); color: var(--color-ink); }
.tbl--gall td { padding-block: calc(var(--spacing) * 2); }
.tbl--rcmt .c-t a { color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl--rcmt .c-t a:hover { text-decoration: underline; }
body[data-page="search"][data-tab="gall"] :is(.res--post, .res--cmt),
body[data-page="search"][data-tab="post"] :is(.res--gall, .res--cmt),
body[data-page="search"][data-tab="cmt"] :is(.res--gall, .res--post) { display: none; }
body[data-page="search"]:not([data-tab="post"]) .res--post tbody tr:nth-child(n + 16) { display: none; }
body[data-page="search"]:not([data-tab="post"]) .res--post .pager,
body[data-page="search"][data-tab="post"] .res__more { display: none; }
.res__more { text-align: right; }

/* ── 꼬리 (먹띠) ─────────────────────────────────────────────────────────────── */
.tail { background: var(--color-band); }
.tail__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 6) var(--spacing-gutter);
  padding-block: calc(var(--spacing) * 10) calc(var(--spacing) * 12);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.tail__h { font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-row); margin-bottom: calc(var(--spacing) * 2); }
.tail__notice p + p { margin-top: calc(var(--spacing) * 1); color: var(--color-ink-soft); }
.tail__links { display: flex; flex-direction: column; align-items: flex-start; }
.tail__links a { display: inline-flex; align-items: center; min-height: var(--spacing-target); text-decoration: none; }
.tail__links a:hover { text-decoration: underline; }
.tail__colo { color: var(--color-ink-soft); font-size: var(--text-xs); }

/* ══════════════════════════════════════ 너비 ══════════════════════════════════════ */

/* 720 이상 — 표는 표로 선다 */
@media (min-width: 45rem) {
  .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "best best" "pop side"; }
  .hub__pop { display: block; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .tail__in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .arts { columns: 2; }
}

/* 720–959 — 목록 표 7열 → 5열 (말머리는 제목 앞 [사진] 으로, 조회 열은 뺀다) */
@media (max-width: 59.99rem) {
  .tbl--list .c-head,
  .tbl--list .c-view { display: none; }
  .tbl--list .hp { display: inline; }
  .photos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toc__stat { display: none; }
}

@media (min-width: 60rem) {
  .hub { grid-template-columns: minmax(0, 1fr) var(--spacing-hub-side); grid-template-areas: "best pop" "best side"; grid-template-rows: auto 1fr; }
  .hub-low { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* 1120 이상 — 방주가 붙는다 (가장 좁은 본문 칸 720) */
@media (min-width: 70rem) {
  .cols { grid-template-columns: minmax(0, 1fr) var(--spacing-rail); }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .rail-blk--sticky { position: sticky; top: calc(var(--spacing) * 4); }
}
@media (max-width: 69.99rem) {
  .art-toc-m { display: block; margin-top: var(--spacing-stack); }
  .page--rules .rail { display: none; }
  .art-toc-m summary { display: inline-flex; align-items: center; min-height: var(--spacing-target); font-family: var(--font-display); font-weight: 500; list-style: none; }
  .art-toc-m summary::-webkit-details-marker { display: none; }
  .art-toc-m .leaders { max-width: calc(var(--spacing) * 110); }
}

/* 1200 이상 — 허브 3단 (가장 좁은 가운데 단 483) */
@media (min-width: 75rem) {
  .hub { grid-template-columns: var(--spacing-hub-side) minmax(0, 1fr) var(--spacing-hub-side); grid-template-areas: "pop best side"; grid-template-rows: auto; }
}

/* 720 미만 — 모바일: 표 행을 두 줄 묶음으로 다시 짠다(가로 스크롤 0). 표의 의미는 그대로 */
@media (max-width: 44.99rem) {
  .topline { display: none; }
  .mast__in,
  .mast--big .mast__in { min-height: calc(var(--spacing) * 14); gap: calc(var(--spacing) * 3); align-items: center; padding-top: 0; flex-wrap: wrap; }
  .mark { font-size: 1.625rem; }
  .mast--big .mark { font-size: 1.875rem; }
  .mast__sub,
  .mast .well--search { display: none; }
  .mast__m { display: flex; margin-inline-start: auto; margin-inline-end: calc(var(--spacing) * -2.5); }
  .mast__m a { display: inline-flex; align-items: center; min-height: var(--spacing-target); padding-inline: calc(var(--spacing) * 2.5); font-family: var(--font-display); font-weight: var(--font-weight-head); font-size: var(--text-row); text-decoration: none; }
  .mast__m a[aria-current="page"] { background: var(--color-surface-well); }
  body[data-page="search"] .mast .well--search { display: flex; order: 3; flex-basis: 100%; width: 100%; margin-bottom: calc(var(--spacing) * 3); }
  .issue-m { display: block; padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-2xs); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
  .toc__list { flex: 1; margin-inline-start: calc(var(--spacing) * -2); }
  .toc__i { order: var(--o); }
  .toc__i--x { display: none; }
  .toc__i a,
  .toc__more summary { padding-inline: calc(var(--spacing) * 2); }
  .toc__more { display: block; order: 4; margin-inline-start: auto; }
  .toc__stat { display: none; }

  .page { padding-top: calc(var(--spacing) * 3); }
  .popband { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(var(--spacing) * 2.5); margin-bottom: calc(var(--spacing) * 3); font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.6; }
  .popband__h { font-weight: var(--font-weight-title); }
  .popband ol { display: contents; }
  .popband a { display: inline-block; padding-block: calc(var(--spacing) * 0.5); text-decoration: none; }
  .popband .rk { margin-inline-end: 0.25em; font-family: var(--font-sans); font-size: var(--text-2xs); color: var(--color-ink-soft); }
  .popband__more {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: var(--spacing-target);
    min-height: var(--spacing-target);
    margin-block: calc((var(--spacing-target) - 1lh) / -2);
    font-weight: var(--font-weight-title);
  }
  .hub { gap: var(--spacing-block); }
  .cap-row .sec-h { font-size: var(--text-lead); }

  /* 두 줄 묶음: 1줄 제목(말머리 [사진] 포함, 최대 2줄) · 2줄 번호 · 글쓴이 · 시각 · 조회 · (빈) · 추천 */
  .tbl--rows { position: relative; display: block; }
  .tbl--rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--rows tbody { display: block; }
  .tbl--rows tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, auto) minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: calc(var(--spacing) * 2.5);
    row-gap: calc(var(--spacing) * 1);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
    border-top: 1px solid var(--color-rule);
  }
  .tbl--rows tbody > tr:first-child { border-top: 0; }
  .tbl--rows .notices ~ tbody > tr:first-child { border-top: 1px solid var(--color-rule); }
  .tbl--rows td { display: block; padding: 0; border: 0; text-align: left; }
  .tbl--rows tbody > tr:first-child > td { border: 0; }
  .tbl--rows :where(td:not(.c-t)) { grid-row: 2; font-size: var(--text-2xs); line-height: var(--text-2xs--line-height); }
  .tbl--rows .c-t { grid-column: 1 / -1; grid-row: 1; }
  .tbl--rows td.c-rec { grid-column: -2 / -1; text-align: right; }
  .tbl--rows .c-head { display: none; }
  .tbl--rows.tbl--list td.c-view { display: block; }
  .tbl--rows .c-no::before { content: "No."; }
  .tbl--rows .c-view::before { content: "조회 "; }
  .tbl--rows td.c-rec::before { content: "추천 "; }
  .tbl--rows .hp { display: inline; }
  .tbl--rows .tl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tbl--rows .tl > * + * { margin-inline-start: 0.35em; }
  .tbl--rows .tl .t { display: inline; white-space: normal; overflow: visible; }
  /* 행 전체가 제목 링크(터치 타깃) — 갤러리 링크는 그 위로 */
  .tbl--rows .tl .t::after { content: ""; position: absolute; inset: 0; }
  .tbl--rows .c-gal a { position: relative; z-index: 1; }
  .tbl--rows tr.is-notice { grid-template-columns: auto minmax(0, 1fr); }
  .tbl--rows tr.is-notice .c-no { grid-row: 1; grid-column: 1; font-size: var(--text-xs); }
  .tbl--rows tr.is-notice .c-no::before,
  .tbl--rows tr.is-now .c-no::before { content: none; }
  .tbl--rows tr.is-notice .c-t { grid-column: 2; }
  .tbl--rows tr.is-notice .tl { -webkit-line-clamp: 1; }
  .tbl--rows tr.is-notice td:not(.c-no, .c-t) { display: none; }
  .tbl--rows tr.is-now { background: var(--color-surface-row); }
  .tbl--new .c-first { display: none; }
  .tbl--gall td.c-rec::before { content: "상주 "; }
  .tbl--gall td.c-view::before { content: "오늘 글 "; }
  .tbl--gall td.c-t { grid-row: 1; }
  .tbl--gall .gcell { padding-block: calc(var(--spacing) * 1); }
  .tbl--rows tr:hover > td { background: none; }

  /* 댓글 — 1줄 필명 · 시각, 2줄 댓글 */
  .tbl--cmt { display: block; position: relative; }
  .tbl--cmt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--cmt tbody,
  .tbl--cmt tfoot { display: block; }
  .tbl--cmt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 1); border-top: 1px solid var(--color-rule); }
  .tbl--cmt tbody > tr:first-child { border-top: 0; }
  .tbl--cmt td { display: block; padding: 0; border: 0; }
  .tbl--cmt tbody .c-by { grid-row: 1; grid-column: 1; font-size: var(--text-xs); }
  .tbl--cmt tbody .c-time { grid-row: 1; grid-column: 2; }
  .tbl--cmt tbody .c-cmt { grid-row: 2; grid-column: 1 / -1; }
  .tbl--cmt .is-re .c-cmt { padding-inline-start: calc(var(--spacing) * 4); }
  .tbl--cmt tfoot tr { display: block; }
  .tbl--cmt tfoot td { display: block; padding: calc(var(--spacing) * 3) 0; border-top: 1px solid var(--color-rule); }
  .reply__closed { flex-wrap: wrap; }
  .well--line { flex-basis: 100%; }
  .reply__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 서식 표 — th 가 td 위로 */
  .tbl--sheet,
  .tbl--sheet tbody,
  .tbl--sheet tr,
  .tbl--sheet caption { display: block; }
  .tbl--sheet tbody th,
  .tbl--sheet td { display: block; width: auto; padding-inline: 0; }
  .tbl--sheet tbody th { padding-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 1.5); border-top: 1px solid var(--color-rule); }
  .tbl--sheet tbody td { border-top: 0; padding-top: 0; padding-bottom: calc(var(--spacing) * 3); }
  .tbl--sheet tbody > tr:first-child > th { border-top: 0; }
  .tbl--sheet tr[class] > td { border-top: 1px solid var(--color-rule); padding-top: calc(var(--spacing) * 3); }
  .tbl--sheet tr.sheet__fail > td { border-top: 0; padding-inline: calc(var(--spacing) * 3); }
  .tbl--sheet tr.sheet__fail,
  .tbl--sheet tr.sheet__sent { display: none; }
  body[data-fail] .tbl--sheet tr.sheet__fail,
  body[data-sent] .tbl--sheet tr.sheet__sent { display: block; }
  body[data-fail] .sheet__fail + tr > th { border-top: 1px solid var(--color-rule); }
  .tbl--sheet tr.sheet__sent > td { padding-inline: calc(var(--spacing) * 3); }
  .tbl--info,
  .tbl--info tbody { display: block; }
  .tbl--info tr { display: grid; grid-template-columns: calc(var(--spacing) * 22) minmax(0, 1fr); }
  .tbl--info tbody th { width: auto; }
  .tbl--sheet td.sheet__row2 { display: flex; }
  .tbl--info tbody > tr:first-child > :nth-child(n + 3) { border-top: 1px solid var(--color-rule); }
  .well--area { min-height: calc(var(--spacing) * 56); }
  .pair { grid-template-columns: minmax(0, 1fr); }

  /* 목록 */
  .ghead { grid-template-columns: calc(var(--spacing) * 16) minmax(0, 1fr); gap: calc(var(--spacing) * 3); }
  .ghead--rules { grid-template-columns: calc(var(--spacing) * 14) minmax(0, 1fr); margin-top: var(--spacing-stack); }
  .ghead__line { font-size: var(--text-row); margin-top: calc(var(--spacing) * 0.5); }
  .ghead__meta { margin-top: calc(var(--spacing) * 1); }
  .ghead__acts { grid-column: 1 / -1; margin-top: 0; }
  .bar { margin-top: calc(var(--spacing) * 3); }
  .bar__per { display: none; }
  .bar > .inv { margin-inline-start: auto; }
  .tog--heads .tg { min-height: var(--spacing-target); padding-inline: calc(var(--spacing) * 2.5); }
  .bar--foot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bar--foot .pager,
  .bar--foot .inv { grid-column: 1; }
  .bar--foot .inv { justify-self: stretch; }
  .pager li:nth-child(n + 6),
  .pg[data-page="first"],
  .pg[data-page="last"] { display: none; }
  .gsearch .well--sel { width: calc(var(--spacing) * 28); }
  .legend { display: grid; }

  /* 글 보기 */
  .post__head { margin-top: calc(var(--spacing) * 4); }
  .post__body { margin-top: calc(var(--spacing) * 8); }
  .fig--narrow { width: 100%; }
  .vote { margin-top: var(--spacing-block); }
  .rail { gap: calc(var(--spacing) * 10); }

  /* 사진란 3×2 — 설명은 갤러리명만 */
  .photos__grid { gap: calc(var(--spacing) * 3); }
  .photos__line,
  .photos__meta { display: none; }
  .photos__name { font-size: var(--text-sm); }
  .fields { columns: 2; }
  .noticeband { padding-inline: calc(var(--spacing) * 4); }
  .phead--search .bar { justify-content: flex-start; }
  .phead--search .bar > .tog + .tog { flex-basis: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════ 움직임 — reduced-motion 에서는 0 ══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-quick); }

  .tbl tbody tr > td,
  .tg, .brk, .pg, .check, .well, .inv, .vote__b,
  .toc__i a, .toc__more summary, .cmts__more a { transition: background-color 120ms var(--ease-quick), transform 90ms var(--ease-quick); }
  .inv:active, .tg:active, .vote__b:active, .brk:active { transform: scale(0.98); }

  /* 새 글 한 줄 도착 — 로드 때 한 번(320ms). main.js 가 700ms 뒤 is-arrival 을 떼어 다시 돌지 않는다 */
  .is-arrival > tr:first-child { animation: gh-arrive 320ms var(--ease-paper) both; }
  /* 표 몸통 교차 — 탭 · 쪽 · 정렬 */
  tbody.is-swap { animation: gh-fade 160ms var(--ease-quick) both; }
  .vote__n .d.is-in { animation: gh-tick 240ms var(--ease-paper) both; }
  .reply__open,
  .preview { transition: grid-template-rows 220ms var(--ease-paper), visibility 220ms; }
  .art:target { animation: gh-row 400ms var(--ease-paper) both; }
}
@keyframes gh-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes gh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gh-tick { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gh-row { from { background-color: var(--color-bg); } to { background-color: var(--color-surface-row); } }