カンバンボード Kanban Board

.demo-kanban {
  display: flex; gap: 12px; overflow-x: auto;
  padding-bottom: 4px;
}
.demo-kanban-col {
  flex: 1; min-width: 160px;
  background: #f3f4f6; border-radius: 10px; padding: 12px;
}
.demo-kanban-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.demo-kanban-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.demo-kanban-title {
  font-size: 13px; font-weight: 700; color: #333; flex: 1;
}
.demo-kanban-count {
  font-size: 11px; color: #999; background: #e5e7eb;
  padding: 1px 8px; border-radius: 10px;
}
.demo-kanban-cards {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 40px;
}
.demo-kanban-card {
  background: #fff; border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: grab; transition: box-shadow 0.2s, transform 0.15s;
}
.demo-kanban-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.demo-kanban-card.dragging {
  opacity: 0.5; transform: rotate(2deg);
}
.demo-kanban-card-title {
  font-size: 13px; font-weight: 600; color: #333;
}
.demo-kanban-card-tags { margin-top: 8px; }
.demo-kanban-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
  color: var(--ui-primary); font-weight: 500;
}
.demo-kanban-col.drag-over {
  background: color-mix(in srgb, var(--ui-primary) 8%, #f3f4f6);
}

(function(){
  const cards = document.querySelectorAll('.demo-kanban-card');
  const cols = document.querySelectorAll('.demo-kanban-cards');
  let dragged = null;
  cards.forEach(card => {
    card.addEventListener('dragstart', function(){ dragged = this; this.classList.add('dragging'); });
    card.addEventListener('dragend', function(){ this.classList.remove('dragging'); dragged = null;
      document.querySelectorAll('.demo-kanban-col').forEach(c => c.classList.remove('drag-over'));
    });
  });
  cols.forEach(col => {
    col.addEventListener('dragover', function(e){ e.preventDefault(); this.closest('.demo-kanban-col').classList.add('drag-over'); });
    col.addEventListener('dragleave', function(){ this.closest('.demo-kanban-col').classList.remove('drag-over'); });
    col.addEventListener('drop', function(e){ e.preventDefault();
      this.closest('.demo-kanban-col').classList.remove('drag-over');
      if(dragged) this.appendChild(dragged);
    });
  });
})();