/*
 * header.css — 헤더 + 모바일 드로어
 *
 * 디자인 값은 tokens.css 의 --c4-* 만 쓴다.
 * 미디어 쿼리 조건부의 리터럴 px 는 "하드코딩 px 0건" 검증의 예외다(var() 를 쓸 수 없다).
 */

/* ─────────────────────────────────────────────────────────
   헤더 껍데기
   ───────────────────────────────────────────────────────── */

.c4-header {
	position: sticky;
	top: var(--c4-admin-bar-h, 0px);
	z-index: 50;
	height: var(--c4-header-h);
	background: var(--c4-header-bg-pc);
	-webkit-backdrop-filter: blur(var(--c4-header-blur));
	backdrop-filter: blur(var(--c4-header-blur));
	/* 초기에는 선이 없다. 스크롤했을 때만 색이 들어온다 — 높이가 흔들리지 않게 자리는 미리 잡아 둔다. */
	border-bottom: var(--c4-border-w) solid transparent;
	transition: border-color var(--c4-transition);
}

/* backdrop-filter 미지원이면 반투명 배경이 그냥 비쳐 보이므로 불투명 흰색으로 폴백한다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.c4-header {
		background: var(--c4-color-white);
	}
}

.c4-header.is-scrolled {
	border-bottom-color: var(--c4-color-border);
}

/*
 * [8단계] 헤더 안 요소에 포커스가 가도 페이지가 위로 튀지 않게 한다.
 *
 * html 의 scroll-padding-top(관리자 바 + 헤더 높이)은 "이 위쪽은 헤더에 가려진다"는 뜻이라,
 * 브라우저는 sticky 헤더 **안의** 요소(로고·메뉴·CTA·햄버거 체크박스)도 가려졌다고 보고 포커스 때 스크롤한다.
 * 실측(375, 스크롤 500): 햄버거를 누르면 77 로, 로고에 포커스하면 94 로 튀었다.
 * 헤더 안 요소의 스크롤 판정 영역을 같은 높이만큼 아래로 밀어 '가려지지 않음'으로 읽히게 한다.
 * 헤더는 늘 화면 위에 붙어 있으므로 이 요소들을 보이게 하려고 스크롤할 일은 없다.
 */
.c4-header * {
	scroll-margin-top: calc(-1 * (var(--c4-admin-bar-h, 0px) + var(--c4-header-h)));
}

.c4-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--c4-gap-menu-narrow);
	height: 100%;
	max-width: var(--c4-container-chrome);
	margin-inline: auto;
	padding-inline: var(--c4-gutter-pc-chrome);
}

/* ─────────────────────────────────────────────────────────
   로고 — 확정값의 '로고 슬롯 190×48' + '이미지 로고 표시 규격' 그대로.
   헤더·푸터가 같은 규칙을 쓴다(footer.css 는 색만 덮는다).
   ───────────────────────────────────────────────────────── */

.c4-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	height: var(--c4-logo-slot-h);
	text-decoration: none;
}

/* 이미지 로고일 때만 슬롯 폭을 잡는다(텍스트 로고는 자기 폭). */
.c4-logo--image {
	width: var(--c4-logo-slot-w);
}

/*
 * 어떤 크기를 올려도 비율을 유지한 채 상자에 맞춘다. 여섯 줄 중 하나라도 빠지면 찌그러지거나 넘친다.
 * ★ object-fit: cover 를 쓰지 말 것 — 로고를 잘라낸다.
 * ★ wp_get_attachment_image 가 width/height 속성을 붙이므로 CSS 로 반드시 덮는다.
 */
.c4-logo__img {
	width: 100%;
	max-width: var(--c4-logo-slot-w);
	height: auto;
	max-height: var(--c4-logo-slot-h);
	object-fit: contain;
	object-position: left center;
}

.c4-logo__text {
	font-size: var(--c4-fz-logo);
	line-height: var(--c4-lh-logo);
	font-weight: var(--c4-fw-bold);
	/* 로고만 자간이 0 이다(다른 스타일과 다르다). */
	letter-spacing: var(--c4-ls-logo);
	white-space: nowrap;
}

.c4-logo--header .c4-logo__text {
	color: var(--c4-color-text);
}

/* ─────────────────────────────────────────────────────────
   메뉴
   ───────────────────────────────────────────────────────── */

.c4-header__nav {
	min-width: 0;
	/* 항목이 늘어 간격을 줄여도 넘치면 nav 만 가로로 스크롤된다. CTA 는 항상 온전히 남는다. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.c4-header__nav::-webkit-scrollbar {
	display: none;
}

.c4-header__menu {
	display: flex;
	align-items: center;
	gap: var(--c4-gap-menu);
	list-style: none;
}

/*
 * ★ 이 1279 는 헤더 안에서만 쓰는 국소값이다 — 헤더 컨테이너 1280 에서 도출했다.
 *   전환 기준선 3개(768 · 1024 · 1360)에 끼워 넣는 값이 아니며, 다른 곳에 쓰지 말 것.
 *   목적은 항목이 늘어도 CTA 와 겹치지 않게 하는 것이다.
 */
@media (max-width: 1279px) {
	.c4-header__menu {
		gap: var(--c4-gap-menu-narrow);
	}
}

.c4-header__menu a {
	display: block;
	font-size: var(--c4-fz-menu);
	line-height: var(--c4-lh-menu);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	text-decoration: none;
	white-space: nowrap;
}

.c4-header__menu a:hover {
	color: var(--c4-color-text-sub);
}

/*
 * 현재 위치 = 포인트 컬러.
 * wp_page_menu() 폴백은 .current_page_item / .current_page_parent 를 출력하므로 함께 적는다.
 */
.c4-header__menu .current-menu-item > a,
.c4-header__menu .current-menu-parent > a,
.c4-header__menu .current-menu-ancestor > a,
.c4-header__menu .current_page_item > a,
.c4-header__menu .current_page_parent > a {
	color: var(--c4-color-accent);
}

/* ─────────────────────────────────────────────────────────
   문의하기 CTA
   ───────────────────────────────────────────────────────── */

.c4-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: var(--c4-header-cta-gap);
	/* ★ width 가 아니라 min-width 다. 문구가 옵션이라 길어지면 고정폭에서 넘친다. */
	min-width: var(--c4-header-cta-min-w);
	height: var(--c4-header-cta-h);
	padding: var(--c4-header-cta-pad-y) var(--c4-header-cta-pad-x);
	border-radius: var(--c4-radius-btn);
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
	font-size: var(--c4-fz-body2);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-bold);
	text-decoration: none;
}

