/**
 * pages.css — AIKOREA 페이지별 전용 스타일 (인라인 CSS 외부화)
 * 각 페이지의 <style> 블록을 이 파일로 이동하여 CSP unsafe-inline 제거
 */

/* ============================================================
   biz/terms.php — 이용약관 페이지
   ============================================================ */
body.terms-page {
    background-color: var(--bg-light);
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.terms-container {
    max-width: 900px;
    width: 100%;
    background: #ffffff;
    padding: 60px;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.terms-container h1 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 40px;
    border-bottom: 4px solid var(--primary);
    padding-bottom: 15px;
    font-weight: 800;
}

.terms-container h2 {
    font-size: 1.8rem;
    margin-top: 50px;
    margin-bottom: 25px;
    color: var(--text-main);
    background-color: #f0f4f8;
    padding: 12px 20px;
    border-left: 8px solid var(--primary);
    font-weight: 700;
}

.terms-container p,
.terms-container li {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-main);
    margin-bottom: 25px;
}

.terms-container ul {
    margin-left: 25px;
    list-style-type: disc;
}

.mission-statement {
    background-color: #fff8e1;
    border: 2px solid #ffca28;
    padding: 30px;
    margin-bottom: 40px;
    font-weight: 700;
    line-height: 1.8;
    color: #856404;
}

