/* ipsae(잎새) — 표준 게시판. tokens.css 의 var() 만 쓴다.
 * 구조: 회녹색 틀(canvas) 위 초록빛 흰 판(paper). 판 안은 1px 선, 판 밖은 틀색 틈.
 * 폭: <720 한 열 · 720–1023 한 열(표 유지) · ≥1024 곁칸 300 · ≥1280 곁칸 340. */

/* ── 리셋 (:where 로 특이도 0) ───────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ul, ol, dl, dd, figure, pre) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(img, svg) { display: block; max-width: 100%; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:where(table) { border-collapse: collapse; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--spacing-tier2) + var(--spacing-4)); }
body {
  min-height: 100svh;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-line-ui);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "ss06";
}
.d { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.sep { margin-inline: 0.35em; color: var(--color-line-strong); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--s { width: 14px; height: 14px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.skip { position: absolute; left: var(--spacing-4); top: -100px; z-index: 30; padding: var(--spacing-2) var(--spacing-4); background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-sm); }
.skip:focus { top: var(--spacing-2); }

.wrap { width: 100%; max-width: calc(var(--spacing-container) + var(--spacing-gutter) * 2); margin-inline: auto; padding-inline: var(--spacing-gutter); }
.main { padding-block: var(--spacing-gutter) var(--spacing-12); }

/* 폭 전용 보임 */
@media (min-width: 720px) { .m-only { display: none !important; } }
@media (max-width: 719px) { .d-only { display: none !important; } }
@media (max-width: 1023px) { .d-only-l { display: none !important; } }

/* ── 공통 부품 ─────────────────────────────────────────── */
.panel {
  background: var(--color-paper);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}
.panel__head {
  display: flex; align-items: center; gap: var(--spacing-3);
  min-height: 52px; padding: 12px 20px;
  border-bottom: 1px solid var(--color-line);
}
.panel__t { font-size: var(--text-lg); font-weight: 700; line-height: var(--text-line-tight); white-space: nowrap; }
.sect { font-size: var(--text-xl); line-height: var(--text-line-tight); margin: 0 0 var(--spacing-3) var(--spacing-1); }
.more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  min-height: 32px; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap;
  text-decoration: underline transparent 1px; text-underline-offset: 3px;
  transition: color 120ms var(--ease-out), text-decoration-color 120ms var(--ease-out);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1);
  min-height: 40px; padding: 0 var(--spacing-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform 120ms var(--ease-press), background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .ico { width: 18px; height: 18px; }
.btn--ink { background: var(--color-ink); color: var(--color-on-ink); }
.btn--line { background: var(--color-paper); border-color: var(--color-line-strong); color: var(--color-ink); }
.btn--s { min-height: 36px; padding: 0 var(--spacing-3); font-size: var(--text-sm); }
.btn--l { min-height: 48px; font-size: var(--text-md); }
.btn--full { width: 100%; }
.txtbtn {
  display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: 40px; padding: 0 var(--spacing-2);
  background: none; border: 0; color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}
.ibtn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--color-ink); cursor: pointer;
  transition: transform 120ms var(--ease-press), background-color 120ms var(--ease-out);
}
.ibtn:active { transform: scale(0.94); }
.badge {
  position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--radius-tag);
  background: var(--color-ink); color: var(--color-on-ink); font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .btn--ink:hover { background: var(--color-ink-soft); }
  .btn--line:hover { border-color: var(--color-ink); }
  .ibtn:hover, .txtbtn:hover { background: var(--color-paper-sunk); color: var(--color-ink); }
  .more:hover { color: var(--color-ink); text-decoration-color: var(--color-leaf); }
}

/* 딱지 — 공지·글쓴이·등급 */
.lbl {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border: 1px solid var(--color-ink); border-radius: var(--radius-tag);
  font-size: var(--text-xs); font-weight: 600; line-height: 1; color: var(--color-ink); white-space: nowrap; flex: none;
}
.lbl--s { height: 18px; padding: 0 5px; border-color: var(--color-line-strong); color: var(--color-ink-soft); font-weight: 500; }

/* 화분 이름표 — 왼쪽 끝이 꽂이처럼 뾰족한 칩. 높이 20(초록 면 ≤24, #52) */
.nt {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 13px; flex: none;
  background: var(--color-leaf-soft); color: var(--color-leaf-deep);
  font-size: var(--text-xs); font-weight: 600; line-height: 1; white-space: nowrap;
  border-radius: 0 var(--radius-tag) var(--radius-tag) 0;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
  position: relative;
}
.nt::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: var(--radius-full); background: var(--color-paper);
}
.nt__x { font-weight: 500; }

