* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
}
header {
  background-color: #4caf50;
  padding: 20px;
  text-align: center;
}
h1 {
  color: white;
}
form {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
input {
  padding: 10px;
  font-size: 18px;
  width: 85%;
  border: 1px solid #ddd;
}
button {
  padding: 10px;
  font-size: 18px;
  width: 15%;
  border: none;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}

ul {
  list-style-type: none;
  padding: 0;
}

/* 할 일 목록의 스타일 */
li {
  background-color: #f9f9f9;
  color: #444;
  margin: 5px 0;
  padding: 12px;
  font-size: 18px;
  border-radius: 3px;
}

/* 완료된 항목에 대한 스타일 */
li.checked {
  background-color: #ddd;
  color: #888;
  text-decoration: line-through;
}

/* 삭제 버튼 스타일 */
.deleteBtn {
  position: absolute;
  right: 0;
  border: none;
  background-color: rgb(245, 165, 18);
  color: white;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 4px;
  transition: 0.2s;
}

.deleteBtn:hover {
  background-color: #ff4d4d;
}

/* li 스타일 수정 */
li {
  position: relative; /* 삭제 버튼을 배치하기 위한 기준점 생성 */
  background-color: #f9f9f9;
  list-style: none;
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 0 40px;
  height: auto;
  min-height: 40px;
  line-height: 1.5; /* 새로운 줄 간격 설정 */
  font-size: 14px;
  transition: 0.2s;
  overflow-wrap: break-word; /* 내용이 넘칠 경우 새로운 줄로 이동 */
  white-space: pre-wrap; /* 여러 가지 공백 스타일을 모두 사용하고 원래 간격을 유지 */
  overflow: hidden; /* 넘치는 내용을 숨김 */
  word-break: break-all; /* 단어가 끝나지 않더라도 글자가 반영구적으로 줄 바꿈 됨 */
  padding-right: 68px; /* 오른쪽 패딩 추가(삭제 버튼과 텍스트 사이의 공간) */
}

li:hover {
  background-color: #f1f1f1;
}