/* ============================================================
   page-safety-guidelines.css — 안전 수칙 (전원 차단·검전 / 고소작업 안전대 / 회전체 접근 금지 / 결선 상 확인)
   Title: Nanum Myeongjo 800 / Body: Nanum Myeongjo 400 with system sans fallback
   Layout signature: 연한 레드 배경 + 좌측 강조선 경고 카드 4단 + 번호 배지 + 체크리스트/시나리오 카드 + 아코디언 FAQ
   ============================================================ */

:root {
  --cta-primary: #B91C1C;
  --cta-secondary: #FEF2F2;
  --sg-primary: #7F1D1D;
  --sg-accent: #B91C1C;
  --sg-bg: #FEF2F2;
  --sg-card-bg: #ffffff;
  --sg-border: #FCA5A5;
  --sg-text: #1F2937;
  --sg-text-dim: #4B5563;
  --sg-r-sm: 6px;
  --sg-r-md: 16px;
  --sg-r-lg: 28px;
  --sg-pad-y: 60px;
}

body { font-family: 'Nanum Myeongjo', -apple-system, 'Malgun Gothic', sans-serif; font-weight: 400; background: var(--sg-bg); color: var(--sg-text); }
h1, h2, h3 { font-family: 'Nanum Myeongjo', serif; font-weight: 800; letter-spacing: -.01em; color: var(--sg-primary); }

main { background: var(--sg-bg); }

/* ---- hero ---- */
.sg-hero { max-width: 820px; margin: 0 auto; padding: 56px 20px 8px; text-align: center; }
.sg-hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 18px; }
.sg-hero p { color: var(--sg-text-dim); line-height: 1.9; font-size: 1rem; text-align: left; }

/* ---- section shell with left-accent warning callout ---- */
.sg-section {
  position: relative;
  max-width: 900px; margin: var(--sg-pad-y) auto 0; padding: 30px 26px 30px 34px;
  background: var(--sg-card-bg); border: 1px solid var(--sg-border); border-left: 6px solid var(--sg-accent);
  border-radius: var(--sg-r-lg);
}
.sg-num {
  display: inline-block; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1rem;
  color: #fff; background: var(--sg-accent); padding: 3px 12px; border-radius: 999px; margin-bottom: 12px;
}
.sg-section h2 { font-size: 1.35rem; margin-bottom: 10px; }
.sg-lead { color: var(--sg-primary); font-weight: 700; line-height: 1.75; margin-bottom: 14px; font-size: .98rem; }
.sg-section > p:not(.sg-lead) { color: var(--sg-text-dim); line-height: 1.9; font-size: .96rem; }

/* ---- checklist cards (SVG icon) — 전원 차단 및 검전 ---- */
.sg-check-grid {
  margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.sg-check-card {
  display: flex; gap: 12px; align-items: flex-start; background: var(--sg-bg);
  border: 1px solid var(--sg-border); border-radius: var(--sg-r-md); padding: 16px 18px;
}
.sg-check-card svg { flex-shrink: 0; color: var(--sg-accent); margin-top: 2px; }
.sg-check-card h3 { font-size: .96rem; margin-bottom: 4px; color: var(--sg-primary); }
.sg-check-card p { font-size: .88rem; color: var(--sg-text-dim); line-height: 1.7; margin: 0; }

/* ---- scenario case cards — 고소작업 안전대 ---- */
.sg-scenario-grid {
  margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
.sg-scenario-card {
  background: var(--sg-bg); border: 1px solid var(--sg-border); border-radius: var(--sg-r-md); padding: 18px 20px;
}
.sg-scenario-card h3 { font-size: 1rem; margin-bottom: 8px; }
.sg-scenario-card p { font-size: .88rem; color: var(--sg-text-dim); line-height: 1.75; margin: 0 0 6px; }
.sg-scenario-card p:last-child { margin-bottom: 0; }
.sg-scenario-card strong { color: var(--sg-accent); }

/* ---- FAQ accordion — 오해 바로잡기 ---- */
.sg-faq-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.sg-faq details {
  border: 1px solid var(--sg-border); border-radius: var(--sg-r-md); padding: 2px 18px; background: var(--sg-bg);
}
.sg-faq summary { padding: 14px 0; font-weight: 700; color: var(--sg-primary); font-size: .95rem; position: relative; padding-right: 26px; }
.sg-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.2rem; color: var(--sg-accent); font-weight: 700; }
.sg-faq details[open] summary::after { content: "\2212"; }
.sg-faq details p { padding: 0 0 14px; margin: 0; color: var(--sg-text-dim); font-size: .9rem; line-height: 1.8; }

.cta { background: var(--sg-primary); color: #fff; margin-top: var(--sg-pad-y); }
.cta-lead { color: #FEE2E2; }

/* ---- exactly one animation type on this page: hover ---- */
.sg-section,
.sg-check-card,
.sg-scenario-card,
.sg-faq details {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sg-section:hover { box-shadow: 0 12px 26px -16px rgba(127,29,29,.35); }
.sg-check-card:hover { transform: translateY(-3px); border-color: var(--sg-accent); }
.sg-scenario-card:hover { transform: translateY(-3px); border-color: var(--sg-accent); }
.sg-faq details:hover { border-color: var(--sg-accent); }
@media (prefers-reduced-motion: reduce) {
  .sg-section, .sg-check-card, .sg-scenario-card, .sg-faq details { transition: none; }
}

@media (max-width: 480px) {
  .sg-hero { padding: 44px 16px 8px; }
  .sg-section { padding: 24px 18px 24px 22px; margin-top: 40px; }
  .sg-section h2 { font-size: 1.18rem; }
}