/* 포스터형 템플릿(theme.site.template = 'poster') — 마크업 src/poster.js(동작 스크립트 없음).
   홈: 화면을 채우는 포스터 한 장(다음 모임 · 지난 모임 사진 모자이크 · 팀 이름 셋 중 하나) → 다가오는 모임 → 지난 모임 기록 → 블록.
   색은 둘뿐 — 포스터 바탕(--pst-bg: 팀 색, 없으면 잉크)과 그 위 글자(--pst-fg: 흰색 또는 잉크, 서버가 대비로 고른다 · --pst-on: 그 위 버튼 글자).
   팀 색이 닿는 곳은 포스터·가입 띠·홈 메뉴 줄의 글자색(포스터 위)뿐이다. 포스터 밖(목록·기록·얼굴 줄·하위 페이지)은 흰 종이 위 잉크.
   값은 v5 토큰(v5.css)만 — 예외는 포스터 활자 둘(큰 날짜·팀 이름, 팀 히어로 장면 예외 §2.2: 줄 폭에 맞춰 커진다).
   서체는 Studio 글꼴 도구를 따른다(.pst[data-font] — 미리보기에서 바로 바뀐다 · 하위 페이지는 body.pst-f-*): Cal Sans · Grotesk · 세리프(Noto Serif KR) · 새 서체(body.sf + :root 변수).
   모든 규칙은 body.pst-page 아래 — 기본·문서형·저널형 템플릿에는 닿지 않는다. */

/* ── 공통 ── */
.pst-page {
  --pst-bg: var(--ink); --pst-fg: #fff; --pst-on: var(--ink); /* 서버 <style>이 팀 색으로 덮는다 */
  --pst-line: color-mix(in srgb, var(--pst-fg) 32%, transparent);
  --pst-wash: color-mix(in srgb, var(--pst-fg) 14%, transparent);
  --pst-logo: brightness(0) invert(1);
  --pst-col: calc(min(100vw, var(--w-wide) + var(--gutter) * 2) - var(--gutter) * 2); /* 포스터 글 칸 폭 — 팀 이름 크기가 이 폭을 따른다 */
}
.pst-page.pst-ink { --pst-logo: brightness(0); }
/* 바탕이 사진이면 글자는 늘 흰색(스크림 위) */
.pst-page:has(.pst[data-photo]) { --pst-fg: #fff; --pst-on: var(--ink); --pst-logo: brightness(0) invert(1); }
.pst-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pst-page :is(.pst, .pst-sec, .pst-band) :is(h1, h2, h3, p, a, span, strong) { word-break: keep-all; overflow-wrap: anywhere; }
.pst-page :is(.pst-eyebrow, .pst-meta, .pst-row-s, .pst-rec-m) i { font-style: normal; margin: 0 6px; opacity: .6; } /* 구분점 — 장식 */

/* 버튼 — 포스터·가입 띠 위. 주 = 글자색 알약(흰 알약·잉크 글자 또는 잉크 알약·흰 글자) · 보조 = 글자색 14% 워시 */
.pst-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h-xl); padding: 0 28px;
  border: 0; border-radius: var(--r-pill); font: 500 var(--t-card)/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
.pst-btn svg { width: var(--ic-lg); height: var(--ic-lg); margin-right: -6px; flex: none; }
.pst-btn:active { scale: var(--m-press); transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
.pst-btn.is-p { background: var(--pst-fg); color: var(--pst-on); }
.pst-btn.is-s { background: var(--pst-wash); color: var(--pst-fg); }
.pst-btn.is-note { background: var(--pst-wash); color: var(--pst-fg); font-size: var(--t-body); cursor: default; }
.pst-btn:focus-visible { outline: 2px solid var(--pst-fg); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) {
  .pst-btn.is-p:hover { background: color-mix(in srgb, var(--pst-fg) 86%, var(--pst-bg)); }
  .pst-btn.is-s:hover { background: color-mix(in srgb, var(--pst-fg) 22%, transparent); }
}

/* ── 메뉴 줄 — 공개 상단 바 하나(v5-public .pub-bar). 팀 이름은 굵게, 글꼴 도구를 따른다 ── */
body.pst-page.x-pub .pst-bar .intro-ident strong { font: 600 var(--t-title-3)/1.2 var(--font); letter-spacing: -0.03em; }
/* 긴 이름 — 줄을 바꾸지 않고(휴대폰 기본 바는 wrap) 이름이 줄임표로 줄어든다. 행동(로그인·가입)은 늘 같은 줄 오른쪽 */
body.pst-page.x-pub .pst-bar { flex-wrap: nowrap; }
/* 로고·가입 버튼이 포스터 안의 줄·글과 같은 세로선에(본문 폭 1012 칸 — 저널형 메뉴 줄과 같은 규칙) */
body.pst-page.x-pub .pst-bar { padding-left: max(var(--gutter), calc((100% - var(--w-wide)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--w-wide)) / 2)); }
body.pst-page.x-pub .pst-bar .intro-ident { flex: 0 1 auto; min-width: 0; }
/* 데스크톱 — 이름 칸 · 메뉴 · 행동 칸 3칸 격자. 양쪽 칸이 같은 폭이라 메뉴는 그대로 한가운데, 긴 팀 이름은 메뉴 밑으로 파고들지 않고 제 칸에서 줄임표.
   행동이 제 칸보다 넓으면 그 칸이 늘고 메뉴가 비킨다(겹치지 않는다). 메뉴가 없는 바·앱 모드 글씨(.pub-word)가 앞에 붙은 바는 기존 흐름 그대로 */
