/* ==========================================================================
   edu-fusion.css — 사용자 사이트 융합 규칙(03_ui_fusion §4-3). 디자인 시스템 부품 이름을 다시 정의하지 않고 새 클래스(edu-*·
   §4-3 표의 next-card·quick-menu·side-menu·session-table·card-list·apply-summary·sticky-cta·deadline-bar·verify-result)만.
   색은 토큰 변수만(직접 #hex 금지). 주색은 버튼·링크(디자인 시스템 기본)에만. 바탕 흰색.
   반응형: 컨테이너 쿼리(@container kha)를 못 읽는 브라우저를 위해 같은 규칙을 @media로도 둔다(1023px·767px).
   인라인 style 없음(CSP) — 진행 막대 폭은 .edu-w-0~100 클래스.
   ========================================================================== */

/* ---------- 0. 틀 ---------- */
.edu-main { padding-bottom: var(--kha-sp-64); scroll-padding-top: calc(var(--kha-header-h) + 16px); }
.edu-main:focus, .edu-home:focus { outline: none; }
.edu-home:target:focus-visible #hero-title { outline: 2px solid currentColor; outline-offset: 4px; }
.edu-page { padding-top: var(--kha-sp-32); }
.edu-split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--kha-sp-32); align-items: start; }
.edu-body { min-width: 0; }
.edu-popup { max-width: 640px; padding-block: var(--kha-sp-32); }
.edu-narrow { max-width: 480px; margin-inline: auto; }
.edu-inline-form { display: inline; margin: 0; }
.edu-link-button { border: 0; background: transparent; cursor: pointer; font: inherit; padding: 0; }
.edu-plain { list-style: none; margin: 0; padding: 0; }
.edu-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.edu-sub { display: block; font-size: var(--kha-fs-14); font-weight: var(--kha-fw-regular); color: var(--kha-text-secondary); }
.edu-left-days { margin-left: 8px; font-size: var(--kha-fs-15); color: var(--kha-text-secondary); white-space: nowrap; }
.edu-note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; border-radius: var(--kha-radius-md); }
.edu-go { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--kha-fw-semibold); color: var(--kha-link); text-decoration: none; white-space: nowrap; --icon-size: 18px; }
.edu-go:hover { text-decoration: underline; }
.edu-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kha-sp-16); flex-wrap: wrap; margin-bottom: var(--kha-sp-16); }
.edu-sechead h2 { font-size: var(--kha-fs-28); }
.edu-grid { gap: var(--kha-sp-24); }
.edu-cards3 { --grid-cols: 3; list-style: none; padding: 0; }
.section--tight { margin-top: var(--kha-sp-40); }
.env-label { font-size: var(--kha-fs-13); color: var(--kha-text-secondary); }

/* ---------- 1. 머리말: 전체 메뉴 패널(1023px 이하) ---------- */
.edu-allmenu {
  --nav-ink: #273562; --nav-tint: #edf1fa; --nav-active: #dfe7f6;
  max-height: calc(100dvh - 106px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-top: 1px solid var(--kha-border);
  box-shadow: 0 8px 18px rgb(16 30 52 / 9%);
}
html:not([data-variant="b"]) .edu-allmenu { --nav-ink: #174b51; --nav-tint: #eaf3f2; --nav-active: #d6eae7; }
.edu-allmenu__panel { max-width: 700px; padding-block: 12px 16px; }
.edu-allmenu__groups {
  overflow: hidden; border: 1px solid #dce3ea; border-radius: 12px;
}
.edu-allmenu__group + .edu-allmenu__group { border-top: 1px solid #d2dbe3; }
.edu-allmenu__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 10px 15px;
  background: var(--nav-tint); color: var(--nav-ink); font-weight: var(--kha-fw-bold);
  cursor: pointer; list-style: none;
}
.edu-allmenu__group > summary::-webkit-details-marker { display: none; }
.edu-allmenu__group > summary::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-inline-end: 3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.edu-allmenu__group[open] > summary { background: var(--nav-active); }
.edu-allmenu__group[open] > summary::after { transform: rotate(225deg); }
.edu-allmenu ul { list-style: none; margin: 0; padding: 0 14px; }
.edu-allmenu li + li { border-top: 1px solid #e1e6ec; }
.edu-allmenu li > a {
  display: flex; align-items: center; min-height: 44px; padding: 7px 12px;
  color: var(--kha-text); text-decoration: none; overflow-wrap: anywhere;
}
.edu-allmenu li > a[aria-current="page"] { color: var(--nav-ink); font-weight: var(--kha-fw-bold); }
.edu-allmenu li > a[aria-current="page"]::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px; margin-inline-end: 7px; background: currentColor;
}
@media (hover: hover) {
  .edu-allmenu li > a:hover, .edu-allmenu__group > summary:hover { background: var(--nav-active); color: var(--nav-ink); }
}
.edu-allmenu :is(summary, a, button):focus-visible {
  outline: none; background: var(--nav-active); color: var(--nav-ink);
  text-decoration: underline 2px; text-underline-offset: 4px; box-shadow: inset 3px 0 var(--nav-ink);
}
@media (forced-colors: active) {
  .edu-allmenu :is(summary, a, button):focus-visible { outline: 2px solid Highlight; outline-offset: -3px; }
}
.edu-allmenu__util { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.edu-allmenu__util :is(a, button) {
  display: inline-flex; justify-content: center; align-items: center; min-height: 44px;
  padding: 6px 16px; border: 1px solid #c9d3da; border-radius: 8px; background: #fff;
  color: var(--nav-ink); font: inherit; font-weight: var(--kha-fw-semibold); text-decoration: none; cursor: pointer;
}
.site-header .menu-btn[aria-expanded="false"] .menu-btn__close,
.site-header .menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.site-header .menu-btn > span { display: inline-flex; }

/* ---------- 2. 왼쪽 메뉴(.side-menu — B안 모양: 흰 카드, 현재 항목 Stratos 바탕 + 흰 글자) ---------- */
.side-menu { position: sticky; top: calc(var(--kha-header-h) + 16px); padding: var(--kha-sp-16); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); background: var(--kha-white); }
.side-menu__title { padding: 4px 12px 12px; font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); border-bottom: 1px solid var(--kha-border); margin-bottom: 8px; }
.side-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-menu__item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--kha-radius-md); color: var(--kha-text); text-decoration: none; --icon-size: 18px; }
.side-menu__item:hover { background: var(--kha-surface-muted); color: var(--kha-text-strong); }
.side-menu__item[aria-current="page"] { background: var(--kha-navy-900); color: var(--kha-white); font-weight: var(--kha-fw-semibold); }

/* ---------- 3. 메인 히어로(흰 바탕 + 일러스트 ①) ---------- */
.edu-hero { background: var(--kha-white); border-bottom: 1px solid var(--kha-gray-200); }
.edu-hero__body { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--kha-sp-24); align-items: center; padding-block: var(--kha-sp-32) var(--kha-sp-32); } /* 글자가 줄어 위아래 여백 축소(2026-11-09) */
.edu-hero__chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; max-width: 100%; font-size: var(--kha-fs-16); color: var(--kha-text); }
.edu-hero__chip > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.edu-hero__title { margin-top: 0; font-size: var(--kha-fs-48); font-weight: var(--kha-fw-bold); line-height: 1.24; letter-spacing: -0.03em; color: var(--kha-text-heading); }
.edu-hero__title em { font-style: normal; background: linear-gradient(transparent 60%, var(--kha-yellow-100) 60%, var(--kha-yellow-100) 92%, transparent 92%); }
.edu-hero__lead { margin: 20px 0 var(--kha-sp-32); max-width: 30em; font-size: var(--kha-fs-19); line-height: 1.65; color: var(--kha-text-secondary); }
.edu-hero__art img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.edu-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: var(--kha-sp-32) 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--kha-border); font-size: var(--kha-fs-15); color: var(--kha-text-secondary); }
.edu-trust li { display: inline-flex; align-items: center; gap: 6px; --icon-size: 18px; }
.edu-trust b { color: var(--kha-text-heading); }

/* ---------- 4. 다음 교육 카드(.next-card — 3열, 1023px 이하 1열) ---------- */
.next-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(200px, auto); gap: var(--kha-sp-24); align-items: center; margin-block: var(--kha-sp-32); }
.next-card > .ci-bar { display: none; } /* 박스 앞·위 컬러 띠 쓰지 않음(사용자 지시 2026-11-07) */
.next-card__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--kha-fs-15); font-weight: var(--kha-fw-bold); color: var(--kha-green-700); }
.next-card__title { margin-top: 6px; font-size: var(--kha-fs-22); line-height: 1.3; }
.next-card__cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.next-card__cta .edu-go { align-self: center; }
.next-card--closed { grid-template-columns: minmax(0, 1fr) auto; }
.edu-viewhead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, auto); margin-top: 0; }

/* ---------- 5. 빠른 메뉴 6칸(B안, 767px 이하 휴대폰은 4칸 — .edu-hide-sm) ---------- */
/* 히어로(흰 바탕) 아래 띠 — 옅은 회색 바탕 위에 흰 카드(사용자 지시 2026-11-07) */
.edu-band { background: var(--kha-surface-subtle); border-bottom: 1px solid var(--kha-gray-200); padding-block: var(--kha-sp-56) var(--kha-sp-64); }
.edu-band .next-card { margin-block: 0 var(--kha-sp-56); }
.edu-quick { padding: 0; }
.edu-band .next-card { background: var(--kha-white); box-shadow: var(--kha-shadow-sm); }
.edu-quick__title { margin: 0 0 20px; font-size: var(--kha-fs-19); font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }

/* 빠른 메뉴(.quick-menu) 규칙은 §22 ②로 옮김(2026-11-09 — 6칸 한 줄, 제목 → 아이콘·설명) */
/* ---------- 6. 4단계·카드 ---------- */
.edu-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kha-sp-16); list-style: none; margin: 0; padding: 0; }
.edu-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edu-steps__num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kha-yellow-400); color: var(--kha-navy-900); font-weight: var(--kha-fw-bold); margin-bottom: 8px; }
.edu-notice-list .list__item a { color: var(--kha-text); text-decoration: none; }
.edu-notice-list .list__item a:hover { text-decoration: underline; }
.edu-subscribe { margin-bottom: var(--kha-sp-32); }
.edu-empty { margin-block: var(--kha-sp-24); }

/* 수료증 안내: 운영 출력 서식으로 만든 견본과 원본 크기 PDF. */
.edu-cert-samples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.4vw,32px); }
.edu-cert-sample { display: flex; flex-direction: column; min-width: 0; }
.edu-cert-sample h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.edu-cert-sample h2 span { color: var(--kha-text-secondary); font-size: 14px; font-weight: 500; }
.edu-cert-sample > p { margin: 8px 0 16px; color: var(--kha-text-secondary); }
.edu-cert-sample__link { display: flex; flex: 1; flex-direction: column; border: 1px solid #c9d6df; border-radius: 8px; color: var(--kha-text-heading); text-decoration: none; }
.edu-cert-sample__stage { display: grid; flex: 1; place-items: center; align-content: center; gap: 15px; min-height: 360px; padding: 20px; border-radius: 7px 7px 0 0; background: #edf2f5; }
.edu-cert-sample__stage img { display: block; max-width: 100%; height: auto; background: white; box-shadow: 0 3px 12px rgba(21,42,59,.15); }
.edu-cert-sample__sheet { width: 264px; }
.edu-cert-sample__face { display: grid; width: 246px; max-width: 100%; gap: 4px; color: #415868; font-size: 13px; font-weight: 600; }
.edu-cert-sample__face img { width: 100%; }
.edu-cert-sample__action { display: flex; gap: 8px; align-items: center; min-height: 48px; padding: 10px 16px; border-top: 1px solid #c9d6df; font-weight: 600; --icon-size: 17px; }
.edu-cert-sample__action small { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--kha-text-secondary); }
.edu-cert-sample__link:is(:hover,:focus-visible) .edu-cert-sample__action { color: var(--kha-link); text-decoration: underline; text-underline-offset: 3px; }
.edu-cert-sample__link:focus-visible { outline: 3px solid var(--kha-primary); outline-offset: 3px; }
@media (max-width: 767px) {
  .edu-cert-samples { grid-template-columns: 1fr; gap: 26px; }
  .edu-cert-sample__stage { min-height: 0; padding: 16px; }
}

/* ---------- 7. 일정 목록: 탭·필터·표 + 접힘 상세(.session-table .detail) ---------- */
.edu-tabsrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--kha-sp-16); }
.edu-filter { display: grid; gap: var(--kha-sp-16); margin-bottom: var(--kha-sp-24); }
.edu-filter fieldset { border: 0; margin: 0; padding: 0; }
.edu-filter__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kha-sp-16) var(--kha-sp-24); }
.edu-filter__count { margin: 0 0 0 auto; }
.chip.is-selected { border-color: var(--kha-green-600); }
.chip:has(input:focus-visible) { box-shadow: var(--kha-focus-ring); }
.session-table .detail > td { background: var(--kha-surface-subtle); }
/* 펼친 행 왼쪽 컬러 띠 쓰지 않음(사용자 지시 2026-11-07) */
.session-table .progress { display: block; margin-top: 4px; }
.edu-toggle [data-icon] { transition: transform var(--kha-dur-fast); }
.edu-toggle[aria-expanded="true"] [data-icon] { transform: rotate(180deg); }
.edu-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: var(--kha-sp-24); padding: var(--kha-sp-16) 0; }
.edu-seatbox { display: flex; flex-direction: column; gap: 10px; }
.edu-legend { margin-top: var(--kha-sp-40); }
.edu-legend__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.edu-legend__list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; }
.edu-legend__description { font-family: var(--kha-font-sans); font-size: var(--kha-fs-15); font-weight: 400; line-height: 1.6; color: var(--kha-text-secondary); }
.edu-cal__date { display: inline-block; min-width: 9em; font-weight: var(--kha-fw-semibold); }

