@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  html {
    font-family: 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    @apply text-gray-900;
  }

  body {
    @apply antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }

  h1 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }

  h2 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }

  h3 {
    @apply text-xl md:text-2xl lg:text-3xl;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-slate-800 text-white hover:bg-slate-900 focus:ring-slate-600;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }

  .input {
    @apply block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-600 focus:border-slate-600 transition-colors duration-200;
  }

  .label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }

  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

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

/* Quill Editor Custom Styles */
.ql-container {
  @apply text-base;
}

.ql-editor {
  @apply min-h-[300px];
}

.ql-toolbar {
  @apply border-t-0 border-l-0 border-r-0 border-b border-gray-300;
}

/* Map Container */
.map-container {
  @apply w-full h-[400px] lg:h-[500px] rounded-lg overflow-hidden;
}

/* Loading Spinner */
.spinner {
  @apply inline-block w-8 h-8 border-4 border-gray-200 border-t-slate-800 rounded-full animate-spin;
}

/* Star Rating */
.star-rating {
  @apply flex items-center gap-1;
}

.star {
  @apply w-5 h-5 text-yellow-400;
}

.star.empty {
  @apply text-gray-300;
}

/* Page transitions */
.page-enter-active,
.page-leave-active {
  transition: all 0.2s;
}
.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}
.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}