/* =========================================================
   지란지교시큐리티 디자인 시스템 제품가이드 v0.6
   - 사이트 크롬은 무채색, Brand(#FF7F00)는 마크·포인트에만
   - Accent = 제품별 메인 컬러 슬롯 (헤더의 Accent 선택으로 미리보기)
   - 컴포넌트 CSS 는 아래 'Live component samples' 블록에만 작성 (코드 패널 추출 대상)
   ========================================================= */
@font-face{font-family:"Pretendard";font-weight:45 920;font-style:normal;font-display:swap;src:url("fonts/PretendardVariable.woff2") format("woff2-variations")}
:root{
  /* Neutral — 라이트·다크 공통 중립 램프. 참고 시스템의 Cool Neutral 계열이다(라이트 의미 토큰이 알파를 얹는 베이스 #70737C · #37383C · #2E2F33 와
     불투명 정지점 #171719 · #F7F7F8 · #989BA2 · #1B1C1E · #212225 가 모두 여기 있다). 종전의 slate --gray-* 는 제거했다 */
  --neutral-0:#FFFFFF;--neutral-50:#F7F7F8;--neutral-100:#EAEBEC;--neutral-200:#C2C4C8;--neutral-300:#AEB0B6;--neutral-400:#989BA2;--neutral-500:#70737C;--neutral-600:#5A5C63;--neutral-700:#37383C;--neutral-800:#2E2F33;--neutral-850:#212225;--neutral-900:#1B1C1E;--neutral-950:#171719;--neutral-980:#0F0F10;
  /* Brand: 지란지교시큐리티 */
  --brand-50:#FFF4E8;--brand-100:#FFE4C7;--brand-200:#FFD1A3;--brand-300:#FFB870;--brand-400:#FF9C33;--brand-500:#FF7F00;--brand-600:#E06F00;--brand-700:#B85A00;--brand-800:#8A4300;--brand-900:#5C2D00;
  /* Accent: 제품 메인 컬러 슬롯 (기본값은 예시. 제품별로 교체)
     기본값 #1D4ED8 — 제품 색 요건은 '다크 기준 단계(500)에서 면 위 글자와 4.5 이상'이다.
     한 단계 밝은 #2563EB 는 500 단계가 흰 글자 4.28 · 어두운 글자 4.18 로 양쪽 다 미달이었다 */
  --accent-50:var(--prod-50,#EFF2FA);--accent-100:var(--prod-100,#D8DFF3);--accent-200:var(--prod-200,#B1BFE7);--accent-300:var(--prod-300,#849CE1);--accent-400:var(--prod-400,#5A7CDC);--accent-500:var(--prod-500,#3661DA);--accent-600:var(--prod-600,#1D4ED8);--accent-700:var(--prod-700,#173DA8);--accent-800:var(--prod-800,#112D7D);--accent-900:var(--prod-900,#0B1E52);
  /* Feedback */
  /* Hue 램프 — 참고 시스템 Atomic 값. 단계 번호는 우리 체계(50 밝음 → 950 어두움)를 유지하고 매핑은 우리 600 ← 그쪽 40 에 맞췄다:
     95→50 · 90→100 · 80→200 · 70→300 · 60→400 · 50→500 · 40→600 · 30→700 · 20→800 · 10→900 · 950 은 900 에서 보간.
     그쪽 50(우리 500)이 가족의 간판색이고 40(우리 600)이 텍스트 등급이라, 우리 라이트 기준 600 이 흰 글자와 4.5 를 넘는다. Pink 는 싣지 않았다 */
  --red-50:#FEECEC;--red-100:#FED5D5;--red-200:#FFB5B5;--red-300:#FF8C8C;--red-400:#FF6363;--red-500:#FF4242;--red-600:#E52222;--red-700:#B00C0C;--red-800:#730303;--red-900:#3B0101;--red-950:#200101;
  --orange-50:#FEF4E6;--orange-100:#FEE6C6;--orange-200:#FFD49C;--orange-300:#FFC06E;--orange-400:#FFA938;--orange-500:#FF9200;--orange-600:#D47800;--orange-700:#9C5800;--orange-800:#663A00;--orange-900:#361E00;--orange-950:#1E1000;
  --green-50:#D9FFE6;--green-100:#ACFCC7;--green-200:#7DF5A5;--green-300:#49E57D;--green-400:#1ED45A;--green-500:#00BF40;--green-600:#009632;--green-700:#006E25;--green-800:#004517;--green-900:#00240C;--green-950:#001407;
  --cyan-50:#DEFAFF;--cyan-100:#B5F4FF;--cyan-200:#8AEDFF;--cyan-300:#57DFF7;--cyan-400:#28D0ED;--cyan-500:#00BDDE;--cyan-600:#0098B2;--cyan-700:#006F82;--cyan-800:#004854;--cyan-900:#00252B;--cyan-950:#001418;
  /* 아래 넷은 아직 소비자가 없는 예비 hue — 참고 시스템에 있어 함께 싣는다 */
  --blue-50:#EAF2FE;--blue-100:#C9DEFE;--blue-200:#9EC5FF;--blue-300:#69A5FF;--blue-400:#3385FF;--blue-500:#0066FF;--blue-600:#0054D1;--blue-700:#003E9C;--blue-800:#002966;--blue-900:#001536;--blue-950:#000C1E;
  --lime-50:#E6FFD4;--lime-100:#CCFCA9;--lime-200:#AEF779;--lime-300:#88F03E;--lime-400:#6BE016;--lime-500:#58CF04;--lime-600:#48AD00;--lime-700:#347D00;--lime-800:#225200;--lime-900:#112900;--lime-950:#091700;
  --violet-50:#F0ECFE;--violet-100:#DBD3FE;--violet-200:#C0B0FF;--violet-300:#9E86FC;--violet-400:#7D5EF7;--violet-500:#6541F2;--violet-600:#4F29E5;--violet-700:#3A16C9;--violet-800:#23098F;--violet-900:#11024D;--violet-950:#09012A;
  --purple-50:#F9EDFF;--purple-100:#F2D6FF;--purple-200:#E9BAFF;--purple-300:#DE96FF;--purple-400:#D478FF;--purple-500:#CB59FF;--purple-600:#AD36E3;--purple-700:#861CB8;--purple-800:#580A7D;--purple-900:#290247;--purple-950:#170127;
  --static-white:#FFFFFF;--static-black:#000000;
  /* Semantic: Light */
  /* 라이트 의미 토큰 — 참고 시스템의 라이트 semantic 값. 그쪽은 계조를 알파로 만든다(베이스는 중립 램프) */
  --bg-canvas:var(--neutral-0);--bg-surface:var(--neutral-0);--bg-subtle:var(--neutral-50);--bg-panel:var(--neutral-100);--bg-inverse:var(--neutral-900);
  /* secondary 는 그쪽 값 그대로 88% 알파. tertiary 는 그쪽이 61%(#858688, 흰 바탕 3.64) 인데 AA 에 못 미친다. 중립 500 도 패널 위에서 3.97 이라 600 으로 둔다(캔버스 6.56 · 패널 5.5).
     disabled 도 그쪽은 16% 알파(비활성 면 위 1.15) 라 라벨이 사라진다 — 중립 400 으로 2.33 */
  --text-primary:var(--neutral-950);--text-strong:var(--static-black);--text-secondary:rgba(46,47,51,.88);--text-tertiary:var(--neutral-600);--text-disabled:var(--neutral-400);--text-inverse:var(--neutral-0);
  --fill-normal:rgba(112,115,124,.08);--fill-strong:rgba(112,115,124,.16);--fill-alternative:rgba(112,115,124,.05);
  --line-normal:rgba(112,115,124,.22);--line-neutral:rgba(112,115,124,.16);--line-alternative:rgba(112,115,124,.08);
  --border-default:var(--neutral-100);--border-strong:var(--neutral-200);--border-subtle:var(--neutral-50);--border-focus:var(--accent-500);
  --interaction-inactive:var(--neutral-400);--interaction-disable:var(--neutral-100);--dimmer:rgba(23,23,25,.52);
  --accent:var(--accent-600);--accent-hover:var(--accent-700);--accent-pressed:var(--accent-800);--accent-subtle:var(--accent-50);--accent-on:var(--static-white);--accent-text:var(--accent-600);--accent-inverse:var(--accent-300);--accent-graphic:var(--accent-600);
  --brand:var(--brand-500);--brand-subtle:var(--brand-50);
  /* 상태색 — 기준(base)은 라이트 600 · 다크 500. hover·pressed 는 기준에서 '면 위 글자색 반대 방향'으로 한 단계·두 단계 간다.
     -text 는 글자·아이콘 전용으로 한 단계 더 짙게(라이트 700 · 다크 400) — 600 으로는 success 3.77 · warning 3.19 · info 4.10 으로 AA 미달이다.
     -on 은 면 위 글자. warning·success 는 600 위에서 흰 글자가 3.19 · 3.77 로 떠서 어두운 글자를 쓰고,
     그래서 두 가족만 라이트에서도 상태가 밝은 쪽(500·400)으로 간다 — 짙은 쪽이면 어두운 글자가 3.56 · 3.26 으로 깨진다.
     --info-on 은 두지 않는다 — cyan/600 은 흰 3.42 · 어두운 5.23 이지만 글자 올라가는 면으로 쓰이지 않아 두지 않는다., --info 는 점·아이콘·보더 전용이다 */
  --danger:var(--red-600);--danger-hover:var(--red-700);--danger-pressed:var(--red-800);--danger-subtle:var(--red-50);--danger-on:var(--static-white);--danger-text:var(--red-700);
  --warning:var(--orange-600);--warning-hover:var(--orange-500);--warning-pressed:var(--orange-400);--warning-subtle:var(--orange-50);--warning-on:var(--neutral-950);--warning-text:var(--orange-700);
  --success:var(--green-600);--success-hover:var(--green-500);--success-pressed:var(--green-400);--success-subtle:var(--green-50);--success-on:var(--neutral-950);--success-text:var(--green-700);
  --info:var(--cyan-600);--info-hover:var(--cyan-700);--info-pressed:var(--cyan-800);--info-subtle:var(--cyan-50);--info-text:var(--cyan-700);
  /* 심각도 — 상태색과 같은 3층이다: 면(--sev-*) · 면 위 글자(-on) · 옅은 바탕 위 글자(-text).
     면은 태그 solid · 바 · 점 · 밴드에, -text 는 기본형 태그와 KPI 숫자처럼 글자에 쓴다.
     -on 이 가족마다 갈리는 이유 — orange/600 위의 흰 글자는 3.24, cyan/600 은 3.42, green/600 은 3.88 로 떠서 어두운 글자를 쓴다 */
  --sev-critical:var(--red-700);--sev-high:var(--red-500);--sev-medium:var(--orange-500);--sev-low:var(--cyan-500);--sev-info:var(--neutral-500);
  --sev-critical-on:var(--static-white);--sev-high-on:var(--neutral-950);--sev-medium-on:var(--neutral-950);--sev-low-on:var(--neutral-950);--sev-info-on:var(--static-white);
  --sev-critical-text:var(--red-800);--sev-high-text:var(--red-700);--sev-medium-text:var(--orange-700);--sev-low-text:var(--cyan-700);--sev-info-text:var(--neutral-600);
  --sev-critical-bg:var(--red-100);--sev-high-bg:var(--red-50);--sev-medium-bg:var(--orange-50);--sev-low-bg:var(--cyan-50);--sev-info-bg:var(--neutral-100);
  /* Spacing / Radius / Elevation / Motion */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
  --card-pad:24px;--card-gap:20px;--row-h:52px;
  --radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-full:999px;
  --shadow-none:none;--shadow-xs:0 1px 2px 0 rgba(23,23,25,.04);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.05);--shadow-md:0 4px 12px 0 rgba(23,23,25,.06),0 1px 3px 0 rgba(0,0,0,.05);--shadow-lg:0 8px 24px 0 rgba(23,23,25,.08),0 2px 6px 0 rgba(0,0,0,.05);--shadow-xl:0 12px 32px 0 rgba(23,23,25,.10),0 2px 6px 0 rgba(0,0,0,.05);
  --shadow-spread-sm:0 0 8px 0 rgba(23,23,25,.08);--shadow-spread-md:0 0 24px 0 rgba(23,23,25,.12);
  --shadow-1:var(--shadow-sm);--shadow-2:var(--shadow-md);--shadow-3:var(--shadow-xl);
  --motion-fast:120ms ease-out;--motion-base:200ms ease-in-out;--motion-slow:320ms cubic-bezier(.2,.8,.2,1);
  --font-sans:"Pretendard",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"D2Coding",monospace;
  /* 코드 패널(라이트·다크 모두 어두운 배경) */
  --code-bg:var(--neutral-950);--code-chip:var(--neutral-800);--code-chip-border:var(--neutral-700);--code-chip-fg:var(--neutral-200);--code-head-fg:var(--neutral-300);
  --header-h:64px;--sidebar-w:232px;--toc-w:200px;--shell-max:1400px;
  color-scheme:light;
}
/* 제품 메인 컬러가 상태색과 색상환 15도 미만이면 app.js 가 --accent-50~900 자리에 회색 램프를 넣고 이 속성을 켠다.
   램프 기본 매핑은 --accent → 600 이라 라이트에서는 너무 옅다 → 끝(900)으로 당기고, 진한 바탕이므로 hover·pressed 는 밝아지는 쪽으로.
   subtle 도 한 단계(50 → 100) 올린다 — 회색 50 은 흰 캔버스에서 선택 행 배경으로 보이지 않는다.
   다크 블록이 뒤에서 같은 특정도로 다시 덮으므로 이 규칙은 라이트에만 걸린다 — 순서를 바꾸면 다크에서 버튼이 캔버스에 묻힌다. */
:root[data-accent-neutral]{--accent:var(--accent-900);--accent-hover:var(--accent-800);--accent-pressed:var(--accent-700);--accent-subtle:var(--accent-100);--accent-text:var(--accent-900)}
/* 메인 컬러가 밝으면 그 위의 흰 글자가 뜬다(제품A #00AAB6 에서 2.83) — 글자를 어둡게 쓰고, 상태는 글자 반대쪽(밝은 쪽)으로 간다.
   짙어지는 방향(700·800)으로 보내면 어두운 글자가 4.05 · 2.55 로 깨진다. 판정은 applyAccent 가 하고 data-accent-light 로 켠다.
   --accent-text 도 함께 내린다 — 밝은 제품은 600 으로 글자를 쓰면 패널 위에서 2.58 이고, 800 이면 6.4 다(다크는 램프가 밝은 쪽이라 300 그대로).
   상태색과 겹치는 제품은 무채색 램프라 늘 흰 글자여서, data-accent-neutral 과는 함께 켜지지 않는다 */
