html,
body {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

@layer utilities {
  @keyframes gradientMove {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .bg-gradient-animate {
    background: linear-gradient(-270deg, #C8E3FF, #fa9726, #e50505);
    background-size: 200% 200%;
    animation: gradientMove 4s ease infinite;
  }

  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
  @media (max-width: 1023px) {
    .animate-marquee {
      animation: marquee 5s linear infinite;
    }
  }

  @keyframes scalePulse {
    0% {
      transform: scale(1);
      opacity: 0.4;
    }
    10% {
      transform: scale(1.15);
      opacity: 1;
    }
    25% {
      transform: scale(1.15);
      opacity: 1;
    }
    35% {
      transform: scale(1);
      opacity: 0.4;
    }
    100% {
      transform: scale(1);
      opacity: 0.4;
    }
  }

  .animate-scale-pulse {
    animation: scalePulse 3.5s ease-in-out infinite;
    display: inline-block;
    will-change: transform, opacity;
    opacity: 0.4;
    animation-fill-mode: both;
  }

  .delay-1 {
    animation-delay: 0s;
  }
  .delay-2 {
    animation-delay: 0.875s;
  }
  .delay-3 {
    animation-delay: 1.75s;
  }
  .delay-4 {
    animation-delay: 2.625s;
  }

  .faq-item {
    transition: opacity 0.3s ease;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .faq-group:hover .faq-item {
    opacity: 0.5;
  }

  .faq-group .faq-item:hover {
    opacity: 1;
  }
}

/* 스크롤바 숨김 유틸리티 */
.scrollbar-hide::-webkit-scrollbar {
  display: none !important;
}
.scrollbar-hide {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
}

@media (max-width: 479px) {
  .system_size {
    width: 100%;
    max-width: 300px;
  }
}

@media (min-width: 480px) {
  .system_size {
    width: 100%;
    max-width: 380px;
  }
}

@media (min-width: 1024px) {
  .system_size {
    width: 100%;
    max-width: 900px;
  }
}