/* ============================================================
   page-hood-sirocco-fan.css
   후드 시로코팬 교체 — 후드-팬 연결부 단면도 + 매칭/그리스/청소 접근성
   Title: Do Hyeon / Body: Nanum Gothic 400/700
   Layout signature: 상단 대형 단면도 + 하단 2단 콘텐츠(가이드+용어사전)
   ============================================================ */

:root {
  --cta-primary: #DC2626;
  --cta-secondary: #FEF2F2;
  --hsf-ink: #7F1D1D;
  --hsf-accent: #DC2626;
  --hsf-line: #FCA5A5;
  --hsf-r: 22px;
  --hsf-pad-y: 60px;
}

body { font-family: 'Nanum Gothic', -apple-system, sans-serif; font-weight: 400; background: #fff; color: #450A0A; }
h1, h2, h3 { font-family: 'Do Hyeon', sans-serif; font-weight: 400; color: var(--hsf-ink); letter-spacing: -.01em; }

/* ---- divider: solid bar with offset square tick (page-specific, distinct from other pages) ---- */
.hsf-divider { position: relative; height: 3px; background: var(--hsf-line); margin: 0 0 var(--hsf-pad-y); }
.hsf-divider span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
  width: 14px; height: 14px; background: var(--cta-primary); border-radius: 3px;
}

/* ---- intro ---- */
.hsf-intro { max-width: 820px; margin: 0 auto; padding: 52px 20px 36px; text-align: center; }
.hsf-intro__eyebrow { color: var(--hsf-accent); font-weight: 700; font-size: .9rem; letter-spacing: .05em; margin-bottom: 8px; }
.hsf-intro h1 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); margin-bottom: 16px; }
.hsf-intro p { line-height: 1.85; color: #450A0A; }

/* ---- section shell ---- */
.hsf-section { max-width: 1080px; margin: 0 auto; padding: 0 20px var(--hsf-pad-y); }
.hsf-section h2 {
  font-size: 1.45rem; margin-bottom: 24px; padding: 8px 18px;
  background: var(--cta-secondary); border-radius: var(--hsf-r) 4px; display: inline-block;
}
.hsf-section p { margin-bottom: 14px; line-height: 1.9; }
.hsf-section ul { margin: 0 0 14px; list-style: none; }

/* ---- diagram ---- */
.hsf-diagram-section { max-width: 1080px; }
.hsf-diagram-wrap {
  background: #fff; border: 2px solid var(--hsf-line); border-radius: var(--hsf-r);
  padding: 12px; overflow-x: auto;
}
.hsf-diagram { width: 100%; height: auto; min-width: 560px; display: block; }
.hsf-diagram-summary { margin-top: 16px; line-height: 1.85; color: #450A0A; }

/* ---- guide + glossary two-column layout ---- */
.hsf-layout { display: grid; grid-template-columns: 1fr minmax(260px, 320px); gap: 36px; align-items: start; }
.hsf-glossary {
  position: sticky; top: 90px; background: var(--cta-secondary);
  border-radius: 4px var(--hsf-r) 4px var(--hsf-r); padding: 22px 24px;
}
.hsf-glossary h3 { font-size: 1rem; margin: 0 0 14px; color: var(--hsf-accent); }
.hsf-glossary dl { border-top: 1px solid var(--hsf-line); }
.hsf-glossary dt { padding-top: 12px; font-weight: 700; color: var(--hsf-ink); font-size: .95rem; }
.hsf-glossary dd { margin: 3px 0 0; padding-bottom: 3px; color: #7F1D1D; font-size: .87rem; line-height: 1.65; }

@media (max-width: 860px) {
  .hsf-layout { grid-template-columns: 1fr; }
  .hsf-glossary { position: static; top: auto; }
}

/* ---- checklist cards ---- */
.hsf-checklist { display: flex; flex-direction: column; gap: 12px; }
.hsf-checklist li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--cta-secondary); border-radius: var(--hsf-r) 4px;
  padding: 16px 18px; border: 1px solid var(--hsf-line);
}
.hsf-checklist svg { flex-shrink: 0; margin-top: 3px; }
.hsf-checklist strong { display: block; color: var(--hsf-ink); margin-bottom: 4px; }
.hsf-checklist p { margin: 0; font-size: .92rem; color: #7F1D1D; line-height: 1.7; }

/* ---- misconception accordion ---- */
.hsf-faq { display: flex; flex-direction: column; gap: 10px; }
.hsf-faq details { border: 1px solid var(--hsf-line); border-radius: 4px var(--hsf-r); padding: 4px 18px; background: #fff; }
.hsf-faq summary { padding: 14px 0; font-weight: 700; color: var(--hsf-ink); font-size: 1rem; position: relative; padding-right: 28px; }
.hsf-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.3rem; color: var(--cta-primary); font-weight: 400;
}
.hsf-faq details[open] summary::after { content: "\2212"; }
.hsf-faq .hsf-faq-a { padding: 0 0 16px; color: #7F1D1D; line-height: 1.85; }

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

@media (max-width: 480px) {
  .hsf-section h2 { font-size: 1.2rem; }
  .hsf-glossary { padding: 18px; }
}

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