/* 짤통 / jjaltong — 화면 규칙. 값은 tokens.css 의 변수만 쓴다(raw 색 0).
 * 원칙 1 선 대신 칸새: 구획은 4px 칸새 + 면 3단(surface · surface-2 · paper)뿐 — border 0 · 그림자 0 · 모서리 0.
 * 원칙 2 마젠타는 추천에만: 도장 · 눌린 추천 · 베 표지 · ▲ 글리프 · 포커스 링.
 * 원칙 3 글자는 두 가족 크기 7단: Gasoek One 은 --text-lg(22) 이상, Pretendard 는 --text-base(16) 이하.
 * 격자: 정사각 셀 U = (컨테이너 폭 − 칸새) / 열 — 6 / 4 / 2열, 칸 크기 = 추천 수(1 · 2 · 4칸). */

/* ── 리셋 (:where — 특이도 0, lessons #49) ─────────────────────────────── */
:where(*, *::before, *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
:where(ol, ul) {
  list-style: none;
}
:where(a) {
  color: inherit;
}
:where(button) {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-none);
}
:where(button, a) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(h1, h2, h3, p) {
  overflow-wrap: break-word;
}
[hidden] {
  display: none !important;
}

/* ── 열 · 가장자리 · 셀 U ──────────────────────────────────────────────── */
:root {
  --cols: 2;
  --edge: var(--spacing-edge-sm);
  color-scheme: dark;
  background: var(--color-bg);
}
@media (min-width: 720px) {
  :root {
    --cols: 4;
    --edge: var(--spacing-edge-md);
  }
}
@media (min-width: 1200px) {
  :root {
    --cols: 6;
    --edge: var(--spacing-edge-lg);
  }
}

body {
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--spacing-container);
  margin-inline: auto;
  padding-inline: max(var(--edge), env(safe-area-inset-left)) max(var(--edge), env(safe-area-inset-right));
}
/* 셀 U 는 이 컨테이너의 폭에서 온다 — 100vw 는 스크롤바 폭을 품어 칸이 정사각이 아니게 된다 */
.cq {
  container-type: inline-size;
  --u: calc((100cqi - (var(--cols) - 1) * var(--spacing-gap)) / var(--cols));
}

/* ── Gasoek One — 숫자 · 도장 · 워드마크 · 4자 이하 낱말만 · 굵기 하나(가짜 굵게 없음) · 자간 0 ──
   문장·이름을 Gasoek 로 쓰면 22·30px 에서 획이 속공간을 메워 덩어리로 뭉친다(사용자 지적 2026-09-25 13:0x).
   그래서 한 클래스 = 한 가족: 길이가 섞이는 역할(쪽 제목 · 띠 머리)은 짧은 것까지 통째로 Pretendard 다 */
.mh-mark-t,
.stamp,
.opt-p,
.av-l,
.rank,
.rank-n,
.sub-h,
.vote-g,
.vote-n,
.pv-note-n,
.big-n,
.mid-n,
.rule-n,
.ft-mark-w {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  word-break: keep-all;
}
/* 크기 단 — Gasoek 는 토큰 행간까지, Pretendard 는 크기만(행간은 아래 Pretendard 블록이 1.2 로) */
.stamp,
.opt-p,
.av-l,
.sub-h,
.ft-mark-w {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}
.mh-mark-t,
.rank,
.rank-n,
.vote-g,
.vote-n,
.pv-note-n {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.mid-n {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}
.big-n,
.rule-n,
.rankplate--1 .rank-n {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}
.drip-t,
.strip-drip-t,
.poll-q,
.more-t,
.rule-h,
.board-drip,
.tag--md .tag-k {
  font-size: var(--text-lg);
}
.strip-h,
.tools-h,
.tag--lg .tag-k,
.board-k,
.plate-t {
  font-size: var(--text-xl);
}
.page-h,
.post-h,
.drop-t,
.done-t,
.notice-h,
.tag--xl .tag-k {
  font-size: var(--text-2xl);
}
@media (max-width: 719px) {
  .page-h,
  .post-h,
  .notice-h,
  .done-t {
    font-size: var(--text-xl);
  }
}
/* ── Pretendard 800 — 문장 · 이름 · 5자 이상 제목 (22 / 30 / 40 단은 그대로, 행간 1.2 · 자간 −0.01em) ── */
.strip-h,
.tools-h,
.drip-t,
.strip-drip-t,
.poll-q,
.plate-t,
.more-t,
.page-h,
.sub-h--t,
.post-h,
.drop-t,
.done-t,
.tag-k,
.board-k,
.board-drip,
.notice-h,
.rule-h {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: var(--tracking-head);
  line-height: var(--leading-head);
  word-break: keep-all;
}

/* ── 쓸모 ──────────────────────────────────────────────────────────────── */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
}
.skip {
  position: absolute;
  left: var(--spacing-2);
  top: calc(var(--spacing-12) * -2);
  z-index: 10;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-paper);
  color: var(--color-ink-dark);
  font-weight: 700;
  font-size: var(--text-sm);
}
.skip:focus {
  top: var(--spacing-2);
}
:focus-visible {
  outline: var(--spacing-ring) solid var(--color-hot);
  outline-offset: var(--spacing-ring-offset);
}
/* ▲ 글리프는 줄 색을 따른다 — 마젠타 ▲ 는 누를 수 있는 추천(추천 버튼)과 받은 추천 두 곳만 */
.up {
  color: inherit;
}
.big-l .up {
  color: var(--color-hot);
}
.note-line {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
  padding-block: var(--spacing-2);
}

