/*
 * 공통 파티셜 스타일 — GNB / Page Hero / Footer.
 * Figma 실측: GNB 73:63 (h88, px60, gap26) / Page Hero 73:79 (h271, py72, gap12) / Footer 73:170 (pt64 pb40, gap40).
 * 색·간격은 tokens.css 변수만 사용. hex 하드코딩 금지.
 */

/* ---------- skip link ---------- */

.k-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--k-space-sm) var(--k-space-md);
	background: var(--k-bg-brand);
	color: var(--k-text-inverse);
	border-radius: var(--k-radius-md);
}

.k-skip-link:focus {
	left: var(--k-space-md);
	top: var(--k-space-md);
}

/* ---------- GNB ---------- */

.k-gnb {
	position: relative;
	z-index: 100;
	width: 100%;
}

.k-gnb--solid {
	background: var(--k-bg-page);
	border-bottom: 1px solid var(--k-border-default);
}

/* 메인 전용: 히어로 위에 겹치는 투명 변형 */
.k-gnb--transparent {
	position: absolute;
	inset: 0 0 auto 0;
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.k-gnb__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-space-lg);
	min-width: 0;
	min-height: 88px;
	padding: 0 60px;
}

.k-gnb__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
	white-space: nowrap;
}

.k-gnb__logo img {
	display: block;
	height: 29px;
	width: auto;
}

.k-gnb__logo-mark {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--k-text-brand);
}

.k-gnb__logo-mark--esg {
	color: var(--k-green-700);
	font-weight: 700;
}

.k-gnb--transparent .k-gnb__logo-mark--esg {
	color: var(--k-green-500);
}

.k-gnb__logo-name {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--k-text-tertiary);
}

.k-gnb--transparent .k-gnb__logo-mark,
.k-gnb--transparent .k-gnb__logo-name {
	color: var(--k-text-inverse);
}

.k-gnb__panel {
	display: flex;
	align-items: center;
	gap: var(--k-space-xl);
	/* min-width:0 이 없으면 flex 자식이 콘텐츠 폭 아래로 못 줄어들어 body 가 가로로 밀린다. */
	min-width: 0;
}

/*
 * 메뉴 9개(989px)+로고+CTA 는 1420px 미만에서 한 줄에 안 들어간다.
 * 페이지 전체가 밀리는 대신 메뉴 띠 안에서만 가로 스크롤시킨다(스펙 §7).
 * CTA 는 flex-shrink:0 이라 어떤 폭에서도 화면 안에 남는다.
 */
.k-gnb__nav {
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.k-gnb__nav::-webkit-scrollbar {
	display: none;
}

.k-gnb__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.k-gnb__link {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.01em;
	color: var(--k-text-secondary);
	text-decoration: none;
}

.k-gnb__link:hover,
.k-gnb__link:focus-visible {
	color: var(--k-text-brand);
}

.k-gnb__link.is-active {
	font-weight: 600;
	line-height: 1.3;
	color: var(--k-text-brand);
}

.k-gnb--transparent .k-gnb__link {
	color: rgba(255, 255, 255, 0.78);
}

.k-gnb--transparent .k-gnb__link:hover,
.k-gnb--transparent .k-gnb__link:focus-visible,
.k-gnb--transparent .k-gnb__link.is-active {
	color: var(--k-text-inverse);
}

/*
 * 태블릿·모바일 패널은 투명 변형에서 배경이 남색(--k-bg-brand)이라 상속색(거의 검정)이면 글자가 안 보인다.
 * 데스크톱(≥1200px)의 드롭다운은 흰 패널 위에 뜨므로 아래 미디어쿼리 블록이 이 값을 다시 덮는다.
 */
.k-gnb--transparent .k-gnb__sublink {
	color: rgba(255, 255, 255, 0.78);
}

.k-gnb--transparent .k-gnb__sublink:hover,
.k-gnb--transparent .k-gnb__sublink:focus-visible {
	color: var(--k-text-inverse);
}

.k-gnb__cta {
	flex-shrink: 0;
}

/*
 * 1200~1479 압축 데스크톱. 이 구간이 데스크톱 GNB 의 하한이다.
 * Figma 원본(padding 60×2 + 로고 216 + 나브 989 + CTA 99 + 컬럼갭 48)은 1472px 를 요구한다.
 * 그 미만에서 원본 치수를 유지하면 페이지가 통째로 가로로 밀리므로 이 구간만 줄인다.
 * 경계를 1480 으로 잡은 근거: 1420 으로 잡으면 body 스크롤은 사라져도 1420~1471 에서
 * 메뉴가 40~60px 조용히 잘린다(실측). 1440 디스플레이가 정확히 이 함정에 들어간다.
 * 햄버거 전환점(1199)은 nav.js 의 MOBILE_QUERY 와 **반드시 같은 값**이어야 한다.
 * 어긋나면 그 사이 구간에서 nav.js 가 데스크톱으로 판단해 패널 hidden 을 벗겨
 * 패널이 열린 채 고착된다. 한쪽만 고치지 말 것.
 */
@media (min-width: 1200px) and (max-width: 1479px) {
	.k-gnb__inner {
		padding: 0 var(--k-space-lg);
	}

	.k-gnb__panel {
		gap: var(--k-space-lg);
	}

	.k-gnb__list {
		gap: 14px;
	}

	.k-gnb__link {
		font-size: 15px;
	}
}

/* 1279 이하 데스크톱에서는 로고 보조문구까지 접어 메뉴에 폭을 넘긴다. */
@media (min-width: 1200px) and (max-width: 1279px) {
	.k-gnb__logo-name {
		display: none;
	}
}

/* 햄버거 — 992 이상에서는 숨김, 991 이하에서만 노출 */
.k-gnb__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.k-gnb__toggle-bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--k-text-primary);
	border-radius: var(--k-radius-sm);
}

