html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 캔버스는 항상 블록 요소로 */
canvas {
    display: block;
}

/* 공통 컨테이너 레이아웃 */
#unity-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

/* 데스크톱일 때: 가운데 정렬된 고정 크기 캔버스 느낌 */
#unity-container.unity-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 모바일일 때: 화면 전체를 캔버스가 채우도록 */
#unity-container.unity-mobile {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

/* Unity 캔버스 기본 */
#unity-canvas {
    /* JS에서 width/height 지정해주기 때문에 여기선 max 한 번만 잡아줌 */
    max-width: 100%;
    max-height: 100%;
    background: #000;
}

/* 로고 자리 (이미지 있으면 넣어서 쓰면 됨) */
#unity-logo {
    text-align: center;
    margin-bottom: 12px;
    pointer-events: none;
}

#unity-logo img {
    max-width: 80%;
    max-height: 80%;
    pointer-events: none;
}

#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  pointer-events: none;
  z-index: 10;
}

#unity-progress-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 바와 스피너를 같은 기준폭으로 묶기 */
#unity-loading-spinner{
  will-change: transform;
  width: 64px;
  height: 64px;
  background: url("./circle.png") no-repeat center;
  background-size: contain;

  animation: spin 1s linear infinite; 
  transform-origin: 50% 50%;
  pointer-events: none;
}

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

/* 프레임 바는 wrap 폭을 그대로 사용 */
/* #unity-progress-bar-empty {
    width: 100%;
    height: 10px;

    border: none;
    padding: 0;
    box-sizing: border-box;

    background: url("./progress_frame.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
} */

/* 실제 채워지는 부분 */
/* #unity-progress-bar-full {
    width: 0%;
    height: 100%;

    background: url("./progress_fill.png") repeat-x left center;
    background-size: 100% 100%;
    transition: width 0.3s ease;
} */

/* 하단 푸터 영역 (로고 / 풀스크린 버튼 / 빌드 타이틀) */
#unity-footer { display: none !important; }


/* WebGL / Unity 로고 자리 (이미지 있으면 background로) */
#unity-webgl-logo { pointer-events: none; }

/* 풀스크린 버튼 */
#unity-fullscreen-button 
{ 
    display: none !important; 
}

#unity-fullscreen-button::before{
  content:"⤢";
  font-size:14px;
}

/* 빌드 타이틀 텍스트 */
#unity-build-title { pointer-events: none; }

/* 모바일에서 푸터가 너무 두껍지 않게 조정 */
@media (max-width: 768px) {
    /* #unity-progress-wrap {
        width: 60%;
        min-width: 160px;
    } */

    #unity-loading-spinner{
        width: 48px;
        height: 48px;
        margin-top: 0; 
    }

    #unity-footer {
        font-size: 11px;
        padding: 4px;
        gap: 8px;
    }

    #unity-webgl-logo,
    #unity-fullscreen-button {
        width: 28px;
        height: 28px;
    }
}