:root[data-accent-light]{--accent-on:var(--neutral-950);--accent-hover:var(--accent-500);--accent-pressed:var(--accent-400);--accent-text:var(--accent-800)}   /* 라이트 기준 600 에서 나온 단계 — 다크(기준 500)는 아래 전용 블록이 다시 덮는다 */

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg-canvas:var(--neutral-900);--bg-surface:var(--neutral-850);--bg-subtle:var(--neutral-800);--bg-panel:var(--neutral-800);--bg-inverse:var(--neutral-50);
  --text-primary:var(--neutral-50);--text-strong:var(--neutral-0);--text-secondary:var(--neutral-200);--text-tertiary:var(--neutral-300);--text-disabled:var(--neutral-400);--text-inverse:var(--neutral-950);
  --fill-normal:rgba(112,115,124,.22);--fill-strong:rgba(112,115,124,.28);--fill-alternative:rgba(112,115,124,.12);
  --line-normal:rgba(112,115,124,.32);--line-neutral:rgba(112,115,124,.28);--line-alternative:rgba(112,115,124,.22);
  --border-default:var(--neutral-700);--border-strong:var(--neutral-600);--border-subtle:var(--neutral-800);--border-focus:var(--accent-400);
  --interaction-inactive:var(--neutral-600);--interaction-disable:var(--neutral-800);--dimmer:rgba(23,23,25,.74);
  /* 다크 accent — 기준만 한 단계 다르다(라이트 600 · 다크 500). 글자색(--accent-on)과 밝은 제품 판정은 라이트와 공유한다.
     흰 글자 제품은 상태가 짙은 쪽(600·700), 밝은 제품은 밝은 쪽 — 그쪽은 아래 [data-accent-light] 다크 블록이 덮는다.
     텍스트는 300(400 은 파랑 계열에서 패널 위 4.08 로 미달. 상태색 400 은 이미 밝아 통과한다),
     선택 배경은 제품과 무관한 중립 700(제품 램프 900 은 캔버스와 1.05~1.16),
     글자 없는 지표는 400(기준 500 이면 패널 위 2.47 로 3:1 미달), 반전 표면 위 Primary 는 800(--bg-inverse 가 다크에서는 밝다). 포커스 링도 400(위 줄) */
  --accent:var(--accent-500);--accent-hover:var(--accent-600);--accent-pressed:var(--accent-700);
  --accent-subtle:var(--neutral-700);--accent-text:var(--accent-300);--accent-inverse:var(--accent-800);--accent-graphic:var(--accent-400);
  --brand-subtle:#3A2410;
  /* 다크 상태색 — 기준 500. 다크에서는 네 가족 모두 면 위에 어두운 글자를 쓰므로 hover·pressed 가 밝은 쪽(400·300)이다.
     짙은 쪽으로 보내면 red-600 위의 어두운 글자가 3.71 로 깨진다. -text 는 400(캔버스 6.16~10.22) */
  --danger:var(--red-500);--danger-hover:var(--red-400);--danger-pressed:var(--red-300);--danger-subtle:rgba(255,66,66,.12);--danger-on:var(--neutral-950);--danger-text:var(--red-400);
  --warning:var(--orange-500);--warning-hover:var(--orange-400);--warning-pressed:var(--orange-300);--warning-subtle:rgba(255,146,0,.12);--warning-on:var(--neutral-950);--warning-text:var(--orange-400);
  --success:var(--green-500);--success-hover:var(--green-400);--success-pressed:var(--green-300);--success-subtle:rgba(0,191,64,.12);--success-on:var(--neutral-950);--success-text:var(--green-400);
  --info:var(--cyan-500);--info-hover:var(--cyan-400);--info-pressed:var(--cyan-300);--info-subtle:rgba(0,189,222,.12);--info-text:var(--cyan-400);
  /* 다크 심각도 — critical 과 high 가 둘 다 red-400 이라 대비 1.00 으로 같은 색이었다(5단계가 4단계로 읽혔다).
     라이트의 관계를 뒤집어 유지한다 — 어느 테마에서든 critical 이 배경과 대비가 더 크다(다크 8.98 vs 4.53). 분리 1.98(라이트는 1.72).
     다크 면은 다섯 다 밝아서 -on 은 전부 어두운 글자다. -text 는 면보다 한두 단계 밝다 — 태그가 패널 위에 놓이면 반투명 -bg 합성 바탕이 밝아져,
     red-300 은 critical 바탕에서 5.54 로 되지만 high 바탕에서 red-400 은 4.06 으로 미달이다(캔버스 기준으로만 재면 5.18 로 통과해 보인다) */
  --sev-critical:var(--red-300);--sev-high:var(--red-500);--sev-medium:var(--orange-400);--sev-low:var(--cyan-400);--sev-info:var(--neutral-300);
  --sev-critical-on:var(--neutral-950);--sev-high-on:var(--neutral-950);--sev-medium-on:var(--neutral-950);--sev-low-on:var(--neutral-950);--sev-info-on:var(--neutral-950);
  --sev-critical-text:var(--red-200);--sev-high-text:var(--red-300);--sev-medium-text:var(--orange-400);--sev-low-text:var(--cyan-400);--sev-info-text:var(--neutral-300);
  --sev-critical-bg:rgba(255,99,99,.16);--sev-high-bg:rgba(255,66,66,.12);--sev-medium-bg:rgba(255,169,56,.12);--sev-low-bg:rgba(40,208,237,.12);--sev-info-bg:rgba(112,115,124,.16);
  --code-bg:var(--neutral-950);--code-chip:var(--neutral-800);--code-chip-border:var(--neutral-700);--code-chip-fg:var(--neutral-200);--code-head-fg:var(--neutral-300);
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.35);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.4);--shadow-md:0 4px 12px 0 rgba(0,0,0,.5);--shadow-lg:0 8px 24px 0 rgba(0,0,0,.55);--shadow-xl:0 12px 32px 0 rgba(0,0,0,.6);--shadow-spread-sm:0 0 8px 0 rgba(0,0,0,.5);--shadow-spread-md:0 0 24px 0 rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg-canvas:var(--neutral-900);--bg-surface:var(--neutral-850);--bg-subtle:var(--neutral-800);--bg-panel:var(--neutral-800);--bg-inverse:var(--neutral-50);
  --text-primary:var(--neutral-50);--text-strong:var(--neutral-0);--text-secondary:var(--neutral-200);--text-tertiary:var(--neutral-300);--text-disabled:var(--neutral-400);--text-inverse:var(--neutral-950);
  --fill-normal:rgba(112,115,124,.22);--fill-strong:rgba(112,115,124,.28);--fill-alternative:rgba(112,115,124,.12);
  --line-normal:rgba(112,115,124,.32);--line-neutral:rgba(112,115,124,.28);--line-alternative:rgba(112,115,124,.22);
  --border-default:var(--neutral-700);--border-strong:var(--neutral-600);--border-subtle:var(--neutral-800);--border-focus:var(--accent-400);
  --interaction-inactive:var(--neutral-600);--interaction-disable:var(--neutral-800);--dimmer:rgba(23,23,25,.74);
  /* 다크 accent — 기준만 한 단계 다르다(라이트 600 · 다크 500). 글자색(--accent-on)과 밝은 제품 판정은 라이트와 공유한다.
     흰 글자 제품은 상태가 짙은 쪽(600·700), 밝은 제품은 밝은 쪽 — 그쪽은 아래 [data-accent-light] 다크 블록이 덮는다.
     텍스트는 300(400 은 파랑 계열에서 패널 위 4.08 로 미달. 상태색 400 은 이미 밝아 통과한다),
     선택 배경은 제품과 무관한 중립 700(제품 램프 900 은 캔버스와 1.05~1.16),
     글자 없는 지표는 400(기준 500 이면 패널 위 2.47 로 3:1 미달), 반전 표면 위 Primary 는 800(--bg-inverse 가 다크에서는 밝다). 포커스 링도 400(위 줄) */
  --accent:var(--accent-500);--accent-hover:var(--accent-600);--accent-pressed:var(--accent-700);
  --accent-subtle:var(--neutral-700);--accent-text:var(--accent-300);--accent-inverse:var(--accent-800);--accent-graphic:var(--accent-400);
  --brand-subtle:#3A2410;
  /* 다크 상태색 — 기준 500. 다크에서는 네 가족 모두 면 위에 어두운 글자를 쓰므로 hover·pressed 가 밝은 쪽(400·300)이다.
     짙은 쪽으로 보내면 red-600 위의 어두운 글자가 3.71 로 깨진다. -text 는 400(캔버스 6.16~10.22) */
  --danger:var(--red-500);--danger-hover:var(--red-400);--danger-pressed:var(--red-300);--danger-subtle:rgba(255,66,66,.12);--danger-on:var(--neutral-950);--danger-text:var(--red-400);
  --warning:var(--orange-500);--warning-hover:var(--orange-400);--warning-pressed:var(--orange-300);--warning-subtle:rgba(255,146,0,.12);--warning-on:var(--neutral-950);--warning-text:var(--orange-400);
  --success:var(--green-500);--success-hover:var(--green-400);--success-pressed:var(--green-300);--success-subtle:rgba(0,191,64,.12);--success-on:var(--neutral-950);--success-text:var(--green-400);
  --info:var(--cyan-500);--info-hover:var(--cyan-400);--info-pressed:var(--cyan-300);--info-subtle:rgba(0,189,222,.12);--info-text:var(--cyan-400);
  /* 다크 심각도 — critical 과 high 가 둘 다 red-400 이라 대비 1.00 으로 같은 색이었다(5단계가 4단계로 읽혔다).
     라이트의 관계를 뒤집어 유지한다 — 어느 테마에서든 critical 이 배경과 대비가 더 크다(다크 8.98 vs 4.53). 분리 1.98(라이트는 1.72).
     다크 면은 다섯 다 밝아서 -on 은 전부 어두운 글자다. -text 는 면보다 한두 단계 밝다 — 태그가 패널 위에 놓이면 반투명 -bg 합성 바탕이 밝아져,
     red-300 은 critical 바탕에서 5.54 로 되지만 high 바탕에서 red-400 은 4.06 으로 미달이다(캔버스 기준으로만 재면 5.18 로 통과해 보인다) */
  --sev-critical:var(--red-300);--sev-high:var(--red-500);--sev-medium:var(--orange-400);--sev-low:var(--cyan-400);--sev-info:var(--neutral-300);
  --sev-critical-on:var(--neutral-950);--sev-high-on:var(--neutral-950);--sev-medium-on:var(--neutral-950);--sev-low-on:var(--neutral-950);--sev-info-on:var(--neutral-950);
  --sev-critical-text:var(--red-200);--sev-high-text:var(--red-300);--sev-medium-text:var(--orange-400);--sev-low-text:var(--cyan-400);--sev-info-text:var(--neutral-300);
  --sev-critical-bg:rgba(255,99,99,.16);--sev-high-bg:rgba(255,66,66,.12);--sev-medium-bg:rgba(255,169,56,.12);--sev-low-bg:rgba(40,208,237,.12);--sev-info-bg:rgba(112,115,124,.16);
  --code-bg:var(--neutral-950);--code-chip:var(--neutral-800);--code-chip-border:var(--neutral-700);--code-chip-fg:var(--neutral-200);--code-head-fg:var(--neutral-300);
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.35);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.4);--shadow-md:0 4px 12px 0 rgba(0,0,0,.5);--shadow-lg:0 8px 24px 0 rgba(0,0,0,.55);--shadow-xl:0 12px 32px 0 rgba(0,0,0,.6);--shadow-spread-sm:0 0 8px 0 rgba(0,0,0,.5);--shadow-spread-md:0 0 24px 0 rgba(0,0,0,.6);
  color-scheme:dark;
}


/* 다크 + 중립 전환 — 램프를 제품 계열 중립(--neutral-*)으로 갈고 메인은 100 단계.
   라이트의 900 과 거울이다: 어두운 바탕에서는 밝은 쪽이 주인공이어야 한다(중립 600 #5A5C63 은 캔버스 위에서 2.0).
   fill 15.0 → hover 10.25 → pressed 8.26, 캔버스 경계 14.29. subtle·지표·포커스·반전은 램프 교체로 자동이라 덮지 않는다.
   특정도 (0,3,0) 으로 다크 블록과 [data-accent-light] 를 모두 이긴다 */
:root[data-theme="dark"][data-accent-neutral]{
  --accent-50:var(--neutral-50);--accent-100:var(--neutral-100);--accent-200:var(--neutral-200);--accent-300:var(--neutral-300);--accent-400:var(--neutral-400);--accent-500:var(--neutral-500);--accent-600:var(--neutral-600);--accent-700:var(--neutral-700);--accent-800:var(--neutral-800);--accent-900:var(--neutral-900);
  --accent:var(--accent-100);--accent-hover:var(--accent-200);--accent-pressed:var(--accent-300);--accent-on:var(--neutral-950);--accent-text:var(--accent-100);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-accent-neutral]{
  --accent-50:var(--neutral-50);--accent-100:var(--neutral-100);--accent-200:var(--neutral-200);--accent-300:var(--neutral-300);--accent-400:var(--neutral-400);--accent-500:var(--neutral-500);--accent-600:var(--neutral-600);--accent-700:var(--neutral-700);--accent-800:var(--neutral-800);--accent-900:var(--neutral-900);
  --accent:var(--accent-100);--accent-hover:var(--accent-200);--accent-pressed:var(--accent-300);--accent-on:var(--neutral-950);--accent-text:var(--accent-100);
}}

/* 다크 + 밝은 제품 — 기준 500 위에 어두운 글자를 쓰므로 상태는 밝은 쪽으로 간다(제품A 8.13 → 10.94 → 11.65).
   라이트의 500·400 은 기준 600 에서 나온 값이라 그대로 쓸 수 없다. 특정도 (0,3,0) 으로 다크 블록을 이긴다 */
