/* Shared shell/components. Page namespaces are declared with page_css in their consumers. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root { --topbar-h: calc(64px + env(safe-area-inset-top, 0px)); }
:root { --kcp-shimmer-dur: 1.4s; --kcp-sweep-dur: 1.8s; }
:root {
  --dp-actor-ai: var(--color-semantic-chart-main-purple);   /* #A382FF — DS-EXEMPT: reference-only, actual value via var() */
  --dp-actor-cc: var(--kcp-color-primary);                  /* #2196F3 — DS-EXEMPT: reference-only, actual value via var() */
  --dp-actor-xi: var(--color-semantic-chart-main-indigo);   /* #6688FF — DS-EXEMPT: reference-only, actual value via var() */
  --dp-actor-cd: var(--color-semantic-chart-main-teal);     /* #3BBBBC — DS-EXEMPT: reference-only, actual value via var() */
  --dp-actor-ck: var(--color-semantic-chart-main-orange);   /* #FF9D40 — DS-EXEMPT: reference-only, actual value via var() */
  /* 외부 협업 에이전트(CK 지시 2026-07-16) — GT=GPT 계열 · GK=Grok 계열(기존 차트 토큰 재사용) */
  --dp-actor-gt: var(--color-brand-gpt);    /* #10A37F GPT 그린 — CD 확정(web-ax-board). DS-EXEMPT: reference-only */
  --dp-actor-gk: var(--color-brand-grok);   /* #111827 Grok 그래파이트 — CD 확정. DS-EXEMPT: reference-only */
  --dp-actor-dx: var(--color-semantic-chart-main-cyan);  /* Codex 검수 레인(2자리 코드 DX) — 잠정(차트 시안), CD 확정 대기. DS-EXEMPT: reference-only */
  --dp-actor-gb: var(--color-semantic-chart-main-pink);   /* #FF91B0 GB=글록빌드 — CD 확정(2026-07-21 · GB·GK 공존 실증 → 별도 색, 현 8액터색과 비인접 최대 분리). DS-EXEMPT: reference-only */
  --dp-actor-gm: var(--color-semantic-chart-main-lime);   /* #B3E750 GM=Gemini 커밋검수 레인 — 잠정(기존 차트 토큰 재사용, dx=cyan·gb=pink 와 비인접 분리), CD 확정 대기(CK 승인 2026-07-23). DS-EXEMPT: reference-only */
  /* 3글자 주체 코드(CK 지시 2026-08-09 · actors.ALL_ACTORS). 계열은 계열색을 잇고, 같은
     계열 안에서는 서로 다른 기존 토큰으로 갈라 구분한다. 신규 시각값 0(전부 기존 토큰 파생).
     옛 2글자 토큰(위)은 그대로 둔다 — 적재된 레코드가 옛 코드를 담고 있어 함께 그려진다. */
  --dp-actor-cca: var(--kcp-color-primary);                 /* Claude Code A — 클로드 계열 기준색. DS-EXEMPT: reference-only */
  --dp-actor-ccb: var(--color-semantic-chart-main-blue);    /* Claude Code B — 같은 블루 계열의 밝은 축(A 와 구분). DS-EXEMPT: reference-only */
  --dp-actor-cai: var(--color-semantic-chart-main-purple);  /* Claude(분석·검증) — 옛 AI 색 승계. DS-EXEMPT: reference-only */
  --dp-actor-cdd: var(--color-semantic-chart-main-teal);    /* Claude Design — 옛 CD 색 승계. DS-EXEMPT: reference-only */
  --dp-actor-xcc: var(--color-semantic-chart-main-indigo);  /* Xcode Claude Code — 옛 XI 색 승계. DS-EXEMPT: reference-only */
  --dp-actor-cdx: var(--color-semantic-chart-main-cyan);    /* Codex — 옛 DX 색 승계. DS-EXEMPT: reference-only */
  --dp-actor-grb: var(--color-semantic-chart-main-pink);    /* Grok-build — 옛 GB 색 승계. DS-EXEMPT: reference-only */
  --dp-actor-ggm: var(--color-semantic-chart-main-lime);    /* Gemini — 옛 GM 색 승계. DS-EXEMPT: reference-only */
  --dp-actor-gpt: var(--color-brand-gpt);                   /* GPT — 브랜드 그린 승계. DS-EXEMPT: reference-only */
  --dp-actor-grk: var(--color-brand-grok);                  /* Grok — 브랜드 그래파이트 승계. DS-EXEMPT: reference-only */
  --dp-actor-cps: var(--color-semantic-chart-main-yellow);  /* Cursor Composer — 잠정(기존 차트 토큰 재사용 · 신규 시각값 0). 에이전트 레인 중 미사용이던 유일한 축이라 blue/cyan/pink/lime/teal/purple 어느 것과도 비인접하다. CD 확정 대기(CC-CD-DESIGN-AUTHORITY — 색은 CDD 가 정한다). DS-EXEMPT: reference-only */
  --dp-actor-mms: var(--color-semantic-chart-main-mint);    /* Meta Muse Spark — 잠정(기존 차트 토큰 재사용 · 신규 시각값 0). 남은 미사용 축은 mint·red 둘뿐이고 red 는 의미색(오류)이라 주체색으로 쓰지 않는다. mint 는 lime·green 과 같은 녹색 무리라 인접 위험이 있으므로 CD 확정 대기(CC-CD-DESIGN-AUTHORITY — 색은 CDD 가 정한다). DS-EXEMPT: reference-only */
  --dp-actor-msa: var(--color-semantic-chart-main-mint);    /* Muse Spark A — MMS 를 나눈 첫 세션(CK 지시 2026-09-23) · MMS 의 mint 를 잇는다. 잠정(신규 시각값 0) · CD 확정 대기(CC-CD-DESIGN-AUTHORITY). DS-EXEMPT: reference-only */
  --dp-actor-msb: var(--color-semantic-chart-main-red);     /* Muse Spark B — 둘째 세션 · 잠정 배정(신규 시각값 0). 남은 차트 축이 red 하나뿐이라 의미색(오류)과 겹친다 — CD 확정 대기(CC-CD-DESIGN-AUTHORITY). DS-EXEMPT: reference-only */
  --dp-actor-jev: var(--color-semantic-chart-main-green);   /* Jev(TypeSafe 판정 엔진) — 잠정 중복 배정(신규 시각값 0). MMS 가 마지막 미사용 축(mint)을 가져가 이제 겹치지 않는 축이 없다 — green 은 성공/결정 의미색으로도 쓰이지만 red(오류 의미색)보다 충돌이 덜하다고 판단했다. CD 확정 전까지 임시값이며, 최종 색·인접 재배치는 CDD 소관(CC-CD-DESIGN-AUTHORITY). DS-EXEMPT: reference-only */
  --dp-actor-loc: var(--color-semantic-chart-main-yellow);  /* 로컬 에이전트(맥북) — 잠정 중복 배정(신규 시각값 0). 겹치지 않는 축이 없어 CPS 와 yellow 를 나눈다 — CPS 는 코딩 분류, LOC 는 일반 분류라 같은 목록에 나란히 서는 일이 드물다. CD 확정 전까지 임시값이며, 최종 색·인접 재배치는 CDD 소관(CC-CD-DESIGN-AUTHORITY). DS-EXEMPT: reference-only */
  /* CC-DEVPROP-AREAS(CK 2026-07-25) — 업무 영역 색(6). 주체색과 같은 차트 토큰 계열을 재사용해
     신규 시각값을 만들지 않는다(잠정 — CD 확정 대기). DS-EXEMPT: reference-only, value via var() */
  /* CC-WEB-ARCHETYPE v2 — 밀도 2모드(comfortable 기본 / compact). 레이아웃·컬럼은 그대로 두고
     행높이·패딩·폰트만 바꾼다(사용자 설정 · data-density 루트 속성). CD 승인 시안 반영. */
  --kcp-density-row-h: 44px;      /* DS-EXEMPT: 밀도 기준 치수(토큰 정의부) */
  --kcp-density-pad: var(--kcp-space-3);
  --kcp-density-font: var(--kcp-text-body2);
  --dp-area-dev: var(--kcp-color-primary);
  --dp-area-review: var(--color-semantic-chart-main-purple);
  --dp-area-design: var(--color-semantic-chart-main-teal);
  --dp-area-research: var(--color-semantic-chart-main-cyan);
  --dp-area-close: var(--color-semantic-chart-main-lime);
  --dp-area-ios: var(--color-semantic-chart-main-indigo);
  /* 5분류(CK 지시 2026-08-09 · areas.AREAS). 코딩 계열은 블루 축(개발코딩=기준색, 일반코딩=
     시안)으로 묶어 '같은 계열의 두 단계'가 읽히게 한다. 전부 기존 토큰 파생(신규 시각값 0). */
  --dp-area-general: var(--color-semantic-chart-main-purple);
  --dp-area-coding: var(--color-semantic-chart-main-cyan);
  --dp-area-dev_coding: var(--kcp-color-primary);
  --dp-area-ios_dev: var(--color-semantic-chart-main-indigo);
}
html { font-size: var(--ui-basic-component-fontsize); }
body {
  font-family: var(--kcp-font-sans);
  color: var(--kcp-fg);
  background: var(--kcp-bg-subtle);
  font-size: var(--kcp-text-sm);
  line-height: var(--kcp-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--kcp-glass-canvas);
  pointer-events: none;
}
@media (prefers-reduced-transparency: reduce) {
body::before { background: var(--kcp-bg-subtle); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.cl-topbar, .cl-sidebar::before, .card--glass, .card--glass-nav, .cl-modal{
    background: var(--kcp-color-surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
.cl-topbar, .cl-sidebar::before, .card--glass, .card--glass-nav, .cl-modal{
    background: var(--kcp-color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
.cl-modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
.cl-topbar, .cl-sidebar::before, .card--glass, .card--glass-nav, .cl-modal{
    background: var(--kcp-color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--kcp-color-text-secondary);
  }
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img, svg { display: block; }
kbd {
  font-family: var(--kcp-font-mono);
  font-size: var(--kcp-text-2xs);
  padding: 1px 6px;
  border-radius: var(--kcp-radius-xs);
  background: var(--kcp-bg);
  border: 1px solid var(--kcp-line);
  box-shadow: 0 1px 0 var(--kcp-line);
  color: var(--kcp-fg-secondary);
}
.topbar {
  background: rgba(255,255,255,0.85); /* DS-EXEMPT: translucent glass surface (backdrop-filter blur) */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--kcp-line);
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner {
  /* 밀도 표준 v1 — 콘텐츠(.cl-page wide)와 정렬(1440 고정 → gutter 공식) */
  width: min(100% - 2 * var(--kcp-gutter), var(--kcp-container-wide));
  margin-inline: auto;
  padding: var(--kcp-space-3) 0;
  display: flex; align-items: center; gap: var(--kcp-space-6);
  min-height: 64px;
}
.brand { display: flex; align-items: center; gap: var(--kcp-space-2); flex-shrink: 0; }
.brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark.sm { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-weight: var(--kcp-weight-black);
  font-size: var(--kcp-text-base);
  letter-spacing: var(--kcp-tracking-tight);
  color: var(--kcp-fg);
}
.brand-sub {
  font-size: var(--kcp-text-2xs);
  color: var(--kcp-fg-tertiary);
  font-weight: var(--kcp-weight-medium);
}
.topbar-nav { display: flex; align-items: center; gap: var(--kcp-space-1); margin-left: var(--kcp-space-3); }
.tb-link {
  padding: var(--kcp-space-2) var(--kcp-space-3);
  border-radius: var(--kcp-radius-sm);
  font-size: var(--kcp-text-sm);
  font-weight: var(--kcp-weight-medium);
  color: var(--kcp-fg-secondary);
  transition: all var(--kcp-dur-micro) var(--kcp-ease-standard);
}
.tb-link:hover { background: var(--kcp-bg-subtle); color: var(--kcp-fg); }
.tb-link.active { color: var(--kcp-fg); font-weight: var(--kcp-weight-semibold); background: var(--kcp-bg-subtle); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--kcp-space-2); }
.env-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--kcp-radius-pill);
  background: var(--kcp-success-50);
  color: var(--kcp-mint-700);
  font-size: var(--kcp-text-2xs);
  font-weight: var(--kcp-weight-semibold);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.env-chip.warn { background: var(--kcp-warn-50); color: var(--kcp-warn-700); }
.env-chip.warn .env-dot { background: var(--kcp-warn-500); box-shadow: 0 0 0 3px rgba(251,199,79,0.20); }
.env-dot {
  width: 6px; height: 6px; border-radius: var(--kcp-radius-pill);
  background: var(--kcp-mint-500);
  box-shadow: 0 0 0 3px rgba(55,230,134,0.20);  /* derived: --kcp-color-mint */
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--kcp-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--kcp-fg-secondary);
  transition: all var(--kcp-dur-micro) var(--kcp-ease-standard);
}
.icon-btn:hover { background: var(--kcp-bg-subtle); }
.icon-btn:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }
.profile {
  width: 32px; height: 32px;
  border-radius: var(--kcp-radius-pill);
  background: var(--kcp-gray-900);
  color: var(--kcp-fg-on-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--kcp-weight-bold);
  font-size: var(--kcp-text-2xs);
  cursor: pointer;
}
.page { max-width: 1440px; margin: 0 auto; padding: var(--kcp-space-8) var(--kcp-space-6) var(--kcp-space-12); }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--kcp-space-6); flex-wrap: wrap;
  margin-bottom: var(--kcp-space-6);
}
.eyebrow {
  font-size: var(--kcp-text-2xs);
  font-weight: var(--kcp-weight-bold);
  letter-spacing: var(--kcp-tracking-wide);
  text-transform: uppercase;
  color: var(--kcp-blue-600);
  margin-bottom: var(--kcp-space-2);
}
.page-head h1 {
  font-size: var(--kcp-text-4xl);
  font-weight: var(--kcp-weight-black);
  letter-spacing: var(--kcp-tracking-tight);
  line-height: var(--kcp-leading-tight);
  margin: 0;
}
.page-head .sub {
  margin: var(--kcp-space-2) 0 0;
  font-size: var(--kcp-text-sm);
  color: var(--kcp-fg-secondary);
  max-width: 640px;
}
.page-actions { display: flex; gap: var(--kcp-space-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--kcp-radius-md);
  font-size: var(--kcp-text-sm);
  font-weight: var(--kcp-weight-semibold);
  border: 1px solid transparent;
  line-height: 1;
  transition: all var(--kcp-dur-micro) var(--kcp-ease-standard);
  white-space: nowrap;
  font-family: inherit;
  background: transparent;
  color: inherit;
}
.btn:active:not([disabled]) { filter: brightness(0.97); }
.btn:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
summary { cursor: pointer; }
summary:focus-visible { outline: none; box-shadow: var(--kcp-shadow-focus); border-radius: var(--kcp-radius-sm); }
.btn svg { width: 14px; height: 14px; stroke-width: 1.75; }
.btn--lg { padding: 12px var(--kcp-space-4-5); font-size: var(--kcp-text-sm); }
.btn--lg svg { width: 16px; height: 16px; }
.btn--sm { padding: 6px 10px; font-size: var(--kcp-text-xs); border-radius: var(--kcp-radius-sm); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--primary { background: var(--kcp-blue-500); color: var(--kcp-fg-on-brand); }
.btn--primary:hover:not([disabled]) { background: var(--kcp-blue-600); }
.btn--primary[disabled] {
  background: var(--kcp-gray-200);
  color: var(--kcp-fg-muted);
  cursor: not-allowed;
}
.btn--secondary {
  background: var(--kcp-bg); color: var(--kcp-fg);
  border-color: var(--kcp-line);
}
.btn--secondary:hover { background: var(--kcp-bg-subtle); border-color: var(--kcp-line-strong); }
.btn--ghost { background: transparent; color: var(--kcp-fg-secondary); }
.btn--ghost:hover { background: var(--kcp-bg-subtle); color: var(--kcp-fg); }
.btn--danger { background: var(--kcp-danger-500); color: var(--kcp-fg-on-brand); }
.btn--danger:hover:not([disabled]) { background: var(--kcp-danger-600); }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--kcp-radius-pill);
  font-size: var(--kcp-text-2xs);
  font-weight: var(--kcp-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; stroke-width: 1.75; }
