/* =========================================================
   강의 목록 페이지 (Figma 210:63 「강의 목록 페이지」, 1920px) — PC
   공통 컴포넌트(.section-head / .class-card / .badge / .detail-view)는
   hiddenclass.css 재사용 — 이 파일은 이 페이지 전용 레이아웃 실측값만 보정.
   ========================================================= */

/* 컨테이너 — Figma 콘텐츠 프레임 x:271, w:1500
   = 헤더 컨테이너(1418 중앙 정렬, x:251) 좌측 + 20px 에서 시작, 폭 1500(우측은 컨테이너 밖으로 돌출) */
.courses-wrap {
  width: 100%;
  max-width: var(--container-width);
  margin: 173px auto 0;        /* 헤더 bottom(167) → 첫 섹션 타이틀 top(340) = 173px */
  padding-left: 20px;
  padding-bottom: 261px;       /* 마지막 카드 bottom(1427.87) → 푸터 top(1689) = 261px */
}
.courses-wrap .section {
  width: 1500px;               /* 구분선·페이드 기준 폭 (Figma w:1500) */
  max-width: none;
}
/* 섹션 간격 — 1섹션 카드 bottom(802.87) → 2섹션 타이틀 top(965) = 162px */
.courses-wrap .section + .section { margin-top: 162px; }

/* 섹션 타이틀 행 — 더보기 화살표 오른쪽 끝 = 콘텐츠 좌측 + 1347 (Figma 행 폭 1347) */
.courses-wrap .section-head { width: 1347px; }

/* 섹션 아이콘 — Figma 48×44 박스에 이미지 풀스트레치 (공통은 48×48 contain) */
.courses-wrap .section-head .section-icon { height: 44px; }
.courses-wrap .section-head .section-icon img {
  width: 48px;
  height: 44px;
  object-fit: fill;
}

/* HOT 뱃지 — Figma 43×26: 텍스트(25×16)가 가장자리에서 9px(테두리 1px 포함) → padding 4px 8px */
.courses-wrap .badge.hot { padding: 4px 8px; }

/* 카드 영역 — 정적 노출(시안 상태), 가로 스크롤바 없음.
   카드 449.56 / 간격 21 은 공통 .class-track 그대로 */
.courses-wrap .class-swiper { overflow: visible; }
.courses-wrap .class-track {
  padding-bottom: 0;
  padding-right: 0;
}
/* 우측 화이트 페이드 — Figma x:1320~1500(폭 180), 카드 전체 높이(365.87) */
.courses-wrap .class-swiper-wrap::after { height: 100%; }

/* 모바일 전용 요소(mo-only)는 PC에서 숨김 */
.courses-wrap .mo-only { display: none; }

/* NEW 배지 — 모바일 시안 210:404: 43×24, 회색 그라데이션, 흰 텍스트 12/16 */
.courses-wrap .badge.new {
  padding: 4px 8px;
  color: #fff;
  background: linear-gradient(44.8deg, #999999 12.7%, #302727 44.05%, #999999 92.22%);
}
/* 텍스트 없는 그라데이션 필 — 모바일 시안 210:406: 44.97×24 */
.courses-wrap .badge.pill-best {
  width: 44.97px;
  height: 24px;
  padding: 0;
  background: linear-gradient(55deg, #a0100f 10%, #ff6666 50%, #a0100f 90%);
}

/* =========================================================
   모바일 (Figma 210:299 「모바일 강의 목록 페이지」, 375px)
   헤더·푸터는 공통(layouts.app + hiddenclass.css) — 본문만 보정
   ========================================================= */
@media (max-width: 767px) {

  /* 컨테이너 — Figma 콘텐츠 x:22, w:335 (375 기준 우측 여백 18) */
  .courses-wrap {
    max-width: none;
    margin: 78px 0 0;          /* 모바일 헤더 bottom(100.68) → 첫 섹션 타이틀 top(179) = 78px */
    padding-left: 22px;
    padding-right: 18px;
    padding-bottom: 111px;     /* 마지막 카드 bottom(996.89) → 푸터 top(1108) = 111px */
  }
  .courses-wrap .section { width: auto; }
  /* 1섹션 카드 bottom(544.89) → 2섹션 타이틀 top(632) = 87px */
  .courses-wrap .section + .section { margin-top: 87px; }

  /* 타이틀 행 — 행 32 / 아이콘 32×32 / 제목 24px / CLASS·LIVE CLASS 서브 없음
     행→구분선 16, 구분선→카드 32는 공통값 그대로 */
  .courses-wrap .section-head { width: auto; }
  .courses-wrap .section-head .section-icon { width: 32px; height: 32px; }
  .courses-wrap .section-head .section-icon img { width: 32px; height: 32px; }
  .courses-wrap .section-head h2 {
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: -0.24px;
  }
  .courses-wrap .section-head .sub-group { display: none; }

  /* 스와이퍼 — 카드 277.16×155.89(썸네일), 간격 12, 컨테이너(335)에서 클립.
     가로 스크롤 가능하되 스크롤바 숨김, 우측 페이드 없음 */
  .courses-wrap .class-swiper {
    overflow-x: auto;
    scrollbar-width: none;             /* Firefox */
  }
  .courses-wrap .class-swiper::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  .courses-wrap .class-track { gap: 12px; }
  .courses-wrap .class-card { width: 277.16px; }
  .courses-wrap .class-card .thumb { width: 277.16px; height: 155.89px; }
  .courses-wrap .class-swiper-wrap::after { display: none; }
  /* 점·상세보기 버튼은 모바일 시안에 없음 */
  .courses-wrap .detail-view { display: none; }

  /* 타이포 — VOD 카드 제목 16/24(-0.16). 라이브 카드 제목은 시안대로 18/27(-0.36) = 공통값 유지 */
  .section-courses-vod .class-card .title {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
  }
  .courses-wrap .class-card .meta {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.14px;
  }

  /* VOD 카드2 — 모바일 시안(210:396): NEW 배지 + 필만, 제목·메타 없음 */
  .courses-wrap .pc-only { display: none; }
  .courses-wrap .mo-only { display: flex; }
}