@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

body { 
  font-family: 'Noto Sans KR', sans-serif; 
}

.section { 
  display: none; 
}

.section.active { 
  display: block; 
}

.spinner { 
  border: 3px solid #e5e7eb; 
  border-top: 3px solid #6366f1; 
  border-radius: 50%; 
  width: 24px; 
  height: 24px; 
  animation: spin 1s linear infinite; 
}

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

.skeleton { 
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); 
  background-size: 200% 100%; 
  animation: shimmer 1.5s infinite; 
}

@keyframes shimmer { 
  0% { background-position: 200% 0; } 
  100% { background-position: -200% 0; } 
}

.toast { 
  animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards; 
}

@keyframes slideIn { 
  from { transform: translateX(100%); opacity: 0; } 
  to { transform: translateX(0); opacity: 1; } 
}

@keyframes fadeOut { 
  from { opacity: 1; } 
  to { opacity: 0; } 
}

.stepper-item.completed .stepper-circle { 
  background: #22c55e; 
}

.stepper-item.active .stepper-circle { 
  background: #6366f1; 
  animation: pulse 2s infinite; 
}

@keyframes pulse { 
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 
  50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } 
}

.chat-bubble { 
  animation: bubbleIn 0.3s ease-out; 
}

@keyframes bubbleIn { 
  from { transform: scale(0.8); opacity: 0; } 
  to { transform: scale(1); opacity: 1; } 
}