:root[data-theme="dark"][data-accent-light]{
  --accent-hover:var(--accent-400);--accent-pressed:var(--accent-300);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-accent-light]{
  --accent-hover:var(--accent-400);--accent-pressed:var(--accent-300);
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* * 는 가상 요소를 고르지 않는다 — Accordion 의 ::details-content 높이 전환을 따로 꺼야 한다 */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::details-content{transition:none!important;animation:none!important}}
html{height:100%}
body{min-height:100%}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
/* 고정폭은 코드 블록(pre)에만. 인라인 code·kbd 등 나머지는 전부 Pretendard */
pre,pre code{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
code,kbd{font-family:var(--font-sans);font-variant-numeric:tabular-nums}
code{font-size:inherit}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- Header (브랜드 · 버전 · 상단 메뉴 · 아이콘 버튼) ---------- */
.header{position:sticky;top:0;z-index:20;height:var(--header-h);display:flex;align-items:stretch;gap:var(--space-3);padding:0 var(--space-6);background:var(--bg-canvas);max-width:var(--shell-max);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.ver{display:flex;align-items:center;font-size:12px;color:var(--text-secondary);padding:0 var(--space-3);white-space:nowrap}
/* 상단 섹션 메뉴: 우측 정렬 */
.topnav{display:flex;align-items:stretch;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:1rem;font-weight:500;color:var(--text-secondary);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--motion-fast)}
.topnav a:hover{color:var(--text-primary)}
.topnav a.active{color:var(--text-primary);font-weight:700;border-bottom-color:var(--text-primary)}
.topnav a .n{font-size:9px;font-weight:800;line-height:1;padding:2px 4px;border-radius:3px;background:var(--text-primary);color:var(--bg-surface)}
/* 우측 아이콘 버튼 3종 (Accent · 검색 · 테마) */
.header-right{display:flex;align-items:center;gap:8px;margin-left:var(--space-4)}
.hmenu{position:relative;display:flex;align-items:center}
.hbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.hbtn:hover{background:var(--fill-normal);color:var(--text-primary)}
.hbtn[aria-expanded="true"]{background:var(--fill-strong);color:var(--text-primary)}
.hbtn svg{display:block;width:20px;height:20px}
.hbtn>span{display:flex}
.hbtn .dot{position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-radius:50%;background:var(--accent-graphic);box-shadow:0 0 0 2px var(--bg-canvas)}
.hmenu-nav{display:none}   /* ☰ 는 1200 미만에서만 */
/* 테마 아이콘은 현재 상태를 보여준다(다크=달 · 라이트=해). Colors 값 모달 제목도 같은 규칙을 쓴다 — 어느 테마의 값인지 알려주기 위해.
   아래 선택자는 토큰 블록의 다크 선택자와 같아야 한다 */
.val-pop .i-sun,.val-pop .i-moon{display:flex}
.hbtn .i-moon,.val-pop .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hbtn .i-moon,:root:not([data-theme="light"]) .val-pop .i-moon{display:flex}:root:not([data-theme="light"]) .hbtn .i-sun,:root:not([data-theme="light"]) .val-pop .i-sun{display:none}}
:root[data-theme="dark"] .hbtn .i-moon,:root[data-theme="dark"] .val-pop .i-moon{display:flex}
:root[data-theme="dark"] .hbtn .i-sun,:root[data-theme="dark"] .val-pop .i-sun{display:none}
/* 팝오버 (검색 · Accent) */
.pop{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-surface);border:1px solid var(--line-neutral);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);padding:6px;z-index:30}
.search-pop{width:min(380px,calc(100vw - 32px));padding:8px}
.accent-pop{min-width:200px}
.accent-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:none;font:inherit;font-size:14px;color:var(--text-primary);text-align:left;cursor:pointer}
.accent-pop button:hover{background:var(--fill-normal)}
.accent-pop button[aria-checked="true"]{font-weight:600}
.accent-pop i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px var(--line-normal)}
.search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;font-size:14px;color:var(--text-primary);background:var(--bg-subtle);border:1px solid transparent;border-radius:var(--radius-md)}
.search:focus-within{border-color:var(--border-focus)}
.search input{border:0;background:transparent;flex:1;font:inherit;color:var(--text-primary);outline:0;min-width:0}
.search svg{width:18px;height:18px;flex:none;color:var(--text-tertiary)}
.search-results{max-height:50vh;overflow:auto;margin-top:6px;padding-top:6px;border-top:1px solid var(--line-alternative)}
.search-results a{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-primary);font-size:14px}
.search-results a:hover{background:var(--fill-normal)}
.search-results a small{color:var(--text-tertiary)}
.search-results .empty{padding:10px;color:var(--text-tertiary);font-size:12px;display:block}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:calc(100vh - var(--header-h));width:100%;max-width:var(--shell-max);margin:0 auto}
.shell.full{grid-template-columns:1fr;max-width:none}
.sidebar{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:var(--space-4) var(--space-4) var(--space-10) var(--space-4)}
.nav h5{margin:var(--space-8) 0 var(--space-2);padding:0 10px;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.34px;color:var(--text-primary);opacity:.3}
.nav h5:first-child{margin-top:0}
.nav a{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:var(--radius-lg);color:var(--text-secondary);text-decoration:none;font-size:0.875rem;font-weight:500;line-height:16px;white-space:nowrap}
.nav a:hover{background:var(--fill-alternative);color:var(--text-primary)}
.nav a.active{background:var(--fill-normal);color:var(--text-primary);font-weight:600}
.nav a.active::after{content:"";width:16px;height:16px;flex:none;margin-left:auto;opacity:.45;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l14 0%22 /%3E%3Cpath d=%22M13 18l6 -6%22 /%3E%3Cpath d=%22M13 6l6 6%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l14 0%22 /%3E%3Cpath d=%22M13 18l6 -6%22 /%3E%3Cpath d=%22M13 6l6 6%22 /%3E%3C/svg%3E") center/contain no-repeat}
/* Foundations Overview 목록의 N 배지도 같은 모양 — .base-list a span 규칙에 먹혀 평범한 회색 글씨로 보이던 것 */
.nav a .n,.base-list a b .n{font-size:10px;font-weight:800;line-height:1;padding:3px 4px;border-radius:3px;background:var(--text-primary);color:var(--bg-surface)}
.nav .sec-label{margin:var(--space-6) 0 var(--space-2);padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.34px;text-transform:uppercase;color:var(--accent-text)}
.nav .sec-label:first-child{margin-top:0}
.sidebar-foot{margin-top:var(--space-10);padding:0 10px;font-size:12px;color:var(--text-tertiary)}

.main{min-width:0;display:flex;justify-content:center}
.page{width:100%;max-width:968px;margin:0 auto;padding:var(--space-12) var(--space-16) var(--space-20)}
.shell.full .main{display:block}
.main>.home{width:100%;min-width:0}

/* 오른쪽 페이지 목차(On this page) — 1600 이상에서만 보인다. 그 아래에서는 참고 사이트와 같이 완전히 숨김 */
.toc{display:none}
.toc h6{margin:0 0 var(--space-2);padding:0 10px;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.34px;color:var(--text-primary);opacity:.3}
.toc a{display:block;padding:6px 10px;border-radius:var(--radius-md);font-size:13px;line-height:1.5;color:var(--text-secondary);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toc a.sub{padding-left:22px;font-size:12px}
.toc a:hover{background:var(--fill-alternative);color:var(--text-primary)}
.toc a.on{color:var(--text-primary);font-weight:600}
@media (min-width:1600px){
  .shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w)}
  .shell.full{grid-template-columns:1fr}
  .toc:not([hidden]){display:block;position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:var(--space-12) var(--space-6) var(--space-10) 0}
}

/* ---------- 반응형: 1200 미만은 1열 + ☰ 드로어 ---------- */
/* ☰ 드로어: 우측 오프캔버스 2단계(대메뉴 → 하위 메뉴) */
.drawer-dim{position:fixed;inset:0;background:var(--dimmer);z-index:50}
.drawer{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(480px,100%);max-width:none;height:100dvh;
  border:0;border-radius:0;box-shadow:var(--shadow-3);background:var(--bg-surface);padding:0;
  overflow:hidden;overscroll-behavior:contain;z-index:60;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--motion-base)}
.drawer:not([hidden]){transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4) var(--space-4) var(--space-2);flex:none}
.drawer-top .hbtn{color:var(--text-primary)}
.drawer-top .spacer{flex:1}
.drawer-body{flex:1;overflow-y:auto;padding:0 var(--space-5) var(--space-16)}
.drawer-body h2{font-size:20px;margin:var(--space-2) 0 var(--space-5);padding:0 10px;display:block}
.drawer .d-item{display:flex;align-items:center;gap:8px;height:48px;padding:0 10px;border-radius:var(--radius-lg);
  font-size:16px;font-weight:500;line-height:1.3;color:var(--text-secondary);text-decoration:none;width:100%;
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left}
.drawer .d-item:hover{background:var(--fill-alternative);color:var(--text-primary)}
.drawer .d-item.on{background:var(--fill-normal);color:var(--text-primary);font-weight:600}
.drawer .d-item.on::after{content:"";width:16px;height:16px;flex:none;margin-left:auto;opacity:.45;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l14 0%22 /%3E%3Cpath d=%22M13 18l6 -6%22 /%3E%3Cpath d=%22M13 6l6 6%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l14 0%22 /%3E%3Cpath d=%22M13 18l6 -6%22 /%3E%3Cpath d=%22M13 6l6 6%22 /%3E%3C/svg%3E") center/contain no-repeat}
.drawer .d-item .n{font-size:9px;font-weight:800;line-height:1;padding:2px 4px;border-radius:3px;background:var(--text-primary);color:var(--bg-surface)}
.drawer .d-group{margin:var(--space-6) 0 var(--space-2);padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.34px;color:var(--text-primary);opacity:.3}
.drawer .d-group:first-child{margin-top:0}

/* ---------- Content typography ---------- */
h1{font-size:28px;line-height:1.2;letter-spacing:-.025em;margin:0 0 var(--space-4);text-wrap:balance;display:flex;align-items:center;gap:12px}
h1 .n{font-size:12px;font-weight:800;line-height:1;padding:4px 5px;border-radius:5px;background:var(--text-primary);color:var(--bg-surface);letter-spacing:0}
.lead{font-size:16px;font-weight:500;color:var(--text-pri);margin:0 0 var(--space-10);line-height:1.6}
h2{font-size:20px;letter-spacing:-.02em;margin:var(--space-16) 0 var(--space-5);scroll-margin-top:calc(var(--header-h) + 16px)}
h2:first-of-type{margin-top:var(--space-6)}
h3{font-size:16px;margin:var(--space-10) 0 var(--space-3);letter-spacing:-.01em;scroll-margin-top:calc(var(--header-h) + 16px)}
h4{font-size:14px;margin:var(--space-6) 0 var(--space-2)}
p{margin:0 0 var(--space-3)}
ul,ol{padding-left:1.3em;max-width:70ch}li{margin-bottom:6px}
.doc-tabset{margin:var(--space-12) 0}
.doc-tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--border-default);margin:0 0 var(--space-8)}
.doc-tabs button{appearance:none;background:none;border:0;cursor:pointer;font:inherit;padding:10px 2px;font-size:16px;font-weight:500;color:var(--text-tertiary);border-bottom:2px solid transparent;margin-bottom:-1px}
.doc-tabs button.on{color:var(--text-primary);font-weight:700;border-bottom-color:var(--text-primary)}
/* Foundations */
.fnd-hero{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-10) var(--space-8);display:flex;justify-content:center;gap:var(--space-8);margin:var(--space-6) 0 var(--space-12);flex-wrap:wrap}
.fnd-hero>div{width:120px;height:120px;border-radius:var(--radius-xl);display:grid;place-items:center;font-weight:800;color:var(--text-primary)}
.base-list{border-top:1px solid var(--border-default);margin:var(--space-4) 0 var(--space-10)}
.base-list a{display:grid;grid-template-columns:160px 1fr auto;gap:var(--space-6);align-items:center;padding:22px 0;border-bottom:1px solid var(--border-default);text-decoration:none;color:inherit}
.base-list a b{font-size:16px;display:flex;align-items:center;gap:8px}   /* 배지 간격 — h1 · .nav a 와 같은 방식 */.base-list a span{font-size:14px;color:var(--text-secondary)}.base-list a svg{color:var(--text-tertiary)}
.base-list a:hover b{color:var(--accent-text)}
/* Getting Started (Home › 시작하기) — 번호 단계 목록 */
.guide-steps{list-style:none;padding:0;margin:var(--space-4) 0 var(--space-8);counter-reset:gs;max-width:none}
.guide-steps>li{position:relative;padding:0 0 var(--space-6) 40px;counter-increment:gs;font-size:14px;color:var(--text-secondary)}
.guide-steps>li::before{content:counter(gs);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-on);font-size:12px;font-weight:700;display:grid;place-items:center}
.guide-steps>li>b:first-child{display:block;font-size:16px;color:var(--text-primary);margin-bottom:4px}
.guide-steps>li b{color:var(--text-primary)}
.guide-steps .code-block{margin:var(--space-3) 0 0}
.guide-steps>li:last-child{padding-bottom:0}
/* Resources › WBS (임시 · v1.0 공개 시 제거) — 주차 간트 표 */
table.wbs{table-layout:fixed;min-width:880px;font-size:12px}
table.wbs th{height:auto;padding:8px 6px;text-align:center;line-height:1.3;white-space:normal}
table.wbs th:first-child{text-align:left;width:190px;padding-left:var(--space-4)}
table.wbs th small{display:block;font-weight:400;font-size:10px;color:var(--text-tertiary);}
table.wbs th.end{color:var(--brand)}
table.wbs td{height:38px;padding:0 6px;border-left:1px solid var(--border-subtle)}
table.wbs td:first-child{border-left:0;padding:6px var(--space-4);white-space:nowrap}
table.wbs td:first-child b{display:block;font-size:13px}
table.wbs td:first-child span{font-size:11px;color:var(--text-tertiary)}
table.wbs tr.sub td:first-child b{font-weight:500;color:var(--text-secondary);padding-left:12px}
table.wbs td.hol,table.wbs th.hol{background:var(--bg-subtle)}
table.wbs td.bar,table.wbs td.sub,table.wbs td.base,table.wbs td.final{position:relative}
table.wbs td.bar::before,table.wbs td.sub::before,table.wbs td.base::before,table.wbs td.final::before{content:"";position:absolute;inset:8px 0;background:var(--accent-graphic)}
table.wbs td.sub::before{background:var(--accent-300)}
table.wbs td.base::before{background:var(--neutral-500)}
table.wbs td.final::before{background:var(--brand)}
table.wbs td.always::before{content:"";position:absolute;inset:10px 0;border-top:1px dashed var(--border-strong);border-bottom:1px dashed var(--border-strong)}
table.wbs td.always{position:relative}
table.wbs td span.l{position:relative;z-index:1;color:var(--accent-on);font-size:11px;font-weight:600;white-space:nowrap;padding-left:2px}
table.wbs td.sub span.l{color:var(--neutral-950)}
table.wbs td.always span.l{color:var(--text-tertiary);font-weight:500}
table.wbs td.ms{box-shadow:inset -2px 0 var(--brand)}
.wbs-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--text-tertiary);margin:var(--space-3) 0 var(--space-8)}
.wbs-legend i{display:inline-block;width:14px;height:10px;border-radius:2px;background:var(--accent-graphic);vertical-align:-1px;margin-right:6px}
.wbs-legend i.sub{background:var(--accent-300)}.wbs-legend i.final{background:var(--brand)}.wbs-legend i.hol{background:var(--bg-subtle);border:1px solid var(--border-default)}.wbs-legend i.ms{width:3px;border-radius:0;background:var(--brand)}
/* 컬러바 — 참고 시스템과 같은 형태: 높이 32, 가로 간격 0(바가 붙어 한 줄), 직각 + 위아래 1px hairline, 라벨은 8px 아래 가운데.
   hover·팝오버 열림에서는 색을 그리는 i 만 bottom 고정으로 8px 위로 자란다 — 라벨은 움직이지 않는다 */
