/* Kletoi design system — palette, point-color system, components.
   v3 (G6-4): two themes only — Abyssal (dark, default) + Daylight (light). raw-8
   (--pal-*) → color-mix derivation (surface-on-base elevation ladder) so the whole
   tree auto-follows. [data-mode] dark/light is the only palette axis; point colors
   (cyan/coral/lime), --gold, the --role colors, and per-mode semantics stay independent. */
  :root {
    /* default = dark: native form controls (input value text, caret), scrollbars,
       and UA widgets follow dark scheme — without this, browsers render <input>
       value text with the light system colour (black) on our dark surfaces. */
    color-scheme: dark;
    /* palette raw-8 (default = Abyssal / dark; [data-mode="light"] re-derives Daylight) */
    --pal-ink: #eef4ff; --pal-base: #05091a; --pal-surface: #6f97e6;
    --pal-primary: #5a8bff; --pal-accent: #a8c8ff;
    --pal-ok: #3fd089; --pal-warn: #f5bd47; --pal-danger: #f4596f;

    /* surfaces (derived — dark: surface-on-base elevation ladder, G6-4) */
    --void-deep: var(--pal-base);
    --void: color-mix(in srgb, var(--pal-surface) 7%, var(--pal-base));
    --panel: color-mix(in srgb, var(--pal-surface) 26%, var(--pal-base));
    --panel-2: color-mix(in srgb, var(--pal-surface) 46%, var(--pal-base));
    --panel-3: color-mix(in srgb, var(--pal-surface) 66%, var(--pal-base));
    --raise: color-mix(in srgb, var(--panel) 88%, #fff);   /* input / hover surface (#16) */
    /* brand */
    --primary: var(--pal-primary);
    --primary-dim: color-mix(in srgb, var(--pal-primary) 84%, #000);    /* pressed / active */
    --primary-bright: color-mix(in srgb, var(--pal-primary) 82%, #fff); /* hover */
    --accent: var(--pal-accent);
    --gold: #e8c98a;            /* Premium — fixed across themes (fill·틴트용) */
    --gold-ink: var(--gold);    /* Premium 전경(텍스트·테두리) — light에서 딥 앰버로 AA(§DL·1) */
    --kleos: #ff7a66;           /* Kleos 코인 정체색(coral) — point와 무관하게 고정 */
    /* role accents (member coral / admin cyan) — fixed across themes, like --gold */
    --role-member: #ff7a66; --role-member-soft: color-mix(in srgb, #ff7a66 15%, transparent);
    --role-admin: #2fe0c8;  --role-admin-soft: color-mix(in srgb, #2fe0c8 15%, transparent);
    /* commendation type colours (G6-3) — fixed across modes, like --gold/--role-* */
    --cm-mental: #5fd0e8; --cm-carry: #e8c98a; --cm-comms: #7fb0ff; --cm-team: #5fd99a;
    --gold-dim: #cda965;
    /* ink */
    --text: var(--pal-ink);
    --muted: color-mix(in srgb, var(--pal-ink) 58%, var(--pal-surface));
    --faint: color-mix(in srgb, var(--pal-ink) 34%, var(--pal-surface));
    /* semantic — palette-tuned per mode (G6-4) */
    --ok: var(--pal-ok);
    --warn: var(--pal-warn);
    --danger: var(--pal-danger);
    --danger-dim: color-mix(in srgb, var(--pal-danger) 86%, #000);
    /* lines & glow (derived) — 3-tier hierarchy: fine line / section divider / structural border */
    --line: color-mix(in srgb, var(--pal-accent) 22%, transparent);
    --divider: color-mix(in srgb, var(--pal-accent) 31%, transparent);
    --line-strong: color-mix(in srgb, var(--pal-accent) 40%, transparent);
    --line-control: var(--line-strong);   /* 폼·버튼·뷰스위처 테두리 — light에서 진하게 AA(§DL·1) */
    --hair: color-mix(in srgb, var(--pal-accent) 14%, transparent);   /* table inner line (#16) */
    --glow: color-mix(in srgb, var(--primary) 62%, transparent);
    --glow-soft: color-mix(in srgb, var(--primary) 34%, transparent);
    /* #59 스켈레톤 — accent 파생(기존 .sk-line 계승). --sk-hi = shimmer 하이라이트 */
    --sk-base: color-mix(in srgb, var(--pal-accent) 10%, transparent);
    --sk-hi: color-mix(in srgb, var(--pal-accent) 22%, transparent);
    /* #60 역할 티어 색(모드 무관 시맨틱 — @역할 칩·티어 점). AA는 라이트에서 재조정. */
    --gr-veteran: #ffd45c; --gr-elder: #5fd0e8; --gr-archon: #e8c98a;
    /* radii */
    --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
    /* elevation */
    --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-2: 0 8px 24px -10px rgba(0,0,0,0.55);
    --shadow-glow: 0 8px 26px -8px var(--glow);
    --shadow-glow-strong: 0 12px 40px -4px var(--glow), 0 0 26px 0 var(--glow), 0 0 0 1px color-mix(in srgb, var(--primary-bright) 55%, transparent) inset;
    /* §SL·2 초광폭 컬럼 여백 섀도 (design #62-A 앉힌 플레인) — 콘텐츠 컬럼이 여백에 드리우는 좌우 낮은 섀도 */
    --gutter-shadow: -34px 0 50px -44px rgba(0,0,0,0.55), 34px 0 50px -44px rgba(0,0,0,0.55);
    /* motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 0.12s; --dur-2: 0.2s; --dur-3: 0.34s;
    --tip-delay: 0.35s;  /* tooltip (.tip) reveal delay — E8 */
    /* z-index layer scale (semantic elevation — replaces scattered z literals).
       The ORDER is the contract; values keep the prior hierarchy. Small local
       stacking (hero bodies z:1, landing demo z:2/5, sidebar toggle z:6, focus
       ring z:8, dropdown +1 z:51) stays raw — it orders within its own context,
       not the global chrome. tooltips/hover-cards sit on top so they can never
       be occluded (M·3 escaped overflow clipping; M·12 fixed z-stacking). */
    --z-sticky: 20;    /* sticky topbar */
    --z-sidebar: 30;   /* desktop sidebar */
    --z-dropdown: 40;  /* menus · popovers · mobile-drawer scrim · home topbar */
    --z-overlay: 50;   /* mobile sidebar drawer · float switchers · lane/member menus */
    --z-float: 60;     /* scroll-to-top buttons · progress rail */
    --z-toast: 80;     /* toasts */
    --z-modal: 200;    /* modal scrim / dialog */
    --z-tooltip: 500;  /* hover tooltips & hover-cards — always topmost */
    /* content column cap (§SL) — 콘솔·멤버 콘텐츠 최대폭(초광폭 무한 확장 방지·중앙 정렬).
       .gcontent/.gtopbar가 padding-inline:max(base,(100%-이 값)/2)로 배경은 전폭·콘텐츠는 이 폭에
       중앙 정렬(래퍼 없이 헤더↔콘텐츠 라인 일치). 멤버 .mpage는 읽기 폭이라 별도 1080 유지. */
    --content-max: 1200px;
    /* type */
    --font-display: 'Cinzel', serif;
    --font-ui: 'Sora', sans-serif;
    --font-mono: 'Space Mono', monospace;
    /* type scale — live steps (full target scale + migration convention in design-system.md).
       New/edited font-size MUST use --fs-*; raw px migrate into the scale incrementally. */
    --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px;
    --fs-md: 14px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 19px;
    --fs-3xl: 22px; --fs-4xl: 26px; --fs-5xl: 30px; --fs-6xl: 38px;
    /* point color (per-page identity accent) — default Aether Cyan; theme-independent */
    --point: #2fe0c8;
    --point-ink: #06241f;
    --point-soft: rgba(47,224,200,0.16);
    --point-line: rgba(47,224,200,0.42);
    --point-glow: rgba(47,224,200,0.45);
    /* app-local card surface (tracks --panel) */
    --card: color-mix(in srgb, var(--panel) 62%, transparent);
  }
  /* typed point property so ancestor [data-point] changes invalidate var()-derived backgrounds */
  @property --point { syntax: '<color>'; inherits: true; initial-value: #2fe0c8; }

  /* ---- light (Daylight) mode: re-derive every token from the light raw-8 ---- */
  [data-mode="light"] {
    color-scheme: light;
    --pal-ink: #101a38; --pal-base: #ffffff; --pal-surface: #3f6bd6;
    --pal-primary: #2f63e0; --pal-accent: #1d49bd;
    --pal-ok: #1f9d63; --pal-warn: #a8730f; --pal-danger: #cf3450;
    /* surfaces — light: surface-on-base, panel = pure base */
    --void-deep: color-mix(in srgb, var(--pal-surface) 16%, var(--pal-base));
    --void: color-mix(in srgb, var(--pal-surface) 10%, var(--pal-base));
    --panel: var(--pal-base);
    --panel-2: color-mix(in srgb, var(--pal-surface) 10%, var(--pal-base));
    --panel-3: color-mix(in srgb, var(--pal-surface) 16%, var(--pal-base));
    --raise: color-mix(in srgb, var(--pal-primary) 4%, #fff);
    /* ink */
    --text: var(--pal-ink);
    --muted: color-mix(in srgb, var(--pal-ink) 64%, var(--pal-base));
    --faint: color-mix(in srgb, var(--pal-ink) 42%, var(--pal-base));
    /* brand */
    --primary: var(--pal-primary);
    --primary-bright: color-mix(in srgb, var(--pal-primary) 84%, #000);
    --primary-dim: color-mix(in srgb, var(--pal-primary) 72%, #000);
    --accent: var(--pal-accent);
    /* semantic — Daylight (AA on white) */
    --ok: var(--pal-ok); --warn: var(--pal-warn); --danger: var(--pal-danger);
    --kleos: #d9442a;           /* Kleos 코인 — Daylight 대비 강화 */
    --gold-ink: #806610;        /* §DL·1 Premium 골드 전경 — 흰 배경 AA(≥4.5:1). --gold(연앰버)은 fill·틴트용 유지 */
    --danger-dim: color-mix(in srgb, var(--pal-danger) 86%, #000);
    /* lines & glow */
    --line: color-mix(in srgb, var(--pal-surface) 26%, var(--pal-base));
    --divider: color-mix(in srgb, var(--pal-surface) 34%, var(--pal-base));
    --line-strong: color-mix(in srgb, var(--pal-surface) 42%, var(--pal-base));
    --hair: color-mix(in srgb, var(--pal-surface) 14%, var(--pal-base));
    --line-control: color-mix(in srgb, var(--pal-ink) 52%, var(--pal-base));   /* §DL·1 컨트롤 테두리 AA(≥3:1 흰 배경) */
    --gutter-shadow: -30px 0 44px -40px rgba(20,40,90,0.22), 30px 0 44px -40px rgba(20,40,90,0.22);  /* §SL·2 초광폭 여백 섀도 — Daylight */
    --glow: color-mix(in srgb, var(--pal-primary) 26%, transparent);
    --glow-soft: color-mix(in srgb, var(--pal-primary) 15%, transparent);
    /* #59 스켈레톤 — 라이트는 surface 파생(흰 패널 위 가시성). */
    --sk-base: color-mix(in srgb, var(--pal-surface) 12%, var(--pal-base));
    --sk-hi: color-mix(in srgb, var(--pal-surface) 24%, var(--pal-base));
    /* #60 역할 티어 색 — 라이트 AA 재조정(흰 배경 대비). */
    --gr-veteran: #a8730f; --gr-elder: #1f87a8; --gr-archon: #9a7a1f;
  }

  [data-point="cyan"]  { --point:#2fe0c8; --point-ink:#06241f; --point-soft:rgba(47,224,200,0.16);  --point-line:rgba(47,224,200,0.42); --point-glow:rgba(47,224,200,0.45); }
  [data-point="coral"] { --point:#ff7a66; --point-ink:#2a0d07; --point-soft:rgba(255,122,102,0.16); --point-line:rgba(255,122,102,0.45); --point-glow:rgba(255,122,102,0.45); }
  [data-point="lime"]  { --point:#b6f24a; --point-ink:#1d2906; --point-soft:rgba(182,242,74,0.16);  --point-line:rgba(182,242,74,0.42); --point-glow:rgba(182,242,74,0.40); }
  /* hub = brand accent (lavender in violet) — neutral between member-coral & admin-cyan;
     the one point that *follows* the theme (derives from --pal-accent) for the unified home */
  [data-point="hub"]   { --point: var(--pal-accent); --point-ink: var(--pal-base); --point-soft: color-mix(in srgb, var(--pal-accent) 16%, transparent); --point-line: color-mix(in srgb, var(--pal-accent) 42%, transparent); --point-glow: color-mix(in srgb, var(--pal-accent) 40%, transparent); }

  /* light mode: bright point hues wash out on white → darken for contrast, ink → white (design system update) */
  [data-mode="light"] [data-point="cyan"]  { --point: color-mix(in srgb,#2fe0c8 70%,#000); --point-ink:#fff; --point-soft: color-mix(in srgb,#2fe0c8 20%,transparent); --point-line: color-mix(in srgb,#2fe0c8 56%,#000); --point-glow: color-mix(in srgb,#2fe0c8 28%,transparent); }
  [data-mode="light"] [data-point="coral"] { --point: color-mix(in srgb,#ff7a66 70%,#000); --point-ink:#fff; --point-soft: color-mix(in srgb,#ff7a66 20%,transparent); --point-line: color-mix(in srgb,#ff7a66 56%,#000); --point-glow: color-mix(in srgb,#ff7a66 28%,transparent); }
  [data-mode="light"] [data-point="lime"]  { --point: color-mix(in srgb,#b6f24a 70%,#000); --point-ink:#fff; --point-soft: color-mix(in srgb,#b6f24a 20%,transparent); --point-line: color-mix(in srgb,#b6f24a 56%,#000); --point-glow: color-mix(in srgb,#b6f24a 28%,transparent); }

  /* 3-way 뷰 스위처(F1) 세그먼트 정체성 색 — 포인트와 독립, 한 컨트롤에 세 색 동시.
     hub=테마 추종(--pal-accent, 통합 홈), coral/cyan=고정(라이트모드 흰배경 대비 보정). */
  :root { --vsw-hub: var(--pal-accent); --vsw-coral:#ff7a66; --vsw-cyan:#2fe0c8; }
  [data-mode="light"] { --vsw-coral: color-mix(in srgb,#ff7a66 70%,#000); --vsw-cyan: color-mix(in srgb,#2fe0c8 70%,#000); }
  /* 멤버 태그 8톤(디자인 #55, MB·1) — 예약어 4종은 시맨틱 토큰 추종(t1~4), 자유입력은 해시(t1~8).
     라이트는 진한 톤 재정의(AA). 컴포넌트 색은 .mtag--tN 이 --mtc 로 공급 → color-mix(var(--mtc)…). */
  :root { --mtag-1: var(--pal-accent); --mtag-2: var(--pal-ok); --mtag-3: var(--pal-warn); --mtag-4: var(--pal-danger);
    --mtag-5: color-mix(in srgb, var(--pal-primary) 55%, #c884ee); --mtag-6: #5fd0e8; --mtag-7: #e8c98a;
    --mtag-8: color-mix(in srgb, var(--pal-ink) 62%, var(--pal-surface)); }
  [data-mode="light"] { --mtag-1:#1d49bd; --mtag-2:#1f9d63; --mtag-3:#a8730f; --mtag-4:#cf3450;
    --mtag-5:#7a3fb8; --mtag-6:#1f87a8; --mtag-7:#9a7a1f; --mtag-8: color-mix(in srgb, var(--pal-ink) 60%, var(--pal-base)); }

  /* §16 B1 — smooth cross-fade when theme / mode / palette changes (surfaces only) */
  body, .ds-side, .gpanel, .card, .seg, .input, .select, .btn, .badge, .set-pop, .gear,
  .sb-item, .themebar, .langpick, .langpick-trigger, .float-sw, .modeseg button, .langopt {
    transition: background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
  }

  /* 페이지 간 이동 깜빡임(흰 플래시) 최소화 — MPA 크로스도큐먼트 뷰 트랜지션. 옛/새 문서를
     브라우저가 자동 크로스페이드 → 전체 리로드 체감 제거. 공유 app.css라 전 페이지 자동 옵트인.
     점진적 향상: 미지원 브라우저(현 Firefox/Safari)는 규칙 무시 → 현행 동작·무해. 페이드 톤은
     브랜드 모션 토큰. reduce-motion에선 즉시(파일 끝 REDUCED MOTION 블록 항목 6). */
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: var(--dur-3); animation-timing-function: var(--ease); }
  /* reduced-motion: 전면차단(nuclear) 폐기 → WCAG 2.3.3 완화 정책으로 교체(의뢰 #18).
     실제 규칙은 모든 @keyframes 정의 뒤(파일 끝)의 "REDUCED MOTION" 블록 — dd-in/mmod-in/fbpop
     재정의가 원본보다 뒤에 와야 적용되기 때문. (toast·reveal 컴포넌트 블록은 각자 자리 유지.) */

  /* §16 색감 대비 높이기 (설정 팝오버 → 접근성) — <html data-contrast="true"> 시 경계 명도 추가 상향 */
  [data-contrast="true"] { --line: color-mix(in srgb, var(--pal-accent) 42%, transparent); --line-strong: color-mix(in srgb, var(--pal-accent) 64%, transparent); --divider: color-mix(in srgb, var(--pal-accent) 52%, transparent); }
  [data-mode="light"][data-contrast="true"] { --line: color-mix(in srgb, var(--pal-surface) 38%, var(--pal-base)); --line-strong: color-mix(in srgb, var(--pal-surface) 58%, var(--pal-base)); --divider: color-mix(in srgb, var(--pal-surface) 46%, var(--pal-base)); }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body {
    background: var(--void-deep);
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    word-break: keep-all;
    text-wrap: pretty;
  }
  #bg {
    position: fixed; inset: 0; z-index: 0;
    background: radial-gradient(125% 120% at 78% -10%, var(--panel) 0%, var(--void) 46%, var(--void-deep) 100%);
  }
  #root { position: relative; z-index: 1; height: 100%; }
  /* 텍스트 선택 하이라이트 — 브랜드 primary(테마 추종) (디자인 시스템 sync 2026-06-24) */
  ::selection { background: color-mix(in srgb, var(--primary) 40%, transparent); color: #fff; }


  /* ---------- Primitives ---------- */
  /* legacy .panel* removed — console pages use the §16 .gpanel component (settings/overview migrated) */

  .grid { display: grid; gap: 18px; }
  .row { display: flex; align-items: center; }

  .stat { padding: 20px 22px; }
  .stat .label { font-size: var(--fs-sm); color: var(--muted); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .stat .num { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-6xl); line-height: 1.1; margin-top: 12px; color: var(--text); }
  .stat .num small { font-size: 16px; color: var(--faint); font-family: var(--font-mono); font-weight: 400; }
  .stat .delta { font-size: var(--fs-sm); margin-top: 6px; font-family: var(--font-mono); }
  .delta.up { color: var(--ok); }
  .delta.flat { color: var(--faint); }

  .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: 0.02em; white-space: nowrap; }
  .badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .badge--premium { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold-ink) 30%, transparent); }
  .badge--free { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border: 1px solid var(--line); }
  .badge--online { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
  .badge--locked { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .badge--hidden { color: var(--faint); background: color-mix(in srgb, var(--faint) 16%, transparent); }
  .badge--danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
  .badge--neutral { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); }
  .badge--point { color: var(--point); background: var(--point-soft); }

  .mono { font-family: var(--font-mono); }
  .muted { color: var(--muted); }
  .faint { color: var(--faint); }

  .avatar { border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); font-weight: 600; color: #fff; flex: none; overflow: hidden; }
  .ava-wrap { position: relative; flex: none; }
  .ava-wrap .pres { position: absolute; right: -1px; bottom: -1px; border-radius: 50%; border: 2.5px solid var(--void); }

  /* ---------- Buttons ----------
     Hover = brighten + lift shadow; press = translateY(1.5px) scale(.985) + darken;
     focus-visible ring. Background uses the background-color LONGHAND and is kept OUT
     of the transition list, so an ancestor --point change paints correctly (Chromium). */
  .btn {
    --bg: var(--primary); --bgh: var(--primary-bright); --bga: var(--primary-dim);
    --fg: #fff; --bd: transparent; --sh: var(--shadow-glow);
    font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-md); line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 18px; height: 42px; border-radius: var(--r-md);
    background-color: var(--bg); color: var(--fg); border: 1px solid var(--bd);
    box-shadow: var(--sh), var(--shadow-2); cursor: pointer; user-select: none; white-space: nowrap;
    transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-1), color var(--dur-1);
  }
  .btn .ico { width: 17px; height: 17px; flex: none; }
  .btn:hover { background-color: var(--bgh); box-shadow: var(--shadow-glow), var(--shadow-2); }
  .btn:active { background-color: var(--bga); transform: translateY(1.5px) scale(0.985); box-shadow: 0 2px 8px -4px var(--glow); }
  .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft), var(--shadow-glow); }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; background-color: var(--bg); }

  .btn--primary { --bg: var(--primary); --bgh: var(--primary-bright); --bga: var(--primary-dim); --fg: #fff; --bd: transparent; --sh: var(--shadow-glow); }
  .btn--secondary { --bg: color-mix(in srgb, var(--primary) 12%, transparent); --bgh: color-mix(in srgb, var(--primary) 22%, transparent); --bga: color-mix(in srgb, var(--primary) 30%, transparent); --fg: var(--accent); --bd: var(--line-control); --sh: none; }
  .btn--ghost { --bg: transparent; --bgh: color-mix(in srgb, var(--primary) 10%, transparent); --bga: color-mix(in srgb, var(--primary) 18%, transparent); --fg: var(--accent); --bd: var(--line-control); --sh: none; }
  .btn--text { --bg: transparent; --bgh: transparent; --bga: transparent; --fg: var(--accent); --bd: transparent; --sh: none; padding: 0 8px; }
  .btn--text:hover { --fg: var(--primary-bright); text-decoration: none; }
  .btn--text:active { transform: translateY(1px) scale(1); }
  .btn--gold { --bg: var(--gold); --bgh: color-mix(in srgb, var(--gold) 78%, #fff); --bga: var(--gold-dim); --fg: #1a1407; --sh: 0 8px 26px -8px color-mix(in srgb, var(--gold) 45%, transparent); }
  .btn--gold:hover { box-shadow: 0 10px 34px -6px color-mix(in srgb, var(--gold) 50%, transparent); }
  .btn--gold:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent), var(--sh); }
  .btn--danger { --bg: var(--danger); --bgh: color-mix(in srgb, var(--danger) 86%, #fff); --bga: color-mix(in srgb, var(--danger) 82%, #000); --fg: #fff; --bd: transparent; --sh: 0 6px 20px -8px color-mix(in srgb, var(--danger) 50%, transparent); }
  .btn--danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
  /* point button — only sets the vars; base .btn already uses background-color longhand + no background transition */
  .btn--point { --bg: var(--point); --bgh: color-mix(in srgb, var(--point) 84%, #fff); --bga: color-mix(in srgb, var(--point) 82%, #000); --fg: var(--point-ink); --bd: transparent; --sh: 0 8px 26px -8px var(--point-glow); }
  .btn--point:focus-visible { box-shadow: 0 0 0 3px var(--point-soft), 0 8px 26px -8px var(--point-glow); }
  .btn--point-o { --bg: transparent; --bgh: var(--point-soft); --bga: var(--point-soft); --fg: var(--point); --bd: var(--point-line); --sh: none; }

  .btn--sm { height: 34px; font-size: var(--fs-base); padding: 0 13px; border-radius: var(--r-sm); }
  .btn--lg { height: 52px; font-size: 16px; padding: 0 26px; border-radius: var(--r-lg); }
  .btn--block { width: 100%; }
  .btn--icon { width: 42px; padding: 0; }
  .btn--icon.btn--sm { width: 34px; }
  .btn--icon.btn--lg { width: 52px; }

  .btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: ds-spin 0.7s linear infinite; }
  .btn--secondary .spin, .btn--ghost .spin, .btn--danger .spin { border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); }
  @keyframes ds-spin { to { transform: rotate(360deg); } }

  .toggle { width: 42px; height: 24px; border-radius: 20px; background: color-mix(in srgb, var(--muted) 22%, transparent); position: relative; cursor: pointer; transition: background .16s; flex: none; }
  .toggle .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .16s; }
  .toggle.on { background: var(--primary); }
  .toggle.on .knob { left: 21px; }
  .toggle:hover { box-shadow: 0 0 0 3px var(--point-soft); }
  .toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }

  .field { display: flex; flex-direction: column; gap: 8px; }
  .field-label { font-size: var(--fs-base); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .field-hint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
  .input, .select {
    background-color: color-mix(in srgb, var(--void-deep) 55%, transparent); border: 1px solid var(--line-control); border-radius: var(--r-md);
    color: var(--text); font-family: var(--font-ui); font-size: var(--fs-md); padding: 11px 14px; width: 100%;
    transition: border-color var(--dur-1), box-shadow var(--dur-2), background-color var(--dur-1);
  }
  .input::placeholder { color: var(--faint); }
  .input:hover, .select:hover { border-color: var(--line-strong); }
  .input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); background-color: color-mix(in srgb, var(--void-deep) 75%, transparent); }
  .input.bad { border-color: var(--danger); }
  .input.bad:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
  .select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

  .chanopt { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-control); background: color-mix(in srgb, var(--void-deep) 40%, transparent); cursor: pointer; font-size: var(--fs-md); transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease); }
  .chanopt:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--void-deep) 55%, transparent); }
  .chanopt:active { transform: translateY(0.5px); }
  .chanopt.sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
  .chanopt .ico { color: var(--faint); width: 16px; }

  /* range slider */
  input[type=range] { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 20px; background: color-mix(in srgb, var(--primary) 18%, transparent); }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); cursor: pointer; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }

  .seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 50%, transparent); border: 1px solid var(--line-control); }
  .seg button { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base); padding: 7px 16px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease); }
  .seg button.on { background: var(--primary); color: #fff; box-shadow: var(--shadow-glow); }
  .seg button:not(.on):hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
  .seg button:active { transform: translateY(0.5px) scale(0.98); }
  .seg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }

  table.tbl { width: 100%; border-collapse: collapse; }
  table.tbl th { text-align: left; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
  table.tbl tr:last-child td { border-bottom: none; }
  table.tbl tr.cr:hover td { background: color-mix(in srgb, var(--primary) 6%, transparent); }

  .progress { height: 6px; border-radius: 20px; background: color-mix(in srgb, var(--void-deep) 60%, transparent); overflow: hidden; }
  .progress > span { display: block; height: 100%; border-radius: 20px; background: var(--accent); }

  .feat-x { color: var(--faint); }
  .feat-ok { color: var(--ok); }

  .timeline { position: relative; padding-left: 26px; }
  .timeline:before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
  .tl-item { position: relative; padding: 0 0 20px; }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-dot { position: absolute; left: -25px; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--void); display: grid; place-items: center; }
  .tl-dot i { width: 6px; height: 6px; border-radius: 50%; display: block; }

  .glow-emblem { filter: drop-shadow(0 0 30px var(--glow)); }
  .hero-quote { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: 0.04em; color: var(--accent); }

  /* density */


  /* ---------- SP3 additions: public landing + guild cards ---------- */
  a { color: inherit; text-decoration: none; }
  body.lander-body { overflow: auto; }
  .lander { min-height: 100%; display: grid; place-items: center; padding: 48px 20px; }
  .lander-inner { text-align: center; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .lander .emblem { width: 132px; height: 132px; filter: drop-shadow(0 0 34px var(--point-glow)); }
  .lander .wm { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: 0.22em; text-indent: 0.22em; color: var(--text); }
  .lander .slogan { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: 0.06em; color: var(--accent); }
  .lander .desc { font-size: var(--fs-md); color: var(--muted); line-height: 1.6; }

  /* inline-emblem parts — track the theme: call(∨)+circle = accent, answer(∧)+core = primary */
  .emblem .emb-call { stroke: var(--accent); }
  .emblem .emb-answer { stroke: var(--primary); }
  .emblem .emb-core { fill: var(--primary); }
  .userchip { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-2); }
  details.gusr > summary.userchip:hover { border-color: var(--line-strong); background: var(--raise); }
  details.gusr > summary.userchip:active { transform: translateY(1px) scale(0.99); }
  .userchip .ava { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: var(--fs-base); font-weight: 600; overflow: hidden; }
  /* A3: server icon is a Discord-style rounded square (not a circle) */
  .userchip .ava--sq { border-radius: var(--r-sm); }
  .userchip .nm { font-size: var(--fs-base); font-weight: 600; }

  .gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .gcard { display: flex; align-items: center; gap: 14px; padding: 18px 18px; }
  .gcard .gico { width: 46px; height: 46px; border-radius: 13px; background: var(--panel-2); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 18px; overflow: hidden; flex: none; }
  .gcard .gmeta { min-width: 0; }
  .gcard .gname { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: var(--fs-md); }

  /* ---------- owner 지면(/owner · /owner/sandbox) — OW·1 ----------
     .gpanel에는 패딩이 없다(.gpanel-h/.gpanel-b가 가진다). owner 두 장은 맨 .gpanel을
     컨테이너로 쓰면서 레이아웃을 인라인 style로 붙여 텍스트가 테두리에 붙었다 →
     여기로 흡수(패딩은 .gpanel-b 재사용, 배치만 아래 클래스). 새 색 없음(토큰만). */
  .ow-spacer { flex: 1; }
  .ow-enter { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 18px;
    text-decoration: none; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
  .ow-enter:hover { border-color: var(--line-strong); background: var(--raise); }
  .ow-enter-ic { font-size: var(--fs-2xl); line-height: 1; flex: none; }
  .ow-enter-t { font-weight: 600; }
  .ow-enter-s { font-size: var(--fs-sm); }
  .ow-totals { margin-bottom: 18px; display: flex; gap: 28px; flex-wrap: wrap; font-size: var(--fs-md); }
  .ow-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .ow-card-h { display: flex; align-items: center; gap: 10px; }
  .ow-ico-img { width: 100%; height: 100%; object-fit: cover; }
  .ow-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: var(--fs-sm); }
  .ow-bar { margin-bottom: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .ow-intro { margin: 0; }
  .ow-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .ow-list { display: flex; flex-direction: column; gap: 8px; }
  .ow-row { text-decoration: none; gap: 12px;
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
  .ow-row:hover { border-color: var(--line-strong); background: var(--raise); }
  .ow-row-seq { font-weight: 600; }
  .ow-row-when { font-size: var(--fs-sm); }
  @media (max-width: 620px) {
    .ow-card-grid { grid-template-columns: 1fr; }
  }

  /* ---------- Theme switcher (global, fixed bottom-right) ---------- */
  .themebar {
    position: fixed; right: 18px; bottom: 18px; z-index: var(--z-overlay);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--void-deep) 72%, transparent);
    border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); backdrop-filter: blur(10px);
  }
  .themebar .pchips { display: inline-flex; gap: 6px; }
  .pchip { width: 30px; height: 30px; border-radius: var(--r-sm); cursor: pointer; border: 2px solid transparent; padding: 0;
    display: grid; place-items: center; transition: transform var(--dur-1), border-color var(--dur-1); }
  .pchip:hover { transform: translateY(-2px); }
  .pchip:active { transform: translateY(0) scale(0.95); }
  .pchip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .pchip.on { border-color: var(--text); }
  .pchip .ck { width: 13px; height: 13px; color: #fff; opacity: 0; filter: drop-shadow(0 0 2px rgba(0,0,0,0.6)); }
  .pchip.on .ck { opacity: 1; }
  .modetoggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 7px 14px; background: color-mix(in srgb, var(--void-deep) 40%, transparent);
    transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-1); }
  .modetoggle:hover { border-color: var(--accent); }
  .modetoggle:active { transform: translateY(1px) scale(0.98); }
  .modetoggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .modetoggle .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
  @media (max-width: 640px) { .themebar { right: 10px; bottom: 10px; padding: 6px 9px; gap: 7px; } }

  /* ---------- Language switcher (global flag dropdown, fixed bottom-right, above theme bar) ---------- */
  .langbar { position: fixed; right: 18px; bottom: 72px; z-index: var(--z-overlay); }
  .langpick { position: relative; }
  .langpick-trigger {
    display: flex; align-items: center; gap: 9px; min-width: 150px;
    padding: 8px 12px; border-radius: var(--r-pill);
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
    background: color-mix(in srgb, var(--void-deep) 72%, transparent);
    border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); backdrop-filter: blur(10px);
    transition: border-color var(--dur-1), box-shadow var(--dur-2), background var(--dur-1), transform var(--dur-1) var(--ease);
  }
  .langpick-trigger:hover { border-color: var(--accent); background: color-mix(in srgb, var(--primary) 12%, var(--void-deep)); }
  .langpick-trigger:active { transform: translateY(1px) scale(0.99); }
  .langpick.open .langpick-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft), var(--shadow-2); }
  .langpick-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft), var(--shadow-2); }
  .langpick-trigger .flag { transition: transform var(--dur-2) var(--ease); }
  .langpick-trigger:hover .flag { transform: scale(1.1) rotate(-3deg); }
  .langpick-trigger .nm { flex: 1; text-align: left; white-space: nowrap; }
  .langpick-trigger .chev { width: 15px; height: 15px; color: var(--accent); flex: none; transition: transform var(--dur-2) var(--ease); }
  .langpick.open .langpick-trigger .chev { transform: rotate(180deg); color: var(--primary); }

  .langpick-menu {
    display: none; position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 200px; z-index: 51;
    background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-md);
    box-shadow: var(--shadow-2); backdrop-filter: blur(10px); padding: 6px;
    transform-origin: bottom right; transform: none; transition: transform var(--dur-2) var(--ease-out);
  }
  .langpick.open .langpick-menu { display: block; }
  .langpick.open .langpick-menu.entering { transform: translateY(10px) scale(0.97); transition: none; }
  .langpick-opt {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--muted); cursor: pointer;
    border: 1px solid transparent; background: transparent; text-align: left;
    transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-1);
  }
  .langpick-opt:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px var(--point-line); }
  .langpick-opt:active { transform: translateY(0.5px); }
  .langpick-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .langpick-opt.sel { color: var(--text); }
  .langpick-opt .nm { flex: 1; white-space: nowrap; }
  .langpick-opt .tick { width: 15px; height: 15px; color: var(--accent); opacity: 0; flex: none; }
  .langpick-opt.sel .tick { opacity: 1; }
  .langpick .flag { width: 22px; height: 15px; border-radius: 3px; flex: none; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
  @media (max-width: 640px) { .langbar { right: 10px; bottom: 58px; } .langpick-trigger { min-width: 0; } .langpick-menu { min-width: 180px; } }

  /* ---------- Site footer (public pages; suppressed in the admin shell) ---------- */
  .sitefoot { position: relative; z-index: 1; border-top: 1px solid var(--divider); background: color-mix(in srgb, var(--void-deep) 60%, transparent); }
  .sitefoot-inner { max-width: 980px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; justify-content: space-between; }
  .sitefoot-brand { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.04em; color: var(--muted); }
  .sitefoot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .sitefoot-links a { font-size: var(--fs-base); color: var(--text); transition: color var(--dur-1); }
  .sitefoot-links a:hover { color: var(--accent); }
  /* 사업자 정보(전자상거래법 §10) — footer muted 톤 재사용, 줄바꿈 그리드 */
  .sitefoot-biz { max-width: 980px; margin: 0 auto; padding: 0 24px 20px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-xs); color: var(--faint); line-height: 1.65; }
  .sitefoot-biz b { color: var(--muted); font-weight: 600; margin-right: 4px; }
  .sitefoot-biz a { color: var(--faint); }
  .sitefoot-biz a:hover { color: var(--accent); }

  /* ---------- Document pages (privacy / terms / about) ---------- */
  /* let content drive height so the footer flows below it and the page scrolls */
  body.doc-body { overflow: auto; }
  body.doc-body #root { height: auto; min-height: 100%; }
  body.doc-body .topbar { position: sticky; }  /* .topbar defaults to fixed; keep it in flow above .doc (like cl/pp) */
  .doc { max-width: 760px; margin: 0 auto; padding: 52px 24px 44px; }
  .doc-head { margin-bottom: 26px; }
  .doc h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5xl); letter-spacing: 0.02em; color: var(--text); margin: 0 0 10px; }
  .doc-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); line-height: 1.6; }
  .doc-source { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
  .doc-notice { margin: 0 0 22px; padding: 11px 14px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    font-size: 13.5px; color: var(--text); }
  .doc h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); color: var(--text); margin: 30px 0 12px; padding-top: 20px; border-top: 1px solid var(--divider); }
  .doc h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin: 22px 0 8px; }
  .doc p, .doc li { font-size: 14.5px; line-height: 1.78; color: var(--text); }
  .doc p { margin: 10px 0; }
  .doc strong { color: var(--text); font-weight: 600; }
  .doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .doc a:hover { color: var(--primary-bright); }
  /* H·f: 산문 링크의 밑줄이 .doc 안 버튼 라벨에까지 그어지던 것만 제거. 색은 일부러 건드리지
     않는다 — .doc a 의 --accent 는 라이트 배경에서 5.6:1(AA 통과)이고, 버튼 자신의 --fg(=point)
     로 되돌리면 라이트에서 오히려 AA 미달로 회귀한다(실측). 채워진 버튼은 .doc 안에서 쓰지 않는다. */
  .doc a.btn { text-decoration: none; }
  .doc ul, .doc ol { padding-left: 20px; margin: 10px 0; display: flex; flex-direction: column; gap: 7px; }
  .doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: var(--fs-base); }
  .doc th { text-align: left; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); }
  .doc td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
  .doc .backhome { display: inline-flex; margin-top: 32px; }

  /* ============================================================
     GUILD CONSOLE (Stage 1+) — multi-item sidebar, collapse rail,
     glyph nav, console topbar + view atoms. Ported from the Claude
     Design "Kletoi 길드 관리" handoff; tokens already defined above.
     (list_shell.html — the /admin server picker — also rides this .ds shell via
      the single-column .ds--solo; the old .app/.sidebar chrome was removed in 3b.)
     ============================================================ */
  @property --side-w { syntax: "<length>"; inherits: true; initial-value: 240px; }
  .ds { position: relative; display: grid; grid-template-columns: var(--side-w, 240px) 1fr; height: 100%; transition: --side-w var(--dur-3) var(--ease); }
  .ds[data-collapsed="true"] { --side-w: 72px; }
  .ds--solo { grid-template-columns: 1fr; }  /* sidebar-less shell (/admin picker) */
  .ds-side { border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; min-height: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 64%, transparent), color-mix(in srgb, var(--void-deep) 42%, transparent)); backdrop-filter: blur(8px);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent) 14%, transparent), 1px 0 0 var(--line-strong), 18px 0 46px -12px rgba(0,0,0,0.72); position: relative; z-index: var(--z-sidebar); }
  /* --z-sidebar (30) > --z-sticky (20): the sidebar must paint above .ds-main's
     sticky header .gtopbar, else the toggle's protruding half is covered by it. */
  .ds-collapse { position: absolute; top: 28px; right: -13px; z-index: 6; width: 32px; height: 46px; border-radius: 11px;
    border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--accent); cursor: pointer;
    display: grid; place-items: center; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.6); transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-1); }
  .ds-collapse:hover { background: var(--panel-3); border-color: var(--accent); }
  .ds-collapse:active { transform: scale(0.9); }
  .ds-collapse:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--point-soft); }
  .ds-collapse svg { width: 17px; height: 17px; transition: transform var(--dur-3) var(--ease); }
  .ds[data-collapsed="true"] .ds-collapse svg { transform: rotate(180deg); }
  /* mobile drawer chrome — hidden on desktop; shown in the ≤1000px block below (의뢰 #19) */
  .ds-burger { display: none; width: 44px; height: 44px; flex: none; border-radius: var(--r-md); border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--void) 50%, transparent); color: var(--accent); cursor: pointer; place-items: center;
    transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
  .ds-burger:hover { border-color: var(--point-line); color: var(--point); background: var(--point-soft); }
  .ds-burger:active { transform: translateY(1px) scale(0.96); }
  .ds-burger:focus-visible { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .ds-burger svg { width: 20px; height: 20px; }
  .ds-drawer-close { display: none; position: absolute; top: 22px; right: 14px; z-index: 6; width: 36px; height: 36px; border-radius: var(--r-md);
    border: 1px solid var(--line-strong); background: var(--raise); color: var(--muted); cursor: pointer; place-items: center;
    transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
  .ds-drawer-close:hover { color: var(--point); border-color: var(--point-line); }
  .ds-drawer-close:active { transform: scale(0.94); }
  .ds-drawer-close svg { width: 17px; height: 17px; }
  .ds-scrim { position: fixed; inset: 0; z-index: var(--z-dropdown); background: rgba(8,6,18,0.6); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-3) var(--ease), visibility 0s linear var(--dur-3); }
  body.drawer-lock { overflow: hidden; }
  .ds-brand { padding: 24px 22px 18px; display: flex; align-items: center; gap: 12px; overflow: hidden; }
  .ds-brand .emblem { width: 34px; height: 34px; flex: none; }
  /* brand emblem links to /home — interactive treatment (design system .ds-brand button intent) */
  .ds-logo { display: inline-flex; border-radius: var(--r-sm); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1); }
  .ds-logo:hover { transform: scale(1.04); }
  .ds-logo:active { transform: scale(0.96); }
  .ds-logo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .ds-brand .bwrap { min-width: 0; transition: opacity var(--dur-2); }
  .ds[data-collapsed="true"] .ds-brand { padding: 24px 0 18px; justify-content: center; }
  .ds[data-collapsed="true"] .ds-brand .bwrap { opacity: 0; width: 0; }
  .ds-brand .wm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); letter-spacing: 0.22em; text-indent: 0.22em; color: var(--text); }
  .ds-brand .sub { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }
  .ds-nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--point) 55%, transparent) transparent; }
  .ds-nav::-webkit-scrollbar { width: 9px; }
  .ds-nav::-webkit-scrollbar-track { background: transparent; }
  .ds-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--point) 55%, transparent); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; transition: background var(--dur-1); }
  .ds-nav:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--point) 72%, transparent); background-clip: padding-box; }
  .ds-nav::-webkit-scrollbar-thumb:hover { background: var(--point); background-clip: padding-box; }
  .ds[data-collapsed="true"] .ds-nav { padding: 8px 0; align-items: center; }
  .ds[data-collapsed="true"] .ds-nav .grp { height: 1px; margin: 12px 16px; padding: 0; overflow: hidden; color: transparent; background: var(--line); }
  .ds-nav .grp { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin: 16px 10px 6px; }
  .ds-nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm);
    color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease); }
  .ds-nav a:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--text); }
  .ds-nav a:active { transform: translateY(0.5px); }
  .ds-nav a .ni { width: 18px; height: 18px; flex: none; color: var(--faint); transition: color var(--dur-1), transform var(--dur-1) var(--ease); }
  .ds-nav a .nl { white-space: nowrap; }
  .ds-nav a .ng { display: none; }
  .ds-nav a:hover .ni { color: var(--accent); }
  .ds:not([data-collapsed="true"]) .ds-nav a:hover .ni { transform: translateX(2px); }
  .ds-nav a.on { color: var(--text); background: linear-gradient(90deg, var(--point-soft), color-mix(in srgb, var(--point) 4%, transparent)); }
  .ds-nav a.on .ni { color: var(--point); }
  .ds-nav a.on::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 4px 4px 0; background: var(--point); }
  .ds-nav a.gold.on .ni { color: var(--gold-ink); }
  .ds-nav a.gold.on { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 16%, transparent), transparent); }
  .ds-nav a.gold.on::before { background: var(--gold); }
  .ds-nav a .ncount { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--point); background: var(--point-soft); padding: 1px 8px; border-radius: var(--r-pill); }
  .ds[data-collapsed="true"] .ds-nav a { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: var(--r-md); }
  /* collapsed = icon-only rail (the .ni icon stays; label/count hidden; first-letter glyph .ng stays hidden). hover tooltip via native title= */
  .ds[data-collapsed="true"] .ds-nav a .ncount, .ds[data-collapsed="true"] .ds-nav a .nl { display: none; }
  .ds[data-collapsed="true"] .ds-nav a.on { background: var(--point-soft); box-shadow: inset 0 0 0 1px var(--point-line); }
  .ds[data-collapsed="true"] .ds-nav a.on::before { display: none; }
  /* 라이트모드 nav 가독성 — 흰 배경 대비 강화 (디자인 시스템 sync 2026-06-24) */
  [data-mode="light"] .ds-nav .grp { color: var(--primary); font-weight: 700; }
  [data-mode="light"] .ds-nav a { color: color-mix(in srgb, var(--text) 78%, transparent); font-weight: 600; }
  [data-mode="light"] .ds-nav a:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary); }
  [data-mode="light"] .ds-nav a.on { color: var(--primary); }
  .ds-main { min-width: 0; min-height: 0; overflow-y: auto; scroll-behavior: smooth;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--point) 50%, transparent) transparent; }
  .ds-main::-webkit-scrollbar { width: 12px; }
  .ds-main::-webkit-scrollbar-track { background: transparent; }
  .ds-main::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--point) 48%, transparent); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; transition: background var(--dur-1); }
  .ds-main::-webkit-scrollbar-thumb:hover { background: var(--point); background-clip: padding-box; }

  /* plan pill (sidebar foot) */
  .ds-langfoot { padding: 12px; border-top: 1px solid var(--line); position: relative; }
  .ds[data-collapsed="true"] .ds-langfoot { padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .gplan { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--muted) 8%, transparent); border: 1px solid var(--line); overflow: hidden; }
  .gplan.prem { background: color-mix(in srgb, var(--gold) 8%, transparent); border-color: color-mix(in srgb, var(--gold-ink) 28%, transparent); }
  .gplan-ic { width: 24px; height: 24px; flex: none; color: var(--muted); }
  .gplan.prem .gplan-ic { color: var(--gold-ink); }
  .gplan-t { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
  .gplan.prem .gplan-t { color: var(--gold-ink); }
  .gplan-s { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
  .gplan .bwrap { transition: opacity var(--dur-2); }
  .ds[data-collapsed="true"] .gplan { justify-content: center; padding: 11px 0; width: 44px; margin: 0 auto; }
  .ds[data-collapsed="true"] .gplan .bwrap { display: none; }

  /* §16 설정 기어 → 팝오버 (Kletoi 셸 폴리시.html 핸드오프) — plan pill 아래 */
  .ds-set { position: relative; margin-top: 10px; }
  .gear { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: var(--r-md);
    border: 1px solid var(--line-strong); background: var(--raise); color: var(--text);
    font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: all var(--dur-1); }
  .gear:hover { border-color: var(--point-line); background: var(--point-soft); }
  .gear:active { transform: translateY(1px) scale(0.98); }
  .gear .cog { width: 18px; height: 18px; flex: none; color: var(--point); transition: transform var(--dur-3) var(--ease); }
  .ds-set.open .gear .cog { transform: rotate(180deg); }
  .gear .gtx { flex: 1; text-align: left; white-space: nowrap; }
  .gear .gchev { width: 14px; height: 14px; color: var(--faint); transition: transform var(--dur-2); }
  .ds-set.open .gear .gchev { transform: rotate(180deg); }
  .ds-set.open .gear { border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .gear:focus-visible { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .ds[data-collapsed="true"] .ds-set { display: flex; justify-content: center; margin-top: 0; }  /* gap on .ds-langfoot controls spacing when stacked */
  .ds[data-collapsed="true"] .gear { justify-content: center; padding: 9px; width: 44px; }
  .ds[data-collapsed="true"] .gear .gtx, .ds[data-collapsed="true"] .gear .gchev { display: none; }

  .set-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: var(--z-dropdown); padding: 14px; border-radius: var(--r-lg);
    background: var(--panel); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-2);
    opacity: 0; transform: translateY(12px) scale(0.94); transform-origin: bottom; pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .ds-set.open .set-pop { opacity: 1; transform: none; pointer-events: auto; }
  .ds[data-collapsed="true"] .set-pop { left: calc(100% + 12px); right: auto; width: 230px; bottom: 0; transform-origin: left bottom; transform: translateX(-12px) scale(0.94); }
  .ds[data-collapsed="true"] .ds-set.open .set-pop { transform: none; }
  .set-grp { margin-bottom: 14px; opacity: 0; transform: translateY(6px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .set-grp:last-child { margin-bottom: 0; }
  .ds-set.open .set-grp { opacity: 1; transform: none; }
  .ds-set.open .set-grp:nth-child(1) { transition-delay: 0.04s; }
  .ds-set.open .set-grp:nth-child(2) { transition-delay: 0.08s; }
  .ds-set.open .set-grp:nth-child(3) { transition-delay: 0.12s; }
  .ds-set.open .set-grp:nth-child(4) { transition-delay: 0.16s; }
  .set-lb { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; display: block; }
  /* G6-4: .swatches/.swatch (팔레트 선택) 제거 — 테마 2종(다크/라이트)은 .modeseg 토글로 전환 */
  .modeseg { display: flex; gap: 6px; }
  .modeseg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: var(--raise); color: var(--muted); font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: all var(--dur-1); }
  .modeseg button svg { width: 14px; height: 14px; }
  .modeseg button.on { border-color: var(--point); background: var(--point-soft); color: var(--point); }
  .modeseg button:active { transform: translateY(0.5px) scale(0.98); }
  .modeseg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .langsel { display: flex; flex-direction: column; gap: 3px; max-height: 132px; overflow-y: auto; }
  .langopt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--muted); font-family: var(--font-ui); font-size: 12.5px; cursor: pointer; transition: all var(--dur-1); text-align: left; }
  .langopt:hover { background: var(--point-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--point-line); }
  .langopt:active { transform: translateY(0.5px); }
  .langopt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .langopt.on { color: var(--text); }
  .langopt .fl { width: 20px; height: 14px; border-radius: 2px; flex: none; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); display: block; }
  .langopt .fl svg { width: 20px; height: 14px; display: block; }
  .langopt .nm { flex: 1; }
  .langopt .tick { width: 14px; height: 14px; color: var(--point); opacity: 0; flex: none; }
  .langopt.on .tick { opacity: 1; }
  .conrow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--raise); }
  .conrow .ct { flex: 1; font-size: 12.5px; }
  .switch { width: 46px; height: 26px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--muted) 28%, transparent); position: relative; cursor: pointer; border: none; flex: none; transition: background var(--dur-2) var(--ease); }
  .switch .kn { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: left var(--dur-2) var(--ease-out), width var(--dur-1); }
  .switch.on { background: var(--point); box-shadow: 0 6px 18px -8px var(--point-glow); }  /* point-색 on-state(의도적 적응) + 디자인 글로우 */
  .switch.on .kn { left: 23px; }
  .switch:hover .kn { width: 23px; }
  .switch:active .kn { width: 24px; }
  .switch.on:active .kn { left: 19px; }
  .switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }

  /* ===== settings form 개편 (design "Kletoi 설정 확장", E9) — 섹션 그룹 + stepper/switch + (?) 툴팁(E8 .tip) ===== */
  .sgroup { margin-top: 22px; }
  .sgroup:first-of-type { margin-top: 0; }
  .sgroup-h { display: flex; align-items: center; gap: 9px; margin: 0 2px 12px; }
  .sgroup-h .si { width: 18px; height: 18px; color: var(--point); flex: none; }
  .sgroup-h .si svg { width: 18px; height: 18px; }
  .sgroup-h h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: 0.02em; }
  .sgroup-h .sc { font-size: 11.5px; color: var(--faint); font-family: var(--font-mono); }
  .frow { display: grid; grid-template-columns: 1fr minmax(200px, 280px); gap: 14px 22px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .frow:last-of-type { border-bottom: none; }
  .frow.col { grid-template-columns: 1fr; }
  /* SF·1: 2줄로 감기는 토글 라벨은 스위치를 첫 줄에 상단 정렬(세로중앙 시 어긋남). 셀렉트/인풋 행은
     라벨을 컨트롤(≈41px)에 세로중앙 유지 — center 회귀 방지. :has() 미지원 구형은 현상 유지(점진 향상). */
  .frow:has(.set-switch) { align-items: start; }
  @media (max-width: 620px) { .frow { grid-template-columns: 1fr; } }
  .flabel { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 600; flex-wrap: wrap; }
  .fhint { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
  .set-help { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--faint);
    display: grid; place-items: center; cursor: help; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; padding: 0; transition: all var(--dur-1); }
  .set-help:hover, .set-help:focus-visible { border-color: var(--point-line); color: var(--point); background: var(--point-soft); outline: none; }
  .gset-foot { display: flex; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--line); }
  /* PE: console.js arms each settings form (.gsetf-armed) to hide its save bar until the
     form is edited (.gsetf-dirty), reclaiming the repeated footer height. No-JS → visible. */
  .gsetf-armed .gset-foot { display: none; }
  .gsetf-armed.gsetf-dirty .gset-foot { display: flex; }
  /* ── §25 통합 설정 폼 — .fsection 그룹 + 단일 sticky 저장바(.gsavebar 4상태, gset.js) ── */
  .gset .fsection { margin-top: 22px; }
  .gset .fsection:first-of-type { margin-top: 0; }
  .fsection-h { display: flex; align-items: center; gap: 9px; margin: 0 2px 10px; }
  .fsection-h h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0.02em; margin: 0; }
  .gset .frow { padding: 13px 18px; transition: background var(--dur-1); }
  .gset .frow.dirty { background: color-mix(in srgb, var(--point) 6%, transparent); }
  .fchip { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--point); background: var(--point-soft);
    border: 1px solid var(--point-line); padding: 1px 6px; border-radius: var(--r-pill); }
  .fhint.err { color: var(--danger); display: flex; align-items: center; gap: 5px; }
  .fhint.err svg { width: 13px; height: 13px; flex: none; }
  .gset .input.bad, .gset .select.bad { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
  .ctrl-right { display: flex; justify-content: flex-end; }
  /* §SL — 토글은 col-2 우측 끝 고정(라벨=좌/토글=우 대칭). `.set-switch`는 grid 자식이 아니라
     래퍼 셀(`.ctrl-right` 또는 plain `<div>`)에 걸어야 함(`justify-self` on switch는 no-op) — 템플릿
     별로 엇갈린 토글 정렬을 1곳에서 통일. input/select 셀은 미해당이라 계속 col-2를 채운다(stretch). */
  .frow > div:has(.set-switch) { display: flex; justify-content: flex-end; }
  /* 저장바 (§SF·6) — 콘텐츠 열 하단 중앙 floating(fixed). 사이드바 폭(--side-w)만큼 left 오프셋 +
     right:0 + margin-inline:auto로 **콘텐츠 열 중앙** 정렬(뷰포트 중앙 아님 — 사이드바 겹침·중심 어긋남
     회피). bottom-우측 .gtotop과 세로로 안 물리게 중앙 배치 + JS 시 gset-bar-shown이 totop을 위로 올림.
     z는 sticky 헤더(--z-sticky)보다 한 단계 아래 유지(§SF·2), 드롭다운(z 40)은 여전히 위. */
  .gsavebar { position: fixed; left: var(--side-w, 240px); right: 0; bottom: 16px;
    margin-inline: auto; width: max-content; max-width: min(600px, calc(100vw - var(--side-w, 240px) - 48px));
    z-index: calc(var(--z-sticky) - 1);
    display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: var(--r-lg);
    border: 1.5px solid var(--line-strong); background: var(--panel-2); box-shadow: var(--shadow-2);
    transition: border-color var(--dur-2), box-shadow var(--dur-2),
      transform var(--dur-2) var(--ease-out), opacity var(--dur-2); }
  /* clean(변경 없음)이면 하단으로 슬라이드 아웃 — **JS 있을 때만**(무JS는 상시 표시·현행 유지, FOUC 없음).
     성공 '저장됨' 플래시(.gsavebar--flash)는 clean이라도 잠깐 표시하도록 예외. */
  html.js .gsavebar[data-state="clean"]:not(.gsavebar--flash) {
    transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none;
    transition: border-color var(--dur-2), box-shadow var(--dur-2),
      transform var(--dur-2) var(--ease-out), opacity var(--dur-2), visibility 0s var(--dur-2); }
  @media (max-width: 1000px) {  /* 사이드바 오프캔버스 — --side-w 오프셋 제거, 거의 전폭 */
    .gsavebar { left: 12px; right: 12px; margin-inline: 0; width: auto; max-width: none; }
    /* 전폭 바가 우하단 scroll-to-top(.gtotop)을 덮을 수 있어, 바가 보일 때만 totop을 위로 올림
       (무JS는 .gtotop 자체가 안 뜸 → 조정 불필요). 데스크톱은 바가 중앙·max-content라 우측
       totop과 안 겹쳐 조정 자체가 불필요 — 그래서 이 리프트는 모바일에만 건다. */
    html.gset-bar-shown .gtotop { bottom: 112px; } }
  @media (prefers-reduced-motion: reduce) {  /* 슬라이드 없이 즉시 표시/숨김 */
    .gsavebar, html.js .gsavebar[data-state="clean"]:not(.gsavebar--flash) { transition: none; } }
  .gset-tail { height: 84px; }  /* §SF·6: floating 저장바 높이만큼 스크롤 여유(마지막 행 가림 방지) */
  .gsavebar .gs-status { display: flex; align-items: center; gap: 9px; font-size: var(--fs-base); min-width: 0; }
  .gsavebar .gs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
  .gsavebar .gs-sp { flex: 1; }
  .gsavebar [hidden] { display: none !important; }  /* .btn display가 hidden 속성을 이기는 것 방지 */
  .gsavebar .gs-spin { width: 15px; height: 15px; border: 2px solid color-mix(in srgb, var(--point) 35%, transparent);
    border-top-color: var(--point); border-radius: 50%; animation: gsspin 0.7s linear infinite; }
  @keyframes gsspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .gsavebar .gs-spin { animation: none; border-top-color: transparent; } }
  .gsavebar[data-state="clean"] .gs-status { color: var(--muted); }
  .gsavebar[data-state="dirty"] { border-color: var(--point-line); box-shadow: var(--shadow-2), 0 0 0 1px var(--point-line); }
  .gsavebar[data-state="dirty"] .gs-dot { background: var(--point); box-shadow: 0 0 8px var(--point); }
  .gsavebar[data-state="dirty"] .gs-status { color: var(--text); }
  .gsavebar[data-state="saving"] .gs-status { color: var(--point); }
  .gsavebar[data-state="saving"] .gs-dot { background: var(--point); }
  .gsavebar[data-state="error"] { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
  .gsavebar[data-state="error"] .gs-dot { background: var(--danger); }
  .gsavebar[data-state="error"] .gs-status { color: var(--danger); }
  /* numeric stepper wrapping a real <input type=number> (PE: input still works w/o JS) */
  .set-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--raise); overflow: hidden; height: 40px; width: 100%; max-width: 160px; }
  .set-stepper button { width: 42px; height: 100%; border: none; background: transparent; color: var(--accent); font-size: var(--fs-2xl); cursor: pointer; transition: background var(--dur-1); display: grid; place-items: center; flex: none; }
  .set-stepper button:hover { background: var(--point-soft); color: var(--point); }
  .set-stepper input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; color: var(--text); text-align: center; font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; -moz-appearance: textfield; }
  .set-stepper input::-webkit-outer-spin-button, .set-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .set-stepper input:focus { outline: none; }
  /* CSS-only checkbox switch (native form submit, no JS) */
  .set-switch { display: inline-flex; align-items: center; cursor: pointer; }
  .set-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .set-switch .knw { width: 46px; height: 26px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--muted) 28%, transparent); position: relative; transition: background var(--dur-2); flex: none; }
  .set-switch .knw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left var(--dur-2) var(--ease-out); }
  .set-switch input:checked ~ .knw { background: var(--point); }
  .set-switch input:checked ~ .knw::after { left: 23px; }
  .set-switch input:focus-visible ~ .knw { box-shadow: 0 0 0 3px var(--point-soft); }

  /* 설정 패널 카드 그리드 — §SF·3: 행 내 카드 등높이(stretch)로 짧은 카드 아래 빈 공백 제거.
     카드 액션(버튼)은 하단 앵커되어 자연스러움. (옛 align-items:start는 좌우 높이차 시 어색한 공백.) */
  .setgrid { align-items: stretch; }
  /* 허브 패널 미리보기 (HubPreview, 시각 목업 — 멤버가 보는 컨트롤 패널) */
  .hubprev { border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 45%, transparent); padding: 14px; }
  .hubprev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
  .hubprev-name { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .hubprev-cap { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .hubprev-btns { display: flex; flex-wrap: wrap; gap: 6px; }
  .hubprev-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--accent); white-space: nowrap; }
  .hubprev-btn.prem { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold-ink) 40%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
  .hubprev-btn.prem[data-locked] { opacity: 0.45; }

  /* §16 공개 페이지 플로팅 스위처 (사이드바 없는 페이지 전용) — themebar/langbar 대체 */
  .float-sw { position: fixed; left: 18px; bottom: 18px; z-index: var(--z-overlay); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px;
    border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--raise) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow-2); }
  /* G6-4: .fchip (공개 플로팅 팔레트 칩) 제거 — 모드 토글만 남음 */
  .float-sw .fchip.on { border-color: var(--text); }
  .float-sw .fdiv { width: 18px; height: 1px; background: var(--line); margin: 3px 0; }
  .float-sw .fbtn { height: 28px; min-width: 28px; padding: 0 7px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; transition: all var(--dur-1); }
  .float-sw .fbtn:hover { background: var(--point-soft); color: var(--point); }
  .float-sw .fbtn:active { transform: translateY(0.5px) scale(0.97); }
  .float-sw .fbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .float-sw .fbtn svg { width: 15px; height: 15px; }
  .float-sw .fsw-lang { position: relative; }
  .float-sw .fsw-menu { position: absolute; left: calc(100% + 8px); bottom: 0; min-width: 150px; padding: 5px; border-radius: var(--r-md); background: var(--panel); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-2);
    opacity: 0; transform: translateX(-8px) scale(0.96); transform-origin: bottom left; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .float-sw .fsw-lang.open .fsw-menu { opacity: 1; transform: none; pointer-events: auto; }

  /* global toast (contact copy etc.) — injected by contact.js, themed by tokens */
  .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); z-index: var(--z-toast);
    max-width: min(92vw, 420px); padding: 12px 18px; border-radius: var(--r-md);
    background: var(--panel); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-2);
    color: var(--text); font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; line-height: 1.5;
    display: flex; align-items: center; gap: 10px; text-align: left;
    opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .toast .toast-ic { color: var(--point); flex: none; width: 18px; height: 18px; }
  .toast .toast-em { font-family: var(--font-mono); font-weight: 700; color: var(--point); }
  .toast--ok .toast-ic { color: var(--ok); }
  .toast--err { border-color: color-mix(in srgb, var(--danger) 55%, var(--line-strong)); }
  .toast--err .toast-ic { color: var(--danger); }
  .toast--info .toast-ic { color: var(--point); }
  @media (prefers-reduced-motion: reduce) { .toast { transition: opacity var(--dur-2); transform: translate(-50%, 0); } }

  /* J·a — async loading + "updated" pulse feedback */
  [aria-busy="true"] { cursor: progress; }
  [data-ajax-page][aria-busy="true"] { opacity: .55; transition: opacity var(--dur-1) var(--ease-out); }
  .fb-pulse { animation: fb-pulse 1s var(--ease-out); }
  @keyframes fb-pulse { 0% { box-shadow: 0 0 0 0 var(--point-soft); } 100% { box-shadow: 0 0 0 6px transparent; } }
  @media (prefers-reduced-motion: reduce) { .fb-pulse { animation: none; } }

  /* topbar */
  .gtopbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 16px;
    padding: 16px max(30px, calc((100% - var(--content-max)) / 2)); border-bottom: 1px solid var(--divider);
    background: color-mix(in srgb, var(--void-deep) 78%, transparent); backdrop-filter: blur(12px); }
  .gcrumbs { display: flex; flex-direction: column; gap: 2px; }
  .gwhere { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--point); }
  .gcrumbs h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: 0.01em; white-space: nowrap; color: var(--text); }
  .gback { width: 38px; height: 38px; flex: none; border-radius: var(--r-md); border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--void) 50%, transparent); color: var(--accent); cursor: pointer; display: grid; place-items: center; transition: all var(--dur-1); }
  .gback svg { width: 18px; height: 18px; }
  .gback:hover:not(:disabled) { border-color: var(--point-line); color: var(--point); background: var(--point-soft); transform: translateX(-2px); }
  .gback:active:not(:disabled) { transform: translateX(-2px) scale(0.94); }
  .gback:focus-visible { outline: none; border-color: var(--point-line); box-shadow: 0 0 0 3px var(--point-soft); }
  .gback:disabled { opacity: 0.32; cursor: not-allowed; }
  /* /admin picker brand lockup — sits where the per-guild back button does */
  .gbrand { display: flex; align-items: center; gap: 11px; flex: none; }
  .gbrand .emblem { width: 30px; height: 30px; flex: none; }
  .gbrand-wm { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.18em; text-indent: 0.18em; color: var(--text); }
  /* topbar refresh button — reloads the current path (no JS). .gback tone. */
  /* ===== §X·1 웹 인앱 알림 센터 (디자인 #48, .notif-*) — 셸 계열(포인트 무관: accent·시맨틱만) ===== */
  .notifwrap { position: relative; display: inline-flex; }
  .notifbell { position: relative; }
  .notif-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-pill); background: var(--danger); color: #fff; font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--void-deep); }
  .notif-count[hidden] { display: none; }  /* 명시적 display가 hidden 속성(UA display:none)을 이기는 것 방지 */
  .notif-dd { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: calc(100vw - 36px);
    z-index: var(--z-dropdown); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    background: var(--raise); box-shadow: var(--shadow-2); overflow: hidden; transform-origin: top right;
    animation: dd-in var(--dur-2) var(--ease-out); }
  .notif-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .notif-h h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
  .notif-h .hcount { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    padding: 2px 8px; border-radius: var(--r-pill); }
  .notif-h .hcount.allread-chip { color: var(--muted); background: transparent; border-color: var(--line); }
  .notif-h .allread { margin-left: auto; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
    color: var(--muted); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
  .notif-h .allread:hover:not(:disabled) { color: var(--accent); }
  .notif-h .allread:disabled { opacity: 0.4; cursor: default; }
  .notif-h .allread svg { width: 13px; height: 13px; }
  .notif-list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
  .notif { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); position: relative;
    text-decoration: none; color: var(--text); transition: background var(--dur-1); }
  a.notif { cursor: pointer; }
  a.notif:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .notif.unread { background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .notif.unread::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
  .notif .ni { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; }
  .notif .ni svg { width: 18px; height: 18px; }
  .ni--invite { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); }
  .ni--confirm { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
  .ni--remind { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
  .ni--noshow { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); }
  .ni--sub { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent); }
  .ni--result { color: var(--muted); background: color-mix(in srgb, var(--panel-2) 50%, transparent); border: 1px solid var(--line); }
  .notif .nc { min-width: 0; flex: 1; display: flex; flex-direction: column; }
  .notif .nt { font-size: 13.5px; line-height: 1.45; }
  .notif .nm-meta { display: flex; align-items: center; gap: 9px; margin-top: 5px;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
  .notif .nm-meta .lnk { color: var(--accent); }
  .notif .nm-meta .dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
  .notif-empty { padding: 44px 24px; text-align: center; }
  .notif-empty .ei { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
    margin: 0 auto 13px; color: var(--faint); background: color-mix(in srgb, var(--panel-2) 55%, transparent); border: 1px solid var(--line); }
  .notif-empty .ei svg { width: 25px; height: 25px; }
  .notif-empty .eh { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
  .notif-empty .ep { font-size: var(--fs-sm); color: var(--muted); margin-top: 5px; }
  /* 패널 열림 시 topbar 스태킹 승격 — .gtopbar(z 20·backdrop-filter 컨텍스트) 안의 z 40은
     밖에서 20으로 평탄화돼 콘텐츠 팝오버(z 50)·맨위로(z 60)가 위에 그려질 수 있다(리뷰).
     :has() 미지원 구형은 현상 유지(점진 향상). */
  .gtopbar:has(.notif-dd) { z-index: var(--z-float); }
  /* 모바일 — 드롭다운 대신 바텀 시트(디자인 #48 phone 변형). notif.js가 body로 포탈해
     topbar backdrop-filter의 fixed 컨테이닝 블록을 벗어난다(뷰포트 기준 배치). */
  @media (max-width: 700px) {
    .notif-dd { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
      z-index: var(--z-float);
      border-radius: 18px 18px 0 0; border-bottom: none; max-height: 78vh; display: flex; flex-direction: column;
      transform-origin: bottom center; }
    .notif-list { max-height: none; flex: 1; }
  }
  /* ===== §X·5 글로벌 명령 팔레트 (디자인 #49, .cmdk-*) — 셸 중립(포인트는 하이라이트만) ===== */
  .cmdk-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center;
    align-items: flex-start; padding: 66px 16px 24px; background: color-mix(in srgb, var(--void-deep) 62%, transparent);
    backdrop-filter: blur(6px); animation: dd-in var(--dur-2) var(--ease-out); }
  .cmdk { width: min(600px, 100%); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    background: var(--raise); box-shadow: var(--shadow-2); overflow: hidden; display: flex; flex-direction: column;
    max-height: min(70vh, 560px); }
  .cmdk-in { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
  .cmdk-in .si { color: var(--faint); display: grid; place-items: center; flex: none; }
  .cmdk-q { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text);
    font-family: var(--font-ui); font-size: var(--fs-md); outline: none; }
  .cmdk-q::placeholder { color: var(--faint); }
  .cmdk-in .esc { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
    border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; flex: none; }
  .cmdk-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
  .cmdk .grp-h { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint); padding: 10px 11px 5px; }
  .cmdk .opt { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: var(--r-sm);
    cursor: pointer; }
  .cmdk .opt.hl { background: var(--point-soft); box-shadow: inset 0 0 0 1px var(--point-line); }
  .cmdk .omain { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 9px; }
  .cmdk .lbl { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmdk .sub2 { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); flex: none; }
  .cmdk .meta { display: inline-flex; align-items: center; gap: 7px; flex: none; }
  .cmdk .tagm { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 5px; padding: 1px 6px; }
  .cmdk .enter { font-family: var(--font-mono); font-size: 10px; color: var(--faint); opacity: 0; }
  .cmdk .opt.hl .enter { opacity: 1; color: var(--point); }
  .cmdk .noresult { padding: 34px 16px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
  @media (max-width: 600px) {
    .cmdk-scrim { padding: 0; }
    .cmdk { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: none; }
  }
  .gtopbtn { width: 38px; height: 38px; flex: none; border-radius: var(--r-md); border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--void) 50%, transparent); color: var(--accent); cursor: pointer;
    display: grid; place-items: center; text-decoration: none; transition: all var(--dur-1); }
  .gtopbtn svg { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease); }
  .gtopbtn:hover { border-color: var(--point-line); color: var(--point); background: var(--point-soft); }
  .gtopbtn:hover svg { transform: rotate(90deg); }
  .gtopbtn:active { transform: scale(0.94); }
  .gtopbtn:focus-visible { outline: none; border-color: var(--point-line); box-shadow: 0 0 0 3px var(--point-soft); }

  /* 좁은 폭: 브레드크럼 eyebrow 숨김 (E1 빠른네비 제거됨 — nav는 사이드바[데스크톱]/드로어[모바일] 단일 소스) */
  @media (max-width: 1180px) {
    .gtopbar .gwhere { display: none; }
  }

  /* 3-way 뷰 스위처(F1) — 셸 간 이동(홈/프로필/콘솔). 브레드크럼 우측(좌측 그룹).
     중립 트랙 + 세그먼트별 정체성 색 아이콘; 현재 뷰(.on)만 그 색 알약으로 채움(정적). */
  .vsw { display: inline-flex; align-items: center; gap: 1px; padding: 3px; flex: none;
    border-radius: var(--r-pill); border: 1px solid var(--line-control);
    background: color-mix(in srgb, var(--void-deep) 58%, transparent); }
  .vsw a { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
    border-radius: var(--r-pill); color: var(--muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base);
    text-decoration: none; white-space: nowrap; transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
  .vsw a .vi { width: 16px; height: 16px; flex: none; color: var(--seg-hue, var(--muted)); transition: color var(--dur-2); }
  .vsw a[data-vsw-seg="home"]    { --seg-hue: var(--vsw-hub); }
  .vsw a[data-vsw-seg="profile"] { --seg-hue: var(--vsw-coral); }
  .vsw a[data-vsw-seg="console"] { --seg-hue: var(--vsw-cyan); }
  .vsw a:hover { color: var(--text); }
  .vsw a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--seg-hue); }
  /* current view: filled with its destination hue (정적 — 클릭 시 페이지 이동이라 슬라이드 불필요) */
  .vsw a.on { color: var(--text); background: color-mix(in srgb, var(--seg-hue) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seg-hue) 55%, transparent); }
  .vsw a.on .vi { color: var(--seg-hue); }
  /* mobile (≤1000px): icon-only 축약 — 좌측 버거·우측 빠른네비와 위치 무충돌 */
  @media (max-width: 1000px) {
    .vsw a .vlabel { display: none; }
    .vsw a { padding: 0; width: 36px; justify-content: center; }
  }

  .gtotop { position: fixed; right: 30px; bottom: 30px; z-index: var(--z-float); width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--point-line); background: color-mix(in srgb, var(--point) 20%, var(--panel-2)); color: var(--point);
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px -8px var(--point-glow), var(--shadow-2);
    opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background var(--dur-1), color var(--dur-1), bottom var(--dur-2) var(--ease-out); }
  .gtotop svg { width: 20px; height: 20px; }
  .gtotop.show { opacity: 1; transform: none; pointer-events: auto; }
  .gtotop:hover { background: var(--point); color: var(--point-ink); }
  .gtotop:active { transform: scale(0.92); }
  .gtotop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft), 0 10px 30px -8px var(--point-glow); }

  /* ===== tooltip component (.tip) — design "Kletoi 툴팁 컴포넌트", E8 =====
     hover + focus-within(키보드) 노출, 4방향(data-place)+화살표, 엣지 flip(tooltip.js),
     .tt 제목/.td 보조/.cmd·.kbd 명령. 토큰 기반(테마·모드 자동, 포인트 중립). */
  .tip { position: relative; display: inline-flex; }
  /* M·3: tooltip.js가 hover/focus 시 버블을 여기로 옮겨 trigger rect에 fixed 오버레이 →
     사이드바 overflow·드로어 transform 클리핑 회피. class="tip"라 아래 모든 규칙 그대로 적용. */
  #tip-portal { position: fixed; pointer-events: none; z-index: var(--z-tooltip); }
  .tip > [role="tooltip"] { position: absolute; z-index: var(--z-tooltip); pointer-events: none; width: max-content; max-width: 240px;
    padding: 8px 11px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.45; font-weight: 500;
    color: var(--text); background: var(--panel-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
  .tip > [role="tooltip"] .kbd, .tip > [role="tooltip"] .cmd { margin-top: 6px; display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs);
    color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); border-radius: 6px; padding: 2px 7px; }
  .tip > [role="tooltip"] .tt { display: block; }
  .tip > [role="tooltip"] .td { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; margin-top: 3px; }
  .tip > [role="tooltip"]::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--panel-2);
    border: 1px solid var(--line-strong); border-right: none; border-bottom: none; }
  /* placement: top (default) */
  .tip > [role="tooltip"], .tip[data-place="top"] > [role="tooltip"] { bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(5px); }
  .tip > [role="tooltip"]::after, .tip[data-place="top"] > [role="tooltip"]::after { top: 100%; left: 50%; transform: translate(-50%, -50%) rotate(225deg); }
  .tip[data-place="bottom"] > [role="tooltip"] { top: calc(100% + 9px); bottom: auto; left: 50%; transform: translateX(-50%) translateY(-5px); }
  .tip[data-place="bottom"] > [role="tooltip"]::after { top: auto; bottom: 100%; left: 50%; transform: translate(-50%, 50%) rotate(45deg); }
  .tip[data-place="left"] > [role="tooltip"] { right: calc(100% + 9px); left: auto; top: 50%; bottom: auto; transform: translateY(-50%) translateX(5px); }
  .tip[data-place="left"] > [role="tooltip"]::after { top: 50%; left: 100%; transform: translate(-50%, -50%) rotate(135deg); }
  .tip[data-place="right"] > [role="tooltip"] { left: calc(100% + 9px); top: 50%; bottom: auto; transform: translateY(-50%) translateX(-5px); }
  .tip[data-place="right"] > [role="tooltip"]::after { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-45deg); }
  /* edge-collision flip (tooltip.js sets data-flip → opposite side) */
  .tip[data-flip="top"] > [role="tooltip"] { bottom: calc(100% + 9px); top: auto; left: 50%; right: auto; transform: translateX(-50%) translateY(5px); }
  .tip[data-flip="top"] > [role="tooltip"]::after { top: 100%; bottom: auto; left: 50%; transform: translate(-50%, -50%) rotate(225deg); }
  .tip[data-flip="bottom"] > [role="tooltip"] { top: calc(100% + 9px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%) translateY(-5px); }
  .tip[data-flip="bottom"] > [role="tooltip"]::after { bottom: 100%; top: auto; left: 50%; transform: translate(-50%, 50%) rotate(45deg); }
  .tip[data-flip="left"] > [role="tooltip"] { right: calc(100% + 9px); left: auto; top: 50%; bottom: auto; transform: translateY(-50%) translateX(5px); }
  .tip[data-flip="left"] > [role="tooltip"]::after { top: 50%; left: 100%; right: auto; transform: translate(-50%, -50%) rotate(135deg); }
  .tip[data-flip="right"] > [role="tooltip"] { left: calc(100% + 9px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%) translateX(-5px); }
  .tip[data-flip="right"] > [role="tooltip"]::after { top: 50%; left: 0; right: auto; transform: translate(-50%, -50%) rotate(-45deg); }
  /* reveal on hover/focus — delay-in, instant-out. §J·f: :hover 변형은 hover-가능 기기로 게이트
     — 터치의 sticky :hover 에뮬레이션이 탭-토글 hide 후 인플레이스 버블을 유령 재표시하는 것 방지.
     :focus-within/.tip-open은 무조건 유지(no-JS 키보드 폴백·JS 탭-토글 경로). */
  /* :focus-within은 no-JS 폴백 전용(:not([data-tw]) — 리뷰: Android는 탭이 버튼에 focus를 줘,
     JS-wired tip에서 sticky focus가 탭-토글 hide 직후 인플레이스 버블을 유령 재표시한다.
     JS-wired는 focusin/focusout 핸들러가 포털 .tip-open으로 동일 경로 커버). */
  .tip:not([data-tw]):focus-within > [role="tooltip"], .tip.tip-open > [role="tooltip"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
    transition: opacity var(--dur-2) var(--ease-out) var(--tip-delay), transform var(--dur-2) var(--ease-out) var(--tip-delay), visibility 0s; }
  .tip[data-place="left"]:not([data-tw]):focus-within > [role="tooltip"], .tip[data-place="left"].tip-open > [role="tooltip"],
  .tip[data-place="right"]:not([data-tw]):focus-within > [role="tooltip"], .tip[data-place="right"].tip-open > [role="tooltip"],
  .tip[data-flip="left"]:not([data-tw]):focus-within > [role="tooltip"], .tip[data-flip="left"].tip-open > [role="tooltip"],
  .tip[data-flip="right"]:not([data-tw]):focus-within > [role="tooltip"], .tip[data-flip="right"].tip-open > [role="tooltip"] { transform: translateY(-50%) translateX(0); }
  @media (hover: hover) {
    .tip:hover > [role="tooltip"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
      transition: opacity var(--dur-2) var(--ease-out) var(--tip-delay), transform var(--dur-2) var(--ease-out) var(--tip-delay), visibility 0s; }
    .tip[data-place="left"]:hover > [role="tooltip"], .tip[data-place="right"]:hover > [role="tooltip"],
    .tip[data-flip="left"]:hover > [role="tooltip"], .tip[data-flip="right"]:hover > [role="tooltip"] { transform: translateY(-50%) translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tip > [role="tooltip"] { transition: opacity var(--dur-1) !important; transform: none !important; }
    .tip:hover > [role="tooltip"], .tip:focus-within > [role="tooltip"], .tip.tip-open > [role="tooltip"] { transform: none !important; transition: opacity var(--dur-1) !important; }
  }

  /* calendar — token-derived month/date+time picker (design system handoff
     2026-06-17, component #14 updated). Hydrated by calendar.js on [data-calendar]
     mounts. Display (member hub) = grid + foot; picker (matches, data-cal-target)
     adds the time row + writes to the field. Today = ring, selected = --point fill,
     out-of-range dimmed, event = dot, clickable title → month/year picker.
     All colors via tokens → follows theme/mode/point automatically. */
  .dscal { width: 320px; flex: none; background: color-mix(in srgb, var(--void) 55%, transparent); border: 2px solid var(--line-strong);
    border-radius: var(--r-lg); padding: 0 18px 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-2); }
  .dscal-h { display: flex; align-items: center; justify-content: space-between; margin: 0 -18px 14px; padding: 13px 14px;
    background: color-mix(in srgb, var(--point) 9%, var(--void-deep)); border-bottom: 2px solid var(--line-strong); }
  .dscal-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); display: inline-flex; align-items: center; gap: 8px;
    border: none; background: transparent; color: var(--text); cursor: pointer; padding: 5px 11px; border-radius: var(--r-sm); transition: background var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease); }
  .dscal-title:hover { background: var(--point-soft); }
  .dscal-title:active { transform: translateY(0.5px); }
  .dscal-title .tcaret { width: 13px; height: 13px; color: var(--muted); transition: transform var(--dur-2) var(--ease); }
  .dscal.picking .dscal-title { background: var(--point-soft); box-shadow: inset 0 0 0 1px var(--point-line); }
  .dscal.picking .dscal-title .tcaret { transform: rotate(180deg); color: var(--point); }
  .dscal-title .mono { color: var(--muted); font-size: var(--fs-md); }
  /* month/year picker (replaces grid) */
  .dscal-picker { min-height: 252px; display: flex; flex-direction: column; animation: dd-in var(--dur-2) var(--ease-out); }
  .dscal-yr { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
  .dscal-yr .yv { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); min-width: 70px; text-align: center; }
  .dscal-mons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; }
  .dscal-mon { border: 1px solid var(--line); background: color-mix(in srgb, var(--void) 50%, transparent); border-radius: var(--r-sm);
    color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); font-weight: 600; cursor: pointer; display: grid; place-items: center; transition: all var(--dur-1); padding: 11px 0; }
  .dscal-mon:hover { border-color: var(--point-line); background: var(--point-soft); color: var(--point); }
  .dscal-mon:active { transform: translateY(0.5px) scale(0.97); }
  .dscal-mon.on { background: var(--point); color: var(--point-ink); border-color: var(--point); box-shadow: 0 6px 16px -6px var(--point-glow); }
  .dscal-nav { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: transparent;
    color: var(--accent); cursor: pointer; display: grid; place-items: center; transition: all var(--dur-1); }
  .dscal-nav:hover { border-color: var(--point-line); color: var(--point); background: var(--point-soft); }
  .dscal-nav:active { transform: scale(0.92); }
  .dscal-nav:focus-visible { outline: none; border-color: var(--point-line); box-shadow: 0 0 0 3px var(--point-soft); }
  .dscal-nav svg { width: 15px; height: 15px; }
  .dscal-next svg { transform: rotate(180deg); }
  .dscal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .dscal-dow { margin-bottom: 4px; }
  .dscal-dowc { text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--faint); padding: 4px 0; letter-spacing: 0.04em; }
  .dscal-dowc.sun { color: color-mix(in srgb, var(--danger) 70%, var(--muted)); }
  .dscal-cell { position: relative; aspect-ratio: 1; border: none; background: transparent; border-radius: var(--r-sm);
    color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); cursor: pointer; display: grid; place-items: center;
    transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease); }
  .dscal-cell:hover:not(:disabled) { background: var(--point-soft); }
  .dscal-cell:active:not(:disabled) { transform: scale(0.9); }
  .dscal-cell.out { color: var(--faint); opacity: 0.5; cursor: default; }
  .dscal-cell.today { box-shadow: inset 0 0 0 1.5px var(--point-line); }
  .dscal-cell.sel { background: var(--point); color: var(--point-ink); font-weight: 700; box-shadow: 0 6px 16px -6px var(--point-glow); }
  .dscal-cell.sel:hover { background: var(--point); }
  .dscal-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--point); }
  .dscal-cell.sel .dscal-dot { background: var(--point-ink); }
  /* time row (picker only) */
  .dscal-time { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .dscal-time > svg { color: var(--point); width: 16px; height: 16px; }
  .dscal-time-lb { font-size: 12.5px; font-weight: 600; }
  .dscal-time-ctrl { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: color-mix(in srgb, var(--void-deep) 45%, transparent); transition: border-color var(--dur-1); }
  .dscal-time-ctrl:focus-within { border-color: var(--point-line); }
  /* hour/minute — direct keyboard-editable <input>s; the .dscal-time-ctrl frames each
     (border + focus-within highlight). No +/- steppers: type the time directly. */
  .dscal-time-v { width: 40px; text-align: center; font-size: var(--fs-md); font-weight: 700; color: var(--text);
    border: none; background: transparent; padding: 7px 6px; outline: none; -moz-appearance: textfield; cursor: text; }
  .dscal-time-v:focus { color: var(--point); }
  .dscal-time-colon { font-size: var(--fs-md); font-weight: 700; color: var(--muted); margin: 0 -4px; }
  .dscal-time-out { margin-left: auto; font-size: var(--fs-sm); color: var(--point); background: var(--point-soft); padding: 4px 10px; border-radius: var(--r-pill); }
  .dscal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .dscal-legend { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); position: relative; padding-left: 14px; }
  .dscal-legend .dscal-dot { position: static; transform: none; }

  /* guild switcher (Stage 1: current guild + link to /admin) */
  .gsrv-trigger { display: flex; align-items: center; gap: 11px; padding: 7px 13px 7px 9px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: color-mix(in srgb, var(--void) 50%, transparent); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-2); text-decoration: none; color: inherit; }
  .gsrv-trigger:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--void) 62%, transparent); }
  .gsrv-trigger:active { transform: translateY(1px) scale(0.99); }
  .gsrv-meta { text-align: left; min-width: 0; }
  .gsrv-nm { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
  .gsrv-st { font-size: var(--fs-xs); color: var(--point); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .gsrv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--point); box-shadow: 0 0 8px var(--point); flex: none; }

  /* avatar */
  .gava-wrap { position: relative; flex: none; }
  .gava { border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); font-weight: 600; color: #fff; overflow: hidden; }

  /* content + layout */
  /* §SL — 콘텐츠 컬럼을 --content-max로 캡·중앙 정렬(초광폭 무한 확장 방지). 실제 폭이 있는 박스라
     초광폭 "앉힌 플레인"(아래) 면·보더·섀도가 컬럼에만 칠해진다. .gtopbar는 padding-inline max()로
     콘텐츠 밴드 폭이 이 박스 보더선과 일치(헤더↔컬럼 좌우 라인 정렬). */
  .gcontent { max-width: var(--content-max); margin-inline: auto; padding: 26px 30px 64px; }
  /* 초광폭 여백 폴리시 A(앉힌 플레인, design #62) — 컬럼을 반 단계 밝은 --void 면으로 앉히고
     헤어라인 + 여백에 드리우는 좌우 섀도로 경계만 정돈. 여백(.ds-main 배경)은 --void-deep 유지·데코 0.
     1760px↑에서만(그 아래는 여백이 미미해 현행 유지). B(엠블럼)·C(비네트)는 design-requests #62 대안. */
  @media (min-width: 1760px) {
    .gcontent { background: var(--void); border-inline: 1px solid var(--line); box-shadow: var(--gutter-shadow); }
  }
  .gstack { display: flex; flex-direction: column; gap: 18px; }
  .gcols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .grow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* panel */
  /* §J·f — 스크린리더 전용 텍스트(시각 숨김). '—' 등 기호 플레이스홀더의 의미를 SR에 전달. */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0; }
  .gpanel { background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
  .gpanel-h { display: flex; align-items: center; gap: 11px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
  .gpanel-h h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
  .gpanel-h .gsub { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
  .gpanel-b { padding: 20px 22px; }

  /* stat cards */
  .gstat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .gstat { background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 20px 22px; transition: border-color var(--dur-1), transform var(--dur-1); text-decoration: none; color: inherit; display: block; }
  .gstat.clickable { cursor: pointer; }
  .gstat.clickable:hover { border-color: var(--point-line); transform: translateY(-2px); }
  .gstat.clickable:active { transform: translateY(0) scale(0.99); }
  .gstat.clickable:focus-visible { outline: none; border-color: var(--point-line); box-shadow: 0 0 0 3px var(--point-soft); }
  .gstat-label { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .gstat-label svg { width: 15px; height: 15px; color: var(--point); }
  .gstat-num { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-6xl); line-height: 1.1; margin-top: 12px; color: var(--text); }
  .gstat-num small { font-size: var(--fs-lg); color: var(--faint); font-family: var(--font-mono); }
  .gstat-delta { font-size: var(--fs-sm); margin-top: 6px; font-family: var(--font-mono); color: var(--faint); display: flex; align-items: center; gap: 4px; }
  .gstat-delta.up { color: var(--point); }
  .gbignum { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5xl); line-height: 1; color: var(--text); }

  /* hero */
  .ghero { position: relative; overflow: hidden; }
  .ghero-emb { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); opacity: 0.5; }
  .ghero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 35%, transparent 92%); }
  .ghero-body { position: relative; z-index: 1; padding: 28px 30px; display: flex; flex-direction: column; gap: 15px; max-width: 560px; }
  .ghero-q { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: 0.04em; color: var(--point); }
  .ghero-lead { font-family: var(--font-display); font-weight: 600; font-size: 25px; }

  /* lists */
  .glist { display: flex; flex-direction: column; }
  .glist-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
  .glist-row:last-child { border-bottom: none; }
  .glist-ic { width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--void-deep) 50%, transparent); }
  .glist-ic svg { width: 15px; height: 15px; }

  .gcheck { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .gcheck:last-child { border-bottom: none; }
  .gcheck-ic { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--point) 16%, transparent); color: var(--point); }
  .gcheck-ic svg { width: 13px; height: 13px; }

  /* bar */
  .gbar { height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--void-deep) 60%, transparent); overflow: hidden; }
  .gbar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--point); }

  /* ============ §O·10 슬3 온보딩 위저드 — guild_overview 첫 설치 카드 ============ */
  .wiz { border: 1px solid var(--point-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2);
    background: linear-gradient(140deg, color-mix(in srgb, var(--point) 7%, var(--panel)) 0%, color-mix(in srgb, var(--panel) 92%, transparent) 45%); }
  .wiz svg { fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
  .wiz-h { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 14px; }
  .wiz-h .wic { width: 42px; height: 42px; border-radius: 12px; background: var(--point-soft); border: 1px solid var(--point-line); display: grid; place-items: center; color: var(--point); flex: none; }
  .wiz-h .wic svg { width: 22px; height: 22px; }
  .wiz-h .wht { min-width: 0; }
  .wiz-h h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
  .wiz-h .ws { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  /* 진행: N/총 + 스텝별 세그먼트 막대(필수는 굵게) */
  .wprog { padding: 0 22px 16px; }
  .wprog .pline { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .wprog .pn { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--point); }
  .wprog .ph { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-left: auto; }
  .gbar-seg { display: flex; gap: 4px; }
  .gbar-seg i { height: 7px; flex: 1; border-radius: var(--r-pill); background: color-mix(in srgb, var(--faint) 26%, transparent); }
  .gbar-seg i.req { height: 9px; margin-top: -1px; }
  .gbar-seg i.done { background: var(--point); }
  .gbar-seg i.cur { background: color-mix(in srgb, var(--point) 42%, transparent); outline: 1.5px solid var(--point); outline-offset: 1px; }
  /* 스텝 행 — 상태 3종(done / cur / todo) */
  .wsteps { border-top: 1px solid var(--line); }
  .wstep { display: flex; align-items: center; gap: 13px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
  .wstep:last-child { border-bottom: none; }
  .wstep .st { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
  .wstep .st svg { width: 13px; height: 13px; }
  .wstep .sm { flex: 1; min-width: 0; }
  .wstep .sn { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .wstep .sd { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
  .req-tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--r-pill); padding: 1px 8px; }
  .opt-tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); }
  .wstep.done .st { background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 42%, transparent); color: var(--ok); }
  .wstep.done .sn { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
  .wstep .donechip { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--ok); }
  .wstep.cur { background: color-mix(in srgb, var(--point) 7%, transparent); border-left: 3px solid var(--point); padding-left: 19px; }
  .wstep.cur .st { background: var(--point); color: var(--point-ink); box-shadow: 0 0 10px var(--point-soft); }
  .wstep.cur .sn .now { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); border-radius: var(--r-pill); padding: 1px 8px; }
  .wstep.todo .st { border: 1.5px dashed var(--line-strong); color: var(--faint); }
  .wstep.todo .sn { color: var(--muted); }
  .wstep .act { flex: none; }
  .wstep .act .btn { height: 32px; padding: 0 13px; font-size: 12.5px; border-radius: var(--r-sm); }
  @media (prefers-reduced-motion: no-preference) {
    .wstep.cur .st { animation: curpulse 2.4s ease-in-out infinite; }
    @keyframes curpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--point-soft); } 50% { box-shadow: 0 0 0 6px transparent; } }
  }
  /* 슬3b 라이프사이클 — 나중에→조용한 한 줄(.quiet) · 필수 완료 축하(.alldone) */
  /* display 지정 요소는 UA [hidden]{display:none}을 이기므로 명시적으로 숨김(JS 토글 훅). */
  .wiz[hidden], .quiet[hidden], .alldone[hidden] { display: none; }
  .wiz-h .dismiss { margin-left: auto; flex: none; }
  .quiet { border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--panel) 70%, transparent); display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
  .quiet .qic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); background: color-mix(in srgb, var(--faint) 14%, transparent); flex: none; }
  .quiet .qt { font-size: 13px; font-weight: 600; }
  .quiet .qs { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 1px; }
  .quiet .mini-seg { display: flex; gap: 3px; width: 120px; margin-left: auto; flex: none; }
  .quiet .mini-seg i { height: 5px; flex: 1; border-radius: var(--r-pill); background: color-mix(in srgb, var(--faint) 26%, transparent); }
  .quiet .mini-seg i.done { background: var(--point); }
  .alldone { border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--ok) 7%, transparent); display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
  .alldone .qic { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 15%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); display: grid; place-items: center; flex: none; }
  .alldone .qt { font-size: 13.5px; font-weight: 600; }
  .alldone .qs { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .quiet .qic svg { width: 15px; height: 15px; }
  .alldone .qic svg { width: 16px; height: 16px; }
  .quiet .qic svg, .alldone .qic svg { fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 560px) { .quiet .mini-seg { display: none; } }

  /* ============ MB·5 로스터 행 퀵액션 팝오버 ============ */
  .qa-cell { position: relative; width: 46px; text-align: right; }
  .qa-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--raise); color: var(--muted); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .13s, border-color .13s, color .13s; }
  .gtbl tbody tr:hover .qa-btn, .qa-btn:focus-visible, .qa-btn[aria-expanded="true"] { opacity: 1; }
  .qa-btn:hover, .qa-btn[aria-expanded="true"] { color: var(--point); border-color: var(--point-line); }
  .qa-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
  @media (prefers-reduced-motion: reduce) { .qa-btn { transition: none; } }
  .qa-pop { position: absolute; top: calc(100% - 4px); right: 8px; width: 234px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--raise); box-shadow: var(--shadow-2); padding: 6px; z-index: var(--z-dropdown); text-align: left; }
  .qa-pop[hidden] { display: none; }
  @media (prefers-reduced-motion: no-preference) { .qa-pop:not([hidden]) { animation: qain .15s ease; } @keyframes qain { from { opacity: 0; transform: translateY(-5px); } } }
  .qa-who { display: flex; align-items: center; gap: 9px; padding: 8px 10px 9px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
  .qa-who .nm { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qa-who .badge { margin-left: auto; flex: none; }
  .qa-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--r-sm); background: none; color: var(--text); font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; text-decoration: none; }
  .qa-item:hover { background: var(--point-soft); }
  .qa-item .qi { width: 16px; height: 16px; color: var(--muted); flex: none; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
  .qa-item:hover .qi { color: var(--point); }
  .qa-item .aux { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
  .qa-item .sw { margin-left: auto; width: 30px; height: 17px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--panel-3) 50%, transparent); position: relative; flex: none; }
  .qa-item .sw::after { content: ''; position: absolute; top: 1.5px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--faint); transition: transform .15s, background .15s; }
  .qa-item .sw.on { background: var(--point-soft); border-color: var(--point-line); }
  .qa-item .sw.on::after { transform: translateX(12px); background: var(--point); }
  @media (prefers-reduced-motion: reduce) { .qa-item .sw::after { transition: none; } }
  .qa-mmform { display: block; }
  .qa-dvd { height: 1px; background: var(--line); margin: 5px 8px; }
  .qa-hint { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); padding: 6px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; line-height: 1.6; }
  /* 모바일(≤640px): 팝오버 → 하단 시트 */
  @media (max-width: 640px) {
    .qa-pop { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; border-radius: 16px 16px 0 0; padding: 8px 12px 20px; }
    .qa-item { padding: 12px; font-size: 14px; }
  }

  /* tier badge */
  .tier { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; padding: 3px 10px 3px 8px; border-radius: var(--r-pill); border: 1px solid; }
  .tier .te { font-size: var(--fs-sm); line-height: 1; }

  /* icon button */
  .gicobtn { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: transparent; color: var(--accent);
    cursor: pointer; display: grid; place-items: center; transition: all var(--dur-1); }
  .gicobtn svg { width: 15px; height: 15px; }
  .gicobtn:hover { background: color-mix(in srgb, var(--point) 12%, transparent); border-color: var(--point-line); color: var(--point); }
  .gicobtn:active { transform: translateY(1px) scale(0.94); }
  .gicobtn:focus-visible { outline: none; border-color: var(--point-line); box-shadow: 0 0 0 3px var(--point-soft); }
  .gicobtn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
  .gicobtn.danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
  .gicobtn.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); color: var(--danger); }
  .gicobtn.sm { width: 26px; height: 26px; }

  /* toolbar + search */
  .gtoolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .gsearch { display: flex; align-items: center; gap: 9px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line);
    background: color-mix(in srgb, var(--void-deep) 50%, transparent); flex: 1; min-width: 200px; max-width: 340px; transition: border-color var(--dur-1); }
  .gsearch:focus-within { border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .gsearch.sm { max-width: 220px; }
  .gsearch input { border: none; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: var(--fs-md); padding: 10px 0; width: 100%; outline: none; }
  .gsearch input::placeholder { color: var(--faint); }

  /* table — design-system `.dsc-tbl` 정렬: point-틴트 헤더(2px point-line 밑줄·accent 700) +
     짝수행 zebra + 강한 point hover + hover 좌측 액센트 바. 색은 전부 토큰/color-mix. */
  .gtbl-wrap { overflow-x: auto; }
  .gtbl { width: 100%; border-collapse: collapse; }
  .gtbl th { text-align: left; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding: 13px 16px; border-bottom: 2px solid var(--point-line); white-space: nowrap; background: color-mix(in srgb, var(--point) 12%, var(--panel)); }
  .gtbl th.r, .gtbl td.r { text-align: right; }
  .gtbl td { padding: 11px 16px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); font-size: 13px; vertical-align: middle; color: var(--text); }
  .gtbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .gtbl tbody tr:last-child td { border-bottom: none; }
  .gtbl tbody tr { transition: background var(--dur-1), box-shadow var(--dur-1); }
  .gtbl tbody tr:hover td { background: color-mix(in srgb, var(--point) 22%, transparent); }
  .gtbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--point); }
  .gtbl--compare tbody tr:hover td { background: color-mix(in srgb, var(--gold) 5%, transparent); }
  .gtbl--compare tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
  .gch-ic { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .gch-nm { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }

  /* 활성 채널 카드 (대시보드 PR2 — 읽기 전용 카드 그리드 + 검색) */
  .chsearch { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; max-width: 360px; padding: 0 13px; height: 38px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 50%, transparent); transition: border-color var(--dur-1), box-shadow var(--dur-2); }
  .chsearch:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }
  .chsearch svg { width: 15px; height: 15px; flex: none; color: var(--faint); }
  .chsearch:focus-within svg { color: var(--accent); }
  .chsearch input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: var(--text); font-family: var(--font-ui); font-size: 13.5px; }
  .chsearch input::placeholder { color: var(--faint); }
  .chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .chcard { background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-2); transition: border-color var(--dur-1), transform var(--dur-1); }
  .chcard:hover { border-color: var(--point-line); transform: translateY(-2px); }
  .chcard-pad { padding: 17px 18px; }
  /* §A7: wrap 필수 — 좁은 카드 폭(그리드 minmax 300px 하한)에서 버튼 행이 카드 폭을 넘으면
     줄바꿈 없이는 마지막 요소(삭제)가 카드 밖으로 돌출. 삭제 우측 정렬은 flex:1 스페이서 대신
     margin-left:auto — wrap돼 새 줄로 내려가도 그대로 우측에 붙는다(스페이서는 그룹 이탈). */
  .chcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line); }
  .chcard-foot form { margin: 0; }
  .chcard-foot .chcard-del { margin-left: auto; }  /* ↑`form{margin:0}`(0,1,1)보다 높은 특이성 필요 */
  .chcard-foot .btn svg { width: 14px; height: 14px; }
  .chcard-ic { width: 36px; height: 36px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .chcard-ic svg { width: 18px; height: 18px; }
  .chcard-nm { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .avstack { display: flex; align-items: center; min-width: 0; }
  .avstack-i { display: inline-flex; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
  .avstack-i:first-child { margin-left: 0; }
  .avstack-more { margin-left: -8px; width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--accent); background: var(--panel-2); border: 1px solid var(--line-strong); box-shadow: 0 0 0 2px var(--panel); }

  /* timeline */
  .gtimeline { position: relative; padding-left: 26px; }
  .gtimeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
  .gtl-item { position: relative; padding-bottom: 20px; }
  .gtl-item:last-child { padding-bottom: 0; }
  .gtl-dot { position: absolute; left: -25px; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--void); display: grid; place-items: center; }
  .gtl-dot i { width: 6px; height: 6px; border-radius: 50%; display: block; }

  /* ACL */
  .gacl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gacl-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 38%, transparent); }
  .gacl-add { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: var(--r-md);
    border: 1px dashed var(--line-strong); background: transparent; color: var(--point); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: all var(--dur-1); }
  .gacl-add:hover { border-color: var(--point); background: var(--point-soft); }
  .gacl-add:active { transform: translateY(0.5px) scale(0.99); }
  .gacl-add:focus-visible { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }

  /* empty state */
  .gempty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; text-align: center; }
  /* display:flex가 UA의 [hidden]{display:none}을 이겨 #chNoMatch류가 항상 노출되던 버그 수정 */
  .gempty[hidden] { display: none; }
  .gempty-ic { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .gempty-ic svg { width: 26px; height: 26px; }
  .gempty-t { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
  .gempty-h { font-size: 13.5px; color: var(--muted); max-width: 360px; line-height: 1.5; }
  /* #58 온보딩 빈 상태(신규 서버 0건) — art(점선 링 + 지면 아이콘 + warn 스파크)로 "다음 할 일 안내판"
     톤 통일. 필터-빈 상태(WEB_*_FILTER_EMPTY류)는 위 .gempty-ic 유지(전환형이라 온보딩 아님). */
  .gempty-art { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 22px; border: 1.5px dashed var(--line-strong); color: var(--point); }
  .gempty-art svg { width: 36px; height: 36px; }
  /* warn 스파크(+) — 토큰만, 그라디언트 2줄 교차(새 hex 없음). 지면별 art는 아이콘만 교체(새 그림 금지). */
  .gempty-art::after { content: ''; position: absolute; top: 1px; right: 5px; width: 11px; height: 11px; background: linear-gradient(var(--warn), var(--warn)) center / 100% 1.6px no-repeat, linear-gradient(var(--warn), var(--warn)) center / 1.6px 100% no-repeat; }
  .gempty-acts { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
  .gempty-sub { color: var(--point); font-size: 12.5px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
  .gempty-sub:hover { text-decoration: underline; }
  .gempty-chips { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
  .chip-hint { font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .chip-hint svg { width: 12px; height: 12px; color: var(--point); }
  .chip-hint.cmd { font-family: var(--font-mono); font-size: 11.5px; }

  /* ============================================================
     #61 트리거 채널 관리 패널 (§TC 재설계 — "Kletoi 트리거 채널 관리.html") — 좌:폼+미리보기 /
     우:목록 2열, 2단 그룹 폼 + 인라인 힌트 + 라이브 미리보기 + 진행-점 한도 배지. 토큰만.
     클래스는 tc-/trow-/dcx- 네임스페이스(전역 .fld/.hint/.cap 등과 충돌 회피). 빈 상태 = #58 .gempty-art 재사용.
     ============================================================ */
  /* 한도 = 진행 점 5개 (무료 잠금 = 점선) */
  .tc-limit { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); }
  .tc-dots { display: inline-flex; gap: 4px; }
  .tc-dots i { width: 9px; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--faint) 34%, transparent); border: 1px solid var(--line); }
  .tc-dots i.on { background: var(--point); border-color: transparent; box-shadow: 0 0 7px var(--point-soft); }
  .tc-dots i.lock { border-style: dashed; }
  .tc-limit.full { color: var(--warn); }
  .tc-limit.full .tc-dots i.on { background: var(--warn); box-shadow: none; }
  /* 2열 레이아웃 */
  .tc-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .tc-grid .tc-colL { border-right: 1px solid var(--line); }
  .tc-colhead { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 12px 20px 0; }
  /* 폼: 2단 그룹 */
  .tc-fgroup { padding: 16px 20px; }
  .tc-fgroup + .tc-fgroup { border-top: 1px dashed var(--line); }
  .tc-ghead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .tc-stepn { width: 20px; height: 20px; border-radius: 50%; background: var(--point-soft); border: 1px solid var(--point-line); color: var(--point); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; flex: none; }
  .tc-ghead h4 { font-size: 13px; font-weight: 600; }
  .tc-opt { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
  .tc-frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .tc-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .tc-fld + .tc-fld { margin-top: 12px; }
  .tc-fl { font-size: 11.5px; font-weight: 700; color: var(--muted); }
  .tc-hint { font-size: 11px; color: var(--faint); line-height: 1.5; }
  .tc-hint code { font-family: var(--font-mono); font-size: 10.5px; color: var(--point); background: var(--point-soft); padding: 0 5px; border-radius: 4px; }
  /* 라이브 미리보기 */
  .tc-preview { border: 1px solid var(--point-line); border-radius: var(--r-md); background: color-mix(in srgb, var(--point) 5%, transparent); padding: 14px 16px; }
  .tc-pvlb { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--point); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
  .tc-pvlb svg { width: 12px; height: 12px; }
  .tc-dcx { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--void-deep); padding: 10px 12px; font-size: 12.5px; }
  .tc-dcx-cat { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 5px; }
  .tc-dcx-cat svg { width: 10px; height: 10px; }
  .tc-dcx-vc { display: flex; align-items: center; gap: 7px; padding: 5px 0 2px 12px; color: var(--text); font-weight: 600; }
  .tc-dcx-vc svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
  .tc-dcx-cap { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); flex: none; }
  .tc-pvsum { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .tc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; }
  .tc-chip.def { border-style: dashed; color: var(--faint); }
  .tc-chip b { color: var(--text); }
  /* 트리거 목록 행 */
  .trow { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
  .trow:first-child { border-top: none; }
  .trow-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--point-soft); border: 1px solid var(--point-line); color: var(--point); display: grid; place-items: center; flex: none; }
  .trow-ic svg { width: 16px; height: 16px; }
  .trow-m { flex: 1; min-width: 0; }
  .trow-nm { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trow-conf { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
  /* 한도 도달 바 */
  .tc-limitbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 7%, transparent); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
  .tc-limitbar svg { width: 15px; height: 15px; color: var(--warn); flex: none; }
  @media (max-width: 940px) {
    .tc-grid { grid-template-columns: 1fr; }
    .tc-grid .tc-colL { border-right: none; border-bottom: 1px solid var(--line); }
    .tc-frow2 { grid-template-columns: 1fr; }
  }

  /* info chip */
  .ginfo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
  .ginfo svg { width: 15px; height: 15px; color: var(--point); flex: none; }

  /* save bar — 위치/표시는 §SF·6 규칙(≈709행: fixed 하단 floating)이 소유. 여기선 내부 레이아웃만. */
  .gsavebar { display: flex; align-items: center; gap: 14px; padding: 16px 22px; }

  /* premium */
  .gpremhero { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--gold-ink) 30%, transparent); }
  .gprem-emb { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); opacity: 0.45; }
  .gpremhero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 38%, transparent 95%); }
  .gprem-body { position: relative; z-index: 1; padding: 26px 30px; display: flex; flex-direction: column; gap: 14px; }
  .gprem-k { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .gupsell { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border-color: color-mix(in srgb, var(--gold-ink) 25%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); }

  /* point segmented + extra badge tones used by console views */
  .seg--point button.on { background: var(--point); color: var(--point-ink); box-shadow: 0 6px 18px -8px var(--point-glow); }
  .badge--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
  .badge--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
  .badge--primary { color: var(--accent); background: color-mix(in srgb, var(--primary) 16%, transparent); }
  .badge--gold { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold-ink) 30%, transparent); }

  @media (max-width: 1320px) { .gstat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 1000px) {
    /* sidebar → slide-in drawer over the content (의뢰 #19). JS keeps data-collapsed=false
       here so the drawer shows the full expanded nav; the .ds-burger in the topbar opens it,
       scrim/Esc/×/nav-select close it. Desktop (>1000px) 240<->72 collapse rail is unchanged. */
    .ds { grid-template-columns: 1fr; }                  /* sidebar leaves the grid flow */
    .ds-side { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); z-index: var(--z-overlay);
      transform: translateX(-102%); transition: transform var(--dur-3) var(--ease-out); }
    .ds[data-drawer="open"] .ds-side { transform: none; }
    .ds-collapse { display: none; }                      /* desktop collapse toggle — N/A in drawer */
    .ds-burger, .ds-drawer-close { display: grid; }
    .ds[data-drawer="open"] .ds-scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-3) var(--ease); }
    .gcols, .gstat-grid, .gacl-grid { grid-template-columns: 1fr; }
    .gcontent, .gtopbar { padding-left: 20px; padding-right: 20px; }
  }
  /* reduce-motion: drawer slide → instant (no transform animation), scrim fade off — 의뢰 #18 정합 */
  @media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
    .ds-side, .ds-scrim { transition: none !important; }
  }

  /* ============================================================
     MEMBER PROFILE (coral) — ported from the "Kletoi 멤버" handoff.
     Rank hero, progress bar, rank track, mileage stats, leaderboard,
     rank pill. coral(--point) accents the progress bar + my leaderboard row.
     `--rc` (rank colour) is set inline per tier in the template.
     ============================================================ */
  .mpage { max-width: 1080px; margin-inline: auto; }
  .mpage .badge, .gpanel-h .badge { white-space: nowrap; }
  .mhero { position: relative; overflow: hidden; }
  .mhero-emb { position: absolute; right: -26px; top: 50%; transform: translateY(-50%); opacity: 0.42; }
  .mhero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 42%, transparent 96%); }
  .mhero-body { position: relative; z-index: 1; padding: 28px 30px; display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
  .mhero-top { display: flex; align-items: center; gap: 18px; }
  .mhero-eyebrow { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .mhero-rank { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5xl); margin: 3px 0 4px; }
  .rmedal { position: relative; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--rc) 12%, var(--void-deep));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 55%, transparent), 0 0 30px color-mix(in srgb, var(--rc) 32%, transparent); }
  .rmedal-e { line-height: 1; }
  .rbadge { vertical-align: -0.16em; flex: none; }  /* rank emblem (_badge.html) inline with text */

  .mprog-h { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-base); margin-bottom: 9px; gap: 12px; }
  .mprog-bar { height: 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--void-deep) 62%, transparent); overflow: hidden; border: 1px solid var(--line); }
  .mprog-bar > span { display: block; height: 100%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, color-mix(in srgb, var(--point) 64%, transparent), var(--point)); box-shadow: 0 0 16px var(--point-glow); transition: width var(--dur-3) var(--ease); }
  .mprog-foot { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11.5px; }

  .mrank-track { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; position: relative; }
  .mrank-track::before { content: ''; position: absolute; left: 9%; right: 9%; top: 17px; height: 2px; background: var(--line); }
  .mrank-node { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; z-index: 1; flex: 1; text-align: center; }
  .mrank-e { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--panel-2); border: 2px solid var(--line); filter: grayscale(0.7); opacity: 0.55; transition: all var(--dur-2); }
  .mrank-node.reached .mrank-e { filter: none; opacity: 1; border-color: var(--line-strong); }
  .mrank-node.cur .mrank-e { transform: scale(1.16); box-shadow: 0 0 18px color-mix(in srgb, var(--point) 32%, transparent); }
  .mrank-n { font-size: var(--fs-xs); color: var(--faint); font-weight: 600; white-space: nowrap; }
  .mrank-node.reached .mrank-n { color: var(--muted); }
  .mrank-node.cur .mrank-n { color: var(--text); }

  .mstat { background: color-mix(in srgb, var(--void-deep) 30%, transparent); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
  .mstat-label { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .mstat-label svg { width: 15px; height: 15px; color: var(--accent); }
  .mstat-num { font-family: var(--font-display); font-weight: 600; font-size: 34px; margin-top: 10px; line-height: 1; }
  .mstat-num small { font-size: var(--fs-md); color: var(--faint); font-family: var(--font-mono); font-weight: 400; margin-left: 4px; }
  .mstat-sub { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
  .mstat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mch-ic { width: 32px; height: 32px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--accent); }

  .lb-mecard { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--divider);
    background: linear-gradient(90deg, var(--point-soft), transparent 80%); }
  .lb-mecard-rank { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5xl); color: var(--point); min-width: 52px; }
  .lb-tbl td { padding-top: 11px; padding-bottom: 11px; }
  .lb-rank { font-size: var(--fs-md); color: var(--muted); padding-left: 6px; }
  .lb-medal { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-base); }
  .lb-medal--1 { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-ink) 50%, transparent); }
  .lb-medal--2 { background: rgba(202,206,220,0.16); color: #cfd2dc; box-shadow: inset 0 0 0 1px rgba(202,206,220,0.4); }
  .lb-medal--3 { background: rgba(205,140,90,0.18); color: #d79b6a; box-shadow: inset 0 0 0 1px rgba(205,140,90,0.45); }
  .lb-me td { background: var(--point-soft) !important; }
  .lb-me td:first-child { box-shadow: inset 3px 0 0 var(--point); }
  /* O·3: 리더보드 Kleos(활동 점수) 열 — #37 지갑 coin·coral 톤 재사용 + 정렬 토글 */
  .lb-khead .lb-kseason { display: block; font-size: var(--fs-xs); color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }
  .lb-khead.on { color: var(--point); }
  .kchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: var(--r-pill); border: 1px solid var(--point-line); background: var(--point-soft); }
  .kchip svg { width: 15px; height: 15px; color: var(--point); flex: none; }
  .kchip .v { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); }
  .kchip.quiet { border-color: var(--line); background: transparent; opacity: 0.72; }
  .kchip.quiet svg { color: var(--muted); }
  .kchip.zero { border-style: dashed; border-color: var(--line); background: transparent; }
  .kchip.zero .v { color: var(--faint); }
  .quiet-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); color: var(--muted); border: 1px solid var(--line); margin-left: 7px; vertical-align: middle; }
  /* MMR 시즌 헤더/리더보드 전환 (B-2, 디자인 #28). 색은 전부 토큰/color-mix 파생 → 라이트 모드 자동 추종. */
  .season-h { display: flex; align-items: center; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: linear-gradient(100deg, var(--point-soft), transparent 70%); }
  .season-emb { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .season-emb svg { width: 22px; height: 22px; }
  .season-id { min-width: 0; }
  .season-id .row1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .season-id h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); }
  .season-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); padding: 2px 9px; border-radius: var(--r-pill); }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--point); box-shadow: 0 0 6px var(--point); }
  .season-dates { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
  .season-prog { flex: 1; min-width: 180px; }
  .season-prog .pmeta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 5px; }
  .season-prog .pmeta b { color: var(--text); }
  .pbar { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--void-deep) 55%, transparent); overflow: hidden; }
  .pbar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--point), color-mix(in srgb, var(--point) 60%, var(--accent))); }
  .season-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--void-deep); border: 1px solid var(--line-control); flex: none; }
  .season-switch a { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; transition: all var(--dur-1); }
  .season-switch a.on { background: var(--point); color: var(--point-ink); }
  .archived-note { display: flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 11.5px; color: var(--muted); background: color-mix(in srgb, var(--void-deep) 30%, transparent); border-bottom: 1px solid var(--line); }
  .archived-note svg { width: 13px; height: 13px; color: var(--faint); }
  /* 시즌 결산 카드 (B-2 PR2, 디자인 #28 ③). 티어/공유 행은 후속 — 순위·레이팅·전적·승률·보상 placeholder. */
  .recap { position: relative; border-radius: var(--r-lg); overflow: hidden; padding: 24px; text-align: center; border: 1.5px solid var(--point-line); background: radial-gradient(120% 90% at 50% -10%, var(--point-soft), var(--panel) 60%); box-shadow: var(--shadow-2); }
  .recap.gold { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--gold) 16%, transparent), var(--panel) 60%); }
  .recap-rays { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background: repeating-conic-gradient(from 0deg at 50% 0%, transparent 0deg 8deg, color-mix(in srgb, var(--point) 8%, transparent) 8deg 12deg); -webkit-mask: linear-gradient(180deg, #000, transparent 60%); mask: linear-gradient(180deg, #000, transparent 60%); }
  .recap.gold .recap-rays { background: repeating-conic-gradient(from 0deg at 50% 0%, transparent 0deg 8deg, color-mix(in srgb, var(--gold) 10%, transparent) 8deg 12deg); }
  .recap-in { position: relative; }
  .recap-season { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--point); }
  .recap.gold .recap-season { color: var(--gold-ink); }
  .recap-place { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 7vw, 52px); line-height: 1; margin-top: 8px; display: inline-flex; align-items: baseline; gap: 8px; }
  .recap-place .rank { color: var(--point); }
  .recap.gold .recap-place .rank { color: var(--gold-ink); }
  .recap-place .of { font-size: 0.4em; color: var(--muted); font-family: var(--font-ui); font-weight: 600; }
  .recap-stats { display: flex; justify-content: center; gap: 0; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  .recap-stats .rs { flex: 1; padding: 11px 8px; border-right: 1px solid var(--line); }
  .recap-stats .rs:last-child { border-right: none; }
  .recap-stats .rn { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); }
  .recap-stats .rl { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  .reward-ph { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 10px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); font-size: var(--fs-sm); color: var(--muted); }
  .reward-ph svg { width: 15px; height: 15px; color: var(--point); }
  .reward-ph .ph { font-family: var(--font-mono); font-size: 10px; color: var(--faint); border: 1px dashed var(--line); padding: 1px 6px; border-radius: 5px; }
  .recap-share { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 38px; padding: 0 18px; border-radius: var(--r-pill); background: var(--point); color: var(--point-ink); font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-base); text-decoration: none; transition: filter var(--dur-1), transform var(--dur-1); }
  .recap-share svg { width: 15px; height: 15px; }
  .recap-share:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .recap.gold .recap-share { background: var(--gold); color: #2a1d05; }
  /* match schedule (SP8 · #50) — 좌 캘린더(.dscal) / 우 선택 날짜 매치 상세 2-col */
  .msched-split { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 22px; align-items: start; }
  .msched-split .msched-cal { max-width: 100%; }
  /* 우측 상세 리스트는 캡+내부 스크롤(.notif-list/.mdt-body 패턴) — 무제한이면 매치 많은 날
     #schedule(마지막 섹션)이 뷰포트보다 길어져, 사이드바 '일정' 앵커 착지 시 하단이 폴드 밖으로
     잘려 보인다(뒤따르는 콘텐츠가 없어 스크롤 단서도 없음). 64vh 캡 ≙ 어떤 창 높이에서도
     착지 상태에 온전히 수납; 560px 상한 ≙ 캘린더 열과의 시각 균형(#50 2열 의도) 유지. */
  .day-detail { min-width: 0; display: flex; flex-direction: column;
    max-height: min(560px, 64vh); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--point) 50%, transparent) transparent; }
  /* 스크롤 단서(다크에서 캡 경계의 반토막 카드가 '검정으로 잘림'처럼 읽히는 것 방지):
     ① 위 thin 스크롤바(.ds-main 미러) ② 아래 sticky 페이드 — 더 있음을 패널색으로 fade-out.
     .has-more는 schedule-panel.js가 스크롤 위치로 토글(끝까지 내리면 제거). */
  .day-detail::after { content: ""; position: sticky; bottom: 0; flex: none; height: 0;
    margin-top: 0; background: linear-gradient(to bottom, transparent, var(--panel));
    pointer-events: none; transition: height var(--dur-1), margin-top var(--dur-1); }
  .day-detail.has-more::after { height: 34px; margin-top: -34px; }
  .dd-block { min-width: 0; }
  .dd-h { display: flex; align-items: baseline; gap: 10px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
  .dd-dt { font-size: var(--fs-lg); font-weight: 600; }
  .dd-cnt { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }
  .mitem { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--panel-2) 26%, transparent); text-decoration: none; color: var(--text);
    transition: border-color var(--dur-1), transform var(--dur-1) var(--ease); }
  .mitem + .mitem { margin-top: 10px; }
  .mitem:hover { border-color: var(--point-line); transform: translateY(-1px); }
  .mi-t { flex: none; text-align: center; min-width: 60px; }
  .mi-tm { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); }
  /* local date shown only when a match's viewer-local day ≠ its (UTC) group block (cross-tz) */
  .mi-td { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--warn); margin-top: 2px; }
  .mi-v { width: 1px; align-self: stretch; background: var(--line); flex: none; }
  .mi-c { min-width: 0; flex: 1; }
  .mi-nm { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mi-no { font-size: var(--fs-xs); color: var(--faint); }
  .mi-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
  .mi-ppl { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--muted); }
  .mi-ppl svg { width: 13px; height: 13px; color: var(--faint); }
  .mi-go { flex: none; color: var(--faint); display: grid; place-items: center; }
  .mi-go svg { width: 16px; height: 16px; }
  .mitem:hover .mi-go { color: var(--point); }
  .dd-empty-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 34px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); }
  .dd-empty-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--faint);
    background: color-mix(in srgb, var(--panel-2) 50%, transparent); border: 1px solid var(--line); margin-bottom: 12px; }
  .dd-empty-ic svg { width: 22px; height: 22px; }
  .dd-empty-t { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
  .dd-empty-h { font-size: var(--fs-sm); margin-top: 4px; }
  .dd-empty .btn { margin-top: 14px; }
  @media (max-width: 760px) { .msched-split { grid-template-columns: 1fr; } }
  /* MMR-trend chart (design #8 — Kletoi 멤버.html .mmr*/.mmrc*). Inline SVG geometry
     is server-computed (web/charts.py); mmrchart.js adds only the hover tooltip. */
  .mdelta { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; }
  .mdelta.up { color: var(--point); } .mdelta.down { color: var(--danger); } .mdelta.flat { color: var(--faint); }
  .mmr-summary { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px; margin-bottom: 18px; }
  .mmr-cur { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; background: color-mix(in srgb, var(--point) 7%, transparent); }
  .mmr-cur-lb { font-size: var(--fs-sm); color: var(--muted); }
  .mmr-cur-row { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 12px; }
  .mmr-cur-n { font-family: var(--font-display); font-weight: 600; font-size: 42px; line-height: 1; color: var(--point); }
  .mmr-form-row { display: flex; align-items: center; gap: 10px; }
  .mform { display: inline-flex; gap: 4px; }
  .mform-d { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
  .mform-d.win { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
  .mform-d.loss { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
  .mmr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .mmr-kpi { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  .mmr-kpi-lb { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); }
  .mmr-kpi-lb svg { width: 14px; height: 14px; color: var(--accent); }
  .mmr-kpi-n { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4xl); margin-top: 8px; }
  .mmr-kpi-n small { font-size: var(--fs-md); color: var(--faint); }
  .mmr-kpi-s { font-size: var(--fs-xs); margin-top: 2px; }
  @media (max-width: 720px) { .mmr-summary { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { .mmr-kpis { grid-template-columns: 1fr; } }
  .mmrc { position: relative; }
  .mmrc-svg { width: 100%; height: auto; display: block; overflow: visible; }
  .mmrc-grid { stroke: var(--line); stroke-width: 1; }
  .mmrc-ylb { fill: var(--faint); font-family: var(--font-mono); font-size: 10px; }
  .mmrc-xlb { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
  .mmrc-band { fill: color-mix(in srgb, var(--point) 12%, transparent); stroke: none; }
  .mmrc-line { fill: none; stroke: var(--point); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .mmrc-line.ghost { stroke: var(--line-strong); stroke-dasharray: 5 6; }
  /* GX·3 헬스 주간 시계열 — 공유 .mmrc 어휘의 시리즈 색 변형(신규/이탈·활성 점) */
  .mmrc-line.hl-ok { stroke: var(--ok); }
  .mmrc-line.hl-danger { stroke: var(--danger); }
  .mmrc-dot.hl-point { fill: var(--point); }
  .mmrc-guide { stroke: var(--point-line); stroke-width: 1; stroke-dasharray: 3 4; }
  .mmrc-hit { fill: transparent; cursor: pointer; }
  .mmrc-dot { stroke: var(--void); stroke-width: 2; transition: r var(--dur-1); }
  .mmrc-dot.win { fill: var(--ok); } .mmrc-dot.loss { fill: var(--danger); }
  .mmrc-dot.on { stroke: var(--point); stroke-width: 2.5; }
  .mmrc-ring { fill: none; stroke-width: 2; }
  .mmrc-ring.peak { stroke: var(--gold); }
  .mmrc-ring.cur { stroke: var(--point); }
  .mmrc-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); z-index: var(--z-tooltip); pointer-events: none;
    background: var(--panel-2); border: 1px solid var(--point-line); border-radius: var(--r-sm); padding: 8px 11px; min-width: 96px; box-shadow: var(--shadow-2); }
  .mmrc-tip[hidden] { display: none; }
  .mmrc-tip-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mmrc-tip-h .mono { font-size: var(--fs-xs); color: var(--muted); }
  .mmrc-tip-r { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-top: 4px; }
  .mmrc-tip-d { font-size: var(--fs-xs); margin-top: 1px; color: var(--muted); }
  .mmrc-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
  .mmrc-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .mmrc-legend i { display: inline-block; flex: none; }
  .lg-line { width: 16px; height: 2.4px; border-radius: 2px; background: var(--point); }
  .lg-band { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--point) 18%, transparent); }
  .lg-dot { width: 10px; height: 10px; border-radius: 50%; }
  .lg-dot.win { background: var(--ok); } .lg-dot.loss { background: var(--danger); }
  .lg-ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid; }
  .lg-ring.peak { border-color: var(--gold); } .lg-ring.cur { border-color: var(--point); }
  /* MMR 차트 시즌 경계 마커 (B-2 PR2, 디자인 #28 ④) */
  .season-line { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.7; }
  .season-lab { fill: var(--accent); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; }
  .lg-season { width: 14px; border-top: 1.4px dashed var(--accent); height: 1px; }
  .mmr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
  .mmr-empty-ic { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--point-soft); color: var(--point); margin-bottom: 12px; }
  .mmr-empty-ic svg { width: 26px; height: 26px; }
  .mmr-empty-t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); }
  .mmr-empty-h { font-size: var(--fs-base); color: var(--muted); max-width: 360px; line-height: 1.5; margin-top: 6px; }
  .mmr-empty-ph { width: 100%; margin-top: 18px; opacity: 0.5; }
  .lb-gap td { padding: 7px 16px; }
  .lb-gap-line { display: flex; align-items: center; justify-content: center; }
  .lb-gap-line span { color: var(--faint); font-size: var(--fs-xs); }

  .mplan { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--rc) 9%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 28%, transparent); overflow: hidden; }
  .mplan-medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-lg); flex: none;
    background: color-mix(in srgb, var(--rc) 16%, var(--void-deep)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 50%, transparent); }
  .mplan-t { font-size: var(--fs-base); font-weight: 600; color: var(--rc); white-space: nowrap; }
  .mplan-s { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
  .mplan .bwrap { transition: opacity var(--dur-2); }
  .ds[data-collapsed="true"] .mplan { justify-content: center; padding: 11px 0; width: 44px; margin: 0 auto; }
  .ds[data-collapsed="true"] .mplan .bwrap { display: none; }

  @media (max-width: 1320px) { .mstat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 1000px) { .mstat-grid { grid-template-columns: 1fr; } }

  /* Riot 계정 연결 (Kletoi 멤버.html 핸드오프 #14) — 미연결 폼 · 연결됨 · 인라인 flash */
  .riot-flash { display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 16px; }
  .riot-flash .ic { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; }
  .riot-flash .ic svg { width: 16px; height: 16px; }
  .riot-flash .t { font-size: 13.5px; font-weight: 600; }
  .riot-flash .s { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
  .riot-flash.danger { border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); }
  .riot-flash.danger .ic { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
  .riot-flash.danger .t { color: var(--danger); }
  .riot-flash.warn { border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
  .riot-flash.warn .ic { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
  .riot-flash.warn .t { color: var(--warn); }
  .riot-intro { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
  .riot-inputs { display: flex; align-items: flex-end; gap: 10px; }
  .riot-inputs .input.bad { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
  .riot-hash { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--faint); padding-bottom: 9px; }
  .riot-gn { flex: 1.6; min-width: 0; }
  .riot-tg { flex: 1; min-width: 0; }
  .riot-submit { flex: none; }
  .riot-hint { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
  @media (max-width: 560px) {
    .riot-inputs { flex-wrap: wrap; }
    .riot-hash { display: none; }
    .riot-gn, .riot-tg { flex: 1 1 100%; }
    .riot-submit { width: 100%; }
  }
  .riot-linked { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); flex-wrap: wrap; }
  .riot-emblem { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .riot-emblem svg { width: 23px; height: 23px; }
  .riot-emblem-img { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); object-fit: cover; display: block; background: var(--point-soft); }
  .riot-linked-main { min-width: 0; }
  .riot-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
  .riot-id { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .riot-id .tag { color: var(--faint); font-family: var(--font-mono); font-weight: 400; }
  .riot-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

  /* guild switcher dropdown (member shell) — native <details>, no JS/inline handler (CSP-safe) */
  details.gsrv { position: relative; }
  details.gsrv > summary { list-style: none; }
  details.gsrv > summary::-webkit-details-marker { display: none; }
  .gsrv-chev { width: 15px; height: 15px; color: var(--faint); transition: transform var(--dur-2) var(--ease); flex: none; }
  details.gsrv[open] .gsrv-chev { transform: rotate(180deg); }
  .gsrv-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; z-index: var(--z-dropdown);
    background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-md);
    box-shadow: var(--shadow-2); padding: 6px; }
  /* smooth open (reuse the dropdown entrance) + open-state ring on the trigger */
  details.gsrv[open] .gsrv-menu, details.gusr[open] .gusr-menu { animation: dd-in var(--dur-2) var(--ease-out); }
  details.gsrv[open] > summary.gsrv-trigger,
  details.gusr[open] > summary.userchip { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft), var(--shadow-2); }
  .gsrv-menu-h { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 6px; }
  .gsrv-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-1); text-decoration: none; color: inherit; }
  .gsrv-opt:hover { background: color-mix(in srgb, var(--point) 12%, transparent); box-shadow: inset 0 0 0 1px var(--point-line); }
  .gsrv-opt:active { transform: translateY(0.5px); }
  .gsrv-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .gsrv-opt.sel { background: var(--point-soft); }
  .gsrv-opt-nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* userchip → logout dropdown (native <details>, reuses .gsrv-menu/.gsrv-opt). */
  details.gusr { position: relative; }
  details.gusr > summary { list-style: none; cursor: pointer; }
  details.gusr > summary::-webkit-details-marker { display: none; }
  details.gusr[open] .gsrv-chev { transform: rotate(180deg); }
  .gusr-menu { width: 210px; }
  .gusr-menu form { margin: 0; }
  .gusr-menu .gsrv-opt { width: 100%; border: none; background: none; font: inherit; cursor: pointer; }
  .mpage > section[id] { scroll-margin-top: 84px; }

  /* 매치메이커 관리 (Kletoi 길드 관리.html 핸드오프 #15) — 권한 안내 · 지정 폼 · 목록 */
  .mm-info { display: flex; gap: 13px; padding: 15px 17px; border-radius: var(--r-lg); border: 1px solid var(--point-line); background: var(--point-soft); }
  .mm-info-ic { width: 38px; height: 38px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--point) 18%, transparent); color: var(--point); }
  .mm-info-ic svg { width: 20px; height: 20px; }
  .mm-info-t { font-size: 13.5px; font-weight: 600; }
  .mm-info-s { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.55; }
  .mm-flash { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 600; }
  .mm-flash svg { width: 15px; height: 15px; flex: none; }
  .mm-flash.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); }
  .mm-flash.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); }
  .mm-grant { display: flex; align-items: center; gap: 12px; }
  .mm-grant > .select, .mm-grant > .dsel { flex: 1; min-width: 0; }
  @media (max-width: 560px) { .mm-grant { flex-wrap: wrap; } .mm-grant > .select, .mm-grant > .dsel { flex: 1 1 100%; } .mm-grant > .btn { width: 100%; } }
  .mm-list { display: flex; flex-direction: column; }
  .mm-row { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
  .mm-row:last-child { border-bottom: none; }
  .mm-main { flex: 1; min-width: 0; }
  .mm-nm { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mm-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }

  /* ============================================================
     #60 역할 현황 카드 (§S·1 — "Kletoi 역할 현황 4카드.html") — 관리모드 정체성:
     manual(사람 지정=point) / auto(봇 자동=ok) / linked(설정 연동=accent). 헤더 아이콘+모드
     배지가 같은 톤을 공유 → "내가 만지는 카드인가"를 즉시 답. 토큰만(색 가드 통과).
     ============================================================ */
  .role-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .role-grid .span-all { grid-column: 1 / -1; }
  @media (max-width: 960px) { .role-grid { grid-template-columns: 1fr; } }
  .rcard { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 82%, transparent); overflow: hidden; display: flex; flex-direction: column; }
  .rcard-h { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .rcard-h .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
  .rcard-h .ic svg { width: 17px; height: 17px; }
  .rcard-h h3 { font-size: 15px; font-weight: 600; }
  .rcard-h .rsub { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; }
  .rmode { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); flex: none; }
  .rmode svg { width: 11px; height: 11px; }
  .rcard[data-mode-k="manual"] .ic, .rcard[data-mode-k="manual"] .rmode { color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); }
  .rcard[data-mode-k="auto"] .ic, .rcard[data-mode-k="auto"] .rmode { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
  .rcard[data-mode-k="linked"] .ic, .rcard[data-mode-k="linked"] .rmode { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
  .rcard-b { padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
  .rcard-f { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 24%, transparent); }
  .rcard-f .rhint { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-left: auto; }
  /* @역할 칩 — 티어색(--rc) 파생. 미설정=점선. label에 @는 ::before가 붙이므로 이름만 넣는다. */
  .role-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: var(--r-pill); color: var(--rc, var(--accent)); background: color-mix(in srgb, var(--rc, var(--accent)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc, var(--accent)) 38%, transparent); white-space: nowrap; }
  .role-chip::before { content: '@'; opacity: .65; font-family: var(--font-mono); }
  .role-chip.unset { color: var(--faint); border-style: dashed; background: transparent; }
  .role-chip.unset::before { content: ''; }
  /* 매핑 행: 라벨(+티어 점) → @역할 */
  .map-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
  .map-row .mlbl { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
  .map-row .gd { width: 8px; height: 8px; border-radius: 50%; background: var(--gc, var(--faint)); flex: none; }
  .map-row .marr { color: var(--faint); font-family: var(--font-mono); font-size: 11px; flex: none; }

  /* ============================================================
     Kleos 지갑 (G8-5, 의뢰 #37) — 멤버 지갑(coral) + 관리자 순위(cyan).
     색은 전부 토큰/color-mix 파생(하드코딩 hex 없음). "등급=평생 적립 ≠ Kleos=소비 잔액"이 핵심.
     ============================================================ */
  .wallet-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; padding: 16px 20px; }
  @media (max-width: 1000px) { .wallet-hero { grid-template-columns: 1fr; } }

  .kleos-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--point-soft), color-mix(in srgb, var(--point-soft) 25%, transparent));
    border: 1.5px solid var(--point-line); }
  .kc-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
  .kc-bal { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
  .kc-bal .v { font-family: var(--font-mono); font-weight: 700; font-size: 52px; color: var(--point); }
  .kc-bal .u { font-size: var(--fs-md); font-weight: 600; color: var(--point); opacity: .82; }
  .kc-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
  .kc-pill { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--point) 12%, transparent); color: var(--point); white-space: nowrap; }

  .distinct { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel-2); }
  .dist-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 480px) { .dist-row { grid-template-columns: 1fr; } }
  .di { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); }
  .di svg { width: 24px; height: 24px; flex-shrink: 0; }
  .di.rank { border-color: color-mix(in srgb, var(--di) 45%, transparent); color: var(--di); }
  .di.coin { border-color: var(--point-line); color: var(--point); }
  .di .dt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .di .dt b { font-size: var(--fs-md); color: var(--text); font-weight: 700; }
  .tag { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .tag.life { color: var(--di); }
  .tag.spend { color: var(--point); }
  .dist-desc { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
  .dist-desc svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

  /* 획득/손실 원장 — 6종 .lic ↔ currency.REASON_* (멤버 지갑 .ledger) */
  .ledger { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
  .lrow { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line); }
  .lrow:last-child { border-bottom: none; }
  .lic { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .lic.earn { background: var(--ok); }
  .lic.bonus { background: var(--point); }
  .lic.pen { background: var(--danger); }
  .lic.decay { background: var(--warn); }
  .lic.spend { background: var(--accent); }
  .lic.adj { background: var(--muted); }
  .lt { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 500; }
  .ls { font-size: var(--fs-xs); white-space: nowrap; }
  .ld { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); min-width: 56px; text-align: right; }
  .ld.pos { color: var(--ok); }
  .ld.neg { color: var(--danger); }

  /* ============================================================
     내전 매치 (matches) — design #4 handoff (Kletoi 길드 관리.html .m*)
     ============================================================ */
  @keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .badge--future { color: var(--faint); background: color-mix(in srgb, var(--muted) 10%, transparent); border: 1px dashed var(--line-strong); }
  .badge--big { font-size: var(--fs-md); padding: 7px 14px; border-radius: var(--r-pill); }
  .badge--big svg { width: 15px; height: 15px; }

  /* 내전 섹션 엠블럼 (Apex Crest — 매치 페이지 한정. 기본 대표 로고는 시길) */
  .mcrest-hero { display: flex; align-items: center; gap: 16px; padding: 2px 2px 4px; }
  .mcrest-hero .emblem { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 0 16px var(--point-glow)); }
  .mcrest-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); letter-spacing: 0.04em; margin: 0; }
  .mcrest-sub { color: var(--muted); font-size: var(--fs-base); margin: 3px 0 0; }
  .mcrest-sm { display: inline-flex; flex: none; }
  .mcrest-sm .emblem { width: 30px; height: 30px; }

  /* 목록 */
  .mlist { display: flex; flex-direction: column; }
  .mrow { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 0; border: none; border-bottom: 1px solid var(--line);
    background: transparent; cursor: pointer; text-align: left; font-family: var(--font-ui); color: var(--text); position: relative; transition: background var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-1); width: 100%; text-decoration: none; }
  .mrow:last-child { border-bottom: none; }
  .mrow:hover { background: color-mix(in srgb, var(--point) 5%, transparent); }
  .mrow:active { transform: translateY(0.5px); }
  .mrow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--point-line); }
  .mrow-stripe { width: 4px; align-self: stretch; border-radius: 0 4px 4px 0; background: var(--sc); flex: none; }
  .mrow-id { min-width: 0; flex: 1; }
  .mrow-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; flex-wrap: wrap; }
  .mrow-when { display: flex; align-items: center; gap: 7px; font-size: var(--fs-base); }
  .mrow-acc { font-size: 12.5px; }
  .mrow-go { width: 18px; height: 18px; color: var(--faint); transition: transform var(--dur-1), color var(--dur-1); }
  .mrow:hover .mrow-go { color: var(--point); transform: translateX(3px); }
  /* 목록 행 — 두 팀 아바타 요약 (핸드오프 .mrow-teams) */
  .mrow-teams { display: flex; align-items: center; gap: 8px; }
  .mrow-side { display: flex; }
  .mrow-side .mrow-av { margin-left: -6px; }
  .mrow-side .mrow-av:first-child { margin-left: 0; }
  .mrow-av { border-radius: 50%; box-shadow: 0 0 0 2px var(--void); }
  .mrow-vs { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
  /* §26 모바일 — 팀 아바타만 숨김·이름/메타(상태·시각) 우선 (메타가 이름 아래 줄로 이동해 자리 확보) */
  @media (max-width: 720px) { .mrow-acc, .mrow-teams { display: none; } }

  /* §26 매치 이름 표시 폴리시 — 이름 = 주 라벨, #seq = 보조 mono 칩(포인트색).
     이름 없으면 .noname으로 #seq를 주 라벨로 승격(칩 해제·크게) + 폴백 텍스트. */
  .mname { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }
  /* .tip 래퍼가 사이 끼면 말줄임 체인이 끊긴다 — 목록(블록 부모)·헤더(플렉스 아이템) 둘 다 봉합 */
  .mrow-id > .tip, .mhead-id > .tip { min-width: 0; max-width: 100%; }
  .mseq { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--point); background: var(--point-soft);
    border: 1px solid var(--point-line); border-radius: 6px; padding: 2px 7px; flex: none; line-height: 1.3; }
  .mtitle { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mname.noname .mseq { font-size: var(--fs-lg); color: var(--text); background: transparent; border: none; padding: 0; }
  .mname.noname .mtitle-fallback { color: var(--faint); font-weight: 400; font-size: var(--fs-sm); white-space: nowrap; }
  /* 상세 헤더 변형 — 이름 Cinzel 승격(#seq 칩은 그대로), noname이면 #seq가 display체로 */
  .mhead-id .mname { gap: 11px; }
  .mhead-id .mtitle { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: 1.2; }
  .mhead-id .mname.noname .mseq { font-family: var(--font-display); font-size: var(--fs-5xl); }
  /* 생성 폼 — #seq 선행 고정 칩 + 글자수 카운터 + 라이브 미리보기 */
  .input-wrap { position: relative; }
  .input-wrap > .mseq { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
  .input-wrap > .input { padding-left: 62px; padding-right: 62px; }
  .input-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); pointer-events: none; }
  .mn-hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
  .mname-preview { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .mname-preview .pl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

  /* 내전 매치 생성 — 5v5 팀 빌더 (match.js IIFE(1)). 핸드오프 'Kletoi 길드 관리.html' CSS 정본 이식 */
  .mbuild-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
  .mbuild-vs { display: flex; align-items: center; justify-content: center; align-self: center; }
  .mbuild-vs span { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--faint); writing-mode: vertical-rl; letter-spacing: 0.1em; padding: 12px 0; }
  .mbuild { border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--void) 50%, transparent); overflow: visible; display: flex; flex-direction: column; }
  .mbuild--a { border-top: 3px solid var(--point); }
  .mbuild--b { border-top: 3px solid var(--accent); }
  .mbuild-h { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
  .mbuild-badge { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }
  .mbuild--a .mbuild-badge { color: var(--point); }
  .mbuild--b .mbuild-badge { color: var(--accent); }
  .mbuild-count { font-family: var(--font-mono); font-size: var(--fs-base); padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); }
  .mbuild-count.full { border-color: var(--point-line); background: var(--point-soft); }
  .mbuild-count.full b { color: var(--point); }
  .mbuild-list { display: flex; flex-direction: column; padding: 8px; gap: 6px; }
  .mbuild-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 35%, transparent); }
  .mbuild-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbuild-empty { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--r-md); border: 1px dashed var(--line); color: var(--faint); font-size: 12.5px; }
  .mbuild-slot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--line-strong); font-family: var(--font-mono); font-size: var(--fs-xs); flex: none; }
  .mbuild-add { padding: 0 12px 14px; }
  @media (max-width: 860px) { .mbuild-grid { grid-template-columns: 1fr; } .mbuild-vs span { writing-mode: horizontal-tb; padding: 4px 16px; } }
  /* Y·1 음성↔매치 브릿지 — voice-seeded 배너·인원수 스트립·시드 표식 (토큰만, 새 색 0) */
  .vbanner { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--point-line); background: var(--point-soft); }
  .vbanner-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--point); background: color-mix(in srgb, var(--point) 18%, transparent); }
  .vbanner-ic svg { width: 18px; height: 18px; }
  .vbanner-tx { flex: 1; min-width: 0; font-size: 13.5px; }
  .vbanner-tx small { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 11px; margin-top: 2px; }
  .vbanner-x { flex: none; }
  .hstrip { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 11px 16px; border-radius: var(--r-md); border: 1px solid var(--line); font-size: 13px; }
  .hstrip-count { font-family: var(--font-mono); font-weight: 700; font-size: 15px; flex: none; }
  .hstrip-count .muted { font-size: 12px; }
  .hstrip-tx { color: var(--muted); }
  .hstrip.ok { background: color-mix(in srgb, var(--ok) 9%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
  .hstrip.ok .hstrip-count { color: var(--ok); }
  .hstrip.short { background: color-mix(in srgb, var(--warn) 9%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
  .hstrip.short .hstrip-count { color: var(--warn); }
  .hstrip.over { background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
  .hstrip.over .hstrip-count { color: var(--accent); }
  .mbuild-row.vseed { box-shadow: inset 2px 0 0 var(--point); }
  .mbuild-fallback { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-sm); color: var(--faint); line-height: 1.5; }
  .mbuild-fallback svg { width: 14px; height: 14px; flex: none; color: var(--point); }
  .mbuild-fallback .mono { color: var(--muted); }
  /* 라인 드롭다운 (.lanedd) — 같은 팀에서 쓰인 라인은 .taken 비활성 */
  .lanedd { position: relative; flex: none; }
  .lanedd-trig { display: inline-flex; align-items: center; gap: 6px; min-width: 92px; height: 34px; padding: 0 9px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void-deep) 45%, transparent); color: var(--accent); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--dur-1); }
  .lanedd-cur { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .lanedd-trig.empty { color: var(--faint); }
  .lanedd-trig:hover { border-color: var(--point-line); }
  .lanedd.open .lanedd-trig { border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .lanedd-trig:active { transform: translateY(0.5px) scale(0.98); }
  .lanedd-trig:focus-visible { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .lanedd-nm { white-space: nowrap; }
  .lanedd-chev { margin-left: auto; width: 13px; height: 13px; color: var(--faint); transition: transform var(--dur-2); }
  .lanedd.open .lanedd-chev { transform: rotate(180deg); color: var(--point); }
  .lanedd-menu { position: absolute; top: calc(100% + 6px); z-index: var(--z-overlay); min-width: 150px; padding: 5px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); animation: dd-in var(--dur-2) var(--ease-out); }
  .lanedd-menu.lane-b { right: 0; }
  .lanedd-menu.lane-a { left: 0; }
  .lanedd-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-1), transform var(--dur-1) var(--ease); }
  .lanedd-opt:hover:not(:disabled) { background: var(--point-soft); box-shadow: inset 0 0 0 1px var(--point-line); }
  .lanedd-opt:active:not(:disabled) { transform: translateY(0.5px); }
  .lanedd-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .lanedd-opt.on { background: color-mix(in srgb, var(--point) 10%, transparent); }
  .lanedd-opt.taken { opacity: 0.4; cursor: not-allowed; }
  .lanedd-opt svg { color: var(--accent); flex: none; }
  .lanedd-taken { margin-left: auto; font-size: 10px; color: var(--faint); font-family: var(--font-mono); }
  /* 멤버 추가 드롭다운 (.memadd) — 아바타 + 검색 */
  .memadd { position: relative; }
  .memadd-trig { display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: center; height: 38px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: transparent; color: var(--point); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: all var(--dur-1); }
  .memadd-trig:hover { border-color: var(--point); background: var(--point-soft); }
  .memadd.open .memadd-trig { border-style: solid; border-color: var(--point); }
  .memadd-trig:active { transform: translateY(0.5px) scale(0.99); }
  .memadd-trig:focus-visible { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .memadd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-overlay); padding: 4px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); animation: dd-in var(--dur-2) var(--ease-out); }
  .memadd-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
  .memadd-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 13.5px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-1), transform var(--dur-1) var(--ease); text-align: left; }
  .memadd-opt:hover { background: var(--point-soft); box-shadow: inset 0 0 0 1px var(--point-line); }
  .memadd-opt:active { transform: translateY(0.5px); }
  .memadd-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .memadd-nm { flex: 1; font-weight: 500; }
  /* 일정 진입점 (.msched-entry → 통합 .dscal 캘린더 팝오버 토글) */
  .msched-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void-deep) 40%, transparent); cursor: pointer; transition: all var(--dur-1); text-align: left; }
  .msched-entry:hover { border-color: var(--point-line); }
  .msched-ic { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .msched-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .msched-lb { font-size: var(--fs-xs); color: var(--faint); letter-spacing: 0.04em; }
  .msched-val { font-size: 13.5px; font-weight: 600; }
  .msched-val.empty { color: var(--muted); font-weight: 400; }
  /* 저장바 검증 상태 (match.js가 .ok/.warn 토글) */
  .mbuild-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
  .mbuild-status .bs-ic { display: inline-flex; }
  .mbuild-status .bs-ic svg { width: 16px; height: 16px; }
  .mbuild-status.ok { color: var(--ok); }
  .mbuild-status.ok .bs-ok svg { color: var(--ok); }
  .mbuild-status.warn .bs-msg { color: var(--muted); }
  .mbuild-status.warn .bs-info svg { color: var(--warn); }

  /* 플레이어 hover 카드 (§32, M·7) — 빌더 칩(.mbuild-row / .memadd-opt) hover·focus 시
     팝오버. match.js가 풀의 .pc를 칩에 클론 + position:fixed 배치(가장자리 flip·세로
     클램프) → 칼럼 스크롤에 안 잘림. 핸드오프 'Kletoi 플레이어 hover 카드.html' 이식. */
  .pc { position: fixed; z-index: var(--z-tooltip); width: 266px; pointer-events: none; background: var(--panel-2);
    border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2);
    color: var(--text); overflow: hidden; opacity: 0; visibility: hidden; }
  .pc.is-open { opacity: 1; visibility: visible; }
  .pc::after { content: ''; position: absolute; width: 9px; height: 9px; background: var(--panel-2);
    border: 1px solid var(--line-strong); border-right: none; border-bottom: none; }
  .pc[data-side="right"]::after { left: -5px; top: var(--ay, 50%); transform: translateY(-50%) rotate(-45deg); }
  .pc[data-side="left"]::after { right: -5px; left: auto; top: var(--ay, 50%); transform: translateY(-50%) rotate(135deg); }
  /* header — 아바타·이름·접속 */
  .pc-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px 12px; border-bottom: 1px solid var(--line); }
  .pc-head .ava { width: 38px; height: 38px; border-radius: 11px; flex: none; }
  .pc-id { min-width: 0; }
  .pc-name { font-size: 14.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-pres { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
  .pc-pres .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .pc-pres .d.online { background: var(--ok); }
  .pc-pres .d.idle { background: var(--warn); }
  .pc-pres .d.offline { background: var(--faint); }
  /* Riot 계정 — 위계 1순위(연동 게이팅 신호) */
  .pc-riot { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
  .pc-ricon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; overflow: hidden; color: #fff;
    background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 70%, #000), color-mix(in srgb, var(--accent) 50%, var(--panel))); }
  .pc-ricon svg { width: 16px; height: 16px; }
  .pc-ricon-img { width: 100%; height: 100%; object-fit: cover; display: block; }  /* 실제 소환사 아이콘이 30² 라운드 박스를 채움 */
  .pc-rinfo { min-width: 0; flex: 1; }
  .pc-rgame { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-rgame em { color: var(--muted); font-style: normal; font-weight: 400; }
  .pc-rsub { font-size: 10.5px; color: var(--faint); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
  .pc-rok { color: var(--point); flex: none; display: grid; place-items: center; }
  .pc-rok svg { width: 15px; height: 15px; }
  .pc-riot.unlinked { background: color-mix(in srgb, var(--warn) 9%, transparent); }
  .pc-riot.unlinked .pc-ricon { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
  .pc-riot.unlinked .pc-rgame { color: var(--warn); font-family: var(--font-ui); }
  .pc-riot.unlinked .pc-rsub { color: color-mix(in srgb, var(--warn) 80%, var(--muted)); }
  .pc-riot.unlinked .pc-ricon svg { width: 16px; height: 16px; }
  /* MMR · 전적 (2-col) */
  .pc-body { display: grid; grid-template-columns: 1fr 1fr; }
  .pc-stat { padding: 11px 14px; min-width: 0; }
  .pc-stat + .pc-stat { border-left: 1px solid var(--line); }
  .pc-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); display: block; }
  .pc-mmr { display: block; font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; margin-top: 5px; }
  .pc-mmr em { font-size: var(--fs-xs); color: var(--muted); font-style: normal; margin-left: 2px; }
  .pc-mmr.prov { font-size: var(--fs-md); color: var(--muted); }
  .pc-meter { display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--void-deep) 70%, transparent); margin: 7px 0 5px; overflow: hidden; border: 1px solid var(--line); }
  .pc-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--point) 55%, var(--primary)), var(--point)); }
  .pc-cap { display: block; font-size: 10px; color: var(--muted); }
  .pc-rec { display: block; font-size: var(--fs-md); font-weight: 600; margin-top: 5px; }
  .pc-rec b { font-family: var(--font-mono); font-weight: 700; }
  .pc-rec .w { color: var(--ok); }
  .pc-rec .l { color: var(--muted); }
  .pc-rec.none { color: var(--faint); font-size: 12.5px; font-weight: 500; }
  .pc-wr { display: block; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
  .pc-wr b { color: var(--text); font-family: var(--font-mono); }
  /* Kletoi 등급 배지 — 색은 인라인 --gc(badges.TIERS hex 정본) */
  .pc-grade { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void) 30%, transparent); }
  .gbadge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--gc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 42%, transparent); }
  .gb-medal { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); flex: none;
    background: color-mix(in srgb, var(--gc) 26%, var(--void-deep)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 50%, transparent) inset; }
  .gb-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--text); }
  .gb-since { font-size: 10.5px; color: var(--muted); margin-left: auto; text-align: right; line-height: 1.3; }
  /* 등장만 미세 이동(실브라우저), 퇴장 즉시 — reduce-motion이면 페이드만(#18) */
  @media (prefers-reduced-motion: no-preference) {
    .pc { transform: translateY(4px); transition: transform var(--dur-2) var(--ease-out); }
    .pc.is-open { transform: translateY(0); }
  }

  /* 캘린더 — 매치 일정 date+time 피커. 팝오버 셸만 .mcal-*; 내부 달력은 통합
     .dscal 컴포넌트(calendar.js, data-cal-target 피커 모드)가 렌더. */
  .mcal { position: relative; }
  .mcal-input { display: flex; gap: 8px; }
  .mcal-input .input { flex: 1; }
  .mcal-btn { width: 44px; flex: none; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void) 50%, transparent);
    color: var(--accent); cursor: pointer; display: grid; place-items: center; transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-1); }
  .mcal-btn svg { width: 17px; height: 17px; }
  .mcal-btn:hover { border-color: var(--point-line); color: var(--point); background: var(--point-soft); }
  .mcal-btn:active { transform: scale(0.95); }
  .mcal-btn:focus-visible { outline: none; border-color: var(--point-line); box-shadow: 0 0 0 3px var(--point-soft); }
  /* 팝오버 = 위치 셸; 카드(2px 테두리·헤더 스트립·그림자)는 안의 .dscal이 제공.
     기본은 아래로; 아래 공간 부족 시 match.js가 .up을 달아 위로 펼친다(달력이 큼). */
  .mcal-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-dropdown); animation: dd-in var(--dur-2) var(--ease-out); }
  .mcal-pop.up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom; }
  /* opaque card for the popover — the design's .dscal is translucent (fine inline,
     but as a popover over form content it must obscure what's behind it) */
  .mcal-pop .dscal { background: var(--void); }
  .mcal-pop[hidden] { display: none; }

  /* 밸런스 저울 */
  .mbal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
  .mbal-side { display: flex; flex-direction: column; gap: 7px; }
  .mbal-team { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; }
  .mbal-team.t1 { color: var(--point); }
  .mbal-team.t2 { color: var(--accent); }
  .mbal-avg { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5xl); line-height: 1; }
  .mbal-center { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 110px; }
  .mbal-scale { width: 80px; height: 56px; }
  .mbal-beam { transform: rotate(var(--tilt, 0deg)); transform-origin: 40px 18px; transition: transform var(--dur-3) var(--ease); }
  .mbal-delta { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 14px; border-radius: var(--r-pill); }
  .mbal-delta.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
  .mbal-delta.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
  .mbal-delta .mono { font-size: 16px; font-weight: 700; }
  .mbal-delta-lb { font-size: 10.5px; }
  @media (max-width: 560px) { .mbal { grid-template-columns: 1fr; gap: 14px; } .mbal-center { order: -1; } }

  /* 로스터 2팀 */
  .mroster { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
  .mroster-vs { display: flex; align-items: center; justify-content: center; }
  .mroster-vs span { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--faint); writing-mode: vertical-rl; letter-spacing: 0.1em;
    padding: 14px 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .mteam { border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--void) 50%, transparent); overflow: hidden; }
  .mteam--a { border-top: 3px solid var(--point); }
  .mteam--b { border-top: 3px solid var(--accent); }
  .mteam-h { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
  .mteam-badge { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }
  .mteam--a .mteam-badge { color: var(--point); }
  .mteam--b .mteam-badge { color: var(--accent); }
  .mteam-avg { font-size: var(--fs-lg); font-weight: 700; }
  .mteam-list { display: flex; flex-direction: column; }
  .mplayer { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
  .mplayer:last-child { border-bottom: none; }
  .mplayer-main { flex: 1; min-width: 0; }
  .mplayer-nm { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
  .mplayer-rt { font-size: var(--fs-md); font-weight: 700; color: var(--text); min-width: 42px; text-align: right; }
  @media (max-width: 860px) {
    .mroster { grid-template-columns: 1fr; }
    .mroster-vs span { writing-mode: horizontal-tb; padding: 6px 18px; border: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  }

  /* 헤더 + 스텝퍼 */
  .mhead { padding: 20px 22px; }
  .mhead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
  .mhead-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .mhead-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
  .mhead-when { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-base); color: var(--muted); }
  .mhead-when svg { width: 15px; height: 15px; }
  .mhead-winner { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); color: var(--ok); }
  .mhead-winner svg { width: 16px; height: 16px; color: var(--gold-ink); }

  /* §X·2 캘린더 '추가' 분할 버튼 + 공급자 팝오버 (#45). .btn--ghost.btn--sm 재사용 — */
  /* .cal-main/.cal-caret는 이어붙임 오버라이드만. 종료=.cal-hint(자리 유지)·미확정=disabled. */
  .cal { position: relative; display: inline-flex; }
  .cal-split { display: inline-flex; }
  .cal-main { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
  .cal-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 8px; padding-right: 8px; }
  .cal-caret svg { transition: transform var(--dur-1) var(--ease); }
  .cal.open .cal-caret svg { transform: rotate(180deg); }
  .cal.open .cal-main, .cal.open .cal-caret { border-color: var(--point-line); color: var(--point); background: var(--point-soft); }
  .cal-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dropdown); min-width: 220px; border: 1px solid var(--point-line); border-radius: var(--r-md); background: var(--raise); box-shadow: var(--shadow-2); padding: 6px; opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .cal.open .cal-pop { opacity: 1; transform: none; pointer-events: auto; }
  .cal-pop::before { content: ''; position: absolute; top: -5px; right: 16px; width: 9px; height: 9px; background: var(--raise); border-left: 1px solid var(--point-line); border-top: 1px solid var(--point-line); transform: rotate(45deg); }
  .cal-ph { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 8px 11px 6px; }
  .cal-opt { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-base); text-decoration: none; }
  .cal-opt:hover { background: var(--point-soft); }
  .cal-opt .oi { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--panel-2) 44%, transparent); border: 1px solid var(--line); color: var(--muted); }
  .cal-opt .oi svg { width: 16px; height: 16px; }
  .cal-opt:hover .oi { color: var(--point); border-color: var(--point-line); }
  .cal-opt .ot { flex: 1; }
  .cal-opt .go { color: var(--faint); display: inline-flex; }
  .cal-opt .go svg { width: 14px; height: 14px; }
  .cal-opt:hover .go { color: var(--point); }
  .cal-hint { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
  .cal-hint svg { width: 13px; height: 13px; }
  .cal-disabled { display: inline-flex; }
  .mback-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: none; color: var(--muted); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base); cursor: pointer; padding: 4px 0; text-decoration: none; transition: color var(--dur-1), transform var(--dur-1) var(--ease); }
  .mback-link svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
  .mback-link:hover { color: var(--point); }
  .mback-link:hover svg { transform: translateX(-2px); }
  .mback-link:active { transform: translateX(-1px); }
  .mback-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); border-radius: var(--r-xs); }

  .mstepper { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
  .mstep { display: flex; align-items: center; gap: 9px; }
  .mstep-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--line-strong); color: var(--faint); background: var(--void); transition: border-color var(--dur-2), background var(--dur-2), color var(--dur-2); }
  .mstep-dot svg { width: 15px; height: 15px; }
  .mstep-lb { font-size: var(--fs-base); font-weight: 600; color: var(--muted); white-space: nowrap; }
  .mstep.done .mstep-dot { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
  .mstep.done .mstep-lb { color: var(--text); }
  .mstep.active .mstep-dot { border-color: var(--point); background: var(--point-soft); color: var(--point); box-shadow: 0 0 0 4px var(--point-soft); }
  .mstep.active .mstep-lb { color: var(--point); }
  .mstep-bar { height: 2px; flex: 1; min-width: 24px; background: var(--line-strong); margin: 0 12px; border-radius: 2px; transition: background var(--dur-2); }
  .mstep-bar.fill { background: var(--ok); }
  .mstepper.is-cancelled .mstep:not(:first-child) { opacity: 0.4; }
  .mstep-cancel { display: flex; align-items: center; gap: 10px; margin-left: 14px; }
  .mstep-branch { width: 22px; height: 2px; background: var(--danger); border-radius: 2px; opacity: 0.5; }
  @media (max-width: 560px) { .mstep-lb { display: none; } .mstep-bar { margin: 0 6px; } }

  /* ===== 멤버용 매치 뷰 + 본인 취소 (T·1 슬라이스3, coral, 의뢰 #47) — .doc 안에서 로스터·
     스텝바·배지·.riot-alert.danger·공용 #appConfirm 재사용. 신규색 0(전부 토큰/color-mix). ===== */
  .doc--wide { max-width: 1040px; }
  .doc .mstepper { margin: 22px 0; }
  .doc .mroster { margin-top: 20px; }

  /* 목록 카드 */
  .mmatch-sec { margin-top: 26px; }
  .mmatch-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .mmatch-h svg { width: 17px; height: 17px; color: var(--point); }
  .mmatch-h h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); }
  .mmatch-h .mono { color: var(--faint); font-size: var(--fs-base); }
  .mmatch-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; color: var(--muted); text-align: center; }
  .mmatch-empty svg { width: 30px; height: 30px; color: var(--faint); }
  .mmatch-empty.sm { padding: 20px; font-size: var(--fs-base); }
  .mcards { display: flex; flex-direction: column; gap: 11px; }
  .mcard { display: flex; align-items: center; gap: 15px; padding: 15px 17px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 82%, transparent); text-decoration: none; color: var(--text); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease); }
  .mcard:hover { border-color: var(--point-line); transform: translateY(-2px); }
  .mcard.past { opacity: 0.72; }
  .mcard.past:hover { transform: none; }
  .mcard-ic { width: 42px; height: 42px; border-radius: var(--r-md); flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--void) 50%, transparent); color: var(--muted); }
  .mcard-ic svg { width: 19px; height: 19px; }
  .mcard-ic--point { color: var(--point); border-color: var(--point-line); background: var(--point-soft); }
  .mcard-ic--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
  .mcard-ic--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 11%, transparent); }
  .mcard-body { flex: 1; min-width: 0; }
  .mcard-nm { font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .mcard-seq { color: var(--faint); font-size: var(--fs-sm); font-weight: 400; }
  .mcard-meta { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; font-size: var(--fs-base); color: var(--muted); }
  .mcard-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .mcard-meta svg { width: 13px; height: 13px; color: var(--faint); }
  .mcard-att.att { color: var(--ok); }
  .mcard-att.noshow { color: var(--danger); }
  .mcard-att svg { color: currentColor; }
  .mcard-rr { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
  .mcard-go { color: var(--faint); display: inline-flex; }
  .mcard-go svg { width: 18px; height: 18px; }
  .mcard:hover .mcard-go { color: var(--point); }
  @media (max-width: 560px) {
    .mcard { flex-wrap: wrap; }
    .mcard-rr { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
  }

  /* 상세 헤더 메타 · flash · 내 로스터 행 강조 */
  .mmatch-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
  .mmatch-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .mmatch-meta svg { width: 14px; height: 14px; color: var(--point); }
  .mmatch-flash { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-base); margin: 16px 0; border: 1px solid var(--line); }
  .mmatch-flash svg { width: 16px; height: 16px; flex: none; }
  .mmatch-flash.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
  .mmatch-flash.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .mplayer.me { background: var(--point-soft); }
  .mplayer-me { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--point); border: 1px solid var(--point-line); border-radius: var(--r-pill); padding: 1px 6px; }

  /* RSVP 컨트롤 (확정 전 3-way / 확정 후 취소·종료 노트) */
  .rsvp { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 82%, transparent); }
  .rsvp-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .rsvp-l { font-size: var(--fs-md); font-weight: 600; }
  .rsvp-h .badge { margin-left: auto; }
  .rsvp-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
  .rsvp-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 28%, transparent); cursor: pointer; font-family: var(--font-ui); color: var(--text); transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease); }
  .rsvp-opt:hover { transform: translateY(-2px); border-color: var(--point-line); }
  .rsvp-opt .ri { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: color-mix(in srgb, var(--panel-2) 50%, transparent); }
  .rsvp-opt .ri svg { width: 18px; height: 18px; }
  .rsvp-opt .rt { font-size: var(--fs-md); font-weight: 600; }
  .rsvp-opt .rd { font-size: 11px; color: var(--faint); }
  .rsvp-opt.sel.join { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
  .rsvp-opt.sel.join .ri { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
  .rsvp-opt.sel.tent { border-color: var(--point-line); background: var(--point-soft); }
  .rsvp-opt.sel.tent .ri { color: var(--point); background: color-mix(in srgb, var(--point) 16%, transparent); }
  .rsvp-opt.sel.dec { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 11%, transparent); }
  .rsvp-opt.sel.dec .ri { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
  .rsvp-free { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 12px; text-align: center; }
  @media (max-width: 560px) { .rsvp-3 { grid-template-columns: 1fr; } }
  .confirmed-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
  .confirmed-row .locked-note { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ok); display: inline-flex; align-items: center; gap: 7px; }
  .confirmed-row .locked-note svg { width: 14px; height: 14px; }
  .cancel-self { margin: 0 0 0 auto; }
  .ended-note { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 70%, transparent); font-size: var(--fs-base); color: var(--muted); }
  .ended-note .en-ic { display: inline-flex; color: var(--faint); flex: none; }
  .ended-note .en-ic svg { width: 17px; height: 17px; }
  .ended-note b { color: var(--text); }
  .ended-note b.att { color: var(--ok); }
  .ended-note b.noshow { color: var(--danger); }

  /* 컨트롤 + 대타 */
  .mctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
  .mctrl form { margin: 0; }
  .mswap-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .mswap-row .select, .mswap-row .dsel { flex: 1; min-width: 150px; }
  .mswap-arrow { color: var(--point); display: grid; place-items: center; flex: none; }
  .mswap-arrow svg { width: 18px; height: 18px; }

  /* future 패널 */
  .mfuture { border-style: dashed; opacity: 0.86; }
  .mfuture-b { display: flex; flex-direction: column; gap: 14px; }
  .mfuture-rows { display: flex; flex-direction: column; gap: 8px; }
  .mfuture-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); }
  .mfuture-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--faint); flex: none; }

  /* 확정 모달 */
  .mmodal-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: color-mix(in srgb, var(--void-deep) 80%, transparent); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; animation: dd-in var(--dur-2) var(--ease-out); }
  .mmodal-scrim[hidden] { display: none; }

  /* P·2 멤버 상세 모달(.mdt) — .mmodal-scrim 오버레이 재사용, 디자인 db29266a 'Kletoi 멤버 세부 모달'.
     전부 토큰/color-mix(색 가드 안전). 등급 색만 인라인 --gc(badges.TIERS hex, 로스터/리더보드와 동일). */
  .mdt-scrim { overflow: auto; padding: 60px 24px 28px; align-items: start; }
  .mdt { width: min(720px, 100%); margin: 0 auto; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--raise); box-shadow: var(--shadow-2); overflow: hidden; animation: mmod-in var(--dur-3) var(--ease-out); }
  .mdt-head { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); position: relative; background: radial-gradient(120% 160% at 88% -40%, var(--point-soft) 0%, transparent 56%); }
  .mdt-id { min-width: 0; flex: 1; }
  .mdt-name { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.1; }
  .mdt-handles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .mdt-hchip { font-family: var(--font-mono); font-size: 12px; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  .mdt-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void-deep) 40%, transparent); color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
  .mdt-close:hover { color: var(--text); border-color: var(--point-line); background: var(--point-soft); }
  .mdt-close svg { width: 18px; height: 18px; }
  .mdt-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; max-height: 64vh; overflow: auto; }
  .mdt-kpis, .mdt-stats, .mdt-trust { display: grid; gap: 12px; }
  .mdt-kpis { grid-template-columns: repeat(3, 1fr); }
  .mdt-stats { grid-template-columns: 1fr 1fr; }
  .mdt-trust { grid-template-columns: repeat(3, 1fr); }
  .mdt-kpi { border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 16px; background: color-mix(in srgb, var(--panel) 70%, transparent); display: flex; flex-direction: column; gap: 7px; }
  .mdt-kpi--pt .mdt-kv { color: var(--point); }
  .mdt-kl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
  .mdt-kv { font-family: var(--font-mono); font-weight: 700; font-size: 28px; line-height: 1; }
  .mdt-kv small { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 2px; }
  .mdt-ksub { font-size: 12px; color: var(--muted); }
  .mdt-tier { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--gc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 44%, transparent); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }
  .mdt-medal { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: color-mix(in srgb, var(--gc) 26%, var(--void-deep)); }
  .mdt-sec-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
  .mdt-sec-h h4 { font-size: 14px; font-weight: 600; }
  .mdt-si { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); flex: none; }
  .mdt-si svg { width: 15px; height: 15px; }
  .mdt-stat { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
  .mdt-sl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
  .mdt-sv { font-family: var(--font-mono); font-weight: 700; font-size: 22px; margin-top: 6px; }
  .mdt-sv .w { color: var(--ok); } .mdt-sv .l { color: var(--danger); }
  .mdt-sv small { color: var(--muted); font-size: 13px; }
  .mdt-tcell { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; background: color-mix(in srgb, var(--panel) 60%, transparent); display: flex; align-items: center; gap: 12px; }
  .mdt-ti { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; }
  .mdt-ti svg { width: 18px; height: 18px; }
  .mdt-ti.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
  .mdt-ti.pt { color: var(--point); background: var(--point-soft); }
  .mdt-ti.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
  .mdt-tv { font-family: var(--font-mono); font-weight: 700; font-size: 21px; line-height: 1; }
  .mdt-tk { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
  .mdt-acl { display: flex; flex-direction: column; gap: 9px; }
  .mdt-acl-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .mdt-lbl { font-size: 12px; color: var(--muted); width: 48px; flex: none; }
  .mdt-cchip { font-size: 12.5px; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text); background: color-mix(in srgb, var(--panel-2) 50%, transparent); }
  .mdt-cchip.allow { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
  .mdt-cchip.deny { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .mdt-ph { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 18px; text-align: center; color: var(--faint); font-size: 13px; background: color-mix(in srgb, var(--void-deep) 20%, transparent); }
  .mdt-foot { display: flex; align-items: center; gap: 11px; padding: 15px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  @media (max-width: 620px) {
    .mdt-kpis, .mdt-stats, .mdt-trust { grid-template-columns: 1fr; }
    .mdt-body { max-height: none; }
  }

  /* ===== 멤버 태그 칩(디자인 #55, MB·1) — 모달·로스터 공용. 예약어 = 시맨틱 아이콘,
     자유입력 = 해시 8톤 dot. 색은 .mtag--tN → --mtc, 컴포넌트는 color-mix(var(--mtc)…)만. ===== */
  .mtag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin: 0;
    padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; color: var(--mtc);
    background: color-mix(in srgb, var(--mtc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--mtc) 42%, transparent); }
  .mtag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mtc); flex: none; }
  .mtag-ic { width: 12px; height: 12px; flex: none; }
  .mtag-rm { width: 15px; height: 15px; flex: none; border: none; background: none; color: var(--mtc); opacity: 0.5;
    cursor: pointer; padding: 0; display: grid; place-items: center; margin-left: 1px; }
  .mtag-rm:hover, .mtag-rm:focus-visible { opacity: 1; outline: none; }
  .mtag-rm svg { width: 11px; height: 11px; }
  .mtag--sm { font-size: 11px; padding: 2px 9px; gap: 5px; }
  .mtag--more { color: var(--muted); background: transparent; border: 1px dashed var(--line-strong);
    font-family: var(--font-mono); font-weight: 700; cursor: default; }
  .mtag--none { color: var(--faint); background: transparent; border: 1px dashed var(--line-strong); font-weight: 500; }
  /* 로스터 행 태그 셀 — 칩 최대 2 + "+N"(nowrap). */
  .mtag-cell { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
  .mtag--t1 { --mtc: var(--mtag-1); } .mtag--t2 { --mtc: var(--mtag-2); } .mtag--t3 { --mtc: var(--mtag-3); }
  .mtag--t4 { --mtc: var(--mtag-4); } .mtag--t5 { --mtc: var(--mtag-5); } .mtag--t6 { --mtc: var(--mtag-6); }
  .mtag--t7 { --mtc: var(--mtag-7); } .mtag--t8 { --mtc: var(--mtag-8); }
  /* 모달 태그 행 + 인라인 추가 폼(항상 노출·dashed 필). 태그 칩은 제거 폼(.mtag=form). */
  .mtagrow { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
  .mtag-cnt { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-left: auto; }
  .mtag-add { display: inline-flex; align-items: center; gap: 5px; }
  .mtag-add-in { width: 116px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong);
    background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 12px; outline: none; }
  .mtag-add-in:focus { border-style: solid; border-color: var(--point-line); }
  .mtag-add-btn { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
    border-radius: 50%; border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); }
  .mtag-add-btn:hover { color: var(--point); border-color: var(--point-line); }
  .mtag-add-btn svg { width: 13px; height: 13px; }

  /* ===== 스태프 노트 카드(디자인 #55) — 작성자 아바타 · 상대시각 · hover 삭제 · max-height 스크롤 ===== */
  .notes { display: flex; flex-direction: column; gap: 9px; max-height: 238px; overflow-y: auto; padding-right: 4px; }
  .note-card { display: flex; gap: 11px; padding: 11px 13px; position: relative; border: 1px solid var(--line);
    border-radius: var(--r-md); background: color-mix(in srgb, var(--panel) 55%, transparent); }
  .note-card .ava { margin-top: 1px; }
  .note-body { min-width: 0; flex: 1; }
  .note-meta { display: flex; align-items: baseline; gap: 8px; }
  .note-who { font-size: 12.5px; font-weight: 600; }
  .note-when { font-size: 10.5px; color: var(--faint); }
  .note-text { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
  .note-del { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--line); background: var(--raise); color: var(--muted); display: grid; place-items: center;
    opacity: 0; transition: opacity var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
  .note-card:hover .note-del, .note-del:focus-visible { opacity: 1; }
  .note-del:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
  .note-del svg { width: 13px; height: 13px; }
  .note-in { display: flex; gap: 6px; margin-top: 10px; }
  @media (prefers-reduced-motion: reduce) { .note-del { transition: none; } }

  /* Q·6 채널 멤버 권한 관리 모달(.cmodal/.cm-*) — channel-members.js가 AJAX 주입. .mdt와 같은
     오버레이 톤이되, scrim z는 --z-modal 한 단계 아래 → 위험 액션 확인(#appConfirm, --z-modal)이
     위에 뜬다. 전부 토큰/color-mix(색 가드 안전). 디자인 db29266a 'Kletoi 채널 멤버 권한 관리'. */
  .cmodal-scrim { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: color-mix(in srgb, var(--void-deep) 80%, transparent); backdrop-filter: blur(4px); overflow: auto; padding: 60px 24px 28px; display: grid; align-items: start; animation: dd-in var(--dur-2) var(--ease-out); }
  .cmodal-scrim[hidden] { display: none; }
  /* overflow visible (not hidden): the '멤버 추가' picker (.cm-add) sits at the modal bottom and
     its .dsel dropdown opens downward — `overflow:hidden` clipped the lower options (§A5). The
     scrim (overflow:auto) scrolls to reach any menu that overflows below. Round the header's own
     top corners since it's the only child flush to the modal edge (its gradient bg would otherwise
     square the corners); the body is padded so the modal's rounded bg keeps the bottom corners. */
  .cmodal { width: min(720px, 100%); margin: 0 auto; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--raise); box-shadow: var(--shadow-2); overflow: visible; animation: mmod-in var(--dur-3) var(--ease-out); }
  .cmodal-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--line); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; background: radial-gradient(120% 160% at 88% -40%, var(--point-soft) 0%, transparent 56%); }
  .cmodal-ic { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); }
  .cmodal-ic svg { width: 22px; height: 22px; }
  .cmodal-t { min-width: 0; flex: 1; }
  .cmodal-t h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); margin: 0; line-height: 1.15; }
  .cmodal-sub { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); }
  .cmodal-body { padding: 16px 22px 22px; }
  .cm-sect { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .cm-list { display: flex; flex-direction: column; gap: 8px; }
  .cm-row { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--panel-2) 40%, transparent); }
  .cm-row.is-owner { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
  .cm-row.is-deny { opacity: 0.82; }
  .cm-row .pres { width: 11px; height: 11px; }
  .cm-who { min-width: 0; flex: 1; }
  .cm-nm { font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cm-nm .badge svg { width: 12px; height: 12px; }
  .cm-h { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); margin-top: 2px; }
  .cm-acts { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .cm-acts form { display: inline-flex; margin: 0; }
  .cm-add { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding: 13px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 22%, transparent); flex-wrap: wrap; }
  .cm-add-lbl { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
  .cm-add-form { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 220px; flex-wrap: wrap; }
  .cm-add-form .dsel, .cm-add-form > select.select { flex: 1; min-width: 180px; }
  .pres.on { background: var(--ok); }
  .pres.off { background: var(--faint); }
  @media (max-width: 620px) {
    .cm-row { flex-wrap: wrap; }
    .cm-acts { margin-left: 0; width: 100%; justify-content: flex-start; padding-top: 4px; }
  }

  .mmodal { width: min(460px, 100%); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-2); animation: mmod-in var(--dur-3) var(--ease-out); }
  @keyframes mmod-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
  .mmodal-h { display: flex; gap: 14px; padding: 22px 24px 16px; }
  .mmodal-ic { width: 42px; height: 42px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
  .mmodal-ic svg { width: 22px; height: 22px; }
  .mmodal-h h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); margin: 0; }
  .mmodal-h p { font-size: var(--fs-base); color: var(--muted); line-height: 1.55; margin: 5px 0 0; }
  .mmodal-b { padding: 6px 24px 18px; }
  .mwin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
  .mwin-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--void) 50%, transparent); cursor: pointer; font-family: var(--font-ui); position: relative; transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease), box-shadow var(--dur-1); }
  .mwin-opt:hover { border-color: var(--accent); }
  .mwin-opt:active { transform: translateY(0.5px) scale(0.99); }
  .mwin-opt:focus-within { box-shadow: 0 0 0 3px var(--point-soft); }
  .mwin-opt:has(input:checked) { border-color: var(--point); background: var(--point-soft); }
  .mwin-opt.void:has(input:checked) { border-color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
  .mwin-check { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; color: var(--point); opacity: 0; transition: opacity var(--dur-1); }
  .mwin-check svg { width: 16px; height: 16px; }
  .mwin-opt:has(input:checked) .mwin-check { opacity: 1; }
  .mwin-lb { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
  .mack { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-base); line-height: 1.5; color: var(--muted); }
  /* §J·f 리뷰: display:none은 포커스 불가 → Tab 트랩이 조작 불가 모달에 가둔다.
     포커스 가능한 시각 숨김(sr-input) + 라벨 :focus-within 링으로 키보드 조작 성립. */
  .mwin-opt input, .mack input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
    pointer-events: none; }
  .mwin-opt:focus-within, .mack:focus-within { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .mack-box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: #fff; margin-top: 1px; transition: background var(--dur-1), border-color var(--dur-1); }
  .mack-box svg { width: 13px; height: 13px; opacity: 0; }
  .mack input:checked + .mack-box { background: var(--ok); border-color: var(--ok); }
  .mack input:checked + .mack-box svg { opacity: 1; }
  .mmodal-f { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  /* 발송 확인 모달 — 두 팀 미리보기 (match.js IIFE(4), 핸드오프 .sc-*) */
  .mmodal--wide { width: min(560px, 100%); }
  .mmodal-ic.point { background: var(--point-soft); color: var(--point); }
  .sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .sc-team { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
  .sc-team--a { border-top: 2px solid var(--point); }
  .sc-team--b { border-top: 2px solid var(--accent); }
  .sc-team-h { padding: 9px 13px; border-bottom: 1px solid var(--line); }
  .sc-row { display: flex; align-items: center; gap: 9px; padding: 7px 13px; border-bottom: 1px solid var(--line); }
  .sc-row:last-child { border-bottom: none; }
  .sc-nm { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sc-lane { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
  @media (max-width: 540px) { .sc-grid { grid-template-columns: 1fr; } }
  /* lane picker — custom dropdown with lane icons (.langpick family), detail roster lane edit */
  .lpick { position: relative; flex: none; }
  .lpick-trigger { display: inline-flex; align-items: center; gap: 6px; min-width: 104px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void-deep) 55%, transparent); color: inherit; cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; transition: border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1) var(--ease); }
  .lpick-trigger:hover { border-color: var(--accent); }
  .lpick-trigger:active { transform: translateY(1px) scale(0.99); }
  .lpick-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }
  .lpick.open .lpick-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }
  .lpick-trigger .lpick-cur { flex: 1; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
  .lpick-cur > svg, .lpick-opt > svg { flex: none; }
  .lpick-trigger > svg { width: 14px; height: 14px; color: var(--accent); flex: none; transition: transform var(--dur-2) var(--ease); }
  .lpick.open .lpick-trigger > svg { transform: rotate(180deg); color: var(--primary); }
  .lpick-menu { position: absolute; left: 0; top: calc(100% + 5px); z-index: var(--z-dropdown); min-width: 140px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; }
  .lpick-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-base); color: var(--text); text-align: left; white-space: nowrap; transition: background var(--dur-1), transform var(--dur-1) var(--ease); }
  .lpick-opt:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
  .lpick-opt:active { transform: translateY(0.5px); }
  .lpick-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .lpick-opt:disabled { opacity: 0.4; cursor: not-allowed; }
  /* design select — native <select class="select"> upgraded to the .lpick dropdown look (dsel.js).
     Native stays in the form as source-of-truth; .dsel-native hides it visually (opacity, NOT
     display:none — a hidden `required` select is "not focusable" and blocks submit). */
  .dsel { position: relative; width: 100%; }
  .dsel-native { position: absolute; left: 12px; bottom: 6px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
  .dsel-trigger { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    background-color: color-mix(in srgb, var(--void-deep) 55%, transparent); border: 1px solid var(--line-control); border-radius: var(--r-md);
    color: var(--text); font-family: var(--font-ui); font-size: var(--fs-md); padding: 11px 14px; box-shadow: var(--shadow-2);
    transition: border-color var(--dur-1), box-shadow var(--dur-2), background-color var(--dur-1), transform var(--dur-1) var(--ease); }
  .dsel-trigger:hover { border-color: var(--line-strong); }
  .dsel-trigger:active { transform: translateY(1px) scale(0.995); }
  .dsel-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }
  .dsel.open .dsel-trigger { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft), var(--shadow-2);
    background-color: color-mix(in srgb, var(--void-deep) 75%, transparent); }
  .dsel-cur { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dsel-cur.muted { color: var(--faint); }
  .dsel-trigger > svg { width: 16px; height: 16px; color: var(--accent); flex: none; transition: transform var(--dur-2) var(--ease); }
  .dsel.open .dsel-trigger > svg { transform: rotate(180deg); color: var(--primary); }
  /* disabled whole control — dashed affordance (cf. design .dd.disabled; hit when channels.available is false) */
  .dsel.disabled { opacity: 0.5; }
  .dsel.disabled .dsel-trigger { cursor: not-allowed; border-style: dashed;
    background-color: color-mix(in srgb, var(--void-deep) 35%, transparent); }
  .dsel.disabled .dsel-trigger > svg { color: var(--faint); }
  .dsel-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown);
    background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px;
    transform-origin: top; animation: dd-in var(--dur-2) var(--ease-out); }
  .dsel-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: none; background: transparent;
    border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); text-align: left;
    transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease); }
  .dsel-lab { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* opt-in member avatar inside an option / the trigger (cf. _avatar.html macro) — only on
     options carrying data-avatar (matchmaker grant picker); plain selects stay text-only. */
  .dsel-ava { width: 22px; height: 22px; border-radius: 50%; flex: none; }
  img.dsel-ava { object-fit: cover; display: block; }
  span.dsel-ava { background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; overflow: hidden; }
  .dsel-opt:hover { background: color-mix(in srgb, var(--accent) 90%, #fff); color: var(--void); }
  .dsel-opt:active { transform: translateY(0.5px); }
  .dsel-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .dsel-opt.sel { background: var(--primary); color: #fff; font-weight: 600; box-shadow: 0 4px 14px -6px var(--glow); }
  .dsel-opt.sel:hover { background: var(--primary-bright); color: #fff; }
  .dsel-opt .tick { margin-left: auto; width: 15px; height: 15px; color: var(--accent); opacity: 0; flex: none; }
  .dsel-opt.sel .tick { opacity: 1; color: #fff; }
  .dsel-opt.placeholder { color: var(--faint); }
  /* placeholder(value="")가 기본 선택일 때 .placeholder+.sel 동시 → primary 채움 위 faint 글자(안 보임) 방지.
     '상속(기본값)'을 차분·가독으로(트리거 .dsel-cur.muted 의미와 일관) (회귀 수정 2026-06-24) */
  .dsel-opt.placeholder.sel { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--muted); box-shadow: none; font-weight: 500; }
  .dsel-opt.placeholder.sel .tick { color: var(--accent); }
  .dsel-opt:disabled { opacity: 1; cursor: not-allowed; color: var(--faint); background: color-mix(in srgb, var(--void-deep) 38%, transparent); }
  .dsel-opt:disabled:hover { background: color-mix(in srgb, var(--void-deep) 38%, transparent); color: var(--faint); box-shadow: none; }
  /* in-menu search (≥SEARCH_MIN options) — reuses the .gsearch look; the option list scrolls
     in .dsel-opts below while the search row stays put. */
  .dsel-search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 4px;
    border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 55%, transparent); }
  .dsel-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }
  .dsel-search > svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
  .dsel-q { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text);
    font-family: var(--font-ui); font-size: 13.5px; outline: none; padding: 2px 0; }
  .dsel-q::placeholder { color: var(--faint); }
  .dsel-opts { max-height: 248px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; }
  .dsel-opt.hidden { display: none; }

  /* O·5 적립 제외 피커 — 봇/사람 구분 (디자인 핸드오프 "Kletoi 적립 제외 피커.html"). 토큰/color-mix만. */
  .dsel-grp { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 9px 11px 5px; }
  .dsel-grp.hidden { display: none; }
  .dsel-ava--sq { border-radius: var(--r-sm); }
  .dsel-opt.is-bot .dsel-lab { display: flex; align-items: center; gap: 7px; overflow: visible; }
  .dsel-opt.is-bot:not(.sel):not(:hover) .dsel-lab { color: var(--muted); }
  /* BOT 메타 배지 — 드롭다운 옵션(dsel.js)·제외 목록 행(.mm-row) 공용 */
  .botbadge { display: inline-flex; align-items: center; gap: 4px; flex: none; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 6px 2px 5px; border-radius: 5px;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
  .botbadge svg { width: 11px; height: 11px; }
  .dsel-opt:hover .botbadge, .dsel-opt.sel .botbadge { color: inherit; border-color: currentColor; background: transparent; }
  /* 제외 목록 행 — "적립 안 됨" muted·취소선 강조 */
  .mm-row.excluded .ava { filter: grayscale(.5); opacity: .72; }
  .mm-row.excluded .who-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
  .mm-status { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--faint); }
  .mm-status svg { width: 13px; height: 13px; }

  /* 정기 일정 (리텐션 케이던스 A) — 기존 토큰만, 신규 컴포넌트 최소(기존 화면 확장) */
  .recur-fields { display: flex; flex-wrap: wrap; gap: 16px; }
  .recur-f { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
  .recur-f--time { min-width: 130px; }
  .recur-lb { font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .recur-roster-wrap { margin-top: 18px; }
  .recur-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px;
    max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--void-deep) 40%, transparent); }
  .recur-mem { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm);
    cursor: pointer; font-size: 13.5px; color: var(--text); }
  .recur-mem:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .recur-mem.hidden { display: none; }
  .recur-mem input { accent-color: var(--point); flex: none; }
  .recur-mem .ava { width: 26px; height: 26px; }
  .recur-mem-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .recur-rows { display: flex; flex-direction: column; gap: 8px; }
  .recur-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 35%, transparent); }
  .recur-row.off { opacity: 0.55; }
  .recur-row-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
  .recur-row-tz { font-weight: 600; }
  .recur-row-meta { font-size: var(--fs-sm); color: var(--faint); }
  .recur-row-act { display: flex; gap: 6px; flex: none; }
  .lane-edit { display: inline-flex; align-items: center; gap: 4px; }
  .mplayer-pos { font-size: var(--fs-xs); }
  .btn-confirm { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-md); border: none;
    background: var(--ok); color: #06241a; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-md); cursor: pointer; transition: filter var(--dur-1), transform var(--dur-1) var(--ease); }
  .btn-confirm:hover:not(:disabled) { filter: brightness(1.08); }
  .btn-confirm:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
  .btn-confirm:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 40%, transparent); }
  .btn-confirm .ico { width: 16px; height: 16px; }
  .btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; }

  /* SP6b Riot 결과 검수 패널 (디자인 #13 / sp6b-app.jsx 이식) — 토큰/color-mix만, cyan 추종.
     .gpanel/.badge/.btn/아바타 재사용. 공용 .empty 충돌 피하려 .riot-empty로 네임스페이스. */
  .riot-summary { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 30%, transparent); flex-wrap: wrap; }
  .riot-winner { display: flex; flex-direction: column; gap: 4px; }
  .riot-winner .l { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .riot-winner .v { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); display: flex; align-items: center; gap: 9px; }
  .riot-winner .v svg { width: 20px; height: 20px; }
  .riot-winner .v.t1 { color: var(--point); }
  .riot-winner .v.t2 { color: var(--accent); }
  .riot-meta { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
  .riot-meta .m { display: flex; flex-direction: column; gap: 3px; }
  .riot-meta .m .ml { font-size: var(--fs-xs); color: var(--faint); }
  .riot-meta .m .mv { font-size: var(--fs-md); }
  .riot-src { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--faint); }
  .riot-src svg { width: 13px; height: 13px; color: var(--point); }

  .puuid-tbl { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
  .puuid-row { display: grid; grid-template-columns: 1.1fr auto 1.4fr auto; gap: 12px; align-items: center;
    padding: 11px 14px; border-bottom: 1px solid var(--line); }
  .puuid-row:last-child { border-bottom: none; }
  .puuid-row.unmatched { background: color-mix(in srgb, var(--danger) 7%, transparent); }
  .puuid-row.head { background: color-mix(in srgb, var(--void-deep) 35%, transparent); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
  .puuid-player { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .puuid-nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .puuid-arrow { color: var(--faint); display: grid; place-items: center; }
  .puuid-arrow svg { width: 16px; height: 16px; }
  .puuid-riot { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .puuid-riot .acct { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .puuid-none { font-size: 12.5px; color: var(--danger); font-style: italic; }
  @media (max-width: 640px) {
    .puuid-row { grid-template-columns: 1fr auto; }
    .puuid-row .puuid-riot, .puuid-row .puuid-arrow { grid-column: 1 / -1; padding-left: 38px; }
    .puuid-row.head { display: none; }
  }

  .riot-alert { display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--r-md); }
  .riot-alert-ic { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; }
  .riot-alert-ic svg { width: 18px; height: 18px; }
  .riot-alert-t { font-size: 13.5px; font-weight: 600; }
  .riot-alert-s { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
  .riot-alert.warn { border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
  .riot-alert.warn .riot-alert-ic { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
  .riot-alert.warn .riot-alert-t { color: var(--warn); }
  .riot-alert.danger { border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); }
  .riot-alert.danger .riot-alert-ic { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
  .riot-alert.danger .riot-alert-t { color: var(--danger); }

  .riot-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 20px; }
  .riot-empty-ic { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--point-soft); color: var(--point); margin-bottom: 12px; }
  .riot-empty-ic svg { width: 26px; height: 26px; }
  .riot-empty-t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); }
  .riot-empty-h { font-size: var(--fs-base); color: var(--muted); max-width: 380px; line-height: 1.5; margin-top: 6px; }

  .foot-actions { display: flex; align-items: center; gap: 12px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .riot-foot-note { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); }
  .riot-foot-note svg { width: 14px; height: 14px; }

  /* ============================================================
     Slice C — 노쇼 검수 패널(cyan, .prow) + 멤버 신뢰도 카드/칩(coral). Design #27.
     .tip 툴팁은 위 컴포넌트 재사용. 게이지 conic-gradient는 정적(reduce-motion 안전).
     색은 시맨틱 고정(--ok/--warn/--danger/--muted) + color-mix 파생 — low=muted(danger 아님).
     ============================================================ */
  .roster-cap { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: var(--fs-sm); color: var(--muted);
    background: color-mix(in srgb, var(--void-deep) 30%, transparent); border-bottom: 1px solid var(--line); }
  .roster-cap .badge { margin-left: auto; }
  .prow { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); transition: background var(--dur-1); }
  .prow:last-of-type { border-bottom: none; }
  .prow.suspect { background: color-mix(in srgb, var(--warn) 7%, transparent); }
  .prow.noshow { background: color-mix(in srgb, var(--danger) 7%, transparent); }
  .prow-av { position: relative; flex: none; }
  .prow-av .mk { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; border: 2px solid var(--void); }
  .prow-av .mk svg { width: 11px; height: 11px; }
  .mk.ok { background: var(--ok); color: #06241a; }
  .mk.warn { background: var(--warn); color: #2a2008; }
  .mk.danger { background: var(--danger); color: #fff; }
  .prow-main { flex: 1; min-width: 0; }
  .prow-nm { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .prow-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .prow-sub .lane { display: inline-flex; align-items: center; gap: 4px; }
  .prow-sub .lane svg { width: 14px; height: 14px; }
  .prow-status { display: flex; align-items: center; gap: 8px; flex: none; }
  .prow-actions { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
  .prow-actions form { margin: 0; }
  .abtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: var(--raise); color: var(--text); font-family: var(--font-ui);
    font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: all var(--dur-1); white-space: nowrap; }
  .abtn svg { width: 13px; height: 13px; }
  .abtn:hover { border-color: var(--point-line); color: var(--point); background: var(--point-soft); }
  .abtn.danger:hover { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .abtn.confirm { border-color: color-mix(in srgb, var(--danger) 42%, transparent); color: var(--danger); }
  .abtn.confirm:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
  .abtn.dismiss:hover { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
  .src { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); color: var(--faint); }
  .src svg { width: 11px; height: 11px; }

  /* 멤버 신뢰도 카드 (coral) */
  .trust-card { padding: 20px 22px; }
  .trust-top { display: flex; align-items: center; gap: 18px; }
  .gauge { --pct: 100; --gc: var(--ok); position: relative; width: 104px; height: 104px; flex: none; border-radius: 50%;
    background: conic-gradient(var(--gc) calc(var(--pct) * 1%), color-mix(in srgb, var(--muted) 18%, transparent) 0);
    display: grid; place-items: center; }
  .gauge::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel); }
  .gauge .gv { position: relative; text-align: center; }
  .gauge .gn { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); line-height: 1; color: var(--gc); }
  .gauge .gl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
  .trust-meta { flex: 1; min-width: 0; }
  .trust-tier { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); }
  .trust-tier .pel { width: 11px; height: 11px; border-radius: 50%; flex: none; }
  .trust-desc { font-size: var(--fs-base); color: var(--muted); line-height: 1.55; margin-top: 8px; }
  .trust-stats { display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .tstat { flex: 1; text-align: center; padding: 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  .tstat .n { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
  .tstat .l { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
  .trust-foot { font-size: 11.5px; color: var(--faint); margin-top: 14px; display: flex; align-items: center; gap: 7px; line-height: 1.5; }
  .trust-foot svg { width: 14px; height: 14px; flex: none; color: var(--point); }

  /* 리더보드 신뢰도 칩 */
  .trustchip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--r-pill); }
  .trustchip svg { width: 11px; height: 11px; }
  .trustchip.high { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
  .trustchip.mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
  .trustchip.low { color: var(--muted); background: color-mix(in srgb, var(--muted) 13%, transparent); }

  /* ============================================================
     COMMENDATION (명예의 징표) 위젯 + 매너 (G6-3) — 핸드오프 'Kletoi 명예의 징표 · 매너 지수'
     ============================================================ */
  .cmd { padding: 0; overflow: hidden; }
  .cmd-head { display: flex; align-items: center; gap: 13px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
  .cmd-head .ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); }
  .cmd-head .ic svg { width: 19px; height: 19px; }
  .cmd-head h3 { font-size: var(--fs-lg); font-weight: 700; }
  .cmd-head .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .cmd-counter { margin-left: auto; text-align: right; flex: none; }
  .cmd-counter .num { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-3xl); color: var(--point); line-height: 1; }
  .cmd-counter .num.zero { color: var(--muted); }
  .cmd-counter .lab { font-size: 10px; color: var(--muted); margin-top: 3px; }
  .cmd-rules { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 18px; background: color-mix(in srgb, var(--void-deep) 36%, transparent); border-bottom: 1px solid var(--line); }
  .cmd-rule { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-mono); }
  .cmd-rule svg { width: 13px; height: 13px; color: var(--point); flex: none; }
  .cmd-list { display: flex; flex-direction: column; }
  .cmd-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
  .cmd-row:last-child { border-bottom: none; }
  .cmd-row .ava { width: 36px; height: 36px; flex: none; }
  .cmd-who { min-width: 110px; flex: none; }
  .cmd-nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmd-team { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; margin-top: 3px; padding: 1px 7px; border-radius: var(--r-pill); }
  .cmd-team.ally { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .cmd-team.enemy { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
  .cmd-types { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .ctype { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; user-select: none;
    border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 55%, transparent); color: var(--muted);
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; transition: all var(--dur-1) var(--ease); }
  .ctype svg { width: 15px; height: 15px; color: var(--ct); flex: none; }
  .ctype:hover { border-color: var(--ct); color: var(--text); }
  .ctype.on { color: var(--ct-ink); background: var(--ct); border-color: var(--ct); box-shadow: 0 4px 14px -6px var(--ct); }
  .ctype.on svg { color: var(--ct-ink); }
  .ctype[aria-disabled="true"] { opacity: 0.34; pointer-events: none; }
  .ctype.mental { --ct: var(--cm-mental); --ct-ink: #06222b; }
  .ctype.carry { --ct: var(--cm-carry); --ct-ink: #2a1f06; }
  .ctype.comms { --ct: var(--cm-comms); --ct-ink: #06142e; }
  .ctype.team { --ct: var(--cm-team); --ct-ink: #06281a; }
  [data-mode="light"] .ctype.on { --ct-ink: #fff; }
  .cmd-foot { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); }
  .cmd-foot .note { font-size: var(--fs-xs); color: var(--faint); flex: 1; }
  .cmd-submit { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-base); padding: 10px 20px; border-radius: var(--r-pill); border: none; cursor: pointer;
    color: var(--point-ink); background: var(--point); transition: all var(--dur-1); }
  .cmd-submit:hover { filter: brightness(1.06); }
  .cmd-submit:disabled { opacity: 0.4; cursor: not-allowed; }
  .cmd-sent { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: 600; color: var(--point); }
  .cmd-sent svg { width: 17px; height: 17px; }
  /* manner breakdown chips (받은 징표 유형별) */
  .cmbreak { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .cmtok { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--ct) 34%, transparent); background: color-mix(in srgb, var(--ct) 12%, transparent); }
  .cmtok svg { width: 15px; height: 15px; color: var(--ct); flex: none; }
  .cmtok .nm { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
  .cmtok .ct-n { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--ct); }
  .cmtok.mental { --ct: var(--cm-mental); } .cmtok.carry { --ct: var(--cm-carry); }
  .cmtok.comms { --ct: var(--cm-comms); } .cmtok.team { --ct: var(--cm-team); }
  /* leaderboard manner chip (.trustchip 미러, point색) */
  .repchip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--r-pill); }
  .repchip svg { width: 11px; height: 11px; }
  .repchip.manner { color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); }
  /* match-detail / recap received-commendation tally (관리·회고, 익명) — reuses .cmtok chips */
  .cmtally { display: flex; flex-direction: column; }
  .cmtally-row { display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
  .cmtally-row:last-child { border-bottom: none; }
  .cmtally-row .ava { width: 32px; height: 32px; flex: none; }
  .cmtally-nm { font-size: 13.5px; font-weight: 600; min-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmtally-toks { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; justify-content: flex-end; }
  .cmtally-foot { display: flex; align-items: center; gap: 7px; padding: 11px 18px; font-size: var(--fs-xs); color: var(--faint); border-top: 1px solid var(--line); }
  .cmtally-foot svg { width: 13px; height: 13px; flex: none; }

  /* ============================================================
     LANDING PAGE (/) — ported from Claude Design handoff (Kletoi 랜딩).
     Section styles only; tokens/#bg/buttons inherited from above + base.html,
     so all 6 themes × dark/light cascade automatically. Body gets .lp.
     ============================================================ */
  /* Landing scrolls the WINDOW (landing.js reads window.scrollY) — release the
     app-shell body height/overflow lock (set on the base body for the .ds console,
     which scrolls inside .ds-main). The horizontal clip lives on the scroller
     (html, via :has) so body stays overflow:visible and the window — not the body —
     remains the scroll container. Mirrors body.doc-body but keeps window scroll. */
  html:has(body.lp) { overflow-x: hidden; }
  body.lp { height: auto; min-height: 100%; overflow: visible; word-break: keep-all; }
  body.lp #root { height: auto; min-height: 100%; }

  /* progress + topbar */
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-overlay); display: flex; align-items: center; gap: 14px;
    padding: 16px 32px; transition: background var(--dur-3), border-color var(--dur-3), padding var(--dur-3); border-bottom: 1px solid transparent; }
  .topbar.solid { background: color-mix(in srgb, var(--void-deep) 82%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--line); padding-top: 12px; padding-bottom: 12px; }
  .topbar-brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
  .topbar-brand .emblem { width: 28px; height: 28px; }
  .topbar-wm { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.2em; text-indent: 0.2em; }
  .topbar-nav { display: flex; gap: 4px; margin-left: 18px; }
  .topbar-nav a { font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 7px 13px; border-radius: var(--r-sm); transition: color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease); cursor: pointer; }
  .topbar-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
  .topbar-nav a:active { transform: translateY(0.5px); }
  .topbar-nav a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .topbar-nav a.on { color: var(--point); }
  .topbar-navsep { width: 1px; align-self: stretch; margin: 6px 6px; background: var(--line); }
  /* T·4 (#54): 우선순위 + 오버플로 내비 — landing.js가 topbar 폭을 실측해 data-prio 큰 항목부터 '더보기 ▾'
     팝업으로 접는다(옛 3밴드 미디어쿼리의 비단조 가시성 대체). 모두 body.lp 스코프 → 공유 .topbar-nav 무영향. */
  body.lp .topbar-nav { flex-shrink: 0; }   /* 자연폭 유지 → topbar.scrollWidth로 오버플로 실측(landing.js) */
  body.lp .morepop[hidden] { display: none; }   /* 팝업 display 규칙이 UA [hidden]을 이기지 않도록 카운터 */
  body.lp .topbar-nav a[data-cat="pricing"], body.lp .topbar-nav a[data-cat="browse"] { color: var(--faint); }
  body.lp .topbar-nav a[data-cat="pricing"]:hover, body.lp .topbar-nav a[data-cat="browse"]:hover { color: var(--text); }
  body.lp .topbar-nav a .npfx b { color: var(--muted); font-weight: 600; }
  body.lp .topbar-nav a:hover .npfx b { color: var(--text); }
  /* 더보기 트리거 (landing.js가 생성·필요할 때만 노출) */
  body.lp .tnav-morewrap { position: relative; display: inline-flex; align-items: center; }
  body.lp .tnav-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13.5px;
    font-weight: 500; color: var(--muted); padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: transparent; cursor: pointer; white-space: nowrap; transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1); }
  body.lp .tnav-more:hover { color: var(--text); border-color: var(--line-strong); }
  body.lp .tnav-more .ca { width: 13px; height: 13px; flex: none; transition: transform var(--dur-1); }
  body.lp .tnav-more[aria-expanded="true"] { color: var(--text); border-color: var(--point-line); background: var(--point-soft); }
  body.lp .tnav-more[aria-expanded="true"] .ca { transform: rotate(180deg); }
  body.lp .tnav-more.has-on { color: var(--point); border-color: var(--point-line); }
  body.lp .tnav-more.has-on::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--point);
    box-shadow: 0 0 8px var(--point-glow); flex: none; }
  /* 오버플로 드롭다운 (.dsel 드롭다운 패밀리 미러) */
  body.lp .morepop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 232px; max-width: calc(100vw - 40px);
    border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--raise); box-shadow: var(--shadow-2);
    padding: 6px; z-index: var(--z-dropdown); }
  body.lp .morepop .grp { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--faint); padding: 9px 11px 4px; }
  body.lp .morepop a { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none; background: none; white-space: nowrap; }
  body.lp .morepop a:hover { background: var(--point-soft); color: var(--text); }
  body.lp .morepop a.on { color: var(--point); font-weight: 600; background: var(--point-soft); }
  body.lp .morepop a.on::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--point); margin-left: auto; flex: none; }
  body.lp .morepop a[data-cat="section"]::before { content: ''; width: 13px; height: 13px; flex: none; background: var(--faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
  body.lp .morepop a[data-cat="section"].on::before { background: var(--point); }
  body.lp .morepop a .npfx { display: none; }   /* 팝업에선 그룹 헤더가 '요금제'를 대신 → 인라인 프리픽스 숨김 */
  body.lp .morepop .dvd { height: 1px; background: var(--line); margin: 5px 8px; }
  body.lp .morepop .esc-hint { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); padding: 7px 11px 4px;
    border-top: 1px solid var(--line); margin-top: 4px; }
  @media (prefers-reduced-motion: no-preference) {
    body.lp .morepop.anim { animation: morepop-in var(--dur-2) var(--ease-out); }
    @keyframes morepop-in { from { opacity: 0; transform: translateY(-5px); } }
  }
  .topbar-spacer { flex: 1; }
  .progress-rail { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-float); background: transparent; }
  .progress-rail > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--point)); box-shadow: 0 0 12px var(--point-glow); transition: width 0.1s linear; }

  /* section scaffold */
  .sec { position: relative; padding: 110px 32px; }
  .lp .wrap { max-width: 1120px; margin: 0 auto; }
  .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--point); margin-bottom: 18px; }
  .eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--point); }
  .sec h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.14; letter-spacing: 0.01em; }
  .sec .lead { font-size: clamp(15px, 1.6vw, 18px); color: var(--muted); line-height: 1.6; margin-top: 22px; max-width: 620px; text-wrap: pretty; }
  .sec-head { text-align: center; max-width: 760px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; }
  .sec-head .lead { margin-left: auto; margin-right: auto; }
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; }
  .lp .mono { font-family: var(--font-mono); }

  /* hero */
  .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 24px 90px; position: relative; }
  .hero-emb { filter: drop-shadow(0 0 40px var(--glow)); animation: floaty 7s var(--ease) infinite; }
  .hero-emb .emblem { width: 120px; height: 120px; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  .hero-wm { font-family: var(--font-display); font-weight: 600; font-size: clamp(54px, 11vw, 128px); letter-spacing: 0.14em; text-indent: 0.14em; line-height: 1; margin-top: 18px;
    background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--accent) 80%, var(--text))); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 60px var(--glow-soft); }
  .hero-slogan { font-family: var(--font-display); font-size: clamp(15px, 2.4vw, 22px); letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--point); margin-top: 22px; }
  .hero-desc { font-size: clamp(15px, 1.8vw, 18px); color: var(--muted); line-height: 1.65; margin-top: 26px; max-width: 560px; }
  .hero-cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; justify-content: center; }
  .hero-meta { display: flex; gap: 30px; margin-top: 46px; flex-wrap: wrap; justify-content: center; }
  .hero-meta .m { display: flex; flex-direction: column; gap: 3px; }
  .hero-meta .mn { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4xl); color: var(--text); }
  .hero-meta .ml { font-size: var(--fs-sm); color: var(--faint); letter-spacing: 0.04em; }

  /* discord demo */
  .demo { padding: 100px 32px; }
  .demo-inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .demo-cap { text-align: center; max-width: 600px; padding: 0 24px; min-height: 92px; }
  .demo-cap .step-no { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--point); letter-spacing: 0.1em; }
  .demo-cap h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 28px); margin-top: 8px; }
  .demo-cap p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 8px; }
  .demo-ctrl { display: flex; align-items: center; gap: 16px; }
  .demo-arrow { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; flex: none; border-radius: var(--r-pill);
    font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-md); cursor: pointer; transition: all var(--dur-1); }
  .demo-arrow svg { width: 18px; height: 18px; }
  .demo-arrow.prev { border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void) 50%, transparent); color: var(--text); }
  .demo-arrow.prev:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .demo-arrow.next { border: 1px solid transparent; background: var(--point); color: var(--point-ink); box-shadow: 0 8px 22px -10px var(--point-glow); }
  .demo-arrow.next:hover:not(:disabled) { background: color-mix(in srgb, var(--point) 86%, #fff); box-shadow: 0 12px 28px -10px var(--point-glow); transform: translateY(-1px); }
  .demo-arrow.next svg { transform: rotate(180deg); }
  .demo-arrow:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
  .demo-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .demo-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
  .demo-dots { display: flex; gap: 10px; padding: 0 4px; }
  .demo-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: none; background: var(--line-strong); cursor: pointer; transition: all var(--dur-2); }
  .demo-dots button:hover { background: var(--accent); }
  .demo-dots button:active { transform: scale(0.9); }
  .demo-dots button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .demo-dots button.on { background: var(--point); box-shadow: 0 0 10px var(--point-glow); transform: scale(1.25); }
  .demo-progress { display: flex; gap: 8px; }
  .demo-progress i { width: 30px; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background var(--dur-2); }
  .demo-progress i.on { background: var(--point); box-shadow: 0 0 8px var(--point-glow); }

  /* discord-like app frame — wrapped in .dapp-scroll for horizontal scroll on mobile (#12) */
  .dapp-scroll { position: relative; width: 100%; max-width: 960px; }
  .dapp-scroll-track { display: flex; justify-content: center; }
  .dapp-swipe { display: none; }
  .dapp { width: min(940px, 94vw); height: min(580px, 68vh); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 64px 232px 1fr;
    border: 1px solid var(--line-strong); background: var(--void); box-shadow: var(--shadow-2), 0 40px 90px -30px rgba(0,0,0,0.7); }
  .dapp-rail { background: color-mix(in srgb, var(--void-deep) 80%, #000); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
  .dapp-server { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; position: relative; transition: border-radius var(--dur-2) var(--ease), filter var(--dur-1), transform var(--dur-1); }
  .dapp-server .emblem { width: 26px; height: 26px; }
  .dapp-server.home { background: var(--point); color: var(--point-ink); box-shadow: 0 0 0 2px var(--point-line); border-radius: 16px; }
  .dapp-server.home .emb-call, .dapp-server.home .emb-answer { stroke: var(--point-ink); }
  .dapp-server.home .emb-core { fill: var(--point-ink); }
  .dapp-server.g { background: var(--panel-2); color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 16px; }
  .dapp-server:hover { border-radius: 16px; filter: brightness(1.12); }
  .dapp-server:active { transform: translateY(1px) scale(0.94); }
  .dapp-server::before { content: ''; position: absolute; left: -12px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--text); transform: translateY(-50%); transition: height var(--dur-2) var(--ease); }
  .dapp-server:hover::before { height: 20px; }
  .dapp-server.active { border-radius: 16px; box-shadow: 0 0 0 2px var(--point); }
  .dapp-server.active::before { height: 28px; background: var(--point); }
  .dapp-rail .sep { width: 30px; height: 2px; border-radius: 2px; background: var(--line); margin: 2px 0; }
  .dapp-side { background: color-mix(in srgb, var(--void) 92%, #000); display: flex; flex-direction: column; min-width: 0; }
  .dapp-side-h { padding: 15px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; }
  .dapp-side-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
  .dapp-cat { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 14px 16px 6px; display: flex; align-items: center; gap: 6px; }
  .dapp-chan { display: flex; align-items: center; gap: 8px; padding: 6px 14px; margin: 1px 8px; border-radius: var(--r-sm); color: var(--muted); font-size: 13.5px; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); white-space: nowrap; overflow: hidden; }
  .dapp-chan span.nm { overflow: hidden; text-overflow: ellipsis; }
  .dapp-chan svg { width: 16px; height: 16px; flex: none; opacity: 0.7; transition: opacity var(--dur-1); }
  .dapp-chan:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); }
  .dapp-chan:hover svg { opacity: 1; }
  .dapp-chan.vc { color: var(--accent); }
  .dapp-chan.spawned { color: var(--point); }
  .dapp-chan.spawned svg { opacity: 1; }
  .dapp-chan.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
  .dapp-occ { margin-left: 26px; }
  .dapp-occ-u { display: flex; align-items: center; gap: 7px; padding: 3px 14px; font-size: 12.5px; color: var(--muted); }
  .dapp-main { background: color-mix(in srgb, var(--void) 72%, var(--void-deep)); display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 2; overflow: visible; }
  .dapp-main-h { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--fs-md); flex: none; }
  .dapp-main-b { flex: 1; padding: 14px 18px 8px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: visible; }
  .dwelcome { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
  .dwelcome-ic { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--void-deep)); color: var(--accent); display: grid; place-items: center; margin-bottom: 3px; }
  .dwelcome-ic svg { width: 22px; height: 22px; }
  .dwelcome h4 { font-family: var(--font-ui); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
  .dwelcome p { font-size: var(--fs-sm); color: var(--muted); }
  .ddivider { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
  .ddivider::before, .ddivider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
  .ddivider span { font-size: 10.5px; font-weight: 600; color: var(--faint); }
  .dmsg { display: flex; gap: 13px; }
  .dmsg-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--void); border: 1px solid var(--line-strong); overflow: hidden; }
  .dmsg-av .emblem { width: 22px; height: 22px; }
  .dmsg-body { min-width: 0; flex: 1; }
  .dmsg-head { display: flex; align-items: center; gap: 8px; }
  .dmsg-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
  .dmsg-app { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: var(--primary); color: #fff; padding: 1px 5px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; }
  .dmsg-app::before { content: '✓'; font-size: 8px; }
  .dmsg-time { font-size: var(--fs-xs); color: var(--faint); }
  .dembed { margin-top: 7px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--void-deep) 55%, transparent); border: 1px solid var(--line); border-left: 4px solid var(--primary); padding: 13px 16px 14px; max-width: 460px; }
  .dembed-title { font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: 7px; }
  .dembed-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
  .dembed-desc code { font-family: var(--font-mono); font-size: var(--fs-xs); background: color-mix(in srgb, var(--void-deep) 70%, #000); padding: 1px 5px; border-radius: 4px; color: var(--accent); }
  .dembed-fields { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin-top: 12px; font-size: 12.5px; }
  .dembed-fields dt { color: var(--text); font-weight: 700; }
  .dembed-fields dd { margin: 0; color: var(--muted); display: flex; align-items: center; gap: 6px; }
  .dembed-foot { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: var(--fs-xs); color: var(--faint); }
  .dembed-foot .fb { width: 15px; height: 15px; border-radius: 50%; background: var(--point-soft); display: grid; place-items: center; }
  .dembed-foot .fb .emblem { width: 11px; height: 11px; }
  .dactions { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; max-width: 460px; }
  .dactions-row { display: flex; gap: 7px; flex-wrap: wrap; }
  .dbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-xs); border: none; color: #fff; cursor: pointer; transition: filter var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1); white-space: nowrap; }
  .dbtn .em { font-size: var(--fs-base); line-height: 1; transition: transform var(--dur-1); }
  .dbtn--primary { background: var(--primary); }
  .dbtn--success { background: #3a9d6e; }
  .dbtn--danger { background: var(--danger-dim, #c2384e); }
  .dbtn--secondary { background: color-mix(in srgb, var(--void-deep) 50%, var(--panel-2)); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .dbtn:hover { filter: brightness(1.14); transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0,0,0,0.7); }
  .dbtn:hover .em { transform: scale(1.18) rotate(-4deg); }
  .dbtn--secondary:hover { background: color-mix(in srgb, var(--void-deep) 35%, var(--panel-3)); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 18px -8px rgba(0,0,0,0.7); }
  .dbtn:active { transform: translateY(1px) scale(0.96); filter: brightness(0.95); box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); transition-duration: 0.04s; }
  .dbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); }
  .dbtn.lit { box-shadow: 0 0 0 2px var(--point), 0 6px 16px -6px var(--point-glow); filter: brightness(1.08); }
  .dbtn.lit:hover { box-shadow: 0 0 0 2px var(--point), 0 10px 22px -8px var(--point-glow); }
  .dbtn-tip { position: absolute; left: 50%; bottom: calc(100% + 11px); transform: translateX(-50%) translateY(6px) scale(0.96); transform-origin: bottom center;
    background: #1a1d26; color: #f3f4f8; border: 1px solid rgba(182,242,74,0.4); border-radius: var(--r-md); padding: 11px 14px; width: max-content; max-width: 256px;
    box-shadow: 0 16px 40px -12px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; z-index: var(--z-tooltip);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .dbtn-tip .tt { font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: 7px; color: #fff; }
  .dbtn-tip .td { font-size: 12.5px; color: #b7bac8; line-height: 1.5; margin-top: 5px; font-weight: 400; white-space: normal; }
  .dbtn-tip .tc { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--point); margin-top: 8px; }
  .dbtn-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1a1d26; }
  .dbtn:hover .dbtn-tip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  .dbtn-tip.gold { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
  .dbtn-tip.gold .tc { color: var(--gold); }
  .dinput { flex: none; margin: 6px 0 4px; display: flex; align-items: center; gap: 11px; padding: 10px 15px; border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 55%, transparent); }
  .dinput .plus { width: 22px; height: 22px; border-radius: 50%; background: var(--muted); color: var(--void-deep); display: grid; place-items: center; flex: none; }
  .dinput .plus svg { width: 14px; height: 14px; }
  .dinput .ph { flex: 1; font-size: var(--fs-base); color: var(--faint); }
  .dinput .ico { color: var(--muted); }
  .dinput .ico svg { width: 18px; height: 18px; }
  .dcursor { position: absolute; width: 22px; height: 22px; z-index: 5; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: left 0.6s var(--ease-out), top 0.6s var(--ease-out), opacity var(--dur-2); }
  .dcursor svg { width: 22px; height: 22px; color: var(--text); }
  .dtoast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(8px); display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--void-deep) 90%, #000); border: 1px solid var(--point-line); color: var(--point); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-2); opacity: 0; transition: opacity var(--dur-2), transform var(--dur-2); white-space: nowrap; }
  .dtoast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .dtoast svg { width: 15px; height: 15px; }

  /* features — bento (O·6): 내전 히어로 2×2 + Kleos·매너·음성·Riot·다국어 */
  .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 16px; }
  .feat { position: relative; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: color-mix(in srgb, var(--void) 50%, transparent);
    display: flex; flex-direction: column; gap: 13px; transition: border-color var(--dur-2), transform var(--dur-2), box-shadow var(--dur-2); }
  .feat:hover { border-color: var(--point-line); transform: translateY(-3px); box-shadow: 0 20px 44px -28px var(--point-glow); }
  .feat-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none; color: var(--point);
    background: linear-gradient(150deg, var(--point-soft), color-mix(in srgb, var(--point) 4%, transparent)); border: 1px solid var(--point-line); }
  .feat-ic svg { width: 27px; height: 27px; }
  .feat-ic.coin { color: var(--kleos); background: linear-gradient(150deg, color-mix(in srgb, var(--kleos) 16%, transparent), transparent); border-color: color-mix(in srgb, var(--kleos) 40%, transparent); }
  .feat-ic.manner { color: var(--gold); background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 16%, transparent), transparent); border-color: color-mix(in srgb, var(--gold) 42%, transparent); }
  .feat h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); }
  .feat p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }
  .feat .cmd { margin-top: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--point); padding: 6px 11px; background: var(--point-soft); border: 1px solid var(--point-line); border-radius: var(--r-sm); align-self: flex-start; }
  .feat .flagtag { position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--point-ink); background: var(--point); padding: 3px 9px; border-radius: var(--r-pill); }
  /* hero — 내전 (2×2) */
  .feat.feat-hero { grid-column: span 2; grid-row: span 2; padding: 30px;
    background: radial-gradient(90% 80% at 88% -10%, color-mix(in srgb, var(--point) 13%, transparent) 0%, transparent 56%), linear-gradient(160deg, color-mix(in srgb, var(--void) 60%, transparent), color-mix(in srgb, var(--void-deep) 40%, transparent)); }
  .feat.feat-hero h3 { font-size: var(--fs-3xl); }
  .feat.feat-hero p { font-size: var(--fs-md); max-width: 440px; }
  /* hero scrim illustration — 2팀·μ·아바타·VS·칩 */
  .scrim-viz { margin-top: auto; display: flex; align-items: stretch; gap: 14px; }
  .sv-team { flex: 1; border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px; background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  .sv-team.win { border-color: var(--point-line); background: color-mix(in srgb, var(--point) 9%, transparent); }
  .sv-team .tn { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 6px; }
  .sv-team .tn .mu { margin-left: auto; color: var(--point); font-weight: 700; }
  .sv-avs { display: flex; gap: 5px; margin-top: 10px; }
  .sv-avs span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
  .sv-vs { align-self: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--faint); }
  .sv-foot { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .sv-chip { font-family: var(--font-mono); font-size: 11px; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .sv-chip svg { width: 12px; height: 12px; color: var(--point); }
  /* Kleos coin / 매너 token mini visuals */
  .mini-coin { margin-top: auto; display: flex; align-items: center; gap: 11px; }
  .mini-coin .c { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, #fff 36%, var(--kleos)), var(--kleos)); }
  .mini-coin .c svg { width: 21px; height: 21px; }
  .mini-coin .v { font-family: var(--font-mono); font-weight: 700; font-size: 22px; }
  .mini-coin .v small { font-size: 12px; color: var(--muted); font-weight: 400; }
  .manner-row { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
  .manner-row .tok { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); }

  /* rank / leaderboard preview */
  .rank-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .rank-track { display: flex; flex-direction: column; gap: 12px; }
  .rank-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--void) 50%, transparent); transition: all var(--dur-2); }
  .rank-row.cur { border-color: var(--point); background: var(--point-soft); box-shadow: 0 0 0 1px var(--point-line); }
  .rank-medal { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex: none; background: color-mix(in srgb, var(--rc) 14%, var(--void-deep)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 50%, transparent); }
  .rank-info { flex: 1; min-width: 0; }
  .rank-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
  .rank-req { font-size: var(--fs-sm); color: var(--muted); font-family: var(--font-mono); margin-top: 2px; }
  .rank-tag { font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }
  .lb-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--void) 50%, transparent); overflow: hidden; }
  .lb-card-h { padding: 16px 20px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); }
  .lb-r { display: flex; align-items: center; gap: 13px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
  .lb-r:last-child { border-bottom: none; }
  .lb-r.me { background: var(--point-soft); box-shadow: inset 3px 0 0 var(--point); }
  .lb-rank { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); width: 28px; color: var(--muted); }
  .lb-medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); }
  .lb-medal--1 { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold-ink); }
  .lb-medal--2 { background: rgba(202,206,220,0.16); color: #cfd2dc; }
  .lb-medal--3 { background: rgba(205,140,90,0.18); color: #d79b6a; }
  .lb-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: var(--fs-base); color: #fff; flex: none; }
  .lb-nm { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; }
  .lb-mi { font-family: var(--font-mono); font-size: var(--fs-base); }

  /* final CTA */
  .cta { text-align: center; }
  .cta-card { position: relative; max-width: 880px; margin: 0 auto; padding: 70px 40px; border-radius: var(--r-xl); overflow: hidden;
    border: 1px solid var(--point-line); background: linear-gradient(160deg, color-mix(in srgb, var(--point) 10%, var(--void)), var(--void-deep)); }
  .cta-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 100% at 50% 0%, var(--point-soft), transparent 70%); pointer-events: none; }
  .cta-emb { position: relative; filter: drop-shadow(0 0 30px var(--point-glow)); }
  .cta-emb .emblem { width: 84px; height: 84px; }
  .cta h2 { position: relative; margin-top: 20px; }
  .cta .lead { position: relative; margin: 18px auto 0; }
  .cta-cta { position: relative; display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

  /* scroll-to-top */
  .totop { position: fixed; right: 28px; bottom: 28px; z-index: var(--z-float); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--point-line);
    background: color-mix(in srgb, var(--point) 18%, var(--panel-2)); color: var(--point); display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 10px 30px -8px var(--point-glow), var(--shadow-2); opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background var(--dur-1), color var(--dur-1); }
  .totop.show { opacity: 1; transform: none; pointer-events: auto; }
  .totop:hover { background: var(--point); color: var(--point-ink); }
  .totop svg { width: 20px; height: 20px; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-emb { animation: none; }
  }
  @media (max-width: 920px) {
    .topbar-nav { display: none; }
    .sec { padding: 80px 22px; }
    .demo { padding: 70px 0; }
    .rank-split { grid-template-columns: 1fr; gap: 26px; }
    .feat-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .feat.feat-hero { grid-column: auto; grid-row: auto; }
    .feat.feat-hero h3 { font-size: var(--fs-2xl); }
    .scrim-viz { flex-direction: column; }
    .sv-vs { align-self: flex-start; }
    /* mobile demo (#12): keep the full 3-column mockup, scroll it horizontally
       instead of hiding the main panel. scroll-snap + edge mask + swipe hint. */
    .demo-inner { width: 100%; }
    .dapp-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 14px;
      mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
    .dapp-scroll-track { justify-content: flex-start; width: max-content; padding: 0 8px; }
    .dapp { width: 840px; height: 540px; grid-template-columns: 64px 232px 1fr; }
    .dapp-rail, .dapp-side, .dapp-main { scroll-snap-align: start; }
    .dapp-swipe { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; width: 100%; justify-content: center;
      font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
    .dapp-swipe svg { width: 14px; height: 14px; color: var(--point); }
  }
  @media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
    .dapp-scroll { scroll-behavior: smooth; }
  }
  @media (max-width: 540px) {
    .demo { padding: 60px 0 70px; }
    .demo-cap, .demo-ctrl, .demo-progress, .sec-head { padding-left: 18px; padding-right: 18px; }
    .hero-meta { gap: 20px; }
  }

  /* ============================================================
     의뢰 #9 — 로그인 후 홈 대시보드 (body.hp, point=hub)
     목업 Kletoi 홈.html에서 이식. 색은 전역 토큰/color-mix 추종(:root 리터럴 제외).
     모두 body.hp로 스코프 — 기존 .gcard(관리자 길드목록)·.badge와 충돌 방지.
     ============================================================ */
  /* landing과 동일: 홈은 window를 스크롤하므로 app-shell body 높이/overflow 락 해제 */
  html:has(body.hp) { overflow-x: hidden; }
  body.hp { height: auto; min-height: 100%; overflow: visible; }
  body.hp #root { height: auto; min-height: 100%; }
  body.hp #bg { background:
    radial-gradient(54% 50% at 50% 116%, var(--point-soft), transparent 70%),
    radial-gradient(125% 120% at 78% -10%, var(--panel) 0%, var(--void) 46%, var(--void-deep) 100%); }

  /* top bar (sticky light public shell — theme/lang stay in the global .themebar) */
  body.hp .htop { position: sticky; top: 0; z-index: var(--z-dropdown); display: flex; align-items: center; gap: 14px; padding: 14px 30px;
    background: color-mix(in srgb, var(--void-deep) 80%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  body.hp .htop-brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
  body.hp .htop-brand .emblem { width: 28px; height: 28px; }
  body.hp .htop-wm { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.2em; text-indent: 0.2em; }
  body.hp .htop-spacer { flex: 1; }
  body.hp .pill-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void) 50%, transparent); color: var(--text);
    font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: border-color var(--dur-1), color var(--dur-1); }
  body.hp .pill-btn:hover { border-color: var(--point-line); color: var(--point); }
  body.hp .htop-user { padding-left: 6px; }
  body.hp .htop-user img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

  /* layout */
  body.hp .hwrap { max-width: 1120px; margin: 0 auto; padding: 36px 30px 64px; }

  /* greeting */
  body.hp .hgreet { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
  body.hp .hgreet-av { flex: none; }
  body.hp .hgreet-av img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); }
  body.hp .hgreet-hi { font-size: var(--fs-md); color: var(--muted); }
  body.hp .hgreet-nm { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; }
  body.hp .hgreet-nm b { color: var(--point); }
  body.hp .hgreet-sum { font-size: var(--fs-md); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
  body.hp .hgreet-sum b { color: var(--text); font-weight: 600; }
  body.hp .hgreet-sum .sep { color: var(--faint); }

  /* section heads */
  body.hp .hsec { margin-top: 40px; }
  body.hp .hsec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  body.hp .hsec-h h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); white-space: nowrap; }
  body.hp .hsec-h .ic { display: inline-flex; color: var(--point); }
  body.hp .hsec-h .ic svg { width: 20px; height: 20px; }
  body.hp .hsec-h .n { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); }
  body.hp .hsec-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }

  /* quick actions */
  body.hp .hquick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  body.hp .qa { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--void) 50%, transparent); cursor: pointer; text-align: left; color: var(--text);
    transition: transform var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2); }
  body.hp .qa:hover { transform: translateY(-3px); border-color: var(--point-line); box-shadow: 0 18px 40px -26px var(--point-glow); }
  body.hp .qa-ic { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; }
  body.hp .qa-ic svg { width: 22px; height: 22px; }
  body.hp .qa.member .qa-ic { background: var(--role-member-soft); color: var(--role-member); }
  body.hp .qa.schedule .qa-ic { background: var(--point-soft); color: var(--point); }
  body.hp .qa.admin .qa-ic { background: var(--role-admin-soft); color: var(--role-admin); }
  body.hp .qa-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
  body.hp .qa-t { font-size: 14.5px; font-weight: 600; }
  body.hp .qa-s { font-size: 12.5px; color: var(--muted); }
  body.hp .qa-go { color: var(--faint); display: inline-flex; transition: transform var(--dur-1), color var(--dur-1); }
  body.hp .qa-go svg { width: 18px; height: 18px; transform: rotate(-90deg); }
  body.hp .qa:hover .qa-go { transform: translateX(3px); color: var(--point); }

  /* guild cards (scoped — distinct from the admin guild-list .gcard) */
  body.hp .hgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  body.hp .gcard { display: flex; flex-direction: column; padding: 0; gap: 0; align-items: stretch;
    border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: color-mix(in srgb, var(--void) 55%, transparent);
    transition: transform var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2); }
  body.hp .gcard:hover { border-color: var(--point-line); transform: translateY(-3px); box-shadow: 0 22px 50px -30px var(--point-glow); }
  body.hp .gcard-top { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; }
  body.hp .gcard-icon { width: 54px; height: 54px; border-radius: 16px; flex: none; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at 50% 35%, var(--panel-3), var(--void)); border: 1px solid var(--line-strong); color: var(--accent);
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); }
  body.hp .gcard-icon img { width: 100%; height: 100%; object-fit: cover; }
  body.hp .gcard-id { flex: 1; min-width: 0; }
  body.hp .gcard-nm { font-family: var(--font-display); font-weight: 600; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.hp .gcard-myrank { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; padding-left: 6px; }
  body.hp .gcard-medal { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xl);
    background: color-mix(in srgb, var(--rc) 16%, var(--void-deep)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 55%, transparent); }
  body.hp .gcard-rank-lb { font-size: 10px; color: var(--muted); max-width: 70px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.hp .gcard-stats { display: flex; gap: 8px; padding: 0 22px 16px; }
  body.hp .gcard-stat { flex: 1; border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  body.hp .gcard-stat-n { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1; }
  body.hp .gcard-stat-n small { font-size: var(--fs-sm); color: var(--faint); font-family: var(--font-mono); }
  body.hp .gcard-stat-lb { font-size: 11.5px; color: var(--muted); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
  body.hp .gcard-stat-lb svg { width: 13px; height: 13px; color: var(--accent); }
  body.hp .gcard-stat .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--point); box-shadow: 0 0 7px var(--point); }
  body.hp .gcard-foot { margin-top: auto; display: flex; gap: 9px; padding: 16px 22px; border-top: 1px solid var(--line); align-items: center; }
  body.hp .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--r-md);
    font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
    transition: filter var(--dur-1), background var(--dur-1), border-color var(--dur-1); }
  body.hp .gbtn svg { width: 16px; height: 16px; }
  body.hp .gbtn--member { flex: 1; background: var(--role-member); color: #2a0f0a; }
  body.hp .gbtn--member:hover { filter: brightness(1.08); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--role-member) 60%, transparent); }
  body.hp .gbtn--admin { background: transparent; color: var(--role-admin); border-color: color-mix(in srgb, var(--role-admin) 42%, transparent); }
  body.hp .gbtn--admin:hover { background: var(--role-admin-soft); border-color: var(--role-admin); }
  body.hp .gcard-plan { margin-left: auto; }
  /* badge base is the shared global .badge; only home modifiers + icon sizing here */
  body.hp .badge svg { width: 12px; height: 12px; }
  body.hp .badge--gold { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold-ink) 30%, transparent); }
  body.hp .badge--free { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }

  /* news + empty states */
  body.hp .hnews { display: flex; flex-direction: column; }
  body.hp .hnews-row { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--void) 50%, transparent); margin-bottom: 10px; transition: border-color var(--dur-1); }
  /* T·3: 행이 딥링크가 되며 클릭 어포던스 — 홈 카드 hover 관례(.qa/.gcard) 최소 미러(토큰만) */
  body.hp a.hnews-row:hover { border-color: var(--point-line); }
  body.hp .hnews-ic { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  body.hp .hnews-ic svg { width: 18px; height: 18px; }
  body.hp .hnews-tx { flex: 1; min-width: 0; }
  body.hp .hnews-t { font-size: 13.5px; font-weight: 600; }
  body.hp .hnews-s { font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.hp .hnews-time { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
  body.hp .hempty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
  body.hp .hempty-ic { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--point-soft); color: var(--point); margin-bottom: 12px; }
  body.hp .hempty-ic svg { width: 24px; height: 24px; }
  body.hp .hempty-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
  body.hp .hempty-s { font-size: var(--fs-base); color: var(--muted); margin-top: 5px; }

  /* brand foot strip (base _footer.html legal links render below) */
  body.hp .hfoot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--faint); font-size: 12.5px; }
  body.hp .hfoot .emblem { width: 22px; height: 22px; }
  body.hp .hfoot-wm { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em; color: var(--muted); }

  /* responsive */
  @media (max-width: 760px) { body.hp .hgrid { grid-template-columns: 1fr; } }
  @media (max-width: 720px) { body.hp .hquick { grid-template-columns: 1fr; } }
  @media (max-width: 600px) { body.hp .hwrap { padding: 26px 18px 56px; } body.hp .htop { padding: 14px 18px; } }

  /* ============================================================
     PRICING / FEATURES PAGE (/pricing) — Claude Design handoff #10.
     Self-contained, all scoped under body.pp / .pp-*; tokens/buttons/topbar
     inherited from above, so 6 themes × dark/light cascade. point=lime. */
  html:has(body.pp) { overflow-x: hidden; }
  body.pp { height: auto; min-height: 100%; overflow: visible; word-break: keep-all; }
  body.pp #root { height: auto; min-height: 100%; }
  body.pp .topbar { position: sticky; }
  @media (max-width: 600px) { body.pp .topbar { padding: 14px 18px; } body.pp .topbar-nav { display: none; } }

  .pp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 30px; }
  @media (max-width: 600px) { .pp-wrap { padding: 0 18px; } }

  .pp-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--point); }
  .pp-eyebrow::before, .pp-eyebrow.c::after { content: ''; width: 22px; height: 1.5px; background: var(--point); }

  /* hero */
  .pp-hero { text-align: center; padding: 72px 0 26px; }
  .pp-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; margin: 18px 0 0; text-wrap: balance; }
  .pp-hero p { font-size: clamp(15px, 1.8vw, 18px); color: var(--muted); line-height: 1.6; max-width: 560px; margin: 18px auto 0; }
  .pp-hero-cta { display: flex; gap: 13px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

  /* section heads */
  .pp-sec { padding: 56px 0; scroll-margin-top: 84px; }
  .pp-sechead { text-align: center; max-width: 680px; margin: 0 auto 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .pp-sechead h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; }
  .pp-sechead p { font-size: var(--fs-lg); color: var(--muted); line-height: 1.6; }

  /* feature grid */
  .pp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 820px) { .pp-feat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .pp-feat-grid { grid-template-columns: 1fr; } }
  .pp-feat { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--void) 50%, transparent); transition: transform var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2); }
  .pp-feat:hover { transform: translateY(-3px); border-color: var(--point-line); box-shadow: 0 20px 46px -28px var(--point-glow); }
  .pp-feat-ic { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--point-soft); color: var(--point); margin-bottom: 16px; }
  .pp-feat-ic svg { width: 23px; height: 23px; }
  .pp-feat.future .pp-feat-ic { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); }
  .pp-feat h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pp-feat p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 9px; }
  .pp-ftag { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: var(--r-pill); }
  .pp-ftag.now { color: var(--point); background: var(--point-soft); }
  .pp-ftag.future { color: var(--faint); background: color-mix(in srgb, var(--muted) 12%, transparent); border: 1px dashed var(--line-strong); }
  /* O·6 — Kleos·매너 카드(코인=코랄 / 매너=골드), fresh=신규 강조 */
  .pp-feat.fresh { border-color: color-mix(in srgb, var(--point) 55%, var(--line)); }
  .pp-feat-ic.coin { background: linear-gradient(150deg, color-mix(in srgb, var(--kleos) 16%, transparent), transparent); color: var(--kleos); border: 1px solid color-mix(in srgb, var(--kleos) 40%, transparent); }
  .pp-feat-ic.manner { background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 16%, transparent), transparent); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); }

  /* pricing note + plans */
  .pp-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 auto 26px; padding: 11px 18px; max-width: 560px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); background: color-mix(in srgb, var(--void) 40%, transparent); color: var(--muted); font-size: var(--fs-base); }
  .pp-note svg { width: 16px; height: 16px; color: var(--point); flex: none; }
  .pp-note b { color: var(--text); font-weight: 600; }
  .pp-note b.hl { color: var(--point); }
  .pp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; }
  @media (max-width: 680px) { .pp-plans { grid-template-columns: 1fr; } }
  .pp-plan { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: color-mix(in srgb, var(--void) 50%, transparent); }
  .pp-plan.prem { border-color: var(--point-line); box-shadow: 0 20px 50px -30px var(--point-glow); }
  .pp-plan-h { padding: 24px 24px 20px; border-bottom: 1px solid var(--line); position: relative; }
  .pp-plan.prem .pp-plan-h { background: var(--point-soft); }
  .pp-plan-emb { margin-bottom: 12px; }
  .pp-plan-emb .emblem { width: 40px; height: 40px; filter: drop-shadow(0 0 16px var(--point-glow)); }
  .pp-plan-badge { position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 9px; border-radius: var(--r-pill); color: var(--faint); background: color-mix(in srgb, var(--muted) 14%, transparent); border: 1px dashed var(--line-strong); }
  .pp-plan-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); }
  .pp-plan-name.lime { color: var(--point); }
  .pp-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
  .pp-plan-price .amt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6xl); line-height: 1; }
  .pp-plan.prem .pp-plan-price .amt { color: var(--point); }
  .pp-plan-price .per { font-size: var(--fs-base); color: var(--faint); }
  .pp-plan-price .ph { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--faint); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 4px 9px; }
  .pp-plan-annual { font-family: var(--font-mono); font-size: 11.5px; color: var(--point); margin-top: 7px; }
  .pp-plan-sub { font-size: var(--fs-base); color: var(--muted); margin-top: 10px; line-height: 1.5; }
  .pp-plan-feats { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 11px; }
  .pp-pf { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
  .pp-pf-ic { width: 19px; height: 19px; flex: none; border-radius: 50%; display: grid; place-items: center; }
  .pp-pf-ic svg { width: 12px; height: 12px; }
  .pp-pf-ic.yes { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
  .pp-pf-ic.yes.lime { background: var(--point-soft); color: var(--point); }
  .pp-pf-ic.no { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--faint); }
  .pp-pf.off { color: var(--faint); }
  .pp-pf .lim { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
  .pp-plan-cta { padding: 0 24px 24px; }

  /* comparison matrix */
  .pp-matrix { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; max-width: 760px; margin: 28px auto 0; }
  .pp-matrix table { width: 100%; border-collapse: collapse; }
  .pp-matrix th, .pp-matrix td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .pp-matrix thead th { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
  .pp-matrix thead th.col { text-align: center; width: 96px; }
  .pp-matrix thead th.prem { color: var(--point); }
  .pp-matrix tbody tr:last-child td { border-bottom: none; }
  .pp-matrix td.c { text-align: center; }
  .pp-matrix .ck { color: var(--ok); }
  .pp-matrix .ck.lime { color: var(--point); }
  .pp-matrix .ck svg, .pp-matrix .xx svg { width: 16px; height: 16px; vertical-align: middle; }
  .pp-matrix .xx { color: var(--faint); }
  .pp-matrix .lim { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }

  /* trust */
  .pp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 820px; margin: 0 auto; }
  @media (max-width: 700px) { .pp-trust { grid-template-columns: 1fr; } }
  .pp-trust-c { display: flex; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--void) 50%, transparent); }
  .pp-trust-ic { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .pp-trust-ic svg { width: 19px; height: 19px; }
  .pp-trust-t { font-size: var(--fs-md); font-weight: 600; }
  .pp-trust-s { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

  /* final CTA */
  .pp-cta-card { position: relative; max-width: 820px; margin: 0 auto; padding: 56px 36px; border-radius: var(--r-xl); overflow: hidden; text-align: center; border: 1px solid var(--point-line); background: linear-gradient(160deg, color-mix(in srgb, var(--point) 10%, var(--void)), var(--void-deep)); }
  .pp-cta-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 100% at 50% 0%, var(--point-soft), transparent 70%); pointer-events: none; }
  .pp-cta-emb, .pp-cta-card h2, .pp-cta-card p, .pp-cta-card .pp-hero-cta { position: relative; }
  .pp-cta-emb .emblem { width: 72px; height: 72px; filter: drop-shadow(0 0 26px var(--point-glow)); }
  .pp-cta-card h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 34px); margin-top: 16px; }
  .pp-cta-card p { color: var(--muted); font-size: var(--fs-lg); margin: 14px auto 0; max-width: 460px; line-height: 1.6; }
  .pp-cta-card .pp-hero-cta { margin-top: 28px; }

  /* ============================================================
     SP7 피드백·AI 요약 (feedback) — Claude Design 핸드오프 #11 2026-06-18.
     .fb-* = 멤버 피드백 작성(coral), .ai-src/.ai-fb/.ai-mvp = 매치 상세 원본
     피드백 패널(cyan). AI 요약 카드(.ai-head/.ai-summary/.ai-fallback/.sk-*/.costnote)
     = SP7b(Claude Haiku 요약, 정상/Fallback 2상태).
     ============================================================ */
  .fb-field-label { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
  .fb-field-label svg { width: 15px; height: 15px; color: var(--point); }
  .fb-field-label .fb-crown-ic { color: var(--gold-ink); }
  .fb-ta-wrap { position: relative; }
  .fb-ta { width: 100%; min-height: 116px; resize: vertical; background: color-mix(in srgb, var(--void-deep) 50%, transparent); border: 1.5px solid var(--line-control); border-radius: var(--r-md); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.55; padding: 13px 14px 30px; transition: border-color var(--dur-1), box-shadow var(--dur-2); }
  .fb-ta:focus { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .fb-ta::placeholder { color: var(--faint); }
  .fb-count { position: absolute; right: 12px; bottom: 9px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); transition: color var(--dur-1); }
  .fb-count.near { color: var(--warn); }
  .fb-count.max { color: var(--danger); font-weight: 700; }
  .fb-hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; line-height: 1.5; }
  .fb-mvp { margin-top: 22px; }
  .fb-mvp-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  .fb-mvp-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 66px; padding: 9px 4px; border-radius: var(--r-md); border: 1.5px solid transparent; background: transparent; cursor: pointer; transition: all var(--dur-1); position: relative; }
  .fb-mvp-opt:hover { background: color-mix(in srgb, var(--point) 8%, transparent); }
  .fb-mvp-opt:has(input:checked) { border-color: var(--point); background: var(--point-soft); }
  .fb-mvp-opt .nm { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
  .fb-mvp-opt:has(input:checked) .nm { color: var(--text); font-weight: 600; }
  .fb-mvp-crown { position: absolute; top: -5px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #2a2008; display: grid; place-items: center; opacity: 0; transform: scale(0.5); transition: all var(--dur-2) var(--ease-out); }
  .fb-mvp-crown svg { width: 11px; height: 11px; }
  .fb-mvp-opt:has(input:checked) .fb-mvp-crown { opacity: 1; transform: scale(1); }
  .fb-mvp-none { justify-content: center; }
  .fb-mvp-x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--faint); border: 1px dashed var(--line-strong); }
  .fb-mvp-x svg { width: 16px; height: 16px; }
  .fb-actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
  .fb-err { display: flex; align-items: center; gap: 9px; padding: 11px 14px; margin-bottom: 16px; border-radius: var(--r-md); font-size: var(--fs-base); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .fb-err svg { width: 16px; height: 16px; flex: none; }
  .fb-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px; }
  .fb-done-ic { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); display: grid; place-items: center; margin-bottom: 14px; animation: fbpop var(--dur-3) var(--ease-out); }
  .fb-done-ic svg { width: 28px; height: 28px; }
  .fb-done h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); }
  .fb-done p { font-size: 13.5px; color: var(--muted); margin-top: 7px; max-width: 320px; line-height: 1.55; }
  @keyframes fbpop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  /* AI 요약 카드(cyan) — SP7b. 핸드오프 #11 정본 이식. 정상/Fallback/스켈레톤. */
  .ai-head { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .ai-emblem { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .ai-emblem svg { width: 21px; height: 21px; }
  .ai-head-main { flex: 1; min-width: 0; }
  .ai-head-t { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ai-head-s { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
  .ai-model { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
  .ai-summary { padding: 18px; }
  .ai-summary-body { font-size: var(--fs-md); line-height: 1.66; color: var(--text); white-space: pre-wrap; }
  .ai-summary-body b { color: var(--point); font-weight: 600; }
  .ai-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .ai-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--accent); background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid var(--line); padding: 5px 11px; border-radius: var(--r-pill); }
  .ai-key svg { width: 12px; height: 12px; }
  .ai-fallback { padding: 18px; }
  .ai-fallback-banner { display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
  .ai-fallback-banner .ic { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
  .ai-fallback-banner .ic svg { width: 18px; height: 18px; }
  .ai-fallback-banner .t { font-size: 13.5px; font-weight: 600; color: var(--warn); }
  .ai-fallback-banner .s { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
  .ai-skeleton { margin-top: 16px; padding: 16px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--void-deep) 25%, transparent); }
  /* ===== #59 스켈레톤 시스템 (.sk-*) — 스피너·빈 화면 대신 콘텐츠 동형 골격. 베이스 .sk +
     변형(.sk-line/-av/-num/-chip/-rect) + 조합(.sk-row/-stat/-chart/-trow). shimmer는 ::after
     오버레이(reduce-motion은 아래 중앙 블록에서 정지). 규칙: 실물과 같은 높이·간격·패딩=시프트 0. */
  .sk { position: relative; overflow: hidden; background: var(--sk-base); border-radius: 7px; }
  .sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--sk-hi), transparent); animation: sk-shimmer 1.5s ease-in-out infinite; }
  @keyframes sk-shimmer { to { transform: translateX(100%); } }
  .sk-line { height: 12px; margin-bottom: 9px; } .sk-line.lg { height: 16px; } .sk-line.sm { height: 9px; }
  .sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
  .sk-av { border-radius: 50%; width: 36px; height: 36px; flex: none; }
  .sk-num { height: 30px; width: 84px; border-radius: 8px; }
  .sk-chip { height: 22px; width: 74px; border-radius: var(--r-pill); }
  .sk-rect { border-radius: var(--r-md); }
  .sk-row { display: flex; align-items: center; gap: 12px; }
  .sk-row .lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
  .sk-stat { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 17px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
  .sk-chart { display: flex; gap: 10px; }
  .sk-chart .y { display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
  .sk-chart .y .sk-line { width: 26px; margin: 0; }
  .sk-chart .plot { flex: 1; height: 150px; }
  .sk-chart-x { display: flex; justify-content: space-between; margin-top: 8px; padding-left: 36px; }
  .sk-chart-x .sk-line { width: 32px; margin: 0; }
  .sk-trow { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
  .sk-trow:last-child { border-bottom: none; }
  .sk-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--faint); margin-top: 4px; }
  .sk-label svg { width: 13px; height: 13px; }
  .ai-actions { display: flex; align-items: center; gap: 10px; padding: 0 18px 16px; }
  .costnote { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); padding: 11px 18px; border-top: 1px solid var(--line); }
  .costnote svg { width: 13px; height: 13px; flex: none; }

  /* 매치 상세(관리, cyan): 원본 피드백 패널 + MVP 집계 */
  .ai-mvp { display: flex; align-items: center; gap: 12px; margin: 16px 18px; padding: 13px 16px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
  .ai-mvp-tx .l { font-size: var(--fs-xs); color: var(--gold-ink); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
  .ai-mvp-tx .n { font-size: var(--fs-lg); font-weight: 600; margin-top: 2px; }
  .ai-mvp-votes { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); text-align: right; }
  .ai-src-list { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
  .ai-fb { display: flex; gap: 11px; padding: 12px 13px; border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 35%, transparent); border: 1px solid var(--line); }
  .ai-fb-main { flex: 1; min-width: 0; }
  .ai-fb-nm { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
  .ai-fb-tx { font-size: var(--fs-base); color: var(--muted); line-height: 1.5; margin-top: 4px; }

  /* ===== changelog / patch notes (C2 — design "Kletoi 패치노트", lime point) ===== */
  /* override global body{overflow:hidden}/html,body{height:100%} so the page scrolls (mirror body.pp) */
  html:has(body.cl) { overflow-x: hidden; }
  body.cl { height: auto; min-height: 100%; overflow: visible; word-break: keep-all; }
  body.cl #root { height: auto; min-height: 100%; }
  body.cl .topbar { position: sticky; }   /* fixed → sticky (in flow), like body.pp */
  @media (max-width: 600px) { body.cl .topbar-nav { display: none; } }
  .cl-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
  @media (max-width: 600px) { .cl-wrap { padding: 0 18px; } }

  .cl-hero { padding: 58px 0 26px; }
  .cl-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--point); }
  .cl-eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--point); }
  .cl-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.6vw, 46px); margin-top: 14px; }
  .cl-lede { font-size: clamp(15px, 1.8vw, 17px); color: var(--muted); line-height: 1.6; margin-top: 14px; max-width: 540px; }

  /* latest highlight */
  .cl-hi { margin-top: 26px; border: 1px solid var(--point-line); border-radius: var(--r-xl); padding: 22px 24px; position: relative; overflow: hidden;
    background: linear-gradient(150deg, color-mix(in srgb, var(--point) 10%, var(--panel)), var(--void)); }
  .cl-hi::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 100% at 100% 0%, var(--point-soft), transparent 70%); pointer-events: none; }
  .cl-hi-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
  .cl-latest { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--point-ink); background: var(--point); padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; }
  .cl-latest svg { width: 12px; height: 12px; }
  .cl-ver { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 700; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); padding: 3px 11px; border-radius: var(--r-pill); white-space: nowrap; }
  .cl-hi-date { font-size: 12.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
  .cl-hi-head { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2.4vw, 24px); margin-top: 14px; line-height: 1.25; text-wrap: balance; }
  .cl-hi-cta { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: var(--fs-base); font-weight: 600; color: var(--point); }
  .cl-hi-cta svg { width: 15px; height: 15px; transition: transform var(--dur-1); }
  .cl-hi-cta:hover svg { transform: translateX(3px); }

  /* timeline head */
  .cl-tlhead { display: flex; align-items: center; gap: 13px; margin: 52px 0 8px; }
  .cl-tlhead h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; white-space: nowrap; }
  .cl-tlhead::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
  .cl-disc { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  .cl-disc svg { width: 14px; height: 14px; color: var(--point); }
  .cl-disc:hover { color: var(--point); }

  /* timeline */
  .cl-timeline { position: relative; margin-top: 26px; padding-left: 30px; }
  .cl-timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--point), var(--line) 30%, var(--line)); }
  .cl-rel { position: relative; margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--void) 50%, transparent); scroll-margin-top: 84px; }
  .cl-rel.latest { border-color: var(--point-line); }
  .cl-rel::before { content: ''; position: absolute; left: -30px; top: 22px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--void-deep); background: var(--line-strong); }
  .cl-rel.latest::before { background: var(--point); box-shadow: 0 0 0 4px var(--point-soft); }
  .cl-rel-h { display: flex; align-items: center; gap: 11px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .cl-date { font-size: 12.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
  .cl-rel-head { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); padding: 14px 20px 4px; line-height: 1.3; }
  .cl-rel-body { padding: 8px 20px 18px; }

  /* type group */
  .cl-grp { margin-top: 14px; }
  .cl-grp:first-child { margin-top: 6px; }
  .cl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 11px 3px 9px; border-radius: var(--r-pill); border: 1px solid transparent; }
  .cl-chip .cl-e { font-size: var(--fs-sm); line-height: 1; }
  .cl-chip--new { color: var(--point); background: var(--point-soft); border-color: var(--point-line); }
  .cl-chip--imp { color: var(--accent); background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 36%, transparent); }
  .cl-chip--fix { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
  .cl-items { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .cl-items li { display: flex; gap: 11px; font-size: var(--fs-md); line-height: 1.55; color: var(--text); }
  .cl-items li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 2px; margin-top: 8px; background: var(--cl-mk, var(--muted)); }
  .cl-grp--new .cl-items li::before { --cl-mk: var(--point); }
  .cl-grp--imp .cl-items li::before { --cl-mk: var(--accent); }
  .cl-grp--fix .cl-items li::before { --cl-mk: var(--ok); }

  /* empty state */
  .cl-empty { margin-top: 26px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 46px 24px; text-align: center; background: color-mix(in srgb, var(--void) 40%, transparent); }
  .cl-empty-ic { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--point-soft); color: var(--point); }
  .cl-empty-ic svg { width: 28px; height: 28px; }
  .cl-empty h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); }
  .cl-empty p { font-size: 13.5px; color: var(--muted); max-width: 380px; margin: 8px auto 0; line-height: 1.55; }

  /* ===== guide (사용법 안내, /guide — design "Kletoi 가이드 장면", lime, E7·G6-1) =====
     공개 스크롤 페이지 → body.cl/pp처럼 전역 overflow:hidden 오버라이드. 좌 탭 레일 + 우 패널
     (scene + 스텝). scene = 활성 스텝 동기화 인터랙티브 목업; scene 프리미티브는 전부 `.gd-scene`
     하위로 스코프(랜딩 .dapp/.av 등과 충돌 방지). 문구는 data-i i18n 슬롯. 전부 토큰. */
  html:has(body.guide) { overflow-x: hidden; }
  body.guide { height: auto; min-height: 100%; overflow: visible; word-break: keep-all; }
  body.guide #root { height: auto; min-height: 100%; }
  body.guide .topbar { position: sticky; }
  @media (max-width: 600px) { body.guide .topbar-nav { display: none; } }

  .gd-hero { max-width: 1080px; margin: 0 auto; padding: 48px 28px 12px; }
  .gd-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--point); }
  .gd-eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--point); }
  .gd-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 42px); margin-top: 14px; }
  .gd-hero p { color: var(--muted); font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; max-width: 560px; margin-top: 12px; }

  .gd-wrap { max-width: 1080px; margin: 0 auto; padding: 14px 28px 90px; display: grid; grid-template-columns: 212px 1fr; gap: 24px; align-items: start; }
  @media (max-width: 860px) { .gd-wrap { grid-template-columns: 1fr; padding: 14px 16px 80px; } }

  .gd-rail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 4px; align-self: start; }
  @media (max-width: 860px) { .gd-rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; } }
  .gd-tab { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent;
    color: var(--muted); font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; cursor: pointer; text-align: left; white-space: nowrap; transition: all var(--dur-1); }
  .gd-tab svg { width: 18px; height: 18px; flex: none; color: var(--faint); transition: color var(--dur-1); }
  .gd-tab:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); transform: translateX(2px); }
  .gd-tab:hover svg { color: var(--accent); }
  .gd-tab.on { background: var(--point-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--point-line); }
  .gd-tab.on svg { color: var(--point); }
  .gd-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .gd-num { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); }
  @media (max-width: 860px) { .gd-num { display: none; } }

  .gd-panel { min-width: 0; }
  .gd-panel-h { margin-bottom: 14px; }
  .gd-panel-h .k { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--point); }
  .gd-panel-h h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 2.6vw, 25px); margin-top: 5px; }

  .gd-body { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .gd-scene-col { position: relative; }
  .gd-scene-wrap { position: relative; border: 1.5px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); background: var(--void); aspect-ratio: 2 / 1; }
  @media (max-width: 520px) { .gd-scene-wrap { aspect-ratio: 4 / 3; } }
  .gd-scene { position: absolute; inset: 0; font-size: var(--fs-sm); animation: gd-fade var(--dur-3) var(--ease-out); }
  @keyframes gd-fade { from { opacity: 0; } to { opacity: 1; } }
  .gd-scene .focus { position: relative; }

  .gd-focus-ring { position: absolute; z-index: 8; pointer-events: none; border: 2.5px solid var(--point); border-radius: 11px;
    box-shadow: 0 0 18px 2px var(--point-glow), inset 0 0 10px var(--point-soft); opacity: 0; display: none; animation: gd-focuspulse 1.7s var(--ease) infinite; }
  .gd-focus-ring.round { border-radius: 999px; }
  @keyframes gd-focuspulse { 0% { opacity: 0; transform: scale(0.88); } 32% { opacity: 1; } 66% { opacity: 0.15; transform: scale(1.14); } 100% { opacity: 0; transform: scale(1.14); } }

  .gd-nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  .gd-navbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--raise); color: var(--text); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: all var(--dur-1); }
  .gd-navbtn:hover:not(:disabled) { border-color: var(--point-line); color: var(--point); transform: translateY(-1px); }
  .gd-navbtn:disabled { opacity: 0.4; cursor: default; }
  .gd-navbtn svg { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease); }
  .gd-navbtn.prev:hover:not(:disabled) svg { transform: translateX(-3px); }
  .gd-navbtn.next { background: var(--point); color: var(--point-ink); border-color: transparent; box-shadow: 0 6px 18px -10px var(--point-glow); }
  .gd-navbtn.next:hover:not(:disabled) { filter: brightness(1.08); color: var(--point-ink); }
  .gd-navbtn.next:not(:disabled) svg { animation: gd-nudge 1.8s var(--ease) infinite; }
  .gd-navbtn.next:hover:not(:disabled) svg { animation: none; transform: translateX(3px); }
  @keyframes gd-nudge { 0%, 60%, 100% { transform: translateX(0); } 78% { transform: translateX(3px); } }
  .gd-dots { display: flex; gap: 6px; margin: 0 6px; }
  .gd-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: all var(--dur-2); }
  .gd-dots i:hover { background: var(--accent); transform: scale(1.25); }
  .gd-dots i.on { background: var(--point); transform: scale(1.2); }

  .gd-steps { display: flex; flex-direction: column; gap: 8px; }
  .gd-step { display: flex; gap: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--void) 50%, transparent); cursor: pointer; transition: all var(--dur-1); text-align: left; width: 100%; font-family: inherit; color: var(--text); }
  .gd-step:hover { border-color: var(--point-line); transform: translateY(-2px); box-shadow: 0 8px 20px -12px var(--point-glow); }
  .gd-step:hover .gd-step-no { border-color: var(--point-line); color: var(--point); }
  .gd-step.on { border-color: var(--point-line); background: var(--point-soft); }
  .gd-step:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--point-soft); }
  .gd-step-no { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); border: 1.5px solid var(--line-strong); color: var(--muted); transition: all var(--dur-1); }
  .gd-step.on .gd-step-no { background: var(--point); color: var(--point-ink); border-color: var(--point); }
  .gd-step-tx { min-width: 0; }
  .gd-step-t { font-size: var(--fs-md); font-weight: 600; }
  .gd-step-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
  .gd-callout { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-xs); padding: 3px 9px; border-radius: 6px; }
  .gd-callout.cmd { color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); }
  .gd-callout.btn { color: var(--accent); background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
  .gd-callout svg { width: 12px; height: 12px; }

  .gd-tip { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 14px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--void) 40%, transparent); font-size: 12.5px; color: var(--muted); }
  .gd-tip svg { width: 15px; height: 15px; flex: none; color: var(--point); }
  .gd-tip b { color: var(--text); }

  /* ---- scene primitives — 전부 .gd-scene 하위로 스코프(랜딩/멤버 .dapp/.av/.track 등과 격리) ---- */
  .gd-scene .av { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; flex: none; font-family: var(--font-ui); }
  /* discord-like frame */
  .gd-scene .dapp { position: absolute; inset: 0; display: grid; grid-template-columns: 46px 150px 1fr; background: var(--void); }
  @media (max-width: 520px) { .gd-scene .dapp { grid-template-columns: 0 110px 1fr; } }
  .gd-scene .dapp-rail { background: color-mix(in srgb, var(--void-deep) 80%, #000); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 9px 0; }
  .gd-scene .dsrv { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--accent); background: var(--panel-2); }
  .gd-scene .dsrv.home { background: var(--point); color: var(--point-ink); }
  .gd-scene .dapp-side { background: color-mix(in srgb, var(--void) 90%, #000); padding: 8px 7px; min-width: 0; overflow: hidden; }
  .gd-scene .dcat { display: flex; align-items: center; gap: 5px; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 8px 6px 4px; }
  .gd-scene .dch { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 6px; color: var(--muted); white-space: nowrap; font-size: 11.5px; transition: background var(--dur-2), color var(--dur-2); }
  .gd-scene .dch svg, .gd-scene .dcat svg { width: 13px; height: 13px; flex: none; opacity: .7; }
  .gd-scene .dch.spawn { color: var(--point); }
  .gd-scene .dch.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
  .gd-scene .docc { display: flex; align-items: center; gap: 5px; padding: 2px 7px 2px 22px; font-size: 10.5px; color: var(--muted); }
  .gd-scene .docc .av { width: 15px; height: 15px; font-size: 8px; }
  .gd-scene .dapp-main { background: color-mix(in srgb, var(--void) 72%, var(--void-deep)); padding: 12px; min-width: 0; display: flex; flex-direction: column; }
  .gd-scene .dmsg { display: flex; gap: 8px; }
  .gd-scene .dmsg-av { width: 30px; height: 30px; flex: none; }
  .gd-scene .dbot-name { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 5px; }
  .gd-scene .dbot-tag { font-size: 8px; font-weight: 700; background: var(--point); color: var(--point-ink); padding: 0 4px; border-radius: 3px; }
  .gd-scene .dembed { margin-top: 5px; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--void-deep) 45%, transparent); border-radius: 5px; padding: 8px 10px; }
  .gd-scene .dembed-t { font-size: 11.5px; font-weight: 700; }
  .gd-scene .dbtns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  .gd-scene .dbtn { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 5px; background: var(--primary); color: #fff; transition: all var(--dur-2); }
  .gd-scene .dbtn.lit { background: var(--point); color: var(--point-ink); box-shadow: 0 0 0 2px var(--point-line); }
  .gd-scene .dbtn.sec { background: color-mix(in srgb, var(--void-deep) 50%, var(--panel-2)); color: var(--text); }
  .gd-scene .dbtn svg { width: 11px; height: 11px; }
  .gd-scene .dctx { position: relative; margin: 9px 0 0 38px; width: 150px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-2); padding: 5px; }
  .gd-scene .dctx-i { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 5px; font-size: var(--fs-xs); color: var(--text); }
  .gd-scene .dctx-i.prem { color: var(--gold); }
  .gd-scene .dctx-i .pt { margin-left: auto; font-size: 8px; background: color-mix(in srgb, var(--gold) 16%, transparent); padding: 0 4px; border-radius: 3px; }
  .gd-scene .dctx-i svg { width: 12px; height: 12px; }
  /* web console frame */
  .gd-scene .webf { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--void); }
  .gd-scene .webf-top { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 50%, transparent); }
  .gd-scene .webf-dot { width: 9px; height: 9px; border-radius: 50%; }
  .gd-scene .webf-url { margin-left: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
  .gd-scene .webf-body { flex: 1; padding: 14px; min-height: 0; }
  .gd-scene .wcard { border: 1px solid var(--line-strong); border-radius: 10px; background: color-mix(in srgb, var(--void) 50%, transparent); padding: 13px 15px; }
  .gd-scene .wcard + .wcard { margin-top: 9px; }
  .gd-scene .wlabel { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .gd-scene .wsel { display: flex; align-items: center; gap: 8px; margin-top: 7px; height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--raise); font-size: var(--fs-sm); }
  .gd-scene .wsel.lit { border-color: var(--point); box-shadow: 0 0 0 3px var(--point-soft); }
  .gd-scene .wsel .chev { margin-left: auto; color: var(--faint); }
  .gd-scene .wsel svg { width: 14px; height: 14px; color: var(--point); }
  .gd-scene .wchk { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: var(--fs-sm); }
  .gd-scene .wchk:not(:last-child) { border-bottom: 1px solid var(--line); }
  .gd-scene .wchk-b { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
  .gd-scene .wchk-b svg { width: 11px; height: 11px; }
  .gd-scene .wchk-b.todo { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--faint); }
  .gd-scene .wbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 8px; background: var(--point); color: var(--point-ink); font-weight: 700; font-size: var(--fs-sm); }
  .gd-scene .wbtn svg { width: 13px; height: 13px; }
  .gd-scene .wperm { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 6px; font-size: var(--fs-sm); transition: all var(--dur-2); }
  .gd-scene .wperm.lit { border-color: var(--point-line); background: var(--point-soft); }
  .gd-scene .wperm svg { width: 14px; height: 14px; flex: none; }
  .gd-scene .wperm .lvl { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
  .gd-scene .wtoggle { width: 34px; height: 19px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 28%, transparent); position: relative; flex: none; transition: background var(--dur-2); }
  .gd-scene .wtoggle .kn { position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left var(--dur-2); }
  .gd-scene .wtoggle.on { background: var(--point); }
  .gd-scene .wtoggle.on .kn { left: 17px; background: var(--point-ink); }
  /* match builder */
  .gd-scene .mbuild { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .gd-scene .mteams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; flex: 1; min-height: 0; }
  .gd-scene .mteam { border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--void) 50%, transparent); padding: 7px; display: flex; flex-direction: column; gap: 4px; }
  .gd-scene .mteam.a { border-top: 2px solid var(--point); }
  .gd-scene .mteam.b { border-top: 2px solid var(--accent); }
  .gd-scene .mslot { display: flex; align-items: center; gap: 6px; font-size: 10.5px; padding: 3px 5px; border-radius: 5px; background: color-mix(in srgb, var(--void-deep) 30%, transparent); }
  .gd-scene .mslot .lane { color: var(--accent); width: 14px; text-align: center; }
  .gd-scene .mslot .av { width: 18px; height: 18px; font-size: 9px; }
  .gd-scene .mslot .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gd-scene .mvs { display: flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
  .gd-scene .mbal { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); }
  .gd-scene .mbalbar { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--void-deep) 50%, transparent); overflow: hidden; position: relative; }
  .gd-scene .mbalbar i { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--point); transform: translateX(-50%); }
  .gd-scene .mbalbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--point), var(--accent)); }
  .gd-scene .mdm { border: 1px solid var(--point-line); border-radius: 8px; background: var(--point-soft); padding: 9px 11px; }
  .gd-scene .mdm-t { font-size: 11.5px; font-weight: 700; }
  .gd-scene .mresult { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); }
  .gd-scene .mwin { color: var(--point); font-weight: 700; }
  .gd-scene .mrating { font-family: var(--font-mono); color: var(--ok); font-weight: 700; }
  /* riot connect */
  .gd-scene .riot { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; }
  .gd-scene .riotcard { width: min(320px, 90%); border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-2); padding: 16px; }
  .gd-scene .riot-h { display: flex; align-items: center; gap: 9px; font-size: var(--fs-base); font-weight: 600; }
  .gd-scene .riot-h svg { width: 18px; height: 18px; color: var(--point); }
  .gd-scene .riot-in { display: flex; gap: 6px; margin-top: 11px; }
  .gd-scene .riot-f { flex: 1; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--raise); display: flex; align-items: center; padding: 0 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text); }
  .gd-scene .riot-f.ph { color: var(--muted); }
  .gd-scene .riot-hash { display: flex; align-items: center; color: var(--muted); font-weight: 700; }
  .gd-scene .riot-btn { height: 34px; padding: 0 13px; border-radius: 8px; background: var(--point); color: var(--point-ink); font-weight: 700; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 5px; }
  .gd-scene .riot-btn svg { width: 13px; height: 13px; }
  .gd-scene .riot-linked { display: flex; align-items: center; gap: 11px; margin-top: 11px; padding: 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
  .gd-scene .riot-sumav { width: 38px; height: 38px; border-radius: 9px; background: var(--point-soft); color: var(--point); display: grid; place-items: center; }
  .gd-scene .riot-sumav svg { width: 20px; height: 20px; }
  .gd-scene .riot-id { font-size: var(--fs-base); font-weight: 700; }
  .gd-scene .vbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); padding: 2px 7px; border-radius: 99px; }
  .gd-scene .vbadge svg { width: 10px; height: 10px; }
  /* ranks */
  .gd-scene .ranks { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
  .gd-scene .mileage-top { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
  .gd-scene .mbar2 { height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--void-deep) 50%, transparent); overflow: hidden; }
  .gd-scene .mbar2 span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--point), var(--accent)); transition: width var(--dur-3) var(--ease); }
  .gd-scene .track { display: flex; justify-content: space-between; gap: 6px; }
  .gd-scene .tnode { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; opacity: .5; transition: opacity var(--dur-2), transform var(--dur-2); }
  .gd-scene .tnode.cur { opacity: 1; transform: scale(1.08); }
  .gd-scene .tnode.cur .tmedal { box-shadow: 0 0 0 3px var(--point-soft); border-color: var(--point); }
  .gd-scene .tmedal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; border: 1.5px solid var(--line-strong); background: color-mix(in srgb, var(--void) 50%, transparent); }
  .gd-scene .tname { font-size: 9px; color: var(--muted); }
  .gd-scene .tnode.cur .tname { color: var(--point); font-weight: 700; }
  .gd-scene .lbrow { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 8px; font-size: 11.5px; border: 1px solid var(--line); }
  .gd-scene .lbrow.me { border-color: var(--point-line); background: var(--point-soft); box-shadow: inset 3px 0 0 var(--point); }
  .gd-scene .lbrow .rk { font-family: var(--font-mono); font-weight: 700; color: var(--muted); width: 18px; }
  .gd-scene .lbrow .av { width: 22px; height: 22px; font-size: 10px; }
  .gd-scene .lbrow .nm { flex: 1; font-weight: 600; }
  .gd-scene .lbrow .rt { font-family: var(--font-mono); color: var(--muted); }

  /* Kleos 탭 scene (의뢰 #41, O·4-guide) — gk-* 스코프(전역 .coin/.scene 충돌 회피). Kleos
     코인은 가이드 lime 속에서도 coral 정체색(var(--kleos)) 고정, 나머지 강조는 point(lime). */
  .gks { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
  .gk-coin { border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none;
    background: radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, #fff 40%, var(--kleos)), var(--kleos));
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--kleos) 70%, transparent); }
  .gk-coin svg { width: 58%; height: 58%; color: #fff; opacity: 0.92; }
  .gk-room { display: flex; align-items: center; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: color-mix(in srgb, var(--panel) 55%, transparent); }
  .gk-room .av { margin-left: -10px; box-shadow: 0 0 0 2.5px var(--void-deep); }
  .gk-room .av:first-child { margin-left: 0; }
  .gk-rlbl { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); margin-left: 9px; display: flex; align-items: center; gap: 7px; }
  .gk-wave { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
  .gk-coins { display: flex; gap: 12px; }
  .gk-accrue { font-family: var(--font-mono); font-weight: 700; font-size: 28px; color: var(--kleos); display: flex; align-items: baseline; gap: 6px; }
  .gk-accrue small { font-size: var(--fs-lg); color: var(--muted); font-weight: 400; }
  .gk-rows { display: flex; flex-direction: column; gap: 11px; width: min(420px, 100%); }
  .gk-row { display: flex; align-items: center; gap: 13px; padding: 11px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--panel) 50%, transparent); }
  .gk-ri { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; }
  .gk-ri svg { width: 19px; height: 19px; }
  .gk-ri.plus { color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); }
  .gk-ri.minus { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
  .gk-rt { flex: 1; font-size: var(--fs-md); }
  .gk-rt small { display: block; color: var(--faint); font-family: var(--font-mono); font-size: var(--fs-xs); margin-top: 2px; }
  .gk-rd { font-family: var(--font-mono); font-weight: 700; font-size: 19px; }
  .gk-rd.pos { color: var(--point); } .gk-rd.neg { color: var(--danger); }
  .gk-card { width: min(360px, 100%); border: 1px solid var(--point-line); border-radius: var(--r-lg); padding: 19px 22px;
    background: linear-gradient(150deg, var(--point-soft), color-mix(in srgb, var(--panel) 70%, transparent)); }
  .gk-ctop { display: flex; align-items: center; gap: 11px; }
  .gk-clbl { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--point); }
  .gk-cbal { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
  .gk-cbal .v { font-family: var(--font-mono); font-weight: 700; font-size: 42px; line-height: 1; }
  .gk-cbal .u { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--kleos); }
  .gk-crank { margin-top: 13px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); color: var(--muted); padding: 6px 14px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--void-deep) 35%, transparent); border: 1px solid var(--line); }
  .gk-crank b { color: var(--text); font-family: var(--font-mono); }
  .gk-bars { display: flex; align-items: flex-end; gap: 10px; height: 86px; }
  .gk-bars b { width: 26px; border-radius: 6px 6px 0 0; display: block; background: linear-gradient(180deg, var(--kleos), color-mix(in srgb, var(--kleos) 30%, transparent)); }
  .gk-bars b.fade { opacity: 0.4; background: linear-gradient(180deg, var(--muted), transparent); }
  .gk-reset { display: flex; align-items: center; gap: 10px; padding: 10px 17px; border: 1px dashed var(--point-line); border-radius: var(--r-pill); font-size: var(--fs-base); color: var(--text); background: var(--point-soft); }
  .gk-reset svg { width: 18px; height: 18px; color: var(--point); flex: none; }
  .gk-reset b { color: var(--point); }
  .gk-cap { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); text-align: center; }

  /* ===== 시즌 결산 공유 페이지 (/s/season — 의뢰 #30, coral) — 생성 OG PNG 임베드 + CTA ===== */
  html:has(body.sharepg) { overflow-x: hidden; }
  body.sharepg { height: auto; min-height: 100%; overflow: visible; }
  body.sharepg #root { height: auto; min-height: 100%; }
  body.sharepg .topbar { position: sticky; }
  .share-hero { max-width: 760px; margin: 0 auto; padding: 40px 22px 72px; text-align: center; }
  .share-cardwrap { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
  .share-cardimg { display: block; width: 100%; height: auto; }
  .share-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 30px); margin-top: 28px; }
  .share-sub { color: var(--muted); font-size: var(--fs-md); line-height: 1.6; margin-top: 10px; }
  .share-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

  /* ============================================================
     WHEN2MEET — 가용 시간 투표 (§Y·2, 의뢰 #46) — 멤버 투표면(coral) + 콘솔 폴 생성(cyan).
     셀 강조는 페이지 point 농도(color-mix). day×time 그리드는 availability.js가 뷰어 tz로 채운다.
     ============================================================ */
  /* --- when2meet 그리드 (멤버 페인트 · JS가 gridTemplateColumns를 슬롯 수로 세팅) --- */
  .w2m-scroll { overflow-x: auto; padding-bottom: 6px; }
  .w2m { display: grid; grid-template-columns: auto repeat(5, minmax(46px, 1fr)); gap: 4px; min-width: 0; }
  .w2m:empty { display: none; }
  .w2m .colh { text-align: center; padding: 6px 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
  .w2m .rowh { display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
  .cell { height: 34px; border-radius: 6px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 22%, transparent); transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
  .cell[data-slot] { cursor: pointer; }
  .cell[data-slot]:hover { border-color: var(--point-line); transform: scale(1.05); z-index: 2; }
  .cell--void { background: transparent; border-color: transparent; cursor: default; }
  .cell.yes { background: var(--point); border-color: var(--point); }
  .cell.maybe { background: color-mix(in srgb, var(--point) 42%, transparent); border-color: var(--point-line); }
  .cell.no { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: color-mix(in srgb, var(--danger) 34%, transparent); }

  /* --- 페인트 툴바 (멤버) --- */
  .paint { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
  .paint-l { font-size: var(--fs-sm); color: var(--muted); }
  .paintbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; }
  .paintbtn .sw { width: 13px; height: 13px; border-radius: 4px; }
  .paintbtn.on { color: var(--text); border-color: var(--point-line); background: var(--point-soft); }
  .paintbtn[data-p="yes"] .sw { background: var(--point); }
  .paintbtn[data-p="maybe"] .sw { background: color-mix(in srgb, var(--point) 42%, transparent); }
  .paintbtn[data-p="no"] .sw { background: color-mix(in srgb, var(--danger) 40%, transparent); }

  /* --- 저장 바 · 저장됨 표시 (멤버) --- */
  .avbar { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
  .avbar-prog { font-size: var(--fs-sm); color: var(--muted); }
  .av-saved { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ok); }
  .av-saved svg { width: 13px; height: 13px; }
  .av-hint { font-size: var(--fs-sm); color: var(--faint); margin-top: 14px; }

  /* --- 무JS/접근성 폴백: 슬롯별 라디오 리스트 (JS 활성 시 숨김) --- */
  .av-enhanced .av-list { display: none; }
  .av-list { display: flex; flex-direction: column; gap: 8px; }
  .av-slot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: color-mix(in srgb, var(--panel-2) 16%, transparent); }
  .av-slot-t { font-weight: 600; font-size: var(--fs-md); min-width: 150px; }
  .av-slot-opts { display: flex; gap: 8px; flex-wrap: wrap; }
  .av-opt { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
  .av-opt input:disabled { cursor: default; }

  /* --- 멤버 매치 상세의 '투표 열림' CTA --- */
  .av-cta { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 15px 18px; border-radius: var(--r-md); border: 1px solid var(--point-line); background: var(--point-soft); color: var(--text); text-decoration: none; transition: border-color var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); }
  .av-cta:hover { filter: brightness(1.04); border-color: var(--point); }
  .av-cta-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--point-ink); background: var(--point); }
  .av-cta-ic svg { width: 20px; height: 20px; }
  .av-cta-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .av-cta-tx b { font-size: var(--fs-md); font-weight: 600; }
  .av-cta-tx span { font-size: var(--fs-sm); color: var(--muted); }
  .av-cta-go { color: var(--muted); flex: none; }
  .av-cta-go svg { width: 18px; height: 18px; }

  /* --- 뷰어 tz 힌트 --- */
  .tznote { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); }
  .tznote svg { width: 13px; height: 13px; }

  /* --- 콘솔 폴 생성: 후보 칩 + 피커 + 저장 바 (cyan) --- */
  .cand-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .cand { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--point-line); background: var(--point-soft); font-size: var(--fs-md); }
  .cand .cd { font-weight: 600; }
  .cand-x { width: 20px; height: 20px; border-radius: 6px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
  .cand-x:hover { color: var(--danger); }
  .cand--empty { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--faint); }
  .poll-picker { margin-top: 4px; max-width: 360px; }
  .poll-savebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  .poll-roster { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); }
  .poll-roster svg { width: 15px; height: 15px; }

  /* --- 집계 히트맵 (콘솔, PR2) — 가능 인원 농도(point) + 최적/확정/선택 강조 --- */
  .heat .cell { cursor: default; position: relative; }
  .heat .cell[data-v="0"] { background: color-mix(in srgb, var(--panel-2) 18%, transparent); }
  .heat .cell[data-v="1"] { background: color-mix(in srgb, var(--point) 16%, transparent); border-color: color-mix(in srgb, var(--point) 24%, transparent); }
  .heat .cell[data-v="2"] { background: color-mix(in srgb, var(--point) 30%, transparent); border-color: color-mix(in srgb, var(--point) 36%, transparent); }
  .heat .cell[data-v="3"] { background: color-mix(in srgb, var(--point) 46%, transparent); border-color: color-mix(in srgb, var(--point) 50%, transparent); }
  .heat .cell[data-v="4"] { background: color-mix(in srgb, var(--point) 64%, transparent); border-color: var(--point-line); }
  .heat .cell[data-v="5"] { background: var(--point); border-color: var(--point); }
  .heat .cell--void { background: transparent; border-color: transparent; }
  .heat .cell .cn { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: color-mix(in srgb, var(--text) 82%, var(--point)); }
  .heat .cell[data-v="4"] .cn, .heat .cell[data-v="5"] .cn { color: var(--point-ink); }
  .heat .cell.best { box-shadow: 0 0 0 2px var(--point), 0 0 14px -2px var(--point); z-index: 3; }
  .heat .cell.best::before { content: '★'; position: absolute; top: -9px; right: -5px; font-size: 12px; color: var(--point); z-index: 4; }
  .heat .cell.confirmed { box-shadow: 0 0 0 2px var(--ok); }
  .heat .cell.sel { outline: 2px solid var(--point); outline-offset: 1px; z-index: 2; }

  .hleg { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; }
  .hleg .scale { display: flex; gap: 3px; }
  .hleg .scale i { width: 20px; height: 13px; border-radius: 3px; border: 1px solid var(--line); }
  .hleg .scale i:nth-child(1) { background: color-mix(in srgb, var(--panel-2) 18%, transparent); }
  .hleg .scale i:nth-child(2) { background: color-mix(in srgb, var(--point) 20%, transparent); }
  .hleg .scale i:nth-child(3) { background: color-mix(in srgb, var(--point) 38%, transparent); }
  .hleg .scale i:nth-child(4) { background: color-mix(in srgb, var(--point) 60%, transparent); }
  .hleg .scale i:nth-child(5) { background: var(--point); }
  .hleg-star { margin-left: auto; color: var(--point); }

  .best-box { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 15px 18px; border-radius: var(--r-md); border: 1px solid var(--point-line); background: var(--point-soft); }
  .best-box.is-confirmed { border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
  .best-box .bi { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--point-ink); background: var(--point); }
  .best-box.is-confirmed .bi { background: var(--ok); color: #fff; }
  .best-box .bi svg { width: 21px; height: 21px; }
  .best-box .bt { flex: 1; min-width: 0; }
  .best-box .bt .d { font-size: var(--fs-lg); font-weight: 600; }
  .best-box .bt .r { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
  .best-box .bt .r b { color: var(--point); }
  .best-box .bt .r .hint { color: var(--faint); }

  .voters { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .voters .vl { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
  .voters .vl--miss { color: var(--faint); }

  @media (prefers-reduced-motion: reduce) {
    .cell[data-slot]:hover { transform: none; }
  }
  @media (max-width: 560px) {
    .av-slot-t { min-width: 0; }
  }

  /* ============================================================
     REDUCED MOTION — WCAG 2.3.3 완화 정책 (의뢰 #18 · Kletoi 디자인 시스템 핸드오프 이식)
     전면차단(`* { transition/animation:none }`)을 폐기하고, 어지럼 유발 모션만 끈다.
     OS/브라우저 "동작 줄이기" + 저전력/배터리 절약 모드 사용자 대상(작지 않은 비율).
       KEEP   : 버튼 press · 테마/색 크로스페이드 · 체크/스위치 페이드 · 작은 hover (그대로 둠)
       REDUCE : 드롭다운/팝오버/모달 등장(페이드 유지·이동 제거) · reveal(아래 랜딩 블록)
       REMOVE : 사이드바 폭 슬라이드 · 셰브론 회전 · 로고/플래그 확대 · 스피너/시머/floaty 루프 · smooth scroll
     불문율: 가시성 직결(opacity)엔 페이드를 남기고 transform만 무력화 → '투명한 채 멈춤' 방지.
     ⚠️ 이 블록은 모든 @keyframes(dd-in 1097 · mmod-in · fbpop · sk-shimmer) 정의 뒤에 와야
        dd-in/mmod-in/fbpop 재정의가 적용된다(@keyframes는 문서순 마지막 정의가 이김).
     프로덕션 적응: showcase 전용 .dsc-mini·[data-autoplay] 미반영(랜딩 자동재생/smooth는
        landing.js가 이미 reduce를 JS로 처리). mmod-in·fbpop·.sk는 디자인 산출엔 없는
        프로덕션 전용 모션 — 옛 nuclear가 죽이던 것이라 회귀 방지로 함께 완화.
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    /* 0) smooth scroll → 즉시 (.dapp-scroll은 920px no-preference 블록에서 이미 게이트) */
    html, .ds-main, .gcontent { scroll-behavior: auto !important; }

    /* 1) 사이드바 폭 슬라이드 → 즉시 (색/경계 전이는 유지) */
    .ds { transition-property: background-color, color, border-color !important; }

    /* 2) 셰브론/캐럿 회전 전이 제거 — 최종 각도(180°) 상태는 유지 */
    .ds-collapse svg, .gear .cog, .gear .gchev, .gsrv-chev,
    .langpick-trigger .chev, .dscal-title .tcaret, .cal-caret svg { transition: none !important; }

    /* 3) 로고/플래그 hover 확대 제거 — 색/배경 hover는 유지 */
    .ds-logo { transition: background-color var(--dur-1) var(--ease) !important; }
    .ds-logo:hover, .ds-logo:active { transform: none !important; }
    .langpick-trigger .flag { transition: none !important; }
    .langpick-trigger:hover .flag { transform: none !important; }

    /* 4) 드롭다운·팝오버·모달 등장 → 페이드만(이동·확대 제거). dd-in 소비처 전체(드롭다운/
       메뉴/캘린더 피커/매치 모달 스크림) + 설정 팝오버 + 매치 모달 본체 일괄. */
    .set-pop, .cal-pop { transition: opacity var(--dur-2) var(--ease-out) !important; transform: none !important; }
    @keyframes dd-in  { from { opacity: 0; } }
    @keyframes mmod-in { from { opacity: 0; } }
    @keyframes fbpop  { from { opacity: 0; } }

    /* 5) 무한 루프 정지(스피너·스켈레톤 시머; .hero-emb floaty는 아래 랜딩 블록에서 처리) */
    .btn .spin { animation: none !important; }
    .sk::after { animation: none !important; opacity: 0; }   /* #59 shimmer는 ::after 오버레이 */

    /* 6) 페이지 전환 뷰 트랜지션 → 즉시(크로스페이드 제거). 네비게이션 자체는 유지. */
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }

  /* ============================================================
     챔피언 드래프트 보드 (GX·2, 디자인 #51, cyan) — guild_draft.html + _draft_board.html.
     신규색 0(토큰/color-mix만). 팀 색 --t1/--t2 = primary/danger(매치 도메인 관례).
     픽 슬롯 이미지 = DDragon 로딩스크린 아트 cover-crop(핸드오프 42px 스퀘어 적응),
     그리드/밴 = 스퀘어 아이콘. 모션은 no-preference 게이트 안에서만.
     ============================================================ */
  .draft-board {
    --t1: var(--primary); --t2: var(--danger);
    --t1-soft: color-mix(in srgb, var(--t1) 15%, transparent); --t1-line: color-mix(in srgb, var(--t1) 46%, transparent);
    --t2-soft: color-mix(in srgb, var(--t2) 15%, transparent); --t2-line: color-mix(in srgb, var(--t2) 46%, transparent);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    box-shadow: var(--shadow-2); overflow: hidden; margin-top: 18px;
  }
  /* top: 매치 라벨 + 페이즈/스텝 배지 + (우측) 소프트 타이머 · 취소 */
  .draft-board .draft-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .draft-board .dmt { font-size: var(--fs-xs); color: var(--muted); }
  .draft-board .dtop-sp { flex: 1; }
  .draft-board .step-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); padding: 5px 13px; border-radius: var(--r-pill); }
  .draft-board .step-badge small { font-weight: 400; color: var(--muted); }
  .draft-board .dtimer { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-2xl); padding: 5px 15px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); flex: none; }
  .draft-board .dtimer svg { width: 16px; height: 16px; color: var(--muted); }
  .draft-board .dtimer .soft { font-family: var(--font-ui); font-weight: 400; font-size: 10.5px; color: var(--faint); }
  .draft-board .dtimer.over { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
  .draft-board .dtimer.over svg { color: var(--warn); }

  /* main 3열 — 좌 팀1 / 중앙 그리드 / 우 팀2 */
  .draft-board .draft-main { display: grid; grid-template-columns: 230px 1fr 230px; }
  .draft-board .team-col { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .draft-board .team-col.t1 { border-right: 1px solid var(--line); }
  .draft-board .team-col.t2 { border-left: 1px solid var(--line); }
  .draft-board .team-h { display: flex; align-items: center; gap: 9px; padding: 4px 4px 2px; }
  .draft-board .team-h .tn { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); }
  .draft-board .tdot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
  .draft-board .t1 .tdot { background: var(--t1); }
  .draft-board .t2 .tdot { background: var(--t2); }
  .draft-board .turnlbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); margin-left: auto; }
  .draft-board .team-col.t1 .turnlbl { color: var(--t1); background: var(--t1-soft); border: 1px solid var(--t1-line); }
  .draft-board .team-col.t2 .turnlbl { color: var(--t2); background: var(--t2-soft); border: 1px solid var(--t2-line); }
  .draft-board .team-col.turn.t1 { background: linear-gradient(180deg, var(--t1-soft), transparent 60%); box-shadow: inset 0 2px 0 var(--t1); }
  .draft-board .team-col.turn.t2 { background: linear-gradient(180deg, var(--t2-soft), transparent 60%); box-shadow: inset 0 2px 0 var(--t2); }
  .draft-board .team-cap { display: flex; align-items: center; gap: 7px; padding: 0 4px 4px; font-size: var(--fs-sm); color: var(--muted); }
  .draft-board .team-cap .cap-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 픽 슬롯 — 로딩 아트 cover-crop(초상 상단부) */
  .draft-board .pick { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--void-deep) 26%, transparent); min-height: 58px; }
  .draft-board .pick .ch { width: 42px; height: 42px; border-radius: 10px; flex: none; overflow: hidden; display: block; background: var(--panel-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); }
  .draft-board .pick .ch img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
  .draft-board .pick .pmeta { min-width: 0; }
  .draft-board .pick .pnm { font-size: var(--fs-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .draft-board .pick.empty { border-style: dashed; }
  .draft-board .pick.empty .pnm { color: var(--faint); font-weight: 400; font-style: italic; }
  .draft-board .pick .ch--empty { background: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .draft-board .pick.cur { border-color: var(--point); box-shadow: 0 0 0 1px var(--point), 0 0 16px -4px var(--point); }

  /* 밴 트레이 — 그레이스케일 + 빗금, 스킵 = 해칭 */
  .draft-board .bans-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; padding: 6px 4px 0; }
  .draft-board .bans { display: flex; gap: 6px; padding: 2px 4px; }
  /* 밴 슬롯 오버플로 수정(§GX·9). ★근본 원인 = 빈 슬롯 `.bn.empty` 가 전역 empty-state 클래스
     `.empty{padding:40px 20px}`(app.css:379)를 물려받아 border-box 에서 42×82 로 부풀어(패딩>선언크기)
     팀 컬럼(230px)을 넘김 — `.pick`은 자체 padding 이 있어 무사, `.bn`만 노출. → `padding:0` 으로
     전역 empty 패딩 차단. 더해서 좁으면 너비만 균등 축소(flex-shrink), 높이 34px 고정으로 방어.
     요약(.done-bans 26px)·모바일(28px)은 flex:none 유지. */
  .draft-board .bn { flex: 0 1 34px; min-width: 0; height: 34px; padding: 0; border-radius: 8px; position: relative; overflow: hidden; }
  .draft-board .bn img.ch { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; filter: grayscale(.75) brightness(.72); display: block; }
  .draft-board .bn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 46%, var(--danger) 47%, var(--danger) 53%, transparent 54%); opacity: .85; }
  .draft-board .bn.empty { border: 1.5px dashed var(--line-strong); }
  .draft-board .bn.empty::after { content: none; }
  .draft-board .bn.skip { border: 1.5px solid var(--line); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--faint) 30%, transparent) 5px 9px); }
  .draft-board .bn.skip::after { content: none; }
  .draft-board .bn.cur { border: 1.5px solid var(--point); box-shadow: 0 0 10px -2px var(--point); }

  /* 중앙 — 검색 + 챔피언 그리드. 전역 .gsearch의 flex:1은 가로 툴바용 — 세로 flex인
     .center에선 세로로 자라 검색 박스가 거대해지므로 상쇄(폭도 그리드 전폭). */
  .draft-board .center { padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; }
  .draft-board .center .gsearch { margin-bottom: 14px; flex: none; max-width: none; }
  .draft-board .champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; overflow-y: auto; max-height: 430px; padding: 2px; }
  .draft-board .cg { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; border-radius: var(--r-sm); padding: 7px 4px; border: 1px solid transparent; position: relative; background: none; font-family: inherit; color: inherit; }
  /* display:flex가 UA [hidden]을 이겨 검색 필터(b.hidden)·선택 정보·피어리스 노트 토글이
     무력화되는 것 방지 — .gempty[hidden] 선례와 동일한 카운터 규칙. */
  .draft-board .cg[hidden], .draft-board .actbar .selinfo[hidden], .dstart-b .fearless-note[hidden] { display: none; }
  .draft-board .cg img.ch { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; display: block; background: var(--panel-3); transition: transform var(--dur-1); }
  .draft-board .cg:hover { border-color: var(--point-line); background: var(--point-soft); }
  .draft-board .cg:hover img.ch { transform: scale(1.05); }
  .draft-board .cg .cn { font-size: var(--fs-xs); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .draft-board .cg.selected { border-color: var(--point); background: var(--point-soft); box-shadow: 0 0 0 1px var(--point); }
  .draft-board .cg.selected .cn { color: var(--point); font-weight: 700; }
  /* 사용불가 — 세션 밴/픽(빗금) vs 피어리스(⛓ + title 툴팁). pointer-events 유지(툴팁). */
  .draft-board .cg.used { cursor: not-allowed; }
  .draft-board .cg.used img.ch { filter: grayscale(1) brightness(.5); }
  .draft-board .cg.used:hover { border-color: transparent; background: none; }
  .draft-board .cg.used:hover img.ch { transform: none; }
  .draft-board .cg.used .cn { color: var(--faint); }
  .draft-board .cg.used.session::after { content: ''; position: absolute; top: 7px; left: calc(50% - 28px); width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(to top right, transparent 45%, var(--danger) 47%, var(--danger) 53%, transparent 55%); opacity: .7; }
  .draft-board .cg.used.fearless::after { content: '⛓'; position: absolute; top: 4px; right: 8px; font-size: var(--fs-base); opacity: .9; }
  .draft-board .cg.used.fearless img.ch { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent); }
  .draft-board .grid-fallback { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--warn) 46%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 8%, transparent); font-size: var(--fs-base); color: var(--muted); }
  .draft-board .grid-fallback svg { width: 16px; height: 16px; color: var(--warn); flex: none; }

  /* 캡틴 액션바 — 선택 → 확정 2단계(+ 밴 스킵). 한 줄 유지, 좁은 폭에서 힌트 숨김. */
  .draft-board .actbar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 30%, transparent); flex-wrap: nowrap; min-width: 0; }
  .draft-board .actbar .selinfo { display: flex; align-items: center; gap: 9px; font-size: var(--fs-base); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .draft-board .actbar .selinfo img.ch { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: none; }
  .draft-board .actbar .selinfo b { color: var(--point); }
  .draft-board .actbar .hint { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
  .draft-board .actbar .btn { white-space: nowrap; flex: none; }
  .draft-board .actbar form { display: flex; align-items: center; gap: 8px; }
  .draft-board .actbar .input { width: 130px; }

  /* 관전 스트립 — LIVE 도트 */
  .draft-board .spec-strip { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void-deep) 30%, transparent); font-size: var(--fs-sm); color: var(--muted); }
  .draft-board .spec-strip .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--point); }
  .draft-board .spec-strip .live .d { width: 8px; height: 8px; border-radius: 50%; background: var(--point); }

  /* 완료 — 최종 조합 2열 + 푸터 */
  .draft-board .done-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px; }
  .draft-board .done-team { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
  .draft-board .done-team.t1 { border-top: 3px solid var(--t1); }
  .draft-board .done-team.t2 { border-top: 3px solid var(--t2); }
  .draft-board .done-team .th { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); }
  .draft-board .done-picks { display: flex; flex-direction: column; gap: 8px; }
  .draft-board .done-picks .pick { min-height: 52px; }
  .draft-board .done-bans { margin-top: 12px; padding: 0; }
  .draft-board .done-bans .bn { flex: none; width: 26px; height: 26px; aspect-ratio: auto; }
  .draft-board .done-foot { display: flex; justify-content: center; gap: 10px; padding: 0 20px 20px; flex-wrap: wrap; }

  /* 모션 — 현 차례 강조(숨쉬는 글로우), reduce에선 정적 유지 */
  @media (prefers-reduced-motion: no-preference) {
    .draft-board .bn.cur, .draft-board .pick.cur { animation: draftSlotPulse 1.5s ease-in-out infinite; }
    @keyframes draftSlotPulse {
      0%, 100% { box-shadow: 0 0 6px -2px var(--point), 0 0 0 1px var(--point); }
      50% { box-shadow: 0 0 18px 0 var(--point), 0 0 0 1.5px var(--point); }
    }
    .draft-board .team-col.turn.t1 { animation: draftTurnGlow1 2.2s ease-in-out infinite; }
    .draft-board .team-col.turn.t2 { animation: draftTurnGlow2 2.2s ease-in-out infinite; }
    @keyframes draftTurnGlow1 { 0%, 100% { box-shadow: inset 0 2px 0 var(--t1); } 50% { box-shadow: inset 0 4px 14px -6px var(--t1), inset 0 3px 0 var(--t1); } }
    @keyframes draftTurnGlow2 { 0%, 100% { box-shadow: inset 0 2px 0 var(--t2); } 50% { box-shadow: inset 0 4px 14px -6px var(--t2), inset 0 3px 0 var(--t2); } }
    .draft-board .team-col.turn .turnlbl { animation: draftLblPulse 1.5s ease-in-out infinite; }
    @keyframes draftLblPulse { 50% { opacity: .55; } }
    .draft-board .spec-strip .live .d { animation: draftLivePulse 1.6s ease infinite; }
    @keyframes draftLivePulse { 50% { opacity: .35; } }
  }

  /* 시작 모달(매치 상세, #draftModal) — .mmodal 재사용 + 필드 소품 */
  .dstart-b { display: flex; flex-direction: column; gap: 16px; padding-top: 14px; }
  .dstart-b .fld .fl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
  .dstart-b .fld .fl .tdot { width: 8px; height: 8px; border-radius: 2px; }
  .dstart-b .fearless-note { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 9px 12px; border: 1px dashed color-mix(in srgb, var(--warn) 46%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 8%, transparent); font-size: var(--fs-sm); color: var(--muted); }
  .dstart-b .fearless-note svg { width: 15px; height: 15px; color: var(--warn); flex: none; }
  .dstart-b .input--timer { width: 110px; }

  /* 모바일 — 팀 2-up 좌/우 유지, 그리드는 아래로(핸드오프 @900/@560) */
  @media (max-width: 900px) {
    .draft-board .draft-main { grid-template-columns: 1fr 1fr; }
    .draft-board .team-col.t1 { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); order: 1; }
    .draft-board .team-col.t2 { border-left: none; border-bottom: 1px solid var(--line); order: 2; }
    .draft-board .center { grid-column: 1 / -1; order: 3; }
    .draft-board .pick { min-height: 50px; padding: 6px; }
    .draft-board .pick .ch { width: 36px; height: 36px; }
    .draft-board .pick .pnm { font-size: var(--fs-sm); }
    .draft-board .bn { flex: none; width: 28px; height: 28px; aspect-ratio: auto; }
    .draft-board .done-grid { grid-template-columns: 1fr; }
    .draft-board .actbar .hint { display: none; }
  }
  @media (max-width: 560px) {
    .draft-board .team-col { padding: 12px 10px; }
    .draft-board .team-cap { display: none; }
    .draft-board .bans { flex-wrap: wrap; }
    .draft-board .actbar { padding: 10px 12px; gap: 8px; }
    .draft-board .actbar .selinfo .sel-ctx { display: none; }
    .draft-board .actbar .btn svg { display: none; }
  }

  /* ============================================================
     랜딩 스크린샷 갤러리 (§MK·4, #shots, 디자인 #52) — featured 2 + 썸네일 8 월,
     페이지 내 라이트박스(←/→·Esc·롱샷 세로 스크롤), 롱샷 = 크롭+페이드+배지+호버 팬,
     캡션 = 이름+한 줄(featured)+출처 배지(콘솔=--role-admin/멤버=--role-member),
     모바일 = scroll-snap 캐러셀+도트. 신규색 0(토큰/color-mix만).
     ============================================================ */
  .demo-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-pill); padding: 5px 13px; }
  .demo-note svg { width: 13px; height: 13px; color: var(--point); flex: none; }

  .shots-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
  .shots-wall .shot.featured { grid-column: span 2; }
  .shot { display: block; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: color-mix(in srgb, var(--panel) 80%, transparent); text-decoration: none; color: var(--text); cursor: zoom-in; position: relative; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
  .shot:hover { border-color: var(--point-line); transform: translateY(-3px); box-shadow: 0 18px 40px -24px var(--point); }
  .shot .img { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--void); }
  .shot .img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  /* zoom 어포던스 — hover에만 */
  .shot .zoom { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--text); background: color-mix(in srgb, var(--void-deep) 62%, transparent); border: 1px solid var(--line-strong); opacity: 0; transition: opacity var(--dur-2) var(--ease); backdrop-filter: blur(4px); }
  .shot:hover .zoom { opacity: 1; }
  .shot .zoom svg { width: 15px; height: 15px; }
  /* 롱샷 — 상단 크롭 + 하단 페이드 + '긴 화면' 배지, hover 팬(object-position 보간) */
  .shot.long .img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--void-deep) 88%, transparent)); pointer-events: none; }
  .shot.long .img img { transition: object-position 3.2s ease; }
  @media (prefers-reduced-motion: no-preference) {
    .shot.long:hover .img img { object-position: bottom; }
  }
  .longbadge { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); color: var(--text); background: color-mix(in srgb, var(--void-deep) 66%, transparent); border: 1px solid var(--line-strong); backdrop-filter: blur(4px); }
  .longbadge svg { width: 12px; height: 12px; color: var(--point); flex: none; }
  /* 캡션 — 이름 + 한 줄(featured만) + 출처 배지 */
  .shot .cap { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
  .shot .cap .ct { min-width: 0; flex: 1; display: block; }
  .shot .cap .cn { display: block; font-size: 13.5px; font-weight: 600; }
  .shot .cap .cd { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
  .shot:not(.featured) .cap { padding: 10px 12px; }
  .shot:not(.featured) .cap .cd { display: none; }
  .srcb { flex: none; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); margin-top: 1px; }
  .srcb.cyan { color: var(--role-admin); background: color-mix(in srgb, var(--role-admin) 13%, transparent); border: 1px solid color-mix(in srgb, var(--role-admin) 40%, transparent); }
  .srcb.coral { color: var(--role-member); background: color-mix(in srgb, var(--role-member) 13%, transparent); border: 1px solid color-mix(in srgb, var(--role-member) 40%, transparent); }

  /* 라이트박스 — 페이지 내 확대(새 탭은 보조 링크). landing.js가 data-lb 카드에서 채움. */
  .shots-lb { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; padding: 26px; background: color-mix(in srgb, var(--void-deep) 78%, transparent); backdrop-filter: blur(4px); }
  .shots-lb[hidden] { display: none; }
  .shots-lb .lb-top { display: flex; align-items: center; gap: 12px; color: var(--text); margin-bottom: 14px; flex-wrap: wrap; }
  .shots-lb .lb-meta { min-width: 0; }
  .shots-lb .cn { display: block; font-size: var(--fs-lg); font-weight: 600; }
  .shots-lb .cd { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; }
  .shots-lb .cd[hidden] { display: none; }  /* display:block이 UA [hidden]을 이기는 것 방지 */
  .shots-lb .cnt { margin-left: auto; font-size: 11.5px; color: var(--faint); }
  .shots-lb .lb-orig { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 6px 11px; background: color-mix(in srgb, var(--void-deep) 40%, transparent); }
  .shots-lb .lb-orig:hover { color: var(--text); border-color: var(--point-line); }
  .shots-lb .lb-orig svg { width: 13px; height: 13px; }
  .shots-lb .lb-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void-deep) 40%, transparent); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
  .shots-lb .lb-x:hover { color: var(--text); border-color: var(--point-line); }
  .shots-lb .lb-x svg { width: 16px; height: 16px; }
  .shots-lb .lb-body { flex: 1; display: flex; align-items: stretch; gap: 14px; min-height: 0; }
  .shots-lb .lb-nav { align-self: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--void-deep) 50%, transparent); color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
  .shots-lb .lb-nav:hover { color: var(--point); border-color: var(--point-line); }
  .shots-lb .lb-nav svg { width: 17px; height: 17px; }
  .shots-lb .lb-img { flex: 1; border-radius: var(--r-md); border: 1px solid var(--line-strong); overflow-y: auto; background: var(--void); box-shadow: var(--shadow-2); }
  .shots-lb .lb-img img { display: block; width: 100%; height: auto; }
  .shots-lb .lb-hint { text-align: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-top: 12px; }
  .shots-lb kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px; }

  /* 모바일 캐러셀 도트·스와이프 힌트 — 데스크톱에선 숨김 */
  .shots-dots { display: none; justify-content: center; gap: 6px; padding-top: 12px; }
  .shots-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
  .shots-dots i.on { background: var(--point); width: 16px; border-radius: var(--r-pill); }
  .swipe-hint { display: none; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--faint); padding-top: 8px; }

  @media (max-width: 920px) {
    /* featured 쌍은 640px까지 나란히 유지(핸드오프 .g-feat 1fr 1fr) — span을 풀어 2열 grid의
       각 1열로. 썸네일도 2열. */
    .shots-wall { grid-template-columns: repeat(2, 1fr); }
    .shots-wall .shot.featured { grid-column: span 1; }
  }
  @media (max-width: 640px) {
    /* 1열 스택 대신 scroll-snap 스와이프 캐러셀(#52) */
    .shots-wall { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .shots-wall::-webkit-scrollbar { display: none; }
    .shots-wall .shot, .shots-wall .shot.featured { flex: 0 0 84%; scroll-snap-align: center; }
    /* 스크롤 컨테이너가 된 wall이 reveal translateY(26px) 중 카드 하단을 클립 —
       캐러셀 카드는 이동 없이 페이드만(hover lift도 터치에선 무의미). */
    .shots-wall .shot { transform: none !important; }
    .shots-dots { display: flex; }
    .swipe-hint { display: block; }
  }
  @media (prefers-reduced-motion: reduce) {
    .shot:hover { transform: none; }
  }

  /* ============================================================
     위클리 챌린지 (§GX·5, /admin challenges + /me 진행 카드) — 디자인 #53 폴리시.
     콘솔=cyan · /me=coral. 지표 아이콘 5색·진행바·달성 pop·주간 카운트다운·프리셋
     빈 상태. 토큰/color-mix만(신규색 0 — MVP는 기존 --gold 재사용).
     ============================================================ */
  /* 빈 상태 '직접 만들기' 앵커(#chalCreate)가 sticky 상단바(84px)에 가리지 않게 —
     JS-off 폴백(네이티브 앵커 점프). JS-on은 console.js가 scrollIntoV+포커스(§GX·5후속①). */
  #chalCreate { scroll-margin-top: 84px; }
  /* 폼 필드(생성·인라인 수정) — 기존 어휘 유지 */
  .chal-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
  .chal-f { display: flex; flex-direction: column; gap: 6px; }
  .chal-lb { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
  .chal-f--num .input { width: 110px; }
  .chal-note { font-size: var(--fs-sm); margin-top: 10px; color: var(--faint); }

  /* 지표 아이콘/색 언어 5종 */
  .mic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 40%, transparent); }
  .mic svg { width: 18px; height: 18px; }
  .m-matches_played { --mc: var(--pal-primary); }
  .m-voice_seconds { --mc: var(--pal-ok); }
  .m-commendations { --mc: var(--pal-warn); }
  .m-mvp_votes { --mc: var(--gold); }
  .m-new_member_games { --mc: var(--pal-accent); }

  /* 주간 리듬 — 헤더 카운트다운 + 리셋 안내 */
  .week-strip { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
  .week-strip .reset { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
  .countdown { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); border-radius: var(--r-pill); padding: 4px 12px; }
  .countdown svg { width: 13px; height: 13px; }

  /* 콘솔 목록 행 — <details>로 접이식 인라인 수정(JS 0) */
  .chal-list { display: flex; flex-direction: column; }
  .ch-item { border-bottom: 1px solid var(--line); }
  .ch-item:last-child { border-bottom: none; }
  .ch-item.off .ch-row { opacity: .6; }
  .ch-item > summary { list-style: none; cursor: pointer; }
  .ch-item > summary::-webkit-details-marker { display: none; }
  .ch-item[open] .chal-editbtn { color: var(--point); border-color: var(--point-line); }
  .ch-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; }
  .ch-row.off { opacity: .6; }
  .ch-row .cm { min-width: 0; flex: 1; }
  .ch-row .cn { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .ch-row .cs { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); margin-top: 3px; }
  .ch-row .cs b { color: var(--muted); font-weight: 700; }
  .reward { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--warn); }
  .reward svg { width: 13px; height: 13px; }
  .achv { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill); flex: none; }
  .achv.some { color: var(--point); background: var(--point-soft); border: 1px solid var(--point-line); }
  .achv.zero { color: var(--faint); border: 1px dashed var(--line-strong); }
  .achv .avs { display: flex; margin-right: 2px; }
  .achv .avs i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--panel); margin-left: -5px; background: var(--role-member); background-size: cover; }
  .achv .avs i:first-child { margin-left: 0; }
  .chal-editbtn { align-self: center; display: inline-grid; place-items: center; flex: none; }
  .inline-edit { padding: 4px 4px 16px 48px; align-items: flex-end; }
  @media (max-width: 640px) { .inline-edit { padding-left: 4px; } }

  /* /me 진행 카드 */
  .chal-me { display: flex; flex-direction: column; }
  .mrow-ch { display: flex; align-items: center; gap: 13px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .mrow-ch:last-child { border-bottom: none; }
  .mrow-ch .cm { flex: 1; min-width: 0; }
  .mrow-ch .cn { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mrow-ch .prog-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .pbar { flex: 1; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--panel-3) 45%, transparent); border: 1px solid var(--line); overflow: hidden; }
  .pbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--point) 70%, transparent), var(--point)); width: var(--p, 0%); }
  @media (prefers-reduced-motion: no-preference) { .pbar i { transition: width .5s cubic-bezier(.16, 1, .3, 1); } }
  .pnum { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); white-space: nowrap; }
  .pnum b { color: var(--muted); font-weight: 700; }
  .mrow-ch.done { background: color-mix(in srgb, var(--point) 6%, transparent); }
  .mrow-ch.done .pbar i { background: var(--ok); }
  .donebadge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 42%, transparent); border-radius: var(--r-pill); padding: 3px 10px; }
  .donebadge svg { width: 12px; height: 12px; }
  @media (prefers-reduced-motion: no-preference) {
    .mrow-ch.done .donebadge { animation: donepop .45s cubic-bezier(.16, 1, .3, 1); }
    @keyframes donepop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } }
  }
  .wallet-link { display: flex; align-items: center; gap: 8px; padding: 11px 4px 0; margin-top: 6px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); flex-wrap: wrap; }
  .wallet-link > svg { width: 14px; height: 14px; color: var(--point); flex: none; }
  .wallet-link a { color: var(--point); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: var(--fs-sm); }
  .wallet-link a:hover { text-decoration: underline; }
  .wallet-link a svg { width: 13px; height: 13px; }

  /* 빈 상태 — 프리셋 온보딩(콘솔)·faint 안내(멤버). 공용 .empty 충돌 회피 = .chal-empty */
  .chal-empty { text-align: center; padding: 42px 24px; }
  .chal-empty .art { width: 88px; height: 88px; margin: 0 auto 16px; position: relative; }
  .chal-empty .art .ring { position: absolute; inset: 0; border-radius: 24px; border: 1.5px dashed var(--line-strong); }
  .chal-empty .art .flag { position: absolute; inset: 0; display: grid; place-items: center; color: var(--point); }
  .chal-empty .art .flag svg { width: 38px; height: 38px; }
  .chal-empty .art .spark { position: absolute; width: 10px; height: 10px; color: var(--warn); }
  .chal-empty .art .s1 { top: 2px; right: 6px; }
  .chal-empty .art .s2 { bottom: 8px; left: 0; width: 8px; height: 8px; }
  .chal-empty .eh { font-size: var(--fs-lg); font-weight: 600; }
  .chal-empty .ep { font-size: var(--fs-base); color: var(--muted); margin-top: 7px; line-height: 1.6; max-width: 380px; margin-inline: auto; }
  .preset-chips { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
  .preset { font-size: var(--fs-sm); font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: none; font-family: inherit; }
  .preset:hover { border-color: var(--point-line); color: var(--point); border-style: solid; }
  .preset .mic { width: 20px; height: 20px; border-radius: 6px; }
  .preset .mic svg { width: 11px; height: 11px; }

  /* ===== 브랜디드 에러 페이지(디자인 #57, §X·6 고도화) — 엠블럼·타이포 중심. point는
     핸들러가 접속 면으로 결정(공개 lime / 콘솔 cyan). 전부 토큰/color-mix(색 가드 안전). ===== */
  .err-wrap { min-height: 68vh; display: grid; place-items: center; padding: 48px 20px; }
  .err-stage { width: min(680px, 100%); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden;
    position: relative; box-shadow: var(--shadow-2);
    background: radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--point) 7%, var(--void)) 0%, var(--void-deep) 68%); }
  .err { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 54px 30px 44px; }
  .err-em { width: 92px; height: 92px; position: relative; margin-bottom: 24px; }
  .err-em svg { width: 100%; height: 100%; display: block; }
  .err-em .halo { position: absolute; inset: -22px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--point-soft), transparent 66%); }
  @media (prefers-reduced-motion: no-preference) {
    .err-em svg .draw { stroke-dasharray: 130; stroke-dashoffset: 130; animation: err-draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
    .err-em svg .draw.d2 { animation-delay: .25s; }
    @keyframes err-draw { to { stroke-dashoffset: 0; } }
  }
  .err-code { font-family: var(--font-display); font-weight: 700; font-size: 100px; line-height: 1; letter-spacing: .06em;
    color: var(--muted); background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--point) 55%, var(--text)));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .err-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--point); margin-top: 10px; }
  .err-h { font-size: 19px; font-weight: 600; margin-top: 16px; }
  .err-p { font-size: 13.5px; color: var(--muted); margin-top: 8px; max-width: 420px; line-height: 1.65; }
  .err-meta { margin-top: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
  .err-chip { font-family: var(--font-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; }
  .err-chip b { color: var(--text); }
  .err-chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: color-mix(in srgb, var(--warn) 11%, transparent); }
  .err-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
  .err-i { width: 15px; height: 15px; flex: none; }
  .err-support { margin-top: 18px; font-size: 12.5px; }
  .err-support a { color: var(--point); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
  .err-support a:hover { text-decoration: underline; }
  .err-foot { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: var(--faint); }
  .err-foot-em { width: 16px; height: 16px; display: inline-flex; opacity: .8; }
  .err-foot-em svg { width: 100%; height: 100%; }
  @media (max-width: 520px) { .err-code { font-size: 76px; } .err { padding: 40px 22px 34px; } }