칸반 보드

<div class="kbw">
  <div class="kbcol"><h3>할 일 <span>2</span></h3>
    <div class="kbcard" draggable="true">디자인 리뷰</div>
    <div class="kbcard" draggable="true">API 문서 작성</div>
  </div>
  <div class="kbcol"><h3>진행 중 <span>1</span></h3>
    <div class="kbcard" draggable="true">결제 연동</div>
  </div>
  <div class="kbcol"><h3>완료 <span>1</span></h3>
    <div class="kbcard" draggable="true">로그인 화면</div>
  </div>
</div>

.kbw{position:absolute;inset:8px;display:flex;gap:7px}
.kbcol{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kbcol h3{margin:0;font-size:9px;color:var(--muted);display:flex;justify-content:space-between;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.kbcol h3 span{background:var(--line);color:var(--fg);border-radius:999px;padding:0 5px}
.kbcard{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:10px;color:var(--fg);cursor:grab;transition:transform .25s,opacity .25s}
.kbcard[data-moving]{opacity:.4;transform:scale(.94)}

const cols = [...document.querySelectorAll('.kbcol')];
let dragEl = null;
document.querySelectorAll('.kbcard').forEach((c) => {
  c.addEventListener('dragstart', () => { auto = false; dragEl = c; c.setAttribute('data-moving', ''); });
  c.addEventListener('dragend', () => c.removeAttribute('data-moving'));
});
cols.forEach((col) => {
  col.addEventListener('dragover', (e) => e.preventDefault());
  col.addEventListener('drop', () => { if (dragEl) col.appendChild(dragEl); updateCounts(); });
});
function updateCounts() { cols.forEach((col) => { col.querySelector('span').textContent = String(col.querySelectorAll('.kbcard').length); }); }
let auto = true;
function autoMove() {
  if (!auto) return;
  const from = cols[Math.floor(Math.random() * 2)];
  const cards = from.querySelectorAll('.kbcard');
  if (!cards.length) { setTimeout(autoMove, 1600); return; }
  const card = cards[0];
  const to = cols[(cols.indexOf(from) + 1) % cols.length];
  card.setAttribute('data-moving', '');
  setTimeout(() => {
    if (!auto) return;
    to.appendChild(card);
    card.removeAttribute('data-moving');
    updateCounts();
    setTimeout(autoMove, 1600);
  }, 260);
}
setTimeout(autoMove, 1200);