.chip-success { background: var(--kcp-success-50); color: var(--kcp-mint-700); }
.chip-deploy { background: var(--kcp-mint-500); color: var(--kcp-fg-on-accent); }
.chip-info    { background: var(--kcp-info-50); color: var(--kcp-blue-700); }
.chip-warn    { background: var(--kcp-warn-50); color: var(--kcp-warn-700); }
:root[data-theme="dark"] .chip-success { background: var(--kcp-success-50); color: var(--kcp-mint-500-on); }
:root[data-theme="dark"] .chip-info    { background: var(--kcp-info-50);    color: var(--kcp-blue-500-on); }
:root[data-theme="dark"] .chip-warn    { background: var(--kcp-warn-50);    color: var(--kcp-warn-500); }
:root[data-theme="dark"] .chip-neutral { color: var(--kcp-fg-secondary); }
.chip-danger  { background: var(--kcp-danger-50); color: var(--kcp-danger-700); }
.chip-neutral { background: var(--kcp-bg-muted); color: var(--kcp-gray-700); }
.chip--dashed { background: transparent; border: 1px dashed var(--kcp-color-border-strong);
  color: var(--kcp-color-text-secondary); }
.cl-env-fail { display: flex; align-items: center; gap: var(--kcp-space-3); flex-wrap: wrap;
  padding: var(--kcp-space-3) var(--kcp-space-4);
  border: 1px solid var(--kcp-color-error); border-radius: var(--kcp-radius-md);
  background: var(--kcp-danger-50); color: var(--kcp-danger-700);
  font-size: var(--kcp-text-body2); }
.chip-accent  { background: var(--kcp-success-50); color: var(--kcp-success-700); }
.chip-purple  { background: color-mix(in srgb, var(--color-semantic-chart-main-purple) 16%, transparent);
  color: var(--color-semantic-chart-main-purple); }
.chip-mock    { background: var(--kcp-color-surface-2); color: var(--kcp-color-text-secondary);
  border: 1px dashed var(--kcp-color-border-strong); padding: 2px 8px; }
.chip--rdy   { box-shadow: inset 0 0 0 var(--kcp-border-w-hairline) var(--kcp-color-success); }
.chip--stale { box-shadow: inset 0 0 0 var(--kcp-border-w-hairline) var(--kcp-color-warning); }
.chip--gone  { box-shadow: inset 0 0 0 var(--kcp-border-w-emphasis) var(--kcp-color-error); }
.kpi-row {
  /* 밀도 표준 v1 ③ — 고정 repeat 금지: 화면폭 비례 열 수(KPI --min 280). */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--kcp-space-3);
  margin-bottom: var(--kcp-space-5);
}
.kpi {
  background: var(--kcp-bg);
  border: 1px solid var(--kcp-line);
  border-radius: var(--v10-r-md);  /* v11 — 카드 radius 정형화 (14px) */
  padding: var(--kcp-space-4) var(--kcp-space-4-5);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 116px;
}
.kpi-lbl {
  font-size: var(--kcp-text-2xs);
  font-weight: var(--kcp-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--kcp-tracking-wide);
  color: var(--kcp-fg-tertiary);
}
.kpi-num {
  font-size: var(--kcp-text-3xl);
  font-weight: var(--kcp-weight-black);
  letter-spacing: var(--kcp-tracking-tight);
  line-height: 1.1;
  color: var(--kcp-fg);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.kpi-num .unit {
  font-size: var(--kcp-text-sm);
  font-weight: var(--kcp-weight-semibold);
  color: var(--kcp-fg-tertiary);
  margin-left: 3px;
}
.kpi-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kcp-space-2); margin-top: auto;
}
.kpi-foot { font-size: var(--kcp-text-2xs); color: var(--kcp-fg-tertiary); }
.delta {
  font-size: var(--kcp-text-xs);
  font-weight: var(--kcp-weight-bold);
  font-feature-settings: "tnum" 1;
}
.delta.up   { color: var(--kcp-mint-700); }
.delta.down { color: var(--kcp-danger-700); }
.tbl tr.tbl-total td {
  font-weight: var(--kcp-weight-bold);
  border-top: 1px solid var(--kcp-line);
}
.card {
  background: var(--kcp-bg);
  border: 1px solid var(--kcp-line);
  border-radius: var(--v10-r-md);  /* v11 — 카드 radius 정형화 (14px) */
  overflow: hidden;
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--kcp-space-3);
  padding: var(--kcp-space-4-5) var(--kcp-space-5);
  border-bottom: 1px solid var(--kcp-line);
}
.card-head h3 {
  margin: 0;
  font-size: var(--kcp-text-base);
  font-weight: var(--kcp-weight-bold);
  letter-spacing: var(--kcp-tracking-snug);
}
.card-sub {
  margin: 4px 0 0;
  font-size: var(--kcp-text-xs);
  color: var(--kcp-fg-tertiary);
}
.card-sub strong { color: var(--kcp-fg); font-weight: var(--kcp-weight-bold); }
.card-body { padding: var(--kcp-space-5); }
.card-body--flush { padding: 0; }
.card-head-meta { display: flex; align-items: center; gap: var(--kcp-space-2); }
.card--glass {
  background: var(--kcp-glass-tint-elevated);
  /* blur(굴절) 제거 — HIG 판정④(disciplined): 굴절은 크롬/오버레이 전용, 콘텐츠 카드는
     elevated 재질(반투명 틴트 + specular)로 유리 재질감만 유지. blur 재도입 금지. */
  border-color: var(--kcp-glass-border);
  box-shadow: var(--kcp-glass-shadow), var(--kcp-glass-specular);
}
.card--glass-nav { background: var(--kcp-glass-tint-nav); }
.workspace {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: var(--kcp-space-4);
  margin-bottom: var(--kcp-space-5);
}
.side-col { display: flex; flex-direction: column; gap: var(--kcp-space-4); }
.supported {
  margin-top: var(--kcp-space-4);
  padding: var(--kcp-space-3) 14px;
  background: var(--kcp-bg-subtle);
  border-radius: var(--kcp-radius-md);
}
.supported-label {
  font-size: var(--kcp-text-2xs);
  font-weight: var(--kcp-weight-bold);
  letter-spacing: var(--kcp-tracking-wide);
  text-transform: uppercase;
  color: var(--kcp-fg-tertiary);
  margin-bottom: var(--kcp-space-2);
}
.options {
  margin-top: var(--kcp-space-4);
  display: flex; flex-direction: column;
  border: 1px solid var(--kcp-line);
  border-radius: var(--kcp-radius-lg);
  overflow: hidden;
}
.opt {
  display: flex; align-items: center; gap: var(--kcp-space-3);
  padding: 14px var(--kcp-space-4);
  background: var(--kcp-bg);
}
.opt + .opt { border-top: 1px solid var(--kcp-line); }
.switch { position: relative; flex-shrink: 0; display: block; width: 38px; height: 22px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--kcp-gray-200);
  border-radius: var(--kcp-radius-pill);
  transition: background var(--kcp-dur-standard) var(--kcp-ease-standard);
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: var(--kcp-radius-pill);
  background: var(--kcp-bg);
  box-shadow: 0 1px 3px rgba(25,25,25,0.20); /* DS-EXEMPT: derived from --color-kcpgray-10 (knob lift) */
  transition: transform var(--kcp-dur-standard) var(--kcp-ease-standard);
}
.switch input:checked + .track { background: var(--kcp-blue-500); }
.switch input:checked + .track .thumb { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--kcp-shadow-focus); }
.actions {
  margin-top: var(--kcp-space-4);
  display: flex; align-items: center; gap: var(--kcp-space-2); flex-wrap: wrap;
}
.action-hint {
  margin-left: auto;
  font-size: var(--kcp-text-xs);
  color: var(--kcp-fg-tertiary);
}
.queue .qitem {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--kcp-space-4);
  border-bottom: 1px solid var(--kcp-line);
  font-size: var(--kcp-text-sm);
  transition: background var(--kcp-duration-micro);
}
.queue .qitem:hover { background: var(--kcp-bg-subtle); }
.queue .qitem:last-child { border-bottom: none; }
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--kcp-space-12) var(--kcp-space-6);
  text-align: center;
  color: var(--kcp-fg-tertiary);
  font-size: var(--kcp-text-sm);
  gap: 6px;
}
.empty svg {
  width: 32px; height: 32px;
  stroke-width: 1.5;
  color: var(--kcp-fg-muted);
  margin-bottom: 4px;
}
.empty-sub { font-size: var(--kcp-text-2xs); color: var(--kcp-fg-muted); }
.pipeline { list-style: none; margin: 0; padding: 0; }
.step {
  display: flex; align-items: flex-start; gap: var(--kcp-space-3);
  padding: 10px 0;
  position: relative;
}
.step + .step { border-top: 1px dashed var(--kcp-line); margin-top: 0; padding-top: var(--kcp-space-3); }
.step-i {
  width: 24px; height: 24px;
  border-radius: var(--kcp-radius-pill);
  background: var(--kcp-bg-muted);
  color: var(--kcp-fg-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--kcp-text-2xs);
  font-weight: var(--kcp-weight-bold);
  flex-shrink: 0;
}
.step-i svg { width: 12px; height: 12px; stroke-width: 2.5; }
.step.done .step-i { background: var(--kcp-mint-500); color: var(--kcp-fg-on-accent); }
.step.active .step-i {
  background: var(--kcp-blue-500); color: var(--kcp-fg-on-brand);
  animation: spin 1.6s linear infinite;
}
.step.fail .step-i { background: var(--kcp-danger-500); color: var(--kcp-fg-on-brand); }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.step-t {
  font-size: var(--kcp-text-sm);
  font-weight: var(--kcp-weight-semibold);
  color: var(--kcp-fg);
}
.step-d {
  font-size: var(--kcp-text-2xs);
  color: var(--kcp-fg-tertiary);
  margin-top: 2px;
  font-family: var(--kcp-font-mono);
}
.progress {
  height: 6px;
  background: var(--kcp-bg-muted);
  border-radius: var(--kcp-radius-pill);
  overflow: hidden;
  width: 100%;
}
.progress--sm { height: 4px; }
.progress-fill {
  height: 100%;
  background: var(--kcp-blue-500);
  border-radius: var(--kcp-radius-pill);
  width: 0%;
  transition: width var(--kcp-dur-standard) var(--kcp-ease-standard);
  position: relative;
}
.progress-fill.success { background: var(--kcp-mint-500); }
.progress-fill.warn    { background: var(--kcp-warn-500); }
.progress-fill.danger  { background: var(--kcp-danger-500); }
.progress-fill.running::after {
  content: "";
  position: absolute; inset: 0;
  /* 진행바 스윕 — 스켈레톤 shimmer 와 다른 효과다(채워지는 중임을 보이는 것).
     흰색 raw rgba 대신 표면 토큰에서 파생해 다크에서도 같은 인상이 되게 한다. */
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--kcp-color-surface) 45%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: kcp-progress-sweep var(--kcp-sweep-dur) linear infinite;
}
.tbl { width: 100%; border-collapse: collapse; font-size: var(--kcp-text-sm); }
.tbl thead th {
  text-align: left;
  padding: 11px var(--kcp-space-4);
  font-weight: var(--kcp-weight-semibold);
  color: var(--kcp-fg-tertiary);
  font-size: var(--kcp-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--kcp-tracking-wide);
  background: var(--kcp-bg-subtle);
  border-bottom: 1px solid var(--kcp-line);
}
.tbl thead th.num { text-align: left; }
.tbl thead th.right { text-align: right; }
.tbl tbody td {
  padding: 14px var(--kcp-space-4);
  border-bottom: 1px solid var(--kcp-line);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--kcp-duration-micro); }
