/* ──────────────────────────────────────────────
   education.css
   교육관리 전용 스타일시트
   inline style 금지 – class 방식으로만 작성
   ────────────────────────────────────────────── */

:root {
    --mainColor:#1B2547;
    --subColor:#2A58B4;
    --outlineColor:#e0e0e0;
}
/* ─── 홈 카드 ─── */
.edu_home_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.edu_home_card {
    width: 200px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #dde3f0;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}
.edu_home_card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.edu_home_card_title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3a5e;
    margin-bottom: 8px;
}
.edu_home_card_desc {
    font-size: 12px;
    color: #7a8aab;
    text-align: center;
}

/* ─── 공통 버튼 ─── */
.edu_btn {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.edu_btn:hover { opacity: 0.85; }
.edu_btn_primary {
    background: #4a6cf7;
    color: #fff;
}
.edu_btn_secondary {
    background: #e8ecf5;
    color: #2d3a5e;
    border: 1px solid #c5cfe8;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.edu_btn_secondary:hover {
    background: #4a6cf7;
    border-color: #4a6cf7;
    color: #fff;
    opacity: 1;
}
.edu_btn_danger {
    background: #e74c3c;
    color: #fff;
}

.edu_btn_sm {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.edu_btn_sm:hover { opacity: 0.85; }

/* ─── 상단 버튼 영역 ─── */
.MCC_top_btnWrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ─── 테이블 ─── */
.edu_table_wrap {
    padding: 16px;
    overflow-x: auto;
}
.edu_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.edu_table th {
    background: #f0f3fa;
    color: #4a5a7a;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #dde3f0;
}
.edu_table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f8;
    color: #2d3a5e;
    vertical-align: middle;
}
.edu_table tr:hover td { background: #f7f9ff; }
.edu_table_empty {
    text-align: center;
    color: #9aa5c0;
    padding: 30px;
}
.edu_table_sub td { background: #f9fbff; }
.edu_table_inner {
    margin: 8px 0;
    border: 1px solid #e0e7f5;
}
.edu_table_inner th { background: #edf1fb; }

/* ─── 뱃지 ─── */
.edu_badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #e8ecf5;
    color: #4a5a7a;
}
.edu_badge_success { background: #d4f4e4; color: #1a7a4a; }
.edu_badge_danger  { background: #fde8e6; color: #c0392b; }
.edu_badge_warning { background: #fef3d0; color: #a07000; }
.edu_badge_muted     { background: #eaedf3; color: #8a99b8; }
.edu_badge_platform  { background: #e8edff; color: #3a5bd9; }

/* ─── 상세정보 셀 ─── */
.edu_course_description {
    display: block;
    font-size: 13px;
    padding: 0px 5px;
    color: #4a5568;
    white-space: pre-line;
    text-align: left;
}
.edu_video_section {
    display: block;
    text-align: left;
}

/* ─── 영상 목록 행 ─── */
.edu_video_row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.edu_video_row + .edu_video_row {
    border-top: 1px dashed #eaedf3;
    margin-top: 4px;
    padding-top: 6px;
}
.edu_video_title {
    font-size: 13px;
    color: #2d3a5e;
    font-weight: 500;
}
.edu_video_url {
    font-size: 11px;
    color: #9aa5c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
/* 영상 개별 길이 */
.edu_video_duration {
    font-size: 11px;
    color: #5a6a8e;
    background: #f0f3fa;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    margin-left: auto;
}
/* 영상목록 위 총 시간 집계 */
.edu_video_total_duration {
    display: block;
    font-size: 12px;
    color: #3a5bd9;
    font-weight: 600;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e5f0;
}
/* 수정모달 내 duration 뱃지 */
.course_update_duration_badge {
    margin-left: 4px;
    margin-right: auto;
}

/* ─── 설정 폼 ─── */
.edu_settings_wrap {
    padding: 24px;
    max-width: 500px;
}
.edu_settings_row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.edu_settings_label {
    font-size: 13px;
    font-weight: 600;
    color: #2d3a5e;
}
.edu_settings_input {
    width: 120px;
    padding: 8px 12px;
    border: 1px solid #c8d3ea;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}
.edu_settings_input:focus { border-color: #4a6cf7; }
.edu_settings_hint {
    font-size: 11px;
    color: #9aa5c0;
}
.edu_settings_btnWrap {
    margin-top: 8px;
}

/* ─── 일반 폼 ─── */
.edu_form_row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.edu_form_row_inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.edu_form_label {
    font-size: 13px;
    font-weight: 600;
    color: #2d3a5e;
}
.edu_form_input,
.edu_form_select,
.edu_form_textarea {
    padding: 8px 12px;
    border: 1px solid #c8d3ea;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.edu_form_input:focus,
.edu_form_select:focus,
.edu_form_textarea:focus {
    border-color: #4a6cf7;
}
.edu_form_textarea {
    min-height: 80px;
    resize: vertical;
}
.edu_required { color: #e74c3c; }

/* ─── 모달 ─── */
.edu_modal_header {
    font-size: 16px;
    font-weight: 700;
    color: #2d3a5e;
    padding: 16px 20px;
    border-bottom: 1px solid #eef1f8;
}
.edu_modal_body {
    padding: 16px 20px;
    max-height: 480px;
    overflow-y: auto;
}
.edu_modal_footer {
    padding: 12px 20px;
    border-top: 1px solid #eef1f8;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.edu_modal_desc {
    font-size: 13px;
    color: #4a5a7a;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* ─── 진행률 바 ─── */
.edu_progress_bar_wrap {
    display: inline-block;
    width: 120px;
    height: 8px;
    background: #e8ecf5;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}
.edu_progress_bar {
    height: 100%;
    background: #4a6cf7;
    border-radius: 4px;
    transition: width 0.4s;
}
.edu_progress_text {
    font-size: 12px;
    color: #4a5a7a;
}

/* ─── 수강관리 잔여횟수 카드 ─── */
.edu_quotaCard_wrap {
    display: flex;
    margin-right: auto;
    gap: 12px;
}
.edu_quotaCard {
    text-align: center;
    width: 160px;
    border-collapse: collapse;
}
.edu_quotaCard_th {
    background-color: #3a7a4c;
    border: 1px solid white;
    border-radius: 5px 5px 0 0;
    font-size: 12px;
    padding: 5px 8px;
    color: white;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.edu_quotaCard_td {
    background-color: white;
    border-radius: 0 0 8px 8px;
    border: 1px solid #3a7a4c;
    border-top: none;
    padding: 6px 0;
    line-height: 1.4;
}
.edu_quotaCard_count {
    font-weight: 900;
    font-size: 22px;
    color: #3a7a4c;
}
.edu_quotaCard_unit {
    font-size: 12px;
    color: #555;
    margin-left: 1px;
}
.edu_quotaCard_count_danger {
    color: #e74c3c !important;
}
.edu_quotaCard_th_danger {
    background-color: #c0392b !important;
}

/* ─── 수강관리 요약 ─── */
.edu_enrollment_summary {
    padding: 10px 16px;
    background: #f0f3fa;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #2d3a5e;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.edu_enrollment_summary_text strong {
    color: #4a6cf7;
    font-size: 15px;
}
.edu_enrollment_summary_actions {
    display: flex;
    gap: 6px;
}

/* ─── enrollment_create 모달 flex 레이아웃 ─── */
/* 1) form에 명시적 height 부여 → % 참조 체인 연결
      baseModal_header(27px+pad10=37px) + btnWrap(40px+pad20=60px) = 97px */
#enrollment_create_form {
    height: calc(700px - 37px - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 2) base_2025_modal_box_nolimit의 calc(100% - 137px)은 form의 auto height를
      참조해 무효 → flex:1 + height:auto 로 대체하여 overflow 동작 복구 */
#enrollment_create_form > .base_2025_modal_box_nolimit {
    flex: 1;
    height: auto;
    overflow: hidden;
    justify-content: flex-start;
}
/* 직원 선택 섹션이 남은 세로 공간 전체를 차지 */
#enrollment_create_form .base_2025_modal_tr_col {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    justify-content: flex-start;
}
/* 테이블 li가 남은 공간 차지 */
#enrollment_create_form .edu_member_table_row {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
/* 스크롤은 여기서만 — 빈 영역에 배경 줘서 outline 명확히 */
#enrollment_create_form .edu_member_select_wrap {
    flex: 1;
    max-height: none;
    min-height: 0;
    background: #f8fafd;
    border-color: #a8b8d8;
}

/* ─── 수강 배정 이수기한 유형 ─── */
.edu_hidden { display: none !important; }
.edu_expiry_type_wrap {
    display: flex;
    gap: 16px;
    align-items: center;
}
.edu_expiry_radio_label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #2d3a5a;
    cursor: pointer;
}
.edu_relative_days_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.edu_relative_days_label {
    font-size: 13px;
    color: #5a6a8a;
    white-space: nowrap;
}
.edu_relative_days_input {
    width: 70px;
    height: 32px;
    border: 1px solid #c8d3ea;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 13px;
    color: #2d3a5a;
    text-align: center;
}

/* 이수기한 세부 행 높이 고정 */
#expiry_absolute_row,
#expiry_relative_row,
#expiry_none_row { height: 52px; }

/* ─── 수강 배정 직원 선택 ─── */
.edu_member_label_row { width: 100%; margin-bottom: 6px; }
.edu_member_ctrl_row  { width: 100%; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.edu_member_table_row { width: 100%; }
.edu_member_select_wrap {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #c8d3ea;
    border-radius: 6px;
}
.edu_member_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.edu_member_table thead th {
    position: sticky;
    top: 0;
    background: #f7f9fd;
    font-size: 11px;
    font-weight: 700;
    color: #9aa5c0;
    padding: 7px 10px;
    border-bottom: 1px solid #e5eaf5;
    text-align: center;
}
.edu_member_table thead th:first-child { width: 36px; }
.edu_member_table tbody tr {
    cursor: pointer;
    background: #ffffff;
    border-bottom: 1px solid #f0f3fa;
}
.edu_member_table tbody tr:last-child { border-bottom: none; }
.edu_member_table tbody tr:hover { background: #f0f3fa; }
.edu_member_table tbody td { padding: 7px 10px; white-space: nowrap; }
.edu_member_table tbody td:first-child { text-align: center; }
.edu_td_name { text-align: center;font-weight: 600; color: #2d3a5a; }
.edu_td_dept { text-align: center;color: #5a6a8a; }
.edu_td_hire { text-align: center;font-size: 12px; color: #9aa5c0; }

.edu_member_group_select {
    display: flex;
    align-items: center;
    gap: 8px;
}
.edu_member_dept_select {
    flex: 1;
    text-align: center;
    height: 30px;
    border: 1px solid #c8d3ea;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 13px;
    color: #2d3a5a;
    background: #fff;
}
.edu_member_search_input {
    flex: 2;
    height: 30px;
    border: 1px solid #c8d3ea;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 13px;
    color: #2d3a5a;
    background: #fff;
    outline: none;
}
.edu_member_search_input:focus {
    border-color: #5b7fd4;
}

/* ─── 영상 재생 페이지 ─── */
.edu_video_wrap {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.edu_video_player_wrap {
    display: flex;
    justify-content: center;
}
.edu_video_player_wrap iframe {
    max-width: 100%;
    border-radius: 8px;
}
.edu_video_info_wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    background: #f0f3fa;
    border-radius: 8px;
}
.edu_video_progress_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.edu_video_progress_label {
    font-size: 13px;
    font-weight: 600;
    color: #4a5a7a;
}
.edu_video_progress_text {
    font-size: 14px;
    font-weight: 700;
    color: #4a6cf7;
    min-width: 50px;
}
.edu_video_completed_badge {
    padding: 4px 12px;
    background: #d4f4e4;
    color: #1a7a4a;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.edu_video_course_name {
    font-size: 13px;
    color: #7a8aab;
    padding: 4px 0;
}

/* ─── 이수 현황 리포트 ─── */
.edu_report_course {
    font-size: 14px;
    font-weight: 600;
    color: #2d3a5e;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f8;
}

/* ─── 수강관리 셀렉트 ─── */
.edu_selectInput {
    all: unset;
    border: 1px solid grey;
    border-radius: 10px;
    padding: 5px 10px;
    width: 150px;
    text-align: center;
    background-color: #DCEDEE;
    font-weight: 700;
    background-image: url(/static/image/paysys/arrow_down.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 100%;
    cursor: pointer;
}

/* ─── 빈 상태 안내 ─── */
.edu_emptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: #9aa5c0;
    user-select: none;
}
.edu_emptyState_icon {
    font-size: 40px;
    opacity: 0.4;
}
.edu_emptyState_text {
    font-size: 15px;
    font-weight: 600;
    color: #7a8aab;
}
.edu_emptyState_sub {
    font-size: 12px;
    color: #b0bace;
}

/* ─── 토글 스위치 ─── */
.edu_toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.edu_toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.edu_toggle_slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #c8d3ea;
    border-radius: 24px;
    transition: background 0.2s;
}
.edu_toggle_slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform 0.2s;
}
.edu_toggle input:checked + .edu_toggle_slider {
    background: #4a6cf7;
}
.edu_toggle input:checked + .edu_toggle_slider::before {
    transform: translateX(18px);
}

/* ─── 모달 헤더 내 활성 토글 ─── */
.course_active_toggle_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 44px;
}
.course_active_toggle_label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.course_active_toggle_wrap .edu_toggle_slider {
    background: rgba(255, 255, 255, 0.3);
}
.course_active_toggle_wrap .edu_toggle input:checked + .edu_toggle_slider {
    background: #5af07a;
}

/* ─── 폼 힌트 ─── */
.edu_form_hint {
    font-size: 11px;
    color: #9aa5c0;
    margin-top: 2px;
}

/* ─── YouTube 링크 ─── */
.edu_youtube_link {
    color: #4a6cf7;
    font-size: 12px;
    text-decoration: none;
    font-family: monospace;
}
.edu_youtube_link:hover { text-decoration: underline; }

/* ─── 교육과정 등록 모달 ─── */
.course_create_textarea {
    text-align: left;
    min-height: 64px;
    resize: vertical;
    border: 1px solid var(--outlineColor);
    padding: 8px;
    line-height: 1.4;
    width: 60%;
}
.course_create_textarea::placeholder {
    text-align: left;
    font-size: 12px;
    color: #aaa;
}

/* 기본 제공 과정 선택 */
.course_create_preset_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 12px;
    list-style: none;
    flex-wrap: wrap;
}

/* 영상 목록 섹션 헤더 */
.course_create_video_header_row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 90%;
    padding: 12px 0 4px;
    border-top: 1px solid #eef1f8;
    margin-top: 8px;
    list-style: none;
}
.course_create_video_list {
    width: 90%;
    list-style: none;
}
.course_create_video_header_title {
    font-size: 13px;
    font-weight: 700;
    color: #2d3a5e;
    flex: 1;
}
.course_create_video_header_hint {
    font-size: 11px;
    color: #9aa5c0;
}

/* 영상 행 */
.course_create_video_row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 0;
    border-bottom: 1px solid #f0f3fa;
    list-style: none;
}
.course_create_video_row:last-child {
    border-bottom: none;
}
.course_create_video_num {
    font-size: 12px;
    color: #9aa5c0;
    width: 18px;
    text-align: right;
    flex-shrink: 0;
}
.course_create_video_title_input {
    flex: 2;
    width: auto;
    text-align: left;
}
.course_create_video_title_input::placeholder {
    text-align: left;
}
.course_create_video_id_input {
    flex: 1;
    width: auto;
}
.course_create_remove_btn {
    flex-shrink: 0;
}
.course_create_td_left {
    justify-content: flex-start;
}
.edu_tr_clickable {
    cursor: pointer;
}
.edu_tr_clickable:hover {
    background: #f0f3fa;
}
.course_update_existing_text {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
    color: #4a5568;
    background: #f7f9fc;
    border: 1px solid var(--outlineColor);
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ─── 동의 overlay ─── */
.edu_consent_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.edu_consent_box {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
}
.edu_consent_title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 12px;
    color: #2A58B4;
}
.edu_consent_text {
    font-size: 0.8rem;
    color: #555;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: 4px;
    font-family: inherit;
}
.edu_consent_check_label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.9rem;
    cursor: pointer;
}
.edu_consent_actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
#edu_consent_btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── reception 직원 영상 플레이어 ─── */
.edu_rcp_play_page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}
.edu_rcp_play_header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--outlineColor);
    margin-bottom: 12px;
}
.edu_rcp_play_back {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--subColor);
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
}
.edu_rcp_play_back:hover { color: var(--mainColor); }
.edu_rcp_play_course_name {
    font-size: 13px;
    color: #666;
    flex: 1;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edu_rcp_play_title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mainColor);
    margin-bottom: 12px;
}
.edu_rcp_play_player_wrap {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
}
.edu_rcp_play_player_wrap > div,
.edu_rcp_play_player_wrap iframe {
    width: 100% !important;
    height: 100% !important;
}
.edu_rcp_play_info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* PC */
@media (min-width: 768px) {
    .edu_rcp_play_page {
        max-width: 1100px;
        padding: 32px 48px;
    }
    .edu_rcp_play_header {
        padding-bottom: 16px;
        margin-bottom: 20px;
    }
    .edu_rcp_play_back {
        font-size: 15px;
        gap: 6px;
    }
    .edu_rcp_play_course_name {
        font-size: 15px;
    }
    .edu_rcp_play_title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .edu_rcp_play_player_wrap {
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .edu_rcp_play_info {
        gap: 12px;
        font-size: 15px;
    }
}

/* ─── reception 직원 교육 홈 ─── */
.edu_rcp_body {
    margin-top: 100px;          /* reception_home_nav_top(fixed 100px) 아래로 밀기 */
    width: 90%;
    max-width: 600px;
    overflow-y: auto;
}
.edu_rcp_body_title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}
.edu_rcp_list {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.edu_rcp_card {
    background: #fff;
    border: 1px solid var(--outlineColor);
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.edu_rcp_card_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.edu_rcp_total_duration {
    font-size: 11px;
    color: #3a5bd9;
    font-weight: 600;
    background: #eef1fc;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}
.edu_rcp_card_title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mainColor);
    flex: 1;
}
.edu_rcp_card_desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
    white-space: pre-line;
}
.edu_rcp_progress_row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.edu_rcp_expiry {
    font-size: 11px;
    color: #e53935;
    margin-left: auto;
}
.edu_rcp_expiry_over {
    font-weight: 600;
}
.edu_rcp_overdue_notice {
    font-size: 12px;
    color: #b71c1c;
    background: #fff3f3;
    border-left: 3px solid #e53935;
    padding: 7px 10px;
    margin: 4px 0 8px;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}
.edu_rcp_video_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.edu_rcp_video_item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f7f9fc;
    border-radius: 6px;
    font-size: 13px;
}
.edu_rcp_video_order {
    width: 20px;
    text-align: center;
    font-size: 12px;
    color: #8a99b8;
    flex-shrink: 0;
}
.edu_rcp_video_title {
    flex: 1;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edu_rcp_video_progress {
    font-size: 12px;
    color: #8a99b8;
    flex-shrink: 0;
}
.edu_rcp_play_btn {
    display: inline-block;
    padding: 4px 12px;
    background: var(--subColor);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
}
.edu_rcp_play_btn:hover {
    background: var(--mainColor);
}
.edu_rcp_play_btn_disabled {
    background: #bdbdbd;
    cursor: default;
    pointer-events: none;
}
.edu_expired_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    gap: 12px;
}
.edu_expired_icon {
    font-size: 48px;
    line-height: 1;
}
.edu_expired_title {
    font-size: 18px;
    font-weight: 700;
    color: #b71c1c;
}
.edu_expired_desc {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
}
.edu_expired_back_btn {
    margin-top: 8px;
    display: inline-block;
    padding: 10px 24px;
    background: var(--subColor);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
}
.edu_rcp_video_empty {
    font-size: 13px;
    color: #aaa;
    padding: 8px;
    text-align: center;
}
.edu_rcp_empty {
    text-align: center;
    padding: 40px 0;
    color: #aaa;
    font-size: 14px;
}

/* ─── 홈 대시보드 - 컨테이너 ─── */
.edu_home_container {
    width: 90%;
    align-self: center;
    overflow-y: auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ─── 홈 대시보드 - 요약 통계 ─── */
.edu_home_stat_wrap {
    display: flex;
    gap: 12px;
    padding: 0 20px 20px;
    flex-wrap: wrap;
}
.edu_home_stat_item {
    flex: 1;
    min-width: 120px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #dde3f0;
    border-radius: 10px;
    text-align: center;
}
.edu_home_stat_item_danger .edu_home_stat_value { color: #e74c3c !important; }
.edu_home_stat_item_danger { border-color: #fccaca; background: #fff8f8; }
.edu_home_stat_item_quota { border-color: #f5c6cb; background: #fff5f5; }
.edu_home_stat_value_quota { color: #c0392b !important; }
.edu_enrollment_mdl { display: flex; align-items: flex-start; }
.edu_enrollment_stat_item { flex: none; width: 160px; padding: 6px 14px; }
.edu_home_stat_value {
    font-size: 26px;
    font-weight: 700;
    color: #2a58b4;
    line-height: 1.2;
    margin-bottom: 5px;
}
.edu_home_stat_label {
    font-size: 11px;
    color: #7a8aab;
    font-weight: 500;
}

/* ─── 홈 대시보드 - 섹션 ─── */
.edu_home_section {
    padding: 0 20px 24px;
}
.edu_home_section_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.edu_home_section_title {
    font-size: 14px;
    font-weight: 700;
    color: #2d3a5e;
}
.edu_home_section_hint {
    font-size: 11px;
    color: #9aa5c0;
}
.edu_home_section_link {
    margin-left: auto;
    font-size: 12px;
    color: #4a6cf7;
    text-decoration: none;
    white-space: nowrap;
}
.edu_home_section_link:hover { text-decoration: underline; }

/* ─── 홈 대시보드 - 테이블 ─── */
.edu_home_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border: 1px solid #dde3f0;
    border-radius: 8px;
    overflow: hidden;
}
.edu_home_table thead tr { background: #f0f3fa; }
.edu_home_table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #4a5a7a;
    border-bottom: 1px solid #dde3f0;
}
.edu_home_table td {
    padding: 20px 14px;
    border-bottom: 1px solid #eef1f8;
    color: #2d3a5e;
    vertical-align: middle;
}
.edu_home_table tbody tr:last-child td { border-bottom: none; }
.edu_home_table_row_link:hover td { background: #f7f9ff; cursor: pointer; }
.edu_home_table_empty {
    text-align: center;
    color: #9aa5c0;
    padding: 24px;
}
.edu_home_table_none { color: #c0c8da; }

/* ─── 영상 토스트 공통 ─── */
.violation_toast,
.info_toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    z-index: 9999;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: edu_toast_in 0.25s ease;
    pointer-events: none;
}
.violation_toast { background: rgba(200, 30, 30, 0.92); }
.info_toast      { background: rgba(30, 100, 200, 0.92); }
@keyframes edu_toast_in {
    from { opacity: 0; top: 8px; }
    to   { opacity: 1; top: 20px; }
}