/* 상단 메뉴 공통 스타일: 모든 페이지가 같은 파일을 쓴다(메뉴 항목은 tools/nav.mjs) */
header.site {
  --nv-ink: #17191c; --nv-body: #46484d; --nv-line: #e3e3e5; --nv-blue: #1456d6; --nv-h: 68px;
}
header.site > .wrap, header.site > .site-wrap { height: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
header.site .brand { margin-right: auto; flex: none; }

header.site nav.main { flex: none; }
header.site nav.main ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
header.site nav.main a {
  position: relative; display: block; text-decoration: none; font-size: 15px; line-height: 1.4; font-weight: 500; white-space: nowrap;
  color: var(--nv-body); padding: 8px 12px; border-radius: 999px; transition: background .15s, color .15s;
}
header.site nav.main a:hover { background: rgba(23, 25, 28, .05); color: var(--nv-ink); }
/* 지금 보고 있는 곳: 다른 페이지는 aria-current, 홈은 스크롤 위치(.on) */
header.site nav.main a[aria-current], header.site nav.main a.on { color: var(--nv-blue); font-weight: 700; background: rgba(45, 140, 255, .10); }
header.site nav.main a:focus-visible, header.site .nav-cta:focus-visible, header.site .menu-btn:focus-visible { outline: 3px solid #2d8cff; outline-offset: 2px; }

header.site .nav-cta {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; font-size: 15px; font-weight: 600; line-height: 1.4;
  color: #fff; padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, #2d8cff, #1456d6);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .08); transition: transform .15s ease, box-shadow .2s;
}
header.site .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 24px rgba(16, 24, 40, .12); }
header.site .nav-cta-d { flex: none; margin-left: 6px; }
header.site .nav-cta-m, header.site .menu-btn { display: none; }

/* 좁은 화면: 햄버거 + 전체 너비 메뉴판 */
@media (max-width: 1080px) {
  header.site nav.main a { padding: 8px 9px; font-size: 14.5px; }
  header.site .nav-cta-d { padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 980px) {
  header.site .nav-cta-d { display: none; }
  header.site .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
    background: #fff; border: 1px solid var(--nv-line); border-radius: 12px; cursor: pointer;
  }
  header.site .menu-btn .bars, header.site .menu-btn .bars::before, header.site .menu-btn .bars::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--nv-ink); content: ""; transition: transform .2s, background .2s;
  }
  header.site .menu-btn .bars { position: relative; }
  header.site .menu-btn .bars::before { position: absolute; left: 0; top: -6px; }
  header.site .menu-btn .bars::after { position: absolute; left: 0; top: 6px; }
  header.site .menu-btn[aria-expanded="true"] .bars { background: transparent; }
  header.site .menu-btn[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
  header.site .menu-btn[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

  header.site nav.main {
    position: fixed; left: 0; right: 0; top: var(--nv-h); display: none; box-sizing: border-box; max-height: calc(100vh - var(--nv-h)); max-height: calc(100dvh - var(--nv-h)); overflow-y: auto;
    background: #fff; border-bottom: 1px solid var(--nv-line); box-shadow: 0 16px 32px rgba(16, 24, 40, .12); padding: 8px 20px 20px;
  }
  header.site nav.main.open { display: block; }
  header.site nav.main ul { flex-direction: column; align-items: stretch; gap: 2px; }
  header.site nav.main li a { font-size: 17px; padding: 14px 14px; border-radius: 12px; }
  header.site .nav-cta-m { display: block; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--nv-line); }
  header.site nav.main .nav-cta { color: #fff; font-size: 16px; padding: 14px 18px; border-radius: 999px; }
  header.site nav.main .nav-cta:hover { color: #fff; background: linear-gradient(135deg, #2d8cff, #1456d6); }
}
@media (prefers-reduced-motion: reduce) {
  header.site .menu-btn .bars, header.site .menu-btn .bars::before, header.site .menu-btn .bars::after, header.site .nav-cta { transition: none; }
}