/* ===========================================================================
   tokens.css — 디자인 토큰

   ★★★ 2026-09-08 — **색을 우리 것으로 갈았다.**

   그 전까지 이 파일의 색은 **전부 원본(haetbit-gil.com) 실측값**이었다.
   모사로 시작했으니 당연했지만, 사용자가 짚었다 —
   *"지금 색 구성이 햇빛길과 너무 유사해. 좀 화사하게 바꿔보자."*

   ⚠️⚠️ **이름은 하나도 안 바꿨다 — 값만 바꿨다.** 화면 23개(루트 7 · 콘솔 16)가
      이 토큰을 500번 넘게 부른다. 이름을 건드리면 스타일이 **조용히 사라진다.**

   ⚠️ **치수·타이포는 여전히 원본 실측값이다.** 눈대중으로 바꾸지 말고
      원본을 다시 재거나 `_ref/orig-*.png` 와 대조한다.

   ⭐ 방향 — 「맑은 하늘과 햇빛」. 원본은 **강철 남색이 지배하고 회색 면이 받치는**
     구성이라 무겁다. 셋을 바꿨다:
       ① 딥을 **인디고**로 — 강철 남색과 눈에 띄게 갈린다
       ② 주조를 **밝은 블루**로 — 남색이 아니라 이쪽이 브랜드다
       ③ 회색 면을 **색면 넷**으로 — 하늘·민트·앰버·바이올렛

   ⚠️⚠️ **그림 22장이 옛 색으로 만들어져 있다**(남색 #1b3a66 · 파랑 #3d83e4 ·
      주황 #ff5e2e). 생성 AI 는 같은 그림을 다시 안 주므로 **그림에 맞춰 색을 골랐다** —
      인디고·블루·코랄이 전부 그림 안의 색과 같은 계열이다. 여기서 더 멀리 가면
      (청록·자주) 그림이 통째로 겉돈다. **색은 그림이 허락하는 만큼만 움직인다.**
   =========================================================================== */
