.card_lable_top_01 {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff !important;
    border-radius: 4px !important;
}

/* HTML에서 쓰는 이름(status-ongoing)과 똑같이 맞춰야 함 */
.status-ongoing {
    background-color: #000 !important;
     /*background-color: #EF4444 !important;  */
} 

.status-upcoming {
    background-color: #2485FB !important;
} 



/* 이미지를 감싸는 span을 기준점으로 설정 */
.course_img {
    position: relative;
    display: block;
}	
/* 레이블들을 묶는 컨테이너 */
.course_labels {
    position: absolute;
    top: 8px;    /* 상단 여백 */
    right: 8px;  /* 우측 여백 */
    display: flex;
    flex-direction: column; /* 세로로 나열 */
    gap: 2px;     /* 레이블 사이 간격 */
    z-index: 10;  /* 이미지보다 위에 보이게 */
}

/* 개별 레이블 스타일링 */
.course_labels span {
    padding: 0px 4px;
    font-size: 10px;
    font-weight: none;
    border-radius: 4px;
    color: #fff;
    text-align: center;
}

/* 각 레이블 배경색 (첫 번째 이미지의 색상을 참고하세요) */
.label_couse_type_01 {
    background-color: #4338CA; /* 국비과정 */
}

.label_couse_type_02 {
    background-color: #0F766E; /* 일반과정 */
}


.label_status_01 {
    background-color: #EF4444; /* 수강신청중 */
}

.label_status_02 {
    background-color: #2485FB; /* 수강신청예정 */
}



/* 이미지 칸을 기준점으로 설정 */


/* 1. <a> 태그를 이미지 크기에 딱 맞게 설정하고 기준점으로 만듦 */
.img_anchor {
    position: relative;
    display: block;    /* 중요: block이어야 이미지 크기만큼 영역을 잡음 */
    width: fit-content; /* 내용물(이미지) 크기에 맞춤 */
    line-height: 0;    /* 이미지 하단 미세 공백 제거 */
}

/* 2. 레이블 묶음 위치 */
.floating_badge_wrap {
    position: absolute;
    top: 5px;          /* 이미지 상단에서 5px 내려옴 */
    right: 5px;        /* 이미지 우측에서 5px 들어옴 */
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
}

/* 3. 레이블 디자인 (더 타이트하게) */
.floating_badge_wrap span {
    display: inline-block;
    padding: 1px 3px;  /* 패딩을 더 줄임 */
    font-size: 10px;
    line-height: 1;    /* 높이 최소화 */
    font-weight: bold;
    color: #fff;
    border-radius: 2px;
    text-align: center;
}

.badge_type_green { background-color: #2e7d32; }
.badge_status_red { background-color: #d32f2f; }

/* 4. 이미지 설정 */
.course_list_img {
    display: block;
    max-width: 120px; /* 상황에 맞는 적절한 가로 크기 지정 */
    height: auto;
}