.c4-cta__icon {
	flex-shrink: 0;
	width: var(--c4-header-cta-icon);
	height: var(--c4-header-cta-icon);
}

/* ─────────────────────────────────────────────────────────
   햄버거 · 드로어
   ───────────────────────────────────────────────────────── */

.c4-header__toggle {
	display: none;
	flex-shrink: 0;
}

.c4-hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--c4-hamburger-size);
	height: var(--c4-hamburger-size);
	color: var(--c4-color-text);
	cursor: pointer;
}

/* 체크박스가 label 앞에 있으므로 일반 형제 선택자로 닿는다. */
.c4-drawer-toggle:checked ~ .c4-hamburger .c4-hamburger__icon--open,
.c4-hamburger__icon--close {
	display: none;
}

.c4-drawer-toggle:checked ~ .c4-hamburger .c4-hamburger__icon--close {
	display: block;
}

/* 체크박스가 sr-only 라 포커스 링이 보이지 않으므로 label 로 옮겨 준다. */
.c4-drawer-toggle:focus-visible ~ .c4-hamburger {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: var(--c4-focus-ring-offset);
}

.c4-drawer {
	display: none;
	position: fixed;
	top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 45;
	flex-direction: column;
	background: var(--c4-color-white);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.c4-drawer__nav {
	padding: var(--c4-drawer-pad-top) var(--c4-drawer-pad-x) var(--c4-drawer-pad-bottom);
}

.c4-drawer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--c4-drawer-gap);
	list-style: none;
}

.c4-drawer__menu a {
	display: block;
	font-size: var(--c4-fz-menu-m);
	line-height: var(--c4-lh-menu-m);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	text-decoration: none;
}

.c4-drawer__menu a:hover {
	color: var(--c4-color-text-sub);
}

.c4-drawer__menu .current-menu-item > a,
.c4-drawer__menu .current-menu-parent > a,
.c4-drawer__menu .current-menu-ancestor > a,
.c4-drawer__menu .current_page_item > a,
.c4-drawer__menu .current_page_parent > a {
	color: var(--c4-color-accent);
}

.c4-drawer__cta {
	margin-top: auto;
	padding: 0 var(--c4-drawer-pad-x) var(--c4-drawer-cta-bottom);
}

.c4-cta--drawer {
	width: 100%;
}

/* 드로어가 열린 동안 배경 스크롤을 잠근다(JS 가 클래스를 붙인다). */
html.c4-drawer-open,
body.c4-drawer-open {
	overflow: hidden;
}

/* ─────────────────────────────────────────────────────────
   1024 미만 — 메뉴 → 드로어 전환선
   CTA 도 헤더에서 빠지고 드로어 안으로 들어간다.
   태블릿 768–1023 에서도 헤더에 CTA 가 없는 것이 정상이다.
   ───────────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
	.c4-header__nav,
	.c4-cta--header {
		display: none;
	}

	.c4-header__toggle {
		display: flex;
	}

	/*
	 * 드로어가 <header> 밖에 있어 형제 선택자로는 닿지 않는다.
	 * 대안(토글을 드로어 옆으로 옮기기 / JS 개폐)은 각각 탭 순서나 CSS-only 요건을 깨므로
	 * :has() 가 가장 손해가 적다.
	 */
	.c4-site:has(.c4-drawer-toggle:checked) .c4-drawer {
		display: flex;
	}
}

/* ─────────────────────────────────────────────────────────
   768 미만 — 모바일 헤더
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.c4-header {
		background: var(--c4-color-white);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		/* 모바일은 하단선이 상시다(PC 는 스크롤했을 때만). */
		border-bottom-color: var(--c4-color-border);
	}

	.c4-header__inner {
		padding-inline: var(--c4-gutter-mobile-chrome);
	}

	.c4-header .c4-logo {
		margin-inline-start: var(--c4-header-logo-indent-m);
	}
}

/*
 * 문의하기 버튼(CTA)을 끈 사이트에서 메뉴가 오른쪽 끝으로 붙는 것을 막는다.
 * 로고와 같은 폭의 빈 칸을 오른쪽에 만들어 메뉴를 가운데 둔다.
 * 메뉴가 보이는 구간(1024 이상)에만 건다 — 그 아래는 햄버거가 오른쪽 끝에 있어야 한다.
 */
@media (min-width: 1024px) {
	.c4-header__inner:not(:has(.c4-cta--header)) > .c4-logo {
		flex: 1 1 0;
		min-width: min-content;
	}

	.c4-header__inner:not(:has(.c4-cta--header))::after {
		content: '';
		flex: 1 1 0;
		min-width: 0;
	}
}

}