/* ==========================================================================
   주택인재개발원 리뉴얼 시안 A안 — 따뜻한 강조 테마 (2026-11-06, 개정 지침 F-35·F-40)

   - 디자인 시스템 파일(tokens.css·components.css)은 고치지 않는다. A안 화면은 이 파일을
     <head> 맨 뒤(화면 안 <style> 다음)에 불러 색만 덧입힌다.
   - 주색 #3268F0은 주요 버튼·링크·현재 메뉴(선택 상태)에만 쓴다.
   - (2026-11-06 지침 41) 바탕은 흰색. 구역은 얇은 회색 선(gray-200)과 여백으로 나눈다. 미색 바탕은 쓰지 않는다.
     설명용 예시 구역·보조 상자만 아주 옅은 회색(gray-50). 따뜻한 강조색은 카드·배지·아이콘·띠 같은 요소에만.
     파랑 바탕 구역은 두지 않는다.
   - 의미 색: 완료·수료 = 초록 · 안내·알림 = 주황 · 강조·마감 임박 = 노랑 바탕 + 남색 글자 · 정보 = 하늘.
   - CI 원색(초록·노랑·주황·하늘) 위에는 흰 글자를 올리지 않는다(남색 Stratos 글자만).
     글자 대비는 모두 4.5:1 이상(값은 각 줄 주석).
   - 항공 사진은 쓰지 않는다. 하위 화면 띠는 흰 띠 + 오른쪽 일러스트 ②(gen/iso_checkin.png) + 아래 얇은 선.
   ========================================================================== */

:root {
  --w-cream: #FFFBF2;        /* (지침 41 이후 A안 바탕에는 쓰지 않음 — 옛 값 보관) */
  --w-line: var(--kha-gray-200);        /* #E1E5EA 구역·띠·바닥글 구분선(장식) */
  --w-green-bg: var(--kha-green-50);    /* #EFFBEE 연한 초록 — 카드 머리·아이콘 바탕 등 요소에만 */
  --w-green-line: var(--kha-green-100);
  --w-footer-bg: var(--kha-gray-50);    /* #F6F7F9 바닥글 바탕(아주 옅은 회색) — gray-700 글자 9.5:1, gray-600 6.6:1 */
  --w-ink: var(--kha-navy-900);         /* Stratos #0E0042 — CI 원색 위 글자는 이것만 */
}

/* ---------- 1. 바탕: 흰색. 옅은 바탕은 회색(gray-50), 파랑 옅은 바탕 구역은 연한 초록 ---------- */
.theme-edu {
  --kha-surface-subtle: var(--kha-gray-50); /* 옅은 바탕(설명용 예시 구역·보조 상자·표 머리) = 아주 옅은 회색. 미색 쓰지 않음(지침 41) */
  --kha-surface-brand: var(--w-green-bg); /* 파랑 옅은 바탕 구역 → 연한 초록 */
  /* '정보' 상태색: 주색 파랑 → 하늘(Cerulean 계열). 하늘 50 위 하늘 800 글자 8.8:1, 아이콘 하늘 600 4.72:1 */
  --kha-info-text: var(--kha-sky-800);
  --kha-info-bg: var(--kha-sky-50);
  --kha-info-bg-strong: var(--kha-sky-100);
  --kha-info-border: var(--kha-sky-200);
  --kha-info-icon: var(--kha-sky-600);
}
.theme-edu .section--subtle { background: var(--kha-gray-50); border-block: 1px solid var(--w-line); }
.theme-edu .section--brand { background: var(--w-green-bg); }
.theme-edu .card--subtle { border-color: var(--w-line); }
/* 강조 카드(파랑 옅은 바탕) → 노랑 50 바탕 + 노랑 테두리. 링크는 진한 주색(7.0:1 이상) */
.theme-edu .card--brand { background: var(--kha-yellow-50); border-color: var(--kha-yellow-200); --kha-link: var(--kha-link-strong); }

