/* ============================================================
   디자인 토큰 — 탑디자인 공식 홈페이지
   콘셉트: White-dominant + Sky Blue accent (clean B2B)

   [V36G.1 R2 §10] 2026-08-27 — 웜 아이보리/브론즈에서 **화이트 + 스카이블루**로 바꿨다.
   사장님 지시다. 이전까지 "브라운 → 하늘색 변경 금지" 였던 제약은 이 지시로 해제됐다.

   ⚠️ **토큰 이름을 바꾸지 않았다.** `--ivory` 가 흰색을 담고 `--bronze` 가 파랑을 담는다.
      이름과 값이 어긋나는 것은 알고 있다. 이름을 바꾸려면 components.css(162KB)와
      reco-v5.css(115KB)를 전부 손대야 하고, 그건 이번 지시서가 금지한 unrelated refactor 다.
      값만 바꾸면 두 파일이 **한 글자도 바뀌지 않고** 새 테마를 입는다.
      나중에 이름을 정리할 때는 별칭을 먼저 만들고 옮긴다.

   ⚠️ 회사는 쇼핑몰보다 **더 절제**한다(지시서 §10). 파랑은 CTA·링크·아이콘·아주 연한
      섹션 tint 에만 쓴다. 가격 badge·강한 active 파랑을 남발하지 않는다.

   ⚠️ 대비(WCAG AA) 때문에 사장님이 적어 주신 `#2F80ED` 를 **작은 글자·버튼 바탕에는
      그대로 쓰지 못한다** — 흰 글자를 얹으면 3.87:1 로 AA(4.5:1)에 못 미친다.
      같은 family 안에서 한 단계 진하게 조정했다(실측값은 아래 각 줄에 적어 둔다).
   ============================================================ */
:root {
  /* ── 색상 ── */
  --ivory:      #FFFFFF;  /* (구 Warm Ivory) 기본 바탕 — 이제 순백이다 */
  --white:      #F7FBFF;  /* Soft Background — 교차 배경·입력칸 (흰색 대비 1.04) */
  --surface:    #FFFFFF;  /* Surface — 드롭다운·상담패널·카드 등 떠 있는 면(불투명)
                             ⚠️ 바탕과 같은 흰색이다. 이 토큰을 쓰는 8곳은 전부
                                `border: 1px solid var(--hair)` 를 함께 갖고 있어
                                흰 바탕 위 흰 카드가 사라지지 않는다(실측 확인). */
  --graphite:   #111827;  /* Main Text — 텍스트·다크 섹션 (흰 위 17.74:1) */
  --black:      #0B1220;  /* Deep Navy-Black — 푸터. graphite 보다 한 단계 더 어둡다 */
  --muted:      #667085;  /* Secondary Text — 일반 본문·작은 글자 (흰 위 4.97:1) */
  --muted-soft: #77839A;  /* 장식용·큰 보조 문구 전용 (흰 위 3.82:1)
                             ⚠️ 처음에 #98A2B3 을 넣었더니 2.58:1 로 **옛 값(#8A8984, 3.08:1)보다
                                나빠졌다.** 팔레트를 바꾸면서 읽기 쉬움을 떨어뜨리면 안 된다.
                                한 단계 진하게 잡아 옛 수준 이상(3.82)으로 되돌렸다. */
  --hair:       #E5EAF0;  /* Hairline — 얇은 구분선 */
  --bronze:     #1A6FD4;  /* (구 Accent Bronze) Primary Blue — 흰 글자 4.92:1 ✅ AA
                             사장님 지정 #2F80ED 는 흰 글자 3.87:1 로 AA 미달이라
                             같은 family 에서 한 단계 진하게 잡았다. */
  --bronze-text:#175CD3;  /* 작은 링크·카테고리 문구용 (흰 위 5.99:1) */
  --ink-soft:   #344054;  /* 본문 진한 회색 (흰 위 10.46:1) */
  --sky:        #EEF7FF;  /* Sky Surface — 아주 연한 섹션 tint (사장님 지정값 그대로) */

  /* ── 유령 토큰 — 이번에 **처음 정의한다** ─────────────────────────────────
     components.css(162KB)와 reco-v5.css(115KB)가 아래 이름들을 165번 부르는데
     저장소 어디에도 정의가 없었다. 그래서 전부 `var(--X, #리터럴)` 의 **fallback 만**
     렌더됐다 — 코드는 토큰을 쓰는 것처럼 보이지만 실제로는 하드코딩이었다.

     ⚠️ 이름을 지우거나 호출부를 고치지 않는다. **정의 6줄을 더하는 것만으로**
        165곳이 한꺼번에 새 팔레트를 따른다. 두 큰 파일을 한 글자도 건드리지 않는다.
     ⚠️ fallback 리터럴은 그대로 남겨 둔다 — 회귀가 그 문자열을 잡고 있고
        (`v20-visual-system-test.php:214`), 정의가 있으면 fallback 은 렌더되지 않는다.
     ⚠️ `--brand` 의 옛 fallback #8A6A3B 는 --bronze(#9B7653)와 **다른 제3의 브론즈**였다.
        포커스링·탭 활성선이 브랜드색이 아닌 색으로 칠해지고 있었다는 뜻이다. 이제 하나로 모은다. */
  --hairline:   #E5EAF0;  /* (옛 fallback #D7D4CC) = --hair 와 같은 역할, 58곳 */
  --line:       #EDF1F7;  /* (옛 fallback #E5E3DC · #e6e2db) 한 단계 더 연한 선, 56곳 */
  --soft-white: #F7FBFF;  /* (옛 fallback #FAFAF8) = --white 와 같은 역할, 35곳 */
  --brand:      #1A6FD4;  /* (옛 fallback #8A6A3B) = --bronze 로 통일, 14곳 */
  --ink:        #111827;  /* (옛 fallback #181918) = --graphite 와 같은 역할, 2곳 */
  --paper-2:    #F4F9FF;  /* (옛 fallback #f7f5f2 · #f2f0ec) 아주 옅은 면, 2곳 */

  /* ── 서체 ── */
  --sans:  'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --serif: 'Fraunces', 'Pretendard', serif;   /* 숫자·영문·강조 액센트 */

  /* ── 굵기 체계 (한글 가독성 반영: 대형 제목 500, 소제목 600) ── */
  --fw-display: 500;   /* 대형 제목·진술문 */
  --fw-heading: 600;   /* 서비스명·H3·소제목 */
  --fw-reg: 400;       /* 본문 */
  --fw-med: 500;       /* 버튼·라벨 */
  --fw-thin: 300;      /* (구) 미사용 — 호환용 */

  /* ── 레이아웃 ── */
  --w-content: 1240px;
  --pad-x: clamp(22px, 5vw, 72px);
  --header-h: 80px;

  /* ── 모션 ── */
  --t: .2s ease;
}