/**
 * 언어 선택 스위처
 * 테마 / Elementor CSS 와 겹치지 않도록 전부 .fs-lang 접두사 + 명시적 리셋.
 *
 * 조정용 변수
 *   --fs-lang-bg        배경색
 *   --fs-lang-fg        글자/아이콘 색
 *   --fs-lang-width     가로 폭 (시안 108px)
 *   --fs-lang-font      글꼴 (기본: 사이트 글꼴 상속)
 *   --fs-lang-font-size 글자 크기
 */

.fs-lang {
	--fs-lang-bg: #4D4D4D;
	--fs-lang-fg: #FFFFFF;
	--fs-lang-width: 108px;
	--fs-lang-row: 32px;
	--fs-lang-radius: 16px;
	--fs-lang-font: inherit;
	--fs-lang-font-size: 13px;
	--fs-lang-font-weight: 500;

	position: relative;
	display: block;
	width: var(--fs-lang-width);
	height: var(--fs-lang-row);
	box-sizing: border-box;
}

/* 닫힌 크기만큼만 자리를 차지하고, 껍데기가 위로 늘어난다. */
.fs-lang .fs-lang__shell {
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--fs-lang-width);
	border-radius: var(--fs-lang-radius);
	background: var(--fs-lang-bg);
	color: var(--fs-lang-fg);
	overflow: hidden;
	box-sizing: border-box;
}

/* ---------- 행 공통 (트리거 / 옵션) ---------- */

.fs-lang .fs-lang__row {
	position: relative;
	display: block;
	width: var(--fs-lang-width);
	height: var(--fs-lang-row);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	text-decoration: none;
	box-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
}

.fs-lang .fs-lang__row:hover,
.fs-lang .fs-lang__row:focus {
	background: transparent;
	color: inherit;
	text-decoration: none;
}

.fs-lang .fs-lang__row:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

/* 시안 좌표 그대로: 아이콘 9px, 글자 29px, 화살표 오른쪽 끝 96px */
.fs-lang .fs-lang__icon {
	position: absolute;
	left: 9px;
	top: 9px;
	width: 14px;
	height: 14px;
	display: block;
	transition: opacity .12s ease;
}

.fs-lang .fs-lang__text {
	position: absolute;
	left: 29px;
	right: 30px;
	top: 0;
	height: var(--fs-lang-row);
	line-height: var(--fs-lang-row);
	font-family: var(--fs-lang-font);
	font-size: var(--fs-lang-font-size);
	font-weight: var(--fs-lang-font-weight);
	letter-spacing: -0.01em;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fs-lang .fs-lang__chevron {
	position: absolute;
	right: 10.5px;
	top: 12px;
	width: 11px;
	height: 7.5px;
	display: block;
	transform-origin: center;
	transition: transform .2s ease;
}

/* ---------- 옵션 목록 ---------- */

.fs-lang .fs-lang__list {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-lang .fs-lang__shell[data-open="true"] .fs-lang__list {
	display: block;
}

.fs-lang .fs-lang__item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-lang .fs-lang__item::before,
.fs-lang .fs-lang__item::marker {
	content: none;
}

/* 옵션 행은 글자 영역이 화살표만큼 좁을 필요가 없다. */
.fs-lang .fs-lang__option .fs-lang__text {
	right: 9px;
}

/* ---------- 호버: 배경색 대신 체크 아이콘이 따라 움직인다 ---------- */

/* 행마다 체크를 하나씩 깔아두고 평소엔 숨겨둔다. 위치는 실제 체크와 동일. */
.fs-lang .fs-lang__option::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 9px;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	opacity: 0;
	transition: opacity .12s ease;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 9 14 14' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.3333 15.9993L14.3333 19.666L21 12.666'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 9 14 14' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.3333 15.9993L14.3333 19.666L21 12.666'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 14px 14px;
	mask-size: 14px 14px;
}

/* 목록 위에 마우스/포커스가 있으면 원래 체크(현재 언어)는 잠시 숨는다. */
.fs-lang .fs-lang__list:hover .fs-lang__icon,
.fs-lang .fs-lang__list:focus-within .fs-lang__icon {
	opacity: 0;
}

/* 가리키고 있는 줄로 체크가 옮겨온다. */
.fs-lang .fs-lang__option:hover::before,
.fs-lang .fs-lang__option:focus-visible::before {
	opacity: 1;
}

/* ---------- 트리거 ---------- */

.fs-lang .fs-lang__trigger {
	border-radius: var(--fs-lang-radius);
	-webkit-appearance: none;
	appearance: none;
}

.fs-lang .fs-lang__trigger[aria-expanded="true"] .fs-lang__chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.fs-lang .fs-lang__chevron,
	.fs-lang .fs-lang__icon,
	.fs-lang .fs-lang__option::before {
		transition-duration: .01ms;
	}
}