/* 물 주기 배지 */
.wb {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; flex: none;
  background: var(--color-water-soft); color: var(--color-water); border-radius: var(--radius-tag);
  font-size: var(--text-xs); font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.wdrop { width: 10px; height: 12px; fill: currentColor; }
.wb:not(.wb--now) .wdrop { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* 아바타 — 이니셜 원. 연초록 바탕은 32 이하에서만 */
.av {
  display: inline-grid; place-items: center; flex: none; border-radius: var(--radius-full);
  font-family: var(--font-display); color: var(--color-ink); line-height: 1;
}
.av--28 { width: 28px; height: 28px; font-size: 14px; }
.av--32 { width: 32px; height: 32px; font-size: 16px; }
.av--72 { width: 72px; height: 72px; font-size: 34px; }
.av--leaf { background: var(--color-leaf-soft); }
.av--water { background: var(--color-water-soft); }
.av--canvas { background: var(--color-canvas); }

/* 말머리·댓글 수·새 글 */
.hd { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; flex: none; }
.cm { color: var(--color-leaf); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.new {
  display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none;
  border: 1px solid var(--color-ink); border-radius: var(--radius-tag);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.solved { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; flex: none; border: 1px solid var(--color-ink); border-radius: var(--radius-tag); font-size: 11px; font-weight: 700; line-height: 1; }
.pi { display: inline-grid; color: var(--color-muted); flex: none; }
.pi .ico { width: 16px; height: 16px; }

/* 탭 — 밑줄 미끄러짐(Sliding indicator). JS 가 막대를 옮기기 전엔 선택 탭 자체 밑줄 */
.tabs { position: relative; display: flex; align-items: stretch; }
.tab {
  position: relative; display: inline-flex; align-items: center; padding: 0 var(--spacing-3);
  color: var(--color-ink-soft); white-space: nowrap;
  transition: color 120ms var(--ease-out);
}
.tab[aria-current] { color: var(--color-ink); }
.tabs:not(.has-bar) .tab[aria-current] { box-shadow: inset 0 -2px 0 var(--color-leaf); }
.tabs__bar {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--color-leaf);
  transform-origin: 0 50%; transform: translateX(var(--bar-x, 0)) scaleX(var(--bar-w, 0));
  opacity: 0;
}
.tabs.has-bar .tabs__bar { opacity: 1; }
.tabs.is-ready .tabs__bar { transition: transform 180ms var(--ease-out); }
@media (hover: hover) { .tab:hover { color: var(--color-ink); } }
.tabs--panel { gap: var(--spacing-1); align-self: stretch; margin-block: -12px; }
.tabs--panel .tab { padding: 0 var(--spacing-2); font-size: var(--text-sm); font-weight: 600; min-height: 44px; }

/* 칩 — 말머리·정렬(초록 아님: 잉크 밑줄) */
.chips { display: flex; align-items: center; gap: var(--spacing-1); }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--spacing-2);
  font-size: var(--text-sm); color: var(--color-ink-soft); white-space: nowrap;
  text-decoration: underline transparent 2px; text-underline-offset: 6px;
  transition: color 120ms var(--ease-out), text-decoration-color 120ms var(--ease-out);
}
.chip[aria-current] { color: var(--color-ink); font-weight: 700; text-decoration-color: var(--color-ink); }
@media (hover: hover) { .chip:hover { color: var(--color-ink); text-decoration-color: var(--color-line-strong); } .chip[aria-current]:hover { text-decoration-color: var(--color-ink); } }

/* 입력 — 표현만. 16px 로 모바일 확대 방지 */
.inp {
  width: 100%; min-height: 48px; padding: 0 var(--spacing-3);
  background: var(--color-paper-sunk); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-size: var(--text-md); color: var(--color-ink);
  transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out);
}
.inp::placeholder { color: var(--color-muted); }
.inp:focus { background: var(--color-paper); border-color: var(--color-ink); }
.inp:focus-visible { outline-offset: 1px; }
textarea.inp { padding: var(--spacing-3); line-height: var(--text-line-body); resize: vertical; }
.sel { position: relative; display: inline-flex; align-items: center; }
.sel select {
  appearance: none; min-height: 40px; padding: 0 32px 0 var(--spacing-3);
  background: var(--color-paper); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-size: var(--text-md); cursor: pointer;
}
.sel .ico { position: absolute; right: 8px; width: 16px; height: 16px; pointer-events: none; color: var(--color-muted); }

/* ── 머리 1층 — 공지 띠 (틀색). 접힘은 grid-template-rows ── */
.t1 { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 180ms var(--ease-in-out); }
.t1.is-closed { grid-template-rows: 0fr; }
.t1__in { min-height: 0; overflow: hidden; }
.t1__row { display: flex; align-items: center; gap: var(--spacing-4); height: var(--spacing-tier1); font-size: var(--text-sm); }
.t1__note { display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; flex: 1; }
.t1__note .lbl { height: 18px; }
.t1__note a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline transparent 1px; text-underline-offset: 3px; }
.t1__util { display: flex; gap: var(--spacing-4); color: var(--color-ink); white-space: nowrap; }
.t1__util b { font-weight: 700; }
.t1__x { display: grid; place-items: center; width: 44px; height: 32px; margin-right: -12px; background: none; border: 0; color: var(--color-ink-soft); cursor: pointer; }
.t1__x .ico { width: 16px; height: 16px; }
@media (hover: hover) { .t1__note a:hover, .t1__util a:hover { text-decoration: underline; text-underline-offset: 3px; } .t1__x:hover { color: var(--color-ink); } }

/* ── 머리 2층 — 주 내비 (판색) ── */
.t2 { background: var(--color-paper); border-bottom: 1px solid var(--color-line-strong); position: relative; }
.t2__row { display: flex; align-items: center; gap: var(--spacing-6); height: var(--spacing-tier2); }
.wm { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--color-ink); }
.wm .d { font-size: var(--text-wordmark); line-height: 1; }
.wm__leaf { width: 24px; height: 24px; fill: var(--color-leaf-soft); stroke: var(--color-leaf-deep); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.t2__tabs { align-self: stretch; }
.t2__tabs .tab { font-size: var(--text-lg); padding: 0 var(--spacing-3); }
.t2__tabs .tab:first-child { padding-left: var(--spacing-2); }
.t2__tools { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-2); }
.search { position: relative; width: 280px; }
.search .ico { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--color-muted); width: 18px; height: 18px; }
.search .inp { min-height: 40px; padding-left: 38px; font-size: var(--text-base); }
.ibtn--search, .ibtn--bell, .ibtn--menu { display: none; }
.t2__write { margin-left: var(--spacing-2); }
.menu-pop {
  position: absolute; right: var(--spacing-gutter); top: calc(100% - 4px); z-index: 20; min-width: 180px; padding: var(--spacing-2);
  background: var(--color-paper); border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.menu-pop a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--spacing-3); border-radius: var(--radius-sm); }
@media (hover: hover) { .menu-pop a:hover { background: var(--color-paper-sunk); } }

.mtabs { display: none; }

@media (min-width: 1024px) {
  .t2 { position: sticky; top: 0; z-index: 10; }
}
@media (max-width: 1199px) {
  .search { width: 220px; }
}
@media (max-width: 1023px) {
  .t2__row { gap: var(--spacing-4); }
  .search, .ibtn--dm { display: none; }
  .ibtn--search { display: inline-grid; }
  .t2__tabs .tab { padding: 0 var(--spacing-2); }
}
@media (max-width: 719px) {
  .t1__util { display: none; }
  .t1__row { gap: var(--spacing-2); }
  .t2__row { height: 56px; gap: var(--spacing-1); }
  .wm .d { font-size: 26px; }
  .t2__tabs, .t2__write { display: none; }
  .ibtn--bell, .ibtn--menu { display: inline-grid; }
  .t2__tools { gap: 0; margin-right: -10px; }
  .mtabs {
    display: flex; align-items: stretch; height: var(--spacing-tabs-m);
    background: var(--color-paper); border-bottom: 1px solid var(--color-line-strong);
  }
  .mtabs__row { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-inline: calc(var(--spacing-gutter) - var(--spacing-2)); overscroll-behavior-x: contain; }
  .mtabs__row::-webkit-scrollbar { display: none; }
  .mtabs__row .tab { font-size: 17px; padding: 0 var(--spacing-2); }
  .mtabs__write {
    display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 0 var(--spacing-gutter) 0 var(--spacing-3);
    border-left: 1px solid var(--color-line); font-size: var(--text-sm); font-weight: 700;
  }
  .mtabs__write .ico { width: 16px; height: 16px; }
}

