/* Songs use the same navigation and content panel as the other collections. */
.collection-button.is-new-collection { position: relative; }
@media (max-width: 360px) {
  .collection-button.is-new-collection { padding-top: 20px; }
}
.song-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.song-card { min-width: 0; overflow: hidden; border: 1px solid var(--line, #e5ddd4); border-radius: 18px; background: #fffdf9; color: var(--hazel-ink, #253c50); }
.song-card [hidden] { display: none !important; }
.song-media { overflow: hidden; background: #f3eee7; }
.song-cover { display: block; position: relative; width: 100%; padding: 0; border: 0; border-radius: 0; background: #f3eee7; color: #253c50; line-height: 0; }
.song-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.song-cover-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; background: rgb(255 253 249 / 96%); box-shadow: 0 2px 12px rgb(37 60 80 / 18%); }
.song-cover-play svg { width: 24px; height: 24px; margin-left: 3px; }
.song-cover:hover .song-cover-play { background: #f3d7dc; }
.song-duration { position: absolute; right: 10px; bottom: 10px; padding: 5px 7px; border-radius: 5px; background: rgb(24 34 46 / 85%); color: white; font: 600 12px/1.2 var(--font-body, sans-serif); }
.song-card-body { padding: 24px; }
.song-phrases { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.song-phrase { margin: 0; font: 400 28px/1.35 var(--font-display, 'LeeSeoyun', sans-serif); }
.song-phrase > span { display: block; word-break: keep-all; overflow-wrap: anywhere; }
.song-phrase small { display: block; margin-top: 5px; color: #626b74; font: 600 13px/1.5 var(--font-body, sans-serif); }
.song-phrase-play { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line, #e5ddd4); border-radius: 10px; background: #fffdf9; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.song-phrase-text { display: block; min-width: 0; }
.song-phrase-text > span { display: block; word-break: keep-all; overflow-wrap: anywhere; }
.song-phrase-play:hover, .song-phrase-play[aria-pressed="true"] { background: #f8e9ef; border-color: var(--hazel-rose, #8d3e5b); }
.song-phrase-play-icon { display: grid; place-items: center; flex: 0 0 24px; color: var(--hazel-rose, #8d3e5b); }
.song-phrase-play-icon svg { width: 20px; height: 20px; }
.song-short-choices { display: grid; gap: 8px; margin-top: 12px; }
.song-phrase-play.is-compact { font: 600 13px/1.45 var(--font-body, sans-serif); }
.song-phrase-play.is-compact small { display: block; margin-top: 3px; color: #626b74; font-size: 11px; font-weight: 400; }
.song-title-row { display: flex; align-items: flex-start; gap: 12px; }
.song-title-row > :is(h3,h4) { flex: 1; min-width: 0; }
.song-card-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 14px; margin-top: 18px; }
.song-save-control { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; margin-left: auto; }
.song-card .study-save, .song-topic > .song-title-row .study-save { position: static; display: grid; place-items: center; width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--hazel-rose, #8d3e5b); font: 400 22px/1 var(--font-body, sans-serif); }
.song-card .study-save:hover, .song-topic > .song-title-row .study-save:hover { background: #f8e9ef; }
.song-card .study-save > span { display: block; line-height: 1; }
.song-card a { font: 600 12px/1.5 var(--font-body, sans-serif); }
.song-lesson-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 44px; color: var(--hazel-rose, #8d3e5b); text-decoration: none; }
.song-lesson-link [lang=ko] { font-size: 11px; font-weight: 400; }
.song-lesson-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.song-media iframe { display: block; width: 100%; min-height: 200px; aspect-ratio: 16/9; border: 0; }
.song-card.is-short-playing .song-media { display: flex; justify-content: center; }
.song-card.is-short-playing .song-media iframe { width: min(100%, 360px, 42.1875vh); min-height: 0; aspect-ratio: 9/16; }
.song-card-related { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; margin: 20px 0 24px; }
.song-card-related .song-card-body { padding: 12px 18px; }
.song-card-related h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font: 600 18px/1.45 var(--font-body, sans-serif); }
.song-card-related h3 small { color: #626b74; font-size: 14px; font-weight: 400; }
.song-card-related.is-playing { grid-template-columns: 1fr; }
/* Saved songs follow the same compact surface and action row as other favorites. */
.song-card-favorite { position:relative; width:100%; min-height:var(--favorite-card-min-height,176px); padding:52px 16px 18px; border-color:#e8ddcc; border-radius:18px; background:#fcf6ee; cursor:pointer; }
.song-card-favorite > .song-save-control { position:absolute; top:4px; right:4px; margin:0; }
.favorite-song-preview { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:14px; }
.favorite-song-title { margin:0; font:400 22px/1.35 var(--font-display,'LeeSeoyun',sans-serif); word-break:keep-all; overflow-wrap:anywhere; }
.favorite-song-toggle { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.favorite-song-toggle > span { display:block; }
.favorite-song-title small { display:block; margin-top:4px; color:#626b74; font:600 12px/1.5 var(--font-body,sans-serif); }
.song-card-favorite .song-media { aspect-ratio:9/16; border-radius:8px; }
.song-card-favorite .song-cover, .song-card-favorite .song-cover img { height:100%; aspect-ratio:9/16; }
.song-card-favorite .song-cover img { object-fit:contain; }
.song-card-favorite .song-cover-play { width:28px; height:28px; }
.song-card-favorite .song-cover-play svg { width:15px; height:15px; }
.song-card-favorite.is-playing .favorite-song-preview { grid-template-columns:minmax(0,1fr); gap:12px; }
.song-card-favorite.is-playing .song-media { width:min(100%,280px); aspect-ratio:auto; margin-inline:auto; background:transparent; }
.song-card-favorite.is-short-playing .song-media iframe { width:100%; min-height:0; aspect-ratio:9/16; }
.song-cover:focus-visible, .song-card a:focus-visible, .song-card button:focus-visible { outline: 3px solid #8d3e5b; outline-offset: -3px; }
@media (max-width: 1000px) {
  .song-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .song-card-body { padding: 14px 16px; }
  .song-phrase { font-size: 26px; }
  .song-phrases { gap: 20px; }
  .song-card-related { grid-template-columns: 1fr; }
  .song-card-related .song-card-body { padding: 14px 16px; }
  .song-card-favorite { padding:52px 12px 16px; }
  .favorite-song-preview { grid-template-columns:46px minmax(0,1fr); gap:10px; }
  .favorite-song-title { font-size: 20px; }
}

/* The library previews each Short using its existing video frame. */
.song-library-groups { display: grid; gap: 32px; }
.song-topic { min-width: 0; }
.song-topic > .song-title-row { align-items: center; margin-bottom: 14px; }
.song-topic-heading { margin: 0; font: 400 30px/1.35 var(--font-display, 'LeeSeoyun', sans-serif); }
.song-topic-heading small { display: block; margin-top: 3px; color: #626b74; font: 600 14px/1.5 var(--font-body, sans-serif); }
.song-clip-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: start; }
.song-clip-card { cursor: pointer; }
.song-clip-card .song-media { aspect-ratio: 9/16; }
.song-clip-card .song-cover, .song-clip-card .song-cover img { height: 100%; aspect-ratio: 9/16; }
.song-clip-card .song-cover img { object-fit: cover; }
.song-clip-card .song-cover img.preserve-frame { object-fit: contain; }
.song-clip-card .song-cover-play { top: auto; left: auto; right: 10px; bottom: 10px; transform: none; width: 38px; height: 38px; color: var(--hazel-rose,#8d3e5b); }
.song-clip-card .song-cover-play svg { width: 19px; height: 19px; }
.song-clip-card .song-card-body { padding: 12px 14px 16px; }
.song-clip-title { margin: 0; font: 400 24px/1.4 var(--font-display, 'LeeSeoyun', sans-serif); word-break: keep-all; overflow-wrap: anywhere; }
.song-clip-title small { display: block; margin-top: 5px; color: #626b74; font: 600 13px/1.5 var(--font-body, sans-serif); }
.song-clip-card.is-selected { border-color: #b5768b; box-shadow: 0 0 0 1px #b5768b; }
.song-clip-card.is-short-playing .song-media iframe { width: 100%; height: 100%; aspect-ratio: 9/16; }
.song-topic > .song-card-footer { margin-top: 14px; }
@media (max-width: 1000px) { .song-clip-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
 .song-clip-grid { grid-template-columns: minmax(0,1fr); width: min(100%,360px); margin-inline: auto; gap: 20px; }
 .song-topic-heading { font-size: 28px; }
 .song-clip-title { font-size: 26px; }
}