.tbl tbody tr:hover { background: var(--kcp-bg-subtle); }
.tbl td.num { font-feature-settings: "tnum" 1, "lnum" 1; }
.tbl td.right { text-align: right; }
.tbl .muted { color: var(--kcp-fg-muted); font-feature-settings: "tnum" 1; }
@media (max-width: 720px) {
.tbl.tbl-prio:not(.fm-table) tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--kcp-space-1) var(--kcp-space-2);
    background: var(--kcp-color-surface);
  }
.tbl.tbl-prio:not(.fm-table) tbody td { width: auto; padding: 0; min-width: 0; }
.tbl.tbl-prio:not(.fm-table) tbody td.col-main { order: -1; flex: 1 1 100%; font-size: var(--kcp-text-t2); }
.tbl.tbl-prio:not(.fm-table) tbody td.col-aux { display: none; }
}
.phase-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--kcp-space-2);
  font-size: var(--kcp-text-xs);
}
.phase-text {
  color: var(--kcp-fg);
  font-weight: var(--kcp-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phase-pct {
  color: var(--kcp-blue-700);
  font-weight: var(--kcp-weight-bold);
  flex-shrink: 0;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.phase-meta {
  font-size: var(--kcp-text-2xs);
  color: var(--kcp-fg-tertiary);
  display: flex; gap: 6px;
  font-feature-settings: "tnum" 1;
}
.score { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.score-bar {
  width: 100%; height: 6px;
  background: var(--kcp-bg-muted);
  border-radius: var(--kcp-radius-pill);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: var(--kcp-mint-500);
  border-radius: var(--kcp-radius-pill);
}
.score-fill.warn   { background: var(--kcp-warn-500); }
.score-fill.danger { background: var(--kcp-danger-500); }
.score-text {
  font-weight: var(--kcp-weight-semibold);
  font-size: var(--kcp-text-xs);
  color: var(--kcp-fg);
  font-feature-settings: "tnum" 1;
}
.status-text {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--kcp-text-xs);
  font-weight: var(--kcp-weight-semibold);
}
.status-text svg { width: 14px; height: 14px; stroke-width: 1.75; }
.status-ok       { color: var(--kcp-mint-700); }
.status-warn     { color: var(--kcp-warn-700); }
.status-err      { color: var(--kcp-danger-600); }
.status-queued,
.status-converting { color: var(--kcp-blue-700); }
.has-detail { cursor: help; }
.has-detail .status-text { text-decoration: underline dotted; text-underline-offset: 0.15em; }
.dl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px var(--kcp-space-2);
  border-radius: var(--kcp-radius-xs);
  font-size: var(--kcp-text-xs);
  font-weight: var(--kcp-weight-semibold);
  color: var(--kcp-blue-600);
  transition: background var(--kcp-dur-micro) var(--kcp-ease-standard);
  margin-left: 4px;
}
.dl:hover { background: var(--kcp-info-50); }
.dl:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.dl svg { width: 12px; height: 12px; stroke-width: 1.75; }
.results-foot {
  padding: 14px var(--kcp-space-5);
  background: var(--kcp-bg-subtle);
  border-top: 1px solid var(--kcp-line);
}
.legend {
  display: flex; flex-wrap: wrap; gap: var(--kcp-space-4);
  font-size: var(--kcp-text-2xs);
  color: var(--kcp-fg-secondary);
  font-weight: var(--kcp-weight-medium);
}
.lg {
  display: inline-flex; align-items: center; gap: 6px;
  font-feature-settings: "tnum" 1;
}
.lg-d {
  width: 8px; height: 8px;
  border-radius: var(--kcp-radius-pill);
  display: inline-block;
}
.page-footer {
  border-top: 1px solid var(--kcp-line);
  background: var(--kcp-bg);
  margin-top: var(--kcp-space-3);
}
.footer-inner {
  width: min(100% - 2 * var(--kcp-gutter), var(--kcp-container-wide));
  margin-inline: auto;
  padding: var(--kcp-space-4-5) 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--kcp-space-3);
}
.foot-brand {
  display: flex; align-items: center; gap: var(--kcp-space-2);
  font-size: var(--kcp-text-xs);
  font-weight: var(--kcp-weight-semibold);
  color: var(--kcp-fg-secondary);
}
.foot-meta {
  font-size: var(--kcp-text-2xs);
  color: var(--kcp-fg-tertiary);
  display: flex; align-items: center; gap: var(--kcp-space-2);
  flex-wrap: wrap;
}
.foot-meta a { color: var(--kcp-blue-600); font-weight: var(--kcp-weight-semibold); }
.foot-meta a:hover { text-decoration: underline; }
.foot-meta .sep { color: var(--kcp-color-text-placeholder); }
@media (max-width: 960px) {
.workspace { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.topbar-nav { display: none; }
.cl-tb-env { padding: 4px 7px; }
.page { padding: var(--kcp-space-5) var(--kcp-space-4) var(--kcp-space-10); }
.page-head h1 { font-size: var(--kcp-text-2xl); }
.kpi-row { gap: var(--kcp-space-2); }
.kpi { padding: 14px; min-height: 100px; }
.kpi-num { font-size: var(--kcp-text-2xl); }
.actions { flex-direction: column; align-items: stretch; }
.btn--lg { width: 100%; }
.action-hint { margin-left: 0; text-align: center; }
.btn:not(.btn--sm) { min-height: 44px; }
.cl-btn:not(.cl-btn--sm) { min-height: 44px; }
.tbl thead { display: none; }
.tbl:not(.fm-table):not(.fm-inv-table),
  .tbl:not(.fm-table):not(.fm-inv-table) tbody,
  .tbl:not(.fm-table):not(.fm-inv-table) tr,
  .tbl:not(.fm-table):not(.fm-inv-table) td { display: block; width: 100%; }
.tbl:not(.fm-table):not(.fm-inv-table) tr {
    padding: 12px var(--kcp-space-4);
    border-bottom: 1px solid var(--kcp-line);
  }
.tbl:not(.fm-table):not(.fm-inv-table) td { padding: 4px 0; border: none; }
.tbl:not(.fm-table):not(.fm-inv-table) td {
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  }
.tbl:not(.fm-table):not(.fm-inv-table) td .mono,
  .tbl:not(.fm-table):not(.fm-inv-table) td code { word-break: break-all; }
.tbl:not(.fm-table):not(.fm-inv-table) tr[data-href],
  .tbl:not(.fm-table):not(.fm-inv-table) tr[onclick],
  .tbl:not(.fm-table):not(.fm-inv-table) tr.is-click { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.cl-toast-host {
  position: fixed;
  top: var(--kcp-space-4);
  right: var(--kcp-space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--kcp-space-2);
  max-width: min(380px, calc(100vw - var(--kcp-space-5)));
  pointer-events: none;
}
.cl-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--kcp-space-2);
  padding: var(--kcp-space-3);
  border-radius: var(--kcp-radius-lg);
  background: var(--kcp-bg-card);
  border: 1px solid var(--kcp-border);
  box-shadow: var(--kcp-shadow-lg);
  font-size: var(--kcp-text-body2);
  line-height: 1.6;
  color: var(--kcp-color-text-primary);
  animation: cl-toast-in 250ms var(--kcp-ease-entrance);
}
.cl-toast--out { animation: cl-toast-out 200ms var(--kcp-ease-exit) forwards; }
.cl-toast i[data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }
.cl-toast__msg { flex: 1; min-width: 0; word-break: break-word; }
.cl-toast__action {  /* CC-DEVPROP-95402 */
  flex-shrink: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--kcp-radius-sm);
  cursor: pointer;
  color: var(--kcp-color-text-secondary);
  padding: 0 var(--kcp-space-2);
  height: 22px;
  font-size: var(--kcp-text-caption);
  font-family: var(--kcp-font-sans);
  font-weight: var(--kcp-weight-semibold);
  display: inline-flex;
  align-items: center;
}
.cl-toast__action:hover { color: var(--kcp-color-text-primary); }
.cl-toast__action:focus-visible { outline: none; box-shadow: var(--kcp-shadow-focus); }
.cl-app-stale:focus-visible { outline: none; box-shadow: var(--kcp-shadow-focus); }
.cl-toast__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--kcp-color-text-tertiary);
  padding: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-toast__close i { width: 14px; height: 14px; }
