/* 1. 기본 폰트 및 배경 설정 */
body { 
    font-family: 'Noto Sans KR', sans-serif; 
    background-color: #020c1b; /* 아주 짙은 네이비 (기본 배경) */
    color: #e6f1ff; /* 기본 글씨: 밝은 하늘색 톤의 흰색 */
    overflow-x: hidden;
}

/* 2. 배경 그라디언트 애니메이션 (오로라 효과) */
.bg-dynamic {
    background: linear-gradient(120deg, #020c1b 0%, #0a192f 50%, #112240 100%);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 3. Vue 로딩 전 깜빡임 방지 */
[v-cloak] { display: none !important; }

/* 4. 글래스모피즘 카드 (투명 유리 효과) */
.glass-card {
    background: rgba(17, 34, 64, 0.6); /* 반투명 네이비 */
    backdrop-filter: blur(12px);      /* 블러 효과 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.3s ease;
}
.glass-card:hover {
    border-color: rgba(212, 175, 55, 0.5); /* 호버 시 골드 테두리 */
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(212, 175, 55, 0.15);
}

/* 5. 황금색 텍스트 그라디언트 (가독성 강화) */
.text-gradient-gold {
    background: linear-gradient(to right, #FFFACD, #FFD700, #DAA520, #FFFACD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 3s linear infinite;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.2); /* 빛나는 효과 */
    font-weight: 900;
}

@keyframes shine { to { background-position: 200% center; } }

/* 6. VVIP 카드 특수 효과 (회전하는 테두리) */
.vvip-card {
    background: linear-gradient(145deg, #1a1a1a, #000000);
    border: 1px solid #D4AF37;
    position: relative;
    overflow: hidden;
}
.vvip-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    animation: rotate 10s linear infinite;
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 7. 스크롤 등장 애니메이션 */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s ease-out; 
}
.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* 8. 숫자 카운팅 펑 터지는 효과 */
@keyframes burst-glow {
    0% { text-shadow: 0 0 0 rgba(212, 175, 55, 0); transform: scale(1); }
    50% { text-shadow: 0 0 60px rgba(212, 175, 55, 1), 0 0 30px rgba(255, 255, 255, 0.8); transform: scale(1.1); }
    100% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.6); transform: scale(1); }
}
.text-burst { animation: burst-glow 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* 9. 파티클 캔버스 위치 고정 */
#particle-canvas {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; /* 배경 */
    pointer-events: none;
}

/* 10. 입력 필드 공통 스타일 */
.input-field { 
    background-color: #112240; 
    border: 1px solid #233554; 
    color: #ffffff; 
}
.input-field:focus { 
    border-color: #D4AF37; 
    outline: none; 
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* [중요] 셀렉트 박스 드롭다운 옵션 가독성 해결 */
/* 브라우저 기본 흰색 배경을 덮어씌웁니다 */
select option {
    background-color: #0a192f !important;
    color: #ffffff !important;
    padding: 10px;
}

/* 11. 골드 버튼 스타일 */
.btn-gold { 
    background: linear-gradient(135deg, #D4AF37, #AA8A26); 
    color: black; 
    font-weight: bold; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.btn-gold:hover {
    background: linear-gradient(135deg, #F0D784, #D4AF37);
    transform: translateY(-1px);
}

/* 12. 아이콘 회전 애니메이션 */
.fa-spin-slow { animation: fa-spin 3s infinite linear; }
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* AI 로딩 깜빡임 */
.ai-loading { animation: pulse 2s infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 1. 오로라 배경 애니메이션 */
@keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}
.animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
}

/* 2. 시네마틱 텍스트 등장 (Fade In Up) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0; /* 초기 상태 숨김 */
}
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }

/* 3. 스크롤 시 등장 효과 (Reveal) */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 4. AI 타자기 효과 커서 */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-start infinite;
    color: #D4AF37;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* 5. 안전장치 모달 (Admin) */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

/* [Mobile Optimization] 모바일 가로 스크롤바 숨기기 (터치는 가능) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* [Mobile UX] 부드러운 터치 스크롤 */
.overflow-x-auto, .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
}

/* [Mobile Typography] 모바일용 폰트 사이즈 조정 */
@media (max-width: 640px) {
    h1 { font-size: 2.25rem !important; line-height: 2.5rem !important; } /* text-4xl */
    h2 { font-size: 1.5rem !important; } /* text-2xl */
    .glass-card { padding: 1.25rem !important; } /* 패딩 축소 */
}

/* [Mobile Table] 테이블 카드화 스타일 (선택사항, 이번엔 스크롤 방식으로 적용함) */