/* 언어 선택 pill (translator.js 와 짝)
   위치: 헤더 바로 아래 고정 행(_lang_bar.html), 콘텐츠 컨테이너 우측 상단 정렬.
   랜딩/채팅(index) · 결과 페이지 공통. */

/* ── 고정 행(바) ────────────────────────────────────── */
.lang-bar {
    flex-shrink: 0;                 /* 헤더 아래에서 눌리지 않는 고정 행 */
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-3) var(--spacing-4) 0;
}

.lang-bar-inner {
    max-width: var(--container-max);   /* 결과 페이지 콘텐츠 컨테이너(1400px)와 우측 정렬 */
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

/* 랜딩/채팅 화면은 콘텐츠 컨테이너 폭이 좁으므로(.index-container=1000px) 맞춰 정렬 */
.index-page .lang-bar-inner {
    max-width: 1000px;
}

/* ── pill ───────────────────────────────────────────── */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--neutral-bg);
    border: 1px solid var(--neutral-disabled-bd);
    border-radius: var(--radius-full);
}

.lang-switch .lang-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--neutral-subtle);
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.lang-switch .lang-btn:hover {
    color: var(--primary-60);
}

.lang-switch .lang-btn.is-active {
    background: var(--primary-50);
    color: var(--primary-0);
}

/* 번역 진행 중: 상호작용 잠금 + 로딩 커서 */
body.is-translating {
    cursor: progress;
}

body.is-translating .lang-switch {
    opacity: .6;
    pointer-events: none;
}

@media (max-width: 767px) {
    .lang-bar {
        padding: var(--spacing-2) var(--spacing-4) 0;
    }
    .lang-switch .lang-btn {
        padding: 5px 9px;
        font-size: 12px;
    }
}