/*
 * GNB — is-solid 상태 색만 담당.
 * hover / transition 등 정적 유틸은 gnb.html Tailwind 클래스 사용.
 * (JS로 text-white↔text-black 토글하면 Tailwind CDN 정의 순서로 경합남)
 */

/* 드롭다운이 헤더 밖으로 펼쳐지도록 */
#header,
#headerBar,
#header nav,
#header ul,
#header li,
#header .group {
  overflow: visible;
}

/* ---- 기본 상태: 투명 배경 + 흰색 텍스트 + 히어로 구분 라인 ---- */
#headerBar {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#headerBar .nav-text {
  color: #fff;
}

/* img 로고는 color가 먹지 않으므로 필터로 화이트 전환 */
#headerBar .nav-logo {
  filter: brightness(0) invert(1);
}

#headerBar .nav-sub {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.4s ease;
}

#headerBar .nav-burger {
  color: #fff;
}

#headerBar .nav-cta {
  background-color: #fff;
  color: #000;
  box-shadow: none;
}

#headerBar .nav-cta:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* ---- 스크롤 상태: 화이트 배경 + 블랙 텍스트 ---- */
#headerBar.is-solid {
  background-color: #fff;
  border-bottom-color: rgba(36, 36, 36, 0.06);
  box-shadow: 0 6px 24px -18px rgba(0, 0, 0, 0.15);
}

#headerBar.is-solid .nav-text {
  color: #000;
}

#headerBar.is-solid .nav-logo {
  filter: none;
}

#headerBar.is-solid .nav-sub {
  color: rgba(0, 0, 0, 0.55);
}

#headerBar.is-solid .nav-burger {
  color: #000;
}

#headerBar.is-solid .nav-cta {
  background-color: #000;
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.2);
}

#headerBar.is-solid .nav-cta:hover {
  background-color: rgba(0, 0, 0, 0.85);
}

/* ---- 모바일 슬라이드 메뉴 ---- */
#mobileNav .acc-panel {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s;
}

#mobileNav .acc-panel.is-open {
  max-height: 320px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#mobileNav [data-acc-toggle][aria-expanded="true"] .acc-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  #headerBar .nav-sub,
  .gnb-dropdown,
  #mobileNav .acc-panel {
    transition: none !important;
  }
}
