/* Song library (곡 라이브러리): list screen + registration dialog. Loaded after premium.css; uses its tokens only. */

/* ---------- list screen ---------- */
#tab-songs .sl-head{padding:22px 24px 18px}
.sl-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:14px}
.sl-title h2{margin:0;font-family:var(--serif)}
.sl-title #btnNewSong{margin-left:auto}
.sl-tools{display:grid;grid-template-columns:auto minmax(220px,2fr) auto minmax(130px,1fr) auto minmax(150px,1fr);gap:8px 10px;align-items:center}
.sl-tools label{margin:0;white-space:nowrap}
.sl-tools input,.sl-tools select{margin:0}
.sl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.sl-chip{min-height:40px;padding:6px 14px;border-radius:99px;font-size:.9rem;background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.sl-chip b{font-weight:600;color:var(--muted);font-size:.82rem}
.sl-chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sl-chip[aria-pressed=true] b{color:inherit;opacity:.85}
.sl-count{margin:6px 0 0;font-size:.88rem}
.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;margin-bottom:12px}
.sl-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);min-width:0}
.sl-card.ready{border-left:4px solid var(--ok)}
.sl-card:not(.ready){border-left:4px solid var(--brass)}
.sl-name{margin:0;font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere}
.sl-sub{margin:0;font-size:.86rem;color:var(--muted);overflow-wrap:anywhere}
.sl-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sl-steps li{font-size:.8rem;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.sl-steps li.done{color:var(--ok);border-color:var(--ok)}
.sl-steps li.now{color:var(--brass);border-color:var(--brass);font-weight:600}
.sl-meta{font-size:.82rem;color:var(--muted);margin:0}
.sl-meta .miss{color:var(--warn);font-weight:600}
.sl-act{display:flex;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.sl-act button{flex:1 1 auto}
.sl-more{display:flex;justify-content:center;margin:4px 0 16px}
.sl-empty{background:var(--card);border:1px dashed var(--line);border-radius:18px;padding:30px 24px;text-align:center}
.sl-empty h3{margin:0 0 6px;font-family:var(--serif);font-size:1.25rem}
.sl-empty ol{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;padding:0;margin:14px 0 18px}
.sl-empty ol li{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.sl-empty .row{justify-content:center}
.cat-badge{display:inline-block;font-size:.72rem;padding:1px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);margin-left:6px;vertical-align:middle;white-space:nowrap}

@media (max-width:900px){
  .sl-tools{grid-template-columns:auto 1fr}
  .sl-tools input[type=search]{grid-column:2}
}
@media (max-width:640px){
  #tab-songs .sl-head{padding:16px 14px 14px}
  .sl-title #btnNewSong{margin-left:0;width:100%}
  .sl-grid{grid-template-columns:minmax(0,1fr)}
  .sl-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-right:-14px;padding-right:14px;scrollbar-width:thin}
  .sl-chip{flex:0 0 auto}
}

/* ---------- registration dialog ---------- */
.modal.sl-modal{padding:3vh 12px}
.dialog.sl-dlg{max-width:min(1080px,96vw);padding:20px 22px 18px;border-radius:20px;box-shadow:0 30px 70px -24px rgba(0,0,0,.55)}
.sl-dlg .dhead strong{font-family:var(--serif);font-size:1.2rem;overflow-wrap:anywhere}
.sl-dlg .dhead .x{min-height:44px;min-width:44px}
.sl-dlg .stepper{gap:8px}
.sl-dlg .stp{min-height:44px;padding:8px 16px}
.sl-dlg .stp.done:not(.on)::after{content:" ✓"}
.sl-dlg .stp:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.sl-lab{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.sl-lab label{margin:0;font-size:.9rem;color:var(--ink);font-weight:600}
.sl-field{margin:0 0 12px}
.sl-field input,.sl-field select,.sl-field textarea{margin-top:2px}
.sl-note{font-size:.88rem;color:var(--muted);background:var(--brass-soft);border-radius:10px;padding:8px 12px;margin:2px 0 6px}
.sl-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px}
@media (min-width:900px){.sl-cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.sl-cols.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.sl-cols>*{min-width:0}
.sl-live{font-size:.86rem;color:var(--muted);margin:4px 0 0}
.sl-live.bad{color:var(--err);font-weight:600}
.sl-live.good{color:var(--ok);font-weight:600}
.sl-warnlist{margin:6px 0 0;padding:0;list-style:none;font-size:.86rem;color:var(--warn)}
.sl-dup{border:1px solid var(--err);background:var(--err-bg);color:var(--err);border-radius:10px;padding:8px 12px;margin:6px 0 0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sl-dup.soft{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.sl-dup button{min-height:36px;padding:4px 12px}
.sl-pick{border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:12px 14px;margin:0 0 16px}
.sl-pick .sl-chips{margin:8px 0}
.sl-pick .sl-chip{min-height:36px;padding:4px 12px;font-size:.85rem}
.sl-results{list-style:none;margin:6px 0 0;padding:0;max-height:min(300px,40vh);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.sl-results li+li{border-top:1px solid var(--line)}
.sl-results button{display:flex;width:100%;min-height:48px;align-items:center;gap:8px;border:0;border-radius:0;background:none;text-align:left;padding:8px 12px;flex-wrap:wrap}
.sl-results button:hover,.sl-results button:focus-visible{background:var(--accent-soft)}
.sl-results button[disabled]{opacity:.55;cursor:not-allowed}
.sl-results .t{font-weight:600;overflow-wrap:anywhere}
.sl-results .w{color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}
.sl-results .none{padding:12px;color:var(--muted)}
.sl-chosen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--accent-soft);border-radius:10px;padding:8px 12px;margin:8px 0 0}
.sl-chosen button{min-height:36px;padding:2px 12px}
.sl-dlg details.sl-more-ways{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--bg)}
.sl-dlg details.sl-more-ways summary{cursor:pointer;min-height:36px;display:flex;align-items:center;color:var(--muted);font-size:.9rem}
.sl-license{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}
.sl-license .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 14px}
.sl-license a{font-size:.88rem}
.sl-dlg progress{width:100%;height:10px;accent-color:var(--accent);margin:6px 0 2px}
.sl-dlg table.pairs td.ko{width:44%;vertical-align:top;padding-top:14px;overflow-wrap:anywhere}
.sl-dlg table.pairs input{min-height:44px}
.sl-dlg table.pairs input.empty{outline:2px solid var(--warn);background:var(--warn-bg)}
.sl-dlg .sl-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;position:sticky;bottom:-18px;background:var(--card);padding:10px 0 4px}
.sl-dlg .sl-actions .sl-saved{font-size:.84rem;color:var(--muted);margin-left:auto}
.sl-files{list-style:none;margin:6px 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sl-files li{width:120px;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.sl-files img{display:block;width:120px;height:80px;object-fit:cover;border:1px solid var(--line);border-radius:8px}
.sl-files .low{color:var(--warn);font-weight:600}
.sl-prev{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:10px 12px;min-height:160px}
.sl-prev h4{margin:0 0 6px;font-size:.95rem}
.sl-prev .slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:56vh;overflow:auto}
.sl-prev .slides img{width:100%}
@media (min-width:900px){.sl-prev{position:sticky;top:8px;align-self:start}}
.sl-ok{background:var(--accent-soft);border-radius:12px;padding:10px 14px;margin:0 0 12px;color:var(--ink)}

@media (max-width:640px){
  .modal.sl-modal{padding:0}
  .dialog.sl-dlg{max-width:100%;min-height:100dvh;border-radius:0;border-width:0;padding:14px 12px 12px}
  .sl-dlg .stepper{display:grid;grid-template-columns:repeat(3,1fr)}
  .sl-dlg .stp{padding:8px 4px;text-align:center}
  .sl-license .grid2{grid-template-columns:minmax(0,1fr)}
  .sl-dlg table.pairs,.sl-dlg table.pairs tbody{display:block}
  .sl-dlg table.pairs tr{display:block;margin:0 0 10px}
  .sl-dlg table.pairs tr.gap{display:block;height:6px}
  .sl-dlg table.pairs td{display:block;width:100%!important;padding:0}
  .sl-dlg table.pairs td.ko{padding:0 0 2px;font-weight:600}
  .sl-dlg table.pairs tr.gap td{height:6px}
  .sl-dlg .sl-actions{bottom:-12px}
  .sl-dlg .sl-actions .sl-saved{margin-left:0;flex:1 0 100%}
  .sl-dlg .sl-actions button{flex:1 1 auto}
  .sl-files li{width:calc(50% - 5px)}.sl-files img{width:100%}
}
@media (prefers-reduced-motion:reduce){.sl-chip,.sl-card{transition:none}}
.dotted span+span::before{content:" · ";white-space:pre}
.sl-meta.dotted,.sl-sub.dotted{display:flex;flex-wrap:wrap}