/* ============================================
   FlowLab 교육 — 상담신청 전용 스타일
   Figma [전달용]교육홈페이지 상담신청 프레임(25:4173, 25:4084의 상위집합) 1:1 전사
   (EDU-FIGMA-PORT-2d, 2026-09-22). site.css(토큰·공용 Header/footer) 뒤에 로드한다.
   기준 캔버스 1920 / 컨테이너 1440. 섹션 순서가 다른 페이지와 반대(폼→배너→FAQ)는 Figma 원본 그대로.
   fc- 접두어.
   ============================================ */

*, *::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; }

.fc-container { max-width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 108px 40px; }

/* ---------- section 1 폼 1920×1021 (좌 타이틀 640 + 우 폼 카드 720) ---------- */
.fc-form-sec { display: flex; gap: 0; align-items: flex-start; }
.fc-form-title { flex: 0 0 640px; display: flex; flex-direction: column; gap: 8px; padding: 16px 0; }
.fc-form-title h1 { font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -0.4px; color: var(--fh-ink-1); }
.fc-form-title p { font-size: 20px; font-weight: 500; line-height: 26px; color: var(--fh-ink-2); }

.fc-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 58px; padding: 62px 40px 58px; background: var(--fh-footer); border-radius: 8px; }
.fc-fields { display: flex; flex-direction: column; gap: 28px; }
.fc-row { display: flex; gap: 16px; }
.fc-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fc-label { display: inline-flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 700; color: var(--fh-ink-1); }
.fc-req { font-size: 14px; font-weight: 700; color: #E5507A; }
.fc-input, .fc-select, .fc-textarea {
  width: 100%; padding: 20px 16px; background: #fff; border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--fh-ink-1);
}
.fc-input::placeholder, .fc-textarea::placeholder { color: var(--fh-ink-5); }
.fc-textarea { min-height: 180px; resize: vertical; }
.fc-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpolygon points='10,12 0,0 20,0' fill='%233B3D45'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 7px; cursor: pointer; }

.fc-agree { display: flex; flex-direction: column; gap: 19px; }
.fc-agree-title { font-size: 20px; font-weight: 700; color: var(--fh-ink-1); }
.fc-agree-row { display: flex; align-items: center; gap: 12px; }
.fc-agree-row input[type="checkbox"] { width: 22px; height: 22px; border-radius: 2px; accent-color: var(--fh-ink-1); cursor: pointer; }
.fc-agree-row label { font-size: 14px; font-weight: 400; color: #3B3D45; }
.fc-agree-detail { margin-left: auto; font-size: 14px; color: var(--fh-ink-4); cursor: pointer; }

.fc-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 20px 32px;
  background: var(--fh-black); border: 0; border-radius: 999px; color: #fff;
  font: inherit; font-size: 24px; font-weight: 700; letter-spacing: -0.24px; cursor: pointer;
}
.fc-submit img { width: 16px; height: 16px; }

/* ---------- section 2 배너 1920×598 (전면 #DEEBFF + 원 792 + 이미지) ---------- */
.fc-banner { position: relative; overflow: hidden; background: #DEEBFF; padding-top: 119px; }
.fc-banner-deco { position: absolute; top: 0; left: calc(50% - 16px); width: 792px; height: 792px; border-radius: 50%; background: rgba(255, 255, 255, .6); pointer-events: none; }
.fc-banner-inner { position: relative; max-width: min(var(--container), 100% - 2 * var(--gutter)); min-height: 479px; margin: 0 auto; padding: 52px 40px; display: flex; align-items: center; gap: 80px; }
.fc-banner-title { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 40px 0; }
.fc-banner-title h2 { font-size: 48px; font-weight: 700; line-height: 1.3; letter-spacing: -0.48px; color: var(--fh-black); }
.fc-banner-title p { font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.24px; color: var(--fh-ink-2); }
.fc-banner-img { flex: 0 0 600px; max-width: 100%; height: 375px; border-radius: 24px; background: var(--fh-footer); object-fit: cover; } /* Figma에 사진 없어 자체 생성 SVG(EDU-CONTENT-FILL-1) — background는 SVG 여백색과 동일해 로드 전 깜빡임 방지, .fd-img와 동일 원칙 */

/* ---------- section 3 FAQ 1920×711 ---------- */
.fc-faq-sec { display: flex; flex-direction: column; gap: 40px; }
.fc-faq-sec h2 { font-size: 40px; font-weight: 700; line-height: 52px; letter-spacing: -0.4px; color: var(--fh-ink-1); }
.fc-faq { display: flex; flex-direction: column; }
.fc-qna { padding: 28px 12px; border-bottom: 1px solid var(--fh-line); }
.fc-qna:first-child { border-top: 1px solid var(--fh-line); }
.fc-qna[open] { border-color: var(--fh-ink-1); }
.fc-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); }
.fc-qna summary::-webkit-details-marker { display: none; }
.fc-qna[open] summary { color: #2776FF; }
.fc-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) {
  .fc-form-sec { flex-direction: column; }
  .fc-form-title { flex-basis: auto; }
  .fc-banner-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 1023px) {
  .fc-container { padding: 60px 24px; }
  .fc-row { flex-direction: column; }
  .fc-card { padding: 32px 24px; }
  .fc-banner { padding-top: 0; }
  .fc-banner-deco { display: none; }
  .fc-banner-img { flex-basis: auto; height: auto; aspect-ratio: 16 / 10; }
}