/* Y&H comu — Editorial 디자인 시스템
 *
 * 신문 같은 차분한 톤. Hairline 보더, 넉넉한 간격, 파랑 액센트.
 * OKLCH 색 공간 (모든 모던 브라우저 지원).
 */

:root {
  /* 기본 라이트 테마. 다크는 사용자가 토글 시 data-theme="dark"로만 적용(localStorage 유지). OS 설정 무시. */
  color-scheme: light;

  /* Editorial 색 — light-dark()로 자동 분기 (color-scheme에 따라). */
  --blue:      light-dark(oklch(0.52 0.18 252),  oklch(0.72 0.16 252));
  --blue-soft: light-dark(oklch(0.96 0.03 252),  oklch(0.32 0.08 252));
  --ink:       light-dark(oklch(0.18 0.005 250), oklch(0.95 0.003 250));
  --sub:       light-dark(oklch(0.5  0.005 250), oklch(0.68 0.005 250));
  --muted:     light-dark(oklch(0.65 0.005 250), oklch(0.5  0.005 250));
  --hair:      light-dark(oklch(0.92 0.005 250), oklch(0.28 0.005 250));
  --bg:        light-dark(#ffffff,               oklch(0.16 0.005 250));
  --tint:      light-dark(oklch(0.985 0.003 250),oklch(0.2 0.005 250));
  --red:       light-dark(oklch(0.55 0.18 25),   oklch(0.7  0.18 25));
  --red-soft:  light-dark(oklch(0.96 0.04 25),   oklch(0.28 0.08 25));
  --green:     light-dark(oklch(0.55 0.15 145),  oklch(0.7  0.16 145));

  /* 썸네일 그라디언트 — color 토큰만 light-dark, 합성은 linear-gradient에서 */
  --thumb-a:   light-dark(oklch(0.92 0.02 252),  oklch(0.32 0.05 252));
  --thumb-b:   light-dark(oklch(0.85 0.04 252),  oklch(0.26 0.07 252));
  --stripe:    light-dark(rgba(255,255,255,.4),  rgba(255,255,255,.08));
  --border-strong: light-dark(oklch(0.85 0.005 250), oklch(0.4 0.005 250));

  /* Flash bg */
  --ok-bg:  light-dark(oklch(0.95 0.06 145), oklch(0.25 0.06 145));
  --err-bg: light-dark(oklch(0.96 0.04 25),  oklch(0.25 0.06 25));

  /* 디자인 토큰 */
  --container: 1200px;
  --gutter: 32px;
  --sidebar: 260px;
  --r-sm: 2px;
  --r:    4px;
  --r-lg: 6px;
  --shadow-sm: 0 1px 2px oklch(0.18 0.005 250 / 0.05);
  --shadow:    0 2px 8px oklch(0.18 0.005 250 / 0.08);
}

/* 명시적 테마 override (사용자 토글) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
body { min-height: 100vh; }

a { color: inherit; text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--blue); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
hr { border: 0; border-top: 1px solid var(--hair); margin: 20px 0; }
small { color: var(--muted); font-size: 12px; }

/* ── Utility bar (날짜 + nav) ───────────────────────────── */
.util-bar {
  border-bottom: 1px solid var(--hair);
  background: var(--bg);
}
.util-bar .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--sub);
}
.util-bar nav { display: flex; gap: 18px; }
.util-bar nav a { color: var(--sub); }
.util-bar nav a:hover { color: var(--blue); }
.util-bar nav .badge {
  color: var(--blue);
  font-weight: 600;
  margin-left: 3px;
}
.util-bar nav form { display: inline; margin: 0; }
.util-bar nav button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--sub); font: inherit;
}
.util-bar nav button:hover { color: var(--blue); }

/* ── Theme toggle (utility bar 좌측) ────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--hair);
  color: var(--sub);
  padding: 3px 8px;
  border-radius: var(--r);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 120ms ease, color 120ms ease;
  margin-left: 10px;
}
.theme-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.theme-toggle svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── 인라인 아이콘 (이모지 대체, icons.html 매크로) ──────────── */
.ic {
  width: 1em; height: 1em; vertical-align: -0.14em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Masthead (로고 + nav + 검색) ───────────────────────── */
.masthead {
  border-bottom: 1px solid var(--hair);
  background: var(--bg);
}
.masthead .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  color: var(--ink) !important;
}
/* 인라인 워드마크 SVG — 색은 var(--ink)/var(--blue)로 다크모드 자동 대응 */
.brand svg {
  height: 26px;
  width: auto;
  display: block;
}
.main-nav {
  display: flex;
  gap: 22px;
  flex: 1 1 auto;
  margin-left: 12px;
}
.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--sub);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a.active {
  color: var(--ink);
  border-bottom-color: var(--blue);
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  width: 280px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--tint);
  margin: 0;
  transition: border-color 120ms ease, background 120ms ease;
}
.search-box:focus-within {
  border-color: var(--blue);
  background: var(--bg);
}
.search-box svg { color: var(--muted); flex: 0 0 auto; }
.search-box input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink); font-family: inherit;
  min-width: 0;
}
.search-box input::placeholder { color: var(--muted); }

