/* ==========================================================================
   스마트파트너스 디자인 기준 v1 — tokens.css
   허브(smartpartners.kr) 7페이지 + 도구 4개가 함께 쓰는 "한 벌의 값".
   - 이 파일이 원본입니다. hub/tokens.css, tools/set-builder/tokens.css 는 같은 내용의 사본,
     lead-notify/admin.html(구글 Apps Script는 파일 1개만 쓰므로)과 hub-assistant/assistant.css
     (다른 페이지에 붙는 위젯이므로)는 필요한 값만 옮겨 적은 사본입니다.
     값을 바꾸면 사본(hub/tokens.css, tools/set-builder/tokens.css)도 똑같이 바꾸세요.
   - 이름 규칙: --sp-<분류>-<이름>. 화면에서는 "의미 토큰"(--sp-bg, --sp-text …)만 쓰고,
     색상표(원색 토큰)는 의미 토큰을 만들 때만 씁니다. 다크 모드는 의미 토큰만 바꿉니다.
   ========================================================================== */

:root {
  /* ── 1. 색상표(원색) ───────────────────────────────────────────── */
  /* 네이비: 신뢰·회사 얼굴. 800이 기본 브랜드 색 */
  --sp-navy-950: #0f1a33;
  --sp-navy-900: #14234a;
  --sp-navy-800: #1b2f5c;   /* 브랜드 네이비 */
  --sp-navy-700: #243f78;
  --sp-navy-600: #2f5293;
  --sp-navy-300: #9fb0d2;
  --sp-navy-200: #c9d4ea;
  --sp-navy-100: #e3e9f4;
  --sp-navy-50:  #f1f4fa;

  /* 주황: 현장감·행동 유도. 한 화면에 "가장 중요한 한 가지"에만 */
  --sp-orange-700: #b5521b; /* 흰 바탕 위 주황 글자(대비 5.0) */
  --sp-orange-600: #d4621f; /* 눌렀을 때 */
  --sp-orange-500: #e8742a; /* 브랜드 주황(면·선·버튼 바탕) */
  --sp-orange-400: #f0894a; /* 다크 바탕 위 주황 */
  --sp-orange-200: #ffb27a; /* 네이비 바탕 위 주황 글자(대비 7.4) */
  --sp-orange-100: #fbe3cf;
  --sp-orange-50:  #fdf1e7;

  /* 회색(살짝 푸른 기) */
  --sp-gray-900: #1a2233;   /* 본문 글자 */
  --sp-gray-700: #4a5468;   /* 보조 글자(흰 바탕 7.6 / 안개 바탕 7.0) */
  --sp-gray-500: #6b7489;   /* 장식·아이콘 전용(글자에 쓰지 않음) */
  --sp-gray-300: #c3ccda;
  --sp-gray-200: #dbe1ea;
  --sp-gray-100: #eef2f8;
  --sp-gray-50:  #f4f6fa;
  --sp-white:    #ffffff;

  /* 상태 */
  --sp-green-700: #1f7a4d;
  --sp-green-50:  #e9f6ef;
  --sp-red-700:   #b42318;
  --sp-red-50:    #fdecea;
  --sp-kakao:     #fee500;  /* 카카오 공식 노랑(글자 #191919) */
  --sp-kakao-ink: #191919;

  /* ── 2. 의미 토큰(밝은 화면 = 기본) ─────────────────────────────── */
  --sp-bg:            var(--sp-white);     /* 페이지 바탕 */
  --sp-bg-soft:       var(--sp-gray-50);   /* 구획 바탕(안개) */
  --sp-bg-tint:       var(--sp-navy-50);   /* 네이비 기운 구획(머리 영역) */
  --sp-surface:       var(--sp-white);     /* 카드 바탕 */
  --sp-surface-2:     var(--sp-gray-50);   /* 카드 안 구획 */
  --sp-text:          var(--sp-gray-900);
  --sp-text-muted:    var(--sp-gray-700);
  --sp-heading:       var(--sp-navy-800);  /* 제목 글자 */
  --sp-line:          var(--sp-gray-200);
  --sp-line-strong:   var(--sp-gray-300);
  --sp-brand:         var(--sp-navy-800);
  --sp-on-brand:      var(--sp-white);
  --sp-accent:        var(--sp-orange-500);
  --sp-accent-hover:  var(--sp-orange-600);
  --sp-on-accent:     #14213d;             /* 주황 위 글자(대비 5.3) */
  --sp-accent-text:   var(--sp-orange-700);/* 글자로 쓰는 주황 */
  --sp-accent-soft:   var(--sp-orange-50);
  --sp-link:          var(--sp-navy-700);
  --sp-focus:         var(--sp-orange-500);
  --sp-field-bg:      var(--sp-white);
  --sp-field-line:    #8793a8;   /* 입력칸 테두리(흰 바탕 대비 3.1, 부품 기준 3:1) */
  --sp-danger:        var(--sp-red-700);
  --sp-danger-soft:   var(--sp-red-50);
  --sp-ok:            var(--sp-green-700);
  --sp-ok-soft:       var(--sp-green-50);

  /* 다크(네이비 밤) 값 — 의미 토큰 이름 앞에 dk- */
  --sp-dk-bg:          #0f1a33;
  --sp-dk-bg-soft:     #132142;
  --sp-dk-surface:     #182a4f;
  --sp-dk-surface-2:   #1e3260;
  --sp-dk-text:        #eef2f9;
  --sp-dk-text-muted:  #b3bdd1;
  --sp-dk-heading:     #ffffff;
  --sp-dk-line:        #2c3f68;
  --sp-dk-line-strong: #3d5280;
  --sp-dk-accent:      var(--sp-orange-400);
  --sp-dk-on-accent:   #14213d;
  --sp-dk-accent-text: var(--sp-orange-200);
  --sp-dk-link:        var(--sp-orange-200);

  /* ── 3. 글꼴 ───────────────────────────────────────────────────── */
  --sp-font: "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --sp-font-num: "Noto Sans KR", system-ui, sans-serif; /* 숫자는 font-variant-numeric: tabular-nums */
  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-bold: 700;

  /* 글자 크기 — 본문 17px, 긴 글 18px, 가장 작은 글자 15px */
  --sp-fs-caption: 15px;   /* 출처·각주·작은 표지(이보다 작게 쓰지 않음) */
  --sp-fs-small:   16px;   /* 카드 안 설명·표 보조 */
  --sp-fs-body:    17px;   /* 본문 기본 */
  --sp-fs-body-lg: 18px;   /* 머리말 설명·긴 글 */
  --sp-fs-lead:    clamp(18px, 1rem + 0.35vw, 20px);
  --sp-fs-h4:      19px;
  --sp-fs-h3:      clamp(20px, 1.1rem + 0.5vw, 23px);
  --sp-fs-h2:      clamp(27px, 1.15rem + 1.6vw, 40px);
  --sp-fs-h1:      clamp(31px, 1.2rem + 2.6vw, 52px);
  --sp-fs-stat:    clamp(36px, 1.6rem + 1.8vw, 52px);

  --sp-lh-body: 1.75;
  --sp-lh-tight: 1.35;
  --sp-lh-heading: 1.3;
  --sp-ls-heading: -0.025em;
  --sp-ls-label: 0.04em;

  /* ── 4. 여백(4px 단위) ─────────────────────────────────────────── */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-7: 32px;
  --sp-space-8: 40px;
  --sp-space-9: 48px;
  --sp-space-10: 64px;
  --sp-space-11: 80px;
  --sp-space-12: 112px;
  --sp-section-y: clamp(64px, 8vw, 112px);   /* 구획 위아래 */
  --sp-gutter: clamp(16px, 4vw, 40px);       /* 화면 좌우(휴대폰 16px) */
  --sp-container: 1200px;
  --sp-measure: 38em;                        /* 긴 글 한 줄 최대 길이 */

  /* ── 5. 모서리 ─────────────────────────────────────────────────── */
  --sp-radius-xs: 4px;    /* 표지(태그) */
  --sp-radius-sm: 8px;    /* 입력칸·작은 버튼 */
  --sp-radius-md: 10px;   /* 버튼 */
  --sp-radius-lg: 14px;   /* 카드 */
  --sp-radius-xl: 20px;   /* 큰 판(폼 카드·사진) */
  --sp-radius-pill: 999px;

  /* ── 6. 그림자(네이비 기운, 아주 옅게) ─────────────────────────── */
  --sp-shadow-xs: 0 1px 2px rgba(20, 35, 74, 0.06);
  --sp-shadow-sm: 0 1px 2px rgba(20, 35, 74, 0.05), 0 2px 8px -2px rgba(20, 35, 74, 0.08);
  --sp-shadow-md: 0 2px 4px rgba(20, 35, 74, 0.04), 0 12px 28px -10px rgba(20, 35, 74, 0.18);
  --sp-shadow-lg: 0 4px 10px rgba(20, 35, 74, 0.05), 0 28px 56px -18px rgba(20, 35, 74, 0.28);
  --sp-shadow-bar: 0 -6px 20px rgba(20, 35, 74, 0.10);
  --sp-ring: 0 0 0 3px rgba(232, 116, 42, 0.35);

  /* ── 7. 부품 치수 ──────────────────────────────────────────────── */
  --sp-btn-h: 52px;        /* 기본 버튼 높이 */
  --sp-btn-h-sm: 44px;     /* 작은 버튼(손가락 최소 44px) */
  --sp-btn-h-lg: 58px;     /* 큰 행동 버튼 */
  --sp-field-h: 52px;      /* 입력칸 높이 */
  --sp-header-h: 76px;
  --sp-bar-h: 72px;        /* 하단 고정바 높이(도우미 위젯이 이 위에 앉음) */

  --sp-ease: cubic-bezier(.2, .7, .2, 1);
  --sp-dur: .18s;
}