/* ── 꼬리 (틀 위) ── */
.foot { border-top: 1px solid var(--color-line-strong); padding-block: var(--spacing-8) var(--spacing-12); color: var(--color-ink-soft); font-size: var(--text-sm); }
.foot__row { display: grid; gap: var(--spacing-3); }
.wm--sm .d { font-size: var(--text-xl); }
.wm--sm .wm__leaf { width: 20px; height: 20px; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-5); color: var(--color-ink); }
.foot__links a { display: inline-flex; min-height: 32px; align-items: center; }
.foot__note { max-width: 40rem; color: var(--color-ink); }
.foot__copy { color: var(--color-muted); }

/* ══ ① 홈 ═════════════════════════════════════════════════ */
.greet { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-5); padding: var(--spacing-2) var(--spacing-1) var(--spacing-5); }
.greet__h { font-size: var(--text-2xl); line-height: var(--text-line-tight); }
.greet__n { font-size: var(--text-sm); color: var(--color-ink-soft); }
.greet__n b { color: var(--color-ink); font-weight: 700; }

.home { display: grid; gap: var(--spacing-gutter); grid-template-columns: minmax(0, 1fr) var(--spacing-aside-narrow); align-items: start; }
.col { display: grid; gap: var(--spacing-gutter); min-width: 0; }
@media (min-width: 1280px) { .home { grid-template-columns: minmax(0, 1fr) var(--spacing-aside); } }

/* 인기글 줄 — 한 줄 56. 썸네일 44(한 줄 원칙과 56 썸네일이 겹쳐 줄였다 — NOTES) */
.pr__list { padding: 4px 0; }
.pr + .pr { border-top: 1px solid var(--color-line); }
.pr {
  position: relative;
  display: flex; align-items: center; gap: var(--spacing-3); min-height: 56px; padding: 6px 20px;
  transition: background-color 120ms var(--ease-out);
}
.pr__rank { width: 20px; flex: none; text-align: center; font-size: var(--text-lg); line-height: 1; color: var(--color-muted); order: 0; }
.pr__rank.is-top { color: var(--color-ink); }
.pr__line { display: flex; align-items: baseline; gap: 6px; min-width: 0; order: 2; }
.pr__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pr__t::after, .bt__tline > a::after, .lb__row > a::after { content: ""; position: absolute; inset: 0; }
.bt__row, .lb__row { position: relative; }
.pr__meta { display: contents; }
.pr__board { order: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; min-width: 52px; min-height: 32px; flex: none; font-size: var(--text-sm); color: var(--color-muted); }
.pr .cm { order: 3; }
.pr .nt { order: 4; }
.pr__th { order: 5; margin-left: auto; width: 44px; height: 44px; flex: none; border-radius: var(--radius-photo); object-fit: cover; background: var(--color-paper-sunk); }
.pr__th--none { visibility: hidden; }
@media (hover: hover) { .pr__board:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; } .pr:hover { background: var(--color-paper-sunk); } .pr:hover .pr__t { text-decoration: underline; text-decoration-color: var(--color-leaf); text-underline-offset: 3px; } }

/* 게시판별 최신 2×2 */
.latest__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-gutter); }
.lb .panel__t a { text-decoration: underline transparent 1px; text-underline-offset: 3px; }
.lb__today { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.lb__today b { color: var(--color-ink); }
.lb__list { padding: 6px 20px 10px; }
.lb__row { display: flex; align-items: baseline; gap: 6px; min-height: 40px; padding-block: 10px; }
.lb__row + .lb__row { border-top: 1px solid var(--color-line); }
.lb__row a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__time { margin-left: auto; padding-left: var(--spacing-2); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; flex: none; }
@media (hover: hover) { .lb__row a:hover, .lb .panel__t a:hover { text-decoration: underline; text-decoration-color: var(--color-leaf); text-underline-offset: 3px; } }

/* 오늘 올라온 사진 띠 */
.strip__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-3); padding: 16px 20px 20px; }
.strip__list a { display: grid; gap: var(--spacing-2); }
.strip__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-photo); background: var(--color-paper-sunk); }
.strip__t { font-size: var(--text-sm); line-height: var(--text-line-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .strip__list a:hover .strip__t { text-decoration: underline; text-decoration-color: var(--color-leaf); text-underline-offset: 3px; } }

/* 곁칸 — 내 정보 */
.me, .writer { padding: 18px 20px 14px; display: grid; gap: var(--spacing-4); }
.me__who { display: flex; align-items: center; gap: var(--spacing-3); }
.me__nick { font-size: var(--text-base); font-weight: 700; line-height: var(--text-line-tight); }
.me__stat { font-size: var(--text-sm); color: var(--color-muted); }
.me__stat b { color: var(--color-ink); font-weight: 600; }
.me__sub { font-size: var(--text-sm); font-weight: 700; margin-bottom: calc(var(--spacing-2) * -1); }
.me__plants { display: grid; }
.me__plants li { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.me__plants li + li { border-top: 1px solid var(--color-line); }
.me .more { margin-left: 0; justify-self: start; }
.grade { display: grid; gap: 6px; }
.grade__row { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.grade__name { font-weight: 600; }
.grade__num { color: var(--color-muted); }
.grade__track { height: 6px; background: var(--color-line); border-radius: var(--radius-tag); overflow: hidden; }
.grade__track span { display: block; height: 100%; background: var(--color-ink); border-radius: var(--radius-tag); }
.grade__note { font-size: var(--text-xs); color: var(--color-muted); }
.grade__note b { color: var(--color-ink); }

/* 오늘의 사진 */
.potd__fig { padding: 16px 20px 18px; display: grid; gap: var(--spacing-3); }
.potd__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-photo); background: var(--color-paper-sunk); }
.potd__fig figcaption { display: flex; justify-content: space-between; gap: var(--spacing-2); font-size: var(--text-sm); }
.potd__cap { font-weight: 600; }
.potd__by { color: var(--color-muted); white-space: nowrap; }

/* 많이 이야기하는 식물 */
.talk__list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); padding: 16px 20px 20px; }
.talk__list a { display: inline-flex; min-height: 32px; align-items: center; }
@media (hover: hover) { .talk__list a:hover .nt { color: var(--color-ink); } }

