/* Grand Master 문법 공통 스타일 (2024 리뉴얼)
   - master-common.css 구조 기반 + 그랜드마스터 전용 컬러/포인트 적용
*/

/* 전체 박스/폰트/배경 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Nanum Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255,255,255,0.97);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
}

/****************************
  헤더/레슨 헤더/진행률
****************************/
.header, .lesson-header {
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(191, 49, 191, 0.25);
}
.header h1, .lesson-header h2 {
    font-size: 32px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    position: relative;
    z-index: 10;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin: 18px 0 0 0;
}
.progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    transition: width 0.5s;
}

/* 뒤로가기 버튼 스타일 */
.back-button {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border: none;
}

.back-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.back-button i {
    color: #333;
    font-weight: bold;
}

/****************************
  네비게이션 바 및 버튼
****************************/
.topic-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 32px;
    margin-top: 10px;
}
.nav-btn {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(191, 49, 191, 0.25);
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.nav-btn i {
    font-size: 20px;
    margin-right: 2px;
}
.nav-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 28px rgba(102, 126, 234, 0.18);
}
.nav-btn:hover:not(.active) {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 32px rgba(191, 49, 191, 0.35);
    filter: brightness(1.08);
}
.nav-btn:active {
    transform: scale(0.98);
    filter: brightness(0.96);
}
@media (max-width: 768px) {
    .topic-nav {
        gap: 14px;
        margin-bottom: 18px;
    }
    .nav-btn {
        font-size: 16px;
        padding: 12px 0;
    }
    .nav-btn i {
        font-size: 18px;
    }
}
/****************************
  이론/실습/퀴즈 레이아웃
****************************/
.learning-container {
    padding: 20px;
    padding-bottom: 120px;
    max-width: 1400px;
    margin: 0 auto;
}
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}
.theory-panel {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    height: fit-content;
    position: sticky;
    top: 20px;
}
.practice-panel {
    background: white;
    border-radius: 12px;
    padding: 30px;
    padding-bottom: 100px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    min-height: 80vh;
}

/****************************
  퀴즈/문제/선택지/입력
****************************/
.quiz-page-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 15px;
    background: linear-gradient(to right, rgba(191, 49, 191, 0.1), rgba(45, 86, 210, 0.1));
    border-radius: 10px;
    border: 1px solid rgba(45, 86, 210, 0.3);
}

