@charset "utf-8";
/* 리뉴얼 헤더 — 사이트 전체 (head.sub.php 에서 custom.css 다음에 로드)
 * custom.css 의 기존 헤더 규칙을 덮어쓰는 방식이므로 custom.css 보다 뒤에 와야 한다 */

:root{
	--hd-height:95px;
	--hd-bg:#F7F6F4;
	--hd-text:#1C1C1C;
	--hd-point:#FFE922;
	--site-width:1548px;
}

/* ── PC ───────────────────────────── */
#hd{background:var(--hd-bg); border-bottom:0; position:relative; z-index:600;}
#hd_wrapper{width:auto !important; max-width:var(--site-width); margin:0 auto; height:var(--hd-height);}
#gnb{display:flex; align-items:center; height:100%; background:transparent;}

#gnb .logo{width:auto; float:none; flex:0 0 auto;}
#gnb .logo a{padding:0; display:block;}
#gnb .logo img{display:block; width:112px; height:42px;}

.main_menu_container{float:none; width:auto; flex:1 1 auto; height:100%;}
.main_menu_container .main_menu{display:flex; justify-content:center; height:100%;}
.main_menu_container .main_menu>li{width:auto; display:flex; align-items:center; padding:0 var(--gnb-gap, 35px); text-align:center;}
.main_menu_container .main_menu>li:nth-child(1){text-align:center;}
.main_menu_container .main_menu>li>a{font-size:20px; color:var(--hd-text); padding:0; border-bottom:0; letter-spacing:-0.5px; line-height:var(--hd-height);}
.main_menu_container .main_menu>li.on>a,
.main_menu_container .main_menu>li:hover>a{color:var(--hd-text); font-weight:700; border-bottom:0;}

/* 2차 메뉴: 각 1차 메뉴 글자 왼쪽 끝에 맞춰 왼쪽 정렬, 헤더와 같은 배경으로 이어지는 패널 */
.main_menu_container .main_menu>li .dept2,
.main_menu_container .main_menu>li:nth-child(n) .dept2{top:var(--hd-height); left:var(--gnb-gap, 35px); transform:none; width:auto; min-width:0;}
.dept2 ul li,
.dept2 ul li:nth-child(1),
.main_menu_container ul li:nth-child(2) .dept2 ul li{width:auto; display:block; padding:10px 0; text-align:left; white-space:nowrap;}
.dept2 ul li:nth-child(1){padding-top:10px;}
.dept2 ul li a{display:inline-block; padding:0 2px; font-size:15px; line-height:1.4; color:var(--hd-text); font-weight:400;}
/* 현재 페이지·hover: 노란 형광펜 표시 */
.dept2 ul li:hover a,
.dept2 ul li.on a{color:var(--hd-text); background:var(--hd-point); font-weight:400;}
.submenu_bg{top:var(--hd-height); height:200px; background:var(--hd-bg); border:0;}

/* 우측 전체메뉴 버튼 (head.php #gnb 안, 동작은 header_new.js) */
.gnb_all_btn{flex:0 0 auto; width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; position:relative;}
.gnb_all_btn span{position:absolute; left:4px; right:4px; height:2px; background:var(--hd-text); transition:transform .2s, opacity .2s;}
.gnb_all_btn span:nth-child(1){top:7px;}
.gnb_all_btn span:nth-child(2){top:13px;}
.gnb_all_btn span:nth-child(3){top:19px;}
#hd.is-open .dept2,
#hd.is-open .submenu_bg{display:block !important;} /* 버튼으로 연 경우 hover 해제돼도 유지 */
#hd.is-open .gnb_all_btn span:nth-child(1){transform:translateY(6px) rotate(45deg);}
#hd.is-open .gnb_all_btn span:nth-child(2){opacity:0;}
#hd.is-open .gnb_all_btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ── PC 반응형: 메뉴 간격 → 글자 크기 → 헤더 높이 순으로 줄임 ── */
@media (max-width:1600px){
	#hd_wrapper{padding:0 20px; margin:0 auto;}
}
@media (max-width:1400px){
	#hd{--gnb-gap:28px;}
}
@media (max-width:1200px){
	:root{--hd-height:80px;}
	#hd{--gnb-gap:20px;}
	#gnb .logo img{width:96px; height:36px;}
	.main_menu_container .main_menu>li>a{font-size:18px;}
	.dept2 ul li a{font-size:14px;}
	.submenu_bg{height:190px;}
}
@media (max-width:1080px){
	#hd{--gnb-gap:14px;}
	.main_menu_container .main_menu>li>a{font-size:16px;}
}

