/* 붙임(moim) — 화면 규칙. 색·서체·간격은 tokens.css 의 var() 만 쓴다.
 * 구조 규칙 두 줄: 칸(패널·표·탭·자리표시자)은 직각 + 먹선 · 스티커·아바타·버튼만 둥글다.
 * 너비 네 단: < 720 전화(행을 다시 짠다) · 720–959 레일 없음(머리+띠) · ≥ 960 레일 고정 · ≥ 1200 두 칸.
 */

/* ── 바탕 ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--spacing-gutter);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
}
:where(ul, ol) {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration-thickness: var(--spacing-line);
  text-underline-offset: 0.22em;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: var(--spacing-line-bold) solid var(--color-focus);
  outline-offset: var(--spacing-line-bold);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  z-index: 100;
  top: var(--spacing-gutter);
  left: var(--spacing-gutter);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: 700;
  translate: 0 -300%;
}
.skip:focus {
  translate: 0 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.num {
  font-variant-numeric: tabular-nums;
}
.soft {
  color: var(--color-ink-soft);
  font-weight: 500;
}

/* ── 아이콘 — 선 2px, 둥근 끝 ─────────────────────────────── */
.ic {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

/* ── 스티커 — 면 → 먹 2 → 흰 칼선 4 → 먹 2 (+ 0-blur 그림자) ── */
.stk {
  display: block;
  flex: none;
  width: var(--sz, var(--spacing-sticker-md));
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  rotate: var(--tilt, 0deg);
  stroke-linejoin: round;
}
.stk .l0 {
  fill: var(--color-ink);
  stroke: var(--color-ink);
  stroke-width: 20;
  transform: translate(4px, 4px);
}
.stk .l1 {
  fill: var(--color-ink);
  stroke: var(--color-ink);
  stroke-width: 20;
}
.stk .l2 {
  fill: var(--color-plate-white);
  stroke: var(--color-plate-white);
  stroke-width: 14;
}
.stk .l3 {
  fill: var(--plate);
  stroke: var(--color-ink);
  stroke-width: 3;
}
.stk .gl {
  fill: none;
  stroke: var(--glyph);
  stroke-width: 6;
  stroke-linecap: round;
}
.stk .gl--fill {
  fill: var(--glyph);
  stroke: none;
}
.stk-t {
  fill: var(--glyph);
  font-family: var(--font-display);
  font-size: 44px;
  text-anchor: middle;
  dominant-baseline: central;
}
.stk .flap {
  fill: var(--color-plate-white);
  stroke: var(--color-ink);
  stroke-width: 2.5;
}
.stk--both .gl:not(.gl--keep) {
  display: none;
}
.stk--mono .l1,
.stk--mono .l2 {
  display: none;
}
.stk--mono .l3 {
  fill: none;
  stroke: var(--color-on-ink);
  stroke-width: 6;
}
.p-butter {
  --plate: var(--color-plate-butter);
}
.p-berry {
  --plate: var(--color-plate-berry);
}
.p-sky {
  --plate: var(--color-plate-sky);
}
.p-white {
  --plate: var(--color-plate-white);
}
.p-ink {
  --plate: var(--color-plate-ink);
}
.t-ink {
  --glyph: var(--color-ink);
}
.t-white {
  --glyph: var(--color-on-accent);
}
.t-berry {
  --glyph: var(--color-accent);
}

/* 인터랙티브 스티커의 들림 — 그림자 3→5px + 기울기 +2° (reduced motion 은 그림자만) */
@media (hover: hover) {
  .stk-link:hover .stk .l0 {
    transform: translate(6px, 6px);
  }
}
.stk-link:focus-visible .stk .l0 {
  transform: translate(6px, 6px);
}
@media (prefers-reduced-motion: no-preference) {
  .stk-link .stk {
    transition:
      rotate 180ms var(--ease-out),
      translate 180ms var(--ease-out);
  }
  .stk-link .stk .l0 {
    transition: transform 180ms var(--ease-out);
  }
  .stk-link:active .stk .l0 {
    transform: translate(0, 0);
    transition-duration: 120ms;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stk-link:hover .stk {
    rotate: calc(var(--tilt, 0deg) + 2deg);
    translate: -1px -1px;
  }
}

/* ── 아바타 — 동그라미 스티커의 한 종류 ────────────────────── */
.av {
  --sz: calc(var(--spacing) * 10);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--sz);
  height: var(--sz);
  border: var(--spacing-line) solid var(--color-ink);
  border-radius: var(--radius-round);
  background: var(--plate, var(--color-plate-white));
  box-shadow: var(--shadow-kiss);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}
.av.p-berry,
.av.p-ink {
  color: var(--color-on-accent);
}
.av--xs {
  --sz: calc(var(--spacing) * 6);
  border-width: 1.5px;
  box-shadow:
    0 0 0 var(--spacing-line) var(--color-plate-white),
    0 0 0 calc(var(--spacing-line) + 1px) var(--color-ink);
  font-size: var(--text-xs);
}
.av--sm {
  --sz: calc(var(--spacing) * 8);
  box-shadow:
    0 0 0 var(--spacing-line-bold) var(--color-plate-white),
    0 0 0 calc(var(--spacing-line-bold) + var(--spacing-line)) var(--color-ink);
  font-size: var(--text-xs);
}
.av--lg {
  --sz: calc(var(--spacing) * 14);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
}
.av--xl {
  --sz: var(--spacing-sticker-md);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
}

/* ── 틀 ───────────────────────────────────────────────────── */
.wrap {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 7);
  width: 100%;
  max-width: var(--spacing-content);
  margin-inline: auto;
}
.main {
  padding: calc(var(--spacing) * 4) var(--spacing-gutter) var(--spacing-section);
}
.rail {
  display: none;
}
@media (min-width: 960px) {
  /* 레일은 격자 첫 칸 — 흰 기둥은 문서 끝까지, 내용은 sticky 로 화면에 붙는다 */
  body {
    display: grid;
    grid-template-columns: var(--spacing-rail) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .rail {
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    background: var(--color-surface);
    border-inline-end: var(--spacing-line-bold) solid var(--color-line);
  }
  .rail-in {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    height: 100dvh;
    padding: calc(var(--spacing) * 5) calc(var(--spacing) * 5) calc(var(--spacing) * 4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .mhead,
  .strip,
  .msheet {
    display: none !important;
  }
  .main {
    grid-column: 2;
    grid-row: 1;
    padding-top: calc(var(--spacing) * 5);
  }
  .foot {
    grid-column: 2;
    grid-row: 2;
  }
}

/* 로고 */
.logo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  text-decoration: none;
}
.logo .stk {
  --sz: calc(var(--spacing) * 14);
}
.logo-w {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}
.logo--sm {
  min-height: var(--spacing-tap);
}
.logo--sm .stk {
  --sz: calc(var(--spacing) * 9);
}
/* 글 속 링크(행 제목·꼬리)는 보이는 크기는 그대로, 누르는 과녁만 44px 로 넓힌다 */
:is(.ev-title, .sc-t, .foot-meta) a {
  position: relative;
}
:is(.ev-title, .sc-t, .foot-meta) a::after {
  content: "";
  position: absolute;
  inset: -0.75rem -0.25rem;
}
.logo--mono .stk {
  --sz: calc(var(--spacing) * 11);
}

/* 동네 칩 · 데모 안내 */
.hood-wrap,
.search-wrap {
  position: relative;
}
.hood {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 3) 0 calc(var(--spacing) * 3.5);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.hood-v {
  color: var(--color-ink-soft);
  font-weight: 500;
}
.demo-msg,
.live {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--text-xs--line-height);
}
.demo-msg:not(:empty) {
  margin-top: calc(var(--spacing) * 2);
}
.demo-msg--float {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  width: max-content;
  max-width: 16rem;
}
.demo-msg--float:not(:empty) {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.demo-msg--rx:not(:empty) {
  margin: 0;
  padding: calc(var(--spacing) * 2) var(--spacing-cell);
  border-top: var(--spacing-line) solid var(--color-line);
}
.live:not(:empty) {
  margin-top: calc(var(--spacing) * 3);
}

/* 레일 — 내 모임 시트 */
.mine-h {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  font-weight: 800;
}
.mine-c {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  padding: 0 calc(var(--spacing) * 1.5);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-xs);
}
.mine-l {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg);
  border: var(--spacing-line) solid var(--color-line);
}
.rail .mine-i {
  border-inline-end: var(--spacing-line) dashed var(--color-cutline);
  border-block-end: var(--spacing-line) dashed var(--color-cutline);
}
.rail .mine-i:nth-child(2n) {
  border-inline-end: 0;
}
.rail .mine-i:nth-last-child(-n + 2) {
  border-block-end: 0;
}
.mine-a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  height: 100%;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
  text-decoration: none;
}
.mine-a .stk {
  --sz: var(--spacing-sticker-md);
}
.mine-n {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--text-xs--line-height);
  text-align: center;
}
.mine-new {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.dot {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  border-radius: var(--radius-round);
  background: var(--color-accent);
}
.mine-i.is-current .stk .l1 {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}
.mine-i.is-current .mine-n {
  color: var(--color-accent);
}
.find-stk {
  display: grid;
  place-items: center;
  width: var(--spacing-sticker-md);
  height: var(--spacing-sticker-md);
  border: var(--spacing-line) dashed var(--color-ink);
  border-radius: var(--radius-round);
  color: var(--color-ink);
}
.find-stk .ic {
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
}

/* 레일 — 내비 */
.rnav {
  display: grid;
  border: var(--spacing-line) solid var(--color-line);
}
.rnav-a {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.rnav-a + .rnav-a {
  border-top: var(--spacing-line) solid var(--color-line);
}
@media (hover: hover) {
  .rnav-a:hover {
    background: var(--color-bg);
  }
}
.rnav-a[aria-current="page"] {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.rnav-n {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  margin-left: auto;
  padding: 0 calc(var(--spacing) * 1.5);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.rail-note {
  margin-top: auto;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* 모바일 머리 · 내 모임 띠 · 메뉴 시트 — sticky 없음 */
.mhead {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 14);
  padding: max(calc(var(--spacing) * 1.5), env(safe-area-inset-top)) max(var(--spacing-gutter), env(safe-area-inset-right))
    calc(var(--spacing) * 1.5) max(var(--spacing-gutter), env(safe-area-inset-left));
  background: var(--color-surface);
  border-bottom: var(--spacing-line-bold) solid var(--color-line);
}
.mhead .logo {
  margin-right: calc(var(--spacing) * 1);
}
.mhead .hood-wrap {
  margin-right: auto;
}
.icon-btn {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  border-radius: var(--radius-round);
}
.icon-btn .ic {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.icon-btn--line {
  border: var(--spacing-line) solid var(--color-line);
  background: var(--color-surface);
}
.icon-dot {
  position: absolute;
  top: calc(var(--spacing) * 2.5);
  right: calc(var(--spacing) * 2.5);
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
  border-radius: var(--radius-round);
  background: var(--color-accent);
  box-shadow: 0 0 0 var(--spacing-line) var(--color-surface);
}
.strip {
  background: var(--color-bg);
  border-bottom: var(--spacing-line-bold) solid var(--color-line);
}
.strip-l {
  display: flex;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2.5) var(--spacing-gutter) calc(var(--spacing) * 1.5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spacing-gutter);
  scrollbar-width: none;
}
.strip-l::-webkit-scrollbar {
  display: none;
}
.strip .mine-i {
  flex: 0 0 auto;
  width: calc(var(--spacing) * 20);
  scroll-snap-align: start;
}
.strip .mine-a {
  padding: calc(var(--spacing) * 1.5) 0;
}
.strip .mine-a .stk,
.strip .find-stk {
  --sz: calc(var(--spacing) * 16);
  width: calc(var(--spacing) * 16);
  height: calc(var(--spacing) * 16);
}
.strip .mine-a {
  position: relative;
}
.strip .mine-new {
  position: absolute;
  top: 0;
  right: calc(var(--spacing) * 1.5);
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--spacing) * 5.5);
  height: calc(var(--spacing) * 5.5);
  padding: 0 var(--spacing);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  line-height: 1;
}
.strip .mine-new .dot {
  display: none;
}
.strip .mine-n {
  white-space: nowrap;
}
.strip .mine-i.is-current .mine-a {
  background: var(--color-surface-tint);
}
.msheet {
  position: fixed;
  z-index: 60;
  inset: 0;
}
.msheet-p {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
  width: min(20rem, 86vw);
  padding: max(calc(var(--spacing) * 3), env(safe-area-inset-top)) calc(var(--spacing) * 4)
    max(calc(var(--spacing) * 5), env(safe-area-inset-bottom)) max(calc(var(--spacing) * 4), env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border-inline-end: var(--spacing-line-bold) solid var(--color-line);
  box-shadow: var(--shadow-lift);
}
.msheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rnav--sheet .rnav-a {
  min-height: calc(var(--spacing) * 13);
  font-size: var(--text-base);
}

/* 꼬리 — 먹 띠 · 고지 전문 */
.foot {
  padding: calc(var(--spacing) * 10) var(--spacing-gutter) max(calc(var(--spacing) * 10), env(safe-area-inset-bottom));
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.foot-in {
  display: grid;
  gap: calc(var(--spacing) * 4);
}
.foot-note {
  max-width: 44em;
  font-weight: 600;
}
.foot-meta {
  font-size: var(--text-xs);
}
@media (min-width: 960px) {
  .foot-in {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
  }
  .foot-meta {
    grid-column: 2;
  }
}

/* ── 공통 부품 ────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--text-display--line-height);
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--text-3xl--line-height);
}
.h2 {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--text-2xl--line-height);
}
.h2-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.35em;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}
.h3 {
  margin-bottom: calc(var(--spacing) * 2.5);
  font-size: var(--text-base);
  font-weight: 800;
}
.panel {
  background: var(--color-surface);
  border: var(--spacing-line-bold) solid var(--color-line);
}
.panel-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  min-height: calc(var(--spacing) * 15);
  padding: calc(var(--spacing) * 2.5) var(--spacing-cell);
  border-bottom: var(--spacing-line-bold) solid var(--color-line);
}
.panel-note {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}
.more {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  min-height: var(--spacing-tap);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) {
  .more:hover {
    text-decoration: underline;
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--spacing) * 6);
  padding: 0 calc(var(--spacing) * 2);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.tag--berry {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.tag--butter {
  background: var(--color-plate-butter);
}
.tag--sky {
  background: var(--color-plate-sky);
}
.chip,
.btn-w {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 4);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.chip--static {
  min-height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 3);
  cursor: default;
}
.chip--search,
.chip--ask {
  box-shadow: var(--shadow-sticker);
}
.chip--search {
  min-width: 15rem;
  justify-content: flex-start;
}
.btn-w {
  min-height: calc(var(--spacing) * 13);
  padding: 0 calc(var(--spacing) * 5);
  font-size: var(--text-base);
}
@media (hover: hover) {
  .chip:not(.chip--static):hover,
  .btn-w:hover {
    background: var(--color-bg);
  }
  .chip[aria-pressed="true"]:hover {
    background: var(--color-ink);
  }
}

/* 참가 버튼 — 진달래 pill + 0-blur 그림자. 눌림 = 연분홍 면 + 진달래 글자 */
.join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 4.5);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: var(--shadow-sticker);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
}
.join .ic {
  stroke-width: 2.5;
}
.join-check,
.join-on {
  display: none;
}
.join[aria-pressed="true"] {
  background: var(--color-surface-tint);
  color: var(--color-accent);
}
.join[aria-pressed="true"] .join-plus,
.join[aria-pressed="true"] .join-off {
  display: none;
}
.join[aria-pressed="true"] .join-check,
.join[aria-pressed="true"] .join-on {
  display: inline;
}
.join--big {
  min-height: calc(var(--spacing) * 13);
  padding: 0 calc(var(--spacing) * 6);
  font-size: var(--text-base);
}
@media (hover: hover) {
  .join:hover {
    box-shadow: var(--shadow-lift);
  }
}
.join:active {
  box-shadow: var(--shadow-press);
}
@media (prefers-reduced-motion: no-preference) {
  .join {
    transition:
      translate 120ms var(--ease-press),
      box-shadow 120ms var(--ease-press);
  }
  .join:active {
    translate: 3px 3px;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .join:hover {
    translate: -1px -1px;
  }
  .join:active {
    translate: 3px 3px;
  }
}

/* 사진 자리표시자 — 연두 면 · 먹 점선 · 카메라 · 비율·용도 (직각) */
.ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--spacing) * 2.5);
  width: 100%;
  padding: calc(var(--spacing) * 4);
  background: var(--color-bg);
  border: var(--spacing-line) dashed var(--color-line);
  text-align: center;
}
.ph[data-ratio="4:3"] {
  aspect-ratio: 4 / 3;
}
.ph[data-ratio="1:1"] {
  aspect-ratio: 1;
}
.ph-ic {
  display: grid;
  place-items: center;
  width: calc(var(--spacing) * 14);
  height: calc(var(--spacing) * 14);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-round);
  background: var(--color-surface);
  box-shadow: var(--shadow-kiss);
}
.ph-ic .ic {
  width: calc(var(--spacing) * 6.5);
  height: calc(var(--spacing) * 6.5);
}
.ph-r {
  font-size: var(--text-sm);
  font-weight: 700;
}
.ph-r b {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  vertical-align: -0.1em;
}
.ph-a {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ph-t {
  max-width: 100%;
  padding: var(--spacing) calc(var(--spacing) * 2.5);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--text-xs--line-height);
}
.ph--sm {
  width: calc(var(--spacing) * 12);
  padding: 0;
}
.ph--sm .ph-ic {
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
  border: 0;
  background: none;
  box-shadow: none;
}
.ph--sm .ic {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}

