/* ===== 전자책 상세 페이지 (Figma 65:125) =====
   본문 폰트: Pretendard (공통). 좌측 800(썸네일 카드+탭바+상세 10장) / 우측 400(스티키 사이드바)
   레이아웃 골격은 강의 상세(premiere)와 동일, 썸네일 카드·가격 구성만 시안에 맞춤 */

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

/* ===== 좌측: 썸네일 카드 + 탭바 + 상세 이미지 10장 ===== */
.ebook-left {
  flex: 1 1 800px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 썸네일 카드: 800×450 회색 카드 안에 책 표지(246.66×370)를 그림자와 함께 가운데 배치 (66:488) */
.eb-cover-card {
  width: 100%;
  aspect-ratio: 800 / 450;
  background: #e1dedc;            /* Swiss Coffee */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.eb-cover-book {
  height: 82.22%;                 /* 370 / 450 (카드 상하 padding 40 제외) */
  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);
}

/* 썸네일 바로 아래 탭바: 전자책 소개 / 저자 / 환불정책 (66:502) */
.eb-tabs {
  display: flex;
  width: 100%;
  background: #fff;
}
.eb-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;
}

/* 상세 이미지 10장: 간격 없이 바로 이어짐 (시안대로) */
.eb-detail {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== 우측: 스티키 사이드바 (66:513) ===== */
.ebook-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;
}

.eb-group1 {
  display: flex;
  flex-direction: column;
}

/* 배지 + 액션(찜·공유) 행 (66:517) */
.eb-badges-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.eb-badges {                      /* 배지 묶음 래퍼 (PC: BEST만 / 모바일: HOT+NEW) */
  display: flex;
  align-items: center;
  gap: 4px;
}
.eb-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;
}
.eb-badge-hot,
.eb-badge-new { display: none; }  /* 모바일 전용 배지 (시안 111:886) — PC에선 숨김 */
.eb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eb-actions img {
  display: block;
  width: 20px;
  height: 20px;
}

/* 제목 (80:167) */
.eb-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;               /* Bold */
  letter-spacing: -0.16px;
  line-height: 32px;
  color: #0a0a0a;
}

/* 월 할부가 + 안내 (80:171) — 우측 정렬 */
.eb-monthly {
  margin-bottom: 12px;
  text-align: right;
}
.eb-monthly-price {
  font-size: 32px;
  font-weight: 700;               /* Bold */
  letter-spacing: -0.64px;
  line-height: 38.4px;
  color: #0a0a0a;
}
.eb-monthly-note {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;               /* Regular */
  letter-spacing: -0.28px;
  line-height: 21px;
  color: #404040;
}

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

/* 구매 행: 장바구니 버튼 + 구매하기 (80:214) */
.eb-buy {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
}
.eb-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;
}
.eb-buy-cart img {
  display: block;
  width: 20px;
  height: 20px;
}
.eb-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;               /* Bold */
  letter-spacing: -0.32px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
}

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

/* ===== 모바일 (시안 111:822 "모바일 전자책" — Figma 실측 375) ===== */
@media (max-width: 767px) {
  /* 시안 본문 순서: 커버 카드(y100) → 정보 카드(y312) → 상세 이미지 10장(y659~6507).
     .ebook-left를 display:contents로 해체하고 order로 재배열 (강의 페이지와 동일 기법) */
  .ebook {
    /* 하단: 마지막 이미지(6507) → 푸터(6685) = 178px. JS 인라인(259px)보다 우선 */
    padding: 0 0 178px !important;
  }
  .ebook-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .ebook-left { display: contents; }

  /* 커버 카드 (111:1359): x19 y100(헤더 바로 밑) 338×190, bg·radius 동일 */
  .eb-cover-card {
    order: 1;
    width: calc(100% - 37px);
    margin: 0 18px 0 19px;
    aspect-ratio: 338 / 190;
  }
  /* 책 표지 (111:1361): 119×179 — 카드 높이의 94.21% (PC 82.22%) */
  .eb-cover-book { height: 94.21%; }

  /* 탭바(전자책 소개/저자/환불정책) — 모바일 시안(111:822)에 없음 */
  .eb-tabs { display: none; }

  /* ----- 정보 카드 (111:883): x21 w335, 커버 카드 아래 22px ----- */
  .ebook-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:885): 아래 8 (시안 카드 gap 8) */
  .eb-badges-row { margin-bottom: 8px; }
  /* 배지 (111:886): BEST 대신 HOT(47×30)+NEW(48×28), gap 4 */
  .eb-badge-best { display: none; }
  .eb-badge-hot,
  .eb-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;
  }
  .eb-badge-hot {                /* 111:887 — 시안 px9/py5(보더 안쪽) → 보더 1px 차감 */
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #ff0000;
    color: #ff0000;
  }
  .eb-badge-new {                /* 111:889 — px8/py4, 보더 없음 */
    padding: 4px 8px;
    background: linear-gradient(44.54deg, #999999 12.7%, #302727 44.05%, #999999 92.22%);
    color: #fff;
  }
  /* 제목 (111:904): Pretendard Bold 20/28 ls-0.16, 아래 24 (pb16 + gap8) */
  .eb-title {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 28px;
  }
  /* 월 할부가 (111:914): Bold 22/26.4 ls-0.22 (PC 32/38.4) — 아래 12(시안 11.99) 동일 */
  .eb-monthly-price {
    font-size: 22px;
    line-height: 26.4px;
    letter-spacing: -0.22px;
  }
  /* 할부 안내 (111:916): Regular 13/19.5 ls-0.13 #404040 (PC 14/21), 위 4(시안 3.99) 동일 */
  .eb-monthly-note {
    font-size: 13px;
    line-height: 19.5px;
    letter-spacing: -0.13px;
  }
  /* 가격 박스 (111:917): 패딩16·gap10·radius6 동일, 텍스트 16/24 ls-0.16 (PC 18/27) */
  .eb-price-row span,
  .eb-price-total .eb-price-label,
  .eb-price-total .eb-price-amount {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
  }
  .eb-price-total .eb-price-label { font-weight: 500; }   /* 111:930 Medium (PC Regular) */
  /* 구매 행 (111:1371): 가격박스 아래 12 (gap8 + pt4, PC 16) — 카트48·gap4·버튼 동일 */
  .eb-buy { margin-top: 12px; }

  /* ----- 상세 이미지 10장 (111:1382~1391): x20 w335, 위 35(624→659), 사이 간격 0 ----- */
  .ebook-left .eb-detail {
    order: 3;
    width: calc(100% - 40px);
    margin: 0 20px;
  }
  .eb-tabs + .eb-detail { margin-top: 35px; }   /* 첫 상세 이미지 */
}