/* modakbul — 화면 규칙. 값은 tokens.css 의 var() 만 쓴다(raw 색 0).
 * 원칙 3줄: 줄이 주인공(줄무늬로 가른다 · 1px 선 0) · 색은 사람과 불에만(불꽃 한 화면 ≤ 4) · 움직임은 대답(기본 상태 모션 0).
 * 폭: < 720 1단 유동 · 720–1023 1단 672 · 1024–1279 672+32+272 · ≥ 1280 784+48+304 (wireframe 0절). sticky·fixed 0.
 */

/* ── 리셋 (: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, ul, ol, blockquote, table) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:where(table) { border-collapse: collapse; }
[hidden] { display: none !important; }

:root {
  --frame: calc(100% - 2 * var(--spacing-page-x));
}
@media (min-width: 720px) {
  :root { --frame: var(--spacing-col-main-md); }
}
@media (min-width: 1024px) {
  :root { --frame: calc(var(--spacing-col-main-md) + var(--spacing-col-gap-md) + var(--spacing-col-side-md)); }
}
@media (min-width: 1280px) {
  :root { --frame: calc(var(--spacing-col-main) + var(--spacing-col-gap) + var(--spacing-col-side)); }
}

html {
  background: var(--color-bg);
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100svh;
  /* 한글은 낱말 단위로 줄을 바꾼다(qa-1 P2-1). 칸보다 긴 낱말만 아무 데서나 끊는다 */
  word-break: keep-all; overflow-wrap: anywhere;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
  color: var(--color-ink);
  background: var(--color-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tnum { font-variant-numeric: tabular-nums; }

.ico {
  width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ico--s { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); }

.skip {
  position: absolute; left: var(--spacing-page-x); top: calc(var(--spacing) * -20); z-index: 20;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-band); color: var(--color-cream); font-weight: 600; border-radius: var(--radius-sm);
}
.skip:focus { top: calc(var(--spacing) * 2); }

:focus-visible { outline: 3px solid var(--color-ember); outline-offset: 2px; }
.band :focus-visible { outline-color: var(--color-cream); }

/* ── Dongle 공통 — 짧은 낱말에만. 자간 0 · 700/400 둘만 ─────────── */
.brand__word, .nav__a, .tab, .topic, .pagehead__h, .post__title, .post__tag, .blk__h, .stat__n,
.row__tag, .row__rank, .new, .writer, .op, .lvl, .badge, .vote__n, .c__re, .pager__n, .comments__h,
.below__h, .section__h, .notice-box__h, .rule__n, .levels__n, .lvls__n, .top5__r, .week__d, .rules-mini__n,
.sw__fire, .foot__word, .menu__name, .boards__t, .hall__r, .ava__letter, .pager__gap {
  font-family: var(--font-display);
  letter-spacing: 0;
}
/* 글자 안에 끼는 Dongle 낱말 — 줄 높이를 밀어 올리지 않게 inline 상자 높이 0 */
.new, .writer, .op, .lvl { font-weight: 400; font-size: var(--text-tag); line-height: 0; }
.new, .writer, .op { color: var(--color-ember); margin-inline-start: calc(var(--spacing) * 1.5); }
.lvl { color: var(--color-ink-muted); margin-inline-start: calc(var(--spacing) * 2); }

/* ── 닉네임 불빛 — 글자에만 ─────────────────────────────── */
.nick, .row__nick, .c__nick, .people__n, .byline__nick, .hall__nick, .profile__nick { font-weight: 600; }
.n-pat { color: var(--color-nick-pat); }
.n-ssuk { color: var(--color-nick-ssuk); }
.n-sol { color: var(--color-nick-sol); }
.n-mul { color: var(--color-nick-mul); }
.n-jjok { color: var(--color-nick-jjok); }
.n-jin { color: var(--color-nick-jin); }
.n-op { color: var(--color-ink); }

/* ── 버튼 ─────────────────────────────────────────────────── */
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 4);
  background: var(--color-band); color: var(--color-cream);
  font-size: var(--text-ui); line-height: 1; font-weight: 600; white-space: nowrap;
  border-radius: var(--radius-sm);
}
.btn-ink--block { width: 100%; min-height: calc(var(--spacing) * 12); }
/* 머리에 먹 글쓰기가 보이는 폭(≥ 720)에서 본 칸의 두 번째 글쓰기는 보조 — 같은 먹 덩이가 둘이 되지 않게(qa-1 P3-7) */
@media (min-width: 720px) {
  .btn-ink--sub { background: transparent; color: var(--color-ink); border: 2px solid var(--color-ink); }
}
.btn-ink[aria-disabled="true"] { cursor: not-allowed; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--spacing-touch); height: var(--spacing-touch); border-radius: var(--radius-sm); color: var(--color-ink);
}
.textbtn {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); min-height: var(--spacing-touch);
  font-size: var(--text-meta); line-height: var(--text-meta--line-height); font-weight: 600; color: var(--color-ink-muted);
}
.more {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); min-height: var(--spacing-touch);
  font-weight: 600; color: var(--color-ink);
}
.more--list { margin-top: calc(var(--spacing) * 2); padding-inline: var(--spacing-row-x); }

.btn-ink, .icon-btn, .textbtn, .tab, .topic, .sort, .alert, .vote__btn, .spoiler__btn, .c__up, .c__more, .c__all,
.band__alert, .pager__n, .pager__step, .sw, .notice__head, .nav__a {
  transition: transform 100ms var(--ease-press);
}
:is(.btn-ink, .icon-btn, .textbtn, .topic, .sort, .alert, .spoiler__btn, .c__up, .c__more, .c__all, .band__alert, .pager__n, .pager__step, .sw, .notice__head):active {
  transform: scale(0.97);
}
.vote__btn:active { transform: scale(0.96); }

@media (hover: hover) {
  .icon-btn:hover, .alert:hover, .c__all:hover, .textbtn:hover { background: var(--color-surface-straw); }
  .textbtn:hover { color: var(--color-ink); }
  .more:hover, .tools__login:hover, .crumbs a:hover, .foot__links a:hover, .recent a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .nav__a:hover, .tab:hover, .topic:hover, .pager__n:hover, .sort:hover { color: var(--color-ink); }
}

