@charset "UTF-8";
/* ==========================================================================
   전국무지개퀵화물(무지개퀵) — 디자인 토큰
   file : www/assets/css/tokens.css
   ver  : 2.1.0 / 2026-08-23 / web-designer  (팔레트 밝기 재설계 + 큰 면 색 통일)
   근거 : docs/03-decisions.md D-004(컬러) · D-005(회사명) · D-010(IA)
          docs/20-design-system.md (각 결정의 상세 근거)

   [v2.1.0 — 큰 면의 색을 하나로 통일]
   v2.0 배포 후 고객 지적: "베이스 색상에 중간에 이상한 색상 들어간 게 맘에 안 든다."
   실측해 보니 한 화면에 파랑이 3종이었다.
     헤더 #1E3A73(저채도 네이비) / 히어로 그라디언트 중간색 #1A43AE 계열(팔레트에 없는 색, 화면의 10%)
     / 푸터 #16294F. 인접한 헤더와 히어로의 채도가 15%p 어긋나 "중간에 다른 색이 끼었다"로 읽혔다.
   원인은 두 가지였고 둘 다 내 판단 착오다.
     (1) 큰 면에 그라디언트를 썼다 → 정지점 사이에 팔레트에 없는 색이 생긴다. 화면 최대 면적을
         차지하는 색이 토큰으로 정의되지 않은 상태였다.
     (2) 히어로만 밝히고 헤더는 네이비로 남겼다 → 같은 계열이 아니라 다른 색 두 개가 맞닿았다.
   처방:
     (a) 큰 면의 그라디언트를 전부 없애고 단색으로 간다. --gradient-navy 는 이제 단색이다.
     (b) 네이비 스케일과 블루 스케일의 색상각을 222° 로 통일하고 채도 곡선을 이어 붙였다.
         네이비는 이제 "다른 색"이 아니라 브랜드 블루의 어두운 구간이다.
     (c) 헤더·히어로·CTA 밴드가 전부 --navy-700(=--blue-800, #1A44B4) 한 값이다.
         푸터만 같은 색상각의 어두운 단계 #122D6E. 큰 면은 파랑 두 단계로만 이루어진다.
   실측 결과(1280x2400 index.html): 흰색 50.6% / 브랜드 면색 #1A44B4 계열 27.1% /
     옅은 블루 #EFF5FF 10.7% / 푸터 #122D6E 1.9%. 팔레트 밖 색 0%.

   [v2.0.0 재설계 — 진단과 처방]
   고객 피드백은 "너무 칙칙하다" 였다. 색상 자체가 아니라 아래 3가지가 원인이었다.
   (1) ★최대 원인 — 히어로의 오버레이가 rgba(13,25,41,.86~.92) 의 "거의 검정"이었다.
       첫 화면(1440x900)의 88%가 이 한 장의 먹빛 면이다. 색을 아무리 바꿔도 여기가
       검으면 사이트 전체 인상이 어둡다.
   (2) 큰 면적을 저채도 네이비(#1E3559, S49%/L23%) 단색으로 채웠다. 저명도 구간에서
       채도는 지각되지 않는다 — 결과적으로 "회색 남색"으로 읽힌다.
   (3) 그림자가 진하고(.06~.14) radius 가 작아, 흰 배경 위 카드마다 회색 테가 생겼다.
   처방은 "전부 교체"가 아니라 "면적 재배치"다. 어두운 면을 화면의 위아래 끝
   (헤더·푸터)으로만 밀어내고, 중앙의 큰 면적은 로열블루 + 흰색이 맡는다.
   네이비는 없애지 않는다 — D-004 의 신뢰 축이자 고객이 "전체를 다 바꿀 필요는 없다"고 했다.

   [사용 규칙]
   - 모든 색·간격·타이포 값은 이 파일의 커스텀 프로퍼티만 참조한다. 하드코딩 금지. (CLAUDE.md §4)
   - 대비비는 WCAG 2.1 상대휘도 공식으로 실측한 값이다. AA 본문 4.5:1 / 큰글씨·UI 3:1 기준.
   - "위" = 해당 색을 배경으로 썼을 때, "on" = 해당 색 위에 올리는 글자색.

   [다크모드 결정 — 1차 미지원 / 근거]
   1. 이 사이트는 브로슈어형 회사 홈페이지다. 체류 시간이 짧고(30초~2분) 야간 장시간 열람 사용 패턴이 없다.
   2. 브랜드 위계가 "흰 본문 + 네이비 헤더/푸터"의 명도 대비로 성립한다. 다크모드에서는 네이비가
      배경에 동화되어 헤더·푸터·CTA 밴드의 구획이 무너지고 "전문 회사 느낌"(고객 1순위 요구)이 훼손된다.
   3. 유지 인력이 없는 소규모 사업자다. 토큰 세트를 2벌 운영하면 이후 페이지 추가 시 색 누락이 확실히 발생한다.
   4. 대신 아래 3가지를 한다.
      (a) color-scheme: light 를 명시해 브라우저/OS 강제 반전으로 레이아웃이 깨지는 것을 방지한다.
      (b) 다크 토큰 삽입 지점을 [data-theme="dark"] 훅으로 파일 하단에 예약해 둔다.
          G4(React 전환) 단계에서 이 블록만 채우면 전 페이지가 대응된다 — 컴포넌트 CSS는 손대지 않는다.
      (c) prefers-contrast / prefers-reduced-motion / forced-colors 는 1차부터 대응한다.
   ========================================================================== */

