/* 1) 페이지 전체 프리로더 오버레이 */
#preloader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ebebeb;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 2) 스피너 아이콘 */
.spinner {
    font-size: 4rem;
    animation:
            spin 2s linear infinite,
            colorChange 4s ease-in-out infinite alternate;
}

/* 3) 회전 애니메이션 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 4) 색상 변화 애니메이션 */
@keyframes colorChange {
    from { color: #3e77ee; }
    to   { color: #ffffff; }
}