@charset "UTF-8";
/* ==========================================================================
   한국주택협회(KHA) 공통 디자인 시스템 — 부품(components) v1.0 (2026-11-04)
   반드시 tokens.css 다음에 불러옵니다. 아이콘은 icons.js(<i data-icon="이름">).
   반응형: 페이지 바깥 요소에 .kha-app(또는 .phone__screen, .browser__viewport)을 두면
   그 폭을 기준(컨테이너 쿼리 'kha')으로 모바일·태블릿 배치가 바뀝니다.
   구간: 모바일 ~767px / 태블릿 768~1023px / PC 1024px~
   목차
    0 기본 요소   1 레이아웃·글자   2 공식 띠·헤더·GNB·업무 위쪽 막대   3 푸터
    4 버튼   5 입력·선택·체크   6 칩·배지·상태 태그   7 카드·목록·설명 목록·교육 회차 카드
    8 표   9 탭   10 단계 표시   11 알림 상자·알림 띠·모달·토스트
    12 KPI·진행 막대   13 타임라인·단계 계획·일정 막대   14 달력
    15 AI 업무: 챗·근거 칩·출처 카드·AI 초안·승인 버튼 묶음·코드 계산값
    16 업무 화면 틀·사이드바·오른쪽 패널   17 기타(쪽 번호·경로·빈 상태·아바타·범례·CI 띠·시안 표시)
    18 폰 프레임·브라우저 프레임   19 A4 가로 제안서 페이지(.sheet)   20 다이어그램
   ========================================================================== */

/* ==========================================================================
   0. 기본 요소
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  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);
  background: var(--kha-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;          /* 한국어 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
}
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(ol, ul) { padding: 0; }
:where(ol[class], ul[class]) { list-style: none; }
:where(img, svg, video, canvas) { max-width: 100%; }
:where(img) { height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { cursor: pointer; }
:where(table) { border-collapse: collapse; }
:where(address) { font-style: normal; }
:where(a) {
  color: var(--kha-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
:where(a:hover) { text-decoration-thickness: 2px; }
:where(strong, b) { font-weight: var(--kha-fw-bold); }
:where(small) { font-size: var(--kha-small-size); }
:where(hr) { border: 0; border-top: 1px solid var(--kha-border); margin: 0; }
:where(mark) { background: var(--kha-yellow-200); color: inherit; padding: 0 2px; border-radius: 2px; }
:where(code) { padding: 1px 6px; border-radius: var(--kha-radius-xs); background: var(--kha-surface-muted); color: var(--kha-text-strong); font-family: var(--kha-font-mono); font-size: 0.88em; letter-spacing: 0; }
::selection { background: var(--kha-blue-100); color: var(--kha-gray-900); }

/* 키보드 초점: 항상 보이게(WCAG 2.4.7). 어두운 바탕은 Supernova */
:focus-visible { outline: 2px solid var(--kha-border-focus); outline-offset: 2px; }
:where(.on-dark, .site-footer, .side-nav--dark, .section--inverse, .sheet--cover, .toast, .dg-box--dark) :focus-visible {
  outline-color: var(--kha-focus-on-dark);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 아이콘 틀 (icons.js가 안에 SVG를 넣음) */
[data-icon] {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--icon-size, 1.25em); height: var(--icon-size, 1.25em);
  line-height: 0; vertical-align: -0.25em; color: inherit; font-style: normal;
}
[data-icon] > svg { display: block; width: 100%; height: 100%; }
.i-14 { --icon-size: 14px; } .i-16 { --icon-size: 16px; } .i-18 { --icon-size: 18px; } .i-20 { --icon-size: 20px; }
.i-24 { --icon-size: 24px; } .i-28 { --icon-size: 28px; } .i-32 { --icon-size: 32px; } .i-40 { --icon-size: 40px; }

/* ==========================================================================
   1. 레이아웃·글자
   ========================================================================== */
.kha-app { container: kha / inline-size; min-height: 100%; }
.theme-work { --kha-link: var(--kha-link-strong); }    /* 업무 화면은 회색 바탕이 많아 진한 주색 링크 */

.container {
  width: 100%;
  max-width: calc(var(--kha-container) + var(--kha-gutter-md) * 2);
  margin-inline: auto;
  padding-inline: var(--kha-gutter-md);
}
.section { padding-block: var(--kha-section-gap); }
.section--tight { padding-block: calc(var(--kha-section-gap) * 0.625); }
.section--subtle { background: var(--kha-surface-subtle); --kha-link: var(--kha-link-strong); }
.section--brand { background: var(--kha-surface-brand); --kha-link: var(--kha-link-strong); }
.section--inverse { background: var(--kha-surface-inverse); color: var(--kha-text-inverse-muted); --kha-link: var(--kha-white); }
.section--inverse :where(h1, h2, h3, h4, .h1, .h2, .h3, .h4) { color: var(--kha-text-inverse); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: var(--kha-block-gap); }
.section__head > div { display: flex; flex-direction: column; gap: 8px; }
.section__desc { color: var(--kha-text-secondary); }

.stack { display: flex; flex-direction: column; gap: var(--kha-stack-gap); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.grid { --grid-cols: 12; display: grid; gap: var(--kha-block-gap); grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); }
.grid--2 { --grid-cols: 2; } .grid--3 { --grid-cols: 3; } .grid--4 { --grid-cols: 4; } .grid--5 { --grid-cols: 5; } .grid--6 { --grid-cols: 6; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; } .gap-64 { gap: 64px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.ml-auto { margin-left: auto; } .w-full { width: 100%; }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }

/* 제목·글자 단계 */
:where(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4) {
  color: var(--kha-text-heading);
  font-weight: var(--kha-fw-bold);
  line-height: var(--kha-lh-heading);
  letter-spacing: var(--kha-ls-heading);
}
:where(h1), .h1 { font-size: var(--kha-h1-size); }
:where(h2), .h2 { font-size: var(--kha-h2-size); }
:where(h3), .h3 { font-size: var(--kha-h3-size); }
:where(h4), .h4 { font-size: var(--kha-h4-size); }
.display { font-size: var(--kha-display-size); line-height: var(--kha-lh-tight); letter-spacing: var(--kha-ls-display); }
.lead { font-size: calc(var(--kha-body-size) + 2px); line-height: var(--kha-lh-body); color: var(--kha-text-secondary); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kha-small-size); font-weight: var(--kha-fw-bold); color: var(--kha-link); letter-spacing: 0; }
.small { font-size: var(--kha-small-size); }
.caption { font-size: var(--kha-caption-size); color: var(--kha-text-secondary); }
.text-strong { color: var(--kha-text-strong); }
.text-heading { color: var(--kha-text-heading); }
.text-secondary { color: var(--kha-text-secondary); }
.text-tertiary { color: var(--kha-text-tertiary); }
.text-brand { color: var(--kha-link); }
.text-success { color: var(--kha-success-text); } .text-warning { color: var(--kha-warning-text); }
.text-danger { color: var(--kha-danger-text); } .text-info { color: var(--kha-info-text); }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--kha-font-mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prose { color: var(--kha-text); line-height: var(--kha-lh-relaxed); }
.prose > * + * { margin-top: 0.9em; }
.prose :where(ul, ol) { padding-left: 1.25em; }
.prose :where(li) + li { margin-top: 0.35em; }
/* 글머리 목록: .bullets(점) · .bullets--check(초록 체크) · .bullets--x(빨강 X) */
.bullets { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.2em; list-style: disc; }
.bullets > li::marker { color: var(--kha-text-tertiary); }
.bullets--check, .bullets--x { list-style: none; padding-left: 0; }
.bullets--check > li, .bullets--x > li { position: relative; padding-left: 1.6em; }
.bullets--check > li::before, .bullets--x > li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1em; height: 1em; background: var(--kha-success-icon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.bullets--x > li::before { background: var(--kha-danger-icon); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--kha-border-strong); border-bottom-width: 2px; border-radius: var(--kha-radius-xs);
  background: var(--kha-surface); color: var(--kha-text-secondary);
  font: 600 var(--kha-fs-13)/1 var(--kha-font-sans); letter-spacing: 0; white-space: nowrap;
}
.divider { height: 1px; background: var(--kha-border); border: 0; margin: 0; }
.divider--v { width: 1px; height: auto; align-self: stretch; }

/* 결론 한 줄 (표·그림 뒤 '→ 한 줄 결론') */
.conclusion {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--kha-radius-md);
  background: var(--kha-primary-subtle); border: 1px solid var(--kha-blue-100);
  color: var(--kha-blue-800); font-weight: var(--kha-fw-semibold); line-height: 1.5;
  --icon-size: 20px;
}
.conclusion > [data-icon] { margin-top: 0.1em; color: var(--kha-primary); }

/* 모바일·태블릿 공통 조정 */
@container kha (max-width: 1023px) {
  .grid--3, .grid--4, .grid--5, .grid--6 { --grid-cols: 2; }
}
@container kha (max-width: 767px) {
  .container { padding-inline: var(--kha-gutter-sm); }
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { --grid-cols: 1; }
  .grid--keep-2 { --grid-cols: 2; }
  :where(h1), .h1 { font-size: min(var(--kha-h1-size), var(--kha-fs-28)); }
  :where(h2), .h2 { font-size: min(var(--kha-h2-size), var(--kha-fs-22)); }
  .display { font-size: min(var(--kha-display-size), 2.25rem); }
  .section { padding-block: min(var(--kha-section-gap), 48px); }
}

/* ==========================================================================
   2. 건너뛰기 링크 · 공식 사이트 띠 · 헤더/GNB · 업무 화면 위쪽 막대
   ========================================================================== */