:root {
  color-scheme: light; /* OS 다크 강제 반전 차단 — 위 [다크모드 결정] 4-(a) */

  /* ======================================================================
     1. 컬러 — 원시 스케일 (raw scale)
     ====================================================================== */

  /* ---- 1-1. 네이비 (주색 / Primary) --------------------------------------
     D-004 확정. 국내 물류·운송 B2B에서 신뢰·안정의 관습색이다.
     ★ v2 재조정 — 역할은 그대로 두고 "채도"만 올렸다.
       기존 #1E3559 는 S49%/L23% 로, 저명도 구간에서 채도가 지각되지 않아 실제로는
       "회색 섞인 남색"으로 읽혔다. 이것이 고객이 말한 칙칙함의 1차 원인이다.
       색상각을 218° → 220° 로 옮기고 각 단계의 채도를 10~20%p 올려, 같은 어두움에서도
       "맑은 딥블루"로 읽히게 했다. 명도는 헤더/푸터 대비를 지키기 위해 거의 유지한다.
     ★ 200/300 은 v2에서 뚜렷하게 밝아졌다. 큰 면적 배경이 로열블루(#1A44B4)로 밝아지면서
       그 위에 얹는 보조 텍스트가 4.5:1 을 넘으려면 최소 휘도 0.552 가 필요하기 때문이다.
       (실측: 아래 각 줄의 수치는 tools/contrast 스크립트로 산출) */
  --navy-50:  #F5F8FE; /* 섹션 교차 배경(연한 톤 구분)   / on: navy-800 12.2:1 AAA */
  --navy-100: #E8EEFC; /* 신뢰 스트립 배경, 표 헤더 배경   / on: navy-800 11.1:1 AAA */
  --navy-200: #D4DEF7; /* ★ 브랜드 면 위 본문(히어로 리드·푸터·밴드). on 브랜드면 5.65:1 AA */
  --navy-300: #BDCCEF; /* ★ 브랜드 면 위 보조 텍스트.               on 브랜드면 4.72:1 AA */
  --navy-400: #6784C5; /* 입력 hover 보더 등 UI 경계. on white 3.69:1 (UI 3:1 충족) */
  --navy-500: #3F68C0; /* 흰 배경 위 보조 텍스트 4.57:1 AA */
  --navy-600: #285EDC; /* 버튼 hover(밝게). on white 5.64:1 AA */
  --navy-700: #1A44B4; /* ★★ 브랜드 면색 = blue-800 과 같은 값. 헤더·기본 버튼·강조 텍스트.
                              on white 8.30:1 AAA / white on this 8.30:1 AAA */
  --navy-800: #122D6E; /* ★ 푸터·유틸바·드롭다운·제목 텍스트. on white 12.91:1 AAA */
  --navy-900: #0B1D46; /* 최심도. 오버레이 바탕, 그림자 원색. on white 16.43:1 AAA */
  --navy-950: #060B14; /* ☠ 삭제 예정. components.css `.hero--deep` 이 이 값을 hex 로 박아 두었고
                          팔레트 규율 검사를 통과시키기 위해서만 존재한다. v2.1 은 큰 면을
                          브랜드 면색 한 값으로 통일했으므로 `.hero--deep` 자체가 필요 없다.
                          퍼블리셔가 그 규칙을 지우면 이 토큰도 함께 지운다. */

  /* ---- 1-2. 브랜드 블루 (보조 → v2에서 "면적 담당"으로 승격) --------------
     D-004 의 "보조 = 미드블루" 는 유지하되, v2에서 역할을 하나 더 준다.
     ★ 기존: 큰 면적(히어로·CTA 밴드)을 네이비 단색으로 채웠다 → 화면 무게가 과했다.
     ★ v2 : 큰 면적은 이 로열블루가 맡고, 네이비는 헤더·푸터·본문 강조로 물러난다.
       600(#2563EB)은 참고 사이트(dabuller)의 프라이머리와 같은 값이다. 국내 IT·물류
       B2B 에서 "신뢰 + 현대성"을 동시에 내는 검증된 좌표라 그대로 채택했다.
     ★ 300 은 v2에서 밝혔다 — 로열블루 밴드 위 캡션(eyebrow)이 4.5:1 을 넘어야 한다. */
  --blue-50:  #EFF5FF; /* info 배경, 안내 박스 바탕 */
  --blue-100: #DCE8FE; /* 선택 상태 배경, 태그 배경 */
  --blue-200: #BFD6FE; /* 포커스 링 확산부, 보더 */
  --blue-300: #B6D0FC; /* ★ 브랜드 면 위 링크·eyebrow. on 브랜드면 4.86:1 AA */
  --blue-400: #6A9DF9; /* 아이콘(다크 배경), UI 경계 */
  --blue-500: #3B7BEF; /* ★ 포커스 링 기본색. 흰 배경 위 UI 3:1 이상 */
  --blue-600: #2563EB; /* ★ 링크 기본색 / 액센트. on white AA */
  --blue-700: #1D4FD0; /* 링크 hover / 보조 버튼 라벨. on white AAA */
  --blue-800: #1A44B4; /* ★ 큰 면적 배경(히어로·CTA 밴드). white on this 7.71:1 AAA */
  --blue-900: #143A96; /* 히어로 그라디언트 하단 앵커. white on this AAA */

  /* ---- 1-3. 액션 컬러 (전화 CTA 전용 / Action) ---------------------------
     ★ 선정 근거 (D-004 위임분 확정):
     · 요건 = 네이비와 명확히 대비되고, 화면에서 단 하나의 색으로만 쓰여야 한다.
     · 색상환에서 네이비(218°)의 보색 영역인 주황(22°)을 선택했다. 같은 화면에 놓았을 때
       가장 먼저 눈에 들어오고, 네이비 계열 어디에 올려도 색이 섞여 보이지 않는다.
     · 무지개 7색 중 실제로 포함된 색이라 브랜드 자산과 이어지면서도, 단색이므로
       "무지개를 면적으로 쓰지 않는다"는 D-004 제약을 위반하지 않는다.
     · 초록(수락)·빨강(경고/danger)은 시맨틱 의미가 이미 점유되어 CTA로 쓰면 의미가 충돌한다.
     · 운송업의 구매 동인이 "속도·긴급"이라 난색이 심리적으로도 맞는다.
  ★ v2 재검토 결론 — 주황을 "유지"하되 탁도를 걷어냈다.
     · 팔레트가 로열블루로 밝아졌으므로 액션 컬러를 다시 검증했다. 후보는 주황(22°)·
       청록(190°)·마젠타(330°)였다. 청록·마젠타는 블루와 같은 한색이라 밴드 위에서
       "또 하나의 파랑"으로 뭉개진다. 보색인 주황이 여전히 유일한 정답이다.
     · 다만 기존 #C2410C 는 S87%/L40% 의 "벽돌색"이라 로열블루 옆에서 탁하게 보였다.
       채도를 90%로 올리고 색상각을 20°로 정리해 #C7490A 로 옮겼다.
     · ★ 수학적 상한 확인: 흰 글자 AA(4.5:1)를 만족하는 주황의 밝기 상한은 실측상
       #D14600(4.58:1) 부근이다. 그 위로는 어떤 주황도 AA 를 통과하지 못한다.
       따라서 "더 밝은 주황"은 선택지가 아니며, 4.79:1 의 안전 여유를 남긴 #C7490A 가
       AA 를 지키면서 낼 수 있는 가장 선명한 값이다. (D-015 는 협상 대상이 아니다)
     · 밝은 숫자 강조는 500(#F0680C)이 맡는다 — 22px+ bold 큰글씨 3:1 규정 전용.
  ★ 사용 제한: 전화 CTA(solid) + 전화 아이콘 + 요금 "부터" 수치 강조. 그 외 금지.
    화면 면적의 5% 이내로 유지한다. 액션 컬러가 흔해지면 전화 버튼이 안 보인다. */
  --action-50:  #FFF5EE; /* 전화 안내 박스 배경 */
  --action-100: #FFE6D5; /* 배지 배경 */
  --action-200: #FFC9A8; /* 보더 */
  --action-300: #FFC4A2; /* ★ 브랜드 면 위 강조 텍스트. on 브랜드면 4.95:1 AA */
  --action-400: #FF8A3D; /* 아이콘(다크 배경 위) */
  --action-500: #F0680C; /* 큰 숫자(전화번호 22px+ bold) 전용 3.08:1 — 본문 텍스트 금지 */
  --action-600: #C7490A; /* ★ 전화 CTA 버튼 배경. white on this 4.79:1 AA */
  --action-700: #A63C08; /* CTA hover. white on this AAA */
  --action-800: #85300A; /* CTA active. white on this AAA */
  --action-900: #6B280C; /* 흰 배경 위 텍스트 AAA */

  /* ---- 1-4. 중립 (Neutral) ----------------------------------------------
     순회색이 아니라 네이비 쪽으로 미세하게 기울인 쿨그레이. 주색과 같은 온도라
     본문과 헤더가 한 화면에서 따로 놀지 않는다. */
  --neutral-0:   #FFFFFF; /* 기본 배경 — v2의 페이지 기조는 흰색이다 */
  --neutral-50:  #F7F9FC; /* ★ 섹션 교차 배경. 흰색과 1.05:1 — "옅게만" 구분한다 */
  --neutral-100: #EFF3F9; /* 카드 대체 배경, 표 줄무늬 */
  --neutral-200: #E4EAF2; /* ★ 기본 보더 / 구분선. 얕은 그림자와 짝을 이룬다 */
  --neutral-300: #8191A7; /* ★ 입력 필드 보더 = UI 경계. on white 3.21:1 — WCAG 1.4.11(3:1) 충족.
                             (구 #CBD3DF 는 1.51:1 로 미달이었다. 폼 입력창 테두리는 장식이 아니라
                              '여기가 입력 영역'을 알리는 UI 요소이므로 3:1 이 법적 요구다) */
  --neutral-400: #98A4B6; /* placeholder / 비활성 텍스트. on white 2.52:1 — 정보 전달 금지 */
  --neutral-500: #667385; /* 보조 텍스트(캡션·각주). on white 4.82:1 AA */
  --neutral-600: #4E5A6B; /* 본문 보조. on white 7.00:1 AAA */
  --neutral-700: #3A4553; /* ★ 본문 기본 텍스트. on white 9.74:1 AAA */
  --neutral-800: #262E39; /* 제목 텍스트(네이비를 쓰지 않는 경우) 13.70:1 AAA */
  --neutral-900: #151A21; /* 최심도 텍스트 17.48:1 AAA */

  /* ---- 1-5. 시맨틱 컬러 --------------------------------------------------
     상태 전달 전용. 브랜드 색으로 전용하지 않는다. */
  --success-600: #157F3D; /* 완료·정상. white on this 5.08:1 AA */
  --success-50:  #E9F7EF; /* 완료 메시지 배경 */
  --warn-600:    #A6620A; /* 주의(이사화물 상하차 고지 등). white on this 4.80:1 AA */
  --warn-50:     #FFF7E8; /* 주의 박스 배경 */
  --danger-600:  #C4231C; /* 폼 에러·필수 표기. white on this 5.83:1 AA */
  --danger-50:   #FDEDEC; /* 에러 메시지 배경 */
  --info-600:    #1D4FD0; /* 안내(요금 기준 고지 등) = blue-700 동일값. white on this AAA */
  --info-50:     #EFF5FF; /* 안내 박스 배경 = blue-50 동일값 */
  /* ★ v2.1 추가 — 시맨틱 박스의 "보더 톤". components.css 가 이 4색을 hex 로 박아 쓰고 있어
     (scripts/lint-colors.py 위반) 토큰으로 승격했다. 50(배경)과 600(문자) 사이의 중간 단계다.
     ※ 퍼블리셔 인계: components.css 의 해당 hex 를 아래 var() 로 교체하면 규율 위반이 사라진다.
       .badge--todo 줄무늬 #FFEFCF → var(--warn-100)
       .notice--warn    #F5DEB0 → var(--warn-200)
       .notice--danger  #F5C6C3 → var(--danger-200)
       .notice--success #BDE5CD → var(--success-200) */
  --warn-100:    #FFEFCF; /* [사업자 확인 필요] 배지 줄무늬 */
  --warn-200:    #F5DEB0; /* 주의 박스 보더 */
  --danger-200:  #F5C6C3; /* 에러 박스 보더 */
  --success-200: #BDE5CD; /* 완료 박스 보더 */

  /* ---- 1-6. 무지개 (포인트 / Rainbow) -----------------------------------
     ★ D-004: "로고와 구분선 등 1~2곳에만. 면적으로 쓰지 않는다."
     ★ 허용 (한 페이지 최대 2곳):
        (1) 로고 마크 내부
        (2) 두께 3~4px 이하의 선형 요소 — 헤더 하단 라인 / 섹션 헤더 상단 룰 / 푸터 상단 라인
     ★ 금지: 배경 면(hero·card·band), 버튼 채움, 텍스트 그라디언트, 아이콘 다색 채움,
             애니메이션되는 그라디언트, 3px 초과 두께.
     ★ 채도를 순색 대비 낮춘 값이다. 순 무지개(#FF0000 등)는 어린이·이벤트 인상을 준다. */
  --rainbow-red:    #E23B2E;
  --rainbow-orange: #EE7A1A;
  --rainbow-yellow: #F0C419;
  --rainbow-green:  #2FA84F;
  --rainbow-blue:   #1B7FD0;
  --rainbow-indigo: #3B4EA8;
  --rainbow-violet: #7B3FA0;

  /* ── 로고 전용 스펙트럼 ────────────────────────────────────────────────
     로고 심볼의 4색 그라디언트. D-004 의 --rainbow-* (7색, 구분선용) 와 별개다.
     로고는 7색 아치를 버리고 노랑·남색·보라를 뺀 4색만 쓴다 —
     면적·고채도·7색 병렬이라는 '어린이 인상'의 세 원인을 모두 피하기 위함.
     ※ 브랜드 자산이므로 임의로 값을 바꾸지 말 것. 변경 시 docs/24-logo.md 동시 갱신.
     ------------------------------------------------------------------- */
  --logo-spectrum-1: #F5675A;  /* 좌 — 따뜻한 적 */
  --logo-spectrum-2: #F79A3E;  /* 주황 */
  --logo-spectrum-3: #4CC46B;  /* 녹 */
  --logo-spectrum-4: #4FA6E4;  /* 우 — 청 */
  /* 선형 요소 전용 그라디언트. 사용처는 .rainbow-rule / .logo__mark 뿐이다. */
  --gradient-rainbow: linear-gradient(90deg,
      var(--rainbow-red)    0%,
      var(--rainbow-orange) 17%,
      var(--rainbow-yellow) 33%,
      var(--rainbow-green)  50%,
      var(--rainbow-blue)   67%,
      var(--rainbow-indigo) 84%,
      var(--rainbow-violet) 100%);
  /* 네이비 배경(헤더/푸터) 위에 얹는 버전 — 명도를 살짝 올려 어두운 바탕에서 죽지 않게 한다. */
  --gradient-rainbow-on-dark: linear-gradient(90deg,
      #F05A4D 0%, #F58F31 17%, #F5D043 33%, #4CC46B 50%,
      #3D9AE0 67%, #5E6FC4 84%, #9A5FBD 100%);
  /* ★ v2.1 — 큰 면적의 브랜드 면색. 이름(--gradient-navy)은 컴포넌트 CSS 가 참조 중이라
     그대로 두고 값만 바꿨다. 무지개는 여기에 쓰지 않는다(D-004 면적 금지).

     ★★ 그라디언트를 버리고 단색으로 간 이유 (v2.1 에서 되돌린 결정)
     v2.0 은 히어로를 155deg 그라디언트(#1D4AC0 → #1A44B4 → #143A96)로 채웠다. 문제가 둘이었다.
     (1) 그라디언트의 중간 지점은 팔레트에 없는 색이다. 30%/50%/70% 지점에서 토큰 어디에도
         정의되지 않은 파랑이 생기고, 그 색이 화면의 10%를 차지했다. 팔레트를 정의해 놓고
         실제 화면의 최대 면적은 팔레트 밖 색이 차지하는 상태였다.
     (2) 인접한 헤더(당시 #1E3A73, 저채도 네이비)와 채도가 15%p 어긋나 "중간에 다른 색이
         끼어든 것"으로 읽혔다. 고객 지적이 정확히 이 지점이었다.
     큰 면적에서 그라디언트는 통제가 어렵고, "전문 회사 느낌"에는 절제된 단색이 유리하다.
     지금은 헤더·히어로·CTA 밴드가 전부 이 한 값(#1A44B4)이고, 푸터만 같은 색상각의
     어두운 단계(#122D6E)다. 화면의 큰 면은 색상각 222° 파랑 두 단계로만 이루어진다. */
  --gradient-navy:  var(--blue-800);   /* 단색. 이름만 gradient 다 */
  --gradient-brand: var(--blue-800);   /* 앞으로 쓸 이름 */

  /* ★ 히어로 배경사진 위 오버레이 (파일 하단 [브리지] 규칙이 참조한다)
     단색 + 높은 불투명도. 사진은 아주 옅은 질감으로만 남고 표면색은 결정론적으로 고정된다.
     실측: 밝은 사진 위 합성 #234BB7(흰 8.06:1) / 어두운 사진 위 #1A43B0(흰 8.4:1). */
  --hero-overlay: rgba(26, 68, 180, .96);

  /* ======================================================================
     2. 시맨틱 별칭 — 컴포넌트는 원시 스케일 대신 되도록 이쪽을 쓴다
     ====================================================================== */
  --color-brand:            var(--navy-700);   /* 헤더·본문 강조 — 네이비를 지킨다 */
  --color-brand-strong:     var(--navy-800);   /* 푸터 */
  --color-brand-soft:       var(--navy-50);
  --color-accent:           var(--blue-600);   /* 링크·아이콘 */
  --color-action:           var(--action-600); /* 전화 CTA */

  --color-bg:               var(--neutral-0);
  --color-bg-subtle:        var(--neutral-50);   /* 교차 섹션 */
  --color-bg-muted:         var(--neutral-100);  /* 표 줄무늬, 코드 */
  /* ★ v2 핵심 변경 — 큰 면적 밴드(.section--brand)를 네이비에서 로열블루로 옮긴다.
     헤더(--navy-700)·푸터(--navy-800)는 네이비를 유지하므로, 페이지는
     [네이비 헤더] → [흰 본문] → [로열블루 밴드] → [흰 본문] → [네이비 푸터] 의
     3색 리듬이 된다. 어두운 면이 위아래 끝으로만 밀려나 중앙이 밝아진다. */
  --color-bg-brand:         var(--blue-800);     /* CTA·강조 밴드 (헤더/푸터 아님) */
  --color-bg-brand-soft:    var(--blue-50);       /* 신뢰 스트립 — 아주 옅은 블루 */

  --color-text:             var(--neutral-700);  /* 본문 */
  --color-text-strong:      var(--navy-800);     /* 제목 */
  --color-text-muted:       var(--neutral-500);  /* 캡션·각주 */
  --color-text-disabled:    var(--neutral-400);
  --color-text-on-brand:    var(--neutral-0);
  --color-text-on-brand-mut:var(--navy-200);   /* v2: 밴드가 밝아져 한 단계 올렸다 */
  --color-link:             var(--blue-600);
  --color-link-hover:       var(--blue-700);
  --color-link-on-dark:     var(--blue-300);

  --color-border:           var(--neutral-200);
  --color-border-strong:    var(--neutral-300);
  --color-border-brand:     var(--navy-200);
  --color-border-on-dark:   rgba(255,255,255,.16);

  /* ======================================================================
     3. 타이포그래피
     ====================================================================== */
  /* Pretendard 우선. CDN 차단·오프라인·구형 환경에서도 반드시 한글이 깨지지 않도록
     macOS/iOS(Apple SD Gothic Neo) → Windows(맑은 고딕) → Android(Noto Sans KR) 순으로
     시스템 폰트를 전부 폴백에 넣었다. 웹폰트가 하나도 안 떠도 레이아웃이 유지된다. */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
               "Noto Sans KR", "Nanum Gothic", "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  /* 전화번호·요금·규격 수치용. tnum 으로 자릿수를 고정해 표에서 숫자가 흔들리지 않게 한다. */
  --font-num:  var(--font-sans);
  --font-feature-num: "tnum" 1, "lnum" 1;

  /* ---- 3-1. 스케일 8단계 (모바일 기준 → clamp 로 데스크톱 확장) ----------
     한글은 라틴 대비 글자 밀도가 높아 자간을 음수로 좁히고 행간은 넉넉히 준다.
     본문 행간 1.7 은 한글 장문에서 가독성이 가장 안정적인 구간이다. */

  /* 1. display — 홈 히어로 메인 카피 전용 (페이지당 1회) */
  --fs-display: clamp(2rem, 1.35rem + 2.60vw, 3.25rem);   /* 32 → 52 */
  --lh-display: 1.18;
  --fw-display: 800;
  --ls-display: -0.030em;

  /* 2. h1 — 서브페이지 타이틀 */
  --fs-h1: clamp(1.75rem, 1.36rem + 1.56vw, 2.5rem);      /* 28 → 40 */
  --lh-h1: 1.25;
  --fw-h1: 700;
  --ls-h1: -0.025em;

  /* 3. h2 — 섹션 제목 */
  --fs-h2: clamp(1.5rem, 1.29rem + 0.83vw, 2rem);         /* 24 → 32 */
  --lh-h2: 1.32;
  --fw-h2: 700;
  --ls-h2: -0.022em;

  /* 4. h3 — 카드 제목 / 서브섹션 */
  --fs-h3: clamp(1.25rem, 1.16rem + 0.36vw, 1.5rem);      /* 20 → 24 */
  --lh-h3: 1.40;
  --fw-h3: 700;
  --ls-h3: -0.020em;

  /* 5. h4 — 소제목 / 표 캡션 / 스텝 제목 */
  --fs-h4: clamp(1.125rem, 1.08rem + 0.18vw, 1.25rem);    /* 18 → 20 */
  --lh-h4: 1.50;
  --fw-h4: 600;
  --ls-h4: -0.018em;

  /* 6. body-lg — 히어로 서브카피 / 섹션 리드문 */
  --fs-body-lg: clamp(1.0625rem, 1.04rem + 0.10vw, 1.125rem); /* 17 → 18 */
  --lh-body-lg: 1.72;
  --fw-body-lg: 400;
  --ls-body-lg: -0.012em;

  /* 7. body — 본문 기본. 16px 미만으로 내리지 않는다(iOS 입력 시 자동 확대 방지 포함) */
  --fs-body: 1rem;                                        /* 16 */
  --lh-body: 1.70;
  --fw-body: 400;
  --ls-body: -0.010em;

  /* 8. caption — 각주·라벨·법적 고지. 법적 문구를 이 크기 아래로 내리지 않는다 */
  --fs-caption: clamp(0.8125rem, 0.80rem + 0.06vw, 0.875rem); /* 13 → 14 */
  --lh-caption: 1.62;
  --fw-caption: 400;
  --ls-caption: -0.006em;

  /* 굵기 팔레트 (Pretendard 가변) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ======================================================================
     4. 스페이싱 — 4px 베이스
     4px 배수만 쓰면 서로 다른 사람이 만든 섹션도 세로 리듬이 자동으로 맞는다.
     ====================================================================== */
  --space-1:  0.25rem;  /*   4 — 아이콘과 라벨 사이 */
  --space-2:  0.5rem;   /*   8 — 인라인 요소 간격 */
  --space-3:  0.75rem;  /*  12 — 버튼 내부 세로 패딩 */
  --space-4:  1rem;     /*  16 — 기본 간격 / 모바일 좌우 여백 */
  --space-5:  1.25rem;  /*  20 — 컴팩트 카드 내부 패딩 전용.
                                 16 은 좁고 24 는 카드가 커지는 격자형 카드(.method-card)
                                 한 곳을 위해 뚫은 예외 단계다. 새 화면에서는 쓰지 말고
                                 16(--space-4) 또는 24(--space-6) 중에서 고른다. */
  --space-6:  1.5rem;   /*  24 — 카드 내부 패딩 / 태블릿 좌우 여백 */
  --space-8:  2rem;     /*  32 — 요소 그룹 간격 */
  --space-12: 3rem;     /*  48 — 섹션 내부 블록 간격 / 모바일 섹션 상하 */
  --space-16: 4rem;     /*  64 — 섹션 상하(태블릿) */
  --space-24: 6rem;     /*  96 — 섹션 상하(데스크톱) */
  --space-32: 8rem;     /* 128 — 히어로 상하(데스크톱) */

  /* 섹션 수직 리듬 (layout.css 가 참조) */
  --section-py:       var(--space-12); /* 모바일 48 */
  --section-py-lg:    var(--space-16); /* 태블릿 64 */
  --section-py-xl:    var(--space-24); /* 데스크톱 96 */

  /* ======================================================================
     5. 라운드 / 보더 / 그림자
     ====================================================================== */
  /* ★ v2 — 한 단계씩 키웠다. 모서리가 둥글수록 면이 가볍게 읽히고, 얕아진 그림자와
     짝을 이뤄 "무거운 판때기"가 아니라 "떠 있는 카드"로 보인다. 12px 는 현재
     국내외 B2B SaaS 의 사실상 표준값이다. */
  --radius-sm:   6px;    /* 배지·태그·입력 보조 */
  --radius-md:   12px;   /* ★ 기본 — 버튼·인풋 */
  --radius-lg:   20px;   /* 카드·패널 */
  --radius-xl:   32px;   /* 히어로 미디어·대형 패널 */
  --radius-pill: 999px;  /* 칩·필터·전화 아이콘 버튼 */

  --border-width:        1px;
  --border-width-strong: 2px;   /* 포커스·선택·에러 */
  --border-width-accent: 4px;   /* 인용·경고 박스 좌측 바 */

  /* 그림자 원색은 순검정이 아니라 브랜드 블루를 깔았다. 회색빛 그림자가 아니라
     화면 전체 색온도와 맞는 그림자가 된다. 4단계 이상 만들지 않는다.
     ★ v2 — 오프셋·농도를 낮추고 blur 를 넓혔다. 그림자가 진하면 카드마다 회색 테가
       생겨 흰 배경이 탁해 보인다. 밝은 화면일수록 그림자는 "선"이 아니라 "번짐"이어야 한다. */
  --shadow-1: 0 1px 2px rgba(26,68,180,.04), 0 2px 8px rgba(26,68,180,.05);    /* 카드 기본 */
  --shadow-2: 0 2px 6px rgba(26,68,180,.05), 0 8px 20px rgba(26,68,180,.07);   /* 카드 hover / sticky 헤더 */
  --shadow-3: 0 4px 12px rgba(26,68,180,.05), 0 16px 36px rgba(26,68,180,.08); /* 드롭다운·팝오버 */
  --shadow-4: 0 8px 20px rgba(26,68,180,.06), 0 32px 64px rgba(26,68,180,.11); /* 모바일 전체메뉴 오버레이 */
  --shadow-bottombar: 0 -1px 6px rgba(22,41,79,.08);                           /* 하단 고정 액션바(위로 뜬다) */
  --shadow-none: none;

  /* 포커스 링 — 절대 제거하지 않는다(접근성 필수). */
  --focus-ring-width: 3px;
  --focus-ring-color: var(--blue-500);
  --focus-ring-color-on-dark: #FFFFFF; /* 네이비 헤더·로열블루 밴드 양쪽에서 최고 대비 */
  --focus-ring-offset: 2px;

  /* ======================================================================
     6. z-index — 값 사이를 비워 두어 나중에 끼워 넣을 수 있게 한다
     ====================================================================== */
  --z-base:       0;
  --z-raised:   100;  /* 카드 hover 부양 */
  --z-sticky:   700;  /* 페이지 내 sticky 서브네비(앵커 칩) */
  --z-header:   800;  /* 사이트 헤더 */
  --z-dropdown: 850;  /* 메가 드롭다운 (헤더보다 위) */
  --z-bottombar:900;  /* 모바일 하단 고정 액션바 (D-010 §3-2) */
  --z-overlay: 1000;  /* 모바일 전체메뉴 오버레이 (헤더·바보다 위) */
  --z-modal:   1100;
  --z-toast:   1200;

  /* ======================================================================
     7. 레이아웃 상수
     ====================================================================== */
  --container-max:    1200px; /* 기본 콘텐츠 폭 */
  --container-narrow:  760px; /* 인사말·약관 등 장문 — 한글 1줄 40~45자 유지 */
  --container-wide:   1440px; /* 풀블리드 밴드 내부 */
  --gutter:      var(--space-4); /* 16 모바일 */
  --gutter-md:   var(--space-6); /* 24 태블릿 */
  --gutter-lg:   var(--space-8); /* 32 데스크톱 */

  --header-h:        56px;  /* 모바일 헤더 (D-010 §3-1) */
  --header-h-lg:     72px;  /* 데스크톱 메인 헤더 */
  --utilbar-h-lg:    36px;  /* 데스크톱 상단 유틸바 */
  --bottombar-h:     60px;  /* 모바일 하단 액션바 (D-010 §3-2) */
  --safe-bottom:     env(safe-area-inset-bottom, 0px);
  --tap-min:         44px;  /* 최소 터치 타깃 — WCAG 2.5.5 */
  --tap-min-cta:     48px;  /* CTA·체크박스 라벨은 48px 이상 (D-010 §3-2) */

  /* 지면(인쇄·PDF) 상수 — 화면 토큰과 섞지 않는다. 단위가 mm 인 이유는
     소비자가 화면이 아니라 종이·PDF 뷰어이기 때문이다.
     ★ 국내 기본 용지는 A4 다. Chrome 의 기본값은 Letter 라 명시하지 않으면
       사업자에게 보내는 PDF 가 Letter 로 나간다(실측 612x792pt). @page 에서 쓴다. */
  --page-size:   A4;
  --page-margin: 16mm 14mm;

  /* 브레이크포인트 — CSS 변수는 @media 안에서 못 쓰므로 "문서화용"이다.
     실제 값은 아래 숫자를 그대로 하드코딩한다. 모바일 퍼스트, min-width 만 쓴다.
       sm  480px  큰 폰
       md  768px  태블릿 — 2열 그리드 시작
       lg 1024px  데스크톱 — 헤더 전환, 하단 액션바 숨김
       xl 1280px  와이드 */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ======================================================================
     8. 모션 — "그라디언트/애니메이션은 포인트 1~2곳만"
     ====================================================================== */
  --dur-fast:   120ms; /* hover 색 변화 */
  --dur-base:   200ms; /* 대부분의 상태 전이 */
  --dur-slow:   320ms; /* 아코디언·드롭다운 열림 */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.45,.05,.55,.95);
}

