/* ==============================================
   전체 하위메뉴 펼침 스킨 (fullopen submenu)
   - 메뉴 hover 시 전체 하위메뉴가 한번에 보이는 구조
   - 서브메뉴 = position:absolute (header 레이아웃 영향 없음)
   - backdrop = 흰색 배경 패널 (header 아래, JS 높이 제어)
   - 간격 모드: equal(공통 넓이), fit(컨텐츠 맞춤)
============================================== */

/* ──── CSS 변수 기본값 ──── */
.header.fullopen-menu {
  --fo-bg: #fff;
  --fo-border-color: rgba(204,204,204,0.3);
  --fo-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fo-pad-top: clamp(10px, calc(0.78vw + 7.5px), 20px);
  --fo-pad-bottom: clamp(20px, calc(1.56vw + 15px), 40px);
  --fo-1d-gap: clamp(20px, calc(2.34vw + 12.5px), 50px);
  --fo-2d-pad-y: 4px;
  --fo-2d-font-size: var(--top2d-font-size, 14px);
  --fo-2d-font-weight: var(--top2d-font-weight, 400);
  --fo-2d-color: #555;
  --fo-2d-hover-color: var(--primary, #333);
}

/* ──── 백드롭: header ::after로 흰색 배경 (header = width:100% → 전폭) ──── */
.header.fullopen-menu {
  --fo-sub-h: 0px;
}
.header.fullopen-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--fo-bg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  z-index: 0;
  opacity: 0;
  transition: height var(--fo-transition), opacity 0.3s ease;
  pointer-events: none;
}
.header.fullopen-menu.fullopen-active::after {
  height: var(--fo-sub-h, 300px);
  opacity: 1;
  pointer-events: auto;
}

/* 기존 backdrop div는 숨김 (하위호환) */
.fullopen-backdrop {
  display: none !important;
}

/* ──── 1뎁스 li: position:relative ──── */
.header.fullopen-menu .gnb.pc .menu > li,
.header.fullopen-menu .gnb.tablet1 .menu > li,
.header.fullopen-menu .gnb.tablet2 .menu > li {
  position: relative;
}
/* 균등 모드 li만 펼침 애니메이션 (햄버거 등 다른 요소 영향 방지) */
.header.fullopen-menu.fo-equal .gnb.pc > .menu > li.cell,
.header.fullopen-menu.fo-equal .gnb.tablet1 > .menu > li.cell,
.header.fullopen-menu.fo-equal .gnb.tablet2 > .menu > li.cell {
  transition: flex var(--fo-transition), min-width var(--fo-transition), max-width var(--fo-transition);
}

/* ──── 서브메뉴: absolute 위치 (header 레이아웃 영향 없음) ──── */
.header.fullopen-menu .gnb.pc .menu > li > .sublist,
.header.fullopen-menu .gnb.tablet1 .menu > li > .sublist,
.header.fullopen-menu .gnb.tablet2 .menu > li > .sublist {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 100% !important;
  width: auto !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--fo-transition), padding var(--fo-transition) !important;
  z-index: 100 !important;
}

/* 기존 hover/focus 드롭다운 무력화 */
.header.fullopen-menu .gnb.pc .menu > li:hover > .sublist,
.header.fullopen-menu .gnb.pc .menu > li:focus-within > .sublist,
.header.fullopen-menu .gnb.pc .menu > li.open > .sublist,
.header.fullopen-menu .gnb.tablet1 .menu > li:hover > .sublist,
.header.fullopen-menu .gnb.tablet1 .menu > li:focus-within > .sublist,
.header.fullopen-menu .gnb.tablet1 .menu > li.open > .sublist,
.header.fullopen-menu .gnb.tablet2 .menu > li:hover > .sublist,
.header.fullopen-menu .gnb.tablet2 .menu > li:focus-within > .sublist,
.header.fullopen-menu .gnb.tablet2 .menu > li.open > .sublist {
  max-height: 0;
  overflow: hidden;
  pointer-events: none !important;
}

