/* =========================
   Course Slider (전체 CSS)
   - 화살표: 이미지 좌/우 '옆 칸'에 배치 (절대 겹치지 않음)
========================= */

.course_slider_wrap{
  max-width:1800px;
  margin:0 auto;
  padding:30px 10px;
}

.course_head{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:18px;
}

.course_head_tit{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.5px;
}

/* =========================
   핵심: swiper 컨테이너를 grid로 만들기
   - 좌(화살표) / 중앙(슬라이드) / 우(화살표)
========================= */
.course_swiper{
  position:relative;
  display:grid;
  grid-template-columns:64px 1fr 64px; /* 좌/우 화살표 전용 칸 */
  column-gap:12px;                    /* 화살표 칸과 슬라이드 간격 */
  align-items:center;
  padding:0;                           /* padding 제거 (겹침 원인 제거) */
  overflow:hidden;                     /* 슬라이드 영역 정리 */
}

/* Swiper wrapper(슬라이드 영역)를 중앙 칸에 고정 */
.course_swiper > .swiper-wrapper{
  grid-column:2;
  min-width:0;     /* grid에서 가로 줄어듦 문제 방지 */
}

/* 카드 */
.course_card{
  background:#fff;
  border:1px solid #e9e9e9;
  overflow:hidden;
}

.course_img{
  display:block;
  line-height:0;
}

.course_img img{
  width:100%;
  height:auto;
  display:block;
}

/* 파란 띠 */
.course_label{
  background:#0b4ea2;
  color:#fff;
  text-align:center;
  font-weight:700;
  padding:10px 8px;
  font-size:14px;

  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}

.course_label_cat{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}


/* 본문 */
.course_body{
  padding:14px 14px 16px;
  text-align:center;
}

.course_title{
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  margin-bottom:10px;
}

.course_title a{
  color:#111;
  text-decoration:none;
}

.course_date{
  font-size:13px;
  color:#333;
  margin-bottom:12px;
}

/* 자세히보기 버튼 */
.course_btn{
  display:inline-block;
  border:1px solid #ddd;
  background:#fff;
  padding:8px 18px;
  font-size:13px;
  color:#ff5a1f;
  text-decoration:none;
}

/* 아래 +과정더보기 */
.course_more_wrap{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.course_more_btn{
  background:#ff5a1f;
  color:#fff;
  padding:10px 18px;
  font-weight:700;
  text-decoration:none;
  border-radius:2px;
}

/* =========================
   Swiper 화살표 (겹침 방지 버전)
   - absolute 제거
   - grid 칸에 "고정" 배치
========================= */
.course_nav_prev,
.course_nav_next{
  position:static !important; /* ✅ 절대 겹치지 않게 강제 */
  transform:none !important;
  margin:0 !important;

  width:44px;
  height:44px;
  border-radius:999px;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  color:#666;

  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

/* 좌/우 칸에 배치 */
.course_nav_prev{
  grid-column:1;
  justify-self:center;
}

.course_nav_next{
  grid-column:3;
  justify-self:center;
}

.course_nav_prev:after,
.course_nav_next:after{
  font-size:16px;
  font-weight:700;
}

.course_nav_prev:hover,
.course_nav_next:hover{
  border-color:#bbb;
}

/* =========================
   Mobile
========================= */
@media (max-width:640px){
  .course_swiper{
    grid-template-columns:52px 1fr 52px;
    column-gap:8px;
  }

  .course_nav_prev,
  .course_nav_next{
    width:40px;
    height:40px;
  }

  .course_nav_prev:after,
  .course_nav_next:after{
    font-size:14px;
  }
}


/* dot 위치/정렬 */
.course_dots{
  margin-top:54px;
  text-align:center;
}

/* 기본 점 */
.course_dots .swiper-pagination-bullet{
  width:10px;
  height:10px;
  opacity:1;
  background:#cfd8ff;   /* 연한 파랑 */
  margin:0 6px !important;
}

/* 활성 점 */
.course_dots .swiper-pagination-bullet-active{
  background:#0b4ea2;   /* ✅ 파란색 */
}