/* ============================================================================
   nav.css
   ----------------------------------------------------------------------------
   상단 네비게이션 (PublicNav)의 스타일.

   섹션 구조:
     1) Nav 컨테이너 (sticky 헤더)
     2) 좌측 그룹 (로고 + 메뉴 리스트)
     3) 메뉴 링크 (일반 / 활성 / 호버)
     4) 서브메뉴 있는 메뉴 (parent + 드롭다운)
     5) 우측 그룹 (로그인 + CTA)

   유지보수 팁:
     - 색상은 절대 하드코딩하지 말고 tokens.css의 CSS Variable 사용
     - hover 스타일은 반드시 `:hover` / `:focus-visible` 안에서만 정의
       → JS로 미리 hover 클래스 붙이지 않기
     - 서브메뉴 드롭다운은 CSS만으로 동작 (JS 필요 없음)
   ============================================================================ */


/* ─────────────────────────────────────────────
   1) Nav 컨테이너 (sticky 헤더)
   ───────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;                                   /* 다른 sticky 요소 위에 표시 */
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.88);         /* 반투명 배경 (스크롤 콘텐츠 살짝 비침) */
  backdrop-filter: saturate(180%) blur(12px);    /* 유리(glass) 효과 */
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--divider);
}

.nav__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;           /* 로고 | 메뉴(가운데) | 인증 */
  align-items: center;
  gap: var(--space-6);
}


/* ─────────────────────────────────────────────
   2) 좌측 그룹 (로고)
   ───────────────────────────────────────────── */
.nav__left {
  display: flex;
  align-items: center;
  justify-self: start;
}

.nav__logo {
  display: inline-flex;                          /* 로고 img 정렬을 위해 flex 컨테이너로 */
  align-items: center;
  text-decoration: none;
}

.nav__logo img {
  width: auto;
  height: 46px;
}

.nav__links {
  display: flex;
  align-items: center;
  justify-self: center;                          /* nav 바 정중앙 (그리드 2열) */
  gap: 4px;                                      /* 메뉴 항목 사이 여백 (좁게) */
}


/* ─────────────────────────────────────────────
   3) 메뉴 링크 · 기본/호버/활성/포커스 상태
   ───────────────────────────────────────────── */

/* 일반 메뉴 링크 (기본 상태) */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 8px 14px;
  border-radius: 10px;

  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);                  /* 기본 상태는 회색톤 */
  background: transparent;
  text-decoration: none;

  /* 부드러운 hover 전환 */
  transition:
    background-color 0.15s ease,
    color 0.15s ease;

  cursor: pointer;
}

/*
 * hover 상태 · CSS `:hover`로만 트리거
 * (JS에서 클래스를 미리 붙이지 않으므로, 마우스가 실제로 올라가야만 반응)
 */
.nav__link:hover {
  background: var(--brand-primary-50);           /* 아주 옅은 파랑 */
  color: var(--text-strong);                     /* 진해짐 */
}

/* 키보드 접근성 · Tab으로 포커스했을 때도 hover와 동일한 시각 피드백 */
.nav__link:focus-visible {
  outline: none;
  background: var(--brand-primary-50);
  color: var(--text-strong);
  box-shadow: 0 0 0 2px var(--brand-primary-500);
}

/*
 * 활성 상태 · 현재 페이지에 해당하는 메뉴만 이 클래스가 붙습니다.
 * hover와 별개로, 언제나 활성 상태를 시각적으로 표시.
 */
.nav__link--active {
  background: var(--brand-primary-100);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
}
.nav__link--active:hover {
  /* 이미 활성 상태인 메뉴 위에 hover 해도 색이 튀지 않도록 살짝만 진해짐 */
  background: var(--brand-primary-200);
}


/* ─────────────────────────────────────────────
   4) 서브메뉴 있는 메뉴 (parent + 드롭다운)
   ───────────────────────────────────────────── */

/* 서브메뉴가 있는 메뉴는 relative 컨테이너 필요 (드롭다운이 absolute로 배치되므로) */
.nav__item--has-submenu {
  position: relative;
}

.nav__link--parent {
  border: 0;
  font-family: inherit;
}

/* 부모 링크의 chevron (▾) */
.nav__chevron {
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease, color 0.15s ease;
}
.nav__link--parent:hover .nav__chevron,
.nav__item--has-submenu:hover .nav__chevron {
  color: var(--brand-primary-500);
  transform: rotate(180deg);                     /* hover 시 위쪽 화살표로 뒤집힘 */
}