.skip-link {
  position: absolute; left: 16px; top: -120px; z-index: calc(var(--kha-z-header) + 10);
  padding: 12px 16px; border-radius: var(--kha-radius-md);
  background: var(--kha-navy-900); color: var(--kha-white); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* 공식 사이트 띠: '한국주택협회가 운영하는 공식 교육 사이트입니다' (KRDS 공식 배너 참고) */
.masthead { background: var(--kha-surface-subtle); border-bottom: 1px solid var(--kha-border); font-size: var(--kha-fs-14); color: var(--kha-text-secondary); --kha-link: var(--kha-link-strong); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--kha-masthead-h); }
.masthead__official { display: inline-flex; align-items: center; gap: 8px; }
.masthead__symbol { height: 14px; width: auto; display: block; }
.masthead__links { display: flex; align-items: center; gap: 4px 20px; }
.masthead__links a { color: var(--kha-text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; --icon-size: 14px; }
.masthead__links a:hover { color: var(--kha-text-strong); text-decoration: underline; }

.site-header { position: relative; z-index: var(--kha-z-header); background: var(--kha-surface); border-bottom: 1px solid var(--kha-border); }
.site-header--sticky { position: sticky; top: 0; }
.site-header__inner { display: flex; align-items: center; gap: 40px; height: var(--kha-header-h); }
.brand { display: inline-flex; align-items: center; gap: 14px; flex: none; color: var(--kha-text-heading); text-decoration: none; }
.brand__logo { display: block; height: 32px; width: auto; }
.brand__divider { width: 1px; height: 22px; background: var(--kha-border-strong); }
.brand__name { font-size: var(--kha-fs-19); font-weight: 700; letter-spacing: var(--kha-ls-heading); color: var(--kha-text-heading); white-space: nowrap; }
.gnb { flex: 1; min-width: 0; }
.gnb__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gnb__link {
  position: relative; display: inline-flex; align-items: center; height: var(--kha-header-h); padding: 0 16px;
  font-size: var(--kha-fs-17); font-weight: 600; color: var(--kha-text-strong); text-decoration: none; white-space: nowrap;
}
.gnb__link:hover { color: var(--kha-primary); text-decoration: none; }
.gnb__link[aria-current="page"], .gnb__link.is-active { color: var(--kha-primary); }
.gnb__link[aria-current="page"]::after, .gnb__link.is-active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--kha-primary);
}
.site-header__utils { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.util-link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--kha-radius-md);
  font-size: var(--kha-fs-15); font-weight: 500; color: var(--kha-text-secondary); text-decoration: none; white-space: nowrap; --icon-size: 18px;
}
.util-link:hover { background: var(--kha-surface-subtle); color: var(--kha-text-strong); text-decoration: none; }
.util-sep { width: 1px; height: 14px; background: var(--kha-border-strong); margin: 0 4px; }
.menu-btn {
  display: none; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 10px; margin-left: auto;
  border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-md); background: var(--kha-surface);
  font-size: var(--kha-fs-15); font-weight: 600; color: var(--kha-text-strong); --icon-size: 22px;
}
@container kha (max-width: 1023px) {
  .gnb, .site-header__utils { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header__inner { height: 64px; gap: 16px; }
  .brand__logo { height: 26px; }
  .brand__name { font-size: var(--kha-fs-17); }
  .brand__divider { height: 18px; }
}
@container kha (max-width: 767px) {
  .site-header__inner { height: 60px; }
  .brand { gap: 10px; }
  .brand__logo { height: 22px; }
  .brand__name { font-size: var(--kha-fs-16); }
  .brand__divider { height: 16px; }
  .masthead__links { display: none; }
  .masthead { font-size: var(--kha-fs-13); }
}

/* 업무 화면 위쪽 막대 */
.topbar { display: flex; align-items: center; gap: 16px; height: var(--kha-topbar-h); padding: 0 24px; background: var(--kha-surface); border-bottom: 1px solid var(--kha-border); }
.topbar__title { display: flex; align-items: center; gap: 8px; font-size: var(--kha-fs-17); font-weight: 700; color: var(--kha-text-heading); white-space: nowrap; }
.topbar__search {
  display: flex; align-items: center; gap: 8px; width: min(440px, 42%); height: 36px; padding: 0 8px 0 12px;
  border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-md); background: var(--kha-surface-subtle);
  color: var(--kha-text-tertiary); font-size: var(--kha-fs-14); --icon-size: 18px;
}
.topbar__search kbd { margin-left: auto; }
.topbar__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.icon-btn {
  --icon-btn-size: 36px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--icon-btn-size); height: var(--icon-btn-size); padding: 0; border: 0; border-radius: var(--kha-radius-md);
  background: transparent; color: var(--kha-text-secondary); --icon-size: 20px; text-decoration: none;
}
.icon-btn:hover { background: var(--kha-surface-muted); color: var(--kha-text-strong); }
.icon-btn > .badge { position: absolute; top: 1px; right: 1px; }
.icon-btn--lg { --icon-btn-size: 44px; --icon-size: 22px; }

/* ==========================================================================
   3. 푸터 (CI 2순위: Stratos 바탕 + 흰 로고 HCD@4x.png)
   ========================================================================== */
.site-footer { background: var(--kha-surface-inverse); color: var(--kha-text-inverse-muted); font-size: var(--kha-fs-15); line-height: 1.6; padding: 48px 0 40px; --kha-link: var(--kha-white); }
.site-footer a { color: var(--kha-white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--kha-border-inverse); }
.site-footer__logo { display: block; height: 32px; width: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { font-weight: 500; }
.site-footer__links .is-strong { font-weight: 700; }
.site-footer__info { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; }
.site-footer__info b { color: var(--kha-white); font-weight: 600; margin-right: 6px; }
.site-footer__copy { margin-top: 16px; font-size: var(--kha-fs-14); color: var(--kha-navy-300); }
@container kha (max-width: 767px) {
  .site-footer { padding: 40px 0 32px; font-size: var(--kha-fs-14); }
  .site-footer__logo { height: 26px; }
  .site-footer__info { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   4. 버튼 — 위계: 주(채움) > 보조(테두리) > 텍스트. 강조(주) 버튼은 한 화면에 하나.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--kha-control-h-md); padding: 0 var(--kha-control-px-md);
  border: 1px solid transparent; border-radius: var(--kha-radius-md);
  font-family: inherit; font-size: var(--kha-control-fs-md); font-weight: var(--kha-fw-semibold);
  line-height: 1; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer;
  user-select: none; -webkit-user-select: none; --icon-size: 1.2em;
  transition: background-color var(--kha-dur-fast) var(--kha-ease), border-color var(--kha-dur-fast) var(--kha-ease), color var(--kha-dur-fast) var(--kha-ease), box-shadow var(--kha-dur-fast) var(--kha-ease);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--kha-focus-ring); }
.btn--primary { background: var(--kha-primary); color: var(--kha-on-primary); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--kha-primary-hover); }
.btn--primary:active, .btn--primary.is-active { background: var(--kha-primary-active); }
.btn--secondary { background: var(--kha-surface); border-color: var(--kha-border-input); color: var(--kha-text-strong); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--kha-surface-subtle); border-color: var(--kha-gray-500); }
.btn--secondary:active, .btn--secondary.is-active { background: var(--kha-surface-muted); }
.btn--outline { background: var(--kha-surface); border-color: var(--kha-primary); color: var(--kha-primary-strong); }   /* 주색 테두리 보조(필요할 때만) */
.btn--outline:hover, .btn--outline.is-hover { background: var(--kha-primary-subtle); }
.btn--tertiary { background: transparent; color: var(--kha-link); padding-inline: calc(var(--kha-control-px-md) * 0.6); }   /* 옅은 바탕 안에서는 자동으로 진한 주색 */
.btn--tertiary:hover, .btn--tertiary.is-hover { background: var(--kha-primary-subtle); color: var(--kha-primary-strong); }
.btn--ghost { background: transparent; color: var(--kha-text-secondary); padding-inline: calc(var(--kha-control-px-md) * 0.6); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--kha-surface-muted); color: var(--kha-text-strong); }
.btn--danger { background: var(--kha-danger); color: var(--kha-white); }
.btn--danger:hover, .btn--danger.is-hover { background: var(--kha-danger-hover); }
.btn--danger-ghost { background: transparent; color: var(--kha-danger-text); padding-inline: calc(var(--kha-control-px-md) * 0.6); }
.btn--danger-ghost:hover, .btn--danger-ghost.is-hover { background: var(--kha-danger-bg); }
.btn--dark { background: var(--kha-navy-900); color: var(--kha-white); }
.btn--dark:hover, .btn--dark.is-hover { background: var(--kha-navy-800); }
.btn--on-dark { background: var(--kha-white); color: var(--kha-navy-900); }   /* Stratos 바탕 위 */
.btn--sm { height: var(--kha-control-h-sm); padding: 0 var(--kha-control-px-sm); font-size: var(--kha-control-fs-sm); gap: 6px; }
.btn--lg { height: var(--kha-control-h-lg); padding: 0 var(--kha-control-px-lg); font-size: var(--kha-control-fs-lg); font-weight: var(--kha-fw-bold); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--kha-control-h-md); padding: 0; }
.btn--icon.btn--sm { width: var(--kha-control-h-sm); }
.btn--icon.btn--lg { width: var(--kha-control-h-lg); }
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] {
  background: var(--kha-surface-muted); border-color: var(--kha-border); color: var(--kha-text-disabled);
  cursor: not-allowed; box-shadow: none;
}
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: var(--kha-white); animation: kha-spin 0.8s linear infinite;
}
.btn--secondary.is-loading::after { border-color: var(--kha-gray-300); border-top-color: var(--kha-primary); }
@keyframes kha-spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-row--end { justify-content: flex-end; }
.btn-row--between { justify-content: space-between; }

/* ==========================================================================
   5. 입력·선택·체크 — 레이블 항상 표시(플레이스홀더로 대신하지 않음), 오류는 입력 아래 글자로
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kha-label-size); font-weight: var(--kha-fw-semibold); color: var(--kha-text-strong); }
.field__req { color: var(--kha-danger-text); font-weight: 700; }
.field__opt { font-size: var(--kha-small-size); font-weight: 500; color: var(--kha-text-tertiary); }
.field__hint { font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.field__example { font-size: var(--kha-small-size); color: var(--kha-text-tertiary); }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--kha-small-size); font-weight: 500; color: var(--kha-danger-text); --icon-size: 1.15em; }
.field__error > [data-icon] { margin-top: 0.15em; }
.field__success { display: flex; align-items: flex-start; gap: 6px; font-size: var(--kha-small-size); font-weight: 500; color: var(--kha-success-text); --icon-size: 1.15em; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@container kha (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } }

.input, .select, .textarea {
  display: block; width: 100%; height: var(--kha-control-h-md); padding: 0 var(--kha-input-px);
  border: 1px solid var(--kha-border-input); border-radius: var(--kha-radius-md);
  background: var(--kha-surface); color: var(--kha-text-strong);
  font-family: inherit; font-size: var(--kha-control-fs-md); line-height: 1.4;
  transition: border-color var(--kha-dur-fast) var(--kha-ease), box-shadow var(--kha-dur-fast) var(--kha-ease);
}
.input::placeholder, .textarea::placeholder { color: var(--kha-text-tertiary); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--kha-gray-500); }
.input:focus, .select:focus, .textarea:focus, .input.is-focus { outline: none; border-color: var(--kha-primary); box-shadow: var(--kha-focus-halo); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .input.is-invalid { border-color: var(--kha-red-600); }
.input[aria-invalid="true"]:focus, .input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(206, 41, 55, 0.22); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--kha-surface-muted); border-color: var(--kha-border-strong); color: var(--kha-text-disabled); cursor: not-allowed; }
.input[readonly] { background: var(--kha-surface-subtle); border-color: var(--kha-border-strong); }
.input--sm, .select--sm { height: var(--kha-control-h-sm); font-size: var(--kha-control-fs-sm); }
.input--lg, .select--lg { height: var(--kha-control-h-lg); font-size: var(--kha-control-fs-lg); }
.input.num, .input--num { text-align: right; font-variant-numeric: tabular-nums; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525965' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.textarea { height: auto; min-height: 128px; padding: 12px var(--kha-input-px); line-height: var(--kha-lh-body); resize: vertical; }
.input-group { display: flex; gap: 8px; align-items: stretch; }
.input-group > .input, .input-group > .select { flex: 1; min-width: 0; }
.input-group > .btn { flex: none; }
.input-icon { position: relative; display: block; }
.input-icon > [data-icon] { position: absolute; left: var(--kha-input-px); top: 50%; transform: translateY(-50%); color: var(--kha-text-tertiary); pointer-events: none; --icon-size: 20px; }
.input-icon > .input { padding-left: calc(var(--kha-input-px) + 28px); }
.input-unit { position: relative; display: block; }
.input-unit > .input { padding-right: 44px; }
.input-unit > .input-unit__text { position: absolute; right: var(--kha-input-px); top: 50%; transform: translateY(-50%); color: var(--kha-text-secondary); font-size: var(--kha-control-fs-md); pointer-events: none; }

/* 체크박스·라디오 */
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--kha-body-size); color: var(--kha-text); line-height: 1.5; }
.check > input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: var(--kha-check-size); height: var(--kha-check-size); margin: calc((1.5em - var(--kha-check-size)) / 2) 0 0;
  border: 1.5px solid var(--kha-gray-500); border-radius: var(--kha-radius-xs); background: var(--kha-surface);
  cursor: pointer; transition: background-color var(--kha-dur-fast), border-color var(--kha-dur-fast);
}
.check > input:hover { border-color: var(--kha-gray-700); }
.check > input:checked {
  border-color: var(--kha-primary);
  background: var(--kha-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 78% no-repeat;
}
.check > input[type="radio"] { border-radius: 50%; }
.check > input[type="radio"]:checked { background: var(--kha-surface); box-shadow: inset 0 0 0 calc(var(--kha-check-size) * 0.24) var(--kha-primary); border-color: var(--kha-primary); }
.check > input:focus-visible { outline: 2px solid var(--kha-border-focus); outline-offset: 2px; }
.check > input:disabled { background-color: var(--kha-surface-muted); border-color: var(--kha-border-strong); cursor: not-allowed; }
.check > input:disabled + span { color: var(--kha-text-disabled); }
.check__desc { display: block; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.check-card { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-md); background: var(--kha-surface); cursor: pointer; }
.check-card:has(input:checked) { border-color: var(--kha-primary); background: var(--kha-primary-subtle); box-shadow: inset 0 0 0 1px var(--kha-primary); }

/* 스위치(켜기/끄기) */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--kha-body-size); color: var(--kha-text); }
.switch > input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0;
  border-radius: 999px; background: var(--kha-gray-400); cursor: pointer; transition: background-color var(--kha-dur-base);
}
.switch > input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--kha-white); box-shadow: 0 1px 2px rgba(14, 0, 66, 0.25); transition: transform var(--kha-dur-base) var(--kha-ease);
}
.switch > input:checked { background: var(--kha-primary); }
.switch > input:checked::after { transform: translateX(18px); }
.switch > input:focus-visible { outline: 2px solid var(--kha-border-focus); outline-offset: 2px; }

