/* 글래스모피즘 효과 */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 그라디언트 배경 */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dark .gradient-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
}

/* 플로팅 요소들 */
.floating-element {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    width: 80px;
    height: 80px;
    background: #3B82F6;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    width: 120px;
    height: 120px;
    background: #8B5CF6;
    top: 20%;
    right: 10%;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    width: 60px;
    height: 60px;
    background: #06B6D4;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

.floating-element:nth-child(4) {
    width: 100px;
    height: 100px;
    background: #F59E0B;
    bottom: 10%;
    right: 20%;
    animation-delay: 1s;
}

/* 입력 필드 포커스 효과 */
.input-glow:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.2);
}

/* 로딩 애니메이션 */
.loading-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 2px solid #ffffff;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.3);
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.3);
}