@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');
/* ── KONIVO Nav — Icon-free, editorial-grade navigation ── */

:root {
  --nav-h: 64px;
}

/* ── Wrapper ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid #e8ecf0;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}

/* ── Logo ── */
.nav-logo {
  font-family: 'Noto Sans KR', 'Inter', system-ui, sans-serif;
  font-size: 16px; font-weight: 500; letter-spacing: -0.4px;
  color: #0d253d; text-decoration: none; flex-shrink: 0;
}
.nav-logo span { color: #533afd; font-weight: 400; }

/* ── Desktop menu ── */
.nav-menu { display: flex; align-items: center; gap: 0; }
.nav-item  { position: relative; }

.nav-top-link {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Noto Sans KR', 'Inter', system-ui, sans-serif;
  font-size: 13.5px; font-weight: 400; color: #3d4f61;
  text-decoration: none; padding: 8px 14px;
  border-radius: 6px;
  transition: color .12s, background .12s;
  white-space: nowrap; cursor: pointer;
  background: none; border: none;
  letter-spacing: -0.1px;
}
.nav-top-link:hover,
.nav-item:hover > .nav-top-link,
.nav-top-link.is-active { color: #0d253d; background: rgba(13,37,61,0.05); }

/* Chevron — pure text, no icon dependency */
.chevron-text {
  font-size: 8px; color: #8a9ab0; display: inline-block;
  transition: transform .18s;
  line-height: 1; margin-top: 1px;
}
.nav-item:hover > .nav-top-link .chevron-text { transform: rotate(180deg); color: #533afd; }

/* ── Dropdown panel ── */
.nav-dropdown {
  position: absolute;
  top: 100%; left: 50%;
  /*
   * padding-top: 10px — 네비게이션 바와 드롭다운 패널 사이의
   *   시각적 간격을 hover 영역 안으로 흡수하여
   *   미우스가 간격을 지나치더라도 hover가 유지됨
   *
   * ::before 투명 오뺄레이도 같은 동작 (double-safe)
   */
  padding: 10px 8px 8px 8px;
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 4px 6px rgba(0,0,0,0.04),
    0 16px 48px rgba(13,37,61,0.10);
  min-width: 240px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 200;
}
/* 드롭다운 위쪽에 투명 호버 브릿지 — 간격을 지나치는 순간 hover가 끊기지 않도록 */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
  background: transparent;
}
.nav-item:hover > .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Wide variants */
.nav-dropdown.wide {
  min-width: 440px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  padding: 12px 8px 10px;
}
.nav-dropdown.wide3 {
  min-width: 660px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  padding: 12px 8px 10px;
}

/* Section labels */
.nav-dropdown-label {
  grid-column: 1 / -1;
  font-size: 10px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a9ab0;
  padding: 2px 12px 8px;
}
.nav-dropdown-section-title {
  grid-column: 1 / -1;
  font-size: 10px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a9ab0;
  padding: 10px 12px 6px;
  border-top: 1px solid #f0f3f7; margin-top: 4px;
}
.nav-dropdown-section-title:first-child { border-top: none; margin-top: 0; padding-top: 2px; }

.nav-dropdown-divider {
  grid-column: 1 / -1; height: 1px; background: #f0f3f7; margin: 4px 0;
}

/* Dropdown items — text only, no icon */
.nav-dropdown-item {
  display: flex; align-items: flex-start; gap: 0;
  padding: 9px 12px; border-radius: 8px;
  text-decoration: none; transition: background .1s;
  color: #273951;
}
.nav-dropdown-item:hover,
.nav-dropdown-item.is-active { background: #f5f7fa; }
.nav-dropdown-item:hover .ndi-title,
.nav-dropdown-item.is-active .ndi-title { color: #533afd; }

.ndi-text { display: flex; flex-direction: column; gap: 2px; }
.ndi-title {
  font-size: 13px; font-weight: 400; color: #0d253d;
  line-height: 1.3; letter-spacing: -0.1px;
  transition: color .1s;
}
.ndi-desc {
  font-size: 11.5px; font-weight: 400; color: #8a9ab0;
  line-height: 1.4; letter-spacing: -0.05px;
}
.ndi-current {
  display: inline-block;
  font-size: 9px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
  color: #533afd; background: rgba(83,58,253,0.1);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px;
  vertical-align: middle;
}

/* ── CTA ── */
.nav-cta {
  font-family: 'Noto Sans KR', 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 400; letter-spacing: -0.1px;
  padding: 7px 16px; border-radius: 9999px; border: none; cursor: pointer;
  background: #533afd; color: #fff; text-decoration: none;  /* button-primary-pill */
  transition: background .15s, opacity .15s;
  white-space: nowrap; margin-left: 8px;
  flex-shrink: 0;
}
.nav-cta:hover { background: #4434d4; }  /* primary-deep */

/* ── Hamburger — CSS only, no icon ── */
.hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 10px 8px; width: 44px; height: 44px; /* 탭타겟 44px */
  margin-right: -8px;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: #3d4f61; border-radius: 2px;
  transition: all .2s;
}

/* ── Mobile nav ── */
.mobile-nav {
  display: none; flex-direction: column; gap: 0;
  border-top: 1px solid #e8ecf0;
  background: #fff; max-height: 85vh; overflow-y: auto;
}
.mobile-nav.open { display: flex; }

.mobile-nav-section { border-bottom: 1px solid #f0f3f7; padding-bottom: 4px; }

.mobile-nav-category {
  padding: 14px 24px 6px;
  font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a9ab0;
}
.mobile-nav a {
  display: block; padding: 10px 24px 10px 32px;
  font-size: 14px; font-weight: 400; color: #273951;
  text-decoration: none; letter-spacing: -0.1px;
  transition: color .12s, background .12s;
}
.mobile-nav a:hover { color: #533afd; background: rgba(83,58,253,0.04); }

.mobile-nav-cta {
  padding: 16px 24px 20px;
}
.mobile-nav-cta a {
  display: block; text-align: center;
  padding: 11px !important;
  background: #533afd; color: #fff !important;  /* button-primary-pill */
  border-radius: 9999px; font-weight: 400 !important;
  font-size: 14px !important; letter-spacing: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .nav-menu  { display: none; }
  .hamburger { display: flex; }
  .nav-inner { padding: 0 20px; }
}