@charset "UTF-8";
/* ─────────────────────────────────────────────────────────
   서브페이지용 헤더 스타일
   common.css 에서 헤더 규칙만 추출. body/*/input 같은 전역 규칙은
   기존 페이지 디자인을 깨뜨리므로 일부러 제외했다.
   공용 유틸(.inner .btn 등)은 .vh_header_wrap 아래로 스코프를 좁힌다.
   ───────────────────────────────────────────────────────── */
:root {
	/* viewport */
	--header-height: 70px;
	--view-height: calc(var(--vh, 1vh) * 100);

	/* thema color */
	--primary: #0CEFD3;
	--primary-dark: #00A39B;
	--primary-reverse: #FA1717;

	/* border */
	--border-color: #eee;
	--border-solid: 1px solid var(--border-color);
	--border-focus: 1px solid transparent;
	--border-radius: 4px;

	--black: #000;

	--gray: #F3F5F7;

	--inner: 1380px;
}

/* 헤더 내부 기본 초기화 (전역으로 새지 않도록 한정) */
.vh_header_wrap, .vh_header_wrap * { box-sizing: border-box; letter-spacing: -0.025em; }
.vh_header_wrap ul, .vh_header_wrap ol, .vh_header_wrap li { list-style: none; margin: 0; padding: 0; }
.vh_header_wrap a { color: inherit; text-decoration: none; }
.vh_header_wrap img { max-width: 100%; vertical-align: top; }
.vh_header_wrap p, .vh_header_wrap b { margin: 0; }
.vh_header_wrap button { font: inherit; }

.vh_header_wrap .inner { position: relative; width: 100%; max-width: 1380px; padding: 0 20px; margin: 0 auto; }
.vh_header_wrap .primary { color: var(--primary-dark); }
.vh_header_wrap .badge {
		padding: 3px 9px;
		border-radius: 5px;
		background-color: #000;
		color: var(--primary);

		font-size: 14px;
		font-weight: 700;
		font-family: var(--font-family-title);
	}
.vh_header_wrap .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		border-radius: 8px;;
	}
.vh_header_wrap .btn_primary {
		background-color: var(--primary);
	}
.vh_header_wrap .btn_black {
		background-color: #282828;
		color: #fff;
	}

.vh_header_wrap,
	.vh_footer_wrap { flex-shrink: 0; }
