/* ============================================
   FlowLab 교육 — 홈 전용 스타일
   Figma [전달용]교육홈페이지 home 프레임(25:4272) 본문 섹션의 auto-layout 값 1:1 전사
   (EDU-HOME-PORT-1, 2026-09-21). site.css(폰트·--fh-* 토큰·공용 Header/footer·.fh-pill)
   뒤에 로드한다 — 여기엔 홈 본문 섹션과 홈 전용 타이포 스케일만 둔다(EDU-FIGMA-PORT-2a).
   기준 캔버스 1920 / 컨테이너 1440 / 콘텐츠 1360.
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fh-bg); color: var(--fh-ink-1);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- 공통 ---------- */
.fh-container { max-width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 108px 40px; }
.fh-h2 { font-size: 40px; font-weight: 700; line-height: 52px; letter-spacing: -0.4px; color: var(--fh-ink-1); }
.fh-tag {
  display: inline-flex; align-items: center; height: 26px; padding: 4px 12px; border-radius: 999px;
  background: var(--fh-ink-1); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -0.12px; white-space: nowrap;
}
.fh-more { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-3); white-space: nowrap; }
.fh-more img { width: 16px; height: 16px; }

/* ---------- Section 1 썸네일 1920×632 (전면, 좌우 여백 0) ---------- */
.fh-thumbs { display: flex; align-items: center; gap: 12px; } /* 화면 폭 비례 확대는 Figma 원본 의도 — 디자이너 확인(2026-09-26), EDU-WIDE-CAP-1 되돌림 */
.fh-thumb {
  flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 24px; padding-bottom: 56px;
}
.fh-thumb--consult { background: #DEEBFF; }
.fh-thumb--program { background: #FFE1E1; }
.fh-thumb--competition { background: #FFF391; }
.fh-thumb-body { width: 100%; padding: 0 40px; display: flex; flex-direction: column; gap: 24px; }
.fh-thumb-txt { display: flex; flex-direction: column; gap: 8px; }
.fh-thumb-label { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-2); }
.fh-thumb-title { font-size: 40px; font-weight: 700; line-height: 52px; letter-spacing: -0.4px; color: var(--fh-ink-1); }
.fh-thumb-body .fh-pill { align-self: flex-start; }

/* ---------- Section 2 모집 프로그램 1920×723 (좌 타이틀 369 + 우 카드 캐러셀) ---------- */
.fh-programs-inner {
  display: flex; align-items: center; gap: 108px;
  padding: 108px 0 108px max(var(--gutter) + 40px, (100% - var(--container)) / 2 + 40px);
  /* 화면 폭 비례 확대는 Figma 원본 의도 — 디자이너 확인(2026-09-26), EDU-WIDE-CAP-2 되돌림 */
}
.fh-programs-head { flex: 0 0 369px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.fh-programs-sub { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-2); }
.fh-programs-row { display: flex; align-items: center; justify-content: space-between; }
.fh-programs-row .fh-pill { padding: 12px 20px 12px 24px; gap: 8px; }
.fh-page { display: flex; align-items: center; gap: 8px; }
.fh-page img { width: 28px; height: 28px; }
.fh-cards { flex: 1 1 0; min-width: 0; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: thin; }
.fh-card {
  flex: 0 0 432px; height: 507px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 120px;
  padding: 56px 40px; border-radius: 24px; background: var(--fh-card);
}
.fh-card-main { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.fh-card-head { display: flex; flex-direction: column; gap: 12px; }
.fh-card-head .fh-tag { align-self: flex-start; }
.fh-card-title { font-size: 24px; font-weight: 700; letter-spacing: -0.24px; color: var(--fh-ink-1); }
.fh-card-desc { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-2); }
.fh-inform { display: flex; flex-direction: column; gap: 12px; }
.fh-inform-row { display: flex; align-items: center; gap: 16px; }
.fh-inform-key { flex: 0 0 96px; display: flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-2); }
.fh-inform-key img { width: 18px; height: 18px; }
.fh-inform-val { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-1); }

/* ---------- Section 3 로드맵 + 공지/일정 1920×1210 ---------- */
.fh-learn .fh-container { display: flex; flex-direction: column; gap: 80px; }
.fh-roadmap { display: flex; flex-direction: column; gap: 40px; }
.fh-timeline { display: flex; align-items: center; overflow-x: auto; }
.fh-tl-line { flex: 0 1 64px; height: 1.5px; background: var(--fh-ink-1); } /* 선만 shrink 허용 — 콘텐츠 1360(≥1600)에선 무변화 */
.fh-tl-line:first-child, .fh-tl-line:last-child { flex-basis: 44px; }
.fh-level {
  flex: 0 0 270px; width: 270px; height: 270px; border-radius: 9999px; background: var(--fh-ink-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px 32px;
}
.fh-level img { width: 36px; height: 36px; }
.fh-level-txt { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.fh-level-title { font-size: 24px; font-weight: 700; letter-spacing: -0.24px; color: #fff; }
.fh-level-sub { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-line); }

.fh-boards { display: flex; align-items: center; gap: 12px; }
.fh-board {
  height: 552px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 120px;
  padding: 56px 40px; border-radius: 24px;
}
.fh-board--notice { flex: 0 1 896px; background: var(--fh-card); }
.fh-board--schedule { flex: 1 1 452px; min-width: 0; background: var(--fh-card-soft); } /* 1441~1599 콘텐츠 축소 시 두 보드가 비례 shrink — 1360에선 896+12+452 정확히 일치 */
.fh-board-main { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.fh-board-title { font-size: 24px; font-weight: 700; letter-spacing: -0.24px; color: var(--fh-ink-1); }
.fh-rows { display: flex; flex-direction: column; }
.fh-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--fh-line); }
.fh-row-title { flex: 1 1 0; min-width: 0; font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-1); }
.fh-row-date { font-size: 14px; font-weight: 500; letter-spacing: -0.14px; color: var(--fh-ink-4); white-space: nowrap; }
.fh-row--sched { gap: 20px; }
.fh-sched-date { flex: 0 0 98px; display: flex; align-items: center; gap: 4px; font-size: 20px; line-height: 26px; }
.fh-sched-date strong { font-weight: 700; color: var(--fh-ink-1); }
.fh-sched-date span { font-weight: 500; color: var(--fh-ink-2); }

/* ---------- Section 4 CTA 1920×549 ---------- */
.fh-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  padding: 80px 40px 72px; border: 1px solid var(--fh-ink-2); border-radius: 9999px; background: #fff;
}
.fh-cta-title { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.fh-cta-q { display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.24px; color: var(--fh-ink-1); }
.fh-cta-q img { width: 24px; height: 24px; }
.fh-cta-sub { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-2); }
.fh-cta-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 20px 32px;
  border: 1px solid var(--fh-black); border-radius: 999px; background: var(--fh-black);
  color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.24px; white-space: nowrap;
}
.fh-cta-btn img { width: 16px; height: 16px; }

/* ---------- 최소 가드 (Figma에 1920 외 시안 없음 — 깨짐 방지만) ---------- */
@media (max-width: 1439px) {
  .fh-boards { flex-wrap: wrap; }
  .fh-board--notice { flex: 1 1 100%; }
}
@media (max-width: 1023px) {
  .fh-thumbs { flex-wrap: wrap; }
  .fh-thumb { flex: 1 1 100%; }
  .fh-programs-inner { flex-direction: column; align-items: stretch; gap: 40px; padding: 60px 24px; }
  .fh-programs-head { flex-basis: auto; }
  .fh-container { padding: 60px 24px; }
  .fh-board { height: auto; }
}