/*
 * 영상 항목 — 리모트의 썸네일 카드와, 넣기·고치기 창에서 이 파일에만 필요한
 * 것들. 창의 뼈대(.sheetwrap, .fld, .modes, .bgpick 등)는 project_scripture.css에
 * 이미 있는 일반 규칙을 그대로 물려받는다 — 두 벌 두지 않는다.
 */

/* ── 리모트 미리보기의 썸네일 카드 (실제 영상은 회중 화면에만) ────────────── */
.ccm-remote .video-card{display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; position:absolute; inset:0; padding:8%}
.ccm-remote .preview.video-mode .inner,
.ccm-remote .preview.video-mode .verse-panel{display:none}
.ccm-remote .preview.video-mode .video-card{display:flex}
.ccm-remote .video-card .thumb{
  width:min(72%, 320px); aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; font-size:32px;
}
.ccm-remote .video-card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.ccm-remote .video-card .lbl{font-size:15px; font-weight:800; text-align:center}
.ccm-remote .video-card .note{font-size:11.5px; color:var(--muted)}

/* ── 영상 넣기·고치기 창에서만 필요한 것 ──────────────────────────────────── */
.ccm-remote .sheetwrap .video-sheet{width:min(640px, 100%); gap:14px}
.ccm-remote .source-list{display:grid; gap:9px; min-height:0; overflow-y:auto; padding:1px}
.ccm-remote .source-card{
  display:flex; flex-direction:column; gap:9px; padding:12px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line); transition:border-color .16s, background .16s, box-shadow .16s;
}
.ccm-remote .source-card:focus-within,
.ccm-remote .source-card.on{
  border-color:var(--accent-line); background:var(--accent-soft);
  box-shadow:0 0 0 1px rgba(240,170,60,.08);
}
.ccm-remote .source-head{display:flex; align-items:center; gap:10px; min-width:0; cursor:pointer}
.ccm-remote .source-head > div{display:flex; flex:1; min-width:0; flex-direction:column; gap:1px}
.ccm-remote .source-head strong{font-size:13px; color:var(--ink)}
.ccm-remote .source-head small{font-size:10.5px; color:var(--muted)}
.ccm-remote .source-icon{
  display:grid; place-items:center; width:29px; height:29px; flex:none; border-radius:9px;
  font-size:13px; font-weight:900; background:var(--surface-3); color:var(--ink-2);
}
.ccm-remote .source-icon.youtube{background:rgba(239,68,68,.13); color:#fb7185}
.ccm-remote .source-icon.upload{background:rgba(59,130,246,.13); color:#60a5fa}
.ccm-remote .source-icon.library{background:rgba(16,185,129,.13); color:#34d399}
.ccm-remote .source-picked{
  visibility:hidden; flex:none; border-radius:999px; padding:3px 7px;
  background:var(--accent); color:#241505; font-size:9px; font-weight:900; text-transform:uppercase;
}
.ccm-remote .source-card.on .source-picked{visibility:visible}
.ccm-remote .video-library{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); overflow:visible}
.ccm-remote .video-library .bgthumb{width:100%; height:48px}
.ccm-remote .auto-row{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer;
}
.ccm-remote .auto-copy{display:flex; flex:1; min-width:0; flex-direction:column; gap:2px}
.ccm-remote .auto-copy strong{font-size:13px; color:var(--ink)}
.ccm-remote .auto-copy small{font-size:10.5px; color:var(--muted)}
.ccm-remote .auto-row > input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ccm-remote .auto-switch{
  position:relative; width:42px; height:24px; flex:none; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--line); transition:.18s;
}
.ccm-remote .auto-switch span{
  position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%;
  background:var(--muted); box-shadow:0 2px 5px rgba(0,0,0,.35); transition:.18s;
}
.ccm-remote .auto-row > input:checked + .auto-switch{background:var(--accent); border-color:var(--accent)}
.ccm-remote .auto-row > input:checked + .auto-switch span{transform:translateX(18px); background:#fff}
.ccm-remote .auto-row > input:focus-visible + .auto-switch{outline:2px solid var(--accent); outline-offset:2px}
.ccm-remote .sheetwrap .hint{font-size:11.5px; color:var(--muted); margin-top:6px}
.ccm-remote .sheetwrap input[type=file]{
  width:100%; font-size:12.5px; color:var(--ink-2);
}
.ccm-remote .sheetwrap input[type=file]::file-selector-button{
  margin-right:9px; padding:7px 10px; border:0; border-radius:8px;
  background:var(--surface-3); color:var(--ink); font:inherit; font-weight:700; cursor:pointer;
}

@media (max-width:659.98px){
  .ccm-remote .sheetwrap .video-sheet{padding:14px 12px}
  .ccm-remote .source-card{padding:10px}
  .ccm-remote .source-picked{font-size:8px}
}