/* ════════════════════════════════════════════════════════════════════════
   circles.css — 소모임과 '모임 열기'
   1·2. /meetups · /meetups/new — v4-platform.css로 옮겼다(P2)
   3. /:slug 소모임 홈  다가오는 모임 · 지난 모임 · 기록 (body.has-sb .cx-home — 앱 토큰)
   토큰(--x-ink·--x-line…)은 v4-platform.css / v4-app.css가 body에 선언한 것을 쓴다.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. /meetups · 2. /meetups/new ─────────────────────────────────────
   v5(P2): 플랫폼 표면의 규칙은 v4-platform.css 한 곳에 모았다 — /meetups(§4: 목록·날짜 타일·소모임 띠 .cx-band·.cx-chip-card),
   /meetups/new(§6: .mx-* · 공개 범위 세그먼트). 이 파일은 §3(소모임 홈, 앱 토큰)만 가진다. */

/* ── 3. 소모임 홈 ─────────────────────────────────────────────────────
   v5 P3: 멤버 홈(팀 앱)은 다른 앱 화면과 같은 페이지 머리(.page-head, v4-app.css §5) — h1 x·top 기준선.
   바깥 사람(비멤버)에게는 홍보 셸(body.intro-page) 안에 읽기 전용으로(로고가 있는 원래 머리 .cx-head). 값은 v5 토큰만 */
body.intro-page .cx-home {
  --x-ink: var(--ink); --x-muted: var(--ink-2); --x-subtle: var(--ink-3); --x-dim: var(--ink-3);
  --x-line: var(--line); --x-line-2: var(--line-2); --x-wash-3: var(--wash-1);
  --x-r-lg: var(--r-lg);
  --x-brand: var(--ink); --x-brand-hover: var(--ink-hover); /* 주 CTA는 잉크 — 홍보 셸 위쪽 바의 버튼과 같은 색 */
}
body.intro-page .container.cx-home { max-width: 840px; padding-top: 56px; padding-bottom: 80px; word-break: keep-all; }
body.has-sb:not(.x-plat) .panel .container.cx-home { padding-bottom: var(--s-11); word-break: keep-all; }
body.has-sb:not(.x-plat) .panel .container.cx-home > * { max-width: var(--w-main); }
body.has-sb .cx-page-head .cx-facts { margin-top: var(--s-3); }
body.has-sb .cx-top { margin: 0 0 var(--s-6); }
:is(body.has-sb, body.intro-page) .cx-welcome {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-7); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
}
:is(body.has-sb, body.intro-page) .cx-welcome strong { flex: 1 1 260px; font: 600 var(--t-ui)/1.5 var(--font); letter-spacing: -0.01em; color: var(--ink); }
:is(body.has-sb, body.intro-page) .cx-welcome .code-pill { max-width: 100%; }
:is(body.has-sb, body.intro-page) .cx-welcome .code-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:is(body.has-sb, body.intro-page) .cx-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s-6);
  padding-bottom: var(--s-7); border-bottom: 1px solid var(--line);
}
:is(body.has-sb, body.intro-page) .cx-logo {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink); color: #fff; font: 600 var(--t-title-3)/1 var(--font); letter-spacing: -0.03em;
}
:is(body.has-sb, body.intro-page) .cx-logo.has-img { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
:is(body.has-sb, body.intro-page) .cx-logo img { width: 100%; height: 100%; object-fit: cover; }
:is(body.has-sb, body.intro-page) .cx-kicker { font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink-3); }
:is(body.has-sb, body.intro-page) .cx-head h1 {
  margin-top: var(--s-1); font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em;
  color: var(--ink); overflow-wrap: anywhere;
}
:is(body.has-sb, body.intro-page) .cx-tag { margin-top: var(--s-2); font: 400 var(--t-body)/1.55 var(--font); color: var(--ink-2); }
:is(body.has-sb, body.intro-page) .cx-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-3); margin-top: var(--s-3); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
:is(body.has-sb, body.intro-page) .cx-host { display: inline-flex; align-items: center; gap: 6px; }
:is(body.has-sb, body.intro-page) .cx-host b { font-weight: 600; color: var(--ink); }
:is(body.has-sb, body.intro-page) .cx-acts { display: flex; flex-direction: column; gap: var(--s-2); }
:is(body.has-sb, body.intro-page) .cx-acts .btn { height: var(--h-md); padding: 0 18px; font-size: var(--t-ui); gap: 6px; }
body.intro-page .cx-acts .btn:not(.btn-ghost) { background: var(--ink); color: #fff; font-weight: 500; }
body.intro-page .cx-acts .btn:not(.btn-ghost):hover { background: var(--ink-hover); }
:is(body.has-sb, body.intro-page) .cx-wait { height: var(--h-md); padding: 0 var(--s-4); font-size: var(--t-footnote); }

:is(body.has-sb, body.intro-page) .cx-sec { margin-top: var(--s-9); }
:is(body.has-sb, body.intro-page) .cx-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
:is(body.has-sb, body.intro-page) .cx-sec-head h2 { font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); }
:is(body.has-sb, body.intro-page) .cx-sec-head h2 .sec-count { margin-left: 6px; font: 500 var(--t-ui)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-3); }
:is(body.has-sb, body.intro-page) .cx-sec-head p { flex-basis: 100%; font: 400 var(--t-footnote)/1.5 var(--font); color: var(--ink-3); }
:is(body.has-sb, body.intro-page) .cx-more { position: relative; font: 500 var(--t-ui)/1.45 var(--font); color: var(--ink-2); transition: color var(--dur-1) var(--ease-out); }
:is(body.has-sb, body.intro-page) .cx-more:hover { color: var(--ink); }
:is(body.has-sb, body.intro-page) .cx-more-all { display: inline-block; margin-top: var(--s-3); }
/* 빈 칸 — 점선 상자 폐지(v5 §4.8): 워시 면 한 줄 */
:is(body.has-sb, body.intro-page) .cx-none {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5);
  border: 0; border-radius: var(--r-lg); background: var(--wash-1); font: 400 var(--t-ui)/1.55 var(--font); color: var(--ink-3);
}
:is(body.has-sb, body.intro-page) .cx-none p { flex: 1 1 240px; }