/* ---------- 8. 신청 단계(2열: 본문 7 : 요약 5, 요약 카드 sticky) ---------- */
.edu-stepper { margin-bottom: var(--kha-sp-24); }
.edu-stepper-mini { display: none; margin-bottom: var(--kha-sp-16); }
.edu-steps5 { --stepper-steps: 5; }
.edu-steps4 { --stepper-steps: 4; }
.edu-apply { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--kha-sp-32); align-items: start; }
.apply-summary { position: sticky; top: calc(var(--kha-header-h) + 16px); display: flex; flex-direction: column; gap: 12px; }
.edu-amount { display: grid; gap: 8px; margin: 0; }
.edu-amount > div { display: flex; justify-content: space-between; gap: 16px; }
.edu-amount dd { margin: 0; font-variant-numeric: tabular-nums; }
.edu-amount__total { padding-top: 8px; border-top: 1px solid var(--kha-border); font-weight: var(--kha-fw-bold); font-size: var(--kha-fs-19); color: var(--kha-text-heading); }
.edu-hold { display: flex; gap: 6px; align-items: center; color: var(--kha-text); --icon-size: 16px; }
.edu-paymethods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; margin: 0; padding: 0; }
.check.is-invalid { outline: 2px solid var(--kha-danger); outline-offset: 4px; border-radius: var(--kha-radius-sm); }
.sticky-cta { display: none; }
.edu-only-sm { display: none; }

/* ---------- 9. 마이페이지: 기한 카드·기한 막대·신청 카드 ---------- */
.deadline-card { display: grid; gap: 8px; margin-bottom: var(--kha-sp-24); }
.deadline-card__dday { font-size: var(--kha-fs-40); font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); line-height: 1.1; }
.deadline-bar { position: relative; height: 12px; border-radius: 6px; background: var(--kha-green-100); overflow: hidden; }
.deadline-bar__used { display: block; height: 100%; background: var(--kha-green-600); border-radius: 6px; }
.apply-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.edu-hist summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--kha-link); }
.edu-photo { display: flex; gap: var(--kha-sp-24); align-items: flex-start; flex-wrap: wrap; }
.edu-photo__thumb { width: 90px; height: 120px; object-fit: cover; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-sm); }
.edu-photo__thumb--empty { display: grid; place-items: center; background: var(--kha-surface-subtle); color: var(--kha-text-tertiary); --icon-size: 32px; }

/* ---------- 10. 발급번호 조회 결과 카드 4종 ---------- */
.edu-verify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kha-sp-24); align-items: start; }
.verify-result { border-left-width: 1px; } /* 왼쪽 컬러 띠 쓰지 않음 — 결과는 배지(글자)로 구분(사용자 지시 2026-11-07) */
.verify-result__badge { display: inline-block; padding: 2px 12px; border-radius: var(--kha-radius-pill); font-weight: var(--kha-fw-bold); margin-bottom: 8px; }
.verify-result--valid .verify-result__badge { background: var(--kha-success-bg-strong); color: var(--kha-success-text); }
.verify-result--expired .verify-result__badge { background: var(--kha-yellow-300); color: var(--kha-navy-900); }
.verify-result--none .verify-result__badge { background: var(--kha-neutral-bg); color: var(--kha-neutral-text); }
.verify-result--revoked .verify-result__badge { background: var(--kha-danger-bg-strong); color: var(--kha-danger-text); }

/* ---------- 11. 게시판·문서 ---------- */
.kha-app table thead :is(th, td), .kha-app table th:is([scope="col"], [scope="colgroup"]) { text-align: center; }
.kha-app .table td.edu-empty-cell {
  height: calc(3 * var(--kha-table-row-h, 56px)); text-align: center; vertical-align: middle;
}
@media (max-width: 767px) {
  .kha-app .card-list td.edu-empty-cell { display: grid; place-items: center; }
}
.edu-body > .edu-notice-list { min-height: 600px; display: flex; flex-direction: column; }
.edu-notice-list .edu-searchbar { width: 100%; max-width: none; flex-wrap: nowrap; }
.edu-notice-list .edu-searchbar .input { min-width: 0; }
.edu-notice-list__count { margin: 0 0 10px; font: 500 var(--kha-fs-15)/1.5 var(--kha-font-sans); color: var(--kha-text-secondary); }
.edu-notice-list__count strong { color: var(--kha-text-heading); font-variant-numeric: tabular-nums; }
.edu-notice-list .edu-notice-list__link { color: var(--kha-text-heading); font-weight: 600; text-decoration: none; }
.edu-notice-list .edu-notice-list__link:is(:hover, :focus-visible) { color: var(--kha-primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.edu-notice-list .pagination { margin-top: auto; padding-top: var(--kha-sp-24); }
.edu-notice-detail__heading { display: flex; align-items: baseline; gap: 10px; width: 100%; }
.edu-notice-detail__heading .tag { flex: none; }
.edu-notice-detail .edu-post__body { min-height: 600px; box-sizing: border-box; }
.edu-searchbar { display: flex; gap: 8px; margin-bottom: var(--kha-sp-16); max-width: 560px; }
.edu-searchbar .input { flex: 1; }
/* 게시판 상세 표준(공지·문의·증명서 신청 상세 — 사용자 지시 2026-11-07):
   위 굵은 선 → 작은 분류 태그 → 큰 제목 → 메타 줄 + 구분선 → 넉넉한 본문 → 첨부 → 이전/다음 글 표 → 가운데 목록 버튼 */
.edu-post { border-top: 2px solid var(--kha-gray-800); }
.edu-post__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--kha-sp-32) 0 var(--kha-sp-24); border-bottom: 1px solid var(--kha-border); }
.card > .edu-post__head { padding-top: 0; margin-bottom: var(--kha-sp-16); }
.edu-post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.edu-post__title { margin: 0; font-size: var(--kha-fs-28); line-height: 1.35; letter-spacing: -0.02em; color: var(--kha-text-heading); overflow-wrap: anywhere; }
.edu-post__title--sm { font-size: var(--kha-fs-22); }
.edu-post__meta { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; font-size: var(--kha-fs-15); color: var(--kha-text-secondary); }
.edu-post__meta li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 14px; background: var(--kha-gray-300); vertical-align: middle; }
.edu-post__metak { color: var(--kha-text-tertiary, var(--kha-gray-500)); margin-right: 4px; }
.edu-post__body { padding: var(--kha-sp-40) 0 var(--kha-sp-48); min-height: 160px; font-size: var(--kha-fs-17); line-height: 1.8; }
.edu-post__files { margin-bottom: var(--kha-sp-32); padding: var(--kha-sp-16) var(--kha-sp-24); border-radius: var(--kha-radius-md); background: var(--kha-surface-subtle); }
.edu-post__fileh { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--kha-fs-15); color: var(--kha-text-heading); --icon-size: 16px; }
.edu-post__files li { padding: 4px 0; }
.edu-post__files a { display: inline-flex; align-items: center; gap: 6px; --icon-size: 16px; }
.edu-post__actions { display: flex; justify-content: center; gap: 8px; margin-top: var(--kha-sp-40); }
.edu-prevnext { width: 100%; border-collapse: collapse; border-top: 1px solid var(--kha-gray-800); border-bottom: 1px solid var(--kha-border); }
.edu-prevnext th, .edu-prevnext td { padding: 16px 12px; border-bottom: 1px solid var(--kha-border); text-align: left; vertical-align: middle; }
.edu-prevnext th { width: 120px; font-weight: var(--kha-fw-semibold); color: var(--kha-text-secondary); white-space: nowrap; --icon-size: 16px; }
.edu-prevnext th [data-icon] { margin-right: 6px; vertical-align: -2px; }
.edu-prevnext td a { color: var(--kha-text-strong); text-decoration: none; }
.edu-prevnext td a:hover { text-decoration: underline; }
.edu-prevnext__date { width: 140px; text-align: right !important; color: var(--kha-text-secondary); font-size: var(--kha-fs-15); white-space: nowrap; font-variant-numeric: tabular-nums; }
.edu-answer { margin-top: var(--kha-sp-24); padding: var(--kha-sp-24) var(--kha-sp-32); border-radius: var(--kha-radius-lg); background: var(--kha-surface-subtle); }
.edu-answer__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: var(--kha-fs-19); color: var(--kha-text-heading); }
.edu-answer--wait { display: flex; align-items: center; gap: 8px; color: var(--kha-text-secondary); --icon-size: 18px; }
.edu-card-pad { padding: var(--kha-sp-32); }
@media (max-width: 767px) {
  .edu-post__title { font-size: var(--kha-fs-22); }
  .edu-post__body { padding: var(--kha-sp-24) 0 var(--kha-sp-32); }
  .edu-prevnext th { width: 88px; padding-inline: 8px; }
  .edu-prevnext__date { display: none; }
  .edu-answer, .edu-card-pad { padding: var(--kha-sp-24) var(--kha-sp-16); }
}
.edu-versions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: var(--kha-sp-16); }
.edu-versions ul { list-style: none; margin: 0; padding: 0; }
.edu-receipt .dl dd { font-variant-numeric: tabular-nums; }

/* ---------- 12. 토스트 동작 버튼 ---------- */
.toast__action { margin-left: 12px; min-height: 36px; padding: 4px 12px; border: 1px solid currentColor; border-radius: var(--kha-radius-sm); background: transparent; color: inherit; font: inherit; font-weight: var(--kha-fw-semibold); cursor: pointer; }

/* ---------- 13. 진행 막대 폭(인라인 style 대신, 서버 계산 % → 클래스) ---------- */
.edu-w-0 { width: 0; } .edu-w-1 { width: 1%; } .edu-w-2 { width: 2%; } .edu-w-3 { width: 3%; } .edu-w-4 { width: 4%; } .edu-w-5 { width: 5%; }
.edu-w-6 { width: 6%; } .edu-w-7 { width: 7%; } .edu-w-8 { width: 8%; } .edu-w-9 { width: 9%; } .edu-w-10 { width: 10%; } .edu-w-11 { width: 11%; }
.edu-w-12 { width: 12%; } .edu-w-13 { width: 13%; } .edu-w-14 { width: 14%; } .edu-w-15 { width: 15%; } .edu-w-16 { width: 16%; } .edu-w-17 { width: 17%; }
.edu-w-18 { width: 18%; } .edu-w-19 { width: 19%; } .edu-w-20 { width: 20%; } .edu-w-21 { width: 21%; } .edu-w-22 { width: 22%; } .edu-w-23 { width: 23%; }
.edu-w-24 { width: 24%; } .edu-w-25 { width: 25%; } .edu-w-26 { width: 26%; } .edu-w-27 { width: 27%; } .edu-w-28 { width: 28%; } .edu-w-29 { width: 29%; }
.edu-w-30 { width: 30%; } .edu-w-31 { width: 31%; } .edu-w-32 { width: 32%; } .edu-w-33 { width: 33%; } .edu-w-34 { width: 34%; } .edu-w-35 { width: 35%; }
.edu-w-36 { width: 36%; } .edu-w-37 { width: 37%; } .edu-w-38 { width: 38%; } .edu-w-39 { width: 39%; } .edu-w-40 { width: 40%; } .edu-w-41 { width: 41%; }
.edu-w-42 { width: 42%; } .edu-w-43 { width: 43%; } .edu-w-44 { width: 44%; } .edu-w-45 { width: 45%; } .edu-w-46 { width: 46%; } .edu-w-47 { width: 47%; }
.edu-w-48 { width: 48%; } .edu-w-49 { width: 49%; } .edu-w-50 { width: 50%; } .edu-w-51 { width: 51%; } .edu-w-52 { width: 52%; } .edu-w-53 { width: 53%; }
.edu-w-54 { width: 54%; } .edu-w-55 { width: 55%; } .edu-w-56 { width: 56%; } .edu-w-57 { width: 57%; } .edu-w-58 { width: 58%; } .edu-w-59 { width: 59%; }
.edu-w-60 { width: 60%; } .edu-w-61 { width: 61%; } .edu-w-62 { width: 62%; } .edu-w-63 { width: 63%; } .edu-w-64 { width: 64%; } .edu-w-65 { width: 65%; }
.edu-w-66 { width: 66%; } .edu-w-67 { width: 67%; } .edu-w-68 { width: 68%; } .edu-w-69 { width: 69%; } .edu-w-70 { width: 70%; } .edu-w-71 { width: 71%; }
.edu-w-72 { width: 72%; } .edu-w-73 { width: 73%; } .edu-w-74 { width: 74%; } .edu-w-75 { width: 75%; } .edu-w-76 { width: 76%; } .edu-w-77 { width: 77%; }
.edu-w-78 { width: 78%; } .edu-w-79 { width: 79%; } .edu-w-80 { width: 80%; } .edu-w-81 { width: 81%; } .edu-w-82 { width: 82%; } .edu-w-83 { width: 83%; }
.edu-w-84 { width: 84%; } .edu-w-85 { width: 85%; } .edu-w-86 { width: 86%; } .edu-w-87 { width: 87%; } .edu-w-88 { width: 88%; } .edu-w-89 { width: 89%; }
.edu-w-90 { width: 90%; } .edu-w-91 { width: 91%; } .edu-w-92 { width: 92%; } .edu-w-93 { width: 93%; } .edu-w-94 { width: 94%; } .edu-w-95 { width: 95%; }
.edu-w-96 { width: 96%; } .edu-w-97 { width: 97%; } .edu-w-98 { width: 98%; } .edu-w-99 { width: 99%; } .edu-w-100 { width: 100%; }

