/* ========================================
   Header Navigation & Menu Styles
   - 상단 헤더 메뉴, 메가메뉴, 드롭다운 메뉴 스타일
   - 사이드바 메뉴는 sidebar-menu.css 참조
   ======================================== */

/* Sticky header (Urdan-like) */
.header-area.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  animation: headerSlideDown 0.25s ease-out;
}

@keyframes headerSlideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* ========================================
   Header Main Menu (1depth) - 자동 줄바꿈 지원
   ======================================== */
/* 헤더 영역 패딩 조정 */
.header-area .header-bottom {
  /* padding: 12px 0; */
  padding: 6px 0px 0px 0px;
  background-color: var(--header-bottom-bg-color, #ffffff);
  color: var(--header-bottom-text-color, #000000);
}

.header-area .main-menu {
  min-height: auto;
}

.header-area .main-menu > nav {
  min-height: auto;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-area .main-menu > nav > ul.main-menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* justify-content: center; */
  align-items: center;
  row-gap: 2px;
}

/* 더보기 펼침 시 트리거 확장(220px)으로 인한 개행 방지: 해당 해상도에서도 1행 유지 */
.header-area .main-menu > nav > ul.main-menu-list:has(.main-menu-more .more-dropdown.is-open) {
  flex-wrap: nowrap;
}

/* 가로 스크롤 유형 (1줄로 표시) */
.header-area .main-menu.main-menu-scroll {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
  width: 100%;
  max-width: 100%;
}

.header-area .main-menu.main-menu-scroll > nav {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* 스크롤바 숨김 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  justify-content: flex-start;
  flex: 1;
  position: relative;
}

/* 스크롤바 숨김 (Chrome, Safari, Opera) */
.header-area .main-menu.main-menu-scroll > nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.header-area .main-menu.main-menu-scroll > nav > ul.main-menu-list {
  flex-wrap: nowrap;
  /* min-width: max-content; */
  width: 100%;
  padding: 0;
  justify-content: flex-start;
}

/* 가로 스크롤 화살표 버튼 */
.header-area .main-menu-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.2s ease;
  padding: 0;
  color: #333;
  font-size: 24px;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* 가로 스크롤 유형일 때만 버튼 표시 */
.header-area .main-menu.main-menu-scroll .main-menu-scroll-btn {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* 숨김 클래스가 있을 때는 숨김 처리 (우선순위 높임) */
.header-area .main-menu.main-menu-scroll .main-menu-scroll-btn.scroll-btn-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.header-area .main-menu-scroll-btn:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.header-area .main-menu-scroll-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.header-area .main-menu-scroll-btn-left {
  left: -40px;
  z-index: 2;
}

.header-area .main-menu-scroll-btn-right {
  right: -40px;
  z-index: 2;
}

/* 화살표 버튼 visibility 제어 */
.header-area .main-menu-scroll-btn.scroll-btn-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.header-area .main-menu-item {
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 18px;
}

.header-area .main-menu-item > a {
  display: block;
  padding: 6px 12px;
  color: var(--header-bottom-text-color, #222);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Sticky 상태일 때도 동일한 높이 유지 */
.header-area.is-sticky .main-menu > nav,
.header-area .sticky-bar.stick .main-menu > nav {
  min-height: auto;
  padding: 4px 0;
}

.header-area.is-sticky .main-menu-item > a,
.header-area .sticky-bar.stick .main-menu-item > a {
  line-height: 1.4;
  padding: 6px 12px;
}

/* 메뉴 전체 hover 시 비활성화 효과 */
.header-area .main-menu-list:hover .main-menu-item > a {
  opacity: 0.55;
}

/* 일반 hover 상태 - active가 아닌 경우만 (font-weight 고정으로 너비 흔들림 방지) */
.header-area .main-menu-item:not(.active):hover > a,
.header-area .main-menu-list:hover .main-menu-item:not(.active):hover > a {
  opacity: 1;
  /* hover 시에는 기본 색상 유지, 테마색 사용 안 함 */
}

/* active 항목은 hover 시에도 active 스타일 유지 */
.header-area .main-menu-item.active:hover > a {
  opacity: 1;
}

/* 메가메뉴 하위 항목 hover 시 부모 항목 글자색 변경 (active가 아닌 경우) */
.header-area .main-menu-item.child-hovered:not(.active) > a {
  color: var(--theme-color-primary, #e97730) !important;
  opacity: 1;
}

/* active 항목이 child-hovered인 경우는 active 스타일 우선 */
.header-area .main-menu-item.active.child-hovered > a {
  color: var(--theme-color-primary, #e97730) !important;
  opacity: 1;
}

/* 현재 페이지의 최상위 메뉴 항목 - 언더라인으로 구분 (font-weight 500 유지로 너비 일정) */
.header-area .main-menu-item.active > a {
  color: var(--theme-color-primary, #e97730) !important;
  opacity: 1;
  font-weight: 500;
  text-decoration: none !important;
  border-bottom: 2px solid var(--theme-color-primary, #e97730);
  /* display를 block으로 유지하여 padding 통일 */
  display: block;
  /* padding-bottom을 조정하여 border-bottom 공간 확보 */
  padding-bottom: 4px;
  box-sizing: border-box;
}

/* ========================================
   상단 메뉴 전형 드롭다운 (하위 메뉴 타입: 드롭다운메뉴)
   ======================================== */
.header-area .main-menu.main-menu--dropdown .main-menu-item.has-dropdown {
  position: relative;
}

/* container 너비 밖으로 나가지 않도록: 벗어날 때만 우측 정렬 (JS에서 .dropdown-align-right 추가) */
.header-area .header-bottom.sticky-bar .container {
  position: relative;
}

.header-area .main-menu.main-menu--dropdown .top-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 2rem));
  overflow: hidden;
  z-index: 1100;
  background: var(--header-bottom-bg-color, #ffffff);
  color: var(--header-bottom-text-color, #000000);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 8px 0;
  margin-top: 0px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  list-style: none;
  text-align: left;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.header-area .main-menu.main-menu--dropdown .main-menu-item.dropdown-open .top-nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scaleY(1);
}

/* container를 벗어날 때만 JS가 이 클래스를 붙여 우측 정렬 */
.header-area .main-menu.main-menu--dropdown .top-nav-dropdown.dropdown-align-right {
  right: 0;
  left: auto;
}

.header-area .main-menu.main-menu--dropdown .top-nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.header-area .main-menu.main-menu--dropdown .top-nav-dropdown-item {
  margin: 0;
  padding: 2px 0px;
}

.header-area .main-menu.main-menu--dropdown .top-nav-dropdown-link {
  display: block;
  padding: 8px 16px;
  /* color: var(--header-bottom-text-color, #000000); */
  color: #898989;
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-align: left;
}

.header-area .main-menu.main-menu--dropdown .top-nav-dropdown-link:hover {
  background: var(--theme-color-primary, #e97730);
  color: #ffffff;
}

.header-area .main-menu.main-menu--dropdown .top-nav-dropdown-link--disabled {
  color: var(--header-bottom-text-color, #666);
  cursor: default;
}

/* ========================================
   더보기 (고정 메뉴 이외 더보기) - 가로스크롤 화살표와 동일한 원형 버튼
   ======================================== */
.header-area .main-menu .main-menu-more {
  position: relative;
  flex-shrink: 0; /* 개행 시 우측으로 밀리지 않고 1행 유지되도록 */
  white-space: nowrap;
}

/* 현재 열린 업무화면 메뉴가 더보기 안에 있을 때 원형 버튼·화살표 테마색 하이라이트 */
.header-area .main-menu .main-menu-more.main-menu-more--active-in-dropdown .main-menu-more-trigger {
  border: 2px solid var(--theme-color-primary, #e97730);
  color: var(--theme-color-primary, #e97730);
}
.header-area .main-menu .main-menu-more.main-menu-more--active-in-dropdown .main-menu-more-trigger .pe-7s-angle-down {
  color: var(--theme-color-primary, #e97730);
  font-weight: 700;
}

.header-area .main-menu .main-menu-more-trigger {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--header-bottom-text-color, #333);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  /* box-shadow: 0 2px 8px rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.08); */
}

.header-area .main-menu .main-menu-more-trigger:hover {
  background: var(--header-bottom-bg-color, #ffffff);
  color: var(--theme-color-primary, #e97730);
  box-shadow: 0 4px 12px rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.12);
  transform: scale(1.1);
}

.header-area .main-menu .main-menu-more-trigger:active {
  transform: scale(0.95);
}

.header-area .main-menu .main-menu-more-trigger .pe-7s-angle-down {
  transition: transform 0.2s ease;
}

.header-area .main-menu .main-menu-more:has(.more-dropdown.is-open) .main-menu-more-trigger .pe-7s-angle-down {
  transform: rotate(180deg);
}

/* 더보기 펼침 시: 원형 너비 확장 → 드롭다운과 위아래 한 덩어리, 화살표 위치는 우측 유지 */
.header-area .main-menu .main-menu-more:has(.more-dropdown.is-open) .main-menu-more-trigger {
  width: 220px;
  min-width: 220px;
  border-radius: 8px 8px 0 0;
  justify-content: flex-end;
  padding-right: 10px;
  padding-left: 10px;
  border: 1px solid rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.06);
  border-bottom: none;
  background: var(--theme-color-surface, var(--header-bottom-bg-color, #ffffff));
  box-shadow: none;
}

.header-area .main-menu .main-menu-more:has(.more-dropdown.is-open) .main-menu-more-trigger:hover {
  transform: none;
}

/* 더보기 드롭다운: 상단 메뉴·헤더와 어울리는 디자인 (동일 테마 변수·그림자·강조선) */
.header-area .main-menu .more-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  width: max-content; /* 항목 길이에 맞춰 너비 확장, 좁은 해상도에서도 한 줄 유지 */
  z-index: 1100;
  background: var(--theme-color-surface, var(--header-bottom-bg-color, #ffffff));
  color: var(--theme-color-text-default, var(--header-bottom-text-color, #000000));
  box-shadow: 0 10px 30px rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.08);
  border: 1px solid rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.06);
  border-radius: 8px;
  padding: 12px 0;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  text-align: left;
}

.header-area .main-menu .more-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* 상단 직선 + 상단 테두리 제거 → 트리거와 하나로 연결 */
  border-radius: 0 0 8px 8px;
  border-top: none;
  margin-top: 0;
}

/* 더보기 드롭다운 리스트: 상단 메뉴와 동일한 .main-menu-list 사용 → 동일 스타일·호버 적용 */
.header-area .main-menu .more-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-area .main-menu .more-dropdown-list > .main-menu-item {
  display: block;
  position: relative;
  border: none;
  margin: 10px 16px;
  padding: 0px 0px 10px 0px;
}

/* 링크: 상단 메뉴와 동일한 색·타이포, 좌측 정렬 + 위아래 여유 (한 줄 유지로 개행 방지) */
.header-area .main-menu .more-dropdown-list > .main-menu-item > a {
  text-align: left;
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 6px 16px;
  box-sizing: border-box;
  color: var(--header-bottom-text-color, #222);
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 0.15s ease, color 0.2s ease;
  white-space: nowrap; /* 해상도 관계없이 항목 한 줄 표시 */
}

/* 더보기 드롭다운: 밑줄 좌→우 흐르는 효과 (::after) */
.header-area .main-menu .more-dropdown-list > .main-menu-item > a::after {
  content: "";
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--theme-color-primary, #e97730);
  transition: width 0.4s ease, left 0s ease 0.4s, right 0s ease 0.4s;
}

.header-area .main-menu .more-dropdown-list > .main-menu-item:hover > a::after,
.header-area .main-menu .more-dropdown-list > .main-menu-item.active > a::after {
  left: 0;
  right: auto;
  width: 100%;
  transition: width 0.4s ease;
}

/* 더보기 드롭다운: hover 시 글자색 테마색 (font-weight 진하게 대신) */
.header-area .main-menu .more-dropdown-list > .main-menu-item:hover > a {
  color: var(--theme-color-primary, #e97730) !important;
  opacity: 1;
  font-weight: 500;
  text-decoration: none !important;
}

/* 더보기 드롭다운: active(현재 페이지) 테마색, 밑줄은 ::after만 사용(상단메뉴와 동일하게 1줄) */
.header-area .main-menu .more-dropdown-list > .main-menu-item.active > a {
  color: var(--theme-color-primary, #e97730) !important;
  opacity: 1;
  border-bottom: none;
  font-weight: 500;
}

/* 더보기 내부에서 펼쳐지는 하위 드롭다운: 좌측에 표시 */
.header-area .main-menu .more-dropdown-list .top-nav-dropdown {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0px;
  margin-left: 0;
}

/* 더보기 내부는 JS align-right 무시 — 우측 정렬 시 부모 항목 위에 겹침 */
.header-area .main-menu .more-dropdown-list .main-menu-item .top-nav-dropdown.dropdown-align-right {
  top: 0;
  right: 100%;
  left: auto;
}

/* ========================================
   Mega Menu Dropdown (Bootstrap Grid 기반)
   ======================================== */
/* 메가메뉴 드롭다운 컨테이너 - 화면 전체 너비로 확장 */
.mega-menu-dropdown {
  position: fixed;
  left: 0;
  right: 0;
  /* top은 JavaScript에서 동적으로 설정됨 */
  top: 80px; /* JavaScript에서 동적으로 변경됨 - 초기값 */
  width: 100vw;
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  padding: 0;
  margin-top: -1px; /* 메뉴 영역과의 간격 제거 */
  max-height: 550px;
  overflow-y: auto;
}

/* 메가메뉴 상단에 보이지 않는 영역 추가하여 마우스 이동 경로 확보 */
.mega-menu-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
  pointer-events: auto;
}

/* 메가메뉴 숨김 상태 (JavaScript에서 클래스로 제어) */
.mega-menu-dropdown.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(0) !important;
  pointer-events: none !important;
}

/* 메뉴 영역 전체 hover 시 공통 메가메뉴 표시 */
/* !important를 사용하여 인라인 스타일보다 우선순위 확보 */
/* mouseenter 이벤트로 hidden 클래스가 제거되면 자동으로 표시됨 */
/* 메가메뉴가 main-menu 밖으로 이동했으므로 형제 선택자 사용 */
.header-area .main-menu:hover ~ .mega-menu-dropdown:not(.hidden),
.header-area .main-menu > nav:hover ~ .mega-menu-dropdown:not(.hidden),
.header-area .main-menu > nav .main-menu-list:hover ~ .mega-menu-dropdown:not(.hidden),
.header-area .header-bottom:hover .mega-menu-dropdown:not(.hidden),
.header-area .mega-menu-dropdown:hover:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* container-fluid: 컨테이너 최대 너비로 제한하고 중앙 정렬 */
.mega-menu-dropdown .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* XL (≥1400px) */
@media only screen and (min-width: 1400px) {
  .mega-menu-dropdown .container-fluid {
    max-width: var(--container-max-width-xl, 1400px);
  }
}

/* LG (992px ~ 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mega-menu-dropdown .container-fluid {
    min-width: var(--container-max-width-lg, 992px);
  }
}

/* MD (768px ~ 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mega-menu-dropdown .container-fluid {
    min-width: var(--container-max-width-md, 768px);
  }
}

/* SM (576px ~ 767px) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .mega-menu-dropdown .container-fluid {
    max-width: var(--container-max-width-sm, 576px);
  }
}

/* row 내부 padding 조정 (선택사항) */
.mega-menu-dropdown .row {
  margin-left: 0;
  margin-right: 0;
  display: grid !important;
  grid-template-columns: repeat(var(--mega-menu-section-max-columns, 4), 1fr);
  gap: 0;
}

/* 메가메뉴 섹션 스타일 (각 1depth 항목의 컬럼) */
.mega-menu-section {
  padding: 22px 24px;
  min-height: 200px;
  min-width: 0;
  overflow: hidden;
  /* border-right: 1px solid rgba(0,0,0,0.06); */
  text-align: left;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

.mega-menu-section:last-child {
  border-right: none;
}

/* 반응형 패딩 조정 */
@media (max-width: 1199px) and (min-width: 992px) {
  .mega-menu-section {
    padding: 22px 20px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .mega-menu-section {
    padding: 22px 16px;
  }
}

@media (max-width: 767px) {
  .mega-menu-section {
    padding: 16px;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .mega-menu-section:last-child {
    border-bottom: none;
  }
}

/* 메가메뉴 그룹 */
.mega-menu-group {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 메가메뉴 헤더 (컬럼 제목) */
.mega-menu-header {
  padding: 6px 0 12px 0;
  margin-bottom: 8px;
}

.mega-menu-header span {
  display: inline-block;
  font-weight: 700;
  color: #333;
  border-left: 3px solid var(--theme-color-secondary);
  padding-left: 8px;
  transition: color 0.2s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* 상단 메뉴 항목 hover 시 메가메뉴 섹션 배경 하이라이트 (테마색 흐림) */
.mega-menu-section[data-menu-index].highlighted {
  background: color-mix(in srgb, var(--theme-color-primary, #e97730) 10%, transparent);
  transition: background 0.2s ease;
}

/* 상단 메뉴 항목 hover 시 메가메뉴 헤더(제목) 하이라이트 */
.mega-menu-section[data-menu-index].highlighted .mega-menu-header span {
  color: var(--theme-color-secondary);
}

/* 메가메뉴 하위 항목 hover 시 부모 섹션 배경·헤더 하이라이트 */
.mega-menu-section[data-menu-index].child-hovered {
  background: color-mix(in srgb, var(--theme-color-primary, #e97730) 10%, transparent);
  transition: background 0.2s ease;
}
.mega-menu-section[data-menu-index].child-hovered .mega-menu-header span {
  color: var(--theme-color-primary, #e97730) !important;
}

/* 메가메뉴 링크 */
.mega-menu-link {
  display: block;
  padding: 10px 5px 10px 0px;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.mega-menu-link:hover {
  font-weight: bold;
  color: var(--theme-color-secondary);
}

/* 메가메뉴 아이템 리스트 */
.mega-menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--mega-menu-columns, 1), 1fr);
  gap: 0;
}

.mega-menu-item {
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow: hidden;
}

/* ========================================
   일반 드롭다운 서브메뉴 (메가메뉴가 아닌 경우)
   ======================================== */
.header-area .main-menu > nav ul li > ul.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 8px 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.header-area .main-menu > nav ul li:hover > ul.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-area .main-menu > nav ul li > ul.submenu li a {
  display: block;
  padding: 10px 16px;
  color: var(--header-bottom-text-color, #222);
  white-space: nowrap;
}

.header-area .main-menu > nav ul li > ul.submenu li a:hover {
  font-weight: bold;
  color: var(--theme-color-secondary);
}

/* deeper levels: fly-out to the right */
.header-area .main-menu > nav ul li > ul.submenu ul.submenu {
  left: 100%;
  top: 0;
}

/* ========================================
   사이드 내비게이션 & 트리 메뉴 (좌/우 레이아웃)
   ======================================== */
.nav-layout {
  position: fixed;
  /* top과 bottom은 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
  top: 0px; /* JavaScript에서 동적으로 변경됨 */
  bottom: 0px; /* JavaScript에서 동적으로 변경됨 */
  width: var(--nav-layout-width, 280px);
  background: var(--header-bottom-bg-color, var(--theme-color-surface, #ffffff));
  color: var(--header-bottom-text-color, #000000);
  box-shadow: 4px 0 20px rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.08);
  display: none;
  flex-direction: column;
  padding: 24px 20px;
  z-index: 1050;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-y: auto;
}

.nav-layout-left {
  left: 0;
  border-right: 1px solid #e5e7eb;
}

.nav-layout-right {
  right: 0;
  border-left: 1px solid #e5e7eb;
  box-shadow: -4px 0 20px rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.08);
}

.nav-layout__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-layout__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.nav-layout-left .nav-layout-left .nav-layout__logo {
  justify-content: flex-start;
  text-align: left;
}

body.nav-layout-right .nav-layout-right .nav-layout__logo {
  justify-content: flex-end;
  text-align: right;
}

.nav-layout__logo img {
  max-width: 160px;
  height: auto;
}

.nav-layout__menu {
  margin-top: 24px;
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

.nav-layout__menu::-webkit-scrollbar {
  width: 6px;
}

.nav-layout__menu::-webkit-scrollbar-thumb {
  background: rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.1);
  border-radius: 6px;
}

.nav-layout__menu::-webkit-scrollbar-track {
  background: transparent;
}

.nav-layout__toolbar {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.nav-toolbar-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--theme-color-primary) 12%, transparent);
  color: var(--theme-color-primary);
  transition: all 0.2s ease;
}

.nav-toolbar-btn:hover {
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary, #ffffff);
  transform: translateY(-2px);
}

.nav-toolbar-search {
  position: relative;
}

.nav-layout .nav-search-wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 220px;
  background: var(--theme-color-surface, #ffffff);
  border: 1px solid rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.08);
  box-shadow: 0 12px 24px rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 20;
}

.nav-layout .nav-search-wrap.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-layout .nav-search-wrap form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-layout .nav-search-wrap form input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.12);
  font-size: 14px;
  background: var(--theme-color-surface, #ffffff);
  color: var(--header-bottom-text-color, var(--theme-color-text-default, #1f2937));
}

.nav-layout .nav-search-wrap form .button-search {
  position: static;
  transform: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav-layout .nav-search-wrap form .button-search:hover {
  color: var(--theme-color-on-primary, #ffffff);
  background: color-mix(in srgb, var(--theme-color-primary) 85%, black);
}

body.nav-layout-left .nav-layout-left .nav-search-wrap {
  left: calc(100% + 12px) !important;
  right: auto !important;
}

body.nav-layout-right .nav-layout-right .nav-search-wrap {
  right: calc(100% + 12px) !important;
  left: auto !important;
}

.nav-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-tree-root > .nav-tree__item {
  margin-bottom: 4px;
}

.nav-tree__item + .nav-tree__item {
  margin-top: 4px;
}

.nav-tree-children {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.05);
  display: none;
}

.nav-tree__link-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

body.nav-layout-right .nav-layout-right .nav-tree__link-wrapper {
  justify-content: flex-end !important;
  /* flex-direction: row-reverse !important; */
  text-align: right;
}

.nav-tree__toggle {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.12);
  background: var(--theme-color-surface, #ffffff);
  color: var(--theme-color-text-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.nav-tree__toggle:hover,
.nav-tree__item.is-open > .nav-tree__link-wrapper .nav-tree__toggle {
  border-color: var(--theme-color-primary);
  color: var(--theme-color-primary);
}

body.nav-layout-right .nav-layout-right .nav-tree__toggle {
  order: 2;
  margin-left: 6px;
  margin-right: 0;
}

.nav-tree__toggle--placeholder {
  border-style: dashed;
  color: rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.18);
  cursor: default;
  pointer-events: none;
}

.nav-tree__toggle--placeholder::before {
  content: '↗';
  font-size: 12px;
  color: rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.35);
  display: inline-block;
  transform: translateY(1px);
}

/* 최상단 메뉴(1depth)에서는 플레이스홀더 버튼 숨김 */
.nav-tree-root > .nav-tree__item > .nav-tree__link-wrapper > .nav-tree__toggle--placeholder {
  display: none;
}

.nav-tree__link {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--header-bottom-text-color, var(--theme-color-text-default, #1f2937));
  font-weight: 500;
  transition: all 0.2s ease;
}

body.nav-layout-right .nav-layout-right .nav-tree__link {
  text-align: right;
}

body.nav-layout-right .nav-layout-right .nav-tree-children {
  margin-left: 0;
  padding-left: 0;
  margin-right: 10px;
  padding-right: 12px;
  border-left: none;
  border-right: 1px solid rgba(var(--theme-color-shadow-rgb, 0, 0, 0), 0.05);
}

body.nav-layout-right .nav-layout-right .nav-tree__item + .nav-tree__item {
  margin-top: 4px;
}

body.nav-layout-right .nav-layout-right .nav-tree__toggle--placeholder {
  transform: rotateY(180deg);
}

.nav-tree__link:hover {
  background: color-mix(in srgb, var(--theme-color-primary) 12%, transparent);
  color: var(--theme-color-primary);
}

.nav-tree__link.is-active {
  background: color-mix(in srgb, var(--theme-color-primary) 18%, transparent);
  color: var(--theme-color-primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-color-primary) 35%, transparent);
}

.nav-tree-children .nav-tree__link.is-active {
  color: var(--theme-color-primary);
  font-weight: 600;
}

.nav-tree-children.is-expanded {
  display: block;
}

.nav-tree__item.is-open > .nav-tree__link-wrapper .nav-tree__link {
  background: color-mix(in srgb, var(--theme-color-primary) 10%, transparent);
  color: var(--theme-color-primary);
}

.nav-tree-children .nav-tree__link {
  font-size: 12px;
  font-weight: 400;
  color: var(--header-bottom-text-color, var(--theme-color-text-muted, #6b7280));
}

.nav-tree-children .nav-tree__link:hover {
  color: var(--theme-color-primary);
}

body.nav-layout-left .nav-layout-left,
body.nav-layout-right .nav-layout-right {
  display: flex;
}

body.nav-layout-left .header-bottom,
body.nav-layout-right .header-bottom {
  display: none !important;
}

/* 좌/우측 메뉴일 때도 header-top은 표시 */
body.nav-layout-left .header-top,
body.nav-layout-right .header-top {
  display: block !important;
}

/* 좌/우측 메뉴일 때 header-area는 최상단에 고정 배치 */
body.nav-layout-left .header-area,
body.nav-layout-right .header-area {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--header-top-bg-color, #f8f8f8);
}

body.nav-layout-left .main-wrapper {
  margin-left: var(--nav-layout-width, 280px);
  margin-right: 0;
  /* margin-top과 min-height는 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
  margin-top: 0px; /* JavaScript에서 동적으로 변경됨 */
}

body.nav-layout-right .main-wrapper {
  margin-right: var(--nav-layout-width, 280px);
  margin-left: 0;
  /* margin-top과 min-height는 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
  margin-top: 0px; /* JavaScript에서 동적으로 변경됨 */
}

body.nav-layout-left .main-wrapper,
body.nav-layout-right .main-wrapper {
  /* min-height는 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
  min-height: 100vh; /* JavaScript에서 동적으로 변경됨 */
}

/* main-content에 footer 높이만큼 하단 패딩 추가 (푸터가 콘텐츠를 가리지 않도록) */
body.nav-layout-left .main-content,
body.nav-layout-right .main-content {
  box-sizing: border-box;
}


body.nav-layout-right .nav-layout-right {
  display: flex;
}

@media (max-width: 991px) {
  body.nav-layout-left .nav-layout-left,
  body.nav-layout-right .nav-layout-right {
    display: none !important;
  }

  body.nav-layout-left .header-bottom,
  body.nav-layout-right .header-bottom {
    display: block !important;
  }

  body.nav-layout-left .header-top,
  body.nav-layout-left #banner-container,
  body.nav-layout-left #center-image-container,
  body.nav-layout-left .main-wrapper,
  body.nav-layout-left .footer-area,
  body.nav-layout-right .header-top,
  body.nav-layout-right #banner-container,
  body.nav-layout-right #center-image-container,
  body.nav-layout-right .main-wrapper,
  body.nav-layout-right .footer-area {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 모바일 해상도에서 업무화면 요소가 너비를 초과하지 않도록 개선 */
@media (max-width: 767px) {
  /* 태블릿/모바일에서 header-area 상단 고정 */
  .header-area {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* body와 html에 overflow-x 방지 */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* main-wrapper와 main-content 너비 제한 */
  .main-wrapper,
  .main-wrapper-2 {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .main-content {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 모든 컨테이너 요소 너비 제한 */
  .container,
  .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* 그리드 컨테이너 너비 제한 */
  .grid-container,
  .unified-grid-container {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 그리드 아이템 너비 제한 */
  .grid-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 테이블 반응형 처리 */
  .table-responsive,
  table {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }

  /* 이미지와 미디어 요소 너비 제한 */
  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 모바일에서 AOS 비활성화 시 모든 요소가 보이도록 강제 설정 */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  [data-aos].aos-init,
  [data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* fade 애니메이션 관련 */
  [data-aos^="fade"] {
    opacity: 1 !important;
    transform: translateZ(0) !important;
  }

  /* zoom 애니메이션 관련 */
  [data-aos^="zoom"] {
    opacity: 1 !important;
    transform: translateZ(0) scale(1) !important;
  }

  /* slide 애니메이션 관련 */
  [data-aos^="slide"] {
    transform: translateZ(0) !important;
  }

  /* flip 애니메이션 관련 */
  [data-aos^="flip"] {
    transform: none !important;
  }

  /* 로고 이미지는 원본 크기 유지 (우선순위 높임) */
  .logo a img {
    max-width: 160px !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 카드와 박스 요소 너비 제한 */
  .card,
  .card-body,
  .card-header,
  .card-footer {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 폼 요소 너비 제한 */
  .form-control,
  .form-select,
  .form-check,
  .input-group {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 버튼 그룹 너비 제한 */
  .btn-group,
  .btn-toolbar {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* 모든 요소에 box-sizing 적용 */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }
}

body.nav-layout-left .header-height-1,
body.nav-layout-right .header-height-1 {
  min-height: auto;
}