/* 히어로 섹션 전체 너비로 확장 */
.lecture-container {
  width: 100%;
  max-width: none;
  position: relative;
  z-index: 1;
  /* 헤더(1000)보다 낮게 설정 */
  overflow: visible;
  /* sticky가 작동하도록 overflow 제거 */
}

.lecture-container .lecture-header {
  position: relative;
  height: 576px;
  /* 화면 전체 너비로 확장 */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  /* 그라데이션 배경 */
  background: linear-gradient(180deg, #1a0a3a 0%, #0a051f 100%);
  /* 이미지 중앙 정렬을 위한 flex 설정 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 그라데이션 오버레이 추가 */
.lecture-container .lecture-header::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 349.38px;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 86.16%);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* 히어로 배경 이미지 */
.lecture-header img {
  position: relative;
  width: 650px;
  height: 480px;
  object-fit: contain;
  z-index: 0;
}

.lecture-header .lecture-header-content {
  position: absolute;
  width: 100%;
  max-width: 1200px;
  /* 컨텐츠는 중앙 정렬 */
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  /* 오버레이보다 위에 표시 */
}

.lecture-header-content .lecture-header-anchor {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 16px;

  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.lecture-header .lecture-header-content .lecture-header-anchor svg {
  width: 24px;
  height: 24px;
}

.lecture-header .lecture-header-content .lecture-header-title {
  font-size: 40px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

/* 강사 정보 스타일 */
.lecture-header .lecture-header-content .lecture-header-teacher {
  position: relative;
  width: 100%;
  max-width: 1180px;
  height: 34px;
  /* 높이 고정으로 공간 유지 */
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  margin-bottom: 40px;

  /* 대문자로 시작하도록 */
  text-transform: capitalize;
}

.lecture-header .lecture-header-content .lecture-header-info-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lecture-header .lecture-header-content .lecture-header-info-tag {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);

  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: #fff;
}

/* 탭 섹션 - 원본 구조에 sticky 적용 */
.fixedTab {
  position: -webkit-sticky;
  /* Safari 지원 */
  position: sticky;
  top: 60px;
  /* 실제 데스크톱 헤더 높이 */
  width: 100%;
  left: 0;
  right: 0;
  background: #000;
  z-index: 100;
  /* 사이드바(300)보다 낮게, 일반 콘텐츠(1)보다 높게 */
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
  margin-bottom: 80px;
  /* 스크롤 시 그림자 효과 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
  transition: box-shadow 0.3s ease;
}

/* 스크롤 시 그림자 추가 (JavaScript로 클래스 토글) */
.tab-section.lecture-tabs.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.lecture-conts-tab {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  margin-bottom: 0px;
  border-bottom: 1px solid #333333;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0px;
  list-style: none;
}

.lecture-tabs::-webkit-scrollbar {
  display: none;
}

.lecture-conts-tab li a {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #666666;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: -1px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  text-decoration: none;
}

.lecture-conts-tab li a:hover {
  color: #ffffff;
}

.lecture-conts-tab li.on a {
  color: #ffffff;
  border-bottom-color: #802fff;
}

/* 탭 하단 선 위치 조정 - sticky일 때도 동일하게 */
/* .lecture-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #333333;
}
 */

.lecture-content {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 1;
  /* 헤더(1000)보다 낮게 */
  min-height: 100vh;
  /* 충분한 높이 확보 */
  max-width: 1200px;
  margin: 80px auto 0;
  /* 탭 메뉴와 80px 간격 */
  padding: 0 0 100px;
  /* 하단 여백 추가하여 스크롤 가능 */
}

/* body overflow-x 문제 해결 - sticky 작동을 위해 필요 */
body.lecture-detail-page {
  overflow-x: visible !important;
}

/* student-new 래퍼 - sticky를 위해 overflow 제거 */
.student-new {
  overflow: visible !important;
}

/* 모바일에서 sticky를 위한 추가 설정 */
@media (max-width: 767px) {
  /* sticky를 방해하는 모든 속성 제거 */
  body,
  html,
  #wrapper,
  .student-new,
  .lecture-container {
    overflow-x: visible !important;
    /* hidden은 sticky를 무력화시킴! */
    overflow-y: visible !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
    perspective: none !important;
    filter: none !important;
    -webkit-transform: none !important;
  }

  /* lecture-container는 충분한 높이를 가져야 함 */
  .lecture-container {
    min-height: 200vh !important;
    /* 스크롤 가능한 높이 확보 */
    position: relative !important;
  }
}

/* ================================
   DESKTOP STYLES (1200px+)
   ================================ */
.lecture-sidebar {
  /* Frame 204 - 피그마 스펙 */
  width: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 32px;
  position: sticky;
  top: 160px;
  align-self: flex-start;
  z-index: 1001;
  height: fit-content;
}

/* 강의 정보 카드 - Figma 디자인 스펙 */
.student-new .lecture-sidebar-card {
  /* Frame 148 - 피그마 스펙 */
  width: 410px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 24px;
  background: transparent;
}

/* Frame 141 - 카테고리와 액션 버튼 행 - 한 줄로 표시 */
.lecture-sidebar-header {
  /* Frame 141 - 피그마 스펙 */
  width: 410px;
  height: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  gap: 137px;
}

/* Frame 103 - 카테고리 영역 */
.lecture-sidebar-header .lecture-anchor {
  width: 214px;
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 4px;
  text-decoration: none;
}

.lecture-anchor-category {
  font-family: 'Pretendard';
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  white-space: nowrap;
  display: flex;
}

.lecture-anchor-title {
  font-family: 'Pretendard';
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-decoration: none;
}

.lecture-anchor:hover {
  text-decoration: none;
}

.lecture-sidebar-header .lecture-anchor svg {
  width: 24px;
  height: 24px;
}

/* Frame 140 - 액션 버튼들 */
.lecture-sidebar-header .lecture-sidebar-actions {
  width: 56px;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 8px;
}

.lecture-sidebar-header .lecture-sidebar-actions .lecture-sidebar-action-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lecture-sidebar-action-btn svg {
  width: 24px;
  height: 24px;
}

/* 타이틀 스타일 */
.lecture-sidebar-card .lecture-sidebar-title {
  width: 410px;
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 28px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* 강사 정보 스타일 */
.lecture-sidebar-card .lecture-sidebar-description {
  width: 410px;
  font-family: 'Pretendard';
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #999999;
}

/* Frame 147 - 가격 정보 영역 */
.lecture-sidebar-card .purchase-info {
  width: 410px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0;
  gap: 40px;
}

/* Frame 134 - 할부 정보 컨테이너 */
.installment-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 0;
  gap: 14px;
}

/* 할부 라벨 */
.installment-label {
  font-family: 'Pretendard';
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  text-align: right;
  letter-spacing: -0.03em;
  color: #999999;
}

/* Frame 132 - 월 가격 표시 */
.installment-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 0;
  gap: 10px;
}

/* 월 단위 */
.student-new .price-unit {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  text-align: right;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* 가격 금액 */
.student-new .price-amount {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 32px;
  line-height: 140%;
  text-align: right;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.purchase-info .purchase-info-label {
  font-size: 14px;
  line-height: 1.6;
  color: #999999;
  margin: 0;
}

.purchase-info .purchase-info-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* 가격 정보 스타일 */
.price-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}

.original-price {
  text-decoration: line-through;
  color: #666;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.purchase-info .purchase-info-value-unit {
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
  font-weight: 700;
}

.purchase-info .purchase-info-value {
  font-size: 32px;
  line-height: 1.6;
  color: #ffffff;
  font-weight: 700;
}

/* Frame 146 - 액션 버튼 영역 */
.lecture-sidebar-card .actions {
  width: 410px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 16px;
}

/* Frame 144 - 구매하기 버튼 */
.lms-btn-primary {
  width: 410px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 32px;
  background: #802fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.lms-btn-primary:hover {
  background: #802fff !important;
}

.lms-btn-primary.disabled {
  background: #666;
  color: #999;
  cursor: not-allowed;
}

/* Frame 145 - 쿠폰 버튼 */
.lms-btn-coupon {
  width: 410px;
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px 12px 24px;
  gap: 6px;
  background: #191919;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.lms-btn-coupon span {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  flex-grow: 1;
}

.lms-btn-coupon svg {
  width: 20px;
  height: 20px;
}

/* Frame 206 - 쿠폰 리스트 */
.coupon-list-section {
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  background: #292929;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}

.coupon-list-item {
  /* Auto layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  width: 100%;
  height: 48px;
  /* background_2 */
  background: #292929;
  /* Inside auto layout */
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.coupon-list-item:last-child {
  border-radius: 0 0 4px 4px;
}

/* 기본 목록 상태 */
.coupon-list-item .coupon-title {
  /* h10_14_R */
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 1;
}

/* 마우스 오버 상태 */
.coupon-list-item:hover .coupon-title {
  /* main_2 */
  color: #802fff;
}

/* 쿠폰 혜택 표시 */
.coupon-list-item .coupon-benefit {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #802fff;
}

/* 수강권 선택 모달 - Frame 1707483504 */
.purchase-modal-overlay,
#purchaseModal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  overflow-y: auto;
  /* 모달 내부만 스크롤 가능 */
}

/* 모달이 열렸을 때 body 스크롤 방지 */
body.modal-open {
  overflow: hidden !important;
  width: 100% !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  /* 모바일 스크롤 완전 차단 */
}

body.modal-open #wrapper {
  overflow: hidden !important;
}

/* 구매 모달 스타일 (모든 화면 크기) */
.purchase-modal-wrapper {
  width: 714px;
  height: 781px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
}

/* Frame 1707483498 - 모달 메인 컨테이너 */
.purchase-modal-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 714px;
  height: 781px;
  background: #191919;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

/* 모달 상단 부분 (회색 배경) */
.purchase-modal-top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 24px 32px;
  width: 714px;
  height: 663px;
  background: #191919;
  border-radius: 20px 20px 0px 0px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  z-index: 0;
  position: relative;
}

.purchase-modal-header {
  width: 24px;
  height: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
  margin-bottom: 8px;
}

.purchase-modal-close {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-modal-close svg {
  width: 25px;
  height: 25px;
}

/* Frame 1707483499 - 모달 컨텐츠 영역 */
.purchase-modal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 32px;
  width: 650px;
  height: 591px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  margin: 0 auto;
}

/* Frame 1707483497 - 타이틀 섹션 */
.purchase-modal-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 32px;
  width: 650px;
  height: 105px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Frame 1707483482 - 타이틀 텍스트 그룹 */
.purchase-modal-title-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 650px;
  height: 72px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.purchase-modal-title h2 {
  width: 650px;
  height: 39px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 140%;
  text-align: center;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.purchase-modal-title p {
  width: 650px;
  height: 25px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  text-align: center;
  letter-spacing: -0.03em;
  color: #666666;
  margin: 0;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Frame 1707483483 - 구분선 */
.modal-divider {
  width: 650px;
  height: 1px;
  background: #4b4b4b;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Frame 1707483496 - 수강권 선택 섹션 */
.purchase-modal-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: 650px;
  height: 106px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.purchase-modal-section h3 {
  width: 650px;
  height: 25px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Frame 1707483487 - 기간 옵션 컨테이너 */
.period-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
  width: 100%;
  max-width: 650px;
  min-height: 65px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  flex-wrap: wrap; /* 많아지면 줄바꿈 */
}

.period-option {
  flex: 1 1 auto; /* 동적으로 크기 조정 */
  min-width: 150px; /* 최소 너비 */
  max-width: calc(50% - 8px); /* 최대 2개씩 배치 */
  order: 0;
  cursor: pointer;
}

.period-option input[type='radio'] {
  display: none;
}

/* Frame 1707483485/1707483486 - 기간 옵션 버튼 */
.period-option-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px 16px;
  gap: 10px;
  width: 100%; /* 부모 크기에 맞춤 */
  height: 65px;
  background: #292929;
  border-radius: 6px;
  flex: none;
  flex-grow: 1;
  transition: all 0.2s;
  border: none;
}

.period-option.selected .period-option-content,
.period-option input:checked + .period-option-content {
  background: #802fff;
}

.period-label {
  width: 100%; /* 부모 크기에 맞춤 */
  height: 25px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  text-align: center;
  letter-spacing: -0.03em;
  color: #ffffff;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Frame 1707483488 - 두 번째 구분선 */
.modal-divider-2 {
  width: 650px;
  height: 1px;
  background: #4b4b4b;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}

/* Frame 1707483495 - 옵션 선택 섹션 */
.options-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: 650px;
  height: 283px;
  flex: none;
  order: 3;
  align-self: stretch;
  flex-grow: 0;
}

/* Frame 1707484208 - 옵션 헤더 */
.options-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: 650px;
  height: 25px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.options-header h3 {
  width: 95px;
  height: 25px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0;
}

/* Frame 1707484207 - 전체 선택 */
.select-all-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 90px;
  height: 24px;
  flex: none;
  order: 1;
  flex-grow: 0;
  cursor: pointer;
}

.select-all-checkbox {
  width: 24px;
  height: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
}

.select-all-checkbox input {
  display: none;
}

.select-all-checkbox svg {
  width: 24px;
  height: 24px;
}

.select-all-checkbox .checkbox-bg {
  fill: #4b4b4b;
  transition: fill 0.2s;
}

.select-all-checkbox input:checked ~ svg .checkbox-bg {
  fill: #802fff;
}

.select-all-checkbox .checkbox-check {
  opacity: 0;
  transition: opacity 0.2s;
}

.select-all-checkbox input:checked ~ svg .checkbox-check {
  opacity: 1;
}

.select-all-label {
  width: 58px;
  height: 22px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Frame 1707483494 - 옵션 리스트 */
.option-checkboxes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: 650px;
  max-height: 242px;
  overflow-y: auto;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* 추가 상품 없을 때 메시지 */
.option-checkboxes .no-options-message {
  width: 100%;
  text-align: center;
  color: #999999;
  font-size: 14px;
  padding: 40px 0;
}

/* 스크롤바 스타일링 */
.option-checkboxes::-webkit-scrollbar {
  width: 2px;
}

.option-checkboxes::-webkit-scrollbar-track {
  background: #999999;
  border-radius: 20px;
}

.option-checkboxes::-webkit-scrollbar-thumb {
  background: #dadada;
  border-radius: 20px;
  height: 24px;
}

.option-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
}

/* Frame 1707483490/1707483491 - 옵션 아이템 */
.option-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px;
  gap: 8px;
  width: 650px;
  height: 113px;
  background: #292929;
  border-radius: 8px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  cursor: pointer;
}

/* Frame 1707483493 - 옵션 컨텐츠 */
.option-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
  width: 586px;
  height: 81px;
  flex: none;
  order: 1;
  flex-grow: 1;
}

/* Frame 1707483492 - 옵션 이미지 컨테이너 */
.option-thumbnail {
  width: 81px;
  height: 81px;
  background: #000000;
  border-radius: 6px;
  flex: none;
  order: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.option-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 썸네일이 없을 때 표시되는 로고 */
.option-thumbnail .default-logo {
  width: auto;
  height: 24px;
  object-fit: contain;
}

/* Frame 1707483491 - 옵션 텍스트 */
.option-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 6px;
  width: 489px;
  height: 48px;
  flex: none;
  order: 1;
  flex-grow: 1;
}

.option-subtitle {
  width: 489px;
  height: 20px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #999999;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.option-title {
  width: 489px;
  height: 22px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.option-checkbox {
  width: 24px;
  height: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
}

.option-checkbox input {
  display: none;
}

.option-checkbox svg {
  width: 24px;
  height: 24px;
}

.option-checkbox .checkbox-bg {
  fill: #4b4b4b;
  transition: fill 0.2s;
}

.option-checkbox input:checked ~ svg .checkbox-bg {
  fill: #802fff;
}

.option-checkbox .checkbox-check {
  opacity: 0;
  transition: opacity 0.2s;
}

.option-checkbox input:checked ~ svg .checkbox-check {
  opacity: 1;
}

/* Frame 1707483502 - 모달 하단 부분 (검은 배경) */
.purchase-modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding: 32px;
  gap: 32px;
  width: 714px;
  height: 118px;
  background: #292929;
  border-radius: 0px 0px 20px 20px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 1;
}

/* Frame 1707483500 - 가격 정보 */
.modal-price-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0px;
  width: 245px;
  height: 54px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Frame 1707484206 - 가격 디테일 */
.modal-price-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 245px;
  height: 54px;
  flex: none;
  order: 0;
  flex-grow: 1;
}

.modal-price-original {
  width: 245px;
  height: 20px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #a166ff;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Frame 132 - 할부 가격 정보 */
.modal-price-installment {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 0px;
  gap: 8px;
  width: 223px;
  height: 34px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.modal-price-value {
  /* width: 109px; */
  height: 34px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 140%;
  color: #ffffff;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.modal-price-desc {
  width: 106px;
  height: 18px;
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #999999;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Frame 1707483501 - 액션 버튼들 */
.modal-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
  width: 373px;
  height: 48px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.btn-modal-cart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 32px;
  width: 178.5px;
  height: 48px;
  background: #ffffff;
  border-radius: 4px;
  border: none;
  flex: none;
  order: 0;
  flex-grow: 1;
  cursor: pointer;

  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #000000;
}

.btn-modal-purchase {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 32px;
  width: 178.5px;
  height: 48px;
  background: #802fff;
  border-radius: 4px;
  border: none;
  flex: none;
  order: 1;
  flex-grow: 1;
  cursor: pointer;

  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* Frame 1707484184 - 스크롤바 (선택사항) */
.modal-scrollbar {
  position: absolute;
  width: 2px;
  height: 242px;
  right: 32.23px;
  top: calc(50% - 242px / 2 + 125.5px);
  background: #999999;
  border-radius: 20px;
  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 2;
}

.modal-scrollbar-thumb {
  position: absolute;
  width: 2px;
  height: 24px;
  left: 0px;
  top: 0px;
  background: #dadada;
  border-radius: 20px;
}

/* 할인 배너 스타일 */
.discount-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(
    90deg,
    rgba(128, 47, 255, 0.2) 0%,
    rgba(128, 47, 255, 0.1) 100%
  );
  border-radius: 8px;
  margin-bottom: 20px;
}

.discount-banner-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.discount-text {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.discount-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 14px;
}

/* 컨텐츠 리스트도 충분한 높이 확보 */
.lecture-content-list {
  flex: 1 1 auto;
  max-width: 734px;
  display: flex;
  flex-direction: column;
  gap: 96px;
  min-height: 150vh;
  /* 스크롤이 가능하도록 충분한 높이 */
}

.lecture-content-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 앵커 링크 스크롤 시 고정 헤더와 탭을 고려한 여백 */
  scroll-margin-top: 115px;
  /* 헤더(60px) + 고정탭(35px) + 여백(20px) */
}

.student-new .lecture-content-item-title {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}

.student-new .lecture-content-item-content {
  width: 714px;
  height: auto;
  /* 컨텐츠에 따라 자동 높이 */
  min-height: unset;
  /* 최소 높이 제거 */
  border-radius: 0;
  background: transparent;
  /* 배경색 제거 */
  overflow: visible;
  /* 스크롤 제거 */
}

.refund {
  padding: 0;
  /* 환불 규정 섹션 padding 제거 */
}

/* 쿠폰 선택 select box 스타일 */
.lecture-purchase-coupon-select {
  width: 100%;
  padding: 12px 16px;
  background: #191919;
  border-radius: 4px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;

  /* 기본 select 화살표 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* 커스텀 화살표 추가 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.5898 7.625L10.8398 12.375L6.08984 7.625' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 21px 20px;
  padding-right: 40px;
}

/* select option 스타일 */
.lecture-purchase-coupon-select option {
  background: #292929;
  color: #ffffff;
  padding: 12px 32px;
}

.lecture-purchase-coupon-select option:active {
  background: #292929;
  color: #802fff;
}

/* 클래스 탭 스타일 */

.lecture-container .class-tab-section {
  font-family: var(--font-family) !important;
  width: 100%;
  background: #000;
}

.lecture-container .class-tab-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0px;
  position: relative;
}

.lecture-container .class-tab-list {
  display: flex;
  gap: 40px;
  border-bottom: 2px solid #333;
}

.lecture-container .class-tab-list .class-filter-tab {
  padding: 0 0 10px 0;
  background: #000;
  color: #666666;
  border: none;
  font-size: 18px;
  font-weight: 700;
  position: relative;
}

.lecture-container .class-tab-list .class-filter-tab-underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  /* background: #fff; */
}

.lecture-container
  .class-tab-list
  .class-filter-tab.active
  .class-filter-tab-underline {
  background: #fff;
}

.lecture-container .class-tab-list .class-filter-tab.active {
  color: #fff;
}

/* ================================
   TABLET STYLES (768px - 1199px)
   ================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  .lecture-sidebar {
    /* background-color: #000000; */
    /* 피그마 스펙: 410px 유지 */
    width: 410px;
    top: 170px;
    right: 10px;
  }

  .lecture-sidebar-card {
    width: 410px;
  }

  .lecture-sidebar-header {
    width: 410px;
  }

  .lecture-sidebar-card .lecture-sidebar-title {
    width: 410px;
    font-size: 24px;
  }

  .lecture-sidebar-card .lecture-sidebar-description {
    width: 410px;
  }

  .lecture-sidebar-card .purchase-info {
    width: 410px;
  }

  .lecture-sidebar-card .actions {
    width: 410px;
  }

  .btn-primary,
  .btn-coupon {
    width: 410px;
  }

  .price-amount {
    font-size: 28px;
  }

  .price-unit {
    font-size: 16px;
  }

  .installment-label {
    font-size: 13px;
  }

  .lecture-content {
    gap: 40px;
  }

  .lecture-content-item-content {
    width: 100%;
    max-width: 600px;
  }
}

