/* ============================================================
   common.css — InsurDesignLab 공통 스타일
   모든 페이지에서 <link rel="stylesheet" href="common.css"> 로 불러옵니다.

   [이 파일의 범위]
   리셋 · 디자인 토큰 · body 기본값까지만 담습니다.

   [넣지 말아야 할 것]
   · header / nav / .logo / .btn-contact / .hamburger / .mobile-*
     → 헤더는 header.js 가 마크업과 스타일을 함께 주입합니다(.idl-hdr-*).
       여기에 같은 선택자를 다시 두면 충돌하고, 특히 엘리먼트 선택자
       (header, nav)는 tools/·deep/ 페이지의 <header class="hero"> 나
       <nav class="main-tabs-wrap"> 같은 무관한 요소까지 잡습니다.
   · footer
     → 페이지마다 자체 footer 스타일을 갖고 있습니다.

   [토큰 주의]
   아래 '레거시 토큰'은 tools/c_terms_dictionary.html 이 자체 :root 없이
   그대로 사용합니다. 이름을 바꾸거나 지우면 그 페이지의 색이 전부 깨집니다.

   버전: 2026
============================================================ */

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* ── 레거시 토큰 (삭제 금지 — 위 주의 참고) ── */
:root {
  --primary:       #1A3A6B;
  --primary-dark:  #0D2344;
  --primary-light: #EBF0F8;
  --accent:        #E8A020;
  --text-dark:     #1C1C2E;
  --text-mid:      #4A4A6A;
  --text-light:    #8888AA;
  --bg:            #FFFFFF;
  --bg-soft:       #F7F9FC;
  --border:        #E0E8F4;
}

/* ── IDL 토큰 (index / find_your_fit / consulting_tools 계열) ──
   각 페이지가 자체 :root 로 같은 값을 다시 선언하고 있어도 무방합니다. */
:root {
  --ink:    #14213d;  /* 본문 텍스트 · 진한 면 */
  --deep:   #0f1830;  /* 히어로 배경 */
  --paper:  #f7f9fc;  /* 카드 면 */
  --canvas: #f4f6fa;  /* 페이지 배경 */
  --line:   #dbe3ee;  /* 테두리 */
  --muted:  #5b6b85;  /* 보조 텍스트 */
  --brand:  #c96a3f;  /* IDL 강조색 (V 마크와 동일) */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ── body 기본값 ──
   대부분의 페이지가 자체 body 규칙으로 덮어씁니다. */
body {
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--text-dark);
  background: var(--bg);
  line-height: 1.6;
}

/* ── 접근성 ── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
