@charset "utf-8";

/* ===============================================
 * CLS 공통 헤더 — CORE LAB SOLUTION CI
 * 메인(index) + 모든 서브페이지 공통 (/include/header.jsp 에서 로드)
 * position: sticky — 본문을 가리지 않으면서 스크롤 시 상단 고정
 * 네이비 #00393C + 오렌지 #00C3BF
 * =============================================== */

#cls-header, .m-nav, .m-nav-bg {
	--c-navy: #00393C;
	--c-orange: #00C3BF;
	--c-line: #e6e8ec;
	--c-text: #23303f;
	--c-muted: #6b7480;
}
#cls-header, #cls-header *, .m-nav, .m-nav * { box-sizing: border-box; }

#cls-header {
	position: sticky; top: 0; left: 0; width: 100%; z-index: 1000;
	background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--c-line);
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
#cls-header.scrolled { box-shadow: 0 4px 20px rgba(32,52,79,.1); }
#cls-header .hd-inner {
	max-width: 1600px; margin: 0 auto; padding: 0 24px; height: 78px;
	display: flex; align-items: center; justify-content: space-between;
}

/* CI 로고 (심볼 + 타이포) */
#cls-header .hd-logo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-decoration: none; }
#cls-header .hd-logo .logo-symbol { width: 42px; height: 42px; flex-shrink: 0; }
#cls-header .hd-logo .logo-symbol svg { width: 100%; height: 100%; display: block; }
#cls-header .hd-logo .hd-logo-img { height: 45px; width: auto; display: block; align-self: flex-start; }
#cls-header .hd-logo .logo-type { display: flex; flex-direction: column; line-height: 1; }
#cls-header .hd-logo .lt-main { font-size: 21px; font-weight: 800; letter-spacing: .02em; color: var(--c-navy); }
#cls-header .hd-logo .lt-sub { font-size: 12px; font-weight: 700; letter-spacing: .4em; color: var(--c-orange); margin-top: 4px; text-indent: .4em; }
/* 로고 하단 한글 회사명 (푸터 .ft-corp 와 동일 컨셉) */
/* 로고 이미지 폭에 정확히 맞춰 양끝정렬 (로고 크기가 바뀌어도 자동으로 맞음) */
#cls-header .hd-logo .hd-corp { font-size: 11px; font-weight: 700; color: var(--c-navy); line-height: 1.25; letter-spacing: 0;
	text-align: justify; text-align-last: justify; text-justify: inter-character; }

/* GNB */
#cls-header .gnb { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
#cls-header .gnb > li > a { display: block; font-size: 18px; font-weight: 600; color: var(--c-text); padding: 28px 0; position: relative; text-decoration: none; }
#cls-header .gnb > li > a::after { content: ''; position: absolute; left: 0; bottom: 22px; width: 0; height: 3px; background: linear-gradient(135deg, var(--c-navy), var(--c-orange)); border-radius: 3px; transition: width .25s; }
#cls-header .gnb > li:hover > a::after, #cls-header .gnb > li.active > a::after { width: 100%; }
#cls-header .gnb > li:hover > a, #cls-header .gnb > li.active > a { color: var(--c-orange); }
#cls-header .gnb > li { position: relative; }

/* GNB 드롭다운 (2depth) */
#cls-header .gnb .sub-menu {
	position: absolute; top: calc(100% - 8px); left: 50%; transform: translateX(-50%);
	min-width: 168px; background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
	box-shadow: 0 14px 34px rgba(32,52,79,.13); padding: 8px;
	opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 1001;
	margin-top: 6px;
}
#cls-header .gnb > li.has-sub:hover .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px); }
#cls-header .gnb .sub-menu::before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; }
#cls-header .gnb .sub-menu ul { list-style: none; margin: 0; padding: 0; }
#cls-header .gnb .sub-menu a { display: block; padding: 11px 16px; font-size: 16px; font-weight: 500; color: var(--c-text); white-space: nowrap; border-radius: 8px; text-decoration: none; transition: background .15s, color .15s; }
#cls-header .gnb .sub-menu a:hover { background: rgba(231,111,26,.09); color: var(--c-orange); }