:root {
  /* ── 색 ─────────────────────────────────────────────────────────────── */
  --c-bg: #ffffff;
  --c-text: #1c2333;              /* body 기본 — 살짝 남색기 (순검정은 딱딱하다) */
  --c-heading: #101a3d;           /* 섹션 제목 */
  --c-navy: #1b2a5e;              /* ★ 브랜드 딥 — 인디고. 원본 #1b3a66(강철 남색)과 갈린다 */
  --c-navy-deep: #0d1430;         /* 가장 어두운 면 */
  /* ⚠️ **대비를 재서 정한 값이다.** 원본 #8c959c 는 흰 바탕에서 3.05:1 이라
     13px 설명글이 잘 안 읽혔고, 색면(-pale) 위에서는 2.87 까지 떨어졌다.
     4.68(흰) · 4.16~4.32(색면)로 올렸다 — AA 4.5 에 색면에서만 조금 못 미친다.
     ⚠️ 더 어둡게 하면 본문과 구별이 사라져 **위계가 무너진다**(화사함도 잃는다).
        여기가 읽힘과 가벼움이 만나는 자리다. */
  --c-muted: #6b7489;             /* 작은 안내 문구 */
  --c-subtle: #5a6685;            /* 비활성 탭 */
  --c-blue: #2f6bf0;              /* ★ 주조색 — 밝고 맑은 브랜드 블루 */
  --c-blue-pale: #d4e4ff;         /* 뱃지 배경 */
  --c-orange: #ff6a2b;            /* 액센트 주황 — 그림 속 주황과 같은 계열 */
  --c-surface-alt: #eef4ff;       /* 판 · 문제 카드 — ★ 회색이 아니라 하늘빛 */
  --c-surface-gray: #dce8fb;      /* 솔루션 카드(견적 검토) */
  --c-blue-solid: #2f6bf0;        /* 솔루션 카드(사후 관리) */
  --c-cream: #fff6ed;             /* 주황 계열 연한 배경 */
  --c-scrim: rgb(13 20 48 / 68%); /* 히어로 사진 위 오버레이 · 하단 CTA 바 */
  --c-line: #e3e9f2;              /* 카드 테두리 */
  --c-footer-bg: #ffffff;         /* 원본 푸터는 흰 배경이다 */
  --c-footer-text: #757d8f;       /* ⚠️ 법인명·등록번호가 앉는다 — 원본 #babec4 는 1.87:1 로
                                     사실상 안 읽혔다. 4.0:1 로 올렸다(푸터는 조용해야 하므로
                                     본문만큼 진하게는 안 한다). */

  /* ── ★ 색면 넷 — 「화사」의 큰 몫이 여기서 나온다 ──────────────────────────
     회색 카드를 색으로 가르면 밝아지고, 동시에 **뜻이 생긴다**:
       민트=좋음 · 앰버=확인할 것 · 코랄=막힐 수 있다 · 바이올렛=참고

     ⚠️⚠️ **색만으로 뜻을 나르지 않는다.** 판정 태그는 글자를 함께 적는다 —
        색을 못 가리는 사람이 있고, **인쇄하면 전부 회색이 된다**(검토 결과는
        인쇄해서 들고 다니는 문서다).
     ⚠️ `-pale` 은 면, `-line` 은 테두리, 민짜는 **글자**다. 글자로 쓸 값이라
        흰 바탕에서 읽히도록 어둡게 잡았다(앰버가 특히 그렇다). */
  --c-mint: #0f9d76;
  --c-mint-pale: #e4f7f0;
  --c-mint-line: #b6e6d5;
  --c-amber: #cf8306;
  --c-amber-pale: #fff5e0;
  --c-amber-line: #f3ddab;
  --c-coral: #dc4f36;
  --c-coral-pale: #ffece7;
  --c-coral-line: #f6c8bc;
  --c-violet: #6b4fe0;
  --c-violet-pale: #efeaff;
  --c-violet-line: #d5cbf7;
  --c-sky-pale: #eaf2ff;
  --c-sky-line: #cadffd;
  --c-sky-wash: #f7faff;
  --c-blue-soft: #8fb6f7;         /* 중간 밝기 파랑 — 파동 점·보조 테두리 */
  --c-surface-soft: #f6f7fc;      /* 목록 항목·표 바탕 — 색면(-pale)보다 한 단계 옅다 */

  /* ── ★ 글자용 ink · 가장 옅은 wash (2026-09-08 콘솔을 맞추며 생겼다) ────────
     ⚠️⚠️ 민짜(`--c-mint` 등)를 색면 위 **글자**로 쓰면 대비가 3점대로 떨어진다.
        콘솔은 원래 계열마다 진한 글자값을 따로 갖고 있었다(`#8a5a12` 등) —
        그걸 없애면 표가 안 읽힌다. 그래서 **역할이 다섯**이다:
          ink(글자) · 민짜(아이콘·강조) · line(테두리) · pale(카드 면) · wash(줄 면)
     ★ 실측 — ink 는 제 pale 면 위에서 5.5~7.0:1 이다(옛 콘솔 값과 같은 수준). */
  --c-mint-ink: #0f6b4a;
  --c-amber-ink: #8a5a12;
  --c-coral-ink: #a3382a;
  --c-violet-ink: #553aa8;
  --c-orange-ink: #c2440e;       /* 크림 면 위 주황 글자 — 민짜는 2.67:1 로 안 읽힌다 */
  --c-mint-wash: #f4fbf8;
  --c-amber-wash: #fff9f0;
  --c-coral-wash: #fff6f4;
  --c-violet-wash: #f8f5ff;

  /* ── ★★ 회색 계단 — **인디고 기**를 넣어 브랜드와 같은 계열로 (2026-09-08) ──
     콘솔이 쓰던 회색은 색조 210°(강철·청록 기)라 새 브랜드(224°)와 어긋났다.
     밝기와 채도는 **콘솔이 실제로 쓰던 층을 그대로** 두고 색조만 돌렸다 —
     그래야 층이 안 무너진다(근백색이 여섯 단계나 되는 데는 이유가 있다).
     ⚠️ 근백색은 채도를 낮게 둔다. 높으면 흰 카드가 **파래 보인다.** */
  --c-g900: #181e30;   /* 가장 진한 글자 */
  --c-g800: #373f52;
  --c-g700: #52596b;
  --c-g600: #6a7080;
  --c-g500: #818798;
  --c-g400: #979cab;
  --c-g300: #aeb3c2;
  --c-g250: #c6cad8;
  --c-g200: #d8dde8;   /* 테두리 */
  --c-g150: #e7eaf3;
  --c-g100: #f1f3f9;   /* 면 */
  --c-g75: #f6f7fc;
  --c-g50: #fafbfe;    /* 가장 옅은 면 */

  /* 슬라이드 배경 (원본 3장 — ★ 평면색에서 그라디언트로) */
  --g-slide-1: linear-gradient(140deg, #1b2a5e 0%, #2f6bf0 100%);
  --g-slide-2: linear-gradient(#9fd0ff 0%, #e7f2ff 100%);
  --g-slide-3: linear-gradient(140deg, #6b4fe0 0%, #a172ec 100%);

  /* ★ 페이지 바탕에 아주 옅게 까는 빛 — 흰 일변도를 깬다.
     ⚠️ **아주 옅어야 한다.** 진하면 글자가 안 읽히고 인쇄에서 얼룩이 된다. */
  --g-wash: radial-gradient(1180px 520px at 10% -6%, #e9f1ff 0%, transparent 62%),
            radial-gradient(980px 460px at 94% 1%, #fff1e4 0%, transparent 58%);

  /* CTA 버튼 — ★ 붉은 주황(#ff7d32→#ff3228)에서 **햇살 앰버→코랄** 로.
     원본과 가장 크게 갈리는 자리다. 태양광이니 해의 색이 맞다. */
  --g-cta: linear-gradient(to right top, #ffa32b 0%, #ff5f3d 100%);

  /* ── 타이포 ─────────────────────────────────────────────────────────── */
  /* 원본은 Pretendard Variable. 폰트만 외부 요청을 허용한다(형제 bwinStyle 과 같은 예외).
     용량이 문제가 되면 쓰이는 글자만 로컬 서브셋으로 만들어 assets/fonts/ 에 둔다. */
  --font: 'Pretendard Variable', Pretendard, -apple-system, system-ui,
          'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  --fs-hero: 52px;                /* 페이지 최상단 타이틀 */
  --fs-h2: 48px;                  /* 섹션 제목 */
  --fs-slide: 48px;               /* 슬라이드 제목 */
  --fs-lead: 28px;                /* 타이틀 위 안내 */
  --fs-xl: 24px;
  --fs-lg: 20px;
  --fs-md: 18px;
  --fs-base: 16px;
  --fs-sm: 15px;
  --fs-xs: 14px;

  /* ── 레이아웃 ───────────────────────────────────────────────────────── */
  --w-container: 1320px;          /* 콘텐츠 폭 */
  --pad-page: 40px;               /* 페이지 좌우 여백 */
  --h-header: 100px;              /* 헤더 높이 (fixed) */
  --h-slide: 566px;               /* 캐러셀 높이 */

  --r-card: 12px;
  --r-md: 16px;                   /* 문제 카드 */
  --r-lg: 24px;                   /* 솔루션 카드 */
  --r-btn: 6px;
  --r-chip: 4px;
  --r-pill: 60px;

  --fs-hero-lg: 64px;             /* 서브페이지 히어로 제목 */
  --h-hero: 784px;                /* 서브페이지 히어로 높이 */

  --gap-card: 20px;
  --sec-gap: 200px;               /* 섹션 사이 (원본 padding-top) */
}