/* ============================================================
   page-sirocco-fan-cost.css
   시로코팬 교체 비용 — 비용 구성 항목 매트릭스표 페이지 전용 스타일
   Title: Black Han Sans / Body: Noto Sans KR 400
   Layout signature: 3 요약 카드 + 비용 구성 항목 매트릭스표
   Animation: hover only (scroll-reveal 미사용)
   ============================================================ */

:root {
  --cta-primary: #0F766E;
  --cta-secondary: #F0FDFA;
  --sfc-ink: #134E4A;
  --sfc-deep: #0F766E;
  --sfc-line: #99F6E4;
  --sfc-r-sm: 10px;
  --sfc-r-md: 20px;
  --sfc-r-lg: 28px;
  --sfc-pad-y: 56px;
}

body { font-family: 'Noto Sans KR', -apple-system, sans-serif; font-weight: 400; background: #F0FDFA; color: var(--sfc-ink); }
h1, h2, h3 { font-family: 'Black Han Sans', sans-serif; font-weight: 400; color: var(--sfc-deep); letter-spacing: -.01em; }

/* ---- divider: solid line with rotated square tick (distinct shape) ---- */
.sfc-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sfc-pad-y); max-width: 1080px; padding: 0 20px; margin-left: auto; margin-right: auto; }
.sfc-divider::before,
.sfc-divider::after { content: ""; flex: 1; height: 2px; background: var(--sfc-line); }
.sfc-divider span { width: 12px; height: 12px; background: var(--sfc-deep); transform: rotate(45deg); flex-shrink: 0; border-radius: 3px; }

/* ---- intro ---- */
.sfc-intro { max-width: 860px; margin: 0 auto; padding: 52px 20px 36px; text-align: center; }
.sfc-intro__eyebrow { color: var(--sfc-deep); font-weight: 700; font-size: .92rem; letter-spacing: .08em; margin-bottom: 12px; }
.sfc-intro h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin-bottom: 20px; }
.sfc-intro p { color: #115E59; line-height: 1.85; }

/* ---- section shell ---- */
.sfc-section { max-width: 1080px; margin: 0 auto; padding: 0 20px var(--sfc-pad-y); }
.sfc-section h2 { font-size: 1.45rem; margin-bottom: 24px; padding: 8px 18px; background: #fff; border-radius: var(--sfc-r-sm); display: inline-block; box-shadow: inset 4px 0 0 var(--cta-primary); }
.sfc-section p { margin-bottom: 14px; line-height: 1.85; color: #115E59; }

/* ---- 3 summary cards ---- */
.sfc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sfc-card {
  background: #fff; border-radius: var(--sfc-r-md); padding: 24px 22px;
  border: 1px solid var(--sfc-line); transition: transform .18s ease, box-shadow .18s ease;
}
.sfc-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(15,118,110,.16); }
.sfc-card__tag {
  display: inline-block; background: var(--cta-secondary); color: var(--sfc-deep);
  font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.sfc-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.sfc-card p { margin-bottom: 0; font-size: .92rem; color: #0F766E; }

@media (max-width: 760px) {
  .sfc-cards { grid-template-columns: 1fr; }
}

/* ---- cost-composition matrix table (signature) ---- */
.sfc-table-wrap { overflow-x: auto; border-radius: var(--sfc-r-lg) var(--sfc-r-sm); border: 2px solid var(--sfc-deep); background: #fff; }
.sfc-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.sfc-table th, .sfc-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--sfc-line); }
.sfc-table thead th { background: var(--sfc-deep); color: #F0FDFA; font-weight: 700; }
.sfc-table tbody th { background: var(--cta-secondary); color: var(--sfc-deep); font-weight: 700; white-space: nowrap; }
.sfc-table tbody tr:last-child td, .sfc-table tbody tr:last-child th { border-bottom: none; }
.sfc-table tbody tr:hover td, .sfc-table tbody tr:hover th { background: #CCFBF1; }
.sfc-note { font-size: .85rem; color: var(--sfc-deep); margin-top: 12px; }

/* ---- 견적 산출 절차 (ordered steps) ---- */
.sfc-steps { counter-reset: sfc-step; list-style: none; margin: 0 0 16px; }
.sfc-steps li {
  position: relative; padding: 4px 0 20px 46px; margin-bottom: 0;
  border-left: 2px solid var(--sfc-line); color: #115E59; line-height: 1.8;
}
.sfc-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.sfc-steps li::before {
  counter-increment: sfc-step; content: counter(sfc-step);
  position: absolute; left: -17px; top: 4px; width: 30px; height: 30px;
  border-radius: var(--sfc-r-sm); background: var(--sfc-deep); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700;
}
.sfc-steps li strong { color: var(--sfc-deep); }

/* ---- 업체 선정 체크리스트 카드 ---- */
.sfc-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sfc-check {
  display: flex; gap: 14px; background: #fff; border-radius: var(--sfc-r-md);
  padding: 20px; border: 1px solid var(--sfc-line); transition: transform .18s ease, box-shadow .18s ease;
}
.sfc-check:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(15,118,110,.14); }
.sfc-check svg { flex-shrink: 0; color: var(--cta-primary); margin-top: 2px; }
.sfc-check h3 { font-size: 1rem; margin-bottom: 6px; }
.sfc-check p { margin-bottom: 0; font-size: .9rem; color: #0F766E; }

@media (max-width: 760px) {
  .sfc-checklist { grid-template-columns: 1fr; }
}

/* ---- misconception accordion (details/summary) ---- */
.sfc-faq { display: flex; flex-direction: column; gap: 10px; }
.sfc-faq details { border: 1px solid var(--sfc-line); border-radius: var(--sfc-r-sm); padding: 4px 18px; background: #fff; transition: box-shadow .18s ease; }
.sfc-faq details:hover { box-shadow: 0 6px 16px rgba(15,118,110,.12); }
.sfc-faq summary { padding: 14px 0; font-weight: 700; color: var(--sfc-deep); font-size: 1rem; position: relative; padding-right: 28px; }
.sfc-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.3rem; color: var(--cta-primary); font-weight: 400;
}
.sfc-faq details[open] summary::after { content: "\2212"; }
.sfc-faq .sfc-faq-a { padding: 0 0 16px; color: #115E59; line-height: 1.8; }

/* ---- exactly one animation type on this page: CSS-only hover (no scroll-reveal) ---- */
@media (prefers-reduced-motion: reduce) {
  .sfc-card, .sfc-check, .sfc-faq details { transition: none; }
}

@media (max-width: 480px) {
  .sfc-section h2 { font-size: 1.2rem; }
  .sfc-card, .sfc-check { padding: 18px; }
}

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