body {
    font-family: "Pretendard", sans-serif;
  }

  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out both;
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out both;
  }

  .about-icon {
    max-width: 100%;
    height: 60%;
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out both;
  }

  @keyframes modal-slide-in {
    0% {
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .animate-modal {
    animation: modal-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes bouncePop {
    0%,
    80%,
    100% {
      transform: scale(1);
      opacity: 0.6;
    }
    40% {
      transform: scale(1.3);
      opacity: 1;
    }
  }

  .logo-bounce {
    width: 40px;
    height: 40px;
    animation: bouncePop 1.5s infinite ease-in-out;
  }

  .logo-bounce2 {
    width: 60px;
    height: 60px;
    animation: bouncePop 1.5s infinite ease-in-out;
  }

  .logo-bounce.mobile {
    width: 64px;
    height: 64px;
  }

  .delay-0 {
    animation-delay: 0s;
  }

  .delay-1 {
    animation-delay: 0.3s;
  }

  .delay-2 {
    animation-delay: 0.6s;
  }

  .delay-3 {
    animation-delay: 0.9s;
  }

  /* 스크롤 스냅 관련 스타일 추가 */
  html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }

  section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .form-input {
    width: 100%;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    font-size: 0.875rem; /* text-sm */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.75rem; /* rounded-xl */
    outline: none;
    transition: all 0.2s;
  }

  .form-input:focus {
    border-color: #0064FF;
    box-shadow: 0 0 0 2px rgba(0, 100, 255, 0.3); /* focus:ring-2 focus:ring-[#0064FF] 비슷한 느낌 */
  }