/* ── 1 방송 띠 ─────────────────────────────────────────────── */
.band { background: var(--color-band); color: var(--color-cream); }
.band__in {
  width: var(--frame); margin-inline: auto; min-height: var(--spacing-band);
  display: flex; align-items: center; gap: calc(var(--spacing) * 3);
}
.band__msg {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--spacing) * 2);
  font-size: var(--text-meta); line-height: var(--text-meta--line-height); font-weight: 500;
}
.band__off, .band__on { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band__on { display: none; }
.band[data-onair="true"] .band__on { display: block; }
.band[data-onair="true"] .band__off { display: none; }
.band__dot { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); color: var(--color-flame); flex: none; }
.band[data-onair="true"] .band__dot { animation: pulse 1600ms ease-in-out infinite; }
.band__alert { flex: none; display: inline-flex; align-items: center; min-height: var(--spacing-band); }
.band__alert-face {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5);
  min-height: calc(var(--spacing) * 8); padding-inline: calc(var(--spacing) * 3);
  background: color-mix(in oklab, var(--color-cream) 10%, var(--color-band));
  border-radius: var(--radius-sm); font-size: var(--text-meta); line-height: 1; font-weight: 600;
}
.band__alert .ico { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); }
.band__alert-on { display: none; }
/* 방송 중에는 알림 버튼 대신 보러 가기 */
.band__watch { display: none; }
.band[data-onair="true"] .band__alert { display: none; }
.band[data-onair="true"] .band__watch { display: inline-flex; }
.band__alert[aria-pressed="true"] .band__alert-on { display: inline; animation: fade-in 150ms var(--ease-out); }
.band__alert[aria-pressed="true"] .band__alert-off { display: none; }
.band__alert[aria-pressed="true"] .ico { fill: currentColor; }

/* ── 2 머리 ────────────────────────────────────────────────── */
.head__in {
  width: var(--frame); margin-inline: auto;
  display: grid; align-items: center; column-gap: calc(var(--spacing) * 6);
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav tools";
  min-height: calc(var(--spacing) * 22);
}
.brand { grid-area: brand; display: inline-flex; align-items: center; min-height: var(--spacing-touch); gap: calc(var(--spacing) * 2); color: var(--color-ink); }
.brand__mark { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); flex: none; }
.mk-ink { fill: var(--color-ink); }
.mk-ember { fill: var(--color-ember); }
.brand__word { font-weight: 700; font-size: var(--text-mark); line-height: var(--text-mark--line-height); padding-top: 0.08em; }
/* 홈만 워드마크가 제목이다. 다른 쪽에서는 쪽 제목(text-page)이 가장 큰 글자 — 워드마크를 한 단계 내린다 */
body:not([data-page="home"]) .brand__word { font-size: var(--text-mark-sub); line-height: var(--text-mark-sub--line-height); }
.brand__sub { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-muted); margin-inline-start: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 1); }
.nav { grid-area: nav; display: flex; justify-content: center; gap: calc(var(--spacing) * 5); }
.nav__a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--spacing-touch); min-width: var(--spacing-touch);
  font-weight: 400; font-size: var(--text-nav); line-height: var(--text-nav--line-height); color: var(--color-ink-muted);
  padding-top: 0.1em;
}
.nav__a[aria-current="page"] { color: var(--color-ink); }
.nav__a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--color-ember);
}
.tools { grid-area: tools; display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
.tools__login { display: inline-flex; align-items: center; min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 1); font-weight: 600; }
.tools__menu { display: none; }
.tools__menu .ico--close { display: none; }
.tools__menu[aria-expanded="true"] .ico--open { display: none; }
.tools__menu[aria-expanded="true"] .ico--close { display: block; }
.icon-btn[aria-expanded="true"] { background: var(--color-surface-straw); }

/* ── 쪽 틀 ─────────────────────────────────────────────────── */
.page { position: relative; }
.wrap {
  width: var(--frame); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  row-gap: var(--spacing-section);
  padding-block: calc(var(--spacing) * 4) var(--spacing-section);
}
.main { min-width: 0; }
.side { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-block); }

/* 검색 줄 · 펼침(Accordion) */
.acc {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 200ms var(--ease-out), visibility 200ms;
}
.acc[data-open="true"] { grid-template-rows: 1fr; visibility: visible; }
.acc__in { min-height: 0; overflow: hidden; }
.searchrow__in {
  width: var(--frame); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
}
.field--search { flex: 1 1 20rem; }
.recent { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-ink-muted); }
.recent__label { font-weight: 600; margin-inline-end: calc(var(--spacing) * 1); }
.recent a { color: var(--color-ink); font-weight: 600; display: inline-block; padding-block: calc(var(--spacing) * 3); }

/* 모바일 메뉴 판 (< 720 만) */
.menu { display: none; }

/* ── 칸 모양 (입력칸이 아니다 — 그림) ─────────────────────── */
.field {
  display: flex; align-items: center; gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 12); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
  background: var(--color-surface); color: var(--color-ink);
  border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: 2px solid var(--color-ink);
}
.field .ico { color: var(--color-ink-muted); }
.field__hint { color: var(--color-ink-muted); }
.field__value { font-weight: 500; font-size: var(--text-row); }
.field__count { margin-inline-start: auto; font-size: var(--text-meta); color: var(--color-ink-muted); }
.field__link { margin-inline-start: auto; font-weight: 600; color: var(--color-ember); display: inline-flex; align-items: center; min-height: var(--spacing-touch); }
.field--area { align-items: flex-start; min-height: calc(var(--spacing) * 22); }
.field--area .field__link { align-self: flex-end; }

/* ── 탭 줄 ─────────────────────────────────────────────────── */
.tabrow {
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--spacing) * 4);
  border-bottom: 2px solid var(--color-ink);
}
.tabrow .btn-ink { margin-bottom: calc(var(--spacing) * 2); }
.tabs { display: flex; gap: calc(var(--spacing) * 7); }
.tabs--rule { border-bottom: 2px solid var(--color-ink); margin-bottom: calc(var(--spacing) * 1); }
.tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--spacing-touch);
  min-height: calc(var(--spacing) * 14); padding-top: calc(var(--spacing) * 2);
  font-weight: 700; font-size: var(--text-tab); line-height: var(--text-tab--line-height); color: var(--color-ink-muted);
}
.tab[aria-current="true"] { color: var(--color-ink); }
.tab[aria-current="true"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 4px; background: var(--color-ember);
  transform-origin: left center;
}
.tab.is-flip::after { animation: bar-in 200ms var(--ease-in-out); }
.tab--s { font-size: var(--text-tab-sm); line-height: var(--text-tab-sm--line-height); min-height: calc(var(--spacing) * 12); }

/* 새 글 알림 줄 */
.alert {
  width: 100%; min-height: var(--spacing-touch);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1.5);
  color: var(--color-ember); font-weight: 600;
}
.alert .ico { width: calc(var(--spacing) * 4.5); height: calc(var(--spacing) * 4.5); }
.panel__note { padding: calc(var(--spacing) * 3) var(--spacing-row-x); font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-ink-muted); }

