/* 좌측 상단 음악 표시 · 선택 (2026-08-22 사람 지시)
 *   "화면 좌측 상단 음악재생표시와 클릭시 음악을 선택할 수 있게 설계를 추가"
 *
 * 이 파일이 정하는 것은 [모양]뿐이다. 무슨 곡을 트나·목록이 무엇인가는
 *   audio.js (SoundManager.playlist/mode/setMode/next)  ← 소리의 정본
 *   bgm-list.js (도구가 굽는다)                          ← 목록의 정본
 * 이 파일은 그 둘을 보여 주고 눌린 것을 되돌려줄 뿐이다(CLAUDE.md 규칙 6).
 *
 * ★ 왜 z-index 9500 인가 — 인연당 첫 씬(#iy-scene)이 9000 이다. 씬이 떠 있어도
 *   음악 표시는 보여야 한다(그때도 곡은 돌고 있다).
 */

.bgm-chip{
  position:fixed; z-index:9500;
  top:calc(8px + env(safe-area-inset-top,0px));
  left:calc(8px + env(safe-area-inset-left,0px));
  min-width:44px; min-height:44px; padding:0 12px;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.20); border-radius:999px;
  background:rgba(24,14,32,.62); color:#f3e9f8;
  font-family:inherit; font-size:.80rem; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  max-width:min(62vw, 260px);
}
.bgm-chip:focus-visible{ outline:2px solid #a685e2; outline-offset:2px; }
.bgm-chip-title{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:150px;
}
@media (max-width:400px){ .bgm-chip-title{ max-width:96px; } }

/*  막대 세 개 = [지금 소리가 나고 있다]. 멈추면 납작하게 눕는다 —
    아이콘 한 개로는 [켜짐]과 [재생 중]이 구별되지 않는다. */
.bgm-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; flex:0 0 auto; }
.bgm-eq i{
  display:block; width:3px; height:4px; border-radius:1px;
  background:#c9a6f2;
  transform-origin:bottom;
}
.bgm-chip.is-playing .bgm-eq i{ animation:bgm-eq 900ms ease-in-out infinite; }
.bgm-chip.is-playing .bgm-eq i:nth-child(2){ animation-duration:640ms; }
.bgm-chip.is-playing .bgm-eq i:nth-child(3){ animation-duration:1120ms; }
@keyframes bgm-eq{ 0%,100%{ height:4px; } 50%{ height:14px; } }
.bgm-chip:not(.is-playing) .bgm-eq i{ height:3px; background:#7a6a88; }

/*  ── 겹치지 않게 두는 법 (2026-08-22 사람 지시) ──────────────────────────
    "음악플레이리스트가 좌측에 다른 버튼과 겹치지 않는 곳에 고정해야함"

    두 가지로 나눈다.
    ① 흐름 안에 있는 뒤로가기 링크(.village-back · char-header 의 .back)는 **오른쪽으로 민다** —
       칩이 그 자리(좌측 상단)를 먼저 차지하기 때문이다.
    ② 상점 첫 씬처럼 화면 전체를 덮는 씬에는 **자기 [뒤로] 버튼이 좌측 상단에 고정**되어 있다.
       그때는 칩이 그 아래(60px)로 내려가 세로로 쌓인다 — 44(버튼) + 8(간격) + 8(위 여백) = 60. */
body.bgm-chip-on .village-back{ margin-left:52px; }
body.bgm-chip-on header.char-header .back{ margin-left:52px; }
/*  ③ 상단바(back-home.css)가 있는 화면에서는 칩이 그 바 **안**으로 들어간다 —
    fixed 두 개를 좌측 상단에 겹쳐 두는 대신 한 줄에 나란히 세운다.
    그때 칩은 흐름 요소가 되고, 남는 폭만큼만 차지한다(제목이 길면 말줄임). */
.ui-topbar .bgm-chip{
  position:static; top:auto; left:auto;
  flex:0 1 auto; min-width:0;
  max-width:100%;
}
/*  ④ 씬 안에서 팝업이 떠 있는 동안은 칩이 물러난다(바 밖에 있는 화면 = 마을). */
body.iy-modal .bgm-chip{ display:none; }

/* ── 고르는 창 ─────────────────────────────────────────────────────────*/
.bgm-panel[hidden]{ display:none; }
.bgm-panel{
  position:fixed; inset:0; z-index:9600;
  display:flex; align-items:center; justify-content:center;
}
.bgm-panel-scrim{ position:absolute; inset:0; background:rgba(10,6,16,.62); }
.bgm-panel-box{
  position:relative; width:calc(100% - 24px); max-width:420px; max-height:74vh;
  /*  배너 광고 위로 — `ads.js:30` 이 넣는 실측값(2026-08-22 사람 지시) */
  margin-bottom:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column;
  border:1px solid rgba(169,135,197,.38); border-radius:20px;
  background:#FAF6F1;
  color:#3C2945; box-shadow:0 14px 38px rgba(60,41,69,.20);
  animation:bgm-pop 200ms cubic-bezier(.2,.9,.3,1);
}
@keyframes bgm-pop{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.bgm-panel-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 12px; border-bottom:1px solid rgba(60,41,69,.12);
  background:#F1E9F7; border-radius:20px 20px 0 0;
}
.bgm-panel-head h2{ margin:0; font-size:1rem; font-weight:700; }
.bgm-x{
  min-width:44px; min-height:44px; border:0; border-radius:12px;
  background:rgba(60,41,69,.08); color:inherit; font-family:inherit; cursor:pointer;
}
.bgm-x:focus-visible{ outline:2px solid #A987C5; outline-offset:2px; }
.bgm-list{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:10px; display:flex; flex-direction:column; gap:6px;
}
.bgm-item{
  display:flex; align-items:center; gap:10px;
  min-height:48px; padding:0 14px; width:100%;
  border:1px solid transparent; border-radius:12px;
  background:transparent; color:inherit;
  font-family:inherit; font-size:.94rem; text-align:left; cursor:pointer;
}
.bgm-item:hover{ background:rgba(60,41,69,.05); }
.bgm-item.is-on{ background:#E9DDF5; border-color:#A987C5; }
.bgm-item-mark{ flex:0 0 auto; width:18px; text-align:center; opacity:.9; }
.bgm-item-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bgm-sep{
  margin:8px 6px 4px; padding:0 8px;
  font-size:.72rem; letter-spacing:.04em; color:#8B7891;
}
.bgm-foot{
  flex:0 0 auto; display:flex; gap:8px; padding:10px 14px 16px;
  border-top:1px solid rgba(60,41,69,.12);
}
.bgm-foot button{
  flex:1 1 auto; min-height:46px; border-radius:12px;
  border:1px solid rgba(169,135,197,.38); background:#F1E9F7;
  color:#3C2945; font-family:inherit; font-size:.92rem; cursor:pointer;
}
.bgm-foot button.primary{
  border-color:transparent; color:#fff;
  background:#A985D8;
}

@media (prefers-reduced-motion: reduce){
  .bgm-chip.is-playing .bgm-eq i{ animation:none; height:9px; }
  .bgm-panel-box{ animation:none; }
}

/*  ── 음악칩 무드 패널 (2026-09-29 · bgm-list.js MOOD_PLAYER_ENABLED 가 true 일 때만 그려진다) ── */
.mood-tabs{ display:flex; gap:6px; }
.mood-tab{
  flex:1 1 0; min-height:44px; border:1px solid rgba(169,135,197,.38); border-radius:12px;
  background:#F1E9F7; color:#3C2945; font-family:inherit; font-size:.84rem; padding:0 4px; white-space:nowrap; cursor:pointer;
}
.mood-tab.is-on{ background:#A985D8; border-color:transparent; color:#fff; font-weight:700; }
.mood-heart{
  flex:0 0 auto; min-width:44px; min-height:44px; border:0; background:transparent;
  color:#8B7891; font-size:1.25rem; line-height:1; cursor:pointer;
}
.mood-heart.is-on{ color:#D9578C; }
.mood-soon{ font-size:.66rem; padding:2px 6px; border-radius:999px; background:rgba(60,41,69,.12); }
.mood-shuffle{
  width:100%; min-height:48px; margin-bottom:6px; border:0; border-radius:12px;
  background:#A985D8; color:#fff; font-family:inherit; font-size:.94rem; cursor:pointer;
}
.mood-row{ display:flex; align-items:center; gap:8px; min-height:48px; padding:0 0 0 12px; }
.mood-row-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.mood-row-tags{ flex:0 1 auto; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.68rem; color:#8B7891; }
.mood-empty{ padding:28px 12px; text-align:center; font-size:.9rem; color:#8B7891; }

.mood-playbar{ display:flex; gap:8px; margin-bottom:6px; }
.mood-playbar .mood-shuffle{ flex:1 1 auto; width:auto; margin-bottom:0; }
.mood-shuf-toggle{
  flex:0 0 auto; min-width:48px; min-height:48px; border:1px solid rgba(169,135,197,.38); border-radius:12px;
  background:#fff; color:#3C2945; font-size:1.05rem; cursor:pointer; opacity:.55;
}
.mood-shuf-toggle.is-on{ opacity:1; background:#EADCF6; border-color:#A985D8; }
.mood-toast{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px;
  padding:0 8px 0 14px; min-height:44px; border-radius:12px; background:#3C2945; color:#fff; font-size:.88rem;
}
.mood-toast button{ min-height:44px; padding:0 10px; border:0; background:transparent; color:#E7D2FA; font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer; }

/* 2026-09-30 패널 구조 확정 — 그룹 탭 = 곡 전체 목록 · 아래 고정 미니 플레이어(곡명·⏯·⏭) */
.mood-tabs{ position:sticky; top:-10px; z-index:1; margin:-10px -10px 0; padding:10px 10px 6px; background:#FAF6F1; }
.mood-tab{ font-size:.8rem; }
.mood-songs{ display:flex; flex-direction:column; }
.mood-row{ display:flex; align-items:center; min-height:48px; border-radius:12px; padding:0 0 0 4px; }
.mood-row.is-now{ background:#EFE4F8; }
.mood-row-play{
  flex:1 1 auto; min-width:0; min-height:48px; display:flex; align-items:center; gap:8px; padding:0 6px;
  border:0; background:transparent; color:inherit; font-family:inherit; text-align:left; cursor:pointer;
}
.mood-row-mark{ flex:0 0 14px; font-size:.72rem; color:#A985D8; text-align:center; }
.mood-row-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.mood-row.is-now .mood-row-name{ font-weight:700; }
.bgm-mini{
  flex:1 1 100%; display:flex; align-items:center; gap:6px; min-height:52px; padding:0 4px 0 12px;
  border-radius:14px; background:#EADCF6;
}
.bgm-mini[hidden]{ display:none; }
.bgm-mini-title{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; font-weight:600; }
.bgm-foot .bgm-mini button{
  flex:0 0 auto; width:48px; min-height:48px; border:0; border-radius:12px; background:transparent; font-size:1.05rem; color:#3C2945;
}
.bgm-foot .bgm-mini button:disabled{ opacity:.4; }
.bgm-foot{ flex-wrap:wrap; }
.bgm-foot button[hidden]{ display:none; }

/* 2026-09-30 🔀 셔플 토글 — 선 아이콘. 꺼짐 = 보라 테두리만 · 켜짐 = 보라 채움(흰 아이콘) — 한눈에 갈리게 */
.mood-shuf-toggle{
  display:inline-flex; align-items:center; justify-content:center; opacity:1;
  border:2px solid #A985D8; background:transparent; color:#A985D8;
}
.mood-shuf-toggle svg{ display:block; }
.mood-shuf-toggle.is-on{ background:#A985D8; border-color:#A985D8; color:#fff; }