/* ==============================================
   쌤박스(SsamBox) 공통 스타일
   모든 콘텐츠에 적용되는 통일된 디자인 시스템
   ============================================== */

/* === CSS 변수 === */
:root {
  --ssambox-bg: #0a0a1a;
  --ssambox-bar-bg: rgba(10, 10, 26, 0.75);
  --ssambox-bar-border: rgba(255, 255, 255, 0.08);
  --ssambox-text: #e8e8f0;
  --ssambox-text-muted: rgba(255, 255, 255, 0.5);
  --ssambox-accent: #4cc9f0;
  --ssambox-radius: 10px;
  --ssambox-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ssambox-font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === 글로벌 리셋 === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ssambox-bg);
  color: var(--ssambox-text);
  font-family: var(--ssambox-font);
  -webkit-font-smoothing: antialiased;
}

/* === 캔버스 컨테이너 === */
#ssambox-canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; /* 16:9 벗어나는 영역을 검은 레터박스로 채움 */
  z-index: 1;
}

#ssambox-canvas-container canvas {
  display: block;
  /* 컨테이너 크기(= iframe 뷰포트)가 어떤 비율이든 항상 16:9 유지 */
  max-width: min(100vw, 177.78vh);
  max-height: min(100vh, 56.25vw);
}

/* === 인포 패널 (콘텐츠 내 정보 표시용) === */
.ssambox-info {
  position: fixed;
  top: 16px;
  left: 16px;
  background: var(--ssambox-bar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ssambox-bar-border);
  border-radius: var(--ssambox-radius);
  padding: 12px 16px;
  z-index: 500;
  max-width: 280px;
  transition: var(--ssambox-transition);
  pointer-events: none;
}

.ssambox-info__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ssambox-accent);
  margin-bottom: 4px;
}

.ssambox-info__text {
  font-size: 12px;
  color: var(--ssambox-text-muted);
  line-height: 1.5;
}

/* === 로딩 화면 === */
.ssambox-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ssambox-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.ssambox-loading--done {
  opacity: 0;
  pointer-events: none;
}

.ssambox-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(76, 201, 240, 0.2);
  border-top-color: var(--ssambox-accent);
  border-radius: 50%;
  animation: ssambox-spin 0.7s linear infinite;
  margin-bottom: 16px;
}

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

.ssambox-loading__text {
  font-size: 14px;
  color: var(--ssambox-text-muted);
}

/* === 반응형 === */
@media (max-width: 480px) {
  .ssambox-info {
    top: 8px;
    left: 8px;
    max-width: 200px;
    padding: 8px 12px;
  }
}