/* ── Board strip (sticky 갤러리 탭) ─────────────────────── */
.board-strip {
  border-bottom: 1px solid var(--hair);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.board-strip .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
}
.board-strip a {
  font-size: 13px;
  color: var(--sub);
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: color 120ms ease;
}
.board-strip a:hover { color: var(--ink); }
.board-strip a.active {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--blue);
}
.board-strip .more {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  padding: 12px 0;
  flex: 0 0 auto;
}

/* ── Main container ─────────────────────────────────────── */
main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
}
main nav.bc {
  font-size: 12px;
  color: var(--sub);
  margin: 0 0 16px;
}
main nav.bc a { color: var(--sub); }
main nav.bc a:hover { color: var(--blue); }
main nav.bc .sep { color: var(--muted); margin: 0 6px; }

/* ── Section header (uppercase + ink underline) ─────────── */
.sec-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1.5px solid var(--ink);
}
.sec-h h2, .sec-h h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.sec-h .meta { font-size: 11.5px; color: var(--muted); }

/* ── Generic pill (link or button) ──────────────────────── */
.pill {
  display: inline-block;
  background: transparent;
  color: var(--sub);
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}
.pill:hover { color: var(--ink); }
.pill.on { background: var(--ink); color: var(--bg); }

/* ── Hot strip (인기 6-card hero) ───────────────────────── */
.hot-strip {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hair);
}
.hot-strip .pills {
  display: flex; gap: 4px;
}
.hot-strip .pills button {
  background: transparent;
  color: var(--sub);
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
}
.hot-strip .pills button.on {
  background: var(--ink);
  color: var(--bg);
}
.hot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.hot-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
}
.hot-card .thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--thumb-a), var(--thumb-b));
  position: relative;
  overflow: hidden;
}
/* 빗금 패턴은 미디어 없는(placeholder) 썸네일에서만 */
.hot-card .thumb:not(:has(.thumb-img))::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, var(--stripe) 8px 9px);
}
.hot-card .thumb .thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* 비율 유지 + 박스 꽉 채움(넘침 크롭) */
  z-index: 1;
}
.hot-card .thumb .board-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--bg); color: var(--ink);
  font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 2px;
  z-index: 1;
}
.hot-card .thumb .rank {
  position: absolute; bottom: 6px; right: 8px;
  color: #fff; font-size: 11px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  z-index: 1;
}
.hot-card .ttl {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 제목을 항상 2줄 높이로 고정 (1줄이어도) → 카드 높이·메타 위치 정렬. 2줄 초과는 …말줄임. */
  min-height: calc(1.4em * 2);
  transition: color 120ms ease;
}
.hot-card:hover .ttl { color: var(--blue); }
.hot-card .meta {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  gap: 10px;
}

/* ── Main grid (12 board widgets + sidebar) ─────────────── */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar);
  gap: 0 36px;
  align-items: start;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
}
.board-widget { background: var(--bg); padding-top: 6px; min-width: 0; }
.board-widget .sec-h h3 {
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.015em;
}
.board-widget .sec-h h3 small {
  color: var(--muted); font-size: 11.5px;
  margin-left: 6px;
}
.board-widget .sec-h .more {
  color: var(--sub); font-size: 11.5px; font-weight: 500;
}

/* ── Row pattern (글 한 줄) ─────────────────────────────── */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  min-width: 0;
  color: inherit;
}
.row:last-child { border-bottom: 0; }
.row .ttl {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--ink);
  transition: color 120ms ease;
}
.row:hover .ttl { color: var(--blue); }
.row .row-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.row .comments {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}
.row .time {
  color: var(--muted);
  font-size: 12px;
  width: 50px;
  text-align: right;
}
.row .hot-badge,
.row .img-icon { flex: 0 0 auto; }