.cl-toast__close:hover { color: var(--kcp-color-text-primary); }
.cl-toast--success { border-left: 3px solid var(--kcp-mint-500); }
.cl-toast--success i[data-lucide="check-circle-2"] { color: var(--kcp-mint-700); }
.cl-toast--error   { border-left: 3px solid var(--kcp-danger-500); }
.cl-toast--error i[data-lucide="alert-octagon"] { color: var(--kcp-danger-700); }
.cl-toast--warn    { border-left: 3px solid var(--kcp-warn-500); }
.cl-toast--warn i[data-lucide="alert-triangle"] { color: var(--kcp-warn-700); }
.cl-toast--info    { border-left: 3px solid var(--kcp-blue-500); }
.cl-toast--info i[data-lucide="info"] { color: var(--kcp-blue-700); }
@keyframes cl-toast-in {
  from { opacity: 0; transform: translateX(var(--kcp-space-4)); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cl-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(var(--kcp-space-4)); }
}
.cl-skel { display: flex; flex-direction: column; gap: var(--kcp-space-2); }
.cl-skel__line {
  height: var(--kcp-space-4);
  border-radius: var(--kcp-radius-sm);
  background: linear-gradient(
    90deg,
    var(--kcp-bg-subtle) 25%,
    var(--kcp-border) 37%,
    var(--kcp-bg-subtle) 63%
  );
  background-size: 400% 100%;
  animation: kcp-skeleton-shimmer var(--kcp-shimmer-dur) linear infinite;
}
.cl-skel__line:nth-child(2) { width: 85%; }
.cl-skel__line:nth-child(3) { width: 70%; }
@keyframes kcp-skeleton-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}
@keyframes kcp-progress-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.cl-skel__line, .apl-skel, .kcp-skeleton, .progress-fill.running::after {
    animation: none !important;
    background-image: none !important;
    background-color: var(--kcp-color-surface-alt);
  }
}
.cl-wake {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--kcp-space-2);
  padding: var(--kcp-space-3) var(--kcp-space-4);
  font-size: var(--kcp-text-body2);
  line-height: var(--kcp-leading-snug);
  color: var(--kcp-color-text-secondary);
  background: var(--kcp-color-info-tint);
  border: 1px solid var(--kcp-color-border);
  border-radius: var(--kcp-radius-md);
}
.cl-wake__sub { color: var(--kcp-color-text-tertiary); }
.cl-wake__spin {
  width: 14px; height: 14px; flex: none;
  border: 2px solid var(--kcp-color-border-strong);
  border-top-color: var(--kcp-color-primary);
  border-radius: var(--kcp-radius-pill);
  animation: cl-wake-spin 0.8s linear infinite;
}
@keyframes cl-wake-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.cl-wake__spin { animation: none; }
}
.cl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--kcp-space-2);
  padding: var(--kcp-space-5) var(--kcp-space-4);
  color: var(--kcp-color-text-tertiary);
}
.cl-empty__icon { width: 32px; height: 32px; color: var(--kcp-color-text-placeholder); }
.cl-empty__title { font-size: var(--kcp-text-body1); color: var(--kcp-color-text-secondary); }
.cl-empty__desc  { font-size: var(--kcp-text-body2); }
.cl-empty .btn { margin-top: var(--kcp-space-2); }
@media (prefers-reduced-motion: reduce) {
.cl-toast, .cl-skel__line { animation: none; }
}
.cl-cmdk-backdrop {
  position: fixed; inset: 0;
  /* CC-UI-CONTRAST-DND-FIX (v8.3.10) — 0.4 → 0.6 dim 강화 + 약한 블러.
     사용자 보고: 팔레트 열린 상태에서 하위 페이지의 '이동' 버튼 등이
     비쳐 보임 → 초점 분산. backdrop-filter 미지원 브라우저는 dim 만. */
  background: rgba(0, 0, 0, 0.6);  /* DS-EXEMPT: modal backdrop dim */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  animation: cl-cmdk-fade 150ms var(--kcp-ease-entrance);
}
:root[data-theme="dark"] .cl-cmdk-backdrop {
  /* 다크모드는 더 강한 dim 필요 — 어두운 배경에 0.6 black 은 약함. */
  background: rgba(0, 0, 0, 0.75);  /* DS-EXEMPT: modal backdrop dim */
}
@keyframes cl-cmdk-fade {
  from { opacity: 0; } to { opacity: 1; }
}
.cl-cmdk {
  width: min(640px, calc(100vw - var(--kcp-space-5)));
  max-height: 70dvh;
  display: flex;
  flex-direction: column;
  background: var(--kcp-bg-card);
  border: 1px solid var(--kcp-border);
  border-radius: var(--kcp-radius-xl);
  box-shadow: var(--kcp-shadow-lg);
  overflow: hidden;
  animation: cl-cmdk-pop 180ms var(--kcp-ease-entrance);
}
@keyframes cl-cmdk-pop {
  from { opacity: 0; transform: translateY(calc(-1 * var(--kcp-space-3))) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-cmdk__head {
  display: flex;
  align-items: center;
  gap: var(--kcp-space-3);
  padding: var(--kcp-space-3) var(--kcp-space-4);
  border-bottom: 1px solid var(--kcp-border);
}
/* head 안 인풋(.cl-cmdk__input)은 outline 을 내리고 head 가 초점을 표시한다 */
.cl-cmdk__head:focus-within {
  border-bottom-color: var(--kcp-color-primary);
  box-shadow: var(--kcp-shadow-focus);
}
.cl-cmdk__head i[data-lucide="search"] {
  width: 18px; height: 18px;
  color: var(--kcp-color-text-tertiary);
  flex-shrink: 0;
}
.cl-cmdk__input {
  flex: 1; min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--kcp-text-body1);
  color: var(--kcp-color-text-primary);
  padding: var(--kcp-space-1) 0;
  font-family: inherit;
}
.cl-cmdk__input:focus-visible {
  /* head 가 인풋 컨테이너 — 인풋 자체 outline 제거, head 가 시각적 활성 */
  outline: none;
}
.cl-cmdk__kbd {
  font-family: var(--kcp-font-mono);
  font-size: var(--kcp-text-caption);
  background: var(--kcp-bg-subtle);
  color: var(--kcp-color-text-secondary);
  padding: 2px var(--kcp-space-2);
  border-radius: var(--kcp-radius-sm);
  border: 1px solid var(--kcp-border);
}
.cl-cmdk__list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--kcp-space-2) 0;
}
.cl-cmdk__group {
  font-size: var(--kcp-text-caption);
  color: var(--kcp-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--kcp-space-2) var(--kcp-space-4) var(--kcp-space-1);
  font-weight: 700;
}
.cl-cmdk__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--kcp-space-3);
  padding: var(--kcp-space-2) var(--kcp-space-4);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  color: var(--kcp-color-text-primary);
  transition: background var(--kcp-duration-micro);
}
.cl-cmdk__item:hover,
.cl-cmdk__item.is-selected {
  background: var(--kcp-info-50);
}
.cl-cmdk__item.is-selected {
  box-shadow: inset 3px 0 0 var(--kcp-blue-500);
}
.cl-cmdk__icon {
  width: 18px; height: 18px;
  color: var(--kcp-color-text-tertiary);
  flex-shrink: 0;
}
.cl-cmdk__item.is-selected .cl-cmdk__icon { color: var(--kcp-blue-700); }
.cl-cmdk__item-text {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
}
.cl-cmdk__label {
  font-size: var(--kcp-text-body1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-cmdk__sub {
  font-size: var(--kcp-text-caption);
  color: var(--kcp-color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-cmdk__badge {
  font-size: var(--kcp-text-caption);
  color: var(--kcp-color-text-tertiary);
  padding: 2px var(--kcp-space-2);
  border-radius: var(--kcp-radius-pill);
  background: var(--kcp-bg-subtle);
  flex-shrink: 0;
}
.cl-cmdk__empty {
  padding: var(--kcp-space-5) var(--kcp-space-4);
  text-align: center;
  color: var(--kcp-color-text-tertiary);
  font-size: var(--kcp-text-body2);
}
.cl-cmdk__foot {
  display: flex;
  gap: var(--kcp-space-4);
  padding: var(--kcp-space-2) var(--kcp-space-4);
  border-top: 1px solid var(--kcp-border);
  background: var(--kcp-bg-subtle);
  font-size: var(--kcp-text-caption);
  color: var(--kcp-color-text-tertiary);
}
.cl-cmdk__foot kbd { margin-right: var(--kcp-space-1); }
.cl-cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--kcp-space-2);
}
.cl-cmdk-trigger__kbd {
  font-family: var(--kcp-font-mono);
  font-size: var(--kcp-text-caption);
  background: var(--kcp-bg-subtle);
  color: var(--kcp-color-text-secondary);
  padding: 1px var(--kcp-space-2);
  border-radius: var(--kcp-radius-sm);
  border: 1px solid var(--kcp-border);
  line-height: 1.2;
}
@media (max-width: 720px) {
.cl-cmdk-backdrop { padding-top: var(--kcp-space-4); }
.cl-cmdk { width: calc(100vw - var(--kcp-space-3)); max-height: 90dvh; }
.cl-cmdk__foot { display: none; }
.cl-cmdk-trigger__label,
  .cl-cmdk-trigger__kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cl-cmdk-backdrop, .cl-cmdk { animation: none; }
}
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--kcp-duration-normal);
  animation-timing-function: var(--kcp-ease-standard);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}
.cl-critical-banner {
  background: var(--kcp-danger-700);
  color: var(--kcp-fg-on-brand);
  display: flex;
  align-items: center;
  gap: var(--kcp-space-3);
  padding: var(--kcp-space-2) var(--kcp-space-4);
  font-size: var(--kcp-text-body2);
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid var(--kcp-danger-700);
}
.cl-critical-banner i { width: 18px; height: 18px; flex-shrink: 0; }
.cl-critical-banner__link {
  color: var(--kcp-fg-on-brand);
  text-decoration: underline;
  margin-left: auto;
  font-weight: 600;
}
.cl-critical-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--kcp-fg-on-brand);
  font-size: var(--kcp-text-h1);
  cursor: pointer;
  padding: 0 var(--kcp-space-2);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-critical-banner__dismiss i { width: 18px; height: 18px; }
.cl-critical-banner__dismiss:hover { opacity: 0.85; }
/* 경보 상태를 읽지 못한 경우의 중립 표시 — 위험 색을 쓰지 않는다. */
.cl-critical-banner--unknown {
  background: var(--kcp-warn-50);
  color: var(--kcp-warn-700);
  border-bottom-color: var(--kcp-warn-700);
}
.cl-critical-banner--unknown .cl-critical-banner__link,
.cl-critical-banner--unknown .cl-critical-banner__dismiss { color: inherit; }
.cl-ring-banner {
  display: flex;
  align-items: center;
  gap: var(--kcp-space-2);
  background: var(--kcp-warn-50);
  border: 1px solid var(--kcp-warn-500);
  border-radius: var(--kcp-radius-md);
  padding: var(--kcp-space-2) var(--kcp-space-3);
  margin-bottom: var(--kcp-space-3);
  font-size: var(--kcp-text-body2);
  color: var(--kcp-warn-700);
}
.cl-ring-banner i { width: 16px; height: 16px; flex-shrink: 0; }
.cl-ring-banner button { margin-left: auto; }
.u-mt-1 { margin-top: var(--kcp-space-1); }
.u-mt-2 { margin-top: var(--kcp-space-2); }
.u-mt-3 { margin-top: var(--kcp-space-3); }
.u-mt-0 { margin-top: 0; }
.cl-theme-toggle { position: relative; }
.cl-theme-toggle .cl-theme-icon-dark { display: none; }
.cl-theme-toggle .cl-theme-icon-light { display: inline-flex; }
:root[data-theme="dark"] .cl-theme-toggle .cl-theme-icon-light { display: none; }
:root[data-theme="dark"] .cl-theme-toggle .cl-theme-icon-dark { display: inline-flex; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .cl-theme-toggle .cl-theme-icon-light { display: none; }
:root:not([data-theme]) .cl-theme-toggle .cl-theme-icon-dark { display: inline-flex; }
}
:root[data-theme="dark"] .brand-ci-mark,
:root[data-theme="dark"] img.brand-ci {
  /* DS-EXEMPT: brand mark on dark surface */
  filter: brightness(0) invert(1);
}
:root[data-theme="dark"] .topbar {
  /* DS-EXEMPT: translucent glass surface dark (backdrop-filter blur) */
  background: rgba(24,25,30,0.88);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .topbar {
    /* DS-EXEMPT: translucent glass surface dark (backdrop-filter blur) */
    background: rgba(24,25,30,0.88);
  }
}
[x-cloak] { display: none !important; }
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--kcp-dur-micro) var(--kcp-ease-standard);
  display: inline-flex; align-items: center; gap: var(--kcp-space-1);
  font-size: var(--kcp-text-body2); color: var(--kcp-color-text-secondary);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}
.htmx-indicator svg { animation: spin 1.2s linear infinite; width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
.htmx-indicator svg { animation: none; }
}
tr:has([data-mismatch]) {
  background: var(--kcp-color-error-tint);
  outline: 1px solid var(--kcp-color-error);
  outline-offset: -1px;
}
.cl-7stop-stepper .step--locked {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
[data-tooltip] {
  position: relative;
  anchor-name: --kcp-tooltip-anchor;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  position-anchor: --kcp-tooltip-anchor;
  position-area: top center;
  position-try-fallbacks: flip-block, flip-inline;
  background: var(--kcp-color-surface);
  color: var(--kcp-color-text-primary);
  border: 1px solid var(--kcp-color-border);
  border-radius: var(--kcp-radius-sm);
  padding: var(--kcp-space-1) var(--kcp-space-2);
  font-size: var(--kcp-text-caption);
  white-space: nowrap;
  box-shadow: var(--kcp-shadow-sm);
  opacity: 0;
  transition: opacity var(--kcp-dur-micro) var(--kcp-ease-entrance);
  pointer-events: none;
  z-index: 100;
  margin-bottom: var(--kcp-space-1);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}
@supports not (position-anchor: --x) {
[data-tooltip]::after {
    position-anchor: unset;
    position-area: unset;
    bottom: calc(100% + var(--kcp-space-1));
    left: 50%;
    transform: translateX(-50%);
  }
}
.cl-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--kcp-color-primary);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.cl-scroll-progress {
    animation: cl-scroll-progress-grow linear;
    animation-timeline: scroll(root);
  }
@keyframes cl-scroll-progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
[data-tooltip]::after {
    transition: none !important;
  }