/* ── 7 줄 (목록 행) — 장판 줄무늬, 선 0 ─────────────────────── */
.list > li:nth-child(even of :not([hidden])) { background: var(--color-surface); }
.row {
  position: relative;
  display: grid; align-items: center; column-gap: var(--spacing-row-x);
  grid-template-columns: var(--spacing-tag-col) minmax(0, 1fr) var(--spacing-nick-col) var(--spacing-time-col) var(--spacing-badge-col);
  grid-template-areas: "tag main nick time badge";
  min-height: var(--spacing-row); padding: var(--spacing-row-y) var(--spacing-row-x);
}
.row__tag { grid-area: tag; font-weight: 400; font-size: var(--text-tag); line-height: 0.75; color: var(--color-ink-muted); white-space: nowrap; padding-top: 0.12em; }
.row__tag.is-notice { color: var(--color-ember); }
.row__main { grid-area: main; min-width: 0; display: flex; align-items: baseline; }
.row__link {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; font-size: var(--text-row); line-height: var(--text-row--line-height);
}
.row__link::after { content: ""; position: absolute; inset: 0; }
.row__cmt { flex: none; white-space: nowrap; margin-inline-start: calc(var(--spacing) * 1.5); font-size: var(--text-meta); font-weight: 600; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.row__nick { grid-area: nick; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-meta); line-height: var(--text-meta--line-height); }
.row__time { grid-area: time; text-align: end; font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__badge { grid-area: badge; justify-self: end; margin-block: calc(var(--spacing) * -1); }
.row--pin .row__link { font-weight: 600; }
.row--here .row__link { font-weight: 600; }
.here { flex: none; display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1); margin-inline-start: calc(var(--spacing) * 2); font-size: var(--text-meta); font-weight: 600; color: var(--color-ember); }
.here__dot { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); color: var(--color-ember); }
.list > li.row--here { background: var(--color-surface-straw); }
@media (hover: hover) {
  .list > li.row:hover { background: var(--color-surface-straw); }
}
.row--tint { animation: tint 1200ms var(--ease-out); }
.row__rank { grid-area: rank; position: relative; top: 0.1em; font-weight: 700; font-size: var(--text-rank); line-height: 0.6; color: var(--color-ink-muted); text-align: center; font-variant-numeric: tabular-nums; }
.row__rank.is-top { color: var(--color-ink); }
.list--rank .row {
  grid-template-columns: var(--spacing-rank-col) var(--spacing-tag-col) minmax(0, 1fr) var(--spacing-nick-col) var(--spacing-time-col) var(--spacing-badge-col);
  grid-template-areas: "rank tag main nick time badge";
}
.row--cmt { grid-template-columns: var(--spacing-tag-col) minmax(0, 1fr) var(--spacing-time-col) var(--spacing-time-col); grid-template-areas: "tag main up time"; }
.row--cmt .row__main { flex-direction: column; align-items: stretch; }
.row--cmt .row__link { font-size: var(--text-ui); }
.row__on { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__up { grid-area: up; display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(var(--spacing) * 1); font-size: var(--text-meta); color: var(--color-ink-muted); }

/* ── 10 추천 배지 — 이 장의 유일한 알약. 재 → 불씨 → 불꽃 ─────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 7.5); padding-inline: calc(var(--spacing) * 2);
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--text-count); line-height: var(--text-count--line-height); color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.badge .num { display: inline-flex; padding-top: 0.14em; }
.b-ash { background: var(--color-surface-straw); }
.b-spark { background: var(--color-surface-spark); }
.b-flame { background: var(--color-surface-flame); }
.badge.is-swap { animation: fade-in 150ms var(--ease-out); }

/* Number ticker — 자릿수가 아래에서 위로 */
.tick__d { position: relative; display: inline-block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.tick__new { display: inline-block; animation: tick-in 240ms var(--ease-out); }
.tick__old { position: absolute; left: 0; top: 0; animation: tick-out 240ms var(--ease-out) forwards; }

/* ── 쪽 머리 ───────────────────────────────────────────────── */
.pagehead { padding-block: calc(var(--spacing) * 2) calc(var(--spacing) * 5); }
.pagehead__h { font-weight: 700; font-size: var(--text-page); line-height: var(--text-page--line-height); padding-top: 0.1em; }
.pagehead__desc { margin-top: calc(var(--spacing) * 1); color: var(--color-ink-muted); max-width: 40rem; }
.pagehead__meta {
  margin-top: calc(var(--spacing) * 3); display: flex; align-items: center; gap: calc(var(--spacing) * 1.5);
  font-size: var(--text-meta); color: var(--color-ink-muted);
}
.pagehead__meta b { color: var(--color-ink); font-weight: 600; }
.pagehead__meta .btn-ink { margin-inline-start: auto; }
.strip {
  margin-bottom: calc(var(--spacing) * 5); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-surface-straw); color: var(--color-ink);
}

/* 주제 필터 · 정렬 */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border-bottom: 2px solid var(--color-ink);
}
.topics { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 5); }
.topic {
  position: relative; display: inline-flex; align-items: center; min-height: var(--spacing-touch); padding-top: 0.1em;
  font-weight: 400; font-size: var(--text-nav); line-height: var(--text-nav--line-height); color: var(--color-ink-muted);
}
.topic[aria-pressed="true"] { color: var(--color-ink); }
.topic[aria-pressed="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--color-ember); }
.filters .topic[aria-pressed="true"]::after { bottom: -2px; height: 4px; }
.sorts { display: flex; align-items: center; gap: calc(var(--spacing) * 1); }
.sorts__dot { color: var(--color-ink-muted); }
.sort { display: inline-flex; align-items: center; min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 1); font-size: var(--text-meta); color: var(--color-ink-muted); }
.sort[aria-pressed="true"] { color: var(--color-ink); font-weight: 600; }
.result { padding: calc(var(--spacing) * 3) var(--spacing-row-x); font-weight: 600; }
.result b, .row__link b { font-weight: 800; }
.empty { padding: calc(var(--spacing) * 8) var(--spacing-row-x); color: var(--color-ink-muted); }
.is-swap { animation: fade-in 120ms var(--ease-out); }

/* 15 쪽 이동 — 네모·알약 없음 */
.pager { display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 6); }
.pager__nums { display: flex; align-items: center; }
.pager__n {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--spacing-touch); height: var(--spacing-touch); padding-top: 0.12em;
  font-weight: 700; font-size: var(--text-page-no); line-height: var(--text-page-no--line-height); color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
