@charset "UTF-8";
/* ==========================================================================
   한국주택협회(KHA) 공통 디자인 시스템 — 토큰 v1.0 (2026-11-04, (주)사파이어)
   적용: 분양대행자 교육 사이트 시안 · AI 업무 화면 시안 · 디자인 제안서
   근거: research/E4_design.md(KRDS·KWCAG 2.2), research/E5_brand.md(협회 CI·홈페이지 CSS)

   핵심 결정
   - 주색 #3268F0: 협회 홈페이지 서브 화면·증명발급·영문 홈페이지가 함께 쓰는 키 컬러(흰 바탕 4.80:1).
     진한 주색 #1E4BBB(증명발급 --key-color-deep, 7.56:1).
   - CI 원색(Cerulean·Cinnabar·Apple·Supernova 등)은 로고·그래픽·차트·큰 글자 강조 전용.
     CI 원색 위에 흰 글자를 올리지 않는다(Cerulean 3.11:1, Cinnabar 3.84:1, Apple 2.80:1, Supernova 1.55:1).
   - 어두운 바탕·짙은 글자는 CI 보조색 Stratos #0E0042 계열.
   - 글꼴 Pretendard, 본문 17px(최소 16px)·줄간격 150%, 콘텐츠 폭 1200px, 8px 간격 체계,
     글자 대비 4.5:1 이상, 테두리·아이콘 3:1 이상, 강조 버튼은 한 화면에 하나(KRDS 확장형 참고).
   - 테마 2종: .theme-edu(교육 사이트: 공식·친절·명료) / .theme-work(내부 업무: 차분·촘촘·빠름).
   대비 값은 WCAG 2.2 상대 휘도 공식으로 계산(README.md '색 대비 표').
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  /* ------------------------------------------------------------------
     1. CI 원색 — 로고·그래픽·차트·큰 글자 강조 전용 (글자·버튼 바탕 금지)
     ------------------------------------------------------------------ */
  --kha-ci-cerulean: #039CD9;   /* 주요색 · 흰 바탕 3.11:1 */
  --kha-ci-cinnabar: #E9474D;   /* 주요색 · 3.84:1 */
  --kha-ci-apple: #3FB046;      /* 주요색 · 2.80:1 */
  --kha-ci-supernova: #FCCA00;  /* 주요색 · 1.55:1 (위에는 Stratos 글자만, 12.38:1) */
  --kha-ci-pumpkin: #FC8318;    /* 보조색 · 2.50:1 */
  --kha-ci-turquoise: #00CCE0;  /* 보조색 Bright Turquoise · 1.96:1 */
  --kha-ci-black-haze: #F5F7F7; /* 보조색 */
  --kha-ci-stratos: #0E0042;    /* 보조색 · 19.14:1 (어두운 바탕·제목) */
  --kha-ci-mine-shaft: #000000; /* 보조색 */

  /* ------------------------------------------------------------------
     2. 기본 색 단계(primitive) — 숫자 주석 = 흰 바탕 대비
     ------------------------------------------------------------------ */
  /* 주색 Blue — 500 = 협회 키 컬러 #3268F0, 700 = 진한 주색 #1E4BBB (OKLCH로 단계 계산) */
  --kha-blue-50: #F3F7FF;   /* 1.07 옅은 주색 바탕 */
  --kha-blue-100: #E6EDFF;  /* 1.17 */
  --kha-blue-200: #CCDBFE;  /* 1.39 */
  --kha-blue-300: #A2BFFE;  /* 1.84 */
  --kha-blue-400: #628FFC;  /* 3.06 그래픽·큰 글자 */
  --kha-blue-500: #3268F0;  /* 4.80 주색 (흰 글자 OK) */
  --kha-blue-600: #2D5AD1;  /* 6.01 올림 */
  --kha-blue-700: #1E4BBB;  /* 7.56 진한 주색 · 누름 · 옅은 바탕 위 글자 */
  --kha-blue-800: #1F3A88;  /* 10.40 */
  --kha-blue-900: #18275B;  /* 14.19 */

  /* 남색 Navy — 900 = CI Stratos #0E0042 */
  --kha-navy-50: #F3F5FB;   /* 1.09 */
  --kha-navy-100: #E5E7F4;  /* 1.23 */
  --kha-navy-200: #CBCFE8;  /* 1.54 · Stratos 위 글자 12.42:1 */
  --kha-navy-300: #A9AED2;  /* 2.17 · Stratos 위 글자 8.81:1 */
  --kha-navy-400: #8288B7;  /* 3.41 */
  --kha-navy-500: #60669E;  /* 5.40 방문한 링크 */
  --kha-navy-600: #444886;  /* 8.34 AI 표시 막대 */
  --kha-navy-700: #2D2D70;  /* 12.20 AI 초안 글자 */
  --kha-navy-800: #1C1758;  /* 16.00 어두운 바탕 올림 */
  --kha-navy-900: #0E0042;  /* 19.14 CI Stratos */

  /* 중립 Gray 10단계 — 주색과 같은 차가운 색조 */
  --kha-gray-50: #F6F7F9;   /* 1.07 구역 바탕·업무 화면 바탕 */
  --kha-gray-100: #EFF2F6;  /* 1.12 */
  --kha-gray-200: #E1E5EA;  /* 1.27 구분선 */
  --kha-gray-300: #C7CCD3;  /* 1.61 장식 테두리(입력 테두리로 쓰지 않음) */
  --kha-gray-400: #838A94;  /* 3.48 입력·체크 테두리(3:1 이상) */
  --kha-gray-500: #6A707C;  /* 4.97 최소 글자색(설명·입력 안내) */
  --kha-gray-600: #525965;  /* 7.06 보조 글자 */
  --kha-gray-700: #3B424D;  /* 10.13 */
  --kha-gray-800: #282F3A;  /* 13.48 본문 글자 */
  --kha-gray-900: #191E29;  /* 16.68 강한 글자 */

  /* 하늘 Sky — 500 = CI Cerulean (근거 표시·그래픽) */
  --kha-sky-50: #EFF8FF;
  --kha-sky-100: #D7EFFF;
  --kha-sky-200: #B0DFFC;
  --kha-sky-300: #7DC8F4;
  --kha-sky-400: #43B0E9;
  --kha-sky-500: #039CD9;   /* 3.11 CI */
  --kha-sky-600: #0776A5;   /* 5.07 */
  --kha-sky-700: #056188;   /* 6.84 */
  --kha-sky-800: #024B6B;   /* 9.45 */
  --kha-sky-900: #023248;

  /* 초록 Green — 500 = CI Apple (성공) */
  --kha-green-50: #EFFBEE;
  --kha-green-100: #DAF4D9;
  --kha-green-200: #B8E6B7;
  --kha-green-300: #8AD38A;
  --kha-green-400: #60C363;
  --kha-green-500: #3FB046; /* 2.80 CI · 장식 전용 */
  --kha-green-600: #09831E; /* 4.91 */
  --kha-green-700: #006D14; /* 6.57 성공 글자 */
  --kha-green-800: #055511;
  --kha-green-900: #013C08;

  /* 빨강 Red — 500 = CI Cinnabar (오류·위험) */
  --kha-red-50: #FFF4F3;
  --kha-red-100: #FFE4E2;
  --kha-red-200: #FEC8C5;
  --kha-red-300: #FEA09C;
  --kha-red-400: #FF6A6A;
  --kha-red-500: #E9474D;   /* 3.84 CI · 그래픽 */
  --kha-red-600: #CE2937;   /* 5.25 위험 버튼 */
  --kha-red-700: #B31328;   /* 6.91 오류 글자 */
  --kha-red-800: #8E031B;
  --kha-red-900: #690211;

  /* 노랑 Yellow — 500 = CI Supernova (하이라이트, 글자색 금지) */
  --kha-yellow-50: #FFFAEC;
  --kha-yellow-100: #FFF1CB;
  --kha-yellow-200: #FFE49B;
  --kha-yellow-300: #FFD969;
  --kha-yellow-400: #FED03D;
  --kha-yellow-500: #FCCA00; /* 1.55 CI */
  --kha-yellow-600: #CEA614;
  --kha-yellow-700: #9C7C09;
  --kha-yellow-800: #725B03;
  --kha-yellow-900: #524002;

  /* 주황 Orange — 500 = CI Pumpkin (경고) */
  --kha-orange-50: #FFF4EE;
  --kha-orange-100: #FFE6D6;
  --kha-orange-200: #FFCBAB;
  --kha-orange-300: #FEAF7C;
  --kha-orange-400: #FF964A;
  --kha-orange-500: #FC8318; /* 2.50 CI */
  --kha-orange-600: #CB670A; /* 3.83 경고 아이콘 */
  --kha-orange-700: #A55202; /* 5.52 */
  --kha-orange-800: #7F3E04; /* 8.10 경고 글자 */
  --kha-orange-900: #5C2B01;

  --kha-white: #FFFFFF;
  --kha-black: #000000;

  /* ------------------------------------------------------------------
     3. 역할 색(semantic) — 화면에서는 이 이름을 쓴다
     ------------------------------------------------------------------ */
  /* 주색: 행동 버튼·링크·선택 상태 */
  --kha-primary: var(--kha-blue-500);          /* #3268F0 흰 글자 4.80:1 */
  --kha-primary-hover: var(--kha-blue-600);    /* #2D5AD1 */
  --kha-primary-active: var(--kha-blue-700);   /* #1E4BBB */
  --kha-primary-strong: var(--kha-blue-700);   /* 진한 주색: 옅은 바탕 위 글자·선택 글자 */
  --kha-primary-subtle: var(--kha-blue-50);    /* 옅은 주색 바탕 */
  --kha-primary-muted: var(--kha-blue-100);
  --kha-primary-border: var(--kha-blue-300);
  --kha-on-primary: var(--kha-white);

  /* 글자 */
  --kha-text-heading: var(--kha-navy-900);     /* 제목 — CI Stratos 19.14:1 */
  --kha-text-strong: var(--kha-gray-900);      /* 값·레이블·강조 16.68:1 */
  --kha-text: var(--kha-gray-800);             /* 본문 13.48:1 */
  --kha-text-secondary: var(--kha-gray-600);   /* 보조 7.06:1 */
  --kha-text-tertiary: var(--kha-gray-500);    /* 설명·입력 안내(최소) 4.97:1 */
  --kha-text-disabled: var(--kha-gray-500);    /* 비활성도 읽을 수 있게(투명도 금지) */
  --kha-text-inverse: var(--kha-white);
  --kha-text-inverse-muted: var(--kha-navy-200); /* Stratos 위 12.42:1 */
  --kha-link: var(--kha-blue-500);             /* 흰 바탕 전용 4.80:1 */
  --kha-link-strong: var(--kha-blue-700);      /* 옅은 바탕(회색·파랑) 위 링크 7.0:1 */
  --kha-link-visited: var(--kha-navy-500);     /* 5.40:1 */

  /* 바탕 */
  --kha-surface: var(--kha-white);
  --kha-surface-subtle: var(--kha-gray-50);
  --kha-surface-muted: var(--kha-gray-100);
  --kha-surface-brand: var(--kha-blue-50);
  --kha-surface-inverse: var(--kha-navy-900);
  --kha-surface-inverse-raised: var(--kha-navy-800);
  --kha-backdrop: rgba(25, 30, 41, 0.52);   /* 모달 뒤 어둡게(gray-900 기반) */

  /* 테두리 */
  --kha-border: var(--kha-gray-200);           /* 구분선·카드 테두리(장식) */
  --kha-border-strong: var(--kha-gray-300);    /* 칩·보조 영역 */
  --kha-border-input: var(--kha-gray-400);     /* 입력창·체크박스(3:1 이상) */
  --kha-border-focus: var(--kha-blue-500);
  --kha-border-inverse: rgba(255, 255, 255, 0.16);

  /* 포커스(키보드 초점) */
  --kha-focus-ring: 0 0 0 2px var(--kha-white), 0 0 0 4px var(--kha-blue-500);
  --kha-focus-halo: 0 0 0 3px rgba(50, 104, 240, 0.28);
  --kha-focus-on-dark: var(--kha-yellow-500);  /* Stratos 위 12.38:1 */

  /* 상태색 — 글자/바탕 모두 4.5:1 이상, 아이콘 3:1 이상 */
  --kha-success-text: var(--kha-green-700);    /* green-50 위 6.16:1 */
  --kha-success-bg: var(--kha-green-50);
  --kha-success-bg-strong: var(--kha-green-100); /* 태그 바탕 5.61:1 */
  --kha-success-border: var(--kha-green-200);
  --kha-success-icon: var(--kha-green-600);

  --kha-warning-text: var(--kha-orange-800);   /* yellow-50 위 7.77:1 */
  --kha-warning-bg: var(--kha-yellow-50);
  --kha-warning-bg-strong: var(--kha-yellow-100); /* 태그 바탕 7.21:1 */
  --kha-warning-border: var(--kha-yellow-300);
  --kha-warning-icon: var(--kha-orange-600);

  --kha-danger-text: var(--kha-red-700);       /* red-50 위 6.41:1 */
  --kha-danger-bg: var(--kha-red-50);
  --kha-danger-bg-strong: var(--kha-red-100);  /* 태그 바탕 5.74:1 */
  --kha-danger-border: var(--kha-red-200);
  --kha-danger-icon: var(--kha-red-600);
  --kha-danger: var(--kha-red-600);            /* 위험 버튼 흰 글자 5.25:1 */
  --kha-danger-hover: var(--kha-red-700);

  --kha-info-text: var(--kha-blue-700);        /* blue-50 위 7.04:1 */
  --kha-info-bg: var(--kha-blue-50);
  --kha-info-bg-strong: var(--kha-blue-100);   /* 태그 바탕 6.45:1 */
  --kha-info-border: var(--kha-blue-200);
  --kha-info-icon: var(--kha-blue-500);

  --kha-neutral-text: var(--kha-gray-700);     /* gray-100 위 9.02:1 */
  --kha-neutral-bg: var(--kha-gray-100);
  --kha-neutral-border: var(--kha-gray-300);

  /* AI 업무 화면 표시 — '판단은 AI, 계산과 결정은 코드, 최종 승인은 사람' */
  --kha-ai-text: var(--kha-navy-700);          /* AI 초안 글자 navy-50 위 11.19:1 */
  --kha-ai-bg: var(--kha-navy-50);
  --kha-ai-bg-strong: var(--kha-navy-100);     /* 'AI 초안' 태그 9.92:1 */
  --kha-ai-border: var(--kha-navy-200);
  --kha-ai-accent: var(--kha-navy-600);        /* 왼쪽 세로 막대·아이콘 */
  --kha-source-text: var(--kha-sky-800);       /* 근거 칩 sky-50 위 8.80:1 */
  --kha-source-bg: var(--kha-sky-50);
  --kha-source-border: var(--kha-sky-200);
  --kha-source-num: var(--kha-sky-700);        /* 근거 번호 바탕(흰 글자 6.84:1) */
  --kha-calc-text: var(--kha-gray-900);        /* 코드 계산값 gray-50 위 15.56:1 */
  --kha-calc-bg: var(--kha-gray-50);
  --kha-calc-border: var(--kha-gray-400);
  --kha-notfound-text: var(--kha-gray-700);
  --kha-notfound-bg: var(--kha-gray-100);
  --kha-notfound-border: var(--kha-gray-300);

  /* 교육 회차 상태(색 + 글자 + 기호를 함께) */
  --kha-status-open-text: var(--kha-success-text);       /* ● 접수중 */
  --kha-status-open-bg: var(--kha-success-bg-strong);
  --kha-status-closing-text: var(--kha-warning-text);    /* ▲ 마감 임박 */
  --kha-status-closing-bg: var(--kha-warning-bg-strong);
  --kha-status-upcoming-text: var(--kha-info-text);      /* ◆ 접수 예정 */
  --kha-status-upcoming-bg: var(--kha-info-bg-strong);
  --kha-status-closed-text: var(--kha-neutral-text);     /* — 마감 */
  --kha-status-closed-bg: var(--kha-neutral-bg);
  --kha-status-waitlist-text: var(--kha-ai-text);        /* ○ 대기 신청 가능 */
  --kha-status-waitlist-bg: var(--kha-ai-bg-strong);
  --kha-status-done-text: var(--kha-blue-800);           /* ✓ 수료 */
  --kha-status-done-bg: var(--kha-blue-100);

  /* 차트(그래픽) — CI 색 기반, 순서 고정. 색각 이상 시뮬레이션 검증(인접 ΔE 11.7 이상, 앞 3색 전체 쌍 통과).
     2·7번은 흰 바탕 3:1 미만 → 값 글자를 직접 붙이거나 표를 함께 둔다. */
  --kha-chart-1: #3268F0;  /* 주색 */
  --kha-chart-2: #CEA614;  /* Supernova 600 */
  --kha-chart-3: #E9474D;  /* Cinnabar */
  --kha-chart-4: #039CD9;  /* Cerulean */
  --kha-chart-5: #CB670A;  /* Pumpkin 600 */
  --kha-chart-6: #4644AB;  /* Stratos 계열 */
  --kha-chart-7: #3FB046;  /* Apple */
  --kha-chart-other: var(--kha-gray-400); /* '기타' */
  --kha-chart-grid: var(--kha-gray-200);
  --kha-chart-axis: var(--kha-gray-500);
  /* 크기(연속값) 차트는 주색 한 가지: --kha-blue-100 → --kha-blue-700 */

  /* ------------------------------------------------------------------
     4. 글꼴
     ------------------------------------------------------------------ */
  --kha-font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --kha-font-mono: ui-monospace, "Cascadia Mono", "D2Coding", Consolas, "Courier New", monospace;
  --kha-fw-regular: 400;
  --kha-fw-medium: 500;
  --kha-fw-semibold: 600;
  --kha-fw-bold: 700;

  /* 크기 단계(rem, 기준 16px = 브라우저 기본값 존중). 13px은 주석 전용, 본문 최소 16px */
  --kha-fs-13: 0.8125rem;  /* 주석·법적 고지 */
  --kha-fs-14: 0.875rem;   /* 업무 화면 표·태그 */
  --kha-fs-15: 0.9375rem;  /* 보조 글자 */
  --kha-fs-16: 1rem;       /* 본문 최소 */
  --kha-fs-17: 1.0625rem;  /* 교육 사이트 본문(KRDS 기본) */
  --kha-fs-19: 1.1875rem;  /* 소제목·리드 */
  --kha-fs-22: 1.375rem;   /* 업무 화면 제목·모바일 구역 제목 */
  --kha-fs-24: 1.5rem;     /* 구역 제목 */
  --kha-fs-28: 1.75rem;    /* 모바일 화면 제목 */
  --kha-fs-32: 2rem;
  --kha-fs-40: 2.5rem;     /* 화면 제목(PC) */
  --kha-fs-48: 3rem;
  --kha-fs-60: 3.75rem;    /* 표지·첫 화면 큰 글 */

  --kha-lh-tight: 1.25;    /* 큰 숫자·표지 */
  --kha-lh-heading: 1.35;  /* 제목 */
  --kha-lh-body: 1.5;      /* 본문 150% */
  --kha-lh-relaxed: 1.7;   /* 긴 읽기 글 */

  --kha-ls-display: -0.03em;
  --kha-ls-heading: -0.02em;
  --kha-ls-body: -0.01em;

  /* ------------------------------------------------------------------
     5. 간격 — 8px 체계(4·12는 부품 안쪽 미세 조정용)
     ------------------------------------------------------------------ */
  --kha-sp-0: 0;
  --kha-sp-4: 0.25rem;
  --kha-sp-8: 0.5rem;
  --kha-sp-12: 0.75rem;
  --kha-sp-16: 1rem;
  --kha-sp-24: 1.5rem;
  --kha-sp-32: 2rem;
  --kha-sp-40: 2.5rem;
  --kha-sp-48: 3rem;
  --kha-sp-56: 3.5rem;
  --kha-sp-64: 4rem;
  --kha-sp-80: 5rem;
  --kha-sp-96: 6rem;

  /* ------------------------------------------------------------------
     6. 모서리 — 버튼·입력 8px, 카드·모달 12px (KRDS 최대 12px)
     ------------------------------------------------------------------ */
  --kha-radius-xs: 4px;    /* 체크박스·키 표시 */
  --kha-radius-sm: 6px;    /* 상태 태그 */
  --kha-radius-md: 8px;    /* 버튼·입력·알림 상자 */
  --kha-radius-lg: 12px;   /* 카드·모달·표 상자 */
  --kha-radius-xl: 16px;   /* 다이어그램 묶음·프레임 전용 */
  --kha-radius-pill: 999px;/* 칩·숫자 배지·진행 막대 */

  /* ------------------------------------------------------------------
     7. 그림자 — CI Stratos 남색을 섞은 옅은 그림자(테두리 우선, 그림자는 절제)
     ------------------------------------------------------------------ */
  --kha-shadow-xs: 0 1px 2px rgba(14, 0, 66, 0.06);
  --kha-shadow-sm: 0 1px 3px rgba(14, 0, 66, 0.08), 0 1px 2px rgba(14, 0, 66, 0.04);
  --kha-shadow-md: 0 4px 12px rgba(14, 0, 66, 0.08), 0 2px 4px rgba(14, 0, 66, 0.04);
  --kha-shadow-lg: 0 12px 32px rgba(14, 0, 66, 0.12), 0 4px 8px rgba(14, 0, 66, 0.04);
  --kha-shadow-xl: 0 24px 64px rgba(14, 0, 66, 0.18), 0 8px 16px rgba(14, 0, 66, 0.06);

  /* ------------------------------------------------------------------
     8. 레이아웃 — 화면 구간: 360 / 768 / 1024 / 1280 (KRDS)
     ------------------------------------------------------------------ */
  --kha-container: 1200px;
  --kha-gutter-sm: 16px;   /* 360~767 */
  --kha-gutter-md: 24px;   /* 768 이상 */
  --kha-sidebar-w: 248px;  /* 업무 화면 왼쪽 메뉴 */
  --kha-panel-w: 384px;    /* 업무 화면 오른쪽 상세·AI 패널 */
  --kha-topbar-h: 56px;    /* 업무 화면 위쪽 막대 */
  --kha-masthead-h: 40px;  /* 교육 사이트 '공식 사이트' 띠 */

  /* 움직임 — 사용자의 '움직임 줄이기' 설정 존중 */
  --kha-dur-fast: 120ms;
  --kha-dur-base: 200ms;
  --kha-ease: cubic-bezier(0.2, 0, 0, 1);

  /* 겹침 순서 */
  --kha-z-header: 100;
  --kha-z-dropdown: 200;
  --kha-z-overlay: 900;
  --kha-z-modal: 1000;
  --kha-z-toast: 1100;
  --kha-z-mock-label: 2000;
}

