/* 색상, 폰트, 간격, 그림자, 애니메이션 순으로 정렬 */
:root {
  /* 🎨 색상 팔레트 */
  --color-primary: #0a7545;
  --color-primary-dark: #095f39;
  --color-accent: #24a148;
  --color-accent-dark: #1a8c3d;
  --color-kakao: #fae100;
  --color-kakao-hover: #ffe000;

  --color-text-light: #fff;

  --color-gray: #f8f8f8;
  --color-gray-light: #f2f2f2;
  --color-border: #eaeaea;
  --color-shadow: rgba(0, 0, 0, 0.1);

  --color-glass: rgba(255, 255, 255, 0.4);
  --color-glass-strong: rgba(255, 255, 255, 0.95);
  --color-overlay-dark: rgba(0, 0, 0, 0.4);
  --color-overlay-green: rgba(10, 117, 69, 0.6);

  /* 🔠 폰트 설정 */
   /* === Font Family Tokens (Nanum Gothic로 통일) === */
  --ff-sans: "Nanum Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic",
              "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  /* 본문/기본 폰트: 산세리프 */
  --font-family-base: var(--ff-sans);

  /* 제목 폰트도 동일하게(원하면 나중에 별도 서체로 분리 가능) */
  --font-family-heading: var(--ff-sans);

  /* 굵기 토큰(필요 시 사용) */
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* === Korean-friendly typography tokens for Nanum Gothic === */
  /* 본문/제목 라인헤이트 */
  --lh-body: 1.65;       /* 본문: 1.6~1.7 권장, 중간값 */
  --lh-heading-1: 1.25;  /* H1 */
  --lh-heading-2: 1.30;  /* H2 */
  --lh-heading-3: 1.35;  /* H3/H4 공용으로 써도 무방 */

  /* 자간(글자 간격) — 한글은 과도한 letter-spacing 비권장 */
  --ls-body: 0em;           /* 본문: 기본 0 */
  --ls-heading-1: -0.01em;  /* H1 살짝 타이트 */
  --ls-heading-2: -0.005em; /* H2 */
  --ls-heading-3: -0.003em; /* H3/H4 */
  --ls-latin: 0.02em;       /* 영문/숫자 혼용 시 가독성 보정용 */

  /* 텍스트 컬러 — 화이트 배경 기준 WCAG AA 이상 권장 값 */
  --color-text: #111827;        /* 본문 기본(near black) */
  --color-text-2nd: #374151;    /* 보조 텍스트(설명/서브헤드) */
  --color-text-muted: #4B5563;  /* 캡션/메모: 12~14px 이상에서 사용 */

  /* 선택: 다크 모드 토큰 (사용 시 아래 3)에서 활성화) */
  --color-text-dark: #E5E7EB;
  --color-text-2nd-dark: #CBD5E1;
  --color-text-muted-dark: #94A3B8;

  /* 📐 간격 시스템 */
  --section-padding: 80px 20px;
  --gap-lg: 40px;
  --gap-md: 20px;
  --gap-sm: 10px;

  /* 🧱 테두리 & 그림자 */
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  --box-shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);

  /* 🎞️ 애니메이션 속도 */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}