/****************************************
 * 교육과정 리스트 전용 CSS (list.css)
 ****************************************/

/* --------------------------------------
 * 0. 공통 컨테이너
 * ------------------------------------*/
.site-wrap .sub-content{
  max-width:1200px;
  margin:0 auto 40px;
  padding:0 16px;
  box-sizing:border-box;
}
.course-page{
  max-width:1200px;
  margin:0 auto;
}

/* 상단 영역 */
.sub-content .top{
  margin-bottom:12px;
}
.sub-content .top .title{
  font-size:22px;
  font-weight:700;
  color:#111827;
}

/* --------------------------------------
 * 1. 상단 헤더 (타이틀 + 정렬 + 뷰토글 + 필터)
 * ------------------------------------*/
.course-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding:12px 8px 16px;
  border-bottom:1px solid #e5e7eb;
}
.course-header-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.course-title-main{
  font-size:20px;
  font-weight:700;
  color:#111827;
}
.course-title-sub{
  font-size:13px;
  color:#6b7280;
}
.course-count{
  font-size:12px;
  color:#6b7280;
}

/* 우측 전체 래퍼: 살짝 글라스 느낌 */
.course-header-right{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,0.02);
  box-shadow:0 10px 30px rgba(15,23,42,0.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* ==== 뷰 토글: 세그먼트 스위치 느낌 ==== */
.course-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:2px;
  border-radius:999px;
  background:rgba(37,99,235,0.06);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,0.35);
}
.course-view-toggle .view-btn{
  border:none;
  background:transparent;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#6b7280;
  cursor:pointer;
  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.course-view-toggle .view-btn .icon{
  width:14px;
  height:14px;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,0.6);
}
.course-view-toggle .view-btn.on{
  background:#ffffff;
  color:#2563eb;
  box-shadow:0 4px 10px rgba(37,99,235,0.25);
  transform:translateY(-1px);
}

/* 카드형 / 리스트형 아이콘 디테일 */
.course-view-toggle .icon-card{
  border:2px solid #6b7280;
  border-radius:3px;
  box-sizing:border-box;
}
.course-view-toggle .icon-list{
  position:relative;
  width:14px;
  height:10px;
  box-sizing:border-box;
}
.course-view-toggle .icon-list::before,
.course-view-toggle .icon-list::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  border-top:2px solid #6b7280;
}
.course-view-toggle .icon-list::before{ top:1px; }
.course-view-toggle .icon-list::after{ bottom:1px; }

/****************************************
 * 정렬 셀렉트 – 커스텀 드롭다운 트리거
 ****************************************/
.course-sort{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.course-sort select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  height:30px;
  border-radius:999px;
  border:none;
  padding:0 26px 0 14px;      /* 오른쪽 여유: 커스텀 화살표 공간 */
  font-size:12px;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(15,23,42,0.08);
  color:#374151;
  outline:none;
  cursor:pointer;
}
.course-sort select:focus{
  box-shadow:
    0 0 0 1px #bfdbfe,
    0 6px 16px rgba(37,99,235,0.25);
}
.course-sort select::-ms-expand{
  display:none;
}
/* 커스텀 화살표 */
.course-sort::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:7px;
  height:7px;
  border-left:2px solid #9ca3af;
  border-bottom:2px solid #9ca3af;
  transform:translateY(-50%) rotate(-45deg);
  pointer-events:none;
}

/* ==== 필터 버튼: 라이트 그라데이션 ==== */
.course-filter-toggle{
  display:none; /* PC에서는 기본 숨김, 모바일에서만 사용 */
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  border:none;
  font-size:12px;
  background:radial-gradient(circle at top left,#eff6ff,#e5e7eb);
  box-shadow:0 4px 12px rgba(15,23,42,0.12);
  color:#1f2937;
  cursor:pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}
.course-filter-toggle .icon{
  width:13px;
  height:13px;
  border-radius:4px;
  border:2px solid #64748b;
  box-shadow:0 0 0 1px rgba(148,163,184,0.5);
  position:relative;
}
.course-filter-toggle .icon::before,
.course-filter-toggle .icon::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  border-top:2px solid #64748b;
}
.course-filter-toggle .icon::before{ top:3px; }
.course-filter-toggle .icon::after{ bottom:3px; }
.course-filter-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(15,23,42,0.16);
  background:radial-gradient(circle at top left,#dbeafe,#e5e7eb);
}

