/* playerpop.css — (v4.2.0) 플레이어 팝업 · 플로팅 프레임. 마크업 · 동작은 js/player.js. 색은 layout.css 토큰 + 아래 --mp-* (어둡게 값, 밝게 = theme.css).
   z-index: 도트 띠 25 < 플로팅 프레임 45 < 가장자리 빛 띠 46 < 디스클레이머 팝업(#foot) 50 < 팝업 배경 800 < 팝업 안 프레임 810 < 트윗 시트 900.
   프레임(.mp-frame)은 한 번 만들고 옮기지 않는다 — 팝업일 땐 JS 가 .mp-slot 자리에 맞춰 위치를 주고, 내리면 .is-float 로 CSS 위치(오른쪽 아래)를 쓴다. */

:root {
  --mp-accent: #a99be6;
  --mp-accent-fg: #121018;
  --mp-panel-2: #242429;
  --mp-well: #0e0e11;                     /* 재생목록 우물 바탕 · 그늘 · 가장자리 빛 */
  --mp-well-sh1: rgba(0, 0, 0, 0.75);
  --mp-well-sh2: rgba(0, 0, 0, 0.55);
  --mp-well-hi: rgba(255, 255, 255, 0.07);
  --mp-well-line: rgba(255, 255, 255, 0.06);
  --mp-float-w: 356px;
  --mp-float-h: 200px;   /* YouTube 임베드 최소 200×200 */
  --mp-foot: 45px;       /* 고정 푸터(#foot) 높이 — 플로팅 프레임이 푸터에 가려지지 않게 */
}

html.mp-lock { overflow: hidden; }