.cl-scroll-progress {
    animation: none !important;
    transform: scaleX(1);  /* 완료 상태 표시 — 진행률 자체는 의미 없음 */
  }
}
/* v8.0 IA 통합 — breadcrumb / sub_nav / next_action / empty_state */
.cl-breadcrumb {
  width: 100%;
  margin: 0 0 var(--kcp-space-3);      /* 수직 리듬: breadcrumb → sub_nav/헤더 */
  padding: 0;
}
.cl-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: var(--kcp-space-6);      /* 높이 고정·수직 중앙(체브런·텍스트 정렬) */
  gap: var(--kcp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--kcp-text-caption);
  color: var(--kcp-color-text-tertiary);
}
.cl-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--kcp-space-1);
}
.cl-breadcrumb__link {
  color: var(--kcp-color-text-secondary);
  text-decoration: none;
  border-radius: var(--kcp-radius-sm);
  padding: 0 var(--kcp-space-1);
}
.cl-breadcrumb__link:hover {
  color: var(--kcp-color-primary);
}
.cl-breadcrumb__link:focus-visible {
  outline: none;
  box-shadow: var(--kcp-shadow-focus);
}
.cl-breadcrumb__current {
  color: var(--kcp-color-text-primary);
  font-weight: 600;
}
.cl-breadcrumb__sep {
  width: 14px;
  height: 14px;
  color: var(--kcp-color-text-tertiary);
}
.cl-sub-nav {
  /* ★정렬 수정(CD web-pagehead-revamp): 부모(.cl-page) 정렬 상속 — gutter 재적용 제거. */
  width: 100%;
  margin: 0 0 var(--kcp-space-5);      /* 수직 리듬: sub_nav → 페이지 헤더 */
  padding: 0 0 var(--kcp-space-2);
  border-bottom: 1px solid var(--kcp-glass-border);   /* 글라스 hairline(기존 토큰) */
  overflow-x: auto;                    /* 탭 넘침 시 가로 스크롤(줄바꿈 대신) */
}
.cl-sub-nav__list {
  display: flex;
  flex-wrap: nowrap;                   /* 균일 간격 유지 — 넘침은 컨테이너 스크롤이 흡수 */
  align-items: center;
  gap: var(--kcp-space-1);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-sub-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--kcp-space-1);
}
.cl-sub-nav__group {
  display: inline-flex;
  align-items: center;
  margin-left: var(--kcp-space-2);
  padding-left: var(--kcp-space-2);
  border-left: 1px solid var(--kcp-color-border-light);
  /* CC-MOBILE-GLOBAL-V12 — 모바일 가로스크롤 시 그룹라벨 줄바꿈·축소 방지(3줄 깨짐 해소). */
  white-space: nowrap;
  flex-shrink: 0;
}
.cl-sub-nav__group:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
.cl-sub-nav__group-label {
  font-size: var(--kcp-text-caption);
  font-weight: 700;
  color: var(--kcp-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.cl-sub-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--kcp-space-2);
  padding: var(--kcp-space-2) var(--kcp-space-3);
  color: var(--kcp-color-text-secondary);
  text-decoration: none;
  font-size: var(--kcp-text-body2);
  font-weight: 500;
  border-radius: var(--kcp-radius-md);
  border-bottom: 2px solid transparent;
  /* v8.1 — 모바일 가로 스크롤 시 항목 줄바꿈 방지 + 축소 방지. */
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 150ms var(--kcp-ease-out, ease-out),
              border-color 150ms var(--kcp-ease-out, ease-out),
              background-color 150ms var(--kcp-ease-out, ease-out);
}
button.cl-sub-nav__link {
  appearance: none;
  background: transparent;
  border-top: 0; border-left: 0; border-right: 0;
  font: inherit;
  cursor: pointer;
}
.cl-sub-nav__link:hover {
  color: var(--kcp-color-primary);
  background: var(--kcp-color-primary-tint);
}
.cl-sub-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--kcp-shadow-focus);
}
.cl-sub-nav__item.is-active .cl-sub-nav__link {
  color: var(--kcp-color-primary);
  font-weight: 600;
  /* CD 확정(2026-07-18 · nav-chrome B안) 활성탭 선택 fill 유지 + CD web-pagehead-revamp
     (2026-07-19): 활성 표시는 pill 단독 — 밑줄(border-bottom) 병행 제거(이중 강조 정리). */
  border-bottom-color: transparent;
  background: var(--kcp-glass-tint-tinted);
}
.cl-sub-nav__item.is-weakened .cl-sub-nav__link {
  opacity: 0.5;
}
.cl-sub-nav__icon {
  width: 16px;
  height: 16px;
}
.cl-sub-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--kcp-space-1);
  border-radius: var(--kcp-radius-pill);
  background: var(--kcp-color-surface-2);
  color: var(--kcp-color-text-secondary);
  font-size: var(--kcp-text-caption);
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cl-sub-nav__item.is-active .cl-sub-nav__num {
  background: var(--kcp-color-primary);
  color: var(--kcp-fg-on-brand);
}
.cl-sub-nav__step-sep {
  width: 14px;
  height: 14px;
  color: var(--kcp-color-text-tertiary);
  flex-shrink: 0;
}
.cl-next-action {
  /* ★정렬 수정(web-pagehead-align 동일 클래스): .cl-page 내부 렌더 — gutter 재적용 제거. */
  width: 100%;
  margin: var(--kcp-space-10) 0 var(--kcp-space-6);
  padding: 0;
}
.cl-next-action__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcp-space-4);
  flex-wrap: wrap;
  background: var(--kcp-color-surface);
  border: 1px solid var(--kcp-color-border-light);
  border-left: 3px solid var(--kcp-color-primary);
  border-radius: var(--kcp-radius-lg);
  padding: var(--kcp-space-4) var(--kcp-space-5);
}
.cl-next-action__eyebrow {
  font-size: var(--kcp-text-caption);
  color: var(--kcp-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--kcp-space-1);
}
.cl-next-action__link {
  text-decoration: none;
  white-space: nowrap;
}
.cl-next-action__hint {
  font-size: var(--kcp-text-body2);
  font-weight: 400;
  color: var(--kcp-color-text-secondary);
}
.cl-next-action__icon {
  width: 18px;
  height: 18px;
  transition: transform 150ms var(--kcp-ease-out, ease-out);
}
.cl-next-action__link:hover .cl-next-action__icon {
  transform: translateX(4px);
}
.cl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--kcp-space-2);
  padding: var(--kcp-space-10) var(--kcp-space-6);
  background: var(--kcp-color-surface-2);
  border: 1px dashed var(--kcp-color-border);
  border-radius: var(--kcp-radius-lg);
  color: var(--kcp-color-text-secondary);
}
.cl-empty__icon {
  width: 32px;
  height: 32px;
  color: var(--kcp-color-text-tertiary);
}
.cl-empty__title {
  margin: 0;
  font-size: var(--kcp-text-t2);
  font-weight: 600;
  color: var(--kcp-color-text-primary);
}
.cl-empty__hint {
  margin: 0;
  font-size: var(--kcp-text-body2);
  color: var(--kcp-color-text-secondary);
  max-width: 480px;
}
.cl-empty__actions {
  display: inline-flex;
  gap: var(--kcp-space-2);
  margin-top: var(--kcp-space-2);
}
@media (max-width: 720px) {
.cl-breadcrumb,
  .cl-sub-nav,
  .cl-next-action {
    padding-left: var(--kcp-space-4);
    padding-right: var(--kcp-space-4);
  }
.cl-sub-nav__list {
    overflow-x: auto;
    flex-wrap: nowrap;
    /* iOS Safari snap 부자연스러움 방지. */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* CC-MOBILE-GLOBAL-V12 — 우측 여백으로 마지막 탭 일부 노출(스크롤 가능 peek 신호). */
    padding-right: var(--kcp-space-6);
  }
.cl-toast-host {
    top: calc(var(--kcp-space-12) + var(--kcp-space-2));
    left: var(--kcp-space-3);
    right: var(--kcp-space-3);
    max-width: none;
  }
.cl-next-action__body {
    flex-direction: column;
    align-items: stretch;
    padding: var(--kcp-space-3) var(--kcp-space-4);
  }
.cl-next-action__link {
    justify-content: center;
  }
.cl-next-action__hint {
    width: 100%;
  }
.cl-empty {
    padding: var(--kcp-space-6) var(--kcp-space-4);
  }
.card p, .cl-card p,
  .card li, .cl-card li{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
pre, .card > .mono, .cl-card > .mono {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* DS-EXEMPT (v10 spec): existing pixel-precise legacy shell/component values are retained. */
.cl-app { display: flex; flex-direction: column; min-height: 100dvh; }
.cl-app-body { display: flex; flex: 1; min-height: 0; }
.cl-topbar {
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center;
  gap: var(--kcp-space-3);
  padding: 0 var(--kcp-space-5) 0 0;
  /* iOS 노치 상단 안전 영역 확보 (viewport-fit=cover).
     env(safe-area-inset-top): 노치 없는 기기=0, 노치 기기=상단 안전 영역 높이. */
  padding-top: env(safe-area-inset-top, 0px);
  height: var(--topbar-h);
  /* 전역 크롬 글라스 = 정본 kcp-glass 토큰 정렬(CD glass-apply-nav-chrome — ad-hoc color-mix→토큰). */
  background: var(--kcp-glass-tint-nav);
  -webkit-backdrop-filter: var(--kcp-glass-lens-md);
  backdrop-filter: var(--kcp-glass-lens-md);  /* 정식 렌즈 토큰(web-glass-tokens-formalize 점진 교체) */
  border-bottom: 1px solid var(--kcp-glass-border);
  /* 크롬 텍스트 vibrancy(HIG 판정② — 본문 금지·크롬 전용). */
  text-shadow: var(--kcp-glass-text-vibrancy);
}
.cl-topbar::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0;
  height: var(--kcp-glass-edge-fade-h);
  background: linear-gradient(180deg, var(--kcp-glass-tint-nav), transparent);
  pointer-events: none;
}
.cl-tb-brand {
  width: 248px; flex-shrink: 0; height: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--kcp-space-5);
  transition: width .26s var(--v10-ease);
}
.cl-tb-brand.slim { width: 72px; padding: 0; justify-content: center; }
.cl-brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--v10-grad-blue);
  box-shadow: var(--v10-shadow-brand);
  display: grid; place-items: center;
  color: var(--kcp-fg-on-brand); font-weight: 800; font-size: var(--kcp-text-t2); letter-spacing: -.04em;
}
.cl-wordmark {
  display: flex; flex-direction: column; line-height: 1.05;
  white-space: nowrap; overflow: hidden;
}
.cl-wordmark .wm-top { display: flex; align-items: baseline; gap: 5px; font-weight: 800; font-size: var(--kcp-text-t2); letter-spacing: -.03em; }
.cl-wordmark .nhn { color: var(--kcp-color-text-primary); }
.cl-wordmark .cloud { color: var(--kcp-color-primary); }
.cl-wordmark .sub { font-size: var(--kcp-text-micro); font-weight: 600; color: var(--kcp-color-text-placeholder); letter-spacing: .02em; margin-top: 1px; }
.cl-tb-brand.slim .cl-wordmark { display: none; }
.cl-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--kcp-color-text-tertiary); }
.cl-crumbs .cur { color: var(--kcp-color-text-primary); font-weight: 700; }
.cl-crumbs i { width: 13px; height: 13px; flex-shrink: 0; opacity: .6; }
.cl-tb-spacer { flex: 1; }
.cl-tb-search {
  /* v11 — 중앙 정렬 (핸드오프 §04): 가용 폭을 채우되 460px 상한 + auto 마진으로 센터링. */
  position: relative; flex: 1; min-width: 0; max-width: 460px; margin: 0 auto; height: 38px;
  display: flex; align-items: center;
}
.cl-tb-env { flex-shrink: 0; align-self: center; }
.cl-tb-search input, .cl-tb-search > button {
  width: 100%; height: 100%;
  padding: 0 64px 0 36px;
  border-radius: var(--v10-r-sm);
  border: 1px solid var(--kcp-color-border);
  background: var(--kcp-color-bg);
  font-size: 12.5px; font-family: var(--kcp-font-sans);
  color: var(--kcp-color-text-placeholder);
  text-align: left;
  outline: none; transition: all .16s var(--v10-ease);
}
.cl-tb-search > button:hover { color: var(--kcp-color-text-secondary); border-color: var(--kcp-color-border-strong); }
.cl-tb-search input:focus, .cl-tb-search > button:focus-visible {
  border-color: var(--kcp-color-primary);
  background: var(--kcp-color-surface);
  box-shadow: 0 0 0 4px var(--v10-blue-soft);
}
.cl-tb-search input::placeholder { color: var(--kcp-color-text-placeholder); }
.cl-tb-search-ic { position: absolute; left: 12px; color: var(--kcp-color-text-tertiary); display: flex; pointer-events: none; z-index: 1; }
.cl-tb-search-ic i { width: 15px; height: 15px; }
.cl-tb-search-kbd {
  position: absolute; right: 8px;
  display: inline-flex; align-items: center; gap: 1px;
  padding: 2px 7px; border-radius: 6px;
  background: var(--kcp-color-surface-2); border: 1px solid var(--kcp-color-border);
  font-size: var(--kcp-text-micro); font-family: var(--kcp-font-mono); color: var(--kcp-color-text-tertiary);
  pointer-events: none;
}
.cl-tb-btn {
  width: 38px; height: 38px; border-radius: var(--v10-r-sm);
  border: 1px solid transparent; background: transparent;
  display: grid; place-items: center;
  color: var(--kcp-color-text-secondary); transition: all .14s var(--v10-ease); flex-shrink: 0;
}
.cl-tb-btn:hover { background: var(--kcp-color-bg); color: var(--kcp-color-text-primary); }
.cl-tb-btn:active { filter: brightness(0.95); }
.cl-tb-btn:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.cl-tb-btn i { width: 18px; height: 18px; }
.cl-tb-divider { width: 1px; height: 22px; background: var(--kcp-color-border); flex-shrink: 0; }
.cl-tb-profile {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: var(--kcp-color-primary); color: var(--kcp-fg-on-brand);
  display: grid; place-items: center; font-weight: 700; font-size: var(--kcp-text-caption);
  border: none;
  box-shadow: var(--v10-shadow-sm); transition: transform .14s var(--v10-spring);
}
.cl-tb-profile:hover { transform: scale(1.06); }
.cl-sidebar {
  width: 248px; flex-shrink: 0;
  /* ★글라스는 ::before 의사요소가 담당 — aside 본체에 backdrop-filter 를 두면
     fixed 플라이아웃(.cl-sb-children)의 기준 블록이 aside 로 바뀌어 overflow 클리핑
     (hover·클릭 하위메뉴 미표시 버그 실사례 2026-07-19). 본체 필터 재도입 금지. */
  background: transparent;
  border-right: 1px solid var(--kcp-glass-border);
  text-shadow: var(--kcp-glass-text-vibrancy);  /* 크롬 텍스트 vibrancy(HIG 판정②) */
  display: flex; flex-direction: column;
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  transition: width .26s var(--v10-ease);
  z-index: 20;
}
.cl-sidebar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* 글라스 패널(CD web-glass-shell ②) — 메시 캔버스 굴절(의사요소 = fixed 자손 무영향). */
  background: var(--kcp-glass-tint);
  -webkit-backdrop-filter: var(--kcp-glass-lens-md);
  backdrop-filter: var(--kcp-glass-lens-md);  /* 정식 렌즈 토큰(web-glass-tokens-formalize 점진 교체) */
  pointer-events: none;
}
.cl-sb-scroll {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  padding: var(--kcp-space-2) var(--kcp-space-3);
}
.cl-sidebar.slim { width: 72px; }
.cl-sb-cat { margin-bottom: 1px; }
.cl-sb-cat-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 11px;
  border-radius: var(--v10-r-sm); border: none;
  background: transparent; color: var(--kcp-color-text-secondary);
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  transition: all .14s var(--v10-ease); text-align: left;
}
.cl-sb-cat-btn:hover { background: var(--kcp-color-bg); color: var(--kcp-color-text-primary); }
.cl-sb-cat-btn.active-cat { color: var(--kcp-color-primary); }
.cl-sb-cat-btn:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.cl-sb-cat-btn i:first-child { width: 17px; height: 17px; flex-shrink: 0; }
.cl-sb-cat-btn .cat-label { flex: 1; white-space: nowrap; overflow: hidden; }
.cl-sb-cat-btn .caret { width: 14px; height: 14px; color: var(--kcp-color-text-placeholder); transition: transform .22s var(--v10-ease); flex-shrink: 0; }
.cl-sb-cat-btn.open .caret { transform: rotate(180deg); }
.cl-sb-count {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: var(--kcp-radius-pill);
  background: var(--kcp-color-surface-2); color: var(--kcp-color-text-tertiary);
  font-size: var(--kcp-text-micro); font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cl-sb-cat-btn.active-cat .cl-sb-count { background: var(--v10-blue-soft); color: var(--kcp-color-primary); }
.slim .cl-sb-cat-btn { justify-content: center; padding: 10px; }
.slim .cl-sb-cat-btn .cat-label, .slim .cl-sb-cat-btn .caret, .slim .cl-sb-cat-btn .cl-sb-count { display: none; }
.cl-sb-children {
  position: fixed; z-index: 40; display: none; gap: 1px;
  min-width: 190px; padding: 6px;
  background: var(--kcp-color-surface);
  border: 1px solid var(--kcp-color-border);
  border-radius: var(--v10-r-md); box-shadow: var(--v10-shadow-md);
}
.cl-sb-children::before {
  content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px;
}
.cl-sb-cat.fly-open > .cl-sb-children,
.cl-sidebar:not(.slim) .cl-sb-cat:hover > .cl-sb-children { display: grid; }
.cl-sb-group {
  font-size: var(--kcp-text-micro); font-weight: var(--kcp-weight-bold);
  color: var(--kcp-color-text-tertiary); text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--kcp-space-2) var(--kcp-space-3) 2px;
  margin-top: var(--kcp-space-1);
  border-top: 1px solid var(--kcp-color-border-light);
}
.cl-sb-group:first-child { border-top: 0; margin-top: 0; }
.slim .cl-sb-children { display: none !important; }
.cl-sb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--v10-r-xs);
  color: var(--kcp-color-text-secondary);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .14s var(--v10-ease);
  white-space: nowrap; overflow: hidden; position: relative;
}
.cl-sb-item:hover { background: var(--kcp-color-bg); color: var(--kcp-color-text-primary); }
.cl-sb-item:hover i { color: var(--kcp-color-text-secondary); }
.cl-sb-item:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.cl-sb-item.active {
  background: var(--v10-blue-soft);
  color: var(--kcp-color-primary); font-weight: 700;
}
.cl-sb-item.active i { color: var(--kcp-color-primary); }
.cl-sb-item.active::before {
  /* 활성 바 — 플라이아웃 패널(padding 6px) 내부 좌측 가장자리에 맞춤(-23px=구 인라인 들여쓰기 기준 → 패널 밖 이탈). */
  content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: var(--kcp-radius-sm); background: var(--kcp-color-primary);
}
.cl-sb-item i { width: 15px; height: 15px; flex-shrink: 0; color: var(--kcp-color-text-tertiary); transition: color .14s; }
.cl-sb-item .item-label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.slim .cl-sb-item { justify-content: center; padding: 9px; }
.slim .cl-sb-item .item-label { display: none; }
.slim .cl-sb-item.active::before { display: none; }
.slim .cl-sb-item i { width: 18px; height: 18px; }
.cl-sb-spacer { flex: 1; min-height: var(--kcp-space-4); }
.cl-sb-foot { border-top: 1px solid var(--kcp-color-border-light); padding-top: var(--kcp-space-3); display: flex; flex-direction: column; gap: 4px; }
.cl-sb-statuscard {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--v10-r-sm);
  background: var(--v10-mint-soft); margin-bottom: 4px;
}
.cl-sb-statuscard .pulse { position: relative; width: 8px; height: 8px; flex-shrink: 0; }
.cl-sb-statuscard .pulse .dot { position: absolute; inset: 0; border-radius: 999px; background: var(--kcp-color-success); }
.cl-sb-statuscard .pulse .ring { position: absolute; inset: 0; border-radius: 999px; background: var(--kcp-color-success); animation: v10-ping 2.2s var(--v10-ease) infinite; }
@keyframes v10-ping { 0%{transform:scale(1);opacity:.6} 70%,100%{transform:scale(2.6);opacity:0} }
.cl-sb-statuscard .txt { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.cl-sb-statuscard .t1 { font-size: 11.5px; font-weight: 700; color: var(--kcp-mint-700); white-space: nowrap; }
.cl-sb-statuscard .t2 { font-size: var(--kcp-text-micro); color: var(--kcp-mint-600); font-family: var(--kcp-font-mono); white-space: nowrap; }
.slim .cl-sb-statuscard { justify-content: center; padding: 9px; }
.slim .cl-sb-statuscard .txt { display: none; }
.cl-sb-toggle {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--v10-r-xs);
  border: none; background: transparent;
  color: var(--kcp-color-text-tertiary); font-size: var(--kcp-text-caption); font-weight: 600;
  transition: all .14s var(--v10-ease); width: 100%;
}
.cl-sb-toggle:hover { background: var(--kcp-color-bg); color: var(--kcp-color-text-primary); }
.cl-sb-toggle:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.cl-sb-toggle i { width: 16px; height: 16px; flex-shrink: 0; }
.slim .cl-sb-toggle { justify-content: center; }
.slim .cl-sb-toggle span { display: none; }
.cl-main { flex: 1; min-width: 0; background: transparent; }
.cl-page { width: min(100% - 2 * var(--kcp-gutter), var(--kcp-container-wide));
  margin-inline: auto; padding: var(--kcp-space-8) 0 var(--kcp-space-12); }
