/*
 * KAPA English public site — slim build from kapa-tokens.css
 * Regenerated by: node scripts/build-kapa-eng-css.js
 * Full design system source of truth: kapa-tokens.css
 */

@charset "utf-8";
/* ============================================================
   0. 서체 — Pretendard self-host (CDN @import 대신, 필요 weight만)
   Regular/Medium/SemiBold/Bold · font-display: swap
   ============================================================ */
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-Bold.woff2") format("woff2");
}
/* 폼·패널 너비 계산용 — padding/border가 width에 포함되도록 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ============================================================
   1. 브랜드 원시 컬러 (CI — 변경 최소화)
   RGB는 협회 가이드 기준. HEX는 웹 구현용.
   ============================================================ */
:root {
  /* Main */
  --kapa-blue: #0081c6; /* Pantone 3005C · RGB 0,129,198 · 메인 */
  --kapa-silver: #cccccc; /* K 20% */

  /* Sub */
  --kapa-dark-blue: #005daa; /* Pantone 286C · RGB 0,93,170 */
  --kapa-light-blue: #00a4e4; /* Pantone 2995C · RGB 0,164,228 */
  --kapa-ivory: #f0f1d9; /* Pantone 5807C · RGB 240,241,217 */
  --kapa-beige: #d9cfc0; /* Pantone 7529C · RGB 217,207,192 */
  --kapa-gray: #808080; /* K 50% */
  --kapa-black: #000000; /* K 100% · 로고 전용에 가깝게 사용 */

  /* RGB 채널 (투명도 조합용) */
  --kapa-blue-rgb: 0, 129, 198;
  --kapa-dark-blue-rgb: 0, 93, 170;
  --kapa-light-blue-rgb: 0, 164, 228;
  --kapa-ivory-rgb: 240, 241, 217;
  --kapa-beige-rgb: 217, 207, 192;
  --kapa-gray-rgb: 128, 128, 128;
  --kapa-black-rgb: 0, 0, 0;

  /* 로고 전용색 우선순위 참고: 1 Dark Blue → 2 Blue → 3 Light Blue → 4 Black */
}
/* ============================================================
   2. 역할(Semantic) 컬러 — 컴포넌트에서 이걸 쓰세요
   ============================================================ */
