/* ============================================================================
   🎯 정답지 완벽 구현 - 색깔별 박스 구조 시스템 (수정됨)
   ============================================================================ */

/* 🔥 나리야 간섭 차단 (클로드개발1친구 공식) */

/* 1단계: 나리야 기본 스타일 무력화 */
#bo_v_con * {
    all: unset !important;
    display: revert !important;
    box-sizing: border-box !important;
}

/* 2단계: 나리야 박스 제거 */
#bo_v_con .view-content > div:not(.main-title):not(.answer-section-box) {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* 🎨 1. 메인 타이틀 - 🚨 수정: 위치 올리기 */
#bo_v_con .main-title {
    text-align: center !important;
    font-size: 2.2em !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 20px 0 30px 0 !important; /* 🚨 수정: 위쪽 여백 줄임 */
    padding: 20px !important;
    background: none !important;
    border: none !important;
    display: block !important;
}

/* 🎨 2. 섹션 박스 - 3단계: 정답지 스타일 강제 적용 (클로드개발1친구 공식) */
#bo_v_con .answer-section-box {
    background-color: #f8f9fa !important;
    border: 3px solid #ccc !important; /* 🚨 수정: 더 진하게 */
    border-radius: 8px !important;
    padding: 25px !important;
    margin: 0 0 30px 0 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25) !important; /* 🚨 수정: 그림자 강화 */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 🎨 3. 섹션 헤더 */
#bo_v_con .section-header {
    background: none !important;
    color: #333 !important;
    padding: 0 0 20px 0 !important;
    margin: 0 0 20px 0 !important;
    font-size: 1.8em !important;
    font-weight: bold !important;
    border-bottom: 2px solid #dee2e6 !important;
    display: block !important;
    width: 100% !important;
}

/* 🎨 4. 색깔별 정보 박스 (핵심!) */
#bo_v_con .info-box {
    border-radius: 6px !important;
    padding: 20px !important;
    margin: 15px 0 !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 파란색 정보 박스 - 🚨 수정: 더 조밀하게 (클로드개발1친구 권장) */
#bo_v_con .info-box-blue {
    background-color: #f0f8ff !important; /* 초은은 파란색 */
    border-left-color: #2196f3 !important;
    padding: 12px !important; /* 더 조밀하게 */
}

/* 빨간색 정보 박스 */
#bo_v_con .info-box-red {
    background-color: #fff0f0 !important;
    border-left-color: #f44336 !important;
}

/* 녹색 정보 박스 */
#bo_v_con .info-box-green {
    background-color: #f0fff0 !important;
    border-left-color: #4caf50 !important;
}

/* 주황색 정보 박스 */
#bo_v_con .info-box-orange {
    background-color: #fff8f0 !important;
    border-left-color: #ff9800 !important;
}

/* 보라색 정보 박스 */
#bo_v_con .info-box-purple {
    background-color: #f8f0ff !important;
    border-left-color: #9c27b0 !important;
}

/* 🎨 5. 정보 박스 제목 */
#bo_v_con .info-box-title {
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 🎨 6. 정보 박스 내부 텍스트 */
#bo_v_con .info-box p {
    font-size: 1em !important;
    line-height: 1.6 !important;
    margin: 0 0 10px 0 !important;
    font-weight: normal !important;
    color: #444 !important;
    padding: 0 !important;
}

#bo_v_con .info-box p:last-child {
    margin-bottom: 0 !important;
}

/* 🎨 7. 정보 박스 내부 리스트 */
#bo_v_con .info-box ul {
    margin: 10px 0 !important;
    padding-left: 20px !important;
    list-style-type: disc !important;
}

#bo_v_con .info-box li {
    font-size: 1em !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    font-weight: normal !important;
    color: #444 !important;
    list-style-type: disc !important;
}

/* 🎨 8. 정보 박스 내부 테이블 */
#bo_v_con .info-box .info-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px 0 !important;
    background-color: rgba(255,255,255,0.7) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

#bo_v_con .info-box .info-table th,
#bo_v_con .info-box .info-table td {
    padding: 12px 15px !important;
    text-align: left !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    font-size: 0.95em !important;
}

#bo_v_con .info-box .info-table th {
    background-color: rgba(255,255,255,0.9) !important;
    font-weight: bold !important;
    color: #333 !important;
}

