/* ════════════════════════════════════════════════════════════════════════
   v5-public.css — 공개 표면 레이어(P4, SPEC §7 P4). body.x-pub 에서만 이긴다.
   대상: 팀 공개 사이트(/:slug/intro*)·잠금·가입·방문자 소모임 홈, 모집 공고·지원서, 체크인(참석자), go.
   layout()이 bodyClass에 x-pub가 있을 때 기능 CSS 뒤에 싣는다. 값은 v5.css 토큰만 쓴다(리터럴 색·px·ms 없음).
   절:
     §0 셸 — 바탕·팀색 제한(--primary 잉크) · PublicTopBar(.pub-bar) · 본문 틀(폭 wide/main/narrow · 위 96/48) · 푸터
     §1 공통 — 버튼 두 종류 · 칩 · 입력 · 페이지 머리 · 섹션 머리 · eyebrow · 링크
     §2 랜딩 블록 — 히어로 경계 · 소식 마퀴 · 일정 행 · 운영진(MemberCard) · 가입 띠 · 새 블록
     §3 목록 — 저널(jhero·jcard) · 멤버 · 모임 행 · 밑줄 탭
     §4 상세 — 소개 · 기사 · 프로필 · 모임·일정 상세 · 지난 모임 기록
     §5 흐름 — 가입 · 잠금 · 방문자 소모임
     §6 반응형(≤879 · ≤699)
     §7 reduced-motion
   ════════════════════════════════════════════════════════════════════════ */