@media (min-width: 880px) {
  body.pst-page.x-pub .pst-bar:has(> .intro-nav):not(:has(> .pub-word)) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); }
  body.pst-page.x-pub .pst-bar:has(> .intro-nav):not(:has(> .pub-word)) .intro-ident { justify-self: start; max-width: 100%; }
  body.pst-page.x-pub .pst-bar:has(> .intro-nav):not(:has(> .pub-word)) .intro-nav { position: static; translate: none; }
  body.pst-page.x-pub .pst-bar:has(> .intro-nav):not(:has(> .pub-word)) .intro-top-acts { justify-self: end; }
}
/* 로고가 없는 팀의 이름 첫 글자 타일 — 로고 자리라 팀 색(포스터 바탕·글자색). 홈 포스터 위에서는 아래 규칙이 글자색 워시로 바꾼다 */
body.pst-page.x-pub .pst-bar .intro-logo.intro-logo-txt { background: var(--pst-bg); color: var(--pst-fg); }
/* 사이트 서체 — 변수 한 벌(--site-font · --site-w · --site-track, 표 src/fonts.js). 세리프(옛 값)는 이 body 표식이 정하고, 새 서체는 머리의 <style data-site-font>가 :root에(body.sf).
   하위 페이지 제목 — 세리프·새 서체를 고른 팀은 본문 제목도 그 서체(한글 글리프가 없는 Cal Sans·Grotesk는 본문 서체 그대로) */
:is(body.pst-f-serif.x-pub, body.pst-home.x-pub:has(.pst[data-font="serif"])) { --site-font: 'Noto Serif KR', Georgia, serif; --site-w: 600; --site-track: -0.03em; }
body:is(.pst-f-serif, .sf-h).x-pub .intro-main :is(.page-title, .page-head h1, .art-x .art-title, .about-name) { font-family: var(--site-font); font-weight: var(--site-w); letter-spacing: var(--site-track); word-spacing: var(--site-ws, normal); }
:is(body.pst-f-display.x-pub, body.pst-home.x-pub:has(.pst[data-font="display"])) .pst-bar .intro-ident strong { font-family: 'Cal Sans', var(--font); letter-spacing: 0; }
:is(body.pst-f-grotesk.x-pub, body.pst-home.x-pub:has(.pst[data-font="grotesk"])) .pst-bar .intro-ident strong { font-family: var(--font-grotesk); font-weight: 700; letter-spacing: -0.03em; }
:is(body.pst-f-serif.x-pub, body.pst-home.x-pub:has(.pst[data-font="serif"]), body.sf-s.x-pub) .pst-bar .intro-ident strong { font-family: var(--site-font); font-weight: var(--site-w); letter-spacing: var(--site-track); word-spacing: var(--site-ws, normal); } /* 새 서체는 작은 자리에 맞는 서체만(body.sf-s) */
/* 홈 — 포스터 위에 투명하게(기본 템플릿의 히어로 위 바와 같은 자리). 글자·로고·버튼은 포스터 글자색 */
body.pst-home.x-pub .pst-bar-home :is(.intro-ident, .intro-nav a, .intro-top-link) { color: var(--pst-fg); }
body.pst-home.x-pub .pst-bar-home .intro-logo:not(.intro-logo-txt):not([data-style]) { filter: var(--pst-logo); }
body.pst-home.x-pub .pst-bar-home .intro-logo.intro-logo-txt { background: var(--pst-wash); color: var(--pst-fg); }
body.pst-home.x-pub .pst-bar-home .intro-top-acts .btn { background: var(--pst-fg); color: var(--pst-on); }
body.pst-home.x-pub .pst-bar-home .intro-top-acts .chip { background: var(--pst-wash); color: var(--pst-fg); }
body.pst-home.x-pub .pst-bar-home :focus-visible { outline: 2px solid var(--pst-fg); }
/* 이름 포스터(③) — 바로 아래 포스터가 이름을 크게 싣는다: 메뉴 줄의 팀 이름은 로고만 남기고 숨긴다(링크 이름으로는 읽힌다) */
body.pst-home.x-pub:has(.pst[data-state="name"]) .pst-bar-home .intro-ident strong { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  body.pst-home.x-pub .pst-bar-home .intro-top-acts .btn:hover { background: color-mix(in srgb, var(--pst-fg) 86%, var(--pst-bg)); }
  /* 메뉴·로그인 — 이미 포스터 글자색이라 색 대신 밑줄(지금 페이지 밑줄과 같은 1.5px · 7px). 공용 잉크 hover가 팀 색 위에서 묻히지 않게 */
  body.pst-home.x-pub .pst-bar-home :is(.intro-nav a, .intro-top-link):hover { color: var(--pst-fg); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
}

/* ── 하위 페이지 — 기본 템플릿과 같은 본문을 포스터 문법으로 ──
   머리 칸은 모두 목록과 같은 넓은 틀(1012) — 제목 아래 굵은 줄이 메뉴를 오가도 같은 자리에서 시작하고 끝난다. 소개 · 이벤트 · 공지 · 태그 모두 공용 틀(v5-public)이 이미 넓다 */
/* 페이지 머리 — 홈 섹션 머리와 같은 굵은 잉크 줄(2px) 위 제목. 소개는 머리 칸 전체 폭(::after는 > *가 아니라 1012) */
body.pst-sub.x-pub .intro-main .page-head { padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); }
body.pst-sub.x-pub .intro-main .about-hero::after { content: ''; display: block; margin-top: var(--s-7); border-top: 2px solid var(--ink); }
/* 소개의 가입 — 홈 가입 띠(종이 띠 ③)와 같은 문법: 판 · 테두리 없이 왼쪽 문장 + 오른쪽 xl 알약(화살표는 pstShell). 제목만 페이지 제목보다 한 단계 아래 */
body.pst-sub.x-pub .about-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-9); align-items: end; text-align: left; }
body.pst-sub.x-pub .about-cta h2 { grid-column: 1; max-width: 16em; font: 600 var(--t-title-2)/1.1 var(--font); letter-spacing: -0.04em; }
body.pst-sub.x-pub .about-cta .about-cta-sub { grid-column: 1; max-width: 36em; margin: var(--s-4) 0 0; color: var(--ink); }
body.pst-sub.x-pub .about-cta > :is(.btn, .chip) { grid-column: 2; grid-row: 1; align-self: end; margin: 0; } /* 홈 띠처럼 문장 덩어리의 아래 끝과 버튼 아래 끝이 한 줄 */
body.pst-sub.x-pub .about-cta > .about-cta-sub ~ :is(.btn, .chip) { grid-row: 1 / span 2; }
body.pst-sub.x-pub .about-cta > .btn { gap: 6px; height: var(--h-xl); padding: 0 28px; font: 500 var(--t-card)/1 var(--font); letter-spacing: -0.01em; }
body.pst-sub.x-pub .about-cta > .btn svg { width: var(--ic-lg); height: var(--ic-lg); margin-right: -6px; flex: none; }
/* 탭이 바로 붙는 머리(이벤트) — 탭 줄이 머리의 줄을 맡는다(기본 템플릿과 같이). 굵은 줄과 탭 줄이 겹쳐 쌓이지 않게 */
body.pst-sub.x-pub .intro-main .page-head:has(+ .page-body > .utabs:first-child) { padding-bottom: 0; border-bottom: 0; }
/* 빈 상태가 머리 바로 아래면 — 머리의 굵은 줄이 이미 윗선이다(공용 빈 상태의 헤어라인을 겹쳐 긋지 않는다) */
body.pst-sub.x-pub .intro-main .page-head + .page-body > .empty:first-child { border-top: 0; }