#bo_v_con .info-box .info-table td {
    background-color: rgba(255,255,255,0.5) !important;
    color: #444 !important;
}

/* 🎨 9. 일반 테이블 - 🚨 수정: 표선 강화 */
#bo_v_con .normal-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px 0 !important;
    background-color: #ffffff !important;
    border: 2px solid #333 !important; /* 🚨 수정: 외곽 테두리 진하게 */
}

#bo_v_con .normal-table th,
#bo_v_con .normal-table td {
    padding: 12px 15px !important;
    text-align: left !important;
    border: 1px solid #333 !important; /* 🚨 수정: 내부 테두리 진하게 */
    font-size: 1em !important;
}

#bo_v_con .normal-table th {
    background-color: #f0f0f0 !important; /* 🚨 수정: 헤더 배경 진하게 */
    font-weight: bold !important;
    color: #333 !important;
}

#bo_v_con .normal-table td {
    background-color: #ffffff !important;
    color: #444 !important;
}

/* 🚨 추가: 모든 테이블에 표선 강제 적용 */
#bo_v_con table {
    border-collapse: collapse !important;
    border: 2px solid #333 !important;
    width: 100% !important;
    margin: 15px 0 !important;
}

#bo_v_con table th,
#bo_v_con table td {
    border: 1px solid #333 !important;
    padding: 12px 15px !important;
    text-align: left !important;
}

#bo_v_con table th {
    background-color: #f0f0f0 !important;
    font-weight: bold !important;
    color: #333 !important;
}

#bo_v_con table td {
    background-color: #ffffff !important;
    color: #444 !important;
}

/* 🎨 10. 일반 H3 (색깔박스 외부) */
#bo_v_con .answer-section-box h3 {
    font-size: 1.3em !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 20px 0 15px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* 🎨 11. 강조 텍스트 */
#bo_v_con .info-box strong,
#bo_v_con .answer-section-box strong {
    font-weight: bold !important;
    color: #333 !important;
}

#bo_v_con .info-box em,
#bo_v_con .answer-section-box em {
    font-style: italic !important;
    color: #555 !important;
}

/* 🛡️ 12. 나리야 간섭 차단 - 🚨 수정: 강화 */
#bo_v_con .view-content > div:not(.main-title):not(.answer-section-box) {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important; /* 🚨 수정: 그림자도 제거 */
}

/* 🛡️ 13. 전체 컨테이너 */
#bo_v_con .view-content {
    background: #ffffff !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 📱 14. 모바일 반응형 */
@media (max-width: 768px) {
    #bo_v_con .main-title {
        font-size: 1.8em !important;
        padding: 15px !important;
        margin: 15px 0 25px 0 !important; /* 🚨 수정: 모바일에서도 위치 조정 */
    }
    
    #bo_v_con .answer-section-box {
        padding: 15px !important;
        margin: 0 0 20px 0 !important;
        border: 1px solid #ddd !important; /* 🚨 수정: 모바일에서는 테두리 얇게 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* 🚨 수정: 모바일 그림자 적당히 */
    }
    
    #bo_v_con .section-header {
        font-size: 1.5em !important;
        padding: 0 0 15px 0 !important;
        margin: 0 0 15px 0 !important;
    }
    
    #bo_v_con .info-box {
        padding: 15px !important;
        margin: 10px 0 !important;
    }
    
    #bo_v_con .info-box-blue {
        padding: 12px !important; /* 🚨 수정: 모바일에서 더 작게 */
    }
    
    #bo_v_con .view-content {
        padding: 15px !important;
    }
    
    #bo_v_con .info-box .info-table th,
    #bo_v_con .info-box .info-table td,
    #bo_v_con .normal-table th,
    #bo_v_con .normal-table td,
    #bo_v_con table th,
    #bo_v_con table td {
        padding: 8px 10px !important;
        font-size: 0.9em !important;
        border: 1px solid #333 !important; /* 🚨 수정: 모바일에서도 표선 유지 */
    }
}

/* 🎯 15. 추가 정리 */
#bo_v_con .view-content::before,
.js-converted-content::before {
    display: none !important;
}

.js-converted-content {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 🎯 16. 전체 폰트 시스템 */
#bo_v_con {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
    line-height: 1.6 !important;
    color: #333 !important;
    word-break: keep-all !important;
}