@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Custom font face */
  @font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  /* Base styles */
  html {
    @apply antialiased;
  }

  body {
    @apply bg-background-light text-text-dark;
  }

  /* Typography */
  h1 {
    @apply text-3xl font-bold text-text-dark mb-4;
  }

  h2 {
    @apply text-2xl font-bold text-text-dark mb-3;
  }

  h3 {
    @apply text-xl font-semibold text-text-dark mb-2;
  }

  p {
    @apply text-base leading-relaxed mb-4;
  }

  a {
    @apply text-primary-blue hover:text-accent-orange transition-colors duration-200;
  }
}

@layer components {
  /* Navigation styles */
  .nav-link {
    @apply text-text-dark hover:text-primary-blue transition-colors duration-200 font-medium;
  }
  
  .nav-link-active {
    @apply nav-link text-primary-blue border-b-2 border-primary-blue;
  }
  
  .logo-text {
    @apply text-xl font-bold text-primary-blue;
  }
  
  .logo-icon {
    @apply w-8 h-8 bg-primary-blue rounded-lg flex items-center justify-center;
  }

  /* Button styles */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-primary-blue text-white focus:ring-primary-blue;
  }

  .btn-secondary {
    @apply btn bg-white text-primary-blue border border-primary-blue hover:bg-gray-50 focus:ring-primary-blue;
  }

  .btn-accent {
    @apply btn bg-accent-orange text-white hover:bg-orange-600 focus:ring-accent-orange;
  }

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

  /* Form styles */
  .form-group {
    @apply mb-6;
  }

  .form-label {
    @apply block text-sm font-medium text-text-dark mb-2;
  }
  
  .form-label.required::after {
    content: " *";
    @apply text-error-red;
  }

  .form-input {
    @apply w-full px-4 py-3 border border-border-gray rounded-lg focus:ring-2 focus:ring-primary-blue focus:border-primary-blue transition-all duration-200 placeholder-text-gray/60;
  }

  .form-textarea {
    @apply form-input resize-none;
  }

  .form-error {
    @apply text-sm text-error-red mt-1;
  }
  
  .form-help {
    @apply text-xs text-text-gray mt-1;
  }
  
  .file-drop-zone {
    @apply flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-primary-blue transition-colors;
  }
  
  .file-drop-zone.active {
    @apply border-primary-blue bg-blue-50;
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-border-gray p-6;
  }

  .card-hover {
    @apply card hover:shadow-md hover:border-primary-blue/20 transition-all duration-200 cursor-pointer;
  }
  
  .post-card {
    @apply card-hover h-full flex flex-col;
  }
  
  .post-meta {
    @apply flex items-center gap-4 text-sm text-text-gray mt-auto pt-4;
  }
  
  .post-meta-item {
    @apply flex items-center gap-1;
  }

  /* Badge styles */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

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

  .badge-success {
    @apply badge bg-green-100 text-success-green;
  }

  .badge-warning {
    @apply badge bg-yellow-100 text-warning-yellow;
  }

  .badge-danger {
    @apply badge bg-red-100 text-error-red;
  }

  /* Alert styles */
  .alert {
    @apply p-4 rounded-lg mb-4 flex items-start;
  }

  .alert-info {
    @apply alert bg-blue-50 text-primary-blue border border-blue-200;
  }

  .alert-success {
    @apply alert bg-green-50 text-success-green border border-green-200;
  }

  .alert-warning {
    @apply alert bg-yellow-50 text-warning-yellow border border-yellow-200;
  }

  .alert-danger {
    @apply alert bg-red-50 text-error-red border border-red-200;
  }
}

@layer utilities {
  /* Custom utilities */
  .text-gradient {
    @apply bg-gradient-to-r from-primary-blue to-accent-orange bg-clip-text text-transparent;
  }

  .shadow-soft {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Base styles */
  html {
    @apply antialiased;
  }

  body {
    @apply bg-gray-50 text-gray-900;
  }
}

@layer components {
  /* Navigation styles */
  .nav-link {
    @apply text-gray-900 hover:text-blue-600 transition-colors duration-200 font-medium;
  }
  
  .logo-text {
    @apply text-xl font-bold text-blue-600;
  }
  
  .logo-icon {
    @apply w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center;
  }

  /* Button styles */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-600;
  }

  /* Form styles */
  .form-group {
    @apply mb-6;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-900 mb-2;
  }

  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 transition-all duration-200;
  }

  .form-textarea {
    @apply form-input resize-none;
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
  }

  /* Alert styles */
  .alert {
    @apply p-4 rounded-lg mb-4 flex items-start;
  }

  .alert-success {
    @apply alert bg-green-50 text-green-900 border border-green-200;
  }

  .alert-danger {
    @apply alert bg-red-50 text-red-900 border border-red-200;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */