@charset "utf-8";
/* 디지털한글 — 색·규격 원값 정의 (디자인 토큰)
 *
 *   ★ 규칙 1. 색의 원값(hex·rgb)은 이 파일에만 존재한다.
 *      다른 CSS 와 화면에서 hex 를 직접 쓰지 않고 var(--dh-*) 로만 참조한다.
 *
 *   ★ 규칙 2. 화면은 「역할 이름」만 쓴다 (--dh-bg·--dh-ink·--dh-accent 등).
 *      팔레트 번호(--dh-navy-700)를 화면에서 직접 쓰지 않는다.
 *      색을 바꿀 일이 생기면 역할 지정부만 고치면 된다.
 *
 *   ★ 규칙 3. 라이트·다크 두 벌을 모두 정의한다.
 *      역할 이름은 같고 값만 달라지므로 화면 코드는 한 벌로 끝난다.
 *
 *   기조: 네이비 블루 — 신뢰·학술·공공
 *
 *   다크 모드 주의 (2026 기준 반영)
 *     · 순수 검정(#000)을 바탕으로 쓰지 않는다. 눈부심·잔상이 생긴다.
 *       짙은 네이비(#0f1b2d 계열)를 바탕으로 삼는다.
 *     · 네이비 원색은 어두운 바탕에서 대비가 1.31:1 수준으로 무너진다.
 *       다크에서는 강조색을 밝은 파랑(400·300)으로 올린다.
 *     · 보조 글자(설명·꼬리표)의 대비를 반드시 확인한다.
 *       라이트에서 쓰던 회색을 그대로 쓰면 다크에서 기준 미달이 된다.
 *     · 초점 표시는 어두운 바탕에서 사라지기 쉬우므로 밝은 색을 쓴다.
 */

:root {

  /* ══ 팔레트 — 고정값 (모드와 무관) ══════════════════ */

  /* 네이비 10단계. 600이 기준. */
  --dh-navy-50:  #f2f6fb;
  --dh-navy-100: #e4ecf6;
  --dh-navy-200: #c6d7ea;
  --dh-navy-300: #9bb8d7;
  --dh-navy-400: #6690bd;
  --dh-navy-500: #3f6fa3;
  --dh-navy-600: #2a5686;
  --dh-navy-700: #1d4269;
  --dh-navy-800: #16324f;
  --dh-navy-900: #0f2438;

  /* 다크 전용 — 바탕 계열 (푸른 기가 도는 짙은 색) */
  --dh-dark-bg:    #0f1b2d;   /* 기본 바탕 */
  --dh-dark-soft:  #14243a;   /* 구역 구분 */
  --dh-dark-card:  #1a2c45;   /* 카드·떠 있는 면 */
  --dh-dark-line:  #263c58;   /* 경계선 */
  --dh-dark-line2: #1e3049;   /* 옅은 구분선 */

  /* 중립 */
  --dh-gray-0:   #ffffff;
  --dh-gray-50:  #f7f9fb;
  --dh-gray-100: #eef1f5;
  --dh-gray-200: #e2e6ec;
  --dh-gray-300: #cbd2dc;
  --dh-gray-400: #6d7684;   /* 흐린 글 — 흰 바탕에서 4.5:1 확보한 값 */
  --dh-gray-500: #6b7684;
  --dh-gray-600: #55606f;
  --dh-gray-700: #3c4553;
  --dh-gray-800: #252b36;
  --dh-gray-900: #14161c;

  /* 다크 전용 — 글자 계열 (순백을 피해 눈부심 완화) */
  --dh-dark-ink:   #e8eef6;
  --dh-dark-sub:   #b3c2d4;   /* 보조 — 대비 확보한 값 */
  --dh-dark-faint: #8598ae;   /* 흐림 — 그래도 4.5:1 이상 */

  /* 신호색 — 모드별로 밝기를 달리한다 */
  --dh-ok-light:    #1f7a4d;   --dh-ok-dark:    #4ade80;
  --dh-warn-light:  #9a6b00;   --dh-warn-dark:  #fbbf24;
  --dh-error-light: #b3261e;   --dh-error-dark: #f87171;


  /* ══ 규격 — 모드와 무관 ═══════════════════════════ */

  /* 글자 크기 — 이 여덟 가지 외에는 쓰지 않는다 */
  --dh-fs-xs:   12.5px;
  --dh-fs-sm:   14px;
  --dh-fs-md:   15px;
  --dh-fs-base: 16px;
  --dh-fs-lg:   18px;
  --dh-fs-h2:   23px;
  --dh-fs-h1:   30px;
  --dh-fs-hero: 38px;

  /* 굵기 3단 */
  --dh-fw-normal: 400;
  --dh-fw-semi:   600;
  --dh-fw-bold:   700;

  /* 여백 — 4·8 배수 */
  --dh-sp-1: 4px;   --dh-sp-2: 8px;   --dh-sp-3: 12px;  --dh-sp-4: 16px;
  --dh-sp-5: 24px;  --dh-sp-6: 32px;  --dh-sp-7: 48px;  --dh-sp-8: 64px;

  --dh-radius:     6px;
  --dh-radius-lg:  10px;
  --dh-width-max:  1120px;
  --dh-width-text: 800px;
  --dh-head-h:     68px;

  --dh-motion-fast: 120ms ease;
  --dh-motion-base: 180ms ease;

  --dh-font: Pretendard, -apple-system, BlinkMacSystemFont,
             "Malgun Gothic", "맑은 고딕", sans-serif;
  --dh-font-mono: "D2Coding", ui-monospace, SFMono-Regular, Menlo, monospace;


  /* ══ 역할 지정 — 라이트 (기본) ════════════════════ */

  --dh-bg:          var(--dh-gray-0);
  --dh-bg-soft:     var(--dh-gray-50);
  --dh-bg-accent:   var(--dh-navy-50);
  --dh-bg-card:     var(--dh-gray-0);
  --dh-bg-deep:     var(--dh-navy-800);
  --dh-bg-head:     rgba(255, 255, 255, .96);

  --dh-ink:         var(--dh-gray-900);
  --dh-ink-sub:     var(--dh-gray-600);
  --dh-ink-faint:   var(--dh-gray-400);
  --dh-ink-on-deep: var(--dh-gray-0);

  --dh-line:        var(--dh-gray-200);
  --dh-line-soft:   var(--dh-gray-100);
  --dh-line-accent: var(--dh-navy-200);

  --dh-accent:      var(--dh-navy-800);   /* 단추 바탕 — 흰 글자와 4.5:1 확보 */
  --dh-accent-deep: var(--dh-navy-900);   /* 눌림 */
  --dh-accent-ink:  var(--dh-gray-0);     /* 단추 위 글자 */
  --dh-accent-sub:  var(--dh-navy-500);   /* 링크 */
  --dh-accent-bg:   var(--dh-navy-100);   /* 강조 배경 */

  --dh-focus:       var(--dh-navy-500);
  --dh-ok:          var(--dh-ok-light);
  --dh-warn:        var(--dh-warn-light);
  --dh-error:       var(--dh-error-light);

  --dh-shadow-sm: 0 1px 2px rgba(15, 36, 56, .06);
  --dh-shadow-md: 0 4px 16px rgba(15, 36, 56, .08);

  color-scheme: light;
}


