@keyframes starMoveFast {
    0% { transform: translateY(0) translateX(0); opacity: 0.8; }
    50% { opacity: 1; }
    100% { transform: translateY(100vh) translateX(100vw); opacity: 0.8; }
}

@keyframes starMoveSlow {
    0% { transform: translateY(0) translateX(0); opacity: 0.8; }
    50% { opacity: 1; }
    100% { transform: translateY(100vh) translateX(100vw); opacity: 0.8; }
}

@keyframes fadeInElement {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

body {
    margin: 0;
    overflow: hidden; /* 스크롤바 숨기기 */
    background-color: #000; /* 완전 검은 우주 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
}

.space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000; /* 완전 검은 우주 */
    z-index: -1;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* 초기 투명도는 JS에서 설정 */
}

.star.small { width: 2px; height: 2px; }
.star.medium { width: 3px; height: 3px; }
.star.large { width: 4px; height: 4px; }


.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 20px;
}

.liquid-glass-box {
    background: rgba(255, 255, 255, 0.15); /* 투명한 흰색 */
    backdrop-filter: blur(10px); /* 유리 효과 */
    -webkit-backdrop-filter: blur(10px); /* 사파리 지원 */
    border-radius: 20px; /* 둥근 모서리 */
    padding: 40px 60px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* 은은한 그림자 */
    border: 1px solid rgba(255, 255, 255, 0.18); /* 미세한 테두리 */
    opacity: 0; /* JS에서 페이드인 애니메이션 적용 */
    transform: translateY(20px); /* 초기 위치 */
}

.text-td {
    font-size: 80px;
    font-weight: bold;
    color: white;
    letter-spacing: 5px;
    opacity: 0; /* JS에서 페이드인 애니메이션 적용 */
    transform: translateY(20px); /* 초기 위치 */
}

.loading-bar-wrapper {
    width: 300px; /* 로딩바 너비 */
    height: 15px; /* 로딩바 높이 */
    border-radius: 7.5px; /* 양 끝 둥글게 */
    overflow: hidden;
    opacity: 0; /* JS에서 나타나게 할 거임 */
}

.loading-bar-background {
    width: 100%;
    height: 100%;
    background-color: #555; /* 회색 배경 */
    border-radius: 7.5px; /* 양 끝 둥글게 */
    position: relative;
}

.loading-progress {
    width: 0%; /* JS에서 진행률 조절 */
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* 약간 어두운 흰색 로딩바 */
    border-radius: 7.5px; /* 양 끝 둥글게 */
    /* transition은 JS에서 직접 적용할 거임 */
}