/* =========================================================================
   디지털해결사 — 디자인 토큰 (단일 관리 지점)
   색상/폰트/간격을 모두 여기서 정의한다. 다른 CSS는 이 변수만 참조한다.
   ========================================================================= */
:root {
  /* --- 브랜드 색상 --- */
  --color-main: #BFDE6C;     /* 라임/연두 — 헤더, 브랜드 정체성 */
  --color-main-dark: #A4C94A;/* 라임 변형 — 테두리/hover */
  --color-accent1: #FCB408;  /* 노랑/주황 — 핵심 버튼(설치, 쿠팡 등) */
  --color-accent2: #E63946;  /* 빨강 — 경고/중요 알림(제한적 사용) */
  --color-text: #333333;     /* 기본 텍스트(가독성 우선) */
  --color-text-soft: #5f5f5f;/* 보조 텍스트 */
  --color-bg: #FFFFFF;       /* 카드 배경(흰색 — 글 읽는 면) */
  --color-app-bg: #F2F4EB;   /* 페이지 배경(은은한 톤 — 카드가 떠 보이게, 카톡처럼 익숙) */
  --color-bg-soft: #F6F8F0;  /* 카드 안 옅은 영역(입력칸·코드블록 등) */
  --color-border: #E6E8E0;   /* 카드/구분선(톤 배경에 맞춰 살짝 연하게) */

  /* 버튼 위 글자색 */
  --color-on-main: #2a3d00;  /* 라임 위 진한 글자 */
  --color-on-accent1: #4a3500;
  --color-on-accent2: #ffffff;

  /* --- 폰트 크기 (시니어 가독성 최우선: 글자 읽기 어려움 → 크게) --- */
  --fs-body: 20px;
  --fs-small: 17px;
  --fs-lead: 23px;
  --fs-title: 29px;
  --fs-hero: 35px;
  --fs-btn: 22px;            /* 버튼 글자는 더 크게 */

  --lh-base: 1.7;            /* 줄간격 넉넉히 (노안 가독성) */
  --font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- 간격 --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- 버튼/터치 영역 (손가락으로 누르기 쉽게) --- */
  --btn-min-h: 52px;         /* 최소 48px 이상 권고 → 여유 있게 52px */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;

  /* --- 레이아웃 --- */
  --max-width: 720px;        /* 모바일 우선, 큰 화면에서도 읽기 편한 폭 */
  --header-h: 64px;
  /* 부드러운 다층 그림자 — 또렷하지 않게, 은은하게 떠 있는 느낌 */
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.07);
  --shadow-strong: 0 10px 28px rgba(16, 24, 40, 0.13);
}