/* ══ 역할 지정 — 다크 ═══════════════════════════════
   ① 이용자가 직접 고른 경우  [data-theme="dark"]
   ② 고르지 않았으면 기기 설정을 따른다 (아래 media 규칙) */

:root[data-theme="dark"] {
  --dh-bg:          var(--dh-dark-bg);
  --dh-bg-soft:     var(--dh-dark-soft);
  --dh-bg-accent:   var(--dh-dark-card);
  --dh-bg-card:     var(--dh-dark-card);
  --dh-bg-deep:     #0a1422;
  --dh-bg-head:     rgba(15, 27, 45, .94);

  --dh-ink:         var(--dh-dark-ink);
  --dh-ink-sub:     var(--dh-dark-sub);
  --dh-ink-faint:   var(--dh-dark-faint);
  --dh-ink-on-deep: var(--dh-dark-ink);

  --dh-line:        var(--dh-dark-line);
  --dh-line-soft:   var(--dh-dark-line2);
  --dh-line-accent: var(--dh-navy-600);

  /* ★ 네이비 원색은 어두운 바탕에서 안 보인다 — 밝은 파랑으로 올린다 */
  --dh-accent:      var(--dh-navy-400);
  --dh-accent-deep: var(--dh-navy-300);
  --dh-accent-ink:  #0b1524;              /* 밝은 단추 위에는 짙은 글자 */
  --dh-accent-sub:  var(--dh-navy-300);   /* 링크 */
  --dh-accent-bg:   #1b3050;

  --dh-focus:       var(--dh-navy-300);
  --dh-ok:          var(--dh-ok-dark);
  --dh-warn:        var(--dh-warn-dark);
  --dh-error:       var(--dh-error-dark);

  /* 어두운 화면에서는 그림자가 보이지 않는다 — 밝기 층으로 깊이를 낸다 */
  --dh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --dh-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);

  color-scheme: dark;
}

/* 이용자가 고르지 않았고(기기 설정 따름) 기기가 다크일 때 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dh-bg:          var(--dh-dark-bg);
    --dh-bg-soft:     var(--dh-dark-soft);
    --dh-bg-accent:   var(--dh-dark-card);
    --dh-bg-card:     var(--dh-dark-card);
    --dh-bg-deep:     #0a1422;
    --dh-bg-head:     rgba(15, 27, 45, .94);

    --dh-ink:         var(--dh-dark-ink);
    --dh-ink-sub:     var(--dh-dark-sub);
    --dh-ink-faint:   var(--dh-dark-faint);
    --dh-ink-on-deep: var(--dh-dark-ink);

    --dh-line:        var(--dh-dark-line);
    --dh-line-soft:   var(--dh-dark-line2);
    --dh-line-accent: var(--dh-navy-600);

    --dh-accent:      var(--dh-navy-400);
    --dh-accent-deep: var(--dh-navy-300);
    --dh-accent-ink:  #0b1524;
    --dh-accent-sub:  var(--dh-navy-300);
    --dh-accent-bg:   #1b3050;

    --dh-focus:       var(--dh-navy-300);
    --dh-ok:          var(--dh-ok-dark);
    --dh-warn:        var(--dh-warn-dark);
    --dh-error:       var(--dh-error-dark);

    --dh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --dh-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);

    color-scheme: dark;
  }
}

/* 동작 최소화를 요청한 이용자 존중 */
@media (prefers-reduced-motion: reduce) {
  :root { --dh-motion-fast: 0ms; --dh-motion-base: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}