/**
 * 웹 지도 MVP 공용 디자인 토큰 (docs/DESIGN_SYSTEM.md §2·§4·§5·§7).
 * 지도 페이지(index.html)와 소개 페이지(about/index.html)가 공유한다 —
 * 색·모서리를 두 파일에 따로 적어 어긋나는 것을 막는 단일 원천.
 * 테마는 라이트 #0066FF 고정 (CONTEXT "웹 지도 MVP").
 */
:root {
  --brand: #0066FF;

  --gray-50: #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-700: #3F3F46;
  --gray-900: #18181B;

  --error: #EF4444;
  --error-strong: #DC2626;

  /* §5 모서리 */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-sheet: 24px;
  --r-full: 999px;

  /* §5 그림자 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, .07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);

  /* §7 모션 */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --app-h: 100vh; /* iOS 사파리 폴백 */
}
@supports (height: 100dvh) {
  :root { --app-h: 100dvh; }
}

/* 키보드 포커스 표시는 전 페이지 공통 규칙으로 둔다. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}