From cf7ffb69f5191b25b8adc6e3a1d18e37c04706e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 5 Mar 2026 21:57:00 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[rd]=20=EC=A4=91=EB=8C=80=EC=9E=AC?=
 =?UTF-8?q?=ED=95=B4=EC=B2=98=EB=B2=8C=EB=B2=95=20=EC=8B=A4=EB=AC=B4=20?=
 =?UTF-8?q?=EC=A0=90=EA=B2=80=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 6개 카테고리 34개 점검항목 인터랙티브 체크리스트
- Chart.js 도넛/막대 차트 실시간 통계
- React 기반 SPA 대시보드
---
 app/Http/Controllers/RdController.php     |  12 +
 resources/views/rd/safety-audit.blade.php | 323 ++++++++++++++++++++++
 routes/web.php                            |   3 +
 3 files changed, 338 insertions(+)
 create mode 100644 resources/views/rd/safety-audit.blade.php

diff --git a/app/Http/Controllers/RdController.php b/app/Http/Controllers/RdController.php
index ce5059db..721693d9 100644
--- a/app/Http/Controllers/RdController.php
+++ b/app/Http/Controllers/RdController.php
@@ -28,6 +28,18 @@ public function index(Request $request): View|\Illuminate\Http\Response
         return view('rd.index', compact('dashboard', 'statuses'));
     }
 
+    /**
+     * 중대재해처벌법 실무 점검
+     */
+    public function safetyAudit(Request $request): View|\Illuminate\Http\Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('rd.safety-audit'));
+        }
+
+        return view('rd.safety-audit');
+    }
+
     /**
      * AI 견적 목록
      */