/* ── 모바일 (기존 980px 분기 유지) ───────────── */
/* 최소 글자 크기 13px */
@media (max-width:980px){
	:root{--mhd-height:64px; --mhd-logo:30px;}
	#hd{border-bottom:0;}
	.mobile_menu_wrapper{background:var(--hd-bg); top: 0;}
	.mobile_menu_btn{display:flex; align-items:center; height:var(--mhd-height); padding:0 20px; border-bottom:1px solid #e9e7e3;}
	.mobile_menu_btn .mobile_logo{display:flex; align-items:center; flex-direction:row-reverse; width:100%;}
	.mobile_menu_btn .mobile_logo_btn{width:auto; flex:0 0 auto; margin-right:auto;}
	.mobile_menu_btn .mobile_logo_btn img{display:block; width:auto; height:var(--mhd-logo);}
	/* 햄버거/닫기 버튼: 기존 이미지 대신 PC 와 같은 선 아이콘 (img 는 alt 유지용으로 투명 처리) */
	.mobile_menu_btn .ninja_btn,
	.mobile_menu_btn .ninja_close{width:28px; height:28px; vertical-align:middle;}
	.mobile_menu_btn .ninja_btn a,
	.mobile_menu_btn .ninja_close a{position:relative; display:block; width:100%; height:100%;}
	.mobile_menu_btn .ninja_btn a img,
	.mobile_menu_btn .ninja_close a img{display:block; width:100%; height:100%; opacity:0;}
	.mobile_menu_btn .ninja_btn a{background:
		linear-gradient(var(--hd-text), var(--hd-text)) no-repeat 4px 7px / 20px 2px,
		linear-gradient(var(--hd-text), var(--hd-text)) no-repeat 4px 13px / 20px 2px,
		linear-gradient(var(--hd-text), var(--hd-text)) no-repeat 4px 19px / 20px 2px;}
	.mobile_menu_btn .ninja_close a:before,
	.mobile_menu_btn .ninja_close a:after{content:""; position:absolute; left:4px; right:4px; top:13px; height:2px; background:var(--hd-text);}
	.mobile_menu_btn .ninja_close a:before{transform:rotate(45deg);}
	.mobile_menu_btn .ninja_close a:after{transform:rotate(-45deg);}

	/* 메뉴 패널: 헤더 바로 아래, 화면보다 길면 패널 안에서 스크롤 */
	.mobile_menu_panel{top:var(--mhd-height); background:var(--hd-bg); max-height:calc(100vh - var(--mhd-height)); overflow-y:auto; border-bottom:1px solid #e9e7e3;}
	.mobile_menu_panel #mobile_gnb .mobile_menu_main>li,
	.mobile_menu_panel #mobile_gnb .mobile_menu_main>li:nth-child(1),
	.mobile_menu_panel #mobile_gnb .mobile_menu_main>li:last-child{padding:0 20px !important; border-bottom:1px solid #e9e7e3;}
	.mobile_menu_panel #mobile_gnb .mobile_menu_main>li:last-child{border-bottom:0;}
	.mobile_menu_panel #mobile_gnb .mobile_menu_main>li>a{margin:0; font-size:17px; line-height:56px; color:var(--hd-text); font-weight:700;}
	.mobile_menu_panel #mobile_gnb .mobile_sub{width:auto; margin:0 -20px; padding:8px 0; background:#fff;}
	.mobile_menu_panel #mobile_gnb .mobile_sub li{padding:0 20px; background:transparent;}
	.mobile_menu_panel #mobile_gnb .mobile_sub li a{margin:0; font-size:15px; line-height:40px; color:#555; font-weight:400;}
	#container{margin-top:var(--mhd-height);}
}
@media (max-width:480px){
	:root{--mhd-height:58px; --mhd-logo:26px;}
	.mobile_menu_panel #mobile_gnb .mobile_menu_main>li>a{font-size:16px; line-height:52px;}
	.mobile_menu_panel #mobile_gnb .mobile_sub li a{font-size:14px; line-height:38px;}
}