:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

/* iOS 11 이하 버전 대응 (constant() 사용) */
@supports (constant(safe-area-inset-top)) {
    :root {
        --sat: constant(safe-area-inset-top);
        --sar: constant(safe-area-inset-right);
        --sab: constant(safe-area-inset-bottom);
        --sal: constant(safe-area-inset-left);
    }
}

html {
    background: #0A0909;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* iOS 고무줄 스크롤/스크롤 오프셋으로 인한 터치 판정 밀림 방지 */
    position: fixed;
    inset: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    touch-action: none;
}

body {
    padding: 0;
    margin: 0;
}

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

    background: #0A0909; 
}

#unity-canvas {
    width: 100%;
    height: 100%;
    background: #0A0909;
    touch-action: none;
    -ms-touch-action: none;
}

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

#unity-logo {
    width: calc(14.4444vh * 2.7);
    height: 14.4444vh;
    aspect-ratio: 2.7;
    max-height: 14.4444vh;
    background: url('splash.png') no-repeat center;
    background-size: contain;
}

/* @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #unity-logo {
        transform: scale(0.5);
    }
} */

#unity-progress-bar-empty {
    margin-left: auto;
    margin-right: auto;
    width: calc(14.4444vh * 2.7);
    height: 20px;
    margin-top: 10px;
    background: url('progress-bar-empty-dark.png') no-repeat center;
    background-size: 100% 100%;
}

#unity-progress-bar-full {
    width: 0%;
    height: 20px;
    margin-top: 10px;
    background: url('progress-bar-full-dark.png') no-repeat center;
    background-size: 100% 100%;
}

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

/* #webview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
} */

#webview-container {
    position: absolute;
    left: 50%;
    top: 11.7%;
    transform-origin: center top;
    
    /* transform: translate(-50%, -50%); */
    /* width: 100%;
    height: 100%; */
    z-index: 1000;
    background: white;
    display: none;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


#webview-iframe {
    width: 100%;
    height: 100%;
    border: none;
}
/* 
#close-webview {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
} */

#close-webview:hover {
    background: rgba(0, 0, 0, 0.7);
}