/* 네모 버튼 — 알약 0 · 눌림 = 종이 면 */
.sq-btn,
.chip,
.tab-sq,
.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: var(--spacing-touch);
  padding-inline: var(--spacing-4);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  text-decoration: none;
  transition: transform 90ms var(--ease-snap);
}
.sq-btn--paper,
.sq-btn[aria-pressed="true"],
.chip[aria-pressed="true"],
.tab-sq[aria-pressed="true"] {
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.sq-btn--lg {
  min-height: var(--spacing-12);
  padding-inline: var(--spacing-5);
  font-size: var(--text-base);
}
.sq-btn--full {
  width: 100%;
}
.sq-btn:active,
.chip:active,
.tab-sq:active,
.toggle:active,
.vote-b:active,
.tile--more:active {
  transform: scale(0.97);
}

/* ── 머리 ──────────────────────────────────────────────────────────────── */
.mh {
  width: 100%;
  max-width: var(--spacing-container);
  margin-inline: auto;
  padding-inline: max(var(--edge), env(safe-area-inset-left)) max(var(--edge), env(safe-area-inset-right));
}
.mh-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: var(--spacing-head-sm) var(--spacing-touch);
  gap: var(--spacing-gap);
}
.mh-mark {
  grid-column: 1;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-4);
  background: var(--color-paper);
  color: var(--color-ink-dark);
  text-decoration: none;
}
.mh-tabs {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-gap);
}
.mh-tab,
.mh-btn,
.mh-search {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--spacing-4);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  text-decoration: none;
}
.mh-tab.is-on,
.mh-btn--paper {
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.mh-search {
  display: none;
}
.mh-btn--paper {
  grid-column: 3;
}
.mh-btn:last-child {
  grid-column: 4;
}
.only-wide {
  display: none;
}
@media (min-width: 720px) {
  .mh-row {
    display: flex;
    height: var(--spacing-head);
  }
  .mh-mark {
    padding-inline: var(--spacing-5);
  }
  .mh-tabs {
    display: flex;
    gap: var(--spacing-gap);
    margin-right: auto;
  }
  .mh-tab {
    min-width: calc(var(--spacing-12) + var(--spacing-6));
    padding-inline: var(--spacing-5);
  }
  .mh-tab:nth-child(4) {
    display: none;
  }
  .mh-btn {
    padding-inline: var(--spacing-5);
  }
  .only-wide {
    display: inline;
  }
  .only-narrow {
    display: none;
  }
}
@media (min-width: 1200px) {
  .mh-search {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: calc(var(--u) * 1.2);
    padding-inline: var(--spacing-4);
  }
  .mh-search-t {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }
  .mh-search-s {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: 400;
    color: var(--color-ink-mute);
  }
}

/* ── 본문 흐름 — 블록 사이도 칸새 ─────────────────────────────────────── */
main.wrap {
  padding-top: var(--spacing-2);
}
.cq > * + *,
.cq > [hidden] + * {
  margin-top: var(--spacing-gap);
}

/* ── 벤토 격자 ─────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--u);
  grid-auto-flow: row dense;
  gap: var(--spacing-gap);
}
.s-21 {
  grid-column: span 2;
}
.s-12 {
  grid-row: span 2;
}
.s-22 {
  grid-column: span 2;
  grid-row: span 2;
}
.s-banner {
  grid-column: 1 / -1;
}
.s-full4 {
  grid-column: span 2;
}
@media (min-width: 1200px) {
  .s-banner {
    grid-column: span 3;
  }
  .s-more {
    grid-column: 1 / -1;
  }
  .s-full4 {
    grid-column: span 4;
  }
}

/* ── 칸 ─────────────────────────────────────────────────────────────────── */
.tile {
  --pad: var(--spacing-3);
  --bar-h: var(--spacing-bar);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}
.tile.s-21,
.tile.s-12,
.tile.s-22,
.tile.s-banner,
.tile.s-full4 {
  --pad: var(--spacing-4);
  --bar-h: var(--spacing-bar-lg);
}

/* 사진 — 같은 사진을 칸마다 다른 크롭으로(cover + 초점). 불러오는 동안은 먹3 면 */
.img {
  display: block;
  max-width: 100%;
  object-fit: cover;
  background: var(--color-surface-2);
}
.img[data-asset="j1"] { object-position: 45% 45%; }
.img[data-asset="j2"] { object-position: 50% 60%; }
.img[data-asset="j3"] { object-position: 50% 45%; }
.img[data-asset="j4"] { object-position: 45% 45%; }
.img[data-asset="j5"] { object-position: 40% 72%; }
.img[data-asset="j6"] { object-position: 55% 68%; }
.img[data-asset="j7"] { object-position: 55% 36%; }
.img[data-asset="j8"] { object-position: 45% 55%; }
.img[data-asset="b1"] { object-position: 72% 55%; }
.ph-meta {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
}
.tile--jjal {
  background: var(--color-surface-2);
}
.tile--jjal > .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--bar-h));
}

