画像プレビューサムネイル一覧UI

<div class="d04-04-11-wrap">
          <div class="d04-04-11-grid">
            <div class="d04-04-11-thumb" style="--c1:#fca5a5;--c2:#f472b6"><button class="d04-04-11-rm" type="button" aria-label="削除">×</button></div>
            <div class="d04-04-11-thumb" style="--c1:#93c5fd;--c2:#818cf8"><button class="d04-04-11-rm" type="button" aria-label="削除">×</button></div>
            <div class="d04-04-11-thumb" style="--c1:#86efac;--c2:#4ade80"><button class="d04-04-11-rm" type="button" aria-label="削除">×</button></div>
            <div class="d04-04-11-add">+</div>
          </div>
          <p class="d04-04-11-count"><span class="d04-04-11-n">3</span>/6 枚選択中</p>
        </div>

.d04-04-11 .d04-04-11-wrap{width:100%;max-width:230px;display:flex;flex-direction:column;align-items:center;gap:10px}
        .d04-04-11 .d04-04-11-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
        .d04-04-11 .d04-04-11-thumb{position:relative;aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,var(--c1),var(--c2));transition:transform .25s ease,opacity .25s ease}
        .d04-04-11 .d04-04-11-thumb.is-removing{transform:scale(.4);opacity:0}
        .d04-04-11 .d04-04-11-rm{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:none;background:#1f2937;color:#fff;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
        .d04-04-11 .d04-04-11-add{aspect-ratio:1;border-radius:10px;border:2px dashed #cbd5e1;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:20px}
        .d04-04-11 .d04-04-11-count{margin:0;font-size:11px;color:#6b7280}

(function(){
          var root=document.currentScript.closest('.item');
          var grid=root.querySelector('.d04-04-11-grid');
          var nEl=root.querySelector('.d04-04-11-n');
          function updateCount(){
            nEl.textContent=grid.querySelectorAll('.d04-04-11-thumb').length;
          }
          grid.addEventListener('click',function(e){
            var btn=e.target.closest('.d04-04-11-rm');
            if(!btn) return;
            var thumb=btn.closest('.d04-04-11-thumb');
            thumb.classList.add('is-removing');
            setTimeout(function(){
              thumb.remove();
              updateCount();
            },260);
          });
        })();