/* ── Sidebar (live keywords + today's comments) ─────────── */
.sidebar { min-width: 0; }
.sidebar .sec { margin-bottom: 32px; }
.live-list { list-style: none; padding: 0; margin: 0; }
.live-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
  transition: background 100ms ease;
}
.live-list li:hover { background: var(--tint); }
.live-list .rank {
  flex: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--sub);
}
.live-list li.top .rank { color: var(--blue); }
.live-list .word {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-list .change {
  flex: 0 0 30px;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  line-height: 1;
}
.live-list .change .up   { color: var(--red); }
.live-list .change .down { color: var(--blue); }
.live-list .change .new {
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid var(--blue);
  padding: 1px 3px;
  border-radius: 2px;
}

.today-comments .item {
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
}
.today-comments .item-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.today-comments .item-head .author { font-size: 11.5px; font-weight: 600; }
.today-comments .item-head .board  { font-size: 10.5px; color: var(--muted); }
.today-comments .item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Board header (gallery 페이지 상단 큰 카드) ─────────── */
.board-head {
  background: var(--tint);
  border-bottom: 1px solid var(--hair);
}
.board-head .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
.board-head .badge-sq {
  width: 48px; height: 48px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.board-head .meta {
  flex: 1 1 auto; min-width: 0;
}
.board-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.board-head .stats {
  display: flex; gap: 14px;
  font-size: 12.5px;
  color: var(--sub);
  margin-top: 4px;
  flex-wrap: wrap;
}
.board-head .stats strong { color: var(--ink); font-weight: 600; }
.board-head .stats .live { color: var(--green); font-weight: 600; }
.board-head .stats .desc { color: var(--muted); }
.board-head .actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ── Filter bar (정렬/필터 strip) ───────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
}
.filter-bar .tab {
  font-size: 13.5px;
  color: var(--sub);
  padding: 6px 14px 6px 0;
  margin-right: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.filter-bar .tab.on {
  color: var(--ink);
  font-weight: 700;
}
.filter-bar .tab .count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.filter-bar .sort {
  margin-left: auto;
  display: flex; gap: 4px;
}
.filter-bar .sort button {
  background: transparent;
  color: var(--sub);
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
}
.filter-bar .sort button.on {
  background: var(--ink);
  color: var(--bg);
}

/* ── Post list (gallery 글 목록 grid 테이블) ────────────── */
.post-list {
  display: block;
  width: 100%;
}
.post-list-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 86px 64px 52px 52px;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--hair);
  font-size: 13.5px;
  color: inherit;
}
.post-list-row:hover .post-title { color: var(--blue); }
/* 컬럼 설명 헤더 (목록과 같은 그리드 → 모바일 반응형 규칙도 공유) */
.post-list-head {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding-top: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.post-list-row.notice {
  background: var(--tint);
  font-weight: 500;
}
.post-list-row .num-col {
  font-size: 12px; color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.post-list-row .post-cell {
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; min-width: 0;
}
.post-list-row .post-title {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms ease;
}
.post-list-row .author-col {
  color: var(--sub);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-list-row .meta-col {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.post-list-row .votes-col.hot {
  color: var(--red);
  font-weight: 700;
}

.hot-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}
.notice-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.05em;
  border: 1px solid var(--blue);
  padding: 2px 6px;
  border-radius: 2px;
  text-align: center;
}
/* 비공개(archived) 갤러리 표시 — 어드민에게만 노출되는 surface에서 사용. */
.hidden-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-soft);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.board-widget--hidden header h3 small::before { content: ""; }
.img-icon { color: var(--muted); }

/* ── Pagination ─────────────────────────────────────────── */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px 0 4px;
}
.pager button, .pager a, .pager .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--sub);
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pager a:hover { background: var(--tint); color: var(--ink); }
.pager .current {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  cursor: default;
}
.pager .nav { color: var(--ink); font-weight: 500; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  background: var(--tint);
  border-bottom: 1px solid var(--hair);
}
.breadcrumb .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--gutter);
  font-size: 12px;
  color: var(--sub);
}
.breadcrumb .sep { color: var(--muted); margin: 0 6px; }
.breadcrumb .last { color: var(--ink); }

