/**
 * atJeju 사용자 프론트 — 디자인 토큰 (색, 간격, 레이아웃 상수)
 */
:root {
  /* Brand — 제주 바다·오름 톤 */
  --color-primary: #0d9488;
  --color-primary-dark: #0f766e;
  --color-primary-light: #ccfbf1;
  --color-accent: #f59e0b;

  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-text: #1a1d21;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-danger: #dc2626;

  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /** 브라우저(비 WebView) — body 상하 패딩; shell 높이는 2× 이 값을 뺌 */
  --app-viewport-v-pad: 0px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  --header-h: 56px;
  --tabbar-h: 60px;
  --sidebar-w: 220px;
  --app-max-width: 480px;
  --app-max-width-tablet: 960px;
  --app-max-width-desktop: 1280px;
  --desktop-content-max: 1120px;

  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  --z-header: 100;
  --z-tabbar: 100;
  --z-overlay: 200;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}