/* ===========================================================
   GNB 오버플로(더보기 •••) — 긴 언어 라벨에서도 언어전환 아이콘 보호
   nav-overflow.js 가 화면에 안 들어가는 상위 메뉴를 '더보기'로 이동.
   style.css 다음에 로드되어 일부 규칙을 덮어씀.
   =========================================================== */

/* gnb 가 1fr 트랙 안에서 줄어들어 header-right(언어전환)를 안 밀도록 */
.gnb { min-width: 0; }

/* 더보기(•••) 상위 항목 — gnb li 와 동일하게 hover 드롭다운 동작 */
.gnb-more { position: relative; padding-bottom: 14px; margin-bottom: -14px; }
.gnb-more > a {
  display: block; padding: 8px 4px; line-height: 1;
  font-size: 22px; font-weight: 700; letter-spacing: 1px;
  color: var(--gray-700); cursor: pointer; white-space: nowrap;
}
.gnb-more > a:hover { color: var(--accent-dark); }
.gnb-more.pinned > a { color: var(--accent-dark); }

/* 더보기 드롭다운: 우측 정렬 + 길면 스크롤 */
.gnb-more > .dropdown {
  left: auto; right: 0; transform: none;
  max-height: 72vh; overflow-y: auto; min-width: 240px;
}
.gnb-more > .dropdown::before { left: auto; right: 24px; transform: rotate(45deg); }

/* 더보기 안 1차 메뉴: 호버(또는 포커스)하면 2차 메뉴를 인라인 아코디언으로 펼친다.
   (좌측 플라이아웃은 더보기 패널의 overflow-y:auto 에 가려지므로 인라인 방식 사용) */
.gnb-more .dropdown > li { position: static; padding-bottom: 0; margin-bottom: 0; }
.gnb-more .dropdown > li > a { font-weight: 700; }

/* 2차 메뉴 — 기본 접힘 */
.gnb-more .dropdown .dropdown {
  display: block !important;
  position: static;
  opacity: 1; visibility: visible;          /* 컨테이너 흐름 안에서 렌더 */
  transform: none; left: auto; right: auto; top: auto;
  min-width: 0; border: 0; box-shadow: none; border-radius: 0;
  background: var(--gray-50);
  padding: 0; margin: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 0.22s ease;
}
.gnb-more .dropdown .dropdown::before { display: none; }   /* 화살표 제거 */

/* 호버/포커스 시 펼침 */
.gnb-more .dropdown > li:hover > .dropdown,
.gnb-more .dropdown > li:focus-within > .dropdown {
  max-height: 600px;
  padding: 4px 0 8px;
}

/* 2차 항목은 들여쓰기 + 작게 */
.gnb-more .dropdown .dropdown li a {
  padding: 9px 22px 9px 38px;
  font-size: 16.5px; font-weight: 500;
  color: var(--gray-700);
  white-space: normal;          /* 긴 라벨(러시아어 등)은 줄바꿈 → 패널 가로 넘침 방지 */
  line-height: 1.4;
}
.gnb-more .dropdown .dropdown li a:hover { padding-left: 42px; }

/* 펼침 가능한 1차 항목임을 알리는 ▸ 표시(호버 시 회전) */
.gnb-more .dropdown > li > a { position: relative; }
.gnb-more .dropdown > li:has(> .dropdown) > a::after {
  content: '▸'; position: absolute; right: 18px;
  font-size: 13px; color: var(--gray-400);
  transition: transform 0.2s ease;
}
.gnb-more .dropdown > li:has(> .dropdown):hover > a::after,
.gnb-more .dropdown > li:has(> .dropdown):focus-within > a::after {
  transform: rotate(90deg); color: var(--accent-dark);
}

/* 모바일(≤720px)에선 기존 드로어가 처리 — 더보기는 JS 가 제거 */
@media (max-width: 720px) { .gnb-more { display: none !important; } }