/* ── Post detail ────────────────────────────────────────── */
.post-detail { min-width: 0; }
.post-detail > header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hair);
}
.post-detail .tag-line {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.post-detail h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.post-detail .post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--sub);
  flex-wrap: wrap;
}
.post-detail .avatar-mini {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--tint);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.post-detail .post-meta .author { color: var(--ink); font-weight: 600; }
.post-detail .post-meta .stats {
  margin-left: auto;
  display: flex; gap: 14px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* 댓글 stat span(.comments)이 댓글 섹션 규칙 `.comments{margin-top:32px}`과
   클래스명 충돌 → margin 리셋으로 한 줄 정렬 유지 */
.post-detail .post-meta .stats > span { white-space: nowrap; margin: 0; }
.post-detail .post-meta .stats strong { font-weight: 600; }
.post-detail .post-meta .stats .recommend strong { color: var(--red); }
.post-detail .post-meta .stats .comments strong { color: var(--blue); }
.post-detail .post-meta .stats .views strong { color: var(--ink); }

.post-body {
  padding: 30px 0 36px;
  border-bottom: 1px solid var(--hair);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  margin: 12px 0;
  display: block;
}

/* ── Vote bar (▲ red / ▼ blue 항상) ─────────────────────── */
.vote-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 0 26px;
}
.vote-bar form { display: inline; margin: 0; }
.vote-msg {
  font-size: 12.5px;
  color: var(--muted);
  align-self: center;
}
.vote-msg.err { color: var(--red); }
.vote-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--bg);
  border-radius: var(--r);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.vote-bar .up {
  color: var(--red);
  border: 1.5px solid var(--red);
}
.vote-bar .up:hover { background: var(--red); color: #fff; }
.vote-bar .down {
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.vote-bar .down:hover { background: var(--blue); color: #fff; }
.vote-bar .sep {
  width: 1px; height: 24px;
  background: var(--hair);
  margin-inline: 4px;
}
.vote-bar .ghost {
  background: transparent;
  color: var(--sub);
  border: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
}
.vote-bar .ghost:hover { color: var(--ink); background: var(--tint); }

.post-meta-links {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  padding: 16px 0;
}
.post-meta-links a { color: var(--muted); }
.post-meta-links a:hover { color: var(--blue); }

/* ── Comments ───────────────────────────────────────────── */
/* 댓글 '섹션'에만 적용 — 떠도는 .comments span(목록 댓글수·post-meta stat)에 margin 누수 방지 */
section.comments { margin-top: 44px; }
.comments .sec-h { margin-bottom: 0; }
.comments .sec-h h2 { font-size: 14px; text-transform: none; letter-spacing: -0.01em; }
.comment {
  padding: 14px 6px;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
}
.comment-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.comment-head .author { font-weight: 600; color: var(--ink); }
.comment-head .time { color: var(--muted); font-size: 11.5px; }
.comment-head .badge {
  font-size: 9.5px;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.comment p {
  margin: 4px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.c-vote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11.5px;
}
.c-vote .up,
.c-vote .down {
  background: transparent;
  border: 0;
  padding: 2px 6px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.c-vote .up   { color: var(--red);  }
.c-vote .down { color: var(--blue); }
.c-vote .up:hover, .c-vote .down:hover { background: var(--tint); border-radius: 3px; }
.c-vote .sep { color: var(--muted); }
.c-vote a { color: var(--muted); font-size: 11.5px; }

/* 댓글 트리 — depth(--d)에 비례한 들여쓰기. 임의 깊이 지원, 과도한 들여쓰기는 min()으로 캡. */
.comments .comment { margin-left: min(calc(var(--d, 0) * 22px), 132px); }
.comments .comment.is-reply {
  padding: 12px 14px;
  border-bottom: 0;
  border-left: 2px solid var(--hair);
  background: var(--tint);
  border-radius: 0 var(--r) var(--r) 0;
  margin-top: 6px;
  font-size: 13.5px;
}

/* 댓글 헤더 + 정렬 탭 */
.comments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.comment-sort { display: flex; gap: 2px; font-size: 12px; flex-shrink: 0; }
.comment-sort a {
  color: var(--muted);
  padding: 3px 8px;
  border-radius: var(--r);
}
.comment-sort a:hover { color: var(--ink); background: var(--tint); text-decoration: none; }
.comment-sort a.active { color: var(--blue); font-weight: 600; background: var(--blue-soft); }

/* 다음 페이지 링크 */
.comments-more { text-align: center; padding: 16px 0 4px; }

/* @지목(멘션) */
.comments .mention { color: var(--blue); font-weight: 600; }
a.mention:hover { text-decoration: underline; }

/* @ 타이핑 자동완성 드롭다운 */
.mention-pop {
  position: fixed;
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  max-height: 200px;
  overflow-y: auto;
  font-size: 13px;
}
.mention-pop li {
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
}
.mention-pop li.active,
.mention-pop li:hover { background: var(--blue-soft); color: var(--blue); }

/* ── 어드민 패널 (/coffee) ──────────────────────────────── */
.admin-panel { max-width: 880px; margin: 0 auto; }
.admin-panel-head { margin-bottom: 24px; }
.admin-panel-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.admin-panel-head .sub { font-size: 13px; color: var(--sub); margin: 0; }
.role-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 600;
  color: var(--blue); border: 1px solid var(--blue); border-radius: 2px;
  padding: 1px 5px; letter-spacing: 0.04em; vertical-align: middle;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.admin-card {
  display: block;
  padding: 16px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}
.admin-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.admin-card p { font-size: 12px; color: var(--muted); margin: 0; }
a.admin-card:hover { border-color: var(--blue); background: var(--tint); text-decoration: none; }
.admin-card.is-soon { opacity: 0.5; cursor: default; }

/* 신고 상태 배지 */
.report-status {
  display: inline-block;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 2px; white-space: nowrap;
}
.report-status--open       { color: var(--red);   border: 1px solid var(--red); }
.report-status--in_review  { color: var(--blue);  border: 1px solid var(--blue); }
.report-status--resolved   { color: var(--green); border: 1px solid var(--green); }
.report-status--dismissed  { color: var(--muted); border: 1px solid var(--hair); }

/* 신고 카드 (관리자 신고 큐) */
.report-item {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.report-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--sub); margin-bottom: 8px;
}
.report-head .num { color: var(--muted); }
.report-head .report-date { margin-left: auto; color: var(--muted); }
.report-target { font-size: 14px; margin-bottom: 6px; word-break: break-word; }
.report-target a { color: var(--ink); }
.report-target a:hover { color: var(--blue); }
.report-open { font-size: 11px; color: var(--blue); white-space: nowrap; }
.report-gone { color: var(--muted); font-size: 13px; }
.report-reason-detail { font-size: 12.5px; color: var(--sub); margin-bottom: 10px; word-break: break-word; }
.report-reason-detail span { color: var(--muted); font-weight: 600; margin-right: 6px; }
.report-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ── 에러 페이지 (404 등) ───────────────────────────────── */
.error-page {
  max-width: 480px;
  margin: 64px auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.error-page .error-code {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -0.04em;
}
.error-page h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 16px 0 8px;
}
.error-page p { color: var(--sub); font-size: 14px; margin: 0 0 24px; }
.error-page .error-actions { display: flex; gap: 8px; justify-content: center; }

/* ── 불용어 관리 칩 (어드민) ────────────────────────────── */
.stopword-list { display: flex; flex-wrap: wrap; gap: 8px; }
.stopword-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 4px 6px 4px 12px; font-size: 13px; background: var(--tint);
}
.stopword-chip form { margin: 0; }
.stopword-chip button {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.stopword-chip button:hover { color: var(--red); }

/* ── 댓글 / 답글 입력 폼 ────────────────────────────────── */
.comment-form { margin-top: 20px; }
.comment-form .cf-as {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--sub);
}
.comment-form .cf-as strong { color: var(--ink); font-weight: 600; }
.comment-form .cf-cred {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.comment-form .cf-cred label {
  flex: 1 1 0;            /* 데스크톱: 닉/비번 50:50 늘림 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comment-form .cf-cred input,
.comment-form textarea {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  transition: border-color 120ms ease;
}
.comment-form .cf-cred input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 13px;
}
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  min-height: 84px;
}
.comment-form .cf-cred input:focus,
.comment-form textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
  border-color: var(--blue);
}
.comment-form .cf-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* 답글 폼 — 댓글 아래 톤다운 박스 (JS 토글로 display 제어) */
.reply-form {
  margin: 8px 0 12px 32px;
  padding: 12px 14px;
  background: var(--tint);
  border-left: 2px solid var(--hair);
  border-radius: 0 var(--r) var(--r) 0;
}
.comment-form--reply { margin-top: 0; }
.comment-form--reply textarea { min-height: 60px; }

/* 모바일: 닉/비번이 있는 폼만 [닉·비번 세로 스택 | 댓글창] 2컬럼.
   회원 폼(.cf-cred 없음)은 단일 컬럼 풀폭 유지. */
@media (max-width: 640px) {
  .comment-form:has(.cf-cred) {
    display: grid;
    grid-template-columns: minmax(88px, 30%) 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .comment-form:has(.cf-cred) .cf-cred {
    grid-column: 1;
    flex-direction: column;
    margin-bottom: 0;
  }
  /* 모바일: label 텍스트 숨기고 placeholder로 안내 */
  .comment-form:has(.cf-cred) .cf-cred label span { display: none; }
  /* textarea 높이 = 닉 인풋 + 사이 gap + 비번 인풋 (cf-cred에 맞춤) */
  .comment-form:has(.cf-cred) textarea {
    grid-column: 2;
    height: 100%;
    min-height: 0;
  }
  .comment-form:has(.cf-cred) .cf-actions {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  /* 모바일: 댓글 들여쓰기 단위 축소 + 캡으로 가로 넘침 방지 */
  .comments .comment { margin-left: min(calc(var(--d, 0) * 12px), 60px); }
}

/* ── Compose (글쓰기 폼) ────────────────────────────────── */
.compose {
  max-width: 880px;
  margin: 0 auto;
}
.compose h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.compose .field {
  margin-bottom: 16px;
}
.compose .field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.compose .row-fields { display: flex; gap: 12px; }
.compose .row-fields .field { flex: 1 1 0; }
.compose input[type=text],
.compose input[type=password],
.compose textarea,
.compose select {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.compose .title-input {
  font-size: 18px;
  font-weight: 600;
  padding: 12px 14px;
  letter-spacing: -0.015em;
}
.compose textarea {
  min-height: 320px;
  line-height: 1.65;
  resize: vertical;
}
.compose input:focus,
.compose textarea:focus,
.compose select:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
}
.compose .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
}
.compose .file-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--muted);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-primary {
  background: var(--blue);
  color: #fff !important;
  border-color: var(--blue);
}
.btn-primary:hover { filter: brightness(0.92); text-decoration: none; }
.btn-ghost {
  background: var(--bg);
  color: var(--ink) !important;
  border-color: var(--hair);
}
.btn-ghost:hover { background: var(--tint); text-decoration: none; }
.btn-danger {
  background: var(--red);
  color: #fff !important;
  border-color: var(--red);
}
.btn-danger:hover { filter: brightness(0.92); }

/* form 안의 submit 기본 = primary */
form > p > button[type=submit],
form > div > button[type=submit] {
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  padding: 8px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r);
  cursor: pointer;
}
form > p > button[type=submit]:hover,
form > div > button[type=submit]:hover { filter: brightness(0.92); }

/* form 안의 취소 링크 → ghost button look */
form p > a, form > a.cancel {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  color: var(--sub) !important;
  font-size: 13px;
  background: var(--bg);
  margin-left: 8px;
}
form p > a:hover { background: var(--tint); color: var(--ink) !important; text-decoration: none; }

button.danger { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }

/* ── Auth (login/signup) ────────────────────────────────── */
.auth-wrap {
  max-width: 420px;
  margin: 24px auto;
}
.auth-wrap h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.auth-wrap .sub {
  font-size: 13px;
  color: var(--sub);
  margin: 0 0 20px;
}
.auth-wrap form { margin: 12px 0; }
.auth-wrap form p { margin: 10px 0; }
.auth-wrap form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sub);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.auth-wrap form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.auth-wrap form input:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
}
.auth-wrap form > p > button[type=submit] {
  width: 100%;
  padding: 11px 0;
  font-size: 14px;
}
.auth-or {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  margin: 18px 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--hair);
}
.auth-or span { padding: 0 12px; }
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink) !important;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-google:hover {
  background: var(--tint);
  border-color: var(--blue);
  text-decoration: none;
}
.btn-google .g-mark {
  display: inline-block;
  width: 18px; height: 18px;
  background: conic-gradient(from -45deg, #4285f4 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75%);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Profile / Settings / Me ────────────────────────────── */
.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
}
.profile-head .avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex: 0 0 auto;
}
.profile-head .meta { flex: 1 1 auto; min-width: 0; }
.profile-head h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.profile-head .meta .sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.profile-head .actions { display: flex; gap: 8px; flex: 0 0 auto; }

