.mini_wrap{max-width:800px;font-family:'맑은 고딕','돋움',sans-serif;position:relative}

/* ===== 바(bar) ===== */
.mini_bar{
  display:flex !important;align-items:center !important;gap:8px;flex-wrap:nowrap !important;
  background:#2b2f3a;color:#fff;border-radius:30px;
  padding:3px 12px;font-size:14px; /*연주기 버튼부분 여유 원래는 6px - 3px로 수정함*/
}
.mini_bar button{
  background:transparent;border:none;color:#bbb;cursor:pointer; /*연주기 버튼 색상 */
  width:26px !important;
:26px !important;display:inline-flex !important;align-items:center;justify-content:center;
  font-size:14px;border-radius:50%;vertical-align:middle;
}
.mini_bar button:hover{color:#fff;background:rgba(255,255,255,0.12)}
.mini_bar button.on{color:#ff4d8d}
.mini_bar button.main{background:#fff;color:#222;width:28px;height:28px}
.mini_bar button.main:hover{background:#eee}

.mini_time{
  background:#1b1e26;border-radius:14px;padding:3px 10px;
  font-size:11px;color:#00ff00;white-space:nowrap;flex-shrink:0; /*앞자리 타이머 색색*/
}
.mini_time .dur{color:#ff0000;margin-left:4px}/*뒷자리 타이머*/

.mini_title{
  flex:1;min-width:0;overflow:hidden;position:relative;
  font-weight:nomal;color:#fff;cursor:default;height:18px; /*제목색상 및 bold*/
}
.mini_title span{
  display:inline-block;white-space:nowrap;
  position:absolute;left:0;
  animation:mini_marquee 12s linear infinite;
  animation-play-state:paused;
}
.mini_title.scrolling span{
  animation-play-state:running;
}
@keyframes mini_marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(calc(-100% + 0px));}
}

.mini_seek{flex:0 0 90px;accent-color:#ff4d8d}
.mini_vol{flex:0 0 60px;accent-color:#8fd6ff}

/* ===== 목록 패널 ===== */
.mini_list_panel{
  display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid #ddd;border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);z-index:1000;overflow:hidden;
}
.mini_list_panel.open{display:block}
.mini_list_items{list-style:none !important;margin:0 !important;padding:6px 0 !important;max-height:340px;overflow-y:auto}
.mini_list_items li{
  list-style:none !important;margin:0 !important;
  padding:6px 14px !important;font-size:13px;color:#333;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mini_list_items li:hover{background:#f5f5f5}
.mini_list_items li.playing{background:#ffeef4;color:#d81b60;font-weight:bold}

.mini_list_footer{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:8px;border-top:1px solid #eee;background:#fafafa;font-size:12px;color:#555;
}
.mini_list_footer button{
  background:#fff;border:1px solid #ccc;border-radius:14px;padding:3px 10px;cursor:pointer;font-size:12px;
}
.mini_list_footer button:disabled{opacity:0.4;cursor:default}