/* 교육 프로그램 상세 페이지(program_detail) 스타일.
   Figma node 429:443 (Hero)를 이식한다. 본문(커리큘럼/FAQ 등)은 후속 작업. */

.program-detail-page {
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.pd-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -2rem;
  background-color: #e8efff;
  overflow: hidden;
}

.pd-hero-bg {
  position: absolute;
  left: 50%;
  top: calc(50% - 26px);
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%);
  mix-blend-mode: color-burn;
  opacity: 0.3;
  pointer-events: none;
}

.pd-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 90px 24px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.pd-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 63px;
  flex-shrink: 0;
}

.pd-hero-heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pd-hero-title {
  font-size: 46px;
  font-weight: 700;
  line-height: 52px;
  color: #1b1b1b;
  margin: 0;
}

.pd-hero-subtitle {
  font-size: 20px;
  font-weight: 500;
  line-height: 37px;
  color: #1b1b1b;
  opacity: 0.7;
  margin: 0;
}

/* ── Stats ────────────────────────────────────────────────────── */
.pd-hero-stats {
  display: flex;
  align-items: center;
}

.pd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 82px;
  padding: 0 30px;
  border-left: 1px solid rgba(89, 56, 255, 0.5);
}

.pd-stat:first-child {
  padding-left: 0;
  border-left: none;
}

.pd-stat-icon {
  width: 21px;
  height: 21px;
}

.pd-stat-label {
  font-size: 15px;
  font-weight: 600;
  color: #2a2a2a;
  opacity: 0.6;
  white-space: nowrap;
}

.pd-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #5544cf;
  white-space: nowrap;
}

/* ── CTA 버튼 ─────────────────────────────────────────────────── */
.pd-hero-actions {
  display: flex;
  gap: 22px;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.pd-btn--primary {
  background-color: #5544cf;
  color: #ffffff;
}
.pd-btn--primary:hover { opacity: 0.9; }

.pd-btn--outline {
  border: 1px solid rgba(85, 68, 207, 0.33);
  color: rgba(85, 68, 207, 0.9);
  padding: 18px 33px 20px;
}
.pd-btn--outline:hover { border-color: rgba(85, 68, 207, 0.6); }

/* ── 일러스트 ─────────────────────────────────────────────────── */
.pd-hero-illust {
  position: relative;
  width: 531px;
  height: 401px;
  flex-shrink: 0;
}

.pd-hero-illust-main {
  position: absolute;
  left: 100px;
  top: 45px;
  width: 365px;
  height: 313px;
  object-fit: contain;
  /* box-shadow는 이미지의 사각형 경계 기준으로 그려져 투명 배경에 네모 박스가 보인다.
     원본 Figma 그림자는 알파를 따라가므로 drop-shadow 필터로 대체한다. */
  filter: drop-shadow(10px 27px 50px rgba(55, 69, 221, 0.5));
}

.pd-hero-blob1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 199px;
  height: 188px;
}

.pd-hero-blob2 {
  position: absolute;
  left: 420px;
  top: 20px;
  width: 111px;
  height: 110px;
}

.pd-hero-sparkle {
  position: absolute;
  left: 370px;
  top: 256px;
  width: 156px;
  height: 145px;
}

/* ── 본문(program.content 마크다운) ──────────────────────────────
   Hero와 동일한 1440px 컨텐츠 폭 기준. 섹션별 스타일링은 후속 작업. */
.pd-body {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 24px 100px;
}

/* ── 모바일 반응형 ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pd-body { padding: 40px 24px 60px; }
  .pd-hero-inner { flex-direction: column; align-items: flex-start; padding: 60px 24px; gap: 40px; }
  .pd-hero-content { gap: 40px; }
  .pd-hero-title { font-size: 32px; line-height: 40px; }
  .pd-hero-subtitle { font-size: 17px; line-height: 28px; }
  .pd-hero-stats { flex-wrap: wrap; row-gap: 16px; }
  .pd-stat { align-items: flex-start; height: auto; padding: 0 20px 0 0; }
  .pd-hero-actions { flex-direction: column; width: 100%; }
  .pd-btn { width: 100%; }
}