<template>
    <div class="loading-container">
      <div class="spinner">
        🐰
      </div>
      <p class="loading-text">잠시만 기다려 주세요...</p>
    </div>
  </template>

  <script setup>
  </script>

  <style scoped>
  /* 로딩 컨테이너 */
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f9f9f9;
  }

  /* 빙글빙글 돌아가는 스피너 */
  .spinner {
    font-size: 50px;
    animation: spin 1.2s linear infinite;
  }

  /* 로딩 텍스트 */
  .loading-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    font-family: "Comic Sans MS", "Arial", sans-serif;
  }

  /* 회전 애니메이션 */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  </style>
