:root {
  /* 브랜드 컬러 */
  --color-white: #ffffff;
  --color-ivory: #faf8f3;
  --color-champagne-gold: #c8a45d;
  --color-deep-gold: #9c7a35;
  --color-charcoal: #222222;
  --color-gray-900: #333333;
  --color-gray-700: #666666;
  --color-gray-500: #999999;
  --color-gray-200: #eeeeee;
  --color-gray-100: #f4f4f4;

  /* 의미 기반 컬러 */
  --color-primary: var(--color-champagne-gold);
  --color-primary-dark: var(--color-deep-gold);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-gray-700);
  --color-border: var(--color-gray-200);
  --color-background: var(--color-white);
  --color-background-soft: var(--color-ivory);
  --color-bg: #fbfaf7;
  --color-surface: #ffffff;
  --color-gold: #c8a75a;
  --color-gold-dark: #9c7a2f;
  --color-muted: #6f6a60;
  --color-border-soft: rgba(200, 167, 90, 0.25);

  /* 폰트 */
  --font-family-base: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-en: "Pretendard", "Inter", Arial, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;
  --font-size-3xl: 48px;
  --font-size-hero: clamp(40px, 5vw, 72px);
  --font-size-section-title: clamp(32px, 4vw, 52px);
  --font-size-card-title: clamp(22px, 2vw, 30px);
  --font-size-body-lg: clamp(16px, 1.35vw, 18px);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* 간격 */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-30: 120px;

  --section-padding-mobile: var(--spacing-12);
  --section-padding-tablet: var(--spacing-16);
  --section-padding-desktop: var(--spacing-24);
  --section-padding-desktop-lg: clamp(96px, 9vw, 120px);
  --section-padding-mobile-lg: clamp(56px, 14vw, 72px);
  --card-gap-desktop: clamp(24px, 2.5vw, 32px);
  --card-gap-mobile: clamp(16px, 5vw, 20px);
  --container-padding-mobile: var(--spacing-5);
  --container-padding-desktop: var(--spacing-8);
  --container-max-width: 1200px;

  /* 버튼 */
  --button-height-sm: 40px;
  --button-height-md: 48px;
  --button-height-lg: 56px;
  --button-padding-x-sm: 18px;
  --button-padding-x-md: 24px;
  --button-padding-x-lg: 32px;
  --button-font-size: var(--font-size-sm);
  --button-font-weight: var(--font-weight-semibold);
  --button-letter-spacing: 0;
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-dark);
  --button-primary-text: var(--color-white);
  --button-secondary-bg: var(--color-white);
  --button-secondary-border: var(--color-primary);
  --button-secondary-text: var(--color-primary-dark);

  /* 그림자 */
  --shadow-none: none;
  --shadow-soft: 0 8px 24px rgba(34, 34, 34, 0.06);
  --shadow-medium: 0 12px 32px rgba(34, 34, 34, 0.1);
  --shadow-focus: 0 0 0 3px rgba(200, 164, 93, 0.24);
  --shadow-card: 0 18px 46px rgba(34, 34, 34, 0.07);
  --shadow-card-hover: 0 24px 60px rgba(34, 34, 34, 0.1);
  --shadow-gold-soft: 0 14px 32px rgba(156, 122, 53, 0.13);

  /* Border Radius */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --radius-button: 999px;
  --radius-card: 22px;
  --radius-card-lg: 30px;
  --radius-image: 24px;

  /* 전환 */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
}

html {
  background: var(--color-bg);
}

body {
  color: var(--color-text);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:not(.admin-page) {
  background: var(--color-bg);
}

body:not(.admin-page) :where(h1, h2, h3, h4, p, a, button, span, li, dt, dd) {
  word-break: keep-all;
}

.button {
  display: inline-flex;
  min-height: var(--button-height-md);
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: 0 var(--button-padding-x-md);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-family-base);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.button--primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.button--primary:hover {
  background-color: var(--button-primary-bg-hover);
}

.button--secondary {
  border-color: var(--button-secondary-border);
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.button--secondary:hover {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}