/* 서브 페이지 상단 배너 – Figma "header - sub" (1920 × 520). 투명 GNB(82 + 선 1)가 위 83px에 겹친다. */
.mh-hero {
	position: relative;
	height: 520px;
	background: #1a1f26 var(--mh-bg, none) center bottom / cover no-repeat;
	color: #fff;
	font-family: "Noto Sans KR", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
	word-break: keep-all;
	overflow: hidden;
	box-sizing: border-box;
}
.mh-hero *,
.mh-hero *::before,
.mh-hero *::after { box-sizing: border-box; }
.mh-hero__inner {
	position: relative;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 202px; /* 헤더 82 + 120 */
}
/* 제목·설명 묶음: 헤더 아래 120px, 최소 150px 높이 안에서 세로 가운데 (Figma: 제목만 있는 자료실은 가운데, 두 줄 제목인 기술지원은 위부터) */
.mh-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 150px;
}
.mh-hero .mh-hero__title {
	margin: 0;
	/* Figma 글꼴은 Montserrat(한글은 대체 글꼴). 첫 글꼴을 Montserrat로 두어 기준선·줄 높이(66px)를 시안과 맞춤 */
	font-family: Montserrat, "Noto Sans KR", "Pretendard Variable", Pretendard, sans-serif;
	font-weight: 700;
	font-size: 54px;
	line-height: 66px;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}
.mh-hero .mh-hero__title.is-multi {
	/* 두 줄 제목(기술 지원): Figma 글 상자 줄 높이 76px(두 줄 152). 시안은 한글(대체 글꼴) 기준으로 글자를 놓아
	   같은 줄 높이에서도 글자가 3px 아래에 있다 – 자리(설명 위치)는 그대로 두고 글자만 3px 내림 */
	position: relative;
	top: 3px;
	line-height: 76px;
}
.mh-hero .mh-hero__desc {
	margin: 20px 0 0;
	font-family: "Noto Sans KR", "Pretendard Variable", Pretendard, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: #fff;
}
.mh-crumbs {
	position: absolute;
	left: 0;
	bottom: 20px;
	display: flex;
	align-items: center;
	/* Figma 'header - sub' 컴포넌트: 아이콘·글 끝 → 구분선(두께 0, 가운데) 17px → 다음 글 17px.
	   1px 선이라 앞 16px + 선 1px + 뒤 17px로 글 시작 위치를 맞춤 (자료실 시안의 경로만 컴포넌트를 떼어 낸 사본이라 12·18px) */
	gap: 16px;
	height: 24px;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
}
.mh-crumbs a,
.mh-crumbs a:hover,
.mh-crumbs a:focus { display: flex; color: #fff; text-decoration: none; }
.mh-crumbs svg { display: block; }
.mh-crumbs__item { display: flex; align-items: center; gap: 17px; white-space: nowrap; }
.mh-crumbs__item::before {
	content: "";
	width: 1px;
	height: 8px;
	background: rgba(255, 255, 255, .6);
}

@media (max-width: 1240px) {
	.mh-hero__inner { padding-left: 20px; padding-right: 20px; }
	.mh-crumbs { left: 20px; }
}
@media (max-width: 1024px) {
	/* 모바일 GNB 65px가 위에 겹친다 */
	.mh-hero { height: 425px; }
	.mh-hero__inner { padding-top: 136px; }
	.mh-hero__text { min-height: 120px; }
	.mh-hero .mh-hero__title { font-size: 40px; line-height: 1.25; }
	.mh-hero .mh-hero__title.is-multi { top: 0; line-height: 1.4; }
	.mh-hero .mh-hero__desc { margin-top: 16px; font-size: 17px; }
}
@media (max-width: 767px) {
	.mh-hero { height: 365px; }
	.mh-hero__inner { padding: 113px 16px 0; }
	.mh-hero__text { min-height: 150px; }
	.mh-hero .mh-hero__title,
	.mh-hero .mh-hero__title.is-multi { font-size: 30px; line-height: 1.3; }
	.mh-hero .mh-hero__desc { margin-top: 12px; font-size: 15px; }
	.mh-hero .mh-br { display: none; }
	.mh-crumbs { left: 16px; bottom: 16px; gap: 12px; font-size: 14px; }
	.mh-crumbs__item { gap: 12px; }
}