.quiz-page-header h3 {
    color: rgba(191, 49, 191, 1);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.quiz-container {
    margin: 0 auto;
    max-width: 800px;
}
.question-container {
    margin-bottom: 30px;
}
.question-number {
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(191, 49, 191, 0.25);
}
.question-text {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
}
.options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.option-label, .option {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.option-label:hover, .option:hover {
    background: rgba(45, 86, 210, 0.1);
    border-color: rgba(191, 49, 191, 1);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(191, 49, 191, 0.15);
}
.option-label input[type="radio"], .option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
    accent-color: rgba(191, 49, 191, 1);
}
.option-text {
    font-size: 16px;
    color: #333;
    position: relative;
    z-index: 10;
}
.fill-input, .translation-input {
    width: 100%;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
    background: #f8f9fa;
    margin-bottom: 10px;
}
.fill-input:focus, .translation-input:focus {
    outline: none;
    border-color: rgba(191, 49, 191, 1);
    background: white;
    box-shadow: 0 0 15px rgba(191, 49, 191, 0.15);
}

/****************************
  피드백/설명/점수/결과
****************************/
.feedback {
    margin-top: 15px;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: slideDown 0.3s;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.feedback.correct {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid #c3e6cb;
    color: #155724;
}
.feedback.incorrect {
    background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
    border: 1px solid #f1b0b7;
    color: #721c24;
}
.feedback i {
    font-size: 18px;
    margin-top: 2px;
}
.set-score, .score-display, .final-score {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #bbdefb;
    border-radius: 15px;
    text-align: center;
    animation: pulse 0.5s;
}
@keyframes pulse {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.grade, .final-grade {
    font-size: 32px;
    font-weight: bold;
    color: rgba(191, 49, 191, 1);
}
.percentage, .final-percentage {
    font-size: 24px;
    color: #333;
    font-weight: 600;
}
.score-detail, .final-detail {
    font-size: 16px;
    color: #666;
}

/****************************
  참고/예시/빠른참고/카드
****************************/
.concept-card, .example-box, .rule-box, .quick-reference, .reference-grid, .ref-item {
    background: linear-gradient(to right, rgba(45, 86, 210, 0.1), rgba(191, 49, 191, 0.05));
    padding: 20px;
    border-radius: 12px;
    margin: 15px 0;
    border: 1px solid rgba(45, 86, 210, 0.3);
}
.concept-card h3, .rule-box h4, .quick-reference h3 {
    color: rgba(191, 49, 191, 1);
    margin-bottom: 10px;
}
.highlight {
    color: rgba(191, 49, 191, 1);
    font-weight: bold;
}
.reference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.ref-item strong {
    color: rgba(45, 86, 210, 1);
    display: block;
    margin-bottom: 8px;
}

/****************************
  푸터/반응형
****************************/
.footer {
    margin-top: 40px;
    padding: 20px 0 0 0;
    background: none;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    color: #666;
    font-size: 15px;
    text-align: center;
}
.next-lesson {
    margin-top: 10px;
}
.next-link {
    color: rgba(191, 49, 191, 1);
    font-weight: 600;
    text-decoration: none;
}
.next-link:hover {
    text-decoration: underline;
}

/****************************
  반응형 디자인
****************************/
@media (max-width: 1024px) {
    .split-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .theory-panel {
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        max-height: none;
        position: static;
    }
    .container {
        padding: 15px;
    }
    .header, .lesson-header {
        padding: 18px;
    }
    .header h1, .lesson-header h2 {
        font-size: 24px;
    }
}
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    .container, .learning-container {
        padding: 10px;
        padding-bottom: 150px;
    }
    .theory-panel, .practice-panel {
        padding: 15px;
    }
    .question-card, .option-label, .option {
        padding: 12px;
    }
    .reference-grid {
        grid-template-columns: 1fr;
    }
    .quiz-container {
        padding: 0 5px;
    }
}

/* 퀴즈 컨트롤 버튼 영역 */
.quiz-controls {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 32px 0 0 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    font-size: 20px;
    font-weight: 700;
    border: none;
    border-radius: 32px;
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    color: #fff;
    box-shadow: 0 6px 24px rgba(191, 49, 191, 0.25);
    cursor: pointer;
    transition: all 0.25s;
    outline: none;
    position: relative;
    z-index: 1;
}
.btn i {
    font-size: 22px;
    margin-right: 2px;
}
.btn.primary {
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 0.8));
    color: #fff;
    box-shadow: 0 8px 28px rgba(191, 49, 191, 0.3);
}
.btn.secondary {
    background: linear-gradient(to right, rgba(45, 86, 210, 0.1), rgba(191, 49, 191, 0.1));
    color: rgba(191, 49, 191, 1);
    border: 2px solid rgba(191, 49, 191, 1);
    box-shadow: 0 4px 16px rgba(191, 49, 191, 0.15);
}
.btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 32px rgba(191, 49, 191, 0.35);
    filter: brightness(1.08);
}
.btn:active {
    transform: scale(0.98);
    filter: brightness(0.96);
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.2);
    box-shadow: none;
}

@media (max-width: 768px) {
    .quiz-controls {
        flex-direction: column;
        gap: 16px;
        margin-top: 18px;
    }
    .btn {
        width: 100%;
        font-size: 18px;
        padding: 14px 0;
        justify-content: center;
    }
    .btn i {
        font-size: 20px;
    }
}

/* 주제 선택기(토글/드롭다운) - 그랜드마스터 보라색 계열 */
.topic-toggle-container {
    margin-bottom: 25px;
}
.topic-toggle-btn {
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(191, 49, 191, 0.25);
    position: relative;
    overflow: hidden;
    gap: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
}
.topic-toggle-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(191, 49, 191, 0.35);
}
.topic-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}
.topic-toggle-btn:hover::before {
    left: 100%;
}
.topic-toggle-btn i:first-child {
    font-size: 18px;
}
.toggle-icon {
    transition: transform 0.3s ease;
    font-size: 16px;
}
.topic-selector {
    display: none;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(191, 49, 191, 0.15);
    margin-bottom: 20px;
}
.topic-selector.visible {
    opacity: 1;
    transform: translateY(0);
    display: block;
}
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}
.topic-card {
    background: white;
    border: 2px solid rgba(45, 86, 210, 0.3);
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
}
.topic-card:hover {
    border-color: rgba(191, 49, 191, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(191, 49, 191, 0.18);
}
.topic-card.current {
    border-color: #28a745;
    background: linear-gradient(to right, rgba(45, 86, 210, 0.1), rgba(191, 49, 191, 0.05));
}
.topic-card.unavailable {
    opacity: 0.6;
    cursor: not-allowed;
}
.topic-card.unavailable .lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 24px;
    color: #6c757d;
}
.topic-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
}
.topic-info h4 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 16px;
}
.topic-info p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}
.current-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #28a745;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
}
@media (max-width: 768px) {
    .topic-selector {
        padding: 12px;
    }
    .topic-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .topic-toggle-btn {
        font-size: 16px;
        padding: 12px 0;
    }
}

