/* ManTech 개편 GNB – Figma 00_GNB_솔루션 / 00_GNB_리소스 / 00_GNB_회사소개 (PC 1920 기준)
 * 테마·Elementor 키트 전역 스타일(a, button, p)의 영향을 받지 않도록 #mg-header, #mg-drawer 로 범위를 고정한다. */
#mg-header,
#mg-drawer {
	--mg-main: #0058aa;
	--mg-main-dark: #00447f;
	--mg-black: #111;
	--mg-text: #363636;
	--mg-line: #d9d9d9;
	--mg-divider: #c1c1c1;
	--mg-red: #bf272d;
	--mg-intro-bg: #f5f5f5;
	--mg-font-ko: "Noto Sans KR", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	--mg-font-en: Montserrat, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
	--mg-font-body: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
	font-family: var(--mg-font-ko);
	color: var(--mg-black);
	text-align: left;
	word-break: keep-all;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#mg-header *,
#mg-header *::before,
#mg-header *::after,
#mg-drawer *,
#mg-drawer *::before,
#mg-drawer *::after { box-sizing: border-box; }
/* 리셋은 :where()로 ID 1개 수준만 갖게 해서, 아래 컴포넌트 규칙(#mg-header .class)이 항상 이기게 한다. */
#mg-header :where(a, a:hover, a:focus, a:active),
#mg-drawer :where(a, a:hover, a:focus, a:active) { color: inherit; text-decoration: none; box-shadow: none; background: none; }
#mg-header :where(button, button:hover, button:focus, button:active),
#mg-drawer :where(button, button:hover, button:focus, button:active) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}
#mg-header :where(ul),
#mg-drawer :where(ul) { margin: 0; padding: 0; list-style: none; }
#mg-header :where(li),
#mg-drawer :where(li) { margin: 0; padding: 0; }
#mg-header :where(p),
#mg-drawer :where(p) { margin: 0; font-size: inherit; line-height: inherit; }
#mg-header :where(img) { display: block; max-width: none; height: auto; border: 0; }
#mg-header :where(svg),
#mg-drawer :where(svg) { display: block; flex: none; overflow: visible; }
#mg-header :focus-visible,
#mg-drawer :focus-visible { outline: 2px solid var(--mg-main); outline-offset: 2px; }

/* 화면 위에 붙을 때 관리자 바(로그인 시) 아래로 (JS가 스크롤 위치에 맞춰 --mg-top 을 다시 계산) */
body.admin-bar #mg-header,
body.admin-bar #mg-drawer { --mg-top: 32px; }
@media (max-width: 782px) {
	body.admin-bar #mg-header,
	body.admin-bar #mg-drawer { --mg-top: 46px; }
}

/* 상단 바: 높이 82 + 하단 1px 라인.
 * 기존 헤더와 같은 동작: 처음에는 페이지 맨 위에 놓여 페이지와 함께 올라간다(투명 배경 + 흰 로고·글자, Figma header 01 Default).
 * 헤더 높이만큼 스크롤해 헤더가 화면에서 사라지면 화면 위에 붙는다(is-stuck: 흰 배경 + 검은 글자, Figma 흰 헤더).
 * 마우스를 올리거나, 메뉴·드로어가 열리거나, 키보드로 들어와도 흰 배경.
 * 기존 헤더처럼 본문을 밀어내지 않고 위에 겹친다(아래 여백 = -바 높이) → 페이지 첫 섹션(배너)이 헤더 뒤 맨 위부터 시작한다. */
#mg-header {
	--mg-bar-h: 83px;
	--mg-fg: #fff;
	--mg-bar-bg: rgba(255, 255, 255, 0);
	--mg-bar-line: rgba(255, 255, 255, 0);
	--mg-cta-bg: #fff;
	--mg-cta-fg: var(--mg-main);
	--mg-logo-filter: brightness(0) invert(1);
	position: relative;
	z-index: 9990;
	margin-bottom: calc(-1 * var(--mg-bar-h));
	background: none;
}
/* 스크롤해서 붙은 헤더, 드로어가 열린 모바일 헤더는 화면 위에 고정. 붙을 때는 위에서 내려온다. */
#mg-header.is-stuck,
#mg-header.is-solid {
	position: fixed;
	top: var(--mg-top, 0px);
	left: 0;
	right: 0;
}
#mg-header.is-stuck { animation: mg-stick .3s ease-out; }
@keyframes mg-stick {
	from { transform: translateY(-100%); }
}
/* 헤더가 원래 놓인 자리 (JS가 헤더 앞에 넣고, 헤더가 붙어 있는 동안에도 여기서 스크롤 위치를 잰다) */
.mg-spot { display: block; height: 0; margin: 0; padding: 0; border: 0; }
#mg-header:hover,
#mg-header.has-open,
#mg-header.is-stuck,
#mg-header.is-kbd,
#mg-header.is-solid {
	--mg-fg: var(--mg-black);
	--mg-bar-bg: #fff;
	--mg-bar-line: var(--mg-line);
	--mg-cta-bg: var(--mg-main);
	--mg-cta-fg: #fff;
	--mg-logo-filter: none;
}
#mg-header .mg-bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--mg-bar-h);
	padding: 0 120px;
	border-bottom: 1px solid var(--mg-bar-line);
	background: var(--mg-bar-bg);
	transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}