/* util (언어 + 로그인/회원) */
#cls-header .hd-util { display: flex; align-items: center; gap: 10px; }
#cls-header .hd-util .lang { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--c-muted); margin-right: 6px; }
#cls-header .hd-util .lang a { text-decoration: none; color: var(--c-muted); }
#cls-header .hd-util .lang a.on { color: var(--c-orange); font-weight: 700; }
#cls-header .btn-line, #cls-header .btn-solid { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 22px; font-size: 15px; font-weight: 700; transition: .2s; text-decoration: none; white-space: nowrap; }
#cls-header .btn-line { border: 1.5px solid var(--c-orange); color: var(--c-orange); background: transparent; }
#cls-header .btn-line:hover { background: var(--c-orange); color: #fff; }
#cls-header .btn-solid { background: linear-gradient(135deg, var(--c-navy), var(--c-orange)); color: #fff; }
#cls-header .btn-solid:hover { opacity: .92; }
#cls-header .hd-mbtn { display: none; flex-direction: column; gap: 5px; width: 30px; cursor: pointer; }
#cls-header .hd-mbtn span { height: 2.5px; background: var(--c-navy); border-radius: 2px; }

/* 모바일 슬라이드 메뉴 */
.m-nav-bg { display: none; position: fixed; inset: 0; background: rgba(32,52,79,.5); z-index: 1100; }
.m-nav-bg.on { display: block; }
.m-nav {
	position: fixed; top: 0; right: -300px; width: 280px; height: 100%; background: #fff; z-index: 1200;
	transition: right .3s; padding: 24px; overflow-y: auto; font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
.m-nav.on { right: 0; }
.m-nav .m-close { text-align: right; font-size: 24px; color: var(--c-navy); cursor: pointer; }
.m-nav .m-lang { margin: 10px 0 14px; font-size: 14px; color: var(--c-muted); }
.m-nav .m-lang a { color: var(--c-muted); text-decoration: none; padding: 0 4px; }
.m-nav .m-lang a.on { color: var(--c-orange); font-weight: 700; }
.m-nav .m-auth { display: flex; gap: 8px; margin: 16px 0 20px; }
.m-nav .m-auth a { flex: 1; text-align: center; height: 42px; line-height: 42px; border-radius: 22px; font-weight: 700; font-size: 14px; text-decoration: none; }
.m-nav .m-auth .btn-line { border: 1.5px solid var(--c-orange); color: var(--c-orange); }
.m-nav .m-auth .btn-solid { background: linear-gradient(135deg, var(--c-navy), var(--c-orange)); color: #fff; }
.m-nav ul { list-style: none; margin: 0; padding: 0; }

/* 모바일 GNB 아코디언 */
.m-nav .m-gnb > li { border-bottom: 1px solid var(--c-line); }
.m-nav .m-d1 {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 16px 4px; font-size: 17px; font-weight: 600; color: var(--c-navy);
	background: none; border: none; text-align: left; cursor: pointer; text-decoration: none;
	font-family: inherit; line-height: 1.3;
}
.m-nav .m-arrow {
	width: 9px; height: 9px; flex-shrink: 0; margin-right: 6px;
	border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
	transform: rotate(45deg); transition: transform .25s;
}
.m-nav .m-has-sub.open .m-arrow { transform: rotate(-135deg); }
.m-nav .m-d2 { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #f7f8fa; border-radius: 8px; }
.m-nav .m-has-sub.open .m-d2 { max-height: 640px; }
.m-nav .m-d2 a { display: block; padding: 13px 16px; font-size: 15px; font-weight: 500; color: var(--c-text); text-decoration: none; }
.m-nav .m-d2 a:active { color: var(--c-orange); }

/* 반응형 */
@media (max-width: 1024px) {
	#cls-header .gnb, #cls-header .hd-util .lang { display: none; }
	#cls-header .hd-mbtn { display: flex; }
}
@media (max-width: 767px) {
	#cls-header .hd-inner { height: 64px; padding: 0 16px; }
	#cls-header .hd-logo .lt-main { font-size: 18px; }
	#cls-header .hd-logo .logo-symbol { width: 36px; height: 36px; }
	#cls-header .hd-logo .hd-logo-img { height: 41px; }
	#cls-header .hd-logo { gap: 5px; }
	#cls-header .hd-logo .hd-corp { font-size: 10px; }
	/* 로그인/회원가입은 햄버거 메뉴(m-nav)에 있으므로 모바일 헤더에선 숨김 */
	#cls-header .hd-util .btn-line, #cls-header .hd-util .btn-solid { display: none; }
}