/* ============================================================
   page-fan-type-comparison.css
   팬 형식별 스펙 비교 — 4형식 비교표 + 구조 설명 + 체크리스트 + FAQ
   Title: IBM Plex Sans KR 700 / Body: IBM Plex Sans KR 400
   Layout signature: 넓은 비교표 중심 + 체크카드 3열 + 용어 목록
   Animation: hover only (no scroll-reveal on this page)
   ============================================================ */

:root {
  --cta-primary: #9A3412;
  --cta-secondary: #FAF7F2;
  --ftc-accent: #C2410C;
  --ftc-ink: #431407;
  --ftc-line: #E7D5C4;
  --ftc-r-sm: 6px;
  --ftc-r-md: 14px;
  --ftc-r-lg: 26px 6px;
  --ftc-pad-y: 60px;
}

body { font-family: 'IBM Plex Sans KR', -apple-system, sans-serif; font-weight: 400; background: #FAF7F2; color: var(--ftc-ink); }
h1, h2, h3 { font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 700; color: var(--ftc-ink); letter-spacing: -.01em; }

/* ---- divider: solid rule with offset diamond tick ---- */
.ftc-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--ftc-pad-y); }
.ftc-divider::before,
.ftc-divider::after { content: ""; flex: 1; height: 2px; background: var(--ftc-line); }
.ftc-divider span { width: 12px; height: 12px; background: var(--cta-primary); transform: rotate(45deg); flex-shrink: 0; }

/* ---- intro ---- */
.ftc-intro { max-width: 860px; margin: 0 auto; padding: 52px 20px 38px; text-align: center; }
.ftc-intro__eyebrow { color: var(--ftc-accent); font-weight: 700; font-size: .9rem; letter-spacing: .06em; margin-bottom: 10px; }
.ftc-intro h1 { font-size: clamp(1.65rem, 4.2vw, 2.4rem); margin-bottom: 16px; }
.ftc-intro p { color: #5C2A15; line-height: 1.8; }

/* ---- section shell ---- */
.ftc-section { max-width: 1080px; margin: 0 auto; padding: 0 20px var(--ftc-pad-y); }
.ftc-section h2 {
  font-size: 1.45rem; margin-bottom: 22px; padding: 8px 16px;
  background: #fff; border-left: 6px solid var(--cta-primary); border-radius: 0 var(--ftc-r-sm) var(--ftc-r-sm) 0;
  display: inline-block;
}
.ftc-section h3 { font-size: 1.08rem; margin: 26px 0 8px; }
.ftc-section h3:first-of-type { margin-top: 0; }
.ftc-section p { margin-bottom: 14px; line-height: 1.85; color: #5C2A15; }

/* ---- comparison table (centerpiece) ---- */
.ftc-table-wrap { overflow-x: auto; border-radius: var(--ftc-r-md); border: 1px solid var(--ftc-line); background: #fff; }
.ftc-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.ftc-table th, .ftc-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--ftc-line); vertical-align: top; }
.ftc-table thead th { background: var(--ftc-ink); color: #FDEDE3; font-weight: 700; }
.ftc-table tbody th { background: var(--cta-secondary); color: var(--ftc-ink); font-weight: 700; white-space: nowrap; }
.ftc-table .ftc-sub { display: block; font-weight: 400; font-size: .78rem; color: var(--ftc-accent); }
.ftc-table tbody tr:last-child td, .ftc-table tbody tr:last-child th { border-bottom: none; }
.ftc-table tbody tr { transition: background-color .15s ease; }
.ftc-table tbody tr:hover { background-color: #FDEDE3; }
.ftc-note { font-size: .84rem; color: var(--ftc-accent); margin-top: 10px; }

/* ---- check card grid (덕트 저항 / 설치 공간 / 소음 허용치) ---- */
.ftc-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.ftc-check-card {
  background: #fff; border: 1px solid var(--ftc-line); border-radius: var(--ftc-r-lg);
  padding: 20px 18px; color: var(--ftc-accent);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ftc-check-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(154, 52, 18, .14);
  border-color: var(--cta-primary);
}
.ftc-check-card h3 { margin: 12px 0 8px; color: var(--ftc-ink); font-size: 1rem; }
.ftc-check-card p { color: #5C2A15; font-size: .92rem; margin-bottom: 0; }

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

/* ---- glossary list ---- */
.ftc-glossary { background: #fff; border: 1px solid var(--ftc-line); border-radius: var(--ftc-r-md); padding: 8px 22px; }
.ftc-glossary dt { padding-top: 14px; font-weight: 700; color: var(--ftc-ink); font-size: .96rem; }
.ftc-glossary dd { margin: 3px 0 0; padding-bottom: 12px; color: #5C2A15; font-size: .88rem; line-height: 1.65; border-bottom: 1px solid var(--ftc-line); }
.ftc-glossary dd:last-of-type { border-bottom: none; }

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

/* ---- exactly one animation type on this page: CSS-only hover (no scroll-reveal) ---- */

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