/* ── 포스터 ── */
.pst {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  background: var(--pst-bg) !important; /* 미리보기 브리지의 색 근사(히어로 그라디언트)가 포스터를 칠하지 않게 — 색이 바뀌면 부모가 새로 불러온다 */
  color: var(--pst-fg); overflow: hidden;
}
.pst .shero-logo { display: none; } /* 로고는 메뉴 줄에만 — 브리지가 만든 히어로 로고는 숨긴다 */
.pst-in {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; width: 100%;
  max-width: calc(var(--w-wide) + var(--gutter) * 2); margin: 0 auto; padding: calc(var(--bar-h) + var(--s-7)) var(--gutter) var(--s-9);
}
.pst .shero-kicker { margin: 0; font: 500 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; text-transform: none; color: var(--pst-fg); text-shadow: none; }
.pst-link { color: inherit; text-decoration: none; }
.pst-link:focus-visible { outline: 2px solid var(--pst-fg); outline-offset: 4px; border-radius: var(--r-xs); }
@media (hover: hover) and (pointer: fine) { .pst-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }

/* 바탕 사진 — 덮기 · 스크림(어둡게 도구 --bg-dim · 위쪽 메뉴와 아래 글 자리는 조금 더) · 효과 조각은 사진과 스크림 사이 */
.pst-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--pst-bg); }
.pst-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pst-bg > .shero-lqip { transition: none; }
.pst-bg > .fx-frags { --g: 1cqmax; --gmin: 5px; --frb: brightness(min(1.5, calc(1 / (1 - var(--bg-dim, .4))))); }
.pst-scrim {
  position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none;
  background: linear-gradient(180deg,
    rgb(23 21 15 / calc(var(--bg-dim, .4) + .16)) 0, rgb(23 21 15 / var(--bg-dim, .4)) 26%,
    rgb(23 21 15 / var(--bg-dim, .4)) 52%, rgb(23 21 15 / min(.86, calc(var(--bg-dim, .4) + .3))) 100%);
}
.pst[data-photo] :is(.pst-title, .pst-name, .pst-day, .pst-mon, .pst-wd) { text-shadow: 0 1px 24px rgb(23 21 15 / .28); }
.pst-page.is-preview .pst.is-bgedit .pst-bg { cursor: grab; }
.pst-page.is-preview .pst.is-bgdrag .pst-bg { cursor: grabbing; }