/* 활성 시: 전체 sublist 한번에 표시 (bg 펼침 후 페이드인) */
.header.fullopen-menu.fullopen-active .gnb.pc .menu > li > .sublist,
.header.fullopen-menu.fullopen-active .gnb.tablet1 .menu > li > .sublist,
.header.fullopen-menu.fullopen-active .gnb.tablet2 .menu > li > .sublist {
  max-height: 500px;
  overflow: visible;
  padding-top: var(--fo-pad-top) !important;
  padding-bottom: var(--fo-pad-bottom) !important;
  pointer-events: auto !important;
}

/* ──── 1뎁스 메뉴: hover 시 간격 벌어짐 ──── */
.header.fullopen-menu .gnb.pc > .menu,
.header.fullopen-menu .gnb.tablet1 > .menu,
.header.fullopen-menu .gnb.tablet2 > .menu {
  transition: gap var(--fo-transition);
}
/* equal 모드: 활성 시 gap 확장 (기본 gap은 유지, 입력값만큼 더 벌어짐) */
.header.fullopen-menu.fo-equal.fullopen-active .gnb.pc > .menu,
.header.fullopen-menu.fo-equal.fullopen-active .gnb.tablet1 > .menu,
.header.fullopen-menu.fo-equal.fullopen-active .gnb.tablet2 > .menu {
  gap: var(--fo-1d-gap);
}

/* 간격 모드: equal (공통 넓이로 벌어지기) — .cell만 (햄버거 등 제외) */
.header.fullopen-menu.fo-equal.fullopen-active .gnb.pc > .menu > li.cell,
.header.fullopen-menu.fo-equal.fullopen-active .gnb.tablet1 > .menu > li.cell,
.header.fullopen-menu.fo-equal.fullopen-active .gnb.tablet2 > .menu > li.cell {
  flex: 1 1 0%;
  min-width: var(--fo-equal-width, 0px);
  max-width: var(--fo-equal-width, none);
}
/* equal 모드: 공간만 균등, 텍스트/라인은 왼쪽 정렬 */
.header.fullopen-menu.fo-equal.fullopen-active .gnb.pc > .menu > li.cell > a,
.header.fullopen-menu.fo-equal.fullopen-active .gnb.tablet1 > .menu > li.cell > a,
.header.fullopen-menu.fo-equal.fullopen-active .gnb.tablet2 > .menu > li.cell > a {
  justify-content: flex-start;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 간격 모드: fit (컨텐츠에 맞게 벌어지기) - gap 증가 + 서브리스트 자유 확장 */
.header.fullopen-menu.fo-fit.fullopen-active .gnb.pc > .menu,
.header.fullopen-menu.fo-fit.fullopen-active .gnb.tablet1 > .menu,
.header.fullopen-menu.fo-fit.fullopen-active .gnb.tablet2 > .menu {
  gap: var(--fo-1d-gap);
}
/* 서브리스트가 1뎁스 li 너비에 갇히지 않게 (equal/fit 공통) */
.header.fullopen-menu .gnb.pc .menu > li > .sublist,
.header.fullopen-menu .gnb.tablet1 .menu > li > .sublist,
.header.fullopen-menu .gnb.tablet2 .menu > li > .sublist {
  min-width: max-content !important;
  width: max-content !important;
}
.header.fullopen-menu .gnb.pc .sublist .subitem a,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem a,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem a {
  white-space: nowrap;
  padding-right: 0 !important;
}

/* ──── 구분선 CSS 변수 ──── */
.header.fullopen-menu.fo-divider {
  --fo-divider-pad: clamp(15px, calc(1.17vw + 11.25px), 30px);
}

/* ──── 구분선: li::after 하나로 대메뉴~소메뉴 관통하는 통일 라인 ──── */
.header.fullopen-menu.fo-divider.fullopen-active .gnb.pc > .menu > li,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet1 > .menu > li,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet2 > .menu > li {
  padding-left: var(--fo-divider-pad);
}
.header.fullopen-menu.fo-divider.fullopen-active .gnb.pc > .menu > li:first-child,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet1 > .menu > li:first-child,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet2 > .menu > li:first-child {
  padding-left: 0;
}

/* 라인 본체: li::after (1뎁스 + 서브메뉴 영역 전체 관통, bg 후 페이드인) */
.header.fullopen-menu.fo-divider.fullopen-active .gnb.pc > .menu > li::after,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet1 > .menu > li::after,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet2 > .menu > li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(100% + var(--fo-sub-h, 0px));
  background: var(--fo-border-color);
  z-index: 101;
  pointer-events: none;
  animation: fo-line-fadein 0.3s ease 0.35s both;
}
@keyframes fo-line-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
.header.fullopen-menu.fo-divider.fullopen-active .gnb.pc > .menu > li:first-child::after,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet1 > .menu > li:first-child::after,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet2 > .menu > li:first-child::after {
  display: none;
}

