/* ===== 프리미어 프로 강의 페이지 (77:455) =====
   본문 폰트: Pretendard (공통). 좌측 760(썸네일+상세 6장) / 우측 400(스티키 사이드바)
   레이아웃은 VLLO 강의 페이지와 동일, 사이드바 구성만 다름 */

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

/* ===== 좌측: 썸네일 + 상세 이미지 6장 ===== */
.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 {
  /* 시안: 라운드 없는 사각 썸네일. 아래 탭바가 바로 이어짐 */
}

/* 썸네일 바로 아래 탭바: 클래스 소개 / 강사 소개 (77:520) */
.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;
}
/* 상세 이미지 6장은 간격 없이 바로 이어짐 (시안대로) */

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

/* 상단 그룹: 배지·제목·가격박스 (gap 12, 하단 12) */
.side-group1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
}

/* 배지 + 액션 행 */
.side-badges-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-badges {                   /* 배지 묶음 래퍼 (PC: BEST만 / 모바일: HOT+NEW) */
  display: flex;
  align-items: center;
  gap: 4px;
}
.badge-best {
  padding: 4px 8px;
  border-radius: 4px;
  background: linear-gradient(42.8deg, #999999 12.7%, #302727 44.05%, #999999 92.22%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;              /* Pretendard SemiBold */
  letter-spacing: -0.16px;
  line-height: 20px;
  white-space: nowrap;
}
.badge-hot,
.badge-new { display: none; }    /* 모바일 전용 배지 (시안 111:745) — PC에선 숨김 */
.side-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-actions img {
  display: block;
  width: 20px;
  height: 20px;
}

/* 제목 */
.side-title {
  margin: 0;
  padding-bottom: 4px;           /* 시안 h1 pb-4 */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
  line-height: 32px;
  color: #0a0a0a;
}

/* 가격 박스 */
.side-price {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-row span {
  font-size: 18px;
  font-weight: 400;              /* Regular */
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #171717;
  white-space: nowrap;
}
.price-total {
  border-top: 1px solid #e5e5e5;
  padding-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-total .price-label {
  font-size: 18px;
  font-weight: 500;              /* Medium */
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #171717;
}
.price-total .price-amount {
  font-size: 18px;
  font-weight: 700;              /* Bold */
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #171717;
}

/* 하단 그룹: 안내박스 + 구매 행 */
.side-group2 {
  display: flex;
  flex-direction: column;
}
.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;
}
.side-buy {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
}
.buy-cart {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #2d57a1;
  border-radius: 4px;
  cursor: pointer;
}
.buy-cart img {
  display: block;
  width: 20px;
  height: 20px;
}
.buy-now {
  flex: 1;
  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; }
}

/* ===== 모바일 (시안 111:238 "모바일 프리미어 프로 강의" — Figma 실측 375) ===== */
@media (max-width: 767px) {
  /* 시안 본문 순서: 썸네일(y101) → 정보 카드(y312) → 상세 이미지 6장(y664~3551).
     .course-left를 display:contents로 해체하고 order로 재배열 (VLLO와 동일 기법) */
  .course {
    /* 하단: 마지막 이미지(3551) → 푸터(3683) = 132px. JS 인라인(259px)보다 우선 */
    padding: 0 0 132px !important;
  }
  .course-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .course-left { display: contents; }

  /* 썸네일 (111:661): x20 y101(헤더 바로 밑) 334×189, 라운드 없음 */
  .course-left .course-thumb {
    order: 1;
    width: calc(100% - 41px);
    margin: 0 21px 0 20px;
  }

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

  /* ----- 정보 카드 (111:742): x21 w335, 썸네일 아래 22px ----- */
  .course-side {
    order: 2;
    flex: none;
    width: 100%;
    max-width: none;
    position: static;
    padding: 22px 19px 0 21px;   /* 배지 y312 = 썸네일 하단(290)+22, 컬럼 x21~356 */
    box-sizing: border-box;
  }
  /* 배지·제목·가격 그룹 (111:743): gap 8, 가격박스 아래 16 (111:764 pb16) */
  .side-group1 { gap: 8px; padding-bottom: 16px; }
  /* 배지 (111:745): BEST 대신 HOT(47×30)+NEW(48×28), gap 4 */
  .badge-best { display: none; }
  .badge-hot,
  .badge-new {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;            /* Pretendard SemiBold 14/20 ls-0.16 */
    letter-spacing: -0.16px;
    line-height: 20px;
    white-space: nowrap;
  }
  .badge-hot {                   /* 111:746 — 시안 px9/py5(보더 안쪽) → 보더 1px 차감 */
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #ff0000;
    color: #ff0000;
  }
  .badge-new {                   /* 111:748 — px8/py4, 보더 없음 */
    padding: 4px 8px;
    background: linear-gradient(44.54deg, #999999 12.7%, #302727 44.05%, #999999 92.22%);
    color: #fff;
  }
  /* 제목 (111:763): Pretendard Bold 20/28 ls-0.16 (pb는 그룹 gap 8로 대체) */
  .side-title {
    padding-bottom: 0;
    font-size: 20px;
    line-height: 28px;
  }
  /* 가격 박스 (111:776): 패딩16·gap10·radius6 동일, 텍스트만 16/24 ls-0.16 */
  .price-row span,
  .price-total .price-label,
  .price-total .price-amount {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
  }
  /* 안내 박스 텍스트 (111:996): Pretendard Bold 12/16 ls-0.16 (박스 48 동일) */
  .side-info {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.16px;
  }
  /* 구매 행(111:998)은 PC와 동일: 카트 48 + gap 4 + 구매하기(#2d57a1, 16/24) */

  /* ----- 상세 이미지 6장 (111:1009~1014): x21 w333, 위 29(635→664), 사이 간격 0 ----- */
  .course-left .course-detail {
    order: 3;
    width: calc(100% - 42px);
    margin: 0 21px;
  }
  .course-tabs + .course-detail { margin-top: 29px; }   /* 첫 상세 이미지 */
}