/* =========================================================
   teum insure — 디자인 토큰 (단일 출처)
   여기 정의된 변수 외의 색·크기 값을 페이지에서 직접 쓰지 않는다.
   ========================================================= */

:root {
  /* ---- 색: 바탕 ---- */
  --c-bg:            #f6f7f9;  /* 페이지 바탕 */
  --c-bg-sunken:     #eff1f5;  /* 더 눌린 영역(표 머리, 코드) */
  --c-surface:       #ffffff;  /* 카드·패널 */
  --c-surface-hover: #fafbfc;

  /* ---- 색: 글자 ---- */
  --c-ink:        #161c2b;  /* 본문·제목 */
  --c-ink-2:      #4a5468;  /* 보조 설명 */
  --c-ink-3:      #78818f;  /* 캡션·비활성 */
  --c-ink-invert: #ffffff;

  /* ---- 색: 선 ---- */
  --c-line:        #e3e6ec;  /* 기본 1px 보더 */
  --c-line-strong: #ccd2dc;  /* 입력 필드 */
  --c-line-soft:   #eef0f4;  /* 표 내부 구분선 */

  /* ---- 색: 주색(딥 인디고) ---- */
  --c-primary:       #2f3e8c;
  --c-primary-hover: #27336f;
  --c-primary-press: #1f2a5c;
  --c-primary-tint:  #eef1fa;  /* 배경 틴트 */
  --c-primary-line:  #d4dbf1;  /* 틴트 위 보더 */
  --c-primary-ink:   #24306e;  /* 틴트 위 글자 */

  /* ---- 색: 강조(앰버) — 버튼·뱃지·마커 전용 ---- */
  --c-accent:        #c2650c;
  --c-accent-hover:  #a75509;
  --c-accent-bright: #f0921f;  /* 점·막대 등 그래픽 */
  --c-accent-tint:   #fff3e2;
  --c-accent-line:   #f3ddbd;
  --c-accent-ink:    #8a470a;

  /* ---- 색: 상태 ---- */
  --c-ok:        #1e7a52;
  --c-ok-tint:   #e8f5ee;
  --c-danger:    #b3261e;
  --c-danger-tint:#fdecea;

  /* ---- 색: 기타 ---- */
  --c-focus:   #5b74d8;
  --c-overlay: rgba(16, 21, 35, .42);
  --c-health-tint: #e9f1eb;
  --c-health-line: #cddfd2;
  --c-health-ink: #234a3d;
  --c-health-paper: #f7f6f0;
  --c-redaction: #171c23;
  --c-ok-light: #87dbb3;

  /* ---- 간격 (4px 배수) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* ---- 라운드 ---- */
  --r-sm:   8px;
  --r-md:   12px;   /* 카드 기본 */
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---- 그림자 (최소한만) ---- */
  --sh-1:   0 1px 2px rgba(22, 28, 43, .05);
  --sh-2:   0 4px 14px rgba(22, 28, 43, .07);
  --sh-pop: 0 18px 48px rgba(22, 28, 43, .16);

  /* ---- 글꼴 ----
     1) "Pretendard Local" = 컴퓨터에 이미 깔린 프리텐다드(내려받지 않는다).
        없으면 이 이름은 통째로 건너뛰고 CDN 웹폰트로 넘어간다.
     2) CDN 까지 막히면 맑은 고딕 → sans-serif 로 떨어진다(굴림·바탕 방지). */
  --font-body: "Pretendard Local", "Pretendard Variable", Pretendard,
               -apple-system, BlinkMacSystemFont, system-ui,
               "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-num:  var(--font-body);

  /* ---- 글자 크기 ---- */
  --fs-xs:   0.75rem;    /* 12 캡션 */
  --fs-sm:   0.8125rem;  /* 13 보조 */
  --fs-md:   0.875rem;   /* 14 UI 기본 */
  --fs-base: 0.9375rem;  /* 15 본문 */
  --fs-lg:   1.0625rem;  /* 17 카드 제목 */
  --fs-xl:   1.25rem;    /* 20 섹션 제목 */
  --fs-2xl:  1.5rem;     /* 24 페이지 제목 */
  --fs-3xl:  1.875rem;   /* 30 수치 */

  /* ---- 굵기 ---- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---- 줄간격 ---- */
  --lh-tight:  1.25;
  --lh-snug:   1.45;
  --lh-normal: 1.65;

  /* ---- 레이아웃 ---- */
  --w-sidebar:  260px;
  --h-header:   60px;
  --w-content:  1280px;
  --z-drawer:   60;
  --z-header:   70;
  --z-modal:    90;
  --z-toast:    100;

  /* ---- 전환 ---- */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;

  /* 날짜·선택·체크박스 같은 브라우저 기본 부품을 항상 밝은 판으로 그린다.
     (윈도우·맥이 다크 모드일 때 입력칸만 검게 나오는 것을 막는다) */
  color-scheme: light;
}

/* 이미 컴퓨터에 깔려 있는 프리텐다드를 먼저 쓴다 — 네트워크를 타지 않는다.
   깔려 있지 않으면 이 얼굴은 실패하고 CDN 웹폰트("Pretendard Variable")로 넘어간다. */
@font-face {
  font-family: "Pretendard Local";
  src: local("Pretendard Variable"), local("PretendardVariable"), local("Pretendard");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   리셋 + 기본 타이포
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 한글은 어절(띄어쓰기) 단위로 줄을 바꾼다 — "인쇄합니 / 다." 같은 잘림 방지.
     긴 영문·주소는 break-word 가 받아 준다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

img, svg { vertical-align: middle; }
svg { flex: none; }

/* 숫자가 줄 맞도록 — 캘린더·표·KPI */
.tabular, .kpi__value, .table td, .cal__grid { font-variant-numeric: tabular-nums; }

/* 키보드 포커스만 보이게 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* hidden 속성은 어떤 display 보다 우선 */
[hidden] { display: none !important; }

/* 스크린리더 전용 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   인쇄 — 도구 페이지 공통. 셸(헤더·사이드바)을 걷어내고
   A4 한 장 기준으로 여백·열수를 되돌린다.
   페이지별 압축은 components.css 의 .print-tight 가 맡는다.
   ========================================================= */
@page { size: A4 portrait; margin: 12mm; }

@media print {
  body { background: #fff; }
  .app-header, .app-sidebar, .app-scrim, .no-print { display: none !important; }

  /* 셸이 잡아 둔 사이드바·헤더 자리(padding 과 margin 둘 다) */
  .app { min-height: 0 !important; }
  .app-main { padding: 0 !important; margin: 0 !important; }
  .app-main__inner { max-width: none; }

  .toast-stack { display: none !important; }
}

/* 2열 폼을 인쇄에서 되살리는 규칙은 components.css 31절에 있다.
   components.css 의 768px 규칙(.form-grid 1열)보다 뒤에 와야 이기기 때문이다. */