.pager__n[aria-current="page"] { color: var(--color-ink); }
.pager__n[aria-current="page"]::after { content: ""; position: absolute; inset-inline: calc(var(--spacing) * 3); bottom: calc(var(--spacing) * 1); height: 3px; background: var(--color-ember); }
.pager__gap { font-size: var(--text-page-no); color: var(--color-ink-muted); padding-inline: calc(var(--spacing) * 1); }
.pager__step { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 0.5); min-height: var(--spacing-touch); padding-inline: calc(var(--spacing) * 1); font-size: var(--text-meta); font-weight: 600; color: var(--color-ink-muted); }
.searchline { display: flex; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 6); }
.field--select { flex: none; gap: calc(var(--spacing) * 1); font-size: var(--text-meta); font-weight: 600; }
.field--select .ico { transform: rotate(90deg); }
.field--grow { flex: 1; min-width: 0; }
.field--grow .field__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchline .btn-ink { min-height: calc(var(--spacing) * 12); }

/* ── 글 보기 ───────────────────────────────────────────────── */
.crumbs { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-ink-muted); padding-block: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
.crumbs a { display: inline-block; padding-block: calc(var(--spacing) * 3); margin-block: calc(var(--spacing) * -3); }
.post__tag { font-weight: 400; font-size: var(--text-tag); line-height: var(--text-tag--line-height); color: var(--color-ink-muted); }
.post__title {
  margin-top: calc(var(--spacing) * 2);
  font-weight: 700; font-size: var(--text-post); line-height: var(--text-post--line-height);
  text-wrap: pretty; overflow-wrap: anywhere; word-break: keep-all;
}
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 5); padding-bottom: calc(var(--spacing) * 5);
}
.byline__who { display: inline-flex; align-items: baseline; font-size: var(--text-ui); }
.byline__meta { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-ink-muted); }
.byline__badge { margin-inline-start: auto; }
.post__body { font-size: var(--text-body); line-height: var(--text-body--line-height); padding-top: calc(var(--spacing) * 2); }
.post__body > * + * { margin-top: calc(var(--spacing) * 5); }
.post__body p { max-width: 40rem; text-wrap: pretty; word-break: keep-all; }
.timeline { width: 100%; font-size: var(--text-ui); line-height: var(--text-ui--line-height); }
.timeline tr:nth-child(odd) { background: var(--color-surface); }
.timeline th, .timeline td { padding: calc(var(--spacing) * 2.5) var(--spacing-row-x); text-align: start; vertical-align: top; }
.timeline th { width: calc(var(--spacing) * 24); font-weight: 600; color: var(--color-ink-muted); }
.timeline td b { font-weight: 700; }
.quote {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-surface-straw); border-radius: var(--radius-md);
  font-size: var(--text-ui); line-height: var(--text-ui--line-height);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
}
.quote p { display: contents; }
.quote__who { font-weight: 400; font-family: var(--font-display); font-size: var(--text-tag); line-height: 0.8; color: var(--color-ember); padding-top: 0.2em; }
.spoiler__btn {
  width: 100%; min-height: calc(var(--spacing) * 14);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2);
  background: var(--color-surface-straw); border-radius: var(--radius-md); font-size: var(--text-ui); font-weight: 600;
}
.spoiler__on { display: none; }
.spoiler__btn[aria-expanded="true"] .spoiler__on { display: inline; }
.spoiler__btn[aria-expanded="true"] .spoiler__off { display: none; }
.spoiler__in { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) calc(var(--spacing) * 2); }

/* 20 추천 / 비추 */
.vote { margin-block: var(--spacing-section) calc(var(--spacing) * 10); text-align: center; }
.vote__row { display: flex; justify-content: center; gap: calc(var(--spacing) * 3); }
.vote__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2);
  min-width: calc(var(--spacing) * 40); height: calc(var(--spacing) * 14); padding-inline: calc(var(--spacing) * 5);
  background: var(--color-surface-straw); color: var(--color-ink); border-radius: var(--radius-md);
}
.vote__btn .ico { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); }
.vote__label { font-size: var(--text-ui); font-weight: 600; }
.vote__n { display: inline-flex; font-weight: 700; font-size: var(--text-count); line-height: var(--text-count--line-height); font-variant-numeric: tabular-nums; padding-top: 0.14em; }
.vote__btn--up[aria-pressed="true"] { background: var(--color-surface-flame); box-shadow: var(--shadow-press); }
.vote__btn--down[aria-pressed="true"] { background: var(--color-band); color: var(--color-cream); box-shadow: var(--shadow-press); }
.vote__small { margin-top: calc(var(--spacing) * 2); display: flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); color: var(--color-ink-muted); }

/* 21 댓글 — 채팅 로그처럼 */
.comments { margin-top: calc(var(--spacing) * 2); }
.comments__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--spacing) * 4);
  border-bottom: 2px solid var(--color-ink); padding-bottom: calc(var(--spacing) * 1);
}
.comments__h, .below__h, .section__h { font-weight: 700; font-size: var(--text-side); line-height: var(--text-side--line-height); padding-top: 0.1em; }
.threads > li:nth-child(even) { background: var(--color-surface); }
.threads > li.is-swap { animation: fade-in 120ms var(--ease-out); }
.c { position: relative; padding: calc(var(--spacing) * 2.5) var(--spacing-row-x); }
.c__line { font-size: var(--text-ui); line-height: var(--text-ui--line-height); word-break: keep-all; overflow-wrap: anywhere; }
.c__nick { margin-inline-end: calc(var(--spacing) * 1); }
.c__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(var(--spacing) * 1.5);
  font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-muted);
}
.c__up, .c__reply {
  display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1);
  min-height: var(--spacing-touch); margin-block: calc(var(--spacing) * -3); padding-inline: calc(var(--spacing) * 1);
  font-weight: 600; color: var(--color-ink-muted); font-variant-numeric: tabular-nums;
}
.c__up .ico { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); }
.c__up[aria-pressed="true"] { color: var(--color-ember); }
.c--reply { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--spacing) * 1.5); padding-inline-start: calc(var(--spacing-reply) + var(--spacing-row-x)); }
.c__re { font-weight: 700; font-size: var(--text-reply); line-height: 0.7; color: var(--color-ink-muted); padding-top: 0.08em; }
.c.is-hl { background: var(--color-surface-straw); }
.c.is-hl.is-tint { animation: tint-straw 900ms var(--ease-out); }
.c__more {
  display: flex; align-items: center; min-height: var(--spacing-touch);
  padding-inline-start: calc(var(--spacing-reply) + var(--spacing-row-x) + var(--spacing) * 5);
  font-size: var(--text-meta); font-weight: 600; color: var(--color-ink);
}
.c__more-on { display: none; }
.c__more[aria-expanded="true"] .c__more-on { display: inline; }
.c__more[aria-expanded="true"] .c__more-off { display: none; }
.replybox__in { display: flex; align-items: flex-end; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 1) var(--spacing-row-x) calc(var(--spacing) * 3) calc(var(--spacing-reply) + var(--spacing-row-x)); }
.replybox .field--area { flex: 1; min-height: calc(var(--spacing) * 16); }
.c__all { width: 100%; min-height: var(--spacing-touch); font-weight: 600; text-align: center; margin-top: calc(var(--spacing) * 2); }
.write-cmt { margin-top: calc(var(--spacing) * 4); }
.say-line { margin-top: calc(var(--spacing) * 2); font-size: var(--text-meta); font-weight: 600; color: var(--color-ember); animation: fade-in 150ms var(--ease-out); }
.vote .say-line, .auth .say-line { text-align: center; }