/* ① 다음 모임 — 머리 띠(다음 모임 · D-n / 작은 문구) → 큰 날짜(월 · 일 / 요일 · 시간) → 제목·장소·참가 + 버튼 */
.pst-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-6); flex-wrap: wrap; padding-bottom: var(--s-4); border-bottom: 1px solid var(--pst-line); }
.pst-top .shero-kicker { order: 2; }
.pst-eyebrow { margin: 0; font: 600 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; }
.pst-when { flex: 1; display: flex; align-items: stretch; justify-content: space-between; gap: var(--s-4) var(--s-7); padding: var(--s-6) 0 var(--s-7); } /* 대각선 구도 — 요일·시간은 오른쪽 위, 큰 날짜는 왼쪽 아래 */
.pst-date { display: flex; flex-direction: column; align-items: flex-start; align-self: flex-end; margin: 0; }
.pst-mon { font: 600 var(--t-title-2)/1 var(--font); letter-spacing: -0.02em; }
.pst-day {
  display: block; margin: var(--s-2) 0 0 -0.05em; font-weight: 600; line-height: .74; letter-spacing: -0.06em; white-space: nowrap; overflow-wrap: normal;
  font-size: clamp(160px, min(30vw, 100svh - 430px), 520px); /* 포스터 활자 — 폭과 남는 높이 중 작은 쪽까지 */
  font-variant-numeric: proportional-nums; /* 숫자 하나를 크게 쓰는 자리 — 고정폭이면 '1 0'처럼 벌어진다(날짜 타일·목록은 고정폭 그대로) */
}
.pst-wd { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; gap: var(--s-1); margin: 0; text-align: right; }
.pst-wd-d { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; }
.pst-wd-t { font: 400 var(--t-title-1)/1.1 var(--font); letter-spacing: 0; }
.pst-foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-6) var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--pst-line); }
.pst-foot-t { flex: 1 1 480px; min-width: 0; }
.pst-title { margin: 0; font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; text-wrap: balance; }
.pst-meta { margin: var(--s-3) 0 0; font: 400 var(--t-lead)/1.5 var(--font); letter-spacing: -0.012em; }
.pst-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ②③ 이름 포스터 — 머리 띠(①과 같은 자리) · 아래에 앉은 큰 이름(줄 폭 ÷ 이름 무게, 서버 nameSplit) · 한 줄 소개 · 버튼.
   좁은 칸(모자이크 옆·휴대폰)에서는 서버가 고른 띄어쓰기 자리에서 두 줄로(.pst-br) — 두 줄의 긴 쪽 무게(--pst-w2)로 크기를 고른다 */
.pst-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin-top: auto; padding-top: var(--s-9); }
.pst-name {
  --pst-wx: var(--pst-w, 6);
  max-width: 100%; margin: 0 0 0 -0.03em; font-weight: 600; line-height: .96; letter-spacing: -0.055em; /* 큰 활자의 글자 옆 여백만큼 당겨 머리 띠·한 줄 소개·버튼과 같은 세로선에(큰 날짜와 같은 광학 보정) */
  font-size: clamp(48px, calc(var(--pst-col) / var(--pst-wx)), 200px);
}
.pst-br { display: none; }
.pst[data-state="past"] .pst-name, .pst-name.is-2 { --pst-wx: var(--pst-w2, var(--pst-w, 6)); }
.pst[data-state="past"] .pst-br, .pst-name.is-2 .pst-br { display: inline; }
.pst .tagline { max-width: 26em; margin: var(--s-6) 0 0; font: 400 var(--t-headline)/1.45 var(--font); letter-spacing: -0.02em; color: var(--pst-fg); text-shadow: none; text-wrap: balance; }
.pst-text > .pst-cta { margin-top: var(--s-9); }

/* ③ 이름 포스터(모임·기록 0, 바탕 사진 없음) — 채울 게 이름·한 줄 소개·버튼뿐이라 화면 높이를 채우지 않는다.
   팀 색 판은 내용 높이만큼(이름 덩어리가 머리 띠 바로 아래) — 빈 색면으로 공간을 메우지 않는다 */
.pst[data-state="name"]:not([data-photo]) { min-height: 0; }
.pst[data-state="name"]:not([data-photo]) .pst-in { padding-bottom: var(--s-10); }
.pst[data-state="name"]:not([data-photo]) .pst-text { margin-top: 0; padding-top: var(--s-11); }