/* ==========================================================================
   6. 칩(누르는 필터) · 숫자 배지 · 상태 태그(누르지 않음, 한 요소에 하나)
   ========================================================================== */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: var(--kha-chip-h); padding: 0 16px;
  border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-pill); background: var(--kha-surface);
  color: var(--kha-text); font-size: var(--kha-chip-fs); font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
  --icon-size: 1.1em; transition: background-color var(--kha-dur-fast), border-color var(--kha-dur-fast);
}
.chip:hover { border-color: var(--kha-gray-400); background: var(--kha-surface-subtle); text-decoration: none; }
.chip .chip__check { display: none; }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-selected {
  border-color: var(--kha-primary); background: var(--kha-primary-subtle); color: var(--kha-primary-strong); font-weight: 600;
  padding-left: 12px;
}
.chip[aria-pressed="true"] .chip__check, .chip[aria-selected="true"] .chip__check, .chip.is-selected .chip__check { display: inline-flex; }
.chip__count { color: var(--kha-text-tertiary); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count, .chip.is-selected .chip__count { color: var(--kha-primary-strong); }
.chip--removable { padding-right: 8px; }
.chip__remove { display: inline-flex; border: 0; background: none; padding: 2px; border-radius: 50%; color: inherit; --icon-size: 16px; }

.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--kha-radius-pill); background: var(--kha-gray-200); color: var(--kha-gray-800);
  font-size: var(--kha-fs-13); font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.badge--primary { background: var(--kha-primary); color: var(--kha-white); }
.badge--danger { background: var(--kha-danger); color: var(--kha-white); }
.badge--dot { min-width: 0; width: 8px; height: 8px; padding: 0; background: var(--kha-red-600); box-shadow: 0 0 0 2px var(--kha-surface); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; height: var(--kha-tag-h); padding: 0 10px;
  border-radius: var(--kha-radius-sm); background: var(--kha-neutral-bg); color: var(--kha-neutral-text);
  font-size: var(--kha-tag-fs); font-weight: var(--kha-fw-semibold); line-height: 1; letter-spacing: 0; white-space: nowrap;
  --icon-size: 1.05em;
}
.tag__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tag__sym { font-size: 0.85em; line-height: 1; }
.tag--success, .tag--open { background: var(--kha-success-bg-strong); color: var(--kha-success-text); }
.tag--warning, .tag--closing, .tag--review { background: var(--kha-warning-bg-strong); color: var(--kha-warning-text); }
.tag--danger, .tag--rejected { background: var(--kha-danger-bg-strong); color: var(--kha-danger-text); }
.tag--info, .tag--upcoming { background: var(--kha-info-bg-strong); color: var(--kha-info-text); }
.tag--neutral, .tag--closed { background: var(--kha-neutral-bg); color: var(--kha-neutral-text); }
.tag--brand, .tag--done { background: var(--kha-status-done-bg); color: var(--kha-status-done-text); }
.tag--ai, .tag--waitlist { background: var(--kha-ai-bg-strong); color: var(--kha-ai-text); }
.tag--approved { background: var(--kha-success-bg-strong); color: var(--kha-success-text); }
.tag--outline { background: var(--kha-surface); color: var(--kha-text-secondary); box-shadow: inset 0 0 0 1px var(--kha-border-strong); }
.tag--lg { height: calc(var(--kha-tag-h) + 4px); padding: 0 12px; font-size: calc(var(--kha-tag-fs) + 1px); }

/* ==========================================================================
   7. 카드 · 목록 · 설명 목록 · 교육 회차 카드 · 아이콘 타일
   ========================================================================== */
.card { position: relative; display: flex; flex-direction: column; gap: var(--kha-stack-gap); padding: var(--kha-card-pad); background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); min-width: 0; }
.card--lg { padding: var(--kha-card-pad-lg); }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card--subtle { background: var(--kha-surface-subtle); border-color: transparent; --kha-link: var(--kha-link-strong); }
.card--brand { background: var(--kha-primary-subtle); border-color: var(--kha-blue-100); --kha-link: var(--kha-link-strong); }
.card--raised { box-shadow: var(--kha-shadow-sm); }
.card--interactive { cursor: pointer; transition: border-color var(--kha-dur-fast), box-shadow var(--kha-dur-base) var(--kha-ease), transform var(--kha-dur-base) var(--kha-ease); }
.card--interactive:hover, .card--interactive.is-hover { border-color: var(--kha-border-strong); box-shadow: var(--kha-shadow-md); transform: translateY(-1px); }
.card--selected { border-color: var(--kha-primary); box-shadow: inset 0 0 0 1px var(--kha-primary); }
.card--accent { --accent: var(--kha-primary); border-top: 0; padding-top: calc(var(--kha-card-pad) + 4px); overflow: hidden; }
.card--accent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.card--inverse { background: var(--kha-surface-inverse); border-color: var(--kha-surface-inverse); color: var(--kha-text-inverse-muted); --kha-link: var(--kha-white); }
.card--inverse :where(.card__title, h2, h3, h4) { color: var(--kha-white); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__eyebrow { font-size: var(--kha-small-size); font-weight: var(--kha-fw-semibold); color: var(--kha-text-secondary); }
.card__title { font-size: var(--kha-h3-size); font-weight: var(--kha-fw-bold); line-height: 1.4; letter-spacing: var(--kha-ls-heading); color: var(--kha-text-heading); }
.card__desc { color: var(--kha-text-secondary); font-size: var(--kha-small-size); }
.card__body { display: flex; flex-direction: column; gap: 12px; }
.card__footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.card__section { padding: var(--kha-card-pad); border-top: 1px solid var(--kha-border); }
.card__section:first-child { border-top: 0; }

/* 설명 목록(키-값) */
.dl { --dl-term-w: 88px; display: flex; flex-direction: column; gap: 8px; }
.dl > div { display: grid; grid-template-columns: var(--dl-term-w) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.dl dt { font-size: var(--kha-small-size); font-weight: 500; color: var(--kha-text-secondary); }
.dl dd { margin: 0; color: var(--kha-text-strong); font-weight: 500; }
.dl--rows { gap: 0; }
.dl--rows > div { padding: 12px 0; border-bottom: 1px solid var(--kha-border); }
.dl--rows > div:last-child { border-bottom: 0; }

/* 교육 회차 카드 — 순서 고정: 상태 → 일정 → 장소 → 교육비 → 마감 → 남은 자리 → 행동 버튼 */
.course-card { gap: 16px; }
.course-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.course-card__region { font-size: var(--kha-small-size); font-weight: 600; color: var(--kha-text-secondary); }
.course-card__date { font-size: var(--kha-fs-22); font-weight: 700; line-height: 1.3; letter-spacing: var(--kha-ls-heading); color: var(--kha-text-heading); font-variant-numeric: tabular-nums; }
.course-card__time { margin-top: 2px; font-size: var(--kha-small-size); color: var(--kha-text-secondary); font-variant-numeric: tabular-nums; }
.course-card__price { font-weight: 700; color: var(--kha-text-strong); font-variant-numeric: tabular-nums; }
.course-card__foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.course-card.is-closed .course-card__date { color: var(--kha-text-secondary); }

/* 목록(공지·FAQ 등 글 목록) */
.list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kha-text-heading); }
.list__item { display: flex; align-items: center; gap: 16px; padding: 16px 8px; border-bottom: 1px solid var(--kha-border); }
.list__lead { flex: none; }
.list__title { flex: 1; min-width: 0; font-weight: 500; color: var(--kha-text-strong); text-decoration: none; }
.list--truncate .list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 업무 화면 목록 전용(신청 대상 제목은 줄이지 않음) */
a.list__title:hover { text-decoration: underline; color: var(--kha-text-strong); }
.list__meta { flex: none; font-size: var(--kha-small-size); color: var(--kha-text-tertiary); font-variant-numeric: tabular-nums; }
.list--plain { border-top: 1px solid var(--kha-border); }

/* 자주 묻는 질문(접기·펼치기) */
.accordion { border-top: 1px solid var(--kha-border); }
.accordion details { border-bottom: 1px solid var(--kha-border); }
.accordion summary { display: flex; align-items: center; gap: 12px; padding: 18px 8px; cursor: pointer; list-style: none; font-weight: 600; color: var(--kha-text-strong); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; margin-left: auto; width: 20px; height: 20px; background: var(--kha-text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--kha-dur-base) var(--kha-ease);
}
.accordion details[open] > summary::after { transform: rotate(180deg); }
.accordion__q { flex: none; color: var(--kha-primary); font-weight: 700; }
.accordion__body { padding: 0 8px 20px 36px; color: var(--kha-text); }

/* 아이콘 타일(안내 단계·특징). CI 색 바탕은 그래픽 → 아이콘은 Stratos */
.icon-tile { --tile-size: 48px; --tile-bg: var(--kha-primary-subtle); --tile-fg: var(--kha-primary); display: inline-grid; place-items: center; flex: none; width: var(--tile-size); height: var(--tile-size); border-radius: var(--kha-radius-lg); background: var(--tile-bg); color: var(--tile-fg); --icon-size: calc(var(--tile-size) * 0.5); }
.icon-tile--sm { --tile-size: 36px; border-radius: var(--kha-radius-md); }
.icon-tile--lg { --tile-size: 64px; }
.icon-tile--navy { --tile-bg: var(--kha-navy-900); --tile-fg: var(--kha-white); }
.icon-tile--ai { --tile-bg: var(--kha-ai-bg-strong); --tile-fg: var(--kha-ai-accent); }
.icon-tile--success { --tile-bg: var(--kha-success-bg-strong); --tile-fg: var(--kha-success-text); }
.icon-tile--warning { --tile-bg: var(--kha-warning-bg-strong); --tile-fg: var(--kha-warning-text); }
.icon-tile--ci-yellow { --tile-bg: var(--kha-ci-supernova); --tile-fg: var(--kha-ci-stratos); }
.feature { display: flex; flex-direction: column; gap: 12px; }
.feature__title { font-size: var(--kha-h3-size); font-weight: 700; color: var(--kha-text-heading); line-height: 1.4; }
.feature__desc { color: var(--kha-text-secondary); font-size: var(--kha-small-size); }