dl { margin: 16px 0; }
dt {
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 14px;
}
dd {
  margin: 4px 0 0 0;
  color: var(--ink);
  font-size: 14px;
}

.flash-ok, .flash-err {
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 13px;
  margin: 12px 0;
  border: 1px solid;
}
.flash-ok  { background: var(--ok-bg);  color: var(--green); border-color: var(--green); }
.flash-err { background: var(--err-bg); color: var(--red);   border-color: var(--red); }

/* ── Footer ─────────────────────────────────────────────── */
body > footer {
  border-top: 1px solid var(--hair);
  background: var(--tint);
  padding: 24px var(--gutter);
  margin-top: 40px;
}
body > footer .wrap {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted);
}
body > footer nav { display: flex; gap: 18px; }
body > footer nav a { color: var(--muted); }
body > footer nav a:hover { color: var(--blue); }

/* ── Gallery list (home의 갤러리 카드 — fallback) ──────── */
.gallery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.gallery-list li {
  border: 1px solid var(--hair);
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--bg);
}
.gallery-list li:hover { border-color: var(--blue); }
.gallery-list li strong { font-size: 14px; }
.gallery-list li small { display: block; margin-top: 2px; }

/* ── 검색 결과 페이지 ──────────────────────────────────── */
.search-wrap {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 36px;
  align-items: start;
}
.search-wrap .filters .sec { margin-bottom: 24px; }
.search-wrap .filters .sec h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.search-wrap .filters ul { list-style: none; padding: 0; margin: 0; }
.search-wrap .filters ul li { padding: 5px 0; font-size: 13px; color: var(--sub); }
.search-wrap .filters ul li.on { color: var(--ink); font-weight: 600; }

