/* 토스 스타일 커스텀 CSS */

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 부드러운 애니메이션 */
.todo-item {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 삭제 애니메이션 */
.todo-item.removing {
  animation: slideOut 0.3s ease-out forwards;
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* 체크박스 스타일 */
.todo-checkbox {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.todo-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.todo-checkbox:hover {
  border-color: #3b82f6;
}

/* 완료된 할일 스타일 */
.todo-completed .todo-title {
  text-decoration: line-through;
  color: #9ca3af;
}

.todo-completed .todo-detail {
  text-decoration: line-through;
  color: #d1d5db;
}

/* 버튼 호버 효과 */
.action-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.todo-item:hover .action-btn {
  opacity: 1;
}

/* 모바일에서는 항상 표시 */
@media (max-width: 640px) {
  .action-btn {
    opacity: 1;
  }
}

/* 로딩 스피너 */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  border-top-color: #3b82f6;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}