@import url('common.css');
/* Toolful v5 · canvas workbench / frame rail */
.frame-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.frame-item { position: relative; border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; background: var(--c-surface); }
.frame-item img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; background: var(--c-surface-subtle); }
.frame-item .idx { position: absolute; top: 4px; left: 4px; background: var(--c-primary); color: var(--c-on-primary); font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--r-full); }
.frame-item .rm { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: var(--r-full); background: var(--c-overlay); color: var(--c-on-overlay); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.frame-item .rm:hover { background: var(--c-danger); }

/* Mobile task order: Preview → Frames → Controls */
@media (max-width: 767px) {
  #work { display: flex; flex-direction: column; }
  #work .gif-preview { order: 1; }
  #work .gif-frames { order: 2; }
  #work .gif-controls { order: 3; }
}