/* ========== 전역 ========== */
html, body {                 /* ★ CHANGED: 스크롤/패닝 원천 차단 */
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

:root {                      /* ★ CHANGED: visualViewport 값 반영용 변수 */
  --vvh: 100vh;
  --vvw: 100vw;
  --vvTop: 0px;
  --vvLeft: 0px;
}

/* ========== 뷰포트 래퍼 ========== */
/* ★ CHANGED: 이 래퍼는 HTML에 추가했던 #unity-viewport 요소용 */
#unity-viewport {
  position: fixed;           /* 브라우저 스크롤/패닝과 무관하게 고정 */
  left: 0; top: 0; right: 0; bottom: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  width: var(--vvw);
  height: var(--vvh);
  transform: translate(var(--vvLeft), var(--vvTop)); /* 키보드 오프셋 보정 */
}

/* ========== 유니티 컨테이너/캔버스 ========== */
#unity-container {           /* ★ CHANGED: 고정 해제 + 중앙 배치만 담당 */
  position: absolute;        /* (width/height는 JS에서 계산/세팅) */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#unity-container.unity-desktop {    /* (사용 안 해도 되지만, 호환 위해 남김) */
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}

/* 모바일에선 JS가 container 크기 정하면, 캔버스는 그 안을 100% 채움 */
#unity-container.unity-mobile { position: absolute; width: auto; height: auto; } /* ★ CHANGED */
#unity-canvas {
  background: #231F20;
  max-width: 100vw;
  max-height: 100vh;
  border: 0px solid #000000;
  box-sizing: border-box;
}
.unity-mobile #unity-canvas { width: 100%; height: 100%; }

/* ========== 로딩/배너 등 기존 스타일 ========== */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#unity-logo {
  display: block;
  height: 34vw;
  max-height: 146px;
  aspect-ratio: 4.1714;
  background: url('unity-logo-dark.png') no-repeat center;
  background-size: contain;
  margin: 40px;           /* 음수마진 제거 */
}

#unity-progress-bar-empty {
  width: 300px; height: 24px; margin: 0 auto;
  background: url('progress-bar-empty-dark.png') no-repeat center;
  background-size: 100% 100%;
  position: relative; overflow: hidden; box-sizing: border-box;
}
#unity-progress-bar-full {
  position: absolute; left: 0; top: 0;
  width: 0%; height: 100%;
  background: url('progress-bar-full-dark.png') no-repeat left center;
  background-size: 100% 100%;
  transition: width 0.2s;
  box-sizing: border-box;
}
#unity-footer { position: relative } 
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center; cursor: pointer; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

#loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  margin: 0;
  --bar-duration: 0.7s;
  --wave-duration: 0.5s;
  --end-delay: 0.2s;
}
#loading-dots div {
  background-color: #fff;
  width: 6px;
  height: 24px;
  margin: 0 4.5px;
  border-radius: 3px;
  transform-origin: center;
  animation-name: scale-up-down;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-iteration-count: infinite;
  animation-duration: calc(var(--bar-duration) + var(--wave-duration) + var(--end-delay));
}
#loading-dots div:nth-child(1) { animation-delay: 0s; }
#loading-dots div:nth-child(2) { animation-delay: calc(var(--wave-duration) / 3); }
#loading-dots div:nth-child(3) { animation-delay: calc(var(--wave-duration) / 3 * 2); }
#loading-dots div:nth-child(4) { animation-delay: var(--wave-duration); }

@keyframes scale-up-down {
  0%, 25%, 100% { transform: scaleY(1); }
  12.5% { transform: scaleY(1.5); }
}

#splash-screen {
  position: fixed; 
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: white;
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
}
.logo {
  display: flex; justify-content: center; align-items: center;
  width: clamp(200px, 40vh, 350px);
  object-fit: contain; 
}