@charset "utf-8";

/* =====================================================================
 * tokens.css — 토토샵 보드 스킨 디자인 토큰 (단일 소스)
 * ---------------------------------------------------------------------
 * 이 파일은 색상/라운드/그림자/폰트의 "단일 진실 원천(single source)"이다.
 * totolist 스킨(style.css / custom-main.css / view-detail.css / 인라인 style)
 * 은 하드코딩 hex 대신 여기 정의된 var(--*) 만 참조한다.
 *
 * ⚠ 규칙
 *  - 이 파일은 가장 먼저(가장 낮은 add_stylesheet order) 로드된다.
 *  - 다크모드는 각 스킨 파일의 html.dark-mode 블록이 계속 담당한다(이번 범위 밖).
 *  - 문서: skin/board/DESIGN_SYSTEM.md 참조. totolist 가 레퍼런스 구현.
 * ===================================================================== */
:root{
  /* --- Brand (밝은 브랜드 블루 하나로 통일) --- */
  --brand:#2771E3;                    /* 기본 브랜드 블루. 링크/버튼/활성탭/보증 강조 */
  --brand-hover:#1b64da;              /* hover/pressed 시 진한 블루 */
  --brand-soft:rgba(39,113,227,.08);  /* 브랜드 배경 틴트 (강조 소프트 표면) */
  --field-focus-ring:rgba(39,113,227,.45); /* 검색·입력 필드 포커스 링 = --brand @45% */

  /* --- Text (통일 중성 스케일: 진함→흐림) --- */
  --ink:#1A1D21;      /* 제목/최강조 텍스트 */
  --body:#4A4F57;     /* 본문 기본 */
  --sub:#676D76;      /* 보조 텍스트 */
  --muted:#8A9099;    /* 흐린 라벨/플레이스홀더 */
  --muted-2:#9AA0A8;  /* 더 흐린 메타/카운트 */

  /* --- 등급색 (의미 유지: 보증=파랑 / 우수=골드 / 일반=회색) --- */
  --grade-guaranteed:var(--brand);    /* 보증 업체 = 브랜드 블루 */
  --grade-excellent:#C99A3C;          /* 우수(제휴) = 골드 */
  --grade-normal:#6b7280;             /* 일반·미지정 = 회색 */
  --star-empty:#D1D5DB;               /* 빈 별 색 */

  /* --- Surface / Line (표면·경계선) --- */
  --card:#fff;         /* 카드 배경 */
  --field-bg:#F5F7FA;  /* 입력 필드 배경 */
  --line:#E5E8EB;      /* 기본 1px 경계선 */
  --line-2:#E3E6EA;    /* 옅은 경계선 */
  --line-strong:#D5DAE0; /* 진한 경계선 (업체 카드 윤곽 등) */
  --line-soft:#EEF0F3; /* 가장 옅은 구분선 */
  --thumb-bg:#EEF1F4;  /* 썸네일 플레이스홀더 배경 */

  /* --- Radius (라운드) --- */
  --r-4:4px; --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px;
  --r-pill:999px;      /* 완전 둥근 pill (버튼/뱃지) */

  /* --- Shadow (그림자) --- */
  --sh-card:0 6px 6px rgba(0,0,0,.05);      /* 카드 기본 그림자 */
  --sh-sm:0 2px 6px rgba(0,0,0,.06);        /* 소형 팝오버/툴바 */
  --sh-md:0 6px 18px rgba(17,24,39,.10);    /* 중형 드롭다운/코치마크 */
  --sh-modal:0 20px 60px rgba(0,0,0,.15);   /* 모달 */

  /* --- Font (폰트 스택) --- */
  --font-ui:"Paperozi","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  --font-num:"Oxanium","Paperozi",sans-serif;  /* 숫자(별점/카운트) 전용 */
}