* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000 center/cover no-repeat;
}

/* 뷰포트 전체를 채우는 배경 레이어 — 빈 공간 없이 꽉 채움 */
#bg-cover {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 스테이지 래퍼 — bg-cover 위, 항상 화면 중앙 */
#stage-wrapper {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 1920px DOM 너비가 모바일 뷰포트 계산에 영향을 주지 않도록 */
}

/* 1920×1080 고정 캔버스 — stage.js scale()로 뷰포트에 맞춤 */
#stage {
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* 세로 모드 안내 */
#rotate-warning {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 22px;
  text-align: center;
  letter-spacing: -0.5px;
}

#rotate-warning .icon {
  font-size: 56px;
  animation: spin 2s linear infinite;
}

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

/* 세로 모드: 스테이지는 vw/1920 비율로 자동 스케일 (stage.js가 처리)
   회전 안내는 제거 — 모바일/태블릿 세로 모드에서도 콘텐츠 표시 */
#rotate-warning { display: none !important; }