/* 사진 — 자리표시자와 같은 판(직각 · 같은 비율 · 연두 면). 점선은 "비어 있음" 신호라 실선 먹선으로 닫는다 */
.pic {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg);
  border: var(--spacing-line) solid var(--color-line);
}
.pic--sq {
  aspect-ratio: 1;
}
.pic--sm {
  width: calc(var(--spacing) * 12);
}

/* 탭 — 칸 가족(직각). 선택 = 먹 면 */
.tabs {
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--spacing-line);
  background: var(--color-line);
  border: var(--spacing-line) solid var(--color-line);
}
.tab {
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 4);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
@media (hover: hover) {
  .tab[aria-selected="false"]:hover {
    background: var(--color-bg);
  }
}

/* ── 1. 피드 ──────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: var(--spacing-tap);
}
.today-d {
  font-weight: 800;
}
.topbar-r {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.me {
  display: inline-grid;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
}
.hello {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-gutter);
  min-height: 13.75rem;
}
.hello-p {
  max-width: 30em;
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--text-lg--line-height);
}
.hello-p strong {
  color: var(--color-ink);
  font-weight: 800;
}
/* 스티커 무더기 — 장식 5장, 한 장만 모서리가 들렸다 */
.pile {
  position: relative;
  width: 25rem;
  height: 13.75rem;
}
.pile-s {
  position: absolute;
  display: block;
}
.pile-s--pil {
  top: 5.25rem;
  left: 0;
}
.pile-s--pil .stk {
  --sz: 9.5rem;
}
.pile-s--sil {
  top: -0.5rem;
  left: 2rem;
}
.pile-s--sil .stk {
  --sz: 9.25rem;
}
.pile-s--dal {
  top: 0.25rem;
  left: 10rem;
}
.pile-s--dal .stk {
  --sz: 7.75rem;
}
.pile-s--bread {
  top: 6.75rem;
  left: 8.5rem;
}
.pile-s--bread .stk {
  --sz: 6.75rem;
}
.pile-s--dice {
  top: 3.5rem;
  left: 16.5rem;
}
.pile-s--dice .stk {
  --sz: 8rem;
}
/* 본문 칸이 좁은 두 구간(레일 없는 720~879 · 레일 있는 960~1279)에서 H1 둘째 줄(≈7.65em)이 무더기 400px 옆에
   못 들어가 3줄이 된다. 글자만 한 단 내려서는 960 에서 칸이 197px 뿐이라 모자란다 — 인사 묶음 전체를 한 단 줄인다.
   무더기 배율 0.65 = 1440 의 "무더기 폭 ÷ H1 크기" 비를 한 단 아래에서도 지키는 값. 구간 끝은 여유 5% 이상에서 끊었다 */