.prevnext { margin-top: var(--spacing-section); }
.prevnext a {
  display: flex; align-items: center; gap: calc(var(--spacing) * 3); min-height: var(--spacing-row);
  padding: calc(var(--spacing) * 2.5) var(--spacing-row-x);
}
.prevnext a:nth-child(odd) { background: var(--color-surface); }
.prevnext .ico { color: var(--color-ink-muted); }
.prevnext__k { flex: none; font-size: var(--text-meta); font-weight: 600; color: var(--color-ink-muted); }
.prevnext__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
@media (hover: hover) { .prevnext a:hover { background: var(--color-surface-straw); } }
.below { margin-top: var(--spacing-section); }
.below__h { border-bottom: 2px solid var(--color-ink); padding-bottom: calc(var(--spacing) * 1); }

/* ── 옆 칸 ("난롯가") — 블록 사이는 간격, 줄은 줄무늬 ────────── */
.blk__h { font-weight: 700; font-size: var(--text-side); line-height: var(--text-side--line-height); padding-top: 0.1em; margin-bottom: calc(var(--spacing) * 3); }
.blk__note { margin-top: calc(var(--spacing) * 2); font-size: var(--text-small); color: var(--color-ink-muted); }
.stat { display: flex; align-items: baseline; gap: calc(var(--spacing) * 2); }
.stat__n { font-weight: 700; font-size: var(--text-stat); line-height: var(--text-stat--line-height); font-variant-numeric: tabular-nums; }
.stat__cap { font-size: var(--text-meta); color: var(--color-ink-muted); }
.people { margin-top: calc(var(--spacing) * 2); font-size: var(--text-meta); line-height: 1.7; }
.people__n { margin-inline-end: calc(var(--spacing) * 1.5); white-space: nowrap; }
.people__rest { color: var(--color-ink-muted); white-space: nowrap; }
.boards li:nth-child(odd), .toc li:nth-child(odd), .levels li:nth-child(odd), .week li:nth-child(odd) { background: var(--color-surface); }
.boards a { display: flex; align-items: center; justify-content: space-between; min-height: var(--spacing-touch); padding-inline: var(--spacing-row-x); }
.boards__t { font-weight: 400; font-size: var(--text-nav-sm); line-height: 1; padding-top: 0.1em; }
.boards__n { font-weight: 600; font-size: var(--text-meta); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .boards a:hover, .toc a:hover { background: var(--color-surface-straw); } }
.top5 li { display: flex; align-items: center; gap: calc(var(--spacing) * 2); min-height: var(--spacing-touch); }
.top5__r { flex: none; width: calc(var(--spacing) * 6); font-weight: 700; font-size: var(--text-tag); line-height: 1; color: var(--color-ink-muted); text-align: center; padding-top: 0.12em; }
.top5 a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--spacing-touch); }
.blk .more { margin-top: calc(var(--spacing) * 1); }
.host { display: flex; align-items: center; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); }
.host__t { font-size: var(--text-meta); color: var(--color-ink-muted); }
.host__t b { color: var(--color-ink); font-weight: 600; }
.week li {
  display: grid; grid-template-columns: calc(var(--spacing) * 7) calc(var(--spacing) * 12) minmax(0, 1fr); align-items: center; column-gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 9); padding-inline: var(--spacing-row-x); font-size: var(--text-meta);
}
.week__d { font-weight: 400; font-size: var(--text-tag); line-height: 1; color: var(--color-ink-muted); padding-top: 0.12em; }
.week__t { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.week__s { display: flex; align-items: center; gap: calc(var(--spacing) * 1.5); min-width: 0; }
.week .is-today { font-weight: 600; }
.week .is-today .week__d, .week .is-today .week__t { color: var(--color-ink); }
.week__dot { width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); flex: none; color: var(--color-ember); }
.pic-cap { margin-top: calc(var(--spacing) * 2); font-size: var(--text-meta); display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); }
.pic-cap a { font-weight: 600; display: inline-block; padding-block: calc(var(--spacing) * 3); margin-block: calc(var(--spacing) * -3); }
.rules-mini li, .levels li { display: flex; align-items: center; gap: calc(var(--spacing) * 2.5); min-height: calc(var(--spacing) * 10); padding-inline: var(--spacing-row-x); }
.rules-mini__n { flex: none; width: calc(var(--spacing) * 4); font-weight: 700; font-size: var(--text-tag); line-height: 1; color: var(--color-ink-muted); padding-top: 0.12em; }
.rules-mini li:nth-child(odd) { background: var(--color-surface); }
.levels__n { flex: none; width: calc(var(--spacing) * 13); font-weight: 700; font-size: var(--text-tag); line-height: 1; padding-top: 0.12em; }
.levels__c { font-size: var(--text-meta); color: var(--color-ink-muted); }
.toc a { display: flex; align-items: center; min-height: var(--spacing-touch); padding-inline: var(--spacing-row-x); font-weight: 600; }

/* ── 자리표시자 — 짚 면 + 2px 점선 + 비율·용도 ─────────────── */
.ph {
  position: relative; display: grid; place-items: center; width: 100%;
  background: var(--color-surface-straw); color: var(--color-ink-muted);
  border: 2px dashed color-mix(in oklab, var(--color-ink) 20%, transparent); border-radius: var(--radius-lg);
  font-size: var(--text-small); line-height: var(--text-small--line-height); text-align: center; padding: calc(var(--spacing) * 4);
}
.ph[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.ph[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.ph[data-ratio="21:9"] { aspect-ratio: 21 / 9; }
.ph__label { max-width: 22rem; }
.ph__ratio { font-weight: 700; color: var(--color-ink); margin-inline-end: calc(var(--spacing) * 1); }
.ph__id { position: absolute; left: calc(var(--spacing) * 3); top: calc(var(--spacing) * 2); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.ph--banner { margin-top: var(--spacing-section); }
.ph--art { max-width: calc(var(--spacing) * 80); }
.ava {
  flex: none; display: inline-grid; place-items: center;
  background: var(--color-surface-straw); border: 2px dashed color-mix(in oklab, var(--color-ink) 20%, transparent); border-radius: var(--radius-lg);
  color: var(--color-ink-muted);
}
.ava--40 { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); }
.ava--56 { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); }
.ava--72 { width: calc(var(--spacing) * 18); height: calc(var(--spacing) * 18); }
.ava__letter { font-weight: 700; line-height: 1; padding-top: 0.14em; }
.ava--40 .ava__letter { font-size: var(--text-tag); }
.ava--56 .ava__letter { font-size: var(--text-side); }
.ava--72 .ava__letter { font-size: var(--text-stat); }

/* 그림 — 에셋이 들어온 자리(자리표시자와 같은 반지름·비율) */
.pic { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--color-surface-straw); }
.ava--img { object-fit: cover; border: 0; }
.pic.ph--banner { margin-top: var(--spacing-section); }
.pic.ph--art { max-width: calc(var(--spacing) * 80); }