/* ================================
   MOBILE STYLES (< 768px)
   ================================ */
@media (max-width: 767px) {
  /* 모바일에서 탭 메뉴 sticky 적용 */
  .fixedTab {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 60px !important;
    /* 모바일 헤더 높이 */
    z-index: 999 !important;
    /* 모바일 헤더(1000)보다 살짝 낮게 */
    background: #000 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  .lecture-tabs {
    gap: 20px;
    padding: 0 16px;
    height: 40px;
  }

  .lecture-tab {
    font-size: 16px;
    height: 38px;
  }

  .lecture-tabs.scrolled {
    padding: 12px 16px;
  }

  .lecture-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 16px;
  }

  .lecture-content-list {
    gap: 48px;
  }

  .lecture-content-item-content {
    width: 100%;
  }

  .lecture-content-item {
    gap: 16px;
  }

  /* 모바일에서 사이드바는 스티키 해제하고 전체 너비로 */
  .lecture-sidebar {
    width: 100%;
    margin-bottom: 32px;
    position: relative;
    top: auto;
  }

  .lecture-sidebar-card {
    width: 100%;
    padding: 20px;
  }

  .lecture-sidebar-header {
    width: 100%;
    flex-wrap: wrap;
  }

  .lecture-sidebar-card .lecture-sidebar-title {
    width: 100%;
    font-size: 22px;
  }

  .lecture-sidebar-card .lecture-sidebar-description {
    width: 100%;
    font-size: 13px;
  }

  .lecture-sidebar-card .purchase-info {
    width: 100%;
  }

  .installment-info {
    width: 100%;
    justify-content: space-between;
  }

  .installment-label {
    font-size: 12px;
  }

  .price-amount {
    font-size: 24px;
  }

  .price-unit {
    font-size: 14px;
  }

  .lecture-sidebar-card .actions {
    width: 100%;
  }

  .btn-primary,
  .btn-coupon {
    width: 100%;
  }

  .lecture-anchor-category,
  .lecture-anchor-title {
    font-size: 16px;
  }

  .lecture-sidebar-actions {
    margin-left: auto;
  }

  /* 모바일에서 히어로 섹션 조정 */
  .lecture-container .lecture-header {
    height: 400px;
  }

  /* 모바일에서 히어로 이미지 크기 조정 */
  .lecture-header img {
    width: 90%;
    max-width: 400px;
    height: auto;
    transform: translateY(-60px); /* 이미지를 위로 올림 */
  }

  .lecture-header .lecture-header-content {
    padding: 0 16px;
    bottom: 30px;
  }

  /* 카테고리 (breadcrumb) */
  .lecture-header-content .lecture-header-anchor {
    margin-bottom: 5px; /* 카테고리와 강좌명 사이 간격 */
    font-size: 12px; /* 모바일에서 작게 */
  }

  /* 강좌명 */
  .lecture-header .lecture-header-content .lecture-header-title {
    font-size: 28px;
    text-align: center;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 7px; /* 강좌명과 강사명 사이 간격 */
  }

  /* 강사명 */
  .lecture-header .lecture-header-content .lecture-header-teacher {
    font-size: 18px;
    text-align: center;
    margin-bottom: 24px;
    height: 25px;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    text-align: center;
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  .lecture-header-info-wrap {
    position: sticky;
    top: 60px; /* 모바일 헤더 높이 */
    z-index: 90; /* 헤더(1000)보다 낮게, 탭(100)보다 낮게 */
    background: #000; /* 스크롤 시 배경 */
    padding: 12px 0; /* 상하 여백 추가 */
    margin: 0 -16px; /* 좌우 전체 너비 */
    padding-left: 16px;
    padding-right: 16px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
  }

  .lecture-header-info-tag {
    padding: 3px 6px; /* 더 작게 조정 */
    gap: 3px; /* 더 좁게 조정 */
    font-size: 11px; /* 더 작게 조정 */
    line-height: 140%;
    letter-spacing: -0.03em;
  }

  .lecture-header-info-tag svg {
    width: 14px; /* 더 작게 조정 */
    height: 14px;
    flex-shrink: 0;
  }
}