@media (min-width: 720px) and (max-width: 879.98px), (min-width: 960px) and (max-width: 1279.98px) {
  /* 최소 높이 13.75rem 은 줄기 전 무더기 높이 — 그대로 두면 문단 아래에 50~70px 빈 띠가 남는다 */
  .hello {
    min-height: 0;
  }
  .hello .display {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }
  .pile {
    zoom: 0.65;
  }
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 7);
}
.duo > * {
  min-width: 0;
}
@media (min-width: 1200px) {
  .duo--today {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
  .duo--feed {
    grid-template-columns: 8fr 4fr;
    align-items: start;
  }
  .att {
    position: sticky;
    top: var(--spacing-gutter);
  }
}

/* 오늘 이벤트 — 직각 표 행 (행 사이 3px 먹선) */
.evs {
  display: grid;
  gap: var(--spacing-line-bold);
  background: var(--color-line);
}
.ev {
  display: grid;
  grid-template-columns: 7rem calc(var(--spacing) * 14) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4) var(--spacing-cell);
  background: var(--color-surface);
}
.ev.is-joined,
.sc.is-joined {
  background: var(--color-surface-tint);
}
.ev-time {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-time);
  line-height: var(--text-time--line-height);
  font-variant-numeric: tabular-nums;
}
.ev-stk .stk {
  --sz: calc(var(--spacing) * 14);
}
.ev-title {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: var(--text-lg--line-height);
}
.ev-title a {
  text-decoration-color: var(--color-accent);
}
.ev-place,
.sc-p {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  margin-top: 2px;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}
.ev-place .ic,
.sc-p .ic {
  width: 1.1em;
  height: 1.1em;
}
.ev-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 2.5);
}
.who {
  display: inline-flex;
  align-items: center;
}
.who .av + .av {
  margin-left: 2px;
}
.who-n {
  margin-left: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 추천 모임 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) var(--spacing-cell);
  border-bottom: var(--spacing-line-bold) solid var(--color-line);
}
.grs {
  display: grid;
  gap: var(--spacing-line-bold);
  background: var(--color-line);
}
.gr {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 12) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 3) var(--spacing-cell);
  background: var(--color-surface);
}
.gr .stk {
  --sz: calc(var(--spacing) * 12);
}
.gr-name {
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.35;
}
.gr-line {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.gr-meta {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}
.gr-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 3.5);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .gr-go:hover {
    background: var(--color-bg);
  }
}
.gr-empty {
  padding: var(--spacing-cell);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

/* 활동 피드 */
.feed-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 4);
}
.posts {
  display: grid;
  gap: var(--spacing-cell);
}
.post {
  background: var(--color-surface);
  border: var(--spacing-line-bold) solid var(--color-line);
}
.post-h {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4) var(--spacing-cell) 0;
}
.post-name {
  font-weight: 800;
  line-height: 1.4;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}
