/* K-FIMS V10 common responsive refinements. */

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid #67d8ff;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   와이드 컨테이너 — 헤더·푸터를 홈페이지 1440px 셸(.kfh-shell)과 동일 폭으로 정렬
   -------------------------------------------------------------------------- */

.kfh-wide {
	max-width: 1440px;
	padding-inline: 40px;
}

@media (max-width: 1024px) {
	.kfh-wide {
		padding-inline: 24px;
	}
}

@media (max-width: 759px) {
	/* :where()로 특이도를 낮춰 모바일 헤더의 기존 14px 패딩 규칙이 우선하도록 함 */
	:where(.kfh-wide) {
		padding-inline: 20px;
	}
}

@media (max-width: 759px) {
	body {
		overflow-x: clip;
	}

	body > header > div {
		height: 60px;
		gap: 8px;
		padding-inline: 14px;
	}

	body > header > div > a:first-child {
		min-width: 0;
		gap: 7px;
	}

	body > header > div > a:first-child > svg {
		width: 34px;
		height: 34px;
	}

	body > header > div > a:first-child > span {
		min-width: 0;
	}

	body > header > div > a:first-child > span > span:first-child {
		max-width: 44vw;
		overflow: hidden;
		font-size: 13px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body > header > div > a:first-child > span > span:last-child,
	body > header > div > div:last-child > span,
	body > header > div > div:last-child > a:nth-of-type(2),
	body > header > div > div:last-child > button svg:last-child {
		display: none;
	}

	body > header > div > div:last-child {
		margin-left: auto;
		gap: 7px;
	}

	body > header > div > div:last-child > a:first-of-type {
		font-size: 12px;
	}

	body > header > div > div:last-child > button {
		gap: 0;
		padding: 7px;
		font-size: 0;
	}
}

/* --------------------------------------------------------------------------
   모바일 GNB 토글 + 드롭다운 패널 (header.php)
   -------------------------------------------------------------------------- */

.kf-gnb-toggle,
.kf-mobnav {
	display: none;
}

@media (max-width: 759px) {
	.kf-gnb-toggle {
		display: inline-flex;
		order: 3;
		flex: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin: -7px -7px -7px 0;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.kf-gnb-toggle__bar {
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: #33415e;
		transition: transform .2s ease, opacity .2s ease;
	}

	.kf-gnb-toggle[aria-expanded="true"] .kf-gnb-toggle__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.kf-gnb-toggle[aria-expanded="true"] .kf-gnb-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	.kf-gnb-toggle[aria-expanded="true"] .kf-gnb-toggle__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.kf-mobnav {
		display: block;
		border-top: 1px solid #e6edf6;
		background: #ffffff;
		box-shadow: 0 26px 30px -26px rgba(22, 41, 92, .35);
	}

	.kf-mobnav[hidden] {
		display: none;
	}

	.kf-mobnav__nav {
		display: flex;
		flex-direction: column;
		max-height: calc(100dvh - 61px);
		padding: 6px 18px 16px;
		overflow-y: auto;
	}

	.kf-mobnav__link {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 12px 4px;
		border-bottom: 1px solid #eef2f8;
		font-size: 15px;
		font-weight: 600;
		color: #33415e;
		text-decoration: none;
	}

	.kf-mobnav__link.is-on {
		color: #1a6ef2;
		font-weight: 800;
	}

	.kf-mobnav__link--login {
		justify-content: center;
		min-height: 50px;
		margin-top: 12px;
		padding: 12px;
		border-bottom: 0;
		border-radius: 10px;
		background: #1a6ef2;
		color: #ffffff;
		font-weight: 700;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}