/* ── 글쓰기 ────────────────────────────────────────────────── */
.writetabs { border-bottom: 2px solid var(--color-ink); margin-bottom: calc(var(--spacing) * 5); gap: calc(var(--spacing) * 6); }
.editor > * + * { margin-top: calc(var(--spacing) * 3); }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(var(--spacing) * 5); }
.pick__label { font-size: var(--text-meta); font-weight: 600; color: var(--color-ink-muted); margin-inline-end: calc(var(--spacing) * 1); }
.field--title { min-height: calc(var(--spacing) * 14); }
.toolbar { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 1); }
.icon-btn--tool[aria-pressed="true"] { background: var(--color-surface-straw); color: var(--color-ember); }
.field--body { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: calc(var(--spacing) * 2); min-height: calc(var(--spacing) * 80); padding: calc(var(--spacing) * 4); line-height: var(--text-body--line-height); font-size: var(--text-body); }
.field__text > * + * { margin-top: calc(var(--spacing) * 3); }
.attach__drop {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 2); min-height: calc(var(--spacing) * 30);
  background: var(--color-surface-straw); color: var(--color-ink-muted); font-size: var(--text-small);
  border: 2px dashed color-mix(in oklab, var(--color-ink) 20%, transparent); border-radius: var(--radius-lg);
}
.attach__file { display: flex; align-items: flex-end; gap: calc(var(--spacing) * 4); }
.attach__file .ph, .attach__file .pic { width: calc(var(--spacing) * 40); flex: none; }
.attach__name { font-size: var(--text-meta); color: var(--color-ink-muted); }
.draft-on { display: none; }
body[data-draft] .draft-on { display: revert; }
body[data-draft] .field__value.draft-on { display: inline; }
body[data-draft] .attach__file.draft-on { display: flex; }
body[data-draft] .draft-off { display: none; }
.preview__note { font-size: var(--text-meta); font-weight: 600; color: var(--color-ember); margin-bottom: calc(var(--spacing) * 4); }
.preview .post__body > .ph { margin-block: calc(var(--spacing) * 5); }
.submit { display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 6); }
.btn-ink--l { min-height: calc(var(--spacing) * 12); padding-inline: calc(var(--spacing) * 8); }

/* ── 베스트 ────────────────────────────────────────────────── */
.hall { margin-top: var(--spacing-section); }
.section__h { border-bottom: 2px solid var(--color-ink); padding-bottom: calc(var(--spacing) * 1); }
.section__desc { padding: calc(var(--spacing) * 3) var(--spacing-row-x) calc(var(--spacing) * 2); font-size: var(--text-meta); color: var(--color-ink-muted); }
.hall__row {
  display: grid; grid-template-columns: var(--spacing-rank-col) auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 3) var(--spacing-row-x);
}
.hall__row:nth-child(odd) { background: var(--color-surface); }
.hall__r { font-weight: 700; font-size: var(--text-rank); line-height: 0.8; text-align: center; padding-top: 0.14em; }
.hall__who { display: flex; flex-direction: column; min-width: 0; }
.hall__nick { font-size: var(--text-name); line-height: var(--text-name--line-height); }
.hall__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-muted); display: inline-flex; min-height: calc(var(--spacing) * 8); align-items: center; }
.hall__n { font-size: var(--text-meta); color: var(--color-ink-muted); white-space: nowrap; }
.hall__n b { color: var(--color-ink); font-weight: 700; }

/* ── 회원 ──────────────────────────────────────────────────── */
.strip--notice { font-size: var(--text-ui); }
.view { animation: none; }
.view.is-swap { animation: fade-in 150ms var(--ease-out); }
.view .pagehead__h { padding-bottom: calc(var(--spacing) * 5); }
.auth { max-width: 26rem; }
.auth__label { margin-top: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 1.5); font-size: var(--text-meta); font-weight: 600; }
.auth__label:first-child { margin-top: 0; }
.auth__sub { font-weight: 400; color: var(--color-ink-muted); margin-inline-start: calc(var(--spacing) * 1.5); }
.auth .btn-ink--block { margin-top: calc(var(--spacing) * 6); }
.auth__links { display: flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2); color: var(--color-ink-muted); }
.auth__join { margin-top: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 4); }
.auth__join a { font-weight: 700; color: var(--color-ember); display: inline-block; padding-block: calc(var(--spacing) * 3); margin-block: calc(var(--spacing) * -3); }
.auth__pic { margin-top: var(--spacing-block); max-width: 26rem; }
.side-pic { display: none; }
.swatches { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3); }
.sw { display: inline-flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 1); }
.sw__box {
  display: grid; place-items: center; width: var(--spacing-touch); height: var(--spacing-touch);
  background: var(--color-surface); border: 2px solid transparent; border-radius: var(--radius-md);
}
.sw[aria-pressed="true"] .sw__box { border-color: var(--color-ink); }
.sw__fire { font-weight: 700; font-size: var(--text-side); line-height: 1; padding-top: 0.1em; }
.sw__name { font-size: var(--text-small); color: var(--color-ink-muted); }
.sw[aria-pressed="true"] .sw__name { color: var(--color-ink); font-weight: 600; }
.swpreview { margin-top: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 3) var(--spacing-row-x); background: var(--color-surface); }
.swpreview .nick { transition: color 150ms var(--ease-out); margin-inline-end: calc(var(--spacing) * 1); }
.agree { display: flex; align-items: center; gap: calc(var(--spacing) * 2.5); margin-top: calc(var(--spacing) * 5); font-size: var(--text-ui); }
.agree__box { display: grid; place-items: center; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); background: var(--color-surface-straw); border-radius: var(--radius-sm); flex: none; }
.agree a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.profile { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3) calc(var(--spacing) * 5); padding-bottom: calc(var(--spacing) * 6); }
.profile__t { min-width: 0; }
.profile__name { display: flex; align-items: baseline; font-size: var(--text-name); line-height: var(--text-name--line-height); }
.profile__meta { margin-top: calc(var(--spacing) * 1.5); font-size: var(--text-meta); color: var(--color-ink-muted); }
.profile__meta b { color: var(--color-ink); font-weight: 600; }
.profile__out { margin-inline-start: auto; }