.k-gnb--transparent .k-gnb__toggle-bar {
	background: var(--k-text-inverse);
}

/* 햄버거 구간. nav.js MOBILE_QUERY 와 동일한 1199 를 유지할 것. */
@media (max-width: 1199px) {
	.k-gnb__inner {
		min-height: 64px;
		padding: 0 var(--k-space-lg);
		flex-wrap: wrap;
	}

	.k-gnb__toggle {
		display: flex;
	}

	/*
	 * 모바일 패널. 열림/닫힘은 nav.js 가 토글 버튼에 거는 aria-expanded 하나로만 표현된다.
	 * (nav.js 는 hidden 속성도 클래스도 쓰지 않는다 — 셀렉터를 바꾸려면 nav.js 와 같이 바꿔야 한다.)
	 * 패널은 토글 버튼의 인접 형제여야 한다. 마크업 순서를 바꾸면 이 셀렉터가 죽는다.
	 */
	.k-gnb__panel {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: var(--k-space-lg);
		width: 100%;
		padding: var(--k-space-lg) 0 var(--k-space-xl);
		border-top: 1px solid var(--k-border-default);
	}

	.k-gnb__toggle[aria-expanded="true"] + .k-gnb__panel {
		display: flex;
		animation: k-nav-slide 160ms ease-out;
	}

	@keyframes k-nav-slide {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.k-gnb__toggle[aria-expanded="true"] + .k-gnb__panel {
			animation: none;
		}
	}

	.k-gnb__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--k-space-md);
		white-space: normal;
	}

	/*
	 * 모바일 패널은 드롭다운이 아니라 부모 바로 아래 펼쳐진 목록이다.
	 * 부모와의 간격을 형제 간격(16px)보다 좁히고 왼쪽으로 들여써야 하위 항목으로 읽힌다.
	 */
	.k-gnb__submenu {
		display: flex;
		flex-direction: column;
		gap: var(--k-space-xs);
		margin: var(--k-space-xs) 0 0;
		padding: 0 0 0 var(--k-space-md);
		list-style: none;
		border-left: 1px solid var(--k-border-default);
	}

	.k-gnb__sublink {
		display: block;
		font-size: 15px;
		line-height: 1.6;
		text-decoration: none;
	}

	.k-gnb__cta {
		align-self: stretch;
		text-align: center;
	}

	.k-gnb--transparent {
		position: relative;
		background: var(--k-bg-brand);
	}
}

/* ---------- Page Hero ---------- */

.k-page-hero {
	background: var(--k-bg-brand);
}

.k-page-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--k-space-sm);
	padding-top: 72px;
	padding-bottom: 72px;
}

.k-page-hero__breadcrumb {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.6);
}

.k-page-hero__title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--k-text-inverse);
}

/* 새소식 상세 등의 메타 줄. Caption(16/1.5) 톤, 브레드크럼보다 한 단계 밝게. */
.k-page-hero__meta {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.78);
}

