:root {
  --navy: #0b1736;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --ink: #172033;
  --muted-ink: #667085;
  --line-light: #e3e9f2;
  --surface: #ffffff;
  --page: #f3f6fb;
  --bg: #f3f6fb;
  --surface-2: #f8fafc;
  --text: #172033;
  --muted: #667085;
  --accent: #2563eb;
  --accent-2: #0ea5e9;
}

html { overflow-x: hidden; background: var(--page); }
body { min-width: 0; margin: 0; overflow-x: hidden; background: var(--page); color: var(--ink); font-family: Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, sans-serif; }
.container { width: min(1560px, calc(100% - 40px)); margin-inline: auto; }
.modern-header { position: sticky; top: 0; z-index: 100; background: var(--navy); border: 0; color: #fff; box-shadow: 0 8px 24px rgba(11, 23, 54, .12); }
.modern-header .nav-wrap { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.modern-header .brand-wrap { display: flex; align-items: baseline; gap: 12px; }
.modern-header .brand { color: #fff; font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.modern-header .brand-subtitle { color: #9fb2da; font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.modern-header .nav-links { display: flex; align-items: center; gap: 6px; }
.modern-header .nav-links > a { color: #c9d5ee; text-decoration: none; padding: 10px 13px; border-radius: 9px; font-size: .9rem; font-weight: 650; }
.modern-header .nav-links > a:hover, .modern-header .nav-links > a.active { color: #fff; background: #1d4ed8; }
.modern-header .lang-switch { display: inline-flex; margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); gap: 3px; }
.modern-header .lang-switch a { color: #9fb2da; text-decoration: none; padding: 7px 9px; border-radius: 7px; font-size: .78rem; font-weight: 750; }
.modern-header .lang-switch a.active { color: #fff; background: rgba(255,255,255,.14); }
.nav-compact { display: none; }
.site-footer { border-top: 1px solid var(--line-light); background: #fff; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 720px) {
  .container { width: min(100% - 24px, 1560px); }
  .modern-header .nav-wrap { min-height: 60px; gap: 12px; }
  .modern-header .brand-subtitle { display: none; }
  .modern-header .nav-links > a { padding: 8px; font-size: .8rem; }
  .modern-header .lang-switch { margin-left: 2px; padding-left: 5px; }
}

@media (max-width: 430px) {
  .modern-header .nav-wrap { width: 100%; padding-inline: 9px; }
  .modern-header .brand-wrap { flex: 0 1 auto; min-width: 0; }
  .modern-header .brand { font-size: .96rem; }
  .modern-header .nav-links { flex: 0 0 auto; flex-wrap: nowrap; }
  .modern-header .nav-links { gap: 1px; }
  .modern-header .nav-links > a { padding: 7px 4px; font-size: .67rem; }
  .modern-header .nav-links > a.active { min-width: 30px; text-align: center; }
  .nav-full { display: none; }
  .nav-compact { display: inline; }
  .modern-header .lang-switch { border-left: 0; }
  .modern-header .lang-switch a { padding: 6px 5px; font-size: .7rem; }
}