/* root.css — 프로젝트 전역 디자인 토큰 */

:root {
  --yellow: #FFD54A;
  --yellow-soft: #FFF8D9;
  --navy: #1F2A44;
  --dark: #333333;
  --light: #F7F7F7;
  --white: #FFFFFF;
  --kakao-yellow: #FEE500;
  --kakao-black: #191919;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
  --font: 'Noto Sans KR', -apple-system, sans-serif;
  --max-width: 1200px;
  /* 본문 블록(섹션 타이틀·FAQ·스텝 등) 최대 가로 폭 */
  --content-measure-max: 40rem;

  /* 의미 색 (텍스트·강조) — ui-classes.css 와 함께 사용 */
  --color-text-main: var(--dark);
  --color-text-primary: var(--navy);
  --color-text-hint: #64748b;
  --color-text-muted: #4a5568;
  --color-accent: #c62828;

  /* 입력 필드 공통 */
  --field-font-size: 1rem;
  --field-pad-y: 13px;
  --field-pad-x: 16px;
  --field-min-height: 48px;
  --field-radius: 10px;
  --field-border: 1px solid rgba(31, 42, 68, 0.14);
  --field-bg: var(--white);
  --field-focus-ring: 0 0 0 3px rgba(255, 213, 74, 0.2);
  --field-pad-y-sm: 10px;
  --field-pad-x-sm: 12px;
  --field-radius-sm: 8px;
  --field-border-muted: 1px solid rgba(15, 52, 96, 0.15);

  /* 간격 스케일 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;

  --color-link-hover: #2d3d62;
}