/* 헤더 언어 선택 — Figma: 본인확인·동의·인증 UI (node 2:3 / 31:3)
 *
 * 디자인은 국기 이모지 칩이 아니라 오른쪽 끝의 작은 회색 코드 텍스트다
 * ("VN · KR", "KO ▾"). 마크업은 그대로 두고 표면만 바꾼다 — 각 화면이
 * .lang-flag-btn / .lang-btn 에 직접 클릭 핸들러를 걸고 .active 를 토글하기
 * 때문에, 버튼을 건드리지 않아야 언어 전환이 그대로 동작한다.
 *
 * 이 파일은 각 화면의 인라인 <style> 보다 뒤에 실려야 이긴다.
 * (템플릿에서 </head> 직전에 링크한다.)
 */

.lang-flag-selector,
.header-langs {
    display: flex;
    align-items: center;
    gap: 0;
}

/* 국기 이모지는 감추고 data-lang 값을 코드 텍스트로 세운다. */
.lang-flag-selector .flag-emoji {
    display: none;
}

.lang-flag-selector .lang-flag-btn,
.header-langs .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    /* 글자는 작게 두되 터치영역은 44x44 를 지킨다 (기존 접근성 기준). */
    min-width: 44px;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #86868c;
    opacity: 1;
    cursor: pointer;
}

.lang-flag-selector .lang-flag-btn::after {
    content: attr(data-lang);
    text-transform: uppercase;
}

/* 항목 사이 가운뎃점 — Figma 의 "VN · KR" 구분자 */
.lang-flag-selector .lang-flag-btn + .lang-flag-btn::before,
.header-langs .lang-btn + .lang-btn::before {
    content: '·';
    margin-right: 6px;
    color: #d4d4dc;
    font-weight: 500;
}

.lang-flag-selector .lang-flag-btn.active,
.header-langs .lang-btn.active {
    background: none;
    border-color: transparent;
    color: #17171b;
    font-weight: 700;
    opacity: 1;
}

.lang-flag-selector .lang-flag-btn:focus-visible,
.header-langs .lang-btn:focus-visible {
    outline: 2px solid #f2295c;
    outline-offset: -4px;
    border-radius: 6px;
}