/* 공통 스타일 (라이트 모드 기본) */
#splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #ffffff; /* 라이트 모드 배경 */
  color: #333333;      /* 로딩 텍스트 색 */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  z-index: 9999;
  transition: opacity .25s ease;
}

/* 로고 */
.splash-logo {
  width: clamp(32px, 12vw, 60px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  content: url("logo_light.png"); /* 라이트 모드 로고 */
}

/* 스피너 (모드 공통) */
.spinner {
  width: 25px;
  height: 25px;
  border: 3px solid rgba(255, 140, 0, 0.25);
  border-top-color: #ff8c00;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 보조 문구 */
.splash-text {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .85;
  color: #777;
}

/* 🌙 다크 모드용 설정 */
@media (prefers-color-scheme: dark) {
  #splash {
    background: #222222;  /* 어두운 배경 */
    color: #e8eef5;       /* 글자 색 밝게 */
  }

  .splash-text {
    color: #aaa;          /* 부드러운 회색 텍스트 */
  }

  .splash-logo {
    content: url("logo_dark.png"); /* 다크 모드 전용 로고 */
  }
}