/* 홈 배치 — 1024 아래에서는 두 칸을 풀어(display: contents) 순서를 다시 짠다 */
@media (max-width: 1023px) {
  .home { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pop pop" "me potd" "latest latest" "strip strip" "talk talk"; }
  .col { display: contents; }
  .pop { grid-area: pop; } .me { grid-area: me; } .potd { grid-area: potd; } .latest { grid-area: latest; } .strip { grid-area: strip; } .talk { grid-area: talk; }
  .me, .potd { align-self: stretch; }
  .potd__img { aspect-ratio: 3 / 2; }
}
@media (max-width: 719px) {
  .greet { display: grid; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-1) var(--spacing-4); }
  .home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pop" "potd" "latest" "strip" "me" "talk"; }
  .latest__grid { grid-template-columns: minmax(0, 1fr); }
  .panel__head { padding: 10px 16px; min-height: 48px; }
  .pr {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px; grid-template-areas: "rank line th" "rank meta th";
    column-gap: var(--spacing-3); row-gap: 2px; min-height: 64px; padding: 8px 16px; align-items: center;
  }
  .pr__rank { grid-area: rank; align-self: start; padding-top: 3px; }
  .pr__line { grid-area: line; display: block; align-self: end; }
  .pr__line .hd { margin-right: 4px; }
  .pr__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: inline; }
  .pr__line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pr__meta { grid-area: meta; display: flex; align-items: center; gap: 6px; align-self: start; min-width: 0; }
  .pr__board { min-width: 44px; }
  .pr__meta .nt { min-width: 0; }
  .pr__th { grid-area: th; width: 56px; height: 56px; margin: 0; }
  .lb__list, .strip__list, .talk__list { padding-inline: 16px; }
  .strip__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 27%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .strip__list::-webkit-scrollbar { display: none; }
  .strip__list li { scroll-snap-align: start; }
  .potd__fig, .me { padding-inline: 16px; }
}

/* ══ ② 게시판 ═════════════════════════════════════════════ */
.board { display: grid; grid-template-columns: var(--spacing-rail) minmax(0, 1fr); gap: var(--spacing-gutter); align-items: start; }
.rail { padding: 16px 12px 12px; }
.rail__t { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); padding: 0 8px 6px; }
.rail__k { font-size: var(--text-xs); font-weight: 500; }
.rail__t--2 { margin-top: var(--spacing-4); padding-top: var(--spacing-4); border-top: 1px solid var(--color-line); }
.rail__list a {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 8px;
  border-radius: var(--radius-sm); font-weight: 500; transition: background-color 120ms var(--ease-out);
}
.rail__list a[aria-current] { background: var(--color-paper-sunk); font-weight: 700; }
.rail__n { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; }
@media (hover: hover) { .rail__list a:hover { background: var(--color-paper-sunk); } }

.bd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-4); padding: 24px 24px 16px; }
.bd__id { display: grid; gap: 6px; }
.bd__name { font-size: var(--text-3xl); line-height: 1.1; }
.bd__desc { color: var(--color-ink-soft); }
.bd__num { font-size: var(--text-sm); color: var(--color-muted); }
.bd__num b { color: var(--color-ink); }
.bd__q { margin: 0 24px 12px; padding: 10px 14px; background: var(--color-paper-sunk); border-radius: var(--radius-sm); font-weight: 600; }
.bd__qnote { font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); }
.bd__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding: 0 16px; border-bottom: 1px solid var(--color-line-strong); }
.chips--tags { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chips--tags::-webkit-scrollbar { display: none; }
.bd__tools { display: flex; align-items: center; gap: var(--spacing-3); flex: none; }
.seg { display: inline-flex; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg__a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--spacing-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.seg__a + .seg__a { border-left: 1px solid var(--color-line-strong); }
.seg__a[aria-current] { background: var(--color-ink); color: var(--color-on-ink); font-weight: 600; }

/* 게시판 표 */
.bt { width: 100%; table-layout: fixed; font-size: var(--text-base); }
.bt th { height: 40px; background: var(--color-paper-sunk); border-bottom: 1px solid var(--color-line-strong); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.bt td { height: 48px; padding: 0 6px; border-bottom: 1px solid var(--color-line); text-align: center; vertical-align: middle; }
.bt__h0 { width: 64px; } .bt__h1 { width: 80px; } .bt__h3 { width: 108px; } .bt__h4 { width: 60px; } .bt__h5 { width: 60px; } .bt__h6 { width: 52px; }
.bt__no, .bt__date, .bt__views, .bt__likes { font-size: var(--text-sm); color: var(--color-muted); }
.bt__tag { font-size: var(--text-sm); color: var(--color-muted); }
.bt__by { font-size: var(--text-sm); color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt td.bt__title { text-align: left; padding-left: 8px; }
.bt__tline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bt__tline > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.bt__th { display: none; }
.bt__row { transition: background-color 120ms var(--ease-out); }
.bt__row--notice { background: var(--color-paper-sunk); }
.bt__row--notice .bt__tline > a { font-weight: 600; }
.bt__row.is-current { background: var(--color-paper-sunk); }
.bt__row.is-current .bt__tline > a { font-weight: 700; }
.here { font-size: var(--text-xs); color: var(--color-ink); font-weight: 600; }
@media (hover: hover) { .bt__row:hover { background: var(--color-paper-sunk); } .bt__tline > a:hover { text-decoration: underline; text-decoration-color: var(--color-leaf); text-underline-offset: 3px; } }

/* 자랑방 사진 보기 — 카드 테두리 없이 사진과 글자만, 행 사이 선 하나 */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--spacing-4); padding: 0 20px; }
.pgrid li { display: grid; gap: 6px; align-content: start; padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.pgrid a { display: grid; gap: var(--spacing-2); }
.pgrid__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-photo); background: var(--color-paper-sunk); }
.pgrid__t { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pgrid__t .cm { margin-left: 4px; }
.pgrid__by { font-size: var(--text-sm); color: var(--color-muted); }

/* 쪽 번호 */
.pager { display: flex; justify-content: center; align-items: center; gap: 2px; padding: 20px 16px 8px; }
.pager__a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 4px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-ink-soft); }
.pager__a[aria-current] { background: var(--color-ink); color: var(--color-on-ink); font-weight: 700; }
.pager__a[aria-disabled] { color: var(--color-line-strong); }
.pager__step .ico { width: 16px; height: 16px; }
@media (hover: hover) { .pager__a:not([aria-current]):hover { background: var(--color-paper-sunk); } }