.sem-row{display:flex;gap:0;margin:var(--space-3) 0 var(--space-10)}
.sem-row>.val-cell{flex:1;min-width:0;cursor:pointer;display:block;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left}
.sem-row .bar{height:32px;background:var(--checker-bg,transparent);position:relative;border-radius:0;overflow:visible;box-shadow:inset 0 1px 0 var(--line-neutral),inset 0 -1px 0 var(--line-neutral)}
.sem-row .bar i{position:absolute;inset:auto 0 0 0;height:100%;display:block;transition:height var(--motion-slow) ease}
.sem-row .bar.line i{inset:auto 0 0 0;height:2px;top:50%;transform:translateY(-50%)}
.sem-row:not(.checker) .bar.line{background:var(--bg-subtle)}
.sem-row>.val-cell:hover .bar:not(.line) i,.sem-row>.val-cell[aria-expanded="true"] .bar:not(.line) i{height:calc(100% + 8px)}
.sem-row .bar.faint::after{content:"";position:absolute;inset:0;border:1px solid var(--line-neutral);border-radius:inherit;pointer-events:none}  /* 바탕과 구분되지 않는 색 — app.js 가 .faint 를 붙인다 */
.sem-row .name{font-size:12px;font-weight:700;color:var(--text-primary);margin-top:8px;text-align:center}
.checker{--checker-bg:repeating-conic-gradient(rgba(112,115,124,.16) 0 25%,transparent 0 50%) 0 0/12px 12px}
.pal{margin:0 0 var(--space-8)}.pal h3{margin:0 0 8px;font-size:16px}
.pal .scale{margin:0;align-items:end;grid-auto-rows:32px}.pal .scale .val-cell{height:32px;border-radius:0;transition:height var(--motion-slow) ease;box-shadow:inset 0 1px 0 var(--line-neutral),inset 0 -1px 0 var(--line-neutral)}
.pal .scale .val-cell:hover,.pal .scale .val-cell[aria-expanded="true"]{height:40px}   /* 바닥이 고정이라 위로 자라고 숫자 라벨은 버튼 하단 기준이라 제자리 */.pal .scale .val-cell i{font-size:10px;line-height:1;left:0;right:0;bottom:-18px;text-align:center;mix-blend-mode:normal;color:var(--text-primary);font-weight:700}
.pal .scale{margin-bottom:22px;gap:0;row-gap:24px}
.elev-types{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap);margin:var(--space-4) 0 var(--space-10)}
.elev-types .demo{height:176px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:grid;place-items:center}
.elev-types .demo i{display:block;width:88px;height:88px;border-radius:var(--radius-lg);background:var(--bg-surface)}
.elev-types b{display:block;margin-top:14px;font-size:16px}.elev-types span{display:block;font-size:12px;color:var(--text-tertiary);margin-top:4px}
.elev-levels{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-5);margin:var(--space-4) 0 var(--space-10)}
.elev-levels>*{aspect-ratio:1;width:100%;margin:0;padding:0;font:inherit;color:inherit;appearance:none;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);display:grid;place-items:center;position:relative}
.elev-levels>.val-cell{cursor:pointer}   /* None 은 보여 줄 값이 없어 버튼이 아니다 */
.elev-levels>* i{display:block;width:32px;height:32px;border-radius:8px;background:var(--bg-surface);border:1px solid var(--border-subtle)}
.elev-levels>* small{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:12px;color:var(--text-secondary);font-weight:500}
.elev-levels{margin-bottom:var(--space-12)}
.elev-comp{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-8);display:flex;justify-content:center;align-items:center;gap:var(--space-8);margin:var(--space-4) 0 var(--space-10)}
.elev-comp .box{width:72px;height:72px;border-radius:var(--radius-lg);background:var(--bg-surface);position:relative}
.elev-comp .box small{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);font-size:12px;color:var(--text-tertiary);background:var(--bg-panel);padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap}
.elev-comp .op{color:var(--text-disabled);font-size:20px}
.space-bars{display:flex;align-items:flex-start;gap:8px;padding:var(--space-8) var(--space-6) var(--space-6);background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);margin:var(--space-4) 0 var(--space-10);overflow-x:auto}
.space-bars>div{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.space-bars>div b{font-size:12px;font-weight:700;color:var(--success-on);background:var(--success);border-radius:var(--radius-full);padding:2px 8px;min-width:24px;text-align:center}
.space-bars>div i{display:block;height:220px;background:var(--success-subtle);border-radius:3px}
.space-bars>div.base b{background:var(--accent-graphic)}.space-bars>div.base i{background:var(--accent-subtle)}
.space-bars>div.off b{background:var(--warning);color:var(--warning-on)}.space-bars>div.off i{background:var(--warning-subtle)}   /* 4의 배수가 아닌 값 = 그리드 밖 */
.space-bars>div small{font-size:10px;color:var(--text-tertiary)}
.grid-demo{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8) 40px;margin:var(--space-4) 0 var(--space-6)}
.grid-demo .cols{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;height:200px}
.grid-demo .cols i{display:block;background:var(--danger-subtle);border-radius:2px;position:relative}
.grid-demo .cols i::after{content:attr(data-n);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;color:var(--danger-text);font-style:normal}
.grid-demo .meta-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);margin-top:10px}
.shell-demo{display:grid;grid-template-columns:120px 1fr;height:180px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;margin:var(--space-4) 0 var(--space-6);font-size:12px;color:var(--text-tertiary);}
.shell-demo>div{display:grid;place-items:center}.shell-demo .side{background:var(--bg-panel);border-right:1px solid var(--border-default)}
.shell-demo .main{padding:20px 32px;display:block}.shell-demo .main i{display:block;height:100%;border:1px dashed var(--border-strong);border-radius:6px;display:grid;place-items:center;font-style:normal}
.type-sample{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-8);text-align:center;margin:var(--space-4) 0 var(--space-10)}
.type-sample b{font-size:40px;font-weight:700;letter-spacing:-.0282em;line-height:1.3}
.type-sample .num{display:block;margin-top:12px;font-size:20px;color:var(--text-secondary);}
.wb-demo{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-8);margin:var(--space-4) 0 var(--space-10);display:grid;gap:var(--space-8)}
.wb-demo>div{max-width:420px;margin:0 auto;text-align:center}
.wb-demo p{font-size:24px;font-weight:700;line-height:1.4;margin:0}
.wb-demo p mark{background:var(--danger-subtle);color:inherit;padding:0 2px;border-radius:3px}
.wb-demo small{display:block;margin-top:10px;font-size:12px;color:var(--text-tertiary)}
table.type-table td:first-child{white-space:nowrap}
table.type-table td .smp{display:block;color:var(--text-primary)}
.icon-tools{display:flex;gap:var(--space-4);align-items:center;margin:var(--space-4) 0 var(--space-6);flex-wrap:wrap}
.icon-tools .searchbar{flex:1;min-width:260px}
.icon-grid.filled .icon-tile .o{display:none}.icon-grid:not(.filled) .icon-tile .f{display:none}
.icon-grid.filled .icon-tile.no-f{display:none}
.icon-empty{padding:var(--space-8);text-align:center;color:var(--text-tertiary);font-size:14px}
/* Icons 상세 모달 */
/* 값 팝오버 (Colors 스와치 · Elevation 타일 공용) — 누른 칸 바로 아래에 딤 없이 뜬다(위치와 줄 모두 app.js 가 만든다).
   z-index 는 sticky 헤더(20)보다 낮춰, 스크롤해 올라가면 헤더 밑으로 들어가게 한다 */
.copy-helper{position:fixed;top:-100px;left:-100px;width:1px;height:1px;opacity:0}  /* copyText() 폴백용 임시 textarea */
.val-pop{position:absolute;z-index:15;width:min(320px,calc(100vw - 32px));background:var(--bg-surface);border:1px solid var(--line-neutral);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.val-pop:focus{outline:none}
.val-pop-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-bottom:4px}
.val-pop-head svg{display:block;width:18px;height:18px}
.val-pop-head .i-sun,.val-pop-head .i-moon{color:var(--text-secondary)}
/* 머리 슬롯은 종류에 따라 하나만 — 기본(색·그림자)은 해/달, .kind-icon 은 아이콘 미리보기 + 다운로드 */
.val-pop .val-pop-icon,.val-pop .val-pop-dl{display:none}   /* .btn 이 소스상 뒤(샘플 블록)라 같은 특정도면 진다 → .val-pop 으로 올린다 */
.val-pop.kind-icon .val-pop-icon{display:flex;color:var(--text-primary)}
.val-pop.kind-icon .val-pop-dl{display:inline-flex}
.val-pop.kind-icon .val-pop-theme{display:none}
.val-pop-icon svg{display:block;width:20px;height:20px}
.val-pop-title{flex:1;min-width:0}   /* 제목이 남는 폭을 먹어 버튼 묶음이 오른쪽에 붙는다 */
.val-pop-head .btn.tertiary{flex:none;background:none;color:var(--text-secondary)}  /* 참고 디자인처럼 아이콘만 — tertiary 의 바탕을 지운다 */
.val-pop-head .btn.tertiary:hover{background:var(--fill-normal);color:var(--text-primary)}
.val-pop-head .btn.tertiary.copied{color:var(--accent-text)}
.i-copied{display:none}
.copied .i-copy{display:none}
.copied .i-copied{display:flex}
.val-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.9}
.val-row>b{flex:none;width:48px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.val-row>span{color:var(--text-primary);overflow-wrap:anywhere;white-space:pre-line}  /* 그림자는 겹마다 줄바꿈 */
.val-row>i{flex:none;width:14px;height:14px;margin-top:6px;border-radius:50%;border:1px solid var(--line-normal)}

/* Overview card grid */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--card-gap);margin:var(--space-6) 0}
.ov-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-surface);transition:border-color .15s,box-shadow .15s}
.ov-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.ov-card .thumb{height:200px;background:var(--bg-subtle);display:grid;place-items:center;color:var(--text-tertiary);border-bottom:1px solid var(--border-default);overflow:hidden;padding:16px}
.ov-card .thumb>svg{width:96px;height:64px}
.ov-card .thumb .mini{transform:scale(.85);pointer-events:none;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%}
.ov-card .label{padding:14px 16px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.ov-card .label small{margin-left:auto;font-weight:500;color:var(--text-tertiary);font-size:12px}
/* Home hero + section cards */
.hero{padding:var(--space-20) var(--space-16) var(--space-16);text-align:center;position:relative;overflow:hidden}
.hero h1{justify-content:center;font-size:48px;margin:0 0 var(--space-4)}
.hero .sub{color:var(--text-secondary);margin:0 auto}
.hero svg.wave{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:160px;z-index:-1;opacity:.9;color:var(--border-default)}
.home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--card-gap);padding:var(--space-12) var(--space-16) var(--space-20);max-width:1120px;margin:0 auto}
.home-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-surface);transition:box-shadow .15s,border-color .15s}
.home-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.home-card .art{height:220px;background:var(--bg-subtle);padding:var(--space-8);display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.home-card .art b{font-size:28px;line-height:1.25;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.home-card .art span{font-size:24px;font-weight:700;color:var(--text-disabled);letter-spacing:-.01em}
.home-card .body{padding:18px 20px}
.home-card .body b{display:block;font-size:16px;margin-bottom:4px}
.home-card .body span{font-size:14px;color:var(--text-secondary)}

/* Anatomy / demo panel */
.panel{background:var(--bg-panel);border-radius:var(--radius-lg);padding:var(--space-12) var(--space-10);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-6);margin:var(--space-4) 0 var(--space-6);position:relative;min-height:200px}
.panel.left{justify-content:flex-start}
.ph{border:1.5px dashed var(--border-default);border-radius:var(--radius-lg);background:var(--bg-subtle);color:var(--text-tertiary);display:grid;place-items:center;text-align:center;font-size:12px;padding:var(--space-8);min-height:180px;margin:var(--space-4) 0 var(--space-6)}
.ph small{display:block;margin-top:4px;font-size:12px;opacity:.8}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap);margin:var(--space-4) 0 var(--space-6)}
.dodont>div{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface);border:1px solid var(--border-default)}
.dodont>div .body{padding:var(--card-pad)}
.dodont>div .body::before{display:block;font-size:16px;font-weight:800;letter-spacing:.04em;margin-bottom:10px}
.dodont .do .body::before{content:"DO";color:var(--success-text)}.dodont .dont .body::before{content:"DON'T";color:var(--danger-text)}
.dodont p{font-size:14px;margin:0}
/* Colors › 브랜드 역할 맵 표: 역할 열은 내용 폭(정렬은 다른 표와 같은 좌측) */
table.roles th:first-child,table.roles td:first-child{white-space:nowrap;width:240px}
table{width:100%;border-collapse:collapse;font-size:14px;margin:var(--space-4) 0 var(--space-6)}
.tablewrap{overflow-x:auto;border:1px solid var(--border-default);border-radius:var(--radius-lg);margin:var(--space-8) 0}
.tablewrap table{margin:0}
th{text-align:left;font-weight:600;color:var(--text-tertiary);font-size:12px;height:44px;padding:0 var(--space-4);border-bottom:1px solid var(--border-default);white-space:nowrap;background:var(--bg-subtle)}
td{height:var(--row-h);padding:12px var(--space-4);border-bottom:1px solid var(--border-default);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td code{background:var(--bg-panel);padding:1px 6px;border-radius:4px;font-size:12px}
table.props td:nth-child(1){font-weight:600;white-space:nowrap;font-size:12px}
table.props td:nth-child(2) code,table.props td:nth-child(3) code{white-space:pre-wrap;word-break:break-word}
table.props td:nth-child(4){color:var(--text-secondary)}
pre{background:var(--code-bg);color:var(--code-chip-fg);padding:var(--space-5);border-radius:var(--radius-lg);overflow-x:auto;font-size:12px;line-height:1.6;margin:var(--space-4) 0 var(--space-6);tab-size:2}
pre code{font-size:inherit}
.spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--card-gap);margin:var(--space-4) 0 var(--space-6)}
.spec>div{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.spec b{display:block;font-size:12px;color:var(--text-tertiary);font-weight:600;margin-bottom:6px}
.spec span{font-size:14px}
div.kv{display:grid;grid-template-columns:180px 1fr;gap:10px 24px;font-size:14px;margin:var(--space-6) 0}
div.kv dt{color:var(--text-tertiary);font-weight:500}div.kv dd{margin:0}

/* ---------- Code panel (예제 블록) ---------- */
.example{border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;margin:var(--space-4) 0 var(--space-8);background:var(--bg-surface)}
.example-preview{margin:0;border-radius:0;min-height:160px;overflow:auto;padding:var(--space-10) var(--space-8)}
/* 사용자가 연 달력·드롭다운(ds.js 가 data-ds-opened 표시)은 섹션 밖으로 나가야 하므로 잘림 해제·위로 올림. 정적으로 열린 예제는 제외 */
.example:has(.datepicker.open[data-ds-opened="1"],.dropdown.open[data-ds-opened="1"]){overflow:visible}
.example:has(.datepicker.open[data-ds-opened="1"],.dropdown.open[data-ds-opened="1"]) .example-preview{overflow:visible;border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:1}
.example-preview.left{justify-content:flex-start}
.example-preview.top{align-items:flex-start}
.example-preview.stack{flex-direction:column;align-items:stretch;}
.example-preview.stack.center{align-items:center}
.example-preview.tall{min-height:340px;align-items:flex-start}
.example-preview.white{background:var(--bg-surface)}
.example-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;border-top:1px solid var(--border-default);background:var(--bg-surface)}
.code-tabs{display:flex;gap:2px;background:var(--bg-panel);border-radius:8px;padding:2px}
.code-tabs button{font:inherit;font-size:12px;font-weight:600;padding:5px 12px;border:0;border-radius:6px;background:transparent;color:var(--text-tertiary);cursor:pointer}
.code-tabs button.on{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-1)}
.example-actions{display:flex;gap:6px}
.example-actions button,.code-head button,.copy-btn{font:inherit;font-size:12px;padding:5px 10px;border:1px solid var(--border-default);background:var(--bg-surface);border-radius:6px;cursor:pointer;color:var(--text-primary);white-space:nowrap}
.example-actions button:hover,.code-head button:hover,.copy-btn:hover{background:var(--bg-subtle)}
.example-code{border-top:1px solid var(--border-default);background:var(--code-bg)}
.example-code pre{margin:0;border-radius:0;border:0}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 0;font-size:12px;color:var(--code-head-fg);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.code-head button{background:var(--code-chip);border-color:var(--code-chip-border);color:var(--code-chip-fg);text-transform:none;letter-spacing:0;font-weight:500}
.code-head button:hover{background:var(--code-chip-border)}
.code-block{position:relative;margin:var(--space-4) 0 var(--space-6)}
.code-block pre{margin:0}
.code-block .copy-btn{position:absolute;top:10px;right:10px;background:var(--code-chip);border-color:var(--code-chip-border);color:var(--code-chip-fg)}
.code-block .copy-btn:hover{background:var(--code-chip-border)}
.tk-tag{color:var(--cyan-300)}.tk-attr{color:var(--red-300)}.tk-str{color:var(--lime-300)}.tk-cmt{color:var(--code-head-fg);font-style:italic}.tk-kw{color:var(--violet-300)}.tk-punc{color:var(--code-chip-fg)}
.uses{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-6)}
.uses a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:6px 12px;border-radius:var(--radius-full);border:1px solid var(--border-default);text-decoration:none;color:var(--text-primary)}
.uses a:hover{border-color:var(--accent);color:var(--accent-text)}
[data-copy-text]{cursor:pointer}
.copied{outline:2px solid var(--accent)!important;outline-offset:2px}

