/* =========================
   기본 레이아웃
========================= */

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden; /* 모바일에서 옆으로 안 밀리게 */
}

body {
  background-color: #404356;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* 상단 타이틀 
header {
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-align: center;
  color: #ffffff;
  margin: 0.5rem 0 1.5rem;
}*/

/* 강의후기 타이틀 */
h2 {
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  text-align: center;
  color: #ffffff;
  margin: 0.5rem 0 1.5rem;
}

/* PC/모바일 전용 토글 기본값 */
.pc-only {
  display: block;
}

.mobile-only {
  display: none !important; /* 🔥 PC에서는 무조건 안 보이게 고정 */
}

/* =========================
   1번: 1920 x 960 (PC 전용 조각 배너)
========================= */

.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #404356; /* 양옆 배경 */
}

/* 1920x960 비율 유지 + 반응형 박스 */
.hero-box {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 960;
  background-color: #404356;
  overflow: hidden;
}

/* 조각 + 영상 공통 설정 */
.hero-piece,
.hero-video {
  position: absolute;
  display: block;
  max-width: none;
}

/* 1_01.png : 상단 전체 (0,0, 1920x520) */
.piece-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* 1_02.png : 중간 띠 왼쪽 (0,520, 372x288) */
.piece-2 {
  top: 54.166667%; /* 520 / 960 * 100 */
  left: 0;
  width: 19.375%; /* 372 / 1920 * 100 */
  height: auto;
}

/* 1_04.png : 중간 띠 오른쪽 (873,520, 1036x288 기준) */
.piece-4 {
  top: 54.166667%; /* 520 / 960 * 100 */
  left: 45.46875%; /* 873 / 1920 * 100 */
  width: 54.5%; /* 살짝 여유 */
  height: auto;
}

/* 1_05.png : 하단 전체 (0,808, 1920x152) */
.piece-5 {
  top: 84.166667%; /* 808 / 960 * 100 */
  left: 0;
  width: 100%;
  height: auto;
}

/* 3번 이미지 대신 들어가는 유튜브 (372,520, 512x288) */
.hero-video {
  top: 54.166667%; /* 520 / 960 * 100 */
  left: 19.375%; /* 372 / 1920 * 100 */
  width: 26.666667%; /* 512 / 1920 * 100 */
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
}

.hero-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================
   1번: 모바일용 배너 + 영상
========================= */

.hero-mobile {
  display: none; /* 기본은 숨김, 모바일에서만 보이게 */
  width: 100%;
  background-color: #404356;
}

.hero-mobile-img {
  width: 100%;
  max-width: 1920px;
  display: block;
  margin: 0 auto;
}

.hero-mobile-video {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.hero-mobile-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================
   2, 3, 4번 이미지 섹션
========================= */

.img-two {
  background-color: #87526b;
}

.img-three {
  background-color: #404356;
}

.img-four {
  background-color: #5faeaf;
  display: flex;
  justify-content: center;
  overflow: hidden; /* 4번 PC이미지 160% 확대 시 튀어나오는 부분 숨김 */
}

/* 공통 이미지 스타일 */
.two,
.three,
.four {
  width: 100%;
  max-width: 1920px;
  display: block;
  margin: 0 auto;
}

/* PC용 4번 이미지만 확대 */
.four.pc-only {
  width: 160%;
  max-width: none; /* 진짜로 160%까지 키우기 */
}

/* 모바일용 4번 이미지는 기본 width:100% 그대로 사용 (위 공통값 적용) */
.four.mobile-only {
  /* width:100%, max-width:1920px, display:none!important (위에서 설정) */
}

/* =========================
   신청 버튼 + 이미지 영역
========================= */

.purchase {
  max-width: 900px;
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  gap: 60px; /* 인강 블록 ↔ 현강 블록 간격 */
  position: relative;
  z-index: 10;
}

/* (옛 구조용, 지금은 거의 안 씀 – 호환용으로만 유지) */
.pur-in,
.pur-hy {
  width: 50%;
  max-width: 960px;
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 10;
}

/* 버튼 + 이미지 묶음 */
.purchase-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* 버튼 ↔ 이미지그룹 간격 */
}

/* 버튼 */
.purchase-btn {
  width: 100%;
  max-width: 600px;
  cursor: pointer;
  display: block;
}

/* 이미지 그룹 */
.purchase-images {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 이미지 사이 간격 */
  width: 100%;
  align-items: center;
}

/* 이미지 */
.purchase-img {
  width: 100%;
  max-width: 600px;
  display: block;
  border-radius: 8px; /* 필요 없으면 삭제 */
}

/* =========================
   강의후기 밑 이미지 슬라이더 (3장 갤러리형)
========================= */

.review-gallery {
  padding: 40px 0 60px;
  background: #404356;
  color: #fff;
}

.review-gallery-title {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 16px;
  font-size: 2.4rem;
  font-weight: 600;
}

/* 슬라이더 전체 컨테이너 */
.review-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 보여지는 영역 */
.slider-window {
  overflow: hidden;
  width: 100%;
}

/* 슬라이드 트랙 */
.slider-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 16px; /* 카드 사이 간격 */
}

/* 한 화면에 3장이 보이도록 설정 (PC 기준) */
.slide {
  flex: 0 0 calc((100% - 32px) / 3); /* (100% - gap*2) / 3 */
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* 슬라이더 좌우 버튼 */
.slider-btn {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.1s ease;
}

/* =========================
   모바일 환경 (<= 768px)
========================= */

@media (max-width: 768px) {
  /* PC용 조각 배너 숨기고, 모바일용 배너 표시 */
  .hero {
    display: none;
  }

  .hero-mobile {
    display: block;
  }

  /* PC 전용 요소 숨기기, 모바일 전용만 보이기 */
  .pc-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  /* 슬라이더는 2장씩 보이게 */
  .slide {
    flex: 0 0 calc((100% - 16px) / 2); /* (100% - gap*1) / 2 */
  }

  /* 신청 영역 폭 조정 */
  .purchase {
    max-width: 95%;
    gap: 40px;
  }

  .purchase-btn,
  .purchase-img {
    max-width: 100%;
  }
}