/* ==========================================================================
   MODULE: layout/header
   상단 고정 헤더의 틀 — 고정·숨김·로고·안쪽 여백.
   스크롤 다운 시 숨고 업 시 다시 나타남 (assets/js/modules/header-scroll.js).
   한국어 헤더의 메뉴·드롭다운·모바일 서랍은 layout/gnb.css.
   아래 .wzs-nav / .wzs-nav-list 와 좁은 화면 2줄 배치는 외국어 헤더(.wzs-intl-header) 전용이다 —
   메뉴가 3개뿐이라 서랍 없이 로고 아래 한 줄로 충분하다.
   ========================================================================== */

.wzs-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(247, 248, 250, 0.9);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wzs-border);
	transition: transform var(--wzs-duration-base) var(--wzs-ease);
}

.wzs-header.is-hidden {
	transform: translateY(-100%);
}

.wzs-header-inner {
	max-width: var(--wzs-container);
	margin: 0 auto;
	padding: var(--wzs-space-3) var(--wzs-space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wzs-space-4);
}

.wzs-logo {
	font-family: var(--wzs-font-display);
	font-weight: 700;
	font-size: var(--wzs-fs-xl);
	color: var(--wzs-ink);
	letter-spacing: -0.02em;
}

.wzs-logo img {
	height: 40px;
	width: auto;
}

.wzs-nav {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-5);
}

.wzs-nav-list {
	display: flex;
	gap: var(--wzs-space-4);
}

.wzs-nav-list a {
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
	color: var(--wzs-ink-soft);
	transition: color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-nav-list a:hover {
	color: var(--wzs-ink);
}

/* 좁은 화면: 로고를 1행에 두고, 메뉴를 2행으로 내려서
   nav-list는 가로 스크롤 가능한 알약 형태로 보여줌 (한글이 세로로 찌그러지는 것 방지) */
/* --- 좁은 화면(외국어 헤더): 로고 아래 한 줄에 메뉴 --- */
@media (max-width: 640px) {
	/* 로고도 메뉴와 같이 가운데로. 로고만 왼쪽에 붙어 있으면 아래 가운데 정렬된
	   메뉴와 축이 어긋나 보인다. */
	.wzs-intl-header .wzs-header-inner {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--wzs-space-2);
	}

	.wzs-intl-header .wzs-nav {
		width: 100%;
		gap: var(--wzs-space-2);
	}

	/* 가운데 정렬. safe center 를 함께 쓰는 이유: 메뉴가 화면보다 길어지면 그냥 center
	   로는 넘친 부분이 왼쪽으로 잘려 나가 첫 항목("홈")에 아예 닿지 못한다.
	   safe 는 넘칠 때만 왼쪽 정렬로 되돌린다. 앞 줄(center)은 safe 를 모르는
	   브라우저용 대비값이라 지우지 말 것. */
	.wzs-intl-header .wzs-nav-list {
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		white-space: nowrap;
		gap: var(--wzs-space-3);
		justify-content: center;
		justify-content: safe center;
	}

	.wzs-intl-header .wzs-nav-list a {
		flex: none;
	}

	/* 언어 선택 버튼은 좁은 화면에서 메뉴 줄이 아니라 로고 줄 오른쪽 끝에 띄운다.
	   메뉴 줄에 두면 버튼 폭만큼 메뉴가 밀려 끝 메뉴가 화면 밖으로 잘린다.
	   로고는 가운데라 오른쪽이 비어 있다. 좁은 화면의 버튼은 국기 + ▾ 만(약 60px)이라
	   320px 폰에서도 로고(오른쪽 끝 227px)와 닿지 않는다.
	   top 값 = 헤더 위 여백(16px) + (로고 높이 40px - 버튼 높이 34px) / 2. */
	.wzs-intl-header .wzs-header-inner {
		position: relative;
	}

	.wzs-intl-header .wzs-lang {
		position: absolute;
		top: calc(var(--wzs-space-3) + 3px);
		right: var(--wzs-space-4);
	}

	/* 메뉴가 한 줄을 넘칠 때(관리자에서 메뉴 이름을 길게 바꾼 경우) 글자를 쪼개지 않고
	   옆으로 밀리게 둔다. 이때 생기는 회색 스크롤 막대는 감춘다 — 메뉴 밑에 줄이 그어진
	   것처럼 보였다. 메뉴 이름은 320px 폰 기준 합계 약 200px 안(띄어쓰기 포함 한 항목
	   5글자 이하)으로 두는 것이 가장 안전하다. */
	.wzs-intl-header .wzs-nav-list {
		scrollbar-width: none;
	}

	.wzs-intl-header .wzs-nav-list::-webkit-scrollbar {
		display: none;
	}
}