/* ── §0 셸 ─────────────────────────────────────────────────────────── */
/* 팀색은 히어로 장면·로고·썸네일 기본 배경에만(§2.1). 히어로 밖 주 버튼·링크·칩은 잉크 — --accent*는 히어로가 쓰므로 건드리지 않는다 */
body.x-pub { --primary: var(--ink); --primary-fg: #fff; --link: var(--ink); background: var(--paper); color: var(--ink); }

/* PublicTopBar — 64/56, 흰 바탕, 선 없음, 로고 brightness(0). 스크롤하면 유리(선은 끝까지 없음). 무대 고정(vt-bar, v5.css) */
body.x-pub .pub-bar {
  position: sticky; top: 0; left: auto; right: auto; z-index: var(--z-bar);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  height: var(--bar-h); min-height: 0; padding: 0 var(--gutter);
  background: var(--paper); border: 0; border-bottom: 0; box-shadow: none;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
body.x-pub .pub-bar .intro-ident { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; min-height: var(--hit); color: var(--ink); }
body.x-pub .pub-bar .intro-ident strong { font: 600 var(--t-body)/1.2 var(--font); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.x-pub .pub-bar .intro-logo { flex: none; width: 28px; height: 28px; object-fit: contain; border-radius: 0; background: none; padding: 0; filter: brightness(0); }
/* 로고가 없는 팀 — 이니셜 잉크 타일(글자까지 먹지 않게 filter 없음) */
body.x-pub .pub-bar .intro-logo.intro-logo-txt { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--ink); color: #fff; font: 600 var(--t-footnote)/1 var(--font); filter: none; }
/* 잉크 처리는 '흰' 스타일(data-style 없음 — 투명 PNG 실루엣)에만. Studio에서 '원본'·'타일'을 고른 로고는 그 색 그대로 둔다
   (불투명 JPG를 brightness(0)하면 검은 사각형이 된다 — base 동작 유지). 타일은 흰 바탕 위라 테두리 대신 선 1px로 윤곽 */
body.x-pub .pub-bar:not(.pub-bar-hero) .intro-logo:is([data-style="original"], [data-style="tile"]) { filter: none; }
body.x-pub .pub-bar:not(.pub-bar-hero) .intro-logo[data-style="tile"] { background: #fff; padding: 3px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
/* 내비 — 14/500 ink-2, 지금 페이지는 잉크 + 1.5px 밑줄(플랫폼 헤더와 같은 문법) */
body.x-pub .pub-bar .intro-nav { position: absolute; left: 50%; top: 0; translate: -50% 0; transform: none; display: flex; align-items: center; gap: var(--s-6); height: var(--bar-h); }
body.x-pub .pub-bar .intro-nav a {
  position: relative; display: inline-flex; align-items: center; height: var(--hit);
  font: 500 var(--t-ui)/1 var(--font); letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap;
  text-decoration: none; transition: color var(--dur-1) var(--ease-out);
}
body.x-pub .pub-bar .intro-nav a.on { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
body.x-pub .pub-bar .intro-nav a[data-nav-ext]::after { content: none; }
@media (hover: hover) and (pointer: fine) { body.x-pub .pub-bar .intro-nav a:hover { color: var(--ink); } }
body.x-pub .pub-bar .intro-top-acts { display: flex; align-items: center; gap: var(--s-2); flex: none; }
body.x-pub .pub-bar .intro-top-link {
  display: inline-flex; align-items: center; height: var(--hit); padding: 0 var(--s-2);
  font: 500 var(--t-ui)/1 var(--font); color: var(--ink-2); text-shadow: none; transition: color var(--dur-1) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { body.x-pub .pub-bar .intro-top-link:hover { color: var(--ink); } }
/* 오른쪽 행동은 하나 — md 40 잉크 알약 */
body.x-pub .pub-bar .intro-top-acts .btn { height: var(--h-md); padding: 0 18px; font: 500 var(--t-ui)/1 var(--font); border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { body.x-pub .pub-bar:not(.pub-bar-hero) .intro-top-acts .btn:hover { background: var(--ink-hover); } }
body.x-pub .pub-bar .intro-top-acts .chip { height: var(--h-md); padding: 0 var(--s-4); font: 500 var(--t-footnote)/1 var(--font); background: var(--wash-2); color: var(--ink-2); }
/* 체크인·go — 내비 없이 로고·팀 이름, 오른쪽은 테두리 없는 13/600 ink-3 텍스트 */
body.x-pub .pub-bar .pub-kicker { font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }

/* 랜딩(팀 공개 홈) — 같은 바가 히어로 위에 투명하게 선다: 흰 글자·흰 로고(팀이 고른 로고 표현은 그대로), 스크롤과 함께 지나간다 */
body.x-pub .pub-bar.pub-bar-hero {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.x-pub .pub-bar-hero .intro-ident { color: #fff; }
body.x-pub .pub-bar-hero .intro-logo:not(.intro-logo-txt) { filter: brightness(0) invert(1); }
body.x-pub .pub-bar-hero .intro-logo[data-style="original"], body.x-pub .pub-bar-hero .intro-logo[data-style="tile"] { filter: none; }
body.x-pub .pub-bar-hero .intro-logo[data-style="tile"] { background: #fff; padding: 3px; border-radius: var(--r-sm); }
body.x-pub .pub-bar-hero .intro-logo.intro-logo-txt { background: var(--d-wash-3); color: #fff; }
body.x-pub .pub-bar-hero .intro-nav a { color: #fff; }

body.x-pub .pub-bar-hero .intro-top-link { color: #fff; }
body.x-pub .pub-bar-hero .intro-top-acts .btn { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { body.x-pub .pub-bar-hero .intro-top-acts .btn:hover { background: rgba(255, 255, 255, .88); } }
body.x-pub .pub-bar-hero .intro-top-acts .chip { background: var(--d-wash-3); color: #fff; }
body.x-pub .pub-bar-hero :focus-visible { outline: var(--focus-dark); }
/* 사진 장면 — 바 뒤 140px 스크림(밝은 사진에서도 흰 메뉴가 읽힌다) */
body.x-pub .pub-bar-hero:has(+ .shero[data-fx="image"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 12, .5), rgba(8, 8, 12, 0));
}

/* 본문 틀 — 바 아래 → h1 96(≤699 48), 바닥 96(≤699 64). 안쪽 틀의 제각각 위 여백은 0으로 */
body.x-pub .intro-main { min-height: calc(100svh - var(--bar-h) - 160px); padding: var(--s-11) 0 var(--s-11); }
body.x-pub .intro-main :is(.page-head, .about-hero, .auth-wrap, .gate-page, .pf, .art, .cx-home, .cx-head) { padding-top: 0; margin-top: 0; }
body.x-pub .intro-main > .article > .art { padding-top: 0; }
/* 폭 — 목록·그리드 wide 1012 · 상세·읽기 main 720 · 좁은 흐름 narrow 400 (전부 가운데) */
body.x-pub .intro-main .container { max-width: calc(var(--w-wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
body.x-pub .intro-main .container.c-main,
body.x-pub .intro-main .container-narrow,
body.x-pub .intro-main .pf { max-width: calc(var(--w-main) + var(--gutter) * 2); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
body.x-pub .intro-main .container > .pf { padding-left: 0; padding-right: 0; }
body.x-pub .intro-main .art { --art-w: var(--w-main); --col: var(--w-main); --fig: var(--w-main); --art-pad: var(--gutter); max-width: calc(var(--w-main) + var(--gutter) * 2); }

/* 푸터 — 13 ink-3, 워드마크만 Cal Sans */
body.x-pub .intro-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 var(--s-2); padding: var(--s-9) var(--gutter) var(--s-9); border-top: 1px solid var(--line); text-align: center; }
body.x-pub .intro-foot a, body.x-pub .intro-foot span { display: inline-block; padding: 0 2px; font: 400 var(--t-footnote)/var(--hit) var(--font); color: var(--ink-3); }
body.x-pub .intro-foot a { transition: color var(--dur-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.x-pub .intro-foot a:hover { color: var(--ink); } }
body.x-pub .intro-foot strong { font-family: var(--font-logo); font-weight: 600; color: var(--ink-2); }
/* 한 줄 — 항목 사이 구분점 하나의 문법(앞 항목 뒤가 아니라 다음 항목 앞에). '문의'는 span 안의 링크라 줄 높이를 한 번만(안쪽 a는 inline) */
body.x-pub .intro-foot > :not(.intro-foot-note) + :not(.intro-foot-note)::before { content: '·'; display: inline-block; margin: 0 var(--s-2) 0 0; color: var(--ink-4); }
body.x-pub .intro-foot-links::after { content: none; }
body.x-pub .intro-foot > .intro-foot-note { flex: 0 0 100%; margin: 0 auto; line-height: 1.6; padding-bottom: var(--s-2); }
body.x-pub .intro-foot .intro-contact { margin: 0; } /* app.css의 아래 여백(10px)이 flex 줄에서 '문의'를 5px 띄웠다 */
body.x-pub .intro-foot .intro-contact a { display: inline; margin-left: 4px; padding: 0; line-height: inherit; min-width: 0; }

/* ── §1 공통 ───────────────────────────────────────────────────────── */
/* 버튼 두 종류 — Primary 잉크 알약(히어로 위는 흰 알약, 모바일 전폭은 xl) · Secondary 워시. 팀색 채움 없음 */
body.x-pub :is(.intro-main, [data-blocks], .cta-band) .btn:not(.btn-ghost):not(.btn-danger):not(.share-btn) { background: var(--ink); color: #fff; border: 0; box-shadow: none; }
body.x-pub :is(.intro-main, [data-blocks], .cta-band) .btn.btn-ghost { background: var(--wash-2); color: var(--ink); border: 0; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  body.x-pub :is(.intro-main, [data-blocks], .cta-band) .btn:not(.btn-ghost):not(.btn-danger):not(.share-btn):not(:disabled):hover { background: var(--ink-hover); }
  body.x-pub :is(.intro-main, [data-blocks], .cta-band) .btn.btn-ghost:hover { background: var(--wash-3); }
}
body.x-pub .btn { border-radius: var(--r-pill); font-weight: 500; }
body.x-pub .btn:disabled, body.x-pub .btn[aria-disabled="true"] { background: var(--wash-2); color: var(--ink-4); }
body.x-pub .btn svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
body.x-pub .btn-lg svg { width: var(--ic-md); height: var(--ic-md); }
body.x-pub .btn:has(svg:last-child):not(:has(svg:first-child)) { padding-right: 14px; }

/* 칩 — 상태 칩 24h 워시(팀색 칩·태그 폐지). #태그도 같은 칩 500 */
body.x-pub :is(.chip-tag, .chip-accent, .chip-soft) { background: var(--wash-2); color: var(--ink-2); border: 0; font-weight: 500; }
body.x-pub .chip.strong { background: var(--ink); color: #fff; }
body.x-pub .chip.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
body.x-pub a.chip { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring); }
@media (hover: hover) and (pointer: fine) { body.x-pub a.chip:hover { background: var(--wash-3); color: var(--ink); } }

/* 입력 — 48 · r12 · 흰 바탕 · 16px(≤699). 라벨 13/600, 힌트 13 ink-3 */
body.x-pub .field { margin-bottom: var(--s-6); }
body.x-pub .field > label, body.x-pub .field > .field-label { display: block; margin-bottom: var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink); }
body.x-pub .field .opt { font: 400 var(--t-caption)/1 var(--font); color: var(--ink-3); }
body.x-pub .hint { margin-top: var(--s-2); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .input { height: var(--h-lg); padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--paper); font: 400 var(--t-body)/1.45 var(--font); color: var(--ink); box-shadow: none; }
body.x-pub textarea.input { height: auto; min-height: 120px; padding: var(--s-3) var(--s-4); line-height: 1.6; }
body.x-pub .input:focus { box-shadow: var(--ring-input); outline: none; }
body.x-pub .input-code { font-family: var(--font-mono); letter-spacing: 0; text-transform: uppercase; }
body.x-pub .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
body.x-pub .form-row > .field { margin-bottom: var(--s-6); }

/* 페이지 머리 — 공개 하위 h1 title-1(40/30), 리드 17 ink-2 · 위 16, 머리 → 본문 48 */
body.x-pub .intro-main .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: end; margin: 0 0 var(--s-9); padding: 0; border: 0; }
body.x-pub .intro-main .page-head > * { grid-column: 1; min-width: 0; }
body.x-pub .intro-main .page-head > :is(.page-actions, .page-tile) { grid-column: 2; grid-row: 1 / span 4; }
body.x-pub .intro-main .page-head > .page-tile { align-self: start; }
body.x-pub .page-title, body.x-pub .intro-main .page-head h1 {
  margin: 0; font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance;
}
/* 공고·체크인 상태 제목은 display 56/36(§2.2), 흐름 안 제목 간격은 각 머리 규칙대로 */
body.x-pub .rc-post .rc-hero .page-title, body.x-pub .ck-m:not(.go-m) .page-title { font-size: var(--t-display); letter-spacing: -0.045em; }
body.x-pub .rc-hero .page-title { margin-top: var(--s-6); }
body.x-pub .rc-hero-sm .page-title { margin-top: 0; }
body.x-pub .rc-apply-head .page-title { margin-top: var(--s-2); }
body.x-pub .rc-done .page-title { margin-top: var(--s-6); }
body.x-pub .page-title .sec-count { font: 400 var(--t-title-3)/1 var(--font); letter-spacing: 0; color: var(--ink-3); margin-left: var(--s-2); vertical-align: 0.1em; }
body.x-pub .page-lead, body.x-pub .intro-main .page-head > p { margin: var(--s-4) 0 0; max-width: 560px; font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: pretty; }
body.x-pub .page-body { padding: 0; }

/* 섹션 머리 — 공개 페이지 안 h2 title-3(24/20). 작은 제목은 한국어 eyebrow 13/600 ink-3(모노·대문자·자간 폐지) */
body.x-pub .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin: 0 0 var(--s-6); }
body.x-pub .sec-head h2 { margin: 0; font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); }
body.x-pub .sec-head .sec-count, body.x-pub .sec-count { font: 400 var(--t-footnote)/1 var(--font); letter-spacing: 0; color: var(--ink-3); margin-left: var(--s-1); }
body.x-pub :is(.sec-eyebrow, .promo-eyebrow, .pf-sec-eyebrow) { margin: 0 0 var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
body.x-pub .sec-acts { display: flex; align-items: center; gap: var(--s-2); flex: none; }
body.x-pub .sec-more {
  position: relative; display: inline-flex; align-items: center; gap: 2px; height: var(--hit); flex: none;
  font: 500 var(--t-ui)/1 var(--font); color: var(--ink-2); white-space: nowrap; transition: color var(--dur-1) var(--ease-out);
}
body.x-pub .sec-more svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.x-pub .sec-more:hover { color: var(--ink); } body.x-pub .sec-more:hover svg { translate: 2px 0; } }
body.x-pub .sec-head-gap { margin-top: var(--s-10); }
body.x-pub .dot:not(:empty) { margin: 0 6px; color: var(--ink-4); }
body.x-pub .num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
body.x-pub .hint a, body.x-pub .auth-alt a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); }

/* 빈 상태 — 점선 상자 없이 가운데(§4.8) */
body.x-pub .empty { border: 0; background: none; box-shadow: none; }

/* ── §2 랜딩 블록 ──────────────────────────────────────────────────── */
/* 히어로 장면 경계 — 하드 엣지(흰 멜트 삭제), 첫 섹션 위 96. 장면 안(.shero)은 보호 구역이라 경계만 */
body.x-pub .shero[data-glass-hero]::after { content: none; }
/* /teams 카드 로고 → 팀 홈 히어로 로고로 모핑(vt-team-logo 도착점). 로고는 캔버스 위 DOM 이미지라 WebGL 장면과 무관하다 */
body.x-pub .shero .shero-logo { view-transition-name: vt-team-logo; }
/* 지난 모임 — 참가 줄 아래 기록 섹션의 윗선이 겹치지 않게 */
body.x-pub .mu-join ~ .ar { border-top: 0; padding-top: 0; }
/* 기사 머리 아래 팩트 표 — 머리 선과 겹치는 윗선 제거(프로젝트 상세 이중 선) */
body.x-pub .art-x .art-head + .art-facts { border-top: 0; }
body.x-pub .shero[data-fx="type"] .shero-type { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px); mask-image: linear-gradient(180deg, transparent 0, #000 120px); }
body.x-pub [data-blocks] > [data-block]:first-of-type > .sec:first-child,
body.x-pub [data-blocks] > [data-block]:first-of-type > .cta-band:first-child { padding-top: var(--s-11); }
/* 섹션 리듬 — 섹션 사이 64(≤699 48). 폭은 wide 1012 */
body.x-pub [data-blocks] .sec { padding: var(--s-10) 0 0; }
body.x-pub [data-blocks] .container, body.x-pub .cta-band .container { max-width: calc(var(--w-wide) + var(--gutter) * 2); padding: 0 var(--gutter); }
body.x-pub [data-blocks] > :last-child > :last-child:not(.cta-band) { padding-bottom: var(--s-11); }

/* 소식 마퀴 — 트랙 패딩 = 섹션 제목 x. 카드는 링크 카드 문법(r22 · 헤어라인 · 쉴 때 그림자 없음 · min-height 폐지) */
body.x-pub .sec-news .sec-head { margin-bottom: var(--s-6); }
body.x-pub .nmq { --nmq-pad: max(var(--gutter), calc((100vw - var(--w-wide)) / 2)); position: relative; overflow: hidden; padding: 0; margin: 0; cursor: grab; outline-offset: -2px; -webkit-mask-image: none; mask-image: none; }
body.x-pub .nmq:active { cursor: grabbing; }
body.x-pub .nmq-track { display: flex; align-items: stretch; gap: var(--s-4); width: max-content; padding: 2px var(--nmq-pad) var(--s-2); will-change: auto; }
body.x-pub .nmq-static { cursor: auto; }
body.x-pub .nmq-static .nmq-track { width: auto; max-width: calc(var(--w-wide) + var(--gutter) * 2); margin: 0 auto; padding: 2px var(--gutter) var(--s-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
body.x-pub .news-feat.nmq-card {
  position: relative; flex: none; display: flex; flex-direction: column; width: 320px; min-height: 0; height: auto;
  padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: none; color: inherit;
  transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
  scroll-snap-align: start;
}
body.x-pub .news-feat.nmq-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  body.x-pub .news-feat.nmq-card:hover { translate: 0 -2px; border-color: var(--line-2); }
  body.x-pub .news-feat.nmq-card:hover::after { opacity: 1; }
}
body.x-pub .news-feat.nmq-card:active { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
body.x-pub .news-feat-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--canvas-2); }
body.x-pub .news-feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.x-pub .news-feat-body { display: flex; flex-direction: column; gap: var(--s-2); height: auto; flex: 1; padding: var(--s-6); }
body.x-pub .news-card-text .news-feat-body { gap: var(--s-3); }
body.x-pub .news-feat-body strong { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
body.x-pub .news-ex { font: 400 var(--t-footnote)/1.55 var(--font); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.x-pub .news-meta { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
body.x-pub .news-meta-foot { margin-top: auto; padding-top: var(--s-2); }
body.x-pub .news-meta time { font: 400 var(--t-footnote)/1 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-pub .news-card-text .lcard-ic { display: inline-flex; align-items: center; justify-content: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-sm); background: var(--wash-2); color: var(--ink-2); }
body.x-pub .news-card-text .lcard-ic svg { width: var(--ic-sm); height: var(--ic-sm); }
body.x-pub .lcard-dash { display: none; }
/* 일시정지 — 36 원형 아이콘 버튼(누르는 자리 44). aria-pressed=true면 재생 아이콘 */
body.x-pub .nmq-pause {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 50%; background: var(--wash-2); color: var(--ink-2); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-pub .nmq-pause::after { content: ''; position: absolute; inset: -4px; }
body.x-pub .nmq-pause svg { width: var(--ic-sm); height: var(--ic-sm); }
body.x-pub .nmq-pause:active { scale: var(--m-press-icon); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) { body.x-pub .nmq-pause:hover { background: var(--wash-3); color: var(--ink); } }
body.x-pub .nmq-pause .nmq-play-i, body.x-pub .nmq-pause[aria-pressed="true"] .nmq-pause-i { display: none; }
body.x-pub .nmq-pause[aria-pressed="true"] .nmq-play-i { display: inline-flex; }
body.x-pub .nmq-pause span { display: inline-flex; }

/* 다가오는 일정 — wide 2열, 행은 링크 카드(r22 · 헤어라인) + 날짜 타일 64(한 컴포넌트, 잉크) */
body.x-pub .elist.land-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); max-width: none; }
body.x-pub .erow {
  position: relative; display: flex; align-items: center; gap: var(--s-4); min-height: 0; margin: 0;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: none; color: inherit;
  transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-pub .erow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.x-pub .erow:hover { translate: 0 -2px; border-color: var(--line-2); } body.x-pub .erow:hover::after { opacity: 1; } }
body.x-pub .erow:active { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
body.x-pub :is(.erow-date, .mu-date) {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--r-md); background: var(--wash-2);
}
body.x-pub :is(.erow-date, .mu-date) > span { margin: 0; font: 500 var(--t-caption)/1.2 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-pub :is(.erow-date, .mu-date) > b { font: 600 var(--t-title-3)/1 var(--font); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
body.x-pub .erow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.x-pub .erow-title { font: 600 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink); white-space: normal; overflow: visible; }
body.x-pub .erow-sub { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .erow-arrow { flex: none; margin-left: auto; display: inline-flex; color: var(--ink-4); opacity: 1; font-size: 0; transition: color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out); }
body.x-pub .erow-arrow svg { width: var(--ic-sm); height: var(--ic-sm); }
@media (hover: hover) and (pointer: fine) { body.x-pub .erow:hover .erow-arrow { color: var(--ink); translate: 2px 0; } }

/* 운영진·멤버 — MemberCard(4:5) 그리드, 칸 최소 160 */
body.x-pub .mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-8) var(--s-5); margin: 0; }
body.x-pub .land-team.mgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* 가입 띠 — 가운데, h2 title-1, 리드 17 ink-2, 주 버튼 잉크 lg */
body.x-pub .cta-band { padding: var(--s-12) 0; text-align: center; }
body.x-pub .cta-band h2 { margin: 0; font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
body.x-pub .cta-band p { margin: var(--s-4) auto var(--s-6); max-width: 560px; font: 400 var(--t-lead)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .cta-band .btn { height: var(--h-lg); padding: 0 22px; font: 500 var(--t-body)/1 var(--font); }
body.x-pub .land-about p { max-width: var(--w-main); font: 400 var(--t-lead)/1.75 var(--font); color: var(--ink-2); }

/* 새 블록(Studio) — 토큰 값으로만 정리. 구조는 그대로 */
body.x-pub .blk-card, body.x-pub .blk-link, body.x-pub .blk-qa { border-radius: var(--r-xl); border-color: var(--line); box-shadow: none; }
body.x-pub .blk-card-img, body.x-pub .blk-shot img, body.x-pub .blk-video-frame { border-radius: var(--r-lg); }
body.x-pub .blk-cta { border-radius: var(--r-xl); }
body.x-pub .blk-btn { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--h-lg); padding: 0 18px 0 22px; border-radius: var(--r-pill); font: 500 var(--t-body)/1 var(--font); }
body.x-pub .blk-btn svg, body.x-pub .blk-link svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
body.x-pub .blk-card-t { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; }
body.x-pub .blk-card-d, body.x-pub .blk-prose { font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .blk-stat b { font-weight: 600; font-variant-numeric: tabular-nums; }
body.x-pub .blk-stat span { color: var(--ink-3); }

/* ── §3 목록 ───────────────────────────────────────────────────────── */
/* 저널 — 대표 글(jhero) + 그리드(jcard). 제목 아래 한 번, 썸네일 안에는 제목 없음(기본 썸네일 = 종이 + 선 아이콘) */
body.x-pub .jhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-7); align-items: center; color: inherit; }
body.x-pub .jhero-text { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
body.x-pub .jhero-text strong { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
body.x-pub .jhero-ex { font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .jhero-more {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; height: var(--h-md); margin-top: var(--s-2); padding: 0 14px 0 18px;
  border: 0; border-radius: var(--r-pill); background: var(--wash-2); color: var(--ink); font: 500 var(--t-ui)/1 var(--font); white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out);
}
body.x-pub .jhero-more svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
@media (hover: hover) and (pointer: fine) { body.x-pub .jhero:hover .jhero-more { background: var(--wash-3); } }
body.x-pub .jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
body.x-pub .jcard { position: relative; display: flex; flex-direction: column; gap: var(--s-3); color: inherit; }
body.x-pub .jcard .jcard-thumb, body.x-pub .jhero .jcard-thumb { transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  body.x-pub .jcard:hover .jcard-thumb, body.x-pub .jhero:hover .jcard-thumb { translate: 0 -2px; }
  body.x-pub .jcard:hover .jcard-title { text-decoration: none; }
}
body.x-pub .jcard:active .jcard-thumb { scale: var(--m-press-card); }
body.x-pub .jcard-thumb { border-radius: var(--r-lg); }
body.x-pub .jcard-thumb-lg { border-radius: var(--r-xl); }
body.x-pub .jcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-pub .jcard-title { display: flex; align-items: baseline; gap: 4px; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-pub .jcard-arrow { display: inline-flex; align-self: center; flex: none; color: var(--ink-4); transition: color var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out); transform: none; }
body.x-pub .jcard-arrow svg { width: var(--ic-sm); height: var(--ic-sm); }
@media (hover: hover) and (pointer: fine) { body.x-pub .jcard:hover .jcard-arrow { color: var(--ink); translate: 2px 0; transform: none; } }

/* 멤버 명단 — 묶음 제목 h2 headline + 수 */
body.x-pub .mgroups { display: flex; flex-direction: column; gap: var(--s-10); }
body.x-pub .mgroup-h { margin: 0 0 var(--s-5); font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); }

/* 모임 목록 — 헤어라인 행(§4.4): 날짜 타일 64 · 제목 17/600 · 메타 13 · 정원 '3 / 8' 한 패밀리 */
body.x-pub .mu-list { display: flex; flex-direction: column; gap: 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
body.x-pub .mu-card {
  position: relative; display: flex; align-items: center; gap: var(--s-5); margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; transition: background-color var(--dur-1) var(--ease-out);
}
body.x-pub .mu-card + .mu-card { border-top: 1px solid var(--line); }
body.x-pub .mu-card:active { background: var(--wash-2); }
@media (hover: hover) and (pointer: fine) { body.x-pub .mu-card:hover { background: var(--wash-1); } body.x-pub .mu-card:hover:active { background: var(--wash-2); } }
body.x-pub .mu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
body.x-pub .mu-title { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-pub .mu-meta { display: flex; align-items: center; flex-wrap: wrap; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .mu-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-1); }
body.x-pub .mu-going { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 400 var(--t-footnote)/1.2 var(--font); color: var(--ink-3); }
body.x-pub .mu-cap { display: inline-block; white-space: nowrap; }
body.x-pub .mu-cap b, body.x-pub .mu-count b { font: 600 var(--t-body)/1 var(--font); color: var(--ink); }
body.x-pub .mu-cap > span, body.x-pub .mu-count > span { font: 400 var(--t-footnote)/1 var(--font); color: var(--ink-3); }

/* 밑줄 탭(§4.6) — 44 · 간격 24 · 15/500 ink-3 → 잉크, 인디케이터 2px */
body.x-pub .utabs { position: relative; display: flex; gap: var(--s-6); height: auto; margin: 0 0 var(--s-6); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px var(--line); }
body.x-pub .utabs > a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--hit); padding: 0; border: 0; border-radius: 0; background: none; font: 500 var(--t-body)/1 var(--font); color: var(--ink-3); transition: color var(--dur-1) var(--ease-out); }
body.x-pub .utabs > a.on { color: var(--ink); font-weight: 500; } /* 밑줄 = .tab-bar(v5.css) */
body.x-pub .utabs > a .num, body.x-pub .utabs > a .sec-count { font: 400 var(--t-footnote)/1 var(--font); color: var(--ink-3); margin: 0; }
@media (hover: hover) and (pointer: fine) { body.x-pub .utabs > a:hover { color: var(--ink); } }

/* ── §4 상세 ───────────────────────────────────────────────────────── */
/* 소개 — 머리 가운데(main 720), 통계는 인라인 한 줄, 운영진 MemberCard, 가입 카드 r22 */
body.x-pub .about-hero { max-width: calc(var(--w-main) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) var(--s-9); text-align: left; }
body.x-pub .about-logo { width: 64px; height: 64px; margin: 0 0 var(--s-6); object-fit: contain; filter: brightness(0); } /* 공개 하위 로고는 잉크(§7 P4-4) — 흰 스타일만 */
body.x-pub :is(.about-logo, .join-logo):is([data-style="original"], [data-style="tile"]) { filter: none; }
body.x-pub :is(.about-logo, .join-logo)[data-style="tile"] { background: #fff; padding: 6px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
body.x-pub .about-name { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); }
body.x-pub .about-tagline { margin-top: var(--s-4); font: 400 var(--t-lead)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .about-stats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-2); margin-top: var(--s-5); font: 500 var(--t-caption)/1 var(--font); color: var(--ink-2); }
body.x-pub .about-stats span { display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--wash-2); color: var(--ink-2); }
body.x-pub .about-prose { padding-top: 0; font: 400 var(--t-lead)/1.75 var(--font); color: var(--ink); }
body.x-pub .about-prose h2 { font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; margin: var(--s-9) 0 var(--s-3); }
body.x-pub .about-prose h2:first-child { margin-top: 0; }
body.x-pub .about-sec { margin-top: var(--s-10); padding-top: 0; border-top: 0; }
body.x-pub .about-sec h2 { margin: 0 0 var(--s-6); font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); }
body.x-pub .about-cta { margin-top: var(--s-10); padding: var(--s-9) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); text-align: center; }
body.x-pub .about-cta h2 { margin: 0 0 var(--s-6); font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }

/* 기사 — 머리는 main 720 왼쪽(모든 공개 상세와 같은 틀), 제목 display 56/36, 메타 줄도 같은 폭 */
body.x-pub .art-x { color: var(--ink); }
body.x-pub .art-top { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-sm); margin: 0 0 var(--s-8); }
body.x-pub .art-back {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 14px 0 var(--s-2);
  border-radius: var(--r-pill); background: var(--wash-2); font: 500 var(--t-footnote)/1 var(--font); color: var(--ink); white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-pub .art-back svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
body.x-pub .art-back:active { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) { body.x-pub .art-back:hover { background: var(--wash-3); color: var(--ink); } }
body.x-pub .art-top-date { font: 400 var(--t-footnote)/1 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-pub .art-head { padding: 0 0 var(--s-7); border-bottom: 1px solid var(--line); text-align: left; }
body.x-pub .art-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-start; font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
body.x-pub .art-eyebrow a { color: var(--ink-3); transition: color var(--dur-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.x-pub .art-eyebrow a:hover { color: var(--ink); } }
body.x-pub .art-sep { color: var(--ink-4); }
body.x-pub .art-pin { color: var(--ink); }
body.x-pub .art-x .art-title { max-width: none; margin: var(--s-4) 0 0; font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
body.x-pub .art-x .art-title-long { font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; }
body.x-pub .art-x .art-deck { max-width: none; margin: var(--s-4) 0 0; font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink-2); text-align: left; }
body.x-pub .article-byline, body.x-pub .art-byline { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); font: 400 var(--t-ui)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .art-byline-name { position: relative; font-weight: 600; color: var(--ink); }
body.x-pub .art-byline-read { font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; }
body.x-pub :is(.art-byline-role, .art-byline-read)::before { color: var(--ink-4); }
body.x-pub .art-facts { margin: 0; border-bottom: 1px solid var(--line); }
body.x-pub .art-fact { display: grid; grid-template-columns: 96px 1fr; gap: 0 var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
body.x-pub .art-fact dt { font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
body.x-pub .art-fact dd { font: 400 var(--t-body)/1.55 var(--font); color: var(--ink); }
body.x-pub .art-facts-link { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
body.x-pub .art-facts-link svg { width: 14px; height: 14px; }
body.x-pub .art-cover { margin: var(--s-7) 0 0; }
body.x-pub .art-cover img { aspect-ratio: 16 / 10; max-height: none; width: 100%; object-fit: cover; border-radius: var(--r-xl); border: 1px solid var(--line); }
body.x-pub .art-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--line); }
body.x-pub .art-foot-acts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
body.x-pub .art-foot .fcard-like { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 14px; border-radius: var(--r-pill); background: var(--wash-2); color: var(--ink); font: 500 var(--t-footnote)/1 var(--font); transition: background-color var(--dur-1) var(--ease-out); }
body.x-pub .art-foot .fcard-like svg { width: var(--ic-sm); height: var(--ic-sm); }
body.x-pub .art-views { font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-pub .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
body.x-pub :is(.art-cmts, .art .cmts) { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line); }
body.x-pub :is(.art-cmts-head h2, .cmts-head, .art .cmts-head) { font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); }
body.x-pub .art-cmts-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-5); }
body.x-pub .cmt { gap: var(--s-3); }
body.x-pub .cmt-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font: 400 var(--t-ui)/1.45 var(--font); }
body.x-pub .cmt-top strong { font-weight: 600; color: var(--ink); }
body.x-pub .cmt-role, body.x-pub .cmt-top time { font: 400 var(--t-caption)/1.4 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-pub .cmt-dot { color: var(--ink-4); }
body.x-pub .cmt-body { margin-top: var(--s-1); font: 400 var(--t-body)/1.65 var(--font); letter-spacing: -0.01em; color: var(--ink); }
body.x-pub .cmt:not(:last-child) .cmt-rail::after { background: var(--line); }
body.x-pub :is(.cmts-empty, .cmt-hint) { padding: var(--s-4) 0; font: 400 var(--t-ui)/1.65 var(--font); color: var(--ink-3); }
body.x-pub .cmt-hint a { position: relative; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
body.x-pub .rel-paper { border-radius: var(--r-lg); }

/* 프로필 — 이름 title-1(40/30), 4:5 포트레이트 240(vt-person) 오른쪽, 통계는 0 숨김 + 인라인 */
body.x-pub .pf { padding-bottom: 0; }
body.x-pub .pf > .art-back { margin-bottom: var(--s-8); }
body.x-pub .pf-head { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "id portrait" "acts portrait"; column-gap: var(--s-9); row-gap: var(--s-5); align-items: start; margin: 0; padding: 0; border: 0; }
body.x-pub .pf-head > .pf-portrait { grid-area: portrait; width: 240px; margin: 0; border-radius: var(--r-xl); }
body.x-pub .pf-head > .pf-id { grid-area: id; min-width: 0; }
body.x-pub .pf-head > .pf-actions { grid-area: acts; }
body.x-pub .pf-eyebrow { display: block; margin: 0 0 var(--s-3); font: 500 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
body.x-pub .pf-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
body.x-pub .pf-name { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); }
body.x-pub .pf-bio { margin-top: var(--s-4); font: 400 var(--t-lead)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .pf-major { margin-top: var(--s-2); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-4); }
body.x-pub .pf-portrait .mcard-mono { font-size: 96px; }
body.x-pub .pf-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin: var(--s-8) 0 0; padding: 0; border: 0; border-radius: 0; overflow: visible; }
body.x-pub .pf-stats > div { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 6px; padding: 0; border: 0; }
body.x-pub .pf-stats b { font: 600 var(--t-body)/1.2 var(--font); letter-spacing: 0; color: var(--ink); }
body.x-pub .pf-stats span { font: 400 var(--t-footnote)/1.2 var(--font); color: var(--ink-3); }
body.x-pub .pf-sec, body.x-pub .pf-section { margin-top: var(--s-10); }
body.x-pub .pf-sec-head h2 { font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; }

/* 모임·일정 상세 — h1 title-1, 날짜 타일 64 오른쪽(vt-meet-date), 참가 줄은 헤어라인 사이 */
body.x-pub .mu-head .page-title { margin: 0; }
body.x-pub .mu-hero-meta { display: flex; align-items: center; flex-wrap: wrap; font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .mu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-4); }
body.x-pub .mu-join { display: flex; align-items: center; gap: var(--s-4); margin: 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.x-pub .mu-join .share-btn { margin-left: auto; }
body.x-pub .mu-join .btn { height: var(--h-md); padding: 0 18px; font: 500 var(--t-ui)/1 var(--font); }
body.x-pub .mu-count { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
body.x-pub .mu-sec { margin-top: var(--s-9); }
body.x-pub .sec-h { margin: 0 0 var(--s-4); font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); }
body.x-pub .mu-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 var(--s-4); }
body.x-pub .mu-person { display: flex; align-items: center; gap: var(--s-3); min-height: var(--row-2); }
body.x-pub .mu-person-main { display: flex; flex-direction: column; min-width: 0; }
body.x-pub .mu-person-main strong { font: 600 var(--t-ui)/1.45 var(--font); color: var(--ink); }
body.x-pub .mu-person-main span { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .mu-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-9); padding-top: var(--s-4); border-top: 1px solid var(--line); }
body.x-pub .ev-prose, body.x-pub .mu-sec .prose { font: 400 var(--t-body)/1.75 var(--font); color: var(--ink); }
body.x-pub :is(.ev-prose, .mu-sec .prose) :is(h1, h2) { margin: 1.2em 0 .4em; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; }
body.x-pub :is(.ev-prose, .mu-sec .prose) :is(h3, h4) { margin: 1em 0 .3em; font: 600 var(--t-body)/1.45 var(--font); }

/* 공유 버튼(§4.15) — 팀 앱과 같은 아이콘 버튼 36 원(share), 이름은 스크린리더에만. 누르는 자리 44 */
body.x-pub .share-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; gap: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); box-shadow: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-pub .share-btn::after { content: ''; position: absolute; inset: -4px; }
body.x-pub .share-btn svg { width: var(--ic-md); height: var(--ic-md); flex: none; }
body.x-pub .share-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; font-size: var(--t-footnote); }
body.x-pub .share-btn:active { scale: var(--m-press-icon); transform: none; transition-duration: var(--dur-1); }
body.x-pub .share-btn[aria-expanded="true"] { background: var(--wash-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { body.x-pub .share-btn:hover { background: var(--wash-2); color: var(--ink); } }
body.x-pub .rc-share .share-btn { background: var(--wash-2); color: var(--ink); }

/* ── §5 흐름 ───────────────────────────────────────────────────────── */
/* 가입 — narrow 400 가운데, 머리(로고 잉크 64 · title-1 · 태그라인), 모집 안내 · 폼 카드 r22 */
body.x-pub .auth-wrap.join-wrap { max-width: calc(var(--w-narrow) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
body.x-pub .join-head { margin: 0 0 var(--s-8); text-align: left; }
body.x-pub .join-logo { width: 48px; height: 48px; margin: 0 0 var(--s-5); object-fit: contain; filter: brightness(0); }
body.x-pub .join-title { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); }
body.x-pub .join-tag { margin-top: var(--s-3); font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .auth-card { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: none; }
body.x-pub .auth-sub, body.x-pub .auth-card .auth-sub { margin: 0 0 var(--s-5); font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .auth-alt { margin-top: var(--s-4); text-align: center; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .auth-card .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
body.x-pub .join-form > .btn, body.x-pub .auth-card > .btn, body.x-pub .auth-card form > .btn { height: var(--h-lg); font: 500 var(--t-body)/1 var(--font); }
/* '가입 코드가 있어요' — 접기(summary 44) */
body.x-pub .join-code { margin: 0 0 var(--s-6); border-top: 1px solid var(--line); }
body.x-pub .join-code > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--hit); padding: var(--s-2) 0; list-style: none; cursor: pointer;
  font: 500 var(--t-ui)/1.45 var(--font); color: var(--ink-2); transition: color var(--dur-1) var(--ease-out);
}
body.x-pub .join-code > summary::-webkit-details-marker { display: none; }
body.x-pub .join-code > summary svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; color: var(--ink-3); transition: rotate var(--dur-2) var(--ease-out); }
body.x-pub .join-code[open] > summary svg { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) { body.x-pub .join-code > summary:hover { color: var(--ink); } }
body.x-pub .join-code .join-code-field { margin: var(--s-2) 0 0; }
body.x-pub .chat-join-gap { margin-top: var(--s-2); }
/* 가입 페이지의 모집 안내 — 흰 카드 r22(잉크 판·팀색 없음) */
body.x-pub .rc-join { margin: 0 0 var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: none; }
body.x-pub .rc-join-label { margin: 0 0 var(--s-3); font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .rc-join-item {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink); box-shadow: none; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
body.x-pub .rc-join-item + .rc-join-item { margin-top: var(--s-2); }
@media (hover: hover) and (pointer: fine) { body.x-pub .rc-join-item:hover { border-color: var(--line-2); background: var(--wash-1); } }
body.x-pub .rc-join-top { display: flex; align-items: center; gap: var(--s-2); }
body.x-pub .rc-join .rc-dd { display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--wash-2); color: var(--ink-2); font: 500 var(--t-caption)/1 var(--font); letter-spacing: 0; }
body.x-pub .rc-join .rc-dd.is-hot { background: var(--ink); color: #fff; }
body.x-pub .rc-join-when { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-pub .rc-join-item strong { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-pub .rc-join-cta { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--t-ui)/1.45 var(--font); color: var(--ink-2); }
body.x-pub .rc-join-cta svg { width: var(--ic-sm); height: var(--ic-sm); }
body.x-pub .rc-join-note { margin: var(--s-3) 0 0; font: 400 var(--t-footnote)/1.55 var(--font); color: var(--ink-3); }

/* 잠금(멤버 전용) — 카드 r22 · 헤어라인 · 그림자 없음, 목업은 inset 24 · r16 · 넘침 숨김 · 실선 */
body.x-pub .gate-page { max-width: calc(var(--w-wide) + var(--gutter) * 2); }
body.x-pub .gate { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 380px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: none; }
body.x-pub .gate-info { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-9) var(--s-8); }
body.x-pub .gate-info > .chip { margin: 0 0 var(--s-5); }
body.x-pub .gate-info h1 { margin: 0 0 var(--s-4); font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
body.x-pub .gate-info > p { margin: 0 0 var(--s-5); font: 400 var(--t-lead)/1.65 var(--font); color: var(--ink-2); }
body.x-pub .gate-points { display: flex; flex-direction: column; gap: var(--s-2); margin: 0 0 var(--s-7); padding: 0; list-style: none; }
body.x-pub .gate-points li { display: flex; align-items: center; gap: var(--s-2); font: 400 var(--t-body)/1.45 var(--font); color: var(--ink-2); }
body.x-pub .gate-points li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); flex: none; }
body.x-pub .gate-divider { width: 100%; margin: auto 0 var(--s-6); border-top: 1px solid var(--line); }
body.x-pub .gate-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
body.x-pub .gate-actions .btn { height: var(--h-lg); padding: 0 22px; font: 500 var(--t-body)/1 var(--font); }
body.x-pub .gate-actions .gate-cta { padding-right: 18px; }
body.x-pub .gate-actions .gate-cta svg { width: var(--ic-md); height: var(--ic-md); }
body.x-pub .gate-login { display: inline-flex; align-items: center; height: var(--h-lg); padding: 0 var(--s-3); font: 500 var(--t-ui)/1 var(--font); color: var(--ink-2); transition: color var(--dur-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.x-pub .gate-login:hover { color: var(--ink); } }
body.x-pub .gate-actions .chip-wait { height: var(--h-lg); padding: 0 var(--s-4); font: 500 var(--t-footnote)/1 var(--font); }
body.x-pub .gate-preview { position: relative; overflow: hidden; background: var(--canvas); pointer-events: none; }
body.x-pub .gate-shot {
  position: absolute; inset: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: none; opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
}
body.x-pub .mline { display: block; width: var(--w, 60%); height: 8px; border-radius: var(--r-xs); background: var(--wash-3); }
body.x-pub .mline.hl { background: var(--ink-5); }
body.x-pub :is(.mock-row, .mock-person, .mock-meet) { display: flex; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); }
body.x-pub .mock-row { flex-direction: column; gap: var(--s-2); }
body.x-pub :is(.mock-person, .mock-meet) { align-items: center; }
body.x-pub .mock-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.x-pub .mock-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--wash-3); flex: none; }
body.x-pub .mock-tile { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--wash-2); flex: none; }
body.x-pub .mock-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
body.x-pub .mock-cal i { display: block; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--canvas); }
body.x-pub .mock-cal i.on { background: var(--ink-5); border-color: transparent; }

/* 방문자 소모임 홈(src/circles.js 마크업) — 공개 틀·잉크만 */
body.x-pub .intro-main .container.cx-home, body.x-pub .cx-home { max-width: calc(var(--w-main) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* 승인 대기 칩 */
body.x-pub .chip.chip-wait { height: var(--h-md); padding: 0 var(--s-4); font: 500 var(--t-footnote)/1 var(--font); }
body.x-pub .chip.chip-wait-lg { height: var(--h-lg); }

/* ── §6 반응형 ─────────────────────────────────────────────────────── */
@media (max-width: 879px) {
  /* 내비는 바 아래 한 줄(44) — 바 자체는 56 그대로(무대 한 종류), 줄은 바에 붙은 유리 띠 */
  body.x-pub .pub-bar .intro-nav {
    position: absolute; left: 0; right: 0; top: 100%; translate: none; order: 3; z-index: 0;
    display: flex; gap: var(--s-1); height: var(--hit); padding: 0 calc(var(--gutter) - var(--s-2));
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    background: inherit; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  body.x-pub .pub-bar .intro-nav::-webkit-scrollbar { display: none; }
  body.x-pub .pub-bar .intro-nav a { flex: none; justify-content: center; min-width: var(--hit); height: var(--hit); padding: 0 var(--s-2); font-size: var(--t-body); scroll-snap-align: start; }
  body.x-pub .pub-bar .intro-nav a.on { text-underline-offset: 6px; }
  body.x-pub .pub-bar-hero .intro-nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.x-pub .pub-bar:not(.pub-bar-hero):has(.intro-nav > a:not([hidden])) + .intro-main,
  body.x-pub .pub-bar:not(.pub-bar-hero):has(.intro-nav > a:not([hidden])) ~ .intro-main { padding-top: calc(var(--s-11) + var(--hit)); }
  body.x-pub .jhero { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  body.x-pub .jhero-text { order: 2; }
  body.x-pub .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.x-pub .gate { grid-template-columns: minmax(0, 1fr); }
  body.x-pub .gate-preview { min-height: 200px; }
}
@media (max-width: 699px) {
  body.x-pub .intro-main { padding: var(--s-9) 0 var(--s-10); }
  body.x-pub .pub-bar:not(.pub-bar-hero):has(.intro-nav > a:not([hidden])) + .intro-main,
  body.x-pub .pub-bar:not(.pub-bar-hero):has(.intro-nav > a:not([hidden])) ~ .intro-main { padding-top: calc(var(--s-9) + var(--hit)); }
  body.x-pub .pub-bar { gap: var(--s-3); }
  body.x-pub .pub-bar .intro-top-link { padding: 0 var(--s-2); }
  body.x-pub .input { font-size: 16px; }
  body.x-pub [data-blocks] .sec { padding-top: var(--s-9); }
  body.x-pub [data-blocks] > [data-block]:first-of-type > .sec:first-child,
  body.x-pub [data-blocks] > [data-block]:first-of-type > .cta-band:first-child { padding-top: var(--s-9); }
  body.x-pub [data-blocks] > :last-child > :last-child:not(.cta-band) { padding-bottom: var(--s-10); }
  body.x-pub .cta-band { padding: var(--s-10) 0; }
  body.x-pub .news-feat.nmq-card { width: min(300px, calc(100vw - 72px)); }
  body.x-pub .news-feat-body { padding: var(--s-5); }
  body.x-pub .elist.land-events { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  body.x-pub :is(.erow-date, .mu-date) { width: 56px; height: 56px; }
  body.x-pub .mgrid, body.x-pub .land-team.mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-3); }
  /* 목록은 72 정사각 섬네일 행 */
  body.x-pub .jgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.x-pub .jgrid > .jcard { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-4); row-gap: 2px; align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
  body.x-pub .jgrid > .jcard:first-child { border-top: 0; }
  body.x-pub .jgrid > .jcard > .jcard-thumb { grid-row: 1 / span 2; width: 72px; height: 72px; aspect-ratio: 1; padding: 0; border-radius: var(--r-md); }
  body.x-pub .jgrid > .jcard > .jcard-thumb > b, body.x-pub .jgrid > .jcard > .jcard-thumb > .jt-in { display: none; }
  body.x-pub .jgrid > .jcard > .jcard-meta { grid-column: 2; align-self: end; }
  body.x-pub .jgrid > .jcard > .jcard-title { grid-column: 2; align-self: start; font-size: var(--t-body); }
  body.x-pub .about-hero { padding-bottom: var(--s-7); }
  body.x-pub .about-cta { padding: var(--s-7) var(--s-5); }
  body.x-pub .auth-card { padding: var(--s-5); }
  /* 모바일 전폭 주 행동은 xl 56 */
  body.x-pub :is(.auth-card, .about-cta) .btn-block, body.x-pub .auth-card form > .btn { height: var(--h-xl); font: 500 var(--t-card)/1 var(--font); }
  body.x-pub .about-cta .btn, body.x-pub .cta-band .btn { width: 100%; height: var(--h-xl); font: 500 var(--t-card)/1 var(--font); }
  body.x-pub .gate-info { padding: var(--s-7) var(--s-5); }
  body.x-pub .gate-actions { width: 100%; }
  body.x-pub .gate-actions .btn { width: 100%; height: var(--h-xl); font: 500 var(--t-card)/1 var(--font); }
  body.x-pub .gate-login { width: 100%; justify-content: center; height: var(--hit); }
  body.x-pub .pf-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "portrait" "id" "acts"; }
  body.x-pub .pf-head > .pf-portrait { width: 160px; }
  body.x-pub .pf-portrait .mcard-mono { font-size: 64px; }
  body.x-pub .art-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body.x-pub .mu-join { flex-wrap: wrap; }
  body.x-pub .mu-join > form, body.x-pub .mu-join > .mu-cta { flex: 1 1 100%; }
  body.x-pub .mu-join .btn { width: 100%; height: var(--h-xl); font: 500 var(--t-card)/1 var(--font); }
  body.x-pub .mu-card { gap: var(--s-3); align-items: flex-start; }
  body.x-pub .intro-main .page-head { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 380px) {
  body.x-pub .pub-bar .intro-ident strong { max-width: 120px; }
}

/* ── §7 reduced-motion — 마퀴는 멈추고 스냅 가로 스크롤(§5.6) ────── */
@media (prefers-reduced-motion: reduce) {
  body.x-pub [data-reveal] { animation: none; } /* 스크롤 리빌도 멈춘 채 보인다(running 0) */
  body.x-pub .nmq { overflow-x: auto; cursor: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--nmq-pad); scrollbar-width: none; }
  body.x-pub .nmq-track { transform: none !important; }
  body.x-pub .nmq [data-mq-copy="dup"] { display: none; }
  body.x-pub .nmq-pause { display: none; }
}

/* ── §8 누르는 자리 44(390 탭 타깃) · 굵기 3단 · 전환 곡선 — 보이는 크기는 그대로 ── */
body.x-pub .pub-bar .intro-top-acts .btn::after { content: ''; position: absolute; inset: -2px 0; }
body.x-pub .pub-bar .intro-top-link { justify-content: center; min-width: var(--hit); }
body.x-pub .intro-foot a { min-width: var(--hit); text-align: center; }
body.x-pub :is(.art-back, .rc-back, .fcard-like) { position: relative; }
body.x-pub :is(.art-back, .rc-back, .fcard-like)::after { content: ''; position: absolute; inset: -6px 0; }
body.x-pub :is(.art-head .art-eyebrow a, .art-byline-name, .art-facts-link, .cmt-hint a, .ctanote a, .rc-ctanote a) { position: relative; }
body.x-pub :is(.art-head .art-eyebrow a, .art-byline-name, .art-facts-link, .cmt-hint a, .rc-ctanote a)::after { content: ''; position: absolute; inset: -14px -12px; }
body.x-pub a.chip { position: relative; }
body.x-pub a.chip::after { content: ''; position: absolute; inset: -10px 0; }
body.x-pub .chip-tag { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
:where(body.x-pub) :where(b, strong) { font-weight: 600; }
body.x-pub .chip.mu-open { display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 10px; border-radius: var(--r-pill); background: var(--wash-2); color: var(--ink-2); font: 500 var(--t-caption)/1 var(--font); }

/* ════ 템플릿 하위 아카이브(저널·포스터·주보·문서형) — 표지도, 팀이 꾸민 썸네일도 없는 글은 그림 칸 없이 활자로.
   홈의 '가짜 이미지 없음' 원칙을 한 번 누른 페이지에도(회색 종이 + 종류 아이콘 판을 세우지 않는다). 기본 템플릿은 그대로 ════ */
:is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jt-default { display: none; }
:is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jhero:has(> .jt-default) { display: block; padding-bottom: var(--s-9); border-bottom: 1px solid var(--line); }
:is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jhero:has(> .jt-default) .jhero-text { max-width: var(--w-main); gap: var(--s-4); }
:is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jhero:has(> .jt-default) .jhero-text strong { font-size: var(--t-display); line-height: 1.1; letter-spacing: -0.045em; }
:is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jhero:has(> .jt-default) .jhero-ex { max-width: 36em; font-size: var(--t-lead); line-height: 1.65; letter-spacing: -0.012em; }
:is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jgrid > .jcard:has(> .jt-default) { padding-top: var(--s-5); border-top: 1px solid var(--line); }
/* 목록이 모두 활자뿐이면 두 단(세 칸 중 한 칸이 비어 보이지 않게) */
@media (min-width: 700px) { :is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jgrid:not(:has(> .jcard > .jcard-thumb:not(.jt-default))) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); } }
@media (max-width: 699px) {
  :is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jgrid > .jcard:has(> .jt-default) { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) 0; }
  :is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jgrid > .jcard:has(> .jt-default) > :is(.jcard-meta, .jcard-title) { grid-column: 1; }
  :is(body.jn-sub, body.pst-sub, body.bl-sub, body.docs-page) .jgrid > .jcard:first-child:has(> .jt-default) { border-top: 0; }
}
/* 푸터 링크 — 보이는 폭은 글자만큼(구분점 간격이 고르게), 누르는 자리는 44로 넓힌다(::after) */
body.x-pub .intro-foot a { position: relative; min-width: 0; }
body.x-pub .intro-foot a::after { content: ''; position: absolute; inset: 0 -8px; }