@extends('layouts.app')

@section('title', '방화셔터')

@push('styles')
<style>
    /* 이미지 기본 스타일 */
    .academy-img-hover {
        transition: box-shadow 0.2s ease;
    }
    .academy-img-hover:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .academy-img-wrap {
        overflow: hidden;
        border-radius: 0.75rem;
    }

    /* hover 프리뷰 오버레이 */
    #hover-preview {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 45;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(3px);
        pointer-events: none;
    }
    #hover-preview.is-active {
        display: flex;
        pointer-events: none;
    }
    #hover-preview img {
        max-height: 80vh;
        max-width: 85vw;
        border-radius: 0.75rem;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
        opacity: 0;
        transform: scale(0.3);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    #hover-preview.is-active img {
        opacity: 1;
        transform: scale(1);
    }
    #hover-preview .hover-caption {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.85);
        font-size: 0.8rem;
        background: rgba(0,0,0,0.5);
        padding: 0.4rem 1rem;
        border-radius: 2rem;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease 0.15s;
    }
    #hover-preview.is-active .hover-caption {
        opacity: 1;
    }

    /* 클릭 라이트박스 */
    #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);
    }

    /* 셔터 동작 애니메이션 */
    @keyframes shutter-move {
        0%, 5%   { transform: translateY(-150px); }
        35%, 45% { transform: translateY(0px); }
        65%, 75% { transform: translateY(45px); }
        95%, 100%{ transform: translateY(-150px); }
    }
    .shutter-curtain {
        animation: shutter-move 8s ease-in-out infinite;
    }
    .shutter-curtain.paused {
        animation-play-state: paused;
    }
