@media (min-width: 333px) {
  .todo-main-div {
    flex-direction: column;
  }

  .todo-input-div {
    position: unset;
    grid-template-columns: 1fr 70px;
    margin: 0 0 20px 0;
  }

  .todo-list-div {
    grid-template-columns: 90vw;
  }

  .todo-input {
    width: 290px;
    height: 32px;
    margin: 0;
    border: 1px solid black;
    border-right: none;
    border-radius: 2px 0 0 2px;
    outline: none;
  }

  .todo-add-btn {
    height: 35.6px;
    border-radius: 0 2px 2px 0;
    border: 1px solid black;
    border-left: 0.3px solid black;
    outline: none;
  }

  .white-bg-for-pc {
    visibility: hidden;
  }
}

@media (min-width: 580px) {

  .todo-input {
    width: 460px;
  }
}

@media (min-width: 750px) {
  .todo-input-div {
    position: fixed;
  }

  .todo-input {
    border-radius: 12px 0 0 12px;
    height: 36px;
  }

  .todo-add-btn {
    border-radius: 0 12px 12px 0;
    height: 40px;
  }

  .white-bg-for-pc {
    visibility: unset;
  }
}

@media (min-width: 850px) {
  .todo-list-div {
    grid-template-columns: 700px;
  }
}