.lsearch { display: flex; justify-content: center; gap: var(--spacing-2); padding: 8px 16px 24px; }
.lsearch .inp { width: 280px; min-height: 40px; }

@media (max-width: 1023px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .bt__h0, .bt__no { display: none; }
}
@media (max-width: 719px) {
  .bd__head { padding: 18px 16px 12px; }
  .bd__name { font-size: 28px; }
  .bd__write { display: none; }
  .bd__desc { font-size: var(--text-sm); }
  .bd__bar { padding: 0 0 0 8px; gap: var(--spacing-2); }
  .bd__q { margin-inline: 16px; }
  .bd__tools { padding-right: 12px; gap: var(--spacing-2); }
  .bd__tools .sel select { min-height: 36px; font-size: var(--text-sm); padding-right: 28px; }
  .seg__a { padding: 0 var(--spacing-2); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; gap: 0 var(--spacing-3); }
  .lsearch { flex-wrap: wrap; }
  .lsearch .inp { width: auto; flex: 1; }
  .lsearch .sel { display: none; }
  .pager { padding-top: 16px; }
}

/* 표 → 두 줄 목록 (좁은 화면) — 같은 마크업, 썸네일은 오른쪽 */
@media (max-width: 719px) {
  .bt, .bt tbody, .bt tr, .bt td { display: block; }
  .bt thead { display: none; }
  .bt .bt__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; min-height: var(--spacing-row-m); padding: 10px 16px; border-bottom: 1px solid var(--color-line); }
  .bt__row:has(.bt__th) { padding-right: 84px; }
  .bt td { height: auto; padding: 0; border: 0; text-align: left; }
  .bt__no, .bt__tag { display: none !important; }
  .bt td.bt__title { width: 100%; padding: 0 0 4px; }
  .bt__tline { display: block; line-height: var(--text-line-ui); }
  .bt__tline > * { vertical-align: middle; }
  .bt__tline > a { display: inline; white-space: normal; font-size: var(--text-base); }
  .bt__tline .hd { margin-right: 4px; }
  .bt__tline .cm, .bt__tline .pi, .bt__tline .new, .bt__tline .solved, .bt__tline .nt { display: inline-flex; margin-left: 4px; }
  .bt__tline .pi { display: none; }
  .bt__tline .nt { margin-left: 6px; }
  .bt__th { display: block; position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 56px; height: 56px; border-radius: var(--radius-photo); object-fit: cover; background: var(--color-paper-sunk); }
  .bt__by, .bt__date, .bt__views, .bt__likes { font-size: var(--text-sm); color: var(--color-muted); }
  .bt__by { max-width: 40%; }
  .bt__date::before, .bt__views::before, .bt__likes::before { content: "·"; margin-inline: 6px; color: var(--color-line-strong); }
  .bt__row--notice .lbl.m-only { display: inline-flex; margin-right: 6px; }
  .bt__row--notice .bt__views, .bt__row--notice .bt__likes { display: none; }
}

/* ══ ③ 글 상세 · ④ 글쓰기 공용 두 칸 ════════════════════════ */
.two { display: grid; grid-template-columns: minmax(0, 1fr) var(--spacing-aside-narrow); gap: var(--spacing-gutter); align-items: start; }
.side { display: grid; gap: var(--spacing-gutter); min-width: 0; }
@media (min-width: 1280px) { .two { grid-template-columns: minmax(0, 1fr) var(--spacing-aside); } }
@media (max-width: 1023px) { .two { grid-template-columns: minmax(0, 1fr); } }

.art { padding: 0 0 8px; }
.art__head { padding: 24px 32px 20px; border-bottom: 1px solid var(--color-line); display: grid; gap: var(--spacing-3); }
.crumb { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--color-muted); }
.crumb a { font-weight: 600; color: var(--color-ink-soft); }
.art__t { font-size: var(--text-2xl); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.art__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-4); font-size: var(--text-sm); }
.art__who { display: flex; align-items: center; gap: var(--spacing-2); }
.art__nums { color: var(--color-muted); }
.art__nums b { color: var(--color-ink-soft); font-weight: 600; }
.art__more { margin-left: auto; position: relative; margin-right: -10px; }
.pop-menu { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 140px; padding: 6px; background: var(--color-paper); border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.pop-menu button, .pop-menu a { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 10px; background: none; border: 0; border-radius: var(--radius-sm); font-size: var(--text-sm); text-align: left; cursor: pointer; }
.pop-menu__alert { color: var(--color-alert); }
@media (hover: hover) { .pop-menu button:hover, .pop-menu a:hover { background: var(--color-paper-sunk); } }

.prose { padding: 28px 32px 8px; max-width: calc(680px + 64px); font-size: var(--text-md); line-height: var(--text-line-body); display: grid; gap: var(--spacing-5); }
.prose__fig { display: grid; gap: var(--spacing-2); margin-block: var(--spacing-2); }
.prose__img { width: 100%; height: auto; border-radius: var(--radius-photo); background: var(--color-paper-sunk); }
.prose__img--tall { max-width: 480px; }
.prose__fig figcaption { font-size: var(--text-sm); color: var(--color-muted); }

.rec { margin: 20px 32px 0; padding: 16px 18px 18px; background: var(--color-paper-sunk); border-radius: var(--radius-md); display: grid; gap: var(--spacing-3); }
.rec__head { display: flex; align-items: center; gap: var(--spacing-3); }
.rec__t { font-size: var(--text-base); font-weight: 700; }
.rec__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-3); max-width: 480px; }
.rec__list li { display: grid; gap: 6px; }
.rec__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-photo); }
.rec__d { font-size: var(--text-sm); font-weight: 600; }