</style>
@endpush

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

    <!-- 히어로 배너 (5.png - 샤프트 어셈블리) -->
    <div class="rounded-2xl overflow-hidden mb-8 shadow-lg" style="background: linear-gradient(135deg, #1e293b 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: #fca5a5;">
                    <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: 240px; padding: 1.5rem;">
                <div class="overflow-hidden rounded-xl">
                    <img src="{{ asset('images/academy/fire-shutter/5.svg') }}" alt="방화셔터 샤프트 어셈블리"
                         class="w-full rounded-xl cursor-pointer academy-img-hover"
                         onclick="openLightbox(this)">
                </div>
            </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-red-50 border border-red-200 rounded-xl p-5">
                    <h2 class="font-semibold text-red-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="#overview" class="block text-red-700 hover:text-red-900 py-1 font-medium">1. 개요</a>
                        <a href="#overview-definition" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">정의 및 용도</a>
                        <a href="#overview-types" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">종류</a>
                        <a href="#overview-diff" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">차이점 비교</a>
                        <a href="#overview-law" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">관련 법규</a>
                        <a href="#overview-grade" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">내화성능 등급</a>

                        <a href="#components" class="block text-red-700 hover:text-red-900 py-1 font-medium mt-2">2. 구성품</a>
                        <a href="#comp-diagram" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">전체 구성도</a>
                        <a href="#comp-slat" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">슬랫</a>
                        <a href="#comp-guide" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">가이드레일</a>
                        <a href="#comp-barrel" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">샤프트(Shaft)</a>
                        <a href="#comp-electric" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">전장부품</a>
                        <a href="#comp-etc" class="block text-red-600 hover:text-red-800 py-0.5 pl-3">기타 부품</a>

                        <a href="#manufacturing" class="block text-red-700 hover:text-red-900 py-1 font-medium mt-2">3. 제조 공정</a>
                        <a href="#install" class="block text-red-700 hover:text-red-900 py-1 font-medium mt-2">4. 설치 및 시공</a>
                        <a href="#maintenance" class="block text-red-700 hover:text-red-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-red-50 border border-red-200 rounded-xl p-4 mb-6">
                <details>
                    <summary class="font-semibold text-red-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="#overview" class="block text-red-700 hover:text-red-900 py-1">1. 개요</a>
                        <a href="#components" class="block text-red-700 hover:text-red-900 py-1">2. 구성품</a>
                        <a href="#manufacturing" class="block text-red-700 hover:text-red-900 py-1">3. 제조 공정</a>
                        <a href="#install" class="block text-red-700 hover:text-red-900 py-1">4. 설치 및 시공</a>
                        <a href="#maintenance" class="block text-red-700 hover:text-red-900 py-1">5. 유지보수</a>
                    </nav>
                </details>
            </div>

            {{-- ============================================================ --}}
            {{-- 1. 개요 --}}
            {{-- ============================================================ --}}
            <section id="overview" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
                        개요
                    </h2>

                    <!-- 1-1. 정의 및 용도 + 8.png (2단계 폐쇄 시퀀스) -->
                    <div id="overview-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-red-400 rounded-full"></span>
                            정의 및 용도
                        </h3>
                        <div class="bg-red-50 rounded-lg p-5 border border-red-100 mb-4">
                            <p class="text-sm text-red-900 leading-relaxed">
                                <strong>방화셔터(Fire Shutter)</strong>란 건축물의 방화구획에 설치되어, 화재 발생 시 연기감지기 및 열감지기의 신호에 따라 <strong>자동으로 폐쇄</strong>되어 화재와 연기의 확산을 차단하는 방화설비이다.
                            </p>
                        </div>
                        <div class="flex flex-col lg:flex-row gap-5 items-start mb-4">
                            <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 240px;">
                                <img src="{{ asset('images/academy/fire-shutter/8.svg') }}" alt="2단계 폐쇄 시퀀스"
                                     class="w-full rounded-lg cursor-pointer academy-img-hover"
                                     onclick="openLightbox(this)">
                                <p class="text-xs text-gray-400 mt-2 text-center">2단계 폐쇄 시퀀스</p>
                            </div>
                            <div class="flex-1 min-w-0 text-sm text-gray-700 space-y-2">
                                <p>공항, 대형마트, 지하상가, 체육관 등 <strong>넓은 개방 공간</strong>에서 내화구조 벽을 설치하기 어려운 경우 벽체를 대신하여 방화구획을 형성한다.</p>
                                <p>평상시에는 천장 케이스 안에 감겨 있어 통행에 지장을 주지 않으며, 화재 시에만 자동으로 하강하여 구획을 차단한다.</p>
                                <div class="mt-3 bg-amber-50 rounded-lg p-3 border border-amber-100">
                                    <p class="text-xs text-amber-800">
                                        <strong>2단계 폐쇄 원리:</strong> 1차로 연기감지기가 작동하면 셔터가 바닥에서 약 1m 높이까지 하강(일부폐쇄)하여 대피 공간을 확보하고, 2차로 열감지기가 작동하면 완전 폐쇄되어 화재를 차단한다.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 셔터 동작 애니메이션 -->
                        <div class="mt-6 mb-2">
                            <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <svg class="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                셔터 동작 시뮬레이션
                            </h4>
                            <div class="bg-gray-50 rounded-xl p-4 border" style="max-width: 480px;">
                                <svg viewBox="0 0 300 260" class="w-full" style="max-width: 400px; display: block; margin: 0 auto;">
                                    <defs>
                                        <clipPath id="shutter-clip">
                                            <rect x="83" y="70" width="134" height="150"/>
                                        </clipPath>
                                    </defs>

                                    <!-- 배경 -->
                                    <rect x="0" y="0" width="300" height="260" fill="#fef2f2" rx="8"/>

                                    <!-- 천장 -->
                                    <rect x="60" y="25" width="180" height="10" fill="#d1d5db" stroke="#9ca3af" stroke-width="1" rx="2"/>

                                    <!-- 케이스 -->
                                    <rect x="75" y="35" width="150" height="35" fill="#fee2e2" stroke="#dc2626" stroke-width="1" rx="3"/>
                                    <!-- 샤프트 (롤) -->
                                    <circle cx="150" cy="52" r="10" fill="#fecdd3" stroke="#dc2626" stroke-width="1"/>
                                    <circle cx="150" cy="52" r="3" fill="#dc2626"/>

                                    <!-- 가이드레일 좌/우 -->
                                    <rect x="78" y="70" width="5" height="150" fill="#fca5a5" stroke="#dc2626" stroke-width="0.5" rx="1"/>
                                    <rect x="217" y="70" width="5" height="150" fill="#fca5a5" stroke="#dc2626" stroke-width="0.5" rx="1"/>

                                    <!-- 바닥 -->
                                    <rect x="60" y="220" width="180" height="8" fill="#d1d5db" stroke="#9ca3af" stroke-width="1" rx="2"/>

                                    <!-- 1차 정지선 (점선) -->
                                    <line x1="83" y1="175" x2="217" y2="175" stroke="#f59e0b" stroke-width="0.5" stroke-dasharray="4,3" opacity="0.5"/>
                                    <text x="228" y="178" font-size="7" fill="#d97706" font-family="sans-serif" opacity="0.7">1차 정지</text>

                                    <!-- 슬랫 커튼 (애니메이션) -->
                                    <g clip-path="url(#shutter-clip)">
                                        <g class="shutter-curtain paused">
                                            @for ($i = 0; $i < 16; $i++)
                                            <rect x="83" y="{{ 59 + $i * 7 }}" width="134" height="6"
                                                  fill="{{ $i % 2 === 0 ? '#fecdd3' : '#ffe4e6' }}"
                                                  stroke="#e11d48" stroke-width="0.5" rx="1"/>
                                            @endfor
                                            <!-- 하단바 -->
                                            <rect x="80" y="171" width="140" height="4" fill="#dc2626" stroke="#991b1b" stroke-width="0.5" rx="1"/>
                                        </g>
                                    </g>

                                    <!-- 라벨 -->
                                    <text x="255" y="33" font-size="8" fill="#9ca3af" text-anchor="middle" font-family="sans-serif">천장</text>
                                    <text x="255" y="55" font-size="8" fill="#9ca3af" text-anchor="middle" font-family="sans-serif">케이스</text>
                                    <text x="42" y="145" font-size="8" fill="#9ca3af" text-anchor="middle" font-family="sans-serif">가이드</text>
                                    <text x="42" y="155" font-size="8" fill="#9ca3af" text-anchor="middle" font-family="sans-serif">레일</text>
                                    <text x="255" y="227" font-size="8" fill="#9ca3af" text-anchor="middle" font-family="sans-serif">바닥</text>

                                    <!-- 단계 표시 -->
                                    <g font-family="sans-serif">
                                        <text x="18" y="95" font-size="7" fill="#dc2626" text-anchor="middle">연기</text>
                                        <text x="18" y="104" font-size="7" fill="#dc2626" text-anchor="middle">감지</text>
                                        <line x1="30" y1="98" x2="75" y2="98" stroke="#dc2626" stroke-width="0.5" stroke-dasharray="2,2" opacity="0.4"/>

                                        <text x="18" y="200" font-size="7" fill="#ef4444" text-anchor="middle">열</text>
                                        <text x="18" y="209" font-size="7" fill="#ef4444" text-anchor="middle">감지</text>
                                        <line x1="30" y1="203" x2="75" y2="203" stroke="#ef4444" stroke-width="0.5" stroke-dasharray="2,2" opacity="0.4"/>
                                    </g>
                                </svg>

                                <!-- 컨트롤 -->
                                <div class="flex items-center gap-3 mt-3">
                                    <button onclick="toggleShutterAnim()" id="shutter-play-btn"
                                            class="px-3 py-1.5 bg-red-500 text-white text-xs rounded-lg hover:bg-red-600 transition-colors font-medium">
                                        ▶ 재생
                                    </button>
                                    <button onclick="resetShutterAnim()"
                                            class="px-3 py-1.5 bg-gray-200 text-gray-600 text-xs rounded-lg hover:bg-gray-300 transition-colors">
                                        ↻ 처음으로
                                    </button>
                                    <span id="shutter-status" class="text-xs font-medium text-green-600">
                                        상태: 평상시
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 1-2. 종류 + 11.png (강판형 vs 스크린형) -->
                    <div id="overview-types" 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-red-400 rounded-full"></span>
                            종류
                        </h3>
                        <!-- 강판형 vs 스크린형 이미지 -->
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/fire-shutter/11.svg') }}" alt="강판형 vs 스크린형 비교"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">강판형(Steel Plate)과 스크린형(Screen/Fabric) 비교</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 mb-2 text-sm">강판형 (Steel Plate)</h4>
                                <ul class="text-xs text-gray-600 space-y-1">
                                    <li>- EGI(전기아연도금강판) 슬랫을 인터록킹 방식으로 연결</li>
                                    <li>- 가장 보편적이며 밀폐성/내구성 우수</li>
                                    <li>- 슬랫 두께: 방화용 1.6mm (KS F 4510)</li>
                                    <li>- 중량이 무거워 대형 개구부 시 모터 용량 증가</li>
                                </ul>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 mb-2 text-sm">스크린형 (Screen / Fabric)</h4>
                                <ul class="text-xs text-gray-600 space-y-1">
                                    <li>- 실리카(SiO<sub>2</sub>) 계열 특수 내화섬유 직조</li>
                                    <li>- 경량, 가이드레일 폭 11mm 수준</li>
                                    <li>- 반투명 소재로 화재 시 반대편 육안 확인 가능</li>
                                    <li>- 에스컬레이터, 아트리움 등 대형 개구부에 사용</li>
                                </ul>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 mb-2 text-sm">분리형 (Separate)</h4>
                                <ul class="text-xs text-gray-600 space-y-1">
                                    <li>- 방화셔터와 방화문이 분리 설치</li>
                                    <li>- 셔터 옆에 별도 비상문(방화문) 설치</li>
                                    <li>- 피난 동선 확보에 유리</li>
                                    <li>- 대부분의 신축 건물에서 채택</li>
                                </ul>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 border relative">
                                <h4 class="font-semibold text-gray-800 mb-2 text-sm">일체형 (Integrated)</h4>
                                <span class="absolute top-3 right-3 px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-xs font-medium">설치 금지</span>
                                <ul class="text-xs text-gray-600 space-y-1">
                                    <li>- 셔터 내에 비상문(도어)이 일체화된 형식</li>
                                    <li>- 피난로 인식 지연, 비상문 개폐 어려움 문제</li>
                                    <li>- <strong class="text-red-600">2020.01.30 이후 신축 건축물 설치 금지</strong></li>
                                    <li>- 기존 건물은 분리형으로 교체 권장</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 1-3. 차이점 비교 -->
                    <div id="overview-diff" 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-red-400 rounded-full"></span>
                            일반셔터 / 방화문 / 방화셔터 비교
                        </h3>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">구분</th>
                                        <th class="text-center py-2 px-3 font-medium text-gray-600">일반셔터</th>
                                        <th class="text-center py-2 px-3 font-medium text-blue-600">방화문</th>
                                        <th class="text-center py-2 px-3 font-medium text-red-600">방화셔터</th>
                                    </tr>
                                </thead>
                                <tbody class="text-gray-700 text-xs">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">주 용도</td>
                                        <td class="py-2 px-3 text-center">보안/방범</td>
                                        <td class="py-2 px-3 text-center">방화구획 (출입구)</td>
                                        <td class="py-2 px-3 text-center">방화구획 (대형 개구부)</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">내화성능</td>
                                        <td class="py-2 px-3 text-center">없음</td>
                                        <td class="py-2 px-3 text-center">비차열 1시간 이상</td>
                                        <td class="py-2 px-3 text-center">비차열 1시간 이상</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">차연성능</td>
                                        <td class="py-2 px-3 text-center">없음</td>
                                        <td class="py-2 px-3 text-center">있음</td>
                                        <td class="py-2 px-3 text-center">있음 (연기차단)</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">작동방식</td>
                                        <td class="py-2 px-3 text-center">수동/전동</td>
                                        <td class="py-2 px-3 text-center">수동 개폐</td>
                                        <td class="py-2 px-3 text-center">감지기 연동 자동폐쇄</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">설치 폭</td>
                                        <td class="py-2 px-3 text-center">제한 없음</td>
                                        <td class="py-2 px-3 text-center">약 3m 이내</td>
                                        <td class="py-2 px-3 text-center">15m 이상 가능</td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3 font-medium">법적 근거</td>
                                        <td class="py-2 px-3 text-center">-</td>
                                        <td class="py-2 px-3 text-center">건축법 시행령 제46조</td>
                                        <td class="py-2 px-3 text-center">건축법 시행령 제46조</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 1-4. 관련 법규 -->
                    <div id="overview-law" 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-red-400 rounded-full"></span>
                            관련 법규
                        </h3>
                        <div class="space-y-3">
                            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
                                <h4 class="font-semibold text-blue-800 text-sm mb-2">건축법 시행령 제46조 (방화구획 등의 설치)</h4>
                                <ul class="text-xs text-blue-900 space-y-1">
                                    <li>- 주요구조부가 내화구조인 건축물로서 <strong>연면적 1,000m&sup2;</strong>를 넘는 경우 방화구획 의무</li>
                                    <li>- 10층 이하: 바닥면적 <strong>1,000m&sup2;</strong> 이내마다 구획 (스프링클러 시 3,000m&sup2;)</li>
                                    <li>- 11층 이상: 바닥면적 <strong>200m&sup2;</strong> 이내마다 구획 (스프링클러 시 600m&sup2;)</li>
                                </ul>
                            </div>
                            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
                                <h4 class="font-semibold text-blue-800 text-sm mb-2">자동방화셔터 및 방화문의 기준 (국토교통부 고시)</h4>
                                <ul class="text-xs text-blue-900 space-y-1">
                                    <li>- 연기감지기에 의한 <strong>일부폐쇄</strong> + 열감지기에 의한 <strong>완전폐쇄</strong> 2단계 구조</li>
                                    <li>- 셔터 하강 시 경보음 발생 의무</li>
                                    <li>- 분리형: 별도 방화문 설치, 복합형: 셔터 내 비상문 일체화</li>
                                </ul>
                            </div>
                            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
                                <h4 class="font-semibold text-blue-800 text-sm mb-2">소방시설법 (유지관리)</h4>
                                <ul class="text-xs text-blue-900 space-y-1">
                                    <li>- <strong>작동기능점검</strong>: 연 1회 이상 (인위적 작동 확인)</li>
                                    <li>- <strong>종합정밀점검</strong>: 연 1회 이상 (구성 부품 구조기준 적합성)</li>
                                    <li>- 방화셔터 훼손/철거 시 중대위반사항으로 즉시 조치 의무</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 1-5. 내화성능 등급 -->
                    <div id="overview-grade" 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-red-400 rounded-full"></span>
                            내화성능 등급
                        </h3>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">등급</th>
                                        <th class="text-center py-2 px-3 font-medium text-gray-600">내화시간</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">적용 대상</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">시험 기준</th>
                                    </tr>
                                </thead>
                                <tbody class="text-gray-700 text-xs">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">1시간</span></td>
                                        <td class="py-2 px-3 text-center">60분</td>
                                        <td class="py-2 px-3">일반 방화구획</td>
                                        <td class="py-2 px-3">KS F 2268-1</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3"><span class="px-2 py-0.5 bg-orange-100 text-orange-800 rounded-full text-xs font-medium">2시간</span></td>
                                        <td class="py-2 px-3 text-center">120분</td>
                                        <td class="py-2 px-3">고층 건축물, 특수 구역</td>
                                        <td class="py-2 px-3">KS F 2268-1</td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3"><span class="px-2 py-0.5 bg-red-100 text-red-800 rounded-full text-xs font-medium">3시간</span></td>
                                        <td class="py-2 px-3 text-center">180분</td>
                                        <td class="py-2 px-3">위험물 저장소, 특수 시설</td>
                                        <td class="py-2 px-3">KS F 2268-1</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3 bg-amber-50 rounded-lg p-3 border border-amber-100">
                            <p class="text-xs text-amber-800">
                                <strong>참고:</strong> 비차열 성능이란 화염이 관통하지 않는 성능을 의미하며, 차열 성능은 이면 온도 상승까지 제한하는 더 높은 기준이다. 국내 방화셔터는 대부분 <strong>비차열 1시간</strong> 기준을 적용한다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 2. 구성품 --}}
            {{-- ============================================================ --}}
            <section id="components" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
                        구성품
                    </h2>

                    <!-- 전체 구성도 (1.png) -->
                    <div id="comp-diagram" 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-red-400 rounded-full"></span>
                            전체 구성도
                        </h3>
                        <div class="bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/fire-shutter/1.svg') }}" alt="방화셔터 전체 구성도"
                                 class="rounded-lg shadow-md cursor-pointer academy-img-hover"
                                 style="max-height: 380px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mt-2 text-center">방화셔터 전체 구성도 - 케이스, 샤프트, 슬랫, 가이드레일, 전장부품 배치</p>
                    </div>

                    <!-- 슬랫 + 2.png -->
                    <div id="comp-slat" 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-red-400 rounded-full"></span>
                            슬랫 (Slat)
                        </h3>
                        <div class="flex flex-col lg:flex-row gap-5 items-start">
                            <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 220px;">
                                <img src="{{ asset('images/academy/fire-shutter/2.svg') }}" alt="슬랫 인터록킹 구조"
                                     class="w-full rounded-lg cursor-pointer academy-img-hover"
                                     onclick="openLightbox(this)">
                                <p class="text-xs text-gray-400 mt-2 text-center">슬랫 인터록킹 구조</p>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <p class="text-sm text-gray-700 mb-3">셔터의 <strong>커튼면</strong>을 구성하는 강판 단위 부재. 롤포밍으로 성형된 슬랫을 서로 끼워 맞추는(인터록킹) 방식으로 연결하여 유연한 커튼을 형성한다.</p>
                                    <div class="grid grid-cols-2 gap-3 text-xs">
                                        <div><span class="font-medium text-gray-600">재질:</span> EGI (전기아연도금강판)</div>
                                        <div><span class="font-medium text-gray-600">두께:</span> 방화용 1.6mm</div>
                                        <div><span class="font-medium text-gray-600">형태:</span> C형, S형, 평판형</div>
                                        <div><span class="font-medium text-gray-600">기준:</span> KS F 4510</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 가이드레일 + 3.png -->
                    <div id="comp-guide" 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-red-400 rounded-full"></span>
                            가이드레일 (Guide Rail)
                        </h3>
                        <div class="flex flex-col lg:flex-row-reverse gap-5 items-start">
                            <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 220px;">
                                <img src="{{ asset('images/academy/fire-shutter/3.svg') }}" alt="가이드레일 단면"
                                     class="w-full rounded-lg cursor-pointer academy-img-hover"
                                     onclick="openLightbox(this)">
                                <p class="text-xs text-gray-400 mt-2 text-center">가이드레일 단면 구조</p>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <p class="text-sm text-gray-700 mb-3">셔터 양쪽 벽면에 수직으로 설치되어 슬랫의 <strong>승강을 안내</strong>하는 레일. 내부에 차연재(연기차단재)를 장착하여 연기 누출을 방지한다.</p>
                                    <div class="grid grid-cols-2 gap-3 text-xs">
                                        <div><span class="font-medium text-gray-600">재질:</span> 열간압연강판 (SPHC) 2.3mm 이상</div>
                                        <div><span class="font-medium text-gray-600">고정:</span> 앵커볼트 (400mm 간격)</div>
                                        <div><span class="font-medium text-gray-600">차연재:</span> 내열 실리콘 / 세라믹 패킹</div>
                                        <div><span class="font-medium text-gray-600">형태:</span> ㄷ자 형강 + 연기차단부</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 샤프트 + 4.png -->
                    <div id="comp-barrel" 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-red-400 rounded-full"></span>
                            샤프트 (Shaft / 샤프트)
                        </h3>
                        <div class="flex flex-col lg:flex-row gap-5 items-start">
                            <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 220px;">
                                <img src="{{ asset('images/academy/fire-shutter/4.svg') }}" alt="샤프트 어셈블리"
                                     class="w-full rounded-lg cursor-pointer academy-img-hover"
                                     onclick="openLightbox(this)">
                                <p class="text-xs text-gray-400 mt-2 text-center">샤프트 어셈블리</p>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <p class="text-sm text-gray-700 mb-3">슬랫 커튼을 <strong>감아올리는 원통형 축</strong>. 케이스(셔터박스) 내부에 위치하며 브라켓으로 지지된다. 셔터의 폭과 높이에 따라 직경이 결정된다.</p>
                                    <div class="grid grid-cols-2 gap-3 text-xs">
                                        <div><span class="font-medium text-gray-600">재질:</span> 강관 (STK 400 이상)</div>
                                        <div><span class="font-medium text-gray-600">직경:</span> 100mm ~ 300mm (폭/높이에 따라)</div>
                                        <div><span class="font-medium text-gray-600">지지:</span> 양측 브라켓 + 베어링</div>
                                        <div><span class="font-medium text-gray-600">관련:</span> 밸런스 스프링 내장</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 전장부품 + 6.png, 7.png -->
                    <div id="comp-electric" class="scroll-mt-20 mb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                            <span class="w-2 h-2 bg-red-400 rounded-full"></span>
                            전장 부품
                        </h3>

                        <!-- 감속기+모터+브레이크 (6.png) -->
                        <div class="flex flex-col lg:flex-row-reverse gap-5 items-start mb-6">
                            <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 220px;">
                                <img src="{{ asset('images/academy/fire-shutter/6.svg') }}" alt="감속기, 모터, 브레이크"
                                     class="w-full rounded-lg cursor-pointer academy-img-hover"
                                     onclick="openLightbox(this)">
                                <p class="text-xs text-gray-400 mt-2 text-center">감속기 + 모터 + 브레이크</p>
                            </div>
                            <div class="flex-1 min-w-0 space-y-3">
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <h4 class="font-semibold text-gray-800 text-sm mb-1">감속기 (Gear Box)</h4>
                                    <p class="text-xs text-gray-600">모터의 고속 회전을 <strong>저속 고토크</strong>로 변환하여 샤프트에 전달. 웜기어(Worm Gear) 방식이 주류로, 셀프록킹 기능으로 역회전을 방지한다.</p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <h4 class="font-semibold text-gray-800 text-sm mb-1">전동모터 (Motor)</h4>
                                    <p class="text-xs text-gray-600">셔터를 <strong>전동으로 개폐</strong>하는 구동원. 단상 220V 또는 삼상 380V 사용. 화재 시에는 모터가 아닌 자동폐쇄기(중력 하강)로 폐쇄된다.</p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <h4 class="font-semibold text-gray-800 text-sm mb-1">전자브레이크 (Electromagnetic Brake)</h4>
                                    <p class="text-xs text-gray-600">통전 시 브레이크 해제, 정전 시 스프링 힘으로 <strong>자동 제동</strong>. 화재 시 정전 상황에서 셔터가 급격히 낙하하는 것을 방지한다.</p>
                                </div>
                            </div>
                        </div>

                        <!-- 연동제어기 시스템 (7.png) -->
                        <div class="flex flex-col lg:flex-row gap-5 items-start mb-4">
                            <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 220px;">
                                <img src="{{ asset('images/academy/fire-shutter/7.svg') }}" alt="연동제어기 시스템"
                                     class="w-full rounded-lg cursor-pointer academy-img-hover"
                                     onclick="openLightbox(this)">
                                <p class="text-xs text-gray-400 mt-2 text-center">연동제어기 시스템</p>
                            </div>
                            <div class="flex-1 min-w-0 space-y-3">
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <h4 class="font-semibold text-gray-800 text-sm mb-1">연동제어기 (Controller / 연동제어반)</h4>
                                    <p class="text-xs text-gray-600">감지기 신호를 수신하여 <strong>셔터 폐쇄를 제어</strong>하는 핵심 장치. 연기감지기 신호 → 일부폐쇄(바닥에서 약 1m), 열감지기 신호 → 완전폐쇄 2단계 동작을 수행한다.</p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <h4 class="font-semibold text-gray-800 text-sm mb-1">자동폐쇄기 (Auto Closer)</h4>
                                    <p class="text-xs text-gray-600">연동제어기의 신호를 받아 브레이크를 해제하고 셔터를 <strong>중력으로 하강</strong>시키는 장치. 거버너(속도조절기) 내장으로 하강 속도를 제한(0.15m/s 이하)한다.</p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <h4 class="font-semibold text-gray-800 text-sm mb-1">리밋스위치 (Limit Switch)</h4>
                                    <p class="text-xs text-gray-600">셔터의 <strong>상한/하한 위치를 감지</strong>하여 모터를 자동 정지시키는 스위치. 마이크로 스위치 또는 근접 센서 방식 사용.</p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4 border">
                                    <h4 class="font-semibold text-gray-800 text-sm mb-1">감지기 연동 시스템</h4>
                                    <p class="text-xs text-gray-600"><strong>연기감지기(광전식)</strong>: 연기 감지 시 1차 신호 → 셔터 일부폐쇄(바닥에서 약 1m 정지). <strong>열감지기(정온식/차동식)</strong>: 열 감지 시 2차 신호 → 셔터 완전폐쇄(바닥 접지). 수신기(P형/R형)와 연동하여 방재실에 상태를 전송한다.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 기타 부품 -->
                    <div id="comp-etc" 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-red-400 rounded-full"></span>
                            기타 부품
                        </h3>
                        <div class="space-y-3">
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 text-sm mb-1">브라켓 (Bracket)</h4>
                                <p class="text-xs text-gray-600">샤프트을 벽체/천장에 <strong>고정 지지</strong>하는 철물. 양측 벽에 앵커로 고정하며 베어링을 통해 샤프트을 회전 가능하게 지지한다.</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 text-sm mb-1">하단바 (Bottom Bar)</h4>
                                <p class="text-xs text-gray-600">슬랫 커튼의 <strong>최하단에 부착되는 마감 바</strong>. 바닥과의 밀착을 돕고 커튼의 무게 균형을 잡는다. 고무 패킹으로 바닥 밀폐성을 확보한다.</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 text-sm mb-1">밸런스 스프링 (Balance Spring)</h4>
                                <p class="text-xs text-gray-600">샤프트 내부에 장착되어 슬랫 커튼의 <strong>무게를 상쇄</strong>하는 토션 스프링. 모터 부하를 줄이고 수동 개폐 시 조작력을 경감시킨다.</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 text-sm mb-1">수동조작함</h4>
                                <p class="text-xs text-gray-600">정전 또는 비상 시 셔터를 <strong>수동으로 개폐</strong>할 수 있는 조작함. 체인 또는 핸들 방식으로 벽면에 설치. 열쇠로 잠금 관리한다.</p>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-4 border">
                                <h4 class="font-semibold text-gray-800 text-sm mb-1">케이스 / 셔터박스</h4>
                                <p class="text-xs text-gray-600">샤프트, 감속기, 모터 등을 <strong>보호하는 외함</strong>. 천장 내부에 매립되거나 노출 설치된다. 점검구가 있어 유지보수 접근이 가능하다.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 3. 제조 공정 --}}
            {{-- ============================================================ --}}
            <section id="manufacturing" 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-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
                        제조 공정
                    </h2>

                    <!-- 전체 공정 흐름도 -->
                    <div class="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-red-400 rounded-full"></span>
                            전체 공정 흐름도
                        </h3>
                        <div class="flex flex-wrap items-center gap-2 text-xs font-medium">
                            <span class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">1. 원자재 입고</span>
                            <svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">2. 슬랫 롤포밍</span>
                            <svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">3. 가이드레일 가공</span>
                            <svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-blue-100 text-blue-800 rounded-lg">4. 샤프트/브라켓</span>
                            <svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-green-100 text-green-800 rounded-lg">5. 표면처리</span>
                            <svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-orange-100 text-orange-800 rounded-lg">6. 조립</span>
                            <svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-purple-100 text-purple-800 rounded-lg">7. 검사</span>
                            <svg class="w-4 h-4 text-gray-400" 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 class="px-3 py-2 bg-gray-200 text-gray-800 rounded-lg">8. 포장/출하</span>
                        </div>
                    </div>

                    <!-- 공정별 상세 -->
                    <div class="space-y-4">
                        <div class="bg-gray-50 rounded-lg p-4 border">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                                <h4 class="font-semibold text-gray-800 text-sm">슬랫 롤포밍 공정</h4>
                            </div>
                            <div class="mb-3 bg-white rounded-xl p-3 border flex justify-center academy-img-wrap">
                                <img src="{{ asset('images/academy/fire-shutter/13.svg') }}" alt="슬랫 롤포밍 공정 라인"
                                     class="rounded-lg cursor-pointer academy-img-hover"
                                     style="max-height: 280px; width: auto;"
                                     onclick="openLightbox(this)">
                            </div>
                            <p class="text-xs text-gray-600 mb-2">용융아연도금강판 코일을 언코일러에 장착 후 롤포밍 라인을 통과시켜 슬랫 단면 형상으로 연속 성형한다.</p>
                            <div class="flex flex-wrap gap-2 text-xs">
                                <span class="px-2 py-1 bg-white border rounded">언코일링</span>
                                <span class="text-gray-400">&rarr;</span>
                                <span class="px-2 py-1 bg-white border rounded">레벨링(평탄화)</span>
                                <span class="text-gray-400">&rarr;</span>
                                <span class="px-2 py-1 bg-white border rounded">롤포밍(성형)</span>
                                <span class="text-gray-400">&rarr;</span>
                                <span class="px-2 py-1 bg-white border rounded">절단(정척)</span>
                                <span class="text-gray-400">&rarr;</span>
                                <span class="px-2 py-1 bg-white border rounded">인터록킹 검사</span>
                            </div>
                        </div>

                        <div class="bg-gray-50 rounded-lg p-4 border">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                                <h4 class="font-semibold text-gray-800 text-sm">가이드레일 가공</h4>
                            </div>
                            <p class="text-xs text-gray-600">열간압연강판(SPHC)을 프레스 브레이크 또는 롤포밍으로 ㄷ자 형강으로 성형. 앵커볼트 구멍 천공, 차연재 삽입 홈 가공, 정척 절단을 수행한다.</p>
                        </div>

                        <div class="bg-gray-50 rounded-lg p-4 border">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                                <h4 class="font-semibold text-gray-800 text-sm">샤프트(Shaft) / 브라켓 가공</h4>
                            </div>
                            <p class="text-xs text-gray-600">강관을 정척 절단 후 슬랫 고정용 슬롯 가공. 브라켓은 후판을 레이저 절단 또는 프레스 가공하여 제작. 베어링 자리 가공, 앵커 구멍 천공을 포함한다.</p>
                        </div>

                        <div class="bg-gray-50 rounded-lg p-4 border">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                                <h4 class="font-semibold text-gray-800 text-sm">표면처리 (도장/도금)</h4>
                            </div>
                            <p class="text-xs text-gray-600">가이드레일, 브라켓, 하단바 등 강재 부품에 방청 처리를 수행한다.</p>
                            <div class="mt-2 grid grid-cols-2 gap-2 text-xs">
                                <div class="bg-white p-2 rounded border">
                                    <strong>분체도장:</strong> 탈지 → 인산피막 → 건조 → 분체 도포 → 소부(180~200&deg;C)
                                </div>
                                <div class="bg-white p-2 rounded border">
                                    <strong>용융아연도금:</strong> 탈지 → 산세 → 플럭스 → 도금조 침적(450&deg;C) → 냉각
                                </div>
                            </div>
                        </div>

                        <div class="bg-gray-50 rounded-lg p-4 border">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
                                <h4 class="font-semibold text-gray-800 text-sm">조립 공정</h4>
                            </div>
                            <div class="mb-3 bg-white rounded-xl p-3 border flex justify-center academy-img-wrap">
                                <img src="{{ asset('images/academy/fire-shutter/14.svg') }}" alt="조립 공정 순서 다이어그램"
                                     class="rounded-lg cursor-pointer academy-img-hover"
                                     style="max-height: 280px; width: auto;"
                                     onclick="openLightbox(this)">
                            </div>
                            <p class="text-xs text-gray-600 mb-2">부품 가공이 완료되면 다음 순서로 조립한다:</p>
                            <ol class="text-xs text-gray-600 space-y-1 pl-4 list-decimal">
                                <li>샤프트에 밸런스 스프링 장착 및 텐션 조정</li>
                                <li>샤프트에 슬랫 커튼 첫 번째 열 고정</li>
                                <li>슬랫 상호 인터록킹 결합 (커튼 조립)</li>
                                <li>하단바 부착 및 고무 패킹 삽입</li>
                                <li>감속기 + 전동모터 + 전자브레이크 장착</li>
                                <li>자동폐쇄기, 리밋스위치 설치</li>
                                <li>연동제어기 배선 및 결선</li>
                            </ol>
                        </div>

                        <div class="bg-gray-50 rounded-lg p-4 border">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="w-6 h-6 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
                                <h4 class="font-semibold text-gray-800 text-sm">완성품 검사</h4>
                            </div>
                            <div class="mb-3 bg-white rounded-xl p-3 border flex justify-center academy-img-wrap">
                                <img src="{{ asset('images/academy/fire-shutter/15.svg') }}" alt="완성품 검사 항목"
                                     class="rounded-lg cursor-pointer academy-img-hover"
                                     style="max-height: 280px; width: auto;"
                                     onclick="openLightbox(this)">
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs text-gray-600">
                                <div class="bg-white p-2 rounded border">외관 검사: 도장 상태, 슬랫 정렬, 용접부</div>
                                <div class="bg-white p-2 rounded border">치수 검사: 폭, 높이, 가이드레일 간격</div>
                                <div class="bg-white p-2 rounded border">작동 검사: 전동 개폐, 자동폐쇄 시험</div>
                                <div class="bg-white p-2 rounded border">전장 검사: 연동제어기, 리밋스위치 동작</div>
                            </div>
                        </div>

                        <div class="bg-gray-50 rounded-lg p-4 border">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="w-6 h-6 bg-gray-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
                                <h4 class="font-semibold text-gray-800 text-sm">포장 및 출하</h4>
                            </div>
                            <p class="text-xs text-gray-600">슬랫 커튼은 샤프트에 감은 상태로, 가이드레일/브라켓/전장부품은 별도 포장. 운송 중 변형 방지를 위해 목재 팔레트에 적재하여 출하한다.</p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 4. 설치 및 시공 --}}
            {{-- ============================================================ --}}
            <section id="install" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <!-- 설치 섹션 헤더 + 9.png 이미지 -->
                    <div class="flex flex-col lg:flex-row gap-5 items-start mb-6">
                        <div class="flex-1 min-w-0">
                            <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-3">
                                <span class="w-8 h-8 bg-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
                                설치 및 시공
                            </h2>
                            <p class="text-sm text-gray-600">방화셔터의 현장 설치는 정밀한 실측부터 시운전 점검까지 체계적인 절차를 따른다.</p>
                        </div>
                        <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 200px;">
                            <img src="{{ asset('images/academy/fire-shutter/9.svg') }}" alt="방화셔터 현장 설치"
                                 class="w-full rounded-lg cursor-pointer academy-img-hover"
                                 onclick="openLightbox(this)">
                            <p class="text-xs text-gray-400 mt-2 text-center">현장 설치 과정</p>
                        </div>
                    </div>

                    <!-- 현장 설치 공정 -->
                    <div class="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-red-400 rounded-full"></span>
                            현장 설치 공정
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
                                <span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">1</span>
                                <div>
                                    <strong class="text-sm text-gray-800">현장 실측 및 먹매김</strong>
                                    <p class="text-xs text-gray-600 mt-0.5">개구부 폭, 높이, 천장 내부 공간을 실측하고 설치 위치를 먹줄로 표시한다. 수평/수직 기준선을 설정한다.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
                                <span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">2</span>
                                <div>
                                    <strong class="text-sm text-gray-800">브라켓 설치</strong>
                                    <p class="text-xs text-gray-600 mt-0.5">양쪽 벽체 또는 천장 슬래브에 앵커볼트로 브라켓을 고정. 수평을 정밀하게 조정한다 (허용 오차 &plusmn;2mm).</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
                                <span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">3</span>
                                <div>
                                    <strong class="text-sm text-gray-800">가이드레일 설치</strong>
                                    <p class="text-xs text-gray-600 mt-0.5">양쪽 벽면에 가이드레일을 수직으로 고정. 앵커볼트 간격 400mm 이내, 수직도 확인 후 차연재를 삽입한다.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
                                <span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">4</span>
                                <div>
                                    <strong class="text-sm text-gray-800">샤프트 거치</strong>
                                    <p class="text-xs text-gray-600 mt-0.5">슬랫 커튼이 감긴 샤프트을 브라켓 베어링에 안착. 감속기/모터 측과 반대측 베어링 정렬을 확인한다.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
                                <span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">5</span>
                                <div>
                                    <strong class="text-sm text-gray-800">슬랫 커튼 가이드레일 삽입</strong>
                                    <p class="text-xs text-gray-600 mt-0.5">커튼을 풀어 내리면서 슬랫 양 끝을 가이드레일 홈에 삽입. 원활한 승강 여부를 확인한다.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
                                <span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">6</span>
                                <div>
                                    <strong class="text-sm text-gray-800">전장 설치 및 배선</strong>
                                    <p class="text-xs text-gray-600 mt-0.5">자동폐쇄기, 연동제어기, 리밋스위치, 수동조작함 설치. 감지기 연동 배선, 전원 배선, 접지 작업을 수행한다.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border">
                                <span class="w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">7</span>
                                <div>
                                    <strong class="text-sm text-gray-800">케이스(셔터박스) 설치</strong>
                                    <p class="text-xs text-gray-600 mt-0.5">샤프트 주변을 감싸는 케이스를 설치하고, 천장 마감재와 접합부를 정리한다. 점검구 위치를 확보한다.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 시운전 점검 -->
                    <div class="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-red-400 rounded-full"></span>
                            시운전 점검 절차
                        </h3>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">순서</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">점검 항목</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">기준</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3">1</td>
                                        <td class="py-2 px-3">전동 개폐 시험</td>
                                        <td class="py-2 px-3">전 행정 원활하게 개폐, 이음/진동 없음</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3">2</td>
                                        <td class="py-2 px-3">리밋스위치 동작</td>
                                        <td class="py-2 px-3">상한/하한에서 정확히 정지</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3">3</td>
                                        <td class="py-2 px-3">연기감지기 연동 (1차)</td>
                                        <td class="py-2 px-3">감지기 작동 → 셔터 바닥에서 약 1m 위치 정지</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3">4</td>
                                        <td class="py-2 px-3">열감지기 연동 (2차)</td>
                                        <td class="py-2 px-3">감지기 작동 → 셔터 완전 폐쇄</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3">5</td>
                                        <td class="py-2 px-3">하강 속도</td>
                                        <td class="py-2 px-3">0.15 m/s 이하 (거버너 조정)</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3">6</td>
                                        <td class="py-2 px-3">경보음 발생</td>
                                        <td class="py-2 px-3">하강 시 경보음 정상 출력</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3">7</td>
                                        <td class="py-2 px-3">수동 개폐 시험</td>
                                        <td class="py-2 px-3">수동조작함으로 개폐 가능</td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3">8</td>
                                        <td class="py-2 px-3">바닥 밀착도</td>
                                        <td class="py-2 px-3">하단바-바닥 간극 최소화 (차연 확보)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 소방 준공검사 -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-red-400 rounded-full"></span>
                            소방 준공검사
                        </h3>
                        <div class="bg-orange-50 rounded-lg p-4 border border-orange-100">
                            <p class="text-sm text-orange-900 mb-3">건축물 사용승인(준공) 전 소방서의 <strong>소방시설 완공검사</strong>를 통과해야 한다. 방화셔터 관련 주요 검사 항목:</p>
                            <ul class="text-xs text-orange-800 space-y-1.5">
                                <li class="flex items-start gap-2">
                                    <svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                    <span>방화구획 도면과 실제 설치 위치 일치 여부</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                    <span>내화성능 인정서(한국건설기술연구원 발급) 확인</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                    <span>감지기 연동 2단계 동작 시험 (연기 → 일부폐쇄, 열 → 완전폐쇄)</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                    <span>셔터 상부-천장 슬래브 간 틈새 방화구획 처리 확인</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                    <span>분리형: 방화문 설치 여부, 복합형: 비상문 정상 작동 확인</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 5. 유지보수 --}}
            {{-- ============================================================ --}}
            <section id="maintenance" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <!-- 유지보수 섹션 헤더 + 10.png -->
                    <div class="flex flex-col lg:flex-row gap-5 items-start mb-6">
                        <div class="flex-1 min-w-0">
                            <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-3">
                                <span class="w-8 h-8 bg-red-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
                                유지보수
                            </h2>
                            <p class="text-sm text-gray-600">방화셔터의 정기적인 점검과 유지보수는 화재 시 정상 작동을 보장하는 핵심 요소이다.</p>
                        </div>
                        <div class="shrink-0 bg-gray-50 rounded-xl p-3 border academy-img-wrap" style="width: 200px;">
                            <img src="{{ asset('images/academy/fire-shutter/10.svg') }}" alt="방화셔터 유지보수 점검"
                                 class="w-full rounded-lg cursor-pointer academy-img-hover"
                                 onclick="openLightbox(this)">
                            <p class="text-xs text-gray-400 mt-2 text-center">유지보수 점검</p>
                        </div>
                    </div>

                    <!-- 법정 점검 -->
                    <div class="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-red-400 rounded-full"></span>
                            법정 점검
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
                                <h4 class="font-semibold text-blue-800 text-sm mb-2">작동기능점검</h4>
                                <ul class="text-xs text-blue-900 space-y-1">
                                    <li>- <strong>주기</strong>: 연 1회 이상</li>
                                    <li>- <strong>내용</strong>: 소방시설을 인위적으로 조작하여 정상 작동 여부 확인</li>
                                    <li>- <strong>대상</strong>: 모든 소방시설 설치 건축물</li>
                                    <li>- <strong>보고</strong>: 점검 완료 후 15일 이내 소방관서 보고</li>
                                </ul>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
                                <h4 class="font-semibold text-purple-800 text-sm mb-2">종합정밀점검</h4>
                                <ul class="text-xs text-purple-900 space-y-1">
                                    <li>- <strong>주기</strong>: 연 1회 이상 (특급: 반기 1회)</li>
                                    <li>- <strong>내용</strong>: 작동점검 + 구성 부품의 구조기준 적합성 확인</li>
                                    <li>- <strong>대상</strong>: 스프링클러, 물분무소화설비 등 설치 건축물</li>
                                    <li>- <strong>보고</strong>: 점검 완료 후 15일 이내 소방관서 보고</li>
                                </ul>
                            </div>
                        </div>
                        <div class="mt-3 bg-red-50 rounded-lg p-3 border border-red-100">
                            <p class="text-xs text-red-800">
                                <strong>중대위반:</strong> 방화셔터가 훼손되거나 철거되어 본래 기능을 못하는 경우, 지체 없이 수리 등 필요한 조치를 해야 한다. 미조치 시 과태료 부과 대상이다.
                            </p>
                        </div>
                    </div>

                    <!-- 정기점검 항목 -->
                    <div class="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-red-400 rounded-full"></span>
                            정기점검 항목
                        </h3>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-center py-2 px-3 font-medium text-gray-600 text-xs">주기</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600 text-xs">점검 항목</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 text-center align-top">
                                            <span class="px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-xs font-medium">월간</span>
                                        </td>
                                        <td class="py-2 px-3">
                                            <ul class="space-y-0.5">
                                                <li>- 육안 검사: 슬랫 변형/파손, 가이드레일 이물질</li>
                                                <li>- 전동 개폐 시험 (1회 전 행정)</li>
                                                <li>- 경보음 출력 확인</li>
                                                <li>- 수동조작함 열쇠 관리 상태</li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 text-center align-top">
                                            <span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">분기</span>
                                        </td>
                                        <td class="py-2 px-3">
                                            <ul class="space-y-0.5">
                                                <li>- 감지기 연동 시험 (연기/열 2단계)</li>
                                                <li>- 리밋스위치 동작 확인</li>
                                                <li>- 하단바 바닥 밀착도 확인</li>
                                                <li>- 가이드레일 차연재 상태 확인</li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 text-center align-top">
                                            <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">반기</span>
                                        </td>
                                        <td class="py-2 px-3">
                                            <ul class="space-y-0.5">
                                                <li>- 감속기 주유(그리스) 상태 확인</li>
                                                <li>- 전자브레이크 마모 상태 점검</li>
                                                <li>- 배선 접속부 풀림/발열 확인</li>
                                                <li>- 밸런스 스프링 텐션 확인</li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3 text-center align-top">
                                            <span class="px-2 py-0.5 bg-red-100 text-red-800 rounded-full text-xs font-medium">연간</span>
                                        </td>
                                        <td class="py-2 px-3">
                                            <ul class="space-y-0.5">
                                                <li>- 슬랫 커튼 전체 인터록킹 상태 점검</li>
                                                <li>- 가이드레일 앵커볼트 체결력 확인</li>
                                                <li>- 도장/도금 상태 (녹 발생 여부)</li>
                                                <li>- 내화충전재(상부 틈새) 상태 확인</li>
                                                <li>- 연동제어기 회로 종합 점검</li>
                                            </ul>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 주요 고장 유형 및 대처 + 12.png -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-red-400 rounded-full"></span>
                            주요 고장 유형 및 대처
                        </h3>

                        <!-- 고장 유형 이미지 (12.png) -->
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/fire-shutter/12.svg') }}" alt="주요 고장 유형"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 300px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">방화셔터 주요 고장 유형 일러스트레이션</p>

                        <div class="space-y-3">
                            <details class="group bg-gray-50 rounded-lg border">
                                <summary class="flex items-center justify-between p-4 cursor-pointer">
                                    <span class="font-medium text-gray-800 text-sm">슬랫 이탈 / 변형</span>
                                    <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
                                    <p><strong>원인:</strong> 외부 충격, 가이드레일 변형, 인터록킹 마모</p>
                                    <p><strong>증상:</strong> 개폐 시 이음 발생, 커튼 불균일, 가이드레일에서 슬랫 벗어남</p>
                                    <p><strong>대처:</strong> 이탈 슬랫 재삽입 또는 교체, 가이드레일 정렬 확인, 변형 슬랫 교체</p>
                                </div>
                            </details>

                            <details class="group bg-gray-50 rounded-lg border">
                                <summary class="flex items-center justify-between p-4 cursor-pointer">
                                    <span class="font-medium text-gray-800 text-sm">전동모터 소손 / 과부하</span>
                                    <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
                                    <p><strong>원인:</strong> 과부하 운전, 밸런스 스프링 파손, 가이드레일 이물질로 인한 과도한 마찰</p>
                                    <p><strong>증상:</strong> 모터 이상 발열, 전동 개폐 불가, 차단기 트립</p>
                                    <p><strong>대처:</strong> 모터 교체, 과부하 원인 제거 (스프링 조정, 이물질 제거), 전기 배선 점검</p>
                                </div>
                            </details>

                            <details class="group bg-gray-50 rounded-lg border">
                                <summary class="flex items-center justify-between p-4 cursor-pointer">
                                    <span class="font-medium text-gray-800 text-sm">전자브레이크 이상</span>
                                    <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
                                    <p><strong>원인:</strong> 브레이크 패드 마모, 코일 단선, 전원 불량</p>
                                    <p><strong>증상:</strong> 셔터 자중 하강(슬립), 정지 위치 부정확, 이상 소음</p>
                                    <p><strong>대처:</strong> 브레이크 패드 교체, 코일 저항 측정 및 교체, 전원 확인</p>
                                </div>
                            </details>

                            <details class="group bg-gray-50 rounded-lg border">
                                <summary class="flex items-center justify-between p-4 cursor-pointer">
                                    <span class="font-medium text-gray-800 text-sm">연동제어기 / 감지기 오작동</span>
                                    <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
                                    <p><strong>원인:</strong> 감지기 오염/노후, 배선 단선/단락, 제어기 기판 불량</p>
                                    <p><strong>증상:</strong> 비화재보 시 셔터 오하강, 화재 시 미동작, 1차/2차 구분 동작 불가</p>
                                    <p><strong>대처:</strong> 감지기 청소/교체, 배선 절연저항 측정, 연동제어기 기판 교체, 연동 시험 재실시</p>
                                </div>
                            </details>

                            <details class="group bg-gray-50 rounded-lg border">
                                <summary class="flex items-center justify-between p-4 cursor-pointer">
                                    <span class="font-medium text-gray-800 text-sm">자동폐쇄기 속도 이상</span>
                                    <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
                                    <p><strong>원인:</strong> 거버너(속도조절기) 고장, 윤활유 부족/변질</p>
                                    <p><strong>증상:</strong> 하강 속도 과다(0.15m/s 초과) 또는 하강 불가</p>
                                    <p><strong>대처:</strong> 거버너 분해 점검, 윤활유 보충/교체, 자동폐쇄기 교체</p>
                                </div>
                            </details>

                            <details class="group bg-gray-50 rounded-lg border">
                                <summary class="flex items-center justify-between p-4 cursor-pointer">
                                    <span class="font-medium text-gray-800 text-sm">차연성능 저하</span>
                                    <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" 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-600 space-y-1">
                                    <p><strong>원인:</strong> 가이드레일 차연재 탈락/노후, 하단바 고무 패킹 경화, 상부 내화충전재 손상</p>
                                    <p><strong>증상:</strong> 폐쇄 시 연기 누출, 차연성능 시험 미달</p>
                                    <p><strong>대처:</strong> 차연재 교체, 고무 패킹 교체, 내화충전재 보수</p>
                                </div>
                            </details>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 페이지 하단 -->
            <div class="bg-gray-50 border border-gray-200 rounded-xl p-6 text-center text-sm text-gray-500">
                <p>본 자료는 사내 교육 목적으로 작성되었습니다. 법규 관련 내용은 최신 법령을 반드시 확인하세요.</p>
                <p class="mt-1 text-xs text-gray-400">관련 법령: 건축법 시행령 제46조, 자동방화셔터 및 방화문의 기준(국토교통부 고시), 소방시설법</p>
            </div>

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

