/* ================================================================
   GNB Menu
   Desktop: 헤더 아래 expand-down (5-column)
   Mobile:  전체화면 메뉴 (Figma 16:17003)
   ================================================================ */

/* ── OVERLAY ── */
.gnb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.gnb-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── DESKTOP MENU PANEL ──
   헤더 바로 아래(top:90px)에서 확장, z-index < 헤더 */
.gnb-menu {
  position: fixed;
  top: 90px;
  left: 0;
  transform: none;
  width: 100%;
  max-width: none;
  max-height: 0;
  z-index: 1001;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gnb-menu::-webkit-scrollbar {
  display: none;
}

.gnb-menu.is-open {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 모바일 헤더 — 데스크톱에서는 숨김 */
.gnb-menu-header {
  display: none;
}


/* ════════════════════════════════════
   DESKTOP — Sitemap (Full screen)
   ════════════════════════════════════ */
.gnb-sitemap {
  container-type: inline-size;
  padding: var(--section-padding-y) var(--section-padding-x) var(--section-padding-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(65px);
  -webkit-backdrop-filter: blur(65px);
  width: 100%;
  min-height: calc(100vh - 90px);
  box-sizing: border-box;
}

/* Dark Mode Sitemap */
.gnb-menu.sitemap-dark .gnb-sitemap {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}

.sitemap-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 36px; /* 검수 0730: 상위-하위 메뉴 간격 clamp(40~110)→36 고정 (Figma 2228:19545). 호버영역 겹침 방지 */
  width: 100%;
  max-width: 1680px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.gnb-menu.sitemap-dark .sitemap-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sitemap-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0;
}

.sitemap-row-title {
  width: 216px; /* 검수 0730: 상위 메뉴 너비 216px 고정 (Figma 2228:19546) */
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 27px; /* 검수 0730: 27px 고정 (Figma) */
  line-height: 1.5;
  color: #111111;
  flex-shrink: 0;
  white-space: nowrap;
  word-break: keep-all;
}

.gnb-menu.sitemap-dark .sitemap-row-title {
  color: #FFFFFF;
}

.sitemap-row-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 검수 0730: minmax(0,1fr)로 트랙 오버플로우 차단 (호버 겹침 방지) */
  gap: 8px; /* Figma 2228:19547 Section Menu gap 8 */
  flex-grow: 1;
}

.sitemap-item-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.sitemap-item {
  width: 100%; /* 검수 0730: 고정폭 clamp(200~260) 제거 → grid 1fr 컬럼을 꽉 채움. 좁은 해상도서 옆 컬럼 침범(호버 겹침) 방지 (Figma flex:1 0 0) */
  min-width: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 16px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #D3D3D3;
  text-decoration: none;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
}

.gnb-menu:not(.sitemap-dark) .sitemap-item {
  color: #111111;
}

.sitemap-item-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sitemap-tab {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 16px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #7A7A7A;
  text-decoration: none;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s;
  box-sizing: border-box;
  white-space: nowrap;
  word-break: keep-all;
}

.sitemap-tab:hover,
.sitemap-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #F27100;
}

.gnb-menu.sitemap-dark .sitemap-tab:hover,
.gnb-menu.sitemap-dark .sitemap-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.gnb-menu.sitemap-dark .sitemap-item {
  color: #D3D3D3;
}

.sitemap-item:hover,
.gnb-menu.sitemap-dark .sitemap-item:hover {
  color: #F27100;
}


/* ════════════════════════════════════
   검수 0806: 다국어 미제공 → 언어 선택 UI 숨김.
   요소만 숨겨(display:none) 로고·문의·메뉴 등 나머지 GNB 레이아웃은 그대로 유지.
   대상: raw KR 링크(href="#"), 데스크탑 드롭다운(JS 생성), 모바일 언어바.
   ▶ 다국어 오픈 시 이 블록만 제거하면 복구됨.
   ════════════════════════════════════ */
.gnb-utils-links a[href="#"],
.gnb-lang-dropdown,
.gnb-lang-bar {
  display: none !important;
}

/* ════════════════════════════════════
   데스크톱 다국어 드롭다운
   ════════════════════════════════════ */
.gnb-lang-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.gnb-lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #363636; /* 검수 0713: 언어선택 Medium/#363636 */
  padding: 4px 8px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  white-space: nowrap;
}

/* 투명/호버/다크 모드에서 토글 색상 */
.gnb.gnb-transparent .gnb-lang-toggle,
.gnb.is-hover .gnb-lang-toggle,
.gnb.gnb-dark .gnb-lang-toggle,
.gnb.gnb-menu-active .gnb-lang-toggle {
  color: #FFFFFF;
}

.gnb-lang-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 200;
  min-width: 64px;
}

.gnb-lang-dropdown.is-open .gnb-lang-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.gnb-lang-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #999 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.15s;
}

.gnb-lang-option:hover {
  color: #111 !important;
}

.gnb-lang-option.is-active {
  color: #111 !important;
  font-weight: 700;
}

/* ════════════════════════════════════
   다국어 선택 바 (모바일 전용)
   ════════════════════════════════════ */
.gnb-lang-bar {
  display: none;
}

