:root {
  /* 최저카 모바일 앱 가이드 */
  --color-bg-page: #f6f8fb;
  --color-bg: #ffffff;
  --color-bg-muted: #f3f7ff;
  --color-bg-muted-2: #eef2ff;
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-navy: #07152f;
  --color-accent: #2563ff;
  --color-accent-soft: rgba(37, 99, 255, 0.12);
  --color-point-purple: #7c5cff;
  --color-border: #e8edf5;
  --color-border-strong: #dce3f0;
  --color-teal: #1d4ed8;
  --color-footer: #f4f7fc;
  --color-promo: #eef4ff;

  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-nav: 0 -4px 24px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 8px 24px rgba(15, 23, 42, 0.06);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-pill: 14px;
  --radius-btn: 16px;
  --radius-nav: 24px;

  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 22px;
  --space-xl: 28px;
  --space-page-x: 20px;
  --space-section-y: 32px;

  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bottom-nav-h: 86px;
  --app-max-w: 420px;
}

@media (max-width: 770px) {
  :root {
    --app-max-w: 100%;
  }
}