/* 쿠폰 등록 모달 스타일 */
.coupon-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.coupon-modal-overlay.active {
  display: flex;
}

.coupon-modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  position: relative;
}

.coupon-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.coupon-modal-header h3 {
  color: #fff;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.coupon-modal-close-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.coupon-modal-body {
  margin-bottom: 20px;
}

.coupon-modal-label {
  display: block;
  color: #999;
  font-size: 14px;
  margin-bottom: 8px;
}

.coupon-modal-input {
  width: 100%;
  padding: 12px;
  background: #2a2a2a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.coupon-modal-footer {
  display: flex;
  gap: 10px;
}

.coupon-modal-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.coupon-modal-btn--cancel {
  background: #333;
  color: #999;
}

.coupon-modal-btn--confirm {
  background: #802fff;
  color: #fff;
  font-weight: 600;
}

/* 장바구니 확인 모달 스타일 */
.cart-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  /* 구매 모달보다 위에 표시 */
}

.cart-confirm-modal {
  background: #191919;
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cart-confirm-content {
  text-align: center;
}

.cart-confirm-content p {
  font-size: 16px;
  line-height: 1.6;
  color: white;
  margin-bottom: 24px;
  font-weight: 500;
}

.cart-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.cart-confirm-buttons button {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
}

.cart-confirm-ok {
  background: #802fff !important;
  border: none;
  color: white;
}

.cart-confirm-ok:hover {
  background: #6a27d9 !important;
}

.cart-confirm-cancel {
  background: transparent;
  border: 1px solid #666;
  color: #999;
}

.cart-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #999;
}