/* ---------- 2. 작은 표시: 소제목·태그·질문 표시 ---------- */
/* 구역 소제목(eyebrow)은 누를 수 없는 글자라 주색 대신 초록 700(흰 바탕 6.57:1, 미색 6.36:1) */
.theme-edu .eyebrow { color: var(--kha-green-700); }
/* 마감 임박 = 노랑 바탕 + 남색 글자(노랑 300 위 Stratos 14.0:1) */
.theme-edu .tag--closing { background: var(--kha-yellow-300); color: var(--w-ink); }
/* 접수 예정 = 정보(하늘 100 바탕 + 하늘 800 글자 7.96:1) */
.theme-edu .tag--upcoming, .kha-app .tag--upcoming { background: var(--kha-sky-100); color: var(--kha-sky-800); }
/* 정보 표시(예: 권장 기능) = 하늘 */
.theme-edu .tag--info { background: var(--kha-sky-100); color: var(--kha-sky-800); }
/* 수료 = 초록 */
.theme-edu .tag--done { background: var(--kha-success-bg-strong); color: var(--kha-success-text); }
/* 공지 머리 표시: 안내 = 주황(주황 100 위 주황 800 6.76:1), 일정 = 하늘, 폐강·기타 = 회색 */
.w-tag--notice { background: var(--kha-orange-100); color: var(--kha-orange-800); }
.w-tag--info { background: var(--kha-sky-100); color: var(--kha-sky-800); }
/* 자주 묻는 질문 'Q' 표시 — 누르는 것은 줄 전체라 'Q'는 주황 700(5.52:1) */
.theme-edu .accordion__q { color: var(--kha-orange-700); }

/* ---------- 3. 아이콘 타일: 아이콘 뜻에 따라 4색 ----------
   완료·수료 = 초록(초록 100 위 초록 700) · 안내·알림 = 주황(주황 100 위 주황 700)
   강조·기한 = 노랑(노랑 200 위 남색) · 정보 = 하늘(하늘 100 위 하늘 700). 아이콘은 모두 3:1 이상 */
.icon-tile.w-tile--green,
.theme-edu .icon-tile:has(> [data-icon="certificate"], > [data-icon="award"], > [data-icon="check-circle"], > [data-icon="graduation-cap"], > [data-icon="user-check"], > [data-icon="clipboard-check"]) {
  --tile-bg: var(--kha-green-100); --tile-fg: var(--kha-green-700);
}
.icon-tile.w-tile--orange,
.theme-edu .icon-tile:has(> [data-icon="bell"], > [data-icon="megaphone"], > [data-icon="message-text"], > [data-icon="mail"], > [data-icon="headset"], > [data-icon="phone"], > [data-icon="help-circle"], > [data-icon="info"]) {
  --tile-bg: var(--kha-orange-100); --tile-fg: var(--kha-orange-700);
}
.icon-tile.w-tile--yellow,
.theme-edu .icon-tile:has(> [data-icon="calendar-check"], > [data-icon="clock"], > [data-icon="alert-triangle"], > [data-icon="wallet"]) {
  --tile-bg: var(--kha-yellow-200); --tile-fg: var(--w-ink);
}
.icon-tile.w-tile--sky,
.theme-edu .icon-tile:has(> [data-icon="calendar"], > [data-icon="map-pin"], > [data-icon="book-open"], > [data-icon="id-card"], > [data-icon="landmark"], > [data-icon="file-text"], > [data-icon="search"], > [data-icon="credit-card"]) {
  --tile-bg: var(--kha-sky-100); --tile-fg: var(--kha-sky-700);
}

/* ---------- 4. 번호 원: 남색 원 → 노랑 원 + 남색 숫자(노랑 400 위 Stratos 13.0:1) ---------- */
.theme-edu .pg-num { background: var(--kha-yellow-400); color: var(--w-ink); }

/* ---------- 5. 하위 화면 머리 띠(.pg-band): 흰 띠 + 오른쪽 일러스트 ② + 아래 얇은 선 (지침 41 — 메인과 같은 흰 바탕) ----------
   글자는 남색·회색(흰 바탕 4.5:1 이상). 일러스트 뒤에는 아주 옅은 하늘 빛만(미색·노랑 빛 쓰지 않음).
   일러스트는 꾸밈 그림(배경)이라 화면낭독기에 읽히지 않음.
   신청 화면처럼 오른쪽에 단계 표시가 있는 띠는 .pg-band--plain(일러스트 없음) */
