/**
 * Joyn Bible Quiz - Responsive Styles
 * 모바일 및 태블릿 대응
 * 
 * @package Joyn_Bible_Quiz
 * @since 1.0.0
 */

/* === 태블릿 (768px 이하) === */
@media (max-width: 768px) {
    .joyn-bq-container {
        padding: 15px;
    }
    
    .joyn-bq-title {
        font-size: 1.5em;
    }
    
    /* 통계 박스 */
    .joyn-bq-stats-box {
        flex-direction: column;
        gap: 15px;
    }
    
    .joyn-bq-stat {
        width: 100%;
    }
    
    /* 카테고리 */
    .joyn-bq-categories {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .joyn-bq-category-card {
        padding: 25px;
    }
    
    .joyn-bq-category-icon {
        font-size: 2.5em;
    }
    
    .joyn-bq-category-name {
        font-size: 1.2em;
    }
    
    /* 스테이지 */
    .joyn-bq-stages {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .joyn-bq-stage-card {
        padding: 15px;
    }
    
    .joyn-bq-stage-name {
        font-size: 1em;
    }
    
    /* 문제 카드 */
    .joyn-bq-question-card {
        padding: 20px;
    }
    
    .joyn-bq-question-text {
        font-size: 1.1em;
    }
    
    /* 게임 정보 */
    .joyn-bq-game-info {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        font-size: 0.9em;
    }
    
    /* OX 버튼 */
    .joyn-bq-ox-buttons {
        flex-direction: column;
    }
    
    .joyn-bq-ox-btn {
        max-width: 100%;
        padding: 30px 20px;
    }
    
    /* 답변 버튼 */
    .joyn-bq-answer-btn {
        padding: 12px 15px;
    }
    
    .joyn-bq-answer-number {
        width: 28px;
        height: 28px;
        font-size: 0.9em;
    }
    
    .joyn-bq-answer-text {
        font-size: 0.95em;
    }
    
    /* 게임 액션 */
    .joyn-bq-game-actions {
        flex-direction: column;
    }
    
    .joyn-bq-game-actions .joyn-bq-btn {
        width: 100%;
    }
    
    /* 피드백 카드 */
    .joyn-bq-feedback-card {
        padding: 30px 20px;
    }
    
    .joyn-bq-feedback-icon {
        font-size: 4em;
    }
    
    .joyn-bq-feedback-title {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    
    .joyn-bq-answer-section {
        padding: 20px;
        margin: 20px 0;
    }
    
    .joyn-bq-answer-value {
        font-size: 1.3em;
    }
    
    .joyn-bq-explanation {
        padding: 20px;
        margin: 20px 0;
    }
    
    .joyn-bq-feedback-stats {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }
    
    .joyn-bq-feedback-stats span {
        font-size: 1.1em;
        padding: 8px 15px;
        min-width: auto;
    }
    
    .joyn-bq-feedback-actions {
        gap: 8px;
    }
    
    .joyn-bq-feedback-next-btn {
        padding: 14px 30px;
        font-size: 1em;
    }
    
    /* 결과 카드 */
    .joyn-bq-result-card {
        padding: 30px 20px;
    }
    
    .joyn-bq-result-title {
        font-size: 1.6em;
    }
    
    .joyn-bq-stars {
        font-size: 2.5em;
    }
    
    .joyn-bq-result-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .joyn-bq-result-stat {
        padding: 15px;
    }
    
    .joyn-bq-result-value {
        font-size: 1.5em;
    }
    
    .joyn-bq-result-actions {
        flex-direction: column;
    }
    
    .joyn-bq-result-actions .joyn-bq-btn {
        width: 100%;
    }
    
    /* 에러 카드 */
    .joyn-bq-error-card {
        padding: 30px 20px;
    }
    
    /* 알림 */
    .joyn-bq-notice {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* === 모바일 (480px 이하) === */
@media (max-width: 480px) {
    .joyn-bq-container {
        padding: 10px;
    }
    
    .joyn-bq-title {
        font-size: 1.3em;
    }
    
    /* 카테고리 */
    .joyn-bq-category-card {
        padding: 20px;
    }
    
    .joyn-bq-category-icon {
        font-size: 2em;
    }
    
    .joyn-bq-category-name {
        font-size: 1.1em;
    }
    
    /* 스테이지 */
    .joyn-bq-stages {
        grid-template-columns: 1fr;
    }
    
    /* 문제 텍스트 */
    .joyn-bq-question-text {
        font-size: 1em;
        line-height: 1.5;
    }
    
    /* 버튼 */
    .joyn-bq-btn {
        padding: 10px 20px;
        font-size: 0.95em;
    }
    
    .joyn-bq-btn-large {
        padding: 14px 30px;
        font-size: 1em;
    }
    
    /* OX 버튼 */
    .joyn-bq-ox-btn {
        padding: 25px 15px;
        font-size: 1.3em;
    }
    
    .joyn-bq-ox-icon {
        font-size: 1.8em;
    }
    
    /* 입력 필드 */
    .joyn-bq-input {
        padding: 12px 15px;
        font-size: 1em;
    }
    
    /* 피드백 */
    .joyn-bq-feedback-card {
        padding: 25px 15px;
    }
    
    .joyn-bq-feedback-icon {
        font-size: 3em;
    }
    
    .joyn-bq-feedback-title {
        font-size: 1.3em;
    }
    
    .joyn-bq-answer-value {
        font-size: 1.1em;
    }
    
    /* 결과 */
    .joyn-bq-result-card {
        padding: 25px 15px;
    }
    
    .joyn-bq-result-title {
        font-size: 1.4em;
    }
    
    .joyn-bq-stars {
        font-size: 2em;
    }
    
    .joyn-bq-result-value {
        font-size: 1.3em;
    }
}

/* === 리더보드 반응형 === */
@media (max-width: 768px) {
    .joyn-bq-leaderboard-table {
        font-size: 0.9em;
    }
    
    .joyn-bq-leaderboard-rank {
        width: 40px;
        height: 40px;
        font-size: 1em;
    }
    
    .joyn-bq-leaderboard-avatar {
        width: 35px;
        height: 35px;
    }
    
    .joyn-bq-leaderboard-name {
        font-size: 0.95em;
    }
    
    .joyn-bq-leaderboard-points {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .joyn-bq-leaderboard-table {
        font-size: 0.85em;
    }
    
    .joyn-bq-leaderboard-rank {
        width: 35px;
        height: 35px;
        font-size: 0.9em;
    }
    
    .joyn-bq-leaderboard-avatar {
        width: 30px;
        height: 30px;
    }
    
    .joyn-bq-leaderboard-user {
        gap: 8px;
    }
}

/* === 진행 상황 반응형 === */
@media (max-width: 768px) {
    .joyn-bq-progress-grid {
        grid-template-columns: 1fr;
    }
    
    .joyn-bq-progress-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .joyn-bq-progress-summary {
        grid-template-columns: 1fr;
    }
}

/* === 터치 기기 최적화 === */
@media (hover: none) and (pointer: coarse) {
    /* 터치 영역 확대 */
    .joyn-bq-btn {
        min-height: 44px;
    }
    
    .joyn-bq-answer-btn,
    .joyn-bq-ox-btn {
        min-height: 50px;
    }
    
    .joyn-bq-category-card,
    .joyn-bq-stage-card {
        min-height: 100px;
    }
    
    /* 호버 효과 제거 */
    .joyn-bq-btn:hover,
    .joyn-bq-category-card:hover,
    .joyn-bq-stage-card:hover,
    .joyn-bq-answer-btn:hover,
    .joyn-bq-ox-btn:hover {
        transform: none;
    }
    
    /* 탭 하이라이트 제거 */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* === 다크모드 비활성화 (라이트 모드만 사용) === */
/* 다크 모드는 비활성화되었습니다. 항상 라이트 모드가 기본으로 적용됩니다. */

/* === 프린트 스타일 === */
@media print {
    .joyn-bq-game-actions,
    .joyn-bq-result-actions,
    .joyn-bq-btn,
    .joyn-bq-notice {
        display: none !important;
    }
    
    .joyn-bq-container {
        max-width: 100%;
        padding: 0;
    }
    
    .joyn-bq-screen {
        page-break-inside: avoid;
    }
}

/* === 접근성 개선 === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 포커스 표시 */
.joyn-bq-btn:focus,
.joyn-bq-answer-btn:focus,
.joyn-bq-ox-btn:focus,
.joyn-bq-input:focus {
    outline: 3px solid #4A90D9;
    outline-offset: 2px;
}

/* 고대비 모드 (검정 배경 제거, 라이트 모드 유지) */
@media (prefers-contrast: high) {
    .joyn-bq-btn-primary {
        background: #4A90D9;
        color: #ffffff;
        border: 2px solid #4A90D9;
    }
    
    .joyn-bq-category-card,
    .joyn-bq-stage-card,
    .joyn-bq-answer-btn {
        border-width: 3px;
        background: #ffffff !important;
        color: #333333 !important;
    }
}