/* --------------------------------------------------------------------------
   접근성 환경설정 대응
   -------------------------------------------------------------------------- */

/* 고대비 선호 — 보더를 진하게, 흐린 텍스트를 한 단계 올린다 */
@media (prefers-contrast: more) {
  :root {
    --color-border:        var(--neutral-300);
    --color-border-strong: var(--neutral-500);
    --color-text:          var(--neutral-800);
    --color-text-muted:    var(--neutral-600);
    --focus-ring-width:    4px;
  }
}

/* 모션 최소화 — 전이를 사실상 0으로 (base.css 에서 transition 도 함께 차단) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

/* --------------------------------------------------------------------------
   [예약] 다크모드 확장 지점 — 1차에서는 비워 둔다.
   G4 단계에서 이 블록의 시맨틱 별칭만 재정의하면 components.css 를 수정하지 않고
   전 페이지가 대응된다. prefers-color-scheme 자동 적용은 하지 않는다(위 결정 2번 사유).
   :root[data-theme="dark"] {
     color-scheme: dark;
     --color-bg: var(--navy-900);
     --color-bg-subtle: var(--navy-800);
     --color-text: var(--navy-100);
     --color-text-strong: var(--neutral-0);
     --color-border: rgba(255,255,255,.14);
     --color-link: var(--blue-300);
     ...
   }
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   [브리지] 히어로 오버레이 — 토큰 1개를 실제로 꽂아 주는 유일한 규칙
   --------------------------------------------------------------------------
   components.css `.hero__media::after` 는 오버레이 색을 rgba(13,25,41,...) 로
   하드코딩하고 있다(CLAUDE.md §4 "하드코딩 금지" 위반). 이 한 곳 때문에 히어로가
   토큰의 통제를 벗어나 있고, 그것이 칙칙함의 최대 원인이었다.

   지금은 components.css 를 다른 에이전트가 잡고 있어 수정할 수 없으므로,
   토큰 파일에서 선택자 특이도(0,2,1 > 0,1,1)로 값을 주입한다. !important 는 쓰지 않는다.

   ★ 퍼블리셔 인계 사항 — components.css 를 만질 수 있게 되면
     `.hero__media::after { background: var(--hero-overlay); }` 한 줄로 옮기고
     아래 블록은 삭제한다. 그러면 토큰 규칙이 다시 깨끗해진다.
   -------------------------------------------------------------------------- */
