/* =============================================
   00_shared / variables.css
   ✏️ 브랜드 색상·폰트·레이아웃 전역 변수
   모든 섹션 CSS가 이 파일을 @import 합니다
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

:root {
  /* 🎨 브랜드 색상 */
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dark:   #9A7A2E;
  --navy:        #0D1B2E;
  --navy-mid:    #152235;
  --navy-light:  #1E3050;
  --white:       #FFFFFF;
  --off-white:   #F5F2EC;
  --text-light:  #E8DFC8;
  --text-muted:  #8A9BB5;
  --accent-bg:   #112040;

  /* 📐 레이아웃 */
  --max-width:   1200px;
  --section-pad: 80px 20px;

  /* 🔤 폰트 */
  --font-sans:  'Noto Sans KR', sans-serif;
  --font-serif: 'Noto Serif KR', serif;
}

/* ===== 리셋 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}

/* ===== 공통 유틸 ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.gold-text { color: var(--gold); }

.section-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 48px;
  color: var(--white);
}
.section-title span { color: var(--gold); }

/* ===== 버튼 ===== */
.btn-gold {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: var(--navy);
  padding: 14px 36px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.btn-gold:hover { opacity: 0.85; }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--gold);
  padding: 12px 32px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--gold);
  letter-spacing: 0.02em;
  transition: all 0.2s;
}
.btn-outline:hover { background: var(--gold); color: var(--navy); }

/* ===== 반응형 브레이크포인트 ===== */
/* @media (max-width: 900px) { ... } → 각 섹션 CSS에서 선언 */