/* 디자인 토큰 — docs/05-design-system.md */
:root {
  /* 색 */
  --navy: #041F47;
  --navy-hover: #0B3A7A;
  --navy-deep: #021631;
  --gold: #B8975A;
  /* 중요 안내 빨강. 한 색으로 흰 배경·네이비 배경 모두 4.5:1을 맞출 수 없어 배경별로 둔다 */
  --accent-red: #C62828;         /* 흰 5.62 · --bg-light 5.00 · --map-bg 4.69 */
  --accent-red-on-navy: #FF6B6B; /* --navy 5.86 · --navy-deep 6.51 */
  --bg-light: #EFF2F4;
  --bg-lighter: #F7F9FA;
  --map-bg: #E6EBF0;
  --border: #CBD3DD;
  --border-light: #DDE3EA;
  --text: #1A1F27;
  --text-body: #3A4352;
  --text-sub: #4A5464;
  --text-muted: #5A6578;
  --text-on-navy: #C9D3E0;
  --text-on-navy-muted: #9AA8BB;
  --line-on-navy: rgba(255, 255, 255, 0.12);
  --border-on-navy: rgba(255, 255, 255, 0.5);

  /* 글꼴 */
  --font-sans: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 그림자 (떠 있는 카드·패널만) */
  --shadow-card: 0 12px 32px rgba(4, 31, 71, 0.08);
  --shadow-panel: 0 20px 48px rgba(2, 22, 49, 0.28);
  --shadow-bar: 0 -6px 20px rgba(4, 31, 71, 0.08);

  /* 레이아웃 */
  --container: 1240px;
  --gutter: 28px;
  --header-h-mobile: 64px;
  --bottom-bar-h: 64px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 22px;
  }
}