/* ばらばら 固有のスタイル（共通の style.css の上に乗る） */

/* ステージは 1 枚の静止画。はみ出した分はドラッグで動かす（src/viewer.js）。 */
#previewCanvas { cursor: pointer; }
#previewCanvas.picking { cursor: crosshair; }

.name-row { display: flex; align-items: center; gap: 8px; }
.name-row .num { flex: 1; }

/* ---------- 切り出し結果 ---------- */
.results-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.results-head .group-title { margin: 0; }
.results-actions { margin-left: auto; display: flex; gap: 6px; }
.count-pill {
  color: var(--accent-deep);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.thumb {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px;
  background: var(--sheet);
}
.thumb.off { opacity: 0.35; border-style: dashed; }
.thumb-img {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  background-color: #ebe6d8;
  background-image:
    conic-gradient(#f7f3e8 25%, transparent 0 50%, #f7f3e8 0 75%, transparent 0);
  background-size: 12px 12px;
  overflow: hidden;
}
.thumb-img canvas {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}
.thumb-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.thumb-label {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thumb-bar .mini-btn { padding: 1px 6px; font-size: 11px; line-height: 1.4; box-shadow: none; }

@media (max-width: 900px) {
  .thumb-grid { max-height: 300px; }
}