<!-- hover 프리뷰 오버레이 -->
<div id="hover-preview">
    <img id="hover-preview-img" src="" alt="">
    <span class="hover-caption" id="hover-preview-caption"></span>
</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() {
    var preview = document.getElementById('hover-preview');
    var previewImg = document.getElementById('hover-preview-img');
    var previewCaption = document.getElementById('hover-preview-caption');
    var hoverTimer = null;
    var isPreviewActive = false;
    var HOVER_DELAY = 350;

    // 모든 academy 이미지에 hover 프리뷰 바인딩
    document.querySelectorAll('.academy-img-hover').forEach(function(img) {
        img.addEventListener('mouseenter', function() {
            var el = this;
            hoverTimer = setTimeout(function() {
                showPreview(el);
            }, HOVER_DELAY);
        });

        img.addEventListener('mouseleave', function() {
            clearTimeout(hoverTimer);
            // 원본 이미지에서 마우스가 벗어나면 즉시 프리뷰 닫기
            if (isPreviewActive) {
                hidePreview();
            }
        });
    });

    function showPreview(el) {
        previewImg.src = el.src;
        previewImg.alt = el.alt || '';
        // 캡션: 이미지 다음 형제 p 태그 또는 alt 텍스트
        var caption = el.alt || '';
        var nextP = el.parentElement && el.parentElement.querySelector('p');
        if (nextP) caption = nextP.textContent;
        previewCaption.textContent = caption;

        preview.classList.add('is-active');
        isPreviewActive = true;
    }

    function hidePreview() {
        preview.classList.remove('is-active');
        isPreviewActive = false;
    }

    // 클릭 라이트박스
    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';
        // hover 프리뷰가 열려있으면 닫기
        hidePreview();
    };

    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') {
            if (isPreviewActive) hidePreview();
            closeLightbox();
        }
    });
})();