@media (max-width: 768px) {
  .cart-confirm-modal {
    padding: 24px;
    max-width: 340px;
  }

  .cart-confirm-content p {
    font-size: 15px;
  }

  .cart-confirm-buttons button {
    font-size: 14px;
    padding: 10px 20px;
  }

  /* 탭 컨테이너 모바일 패딩 */
  .class-tab-container {
    padding: 0 20px !important;
  }

  /* 탭 메뉴 모바일 스타일 - h10_14_B */
  .class-tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .class-tab-list .class-filter-tab {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.03em;
  }

  .class-filter-tab {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.03em;
  }
}

/* 커리큘럼 스타일 */
.curriculum-wrapper {
  background: #ffffff;
  overflow: hidden;
}

.curriculum-index-item {
  margin: 0;
  padding: 16px 24px;
  background: #f8f8f8;
  border-bottom: 1px solid #e5e5e5;
}

.curriculum-index-item:first-child {
  margin-top: 0;
}

.curriculum-index-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.02em;
}

.curriculum-item {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.curriculum-item:last-child {
  border-bottom: none;
}

.curriculum-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.curriculum-name {
  font-size: 15px;
  color: #222;
  font-weight: 500;
  line-height: 1.6;
  flex: 1;
  letter-spacing: -0.01em;
}

.curriculum-name i {
  color: #802fff;
  margin-right: 8px;
}

.curriculum-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
  margin-left: auto;
  padding-left: 20px;
}