/* 구분선: 서브메뉴 패딩만 (border 없음) */
.header.fullopen-menu.fo-divider.fullopen-active .gnb.pc > .menu > li > .sublist,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet1 > .menu > li > .sublist,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet2 > .menu > li > .sublist {
  padding-left: var(--fo-divider-pad) !important;
}
.header.fullopen-menu.fo-divider.fullopen-active .gnb.pc > .menu > li:first-child > .sublist,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet1 > .menu > li:first-child > .sublist,
.header.fullopen-menu.fo-divider.fullopen-active .gnb.tablet2 > .menu > li:first-child > .sublist {
  padding-left: 0 !important;
}

/* ──── 2뎁스 아이템 스타일 ──── */
.header.fullopen-menu .gnb.pc .sublist .subitem a,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem a,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem a {
  padding: var(--fo-2d-pad-y) 0 !important;
  font-size: var(--fo-2d-font-size) !important;
  font-weight: var(--fo-2d-font-weight) !important;
  color: var(--fo-2d-color) !important;
  background: transparent !important;
  border-radius: 0 !important;
  white-space: normal;
  word-break: keep-all;
  opacity: 0;
  transition: color 0.2s, opacity 0.15s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
/* hover 도트 (좌측 5px 원) — 2뎁스 subitem에만 배치 (3뎁스 제외) */
.header.fullopen-menu .gnb.pc > .menu > li > .sublist > .subitem,
.header.fullopen-menu .gnb.tablet1 > .menu > li > .sublist > .subitem,
.header.fullopen-menu .gnb.tablet2 > .menu > li > .sublist > .subitem {
  position: relative;
}
.header.fullopen-menu .gnb.pc > .menu > li > .sublist > .subitem::before,
.header.fullopen-menu .gnb.tablet1 > .menu > li > .sublist > .subitem::before,
.header.fullopen-menu .gnb.tablet2 > .menu > li > .sublist > .subitem::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fo-2d-hover-color, var(--primary, #333));
  position: absolute;
  left: 0;
  top: calc(var(--fo-2d-pad-y, 4px) + 0.45em);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.header.fullopen-menu .gnb.pc > .menu > li > .sublist > .subitem:hover::before,
.header.fullopen-menu .gnb.tablet1 > .menu > li > .sublist > .subitem:hover::before,
.header.fullopen-menu .gnb.tablet2 > .menu > li > .sublist > .subitem:hover::before {
  transform: scale(1);
}
/* 활성 시: bg 펼침 후 텍스트 페이드인 (0.35s 딜레이) */
.header.fullopen-menu.fullopen-active .gnb.pc .sublist .subitem a,
.header.fullopen-menu.fullopen-active .gnb.tablet1 .sublist .subitem a,
.header.fullopen-menu.fullopen-active .gnb.tablet2 .sublist .subitem a {
  opacity: 1;
  transition: color 0.2s, opacity 0.3s ease 0.35s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* hover: 컬러 + 밀림 + 배경 투명 (2뎁스) — subitem:hover 기준으로 통일 (도트 깜빡임 방지) */
.header.fullopen-menu .gnb.pc > .menu > li > .sublist > .subitem:hover > a,
.header.fullopen-menu .gnb.tablet1 > .menu > li > .sublist > .subitem:hover > a,
.header.fullopen-menu .gnb.tablet2 > .menu > li > .sublist > .subitem:hover > a {
  color: var(--fo-2d-hover-color) !important;
  background: transparent !important;
  transform: translateX(12px);
}

/* ──── 1뎁스 활성 하이라이트 (hover한 항목만) ──── */
.header.fullopen-menu.fullopen-active .gnb.pc > .menu > li:hover > a,
.header.fullopen-menu.fullopen-active .gnb.tablet1 > .menu > li:hover > a,
.header.fullopen-menu.fullopen-active .gnb.tablet2 > .menu > li:hover > a {
  color: var(--primary, #333) !important;
}

/* ──── fullopen 활성 시: 모든 1뎁스 텍스트 색상 강제 ──── */
.header.fullopen-menu.fullopen-active .gnb.pc > .menu > li > a,
.header.fullopen-menu.fullopen-active .gnb.tablet1 > .menu > li > a,
.header.fullopen-menu.fullopen-active .gnb.tablet2 > .menu > li > a {
  color: var(--top1d-font-color, #333) !important;
  -webkit-text-fill-color: var(--top1d-font-color, #333) !important;
  background-size: 0% 100% !important;
}

/* ──── 1뎁스 underline: 기본 숨김, hover한 항목만 왼→오 애니메이션 ──── */
.header.fullopen-menu.fullopen-active .gnb.pc > .menu > li > a:before,
.header.fullopen-menu.fullopen-active .gnb.tablet1 > .menu > li > a:before,
.header.fullopen-menu.fullopen-active .gnb.tablet2 > .menu > li > a:before {
  width: 0% !important;
  left: 0;
  bottom: 0 !important;
  transition: width 0.3s ease;
}
.header.fullopen-menu.fullopen-active .gnb.pc > .menu > li:hover > a:before,
.header.fullopen-menu.fullopen-active .gnb.tablet1 > .menu > li:hover > a:before,
.header.fullopen-menu.fullopen-active .gnb.tablet2 > .menu > li:hover > a:before {
  width: 100% !important;
}

/* ──── 헤더 배경 강제 + 하단 구분선 ──── */
.header.fullopen-menu.fullopen-active {
  background-color: var(--fo-bg) !important;
  border-bottom: 1px solid var(--fo-border-color) !important;
}
.header.fullopen-menu.fullopen-active.opacity {
  background-color: var(--fo-bg) !important;
}

/* ──── opacity 모드: 열렸을 때 폰트 색상 복원 ──── */
.header.fullopen-menu.fullopen-active.opacity .gnb.pc > .menu > li > a,
.header.fullopen-menu.fullopen-active.opacity .gnb.tablet1 > .menu > li > a,
.header.fullopen-menu.fullopen-active.opacity .gnb.tablet2 > .menu > li > a {
  color: var(--top1d-font-color, #333) !important;
  -webkit-text-fill-color: var(--top1d-font-color, #333) !important;
}

/* ──── 3뎁스 (있을 경우) ──── */
.header.fullopen-menu .gnb.pc .sublist .subitem.has-sub > .sublist,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem.has-sub > .sublist,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem.has-sub > .sublist {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0 10px !important;
  min-width: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.header.fullopen-menu .gnb.pc .sublist .subitem.has-sub > .sublist > li > a,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem.has-sub > .sublist > li > a,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem.has-sub > .sublist > li > a {
  font-size: calc(var(--fo-2d-font-size) * 0.9) !important;
  color: #888 !important;
  padding: 4px 0 !important;
  background: transparent !important;
}
/* 3뎁스 대시 아이콘 */
.header.fullopen-menu .gnb.pc .sublist .subitem.has-sub > .sublist > li > a,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem.has-sub > .sublist > li > a,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem.has-sub > .sublist > li > a {
  position: relative;
  transition: color 0.2s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.header.fullopen-menu .gnb.pc .sublist .subitem.has-sub > .sublist > li,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem.has-sub > .sublist > li,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem.has-sub > .sublist > li {
  position: relative;
}
.header.fullopen-menu .gnb.pc .sublist .subitem.has-sub > .sublist > li::before,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem.has-sub > .sublist > li::before,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem.has-sub > .sublist > li::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: calc(var(--fo-2d-font-size) * 0.9);
  color: var(--fo-2d-hover-color, var(--primary, #333));
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.header.fullopen-menu .gnb.pc .sublist .subitem.has-sub > .sublist > li:hover::before,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem.has-sub > .sublist > li:hover::before,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem.has-sub > .sublist > li:hover::before {
  opacity: 1;
  transform: scale(1);
}
.header.fullopen-menu .gnb.pc .sublist .subitem.has-sub > .sublist > li > a:hover,
.header.fullopen-menu .gnb.tablet1 .sublist .subitem.has-sub > .sublist > li > a:hover,
.header.fullopen-menu .gnb.tablet2 .sublist .subitem.has-sub > .sublist > li > a:hover {
  color: var(--fo-2d-hover-color, var(--primary, #333)) !important;
  background: transparent !important;
  transform: translateX(10px);
}

/* ──── 반응형: 태블릿 이하 숨김 (모바일은 사이드바 사용) ──── */
@media screen and (max-width: 1024px) {
  .fullopen-backdrop {
    display: none !important;
  }
  .header.fullopen-menu .gnb.pc .menu > li > .sublist,
  .header.fullopen-menu .gnb.tablet1 .menu > li > .sublist,
  .header.fullopen-menu .gnb.tablet2 .menu > li > .sublist {
    /* 태블릿 이하에서는 기본 드롭다운으로 복원 */
    display: none !important;
  }
  .header.fullopen-menu .gnb.pc .menu > li:hover > .sublist,
  .header.fullopen-menu .gnb.tablet1 .menu > li:hover > .sublist,
  .header.fullopen-menu .gnb.tablet2 .menu > li:hover > .sublist {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ============================================================
   ★ fullopen2 전용 — 1뎁스 가로 균등 분배 (hover 전/후 동일)
   - .header_right / .gnb 컨테이너는 inner 폭 전체 사용
   - 1뎁스 li는 균등 폭(flex:1 1 0)으로 inner 폭 안에서 균등 분배
   - PC(1701+)와 tablet1(1024~1700) 동일 동작
   ============================================================ */
@media (min-width: 1025px) {
    /* header_right 자체가 inner 폭 100%로 펼쳐지도록 */
    html body .header.fullopen2-always .header_right {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    html body .header.fullopen2-always .header_right > .gnb,
    html body .header.fullopen2-always .header_right > .gnb.pc,
    html body .header.fullopen2-always .header_right > .gnb.tablet1 {
        flex: 1 1 auto !important;
        width: 100% !important;       /* 햄버거가 숨겨져도 .gnb가 100% 차지 */
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }
    html body .header.fullopen2-always .gnb > .menu,
    html body .header.fullopen2-always .gnb.pc > .menu,
    html body .header.fullopen2-always .gnb.tablet1 > .menu {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }
    /* 1뎁스 li는 콘텐츠 폭만 차지 (텍스트 길이만큼)
       → space-between이 항목 간 빈 공간을 균등 분배
       (첫 항목은 좌측, 마지막 항목은 우측에 붙고, 사이는 균등 간격)
       PC(1701+)와 tablet1(1024~1700) 동일 동작 */
    html body .header.fullopen2-always .gnb > .menu > li,
    html body .header.fullopen2-always .gnb > .menu > li.cell,
    html body .header.fullopen2-always .gnb.pc > .menu > li,
    html body .header.fullopen2-always .gnb.pc > .menu > li.cell,
    html body .header.fullopen2-always .gnb.tablet1 > .menu > li,
    html body .header.fullopen2-always .gnb.tablet1 > .menu > li.cell {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        transition: none !important;
    }
    /* 햄버거/글로벌 메뉴는 자기 폭 그대로 */
    html body .header.fullopen2-always .header_right > div.sitemap,
    html body .header.fullopen2-always .header_right > .gmenu-area-inner {
        flex: 0 0 auto !important;
    }
}