/* 언어 스위처 — 헤더 오른쪽 끝의 드롭다운. 언어를 2개 이상 열었을 때만 head.sub.php 가 로드한다.
   ※ header.css 에 `header ul …` 전역 규칙이 있어 ul/li 를 쓰지 않았다(div/a). 폰트 크기는 헤더처럼 vw 기준.
   ※ 색은 js/lang.js 가 헤더 배경에서 계산해 --lang-fg / --lang-bg 로 넘긴다(기본값 = 어두운 헤더용 흰 글자). */

.lang_switch {
    --lang-fg: #fff;
    --lang-bg: #000;
    right: 1.3%;
    bottom: 0;
    height: 3vw;
    display: flex;
    align-items: center;
    z-index: 10000;
    font-family: 'Pretendard variable', 'Pretendard', sans-serif;
    font-size: 0.85vw;
    line-height: 1;
    color: var(--lang-fg);
}
.lang_switch_btn {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    margin: 0;
    padding: 0.35vw 0.85vw;
    border: 1px solid var(--lang-fg);
    border-radius: 100px;
    background: transparent;
    color: var(--lang-fg);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.lang_switch_btn::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.28vw solid transparent;
    border-right: 0.28vw solid transparent;
    border-top: 0.36vw solid currentColor;
    transition: transform 0.2s;
}
.lang_switch.is_open .lang_switch_btn::after { transform: rotate(180deg); }
.lang_switch_btn:hover,
.lang_switch.is_open .lang_switch_btn {
    background: var(--lang-fg);
    color: var(--lang-bg);
}

.lang_switch_list {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    padding: 0.35vw 0;
    border: 1px solid var(--lang-fg);
    border-radius: 0.6vw;
    background: var(--lang-bg);
    display: none;
}
.lang_switch.is_open .lang_switch_list { display: block; }
@media (hover: hover) {
    .lang_switch:hover .lang_switch_list { display: block; }
}
.lang_switch .lang_link {
    display: block;
    padding: 0.55vw 1.2vw;
    color: var(--lang-fg);
    font-weight: 500;
    white-space: nowrap;
    text-align: left;
}
.lang_switch .lang_link:hover { background: rgba(128, 128, 128, 0.25); }
.lang_switch .lang_link.is_active {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

@media screen and (max-width: 599px) {
    .lang_switch {
        right: 19%;
        top: 0;
        bottom: auto;
        height: 100%;
        font-size: 3.4vw;
    }
    .lang_switch_btn {
        gap: 1.4vw;
        padding: 1.4vw 3vw;
    }
    .lang_switch_btn::after {
        border-left-width: 1vw;
        border-right-width: 1vw;
        border-top-width: 1.3vw;
    }
    .lang_switch_list {
        padding: 1vw 0;
        border-radius: 2vw;
    }
    .lang_switch .lang_link { padding: 2.2vw 4vw; }
}