/*
 * 서브메뉴 드롭다운
 * ─────────────────────────────────────────────
 * 기본 상태: 완전히 숨김 (opacity + visibility + translateY)
 * `.nav__item--has-submenu:hover` 시 표시.
 *
 * ⚠️ display:none 을 쓰지 않는 이유:
 *    transition 효과를 주려면 요소가 렌더링 트리에 남아 있어야 함.
 *    visibility:hidden + pointer-events:none 조합으로 완전 비활성화.
 */
.nav__submenu {
  position: absolute;
  top: 100%;                                     /* hover가 끊기지 않도록 부모 메뉴와 바로 연결 */
  left: 0;
  min-width: 240px;

  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);

  display: flex;
  flex-direction: column;
  gap: 2px;

  /* 숨김 상태 (기본) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);

  /* 등장 애니메이션 */
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;

  z-index: 60;
}

/* hover 시 서브메뉴 표시 */
.nav__item--has-submenu:hover .nav__submenu,
.nav__item--has-submenu:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 서브메뉴 항목 */
.nav__submenu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;

  padding: 10px 12px;
  border-radius: 10px;

  text-decoration: none;
  transition: background-color 0.12s ease;
}
.nav__submenu-item:hover {
  background: var(--brand-primary-50);
}

.nav__submenu-label {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.nav__submenu-desc {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}


/* ─────────────────────────────────────────────
   5) 우측 그룹 (로그인 + CTA)
   ───────────────────────────────────────────── */
.nav__right {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-self: end;
}

.nav__mobile-actions,
.nav__mobile-toggle {
  display: none;
}

.nav__logout-form {
  margin: 0;
}

.nav__logout {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav__auth {
  padding: 8px 14px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav__auth:hover {
  color: var(--text-strong);
  background: var(--brand-primary-50);
}


/* ─────────────────────────────────────────────
   보조: 로고 클래스 (icons.js가 붙이는 클래스)
   ───────────────────────────────────────────── */
.gp-logo {
  /* icons.js에서 이미 style="height:...px" 인라인으로 지정하므로
     여기서는 공용 규칙만 정의합니다. */
  vertical-align: middle;
}


/* ─────────────────────────────────────────────
   반응형: 좁은 화면에서는 메뉴 간격 축소
   ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .nav__link { padding: 8px 10px; font-size: 14px; }
}

@media (max-width: 1024px) {
  .nav__inner {
    position: relative;
    display: flex;                               /* 로고 ↔ 햄버거 양끝 정렬 */
    justify-content: space-between;
  }

  .nav__logo img {
    height: 34px;
    width: auto;
  }

  .nav__right {
    display: none;
  }

  .nav__mobile-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--brand-primary-50);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }

  .nav__mobile-toggle span {
    width: 100%;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--brand-navy-900);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav--open .nav__mobile-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav--open .nav__mobile-toggle span:nth-child(2) {
    opacity: 0;
  }

  .nav--open .nav__mobile-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav__links {
    position: absolute;
    top: calc(var(--nav-h) - 1px);
    left: var(--space-6);
    right: var(--space-6);
    justify-self: stretch;                       /* 데스크톱의 center 를 되돌린다.
                                                    absolute 박스에도 justify-self 가 먹어서
                                                    left/right 대신 내용 너비로 줄어든다 */
    max-height: calc(100vh - var(--nav-h) - var(--space-6));
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-1);
    overflow-y: auto;
  }

  .nav--open .nav__links {
    display: flex;
  }

  .nav__link {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
  }

  .nav__submenu {
    position: static;
    min-width: 0;
    margin: 2px 0 8px var(--space-3);
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 2px solid var(--brand-primary-200);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav__chevron {
    transform: rotate(180deg);
  }

  .nav__mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 1px solid var(--divider);
  }

  .nav__mobile-actions--single {
    grid-template-columns: 1fr;
  }

  .nav__mobile-actions .nav__auth,
  .nav__mobile-actions .nav__logout,
  .nav__mobile-actions .btn,
  .nav__mobile-actions .nav__logout-form {
    width: 100%;
  }

  .nav__mobile-actions .nav__auth,
  .nav__mobile-actions .nav__logout {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .nav__inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .nav__links {
    left: var(--space-4);
    right: var(--space-4);
  }

  .nav__mobile-actions {
    grid-template-columns: 1fr;
  }
}