/* ---------- 14. 반응형 1023px 이하: 1열, 왼쪽 메뉴 → 가로 칩, 일러스트 축소, GNB → 메뉴 버튼(디자인 시스템) ---------- */
@media (max-width: 1023px) {
  .has-edu-menu .edu-split > .side-menu { display: none; }
  .edu-split, .edu-apply, .edu-verify, .edu-detail { grid-template-columns: minmax(0, 1fr); }
  .side-menu { position: static; padding: 8px; overflow-x: auto; }
  .side-menu__title { display: none; }
  .side-menu ul { display: flex; gap: 8px; }
  .side-menu__item { white-space: nowrap; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-pill); }
  .edu-hero__body { grid-template-columns: minmax(0, 1fr); }
  .edu-hero__art img { max-height: 160px; width: auto; margin-inline: auto; }
  .next-card, .edu-viewhead, .next-card--closed { grid-template-columns: minmax(0, 1fr); }
  .edu-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-cards3 { --grid-cols: 1; }
  .apply-summary { position: static; }
}
@container kha (max-width: 1023px) {
  .edu-split, .edu-apply, .edu-verify, .edu-detail { grid-template-columns: minmax(0, 1fr); }
  .next-card, .edu-viewhead, .next-card--closed { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 15. 휴대폰 767px 이하: 표 → 카드(.card-list, th·td의 data-label), 단계 표시 mini, 결제 버튼 아래 고정 ---------- */
@media (max-width: 767px) {
  .edu-hero__art, .edu-hide-sm { display: none; }
  .edu-hero__title { font-size: var(--kha-fs-32); }
  .edu-steps, .edu-steps--3, .grid--2, .edu-paymethods { grid-template-columns: minmax(0, 1fr); }
  .edu-stepper { display: none; }
  .edu-stepper-mini { display: flex; }
  .edu-only-sm { display: block; }
  .sticky-cta { position: sticky; bottom: 0; z-index: 5; display: block; min-height: 64px; padding: 8px 0; background: var(--kha-white); border-top: 1px solid var(--kha-border); }
  .edu-main { scroll-padding-bottom: 80px; }
  .card-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .card-list, .card-list tbody, .card-list tr, .card-list td, .card-list th { display: block; width: 100%; }
  .card-list tr { margin-bottom: 12px; padding: 12px 16px; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-md); background: var(--kha-white); }
  .card-list td, .card-list th { padding: 4px 0; border: 0; text-align: left; }
  .card-list td[data-label]:not([data-label=""])::before, .card-list th[data-label]::before { content: attr(data-label); display: block; font-size: var(--kha-fs-13); font-weight: var(--kha-fw-regular); color: var(--kha-text-secondary); }
  .session-table tr.detail { margin-top: -12px; }
  .edu-filter__count { margin-left: 0; }
  .edu-searchbar { flex-wrap: wrap; }
}
@container kha (max-width: 767px) {
  .edu-stepper { display: none; }
  .edu-stepper-mini { display: flex; }
}

/* ---------- 16. 인쇄(영수증 미리보기만 — 03_ui_fusion §6) ---------- */
@media print {
  .edu-noprint, .masthead, .site-header, .site-footer, .mock-label, .toast-region { display: none !important; }
  .edu-receipt { border: 0; box-shadow: none; }
}

/* ---------- 색 줄이기(사용자 지시 2026-11-07: "컬러가 너무 많다") ----------
   - 빠른 메뉴 아이콘 바탕은 한 가지(옅은 회색 + 남색 아이콘)
   - 회차 상태 태그는 행동이 필요한 두 가지(접수중·마감 임박)만 색, 나머지는 회색 — 아이콘+글자로 구분(색만으로 구분하지 않음, ACC)
   - 펼친 회차 행은 노란 강조 대신 옅은 회색 */
.theme-edu .tag--upcoming, .theme-edu .tag--waitlist, .theme-edu .tag--closed, .theme-edu .tag--done, .theme-edu .tag--rejected,
.tag--upcoming, .tag--waitlist, .tag--closed, .tag--done, .tag--rejected { background: var(--kha-gray-100); color: var(--kha-gray-700); }
.theme-edu .tag--closing, .tag--closing { background: var(--kha-orange-50); color: var(--kha-orange-800); box-shadow: inset 0 0 0 1px var(--kha-orange-200); }
.session-table tr:has(+ .detail.is-open) > td, .session-table tr.is-open > td { background: var(--kha-surface-subtle); }
/* 일정 목록 표와 '새 교육 일정 알림 받기' 사이 여백 */
.edu-subscribe, .edu-legend { margin-top: var(--kha-sp-40); }
/* ---------- 17. 일정 보기 전환(목록 | 달력 — 현재 보기 하나만 남색 채움) ---------- */
.edu-viewswitch { display: inline-flex; margin-left: auto; border: 1px solid var(--kha-gray-300); border-radius: var(--kha-radius-md); overflow: hidden; background: var(--kha-white); }
.edu-viewswitch__item { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 20px; color: var(--kha-text); font-weight: var(--kha-fw-semibold); text-decoration: none; --icon-size: 18px; }
.edu-viewswitch__item + .edu-viewswitch__item { border-left: 1px solid var(--kha-gray-300); }
.edu-viewswitch__item:hover { background: var(--kha-surface-subtle); color: var(--kha-text-strong); }
.edu-viewswitch__item[aria-current="page"] { background: var(--kha-navy-800); color: var(--kha-white); }
.edu-viewswitch__item:focus-visible { outline: 3px solid var(--kha-blue-500); outline-offset: -3px; }

/* ---------- 18. 월 달력(서버가 만든 7열 격자, 날짜 칸에 회차 이름 + 상태 태그) ---------- */
.edu-cal { margin-top: var(--kha-sp-8); }
.edu-cal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: var(--kha-sp-16); }
.edu-cal__title { margin: 0; min-width: 7.5em; text-align: center; font-size: var(--kha-fs-28); color: var(--kha-text-heading); }
.edu-cal__nav { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--kha-gray-300); border-radius: var(--kha-radius-md); background: var(--kha-white); color: var(--kha-text); font-weight: var(--kha-fw-semibold); text-decoration: none; --icon-size: 18px; }
.edu-cal__nav:hover { background: var(--kha-surface-subtle); }
.edu-cal__meta { margin: 0 0 0 auto; color: var(--kha-text-secondary); }
.edu-cal__meta strong { color: var(--kha-text-heading); }
.edu-cal__grid { border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); overflow: hidden; background: var(--kha-white); }
.edu-cal__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.edu-cal__table thead th { padding: 12px 8px; background: var(--kha-surface-subtle); border-bottom: 1px solid var(--kha-border); font-size: var(--kha-fs-15); font-weight: var(--kha-fw-semibold); color: var(--kha-text-secondary); text-align: center; }
.edu-cal__table thead th:first-child { color: var(--kha-red-700); }
.edu-cal__table thead th:last-child { color: var(--kha-blue-700); }
.edu-cal__cell { height: 128px; padding: 10px; vertical-align: top; border-right: 1px solid var(--kha-border); border-bottom: 1px solid var(--kha-border); }
.edu-cal__cell:last-child { border-right: 0; }
.edu-cal__table tbody tr:last-child .edu-cal__cell { border-bottom: 0; }
.edu-cal__cell.is-out { background: var(--kha-surface-subtle); }
.edu-cal__cell.is-out .edu-cal__day { color: var(--kha-gray-400); }
.edu-cal__day { display: flex; align-items: center; gap: 6px; font-weight: var(--kha-fw-semibold); color: var(--kha-text); font-variant-numeric: tabular-nums; }
.edu-cal__cell.is-sun .edu-cal__day { color: var(--kha-red-700); }
.edu-cal__cell.is-sat .edu-cal__day { color: var(--kha-blue-700); }
.edu-cal__cell.is-today .edu-cal__day > span[aria-hidden] { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--kha-navy-800); color: var(--kha-white); }
.edu-cal__todaytag { font-size: var(--kha-fs-13); font-weight: var(--kha-fw-semibold); color: var(--kha-navy-800); }
.edu-cal__events { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.edu-cal__event { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-sm); background: var(--kha-white); color: var(--kha-text-strong); text-decoration: none; font-size: var(--kha-fs-14); line-height: 1.35; }
.edu-cal__event:hover { border-color: var(--kha-gray-400); }
.edu-cal__event:hover .edu-cal__name { text-decoration: underline; }
.edu-cal__event .tag { justify-self: start; font-size: var(--kha-fs-13); }
.edu-cal__name { font-weight: var(--kha-fw-semibold); overflow-wrap: anywhere; }
.edu-cal__mobile { display: none; }
.edu-cal__mnote { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--kha-radius-md); background: var(--kha-surface-subtle); color: var(--kha-text-secondary); --icon-size: 18px; }
.edu-cal__list .list__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
@media (max-width: 767px) {
  .edu-cal__grid { display: none; }
  .edu-cal__mobile { display: block; }
  .edu-cal__title { font-size: var(--kha-fs-22); min-width: 0; }
  .edu-cal__meta { margin-left: 0; width: 100%; }
}

/* 색 줄이기 2(사용자 지시 2026-11-07: "여기도 너무 컬러풀", "파란 하단 보더가 너무 진함")
   - 4단계: 초록 바탕 → 옅은 회색, 노란 번호 → 남색 테두리 원, 초록 머리글 → 회색
   - 카드 아이콘 타일은 한 가지(옅은 회색 + 남색 아이콘)
   - 알림 띠 아래 파란 선 → 옅은 회색 선 */
.edu-steps__num { background: var(--kha-white); color: var(--kha-navy-800); box-shadow: inset 0 0 0 2px var(--kha-navy-800); }
.edu-steps-sec .eyebrow, .edu-sechead .eyebrow { color: var(--kha-text-secondary); }
main .icon-tile:not(.quick-menu__item .icon-tile) { background: var(--kha-gray-100); color: var(--kha-navy-800); }
.notice-bar { border-bottom: 1px solid var(--kha-gray-200) !important; box-shadow: none; }
.notice-bar__entries { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.notice-bar__entries a, .notice-bar__text a { display: inline-block; padding: 3px 0; color: inherit; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere; }
.notice-bar__entries a:is(:hover,:focus-visible), .notice-bar__text a:is(:hover,:focus-visible), a.notice-bar__label:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: .21em; }
a.notice-bar__label { text-decoration: none; }
.notice-bar__controls { display: flex; flex: none; align-items: center; gap: 2px; }
.notice-bar__controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; --icon-size: 17px; }
.notice-bar__controls button:hover { background: rgba(0,70,110,.08); }
.notice-bar [hidden] { display: none; }
.notice-bar__count { margin-right: 3px; font-size: 13px; color: var(--kha-text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
  .site-header .menu-btn { width: 44px; height: 44px; padding: 0; justify-content: center; --icon-size: 22px; }
}
@media (max-width: 767px) {
  .notice-bar .notice-bar__inner { align-items: center; flex-wrap: nowrap; min-height: 44px; padding-block: 2px; }
  .notice-bar__label { white-space: nowrap; }
  .notice-bar__entries a, .notice-bar__text, .notice-bar__text a {
    display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .notice-bar__controls { gap: 0; }
  .notice-bar__controls button { width: 30px; min-height: 40px; }
  .notice-bar__count { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes edu-notice-in { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
  .notice-bar__entries li:not([hidden]) { animation: edu-notice-in .35s ease-out; }
}
/* ---------- 19. 교육장 안내(현행 사이트 방식: 지역 탭 → 정보 표 + 지도 — 사용자 지시 2026-11-07) ---------- */
.edu-venue__tabs { display: flex; border-bottom: 1px solid var(--kha-gray-300); margin-bottom: var(--kha-sp-32); }
.edu-venue__tab { flex: 0 1 160px; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 20px; margin-bottom: -1px; border: 1px solid transparent; border-bottom-color: var(--kha-gray-300); border-radius: var(--kha-radius-md) var(--kha-radius-md) 0 0; color: var(--kha-text-secondary); font-size: var(--kha-fs-17); font-weight: var(--kha-fw-semibold); text-decoration: none; }
.edu-venue__tab:hover { color: var(--kha-text-strong); background: var(--kha-surface-subtle); }
.edu-venue__tab[aria-selected="true"] { border-color: var(--kha-gray-300); border-bottom-color: var(--kha-white); background: var(--kha-white); color: var(--kha-navy-900); font-weight: var(--kha-fw-bold); }
.edu-venue__tab:focus-visible { outline: 3px solid var(--kha-blue-500); outline-offset: -3px; }
.edu-venue__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--kha-sp-40); align-items: start; }
.edu-venue__panel + .edu-venue__panel { margin-top: var(--kha-sp-56); padding-top: var(--kha-sp-40); border-top: 1px solid var(--kha-border); }
.edu-venue.is-js .edu-venue__panel + .edu-venue__panel { margin-top: 0; padding-top: 0; border-top: 0; }
.edu-venue__panel[hidden] { display: none; }
.edu-venue__panel:focus-visible { outline: 3px solid var(--kha-blue-500); outline-offset: 8px; border-radius: var(--kha-radius-sm); }
.edu-venue__region { margin: 0 0 6px; font-size: var(--kha-fs-15); font-weight: var(--kha-fw-semibold); color: var(--kha-text-secondary); }
.edu-venue__name { margin: 0 0 var(--kha-sp-24); font-size: var(--kha-fs-28); line-height: 1.3; color: var(--kha-text-heading); }
.edu-venue__table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--kha-gray-800); }
.edu-venue__table th, .edu-venue__table td { padding: 16px 8px; border-bottom: 1px solid var(--kha-border); text-align: left; vertical-align: top; line-height: 1.6; }
.edu-venue__table th { width: 84px; font-weight: var(--kha-fw-semibold); color: var(--kha-text-secondary); white-space: nowrap; }
.edu-venue__zip { color: var(--kha-text-secondary); font-variant-numeric: tabular-nums; }
.edu-venue__map { width: 100%; height: 420px; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); overflow: hidden; background: var(--kha-surface-subtle); }
.edu-venue__map--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: var(--kha-sp-24); text-align: center; color: var(--kha-text-secondary); --icon-size: 40px; }
.edu-venue__map--empty > [data-icon] { color: var(--kha-gray-400); }
.edu-venue__map--empty p { margin: 0; }
.edu-venue__btns, .edu-venue__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.edu-venue__btns .btn, .edu-venue__links .btn { --icon-size: 16px; gap: 6px; }
.edu-venue__links { justify-content: flex-end; margin: 12px 0 0; }
.edu-venue__label { padding: 6px 12px; border-radius: var(--kha-radius-pill); background: var(--kha-navy-800); color: var(--kha-white); font-size: var(--kha-fs-14); font-weight: var(--kha-fw-semibold); white-space: nowrap; box-shadow: var(--kha-shadow-sm); }
@media (max-width: 1023px) {
  .edu-venue__panel { grid-template-columns: minmax(0, 1fr); gap: var(--kha-sp-24); }
}
@media (max-width: 767px) {
  .edu-venue__tab { flex: 1 1 0; padding-inline: 8px; }
  .edu-venue__name { font-size: var(--kha-fs-22); }
  .edu-venue__map { height: 300px; }
  .edu-venue__table th { width: 64px; }
}
/* 휴대폰 숨김은 뒤에 정의한 display 규칙보다 우선 */
@media (max-width: 767px) { .edu-viewswitch.edu-hide-sm { display: none; } }

/* hidden 속성은 부품의 display 규칙(.alert{display:grid} 등)보다 우선 — '신청했습니다' 안내가 처음부터 보이던 문제 */
[hidden] { display: none !important; }

/* ---------- 20. 왼쪽 메뉴가 있는 하위 화면의 구역 리듬(사용자 지시 2026-11-07: 제목이 표에 붙고 구역 사이가 들쭉날쭉) ----------
   구역 사이 56px 한 가지, 구역 제목 22px + 아래 16px */
