/* ============================================================
   page-ceiling-sirocco-fan.css — 천장형 시로코팬 교체
   Title/Body: Nanum Gothic 800/400
   Layout signature: 천장 속 설치 공간 수직 단면도 + 구조 비교 + 반입 체크리스트/시나리오
   ============================================================ */

:root {
  --cta-primary: #292524;
  --cta-secondary: #FAFAF9;
  --csf-line: #A8A29E;
  --csf-r-sm: 6px;
  --csf-r-md: 16px;
  --csf-r-lg: 28px;
  --csf-pad-y: 60px;
}

body { font-family: 'Nanum Gothic', sans-serif; font-weight: 400; background: #FAFAF9; color: #292524; }
h1, h2, h3 { font-family: 'Nanum Gothic', sans-serif; font-weight: 800; letter-spacing: -.01em; color: #292524; }

.csf-divider { display: block; width: 44px; height: 3px; background: var(--csf-line); border-radius: 3px; margin: 0 auto 22px; }

/* ---- hero ---- */
.csf-hero { max-width: 800px; margin: 0 auto; padding: 52px 20px 8px; text-align: center; }
.csf-hero h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); margin-bottom: 16px; }
.csf-hero p { color: #44403C; line-height: 1.85; font-size: 1rem; }

/* ---- generic section shell ---- */
.csf-section { max-width: 980px; margin: 0 auto; padding: var(--csf-pad-y) 20px 0; text-align: center; }
.csf-section h2 { font-size: 1.35rem; margin-bottom: 10px; }
.csf-lead { max-width: 720px; margin: 0 auto 26px; color: #44403C; line-height: 1.8; }
.csf-section > p:not(.csf-lead) { max-width: 760px; margin: 18px auto 0; text-align: left; line-height: 1.85; color: #44403C; }
.csf-note {
  max-width: 760px; margin: 18px auto 0; text-align: left; font-size: .92rem;
  color: #44403C; background: #F5F5F4; border: 1px solid #E7E5E4;
  border-radius: var(--csf-r-sm); padding: 14px 18px;
}

/* ---- signature diagram ---- */
.csf-diagram-wrap { max-width: 420px; margin: 0 auto; }
.csf-svg { width: 100%; height: auto; background: #FFFFFF; border: 1px solid #E7E5E4; border-radius: var(--csf-r-md); padding: 10px; }
.csf-diagram-summary { margin-top: 16px; text-align: left; color: #44403C; line-height: 1.85; font-size: .95rem; }

/* ---- compare (천장형 vs 인라인형) ---- */
.csf-compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 8px; }
.csf-compare-card {
  text-align: left; background: #FFFFFF; border: 1px solid #E7E5E4; border-radius: var(--csf-r-lg);
  padding: 24px 22px;
}
.csf-compare-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.csf-compare-card p { color: #44403C; line-height: 1.8; font-size: .95rem; }
.csf-vs {
  align-self: center; font-weight: 800; color: #A8A29E; font-size: .95rem;
  border: 2px solid #E7E5E4; border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- checklist cards (반입 동선) ---- */
.csf-check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; text-align: left; }
.csf-check-card {
  display: flex; gap: 12px; background: #FFFFFF; border: 1px solid #E7E5E4;
  border-radius: var(--csf-r-md); padding: 18px;
}
.csf-check-card svg { flex-shrink: 0; margin-top: 2px; }
.csf-check-card h3 { font-size: .98rem; margin-bottom: 6px; }
.csf-check-card p { color: #44403C; line-height: 1.7; font-size: .88rem; }

/* ---- scenario cards (분할 반입) ---- */
.csf-scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; text-align: left; }
.csf-scenario-card {
  background: #292524; color: #F5F5F4; border-radius: var(--csf-r-md); padding: 20px;
}
.csf-scenario-card h3 { font-size: .98rem; margin-bottom: 8px; color: #FAFAF9; }
.csf-scenario-card p { color: #D6D3D1; line-height: 1.75; font-size: .88rem; }

/* ---- exactly one animation type on this page: CSS-only scroll reveal ---- */
.csf-hero, .csf-section, .csf-check-card, .csf-scenario-card {
  animation: csf-reveal .5s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}
@keyframes csf-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .csf-hero, .csf-section, .csf-check-card, .csf-scenario-card { animation: none; }
}

@media (max-width: 720px) {
  .csf-scenario-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .csf-compare-grid { grid-template-columns: 1fr; }
  .csf-vs { margin: 0 auto; }
  .csf-check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .csf-section h2 { font-size: 1.2rem; }
  .csf-svg { padding: 6px; }
}