/* Iconography */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:12px;margin:var(--space-4) 0 var(--space-6)}
.icon-tile{appearance:none;font:inherit;aspect-ratio:1;display:grid;place-items:center;padding:0;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:border-color .12s,background .12s}
.icon-tile:hover{border-color:var(--accent);background:var(--accent-subtle)}
.icon-tile.on{border-color:var(--accent);background:var(--accent-subtle)}
.icon-tile svg{width:24px;height:24px;display:block}
.icon-tile>span{display:flex}
/* Color visuals */
.scale{display:grid;grid-template-columns:repeat(var(--cols,12),1fr);gap:6px;margin:6px 0 20px}
.scale .val-cell{height:56px;border-radius:6px;position:relative;box-shadow:inset 0 0 0 1px var(--line-neutral);display:block;width:100%;margin:0;padding:0;border:0;appearance:none;font:inherit;color:inherit;cursor:pointer}
.scale .val-cell i{position:absolute;left:8px;bottom:6px;font-style:normal;font-size:12px;font-weight:600;mix-blend-mode:difference;color:var(--static-white)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--card-gap);margin:var(--space-4) 0 var(--space-6)}
.product{border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden}
.product .sw{height:72px;display:flex;align-items:flex-end;padding:10px 12px;color:var(--static-white);font-weight:700;font-size:12px}
.product .body{padding:12px 14px;font-size:12px;color:var(--text-secondary)}
.product .body b{display:block;color:var(--text-primary);font-size:14px}
.product button{margin-top:8px;font:inherit;font-size:12px;border:1px solid var(--border-default);background:var(--bg-surface);border-radius:6px;padding:4px 10px;cursor:pointer;color:var(--text-primary)}
/* Elevation / radius */
.tiles{display:flex;flex-wrap:wrap;gap:var(--space-5);margin:var(--space-3) 0 var(--space-6)}
.tiles div{width:150px;height:96px;background:var(--bg-surface);border-radius:var(--radius-lg);display:grid;place-items:center;font-size:12px;color:var(--text-secondary);text-align:center}
.tiles.radius div{background:var(--accent-subtle);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-text);width:96px}


/* ---------- 반응형 (max-width) ----------
   이 블록은 반드시 문서·컴포넌트 규칙 **뒤**, 샘플 마커 **앞**에 둔다.
   미디어 쿼리는 특정도를 올리지 않아, 앞에 두면 같은 셀렉터를 쓰는 뒤쪽 규칙에 그냥 진다(한동안 여러 줄이 죽어 있었다).
   샘플 블록은 @media 금지(sync-css.mjs 가 통째로 복사)이므로 마커 안으로 넘어가면 안 된다. */
@media (max-width:1199px){
  .topnav{display:none}
  .header-right{margin-left:auto}   /* 상단 메뉴가 사라져도 아이콘 그룹은 오른쪽에 붙는다 */
  .sidebar{display:none}
  .shell{grid-template-columns:1fr}
  .hmenu-nav{display:flex}
  .page{padding:var(--space-10) var(--space-8) var(--space-16)}
  .page table{display:block;max-width:100%;overflow-x:auto}
  .tablewrap table{display:table}
}
@media (max-width:767px){
  .header{padding:0 var(--space-4);gap:var(--space-2)}
  .page{padding:var(--space-8) var(--space-5) var(--space-12)}
  .drawer{padding:var(--space-5) var(--space-5) var(--space-16)}
  .home-grid{grid-template-columns:1fr;padding:var(--space-8) var(--space-5) var(--space-12)}
  .hero{padding:var(--space-12) var(--space-5) var(--space-10)}
  .hero h1{font-size:clamp(28px,7vw,48px)}
  div.kv{grid-template-columns:minmax(0,1fr);gap:2px 0}
  div.kv dt{margin-top:var(--space-3)}
  div.kv dd{min-width:0}
  .page code,.page dd,.page li{overflow-wrap:anywhere}
  .page .popup,.page .popup.lg{width:100%;max-width:100%}
  .base-list a{grid-template-columns:1fr;gap:var(--space-2)}
  .dodont,.elev-types{grid-template-columns:1fr}
  .elev-levels{grid-template-columns:repeat(3,1fr)}
  /* 칸 수는 팔레트마다 다르다 — pal() 이 --cols* 로 넘기므로 인라인 style 과 달리 여기서 덮을 수 있다 */
  .scale{grid-template-columns:repeat(var(--cols-sm,7),1fr)}
  .pal .scale{row-gap:26px}   /* 줄이 접히면 아랫줄 스와치가 윗줄 숫자 라벨(bottom:-18px)을 덮는다 */
  .grid-demo .cols{overflow-x:auto}
  .fnd-hero>div{width:96px;height:96px}
  .tiles div{width:120px}
}
@media (max-width:479px){
  .ver{display:none}
  .brand{font-size:16px}
  .scale{grid-template-columns:repeat(var(--cols-xs,5),1fr)}
}


/* ---------- Live component samples ---------- */
/* 글리프(체크·마이너스·스위치 손잡이·셰브론·슬래시·정렬 화살표)는 icons-css.js 가 assets/icons 의 SVG 를 data URI mask 로 삽입. 직접 수정 금지 */
/* 이 블록의 규칙은 컴포넌트 페이지의 "HTML+CSS" 탭과 components.json 으로 추출됩니다.
   규칙: 평면 규칙만(@media 금지, @keyframes 는 허용), 셀렉터는 컴포넌트 클래스로 시작, 색은 var(--*) 토큰만. */
/* Typography utilities */
.t-display-1{font-size:40px;line-height:52px;font-weight:700;letter-spacing:-0.0282em}
.t-display-2{font-size:32px;line-height:44px;font-weight:700;letter-spacing:-0.0253em}
.t-heading-1{font-size:28px;line-height:38px;font-weight:700;letter-spacing:-0.0236em}
.t-heading-2{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-0.023em}
.t-heading-3{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-0.012em}
.t-heading-4{font-size:18px;line-height:26px;font-weight:700;letter-spacing:-0.002em}
.t-title-1{font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.0057em}
.t-title-2{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.0145em}
.t-body-1{font-size:16px;line-height:26px;font-weight:400;letter-spacing:0.0057em}
.t-body-2{font-size:14px;line-height:22px;font-weight:400;letter-spacing:0.0145em}
.t-label-1{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.0145em}
.t-label-2{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.0252em}
.t-caption-1{font-size:12px;line-height:18px;font-weight:400;letter-spacing:0.0252em}
.t-caption-2{font-size:10px;line-height:14px;font-weight:400;letter-spacing:0.0311em}
.t-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.keep-all{word-break:keep-all;overflow-wrap:anywhere}

/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 20px;border-radius:var(--radius-md);border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--motion-fast),border-color var(--motion-fast)}
.btn.sm{height:36px;padding:0 14px;font-size:12px}
.btn.md{height:44px;padding:0 20px;font-size:14px}
.btn.lg{height:52px;padding:0 26px;font-size:16px}
.btn.primary{background:var(--accent);color:var(--accent-on)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.primary:active{background:var(--accent-pressed)}
/* 중립 버튼의 면은 반투명 3단(fill alternative .03 → normal .05 → strong .10)이다 — 바탕이 무엇이든 같은 간격으로 어두워진다.
   종전에는 tertiary 의 rest 가 불투명 --bg-panel 이고 hover 가 --fill-normal 이어서, 흰 바탕에서 합성하면 두 색이 사실상 같아 hover 가 보이지 않았다.
   secondary·danger outline 은 면을 비워 아웃라인으로 둔다 — 패널·카드 위에서 흰 칩처럼 떠 보이지 않는다 */
.btn.secondary{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}
.btn.secondary:hover{background:var(--fill-normal)}
.btn.secondary:active{background:var(--fill-strong)}
.btn.tertiary{background:var(--fill-alternative);color:var(--text-primary)}
.btn.tertiary:hover{background:var(--fill-normal)}
.btn.tertiary:active{background:var(--fill-strong)}
.btn.text{background:transparent;color:var(--accent-text);padding-left:8px;padding-right:8px}
.btn.text:hover{background:var(--accent-subtle)}
.btn.text:active{background:var(--fill-strong)}   /* --accent-100 은 프리미티브이고 다크에 오버라이드가 없다. 중립 모드에선 hover 와 같은 색이 됐다 */
.btn.danger{background:var(--danger);color:var(--danger-on)}
.btn.danger:hover{background:var(--danger-hover)}
.btn.danger:active{background:var(--danger-pressed)}
.btn.danger.secondary{background:transparent;color:var(--danger-text);border-color:var(--danger)}
.btn.danger.secondary:hover{background:var(--danger-subtle)}
.btn.danger.secondary:active{background:var(--fill-strong)}   /* 위 .danger.secondary 가 :hover·:active 를 덮으므로 뒤에 둔다 */
.btn.icon{width:44px;padding:0}
.btn.icon.sm{width:36px}
.btn.icon.lg{width:52px}
.btn svg{width:18px;height:18px;flex:none}
.btn.sm svg{width:16px;height:16px}
.btn.lg svg{width:20px;height:20px}
.btn.block{width:100%}
/* 비활성은 opacity 가 아니라 전용 토큰이다 — opacity .4 로 덮으면 비활성 danger 에 붉은 기가, 비활성 outline 에 제품색 보더가 남아 변형마다 다른 색으로 읽혔다.
   fill 은 회색 면 + 회색 라벨, outline 은 면을 비우고 보더만 회색으로. 비활성 텍스트는 WCAG 1.4.3 적용 제외다(라이트 2.08 · 다크 4.80).
   .btn.danger.secondary 가 (0,3,0) 이라 전용 규칙을 (0,4,0) 으로 둬야 이긴다 — 순서만으로는 안 된다.
   링크는 disabled 속성을 못 가진다 — React as="a" + disabled 는 aria-disabled 를 낸다 */
.btn[disabled],.btn[aria-disabled="true"]{background:var(--interaction-disable);border-color:transparent;color:var(--text-disabled);cursor:not-allowed;pointer-events:none}
.btn.secondary[disabled],.btn.secondary[aria-disabled="true"]{background:transparent;border-color:var(--interaction-disable)}
.btn.danger.secondary[disabled],.btn.danger.secondary[aria-disabled="true"]{background:transparent;border-color:var(--interaction-disable);color:var(--text-disabled)}   /* 변형이 color 를 (0,3,0) 으로 쥐고 있어 여기서 다시 회색으로 돌려야 한다 */
.btn.text[disabled],.btn.text[aria-disabled="true"]{background:transparent}
.btn.loading{position:relative;color:transparent;pointer-events:none}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--fill-strong);border-top-color:var(--accent-on);border-radius:50%;animation:spin .8s linear infinite}
.btn.secondary.loading::after,.btn.tertiary.loading::after{border-top-color:var(--accent)}
.btn.text.loading::after{border-top-color:var(--accent-text)}
.btn.danger.loading::after{border-top-color:var(--danger-on)}
.btn.danger.secondary.loading::after{border-top-color:var(--danger)}
.btn-group{display:inline-flex;gap:8px;align-items:center}
.btn-group.end{justify-content:flex-end;width:100%}

