* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #26191b;
  color: #fff;
}

h1 {
  margin: 50px;
  text-align: center;
  font-size: 40px;
  font-weight: 100;
}

.lists-container {
  width: 1300px;
  height: 550px;
  margin: 0 auto;
  display: flex;
  /* overflow-x: scroll; */
}

.list {
  background-color: rgba(88, 65, 83, 0.5);

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 200px;
  max-width: 300px;
  height: 100%;
  min-height: 150px;
  margin: 0 20px;
  transition: all 0.25s ease-in;
}

.list-item {
  background-color: hsl(300, 18%, 62%);
  padding: 15px 20px;
  text-align: center;
  margin: 8px 12px;
  cursor: pointer;
}

const lists = document.querySelectorAll(".list");
const listItems = document.querySelectorAll(".list-item");

let draggedItem = null;

// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
for (let a = 0; a < listItems.length; a++) {
  const item = listItems[a];

  item.addEventListener("dragstart", function () {
    draggedItem = item;
    setTimeout(function () {
      item.style.display = "none";
    }, 50);
  });

  item.addEventListener("dragend", function () {
    setTimeout(() => {
      //드래그한 아이템은 지우고, 들어가야할 칸에 블럭 생성.
      item.style.display = "block";
      draggedItem = null;
    }, 50);
  });

  for (let b = 0; b < lists.length; b++) {
    const list = lists[b];

    list.addEventListener("dragover", function (e) {
      e.preventDefault();
    });

    list.addEventListener("dragenter", function (e) {
      e.preventDefault();
      list.style.backgroundColor = "rgba(255, 255, 255, 0.7)";
    });

    list.addEventListener("dragleave", function () {
      list.style.backgroundColor = " rgba(88, 65, 83, 0.5)";
    });

    list.addEventListener("drop", function () {
      list.append(draggedItem);
      list.style.backgroundColor = " rgba(88, 65, 83, 0.5)";
    });
  }
}