.post-g {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  color: var(--color-ink);
}
.post-g .stk {
  --sz: calc(var(--spacing) * 5.5);
}
.post-b {
  max-width: 40em;
  padding: calc(var(--spacing) * 3) var(--spacing-cell) calc(var(--spacing) * 4);
}
.post-q {
  margin: calc(var(--spacing) * 4) var(--spacing-cell) calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 5);
  background: var(--color-bg);
  border: var(--spacing-line) solid var(--color-line);
}
.post-q p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.4;
}
.post-q footer {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  font-weight: 600;
}
.post-m {
  padding: 0 var(--spacing-cell) var(--spacing-cell);
}
.post-m--two {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: calc(var(--spacing) * 3);
}
.rx {
  display: flex;
  border-top: var(--spacing-line) solid var(--color-line);
}
.rx-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--spacing) * 12);
  gap: calc(var(--spacing) * 1.5);
  min-height: calc(var(--spacing) * 12);
  padding: 0 calc(var(--spacing) * 4);
  border-inline-end: var(--spacing-line) solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rx-fill {
  flex: 1;
}
.rx-b:last-child {
  border-inline-end: 0;
  border-inline-start: var(--spacing-line) solid var(--color-line);
}
@media (hover: hover) {
  .rx-b:hover {
    background: var(--color-bg);
  }
}
.rx-like[aria-pressed="true"],
.pill-x[aria-pressed="true"] {
  color: var(--color-accent);
}
.rx-like[aria-pressed="true"] .ic,
.pill-x[aria-pressed="true"] .ic {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}
.rx-chev {
  width: 1em;
  height: 1em;
}
[aria-expanded="true"] > .rx-chev {
  rotate: 180deg;
}
.cmts {
  display: grid;
  grid-template-rows: 1fr;
}
.js .cmts:not(.is-open) {
  grid-template-rows: 0fr;
}
@media (prefers-reduced-motion: no-preference) {
  .cmts {
    transition: grid-template-rows 200ms var(--ease-in-out);
  }
  .rx-chev {
    transition: rotate 200ms var(--ease-in-out);
  }
}
.cmts-in {
  min-height: 0;
  overflow: hidden;
}
.cmts-l {
  display: grid;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4) var(--spacing-cell) 0;
  border-top: var(--spacing-line) solid var(--color-line);
}
.cmt {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.cmt p {
  padding-top: calc(var(--spacing) * 1.5);
}
.cmts-more {
  padding: calc(var(--spacing) * 3) var(--spacing-cell) calc(var(--spacing) * 4);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* 9월 출석판 — 달력 칸 2px 먹선, 참가한 날에 28px 스티커 */
.att-in {
  padding: calc(var(--spacing) * 4) var(--spacing-cell) var(--spacing-cell);
}
.att-p {
  margin-bottom: calc(var(--spacing) * 3);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--spacing-line);
  background: var(--color-line);
  border: var(--spacing-line) solid var(--color-line);
}
.dow {
  padding: var(--spacing) 0;
  background: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: 800;
  text-align: center;
}
.day {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-surface);
}
.day--blank {
  background: var(--color-bg);
}
.dnum {
  position: absolute;
  top: 2px;
  left: calc(var(--spacing) * 1.25);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.day--later .dnum {
  color: var(--color-ink-soft);
  font-weight: 500;
}
.day-s {
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: block;
}
.day-s .stk {
  --sz: calc(var(--spacing) * 6);
}
.day.is-today {
  background: var(--color-surface-tint);
  box-shadow: inset 0 0 0 var(--spacing-line) var(--color-accent);
}
.day.is-today .dnum {
  color: var(--color-accent);
  font-weight: 800;
}
.att-sum {
  display: grid;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  font-weight: 600;
}
.att-n {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
}
.slots {
  display: flex;
  gap: calc(var(--spacing) * 1.5);
}
.slot {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  border: var(--spacing-line) dashed var(--color-ink-soft);
  border-radius: var(--radius-round);
}
.slot.is-on {
  background: var(--color-plate-butter);
  border-style: solid;
  border-color: var(--color-ink);
}

/* ── 2. 모임 페이지 ───────────────────────────────────────── */
.ghead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--spacing) * 10);
  padding-block: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
}
.ghead-s {
  padding: calc(var(--spacing) * 3);
}
.ghead-s .stk {
  --sz: var(--spacing-sticker-xl);
}
.ghead-t .h1 {
  margin-top: calc(var(--spacing) * 3);
}
.ghead-sub {
  margin-top: var(--spacing);
  font-size: var(--text-lg);
  font-weight: 700;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  font-weight: 600;
}
.facts li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}
.ghead-b {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 5);
}
.intro {
  display: grid;
  grid-template-areas: "text" "media" "lists";
  gap: calc(var(--spacing) * 6);
  padding: var(--spacing-cell-lg) var(--spacing-cell);
}
.intro-t {
  grid-area: text;
  display: grid;
  gap: calc(var(--spacing) * 3);
  max-width: 38em;
}
.intro-m {
  grid-area: media;
}
.intro-lists {
  grid-area: lists;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: calc(var(--spacing) * 6);
}
@media (min-width: 1100px) {
  .intro {
    grid-template-areas: "text media" "lists media";
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    column-gap: calc(var(--spacing) * 8);
    padding-inline: var(--spacing-cell-lg);
  }
}
.ticks,
.nums {
  display: grid;
  border-top: var(--spacing-line) solid var(--color-line);
}
.ticks li,
.nums li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-height: calc(var(--spacing) * 11);
  border-bottom: var(--spacing-line) solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: 600;
}
.nums {
  counter-reset: n;
}
.nums li {
  counter-increment: n;
}
.nums li::before {
  content: counter(n);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  border-radius: var(--radius-round);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-xs);
  font-weight: 800;
}
.notice-line {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}
.notice-line::before {
  content: "가상";
  flex: none;
  padding: 2px calc(var(--spacing) * 2);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-weight: 800;
}