.close-action {
    margin-top: 60px;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

.btn-close {
    background: #333;
    color: #fff;
    padding: 20px 50px;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    border: none;
}

.btn-close:hover { background: #000; }

@media print {
    body.terms-page .btn-close { display: none; }
    body.terms-page { background: white; padding: 0; }
    .terms-container { box-shadow: none; border: none; }
}


/* ============================================================
   verify.php — 수료증 진위조회 페이지
   ============================================================ */
.page-main-title { text-align: center; font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 900; color: #111; margin-bottom: 15px; word-break: keep-all; }

.search-box { background: #f9f9f9; padding: 35px; border-radius: 15px; border: 1px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 40px; }
.input-wrapper { display: flex; gap: 12px; align-items: center; border: 1px solid #ced4da; border-radius: 8px; padding: 2px 15px; background: #fff; flex: 1; }
.input-wrapper input { width: 100%; height: 55px; border: none; outline: none; font-size: 1.1rem; }
.btn-verify { padding: 0 50px; height: 60px; font-size: 1.3rem; background: #0056b3; border: none; border-radius: 8px; color: #fff; font-weight: 800; cursor: pointer; }
.btn-verify:hover { background: #004494; }
.btn-verify:disabled { background: #ccc; cursor: not-allowed; }
.result-box { margin-top: 30px; padding: 40px; border-radius: 12px; border: 2px solid #ddd; }
.result-valid { background: #f0f8f0; border-color: #28a745; }
.result-invalid { background: #fff5f5; border-color: #dc3545; }
.result-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid #eee; }
.result-valid .result-title { color: #155724; }
.result-invalid .result-title { color: #721c24; }
.result-info { margin: 15px 0; font-size: 1.15rem; line-height: 1.8; }
.result-info strong { display: inline-block; width: 130px; color: #333; }
.error-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 8px; margin-bottom: 25px; color: #856404; font-weight: 600; }
.help-text { text-align: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; color: #333; font-size: 1.1rem; line-height: 2; font-weight: 600; }


/* ============================================================
   courses/enroll.php — 수강 신청 페이지
   ============================================================ */
.is-disabled { opacity: 0.6; filter: grayscale(1); }

/* courses/course_detail.php — 저작권 안내 */
/* ── 목소리 품질 안내 박스 (저작권 박스와 동일 스타일) ── */
.tts-guide-box {
    margin-top: 40px;
    padding: 24px 28px;
    background: #f8fafc;
    border: 1px solid #d8dee8;
    border-radius: 12px;
}
.tts-guide-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
    color: #003f87;
}
.tts-guide-desc {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #222;
}
.tts-guide-list {
    margin: 0 0 12px;
    padding-left: 1.4em;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #222;
}
.tts-guide-list strong { color: #111; font-weight: 800; }
.tts-guide-link {
    font-size: 0.95rem;
    color: #0056b3;
    font-weight: 700;
    text-decoration: underline;
}

.copyright-notice {
    margin-top: 48px;
    padding: 24px 28px;
    background: #f8fafc;
    border: 1px solid #d8dee8;
    border-radius: 12px;
}

.copyright-notice-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
    color: #003f87;
}

.copyright-notice-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #222;
}

.copyright-notice-text strong {
    color: #111;
    font-weight: 800;
}

.copyright-notice-text .copyright-owner {
    color: #0056b3;
}

.copyright-notice-meta {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #555;
}
tr.active-row { background-color: #f0f7ff !important; outline: 2px solid #0056b3; outline-offset: -2px; }
tr:hover:not(.is-disabled) { background-color: #fcfcfc; }

@media (max-width: 768px) {
    .table-responsive::after {
        content: "← 표를 좌우로 밀어서 확인하세요 →";
        display: block; text-align: center; font-size: 0.95rem; color: #666; padding: 15px 0; font-weight: 800;
    }
    .page-main-title { font-size: 2rem !important; }
}


/* ============================================================
   learn/learning_dashboard.php — 학습 대시보드
   ============================================================ */
.renewal-progress-card {
    padding: 45px 40px;
    margin-bottom: 40px;
    background: linear-gradient(135deg, #0d1b3e 0%, #1a237e 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.prog-label { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; color: rgba(255,255,255,0.85); display: block; }
.prog-percentage { font-size: 4.5rem; font-weight: 900; line-height: 1; letter-spacing: -2px; }
.prog-percentage span { font-size: 2rem; margin-left: 2px; opacity: 0.8; }

.renewal-bar-track {
    height: 24px;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    position: relative;
    margin-bottom: 15px;
}

.renewal-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffea00 0%, #fbc02d 100%);
    border-radius: 12px;
    transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 20px rgba(255,234,0,0.3);
}

.prog-status-text { font-size: 1.15rem; font-weight: 700; color: rgba(255,255,255,0.95); text-align: right; }

.info-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 50px; }
.info-card-item { background: #fff; padding: 25px; text-align: center; border-radius: 16px; border: 1px solid #eef0f5; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.info-card-item .label { color: #666; font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; display: block; } /* #888(3.55:1) → #666(5.74:1) ✅ */
.info-card-item .value { font-size: 1.5rem; font-weight: 800; color: #1a237e; }

.section-sub-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 30px; color: #333; }

.chapter-card {
    padding: 30px; background: #fff; border-radius: 16px; margin-bottom: 15px;
    border: 1px solid #eef0f5; display: flex; align-items: center; gap: 25px; transition: all 0.2s ease;
}
.chapter-card:hover { border-color: #1a237e; transform: translateY(-2px); }

.chapter-num-box {
    width: 60px; height: 60px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; flex-shrink: 0; border-radius: 12px;
}
.num-label { font-size: 0.75rem; color: #555; font-weight: 700; line-height: 1; margin-bottom: 2px; } /* #aaa(2.32:1) → #555(7.46:1) ✅ */
.num-value { font-size: 1.6rem; font-weight: 900; color: #1a237e; line-height: 1.2; display: block; text-align: center; }

.chapter-card.completed { background: #f8fafc; border-color: #e2e8f0; }
.chapter-card.completed .num-value { color: #4CAF50 !important; background: none !important; font-size: 1.8rem; }
.chapter-card:not(.completed) .num-value { color: #1a237e; }

.chapter-main-info { flex: 1; }
.chapter-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 12px 0; color: #111; }
.chapter-meta { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 600; color: #666; }

.chapter-progress-track { height: 6px; background: #eef2f7; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.chapter-progress-fill { height: 100%; background: #1a237e; border-radius: 3px; transition: width 0.3s; }

.btn-learn-start {
    padding: 15px 30px; background: #1a237e; color: #fff;
    border-radius: 10px; font-weight: 800; border: none; cursor: pointer;
    white-space: nowrap; transition: all 0.2s;
}
.btn-learn-start:hover { background: #0d1b3e; transform: translateY(-2px); }
.btn-review { background: #6c757d; }
.btn-review:hover { background: #5a6268; }
.chapter-card.completed .chapter-progress-fill { background: #4CAF50; }

@media (forced-colors: active) {
    .renewal-bar-track, .chapter-progress-track { border: 1px solid ButtonText; }
    .renewal-bar-fill, .chapter-progress-fill { background-color: Highlight; }
}

@media (max-width: 768px) {
    .chapter-card { flex-direction: column; align-items: stretch; }
    .chapter-num-box { margin: 0 auto; }
    .btn-learn-start { width: 100%; }
    .prog-status-text { text-align: center; margin-top: 10px; }
}


/* ============================================================
   learn/certificates.php — 수료증 목록
   ============================================================ */
.cert-stat-card {
    background: linear-gradient(135deg, #0d1b3e 0%, #1a237e 100%);
    padding: 45px 40px; border-radius: 20px; margin-bottom: 45px;
    color: white; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.cert-stat-label { font-size: 1.2rem; opacity: 0.8; font-weight: 600; margin-bottom: 10px; display: block; }
.cert-stat-value { font-size: 4.5rem; font-weight: 900; line-height: 1; color: #ffea00; }
.cert-stat-unit { font-size: 1.8rem; margin-left: 8px; opacity: 0.9; font-weight: 700; }

.cert-card {
    background: #fff; border: 1px solid #eef0f5; border-radius: 16px;
    padding: 35px; margin-bottom: 20px; transition: all 0.3s ease;
    display: flex; justify-content: space-between; align-items: center; gap: 30px;
}
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(0,0,0,0.06); border-color: #1a237e; }
.cert-main-info { flex: 1; }

.cert-badge-group { display: flex; gap: 8px; margin-bottom: 15px; }
.badge-item { padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 800; }
.badge-complete { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.badge-info { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

.cert-title { font-size: 1.5rem; font-weight: 800; color: #111; margin: 0 0 15px 0; line-height: 1.3; }
.cert-meta-list { display: flex; gap: 25px; color: #64748b; font-size: 1rem; font-weight: 600; }
.cert-meta-list strong { color: #1e293b; margin-right: 5px; }

.cert-action-btns { display: flex; gap: 10px; flex-shrink: 0; }
.btn-cert { padding: 15px 25px; border-radius: 10px; font-weight: 800; font-size: 0.95rem; text-decoration: none; text-align: center; white-space: nowrap; transition: all 0.2s; }
.btn-cert-view { background: #1a237e; color: #fff; border: none; }
.btn-cert-view:hover { background: #0d145a; }
.btn-cert-print { background: #fff; color: #1a237e; border: 2px solid #1a237e; }
.btn-cert-print:hover { background: #f0f2ff; }

@media (forced-colors: active) {
    .cert-card { border: 2px solid CanvasText; }
    .btn-cert-print { border: 2px solid ButtonText; }
}
@media (max-width: 768px) {
    .cert-card { flex-direction: column; align-items: stretch; padding: 25px; }
    .cert-meta-list { flex-direction: column; gap: 8px; }
    .cert-action-btns { flex-direction: column; }
    .btn-cert { width: 100%; }
}


/* ============================================================
   community/free_write.php — 자유게시판 글쓰기
   ============================================================ */
.char-counter { text-align: right; font-size: 0.9rem; color: #666; margin-top: 5px; }
.char-counter.warning { color: #d32f2f; font-weight: 700; }

.autosave-notice {
    position: fixed; top: 80px; right: 20px;
    background: #4caf50; color: #fff; padding: 12px 20px;
    border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0; transition: opacity 0.3s; z-index: 1000;
}
.autosave-notice.show { opacity: 1; }

.required-mark { color: #d32f2f; font-weight: 700; margin-left: 4px; }

input:focus, textarea:focus { outline: 3px solid #0056b3; outline-offset: 2px; }


/* ============================================================
   community/free_view.php — 자유게시판 상세보기
   ============================================================ */
.comment-item { transition: background-color 0.2s; }
.comment-item:hover { background-color: #f5f5f5 !important; }
.comment-item:focus-within { outline: 3px solid #0056b3; outline-offset: -3px; }

.reply-form-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.reply-form-wrapper.active { max-height: 500px; }

.loading { opacity: 0.6; pointer-events: none; }


/* ============================================================
   mypage/class_list.php — 수강 목록
   ============================================================ */
.card { transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }

.filter-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.filter-year { display: flex; align-items: center; gap: 12px; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.course-item { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.course-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 2px solid #f0f0f0; gap: 20px; }
.course-info { flex: 1; min-width: 0; }

.badge { display: inline-block; padding: 6px 14px; border-radius: 6px; font-size: 0.95rem; font-weight: 700; margin-right: 8px; }
.badge-primary { background: #0056b3; color: white; }
.badge-secondary { background: #f8f9fa; color: #666; }

.course-title { font-size: 1.25rem; font-weight: 700; color: #333; margin: 0; line-height: 1.4; }
.course-status { text-align: right; flex-shrink: 0; }
.status-badge { display: inline-block; padding: 8px 16px; border-radius: 6px; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.course-date { font-size: 0.9rem; color: #666; margin-top: 8px; } /* #999(2.85:1) → #666(5.74:1) ✅ */

.course-progress { display: flex; align-items: center; gap: 20px; }
.progress-info { flex: 1; min-width: 0; }
.progress-text { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1rem; }
.progress-label { font-weight: 600; color: #666; }
.progress-chapter { color: #666; } /* #999(2.85:1) → #666(5.74:1) ✅ */
.course-action { flex-shrink: 0; }

.btn-action { display: inline-block; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1.05rem; white-space: nowrap; min-height: 48px; min-width: 120px; text-align: center; }
.btn-primary { background: #0056b3; color: white; }
.btn-success { background: #28a745; color: white; }
.btn-warning { background: #f39c12; color: white; }
.btn-disabled { background: #e9ecef; color: #6c757d; cursor: not-allowed; }
.btn-secondary { background: #6c757d; color: white; }
.btn-review { background: #17a2b8; color: white; }

@media (max-width: 768px) {
    .filter-wrap { flex-direction: column; align-items: stretch; }
    .filter-year { width: 100%; }
    .filter-year select { flex: 1; }
    .filter-tabs { width: 100%; }
    .filter-tab { flex: 1; text-align: center; font-size: 0.9rem !important; padding: 10px 12px !important; }
    .course-header { flex-direction: column; gap: 15px; }
    .course-status { text-align: left; }
    .course-progress { flex-direction: column; gap: 15px; }
    .course-action { width: 100%; }
    .btn-action { width: 100%; display: block; }
}


/* ============================================================
   mypage/certificate.php — 수료증 상세
   ============================================================ */
.cert-wrapper {
    max-width: 900px; margin: 50px auto; padding: 20px;
    background: #fff; border: 15px double var(--primary); position: relative; text-align: center;
}
.cert-inner { border: 2px solid var(--primary); padding: 60px; background: #fdfdfd; }
.cert-header { font-size: 3.5rem; font-weight: 900; color: #000; letter-spacing: 15px; margin-bottom: 50px; }
.cert-content { font-size: 1.4rem; line-height: 2; color: #333; margin: 40px 0; }
.user-name { font-size: 2.2rem; font-weight: 800; text-decoration: underline; }
.course-name { color: var(--primary); font-weight: 800; }
.cert-message { font-size: 1.25rem; margin: 50px 0; padding: 30px; background: #f8f9fa; border-radius: 8px; text-align: left; word-break: keep-all; }
.cert-footer { margin-top: 80px; }
.cert-date { font-size: 1.3rem; font-weight: bold; margin-bottom: 30px; }
.official-seal { font-size: 1.8rem; font-weight: 900; display: flex; justify-content: center; align-items: center; gap: 20px; }

@media print {
    .no-print { display: none; }
    body { padding: 0; background: #fff; }
    .cert-wrapper { margin: 0; border-width: 10px; }
}
body[data-theme="high-contrast"] .cert-wrapper { border-color: #ff0; background: #000; }
body[data-theme="high-contrast"] .cert-inner { border-color: #ff0; background: #000; }
body[data-theme="high-contrast"] .cert-header,
body[data-theme="high-contrast"] .cert-content,
body[data-theme="high-contrast"] .cert-message,
body[data-theme="high-contrast"] .official-seal { color: #ff0 !important; }


/* ============================================================
   survey/satisfaction.php — 만족도 설문
   ============================================================ */
.survey-container { max-width: 900px; margin: 40px auto; padding: 0 20px; }
.survey-header { text-align: center; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid #e0e0e0; }
.survey-header h2 { font-size: 2rem; font-weight: 800; color: #333; margin-bottom: 10px; }
.survey-header .course-info { color: #666; font-size: 1.1rem; margin-top: 10px; }

.question-card { background: #fff; border: 2px solid #e0e0e0; border-radius: 12px; padding: 30px; margin-bottom: 25px; }
.question-number { display: inline-block; background: #1976d2; color: #fff; padding: 5px 15px; border-radius: 20px; font-weight: 700; font-size: 0.9rem; margin-bottom: 15px; }
.question-text { font-size: 1.2rem; font-weight: 700; color: #333; margin-bottom: 5px; }
.question-required { color: #d32f2f; font-weight: 700; margin-left: 5px; }

.likert-scale { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.likert-option { flex: 1; }
.likert-option input[type="radio"] { display: none; }
.likert-option label { display: block; text-align: center; padding: 20px 10px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; background: #fff; }
.likert-option label:hover { border-color: #1976d2; background: #f5f5f5; }
.likert-option input[type="radio"]:checked + label { border-color: #1976d2; background: #e3f2fd; font-weight: 700; }
.likert-label { font-size: 1rem; font-weight: 600; color: #333; margin-bottom: 5px; }
.likert-score { font-size: 1.5rem; font-weight: 800; color: #1976d2; }

.text-input { width: 100%; min-height: 120px; padding: 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; line-height: 1.6; resize: vertical; margin-top: 15px; }
.text-input:focus { border-color: #1976d2; outline: none; }

.btn-submit { width: 100%; background: #1976d2; color: #fff; border: none; padding: 18px; border-radius: 8px; font-size: 1.2rem; font-weight: 700; cursor: pointer; margin-top: 30px; }
.btn-submit:hover { background: #1565c0; }
.btn-cancel { display: block; text-align: center; color: #666; margin-top: 15px; text-decoration: none; }

.alert-success { background: #d4edda; color: #155724; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745; margin-bottom: 30px; text-align: center; }
.alert-error { background: #f8d7da; color: #721c24; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-bottom: 30px; }

.progress-bar { background: #e0e0e0; height: 8px; border-radius: 4px; margin-bottom: 40px; overflow: hidden; }
.progress-fill { background: #1976d2; height: 100%; width: 0%; transition: width 0.3s; }


/* ============================================================
   reactivate.php — 계정 재활성화
   ============================================================ */
.reactivate-container { max-width: 600px; margin: 80px auto; padding: 40px; }
.alert-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 25px; border-radius: 8px; margin-bottom: 30px; }
.alert-box h3 { color: #664d03; font-size: 1.5rem; margin-bottom: 15px; }
.alert-box p { color: #664d03; font-size: 1.1rem; line-height: 1.8; font-weight: 500; }
.btn-reactivate { width: 100%; background: #0056b3; color: #fff; border: none; padding: 18px; border-radius: 8px; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.btn-reactivate:hover { background: #004494; }
.btn-cancel-btn { width: 100%; background: #6c757d; color: #fff; border: none; padding: 15px; border-radius: 8px; font-size: 1.1rem; cursor: pointer; margin-top: 10px; }


/* ============================================================
   office/courses/categories.php — 관리자 카테고리 탭
   ============================================================ */
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 30px; }
.tab-nav a { padding: 12px 24px; text-decoration: none; color: var(--gray-600); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.tab-nav a:hover,
.tab-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }

.category-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--gray-50); border-radius: var(--radius); margin-bottom: 8px; border: 1px solid var(--border-color); }
.ncs-sub { margin-left: 30px; margin-top: 8px; }

/* ============================================================
   다크모드 오버라이드 (prefers-color-scheme: dark)
   pages.css 에 정의된 모든 하드코딩 색상의 다크 대응
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* 공통 텍스트 */
    .page-main-title { color: #e0e0e0; }
    .section-sub-title { color: #c0c0d4; }

    /* 테이블 hover — course_detail 등 */
    tr:hover:not(.is-disabled) { background-color: #2a2a45; }
    tr.active-row { background-color: #1a2840 !important; outline-color: #7db8f7; }

    /* 검색/입력 래퍼 */
    .input-wrapper { background: #252540; border-color: #3a3a5c; }

    /* 결과 박스 — verify.php */
    .result-valid  { background: #0d2b1d; border-color: #28a745; }
    .result-invalid { background: #2b0d0d; border-color: #dc3545; }
    .result-valid  .result-title { color: #4ade80; }
    .result-invalid .result-title { color: #f87171; }
    .result-info strong { color: #c0c0d4; }
    .error-box { background: #2a1e0d; border-left-color: #ffc107; color: #f0c040; }
    .help-text { color: #c0c0d4; border-top-color: #3a3a5c; }

    /* 학습 대시보드 — info 카드 */
    .info-card-item { background: #252540; border-color: #3a3a5c; }
    .info-card-item .label { color: #9090b0; }

    /* 차시 카드 */
    .chapter-card { background: #252540; border-color: #3a3a5c; }
    .chapter-card.completed { background: #1e1e2e; border-color: #3a3a5c; }
    .chapter-card:hover { border-color: #7db8f7; }
    .chapter-title { color: #e0e0e0; }
    .chapter-meta { color: #9090b0; }
    .num-label { color: #9090b0; }
    .chapter-progress-track { background: #2e2e5a; }

    /* 수료증 목록 카드 */
    .cert-card { background: #252540; border-color: #3a3a5c; }
    .cert-card:hover { border-color: #7db8f7; }
    .badge-complete { background: #0d2b1d; color: #4ade80; border-color: #28a745; }
    .badge-info { background: #1e1e2e; color: #9090b0; border-color: #3a3a5c; }
    .cert-title { color: #e0e0e0; }
    .cert-meta-list { color: #9090b0; }
    .cert-meta-list strong { color: #c0c0d4; }

    /* 댓글 hover */
    .comment-item:hover { background-color: #252540 !important; }

    /* 강의실 — 과정 카드 */
    .badge-secondary { background: #2a2a45; color: #9090b0; }
    .course-title { color: #e0e0e0; }
    .course-date { color: #9090b0; }
    .progress-label, .progress-chapter { color: #9090b0; }
    .btn-disabled { background: #2e2e5a; color: #7070a0; }

    /* 수료증 페이지 */
    .cert-header { color: #e0e0e0; }
    .cert-content { color: #c0c0d4; }
    .cert-message { background: #1a2840; color: #c0c0d4; }

    /* 재활성화 */
    .alert-box { background: #2a1e0d; border-left-color: #ffc107; }
    .alert-box h3, .alert-box p { color: #f0c040; }
}