/* Text Field */
.field{display:flex;flex-direction:column;gap:6px;min-width:260px;font-size:14px}
.field label{font-weight:600}
.field label em{color:var(--danger-text);font-style:normal;margin-left:2px}
.field input,.field textarea{height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 14px;font:inherit;font-size:14px;background:var(--bg-surface);color:var(--text-primary);width:100%;transition:border-color var(--motion-fast)}
.field textarea{height:auto;min-height:96px;padding:10px 14px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--text-disabled)}
.field input:hover,.field textarea:hover{border-color:var(--border-strong)}
.field input:focus,.field textarea:focus-within{border-color:var(--border-focus)}
.field input:disabled,.field textarea:disabled{background:var(--bg-panel);color:var(--text-disabled);cursor:not-allowed}
.field input:read-only{background:var(--bg-subtle)}
.field .help{color:var(--text-tertiary);font-size:12px}
.field.error input,.field.error textarea,.field.error .affix{border-color:var(--danger)}
.field.error .help{color:var(--danger-text)}
.field.sm input{height:36px;font-size:12px;padding:0 12px}
.field.lg input{height:52px;font-size:16px;padding:0 16px}
.field .affix{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface)}
.field .affix input{border:0;height:auto;padding:0;flex:1;background:transparent;outline:0;min-width:0}
.field .affix:focus-within{border-color:var(--border-focus)}
.field .affix span{color:var(--text-tertiary);font-size:12px;white-space:nowrap}
.field .counter{margin-left:auto;font-size:12px;color:var(--text-tertiary)}
.field .row{display:flex;justify-content:space-between;align-items:baseline}

/* Search */
.searchbar{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;min-width:280px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);transition:border-color var(--motion-fast)}
.searchbar svg{width:18px;height:18px;color:var(--text-tertiary);flex:none}
.searchbar input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;color:var(--text-primary);outline:0;min-width:0}
.searchbar input::placeholder{color:var(--text-disabled)}
.searchbar:focus-within{border-color:var(--border-focus)}
.searchbar .clear{border:0;padding:0;background:var(--bg-panel);color:var(--text-secondary);width:20px;height:20px;border-radius:50%;font:inherit;font-size:12px;line-height:0;cursor:pointer;display:grid;place-items:center;flex:none}
.searchbar .clear svg{display:block;width:12px;height:12px}
.searchbar kbd{font-size:12px;color:var(--text-tertiary);border:1px solid var(--border-default);border-radius:4px;padding:1px 5px;background:var(--bg-subtle)}
.searchbar.lg{height:48px}
.searchbar.lg input{font-size:16px}
.searchbar.block{width:100%}

/* Select Button (Segmented) */
.select-btn{display:inline-flex;padding:3px;gap:2px;background:var(--bg-panel);border-radius:var(--radius-md)}
.select-btn button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 14px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.select-btn button svg{width:16px;height:16px;flex:none}
.select-btn button:hover{color:var(--text-primary)}
.select-btn button.on{background:var(--bg-surface);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-1)}
.select-btn button[disabled]{opacity:.4;cursor:not-allowed}
.select-btn.outline{background:transparent;padding:0;gap:0;border:1px solid var(--border-strong);overflow:hidden}
.select-btn.outline button{border-radius:0;height:36px}
.select-btn.outline button+button{border-left:1px solid var(--border-strong)}
.select-btn.outline button.on{background:var(--accent-subtle);color:var(--accent-text);box-shadow:none}

/* Slider */
.slider{display:flex;flex-direction:column;gap:8px;min-width:280px;font-size:12px}
.slider .row{display:flex;justify-content:space-between;color:var(--text-secondary)}
.slider .val{font-weight:600;color:var(--text-primary)}
.slider input[type=range]{width:100%;height:20px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent);margin-top:-7px;box-shadow:var(--shadow-1)}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent)}
.slider input[type=range]:disabled{opacity:.4;cursor:not-allowed}
.slider .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);padding:0 4px}

/* Date Picker */
.datepicker{display:inline-flex;flex-direction:column;gap:6px;position:relative;font-size:14px}
.datepicker label{font-weight:600}
.datepicker .field-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;min-width:240px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);font:inherit;font-size:14px;color:var(--text-primary);cursor:pointer;text-align:left}
.datepicker .field-btn:hover{border-color:var(--border-strong)}
.datepicker .field-btn svg{width:18px;height:18px;color:var(--text-tertiary);margin-left:auto}
.datepicker .field-btn .placeholder{color:var(--text-disabled)}
.datepicker .field-btn .sep{color:var(--text-disabled)}
.datepicker.open .field-btn{border-color:var(--border-focus)}
.datepicker .calendar{position:absolute;top:calc(100% + 4px);left:0;z-index:5;display:none}
.datepicker.open .calendar{display:block}
.calendar{width:296px;padding:12px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);font-size:12px}
.calendar .cal-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;padding:0 4px 8px}
.calendar .cal-head button{border:0;background:transparent;font:inherit;cursor:pointer;width:28px;height:28px;border-radius:6px;color:var(--text-secondary)}
.calendar .cal-head button:hover{background:var(--bg-subtle)}
.calendar .cal-head button{display:grid;place-items:center}
.calendar .cal-head button svg{width:16px;height:16px}
.calendar .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.calendar .dow{font-size:12px;color:var(--text-tertiary);padding:4px 0;font-weight:600}
.calendar .day{height:34px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:12px;color:var(--text-primary);cursor:pointer}
.calendar .day:hover{background:var(--bg-subtle)}
.calendar .day.muted{color:var(--text-disabled)}
.calendar .day.today{font-weight:700;color:var(--accent-text)}
.calendar .day.in-range{background:var(--accent-subtle);border-radius:0}
.calendar .day.on{background:var(--accent);color:var(--accent-on);font-weight:600}
.calendar .day[disabled]{opacity:.35;cursor:not-allowed}
.calendar .cal-foot{display:flex;justify-content:flex-end;gap:6px;padding-top:10px;margin-top:6px;border-top:1px solid var(--border-default)}

/* Checkbox */
.checkbox{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer;line-height:1.4}
.checkbox input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:2px 0 0;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-surface);display:grid;place-items:center;cursor:inherit;transition:background var(--motion-fast),border-color var(--motion-fast)}
.checkbox input:hover{border-color:var(--border-strong)}
.checkbox input:checked,.checkbox input:indeterminate,.checkbox input.mixed{background:var(--accent);border-color:var(--accent)}
.checkbox input:checked::after{content:"";width:12px;height:12px;background:var(--accent-on);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l5 5l10 -10%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l5 5l10 -10%22 /%3E%3C/svg%3E") center/contain no-repeat}
.checkbox input:indeterminate::after,.checkbox input.mixed::after{content:"";width:12px;height:12px;background:var(--accent-on);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l14 0%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l14 0%22 /%3E%3C/svg%3E") center/contain no-repeat}
.checkbox input:disabled{opacity:.4;cursor:not-allowed}
.checkbox input:disabled+span{color:var(--text-disabled)}
.checkbox small{display:block;color:var(--text-tertiary);font-size:12px;font-weight:400}
.checkbox-group{display:flex;flex-direction:column;gap:12px}
.checkbox-group.row{flex-direction:row;gap:24px}

/* Radio Button */
.radio{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer;line-height:1.4}
.radio input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:2px 0 0;border:1.5px solid var(--border-strong);border-radius:50%;background:var(--bg-surface);cursor:inherit;display:grid;place-items:center;transition:background var(--motion-fast),border-color var(--motion-fast)}
.radio input:hover{border-color:var(--border-strong)}
.radio input:checked{border-color:var(--accent);background:var(--accent)}
.radio input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-on)}
.radio input:disabled{opacity:.4;cursor:not-allowed}
.radio input:disabled+span{color:var(--text-disabled)}
.radio small{display:block;color:var(--text-tertiary);font-size:12px;font-weight:400}
.radio-group{display:flex;flex-direction:column;gap:12px}
.radio-group.row{flex-direction:row;gap:24px}
.radio.card{padding:14px 16px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);min-width:220px;flex-direction:row;gap:8px;box-shadow:none;position:static}   /* 뒤의 .card 규칙이 column·그림자를 흘려보내므로 되돌린다 */
.radio.card:has(input:checked){border-color:var(--accent);background:var(--accent-subtle)}

/* Switch */
.switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:24px;margin:0;border-radius:var(--radius-full);background:var(--border-strong);position:relative;cursor:inherit;transition:background var(--motion-fast)}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--static-white);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22black%22 %3E%3Cpath d=%22M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z%22 /%3E%3C/svg%3E") center/120% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22black%22 %3E%3Cpath d=%22M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z%22 /%3E%3C/svg%3E") center/120% no-repeat;transition:left var(--motion-fast)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{left:22px}
.switch input:disabled{opacity:.4;cursor:not-allowed}
.switch input:disabled+span{color:var(--text-disabled)}
.switch.sm input{width:36px;height:20px}
.switch.sm input::after{width:16px;height:16px}
.switch.sm input:checked::after{left:18px}
.switch.label-left{flex-direction:row-reverse}

/* Chip */
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-full);border:1px solid var(--border-strong);background:var(--bg-surface);font:inherit;font-size:12px;font-weight:500;color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),border-color var(--motion-fast)}
.chip:hover{background:var(--bg-subtle)}
.chip.on{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent-text)}
.chip[aria-pressed]::before{content:"";width:14px;height:14px;flex:none;background:var(--text-disabled);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l5 5l10 -10%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12l5 5l10 -10%22 /%3E%3C/svg%3E") center/contain no-repeat}
.chip.on::before{background:currentColor}
.chip .x{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--bg-panel);color:var(--text-secondary);font-size:10px;line-height:1;margin-right:-4px}
.chip .x:hover{background:var(--border-strong)}
.chip .x svg{width:10px;height:10px}
.chip.sm{height:26px;padding:0 10px;font-size:12px}
.chip[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}

/* Tag */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--radius-full);line-height:1.6;background:var(--bg-panel);color:var(--text-secondary);white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* 기본형(서브틀)은 자기 가족의 옅은 바탕(-bg) + 글자용 단계(-text)를 쓴다.
   종전에는 바탕이 --danger-subtle/--warning-subtle/--info-subtle 이고 글자가 면 토큰이어서,
   라이트에서 medium 2.07 · low 2.60 · high 3.44 · info 4.34 로 다섯 중 넷이 AA 미달이었다.
   critical 과 high 이 같은 --danger-subtle 을 쓰던 것도 -bg 로 갈려(red-100 vs red-50) 단계 구분이 생긴다 */
.tag.critical{background:var(--sev-critical-bg);color:var(--sev-critical-text)}
.tag.high{background:var(--sev-high-bg);color:var(--sev-high-text)}
.tag.medium{background:var(--sev-medium-bg);color:var(--sev-medium-text)}
.tag.low{background:var(--sev-low-bg);color:var(--sev-low-text)}
.tag.info{background:var(--sev-info-bg);color:var(--sev-info-text)}
.tag.ok{background:var(--success-subtle);color:var(--success-text)}
.tag.accent{background:var(--accent-subtle);color:var(--accent-text)}
.tag.sm{font-size:12px;padding:1px 8px}
.tag.lg{font-size:12px;padding:5px 12px}
.tag.plain::before{display:none}
.tag.outline{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
/* solid 는 면마다 글자색이 다르다 — 종전의 color:#fff 한 줄이 다섯 색을 덮어 10 조합 중 8이 AA 미달이었다
   (라이트 high 3.76 · medium 2.15 · low 2.77, 다크는 다섯 전부 1.67~2.77). 톤이 없는 .tag.solid 는 기본 회색 바탕을 그대로 쓴다 */
.tag.solid.critical{background:var(--sev-critical);color:var(--sev-critical-on)}
.tag.solid.high{background:var(--sev-high);color:var(--sev-high-on)}
.tag.solid.medium{background:var(--sev-medium);color:var(--sev-medium-on)}
.tag.solid.low{background:var(--sev-low);color:var(--sev-low-on)}
.tag.solid.info{background:var(--sev-info);color:var(--sev-info-on)}   /* 규칙이 없어 .tag.info 의 회색 바탕에 흰 글자가 얹혀 라이트에서 1.1 이었다 — 예제 두 곳이 인라인으로 우회하고 있었다 */
.tag.solid.ok{background:var(--success);color:var(--success-on)}
.tag.solid.accent{background:var(--accent);color:var(--accent-on)}   /* React Tone 이 accent+solid 를 허용하는데 규칙이 없었다 */

/* Dropdown */
.dropdown{position:relative;display:inline-block}
.dropdown .trigger{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);font:inherit;font-size:14px;color:var(--text-primary);cursor:pointer;min-width:200px;justify-content:space-between}
.dropdown .trigger:hover{border-color:var(--border-strong)}
.dropdown .trigger .placeholder{color:var(--text-disabled)}
.dropdown .trigger::after{content:"";width:16px;height:16px;flex:none;background:var(--text-secondary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 9l6 6l6 -6%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 9l6 6l6 -6%22 /%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--motion-fast)}
.dropdown.open .trigger{border-color:var(--border-focus)}
.dropdown.open .trigger::after{transform:rotate(180deg)}
.dropdown .trigger[disabled]{opacity:.4;cursor:not-allowed}
.dropdown .menu{position:absolute;top:calc(100% + 4px);left:0;display:none;z-index:5;min-width:100%}
.dropdown.open .menu{display:block}
.dropdown.up .menu{top:auto;bottom:calc(100% + 4px)}   /* 아래 공간이 모자라면 위로 뒤집어 연다(ds.js 가 열 때 계산) */
.menu{min-width:200px;padding:6px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-2);list-style:none;margin:0;max-height:min(320px,60vh);overflow-y:auto;overscroll-behavior:contain}   /* 항목 약 8개까지 보이고 그 뒤로는 메뉴 안에서 스크롤 */
.menu-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:14px;cursor:pointer;color:var(--text-primary);white-space:nowrap}
.menu-item:hover{background:var(--bg-subtle)}
.menu-item.on{background:var(--accent-subtle);color:var(--accent-text);font-weight:600}
.menu-item.danger{color:var(--danger-text)}
.menu-item[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.menu-item .hint{margin-left:auto;font-size:12px;color:var(--text-tertiary)}
.menu-item svg{width:16px;height:16px;flex:none;color:var(--text-tertiary)}
.menu-sep{height:1px;background:var(--border-default);margin:6px 0}
.menu-label{padding:6px 10px 2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);font-weight:600}