// 셔터 동작 애니메이션 컨트롤
(function() {
    var shutterStatusTimer = null;

    window.toggleShutterAnim = function() {
        var curtain = document.querySelector('.shutter-curtain');
        var btn = document.getElementById('shutter-play-btn');
        if (!curtain || !btn) return;

        curtain.classList.toggle('paused');
        var isPaused = curtain.classList.contains('paused');
        btn.textContent = isPaused ? '▶ 재생' : '⏸ 정지';

        if (!isPaused) {
            startStatusUpdater();
        } else {
            clearInterval(shutterStatusTimer);
        }
    };

    window.resetShutterAnim = function() {
        var curtain = document.querySelector('.shutter-curtain');
        var btn = document.getElementById('shutter-play-btn');
        var status = document.getElementById('shutter-status');
        if (!curtain) return;

        curtain.style.animation = 'none';
        curtain.offsetHeight; // reflow 강제
        curtain.style.animation = '';
        curtain.classList.add('paused');
        if (btn) btn.textContent = '▶ 재생';
        if (status) {
            status.textContent = '상태: 평상시';
            status.className = 'text-xs font-medium text-green-600';
        }
        clearInterval(shutterStatusTimer);
    };

    function startStatusUpdater() {
        clearInterval(shutterStatusTimer);
        shutterStatusTimer = setInterval(function() {
            var curtain = document.querySelector('.shutter-curtain');
            var status = document.getElementById('shutter-status');
            if (!curtain || !status || curtain.classList.contains('paused')) return;

            try {
                var style = window.getComputedStyle(curtain);
                var matrix = new DOMMatrix(style.transform);
                var ty = matrix.m42;

                if (ty < -80) {
                    status.textContent = '상태: 평상시';
                    status.className = 'text-xs font-medium text-green-600';
                } else if (ty < 20) {
                    status.textContent = '상태: 1차 하강 (일부폐쇄)';
                    status.className = 'text-xs font-medium text-amber-600';
                } else {
                    status.textContent = '상태: 완전 폐쇄';
                    status.className = 'text-xs font-medium text-red-600';
                }
            } catch (e) {}
        }, 150);
    }
})();
</script>

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