.vh_header_wrap { position: sticky; top: 0; z-index: 9000; background-color: #fff; box-shadow: 0 1px 4px rgba(51, 51, 51, 0.05); border-bottom: 1px solid #E5E5E5; }
#header { position: relative; top: 0; transition: all 0.3s; -webkit-transition: all 0.3s; z-index: 8001; }
.header_banner { 
		flex-shrink: 0; 
		width: 158px; 
	}
.header_wrap {
		padding: 15px 0;
		box-shadow: 0 1px 5px rgba(51, 51, 51, 0.2);

		& .inner {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 16px;
		}
	}
.header_logo {
		flex-shrink: 0;
		width: 320px;
		text-align: center;

		& img {
			width: 277px;
		}
	}
.header_gnb {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-grow: 1;

		padding: 0 30px;
	}
.header_gnb li {
		flex: 1;

		& a {
			display: flex;
			justify-content: center;
			align-items: center;
			
			font-size: 18px;
			font-weight: 700;
		}

		& .icon {
			font-size: 32px;
		}
	}
.header_mymenu {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16px;
		
		& .icon_btn {
			position: relative;
			border: 1px solid #D9D9D9;
			border-radius: 50%;

			display: flex;
			justify-content: center;
			align-items: center;
			width: 34px;
			height: 34px;

			& .icon {
				font-size: 24px;
			}

			& span {
				position: absolute;
				background-color: var(--primary-reverse);
				color: #fff;
				font-size: 12px;
				font-weight: 700;

				width: 16px;
				height: 16px;
				border-radius: 30px;

				display: flex;
				justify-content: center;
				align-items: center;

				top: -4px;
				right: -5px;
			}
		}

		& .btn {
			padding: 8px 16px;
			font-size: 16px;
			font-weight: 700;

			& .icon {
				font-size: 18px;
			}
		}
	}
.header_login__widget {  
		border-bottom: 1px solid #E5E5E5;
		padding: 8px 0;

		& .inner {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
.header_login__widget_log {
		font-size: 14px;
		color: #333;
		opacity: 0.5;

	}
.header_login__widget_menu {
		margin-left: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 13px;
		
		& p {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 7px;
		}
		
		& b {
			font-size: 14px;
		}
	}
.header_login__widget_btns {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 4px;

		& a {
			padding: 4px 9px;
			border-radius: 5px;
			border: 1px solid #BDBDBD;
			font-family: var(--font-family-sub);

			color: #999;
			font-size: 14px;
		}
	}

/* ─────────────────────────────────────────────────────────
   GNB 하위 카테고리 드롭다운
   ───────────────────────────────────────────────────────── */
.header_gnb > li { position: relative; }
.header_gnb > li > a { display: inline-flex; align-items: center; gap: 5px; }

.gnb_arw {
	width: 11px; height: 11px;
	opacity: .45;
	transition: transform .2s, opacity .2s;
}
.header_gnb > li.has_sub:hover > a .gnb_arw,
.header_gnb > li.has_sub:focus-within > a .gnb_arw { transform: rotate(180deg); opacity: .9; }

.header_gnb > li.on > a { color: var(--primary-dark); }

.header_sub {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%) translateY(6px);
	min-width: 152px;
	padding: 8px;
	margin: 0;
	background: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(17, 17, 17, .12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 9100;
}
/* 마우스가 메뉴와 서브 사이를 지날 때 끊기지 않도록 여백 확보 */
.header_gnb > li.has_sub::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 14px;
}
.header_gnb > li.has_sub:hover > .header_sub,
.header_gnb > li.has_sub:focus-within > .header_sub {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.header_sub li { list-style: none; }
.header_sub li + li { margin-top: 2px; }
.header_sub a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #444;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.header_sub a:hover { background: #F2FBFA; color: var(--primary-dark); }
.header_sub a.on { background: var(--primary); color: #0b3b38; font-weight: 700; }

@media (max-width: 1280px) {
	.header_sub { min-width: 136px; }
	.header_sub a { padding: 8px 10px; font-size: 13.5px; }
}

/* ─────────────────────────────────────────────────────────
   헤더 슬로건 — 이미지(158x53) → 텍스트로 교체해 크고 선명하게
   ───────────────────────────────────────────────────────── */
.header_banner { display: flex; align-items: center; }

.hb_slogan {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin: 0;
	font-family: var(--font-family-sub), var(--font-family);
	line-height: 1.25;
	white-space: nowrap;
	transform: rotate(-1.6deg);
	transform-origin: right center;
}
.hb_slogan .hb_top {
	font-size: 15px;
	font-weight: 400;
	color: #3A4A56;
	letter-spacing: -0.01em;
}
.hb_slogan .hb_btm {
	font-size: 23px;
	font-weight: 700;
	color: #16212B;
	letter-spacing: -0.02em;
}
.hb_slogan .hb_btm em {
	font-style: normal;
	color: #00A39B;
	text-shadow: 0 1px 0 rgba(12, 239, 211, .25);
}

@media (max-width: 1360px) {
	.hb_slogan .hb_top { font-size: 13.5px; }
	.hb_slogan .hb_btm { font-size: 20px; }
}
@media (max-width: 1180px) {
	.header_banner { display: none; }
}

/* ─────────────────────────────────────────────────────────
   헤더 슬로건 — 고급형
   ───────────────────────────────────────────────────────── */
.hb_slogan {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	margin: 0;
	padding-right: 2px;
	font-family: var(--font-family-sub), var(--font-family);
	line-height: 1.2;
	white-space: nowrap;
	transform: rotate(-1.4deg);
	transform-origin: right center;
}

/* 윗줄 — 작고 절제된 도입부 */
.hb_slogan .hb_top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 400;
	color: #6B7C88;
	letter-spacing: .01em;
}
.hb_slogan .hb_dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--primary);
	box-shadow: 0 0 0 3px rgba(12, 239, 211, .22);
	animation: hbPulse 2.4s ease-in-out infinite;
}
@keyframes hbPulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(12, 239, 211, .22); }
	50%      { box-shadow: 0 0 0 6px rgba(12, 239, 211, .06); }
}