/* --------------------------------------
 * 2. 레이아웃 (필터 패널 + 리스트)
 * ------------------------------------*/
.course-layout{
  display:flex;
  gap:20px;
  padding:16px 4px 0;
}

/* 좌측 필터 패널 (PC 기본) */
.course-filter-panel{
  width:260px;
  flex-shrink:0;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  padding:14px 14px 12px;
  box-sizing:border-box;
}

/****************************************
 * 필터 헤더 + 여백 + 닫기 버튼 (공통)
 ****************************************/
.course-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 16px;
  border-bottom:1px solid #e5e7eb;
  background:#ffffff;
}
.course-filter-head-title{
  font-size:14px;
  font-weight:600;
  color:#111827;
}
.course-filter-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
/* 초기화 버튼 */
.course-filter-reset{
  border:none;
  background:none;
  font-size:12px;
  color:#2563eb;
  cursor:pointer;
  padding:2px 4px;
}

/* 닫기(X) 버튼 – 항상 눈에 띄게 */
.course-filter-close{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  border:none;
  background:#e5e7eb;
  color:#111827;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,0.08);
  padding:0;
  line-height:1;
  transition:background .15s ease, transform .12s ease;
}
.course-filter-close:hover{
  background:#d4d4d8;
  transform:scale(1.05);
}

/* 필터 그룹 */
.course-filter-group{
  margin-bottom:12px;
  padding:12px 16px 10px;
  border-bottom:1px dashed #e5e7eb;
  background:#ffffff;
}
.course-filter-group:last-of-type{
  border-bottom:none;
}
.course-filter-group:first-of-type{
  margin-top:6px;          /* 상단 경계선과 붙지 않게 */
}
.course-filter-group-title{
  font-size:13px;
  font-weight:600;
  color:#111827;
  margin-bottom:6px;
}

/* 체크박스 커스텀 (PC 기본) */
.check_wrap{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  font-size:12px;
}
.check_wrap input{
  display:none;
}
.check_wrap input + label{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:#374151;
  padding:4px 6px;
}
.check_wrap input + label:before{
  content:"";
  width:18px;
  height:18px;
  border:2px solid #cbd5e1;
  border-radius:4px;
  background:#fff;
  display:inline-block;
  box-sizing:border-box;
  transition:all .15s ease;
}
/* 선택됨 */
.check_wrap input:checked + label:before{
  background:#2563eb;
  border-color:#2563eb;
  background-image:url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.704 5.29a1 1 0 010 1.415l-7.07 7.07a1 1 0 01-1.415 0L3.296 9.55a1 1 0 011.415-1.415l4.004 4.003 6.363-6.364a1 1 0 011.415 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:13px;
}

/* 키워드 검색 */
.course-search-inline{
  margin-top:12px;
  padding:12px 16px 16px;
  background:#ffffff;
  border-top:1px solid #e5e7eb;
}
.course-search-inline .course-filter-group-title{
  margin-bottom:4px;
}
.course-search-inline-input{
  display:flex;
  gap:6px;
}
.course-search-inline-input input[type="text"]{
  flex:1;
  height:32px;
  border-radius:999px;
  border:1px solid #d1d5db;
  padding:0 10px;
  font-size:12px;
  box-sizing:border-box;
}
.course-search-inline-input button{
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:none;
  background:#2563eb;
  color:#fff;
  font-size:12px;
  cursor:pointer;
}

/* 우측 리스트 패널 */
.course-list-panel{
  flex:1;
  min-width:0;
}
.course-list-info{
  font-size:11px;
  color:#6b7280;
  margin:0 0 10px;
}

/* --------------------------------------
 * 3. 공통 카드 스타일 (카드/리스트 공용)
 * ------------------------------------*/

/* 리스트 래퍼 */
.course-list-view{
  width:100%;
}

/* 카드 기본 박스 */
.course-list-view .course-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.course-list-view .course-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(15,23,42,0.09);
  border-color:#d1d5db;
}

/* 썸네일 공통 (카드형 기본) */
.course-card-thumb{
  position:relative;
  overflow:hidden;
}
.course-card-thumb img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .3s ease;
}
.course-card:hover .course-card-thumb img{
  transform:scale(1.04);
}
.course-card-thumb::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:36%;
  background:linear-gradient(to top, rgba(15,23,42,.45), transparent);
}