#mg-header .mg-logo { display: flex; align-items: center; flex: none; }
#mg-header .mg-logo img { width: 140px; height: 44px; filter: var(--mg-logo-filter); transition: filter .3s ease-in-out; }

/* 메뉴 */
#mg-header .mg-nav { align-self: stretch; }
#mg-header .mg-nav__list { display: flex; align-items: stretch; gap: 80px; height: 82px; }
#mg-header .mg-nav__item { display: flex; }
#mg-header .mg-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	height: 82px;
	font-family: var(--mg-font-ko);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: var(--mg-fg);
	white-space: nowrap;
	transition: color .3s ease-in-out;
}
#mg-header .mg-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--mg-red);
	transform: scaleX(0);
	transition: transform .2s ease;
}
#mg-header .mg-nav__item.is-open > .mg-nav__link::after,
#mg-header .mg-nav__link:hover::after { transform: scaleX(1); }
/* 현재 메뉴 언더라인은 흰 배경일 때만 (투명 헤더 시안에는 없음) */
#mg-header:hover .mg-nav__item.is-current > .mg-nav__link::after,
#mg-header.has-open .mg-nav__item.is-current > .mg-nav__link::after,
#mg-header.is-stuck .mg-nav__item.is-current > .mg-nav__link::after,
#mg-header.is-kbd .mg-nav__item.is-current > .mg-nav__link::after { transform: scaleX(1); }
#mg-header.has-open .mg-nav__item.is-current:not(.is-open) > .mg-nav__link:not(:hover)::after { transform: scaleX(0); }
/* 다른 메뉴에 마우스를 올리거나 키보드로 옮기는 동안에는 현재 메뉴 줄을 숨겨 빨간 줄이 하나만 보이게 (2차 피드백).
 * :has()를 모르는 옛 브라우저에서 위 규칙까지 무시되지 않도록 따로 둔다. */
#mg-header .mg-nav__list:has(> .mg-nav__item:not(.is-current):hover) > .mg-nav__item.is-current > .mg-nav__link::after,
#mg-header .mg-nav__list:has(> .mg-nav__item:not(.is-current) > .mg-nav__link:focus-visible) > .mg-nav__item.is-current > .mg-nav__link::after { transform: scaleX(0); }

/* 우측: 전화 + 문의하기 + 영문 홈페이지(지구본) */
#mg-header .mg-util { display: flex; align-items: center; gap: 20px; flex: none; }
#mg-header .mg-tel {
	display: flex;
	align-items: center;
	gap: 20px;
	font-family: var(--mg-font-en);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	color: var(--mg-fg);
	white-space: nowrap;
	transition: color .3s ease-in-out;
}
#mg-header .mg-tel .mg-icon { width: 28px; height: 28px; }
#mg-header .mg-cta,
#mg-header .mg-cta:hover,
#mg-header .mg-cta:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 8px 28px;
	border-radius: 999px;
	background: var(--mg-cta-bg);
	color: var(--mg-cta-fg);
	font-family: var(--mg-font-ko);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	white-space: nowrap;
	transition: background-color .3s ease-in-out, color .3s ease-in-out;
}
#mg-header .mg-cta:hover,
#mg-header .mg-cta:focus-visible { background: var(--mg-main-dark); color: #fff; }
#mg-header .mg-eng {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	line-height: 0; /* 운영 사이트 링크 줄 높이(21px)에 영향받지 않게 */
	color: var(--mg-fg);
	white-space: nowrap;
	transition: color .3s ease-in-out;
}
#mg-header .mg-eng .mg-icon { display: block; width: 28px; height: 28px; flex: none; }
/* 지구본 옆 'ENG' (1.1.5 추가 수정) – 전화번호와 같은 영문 글꼴 */
#mg-header .mg-eng span { font-family: var(--mg-font-en); font-weight: 700; font-size: 16px; line-height: 1.25; }
#mg-header .mg-eng:hover,
#mg-header .mg-eng:focus-visible { color: var(--mg-main); }

