/* ===== 교육 마이페이지 CSS =====
   기본 폰트 크기는 모달 설정으로 오버라이드 가능 (--edu-mypage-* CSS 변수)
   각 사이트별로 모달에서 px 단위로 조정 가능 */
.edu_my_title { font-size: var(--edu-mypage-title-size, 32px); font-weight: 700; margin: 0 0 20px; color: #222; }

/* ===== 헤더 영역 (PC 기본) ===== */
.edu_my_header { width: 100%; }
.edu_my_header_top {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; width: 100%;
}
.edu_my_header_top .edu_my_title { margin: 0 !important; }
.edu_my_header_sub {
    display: flex; align-items: center; gap: 14px;
    margin-top: 6px;
}
.edu_my_who {
    font-size: 18px; font-weight: 600; color: #111;
}
.edu_my_logout_btn {
    padding: 10px 18px; background: #fff; border: 1px solid #d1d5db;
    color: #374151; border-radius: 6px; font-size: 16px; font-weight: 600;
    text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
    transition: all 0.2s;
}
.edu_my_logout_btn:hover { background: #f9fafb; border-color: #9ca3af; }
.edu_my_logout_btn i { font-size: 20px; line-height: 1; }
/* PC: 우측 상단 버튼만 노출, 모바일 버튼 숨김 */
.edu_my_logout_pc { display: block; }
.edu_my_logout_mb { display: none; }

.edu_my_tabs {
  display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid #eee; width: 100% !important;
}
.edu_my_tab {
  padding: 10px 20px; font-size: var(--edu-mypage-tab-size, 19px); color: #888; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s;
}
.edu_my_tab.on { color: #222; font-weight: 700; border-bottom-color: var(--primary, #2196f3); }
.edu_my_tab span { font-size: var(--edu-mypage-tab-cnt-size, 17px); color: #aaa; margin-left: 2px; }
.edu_my_tab.on span { color: var(--primary, #2196f3); }

.edu_my_list { width: 100% !important; }

.edu_my_item {
  display: flex; gap: 16px; align-items: center;
}
.edu_my_thumb {
  width: 100px; height: 75px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.edu_my_thumb img { width: 100%; height: 100%; object-fit: cover; }
.edu_my_info { flex: 1; min-width: 0; }
.edu_my_cate { font-size: var(--edu-mypage-item-cate-size, 16px); color: #888; margin-bottom: 2px; }
.edu_my_name {
  font-size: var(--edu-mypage-item-title-size, 20px); font-weight: 600; color: #222; text-decoration: none;
  display: block; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edu_my_name:hover { color: var(--primary, #2196f3); }
.edu_my_meta { font-size: var(--edu-mypage-item-meta-size, 17px); color: #999; margin-bottom: 2px; }
.edu_my_status { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.edu_status_badge {
  display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 3px;
  font-weight: 600; color: #fff;
}
.edu_status_init { background: #3498db; }
.edu_status_pending { background: #9b59b6; }
.edu_status_done { background: #27ae60; }
.edu_status_wait { background: #f39c12; }
.edu_status_cancel { background: #999; }
.edu_status_ing { background: #2ecc71; }
.edu_status_end { background: #34495e; }
.edu_my_price { font-size: var(--edu-mypage-item-price-size, 18px); color: #666; }
.edu_my_actions { margin-top: 6px; display: flex; gap: 6px; }
.edu_my_btn {
  padding: 4px 12px; font-size: 12px; border-radius: 4px; cursor: pointer;
  text-decoration: none; border: 1px solid #ddd; background: #fff; color: #333;
}
.edu_my_btn:hover { background: #f4f5f6; }
.edu_my_btn_cancel { color: #e74c3c; border-color: #e74c3c; }
.edu_my_btn_cancel:hover { background: #fdf0ef; }

/* 버튼 폰트 크기도 메타값과 동일하게 키움 */
.edu_my_btn { font-size: var(--edu-mypage-item-meta-size, 17px); padding: 6px 14px; }
.edu_my_actions { margin-top: 10px; flex-wrap: wrap; }

/* ===== 깔끔 정렬 레이아웃 ===== */
/* 카드 정보 영역을 좌(메인)/우(상태+액션)로 분리 */
.edu_my_info {
    display: flex; gap: 20px; align-items: center; flex: 1; min-width: 0;
}
.edu_my_main { flex: 1; min-width: 0; }
.edu_my_side {
    flex-shrink: 0; display: flex; align-items: center;
    min-width: auto;
}
.edu_my_side .edu_my_actions {
    margin: 0; flex-direction: row; align-items: center; gap: 8px;
    flex-wrap: nowrap; justify-content: flex-end;
}
.edu_my_side .edu_my_btn { white-space: nowrap; text-align: center; }

/* 제목 앞 상태 라벨 */
.edu_my_name_badge {
    display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 3px;
    font-weight: 600; color: #fff; vertical-align: middle; margin-right: 8px;
    line-height: 1.5;
}

/* 메타 인라인 — 신청날짜, 강의기간 등 가로 정렬 */
.edu_my_meta_inline {
    list-style: none; padding: 0; margin: 8px 0 12px;
    display: flex; flex-wrap: wrap; gap: 0;
    font-size: var(--edu-mypage-item-meta-size, 17px); color: #555; line-height: 1.6;
}
.edu_my_meta_inline li {
    display: inline-flex; align-items: center; padding: 0 14px;
    border-right: 1px solid #e5e7eb;
}
.edu_my_meta_inline li:first-child { padding-left: 0; }
.edu_my_meta_inline li:last-child { border-right: 0; }
.edu_my_meta_inline .lbl {
    font-weight: 600; color: #111; margin-right: 6px;
    font-size: 0.92em;
}
.edu_my_meta_inline .val { color: #374151; }

/* 카드형 디자인 — 연한 회색 배경 + 연한 라인 + 부드러운 호버 효과 */
.edu_my_item {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 10px;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease, background 0.25s ease;
    will-change: transform, box-shadow;
}
.edu_my_item:hover {
    background: #fff;
    border-color: #cccccc;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

/* ===== 모바일 (≤ 720px) — 좌/우 분리 해제 + 메타 세로 정렬 ===== */
@media screen and (max-width: 720px) {
    /* 카드 자체 — 썸네일/정보 세로 배치 */
    .edu_my_item { flex-direction: column; padding: 14px; gap: 12px; }
    .edu_my_thumb { width: 100%; height: auto; aspect-ratio: 4/3; max-height: 180px; }
    .edu_my_thumb img { width: 100%; height: 100%; object-fit: cover; }

    /* 정보 영역 — 좌(메인)/우(액션) 분리 해제 */
    .edu_my_info { flex-direction: column; gap: 10px; align-items: stretch; }
    .edu_my_main { width: 100%; }
    .edu_my_side { width: 100%; align-items: stretch; min-width: 0; }

    /* 메타 정보 — 한 줄에 하나씩 (세로 적층) */
    .edu_my_meta_inline {
        flex-direction: column;
        gap: 4px 0;
        margin: 8px 0 10px;
    }
    .edu_my_meta_inline li {
        display: flex;
        padding: 4px 0;
        border-right: 0;
        border-bottom: 1px dashed #e5e7eb;
        align-items: center;
        gap: 8px;
    }
    .edu_my_meta_inline li:last-child { border-bottom: 0; }
    .edu_my_meta_inline .lbl {
        flex: 0 0 80px;
        margin-right: 0;
        font-size: 13px;
    }
    .edu_my_meta_inline .val {
        flex: 1;
        font-size: 14px;
    }

    /* 액션 버튼 영역 */
    .edu_my_side .edu_my_actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: stretch;
    }
    .edu_my_side .edu_my_actions > * {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    .edu_my_btn { padding: 10px 12px; font-size: 14px; }
    .edu_my_pop_wrap { flex: 1; }
    .edu_my_pop_wrap .edu_my_btn_attach { width: 100%; }
    .edu_my_pop { right: 0; left: auto; width: calc(100vw - 40px); max-width: 320px; }

    /* 헤더 — 1행: 타이틀(데스크탑 버튼은 숨김) / 2행: 이름 + 모바일 버튼 */
    .edu_my_logout_pc { display: none !important; }
    .edu_my_logout_mb { display: block; }
    .edu_my_title { font-size: 22px !important; }
    .edu_my_header_sub {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .edu_my_who { font-size: 16px !important; font-weight: 600 !important; color: #111; }

    /* 탭 */
    .edu_my_tab { padding: 8px 12px; font-size: 14px !important; }
    .edu_my_tab span { font-size: 13px !important; }
}

/* ===== 더 작은 모바일 (≤ 480px) ===== */
@media screen and (max-width: 480px) {
    .edu_my_item { padding: 12px; }
    .edu_my_meta_inline .lbl { flex: 0 0 70px; font-size: 12px; }
    .edu_my_meta_inline .val { font-size: 13px; }
    .edu_my_btn { font-size: 13px; padding: 9px 10px; }
}