/* Songs: 머리글은 Books, Drawings와 같은 틀(.section-head)에 손그림 */
/* 오른쪽 칸(제목·소개·버튼)이 왼쪽 손그림보다 높아지면 머리글 전체가 내려앉는다.
   다른 섹션과 같은 자리에 오도록 버튼 줄을 낮게 둔다 */
.playlist-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: 14px;
}

.playlist-meta {
  color: var(--ink-soft);
  font-size: 14px;
}

.play-all {
  padding: 6px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.player {
  display: grid;
  place-items: center;
  min-height: 166px;
  margin-bottom: var(--space-5);
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}

.player:has(iframe) {
  border: 0;
}

.player iframe {
  width: 100%;
  height: 166px;
  border: 0;
}

.tracklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.track {
  display: grid;
  grid-template-columns: 2em 44px 1fr auto 3.5em;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line);
  border-radius: 4px;
}

.track:hover {
  background: var(--code-bg);
}

.track-no,
.track-date,
.track-duration {
  color: var(--ink-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.track-no {
  text-align: center;
}

.track-duration {
  text-align: right;
}

.track-cover {
  width: 44px;
  height: 44px;
  border-radius: 3px;
  object-fit: cover;
  background: #2f4858;
}

/* 커버가 없는 곡은 플레이리스트 커버와 같은 색에 음표를 그린다 */
.track-cover-default {
  display: grid;
  place-items: center;
  color: #f3ecdc;
}

.track-cover-default svg {
  width: 70%;
  height: auto;
}

.track-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.45;
}

.track-title {
  font-weight: 600;
  text-decoration: none;
}

/* 제목을 누르면 줄 전체를 누른 셈 */
.track {
  position: relative;
}

.track-title::after {
  content: "";
  position: absolute;
  inset: 0;
}

.track-credit {
  color: var(--ink-soft);
  font-size: 14px;
}

.track-note {
  position: relative;
  z-index: 1;
  font-size: 14px;
}

.track-note summary {
  color: var(--ink-soft);
  cursor: pointer;
}

.track[aria-current="true"] .track-no {
  color: var(--accent);
  font-size: 0;
}

.track[aria-current="true"] .track-no::before {
  content: "♪";
  font-size: 16px;
}

.track[aria-current="true"] .track-title {
  color: var(--accent);
}

/* 여기 있는 곡이 다가 아니라서, 목록 끝에 SoundCloud로 가는 버튼을 크게 둔다 */
.playlist-more {
  margin: var(--space-7) 0 0;
  text-align: center;
}

.soundcloud-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition:
    background var(--quick) var(--ease),
    color var(--quick) var(--ease);
}

.soundcloud-more:hover,
.soundcloud-more:focus-visible {
  background: var(--accent);
  color: var(--paper);
}

@media (max-width: 640px) {
  .track {
    grid-template-columns: 1.5em 40px 1fr 3em;
  }

  .track-cover {
    width: 40px;
    height: 40px;
  }

  .track-date {
    display: none;
  }
}