/* 정기 일정 */
.scs {
  display: grid;
  gap: var(--spacing-line-bold);
  background: var(--color-line);
}
.sc {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 4) var(--spacing-cell);
  background: var(--color-surface);
}
.sc-d {
  font-family: var(--font-display);
  line-height: 1;
  white-space: nowrap;
}
.sc-dd {
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}
.sc-w {
  font-size: var(--text-xl);
}
.sc-t {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: var(--text-lg--line-height);
}
.sc-t a {
  text-decoration-color: var(--color-accent);
}
.sc-n {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 멤버 */
.mems {
  display: grid;
  gap: calc(var(--spacing) * 6);
  padding: var(--spacing-cell-lg) var(--spacing-cell);
}
@media (min-width: 1100px) {
  .mems {
    grid-template-columns: minmax(0, 1fr) 15rem;
    padding-inline: var(--spacing-cell-lg);
  }
}
.mem-g {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: calc(var(--spacing) * 5) calc(var(--spacing) * 2);
}
.mem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
}
.mem-n {
  font-size: var(--text-xs);
  font-weight: 700;
}
.mem-lead {
  position: absolute;
  top: calc(var(--spacing) * 11);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px calc(var(--spacing) * 1.5) 1px var(--spacing);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-plate-butter);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.mem-lead .ic {
  width: 1em;
  height: 1em;
  stroke-width: 1.5;
}
.mem:has(.mem-lead) .mem-n {
  margin-top: calc(var(--spacing) * 3);
}
.mem-side {
  display: grid;
  align-content: start;
  gap: calc(var(--spacing) * 3);
}
.mem-more {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  font-weight: 700;
}
.mem-more-s {
  display: inline-grid;
  place-items: center;
  width: var(--spacing-sticker-md);
  height: var(--spacing-sticker-md);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-round);
  background: var(--color-bg);
  box-shadow: var(--shadow-kiss);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  rotate: 4deg;
}
.mem-more-s .m {
  display: none;
}
.staff {
  display: grid;
  gap: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
}
.staff li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}