/* ===========================================================
   전체 메뉴판(메가메뉴) 모드 — header[data-menu-mode="board"]
   GNB 위에 마우스를 올리면(JS 가 header.board-open 토글) 헤더 아래
   전폭 패널이 펼쳐지며 모든 카테고리·하위 메뉴가 한 번에 보인다.
   기본(dropdown) 모드에서는 .mega-board 가 완전히 숨겨진다.
   =========================================================== */

/* 메뉴판 패널 — 기본 숨김(모드 무관, DOM 엔 항상 존재) */
.mega-board { display: none; }

/* 보드 모드일 때만 활성화 */
header[data-menu-mode="board"] .mega-board {
  display: block;
  position: absolute;
  top: 100%; left: 0; width: 100%;
  background: #fff;
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 16px 32px rgba(0,0,0,0.10);
  z-index: 105;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, visibility 0.18s, transform 0.18s ease;
}
header[data-menu-mode="board"].board-open .mega-board {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* 보드 모드: 개별 호버 드롭다운과 '더보기'는 끈다(전체 메뉴판이 대신) */
header[data-menu-mode="board"] .gnb .dropdown { display: none !important; }
header[data-menu-mode="board"] .gnb-more { display: none !important; }

/* 보드 모드 상단 행: 8개 카테고리가 한 줄에 들어가도록 간격/크기 약간 축소 +
   넓은 언어에서 로고/언어전환을 침범하지 않게 자기 그리드 칸 안으로 가둔다. */
header[data-menu-mode="board"] .gnb {
  gap: 18px; min-width: 0; overflow: hidden;
  justify-content: flex-start;   /* 넘치면 오른쪽에서 잘림(로고 침범 방지). 잘려도 전체 메뉴판에 모두 있음 */
}
header[data-menu-mode="board"] .gnb > li > a { font-size: 16.5px; }

/* 메뉴판 내부 레이아웃 — 카테고리 컬럼 그리드 */
.mega-board-inner {
  max-width: 1380px; margin: 0 auto;
  padding: 34px 20px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.mega-col { min-width: 0; }
.mega-col-head {
  display: block;
  font-size: 17px; font-weight: 700;
  color: var(--accent-dark);
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 2px solid var(--gray-100);
}
.mega-col-head:hover { color: var(--black); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li a {
  display: block;
  padding: 7px 0;
  font-size: 15.5px; font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.15s, padding-left 0.15s;
}
.mega-col li a:hover { color: var(--accent-dark); padding-left: 5px; }

/* 좁은 데스크톱: 컬럼 수 축소 */
@media (max-width: 1100px) {
  .mega-board-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .mega-board-inner { grid-template-columns: repeat(2, 1fr); }
}

/* 모바일(≤720px)에선 기존 드로어가 처리 — 메뉴판 숨김 */
@media (max-width: 720px) { .mega-board { display: none !important; } }


/* ===========================================================
   메뉴 보기 모드 분절 토글 — 헤더 우측(.header-right) 언어전환 옆.
   방문자가 [≡ 기본 | ▦ 메뉴판] 으로 직접 전환(JS 가 active/aria-pressed 부여).
   데스크톱 전용 — 모바일은 기존 드로어가 내비.
   =========================================================== */
.menu-mode-toggle {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--gray-200);
  border-radius: 999px; overflow: hidden;
  background: #fff; line-height: 1;
}
.mmode-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; margin: 0; border: 0; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--gray-600);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.mmode-btn + .mmode-btn { border-left: 1px solid var(--gray-200); }
.mmode-btn .mmode-ico { font-size: 14px; line-height: 1; }
.mmode-btn:hover { color: var(--accent-dark); }
.mmode-btn.active { background: var(--accent-dark); color: #fff; }
.mmode-btn.active:hover { color: #fff; }

/* 좁은 데스크톱: 라벨 숨기고 아이콘만(공간 절약) */
@media (max-width: 1024px) {
  .mmode-btn { padding: 6px 9px; }
  .mmode-btn .mmode-lab { display: none; }
}

/* 모바일(≤720px): 토글 숨김(드로어가 내비) */
@media (max-width: 720px) { .menu-mode-toggle { display: none; } }