/* Tab */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--border-default);width:100%}
.tabs .tab{display:inline-flex;align-items:center;padding:10px 2px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--text-tertiary);cursor:pointer;white-space:nowrap;transition:color var(--motion-fast)}
.tabs .tab:hover{color:var(--text-primary)}
.tabs .tab.on{color:var(--text-primary);font-weight:700;border-bottom-color:var(--text-primary)}
.tabs .tab[disabled]{opacity:.4;cursor:not-allowed}
.tabs .tab .count{font-size:12px;font-weight:700;padding:1px 6px;border-radius:var(--radius-full);background:var(--bg-panel);color:var(--text-secondary);min-width:0;height:auto}
.tabs .tab.on .count{background:var(--accent-subtle);color:var(--accent-text)}
.tabs.accent .tab.on{color:var(--accent-text);border-bottom-color:var(--accent-graphic)}
.tabs.pill{display:inline-flex;gap:4px;border:0;background:var(--bg-panel);padding:3px;border-radius:var(--radius-md);width:auto}
.tabs.pill .tab{padding:6px 14px;border:0;border-radius:6px;margin:0;font-size:14px}
.tabs.pill .tab.on{background:var(--bg-surface);box-shadow:var(--shadow-1);font-weight:600}
.tabs.sm .tab{font-size:12px;padding:8px 12px}
.tab-panel{padding:20px 0;font-size:14px;color:var(--text-secondary)}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:14px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.breadcrumb li{display:flex;align-items:center;gap:6px;color:var(--text-tertiary);margin:0}
.breadcrumb li+li::before{content:"";width:12px;height:12px;flex:none;background:var(--text-disabled);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M17 5l-10 14%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M17 5l-10 14%22 /%3E%3C/svg%3E") center/contain no-repeat}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--text-primary);text-decoration:underline}
.breadcrumb li[aria-current]{color:var(--text-primary);font-weight:600}
.breadcrumb .more{padding:0 4px;color:var(--text-tertiary);cursor:pointer;border:0;background:none;font:inherit}
.breadcrumb .more:hover{color:var(--text-primary)}
.breadcrumb .more svg{width:14px;height:14px;display:block}
/* 라벨이 길면 220 에서 말줄임. 현재 항목의 라벨은 span 으로 감싼다 — li 가 flex 라 맨 텍스트(익명 flex 항목)에는 ellipsis 가 적용되지 않는다 */
.breadcrumb li>a:not(.icon),.breadcrumb li>span{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 아이콘만 있는 링크와 … 버튼은 클릭 영역을 24x24 로(WCAG 2.5.8). 보이는 모양과 행 높이는 그대로 — 말줄임 쪽에 overflow:hidden 이 있어 같은 요소에 겹치면 안 된다 */
.breadcrumb li>a.icon,.breadcrumb .more{position:relative}
.breadcrumb li>a.icon::after,.breadcrumb .more::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:24px;min-width:24px;transform:translate(-50%,-50%)}

/* Pagination */
.pagination{display:inline-flex;align-items:center;gap:4px}
.pagination button{min-width:36px;height:36px;padding:0 8px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;font:inherit;font-size:14px;color:var(--text-secondary);cursor:pointer}
.pagination button:hover{background:var(--bg-subtle);color:var(--text-primary)}
.pagination button.on{background:var(--accent);color:var(--accent-on);font-weight:600}
.pagination button[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.pagination button svg{width:16px;height:16px;display:block}
.pagination .gap{min-width:36px;text-align:center;color:var(--text-disabled)}
.pagination.compact button{min-width:32px;height:32px;font-size:12px}
.pagination.outline button{border-color:var(--border-default);background:var(--bg-surface)}
.pagination.outline button.on{border-color:var(--accent); color:var(--accent-text);}
.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;font-size:12px;color:var(--text-secondary)}
.pagination-bar .dropdown .trigger{height:32px;min-width:120px;font-size:12px}

/* Navigation (Side) */
.sidenav{width:240px;padding:12px;background:var(--bg-surface);border-right:1px solid var(--border-default);display:flex;flex-direction:column;gap:2px;font-size:14px;min-height:320px}
.sidenav .group{margin:12px 12px 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);font-weight:600}
.sidenav a{display:flex;align-items:center;font-weight:500;gap:10px;padding:8px 12px;border-radius:var(--radius-md);text-decoration:none;color:var(--text-primary);white-space:nowrap}
.sidenav a:hover{background:var(--bg-subtle)}
.sidenav a.on{background:var(--accent-subtle);color:var(--accent-text);font-weight:600}
.sidenav a svg{width:18px;height:18px;flex:none;color:var(--text-tertiary)}
.sidenav a.on svg{color:var(--accent-text)}
.sidenav a .count{margin-left:auto}
.sidenav a.sub{padding-left:40px;font-size:14px;color:var(--text-secondary)}
.sidenav.collapsed{width:64px;padding:12px 10px}
.sidenav.collapsed a{justify-content:center;padding:10px 0}
.sidenav.collapsed a span,.sidenav.collapsed .group,.sidenav.collapsed a .count{display:none}
.sidenav .foot{margin-top:auto;padding:12px;font-size:12px;color:var(--text-tertiary)}

/* Top Navigation */
.topbar{display:flex;align-items:center;gap:16px;height:56px;padding:0 20px;background:var(--bg-surface);border-bottom:1px solid var(--border-default);width:100%}
.topbar .logo{font-weight:700;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary);white-space:nowrap}
.topbar .logo i{width:24px;height:24px;border-radius:6px;background:var(--accent);display:inline-block}
.topbar .logo small{font-weight:500;color:var(--text-tertiary);font-size:12px}
.topbar nav{display:flex;gap:4px;margin-left:8px}
.topbar nav a{padding:8px 12px;border-radius:var(--radius-md);text-decoration:none;color:var(--text-secondary);font-size:14px;font-weight:500;white-space:nowrap}
.topbar nav a:hover{color:var(--text-primary)}
.topbar nav a.on{color:var(--text-primary);background:var(--bg-panel)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.topbar .searchbar{min-width:220px;height:36px}
.topbar .divider.vertical{height:20px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-subtle);color:var(--accent-text);display:inline-grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.avatar.sm{width:24px;height:24px;font-size:10px}

/* Accordion */
.accordion{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);width:100%;interpolate-size:allow-keywords}
.accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;font-weight:600;font-size:16px;line-height:24px;cursor:pointer}   /* Title/1 의 line-height — 빠지면 본문 1.6 을 상속해 헤더가 54 가 된다(스펙 52) */
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"";width:16px;height:16px;flex:none;background:var(--text-secondary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 9l6 6l6 -6%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 9l6 6l6 -6%22 /%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--motion-fast)}
.accordion[open] summary::after{transform:rotate(180deg)}
.accordion summary small{font-weight:400;color:var(--text-tertiary);margin-left:auto;font-size:12px}
.accordion summary>svg{flex:none}   /* 제목이 길어도 찌그러지지 않게 — 셰브론(::after)과 같은 보호 */
.accordion .body{padding:0 20px 16px;font-size:14px;color:var(--text-secondary);line-height:1.6}
.accordion.disabled{opacity:.5;pointer-events:none}
.accordion.flat{border:0;border-radius:0;border-bottom:1px solid var(--border-default)}
.accordion.flat summary{padding:14px 4px}
.accordion.flat .body{padding:0 4px 16px}
.accordion.flat:last-child{border-bottom:0}   /* 카드 바닥에 선이 매달리지 않게 */
.accordion-group{display:flex;flex-direction:column;gap:8px;width:100%}
.accordion-group.flat{gap:0;background:var(--bg-surface);padding:0 20px;border-radius:var(--radius-lg)}
/* 열고 닫을 때 높이 보간. @supports 를 쓰지 않는다 — 코드 패널 추출기가 평면 규칙만 읽고,
   ::details-content 를 모르는 브라우저는 셀렉터 자체가 무효가 되어 규칙이 버려지고 즉시 열린다(= 종전 동작). */
.accordion::details-content{height:0;overflow:hidden;transition:height var(--motion-base),content-visibility var(--motion-base);transition-behavior:allow-discrete}
.accordion[open]::details-content{height:auto}

/* Card — .card 는 이름을 공유한다: .radio.card(Radio) · .chart-card(Data Visual) · .ov-card/.home-card(크롬).
   아래에 선언을 추가하면 label.radio.card 가 함께 받으므로 Radio Button 페이지를 확인할 것.
   .card .title 은 .skeleton.title 과도 겹친다(loading 예제) — 뒤에 오는 .skeleton.title 이 height·width 를 이겨 지금은 무해 */
.card{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:var(--card-pad);display:flex;flex-direction:column;gap:12px;min-width:260px;position:relative}
.card .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .title{font-size:16px;line-height:24px;font-weight:600;margin:0}   /* Title/1 의 line-height — 빠지면 문맥에 따라 25.6(문서)·28(패턴)·26.4(패키지)로 흔들린다 */
.card .desc{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.6}
.card .card-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:4px}   /* wrap 없으면 액션이 카드 왼쪽으로 넘치고, 시작 방향 넘침은 스크롤로 닿지 않는다 */
/* button.card 는 UA 기본값(Arial·가운데 정렬·outset 보더)이 새므로 리셋한다. .bordered 보다 앞 — 같은 특정도라 뒤에 두면 border:0 이 보더를 지운다 */
.card.clickable{appearance:none;border:0;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:box-shadow var(--motion-fast)}
.card.bordered{box-shadow:none;border:1px solid var(--border-default)}
.card.clickable:hover{box-shadow:var(--shadow-2)}
.card.on{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-1);background:var(--accent-subtle)}
.card.clickable.on:hover{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-2)}
.card.bordered.on{box-shadow:inset 0 0 0 2px var(--accent)}   /* 보더형은 링만 — 위 .on 이 뒤라 shadow/1 을 되찾는다 */
.card.compact{padding:16px;gap:8px}
.card.compact .title{font-size:14px;line-height:20px}
/* 표·목록을 카드 폭까지 꽉 채울 때. 헤더만 자체 여백을 갖는다 */
.card.flush{padding:0;gap:0;overflow:hidden}
.card.flush .card-head{padding:16px var(--card-pad)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--card-gap);width:100%}

/* Popup */
.popup-backdrop{position:fixed;inset:0;background:var(--dimmer);display:grid;place-items:center;z-index:100}
.popup{position:relative;width:440px;max-width:100%;background:var(--bg-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);padding:24px;display:flex;flex-direction:column;gap:12px}
.popup .popup-title{font-size:18px;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.popup .popup-body{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.6}
.popup .popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.popup .popup-close{position:absolute;top:16px;right:16px}
.popup.lg{width:640px}
.popup.danger .popup-title{color:var(--danger-text)}
.popup .popup-form{display:flex;flex-direction:column;gap:16px;margin-top:4px}

/* Tooltip */
.tooltip-wrap{position:relative;display:inline-flex}
.tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--bg-inverse);color:var(--text-inverse);font-size:12px;font-weight:500;line-height:1.4;padding:6px 10px;border-radius:6px;white-space:nowrap;box-shadow:var(--shadow-2);z-index:10;pointer-events:none;opacity:0;transition:opacity var(--motion-fast)}
.tooltip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--bg-inverse)}
.tooltip.bottom{bottom:auto;top:calc(100% + 8px)}
.tooltip.bottom::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--bg-inverse)}
.tooltip.left{left:auto;right:calc(100% + 8px);bottom:50%;transform:translateY(50%)}
.tooltip.left::after{left:100%;top:50%;transform:translateY(-50%);border-top-color:transparent;border-left-color:var(--bg-inverse)}
.tooltip.right{left:calc(100% + 8px);bottom:50%;transform:translateY(50%)}
.tooltip.right::after{left:auto;right:100%;top:50%;transform:translateY(-50%);border-top-color:transparent;border-right-color:var(--bg-inverse)}
.tooltip-wrap:hover .tooltip,.tooltip-wrap:focus-within .tooltip,.tooltip-wrap.show .tooltip{opacity:1}
.tooltip.multi{white-space:normal;width:220px;text-align:left}

/* Notification */
.notice{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius-lg);padding:14px 18px;font-size:14px;border:1px solid var(--border-default);width:100%;background:var(--bg-surface);line-height:1.55}
.notice b{display:block;margin-bottom:2px}
.notice .ico{flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--info-text);margin-top:1px}
.notice .ico svg{width:20px;height:20px}
.notice .close{margin-left:auto;flex:none;border:0;background:transparent;color:var(--text-tertiary);font:inherit;line-height:1;cursor:pointer;padding:2px;display:grid;place-items:center}
.notice .close svg{width:14px;height:14px}
.notice .close:hover{color:var(--text-primary)}
.notice .actions{display:flex;gap:8px;margin-top:8px}
.notice.info{background:var(--info-subtle);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.notice.success{background:var(--success-subtle);border-color:color-mix(in srgb,var(--success) 30%,transparent)}
.notice.success .ico{color:var(--success-text)}
.notice.warning{background:var(--warning-subtle);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}
.notice.warning .ico{color:var(--warning-text)}
.notice.danger{background:var(--danger-subtle);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.notice.danger .ico{color:var(--danger-text)}
.toast{display:inline-flex;align-items:center;gap:12px;width:360px;max-width:100%;padding:12px 16px;border-radius:var(--radius-lg);background:var(--bg-inverse);color:var(--text-inverse);font-size:14px;box-shadow:var(--shadow-3)}
/* 반전 표면(--bg-inverse) 위라 -text 를 쓰면 더 나빠진다 — 기준 단계를 그대로 쓴다(라이트 4.74 · 다크 2.37) */
.toast .ico{flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--success)}
.toast .ico svg{width:20px;height:20px}
.toast.danger .ico{color:var(--danger)}
.toast .action{margin-left:auto;background:none;border:0;color:var(--accent-inverse);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.toast .action:hover{text-decoration:underline}
.toast-stack{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast-stack.fixed{position:fixed;right:24px;bottom:24px;z-index:110}
.banner{display:flex;align-items:center;gap:12px;width:100%;padding:10px 20px;background:var(--accent);color:var(--accent-on);font-size:14px;font-weight:500}
.banner .btn{margin-left:auto}
.banner.warning{background:var(--warning);color:var(--warning-on)}
.banner.danger{background:var(--danger);color:var(--danger-on)}

/* Loading */
.spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--border-default);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.spinner.sm{width:16px;height:16px;border-width:2px}
.spinner.lg{width:40px;height:40px;border-width:4px}
.spinner-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;color:var(--text-tertiary)}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--bg-panel) 25%,var(--bg-subtle) 50%,var(--bg-panel) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.skeleton.title{height:20px;width:40%}
.skeleton.text{width:100%}
.skeleton.text.short{width:70%}
.skeleton.circle{width:40px;height:40px;border-radius:50%;flex:none}
.skeleton.rect{height:120px;border-radius:var(--radius-md)}
.skeleton-row{display:flex;align-items:center;gap:12px;width:100%}
.skeleton-row .lines{flex:1;display:flex;flex-direction:column;gap:8px}
@keyframes shimmer{to{background-position:-200% 0}}
.progress{width:100%;height:8px;border-radius:var(--radius-full);background:var(--fill-strong);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent-graphic);border-radius:var(--radius-full);transition:width var(--motion-base)}
.progress.sm{height:4px}
.progress.success i{background:var(--success)}
.progress.danger i{background:var(--danger)}
.progress-row{display:flex;flex-direction:column;gap:6px;width:100%;font-size:12px;color:var(--text-secondary)}
.progress-row .row{display:flex;justify-content:space-between}

