@charset "utf-8";
/* ==========================================================================
   사이트 GNB (header.jsp + leftmenu.jsp)
   - 기본: 투명 오버레이 / 스크롤 시(.on): 배경 컬러 + 상단 고정
   - layout.css 의 `#header{display:none}`(개발용 navbar 사용) 를 되돌리는 선언 포함
     → headHtml.jsp 에서 layout.css 다음에 로드되어야 함
   ========================================================================== */

:root {
	--header-height: 118px;
	--header-height-fixed: 90px;
	--header-text: #fff;              /* 투명 상태 글자색 */
	--header-text-on: #222;           /* 스크롤 상태 글자색 */
	--header-bg-on: #fff;             /* 스크롤 상태 배경색 */
	--header-mega-bg: rgba(255,255,255,.96);   /* 메가메뉴 열림 시 배경 */
}

/* ===== 헤더 기본 (투명 바) ===== */
#header {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: var(--header-height);
	background: transparent;
	border-bottom: 1px solid rgba(255,255,255,.25);
	transition: background-color .3s ease, height .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#header .inner {
	position: relative;
	z-index: 2;               /* 메가메뉴 배경 패널(.gnb_mega_bg) 위로 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

/* ===== 스크롤 시 (배경 적용 + 고정) ===== */
#header.on {
	height: var(--header-height-fixed);
	background-color: var(--header-bg-on);
	border-bottom-color: rgba(0,0,0,.06);
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ===== 메가메뉴 열림 시 헤더 (투명 상태여도 흰 배경 + 어두운 글자) ===== */
#header.mega_on {
	background-color: var(--header-mega-bg);
	border-bottom-color: transparent;
	box-shadow: none;
}
/* 스크롤(.on) 상태에서는 뒤 콘텐츠가 비치지 않도록 불투명 처리 */
#header.on.mega_on,
#header.on.mega_on .gnb_mega_bg { background: var(--header-bg-on); }

#header.mega_on .logo img { filter: none; }
#header.mega_on .gnb > li > a { color: var(--header-text-on); }
#header.mega_on .m_btn i { background: var(--header-text-on); }

/* 메가메뉴 배경 패널 : 헤더 아래로 펼쳐지는 전체폭 영역 (높이는 JS 계산) */
#header .gnb_mega_bg {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 1;
	width: 100%;
	height: 0;
	background: var(--header-mega-bg);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 14px 26px rgba(0,0,0,.08);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: height .3s ease, opacity .25s ease, visibility .25s ease;
}
#header.mega_on .gnb_mega_bg {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ===== 로고 =====
   투명 상태에서는 흰색 실루엣(filter)으로 노출 → 스크롤 시 원본 컬러 로고
   ※ 흰색 전용 로고(logo_w.png) 준비되면 img 교체 방식으로 변경 권장 */
#header .logo {
	flex: 0 0 auto;
	margin: 0;
	line-height: 1;
}
#header .logo a {
	display: block;
	text-decoration: none;
}
/* 가로형 로고(/img/logo.png 598x220, 2026-09-02 logo_trim.png 에서 교체)
   비율이 가로로 길어 세로형(logo_trim) 때의 102px 를 그대로 쓰면 폭이 과하게 커진다 */
#header .logo img {
	display: block;
	width: auto;
	height: 74px;
	filter: brightness(0) invert(1);
	transition: height .3s ease, filter .3s ease;
}
#header.on .logo img {
	height: 60px;                  /* 스크롤 시 헤더 90px 기준 */
	filter: none;
}

/* ===== GNB (1뎁스) ===== */
#header .gnb_wrap { flex: 1 1 auto; }
#header .gnb {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#header .gnb > li {
	position: relative;
	padding: 0;
}
#header .gnb > li > a {
	display: block;
	padding: 0 26px;
	line-height: var(--header-height);
	font-size: 21px;
	/* S-Core Dream 은 한 단계 얇게 매핑돼 있어(500=Regular) 600(Medium) 이라야 또렷하다 (2026-09-04) */
	font-weight: 600;
	color: var(--header-text);
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-decoration: none;
	transition: color .3s ease, line-height .3s ease;
}
#header.on .gnb > li > a { color: var(--header-text-on); line-height: var(--header-height-fixed); }
#header .gnb > li > a:hover,
#header .gnb > li.on > a,
#header .gnb > li > a.current-menu { color: var(--point-main, #3062C3); }

/* 1뎁스 hover 밑줄 */
#header .gnb > li > a:after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	margin: -2px auto 0;
	background: var(--point-main, #3062C3);
	transition: width .3s ease, background-color .3s ease;
}
#header .gnb > li:hover > a:after,
#header .gnb > li.on > a:after { width: calc(100% - 26px); }

/* 메가메뉴 열림 시 : 모든 1뎁스 아래 컬럼 구분선 노출, hover 한 항목만 포인트 컬러 */
#header.mega_on .gnb > li > a:after {
	width: calc(100% - 20px);
	background: rgba(0,0,0,.13);
}
#header.mega_on .gnb > li:hover > a:after {
	background: var(--point-main, #3062C3);
}

/* ===== 2뎁스 (메가메뉴 컬럼) ===== */
#header .gnb > li > ul {
	position: absolute;
	left: 26px;
	top: 100%;
	min-width: 140px;
	margin: 0;
	padding: 30px 0 46px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
#header.mega_on .gnb > li > ul {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}
#header .gnb > li > ul > li > a {
	display: block;
	padding: 8px 0;
	font-size: 19px;
	/* S-Core Dream 은 굵기가 한 단계 얇게 매핑돼 있어(400=Light) 흐려 보였다 → 600(Medium) (2026-09-04) */
	font-weight: 600;
	color: #3b444d;
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}
#header .gnb > li > ul > li > a:hover,
#header .gnb > li > ul > li > a.current-menu {
	color: var(--point-main, #3062C3);
	font-weight: 700;
	padding-left: 4px;
}

/* ===== 모바일 햄버거 버튼 ===== */
#header .m_btn { flex: 0 0 auto; margin: 0; }
#header .m_btn i { background: var(--header-text); }
#header.on .m_btn i { background: var(--header-text-on); }

/* ==========================================================================
   반응형
   ========================================================================== */
@media all and (max-width:1400px){
	#header .gnb > li > a { padding: 0 14px; font-size: 19px; }
	#header .gnb > li:hover > a:after,
	#header .gnb > li.on > a:after { width: calc(100% - 18px); }
	#header.mega_on .gnb > li > a:after { width: calc(100% - 14px); }
	#header .gnb > li > ul { left: 18px; }
	#header .gnb > li > ul > li > a { font-size: 18px; }
}

@media all and (max-width:1024px){
	:root {
		--header-height: 84px;
		--header-height-fixed: 72px;
	}
	/* layout.css 에서 숨긴 헤더를 다시 노출 (모바일은 GNB 숨김 + 햄버거 사용) */
	#header { display: block; }
	#header .gnb_wrap { display: none; }
	#header .gnb_mega_bg { display: none; }
	#header .m_btn { display: inline-block; }
	#header .logo img { height: 54px; }
	#header.on .logo img { height: 46px; }
}