:root {
  /* Brand roles */
  --color-primary: var(--kapa-blue); /* 주요 버튼, 핵심 UI */
  --color-primary-strong: var(--kapa-dark-blue); /* hover/강조, 헤더 */
  --color-accent: var(--kapa-light-blue); /* 배지, 하이라이트, 섹션 바 */
  --color-accent-muted: rgba(var(--kapa-light-blue-rgb), 0.12); /* 연한 강조 배경 */

  /* Surface / background */
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f7f9; /* 페이지 배경 (중성, 읽기용) */
  --color-bg-muted: #eef2f5;
  --color-bg-brand-soft: rgba(var(--kapa-blue-rgb), 0.08); /* 기존 surface 개념 정리 */
  --color-bg-ivory: var(--kapa-ivory); /* 특별 섹션·인쇄 감성 영역 */
  --color-bg-beige: var(--kapa-beige);

  /* Text — 본문은 pure black 대신 약간 부드럽게 */
  --color-text: #1a1f26;
  --color-text-secondary: #5c6570;
  --color-text-muted: var(--kapa-gray);
  --color-text-inverse: #ffffff;
  --color-text-link: var(--kapa-blue);
  --color-text-link-hover: var(--kapa-dark-blue);

  /* Border */
  --color-border: #d8dee6;
  --color-border-strong: var(--kapa-silver);
  --color-border-brand: rgba(var(--kapa-blue-rgb), 0.5); /* Secondary 윤곽 — 버튼임을 분명히 */

  /* Status (웹 UI용 — CI 밖 허용 팔레트) */
  --color-success: #1b8f4a;
  --color-success-muted: rgba(27, 143, 74, 0.12);
  --color-warning: #c98500;
  --color-warning-muted: rgba(201, 133, 0, 0.14);
  --color-danger: #d64545;
  --color-danger-muted: rgba(214, 69, 69, 0.12);
  --color-info: var(--kapa-light-blue);
  --color-info-muted: rgba(var(--kapa-light-blue-rgb), 0.14);

  /* Chrome — 관리자·앱 상단바 (본문 서피스와 분리) */
  --color-bg-inverse: var(--kapa-dark-blue);
  --color-bg-inverse-muted: #004a88;

  /*
   * Data visualization (승인)
   * ------------------------------------------------
   * CTA(--color-primary) · Status(success/warning/danger)와 역할 분리.
   * 시리즈 색 ≠ 진행률 의미 색. 보라/마젠타 KPI 배경 금지.
   * 미리보기: kms-dashboard.html · 옵션: kms-variants.html
   */
  --color-chart-1: var(--kapa-dark-blue);
  --color-chart-2: var(--kapa-blue);
  --color-chart-3: var(--kapa-light-blue);
  --color-chart-4: #0d8a7f; /* teal — 차트 시리즈 전용 */
  --color-chart-5: #64748b; /* slate */
  --color-chart-6: #94928a; /* warm gray — 기타·보조 시리즈 */
  --color-chart-track: var(--color-bg-muted);

  /* Focus ring (접근성) */
  --color-focus-ring: rgba(var(--kapa-blue-rgb), 0.45);

  /* Overlay */
  --color-overlay: rgba(var(--kapa-black-rgb), 0.45);

  /* Status 글자(뱃지·알림) — 연한 배경 위 대비 */
  --color-success-fg: #146338;
  --color-warning-fg: #8a5c00;
  --color-danger-fg: #a83232;

  /* Strong 버튼 hover (라이트) */
  --color-primary-strong-hover: #004a88;
  --color-danger-hover: #b93a3a;

  color-scheme: light;
}
/*
 * 다크 테마 — 역할 토큰만 덮어씀. CI 원시(--kapa-*)는 유지.
 * 켜는 법: <html data-kapa-theme="dark"> 또는 js/kapa-theme.js
 * OS 자동 추종은 기본 끔(저장된 선택만). 미리보기: index.html
 */
/* ============================================================
   3. 타이포그래피
   ============================================================ */
:root {
  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
    sans-serif;
  --font-mono: "Pretendard", ui-monospace, "SF Mono", Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 타입 스케일: rem 루트 16px 유지, 본문(--text-md)만 17px (KRDS·Pretendard 권장) */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-md: 1.0625rem; /* 17 — 본문 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.25rem; /* 20 */
  --text-2xl: 1.5rem; /* 24 */
  --text-3xl: 1.875rem; /* 30 */
  --text-4xl: 2.25rem; /* 36 */

  --leading-tight: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: -0.01em;
}
/* ============================================================
   4. 간격 · 레이아웃 (8px 그리드)
   ============================================================ */
:root {
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 2.5rem; /* 40 */
  --space-8: 3rem; /* 48 */
  --space-10: 4rem; /* 64 */
  --space-12: 5rem; /* 80 */

  --container-width: 1200px;
  --container-padding-x: var(--space-5);
  --section-padding-y: clamp(3.5rem, 6vw, 6rem);

  /* 브레이크포인트 (미디어쿼리·JS에서 동일 값 사용) */
  --bp-sm: 480px;
  --bp-md: 768px; /* MobileShell 전환 */
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* 본문 가독 폭 (영문 45–75자 ≈ 국문 약 35–45자 분량) */
  --measure-text: 42rem; /* ≈ 672px @16 root */

  /* 터치·클릭 최소 영역 (접근성) */
  --touch-target-min: 44px;

  /* 레이어(z-index) — 숫자 하드코딩 금지 */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}
/* ============================================================
   5. 형태 · 그림자 · 모션
   (리뉴얼 base.css의 radius/shadow/easing 개념을 단순화)
   ============================================================ */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0.5, 0, 1);
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-skeleton: 1.4s;
  --transition-default: color var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