.react { display: flex; justify-content: center; gap: var(--spacing-2); padding: 32px 16px; }
.react .btn { min-height: 44px; }
.react__like .ico { width: 18px; height: 18px; }
.react__like[aria-pressed="true"] { border-color: var(--color-leaf); color: var(--color-leaf); }
.react__like[aria-pressed="true"] .ico { fill: var(--color-leaf-soft); }
.roll { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.roll b { display: inline-block; }
.roll b.is-rolling { animation: roll-up 160ms var(--ease-out); }
@keyframes roll-up { from { transform: translateY(100%); } to { transform: none; } }

.cmts { border-top: 1px solid var(--color-line-strong); padding: 20px 32px 8px; display: grid; gap: var(--spacing-4); }
.cmts__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.cmts__t { font-size: var(--text-lg); font-weight: 700; }
.cmts__t b { color: var(--color-leaf); }
.cbox { display: flex; align-items: flex-start; gap: var(--spacing-3); }
.cbox .av { margin-top: 10px; }
.cbox__ta { min-height: 48px; flex: 1; }
.cbox .btn { min-height: 48px; }
.cmt__list { display: grid; }
.cmt { border-top: 1px solid var(--color-line); }
.cmt__box { display: flex; gap: var(--spacing-3); padding: 16px 0 12px; }
.cmt__body { min-width: 0; flex: 1; display: grid; gap: 4px; }
.cmt__who { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-sm); }
.cmt__time { color: var(--color-muted); }
.cmt__text { color: var(--color-ink-soft); }
.cmt__img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-photo); margin-block: 4px; }
.cmt__acts { display: flex; gap: var(--spacing-1); margin-left: -8px; font-size: var(--text-sm); color: var(--color-muted); }
.cmt__acts a, .cmt__like { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; background: none; border: 0; border-radius: var(--radius-sm); color: inherit; font-size: inherit; cursor: pointer; }
.cmt__like[aria-pressed="true"] { color: var(--color-leaf); font-weight: 600; }
.cmt__kids { margin-left: 40px; padding-left: 16px; border-left: 1px solid var(--color-line-strong); }
.cmt__kids .cmt:first-child { border-top: 0; }
.cmt.is-fresh { animation: fresh 600ms var(--ease-out) 1; }
@keyframes fresh { from { background-color: var(--color-paper-sunk); } to { background-color: var(--color-paper); } }
@media (hover: hover) { .cmt__acts a:hover, .cmt__like:hover { background: var(--color-paper-sunk); color: var(--color-ink); } }

/* 접힘 — 답글 입력 (Collapse) */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 180ms var(--ease-in-out); }
.collapse.is-open { grid-template-rows: 1fr; }
.collapse__in { min-height: 0; overflow: hidden; }
.cbox--reply { margin: 0 0 14px 40px; padding: 12px; background: var(--color-paper-sunk); border-radius: var(--radius-md); }
.cbox--reply .inp { background: var(--color-paper); }

.pn { margin: 16px 32px 0; border-top: 1px solid var(--color-line-strong); border-bottom: 1px solid var(--color-line-strong); }
.pn__row { display: flex; align-items: center; gap: var(--spacing-3); min-height: 48px; }
.pn__row + .pn__row { border-top: 1px solid var(--color-line); }
.pn__k { display: inline-flex; align-items: center; gap: 2px; width: 72px; flex: none; font-size: var(--text-sm); color: var(--color-muted); }
.pn__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .pn__row:hover .pn__t { text-decoration: underline; text-decoration-color: var(--color-leaf); text-underline-offset: 3px; } }
.mini { margin: 24px 32px 0; }
.bt--mini th:nth-child(2), .bt--mini td:nth-child(2) { display: none; }
.mini__go { display: flex; justify-content: flex-end; padding: 16px 0 16px; }

.writer__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--color-line); }
.writer__nums div { display: grid; gap: 2px; padding: 10px 0; text-align: center; }
.writer__nums div + div { border-left: 1px solid var(--color-line); }
.writer__nums dt { font-size: var(--text-xs); color: var(--color-muted); }
.writer__nums dd { font-size: var(--text-lg); font-weight: 700; }
.same__tag { padding: 14px 20px 0; }
.same .lb__list { padding-top: 2px; }

@media (max-width: 719px) {
  .art__head { padding: 18px 16px 16px; }
  .art__t { font-size: 22px; }
  .art__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
  .art__nums { grid-column: 1 / -1; grid-row: 2; }
  .art__more { grid-column: 2; grid-row: 1; }
  .prose { padding: 20px 16px 8px; }
  .prose__img--tall { max-width: none; }
  .rec { margin-inline: 16px; }
  .rec__head { flex-wrap: wrap; }
  .react { padding: 24px 16px; }
  .cmts { padding-inline: 16px; }
  .cbox .av { display: none; }
  .cmt__kids { margin-left: 16px; padding-left: 12px; }
  .cbox--reply { margin-left: 0; }
  .pn, .mini { margin-inline: 16px; }
  .bt--mini .bt__row { padding-inline: 0; }
}

