/* music 묶음 꾸미개 —— 음악실 목록(/music)에만 걸린다 (.mr-mb 안쪽만).
   틀(카드·제목·탭·행·쪽번호)은 원본 꾸미개 그대로 두고, 원본에 없는 재생기띠·고르기 줄·재생목록만 여기서 꾸민다.
   재생기띠 바탕은 원본 푸터 그림(footer-bg.png)이고, 단추는 흰 테 동그라미, 눌린 단추·마우스는 원본 메뉴의 노란색(#ffd400),
   시간줄의 찬 부분은 원본 제목 밑줄의 분홍(#ffcbdd)이다.
   유튜브 화면은 감추거나 덮지 않고 200×200 아래로 줄이지 않는다 (공식 재생기 규정). */

/* ── 재생기띠 ─────────────────────────────────────────── */
.mr-mb .mr-mb-player{
  display:flex;
  align-items:stretch;
  gap:16px;
  margin:4px 0 14px;
  padding:8px;
  border-radius:10px;
  background:#5f3abc url(/assets/images/footer-bg.png) center/cover no-repeat;
  color:#fff;
}
.mr-mb .mr-mb-screen{
  flex:0 0 356px;
  width:356px;
  height:200px;
  background:#000;
  border-radius:4px;
  overflow:hidden;
}
.mr-mb .mr-mb-screen > *{display:block;width:100%;height:100%;border:0}
.mr-mb .mr-mb-ctl{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:4px 6px;
}
.mr-mb .mr-mb-now{
  text-align:center;
  font-size:1.05rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.mr-mb .mr-mb-now strong{color:#fff}
.mr-mb .mr-mb-pre{color:#ffcbdd}
.mr-mb .mr-mb-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}

/* 단추 —— 흰 테 동그라미. 마우스·눌린 상태(한곡반복·임의로 재생)는 노란색 */
.mr-mb .mr-mb-b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:30px;
  height:30px;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:12px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:color .15s,border-color .15s,background-color .15s;
}
.mr-mb .mr-mb-b:hover,.mr-mb .mr-mb-b:focus-visible,.mr-mb .mr-mb-b.on{color:#ffd400;border-color:#ffd400}
.mr-mb .mr-mb-b.on{background:rgba(255,212,0,.16)}
.mr-mb .mr-mb-b:focus-visible{outline:2px solid #ffd400;outline-offset:2px}
.mr-mb .mr-mb-big{width:40px;height:40px;border-width:3px;font-size:15px}
.mr-mb .mr-mb-big .fa-play{margin-left:2px}
.mr-mb .mr-mb-sm{width:26px;height:26px;font-size:11px}

/* 시간줄·소리 */
.mr-mb .mr-mb-time{display:flex;align-items:center;gap:8px}
.mr-mb .mr-mb-tt{flex:none;min-width:40px;font-size:.85rem;font-variant-numeric:tabular-nums;text-align:center}
.mr-mb .mr-mb-tl{position:relative;flex:1 1 120px;min-width:60px;height:20px}
.mr-mb .mr-mb-track{position:absolute;left:0;right:0;top:7px;height:6px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.mr-mb .mr-mb-fill{width:0;height:100%;border-radius:3px;background:#ffcbdd}
.mr-mb input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.mr-mb input[type=range]:focus{outline:0}
.mr-mb input[type=range]:focus-visible{outline:2px solid #ffd400;outline-offset:3px;border-radius:3px}
.mr-mb #mb_tl{position:absolute;left:0;top:0;width:100%;height:20px}
.mr-mb #mb_tl::-webkit-slider-runnable-track{background:transparent;border:0}
.mr-mb #mb_tl::-moz-range-track{background:transparent;border:0}
.mr-mb input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;margin-top:0;border:0;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.35);
}
.mr-mb input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border:0;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.35);
}
.mr-mb .mr-mb-vol{display:inline-flex;align-items:center;gap:6px;flex:none}
/* 소리막대 —— 찬 부분(--p, music-board.js 가 단다)은 분홍, 나머지는 옅은 흰빛 */
.mr-mb #mb_vol{
  width:80px;height:6px;border-radius:3px;
  background:linear-gradient(to right,#ffcbdd 0,#ffcbdd var(--p,100%),rgba(255,255,255,.3) var(--p,100%),rgba(255,255,255,.3) 100%);
}
.mr-mb #mb_vol::-webkit-slider-thumb{width:12px;height:12px}
.mr-mb #mb_vol::-moz-range-thumb{width:12px;height:12px}
.mr-mb .mr-mb-count{text-align:center;font-size:.85rem}
.mr-mb .mr-mb-hint{text-align:center;font-size:.85rem;color:#ffd400}
.mr-mb .mr-mb-hint[hidden]{display:none}

/* ── 고르기·찾기 줄 ─────────────────────────────────────── */
.mr-mb .mr-mb-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:4px 12px 10px;
  border-bottom:1px solid #dfdfdf;
}
.mr-mb .mr-mb-all{display:inline-flex;align-items:center;gap:6px;margin:0 4px 0 0;font-size:.9rem;cursor:pointer;color:#4c524c}
.mr-mb .mr-mb-all .form-check-input{margin:0}
.mr-mb .mr-mb-bar .badge{border:0;padding:.45em .8em;cursor:pointer}
.mr-mb .mr-mb-bar .badge.btn-danger:hover{background-color:#f32f8b}
.mr-mb .mr-mb-bar .badge:focus-visible{outline:2px solid #f32f8b;outline-offset:2px}
.mr-mb .mr-mb-n{margin-left:auto}
.mr-mb .mr-mb-find{display:flex;align-items:center;gap:4px;margin:0}
.mr-mb .mr-mb-find .form-control{width:170px}
.mr-mb .mr-mb-find .form-control:focus{border-color:#f9a1c8;box-shadow:0 0 0 .2rem rgba(243,47,139,.2)}
.mr-mb .mr-mb-find [hidden]{display:none}

/* 고르기 칸 —— 원본 분홍 */
.mr-mb .form-check-input{flex:none;cursor:pointer}
.mr-mb .form-check-input:checked{background-color:#f32f8b;border-color:#f32f8b}
.mr-mb .form-check-input:focus{border-color:#f9a1c8;box-shadow:0 0 0 .2rem rgba(243,47,139,.25)}
.mr-mb .form-check-input:disabled{cursor:default}

/* ── 노래 줄 (원본 news-list-property 우에) ───────────────────── */
.mr-mb .mr-mb-row{transition:box-shadow .5s ease}
.mr-mb .mr-mb-l{align-items:center;gap:8px}
.mr-mb .mr-mb-chk{margin:0}
.mr-mb .mr-mb-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mr-mb .mr-mb-ic{flex:none;display:inline-flex;gap:12px;margin-left:auto;padding-left:8px}
.mr-mb .mr-mb-ic a{color:#73b9b6;transition:color .15s,transform .15s}
.mr-mb .mr-mb-ic a:hover,.mr-mb .mr-mb-ic a:focus-visible{color:#f32f8b}
.mr-mb .mr-mb-row:hover{box-shadow:2px 2px 22px -8px pink inset}
/* 지금 노래 —— 원본 첫페지 항목에 마우스를 올린 모양(분홍 안그림자 + 왼쪽 2px #7989f9). 테두리 대신 그림자로 그어 글자가 밀리지 않게 */
.mr-mb .mr-mb-row.mr-mb-cur{box-shadow:inset 2px 0 0 #7989f9,2px 2px 22px -8px pink inset}
.mr-mb .mr-mb-row.mr-mb-cur .mr-mb-t,.mr-mb .mr-mb-row.mr-mb-cur .mr-mb-t strong{color:#f32f8b}
.mr-mb .mr-mb-none{padding:20px 0}

/* 소리막대 다섯 —— 지금 노래 줄에만 보이고, 소리가 나는 동안만 출렁인다 (실제 소리세기는 유튜브 틀 안이라 읽지 못해 흉내낸다) */
.mr-mb .mr-mb-eq{display:inline-flex;align-items:flex-end;justify-content:center;gap:2px;flex:none;width:14px;height:14px;visibility:hidden}
.mr-mb .mr-mb-eq i{display:block;width:2px;height:100%;border-radius:1px;background:#f32f8b;transform:scaleY(.3);transform-origin:50% 100%}
.mr-mb .mr-mb-cur .mr-mb-eq{visibility:visible}
.mr-mb.mr-mb-on .mr-mb-cur .mr-mb-eq i{animation:mr-mb-eq1 1.05s ease-in-out infinite}
.mr-mb.mr-mb-on .mr-mb-cur .mr-mb-eq i:nth-child(2){animation:mr-mb-eq2 .9s ease-in-out -.3s infinite}
.mr-mb.mr-mb-on .mr-mb-cur .mr-mb-eq i:nth-child(3){animation:mr-mb-eq3 1.2s ease-in-out -.6s infinite}
.mr-mb.mr-mb-on .mr-mb-cur .mr-mb-eq i:nth-child(4){animation:mr-mb-eq2 1s ease-in-out -.15s infinite}
.mr-mb.mr-mb-on .mr-mb-cur .mr-mb-eq i:nth-child(5){animation:mr-mb-eq1 .85s ease-in-out -.45s infinite}
@keyframes mr-mb-eq1{0%,100%{transform:scaleY(.3)}20%{transform:scaleY(.95)}45%{transform:scaleY(.45)}70%{transform:scaleY(.8)}}
@keyframes mr-mb-eq2{0%,100%{transform:scaleY(.55)}30%{transform:scaleY(.25)}55%{transform:scaleY(1)}80%{transform:scaleY(.4)}}
@keyframes mr-mb-eq3{0%,100%{transform:scaleY(.8)}25%{transform:scaleY(.35)}50%{transform:scaleY(.9)}75%{transform:scaleY(.3)}}

/* ── 재생목록 (원본 오른쪽 작은 목록 자리) ─────────────────────── */
.mr-mb .mr-mb-qinfo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 -.75rem;padding:8px 2px 2px}
.mr-mb .mr-mb-qtg{display:none;align-items:center;gap:6px;padding:2px 12px;border:1px solid #ffcbdd;border-radius:12px;background:#fff;color:#f32f8b;cursor:pointer}
.mr-mb .mr-mb-qtg:focus-visible{outline:2px solid #f32f8b;outline-offset:2px}
/* 재생목록 상자 —— 넓은 화면에서는 오른쪽 칸을 세로 띠로 세워 상자가 왼쪽 목록 높이만큼 내려온다
   (예전에는 560 으로 묶고 스크롤띠가 연분홍이라 열댓 곡에서 끝난것처럼 보였다). 스크롤띠는 눈에 띄는 분홍 */
.mr-mb .mr-mb-queue{
  position:relative;
  margin:0 -.75rem;
  padding-right:4px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:auto;
  scrollbar-color:#f399c2 #fdf0f5;
}
@media (min-width:768px){
  .mr-mb .mr-mb-side{display:flex;flex-direction:column}
  .mr-mb .mr-mb-queue{flex:1 1 0;min-height:420px}
}
.mr-mb .mr-mb-queue > .row{margin-left:0;margin-right:0}
/* 왼쪽 안쪽 여백 10 —— 지금 곡 줄의 보라 세로줄(inset 2px) 우에 소리막대·♫ 가 겹쳐 넘어가지 않게 */
.mr-mb .row.mr-mb-q{flex-wrap:nowrap;align-items:center;padding:8px 0 8px 10px;border-bottom:1px solid #f1f1f1}
.mr-mb .row.mr-mb-q > a{flex:1 1 auto;width:auto;min-width:0;overflow-wrap:anywhere}
.mr-mb .row.mr-mb-q > .mr-mb-x{
  flex:none;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#b9b9b9;
  font-size:12px;
  cursor:pointer;
}
.mr-mb .row.mr-mb-q > .mr-mb-x:hover,.mr-mb .row.mr-mb-q > .mr-mb-x:focus-visible{color:#f32f8b;background:#fdeef5}
.mr-mb .mr-mb-q .fa-music{width:14px;text-align:center}
.mr-mb .mr-mb-q .mr-mb-eq{display:none;vertical-align:-1px}
.mr-mb .mr-mb-q.mr-mb-cur{background:#fff5f9;box-shadow:inset 2px 0 0 #7989f9}
.mr-mb .mr-mb-q.mr-mb-cur .fa-music{display:none}
/* 지금 노래는 뺄수 없으므로 ✕ 를 감춘다 (자리는 남겨 줄 너비가 같다) */
.mr-mb .mr-mb-q.mr-mb-cur > .mr-mb-x{visibility:hidden;pointer-events:none}
.mr-mb .mr-mb-q.mr-mb-cur .mr-mb-eq{display:inline-flex}
.mr-mb .mr-mb-q.mr-mb-cur .text-title,.mr-mb .mr-mb-q.mr-mb-cur .text-title strong{color:#f32f8b}
.mr-mb .mr-mb-q:hover .text-title{color:#f32f8b}

/* ── 좁은 화면 ─────────────────────────────────────────── */
/* 1200 아래는 칸이 좁아 재생기띠를 아래우로 쌓는다 —— 화면은 가로 480 까지, 가운데 */
@media (max-width:1199.98px){
  .mr-mb .mr-mb-player{flex-direction:column;gap:10px}
  .mr-mb .mr-mb-screen{flex:none;width:100%;max-width:480px;height:auto;aspect-ratio:16/9;min-height:200px;margin:0 auto}
  .mr-mb .mr-mb-ctl{padding:0 4px 4px}
}
@media (max-width:767.98px){
  /* 카드 여백(p-5)만 줄여 재생기 화면을 넓힌다 (가로·세로 200 이상) */
  .mr-mb > .row.p-5{padding:16px 8px !important}
  .mr-mb .nav-tabs .nav-link{padding:.4rem .6rem}
  .mr-mb #mb_vol{display:none}
  .mr-mb .mr-mb-bar{padding:6px 4px 10px}
  .mr-mb .mr-mb-find{flex:1 1 100%}
  .mr-mb .mr-mb-find .form-control{flex:1 1 auto;width:auto;min-width:0}
  /* parts/list.css 는 손전화에서 원본 행의 d-flex 를 접어 내리지만(목록그림 밑으로 제목), 음악실 줄은 그림이 없으니 한줄로 둔다 */
  .mr-mb .news-list-property.mr-mb-row > .d-flex{flex-wrap:nowrap}
  /* 좁은 화면에서는 줄 좌우 들여쓰기(mx-3)를 거두어 제목 자리를 넓힌다 */
  .mr-mb .mr-mb-row.mx-3,.mr-mb .mr-mb-none.mx-3,.mr-mb .mr-mb-bar.mx-3{margin-left:0 !important;margin-right:0 !important}
  .mr-mb .mr-mb-row > .col-md-2{padding-left:calc(.75rem + 1em + 30px)}
  .mr-mb .mr-mb-side{border-top:1px solid #dfdfdf;margin-top:12px}
  .mr-mb .mr-mb-qtg{display:inline-flex}
  .mr-mb .mr-mb-side:not(.mr-mb-open) .mr-mb-queue{display:none}
  .mr-mb .mr-mb-queue{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){
  .mr-mb .mr-mb-eq i,.mr-mb.mr-mb-on .mr-mb-cur .mr-mb-eq i{animation:none !important;transform:scaleY(.6)}
  .mr-mb .mr-mb-row,.mr-mb .mr-mb-b{transition:none}
}