diff --git a/resources/views/rd/safety-audit.blade.php b/resources/views/rd/safety-audit.blade.php
new file mode 100644
index 00000000..9e62ea15
--- /dev/null
+++ b/resources/views/rd/safety-audit.blade.php
@@ -0,0 +1,323 @@
+@extends('layouts.app')
+
+@section('title', '중대재해처벌법 실무 점검')
+
+@section('content')
+<div id="root"></div>
+@endsection
+
+@push('scripts')
+<script src="https://cdn.tailwindcss.com"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+@include('partials.react-cdn')
+<script type="text/babel">
+@verbatim
+const { useState, useEffect, useRef, useMemo, useCallback } = React;
+
+// --- 점검 데이터 ---
+const initialAuditData = [
+    // Category 1: 경영방침 및 목표
+    { id: "c1-1", category: "경영방침 및 목표", title: "최고경영자 명의의 안전보건 경영방침 수립", desc: "형식적인 선언을 넘어, 회사 홈페이지/게시판 등에 공표되어 모든 종사자가 인지하고 있는가?" },
+    { id: "c1-2", category: "경영방침 및 목표", title: "구체적이고 측정 가능한 안전보건 목표 설정", desc: "단순 '사고 예방'이 아닌, '중대재해 0건', '위험성평가 실시율 100%' 등 정량적 목표가 설정되었는가?" },
+    { id: "c1-3", category: "경영방침 및 목표", title: "안전보건 경영방침의 정기적 평가 및 개정", desc: "최소 연 1회 이상 경영방침과 목표의 달성도를 평가하고 필요한 경우 개선하여 반영하고 있는가?" },
+    { id: "c1-4", category: "경영방침 및 목표", title: "전사적 자원 배분 의지 표명", desc: "안전 목표 달성을 위해 인력, 예산, 시설 등 필요한 자원을 제공하겠다는 명시적 약속이 포함되어 있는가?" },
+    { id: "c1-5", category: "경영방침 및 목표", title: "협력업체(하청) 포함 방침 적용", desc: "수급인 및 파견근로자를 포함한 모든 종사자에게 동일한 안전보건 방침이 적용됨을 명시하고 있는가?" },
+
+    // Category 2: 전담 조직 및 인력
+    { id: "c2-1", category: "전담 조직 및 인력", title: "안전보건 전담 조직(CSO 등) 구성", desc: "경영책임자를 보좌하여 안전보건 업무를 총괄하는 전담 조직이 실질적으로 운영되고 있는가?" },
+    { id: "c2-2", category: "전담 조직 및 인력", title: "전담 조직의 실질적 권한 부여", desc: "해당 조직이 타 부서에 안전 조치를 요구하고 관철할 수 있는 권한(작업중지권 등)을 가지고 있는가?" },
+    { id: "c2-3", category: "전담 조직 및 인력", title: "안전/보건관리자 법정 인원 선임", desc: "사업장 규모 및 특성에 맞는 법정 자격 요건을 갖춘 안전관리자 및 보건관리자를 선임하였는가?" },
+    { id: "c2-4", category: "전담 조직 및 인력", title: "안전보건 인력의 겸직 금지 준수", desc: "선임된 전문 인력이 생산, 총무 등 다른 업무를 겸직하여 안전 업무를 소홀히 하지 않는가?" },
+    { id: "c2-5", category: "전담 조직 및 인력", title: "안전보건 관리감독자 지정 및 업무 부여", desc: "현장 관리감독자에게 안전보건 업무를 명확히 부여하고, 이를 수행할 시간적 여유를 보장하는가?" },
+    { id: "c2-6", category: "전담 조직 및 인력", title: "관리감독자 업무 수행 평가", desc: "관리감독자가 부여된 안전보건 임무(순회점검 등)를 충실히 수행하고 있는지 반기 1회 이상 평가하는가?" },
+
+    // Category 3: 예산 편성 및 집행
+    { id: "c3-1", category: "예산 편성 및 집행", title: "안전보건 전용 예산 편성", desc: "재해 예방에 필요한 예산(시설 개선, 장비 구입, 교육비 등)이 다른 예산과 독립적으로 편성되었는가?" },
+    { id: "c3-2", category: "예산 편성 및 집행", title: "위험성평가 결과에 따른 예산 반영", desc: "위험성평가 및 현장 점검에서 도출된 개선 필요 사항을 차기 예산에 즉각적으로 반영하고 있는가?" },
+    { id: "c3-3", category: "예산 편성 및 집행", title: "계획 대비 예산 집행률 관리", desc: "편성된 안전 예산이 타 용도로 전용되지 않고 목적에 맞게 100% 정상 집행되고 있는가?" },
+    { id: "c3-4", category: "예산 편성 및 집행", title: "예산 집행 내역 증빙 관리", desc: "예산 집행 내역(영수증, 기안서 등)이 명확히 문서화되어 보관되고 있는가? (수사 대비 핵심)" },
+    { id: "c3-5", category: "예산 편성 및 집행", title: "협력업체 안전보건 지원 예산", desc: "도급을 준 하청업체의 안전보건 확보를 위해 필요한 예산(안전장비 지원 등)을 배정하였는가?" },
+
+    // Category 4: 유해·위험요인 확인 및 개선
+    { id: "c4-1", category: "유해·위험요인 확인 및 개선", title: "정기 위험성평가 실시 (반기 1회 이상)", desc: "법적 기준에 따라 사업장 내 모든 작업에 대해 위험성평가를 정기적으로 실시하고 있는가?" },
+    { id: "c4-2", category: "유해·위험요인 확인 및 개선", title: "수시 위험성평가 체계 작동", desc: "기계기구 도입, 작업 방법 변경 등 변경 발생 시 즉각적으로 수시 위험성평가를 실시하는가?" },
+    { id: "c4-3", category: "유해·위험요인 확인 및 개선", title: "위험성평가 과정에 현장 근로자 참여", desc: "관리자 단독이 아닌, 실제 해당 작업을 수행하는 근로자가 평가 과정에 직접 참여하여 의견을 내는가?" },
+    { id: "c4-4", category: "유해·위험요인 확인 및 개선", title: "아차사고(Near Miss) 발굴 및 분석", desc: "실제 사고로 이어지지 않은 '아차사고' 사례를 적극적으로 수집하고 원인을 분석하여 대책을 수립하는가?" },
+    { id: "c4-5", category: "유해·위험요인 확인 및 개선", title: "허용 불가 위험에 대한 즉각 조치", desc: "위험성평가 결과 '허용 불가' 등급으로 판정된 위험요인에 대해 작업 중지 또는 즉각적인 개선 조치를 취하는가?" },
+    { id: "c4-6", category: "유해·위험요인 확인 및 개선", title: "개선 대책의 효과성 검증", desc: "위험요인 개선 조치 완료 후, 해당 조치가 실제로 위험을 낮췄는지 재평가하여 검증하는가?" },
+    { id: "c4-7", category: "유해·위험요인 확인 및 개선", title: "안전보건 관계 법령 의무이행 점검", desc: "산업안전보건법 등 관련 법령에서 요구하는 안전/보건 조치가 실제 이행되고 있는지 반기 1회 이상 점검하는가?" },
+
+    // Category 5: 종사자 의견 청취 및 대응
+    { id: "c5-1", category: "종사자 의견 청취 및 대응", title: "안전보건 의견 청취 절차 마련", desc: "산업안전보건위원회 외에도 모바일 앱, 제안함, 익명 게시판 등 종사자가 쉽게 의견을 낼 수 있는 창구가 있는가?" },
+    { id: "c5-2", category: "종사자 의견 청취 및 대응", title: "접수된 의견의 실질적 검토 및 반영", desc: "종사자가 제안한 의견을 경영책임자 등에게 보고하고, 타당한 경우 실제 개선 조치로 이어지는가?" },
+    { id: "c5-3", category: "종사자 의견 청취 및 대응", title: "의견 반영 결과 피드백 제공", desc: "의견을 낸 종사자에게 검토 결과 및 조치 계획을 명확하게 회신(피드백) 해주고 있는가?" },
+    { id: "c5-4", category: "종사자 의견 청취 및 대응", title: "급박한 위험 시 작업중지권 보장", desc: "종사자가 위험을 인지하고 작업을 중지했을 때, 이를 이유로 인사상 불이익을 주지 않는 규정이 실효성 있게 작동하는가?" },
+    { id: "c5-5", category: "종사자 의견 청취 및 대응", title: "재난 대응 매뉴얼 수립 및 훈련", desc: "중대재해 발생 또는 발생 급박 상황에 대비한 매뉴얼이 구비되어 있고, 반기 1회 이상 모의 훈련을 실시하는가?" },
+
+    // Category 6: 도급·용역·위탁 안전 확보
+    { id: "c6-1", category: "도급·용역·위탁 안전 확보", title: "수급인 선정 시 안전 역량 평가 기준 마련", desc: "하청, 용역, 위탁 업체 선정 시 최저가가 아닌 '안전보건관리 수준'을 필수 평가 항목으로 반영하는가?" },
+    { id: "c6-2", category: "도급·용역·위탁 안전 확보", title: "수급인의 안전보건 조치 비용(적정 단가) 보장", desc: "수급인이 안전하게 작업할 수 있도록 적정한 공사비(용역비)와 공사 기간을 보장하고 있는가?" },
+    { id: "c6-3", category: "도급·용역·위탁 안전 확보", title: "도급인-수급인 간 안전보건 협의체 운영", desc: "원청과 하청이 참여하는 안전보건 협의체를 정기적으로(월 1회 이상) 개최하여 소통하고 있는가?" },
+    { id: "c6-4", category: "도급·용역·위탁 안전 확보", title: "합동 안전보건 점검 실시", desc: "도급인(원청) 주관으로 수급인(하청)과 함께 정기적인 현장 합동 안전 점검을 실시하고 있는가?" },
+    { id: "c6-5", category: "도급·용역·위탁 안전 확보", title: "수급인 근로자에 대한 안전 교육 지원", desc: "하청 근로자가 유해/위험 작업에 투입되기 전 충분한 안전 교육을 받도록 원청이 지원하거나 확인하는가?" },
+    { id: "c6-6", category: "도급·용역·위탁 안전 확보", title: "불법 파견 및 편법 고용 방지 체계", desc: "실질적 지휘·명령을 하면서도 형식적 도급계약을 맺어 안전 책임을 회피하는 사례가 없는지 점검하는가?" },
+];
+
+const CATEGORY_COLORS = ['#3B82F6','#8B5CF6','#F59E0B','#EF4444','#10B981','#EC4899'];
+
+// --- 토글 버튼 ---
+function StatusToggle({ status, onChange }) {
+    const opts = [
+        { value: 'pass', label: '양호', active: 'bg-green-100 text-green-700 shadow-sm', inactive: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100' },
+        { value: 'fail', label: '미흡', active: 'bg-red-100 text-red-700 shadow-sm', inactive: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100' },
+        { value: 'pending', label: '대기', active: 'bg-slate-300 text-slate-700 shadow-sm', inactive: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100' },
+    ];
+    return (
+        <div style={{ display: 'flex', gap: '2px', border: '1px solid #E2E8F0', borderRadius: '8px', padding: '3px', backgroundColor: '#F8FAFC', flexShrink: 0 }}>
+            {opts.map(o => (
+                <button key={o.value} onClick={() => onChange(o.value)}
+                    className={`px-3 py-1.5 text-sm font-medium rounded-md transition-all ${status === o.value ? o.active : o.inactive}`}
+                >{o.label}</button>
+            ))}
+        </div>
+    );
+}
+
+// --- 체크리스트 항목 ---
+function CheckItem({ item, index, status, onStatusChange }) {
+    return (
+        <div style={{ padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '16px', borderBottom: '1px solid #F1F5F9' }}>
+            <div style={{ flex: 1 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+                    <span style={{ fontSize: '11px', fontWeight: 600, color: '#94A3B8' }}>항목 {index + 1}</span>
+                    <span style={{ fontSize: '14px', fontWeight: 600, color: '#1E293B' }}>{item.title}</span>
+                </div>
+                <p style={{ fontSize: '13px', color: '#64748B', lineHeight: 1.6 }}>{item.desc}</p>
+            </div>
+            <StatusToggle status={status} onChange={onStatusChange} />
+        </div>
+    );
+}
+
+// --- 카테고리 섹션 ---
+function CategorySection({ name, index, items, statuses, onStatusChange }) {
+    const passed = items.filter(i => statuses[i.id] === 'pass').length;
+    const total = items.length;
+    const allDone = passed === total;
+
+    return (
+        <div style={{ backgroundColor: '#FFF', borderRadius: '12px', border: '1px solid #E2E8F0', overflow: 'hidden', boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
+            <div style={{ backgroundColor: '#F8FAFC', borderBottom: '1px solid #E2E8F0', padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                    <div style={{
+                        width: '30px', height: '30px', borderRadius: '50%',
+                        backgroundColor: CATEGORY_COLORS[index] + '20', color: CATEGORY_COLORS[index],
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        fontSize: '13px', fontWeight: 700,
+                    }}>{index + 1}</div>
+                    <span style={{ fontSize: '16px', fontWeight: 700, color: '#1E293B' }}>{name}</span>
+                </div>
+                <span style={{ fontSize: '13px', fontWeight: allDone ? 700 : 500, color: allDone ? '#16A34A' : '#64748B' }}>
+                    {passed} / {total} 완료
+                </span>
+            </div>
+            <div>
+                {items.map((item, idx) => (
+                    <CheckItem key={item.id} item={item} index={idx} status={statuses[item.id]}
+                        onStatusChange={(val) => onStatusChange(item.id, val)} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// --- 도넛 차트 ---
+function DonutChart({ passed, failed, pending, total }) {
+    const canvasRef = useRef(null);
+    const chartRef = useRef(null);
+
+    useEffect(() => {
+        if (chartRef.current) chartRef.current.destroy();
+        chartRef.current = new Chart(canvasRef.current, {
+            type: 'doughnut',
+            data: {
+                labels: ['양호', '미흡', '대기'],
+                datasets: [{ data: [passed, failed, pending], backgroundColor: ['#22c55e','#ef4444','#e2e8f0'], borderWidth: 0, hoverOffset: 4 }]
+            },
+            options: {
+                responsive: true, maintainAspectRatio: false, cutout: '70%',
+                plugins: {
+                    legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true, boxWidth: 8, font: { size: 12 } } },
+                    tooltip: { callbacks: { label: (ctx) => ` ${ctx.label}: ${ctx.raw}항목 (${Math.round((ctx.raw/total)*100)}%)` } }
+                }
+            }
+        });
+        return () => { if (chartRef.current) chartRef.current.destroy(); };
+    }, [passed, failed, pending]);
+
+    return <div style={{ position: 'relative', height: '240px' }}><canvas ref={canvasRef}></canvas></div>;
+}
+
+// --- 바 차트 ---
+function BarChart({ categories, categoryRates }) {
+    const canvasRef = useRef(null);
+    const chartRef = useRef(null);
+
+    useEffect(() => {
+        if (chartRef.current) chartRef.current.destroy();
+        const labels = categories.map(c => c.length > 10 ? c.substring(0, 10) + '...' : c);
+        chartRef.current = new Chart(canvasRef.current, {
+            type: 'bar',
+            data: {
+                labels,
+                datasets: [{ label: '달성률 (%)', data: categoryRates, backgroundColor: CATEGORY_COLORS, borderRadius: 4, barPercentage: 0.6 }]
+            },
+            options: {
+                indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+                scales: {
+                    x: { beginAtZero: true, max: 100, grid: { color: '#f1f5f9' }, ticks: { callback: v => v + '%' } },
+                    y: { grid: { display: false }, ticks: { font: { size: 11 } } }
+                },
+                plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ` 달성률: ${ctx.raw}%` } } }
+            }
+        });
+        return () => { if (chartRef.current) chartRef.current.destroy(); };
+    }, [categoryRates]);
+
+    return <div style={{ position: 'relative', height: '260px' }}><canvas ref={canvasRef}></canvas></div>;
+}
+
+// --- 메인 앱 ---
+function App() {
+    const [statuses, setStatuses] = useState(() => {
+        const init = {};
+        initialAuditData.forEach(i => { init[i.id] = 'pending'; });
+        return init;
+    });
+
+    const categories = useMemo(() => [...new Set(initialAuditData.map(i => i.category))], []);
+    const total = initialAuditData.length;
+
+    const stats = useMemo(() => {
+        const passed = Object.values(statuses).filter(s => s === 'pass').length;
+        const failed = Object.values(statuses).filter(s => s === 'fail').length;
+        const pending = Object.values(statuses).filter(s => s === 'pending').length;
+        const percent = Math.round((passed / total) * 100) || 0;
+
+        const catRates = categories.map(cat => {
+            const items = initialAuditData.filter(i => i.category === cat);
+            const p = items.filter(i => statuses[i.id] === 'pass').length;
+            return Math.round((p / items.length) * 100);
+        });
+
+        return { passed, failed, pending, percent, catRates };
+    }, [statuses]);
+
+    const handleChange = useCallback((id, val) => {
+        setStatuses(prev => ({ ...prev, [id]: val }));
+    }, []);
+
+    const setAll = useCallback((val) => {
+        setStatuses(prev => {
+            const next = { ...prev };
+            Object.keys(next).forEach(k => { next[k] = val; });
+            return next;
+        });
+    }, []);
+
+    const statusLabel = stats.percent === 100 ? { text: '준비 완료', cls: 'bg-green-100 text-green-700' }
+        : stats.percent > 70 ? { text: '양호 수준', cls: 'bg-blue-100 text-blue-700' }
+        : stats.percent > 30 ? { text: '개선 필요', cls: 'bg-yellow-100 text-yellow-700' }
+        : { text: '위험 수준', cls: 'bg-red-100 text-red-700' };
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
+            {/* 헤더 */}
+            <div style={{ padding: '16px 24px', borderBottom: '1px solid #E2E8F0', backgroundColor: '#FFF', flexShrink: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                    <h1 style={{ fontSize: '20px', fontWeight: 800, color: '#0F172A', margin: 0 }}>중대재해처벌법 실무 점검</h1>
+                    <p style={{ fontSize: '13px', color: '#64748B', margin: '2px 0 0' }}>서류 중심이 아닌 "실제 작동 여부"를 검증하는 6대 영역 심층 진단 도구</p>
+                </div>
+                <div style={{ textAlign: 'right' }}>
+                    <div style={{ fontSize: '11px', fontWeight: 600, color: '#94A3B8', letterSpacing: '0.05em', marginBottom: '2px' }}>총 점검 진행률</div>
+                    <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px', justifyContent: 'flex-end' }}>
+                        <span style={{ fontSize: '28px', fontWeight: 800, color: '#2563EB' }}>{stats.percent}</span>
+                        <span style={{ fontSize: '16px', fontWeight: 500, color: '#94A3B8' }}>%</span>
+                    </div>
+                </div>
+            </div>
+
+            {/* 2컬럼 레이아웃 */}
+            <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+                {/* 왼쪽: 대시보드 */}
+                <div style={{ width: '340px', flexShrink: 0, borderRight: '1px solid #E2E8F0', backgroundColor: '#F8FAFC', overflowY: 'auto', padding: '20px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                    {/* 진단 개요 */}
+                    <div style={{ backgroundColor: '#FFF', borderRadius: '12px', border: '1px solid #E2E8F0', padding: '18px' }}>
+                        <h2 style={{ fontSize: '16px', fontWeight: 700, color: '#1E293B', marginBottom: '8px' }}>진단 개요</h2>
+                        <p style={{ fontSize: '13px', color: '#64748B', lineHeight: 1.6, marginBottom: '12px' }}>
+                            검찰 조사 시 핵심 쟁점이 되는 {total}개 항목을 6대 카테고리로 재구성했습니다.
+                            실제 현장에서 제도가 <strong>'작동'</strong>하고 있는지 평가하십시오.
+                        </p>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+                            <span style={{ fontSize: '13px', fontWeight: 600, color: '#475569' }}>이행 완료도</span>
+                            <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${statusLabel.cls}`}>{statusLabel.text}</span>
+                        </div>
+                        <DonutChart passed={stats.passed} failed={stats.failed} pending={stats.pending} total={total} />
+                    </div>
+
+                    {/* 영역별 현황 */}
+                    <div style={{ backgroundColor: '#FFF', borderRadius: '12px', border: '1px solid #E2E8F0', padding: '18px', flex: 1 }}>
+                        <h2 style={{ fontSize: '16px', fontWeight: 700, color: '#1E293B', marginBottom: '12px' }}>영역별 이행 현황</h2>
+                        <BarChart categories={categories} categoryRates={stats.catRates} />
+                    </div>
+
+                    <div style={{ fontSize: '11px', color: '#94A3B8', borderTop: '1px solid #E2E8F0', paddingTop: '12px' }}>
+                        * 본 대시보드는 자가 진단용이며, 법적 책임을 면제하지 않습니다.
+                    </div>
+                </div>
+
+                {/* 오른쪽: 체크리스트 */}
+                <div style={{ flex: 1, overflowY: 'auto', padding: '24px', backgroundColor: '#FFF' }}>
+                    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+                        <div style={{ marginBottom: '24px' }}>
+                            <h2 style={{ fontSize: '20px', fontWeight: 700, color: '#0F172A', marginBottom: '8px' }}>심층 점검 체크리스트</h2>
+                            <p style={{ fontSize: '13px', color: '#64748B', lineHeight: 1.6 }}>
+                                각 항목에 대해 현재 기업의 실태를 객관적으로 평가해 주십시오.
+                                <strong> '양호'</strong>는 단순 문서 구비가 아닌 실질적 이행과 증빙이 가능한 상태를 의미합니다.
+                            </p>
+                        </div>
+
+                        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginBottom: '16px' }}>
+                            <button onClick={() => setAll('pass')}
+                                className="text-xs px-3 py-1.5 rounded bg-green-50 text-green-700 hover:bg-green-100 border border-green-200 transition-colors">
+                                전체 양호 처리
+                            </button>
+                            <button onClick={() => setAll('pending')}
+                                className="text-xs px-3 py-1.5 rounded bg-slate-100 text-slate-600 hover:bg-slate-200 border border-slate-200 transition-colors">
+                                초기화
+                            </button>
+                        </div>
+
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+                            {categories.map((cat, idx) => (
+                                <CategorySection
+                                    key={cat}
+                                    name={cat}
+                                    index={idx}
+                                    items={initialAuditData.filter(i => i.category === cat)}
+                                    statuses={statuses}
+                                    onStatusChange={handleChange}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+@endverbatim
+</script>
+@endpush
diff --git a/routes/web.php b/routes/web.php
index dd6ae947..3f16a9b1 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -381,6 +381,9 @@
         Route::get('/ai-quotation/{id}/edit', [RdController::class, 'editQuotation'])->name('ai-quotation.edit');
         Route::get('/ai-quotation/{id}', [RdController::class, 'showQuotation'])->name('ai-quotation.show');
 
+        // 중대재해처벌법 실무 점검
+        Route::get('/safety-audit', [RdController::class, 'safetyAudit'])->name('safety-audit');
+
         // CM송 제작
         Route::prefix('cm-song')->name('cm-song.')->group(function () {
             Route::get('/', [CmSongController::class, 'index'])->name('index');