:root {
    --bgm-border: #946b42;
    --bgm-bg: #fff5df;
    --bgm-text: #5c4027;
    --bgm-on-border: #267b74;
    --bgm-on-bg: #bde8df;
    --bgm-on-text: #164c47;
    --bgm-fs-menu: 15px;
    --bgm-fs-help: 12px;
}

/* 「? ×N」 바로 오른쪽의 스피커 버튼. 부모 #find-indicators 는 클릭을 통과시키므로 버튼만 되살린다. */
#game-screen #find-indicators #bgm-toggle {
    position: static;
    flex: 0 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 0 clamp(4px, 1.2vw, 14px);
    padding: 0;
    border: 2px solid var(--bgm-border);
    border-radius: 50%;
    background: var(--bgm-bg);
    color: var(--bgm-text);
    pointer-events: auto;
    cursor: pointer;
}

#game-screen #find-indicators #bgm-toggle svg {
    width: 62%;
    height: 62%;
}

#game-screen #bgm-toggle .bgm-icon-on,
#game-screen #bgm-toggle[aria-checked="true"] .bgm-icon-off {
    display: none;
}

#game-screen #bgm-toggle[aria-checked="true"] .bgm-icon-on {
    display: inline;
}

/* 태블릿·PC·폴드 펼침: 「?」 아이콘과 같은 크기(칸 높이)로 맞춘다. (폴드 펼침 실기기 690×702·829×564 가 들어오도록 높이 540 — 폰 가로 390 이하는 제외) */
@media (min-width: 640px) and (min-height: 540px) {
    #game-screen #find-indicators #bgm-toggle {
        align-self: stretch;
        width: auto;
        height: auto;
        aspect-ratio: 1;
    }
}

#game-screen #bgm-toggle:focus-visible {
    outline: 3px solid var(--bgm-on-border);
    outline-offset: 3px;
}

/* 소리 칸(10/25 승인 시안): 배경음악·효과음 버튼 두 개를 한 줄에 두고 켜짐·꺼짐은 색과 아이콘 사선으로 보인다.
   낮은 가로 두 칸 배치에서 옆 계정 카드 높이로 늘어나면 내용을 세로 가운데에 둔다. */
#settings-screen #settings-sound {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#settings-screen .settings-sound-row {
    display: flex;
    gap: 10px;
}

#settings-screen #bgm-toggle-menu,
#settings-screen #sfx-toggle-menu {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid var(--bgm-border);
    border-radius: 14px;
    background: var(--bgm-bg);
    color: var(--bgm-text);
    font-size: var(--bgm-fs-menu);
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

#settings-screen .settings-sound-row svg { width: 22px; height: 22px; flex: none; }
#settings-screen .settings-sound-row [aria-checked="true"] .snd-slash,
#settings-screen .settings-sound-row [aria-checked="false"] .snd-wave { display: none; }
#settings-screen .settings-sound-row [aria-checked="false"] { opacity: .72; }

#settings-screen #bgm-toggle-menu:focus-visible,
#settings-screen #sfx-toggle-menu:focus-visible {
    outline: 3px solid var(--bgm-on-border);
    outline-offset: 3px;
}

/* 낱말 중간(「터/치하면」)에서 끊지 않는다. */
#settings-screen #settings-sound-help { margin: 8px 0 0; font-size: var(--bgm-fs-help); line-height: 1.5; text-align: center; word-break: keep-all; }
#settings-screen #sfx-toggle-menu[aria-checked="true"],
#settings-screen #bgm-toggle-menu[aria-checked="true"],
#game-screen #find-indicators #bgm-toggle[aria-checked="true"] {
    border-color: var(--bgm-on-border);
    background: var(--bgm-on-bg);
    color: var(--bgm-on-text);
}