/* 아랫줄 — 선언문 */
.hb_slogan .hb_btm {
	position: relative;
	display: inline-block;
	padding-bottom: 9px;
	font-size: 26px;
	font-weight: 700;
	color: #101C25;
	letter-spacing: -.025em;
}

/* '계속됩니다' 그라데이션 + 은은한 흐름 */
.hb_slogan .hb_btm em {
	font-style: normal;
	background: linear-gradient(100deg, #00A39B 0%, #0CEFD3 38%, #00C2B4 62%, #00857F 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: hbFlow 7s ease-in-out infinite;
}
@keyframes hbFlow {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}
.hb_slogan .hb_pt { color: #101C25; -webkit-text-fill-color: #101C25; }

/* 손글씨 밑줄 */
.hb_slogan .hb_line {
	position: absolute;
	left: 42%;
	right: -2px;
	bottom: 0;
	height: 11px;
	width: auto;
	overflow: visible;
}
.hb_slogan .hb_line path {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: hbDraw 1.1s cubic-bezier(.65, 0, .35, 1) .35s forwards;
}
@keyframes hbDraw { to { stroke-dashoffset: 0; } }

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	.hb_slogan .hb_dot,
	.hb_slogan .hb_btm em { animation: none; }
	.hb_slogan .hb_line path { stroke-dashoffset: 0; animation: none; }
}

@media (max-width: 1440px) {
	.hb_slogan .hb_top { font-size: 13px; }
	.hb_slogan .hb_btm { font-size: 22px; padding-bottom: 8px; }
	.hb_slogan .hb_line { height: 9px; }
}
@media (max-width: 1180px) {
	.header_banner { display: none; }
}

/* ─────────────────────────────────────────────────────────
   GNB 강조 메뉴 (보증업체) — 오렌지 반짝임
   ───────────────────────────────────────────────────────── */
.header_gnb > li.gnb_hl > a {
	position: relative;
	font-weight: 700;
	background: linear-gradient(
		100deg,
		#F08A24 0%,
		#FFB347 22%,
		#FFF0C9 38%,
		#FFB347 54%,
		#F08A24 76%,
		#E07612 100%
	);
	background-size: 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: gnbShine 3.6s linear infinite;
}
@keyframes gnbShine {
	0%   { background-position: 180% 50%; }
	100% { background-position: -80% 50%; }
}

/* 은은한 발광 (텍스트 뒤에 깔아 글자 자체는 또렷하게 유지) */
.header_gnb > li.gnb_hl > a::before {
	content: "보증업체";
	position: absolute;
	inset: 0;
	z-index: -1;
	color: #FFA63A;
	-webkit-text-fill-color: #FFA63A;
	display: grid;
	place-items: center;
	filter: blur(7px);
	opacity: .45;
	animation: gnbGlow 2.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes gnbGlow {
	0%, 100% { opacity: .28; }
	50%      { opacity: .55; }
}

.header_gnb > li.gnb_hl:hover > a { animation-duration: 1.4s; }
.header_gnb > li.gnb_hl.on > a { animation-duration: 2.2s; }

@media (prefers-reduced-motion: reduce) {
	.header_gnb > li.gnb_hl > a { animation: none; background-position: 40% 50%; }
	.header_gnb > li.gnb_hl > a::before { animation: none; opacity: .35; }
}

/* ─────────────────────────────────────────────────────────
   상단 카테고리(GNB) 간격 정리
   예전에는 `.header_gnb li { flex: 1 }` 이라 메뉴가 전부 같은 폭(110px)으로
   늘어났다. 「혜택존」(3자)과 「사이트평가」(5자+화살표)가 같은 칸을 쓰다 보니
   글자 사이 여백이 제각각으로 보였다.
   → 메뉴는 내용 크기대로 두고, 간격은 gap + 좌우 padding 으로 일정하게 준다.
   ───────────────────────────────────────────────────────── */
.header_gnb {
	gap: 2px;
	padding: 0 18px;
}
.header_gnb > li {
	flex: 0 0 auto;
}
.header_gnb > li > a {
	height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.03em;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.header_gnb > li > a:hover { background: rgba(12, 239, 211, .1); }
.header_gnb > li.on > a { background: rgba(12, 239, 211, .14); }
.header_gnb > li.gnb_hl > a:hover { background: rgba(232, 137, 46, .12); }

/* 드롭다운 화살표는 글자에 바짝 붙인다 */
.header_gnb > li > a .gnb_arw { margin-left: 1px; }

/* 서브메뉴 항목이 위 flex 규칙에 끌려가지 않게 */
.header_sub li { flex: none; }

/* 메뉴가 늘어나도 로고·우측 영역을 밀지 않도록 */
@media (max-width: 1400px) {
	.header_gnb { padding: 0 10px; }
	.header_gnb > li > a { padding: 0 11px; font-size: 16px; }
}
@media (max-width: 1240px) {
	.header_gnb > li > a { padding: 0 9px; font-size: 15px; }
}

/* ─────────────────────────────────────────────────────────
   헤더 알림(종) — 쪽지 알림 + 마이정보 바로가기
   기존 .icon_btn 모양은 그대로 두고 패널만 얹는다.
   ───────────────────────────────────────────────────────── */
.mm-noti { position: relative; }
.mm-noti .icon_btn {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border: 1px solid #D9D9D9; border-radius: 50%;
	background: #fff; cursor: pointer; padding: 0;
	transition: border-color .15s, background .15s;
}
.mm-noti .icon_btn:hover,
.mm-noti.on .icon_btn { border-color: var(--primary, #0CEFD3); background: #F2FBFA; }
.mm-noti .icon_btn > span {
	position: absolute; top: -4px; right: -4px;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 999px; background: #E9544A; color: #fff;
	font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}

.mm-noti__pnl {
	position: absolute; right: 0; top: calc(100% + 10px);
	z-index: 9200;
	width: 296px;
	border: 1px solid #E5E5E5; border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(17, 17, 17, .14);
	overflow: hidden;
	text-align: left;
}
.mm-noti__pnl[hidden] { display: none; }

.mm-noti__me {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid #F0F3F5;
	background: #F7FBFE;
}
.mm-noti__me:hover { background: #F2FBFA; }
.mm-noti__me .av {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
	background: #E6FBF8; color: #8FB6B2;
}
.mm-noti__me .av img { width: 100%; height: 100%; object-fit: cover; }
.mm-noti__me .av svg { width: 22px; height: 22px; }
.mm-noti__me .tx { flex: 1 1 auto; min-width: 0; }
.mm-noti__me .tx b { display: block; font-size: 14px; font-weight: 800; color: #16212B; letter-spacing: -.02em; }
.mm-noti__me .tx em { display: block; margin-top: 1px; font-style: normal; font-size: 12px; color: #93A5B2; }
.mm-noti__me .ar { flex: 0 0 auto; width: 16px; height: 16px; color: #B9C6D0; }

.mm-noti__sec { padding: 12px 8px 6px; }
.mm-noti__sec .hd { margin: 0 0 4px; padding: 0 8px; font-size: 12px; font-weight: 700; color: #93A5B2; }
.mm-noti__sec .hd b { color: #E9544A; }
.mm-noti__sec .none { margin: 0; padding: 20px 8px; text-align: center; font-size: 13px; color: #A9B8C4; }
.mm-noti__sec ul { margin: 0; padding: 0; list-style: none; max-height: 232px; overflow-y: auto; }
.mm-noti__sec li a { display: block; padding: 9px 8px; border-radius: 9px; }
.mm-noti__sec li a:hover { background: #F7FBFE; }
.mm-noti__sec .nk { display: inline-block; font-size: 12.5px; font-weight: 700; color: #16212B; }
.mm-noti__sec .dt { float: right; font-size: 11.5px; color: #A9B8C4; }
.mm-noti__sec .mg {
	display: block; margin-top: 2px;
	font-size: 12.5px; color: #5C7386; line-height: 1.5;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mm-noti__go { display: flex; border-top: 1px solid #F0F3F5; }
.mm-noti__go a {
	flex: 1 1 0; padding: 11px 4px;
	text-align: center; font-size: 12.5px; font-weight: 700; color: #5C7386;
}
.mm-noti__go a + a { border-left: 1px solid #F0F3F5; }
.mm-noti__go a:hover { background: #F7FBFE; color: #00857F; }

@media (max-width: 480px) {
	.mm-noti__pnl { width: calc(100vw - 32px); right: -8px; }
}

/* MY 정보 버튼이 헤더가 좁아질 때 세로로 무너지던 것 방지 */
.header_mymenu { flex: 0 0 auto; }
.header_mymenu .btn_primary { flex: 0 0 auto; white-space: nowrap; }
.header_mymenu .btn_primary span { white-space: nowrap; }

/* MY 정보 버튼을 빼고 종만 남았으므로 우측 여백을 정리한다 */
.header_mymenu { gap: 10px; margin-left: 4px; }

/* ─────────────────────────────────────────────────────────
   GNB 간격 2차 — 좌우 여백 균형
   메뉴를 왼쪽에 붙여 두니 로고~첫 메뉴 34px, 마지막 메뉴~종 86px 로
   한쪽만 비어 보였다. 남는 공간을 가운데로 모아 양쪽을 같게 만든다.
   ───────────────────────────────────────────────────────── */
.header_gnb {
	justify-content: center;
	gap: 2px;
	padding: 0 16px;
}
.header_gnb > li > a {
	height: 42px;
	padding: 0 13px;
	font-size: 16.5px;
}
/* 메뉴가 좁아질 때 로고·우측 영역과 부딪히지 않게 단계적으로 줄인다 */
@media (max-width: 1400px) {
	.header_gnb { padding: 0 8px; }
	.header_gnb > li > a { padding: 0 10px; font-size: 15.5px; }
}
@media (max-width: 1240px) {
	.header_gnb > li > a { padding: 0 8px; font-size: 15px; }
}

/* ── 노트북 폭(1000~1400) 대응 ──
   로고 320px + 메뉴 7개 + 슬로건 158px 이 고정폭이라 1280 이하에서
   헤더가 화면을 넘어가 가로 스크롤이 생겼다. 우선순위를 두고 줄인다.
   1) 메뉴 여백 → 2) 로고 크기 → 3) 슬로건(장식) 숨김 */
.header_wrap .inner { min-width: 0; }
.header_gnb { min-width: 0; flex-wrap: nowrap; }
.header_logo { flex: 0 0 auto; }
.header_logo img { max-width: 100%; transition: width .15s; }
.header_banner { flex: 0 0 auto; }

@media (max-width: 1340px) {
	.header_logo img { width: 240px; }
	.header_gnb { padding: 0 6px; }
}
@media (max-width: 1180px) {
	.header_logo img { width: 210px; }
	.header_gnb > li > a { padding: 0 8px; font-size: 15px; }
	.header_banner { display: none; }
}
@media (max-width: 1020px) {
	.header_logo img { width: 178px; }
	.header_gnb > li > a { padding: 0 6px; font-size: 14px; }
}