/* ============================================================
   1. 공용 및 기본 스타일 (데스크톱 기준)
   ============================================================ */

/* 2차 메뉴(depth02) 공통 */
#header .depth02, 
#mobile_menu .depth02 { 
  width: 100%; 
  z-index: 10; 
  background-color: #fff; 
  display: none; /* 기본 닫힘 */
  overflow: hidden; 
}

#header .depth02 { 
  position: absolute; 
  top: calc(100% - 10px); 
  padding-bottom: 30px; 
  border-radius: 0 0 15px 15px; 
}

/* 항목 링크 스타일 */
#header .depth02 > li > a,
#header .depth02 .more-menu > a { 
  display: inline-block; 
  width: 100%; 
  font-size: 1.7rem; 
  font-weight: 400; 
  color: #666; 
  text-align: center; 
  padding: 10px 0; 
}

/* Hover & Focus 액션 */
#header .depth01 > li { position: relative; }
#header .depth01 > li:hover > .depth02, 
#header .depth01 > li:focus-within > .depth02 { display: block; }

#header .depth01 > li:hover > a { background-color: #fff; color: var(--blue); }
#header .depth01 > li:hover > a::after { transform: translateX(-50%) scaleX(1); }
#header .depth02 > li:hover > a { font-weight: 500; color: var(--blue); }

/* 서브메뉴(3차) 제어 */
#header .depth02 li.sub-menu,
.lnb .more-menu, 
.lnb .sub-menu { display: none !important; }

#header .depth02 li.sub-menu.is-open { display: list-item; }

/* 모바일 오버레이 */
#header.overlay-active { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; }
#header.overlay-active nav { transform: translateX(0); }


/* ============================================================
   2. 미디어 쿼리: 모바일 (1023px 이하)
   ============================================================ */
@media (max-width: 1023px) {
  #header nav {
    position: fixed; right: 0; top: 0; width: 80%; height: 100%;
    background: #fff; transform: translateX(100%); transition: transform .3s;
    overflow-y: auto;
  }

  /* 모바일용 depth02 스타일 조정 */
  #mobile_menu .depth02 { position: relative; padding-bottom: 12px; border-radius: 0; }
  #mobile_menu .depth02 > li > a,
  #mobile_menu .depth02 .more-menu > a {
    display: block; text-align: left; padding: 12px 16px; font-size: 1.6rem; color: #555;
  }
  #mobile_menu .depth02 > li > a:active { background: #f5f7fb; color: var(--blue); }

  /* [구조 변경] 모바일에서는 펼침 메뉴 없이 하위 메뉴를 항상 노출 */
  .more-menu { display: block !important; padding-left: 0; }
  .sub-menu { 
    display: none; 
    padding-left: 20px; 
    border-left: 2px solid #eee; 
    margin: 10px 0; 
  }
  .sub-menu.is-open{
    display: block;
  }
}


/* ============================================================
   3. 미디어 쿼리: 데스크톱 전용 (1024px 이상)
   ============================================================ */
@media (min-width: 1024px) {
  .sub-menu { display: none; }
  .more-menu:hover .sub-menu { display: block; }
}