/* ════════════════════════════════════════════════════════════════════════
   v4-platform.css — 플랫폼 표면(P2, 디자인 시스템 v5). 값은 전부 v5.css 토큰.
   대상: 랜딩 하단(body.x-land) · /teams · /meetups · /meetups/new · /new · /login · /signup
         /me · /u/:id · /portfolio/:id · /recruit · /applications · 오류
   규칙: 선택자는 .hd-x(헤더) · body.x-plat · body.x-land 또는 그 페이지 클래스로 시작한다.
   §0 토큰 별칭  §1 헤더·시트·푸터  §2 공통 컨트롤  §3 페이지 머리  §4 /meetups  §5 /recruit·/applications
   §6 흐름(/new·/meetups/new·인증)  §7 /me  §8 /u·/portfolio  §9 오류  §10 랜딩 하단  §11 ≤879·≤699  §12 reduced
   ════════════════════════════════════════════════════════════════════════ */

/* ── 0. 토큰 — v5.css의 별칭(SPEC §2.12). 값은 v5.css에만 있다. --x-ease는 v5.css :root가 정의 ── */
body.x-plat {
  --x-ink: var(--ink); --x-ink-hover: var(--ink-hover);
  --x-muted: var(--ink-2); --x-subtle: var(--ink-3); --x-dim: var(--ink-3); --x-faint: var(--ink-5);
  --x-line: var(--line); --x-line-2: var(--line-2); --x-line-3: var(--line-3); --x-line-soft: var(--line);
  --x-wash: var(--wash-2); --x-wash-2: var(--wash-3); --x-wash-3: var(--wash-1);
  --x-new-bg: #fdece8; --x-new-fg: #c2361f; /* 랜딩 'New' 배지 — 사용자 결정 전까지 유지(SPEC §9.3) */
  --x-r-pill: var(--r-pill); --x-r-xl: var(--r-xl); --x-r-lg: var(--r-lg); --x-r-md: var(--r-md);
  --x-lift: var(--e-2);
  --x-pop: var(--e-3);
  --x-focus: var(--ring-input);
  /* 플랫폼 페이지엔 팀 accent가 없다 — app.css :root가 --primary 등을 참조로 선언해
     다크 기본값이 상속되던 버그(흰 버튼·안 보이는 날짜·칩)를 여기서 잉크로 끊는다 */
  --accent: var(--ink); --accent-soft: var(--wash-2); --primary: var(--ink); --primary-fg: #fff;
  --ring: rgba(23, 21, 15, .08); --link: var(--ink); --text: var(--ink);
}
body.x-plat:not(.has-sb), body.x-land { background: var(--paper); }
/* 짧은 페이지도 푸터가 화면 바닥에 붙는다 */
body.x-plat:not(.has-sb) { display: flex; flex-direction: column; min-height: 100vh; }
body.x-plat:not(.has-sb) > main { flex: 1 0 auto; }
/* 거터 — 헤더 포함 한 값(24 / ≤699: 20) */
:is(body.x-plat, body.x-land) .container { max-width: 1060px; padding-inline: var(--gutter); }
/* 랜딩 히어로는 보호 구역 — 구도(390에서 CTA 두 줄 등)가 바뀌지 않게 예전 거터 24를 그대로 둔다 */
body.x-land .xhero > .container { padding-inline: var(--s-6); }

/* ════════════════════════════════════════════════════════════════════════
   1. 헤더(.hd-x, 64/56) · 햄버거 시트 · 푸터 — §4.12
   ════════════════════════════════════════════════════════════════════════ */
.hd.hd-x {
  position: sticky; top: 0; z-index: var(--z-bar);
  background: #fff; border-bottom: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.hd-x .hd-in { position: relative; display: flex; align-items: center; gap: 0; height: calc(var(--bar-h) - 1px); /* + 하단 선 1px = 64/56 */ transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.hd-x .hd-brand {
  display: inline-flex; align-items: center; height: var(--hit); flex: none;
  font: 600 var(--t-title-3)/1 var(--font-logo); letter-spacing: 0; color: var(--ink);
  transition: color var(--dur-2) var(--ease-out);
}
.hd-x .hd-nav { position: static; transform: none; display: flex; align-items: center; gap: 28px; margin: 0 0 0 40px; }
.hd-x .hd-nav a {
  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);
  text-decoration: none; text-underline-offset: 7px; text-decoration-thickness: 1.5px;
  transition: color var(--dur-1) var(--ease-out);
}
.hd-x .hd-nav a[aria-current="page"] { color: var(--ink); text-decoration-line: underline; }
.hd-x .hd-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hd-x .hd-actions .btn { height: var(--h-md); padding: 0 18px; font-size: var(--t-ui); }
.hd-x .hd-actions .btn.ghost { background: transparent; color: var(--ink-2); }
.hd-x .hd-actions .btn.secondary { background: var(--wash-2); color: var(--ink); }
.hd-x .hd-user > summary { position: relative; border-radius: 50%; }
.hd-x .hd-user > summary::after { content: ''; position: absolute; inset: -6px; }
.hd-x .menu-dot { position: absolute; top: 0; right: 0; }
.menu-pop .menu-badge { margin-left: auto; }
@media (hover: hover) and (pointer: fine) {
  .hd-x .hd-nav a:hover { color: var(--ink); }
  .hd-x .hd-actions .btn:not(.ghost):not(.secondary):hover { background: var(--ink-hover); }
  .hd-x .hd-actions .btn.ghost:hover { background: var(--wash-2); color: var(--ink); }
  .hd-x .hd-actions .btn.secondary:hover { background: var(--wash-3); }
}
/* 흐름(/new·인증)과 이미 그 페이지인 행동은 중복이라 숨긴다 */
body.x-new .hd-x .hd-create, body.x-teams .hd-x .hd-create,
body.x-login .hd-x .hd-login, body.x-signup .hd-x .hd-start { display: none; }

