/* 한국어 주석: 로딩 화면 전체 스타일 */
.loading-screen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 한국어 주석: 로딩 컨테이너 */
.loading-container {
   text-align: center;
   color: white;
   max-width: 400px;
   padding: 2rem;
}

/* 한국어 주석: 로고 이미지 스타일 */
.loading-logo {
   width: 120px;
   height: 120px;
   margin-bottom: 2rem;
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   animation: logoFloat 3s ease-in-out infinite;
   filter: brightness(1.1) contrast(1.1);
}

/* 한국어 주석: 로고 플로팅 애니메이션 */
@keyframes logoFloat {

   0%,
   100% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-10px);
   }
}

/* 한국어 주석: 로딩 제목 스타일 */
.loading-title {
   font-size: 1.8rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
   color: #ffffff;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.1);
   opacity: 0;
   animation: fadeInUp 1s ease-out 0.5s forwards;
}

/* 한국어 주석: 로딩 메시지 스타일 */
.loading-message {
   font-size: 1.1rem;
   margin-bottom: 0.5rem;
   color: #e0e6ed;
   text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
   opacity: 0;
   animation: fadeInUp 1s ease-out 0.7s forwards;
}

/* 한국어 주석: 로딩 부제목 스타일 */
.loading-subtitle {
   font-size: 0.9rem;
   color: #b8c5d1;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   margin-bottom: 2rem;
   opacity: 0;
   animation: fadeInUp 1s ease-out 0.9s forwards;
}

/* 한국어 주석: 페이드인 업 애니메이션 */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* 한국어 주석: 로딩 스피너 컨테이너 */
.loading-spinner-container {
   position: relative;
   margin-bottom: 1rem;
}

/* 한국어 주석: 커스텀 로딩 스피너 */
.loading-spinner {
   width: 50px;
   height: 50px;
   border: 3px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   border-top-color: #4fc3f7;
   border-right-color: #29b6f6;
   box-shadow: 0 0 20px rgba(79, 195, 247, 0.3);
   animation: spin 1s ease-in-out infinite;
   margin: 0 auto 1rem;
   opacity: 0;
   animation: spin 1s ease-in-out infinite, fadeIn 1s ease-out 1.1s forwards;
}

/* 한국어 주석: 스피너 회전 애니메이션 */
@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

/* 한국어 주석: 페이드인 애니메이션 */
@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* 한국어 주석: 진행률 바 컨테이너 */
.loading-progress {
   width: 100%;
   height: 4px;
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
   margin-top: 1rem;
   opacity: 0;
   animation: fadeIn 1s ease-out 1.3s forwards;
}

/* 한국어 주석: 진행률 바 */
.loading-progress-bar {
   height: 100%;
   background: linear-gradient(90deg, #4fc3f7, #29b6f6, #03a9f4);
   border-radius: 2px;
   box-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
   animation: progressAnimation 3s ease-in-out infinite;
}

/* 한국어 주석: 진행률 애니메이션 */
@keyframes progressAnimation {
   0% {
      width: 0%;
      transform: translateX(-100%);
   }

   50% {
      width: 100%;
      transform: translateX(0%);
   }

   100% {
      width: 100%;
      transform: translateX(100%);
   }
}

/* 한국어 주석: 로딩 화면 페이드아웃 */
.loading-screen.fade-out {
   opacity: 0;
   transition: opacity 0.5s ease-out;
}

/* 한국어 주석: 반응형 디자인 - 모바일 */
@media (max-width: 768px) {
   .loading-container {
      padding: 1rem;
      max-width: 300px;
   }

   .loading-logo {
      width: 100px;
      height: 100px;
      margin-bottom: 1.5rem;
   }

   .loading-title {
      font-size: 1.5rem;
   }

   .loading-message {
      font-size: 1rem;
   }

   .loading-subtitle {
      font-size: 0.8rem;
   }
}

/* 한국어 주석: 다크모드 지원 - 더 깊은 어둠 */
@media (prefers-color-scheme: dark) {
   .loading-screen {
      background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
   }

   .loading-logo {
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.05);
      border: 2px solid rgba(255, 255, 255, 0.1);
      filter: brightness(1.2) contrast(1.2);
   }

   .loading-title {
      color: #f8f9fa;
      text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 255, 255, 0.15);
   }

   .loading-message {
      color: #dee2e6;
   }

   .loading-subtitle {
      color: #adb5bd;
   }
}

/* 한국어 주석: 접근성 - 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {

   .loading-logo,
   .loading-title,
   .loading-message,
   .loading-subtitle,
   .loading-spinner,
   .loading-progress {
      animation: none;
   }

   .loading-title,
   .loading-message,
   .loading-subtitle,
   .loading-spinner,
   .loading-progress {
      opacity: 1;
   }
}