/* CSS 변수 */
:root {
  --color-primary: #B5836A;
  --color-primary-dark: #7D4F3A;
  --color-bg: #FAF7F2;
  --color-accent: #8BA888;
  --color-accent-light: #C8DCC6;
  --color-text: #2C2C2C;
  --color-text-secondary: #6B6B6B;
  --color-border: #E8E0D5;
  --color-white: #FFFFFF;

  --font-serif: 'Noto Serif KR', serif;
  --font-sans: 'Noto Sans KR', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* 공통 버튼 */
.btn-primary {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--color-primary-dark); }

/* 컨테이너 */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* 반응형 기준점 */
/* Mobile: ~767px (기본) */
/* Tablet: 768px~ */
/* Desktop: 1024px~ */