:root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-skeleton: 0ms;
  }
}
/* ============================================================
   6. 그라데이션 — KAPA 블루 계열만 (템플릿 보라/핑크 제거)
   ============================================================ */
:root {
  --gradient-brand: linear-gradient(
    135deg,
    var(--kapa-dark-blue) 0%,
    var(--kapa-blue) 55%,
    var(--kapa-light-blue) 100%
  );
}
/* ============================================================
   7. 기본 요소 (선택 적용 — 필요 시만 사용)
   ============================================================ */
.kapa-root,
[data-kapa-theme="light"],
[data-kapa-theme="dark"] {
  color: var(--color-text);
  background: var(--color-bg-subtle);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.kapa-root :focus-visible,
[data-kapa-theme="light"] :focus-visible,
[data-kapa-theme="dark"] :focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/* 타이포 유틸 */
/* 버튼 뼈대 — 스타일 가이드용 최소 패턴 */
.kapa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.625rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-default);
}
.kapa-btn--primary {
  color: var(--color-text-inverse);
  background: var(--color-primary);
}
.kapa-btn--primary:hover,
.kapa-btn--primary:focus-visible {
  background: var(--color-primary-strong);
}
/* 대비 강한 CTA (CI 안) — Dark Blue. 연한 배경 위 핵심 행동용 */
.kapa-btn--secondary {
  /* Primary(채움)과 대비: 흰 면 + 브랜드 윤곽 — CI 블루를 유지하며 위계를 나눔 */
  color: var(--color-primary-strong);
  background: var(--color-bg);
  border-color: var(--color-border-brand);
}
.kapa-btn--secondary:hover,
.kapa-btn--secondary:focus-visible {
  background: var(--color-bg-brand-soft);
}
/*
 * Accent 버튼 — CTA 비권장 (Light Blue는 Primary와 대비 부족)
 * 배지·섹션 하이라이트용 토큰(--color-accent)만 사용.
 * 미리보기/레거시용으로 클래스는 유지하되 신규 CTA에 쓰지 말 것.
 */
.kapa-btn--ghost {
  color: var(--color-primary-strong);
  background: transparent;
  border-color: transparent;
}
.kapa-btn--ghost:hover,
.kapa-btn--ghost:focus-visible {
  background: var(--color-bg-brand-soft);
}
/* disabled · loading — 컴포넌트 상태 */
.kapa-btn:disabled,
.kapa-btn[disabled],
.kapa-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
/* 버튼·링크 안 아이콘 (새 창 등) */
.kapa-btn__icon,
.kapa-link__icon,
.kapa-icon-external {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}
.kapa-btn .kapa-btn__icon,
.kapa-btn .kapa-icon-external {
  width: 1.05em;
  height: 1.05em;
}
.kapa-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.kapa-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}
.kapa-icon--sm {
  width: 1rem;
  height: 1rem;
}
.kapa-btn .kapa-icon {
  width: 1.125rem;
  height: 1.125rem;
}
/* 다중 버튼 묶음 — 위계·간격 통일 */
.kapa-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.kapa-btn-group--stack .kapa-btn {
  width: 100%;
}
/* 처리 목록 — 기능이 다른 버튼 묶음을 한 줄에 (색이 아니라 칸으로 구분) */
@media (max-width: 768px) {
.kapa-btn-group--responsive,
  .kapa-btn-group--end {
    flex-direction: column;
    align-items: stretch;
  }

.kapa-btn-group--responsive .kapa-btn,
  .kapa-btn-group--end .kapa-btn {
    width: 100%;
  }
}
/* 링크 */
.kapa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--color-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: var(--transition-default);
}
.kapa-link:hover {
  color: var(--color-text-link-hover);
}
/* 브랜드·어두운 면 위 링크 */
.kapa-link--inverse {
  color: var(--color-text-inverse);
  text-decoration: underline;
}
.kapa-link--inverse:hover {
  color: var(--color-text-inverse);
  opacity: 0.88;
}
/* 배지 — 버튼(44px)보다 작되, 옆에서 너무 작아 보이지 않게 */
/* 목록 구분 — 공지(중요) vs 안내(일반) 색 분리 */
/* 상태 뱃지 — 진행/완료 등 (시맨틱 muted 배경) */
/* 표 안 작은 뱃지 */
/* 상태 등 — 채움형 (흰 글자). CTA 아님, 읽기용 */
/*
 * 개발유형 뱃지 (승인 · 표 전용)
 * 원본 보라 금지 → CI 블루 / chart teal
 */
