ドラッグ&ドロップアップロードゾーン

<div class="d08-07-11-wrap">
          <div class="d08-07-11-chip" id="d08-07-11-chip" draggable="true">📄 見積書.pdf</div>
          <div class="d08-07-11-zone" id="d08-07-11-zone">
            <span class="d08-07-11-icon">⬆</span>
            <p>ここにドラッグ&amp;ドロップ</p>
          </div>
        </div>

.d08-07-11-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:240px}
        .d08-07-11-chip{background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:700;color:#2a2d3a;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.08)}
        .d08-07-11-chip.is-dragging{opacity:.4}
        .d08-07-11-zone{width:100%;min-height:90px;border:2px dashed #c9cbe0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#9aa0b0;font-size:12px;font-weight:600;transition:border-color .2s,background .2s,color .2s}
        .d08-07-11-zone p{margin:0}
        .d08-07-11-zone.is-over{border-color:#6a5cff;background:#f7f6ff;color:#6a5cff}
        .d08-07-11-zone.is-done{border-style:solid;border-color:#22c55e;background:#f0fdf4;color:#16a34a}
        .d08-07-11-icon{font-size:20px}

(function(){
        var root=document.getElementById('item-08-07-11');if(!root)return;
        var chip=root.querySelector('#d08-07-11-chip'),zone=root.querySelector('#d08-07-11-zone');
        if(!chip||!zone)return;
        chip.addEventListener('dragstart',function(e){
          chip.classList.add('is-dragging');
          if(e.dataTransfer){e.dataTransfer.effectAllowed='move';e.dataTransfer.setData('text/plain','file');}
        });
        chip.addEventListener('dragend',function(){chip.classList.remove('is-dragging');});
        zone.addEventListener('dragover',function(e){e.preventDefault();zone.classList.add('is-over');});
        zone.addEventListener('dragleave',function(){zone.classList.remove('is-over');});
        zone.addEventListener('drop',function(e){
          e.preventDefault();
          zone.classList.remove('is-over');
          zone.classList.add('is-done');
          zone.innerHTML='<span class="d08-07-11-icon">✓</span><p>アップロード完了</p>';
          chip.style.display='none';
        });
      })();