/* 아래 띠 — 실제 뒤판 면(쪽먹) 위 글자. 호버·포커스 = 종이로 하드 컷 */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-inline: var(--pad);
  background: var(--color-bg);
  color: var(--color-ink);
}
.bar-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.bar-m {
  flex: none;
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-mute);
}
a.tile:hover .bar,
a.tile:focus-visible .bar,
a.strip-c:hover .bar,
a.strip-c:focus-visible .bar {
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
a.tile:hover .bar-m,
a.tile:focus-visible .bar-m,
a.tile:hover .bar .up,
a.tile:focus-visible .bar .up,
a.strip-c:hover .bar-m,
a.strip-c:focus-visible .bar-m,
a.strip-c:hover .bar .up,
a.strip-c:focus-visible .bar .up {
  color: var(--color-ink-dark);
}

/* 추천 도장 — 마젠타 면 · 먹 글자 · ≤ 120×36 */
.stamp {
  position: absolute;
  top: var(--spacing-2);
  left: var(--spacing-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  height: var(--spacing-8);
  padding-inline: var(--spacing-2);
  background: var(--color-hot);
  color: var(--color-ink-dark);
  white-space: nowrap;
}
.stamp .up {
  color: var(--color-ink-dark);
}

/* 베댓 조각 — 4칸 짤에만. 종이 판 + 베 표지 */
.be {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-5));
  height: calc(var(--spacing-5));
  background: var(--color-hot);
  color: var(--color-ink-dark);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-xs);
  line-height: 1;
}
.bestbit {
  position: absolute;
  left: var(--spacing-2);
  right: var(--spacing-2);
  bottom: calc(var(--bar-h) + var(--spacing-2));
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.bestbit-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.bestbit .up {
  color: var(--color-ink-dark);
}

/* 드립 칸 — 글자만. 100+ 는 종이 면(커진 칸만 밝아진다) */
.tile--drip,
.tile--poll {
  gap: var(--spacing-2);
  padding: var(--pad);
}
.tile--drip > .stamp,
.poll-head > .stamp {
  position: static;
  align-self: flex-start;
}
.drip-t {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.s-21 .drip-t {
  font-size: var(--text-xl);
}
.s-22 .drip-t {
  font-size: var(--text-2xl);
}
.tile-m {
  margin-top: auto;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.tile.is-paper {
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.tile.is-paper .tile-m {
  color: var(--color-ink-dark-mute);
}

/* 투표 칸 — 막대는 면: 이긴 쪽 종이 · 진 쪽 먹3 */
.poll-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}
.poll-head .tile-m {
  margin-top: 0;
}
.poll-bar {
  display: flex;
  height: var(--spacing-2);
  flex: none;
}
.poll-bar > span {
  flex-basis: 0;
  background: var(--color-surface-2);
}
.poll-bar > .is-win {
  background: var(--color-paper);
}
.opts {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-2);
}
.opt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.opt + .opt {
  align-items: flex-end;
  text-align: right;
}
.opt-l {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
}
.s-21 .opt {
  flex-direction: row;
  align-items: baseline;
  gap: var(--spacing-2);
}
.s-21 .opt + .opt {
  flex-direction: row-reverse;
}

/* 배너 칸 — 사진 위 글자는 종이 판 위에만(덮개·그라데이션 없음) */
.tile--banner > .img,
.banner > .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plate {
  position: absolute;
  left: var(--spacing-4);
  top: var(--spacing-4);
  max-width: calc(100% - var(--spacing-8));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.plate-s {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 700;
  color: var(--color-ink-dark-mute);
}

/* 더 보기 · END — 먹3 면 */
.tile--more,
.tile--end,
.hot-rest {
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--pad);
  background: var(--color-surface-2);
  text-align: center;
}
.more-s {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
}
.steps {
  display: flex;
  gap: var(--spacing-1);
}
.steps i {
  width: var(--spacing-3);
  height: var(--spacing-3);
  background: var(--color-bg);
}
.steps i.on {
  background: var(--color-paper);
}

/* ── 홈: 인기 띠 ───────────────────────────────────────────────────────── */
.strip-head {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
  padding-block: var(--spacing-1);
}
.strip-s {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
}
.strip-row {
  position: relative;
  display: flex;
  gap: var(--spacing-gap);
  margin-top: var(--spacing-gap);
  margin-inline: calc(var(--edge) * -1);
  padding-inline: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}
.strip-row::-webkit-scrollbar {
  display: none;
}
.strip-row > li {
  flex: 0 0 calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.6);
  scroll-snap-align: start;
}
.strip-c {
  position: relative;
  display: block;
  height: 100%;
  container: stripc / size;
  overflow: hidden;
  background: var(--color-surface-2);
  color: var(--color-ink);
  text-decoration: none;
}
.strip-c:focus-visible {
  outline-offset: calc(var(--spacing-ring) * -1);
}
.strip-c > .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--spacing-bar));
  transform: scale(2);
}
/* 인기 띠 = 예고, 피드 = 전체 장면 — 같은 쪽 피드에 같은 사진이 있으므로 띠는 세부만 보인다
   (wireframe §8 "한 쪽 안에서는 겹치지 않는다" 가 §9-1 배정보다 우선, #51). 초점 = object-position = transform-origin 이면
   cover 크롭 뒤에도 초점이 칸의 같은 비율 자리에 남아 그 점을 중심으로 커진다. clip-path 는 쓰지 않는다 */