/* 게시글 목록 */
.bbs {
  display: grid;
  gap: var(--spacing-line);
  background: var(--color-line);
}
.bbs-r {
  display: grid;
  grid-template-areas: "tag title thumb who date";
  grid-template-columns: 3.5rem minmax(0, 1fr) auto 7.5rem 3rem;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  min-height: calc(var(--spacing) * 16);
  padding: calc(var(--spacing) * 2) var(--spacing-cell);
  background: var(--color-surface);
}
.bbs-r > .tag {
  grid-area: tag;
  justify-self: start;
}
.bbs-t {
  grid-area: title;
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) {
  .bbs-t:hover {
    text-decoration: underline;
  }
}
.bbs-c {
  margin-left: calc(var(--spacing) * 1.5);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bbs-ph {
  grid-area: thumb;
}
.bbs-w {
  grid-area: who;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  font-weight: 600;
}
.bbs-d {
  grid-area: date;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bbs-more {
  padding: calc(var(--spacing) * 4) var(--spacing-cell);
  border-top: var(--spacing-line-bold) solid var(--color-line);
}

/* ── 3. 이벤트 ────────────────────────────────────────────── */
.ehead {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
}
.stub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  padding: var(--spacing-cell-lg) var(--spacing-cell);
  background: var(--color-plate-butter);
  border-inline-end: var(--spacing-line-bold) dashed var(--color-line);
}
.stub-d {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stub-w {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.stub-t {
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ehead-t {
  padding: var(--spacing-cell-lg);
}
.gtag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 2);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
}
.gtag .stk {
  --sz: calc(var(--spacing) * 7);
}
@media (hover: hover) {
  .gtag:hover {
    background: var(--color-bg);
  }
}
.ehead-t .h1 {
  margin-top: calc(var(--spacing) * 4);
}
.ehead-p {
  max-width: 34em;
  margin-top: calc(var(--spacing) * 2);
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--text-lg--line-height);
}
.ehead-b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 6);
}
.left {
  font-size: var(--text-sm);
  font-weight: 700;
}
.left [data-left] {
  color: var(--color-accent);
  font-weight: 800;
}
.when {
  display: grid;
  gap: calc(var(--spacing) * 6);
  padding: var(--spacing-cell-lg) var(--spacing-cell);
}
.when-m {
  order: -1;
}
@media (min-width: 1100px) {
  .when {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    column-gap: calc(var(--spacing) * 8);
    padding-inline: var(--spacing-cell-lg);
  }
  .when-m {
    order: 0;
  }
}
.dl {
  display: grid;
  margin-bottom: calc(var(--spacing) * 6);
  border-top: var(--spacing-line) solid var(--color-line);
}
.dl > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) 0;
  border-bottom: var(--spacing-line) solid var(--color-line);
}
.dl dt {
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: var(--text-base--line-height);
}
.steps {
  display: grid;
  gap: calc(var(--spacing) * 2);
}
.steps li {
  display: flex;
  gap: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  font-weight: 500;
}
.steps time {
  min-width: 3.2em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* 동네 약도 — SVG, 지명은 전부 가상 */
.map {
  display: block;
  width: 100%;
  height: auto;
  border: var(--spacing-line-bold) solid var(--color-line);
}
.m-bg {
  fill: var(--color-bg);
}
.m-road-o {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 14;
}
.m-road {
  fill: none;
  stroke: var(--color-plate-white);
  stroke-width: 10;
}
.m-water-o {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 30;
}
.m-water {
  fill: none;
  stroke: var(--color-plate-sky);
  stroke-width: 26;
}
.m-stones circle,
.m-blocks rect {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 2;
}
.m-lib {
  fill: var(--color-plate-butter);
  stroke: var(--color-ink);
  stroke-width: 3;
}
.m-lab {
  fill: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}
.m-lab--b {
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
}
.m-pin-o {
  fill: var(--color-ink);
  stroke: var(--color-ink);
  stroke-width: 10;
  stroke-linejoin: round;
}
.m-pin-w {
  fill: var(--color-plate-white);
  stroke: var(--color-plate-white);
  stroke-width: 6;
  stroke-linejoin: round;
}
.m-pin-f {
  fill: var(--color-accent);
  stroke: var(--color-ink);
  stroke-width: 2;
}
.m-pin-c {
  fill: var(--color-plate-white);
  stroke: var(--color-ink);
  stroke-width: 2;
}
.m-here rect {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 2;
}
.m-here text {
  fill: var(--color-accent);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
}

/* 참가자 판 — 8칸, 빈칸은 칼선 점선 원 */
.seats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--spacing-line);
  background: var(--color-line);
}
.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 3);
  min-height: 10rem;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  background: var(--color-surface);
  text-align: center;
}
.seat-s {
  display: block;
  rotate: var(--tilt, 0deg);
}
.seat-e {
  width: var(--spacing-sticker-md);
  height: var(--spacing-sticker-md);
  border: var(--spacing-line-bold) dashed var(--color-cutline);
  border-radius: var(--radius-round);
}
.seat-n {
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.35;
}
.seat-r {
  display: block;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}