.mp-mono { font-family: ui-monospace, "DM Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }

/* ── 팝업 ─────────────────────────────────────────────────────────── */
.mp-scrim {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}
.mp-scrim[hidden] { display: none; }

.mp-pop {
  width: min(920px, 100%);
  height: min(680px, calc(100% - 8px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.mp-pop button { color: inherit; }
.mp-pop :focus-visible,
.mp-frame :focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

.mp-pop__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.mp-pop__title { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 700; }
.mp-x {
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.78rem;
}
.mp-x:hover { border-color: var(--color-text-muted); }

.mp-pop__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 0;
}

/* ── 재생부 ───────────────────────────────────────────────────────── */
.mp-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}
.mp-slot {                       /* 프레임이 이 위에 겹쳐 놓인다. 최소 높이 = 임베드 최소 크기 */
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  border-radius: 8px;
  background: #000;
}
.mp-song__title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
/* (v4.8.3) 곡 정보 줄 — 왼쪽 제목 · 메타 · 한글, 오른쪽 [음원 | MV] 전환. 모바일에서도 같은 줄, 제목은 줄바꿈 */
.mp-song { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.mp-song__txt { flex: 1; min-width: 0; }
/* (v4.8.4) [음원 | MV] 스위치 — 버튼 하나(role=switch). 두 칸 각 72px · 높이 42px(테두리 포함) · 패딩 3px.
   손잡이(.mp-media__thumb) = 칸 하나 크기 accent 배경, .is-mv 면 옆 칸으로 밀린다. 시안 v484canvas/project/Main.dc.html 과 같은 모양 · 움직임 */
.mp-media {
  position: relative; flex: none; display: inline-grid; grid-template-columns: 72px 72px; box-sizing: border-box;
  height: 42px; padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--mp-panel-2);
  color: var(--color-text-muted); cursor: pointer; transition: transform 0.12s ease;
}
.mp-media:active { transform: scale(0.96); }
.mp-media:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 3px; }
.mp-media__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: 72px; border-radius: 999px;
  background: var(--mp-accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--mp-accent) 35%, transparent);
  transition: transform 0.34s cubic-bezier(0.3, 1.35, 0.5, 1);
}
.mp-media.is-mv .mp-media__thumb { transform: translateX(72px); }
.mp-media__lab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 0.8rem; font-weight: 700; white-space: nowrap; transition: color 0.22s ease;
}
.mp-media:not(.is-mv) .mp-media__lab--a, .mp-media.is-mv .mp-media__lab--m { color: var(--mp-accent-fg); }
.mp-media__lab .mp-ico { width: 14px; height: 14px; transition: transform 0.34s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mp-media:not(.is-mv) .mp-media__lab--a .mp-ico, .mp-media.is-mv .mp-media__lab--m .mp-ico { transform: scale(1.18); }
@media (prefers-reduced-motion: reduce) {
  .mp-media, .mp-media__thumb, .mp-media__lab, .mp-media__lab .mp-ico { transition: none; }
  .mp-media:active { transform: none; }
}
/* 전환 버튼 아래 말풍선 — 재생 중 전환(「다음 영상부터 …」) · MV 첫 안내. 오른쪽 정렬, 위로 꼬리. 시간은 js/player.js showMediaTip 이 animation-duration 으로 준다 */
.mp-mvtip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; background: var(--mp-accent); color: var(--mp-accent-fg);
  font-size: 0.78rem; font-weight: 700; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.mp-mvtip[hidden] { display: none; }
.mp-mvtip small { display: block; margin-top: 2px; font-size: 0.68rem; font-weight: 500; opacity: 0.85; }   /* 재생 중 전환 + MV 첫 안내가 겹칠 때 둘째 줄 */
.mp-mvtip small[hidden] { display: none; }
.mp-mvtip::after {
  content: ""; position: absolute; right: 22px; bottom: 100%; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--mp-accent);
}
.mp-mvtip.is-on { animation: mp-mvtip 4.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes mp-mvtip { 0% { opacity: 0; transform: translateY(-6px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.mp-song__ko { margin-top: 2px; font-size: 0.74rem; line-height: 1.5; color: var(--color-text-muted); overflow-wrap: anywhere; }
.mp-song__meta { margin-top: 4px; font-size: 0.74rem; line-height: 1.5; color: var(--color-text-muted); overflow-wrap: anywhere; }
.mp-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--mc, var(--color-text-muted));
  vertical-align: baseline;
}
.mp-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 0.7rem; color: var(--color-text-muted); }
.mp-track {
  position: relative;
  height: 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--mp-panel-2);
  cursor: pointer;
  touch-action: none;   /* 터치로 끌 때 페이지 스크롤이 가로채지 않게 */
}
.mp-track::before { content: ""; position: absolute; inset: -10px 0; }   /* 끌기 · 누르기 영역을 위아래로 넓힌다 */
.mp-track.is-drag { cursor: grabbing; }
.mp-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: var(--mp-accent); }
/* (마이크로 인터랙션) 손가락으로 끄는 동안(.is-touch)만 — 손잡이가 커지고, 손가락 위로 시간 말풍선이 따라온다 */
.mp-track__th {
  position: absolute; top: 50%; left: 0; width: 0; height: 0; border-radius: 50%; translate: -50% -50%; pointer-events: none;
  background: var(--color-text); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mp-accent) 30%, transparent); opacity: 0;
  transition: width 0.18s cubic-bezier(0.25, 1.55, 0.45, 1), height 0.18s cubic-bezier(0.25, 1.55, 0.45, 1), opacity 0.12s;
}
.mp-track.is-touch .mp-track__th { width: 22px; height: 22px; opacity: 1; }
.mp-track__tip {
  position: absolute; bottom: calc(100% + 30px); left: 0; z-index: 3; pointer-events: none; white-space: nowrap;
  padding: 5px 10px; border-radius: 8px; background: var(--color-text); color: var(--color-bg-secondary);
  font-size: 0.95rem; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(6px); transition: opacity 0.15s, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mp-track.is-touch .mp-track__tip { opacity: 1; transform: none; }
.mp-track__tip.is-tick { animation: mp-tip-tick 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes mp-tip-tick { 40% { scale: 1.12; } }
.mp-ctl { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 8px; }
/* (마이크로 인터랙션) 반복 · 셔플을 누르면 그 버튼 위에 바뀐 상태 + 다음 동작이 1.8초 뜬다(js/player.js sayCtl) */
.mp-ctltip {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 6; pointer-events: none; white-space: nowrap; text-align: center;
  padding: 5px 10px; border-radius: 8px; background: var(--color-raised); border: 1px solid var(--color-raised-edge);
  color: var(--color-text); font-size: 0.78rem; font-weight: 700; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden;
}
.mp-ctltip small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--color-text-muted); }
.mp-ctltip::after {
  content: ""; position: absolute; left: calc(var(--tail-x, 50%) - 5px); top: 100%;
  border: 5px solid transparent; border-top-color: var(--color-raised-edge); border-bottom: 0;
}
.mp-ctltip.is-on { visibility: visible; animation: mp-ctltip 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes mp-ctltip { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.mp-tog.is-bop { animation: mp-bop 0.32s cubic-bezier(0.25, 1.55, 0.45, 1); }
@keyframes mp-bop { 40% { transform: scale(0.84); } }
.mp-tog svg.is-spin { animation: mp-spin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes mp-spin { from { transform: rotate(-200deg); } }
.mp-grp { display: flex; align-items: center; gap: 6px; }
.mp-btn, .mp-tog, .mp-main {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--mp-panel-2);
}
.mp-main { width: 50px; height: 50px; background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-fg) !important; }
.mp-tog[aria-pressed="true"] { border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-ico { width: 18px; height: 18px; display: block; }
.mp-ico--s { width: 16px; height: 16px; flex: none; }
.mp-ico--rpt { width: 26px; height: 26px; }   /* 반복 버튼 — 안의 「1」·「A」 글자가 잘 읽히도록 다른 아이콘(18px)보다 크게 */
/* ── 랜덤플리 오마카세 (v4.5.6) — 컨트롤 오른쪽 버튼 + 말풍선(전체/오리지널/커버). 쿨타임 파이는 BPM 오마카세와 같은 방식 ── */
.mp-oma-wrap { position: relative; }
.mp-oma {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 20px;
  background: var(--mp-panel-2); font-size: 0.74rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.mp-oma:hover:not(:disabled) { border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-oma:disabled { cursor: default; }
.mp-oma__e { display: inline-block; font-size: 1.05rem; line-height: 1; }
.mp-oma__t { display: inline-flex; }
.mp-oma__t i { font-style: normal; display: inline-block; white-space: pre; }
/* 뒤섞임: 버튼이 흔들리고 상자가 굴러가며, 글자는 JS 가 순서를 섞는다 */
.mp-oma.rolling { animation: mp-oma-shake 0.62s ease; border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-oma.rolling .mp-oma__e { animation: mp-oma-spin 0.62s cubic-bezier(0.4, 0.1, 0.3, 1); }
.mp-oma.rolling .mp-oma__t i { animation: mp-oma-jit 0.16s steps(2) infinite; }
.mp-oma.rolling .mp-oma__t i:nth-child(odd) { animation-delay: -0.08s; }
@keyframes mp-oma-shake { 0% { transform: none; } 15% { transform: translateX(-4px) rotate(-3deg); } 30% { transform: translateX(4px) rotate(3deg); } 45% { transform: translateX(-3px) rotate(-2deg); } 60% { transform: translateX(3px) rotate(2deg); } 80% { transform: translateX(-1px) rotate(-1deg); } 100% { transform: none; } }
@keyframes mp-oma-spin { to { transform: rotate(720deg) scale(1.15); } }
@keyframes mp-oma-jit { 0% { transform: translateY(-2px) rotate(-6deg); } 100% { transform: translateY(2px) rotate(6deg); } }
/* 쿨타임 5초 — 반투명 검정 막이 버튼을 덮고 있다가 오른쪽 끝부터 왼쪽으로 걷힌다(막의 오른쪽 가장자리가 오른쪽 → 왼쪽으로 이동) */
.mp-oma.cooldown::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(0, 0, 0, 0.55); transform-origin: left center;
  animation: mp-oma-wipe 5s linear forwards;
}
@keyframes mp-oma-wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .mp-oma.rolling, .mp-oma.rolling .mp-oma__e, .mp-oma.rolling .mp-oma__t i { animation: none; }
  .mp-oma.cooldown::after { animation: none; background: none; }
}
.mp-bubble {
  position: absolute; right: 50%; transform: translateX(50%); bottom: calc(100% + 10px); z-index: 5; width: 224px; padding: 10px 10px 11px;
  background: var(--color-raised); border: 1px solid var(--color-raised-edge); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.mp-bubble[hidden] { display: none; }
.mp-bubble::after {
  content: ""; position: absolute; right: calc(50% - 5px); top: 100%; width: 10px; height: 10px; margin-top: -5px;
  background: var(--color-raised); border: solid var(--color-raised-edge); border-width: 0 1px 1px 0; transform: rotate(45deg);
}
.mp-bubble__h { margin: 0 2px 8px; font-size: 0.7rem; color: var(--color-text-muted); }
.mp-bubble__chips { display: flex; gap: 6px; }
.mp-chip { flex: 1; padding: 7px 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--mp-panel-2); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.mp-chip:hover { border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-chip small { display: block; margin-top: 1px; font-size: 0.62rem; font-weight: 400; color: var(--color-text-muted); }
@media (max-width: 480px) {   /* 좁은 화면: 컨트롤 아래 줄 전체 폭으로 */
  .mp-oma-wrap { flex: 1 0 100%; }
  .mp-oma { width: 100%; justify-content: center; }
}
.mp-err { padding: 8px 10px; border: 1px solid var(--color-late); border-radius: 8px; font-size: 0.76rem; color: var(--color-late); }
.mp-err[hidden] { display: none; }
.mp-err a { text-decoration: underline; }
/* (v4.8.3) 재생 불가 안내 — 아이콘 · 문구 · 아래 3초 동안 줄어드는 막대. 플로팅 창이면 .is-fixed 로 창 바로 위에 뜬다(js/player.js placeSkip) */
.mp-skip {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 12px 10px; overflow: hidden;
  border-radius: 10px; background: var(--color-raised); border: 1px solid var(--color-late); color: var(--color-text);
  font-size: 0.76rem; line-height: 1.4; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.mp-skip[hidden] { display: none; }
.mp-skip.is-fixed { position: fixed; z-index: 47; margin: 0; max-width: calc(100vw - 16px); }
.mp-skip__ico {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-late); color: var(--color-late);
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 800;
}
.mp-skip__t { flex: 1; min-width: 0; }
.mp-skip__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-late); transform-origin: left; }
.mp-skip.is-on { animation: mp-skip-in 0.28s cubic-bezier(0.25, 1.55, 0.45, 1); }
.mp-skip.is-on .mp-skip__bar { animation: mp-undo-drain 3s linear forwards; }
@keyframes mp-skip-in { from { opacity: 0; transform: translateY(8px); } }
/* 재생목록 — 움푹 패인 우물. 바탕을 패널보다 어둡게 + 안쪽 위 그림자(빛이 위에서 와서 윗벽이 그늘짐) + 아래 테두리 바깥의 얇은 밝은 선(패인 가장자리에 걸린 빛). */
.mp-q {
  position: relative;   /* 되돌리기 알림(.mp-undo)의 기준 */
  display: flex; flex-direction: column; min-height: 0; flex: 1;
  padding: 8px 6px 6px 10px;
  border-radius: 10px;
  background: var(--mp-well);
  box-shadow:
    inset 0 3px 8px var(--mp-well-sh1),
    inset 0 0 0 1px var(--mp-well-sh2),
    0 1px 0 var(--mp-well-hi);
}
.mp-q__head { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px 0; font-size: 0.8rem; border-bottom: 1px solid var(--mp-well-line); }
.mp-q__count { color: var(--color-text-muted); font-size: 0.7rem; }
.mp-q__head .mp-link { margin-left: auto; font-size: 0.7rem; }
.mp-q__list { list-style: none; margin: 4px 0 0; padding: 0; overflow-y: auto; min-height: 0; max-height: 220px; display: grid; grid-auto-rows: max-content; }
.mp-q__empty { padding: 10px 4px; font-size: 0.7rem; line-height: 1.5; color: var(--color-text-muted); }
/* 재생목록 줄 = 밑판(.mp-q__under 「빼기」) 위에 윗판(.mp-q__fg). 모바일에서 윗판을 왼쪽으로 밀어 뺀다(js/player.js initQueueSwipe).
   윗판이 밑판을 가리도록 우물 바탕을 칠하고, 밑판은 미는 동안(.is-swiping)만 보인다. --p = 빼기 선까지 민 비율(0~1) */
.mp-q__item { position: relative; border-radius: 6px; overflow: hidden; }
.mp-q__fg {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 6px;
  background: var(--mp-well); transition: transform 0.4s cubic-bezier(0.25, 1.55, 0.45, 1);
}
.mp-q__item:hover .mp-q__fg { background: var(--mp-panel-2); }
.mp-q__item.is-cur .mp-q__fg { background: color-mix(in srgb, var(--mp-accent) 14%, var(--mp-well)); box-shadow: inset 2px 0 0 var(--mp-accent); }
.mp-q__under {
  position: absolute; inset: 0; border-radius: 6px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding-right: 14px;
  background: #e5384a; color: #fff; font-size: 0.72rem; font-weight: 700; opacity: 0;
}
.mp-q__under svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s cubic-bezier(0.25, 1.55, 0.45, 1); }
.mp-q__item.is-swiping .mp-q__under { opacity: calc(0.3 + var(--p, 0) * 0.7); }
.mp-q__item.is-swiping .mp-q__fg { transition: none; }
.mp-q__item.is-armed .mp-q__under svg { transform: scale(1.35); }
@media (max-width: 767px) { .mp-q__fg { touch-action: pan-y; } }
.mp-q__main { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; text-align: left; color: var(--color-text); font-size: 0.78rem; min-width: 0; }
.mp-q__n { text-align: right; font-size: 0.7rem; color: var(--color-text-muted); }
.mp-q__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-q__x { padding: 4px 8px; margin-right: 4px; font-size: 0.7rem; color: var(--color-text-muted); }
.mp-q__x:hover { color: var(--color-text); }
/* NEW 알약 — 빛이 지나가는 광택 + 은은한 맥박(번쩍임이 아니라 숨쉬듯). 움직임 줄이기 설정이면 멈춘다 */
.mp-new {
  display: inline-block; vertical-align: 1px; padding: 0 5px; border-radius: 999px; color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.03em;
  background: linear-gradient(110deg, #e5384a 38%, #ff9aa5 50%, #e5384a 62%) 0 0 / 260% 100%;
  animation: mp-new-shine 2.6s linear infinite, mp-new-pulse 1.8s ease-in-out infinite;
}
@keyframes mp-new-shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes mp-new-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 56, 74, 0.55); } 50% { box-shadow: 0 0 0 4px rgba(229, 56, 74, 0); } }
/* 곡 줄의 「재생목록 N번 / N번 외 K」 — 글자 수가 고정 상한이라 곡 줄 폭을 늘리지 못한다(긴 번호 목록은 툴팁 · aria-label 로만) */
.mp-q-badge {
  display: inline-block; flex: none; max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--mp-accent);
}