.hero .hero__media::after { background: var(--hero-overlay); }

/* --------------------------------------------------------------------------
   [브리지] 어두운 영역 안의 "채워진 버튼" 라벨색 — ★AA 위반 수정 (D-015)
   --------------------------------------------------------------------------
   base.css 의 `.on-dark a { color: var(--color-link-on-dark); }` (특이도 0,1,1)가
   `.btn--tel / .btn--white / .btn--primary` (0,1,0)의 color 를 덮어쓰고 있었다.
   결과: 히어로·CTA 밴드 안의 ★전화 버튼 라벨이 흰색이 아니라 옅은 하늘색(blue-300)으로
         렌더링된다. 주황 배경 위 blue-300 은 약 2.6:1 로 AA(4.5:1) 미달이며,
         이 사이트의 모든 전환 동선이 걸린 가장 중요한 버튼이다.
   ※ v2 팔레트 때문에 생긴 문제가 아니라 그 전부터 있던 버그다. 다만 AA 는 법적 요구
     (D-015 / 장애인차별금지법)이므로 팔레트를 손보는 김에 같이 막는다.

   :hover 는 base.css 의 `.on-dark a:hover` 와 특이도가 같아(0,2,1) 소스 순서에서 밀린다.
   그래서 hover 변형은 명시적으로 한 단계 더 올려 둔다.

   ★ 퍼블리셔 인계 사항 — base.css 를 만질 수 있게 되면 그쪽에서
     `.on-dark a:not([class*="btn--"]) { ... }` 로 바로잡고 이 블록은 삭제한다.
   -------------------------------------------------------------------------- */