/* 햄버거 — 40 원, 두 선이 X로 모핑(--dur-2). ≤879에서만 보인다 */
.hd-burger {
  position: relative; display: none; flex: none; width: var(--h-md); height: var(--h-md); border-radius: 50%; color: var(--ink);
  transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
.hd-burger::after { content: ''; position: absolute; inset: -2px; }
.hd-burger i {
  position: absolute; left: 11px; right: 11px; top: calc(50% - 0.75px); height: 1.5px; border-radius: var(--r-pill); background: currentColor;
  transition: translate var(--dur-2) var(--ease-out), rotate var(--dur-2) var(--ease-out);
}
.hd-burger i:first-child { translate: 0 -4px; }
.hd-burger i:last-child { translate: 0 4px; }
.hd-burger:active { scale: var(--m-press-icon); transition-duration: var(--dur-1); }
.hd-x.is-open .hd-burger i:first-child { translate: 0 0; rotate: 45deg; }
.hd-x.is-open .hd-burger i:last-child { translate: 0 0; rotate: -45deg; }
@media (hover: hover) and (pointer: fine) { .hd-burger:hover { background: var(--wash-2); } }

/* 전체 화면 시트 — 헤더(64/56)는 그대로, 아래 흰 면이 내려앉는다. 링크 28/600 · 56행 · 헤어라인 */
.hd-sheet {
  position: fixed; left: 0; right: 0; top: var(--bar-h); bottom: 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column; padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: #fff; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; translate: 0 calc(var(--m-rise) * -1);
  transition: opacity var(--dur-2) var(--ease-in), translate var(--dur-2) var(--ease-in), visibility 0s linear var(--dur-2);
}
.hd-x.is-open .hd-sheet { opacity: 1; visibility: visible; translate: 0 0; transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out), visibility 0s; }
.hd-sheet-nav { display: flex; flex-direction: column; }
.hd-sheet-nav a {
  display: flex; align-items: center; min-height: var(--row);
  font: 600 28px/1.1 var(--font); letter-spacing: -0.03em; color: var(--ink); text-decoration: none;
}
.hd-sheet-nav a + a { border-top: 1px solid var(--line); }
.hd-sheet-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hd-x.is-open .hd-sheet-nav a { animation: m-rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.hd-sheet-nav a:nth-child(2) { --i: 1; } .hd-sheet-nav a:nth-child(3) { --i: 2; } .hd-sheet-nav a:nth-child(4) { --i: 3; }
.hd-sheet-nav a:nth-child(5) { --i: 4; } .hd-sheet-nav a:nth-child(n + 6) { --i: 5; }
.hd-sheet-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 24px; }
.hd-sheet-foot .btn { width: 100%; height: var(--h-xl); padding: 0 28px; font-size: var(--t-card); }
.hd-sheet-foot .btn.secondary { background: var(--wash-2); color: var(--ink); }
.hd-sheet-foot .btn svg { width: var(--ic-lg); height: var(--ic-lg); }
html.hd-open { overflow: hidden; }
html.hd-open .hd.hd-x { background: #fff; border-bottom-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 다크 스토리 위에서 열어도 시트는 흰 면 — 헤더 글자를 잉크로 되돌린다 */
html.hd-open .hd.hd-x.hd-on-dark :is(.hd-brand, .hd-burger) { color: var(--ink); }
html.hd-open .hd.hd-x.hd-on-dark .hd-actions .btn:not(.ghost):not(.secondary) { background: var(--ink); color: #fff; }

/* 랜딩 헤더 — 흰 바탕에서 시작, 스크롤하면 유리. 다크 스토리([data-hd-dark]) 위에서만 투명 + 흰 글자(landing.js) */
.hd.hd-x.hd-landing.hd-scrolled { background: var(--glass); border-bottom-color: var(--line); }
.hd.hd-x.hd-landing.hd-on-dark { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hd.hd-x.hd-on-dark :is(.hd-brand, .hd-nav a[aria-current="page"]) { color: #fff; }
.hd.hd-x.hd-on-dark .hd-nav a, .hd.hd-x.hd-on-dark .hd-actions .btn.ghost { color: var(--d-fg-2); }
.hd.hd-x.hd-on-dark .hd-actions .btn:not(.ghost):not(.secondary) { background: #fff; color: var(--ink); }
.hd.hd-x.hd-on-dark .hd-actions .btn.secondary { background: var(--d-wash-3); color: #fff; }
.hd.hd-x.hd-on-dark .hd-burger { color: #fff; }
.hd.hd-x.hd-away .hd-in { opacity: 0; translate: 0 calc(var(--m-rise) * -1); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .hd.hd-x.hd-on-dark .hd-nav a:hover { color: #fff; } }

/* 푸터 — 작은 푸터(.ft)와 빅 푸터(.ftb). 워드마크만 Cal Sans */
:is(body.x-plat, body.x-land) .ft { margin-top: var(--s-11); border-top: 1px solid var(--line); }
:is(body.x-plat, body.x-land) .ft-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: var(--s-7); padding-bottom: var(--s-8); }
:is(body.x-plat, body.x-land) .ft-brand { display: flex; align-items: baseline; gap: 12px; font: 600 var(--t-card)/1 var(--font-logo); color: var(--ink); }
:is(body.x-plat, body.x-land) .ft-dim { font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-3); }
body.x-flow .ft { display: none; }
.ftb { margin-top: 0; border-top: 1px solid var(--line); overflow: hidden; }
.ftb .ftb-in { display: flex; flex-wrap: wrap; gap: var(--s-10); max-width: 1060px; margin: 0 auto; padding-top: var(--s-10); padding-bottom: var(--s-6); }
.ftb .ftb-brand { max-width: 300px; }
.ftb .ftb-brand strong { font: 600 var(--t-title-3)/1 var(--font-logo); letter-spacing: 0; color: var(--ink); }
.ftb .ftb-brand p { margin-top: var(--s-3); font: 400 var(--t-footnote)/1.65 var(--font); color: var(--ink-3); }
.ftb .ftb-cols { display: flex; flex-wrap: wrap; gap: var(--s-10); margin-left: auto; }
.ftb .ftb-col { display: flex; flex-direction: column; gap: 0; }
.ftb .ftb-col h2 { margin-bottom: var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink); }
.ftb .ftb-col a { display: flex; align-items: center; min-height: 32px; font: 400 var(--t-ui)/1.45 var(--font); color: var(--ink-2); transition: color var(--dur-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ftb .ftb-col a:hover { color: var(--ink); } }
.ftb .ftb-mark {
  margin-top: var(--s-6); font: 600 clamp(120px, 21vw, 320px)/.78 var(--font-logo); letter-spacing: -0.05em; text-align: center;
  color: var(--line); user-select: none; pointer-events: none; translate: 0 12%;
  mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
}

/* ════════════════════════════════════════════════════════════════════════
   2. 공통 컨트롤 — v5.css 기본형(:where)이 app.css .btn(0,1,0)에 지므로 플랫폼 표면에서 명시도를 되살린다
   ════════════════════════════════════════════════════════════════════════ */
:is(body.x-plat, body.x-land) :is(main, footer) .btn { height: var(--h-md); padding: 0 18px; font-size: var(--t-ui); background: var(--ink); color: #fff; }
:is(body.x-plat, body.x-land) :is(main, footer) :is(.btn.sm, .btn-sm) { height: var(--h-sm); padding: 0 14px; font-size: var(--t-footnote); }
:is(body.x-plat, body.x-land) :is(main, footer) :is(.btn.lg, .btn-lg) { height: var(--h-lg); padding: 0 22px; font-size: var(--t-body); }
:is(body.x-plat, body.x-land) :is(main, footer) .btn.xl { height: var(--h-xl); padding: 0 28px; font-size: var(--t-card); }
:is(body.x-plat, body.x-land) :is(main, footer) :is(.btn.secondary, .btn-ghost) { background: var(--wash-2); color: var(--ink); }
:is(body.x-plat, body.x-land) :is(main, footer) .btn.ghost { background: transparent; color: var(--ink-2); }
:is(body.x-plat, body.x-land) :is(main, footer) :is(.btn.danger, .btn-danger) { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
:is(body.x-plat, body.x-land) :is(main, footer) .btn:disabled { background: var(--wash-2); color: var(--ink-4); }
:is(body.x-plat, body.x-land) :is(main, footer) .btn svg { width: var(--ic-sm); height: var(--ic-sm); }
:is(body.x-plat, body.x-land) :is(main, footer) :is(.btn.lg, .btn-lg) svg { width: var(--ic-md); height: var(--ic-md); }
@media (hover: hover) and (pointer: fine) {
  :is(body.x-plat, body.x-land) :is(main, footer) .btn:not(.secondary):not(.btn-ghost):not(.ghost):not(.danger):not(.btn-danger):not(:disabled):hover { background: var(--ink-hover); }
  :is(body.x-plat, body.x-land) :is(main, footer) :is(.btn.secondary, .btn-ghost):hover { background: var(--wash-3); }
  :is(body.x-plat, body.x-land) :is(main, footer) .btn.ghost:hover { background: var(--wash-2); color: var(--ink); }
  :is(body.x-plat, body.x-land) :is(main, footer) :is(.btn.danger, .btn-danger):hover { background: var(--danger-wash); }
}

/* 입력 — 48 · r12 · 흰 바탕(§4.2). 흐름 폼 입력도 같은 48 */
body.x-plat main .field { margin-bottom: var(--s-6); }
body.x-plat main :is(.field > label, .field > legend, .field-label) { display: block; margin-bottom: var(--s-2); padding: 0; font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink); }
body.x-plat main .field .opt { margin-left: 4px; font: 400 var(--t-caption)/1 var(--font); color: var(--ink-3); }
body.x-plat main .hint { margin-top: var(--s-2); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-plat main :is(.input, .input-prefix) {
  height: var(--h-lg); border: 1px solid var(--line-2); border-radius: var(--r-md); background: #fff;
  font: 400 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
body.x-plat main .input { padding: 0 16px; }
body.x-plat main textarea.input { height: auto; min-height: 120px; padding: 12px 16px; line-height: 1.6; }
body.x-plat main :is(.input:focus, .input-prefix:focus-within) { outline: 0; border-color: var(--ink); box-shadow: var(--ring-input); }
body.x-plat main .input:disabled { background: var(--canvas); color: var(--ink-3); border-color: var(--line); }
body.x-plat main .input::placeholder, body.x-plat main .input-prefix > input::placeholder { color: var(--ink-3); }
body.x-plat main .input-prefix > span { padding-left: 16px; font: 400 var(--t-ui)/1 var(--font); color: var(--ink-3); }
body.x-plat main .input-prefix > input { height: calc(var(--h-lg) - 2px); padding: 0 16px 0 2px; font: 400 var(--t-body)/1 var(--font); color: var(--ink); }
body.x-plat main :is(.input[aria-invalid="true"], .input-prefix:has(> input[aria-invalid="true"])) { border-color: var(--danger); box-shadow: var(--ring-danger); }
body.x-plat main .field-err { margin-top: var(--s-2); font: 500 var(--t-footnote)/1.45 var(--font); color: var(--danger); }
@media (hover: hover) and (pointer: fine) { body.x-plat main :is(.input:hover:not(:focus):not(:disabled), .input-prefix:hover:not(:focus-within)) { border-color: var(--line-3); } }
body.x-plat main input[type="checkbox"], body.x-plat main input[type="radio"] { accent-color: var(--ink); }
body.x-plat main .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
body.x-plat main .form-actions { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-7); }
body.x-plat main .form-err { margin-bottom: var(--s-6); padding: 12px 16px; border: 0; border-radius: var(--r-md); background: var(--danger-wash); color: var(--danger); font: 500 var(--t-ui)/1.45 var(--font); }
/* 파일 — 기본 'Choose File' 대신 보조 알약 + 파일 이름 */
body.x-plat :is(.wiz-file, .x-file) {
  position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: var(--h-xl); padding: 0 8px;
  border: 1px dashed var(--line-2); border-radius: var(--r-md); background: #fff;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
body.x-plat :is(.wiz-file, .x-file):has(input:focus-visible) { border-style: solid; border-color: var(--ink); box-shadow: var(--ring-input); }
body.x-plat :is(.wiz-file, .x-file) input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
body.x-plat :is(.wiz-file-btn, .x-file-btn) { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--h-md); padding: 0 16px; border-radius: var(--r-pill); background: var(--wash-2); color: var(--ink); font: 500 var(--t-footnote)/1 var(--font); pointer-events: none; }
body.x-plat :is(.wiz-file-btn, .x-file-btn) svg { width: var(--ic-sm); height: var(--ic-sm); }
body.x-plat :is(.wiz-file-name, .x-file-name) { min-width: 0; overflow: hidden; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { body.x-plat :is(.wiz-file, .x-file):hover { border-color: var(--line-3); background: var(--wash-1); } }

/* 칩(§4.5) — 상태 칩 24h 12/500 wash, 외곽선 칩, #태그도 같은 칩 */
body.x-plat main .chip { 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; box-shadow: none; }
body.x-plat main .chip.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
body.x-plat main .chip.strong { background: var(--ink); color: #fff; }
/* 필터 칩 — 32h 13/500, 켬 = 잉크 */
body.x-plat main :is(a.chip, .chip.filter) {
  height: var(--h-sm); padding: 0 14px; font-size: var(--t-footnote); 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-plat main :is(a.chip, .chip.filter).on { background: var(--ink); color: #fff; }
/* 개수 — 끔: ink-3(대비 4.5 이상, §1 명료), 켬: 흰 .6 */
body.x-plat main :is(a.chip, .chip.filter) .num { color: var(--ink-3); opacity: 1; }
body.x-plat main :is(a.chip, .chip.filter).on .num { color: #fff; opacity: .6; }
body.x-plat main :is(a.chip, .chip.filter):active { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) { body.x-plat main :is(a.chip, .chip.filter):not(.on):hover { background: var(--wash-3); color: var(--ink); } }

/* 빈 상태(§4.8) */
body.x-plat main .empty { max-width: 420px; margin: 0 auto; padding: var(--s-9) var(--s-6); text-align: center; }
body.x-plat main .empty-ico { display: inline-flex; width: 40px; height: 40px; margin: 0; border-radius: 50%; background: var(--wash-2); color: var(--ink-3); animation: none; }
body.x-plat main .empty-ico svg { width: var(--ic-lg); height: var(--ic-lg); }
body.x-plat main .empty-title { margin-top: var(--s-4); font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-plat main .empty-sub { max-width: 36ch; margin: 6px auto 0; font: 400 var(--t-ui)/1.65 var(--font); color: var(--ink-3); }
body.x-plat main .empty > .btn, body.x-plat main .empty > div { margin-top: var(--s-5); }
body.x-plat .me-empty-acts, body.x-plat .tm-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }

/* 킥커 — 영문 대문자 마케팅 표면만(§2.2). 한글 줄에는 쓰지 않는다 */
:is(body.x-plat, body.x-land) .kicker { font: 600 var(--t-micro)/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
/* 구분점(‘·’) — 장식, 글자 아님 */
body.x-plat .sep { margin: 0 6px; color: var(--ink-4); }
/* 숫자 — tabular, 자간 0 */
:is(body.x-plat, body.x-land) .num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* 메뉴(계정) — 헤더·/me 공용 */
body.x-plat .menu-head span, body.x-land .menu-head span { color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   3. 페이지 머리(§4.10) — 허브·목록: 위 96/48, 제목 display, 리드 17 ink-2 max 560, 행동 lg, 아래 48
   ════════════════════════════════════════════════════════════════════════ */
body.x-plat .plat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-6); padding-top: var(--s-11); margin-bottom: var(--s-9); }
body.x-plat .plat-head > * { grid-column: 1; }
body.x-plat .plat-head > .kicker { margin-bottom: var(--s-4); }
body.x-plat .plat-head > h1 { font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
body.x-plat .plat-lead { max-width: 560px; margin-top: var(--s-4); font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: pretty; }
body.x-plat .plat-acts { grid-column: 2 !important; grid-row: 1 / span 3; align-self: end; display: flex; gap: var(--s-2); }
body.x-plat .plat-head:has(> .kicker) .plat-acts { grid-row: 2 / span 2; }
body.x-plat .plat-acts .btn svg { width: var(--ic-md); height: var(--ic-md); }

/* ════════════════════════════════════════════════════════════════════════
   4. /meetups — --w-main(720) 가운데. 날짜 타일 64 · 정원 한 패밀리
   ════════════════════════════════════════════════════════════════════════ */
body.x-meetups .mu-page { max-width: calc(var(--w-main) + var(--gutter) * 2); padding-bottom: var(--s-11); }
body.x-meetups .page-body { padding: 0; }
body.x-meetups main .page-body > * + * { margin-top: var(--s-10); }
/* 플랫폼 페이지 안 섹션 h2 = title-3(24/20, §2.2) */
body.x-meetups .mu-sec-h, body.x-plat .rc-sec-head h2, body.x-plat .cx-band-head h2 { font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); }
body.x-meetups .mu-list { display: flex; flex-direction: column; margin-top: var(--s-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.x-meetups .mu-card {
  position: relative; display: flex; align-items: center; gap: var(--s-4); min-height: var(--row-media); margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border: 0; border-radius: 0; background: none; color: inherit; transition: background-color var(--dur-1) var(--ease-out);
}
body.x-meetups .mu-card + .mu-card { border-top: 1px solid var(--line); }
body.x-meetups .mu-card:active { background: var(--wash-2); }
@media (hover: hover) and (pointer: fine) { body.x-meetups .mu-card:hover { background: var(--wash-1); } body.x-meetups .mu-card:hover:active { background: var(--wash-2); } }
/* 날짜 타일(§4.5) — 64×64 r12 wash-2, 월 12/500 위 · 일 24/600 아래 */
body.x-plat :is(.mu-date, .agenda .erow-date) {
  flex: none; align-self: flex-start; display: 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-plat :is(.mu-date, .agenda .erow-date) > span { font: 500 var(--t-caption)/1 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-plat :is(.mu-date, .agenda .erow-date) > b { font: 600 var(--t-title-3)/1 var(--font); letter-spacing: 0; color: var(--ink); }
body.x-meetups .mu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body.x-meetups .mu-title { font: 600 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink); }
body.x-meetups .mu-meta { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-meetups .mu-topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* 정원 '3 / 8' — 15/600 + 13/400 ink-3 한 패밀리 */
body.x-meetups .mu-going { flex: none; display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; font: 400 var(--t-footnote)/1 var(--font); color: var(--ink-3); }
body.x-meetups .mu-going b { font: 600 var(--t-body)/1 var(--font); color: var(--ink); }
body.x-meetups .mu-teams {
  position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: var(--row); padding: 0 var(--s-5) 0 var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; color: var(--ink-2); font: 400 var(--t-ui)/1.45 var(--font);
  transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-meetups .mu-teams > span { flex: 1; min-width: 0; }
body.x-meetups .mu-teams > b { font-weight: 600; color: var(--ink); white-space: nowrap; }
body.x-meetups .mu-teams > svg { flex: none; width: var(--ic-sm); height: var(--ic-sm); color: var(--ink-3); }
/* 모집 중 섹션(recruitingSection)·소모임 띠 — 플랫폼 문법으로 */
body.x-plat .rc-sec { margin-block: 0; }
body.x-plat .rc-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
body.x-plat .rc-sec-head h2 { display: flex; align-items: center; gap: var(--s-2); }
body.x-plat .rc-sec-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 var(--t-micro)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
body.x-plat .rc-sec-more { display: inline-flex; align-items: center; min-height: var(--hit); font: 500 var(--t-ui)/1 var(--font); color: var(--ink); }
body.x-plat .rc-sec-sub, body.x-plat .cx-band-head p { margin: 4px 0 var(--s-4); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-plat .cx-band { margin-block: 0; }
body.x-plat .cx-band-head { margin-bottom: 0; }

/* 링크 카드 문법(§4.3) — 쉼: 헤어라인·r22. hover: -2px + ::after e-2 불투명도. 누름: .985 */
body.x-plat :is(.rc-card, .cx-chip-card, .rc-my, .mu-teams, .pf-soc, .pf-public-link) { position: relative; }
body.x-plat :is(.rc-card, .cx-chip-card, .rc-my, .pf-soc, .pf-public-link) {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: none;
  transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-plat :is(.rc-card, .cx-chip-card, .rc-my, .mu-teams, .pf-soc, .pf-public-link)::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
body.x-plat :is(.rc-card, .cx-chip-card, .rc-my, .mu-teams, .pf-soc, .pf-public-link):active { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) {
  body.x-plat :is(.rc-card, .cx-chip-card, .rc-my, .mu-teams, .pf-soc, .pf-public-link):hover { translate: 0 -2px; border-color: var(--line-2); box-shadow: none; }
  body.x-plat :is(.rc-card, .cx-chip-card, .rc-my, .mu-teams, .pf-soc, .pf-public-link):hover::after { opacity: 1; }
}
/* 모집 카드(recruitCard) */
body.x-plat .rc-cards { display: flex; flex-direction: column; gap: var(--s-3); }
body.x-plat .rc-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); color: inherit; }
body.x-plat .rc-card-logo { width: 48px; height: 48px; flex: none; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; object-fit: contain; }
body.x-plat .rc-card-logo-txt { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: var(--ink); color: #fff; font: 600 var(--t-card)/1 var(--font); }
body.x-plat .rc-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.x-plat .rc-card-soc { font: 500 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-plat .rc-card-title { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-plat .rc-card-meta { margin-top: 2px; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); white-space: normal; }
body.x-plat .rc-card-meta i { margin: 0 4px; font-style: normal; color: var(--ink-3); }
/* D-day(§4.5) — 상태 칩 문법, 3일 이하면 잉크 채움 */
body.x-plat .rc-dd { flex: none; 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); font-variant-numeric: tabular-nums; letter-spacing: 0; box-shadow: none; }
body.x-plat .rc-dd.is-hot { background: var(--ink); color: #fff; }
body.x-plat .rc-dd.is-soon { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
/* 소모임 띠 카드 */
body.x-plat .cx-band-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
body.x-plat .cx-chip-card { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-4); color: inherit; }
body.x-plat .cx-chip-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: var(--r-md); background: var(--ink); color: #fff; font: 600 var(--t-card)/1 var(--font); }
body.x-plat .cx-chip-logo.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
body.x-plat .cx-chip-logo img { width: 100%; height: 100%; object-fit: cover; }
body.x-plat .cx-chip-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.x-plat .cx-chip-t strong, body.x-plat .cx-chip-t span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.x-plat .cx-chip-t strong { font: 600 var(--t-ui)/1.45 var(--font); color: var(--ink); }
body.x-plat .cx-chip-t span { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   5. /recruit · /applications — --w-main 가운데(h1 x = /meetups와 같다)
   ════════════════════════════════════════════════════════════════════════ */
body.x-recruit .rc-plat { max-width: calc(var(--w-main) + var(--gutter) * 2); padding-top: 0; padding-bottom: var(--s-11); }
body.x-apps .rc-plat-head > h1 { font-size: var(--t-title-1); letter-spacing: -0.04em; }
body.x-apps .rc-plat-head { margin-bottom: var(--s-7); }
body.x-plat .rc-mylist { display: flex; flex-direction: column; gap: var(--s-3); }
body.x-plat .rc-my { padding: var(--s-5) var(--s-6); scroll-margin-top: calc(var(--bar-h) + 24px); }
body.x-plat .rc-my.is-new { border-color: var(--ink); }
body.x-plat .rc-my-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
body.x-plat .rc-my-top { display: flex; align-items: center; gap: var(--s-3); }
body.x-plat .rc-my-top .rc-card-logo { width: 40px; height: 40px; padding: 4px; }
body.x-plat .rc-my-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.x-plat .rc-my-id strong { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-plat .rc-st { 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; box-shadow: none; }
body.x-plat .rc-st.st-pass { background: var(--ink); color: #fff; }
body.x-plat .rc-st.st-draft { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
body.x-plat .rc-my-sub { margin: var(--s-3) 0 0 52px; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-plat .rc-my-result { margin: var(--s-3) 0 0 52px; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--canvas); }
body.x-plat .rc-my-result.is-pass { background: var(--ink); }
body.x-plat .rc-my-result p { font: 400 var(--t-ui)/1.65 var(--font); color: var(--ink); white-space: pre-wrap; }
body.x-plat .rc-my-result.is-pass p { color: #fff; }
body.x-plat .rc-my-result time { display: block; margin-top: 4px; font: 400 var(--t-caption)/1.4 var(--font); color: var(--ink-3); }
body.x-plat .rc-my-result.is-pass time { color: var(--d-fg-2); }
body.x-plat .rc-new { display: inline-flex; align-items: center; height: var(--h-xs); margin-bottom: var(--s-2); padding: 0 10px; border: 0; border-radius: var(--r-pill); background: #fff; color: var(--ink); font: 500 var(--t-caption)/1 var(--font); }

/* ════════════════════════════════════════════════════════════════════════
   6. 흐름 — /new 위저드(§5.8) · /meetups/new · 인증. 가운데 카드(--w-form 560 / --w-narrow 400)
   ════════════════════════════════════════════════════════════════════════ */
body.x-new .form-page { max-width: calc(var(--w-form) + var(--gutter) * 2); margin: 0 auto; padding: var(--s-11) var(--gutter) var(--s-11); }
body.x-new .wiz-hero { text-align: center; }
body.x-new .wiz-hero > h1 { margin-top: var(--s-4); font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
body.x-new .wiz-hero .form-sub { max-width: 480px; margin: var(--s-4) auto 0; font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: balance; }
/* 히어로 접기 — display:none 대신 grid-template-rows 1fr→0fr(--dur-3). 진행바가 튀지 않고 미끄러져 올라간다.
   양끝이 다 보이는 제자리 재배치라 --ease-inout(§2.11) */
body.x-new .wiz-hero-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-3) var(--ease-inout); }
body.x-new .wiz-hero-wrap > .wiz-hero { min-height: 0; overflow: hidden; transition: opacity var(--dur-2) var(--ease-out); }
body.x-new .wiz-hero-wrap .form-sub { margin-bottom: var(--s-7); } /* 여백은 접히는 상자 안에 — 패딩이면 0fr에서도 32가 남는다 */
body.x-new .wiz-page:not([data-at="1"]) .wiz-hero-wrap { grid-template-rows: 0fr; }
body.x-new .wiz-page:not([data-at="1"]) .wiz-hero-wrap > .wiz-hero { opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-in), visibility 0s linear var(--dur-2); }
/* 진행바 — 막대 하나가 scale: var(--p) 1로 차오른다(--dur-3) + 단계 이름 */
body.x-new .wiz-progress { display: block; margin: 0 0 var(--s-7); }
body.x-new .wiz-track { position: relative; display: block; height: 2px; overflow: hidden; border-radius: var(--r-pill); background: var(--line); }
body.x-new .wiz-fill { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ink); transform-origin: left; scale: var(--p, 0) 1; transition: scale var(--dur-3) var(--ease-out); }
body.x-new .wiz-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
body.x-new .wiz-seg { display: flex; align-items: center; gap: 6px; font: 500 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); transition: color var(--dur-2) var(--ease-out); }
body.x-new .wiz-seg:nth-child(2) { justify-content: center; }
body.x-new .wiz-seg:nth-child(3) { justify-content: flex-end; }
body.x-new .wiz-seg.on { color: var(--ink-2); }
body.x-new .wiz-seg[aria-current="step"] { color: var(--ink); }
body.x-new .wiz-seg .num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 var(--t-micro)/1 var(--font); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
body.x-new .wiz-seg.on .num { background: var(--ink); color: #fff; box-shadow: none; }
/* 스텝 — 카드 크롬 없음. 방향성 전환(다음 = 오른쪽에서 16px, 이전 = 왼쪽에서) */
body.x-new .form-card { position: relative; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.x-new .form-card.is-morph { overflow: hidden; transition: height var(--dur-3) var(--ease-out); }
body.x-new .wiz-step { animation: none; } /* app.css riseIn .26s 대신 아래 방향성 전환만 */
body.x-new .wiz-step.is-entering { animation: m-step-in var(--dur-3) var(--ease-out) both; }
body.x-new .wiz-step.is-leaving { position: absolute; inset: 0 0 auto 0; pointer-events: none; animation: m-step-out var(--dur-2) var(--ease-in) both; }
@keyframes m-step-in  { from { opacity: 0; translate: calc(var(--m-slide) * var(--dir, 1)) 0; } }
@keyframes m-step-out { to   { opacity: 0; translate: calc(var(--m-slide) * var(--dir, 1) * -1) 0; } }
body.x-new .wiz-head { margin-bottom: var(--s-6); }
body.x-new .wiz-q { font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
body.x-new .wiz-q:focus { outline: 0; }
body.x-new .wiz-qs { margin-top: var(--s-2); font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-3); text-wrap: pretty; }
/* 1단계 유형 — 1440: 5×2 타일(아이콘 + 라벨), 설명은 고른 카드 아래 캡션 한 줄 */
body.x-new .type-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
body.x-new .type-card { position: relative; display: block; cursor: pointer; }
body.x-new .type-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.x-new .type-card-in {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); height: 100%; min-height: 96px; padding: var(--s-3) var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; text-align: center;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-new .type-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--wash-2); color: var(--ink); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
body.x-new .type-ic svg { width: var(--ic-lg); height: var(--ic-lg); }
body.x-new .type-t { display: flex; flex-direction: column; min-width: 0; }
body.x-new .type-t strong { font: 500 var(--t-footnote)/1.3 var(--font); letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
body.x-new .type-sub, body.x-new .type-check { display: none; }
body.x-new .type-card input:checked + .type-card-in { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body.x-new .type-card input:checked + .type-card-in .type-ic { background: var(--ink); color: #fff; }
body.x-new .type-card input:focus-visible + .type-card-in { outline: var(--focus); outline-offset: var(--focus-offset); }
body.x-new .type-card:active .type-card-in { scale: var(--m-press-card); transition-duration: var(--dur-1); }
body.x-new .type-card.is-full { cursor: not-allowed; }
body.x-new .type-card.is-full input { cursor: not-allowed; }
body.x-new .type-card.is-full .type-card-in { background: var(--canvas); }
body.x-new .type-card.is-full :is(.type-ic, strong) { opacity: .4; }
body.x-new .type-desc { min-height: 20px; margin-top: var(--s-3); text-align: center; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { body.x-new .type-card:not(.is-full):hover .type-card-in { border-color: var(--line-2); } }
/* 2단계 기능 — 그룹 라벨 + 행(아이콘 타일 · 제목·설명 · 스위치) */
body.x-new .wiz-feats { border-top: 1px solid var(--line); }
body.x-new .wiz-group { padding: var(--s-4) 0 var(--s-2); border-bottom: 1px solid var(--line); }
body.x-new .wiz-group:last-child { border-bottom: 0; }
body.x-new .wiz-group-label { margin: 0 0 4px; font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-new .wiz-feat { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: var(--row-2); margin: 0 calc(var(--s-3) * -1); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
body.x-new .wiz-feat input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body.x-new .wiz-feat-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--wash-2); color: var(--ink); transition: opacity var(--dur-2) var(--ease-out); }
body.x-new .wiz-feat-ic svg { width: var(--ic-md); height: var(--ic-md); }
body.x-new .wiz-feat-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; transition: opacity var(--dur-2) var(--ease-out); }
body.x-new .wiz-feat-t strong { font: 500 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink); }
body.x-new .wiz-feat-t span { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
/* 스위치(§4.2) — 40×24, 노브 20, 켬 = 잉크, 노브 translate 스프링 */
body.x-new .wiz-sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--line-2); transition: background-color var(--dur-1) var(--ease-out); }
body.x-new .wiz-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--e-knob); transition: translate var(--dur-3) var(--spring), scale var(--dur-3) var(--spring); }
body.x-new .wiz-feat input:checked ~ .wiz-sw { background: var(--ink); }
body.x-new .wiz-feat input:checked ~ .wiz-sw::after { translate: 16px 0; }
body.x-new .wiz-feat:active .wiz-sw::after { scale: 1.08 .92; }
body.x-new .wiz-feat input:not(:checked) ~ :is(.wiz-feat-ic, .wiz-feat-t) { opacity: .5; }
body.x-new .wiz-feat input:focus-visible ~ .wiz-sw { outline: var(--focus); outline-offset: var(--focus-offset); }
body.x-new .wiz-lounge-note { margin: 4px 0 var(--s-2); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { body.x-new .wiz-feat:hover { background: var(--wash-1); } }
/* 3단계 — 미리보기 카드(중첩 r16) · 컬러 · 가입 방식 */
body.x-new .wiz-id-k { margin: 0 0 var(--s-2); }
body.x-new .wiz-id { --pv: var(--ink); --pv-fg: #fff; display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-7); padding: var(--s-4); border-radius: var(--r-lg); background: var(--canvas); }
body.x-new .wiz-id-logo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--r-md); background: var(--pv); color: var(--pv-fg); font: 600 var(--t-headline)/1 var(--font); transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
body.x-new .wiz-id-logo img { width: 100%; height: 100%; object-fit: cover; }
body.x-new .wiz-id-logo img[hidden] { display: none; }
body.x-new .wiz-id.has-img .wiz-id-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
body.x-new .wiz-id.has-img .wiz-id-logo b { display: none; }
body.x-new .wiz-id-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.x-new .wiz-id-t strong { overflow: hidden; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
body.x-new .wiz-id-t > span { overflow: hidden; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
body.x-new .wiz-id-t b { font-weight: 600; color: var(--ink); }
body.x-new .wiz-id.no-name .wiz-id-t strong, body.x-new .wiz-id.no-slug .wiz-id-t b { color: var(--ink-3); }
body.x-new .wiz-id-cta { flex: none; display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 14px; border-radius: var(--r-pill); background: var(--pv); color: var(--pv-fg); font: 500 var(--t-footnote)/1 var(--font); transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
body.x-new .swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: none; }
body.x-new .swatches label { position: relative; }
body.x-new .swatches .sw { width: 32px; height: 32px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring); }
body.x-new .swatches input:checked + .sw { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
/* !important: 스와치 색은 인라인 style="background:#fafafa"라서 이것만 인라인을 이겨야 한다 */
body.x-new .swatches input[value="#fafafa"] + .sw { background: linear-gradient(135deg, var(--ink) 50%, #fff 50%) !important; }
body.x-new .swatches .sw-custom .sw { width: 32px; height: 32px; }
body.x-new .swatches .sw-custom input[type="radio"]:checked + .sw { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
body.x-new .swatches label input:focus-visible + .sw, body.x-new .swatches .sw-custom input[type="radio"]:focus-visible + .sw { outline: var(--focus); outline-offset: 4px; }
body.x-new main .wiz-fs.field { min-width: 0; margin: 0; padding: 0; border: 0; }
body.x-new .wiz-fs > legend { float: left; width: 100%; }
body.x-new .wiz-fs > legend + * { clear: both; }
body.x-new .wiz-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
body.x-new .wiz-opt { position: relative; cursor: pointer; }
body.x-new .wiz-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.x-new .wiz-opt-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-2); row-gap: 4px; height: 100%; padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
body.x-new .wiz-opt-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); transition: box-shadow var(--dur-2) var(--ease-out); }
body.x-new .wiz-opt-in strong { display: flex; align-items: center; gap: 6px; font: 600 var(--t-ui)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
body.x-new .wiz-opt-in strong em { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--wash-2); font: 500 var(--t-caption)/1 var(--font); font-style: normal; color: var(--ink-2); }
body.x-new .wiz-opt-in strong em[hidden] { display: none; }
body.x-new .wiz-opt-in > span:last-child { grid-column: 2; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-new .wiz-opt input:checked + .wiz-opt-in { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body.x-new .wiz-opt input:checked + .wiz-opt-in .wiz-opt-dot { box-shadow: inset 0 0 0 6px var(--ink); }
body.x-new .wiz-opt input:focus-visible + .wiz-opt-in { outline: var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) { body.x-new .wiz-opt:hover .wiz-opt-in { border-color: var(--line-2); } }
/* 단계 내비 — 헤어라인 위, 이전 = 보조 lg / 다음 = 주 lg + chevron */
body.x-new .wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* /meetups/new — 위저드와 같은 폭·제목, 섹션 두 개 */
body.x-mnew .mx-page .wiz-hero { padding-bottom: var(--s-9); }
body.x-mnew .mx-form { margin-top: 0; }
body.x-mnew .mx-sec + .mx-sec { margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--line); }
body.x-mnew .mx-sec .form-err { margin-bottom: var(--s-4); scroll-margin: 96px 0 35vh; }
body.x-mnew .mx-sec .form-err:focus { outline: none; }
body.x-mnew .mx-group + .mx-group { margin-top: var(--s-5); }
body.x-mnew .mx-group-label { margin: 0 0 var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-mnew .mx-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
body.x-mnew .mx-opt .wiz-opt-in { column-gap: var(--s-3); row-gap: 2px; padding: var(--s-3) var(--s-4); }
body.x-mnew .mx-logo { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: var(--r-md); background: var(--wash-2); color: var(--ink); font: 600 var(--t-body)/1 var(--font); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
body.x-mnew .mx-logo img { width: 100%; height: 100%; object-fit: cover; }
body.x-mnew .mx-logo.has-img { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
body.x-mnew .mx-logo svg { width: var(--ic-md); height: var(--ic-md); }
body.x-mnew .mx-opt input:checked + .wiz-opt-in .mx-logo:not(.has-img) { background: var(--ink); color: #fff; }
body.x-mnew .mx-opt .wiz-opt-in strong { display: block; overflow: hidden; text-overflow: ellipsis; }
body.x-mnew .mx-opt .wiz-opt-in > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.x-mnew .mx-opt.is-off { cursor: not-allowed; }
body.x-mnew .mx-opt.is-off .wiz-opt-in { background: var(--canvas); }
body.x-mnew .mx-opt.is-off .wiz-opt-in > span:last-child { white-space: normal; }
body.x-mnew .mx-newname { display: none; margin: var(--s-4) 0 0; }
body.x-mnew .mx-group:has(input[value="new"]:checked) .mx-newname { display: block; animation: m-rise var(--dur-3) var(--ease-out) backwards; }
body.x-mnew .mx-newname .form-err { margin: var(--s-2) 0 0; }
/* 공개 범위 — 세그먼트(§4.2). 라디오 두 개, 알약 하나가 미끄러진다(motion.js [data-seg]) */
body.x-mnew .mu-scope { min-width: 0; margin: 0 0 var(--s-6); padding: 0; border: 0; }
body.x-mnew .mu-scope-seg { display: inline-flex; }
body.x-mnew .mu-scope-seg > label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 100%; margin: 0; font: 500 var(--t-footnote)/1 var(--font); color: var(--ink-3); transition: color var(--dur-1) var(--ease-out); }
body.x-mnew .mu-scope-seg > label:has(input:checked) { color: var(--ink); }
body.x-mnew .mu-scope-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (max-width: 699px) { body.x-mnew .mu-scope-seg input { inset: -7px 0; height: auto; } } /* 보이는 알약은 30, 누르는 자리는 44 */
body.x-mnew .mu-scope-seg > label:has(input:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); }
body.x-mnew .mu-scope:has(input[value="open"]:checked) .mu-scope-h-soc,
body.x-mnew .mu-scope:has(input[value="society"]:checked) .mu-scope-h-open { display: none; }

/* 인증 — --w-narrow 400 가운데, 제목 title-1, 리드 15, 전폭 lg */
body.x-auth .auth-wrap { max-width: calc(var(--w-narrow) + var(--gutter) * 2); margin: 0 auto; padding: var(--s-11) var(--gutter) var(--s-11); }
body.x-auth .auth-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; }
body.x-auth .auth-card > h1 { margin-top: 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-auth .auth-sub { margin: var(--s-4) 0 var(--s-8); font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
body.x-auth .auth-card form, body.x-auth .auth-card .form-err { text-align: left; }
body.x-auth main .auth-card .btn-block { width: 100%; margin-top: var(--s-2); }
body.x-auth .auth-alt { margin-top: var(--s-6); font: 400 var(--t-ui)/1.45 var(--font); color: var(--ink-3); }
body.x-auth .auth-alt a { position: relative; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); transition: text-decoration-color var(--dur-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.x-auth .auth-alt a:hover { text-decoration-color: var(--ink); } }

/* ════════════════════════════════════════════════════════════════════════
   7. /me — 사이드바 셸(B안) + Apple 설정 문법. 가운데 한 기둥(main 720) · 큰 제목 + 한 줄 설명(프로필은 히어로 카드) ·
   그룹 목록(v5.css .gl-*) · 행 → 시트(v4-app.css 17절 dialog.adm-sheet) · 즉시 저장 + 토스트(public/me.js).
   휴대폰(≤699)은 사이드바 대신 설정 앱 — 첫 화면(/me)이 메뉴 목록, 탭 화면은 탑바 '‹ 내 계정'.
   (v4-app.css의 body.has-sb 규칙(0,3,1)을 넘으려고 html body.x-me로 시작한다)
   ════════════════════════════════════════════════════════════════════════ */
/* 사이드바 — 맨 위 '나' 카드(= 프로필 행) · 라벨 없는 묶음 셋(간격 16) · 아래 플랫폼 링크(조용한 13) */
html body.x-me .sb { width: var(--sb-w); padding: var(--s-3); background: var(--canvas); }
html body.x-me .sb-head { height: var(--bar-h); margin: calc(var(--s-3) * -1) 0 0; padding: 0 var(--s-1) 0 var(--s-3); }
html body.x-me .sb-ident { display: inline-flex; align-items: center; height: var(--hit); font: 600 var(--t-title-3)/1 var(--font-logo); letter-spacing: 0; color: var(--ink); }
html body.x-me .sb-back { display: flex; align-items: center; gap: 10px; height: 32px; margin: var(--s-2) 0 var(--s-3); padding: 0 10px; border-radius: var(--r-sm); font: 500 var(--t-ui)/1 var(--font); color: var(--ink-2); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
html body.x-me .sb-me {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--row); margin: 0 0 var(--s-4); padding: var(--s-2) 10px var(--s-2) var(--s-2);
  border-radius: var(--r-md); color: var(--ink); transition: background-color var(--dur-1) var(--ease-out);
}
html body.x-me .sb-me-av { display: grid; flex: none; }
html body.x-me .sb-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body.x-me .sb-me-t strong { overflow: hidden; font: 600 var(--t-ui)/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
html body.x-me .sb-me-t span { font: 400 var(--t-caption)/1.3 var(--font); color: var(--ink-3); }
html body.x-me .sb-me.on { background: var(--wash-2); }
html body.x-me .sb-me:active { background: var(--wash-2); }
html body.x-me .sb-me:focus-visible { outline: var(--focus); outline-offset: -2px; }
html body.x-me .sb-grp { display: flex; flex-direction: column; gap: 2px; }
html body.x-me .sb-grp + .sb-grp { margin-top: var(--s-4); }
html body.x-me :is(.sb-link, .sb-util) {
  display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: var(--r-sm);
  font: 500 var(--t-ui)/1.45 var(--font); color: var(--ink-2); background: none; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html body.x-me :is(.sb-link, .sb-back) svg { width: var(--ic-md); height: var(--ic-md); color: var(--ink-3); opacity: 1; transition: color var(--dur-1) var(--ease-out); }
html body.x-me .sb-nav .sb-link.on, html body.x-me .sb-nav .sb-link.on:hover { background: var(--wash-2); color: var(--ink); font-weight: 500; }
html body.x-me .sb-link.on svg { color: var(--ink); }
html body.x-me .sb-foot-util { gap: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line); }
html body.x-me .sb-util { font-size: var(--t-footnote); color: var(--ink-3); }
html body.x-me .sb-util svg { width: var(--ic-sm); height: var(--ic-sm); color: var(--ink-4); opacity: 1; transition: color var(--dur-1) var(--ease-out); }
html body.x-me .sb-util .sb-badge { margin-left: auto; }
html body.x-me .sb-util-form { margin: 0; }
html body.x-me .sb-util-form .sb-util { width: 100%; border: 0; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  html body.x-me :is(.sb-link, .sb-util, .sb-back):hover { background: var(--wash-1); color: var(--ink); }
  html body.x-me :is(.sb-link, .sb-util, .sb-back):hover svg { color: var(--ink-2); }
  html body.x-me .sb-me:not(.on):hover { background: var(--wash-1); }
}
html body.x-me .content { padding: var(--s-3) var(--s-3) var(--s-3) 0; }
html body.x-me .panel { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1); }

/* 기둥 — main 720 가운데(패널이 아무리 넓어도 좌우 여백 대칭, axis). 휴대폰 첫 화면(메뉴 목록)은 데스크톱에서 숨긴다 */
html body.x-me .panel > .container { width: 100%; max-width: calc(var(--w-main) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } /* 거터는 앱·관리 .container와 같은 토큰(좁은 폭에서도 제목 x가 같다) */
html body.x-me .panel > .me-index { display: none; }
html body.x-me .me-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-6); padding: var(--s-9) 0 0; margin-bottom: var(--s-7); }
html body.x-me .me-head > h1 { grid-column: 1; font: 600 var(--t-title-2)/1.1 var(--font); letter-spacing: -0.035em; color: var(--ink); }
html body.x-me .me-lead { grid-column: 1; max-width: 560px; margin-top: var(--s-2); font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-3); }
html body.x-me .me-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--s-2); }
html body.x-me .me-body { padding-bottom: var(--s-11); }
html body.x-me .me-body > .empty:first-child { padding-top: var(--s-7); }
html body.x-me .gl-v.is-empty { color: var(--ink-3); }
html body.x-me .gl-h .num { color: var(--ink-3); }
html body.x-me .gl .empty { padding: var(--s-7) var(--s-6); }
html body.x-me .gl .empty > .btn { margin-top: var(--s-5); }

/* 프로필 히어로 — 흰 카드(r22 헤어라인) 가운데: 사진 96(누르면 사진 시트) · 이름(h1 title-2) · 전공 · 이메일 · 한 줄 소개 · 공개 프로필 */
html body.x-me .me-hero {
  display: flex; flex-direction: column; align-items: center; margin: var(--s-9) 0 var(--s-8); padding: var(--s-8) var(--s-6) var(--s-7);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); text-align: center;
}
html body.x-me .me-hero-av {
  position: relative; display: grid; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: scale var(--dur-3) var(--spring);
}
html body.x-me .me-hero-av > [data-av-slot] { display: grid; }
html body.x-me .me-hero-av .avatar { transition: filter var(--dur-1) var(--ease-out); }
html body.x-me .me-hero-av:active { scale: var(--m-press); transition-duration: var(--dur-1); }
html body.x-me .me-hero-av:focus-visible { outline: var(--focus); outline-offset: 4px; }
html body.x-me .me-hero-cam {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm);
  border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--paper);
}
html body.x-me .me-hero-cam svg { width: var(--ic-sm); height: var(--ic-sm); }
html body.x-me .me-hero-name { max-width: 100%; margin-top: var(--s-5); font: 600 var(--t-title-2)/1.1 var(--font); letter-spacing: -0.035em; color: var(--ink); overflow-wrap: anywhere; }
html body.x-me .me-hero-sub { display: flex; flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); font: 400 var(--t-body)/1.45 var(--font); color: var(--ink-3); }
html body.x-me .me-hero-sub > :not([hidden]) ~ :not([hidden])::before { content: '·'; margin: 0 6px; color: var(--ink-4); }
html body.x-me .me-hero-bio { max-width: 36em; margin-top: var(--s-3); font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
html body.x-me .me-hero-acts { display: flex; justify-content: center; margin-top: var(--s-6); }
html body.x-me .me-hero [hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { html body.x-me .me-hero-av:hover .avatar { filter: brightness(.94); } }

/* 시트 — 관리와 같은 dialog.adm-sheet. /me 몫: 값 시트의 접두(github.com/ · @) · 마크다운 편집/미리보기 · 사진 · 작업 폼(라벨 열 + 왼쪽 입력) */
html body.x-me .me-fs-seg { margin: var(--s-1) 0 var(--s-4); }
html body.x-me .me-fs-seg[hidden] { display: none; }
html body.x-me .me-fs-in {
  display: flex; align-items: center; height: var(--h-lg); padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--paper);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html body.x-me .me-fs-in:focus-within { border-color: var(--ink); box-shadow: var(--ring-input); }
html body.x-me .me-fs-in:has(> .input[aria-invalid="true"]) { border-color: var(--danger); box-shadow: var(--ring-danger); }
html body.x-me .me-fs-in[hidden], html body.x-me .me-fs-field > [hidden] { display: none; }
html body.x-me .me-fs-pre { flex: none; font: 400 var(--t-body)/1 var(--font); color: var(--ink-3); }
html body.x-me .me-fs-pre[hidden] { display: none; }
html body.x-me .me-fs-in > .input, html body.x-me .me-fs-in > .input:focus, html body.x-me .me-fs-in > .input[aria-invalid="true"] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body.x-me .me-fs-field textarea.input { min-height: 240px; max-height: 52vh; }
html body.x-me .me-fs-pv { min-height: 240px; max-height: 52vh; overflow-y: auto; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--canvas); }
html body.x-me .me-fs-pv:empty::before { content: '미리 볼 내용이 없어요.'; color: var(--ink-3); }
html body.x-me .me-sheet .hint { margin-top: var(--s-2); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
html body.x-me .me-sheet .hint:empty { display: none; }
html body.x-me .me-sheet .field-err[hidden] { display: none; }
html body.x-me .me-sheet .gl-box + .field-err, html body.x-me .me-sheet .gl-box + .hint { padding: 0 var(--s-4); }
html body.x-me :is(.me-wf, .me-pwf, [data-links-form]) .gl-field > .gl-t { flex: none; width: 88px; }
html body.x-me :is(.me-wf, .me-pwf, [data-links-form]) .gl-field > .gl-in { text-align: left; margin-left: -10px; }
html body.x-me [data-links-form] .gl-field > .gl-t { width: 20px; color: var(--ink-3); text-align: center; }
html body.x-me [data-links-form] .gl-field > .gl-in { margin-left: 0; }
html body.x-me .me-link-row[hidden] { display: none; }
html body.x-me [data-links] { --gl-inset: 56px; }
html body.x-me .me-wf .gl-field > .gl-t { width: 48px; }
html body.x-me .me-wf > * + * { margin-top: var(--s-3); }
html body.x-me .me-wf > .modal-title + * { margin-top: var(--s-5); }
html body.x-me .me-wf > .modal-foot { margin-top: var(--s-6); }
html body.x-me .me-wf [data-w-end][hidden], html body.x-me .me-wf [data-w-more][hidden] { display: none; }
html body.x-me .me-wmd { margin-top: var(--s-5); }
html body.x-me .me-wmd > .gl-h { display: block; }
html body.x-me .me-wmd textarea.input { min-height: 120px; max-height: 40vh; }
html body.x-me .me-wcover { --gl-inset: 76px; }
html body.x-me .me-wcover-th { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--r-sm); background: var(--canvas-2); color: var(--ink-4); }
html body.x-me .me-wcover-th svg { width: var(--ic-lg); height: var(--ic-lg); }
html body.x-me .me-wcover-th img { width: 100%; height: 100%; object-fit: cover; }
html body.x-me .me-wcover .btn { flex: none; }
html body.x-me .me-wcover .btn[hidden] { display: none; }
html body.x-me .me-wcover-pick { position: relative; cursor: pointer; }
html body.x-me .me-wcover-pick:has(input:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); }
html body.x-me .me-pwf > .gl-box { margin-top: var(--s-5); }
html body.x-me .me-photo-pv { display: grid; justify-content: center; margin: var(--s-4) 0 var(--s-3); }
html body.x-me .me-photo-lead { text-align: center; }
html body.x-me .me-photo-pick { cursor: pointer; }
/* 위험한 행(사진 지우기 · 작업 삭제)은 맨 아래 따로 떨어진 묶음 — 관리 멤버 시트의 '내보내기'와 같은 간격 */
html body.x-me .me-sheet .gl-box + .me-danger-box { margin-top: var(--s-6); }
html body.x-me .me-wf .me-wmore { margin-top: var(--s-6); }
html body.x-me .me-photo-pick:has(input:focus-visible) { outline: var(--focus); outline-offset: -2px; }
/* 시트 안 스위치 — 그룹(.gl) 밖 묶음에서도 v5 스위치 하나(앱 셸의 체크박스 18px 규칙을 이긴다). 휴대폰은 누르는 자리 44 */
html body.x-me .me-sheet .gl-box input.switch[type=checkbox] { flex: none; width: 40px; height: 24px; margin: 0 0 0 auto; border-radius: var(--r-pill); }
/* 시트 발(취소 · 저장) — 긴 시트(작업)에서도 늘 보이게 아래에 붙는다(유리). 짧은 시트에서는 모양이 같다 */
html body.x-me dialog.me-sheet .modal-foot {
  position: sticky; bottom: calc(-1 * var(--s-6)); z-index: 1; margin: var(--s-6) calc(-1 * var(--s-6)) calc(-1 * var(--s-6)); padding: var(--s-4) var(--s-6) var(--s-6);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html body.x-me .me-sheet .gl-row.is-busy { pointer-events: none; }
html body.x-me .me-sheet .gl-row.is-busy > :not(.gl-tx) { opacity: .5; }

/* 포트폴리오 — 작업 카드(세로형: 커버 16:10 가장자리까지 · 기간 12 · 제목 17/600 · 역할 13) 2열. 누르면 편집 시트 */
html body.x-me .me-works-sec .gl-h { margin-bottom: var(--s-3); }
html body.x-me .me-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
html body.x-me .me-work {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); color: inherit; text-align: left; font: inherit; cursor: pointer;
  transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
html body.x-me .me-work::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); }
html body.x-me .me-work:active { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
html body.x-me .me-work:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
html body.x-me .me-work.is-new { animation: m-rise var(--dur-4) var(--ease-out); }
html body.x-me .me-work-cover { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--canvas-2); color: var(--ink-4); }
html body.x-me .me-work-cover svg { width: var(--ic-xl); height: var(--ic-xl); --icon-stroke: 1.5; }
html body.x-me .me-work-cover img { width: 100%; height: 100%; object-fit: cover; }
html body.x-me .me-work-body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-5) var(--s-5); }
html body.x-me .me-work-meta { font: 400 var(--t-caption)/1.4 var(--font); color: var(--ink-3); }
html body.x-me .me-work-title { 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; }
html body.x-me .me-work-role { overflow: hidden; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
html body.x-me .me-work-priv { position: absolute; top: var(--s-3); left: var(--s-3); gap: 4px; background: var(--paper); color: var(--ink); box-shadow: var(--e-1); }
html body.x-me .me-work-priv svg { width: var(--ic-xs); height: var(--ic-xs); }
@media (hover: hover) and (pointer: fine) {
  html body.x-me .me-work:hover { translate: 0 -2px; border-color: var(--line-2); }
  html body.x-me .me-work:hover::after { opacity: 1; }
}

/* 관심사 — 칩(내 것: 잉크 채움 + 빼기 x · 추천: 워시 + 더하기). 32h · 13/500. 묶음 안 16 여백, 아래 직접 적기 행 */
html body.x-me .me-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-4); }
html body.x-me .me-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--wash-2); color: var(--ink-2); font: 500 var(--t-footnote)/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
html body.x-me .me-chip.on { padding: 0 10px 0 14px; background: var(--ink); color: #fff; }
html body.x-me .me-chip svg { width: 14px; height: 14px; flex: none; }
html body.x-me .me-chip.on svg { opacity: .64; }
html body.x-me .me-chip:active { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
html body.x-me .me-chip:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
html body.x-me .me-chip.is-new { animation: m-pop var(--dur-2) var(--ease-out); }
html body.x-me .me-chips-empty { width: 100%; margin: 0; padding: var(--s-1) 0; font: 400 var(--t-ui)/1.65 var(--font); color: var(--ink-3); }
html body.x-me .me-chips-empty[hidden] { display: none; }
html body.x-me .me-int-add { --gl-inset: 0px; }
html body.x-me .me-int-add::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
html body.x-me .me-int-add .gl-in { margin-left: -10px; }
@media (hover: hover) and (pointer: fine) {
  html body.x-me .me-chip:not(.on):hover { background: var(--wash-3); color: var(--ink); }
  html body.x-me .me-chip.on:hover { background: var(--ink-hover); }
  html body.x-me .me-chip.on:hover svg { opacity: 1; }
}

/* 내 캘린더 — 날짜 타일(§4.5 하나: 64 · ≤699 56 · r12 · 워시, 월 12/500 · 일 24/600 — 팀 앱·모임과 같은 크기라 vt-meet-date가 그대로 이어진다) · D-day 칩 · 출석 표시 24 */
html body.x-me .me-ev { --gl-inset: 92px; min-height: 88px; padding-top: var(--s-3); padding-bottom: var(--s-3); }
html body.x-me .me-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--wash-2); }
html body.x-me .me-date > span { font: 500 var(--t-caption)/1.2 var(--font); letter-spacing: 0; color: var(--ink-3); }
html body.x-me .me-date > b { font: 600 var(--t-title-3)/1 var(--font); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
html body.x-me .me-ev .gl-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body.x-me .me-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; }
html body.x-me .me-check svg { width: var(--ic-xs); height: var(--ic-xs); --icon-stroke: 2.4; }
html body.x-me .me-priv { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 500; }
html body.x-me .me-priv svg { width: var(--ic-xs); height: var(--ic-xs); --icon-stroke: 2; }
html body.x-me .me-att-empty { justify-content: flex-start; min-height: var(--row); padding-top: var(--s-4); padding-bottom: var(--s-4); font: 400 var(--t-ui)/1.65 var(--font); }

/* 내 팀 — 팀 카드 2열(로고 48 · 칩(새 소식 잉크 · 가입 신청 워시 · 승인 대기 외곽선) · 이름 17/600 · 호칭·역할 13 · 한 줄 소개 13) */
html body.x-me .me-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
html body.x-me .me-team {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); color: inherit;
  transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
html body.x-me .me-team::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); }
html body.x-me .me-team:active { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
html body.x-me .me-team:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
html body.x-me .me-team-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-4); }
html body.x-me .me-team-logo { flex: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); object-fit: contain; }
html body.x-me .me-team-txt { display: grid; place-items: center; border: 0; background: var(--ink); color: #fff; font: 600 var(--t-headline)/1 var(--font); }
html body.x-me .me-team-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
html body.x-me .me-team-name { overflow: hidden; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
html body.x-me .me-team-sub { margin-top: 2px; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
html body.x-me .me-team-tag { margin-top: var(--s-2); overflow: hidden; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) {
  html body.x-me .me-team:hover { translate: 0 -2px; border-color: var(--line-2); }
  html body.x-me .me-team:hover::after { opacity: 1; }
}

/* 연결 — 복사 행(제목 · 모노 주소 한 줄 말줄임 · 보조 sm '복사') · 팀 로고 32 */
html body.x-me .me-copy .gl-s { font-size: var(--t-caption); }
html body.x-me .me-copy-logo { flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); object-fit: contain; }
html body.x-me .me-copy-txt { background: var(--ink); color: #fff; font: 600 var(--t-footnote)/1 var(--font); }
html body.x-me .gl-row .btn { flex: none; }
html body.x-me .gl-box > form { margin: 0; }
html body.x-me .gl-box > form > .gl-row { width: 100%; }

/* 계정 · 휴대폰 첫 화면 — 로그아웃은 한 가지(가운데 빨간 글자, 아이콘 없음) */
html body.x-me .me-out { justify-content: center; }
html body.x-me .me-out .gl-t { flex: none; }
html body.x-me .me-idx-me { gap: var(--s-4); padding-top: var(--s-3); padding-bottom: var(--s-3); }
html body.x-me .me-idx-me > [data-av-slot] { display: grid; flex: none; }
html body.x-me .me-idx-me .gl-t { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; }
html body.x-me .gl-av .me-idx-me { --gl-inset: 96px; }

/* 입력·메뉴 — 탑바 계정 메뉴(v4-app.css 34·13.5)를 토큰으로 */
html body.x-plat.x-me .menu-pop { border-radius: var(--r-lg); box-shadow: var(--e-3); }
html body.x-plat.x-me .menu-pop > a, html body.x-plat.x-me .menu-pop > form > button { min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); font: 500 var(--t-ui)/1.45 var(--font); color: var(--ink-2); }
html body.x-plat.x-me .menu-pop .menu-head strong { font: 600 var(--t-ui)/1.45 var(--font); }
html body.x-plat.x-me .menu-pop .menu-head span { font: 400 var(--t-caption)/1.4 var(--font); color: var(--ink-3); }
@media (pointer: coarse) { html body.x-plat.x-me .menu-pop > a, html body.x-plat.x-me .menu-pop > form > button { min-height: var(--hit); } }
html body.x-me .tb-actions .menu > summary { position: relative; }
html body.x-plat.x-me .tb-actions .menu > summary::after { content: ''; position: absolute; inset: -6px; }
html body.x-plat.x-me .topbar .tb-burger.hd-burger { width: var(--h-md); height: var(--h-md); border-radius: 50%; }

/* 탑바 — ≤879 드로어(햄버거). ≤699는 햄버거 대신 '‹ 내 계정'(첫 화면은 '‹ maru'), 가운데 제목은 큰 제목이 지나가면 나타난다(tb-collapse) */
html body.x-me .topbar .hd-burger { display: inline-flex; }
html body.x-me .tb-back { display: none; }
html body.x-me .tb-title { font: 600 var(--t-card)/1.3 var(--font); }
@media (max-width: 879px) {
  html body.x-me .content { padding: 0; }
  html body.x-me .panel { border: 0; border-radius: 0; box-shadow: none; }
  html body.x-me .topbar { height: 56px; padding: 0 var(--s-2); background: var(--glass); border-bottom: 1px solid var(--line); }
  html body.x-me .me-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  html body.x-me .topbar .hd-burger { display: none; }
  html body.x-me .tb-back {
    position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: var(--hit); max-width: 30vw; padding: 0 var(--s-2) 0 0;
    color: var(--ink); font: 400 var(--t-body)/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; transition: opacity var(--dur-1) var(--ease-out);
  }
  html body.x-me .tb-back span { overflow: hidden; text-overflow: ellipsis; }
  html body.x-me .tb-back svg { flex: none; width: var(--ic-xl); height: var(--ic-xl); --icon-stroke: 1.5; }
  html body.x-me .tb-back:active { opacity: .5; transition-duration: 0s; }
  html body.x-me .tb-back:focus-visible { outline: var(--focus); outline-offset: 0; border-radius: var(--r-sm); }
  html body.x-me .panel > .container { padding: 0 var(--gutter); }
  html body.x-me.x-me-root .panel > .container:not(.me-index) { display: none; }
  html body.x-me.x-me-root .panel > .me-index { display: block; }
  html body.x-me .me-head { display: block; padding-top: var(--s-6); margin-bottom: var(--s-6); }
  html body.x-me .me-acts { margin-top: var(--s-4); }
  html body.x-me .me-body { padding-bottom: var(--s-10); }
  html body.x-me .me-hero { margin: var(--s-6) 0 var(--s-7); padding: var(--s-7) var(--s-5) var(--s-6); }
  html body.x-me .me-hero-acts .btn { position: relative; }
  /* 전공 · 이메일 — 좁으면 두 줄로 쌓는다('·'가 둘째 줄 머리에 혼자 남지 않게) */
  html body.x-me .me-hero-sub { flex-direction: column; align-items: center; gap: 2px; }
  html body.x-me .me-hero-sub > :not([hidden]) ~ :not([hidden])::before { content: none; }
  html body.x-me .me-ev { --gl-inset: 84px; min-height: 80px; }
  html body.x-me .me-date { width: 56px; height: 56px; }
  html body.x-me .me-hero-acts .btn::after { content: ''; position: absolute; inset: -2px 0; }
  html body.x-me .me-teams { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  /* 작업 카드 — 한 열 가로형(커버 112 · 글) */
  html body.x-me .me-works { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  html body.x-me .me-work { flex-direction: row; align-items: stretch; border-radius: var(--r-lg); }
  html body.x-me .me-work-cover { flex: none; width: 112px; aspect-ratio: auto; min-height: 96px; }
  html body.x-me .me-work-body { flex: 1; min-width: 0; justify-content: center; padding: var(--s-3) var(--s-4); }
  html body.x-me .me-work-priv { top: var(--s-2); left: var(--s-2); height: 20px; padding: 0 6px; font-size: var(--t-micro); }
  html body.x-me .me-chip { height: 36px; }
  html body.x-me .me-chip::after { content: ''; position: absolute; inset: -4px -2px; }
  /* 팀 카드 — 한 열 가로형(로고 48 왼쪽 · 이름 · 호칭·역할 · 소개 · 칩) */
  html body.x-me .me-team { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "logo name" "logo sub" "logo tag" ". chips"; column-gap: var(--s-4); align-items: start; padding: var(--s-4); border-radius: var(--r-lg); }
  html body.x-me .me-team-top { display: contents; }
  html body.x-me .me-team-logo { grid-area: logo; }
  html body.x-me .me-team-name { grid-area: name; }
  html body.x-me .me-team-sub { grid-area: sub; }
  html body.x-me .me-team-tag { grid-area: tag; margin-top: var(--s-1); }
  html body.x-me .me-team-chips { grid-area: chips; justify-content: flex-start; margin-top: var(--s-2); }
  html body.x-me .me-team-chips:empty { display: none; }
  html body.x-me .me-copy .btn::after { content: ''; position: absolute; inset: -6px -2px; }
  html body.x-me .me-copy .btn { position: relative; }
  html body.x-me .me-wf .gl-field > .gl-t { width: 40px; }
  html body.x-me .me-wcover .btn { height: 36px; }
  html body.x-me .me-sheet .gl-box input.switch[type=checkbox] { width: 44px; height: 44px; padding: 10px 2px; background-clip: content-box; }
  html body.x-me .me-sheet .gl-box input.switch[type=checkbox]::before { top: 12px; left: 4px; }
  html body.x-me dialog.me-sheet .modal-foot { bottom: 0; margin: var(--s-5) calc(-1 * var(--gutter)) calc(-1 * (var(--s-4) + env(safe-area-inset-bottom))); padding: var(--s-3) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════════════════
   8. /u/:id — 허브 2단(640 + 300 sticky, 사이 72) · /portfolio/:id — 읽기 720 가운데
   ════════════════════════════════════════════════════════════════════════ */
body.x-u .pf-page { padding-top: var(--s-11); padding-bottom: var(--s-11); }
/* 두 열 — 왼쪽(머리 + 본문) · 오른쪽 sticky 카드. 좁은 화면에선 머리 · 카드 · 본문 순서로 한 열(.pf-main display:contents) */
body.x-u .pf-grid { display: grid; grid-template-columns: minmax(0, 640px) 300px; column-gap: 72px; align-items: start; }
body.x-u .pf-main { min-width: 0; }
body.x-u .pf-side { position: sticky; top: calc(var(--bar-h) + var(--s-6)); }
/* eyebrow — Pretendard 13/500 + '·'(대문자·모노 폐지) */
body.x-u .pf-eyebrow { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: var(--s-3); font: 500 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
body.x-u .pf-name-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
body.x-u .pf-title { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); }
body.x-u .pf-acts { flex: none; display: flex; gap: var(--s-2); }
body.x-u .pf-bio { max-width: 560px; margin-top: var(--s-4); font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink); }
body.x-u .pf-major { margin-top: 4px; font: 400 var(--t-ui)/1.45 var(--font); color: var(--ink-3); }
body.x-u .pf-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s-4); }
body.x-u .contact-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
body.x-u .cchip { position: relative; display: inline-flex; align-items: center; gap: 4px; height: var(--h-sm); padding: 0 14px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 var(--t-footnote)/1 var(--font); color: var(--ink-2); transition: box-shadow var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
body.x-u .cchip svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { body.x-u .cchip:hover { box-shadow: inset 0 0 0 1px var(--line-3); color: var(--ink); } }
/* 오른쪽 sticky 카드 — 사진(vt-person) · 통계(0 숨김) · 소속 팀 */
body.x-u .pf-card { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; }
body.x-u .pf-portrait { width: 100%; border-radius: var(--r-xl); } /* 같은 사람은 표면마다 같은 모양 — 4:5 포트레이트(앱·공개 프로필과 같은 portraitTile, §4.3) */
body.x-u .pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; max-width: none; border: 0; border-radius: 0; }
body.x-u .pf-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 0; border: 0; }
body.x-u .pf-stats dt { font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-u .pf-stats dd { margin: 0; font: 600 var(--t-title-3)/1.1 var(--font); color: var(--ink); }
body.x-u .pf-side-h { margin-bottom: var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-u .pf-socs { display: flex; flex-direction: column; gap: var(--s-2); }
body.x-u .pf-soc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg); color: inherit; }
body.x-u .pf-soc img, body.x-u .pf-soc-txt { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); object-fit: contain; }
body.x-u .pf-soc-txt { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font: 600 var(--t-card)/1 var(--font); }
body.x-u .pf-soc-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.x-u .pf-soc-t strong { font: 600 var(--t-ui)/1.45 var(--font); color: var(--ink); }
body.x-u .pf-soc-t span { overflow: hidden; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
/* 본문 — 섹션 h2 title-3, 작업 그리드 2열 gap 32 */
body.x-u .pf-body { margin-top: var(--s-10); }
body.x-u .pf-sec + .pf-sec, body.x-u .pf-body > * + * { margin-top: var(--s-10); }
body.x-u .pf-h2 { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-6); font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); }
body.x-u .pf-h2 .num { font: 500 var(--t-body)/1 var(--font); color: var(--ink-3); }
body.x-u .pf-note { font: 400 var(--t-body)/1.65 var(--font); color: var(--ink-2); }
body.x-u .pf-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
body.x-u .prose-sm { font: 400 var(--t-body)/1.65 var(--font); color: var(--ink); }
/* 작업 카드(journalCard · pfItemCard) — 썸네일 r12, 메타 12, 제목 17/600. 텍스트 화살표 숨김 */
body.x-u .jcard { display: flex; flex-direction: column; gap: var(--s-2); color: inherit; }
body.x-u .jcard-thumb { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-md); background: var(--canvas-2); transition: scale var(--dur-3) var(--spring); }
body.x-u .jcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 커버 없는 작업 — canvas-2 + 제목 20/600 가운데(인라인 배경 #211e17을 이긴다) */
body.x-u .jcard-thumb.jt-proj { background: var(--canvas-2) !important; }
body.x-u .jcard-thumb.jt-proj b { padding: 0 var(--s-6); text-align: center; font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
body.x-u .jcard-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--s-1); font: 400 var(--t-caption)/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
body.x-u .jcard-meta .dot { margin: 0; color: var(--ink-3); }
body.x-u .jcard-title { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-u .jcard-arrow { display: none; }
body.x-u .jcard:active .jcard-thumb { scale: var(--m-press-card); }
@media (hover: hover) and (pointer: fine) { body.x-u .jcard:hover .jcard-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
/* 함께한 모임(archive.js) — 섹션 머리를 한국어 h2로 */
body.x-u .pf-sec-head { margin-bottom: var(--s-6); }
body.x-u .pf-sec-eyebrow { display: none; }
body.x-u .pf-sec-head h2 { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); }
body.x-u .pf-sec-head h2 .sec-count { margin: 0; font: 500 var(--t-body)/1 var(--font); letter-spacing: 0; color: var(--ink-3); }

body.x-pfd .pfd-page { max-width: calc(var(--w-main) + var(--gutter) * 2); padding-top: var(--s-9); padding-bottom: var(--s-11); }
body.x-pfd .pfd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-8); }
body.x-pfd .pfd-back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--hit); font: 500 var(--t-ui)/1 var(--font); color: var(--ink-2); transition: color var(--dur-1) var(--ease-out); }
body.x-pfd .pfd-back svg { width: var(--ic-sm); height: var(--ic-sm); }
@media (hover: hover) and (pointer: fine) { body.x-pfd .pfd-back:hover { color: var(--ink); } }
body.x-pfd .pfd-own { display: flex; gap: 4px; }
body.x-pfd .pfd-own form { display: contents; }
body.x-pfd .icon-act { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--h-md); height: var(--h-md); border-radius: 50%; color: var(--ink-2); transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring); }
body.x-pfd .icon-act::after { content: ''; position: absolute; inset: -2px; }
body.x-pfd .icon-act svg { width: var(--ic-md); height: var(--ic-md); }
@media (hover: hover) and (pointer: fine) { body.x-pfd .icon-act:hover { background: var(--wash-2); color: var(--ink); } }
body.x-pfd .pfd-head > h1 { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
body.x-pfd .pfd-by { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font: 400 var(--t-ui)/1.45 var(--font); color: var(--ink-3); }
body.x-pfd .pfd-by a { position: relative; color: var(--ink); font-weight: 500; }
body.x-pfd .pfd-by a::after { content: ''; position: absolute; inset: -12px -6px; }
body.x-pfd .pfd-by .sep { margin: 0; }
body.x-pfd .pfd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-5); }
body.x-pfd .pfd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s-3); }
body.x-pfd .pfd-cover { margin: var(--s-9) 0 0; overflow: hidden; border-radius: var(--r-xl); background: var(--canvas-2); }
body.x-pfd .pfd-cover img { width: 100%; }
body.x-pfd .pfd-prose { margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--line); font: 400 var(--t-lead)/1.75 var(--font); letter-spacing: -0.01em; color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════
   9. 오류(§4.8) — 가운데. 킥커 · display 문장 · 17 설명 · lg 주 + lg 보조
   ════════════════════════════════════════════════════════════════════════ */
body.x-err .err-page { max-width: calc(var(--w-form) + var(--gutter) * 2); padding-top: calc(var(--s-11) + var(--s-7)); padding-bottom: var(--s-11); text-align: center; }
body.x-err .err-title { margin-top: var(--s-4); font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
body.x-err .err-msg { max-width: 440px; margin: var(--s-4) auto 0; font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: pretty; }
body.x-err .err-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }

/* ════════════════════════════════════════════════════════════════════════
   10. 랜딩 하단(body.x-land) — 섹션 128/64, h2 title-1, 기능 카드 r22·24, 쇼케이스 e-3·r22. 스토리·히어로는 그대로
   ════════════════════════════════════════════════════════════════════════ */
body.x-land .land-sec { padding: var(--s-12) 0 0; }
body.x-land .land-head { max-width: 720px; margin: 0 auto; text-align: center; }
body.x-land .land-head > .kicker { margin-bottom: var(--s-4); }
body.x-land .land-h2 { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
body.x-land .land-lead { max-width: 560px; margin: var(--s-4) auto 0; font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: balance; }
body.x-land .land-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
body.x-land .story-melt + .features { padding-top: 0; }
body.x-land .features .land-head { margin-bottom: var(--s-9); }
body.x-land .features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
/* 기능 카드·분야 타일 — 카드 hover 한 문법(§4.3): -2px + ::after e-2 불투명도 */
body.x-land :is(.feat, .flow-tile) { position: relative; transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
body.x-land :is(.feat, .flow-tile)::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
body.x-land .feat { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; }
body.x-land .feat-num { font: 600 var(--t-micro)/1.3 var(--font); letter-spacing: .12em; color: var(--ink-3); }
body.x-land .feat h3 { margin: var(--s-2) 0 0; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
body.x-land .feat p { font: 400 var(--t-body)/1.65 var(--font); letter-spacing: -0.01em; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  body.x-land :is(.feat, .flow-tile):hover { translate: 0 -2px; border-color: var(--line-2); }
  body.x-land :is(.feat, .flow-tile):hover::after { opacity: 1; }
}
/* aura — 3원색 마스크는 유지(§9.3). 마스크를 베이스와 같은 상자에(inset 0 24px), 둘 다 keep-all + balance */
body.x-land .aura { padding: var(--s-12) 0 0; }
body.x-land .aura-stage { position: relative; max-width: 780px; margin: 0 auto; padding: 0 var(--s-6); }
body.x-land :is(.aura-base, .aura-mask) { margin: 0; text-align: center; font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; word-break: keep-all; text-wrap: balance; }
body.x-land .aura-base { color: var(--ink); }
body.x-land .aura-mask { position: absolute; inset: 0 var(--s-6); pointer-events: none; }
/* 분야 흐름 — 타일 r16, 17/600. 상주 will-change 없음 */
body.x-land .land-fields { padding-bottom: 0; }
body.x-land .flow { margin-top: var(--s-7); }
body.x-land .flow-cols { max-width: 1060px; padding: 0 var(--gutter); gap: var(--s-4); }
body.x-land .flow-col { gap: var(--s-4); will-change: auto; }
body.x-land .flow-tile { height: 96px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
/* 쇼케이스 — 프레임 r22 · e-3 */
body.x-land .showcase .land-head { margin-bottom: var(--s-9); }
body.x-land .browser-frame { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--canvas); box-shadow: var(--e-3); }
body.x-land .browser-bar { display: flex; align-items: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); background: var(--canvas); }
body.x-land .browser-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-5); }
body.x-land .browser-url { flex: 1; max-width: 340px; margin: 0 auto; padding: 4px var(--s-3); border-radius: var(--r-sm); background: #fff; text-align: center; font: 400 var(--t-caption)/1.4 var(--font); color: var(--ink-3); }
body.x-land .browser-body { height: 460px; }
body.x-land .browser-veil { background: linear-gradient(to bottom, transparent 55%, #fff 96%); padding-bottom: var(--s-7); }
/* 하단 CTA — 128 위, 128 아래(≤699 64/64). 버튼은 xbtn lg + chevron */
body.x-land .cta-band { padding: var(--s-12) 0; text-align: center; }
body.x-land .xbtn-lg { height: var(--h-lg); padding: 0 22px; font-size: var(--t-body); }
/* 하단 xbtn(히어로 밖) — 누름 .97 → 스프링 복귀, 색 --dur-1 */
body.x-land :is(.land-sec, .browser-veil) .xbtn { transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring); }
body.x-land :is(.land-sec, .browser-veil) .xbtn:active { transform: none; scale: var(--m-press); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) { body.x-land :is(.land-sec, .browser-veil) .xbtn-dark:hover { background: var(--ink-hover); } body.x-land :is(.land-sec, .browser-veil) .xbtn-soft:hover { background: var(--wash-3); } }
body.x-land .xbtn svg { width: var(--ic-md); height: var(--ic-md); flex: none; }

/* ════════════════════════════════════════════════════════════════════════
   11. 반응형 — drawer(≤879): 헤더 내비 → 햄버거 · 2단 → 1단. compact(≤699): 거터 20 · 바 56
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 880px) { .hd-sheet { display: none; } }
@media (max-width: 879px) {
  .hd-x .hd-nav { display: none; }
  .hd-burger { display: inline-flex; }
  .hd-x .hd-actions .hd-create, .hd-x .hd-actions .hd-login { display: none; }
  body.x-u .pf-grid { display: flex; flex-direction: column; align-items: stretch; }
  body.x-u .pf-portrait { width: 160px; } /* 앱 모바일 프로필과 같은 크기 */
  body.x-u .pf-main { display: contents; }
  body.x-u .pf-top { order: 0; }
  body.x-u .pf-side { order: 1; position: static; margin-top: var(--s-7); }
  body.x-u .pf-body { order: 2; }
  body.x-u .pf-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
  body.x-u .pf-card .pf-socs { flex: 1 0 100%; }
  body.x-land .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  /* 헤더·거터 */
  .hd-x .hd-actions { gap: var(--s-1); }
  /* 페이지 머리 — 위 48, 행동은 아래로 */
  body.x-plat .plat-head { display: block; padding-top: var(--s-9); margin-bottom: var(--s-8); }
  body.x-plat .plat-acts { margin-top: var(--s-6); }
  body.x-plat main .form-row { grid-template-columns: minmax(0, 1fr); }
  /* /meetups · /recruit */
  body.x-meetups .mu-card { gap: var(--s-3); padding-right: 0; }
  body.x-plat :is(.mu-date, .agenda .erow-date) { width: 56px; height: 56px; }
  body.x-plat .cx-band-row { display: flex; gap: var(--s-3); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  body.x-plat .cx-band-row::-webkit-scrollbar { display: none; }
  body.x-plat .cx-chip-card { flex: 0 0 76%; scroll-snap-align: start; }
  body.x-plat .cx-chip-card:only-child { flex-basis: 100%; }
  body.x-plat .rc-card { align-items: flex-start; gap: var(--s-3); padding: var(--s-5); }
  body.x-plat .rc-card-logo { width: 40px; height: 40px; }
  body.x-plat .rc-my { padding: var(--s-5); }
  body.x-plat :is(.rc-my-sub, .rc-my-result) { margin-left: 0; }
  body.x-plat .rc-sec-head { align-items: center; }
  /* /new — 1열 리스트 행 64 + 하단 sticky 바(유리, xl 전폭) */
  body.x-new .form-page { padding-top: var(--s-9); padding-bottom: 0; }
  body.x-new .type-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body.x-new .type-card + .type-card { border-top: 1px solid var(--line); }
  body.x-new .type-card-in { flex-direction: row; justify-content: flex-start; gap: var(--s-3); min-height: var(--row-2); padding: var(--s-2) 0; border: 0; border-radius: 0; text-align: left; box-shadow: none; }
  body.x-new .type-card input:checked + .type-card-in { border: 0; box-shadow: none; background: transparent; }
  body.x-new .type-t { flex: 1; }
  body.x-new .type-t strong { font: 500 var(--t-body)/1.45 var(--font); }
  body.x-new .type-sub { display: block; font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
  body.x-new .type-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); color: transparent; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
  body.x-new .type-check svg { width: 14px; height: 14px; --icon-stroke: 2; }
  body.x-new .type-card input:checked + .type-card-in .type-check { background: var(--ink); color: #fff; box-shadow: none; }
  body.x-new .type-card input:focus-visible + .type-card-in { outline-offset: -2px; }
  body.x-new .type-desc { display: none; }
  body.x-new .wiz-opts { grid-template-columns: minmax(0, 1fr); }
  body.x-new .wiz-nav {
    position: sticky; bottom: 0; z-index: var(--z-sticky); margin: var(--s-7) calc(var(--gutter) * -1) 0; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  }
  body.x-new .wiz-nav > span:empty { display: none; }
  body.x-new main .wiz-nav .btn { flex: 1; height: var(--h-xl); padding: 0 var(--s-5); font-size: var(--t-card); }
  body.x-new main .wiz-nav .btn.secondary { flex: 0 0 auto; }
  body.x-new .swatches { gap: var(--s-3); }
  body.x-new .swatches label::after { content: ''; position: absolute; inset: -6px; }
  body.x-mnew .mx-opts { grid-template-columns: minmax(0, 1fr); }
  body.x-mnew .mx-page { padding-bottom: 0; }
  body.x-mnew .mu-scope-seg > label::after { content: ''; position: absolute; inset: -7px 0; }
  /* 인증 */
  body.x-auth .auth-wrap { padding-top: var(--s-9); padding-bottom: var(--s-10); }
  body.x-auth .auth-alt a::after { content: ''; position: absolute; inset: -14px -6px; }
  /* /u · /portfolio */
  body.x-u .pf-page { padding-top: var(--s-9); }
  body.x-u .pf-name-row { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  body.x-u .pf-acts .btn.ghost { background: var(--wash-2); color: var(--ink); } /* 좁은 화면에선 이름 아래 줄 — 투명 버튼은 글자만 떠 보여 보조로 */
  body.x-u .pf-body { margin-top: var(--s-9); }
  body.x-u .pf-work { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  body.x-u .cchip::after { content: ''; position: absolute; inset: -6px 0; }
  body.x-pfd .pfd-page { padding-top: var(--s-5); }
  body.x-pfd .pfd-top { margin-bottom: var(--s-6); }
  body.x-pfd .pfd-meta .btn { position: relative; }
  body.x-pfd .pfd-meta .btn::after { content: ''; position: absolute; inset: -6px 0; }
  /* 오류 */
  body.x-err .err-page { padding-top: var(--s-11); }
  body.x-err .err-acts .btn { flex: 1 1 100%; }
  /* 랜딩 하단 */
  body.x-land .land-sec, body.x-land .aura { padding-top: var(--s-10); }
  body.x-land .cta-band { padding: var(--s-10) 0; }
  body.x-land .features-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  body.x-land .feat { padding: var(--s-5); }
  body.x-land .features .land-head, body.x-land .showcase .land-head { margin-bottom: var(--s-7); }
  body.x-land .flow-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.x-land .flow-col:nth-child(3) { display: none; }
  body.x-land .browser-body { height: 320px; }
  /* 푸터 */
  :is(body.x-plat, body.x-land) .ft { margin-top: var(--s-10); }
  .ftb .ftb-in { flex-direction: column; gap: var(--s-7); padding-top: var(--s-9); }
  .ftb .ftb-cols { margin-left: 0; gap: var(--s-7); }
  .ftb .ftb-col a { min-height: var(--hit); min-width: var(--hit); }
  .ftb .ftb-mark { font-size: 22vw; }
  /* 누르는 자리 44 — 보이는 크기는 그대로 */
  .hd-x .hd-brand { position: relative; }
  .hd-x .hd-actions .btn::after { content: ''; position: absolute; inset: -2px 0; }
  body.x-plat main :is(.btn.sm, .btn-sm, a.chip, .chip.filter) { position: relative; }
  body.x-plat main :is(.btn.sm, .btn-sm, a.chip, .chip.filter)::after { content: ''; position: absolute; inset: -6px 0; }
  body.x-plat main :is(.btn, .btn-lg)::after { content: ''; position: absolute; inset: -2px 0; }
  body.x-plat main :is(.btn.lg, .btn-lg, .btn.xl)::after { content: none; }
  body.x-plat .rc-sec-more { position: relative; }
}

/* ════════════════════════════════════════════════════════════════════════
   12. 움직임을 줄이면 — 진입·스텝·시트는 v5 토큰(0px·200ms)이 줄인다. 여기선 남는 이동만 끈다
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hd-x.is-open .hd-sheet-nav a { animation: none; }
  body.x-new .wiz-hero-wrap { transition: none; }
  /* 스크롤 리빌(view 타임라인)은 스크롤에 묶여 늘 'running'으로 남는다 — 움직임을 줄이면 처음부터 보인다 */
  :is(body.x-land, body.x-plat) [data-reveal] { animation: none; opacity: 1; translate: none; }
}