/* ② 모자이크 — 데스크톱은 오른쪽 절반(메뉴 줄 아래에서 바닥까지, 오른쪽 끝에 붙는다), 휴대폰은 이름 아래 전폭 */
.pst[data-state="past"] { --pst-col: calc(46vw - max(var(--gutter), (100vw - var(--w-wide)) / 2) - var(--s-8)); }
.pst[data-state="past"] .pst-in { position: static; }
.pst[data-state="past"] :is(.pst-top, .pst-text) { position: relative; z-index: 1; max-width: var(--pst-col); }
.pst-mosaic { position: absolute; top: calc(var(--bar-h) + var(--s-2)); right: 0; bottom: 0; left: 50%; z-index: 1; margin: 0; }
.pst-tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 3px; }
.pst-tile { position: relative; grid-column: span 6; grid-row: span 6; overflow: hidden; background: var(--pst-wash); }
.pst-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pst-mosaic[data-n="2"] .pst-tile { grid-row: span 3; }
.pst-mosaic[data-n="3"] .pst-tile:first-child { grid-row: span 4; }
.pst-mosaic[data-n="3"] .pst-tile:not(:first-child) { grid-column: span 3; grid-row: span 2; }
.pst-mosaic[data-n="4"] .pst-tile { grid-column: span 3; grid-row: span 3; }
.pst-mosaic[data-n="5"] .pst-tile:nth-child(1) { grid-column: span 4; grid-row: span 4; }
.pst-mosaic[data-n="5"] .pst-tile:nth-child(2), .pst-mosaic[data-n="5"] .pst-tile:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.pst-mosaic[data-n="5"] .pst-tile:nth-child(3) { grid-column: 5 / span 2; grid-row: 3 / span 2; }
.pst-mosaic[data-n="5"] .pst-tile:nth-child(4), .pst-mosaic[data-n="5"] .pst-tile:nth-child(5) { grid-column: span 3; grid-row: span 2; }
.pst-mosaic figcaption { position: absolute; left: var(--s-5); bottom: var(--s-5); right: var(--s-5); z-index: 2; display: flex; }
.pst-mcap {
  display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; height: var(--h-md); padding: 0 var(--s-3) 0 var(--s-4);
  border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  font: 500 var(--t-footnote)/1 var(--font); color: var(--ink); text-decoration: none; box-shadow: var(--e-1);
  transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
.pst-mcap-k { font-weight: 600; }
.pst-mcap strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink-2); }
.pst-mcap svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; color: var(--ink-3); }
.pst-mcap:active { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) { .pst-mcap:hover { background: var(--paper); } }

/* 서체 — 포스터 활자(큰 날짜·월·시간·팀 이름·모임 제목)만 글꼴 도구를 따른다 */
.pst[data-font="display"] :is(.pst-day, .pst-mon, .pst-wd-t, .pst-name) { font-family: 'Cal Sans', var(--font); letter-spacing: -0.02em; }
.pst[data-font="display"] .pst-day { letter-spacing: -0.035em; }
.pst[data-font="display"] .pst-wd-t { font-variant-numeric: normal; } /* Cal Sans의 고정폭 쌍점은 '15 : 00'처럼 벌어진다 — 한 줄짜리 시각은 원래 폭으로 */
.pst[data-font="grotesk"] :is(.pst-day, .pst-mon, .pst-wd-t, .pst-name, .pst-title) { font-family: var(--font-grotesk); font-weight: 700; }
/* 새 서체 — 큰 날짜·제호는 body.sf(장식 서체까지) · 달·행사 제목은 body.sf-h(윤곽선·헤어라인 빼고) · 요일·시각은 body.sf-s(작은 자리에 맞는 서체만) */
.pst[data-font="serif"] :is(.pst-day, .pst-mon, .pst-wd-d, .pst-wd-t, .pst-name, .pst-title), body.sf .pst :is(.pst-day, .pst-name), body.sf-h .pst :is(.pst-mon, .pst-title), body.sf-s .pst :is(.pst-wd-d, .pst-wd-t) { font-family: var(--site-font); font-weight: var(--site-w); letter-spacing: calc(var(--site-track) - 0.01em); word-spacing: var(--site-ws, normal); }
/* 글꼴마다 숫자 윗선·기준선 자리가 달라 줄 높이·간격을 맞춘다 — 세리프는 기준선이 낮아(큰 descent) 줄 높이를 늘려야 숫자가 아래 줄에 닿지 않는다 */
.pst[data-font="serif"] .pst-day { line-height: .9; letter-spacing: -0.05em; }
.pst[data-font="grotesk"] .pst-day { margin-top: var(--s-5); }
/* 새 서체 — 옛 숫자(oldstyle)가 기본인 서체(Playfair 등)는 '5'·'9'가 아래로 내려가 날짜 아래 헤어라인·행사 제목에 닿는다 → 큰 날짜·시각은 라이닝 숫자 */
body.sf .pst .pst-day { font-variant-numeric: lining-nums proportional-nums; }
body.sf .pst :is(.pst-mon, .pst-wd-d, .pst-wd-t) { font-variant-numeric: lining-nums; }

/* 미리보기 — 빈 작은 문구 자리(고를 때만) */
.pst-page.is-preview .pst .shero-kicker.is-ghost { display: inline-block; padding: 3px 12px; border: calc(1px / var(--pick-s, 1)) dashed var(--pst-line); border-radius: var(--r-pill); opacity: .8; }