.curriculum-time svg {
  flex-shrink: 0;
}

.curriculum-time span {
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
  .curriculum-wrapper {
    border-radius: 0;
    box-shadow: none;
  }

  .curriculum-item {
    padding: 16px 20px;
  }

  .curriculum-index-item {
    padding: 14px 20px;
  }

  .curriculum-index-title {
    font-size: 15px;
  }

  .curriculum-name {
    font-size: 14px;
  }

  .curriculum-time {
    font-size: 13px;
    padding-left: 12px;
  }

  .curriculum-time svg {
    width: 14px;
    height: 14px;
  }

  .lecture-conts-tab li {
  }
}

/* TOP 스크롤 버튼 */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  background: #802fff;
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(128, 47, 255, 0.3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  background: #6e29db;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(128, 47, 255, 0.4);
}

.scroll-to-top svg {
  width: 20px;
  height: 20px;
}

.scroll-to-top span {
  font-size: 10px;
  margin-top: -2px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }

  .scroll-to-top svg {
    width: 18px;
    height: 18px;
  }

  /* 모바일에서 사이드바는 상단에 위치 */
  .lecture-sidebar {
    position: relative;
    width: 100%;
    right: auto;
    top: auto;
    max-height: none;
    margin-bottom: 32px;
  }

  .lecture-content {
    flex-direction: column;
    margin-top: 24px;
    /* 모바일에서는 탭과 24px 간격 */
  }

  .lecture-content-list {
    width: 100%;
    max-width: 100%;
  }
}