/* ==========================================================================
   8. 표 — 글자 왼쪽, 숫자 오른쪽(고정폭 숫자), 빈 값은 "-"
   ========================================================================== */
.table-wrap { width: 100%; overflow-x: auto; background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--kha-table-fs); font-variant-numeric: tabular-nums; color: var(--kha-text); }
.table caption { caption-side: top; padding: 0 0 12px; text-align: left; font-weight: 700; color: var(--kha-text-heading); }
.table-wrap > .table caption { padding: 16px var(--kha-table-px) 4px; }
.table th, .table td { height: var(--kha-table-row-h); padding: 6px var(--kha-table-px); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--kha-border); }
.table thead th {
  height: var(--kha-table-head-h); background: var(--kha-surface-subtle); color: var(--kha-text-secondary);
  font-size: var(--kha-table-head-fs); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--kha-border-strong);
}
.table tbody th { font-weight: 600; color: var(--kha-text-strong); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .num, .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .center { text-align: center; }
.table .nowrap { white-space: nowrap; }
.table .is-empty { color: var(--kha-text-tertiary); }   /* 빈 값 "-" */
.table .strong { font-weight: 700; color: var(--kha-text-strong); }
.table tfoot td, .table tfoot th { background: var(--kha-surface-subtle); font-weight: 700; color: var(--kha-text-strong); border-top: 1px solid var(--kha-border-strong); border-bottom: 0; }
.table--hover tbody tr:hover > * { background: var(--kha-surface-subtle); }
.table--zebra tbody tr:nth-child(even) > * { background: var(--kha-surface-subtle); }
.table tbody tr.is-selected > * { background: var(--kha-primary-subtle); }
.table tbody tr.is-selected > :first-child { box-shadow: inset 3px 0 0 var(--kha-primary); }
.table--bordered th, .table--bordered td { border-right: 1px solid var(--kha-border); }
.table--bordered th:last-child, .table--bordered td:last-child { border-right: 0; }
.table--top { border-top: 2px solid var(--kha-text-heading); }   /* 게시판형(협회 홈페이지와 같은 위쪽 굵은 선) */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px var(--kha-table-px); border-bottom: 1px solid var(--kha-border); }
.table-toolbar__count { font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.table-toolbar__count b { color: var(--kha-text-strong); }

/* ==========================================================================
   9. 탭 · 세그먼트(목록/달력 보기 전환)
   ========================================================================== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--kha-border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--kha-tab-h); padding: 0 16px;
  border: 0; background: none; color: var(--kha-text-secondary); font-size: var(--kha-control-fs-md); font-weight: 600;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--kha-text-strong); text-decoration: none; }
.tab[aria-selected="true"], .tab.is-active { color: var(--kha-link); }
.tab[aria-selected="true"]::after, .tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--kha-primary); }
.tab .badge { height: 20px; min-width: 20px; font-size: var(--kha-fs-13); }
.tab[aria-selected="true"] .badge, .tab.is-active .badge { background: var(--kha-primary); color: var(--kha-white); }
.tabs--fill .tab { flex: 1; justify-content: center; }

.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--kha-surface-muted); }
.segmented__item {
  display: inline-flex; align-items: center; gap: 6px; height: calc(var(--kha-control-h-sm) - 8px); padding: 0 14px;
  border: 0; border-radius: 7px; background: transparent; color: var(--kha-text-secondary);
  font-size: var(--kha-control-fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; --icon-size: 1.1em;
}
.segmented__item:hover { color: var(--kha-text-strong); }
.segmented__item[aria-pressed="true"], .segmented__item[aria-selected="true"], .segmented__item.is-active { background: var(--kha-surface); color: var(--kha-text-strong); box-shadow: var(--kha-shadow-sm); }

/* ==========================================================================
   10. 단계 표시(stepper) — 3~7단계, 현재 단계 분명히, 작은 화면은 "4단계 중 2단계"
   ========================================================================== */
/* 기본: 같은 폭 칸 + 원 아래 레이블 + 원 사이 연결선(완료 구간은 주색) */
.stepper { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: kha-step; }
.stepper__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; text-align: center; color: var(--kha-text-secondary); counter-increment: kha-step; }
.stepper__item + .stepper__item::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 2px; border-radius: 2px; background: var(--kha-border-strong); }
.stepper__item.is-done + .stepper__item::before { background: var(--kha-primary); }
.stepper__marker {
  position: relative; z-index: 1; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--kha-border-input); background: var(--kha-surface); color: var(--kha-text-secondary);
  font-size: var(--kha-fs-15); font-weight: 700; font-variant-numeric: tabular-nums; --icon-size: 18px;
}
.stepper__marker:empty::before { content: counter(kha-step); }
.stepper__label { font-size: var(--kha-small-size); font-weight: 500; line-height: 1.4; }
.stepper__item.is-done .stepper__marker { background: var(--kha-primary); border-color: var(--kha-primary); color: var(--kha-white); }
.stepper__item.is-done .stepper__label { color: var(--kha-text); }
.stepper__item.is-current .stepper__marker, .stepper__item[aria-current="step"] .stepper__marker { border: 2px solid var(--kha-primary); color: var(--kha-primary-strong); box-shadow: 0 0 0 4px var(--kha-blue-100); }
.stepper__item.is-current .stepper__label, .stepper__item[aria-current="step"] .stepper__label { color: var(--kha-text-strong); font-weight: 700; }
/* 한 줄형(원 오른쪽 레이블): 좁은 머리말·모달 안 */
.stepper--inline { align-items: center; gap: 12px; }
.stepper--inline .stepper__item { flex: 1 1 auto; flex-direction: row; gap: 10px; text-align: left; }
.stepper--inline .stepper__item:last-child { flex: none; }
.stepper--inline .stepper__item + .stepper__item::before { display: none; }
.stepper--inline .stepper__item:not(:last-child)::after { content: ""; flex: 1; min-width: 16px; height: 2px; border-radius: 2px; background: var(--kha-border-strong); }
.stepper--inline .stepper__item.is-done::after { background: var(--kha-primary); }
.stepper--inline .stepper__label { white-space: nowrap; }
/* 세로형: 긴 절차 안내 */
.stepper--vertical { flex-direction: column; }
.stepper--vertical .stepper__item { flex: none; flex-direction: row; align-items: flex-start; gap: 12px; padding-bottom: 20px; text-align: left; }
.stepper--vertical .stepper__item + .stepper__item::before { display: none; }
.stepper--vertical .stepper__item:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--kha-border-strong); }
.stepper--vertical .stepper__item.is-done:not(:last-child)::after { background: var(--kha-primary); }
.stepper--vertical .stepper__label { padding-top: 5px; }
/* 모바일 요약형: "4단계 중 2단계" */
.stepper-mini { display: flex; flex-direction: column; gap: 8px; }
.stepper-mini__text { display: flex; align-items: baseline; gap: 8px; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.stepper-mini__text strong { font-size: var(--kha-body-size); color: var(--kha-text-strong); }
.stepper-mini__bars { display: grid; grid-template-columns: repeat(var(--stepper-steps, 4), 1fr); gap: 4px; }
.stepper-mini__bars > span { height: 4px; border-radius: 2px; background: var(--kha-border-strong); }
.stepper-mini__bars > span.is-done, .stepper-mini__bars > span.is-current { background: var(--kha-primary); }
@container kha (max-width: 767px) {
  .stepper:not(.stepper--vertical) .stepper__item:not(.is-current):not([aria-current="step"]) .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ==========================================================================
   11. 알림 상자 · 알림 띠(이미지 팝업 대신) · 모달 · 토스트
   ========================================================================== */
.alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px;
  padding: 16px 20px; border: 1px solid var(--al-border); border-radius: var(--kha-radius-md);
  background: var(--al-bg); color: var(--kha-text); --kha-link: var(--kha-link-strong); --icon-size: 22px;
  --al-bg: var(--kha-info-bg); --al-border: var(--kha-info-border); --al-icon: var(--kha-info-icon); --al-title: var(--kha-info-text);
}
.alert__icon { color: var(--al-icon); margin-top: 1px; }
.alert__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert__title { font-weight: 700; color: var(--al-title); }
.alert__action { align-self: center; font-weight: 600; white-space: nowrap; }
.alert--success { --al-bg: var(--kha-success-bg); --al-border: var(--kha-success-border); --al-icon: var(--kha-success-icon); --al-title: var(--kha-success-text); }
.alert--warning { --al-bg: var(--kha-warning-bg); --al-border: var(--kha-warning-border); --al-icon: var(--kha-warning-icon); --al-title: var(--kha-warning-text); }
.alert--danger { --al-bg: var(--kha-danger-bg); --al-border: var(--kha-danger-border); --al-icon: var(--kha-danger-icon); --al-title: var(--kha-danger-text); }
.alert--neutral { --al-bg: var(--kha-surface-subtle); --al-border: var(--kha-border); --al-icon: var(--kha-text-secondary); --al-title: var(--kha-text-strong); }
.alert--compact { padding: 10px 14px; --icon-size: 18px; font-size: var(--kha-small-size); }
@container kha (max-width: 767px) {
  .alert { grid-template-columns: auto minmax(0, 1fr); }
  .alert__action { grid-column: 2; justify-self: start; }
}

/* 알림 띠: 글자 1줄 + 링크 1개, 닫기 없음, 필요한 기간만 (KRDS 긴급 공지) */
.notice-bar { background: var(--kha-info-bg); border-bottom: 1px solid var(--kha-info-border); color: var(--kha-text-strong); font-size: var(--kha-fs-15); --kha-link: var(--kha-link-strong); }
.notice-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-block: 8px; }
.notice-bar__label { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 700; color: var(--kha-info-text); --icon-size: 18px; }
.notice-bar__text { flex: 1; min-width: 0; }
.notice-bar__link { flex: none; font-weight: 600; white-space: nowrap; }
.notice-bar--warning { background: var(--kha-warning-bg); border-bottom-color: var(--kha-warning-border); }
.notice-bar--warning .notice-bar__label { color: var(--kha-warning-text); }
@container kha (max-width: 767px) {
  .notice-bar__inner { align-items: flex-start; gap: 8px; font-size: var(--kha-fs-14); }
  .notice-bar__label, .notice-bar__link { line-height: 1.5; }
}

/* 모달(최후의 수단 — 되돌리기 어려운 행동 확인에만) */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--kha-z-modal); display: grid; place-items: center; padding: 24px; background: var(--kha-backdrop); }
.modal-backdrop--inline { position: relative; inset: auto; z-index: auto; min-height: 400px; padding: 40px 24px; border-radius: var(--kha-radius-lg); }
.modal-backdrop--inline .modal { max-height: none; }
.modal {
  display: flex; flex-direction: column; width: min(100%, var(--modal-w, 520px)); max-height: calc(100% - 48px);
  background: var(--kha-surface); border-radius: var(--kha-radius-lg); box-shadow: var(--kha-shadow-xl); overflow: hidden;
}
.modal--sm { --modal-w: 420px; } .modal--lg { --modal-w: 720px; }
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 0; }
.modal__title { font-size: max(calc(var(--kha-h2-size) - 2px), var(--kha-fs-17)); font-weight: 700; line-height: 1.4; color: var(--kha-text-heading); letter-spacing: var(--kha-ls-heading); }
.modal__header .icon-btn { margin: -6px -8px 0 0; }
.modal__body { display: flex; flex-direction: column; gap: 12px; padding: 12px 24px 24px; overflow: auto; color: var(--kha-text); }
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--kha-border); background: var(--kha-surface-subtle); }
@container kha (max-width: 767px) {
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 88%; border-radius: 16px 16px 0 0; }
  .modal__footer > .btn { flex: 1; }
}