.strip-c > .img[data-asset="j2"] { object-position: 27% 40%; transform-origin: 27% 40%; transform: scale(2.2); }
.strip-c > .img[data-asset="j7"] { object-position: 54% 42%; transform-origin: 54% 42%; transform: scale(2.4); }
.strip-c > .img[data-asset="j6"] { object-position: 56% 58%; transform-origin: 56% 58%; transform: scale(2.6); }
.strip-c > .img[data-asset="j4"] { object-position: 72% 30%; transform-origin: 72% 30%; transform: scale(2.2); }
.strip-drip {
  position: absolute;
  inset: 0 0 var(--spacing-bar) 0;
  padding: calc(var(--spacing-touch) + var(--spacing-1)) var(--spacing-3) 0;
  background: var(--color-surface);
}
.strip-drip-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  font-size: var(--text-lg);
}
@media (min-width: 1200px) {
  .strip-drip {
    padding: var(--spacing-2) var(--spacing-3) 0 calc(var(--spacing-touch) + var(--spacing-3));
  }
  .strip-drip-t {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}
/* 칸이 순위판 아래 글줄 한 줄을 못 품으면(사진 영역 < 44 + 4 + 25) 글줄은 띠 제목에 맡긴다 — 반만 보이는 글자 0.
   ≥720 은 아래 칸 높이 하한으로 늘 품는다. 여기 걸리는 것은 360 안팎 폰뿐 */
@container stripc (height < 110px) {
  .strip-drip-t {
    display: none;
  }
}
.strip-c .bar {
  --pad: var(--spacing-3);
  --bar-h: var(--spacing-bar);
}
/* <720 — ▲수는 순위판 옆 종이 판으로 올리고 아래 띠는 제목만(148px 칸에서 제목 8–9글자) */
.rank-up {
  display: none;
}
@media (max-width: 719px) {
  .rank-up {
    position: absolute;
    top: 0;
    left: var(--spacing-touch);
    display: inline-flex;
    align-items: center;
    height: var(--spacing-touch);
    padding-inline: 0 var(--spacing-2);
    background: var(--color-paper);
    color: var(--color-ink-dark);
    font-weight: 700;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-variant-numeric: tabular-nums;
  }
  .strip-c .bar-m {
    display: none;
  }
}
.rank {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-touch);
  height: var(--spacing-touch);
  padding-inline: var(--spacing-2);
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
@media (min-width: 720px) {
  .strip-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  /* 0.6U 는 720–791 에서 101–111px — 사진 영역이 순위판 44 + 드립 글줄(25)을 못 품어 글줄이 반만 보였다(qa-2 P2-1).
     띠 + 순위판 + 32 를 하한으로 둔다(720 에서 +11px) */
  .strip-row > li {
    height: max(calc(var(--u) * 0.6), calc(var(--spacing-bar) + var(--spacing-touch) + var(--spacing-8)));
  }
}
@media (min-width: 1200px) {
  .strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--spacing-gap);
    height: calc(var(--u) * 0.6);
  }
  .strip-head {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--spacing-1);
    padding: var(--spacing-3);
    background: var(--color-surface);
  }
  .strip-row {
    grid-column: span 5;
    margin-top: 0;
    height: 100%;
  }
  .strip-row > li {
    height: 100%;
  }
}

