/* ============================================================
   page-musicvideo.css (Lego Block)
   뉘앙스 뮤직비디오 페이지 전용 (멤버십 게이트 + 8초 프리뷰).
   ============================================================ */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 26px; }
.mv-card {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-muted); background: var(--bg-surface);
  aspect-ratio: 9/16; display: flex; flex-direction: column; justify-content: flex-end;
}
.mv-card video, .mv-card .mv-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.mv-card .mv-thumb {
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
  opacity: .35; background: linear-gradient(160deg, rgba(255,255,255,.06), transparent);
}
.mv-meta {
  position: relative; z-index: 1; padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.mv-title { font-weight: 700; font-size: .95rem; }
.mv-lock {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  text-align: center; padding: 16px; cursor: pointer;
}
.mv-lock-icon { font-size: 1.6rem; }
.mv-preview-badge {
  position: absolute; top: 10px; right: 10px; z-index: 1; font-size: .72rem;
  padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.2);
}
.mv-empty {
  border: 1px dashed var(--border-muted); border-radius: 14px;
  padding: 48px 24px; text-align: center; margin-top: 26px; line-height: 1.8;
}
.mv-upsell {
  margin-top: 34px; border-radius: 16px; padding: 28px;
  background: linear-gradient(135deg, rgba(244,63,94,.12), rgba(129,140,248,.10));
  border: 1px solid var(--border-muted);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.mv-upsell h3 { margin: 0 0 4px; }
.mv-upsell p { margin: 0; color: var(--text-secondary); max-width: 46ch; }
.mv-thumb-wrap { position: absolute; inset: 0; cursor: pointer; }
.mv-thumb-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  font-size: .85rem; padding: 8px 16px; border-radius: 999px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25);
}

/* ── Free Shorts 진열대 (2026-07-17) — 뮤비 공장 무료 매대 (Lego Block) ── */
.free-shorts { margin-top: 26px; }
.fs-heading { margin: 0 0 4px; font-size: 1.15rem; }
.fs-sub { margin: 0 0 14px; color: var(--text-secondary); font-size: .9rem; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fs-card { border: 1px solid var(--border-muted); border-radius: 14px; background: var(--bg-surface); overflow: hidden; }
.fs-embed { width: 100%; aspect-ratio: 9/16; border: 0; display: block; }
.fs-meta { padding: 10px 14px 4px; }
.fs-title { font-weight: 700; }
.fs-genre { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.fs-lyrics { padding: 0 14px 12px; font-size: .85rem; }
.fs-lyrics summary { cursor: pointer; color: var(--text-secondary); }
.fs-lyrics pre { white-space: pre-wrap; font-family: inherit; color: var(--text-secondary); margin: 8px 0 0; }

.fs-card.is-locked { cursor: pointer; }
.fs-lock-box {
  aspect-ratio: 9/16; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; background: rgba(0,0,0,.25); text-align: center; padding: 16px;
}
.fs-lock-box .fs-lock-icon { font-size: 1.6rem; }