/* ============================================
   FlowLab 교육 — 교육프로그램 상세 전용 스타일
   Figma [전달용]교육홈페이지 교육프로그램-detail 프레임(25:3812 드론 · 25:3946 바우카) 본문 auto-layout 값 1:1 전사
   (EDU-FIGMA-PORT-2c, 2026-09-22). site.css(토큰·공용 Header/footer) 뒤에 로드한다.
   기준 캔버스 1920 / 컨테이너 1440 / 콘텐츠 1360 (1600 미만은 --gutter 최소 여백, EDU-LAYOUT-GUTTER-1). fd- 접두어.
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
ul { list-style: none; }
img { height: auto; }

/* ---------- 공통 ---------- */
.fd-container { max-width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 108px 40px; }
.fd-h2 { font-size: 40px; font-weight: 700; line-height: 52px; letter-spacing: -0.4px; color: var(--fh-ink-1); }
.fd-desc { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.24px; color: var(--fh-ink-2); }
.fd-head { display: flex; flex-direction: column; gap: 16px; }
.fd-tags { display: flex; align-items: center; gap: 16px; }
.fd-tag {
  display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px;
  background: var(--fh-card); color: #2776FF; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; white-space: nowrap;
}
.fd-tag--dark { background: var(--fh-ink-1); color: #fff; }

/* ---------- 히어로 section 1920×696 (이미지 박스 640×480 + 태그·제목·부제·CTA) ---------- */
.fd-hero { display: flex; align-items: center; gap: 80px; }
.fd-img { flex: 0 0 640px; max-width: 100%; height: 480px; border-radius: 24px; background: var(--fh-footer); object-fit: cover; } /* Figma에 사진 없어 자체 생성 SVG(EDU-CONTENT-FILL-1) — background는 SVG 여백색과 동일해 로드 전 깜빡임 방지 */
.fd-hero-body { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 120px; padding: 8px 0; }
.fd-title { font-size: 48px; font-weight: 700; line-height: 1.3; letter-spacing: -0.48px; color: var(--fh-black); }
.fd-tagline { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.24px; color: var(--fh-ink-2); }
.fd-cta { display: flex; flex-direction: column; gap: 20px; }
.fd-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 20px 40px;
  border: 1px solid var(--fh-ink-2); border-radius: 999px; background: #fff;
  color: var(--fh-ink-1); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.24px; white-space: nowrap;
}
.fd-btn--primary { border-color: var(--fh-black); background: var(--fh-black); color: #fff; box-shadow: 0 6px 16px rgba(46, 47, 49, .32); }
.fd-btn img { width: 24px; height: 24px; }

/* ---------- 본문 section (container 상단 1px 선 · 탭 · 소개 · 주요 정보 · 커리큘럼 · FAQ, 블록 간 120) ---------- */
.fd-main .fd-container { border-top: 1px solid var(--fh-line); display: flex; flex-direction: column; gap: 120px; }
.fd-intro { display: flex; flex-direction: column; gap: 80px; }
.fd-tabs { display: flex; align-items: center; }
.fd-tab { padding: 12px 24px; border-bottom: 1px solid var(--fh-line); font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: var(--fh-black); white-space: nowrap; }
.fd-tab.active { font-weight: 700; border-bottom-color: var(--fh-ink-2); }
.fd-summary { display: flex; flex-direction: column; gap: 48px; }

.fd-info { display: flex; flex-direction: column; gap: 24px; padding: 40px 52px; border-radius: 8px; background: var(--fh-footer); }
.fd-info-title { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.24px; color: var(--fh-ink-1); }
.fd-info-rows { display: flex; flex-direction: column; gap: 16px; }
.fd-info-row { display: flex; align-items: center; gap: 24px; }
.fd-info-key { flex: 0 0 96px; display: flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: var(--fh-ink-2); white-space: nowrap; }
.fd-info-key img { width: 18px; height: 18px; }
.fd-info-val { flex: 1 1 0; min-width: 0; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.24px; color: var(--fh-ink-1); }

/* ---------- 커리큘럼 (주차 칼럼 440 + 상세 패널) · FAQ ---------- */
.fd-section { display: flex; flex-direction: column; gap: 48px; }
.fd-curr { display: flex; align-items: stretch; gap: 16px; }
.fd-weeks { flex: 0 0 440px; display: flex; flex-direction: column; gap: 8px; }
.fd-week { display: flex; flex-direction: column; gap: 16px; padding: 40px; border-radius: 8px; background: var(--fh-footer); }
.fd-week.active { background: #F1F7FF; }
.fd-week-label { font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: var(--fh-ink-2); }
.fd-week-title { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.24px; color: var(--fh-ink-1); }
.fd-week.active .fd-week-title { font-weight: 700; }
.fd-panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; padding: 40px 52px; border-radius: 8px; background: #F1F7FF; }
.fd-panel-head { display: flex; flex-direction: column; gap: 12px; }
.fd-panel-title { font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.384px; color: var(--fh-ink-1); }
.fd-acts { display: flex; flex-direction: column; gap: 16px; }
.fd-act { display: flex; align-items: center; gap: 24px; }
.fd-act-no { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: var(--fh-ink-4); white-space: nowrap; }
.fd-act-no::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--fh-ink-4); }

.fd-faq { display: flex; flex-direction: column; }
.fd-qna { padding: 28px 12px; border-bottom: 1px solid var(--fh-line); }
.fd-qna:first-child { border-top: 1px solid var(--fh-line); }
.fd-qna[open] { border-color: var(--fh-ink-1); }
.fd-qna summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.2px; color: var(--fh-ink-1); }
.fd-qna summary::-webkit-details-marker { display: none; }
.fd-qna[open] summary { color: #2776FF; }
.fd-qna-a { margin-top: 44px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.18px; color: var(--fh-ink-3); }

/* ---------- 최소 가드 (Figma에 1920 외 시안 없음 — 깨짐 방지만) ---------- */
@media (max-width: 1439px) {
  .fd-curr { flex-direction: column; }
  .fd-weeks { flex-basis: auto; }
}
@media (max-width: 1023px) {
  .fd-container { padding: 60px 24px; }
  .fd-hero { flex-direction: column; align-items: stretch; gap: 40px; }
  .fd-img { flex-basis: auto; height: auto; aspect-ratio: 4 / 3; }
  .fd-hero-body { gap: 40px; }
  .fd-title { font-size: 32px; }
  .fd-tabs { flex-wrap: wrap; }
  .fd-info, .fd-panel { padding: 24px; }
  .fd-week { padding: 24px; }
}