/* ============================================================
   SOOP 자료 카드 모양 (soop-cards.css)
   방송 기록 숫자판 · 다시보기 · SOOP 공지
   ============================================================ */

/* ── 공통 ── */
.sd-load{ display:flex; align-items:center; justify-content:center; gap:9px;
  padding:30px 0; font-size:13px; font-weight:700; color:var(--ink-3); }
.sd-load i{ width:14px; height:14px; border-radius:50%; display:block;
  border:2.5px solid var(--line-2); border-top-color:var(--pink);
  animation:sdSpin .8s linear infinite; }
@keyframes sdSpin{ to{ transform:rotate(360deg); } }
.sd-fail{ padding:22px 16px; text-align:center; font-size:13px; color:var(--ink-3);
  background:var(--bg-2); border-radius:var(--r); }
.sd-note{ margin-top:11px; text-align:center; font-size:11.5px; color:var(--ink-3); }
.sd-more{ display:block; margin-top:12px; padding:11px; text-align:center;
  font-size:12.5px; font-weight:800; color:var(--lav-ink);
  background:var(--bg-2); border:1.5px solid var(--line); border-radius:var(--r);
  transition:.16s; }
.sd-more:hover{ border-color:var(--lav); transform:translateY(-1px); }

/* ── ④ 방송 기록 숫자판 ── */
.sd-rec{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.sd-rec.slim{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.sd-cell{ display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:17px 8px 15px; text-align:center; border-radius:var(--r);
  background:linear-gradient(160deg,var(--bg-2),var(--surface));
  border:1.5px solid var(--line); }
.sd-rec.slim .sd-cell{ padding:13px 6px 11px; }
.sd-ic{ font-size:16px; line-height:1; }
.sd-v{ font-family:'Jua',sans-serif; font-size:17px; letter-spacing:-.4px;
  word-break:keep-all; line-height:1.25; }
.sd-rec.slim .sd-v{ font-size:15px; }
.sd-l{ font-size:11px; font-weight:800; color:var(--ink-3); }
.sd-s{ font-size:10.5px; color:var(--ink-3); opacity:.75; }
.sd-up{ display:inline-flex; align-items:center; gap:4px; margin-top:3px;
  padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#ff6fa8,#ff96c0); }
.sd-up i{ font-style:normal; font-weight:700; opacity:.75; }

/* ── ⑤ 다시보기 ── */
.sd-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px; }
.sd-tab{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:800; color:var(--ink-2);
  padding:8px 13px; border-radius:999px;
  background:var(--bg-2); border:1.5px solid var(--line); transition:.16s; }
.sd-tab span{ font-size:10.5px; font-weight:700; color:var(--ink-3); }
.sd-tab:hover:not(:disabled){ border-color:var(--line-2); transform:translateY(-1px); }
.sd-tab.on{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#ff6fa8,#ff96c0); }
.sd-tab.on span{ color:rgba(255,255,255,.8); }
.sd-tab:disabled{ opacity:.4; cursor:default; }

.sd-vods{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.sd-vod{ display:block; padding:9px; border-radius:16px; background:var(--bg-2);
  border:1.5px solid transparent; transition:.18s; }
.sd-vod:hover{ border-color:var(--pink); transform:translateY(-3px);
  box-shadow:var(--shadow-sm); }
.sv-th{ display:block; aspect-ratio:16/9; border-radius:11px; overflow:hidden;
  background:var(--line); margin-bottom:8px; }
.sv-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:13px; font-weight:700; line-height:1.45; }
.sv-d{ display:block; margin-top:5px; font-size:11px; color:var(--ink-3); }
.sd-vods .sd-more{ grid-column:1 / -1; margin-top:2px; }

/* ── ⑦ SOOP 공지 ── */
.sd-nots{ list-style:none; margin:0; padding:0; }
.sd-nots li{ border-bottom:1px solid var(--line); }
.sd-nots li:last-child{ border-bottom:none; }
.sd-nots a{ display:flex; align-items:center; gap:12px; padding:12px 4px;
  transition:.14s; }
.sd-nots a:hover .sn-t{ color:var(--pink-ink); }
.sn-t{ flex:1; min-width:0; font-size:13.5px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:.14s; }
.sn-m{ flex:0 0 auto; font-size:11.5px; color:var(--ink-3); white-space:nowrap; }

@media (max-width:767px){
  .sd-rec{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sd-rec.slim{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sd-vods{ grid-template-columns:1fr 1fr; }
  .sn-m{ display:none; }
}
@media (max-width:430px){
  .sd-vods{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .sd-load i{ animation:none; }
  .sd-vod, .sd-tab, .sd-more{ transition:none; }
}