/* ════════════════════════════════════════════════════════════════════════
   maru v5 — 토큰 · 전역 기반 · 모션 문법 (SPEC scratchpad/design/SPEC.md)
   layout()이 app.css보다 먼저 싣는다. 모든 규칙은 :where()로 명시도 0 — 표면 CSS가 늘 이긴다.
   예외: @view-transition · ::view-transition-* · reduced-motion 블록 · @keyframes.
   §0 토큰  §1 전역 기반  §2 유틸리티  §3 컴포넌트 기본형  §4 모션  §5 View Transitions  §6 reduced-motion
   색·반경 리터럴은 이 파일 한 곳에만 둔다. 다른 파일의 토큰 블록은 여기 값의 별칭이다.
   ════════════════════════════════════════════════════════════════════════ */

/* ── §0 토큰 ─────────────────────────────────────────────────────────── */
:root {
  /* 색 — 잉크 계단(흰 바탕 대비) */
  --ink: #17150f;        /* 18.3:1 제목·본문·주 버튼 */
  --ink-hover: #2c2922;
  --ink-2: #4a4844;      /* 9.1:1 보조 본문 */
  --ink-3: #6b6965;      /* 5.5:1 메타·캡션·힌트 = 텍스트 최저선 */
  --ink-4: #999895;      /* 2.9:1 글자 금지 — 장식·비활성 */
  --ink-5: #d5d5d4;      /* 비활성 테두리·빈 슬롯 */
  --paper: #ffffff;
  --canvas: #fafaf9;
  --canvas-2: #f5f4f2;
  --line: rgba(23, 21, 15, .09);
  --line-2: rgba(23, 21, 15, .15);
  --line-3: rgba(23, 21, 15, .24);
  --wash-1: rgba(23, 21, 15, .03);
  --wash-2: rgba(23, 21, 15, .05);
  --wash-3: rgba(23, 21, 15, .08);
  --danger: #b91c1c;
  --danger-line: rgba(185, 28, 28, .30);
  --danger-wash: rgba(185, 28, 28, .07);
  --tint: #17150f;       /* 팀색 — layout()이 accentUsable일 때만 인라인으로 덮는다 */
  --tint-fg: #ffffff;
  --d-bg: #0b0b0c;
  --d-glass: rgba(22, 22, 24, .55);
  --d-glass-strong: rgba(18, 18, 20, .84);
  --d-fg: #f4f4f5;
  --d-fg-2: rgba(244, 244, 245, .72);
  --d-fg-3: rgba(244, 244, 245, .60);  /* 다크 텍스트 최저선 */
  --d-fg-4: rgba(244, 244, 245, .40);  /* 글자 금지 */
  --d-line: rgba(255, 255, 255, .12);
  --d-line-2: rgba(255, 255, 255, .07);
  --d-wash-1: rgba(255, 255, 255, .04);
  --d-wash-2: rgba(255, 255, 255, .08);
  --d-wash-3: rgba(255, 255, 255, .14);

  /* 서체 */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --font-logo: 'Cal Sans', var(--font);
  --font-grotesk: 'Space Grotesk', var(--font); /* 랜딩 .xhero-title · 팀이 고른 'Grotesk' 테마 전용(layout fonts 옵션이 싣는다) */

  /* 글자 크기 */
  --t-hero: 84px; --t-display: 56px; --t-title-1: 40px; --t-title-2: 32px; --t-title-3: 24px;
  --t-headline: 20px; --t-card: 17px; --t-lead: 17px; --t-body: 15px; --t-ui: 14px;
  --t-footnote: 13px; --t-caption: 12px; --t-micro: 11px;

  /* 간격 4/8 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 96px; --s-12: 128px;

  /* 크기 */
  --h-xs: 24px; --h-sm: 32px; --h-md: 40px; --h-lg: 48px; --h-xl: 56px; --hit: 44px;
  --bar-h: 64px; --row: 56px; --row-2: 64px; --row-media: 72px;
  --ic-xs: 12px; --ic-sm: 16px; --ic-md: 18px; --ic-lg: 20px; --ic-xl: 24px;
  --av-xs: 24px; --av-sm: 32px; --av-md: 40px; --av-lg: 64px; --av-xl: 96px;
  --sb-w: 256px; --inspector-w: 360px;

  /* 반경 */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* 깊이 */
  --e-1: 0 1px 2px rgba(23, 21, 15, .06);
  --e-2: 0 2px 10px rgba(23, 21, 15, .06);
  --e-3: 0 24px 64px -16px rgba(23, 21, 15, .22), 0 2px 8px rgba(23, 21, 15, .06);
  --e-knob: 0 1px 3px rgba(23, 21, 15, .20), 0 0 0 .5px rgba(23, 21, 15, .06);
  --e-d: 0 24px 64px -16px rgba(0, 0, 0, .60);
  --e-board: 0 32px 96px -24px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .10);

  /* 재질 */
  --glass: rgba(255, 255, 255, .72);
  --glass-blur: blur(20px) saturate(180%);
  --scrim: rgba(23, 21, 15, .24);
  --scrim-blur: blur(6px);
  --d-scrim: rgba(0, 0, 0, .50);

  /* 포커스 */
  --focus: 2px solid var(--ink);
  --focus-dark: 2px solid rgba(255, 255, 255, .9);
  --focus-offset: 2px;
  --ring-input: 0 0 0 4px rgba(23, 21, 15, .08);
  --ring-danger: 0 0 0 4px rgba(185, 28, 28, .12);

  /* 레이아웃 */
  --w-wide: 1012px; --w-main: 720px; --w-form: 560px; --w-narrow: 400px; --gutter: 24px;

  /* z */
  --z-sticky: 10; --z-bar: 40; --z-fab: 50; --z-drawer-scrim: 60; --z-drawer: 70;
  --z-popover: 80; --z-modal-scrim: 90; --z-modal: 100; --z-toast: 110; --z-coach: 120;

  /* 모션 */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms; --dur-5: 640ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.16, 1, .3, 1);
  --spring-pop: cubic-bezier(.34, 1.36, .64, 1);
  --m-rise: 8px; --m-slide: 16px; --m-pop: .96; --m-press: .97; --m-press-card: .985; --m-press-icon: .92; --m-press-chip: .96;
  --stagger: 40ms;

  /* 레거시 이징 이름 — 정의는 여기 한 곳(SPEC §2.12). 파일들은 쓰기만 한다 */
  --x-ease: var(--ease-out); --ar-ease: var(--ease-out); --ck-ease: var(--ease-out); --sx-ease: var(--ease-out);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* ζ=0.80, 오버슈트 1.5% — 누름 복귀·스위치·토스트·시트 스냅·모달 배율 */
    --spring: linear(0, 0.038, 0.131, 0.249, 0.376, 0.499, 0.611, 0.707, 0.788, 0.853, 0.903, 0.942, 0.969, 0.989, 1.001, 1.009, 1.013, 1.015, 1.015, 1.014, 1.012, 1.01, 1.008, 1.007, 1);
    /* ζ=0.62, 오버슈트 8.3% — 64px 이하 작은 것의 등장만 */
    --spring-pop: linear(0, 0.059, 0.199, 0.376, 0.555, 0.717, 0.85, 0.951, 1.019, 1.06, 1.08, 1.083, 1.076, 1.064, 1.049, 1.034, 1.021, 1.01, 1.003, 0.997, 0.994, 0.993, 0.993, 0.994, 1);
  }
}
@media (max-width: 699px) {
  :root {
    --t-hero: 44px; --t-display: 36px; --t-title-1: 30px; --t-title-2: 26px; --t-title-3: 20px;
    --t-headline: 18px; --t-lead: 16px; --gutter: 20px; --bar-h: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-rise: 0px; --m-slide: 0px; --m-pop: 1; --m-press: 1; --m-press-card: 1; --m-press-icon: 1; --m-press-chip: 1;
    --stagger: 0ms; --dur-3: 200ms; --dur-4: 200ms; --dur-5: 200ms; --spring: linear; --spring-pop: linear;
  }
}