.seat-en {
  color: var(--color-ink-soft);
  font-weight: 600;
}
.seat-mn {
  display: none;
}
.seat.is-filled {
  background: var(--color-surface-tint);
}
.seat.is-filled .seat-e,
.seat.is-filled .seat-en {
  display: none;
}
.seat.is-filled .seat-mn {
  display: inline;
}
.av--me {
  --plate: var(--color-plate-berry);
}
.seat-me .av {
  box-shadow:
    var(--shadow-kiss),
    3px 3px 0 calc(var(--spacing-kiss) + var(--spacing-line)) var(--color-ink);
}

/* 후기 */
.rvs {
  display: grid;
  gap: calc(var(--spacing) * 7);
  padding: var(--spacing-cell-lg) var(--spacing-cell);
}
@media (min-width: 1100px) {
  .rvs {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: calc(var(--spacing) * 8);
    padding-inline: var(--spacing-cell-lg);
  }
}
.rv-m {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: calc(var(--spacing) * 3);
  align-items: start;
}
.rv-big {
  grid-row: span 2;
}
/* 4:3 × 8fr 높이 = 1:1 × 3fr 두 장 높이 − gap — 사진이면 바닥선 12px 차이가 보여 2행 높이로 늘린다(cover 가 ≈4% 자른다) */
.rv-m .pic.rv-big {
  align-self: stretch;
}
.rv-m .ph:not(.rv-big) :is(.ph-t, .ph-a) {
  display: none;
}
.rv-l {
  display: grid;
}
.rv {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3.5);
  padding: calc(var(--spacing) * 4) 0;
  border-top: var(--spacing-line) solid var(--color-line);
}
.rv:first-child {
  padding-top: 0;
  border-top: 0;
}
.rv-n,
.q-n {
  font-weight: 800;
}
.rv-d {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}
.rv-t,
.q-t {
  margin-top: var(--spacing);
}
.rv-x {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 3);
}
.pill-x {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 3.5) 0 calc(var(--spacing) * 3);
  border: var(--spacing-line) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 700;
}
.pill-x[aria-pressed="true"] {
  background: var(--color-surface-tint);
}
@media (hover: hover) {
  .pill-x[aria-pressed="false"]:hover {
    background: var(--color-bg);
  }
}

/* 질문 */
.q {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3.5);
  padding: calc(var(--spacing) * 5) var(--spacing-cell);
  border-bottom: var(--spacing-line) solid var(--color-line);
}
.q-b {
  flex: 1;
  min-width: 0;
}
.q-a {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2.5);
  max-width: 36em;
  margin-top: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3);
  background: var(--color-bg);
  border: var(--spacing-line) solid var(--color-line);
  font-size: var(--text-sm);
}
.q-a .av {
  margin-top: 2px;
}
.q-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 5) var(--spacing-cell);
}
.q-ask .live:not(:empty) {
  margin-top: 0;
}

/* ── 720–959: 레일 없음 · 두 칸 대신 한 칸 ─────────────────── */
@media (max-width: 959.98px) {
  .topbar-r .icon-btn--line,
  .topbar-r .me {
    display: none;
  }
}

