/* ===== VLLO 강의 페이지 (48:230) =====
   본문 폰트: Pretendard (공통). 좌측 760(썸네일+상세이미지) / 우측 400(스티키 사이드바) */

.course {
  width: 100%;
  padding: 0 24px 149px;         /* 상: 썸네일이 헤더 바로 밑(0) / 하: 시안 본문~푸터 간격(149px, 기본값) — JS가 창 높이에 맞춰 키움 */
}
.course-wrap {
  max-width: 1200px;          /* 시안 콘텐츠 폭 (760 + 40 + 400) */
  margin: 0 auto;
  display: flex;
  gap: 40px;                  /* 시안 좌우 컬럼 간격 */
  align-items: flex-start;
}

/* 좌측: 썸네일 + 상세 이미지 */
.course-left {
  flex: 1 1 760px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.course-left img {
  display: block;
  width: 100%;
  height: auto;
}
.course-thumb {
  /* 시안: 라운드 없는 사각 썸네일. 아래 탭바가 바로 이어짐 */
}

/* 썸네일 바로 아래 탭바: 클래스 소개 / 강사 소개 (48:635) */
.course-tabs {
  display: flex;
  width: 100%;
  background: #fff;
}
.course-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 19px;    /* 시안 pt16 / pb19 / px16 → 높이 62 */
  border-bottom: 3px solid #d4d4d4;
  font-size: 18px;
  font-weight: 400;           /* Pretendard Regular */
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #404040;
  text-align: center;
  white-space: nowrap;
}
/* 상세 이미지는 간격 없이 바로 이어짐 (시안대로) */

/* 우측: 스티키 사이드바 */
.course-side {
  flex: 0 0 400px;
  max-width: 400px;
  position: sticky;
  top: 24px;
  padding-top: 20px;          /* 시안 사이드바 top offset (y186 - y166) */
  display: flex;
  flex-direction: column;
  font-family: 'Pretendard', sans-serif;
}

/* 배지 + 액션 행 */
.side-badges-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.side-badges {
  display: flex;
  align-items: center;
  gap: 4px;
}
.badge-hot,
.badge-new {
  font-size: 14px;
  font-weight: 600;            /* Pretendard SemiBold */
  letter-spacing: -0.16px;
  line-height: 20px;
  border-radius: 4px;
  white-space: nowrap;
}
.badge-hot {
  padding: 5px 9px;
  color: #ff0000;
  background: #fff;
  border: 1px solid #ff0000;
}
.badge-new {
  padding: 4px 8px;
  color: #fff;
  background: linear-gradient(44.54deg, #999999 12.7%, #302727 44.05%, #999999 92.22%);
}
.side-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-actions img {
  display: block;
  width: 20px;
  height: 20px;
}

/* 제목 */
.side-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
  line-height: 32px;
  color: #0a0a0a;
}

/* 안내 박스 */
.side-info {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fafafa;
  border: 1px solid #2d57a1;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 24px;
  color: #0a0a0a;
}

/* CTA 버튼 */
.side-cta {
  margin-top: 4px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d57a1;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
}

/* 반응형(768~1080): 모바일과 같은 1단 순서 — 썸네일 → 사이드바 → 탭/상세 (스티키 해제)
   .course-left를 display:contents로 해체하고 order로 재배열 (모바일과 동일 기법) */
@media (max-width: 1080px) {
  .course-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .course-left { display: contents; }
  .course-left .course-thumb { order: 1; }
  .course-side {
    order: 2;
    flex: none;
    width: 100%;
    max-width: none;
    position: static;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .course-tabs { order: 3; }
  .course-left .course-detail { order: 4; }
}

/* ===== 모바일 (시안 107:235 "모바일 VLLO 강의" — Figma 실측 375) ===== */
@media (max-width: 767px) {
  /* 시안 본문 순서: 썸네일(y100) → 정보 카드(y296) → 상세 이미지(y525~).
     .course-left를 display:contents로 해체하고 order로 재배열 (마크업 변경 없음) */
  .course {
    /* 하단: 마지막 이미지(2042) → 푸터(2187) = 145px. JS 인라인(149px)보다 우선 */
    padding: 0 0 145px !important;
  }
  .course-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .course-left { display: contents; }

  /* 썸네일 (107:627): x14 y100(헤더 바로 밑) 347×195 — 좌우 14, 라운드 없음
     (.course-left img 의 width:100% 보다 특이도 높게) */
  .course-left .course-thumb {
    order: 1;
    width: calc(100% - 28px);
    margin: 0 14px;
  }

  /* 탭바(클래스 소개/강사 소개) — 모바일 시안(107:235)에 없음 */
  .course-tabs { display: none; }

  /* ----- 정보 카드 (107:586): 풀폭 375, 내부 패딩 20 ----- */
  .course-side {
    order: 2;
    flex: none;
    width: 100%;
    max-width: none;
    position: static;
    padding: 20px 20px 0;        /* 배지 y316 = 카드 상단(296)+20, 콘텐츠 x20~355 */
    box-sizing: border-box;
  }
  /* NEW 배지 — 모바일 시안엔 HOT만 있음 (107:589) */
  .badge-new { display: none; }
  /* 제목 (107:605): Pretendard Bold 20/28 ls-0.16 #0a0a0a, 아래 16(gap12+pt4) */
  .side-title {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 28px;
  }
  /* 안내 박스 텍스트 (107:632): Pretendard Bold 12/16 ls-0.16 (박스 48 동일) */
  .side-info {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.16px;
  }
  /* CTA(107:634)는 PC와 동일 (h48, #2d57a1, 16/24, margin-top 4) */

  /* HOT 배지 (107:590): 시안 47×30 — Figma 보더는 안쪽이라 패딩에서 보더 1px 차감 */
  .badge-hot { padding: 4px 8px; }

  /* ----- 상세 이미지 (107:672~676): x20 w335, 위 27(CTA 498→525), 사이 간격 0 ----- */
  .course-left .course-detail {
    order: 3;
    width: calc(100% - 40px);
    margin: 0 20px;
  }
  .course-tabs + .course-detail { margin-top: 27px; }   /* 첫 상세 이미지 */
}