#introDiv, #unityDiv {
    width: 100%;
    height: 100%;
    transition: opacity 0.8s ease;
}

.logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    cursor: pointer;
    z-index: 1000; /* 다른 요소 위에 보이도록 */
}

/*권장브라우저 팝업*/
.info-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 0.8s;
}

    .info-popup.show {
        opacity: 1;
        pointer-events: auto;
    }

    .info-popup .dimm {
        position: absolute;
        top: 0;
        left: 0;
        width: 101%;
        height: 100%;
        /*background: transparent;*/
        background: url("../images/record/common_dimm.png") center center no-repeat;
        background-size: cover;
        z-index: 1;
    }

    .info-popup .message {
        position: relative;
        z-index: 2;
        width: 1170px;
        height: 223px;
        object-fit: contain;
    }

/*로딩 애니메이션*/
#introDiv.loading-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fbc600;
}

/* TS-00-001 */
.loading-center {
    
    left: 35.8%;
    width: 546px;
    height: 546px;
    position: fixed;
    flex-shrink: 0;
}


/* 회전 큰 원 */
.circle-large {
    position: absolute;
    width: 546px;
    height: 546px;
    background-image: url('../images/loading/common_loading_circle_ef.png');
    animation: rotate 6s linear infinite;
}

/* 회전 작은 원 */
.circle-small {
    position: absolute;
    width: 378px;
    height: 378px;
    top: 50%;
    left: 50%;
    background-image: url('../images/loading/common_loading_circle.png');
    transform: translate(-50%, -50%);
}

/* 악기 이미지 프레임 애니메이션 */
.instrument-frame {
    position: absolute;
    width: 320px;
    height: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    animation: instrumentAnim 5s steps(1) infinite;
}

/* 파티클 공통 */
.particle {
    position: absolute;
    opacity: 0.7;
    background-size: contain;
    background-repeat: no-repeat;
    animation: blink 1.5s infinite ease-in-out;
}

/* 각각의 파티클 위치와 이미지 설정 */
.p1 {
    width: 53px;
    height: 46px;
    left: 400px;
    top: 100px;
    background-image: url('../images/loading/common_loading_particle1.png');
    animation-delay: 0s;
}

.p2 {
    width: 52px;
    height: 49px;
    left: 30px;
    top: 200px;
    background-image: url('../images/loading/common_loading_particle2.png');
    animation-delay: 0.3s;
}

.p3 {
    width: 75px;
    height: 64px;
    left: 180px;
    top: 20px;
    background-image: url('../images/loading/common_loading_particle3.png');
    animation-delay: 0.6s;
}

.p4 {
    width: 25px;
    height: 43px;
    left: 300px;
    top: 450px;
    background-image: url('../images/loading/common_loading_particle4.png');
    animation-delay: 0.9s;
}

.p5 {
    width: 53px;
    height: 46px;
    left: 150px;
    top: 440px;
    background-image: url('../images/loading/common_loading_particle1.png');
    animation-delay: 1.2s;
}

.p6 {
    width: 52px;
    height: 49px;
    left: 450px;
    top: 300px;
    background-image: url('../images/loading/common_loading_particle2.png');
    animation-delay: 1.5s;
}

.p7 {
    width: 75px;
    height: 64px;
    left: 30px;
    top: 320px;
    background-image: url('../images/loading/common_loading_particle3.png');
    animation-delay: 1.8s;
}

/* 회전 애니메이션 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 깜빡임 애니메이션 */
@keyframes blink {
    0%, 100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

/* 악기 프레임 애니메이션 (Sprite 애니메이션처럼 steps 사용) */
@keyframes instrumentAnim {
    0% {
        background-image: url('../images/loading/common_loading_img1.png');
    }

    20% {
        background-image: url('../images/loading/common_loading_img2.png');
    }

    40% {
        background-image: url('../images/loading/common_loading_img3.png');
    }

    60% {
        background-image: url('../images/loading/common_loading_img4.png');
    }

    80%, 100% {
        background-image: url('../images/loading/common_loading_img5.png');
    }
}

/*로딩 인디케이터*/
#indicator-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* 터치/클릭 막기 */
    pointer-events: all;
}

/* 회전하는 원 */
#indicator-spinner {
    position: absolute;
    left: 48%;
    top: 48%;
    width: 85px;
    height: 85px;
    border: 10px solid #ccc;
    border-top-color: #fbc700; /* 노란색 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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