/* ── 포스터 아래 섹션 — 흰 종이 위 잉크. 머리는 굵은 잉크 줄(2px) 위 제목 + 오른쪽 '모두 보기' ── */
.pst-wrap { max-width: calc(var(--w-wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.pst-sec:not(.sec) { padding: var(--s-11) 0 0; } /* 포스터 아래 두 목록 — 블록(.sec)의 리듬은 v5-public 그대로 */
.pst-sh { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s-1) var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.pst-sh-k { flex-basis: 100%; font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
.pst-sh h2 { margin: 0; font: 600 var(--t-title-2)/1.1 var(--font); letter-spacing: -0.035em; color: var(--ink); }
.pst-sh-n { margin-left: var(--s-1); font-weight: 500; color: var(--ink-3); }
/* '모두 보기'가 없는 머리 — 있는 머리와 같은 높이·제목 자리(44 누름 칸의 기준선을 빈 글자로). 섹션마다 제목과 줄 사이가 달라지지 않게 */
.pst-sh:not(:has(> .pst-more))::after { content: '\200b'; display: inline-flex; align-items: center; min-height: var(--hit); font: 500 var(--t-ui)/1 var(--font); }
.pst-more { display: inline-flex; align-items: center; gap: 2px; min-height: var(--hit); font: 500 var(--t-ui)/1 var(--font); color: var(--ink-2); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.pst-more svg { width: var(--ic-sm); height: var(--ic-sm); transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pst-more:hover { color: var(--ink); } .pst-more:hover svg { translate: 2px 0; } }

/* 블록의 섹션 머리(소식·새 블록) — 포스터 아래 목록과 같은 문법(굵은 잉크 줄 위 제목) */
body.pst-page.x-pub [data-blocks] .sec-head { align-items: baseline; padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
body.pst-page.x-pub [data-blocks] .sec-head h2 { font: 600 var(--t-title-2)/1.1 var(--font); letter-spacing: -0.035em; }
body.pst-page.x-pub [data-blocks] .sec-head .sec-more { min-height: var(--hit); }

/* 다가오는 모임·일정 — 날짜 블록(64, v5 날짜 타일) · 제목 · 요일·시간·장소 · 참가 · 화살표. 행 사이 헤어라인 */
.pst-rows { margin: 0; padding: 0; list-style: none; }
.pst-rows > li + li { border-top: 1px solid var(--line); }
.pst-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto var(--ic-sm); align-items: center; gap: var(--s-5);
  padding: var(--s-4) 0; color: inherit; text-decoration: none; transition: scale var(--dur-3) var(--spring);
}
.pst-row:active { scale: var(--m-press-card); transition-duration: var(--dur-1); }
.pst-row:focus-visible { outline-offset: 2px; border-radius: var(--r-md); }
.pst-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pst-row-t { font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.pst-row-s { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
.pst-row-n { display: inline-flex; align-items: baseline; white-space: nowrap; font: 400 var(--t-footnote)/1 var(--font); color: var(--ink-3); }
.pst-row-n b { font: 600 var(--t-body)/1 var(--font); color: var(--ink); }
.pst-row-k { height: var(--h-xs); padding: 0 10px; font: 500 var(--t-caption)/1 var(--font); background: var(--wash-2); color: var(--ink-2); }
.pst-row-go { display: inline-flex; color: var(--ink-4); transition: color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out); }
.pst-row-go svg { width: var(--ic-sm); height: var(--ic-sm); }
@media (hover: hover) and (pointer: fine) {
  .pst-row:hover .pst-row-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: var(--line-3); }
  .pst-row:hover .pst-row-go { color: var(--ink); translate: 2px 0; }
}

/* 소식 — 다가오는 모임과 같은 행(날짜 칸만 글자). 표지는 있는 글만 64 썸네일.
   날짜는 메타 — 제목(20/600 잉크)보다 한 단계 아래(17/500 ink-2), 제목과 같은 기준선. 지난해 글의 연도는 아래 작은 줄(고정 칸이라 행마다 제목 x가 같다) */
.pst-nd { width: 64px; font: 500 var(--t-card)/1.3 var(--font); letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.pst-nd-y { display: block; font: 500 var(--t-caption)/1.45 var(--font); color: var(--ink-3); }
.pst-nrow > :is(.pst-nd, .pst-row-main) { align-self: first baseline; }
.pst-nrow .pst-row-s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } /* 한 줄 요약 — 행 높이가 글 길이로 들쭉날쭉하지 않게 */
.pst-nph { position: relative; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-md); background: var(--canvas-2); }
.pst-nph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.pst-page.x-pub .pst-news .pst-rows { margin-top: var(--s-2); }

/* 지난 모임 기록 — 달마다 한 줄(왼쪽 달 · 오른쪽 기록 3칸). 사진은 있을 때만(없으면 글만) */
.pst-mo { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-6); padding: var(--s-7) 0; }
.pst-mo + .pst-mo { border-top: 1px solid var(--line); }
.pst-mo-h { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; }
.pst-mo-h b { font: 600 var(--t-title-2)/1.1 var(--font); letter-spacing: -0.035em; color: var(--ink); }
.pst-mo-h span { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
.pst-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); margin: 0; padding: 0; list-style: none; }
.pst-rec { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; color: inherit; text-decoration: none; }
.pst-rec-ph { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--canvas-2); transition: scale var(--dur-3) var(--spring); }
.pst-rec-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
.pst-rec-b { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.pst-rec-m { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
.pst-rec-t { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
.pst-rec-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 400 var(--t-body)/1.65 var(--font); letter-spacing: -0.01em; color: var(--ink-2); }
.pst-rec:active .pst-rec-ph { scale: var(--m-press-card); transition-duration: var(--dur-1); }
.pst-rec:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
@media (hover: hover) and (pointer: fine) {
  .pst-rec:hover .pst-rec-ph img { scale: 1.03; }
  .pst-rec:hover .pst-rec-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: var(--line-3); }
}

/* 멤버 얼굴 줄 — 세로형 카드 축약(4:5 사진 · 이름 · 역할) 8칸. 더 있으면 '+n' 칸 */
.pst-face-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.pst-face { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.pst-face .mcard-ph { width: 100%; margin-bottom: var(--s-2); } /* 모서리는 멤버 · 소개 카드와 같은 r-xl(app.css .mcard-ph) — 같은 사람 사진이 페이지를 오가도 같은 모양 */
.pst-face-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-ui)/1.45 var(--font); color: var(--ink); }
.pst-face-r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
.pst-face-plus { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: var(--s-2); border-radius: var(--r-xl); background: var(--wash-2); font: 600 var(--t-title-3)/1 var(--font); color: var(--ink-2); }
.pst-face:active .mcard-ph, .pst-face:active .pst-face-plus { scale: var(--m-press-card); transition: scale var(--dur-1) var(--ease-out); }
.pst-face:focus-visible { outline-offset: 4px; border-radius: var(--r-xl); }
@media (hover: hover) and (pointer: fine) {
  .pst-face .mcard-ph { transition: translate var(--dur-2) var(--ease-out), scale var(--dur-3) var(--spring); }
  .pst-face:hover .mcard-ph { translate: 0 -2px; }
  .pst-face:hover .mcard-ph img { scale: 1.03; }
}

/* 가입 띠 → 팀 색 띠(포스터와 같은 바탕·글자색). 왼쪽 큰 문구, 오른쪽 버튼 */
body.pst-page.x-pub .cta-band.pst-band { margin-top: var(--s-11); padding: var(--s-11) 0; text-align: left; background: var(--pst-bg); color: var(--pst-fg); }
body.pst-page.x-pub [data-blocks] > [data-block]:first-of-type > .cta-band.pst-band:first-child { padding-top: var(--s-11); }
.pst-band .pst-wrap { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-7) var(--s-9); }
.pst-band-t { flex: 1 1 520px; min-width: 0; }
body.pst-page.x-pub .pst-band h2 { max-width: 16em; margin: 0; font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; color: var(--pst-fg); text-wrap: balance; }
body.pst-page.x-pub .pst-band p { max-width: 36em; margin: var(--s-4) 0 0; font: 400 var(--t-lead)/1.65 var(--font); color: var(--pst-fg); }
body.pst-page.x-pub.is-preview .pst-band { pointer-events: none; }
/* ③ — 포스터가 이미 팀 색 판에 가입 버튼을 싣고 있어 가입 띠는 종이 + 잉크(팀 색 판이 한 화면에 두 번 나오지 않게) */
body.pst-page.x-pub .cta-band.pst-band.is-paper { --pst-bg: var(--paper); --pst-fg: var(--ink); --pst-on: #fff; --pst-wash: var(--wash-2); margin-top: 0; padding: var(--s-10) 0; }
body.pst-page.x-pub .pst-band.is-paper h2 { font-size: var(--t-title-1); letter-spacing: -0.04em; }
/* 팀 색 가입 띠 바로 뒤 푸터 — 띠가 끝을 맺으니 푸터 윗선은 뺀다(종이 띠 ③ 뒤에는 다른 페이지처럼 윗선을 둔다) */
body.pst-page.x-pub [data-blocks]:has(> :last-child > .pst-band:not(.is-paper):last-child) + .intro-foot { border-top: 0; }

/* ── 반응형 ── */
@media (max-width: 879px) {
  /* 메뉴가 바 아래 한 줄(44)로 내려온다 — 포스터 글은 그 아래부터 */
  .pst-page:has(.pst-bar-home .intro-nav > a:not([hidden])) .pst-in { padding-top: calc(var(--bar-h) + var(--hit) + var(--s-5)); }
  .pst-wd-d, .pst-wd-t { font-size: var(--t-title-2); }
  .pst-foot { flex-direction: column; align-items: stretch; }
  .pst-foot-t { flex: none; }
  .pst-cta .pst-btn { flex: 1 1 0; }
  /* ② — 모자이크는 이름·버튼 아래 전폭(바닥에 붙는다) */
  .pst[data-state="past"] { --pst-col: calc(100vw - var(--gutter) * 2); }
  .pst[data-state="past"] .pst-in { position: relative; padding-bottom: 0; }
  .pst[data-state="past"] :is(.pst-top, .pst-text) { max-width: none; }
  .pst[data-state="past"] .pst-text { padding-bottom: var(--s-8); }
  .pst-name { --pst-wx: var(--pst-w2, var(--pst-w, 6)); }
  .pst-br { display: inline; }
  .pst-mosaic { position: relative; top: auto; right: auto; bottom: auto; left: auto; margin: 0 calc(var(--gutter) * -1); aspect-ratio: 4 / 3; }
  .pst-mosaic figcaption { left: var(--gutter); right: var(--gutter); bottom: var(--s-4); }
  .pst-face-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pst-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pst-mo { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 699px) {
  body.pst-page.x-pub .pst-bar .intro-ident strong { font-size: var(--t-headline); }
  .pst-in { padding-bottom: var(--s-7); }
  .pst-top { padding-bottom: var(--s-3); }
  .pst-eyebrow { font-size: var(--t-footnote); }
  .pst-when { padding: var(--s-6) 0 var(--s-5); gap: var(--s-4); }
  .pst-mon { font-size: var(--t-title-3); }
  /* 휴대폰 — 요일·시간이 위, 큰 날짜가 아래 줄을 혼자 쓴다(두 자리 날짜도 폭 안에) */
  .pst-when { flex-direction: column; }
  .pst-date { margin-top: auto; align-self: flex-start; }
  .pst-wd { order: -1; align-self: flex-end; }
  .pst-day { margin-top: var(--s-1); font-size: clamp(112px, min(76vw, 100svh - 470px), 300px); }
  .pst-day[data-d="2"] { font-size: clamp(112px, min(58vw, 100svh - 470px), 260px); } /* 두 자리 날짜 — 한 줄에(숫자 폭이 넓은 Grotesk는 조금 더 작게) */
  .pst[data-font="grotesk"] .pst-day[data-d="2"] { font-size: clamp(112px, min(48vw, 100svh - 470px), 220px); }
  .pst-wd-d, .pst-wd-t { font-size: var(--t-title-2); }
  .pst-foot { gap: var(--s-5); padding-top: var(--s-5); }
  .pst-meta { font-size: var(--t-body); }
  .pst-btn { height: var(--h-lg); padding: 0 22px; font-size: var(--t-body); }
  .pst-btn svg { width: var(--ic-md); height: var(--ic-md); }
  /* 포스터의 전폭 주 행동 — 가입 띠와 같은 xl 56 · 17(v5-public '모바일 전폭 주 행동은 xl 56') */
  :is(.pst-text, .pst-foot) > .pst-cta .pst-btn { height: var(--h-xl); }
  :is(.pst-text, .pst-foot) > .pst-cta .pst-btn:not(.is-note) { font-size: var(--t-card); }
  .pst-name { font-size: clamp(44px, calc(var(--pst-col) / var(--pst-wx)), 120px); }
  .pst .tagline { margin-top: var(--s-4); font-size: var(--t-card); }
  .pst-text { padding-top: var(--s-8); }
  .pst[data-state="name"]:not([data-photo]) .pst-text { padding-top: var(--s-10); }
  .pst[data-state="name"]:not([data-photo]) .pst-in { padding-bottom: var(--s-9); }
  body.pst-page.x-pub .cta-band.pst-band.is-paper { margin-top: 0; padding: var(--s-9) 0; }
  body.pst-page.x-pub .pst-band.is-paper h2 { font-size: var(--t-title-1); }
  .pst-text > .pst-cta { width: 100%; margin-top: var(--s-7); }
  .pst-mcap { height: var(--h-sm); padding: 0 var(--s-2) 0 var(--s-3); }
  .pst-sec:not(.sec) { padding-top: var(--s-10); }
  .pst-sh h2 { font-size: var(--t-title-3); }
  .pst-row { grid-template-columns: auto minmax(0, 1fr) var(--ic-sm); gap: var(--s-4); }
  .pst-row-t { font-size: var(--t-card); }
  .pst-row-n, .pst-row-k { grid-column: 2; grid-row: 2; justify-self: start; margin-top: -2px; }
  .pst-row .mu-date { grid-row: span 2; }
  .pst-row-go { grid-column: 3; grid-row: 1 / span 2; }
  .pst-nrow > span:nth-child(3) { display: none; } /* 휴대폰 — 소식 썸네일 칸은 접는다(날짜 · 제목 · 화살표) */
  .pst-nrow .pst-row-go { grid-row: 1; } /* 소식 행은 한 줄 — 두 줄에 걸치면 빈 둘째 줄 + 사이 간격만큼 행 아래가 위보다 16 넓어진다 */
  .pst-nd { width: 48px; font-size: var(--t-ui); }
  .pst-nrow .pst-row-s { -webkit-line-clamp: 2; }
  .pst-mo { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; }
  .pst-mo-h { flex-direction: row; align-items: baseline; gap: var(--s-2); }
  .pst-mo-h b { font-size: var(--t-title-3); }
  .pst-recs { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .pst-rec.has-ph { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: var(--s-4); }
  .pst-rec.has-ph .pst-rec-ph { aspect-ratio: 1; }
  /* 얼굴 줄 — 가로로 넘기는 한 줄(스냅) */
  .pst-face-row { display: flex; gap: var(--s-3); margin: var(--s-5) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pst-face-row::-webkit-scrollbar { display: none; }
  .pst-face-row > li { flex: 0 0 104px; scroll-snap-align: start; }
  body.pst-page.x-pub .cta-band.pst-band { margin-top: var(--s-10); padding: var(--s-10) 0; }
  body.pst-page.x-pub .pst-band h2 { font-size: var(--t-display); }
  .pst-band .pst-btn { width: 100%; height: var(--h-xl); font-size: var(--t-card); }
  body.pst-sub.x-pub .about-cta { grid-template-columns: minmax(0, 1fr); }
  body.pst-sub.x-pub .about-cta > :is(.btn, .chip), body.pst-sub.x-pub .about-cta > .about-cta-sub ~ :is(.btn, .chip) { grid-column: 1; grid-row: auto; margin-top: var(--s-7); }
}