/* ============================================
   네비게이션 메뉴 구조적 문제 해결
   ============================================ */

/* 1. 메뉴 컨테이너가 header-container 높이에 맞춰 늘어나지 않도록 */
#header .header-column.justify-content-end .header-row {
	align-items: center !important;
	height: auto !important;
}

#header .header-nav.header-nav-links {
	align-self: center !important;
	height: auto !important;
}

#header .header-nav-main {
	align-self: center !important;
	height: auto !important;
}

/* 2. 메뉴 항목들이 컨테이너 높이에 맞춰 늘어나지 않도록 - 고정 높이 사용 */
#header .header-nav.header-nav-links nav > ul > li > a {
	padding: 0 0.9rem !important;
	margin: 0 !important;
	min-height: auto !important;
	height: auto !important;
	line-height: 1.5 !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* 3. nav ul이 flex로 정렬되도록 */
#header .header-nav-main nav > ul {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

#header .header-nav-main nav > ul > li {
	display: flex !important;
	align-items: center !important;
	height: auto !important;
}

/* 4. 드롭다운 메뉴 위치 및 겹침 문제 해결 */
#header .header-nav-main nav > ul > li.dropdown {
	position: relative;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	z-index: 10000 !important;
	margin-top: 0 !important;
	transform: none !important;
	pointer-events: auto !important;
}

#header .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu,
#header .header-nav-main nav > ul > li.dropdown.accessibility-open > .dropdown-menu,
#header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu {
	top: 100% !important;
	position: absolute !important;
	z-index: 10000 !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* 드롭다운 메뉴가 대메뉴와 겹치지 않도록 간격 추가 */
#header .header-nav-main nav > ul > li.dropdown:hover > a {
	position: relative;
	z-index: 10001;
}

/* 드롭다운 메뉴 항목 간 간격 조정 및 글머리기호 제거 */
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

/* 하위 메뉴 왼쪽 글머리기호 제거 (before/after 가상요소) */
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:before,
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:after {
	content: none !important;
	display: none !important;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
	padding: 8px 18px !important;
	margin: 0 !important;
	line-height: 1.5;
	display: block;
}

/* 메뉴 항목 호버 시 간격 유지 */
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a {
	margin: 0 !important;
	padding: 8px 18px !important;
}

/* 5. 스크롤 시에도 올바른 위치 유지 */
#header.header-effect-shrink .header-nav-main nav > ul > li.dropdown .dropdown-menu {
	position: absolute !important;
	top: 100% !important;
	margin-top: 0 !important;
}

/* 6. 메뉴 hover 색상 */
#header .header-nav.header-nav-light-text nav > ul > li > a {
	color: var(--light) !important;
	background: transparent !important;
}

#header .header-nav.header-nav-light-text nav > ul > li:hover > a,
#header .header-nav.header-nav-light-text nav > ul > li.open > a,
#header .header-nav.header-nav-light-text nav > ul > li.accessibility-open > a {
	color: var(--primary-200) !important;
	background: transparent !important;
}

/* 드롭다운 메뉴가 다른 요소 위에 표시되도록 */
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
	box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15) !important;
}

/* 드롭다운 메뉴와 대메뉴 사이 클릭 가능 영역 확보 */
#header .header-nav-main nav > ul > li.dropdown:hover {
	z-index: 10002;
}

#header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu {
	z-index: 10001;
}

/* 7. 스크롤 상단 복귀 시 배경 잔상 제거 */
html:not(.sticky-header-active) #header.header-transparent .header-body {
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
}

/* 헤더 내부 가상요소가 잔상(가로 바)로 남는 문제 제거 */
html:not(.sticky-header-active) #header.header-transparent .header-nav-main:before {
	content: none !important;
	background: transparent !important;
	height: 0 !important;
}

/* 전환 시 깜빡임(flicker) 최소화: 배경/보더/그림자 트랜지션 제거 */
html:not(.sticky-header-active) #header .header-body {
	transition: none !important;
}

/* 스티키가 활성화되면 어두운 배경 + 흰 텍스트로 */
html.sticky-header-active #header .header-body {
	background-color: #1e2226 !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
}
html.sticky-header-active #header .header-nav.header-nav-links nav > ul > li > a {
	color: #fff !important;
}
