/* SONG: 유튜브 재생목록의 영상 썸네일만 작게 반듯하게(제목 없음, 사용자 지시로 3열 → 5열). 누르면 공용 재생기(/lib/song-player.*)로 재생. 공통 모양은 /lib/site.css */
.song-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  padding: 36px 0 80px;
}
.song-cell { min-width: 0; }
.song {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden; background: #e6e2e2;
  animation: song-in .6s ease both; animation-delay: calc(var(--i, 0) * 30ms);
}
/* 유튜브 썸네일(4:3, 위아래 검은 띠)을 16:9로 잘라 띠를 숨긴다 */
.song img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.song img.loaded { opacity: 1; }
@media (hover: hover) { .song:hover img { transform: scale(1.02); } }
@keyframes song-in { from { opacity: 0; } }

@media (min-width: 2000px) { .song-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 900px) { .song-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .song-grid { gap: 3px; padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .song, .song img { animation: none; transition: none; } }

/* 관리자: 재생목록 바꾸기 버튼(+ 자리) */
.ia-add.ia-playlist { font-size: 13px; font-weight: 600; width: auto; padding: 0 18px; border-radius: 999px; }
/* 번쩍임 없애기(2026-10-08): 다른 메뉴와 같이 서서히 나타나던 효과를 뺀다 */
.song { animation: none; }
.song img { opacity: 1; transition: transform .8s cubic-bezier(.2,.7,.2,1); }