/* 드롭다운 패널: 메뉴별 1개, 바 바로 아래 전체 폭 */
#mg-header .mg-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 20px 24px -16px rgba(0, 0, 0, .14);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
#mg-header .mg-nav__item.is-open > .mg-panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
#mg-header .mg-panel__inner { display: flex; align-items: center; gap: 60px; }
/* 좌측 회색 타이틀 블록: 폭 = 메뉴 시작 위치 - 60 (JS가 --mg-intro-w, --mg-intro-pl 계산. 1920 기준 540 / 220) */
#mg-header .mg-panel__intro {
	align-self: stretch;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: var(--mg-intro-w, 540px);
	padding: 40px 40px 50px var(--mg-intro-pl, 220px);
	background: var(--mg-intro-bg);
}
#mg-header .mg-panel--groups .mg-panel__intro { padding-bottom: 40px; } /* 설명 문구 간격은 리소스·회사소개와 같이 8px */
#mg-header .mg-panel__title {
	font-family: var(--mg-font-en);
	font-weight: 700;
	font-size: 40px; /* 4차 피드백(10/22): 48 → 40 */
	line-height: 1.22;
	letter-spacing: 0;
	color: var(--mg-black);
}
#mg-header .mg-panel__desc {
	font-family: var(--mg-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--mg-black);
}
#mg-header .mg-panel__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	padding: 50px 0;
}

/* 솔루션: 대분류 라벨 | 소분류 가로 나열 */
#mg-header .mg-group { display: flex; align-items: center; gap: 32px; min-height: 40px; }
#mg-header .mg-group__label {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	width: 102px;
	height: 40px;
	font-family: var(--mg-font-ko);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	color: var(--mg-main);
	white-space: nowrap;
}
#mg-header .mg-group__label::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	width: 1px;
	height: 24px;
	background: var(--mg-divider);
}
#mg-header .mg-group__links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
#mg-header .mg-group__links a {
	display: block;
	width: 160px;
	padding: 4px 0;
	font-family: var(--mg-font-ko);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	color: var(--mg-text);
	transition: color .15s ease;
}
#mg-header .mg-group__links a:hover,
#mg-header .mg-group__links a:focus-visible { color: var(--mg-main); }

/* 리소스·회사소개: 아이콘 + 텍스트, 한 줄에 3개 */
#mg-header .mg-links {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: 32px 8px;
}
#mg-header .mg-links a {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	font-family: var(--mg-font-ko);
	font-weight: 700;
	font-size: 14px; /* 4차 피드백(10/22): 솔루션 하위 메뉴(14px)와 같게 */
	line-height: 1.2;
	color: var(--mg-text);
	transition: color .15s ease;
}
#mg-header .mg-links a span { width: 170px; }
#mg-header .mg-links .mg-icon { color: var(--mg-main); }
#mg-header .mg-links a:hover,
#mg-header .mg-links a:focus-visible { color: var(--mg-main); }

/* 햄버거 (1024px 이하) */
#mg-header .mg-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	margin-right: -10px;
}
#mg-header .mg-burger span {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--mg-fg);
	transition: transform .2s ease, opacity .2s ease, background-color .3s ease-in-out;
}
#mg-header .mg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#mg-header .mg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#mg-header .mg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 모바일 드로어 */
#mg-drawer { display: none; }
html.mg-lock,
html.mg-lock body { overflow: hidden; }

/* 데스크톱 폭별 조정 (디자인은 1920 기준) */
@media (max-width: 1599px) {
	#mg-header .mg-bar { padding: 0 48px; }
	#mg-header .mg-nav__list { gap: 56px; }
	#mg-header .mg-panel__intro { width: var(--mg-intro-w, 400px); padding-left: var(--mg-intro-pl, 60px); }
}
@media (max-width: 1279px) {
	#mg-header .mg-bar { padding: 0 24px; }
	#mg-header .mg-nav__list { gap: 36px; }
	#mg-header .mg-panel__inner { gap: 40px; }
	#mg-header .mg-panel__intro { width: var(--mg-intro-w, 300px); padding: 32px 24px 40px var(--mg-intro-pl, 32px); }
	#mg-header .mg-panel__title { font-size: 32px; }
	#mg-header .mg-panel__desc { font-size: 16px; }
	#mg-header .mg-group { gap: 24px; }
	#mg-header .mg-group__links { column-gap: 16px; }
	#mg-header .mg-group__links a { width: 140px; }
	#mg-header .mg-links a span { width: 130px; }
}