/* ── Settings tabs ──────────────────────────────────────── */
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 20px;
  overflow-x: auto;
}
.settings-tabs a {
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--sub);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.settings-tabs a.on, .settings-tabs a:hover {
  color: var(--ink);
  border-bottom-color: var(--blue);
}

/* ── Misc ──────────────────────────────────────────────── */
::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

/* admin queue table inline forms */
.post-list-row form { display: inline; margin: 0 2px; }
.post-list-row form button { padding: 4px 8px; font-size: 12px; border-radius: 3px; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-grid .sidebar { display: none; } /* MVP — 모바일에서 사이드바 숨김 */
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hot-grid { grid-template-columns: repeat(3, 1fr); }
  .search-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  html { font-size: 13.5px; }
  .masthead .wrap { padding: 14px var(--gutter); gap: 14px; flex-wrap: wrap; }
  .search-box { width: 100%; order: 3; }
  .main-nav { gap: 16px; flex: 1 1 0; margin-left: 0; }
  .board-grid { grid-template-columns: 1fr; }
  .hot-grid { grid-template-columns: repeat(2, 1fr); }
  .post-list-row { grid-template-columns: minmax(0, 1fr) 64px 52px; gap: 8px; }
  .post-list-row .num-col,
  .post-list-row .meta-col:nth-last-child(-n+2) { display: none; }
  .post-detail h1 { font-size: 21px; }
  .post-body { font-size: 14.5px; }
  .vote-bar { flex-wrap: wrap; }
  .vote-bar .sep, .vote-bar .ghost { display: none; }
  .board-head .actions { width: 100%; justify-content: flex-end; }
  .util-bar .wrap > span:first-child { display: none; }
}

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

