/* Tailwind 커스텀 스타일 */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #F8B4C4;
  --secondary-color: #FDF0F3;
  --text-color: #4A4A4A;
  --primary-500: #F1C0E8;
  --primary-600: #E5A9DB;
  --secondary-900: #333333;
}

/* 기본 폰트 설정 */
body {
  font-family: 'Noto Sans KR', 'Inter', sans-serif;
  min-height: 100vh;
}

.font-gowun {
  font-family: 'Gowun Dodum', sans-serif;
}

/* 답변 버튼 스타일 */
.answer-button {
  @apply flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-2xl h-16 px-6 bg-pink-100 border-2 border-pink-200 text-pink-700 text-lg font-semibold leading-normal tracking-[0.015em] transition-all duration-300 ease-in-out;
  box-shadow: 0 4px 12px rgba(248, 180, 196, 0.2);
  position: relative;
}

.answer-button:hover {
  @apply bg-pink-300 text-white border-pink-400;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(248, 180, 196, 0.4);
}

.answer-button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(248, 180, 196, 0.6);
  transition: transform 0.1s ease-in-out;
}

.answer-button.selected {
  @apply bg-pink-400 text-white border-pink-500 font-bold;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(248, 180, 196, 0.5);
  animation: buttonClick 0.3s ease-out;
}

@keyframes buttonClick {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.05);
  }
}

/* 리플 효과 */
.answer-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.answer-button:active::before {
  width: 300px;
  height: 300px;
}

/* 버튼 기본 스타일 */
.btn-primary {
  @apply bg-pink-300 text-white hover:bg-pink-400 transition-colors duration-300;
}

.btn-secondary {
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300;
}

/* 카드 호버 효과 */
.card-hover {
  @apply transition-transform duration-200 ease-in-out hover:transform hover:scale-105;
}

/* 진행률 바 애니메이션 */
.progress-bar-animated {
  transition: width 0.5s ease-in-out;
}

/* 페이드 인 애니메이션 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

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

/* 호환성 카드 스타일 */
.compatibility-card {
  @apply bg-blue-500 text-white p-4 rounded-lg text-center transition-all duration-300;
}

.compatibility-card:hover {
  @apply transform scale-105 shadow-lg;
}

/* 개선 팁 카드 스타일 */
.tip-card {
  @apply bg-gray-50 border border-gray-200 p-4 rounded-lg transition-all duration-300;
}

.tip-card:hover {
  @apply transform scale-105 shadow-md;
}

/* 스크롤 애니메이션 */
.scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .text-4xl {
    @apply text-3xl;
  }

  .text-3xl {
    @apply text-2xl;
  }

  .answer-button {
    @apply h-12 text-sm;
  }
}

/* 숨김/표시 유틸리티 */
.hidden {
  display: none !important;
}

.show {
  display: block !important;
}

/* 그라데이션 배경 */
.gradient-bg {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-600));
}

/* 그림자 효과 */
.shadow-soft {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 리스트 스타일 */
.custom-list li {
  @apply py-2 border-b border-gray-200 last:border-b-0;
}

.custom-list li::before {
  content: '•';
  @apply text-pink-400 font-bold mr-3;
}

/* 네비게이션 스타일 */
.nav-item.active {
  @apply text-pink-400;
}

.nav-item.active svg {
  @apply text-pink-400;
}

/* 결과 아이콘 색상 변경 */
.result-icon-secure {
  @apply bg-gradient-to-br from-green-300 to-green-500;
}

.result-icon-anxious {
  @apply bg-gradient-to-br from-red-300 to-red-500;
}

.result-icon-avoidant {
  @apply bg-gradient-to-br from-blue-300 to-blue-500;
}

.result-icon-fearful {
  @apply bg-gradient-to-br from-purple-300 to-purple-500;
}

/* 결과 배경 색상 */
.result-bg-secure {
  @apply bg-green-50;
}

.result-bg-anxious {
  @apply bg-red-50;
}

.result-bg-avoidant {
  @apply bg-blue-50;
}

.result-bg-fearful {
  @apply bg-purple-50;
}

/* 배지 색상 */
.badge-secure {
  @apply bg-green-100 text-green-700;
}

.badge-anxious {
  @apply bg-red-100 text-red-700;
}

.badge-avoidant {
  @apply bg-blue-100 text-blue-700;
}

.badge-fearful {
  @apply bg-purple-100 text-purple-700;
}