/* ── 모바일 탭 (곡 목록 | 재생목록) — PC 에서는 탭 바 숨김, 패널은 2열 그리드에 그대로 놓인다 ── */
.mp-tabs { display: flex; flex: none; border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.mp-pop .mp-tab {
  flex: 1; min-width: 0; padding: 11px 8px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent;
  font-size: 0.84rem; font-weight: 600; color: var(--color-text-muted);
}
.mp-pop .mp-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--mp-accent); }
.mp-pop .mp-tab:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -3px; }
.mp-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 5px;
  border-radius: 999px; background: var(--mp-accent); color: var(--mp-accent-fg);
  font-size: 0.68rem; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px;
}
.mp-badge.pulse { animation: mp-badge-pulse 0.5s ease-out; }
@keyframes mp-badge-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* 오른쪽(PC) / 아래(모바일) 한 칸 = 탭 바 + 패널(곡 목록 | 재생목록). 한쪽만 보여 서로 밀지 않는다. */
.mp-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mp-panels { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mp-qpanel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mp-qpanel .mp-q { flex: 1; border-radius: 0; margin: 0; }
.mp-q__list { flex: 1; max-height: none; }   /* 재생목록 탭: 칸을 채우고 그 안에서 스크롤 */
.mp-qpanel[hidden], .mp-lib[hidden] { display: none; }

/* ── 목록부 ───────────────────────────────────────────────────────── */
.mp-lib { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mp-tools { display: grid; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.mp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}
.mp-search:focus-within { border-color: var(--mp-accent); }
.mp-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-size: 16px;               /* iOS 입력 시 확대 방지 */
}
.mp-row2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 0.75rem; color: var(--color-text-muted); }
.mp-chips, .mp-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-chips button, .mp-sort button {
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.mp-sort button { border-radius: 6px; padding: 3px 8px; }
.mp-chips button[aria-pressed="true"] { border-color: var(--mp-accent); color: var(--mp-accent); background: color-mix(in srgb, var(--mp-accent) 12%, transparent); }
.mp-sort button[aria-pressed="true"] { border-color: var(--mp-accent); color: var(--color-text); }

.mp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px; display: grid; grid-auto-rows: max-content; }
.mp-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; border: 1px solid transparent; border-radius: 8px; }
.mp-item:hover { background: var(--mp-panel-2); }
.mp-item.is-cur { background: color-mix(in srgb, var(--mp-accent) 14%, transparent); border-color: color-mix(in srgb, var(--mp-accent) 40%, transparent); }
.mp-item__main { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; text-align: left; color: var(--color-text); min-width: 0; }
.mp-item__n { text-align: right; font-size: 1.15rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.mp-item__body { display: block; min-width: 0; }
.mp-item__title { display: block; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.mp-item__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; font-size: 0.7rem; color: var(--color-text-muted); }
.mp-item__ko { display: block; margin-top: 1px; font-size: 0.7rem; color: var(--color-text-muted); }
.mp-item__sub em { font-style: normal; }
/* (v4.8.3) MV 가 있는 곡 표시 — 곡 목록 줄의 날짜 뒤(재생목록 줄에는 안 붙인다) */
.mp-mvtag {
  display: inline-block; padding: 0 4px; border: 1px solid color-mix(in srgb, var(--mp-accent) 55%, transparent); border-radius: 4px;
  color: var(--mp-accent); font-size: 0.6rem; font-weight: 700; line-height: 1.5;
}
.mp-item__sub .mp-dot { margin-right: -4px; }
.mp-item mark { border-radius: 2px; background: color-mix(in srgb, var(--mp-accent) 35%, transparent); color: inherit; }
.mp-empty { padding: 28px 12px; text-align: center; color: var(--color-text-muted); }
.mp-link { text-decoration: underline; color: var(--mp-accent); }
.mp-count { padding: 6px 14px; border-top: 1px solid var(--color-border); font-size: 0.7rem; color: var(--color-text-muted); }

/* ── 프레임 (팝업 안 / 플로팅) ────────────────────────────────────── */
.mp-frame {
  position: fixed;
  z-index: 810;                  /* 팝업 안: 배경(800) 위 */
  display: flex;
  flex-direction: row;           /* 왼쪽 탭 · 본체 · 오른쪽 탭 (탭은 넣었을 때만 폭이 생긴다) */
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}
.mp-frame__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-frame[hidden] { display: none; }
.mp-yt { position: relative; flex: 1; min-height: 0; }
.mp-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mp-frame:not(.is-float) .mp-grip { display: none; }
.mp-frame.is-dock { z-index: 40; }   /* PC 도크: 고정 푸터(50)와 디스클레이머 팝업 아래로 — 페이지를 스크롤하면 푸터 밑으로 들어간다 */

/* ── PC 하단 도크 (≥768px) — 팝업 본체를 모달 대신 메인 화면 맨 아래에 상시 표시 ── */
#player-dock {
  max-width: var(--content-max);
  min-height: 700px;                              /* 모듈을 불러오기 전에도 자리를 잡아 스크롤 위치가 튀지 않게 */
  margin-inline: auto;
  padding: 0 var(--page-pad) calc(var(--mp-foot) + 24px);   /* 아래는 고정 푸터 높이만큼 비운다 */
}
#player-dock[hidden] { display: none; }
.mp-pop--dock { width: 100%; height: 700px; box-shadow: none; }
/* v4.2.2: 재생목록이 오른쪽 탭으로 빠져 왼쪽 칸은 영상 · 곡 정보 · 컨트롤뿐이다 — 재생부를 칸 폭 가득(최대 720px) 쓴다. v4.2.1 의 폭 420px 제한은 폐지. */
.mp-pop--dock .mp-slot { max-width: 720px; margin-inline: auto; }
.mp-pop--dock .mp-x { display: none; }          /* 내리기 버튼 — 도크는 내릴 수 없다 */

