/* =====================================================================
   Navigation — 주메뉴 (데스크탑 가로 + 모바일 드롭다운)
   ---------------------------------------------------------------------
   메뉴 스타일의 단일 진실 공급원. (예전엔 layout + overrides 두 곳에
   중복돼 !important 가 쌓였음 — 여기로 통합.)
   모바일은 헤더 바로 아래로 "스르륵" 펼쳐지는 드롭다운 패널.
   슬라이드는 grid-template-rows 0fr→1fr 로 구현(display 는 transition 불가).
   GP 가 메뉴를 display:none 으로 숨기는 규칙 1개만 !important 로 제압한다.
   ===================================================================== */

.main-navigation { background: var(--color-surface); }

/* 메뉴 링크 공통 */
.main-navigation .main-nav ul li a {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--color-primary);
}

/* ── 데스크탑 (가로 메뉴) ───────────────────────────── */
@media (min-width: 769px) {
  /* 줄 높이 축소(헤더 높이는 네비 항목 높이에 좌우됨) */
  .main-navigation .main-nav > ul > li > a { padding-block: var(--space-2); line-height: 1.4; }
  /* 현재 메뉴: 하단 강조선 */
  .main-navigation .main-nav > ul > li.current-menu-item > a {
    box-shadow: inset 0 -3px 0 var(--color-primary);
  }
}

/* 햄버거/닫기(X) 버튼 스타일은 아래 모바일 미디어쿼리 안에 둔다.
   (데스크탑에선 GP 가 토글버튼을 display:none 으로 숨기므로 건드리지 않음 —
    미디어쿼리 밖에서 display 를 지정하면 데스크탑에 버튼이 튀어나온다.) */

/* ── 모바일 드롭다운 패널 ──────────────────────────────
   GP "Mobile Menu Control" 구조: 헤더(.inside-header, flex) 안에
   [브랜딩] [#mobile-menu-control-wrapper(햄버거)] [#site-navigation(실제 메뉴)]
   가 형제로 들어있다. 햄버거를 누르면 둘 다 .toggled 가 붙는다.
   #site-navigation 이 flex 아이템인 채로 펼쳐지면 헤더가 늘어나 콘텐츠를
   밀어내므로, 메뉴 nav 통째로 absolute 로 띄워 흐름에서 제거한다.
   (ID 셀렉터 1,0,0 으로 GP 제압 — display:none 1줄만 !important.) */
@media (max-width: 768px) {
  /* ── 헤더 햄버거(컨트롤 래퍼) 버튼: 정사각형 ──
     GP(.main-navigation .menu-toggle, 0,2,0)·"메뉴 항목 높이"가 세로 패딩을
     키우므로 .site-header(0,3,0)로 제압. 모바일에서만 적용해야 데스크탑에
     버튼이 안 생긴다. */
  .site-header .main-navigation .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;          /* 정사각형 */
    padding: var(--space-2);
    line-height: 1;
    color: var(--color-primary-strong);
    font-weight: var(--fw-bold);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .site-header .main-navigation .menu-toggle:hover,
  .site-header .main-navigation.toggled .menu-toggle {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  /* 떠 있는 패널의 기준점 */
  .site-header .inside-header { position: relative; }

  /* 실제 메뉴 nav 전체를 헤더 바로 아래로 띄움(flex 흐름에서 제거 → 헤더 안 늘어남) */
  .site-header #site-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--color-surface);
  }
  /* 열렸을 때만 패널 외곽선/그림자(닫힘 상태 0높이일 때 잔상 방지).
     margin-top:0 으로 GP main.min.css 의
     .has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em} 제압
     (둘 다 0,3,0 → 우리가 뒤에 로드되어 승) → 드롭다운이 헤더에 밀착. */
  .site-header #site-navigation.toggled {
    margin-top: 0;
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  /* #site-navigation 자체 토글 버튼은 헤더 햄버거가 대신하므로 숨김 */
  .site-header #site-navigation .menu-toggle { display: none; }
  /* GP inside-navigation(flex/grid) → 패널 내부는 세로 스택 */
  .site-header #site-navigation .inside-navigation { display: block; padding: 0; max-width: none; }

  /* 슬라이드: .main-nav 의 grid-template-rows 0fr→1fr (display 는 transition 불가) */
  .site-header #site-navigation .main-nav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease);
  }
  .site-header #site-navigation.toggled .main-nav { grid-template-rows: 1fr; }

  /* 안쪽 ul: 1fr 트랙 안에서 overflow 로 클리핑 (슬라이드 핵심).
     실제로 보이는 항목이 얹히는 면이므로 흰 배경을 직접 줘 투명 방지. */
  .site-header #site-navigation .main-nav > ul {
    display: block !important;   /* GP 의 :not(.toggled) display:none 제압(단 1개) */
    overflow: hidden;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-surface);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .site-header #site-navigation.toggled .main-nav > ul { opacity: 1; }

  /* 메뉴 항목 */
  .site-header #site-navigation .main-nav > ul > li {
    margin: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .site-header #site-navigation .main-nav > ul > li:last-child { border-bottom: 0; }

  .site-header #site-navigation .main-nav > ul > li > a {
    display: block;
    padding: var(--space-2) var(--space-5);   /* 세로 8px → 줄 높이 축소 */
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-text);
    border: 0;            /* GP nav-float / current 좌측선 제거 */
    box-shadow: none;
  }
  .site-header #site-navigation .main-nav > ul > li > a:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  /* 현재 메뉴: 좌측 강조 막대 */
  .site-header #site-navigation .main-nav > ul > li.current-menu-item > a,
  .site-header #site-navigation .main-nav > ul > li.current-menu-ancestor > a {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    box-shadow: inset 3px 0 0 var(--color-primary);
  }

  /* 동작 줄이기 선호 시 슬라이드 비활성화 */
  @media (prefers-reduced-motion: reduce) {
    .site-header #site-navigation .main-nav { transition: none; }
    .site-header #site-navigation .main-nav > ul { transition: none; }
  }
}