@extends('layouts.app')

@section('title', '설비관리 도움말')

@push('styles')
<style>
    /* FAQ 아코디언 chevron 회전 */
    details summary { list-style: none; }
    details summary::-webkit-details-marker { display: none; }
    details summary .chevron-icon {
        transition: transform 0.2s ease;
    }
    details[open] summary .chevron-icon {
        transform: rotate(180deg);
    }

    /* 클릭 라이트박스 */
    #lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(4px);
    }
    #lightbox.is-open {
        display: flex;
    }
    #lightbox img {
        max-height: 90vh;
        max-width: 90vw;
        border-radius: 0.5rem;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    }
</style>
@endpush

@section('content')
<div class="max-w-6xl mx-auto">

    {{-- ============================================================ --}}
    {{-- 히어로 배너 --}}
    {{-- ============================================================ --}}
    <div class="rounded-2xl overflow-hidden mb-8 shadow-lg" style="background: linear-gradient(135deg, #134e4a 0%, #0f172a 100%);">
        <div class="flex items-center" style="flex-wrap: wrap;">
            <div style="flex: 1 1 300px; padding: 2rem 2.5rem;">
                <div class="flex items-center gap-2 text-sm mb-2" style="color: #99f6e4;">
                    <span>설비관리</span>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                    <span style="color: #ffffff;">도움말</span>
                </div>
                <h1 class="text-3xl font-bold mb-2" style="color: #ffffff;">설비관리 도움말</h1>
                <p class="text-sm" style="color: #cbd5e1;">설비 등록부터 점검, 수리이력, 품질인정심사 대응까지 — 친절한 가이드</p>
            </div>
            <div class="shrink-0" style="width: 200px; padding: 1.5rem;">
                {{-- 기어/렌치 인라인 SVG 일러스트 --}}
                <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full">
                    {{-- 큰 기어 --}}
                    <g transform="translate(100,100)">
                        <circle cx="0" cy="0" r="32" stroke="#5eead4" stroke-width="3" fill="none" opacity="0.7"/>
                        <circle cx="0" cy="0" r="14" stroke="#5eead4" stroke-width="2.5" fill="none" opacity="0.5"/>
                        @for($i = 0; $i < 8; $i++)
                        <rect x="-5" y="-44" width="10" height="14" rx="2" fill="#5eead4" opacity="0.6" transform="rotate({{ $i * 45 }})"/>
                        @endfor
                    </g>
                    {{-- 작은 기어 --}}
                    <g transform="translate(150,60)">
                        <circle cx="0" cy="0" r="18" stroke="#2dd4bf" stroke-width="2.5" fill="none" opacity="0.6"/>
                        <circle cx="0" cy="0" r="8" stroke="#2dd4bf" stroke-width="2" fill="none" opacity="0.4"/>
                        @for($i = 0; $i < 6; $i++)
                        <rect x="-4" y="-26" width="8" height="10" rx="2" fill="#2dd4bf" opacity="0.5" transform="rotate({{ $i * 60 }})"/>
                        @endfor
                    </g>
                    {{-- 렌치 --}}
                    <g transform="translate(55,145) rotate(-30)">
                        <rect x="0" y="-4" width="50" height="8" rx="4" fill="#99f6e4" opacity="0.5"/>
                        <circle cx="55" cy="0" r="12" stroke="#99f6e4" stroke-width="2.5" fill="none" opacity="0.5"/>
                    </g>
                    {{-- 체크마크 뱃지 --}}
                    <circle cx="160" cy="150" r="16" fill="#14b8a6" opacity="0.25"/>
                    <path d="M152 150l5 5 11-11" stroke="#5eead4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
                </svg>
            </div>
        </div>
    </div>

    <div class="flex gap-8">
        {{-- ============================================================ --}}
        {{-- 좌측 고정 목차 (TOC) --}}
        {{-- ============================================================ --}}
        <nav class="hidden lg:block shrink-0" style="width: 220px;">
            <div class="sticky top-24">
                <div class="bg-teal-50 border border-teal-200 rounded-xl p-5">
                    <h2 class="font-semibold text-teal-800 mb-3 flex items-center gap-2 text-sm">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
                        목차
                    </h2>
                    <div class="space-y-0.5 text-xs">
                        <a href="#intro" class="block text-teal-700 hover:text-teal-900 py-1 font-medium">1. SAM 설비관리 소개</a>
                        <a href="#intro-definition" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">모듈 정의</a>
                        <a href="#intro-features" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">주요 기능</a>
                        <a href="#intro-flow" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">기능 흐름도</a>

                        <a href="#usage" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">2. 기능별 사용 가이드</a>
                        <a href="#usage-registry" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">설비 등록/수정</a>
                        <a href="#usage-inspection" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">일상점검표</a>
                        <a href="#usage-repair" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">수리이력</a>
                        <a href="#usage-dashboard" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">대시보드</a>

                        <a href="#audit" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">3. 품질인정심사 대응</a>
                        <a href="#audit-iso" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">ISO 9001 요구사항</a>
                        <a href="#audit-evidence" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">자동 생성 증빙</a>
                        <a href="#audit-compare" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">전산화 vs 수기</a>

                        <a href="#knowledge" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">4. 보전 기초 지식</a>
                        <a href="#knowledge-types" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">보전 유형</a>
                        <a href="#knowledge-oee" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">OEE 공식</a>
                        <a href="#knowledge-analysis" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">고장 분석 기법</a>

                        <a href="#faq" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">5. 자주 묻는 질문</a>
                    </div>
                </div>
            </div>
        </nav>

        {{-- ============================================================ --}}
        {{-- 우측 콘텐츠 --}}
        {{-- ============================================================ --}}
        <div class="flex-1 min-w-0 space-y-10">

            {{-- 모바일 목차 --}}
            <div class="lg:hidden bg-teal-50 border border-teal-200 rounded-xl p-4 mb-6">
                <details>
                    <summary class="font-semibold text-teal-800 text-sm cursor-pointer flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
                        목차 보기
                    </summary>
                    <nav class="mt-3 space-y-1 text-sm">
                        <a href="#intro" class="block text-teal-700 hover:text-teal-900 py-1">1. SAM 설비관리 소개</a>
                        <a href="#usage" class="block text-teal-700 hover:text-teal-900 py-1">2. 기능별 사용 가이드</a>
                        <a href="#audit" class="block text-teal-700 hover:text-teal-900 py-1">3. 품질인정심사 대응</a>
                        <a href="#knowledge" class="block text-teal-700 hover:text-teal-900 py-1">4. 보전 기초 지식</a>
                        <a href="#faq" class="block text-teal-700 hover:text-teal-900 py-1">5. 자주 묻는 질문</a>
                    </nav>
                </details>
            </div>

            {{-- ============================================================ --}}
            {{-- 섹션 1: SAM 설비관리 소개 --}}
            {{-- ============================================================ --}}
            <section id="intro" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
                        SAM 설비관리 소개
                    </h2>

                    {{-- 모듈 정의 --}}
                    <div id="intro-definition" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            모듈 정의
                        </h3>
                        <div class="bg-teal-50 border border-teal-100 rounded-lg p-5">
                            <p class="text-sm text-teal-900 leading-relaxed">
                                <strong>SAM 설비관리</strong>는 공장 내 모든 설비의 생애주기를 체계적으로 관리하는 모듈입니다.
                                설비 등록부터 일상점검, 수리이력, 통계 분석까지 한 곳에서 관리하며,
                                <strong>품질인정심사(ISO 9001, IATF 16949)</strong>에 필요한 증빙 자료를 자동으로 생성합니다.
                            </p>
                            <p class="text-sm text-teal-800 mt-3 leading-relaxed">
                                기존 엑셀·종이 기반의 관리 방식을 전산화하여 <strong>데이터 유실 방지</strong>,
                                <strong>즉시 조회</strong>, <strong>사진 증빙 자동 연결</strong>을 실현합니다.
                            </p>
                        </div>
                    </div>

                    {{-- 주요 기능 카드 6개 --}}
                    <div id="intro-features" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            주요 기능
                        </h3>
                        <div class="flex gap-3" style="flex-wrap: wrap;">
                            {{-- 설비 등록대장 --}}
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                                    <span class="text-sm font-semibold text-gray-800">설비 등록대장</span>
                                </div>
                                <p class="text-xs text-gray-600 leading-relaxed">설비코드, 설비명, 제조사, 설치일, 담당자 등 기본 정보를 체계적으로 등록·관리합니다.</p>
                            </div>
                            {{-- 일상점검표 --}}
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" /></svg>
                                    <span class="text-sm font-semibold text-gray-800">일상점검표</span>
                                </div>
                                <p class="text-xs text-gray-600 leading-relaxed">설비별 일상점검 항목을 날짜별로 기록합니다. 월별 필터와 그리드 뷰로 한눈에 확인합니다.</p>
                            </div>
                            {{-- 수리이력 --}}
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                    <span class="text-sm font-semibold text-gray-800">수리이력</span>
                                </div>
                                <p class="text-xs text-gray-600 leading-relaxed">고장 내용, 수리 일자, 보전구분(사내/외주), 비용을 기록하여 설비별 수리 이력을 추적합니다.</p>
                            </div>
                            {{-- 대시보드 --}}
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
                                    <span class="text-sm font-semibold text-gray-800">대시보드</span>
                                </div>
                                <p class="text-xs text-gray-600 leading-relaxed">등록 설비 수, 설비 유형별 분포, 월간 점검 현황, 최근 수리 내역을 통계 차트로 제공합니다.</p>
                            </div>
                            {{-- 엑셀 Import --}}
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
                                    <span class="text-sm font-semibold text-gray-800">엑셀 Import</span>
                                </div>
                                <p class="text-xs text-gray-600 leading-relaxed">기존 엑셀 파일의 설비 데이터를 일괄 등록합니다. 템플릿 다운로드 후 데이터를 채워 업로드합니다.</p>
                            </div>
                            {{-- 사진관리 --}}
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4" style="flex: 1 1 180px; max-width: 280px;">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                                    <span class="text-sm font-semibold text-gray-800">사진관리</span>
                                </div>
                                <p class="text-xs text-gray-600 leading-relaxed">설비 사진을 드래그&드롭 또는 클립보드 붙여넣기(Ctrl+V)로 첨부합니다. 심사 증빙용으로 활용됩니다.</p>
                            </div>
                        </div>
                    </div>

                    {{-- 기능 흐름도 --}}
                    <div id="intro-flow" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            기능 흐름도
                        </h3>
                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 overflow-x-auto">
                            <svg viewBox="0 0 720 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto" style="max-width: 720px; width: 100%; height: auto;">
                                {{-- Step 1: 설비 등록 --}}
                                <rect x="10" y="20" width="140" height="70" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
                                <text x="80" y="48" text-anchor="middle" fill="#0f766e" font-size="13" font-weight="600">설비 등록</text>
                                <text x="80" y="68" text-anchor="middle" fill="#5eead4" font-size="10">기본정보 + 사진</text>

                                {{-- Arrow 1→2 --}}
                                <path d="M155 55 L195 55" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrowTeal)"/>

                                {{-- Step 2: 일상점검 --}}
                                <rect x="195" y="20" width="140" height="70" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
                                <text x="265" y="48" text-anchor="middle" fill="#0f766e" font-size="13" font-weight="600">일상점검</text>
                                <text x="265" y="68" text-anchor="middle" fill="#5eead4" font-size="10">날짜별 체크리스트</text>

                                {{-- Arrow 2→3 --}}
                                <path d="M340 55 L380 55" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrowTeal)"/>

                                {{-- Step 3: 수리이력 --}}
                                <rect x="380" y="20" width="140" height="70" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
                                <text x="450" y="48" text-anchor="middle" fill="#0f766e" font-size="13" font-weight="600">수리이력</text>
                                <text x="450" y="68" text-anchor="middle" fill="#5eead4" font-size="10">고장/수리 기록</text>

                                {{-- Arrow 3→4 --}}
                                <path d="M525 55 L565 55" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrowTeal)"/>

                                {{-- Step 4: 이력관리 --}}
                                <rect x="565" y="20" width="140" height="70" rx="12" fill="#0d9488" stroke="#0d9488" stroke-width="2"/>
                                <text x="635" y="48" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="600">이력관리</text>
                                <text x="635" y="68" text-anchor="middle" fill="#ccfbf1" font-size="10">통계 + 심사 증빙</text>

                                {{-- 화살표 마커 --}}
                                <defs>
                                    <marker id="arrowTeal" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
                                        <path d="M0 0 L8 4 L0 8 Z" fill="#14b8a6"/>
                                    </marker>
                                </defs>

                                {{-- 단계 번호 --}}
                                <circle cx="30" cy="15" r="10" fill="#14b8a6"/>
                                <text x="30" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">1</text>
                                <circle cx="215" cy="15" r="10" fill="#14b8a6"/>
                                <text x="215" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">2</text>
                                <circle cx="400" cy="15" r="10" fill="#14b8a6"/>
                                <text x="400" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">3</text>
                                <circle cx="585" cy="15" r="10" fill="#14b8a6"/>
                                <text x="585" y="19" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="700">4</text>
                            </svg>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 섹션 2: 기능별 사용 가이드 --}}
            {{-- ============================================================ --}}
            <section id="usage" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
                        기능별 사용 가이드
                    </h2>

                    {{-- 2-1. 설비 등록/수정 --}}
                    <div id="usage-registry" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            설비 등록/수정
                        </h3>

                        <div class="space-y-4">
                            <div>
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">필수 입력 항목</h4>
                                <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700">
                                    <div class="flex gap-6" style="flex-wrap: wrap;">
                                        <ul class="space-y-1 list-disc list-inside">
                                            <li><strong>설비코드</strong> — 고유 식별번호 (중복 불가)</li>
                                            <li><strong>설비명</strong> — 설비의 이름</li>
                                            <li><strong>설비유형</strong> — 생산/검사/유틸리티 등 분류</li>
                                        </ul>
                                        <ul class="space-y-1 list-disc list-inside">
                                            <li><strong>설치일</strong> — 설비를 설치한 날짜</li>
                                            <li><strong>설치위치</strong> — 공장 내 위치</li>
                                            <li><strong>담당자</strong> — 설비 관리 책임자</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">사진 첨부 방법</h4>
                                <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 text-xs text-blue-800 leading-relaxed">
                                    <p class="font-semibold mb-1">사진 첨부 3가지 방법:</p>
                                    <ol class="list-decimal list-inside space-y-1">
                                        <li><strong>파일 선택</strong> — "파일 선택" 버튼 클릭 후 이미지 파일 선택</li>
                                        <li><strong>드래그 & 드롭</strong> — 파일 탐색기에서 이미지를 사진 영역에 끌어다 놓기</li>
                                        <li><strong>클립보드 붙여넣기</strong> — 스크린샷 후 <kbd class="bg-blue-100 px-1 rounded">Ctrl</kbd>+<kbd class="bg-blue-100 px-1 rounded">V</kbd>로 바로 붙여넣기</li>
                                    </ol>
                                </div>
                            </div>

                            <div>
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">엑셀 Import로 대량 등록</h4>
                                <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
                                    <ol class="list-decimal list-inside space-y-1">
                                        <li><strong>템플릿 다운로드</strong> — 설비 Import 페이지에서 엑셀 템플릿을 다운로드합니다.</li>
                                        <li><strong>데이터 입력</strong> — 템플릿 양식에 맞춰 설비 데이터를 입력합니다.</li>
                                        <li><strong>파일 업로드</strong> — 작성한 엑셀 파일을 업로드하면 자동으로 설비가 등록됩니다.</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="bg-amber-50 border border-amber-100 rounded-lg p-4 text-xs text-amber-800">
                                <p class="font-semibold mb-1">Tip: 설비코드 규칙</p>
                                <p>설비코드는 한번 등록하면 변경할 수 없습니다. 회사의 설비코드 체계에 맞춰 등록하세요. 예: <code class="bg-amber-100 px-1 rounded">EQ-PR-001</code> (설비-생산-001)</p>
                            </div>
                        </div>
                    </div>

                    {{-- 2-2. 일상점검표 --}}
                    <div id="usage-inspection" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            일상점검표
                        </h3>
                        <div class="space-y-4">
                            <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
                                <p class="mb-2">일상점검표는 <strong>설비별 그리드(표) 형태</strong>로 구성됩니다. 행은 날짜, 열은 점검 항목입니다.</p>
                                <ul class="list-disc list-inside space-y-1">
                                    <li><strong>점검 기록</strong> — 각 셀을 클릭하면 양호(O), 불량(X), 해당없음(-) 등을 선택합니다.</li>
                                    <li><strong>월별 필터</strong> — 상단 월 선택으로 해당 월의 점검 현황만 조회합니다.</li>
                                    <li><strong>설비 선택</strong> — 드롭다운에서 설비를 선택하면 해당 설비의 점검표가 표시됩니다.</li>
                                    <li><strong>항목 관리</strong> — 점검 항목은 설비별로 독립적으로 설정할 수 있습니다.</li>
                                </ul>
                            </div>

                            <div class="bg-amber-50 border border-amber-100 rounded-lg p-4 text-xs text-amber-800">
                                <p class="font-semibold mb-1">Tip: 점검 빈도</p>
                                <p>ISO 9001에서 요구하는 일상점검은 <strong>매일 작업 시작 전</strong>에 수행하는 것이 원칙입니다. SAM에서는 날짜별로 자동 기록되므로 누락 여부를 쉽게 확인할 수 있습니다.</p>
                            </div>
                        </div>
                    </div>

                    {{-- 2-3. 수리이력 --}}
                    <div id="usage-repair" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            수리이력
                        </h3>
                        <div class="space-y-4">
                            <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
                                <p class="mb-2">설비 고장 발생 시 수리 내역을 기록하고 추적합니다.</p>
                                <ul class="list-disc list-inside space-y-1">
                                    <li><strong>수리일</strong> — 수리를 수행한 날짜</li>
                                    <li><strong>고장 내용</strong> — 어떤 고장이 발생했는지 상세 기술</li>
                                    <li><strong>수리 내용</strong> — 어떻게 수리했는지 조치 내역</li>
                                    <li><strong>보전구분</strong> — 사내보전(자체 인력) 또는 외주보전(협력업체)</li>
                                    <li><strong>수리 비용</strong> — 부품비, 인건비, 외주비 등 수리에 소요된 비용</li>
                                    <li><strong>설비 선택</strong> — 수리 대상 설비를 선택하면 해당 설비의 이력에 자동 연결됩니다.</li>
                                </ul>
                            </div>

                            <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 text-xs text-blue-800">
                                <p class="font-semibold mb-1">수리이력 활용</p>
                                <p>수리이력은 설비 상세 페이지에서 <strong>설비별 수리 이력 탭</strong>으로 자동 연결됩니다. 심사관이 특정 설비의 수리 내역을 요청하면 즉시 조회할 수 있습니다.</p>
                            </div>
                        </div>
                    </div>

                    {{-- 2-4. 대시보드 --}}
                    <div id="usage-dashboard" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            대시보드
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
                            <p class="mb-2">설비관리 대시보드는 다음 통계 지표를 제공합니다:</p>
                            <div class="flex gap-6" style="flex-wrap: wrap;">
                                <ul class="space-y-1 list-disc list-inside">
                                    <li><strong>총 설비 수</strong> — 등록된 전체 설비 수량</li>
                                    <li><strong>설비유형별 분포</strong> — 생산/검사/유틸리티 등 비율</li>
                                </ul>
                                <ul class="space-y-1 list-disc list-inside">
                                    <li><strong>월간 점검 현황</strong> — 이번 달 점검 완료율</li>
                                    <li><strong>최근 수리 내역</strong> — 최근 5건의 수리 기록</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 섹션 3: 품질인정심사 대응 --}}
            {{-- ============================================================ --}}
            <section id="audit" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
                        품질인정심사 대응
                    </h2>

                    {{-- 3-1. ISO 9001 요구사항 --}}
                    <div id="audit-iso" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            ISO 9001 설비관리 요구사항
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed space-y-3">
                            <p>ISO 9001:2015 <strong>7.1.3항 (인프라)</strong>과 <strong>7.1.5항 (모니터링 및 측정 자원)</strong>에서 설비관리를 요구합니다:</p>
                            <ul class="list-disc list-inside space-y-1">
                                <li><strong>설비 대장</strong> — 제조에 사용되는 모든 설비의 목록 및 상태 관리</li>
                                <li><strong>예방보전 계획</strong> — 고장을 사전에 방지하기 위한 정기 점검 계획 수립</li>
                                <li><strong>점검 기록</strong> — 일상/정기 점검 결과의 문서화된 기록</li>
                                <li><strong>수리/보수 이력</strong> — 고장 발생 및 조치 내역의 추적 가능한 기록</li>
                                <li><strong>교정 관리</strong> — 측정 장비의 정기적 교정 및 교정 성적서 보관</li>
                            </ul>
                            <p class="text-gray-500">IATF 16949(자동차 산업)는 이에 더해 TPM 활동, OEE 관리, 예비 부품 관리를 추가로 요구합니다.</p>
                        </div>
                    </div>

                    {{-- 3-2. SAM 자동 생성 증빙 --}}
                    <div id="audit-evidence" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            SAM이 자동으로 생성하는 증빙 자료
                        </h3>
                        <div class="bg-green-50 border border-green-100 rounded-lg p-5 text-xs text-green-800 leading-relaxed">
                            <p class="font-semibold text-green-900 mb-3">SAM 설비관리를 사용하면 다음 증빙이 자동으로 관리됩니다:</p>
                            <div class="flex gap-4" style="flex-wrap: wrap;">
                                <div class="space-y-1" style="flex: 1 1 200px;">
                                    <div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 설비 등록대장 (목록+상세)</div>
                                    <div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 일상점검 기록표</div>
                                    <div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 수리/보수 이력대장</div>
                                </div>
                                <div class="space-y-1" style="flex: 1 1 200px;">
                                    <div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 설비별 사진 증빙</div>
                                    <div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 설비유형별 통계 현황</div>
                                    <div class="flex items-center gap-1"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 수리 비용 추적 데이터</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 3-3. 전산화 vs 수기 비교 --}}
                    <div id="audit-compare" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            전산화 vs 수기 관리 비교
                        </h3>
                        <div class="overflow-x-auto rounded-lg border border-gray-200">
                            <table class="w-full text-xs">
                                <thead>
                                    <tr class="bg-gray-50 border-b border-gray-200">
                                        <th class="text-left p-3 font-semibold text-gray-700" style="width: 25%;">항목</th>
                                        <th class="text-left p-3 font-semibold text-red-600" style="width: 37%;">수기 방식</th>
                                        <th class="text-left p-3 font-semibold text-teal-700" style="width: 38%;">SAM 전산화</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 text-gray-700">
                                    <tr>
                                        <td class="p-3 font-medium">설비대장 관리</td>
                                        <td class="p-3">엑셀/종이 → 분실 위험, 버전 혼동</td>
                                        <td class="p-3 text-teal-700">DB 영구보관 + 자동 백업</td>
                                    </tr>
                                    <tr class="bg-gray-50">
                                        <td class="p-3 font-medium">점검 기록</td>
                                        <td class="p-3">체크시트 수기 작성 → 판독 어려움</td>
                                        <td class="p-3 text-teal-700">클릭 한 번으로 기록, 즉시 조회</td>
                                    </tr>
                                    <tr>
                                        <td class="p-3 font-medium">수리이력</td>
                                        <td class="p-3">별도 파일 관리 → 연결성 없음</td>
                                        <td class="p-3 text-teal-700">설비별 자동 연결, 이력 추적</td>
                                    </tr>
                                    <tr class="bg-gray-50">
                                        <td class="p-3 font-medium">심사 준비 시간</td>
                                        <td class="p-3">서류 찾느라 수일~수주 소요</td>
                                        <td class="p-3 text-teal-700">즉시 조회, 클릭 한 번으로 출력</td>
                                    </tr>
                                    <tr>
                                        <td class="p-3 font-medium">사진 증빙</td>
                                        <td class="p-3">별도 폴더 관리 → 설비와 연결 안됨</td>
                                        <td class="p-3 text-teal-700">설비에 직접 첨부, 자동 연결</td>
                                    </tr>
                                    <tr class="bg-gray-50">
                                        <td class="p-3 font-medium">데이터 분석</td>
                                        <td class="p-3">수동 집계 → 오류 가능성 높음</td>
                                        <td class="p-3 text-teal-700">대시보드 자동 통계, 실시간 현황</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 섹션 4: 설비 보전 기초 지식 --}}
            {{-- ============================================================ --}}
            <section id="knowledge" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
                        설비 보전 기초 지식
                    </h2>

                    {{-- 4-1. 보전 유형 비교 --}}
                    <div id="knowledge-types" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            보전 유형 비교
                        </h3>
                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 overflow-x-auto">
                            <svg viewBox="0 0 700 180" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto" style="max-width: 700px; width: 100%; height: auto;">
                                {{-- BM (사후보전) --}}
                                <rect x="10" y="40" width="190" height="90" rx="12" fill="#fef2f2" stroke="#fca5a5" stroke-width="2"/>
                                <text x="105" y="65" text-anchor="middle" fill="#dc2626" font-size="14" font-weight="700">BM (사후보전)</text>
                                <text x="105" y="85" text-anchor="middle" fill="#7f1d1d" font-size="10">고장 발생 후 수리</text>
                                <text x="105" y="102" text-anchor="middle" fill="#991b1b" font-size="9">비용 높음 / 손실 큼</text>
                                <text x="105" y="120" text-anchor="middle" fill="#b91c1c" font-size="9">비계획 정지 발생</text>

                                {{-- Arrow BM→PM --}}
                                <path d="M205 85 L250 85" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowGray)"/>
                                <text x="228" y="78" text-anchor="middle" fill="#94a3b8" font-size="9">진화</text>

                                {{-- PM (예방보전) --}}
                                <rect x="250" y="40" width="190" height="90" rx="12" fill="#fefce8" stroke="#fde047" stroke-width="2"/>
                                <text x="345" y="65" text-anchor="middle" fill="#a16207" font-size="14" font-weight="700">PM (예방보전)</text>
                                <text x="345" y="85" text-anchor="middle" fill="#713f12" font-size="10">정기 점검/교체</text>
                                <text x="345" y="102" text-anchor="middle" fill="#854d0e" font-size="9">계획적 보전 수행</text>
                                <text x="345" y="120" text-anchor="middle" fill="#a16207" font-size="9">비계획 정지 감소</text>

                                {{-- Arrow PM→PdM --}}
                                <path d="M445 85 L490 85" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowGray)"/>
                                <text x="468" y="78" text-anchor="middle" fill="#94a3b8" font-size="9">진화</text>

                                {{-- PdM (예지보전) --}}
                                <rect x="490" y="40" width="190" height="90" rx="12" fill="#f0fdfa" stroke="#14b8a6" stroke-width="2"/>
                                <text x="585" y="65" text-anchor="middle" fill="#0f766e" font-size="14" font-weight="700">PdM (예지보전)</text>
                                <text x="585" y="85" text-anchor="middle" fill="#134e4a" font-size="10">데이터 기반 예측</text>
                                <text x="585" y="102" text-anchor="middle" fill="#115e59" font-size="9">최적 시점에 보전</text>
                                <text x="585" y="120" text-anchor="middle" fill="#0f766e" font-size="9">비용 최소화</text>

                                {{-- 상단 레이블 --}}
                                <text x="105" y="25" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="600">Level 1</text>
                                <text x="345" y="25" text-anchor="middle" fill="#eab308" font-size="11" font-weight="600">Level 2</text>
                                <text x="585" y="25" text-anchor="middle" fill="#14b8a6" font-size="11" font-weight="600">Level 3</text>

                                {{-- SAM 위치 표시 --}}
                                <rect x="250" y="145" width="190" height="24" rx="6" fill="#14b8a6"/>
                                <text x="345" y="161" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="600">SAM: PM 레벨 지원</text>

                                <defs>
                                    <marker id="arrowGray" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
                                        <path d="M0 0 L8 4 L0 8 Z" fill="#94a3b8"/>
                                    </marker>
                                </defs>
                            </svg>
                        </div>
                        <p class="text-xs text-gray-500 mt-2 text-center">SAM 설비관리는 PM(예방보전) 레벨을 지원하며, 축적된 데이터를 기반으로 PdM 전환을 준비할 수 있습니다.</p>
                    </div>

                    {{-- 4-2. OEE 공식 --}}
                    <div id="knowledge-oee" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            OEE (설비종합효율) 공식
                        </h3>
                        <div class="bg-teal-50 border border-teal-100 rounded-lg p-5">
                            <div class="text-center mb-4">
                                <p class="text-lg font-bold text-teal-800">OEE = 가동률 x 성능효율 x 양품률</p>
                            </div>
                            <div class="flex gap-3 text-xs" style="flex-wrap: wrap;">
                                <div class="bg-white border border-teal-200 rounded-lg p-3" style="flex: 1 1 150px;">
                                    <p class="font-semibold text-teal-700 mb-1">가동률 (Availability)</p>
                                    <p class="text-gray-600">실제 가동시간 / 계획 가동시간</p>
                                    <p class="text-gray-500 mt-1">설비가 실제로 돌아간 비율</p>
                                </div>
                                <div class="bg-white border border-teal-200 rounded-lg p-3" style="flex: 1 1 150px;">
                                    <p class="font-semibold text-teal-700 mb-1">성능효율 (Performance)</p>
                                    <p class="text-gray-600">이론 사이클타임 x 생산량 / 가동시간</p>
                                    <p class="text-gray-500 mt-1">정상 속도로 돌아간 비율</p>
                                </div>
                                <div class="bg-white border border-teal-200 rounded-lg p-3" style="flex: 1 1 150px;">
                                    <p class="font-semibold text-teal-700 mb-1">양품률 (Quality)</p>
                                    <p class="text-gray-600">양품 수 / 총 생산량</p>
                                    <p class="text-gray-500 mt-1">불량 없이 생산한 비율</p>
                                </div>
                            </div>
                            <div class="mt-4 text-xs text-teal-700">
                                <p><strong>세계적 수준:</strong> OEE 85% 이상 | <strong>일반 제조업:</strong> 60~75% | <strong>개선 필요:</strong> 60% 미만</p>
                            </div>
                        </div>
                    </div>

                    {{-- 4-3. 고장 분석 기법 --}}
                    <div id="knowledge-analysis" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            고장 분석 기법
                        </h3>
                        <div class="space-y-4">
                            {{-- Why-Why 분석 --}}
                            <div>
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">Why-Why 분석 (5 Whys)</h4>
                                <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
                                    <p class="mb-3">"왜?"를 5번 반복하여 고장의 <strong>근본 원인</strong>을 찾는 기법입니다.</p>
                                    <div class="bg-white border border-gray-200 rounded-lg p-3 space-y-2">
                                        <p><strong class="text-red-600">현상:</strong> 모터가 과열된다</p>
                                        <p class="pl-3"><strong>Why 1:</strong> 왜 과열되는가? → 냉각팬이 작동하지 않는다</p>
                                        <p class="pl-6"><strong>Why 2:</strong> 왜 작동하지 않는가? → 팬 벨트가 끊어졌다</p>
                                        <p class="pl-9"><strong>Why 3:</strong> 왜 끊어졌는가? → 벨트가 마모되었다</p>
                                        <p class="pl-12"><strong>Why 4:</strong> 왜 마모되었는가? → 교체 주기를 넘겼다</p>
                                        <p class="pl-12"><strong class="text-teal-600">Why 5:</strong> 왜 넘겼는가? → <strong class="text-teal-600">예방보전 계획이 없었다 (근본 원인)</strong></p>
                                    </div>
                                    <p class="mt-3 text-teal-700 font-medium">→ SAM 일상점검표로 벨트 마모 상태를 정기적으로 확인하면 예방 가능합니다.</p>
                                </div>
                            </div>

                            {{-- 파레토 분석 --}}
                            <div>
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">파레토 분석 (80/20 법칙)</h4>
                                <div class="bg-gray-50 rounded-lg p-4 text-xs text-gray-700 leading-relaxed">
                                    <p class="mb-2">고장 원인을 빈도순으로 정렬하면, <strong>상위 20%의 원인이 80%의 고장을 유발</strong>한다는 법칙입니다.</p>
                                    <ul class="list-disc list-inside space-y-1">
                                        <li>SAM 수리이력 데이터를 축적하면 고장 유형별 빈도를 분석할 수 있습니다.</li>
                                        <li>빈도가 높은 고장 원인부터 집중적으로 개선하면 효율적으로 고장률을 줄일 수 있습니다.</li>
                                        <li>품질 심사에서도 "데이터 기반 개선 활동"의 증빙으로 활용됩니다.</li>
                                    </ul>
                                </div>
                            </div>

                            {{-- MTBF/MTTR --}}
                            <div class="bg-teal-50 border border-teal-100 rounded-lg p-4 text-xs text-teal-800">
                                <p class="font-semibold mb-2">핵심 지표: MTBF & MTTR</p>
                                <div class="flex gap-4" style="flex-wrap: wrap;">
                                    <div style="flex: 1 1 200px;">
                                        <p><strong>MTBF</strong> (평균 고장 간격) = 총 가동시간 / 고장 횟수</p>
                                        <p class="text-teal-600 mt-1">값이 클수록 설비 신뢰성이 높음</p>
                                    </div>
                                    <div style="flex: 1 1 200px;">
                                        <p><strong>MTTR</strong> (평균 수리 시간) = 총 수리시간 / 고장 횟수</p>
                                        <p class="text-teal-600 mt-1">값이 작을수록 보전 역량이 높음</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 섹션 5: 자주 묻는 질문 (FAQ) --}}
            {{-- ============================================================ --}}
            <section id="faq" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
                        자주 묻는 질문 (FAQ)
                    </h2>

                    <div class="space-y-3">
                        {{-- FAQ 1 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 설비코드는 어떤 체계로 만들어야 하나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 회사 내부 규정에 따르되, 일반적인 체계는 다음과 같습니다:</p>
                                <ul class="list-disc list-inside mt-2 space-y-1">
                                    <li><code class="bg-gray-100 px-1 rounded">EQ-PR-001</code> — 설비(EQ) + 생산(PR) + 일련번호(001)</li>
                                    <li><code class="bg-gray-100 px-1 rounded">EQ-IS-001</code> — 설비(EQ) + 검사(IS) + 일련번호(001)</li>
                                    <li><code class="bg-gray-100 px-1 rounded">EQ-UT-001</code> — 설비(EQ) + 유틸리티(UT) + 일련번호(001)</li>
                                </ul>
                                <p class="mt-2 text-gray-500">설비코드는 한번 등록하면 변경할 수 없으므로 신중하게 결정하세요.</p>
                            </div>
                        </details>

                        {{-- FAQ 2 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 설비 사진은 몇 장까지 등록할 수 있나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 설비 1건당 사진 수에는 제한이 없습니다. 다만 개별 파일 크기는 10MB 이하를 권장합니다. 설비 전면, 측면, 명판 등 심사에 필요한 사진을 모두 등록하세요.</p>
                            </div>
                        </details>

                        {{-- FAQ 3 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 엑셀 Import 시 설비코드가 중복되면 어떻게 되나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 이미 등록된 설비코드와 동일한 코드가 엑셀에 포함되어 있으면 해당 행은 <strong>건너뛰기(skip)</strong> 처리됩니다. Import 완료 후 결과 요약에서 건너뛴 항목을 확인할 수 있습니다.</p>
                            </div>
                        </details>

                        {{-- FAQ 4 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 이미 기록한 점검 데이터를 수정할 수 있나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 네, 점검 그리드에서 해당 셀을 다시 클릭하면 값을 변경할 수 있습니다. 단, 수정 이력이 기록되므로 심사 시 투명성이 유지됩니다.</p>
                            </div>
                        </details>

                        {{-- FAQ 5 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 삭제한 설비를 복구할 수 있나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> SAM에서는 설비를 완전 삭제하지 않고 <strong>비활성화(소프트 삭제)</strong> 처리합니다. 비활성화된 설비는 목록에서 숨겨지지만 데이터는 보존되어, 관리자가 복구할 수 있습니다.</p>
                            </div>
                        </details>

                        {{-- FAQ 6 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 수리이력에서 보전구분(사내/외주)은 왜 구분하나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 보전구분은 비용 분석과 보전 역량 평가에 필요합니다:</p>
                                <ul class="list-disc list-inside mt-2 space-y-1">
                                    <li><strong>사내보전</strong> — 자체 기술 인력이 수리. 인건비만 발생하며 즉시 대응 가능</li>
                                    <li><strong>외주보전</strong> — 외부 협력업체에 의뢰. 전문성은 높지만 비용과 시간이 더 소요</li>
                                </ul>
                                <p class="mt-2">품질 심사에서도 자체 보전 역량과 외주 관리 체계를 확인합니다.</p>
                            </div>
                        </details>

                        {{-- FAQ 7 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 설비 담당자를 변경하려면 어떻게 하나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 설비 상세 페이지에서 "수정" 버튼을 클릭한 뒤, 담당자 항목을 변경하고 저장하면 됩니다. 변경 이력이 자동으로 기록됩니다.</p>
                            </div>
                        </details>

                        {{-- FAQ 8 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 점검 항목을 설비마다 다르게 설정할 수 있나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 네, 점검 항목은 설비별로 독립적으로 관리됩니다. 설비 특성에 맞는 점검 항목(온도 확인, 소음 점검, 오일 상태 등)을 각각 설정할 수 있습니다.</p>
                            </div>
                        </details>

                        {{-- FAQ 9 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 대시보드 통계는 실시간으로 업데이트되나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 네, 대시보드에 접속할 때마다 최신 데이터를 기반으로 통계가 계산됩니다. 설비 등록, 점검 기록, 수리이력을 입력하면 즉시 대시보드에 반영됩니다.</p>
                            </div>
                        </details>

                        {{-- FAQ 10 --}}
                        <details class="bg-gray-50 rounded-lg border border-gray-200">
                            <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg flex items-center justify-between">
                                <span>Q. 설비관리 데이터를 엑셀로 내보낼 수 있나요?</span>
                                <svg class="w-4 h-4 text-gray-400 shrink-0 chevron-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </summary>
                            <div class="px-4 pb-4 text-xs text-gray-700 leading-relaxed">
                                <p><strong>A.</strong> 설비 목록 페이지에서 엑셀 다운로드 기능을 제공합니다. 등록된 전체 설비 정보를 엑셀 파일로 내보내어 보고서 작성이나 심사 자료로 활용할 수 있습니다.</p>
                            </div>
                        </details>
                    </div>

                    {{-- 핵심 정리 --}}
                    <div class="mt-6 bg-teal-50 rounded-lg p-5 border border-teal-100">
                        <h4 class="font-semibold text-teal-800 mb-2 text-sm">핵심 정리</h4>
                        <p class="text-xs text-teal-700 leading-relaxed">
                            SAM 설비관리는 <strong>설비 등록 → 일상점검 → 수리이력 → 통계/증빙</strong>의 일관된 흐름으로 운영됩니다.
                            모든 데이터는 설비별로 자동 연결되어 품질인정심사 시 <strong>즉시 조회 가능한 증빙 자료</strong>가 됩니다.
                            기존 수기 관리 대비 <strong>데이터 유실 방지, 심사 준비 시간 단축, 이력 추적성 확보</strong>가 핵심 이점입니다.
                        </p>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>

{{-- 클릭 라이트박스 --}}
<div id="lightbox" onclick="closeLightbox()">
    <button onclick="closeLightbox()" style="position:absolute; top:1rem; right:1rem; background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.8); padding:0.5rem;">
        <svg style="width:2rem; height:2rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
    </button>
    <img id="lightbox-img" onclick="event.stopPropagation()">
</div>
<script>
(function() {
    window.openLightbox = function(el) {
        var lb = document.getElementById('lightbox');
        var img = document.getElementById('lightbox-img');
        img.src = el.src;
        img.alt = el.alt;
        lb.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    };

    window.closeLightbox = function() {
        var lb = document.getElementById('lightbox');
        lb.classList.remove('is-open');
        document.body.style.overflow = '';
    };

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeLightbox();
        }
    });
})();
</script>

@include('components.academy-glossary', ['domain' => 'equipment'])
@endsection
