/* 노래 재생기(song-player.js): 큰 화면(full) ↔ 오른쪽 아래 작은 창(mini). 모든 메뉴 페이지가 불러온다(다른 메뉴에서도 작은 창이 보여야 해서).
   영상 비율은 --ar(기본 16:9, 1:1 영상은 1). 작은 창 영상 높이 200px = 유튜브 규정 최소 크기. */
.sp[hidden][data-mode] { display: none; } /* 큰 창·작은 창 모양 규칙(display: grid 등)보다 우선해야 닫기가 먹는다 */
.sp { --ar: 1.7778; color: var(--ink); }
.sp button { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; }
.sp svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-video { background: #000; }
.sp-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- 크게(full): 예전 크게 보기 화면과 같은 배치 ---- */
.sp[data-mode="full"] { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; }
.sp[data-mode="full"] .sp-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--wall) 97%, transparent); }
.sp[data-mode="full"] .sp-top { position: absolute; top: 12px; right: 14px; z-index: 2; display: flex; gap: 2px; }
.sp-top button { display: grid; place-items: center; width: 48px; height: 48px; opacity: .55; transition: opacity .15s; }
.sp-top button:hover { opacity: 1; }
.sp-top svg { width: 26px; height: 26px; }
.sp[data-mode="full"] .sp-box { position: relative; grid-column: 2; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding-top: 32px; }
.sp[data-mode="full"] .sp-video {
  align-self: center; justify-self: center;
  width: min(100%, calc((100dvh - 150px) * var(--ar))); aspect-ratio: var(--ar);
  box-shadow: 0 24px 60px -30px rgba(40, 36, 28, .45);
}
.sp-nav { position: relative; height: 100%; font-size: 60px; font-weight: 200; opacity: .5; transition: opacity .15s; }
.sp-nav:hover { opacity: 1; }
.sp-nav:disabled, .sp-bar button:disabled { opacity: .15; cursor: default; }
.sp-caption {
  width: min(100%, calc((100dvh - 150px) * var(--ar))); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 18px 0 26px; min-height: 88px;
}
.sp-count { font: 400 14px var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 아이콘 세 개: Continuous play(켜면 진하게) · Copy link · Share. 이름은 마우스를 올리면 title로. 크기는 2026-10-08 사용자 요청으로 키움 */
.sp-links { display: flex; gap: 16px; align-items: center; margin-left: -7px; } /* 아이콘 선이 영상 왼쪽 끝과 맞게 단추 여백만큼 당김 */
.sp-links button { display: grid; place-items: center; width: 40px; height: 40px; color: var(--muted); transition: color .2s; }
.sp-links button:hover { color: var(--ink); }
.sp-links svg { grid-area: 1 / 1; width: 26px; height: 26px; transition: opacity .2s; }
.sp-links .ok { opacity: 0; }
.sp-links .done svg { opacity: 0; }
.sp-links .done .ok { opacity: 1; color: var(--ink); }
.sp-links [aria-pressed="false"] { color: var(--faint); }
.sp-links [aria-pressed="true"] { color: var(--ink); }
.sp[data-mode="full"] .sp-bar { display: none; }
html.sp-full { overflow: hidden; }

/* ---- 작게(mini): 오른쪽 아래 카드. 위 얇은 줄(제목 · 이전 · 다음 · 크게 · 닫기) + 영상 ---- */
.sp[data-mode="mini"] {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: max(200px, calc(200px * var(--ar)));
  background: var(--wall); border-radius: 6px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(40, 36, 28, .45), 0 0 0 1px var(--line);
}
.sp[data-mode="mini"] :is(.sp-backdrop, .sp-top, .sp-nav, .sp-caption) { display: none; }
.sp-bar { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 12px; }
.sp-title { flex: 1; min-width: 0; font: 500 11.5px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
.sp-bar button { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: var(--muted); transition: color .2s; }
.sp-bar button:hover { color: var(--ink); }
.sp-bar svg { width: 15px; height: 15px; }
.sp[data-mode="mini"] .sp-video { height: 200px; display: flex; justify-content: center; }
.sp[data-mode="mini"] .sp-video iframe { width: min(100%, calc(200px * var(--ar))); }

/* 관리자 오른쪽 아래 단추(+, 재생목록)가 작은 창에 가리지 않게 위로 */
html.sp-mini .ia-add { bottom: 262px; }

@media (max-width: 640px) {
  .sp[data-mode="full"] { grid-template-columns: minmax(0, 1fr); }
  .sp[data-mode="full"] .sp-nav { display: none; }
  .sp[data-mode="full"] .sp-box { grid-column: 1; padding: 56px 12px 0; }
  .sp-caption { padding: 14px 4px 22px; }
  /* 휴대폰 작은 창: 화면 아래 가로 꽉 차게, 내용이 가리지 않게 아래 여백 */
  .sp[data-mode="mini"] { left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; box-shadow: 0 -10px 30px -18px rgba(40, 36, 28, .4), 0 -1px 0 var(--line); }
  html.sp-mini body { padding-bottom: 232px; }
  html.sp-mini .ia-add { bottom: 246px; }
}