@media (max-width: 960px) {
.cl-page { padding: var(--kcp-space-5) 0 var(--kcp-space-10); }
}
@keyframes v10-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v10-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
.cl-fade { animation: v10-fade .42s var(--v10-ease) both; }
.v10-rise > * { opacity: 0; animation: v10-rise .5s var(--v10-ease) forwards; }
.v10-rise > *:nth-child(1){ animation-delay:.02s }
.v10-rise > *:nth-child(2){ animation-delay:.06s }
.v10-rise > *:nth-child(3){ animation-delay:.10s }
.v10-rise > *:nth-child(4){ animation-delay:.14s }
.v10-rise > *:nth-child(5){ animation-delay:.18s }
.v10-rise > *:nth-child(6){ animation-delay:.22s }
.v10-rise > *:nth-child(7){ animation-delay:.26s }
.v10-rise > *:nth-child(8){ animation-delay:.30s }
}
@media (prefers-reduced-motion: reduce) {
.v10-rise > * { opacity: 1; }
}
.cl-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kcp-space-4); flex-wrap: wrap; margin-bottom: var(--kcp-space-6); }
.cl-ph-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kcp-text-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kcp-color-primary); margin-bottom: 8px; }
.cl-ph-eyebrow i { width: 13px; height: 13px; }
.cl-mcp-sub { font-size: var(--kcp-text-t2); font-weight: var(--kcp-weight-bold); color: var(--kcp-color-text-primary); margin: var(--kcp-space-4) 0 var(--kcp-space-2); }
.cl-mcp-sub:first-child { margin-top: 0; }
.cl-mcp-ready { display: inline-flex; gap: var(--kcp-space-1); flex-wrap: wrap; align-items: center; }
.cl-mcp-tag { font-size: var(--kcp-text-micro); }
.cl-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--kcp-space-3); }
.cl-sheet-tile { display: flex; flex-direction: column; align-items: center; gap: var(--kcp-space-2); padding: var(--kcp-space-4) var(--kcp-space-3); border: 1px solid var(--kcp-color-border); border-radius: var(--kcp-radius-md); background: var(--kcp-color-surface); color: var(--kcp-color-text-primary); text-decoration: none; font-size: var(--kcp-text-body2); font-weight: var(--kcp-weight-medium); transition: border-color var(--kcp-duration-micro) var(--kcp-ease-out), background var(--kcp-duration-micro) var(--kcp-ease-out); }
.cl-sheet-tile:hover { border-color: var(--kcp-color-primary); background: var(--kcp-color-surface-2); }
.cl-sheet-tile:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.cl-sheet-tile i { width: 22px; height: 22px; color: var(--kcp-color-primary); }
.cl-ph-title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--kcp-color-text-primary); }
.cl-ph-sub { font-size: var(--kcp-text-body2); color: var(--kcp-color-text-tertiary); margin-top: 6px; }
.cl-ph-actions { display: flex; gap: var(--kcp-space-2); flex-shrink: 0; }
.cl-hero {
  position: relative; overflow: hidden;
  border-radius: var(--v10-r-xl);
  background: var(--v10-grad-hero);
  color: var(--kcp-fg-on-brand); padding: 30px 34px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 196px; isolation: isolate;
  box-shadow: var(--v10-shadow-md);
}
.cl-hero::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 65%); z-index: -1; /* white glow on brand hero */
}
.cl-hero::before {
  content: ""; position: absolute; left: -40px; bottom: -120px; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(55,230,134,.28), rgba(55,230,134,0) 60%); z-index: -1; /* derived: --kcp-color-mint */
}
.cl-hero-top { display: flex; align-items: center; gap: 8px; font-size: var(--kcp-text-caption); font-weight: 600; opacity: .9; flex-wrap: wrap; }
.cl-hero-top .live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cl-hero-top .live .d { width: 6px; height: 6px; border-radius: 999px; background: var(--v10-hero-beacon); box-shadow: 0 0 0 0 rgba(91,217,130,.7); animation: v10-beacon 1.8s infinite; }
@keyframes v10-beacon { 0%{box-shadow:0 0 0 0 rgba(91,217,130,.7)} 70%{box-shadow:0 0 0 7px rgba(91,217,130,0)} 100%{box-shadow:0 0 0 0 rgba(91,217,130,0)} }
.cl-hero-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.035em; margin: 12px 0 4px; }
.cl-hero-sub { font-size: var(--kcp-text-body2); opacity: .88; font-feature-settings: "tnum" 1; }
.cl-hero-meta { display: flex; gap: 22px; margin-top: var(--kcp-space-4-5); flex-wrap: wrap; }
.cl-hero-stat { display: flex; flex-direction: column; gap: 2px; }
.cl-hero-stat .v { font-size: var(--kcp-text-h1); font-weight: 800; letter-spacing: -.02em; font-feature-settings: "tnum" 1; line-height: 1; }
.cl-hero-stat .k { font-size: var(--kcp-text-micro); opacity: .82; font-weight: 600; }
.cl-hero-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); }
.cl-ring-wrap { display: flex; align-items: center; gap: 20px; }
.cl-ring { position: relative; flex-shrink: 0; }
.cl-ring .ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cl-ring .ring-pct { font-size: var(--kcp-text-display-s); font-weight: 800; letter-spacing: -.03em; font-feature-settings: "tnum" 1; line-height: 1; color: var(--kcp-color-text-primary); }
.cl-ring .ring-cap { font-size: var(--kcp-text-micro); color: var(--kcp-color-text-tertiary); font-weight: 600; margin-top: 2px; }
.cl-ring-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl-ring-leg { display: flex; align-items: center; gap: 8px; font-size: var(--kcp-text-caption); }
.cl-ring-leg .sw { width: 9px; height: 9px; border-radius: var(--kcp-radius-sm); flex-shrink: 0; }
.cl-ring-leg .lk { color: var(--kcp-color-text-secondary); }
.cl-ring-leg .lv { margin-left: auto; font-weight: 700; font-feature-settings: "tnum" 1; color: var(--kcp-color-text-primary); }
.cl-kpi {
  position: relative; overflow: hidden;
  background: var(--kcp-color-surface); border: 1px solid var(--kcp-color-border);
  border-radius: var(--v10-r-md); padding: var(--kcp-space-4-5) 20px;
  display: flex; flex-direction: column; gap: 10px; min-height: 132px;
  box-shadow: var(--v10-shadow-xs);
  transition: transform .2s var(--v10-ease), box-shadow .2s var(--v10-ease), border-color .2s var(--v10-ease);
}
.cl-kpi:hover { transform: translateY(-3px); box-shadow: var(--v10-shadow-md); border-color: var(--kcp-border-emphasis); }
.cl-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.cl-kpi-lbl { font-size: var(--kcp-text-micro); font-weight: 700; letter-spacing: .02em; color: var(--kcp-color-text-tertiary); }
.cl-kpi-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--kcp-color-bg); color: var(--kcp-color-text-secondary); }
.cl-kpi-ic i { width: 15px; height: 15px; }
.cl-kpi-num { font-size: var(--kcp-text-display-l); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-feature-settings: "tnum" 1, "lnum" 1; color: var(--kcp-color-text-primary); }
.cl-kpi-unit { font-size: var(--kcp-text-body1); font-weight: 700; color: var(--kcp-color-text-tertiary); margin-left: 3px; }
.cl-kpi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.cl-kpi-spark { height: 34px; flex: 1; max-width: 96px; }
.cl-card {
  background: var(--kcp-color-surface); border: 1px solid var(--kcp-color-border);
  border-radius: var(--v10-r-lg); overflow: hidden; box-shadow: var(--v10-shadow-xs);
}
.cl-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kcp-space-3); padding: var(--kcp-space-4-5) 22px; border-bottom: 1px solid var(--kcp-color-border-light); }
.cl-card-head h3 { margin: 0; font-size: var(--kcp-text-t2); font-weight: 700; letter-spacing: -.01em; color: var(--kcp-color-text-primary); display: flex; align-items: center; gap: 8px; }
.cl-card-head h3 i { width: 16px; height: 16px; color: var(--kcp-color-primary); }
.cl-card-head .sub { font-size: var(--kcp-text-caption); color: var(--kcp-color-text-tertiary); margin-top: 3px; }
.cl-card-body { padding: 22px; }
.cl-card-body.flush { padding: 0; }
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--v10-r-sm);
  font-size: 12.5px; font-weight: 700; border: 1px solid transparent; line-height: 1;
  transition: all .14s var(--v10-ease); white-space: nowrap; font-family: var(--kcp-font-sans);
  cursor: pointer;
}
.cl-btn:active { filter: brightness(0.96); }
.cl-btn:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.cl-btn i { width: 14px; height: 14px; }
.cl-btn--primary { background: var(--kcp-color-primary); color: var(--kcp-fg-on-brand); box-shadow: 0 4px 14px rgba(33,150,243,.25); }
.cl-btn--primary:hover { background: var(--kcp-color-primary-hover); box-shadow: 0 6px 20px rgba(33,150,243,.36); }
.cl-btn--secondary { background: var(--kcp-color-surface); color: var(--kcp-color-text-primary); border-color: var(--kcp-color-border); }
.cl-btn--secondary:hover { background: var(--kcp-color-bg); border-color: var(--kcp-color-border-strong); }
.cl-btn--ghost { background: transparent; color: var(--kcp-color-text-secondary); }
.cl-btn--ghost:hover { background: var(--kcp-color-bg); color: var(--kcp-color-text-primary); }
.cl-btn--sm { padding: 6px 11px; font-size: 11.5px; border-radius: var(--v10-r-xs); }
.cl-btn--sm i { width: 12px; height: 12px; }
.cl-iconbtn { width: 30px; height: 30px; padding: 0; border-radius: var(--v10-r-xs); }
.cl-iconbtn i { width: 14px; height: 14px; }
.cl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.cl-chip i { width: 12px; height: 12px; }
.cl-chip .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.cl-chip.success { background: var(--v10-mint-soft); color: var(--kcp-mint-700); }
.cl-chip.warn { background: var(--v10-warn-soft); color: var(--kcp-warn-700); }
.cl-chip.danger { background: var(--v10-error-soft); color: var(--kcp-danger-700); }
.cl-chip.info { background: var(--v10-blue-soft); color: var(--kcp-color-primary); }
.cl-chip.neutral { background: var(--kcp-color-surface-2); color: var(--kcp-color-text-secondary); }
.cl-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.cl-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--kcp-color-border); }
.cl-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cl-tbl thead th { text-align: left; padding: 11px var(--kcp-space-4-5); font-weight: 700; color: var(--kcp-color-text-tertiary); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--kcp-color-border); background: var(--kcp-color-surface-2); }
.cl-tbl tbody td { padding: 13px var(--kcp-space-4-5); border-bottom: 1px solid var(--kcp-color-border-light); vertical-align: middle; color: var(--kcp-color-text-secondary); }
.cl-tbl tbody tr:last-child td { border-bottom: none; }
.cl-tbl tbody tr { transition: background var(--kcp-duration-micro); }
.cl-tbl tbody tr.link { cursor: pointer; }
.cl-tbl tbody tr:hover { background: var(--kcp-color-bg); }
.cl-tbl tbody tr.row-error { box-shadow: inset 3px 0 0 var(--kcp-color-error); }
.cl-tbl .mono { font-family: var(--kcp-font-mono); font-size: 11.5px; color: var(--kcp-color-text-tertiary); }
.cl-tbl .num { text-align: right; font-feature-settings: "tnum" 1, "lnum" 1; font-weight: 700; color: var(--kcp-color-text-primary); }
.cl-tbl .strong { font-weight: 700; color: var(--kcp-color-text-primary); }
.cl-tbl-foot { padding: 14px var(--kcp-space-4-5); border-top: 1px solid var(--kcp-color-border-light); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-avatar { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0; background: var(--v10-blue-soft); color: var(--kcp-color-primary); }
.cl-filterbar { background: var(--kcp-color-surface); border: 1px solid var(--kcp-color-border); border-radius: var(--v10-r-md); padding: 11px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: var(--kcp-space-4); flex-wrap: wrap; box-shadow: var(--v10-shadow-xs); }
.cl-filterbar select.cl-input,
.cl-filterbar input[type="date"].cl-input,
.cl-filterbar input.cl-input:not(#df-q) { flex: 0 1 auto; width: auto; min-width: 96px; }
.cl-fb-input { height: 36px; padding: 0 12px; border: 1px solid var(--kcp-color-border); border-radius: var(--v10-r-sm); background: var(--kcp-color-bg); font-size: 12.5px; font-family: var(--kcp-font-sans); color: var(--kcp-color-text-primary); outline: none; transition: all .14s var(--v10-ease); }
.cl-fb-input:focus { border-color: var(--kcp-color-primary); background: var(--kcp-color-surface); box-shadow: 0 0 0 4px var(--v10-blue-soft); }
.cl-fb-input::placeholder { color: var(--kcp-color-text-placeholder); }
.cl-nt-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--v10-grad-blue); color: var(--kcp-fg-on-brand); box-shadow: var(--v10-shadow-brand); transition: transform .26s var(--v10-spring); }
.cl-nt-icon i { width: 22px; height: 22px; }
.cl-nt-icon.mint { background: var(--v10-grad-mint); box-shadow: 0 8px 22px rgba(55,230,134,.32); }
.cl-nt-icon.ink { background: var(--v10-grad-ink); box-shadow: 0 8px 22px rgba(25,25,25,.22); }
.cl-nt-icon.warn { background: var(--v10-grad-warn); box-shadow: 0 8px 22px rgba(251,199,79,.3); }
.cl-nt-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kcp-color-text-placeholder); }
.cl-nt-title { font-size: var(--kcp-text-t1); font-weight: 800; letter-spacing: -.02em; color: var(--kcp-color-text-primary); margin: 0; }
.cl-nt-desc { font-size: 12.5px; color: var(--kcp-color-text-tertiary); line-height: 1.6; flex: 1; }
.cl-nt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-nt-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; background: var(--kcp-color-bg); border: 1px solid var(--kcp-color-border-light); border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--kcp-color-text-secondary); }
.cl-nt-tag i { width: 11px; height: 11px; }
.cl-nt-cta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--kcp-text-caption); font-weight: 700; color: var(--kcp-color-primary); margin-top: 2px; }
.cl-nt-cta i { width: 14px; height: 14px; transition: transform .2s var(--v10-ease); }
.cl-cq { container: clcq / inline-size; }
.cl-opsstrip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--kcp-color-border-light); border-radius: var(--v10-r-md); overflow: hidden; border: 1px solid var(--kcp-color-border); }
@container clcq (max-width: 440px) {
.cl-opsstrip { grid-template-columns: repeat(2, 1fr); }
}
@container clcq (max-width: 240px) {
.cl-opsstrip { grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size) {
@media (max-width: 720px) {
.cl-opsstrip { grid-template-columns: repeat(2,1fr); }
}
}
.cl-barlist { display: flex; flex-direction: column; gap: 14px; }
.cl-barrow .top { display: flex; justify-content: space-between; font-size: var(--kcp-text-caption); margin-bottom: 6px; }
.cl-barrow .top .k { color: var(--kcp-color-text-secondary); font-weight: 500; }
.cl-barrow .top .v { font-weight: 700; font-feature-settings: "tnum" 1; }
.cl-barrow .track { height: 8px; background: var(--v10-track); border-radius: 999px; overflow: hidden; }
.cl-barrow .fill { height: 100%; border-radius: 999px; transition: width .6s var(--v10-ease); }
.cl-minibar { display: flex; align-items: center; gap: 7px; }
.cl-minibar .track { flex: 1; height: 6px; background: var(--v10-track); border-radius: 999px; overflow: hidden; min-width: 48px; }
.cl-minibar .fill { height: 100%; background: var(--v10-grad-blue); border-radius: 999px; }
.cl-deflist { display: flex; flex-direction: column; }
.cl-defrow { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--kcp-color-border-light); font-size: 12.5px; }
.cl-defrow:last-child { border-bottom: none; }
.cl-defrow .k { color: var(--kcp-color-text-tertiary); }
.cl-defrow .v { font-weight: 700; font-feature-settings: "tnum" 1; color: var(--kcp-color-text-primary); }
.cl-bignum { font-size: var(--kcp-text-display-l); font-weight: 800; letter-spacing: -.03em; font-feature-settings: "tnum" 1; background: var(--v10-grad-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cl-empty-v10 { min-height: 380px; display: grid; place-items: center; }
.cl-empty-v10-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cl-empty-v10-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--v10-blue-soft); color: var(--kcp-color-primary); display: grid; place-items: center; }
.cl-empty-v10-ic i { width: 30px; height: 30px; }
.cl-empty-v10-t { font-size: var(--kcp-text-t2); font-weight: 700; color: var(--kcp-color-text-primary); }
.cl-empty-v10-s { font-size: 12.5px; color: var(--kcp-color-text-tertiary); max-width: 340px; line-height: 1.6; }
.cl-kpi-spark { display: block; }
@media (max-width: 960px) {
.cl-sidebar { width: 72px; }
.cl-sidebar .cl-sb-cat-btn .cat-label, .cl-sidebar .cl-sb-cat-btn .caret { display: none; }
.cl-sidebar .cl-sb-cat-btn { justify-content: center; padding: 10px; }
.cl-sidebar .cl-sb-children { padding: 3px 0; margin: 0; }
.cl-sidebar .cl-sb-children::before { display: none; }
.cl-sidebar .cl-sb-item { justify-content: center; padding: 9px; }
.cl-sidebar .cl-sb-item .item-label { display: none; }
.cl-sidebar .cl-sb-item.active::before { display: none; }
.cl-sidebar .cl-sb-item i { width: 18px; height: 18px; }
.cl-sidebar .cl-sb-statuscard .txt { display: none; }
.cl-sidebar .cl-sb-statuscard { justify-content: center; padding: 9px; }
.cl-sidebar .cl-sb-toggle span { display: none; }
.cl-sidebar .cl-sb-toggle { justify-content: center; }
.cl-tb-brand { width: 72px; padding: 0; justify-content: center; }
.cl-tb-brand .cl-wordmark { display: none; }
}
@media (max-width: 720px) {
.cl-sidebar { display: none; }
.cl-topbar { padding: 0 var(--kcp-space-3); }
.cl-tb-brand { width: auto; min-width: 0; }
.cl-tb-search { display: none; }
.cl-tb-divider { display: none; }
.cl-tb-btn:not(.topbar-burger),
  .cl-theme-toggle,
  .topbar-user { display: none; }
.cl-crumbs { display: none; }
.cl-tb-brand { margin-right: auto; }
}
body.cl-modal-open { overflow: hidden; }
.cl-modal-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh var(--kcp-space-4); overflow-y: auto;
  background: var(--kcp-bg-overlay);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s var(--v10-ease);
}
.cl-modal-backdrop.is-open { opacity: 1; }
.cl-modal {
  /* 오버레이 레이어 글라스(HIG 판정④ — 굴절은 크롬/오버레이 전용 → 모달은 깊은 렌즈 허용). */
  background: var(--kcp-glass-tint-elevated);
  -webkit-backdrop-filter: var(--kcp-glass-lens-lg);
  backdrop-filter: var(--kcp-glass-lens-lg);
  border: 1px solid var(--kcp-glass-border);
  border-radius: var(--kcp-glass-radius); box-shadow: var(--kcp-glass-specular), var(--kcp-glass-shadow-lg);
  width: min(680px, 100%); max-height: 88dvh;
  display: flex; flex-direction: column;
  transform: translateY(8px); transition: transform .2s var(--v10-ease);
}
.cl-modal-backdrop.is-open .cl-modal { transform: none; }
.cl-modal--sm { width: min(460px, 100%); }
.cl-modal--lg { width: min(920px, 100%); }
.cl-modal--xl { width: min(1440px, 100%); max-width: min(1440px, 100%); }
.cl-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--kcp-space-4-5) 22px; border-bottom: 1px solid var(--kcp-color-border-light); flex-shrink: 0; }
.cl-modal__title { margin: 0; font-size: var(--kcp-text-t2); font-weight: 800; letter-spacing: -.02em; color: var(--kcp-color-text-primary); }
.cl-modal__close { width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--v10-r-xs); display: grid; place-items: center; color: var(--kcp-color-text-tertiary); cursor: pointer; transition: all .14s var(--v10-ease); }
.cl-modal__close:hover { background: var(--kcp-color-bg); color: var(--kcp-color-text-primary); }
.cl-modal__close:focus-visible { box-shadow: var(--kcp-shadow-focus); outline: none; }
.cl-modal__close i { width: 18px; height: 18px; }
.cl-modal__body { padding: 22px; overflow-y: auto; }
.cl-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--kcp-color-border-light); flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 720px) {
.cl-modal-backdrop { padding: 0; }
.cl-modal {
    width: 100%;
    min-height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: none;
    /* 노치 기기 상단/하단 안전 영역 — 모달이 full-screen 이므로 양방향 필요. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
@media (prefers-reduced-motion: reduce) {
.cl-modal-backdrop, .cl-modal { transition: none; }
}
.cl-pf-step { margin-bottom: var(--kcp-space-5); }
.cl-pf-step:last-child { margin-bottom: 0; }
.cl-pf-steptitle { display: flex; align-items: center; gap: var(--kcp-space-2); font-size: var(--kcp-text-body2); font-weight: 800; color: var(--kcp-color-text-primary); margin-bottom: var(--kcp-space-3); }
.cl-pf-steptitle .n { width: 20px; height: 20px; border-radius: var(--kcp-radius-pill); background: var(--v10-grad-blue); color: var(--kcp-fg-on-brand); display: grid; place-items: center; font-size: var(--kcp-text-caption); font-weight: 800; flex-shrink: 0; }
.cl-pf-intro { font-size: var(--kcp-text-body2); color: var(--kcp-color-text-tertiary); line-height: 1.6; margin: 0 0 var(--kcp-space-4); }
.cl-pf-kind { display: inline-flex; align-items: center; gap: var(--kcp-space-1); padding: var(--kcp-space-1) var(--kcp-space-3); border-radius: var(--kcp-radius-pill); font-size: var(--kcp-text-caption); font-weight: 700; margin-bottom: var(--kcp-space-3); }
.cl-pf-kind.generate { background: var(--v10-mint-soft); color: var(--kcp-mint-700); }
.cl-pf-kind.reshape { background: var(--v10-warn-soft); color: var(--kcp-warn-700); }
.cl-pf-fields { display: grid; gap: var(--kcp-space-3); grid-template-columns: repeat(2, 1fr); }
.cl-pf-field { display: flex; flex-direction: column; gap: var(--kcp-space-1); }
.cl-pf-field.full { grid-column: 1 / -1; }
.cl-pf-field label { font-size: var(--kcp-text-caption); font-weight: 700; color: var(--kcp-color-text-tertiary); }
.cl-pf-field input, .cl-pf-field select { height: 34px; padding: 0 var(--kcp-space-3); border: 1px solid var(--kcp-color-border); border-radius: var(--v10-r-sm); background: var(--kcp-color-bg); font-size: var(--kcp-text-body2); font-family: var(--kcp-font-sans); color: var(--kcp-color-text-primary); outline: none; }
.cl-pf-field input:focus, .cl-pf-field select:focus { border-color: var(--kcp-color-primary); background: var(--kcp-color-surface); box-shadow: 0 0 0 3px var(--v10-blue-soft); }
/* 팀 일괄 등록 미리보기 — 추출된 정규화 본문(team.js 가 <pre> 로 그린다). 색은 토큰이라 다크 모드를 따른다. */
.cl-pf-promptbox { position: relative; }
.cl-pf-prompt { width: 100%; box-sizing: border-box; min-height: 150px; max-height: 280px; padding: var(--kcp-space-3); padding-right: 44px; /* DS-EXEMPT: 복사 버튼 클리어런스 — 토큰 그리드(40/48) 부적합 */ border: 1px solid var(--kcp-color-border); border-radius: var(--v10-r-sm); background: var(--kcp-color-surface-2); font-family: var(--kcp-font-mono); font-size: var(--kcp-text-caption); line-height: 1.55; color: var(--kcp-color-text-secondary); resize: vertical; white-space: pre; overflow: auto; }
.cl-pf-copy { position: absolute; top: 8px; right: 8px; }
.cl-pf-drop { border: 1.5px dashed var(--kcp-color-border-strong); border-radius: var(--v10-r-md); padding: var(--kcp-space-6); text-align: center; cursor: pointer; transition: all .14s var(--v10-ease); background: var(--kcp-color-bg); }
.cl-pf-drop:focus-visible { outline: none; box-shadow: var(--kcp-shadow-focus); }
.cl-pf-drop:hover, .cl-pf-drop.dragover { border-color: var(--kcp-color-primary); background: var(--v10-blue-soft); }
.cl-pf-drop .ic { width: 36px; height: 36px; border-radius: var(--v10-r-sm); background: var(--v10-blue-soft); color: var(--kcp-color-primary); display: grid; place-items: center; margin: 0 auto var(--kcp-space-2); }
.cl-pf-drop .ic i { width: 20px; height: 20px; }
.cl-pf-drop .t { font-size: var(--kcp-text-body2); font-weight: 700; color: var(--kcp-color-text-primary); }
.cl-pf-drop .s { font-size: var(--kcp-text-caption); color: var(--kcp-color-text-tertiary); margin-top: var(--kcp-space-1); }
.cl-pf-filename { margin-top: var(--kcp-space-3); font-size: var(--kcp-text-caption); font-weight: 600; color: var(--kcp-color-primary); display: flex; align-items: center; gap: var(--kcp-space-2); justify-content: center; }
.cl-pf-result { margin-top: var(--kcp-space-3); font-size: var(--kcp-text-caption); }
@media (max-width: 720px) {
.cl-pf-fields { grid-template-columns: 1fr; }
}
.cl-ai-trigger i { width: 14px; height: 14px; }
@media (max-width: 720px) {
.page-actions { flex-wrap: wrap; }
.page-actions > .btn,
  .page-actions > .cl-btn,
  .page-actions > a.btn { flex: 1 1 auto; justify-content: center; }
.sub-form:not(.sub-form--wrap) { flex-wrap: wrap; }
.sub-form .sub-input,
  .sub-form select.sub-input { flex: 1 1 100%; min-width: 0; }
.card-body--flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cl-ph { flex-direction: column; align-items: stretch; }
.cl-ph-actions { flex-wrap: wrap; }
.cl-ph-actions > .btn,
  .cl-ph-actions > .cl-btn { flex: 1 1 auto; justify-content: center; }
}
#hub-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--kcp-space-3); margin-bottom: var(--kcp-space-5); }
.mcp-cat-group + .mcp-cat-group { margin-top: var(--kcp-space-4); }
.mcp-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mcp-tool { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--kcp-radius-md); background: var(--kcp-bg-subtle); border: 1px solid var(--kcp-color-border-light); cursor: default; transition: var(--kcp-duration-micro) var(--v10-ease); }
.mcp-tool code { font-size: var(--kcp-text-caption); color: var(--kcp-color-text-secondary); }
.mcp-tool:hover { border-color: var(--kcp-border-emphasis); background: var(--kcp-color-surface); }
.mcp-tool.is-primary { background: var(--v10-blue-soft); border-color: var(--kcp-border-emphasis); }
.mcp-tool.is-primary code { color: var(--kcp-color-primary); font-weight: 700; }
.mcp-tool.is-sub code { color: var(--kcp-color-text-tertiary); }
.mcp-tool[hidden] { display: none; }
@keyframes mcpPulse { 0% { background: var(--v10-blue-soft); } 100% { background: transparent; } }
@media (max-width: 1100px) {
#hub-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
#hub-kpis { grid-template-columns: 1fr; }
}
@keyframes cwPulseDP { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem;
  padding: 0 var(--kcp-space-1); border-radius: var(--kcp-radius-pill); font-size: var(--kcp-text-caption);
  font-weight: 700; background: color-mix(in srgb, var(--dp-actor-ck) 14%, transparent); color: var(--dp-actor-ck); }
.sb-comment { --st-c: var(--kcp-color-text-tertiary); }
.sb-discuss { --st-c: var(--kcp-color-info); }
.sb-revise  { --st-c: var(--kcp-color-warning); }
.sb-reject  { --st-c: var(--kcp-color-error); }
.sb-accept  { --st-c: var(--kcp-color-success); }
.sb-close   { --st-c: var(--dp-actor-cd); }
@keyframes ev-bk-fl {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jc) 50%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes ex-jump-fl {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kcp-color-primary) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
.kcp-status-hero{
  display: flex; align-items: center; gap: 26px;
  background: var(--kcp-color-surface); border: 1px solid var(--kcp-color-border);
  border-radius: var(--v10-r-lg); box-shadow: var(--v10-shadow-sm);
  padding: 18px 22px; margin-bottom: var(--kcp-space-5);
}
.kcp-status-hero-left{
  display: flex; flex-direction: column; gap: 3px; flex: none;
  padding-right: 24px; border-right: 1px solid var(--kcp-color-border-light);
}
.kcp-status-hero-label{
  font-size: var(--kcp-text-caption); line-height: 1; color: var(--kcp-color-text-tertiary);
}
.kcp-status-hero-num{
  font-family: var(--kcp-font-mono); font-weight: var(--kcp-weight-bold);
  font-size: var(--kcp-text-h1); line-height: 1;   /* 시안: mono 700 30px ≈ h1 토큰 */
}
.kcp-status-hero-num .kcp-status-hero-total{ color: var(--kcp-color-text-tertiary); }
.kcp-status-hero-mid{
  flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 0;
}
.kcp-status-hero-bar{
  display: flex; height: 9px; border-radius: var(--kcp-radius-pill);
  overflow: hidden; background: var(--kcp-color-surface-2);
}
.kcp-status-hero-legend{ display: flex; flex-wrap: wrap; gap: 16px; }
.kcp-status-hero-ts{
  flex: none; align-self: flex-start;
  font-family: var(--kcp-font-mono); font-size: var(--kcp-text-2xs);
  color: var(--kcp-color-success); background: var(--kcp-color-success-tint);
  padding: 4px 10px; border-radius: var(--kcp-radius-pill); white-space: nowrap;
}
@media (max-width: 720px) {
.kcp-status-hero{ flex-direction: column; align-items: stretch; gap: var(--kcp-space-4); }
.kcp-status-hero-left{ padding-right: 0; border-right: 0; }
.kcp-status-hero-ts{ align-self: flex-end; }
}
@keyframes wkPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kcp-color-primary) 34%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sec-label { font-size: var(--kcp-text-micro); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--kcp-color-text-tertiary);
  margin: var(--kcp-space-5) 2px var(--kcp-space-3); display: flex; align-items: center;
  gap: var(--kcp-space-2); }
