/* ==========================================================================
   MODULE: components/lang-switch (.wzs-lang)
   헤더 오른쪽 언어 선택 버튼 — 누르면 한국어 / English / 中文 목록이 펼쳐진다.
   마크업: template-parts/global/lang-switch.php   동작: assets/js/modules/lang-switch.js
   국기 그림: inc/intl.php wazuso_intl_flag_svg()

   한국어·외국어 헤더 양쪽에 나오므로 상시 로드되는 컴포넌트다.
   좁은 화면의 위치(로고 줄 오른쪽 끝)는 layout/header.css 가 정한다.

   구조
     .wzs-lang              기준 상자(position: relative)
       .wzs-lang-toggle     국기 + 지금 언어 + ▾
       .wzs-lang-menu       펼침 목록. hidden 속성으로 여닫는다 — display 를 주지 말 것
         .wzs-lang-option   한 줄. 발행 전 언어는 <span class="is-soon">
   ========================================================================== */

.wzs-lang {
	position: relative;
	flex: none;
}

/* --- 버튼 --- */
.wzs-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 10px 0 8px;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
	background: var(--wzs-white);
	color: var(--wzs-ink-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: border-color var(--wzs-duration-fast) var(--wzs-ease),
		color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-lang-toggle:hover,
.wzs-lang-toggle[aria-expanded="true"] {
	border-color: var(--wzs-ink);
	color: var(--wzs-ink);
}

.wzs-lang-toggle:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 2px;
}

/* 열리면 화살표가 뒤집힌다 — 사용자가 누른 결과로만 움직인다 */
.wzs-lang-chevron {
	width: 14px;
	height: 14px;
	transition: transform var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-lang-toggle[aria-expanded="true"] .wzs-lang-chevron {
	transform: rotate(180deg);
}

/* --- 펼침 목록 ---
   선택자에 ul 을 붙이는 이유: base/reset.css 의 ul[class](0,1,1)가 클래스 하나를 이긴다.
   오른쪽 끝을 버튼에 맞춘다 — 버튼이 헤더 오른쪽 끝에 있어 왼쪽으로 펼쳐야 화면 밖으로 안 나간다. */
ul.wzs-lang-menu {
	position: absolute;
	top: calc(100% + var(--wzs-space-2));
	right: 0;
	z-index: 45;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-md);
	background: var(--wzs-white);
	box-shadow: var(--wzs-shadow-lg);
}

/* 한 줄 높이 44px — 손가락으로 누르는 최소 크기 */
.wzs-lang-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--wzs-radius-sm);
	color: var(--wzs-ink);
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

a.wzs-lang-option:hover,
a.wzs-lang-option:focus-visible {
	background: var(--wzs-bg-alt);
	outline: none;
}

a.wzs-lang-option:focus-visible {
	box-shadow: inset 0 0 0 2px var(--wzs-blue);
}

/* 지금 언어 — 오른쪽 끝 체크 표시 */
.wzs-lang-check {
	width: 16px;
	height: 16px;
	margin-left: auto;
	color: var(--wzs-blue);
}

/* 발행 전 언어 — 누를 수 없다는 게 보이도록 흐리게. 국기까지 흐리게 해야 "고른 것"처럼 안 보인다. */
.wzs-lang-option.is-soon {
	color: var(--wzs-ink-muted);
	cursor: default;
}

.wzs-lang-option.is-soon .wzs-flag {
	opacity: 0.45;
	filter: grayscale(0.6);
}

.wzs-lang-soon {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--wzs-bg-alt);
	color: var(--wzs-ink-muted);
	font-size: 11px;
	font-weight: 600;
}

/* --- 국기 ---
   이모지 국기를 쓰지 않는 이유: 윈도에서는 그림이 아니라 "KR" "CN" 글자로 나온다.
   중국 기업 담당자 대부분이 윈도 PC 라 SVG 로 직접 그린다.
   태극기는 흰 바탕이라 흰 헤더 위에서 모양이 사라져 옅은 테두리를 두른다. */
.wzs-flag {
	flex: none;
	width: 21px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.18);
}

/* --- 좁은 화면: 버튼은 국기 + ▾ 만 ---
   언어 이름은 버튼의 aria-label 에 들어 있어 화면낭독기에는 그대로 읽힌다.
   펼친 목록은 좁은 화면에서도 이름을 다 보여 준다. */
@media (max-width: 640px) {
	.wzs-lang-toggle {
		padding: 0 8px;
	}

	.wzs-lang-toggle-name {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wzs-lang-toggle,
	.wzs-lang-chevron {
		transition: none;
	}
}