/* 우쿨스코어 디자인 토큰. 색, 글자, 간격은 이 파일의 변수만 사용한다. */
:root {
  /* 색상 */
  --color-brand: #0c71fe;         /* 로고 파란색 (UKUL 글자색) */
  --color-primary: #2563eb;       /* 주요 버튼과 선택 상태에만 사용 */
  --color-primary-hover: #1d4fd7;
  --color-primary-soft: #e8f0fe;
  --color-wood: #a8683c;          /* 장식 전용, 작은 글자에는 쓰지 않는다 */
  --color-wood-soft: #f7ede4;
  --color-text: #191f28;
  --color-text-sub: #5f6b7a;
  --color-text-faint: #8b95a1;
  --color-bg: #ffffff;
  --color-surface: #f2f4f6;
  --color-surface-strong: #e5e8eb;
  --color-line: #e5e8eb;
  --color-danger: #d92d20;
  --color-danger-soft: #fdecea;
  --color-success: #0f8a5f;
  --color-naver: #03a94d;
  --color-naver-hover: #029443;

  /* 글꼴 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 44px;

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 모양 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --shadow-float: 0 8px 24px rgba(25, 31, 40, 0.08);

  /* 레이아웃 */
  --content-width: 1200px;
  --gutter: 16px;
  --header-height: 72px;
  --tabbar-height: 64px;
  --buybar-height: 80px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (max-width: 767px) {
  :root {
    --text-3xl: 30px;
    --text-2xl: 24px;
    --header-height: 56px;
  }
}