.sec-label svg, .sec-label .lucide { width: 14px; height: 14px; color: var(--kcp-color-text-placeholder); }
.sec-label .sec-label-sub { font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--kcp-color-text-placeholder); }
.ifd-usage .mu-meta { font-size: var(--kcp-text-caption); color: var(--kcp-color-text-secondary); }
.ifd-usage .mu-meta b { font-weight: 800; color: var(--kcp-color-text-primary); }
.ifd-usage .mu-note { font-size: var(--kcp-text-micro); color: var(--kcp-color-text-placeholder); }
.axp-head .dp-ck-av { min-width: 36px; height: 36px; font-size: var(--kcp-text-caption); flex: none; }
.axp-reply .dp-ck-av { min-width: 22px; height: 22px; font-size: 8.5px; /* DS-EXEMPT: 22px 미니 아바타 내부 이니셜(캡션 미만 스케일) */ flex: none; }
.axp-next .dp-ck-av { min-width: 16px; height: 16px; font-size: 7.5px; /* DS-EXEMPT: 16px next 배지 내부 이니셜 */ }
#ax-sheet.dp-ck-sheet, #ax-modal .dp-ck-sheet { width: var(--kcp-modal-full); }
.axm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--kcp-space-6); align-items: start; }
@media (max-width: 720px) {
.axm-grid { grid-template-columns: 1fr; }
}
.axm-quorum { display: flex; align-items: center; gap: var(--kcp-space-3); margin-top: var(--kcp-space-4);
  padding-top: var(--kcp-space-3); border-top: 1px solid var(--kcp-color-border);
  font-size: var(--kcp-text-caption); color: var(--kcp-color-text-tertiary); }