/* 썸네일 배지 (Glassmorphism - 카드형 기본) */
.course-card-badges{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  z-index:3;
}
.course-badge{
  font-size:10px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 4px 10px rgba(15,23,42,0.35);
  color:#f9fafb;
  line-height:1.3;
  white-space:nowrap;
}
.course-badge.refund{
  background:linear-gradient(
    135deg,
    rgba(34,197,94,0.45),
    rgba(22,163,74,0.12)
  );
}
.course-badge.pc{
  background:linear-gradient(
    135deg,
    rgba(59,130,246,0.45),
    rgba(37,99,235,0.12)
  );
}
.course-badge.mobile{
  background:linear-gradient(
    135deg,
    rgba(56,189,248,0.45),
    rgba(8,145,178,0.12)
  );
}
.course-badge:hover{
  border-color:rgba(255,255,255,0.85);
  box-shadow:0 5px 14px rgba(15,23,42,0.45);
}

/* 카드 본문 공통 */
.course-card-body{
  padding:12px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* 카테고리 (대 · 소분류) */
.course-card-category{
  font-size:12px;
  color:#6b7280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.course-card-category strong{
  font-weight:600;
  color:#111827;
}

/* 과정명 */
.course-card-title{
  margin-top:8px;
}
.course-card-title a{
  font-size:15px;
  font-weight:600;
  color:#111827;
  letter-spacing:-0.02em;
  text-decoration:none;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.course-card-title a:hover{
  text-decoration:underline;
}

/* 제목 아래 한 줄: 별점 + 메타 */
.course-card-info-row{
  margin-top:4px;
  margin-bottom:2px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* 별점 블럭 */
.course-card-rating-block{
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  font-size:11px;
}
.course-card-rating-block .rating-stars{
  position:relative;
  font-size:11px;
  line-height:1;
}
.course-card-rating-block .rating-stars-bg{
  color:#e5e7eb;
}
.course-card-rating-block .rating-stars-fill{
  position:absolute;
  top:0;
  left:0;
  width:0;
  overflow:hidden;
  color:#facc15;
}
.course-card-rating-block .rating-score{
  font-size:11px;
  color:#6b7280;
}

/* 메타 (시간 · 차시 · 난이도) */
.course-card-meta-mini{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  font-size:11px;
  color:#6b7280;
}
.course-card-meta-mini .dot{
  width:2px;
  height:2px;
  border-radius:999px;
  background:#d1d5db;
  display:inline-block;
}

/* 수료기준 요약 */
.course-card-standard{
  margin-top:2px;
  font-size:11px;
  color:#9ca3af;
  line-height:1.5;
}

/* 태그 */
.course-card-tags{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:2px 3px;
  max-height:30px;
  overflow:hidden;
}
.course-card-tag,
.course-card-tags .jy_tag_type{
  display:inline-block;
  font-size:10px;
  font-weight:400;
  padding:1px 5px;
  border-radius:999px;
  background:#f3f4f6;
  color:#4b5563;
  white-space:nowrap;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
}

/* 하단 교육비 + 버튼 공통 (기본) */
.course-card-footer{
  margin-top:auto;
  padding:10px 12px 12px;
  border-top:1px solid #f3f4f6;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
  box-sizing:border-box;
}

/* 교육비 라인 공통 */
.course-card-price{
  font-size:12px;
  color:#4b5563;
  white-space:nowrap;
}
.course-card-price::before{
  content:"교육비 ";
  font-weight:400;
  color:#9ca3af;
}
.course-card-price em{
  font-style:normal;
  font-size:15px;
  font-weight:700;
  color:#111827;
  margin-right:2px;
}
.course-card-price .free{
  font-size:13px;
  font-weight:700;
  color:#16a34a;
}

/* 버튼 묶음 공통 */
.course-card-actions{
  display:flex;
  gap:6px;
  justify-content:space-between;
}

/* 버튼 공통 기본 */
.course-btn{
  flex:1 1 0;
  min-width:0;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  font-size:12px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  box-sizing:border-box;
  cursor:pointer;
  text-decoration:none;
  background:#f4f4fb;
  color:#3730a3;
  transition:background-color .15s ease,
             border-color .15s ease,
             color .15s ease,
             box-shadow .15s ease;
}
.course-btn:hover{
  background:#e5e7ff;
  border-color:#a5b4fc;
}

/* 메인 버튼 공통 */
.course-btn-primary{
  background:#1f2937;
  border-color:#1f2937;
  color:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.3);
}
.course-btn-primary:hover{
  background:#111827;
  border-color:#111827;
  box-shadow:0 3px 8px rgba(15,23,42,.4);
}

/* --------------------------------------
 * 4. 카드형 레이아웃 (.course-view-card)
 * ------------------------------------*/

/* 카드형: 그리드 4 → 3 → 2 → 1 */
.course-list-view.course-view-card .course-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
@media (max-width:1199px){
  .course-list-view.course-view-card .course-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (max-width:992px){
  .course-list-view.course-view-card .course-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:640px){
  .course-list-view.course-view-card .course-grid{
    grid-template-columns:1fr;
  }
}

/* 카드형 카드 내부 배치 */
.course-list-view.course-view-card .course-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* 카드형 하단 영역: 위 가격, 아래 버튼 */
.course-list-view.course-view-card .course-card-footer{
  margin-top:auto;
  padding:8px 12px 10px;
  border-top:1px solid #f3f4f6;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
  box-sizing:border-box;
}

/* 카드형 버튼 묶음 */
.course-list-view.course-view-card .course-card-actions{
  display:flex;
  gap:6px;
}

/* 카드형 버튼 디테일 */
.course-list-view.course-view-card .course-card-actions .course-btn{
  flex:1 1 0;
  min-width:0;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  font-size:12px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  box-sizing:border-box;
  cursor:pointer;
  text-decoration:none;
  background:#f9fafb;
  color:#374151;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}
.course-list-view.course-view-card .course-card-actions .course-btn:hover{
  background:#eef2ff;
  border-color:#c7d2fe;
}

/* 카드형 – 미리보기 (왼쪽 버튼) */
.course-list-view.course-view-card .course-card-actions .course-btn:first-child{
  background:#f3f4ff;
  border-color:#c7d2fe;
  color:#4338ca;
}
.course-list-view.course-view-card .course-card-actions .course-btn:first-child:hover{
  background:#e0e7ff;
  border-color:#a5b4fc;
  color:#312e81;
}

/* 카드형 – 수강신청 (메인 버튼) */
.course-list-view.course-view-card .course-card-actions .course-btn-primary{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  border-color:#1d4ed8;
  color:#fff;
  box-shadow:0 3px 8px rgba(37,99,235,.35);
}
.course-list-view.course-view-card .course-card-actions .course-btn-primary:hover{
  background:linear-gradient(135deg,#1d4ed8,#1d4ed8);
  border-color:#1d4ed8;
  box-shadow:0 4px 10px rgba(37,99,235,.45);
}

/* 카드형: 태그/수료기준 숨김으로 높이 최적화 */
.course-list-view.course-view-card .course-card-tags{
  display:none;
}
.course-list-view.course-view-card .course-card-standard{
  display:none;
}
.course-list-view.course-view-card .course-card{
  padding-bottom:10px;
}
.course-list-view.course-view-card .course-card-body{
  padding:10px 12px 8px;
  gap:4px;
}
.course-list-view.course-view-card .course-card-title{
  margin-top:4px;
}
.course-list-view.course-view-card .course-card-info-row{
  margin-top:2px;
  margin-bottom:0;
}

/* --------------------------------------
 * 5. 리스트형 레이아웃 (.course-view-list)
 * ------------------------------------*/

/* 리스트형 전체 래퍼 */
.course-list-view.course-view-list .course-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 한 줄 카드: [썸네일] [정보] [교육비+버튼] */
.course-list-view.course-view-list .course-card{
  position:relative;
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 190px;
  gap:0;
  padding:0;
  align-items:stretch;
  box-sizing:border-box;
  background:#ffffff;
  border-radius:18px;
  border:1px solid #e5e7eb;
  box-shadow:0 3px 10px rgba(15,23,42,0.04);
}
.course-list-view.course-view-list .course-card:hover{
  box-shadow:0 6px 20px rgba(15,23,42,0.09);
  border-color:#d4d4d8;
}

/* 반응형 */
@media (max-width:1024px){
  .course-list-view.course-view-list .course-card{
    grid-template-columns:240px minmax(0,1fr) 170px;
  }
}
@media (max-width:768px){
  .course-list-view.course-view-list .course-card{
    grid-template-columns:1fr;
    padding:0;
  }
}

/* ========== 왼쪽: 썸네일 (일체형) ========== */
.course-list-view.course-view-list .course-card-thumb{
  position:relative;
  width:100%;
  height:100%;
  min-height:120px;
  border-radius:18px 0 0 18px;
  overflow:hidden;
  padding-top:0;
  box-sizing:border-box;
  background:#0f172a;
}
.course-list-view.course-view-list .course-card-thumb a{
  position:absolute;
  inset:0;
  display:block;
}
.course-list-view.course-view-list .course-card-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .25s ease;
}
.course-list-view.course-view-list .course-card:hover .course-card-thumb img{
  transform:scale(1.04);
}
.course-list-view.course-view-list .course-card-thumb::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:38%;
  background:linear-gradient(to top,rgba(15,23,42,0.45),transparent);
}

/* 썸네일 배지 */
.course-list-view.course-view-list .course-card-badges{
  position:absolute;
  left:10px;
  bottom:8px;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  z-index:2;
}
.course-list-view.course-view-list .course-badge{
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(15,23,42,0.9);
  color:#f9fafb;
}
.course-list-view.course-view-list .course-badge.refund{
  background:rgba(22,163,74,0.9);
}
.course-list-view.course-view-list .course-badge.pc{
  background:rgba(37,99,235,0.9);
}
.course-list-view.course-view-list .course-badge.mobile{
  background:rgba(8,145,178,0.9);
}

/* ========== 가운데: 정보 영역 ========== */
.course-list-view.course-view-list .course-card-body{
  padding:14px 18px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-sizing:border-box;
}
@media (max-width:768px){
  .course-list-view.course-view-list .course-card-body{
    padding:12px 14px 8px;
  }
}
.course-list-view.course-view-list .course-card-category{
  font-size:12px;
  color:#9ca3af;
}
.course-list-view.course-view-list .course-card-title{
  margin-top:2px;
}
.course-list-view.course-view-list .course-card-title a{
  font-size:16px;
  font-weight:600;
  line-height:1.45;
}

/* 별점 + 메타 – 아래 점선 */
.course-list-view.course-view-list .course-card-info-row{
  margin-top:4px;
  margin-bottom:3px;
  padding-bottom:3px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  border-bottom:1px dashed #e5e7eb;
}

/* 수료기준 / 태그 */
.course-list-view.course-view-list .course-card-standard{
  margin-top:3px;
  font-size:11px;
  color:#6b7280;
}
.course-list-view.course-view-list .course-card-tags{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:3px 5px;
}

/* ========== 오른쪽: 교육비 + 버튼 ========== */
.course-list-view.course-view-list .course-card-footer{
  padding:14px 18px 14px 0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:6px;
  box-sizing:border-box;
  border-top:none;
}
@media (max-width:768px){
  .course-list-view.course-view-list .course-card-footer{
    padding:10px 14px 14px;
    align-items:flex-start;
  }
}

/* 교육비 */
.course-list-view.course-view-list .course-card-price{
  font-size:12px;
  color:#9ca3af;
  margin-bottom:8px;
}
.course-list-view.course-view-list .course-card-price::before{
  content:"교육비";
  margin-right:6px;
}
.course-list-view.course-view-list .course-card-price em{
  font-size:18px;
  font-weight:700;
  color:#111827;
}

/* 버튼 묶음 – 교육비 아래 배치 */
.course-list-view.course-view-list .course-card-actions{
  position:relative;
  display:flex;
  gap:6px;
  padding-left:14px;   /* 세로선 여유 */
  margin-top:4px;
}

/* 미리보기 왼쪽 세로 경계선 */
.course-list-view.course-view-list .course-card-actions::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:20px;
  background:#e5e7eb;
}

/* 리스트형 버튼 공통 – pill 형태 */
.course-list-view.course-view-list .course-card-actions .course-btn{
  flex:0 0 auto;
  min-width:86px;
  height:32px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #d4d4d8;
  font-size:12px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  box-sizing:border-box;
  cursor:pointer;
  text-decoration:none;
  background:#f9fafb;
  color:#4b5563;
  transition:background-color .15s ease,
             border-color .15s ease,
             color .15s ease,
             box-shadow .15s ease;
}
.course-list-view.course-view-list .course-card-actions .course-btn:hover{
  background:#f3f4f6;
  border-color:#d4d4d8;
}

/* 수강신청 메인 버튼 – 진한 네이비 느낌 */
.course-list-view.course-view-list .course-card-actions .course-btn.course-btn-primary{
  background:#111827;
  border-color:#111827;
  color:#ffffff;
  box-shadow:0 3px 8px rgba(15,23,42,0.35);
}
.course-list-view.course-view-list .course-card-actions .course-btn.course-btn-primary:hover{
  background:#020617;
  border-color:#020617;
  box-shadow:0 4px 10px rgba(15,23,42,0.45);
}

/* 리스트형 – "체험" 라벨 제거용 안전장치 */
.course-list-view.course-view-list .course-card-actions .course-btn:first-child::before{
  content:none !important;
}
@media (max-width:768px){
  .course-list-view.course-view-list .course-card-actions{
    padding-left:12px;
    justify-content:flex-start;
  }
}

/* --------------------------------------
 * 6. 반응형: 필터 패널 / 헤더
 * ------------------------------------*/

/* 992px 이하: 필터 패널 위로 배치 (컬럼) */
@media (max-width:992px){
  .course-layout{
    flex-direction:column;
  }
  .course-filter-panel{
    width:100%;
    margin-bottom:12px;
  }
}

/****************************************
 * 모바일(<=768px) – 상단 헤더 & 필터 패널
 ****************************************/
@media (max-width:768px){

  /* 상단 헤더는 위/아래로 정리 */
  .course-header{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:12px 4px 10px;
  }

  /* 우측 영역: 정렬 + 필터 한 줄 */
  .course-header-right{
    width:100%;
    padding:0;
    margin-top:4px;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  /* 모바일에서는 카드/리스트 토글 숨김 */
  .course-view-toggle{
    display:none;
  }

  /* 추천순 셀렉트 (왼쪽) */
  .course-sort{
    flex:1 1 0;
  }

  /* 커스텀 화살표 제거 + 기본 화살표 사용 */
  .course-sort::after{
    display:none;
  }
  .course-sort select{
    -webkit-appearance:auto;
    appearance:auto;
    width:100%;
    min-width:0;
    max-width:none;
    padding:0 12px;
  }
  .course-header-right select{
    width:100%;
  }

  /* 필터 버튼 (오른쪽) */
  .course-filter-toggle{
    display:inline-flex;
    flex:0 0 auto;
    padding:5px 12px;
  }

  /* 패널 전체: 풀스크린 시트 */
  .course-filter-panel{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    max-width:100%;
    margin:0;
    padding:0;
    border-radius:0;
    border:none;
    background:#f3f4f6;
    z-index:9999;
    box-shadow:none;
    display:none; /* 기본 숨김 */
  }
  .course-filter-panel.is-open{
    display:block;
  }

  /* 헤더: 위 sticky */
  .course-filter-head{
    position:sticky;
    top:0;
    z-index:10;
    margin:0;
    padding:14px 16px;
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
  }
  .course-filter-head-title{
    text-align:center;
    font-size:16px;
    font-weight:700;
  }

  /* 닫기(X) – 왼쪽 아이콘 버튼 느낌 */
  .course-filter-close{
    flex:0 0 auto;
    width:28px;
    height:28px;
    margin-right:4px;
  }

  .course-filter-reset{
    flex:0 0 auto;
    font-size:13px;
    color:#2563eb;
    padding:4px 0 4px 8px;
  }

  /* 그룹(섹션) – 카톡 설정 리스트 느낌 */
  .course-filter-group{
    margin:0;
    padding:12px 16px 10px;
    border-bottom:1px solid #e5e7eb;
    background:#ffffff;
  }
  .course-filter-group:first-of-type{
    margin-top:8px;
  }
  .course-filter-group-title{
    font-size:13px;
    font-weight:600;
    color:#4b5563;
    margin-bottom:8px;
  }
  .course-filter-group + .course-filter-group{
    margin-top:6px;
  }

  /* 체크박스 → 태그형 토글 버튼 스타일 */
  .check_wrap{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .check_wrap input{
    display:none;
  }
  .check_wrap input + label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    background:#f3f4f6;
    font-size:13px;
    color:#374151;
    border:1px solid #e5e7eb;
    cursor:pointer;
    transition:background .15s ease,
               color .15s ease,
               border-color .15s ease,
               box-shadow .15s ease;
  }
  .check_wrap input + label:before{
    display:none;
  }
  .check_wrap input + label > span{
    padding-left:0;
  }
  .check_wrap input:checked + label{
    background:#111827;
    color:#f9fafb;
    border-color:#111827;
    box-shadow:0 2px 6px rgba(15,23,42,0.35);
  }

  /* 키워드 검색 영역 */
  .course-search-inline{
    margin-top:6px;
    padding:12px 16px 16px;
    background:#ffffff;
    border-top:1px solid #e5e7eb;
  }
  .course-search-inline .course-filter-group-title{
    margin-bottom:6px;
  }
  .course-search-inline-input{
    gap:8px;
  }
  .course-search-inline-input input[type="text"]{
    height:36px;
    border-radius:999px;
    font-size:13px;
  }
  .course-search-inline-input button{
    height:36px;
    padding:0 14px;
    border-radius:999px;
    font-size:13px;
  }
}
/****************************************
 * 모바일: 필터 패널을 상단 헤더 아래로 60px 내리기 (최종)
 ****************************************/
@media (max-width:768px){

  /* 기본: 모바일에서는 패널 숨김 */


  /* 필터 버튼 눌러서 is-open 붙었을 때 */
  #courseFilterPanel.is-open{
    display:block !important;
    position:fixed !important;

    top:60px !important;   /* ★ 헤더 높이만큼 내려서 겹치지 않게 */
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    margin:0 !important;
    padding:0 0 16px !important;
    background:#f3f4f6 !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
  }

  /* 패널 안의 헤더(검색 필터 / X / 초기화) */
  #courseFilterPanel .course-filter-head{
    position:sticky !important;
    top:0 !important;
    z-index:1 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;

    margin:0 !important;
    padding:10px 16px !important;
    background:#ffffff !important;
    border-bottom:1px solid #e5e7eb !important;
  }

  #courseFilterPanel .filter-row {
    padding: 0 16px 16px;        /* 좌우 16px, 아래 16px 여백 */
    box-sizing: border-box;
  }

  #courseFilterPanel .filter-row-head {
    margin-bottom: 8px;
  }
  #courseFilterPanel .keyword-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #courseFilterPanel .keyword-input-wrap .keyword-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  #courseFilterPanel .keyword-input-wrap .keyword-add-btn {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;
  }

  /* 태그 칩 영역도 좌우 여백 맞추기 */
  #courseFilterPanel .keyword-tags {
    margin-top: 6px;
  }


  #courseFilterPanel .course-filter-head-title{
    flex:1 1 auto !important;
    text-align:left !important;
    font-size:14px !important;
    font-weight:600 !important;
    color:#111827 !important;
  }

  /* X 버튼 */
  #courseFilterPanel .course-filter-close{
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;

    width:26px !important;
    height:26px !important;
    border-radius:50% !important;
    border:none !important;

    background:#e5e7eb !important;
    color:#111827 !important;
    font-size:16px !important;
    font-weight:bold !important;
    cursor:pointer !important;
  }

  /* 첫 그룹 위 살짝 여백 */
  #courseFilterPanel .course-filter-group:first-of-type{
    margin-top:8px !important;
  }
}

