/* Custom styles for Unity WebGL Player */
body { 
    font-family: 'Roboto', sans-serif; 
    letter-spacing: 0.05em; 
    font-size: max(2vw, 2vh); 
    color: white;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
    width: 100%;
    height: 100vh;
    position: fixed;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

button {
    height: max(5vw, 5vh);
    font-size: max(2vw, 2vh);
    font-weight: bold; 
    border-radius: max(1.5vw, 1.5vh); 
    padding-left: max(5vw, 5vh); 
    padding-right: max(5vw, 5vh); 
    border: 0; 
    color: #62a7fe; 
    background: #3d3d3d; 
    transition: 0.1s;
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
}

button:hover { 
    filter: brightness(1.15);
}

button:active { 
    transform: scale(0.95); 
    filter: brightness(0.85);
}

.ctaDiv { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: #2f2e32aa; 
    z-index: 99; 
    transition: 0.5s;
}

#webcam-video {
    width: 1px;
    position: absolute;
}

#video-canvas {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    position: absolute;
}

#startARDiv {
    background: #2f2e32;
    display: none; /* Hide AR permission dialog by default */
}

#chooseCamSel {
    display: none; 
    background: transparent; 
    border: .05vh solid white; 
    border-radius: max(0.5vw, 0.5vh); 
    color: white; 
    font-size: max(1.5vw, 1.5vh); 
    position: absolute; 
    bottom: 80px;
}

#startARDiv p {
    text-align: center; 
    width: min(60vw, 60vh);
}

#startARButton {
    display: none;
}

#screenshotDiv, #confirmUrlDiv, #errorDiv {
    display: none; 
    opacity: 0;
}

#errorDiv {
    background-color: #2c2b2f;
}

#errorText {
    text-align: center; 
    width: 60vw; 
    color: #7f3f3f; 
    font-size: max(3vw, 3vh);
}

.screenshot-container {
    position: relative; 
    background-color: #2c2b2f; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25); 
    border-radius: max(1.5vh, 1.5vw); 
    text-align: center; 
    overflow: hidden;
}

#screenshotImg {
    width: 80vw; 
    height: 80vh;
}

.close-button {
    position: absolute;
    right: max(1vw, 1vh);
    top: max(1vw, 1vh);
    background: #3d3d3d77; 
    width: max(4vw, 4vh); 
    height: max(4vw, 4vh);
    padding: 0;
    border-radius: 100vw; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshot-note {
    font-size: max(1vw, 1vh); 
    color: #fff6;
}

.url-confirm-container {
    position: relative; 
    background-color: #2c2b2f; 
    padding: 10px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25); 
    width: min(80vw,80vh); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    border-radius: 1.5vh;
}

#confirmUrlText {
    text-align: center; 
    width: 80%; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.url-buttons {
    width: 100%;
}

.url-confirm-button {
    width: 100%; 
    margin-bottom: 15px;
}

.url-cancel-button {
    width: 100%;
}

/* Unity 캔버스 중앙 정렬 및 모바일 최적화 */
#unity-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#unity-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

/* 9:16 비율 유지 (모바일 세로 화면용) */
@media (max-width: 500px), (orientation: portrait) {
    #unity-canvas {
        width: 100% !important; 
        height: auto !important;
        /* 9:16 비율 계산 (width의 16/9배) */
        aspect-ratio: 9/16;
    }
}

/* 랜드스케이프 모드일 때 화면 채우기 */
@media (min-width: 501px) and (orientation: landscape) {
    #unity-canvas {
        width: auto !important;
        height: 100% !important;
        /* 9:16 비율 유지 (height의 9/16배) */
        aspect-ratio: 9/16;
    }
}

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

#unity-progress-bar-empty {
    width: 141px;
    height: 18px;
    margin: 10px auto;
    background: url('TemplateData/progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full {
    width: 0%;
    height: 18px;
    margin: 0 auto;
    background: url('TemplateData/progress-bar-full-dark.png') no-repeat center;
}

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