/* ══ ④ 글쓰기 ═════════════════════════════════════════════ */
.wr { padding: 0 0 24px; }
.wr__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 18px; border-bottom: 1px solid var(--color-line); }
.wr__t { font-size: var(--text-3xl); line-height: 1.1; }
.fld { display: grid; gap: var(--spacing-2); padding: 18px 28px 0; }
.fld__k { font-size: var(--text-sm); font-weight: 700; display: flex; align-items: baseline; gap: var(--spacing-2); }
.fld__hint { font-weight: 400; color: var(--color-muted); }
.req { color: var(--color-alert); font-weight: 600; }
.pick { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.pick__b {
  min-height: 40px; padding: 0 var(--spacing-4); background: var(--color-paper); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--color-ink-soft); cursor: pointer;
  transition: transform 120ms var(--ease-press), border-color 120ms var(--ease-out);
}
.pick__b:active { transform: scale(0.97); }
.pick__b[aria-pressed="true"] { border: 2px solid var(--color-ink); padding-inline: calc(var(--spacing-4) - 1px); color: var(--color-ink); font-weight: 700; }
.pick--chip .pick__b { min-height: 36px; padding-inline: var(--spacing-3); font-size: var(--text-sm); }
.pick--chip .pick__b[aria-pressed="true"] { padding-inline: calc(var(--spacing-3) - 1px); }
.pick__nt { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.pick__nt[aria-pressed="true"] { border: 2px solid var(--color-ink); padding-inline: 7px; }
.pick--nt .txtbtn { min-height: 36px; }
@media (hover: hover) { .pick__b:hover { border-color: var(--color-ink); } .pick__nt:hover { border-color: var(--color-line-strong); } .pick__nt[aria-pressed="true"]:hover { border-color: var(--color-ink); } }
.inpw { position: relative; display: flex; align-items: center; }
.inpw__n { position: absolute; right: 12px; font-size: var(--text-sm); color: var(--color-muted); pointer-events: none; }
#w-title { padding-right: 64px; }
.inpw__eye { position: absolute; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--color-muted); cursor: pointer; }
.inpw__eye[aria-pressed="true"] { color: var(--color-ink); }
.inpw--btn { gap: var(--spacing-2); }
.inpw--btn .btn { min-height: 48px; }

.ed__tabs { margin: 0; border-bottom: 1px solid var(--color-line); }
.ed { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ed__tools { display: flex; gap: 2px; padding: 2px 4px; background: var(--color-paper-sunk); border-bottom: 1px solid var(--color-line); }
.ed__ta { min-height: 320px; border: 0; border-radius: 0; background: var(--color-paper); }
.ed__ta:focus { border: 0; }
.prose--preview { padding: 16px 0 4px; max-width: 680px; }
.prev__imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); max-width: 480px; }
.prev__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-photo); }

.drop { display: flex; align-items: center; gap: var(--spacing-3); padding: 18px; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-paper-sunk); color: var(--color-ink-soft); font-size: var(--text-sm); }
.drop p { flex: 1; }
.drop__s { color: var(--color-muted); }
.drop__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-paper); border: 1px solid var(--color-line); color: var(--color-ink); flex: none; }
.att { display: flex; gap: var(--spacing-3); }
.att__i { position: relative; width: 88px; transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out); }
.att__i.is-gone { transform: scale(0.8); opacity: 0; }
.att__img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-photo); }
.att__x { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; background: var(--color-ink); color: var(--color-on-ink); border: 2px solid var(--color-paper); border-radius: var(--radius-full); cursor: pointer; }
.att__x .ico { width: 14px; height: 14px; }
.att__x::after { content: ""; position: absolute; inset: -8px; }

.set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-8); }
.tog { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px; cursor: pointer; }
.tog input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: pointer; }
.tog__t { position: relative; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--color-line-strong); transition: background-color 120ms var(--ease-out); }
.tog__t::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-paper); transition: transform 160ms var(--ease-out); }
.tog input:checked + .tog__t { background: var(--color-ink); }
.tog input:checked + .tog__t::after { transform: translateX(16px); }
.tog input:focus-visible + .tog__t { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.radio { display: flex; gap: var(--spacing-4); }
.radio label, .chk { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px; cursor: pointer; }
.radio input, .chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ink); }
.wr__acts { display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-2); padding: 28px 28px 0; margin-top: 24px; border-top: 1px solid var(--color-line); }
.wr__acts .btn { min-width: 96px; min-height: 44px; }

.rules { padding-bottom: 20px; }
.rules__list { padding: 14px 20px 0 40px; list-style: decimal; display: grid; gap: var(--spacing-2); font-size: var(--text-sm); color: var(--color-ink-soft); }
.rules__sub { padding: 18px 20px 8px; font-size: var(--text-sm); font-weight: 700; }
.rules__tpl { margin: 0 20px; padding: 12px 14px; background: var(--color-paper-sunk); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.7; white-space: pre-wrap; color: var(--color-ink-soft); }
.rules-m { margin: 14px 16px 0; padding: 0 12px; background: var(--color-paper-sunk); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.rules-m summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 600; cursor: pointer; list-style: none; }
.rules-m summary::-webkit-details-marker { display: none; }
.rules-m summary .ico { width: 16px; height: 16px; transition: transform 180ms var(--ease-out); }
.rules-m[open] summary .ico { transform: rotate(180deg); }
.rules-m ol { list-style: decimal; padding: 0 0 12px 20px; display: grid; gap: 6px; color: var(--color-ink-soft); }
@media (min-width: 720px) and (max-width: 1023px) { .rules-m { display: block; margin-inline: 28px; } }

@media (max-width: 719px) {
  .wr__head { padding: 16px 16px 14px; }
  .wr__t { font-size: 28px; }
  .fld { padding-inline: 16px; }
  .pick--board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pick--board .pick__b { padding-inline: 0; }
  .drop { flex-wrap: wrap; }
  .wr__acts { padding-inline: 16px; }
  .wr__acts .btn { min-width: 0; flex: 1; }
  .ed__ta { min-height: 240px; }
}