/* ── §1 전역 기반 ────────────────────────────────────────────────────── */
/* 요소 리셋 — app.css에서 옮겨 왔다. 명시도 0이라 아래 컴포넌트 기본형(:where)이 이긴다 */
:where(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(img) { max-width: 100%; display: block; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(svg) { display: block; }
:where(h1, h2, h3) { letter-spacing: -0.03em; line-height: 1.25; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) {
  font-family: var(--font); font-size: var(--t-body); line-height: 1.65; letter-spacing: -0.01em;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--ink); caret-color: var(--ink);
}
/* 한국어 조판 */
:where(html:lang(ko) body) { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
:where(h1, h2, h3, .t-display, .t-title-1, .t-title-2, .t-title-3, .page-title) { text-wrap: balance; }
:where(p, li, dd, .t-body, .t-lead) { text-wrap: pretty; }
:where(code, pre, kbd, .url, .mono) { font-family: var(--font-mono); word-break: break-all; letter-spacing: 0; }
/* 컨트롤(.btn·칩·배지·탭)은 한 줄. 맨 <button>은 드롭 영역처럼 문장이 든 것도 있어 줄바꿈은 두되, anywhere가 최소 폭을 한 글자로 줄여 라벨을 쪼개지 않게 normal로 되돌린다 */
:where(.btn, .chip, .badge, [role="tab"]) { white-space: nowrap; }
:where(button) { overflow-wrap: normal; }
::selection { background: rgba(23, 21, 15, .14); }
:where(.scroll-y, .sx-sheet-b, .menu-pop) { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }
:where(.prose a, .t-body a, .hint a) {
  color: var(--ink); 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);
}
:where(.prose a:hover, .t-body a:hover, .hint a:hover) { text-decoration-color: var(--ink); }
/* 포커스 — 파란 기본 링 대신 잉크 2px 하나 */
:where(:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); }
:where(:focus:not(:focus-visible)) { outline: none; }
:where(.on-dark :focus-visible, .sx :focus-visible, [data-hd-dark] :focus-visible, .ck-host :focus-visible) { outline: var(--focus-dark); }
:where(.sb a:focus-visible, .row:focus-visible, .menu-pop :focus-visible) { outline-offset: -2px; }
:where(svg) { stroke-width: var(--icon-stroke, 1.7); }

