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

@layer base {
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

@layer components {
  .race-card {
    @apply bg-dark-card border border-dark-border rounded-xl p-6 shadow-lg;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(10, 10, 10, 0.9) 100%);
  }

  .card-header {
    @apply mb-6 pb-4 border-b border-dark-border;
  }

  .race-list {
    @apply space-y-2;
    min-height: 400px;
  }

  .race-item {
    @apply bg-dark-bg border border-dark-border rounded-lg p-4 flex items-center justify-between;
    @apply transition-all duration-300;
    position: relative;
    will-change: transform;
  }

  .race-item.rank-up {
    @apply border-neon-green;
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.3);
  }

  .race-item.rank-down {
    @apply border-neon-red;
    box-shadow: 0 0 10px rgba(255, 56, 100, 0.3);
  }

  .race-rank {
    @apply text-2xl font-bold w-12 text-center;
  }

  .race-symbol {
    @apply text-lg font-semibold flex-1 ml-4;
  }

  .race-value {
    @apply text-xl font-bold;
  }

  .race-value.positive {
    @apply text-neon-green;
  }

  .race-value.negative {
    @apply text-neon-red;
  }

  .feature-card {
    @apply bg-dark-card border border-dark-border rounded-lg p-6;
  }

  .dashboard-content {
    @apply bg-dark-card border border-dark-border rounded-xl p-6;
  }
}

/* GSAP 애니메이션을 위한 클래스 */
.race-item.animating {
  z-index: 10;
}