/* style.css */
/* Tailwind 기반으로 대부분 스타일링됩니다. 추가 스타일이 필요하면 여기에 작성하세요. */

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

/* 언어 전환 버튼 스타일 */
[data-lang].active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

[data-lang]:hover {
  background-color: #f9fafb;
}

[data-lang].active:hover {
  background-color: #2563eb;
}

/* 로고 그라데이션 애니메이션 */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-gradient-to-r {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

/* FAQ 아코디언 애니메이션 */
.faq-answer {
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
}

.faq-question i {
  transition: transform 0.3s ease-in-out;
}

.faq-question:hover {
  background-color: #f3f4f6;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .faq-question {
    padding: 1rem;
  }
  
  .faq-answer {
    padding: 1rem;
  }
  
  .faq-question span {
    font-size: 0.875rem;
  }
  
  /* 가이드 섹션 반응형 */
  .bg-blue-50, .bg-green-50, .bg-purple-50, .bg-orange-50, .bg-red-50, .bg-yellow-50 {
    padding: 1rem;
  }
  
  .bg-blue-50 h4, .bg-green-50 h4, .bg-purple-50 h4, .bg-orange-50 h4, .bg-red-50 h4, .bg-yellow-50 h4 {
    font-size: 0.875rem;
  }
  
  .bg-blue-50 p, .bg-green-50 p, .bg-purple-50 p, .bg-orange-50 p, .bg-red-50 p, .bg-yellow-50 p {
    font-size: 0.75rem;
  }
}