/* ============================================================
   page-sirocco-fan-method.css
   시로코팬 교체 방법 — 실측→철거→가대→설치→결선→시운전 6단계 절차 페이지
   Title: Gothic A1 800 / Body: Gothic A1 400
   Layout signature: 상단 6단계 진행 스트립 + 전체 폭 스텝 카드(큰 넘버 배지)
   ============================================================ */

:root {
  --cta-primary: #0C4A6E;
  --cta-secondary: #F0F9FF;
  --sfm-ink: #0C4A6E;
  --sfm-accent: #0EA5E9;
  /* darker readable variant of --sfm-accent, used for TEXT/icons only:
     #0EA5E9 on white/#F0F9FF measures ~2.6-2.8:1 (fails the 4.5:1 text rule),
     #0369A1 measures ~5.6-5.9:1, so text/icons use this instead of the raw accent. */
  --sfm-accent-text: #0369A1;
  --sfm-bg: #F0F9FF;
  --sfm-line: #BAE6FD;
  --sfm-warn-bg: #F8FAFC;
  --sfm-r: 14px 2px;
  --sfm-pad-y: 60px;
}

body { font-family: 'Gothic A1', -apple-system, sans-serif; font-weight: 400; background: #fff; color: #1E293B; }
h1, h2, h3 { font-family: 'Gothic A1', sans-serif; font-weight: 800; color: var(--sfm-ink); letter-spacing: -.01em; }

/* ---- divider: solid rule with square tick (distinct from sibling pages' dashed/dot dividers) ---- */
.sfm-divider { display: flex; align-items: center; gap: 12px; max-width: 1080px; margin: 0 auto var(--sfm-pad-y); padding: 0 20px; }
.sfm-divider::before,
.sfm-divider::after { content: ""; flex: 1; height: 3px; background: var(--sfm-line); }
.sfm-divider span { width: 12px; height: 12px; background: var(--sfm-accent); flex-shrink: 0; }

/* ---- intro ---- */
.sfm-intro { max-width: 860px; margin: 0 auto; padding: 52px 20px 36px; text-align: center; }
.sfm-intro__eyebrow { color: var(--sfm-accent-text); font-weight: 800; font-size: .9rem; letter-spacing: .06em; margin-bottom: 10px; }
.sfm-intro h1 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); margin-bottom: 18px; }
.sfm-intro p { color: #334155; line-height: 1.85; }

/* ---- progress strip: 01~06 anchor nav (signature element) ---- */
.sfm-progress { background: var(--sfm-bg); border-top: 1px solid var(--sfm-line); border-bottom: 1px solid var(--sfm-line); padding: 18px 20px; margin-bottom: var(--sfm-pad-y); }
.sfm-progress__list { list-style: none; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; }
.sfm-progress__list a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; color: var(--sfm-ink); }
.sfm-progress__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sfm-ink); color: #fff; font-size: .72rem; font-weight: 800; flex-shrink: 0; }
.sfm-progress__list a:hover { background: #fff; }

/* ---- full-width step sections ---- */
.sfm-step { padding: 0 20px 44px; }
.sfm-step:nth-child(even) { background: var(--sfm-bg); }
.sfm-step__inner { max-width: 1080px; margin: 0 auto; padding-top: 44px; display: grid; grid-template-columns: auto 1fr; gap: 28px; }
.sfm-step__num {
  font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 800; line-height: 1;
  color: var(--sfm-accent); opacity: .35; font-family: 'Gothic A1', sans-serif;
}
.sfm-step__body h2 { font-size: 1.4rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 3px solid var(--sfm-ink); display: inline-block; }
.sfm-step__block { margin-bottom: 16px; padding: 16px 18px; border-radius: var(--sfm-r); background: var(--sfm-bg); }
.sfm-step__block h3 { font-size: .95rem; margin-bottom: 8px; color: var(--sfm-accent-text); }
.sfm-step__block p { color: #334155; line-height: 1.85; margin: 0; }
.sfm-step__block--warn { background: var(--sfm-warn-bg); border-left: 4px solid #F97316; }
.sfm-step__block--warn h3 { color: #C2410C; }

@media (max-width: 560px) {
  .sfm-step__inner { grid-template-columns: 1fr; gap: 8px; }
  .sfm-step__num { font-size: 2.2rem; opacity: .5; }
}

/* ---- checklist cards ---- */
.sfm-checklist { max-width: 1080px; margin: 0 auto; padding: 0 20px var(--sfm-pad-y); }
.sfm-checklist h2 { font-size: 1.5rem; margin-bottom: 14px; }
.sfm-checklist > p { color: #334155; line-height: 1.85; margin-bottom: 22px; }
.sfm-checklist__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sfm-checklist__grid li {
  display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px;
  background: var(--sfm-bg); border: 1px solid var(--sfm-line); border-radius: var(--sfm-r);
  font-size: .92rem; color: var(--sfm-ink); font-weight: 500; line-height: 1.6;
}
.sfm-checklist__icon { color: var(--sfm-accent-text); flex-shrink: 0; margin-top: 2px; }

/* ---- glossary (definition list) ---- */
.sfm-glossary-section { max-width: 860px; margin: 0 auto; padding: 0 20px var(--sfm-pad-y); }
.sfm-glossary-section h2 { font-size: 1.5rem; margin-bottom: 20px; }
.sfm-glossary-section > p { color: #334155; line-height: 1.85; margin-top: 18px; }
.sfm-glossary { border-top: 1px solid var(--sfm-line); }
.sfm-glossary dt { padding-top: 14px; font-weight: 800; color: var(--sfm-ink); font-size: 1rem; }
.sfm-glossary dd { margin: 4px 0 0; padding-bottom: 4px; color: #475569; font-size: .92rem; line-height: 1.7; }

/* ---- misconception accordion (details/summary) ---- */
.sfm-faq-section { max-width: 1080px; margin: 0 auto; padding: 0 20px var(--sfm-pad-y); }
.sfm-faq-section h2 { font-size: 1.5rem; margin-bottom: 20px; }
.sfm-faq { display: flex; flex-direction: column; gap: 10px; }
.sfm-faq details { border: 1px solid var(--sfm-line); border-radius: var(--sfm-r); padding: 4px 18px; background: #fff; }
.sfm-faq summary { padding: 14px 0; font-weight: 700; color: var(--sfm-ink); font-size: 1rem; position: relative; padding-right: 28px; }
.sfm-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.3rem; color: var(--sfm-accent-text); font-weight: 400; }
.sfm-faq details[open] summary::after { content: "\2212"; }
.sfm-faq .sfm-faq-a { padding: 0 0 16px; color: #334155; line-height: 1.8; }

/* ---- exactly one animation type on this page: CSS-only scroll reveal ---- */
.sfm-step,
.sfm-checklist__grid li,
.sfm-glossary-section,
.sfm-faq details {
  animation: sfm-reveal .55s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}
@keyframes sfm-reveal {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sfm-step, .sfm-checklist__grid li, .sfm-glossary-section, .sfm-faq details { animation: none; }
}

@media (max-width: 480px) {
  .sfm-step__body h2 { font-size: 1.2rem; }
  .sfm-progress__list a { padding: 7px 10px; font-size: .8rem; }
}

/* ---- CTA contrast fix ----
   base.css paints .btn-call/.btn-sms straight off --cta-primary. At the
   #0EA5E9 value this page's design calls for, white-on-#0EA5E9 (and
   #0EA5E9-on-white) only measures ~2.8:1, under the 4.5:1 text minimum.
   --cta-primary/--cta-secondary stay set as specified; only the rendered
   button colors are swapped for the darker, still-on-brand accent-text blue. */
.btn-call { background: var(--sfm-accent-text); }
.btn-sms { color: var(--sfm-accent-text); border-color: var(--sfm-accent-text); }

/* ---- site photo: 4:3 crop (요청 반영) ---- */
.photo-row img { aspect-ratio: 4 / 3; }