/****************************************
 * 모바일: 필터 헤더를 위에서 60px 내려주기
 *  - 상단 고정 헤더에 가려지지 않도록
 ****************************************/
@media (max-width:768px){
  #courseFilterPanel .course-filter-head{
    margin-top:60px !important; /* ← 방금 넣은 <br><br><br> 대신 역할 */
  }
}
@media (max-width:768px){
  #courseFilterPanel .course-filter-group:first-of-type{
    margin-top:10px !important;
  }
}

/****************************************
 * 모바일: 필터 패널 위에 60px 여백 주기 (헤더에 안 가리게)
 *  - 실제 <br> 대신 ::before 가짜 블럭 사용
 ****************************************/
@media (max-width:768px){
  #courseFilterPanel::before{
    content:"";
    display:block;
    height:67px;   /* 지금 <br><br><br> 넣었을 때랑 비슷한 높이 */
  }
}

/****************************************
 * 커스텀 정렬 드롭다운 (추천순/제목순/최신순)
 ****************************************/
.course-sort.sort-dropdown{
  position:relative;
  font-size:13px;
}



/* 아이콘 (작은 V자) */
.sort-icon{
  width:8px;
  height:8px;
  border-left:2px solid #9ca3af;
  border-bottom:2px solid #9ca3af;
  transform:rotate(-45deg) translateY(-1px);
  transition:transform .18s ease;
}