/* ── 홈: 도구 줄 · 크기 범례 ───────────────────────────────────────────── */
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-4);
  row-gap: var(--spacing-1);
  min-height: var(--spacing-12);
}
.sort {
  display: flex;
  gap: var(--spacing-gap);
  margin-left: auto;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-3);
  row-gap: var(--spacing-1);
  min-height: var(--spacing-6);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
}
.tools > .legend {
  flex-basis: 100%;
}
.lg-i {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-ink);
}
.lg-n {
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.lg {
  display: inline-block;
  flex: none;
  width: var(--spacing-2);
  height: var(--spacing-2);
  background: var(--color-ink-mute);
}
.lg-2 {
  width: calc(var(--spacing-2) * 2 + var(--spacing-1) / 2);
  background: var(--color-paper);
}
.lg-4 {
  width: calc(var(--spacing-2) * 2 + var(--spacing-1) / 2);
  height: calc(var(--spacing-2) * 2 + var(--spacing-1) / 2);
  background: var(--color-paper);
}
.tools-note {
  display: none;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
}
@media (min-width: 720px) {
  .tools > .legend {
    flex-basis: auto;
    order: 2;
  }
  .sort {
    order: 1;
    margin-left: 0;
  }
  .tools-note {
    display: block;
    order: 3;
    flex-basis: 100%;
  }
}
@media (min-width: 1200px) {
  .tools-note {
    flex-basis: auto;
    margin-left: auto;
  }
}

/* ── 인기 ──────────────────────────────────────────────────────────────── */
.hot-top {
  display: grid;
  gap: var(--spacing-gap);
}
.hot-title,
.pv-head,
.prof-nick,
.prof-up,
.prof-posts {
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.page-s,
.pv-s {
  margin-top: var(--spacing-2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-mute);
}
.tabs3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-gap);
}
.tab-sq {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}
@media (min-width: 720px) {
  .hot-title,
  .pv-head,
  .prof-nick,
  .prof-up,
  .prof-posts {
    padding: var(--spacing-5);
  }
}
@media (min-width: 1200px) {
  .hot-top {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .hot-title {
    grid-column: span 4;
  }
  .hot-top > .tabs3 {
    grid-column: span 2;
  }
}
.hot-li > .tile {
  height: 100%;
}
.hot-plate {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
}
.rankplate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-touch);
  height: var(--spacing-touch);
  padding-inline: var(--spacing-2);
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.rankplate--1 {
  min-width: calc(var(--spacing-12) + var(--spacing-6));
  height: calc(var(--spacing-12) + var(--spacing-6));
}
.chg {
  display: inline-flex;
  align-items: center;
  height: var(--spacing-6);
  padding-inline: var(--spacing-2);
  background: var(--color-bg);
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--text-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hot-t {
  padding-top: calc(var(--spacing-touch) + var(--spacing-3));
}
.hot-t .tile-m {
  position: absolute;
  top: var(--spacing-3);
  right: var(--pad);
  margin: 0;
}
.hot-rest {
  height: 100%;
}
.note-line + .note-line {
  margin-top: 0;
}

/* ── 글 보기 ───────────────────────────────────────────────────────────── */
.crumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
}
.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-gap);
  margin-top: var(--spacing-gap);
}
.post-shot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: var(--ar);
  background: var(--color-surface);
}
.img--shot {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--ar);
  object-fit: contain;
}
.post-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  min-width: 0;
}
.post-head,
.best,
.post-body {
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1) var(--spacing-3);
  margin-top: var(--spacing-3);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.post-nick {
  font-weight: 700;
  color: var(--color-ink);
}
.grade {
  padding-inline: var(--spacing-2);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: var(--spacing-6);
}
.vote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-gap);
  align-self: start;
  width: 100%;
}
.vote-b {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  align-content: center;
  column-gap: var(--spacing-2);
  min-height: calc(var(--spacing-12) + var(--spacing-6));
  padding: var(--spacing-2);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: transform 90ms var(--ease-snap);
}
.vote-g {
  display: inline-block;
}
.vote-b--up .vote-g {
  color: var(--color-hot);
}
.vote-n {
  display: inline-block;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.vote-n-in {
  display: inline-block;
}
.vote-l {
  flex-basis: 100%;
  text-align: center;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-mute);
}
.vote-b--up[aria-pressed="true"] {
  background: var(--color-hot);
  color: var(--color-ink-dark);
}
.vote-b--up[aria-pressed="true"] .vote-g,
.vote-b--up[aria-pressed="true"] .vote-l {
  color: var(--color-ink-dark);
}
.vote-b--down[aria-pressed="true"] {
  background: var(--color-surface-2);
}
.vote-b.is-ticking .vote-n-in {
  animation: tick 160ms var(--ease-snap);
}
.vote-b.is-stamping .vote-g {
  animation: stamp-in 120ms var(--ease-snap);
}
@keyframes tick {
  from {
    transform: translateY(60%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes stamp-in {
  from {
    transform: scale(1.35);
  }
  to {
    transform: scale(1);
  }
}
.best-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-1) var(--spacing-2);
}
.best-s {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
}
.best-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  margin-top: var(--spacing-3);
}
.best-c {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-surface-2);
}
.best-c .be {
  margin-top: var(--spacing-1);
}
.best-in {
  min-width: 0;
}
.best-nick {
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.best-up {
  margin-left: var(--spacing-1);
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.best-up .up,
.cmt--re .up {
  color: var(--color-ink-mute);
}
.best-t {
  margin-top: var(--spacing-1);
}
.post-text {
  max-width: 40em;
}
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
  margin-top: var(--spacing-3);
}
.tag-sq {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-touch);
  padding-inline: var(--spacing-4);
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
}
.sub-h {
  padding-block: var(--spacing-2);
}
.sub-s {
  margin-left: var(--spacing-2);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
}
.cmts > .sub-h {
  padding-top: var(--spacing-3);
}
.cmt-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}
.cmt-more {
  margin-top: var(--spacing-gap);
}
.cmt {
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-surface);
}
.cmt--re {
  margin-left: var(--spacing-6);
  background: var(--color-surface-2);
}
.cmt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
}
.cmt-nick {
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}
.op {
  padding-inline: var(--spacing-2);
  background: var(--color-paper);
  color: var(--color-ink-dark);
  font-weight: 800;
}
.cmt-t {
  margin-top: var(--spacing-2);
}
.at {
  font-weight: 700;
  color: var(--color-ink-mute);
}
.cmt-up {
  margin-top: var(--spacing-1);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 700;
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.cmt-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
  margin-top: var(--spacing-gap);
}
.cmt-write {
  flex: 1 1 16em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--spacing-touch);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  text-decoration: none;
}
.cmt-write-s {
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
}
.nextj-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}
.nextj-nav {
  display: flex;
  gap: var(--spacing-gap);
}
.mini-grid > li > .tile {
  height: 100%;
}
.mini-grid > li:nth-child(n + 5) {
  display: none;
}
@media (min-width: 720px) {
  .post-head,
  .best,
  .post-body {
    padding: var(--spacing-5);
  }
  .post-shot {
    max-height: min(70svh, calc(var(--u) * 3));
  }
  .post-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .post-head {
    grid-column: 1 / -1;
  }
}
@media (min-width: 720px) {
  .vote-b {
    min-height: calc(var(--spacing-12) * 2);
  }
}
@media (min-width: 1200px) {
  .post-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "shot shot shot shot side side"
      "body body body body side side"
      "cmts cmts cmts cmts side side";
    grid-template-rows: auto auto 1fr;
  }
  .post-shot {
    grid-area: shot;
    max-height: min(78svh, calc(var(--u) * 3));
  }
  .post-side {
    grid-area: side;
    position: sticky;
    top: var(--spacing-3);
    align-self: start;
    display: flex;
  }
  .post-body {
    grid-area: body;
  }
  .cmts {
    grid-area: cmts;
  }
  .mini-grid > li:nth-child(n + 5) {
    display: block;
  }
}