/*
 * 결재단계 칩 (승인)
 * ①업로드 · ②검토 · ④승인 + 버전
 */
/* 아이콘 전용 버튼 (승인 · 행 액션) */
/*
 * 세그먼트 필터 (승인 · 전체 / 진행중 / 완료)
 * 페이지 탭(.kapa-tabs)과 다름 — 밀집 툴바용
 */
.kapa-segment {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  gap: 0;
}
.kapa-segment__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-default);
}
.kapa-segment__btn[aria-selected="true"],
.kapa-segment__btn[aria-pressed="true"] {
  background: var(--color-primary-strong);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.kapa-segment__btn:hover:not([aria-selected="true"]):not([aria-pressed="true"]) {
  color: var(--color-text);
  background: var(--color-bg);
}
.kapa-segment__btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   대시보드 패턴 (승인 · KPI / 진행률 / 패널 / 차트 슬롯)
   확정 전 — kms-dashboard.html 에서 검증
   ------------------------------------------------------------ */
.kapa-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.kapa-panel__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.kapa-panel__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
/*
 * KPI — 읽기 전용 요약 (링크·CTA 아님)
 * 가시성용 muted 배경 OK. 원색 풀칠·호버 클릭 유도 금지.
 */
/* 숫자 + 옆 악센트 pill (캡처: 개발 6 · 유지보수 5) */
/*
 * KPI 서피스 옵션 (승인 · kms-variants.html 참고)
 * A muted(기본) · B outline · C solid-CI · D solid-status(비권장)
 */
/* solid + 역할색 — 가시성 최고, 색 경쟁 큼 → 기본 비권장 */
/* 유형 뱃지 soft 옵션 */
/* 상태 outline 옵션 */
/* 세그먼트 · 라인형 옵션 */
.kapa-segment--line .kapa-segment__btn {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.kapa-segment--line .kapa-segment__btn[aria-selected="true"],
.kapa-segment--line .kapa-segment__btn[aria-pressed="true"] {
  background: transparent;
  color: var(--color-primary-strong);
  border-bottom-color: var(--color-primary);
  box-shadow: none;
}
/* 아이콘 버튼 · 사각 옵션 */
/* 가로 요약 바 (FP·금액 등) — muted 배경 + 역할 악센트 */
/* 진행률 — 의미는 status, 트랙은 chart-track */
/* 차트 막대 (CSS 플레이스홀더 — 라이브러리 교체 가능) */
/* 도넛·게이지 — conic-gradient 플레이스홀더 */
/* 관리자 상단 내비 (승인)
 * 브랜드 + 메뉴 = 왼쪽 정렬, meta(버전·사용자)만 오른쪽 */
/* 컨테이너 */
/* 버튼 군과 텍스트 링크 사이 여백 */
/* 주 액션 줄과 Danger 줄 분리 */
/* 폼 필드 — 입력·선택·첨부 최소 패턴 */
/* 검색·필터 툴바 전용 — 라벨 왼쪽, 컨트롤 오른쪽. 작성 폼에는 쓰지 않음 */
/* 스크린리더 전용 텍스트 (새 창 안내 등) */
.kapa-sr-only,
.kapa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* 알림 · 주의 · 경고 — Banner/Alert 최소 패턴 */
/* 상태별 색 — 커스텀 프로퍼티로 변형만 교체 */
/* ------------------------------------------------------------
   페이지 템플릿 · 공통 상태 (목록 / 상세 / 폼 / loading·empty·error)
   ------------------------------------------------------------ */
.kapa-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  max-width: 100%;
}
.kapa-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}
.kapa-page__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.kapa-page__desc {
  margin: var(--space-2) 0 0;
  max-width: var(--measure-text);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.kapa-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.kapa-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--color-text-muted);
}
.kapa-prose {
  max-width: var(--measure-text);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.kapa-prose p {
  margin: 0 0 var(--space-4);
}
/*
 * 표 래퍼: radius + thead 배경이 겹치면 모서리 보더가 “짤려” 보임.
 * - overflow:auto 로 클립 · radius는 md(8)로 안티앨리어싱 부담 완화
 * - 데이터 표는 border-collapse:separate (아래) — collapse는 cell radius 무시
 */
/* 표 상자는 링크가 아님. 안쪽 단추를 눌러도·상자를 눌러도 파란 테두리 없음. */
/* 목록 표: 가로 구분선만 */
/* 기본 행은 읽기 전용. 손 모양·파란 밑줄은 실제 링크 행만 */
/* 안내·서류 목록용 데이터 테이블 (행 클릭/호버 링크 톤 없음) */
/* 태블릿 이상만 min-width — 모바일 카드 레이아웃과 충돌 방지 */
/*
 * 데이터 표 격자: 안쪽 선만 셀에, 바깥 테두리는 wrap.
 * border-bottom만 쓰면 세로선 없음 — 오른쪽·아래 유지.
 */
/* wrap radius와 맞춤 — thead 사각 배경이 곡선 보더를 가리지 않게 */
/*
 * 데이터 표 반응형 — 표 CSS 변형 금지, 마크업 분기
 *   .kapa-only-desktop  → ≥768 표
 *   .kapa-data-cards    → ≤767 카드
 * 행 구분선은 border-bottom 말고 .kapa-data-card__rule (hr) 사용
 */
@media (min-width: 768px) {
.kapa-only-mobile {
    display: none !important;
  }
}
.kapa-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.kapa-section-title__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.kapa-section-title__icon svg {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}
/* 상태: 로딩 · 빈 화면 · 오류 */
@keyframes kapa-spin {
  to {
    transform: rotate(360deg);
  }
}
/* 자리 표시 — 곧 나올 목록·표 모양. 스피너와 구분 */
/* ------------------------------------------------------------
   페이지 템플릿 · 동의 / 약관 안내
   (안내 박스 → 본문 패널 → 스크롤 조문 → 동의 체크 → 하단 CTA)
   ------------------------------------------------------------ */
/* ============================================================
   7b. 애플리케이션 셸 — 문서 탭 (승인)
   ERP·관리자 다중 페이지. 비활성도 칩 형태. Primary CTA 아님 — 네비게이션 전용.
   페이지 분류 탭(.kapa-tabs)과 용도 분리. 미리보기: index.html #doc-tabs-heading
   ============================================================ */
/* ERP 셸 — Tailwind/Bootstrap preflight 덮어쓰기 방지 */
/* ============================================================
   Auth — 스플릿 로그인 (승인)
   참고: 풀블리드 1:1 (브랜드 | 폼 · 세로 디바이더). 솔리드 CI면은 반반이 안정적.
   커버 사진/이모지 없음 → KAPA --gradient-brand + 로고·카피.
   login.html · admin-login.html · login_sample.html
   -------------------------------------------------------------- */
/* 전폭 그리드 — 카드/그림자 없음 */
/* —— 브랜드(좌) —— */
/* —— 폼(우) · 세로 디바이더 —— */
/* 전폭 하단 고지 (Instagram global footer 위치) */
/* ------------------------------------------------------------
   AI 비서 플로팅 채팅 (샘플 · ai-chat.html)
   원본 보라 UI → Primary(--color-primary / --color-primary-strong)만 사용
   ------------------------------------------------------------ */
/* ============================================================
   7b. 오버레이 · 추가 폼 · 단계 · 접기 · 모바일 셸 (v0.4)
   ============================================================ */
/* --- 모달 (native <dialog>) --- */
/* --- 토스트 --- */
/* --- 말풍선 설명 --- */
/* --- 더보기 메뉴 --- */
/* --- 라디오 · 스위치 · 날짜 --- */
/* --- 날짜 선택 (협회 달력) --- */
/* --- 신청 단계 --- */
/* --- 접기 (아코디언) --- */
/* --- 모바일 앱 뼈대 (하단 탭 최대 4) --- */
.kapa-tabbar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-shrink: 0;
  min-height: 3.5rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.kapa-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-1);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--text-xs);
  text-decoration: none;
  cursor: pointer;
}
.kapa-tabbar__item--active,
.kapa-tabbar__item[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.kapa-tabbar__item:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}
.kapa-tabbar--dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
}
/* ============================================================
   7c. 공개 사이트 뼈대 — 건너뛰기 · 검색 · 헤더 · 푸터 · 404
   ============================================================ */
