/* ===== 유튜브 강의 상세 페이지 (Figma 69:160) =====
   본문 폰트: Pretendard (공통). 좌측 760(썸네일+탭+아티클 본문) / 우측 400(스티키 사이드바)
   레이아웃 골격·사이드바는 강의 상세(premiere)와 동일, 좌측 아티클 본문만 시안에 맞춤 */

.ytc {
  width: 100%;
  padding: 0 24px 259px;          /* 하단 여백 기본 259px — JS가 창 높이에 맞춰 키움 */
}
.ytc-wrap {
  max-width: 1200px;              /* 760 + 40 + 400 */
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* ===== 좌측: 썸네일 + 탭 + 아티클 ===== */
.ytc-left {
  flex: 1 1 760px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ytc-thumb {
  display: block;
  width: 100%;
  height: auto;                   /* 시안 760×427.5 (16:9) */
}

/* 썸네일 아래 탭바: 클래스 소개 / 강사 소개 (69:224) */
.ytc-tabs {
  display: flex;
  width: 100%;
  background: #fff;
}
.ytc-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 19px;        /* 높이 62 */
  border-bottom: 3px solid #d4d4d4;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #404040;
  text-align: center;
  white-space: nowrap;
}

/* ===== 아티클 본문 (72:10808) ===== */
.ytc-article {
  display: flex;
  flex-direction: column;
  font-family: 'Pretendard', sans-serif;
  color: #0c0c0c;
}

/* 구분선 (시안 740px, 가운데, 아주 옅은 선)
   — 좌측 컬럼이 760보다 좁아지면(1081~1230 등) 함께 줄어들도록 max-width로 */
.a-hr {
  width: 100%;
  max-width: 740px;
  height: 0;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 타이포 (모두 좌측 정렬) */
.a-h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}
.a-h3 {                           /* 소제목 18px */
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}
.a-h3-lg {                        /* 소제목 20px */
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}
.a-p {                            /* 본문(볼드) 18/30 */
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
}
.a-p--reg {                       /* 본문(레귤러) */
  font-weight: 400;
}

/* 들여쓰기 문단 (li, pl 24) */
.a-li {
  padding-left: 24px;
}
.a-li .lead {                     /* "이 강의가 다른 강의와 다른 이유" */
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}
.a-li .body {                     /* 대시 목록 */
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

/* 이미지 */
.a-img {
  display: block;
  width: 100%;
  height: auto;
}
.a-imgs {                         /* 연결되는 이미지 묶음: 간격 없이 딱 붙임 */
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 이어지는 이미지의 서브픽셀 경계선(반응형 스케일링 시 생기는 1px 실선) 제거:
   바로 뒤따르는 이미지를 1px 겹쳐 완전히 붙임. (인라인 margin-top이 있는 별개 이미지는 영향 없음) */
.a-img + .a-img {
  margin-top: -1px;
}

/* 전자책 썸네일 카드 (75:331) — 전자책 페이지와 동일 스타일 */
.a-ebook-card {
  width: 100%;
  aspect-ratio: 800 / 450;
  background: #e1dedc;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.a-ebook-card img {
  height: 82.22%;
  aspect-ratio: 246.66 / 370;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* 목차 (76:341) */
.a-toc-item {
  margin: 0;
  padding-top: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
}
.a-toc-item:first-of-type {
  padding-top: 8px;
}

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

/* 상단 그룹: 배지·제목·가격박스 */
.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;
  letter-spacing: -0.16px;
  line-height: 20px;
  white-space: nowrap;
}
.badge-hot,
.badge-new { display: none; }     /* 모바일 전용 배지 (시안 111:1565) — 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;
  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;
  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;
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #171717;
}
.price-total .price-amount {
  font-size: 18px;
  font-weight: 700;
  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단 순서 — 썸네일 → 사이드바 → 탭/아티클 (스티키 해제)
   .ytc-left를 display:contents로 해체하고 order로 재배열 (모바일과 동일 기법) */
@media (max-width: 1080px) {
  .ytc-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .ytc-left { display: contents; }
  .ytc-left .ytc-thumb { order: 1; }
  .ytc-side {
    order: 2;
    flex: none;
    width: 100%;
    max-width: none;
    position: static;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .ytc-tabs { order: 3; }
  .ytc-left .ytc-article { order: 4; }
  .a-hr { max-width: none; }      /* 1단에선 본문 전체 폭 (width:100%는 기본 규칙) */
}

/* 모바일 전용 줄바꿈 — PC에선 숨김 (시안 111:4712 차별점 줄바꿈 지점) */
.br-mo { display: none; }

/* ===== 모바일 (시안 111:1503 "모바일 유튜브 강의" — Figma 실측 375) ===== */
@media (max-width: 767px) {
  /* 시안 본문 순서: 썸네일(y100) → 정보 카드(y312~635) → 아티클(y672~).
     .ytc-left를 display:contents로 해체하고 order로 재배열 (다른 강의 페이지와 동일 기법) */
  .ytc {
    /* 하단: 아티클 마지막 블록(11666) → 푸터(11787) = 121px. JS 인라인(259px)보다 우선 */
    padding: 0 0 121px !important;
  }
  .ytc-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .ytc-left { display: contents; }

  /* 썸네일 (111:1561): x20 y100(헤더 바로 밑) 336×189, 라운드 없음 */
  .ytc-left .ytc-thumb {
    order: 1;
    width: calc(100% - 39px);
    margin: 0 19px 0 20px;
  }

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

  /* ----- 정보 카드 (111:1562): x21 w335, 썸네일 아래 23px ----- */
  .ytc-side {
    order: 2;
    flex: none;
    width: 100%;
    max-width: none;
    position: static;
    padding: 23px 19px 0 21px;   /* 배지 y312 = 썸네일 하단(289)+23, 컬럼 x21~356 */
    box-sizing: border-box;
  }
  /* 배지·제목·가격 그룹: gap 8 (시안 카드 gap), 아래 16 (519→535) */
  .side-group1 { gap: 8px; padding-bottom: 16px; }
  /* 배지 (111:1565): 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:1566 — 시안 px9/py5(보더 안쪽) → 보더 1px 차감 */
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #ff0000;
    color: #ff0000;
  }
  .badge-new {                   /* 111:1568 — px8/py4, 보더 없음 */
    padding: 4px 8px;
    background: linear-gradient(44.54deg, #999999 12.7%, #302727 44.05%, #999999 92.22%);
    color: #fff;
  }
  /* 제목 (111:1583): Pretendard Bold 20/28 ls-0.16 (PC 24/32) */
  .side-title {
    padding-bottom: 0;
    font-size: 20px;
    line-height: 28px;
  }
  /* 가격 박스 (111:1586): 패딩16·gap10·radius6 동일, 텍스트 16/24 ls-0.16 (PC 18/27) */
  .price-row span,
  .price-total .price-label,
  .price-total .price-amount {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
  }
  /* 안내 박스 텍스트 (111:1606): Pretendard Bold 12/16 ls-0.16 (박스 h48 동일) */
  .side-info {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.16px;
  }
  /* 구매 행(111:1608)은 PC와 동일: 카트 48 + gap 4 + 구매하기(#2d57a1, 16/24) */

  /* ----- 아티클 본문 (111:4674): x24 w332, 구매 행(635) 아래 37px ----- */
  .ytc-left .ytc-article {
    order: 3;
    width: calc(100% - 43px);
    margin: 37px 19px 0 24px;
  }
  /* PC 전용 줄바꿈 숨김 — 모바일 시안(111:4718·4774 등)은 긴 문장을 자연 줄바꿈 */
  .br-pc { display: none; }
  .br-mo { display: inline; }   /* 모바일 전용 줄바꿈 표시 */

  /* 아티클 타이포 — class101 모바일 원본 캡처(111:4314) 실측:
     h2 Bold 18/22 · h3 Bold 16/20 · 본문 Regular 16/28 (자간 0, #0c0c0c) */
  .a-h2 {
    font-size: 18px;
    line-height: 22px;
  }
  .a-h3 {
    font-size: 16px;             /* PC 18/22 */
    line-height: 20px;
  }
  .a-h3-lg {
    font-size: 18px;             /* 111:4720 실측 18/30 (PC 20/26) */
    line-height: 30px;
  }
  .a-p {
    font-size: 16px;             /* PC 18/30 */
    line-height: 28px;
  }
  /* 차별점 목록 (111:4712 실측): 컨테이너 들여쓰기 없음(x0),
     lead 20/30(PC 동일), 항목 16/30 + 줄바꿈 시 내어쓰기('   ' ≈ 13px) */
  div.a-li { padding-left: 0; }
  .a-li .body {
    font-size: 16px;             /* PC 18/30 */
    line-height: 30px;
  }
  .a-li .body .dash {
    display: block;
    padding-left: 13px;
    text-indent: -13px;
  }
  .a-toc-item {
    font-size: 16px;             /* PC 18/30 */
    line-height: 28px;
  }
  /* 전자책 카드 (111:4783): 338×190 (아티클 좌측 -14px 돌출, 시안 실측), 책 94.21% */
  .a-ebook-card {
    width: 338px;
    margin-left: -14px;
    aspect-ratio: 338 / 190;
  }
  .a-ebook-card img { height: 94.21%; }
}