/* 「動画から静止画を切り出す」の画面。共通の部品と色・大きさの変数は、src/style.css。ここは、この道具だけの物。 */
/* 動画と、その操作 */
.player { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0.7rem; background: var(--bg); }
.screen { background: #000000; border-radius: var(--r-s); overflow: hidden; display: flex; justify-content: center; }
.screen video { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; cursor: pointer; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: 0.7rem; }
.time { margin-left: auto; font-variant-numeric: tabular-nums; }
/* 「このコマを保存」と形式は、動画の操作のすぐ下 */
.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; margin-top: 0.7rem; }
.format-label { font-weight: 700; }
.seek { display: block; width: 100%; height: var(--tap); margin: 0.2rem 0 0; }

.options { --opt-min: 17rem; margin-top: var(--sp-4); }
input[type="number"] { width: 7rem; }
.batch-note { margin: 0.6rem 0 0; }
.batch-actions { margin-top: 0.8rem; gap: 0.6rem; }

/* 切り出したコマの一覧 */
#shots-box h2 { margin-top: 1.2rem; }
ul.shots { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.8rem; align-items: start; }
.shot { margin: 0; border: 1px solid var(--line); border-radius: var(--r-m); padding: 0.6rem; background: var(--bg); }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--r-s); background: #000000; }
.dims { margin: var(--sp-2) 0 0; font-variant-numeric: tabular-nums; font-size: var(--fs-s); }
.shot .row { margin-top: var(--sp-2); gap: 0.4rem; }