/* 토스트(잠깐 뜨는 결과 알림) */
.toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--kha-z-toast); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; max-width: min(560px, 100%); padding: 12px 16px;
  border-radius: var(--kha-radius-md); background: var(--kha-gray-900); color: var(--kha-white);
  font-size: var(--kha-fs-15); line-height: 1.45; box-shadow: var(--kha-shadow-lg); --icon-size: 20px;
}
.toast__icon { color: var(--kha-green-400); }
.toast--error .toast__icon { color: var(--kha-red-300); }
.toast--info .toast__icon { color: var(--kha-blue-300); }
.toast__action { margin-left: 8px; flex: none; color: var(--kha-blue-300); font-weight: 600; text-decoration: none; white-space: nowrap; background: none; border: 0; padding: 0; }
.toast__action:hover { text-decoration: underline; }

/* ==========================================================================
   12. KPI 타일 · 진행 막대
   ========================================================================== */
.kpi-row { --kpi-cols: 4; display: grid; grid-template-columns: repeat(var(--kpi-cols), minmax(0, 1fr)); gap: var(--kha-block-gap); }
.kpi-row--2 { --kpi-cols: 2; } .kpi-row--3 { --kpi-cols: 3; } .kpi-row--5 { --kpi-cols: 5; }
@container kha (max-width: 1023px) { .kpi-row, .kpi-row--3, .kpi-row--5 { --kpi-cols: 2; } }
.kpi { --kpi-value-size: var(--kha-fs-32); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 20px 24px; background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); }
.theme-work .kpi { padding: 16px 20px; }
.kpi__label { display: flex; align-items: center; gap: 6px; font-size: var(--kha-small-size); font-weight: 600; color: var(--kha-text-secondary); --icon-size: 18px; }
.kpi__value { display: flex; align-items: baseline; gap: 4px; font-size: var(--kpi-value-size); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--kha-text-heading); font-variant-numeric: tabular-nums; }
.theme-work .kpi { --kpi-value-size: var(--kha-fs-28); }
.kpi__unit { font-size: var(--kha-fs-17); font-weight: 600; letter-spacing: 0; color: var(--kha-text-secondary); }
.kpi__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--kha-fs-14); color: var(--kha-text-secondary); }
.kpi__source { margin-top: auto; padding-top: 8px; font-size: var(--kha-fs-13); color: var(--kha-text-tertiary); }
.kpi--accent { --accent: var(--kha-primary); }
.kpi--accent::before { content: ""; position: absolute; left: 24px; top: -1px; width: 32px; height: 4px; border-radius: 0 0 4px 4px; background: var(--accent); }
.theme-work .kpi--accent::before { left: 20px; }
.kpi--inverse { background: var(--kha-surface-inverse); border-color: var(--kha-surface-inverse); }
.kpi--inverse .kpi__label, .kpi--inverse .kpi__meta, .kpi--inverse .kpi__unit { color: var(--kha-navy-200); }
.kpi--inverse .kpi__value { color: var(--kha-white); }
.kpi--inverse .kpi__source { color: var(--kha-navy-300); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kha-text-strong); --icon-size: 16px; }
.delta--good { color: var(--kha-success-text); }
.delta--bad { color: var(--kha-danger-text); }

.progress { --progress-h: 8px; position: relative; height: var(--progress-h); border-radius: var(--kha-radius-pill); background: var(--kha-gray-200); overflow: hidden; }
.progress__bar { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--kha-primary); }
.progress--success .progress__bar { background: var(--kha-success-icon); }
.progress--warning .progress__bar { background: var(--kha-warning-icon); }
.progress--danger .progress__bar { background: var(--kha-danger-icon); }
.progress--neutral .progress__bar { background: var(--kha-gray-500); }
.progress--sm { --progress-h: 6px; } .progress--lg { --progress-h: 12px; }
.progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.progress-meta strong { font-size: var(--kha-fs-19); color: var(--kha-text-strong); font-variant-numeric: tabular-nums; }
.theme-work .progress-meta strong { font-size: var(--kha-fs-15); }

/* ==========================================================================
   13. 타임라인(활동 기록) · 단계 계획(phases) · 일정 막대(gantt)
   ========================================================================== */
.timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline__item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding-bottom: 20px; }
.timeline__item::before { content: ""; position: absolute; left: 9px; top: 24px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--kha-border); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__dot { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--kha-border-input); background: var(--kha-surface); color: var(--kha-white); --icon-size: 12px; }
.timeline__item.is-done .timeline__dot { background: var(--kha-primary); border-color: var(--kha-primary); }
.timeline__item.is-done::before { background: var(--kha-blue-200); }
.timeline__item.is-current .timeline__dot { border-color: var(--kha-primary); background: radial-gradient(circle, var(--kha-primary) 0 4px, var(--kha-surface) 4.5px); box-shadow: 0 0 0 4px var(--kha-blue-100); }
.timeline__item.is-ai .timeline__dot { background: var(--kha-ai-bg-strong); border-color: var(--kha-ai-accent); color: var(--kha-ai-accent); }
.timeline__item.is-approved .timeline__dot { background: var(--kha-success-icon); border-color: var(--kha-success-icon); }
.timeline__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.timeline__time { font-size: var(--kha-fs-13); color: var(--kha-text-tertiary); font-variant-numeric: tabular-nums; }
.timeline__title { font-weight: 600; color: var(--kha-text-strong); }
.timeline__desc { font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.timeline--activity .timeline__item { grid-template-columns: 28px minmax(0, 1fr); padding-bottom: 16px; }
.timeline--activity .timeline__item::before { left: 13px; top: 32px; }
.timeline--activity .avatar { --avatar-size: 28px; font-size: var(--kha-fs-13); }

/* 단계 계획(AX 로드맵 등): 진단 → 파일럿 → 확산 → 고도화 */
.phases { --phases-n: 4; display: grid; grid-template-columns: repeat(var(--phases-n), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.phase { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); }
.phase:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; top: 34px; right: -13px; width: 10px; height: 10px;
  border-top: 2px solid var(--kha-gray-400); border-right: 2px solid var(--kha-gray-400); transform: rotate(45deg);
}
.phase__head { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-bottom: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg) var(--kha-radius-lg) 0 0; background: var(--kha-surface-subtle); }
.phase__step { font-size: var(--kha-fs-13); font-weight: 700; color: var(--kha-link-strong); }
.phase__title { font-size: var(--kha-fs-19); font-weight: 700; color: var(--kha-text-heading); line-height: 1.35; }
.phase__period { font-size: var(--kha-fs-14); font-weight: 600; color: var(--kha-text-secondary); font-variant-numeric: tabular-nums; }
.phase__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; font-size: var(--kha-small-size); color: var(--kha-text); }
.phase__body ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.1em; }
.phase__gate { margin-top: auto; padding: 12px 16px; border-top: 1px dashed var(--kha-border-strong); font-size: var(--kha-fs-14); color: var(--kha-text-secondary); }
.phase__gate b { display: block; margin-bottom: 2px; color: var(--kha-text-strong); font-size: var(--kha-fs-13); }
.phase.is-current { border-color: var(--kha-primary); box-shadow: inset 0 0 0 1px var(--kha-primary); }
.phase.is-current .phase__head { background: var(--kha-primary-subtle); }
@container kha (max-width: 1023px) {
  .phases { --phases-n: 2; }
  .phase::after { display: none; }
}
@container kha (max-width: 767px) { .phases { --phases-n: 1; } }

/* 일정 막대(gantt): .gantt[style="--gantt-cols:10"] → 행마다 .gantt__track 안 .gantt__bar[style="--start:1;--span:3"] */
.gantt { --gantt-cols: 10; --gantt-label-w: 160px; display: flex; flex-direction: column; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); background: var(--kha-surface); overflow: hidden; font-size: var(--kha-small-size); }
.gantt__row { display: grid; grid-template-columns: var(--gantt-label-w) minmax(0, 1fr); align-items: center; min-height: 48px; border-bottom: 1px solid var(--kha-border); }
.gantt__row:last-child { border-bottom: 0; }
.gantt__row--head { min-height: 36px; background: var(--kha-surface-subtle); color: var(--kha-text-secondary); font-size: var(--kha-fs-13); font-weight: 600; }
.gantt__label { padding: 8px 16px; font-weight: 600; color: var(--kha-text-strong); border-right: 1px solid var(--kha-border); align-self: stretch; display: flex; align-items: center; }
.gantt__track { position: relative; display: grid; grid-template-columns: repeat(var(--gantt-cols), minmax(0, 1fr)); align-items: center; align-self: stretch; padding: 8px 0;
  background-image: linear-gradient(to right, var(--kha-border) 1px, transparent 1px); background-size: calc(100% / var(--gantt-cols)) 100%; }
.gantt__row--head .gantt__track { padding: 0; background: none; }
.gantt__row--head .gantt__track > span { text-align: center; font-variant-numeric: tabular-nums; }
.gantt__bar {
  --gantt-bar: var(--kha-primary); --gantt-bar-fg: var(--kha-white);
  grid-column: var(--start, 1) / span var(--span, 1); display: flex; align-items: center; gap: 6px; height: 30px; margin: 0 3px; padding: 0 10px;
  border-radius: var(--kha-radius-sm); background: var(--gantt-bar); color: var(--gantt-bar-fg);
  font-size: var(--kha-fs-13); font-weight: 600; white-space: nowrap; overflow: hidden;
}
.gantt__bar--soft { --gantt-bar: var(--kha-blue-100); --gantt-bar-fg: var(--kha-blue-800); }
.gantt__bar--navy { --gantt-bar: var(--kha-navy-900); --gantt-bar-fg: var(--kha-white); }
.gantt__bar--gray { --gantt-bar: var(--kha-gray-200); --gantt-bar-fg: var(--kha-gray-800); }
.gantt__bar--milestone { --gantt-bar: var(--kha-warning-bg-strong); --gantt-bar-fg: var(--kha-warning-text); }

/* ==========================================================================
   14. 달력 — 요일 표시, 상태는 색 + 글자, 모바일은 목록 보기 권장
   ========================================================================== */