.mp-frame.is-float {
  z-index: 45;
  right: 16px;
  bottom: calc(var(--mp-foot) + 16px);
  width: auto;                   /* 폭은 본체(.mp-frame__main)가 정한다 — 넣으면 탭이 옆에 붙는다 */
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-secondary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.mp-frame.is-float .mp-frame__main { flex: none; width: min(var(--mp-float-w), calc(100vw - 32px)); min-width: 200px; }
.mp-frame.is-float .mp-yt { flex: none; height: var(--mp-float-h); background: #000; }

/* 손잡이 줄 — 프레임 "위"에 따로 붙는다(프레임을 덮지 않음). 끌기 · 더블클릭 = 팝업 열기 */
.mp-grip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 8px;
  background: var(--mp-panel-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  cursor: grab;
  touch-action: none;           /* 손잡이를 끌 때 페이지가 스크롤되지 않게 */
  user-select: none;
}
.mp-grip:active { cursor: grabbing; }
.mp-grip__title { flex: 1; min-width: 0; display: flex; align-items: baseline; color: var(--color-text); }
.mp-grip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-grip__pos { flex: none; margin-left: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.mp-grip__btns { display: flex; gap: 4px; }
.mp-gbtn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: 0.7rem;
}
.mp-gbtn .mp-ico { width: 11px; height: 11px; }

/* ── 모바일 가장자리 넣기 (v4.7.6) — 넣으면 영상 한쪽 끝(14px)과 손잡이 탭(24px)만 화면에 남는다. 넣은 동안 재생은 계속.
   수치 · 동작은 ref 데모(player-edge-tuck.html)와 같다. 넣기 · 꺼내기 JS 는 player.js (tuckFrame · untuckFrame · pullMove). ── */
.mp-frame.is-tuck-anim { transition: left 480ms cubic-bezier(0.3, 1.3, 0.4, 1), top 480ms cubic-bezier(0.3, 1.3, 0.4, 1), transform 480ms cubic-bezier(0.3, 1.3, 0.4, 1), box-shadow 140ms ease; }
.mp-frame.is-spring { transition: left 420ms cubic-bezier(0.25, 1.7, 0.45, 1), top 420ms cubic-bezier(0.25, 1.7, 0.45, 1), transform 420ms cubic-bezier(0.25, 1.7, 0.45, 1), box-shadow 140ms ease; }
.mp-frame.is-armed { box-shadow: 0 0 0 2px var(--mp-accent), 0 8px 30px rgba(0, 0, 0, 0.5); }

/* 넣은 탭 — 평소엔 폭 0. 넣었을 때 화면에 남는 쪽만 24px 로 펼치고, 영상과 맞닿는 쪽에 경계선을 긋는다. */
.mp-ftab {
  flex: none; width: 0; overflow: hidden; padding: 0; border: 0; border-radius: 0;
  background: var(--mp-panel-2); color: var(--color-text-muted);
  display: flex; justify-content: center; cursor: grab; touch-action: none;
  transition: width 260ms ease;
}
.mp-ftab__in { flex: none; width: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.mp-frame.is-float.is-tucked-l .mp-ftab--r { width: 24px; border-left: 1px solid var(--color-border); }
.mp-frame.is-float.is-tucked-r .mp-ftab--l { width: 24px; border-right: 1px solid var(--color-border); }
/* 넣은 동안 손잡이 줄 버튼은 안 눌린다 — 누른 자리는 손잡이 줄로 가서 꺼내기가 된다(JS 는 inert 로 키보드도 막는다) */
.mp-frame.is-float.is-tucked-l .mp-grip__btns, .mp-frame.is-float.is-tucked-r .mp-grip__btns { pointer-events: none; }
.mp-ftab__chev { width: 14px; height: 14px; color: var(--mp-accent); transition: transform 160ms ease; }
.mp-ftab--l .mp-ftab__chev { transform: scaleX(-1); }
.mp-ftab.is-ready .mp-ftab__chev { transform: translateX(3px); }
.mp-ftab--l.is-ready .mp-ftab__chev { transform: scaleX(-1) translateX(3px); }
.mp-ftab__eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.mp-ftab__eq i { width: 3px; height: 4px; border-radius: 1px; background: var(--mp-accent); }
.mp-frame.is-playing .mp-ftab__eq i { animation: mp-eq 900ms ease-in-out infinite; }
.mp-frame.is-playing .mp-ftab__eq i:nth-child(2) { animation-delay: -300ms; }
.mp-frame.is-playing .mp-ftab__eq i:nth-child(3) { animation-delay: -600ms; }
@keyframes mp-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* 가장자리 빛 띠 — 넣기 중 화면 끝에 생긴다(위치 · 높이는 JS). 넣은 뒤에는 gulp 로 쑥 들어간다. */
.mp-edge { position: fixed; z-index: 46; left: 0; width: 22px; --p: 0; pointer-events: none; opacity: 0; }
.mp-edge.is-r { left: auto; right: 0; }
.mp-edge.is-on, .mp-edge.is-gulp { opacity: 1; }
.mp-edge__glow { position: absolute; top: 0; bottom: 0; width: calc(4px + 18px * var(--p)); transition: width 70ms linear; }
.mp-edge.is-l .mp-edge__glow { left: 0; border-radius: 0 14px 14px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--mp-accent) calc(30% + 50% * var(--p)), transparent), transparent); }
.mp-edge.is-r .mp-edge__glow { right: 0; border-radius: 14px 0 0 14px; background: linear-gradient(270deg, color-mix(in srgb, var(--mp-accent) calc(30% + 50% * var(--p)), transparent), transparent); }
.mp-edge__lip { position: absolute; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--mp-accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); opacity: calc(0.45 + 0.55 * var(--p)); }
.mp-edge.is-l .mp-edge__lip { left: 0; }
.mp-edge.is-r .mp-edge__lip { right: 0; }
.mp-edge.is-armed .mp-edge__lip { width: 4px; box-shadow: 0 0 12px 2px var(--mp-accent); }
.mp-edge.is-bump .mp-edge__lip { animation: mp-edge-bump 260ms ease-out; }
.mp-edge.is-gulp .mp-edge__lip { animation: mp-edge-gulp 520ms ease-out forwards; }
.mp-edge.is-gulp .mp-edge__glow { animation: mp-edge-gulp-glow 520ms ease-out forwards; }
.mp-edge__chev { position: absolute; top: 50%; margin-top: -21px; display: grid; color: var(--mp-accent-fg); opacity: 0; transition: opacity 120ms; }
.mp-edge.is-l .mp-edge__chev { left: 5px; }
.mp-edge.is-r .mp-edge__chev { right: 5px; }
.mp-edge__chev svg { width: 12px; height: 14px; display: block; }
.mp-edge.is-r .mp-edge__chev svg { transform: scaleX(-1); }
.mp-edge.is-armed .mp-edge__chev { opacity: 1; }
.mp-edge.is-armed .mp-edge__chev svg { animation: mp-edge-chev-l 700ms ease-in-out infinite; }
.mp-edge.is-r.is-armed .mp-edge__chev svg { animation-name: mp-edge-chev-r; }
.mp-edge.is-armed .mp-edge__chev svg:nth-child(2) { animation-delay: -230ms; }
.mp-edge.is-armed .mp-edge__chev svg:nth-child(3) { animation-delay: -460ms; }
@keyframes mp-edge-chev-l { 0%, 100% { transform: translateX(2px); opacity: 0.5; } 50% { transform: translateX(-2px); opacity: 1; } }
@keyframes mp-edge-chev-r { 0%, 100% { transform: scaleX(-1) translateX(2px); opacity: 0.5; } 50% { transform: scaleX(-1) translateX(-2px); opacity: 1; } }
@keyframes mp-edge-bump { 0% { transform: scaleY(0.5); } 60% { transform: scaleY(1.06); } 100% { transform: scaleY(1); } }
@keyframes mp-edge-gulp { 0% { opacity: 1; box-shadow: 0 0 16px 4px var(--mp-accent); } 100% { opacity: 0; box-shadow: 0 0 0 0 var(--mp-accent); } }
@keyframes mp-edge-gulp-glow { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ── 모바일: 바텀 시트 · 하단 도트 띠(푸터 45 + 도트 44) 위로 플로팅 프레임 ── */
@media (max-width: 767px) {
  .mp-scrim { align-items: flex-end; padding: 0; background: rgba(0, 0, 0, 0); transition: background 0.32s ease; }
  .mp-scrim.is-open { background: rgba(0, 0, 0, 0.6); }
  /* 토스트처럼 아래에서 올라온다. 닫을 땐 is-open 이 빠지며 반대로 내려간다 (js/player.js openPlayer · closePlayer) */
  .mp-pop { height: 94%; border-radius: 14px 14px 0 0; transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .mp-scrim.is-open .mp-pop { transform: none; }
  /* (마이크로 인터랙션) 머리줄을 아래로 끌어 내린다(js/sheetdrag.js). 머리줄 맨 위 가운데에 손잡이 막대 — 닫힘 선을 넘으면 길어지고 강조색 */
  .mp-pop__head { position: relative; padding-top: 18px; touch-action: none; cursor: grab; }
  .mp-pop__grab {
    position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 40px; height: 4px; border-radius: 2px; background: var(--color-border);
    transition: width 0.22s cubic-bezier(0.25, 1.55, 0.45, 1), height 0.18s, background 0.18s;
  }
  .mp-pop.is-armed .mp-pop__grab { width: 58px; height: 5px; background: var(--mp-accent); }
  .mp-pop.is-dragging { transition: none; }
  .mp-pop.is-dragging .mp-pop__head { cursor: grabbing; }
  .mp-pop.is-spring { transition: transform 0.44s cubic-bezier(0.25, 1.55, 0.45, 1); }
  /* 본문은 스크롤하지 않는다. 재생부는 위에 고정(flex none), 아래 탭 패널 한 칸만 남은 높이를 받아 그 안에서 스크롤 */
  .mp-pop__body { display: flex; flex-direction: column; overflow: hidden; }
  .mp-side { flex: 1; }
  .mp-stage { flex: none; gap: 6px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--color-border); overflow: visible; }
  .mp-lib { height: auto; }
  .mp-lib .mp-tools { gap: 6px; padding: 8px 12px; }
  .mp-lib .mp-count { padding: 4px 12px; }
  /* 곡 목록 탭: 검색 · 필터(.mp-tools)까지 곡 줄과 한 덩어리로 스크롤한다 — 고정 높이가 모자란 폰(세로 700px 대)에서도 곡 줄이 보이게 */
  .mp-lib { overflow-y: auto; overscroll-behavior: contain; }
  .mp-lib .mp-list { flex: none; overflow: visible; }
  .mp-lib .mp-tools { border-top: 0; }
  .mp-frame.is-float { bottom: calc(var(--m-foot, 45px) + var(--m-dots, 44px) + 8px); }
}

/* 모바일 시트 손잡이는 PC(도크 · 모달)에서는 안 보인다 */
.mp-pop__grab { display: none; }
@media (max-width: 767px) { .mp-pop__grab { display: block; } }

/* (마이크로 인터랙션) 「비우기」 뒤 5초 되돌리기 — 재생목록 칸 아래쪽. 밑줄 막대가 5초 동안 줄어든다 */
.mp-undo {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 10px; overflow: hidden;
  padding: 8px 12px 10px; border-radius: 10px; background: var(--color-raised); border: 1px solid var(--color-raised-edge);
  font-size: 0.76rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.mp-undo[hidden] { display: none; }
.mp-undo span { flex: 1; min-width: 0; }
.mp-undo__b { border: 0; background: none; padding: 0; color: var(--mp-accent); font-weight: 700; cursor: pointer; }
.mp-undo__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mp-accent); transform-origin: left; }
.mp-undo.is-in { animation: mp-undo-in 0.28s cubic-bezier(0.25, 1.55, 0.45, 1); }
.mp-undo.is-in .mp-undo__bar { animation: mp-undo-drain 5s linear forwards; }
@keyframes mp-undo-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes mp-undo-drain { to { transform: scaleX(0); } }