/* ==========================================================================
   테마 — 같은 글꼴·같은 주색, 밀도만 다르게 ("한 시스템, 두 톤")
   테마 클래스가 없으면 교육 사이트 값이 기본입니다.
   ========================================================================== */

/* A. 교육 사이트 — 공식·친절·명료: 본문 17px, 넉넉한 여백, 한 화면에 한 결정 */
:root,
.theme-edu {
  --kha-body-size: var(--kha-fs-17);
  --kha-body-lh: var(--kha-lh-body);
  --kha-small-size: var(--kha-fs-15);
  --kha-caption-size: var(--kha-fs-13);
  --kha-label-size: var(--kha-fs-17);
  --kha-display-size: var(--kha-fs-48);
  --kha-h1-size: var(--kha-fs-40);      /* 모바일 28px (components.css) */
  --kha-h2-size: var(--kha-fs-24);      /* 모바일 22px */
  --kha-h3-size: var(--kha-fs-19);
  --kha-h4-size: var(--kha-fs-17);

  --kha-control-h-sm: 40px;
  --kha-control-h-md: 48px;
  --kha-control-h-lg: 56px;
  --kha-control-px-sm: 16px;
  --kha-control-px-md: 20px;
  --kha-control-px-lg: 28px;
  --kha-control-fs-sm: var(--kha-fs-15);
  --kha-control-fs-md: var(--kha-fs-17);
  --kha-control-fs-lg: var(--kha-fs-19);
  --kha-input-px: 16px;
  --kha-check-size: 22px;

  --kha-card-pad: 24px;
  --kha-card-pad-lg: 32px;
  --kha-table-fs: var(--kha-fs-16);
  --kha-table-head-fs: var(--kha-fs-15);
  --kha-table-row-h: 56px;
  --kha-table-head-h: 52px;
  --kha-table-px: 16px;
  --kha-tag-h: 30px;
  --kha-tag-fs: var(--kha-fs-15);
  --kha-chip-h: 40px;
  --kha-chip-fs: var(--kha-fs-15);
  --kha-tab-h: 56px;
  --kha-nav-item-h: 44px;

  --kha-section-gap: 64px;  /* 구역 사이 */
  --kha-block-gap: 24px;    /* 카드 목록 간격(KRDS) */
  --kha-stack-gap: 16px;
  --kha-header-h: 80px;
  --kha-page-bg: var(--kha-white);
}