.k-page-hero__subtitle {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 767px) {
	.k-page-hero__inner {
		padding-top: var(--k-space-3xl);
		padding-bottom: var(--k-space-3xl);
	}

	.k-page-hero__title {
		font-size: 32px;
	}
}

/* ---------- Footer ---------- */

.k-footer {
	background: var(--k-navy-900);
}

.k-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-2xl);
	padding-top: var(--k-space-3xl);
	padding-bottom: var(--k-space-2xl);
}

.k-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--k-space-2xl);
}

.k-footer__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.k-footer__brand {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--k-text-inverse);
}

.k-footer__meta {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.01em;
	color: rgba(197, 211, 232, 0.75);
}

.k-footer__menus {
	display: flex;
	gap: var(--k-space-3xl);
}

.k-footer__menu-title {
	margin: 0 0 var(--k-space-sm);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--k-text-inverse);
}

.k-footer__menu-list {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-footer__link,
.k-footer__policy-link {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.01em;
	color: rgba(197, 211, 232, 0.75);
	text-decoration: none;
}

.k-footer__link:hover,
.k-footer__link:focus-visible,
.k-footer__policy-link:hover,
.k-footer__policy-link:focus-visible {
	color: var(--k-text-inverse);
}

.k-footer__divider {
	height: 1px;
	width: 100%;
	background: rgba(255, 255, 255, 0.14);
}

.k-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-space-lg);
}

.k-footer__copy {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: rgba(197, 211, 232, 0.75);
}

.k-footer__policy {
	display: flex;
	gap: var(--k-space-lg);
}

.k-footer__policy-link--strong {
	font-weight: 600;
	line-height: 1.3;
	color: var(--k-text-inverse);
}

@media (max-width: 767px) {
	.k-footer__top,
	.k-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.k-footer__menus {
		gap: var(--k-space-xl);
	}
}

/* ---------- GNB Dropdown ---------- */

/* ponytail: desktop-only dropdown. 모바일은 nav.js 가 js-driven menu 관리 */
@media (min-width: 1200px) {
	/*
	 * .k-gnb__nav 의 overflow-x:auto 는 overflow-y 도 auto 로 만든다 → 절대위치 서브메뉴가
	 * 메뉴 띠 높이에서 세로로 잘려 드롭다운이 안 보인다. 메뉴 7개는 1200px 이상에서
	 * 한 줄에 들어가므로 이 구간에서만 스크롤을 끈다(아래 폭은 기존 가로 스크롤 유지).
	 */
	.k-gnb__nav {
		overflow: visible;
	}

	.k-gnb__item--parent {
		position: relative;
	}

	.k-gnb__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		display: none;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: var(--k-space-xs) 0;
		min-width: 160px;
		list-style: none;
		background: var(--k-bg-page);
		border: 1px solid var(--k-border-default);
		border-radius: var(--k-radius-md);
		box-shadow: var(--k-shadow-md);
		z-index: 110;
	}

	.k-gnb__item--parent:hover .k-gnb__submenu,
	.k-gnb__item--parent:focus-within .k-gnb__submenu {
		display: flex;
	}

	.k-gnb__subitem {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.k-gnb__sublink {
		display: block;
		padding: var(--k-space-xs) var(--k-space-md);
		font-size: 15px;
		font-weight: 400;
		line-height: 1.6;
		letter-spacing: -0.01em;
		color: var(--k-text-secondary);
		text-decoration: none;
	}

	.k-gnb__sublink:hover,
	.k-gnb__sublink:focus-visible {
		background: var(--k-bg-subtle);
		color: var(--k-text-brand);
		outline: none;
	}

	.k-gnb--transparent .k-gnb__submenu {
		background: var(--k-bg-page);
	}

	.k-gnb--transparent .k-gnb__sublink {
		color: var(--k-text-secondary);
	}

	/*
	 * 전역의 투명 변형 hover(흰색)는 모바일 남색 패널용이다. 데스크톱 드롭다운은 흰 패널이라
	 * 그대로 두면 흰 글자가 흰 배경에 묻는다. 여기서 다른 메뉴와 같은 브랜드 색으로 되돌린다.
	 */
	.k-gnb--transparent .k-gnb__sublink:hover,
	.k-gnb--transparent .k-gnb__sublink:focus-visible {
		color: var(--k-text-brand);
	}
}