/* 지난 모임 — 날짜 칼럼 + 제목. 헤어라인 행 */
:is(body.has-sb, body.intro-page) .cx-past { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
:is(body.has-sb, body.intro-page) .cx-past > li { border-bottom: 1px solid var(--line); }
:is(body.has-sb, body.intro-page) .cx-past-row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: var(--s-5); row-gap: 3px; margin: 0 calc(-1 * var(--s-3)); padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md); transition: background-color var(--dur-1) var(--ease-out);
}
:is(body.has-sb, body.intro-page) .cx-past-row:hover { background: var(--wash-1); }
:is(body.has-sb, body.intro-page) .cx-past-row:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
:is(body.has-sb, body.intro-page) .cx-past-when { grid-row: span 2; padding-top: 2px; font: 500 var(--t-footnote)/1.6 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
:is(body.has-sb, body.intro-page) .cx-past-title { font: 600 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink); }
:is(body.has-sb, body.intro-page) .cx-past-meta { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }

/* 기록 — 최근 글 몇 줄 */
:is(body.has-sb, body.intro-page) .cx-recs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
:is(body.has-sb, body.intro-page) .cx-recs > li { border-bottom: 1px solid var(--line); }
:is(body.has-sb, body.intro-page) .cx-recs a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: 0 calc(-1 * var(--s-3)); padding: var(--s-3); border-radius: var(--r-md); transition: background-color var(--dur-1) var(--ease-out); }
:is(body.has-sb, body.intro-page) .cx-recs a:hover { background: var(--wash-1); }
:is(body.has-sb, body.intro-page) .cx-rec-t { min-width: 0; overflow: hidden; font: 500 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
:is(body.has-sb, body.intro-page) .cx-rec-m { flex: none; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
:is(body.has-sb, body.intro-page) .cx-rec-m .dot { margin: 0 4px; }

@media (max-width: 699px) {
  body.has-sb:not(.x-plat) .panel .container.cx-home { padding-bottom: var(--s-10); }
  :is(body.has-sb, body.intro-page) .cx-head { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-6); }
  :is(body.has-sb, body.intro-page) .cx-logo { width: 56px; height: 56px; border-radius: var(--r-md); font-size: var(--t-headline); }
  :is(body.has-sb, body.intro-page) .cx-acts { grid-column: 1 / -1; flex-direction: row; }
  :is(body.has-sb, body.intro-page) .cx-acts .btn { flex: 1; height: var(--h-lg); }
  :is(body.has-sb, body.intro-page) .cx-past-row { grid-template-columns: minmax(0, 1fr); margin: 0 calc(-1 * var(--s-2)); padding: var(--s-3) var(--s-2); }
  :is(body.has-sb, body.intro-page) .cx-past-when { grid-row: auto; padding: 0; font-size: var(--t-caption); }
  :is(body.has-sb, body.intro-page) .cx-recs a { flex-direction: column; gap: 3px; margin: 0 calc(-1 * var(--s-2)); padding: var(--s-3) var(--s-2); }
  :is(body.has-sb, body.intro-page) .cx-rec-t { max-width: 100%; }
  body.intro-page .container.cx-home { padding-top: 32px; padding-bottom: 56px; }
  /* 손가락 — 글자 링크도 누르는 곳은 44px */
  :is(body.has-sb, body.intro-page) .cx-more { display: inline-flex; align-items: center; min-height: var(--hit); }
  :is(body.has-sb, body.intro-page) .cx-more-all { margin-top: 6px; }
}