/* ════════════════════════════════════
   MOBILE — Figma 16:17003 전체화면 메뉴
   화살표/가로선 없음, 심플 리스트
   ════════════════════════════════════ */
.gnb-menu-mobile {
  display: none;
}

.gnb-mob-contact {
  display: none;
}


/* ════════════════════════════════════
   RESPONSIVE ≤ 1439px (TABLET/MOBILE)
   ════════════════════════════════════ */
@media (max-width: 1439px) {

  /* 오버레이: 뒤 어둡게 */
  .gnb-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* 메뉴: 오른쪽에서 밀려나옴 */
  .gnb-menu {
    top: 0;
    left: auto;
    right: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    background: #fff;
  }

  .gnb-menu.is-open {
    transform: translateX(0);
    max-height: 100vh;
  }

  /* 데스크톱 콘텐츠 숨김 */
  .gnb-menu-body {
    display: none;
  }

  /* 모바일 콘텐츠 표시 */
  .gnb-menu-mobile {
    display: block;
  }

  /* ── 문의하기 링크 ── */
  .gnb-mob-contact {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    padding: 0 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #1b1b1b;
    text-decoration: none;
  }

  .gnb-mob-contact svg {
    flex-shrink: 0;
  }

  .gnb-menu.sitemap-dark .gnb-mob-contact {
    color: #FFFFFF;
  }

  /* ── 다국어 바 ── */
  /* Figma: GNB(72) 아래 12px → 언어행 시작 84px, 언어↔메뉴 8px */
  .gnb-lang-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 26px;
    margin-top: 12px;
    padding: 0 16px;
    gap: 20px;
  }

  .gnb-lang-item {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: #7A7A7A;
    text-decoration: none;
    width: 21px;
    padding: 0;
    text-align: center;
    transition: color 0.2s;
  }

  .gnb-lang-item.is-active {
    color: #1b1b1b;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .gnb-menu.sitemap-dark .gnb-lang-item {
    color: #7A7A7A;
  }

  .gnb-menu.sitemap-dark .gnb-lang-item.is-active {
    color: #FFFFFF;
  }

  /* ── 모바일 헤더: h72 px16 ── */
  /* 검수 0703: 햄버거 메뉴 열린 상태에서 GNB(로고+닫기) 상단 고정 */
  .gnb-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
  }

  /* Figma: GNB 바는 솔리드 black */
  .gnb-menu.sitemap-dark .gnb-menu-header {
    background: #000000;
  }

  .gnb-menu-logo {
    height: 30px;
    width: 156px;
    object-fit: contain;
  }

  .gnb-menu-header a {
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 0;
  }

  .gnb-menu-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 72.727px;
    padding: 0;
  }

  .gnb-menu-close svg {
    width: 24px;
    height: 24px;
  }

  /* ── 카테고리 리스트: left16, top84, w calc(100%-32) ── */
  .gnb-mob-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 16px 100px;
  }

  /* 카테고리 타이틀: h44 pl12, 20px Bold 검정 */
  .gnb-mob-cat {
    display: flex;
    align-items: center;
    height: 44px;
    padding-left: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    cursor: pointer;
  }

  /* 활성 카테고리 */
  .gnb-mob-cat.is-active {
    color: inherit;
  }

  /* 서브메뉴 패널: bg F8F9FB, r16, py12 */
  .gnb-mob-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .gnb-mob-sub.is-open {
    max-height: 500px;
  }

  .gnb-mob-sub-inner {
    background: #F8F9FB;
    border-radius: 16px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
  }

  /* 서브 항목: px20 py8, 18px Medium #363636 */
  .gnb-mob-sub-inner a {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: 500;
    color: #363636;
    text-decoration: none;
    line-height: 1.6;
  }

  /* ── Mobile Dark Mode ── */
  /* Figma MOB_HOME_KOR: 오버레이 rgba(0,0,0,0.8) + blur(50) */
  .gnb-menu.sitemap-dark {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
  }

  .gnb-menu.sitemap-dark .gnb-menu-logo {
    filter: brightness(0) invert(1);
  }

  .gnb-menu.sitemap-dark .gnb-menu-close svg path {
    stroke: #FFFFFF;
  }

  .gnb-menu.sitemap-dark .gnb-mob-cat {
    color: #FFFFFF;
  }

  .gnb-menu.sitemap-dark .gnb-mob-cat.is-active {
    color: #FFFFFF;
  }

  .gnb-menu.sitemap-dark .gnb-mob-sub-inner {
    background: rgba(255, 255, 255, 0.06);
  }

  .gnb-menu.sitemap-dark .gnb-mob-sub-inner>a {
    color: #FFFFFF;
  }

  /* 서브서브메뉴 (tabs) — Figma: 16px Regular #7A7A7A */
  .gnb-mob-tabs {
    display: flex;
    flex-direction: column;
  }

  .gnb-mob-sub-inner .gnb-mob-tab {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    font-size: 16px !important;
    font-weight: 400;
    color: #7A7A7A !important;
    text-decoration: none;
    line-height: 1.6;
    border-radius: 12px;
  }

  .gnb-mob-sub-inner a.is-active {
    color: #F27100;
    font-weight: 700;
  }
}

/* GNB 스크롤 숨김/표시는 common.css에서 통합 관리 */