.axi-tabs .ev-seg-btn i { width: 13px; height: 13px; }
:root[data-density="compact"] {
  --kcp-density-row-h: 32px;      /* DS-EXEMPT: 밀도 기준 치수(토큰 정의부) */
  --kcp-density-pad: var(--kcp-space-2);
  --kcp-density-font: var(--kcp-text-caption);
}
.cl-slot-body { container-type: inline-size; container-name: slot; }
@container slot (max-width: 640px) {
.cl-grid { grid-template-columns: 1fr; }
}
:root:not([data-density]) [data-density-default="compact"] {
  --kcp-density-row-h: 32px;      /* DS-EXEMPT: 밀도 기준 치수(토큰 정의부) */
  --kcp-density-pad: var(--kcp-space-2);
  --kcp-density-font: var(--kcp-text-caption);
}
:root[data-density="compact"] .tbl td,
:root[data-density="compact"] .tbl th,
:root:not([data-density]) [data-density-default="compact"] .tbl td,
:root:not([data-density]) [data-density-default="compact"] .tbl th { padding: var(--kcp-density-pad); font-size: var(--kcp-density-font); }
:root[data-density="compact"] .card-body { padding: var(--kcp-density-pad); }
:root:not([data-density]) [data-density-default="compact"] .card-body { padding: var(--kcp-density-pad); }
.dev-glass-kpis[data-kpi-variant="hero"] > :first-child { grid-column: span 2; }
.dev-glass-kpis[data-kpi-variant="hero"] > :first-child .dev-glass-kpi__value { font-size: var(--kcp-text-h1); }
.dev-glass-kpis[data-kpi-variant="monitor"] .dev-glass-kpi__value { font-size: var(--kcp-text-t2); }
.dev-glass-kpis[data-kpi-variant="monitor"] .dev-glass-kpi { padding: var(--kcp-density-pad); }
@container slot (max-width: 640px) {
.dev-glass-kpis[data-kpi-variant="hero"] > :first-child { grid-column: span 1; }
}