.edu-body > section.section--tight { margin-top: var(--kha-sp-56); padding-block: 0; }
.edu-body > section > h2.h3:first-child { margin: 0 0 var(--kha-sp-16); font-size: var(--kha-fs-22); }
.edu-body > section > h2.h3:first-child + p { margin-top: 0; }
.edu-ver { display: block; margin-top: 4px; font-size: var(--kha-fs-15); font-weight: var(--kha-fw-regular); color: var(--kha-text-secondary); }
.edu-steps + .edu-note { margin-top: var(--kha-sp-16); }
.card > .tag, .card > p > .tag:only-child { justify-self: start; align-self: flex-start; width: fit-content; }
/* 테두리 없는 묶음(기본 fieldset 테두리·legend가 선에 걸치는 모양 대신) */
.edu-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.edu-fieldset__legend { padding: 0; margin-bottom: 12px; font-size: var(--kha-fs-19); font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
.edu-fieldset__legend .text-secondary { font-size: var(--kha-fs-15); font-weight: var(--kha-fw-regular); }
.edu-grid--tight { gap: 12px; }
.edu-body fieldset:not([class]) { border: 0; margin: 0; padding: 0; min-width: 0; } .edu-body fieldset:not([class]) > legend { padding: 0; margin-bottom: 8px; }

/* 메인 히어로 그림 — 위아래로 천천히 살짝 움직임(사용자 지시 2026-11-07) */
/* → §22 ①로 옮김(2026-11-09: 움직임 줄이기 설정에서도 아주 작은 움직임 유지) */
/* 일정 목록 표 정리(사용자 지시 2026-11-07: "정보가 너무 많아 정신없다")
   - 표 제목(캡션)은 화면에서 숨김(탭이 이미 '예정된 교육'), 신청 현황은 'n / 정원명'만
   - 선택 행 = 옅은 회색 한 가지(주황 띠·노란 칸 없음), 펼친 상세 = 흰 바탕 + 왼쪽 들여쓰기로 목록과 구분
   - 행 위아래 여백 넓힘 */
.session-table tbody tr.session-row > * { padding-block: 22px; vertical-align: middle; }
.kha-app .session-table thead th { padding-block: 16px; text-align: center; }
.session-table .edu-applycnt { display: block; font-size: var(--kha-fs-16); color: var(--kha-text); }
.session-table .progress {
  height: 8px; margin-top: 8px; max-width: 180px; box-sizing: border-box;
  border: 1px solid #75849a; background: #f8fafd;
}
.session-table .progress__bar { background: #2856a1; }
.session-table .progress--neutral .progress__bar { background: #895019; }
.kha-app .session-table .session-row.is-selected .tag[data-session-state],
.kha-app .session-table .session-row:has(+ .detail.is-open) .tag[data-session-state] { border-color: currentColor; }
.kha-app .session-table tbody tr.is-selected > *, .session-table tbody tr.is-selected > *,
.session-table tbody tr.session-row:has(+ .detail.is-open) > * { background: #f1f6fd; }
.kha-app .session-table tbody tr.is-selected > :first-child, .session-table tbody tr.is-selected > :first-child { box-shadow: none; }
.session-table .detail > td, .session-table tr.detail.is-open > td { background: var(--kha-white); padding: var(--kha-sp-32) var(--kha-sp-32) var(--kha-sp-40) var(--kha-sp-64); border-bottom: 1px solid var(--kha-gray-200); }
.session-table .edu-detail { gap: var(--kha-sp-40); padding: 0; }
.session-table .edu-detail .dl--rows > div { padding-block: 14px; }
.session-table .edu-seatbox { padding: var(--kha-sp-24); background: var(--kha-surface-subtle); border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 767px) { .session-table .detail > td, .session-table tr.detail.is-open > td { padding: 20px 16px; } }
/* 일정 검색 영역 — 상자 없는 한 줄(사용자 지시 2026-11-07) */
.edu-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: var(--kha-sp-24) 0 var(--kha-sp-32); padding-bottom: var(--kha-sp-24); border-bottom: 1px solid var(--kha-gray-200); }
.edu-filterbar fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.edu-seg { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 4px; border-radius: 12px; background: var(--kha-gray-100); }
.edu-seg .edu-seg__item { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 9px; background: transparent; color: var(--kha-text-secondary); font-weight: var(--kha-fw-semibold); cursor: pointer; box-shadow: none; }
.edu-seg .edu-seg__item:hover { color: var(--kha-text-heading); }
.edu-seg .edu-seg__item.is-selected { background: var(--kha-white); color: var(--kha-navy-800); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); border: 0; }
.edu-seg .edu-seg__item:has(input:focus-visible) { box-shadow: var(--kha-focus-ring); }
.edu-seg__count { font-size: var(--kha-fs-14); font-weight: var(--kha-fw-regular); color: var(--kha-text-tertiary, var(--kha-gray-500)); }
.edu-filterbar__side { display: flex; align-items: center; gap: 24px; }
.edu-filterbar__count { margin: 0; color: var(--kha-text-secondary); }
.edu-filterbar__count strong { color: var(--kha-text-heading); }
@media (max-width: 767px) { .edu-seg { display: flex; width: 100%; } .edu-seg .edu-seg__item { flex: 1; justify-content: center; padding: 0 8px; } .edu-filterbar__side { width: 100%; justify-content: space-between; } }
/* ---------- 21. 로그인 뒤 화면 공통(사용자 지시 2026-11-07: 제목이 카드 테두리에 걸침·버튼이 카드 아래 선에 붙음·절반 폭 카드·색 과다) ----------
   카드 패턴 하나: 카드 안쪽 위 제목(19px) → 내용 → 오른쪽 정렬 버튼 줄(위 8px). 카드끼리 24px, 구역(카드 아닌 section)끼리 56px */
/* ① §20의 section--tight 'padding-block: 0'이 카드에도 걸려 제목·버튼이 테두리에 붙던 원인 — 카드는 카드 안쪽 여백 유지 */
.edu-body > .card.section--tight { padding-block: var(--kha-card-pad-lg); }
.edu-body > .card { padding: var(--kha-card-pad-lg); }
.edu-body > .card + .card, .edu-body > .card + .card.section--tight { margin-top: var(--kha-sp-24); }
.edu-body > .card > h2.h4:first-child, .edu-body > section.card > h2.h4:first-of-type { margin: 0; font-size: var(--kha-fs-19); }
/* ② fieldset 카드: legend를 위 테두리 위가 아니라 카드 안쪽 첫 줄 제목으로(float면 '그려진 legend'가 아니게 됨 → 일반 flex 항목) */
fieldset.card { margin: 0; min-width: 0; }
fieldset.card > legend { float: left; width: 100%; padding: 0; margin: 0; font-size: var(--kha-fs-19); font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
fieldset.card > legend + * { clear: both; }
/* ③ 버튼 줄·오류 문구는 2열 입력 격자에서도 한 줄 전체(가운데쯤 떨어져 보이던 문제) + 오른쪽 정렬 + 위 여백 */
.form-grid > .btn-row, .form-grid > .field__error, .form-grid > .edu-span2 { grid-column: 1 / -1; }
.edu-body .card .btn-row--end:last-child, .edu-body .card form > .btn-row:last-child { justify-content: flex-end; margin-top: 8px; }
.edu-body form.stack > .btn-row:last-child { margin-top: var(--kha-sp-8); }
/* ④ 한 카드 안 여러 묶음(알림 설정): 묶음 사이 가는 선, 저장 버튼은 카드 안 오른쪽 아래 */
.edu-formcard { gap: 0; }
.edu-formcard.form-grid { display: grid; gap: 24px 16px; }
.edu-formsec { margin: 0; padding: 0 0 var(--kha-sp-24); min-width: 0; border: 0; border-bottom: 1px solid var(--kha-border); display: flex; flex-direction: column; gap: 12px; }
.edu-formsec + .edu-formsec, .edu-formsec + .field__error { padding-top: var(--kha-sp-24); }
.edu-formsec > .edu-formsec__title { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-size: var(--kha-fs-19); font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
.edu-formsec > p { margin: 0; }
.edu-formcard > .btn-row:last-child { margin-top: var(--kha-sp-24); }
/* ⑤ 파일 선택 — 브라우저 기본 모양 대신 디자인 시스템 입력칸 + 보조 버튼 모양 */
input[type="file"].input { height: auto; min-height: var(--kha-control-h-md); padding: 5px 12px 5px 5px; color: var(--kha-text-secondary); font-size: var(--kha-fs-16); line-height: 1.6; cursor: pointer; }
input[type="file"].input::file-selector-button { height: calc(var(--kha-control-h-md) - 12px); margin-right: 14px; padding: 0 16px; border: 1px solid var(--kha-border-input); border-radius: calc(var(--kha-radius-md) - 2px); background: var(--kha-surface-subtle); color: var(--kha-text-strong); font: inherit; font-weight: var(--kha-fw-semibold); cursor: pointer; transition: background-color var(--kha-dur-fast); }
input[type="file"].input:hover::file-selector-button { background: var(--kha-surface-muted); }
.edu-photo { align-items: stretch; }
.edu-photo__form { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* ⑥ 수료증 카드: 본문 폭 전체 + 정보는 2열(휴대폰 1열) */
.edu-certcard .edu-dl2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--kha-sp-40); --dl-term-w: 112px; }
.edu-certcard .edu-dl2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.edu-certcard > h2.h4 { margin: 0; }
@media (max-width: 767px) { .edu-certcard .edu-dl2 { grid-template-columns: minmax(0, 1fr); } .edu-certcard .edu-dl2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--kha-border); } }
/* ⑦ 표 아래 안내 문장은 표와 띄움 */
.table-wrap + .edu-tablenote, .table-wrap + p.small { margin-top: var(--kha-sp-16); }
/* ⑧ 색 줄이기 3: 교육 인정 기한 머리글·막대 초록 → 회색 글자·남색 막대(회색 바탕) */
.deadline-card .eyebrow { color: var(--kha-text-secondary); }
.deadline-bar { background: var(--kha-gray-100); }
.deadline-bar__used { background: var(--kha-navy-800); }
/* ⑨ 하위 화면 구역 제목 크기 한 가지(22px) — '신청한 교육'(28px)과 '지난 교육'(22px)이 달랐음 */
.edu-body .edu-sechead { margin-bottom: var(--kha-sp-16); }
.edu-body .edu-sechead h2 { margin: 0; font-size: var(--kha-fs-22); }
@media (max-width: 767px) { .edu-body > .card { padding: var(--kha-card-pad); } .edu-body > .card.section--tight { padding-block: var(--kha-card-pad); } }
/* ⑩ 라디오 묶음(할인 사유): 항목 사이 간격 */
.edu-radios { display: flex; flex-wrap: wrap; gap: 8px 28px; border: 0; margin: 0; padding: 0; min-width: 0; }
.edu-radios > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; }
/* ⑪ 결제 실패 안내와 아래 카드 사이 여백, 좌석 유지 줄의 '29 분' 띄어짐(flex gap) 정리 */
.alert + .edu-apply, .edu-stepper + .alert, .edu-stepper-mini + .alert { margin-top: var(--kha-sp-24); }
#payFailed { margin-bottom: var(--kha-sp-24); }
.edu-hold { display: block; }
.edu-hold > [data-icon] { display: inline-block; margin-right: 6px; vertical-align: -3px; }
.alert + .btn-row, .alert + p.btn-row { margin-top: var(--kha-sp-24); }
/* ⑫ 내 교육: '지금 취소하면…' 안내는 한 줄 글(카드 flex로 줄마다 끊기던 문제), 이전 기록 연결 카드는 표와 띄움 */
.edu-refundnote { margin: 0; padding: 12px 16px; border-radius: var(--kha-radius-md); background: var(--kha-surface-subtle); color: var(--kha-text); }
.edu-body > section + section.card:not(.section--tight) { margin-top: var(--kha-sp-40); }
/* ⑬ 계산서 신청: 결제 내용 카드 + 입력 카드(같은 카드 패턴), 영수증 팝업: 제목·카드·인쇄 버튼 사이 여백, 설문 점수 라디오 간격 */
.edu-body > .alert + .card, .edu-body > .card + .alert { margin-top: var(--kha-sp-24); }
.edu-popup .edu-receipt { margin-top: var(--kha-sp-16); }
.edu-popup .edu-receipt + .btn-row { margin-top: var(--kha-sp-24); }
.chip-group:has(> label.check) { display: flex; flex-wrap: wrap; gap: 8px 28px; }
/* ⑭ 목록 위 '문의하기·새로 신청' 버튼 줄과 표 사이 여백 */
.edu-body > .btn-row--end:first-child { margin: 0 0 var(--kha-sp-16); }
/* ⑮ 표 안 sr-only(절대 위치)가 카드(position:relative) 기준으로 잡혀 가로 스크롤 상자를 벗어나던 문제(휴대폰 문서 폭 605px) */
.table-wrap { position: relative; }

/* ==========================================================================
   22. 사용자 화면 피드백 반영(2026-11-09) — 괄호 번호는 사용자 원문 번호
   ========================================================================== */
/* ① (2) 히어로 그림 움직임: 일반 12px·6초, 움직임 줄이기 설정(Windows '애니메이션 효과' 끔)에서도 6px·8초는 유지.
   원인: 디자인 시스템 components.css의 reduced-motion 전역 규칙(*{animation-duration:.01ms!important; iteration-count:1!important})이
   애니메이션을 첫 장면에서 멈추게 했다 → 더 구체적인 선택자 + !important로 이 그림만 되살린다 */
@keyframes edu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes edu-float-sm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.edu-hero__art img { animation: edu-float 3.5s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .kha-app .edu-hero__art img { animation-name: edu-float-sm !important; animation-duration: 5s !important; animation-iteration-count: infinite !important; animation-timing-function: ease-in-out !important; }
}

