/* ─────────────────────────────────────────
   담하로 디자인 시스템
   Primary : #285398 (딥 네이비블루)
   Accent  : #96a9c7 (페일 스카이블루)
───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

:root {
  --primary:       #285398;
  --primary-light: #3a6db8;
  --primary-pale:  #dde8f7;
  --primary-dark:  #1a3a72;
  --primary-deep:  #0f2548;

  --accent:        #96a9c7;
  --accent-light:  #b8c9de;
  --accent-soft:   #eaf0f8;

  --bg:            #f4f7fc;
  --white:         #FFFFFF;
  --gray-100:      #F7F8FA;
  --gray-200:      #E8ECF2;
  --gray-400:      #B0BAC8;
  --gray-600:      #7A8499;
  --text:          #0f2548;
  --text-muted:    #5a6a82;

  --red:           #EF4444;
  --red-pale:      #FEF2F2;

  --radius:        16px;
  --radius-sm:     10px;
  --shadow:        0 4px 20px rgba(40,83,152,.10);
  --shadow-hover:  0 8px 32px rgba(40,83,152,.18);
  --glow:          0 0 0 3px rgba(150,169,199,.35);
}

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

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

h1, h2, h3, .logo {
  font-family: 'Gowun Dodum', sans-serif;
}

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

/* ── 네비게이션 ── */
.nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(40,83,152,.07);
}
.nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
}
.nav-logo {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo span { font-size: .75rem; color: var(--text-muted); font-family: 'Noto Sans KR', sans-serif; }
.nav-link {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all .2s;
}
.nav-link:hover, .nav-link.active {
  background: var(--primary-pale);
  color: var(--primary);
}

/* ── 공통 컨테이너 ── */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* ── 페이지 헤더 ── */
.page-header {
  margin-bottom: 32px;
}
.page-header h1 {
  font-size: 1.75rem;
  color: var(--primary-deep);
  margin-bottom: 6px;
}
.page-header p {
  color: var(--text-muted);
  font-size: .9rem;
}

/* ── 카드 ── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* ── 뱃지 ── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 500;
}
.badge-primary { background: var(--primary-pale); color: var(--primary); }
.badge-accent  { background: var(--accent-soft);  color: var(--primary-dark); }
.badge-red     { background: var(--red-pale);      color: var(--red); }

/* ── 버튼 ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 24px;
  font-size: .875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Noto Sans KR', sans-serif;
}
.btn-primary {
  background: var(--primary);
  color: var(--white);
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary-pale);
}
.btn-ghost:hover { background: var(--primary-pale); }

/* ── 스크롤 페이드업 애니메이션 ── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .nav-inner { padding: 0 16px; }
  .container { padding: 24px 16px; }
  .nav-link span { display: none; }
}