/* ── < 720: 전화 — 행을 다시 짠다 ─────────────────────────── */
@media (max-width: 719.98px) {
  .wrap {
    gap: calc(var(--spacing) * 6);
  }
  /* 윗줄은 날짜만 — 검색은 아이콘 칩 */
  .topbar {
    min-height: calc(var(--spacing) * 6);
  }
  .search-wrap {
    display: none;
  }
  /* 인사: 스티커 무더기 3장이 날짜 줄과 첫 줄 오른쪽에 겹친다 */
  .wrap {
    position: relative;
  }
  .hello {
    display: block;
    min-height: 0;
    margin-top: calc(var(--spacing) * -3);
  }
  .hello-p {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }
  .pile {
    position: absolute;
    top: calc(var(--spacing) * -1);
    right: 0;
    width: 9.5rem;
    height: 4.75rem;
  }
  .pile-s--pil,
  .pile-s--bread {
    display: none;
  }
  .pile-s--sil {
    top: 0;
    left: 0;
  }
  .pile-s--sil .stk {
    --sz: 4.25rem;
  }
  .pile-s--dal {
    top: -0.25rem;
    left: 3.25rem;
  }
  .pile-s--dal .stk {
    --sz: 3.75rem;
  }
  .pile-s--dice {
    top: 0.5rem;
    left: 6rem;
  }
  .pile-s--dice .stk {
    --sz: 3.5rem;
  }

  .panel-h {
    min-height: calc(var(--spacing) * 13);
    padding-block: calc(var(--spacing) * 1.5);
  }
  /* 이벤트 행: 시간 칸 | 제목·장소 | 둥근 참가 스티커 */
  .ev {
    grid-template-columns: 4.75rem minmax(0, 1fr) var(--spacing-tap);
    grid-template-areas: "time info btn" "stk info btn";
    align-items: start;
    gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4);
  }
  .ev-time {
    grid-area: time;
  }
  .ev-stk {
    grid-area: stk;
  }
  .ev-stk .stk {
    --sz: calc(var(--spacing) * 8);
  }
  .ev .stk--both .stk-t {
    display: none;
  }
  .ev .stk--both .gl {
    display: inline;
  }
  .ev-info {
    grid-area: info;
  }
  .ev-title {
    font-size: var(--text-base);
    line-height: 1.4;
  }
  .ev-place {
    font-size: var(--text-xs);
  }
  .ev-meta {
    margin-top: calc(var(--spacing) * 2);
  }
  .ev .join,
  .sc .join {
    grid-area: btn;
    align-self: center;
  }
  .join--row {
    width: var(--spacing-tap);
    padding: 0;
    border-radius: var(--radius-round);
  }
  .join--row .join-off,
  .join--row .join-on {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .join--row .ic {
    width: calc(var(--spacing) * 5.5);
    height: calc(var(--spacing) * 5.5);
  }
  .join--big {
    width: 100%;
  }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: calc(var(--spacing) * 4);
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  .gr {
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
  }
  .panel-h,
  .post-h,
  .post-b,
  .post-m,
  .cmts-l,
  .cmts-more,
  .demo-msg--rx:not(:empty),
  .att-in,
  .bbs-more,
  .q,
  .q-ask {
    padding-inline: calc(var(--spacing) * 4);
  }
  .post-q {
    margin-inline: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
  }
  .rx-b {
    padding-inline: calc(var(--spacing) * 3);
  }
  .feed-h .tabs {
    width: 100%;
    grid-auto-columns: 1fr;
  }

  /* 모임 머리: 스티커 위, 글 아래 */
  .ghead {
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 2);
  }
  .ghead-s {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0;
  }
  .ghead-s .stk {
    --sz: var(--spacing-sticker-lg);
  }
  .ghead-b > * {
    flex: 1 1 auto;
  }
  .facts {
    display: grid;
    gap: calc(var(--spacing) * 2);
  }
  .sc {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "d btn" "info info" "n n";
    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
  }
  .sc-d {
    grid-area: d;
  }
  .sc-info {
    grid-area: info;
  }
  .sc-n {
    grid-area: n;
    font-size: var(--text-sm);
  }
  .sc-t {
    font-size: var(--text-base);
  }
  .mem-g {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(var(--spacing) * 5) var(--spacing);
  }
  .mem--wide {
    display: none;
  }
  .mem-more-s .d {
    display: none;
  }
  .mem-more-s .m {
    display: inline;
  }
  .bbs-r {
    grid-template-areas: "tag title title thumb" "who who date thumb";
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  }
  .bbs-t {
    font-size: var(--text-sm);
  }
  .bbs-w,
  .bbs-d {
    font-size: var(--text-xs);
  }
  .bbs-d {
    text-align: left;
  }

  /* 이벤트 머리: 꼬투리는 위 띠 */
  .ehead {
    grid-template-columns: 1fr;
  }
  .stub {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    border-inline-end: 0;
    border-bottom: var(--spacing-line-bold) dashed var(--color-line);
  }
  .stub-d {
    font-size: var(--text-3xl);
  }
  .stub-t {
    font-size: var(--text-base);
  }
  .ehead-t {
    padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4);
  }
  .ehead-p {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }
  .ehead-b {
    margin-top: calc(var(--spacing) * 5);
  }
  .seats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .seat {
    min-height: 8rem;
    padding-inline: var(--spacing);
  }
  .seat .av,
  .seat-e {
    --sz: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .rv-m {
    grid-template-columns: 1fr 1fr;
  }
  .rv-big {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .dl > div {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    font-size: var(--text-sm);
  }
  /* 두 장 사진 글의 작은 자리: 비율만 남긴다(라벨이 세로로 부서지지 않게) */
  .post-m--two .ph:last-child {
    padding: calc(var(--spacing) * 2);
  }
  .post-m--two .ph:last-child :is(.ph-t, .ph-a) {
    display: none;
  }
  .post-m--two .ph:last-child .ph-ic,
  .rv-m .ph:not(.rv-big) .ph-ic {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
}