/* 「印刷の比率の一括書き出し」の画面。共通の部品(道具の箱・選ぶ枠・設定の枠・ボタン・注意)と色・大きさの変数は、src/style.css。ここは、この道具だけの物。 */
.options { --opt-min: 17rem; }
input[type="number"] { width: 7rem; }
input[type="color"] { width: 3rem; height: var(--tap); padding: 0; border: 1px solid var(--line); border-radius: var(--r-s); background: none; }
input[type="range"] { flex: 1 1 8rem; min-width: 6rem; }

ul.previews { 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; }
.preview { margin: 0; border: 1px solid var(--line); border-radius: var(--r-m); padding: 0.7rem; background: var(--bg); }
.stage { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-s); background: var(--line); user-select: none; }
.stage img { position: absolute; display: block; max-width: none; }
/* 枠線は白と黒の二重(明るい絵でも暗い絵でも見える)。枠の外(落ちる所)は暗くする。 */
.frame { position: absolute; cursor: grab; touch-action: none; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #000000, inset 0 0 0 1px #000000, 0 0 0 200rem rgba(0, 0, 0, 0.6); }
/* 指での操作: 枠が動く軸だけを枠が受け取り、もう一方の軸はページを送れる。動かせない枠は、何も止めない。 */
.frame.move-x { touch-action: pan-y; }
.frame.move-y { touch-action: pan-x; }
.frame.fixed { touch-action: auto; cursor: default; }
.frame:active { cursor: grabbing; }
.frame.fixed:active { cursor: default; }
.frame:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }
.dims { margin: var(--sp-2) 0 0; font-variant-numeric: tabular-nums; }
.preview .warn { margin: 0.4rem 0 0; }
.size-row { margin: var(--sp-2) 0 0; }
.size-row select { width: 100%; }
.preview .row { margin-top: 0.6rem; }
/* 「これだけ保存」は、折り返さず、カードの幅いっぱいに */
.preview .button { white-space: nowrap; width: 100%; }
.export-note { margin-top: 1.2rem; }