/* B. 내부 업무 화면 — 차분·촘촘·빠름: 본문 15px, 표 14px·행 40px, 회색 바탕 + 흰 패널 */
.theme-work {
  --kha-body-size: var(--kha-fs-15);
  --kha-body-lh: var(--kha-lh-body);
  --kha-small-size: var(--kha-fs-14);
  --kha-caption-size: var(--kha-fs-13);
  --kha-label-size: var(--kha-fs-14);
  --kha-display-size: var(--kha-fs-32);
  --kha-h1-size: var(--kha-fs-22);
  --kha-h2-size: var(--kha-fs-17);
  --kha-h3-size: var(--kha-fs-15);
  --kha-h4-size: var(--kha-fs-14);

  --kha-control-h-sm: 32px;
  --kha-control-h-md: 36px;
  --kha-control-h-lg: 40px;
  --kha-control-px-sm: 12px;
  --kha-control-px-md: 14px;
  --kha-control-px-lg: 16px;
  --kha-control-fs-sm: var(--kha-fs-14);
  --kha-control-fs-md: var(--kha-fs-14);
  --kha-control-fs-lg: var(--kha-fs-15);
  --kha-input-px: 12px;
  --kha-check-size: 18px;

  --kha-card-pad: 16px;
  --kha-card-pad-lg: 24px;
  --kha-table-fs: var(--kha-fs-14);
  --kha-table-head-fs: var(--kha-fs-13);
  --kha-table-row-h: 40px;
  --kha-table-head-h: 36px;
  --kha-table-px: 12px;
  --kha-tag-h: 24px;
  --kha-tag-fs: var(--kha-fs-13);
  --kha-chip-h: 32px;
  --kha-chip-fs: var(--kha-fs-14);
  --kha-tab-h: 44px;
  --kha-nav-item-h: 36px;

  --kha-section-gap: 24px;
  --kha-block-gap: 16px;
  --kha-stack-gap: 12px;
  --kha-header-h: var(--kha-topbar-h);
  --kha-page-bg: var(--kha-gray-50);
}

/* 테마 글자 기본값 (테마 클래스를 붙인 요소부터 적용) */
.theme-edu,
.theme-work {
  font-family: var(--kha-font-sans);
  font-size: var(--kha-body-size);
  line-height: var(--kha-body-lh);
  letter-spacing: var(--kha-ls-body);
  color: var(--kha-text);
}