.cal { --cal-cell-h: 104px; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); background: var(--kha-surface); overflow: hidden; }
.cal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--kha-border); }
.cal__month { display: flex; align-items: center; gap: 4px; font-size: var(--kha-fs-19); font-weight: 700; color: var(--kha-text-heading); font-variant-numeric: tabular-nums; }
.cal__head, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__dow { padding: 10px 12px; background: var(--kha-surface-subtle); border-bottom: 1px solid var(--kha-border); font-size: var(--kha-fs-14); font-weight: 600; color: var(--kha-text-secondary); }
.cal__dow--sun { color: var(--kha-red-700); } .cal__dow--sat { color: var(--kha-blue-700); }
.cal__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: var(--cal-cell-h); padding: 8px; border-right: 1px solid var(--kha-border); border-bottom: 1px solid var(--kha-border); }
.cal__grid > .cal__cell:nth-child(7n) { border-right: 0; }
.cal__grid > .cal__cell:nth-last-child(-n + 7) { border-bottom: 0; }
.cal__date { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--kha-fs-15); font-weight: 600; color: var(--kha-text-strong); font-variant-numeric: tabular-nums; }
.cal__cell--sun .cal__date { color: var(--kha-red-700); }
.cal__cell--sat .cal__date { color: var(--kha-blue-700); }
.cal__cell.is-outside { background: var(--kha-surface-subtle); }
.cal__cell.is-outside .cal__date { color: var(--kha-text-tertiary); font-weight: 500; }
.cal__cell.is-today .cal__date { background: var(--kha-primary); color: var(--kha-white); }
.cal__cell.is-selected { box-shadow: inset 0 0 0 2px var(--kha-primary); }
.cal__event {
  display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 8px; border-radius: var(--kha-radius-sm);
  border-left: 3px solid var(--ev-bar); background: var(--ev-bg); color: var(--ev-text);
  font-size: var(--kha-fs-13); font-weight: 600; line-height: 1.35; text-decoration: none; overflow: hidden;
  --ev-bg: var(--kha-info-bg-strong); --ev-text: var(--kha-info-text); --ev-bar: var(--kha-info-icon);
}
.cal__event:hover { text-decoration: underline; }
.cal__event--open { --ev-bg: var(--kha-success-bg-strong); --ev-text: var(--kha-success-text); --ev-bar: var(--kha-success-icon); }
.cal__event--closing { --ev-bg: var(--kha-warning-bg-strong); --ev-text: var(--kha-warning-text); --ev-bar: var(--kha-warning-icon); }
.cal__event--closed { --ev-bg: var(--kha-neutral-bg); --ev-text: var(--kha-neutral-text); --ev-bar: var(--kha-gray-400); }
.cal__event--upcoming { --ev-bg: var(--kha-info-bg-strong); --ev-text: var(--kha-info-text); --ev-bar: var(--kha-info-icon); }
.cal__event--work { --ev-bg: var(--kha-ai-bg-strong); --ev-text: var(--kha-ai-text); --ev-bar: var(--kha-ai-accent); }
.cal--compact { --cal-cell-h: 64px; }
.cal--compact .cal__event { min-height: 0; padding: 0; border: 0; background: none; font-size: 0; }
.cal--compact .cal__event::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ev-bar); }
@container kha (max-width: 767px) {
  .cal { --cal-cell-h: 56px; }
  .cal__dow { padding: 8px 4px; text-align: center; }
  .cal__cell { padding: 4px; align-items: center; }
  .cal__event { min-height: 0; padding: 0; border: 0; background: none; font-size: 0; }
  .cal__event::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ev-bar); }
}

/* ==========================================================================
   15. AI 업무 화면 부품
   원칙: 판단은 AI(초안·요약) / 계산과 결정은 코드(.calc) / 모든 결과에 근거(.cite·.source-card),
        없으면 '찾을 수 없음' / 사람이 최종 승인(.approve-bar: 고치기·반려·검토 후 반영)
   ========================================================================== */
.chat { display: flex; flex-direction: column; gap: 20px; }
.msg { display: flex; gap: 12px; min-width: 0; }
.msg--user { justify-content: flex-end; }
.msg--user .msg__bubble {
  max-width: min(560px, 82%); padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  background: var(--kha-surface-muted); color: var(--kha-text-strong);
}
.msg__avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--kha-navy-900); color: var(--kha-white); --icon-size: 18px; }
.msg__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.msg__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.msg__name { font-weight: 700; color: var(--kha-text-strong); }
.msg__time { font-size: var(--kha-fs-13); color: var(--kha-text-tertiary); font-variant-numeric: tabular-nums; }
.msg__content { display: flex; flex-direction: column; gap: 8px; color: var(--kha-text); line-height: 1.6; }
.msg__content :where(ul, ol) { padding-left: 1.2em; }
.msg__sources { display: flex; flex-wrap: wrap; gap: 6px; }
.msg__actions { display: flex; gap: 2px; }
.msg__actions .icon-btn { --icon-btn-size: 30px; --icon-size: 16px; }

/* 입력창(질문 쓰기) */
.composer { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--kha-border-input); border-radius: var(--kha-radius-lg); background: var(--kha-surface); }
.composer:focus-within { border-color: var(--kha-primary); box-shadow: var(--kha-focus-halo); }
.composer__input { width: 100%; min-height: 44px; border: 0; outline: 0; resize: none; background: transparent; color: var(--kha-text-strong); font-size: var(--kha-body-size); line-height: 1.5; }
.composer__input::placeholder { color: var(--kha-text-tertiary); }
.composer__bar { display: flex; align-items: center; gap: 8px; }
.composer__hint { font-size: var(--kha-fs-13); color: var(--kha-text-tertiary); }
.composer__bar .btn { margin-left: auto; }

/* 근거 칩 · 본문 속 근거 번호 */
.cite {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 10px 0 3px;
  border: 1px solid var(--kha-source-border); border-radius: var(--kha-radius-pill); background: var(--kha-source-bg);
  color: var(--kha-source-text); font-size: var(--kha-fs-13); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.cite:hover { background: var(--kha-sky-100); text-decoration: none; }
.cite__num { display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--kha-radius-pill); background: var(--kha-source-num); color: var(--kha-white); font-size: var(--kha-fs-13); font-weight: 700; font-variant-numeric: tabular-nums; }
.cite__label { overflow: hidden; text-overflow: ellipsis; }
.cite--none { border-style: dashed; border-color: var(--kha-notfound-border); background: var(--kha-notfound-bg); color: var(--kha-notfound-text); padding-left: 8px; --icon-size: 15px; }
.cite-ref {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px 0 2px;
  border-radius: 5px; background: var(--kha-source-bg); box-shadow: inset 0 0 0 1px var(--kha-source-border);
  color: var(--kha-source-text); font-size: var(--kha-fs-13); font-weight: 700; line-height: 1; vertical-align: 0.2em; text-decoration: none;
}
a.cite-ref:hover { background: var(--kha-sky-100); }

/* 출처 카드 */
.source-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); min-width: 0; }
.source-card__head { display: flex; align-items: center; gap: 8px; min-width: 0; --icon-size: 18px; }
.source-card__head > [data-icon] { color: var(--kha-sky-700); }
.source-card__title { font-weight: 700; color: var(--kha-text-strong); font-size: var(--kha-small-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-card__loc { flex: none; margin-left: auto; font-size: var(--kha-fs-13); font-weight: 600; color: var(--kha-text-secondary); }
.source-card__quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--kha-sky-300); border-radius: 0 6px 6px 0; background: var(--kha-surface-subtle); color: var(--kha-text); font-size: var(--kha-small-size); line-height: 1.6; }
.source-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--kha-fs-13); color: var(--kha-text-tertiary); }
.source-card__open { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--kha-fs-13); font-weight: 600; --icon-size: 14px; }
.source-card--notfound { border-style: dashed; border-color: var(--kha-notfound-border); background: var(--kha-notfound-bg); }
.source-card--notfound .source-card__head > [data-icon] { color: var(--kha-text-secondary); }

/* AI 초안 블록 */
.ai-draft { position: relative; display: flex; flex-direction: column; background: var(--kha-surface); border: 1px solid var(--kha-ai-border); border-radius: var(--kha-radius-lg); overflow: hidden; }
.ai-draft::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kha-ai-accent); }
.ai-draft__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px 12px 20px; background: var(--kha-ai-bg); border-bottom: 1px solid var(--kha-ai-border); --icon-size: 18px; }
.ai-draft__head > [data-icon] { color: var(--kha-ai-accent); }
.ai-draft__title { font-weight: 700; color: var(--kha-ai-text); }
.ai-draft__meta { margin-left: auto; font-size: var(--kha-fs-13); color: var(--kha-text-secondary); font-variant-numeric: tabular-nums; }
.ai-draft__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 12px 20px; color: var(--kha-text); line-height: 1.6; }
.ai-draft__sources { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px 20px; }
.ai-draft > .approve-bar { padding: 12px 16px 12px 20px; border-top: 1px solid var(--kha-border); background: var(--kha-surface-subtle); }

/* 승인 버튼 묶음: 상태(검토 필요) + [고치기] [반려] [검토 후 반영] */
.approve-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.approve-bar__status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.approve-bar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.approve-stamp { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--kha-success-text); --icon-size: 18px; }
.approve-stamp--rejected { color: var(--kha-danger-text); }

/* 코드 계산값(회비·실적 합계 등 — AI가 아닌 코드가 계산) */
.calc {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 1px 8px; border: 1px dashed var(--kha-calc-border); border-radius: var(--kha-radius-sm);
  background: var(--kha-calc-bg); color: var(--kha-calc-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc__label { display: inline-flex; align-items: center; gap: 3px; font-size: var(--kha-fs-13); font-weight: 600; color: var(--kha-text-secondary); --icon-size: 13px; align-self: center; }
.calc--block { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: var(--kha-radius-md); }

/* ==========================================================================
   16. 업무 화면 틀 · 사이드바 · 오른쪽 패널 (Linear식: 왼쪽 메뉴 + 본문 + 상세/AI 패널)
   ========================================================================== */
.app-shell { display: grid; grid-template-columns: var(--kha-sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--kha-page-bg); }
.app-shell--panel { grid-template-columns: var(--kha-sidebar-w) minmax(0, 1fr) var(--kha-panel-w); }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-content { display: flex; flex-direction: column; gap: var(--kha-block-gap); padding: 24px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.page-head__title { display: flex; flex-direction: column; gap: 4px; }
.page-head__desc { color: var(--kha-text-secondary); font-size: var(--kha-small-size); }
.app-panel { display: flex; flex-direction: column; min-width: 0; background: var(--kha-surface); border-left: 1px solid var(--kha-border); }
.panel { display: flex; flex-direction: column; min-width: 0; background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); }
.app-panel > .panel__head, .panel__head { display: flex; align-items: center; gap: 8px; min-height: var(--kha-topbar-h); padding: 0 16px; border-bottom: 1px solid var(--kha-border); }
.panel__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kha-text-heading); font-size: var(--kha-fs-15); --icon-size: 18px; }
.panel__head .panel__actions { margin-left: auto; display: flex; gap: 4px; }
.panel__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; flex: 1; min-height: 0; overflow: auto; }
.panel__foot { padding: 12px 16px; border-top: 1px solid var(--kha-border); }