/* 열렸을 때 아이콘 방향 */
.sort-dropdown.is-open .sort-icon{
  transform:rotate(135deg) translateY(1px);
}

@media (max-width:768px){
  #courseFilterPanel.is-open{
    overflow-y:auto !important;
    -webkit-overflow-scrolling: touch;
  }
}



.keyword-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.keyword-input-wrap {
  display: flex;
  gap: 6px;
}

.keyword-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.keyword-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37,99,235,.2);
}

.keyword-add-btn {
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.keyword-add-btn:hover {
  filter: brightness(1.05);
}

.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  line-height: 1;
}

.keyword-tag-text {
  margin-right: 4px;
}

.keyword-tag-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
  opacity: .6;
}

.keyword-tag-remove:hover {
  opacity: 1;
}

.filter-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.filter-label {
  font-weight: 600;
  font-size: 14px;
}

.keyword-help {
  font-size: 12px;
  color: #6b7280; /* 연한 회색톤 안내문 */
  white-space: nowrap;
}

@media (max-width: 768px) {
  .filter-row-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .keyword-help {
    white-space: normal;
  }
}


/* ================================
 * PC용 키워드 검색 레이아웃 보정
 * ==============================*/
@media (min-width: 993px) {

  /* 키워드 검색 전체 줄 정렬 */
  .filter-row {
    margin-top: 16px;
  }

  .filter-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  /* "키워드 검색" 라벨 한 줄로 */
  .filter-row-head .filter-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;    /* 글자 줄바꿈 금지 */
    margin-right: 8px;
  }

  /* 안내 문구도 라벨 옆에 자연스럽게 */
  .filter-row-head .keyword-help {
    flex: 1 1 auto;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
  }

  /* 인풋+버튼 한 줄 정렬 */
  .keyword-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .keyword-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .keyword-input-wrap .keyword-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .keyword-input-wrap .keyword-add-btn {
    flex: 0 0 auto;
    padding: 0 16px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }

  /* 태그 칩 영역은 줄바꿈 되면서 왼쪽 정렬 */
  .keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }

  .keyword-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e5f0ff;
    font-size: 12px;
    color: #1f2937;
  }

  .keyword-tag-remove {
    margin-left: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
  }
}