/* ── 규칙 ──────────────────────────────────────────────────── */
.notice-box { padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6); background: var(--color-surface); border-radius: var(--radius-md); }
.notice-box__h { font-weight: 700; font-size: var(--text-side); line-height: 1; padding-top: 0.1em; margin-bottom: calc(var(--spacing) * 2); }
.notice-box p + p { margin-top: calc(var(--spacing) * 2); }
.rsec { margin-top: var(--spacing-section); }
.rsec__p { padding: calc(var(--spacing) * 4) var(--spacing-row-x); max-width: 40rem; }
.rsec .btn-ink { margin-inline-start: var(--spacing-row-x); }
.notices > li:nth-child(even), .rules > li:nth-child(even), .lvls > li:nth-child(even) { background: var(--color-surface); }
.notice__head {
  width: 100%; display: grid; grid-template-columns: var(--spacing-tag-col) minmax(0, 1fr) auto calc(var(--spacing) * 6); align-items: center; column-gap: var(--spacing-row-x);
  grid-template-areas: "tag t d pm";
  min-height: calc(var(--spacing) * 12); padding: calc(var(--spacing) * 2) var(--spacing-row-x);
}
.notice__head .row__tag { grid-area: tag; }
.notice__t { grid-area: t; font-weight: 600; font-size: var(--text-row); line-height: var(--text-row--line-height); }
.notice__d { grid-area: d; font-size: var(--text-meta); color: var(--color-ink-muted); }
.pm { grid-area: pm; display: grid; }
.pm .ico { grid-area: 1 / 1; transition: opacity 150ms var(--ease-out); }
.pm__minus, .notice__head[aria-expanded="true"] .pm__plus { opacity: 0; }
.notice__head[aria-expanded="true"] .pm__minus { opacity: 1; }
.notice__body { padding: 0 var(--spacing-row-x) calc(var(--spacing) * 4) calc(var(--spacing-tag-col) + var(--spacing-row-x) * 2); max-width: 44rem; }
.rule { display: grid; grid-template-columns: calc(var(--spacing) * 14) minmax(0, 1fr); column-gap: calc(var(--spacing) * 3); align-items: start; padding: calc(var(--spacing) * 4) var(--spacing-row-x); }
.rule.is-hl { background: var(--color-surface-straw); }
.rules > li.rule.is-hl { background: var(--color-surface-straw); }
.rule.is-tint { animation: tint-straw 900ms var(--ease-out); }
.rule__n { font-weight: 700; font-size: var(--text-rank); line-height: 0.8; text-align: center; padding-top: 0.16em; }
.rule__h { font-size: var(--text-row); line-height: var(--text-row--line-height); font-weight: 600; }
.rule__d { margin-top: calc(var(--spacing) * 1); color: var(--color-ink-muted); max-width: 40rem; }
.lvls li { display: grid; grid-template-columns: calc(var(--spacing) * 20) minmax(0, 1fr); align-items: center; column-gap: calc(var(--spacing) * 3); min-height: calc(var(--spacing) * 12); padding: calc(var(--spacing) * 2) var(--spacing-row-x); }
.lvls__n { font-weight: 700; font-size: var(--text-side); line-height: 1; padding-top: 0.1em; }

/* ── 꼬리 ──────────────────────────────────────────────────── */
.foot { border-top: 2px solid var(--color-ink); }
.foot__in { width: var(--frame); margin-inline: auto; padding-block: calc(var(--spacing) * 10) calc(var(--spacing) * 12); }
.foot__word { display: flex; align-items: center; gap: calc(var(--spacing) * 2); font-weight: 700; font-size: calc(var(--spacing) * 12); line-height: 1; }
.foot__word span { padding-top: 0.08em; }
.foot__word .brand__mark { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); }
.foot__notice { margin-top: calc(var(--spacing) * 4); max-width: 40rem; }
/* 구분점 양쪽 간격을 같게 — 낱말 폭과 상관없이 같은 안쪽 여백 + gap(qa-1 P3-6) */
.foot__links {
  margin-top: calc(var(--spacing) * 3); margin-inline-start: calc(var(--spacing) * -2.5);
  display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(var(--spacing) * 0.5);
  font-size: var(--text-meta); font-weight: 600;
}
.foot__links a { display: inline-block; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 2.5); }
.foot__dot { color: var(--color-ink-muted); }
.foot__small { margin-top: calc(var(--spacing) * 2); font-size: var(--text-small); color: var(--color-ink-muted); }

/* ── 폭: ≥ 1024 두 칸 ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .wrap { grid-template-columns: var(--spacing-col-main-md) var(--spacing-col-side-md); column-gap: var(--spacing-col-gap-md); }
  .auth__pic { display: none; }
  .side-pic { display: block; }
}
@media (min-width: 1280px) {
  .wrap { grid-template-columns: var(--spacing-col-main) var(--spacing-col-side); column-gap: var(--spacing-col-gap); }
}

/* ── 720–1023: 1단 고정 672 · 머리 두 줄 · 옆 칸은 목록 아래 2열 ─ */
@media (max-width: 1023px) {
  .head__in {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand tools" "nav nav";
    min-height: 0; padding-top: calc(var(--spacing) * 3);
  }
  .tools { justify-self: end; }
  .nav { justify-content: flex-start; }
  .brand__sub { display: none; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-col-gap-md); row-gap: var(--spacing-block); }
}