/* 태블릿 크기 조정 - 1200px 이하는 모바일처럼 처리 */
@media (min-width: 769px) and (max-width: 1200px) {
  /* 사이드바를 바텀시트로 처리 - 너비 100% */
  .lecture-sidebar {
    /* 기존 flex 스타일 유지 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* 접혀있을 때 간격 줄임 */

    /* 바텀시트 스타일 */
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 90vh;
    padding: 16px 20px !important;
    /* 패딩도 줄임 */
    margin: 0;
    background: #000;
    border-radius: 24px 24px 0 0;
    z-index: 1002;

    /* 바텀시트 기본 상태 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s, padding 0.3s;
    transform: translateY(calc(100% - 140px));
    /* 140px만 보임 - 간격을 줄였으므로 더 숨김 */
    overflow: hidden !important;
  }

  /* 바텀시트 확장 시 */
  .lecture-sidebar.expanded {
    transform: translateY(0);
    overflow-y: auto !important;
    gap: 32px;
    /* 확장 시 원래 간격으로 */
    padding: 24px 20px !important;
    /* 확장 시 원래 패딩으로 */
  }

  /* 드래그 핸들 */
  .lecture-sidebar::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 0 auto 16px;
    cursor: grab;
    flex-shrink: 0;
  }

  /* 스크롤바 숨김 */
  .lecture-sidebar::-webkit-scrollbar {
    display: none;
  }

  .lecture-sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* 사이드바 카드 및 내부 요소 너비 조정 */
  .lecture-sidebar-card {
    width: 100% !important;
    max-width: 600px;
    gap: 8px !important;
    /* 접혀있을 때 카드 내부 간격도 줄임 */
    transition: gap 0.3s;
  }

  .lecture-sidebar.expanded .lecture-sidebar-card {
    gap: 12px !important;
    /* 확장 시 간격 복원 */
  }

  .lecture-sidebar-card .lecture-sidebar-title,
  .lecture-sidebar-header,
  .lecture-sidebar-description,
  .lecture-sidebar-card .purchase-info,
  .lecture-sidebar-card .actions,
  .lecture-sidebar-card .price-section,
  .lecture-sidebar-card .discount-info,
  .lecture-sidebar-card .coupon-section,
  .lecture-anchor,
  .lecture-sidebar-actions,
  .lecture-sidebar-card .actions button,
  .lecture-sidebar-card .purchase-btn,
  .lecture-sidebar-card .cart-btn {
    width: 100% !important;
  }

  .lecture-content {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    /* 중앙 정렬 */
  }

  .lecture-content-list {
    width: 100%;
    max-width: 1000px;
    /* 최대 너비로 가독성 확보 */
    padding: 0 40px;
    /* 좌우 여백 */
  }

  /* 컨텐츠 아이템 중앙 정렬 */
  .lecture-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lecture-content-item-content {
    width: 100%;
    max-width: 800px;
    /* 컨텐츠 최대 너비 */
    margin: 0 auto;
  }

  /* 태블릿에서도 sticky 적용 */
  .student-new .fixedTab.class-detail-tab-section,
  .fixedTab.class-detail-tab-section.class-tab-section,
  section.fixedTab {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 999 !important;
    background: #000 !important;
  }
}

.student-new .class-detail-tab-section {
  margin-top: 42px !important;
  margin-bottom: 60px !important;
}

/* student-new 내에서 fixedTab sticky 속성 유지 */
.student-new .fixedTab.class-detail-tab-section {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 80px !important;
  /* 데스크톱 헤더 높이 */
  z-index: 999 !important;
  /* 사이드바보다 낮지만 충분히 높게 */
  background: #000 !important;
}

.student-new .class-detail-tab-list .class-filter-tab {
  font-size: 18px !important;
  padding-bottom: 16px !important;
}