.kapa-skip {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.kapa-skip:focus,
.kapa-skip:focus-visible {
  top: var(--space-3);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.kapa-sitehead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.kapa-sitehead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-3) var(--container-padding-x);
}
.kapa-sitehead__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-right: auto;
  color: var(--color-primary-strong);
  text-decoration: none;
}
.kapa-sitehead__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}
.kapa-sitehead__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.kapa-sitehead__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
}
.kapa-sitehead__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.kapa-sitehead__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.kapa-sitehead__link:hover,
.kapa-sitehead__link:focus-visible {
  background: var(--color-bg-brand-soft);
  color: var(--color-primary-strong);
}
.kapa-sitehead__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.kapa-sitehead__link[aria-current="page"] {
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-semibold);
}
.kapa-sitehead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.kapa-sitefoot {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.kapa-sitefoot__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-7) var(--container-padding-x) var(--space-5);
}
.kapa-sitefoot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-6);
}
.kapa-sitefoot__brand {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}
.kapa-sitefoot__addr,
.kapa-sitefoot__tel {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-inverse);
  opacity: 0.88;
}
/* 휴대폰에서만 우편번호를 다음 줄로 */
@media (max-width: 767px) {
.kapa-sitefoot__postal {
    display: block;
  }
}
.kapa-sitefoot__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
.kapa-sitefoot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kapa-sitefoot__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  text-decoration: none;
}
.kapa-sitefoot__list a:hover,
.kapa-sitefoot__list a:focus-visible {
  text-decoration: underline;
}
.kapa-sitefoot__list a:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}
.kapa-sitefoot__list a.kapa-sitefoot__strong {
  font-weight: var(--font-weight-semibold);
}
.kapa-sitefoot__copy {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 22%, transparent);
  font-size: var(--text-xs);
  opacity: 0.8;
}
.kapa-sitepage {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--color-bg-subtle);
}
.kapa-sitepage__main {
  flex: 1;
  width: 100%;
}
@media (max-width: 767px) {
.kapa-sitehead__toggle {
    display: inline-flex;
  }

.kapa-sitehead__tools {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

.kapa-sitehead.is-open .kapa-sitehead__tools {
    display: flex;
  }

.kapa-sitehead__nav {
    flex-direction: column;
    align-items: stretch;
  }

.kapa-sitehead__actions {
    flex-direction: column;
    align-items: stretch;
  }

.kapa-sitehead__actions .kapa-btn {
    width: 100%;
  }

.kapa-sitefoot__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

.kapa-sitepage--with-tabbar {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}
/* ============================================================
   7d. 마이페이지 · 설정 (공개 사이트 · 로그인 후)
   ============================================================ */
/* ============================================================
   다크모드 전환 버튼 (승인)
   html[data-kapa-theme="light|dark"] + js/kapa-theme.js
   ============================================================ */