/* ============================================================
   page-pohang-sirocco-fan.css — steel/industrial regional page:
   scenario cards, gauge-style procedure steps, spec checklist
   cards, environment comparison table, accordion FAQ.
   Hazard-stripe dividers. Hover animation only.
   ============================================================ */

:root {
  --cta-primary: #1E293B;
  --cta-secondary: #F1F5F9;
  --ph-steel: #334155;
  --ph-accent: #C2410C;
  --ph-radius-sm: 4px;
}

body { font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 400; background: #F1F5F9; color: #1E293B; }
h1, h2, h3 { font-family: 'IBM Plex Sans KR', sans-serif; font-weight: 700; color: #1E293B; letter-spacing: -.01em; }

/* ---- hazard-stripe divider (sole divider style on this page) ---- */
.ph-divider {
  height: 6px;
  background: repeating-linear-gradient(45deg, #1E293B, #1E293B 10px, #F59E0B 10px, #F59E0B 20px);
}

/* ---- hero ---- */
.ph-hero {
  max-width: 880px; margin: 0 auto; padding: 60px 20px 34px 24px;
  border-left: 6px solid var(--ph-accent);
}
.ph-hero__eyebrow {
  font-size: .82rem; font-weight: 700; color: var(--ph-accent);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
.ph-hero h1 { font-size: clamp(1.85rem, 5vw, 2.6rem); margin-bottom: 14px; }
.ph-hero p { font-size: 1.02rem; color: #334155; max-width: 720px; }

/* ---- generic section wrapper ---- */
.ph-section { max-width: 1000px; margin: 0 auto; padding: 52px 20px; }
.ph-section h2 {
  font-size: 1.4rem; margin-bottom: 10px; padding-left: 14px;
  border-left: 4px solid var(--ph-accent);
}
.ph-section > p.lead { color: #475569; margin-bottom: 22px; max-width: 760px; }
.ph-section p { color: #334155; }

/* ---- scenario case cards (hover lift, sole animation on page) ---- */
.ph-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 20px; }
.ph-case-card {
  background: #fff; border: 1px solid #CBD5E1; border-top: 3px solid var(--ph-steel);
  border-radius: var(--ph-radius-sm); padding: 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-top-color .18s ease;
}
.ph-case-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(30,41,59,.18); border-top-color: var(--ph-accent); }
.ph-case-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.ph-case-card p { font-size: .92rem; }

/* ---- procedure steps (gauge-style numbers) ---- */
.ph-steps { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.ph-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid #CBD5E1; border-radius: var(--ph-radius-sm); padding: 16px 18px;
}
.ph-step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ph-steel); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem;
}
.ph-steps h3 { font-size: 1rem; margin-bottom: 4px; }
.ph-steps p { font-size: .9rem; color: #475569; margin: 0; }

/* ---- checklist cards with SVG icons ---- */
.ph-checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.ph-check-card {
  background: #fff; border: 1px solid #CBD5E1; border-radius: var(--ph-radius-sm); padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ph-check-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(30,41,59,.18); }
.ph-check-card svg { color: var(--ph-accent); margin-bottom: 8px; }
.ph-check-card h3 { font-size: .98rem; margin-bottom: 6px; }
.ph-check-card p { font-size: .86rem; color: #475569; }

/* ---- environment comparison table ---- */
.ph-table-wrap { overflow-x: auto; margin-top: 18px; border: 1px solid #CBD5E1; border-radius: var(--ph-radius-sm); }
.ph-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.ph-table th, .ph-table td { padding: 12px 14px; text-align: left; font-size: .88rem; border-bottom: 1px solid #E2E8F0; }
.ph-table thead th { background: var(--ph-steel); color: #fff; font-weight: 700; }
.ph-table tbody th { color: #1E293B; font-weight: 700; background: #F8FAFC; }
.ph-table tbody tr:last-child td, .ph-table tbody tr:last-child th { border-bottom: none; }
.ph-note { font-size: .82rem; color: #64748B; margin-top: 10px; }

/* ---- accordion FAQ ---- */
.ph-faq details {
  background: #fff; border: 1px solid #CBD5E1; border-left: 4px solid var(--ph-accent);
  border-radius: var(--ph-radius-sm); margin-bottom: 10px; padding: 14px 18px;
}
.ph-faq summary { font-weight: 700; color: #1E293B; font-size: .98rem; cursor: pointer; }
.ph-faq p { margin-top: 8px; font-size: .9rem; color: #475569; }

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

@media (max-width: 640px) {
  .ph-case-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ph-hero { padding: 48px 16px 28px 18px; }
  .ph-section { padding: 36px 16px; }
  .ph-checklist { grid-template-columns: 1fr; }
  .ph-steps li { padding: 14px; }
}