.pg-band { position: relative; isolation: isolate; overflow: hidden; background: var(--kha-white); border-bottom: 1px solid var(--w-line); color: var(--kha-text); }
.pg-band::before { content: ""; position: absolute; z-index: -1; top: -40%; right: calc(max(var(--kha-gutter-md), (100% - var(--kha-container)) / 2) - 80px); width: 560px; height: 180%; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 156, 217, 0.07), rgba(3, 156, 217, 0.025) 60%, rgba(3, 156, 217, 0) 100%); pointer-events: none; }
.pg-band::after { content: ""; position: absolute; z-index: -1; top: -18px; right: max(var(--kha-gutter-md), calc((100% - var(--kha-container)) / 2)); width: 340px; height: 243px; background: url("gen/iso_checkin.png") center top / contain no-repeat; pointer-events: none; }
.pg-band--plain::before, .pg-band--plain::after { display: none; }
/* 기본값은 :where()로 낮춰 두어 화면 안 <style>의 같은 이름 규칙(예: 교육 안내의 큰 설명 글자)이 이기게 함 */
:where(.pg-band__inner) { padding-block: var(--kha-sp-24) var(--kha-sp-32); }
:where(.pg-band) .breadcrumb { color: var(--kha-text-secondary); }
:where(.pg-band) .breadcrumb a:hover, :where(.pg-band) .breadcrumb [aria-current="page"] { color: var(--kha-text-strong); }
:where(.pg-band) h1 { margin-top: var(--kha-sp-12); color: var(--kha-text-heading); }
:where(.pg-band__lead) { margin-top: var(--kha-sp-8); max-width: 44em; font-size: var(--kha-fs-17); line-height: 1.6; color: var(--kha-text); }
/* 일러스트가 있는 띠는 글자가 그림 앞(왼쪽 760px 안)에서 끝나게 */
.pg-band:not(.pg-band--plain) .pg-band__inner > * { max-width: 780px; }
@container kha (max-width: 1023px) {
  .pg-band::after { width: 240px; height: 172px; top: auto; bottom: -24px; opacity: 0.9; }
  .pg-band:not(.pg-band--plain) .pg-band__inner > * { max-width: calc(100% - 200px); }
}
@container kha (max-width: 767px) {
  .pg-band::before, .pg-band::after { display: none; }
  .pg-band:not(.pg-band--plain) .pg-band__inner > * { max-width: none; }
}

/* ---------- 6. 바닥글: 어두운 남색 → 아주 옅은 회색 바탕(gray-50, 밝은 바탕용 로고 HCL) + 위 얇은 선 ---------- */
.site-footer { background: var(--w-footer-bg); color: var(--kha-gray-600); border-top: 1px solid var(--w-line); --kha-link: var(--kha-link-strong); }
.site-footer a { color: var(--kha-gray-800); }
.site-footer__top { border-bottom-color: var(--w-line); }
.site-footer__links a { color: var(--kha-gray-700); font-weight: var(--kha-fw-medium); }
.site-footer__links a.is-strong { color: var(--w-ink); font-weight: var(--kha-fw-bold); text-decoration: underline; text-underline-offset: 0.25em; }
.site-footer__info { gap: 4px 20px; }
.site-footer__info b { color: var(--kha-gray-900); }
.site-footer__copy { color: var(--kha-gray-600); }
.site-footer .pg-ref { color: var(--kha-gray-700); }
/* 밝은 바탕이므로 키보드 초점도 주색 테두리(디자인 시스템의 '어두운 바탕 = 노랑' 규칙을 되돌림) */
.site-footer :focus-visible { outline-color: var(--kha-border-focus); }

/* ---------- 7. 하위 화면 상태 표시: 파랑 → 초록·노랑·주황 (2026-11-06 검수 반영, 지침 F-40) ----------
   주색 #3268F0은 신청·결제 버튼, 링크, 라디오(결제 흐름)에만 남긴다.
   선택·완료 = 초록 · 지금 보는 줄 = 노랑 바탕 + 주황 선 · 정보 = 하늘. 글자는 모두 4.5:1 이상. */
