/* 기본 스타일 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 스크롤 제거 */
    background-color: #000; /* 배경색 설정 */
}

/* Unity WebGL 컨테이너 */
#unity-container {
    position: relative;
    aspect-ratio: 16 / 9; /* 16:9 비율 유지 */
    width: min(100vw, 100dvh * 16 / 9); /* 가로 제한 */
    height: min(100dvh, 100vw * 9 / 16); /* 세로 제한 */
    background-image: url('./bg.png'); /* 초기 배경 이미지 */
    background-size: cover;
    background-position: center;
}


/* 로딩 바와 기타 요소 */
#unity-loading-bar {
    position: absolute;
    bottom: 5%;
    left: 50%; /* 화면의 가로 중앙 기준 */
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    width: 80%;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#unity-progress-bar-full {
    height: 100%;
    background-color: #FFD301;
    width: 0%;
    transition: width 0.2s ease;
}
#unity-progress-bar-empty {
    height: 100%;
    width: 100%; 
    background-color: #08004B;
}
/* Unity 캔버스 */
#unity-canvas {
    aspect-ratio: 16 / 9; /* 16:9 비율 유지 */
    width: 100%; /* 기본으로 가로를 꽉 채움 */
    height: auto; /* 자동 높이 조정 */
    max-height: 100%; /* 세로 초과 방지 */
    max-width: calc(100vh * 16 / 9); /* 세로 기준으로 가로 제한 */
    outline: none;
    display: block;
}

/* 전체화면 버튼 및 푸터 */
#unity-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

#unity-fullscreen-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#unity-fullscreen-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}