@media (max-width: 1024px) {
	#mg-header { --mg-bar-h: 65px; }
	#mg-header .mg-bar { padding: 0 20px; }
	#mg-header .mg-logo img { width: 108px; height: 34px; }
	#mg-header .mg-nav,
	#mg-header .mg-util { display: none; }
	#mg-header .mg-burger { display: flex; }

	#mg-drawer {
		position: fixed;
		top: calc(var(--mg-top, 0px) + 65px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9989;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: #fff;
		visibility: hidden;
		opacity: 0;
		transition: opacity .2s ease, visibility 0s linear .2s;
	}
	#mg-drawer.is-open { visibility: visible; opacity: 1; transition: opacity .2s ease, visibility 0s; }
	#mg-drawer .mg-m__list { padding: 0 20px; }
	#mg-drawer .mg-m__item { border-bottom: 1px solid #eceff2; }
	#mg-drawer .mg-m__head,
	#mg-drawer .mg-m__head:hover,
	#mg-drawer .mg-m__head:focus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 60px;
		font-family: var(--mg-font-ko);
		font-weight: 700;
		font-size: 18px;
		line-height: 1.3;
		color: var(--mg-black);
		text-align: left;
	}
	#mg-drawer .mg-m__item.is-current > .mg-m__head span { box-shadow: inset 0 -2px 0 var(--mg-red); }
	#mg-drawer .mg-m__chev {
		width: 10px;
		height: 10px;
		margin-right: 6px;
		border-right: 2px solid var(--mg-black);
		border-bottom: 2px solid var(--mg-black);
		transform: translateY(-3px) rotate(45deg);
		transition: transform .2s ease;
	}
	#mg-drawer [aria-expanded="true"] .mg-m__chev { transform: translateY(2px) rotate(-135deg); }
	#mg-drawer .mg-m__sub { padding: 0 0 20px; }
	#mg-drawer .mg-m__sub[hidden] { display: none; }
	#mg-drawer .mg-m__group + .mg-m__group { margin-top: 14px; }
	#mg-drawer .mg-m__label {
		margin-bottom: 2px;
		font-family: var(--mg-font-ko);
		font-weight: 700;
		font-size: 13px;
		color: var(--mg-main);
	}
	#mg-drawer .mg-m__group a {
		display: block;
		padding: 7px 0;
		font-weight: 500;
		font-size: 16px;
		color: var(--mg-text);
	}
	#mg-drawer .mg-m__icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
	#mg-drawer .mg-m__icons a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 0;
		font-weight: 500;
		font-size: 16px;
		color: var(--mg-text);
	}
	#mg-drawer .mg-m__icons .mg-icon { color: var(--mg-main); }
	#mg-drawer .mg-m__group a:hover,
	#mg-drawer .mg-m__icons a:hover { color: var(--mg-main); }
	#mg-drawer .mg-m__foot {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: auto;
		padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
		background: var(--mg-intro-bg);
	}
	#mg-drawer .mg-m__tel {
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: var(--mg-font-en);
		font-weight: 700;
		font-size: 18px;
		line-height: 1.25;
		color: var(--mg-black);
	}
	#mg-drawer .mg-m__tel .mg-icon { width: 24px; height: 24px; }
	#mg-drawer .mg-m__cta,
	#mg-drawer .mg-m__cta:hover,
	#mg-drawer .mg-m__cta:focus {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		border-radius: 999px;
		background: var(--mg-main);
		color: #fff;
		font-weight: 700;
		font-size: 16px;
	}
	#mg-drawer .mg-m__eng { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-family: var(--mg-font-en); font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--mg-black); }
	#mg-drawer .mg-m__eng .mg-icon { display: block; width: 24px; height: 24px; flex: none; }
}

@media print {
	#mg-header.is-stuck,
	#mg-header.is-solid { position: relative; top: auto; animation: none; }
	#mg-drawer { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	#mg-header.is-stuck { animation: none; }
	#mg-header *,
	#mg-drawer { transition: none !important; }
}