/* --- 테마 및 변수 설정 (Mystic Dark & Silver) --- */
:root {
    /* 텍스트: Silver Grey와 은은한 푸른빛 */
    --text-main: #E2E8F0;
    --text-sub: #94A3B8;

    /* 포인트 컬러: 신금(辛金)의 Silver와 목(木) 기운의 Cyan/Blue */
    --accent-silver: #C0C0C0;
    --accent-metal: #94A3B8;
    --accent-blue: #3B82F6;
    --accent-cyan: #22D3EE;

    /* 글래스모피즘: 극도로 얇고 투명한 유리 질감 */
    --glass-bg: rgba(15, 23, 42, 0.25);
    /* 투명도 대폭 상향 */
    --glass-border: rgba(255, 255, 255, 0.1);
    /* 테두리를 은빛/흰빛으로 선명하게 */
    --accent-glow: rgba(34, 211, 238, 0.4);

    /* 오행 색상 (다크모드에 맞춘 보석/네온 톤으로 최적화) */
    --wood: #10B981;
    --fire: #EF4444;
    --earth: #F59E0B;
    --metal: #94A3B8;
    --water: #3B82F6;
    --unknown: #334155;
    /* 알 수 없음 (Slate 700) */
    --danger: #ff6b6b;
}

/* --- 기본 초기화 (화면 쏠림 버그 해결) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
    user-select: none;
    -webkit-user-select: none;
    /* 화면 쏠림을 방지하기 위해 100vw 대신 100% 사용, 기본 배경색 고정 */
    background-color: #020617;
    color: var(--text-main);
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* --- 🌟 배경 오로라 (글래스모피즘의 핵심: 빛의 산란) --- */
#app::before,
#app::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* 강한 블러로 신비로운 빛 연출 */
    z-index: -1;
    /* 패널들 뒤로 배치 */
    pointer-events: none;
}

/* 좌측 상단의 밝은 시안(Cyan) 빛 */
#app::before {
    top: -10%;
    left: -5%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, transparent 70%);
}

/* 우측 하단의 깊은 블루(Blue) 빛 */
#app::after {
    bottom: -10%;
    right: -5%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
}

/* --- 공통 애니메이션 --- */

/* 1. 무중력 부유 애니메이션 */
@keyframes floatIcon {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* 2. 시안(Cyan) & 은빛(Silver) 숨쉬기 아우라 */
@keyframes auraPulse {
    0% {
        box-shadow: 0 0 20px rgba(34, 211, 238, 0.3),
            0 0 0px rgba(59, 130, 246, 0),
            inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 40px rgba(34, 211, 238, 0.7),
            0 0 60px rgba(59, 130, 246, 0.5),
            inset 0 0 20px rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 20px rgba(34, 211, 238, 0.3),
            0 0 0px rgba(59, 130, 246, 0),
            inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
}

/* 3. Fade-in & Slide-up 애니메이션 */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. 버튼 숨쉬기 애니메이션 */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); }
    50% { box-shadow: 0 0 25px rgba(34, 211, 238, 0.8), 0 0 10px rgba(59, 130, 246, 0.6); }
    100% { box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); }
}

/* 5. 로딩 스피너 애니메이션 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}