/* 다크(네이비 밤): 의미 토큰만 바꿉니다.
   - 허브: 밤 시간 "화면 어둡게"일 때 머리·주요 구획·바닥·하단바에 적용
   - 도구: <html class="sp-auto-dark"> 이면 기기 설정(prefers-color-scheme: dark)을 따름 */
.sp-dark {
  --sp-bg: var(--sp-dk-bg);
  --sp-bg-soft: var(--sp-dk-bg-soft);
  --sp-bg-tint: var(--sp-dk-bg-soft);
  --sp-surface: var(--sp-dk-surface);
  --sp-surface-2: var(--sp-dk-surface-2);
  --sp-text: var(--sp-dk-text);
  --sp-text-muted: var(--sp-dk-text-muted);
  --sp-heading: var(--sp-dk-heading);
  --sp-line: var(--sp-dk-line);
  --sp-line-strong: var(--sp-dk-line-strong);
  --sp-brand: var(--sp-navy-200);
  --sp-on-brand: var(--sp-navy-950);
  --sp-accent: var(--sp-dk-accent);
  --sp-accent-hover: var(--sp-orange-200);
  --sp-on-accent: var(--sp-dk-on-accent);
  --sp-accent-text: var(--sp-dk-accent-text);
  --sp-accent-soft: #3a2a22;
  --sp-link: var(--sp-dk-link);
  --sp-focus: var(--sp-orange-200);
  --sp-field-bg: var(--sp-dk-surface);
  --sp-field-line: #7f93c0;
  --sp-danger: #ffb4a8;
  --sp-danger-soft: #3d1f1f;
  --sp-ok: #8fdcb2;
  --sp-ok-soft: #173a2c;
  --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --sp-shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
  --sp-shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root.sp-auto-dark {
    --sp-bg: var(--sp-dk-bg);
    --sp-bg-soft: var(--sp-dk-bg-soft);
    --sp-bg-tint: var(--sp-dk-bg-soft);
    --sp-surface: var(--sp-dk-surface);
    --sp-surface-2: var(--sp-dk-surface-2);
    --sp-text: var(--sp-dk-text);
    --sp-text-muted: var(--sp-dk-text-muted);
    --sp-heading: var(--sp-dk-heading);
    --sp-line: var(--sp-dk-line);
    --sp-line-strong: var(--sp-dk-line-strong);
    --sp-brand: var(--sp-navy-200);
    --sp-on-brand: var(--sp-navy-950);
    --sp-accent: var(--sp-dk-accent);
    --sp-accent-hover: var(--sp-orange-200);
    --sp-on-accent: var(--sp-dk-on-accent);
    --sp-accent-text: var(--sp-dk-accent-text);
    --sp-accent-soft: #3a2a22;
    --sp-link: var(--sp-dk-link);
    --sp-focus: var(--sp-orange-200);
    --sp-field-bg: var(--sp-dk-surface);
    --sp-field-line: #7f93c0;
    --sp-danger: #ffb4a8;
    --sp-danger-soft: #3d1f1f;
    --sp-ok: #8fdcb2;
    --sp-ok-soft: #173a2c;
    --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --sp-shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
    --sp-shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}