/* 7-1 진행 막대(글자 없는 그래픽) = 초록 600(흰 바탕 4.91:1, 회색 200 막대 바탕과 구분) */
.kha-app .progress:not(.progress--success, .progress--warning, .progress--danger, .progress--neutral) > .progress__bar { background: var(--kha-green-600); }
/* 7-2 선택한 회차 줄 = 노랑 50 바탕 + 주황 왼쪽 선. '보는 중' 글자는 주황 800(노랑 50 위 7.7:1) */
.kha-app .table tbody tr.is-selected > * { background: var(--kha-yellow-50); }
.kha-app .table tbody tr.is-selected > :first-child,
.kha-app .pg-sched tbody tr.is-selected > :first-child { box-shadow: inset 4px 0 0 var(--kha-orange-500); }
.kha-app .pg-sched tbody tr.is-selected .pg-rowgo, .kha-app .pg-rowgo__now { color: var(--kha-orange-800); }
/* 7-3 선택한 필터 칩·목차 칩 = 초록 50 바탕 + 초록 700 글자(6.2:1) + 초록 600 테두리 */
.kha-app .chip[aria-pressed="true"], .kha-app .chip[aria-selected="true"], .kha-app .chip.is-selected,
.kha-app .pg-toc .chip[aria-current="true"] { border-color: var(--kha-green-600); background: var(--kha-green-50); color: var(--kha-green-700); }
.kha-app .chip[aria-pressed="true"] .chip__count, .kha-app .chip[aria-selected="true"] .chip__count, .kha-app .chip.is-selected .chip__count { color: var(--kha-green-700); }
/* 7-4 탭: 현재 탭 = 남색 글자(19:1) + 초록 600 밑줄, 개수 표시 = 남색 바탕 흰 글자 */
.kha-app .tab[aria-selected="true"], .kha-app .tab.is-active { color: var(--w-ink); }
.kha-app .tab[aria-selected="true"]::after, .kha-app .tab.is-active::after { background: var(--kha-green-600); }
.kha-app .tab[aria-selected="true"] .badge, .kha-app .tab.is-active .badge { background: var(--w-ink); color: var(--kha-white); }
/* 7-5 신청 단계: 완료 = 초록 600 원·이음선(흰 체크 4.91:1), 지금 단계 = 초록 테두리 + 초록 700 숫자 */
.kha-app .stepper__item.is-done .stepper__marker { background: var(--kha-green-600); border-color: var(--kha-green-600); }
.kha-app .stepper__item.is-done + .stepper__item::before,
.kha-app .stepper--inline .stepper__item.is-done::after,
.kha-app .stepper--vertical .stepper__item.is-done:not(:last-child)::after { background: var(--kha-green-600); }
.kha-app .stepper__item.is-current .stepper__marker,
.kha-app .stepper__item[aria-current="step"] .stepper__marker { border-color: var(--kha-green-600); color: var(--kha-green-700); box-shadow: 0 0 0 4px var(--kha-green-100); }
.kha-app .stepper-mini__bars > span.is-done, .kha-app .stepper-mini__bars > span.is-current { background: var(--kha-green-600); }
/* 7-6 체크박스(확인됨)·스위치(켜짐) = 초록 600. 라디오·결제 수단 선택은 결제 흐름이라 주색 유지 */
.kha-app .check > input[type="checkbox"]:checked { border-color: var(--kha-green-600); background-color: var(--kha-green-600); }
.kha-app .switch > input:checked { background: var(--kha-green-600); }
/* 7-7 업무(관리자) 화면도 '정보' 상태색은 하늘 */
.theme-work {
  --kha-info-text: var(--kha-sky-800);
  --kha-info-bg: var(--kha-sky-50);
  --kha-info-bg-strong: var(--kha-sky-100);
  --kha-info-border: var(--kha-sky-200);
  --kha-info-icon: var(--kha-sky-600);
}
/* 7-8 관리자 화면: 현재 메뉴 표시 선 = 노랑(어두운 남색 바탕), 설명 번호 = 노랑 원 + 남색 숫자(13:1), 지금 단계 카드 = 노랑 50 */
.theme-work .side-nav--dark .side-nav__item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--kha-yellow-400); }
.is-key .ann.ann { background: var(--kha-yellow-400); color: var(--w-ink); box-shadow: 0 0 0 1.5px var(--w-ink); }
.ss-how__item.is-on { border-color: var(--kha-yellow-300); background: var(--kha-yellow-50); }
.ss-how__item.is-on > [data-icon] { color: var(--kha-orange-700); }
/* 7-9 화면별 그래픽 */
.pg-autodisc { background: var(--kha-sky-50); }                         /* 신청: 수료 이력 자동 할인 안내 = 정보(하늘) */
.pg-autodisc > [data-icon] { color: var(--kha-sky-700); }
.gp-session { border-color: var(--kha-yellow-300); background: var(--kha-yellow-50); }   /* 단체 신청: 고른 회차 = 노랑 50 */
.pg-toc__n { color: var(--kha-green-700); }                             /* 교육 안내: 목차 번호 */
.pg-span__track::before { background: var(--kha-green-600); }           /* 교육 안내: 교육 인정 기간 선 */
.pg-span__dot { border-color: var(--kha-green-600); }
.pg-pass__bar > span { background: var(--kha-green-600); }              /* 교육 안내: 수료 요건 막대 */
.mp-menu__link[aria-current="page"] { background: var(--kha-green-50); color: var(--kha-green-700); box-shadow: inset 3px 0 0 var(--kha-green-600); }
.mp-menu__link[aria-current="page"] > [data-icon] { color: var(--kha-green-700); }
.mp-span__bar--next { background: var(--kha-green-100); color: var(--kha-green-800); }   /* 마이페이지: 수료하면 이어지는 기한(초록 100 위 초록 800 7.75:1) */
.mp-span__join { background: var(--kha-green-700); }
.mp-span__joinlabel { color: var(--kha-green-700); }
.switch > input:checked + .mp-state { color: var(--kha-green-700); }
.kha-app .mp-lock > input, .kha-app .mp-lock > input:checked { background: var(--kha-green-300); }   /* 끌 수 없는 알림(고정) = 옅은 초록 */