/* ── < 720: 1단 유동 · 두 줄 행 · 메뉴 판 ──────────────────── */
@media (max-width: 719px) {
  .band__end { display: none; }
  .band__alert-off, .band__alert-on, .band__watch-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .band__alert-face { width: var(--spacing-touch); height: var(--spacing-touch); min-height: 0; padding: 0; justify-content: center; background: transparent; }
  .band__alert .ico { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); }

  .head__in { column-gap: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1); }
  .brand__mark { width: calc(var(--spacing) * 5.5); height: calc(var(--spacing) * 5.5); }
  .brand__word { font-size: var(--text-mark-sm); line-height: var(--text-mark-sm--line-height); }
  body:not([data-page="home"]) .brand__word { font-size: var(--text-mark-sub-sm); line-height: var(--text-mark-sub-sm--line-height); }
  .tools { gap: 0; }
  .tools__write { display: none; }
  .tools__menu { display: inline-flex; }
  .nav { justify-content: space-between; gap: 0; }
  .nav__a { font-size: var(--text-nav-sm); line-height: var(--text-nav-sm--line-height); padding-inline: calc(var(--spacing) * 0.5); }

  .menu[data-open="true"], .menu[data-open="closing"] { display: block; position: absolute; inset: 0; z-index: 10; }
  .menu__scrim { position: absolute; inset: 0; width: 100%; background: color-mix(in oklab, var(--color-band) 30%, transparent); cursor: default; }
  .menu__panel { position: relative; background: var(--color-surface); }
  .menu[data-open="true"] .menu__scrim { animation: fade-in 220ms var(--ease-out); }
  .menu[data-open="true"] .menu__panel { animation: slide-in 220ms var(--ease-out); }
  .menu[data-open="closing"] { animation: fade-out 160ms var(--ease-out) forwards; }
  .menu__list li:nth-child(even) { background: var(--color-bg); }
  .menu__list a { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); min-height: calc(var(--spacing) * 14); padding-inline: var(--spacing-page-x); }
  .menu__name { font-weight: 400; font-size: var(--text-nav-sm); line-height: 1; padding-top: 0.1em; }
  .menu__count { font-size: var(--text-meta); color: var(--color-ink-muted); }

  .wrap { padding-top: calc(var(--spacing) * 2); }
  .tab { font-size: var(--text-tab-sm); line-height: var(--text-tab-sm--line-height); min-height: calc(var(--spacing) * 13); }
  .tabs { gap: calc(var(--spacing) * 6); }
  .pagehead__h { font-size: var(--text-page-sm); line-height: var(--text-page-sm--line-height); }
  .post__title { font-size: var(--text-post-sm); line-height: var(--text-post-sm--line-height); }
  .pagehead { padding-bottom: calc(var(--spacing) * 4); }
  .topic { font-size: var(--text-nav-sm); line-height: var(--text-nav-sm--line-height); }
  .topics { gap: calc(var(--spacing) * 4); }

  /* 두 줄 행 — 제목 한 줄(넘치면 둘째 줄로) + 말머리·닉네임·시각, 배지는 오른쪽 */
  .row {
    grid-template-columns: auto auto minmax(0, 1fr) var(--spacing-badge-col);
    grid-template-areas: "main main main badge" "tag nick time badge";
    column-gap: calc(var(--spacing) * 2); row-gap: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 2);
  }
  .row__main { display: block; }
  .row--pin .row__main { display: flex; }
  .row__link { display: inline; white-space: normal; font-size: var(--text-row-sm); line-height: var(--text-row-sm--line-height); word-break: keep-all; overflow-wrap: anywhere; }
  .row--pin .row__link { display: block; white-space: nowrap; overflow-wrap: normal; }
  .row__tag { line-height: 0.75; padding-top: 0; }
  .row__time { text-align: start; }
  .row__nick { max-width: 9.5rem; }
  .row__badge { align-self: center; }
  .here { display: inline-flex; vertical-align: baseline; }
  .row__rank { font-size: var(--text-stat); }
  .list--rank .row {
    grid-template-columns: calc(var(--spacing) * 8) auto auto minmax(0, 1fr) var(--spacing-badge-col);
    grid-template-areas: "rank main main main badge" "rank tag nick time badge";
  }
  .row--cmt { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "main main main" "tag time up"; }
  .row--cmt .row__up { justify-content: flex-end; }

  .pager { gap: 0; }
  .pager__step span, .pager__step { font-size: var(--text-small); }
  .pager__n { min-width: calc(var(--spacing) * 10); }
  .searchline { flex-wrap: wrap; }
  .field--grow { flex-basis: calc(100% - var(--spacing) * 30); }

  .byline__badge { margin-inline-start: 0; }
  .vote__btn { flex: 1; min-width: 0; padding-inline: calc(var(--spacing) * 3); }
  .timeline th { width: calc(var(--spacing) * 21); }
  .timeline th, .timeline td { padding-inline: calc(var(--spacing) * 2); }
  .toolbar { gap: 0; justify-content: space-between; }
  .attach__file .ph, .attach__file .pic { width: calc(var(--spacing) * 32); }

  .hall__row { grid-template-columns: calc(var(--spacing) * 8) auto minmax(0, 1fr); grid-template-areas: "r a who" "r a n"; }
  .hall__r { grid-area: r; }
  .hall__row .ava { grid-area: a; }
  .hall__who { grid-area: who; }
  .hall__n { grid-area: n; }
  .notice__head { grid-template-columns: var(--spacing-tag-col) minmax(0, 1fr) calc(var(--spacing) * 6); grid-template-areas: "tag t pm" "tag d pm"; }
  .notice__head .row__tag { grid-area: tag; }
  .notice__t { grid-area: t; font-size: var(--text-row-sm); }
  .notice__d { grid-area: d; }
  .pm { grid-area: pm; }
  .notice__body { padding-inline-start: var(--spacing-row-x); }
  .rule { grid-template-columns: calc(var(--spacing) * 10) minmax(0, 1fr); }
  .notice-box { padding: calc(var(--spacing) * 4); }
  .profile__out { margin-inline-start: 0; }

  body[data-page="home"] .side > [data-m="1"] { order: 1; }
  body[data-page="home"] .side > [data-m="2"] { order: 2; }
  body[data-page="home"] .side > [data-m="3"] { order: 3; }
  body[data-page="home"] .side > [data-m="4"] { order: 4; }
  body[data-page="home"] .side > [data-m="5"] { order: 5; }
  body[data-page="home"] .side > [data-m="6"] { order: 6; }
}
@media (max-width: 359px) {
  .toolbar .icon-btn { width: calc(var(--spacing) * 10.5); }
}

/* ── 모션 (animation-vocabulary 이름) ──────────────────────── */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes slide-in { from { transform: translateY(calc(var(--spacing) * -3)); opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes bar-in { from { transform: translateX(var(--bar-dx, 0)) scaleX(var(--bar-s, 1)); } }
@keyframes tint { from { background-color: color-mix(in oklab, var(--color-surface-spark) 50%, var(--color-bg)); } }
@keyframes tint-straw { from { background-color: color-mix(in oklab, var(--color-surface-spark) 50%, var(--color-bg)); } to { background-color: var(--color-surface-straw); } }
@keyframes tick-in { from { transform: translateY(100%); } }
@keyframes tick-out { to { transform: translateY(-100%); } }
@keyframes tick-in-down { from { transform: translateY(-100%); } }
@keyframes tick-out-down { to { transform: translateY(100%); } }
.tick--down .tick__new { animation-name: tick-in-down; }
.tick--down .tick__old { animation-name: tick-out-down; }
/* 주소로 바로 들어온 상태는 끝 상태로 즉시 — 첫 두 프레임은 전환을 끈다 */
.is-first *, .is-first *::before, .is-first *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}