/* ─────────────────────────────────────────────────────────────────────
   언어 선택 버튼 가독성 보정 (langVisible.css)

   문제
     여러 게임 페이지가 언어 토글을 rgba(255,255,255,0.2) 같은
     '옅은 반투명 배경 + 흰 글씨' 로 만들어 두었습니다.
     컬러 헤더 위에 떠 있을 때는 보이지만, 토글이 position:fixed / absolute 라
     스크롤해서 흰 본문 위로 오면 흰 글씨가 배경에 묻혀 완전히 사라집니다.

   해결
     토글 자체에 어두운 스크림(scrim)을 깔아 어떤 배경 위에서도
     흰 글씨가 읽히도록 합니다. 선택된 언어는 흰 알약 + 진한 글씨로 뒤집습니다.

   주의
     이 파일은 각 페이지의 원래 CSS '뒤에' 불러야 합니다.
   ───────────────────────────────────────────────────────────────────── */

/* ── 토글 바깥 상자: 어두운 스크림 ─────────────────────────────── */
.lang-toggle,
.language-toggle,
.language-selector,
#lang-toggle,
#langToggle {
    background-color: rgba(24, 26, 38, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
    border-radius: 999px;
}

/* ── 각 언어 항목: 흰 글씨 + 약한 그림자 ───────────────────────── */
.lang-toggle .lang-btn,
.language-toggle,
.language-selector .language-btn,
#lang-toggle .lang-option,
#langToggle .lang-btn,
#langToggle .language-btn,
#langToggle .lang-option {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background-color: transparent;
}

/* ── 선택된 언어: 흰 알약 + 진한 글씨 ──────────────────────────── */
.lang-toggle .lang-btn.active,
.language-selector .language-btn.active,
#lang-toggle .lang-option.active,
#langToggle .lang-btn.active,
#langToggle .language-btn.active,
#langToggle .lang-option.active {
    background-color: #ffffff !important;
    color: #1f2430 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

/* 국기 이모지는 그림자를 빼서 또렷하게 */
.lang-flag,
.language-flag {
    text-shadow: none !important;
}

/* ── 스크롤 상태에서 색을 다시 덮어쓰는 페이지 대응 ────────────── */
#lang-toggle.scrolled {
    background-color: rgba(24, 26, 38, 0.72) !important;
}

#lang-toggle.scrolled .lang-option {
    color: #ffffff !important;
}

#lang-toggle.scrolled .lang-option.active {
    background-color: #ffffff !important;
    color: #1f2430 !important;
}

/* ── 터치 영역 확보 (작은 화면에서 잘리지 않도록) ──────────────── */
@media (max-width: 420px) {
    .lang-toggle,
    .language-toggle,
    .language-selector,
    #lang-toggle,
    #langToggle {
        max-width: calc(100vw - 24px);
        flex-wrap: nowrap;
    }
}