* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; color: #1a1a1a; }
header { padding: 8px 12px; border-bottom: 1px solid #ddd; }
h1 { font-size: 18px; margin: 0 0 6px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar input[type=number] { width: 64px; }
main { display: flex; height: calc(100vh - 86px); }
#pageList { width: 160px; border-right: 1px solid #ddd; overflow: auto; padding: 6px; }
#pageList .thumb { border: 2px solid transparent; margin-bottom: 6px; cursor: pointer; }
#pageList .thumb.sel { border-color: #2563eb; }
#pageList img { width: 100%; display: block; }
#stage { flex: 1; overflow: auto; background: #f3f4f6; position: relative; }
#sheet { position: relative; background: #fff; margin: 20px; box-shadow: 0 0 0 1px #999;
  background-image: linear-gradient(#eee 1px, transparent 1px),
                    linear-gradient(90deg, #eee 1px, transparent 1px); }
.placed { position: absolute; transform-origin: center; cursor: move;
  outline: 1px solid #2563eb; }
.placed.colliding { outline: 2px solid #dc2626; }
.placed.sel { outline: 2px solid #2563eb; }
.placed img { display: block; width: 100%; height: 100%; pointer-events: none; }