/* ==============================================
   기본 드롭다운 업그레이드 스킨 (dropdown_upgrade)
   - 기본 드롭다운을 확장한 버전
   - 라인, 패딩, 라운드, 배경색, 호버색 설정 가능
   - me_code 기반 현재 메뉴 활성 상태
============================================== */

/* ──── CSS 변수 기본값 ──── */
.header.dropdown-upgrade-menu {
  --ddu-line-color: var(--primary, #333);
  --ddu-2d-pad: 7px 15px 7px 15px;
  --ddu-3d-pad: 6px 14px 6px 14px;
  --ddu-hover-radius: 0px;
  --ddu-hover-bg: var(--primary, #2563eb);
  --ddu-hover-color: #fff;
  --ddu-2d-bg: #fff;
  --ddu-3d-bg: #fff;
  --ddu-2d-color: #111;
  --ddu-3d-color: #111;
  --ddu-sub-offset: 0px;
  --ddu-2d-border-color: transparent;
  --ddu-2d-border-width: 0px;
  --ddu-2d-box-radius: 0px;
  --ddu-3d-border-color: transparent;
  --ddu-3d-border-width: 0px;
  --ddu-3d-box-radius: 0px;
}

/* ──── 2뎁스 폰트 컬러 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem a {
  color: var(--ddu-2d-color) !important;
}

/* ──── 3뎁스 폰트 컬러 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .sublist > li.has-sub > .sublist > li > a {
  color: var(--ddu-3d-color) !important;
}

/* ──── 2뎁스 sublist 기본 리셋 + 테두리 + 라운드 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist {
  padding: var(--ddu-2d-pad, 0) !important;
  border: var(--ddu-2d-border-width, 0) solid var(--ddu-2d-border-color, transparent) !important;
  border-radius: var(--ddu-2d-box-radius) !important;
  box-shadow: var(--ddu-2d-shadow, none) !important;
}

/* ──── 라인: 2뎁스 상단 데코 라인 ──── */
/* 라인 모드: 현재위치 (sublist 상단 border) - ddu-line-current 클래스 필요 */
.header.dropdown-upgrade-menu.ddu-line-current .gnb:not(.tablet2):not(.mo) .menu > li > .sublist {
  border-top: var(--ddu-2d-top-width, 2px) solid var(--ddu-2d-top-color, var(--ddu-line-color)) !important;
}

/* 라인 모드: 헤더 하단 맞춤 */
.header.dropdown-upgrade-menu.ddu-line-header .gnb:not(.tablet2):not(.mo) .menu > li > .sublist {
  border-top: none !important;
}
/* 1뎁스 li 하단에 라인 표시 (hover 시) — ::before로 오프셋 지원 */
.header.dropdown-upgrade-menu.ddu-line-header .gnb:not(.tablet2):not(.mo) .menu > li.cell {
  position: relative !important;
  overflow: visible !important;
}
.header.dropdown-upgrade-menu.ddu-line-header .gnb:not(.tablet2):not(.mo) .menu > li.cell::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: var(--ddu-line-header-offset, 0px) !important;
  width: 0% !important;
  height: var(--ddu-line-header-width, 2px) !important;
  background: var(--ddu-2d-top-color, var(--ddu-line-color)) !important;
  transition: width 0.3s ease !important;
  pointer-events: none !important;
  z-index: 1;
}
.header.dropdown-upgrade-menu.ddu-line-header .gnb:not(.tablet2):not(.mo) .menu > li.cell:hover::before {
  width: 100% !important;
}
/* 헤더하단 모드: 기존 1뎁스 underline(a:before) 숨김 */
.header.dropdown-upgrade-menu.ddu-line-header .gnb:not(.tablet2):not(.mo) .menu > li.cell > a:before {
  display: none !important;
}

/* 라인 없음 */
.header.dropdown-upgrade-menu.ddu-line-none .gnb:not(.tablet2):not(.mo) .menu > li > .sublist {
  border-top: none !important;
}

/* ──── 서브메뉴 위치 오프셋 + hover 영역 확장 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist {
  margin-top: var(--ddu-sub-offset) !important;
}
/* 빈 공간에 마우스가 있어도 서브메뉴 유지 — li의 ::after로 hover 브릿지 */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell {
  position: relative;
}
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--ddu-sub-offset, 0px);
  transform: translateY(100%);
  pointer-events: auto;
  z-index: 9998;
}