/* ② (3·4·5·6) 메인 구역: 흰 히어로 → 회색(다음 교육 + 접수 중인 교육) → 흰(자주 찾는 메뉴) → 회색(4단계·바로가기) → 흰(공지·FAQ) → 회색 바닥글 */
.edu-band { background: var(--kha-surface-subtle); border-bottom: 1px solid var(--kha-gray-200); padding-block: var(--kha-sp-56); }
.edu-band .next-card { margin: 0; }
.edu-open { margin-top: var(--kha-sp-56); }
.edu-open .edu-sechead h2 { margin: 0; }
/* 메인 회차표: 열 제목과 신청 동작은 같은 중심에 놓고 회차명은 읽기 순서를 유지한다. */
.edu-open .table thead th { text-align: center; }
@media (max-width: 767px) {
  .edu-open .card-list tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .edu-open .card-list tbody tr:last-child { margin-bottom: 0; }
  .edu-open table.card-list tbody :is(th, td)[data-label] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    white-space: normal;
    text-align: start;
    overflow-wrap: anywhere;
  }
  .edu-open .card-list td[data-label="상태"],
  .edu-open .card-list thead th:first-child { display: none; }
  .edu-open .card-list th[scope="row"] {
    grid-area: 1 / 1 / 2 / -1;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-inline-end: 112px;
    font-size: 16px;
    line-height: 1.4;
  }
  .edu-open .card-list th[scope="row"] a { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
  .edu-open .card-list td[data-label="신청"] {
    grid-area: 1 / 1 / 2 / -1;
    place-self: start end;
    width: 100px;
  }
  .edu-open .card-list td[data-label="신청"] .btn { width: 100px; height: 40px; }
  .edu-open .card-list th[scope="row"]::before,
  .edu-open .card-list td[data-label="신청"]::before { display: none; content: none; }
  .edu-open .card-list td { font-size: 14px; line-height: 1.35; }
  .edu-open .card-list td[data-label]:not([data-label="신청"])::before {
    font-size: 12px;
    line-height: 1.4;
    color: var(--kha-text-secondary);
  }
}
.edu-open .table td[data-label="신청"] > .btn {
  box-sizing: border-box;
  inline-size: 6.25rem;
  height: var(--kha-control-h-sm);
  padding-inline: 0;
  justify-content: center;
  white-space: nowrap;
}
.edu-open .table th[scope="row"] > a {
  color: #193c50;
  font-weight: 700;
  text-decoration: underline dotted #9aadb8;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: 3px;
}
.edu-open .table th[scope="row"] > a:hover,
.edu-open .table th[scope="row"] > a:focus-visible {
  color: #104f60;
  background-color: #e2f1ef;
  text-decoration: underline solid currentColor;
  text-underline-offset: 4px;
}
.edu-open .table th[scope="row"] > a:focus-visible { outline: 2px solid #176174; outline-offset: 3px; }
@media (min-width: 768px) {
  .edu-open .table td[data-label="신청"], .edu-open .table td[data-label="남은 자리"],
  .edu-open .table td[data-label="상태"] { text-align: center; }
}

.edu-quick { padding-block: var(--kha-sp-56) var(--kha-sp-64); background: var(--kha-white); border-bottom: 1px solid var(--kha-gray-200); }
.edu-quick__title { margin: 0 0 20px; font-size: var(--kha-fs-22); }
.theme-edu .edu-steps-sec { border-top: 0; border-bottom: 1px solid var(--kha-gray-200); }
.edu-board-sec { background: var(--kha-white); }

/* 내용이 있는 서브페이지 공통. 장식의 투명 윤곽에만 빛을 더한다. */
/* 페이지 설명이 비어도 경로와 제목은 동일한 기준선에 놓인다. 글자가 커지면 필요한 만큼 확장한다. */
.theme-edu .pg-band { min-block-size: 138px; }
.theme-edu .pg-band__inner { position: relative; z-index: 1; padding-block: 20px 18px; }
html[data-variant="b"] .theme-edu .pg-band {
  background: #fff;
}
html[data-variant="b"] .theme-edu .pg-band::before { display: none; }
@media (min-width: 768px) {
  .theme-edu .pg-band:not(.pg-band--plain)::after {
    top: -2px; bottom: auto; width: clamp(240px, 27vw, 400px); height: calc(100% + 30px);
    background-position: center; background-size: contain;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .theme-edu .pg-band { min-block-size: 126px; }
  .theme-edu .pg-band__inner { padding-block: 17px 15px; }
}
@media (max-width: 767px) {
  .theme-edu .pg-band { min-block-size: 104px; }
  .theme-edu .pg-band__inner { padding-block: 13px 12px; }
  .theme-edu .pg-band h1 { margin: 8px 0 0; font-size: clamp(25px, 6.5vw, 32px); line-height: 1.2; }
  .theme-edu .pg-band__lead { margin: 5px 0 0; font-size: 14px; line-height: 1.4; }
}
html:not([data-variant="b"]) .pg-band:not(.pg-band--plain)::after { display: block; }
@media (max-width: 767px) {
  .pg-band:not(.pg-band--plain)::after {
    display: block; width: clamp(145px, 46vw, 205px); height: auto; aspect-ratio: 7 / 5;
    top: auto; right: clamp(4px, 1.5vw, 12px); bottom: -17px; background-position: center bottom; background-size: contain;
  }
  .pg-band:not(.pg-band--plain) .pg-band__inner > :is(h1, .pg-band__lead) {
    max-width: none; text-shadow: 0 0 3px var(--edu-band-halo, #fff), 0 0 7px var(--edu-band-halo, #fff);
  }
}
@property --edu-band-reveal { syntax: "<percentage>"; inherits: false; initial-value: 120%; }
@media (prefers-reduced-motion: no-preference) {
  .pg-band h1, .pg-band__lead { animation: edu-band-title-in .52s ease-out both; }
  .pg-band__lead { animation-delay: .10s; }
  .pg-band:not(.pg-band--plain)::after {
    mask-image: radial-gradient(ellipse farthest-corner at 50% 45%,
      #000 0%, #000 max(0%, calc(var(--edu-band-reveal) - 17%)), transparent var(--edu-band-reveal));
    animation: edu-band-art-in 1.05s ease-out both, edu-band-art-glow 3.6s ease-in-out 1.05s infinite alternate;
  }
  @keyframes edu-band-title-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes edu-band-art-in {
    from { opacity: 0; --edu-band-reveal: 0%; }
    to { opacity: 1; --edu-band-reveal: 120%; }
  }
  @keyframes edu-band-art-glow {
    from { filter: drop-shadow(0 0 8px rgba(8,152,216,.06)) drop-shadow(0 0 10px rgba(56,168,72,.04)); }
    to { filter: drop-shadow(0 0 17px rgba(8,152,216,.16)) drop-shadow(0 0 22px rgba(56,168,72,.08)); }
  }
}
@media (forced-colors: active) {
  .pg-band h1, .pg-band__lead, .pg-band:not(.pg-band--plain)::after { animation: none; filter: none; mask-image: none; }
}

/* 자주 찾는 메뉴 6칸 한 줄(1023px 이하 3열, 767px 이하 2열): 맨 위 제목 → 아래 왼쪽 아이콘·오른쪽 회색 설명.
   마우스·초점: 카드 가운데서 바깥으로 원형 번짐(0.5초, 카드별 색 6가지 — 흰 글자 대비 4.5:1 이상 진한 톤), → 화살표는 그때만 제목 오른쪽 */
.quick-menu { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--kha-sp-16); list-style: none; margin: 0; padding: 0; }
.quick-menu__item { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 20px 18px; border-radius: 16px; background: var(--kha-white); box-shadow: 0 0 0 1px var(--kha-gray-200), 0 4px 18px rgba(0, 0, 0, .05); color: var(--kha-text-strong); text-decoration: none; overflow: hidden; transition: box-shadow .3s ease; }
.quick-menu__item::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 180%; aspect-ratio: 1; border-radius: 50%; background: var(--qm-fill, var(--kha-navy-800)); transform: translate(-50%, -50%) scale(0); transition: transform .5s cubic-bezier(.25, .7, .3, 1); }
.quick-menu__title { display: flex; align-items: center; gap: 4px; font-size: var(--kha-fs-17); font-weight: var(--kha-fw-bold); letter-spacing: -0.02em; line-height: 1.35; color: var(--kha-text-heading); transition: color .25s ease; }
.quick-menu__row { display: flex; align-items: flex-start; gap: 10px; }
.quick-menu__row .icon-tile { flex: none; width: 40px; height: 40px; border-radius: 12px; --icon-size: 20px; background: var(--kha-gray-100); color: var(--kha-navy-800); transition: background-color .25s ease, color .25s ease; }
.quick-menu__row small { min-width: 0; font-size: var(--kha-fs-14); line-height: 1.45; color: var(--kha-text-secondary); transition: color .25s ease; }
.quick-menu__go { flex: none; --icon-size: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.quick-menu__item:is(:hover, :focus-visible, :active)::after { transform: translate(-50%, -50%) scale(1); }
.quick-menu__item:hover, .quick-menu__item:focus-visible { box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.quick-menu__item:is(:hover, :focus-visible, :active) .quick-menu__title,
.quick-menu__item:is(:hover, :focus-visible, :active) small { color: var(--kha-white); }
.quick-menu__item:is(:hover, :focus-visible, :active) .icon-tile { background-color: rgba(255, 255, 255, .18); color: var(--kha-white); }
.quick-menu__item:is(:hover, :focus-visible, :active) .quick-menu__go { opacity: 1; transform: translateX(0); }
.quick-menu__item:focus-visible { outline: 3px solid var(--kha-blue-500); outline-offset: 3px; }
.qm-1 { --qm-fill: var(--kha-green-700); }
.qm-2 { --qm-fill: var(--kha-navy-800); }
.qm-3 { --qm-fill: var(--kha-orange-700); }
.qm-4 { --qm-fill: var(--kha-sky-700); }
.qm-5 { --qm-fill: var(--kha-blue-700); }
.qm-6 { --qm-fill: var(--kha-red-700); }
@media (max-width: 1023px) { .quick-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .quick-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .quick-menu__item { padding: 16px 14px; gap: 10px; }
  .quick-menu__title { font-size: var(--kha-fs-16); }
  .quick-menu__row .icon-tile { width: 34px; height: 34px; --icon-size: 18px; }
  .quick-menu__row small { font-size: var(--kha-fs-13); }
  .edu-band, .edu-quick { padding-block: var(--kha-sp-40); }
}

/* 메인 교육 안내. 큰 화면에서는 소개와 절차를 나란히, 휴대폰에서는 읽는 순서대로 배치한다. */
.edu-journey {
  background: linear-gradient(112deg, #142943 6%, #153650 60%, #124752 100%);
  color: #fff;
  padding-block: clamp(40px, 4.5vw, 64px);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.edu-journey__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.edu-journey__intro { position: relative; isolation: isolate; align-self: stretch; padding-bottom: 115px; }
.edu-journey__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #a7e9d8; font-weight: 700; font-size: 14px; }
.edu-journey__eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.edu-journey__intro h2 { color: #fff; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.055em; margin: 0; }
.edu-journey__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; position: relative; z-index: 1; margin-top: 14px; font-size: 15px; font-weight: 600; color: #cef3e8; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #6b9e9e; --icon-size: 17px; }
.edu-journey__more:is(:hover, :focus-visible) { color: #fff; text-decoration-thickness: 2px; }
.edu-journey__more [data-icon] { transition: transform .23s ease; }
@media (prefers-reduced-motion: no-preference) {
  .edu-journey__more:is(:hover, :focus-visible) [data-icon] { transform: translateX(4px); }
}
.edu-journey__art { position: absolute; z-index: -1; width: min(56%, 260px); height: auto; right: 0; bottom: -5px; pointer-events: none; }
.edu-journey__steps { list-style: none; padding: 0; margin: 0; }
.edu-journey__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; align-items: start; position: relative; padding: 0 0 21px; margin: 0; }
.edu-journey__steps li:last-child { padding-bottom: 0; }
.edu-journey__steps li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 4px; width: 1px; background: #558081; }
.edu-journey__number { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #648f98; border-radius: 50%; color: #b7f0df; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.edu-journey__steps li:last-child .edu-journey__number { color: #183a44; border-color: #a4e8cf; background: #a4e8cf; }
.edu-journey__steps h3 { margin: 1px 0 4px; font-size: 20px; line-height: 1.35; color: #fff; letter-spacing: -.035em; }
.edu-journey__steps p { margin: 0; font-size: 15px; line-height: 1.55; color: #c9dce4; }
.edu-journey__tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; border-radius: 12px; list-style: none; margin: clamp(26px, 3vw, 42px) 0 0; padding: 0; }
.edu-journey__tools li { margin: 0; background: #b5e8db; color: #173e43; border-radius: 12px 0 0 12px; }
.edu-journey__tools li + li { background: #f4d99e; color: #43361e; border-radius: 0 12px 12px 0; }
.edu-journey__tools a { display: flex; align-items: center; gap: 16px; height: 100%; min-height: 83px; padding: 14px clamp(16px, 2.3vw, 34px); color: inherit; text-decoration: none; border-radius: inherit; }
.edu-journey__tool-icon { flex: none; --icon-size: 28px; }
.edu-journey__tools small, .edu-journey__tools strong { display: block; color: inherit; }
.edu-journey__tools small { font-size: 13px; line-height: 1.45; }
.edu-journey__tools strong { font-size: 19px; line-height: 1.4; }
.edu-journey__arrow { margin-left: auto; flex: none; --icon-size: 20px; }
.edu-journey__tools a:is(:hover, :focus-visible, :active) strong { text-decoration: underline; text-underline-offset: 4px; }
.edu-journey a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
  .edu-journey__body { grid-template-columns: 1fr; gap: 24px; }
  .edu-journey__intro { min-height: 138px; padding: 0 34% 0 0; }
  .edu-journey__intro h2 { font-size: 34px; }
  .edu-journey__more { margin-top: 3px; }
  .edu-journey__art { width: min(36%, 172px); bottom: 0; }
  .edu-journey__steps li { gap: 13px; padding-bottom: 20px; }
  .edu-journey__steps h3 { font-size: 18px; }
  .edu-journey__tools { grid-template-columns: 1fr; }
  .edu-journey__tools li { border-radius: 10px 10px 0 0; }
  .edu-journey__tools li + li { border-radius: 0 0 10px 10px; }
  .edu-journey__tools a { min-height: 72px; }
  .edu-journey__tools strong { font-size: 17px; }
}
@media (forced-colors: active) {
  .edu-journey__number, .edu-journey__tools a { border: 1px solid LinkText; }
  .edu-journey__steps li:not(:last-child)::before { border-left: 1px solid CanvasText; }
}


/* 공지·FAQ 모두 보기 */
.edu-board-sec .edu-sechead .edu-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 13px;
  border-radius: 999px;
  background: #e8f2ef;
  color: #245361;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  --icon-size: 16px;
}
.edu-board-sec .edu-sechead .edu-go:hover,
.edu-board-sec .edu-sechead .edu-go:focus-visible { color: #fff; background: #205360; text-decoration: none; }
.edu-board-sec .edu-sechead .edu-go:focus-visible { outline: 2px solid #205360; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .edu-board-sec .edu-go, .edu-board-sec .edu-go > i { transition: background-color .18s, color .18s, transform .18s; }
  .edu-board-sec .edu-go:hover > i, .edu-board-sec .edu-go:focus-visible > i { transform: translateX(2px); }
}
@media (pointer: coarse) { .edu-board-sec .edu-sechead .edu-go { min-height: 44px; } }

/* ④ (9) 히어로 문구: 현행과 같은 두 줄. 제목의 주황 형광펜 강조 */
.edu-hero__lead { margin: 18px 0 var(--kha-sp-32); font-size: var(--kha-fs-22); color: var(--kha-text); }
.edu-hero__lead b { font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
.edu-hero__title { font-size: 56px; }
@media (max-width: 767px) { .edu-hero__title { font-size: var(--kha-fs-32); } .edu-hero__lead { font-size: var(--kha-fs-17); } }

/* B안 첫 화면: 그림의 실제 테두리를 기준으로 높이를 잡는다. */
html[data-variant="b"] .edu-hero__body { padding-block: clamp(22px, 2.3vw, 32px); }
html[data-variant="b"] .edu-hero__lead { margin: 12px 0 22px; }
html[data-variant="b"] .edu-hero .edu-trust { margin-top: 22px; padding-top: 12px; }
.edu-hero__title em {
  display: inline-block; position: relative; isolation: isolate; background: none;
}
.edu-hero__title em::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: -.015em; bottom: .1em; height: .32em;
  background: linear-gradient(176deg, #ffd38e 10%, #ffc16d 85%);
  border-radius: .04em .11em .05em .02em;
  transform: skewX(-8deg); transform-origin: left center;
}
@media (min-width: 768px) {
  html[data-variant="b"] .edu-hero__body {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(16px, 2vw, 28px);
  }
  html[data-variant="b"] .edu-hero__title { font-size: clamp(36px, 4vw, 56px); }
  html[data-variant="b"] .edu-hero__art img {
    width: 100%; height: clamp(222px, 20vw, 292px); margin: 0; object-fit: contain;
  }
}
/* 제목이 안착하면 형광펜을 긋고, 소개 문장을 올린다. 박스 크기는 고정한다. */
@media (prefers-reduced-motion: no-preference) {
  .edu-hero__word { white-space: nowrap; }
  .edu-hero__title em { --word-start: .20s; }
  .edu-hero__glyph {
    display: inline-block; transform-origin: center bottom;
    animation: edu-title-land .48s cubic-bezier(.18,.78,.24,1) both;
    animation-delay: calc(var(--word-start, 0s) + var(--glyph-lag, 0s));
  }
  .edu-hero__glyph:nth-child(2) { --glyph-lag: .05s; }
  .edu-hero__glyph:nth-child(3) { --glyph-lag: .10s; }
  .edu-hero__glyph:nth-child(4) { --glyph-lag: .15s; }
  .edu-hero__glyph:nth-child(5) { --glyph-lag: .20s; }
  .edu-hero__glyph:nth-child(6) { --glyph-lag: .25s; }
  .edu-hero__glyph:nth-child(7) { --glyph-lag: .30s; }
  .edu-hero__title em::after {
    animation: edu-title-mark .47s cubic-bezier(.3,.65,.24,1) .98s both;
  }
  .edu-hero__lead {
    animation: edu-lead-rise .4s cubic-bezier(.2,.75,.25,1) 1.45s both;
  }
  @keyframes edu-title-land {
    from { opacity: 0; transform: translateY(-.68em) scale(1.19); }
    78% { opacity: 1; transform: translateY(.035em) scale(.993); }
    to { opacity: 1; transform: none; }
  }
  @keyframes edu-title-mark {
    from { transform: skewX(-8deg) scaleX(0); }
    to { transform: skewX(-8deg) scaleX(1); }
  }
  @keyframes edu-lead-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-variant="b"] .edu-hero__art img { animation: none !important; }
}

/* ⑤ (8) 메인 팝업 — 안내 카드(글자 HTML) + '오늘 하루 보지 않기'·닫기 */
.edu-mpop__box { --modal-w: 560px; }
.edu-mpop__box:focus { outline: none; }
.edu-mpop__box:focus-visible { outline: 3px solid var(--kha-blue-500); outline-offset: 2px; }
.edu-mpop__card { padding: 24px; border-radius: var(--kha-radius-lg); background: var(--kha-surface-subtle); box-shadow: inset 0 0 0 1px var(--kha-gray-200); line-height: 1.75; }
.edu-mpop__card > p:first-child { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: var(--kha-radius-pill); background: var(--kha-navy-800); color: var(--kha-white); font-size: var(--kha-fs-14); font-weight: var(--kha-fw-bold); }
.edu-mpop__card h3 { margin: 0 0 12px; font-size: var(--kha-fs-19); color: var(--kha-text-heading); }
.edu-mpop__card p { margin: 0 0 8px; }
.edu-mpop__card p:last-child { margin-bottom: 0; }
.edu-mpop__card strong { color: var(--kha-text-heading); background: linear-gradient(transparent 62%, var(--kha-yellow-100) 62%); }
.edu-mpop__foot { justify-content: space-between; align-items: center; }
.edu-mpop__today { font-size: var(--kha-fs-15); }
@media (max-width: 767px) { .modal__footer.edu-mpop__foot > .btn { flex: none; } }
/* 그림 형식(2026-11-09, 현행처럼 그림 한 장): 폭에 맞춰 줄고(가로 넘침 없음), 세로가 길면 본문(.modal__body) 안에서 스크롤.
   PC 창·휴대폰 아래 시트 같은 규칙. 제목은 sr-only라 머리 여백을 없앤다 */
.edu-mpop__box--img > .modal__header { padding: 0; }
.edu-mpop__imgwrap { min-height: 0; padding: 16px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.edu-mpop__img { min-width: 0; }
.edu-mpop__img p { margin: 0; }
.edu-mpop__img a { display: block; border-radius: var(--kha-radius-md); }
.edu-mpop__img a:focus-visible { outline: 3px solid var(--kha-blue-500); outline-offset: 2px; }
.edu-mpop__img img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--kha-radius-md); }
/* 팝업이 열려 있는 동안 시안 전환 스위치(local·dev)는 숨긴다 — 휴대폰 시트 아래쪽에 겹쳐 보이던 문제 */
body.edu-mpop-open .edu-variant { display: none !important; }

/* 교육 개요·법령 본문 직접 링크 */
.edu-overview-section { scroll-margin-top: calc(var(--kha-header-h, 80px) + 12px); }
.edu-body > .edu-overview-section:first-of-type { margin-top: 0; }
.edu-overview-section:focus-visible > h2 { text-decoration: underline; text-underline-offset: 5px; }
.edu-ov__sub { font-size: var(--kha-fs-17); font-weight: var(--kha-fw-regular); color: var(--kha-text-secondary); }
.edu-ov__lawhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; border-top: 2px solid var(--kha-gray-800); border-bottom: 1px solid var(--kha-border); background: var(--kha-surface-subtle); }
.edu-ov__lawhead p { margin: 0; font-size: var(--kha-fs-17); }
.edu-ov__lawhead .btn { --icon-size: 16px; gap: 6px; }
.edu-ov__laws { margin: 0; padding: 0; list-style: none; counter-reset: ovlaw; }
.edu-ov__laws > li { position: relative; padding: 20px 20px 20px 52px; border-bottom: 1px solid var(--kha-border); counter-increment: ovlaw; }
.edu-ov__laws > li::before { content: counter(ovlaw); position: absolute; left: 16px; top: 20px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--kha-navy-800); color: var(--kha-navy-800); font-size: var(--kha-fs-14); font-weight: var(--kha-fw-bold); }
.edu-ov__laws > li > p { margin: 0; line-height: 1.7; }
.edu-ov__penalty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0 !important; padding: 12px 16px; border-radius: var(--kha-radius-md); background: var(--kha-orange-50); box-shadow: inset 0 0 0 1px var(--kha-orange-200); color: var(--kha-orange-900); font-weight: var(--kha-fw-semibold); }
.edu-ov__penalty-label { display: inline-flex; align-items: center; gap: 4px; color: var(--kha-orange-800); font-weight: var(--kha-fw-bold); --icon-size: 18px; }
.edu-ov__penalty--note { margin-top: var(--kha-sp-16) !important; }
.edu-ov__list > li + li { margin-top: 6px; }
.edu-ov__except { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--kha-radius-md); background: var(--kha-surface-subtle); color: var(--kha-text-secondary); }
.edu-ov__tt thead th:first-child { width: 150px; }
.edu-ov__tt thead th:nth-child(2) { width: 34%; }
.edu-ov__tt tbody th, .edu-ov__tt tbody td { vertical-align: top; text-align: left; }
.edu-ov__tt tbody th { font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
#ov-course .edu-ov__tt thead th { background: #19505d; color: #fff; text-align: center; }
.edu-ov__tt tr.edu-ov__checkin > td, .edu-ov__tt tr.edu-ov__close > td {
  background: #e6f4ef; color: #214d45; vertical-align: middle;
}
.edu-ov__tt tr.edu-ov__recess > td { background: #fff2d9; color: #634919; vertical-align: middle; }
.edu-ov__items { margin: 0; padding-left: 1.1em; }
.edu-ov__items > li + li { margin-top: 2px; }
.edu-ov__fee { margin: 0 0 16px; font-size: var(--kha-fs-19); }
.edu-ov__fee strong { font-size: 24px; color: var(--kha-text-heading); }
.edu-ov__box { padding: 20px 24px; border-radius: var(--kha-radius-lg); box-shadow: inset 0 0 0 1px var(--kha-border); }
.edu-ov__boxhead { margin: 0 0 10px; font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
.edu-ov__boxhead .text-secondary { font-weight: var(--kha-fw-regular); font-size: var(--kha-fs-15); }
.edu-ov__refund th[scope="row"] { font-weight: var(--kha-fw-semibold); text-align: left; }
@media (max-width: 767px) {
  /* 휴대폰에서는 한 강의의 시간, 제목, 세부 내용을 위에서 아래로 읽는다. */
  #ov-course .edu-ov__tt, #ov-course .edu-ov__tt tbody { display: block; width: 100%; min-width: 0; }
  #ov-course .edu-ov__tt thead {
    position: absolute; width: 1px; height: 1px; padding: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  #ov-course .edu-ov__tt tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
    padding: 14px 16px; border-bottom: 1px solid var(--kha-border);
  }
  #ov-course .edu-ov__tt tbody tr:last-child { border-bottom: 0; }
  #ov-course .edu-ov__tt tbody :is(th, td) {
    display: block; min-width: 0; height: auto; padding: 0; border: 0; overflow-wrap: anywhere;
  }
  #ov-course .edu-ov__tt tbody .col-meta {
    justify-self: start; font-size: var(--kha-fs-14); font-weight: 600; color: #21515c;
  }
  #ov-course .edu-ov__tt tr:is(.edu-ov__checkin, .edu-ov__recess, .edu-ov__close) {
    grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding-block: 10px;
  }
  #ov-course .edu-ov__tt :is(.edu-ov__checkin, .edu-ov__close) { background: #e6f4ef; }
  #ov-course .edu-ov__tt .edu-ov__recess { background: #fff2d9; }
  .edu-ov__laws > li { padding: 16px 0 16px 36px; }
  .edu-ov__laws > li::before { left: 0; top: 16px; }
}

/* 교육원 인사말: 제목 다음에 본문을 읽고 마지막에 초상과 서명을 본다. */
.edu-greet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 43%); gap: 24px clamp(20px, 2.4vw, 36px); align-items: end; }
.edu-greet__head { grid-column: 1 / -1; margin: 0; padding-bottom: var(--kha-sp-24); border-bottom: 1px solid var(--kha-border); font-size: 24px; font-weight: var(--kha-fw-semibold); line-height: 1.55; letter-spacing: -0.02em; color: var(--kha-text-heading); }
.edu-greet__head strong { font-weight: var(--kha-fw-bold); color: var(--kha-navy-900); background: linear-gradient(transparent 62%, var(--kha-yellow-100) 62%); }
.edu-greet__body p { margin: 0 0 16px; line-height: 1.85; color: var(--kha-text); }
.edu-greet__body p:last-child { margin-bottom: 0; }
.edu-greet__photo { align-self: end; justify-self: end; width: 100%; max-width: 420px; margin: 0; }
.edu-greet__photo img { display: block; width: 100%; height: auto; }
.edu-greet__photo figcaption { text-align: center; font-size: 16px; color: var(--kha-text); line-height: 1.5; }
.edu-greet__photo figcaption strong { margin-left: .2em; font-size: 21px; font-weight: 700; color: var(--kha-text-heading); }
@media (max-width: 767px) {
  .edu-greet { grid-template-columns: minmax(0, 1fr); gap: var(--kha-sp-24); }
  .edu-greet__photo { width: min(80%, 300px); justify-self: center; }
  .edu-greet__head { font-size: var(--kha-fs-19); }
}

/* ⑧ (1) 시안 A/B 전환 스위치(local·dev만 — 오른쪽 아래, 예전 '시안 · 예시 데이터' 자리) */
/* 시안 전환 스위치: 오른쪽 아래 신청 버튼 등을 가리지 않게 왼쪽 아래 + 평소 반투명(마우스·초점 때 선명) — 2026-11-09 */
.edu-variant { opacity: .92; transition: opacity .2s ease; }
.edu-variant:hover, .edu-variant:focus-within { opacity: 1; }
.edu-variant { position: fixed; left: 16px; bottom: 16px; z-index: var(--kha-z-mock-label, 900); display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: var(--kha-radius-md); background: rgba(25, 30, 41, 0.9); color: var(--kha-white); font: 600 13px/1.2 var(--kha-font-sans); box-shadow: var(--kha-shadow-md); }
.edu-variant__label { margin-right: 4px; }
.edu-variant__link { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 9px; margin-left: 3px; border-inline-start: 1px solid rgba(255, 255, 255, .3); color: var(--kha-white); font: inherit; text-decoration: none; }
.edu-variant__link:hover, .edu-variant__link:focus-visible { background: rgba(255, 255, 255, .15); color: var(--kha-white); border-radius: 4px; }
.edu-variant__link:focus-visible { outline: 2px solid var(--kha-yellow-400); outline-offset: 1px; }
.edu-variant__btn { min-width: 44px; min-height: 32px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; background: transparent; color: var(--kha-white); font: inherit; cursor: pointer; }
.edu-variant__btn[aria-pressed="true"] { background: var(--kha-white); color: var(--kha-gray-900); border-color: var(--kha-white); }
.edu-variant__btn:focus-visible { outline: 2px solid var(--kha-yellow-400); outline-offset: 2px; }
@media print { .edu-variant { display: none !important; } }
@media (max-width: 767px) {
  /* 작은 화면에서는 오버레이 대신 바닥글 다음 행에서 시안을 바꾼다. */
  .edu-variant { position: static; display: flex; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 0; box-shadow: none; opacity: 1; }
  .edu-variant__btn { min-height: 44px; }
  .edu-variant__link { min-height: 44px; }
}

/* ==========================================================================
   23. 기본 A안 업무형(html:not([data-variant="b"]) — local·dev 시안 비교용). 시안 v2b(공공 표준형):
   업무 시설 사진을 넣은 메인과 모집 현황, 띠에 걸친 여섯 메뉴, 표 중심 교육 일정과 수료 안내.
   ========================================================================== */
html:not([data-variant="b"]) .site-header .gnb__link { font-size: var(--kha-fs-19); font-weight: var(--kha-fw-bold); }
html:not([data-variant="b"]) .site-header .gnb__link[aria-current="page"] { color: var(--kha-primary-strong); }
html:not([data-variant="b"]) .site-header .gnb__link[aria-current="page"]::after {
  height: 3px; bottom: 0; background: currentColor;
}
html:not([data-variant="b"]) .site-header .gnb__link:hover { color: var(--kha-primary-strong); }
/* A 메인: 업무 시설 사진과 실제 회차 정보를 첫 화면에서 함께 읽는다. */
.edu-business-kicker, .edu-hero__session { display: none; }
html:not([data-variant="b"]) .kha-app {
  --kha-text-heading: #102d49;
  --kha-primary: #075a80;
  --kha-primary-hover: #064363;
  --kha-primary-active: #0b324c;
  --kha-primary-strong: #094e71;
  --kha-primary-subtle: #e9f3f7;
  --b-ink: #102d49;
  --b-accent: #07557a;
  --b-line: #cbd6df;
}
html:not([data-variant="b"]) .edu-hero {
  border: 0;
  color: white;
  background: linear-gradient(90deg, rgba(7,27,48,.94), rgba(7,27,48,.83) 35%, rgba(7,27,48,.35) 64%, rgba(7,27,48,.12)),
              #17374d url("../img/main/business-campus.webp") center 57% / cover no-repeat;
}
html:not([data-variant="b"]) .edu-hero__body {
  grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(40px,7vw,102px);
  align-items: center;
  padding-block: clamp(32px,4.5vw,68px) clamp(70px,6vw,88px);
}
html:not([data-variant="b"]) .edu-hero__text { min-width: 0; }
html:not([data-variant="b"]) .edu-business-kicker { display: block; color: #e0c793; margin: 0 0 17px; font-size: 16px; font-weight: 700; }
html:not([data-variant="b"]) .edu-hero__title { color: white; font-size: clamp(44px,4.3vw,66px); line-height: 1.12; letter-spacing: -.055em; }
html:not([data-variant="b"]) .edu-hero__title em { display: block; width: fit-content; max-width: 100%; color: inherit; }
html:not([data-variant="b"]) .edu-hero__title em::after { bottom: .025em; height: .18em; background: linear-gradient(176deg, #cb8139, #e4a050); }
html:not([data-variant="b"]) .edu-hero__lead { margin: 15px 0 24px; font-size: 18px; color: #e3ebf0; }
html:not([data-variant="b"]) .edu-hero__lead b { color: white; }
html:not([data-variant="b"]) .edu-hero__text .btn { border-radius: 5px; min-height: 46px; }
html:not([data-variant="b"]) .edu-hero__text .btn:first-child { background: white; border-color: white; color: #12344d; }
html:not([data-variant="b"]) .edu-hero__text .btn--outline { color: white; border-color: #aabdc9; background: rgba(9,29,45,.35); }
html:not([data-variant="b"]) .edu-hero__text .btn:hover { background: #e7f1f5; border-color: #e7f1f5; color: #12344d; }
html:not([data-variant="b"]) .edu-trust { gap: 5px 16px; margin-top: 23px; padding-top: 13px; border-top-color: #7890a3; color: #deebf1; font-size: 14px; }
html:not([data-variant="b"]) .edu-trust b { color: white; }
html:not([data-variant="b"]) .edu-hero__text :focus-visible { outline-color: #ffdf8d; }
html:not([data-variant="b"]) .edu-hero__art { display: none; }
html:not([data-variant="b"]) .edu-hero__session { display: block; min-width: 0; color: var(--b-ink); }
html:not([data-variant="b"]) .edu-hero__session .next-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  margin: 0;
  padding: clamp(20px,2.25vw,34px);
  border: 1px solid #ced8df;
  border-top: 4px solid #b89156;
  border-radius: 8px;
  box-shadow: 0 12px 38px rgba(5,21,37,.16);
  background: #fff;
  color: var(--b-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html:not([data-variant="b"]) .edu-hero__session .next-card__eyebrow { justify-content: space-between; font-size: 15px; color: var(--b-accent); }
html:not([data-variant="b"]) .edu-hero__session .next-card__title { margin: 9px 0 2px; color: var(--b-ink); font-size: clamp(21px,1.7vw,27px); line-height: 1.32; }
html:not([data-variant="b"]) .edu-hero__session .next-card__dl { --dl-term-w: 72px; gap: 5px; margin: 0; padding: 11px 0 0; border-top: 1px solid var(--b-line); font-size: 15px; line-height: 1.5; }
html:not([data-variant="b"]) .edu-hero__session .next-card__dl dt { color: #475e72; }
html:not([data-variant="b"]) .edu-hero__session .next-card__dl dd { color: #203951; }
html:not([data-variant="b"]) .edu-hero__session .edu-left-days { font-size: 13px; }
html:not([data-variant="b"]) .edu-hero__session .progress { height: 5px; background: #e0e8ed; border-radius: 2px; }
html:not([data-variant="b"]) .edu-hero__session .progress__bar { background: #187391; }
html:not([data-variant="b"]) .edu-hero__session .next-card__cta { flex-flow: row wrap; gap: 8px 16px; align-items: center; }
html:not([data-variant="b"]) .edu-hero__session .next-card__cta .btn { width: auto; flex: 1 1 auto; border-radius: 4px; }
html:not([data-variant="b"]) .edu-hero__session .next-card__cta .btn--primary { background: var(--b-ink); border-color: var(--b-ink); }
html:not([data-variant="b"]) .edu-hero__session .next-card__cta .btn--primary:hover { background: #205574; border-color: #205574; }
html:not([data-variant="b"]) .edu-hero__session .edu-go { color: var(--b-accent); }
html:not([data-variant="b"]) .edu-hero__session .edu-subscribe { margin: 10px 0 0; color: var(--b-ink); background: white; }
html:not([data-variant="b"]) .edu-hero__session .next-card--closed .next-card__cta { flex-direction: column; align-items: stretch; }
html:not([data-variant="b"]) .edu-hero__session .next-card--closed .btn-row { margin: 0; }
html:not([data-variant="b"]) .edu-home .edu-quick { position: relative; z-index: 1; margin-top: -35px; padding: 0 0 12px; border: 0; background: transparent; }
html:not([data-variant="b"]) .edu-quick__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not([data-variant="b"]) .edu-home .quick-menu { gap: 0; border: 1px solid var(--b-line); border-radius: 6px; box-shadow: 0 6px 18px rgba(18,45,69,.08); background: white; }
html:not([data-variant="b"]) .edu-home .quick-menu li { min-width: 0; }
html:not([data-variant="b"]) .edu-home .quick-menu li + li { border-left: 1px solid #dce4e9; }
html:not([data-variant="b"]) .edu-home .quick-menu__item { flex-direction: column-reverse; align-items: center; justify-content: center; gap: 9px; padding: 16px 4px; min-height: 102px; border: 0; border-radius: 0; box-shadow: none; text-align: center; background: transparent; }
html:not([data-variant="b"]) .edu-home .quick-menu__row small { display: none; }
html:not([data-variant="b"]) .edu-home .quick-menu__go { position: absolute; top: 10px; right: 10px; }
:where(html:not([data-variant="b"]) .edu-home) .quick-menu__title { color: var(--b-ink); justify-content: center; font-size: 16px; }
:where(html:not([data-variant="b"]) .edu-home) .quick-menu__row .icon-tile { width: 36px; height: 36px; --icon-size: 22px; color: var(--b-accent); background: #edf4f7; border-radius: 9px; }
html:not([data-variant="b"]) .edu-home .quick-menu__item:focus-visible { outline: 2px solid white; outline-offset: -4px; }
html:not([data-variant="b"]) .edu-home .edu-band { padding: 0; background: #fff; border: 0; }
html:not([data-variant="b"]) .edu-home .edu-open { margin: 0; padding: clamp(34px,4vw,64px) 0; }
html:not([data-variant="b"]) .edu-home .edu-sechead h2, html:not([data-variant="b"]) .edu-home .edu-sechead h3 { color: var(--b-ink); letter-spacing: -.04em; }
html:not([data-variant="b"]) .edu-home .edu-sechead .eyebrow, html:not([data-variant="b"]) .edu-home .edu-sechead .edu-go { color: var(--b-accent); }
html:not([data-variant="b"]) .edu-home .edu-open .table { border-top: 2px solid var(--b-ink); }
html:not([data-variant="b"]) .edu-home .edu-open thead th { background: #eef3f6; color: #283f55; }
html:not([data-variant="b"]) .edu-home .edu-open .table-wrap { border-radius: 0; }
html:not([data-variant="b"]) .edu-home .edu-open tbody th a { color: var(--b-ink); }
html:not([data-variant="b"]) .edu-home .edu-open .btn--outline:not(:disabled) { color: var(--b-accent); border-color: #53819a; }
html:not([data-variant="b"]) .edu-home .edu-open .btn--outline:not(:disabled):hover { background: #e9f2f6; }

html:not([data-variant="b"]) .edu-board-sec .edu-grid { gap: clamp(24px,4.5vw,68px); }
html:not([data-variant="b"]) .edu-board-sec .edu-sechead { padding-bottom: 13px; border-bottom: 2px solid var(--b-ink); margin: 0; }
html:not([data-variant="b"]) .edu-board-sec .accordion, html:not([data-variant="b"]) .edu-board-sec .accordion details { border-radius: 0; box-shadow: none; }
html:not([data-variant="b"]) .edu-board-sec .accordion__q { color: var(--b-accent); }
html:not([data-variant="b"]) .edu-board-sec .list__item { border-color: #d5dfe5; }

/* 업무형 표와 하위 화면 */
html:not([data-variant="b"]) .table { border-top: 2px solid var(--kha-text-heading); }
html:not([data-variant="b"]) main .card { border-radius: var(--kha-radius-sm); box-shadow: 0 0 0 1px var(--kha-border-strong); }
html:not([data-variant="b"]) .edu-steps__num { background: var(--kha-primary); color: var(--kha-white); box-shadow: none; }
html:not([data-variant="b"]) .edu-steps-sec .card { border-top: 3px solid var(--kha-primary); }

@media (max-width: 1023px) {
  html:not([data-variant="b"]) .edu-hero__body { gap: 26px; grid-template-columns: minmax(0, .9fr) minmax(0,1fr); }
  html:not([data-variant="b"]) .edu-home .quick-menu li:nth-child(3n+1) { border-left: 0; }
  html:not([data-variant="b"]) .edu-home .quick-menu li:nth-child(n+4) { border-top: 1px solid #dce4e9; }
}
@media (max-width: 767px) {
  html:not([data-variant="b"]) .edu-hero { background-position: 66% center; background-image: linear-gradient(100deg,rgba(7,27,48,.86),rgba(7,27,48,.53) 72%,rgba(7,27,48,.32)),url("../img/main/business-campus.webp"); }
  html:not([data-variant="b"]) .edu-hero__body { grid-template-columns: 1fr; gap: 22px; padding-block: 28px 48px; }
  html:not([data-variant="b"]) .edu-business-kicker { margin-bottom: 7px; font-size: 14px; }
  html:not([data-variant="b"]) .edu-hero__title { font-size: clamp(30px,7vw,44px); }
  html:not([data-variant="b"]) .edu-hero__title em { display: inline-block; }
  html:not([data-variant="b"]) .edu-hero__lead { margin: 8px 0 15px; font-size: 15px; }
  html:not([data-variant="b"]) .edu-hero__text .btn { min-height: 42px; padding-inline: 14px; font-size: 15px; }
  html:not([data-variant="b"]) .edu-trust { margin-top: 13px; padding-top: 9px; gap: 4px 10px; font-size: 12px; }
  html:not([data-variant="b"]) .edu-hero__session .next-card { gap: 10px; padding: 16px; }
  html:not([data-variant="b"]) .edu-home .edu-quick { margin-top: -24px; }
  html:not([data-variant="b"]) .edu-home .quick-menu li { border-left: 0; border-top: 0; }
  html:not([data-variant="b"]) .edu-home .quick-menu li:nth-child(odd) { border-left: 0; }
  html:not([data-variant="b"]) .edu-home .quick-menu li:nth-child(even) { border-left: 1px solid #dce4e9; }
  html:not([data-variant="b"]) .edu-home .quick-menu li:nth-child(n+3) { border-top: 1px solid #dce4e9; }
  html:not([data-variant="b"]) .edu-home .quick-menu__item { min-height: 78px; gap: 4px; padding-block: 8px; }
  html:not([data-variant="b"]) .edu-home .quick-menu__row .icon-tile { width: 30px; height: 30px; --icon-size: 19px; }
  html:not([data-variant="b"]) .edu-home .quick-menu__title { font-size: 15px; }
}
/* 교육 일정·교육 안내·마이페이지의 공통 제목, 탐색, 표와 바닥글 */
html:not([data-variant="b"]) .pg-band { background: linear-gradient(105deg,#102c47,#17425d); border-bottom: 3px solid #83a5b3; color: white; }
html:not([data-variant="b"]) .pg-band::before, html:not([data-variant="b"]) .pg-band::after { display: none; }
html:not([data-variant="b"]) .pg-band h1 { color: white; font-weight: 750; letter-spacing: -.045em; }
html:not([data-variant="b"]) .pg-band { --edu-band-halo: #12374c; }
html:not([data-variant="b"]) .pg-band .breadcrumb, html:not([data-variant="b"]) .pg-band .breadcrumb a, html:not([data-variant="b"]) .pg-band__lead { color: #d4e4ed; }
html:not([data-variant="b"]) .pg-band .breadcrumb [aria-current="page"] { color: white; }
html:not([data-variant="b"]) .pg-band :focus-visible, html:not([data-variant="b"]) .site-footer :focus-visible { outline-color: #ffdf8d; }
html:not([data-variant="b"]) .side-menu { border-radius: 4px; border-color: var(--b-line); border-top: 3px solid var(--b-ink); }
html:not([data-variant="b"]) .side-menu__title { color: var(--b-ink); }
html:not([data-variant="b"]) .side-menu__item { border-radius: 3px; }
html:not([data-variant="b"]) .side-menu__item[aria-current="page"] { background: var(--b-ink); color: white; }
html:not([data-variant="b"]) .table thead th { background: #eef3f6; color: #284156; }
html:not([data-variant="b"]) .tabs .tab[aria-selected="true"], html:not([data-variant="b"]) .tabs .tab[aria-current="page"] { color: var(--b-accent); }
/* 협회 공통 바닥글: 서비스 링크·관련 기관과 교육원 연락처. */
.theme-edu .site-footer.edu-footer { margin: 0; padding: 0; border-top: 0; background: #242b33; color: #d8e0e6; font-size: 15px; }
html:not([data-variant="b"]) .site-footer.edu-footer { background: #0c253b; }
.site-footer.edu-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer.edu-footer a { color: inherit; text-decoration: none; }
.site-footer.edu-footer a:hover, .site-footer.edu-footer a:focus-visible { color: white; text-decoration: underline; text-underline-offset: 3px; }
.site-footer.edu-footer :focus-visible { outline: 2px solid #ffdf8d; outline-offset: 2px; }
.edu-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 9px; border-bottom: 1px solid #58616a; }
.edu-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px clamp(14px,2vw,30px); }
.edu-footer__links a { display: inline-flex; align-items: center; min-height: 42px; font-weight: 500; }
.edu-footer__links a.is-strong { font-weight: 700; color: white; }
.edu-footer__sites { display: flex; align-items: start; flex-shrink: 0; gap: 8px; }
.edu-footer__sites details { position: relative; }
.edu-footer__sites summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 134px; min-height: 42px; padding: 4px 13px; border: 1px solid #71808a; border-radius: 2px; color: #fff; cursor: pointer; list-style: none; font-size: 14px; }
.edu-footer__sites summary::-webkit-details-marker { display: none; }
.edu-footer__sites summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.edu-footer__sites details[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.site-footer.edu-footer .edu-footer__sites ul { position: absolute; z-index: 3; bottom: calc(100% + 4px); right: 0; min-width: 100%; padding: 4px; border: 1px solid #7c8a95; border-radius: 3px; background: #273642; box-shadow: 0 3px 14px rgba(0,0,0,.18); }
.edu-footer__sites li a { display: flex; align-items: center; min-height: 38px; padding: 5px 8px; white-space: nowrap; }
.edu-footer__identity { padding: 22px 0 18px; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.edu-footer__logo { display: block; width: clamp(180px,18vw,234px); height: auto; margin: 0 auto 13px; }
.edu-footer__contact {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 4px 12px; margin: 0; padding: 0; font-style: normal; font-size: 14px; line-height: 1.55;
}
.edu-footer__contact small { font-size: inherit; }
.edu-footer__contact > span:not(.edu-footer__address) { white-space: nowrap; }
.site-footer.edu-footer .edu-footer__inquiry { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1200px) {
  .edu-footer__contact > span + span { border-inline-start: 1px solid #56616b; padding-inline-start: 12px; }
}
.edu-footer__copyright { margin: 4px 0 0; font-size: 13px; color: #b6c3cd; }
@media (max-width: 820px) {
  .edu-footer__top { flex-direction: column; align-items: stretch; padding-block: 14px; }
  .edu-footer__links { justify-content: center; }
  .edu-footer__sites { justify-content: center; }
}
@media (max-width: 520px) {
  .edu-footer__links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); text-align: center; gap: 0; border: 1px solid rgb(255 255 255 / 16%); border-radius: 4px; overflow: hidden; }
  .edu-footer__links li:nth-child(even) { border-inline-start: 1px solid rgb(255 255 255 / 12%); }
  .edu-footer__links li:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 12%); }
  .edu-footer__links a { justify-content: center; width: 100%; min-height: 44px; }
  .edu-footer__sites { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .edu-footer__sites summary { min-width: 0; min-height: 44px; border-color: rgb(255 255 255 / 21%); }
  .site-footer.edu-footer .edu-footer__sites ul { position: static; min-width: 0; margin-top: 4px; }
  .edu-footer__sites li a { min-height: 44px; white-space: normal; }
  .edu-footer__contact { gap: 2px 13px; }
}

/* ---------- 자주 찾는 메뉴 배경 CI 도형(B안) — kor.housing.or.kr '자주 찾는 서비스' 참고(사용자 지시 2026-11-09) ---------- */
html[data-variant="b"] .edu-quick { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--kha-sp-64) var(--kha-sp-80, 5rem); }
html[data-variant="b"] .edu-quick > .container { position: relative; z-index: 1; }
html[data-variant="b"] .edu-quick__title { text-align: center; font-size: var(--kha-fs-32, 2rem); margin-bottom: 8px; }
html[data-variant="b"] .edu-quick__lead { margin: 0 0 var(--kha-sp-32); text-align: center; color: var(--kha-text-secondary); font-size: var(--kha-fs-17); }
html:not([data-variant="b"]) .edu-quick__deco, html:not([data-variant="b"]) .edu-quick__lead { display: none; }
.edu-quick__deco { position: absolute; z-index: 0; pointer-events: none; background: no-repeat center / contain; }
/* 장식 전용 바탕을 카드 열의 안쪽 너비에 맞춘다. */
.edu-quick__background {
  position: absolute; z-index: 0; inset: 0; margin-inline: auto;
  width: calc(100% - 2 * var(--kha-gutter-md)); max-width: var(--kha-container);
  overflow: hidden; pointer-events: none;
}
html:not([data-variant="b"]) .edu-quick__background { display: none; }
.edu-quick__deco--person {
  left: 0; bottom: -6px; width: clamp(220px, 20vw, 372px); height: 93%;
  background-image: url("../img/ci/bg-person.png"); background-position: left bottom;
}
.edu-quick__deco--house {
  right: 0; top: -4px; width: clamp(260px, 23vw, 451px); height: 97%;
  background-image: url("../img/ci/bg-house.png"); background-position: right top;
}
html[data-variant="b"] .edu-quick .quick-menu { position: relative; z-index: 1; }
html[data-variant="b"] .edu-quick__title, html[data-variant="b"] .edu-quick__lead { position: relative; z-index: 1; }
@media (min-width: 768px) and (max-width: 1023px) { .edu-quick__deco--person { width: 19vw; } .edu-quick__deco--house { width: 22vw; } }
@media (max-width: 1279px) { html[data-variant="b"] .edu-quick .quick-menu__item { border: 0; box-shadow: 0 0 42px rgba(0, 0, 0, .08); }
@media (max-width: 767px) { .edu-quick__deco { display: none; } }

/* ---------- 4단계 카드(B안) — 위 3px 선과 채운 번호를 적용하고, 단계마다 머리 색을 다르게(사용자 지시 2026-11-09)
   번호 원은 흰 글자 대비를 위해 진한 톤, 위 선은 CI 계열 ---------- */
html[data-variant="b"] .edu-steps-sec .edu-steps > li.card { border-top: 3px solid var(--step-line, var(--kha-sky-500)); }
html[data-variant="b"] .edu-steps-sec .edu-steps__num { background: var(--step-fill, var(--kha-sky-700)); color: var(--kha-white); box-shadow: none; }
.edu-steps > li:nth-child(1) { --step-line: var(--kha-sky-500); --step-fill: var(--kha-sky-700); }
.edu-steps > li:nth-child(2) { --step-line: var(--kha-sky-500); --step-fill: var(--kha-sky-700); } /* 4단계 모두 1번 색으로 통일(사용자 지시 2026-11-09) */
.edu-steps > li:nth-child(3) { --step-line: var(--kha-sky-500); --step-fill: var(--kha-sky-700); }
.edu-steps > li:nth-child(4) { --step-line: var(--kha-sky-500); --step-fill: var(--kha-sky-700); }

} /* @media (max-width: 1279px) */

/* 메인 네 단계의 자동 강조와 두 바로가기. 본문은 모든 단계에서 읽을 수 있다. */
.edu-journey { --journey-focus: #bcf3df; --journey-highlight: rgba(177, 235, 223, .12); --journey-tool-hover: #7dcdb5; }

.edu-journey__steps li { isolation: isolate; }
.edu-journey__steps li::after { content: ""; position: absolute; z-index: -1; inset: -7px -12px 13px; border-radius: 9px; background: var(--journey-highlight); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.edu-journey__steps li:last-child::after { bottom: -7px; }
.edu-journey__steps li.is-highlighted::after { opacity: 1; }
.edu-journey__steps li > div { transition: transform .35s ease; }
.edu-journey__steps li.is-highlighted > div { transform: translateX(3px); }
.edu-journey__steps h3, .edu-journey__steps p { transition: color .35s ease; }
.edu-journey__steps li.is-highlighted h3 { color: var(--journey-focus); }
.edu-journey__steps li.is-highlighted p { color: #effaf9; }
.edu-journey__number { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.edu-journey.has-rotation .edu-journey__steps li:not(.is-highlighted) .edu-journey__number { color: #b7f0df; border-color: #648f98; background: transparent; }
.edu-journey.has-rotation .edu-journey__steps li.is-highlighted .edu-journey__number { color: #183a44; border-color: #b4f1db; background: #b4f1db; }

.edu-journey__tools li + li { --journey-tool-hover: #edc36e; }
.edu-journey__tools a { transition: background-color .23s ease, color .23s ease, box-shadow .23s ease; }
.edu-journey__tools a:is(:hover, :focus-visible, :active) {
  background-color: var(--journey-tool-hover);
  box-shadow: inset 0 0 0 2px rgba(24,62,66,.66), inset 0 4px 13px rgba(21,55,58,.17);
}
.edu-journey__tools .edu-journey__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; transition: transform .23s ease, background-color .23s ease, color .23s ease;
}
.edu-journey__tools a:is(:hover, :focus-visible, :active) .edu-journey__arrow { background-color: #204650; color: white; transform: translateX(4px); }


@media (max-width: 767px) {
  .edu-journey__steps li::after { left: -7px; right: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .edu-journey__steps li::after, .edu-journey__steps li > div, .edu-journey__steps h3, .edu-journey__steps p,
  .edu-journey__number, .edu-journey__tools a, .edu-journey__arrow { transition: none; }
  .edu-journey__tools a:is(:hover, :focus-visible, :active) .edu-journey__arrow { transform: none; }
}


/* 교육대상 확인: AJAX·일반 GET은 같은 상태 코드와 결과 서식을 사용한다. */
.edu-target-affiliations { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 190px),1fr)); gap: 8px; }
.edu-target-form .check-card { align-items: flex-start; gap: 10px; }
.edu-target-form .check-card small { white-space: nowrap; }
.edu-target-form .field__hint { margin: 0 0 12px; }
.edu-target-answer[data-status="required"] { --al-bg: var(--kha-success-bg); --al-border: var(--kha-success-border); --al-icon: var(--kha-success-icon); --al-title: var(--kha-success-text); }
.edu-target-answer:is([data-status="review"],[data-status="empty"]) { --al-bg: var(--kha-warning-bg); --al-border: var(--kha-warning-border); --al-icon: var(--kha-warning-icon); --al-title: var(--kha-warning-text); }
.edu-target-answer .alert__body p + p { margin-top: 6px; }
.edu-target-answer a, .edu-target-references a { color: var(--kha-link); text-decoration: underline; text-underline-offset: 3px; }
.edu-target-references { border-top: 1px solid var(--kha-border); padding-top: 12px; }
.edu-target-references summary { cursor: pointer; font-weight: 600; }
.edu-target-references ul { margin-top: 8px; padding-left: 1.2em; }
.edu-target-references li + li { margin-top: 5px; }

/* 모바일 카드에서는 표의 열 대신 제목 아래에 라벨과 값을 함께 읽는다. */
@media (max-width: 767px) {
  .edu-body table.table.card-list:not(.session-table) tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 9px 14px;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--kha-border);
    border-radius: 0;
  }
  .edu-body table.table.card-list:not(.session-table) tbody tr:last-child { border-bottom: 0; }
  .edu-body table.table.card-list:not(.session-table) tbody :is(th, td):not([colspan]) {
    min-width: 0;
    height: auto;
    padding: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .edu-body table.table.card-list:not(.session-table) tbody [data-label]::before { margin-bottom: 2px; }
  .edu-body table.table.card-list:not(.session-table) tbody th[scope="row"] {
    order: -1;
    grid-column: 1 / -1;
    font-weight: var(--kha-fw-semibold);
    color: var(--kha-text-heading);
  }
  .edu-body table.table.card-list:not(.session-table) tbody :is(td[colspan], td:not([data-label]), td[data-label="일시"], td[data-label="영수증·계산서"]) {
    grid-column: 1 / -1;
  }
  .edu-body table.table.card-list:not(.session-table) tbody td:empty { display: none; }
  .edu-body table.table.card-list:not(.session-table) tbody tr:has(.edu-empty-cell) { padding: 0; }
}


html.edu-menu-open, html.edu-menu-open body { overflow: hidden; overscroll-behavior: none; }
.edu-menu-dialog {
  position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; box-sizing: border-box;
  margin: 0; padding: env(safe-area-inset-top) 0 0; border: 0; background: #fff;
  color: var(--kha-text); overflow: hidden;
}
.edu-menu-dialog::backdrop { background: #fff; }
.edu-menu-dialog[open] > .site-header {
  position: static; display: flex; flex-direction: column; height: 100%;
  min-height: 0; border-bottom: 0;
}
.edu-menu-dialog .site-header__inner { flex-shrink: 0; width: 100%; }
.edu-menu-dialog .edu-allmenu {
  flex: 1 1 auto; min-height: 0; max-height: none; box-shadow: none;
  padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain;
}

/* 회원가입 두 전문은 별도로 읽고 접을 수 있다. */
.accordion__body.join-policy-body { max-block-size: min(21rem, 45vh); overflow-y: auto; overflow-wrap: anywhere; }
.join-policy-body:focus-visible { outline: 2px solid var(--kha-primary); outline-offset: -2px; }
.join-policy-body h3, .join-policy-body h4 { margin-block: 1em .45em; }
.join-policy-body > :first-child { margin-top: 0; }
.join-policy-body p { margin-block: .4em; }