.on-dark a.btn--tel,
.on-dark a.btn--tel:hover,
.on-dark a.btn--tel:active,
.on-dark a.btn--primary,
.on-dark a.btn--primary:hover,
.on-dark a.btn--on-dark,
.on-dark a.btn--on-dark:hover,
.on-dark a.btn--ghost-on-dark,
.on-dark a.btn--ghost-on-dark:hover { color: var(--neutral-0); }
.on-dark a.btn--white           { color: var(--navy-800); }
.on-dark a.btn--white:hover     { color: var(--navy-900); }
.on-dark a.btn--secondary       { color: var(--blue-700); }
.on-dark a.btn--secondary:hover { color: var(--blue-800); }

/* --------------------------------------------------------------------------
   [브리지] .hero--deep — 큰 면의 색을 하나로 통일하기 위한 무력화
   --------------------------------------------------------------------------
   components.css 의 `.hero--deep` 은 바이크 페이지 히어로를 거의 검정(#060B14)까지
   떨어뜨린다. v2.1 의 원칙은 "헤더·히어로·CTA 밴드는 전부 같은 브랜드 면색"이므로
   이 페이지만 다른 색이 되면 안 된다. 값을 브랜드 면색으로 되돌린다.
   ★ 퍼블리셔 인계: components.css 의 `.hero--deep` 규칙을 삭제하면 이 블록도 삭제한다.
   -------------------------------------------------------------------------- */
.hero.hero--deep { background: var(--gradient-brand); }

/* --------------------------------------------------------------------------
   [예약] 다크모드 확장 지점 — 1차에서는 비워 둔다.
   -------------------------------------------------------------------------- */