/* ── §2 유틸리티 ─────────────────────────────────────────────────────── */
:where(.t-display)  { font: 600 var(--t-display)/1.1 var(--font); letter-spacing: -0.045em; text-wrap: balance; }
:where(.t-title-1)  { font: 600 var(--t-title-1)/1.1 var(--font); letter-spacing: -0.04em; text-wrap: balance; }
:where(.t-title-2)  { font: 600 var(--t-title-2)/1.1 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
:where(.t-title-3)  { font: 600 var(--t-title-3)/1.3 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
:where(.t-headline) { font: 600 var(--t-headline)/1.3 var(--font); letter-spacing: -0.02em; }
:where(.t-card)     { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; }
:where(.t-lead)     { font: 400 var(--t-lead)/1.65 var(--font); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: pretty; }
:where(.t-body)     { font: 400 var(--t-body)/1.65 var(--font); letter-spacing: -0.01em; text-wrap: pretty; }
:where(.t-ui)       { font: 500 var(--t-ui)/1.45 var(--font); letter-spacing: -0.01em; }
:where(.t-foot)     { font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-3); }
:where(.t-cap)      { font: 400 var(--t-caption)/1.4 var(--font); color: var(--ink-3); }
:where(.num)        { font-variant-numeric: tabular-nums; letter-spacing: 0; }
:where(.kicker)     { font: 600 var(--t-micro)/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
:where(.eyebrow)    { font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink-3); }
:where(.sr-only) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── §3 컴포넌트 기본형 ───────────────────────────────────────────────
   표면 CSS가 기존 선택자에서 이 값을 쓰도록 옮기는 동안의 기준 구현. 새 마크업은 이 클래스를 그대로 쓴다. */

/* 버튼 — .btn[.sm/.md/.lg/.xl][.primary/.tint/.secondary/.ghost/.danger/.danger-fill/.icon] */
:where(.btn) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-md); padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font: 500 var(--t-ui)/1 var(--font); letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
:where(.btn) :where(svg) { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
:where(.btn.sm) { height: var(--h-sm); padding: 0 14px; font-size: var(--t-footnote); }
:where(.btn.sm) :where(svg) { width: 14px; height: 14px; }
:where(.btn.lg) { height: var(--h-lg); padding: 0 22px; font-size: var(--t-body); }
:where(.btn.lg) :where(svg) { width: var(--ic-md); height: var(--ic-md); }
:where(.btn.xl) { height: var(--h-xl); padding: 0 28px; font-size: 17px; }
:where(.btn.xl) :where(svg) { width: var(--ic-lg); height: var(--ic-lg); }
:where(.btn.tint) { background: var(--tint); color: var(--tint-fg); }
:where(.btn.secondary) { background: var(--wash-2); color: var(--ink); }
:where(.btn.ghost) { background: transparent; color: var(--ink-2); }
:where(.btn.danger) { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
:where(.btn.danger-fill) { background: var(--danger); color: #fff; }
:where(.btn.icon) { width: var(--h-md); padding: 0; background: transparent; color: var(--ink-2); border-radius: 50%; }
:where(.btn.icon.sm) { width: var(--h-sm); }
:where(.btn.icon)::after { content: ''; position: absolute; inset: -6px; } /* 보이는 크기가 44 미만이어도 누르는 자리는 44 */
:where(.on-dark .btn, .btn.on-dark) { background: #fff; color: var(--ink); }
:where(.on-dark .btn.secondary) { background: var(--d-wash-3); color: #fff; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
:where(.btn:active) { scale: var(--m-press); transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
:where(.btn.icon:active) { scale: var(--m-press-icon); }
:where(.btn:disabled, .btn[aria-disabled="true"]) { background: var(--wash-2); color: var(--ink-4); box-shadow: none; cursor: default; scale: 1; }
:where(.btn[aria-busy="true"]) { color: transparent; pointer-events: none; }
:where(.btn[aria-busy="true"])::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; opacity: 0;
  animation: m-spin 800ms linear infinite, m-fade var(--dur-1) linear 300ms forwards; /* 300ms 안에 끝나면 보이지 않는다 */
}
:where(.btn.secondary[aria-busy="true"], .btn.ghost[aria-busy="true"])::before { border-color: rgba(23, 21, 15, .25); border-top-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  :where(.btn:hover) { background: var(--ink-hover); }
  :where(.btn.tint:hover) { background: color-mix(in oklab, var(--tint) 88%, #000); }
  :where(.btn.secondary:hover) { background: var(--wash-3); }
  :where(.btn.ghost:hover, .btn.icon:hover) { background: var(--wash-2); color: var(--ink); }
  :where(.btn.danger:hover) { background: var(--danger-wash); }
  :where(.btn.danger-fill:hover) { background: color-mix(in oklab, var(--danger) 88%, #000); }
  :where(.on-dark .btn:hover) { background: rgba(255, 255, 255, .88); }
  :where(.btn:disabled:hover, .btn[aria-disabled="true"]:hover) { background: var(--wash-2); }
}

/* 입력 */
:where(.input) {
  width: 100%; height: var(--h-lg); padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: #fff; color: var(--ink); font: 400 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  appearance: none;
}
:where(.input)::placeholder { color: var(--ink-3); }
:where(.input.md) { height: var(--h-md); padding: 0 12px; }
:where(.input.sm) { height: var(--h-sm); padding: 0 10px; border-radius: var(--r-sm); font-size: var(--t-footnote); }
:where(.input.search-xl) { height: var(--h-xl); padding-left: 52px; border-radius: var(--r-pill); }
:where(textarea.input) { height: auto; min-height: 120px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
:where(select.input) {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6965' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 12px;
}
:where(.input:focus) { outline: none; border-color: var(--ink); box-shadow: var(--ring-input); }
:where(.input[aria-invalid="true"]) { border-color: var(--danger); box-shadow: var(--ring-danger); }
:where(.input:disabled) { background: var(--canvas); color: var(--ink-4); }
@media (hover: hover) and (pointer: fine) { :where(.input:hover:not(:focus):not(:disabled)) { border-color: var(--line-3); } }
@media (max-width: 699px) { :where(.input, textarea.input, select.input) { font-size: 16px; } } /* iOS 확대 방지 */
:where(.field) { margin-bottom: var(--s-6); }
:where(.field > label, .field-label) { display: block; margin-bottom: var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink); }
:where(.field .opt) { font-size: var(--t-caption); font-weight: 400; color: var(--ink-3); }
:where(.hint) { margin-top: var(--s-2); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
:where(.field-err) { display: flex; align-items: center; gap: 6px; margin-top: var(--s-2); font: 500 var(--t-footnote)/1.45 var(--font); color: var(--danger); }

/* 스위치 — <input type="checkbox" class="switch" role="switch"> */
:where(input.switch) {
  appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border-radius: var(--r-pill);
  background: var(--line-2); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out);
}
:where(input.switch)::before {
  content: ''; position: absolute; left: 2px; top: 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);
}
:where(input.switch:checked) { background: var(--ink); }
:where(input.switch:checked)::before { translate: 16px 0; }
:where(input.switch:active)::before { scale: 1.08 .92; }
:where(input.switch:disabled) { opacity: .4; cursor: default; }
:where(.on-dark input.switch:checked, .sx input.switch:checked) { background: #fff; }
:where(.on-dark input.switch:checked, .sx input.switch:checked)::before { background: var(--ink); }

/* 체크박스·라디오 */
:where(input.check) {
  appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--line-3); border-radius: var(--r-xs);
  background: #fff center / 12px no-repeat; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
:where(input.check:checked) {
  border-color: var(--ink); background-color: var(--ink); animation: m-pop var(--dur-2) var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* 라디오 — 테두리 두께(레이아웃 속성)를 보간하지 않는다. 선택하면 잉크 원 안의 흰 점(6)이 m-pop으로 나타난다 */
:where(input.radio) { appearance: none; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--line-3); border-radius: 50%; background: #fff; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
:where(input.radio:checked) { border-color: var(--ink); background: var(--ink); }
:where(input.radio:checked)::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: m-pop var(--dur-2) var(--ease-out); }

/* 세그먼트 — [data-seg] 트랙 + 미끄러지는 알약 하나(.seg-ind, motion.js가 --ind-x/--ind-w를 준다) */
:where([data-seg]) { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 3px; border-radius: var(--r-pill); background: var(--wash-2); }
:where([data-seg].sm) { height: var(--h-sm); }
:where([data-seg]) > :where(a, button, label) {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 0 14px;
  border-radius: var(--r-pill); font: 500 var(--t-footnote)/1 var(--font); color: var(--ink-3); white-space: nowrap; cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
:where([data-seg]) > :where(.on, [aria-current], [aria-selected="true"], [aria-pressed="true"]) { color: var(--ink); }
:where([data-seg]) > :where(a, button, label):active { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
:where(.seg-ind) {
  position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: var(--ind-w, 0px); translate: var(--ind-x, 0px) 0;
  border-radius: var(--r-pill); background: #fff; box-shadow: var(--e-1), 0 0 0 .5px var(--line);
}
:where([data-seg].is-ready) > :where(.seg-ind) { transition: translate var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out); }
/* 밑줄 탭(URL 탭) 인디케이터 — 서버가 활성 탭 안에 막대 하나(.tab-bar)를 그린다. 두 문서 모두 크기가 정해진 vt-tab을
   가지므로 UA group 애니메이션이 x·폭을 --dur-3 --ease-out으로 보간한다(= 밑줄이 다음 탭으로 미끄러짐, §5.3) */
:where(.utabs) > :where(a) { position: relative; }
:where(.tab-bar) { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); pointer-events: none; view-transition-name: vt-tab; }
/* 같은 페이지 세그먼트용 JS 막대(레거시) — URL 탭에는 쓰지 않는다 */
:where(.tabs-ind) {
  position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--ink); transform-origin: left;
  translate: var(--ind-x, 0px) 0; scale: var(--ind-w, 0) 1;
}
:where(.is-ready > .tabs-ind, .is-ready .tabs-ind) { transition: translate var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out); }

/* 메타 줄 — 구분점은 둘째 항목부터 ::before(공백 텍스트 노드 없음 → 간격 대칭). ≤699에서는 한 줄에 하나씩 쌓아
   줄 끝·줄 머리에 점이 매달리지 않게 한다 */
:where(.meta-dots) { display: flex; flex-wrap: wrap; column-gap: 0; }
:where(.meta-dots) > :where(*) + :where(*)::before { content: '·'; margin: 0 6px; color: var(--ink-4); }
@media (max-width: 699px) {
  :where(.meta-dots) > :where(*) { flex-basis: 100%; }
  :where(.meta-dots) > :where(*) + :where(*)::before { content: none; }
}

/* 칩 */
:where(.chip) {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-xs); padding: 0 10px; border-radius: var(--r-pill);
  background: var(--wash-2); color: var(--ink-2); font: 500 var(--t-caption)/1 var(--font); letter-spacing: 0; white-space: nowrap;
}
:where(.chip.strong) { background: var(--ink); color: #fff; }
:where(.chip.outline) { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
:where(.chip.filter, a.chip, button.chip) { height: var(--h-sm); padding: 0 14px; font-size: var(--t-footnote); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring); }
:where(.chip.filter.on, a.chip.on, button.chip.on, .chip[aria-pressed="true"]) { background: var(--ink); color: #fff; }
:where(.chip .num) { opacity: .6; }
:where(a.chip, button.chip, .chip.filter):active { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) { :where(a.chip:not(.on):hover, button.chip:not(.on):hover, .chip.filter:not(.on):hover) { background: var(--wash-3); } }

/* 배지·점 */
:where(.badge) {
  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;
  animation: m-pop var(--dur-4) var(--spring-pop);
}
:where(.on-dark .badge, .sx .badge) { background: #fff; color: var(--ink); }
:where(.dot:empty) { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
:where(.dot.live:empty) { animation: m-pulse 1600ms ease-in-out infinite; }
:where(.dday) { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* 카드 */
:where(.card) { position: relative; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; }
:where(.card-link) { position: relative; display: block; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; color: inherit; text-decoration: none; transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring); }
:where(.card-link)::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); }
:where(.card-link:active) { translate: 0 0; scale: var(--m-press-card); transition-duration: var(--dur-1); }
@media (hover: hover) and (pointer: fine) {
  :where(.card-link:hover) { translate: 0 -2px; border-color: var(--line-2); }
  :where(.card-link:hover)::after { opacity: 1; }
}
@media (max-width: 699px) { :where(.card) { padding: var(--s-5); } }

/* 목록 행 */
:where(.row) { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: var(--row); padding: 0 var(--s-4); color: inherit; text-decoration: none; transition: background-color var(--dur-1) var(--ease-out); }
:where(.row + .row) { border-top: 1px solid var(--line); }
:where(.row.two) { min-height: var(--row-2); }
:where(.row.media) { min-height: var(--row-media); }
:where(a.row:active, button.row:active) { background: var(--wash-2); }
@media (hover: hover) and (pointer: fine) { :where(a.row:hover, button.row:hover) { background: var(--wash-1); } }

/* 그룹 목록 — Apple 설정 문법(관리 · /me 공용). <section class="gl"> 머리(.gl-h 13/600 ink-3) · 둥근 묶음(.gl-box r16 헤어라인,
   쉴 때 그림자 없음) · 꼬리(.gl-f 13 ink-3). 행(.gl-row): 56(아바타 40 행은 64) · 좌우 16 · 요소 12 — 왼쪽 라벨(.gl-t 15/500),
   오른쪽 값(.gl-v 15 ink-3)·컨트롤·chevron(.gl-chev 16 ink-4). 구분선은 앞에 보이는 행이 있을 때만, 글자 시작점부터(--gl-inset).
   묶음은 행을 잘라 둥글게 두고(overflow hidden), 메뉴·끌기가 있는 묶음(.gl-open)만 첫·끝 행을 직접 둥글린다 */
:where(.gl) + :where(.gl) { margin-top: var(--s-7); }
:where(.gl-h) { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); padding: 0 var(--s-4); font: 600 var(--t-footnote)/1.45 var(--font); letter-spacing: 0; color: var(--ink-3); }
:where(.gl-hn) { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
:where(.gl-f) { margin: var(--s-2) 0 0; padding: 0 var(--s-4); font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-3); text-wrap: pretty; }
:where(.gl-box) { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
:where(.gl-box) + :where(.gl-box) { margin-top: var(--s-3); }
:where(.gl-box.gl-open) { overflow: visible; }
:where(.gl-open) > :where(:first-child) { border-top-left-radius: calc(var(--r-lg) - 1px); border-top-right-radius: calc(var(--r-lg) - 1px); }
:where(.gl-open) > :where(:last-child) { border-bottom-left-radius: calc(var(--r-lg) - 1px); border-bottom-right-radius: calc(var(--r-lg) - 1px); }
:where(.gl-row) {
  position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--row); margin: 0; padding: var(--s-2) var(--s-4);
  border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em;
  text-align: left; text-decoration: none; transition: background-color var(--dur-1) var(--ease-out);
}
:where(.gl-row[hidden], .gl[hidden], .gl-box[hidden]) { display: none; }
:where(.gl-row:not([hidden]) ~ .gl-row)::before { content: ''; position: absolute; top: 0; left: var(--gl-inset, var(--s-4)); right: 0; height: 1px; background: var(--line); pointer-events: none; }
:where(.gl-row:has(> .gl-ic:first-child)) { --gl-inset: 60px; }
:where(.gl-av) { --gl-inset: 68px; }
:where(.gl-av-sm) { --gl-inset: 60px; }
:where(.gl-av) > :where(.gl-row) { min-height: var(--row-2); }
:where(.gl-row) > :where(.avatar, .gl-ic, .gl-chev, .chip, .btn, input.switch, input.radio, form) { flex: none; }
:where(.gl-row) > :where(form) { margin: 0; }
:where(.gl-ic) { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--wash-2); color: var(--ink); }
:where(.gl-ic) :where(svg) { width: var(--ic-md); height: var(--ic-md); }
:where(.gl-tx) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:where(.gl-t) { min-width: 0; font: 500 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink); }
:where(.gl-row) > :where(.gl-t) { flex: 1 1 auto; }
:where(.gl-s) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-3); }
:where(.gl-v) { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font: 400 var(--t-body)/1.45 var(--font); color: var(--ink-3); }
:where(.gl-v.mono) { font-family: var(--font-mono); font-size: var(--t-ui); color: var(--ink); }
:where(.gl-chev) { display: grid; margin-right: -4px; color: var(--ink-4); }
:where(.gl-chev) :where(svg) { width: var(--ic-sm); height: var(--ic-sm); }
:where(.gl-danger) :where(.gl-t) { color: var(--danger); }
:where(.gl-danger) > :where(.gl-ic) { background: var(--danger-wash); color: var(--danger); }
:where(.gl-empty) { justify-content: center; color: var(--ink-3); font-size: var(--t-ui); }
:where(.gl-sw) :where(.gl-s) { white-space: normal; overflow: visible; }
:where(.gl-sw) > :where(input.switch), :where(.gl-row) > :where(input.radio) { margin-left: auto; }
:where(.gl-check) { flex: none; display: grid; margin-left: auto; color: var(--ink); visibility: hidden; }
:where(.gl-check) :where(svg) { width: var(--ic-md); height: var(--ic-md); }
:where([aria-checked="true"]) > :where(.gl-check) { visibility: visible; }
/* 행 안 입력 — 테두리 없이 행에 녹아 있다가, 가리키면 워시 · 누르면 워시 + 링. 라벨 행(.gl-field)은 값이 오른쪽 */
:where(.gl-in) {
  flex: 1 1 auto; min-width: 0; width: 100%; height: var(--h-md); margin: calc(-1 * var(--s-1)) 0; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 400 var(--t-body)/1.45 var(--font); letter-spacing: -0.01em;
  outline: none; text-overflow: ellipsis; transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
:where(.gl-in)::placeholder { color: var(--ink-3); }
:where(.gl-field) > :where(.gl-t) { flex: 0 0 auto; }
:where(.gl-field) > :where(.gl-in) { text-align: right; }
:where(.gl-in:focus) { background: var(--wash-2); box-shadow: var(--ring-input); }
:where(.gl-in[aria-invalid="true"]) { background: var(--danger-wash); box-shadow: var(--ring-danger); }
:where(a.gl-row, button.gl-row, label.gl-row) { cursor: pointer; }
:where(button.gl-row:disabled) { cursor: default; }
:where(button.gl-row:disabled) > :where(*) { opacity: .45; }
:where(a.gl-row:active, button.gl-row:not(:disabled):active) { background: var(--wash-2); }
:where(.gl-row:focus-visible) { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  :where(a.gl-row:hover, button.gl-row:not(:disabled):hover, label.gl-row:hover) { background: var(--wash-1); }
  :where(.gl-in:hover:not(:focus)) { background: var(--wash-1); }
  :where(a.gl-row:hover, button.gl-row:not(:disabled):hover) > :where(.gl-chev) { color: var(--ink-3); }
}
@media (max-width: 699px) {
  :where(.gl-h, .gl-f) { padding: 0 var(--s-1); }
  :where(.gl-in) { font-size: 16px; } /* iOS 확대 방지 */
}

/* 오버레이 공통 — 모달(<dialog class="modal"> 또는 .modal-back > .modal), 모바일에서는 시트 */
:where(.modal-back) {
  position: fixed; inset: 0; z-index: var(--z-modal-scrim); display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px; background: var(--scrim); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur);
  animation: m-fade var(--dur-3) var(--ease-out);
}
:where(.modal-back.hidden) { display: none; }
:where(.modal-back.closing) { animation: m-fade-out var(--dur-2) var(--ease-in) both; }
:where(.modal, dialog.modal) {
  position: relative; z-index: var(--z-modal); width: min(640px, 100vw - 32px); max-height: calc(100vh - 12vh - 32px); overflow: auto;
  padding: var(--s-6); border: 0; border-radius: var(--r-xl); background: #fff; color: var(--ink); box-shadow: var(--e-3);
}
:where(.modal-back > .modal) { animation: m-pop var(--dur-3) var(--spring), m-rise var(--dur-3) var(--ease-out); }
:where(.modal-back.closing > .modal) { animation: m-fade-out var(--dur-2) var(--ease-in) both; }
:where(.modal-title) { font: 600 var(--t-card)/1.3 var(--font); letter-spacing: -0.015em; padding-right: 40px; }
:where(.modal-close) {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--wash-2); color: var(--ink-2); transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
:where(.modal-close)::after { content: ''; position: absolute; inset: -6px; }
:where(.modal-close) :where(svg) { width: var(--ic-sm); height: var(--ic-sm); }
:where(.modal-close:active) { scale: var(--m-press-icon); }
:where(.modal-foot) { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-6); }
:where(dialog.modal) {
  top: 12vh; margin: 0 auto; opacity: 1; scale: 1; translate: 0;
  transition: opacity var(--dur-3) var(--ease-out), scale var(--dur-3) var(--spring), translate var(--dur-3) var(--ease-out),
              display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete;
}
@starting-style { :where(dialog.modal[open]) { opacity: 0; scale: var(--m-pop); translate: 0 var(--m-rise); } }
:where(dialog.modal:not([open])) { opacity: 0; scale: .98; transition-duration: var(--dur-2); transition-timing-function: var(--ease-in); }
:where(dialog.modal)::backdrop {
  background: var(--scrim); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); opacity: 1;
  transition: opacity var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete;
}
@starting-style { :where(dialog.modal[open])::backdrop { opacity: 0; } }
/* 시트 손잡이 — 36×5 */
:where(.sheet-grip) { display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: var(--r-pill); background: var(--line-3); }
:where(.sheet) {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal); max-height: 92svh; overflow: auto;
  padding: 0 var(--s-5) calc(16px + env(safe-area-inset-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: #fff; box-shadow: var(--e-3);
  translate: 0 0; transition: translate var(--dur-3) var(--ease-out);
}
:where(.sheet.is-closed) { translate: 0 100%; transition-duration: var(--dur-2); transition-timing-function: var(--ease-in); }
@media (max-width: 699px) {
  :where(.modal-back) { align-items: flex-end; padding: 0; }
  :where(.modal-back > .modal) {
    width: 100%; max-height: 92svh; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom));
    animation: m-sheet-in var(--dur-3) var(--ease-out);
  }
  :where(.modal-back.closing > .modal) { animation: m-sheet-out var(--dur-2) var(--ease-in) both; }
  :where(dialog.modal) { top: auto; bottom: 0; width: 100%; max-width: none; max-height: 92svh; border-radius: var(--r-xl) var(--r-xl) 0 0; translate: 0 0; scale: 1; }
  @starting-style { :where(dialog.modal[open]) { opacity: 1; scale: 1; translate: 0 100%; } }
  :where(dialog.modal:not([open])) { opacity: 1; scale: 1; translate: 0 100%; }
}

