/* tokens.css — 팔레트 · 서체 · 간격. 세 뷰(fa · db-marketing · lab) 공용.
 *
 * 값의 출처는 `/db-design` 스킬의 브랜드 표 하나뿐이다. **여기에 새 색을 만들지
 * 않는다** — 뷰가 셋이라 한 곳에서 색을 지어내면 열세 장이 한 제품으로 안 보인다.
 * 회색이 일곱 가지나 되는 것은 시안이 실제로 그만큼 쓰기 때문이다(캡션·비활성·
 * 보조 텍스트가 각각 다른 자리에 쓰인다). 줄이려면 시안부터 고친다. */

:root {
  /* 브랜드 — 로고 가이드 원본 값. 임의 변경 불가 */
  --c-brand:        #27398c;   /* 메인 블루 */
  --c-brand-strong: #142d85;   /* hover */
  --c-brand-soft:   #eef0f8;   /* 연블루 배경 */
  --c-gray:         #6c6e71;   /* 공식 그레이 */

  /* 면 */
  --c-bg:           #f2f3f6;   /* 페이지 */
  --c-surface:      #ffffff;   /* 말풍선 · 헤더 · 입력바 */
  --c-surface-soft: #f7f8fb;   /* 은은한 면 (표 머리 등) */

  /* 선 */
  --c-bd:           #e2e4ea;   /* 기본 구획선 */
  --c-bd-chip:      #d7dbe8;   /* 칩 · 아바타 테두리 */
  --c-bd-faint:     #e9ebf1;   /* 잠긴 입력바 */

  /* 글자 */
  --c-tx:           #1b1d22;   /* 본문 */
  --c-tx-2:         #494c52;
  --c-tx-3:         #5c6069;
  --c-tx-4:         #6b7078;
  --c-tx-mute:      #8a8d94;   /* 캡션 */
  --c-tx-faint:     #a0a3aa;   /* 시각 · 고지 · placeholder */
  --c-tx-off:       #c9cdda;   /* 비활성 */

  /* 주의 · 확인 — 아직 쓰는 곳이 없다. S5 의 오류 말풍선(주의)과 P2 의 검수
     표시(확인)가 쓸 자리다. 그때 색을 새로 만들지 않도록 팔레트째 옮겨 둔다 */
  --c-warn-bg:      #fdfaf2;
  --c-warn-bd:      #e8ddc4;
  --c-warn-tx:      #8a6a1e;
  --c-ok-bg:        #e9f2ee;
  --c-ok-bd:        #cfe3d9;
  --c-ok-tx:        #1f6f52;

  /* 서체 — 제목은 나눔바른고딕 계열, 본문은 IBM Plex Sans KR */
  --ff-title: 'Nanum Gothic', system-ui, sans-serif;
  --ff-body:  'IBM Plex Sans KR', 'Nanum Gothic', system-ui, sans-serif;

  /* 크기 — 소수점은 시안 값 그대로다. 반올림하면 말풍선 높이가 밀린다 */
  --fs-hero:   21px;   /* 첫 화면 인사말 */
  --fs-title:  14.5px; /* 헤더 제품명 */
  --fs-body:   13.5px; /* 말풍선 본문 · 추천 질문 · 입력 */
  --fs-btn:    12.5px; /* 칩 · 범위 버튼 */
  --fs-table:  12px;
  --fs-cap:    11.5px; /* 헤더 부제 · 시스템 칩 · 섹션 라벨 */
  --fs-tag:    11px;   /* 추천 질문 앞 분류 배지 */
  --fs-note:   10.5px; /* 시각 · 하단 고지 */

  /* 간격 · 모양 */
  --tap:        44px;  /* 히트 타깃 최소 (N2) */
  --r-pill:     22px;
  --r-card:     14px;
  --r-pop:      14px;   /* 상담 범위 팝오버. 데스크톱(FaDesktop) 값 그대로 */
  --r-in:       4px 16px 16px 16px;   /* 상대 말풍선 */
  --r-out:      16px 4px 16px 16px;   /* 내 말풍선 */
  --w-read:     760px; /* 본문 읽기 폭 (N6). 바(헤더·입력바)는 창을 다 쓰고
                          **본문만** 이 폭으로 묶는다. 한때 --w-app(430 기둥 캡)
                          이 있었으나 폰보다 조금 큰 창마다 죽은 여백이 남아
                          걷어냈다(2026-08-24, A안) */
  --w-in:       296px; /* 상대 말풍선 최대폭 */
  --w-out:      268px; /* 내 말풍선 최대폭 */

  --sh-bubble:  0 1px 2px rgba(20, 45, 133, .07);
  /* 떠 있는 판. 말풍선 그림자와 같은 잉크(20,45,133)를 진하게 쓴다 —
     새 색이 아니라 같은 색을 더 멀리 던진 것이다 */
  --sh-pop:     0 12px 28px rgba(20, 45, 133, .13);
}