/* ── 글쓰기(표현) ──────────────────────────────────────────────────────── */
.notice-strip {
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-surface-2);
  font-size: var(--text-base);
}
.notice-strip b {
  font-weight: 800;
}
.page-h--solo {
  padding-block: var(--spacing-3) var(--spacing-2);
}
.write-grid {
  display: grid;
  gap: var(--spacing-gap);
}
.write > * + * {
  margin-top: var(--spacing-gap);
}
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  min-height: calc(var(--u) * 1.2);
  padding: var(--spacing-5) var(--spacing-4);
  background: var(--color-surface-2);
  text-align: center;
}
.drop-empty,
.drop-filled {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
}
.drop-s,
.drop-cap {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-mute);
}
.img--drop {
  width: calc(var(--u) * 1.2);
  height: auto;
  aspect-ratio: 4 / 5;
}
.ratio,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
}
.ratio {
  justify-content: center;
}
.drop .chip,
.field .chip {
  background: var(--color-surface);
}
.field .chip {
  background: var(--color-surface-2);
}
.drop .chip[aria-pressed="true"],
.field .chip[aria-pressed="true"] {
  background: var(--color-paper);
}
.fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.field-l {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.field-s {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-ink-mute);
}
.tag-rep {
  padding-inline: var(--spacing-2);
  background: var(--color-paper);
  color: var(--color-ink-dark);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-xs);
  line-height: var(--spacing-5);
}
.field-v {
  padding: var(--spacing-3);
  background: var(--color-surface-2);
  color: var(--color-ink-mute);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.field-v.is-filled {
  color: var(--color-ink);
  font-weight: 700;
}
.toggle {
  justify-content: flex-start;
  min-height: var(--spacing-12);
  padding-inline: var(--spacing-4);
}
.toggle-box {
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
  background: var(--color-surface-2);
}
.toggle[aria-pressed="true"] .toggle-box {
  background: var(--color-paper);
}
.pv-grid {
  grid-template-areas:
    "h h"
    "a n"
    "b b"
    "c c"
    "c c";
  grid-template-rows: auto;
}
.pv-head {
  grid-area: h;
}
.pv-11 {
  grid-area: a;
}
.pv-note {
  grid-area: n;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--spacing-1);
  padding: var(--spacing-3);
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.pv-21 {
  grid-area: b;
}
.pv-22 {
  grid-area: c;
}
.pv-head {
  display: flex;
  flex-direction: column;
}
.pv-head .legend {
  margin-top: auto;
  padding-top: var(--spacing-3);
}
.fields > .field:nth-child(3) {
  flex: 1;
}
.write-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  background: var(--color-surface);
}
.done-s {
  max-width: 40em;
  color: var(--color-ink-mute);
}
.write-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
}
@media (min-width: 720px) {
  .pv-grid {
    grid-template-areas:
      "h h h h"
      "a n c c"
      "b b c c";
    grid-template-rows: auto var(--u) var(--u);
  }
}
@media (min-width: 1200px) {
  .write-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .drop {
    grid-column: span 4;
    min-height: calc(var(--u) * 2 + var(--spacing-gap));
  }
  .fields {
    grid-column: span 2;
  }
  .pv-grid {
    grid-template-areas:
      "h h a n c c"
      "h h b b c c";
    grid-template-rows: var(--u) var(--u);
  }
}