/* ── Legal pages (이용약관 / 개인정보처리방침) ──────────── */
.legal {
  max-width: 760px;
  margin: 8px auto 24px;
  color: var(--ink);
  line-height: 1.75;
  font-size: 14.5px;
}
.legal h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.legal .legal-meta {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 24px;
}
.legal section { margin: 28px 0; }
.legal h2 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
}
.legal p { margin: 0 0 10px; color: var(--sub); }
.legal ul, .legal ol { margin: 0 0 10px; padding-left: 20px; color: var(--sub); }
.legal li { margin: 4px 0; }
.legal ul ul { margin: 4px 0; }
.legal a { color: var(--blue); }
.legal a:hover { text-decoration: underline; }

/* ── WYSIWYG 에디터 ─────────────────────────────────────── */
.yh-editor {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--bg);
  margin-top: 6px;
  overflow: hidden;
}
.yh-editor:focus-within { border-color: var(--blue); }
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hair);
  background: var(--tint);
}
.editor-toolbar button {
  background: transparent;
  border: 0;
  color: var(--sub);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  min-width: 28px;
}
.editor-toolbar button:hover { background: var(--bg); color: var(--ink); }
.editor-toolbar .sep {
  width: 1px; height: 16px;
  background: var(--hair);
  margin: 0 4px;
  display: inline-block;
}
.editor-content {
  min-height: 360px;
  padding: 14px 16px;
  outline: none;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.editor-content p { margin: 0 0 10px; }
.editor-content h2 { font-size: 22px; font-weight: 700; margin: 18px 0 10px; letter-spacing: -0.02em; }
.editor-content h3 { font-size: 17px; font-weight: 650; margin: 14px 0 8px; letter-spacing: -0.01em; }
.editor-content blockquote {
  margin: 10px 0;
  padding: 6px 14px;
  border-left: 3px solid var(--blue);
  color: var(--sub);
  background: var(--tint);
}
.editor-content ul, .editor-content ol { margin: 8px 0; padding-left: 24px; }
.editor-content a { color: var(--blue); text-decoration: underline; }
.editor-content img, .editor-content video { max-width: 100%; border-radius: var(--r-sm); margin: 6px 0; }
.editor-status { padding: 4px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--hair); }
.editor-status:empty { display: none; }
.yh-spinner { display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid var(--hair); border-top-color: var(--muted);
  border-radius: 50%; animation: yh-spin 0.6s linear infinite; }