@media (min-width:769px){
  #courseFilterPanel{
    display:block !important;
    position:static !important;
    background:#f9fafb !important;
  }

  /* ★ PC에서는 닫기(X) 버튼 숨김 */
  #courseFilterPanel .course-filter-close{
    display:none !important;
  }
}

/* 전체 래퍼 */
.paging.paging-responsive {
  display: flex;
  justify-content: center;
  margin: 24px 0 18px;
  font-size: 14px;
  line-height: 1;
  color: #374151;
}

/* 한 줄 + 가로 스크롤 가능 */
.paging.paging-responsive .paging-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.paging.paging-responsive .paging-inner::-webkit-scrollbar {
  display: none;
}

/* PC 번호 영역 */
.paging.paging-responsive .paging-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* 공통 버튼 */
.paging.paging-responsive .page-btn {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #4b5563;
  padding: 7px 12px;
  min-width: 32px;
  cursor: pointer;
  outline: none;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.08s ease;
}

/* 동그란 번호 */
.paging.paging-responsive .page-num {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 화살표 */
.paging.paging-responsive .is-arrow {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 12px;
}

/* hover */
.paging.paging-responsive .page-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* active */
.paging.paging-responsive .page-btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* 현재 페이지 (오렌지 포인트) */
.paging.paging-responsive .page-current {
  background: #f97316;
  border-color: #ea580c;
  color: #ffffff;
  font-weight: 600;
}

/* 비활성 버튼 */
.paging.paging-responsive .page-btn:disabled {
  cursor: default;
  opacity: 0.5;
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
}

/* 모바일용 컨테이너: 기본은 숨김 (PC) */
.paging.paging-responsive .paging-mobile-more {
  display: none;
}

/* 모바일용 더보기 버튼 스타일 */
.paging.paging-responsive .page-more {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* =========================================
   반응형 (모바일)
   ========================================= */

@media (max-width: 768px) {

  /* PC 번호 숨기기 */
  .paging.paging-responsive .paging-numbers {
    display: none;
  }

  /* 모바일: 더 보기 버튼만 중앙에 */
  .paging.paging-responsive .paging-inner {
    justify-content: center;
  }

  .paging.paging-responsive .paging-mobile-more {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .paging.paging-responsive .page-btn {
    padding: 9px 18px;
    font-size: 13px;
  }
}