/* ===== 교육 리스트 CSS ===== */

/* 카테고리 탭 */
.edu_cate_wrap {
  margin-bottom: clamp(15px, calc(1.17vw + 11.25px), 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100% !important;
}
.edu_cate_tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--edu-cate-padding, 8px 18px);
  font-size: var(--edu-cate-tab-size, clamp(13px, calc(0.31vw + 12px), 15px));
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
}
.edu_cate_tab.on { color: #222; font-weight: 700; }
.edu_cate_cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--edu-cate-count-size, 11px);
  background: var(--edu-cate-count-bg, var(--primary, #2196f3));
  color: var(--edu-cate-count-color, #fff);
  border-radius: 50px;
  font-weight: 600;
  line-height: 1;
}
.edu_cate_tab.on .edu_cate_cnt {
  background: var(--edu-cate-count-bg, var(--primary, #2196f3));
  color: var(--edu-cate-count-color, #fff);
}

/* pill 스타일 */
.edu_cate_pill .edu_cate_tab {
  background: #f4f5f6;
  border-radius: var(--edu-cate-radius, 20px);
}
.edu_cate_pill .edu_cate_tab.on {
  background: var(--primary, #2196f3);
  color: #fff;
}
.edu_cate_pill .edu_cate_tab.on .edu_cate_cnt { background: var(--edu-cate-count-bg, rgba(255,255,255,0.25)); color: var(--edu-cate-count-color, #fff); }
.edu_cate_pill .edu_cate_tab:not(.on) .edu_cate_cnt { background: var(--edu-cate-count-bg, #ddd); color: var(--edu-cate-count-color, #888); }

/* underline 스타일 */
.edu_cate_underline .edu_cate_tab {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
}
.edu_cate_underline .edu_cate_tab.on {
  border-bottom-color: var(--primary, #2196f3);
  color: var(--primary, #2196f3);
}

/* box 스타일 */
.edu_cate_box .edu_cate_tab {
  border: 1px solid #ddd;
  border-radius: 6px;
}
.edu_cate_box .edu_cate_tab.on {
  border-color: var(--primary, #2196f3);
  color: var(--primary, #2196f3);
  background: rgba(33,150,243,0.05);
}

/* ===== 2뎁스 서브 카테고리 ===== */
.edu_sub_cate_wrap {
  margin-bottom: clamp(15px, calc(1.17vw + 11.25px), 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.edu_sub_cate_tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--edu-cate2-padding, 5px 14px);
  font-size: var(--edu-cate2-tab-size, clamp(12px, calc(0.31vw + 11px), 14px));
  color: #888;
  text-decoration: none;
  transition: all 0.2s;
}
.edu_sub_cate_tab.on { color: #222; font-weight: 600; }
.edu_sub_cate_cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: var(--edu-cate2-count-size, 10px);
  background: var(--edu-cate2-count-bg, #eee);
  color: var(--edu-cate2-count-color, #666);
  border-radius: 50px;
  font-weight: 600;
  line-height: 1;
}

/* 2뎁스 pill */
.edu_sub_cate_pill .edu_sub_cate_tab {
  background: #f4f5f6;
  border-radius: var(--edu-cate2-radius, 16px);
}
.edu_sub_cate_pill .edu_sub_cate_tab.on {
  background: var(--primary, #2196f3);
  color: #fff;
}
.edu_sub_cate_pill .edu_sub_cate_tab.on .edu_sub_cate_cnt { background: rgba(255,255,255,0.25); color: #fff; }

/* 2뎁스 underline */
.edu_sub_cate_underline .edu_sub_cate_tab {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 12px;
}
.edu_sub_cate_underline .edu_sub_cate_tab.on {
  border-bottom-color: var(--primary, #2196f3);
  color: var(--primary, #2196f3);
}

/* 2뎁스 box */
.edu_sub_cate_box .edu_sub_cate_tab {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.edu_sub_cate_box .edu_sub_cate_tab.on {
  border-color: var(--primary, #2196f3);
  color: var(--primary, #2196f3);
  background: rgba(33,150,243,0.05);
}

/* 검색/정렬 바 */
.edu_toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(15px, calc(1.17vw + 11.25px), 30px);
  gap: 12px;
  flex-wrap: wrap;
  background: var(--edu-toolbar-bg, transparent);
  border-radius: var(--edu-toolbar-radius, 0);
  padding: var(--edu-toolbar-padding, 0);
}
.edu_toolbar_border_all { border: 1px solid var(--edu-toolbar-border-color, #eee); }
.edu_toolbar_border_tb { border-top: 1px solid var(--edu-toolbar-border-color, #eee); border-bottom: 1px solid var(--edu-toolbar-border-color, #eee); }
.edu_toolbar_border_bottom { border-bottom: 1px solid var(--edu-toolbar-border-color, #eee); }
.edu_search_form {
  display: flex;
  gap: 6px;
}
.edu_search_input {
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  width: 220px;
  outline: none;
}
.edu_search_input:focus { border-color: var(--primary, #2196f3); }
.edu_search_btn {
  padding: 8px 16px;
  background: var(--primary, #2196f3);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
/* 나의 신청 강의 보기 + 강사 마이페이지 그룹 (PC: 검색 옆에 붙고 정렬은 우측 끝으로) */
.edu_my_btn_group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}
/* 나의 신청 강의 보기 버튼 (색상은 설정값 --edu-my-btn-* 로 제어, 기본 검정) */
.edu_my_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--edu-my-btn-padding, 10px 18px);
  background: var(--edu-my-btn-bg, #333);
  color: var(--edu-my-btn-color, #fff) !important;
  border: 1px solid var(--edu-my-btn-bg, #333);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
/* 내부 글자/아이콘 모두 설정 글자색 상속 (전역 a/아이콘 색 덮어쓰기 방지) */
.edu_my_btn i,
.edu_my_btn span,
.edu_my_btn * { color: var(--edu-my-btn-color, #fff) !important; }
.edu_my_btn i { font-size: 20px; line-height: 1; }
.edu_my_btn:hover { opacity: 0.9; }
/* 강사 마이페이지 — 단색 파랑 */
.edu_my_btn.edu_teacher_btn {
  background: #2563eb;
  border-color: #1d4ed8;
}
.edu_my_btn.edu_teacher_btn i,
.edu_my_btn.edu_teacher_btn * { color: #fff !important; }
.edu_my_btn.edu_teacher_btn:hover { background: #1d4ed8; opacity: 1; }
.edu_sort_wrap {
  display: flex;
  gap: 4px;
}
.edu_sort_btn {
  padding: 6px 12px;
  font-size: var(--edu-sort-size, clamp(12px, calc(0.31vw + 11px), 14px));
  color: #888;
  text-decoration: none;
  border-radius: 4px;
}
.edu_sort_btn.on { color: #222; font-weight: 600; background: #f4f5f6; }

/* 그리드 */
.edu_grid {
  display: grid;
  grid-template-columns: repeat(var(--edu-grid-pc, 4), 1fr);
  gap: var(--edu-grid-gap, 20px);
}
@media screen and (max-width: 1024px) {
  .edu_grid { grid-template-columns: repeat(var(--edu-grid-tablet, 3), 1fr); }
}
@media screen and (max-width: 640px) {
  .edu_grid { grid-template-columns: repeat(var(--edu-grid-mobile, 2), 1fr); }
  /* 툴바: 세로 stack — ①검색 한 줄 ②나의신청(풀폭) ③정렬 */
  .edu_toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  /* 검색폼: input + 버튼 한 줄, input이 남는 폭 차지 */
  .edu_search_form { display: flex; width: 100%; }
  .edu_search_input { flex: 1 1 auto; width: auto; min-width: 0; }
  .edu_search_btn { flex: 0 0 auto; }
  /* 나의 신청 강의 보기 + 강사 마이페이지: 검색 아래 세로 풀폭 */
  .edu_my_btn_group { flex-direction: column; align-items: stretch; width: 100%; margin-right: 0; gap: 6px; }
  .edu_my_btn { width: 100%; justify-content: center; padding: 11px 16px; margin-right: 0; }
  /* 정렬: 좌측 정렬 유지 */
  .edu_sort_wrap { width: 100%; }
  /* 모바일: 카드 텍스트 영역 패딩 = 모바일 전용 설정값 (--edu-info-padding-boxed-mo, 기본 좌우 0) */
  .edu_card_info,
  .edu_card_boxed .edu_card_info,
  .edu_card_shadow .edu_card_info { padding: var(--edu-info-padding-boxed-mo, 12px 0 8px) !important; }
}

/* 카드 */
.edu_card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.edu_card:hover { transform: translateY(-4px); }

/* boxed */
.edu_card_boxed .edu_card {
  border: 1px solid #eee;
  border-radius: var(--edu-img-radius, 8px);
  overflow: hidden;
}
/* shadow */
.edu_card_shadow .edu_card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-radius: var(--edu-img-radius, 8px);
  overflow: hidden;
}
.edu_card_shadow .edu_card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

/* 카드 이미지 */
.edu_card_img {
  position: relative;
  overflow: hidden;
  border-radius: var(--edu-img-radius, 8px);
  aspect-ratio: var(--edu-img-ratio, 16/9);
  background: #f5f5f5;
}
.edu_card_boxed .edu_card_img,
.edu_card_shadow .edu_card_img { border-radius: 0; }
.edu_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.edu_card_noimg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f1f3f5;
  color: #adb5bd;
  font-size: 13px;
  font-weight: 500;
}
.edu_card_noimg svg { opacity: .8; }

/* 뱃지 */
.edu_badge {
  position: absolute;
  padding: 3px 10px;
  font-size: var(--edu-badge-size, 12px);
  color: #fff;
  border-radius: var(--edu-badge-radius, 4px);
  font-weight: 600;
  line-height: 1.4;
  z-index: 1;
}
.edu_badge_img_tl { top: 8px; left: 8px; }
.edu_badge_img_tr { top: 8px; right: 8px; }
.edu_badge_img_bl { bottom: 8px; left: 8px; }
.edu_badge_img_br { bottom: 8px; right: 8px; }

/* 카드 정보 */
.edu_card_info {
  padding: 12px 4px 8px;
}
.edu_card_boxed .edu_card_info,
.edu_card_shadow .edu_card_info { padding: 12px 14px 14px; }

.edu_card_category {
  font-size: var(--edu-cate-font-size, clamp(11px, calc(0.31vw + 10px), 13px));
  color: var(--edu-cate-color, #888);
  margin-bottom: 4px;
}
/* ★ 관리자 전용: 소속 교육 과정 제목 (고객에게는 출력 자체가 안 됨) */
.edu_card_edu_admin {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border: 1px dashed #fcd34d;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.edu_card_title {
  font-size: var(--edu-title-size, 16px);
  font-weight: 600;
  color: var(--edu-title-color, #222);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.edu_card_teacher {
  font-size: var(--edu-meta-size, 13px);
  color: var(--edu-meta-color, #888);
  margin-bottom: 2px;
}
.edu_card_period {
  font-size: var(--edu-date-size, clamp(12px, calc(0.31vw + 11px), 14px));
  color: var(--edu-date-color, #666);
  margin-bottom: 6px;
}
.edu_card_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.edu_card_price {
  font-size: var(--edu-price-size, 15px);
  font-weight: 700;
  color: var(--edu-price-color, var(--primary, #2196f3));
}
.edu_card_remaining {
  font-size: var(--edu-date-size, clamp(12px, calc(0.31vw + 11px), 14px));
  color: var(--edu-date-color, #666);
}

/* 빈 상태 */
.edu_empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 15px;
}

/* 페이지네이션 */
.edu_pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: clamp(20px, calc(1.56vw + 15px), 40px);
}
.edu_page_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
}
.edu_page_btn.on {
  background: var(--primary, #2196f3);
  color: #fff;
  border-color: var(--primary, #2196f3);
}
.edu_page_btn:hover:not(.on) { background: #f4f5f6; }

/* ===== 가로형 (웹진) ===== */
.edu_mode_horizontal {
  grid-template-columns: 1fr !important;
  gap: var(--edu-grid-gap, 16px);
}
.edu_mode_horizontal .edu_card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.edu_mode_horizontal .edu_card_img {
  flex: 0 0 var(--edu-hz-img-width, 280px);
  max-width: var(--edu-hz-img-width, 280px);
  aspect-ratio: var(--edu-hz-img-ratio, 4/3);
  border-radius: var(--edu-img-radius, 8px) 0 0 var(--edu-img-radius, 8px);
}
.edu_mode_horizontal.edu_card_boxed .edu_card_img,
.edu_mode_horizontal.edu_card_shadow .edu_card_img { border-radius: var(--edu-img-radius, 8px) 0 0 var(--edu-img-radius, 8px); }
.edu_mode_horizontal .edu_card_info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--edu-hz-txt-padding, 16px 24px);
}
.edu_mode_horizontal .edu_card_title {
  font-size: var(--edu-hz-title-size, 18px);
}
.edu_mode_horizontal .edu_card_bottom { margin-top: auto; }
@media screen and (max-width: 640px) {
  .edu_mode_horizontal .edu_card { flex-direction: column; }
  .edu_mode_horizontal .edu_card_img {
    flex: none;
    max-width: 100%;
    border-radius: var(--edu-img-radius, 8px) var(--edu-img-radius, 8px) 0 0;
  }
  .edu_mode_horizontal.edu_card_boxed .edu_card_img,
  .edu_mode_horizontal.edu_card_shadow .edu_card_img { border-radius: var(--edu-img-radius, 8px) var(--edu-img-radius, 8px) 0 0; }
}

/* ===== 아이콘형 메타 ===== */
.edu_card_icon_meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin-top: 8px;
  padding: var(--edu-icon-padding, 8px 0);
  border-top: var(--edu-icon-line-width, 1px) solid var(--edu-icon-line-color, #eee);
}
.edu_icon_item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--edu-date-size, clamp(12px, calc(0.31vw + 11px), 14px));
  color: var(--edu-date-color, #666);
  padding: 2px 0;
}
.edu_icon_item i {
  font-size: calc(var(--edu-date-size, 13px) + 2px);
  color: var(--edu-icon-color, var(--primary, #2196f3));
  position: relative;
  top: -1px;
}

/* ===== 텍스트 정렬 ===== */
.edu_grid[data-title-align="center"] .edu_card_title { text-align: center; }
.edu_grid[data-title-align="right"] .edu_card_title { text-align: right; }
.edu_grid[data-price-align="center"] .edu_card_bottom { justify-content: center; }
.edu_grid[data-price-align="right"] .edu_card_bottom { justify-content: flex-end; }
.edu_grid[data-price-align="left"] .edu_card_bottom { justify-content: flex-start; }

/* ===== 뱃지 텍스트 박스 영역 위치 ===== */
.edu_badge_txt_tl { position: static; display: inline-block; margin-bottom: 6px; }
.edu_badge_txt_tr { position: static; display: inline-block; float: right; margin-bottom: 6px; }

/* ===== 카드 인포 패딩 CSS 변수 ===== */
.edu_card_info {
  padding: var(--edu-info-padding, 12px 4px 8px);
}
.edu_card_boxed .edu_card_info,
.edu_card_shadow .edu_card_info {
  padding: var(--edu-info-padding-boxed, 12px 14px 14px);
}