/* ══ ⑤ 프로필 ═════════════════════════════════════════════ */
.ph-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--spacing-6); padding: 24px 28px; margin-bottom: var(--spacing-gutter); }
.ph-head__id { display: grid; gap: 6px; min-width: 0; }
.ph-head__nick { font-size: var(--text-3xl); line-height: 1.1; }
.ph-head__bio { color: var(--color-ink-soft); }
.grade--big { max-width: 320px; margin-top: 6px; }
.stats { display: grid; grid-template-columns: repeat(4, auto); }
.stats div { display: grid; gap: 4px; padding: 0 var(--spacing-5); text-align: center; }
.stats div + div { border-left: 1px solid var(--color-line); }
.stats dt { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.stats dd { font-size: var(--text-2xl); line-height: 1; }
.ph-head__edit { align-self: start; }
.ptab__tabs { margin: 0; padding: 0 16px; border-bottom: 1px solid var(--color-line-strong); }
.ptab__tabs .tab { min-height: 52px; font-size: var(--text-base); padding: 0 var(--spacing-3); gap: 4px; }
.ptab__tabs .tab .num { color: var(--color-muted); font-weight: 500; }
.ptab { margin-bottom: var(--spacing-gutter); }
.pt { width: 100%; }
.pt th { height: 40px; padding: 0 12px; background: var(--color-paper-sunk); border-bottom: 1px solid var(--color-line-strong); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-align: left; }
.pt td { padding: 10px 12px; border-bottom: 1px solid var(--color-line); vertical-align: middle; font-size: var(--text-sm); }
.pt__h-img, .pt__img { width: 88px; padding-left: 20px !important; }
.pt__th { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-photo); background: var(--color-paper-sunk); }
.pt__full { display: block; margin-top: 4px; font-size: var(--text-base); font-weight: 600; }
.pt__since, .pt__cycle, .pt__logs { color: var(--color-ink-soft); }
.pt__go { text-align: right; padding-right: 20px !important; }
.pt__go .more { margin: 0; }
.mc li { padding: 14px 20px; border-bottom: 1px solid var(--color-line); display: grid; gap: 4px; }
.mc__text { color: var(--color-ink); }
.mc__src { display: flex; gap: var(--spacing-2); font-size: var(--text-sm); color: var(--color-muted); min-width: 0; }
.mc__src a { color: var(--color-ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act__day { font-size: var(--text-sm); color: var(--color-muted); }
.act__list { padding: 8px 20px 12px; }
.act__list li { display: grid; grid-template-columns: 52px 64px minmax(0, 1fr); gap: var(--spacing-3); align-items: baseline; padding: 10px 0; }
.act__list li + li { border-top: 1px solid var(--color-line); }
.act__time { color: var(--color-muted); font-size: var(--text-sm); }
.act__k { font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 1023px) {
  .ph-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .stats { grid-column: 1 / -1; grid-row: 2; }
  .ph-head__edit { grid-column: 3; grid-row: 1; }
}
@media (max-width: 719px) {
  .ph-head { grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-4); padding: 20px 16px; }
  .ph-head .av--72 { width: 56px; height: 56px; font-size: 26px; align-self: start; }
  .ph-head__nick { font-size: 28px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
  .stats div { padding: 12px 0; }
  .stats div + div { border-left: 0; }
  .stats div:nth-child(even) { border-left: 1px solid var(--color-line); }
  .stats div:nth-child(n + 3) { border-top: 1px solid var(--color-line); }
  .ph-head__edit { grid-column: 1 / -1; grid-row: 3; }
  .grade--big { max-width: none; }
  .ptab__tabs { overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
  .ptab__tabs .tab { padding: 0 var(--spacing-2); font-size: var(--text-sm); }
  .pt, .pt tbody, .pt tr, .pt td { display: block; }
  .pt thead { display: none; }
  .pt tbody tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name name" "img next logs"; column-gap: var(--spacing-3); row-gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--color-line); }
  .pt td { padding: 0 !important; border: 0; }
  .pt__img { grid-area: img; width: auto; }
  .pt__th { width: 56px; height: 56px; }
  .pt__name { grid-area: name; }
  .pt__next { grid-area: next; }
  .pt__logs { grid-area: logs; align-self: center; }
  .pt__since, .pt__cycle, .pt__go { display: none !important; }
  .mc li { padding-inline: 16px; }
  .act__list { padding-inline: 16px; }
  .act__list li { grid-template-columns: 44px minmax(0, 1fr); }
  .act__k { display: none; }
}

/* ══ ⑥ 로그인 ═════════════════════════════════════════════ */
.p-login .main { display: grid; justify-items: center; padding-top: var(--spacing-10); }
.auth { width: 100%; max-width: 400px; padding: 28px 28px 24px; display: grid; gap: var(--spacing-4); }
.auth__wm { display: flex; align-items: center; justify-content: center; gap: 6px; }
.auth__wm .d { font-size: var(--text-wordmark); line-height: 1; }
.auth__h { text-align: center; font-size: var(--text-xl); line-height: var(--text-line-tight); color: var(--color-ink-soft); margin-top: -6px; }
.auth__tabs { margin: 0; border-bottom: 1px solid var(--color-line-strong); }
.auth__tabs .tab { flex: 1; justify-content: center; font-size: var(--text-base); min-height: 48px; }
.auth__body { display: grid; gap: var(--spacing-3); }
.auth .fld { padding: 0; gap: 6px; }
.auth__find { text-align: center; font-size: var(--text-sm); color: var(--color-ink-soft); }
.auth__find a { display: inline-flex; min-height: 32px; align-items: center; }
.or { display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--text-sm); color: var(--color-muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.ok { font-size: var(--text-sm); color: var(--color-leaf); font-weight: 600; }
.agree { display: grid; padding: 4px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.chk--all { font-weight: 700; border-bottom: 1px solid var(--color-line); }
.agree .req { color: var(--color-alert); font-weight: 500; }
.auth__note { margin-top: var(--spacing-4); font-size: var(--text-sm); color: var(--color-ink-soft); text-align: center; }
@media (max-width: 719px) {
  .p-login .main { padding-top: var(--spacing-4); }
  .auth { padding: 22px 18px 20px; }
}

/* ── 토스트 ── */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom)); z-index: 40;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--color-ink); color: var(--color-on-ink); box-shadow: var(--shadow-pop);
  font-size: var(--text-sm); font-weight: 600;
  transform: translate(-50%, 16px); opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.toast.is-in { transform: translate(-50%, 0); opacity: 1; transition-duration: 200ms; }

/* 움직임 줄이기 — 상태만 바뀐다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}

/* 1024 직후가 가장 좁은 표(wireframe 5절) — 제목이 먼저 살게 줄 안 이름표·N 을 접는다(NOTES) */
@media (min-width: 720px) and (max-width: 1279px) {
  .bt__tline .nt, .pr .nt { display: none; }
}

/* 터치 타깃 — 좁은 화면에서 44 (G2 ⑥) */
.wm { min-height: 44px; }
.t1__note a { display: inline-flex; align-items: center; min-height: var(--spacing-tier1); }
@media (max-width: 719px) {
  .chip, .more, .foot__links a, .auth__find a, .cmt__acts a, .cmt__like { min-height: 44px; }
  .pager__a { min-width: 44px; height: 44px; }
}