body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-touch-callout: none;  /* iOS Safari */
  -webkit-user-select: none;    /* Safari */
  -khtml-user-select: none;     /* Konqueror HTML */
  -moz-user-select: none;       /* Firefox */
  -ms-user-select: none;        /* Internet Explorer/Edge */
  user-select: none;            /* Non-prefixed version */
  background-color: #041427;
  background-image: url("../public/bg_01.jpg");
  background-position: center;
  background-size: cover; /* 화면을 꽉 채우고 비율 유지 */
  background-repeat: no-repeat;
}

#unity-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#unity-container.unity-mobile {
  width: 100%;
  height: 100%;
  position: fixed;
}

#unity-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #041427;
  overflow: hidden;
  touch-action: none;
}

/* 로딩 바 컨테이너 위치 조정 */
#unity-loading-bar {
  position: absolute;
  width: 80%;
  max-width: 256px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

#unity-progress-bar-full {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 9999px;
}

#unity-progress-bar-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  z-index: 10;
}

/* iPad 특정 설정 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  html, body {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  #unity-container, 
  #unity-container.unity-mobile {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }

  #unity-canvas {
      position: fixed;
      width: 100%;
      height: 100%;
  }
}

/* 안전 영역 처리 */
@supports (padding: max(0px)) {
  #unity-container {
      padding-top: max(env(safe-area-inset-top), 0px);
      padding-bottom: max(env(safe-area-inset-bottom), 0px);
      padding-left: max(env(safe-area-inset-left), 0px);
      padding-right: max(env(safe-area-inset-right), 0px);
      height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}