/* 전역 리셋 */
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #000;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* ===== PC 스타일 (기본값) ===== */
#unity-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

/* PC에서 9:16 비율 래퍼 */
#aspect-wrapper {
  position: relative;
  background: #000;
  max-width: 100%;
  max-height: 100%;
}

/* PC: 가로가 넓은 경우 */
@media (min-aspect-ratio: 9/16) {
  #aspect-wrapper {
    height: 100vh;
    width: calc(100vh * (9/16));
  }
}

/* PC: 세로가 긴 경우 */
@media (max-aspect-ratio: 9/16) {
  #aspect-wrapper {
    width: 100vw;
    height: calc(100vw * (16/9));
  }
}

/* ===== 모바일 스타일 ===== */
/* 터치 디바이스 또는 작은 화면 */
@media (hover: none) and (pointer: coarse)
{
  #unity-container {
    /* 모바일에서는 safe area 적용 */
    position: fixed;
    top: env(safe-area-inset-top);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left);
  }
}

/* 모바일: 가로가 넓은 경우 */
@media (hover: none) and (pointer: coarse) and (min-aspect-ratio: 9/16) 
{
  #aspect-wrapper {
    height: 100%;
    width: calc(100% * (9/16));
    aspect-ratio: 9/16;
  }
}
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 9/16)
{
  #aspect-wrapper {
    width: 100%;
    height: calc(100% * (16/9));
    aspect-ratio: 9/16;
  }
}

/* iOS Safari 특별 처리 (모바일만) */
@supports (padding: env(safe-area-inset-top)) and (hover: none) and (pointer: coarse)
{
  #unity-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* padding으로 safe area 확보 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Unity Canvas는 동일 */
#unity-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: #222;
  display: block;
}

/* 로딩바 및 기타 요소들은 기존 그대로 유지 */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  width: 80%;
  max-width: 547px;
  position: relative;
}

#progress-bar-wrapper {
  position: relative;
}

#progress-bar-wrapper::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: calc(124 / 547 * 100%);
}

#unity-progress-bar-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #fff;
  z-index: 1;
  transition: width 0.2s linear;
}

#unity-progress-bar-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, 0);
  background: white;
  padding: 10px;
  display: none;
}

.vip-btn {
  display:inline-block;
  padding:12px 22px;
  margin:0 22px;                 /* 버튼 간격 */
  font-size:15px;
  font-weight:600;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s ease, transform .1s ease;
  -webkit-appearance:none;      /* iOS 기본 스타일 제거 */
}
.vip-btn:active { transform:scale(.96); }

/* 기본(Install) / 보조(Cancel) */
.vip-btn--primary   { background:#4CAF50; color:#fff; }
.vip-btn--primary:hover { background:#43A047; }

.vip-btn--ghost     { background:#f0f0f0; color:#333; }
.vip-btn--ghost:hover   { background:#e2e2e2; }