@media (max-width: 768px) {
  /* 모바일에서 sticky 설정 */
  .student-new .fixedTab.class-detail-tab-section,
  .fixedTab.class-detail-tab-section.class-tab-section,
  section.fixedTab {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 999 !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .student-new .class-detail-tab-section {
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 20px !important;
  }

  .student-new .lecture-content-item-title {
    font-size: 18px;
  }

  .student-new .lecture-content-item-content {
    width: 100%;
  }

  .student-new .lecture-sidebar-card {
    gap: 0px;
  }

  .lecture-sidebar-header .lecture-anchor {
    gap: 0px;
  }

  .lecture-anchor-category,
  .lecture-anchor-title {
    font-size: 13px;
    gap: 0px;
  }

  .lecture-sidebar-card .lecture-sidebar-title {
    font-size: 18px;
  }

  .lecture-sidebar-header .lecture-anchor svg {
    width: 20px;
    height: 20px;
  }

  .lecture-sidebar-card .purchase-info {
    margin-top: 8px;
    gap: 20px !important; /* 40px에서 줄임 */
  }

  .lecture-sidebar-card .actions {
    margin-top: 8px !important;
    gap: 10px !important; /* 16px에서 줄임 */
    height: auto !important; /* 고정 높이 제거 */
  }

  .lecture-sidebar-card {
    gap: 8px !important; /* 12px에서 줄임 */
  }

  .lecture-sidebar {
    position: fixed !important; /* 데스크톱의 sticky를 override */
    top: auto !important; /* sticky top 해제 */
    width: 100%;
    right: 0px;
    bottom: 0px;
    max-height: 90vh; /* 최대 높이 설정 */
    padding: 32px 20px 12px 20px;
    margin-bottom: 0px;
    background: #000;
    border-radius: 24px 24px 0px 0px; /* Figma 디자인: 상단 좌우만 둥글게 */
    z-index: 101;

    /* 바텀시트 기본 상태 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(calc(100% - 140px)); /* 기본: 140px만 보이도록 (더 많이 내림) */
    overflow: hidden !important; /* 데스크톱 overflow-y: auto 강제 덮어쓰기 */

    /* 드래그 방지 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
  }

  /* 바텀시트 펼쳐진 상태 */
  .lecture-sidebar.expanded {
    transform: translateY(0);
    overflow: hidden !important; /* 스크롤 완전 제거 */
  }

  /* 스와이프 인디케이터 (밝은 회색 막대) */
  .lecture-sidebar::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    background: #999999; /* 더 밝은 회색으로 변경 */
    border-radius: 2px;
    z-index: 1;
  }

  /* 스크롤바 완전 숨김 */
  .lecture-sidebar::-webkit-scrollbar {
    display: none;
  }

  .lecture-sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .student-new .price-unit {
    font-size: 16px;
  }

  .student-new .price-amount {
    font-size: 24px;
  }

  .student-new .coupon-dropdown-wrapper {
    margin-top: 0px !important;
  }

  .student-new .class-detail-tab-list .class-filter-tab {
    padding-bottom: 10px !important;
    font-size: 14px !important;
  }
}

/* ========================================
   모바일 구매 모달 스타일 (768px 이하)
   ======================================== */
@media (max-width: 768px) {
  /* 모달 래퍼 - 모바일 화면에 맞게 조정 */
  .purchase-modal-wrapper {
    width: calc(100vw - 32px); /* 좌우 16px 여백 */
    max-width: 420px; /* 최대 너비 제한 */
    height: auto;
    max-height: 85vh; /* 화면 높이의 85% */
  }

  /* 모달 컨텐츠 */
  .purchase-modal-content {
    width: 100%;
    height: auto;
    border-radius: 16px; /* 데스크톱 20px에서 축소 */
  }

  /* 모달 상단 */
  .purchase-modal-top {
    width: 100%;
    height: auto;
    padding: 20px 20px; /* 데스크톱 24px 32px에서 조정 */
    border-radius: 16px 16px 0 0;
  }

  /* 닫기 버튼 헤더 */
  .purchase-modal-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
  }

  .purchase-modal-close {
    width: 24px;
    height: 24px;
  }

  .purchase-modal-close svg {
    width: 24px;
    height: 24px;
  }

  /* 모달 바디 */
  .purchase-modal-body {
    width: 100%;
    height: auto;
    padding: 0 20px; /* 좌우 패딩 */
    gap: 24px; /* 데스크톱 32px에서 축소 */
    margin: 0;
  }

  /* 타이틀 섹션 */
  .purchase-modal-title {
    width: 100%;
    height: auto;
    gap: 20px; /* 데스크톱 32px에서 축소 */
  }

  .purchase-modal-title-content {
    width: 100%;
    height: auto;
    gap: 8px;
  }

  .purchase-modal-title h2 {
    width: 100%;
    height: auto;
    font-size: 20px; /* 데스크톱 28px에서 축소 */
    line-height: 140%;
  }

  .purchase-modal-title p {
    width: 100%;
    height: auto;
    font-size: 14px; /* 데스크톱 18px에서 축소 */
    line-height: 140%;
  }

  /* 구분선 */
  .modal-divider,
  .modal-divider-2 {
    width: 100%;
  }

  /* 수강권 선택 섹션 */
  .purchase-modal-section {
    width: 100%;
    height: auto;
    gap: 12px; /* 데스크톱 16px에서 축소 */
  }

  .purchase-modal-section h3 {
    width: 100%;
    height: auto;
    font-size: 16px; /* 데스크톱 18px에서 축소 */
  }

  /* 기간 옵션 - 한 줄에 배치 */
  .period-options {
    width: 100%;
    gap: 6px; /* 간격 최소화 */
    flex-wrap: nowrap; /* 줄바꿈 금지 - 한 줄에 표시 */
    overflow-x: auto; /* 넘칠 경우 스크롤 */
  }

  .period-option {
    flex: 1 1 auto; /* 균등 분할 */
    min-width: 0; /* flex-shrink 허용 */
  }

  .period-option-content {
    width: 100%;
    height: 44px; /* 높이 축소 */
    padding: 10px 8px; /* 패딩 최소화 */
    border-radius: 6px;
  }

  .period-label {
    width: 100%;
    height: auto;
    font-size: 13px; /* 폰트 축소 */
    white-space: nowrap; /* 텍스트 줄바꿈 금지 */
  }

  /* 옵션 선택 섹션 */
  .options-section {
    width: 100%;
    height: auto;
    gap: 12px; /* 데스크톱 16px에서 축소 */
  }

  .options-header {
    width: 100%;
    height: auto;
    gap: 12px; /* 데스크톱 16px에서 축소 */
  }

  .options-header h3 {
    width: auto;
    height: auto;
    font-size: 16px; /* 데스크톱 18px에서 축소 */
  }

  /* 전체 선택 */
  .select-all-wrapper {
    width: auto;
    height: auto;
    gap: 6px; /* 데스크톱 8px에서 축소 */
  }

  .select-all-checkbox {
    width: 20px; /* 데스크톱 24px에서 축소 */
    height: 20px;
  }

  .select-all-checkbox svg {
    width: 20px;
    height: 20px;
  }

  .select-all-label {
    width: auto;
    height: auto;
    font-size: 14px; /* 데스크톱 16px에서 축소 */
  }

  /* 옵션 리스트 */
  .option-checkboxes {
    width: 100%;
    max-height: 200px; /* 데스크톱 242px에서 축소 */
  }

  /* 옵션 아이템 */
  .option-item {
    width: 100%;
    height: auto;
    min-height: 90px; /* 데스크톱 113px에서 축소 */
    padding: 12px; /* 데스크톱 16px에서 축소 */
    gap: 8px;
  }

  /* 옵션 컨텐츠 */
  .option-content {
    width: 100%;
    height: auto;
    gap: 12px; /* 데스크톱 16px에서 축소 */
  }

  /* 옵션 썸네일 */
  .option-thumbnail {
    width: 70px; /* 데스크톱 81px에서 축소 */
    height: 70px;
    flex-shrink: 0;
  }

  /* 옵션 텍스트 */
  .option-text {
    width: 100%;
    height: auto;
    gap: 4px; /* 데스크톱 6px에서 축소 */
  }

  .option-subtitle {
    width: 100%;
    height: auto;
    font-size: 12px; /* 데스크톱 14px에서 축소 */
  }

  .option-title {
    width: 100%;
    height: auto;
    font-size: 14px; /* 데스크톱 16px에서 축소 */
  }

  /* 체크박스 */
  .option-checkbox {
    width: 20px; /* 데스크톱 24px에서 축소 */
    height: 20px;
    flex-shrink: 0;
  }

  .option-checkbox svg {
    width: 20px;
    height: 20px;
  }

  /* 모달 푸터 */
  .purchase-modal-footer {
    width: 100%;
    height: auto;
    padding: 20px; /* 데스크톱 32px에서 축소 */
    gap: 16px; /* 데스크톱 32px에서 축소 */
    border-radius: 0 0 16px 16px;
    flex-direction: column; /* 모바일에서는 세로 배치 */
    align-items: stretch; /* 전체 너비 사용 */
  }

  /* 가격 정보 */
  .modal-price-info {
    width: 100%;
    height: auto;
    justify-content: flex-start; /* 왼쪽 정렬 */
  }

  .modal-price-wrapper {
    width: max-content; /* 컨텐츠 크기만큼 */
    height: auto;
    align-items: flex-start; /* 왼쪽 정렬 */
    gap: 4px; /* 간격 추가 */
  }

  .modal-price-original {
    width: max-content; /* 컨텐츠 크기만큼 */
    height: auto;
    font-size: 12px; /* 데스크톱 13px에서 축소 */
    text-align: left; /* 왼쪽 정렬 */
  }

  .modal-price-installment {
    width: max-content; /* 컨텐츠 크기만큼 */
    height: auto;
    gap: 6px; /* 데스크톱 8px에서 축소 */
    justify-content: flex-start; /* 왼쪽 정렬 */
  }

  .modal-price-value {
    height: auto;
    font-size: 22px; /* 데스크톱 24px에서 축소 */
  }

  .modal-price-desc {
    width: auto;
    height: auto;
    font-size: 12px; /* 데스크톱 13px에서 축소 */
  }

  /* 액션 버튼 */
  .modal-actions {
    width: 100%;
    height: auto;
    gap: 10px; /* 데스크톱 16px에서 축소 */
    flex-direction: row; /* 가로 배치 유지 */
  }

  .btn-modal-cart,
  .btn-modal-purchase {
    flex: 1 1 auto; /* 동일한 너비로 분할 */
    width: auto;
    height: 46px; /* 데스크톱 48px에서 축소 */
    padding: 12px 16px; /* 데스크톱 12px 32px에서 축소 */
    font-size: 15px; /* 데스크톱 16px에서 축소 */
  }

  .lecture-content {
    z-index: 101;
  }
}

/* ========================================
   오픈 예정 섹션 (BEM)
   ======================================== */

/* 알림 신청 버튼 */
.lecture-notification-btn {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
}

.lecture-notification-btn--disabled {
  background: #191919 !important;
  color: #4B4B4B !important;
  cursor: not-allowed !important;
}

/* 오픈 예정 정보 박스 */
.lecture-upcoming {
  background: #191919;
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 48px;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
}

.lecture-upcoming__icon {
  flex: none;
}

.lecture-upcoming__label {
  flex: 1;
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.lecture-upcoming__date {
  font-family: 'Pretendard';
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  text-align: right;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

/* Frame 203 - 할인 정보 섹션 */
.lecture-discount {
  width: 331px;
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 24px;
}

/* Frame 199 - 할인율 */
.lecture-discount__info:first-child {
  width: 129px;
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 8px;
}

/* Frame 200 - 할인 종료까지 */
.lecture-discount__info:last-child {
  width: 178px;
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 8px;
}

.lecture-discount__label {
  font-family: 'Pretendard';
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #999999;
}

.lecture-discount__value {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

/* Frame 201 - 시계 아이콘 */
.lecture-discount__info svg {
  width: 20px;
  height: 20px;
}