/* ============================================
   variables.css — 색·글자·간격 (여기만 수정해도 전체 분위기 변경)
   ============================================ */
:root {
  /* 배경·글자 (흰색·검은색 조화) */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-soft: #4a4a4a;
  --color-muted: #737373;
  --color-line: #e0e0dc;
  --color-line-strong: #1a1a1a;

  /* 포인트 (전통 한식 — 검정 잉크 톤) */
  --color-accent: #1a1a1a;
  --color-accent-hover: #333333;
  --color-focus: #2563eb;

  /* 레이아웃 */
  --layout-max: 960px;
  --layout-wide: 1100px;
  /* 메뉴 카드 이미지 영역 (정사각형 비율) */
  --product-img-ratio: 1;

  /* 글꼴 */
  --font-body: "Noto Sans KR", system-ui, sans-serif;
  --font-heading: "Noto Serif KR", "Noto Sans KR", serif;

  /* 간격 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  /* 둥근 모서리 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* 그림자 (은은하게) */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* 전환 (접근성: 아래 reduced-motion에서 끔) */
  --transition-fast: 0.15s ease;
}

/* 태블릿·PC */
@media (min-width: 600px) {
  :root {
    --layout-max: 1040px;
  }
}

/* 움직임 줄이기 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
  }
}