@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  /* 커스텀 브레이크포인트 */
  --breakpoint-smalltablet: 600px;
  --breakpoint-tablet: 600px;
  --breakpoint-pc: 990px;

  /* 커스텀 애니메이션 */
  --animate-fade-in: fade-in 0.8s ease-in-out;
  --animate-fade-in-fast: fade-in-fast 0.3s ease-in-out;
  --animate-fade-in-up: fade-in-up 1s ease-out;
  --animate-float: float 3s ease-in-out infinite;
}

@custom-variant smalltablet (@media (width >= 600px));
@custom-variant pc (@media (width >= 990px));

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-fast {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}