@keyframes yh-spin { to { transform: rotate(360deg); } }

/* 에디터 동영상 placeholder — 썸네일 포스터 + 중앙 재생버튼(재생 X, 컴포넌트 표식) */
.yh-vid-embed { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.yh-vid-embed .yh-vid-poster { display: block; max-width: 100%; min-width: 240px; min-height: 135px;
  object-fit: cover; background: #111; border-radius: 4px; }
.yh-vid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%; background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); pointer-events: none; }
.yh-vid-play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }

/* 작성자 IP 배지 (국기 + 부분 마스킹 IP) — 글/댓글 작성자 옆 */
.ip-badge {
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: 4px; white-space: nowrap;
}

/* 관리자삭제 버튼 (admin/owner 전용) */
.post-meta-links form { display: inline; margin: 0; }
.admin-del {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--red);
}
.admin-del:hover { text-decoration: underline; }

/* 본문 유튜브 임베드 (body.rs가 <div data-yt>를 변환) — 반응형 16:9 */
.yt-embed { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 12px 0; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }

/* 본문 렌더 — 글 상세에서도 동일 스타일 (post-body 내) */
.post-body img, .post-body video { max-width: 100%; border-radius: var(--r-sm); margin: 10px 0; }

/* ── 우하단 FAB (버그/신고/제안 폼) ─────────────────────── */
#fb-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 99;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 6px 20px oklch(0.18 0.005 250 / 0.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms ease, background 120ms ease;
}
#fb-fab:hover { transform: translateY(-2px); }
#fb-fab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#fb-panel {
  position: fixed; right: 22px; bottom: 88px; z-index: 100;
  width: 360px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 12px 36px oklch(0.18 0.005 250 / 0.25);
  display: none; flex-direction: column; overflow: hidden;
  animation: fb-pop .14s ease-out;
}
#fb-panel.show { display: flex; }
@keyframes fb-pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#fb-panel header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--hair);
}
#fb-panel header h2 { margin: 0; font-size: 14px; font-weight: 700; }
#fb-close {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted);
}
#fb-close:hover { color: var(--ink); }
#fb-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
#fb-form .fb-kind { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
#fb-form .fb-kind label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
#fb-form input[type="text"], #fb-form textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--bg); color: var(--ink); resize: vertical;
}
#fb-form input[type="text"]:focus, #fb-form textarea:focus {
  border-color: var(--blue); outline: 0;
}
#fb-form textarea { min-height: 110px; }
#fb-form .fb-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#fb-form .fb-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
#fb-form .fb-msg { font-size: 12.5px; color: var(--green); margin: 0; }
#fb-form .fb-msg.err { color: var(--red); }

@media (max-width: 480px) {
  #fb-panel { right: 12px; left: 12px; width: auto; bottom: 80px; }
  #fb-fab { right: 14px; bottom: 14px; }
}

/* ── /me 의 '내 활동' 정보 리스트 (.me-info) ───────────────
 * 원래의 세로 스택 흐름 유지. 행 간격만 살짝 넓혀 답답함 완화(구조 변경 없음). */
.me-info { margin: 18px 0 0; }
.me-info dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 22px;        /* 기존 14px → 22px : 행 사이 호흡 */
}
.me-info dt:first-of-type { margin-top: 0; }
.me-info dd {
  margin: 6px 0 0;          /* 기존 4px → 6px : 라벨↔값 살짝 */
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}