.side-nav { display: flex; flex-direction: column; gap: 2px; min-height: 100%; padding: 12px; background: var(--kha-surface-subtle); border-right: 1px solid var(--kha-border); font-size: var(--kha-fs-14); }
.side-nav__brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px; margin-bottom: 8px; text-decoration: none; }
.side-nav__logo { display: block; height: 24px; width: auto; }
.side-nav__product { padding-left: 10px; border-left: 1px solid var(--kha-border-strong); font-size: var(--kha-fs-14); font-weight: 700; color: var(--kha-text-heading); white-space: nowrap; line-height: 1.2; }
.side-nav__search {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin-bottom: 8px; padding: 0 6px 0 10px;
  border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-md); background: var(--kha-surface);
  color: var(--kha-text-tertiary); font-size: var(--kha-fs-14); text-align: left; --icon-size: 18px;
}
.side-nav__search kbd { margin-left: auto; }
.side-nav__section { padding: 16px 10px 6px; font-size: var(--kha-fs-13); font-weight: 600; color: var(--kha-text-tertiary); }
.side-nav__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.side-nav__item {
  display: flex; align-items: center; gap: 10px; height: var(--kha-nav-item-h, 36px); padding: 0 10px; border-radius: var(--kha-radius-md);
  color: var(--kha-text-secondary); font-weight: 500; text-decoration: none; white-space: nowrap; --icon-size: 18px;
}
.side-nav__item > [data-icon] { color: var(--kha-text-tertiary); }
.side-nav__item:hover { background: var(--kha-surface-muted); color: var(--kha-text-strong); text-decoration: none; }
.side-nav__item[aria-current="page"], .side-nav__item.is-active { background: var(--kha-surface); color: var(--kha-primary-strong); font-weight: 600; box-shadow: var(--kha-shadow-xs), inset 0 0 0 1px var(--kha-border); }
.side-nav__item[aria-current="page"] > [data-icon], .side-nav__item.is-active > [data-icon] { color: var(--kha-primary); }
.side-nav__item > .badge { margin-left: auto; }
.side-nav__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 6px 4px; border-top: 1px solid var(--kha-border); }
.side-nav__user { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-nav__user b { color: var(--kha-text-strong); font-size: var(--kha-fs-14); }
.side-nav__user span { color: var(--kha-text-tertiary); font-size: var(--kha-fs-13); }
/* 어두운 사이드바(CI 2순위: Stratos 바탕 + 흰 로고 HED@4x.png) */
.side-nav--dark { background: var(--kha-navy-900); border-right-color: var(--kha-navy-900); color: var(--kha-navy-200); }
.side-nav--dark .side-nav__product { color: var(--kha-white); border-left-color: var(--kha-border-inverse); }
.side-nav--dark .side-nav__search { background: rgba(255, 255, 255, 0.06); border-color: var(--kha-border-inverse); color: var(--kha-navy-200); }
.side-nav--dark kbd { background: transparent; border-color: rgba(255, 255, 255, 0.24); color: var(--kha-navy-200); }
.side-nav--dark .side-nav__section { color: var(--kha-navy-300); }
.side-nav--dark .side-nav__item { color: var(--kha-navy-200); }
.side-nav--dark .side-nav__item > [data-icon] { color: var(--kha-navy-300); }
.side-nav--dark .side-nav__item:hover { background: rgba(255, 255, 255, 0.06); color: var(--kha-white); }
.side-nav--dark .side-nav__item[aria-current="page"], .side-nav--dark .side-nav__item.is-active { background: var(--kha-navy-800); color: var(--kha-white); box-shadow: inset 3px 0 0 var(--kha-ci-supernova); }
.side-nav--dark .side-nav__item[aria-current="page"] > [data-icon], .side-nav--dark .side-nav__item.is-active > [data-icon] { color: var(--kha-white); }
.side-nav--dark .badge { background: rgba(255, 255, 255, 0.14); color: var(--kha-white); }
.side-nav--dark .badge--primary { background: var(--kha-primary); }
.side-nav--dark .side-nav__foot { border-top-color: var(--kha-border-inverse); }
.side-nav--dark .side-nav__user b { color: var(--kha-white); }
.side-nav--dark .side-nav__user span { color: var(--kha-navy-300); }
@container kha (max-width: 1023px) {
  .app-shell, .app-shell--panel { grid-template-columns: minmax(0, 1fr); }
  .app-shell > .side-nav, .app-panel { display: none; }
}

/* ==========================================================================
   17. 기타 — 쪽 번호 · 경로(breadcrumb) · 빈 상태 · 아바타 · 범례 · CI 띠 · 시안 표시
   ========================================================================== */
.pagination { --pagination-size: 40px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.pagination__item {
  display: inline-grid; place-items: center; min-width: var(--pagination-size); height: var(--pagination-size); padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--kha-radius-md); color: var(--kha-text-secondary);
  font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; --icon-size: 18px;
}
.pagination__item:hover { background: var(--kha-surface-subtle); color: var(--kha-text-strong); text-decoration: none; }
.pagination__item[aria-current="page"] { background: var(--kha-primary-subtle); border-color: var(--kha-primary-border); color: var(--kha-primary-strong); }
.theme-work .pagination { --pagination-size: 32px; font-size: var(--kha-fs-14); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; --icon-size: 16px; }
.breadcrumb li + li::before {
  content: ""; width: 16px; height: 16px; background: var(--kha-gray-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--kha-text-strong); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--kha-text-strong); font-weight: 600; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; border: 1px dashed var(--kha-border-strong); border-radius: var(--kha-radius-lg); background: var(--kha-surface); }
.empty-state__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--kha-surface-muted); color: var(--kha-text-secondary); --icon-size: 28px; }
.empty-state__title { font-size: var(--kha-fs-17); font-weight: 700; color: var(--kha-text-strong); }
.empty-state__desc { max-width: 440px; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.empty-state .btn { margin-top: 8px; }

.avatar { --avatar-size: 32px; display: inline-grid; place-items: center; flex: none; width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; background: var(--kha-navy-100); color: var(--kha-navy-700); font-size: var(--kha-fs-13); font-weight: 700; letter-spacing: 0; overflow: hidden; }
.avatar--lg { --avatar-size: 40px; font-size: var(--kha-fs-15); }
.avatar--ai { background: var(--kha-navy-900); color: var(--kha-white); --icon-size: 16px; border-radius: 9px; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--kha-small-size); color: var(--kha-text-secondary); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--legend-color, var(--kha-primary)); flex: none; }
.legend__swatch--line { height: 3px; width: 16px; border-radius: 2px; }

/* CI 4색 띠(그래픽 요소): Cerulean · Cinnabar · Apple · Supernova */
.ci-bar { --ci-bar-h: 4px; display: block; height: var(--ci-bar-h); background: linear-gradient(90deg, var(--kha-ci-cerulean) 0 25%, var(--kha-ci-cinnabar) 25% 50%, var(--kha-ci-apple) 50% 75%, var(--kha-ci-supernova) 75% 100%); }

/* 시안 표시: 모든 시안 화면 구석에 '리뉴얼 시안 · 예시 데이터' 또는 'AI 업무 화면 시안 · 예시 데이터' */
.mock-label {
  position: fixed; right: 16px; bottom: 16px; z-index: var(--kha-z-mock-label);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--kha-radius-sm);
  background: rgba(25, 30, 41, 0.88); color: var(--kha-white); font: 600 13px/1.2 var(--kha-font-sans); letter-spacing: 0;
  pointer-events: none; --icon-size: 14px;
}
.mock-label--abs { position: absolute; }
.mock-label--top { top: 16px; bottom: auto; }

/* ==========================================================================
   18. 폰 프레임(390×844 화면) · 브라우저 프레임
   headless 캡처는 창 폭 500px 미만이 부정확 → 넓은 페이지 안에 .phone을 놓고 찍는다.
   ========================================================================== */
