/* ============================================================
   viewer.css — PDF.js 乐谱查看器 + 视频嵌入（仅详情页引入）
   依赖 base.css 变量。
   ============================================================ */

/* ---------- PDF 查看器 ---------- */
.pdf-viewer {
  position: relative;
  min-height: 120px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}
.pdf-viewer::before {
  content: "加载中…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.pdf-viewer-ready::before { display: none; }

.viewer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #f5f5f5;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.viewer-toolbar button {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  width: 32px;
  height: 32px;
  border-radius: 0;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}
.viewer-toolbar button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.viewer-toolbar button svg { display: block; margin: 0 auto; }
.viewer-page { font-size: 0.85rem; min-width: 64px; text-align: center; color: var(--ink); }
.viewer-sep { flex: 1; }
.viewer-canvas-wrap { overflow-x: auto; padding: 10px; text-align: center; }
.viewer-canvas-wrap canvas {
  margin: 0 auto;
  /* 页面边界由 .pdf-viewer 外框统一界定，canvas 不再单独加框 */
  background: #fff;
}

/* ---------- 视频嵌入 ---------- */
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 10px 0; }
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}