/*
 * GNB — 목업(common/header.css) 보정
 *
 * 20260826 목업부터 하위 패널은 **`.header-inner` 밑의 공유 패널 하나**이고,
 * 여닫는 것은 CSS `:hover` 가 아니라 `.on` 클래스다(`GnbMenu` 가 React 상태로 붙인다).
 * 그래서 예전에 있던 `.gnb-panel-dismissed`(hover 로 열린 패널을 강제로 감추던 보정)는
 * **더 이상 필요 없어 지웠다** — 이제 닫는 것을 React 가 직접 한다.
 *
 * 목업 CSS 에는 항목마다 패널을 두던 시절의 `.header-nav .gnb-panel` 규칙이 아직 남아 있는데,
 * 이 앱의 패널은 `nav` **바깥**이라 그 규칙에 걸리지 않는다(`.header-inner .gnb-panel` 만 걸린다).
 */

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * 활성 항목은 **위치가 아니라 의미**로 고른다 (2026-08-25)
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * 목업 CSS 는 최상위 메뉴가 `이벤트 · 상품 · 커뮤니티` **3개**라고 전제하고 `nth-child` 로
 * 활성 항목을 골랐다. 지금 DOM 은 **4개**(`이벤트 · 기획전 · 상품 · 커뮤니티`)이고 그중
 * 한 항목이 폭에 따라 `display:none` 이라, 위치로 고르면 **숨겨진 항목에 활성 스타일이 걸린다.**
 *
 * 그래서 `GnbMenu` 가 항목마다 의미 클래스 `gnb-item-{event|plan|product|community}` 를
 * 내려보내고, 여기서 그 클래스로 다시 건다. 목업 원본(`common/header.css`)은
 * 건드리지 않고 **끈 뒤 다시 거는** 방식이다. 항목이 늘거나 순서가 바뀌어도 매핑이 깨지지 않는다.
 *
 * 이 파일은 `style.css` 뒤에 실린다(`src/app/layout.tsx`) — 특정도가 같으면 여기가 이긴다.
 *
 * ⚠ 목업 `common/_layout.css` 의 `.page-mobile-category` 안에도 같은 종류의 위치 전제
 *   (`.header-nav>ul>li:nth-child(2)` = `상품`)가 남아 있다. 그 클래스는 **목업 미리보기 전용**
 *   래퍼여서(`CH-U-MO-CA-01.html` — 전체 메뉴 오버레이를 강제로 열어 보이는 페이지) 이 앱의
 *   어떤 라우트도 쓰지 않는다. 전체 메뉴는 `MobileQuick` 이 띄우는 `MobileCategoryOverlay`
 *   (`.mobile-category-menu`)다. **실제로 적용되는 화면이 없어 보정하지 않는다** —
 *   나중에 그 래퍼를 라우트에 붙이게 되면 그때 같은 방식으로 의미 클래스로 걸어야 한다.
 */

/*
 * PC 상품 패널의 긴 바우처명은 열 너비(1024px 이하 105px) 안에서 줄바꿈한다.
 * 목업의 고정 높이(44px/28px)를 그대로 두면 다음 행·커뮤니티 열과 겹치므로
 * 상품 열만 내용에 맞춰 높이가 늘어나게 한다.
 */
@media (min-width: 769px) {
  .site-header .header-inner .gnb-panel .gnb-list.product > li > a {
    height: auto;
    min-height: 44px;
  }

  .site-header .header-inner .gnb-panel .gnb-list.product > li > ul > li > a {
    align-items: flex-start;
    height: auto;
    min-height: 28px;
    padding: 4px 0;
    line-height: 20px;
  }

  .site-header .header-inner .gnb-panel .gnb-list.product > li > ul > li > a::before {
    flex: 0 0 3px;
    margin-top: 8px;
  }

  .site-header .header-inner .gnb-panel .gnb-list.product > li > ul > li > a > span {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 20px;
  }
}

/*
 * 모바일 GNB 현재 위치 밑줄.
 *
 * 목업(common/header.css)은 `nth-child(1|2|3)` 에 `event|product|community` 를 박아 두었다.
 * 지금 모바일 메뉴는 `이벤트 · 기획전 · 상품` 이라 2·3번째의 뜻이 달라졌다 —
 * **전부 끈 뒤 의미 클래스로 다시 건다.**
 *
 * 특정도 — 목업 규칙은 `[data-mobile-gnb="on"][data-mobile-gnb-category="…"] .site-header
 * .header-nav>ul>li:nth-child(n)>a::after` = (0,5,4) 다. 끄는 쪽·거는 쪽 모두 (0,5,4) 로 맞춘다.
 * `:is()` 는 인자 중 가장 높은 특정도(클래스 1개)만 세므로 `nth-child` 자리를 그대로 대신한다.
 *
 * PC(769px 이상)에는 손대지 않는다 — `::after` 는 그쪽에서 hover 밑줄로 쓰인다.
 */
@media (max-width: 768px) {
  /* 먼저 전부 끈다. 새 항목을 추가하면 이 목록에도 넣어야 목업 규칙이 되살아나지 않는다 */
  [data-mobile-gnb='on'][data-mobile-gnb-category]
    .site-header
    .header-nav
    > ul
    > li:is(.gnb-item-event, .gnb-item-plan, .gnb-item-product, .gnb-item-community)
    > a::after {
    display: none;
  }

  /* 화면이 알려 준 `data-mobile-gnb-category` 와 **같은 이름의 항목**에만 건다 */
  [data-mobile-gnb='on'][data-mobile-gnb-category='event']
    .site-header
    .header-nav
    > ul
    > li.gnb-item-event
    > a::after,
  [data-mobile-gnb='on'][data-mobile-gnb-category='plan']
    .site-header
    .header-nav
    > ul
    > li.gnb-item-plan
    > a::after,
  [data-mobile-gnb='on'][data-mobile-gnb-category='product']
    .site-header
    .header-nav
    > ul
    > li.gnb-item-product
    > a::after {
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(1);
  }
}

/*
 * 최상위 항목 한쪽 폭 전용 — <b>첫 페인트부터 맞는 메뉴</b>를 만들기 위한 것이다 (2026-08-25).
 *
 * 서버는 화면 폭을 알 수 없어 `useMediaQuery`(effect 기반) 로 고르면 모바일에서
 * `이벤트·상품·커뮤니티` 가 한 프레임 스치고 나서 `이벤트·기획전·상품` 으로 바뀐다.
 * 그래서 목록은 **한 벌**만 내려보내고 한쪽에만 있는 두 항목을 여기서 켜고 끈다
 * (`GnbMenu` 의 `GnbItem.only`). 두 벌을 그려 감추는 것이 아니라 **항목이 하나씩** 있다.
 *
 * `display: none` 이므로 안 보이는 항목은 **접근성 트리와 Tab 순서에서 함께 빠진다** —
 * `visibility`·`opacity`·화면 밖 이동으로 감추지 않는 이유다.
 *
 * 특정도 — 목업(common/header.css)의 `.site-header .header-nav>ul>li` 는 (0,2,2) 라
 * 여기 (0,3,3) 이 이긴다.
 */
.site-header .header-nav > ul > li.gnb-mobile-only {
  display: none;
}

@media (max-width: 768px) {
  /* 모바일: `커뮤니티` 를 끄고 `기획전` 을 켠다 — 결과는 이벤트 · 기획전 · 상품 */
  .site-header .header-nav > ul > li.gnb-pc-only {
    display: none;
  }

  .site-header .header-nav > ul > li.gnb-mobile-only {
    display: list-item;
  }
}