.phone {
  --phone-w: 390px; --phone-h: 844px; --phone-bezel: 12px;
  position: relative; flex: none; width: calc(var(--phone-w) + var(--phone-bezel) * 2); height: calc(var(--phone-h) + var(--phone-bezel) * 2);
  padding: var(--phone-bezel); border-radius: 58px; background: #0D0F14;
  box-shadow: inset 0 0 0 1.5px #3A3F4B, var(--kha-shadow-xl);
}
.phone__screen {
  position: relative; display: flex; flex-direction: column; width: var(--phone-w); height: var(--phone-h);
  border-radius: 46px; overflow: hidden; background: var(--kha-page-bg); container: kha / inline-size;
}
.phone__screen::before { content: ""; position: absolute; top: 11px; left: 50%; z-index: 30; width: 124px; height: 36px; border-radius: 20px; background: #0D0F14; transform: translateX(-50%); }
.phone__status {
  position: relative; z-index: 20; flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 54px; padding: 4px 30px 0 40px; background: var(--phone-status-bg, transparent);
  font: 600 16px/1 var(--kha-font-sans); letter-spacing: 0; color: var(--kha-gray-900);
}
.phone__status::after {
  content: ""; width: 72px; height: 14px; background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cg fill='%23191E29'%3E%3Crect x='0' y='9' width='3.2' height='4' rx='1'/%3E%3Crect x='5' y='6.5' width='3.2' height='6.5' rx='1'/%3E%3Crect x='10' y='4' width='3.2' height='9' rx='1'/%3E%3Crect x='15' y='1.5' width='3.2' height='11.5' rx='1'/%3E%3C/g%3E%3Cpath d='M24.6 5.2a8.4 8.4 0 0 1 11 0M26.8 7.7a5.2 5.2 0 0 1 6.6 0' fill='none' stroke='%23191E29' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='30.1' cy='10.6' r='1.5' fill='%23191E29'/%3E%3Crect x='43.5' y='1.5' width='23' height='11' rx='3.3' fill='none' stroke='%23191E29' stroke-opacity='.4'/%3E%3Crect x='45.5' y='3.5' width='17.5' height='7' rx='1.8' fill='%23191E29'/%3E%3Cpath d='M68.6 5.6v3' stroke='%23191E29' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.phone__status--dark { color: var(--kha-white); }
.phone__status--dark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cg fill='white'%3E%3Crect x='0' y='9' width='3.2' height='4' rx='1'/%3E%3Crect x='5' y='6.5' width='3.2' height='6.5' rx='1'/%3E%3Crect x='10' y='4' width='3.2' height='9' rx='1'/%3E%3Crect x='15' y='1.5' width='3.2' height='11.5' rx='1'/%3E%3C/g%3E%3Cpath d='M24.6 5.2a8.4 8.4 0 0 1 11 0M26.8 7.7a5.2 5.2 0 0 1 6.6 0' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='30.1' cy='10.6' r='1.5' fill='white'/%3E%3Crect x='43.5' y='1.5' width='23' height='11' rx='3.3' fill='none' stroke='white' stroke-opacity='.5'/%3E%3Crect x='45.5' y='3.5' width='17.5' height='7' rx='1.8' fill='white'/%3E%3Cpath d='M68.6 5.6v3' stroke='white' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.phone__body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.phone__body--scroll { overflow-y: auto; scrollbar-width: none; }
.phone__body--scroll::-webkit-scrollbar { display: none; }
.phone__home { position: absolute; left: 50%; bottom: 8px; z-index: 30; width: 134px; height: 5px; border-radius: 3px; background: var(--kha-gray-900); transform: translateX(-50%); }
.phone__home--light { background: var(--kha-white); }
.phone--flat { width: var(--phone-w); height: var(--phone-h); padding: 0; border-radius: 0; background: none; box-shadow: 0 0 0 1px var(--kha-border), var(--kha-shadow-lg); }
.phone--flat .phone__screen { border-radius: 0; }
.phone--flat .phone__screen::before { display: none; }
.phone--s90 { zoom: 0.9; } .phone--s75 { zoom: 0.75; } .phone--s60 { zoom: 0.6; }
.frame-caption { margin-top: 16px; text-align: center; font-size: var(--kha-fs-15); font-weight: 600; color: var(--kha-text-secondary); }

.browser { --browser-w: 1280px; display: flex; flex-direction: column; width: var(--browser-w); max-width: 100%; overflow: hidden; background: var(--kha-surface); border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-lg); box-shadow: var(--kha-shadow-lg); }
.browser__bar { position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px; background: var(--kha-gray-100); border-bottom: 1px solid var(--kha-border); }
.browser__dots { flex: none; width: 12px; height: 12px; margin-right: 40px; border-radius: 50%; background: var(--kha-gray-300); box-shadow: 20px 0 0 var(--kha-gray-300), 40px 0 0 var(--kha-gray-300); }
.browser__url {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; max-width: 560px; height: 28px; margin: 0 auto; padding: 0 12px;
  border: 1px solid var(--kha-border); border-radius: var(--kha-radius-md); background: var(--kha-surface);
  font: 500 13px/1 var(--kha-font-sans); letter-spacing: 0; color: var(--kha-text-secondary); --icon-size: 14px;
}
.browser__bar::after { content: ""; flex: none; width: 92px; }   /* 주소창 가운데 맞춤 */
.browser__viewport { position: relative; height: var(--browser-h, auto); overflow: hidden; background: var(--kha-page-bg); container: kha / inline-size; }
.browser--s75 { zoom: 0.75; } .browser--s60 { zoom: 0.6; } .browser--s50 { zoom: 0.5; }

/* ==========================================================================
   19. A4 가로 제안서 페이지(.sheet 297×210mm) — 머리말·꼬리말·쪽 번호
   인쇄(PDF): headless Chrome --print-to-pdf --no-pdf-header-footer
   ========================================================================== */
@page kha-sheet { size: 297mm 210mm; margin: 0; }
.sheet-stack { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 40px 24px; background: var(--kha-gray-200); counter-reset: kha-sheet; }
.sheet {
  page: kha-sheet;
  --kha-body-size: 14px; --kha-small-size: 13px; --kha-caption-size: 12px; --kha-label-size: 13px;
  --kha-h1-size: 28px; --kha-h2-size: 20px; --kha-h3-size: 16px; --kha-h4-size: 14px; --kha-display-size: 40px;
  --kha-table-fs: 13px; --kha-table-head-fs: 12px; --kha-table-row-h: 32px; --kha-table-head-h: 32px; --kha-table-px: 10px;
  --kha-card-pad: 14px; --kha-card-pad-lg: 20px; --kha-stack-gap: 10px; --kha-block-gap: 12px;
  --kha-tag-h: 22px; --kha-tag-fs: 12px; --kha-chip-h: 26px; --kha-chip-fs: 12px;
  --kha-control-h-sm: 28px; --kha-control-h-md: 32px; --kha-control-h-lg: 36px; --kha-control-fs-sm: 12px; --kha-control-fs-md: 13px; --kha-control-fs-lg: 14px;
  --kha-control-px-sm: 10px; --kha-control-px-md: 12px; --kha-control-px-lg: 14px;
  position: relative; display: flex; flex-direction: column; flex: none; width: 297mm; height: 210mm; padding: 10mm 15mm 8mm;
  overflow: hidden; background: var(--kha-white); color: var(--kha-text);
  font-family: var(--kha-font-sans); font-size: var(--kha-body-size); line-height: 1.5; letter-spacing: var(--kha-ls-body);
  counter-increment: kha-sheet; break-after: page; page-break-after: always; box-shadow: var(--kha-shadow-lg);
}
.sheet:last-child { break-after: auto; page-break-after: auto; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; padding-bottom: 3mm; border-bottom: 1px solid var(--kha-border); font-size: 12px; color: var(--kha-text-secondary); }
.sheet__doc { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.sheet__doc img { height: 14px; width: auto; display: block; }
.sheet__section { font-weight: 700; color: var(--kha-primary-strong); white-space: nowrap; }
.sheet__body { display: flex; flex-direction: column; gap: 5mm; flex: 1; min-height: 0; padding-top: 6mm; }
.sheet__eyebrow { font-size: 13px; font-weight: 700; color: var(--kha-primary); letter-spacing: 0; }
.sheet__title { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; color: var(--kha-text-heading); }
.sheet__lead { max-width: 210mm; font-size: 15px; line-height: 1.55; color: var(--kha-text-secondary); }
.sheet__cols { --sheet-cols: 2; display: grid; grid-template-columns: repeat(var(--sheet-cols), minmax(0, 1fr)); gap: 6mm; min-height: 0; }
.sheet__cols--3 { --sheet-cols: 3; } .sheet__cols--4 { --sheet-cols: 4; }
.sheet__fill { flex: 1; min-height: 0; }   /* 남은 높이를 채울 블록 */
.sheet__figure { display: flex; flex-direction: column; gap: 2mm; min-height: 0; }
.sheet__figure img { display: block; max-height: 100%; object-fit: contain; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-md); }
.sheet__figcaption { font-size: 12px; color: var(--kha-text-tertiary); }
.sheet__note { font-size: 12px; color: var(--kha-text-tertiary); }
.sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; margin-top: 4mm; padding-top: 3mm; border-top: 1px solid var(--kha-border); font-size: 12px; color: var(--kha-text-tertiary); }
.sheet__page { font-weight: 700; color: var(--kha-text-secondary); font-variant-numeric: tabular-nums; }
.sheet__page:empty::after { content: counter(kha-sheet); }
.sheet .conclusion { padding: 9px 14px; font-size: 14px; --icon-size: 18px; }
.sheet .kpi { padding: 12px 14px; }
.sheet .kpi { --kpi-value-size: 26px; }
/* 표지 */
.sheet--cover { padding: 18mm 20mm; background: var(--kha-navy-900); color: var(--kha-navy-200); }
.sheet--cover .sheet__title { font-size: 40px; line-height: 1.25; color: var(--kha-white); }
.sheet--cover .sheet__lead { color: var(--kha-navy-200); font-size: 17px; }
.sheet--cover .sheet__eyebrow { color: var(--kha-ci-supernova); }   /* 큰 글자·그래픽 강조(Stratos 위 12.38:1) */
.sheet--cover .ci-bar { position: absolute; left: 0; right: 0; bottom: 0; --ci-bar-h: 6px; }
.sheet--cover .sheet__foot { border-top-color: var(--kha-border-inverse); color: var(--kha-navy-300); margin-top: auto; }
/* 구역 표지(간지) */
.sheet--divider { justify-content: center; padding-inline: 24mm; background: var(--kha-surface-subtle); }
.sheet--divider .sheet__title { font-size: 34px; }
@media print {
  html, body { background: var(--kha-white) !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .sheet-stack { display: block; padding: 0; gap: 0; background: none; }
  .sheet { box-shadow: none; margin: 0; }
  .no-print { display: none !important; }
}

/* ==========================================================================
   20. 다이어그램 — 상자 · 화살표 · 묶음 · 레인(swimlane) · 번호
   ========================================================================== */
.dg { display: flex; flex-direction: column; gap: 16px; }
.dg-flow { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; }
.dg-flow--wrap { flex-wrap: wrap; row-gap: 16px; }
.dg-col { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.dg-box {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 0 1 auto; min-width: var(--dg-box-w, 96px);
  padding: 12px 16px; border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-lg);
  background: var(--kha-surface); text-align: center; --icon-size: 22px;
}
.dg-box--left { text-align: left; }
.dg-box > [data-icon] { margin: 0 auto 4px; color: var(--kha-primary); }
.dg-box--left > [data-icon] { margin-left: 0; }
.dg-box__title { font-size: var(--kha-fs-15); font-weight: 700; color: var(--kha-text-heading); line-height: 1.35; }
.dg-box__desc { font-size: var(--kha-fs-13); color: var(--kha-text-secondary); line-height: 1.45; }
.dg-box--primary { border-color: var(--kha-blue-200); background: var(--kha-primary-subtle); }
.dg-box--primary .dg-box__title { color: var(--kha-blue-800); }
.dg-box--strong { border-color: var(--kha-primary); background: var(--kha-primary); }
.dg-box--strong .dg-box__title, .dg-box--strong .dg-box__desc, .dg-box--strong > [data-icon] { color: var(--kha-white); }
.dg-box--dark { border-color: var(--kha-navy-900); background: var(--kha-navy-900); }
.dg-box--dark .dg-box__title, .dg-box--dark > [data-icon] { color: var(--kha-white); }
.dg-box--dark .dg-box__desc { color: var(--kha-navy-200); }
.dg-box--ai { border-color: var(--kha-ai-border); background: var(--kha-ai-bg); }
.dg-box--ai .dg-box__title { color: var(--kha-ai-text); }
.dg-box--ai > [data-icon] { color: var(--kha-ai-accent); }
.dg-box--muted { border-style: dashed; background: var(--kha-surface-subtle); }
.dg-box--muted .dg-box__title { color: var(--kha-text-secondary); }
.dg-box--danger { border-color: var(--kha-danger-border); background: var(--kha-danger-bg); }
.dg-box--danger .dg-box__title { color: var(--kha-danger-text); }
.dg-box--accent { --accent: var(--kha-ci-cerulean); border-top: 4px solid var(--accent); padding-top: 10px; }
.dg-box__tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }

/* 화살표: <span class="dg-arrow" style="--len:56px"><span class="dg-arrow__label">요청</span></span> */
.dg-arrow { --dg-color: var(--kha-gray-500); position: relative; flex: 0 0 var(--dg-len, 40px); align-self: center; height: 2px; margin: 0 10px 0 6px; background: var(--dg-color); }
.dg-arrow::after { content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); border-left: 8px solid var(--dg-color); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.dg-arrow--both::before { content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border-right: 8px solid var(--dg-color); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.dg-arrow--both { margin-left: 10px; }
.dg-arrow--primary { --dg-color: var(--kha-primary); }
.dg-arrow--ai { --dg-color: var(--kha-ai-accent); }
.dg-arrow--dashed { background: repeating-linear-gradient(90deg, var(--dg-color) 0 6px, transparent 6px 10px); }
.dg-arrow__label { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); white-space: nowrap; font-size: var(--kha-fs-13); font-weight: 600; color: var(--kha-text-secondary); line-height: 1.2; }
.dg-arrow__label--below { bottom: auto; top: calc(100% + 5px); }
.dg-arrow--down { flex: none; align-self: center; width: 2px; height: var(--dg-len, 28px); margin: 4px 0 10px; }
.dg-arrow--down::after { right: auto; left: 50%; top: auto; bottom: -7px; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--dg-color); border-bottom: 0; }
.dg-arrow--down.dg-arrow--dashed { background: repeating-linear-gradient(180deg, var(--dg-color) 0 6px, transparent 6px 10px); }
.dg-arrow--down .dg-arrow__label { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }

/* 묶음(경계): 예) '협회 AWS 계정(서울 리전)' */
.dg-group { --dg-line: var(--kha-blue-300); --dg-fill: transparent; --dg-label: var(--kha-blue-700); --dg-label-bg: var(--kha-white); position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 16px 16px; border: 1.5px dashed var(--dg-line); border-radius: var(--kha-radius-xl); background: var(--dg-fill); }
.dg-group__label { position: absolute; top: -12px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--dg-label-bg); color: var(--dg-label); font-size: var(--kha-fs-13); font-weight: 700; line-height: 24px; --icon-size: 15px; }
.dg-group--solid { border-style: solid; }
.dg-group--navy { --dg-line: var(--kha-navy-300); --dg-label: var(--kha-navy-700); }
.dg-group--gray { --dg-line: var(--kha-gray-300); --dg-label: var(--kha-text-secondary); }
.dg-group--fill { --dg-fill: var(--kha-primary-subtle); --dg-label-bg: var(--kha-primary-subtle); }

/* 레인(누가 무엇을 하는지): .dg-lanes > .dg-lane > .dg-lane__head + .dg-lane__body */
.dg-lanes { --dg-lane-w: 140px; display: grid; grid-template-columns: var(--dg-lane-w) minmax(0, 1fr); overflow: hidden; background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); }
.dg-lane { display: contents; }
.dg-lane__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--kha-surface-subtle); border-right: 1px solid var(--kha-border); border-bottom: 1px solid var(--kha-border); font-size: var(--kha-fs-14); font-weight: 700; color: var(--kha-text-heading); --icon-size: 18px; }
.dg-lane__body { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; padding: 14px 16px; border-bottom: 1px solid var(--kha-border); min-width: 0; }
.dg-lane:last-child > .dg-lane__head, .dg-lane:last-child > .dg-lane__body { border-bottom: 0; }
.dg-lane--ai > .dg-lane__head { background: var(--kha-ai-bg); color: var(--kha-ai-text); }
.dg-lane--code > .dg-lane__head { background: var(--kha-calc-bg); }
.dg-lane--human > .dg-lane__head { background: var(--kha-success-bg); color: var(--kha-success-text); }

.dg-num { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--kha-navy-900); color: var(--kha-white); font-size: var(--kha-fs-13); font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-num--primary { background: var(--kha-primary); }
.dg-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--kha-radius-pill); background: var(--kha-surface-muted); color: var(--kha-text-secondary); font-size: var(--kha-fs-13); font-weight: 600; white-space: nowrap; --icon-size: 14px; }