/* 팝오버·메뉴 */
:where(.popover, .menu-pop) {
  min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--e-3);
  z-index: var(--z-popover); transform-origin: top right;
}
:where(details[open] > .menu-pop, .popover.is-open, .popover:popover-open) { animation: m-popover-in var(--dur-2) var(--ease-out); }
:where(.popover, .menu-pop) > :where(a, button), :where(.menu-pop form > button, .menu-item) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font: 500 var(--t-ui)/1.45 var(--font); text-align: left; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
:where(.menu-pop .mi-danger, .menu-item.danger) { color: var(--danger); }
:where(.menu-sep) { height: 1px; margin: 6px 0; background: var(--line); }
@media (hover: hover) and (pointer: fine) { :where(.popover, .menu-pop) > :where(a, button):hover, :where(.menu-pop form > button:hover, .menu-item:hover) { background: var(--wash-2); color: var(--ink); } }
@media (pointer: coarse) { :where(.popover, .menu-pop) > :where(a, button), :where(.menu-pop form > button, .menu-item) { min-height: 44px; } }

/* 토스트 — 슬롯 하나. 가운데 정렬은 margin auto(transform 금지) */
:where(.toast, .m-toast) {
  position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: var(--z-toast);
  width: fit-content; max-width: calc(100vw - 32px); margin-inline: auto;
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font: 500 var(--t-ui)/1.45 var(--font); letter-spacing: -0.01em; box-shadow: var(--e-3);
  animation: m-toast var(--dur-3) var(--spring);
  transition: opacity var(--dur-2) var(--ease-in);
}
:where(.toast, .m-toast) :where(svg) { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
:where(.toast-err, .m-toast.err) { background: #fff; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line), var(--e-3); }
:where(.toast.is-out, .toast.hide, .m-toast.is-out) { opacity: 0; }
/* 토스트 안 행동 하나('되돌리기') — 잉크 알약 안의 흰 워시 알약 32. 누르는 자리 44 */
:where(.toast-act) {
  position: relative; flex: none; height: var(--h-sm); margin: 0 -10px 0 var(--s-1); padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--d-wash-3); color: #fff; font: 600 var(--t-footnote)/1 var(--font); letter-spacing: 0; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
:where(.toast-act)::after { content: ''; position: absolute; inset: -6px; }
:where(.toast-act:active) { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
:where(.toast-act:focus-visible) { outline: var(--focus-dark); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { :where(.toast-act:hover) { background: rgba(255, 255, 255, .22); } }

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

/* 스켈레톤·스피너 */
:where(.skeleton) { border-radius: var(--r-xs); background: var(--wash-2); visibility: hidden; }
:where(.is-loading .skeleton, .skeleton.is-loading) { visibility: visible; animation: m-pulse 1600ms ease-in-out infinite; }
:where(.spinner) { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: m-spin 800ms linear infinite; }

/* ── §4 모션 ─────────────────────────────────────────────────────────── */
@keyframes m-rise     { from { opacity: .01; translate: 0 var(--m-rise); } } /* .01: 0이면 LCP가 애니메이션 끝까지 밀린다 */
@keyframes m-fade     { from { opacity: 0; } }
@keyframes m-fade-out { to   { opacity: 0; } }
@keyframes m-pop      { from { opacity: 0; scale: var(--m-pop); } }
@keyframes m-toast    { from { opacity: 0; translate: 0 8px; } }
@keyframes m-spin     { to   { rotate: 1turn; } }
@keyframes m-pulse    { 50%  { opacity: .55; } }
/* 파생(같은 문법의 방향만 다른 것) — 시트·팝오버 */
@keyframes m-sheet-in  { from { translate: 0 100%; } }
@keyframes m-sheet-out { to   { translate: 0 100%; } }
@keyframes m-popover-in { from { opacity: 0; scale: var(--m-pop); translate: 0 -4px; } }

/* 페이지 진입 안무 — 새로 불러올 때만(VT로 들어오면 루트 전환이 대신한다) */
:where([data-enter]) > * { animation: m-rise var(--dur-4) var(--ease-out) backwards; }
:where([data-enter]) > :nth-child(2) { animation-delay: 60ms; }
:where([data-enter]) > :nth-child(3) { animation-delay: 120ms; }
:where([data-enter]) > :nth-child(4) { animation-delay: 180ms; }
:where([data-enter]) > :nth-child(n+5) { animation-delay: 240ms; }
:where([data-enter-list]) > * { animation: m-rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc(240ms + var(--i, 0) * var(--stagger)); }
:where([data-enter-list]) > :nth-child(2) { --i: 1; }
:where([data-enter-list]) > :nth-child(3) { --i: 2; }
:where([data-enter-list]) > :nth-child(4) { --i: 3; }
:where([data-enter-list]) > :nth-child(5) { --i: 4; }
:where([data-enter-list]) > :nth-child(6) { --i: 5; }
:where([data-enter-list]) > :nth-child(7) { --i: 6; }
:where([data-enter-list]) > :nth-child(n+8) { --i: 7; }
:where(h1.sr-only ~ [data-enter-list]) > * { animation-delay: calc(var(--i, 0) * var(--stagger)); } /* 머리가 sr-only면 0~180ms 단계에 보이는 것이 없다 */
:where(h1.sr-only ~ [data-enter-list]) > :nth-child(n+9) { animation: none; }
:where(html[data-nav="vt"], html[data-embed]) :is([data-enter], [data-enter-list]) > * { animation: none; }
/* 스크롤 리빌 */
@supports (animation-timeline: view()) {
  :where([data-reveal]) { animation: m-rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
:where(html.m-io [data-reveal]:not(.is-in)) { opacity: 0; translate: 0 var(--m-rise); }
:where(html.m-io [data-reveal]) { transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); }
/* 상단 바 유리 — 0→24px 스크롤 구간에서 연속 전환. 랜딩(x-plat 없음 · P2가 .hd-landing)은 landing.js 판정.
   타임라인이 없거나 reduced면 motion.js가 html.is-scrolled를 토글한다(IntersectionObserver, scroll 이벤트 없음) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    :where(body.x-plat .hd-x:not(.hd-landing), .pub-bar) { animation: m-bar-glass linear both; animation-timeline: scroll(root block); animation-range: 0 24px; }
  }
}
@keyframes m-bar-glass {
  from { background-color: rgb(255 255 255 / 1); border-bottom-color: transparent; }
  to   { background-color: rgb(255 255 255 / .72); border-bottom-color: var(--line); }
}
:where(html.is-scrolled body.x-plat .hd-x:not(.hd-landing), html.is-scrolled .pub-bar) { background-color: var(--glass); border-bottom-color: var(--line); }
/* FAB — 세션 첫 진입에만 등장, 모바일 스크롤 중 숨김 */
:where(html[data-fab-seen] .bot-fab) { animation: none; }
:where(.bot-fab) { transition: translate var(--dur-2) var(--ease-out); }
:where(.bot-fab.is-away) { translate: 0 72px; }

/* ── §5 View Transitions (교차 문서) ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: m-fade-out var(--dur-1) var(--ease-in) both; }
::view-transition-new(root) { animation: m-rise var(--dur-3) var(--ease-out) 60ms both; }
:root:active-view-transition-type(back)::view-transition-new(root) { animation-name: m-fade; }
/* 짝 없는 공유 요소(상세의 정적 이름 vt-meet-date·vt-person·vt-cover·vt-team-logo, 탭 막대, 제목) — 한쪽 문서에만 있으면
   루트와 같은 박자로: 옛 것은 120ms에 흐려지고(320ms 동안 유령처럼 남지 않게), 새 것은 루트처럼 60ms 뒤 들어온다.
   (이름 있는 규칙보다 명시도가 높다 — 크롬은 아래에서 다시 즉시 교체로 되돌린다) */
::view-transition-old(*):only-child { animation: m-fade-out var(--dur-1) var(--ease-in) both; }
::view-transition-new(*):only-child { animation: m-fade var(--dur-3) var(--ease-out) 60ms both; }
/* 같은 주소 안 이동(탭·월 이동·필터 — 인라인 스니펫이 'same' 타입을 붙인다): 상승 없이 교차만, 바뀌지 않은 머리는 제자리 교체 */
:root:active-view-transition-type(same)::view-transition-new(root) { animation: m-fade var(--dur-2) var(--ease-out) both; }
:root:active-view-transition-type(same) :is(.page-head, .rc-rhead) { view-transition-name: vt-head; }
::view-transition-group(vt-head) { animation-duration: 0s; }
::view-transition-old(vt-head) { display: none; }
::view-transition-new(vt-head) { animation: none; }
/* 무대 고정 — 크롬은 전환하지 않고 새 것으로 즉시 바뀐다 */
:where(.hd-x, .pub-bar) { view-transition-name: vt-bar; }
:where(.sb) { view-transition-name: vt-sb; }
:where(.topbar) { view-transition-name: vt-topbar; }
:where(.bot-fab) { view-transition-name: vt-fab; }
::view-transition-group(vt-bar), ::view-transition-group(vt-sb),
::view-transition-group(vt-topbar), ::view-transition-group(vt-fab) { animation-duration: 0s; z-index: 3; }
::view-transition-old(vt-bar), ::view-transition-old(vt-sb),
::view-transition-old(vt-topbar), ::view-transition-old(vt-fab) { display: none; }
::view-transition-new(vt-bar), ::view-transition-new(vt-sb),
::view-transition-new(vt-topbar), ::view-transition-new(vt-fab) { animation: none; }
::view-transition-new(vt-bar):only-child, ::view-transition-new(vt-sb):only-child,
::view-transition-new(vt-topbar):only-child, ::view-transition-new(vt-fab):only-child { animation: none; }
/* 히어로 위 투명 바는 이름을 나눈다 — 흰 바 ↔ 투명 바는 서로 교차(옛 바가 즉시 사라지면 흰 글자 새 바가 흰 옛 화면 위에서 안 보여 크롬이 증발한다) */
:where(.pub-bar.pub-bar-hero) { view-transition-name: vt-bar-hero; }
::view-transition-group(vt-bar-hero) { animation-duration: 0s; z-index: 3; }
::view-transition-old(vt-bar-hero) { display: none; }
::view-transition-new(vt-bar-hero) { animation: none; }
::view-transition-old(vt-bar):only-child, ::view-transition-old(vt-bar-hero):only-child { display: block; animation: m-fade-out var(--dur-2) var(--ease-in) both; }
::view-transition-new(vt-bar-hero):only-child { animation: m-fade var(--dur-2) var(--ease-out) both; }
/* 제목 — 글자는 늘어나지 않고 상자만 모핑 */
:where(.page-title) { view-transition-name: vt-title; }
::view-transition-old(vt-title), ::view-transition-new(vt-title) { inline-size: 100%; block-size: 100%; object-fit: none; object-position: left top; }
/* 동시 교차 + plus-lighter: 같은 글자는 불투명도 1을 유지하고(깜빡임 없음), 다른 글자만 바뀐다.
   author animation이 UA의 블렌딩 애니메이션까지 덮으므로 mix-blend-mode를 명시한다 */
::view-transition-image-pair(vt-title) { isolation: isolate; }
::view-transition-old(vt-title), ::view-transition-new(vt-title) { mix-blend-mode: plus-lighter; }
::view-transition-old(vt-title) { animation: m-fade-out var(--dur-2) var(--ease-out) both; }
::view-transition-new(vt-title) { animation: m-fade var(--dur-2) var(--ease-out) both; }

/* ── §6 reduced-motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-iteration-count: 1 !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .spinner, .btn[aria-busy="true"]::before { animation: m-pulse 1600ms ease-in-out infinite !important; }
  .dot.live, .skeleton { animation: none !important; }
}