/****************************
  팁 버튼 및 모달
****************************/
.tip-btn {
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-left: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(191, 49, 191, 0.2);
    position: relative;
    overflow: hidden;
}

.tip-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(191, 49, 191, 0.3);
    filter: brightness(1.1);
}

.tip-btn:active {
    transform: scale(0.95);
}

.tip-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tip-modal.visible {
    opacity: 1;
}

.tip-modal-content {
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.tip-modal.visible .tip-modal-content {
    transform: scale(1);
}

.tip-header {
    background: linear-gradient(to right, rgba(191, 49, 191, 1), rgba(45, 86, 210, 1));
    color: white;
    padding: 20px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tip-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.tip-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.tip-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.tip-body {
    padding: 25px;
    line-height: 1.6;
}

.tip-section {
    margin-bottom: 20px;
}

.tip-section h4 {
    color: rgba(191, 49, 191, 1);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tip-content {
    background: rgba(45, 86, 210, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid rgba(191, 49, 191, 1);
    margin-bottom: 15px;
}

.tip-examples {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.tip-examples h5 {
    color: rgba(191, 49, 191, 1);
    margin-bottom: 10px;
    font-size: 16px;
}

.tip-examples ul {
    margin: 0;
    padding-left: 20px;
}

.tip-examples li {
    margin-bottom: 8px;
    color: #555;
}

.memory-tip {
    background: linear-gradient(to right, rgba(45, 86, 210, 0.1), rgba(191, 49, 191, 0.05));
    padding: 20px;
    border-radius: 10px;
    border: 2px solid rgba(45, 86, 210, 0.3);
    margin-top: 20px;
}

.memory-tip h5 {
    color: rgba(191, 49, 191, 1);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
}

.memory-tip p {
    margin: 0;
    font-weight: 500;
    color: #666;
    font-size: 16px;
}

@media (max-width: 768px) {
    .tip-modal-content {
        width: 95%;
        max-height: 85vh;
    }
    
    .tip-header {
        padding: 15px;
    }
    
    .tip-body {
        padding: 20px;
    }
    
    .tip-btn {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }
}
                    `).join('')}
                </div>
            </div>
        </div>
    `;
}

// 주제 선택기 토글
function toggleTopicSelector() {
    const selector = document.getElementById('topicSelector');
    const toggleIcon = document.querySelector('.toggle-icon');
    
    if (selector.classList.contains('visible')) {
        selector.classList.remove('visible');
        toggleIcon.style.transform = 'rotate(0deg)';
    } else {
        selector.classList.add('visible');
        toggleIcon.style.transform = 'rotate(180deg)';
    }
}

// 주제로 이동
function navigateToTopic(url) {
    if (url !== window.location.pathname.split('/').pop()) {
        window.location.href = url;
    }
}

// 네비게이션 바 생성
function generateNavigation() {
    const currentTopic = getCurrentTopic();
    const currentIndex = GRANDMASTER_TOPICS.findIndex(topic => topic.id === currentTopic);
    
    let navHTML = '<div class="topic-nav">';
    
    // 이전 주제
    if (currentIndex > 0) {
        const prevTopic = GRANDMASTER_TOPICS[currentIndex - 1];
        navHTML += `
            <button class="nav-btn" onclick="navigateToTopic('${prevTopic.url}')">
                <i class="fas fa-arrow-left"></i>
                이전: ${prevTopic.title}
            </button>
        `;
    }
    
    // 현재 주제
    navHTML += `
        <button class="nav-btn active">
            <i class="fas fa-crown"></i>
            현재: ${GRANDMASTER_TOPICS[currentIndex].title}
        </button>
    `;
    
    // 다음 주제
    if (currentIndex < GRANDMASTER_TOPICS.length - 1) {
        const nextTopic = GRANDMASTER_TOPICS[currentIndex + 1];
        navHTML += `
            <button class="nav-btn" onclick="navigateToTopic('${nextTopic.url}')">
                <i class="fas fa-arrow-right"></i>
                다음: ${nextTopic.title}
            </button>
        `;
    }
    
    navHTML += '</div>';
    return navHTML;
}

// 퀴즈 시스템 공통 함수들
class GrandMasterQuizSystem {
    constructor(quizData) {
        this.quizData = quizData;
        this.currentSet = 0;
        this.currentQuestion = 0;
        this.answers = [];
        this.feedback = [];
        this.showingAnswer = false;
        this.init();
    }
    
    init() {
        this.render();
        this.updateProgress();
    }
    
    getCurrentQuizSet() {
        return this.quizData[this.currentSet];
    }
    
    getCurrentQuestion() {
        return this.getCurrentQuizSet().questions[this.currentQuestion];
    }
    
    render() {
        const container = document.getElementById('quiz-container');
        const question = this.getCurrentQuestion();
        const setInfo = this.getCurrentQuizSet();
        
        let questionHTML = `
            <div class="question-container">
                <div class="question-number">
                    ${setInfo.title} - 문제 ${this.currentQuestion + 1}/${setInfo.questions.length}
                </div>
                <div class="question-text">${question.question}</div>
        `;
        
        // 문제 타입에 따른 렌더링
        switch(question.type) {
            case 'multiple':
                questionHTML += this.renderMultipleChoice(question);
                break;
            case 'fill':
                questionHTML += this.renderFillBlank(question);
                break;
            case 'translation':
                questionHTML += this.renderTranslation(question);
                break;
        }
        
        questionHTML += '</div>';
        
        // 피드백 영역
        if (this.showingAnswer) {
            questionHTML += this.renderFeedback(question);
        }
        
        // 컨트롤 버튼
        questionHTML += this.renderControls();
        
        container.innerHTML = questionHTML;
    }
    
    renderMultipleChoice(question) {
        return `
            <div class="options-container">
                ${question.options.map((option, index) => `
                    <label class="option-label">
                        <input type="radio" name="answer" value="${index}" ${this.showingAnswer ? 'disabled' : ''}>
                        <span class="option-text">${option}</span>
                    </label>
                `).join('')}
            </div>
        `;
    }
    
    renderFillBlank(question) {
        return `
            <input type="text" class="fill-input" id="fillAnswer" 
                   placeholder="답을 입력하세요..." 
                   ${this.showingAnswer ? 'disabled' : ''}>
        `;
    }
    
    renderTranslation(question) {
        return `
            <textarea class="translation-input" id="translationAnswer" 
                      placeholder="번역을 입력하세요..." 
                      rows="3" ${this.showingAnswer ? 'disabled' : ''}></textarea>
        `;
    }
    
    renderFeedback(question) {
        const userAnswer = this.answers[this.getGlobalQuestionIndex()];
        const isCorrect = this.checkAnswer(question, userAnswer);
        
        return `
            <div class="feedback ${isCorrect ? 'correct' : 'incorrect'}">
                <i class="fas fa-${isCorrect ? 'check-circle' : 'times-circle'}"></i>
                <div>
                    <strong>${isCorrect ? '정답입니다!' : '틀렸습니다.'}</strong><br>
                    ${question.explanation}
                    ${question.type !== 'multiple' ? `<br><br><strong>정답:</strong> ${question.correct}` : ''}
                </div>
            </div>
        `;
    }
    
    renderControls() {
        return `
            <div class="quiz-controls">
                ${!this.showingAnswer ? `
                    <button class="btn primary" onclick="quiz.submitAnswer()">
                        <i class="fas fa-check"></i>
                        답안 제출
                    </button>
                ` : `
                    <button class="btn secondary" onclick="quiz.nextQuestion()">
                        <i class="fas fa-arrow-right"></i>
                        다음 문제
                    </button>
                `}
            </div>
        `;
    }
    
    submitAnswer() {
        const question = this.getCurrentQuestion();
        let userAnswer = null;
        
        switch(question.type) {
            case 'multiple':
                const selected = document.querySelector('input[name="answer"]:checked');
                userAnswer = selected ? parseInt(selected.value) : null;
                break;
            case 'fill':
                userAnswer = document.getElementById('fillAnswer').value.trim();
                break;
            case 'translation':
                userAnswer = document.getElementById('translationAnswer').value.trim();
                break;
        }
        
        if (userAnswer === null || userAnswer === '') {
            alert('답을 입력해주세요.');
            return;
        }
        
        this.answers[this.getGlobalQuestionIndex()] = userAnswer;
        this.showingAnswer = true;
        this.render();
    }
    
    checkAnswer(question, userAnswer) {
        switch(question.type) {
            case 'multiple':
                return userAnswer === question.correct;
            case 'fill':
            case 'translation':
                return this.normalizeAnswer(userAnswer) === this.normalizeAnswer(question.correct);
        }
        return false;
    }
    
    normalizeAnswer(answer) {
        return answer.toLowerCase().trim().replace(/[.,!?]/g, '');
    }
    
    getGlobalQuestionIndex() {
        let index = 0;
        for (let i = 0; i < this.currentSet; i++) {
            index += this.quizData[i].questions.length;
        }
        index += this.currentQuestion;
        return index;
    }
    
    nextQuestion() {
        this.showingAnswer = false;
        
        if (this.currentQuestion < this.getCurrentQuizSet().questions.length - 1) {
            this.currentQuestion++;
        } else if (this.currentSet < this.quizData.length - 1) {
            this.currentSet++;
            this.currentQuestion = 0;
        } else {
            this.showFinalScore();
            return;
        }
        
        this.render();
        this.updateProgress();
    }
    
    updateProgress() {
        const totalQuestions = this.quizData.reduce((sum, set) => sum + set.questions.length, 0);
        const answeredQuestions = this.getGlobalQuestionIndex();
        const progress = (answeredQuestions / totalQuestions) * 100;
        
        const progressFill = document.querySelector('.progress-fill');
        if (progressFill) {
            progressFill.style.width = `${progress}%`;
        }
    }
    
    showFinalScore() {
        const totalQuestions = this.quizData.reduce((sum, set) => sum + set.questions.length, 0);
        let correctAnswers = 0;
        
        this.quizData.forEach((set, setIndex) => {
            set.questions.forEach((question, questionIndex) => {
                let globalIndex = 0;
                for (let i = 0; i < setIndex; i++) {
                    globalIndex += this.quizData[i].questions.length;
                }
                globalIndex += questionIndex;
                
                if (this.checkAnswer(question, this.answers[globalIndex])) {
                    correctAnswers++;
                }
            });
        });
        
        const percentage = Math.round((correctAnswers / totalQuestions) * 100);
        let grade = 'F';
        if (percentage >= 90) grade = 'A+';
        else if (percentage >= 85) grade = 'A';
        else if (percentage >= 80) grade = 'B+';
        else if (percentage >= 75) grade = 'B';
        else if (percentage >= 70) grade = 'C+';
        else if (percentage >= 65) grade = 'C';
        else if (percentage >= 60) grade = 'D';
        
        const container = document.getElementById('quiz-container');
        container.innerHTML = `
            <div class="final-score">
                <h2>🎓 Grand Master 퀴즈 완료!</h2>
                <div class="final-grade">${grade}</div>
                <div class="final-percentage">${percentage}%</div>
                <div class="final-detail">
                    ${correctAnswers}/${totalQuestions} 문제를 맞혔습니다.
                </div>
                <div class="quiz-controls">
                    <button class="btn primary" onclick="location.reload()">
                        <i class="fas fa-redo"></i>
                        다시 도전
                    </button>
                </div>
            </div>
        `;
    }
}

// 페이지 로드 시 공통 요소 삽입
document.addEventListener('DOMContentLoaded', function() {
    // 주제 선택기 삽입
    const topicContainer = document.getElementById('topic-selector-container');
    if (topicContainer) {
        topicContainer.innerHTML = generateTopicSelector();
    }
    
    // 네비게이션 삽입
    const navContainer = document.getElementById('navigation-container');
    if (navContainer) {
        navContainer.innerHTML = generateNavigation();
    }
});