/* ── 태그/게시판 ───────────────────────────────────────────────────────── */
.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  background: var(--color-bg);
  color: var(--color-ink);
  text-decoration: none;
}
/* <720: 21:9 는 종이 판을 품기에 낮다 — 판을 위에 세우고 그림 자리를 아래에 둔다 */
.banner > .plate {
  position: static;
  max-width: none;
}
.banner > .img {
  position: static;
  height: auto;
  aspect-ratio: 21 / 9;
}
@media (min-width: 720px) {
  .banner {
    display: block;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--color-surface-2);
  }
  .banner > .plate {
    position: absolute;
    max-width: calc(100% - var(--spacing-8));
  }
  .banner > .img {
    position: absolute;
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .banner {
    aspect-ratio: auto;
    height: var(--u);
  }
}
.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--spacing-touch);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}
.tag--sm .tag-k {
  font-weight: 700;
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}
.tag-n {
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.tag.is-on {
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.tag.is-on .tag-n {
  color: var(--color-ink-dark-mute);
}
.tagj-h {
  padding-top: var(--spacing-3);
}
.board {
  position: relative;
}
.board-a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}
.board-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-3);
}
.board-top {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-3) 0;
  overflow: hidden;
}
.board.s-21 .board-top,
.board.s-22 .board-top {
  padding: var(--spacing-4) var(--spacing-4) 0;
}
.board-drip {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
}
.board--img .board-a > .img {
  flex: 1 1 0;
  width: 100%;
  height: 0;
  min-height: 0;
}
.board--img .board-in {
  background: var(--color-bg);
}
.board.s-21 .board-in,
.board.s-22 .board-in {
  padding: var(--spacing-4);
}
.board-n {
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
  font-variant-numeric: tabular-nums;
}
.board--new {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  text-align: center;
}
.board--new .board-k {
  font-size: var(--text-lg);
}
a.board-a:hover .board-in,
a.board-a:focus-visible .board-in {
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
a.board-a:hover .board-n,
a.board-a:focus-visible .board-n {
  color: var(--color-ink-dark-mute);
}

/* ── 회원 ──────────────────────────────────────────────────────────────── */
.prof {
  grid-auto-rows: var(--u);
}
.prof-av {
  background: var(--color-surface-2);
}
.prof-nick {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.prof-up {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.prof-posts {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.big-l {
  margin-top: var(--spacing-2);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-mute);
}
.big-n,
.mid-n {
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) and (max-width: 1199px) {
  .prof-nick {
    grid-column: span 3;
  }
}
.tabs3--me {
  margin-top: var(--spacing-gap);
}
.me-panel {
  margin-top: var(--spacing-gap);
}
.mycm {
  display: grid;
  gap: var(--spacing-gap);
}
@media (min-width: 1200px) {
  .mycm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mycm-i {
  display: grid;
  grid-template-columns: var(--u) minmax(0, 1fr);
  gap: var(--spacing-gap);
  min-height: var(--u);
}
.mycm-c {
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.notice-paper {
  padding: var(--spacing-4);
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.notice-paper-t {
  font-weight: 700;
}
.notice-paper-s {
  margin-top: var(--spacing-1);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-dark-mute);
}
.login {
  display: grid;
  gap: var(--spacing-gap);
  margin-top: var(--spacing-gap);
}
.login-in,
.login-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  min-height: var(--spacing-12);
  padding-inline: var(--spacing-4);
  background: var(--color-surface-2);
  color: var(--color-ink-mute);
  font-size: var(--text-sm);
}
.login-s {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-mute);
}
.login-s a {
  font-weight: 700;
  color: var(--color-ink);
}
.ops-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
}
.login-avs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-gap);
}
.login-avs .av {
  height: auto;
  aspect-ratio: 1;
}
@media (min-width: 720px) {
  .notice-paper,
  .login-in,
  .login-side {
    padding: var(--spacing-5);
  }
}
@media (min-width: 1200px) {
  .login {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 아바타 — 네모(원 아님). 자리표시자는 닉 첫 글자 */
.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--spacing-8);
  height: var(--spacing-8);
  padding: 0;
  background: var(--color-surface-2);
  color: var(--color-ink);
}
.cmt--re .av,
.best-c .av {
  background: var(--color-surface);
}
.av--lg {
  width: calc(var(--spacing-12) + var(--spacing-4));
  height: calc(var(--spacing-12) + var(--spacing-4));
}
.av--xl {
  width: 100%;
  height: 100%;
}
.av-img {
  width: 100%;
  height: 100%;
}