/* (마이크로 인터랙션) PC 플로팅 손잡이 더블클릭 안내 — 처음 한 번만(js/player.js showGripTip). 두 번 톡톡 표시 */
.mp-coach {
  position: fixed; z-index: 47; left: 0; top: 0; white-space: nowrap; padding: 9px 14px 9px 42px; border-radius: 10px;
  background: var(--mp-accent); color: var(--mp-accent-fg); font-size: 0.78rem; font-weight: 700; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: none; opacity: 0; transform: translateY(4px);
}
.mp-coach[hidden] { display: none; }
.mp-coach::after {   /* 꼬리 — 손잡이 쪽 */
  content: ""; position: absolute; left: 22px; top: 100%; border: 6px solid transparent; border-top-color: var(--mp-accent); border-bottom: 0;
}
.mp-coach.is-below::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 6px solid var(--mp-accent); }
.mp-coach.is-on { opacity: 1; transform: none; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mp-coach__tap { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; }
.mp-coach__tap i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mp-accent-fg); opacity: 0; }
.mp-coach.is-on .mp-coach__tap i { animation: mp-tap2 1.3s ease-out infinite; }
.mp-coach.is-on .mp-coach__tap i:nth-child(2) { animation-delay: 0.22s; }
@keyframes mp-tap2 { 0% { transform: scale(0.3); opacity: 1; } 45% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mp-q__fg, .mp-track__th, .mp-track__tip { transition: none; }
  .mp-ctltip.is-on { animation: none; opacity: 1; }
  .mp-undo.is-in { animation: none; }
  .mp-skip.is-on, .mp-skip.is-on .mp-skip__bar, .mp-mvtip.is-on { animation: none; }   /* (v4.8.3) 안내는 시간이 지나면 hidden 으로 사라진다 */
  .mp-mvtip.is-on { opacity: 1; }
  .mp-coach.is-on { transition: none; }
  .mp-coach.is-on .mp-coach__tap i { animation: none; opacity: 1; transform: none; }
  .mp-frame, .mp-scrim, .mp-pop { transition: none !important; }
  .mp-new { animation: none; background: #e5384a; }
  .mp-badge.pulse { animation: none; }
  .mp-ftab { transition-duration: 80ms; }
  .mp-frame.is-playing .mp-ftab__eq i, .mp-edge.is-armed .mp-edge__chev svg, .mp-edge.is-bump .mp-edge__lip { animation: none; }
}