/* Indicator */
.indicator{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.indicator::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--interaction-inactive);flex:none}
.indicator.ok::before{background:var(--success)}
.indicator.warn::before{background:var(--warning)}
.indicator.danger::before{background:var(--danger)}
.indicator.info::before{background:var(--info)}
.indicator.accent::before{background:var(--accent-graphic)}
.indicator.pulse::before{box-shadow:0 0 0 0 var(--danger);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-full);background:var(--danger);color:var(--danger-on);font-size:12px;font-weight:700;line-height:1;}
.count.neutral{background:var(--bg-panel);color:var(--text-secondary)}
.count.accent{background:var(--accent);color:var(--accent-on)}
.count.dot{min-width:8px;width:8px;height:8px;padding:0}
.with-count{position:relative;display:inline-flex}
.with-count .count{position:absolute;top:-6px;right:-6px}
.steps{display:flex;align-items:center;gap:8px;list-style:none;padding:0;margin:0;font-size:12px;max-width:none}
.steps li{display:flex;align-items:center;gap:8px;color:var(--text-tertiary);margin:0;white-space:nowrap}
.steps li i{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:var(--fill-strong);color:var(--text-secondary);flex:none}
.steps li i svg{width:12px;height:12px;stroke-width:3}
.steps li.done i{background:var(--success);color:var(--success-on)}
.steps li.on{color:var(--text-primary);font-weight:600}
.steps li.on i{background:var(--accent);color:var(--accent-on)}
.steps li+li::before{content:"";width:32px;height:1px;background:var(--border-strong)}
.steps.vertical{flex-direction:column;align-items:flex-start}
.steps.vertical li+li::before{display:none}

/* Divider */
.divider{border:0;border-top:1px solid var(--border-default);margin:16px 0;width:100%}
.divider.strong{border-color:var(--border-strong)}
.divider.dashed{border-top-style:dashed}
.divider.label{display:flex;align-items:center;gap:12px;border:0;font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.divider.label::before,.divider.label::after{content:"";flex:1;height:1px;background:var(--border-default)}
.divider.vertical{width:1px;height:24px;border:0;background:var(--border-default);margin:0 12px;display:inline-block;vertical-align:middle;flex:none}

/* Table / Data Table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);width:100%}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin:0}
.tbl th{text-align:left;font-weight:600;color:var(--text-tertiary);font-size:12px;height:44px;padding:0 16px;border-bottom:1px solid var(--border-default);white-space:nowrap;background:var(--bg-subtle)}
.tbl td{height:52px;padding:12px 16px;border-bottom:1px solid var(--border-default);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--bg-subtle)}
.tbl tr.on td{background:var(--accent-subtle)}
.tbl tr.disabled td{color:var(--text-disabled)}
.tbl.compact td{height:44px;padding:8px 16px;font-size:14px}
.tbl.compact th{height:40px}
.tbl.zebra tbody tr:nth-child(even) td{background:var(--bg-subtle)}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-3px;opacity:.45;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 9l4 -4l4 4m-4 -4v14%22 /%3E%3Cpath d=%22M21 15l-4 4l-4 -4m4 4v-14%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 9l4 -4l4 4m-4 -4v14%22 /%3E%3Cpath d=%22M21 15l-4 4l-4 -4m4 4v-14%22 /%3E%3C/svg%3E") center/contain no-repeat}
.tbl th.sortable:hover{color:var(--text-primary)}
.tbl th.sorted{color:var(--accent-text)}
.tbl th.sorted::after{opacity:1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 5l0 14%22 /%3E%3Cpath d=%22M18 11l-6 -6%22 /%3E%3Cpath d=%22M6 11l6 -6%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 5l0 14%22 /%3E%3Cpath d=%22M18 11l-6 -6%22 /%3E%3Cpath d=%22M6 11l6 -6%22 /%3E%3C/svg%3E") center/contain no-repeat}
.tbl th.sorted.desc::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 5l0 14%22 /%3E%3Cpath d=%22M18 13l-6 6%22 /%3E%3Cpath d=%22M6 13l6 6%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 5l0 14%22 /%3E%3Cpath d=%22M18 13l-6 6%22 /%3E%3Cpath d=%22M6 13l6 6%22 /%3E%3C/svg%3E") center/contain no-repeat}
.tbl .num{text-align:right;}
.tbl td svg{vertical-align:middle}
.tbl .check{width:44px;padding-right:0}
.tbl .check .checkbox{vertical-align:middle}
.tbl .actions{text-align:right;white-space:nowrap}
.tbl .actions .btn{height:32px;padding:0 10px;font-size:12px}
.tbl.kv th{width:200px;height:auto;padding:12px 16px;font-size:14px;color:var(--text-secondary);font-weight:500;border-right:1px solid var(--border-default);white-space:normal;vertical-align:top}
.tbl.kv td{height:auto}
.tbl td.empty{display:table-cell;text-align:center;color:var(--text-tertiary);height:auto;padding:24px 16px;font-size:14px;border:none;border-radius:0;background:transparent}
.tbl .link{color:var(--accent-text);text-decoration:none;font-weight:500}
.tbl .link:hover{text-decoration:underline}
.action-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--accent-subtle);border-bottom:1px solid var(--border-default);font-size:14px}
.action-bar b{color:var(--accent-text)}
.action-bar .spacer{flex:1}
.action-bar .btn{height:32px;padding:0 12px;font-size:12px}

/* List */
.list{list-style:none;margin:0;padding:0;width:100%;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;max-width:none}
.list li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-default);font-size:14px;margin:0}
.list li:last-child{border-bottom:0}
.list.hover li:hover{background:var(--bg-subtle);cursor:pointer}
.list li.on{background:var(--accent-subtle)}
.list .primary{font-weight:500;display:block}
.list .meta{display:block;font-size:12px;color:var(--text-tertiary)}
.list .end{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.list.plain{border:0;background:transparent;border-radius:0}
.list.plain li{padding:10px 0}
.list.dense li{padding:8px 16px;font-size:14px}

/* Item Tile */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;width:100%}
.tile{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);cursor:pointer;position:relative;text-align:left;font:inherit;color:var(--text-primary);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.tile:hover{border-color:var(--border-strong);box-shadow:var(--shadow-1)}
.tile.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-subtle)}
.tile .ico{width:36px;height:36px;border-radius:var(--radius-lg);background:var(--accent-subtle);color:var(--accent-text);display:grid;place-items:center;font-weight:700;font-size:14px}
.tile.on .ico{background:var(--accent);color:var(--accent-on)}
.tile b{font-size:14px}
.tile span{font-size:12px;color:var(--text-tertiary)}
.tile .tag{position:absolute;top:12px;right:12px}
.tile.horizontal{flex-direction:row;align-items:center}
.tile.horizontal>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* Data Visual */
.kpi{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:20px 24px;min-width:180px;display:flex;flex-direction:column;gap:4px}
.kpi .label{font-size:12px;color:var(--text-tertiary);font-weight:500}
.kpi .value{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.kpi .value small{font-size:16px;font-weight:500;color:var(--text-tertiary);margin-left:2px}
.kpi .delta{font-size:12px;font-weight:600;color:var(--text-secondary)}
.kpi .delta svg{width:12px;height:12px;vertical-align:-1px}
.kpi .delta.up{color:var(--danger-text)}
.kpi .delta.down{color:var(--success-text)}
.kpi.critical .value{color:var(--sev-critical-text)}
.kpi.high .value{color:var(--sev-high-text)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;width:100%}
.chart{display:flex;flex-direction:column;gap:10px;width:100%;font-size:12px}
.chart .row{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:12px}
.chart .row .lbl{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart .bar{height:12px;border-radius:var(--radius-full);background:var(--bg-panel);overflow:hidden}
.chart .bar i{display:block;height:100%;background:var(--accent-graphic);border-radius:var(--radius-full)}
.chart .bar.critical i{background:var(--sev-critical)}
.chart .bar.high i{background:var(--sev-high)}
.chart .bar.medium i{background:var(--sev-medium)}
.chart .bar.low i{background:var(--sev-low)}
.chart .num{text-align:right;color:var(--text-secondary)}
.chart-card{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:20px 24px;display:flex;flex-direction:column;gap:16px;width:100%}
.chart-card .chart-title{font-size:16px;font-weight:600;margin:0;display:flex;justify-content:space-between;align-items:center}
.donut{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--sev-critical) 0 18%,var(--sev-high) 18% 45%,var(--sev-medium) 45% 75%,var(--sev-low) 75% 100%)}
.donut::after{content:attr(data-label);width:80px;height:80px;border-radius:50%;background:var(--bg-surface);display:grid;place-items:center;font-weight:700;font-size:16px;}
.donut-row{display:flex;align-items:center;gap:24px}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--text-secondary)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:10px;border-radius:2px;background:var(--interaction-inactive);flex:none}
.chart-legend b{color:var(--text-primary);}
.sparkline{display:flex;align-items:flex-end;gap:3px;height:32px}
.sparkline i{display:block;width:6px;background:var(--accent-300);border-radius:2px}
.sparkline i.hi{background:var(--accent-graphic)}

/* Patterns: layout helpers */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%}
.page-head .title{font-size:24px;font-weight:700;margin:0;letter-spacing:-.02em;line-height:1.3}
.page-head .sub{font-size:14px;color:var(--text-secondary);margin:4px 0 0}
.page-head .actions{display:flex;gap:8px;flex:none}
.stack{display:flex;flex-direction:column;gap:16px;width:100%}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.row-3{display:grid;grid-template-columns:2fr 1fr;gap:16px;width:100%}
.toolbar{display:flex;align-items:center;gap:8px;width:100%;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.form{display:flex;flex-direction:column;gap:20px;width:100%;max-width:640px;background:var(--bg-surface);padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .form-row .field{min-width:0}
.form .form-section{font-size:16px;font-weight:600;margin:4px 0 -8px;padding-top:8px}
.form .form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:16px;border-top:1px solid var(--border-default)}
.form .form-actions .left{margin-right:auto}
.form .field{min-width:0}
.terms{display:flex;flex-direction:column;gap:4px;width:100%;max-width:560px}
.terms .all{padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);font-weight:600;margin-bottom:8px}
.terms .item{display:flex;align-items:center;gap:8px;padding:10px 16px}
.terms .item .req{font-size:12px;color:var(--accent-text);font-weight:600}
.terms .item .opt{font-size:12px;color:var(--text-tertiary)}
.terms .item .view{margin-left:auto;font-size:12px;color:var(--text-tertiary);text-decoration:underline;background:none;border:0;font-family:inherit;cursor:pointer}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:48px 24px;text-align:center;width:100%;color:var(--text-tertiary);font-size:14px;background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}
.empty b{font-size:16px;color:var(--text-primary)}
.empty .ico{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--bg-panel);display:grid;place-items:center;font-size:20px;margin-bottom:6px;color:var(--text-tertiary)}
.empty .btn{margin-top:10px}
.empty.compact{padding:24px;flex-direction:row;justify-content:flex-start;text-align:left;gap:12px}
.empty.compact .ico{margin:0;width:36px;height:36px;font-size:16px}
.notes{width:100%;background:var(--bg-subtle);border-radius:var(--radius-lg);padding:20px 24px;font-size:14px;color:var(--text-secondary);line-height:1.6}
.notes b{display:block;color:var(--text-primary);margin-bottom:8px;font-size:14px}
.notes ul{margin:0;padding-left:1.2em;max-width:none}
.notes li{margin-bottom:4px}
.notes.warning{background:var(--warning-subtle)}
.settings-section{width:100%;background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:8px 24px}
.settings-section .section-head{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:16px;font-weight:600;border-bottom:1px solid var(--border-default)}
.setting{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--border-default)}
.setting:last-child{border-bottom:0}
.setting .info b{display:block;font-size:14px;font-weight:600}
.setting .info span{font-size:12px;color:var(--text-tertiary)}
.setting .ctrl{flex:none;display:flex;align-items:center;gap:8px}
.status-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;width:100%}
.status-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:14px}
.status-item .indicator{font-weight:600}
.status-item .meta{margin-left:auto;font-size:12px;color:var(--text-tertiary);}
.sev-band{display:flex;height:10px;border-radius:var(--radius-full);overflow:hidden;width:100%}
.sev-band i{display:block;height:100%}
.sev-band i.critical{background:var(--sev-critical)}
.sev-band i.high{background:var(--sev-high)}
.sev-band i.medium{background:var(--sev-medium)}
.sev-band i.low{background:var(--sev-low)}
.sev-band i.info{background:var(--sev-info)}
.sev-cell{display:inline-flex;align-items:center;gap:8px}
.sev-cell i{width:3px;height:16px;border-radius:2px;background:var(--sev-info)}
.sev-cell i.critical{background:var(--sev-critical)}
.sev-cell i.high{background:var(--sev-high)}
.sev-cell i.medium{background:var(--sev-medium)}
.sev-cell i.low{background:var(--sev-low)}
.onboard{display:flex;flex-direction:column;gap:24px;align-items:center;width:100%;max-width:560px;margin:0 auto}
.onboard .card{width:100%}
.log-row{font-size:12px;}
/* ---------- /Live component samples ---------- */