/* ── 규칙·고지 ─────────────────────────────────────────────────────────── */
.notice-h {
  color: var(--color-ink-dark);
}
.notice-paper-b {
  max-width: 40em;
  margin-top: var(--spacing-3);
}
.rules {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--spacing-gap);
}
.rule {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.rule-n {
  color: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
.rule-h {
  margin-top: var(--spacing-2);
}
.rule-b {
  max-width: 40em;
}
.rule--7 {
  grid-column: 1 / -1;
  flex-direction: column;
  gap: var(--spacing-5);
}
.rule7-txt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.rule7-txt .legend {
  margin-top: var(--spacing-2);
}
.rule7-demo {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-gap);
}
.demo {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-2);
  width: var(--spacing-12);
  height: var(--spacing-12);
  background: var(--color-surface-2);
}
.demo-2 {
  width: calc(var(--spacing-12) * 2 + var(--spacing-gap));
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.demo-4 {
  width: calc(var(--spacing-12) * 2 + var(--spacing-gap));
  height: calc(var(--spacing-12) * 2 + var(--spacing-gap));
  background: var(--color-paper);
  color: var(--color-ink-dark);
}
.demo-l {
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}
.ops {
  display: grid;
  gap: var(--spacing-gap);
}
.ops-c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.ops-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-right: var(--spacing-3);
  background: var(--color-surface-2);
}
.ops-c .sq-btn {
  background: var(--color-surface-2);
}
.ops-list .av {
  background: var(--color-surface-2);
}
.ops-n {
  font-weight: 700;
  font-size: var(--text-sm);
}
@media (min-width: 720px) {
  .notice-paper--big,
  .rule,
  .ops-c {
    padding: var(--spacing-5);
  }
  .rule--7 {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .ops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 꼬리 ──────────────────────────────────────────────────────────────── */
.ft {
  margin-top: var(--spacing-gap);
  padding-bottom: calc(var(--spacing-5) + env(safe-area-inset-bottom));
}
.ft-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--spacing-gap);
}
.ft-note,
.ft-links,
.ft-mark {
  grid-column: 1 / -1;
  padding: var(--spacing-4);
  background: var(--color-surface);
}
.ft-note {
  background: var(--color-surface-2);
}
.ft-note-t {
  font-weight: 700;
}
.ft-note-s {
  max-width: 40em;
  margin-top: var(--spacing-2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-mute);
}
.ft-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  column-gap: var(--spacing-4);
}
.ft-links a {
  display: flex;
  align-items: center;
  min-height: var(--spacing-touch);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
}
.ft-links a:hover {
  color: var(--color-ink-mute);
}
.ft-mark {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-3);
}
.ft-mark-w {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-width: var(--spacing-touch);
  min-height: var(--spacing-touch);
  text-decoration: none;
}
.ft-mark-s {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-mute);
}
@media (min-width: 720px) {
  .ft-note,
  .ft-links,
  .ft-mark {
    padding: var(--spacing-5);
  }
  .ft-links,
  .ft-mark {
    grid-column: span 2;
  }
}
@media (min-width: 1200px) {
  .ft-note {
    grid-column: span 3;
  }
  .ft-mark {
    grid-column: span 1;
  }
}

/* ── 움직임 줄이기 — 도는 것 0 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 묶음 안 흐름 — 머리와 격자 사이도 칸새 */
.feed-sec > * + *,
.tagj-panel > * + *,
.boards > * + * {
  margin-top: var(--spacing-gap);
}