/* ============================================================
   HEADER MEGA MENU — GNB 호버 시 메가메뉴 드롭다운
   레퍼런스 기준: 좌측 이미지(오버레이) | 2depth | 3depth(2컬럼)
   header.html / header.css 수정 없이 동작.
   ============================================================ */


/* --- GNB 호버 시 기존 효과 모두 제거 ---
   ※ :has(.mega-menu)로 스코핑 — 메가메뉴가 임베드된 GNB에서만 적용.
   하드코딩 GNB(예: MNU-U-010000_GNB_design_v1.html)는 영향 없음 */
.header-gnb:has(.mega-menu):hover .gnb-link {
  padding: 0 clamp(0.8rem, 1.3vw, 3.2rem) !important;  /* 패딩 변경 방지 */
}

/* 기존 gnb-sub 드롭다운 숨김 (메가메뉴가 있는 GNB에서만) */
.header-gnb:has(.mega-menu):hover .gnb-sub,
.header-gnb:has(.mega-menu):focus-within .gnb-sub {
  display: none !important;
  opacity: 0 !important;
}

/* 기존 배경 패널(그라데이션) 제거 (메가메뉴가 있는 GNB에서만) */
.header-gnb:has(.mega-menu) .gnb-list::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.header-gnb:has(.mega-menu):hover .gnb-list::after,
.header-gnb:has(.mega-menu):focus-within .gnb-list::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* --- MEGA MENU 패널 --- */
/* MEGA MENU — 헤더 박스 바닥에 부착, 1200px 중앙 정렬
   top 값은 .site-header { height } (header.css:29 = 11rem)와 일치해야 함 */
.mega-menu {
  position: fixed;
  top: 11rem;                                            /* 110px — .site-header 바닥선 */
  left: 50%;
  /* 2depth·3depth 영역을 항상 표시 — 3depth가 없는 메뉴도 영역(슬롯)은 유지.
     이미지(560)+2depth(260)+3depth(260)=1080px 고정. 기존 1200px 대비 우측 빈 여백 120px만 제거([N1] 너비 통일). */
  width: 1080px;
  background: #fff;
  box-shadow: 9px 4px 12px rgb(0 0 0 / 15%);
  border-bottom: none;
  border-top: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  transform: translateX(-50%) translateY(-4px);
  z-index: 999;
  overflow: hidden;                                      /* 3depth 포함 모든 내용은 mega-menu 1080px 내에 맞춰 설계됨 */
}
.gnb-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 스크롤 중에는 megamenu 강제 숨김 (header-mega.js가 body.is-scrolling 부여) */
body.is-scrolling .mega-menu,
body.is-scrolling .gnb-item:hover .mega-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mega-inner {
  display: flex;
  align-items: stretch;
  min-height: 260px;
}


/* --- 좌측 이미지 (오버레이 텍스트) --- */
.mega-thumb {
  width: 560px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #e8ecf0;
}
.mega-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mega-thumb-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.15) 80%, transparent 100%);
  color: #fff;
}
.mega-thumb-overlay .thumb-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 8px;
}
.mega-thumb-overlay .thumb-title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.mega-thumb-overlay .thumb-meta {
  display: block;
  font-size: 10px;
  opacity: 0.65;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* --- 2depth 메뉴 리스트 --- */
.mega-links {
  width: 260px;
  flex-shrink: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.mega-links-header {
  padding: 0 24px 12px;
  font-size: 11px;
  font-weight: 500;
  color: #aaa;
  letter-spacing: 0.05em;
}
.mega-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
.mega-links ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 36px;
  font-size: 17px;
  font-weight: 400;
  color: var(--ds-light-color-text-basic);               /* 1depth와 통일 */
  text-decoration: none;
  transition: color 0.15s, font-weight 0.15s;
}
.mega-links ul li a:hover,
.mega-links ul li a.is-active {
  color: #ef4122;
  font-weight: 700;
  background: #fafafa;
}

/* chevron */
.mega-chevron {
  flex-shrink: 0;
  opacity: 0.25;
  transition: opacity 0.15s;
}
.mega-has-depth3:hover .mega-chevron,
.mega-has-depth3 a.is-active .mega-chevron {
  opacity: 1;
  stroke: #ef4122;
}


/* --- 3depth 메뉴 — 세로 컬럼 (2depth와 동일 너비) [PUB 정합] ---
   ※ 3depth를 2depth 컬럼 우측에 패널 상단부터 평행하는 전체 세로 리스트로 표시.
      .mega-links를 기준 컨테이너로 삼아 모든 3depth(고객문의·경영공시 등) 통일. */
.mega-links {
  position: relative;                                    /* 3depth 절대위치 기준 컨테이너 */
}
.mega-has-depth3 {
  position: static;                                      /* 3depth가 li가 아닌 .mega-links 기준 배치 */
}
/* 3depth 컬럼이 실제로 펼쳐질 때만 패널이 잘리지 않도록 최소 높이 확보 (경영공시 5개 기준) */
.mega-inner:has(.mega-depth3.is-depth3-open) {
  min-height: 300px;
}

.mega-links ul li .mega-depth3 {
  position: absolute;
  top: 0;                                                /* .mega-links 상단 = 패널 상단부터 시작 */
  left: 100%;                                            /* 2depth 컬럼 바로 우측 */
  display: flex !important;
  flex-direction: column !important;                     /* 세로 컬럼 */
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 24px 0;                                       /* .mega-links 상하 패딩과 동일 → 첫 항목이 2depth 첫 항목과 정렬 */
  width: 100%;                                           /* = .mega-links(2depth) 폭과 항상 동일 (현재 260px) */
  box-sizing: border-box;
  background: #fff;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
}
.mega-links ul li .mega-depth3.is-depth3-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-links ul li .mega-depth3 > li {
  display: block;
}

/* 3depth 링크 — 2depth 항목과 동일 스타일(좌측 정렬·동일 패딩·폰트·행 높이) */
.mega-links ul li .mega-depth3 > li a {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: 100%;
  padding: 10px 36px !important;                          /* 2depth와 동일 */
  font-size: 17px;                                        /* 2depth와 동일 */
  font-weight: 400;
  color: var(--ds-light-color-text-basic);
  text-decoration: none;
  text-align: left;
  background: none !important;
  transition: color 0.15s, font-weight 0.15s;
}
.mega-links ul li .mega-depth3 > li a:hover,
.mega-links ul li .mega-depth3 > li a.is-active {
  color: #ef4122 !important;
  font-weight: 700 !important;
  background: #fafafa !important;
}