/* ──── 2뎁스 sublist 배경 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist {
  background: var(--ddu-2d-bg) !important;
}

/* ──── 2뎁스 아이템 패딩 + 라운드(hover 전부터 적용) ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem a {
  display: block !important;
  box-sizing: border-box !important;
  padding: var(--ddu-item-pad, 7px 15px 7px 15px) !important;
  border-radius: var(--ddu-hover-radius) !important;
}

/* ──── 2뎁스 호버: 배경 + 라운드 + 투명도 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem a {
  position: relative;
}
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem a:hover {
  background: transparent !important;
  color: var(--ddu-hover-color) !important;
  border-radius: var(--ddu-hover-radius) !important;
}
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem a::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ddu-hover-bg); opacity: 0; z-index: -1;
  transition: opacity 0.2s ease;
}
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem a:hover::after {
  opacity: var(--ddu-hover-bg-opacity, 1);
}

/* ──── 3뎁스 sublist 배경 + 테두리 + 라운드 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .sublist > li.has-sub > .sublist {
  background: var(--ddu-3d-bg) !important;
  border: var(--ddu-3d-border-width, 0) solid var(--ddu-3d-border-color, transparent) !important;
  border-radius: var(--ddu-3d-box-radius) !important;
  box-shadow: var(--ddu-3d-shadow, none) !important;
}

/* ──── 3뎁스 아이템 패딩 + 라운드(hover 전부터 적용) ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .sublist > li.has-sub > .sublist > li > a {
  padding: var(--ddu-3d-pad, 6px 14px 6px 14px) !important;
  border-radius: var(--ddu-hover-radius) !important;
}

/* ──── 3뎁스 호버: 배경 + 라운드 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .sublist > li.has-sub > .sublist > li > a:hover {
  background: var(--ddu-hover-bg) !important;
  color: var(--ddu-hover-color) !important;
  border-radius: var(--ddu-hover-radius) !important;
}

/* ──── 1뎁스 언더라인: 좌→우 모션 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a:before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--ddu-line-color) !important;
  transition: width 0.3s ease;
}
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell:hover > a:before {
  width: 100% !important;
}

/* ──── 1뎁스 폰트 컬러 전환 부드럽게 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a {
  transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease !important;
}

/* ──── 1뎁스 컬러: 라인 컬러와 동일 모드 — hover때만 ──── */
.header.dropdown-upgrade-menu.ddu-1d-linecolor .gnb:not(.tablet2):not(.mo) .menu > li.cell:hover > a {
  color: var(--ddu-line-color) !important;
  -webkit-text-fill-color: var(--ddu-line-color) !important;
}
/* underline도 라인 컬러 (hover 시) */
.header.dropdown-upgrade-menu.ddu-1d-linecolor .gnb:not(.tablet2):not(.mo) .menu > li.cell:hover > a:before {
  background: var(--ddu-line-color) !important;
}

/* ──── 현재 메뉴 활성 상태 (me_code 기반) — 라인만 표시 ──── */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem.ddu-active > a {
  color: var(--ddu-hover-bg) !important;
  position: relative;
}
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist .subitem.ddu-active > a::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 2px;
  background: var(--ddu-hover-bg);
  border-radius: 1px;
}
/* 활성 메뉴의 1뎁스 부모도 강조 */
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li.ddu-active-parent > a {
  color: var(--ddu-line-color) !important;
  -webkit-text-fill-color: var(--ddu-line-color) !important;
}
.header.dropdown-upgrade-menu .gnb:not(.tablet2):not(.mo) .menu > li.ddu-active-parent > a:before {
  width: 100% !important;
  background: var(--ddu-line-color) !important;
}