/* 커스텀 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* 화면 전환 애니메이션 */
.screen-transition {
    animation: fadeIn 0.5s ease-out;
}

/* 문제 카드 애니메이션 */
.question-card {
    animation: slideIn 0.4s ease-out;
}

/* 선택지 호버 효과 */
.option-button {
    transition: all 0.2s ease;
}

.option-button:hover {
    transform: translateX(8px);
}

/* 정답/오답 피드백 색상 */
.correct-answer {
    background-color: hsl(var(--su)) !important;
    border-color: hsl(var(--su)) !important;
    color: hsl(var(--suc)) !important;
}

.wrong-answer {
    background-color: hsl(var(--er)) !important;
    border-color: hsl(var(--er)) !important;
    color: hsl(var(--erc)) !important;
}

.selected-answer {
    background-color: hsl(var(--p)) !important;
    border-color: hsl(var(--p)) !important;
    color: hsl(var(--pc)) !important;
}

/* 진행률 바 애니메이션 */
.progress {
    transition: value 0.3s ease;
}

/* 결과 카드 애니메이션 */
.result-card {
    animation: fadeIn 0.6s ease-out;
}

.result-card:nth-child(1) { animation-delay: 0.1s; }
.result-card:nth-child(2) { animation-delay: 0.2s; }
.result-card:nth-child(3) { animation-delay: 0.3s; }
.result-card:nth-child(4) { animation-delay: 0.4s; }
.result-card:nth-child(5) { animation-delay: 0.5s; }

/* 점수 애니메이션 */
.score-animation {
    animation: pulse 0.8s ease-in-out;
}

/* 모달 배경 블러 효과 */
.modal-open .modal-backdrop {
    backdrop-filter: blur(4px);
}

/* 반응형 텍스트 크기 조정 */
@media (max-width: 768px) {
    .hero-content h2 {
        font-size: 1.8rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .stats .stat-value {
        font-size: 2rem;
    }
}

/* 프린트 스타일 */
@media print {
    .navbar,
    .footer,
    .btn,
    .modal {
        display: none !important;
    }
    
    .container {
        max-width: none !important;
        padding: 0 !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* 접근성 개선 */
.option-button:focus {
    outline: 2px solid hsl(var(--p));
    outline-offset: 2px;
}

/* 다크 테마 지원 */
[data-theme="dark"] .question-card {
    background-color: hsl(var(--b2));
}

[data-theme="dark"] .option-button {
    background-color: hsl(var(--b3));
    border-color: hsl(var(--bc) / 0.2);
}

/* 로딩 스피너 */
.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}