/* ==========================================
 * [tokens.css] 디자인 토큰 — 유일한 "값" 저장소
 * ------------------------------------------
 * 색상 / 간격 / 그림자 / 크기의 원본은 전부 여기 있음.
 * 다른 CSS 파일에는 하드코딩된 색상값(#hex)이 존재하면 안 됨.
 * 새 현장 클론 시 --brand 계열 3줄만 바꾸면 전체 톤이 따라옴.
 * ========================================== */

:root {
  /* --- 브랜드 (현장별 교체 지점) --- */
  --brand: #007bff;
  --brand-dark: #0056b3;
  --brand-tint: rgba(0, 123, 255, 0.1);

  /* --- 중립 색상 --- */
  --ink: #111111;          /* 제목 */
  --text: #212529;         /* 본문 */
  --text-muted: #6c757d;   /* 보조 설명 */
  --surface: #ffffff;      /* 카드/섹션 바닥 */
  --surface-alt: #f8f9fa;  /* 교차 섹션 바닥 */
  --border: #dee2e6;
  --border-soft: #e9ecef;

  /* --- 푸터 전용 --- */
  --footer-bg: #2b343d;
  --footer-text: #ffffff;
  --footer-muted: #a2b1c0;
  --footer-line: #3f4d5a;
  --footer-fine: #788796;

  /* --- 외부 서비스 아이덴티티 (변경 금지) --- */
  --naver-green: #03c75a;
  --naver-green-dark: #02b350;

  /* --- 간격 스케일 --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 25px;
  --space-8: 35px;
  --space-10: 60px;

  /* --- 라운드 --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 50%;

  /* --- 그림자 --- */
  --shadow-img: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 4px 15px rgba(0, 0, 0, 0.15);
  --shadow-nav: 0 -3px 10px rgba(0, 0, 0, 0.08);
  --shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.15);
  --focus-ring: 0 0 0 4px var(--brand-tint);

  /* --- 레이아웃 --- */
  --container-max: 1200px;   /* 헤더/섹션 바깥 폭 */
  --reading-max: 650px;      /* 본문 콘텐츠 가두기 폭 */
  --card-max: 500px;         /* 폼 카드 폭 */
  --quick-nav-h: 65px;       /* 모바일 하단 탭바 높이 */

  /* --- z-index 층위 (충돌 방지용 고정 스케일) --- */
  --z-nav: 1000;
  --z-float: 2000;

  /* --- 모션 --- */
  --ease: 0.2s ease;

  /* --- 타이포 --- */
  --font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
}