/* 상단바 음악 막대: [작은 플레이어][검색칸][지금 곡][⏮ ⏯ ⏭ ▾]. 무드 버튼·곡 목록은 아래로 펼쳐진다.
   플레이어(iframe)는 옮기면 재생이 끊기므로 자리를 바꾸지 않고 크기만 바꾼다. */
.music-dock-mount { flex:none; min-width:0; }
.music-dock {
  position:relative; display:flex; align-items:center; gap:6px; height:40px; padding:3px 4px 3px 3px;
  border:1px solid #eac9d32e; border-radius:12px; background:#00000040; color:#f4ecfa;
}
.music-dock.playing { border-color:#cfaef566; box-shadow:0 0 12px -4px #b78ee8aa; }
.music-video { flex:none; width:56px; height:32px; border-radius:8px; overflow:hidden; background:#120e16; display:grid; place-items:center; }
.music-video:empty::after { content:'♪'; color:#cfaef5aa; font-size:15px; }
.music-video iframe { width:100%; height:100%; border:0; display:block; }

.music-form { position:relative; display:flex; align-items:center; flex:none; }
.music-search-icon { position:absolute; left:9px; color:#cfaef5aa; font-size:12px; pointer-events:none; }
.music-input {
  width:150px; height:30px; padding:0 10px 0 24px; border:1px solid #cfaef533; border-radius:9px;
  background:#140f19cc; color:#f4ecfa; font:inherit; font-size:12.5px; transition:width .18s ease, border-color .15s ease;
}
.music-input::-webkit-search-cancel-button { display:none; }
.music-input:focus { outline:none; width:210px; border-color:#cfaef5aa; }

.music-now { display:none; min-width:0; max-width:170px; line-height:1.15; }
.music-dock.has-track .music-now { display:grid; }
.music-now-title { font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-now-artist { font-size:10.5px; color:#cbbfd6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-controls { display:flex; flex:none; }
.music-btn { width:28px; height:28px; padding:0; border:0; border-radius:50%; background:none; color:#efe3fa; font-size:13px; cursor:pointer; }
.music-btn:hover { background:#ffffff14; }
.music-btn:focus-visible { outline:2px solid #d8c2f3; outline-offset:1px; }
.music-toggle { background:#cfaef526; }
.music-dock.picking .music-toggle { animation:music-spin 1s linear infinite; }

/* 아래로 펼치는 칸: 무드 버튼·상태·곡 목록 */
.music-pop {
  display:none; position:absolute; z-index:30; top:calc(100% + 8px); left:0; width:min(380px, calc(100vw - 20px));
  gap:9px; padding:10px; border:1px solid #cfaef54d; border-radius:16px;
  background:linear-gradient(160deg,#3a2c45f7,#241c2cfa); box-shadow:0 18px 40px -12px #000c, 0 0 0 1px #00000040;
  animation:music-pop .16s ease-out;
}
.music-dock.open .music-pop { display:grid; }
@keyframes music-pop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.music-chips { display:flex; flex-wrap:wrap; gap:5px; }
.music-chip { padding:4px 10px; border:1px solid #cfaef540; border-radius:999px; background:#ffffff0a; color:#e6d8f3; font-size:12px; cursor:pointer; }
.music-chip:hover { border-color:#cfaef599; }
.music-status { margin:0; font-size:12px; color:#cbbfd6; }
.music-status:empty { display:none; }
.music-dock.picking .music-status::after { content:''; display:inline-block; width:10px; height:10px; margin-left:6px; border:2px solid #cfaef5; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:music-spin .8s linear infinite; }
@keyframes music-spin { to { transform:rotate(360deg); } }
.music-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:min(46vh, 340px); overflow:auto; }
.music-list:empty { display:none; }
.music-track { width:100%; display:grid; grid-template-columns:44px minmax(0,1fr); gap:9px; align-items:center; padding:5px; border:0; border-radius:10px; background:none; color:inherit; text-align:left; cursor:pointer; }
.music-track:hover { background:#ffffff0d; }
.music-list li.current .music-track { background:#cfaef51f; box-shadow:inset 3px 0 0 #cfaef5; }
.music-list li.blocked { opacity:.45; }
.music-track img, .music-thumb-empty { width:44px; height:33px; border-radius:6px; object-fit:cover; background:#140f19; display:grid; place-items:center; color:#cfaef5; }
.music-track-text { display:grid; min-width:0; }
.music-track-text b { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-track-text small { font-size:11px; color:#b9adc5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 휴대폰·태블릿: 둘째 줄에서 음악 막대가 앞, 시세 띠는 남은 폭에서 옆으로 밀어 본다 */
@media (max-width:1100px) {
  .music-dock { height:36px; gap:4px; }
  .music-video { width:48px; height:28px; }
  .music-input { width:110px; height:28px; }
  .music-input:focus { width:160px; }
  .music-now { max-width:110px; }
}
@media (max-width:600px) {
  .music-dock.has-track .music-now { display:none; }
  .music-btn { width:26px; height:26px; }
  .music-pop { width:calc(100vw - 24px); }
}
@media (prefers-reduced-motion:reduce) { .music-pop, .music-dock.picking .music-toggle, .music-dock.picking .music-status::after { animation:none; } .music-input { transition:none; } }