diff --git a/etc/shutter.php b/etc/shutter.php
index 5289eaf..e177ab5 100644
--- a/etc/shutter.php
+++ b/etc/shutter.php
@@ -8,26 +8,98 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --brand-orange: #ff5f00;
+            --brand-red: #ff0000;
+            --glass-bg: rgba(255, 255, 255, 0.03);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --glass-blur: 20px;
+        }
+
         body {
             font-family: 'Noto Sans KR', sans-serif;
-            background-color: #0f172a;
-            color: #e2e8f0;
+            background-color: #020617;
+            color: #f8fafc;
+            overflow-x: hidden;
         }
+
         .gradient-bg {
-            background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%);
+            background: radial-gradient(circle at 0% 0%, #0f172a 0%, #020617 100%);
+            position: relative;
         }
+
+        /* Animated Background Blobs */
+        .blob {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(80px);
+            z-index: 0;
+            opacity: 0.4;
+            pointer-events: none;
+            animation: float 20s infinite alternate;
+        }
+        .blob-1 {
+            width: 500px;
+            height: 500px;
+            background: var(--brand-orange);
+            top: -100px;
+            right: -100px;
+            animation-duration: 25s;
+        }
+        .blob-2 {
+            width: 400px;
+            height: 400px;
+            background: #4f46e5;
+            bottom: 10%;
+            left: -100px;
+            animation-duration: 30s;
+            opacity: 0.3;
+        }
+        .blob-3 {
+            width: 300px;
+            height: 300px;
+            background: #db2777;
+            top: 40%;
+            right: 15%;
+            animation-duration: 20s;
+            opacity: 0.2;
+        }
+
+        @keyframes float {
+            0% { transform: translate(0, 0) scale(1); }
+            100% { transform: translate(40px, 60px) scale(1.1); }
+        }
+
         .fire-gradient {
-            background: linear-gradient(135deg, #ea580c 0%, #dc2626 50%, #991b1b 100%);
+            background: linear-gradient(135deg, var(--brand-orange) 0%, #dc2626 100%);
+            box-shadow: 0 10px 20px -5px rgba(234, 88, 12, 0.5);
         }
+
+        /* Refined glassmorphism */
         .card-glass {
-            background: rgba(30, 41, 59, 0.7);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(148, 163, 184, 0.1);
+            background: var(--glass-bg);
+            backdrop-filter: blur(var(--glass-blur));
+            -webkit-backdrop-filter: blur(var(--glass-blur));
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+        }
+
+        .card-glass-dark {
+            background: rgba(0, 0, 0, 0.2);
+            backdrop-filter: blur(25px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        .card-hover {
+            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
         }
         .card-hover:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            transform: translateY(-8px) scale(1.01);
+            border-color: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.05);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
         }
+
         .chart-container {
             position: relative;
             width: 100%;
@@ -38,110 +110,148 @@
         @media (min-width: 768px) {
             .chart-container { height: 360px; }
         }
+
         .glow-orange {
-            box-shadow: 0 0 30px rgba(234, 88, 12, 0.3);
+            box-shadow: 0 0 40px rgba(234, 88, 12, 0.25);
         }
         .glow-blue {
-            box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
+            box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
         }
+
         .animate-pulse-slow {
-            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+            animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
+
         @keyframes slideUp {
-            from { opacity: 0; transform: translateY(20px); }
+            from { opacity: 0; transform: translateY(30px); }
             to { opacity: 1; transform: translateY(0); }
         }
         .animate-slide-up {
-            animation: slideUp 0.5s ease-out forwards;
+            animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
+
         .step-connector {
             position: absolute;
             left: 24px;
             top: 48px;
             bottom: 0;
-            width: 2px;
-            background: linear-gradient(to bottom, #ea580c, #3b82f6);
+            width: 1px;
+            background: linear-gradient(to bottom, var(--brand-orange), transparent);
+            opacity: 0.3;
         }
-        ::-webkit-scrollbar { width: 8px; }
-        ::-webkit-scrollbar-track { background: #1e293b; }
-        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
-        ::-webkit-scrollbar-thumb:hover { background: #64748b; }
+
+        ::-webkit-scrollbar { width: 10px; }
+        ::-webkit-scrollbar-track { background: #020617; }
+        ::-webkit-scrollbar-thumb { 
+            background: rgba(255, 255, 255, 0.1); 
+            border-radius: 20px;
+            border: 3px solid #020617;
+        }
+        ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
+
         .tab-active {
-            background: linear-gradient(135deg, #ea580c, #dc2626);
+            background: linear-gradient(135deg, var(--brand-orange), #ef4444);
             color: white;
+            box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);
         }
+
         .spec-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 1rem;
+            gap: 1.5rem;
+        }
+
+        /* Premium Typography Embellishments */
+        .text-gradient {
+            background: linear-gradient(to right, #f8fafc, #94a3b8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .fire-text-gradient {
+            background: linear-gradient(to right, #fb923c, #ef4444);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .section-separator {
+            width: 80px;
+            height: 4px;
+            background: linear-gradient(to right, var(--brand-orange), transparent);
+            border-radius: 2px;
+            margin-bottom: 2rem;
         }
     </style>
 </head>
 <body class="gradient-bg min-h-screen">
+    <!-- Background Decoration Blobs -->
+    <div class="blob blob-1"></div>
+    <div class="blob blob-2"></div>
+    <div class="blob blob-3"></div>
 
     <!-- Navigation -->
-    <nav class="bg-slate-900/90 backdrop-blur-md sticky top-0 z-50 border-b border-slate-700/50">
+    <nav class="bg-black/20 backdrop-blur-xl sticky top-0 z-50 border-b border-white/5">
         <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
-            <div class="font-bold text-xl text-white flex items-center gap-3">
-                <div class="w-10 h-10 fire-gradient rounded-lg flex items-center justify-center">
+            <div class="font-bold text-xl text-white flex items-center gap-3 group cursor-pointer">
+                <div class="w-10 h-10 fire-gradient rounded-xl flex items-center justify-center transition-transform group-hover:scale-110">
                     <span class="text-xl">🔥</span>
                 </div>
-                <span>자동방화셔터 가이드</span>
+                <span class="tracking-tight">자동방화셔터 <span class="text-white/60 font-light">가이드</span></span>
             </div>
-            <div class="hidden md:flex space-x-6 text-sm font-medium text-slate-400">
-                <button onclick="scrollToSection('section-overview')" class="hover:text-orange-400 transition">개요</button>
-                <button onclick="scrollToSection('section-types')" class="hover:text-orange-400 transition">셔터 종류</button>
-                <button onclick="scrollToSection('section-specs')" class="hover:text-orange-400 transition">성능기준</button>
-                <button onclick="scrollToSection('section-process')" class="hover:text-orange-400 transition">인정절차/심사</button>
-                <button onclick="scrollToSection('section-install')" class="hover:text-orange-400 transition">설치기준</button>
-                <button onclick="scrollToSection('section-check')" class="hover:text-orange-400 transition">체크리스트</button>
+            <div class="hidden md:flex items-center space-x-8 text-sm font-medium">
+                <a href="../index.php" class="flex items-center gap-2 text-white hover:text-orange-400 transition bg-white/5 px-4 py-2 rounded-xl border border-white/10">
+                    <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+                    <span>HOME</span>
+                </a>
+                <button onclick="scrollToSection('section-overview')" class="text-slate-400 hover:text-white transition">개요</button>
+                <button onclick="scrollToSection('section-types')" class="text-slate-400 hover:text-white transition">셔터 종류</button>
+                <button onclick="scrollToSection('section-specs')" class="text-slate-400 hover:text-white transition">성능기준</button>
+                <button onclick="scrollToSection('section-process')" class="text-slate-400 hover:text-white transition">인정절차</button>
+                <button onclick="scrollToSection('section-install')" class="text-slate-400 hover:text-white transition">설치기준</button>
+                <button onclick="scrollToSection('section-check')" class="px-5 py-2.5 bg-white/5 hover:bg-white/10 text-white rounded-full border border-white/10 transition backdrop-blur-md">체크리스트</button>
             </div>
-            <button class="md:hidden text-slate-400 hover:text-white" onclick="toggleMobileMenu()">
+            <button class="md:hidden text-slate-400 hover:text-white p-2" onclick="toggleMobileMenu()">
                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                 </svg>
             </button>
         </div>
         <!-- Mobile Menu -->
-        <div id="mobile-menu" class="hidden md:hidden bg-slate-800 border-t border-slate-700">
+        <div id="mobile-menu" class="hidden md:hidden bg-slate-900 border-t border-white/5">
             <div class="px-4 py-3 space-y-2">
-                <button onclick="scrollToSection('section-overview')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">개요</button>
-                <button onclick="scrollToSection('section-types')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">셔터 종류</button>
-                <button onclick="scrollToSection('section-specs')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">성능기준</button>
-                <button onclick="scrollToSection('section-process')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">인정절차/심사</button>
-                <button onclick="scrollToSection('section-install')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">설치기준</button>
-                <button onclick="scrollToSection('section-check')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">체크리스트</button>
+                <a href="../policy/index.php" class="block w-full text-left py-3 text-white font-bold border-b border-orange-500/20">🏠 HOME (영업정책)</a>
+                <button onclick="scrollToSection('section-overview')" class="block w-full text-left py-3 text-slate-300 hover:text-orange-400 border-b border-white/5">개요</button>
+                <button onclick="scrollToSection('section-types')" class="block w-full text-left py-3 text-slate-300 hover:text-orange-400 border-b border-white/5">셔터 종류</button>
+                <button onclick="scrollToSection('section-specs')" class="block w-full text-left py-3 text-slate-300 hover:text-orange-400 border-b border-white/5">성능기준</button>
+                <button onclick="scrollToSection('section-process')" class="block w-full text-left py-3 text-slate-300 hover:text-orange-400 border-b border-white/5">인정절차/심사</button>
+                <button onclick="scrollToSection('section-install')" class="block w-full text-left py-3 text-slate-300 hover:text-orange-400 border-b border-white/5">설치기준</button>
+                <button onclick="scrollToSection('section-check')" class="block w-full text-left py-3 text-slate-300 hover:text-orange-400">체크리스트</button>
             </div>
         </div>
     </nav>
 
     <!-- Main Content -->
-    <main class="max-w-5xl mx-auto px-4 py-8 space-y-16">
-
+    <main class="max-w-5xl mx-auto px-4 py-8 space-y-24 relative z-10">
         <!-- Hero Section -->
-        <header class="text-center py-16 relative">
-            <div class="absolute inset-0 overflow-hidden">
-                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl"></div>
-                <div class="absolute top-1/4 right-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
-            </div>
-            <div class="relative z-10">
-                <div class="inline-flex items-center gap-2 bg-orange-500/20 text-orange-400 px-4 py-2 rounded-full text-sm font-semibold mb-6 border border-orange-500/30">
-                    <span class="w-2 h-2 bg-orange-400 rounded-full animate-pulse"></span>
+        <header class="text-center py-24 relative overflow-hidden">
+            <div class="animate-slide-up">
+                <div class="inline-flex items-center gap-2 bg-gradient-to-r from-orange-500/20 to-red-500/20 text-orange-400 px-5 py-2 rounded-full text-sm font-bold mb-8 border border-orange-500/20 backdrop-blur-md">
+                    <span class="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></span>
                     국토교통부고시 제2021-1009호 적용
                 </div>
-                <h1 class="text-4xl md:text-5xl font-black mb-6 leading-tight">
-                    <span class="text-white">자동방화셔터</span><br>
-                    <span class="bg-gradient-to-r from-orange-400 to-red-500 bg-clip-text text-transparent">품질인정제도 완벽 가이드</span>
+                <h1 class="text-5xl md:text-7xl font-black mb-8 leading-tight tracking-tighter">
+                    <span class="text-white opacity-90">자동방화셔터</span><br>
+                    <span class="fire-text-gradient">품질인정제도 가이드</span>
                 </h1>
-                <p class="text-slate-400 text-lg max-w-2xl mx-auto mb-10 leading-relaxed">
-                    화재 시 연기와 열을 감지하여 자동 폐쇄되는 방화셔터.<br>
-                    <strong class="text-slate-200">2021년 강화된 품질인정제도</strong>의 모든 것을 알아보세요.
+                <p class="text-slate-400 text-xl max-w-2xl mx-auto mb-12 leading-relaxed font-light">
+                    화재 시 연기와 열을 감지하여 생명을 지키는 자동 폐쇄 시스템.<br>
+                    <strong class="text-white font-medium">강화된 2021 품질인정제도</strong>의 모든 기준을 제안합니다.
                 </p>
-                <div class="flex flex-col sm:flex-row justify-center gap-4">
-                    <button onclick="scrollToSection('section-process')" class="fire-gradient hover:opacity-90 text-white font-bold py-3 px-8 rounded-xl transition shadow-lg glow-orange">
+                <div class="flex flex-col sm:flex-row justify-center gap-6">
+                    <button onclick="scrollToSection('section-process')" class="fire-gradient hover:scale-105 active:scale-95 text-white font-bold py-4 px-10 rounded-2xl transition-all shadow-2xl glow-orange">
                         인정 절차 확인하기
                     </button>
-                    <button onclick="scrollToSection('section-check')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 px-8 rounded-xl transition border border-slate-600">
+                    <button onclick="scrollToSection('section-check')" class="bg-white/5 hover:bg-white/10 text-white font-bold py-4 px-10 rounded-2xl transition-all border border-white/10 backdrop-blur-md">
                         현장 체크리스트
                     </button>
                 </div>
@@ -149,60 +259,77 @@
         </header>
 
         <!-- Section 1: Overview -->
-        <section id="section-overview" class="scroll-mt-24">
-            <div class="flex items-center gap-3 mb-8">
-                <div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">1</div>
+        <section id="section-overview" class="scroll-mt-32">
+            <div class="section-separator"></div>
+            <div class="flex items-center gap-4 mb-10">
+                <div class="w-14 h-14 fire-gradient rounded-2xl flex items-center justify-center text-white shadow-xl">
+                    <span class="text-2xl font-black">01</span>
+                </div>
                 <div>
-                    <h2 class="text-2xl font-bold text-white">자동방화셔터란?</h2>
-                    <p class="text-slate-400 text-sm">Fire Shutter Overview</p>
+                    <h2 class="text-3xl font-black text-white tracking-tight">자동방화셔터 개요</h2>
+                    <p class="text-orange-400 font-medium text-sm">Fire Shutter Overview & Purpose</p>
                 </div>
             </div>
 
-            <div class="card-glass rounded-2xl p-8 glow-blue">
-                <div class="grid md:grid-cols-2 gap-8">
-                    <div>
-                        <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
-                            <span class="text-2xl">🏢</span> 정의 및 역할
+            <div class="card-glass rounded-3xl p-10 glow-blue overflow-hidden relative group">
+                <div class="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl -mr-32 -mt-32"></div>
+                
+                <div class="grid md:grid-cols-2 gap-12 relative z-10">
+                    <div class="space-y-6">
+                        <h3 class="text-2xl font-bold text-white flex items-center gap-3">
+                            <span class="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center text-xl">🏢</span> 
+                            정의 및 역할
                         </h3>
-                        <p class="text-slate-300 leading-relaxed mb-4">
-                            자동방화셔터는 <strong class="text-orange-400">방화구획</strong>의 용도로 화재 시 연기 및 열을 감지하여 자동 폐쇄되는 설비입니다.
+                        <p class="text-slate-300 leading-relaxed text-lg">
+                            자동방화셔터는 <strong class="text-orange-400 font-bold">방화구획</strong>의 공간적 한계를 극복하기 위해 화재 시 연기 및 열을 감지하여 자동 폐쇄되는 고난도 방화설비입니다.
                         </p>
                         <p class="text-slate-400 leading-relaxed">
-                            공항, 체육관, 대형마트 등 넓은 공간에서 내화구조 벽을 설치하기 어려운 경우에 방화구획을 형성하는 핵심 장치입니다.
+                            대형 유통시설, 공항, 환승센터 등 대규모 개방 공간에서 평상시 동선을 확보하면서도 화재 시 안전한 구획을 형성하는 핵심 안전 장치입니다.
                         </p>
                     </div>
-                    <div>
-                        <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
-                            <span class="text-2xl">⚖️</span> 법적 근거
+                    <div class="space-y-6">
+                        <h3 class="text-2xl font-bold text-white flex items-center gap-3">
+                            <span class="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center text-xl">⚖️</span> 
+                            법적 근거
                         </h3>
-                        <ul class="space-y-3 text-slate-300">
-                            <li class="flex items-start gap-3">
-                                <span class="text-orange-400 mt-1">▸</span>
-                                <span><strong class="text-white">건축법 시행령 제46조</strong> - 방화구획 설치 의무</span>
+                        <ul class="space-y-5">
+                            <li class="flex items-start gap-4 group/item">
+                                <div class="w-6 h-6 bg-orange-500/20 text-orange-400 rounded-full flex items-center justify-center text-xs flex-shrink-0 mt-1 transition-colors group-hover/item:bg-orange-500 group-hover/item:text-white">1</div>
+                                <div>
+                                    <strong class="text-white block mb-1">건축법 시행령 제46조</strong>
+                                    <span class="text-slate-400 text-sm">방화구획의 설치 의무 및 세부 기준</span>
+                                </div>
                             </li>
-                            <li class="flex items-start gap-3">
-                                <span class="text-orange-400 mt-1">▸</span>
-                                <span><strong class="text-white">국토부고시 제2021-1009호</strong> - 방화문 및 자동방화셔터의 인정 및 관리기준</span>
+                            <li class="flex items-start gap-4 group/item">
+                                <div class="w-6 h-6 bg-orange-500/20 text-orange-400 rounded-full flex items-center justify-center text-xs flex-shrink-0 mt-1 transition-colors group-hover/item:bg-orange-500 group-hover/item:text-white">2</div>
+                                <div>
+                                    <strong class="text-white block mb-1">국토부고시 제2021-1009호</strong>
+                                    <span class="text-slate-400 text-sm">방화문 및 자동방화셔터의 인정 및 관리기준</span>
+                                </div>
                             </li>
-                            <li class="flex items-start gap-3">
-                                <span class="text-orange-400 mt-1">▸</span>
-                                <span><strong class="text-white">KS F 4510</strong> - 중량셔터 성능 기준</span>
+                            <li class="flex items-start gap-4 group/item">
+                                <div class="w-6 h-6 bg-orange-500/20 text-orange-400 rounded-full flex items-center justify-center text-xs flex-shrink-0 mt-1 transition-colors group-hover/item:bg-orange-500 group-hover/item:text-white">3</div>
+                                <div>
+                                    <strong class="text-white block mb-1">KS F 4510</strong>
+                                    <span class="text-slate-400 text-sm">제품의 성능 및 품질 시험 표준</span>
+                                </div>
                             </li>
                         </ul>
                     </div>
                 </div>
 
                 <!-- Key Change Alert -->
-                <div class="mt-8 bg-red-500/10 border border-red-500/30 rounded-xl p-6">
-                    <div class="flex items-start gap-4">
-                        <div class="w-12 h-12 bg-red-500/20 rounded-full flex items-center justify-center flex-shrink-0">
-                            <span class="text-2xl">⚠️</span>
+                <div class="mt-12 bg-white/5 border border-red-500/20 rounded-2xl p-8 relative overflow-hidden group">
+                    <div class="absolute inset-y-0 left-0 w-1.5 bg-red-500"></div>
+                    <div class="flex items-start gap-6">
+                        <div class="w-14 h-14 bg-red-500/10 rounded-2xl flex items-center justify-center flex-shrink-0 text-3xl shadow-lg">
+                            ⚠️
                         </div>
                         <div>
-                            <h4 class="font-bold text-red-400 text-lg mb-2">2021년 핵심 변화: 일체형 방화셔터 사용 금지</h4>
-                            <p class="text-slate-300 leading-relaxed">
-                                셔터 일부에 피난 출입구가 설치된 <strong class="text-white">일체형 방화셔터</strong>는 피난로 인지 지연 및 처짐으로 인한 비상문 개폐 불량 문제로 <strong class="text-red-400">설치가 금지</strong>되었습니다. 
-                                반드시 <strong class="text-white">분리형(60분 방화문 3m 이내 별도 설치)</strong>으로 설계해야 합니다.
+                            <h4 class="font-bold text-red-400 text-xl mb-3 group-hover:translate-x-1 transition-transform">2021년 핵심 변화: 일체형 방화셔터 사용 금지</h4>
+                            <p class="text-slate-300 leading-relaxed text-lg">
+                                과거 셔터 내부에 비상문이 있는 <strong class="text-white">일체형</strong> 제품은 피난 인지력 저하 및 작동 불량 위험으로 <strong class="text-red-400">설치가 상시 금지</strong>되었습니다. 
+                                현재는 반드시 <strong class="text-white">분리형(방화문 별도 설치)</strong> 설계를 준수해야 합니다.
                             </p>
                         </div>
                     </div>
@@ -211,142 +338,176 @@
         </section>
 
         <!-- Section 2: Types of Fire Shutters -->
-        <section id="section-types" class="scroll-mt-24">
-            <div class="flex items-center gap-3 mb-8">
-                <div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">2</div>
+        <section id="section-types" class="scroll-mt-32">
+            <div class="section-separator"></div>
+            <div class="flex items-center gap-4 mb-10">
+                <div class="w-14 h-14 fire-gradient rounded-2xl flex items-center justify-center text-white shadow-xl">
+                    <span class="text-2xl font-black">02</span>
+                </div>
                 <div>
-                    <h2 class="text-2xl font-bold text-white">방화셔터의 종류</h2>
-                    <p class="text-slate-400 text-sm">Types of Fire Shutters</p>
+                    <h2 class="text-3xl font-black text-white tracking-tight">방화셔터의 종류</h2>
+                    <p class="text-orange-400 font-medium text-sm">Hardware & Material Solutions</p>
                 </div>
             </div>
 
-            <!-- Type Tabs -->
-            <div class="flex gap-2 mb-6 overflow-x-auto pb-2">
-                <button id="tab-steel" onclick="showShutterType('steel')" class="tab-active px-6 py-3 rounded-xl font-semibold whitespace-nowrap transition">
+            <!-- Type Tabs Navigation -->
+            <div class="flex p-1.5 bg-white/5 backdrop-blur-md rounded-2xl mb-8 w-fit border border-white/5">
+                <button id="tab-steel" onclick="showShutterType('steel')" class="tab-active px-8 py-3.5 rounded-xl font-bold whitespace-nowrap transition-all duration-300">
                     철재 방화셔터
                 </button>
-                <button id="tab-screen" onclick="showShutterType('screen')" class="bg-slate-700 text-slate-300 px-6 py-3 rounded-xl font-semibold whitespace-nowrap hover:bg-slate-600 transition">
+                <button id="tab-screen" onclick="showShutterType('screen')" class="text-slate-400 px-8 py-3.5 rounded-xl font-bold whitespace-nowrap hover:bg-white/5 transition-all duration-300">
                     스크린 방화셔터
                 </button>
-                <button id="tab-compare" onclick="showShutterType('compare')" class="bg-slate-700 text-slate-300 px-6 py-3 rounded-xl font-semibold whitespace-nowrap hover:bg-slate-600 transition">
-                    비교분석
+                <button id="tab-compare" onclick="showShutterType('compare')" class="text-slate-400 px-8 py-3.5 rounded-xl font-bold whitespace-nowrap hover:bg-white/5 transition-all duration-300">
+                    비교 분석
                 </button>
             </div>
 
             <!-- Steel Shutter Content -->
-            <div id="content-steel" class="card-glass rounded-2xl p-8 animate-slide-up">
-                <div class="flex items-start gap-4 mb-6">
-                    <div class="w-16 h-16 bg-slate-600 rounded-xl flex items-center justify-center text-3xl">🔩</div>
+            <div id="content-steel" class="card-glass rounded-3xl p-10 animate-slide-up relative overflow-hidden group">
+                <div class="absolute top-0 right-0 p-12 opacity-5 pointer-events-none group-hover:scale-110 transition-transform duration-700">
+                    <span class="text-[120px]">🔩</span>
+                </div>
+                <div class="flex items-center gap-6 mb-10">
+                    <div class="w-20 h-20 bg-white/5 rounded-2xl flex items-center justify-center text-4xl shadow-inner border border-white/5">🔩</div>
                     <div>
-                        <h3 class="text-2xl font-bold text-white mb-1">철재 방화셔터 (Steel Fire Shutter)</h3>
-                        <p class="text-slate-400">강판 슬랫으로 제작된 전통적인 방화셔터</p>
+                        <h3 class="text-3xl font-black text-white mb-1">철재 방화셔터 <span class="text-white/40 font-light text-xl">Steel Fire Shutter</span></h3>
+                        <p class="text-slate-400 text-lg">강인한 내구성과 전통적인 신뢰성을 갖춘 슬랫 구조</p>
                     </div>
                 </div>
-                <div class="grid md:grid-cols-2 gap-6">
-                    <div class="bg-slate-800/50 rounded-xl p-6">
-                        <h4 class="font-bold text-orange-400 mb-4">구조 및 재질</h4>
-                        <ul class="space-y-2 text-slate-300">
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 1.55T 전기도금 아연강판</li>
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 72mm 슬랫 포밍 구조</li>
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 스틸 가이드레일</li>
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 전동/수동 개폐 장치</li>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div class="bg-black/20 rounded-2xl p-8 border border-white/5 hover:border-white/10 transition">
+                        <h4 class="font-bold text-orange-400 mb-6 text-xl flex items-center gap-2">
+                             구조 및 재질
+                        </h4>
+                        <ul class="space-y-4">
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-6 h-6 bg-green-500/10 text-green-500 rounded-lg flex items-center justify-center text-xs">✓</div>
+                                1.55T 이상의 고강도 아연도강판
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-6 h-6 bg-green-500/10 text-green-500 rounded-lg flex items-center justify-center text-xs">✓</div>
+                                내풍압 성능을 고려한 인터로킹 설계
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-6 h-6 bg-green-500/10 text-green-500 rounded-lg flex items-center justify-center text-xs">✓</div>
+                                견고한 스틸 가이드레일 시스템
+                            </li>
                         </ul>
                     </div>
-                    <div class="bg-slate-800/50 rounded-xl p-6">
-                        <h4 class="font-bold text-blue-400 mb-4">적용 환경</h4>
-                        <ul class="space-y-2 text-slate-300">
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 외부와 접촉된 방화구획</li>
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 지하주차장 램프</li>
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 가연성 물질 근접 구역</li>
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 바람 영향을 받는 구역</li>
+                    <div class="bg-black/20 rounded-2xl p-8 border border-white/5 hover:border-white/10 transition">
+                        <h4 class="font-bold text-blue-400 mb-6 text-xl">최적 적용 환경</h4>
+                        <ul class="space-y-4">
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-2 h-2 bg-blue-500 rounded-full opacity-50"></div>
+                                지하주차장 진출입로 및 외부 접점 구역
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-2 h-2 bg-blue-500 rounded-full opacity-50"></div>
+                                물류센터의 대형 방화 구획
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-2 h-2 bg-blue-500 rounded-full opacity-50"></div>
+                                풍압의 영향을 직접적으로 받는 공간
+                            </li>
                         </ul>
                     </div>
                 </div>
             </div>
 
             <!-- Screen Shutter Content -->
-            <div id="content-screen" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
-                <div class="flex items-start gap-4 mb-6">
-                    <div class="w-16 h-16 bg-slate-600 rounded-xl flex items-center justify-center text-3xl">🧵</div>
+            <div id="content-screen" class="card-glass rounded-3xl p-10 hidden animate-slide-up relative overflow-hidden group">
+                <div class="absolute top-0 right-0 p-12 opacity-5 pointer-events-none group-hover:scale-110 transition-transform duration-700">
+                    <span class="text-[120px]">🧵</span>
+                </div>
+                <div class="flex items-center gap-6 mb-10">
+                    <div class="w-20 h-20 bg-white/5 rounded-2xl flex items-center justify-center text-4xl shadow-inner border border-white/5">🧵</div>
                     <div>
-                        <h3 class="text-2xl font-bold text-white mb-1">스크린 방화셔터 (Screen Fire Shutter)</h3>
-                        <p class="text-slate-400">고순도 실리카 원단을 사용한 경량 방화셔터</p>
+                        <h3 class="text-3xl font-black text-white mb-1">스크린 방화셔터 <span class="text-white/40 font-light text-xl">Screen Fire Shutter</span></h3>
+                        <p class="text-slate-400 text-lg">혁신적인 경량화와 시각적 투명성을 갖춘 미래형 솔루션</p>
                     </div>
                 </div>
-                <div class="grid md:grid-cols-2 gap-6">
-                    <div class="bg-slate-800/50 rounded-xl p-6">
-                        <h4 class="font-bold text-orange-400 mb-4">구조 및 재질</h4>
-                        <ul class="space-y-2 text-slate-300">
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 98% 이상 고순도 실리카 원단</li>
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 유리섬유 + 스테인레스 와이어</li>
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 경량 구조 (철재 대비 1/3)</li>
-                            <li class="flex items-center gap-2"><span class="text-green-400">✓</span> 투명/반투명 선택 가능</li>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div class="bg-black/20 rounded-2xl p-8 border border-white/5">
+                        <h4 class="font-bold text-orange-400 mb-6 text-xl">주요 특징</h4>
+                        <ul class="space-y-4">
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-6 h-6 bg-green-500/10 text-green-500 rounded-lg flex items-center justify-center text-xs">✓</div>
+                                고순도 실리카 원단 (내열 원단) 적용
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-6 h-6 bg-green-500/10 text-green-500 rounded-lg flex items-center justify-center text-xs">✓</div>
+                                철재 대비 약 70% 무게 절감 (구조 하중 감소)
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-6 h-6 bg-green-500/10 text-green-500 rounded-lg flex items-center justify-center text-xs">✓</div>
+                                화재 상황 육안 식별 가능 (공포감 완화)
+                            </li>
                         </ul>
                     </div>
-                    <div class="bg-slate-800/50 rounded-xl p-6">
-                        <h4 class="font-bold text-blue-400 mb-4">장점</h4>
-                        <ul class="space-y-2 text-slate-300">
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 화재 상황 육안 확인 가능</li>
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 폐쇄감 감소로 패닉 방지</li>
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 낙하 시 부상 위험 감소</li>
-                            <li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 긴급 시 찢고 탈출 가능</li>
+                    <div class="bg-black/20 rounded-2xl p-8 border border-white/5">
+                        <h4 class="font-bold text-blue-400 mb-6 text-xl">운영상의 장점</h4>
+                        <ul class="space-y-4">
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-2 h-2 bg-blue-500 rounded-full opacity-50"></div>
+                                낙하 시 인명 피해 및 충돌 충격 최소화
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-2 h-2 bg-blue-500 rounded-full opacity-50"></div>
+                                백화점, 복합쇼핑몰 등 인테리어 중시 공간
+                            </li>
+                            <li class="flex items-center gap-3 text-slate-300">
+                                <div class="w-2 h-2 bg-blue-500 rounded-full opacity-50"></div>
+                                긴급 시 칼 등으로 훼손 후 탈출 가능
+                            </li>
                         </ul>
                     </div>
                 </div>
-                <div class="mt-6 bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
-                    <p class="text-yellow-300 text-sm">
-                        <strong>💡 설치 제한:</strong> 바람의 영향을 받지 않는 <strong>실내 방화구획</strong>에만 설치 가능합니다.
+                <div class="mt-10 bg-orange-500/5 border border-orange-500/20 rounded-2xl p-6 flex items-center gap-4">
+                    <span class="text-2xl">💡</span>
+                    <p class="text-orange-200 text-sm">
+                        <strong class="text-white">설치 주의:</strong> 스크린 특성상 풍압에 취약하므로 반드시 <strong class="text-white">실내 구역</strong>에 한정하여 설계해야 합니다.
                     </p>
                 </div>
             </div>
 
             <!-- Comparison Content -->
-            <div id="content-compare" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
-                <h3 class="text-xl font-bold text-white mb-6 text-center">철재 vs 스크린 방화셔터 비교</h3>
-                <div class="overflow-x-auto">
+            <div id="content-compare" class="card-glass rounded-3xl p-10 hidden animate-slide-up">
+                <h3 class="text-2xl font-black text-white mb-10 text-center">종류별 성능 데이터 비교</h3>
+                <div class="overflow-x-auto rounded-2xl border border-white/5">
                     <table class="w-full text-left">
                         <thead>
-                            <tr class="border-b border-slate-600">
-                                <th class="py-4 px-4 text-slate-400 font-medium">비교 항목</th>
-                                <th class="py-4 px-4 text-orange-400 font-bold">철재 방화셔터</th>
-                                <th class="py-4 px-4 text-blue-400 font-bold">스크린 방화셔터</th>
+                            <tr class="bg-white/5">
+                                <th class="py-6 px-8 text-slate-400 font-bold uppercase tracking-wider text-xs">비교 지표</th>
+                                <th class="py-6 px-8 text-orange-400 font-black text-lg">철재 방화셔터</th>
+                                <th class="py-6 px-8 text-blue-400 font-black text-lg">스크린 방화셔터</th>
                             </tr>
                         </thead>
                         <tbody class="text-slate-300">
-                            <tr class="border-b border-slate-700/50">
-                                <td class="py-4 px-4 text-slate-400">내화성능</td>
-                                <td class="py-4 px-4">비차열 1시간 이상</td>
-                                <td class="py-4 px-4">비차열 1시간 이상</td>
+                            <tr class="border-b border-white/5 hover:bg-white/5 transition">
+                                <td class="py-6 px-8 text-slate-400 font-medium">내화 시간 (비차열)</td>
+                                <td class="py-6 px-8">60분 이상</td>
+                                <td class="py-6 px-8">60분 이상</td>
                             </tr>
-                            <tr class="border-b border-slate-700/50">
-                                <td class="py-4 px-4 text-slate-400">차연성능</td>
-                                <td class="py-4 px-4">우수</td>
-                                <td class="py-4 px-4">우수</td>
+                            <tr class="border-b border-white/5 hover:bg-white/5 transition">
+                                <td class="py-6 px-8 text-slate-400 font-medium">단위 중량 (㎡당)</td>
+                                <td class="py-6 px-8 text-orange-200">약 18kg (중량)</td>
+                                <td class="py-6 px-8 text-blue-200">약 5kg (초경량)</td>
                             </tr>
-                            <tr class="border-b border-slate-700/50">
-                                <td class="py-4 px-4 text-slate-400">중량</td>
-                                <td class="py-4 px-4 text-yellow-400">무거움</td>
-                                <td class="py-4 px-4 text-green-400">경량 (1/3 수준)</td>
+                            <tr class="border-b border-white/5 hover:bg-white/5 transition">
+                                <td class="py-6 px-8 text-slate-400 font-medium">화재 시 인지성</td>
+                                <td class="py-6 px-8 font-bold text-red-400/80">폐쇄적 (불투명)</td>
+                                <td class="py-6 px-8 font-bold text-green-400/80">개방적 (반투명)</td>
                             </tr>
-                            <tr class="border-b border-slate-700/50">
-                                <td class="py-4 px-4 text-slate-400">시야 확보</td>
-                                <td class="py-4 px-4 text-red-400">불가능</td>
-                                <td class="py-4 px-4 text-green-400">가능 (반투명)</td>
+                            <tr class="border-b border-white/5 hover:bg-white/5 transition">
+                                <td class="py-6 px-8 text-slate-400 font-medium">외부 풍압 대응</td>
+                                <td class="py-6 px-8 text-green-400 font-bold">매우 우수</td>
+                                <td class="py-6 px-8 text-yellow-500 font-bold">보통 (실내 권장)</td>
                             </tr>
-                            <tr class="border-b border-slate-700/50">
-                                <td class="py-4 px-4 text-slate-400">외부 설치</td>
-                                <td class="py-4 px-4 text-green-400">가능</td>
-                                <td class="py-4 px-4 text-red-400">불가 (실내만)</td>
-                            </tr>
-                            <tr class="border-b border-slate-700/50">
-                                <td class="py-4 px-4 text-slate-400">비용</td>
-                                <td class="py-4 px-4">상대적 고가</td>
-                                <td class="py-4 px-4">상대적 저렴</td>
-                            </tr>
-                            <tr>
-                                <td class="py-4 px-4 text-slate-400">긴급 탈출</td>
-                                <td class="py-4 px-4">별도 방화문 필요</td>
-                                <td class="py-4 px-4">찢고 탈출 가능</td>
+                            <tr class="hover:bg-white/5 transition">
+                                <td class="py-6 px-8 text-slate-400 font-medium">유지 보수성</td>
+                                <td class="py-6 px-8">보통 (부분 교체 가능)</td>
+                                <td class="py-6 px-8">우수 (전체 커튼 교환)</td>
                             </tr>
                         </tbody>
                     </table>
@@ -355,96 +516,95 @@
         </section>
 
         <!-- Section 3: Performance Specifications -->
-        <section id="section-specs" class="scroll-mt-24">
-            <div class="flex items-center gap-3 mb-8">
-                <div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">3</div>
+        <section id="section-specs" class="scroll-mt-32">
+            <div class="section-separator"></div>
+            <div class="flex items-center gap-4 mb-10">
+                <div class="w-14 h-14 fire-gradient rounded-2xl flex items-center justify-center text-white shadow-xl">
+                    <span class="text-2xl font-black">03</span>
+                </div>
                 <div>
-                    <h2 class="text-2xl font-bold text-white">성능 기준</h2>
-                    <p class="text-slate-400 text-sm">Performance Standards</p>
+                    <h2 class="text-3xl font-black text-white tracking-tight">성능 기준</h2>
+                    <p class="text-orange-400 font-medium text-sm">Strict Performance Standards</p>
                 </div>
             </div>
 
             <div class="spec-grid">
                 <!-- 내화성능 -->
-                <div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
-                    <div class="w-14 h-14 bg-red-500/20 rounded-xl flex items-center justify-center mb-4">
+                <div class="card-glass rounded-3xl p-8 card-hover relative overflow-hidden group">
+                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-red-500/10 rounded-full blur-2xl group-hover:bg-red-500/20 transition-colors"></div>
+                    <div class="w-16 h-16 bg-red-500/10 rounded-2xl flex items-center justify-center mb-6 border border-red-500/10">
                         <span class="text-3xl">🔥</span>
                     </div>
-                    <h3 class="text-lg font-bold text-white mb-2">내화성능</h3>
-                    <p class="text-slate-400 text-sm mb-4">Fire Resistance</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4">
-                        <p class="text-2xl font-black text-orange-400 mb-2">비차열 1시간 이상</p>
-                        <p class="text-slate-300 text-sm">KS F 2268-1에 따른 내화시험 기준</p>
+                    <h3 class="text-xl font-bold text-white mb-2">내화성능</h3>
+                    <p class="text-slate-500 text-sm mb-6 uppercase tracking-wider">Fire Resistance</p>
+                    <div class="bg-black/40 backdrop-blur-md rounded-2xl p-5 border border-white/5 group-hover:border-red-500/30 transition-colors">
+                        <p class="text-2xl font-black text-orange-400 mb-1">비차열 1시간+</p>
+                        <p class="text-slate-400 text-xs">KS F 2268-1 내화시험 준수</p>
                     </div>
-                    <p class="text-slate-400 text-sm mt-4 leading-relaxed">
-                        화재 시 가열면의 반대쪽으로 화염이 관통하지 않는 성능
-                    </p>
                 </div>
 
                 <!-- 차연성능 -->
-                <div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
-                    <div class="w-14 h-14 bg-gray-500/20 rounded-xl flex items-center justify-center mb-4">
+                <div class="card-glass rounded-3xl p-8 card-hover relative overflow-hidden group">
+                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-blue-500/10 rounded-full blur-2xl group-hover:bg-blue-500/20 transition-colors"></div>
+                    <div class="w-16 h-16 bg-blue-500/10 rounded-2xl flex items-center justify-center mb-6 border border-blue-500/10">
                         <span class="text-3xl">💨</span>
                     </div>
-                    <h3 class="text-lg font-bold text-white mb-2">차연성능</h3>
-                    <p class="text-slate-400 text-sm mb-4">Smoke Leakage</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4">
-                        <p class="text-2xl font-black text-blue-400 mb-2">KS F 4510 기준</p>
-                        <p class="text-slate-300 text-sm">중량셔터 차연성능 규정 충족</p>
+                    <h3 class="text-xl font-bold text-white mb-2">차연성능</h3>
+                    <p class="text-slate-500 text-sm mb-6 uppercase tracking-wider">Smoke Leakage</p>
+                    <div class="bg-black/40 backdrop-blur-md rounded-2xl p-5 border border-white/5 group-hover:border-blue-500/30 transition-colors">
+                        <p class="text-2xl font-black text-blue-400 mb-1">KS F 4510 기준</p>
+                        <p class="text-slate-400 text-xs">연기 누설량 규정치 이내 차단</p>
                     </div>
-                    <p class="text-slate-400 text-sm mt-4 leading-relaxed">
-                        연기의 누설을 차단하여 피난 시간 확보
-                    </p>
                 </div>
 
                 <!-- 개폐성능 -->
-                <div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
-                    <div class="w-14 h-14 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
+                <div class="card-glass rounded-3xl p-8 card-hover relative overflow-hidden group">
+                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-green-500/10 rounded-full blur-2xl group-hover:bg-green-500/20 transition-colors"></div>
+                    <div class="w-16 h-16 bg-green-500/10 rounded-2xl flex items-center justify-center mb-6 border border-green-500/10">
                         <span class="text-3xl">⚙️</span>
                     </div>
-                    <h3 class="text-lg font-bold text-white mb-2">개폐성능</h3>
-                    <p class="text-slate-400 text-sm mb-4">Operation</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4">
-                        <p class="text-2xl font-black text-green-400 mb-2">전동 + 수동</p>
-                        <p class="text-slate-300 text-sm">KS F 4510 개폐성능 규정 충족</p>
+                    <h3 class="text-xl font-bold text-white mb-2">개폐성능</h3>
+                    <p class="text-slate-500 text-sm mb-6 uppercase tracking-wider">Operation Durability</p>
+                    <div class="bg-black/40 backdrop-blur-md rounded-2xl p-5 border border-white/5 group-hover:border-green-500/30 transition-colors">
+                        <p class="text-2xl font-black text-green-400 mb-1">전동 + 수동</p>
+                        <p class="text-slate-400 text-xs">비상시 수동 작동 신뢰성 확보</p>
                     </div>
-                    <p class="text-slate-400 text-sm mt-4 leading-relaxed">
-                        정전 시에도 수동으로 개폐 가능해야 함
-                    </p>
                 </div>
 
                 <!-- 감지 연동 -->
-                <div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
-                    <div class="w-14 h-14 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
+                <div class="card-glass rounded-3xl p-8 card-hover relative overflow-hidden group">
+                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-purple-500/10 rounded-full blur-2xl group-hover:bg-purple-500/20 transition-colors"></div>
+                    <div class="w-16 h-16 bg-purple-500/10 rounded-2xl flex items-center justify-center mb-6 border border-purple-500/10">
                         <span class="text-3xl">📡</span>
                     </div>
-                    <h3 class="text-lg font-bold text-white mb-2">감지기 연동</h3>
-                    <p class="text-slate-400 text-sm mb-4">Detector Integration</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4 space-y-2">
-                        <div class="flex justify-between items-center">
-                            <span class="text-slate-300">연기/불꽃 감지</span>
-                            <span class="text-yellow-400 font-bold">일부 폐쇄</span>
+                    <h3 class="text-xl font-bold text-white mb-2">연동 시스템</h3>
+                    <p class="text-slate-500 text-sm mb-6 uppercase tracking-wider">Smart Integration</p>
+                    <div class="bg-black/40 backdrop-blur-md rounded-2xl p-5 border border-white/5 space-y-2 group-hover:border-purple-500/30 transition-colors">
+                        <div class="flex justify-between items-center text-xs">
+                            <span class="text-slate-400">연기 감지</span>
+                            <span class="text-yellow-400 font-bold">1단계 폐쇄</span>
                         </div>
-                        <div class="flex justify-between items-center">
-                            <span class="text-slate-300">열 감지</span>
-                            <span class="text-red-400 font-bold">완전 폐쇄</span>
+                        <div class="flex justify-between items-center text-xs">
+                            <span class="text-slate-400">열 감지</span>
+                            <span class="text-red-500 font-bold">2단계 폐쇄</span>
                         </div>
                     </div>
-                    <p class="text-slate-400 text-sm mt-4 leading-relaxed">
-                        2단계 폐쇄 시스템으로 피난 시간 확보
-                    </p>
                 </div>
             </div>
 
             <!-- Validity Period Chart -->
-            <div class="card-glass rounded-2xl p-8 mt-8">
-                <h3 class="text-xl font-bold text-white mb-6 text-center">품질인정서 유효기간</h3>
+            <div class="card-glass rounded-3xl p-10 mt-12 relative overflow-hidden group">
+                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-orange-500/20 to-transparent"></div>
+                <h3 class="text-2xl font-black text-white mb-10 text-center tracking-tight">품질인정서 유효기간 비교</h3>
                 <div class="chart-container">
                     <canvas id="validityChart"></canvas>
                 </div>
-                <p class="text-slate-400 text-sm text-center mt-4">
-                    자동방화셔터는 <strong class="text-orange-400">5년</strong> 유효기간이 적용되며, 만료 전 갱신 심사 필요
-                </p>
+                <div class="mt-10 p-6 bg-white/5 rounded-2xl border border-white/5 text-center">
+                    <p class="text-slate-400 leading-relaxed">
+                        자동방화셔터는 <strong class="text-orange-400 font-bold">5년</strong>의 무결성 주기를 가집니다.<br>
+                        <span class="text-sm">만료 전 갱신 실사 및 재인정 절차가 필수적으로 진행되어야 합니다.</span>
+                    </p>
+                </div>
             </div>
         </section>
 
@@ -757,410 +917,562 @@
 
             <!-- Tab Content: Post (사후관리) -->
             <div id="proc-content-post" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
-                <div class="flex items-center gap-2 mb-6">
-                    <div class="w-8 h-8 bg-purple-500/20 rounded-lg flex items-center justify-center">
-                        <span>🔄</span>
-                    </div>
-                    <span class="text-white font-bold text-lg">사후관리 체계</span>
-                </div>
-
-                <!-- 사후관리 유형 -->
-                <div class="grid md:grid-cols-2 gap-6 mb-8">
-                    <div class="bg-slate-800/50 rounded-xl p-6 border border-purple-500/30">
-                        <h4 class="text-purple-400 font-bold mb-4 flex items-center gap-2">
-                            <span class="text-xl">🏭</span> 제조현장 품질관리 확인점검
-                        </h4>
-                        <ul class="space-y-3 text-slate-300 text-sm">
-                            <li class="flex items-center gap-2">
-                                <span class="text-purple-400">▸</span>
-                                <span><strong class="text-white">점검 주기:</strong> 연 1회 이상</span>
-                            </li>
-                            <li class="flex items-center gap-2">
-                                <span class="text-purple-400">▸</span>
-                                <span><strong class="text-white">점검 방식:</strong> 정기 + 불시 점검</span>
-                            </li>
-                            <li class="flex items-center gap-2">
-                                <span class="text-purple-400">▸</span>
-                                <span><strong class="text-white">점검 기관:</strong> KICT + 시험기관 지원</span>
-                            </li>
-                        </ul>
-                        <div class="mt-4 bg-slate-700/50 rounded-lg p-3">
-                            <p class="text-slate-400 text-xs">
-                                ※ 최근 1년 내 인정신청/유효기간 연장으로 점검 실적이 있으면 동일 품목 점검 생략 가능
-                            </p>
+                <div class="flex items-center justify-between mb-8">
+                    <div class="flex items-center gap-3">
+                        <div class="w-12 h-12 bg-purple-600/20 rounded-xl flex items-center justify-center text-2xl shadow-inner">
+                            <span class="animate-pulse">🔍</span>
                         </div>
-                    </div>
-
-                    <div class="bg-slate-800/50 rounded-xl p-6 border border-blue-500/30">
-                        <h4 class="text-blue-400 font-bold mb-4 flex items-center gap-2">
-                            <span class="text-xl">🏗️</span> 건축공사장 품질관리 확인점검
-                        </h4>
-                        <ul class="space-y-3 text-slate-300 text-sm">
-                            <li class="flex items-center gap-2">
-                                <span class="text-blue-400">▸</span>
-                                <span><strong class="text-white">점검 대상:</strong> 인정제품 시공 현장</span>
-                            </li>
-                            <li class="flex items-center gap-2">
-                                <span class="text-blue-400">▸</span>
-                                <span><strong class="text-white">확인 사항:</strong> 품질인정서, 품질관리서</span>
-                            </li>
-                            <li class="flex items-center gap-2">
-                                <span class="text-blue-400">▸</span>
-                                <span><strong class="text-white">시공 확인:</strong> 인정 내용과 동일 시공 여부</span>
-                            </li>
-                        </ul>
-                        <div class="mt-4 bg-slate-700/50 rounded-lg p-3">
-                            <p class="text-slate-400 text-xs">
-                                ※ 생산/판매실적, 시공현장별 실적 자료 요청 가능
-                            </p>
+                        <div>
+                            <h3 class="text-2xl font-bold text-white tracking-tight">사후관리 체계 및 프로세스</h3>
+                            <p class="text-slate-500 text-sm">Post-Management Process & Continuous Monitoring</p>
                         </div>
                     </div>
                 </div>
 
-                <!-- 사후관리 점검 체크리스트 -->
-                <div class="bg-slate-800/30 rounded-xl p-6 mb-6">
-                    <h4 class="text-white font-bold mb-4 flex items-center gap-2">
-                        <span class="text-xl">📝</span> 사후관리 점검 체크리스트
+                <!-- 사후관리 개요 및 점검 유형 -->
+                <div class="grid md:grid-cols-3 gap-6 mb-10">
+                    <div class="bg-slate-800/40 backdrop-blur-sm rounded-2xl p-6 border border-slate-700/50 hover:bg-slate-800/60 transition-all group">
+                        <div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition duration-300">
+                            <span class="text-2xl">📅</span>
+                        </div>
+                        <h4 class="text-white font-bold text-lg mb-2">정기 점검</h4>
+                        <p class="text-slate-400 text-sm leading-relaxed mb-4">매년 1회 실시되는 정기 심사로, 품질 유지 여부를 감사하여 인정 지속 여부를 결정합니다.</p>
+                        <div class="flex items-center gap-2 text-[11px] font-bold text-purple-400 bg-purple-400/10 w-fit px-3 py-1 rounded-full">
+                            <span class="w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse"></span> 매년 정기 실시
+                        </div>
+                    </div>
+                    <div class="bg-slate-800/40 backdrop-blur-sm rounded-2xl p-6 border border-slate-700/50 hover:bg-slate-800/60 transition-all group">
+                        <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition duration-300">
+                            <span class="text-2xl">🕵️</span>
+                        </div>
+                        <h4 class="text-white font-bold text-lg mb-2">불시 점검</h4>
+                        <p class="text-slate-400 text-sm leading-relaxed mb-4">공장 또는 건설 현장을 무작위로 방문하여 실제 생산/시공 상태의 일치성을 확인합니다.</p>
+                        <div class="flex items-center gap-2 text-[11px] font-bold text-blue-400 bg-blue-400/10 w-fit px-3 py-1 rounded-full">
+                            <span class="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse"></span> 공장/현장 무작위 점검
+                        </div>
+                    </div>
+                    <div class="bg-slate-800/40 backdrop-blur-sm rounded-2xl p-6 border border-slate-700/50 hover:bg-slate-800/60 transition-all group">
+                        <div class="w-12 h-12 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition duration-300">
+                            <span class="text-2xl">⚡</span>
+                        </div>
+                        <h4 class="text-white font-bold text-lg mb-2">제재 조치</h4>
+                        <p class="text-slate-400 text-sm leading-relaxed mb-4">점검 결과 위반 사항이 확인될 경우, 기준에 따라 인정 취소 또는 정지 처분이 내려집니다.</p>
+                        <div class="flex items-center gap-2 text-[11px] font-bold text-red-400 bg-red-400/10 w-fit px-3 py-1 rounded-full">
+                            <span class="w-1.5 h-1.5 bg-red-400 rounded-full animate-pulse"></span> 위반 시 인정 취소 가능
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 핵심 점검 내용 (Detailed from User Image) -->
+                <div class="bg-gradient-to-br from-slate-800/50 to-purple-900/20 rounded-3xl p-8 mb-10 border border-purple-500/10">
+                    <h4 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
+                        <span class="text-2xl">📋</span> 점검 핵심 프로세스
                     </h4>
-                    <div class="grid md:grid-cols-3 gap-4">
-                        <div class="bg-slate-700/50 rounded-lg p-4">
-                            <p class="text-orange-400 font-bold text-sm mb-2">원재료 관리</p>
-                            <ul class="text-slate-300 text-xs space-y-1">
-                                <li>☐ 입고검사 기록 유지</li>
-                                <li>☐ 품질기준 충족 확인</li>
-                                <li>☐ 원재료 보관 상태</li>
-                                <li>☐ 추적성 확보 (LOT 관리)</li>
-                            </ul>
+                    <div class="grid md:grid-cols-3 gap-8">
+                        <div class="space-y-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 bg-slate-900 text-purple-400 rounded-xl flex items-center justify-center font-bold border border-purple-500/30">01</div>
+                                <span class="text-white font-semibold">인정 내용 생산 여부</span>
+                            </div>
+                            <p class="text-slate-400 text-xs leading-relaxed">최초 인정 시 제출된 설계도서, 부품 규격, 재질 등이 실제 제조 공정에서 그대로 적용되고 있는지 정밀 대조합니다.</p>
                         </div>
-                        <div class="bg-slate-700/50 rounded-lg p-4">
-                            <p class="text-blue-400 font-bold text-sm mb-2">제조공정 관리</p>
-                            <ul class="text-slate-300 text-xs space-y-1">
-                                <li>☐ 배합비 준수 (±10%)</li>
-                                <li>☐ 공정 표준 이행</li>
-                                <li>☐ 중간검사 실시</li>
-                                <li>☐ 공정 기록 유지</li>
-                            </ul>
+                        <div class="space-y-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 bg-slate-900 text-purple-400 rounded-xl flex items-center justify-center font-bold border border-purple-500/30">02</div>
+                                <span class="text-white font-semibold">품질 시스템 유지</span>
+                            </div>
+                            <p class="text-slate-400 text-xs leading-relaxed">원재료 입고검사 기록, 제조 공정 일지, 출하 전 성능 시험 기록 등 품질 관리 시스템이 실질적으로 작동하는지 확인합니다.</p>
                         </div>
-                        <div class="bg-slate-700/50 rounded-lg p-4">
-                            <p class="text-green-400 font-bold text-sm mb-2">제품 출하 관리</p>
-                            <ul class="text-slate-300 text-xs space-y-1">
-                                <li>☐ 출하 전 검사 완료</li>
-                                <li>☐ 인정표시 부착</li>
-                                <li>☐ 품질관리서 발행</li>
-                                <li>☐ 판매실적 기록</li>
-                            </ul>
+                        <div class="space-y-4">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 bg-slate-900 text-purple-400 rounded-xl flex items-center justify-center font-bold border border-purple-500/30">03</div>
+                                <span class="text-white font-semibold">시공 현장 적합성</span>
+                            </div>
+                            <p class="text-slate-400 text-xs leading-relaxed">현장에 설치된 제품이 품질인정 내용과 일치하는지, 법적 설치 기준(3m 이내 방화문 등)을 준수했는지 샘플링 조사합니다.</p>
                         </div>
                     </div>
                 </div>
 
-                <!-- 제재 조치 -->
-                <div class="grid md:grid-cols-2 gap-6">
-                    <div class="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-6">
-                        <h4 class="text-yellow-400 font-bold mb-4 flex items-center gap-2">
-                            <span class="text-xl">⚠️</span> 개선요청 및 일시정지
-                        </h4>
-                        <ul class="space-y-2 text-slate-300 text-sm">
-                            <li class="flex items-start gap-2">
-                                <span class="text-yellow-400">•</span>
-                                <span>품질관리 경미한 사항 → <strong class="text-white">30일 내 개선</strong></span>
-                            </li>
-                            <li class="flex items-start gap-2">
-                                <span class="text-yellow-400">•</span>
-                                <span>개선 미이행 시 → <strong class="text-white">인정 일시정지</strong></span>
-                            </li>
-                            <li class="flex items-start gap-2">
-                                <span class="text-yellow-400">•</span>
-                                <span>공동신청 시 → <strong class="text-white">전체 제조현장 일시정지</strong></span>
-                            </li>
-                        </ul>
+                <!-- Interactive Post-Management Dashboard (The "Process" Logic) -->
+                <div class="bg-slate-900/80 rounded-3xl border border-slate-700 overflow-hidden shadow-2xl">
+                    <div class="p-6 border-b border-slate-700 bg-slate-800/30 flex flex-col md:flex-row justify-between items-center gap-4">
+                        <div>
+                            <h4 class="text-white font-bold flex items-center gap-2">
+                                <span class="w-2 h-2 bg-purple-500 rounded-full animate-ping"></span>
+                                사후관리 프로세스 시뮬레이터
+                            </h4>
+                            <p class="text-slate-500 text-xs mt-1">실제 점검 시나리오를 바탕으로 결과 및 제재 조치를 시뮬레이션합니다.</p>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <button onclick="resetSimulator()" class="text-slate-400 hover:text-white text-xs transition underline underline-offset-4">초기화</button>
+                            <button onclick="runAudit()" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2.5 px-6 rounded-xl text-sm transition shadow-lg shadow-purple-900/20">점검 프로세스 시작</button>
+                        </div>
                     </div>
 
-                    <div class="bg-red-500/10 border border-red-500/30 rounded-xl p-6">
-                        <h4 class="text-red-400 font-bold mb-4 flex items-center gap-2">
-                            <span class="text-xl">⛔</span> 인정 취소 사유
-                        </h4>
-                        <ul class="space-y-2 text-slate-300 text-sm">
-                            <li class="flex items-start gap-2">
-                                <span class="text-red-400">•</span>
-                                <span>시험체 허위 제작 후 인정 취득</span>
-                            </li>
-                            <li class="flex items-start gap-2">
-                                <span class="text-red-400">•</span>
-                                <span>품질기준 미달 제품 판매</span>
-                            </li>
-                            <li class="flex items-start gap-2">
-                                <span class="text-red-400">•</span>
-                                <span>미인정 제품을 인정 제품으로 판매</span>
-                            </li>
-                            <li class="flex items-start gap-2">
-                                <span class="text-red-400">•</span>
-                                <span>일시정지 사유 미해소</span>
-                            </li>
-                        </ul>
+                    <div class="p-8">
+                        <!-- Step Tracker -->
+                        <div class="flex items-center justify-between mb-12 max-w-3xl mx-auto px-6 relative">
+                            <div class="absolute top-5 left-10 right-10 h-0.5 bg-slate-800 z-0">
+                                <div id="sim-progress-line" class="h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-700" style="width: 0%"></div>
+                            </div>
+                            
+                            <div class="flex flex-col items-center gap-3 relative z-10" onclick="goToSimStep(1)">
+                                <div id="sim-step-1" class="w-10 h-10 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold ring-4 ring-slate-900 transition-all duration-500">1</div>
+                                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">정보 입력</span>
+                            </div>
+                            <div class="flex flex-col items-center gap-3 relative z-10" onclick="goToSimStep(2)">
+                                <div id="sim-step-2" class="w-10 h-10 bg-slate-800 text-slate-500 rounded-full flex items-center justify-center font-bold ring-4 ring-slate-900 transition-all duration-500">2</div>
+                                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">현장 감사</span>
+                            </div>
+                            <div class="flex flex-col items-center gap-3 relative z-10" onclick="goToSimStep(3)">
+                                <div id="sim-step-3" class="w-10 h-10 bg-slate-800 text-slate-500 rounded-full flex items-center justify-center font-bold ring-4 ring-slate-900 transition-all duration-500">3</div>
+                                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">데이터 판정</span>
+                            </div>
+                            <div class="flex flex-col items-center gap-3 relative z-10" onclick="goToSimStep(4)">
+                                <div id="sim-step-4" class="w-10 h-10 bg-slate-800 text-slate-500 rounded-full flex items-center justify-center font-bold ring-4 ring-slate-900 transition-all duration-500">4</div>
+                                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">최종 조치</span>
+                            </div>
+                        </div>
+
+                        <!-- Panel Area -->
+                        <div id="sim-panels" class="min-h-[320px]">
+                            <!-- Step 1: Input -->
+                            <div id="sim-panel-1" class="animate-slide-up">
+                                <div class="grid md:grid-cols-2 gap-8">
+                                    <div class="space-y-4">
+                                        <label class="text-xs font-bold text-slate-500 uppercase">점검 대상 사업체</label>
+                                        <div class="relative">
+                                            <select id="sim-company" class="w-full bg-slate-800/50 border border-slate-700 text-white rounded-2xl px-5 py-4 focus:ring-2 focus:ring-purple-500 outline-none transition appearance-none">
+                                                <option value="">대상 기업을 선택하세요</option>
+                                                <option value="A">우리방화기술(주) - [우수]</option>
+                                                <option value="B">대흥특수셔터 - [관리주의]</option>
+                                                <option value="C">신한코리아 - [정기]</option>
+                                            </select>
+                                            <div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500">▼</div>
+                                        </div>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <label class="text-xs font-bold text-slate-500 uppercase">점검 시나리오 유형</label>
+                                        <div class="flex gap-3">
+                                            <button onclick="setSimType('regular')" id="btn-type-regular" class="flex-1 py-4 bg-purple-600/10 border border-purple-500/50 text-purple-400 rounded-2xl font-bold hover:bg-purple-600/20 transition">정기 점검</button>
+                                            <button onclick="setSimType('random')" id="btn-type-random" class="flex-1 py-4 bg-slate-800 border border-slate-700 text-slate-500 rounded-2xl font-bold hover:bg-slate-700 transition">불시 점검</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Step 2: Audit Checklist -->
+                            <div id="sim-panel-2" class="hidden animate-slide-up space-y-8">
+                                <div class="grid md:grid-cols-2 gap-6">
+                                    <div class="space-y-4">
+                                        <h5 class="text-sm font-bold text-slate-300 border-l-4 border-purple-500 pl-3">원재료 및 생산 일치성</h5>
+                                        <div class="space-y-3">
+                                            <label class="flex items-center gap-3 p-4 bg-slate-800/50 rounded-xl border border-slate-700 cursor-pointer hover:bg-slate-800 transition">
+                                                <input type="checkbox" onchange="updateSimProgress()" class="w-5 h-5 accent-purple-500">
+                                                <span class="text-sm text-slate-400">주요 부자재(강판, 모터) 인정 규격 일치</span>
+                                            </label>
+                                            <label class="flex items-center gap-3 p-4 bg-slate-800/50 rounded-xl border border-slate-700 cursor-pointer hover:bg-slate-800 transition">
+                                                <input type="checkbox" onchange="updateSimProgress()" class="w-5 h-5 accent-purple-500">
+                                                <span class="text-sm text-slate-400">부품별 LOT 번호 추적성 확보</span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="space-y-4">
+                                        <h5 class="text-sm font-bold text-slate-300 border-l-4 border-blue-500 pl-3">품질관리 시스템 기록</h5>
+                                        <div class="space-y-3">
+                                            <label class="flex items-center gap-3 p-4 bg-slate-800/50 rounded-xl border border-slate-700 cursor-pointer hover:bg-slate-800 transition">
+                                                <input type="checkbox" onchange="updateSimProgress()" class="w-5 h-5 accent-purple-500">
+                                                <span class="text-sm text-slate-400">검사 설비 교정 필증 유효기간 준수</span>
+                                            </label>
+                                            <label class="flex items-center gap-3 p-4 bg-slate-800/50 rounded-xl border border-slate-700 cursor-pointer hover:bg-red-900/10 transition border-red-500/20">
+                                                <input id="chk-violation" type="checkbox" onchange="updateSimProgress()" class="w-5 h-5 accent-red-500">
+                                                <span class="text-sm text-red-500 font-bold">임의 부품 변경 또는 불일치 발견</span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="bg-indigo-900/20 border border-indigo-500/20 rounded-2xl p-6">
+                                    <p class="text-xs text-indigo-300 font-medium mb-2 uppercase tracking-tight">현장 감독관 의견</p>
+                                    <textarea id="sim-note" class="w-full bg-slate-900 border border-slate-800 rounded-xl p-4 text-sm text-white focus:ring-1 focus:ring-indigo-500 outline-none h-20 placeholder:text-slate-700" placeholder="기타 특이사항 및 현장 실사 의견을 기록하세요..."></textarea>
+                                </div>
+                            </div>
+
+                            <!-- Step 3: Result Analysis -->
+                            <div id="sim-panel-3" class="hidden animate-slide-up flex flex-col items-center justify-center py-10">
+                                <div id="verdict-loading" class="text-center group">
+                                    <div class="relative w-24 h-24 mb-6 mx-auto">
+                                        <div class="absolute inset-0 border-4 border-purple-500/20 rounded-full"></div>
+                                        <div class="absolute inset-0 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
+                                        <div class="absolute inset-0 flex items-center justify-center text-2xl group-hover:scale-125 transition">📊</div>
+                                    </div>
+                                    <p class="text-slate-400 font-medium animate-pulse">점검 데이터 정합성 분석 중...</p>
+                                </div>
+                                <div id="verdict-result" class="hidden text-center max-w-lg">
+                                    <div id="verdict-icon" class="text-6xl mb-6">✅</div>
+                                    <h5 id="verdict-title" class="text-3xl font-black text-white mb-4">판정 결과: 적합</h5>
+                                    <p id="verdict-desc" class="text-slate-500 mb-8 leading-relaxed text-sm">기반 데이터 분석 결과, 현재 공장 품질 관리 상태가 품질인정기준 유지를 위한 적정 수준임을 확인하였습니다.</p>
+                                    <div class="bg-slate-800 border border-slate-700 rounded-2xl p-6 text-left w-full shadow-xl">
+                                        <h6 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4">분석 리포트 요약</h6>
+                                        <ul id="verdict-summary" class="space-y-3 text-sm">
+                                            <li class="flex items-center gap-3 text-slate-300"><span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> 자재 일치성 분석: <strong class="text-white">100%</strong></li>
+                                            <li class="flex items-center gap-3 text-slate-300"><span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> 공정 기록 신뢰도: <strong class="text-white">높음</strong></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Step 4: Final Sanction -->
+                            <div id="sim-panel-4" class="hidden animate-slide-up">
+                                <div id="sanction-card" class="bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl border border-slate-700 overflow-hidden shadow-2xl">
+                                    <div id="sanction-header" class="bg-green-600/10 p-6 border-b border-slate-700 flex justify-between items-center">
+                                        <span class="text-xs font-black text-green-500 uppercase tracking-widest">Administrative Action</span>
+                                        <span class="text-xs text-slate-500" id="sanction-date">2026.01.01</span>
+                                    </div>
+                                    <div class="p-8 space-y-8">
+                                        <div class="grid grid-cols-2 gap-8">
+                                            <div>
+                                                <p class="text-[10px] font-bold text-slate-500 uppercase mb-2">처분 대상자</p>
+                                                <p id="final-company" class="text-xl font-bold text-white">우리방화기술(주)</p>
+                                            </div>
+                                            <div>
+                                                <p class="text-[10px] font-bold text-slate-500 uppercase mb-2">처분 종류</p>
+                                                <p id="final-action" class="text-xl font-bold text-green-400">현행 유지 (적합)</p>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <p class="text-[10px] font-bold text-slate-500 uppercase mb-3 tracking-widest">처분 근거 및 사유</p>
+                                            <div id="final-reason" class="p-5 bg-slate-900/80 rounded-2xl border border-slate-700 text-sm text-slate-400 leading-relaxed font-light">
+                                                품질인정 및 관리기준 제20조에 의거, 사후관리 정기점검 결과 인정 기준을 충실히 유지하고 있음이 증명됨.
+                                            </div>
+                                        </div>
+                                        <button class="w-full py-4 bg-slate-700 text-white rounded-2xl font-bold hover:bg-slate-600 transition shadow-lg tracking-wide">
+                                            처분 통지서 PDF 생성 및 발송
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Progress Meta -->
+                        <div class="mt-12 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-[0.2em]">
+                            <span id="sim-progress-text">Step 1 of 4: Initial Configuration</span>
+                            <div class="flex gap-4">
+                                <span class="flex items-center gap-1.5 text-purple-500"><span class="w-2 h-2 bg-purple-500 rounded-full"></span> Active</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
-                <!-- 유효기간 연장 안내 -->
-                <div class="mt-6 bg-blue-500/10 border border-blue-500/30 rounded-xl p-6">
-                    <h4 class="text-blue-400 font-bold mb-3 flex items-center gap-2">
-                        <span class="text-xl">🔄</span> 유효기간 연장 절차
-                    </h4>
-                    <div class="flex flex-wrap gap-4 items-center text-sm">
-                        <div class="flex items-center gap-2">
-                            <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-bold">1</span>
-                            <span class="text-slate-300">만료 12~6개월 전 연장의사 통보</span>
+                <!-- Process Estimated Timeline (From User Image Hint) -->
+                <div class="mt-10 p-6 bg-blue-600/5 rounded-2xl border border-blue-500/10 flex flex-col md:flex-row items-center gap-6">
+                    <div class="flex-shrink-0 w-16 h-16 bg-blue-600/10 rounded-2xl flex items-center justify-center text-3xl">⏱️</div>
+                    <div class="flex-1">
+                        <h5 class="text-white font-bold text-lg mb-1">인정 프로세스 표준 소요 기간</h5>
+                        <p class="text-slate-400 text-sm">성능 시험 신청부터 최종 품질인정서 발급까지 통상 <strong class="text-blue-400">3개월 이상</strong>의 기간이 소요됩니다.</p>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+
+        <!-- Section 4: Recognition Process -->
+        <section id="section-process" class="scroll-mt-32">
+            <div class="section-separator"></div>
+            <div class="flex items-center gap-4 mb-10">
+                <div class="w-14 h-14 fire-gradient rounded-2xl flex items-center justify-center text-white shadow-xl">
+                    <span class="text-2xl font-black">04</span>
+                </div>
+                <div>
+                    <h2 class="text-3xl font-black text-white tracking-tight">품질인정 절차</h2>
+                    <p class="text-orange-400 font-medium text-sm">Rigorous Certification Journey</p>
+                </div>
+            </div>
+
+            <div class="card-glass rounded-3xl p-10 relative overflow-hidden">
+                <div class="absolute top-0 right-0 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl -mr-48 -mt-48"></div>
+                
+                <div class="relative z-10 space-y-8">
+                    <!-- Step 1 -->
+                    <div class="flex gap-8 group">
+                        <div class="flex flex-col items-center">
+                            <div class="w-12 h-12 rounded-full bg-orange-500 text-white flex items-center justify-center font-bold shadow-[0_0_20px_rgba(249,115,22,0.4)] z-10 group-hover:scale-110 transition-transform">1</div>
+                            <div class="w-0.5 h-full bg-gradient-to-b from-orange-500 to-white/10 mt-2"></div>
                         </div>
-                        <span class="text-slate-500">→</span>
-                        <div class="flex items-center gap-2">
-                            <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-bold">2</span>
-                            <span class="text-slate-300">시료채취 및 품질시험</span>
-                        </div>
-                        <span class="text-slate-500">→</span>
-                        <div class="flex items-center gap-2">
-                            <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-bold">3</span>
-                            <span class="text-slate-300">심사 후 연장 승인</span>
+                        <div class="pb-8 flex-1">
+                            <div class="bg-white/5 border border-white/5 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+                                <h4 class="text-xl font-bold text-white mb-2">인정 신청 및 서류 검토</h4>
+                                <p class="text-slate-400 leading-relaxed">제조 공장의 품질 관리 상태 및 제품 설계 도서의 적정성을 한국건설기술연구원(KICT)에서 1차 검토합니다.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Step 2 -->
+                    <div class="flex gap-8 group">
+                        <div class="flex flex-col items-center">
+                            <div class="w-12 h-12 rounded-full bg-orange-500 text-white flex items-center justify-center font-bold shadow-[0_0_20px_rgba(249,115,22,0.4)] z-10 group-hover:scale-110 transition-transform">2</div>
+                            <div class="w-0.5 h-full bg-gradient-to-b from-white/10 to-white/10 mt-2"></div>
+                        </div>
+                        <div class="pb-8 flex-1">
+                            <div class="bg-white/5 border border-white/5 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+                                <h4 class="text-xl font-bold text-white mb-2">공장 심사 및 시료 채취</h4>
+                                <p class="text-slate-400 leading-relaxed">전문 심사위원이 제조 현장을 직접 방문하여 생산 설비, 검사 장비, 원재료 관리 상태를 실사하고 시험용 시료를 무작위 채취합니다.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Step 3 -->
+                    <div class="flex gap-8 group">
+                        <div class="flex flex-col items-center">
+                            <div class="w-12 h-12 rounded-full bg-orange-500 text-white flex items-center justify-center font-bold shadow-[0_0_20px_rgba(249,115,22,0.4)] z-10 group-hover:scale-110 transition-transform">3</div>
+                            <div class="w-0.5 h-full bg-gradient-to-b from-white/10 to-white/10 mt-2"></div>
+                        </div>
+                        <div class="pb-8 flex-1">
+                            <div class="bg-white/5 border border-white/5 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+                                <h4 class="text-xl font-bold text-white mb-2">성능 시험 (내화/차연/개폐)</h4>
+                                <p class="text-slate-400 leading-relaxed">공인 시험 기관에서 국가 표준(KS)에 따른 극한 화재 상황 시뮬레이션을 통해 제품의 물리적 성능을 최종 검증합니다.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Step 4 -->
+                    <div class="flex gap-8 group">
+                        <div class="flex flex-col items-center">
+                            <div class="w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center font-bold shadow-[0_0_20px_rgba(34,197,94,0.4)] z-10 group-hover:scale-110 transition-transform">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                            </div>
+                        </div>
+                        <div class="flex-1">
+                            <div class="fire-gradient rounded-2xl p-6 shadow-lg shadow-orange-500/10">
+                                <h4 class="text-xl font-black text-white mb-2">품질인정서 교부</h4>
+                                <p class="text-white/80 leading-relaxed">모든 기준 충족 시 국토교통부 산하 기관에서 인정서를 발행하며, 이후 해당 제품의 생산 및 유통이 공식 허가됩니다.</p>
+                            </div>
                         </div>
                     </div>
-                    <p class="text-slate-400 text-xs mt-3">
-                        ※ 일시정지 중에는 유효기간 연장 신청 불가. 사유 해소 후 만료 6개월 전까지 신청 필요
-                    </p>
                 </div>
             </div>
         </section>
-
         <!-- Section 5: Installation Standards -->
-        <section id="section-install" class="scroll-mt-24">
-            <div class="flex items-center gap-3 mb-8">
-                <div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">5</div>
+        <section id="section-install" class="scroll-mt-32">
+            <div class="section-separator"></div>
+            <div class="flex items-center gap-4 mb-10">
+                <div class="w-14 h-14 fire-gradient rounded-2xl flex items-center justify-center text-white shadow-xl">
+                    <span class="text-2xl font-black">05</span>
+                </div>
                 <div>
-                    <h2 class="text-2xl font-bold text-white">설치 기준</h2>
-                    <p class="text-slate-400 text-sm">Installation Standards</p>
+                    <h2 class="text-3xl font-black text-white tracking-tight">설치 기준</h2>
+                    <p class="text-orange-400 font-medium text-sm">Detailed Installation Protocols</p>
                 </div>
             </div>
 
-            <div class="grid md:grid-cols-2 gap-6">
+            <div class="grid md:grid-cols-2 gap-8">
                 <!-- 필수 요건 -->
-                <div class="card-glass rounded-2xl p-6">
-                    <h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
-                        <span class="text-green-400">✓</span> 필수 설치 요건
-                    </h3>
-                    <ul class="space-y-4">
-                        <li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
-                            <span class="text-orange-400 font-bold">01</span>
-                            <div>
-                                <p class="text-white font-medium">방화문 인접 설치</p>
-                                <p class="text-slate-400 text-sm">60분+ 또는 60분 방화문으로부터 <strong class="text-orange-400">3m 이내</strong> 별도 설치</p>
+                <div class="card-glass rounded-3xl p-8 relative overflow-hidden group">
+                    <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-green-500/5 rounded-full blur-3xl"></div>
+                    <div class="flex items-center gap-3 mb-8">
+                        <div class="w-10 h-10 bg-green-500/20 text-green-400 rounded-xl flex items-center justify-center text-xl">✓</div>
+                        <h3 class="text-2xl font-bold text-white tracking-tight">필수 설치 요건</h3>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div class="bg-black/20 border border-white/5 rounded-2xl p-5 hover:border-green-500/20 transition-all group/item">
+                            <div class="flex items-start gap-4">
+                                <span class="text-orange-400 font-black text-lg mt-1">01</span>
+                                <div>
+                                    <h4 class="text-white font-bold mb-1">방화문 인접 설치</h4>
+                                    <p class="text-slate-400 text-sm leading-relaxed">
+                                        60분+ 또는 60분 방화문으로부터 <strong class="text-orange-400">3m 이내</strong>에 별도 설치되어야 합니다.
+                                    </p>
+                                </div>
                             </div>
-                        </li>
-                        <li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
-                            <span class="text-orange-400 font-bold">02</span>
-                            <div>
-                                <p class="text-white font-medium">감지기 설치</p>
-                                <p class="text-slate-400 text-sm">불꽃감지기 또는 연기감지기 + 열감지기 <strong class="text-orange-400">동시 설치</strong></p>
+                        </div>
+                        <div class="bg-black/20 border border-white/5 rounded-2xl p-5 hover:border-green-500/20 transition-all group/item">
+                            <div class="flex items-start gap-4">
+                                <span class="text-orange-400 font-black text-lg mt-1">02</span>
+                                <div>
+                                    <h4 class="text-white font-bold mb-1">복합 감지기 구성</h4>
+                                    <p class="text-slate-400 text-sm leading-relaxed">
+                                        연기감지기(1차)와 열감지기(2차)가 <strong class="text-orange-400">반드시 병행</strong> 설치되어야 합니다.
+                                    </p>
+                                </div>
                             </div>
-                        </li>
-                        <li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
-                            <span class="text-orange-400 font-bold">03</span>
-                            <div>
-                                <p class="text-white font-medium">2단계 폐쇄 구조</p>
-                                <p class="text-slate-400 text-sm">연기감지 → 일부폐쇄 / 열감지 → <strong class="text-orange-400">완전폐쇄</strong></p>
+                        </div>
+                        <div class="bg-black/20 border border-white/5 rounded-2xl p-5 hover:border-green-500/20 transition-all group/item">
+                            <div class="flex items-start gap-4">
+                                <span class="text-orange-400 font-black text-lg mt-1">03</span>
+                                <div>
+                                    <h4 class="text-white font-bold mb-1">상부 밀착 마감</h4>
+                                    <p class="text-slate-400 text-sm leading-relaxed">
+                                        셔터 박스 상부는 화염 누출 방지를 위해 <strong class="text-orange-400">슬래브에 직접 밀착</strong>해야 합니다.
+                                    </p>
+                                </div>
                             </div>
-                        </li>
-                        <li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
-                            <span class="text-orange-400 font-bold">04</span>
-                            <div>
-                                <p class="text-white font-medium">상부 밀착</p>
-                                <p class="text-slate-400 text-sm">셔터 상부는 <strong class="text-orange-400">상층 바닥에 직접 닿도록</strong> 설치</p>
-                            </div>
-                        </li>
-                    </ul>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- 금지 사항 -->
-                <div class="card-glass rounded-2xl p-6">
-                    <h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
-                        <span class="text-red-400">✕</span> 금지 사항
-                    </h3>
-                    <ul class="space-y-4">
-                        <li class="flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg p-4">
-                            <span class="text-red-400 font-bold text-xl">⛔</span>
-                            <div>
-                                <p class="text-white font-medium">일체형 방화셔터 설치 금지</p>
-                                <p class="text-slate-400 text-sm">셔터 일부에 피난 출입구가 설치된 구조는 <strong class="text-red-400">2020년부터 금지</strong></p>
-                            </div>
-                        </li>
-                        <li class="flex items-start gap-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
-                            <span class="text-yellow-400 font-bold text-xl">⚠️</span>
-                            <div>
-                                <p class="text-white font-medium">틈새 방치 금지</p>
-                                <p class="text-slate-400 text-sm">바닥과의 틈새는 연기/열 이동통로가 되지 않도록 <strong class="text-yellow-400">방화구획 수준</strong>으로 처리</p>
-                            </div>
-                        </li>
-                        <li class="flex items-start gap-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
-                            <span class="text-yellow-400 font-bold text-xl">⚠️</span>
-                            <div>
-                                <p class="text-white font-medium">스크린 셔터 외부 설치 금지</p>
-                                <p class="text-slate-400 text-sm">바람의 영향을 받는 <strong class="text-yellow-400">외부 구역</strong>에는 스크린 방화셔터 설치 불가</p>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+                <div class="card-glass rounded-3xl p-8 relative overflow-hidden group border-red-500/10">
+                    <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-red-500/5 rounded-full blur-3xl"></div>
+                    <div class="flex items-center gap-3 mb-8">
+                        <div class="w-10 h-10 bg-red-500/20 text-red-500 rounded-xl flex items-center justify-center text-xl">✕</div>
+                        <h3 class="text-2xl font-bold text-white tracking-tight">절대 금지 사항</h3>
+                    </div>
 
-            <!-- 구성요소 다이어그램 -->
-            <div class="card-glass rounded-2xl p-8 mt-6">
-                <h3 class="text-lg font-bold text-white mb-6 text-center">자동방화셔터 구성요소</h3>
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">📦</div>
-                        <p class="text-white font-medium text-sm">셔터박스</p>
-                        <p class="text-slate-500 text-xs">Shutter Box</p>
+                    <div class="space-y-4">
+                        <div class="bg-red-500/5 border border-red-500/10 rounded-2xl p-5 hover:bg-red-500/10 transition-all">
+                            <div class="flex items-start gap-4">
+                                <div class="w-2 h-2 bg-red-500 rounded-full mt-2.5 flex-shrink-0"></div>
+                                <div>
+                                    <h4 class="text-red-400 font-bold mb-1">일체형 셔터 설치</h4>
+                                    <p class="text-slate-400 text-sm leading-relaxed">
+                                        셔터 슬랫 내부에 비상문이 타공된 형태는 <strong class="text-white">현 시간부로 전면 금지</strong>되었습니다.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-red-500/5 border border-red-500/10 rounded-2xl p-5 hover:bg-red-500/10 transition-all">
+                            <div class="flex items-start gap-4">
+                                <div class="w-2 h-2 bg-red-500 rounded-full mt-2.5 flex-shrink-0"></div>
+                                <div>
+                                    <h4 class="text-red-400 font-bold mb-1">인정 범위 이외 시공</h4>
+                                    <p class="text-slate-400 text-sm leading-relaxed">
+                                        품질인정서에 기재된 <strong class="text-white">최대 설치 폭/높이</strong>를 초과하여 시공할 수 없습니다.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-red-500/5 border border-red-500/10 rounded-2xl p-5 hover:bg-red-500/10 transition-all">
+                            <div class="flex items-start gap-4">
+                                <div class="w-2 h-2 bg-red-500 rounded-full mt-2.5 flex-shrink-0"></div>
+                                <div>
+                                    <h4 class="text-red-400 font-bold mb-1">임의 구성 변경</h4>
+                                    <p class="text-slate-400 text-sm leading-relaxed">
+                                        기어, 모터, 원단 등을 <strong class="text-white">타사 제품이나 미인정 부품</strong>으로 혼용 시 자격이 상실됩니다.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">🎚️</div>
-                        <p class="text-white font-medium text-sm">가이드레일</p>
-                        <p class="text-slate-500 text-xs">Guide Rail</p>
+                </div>
+            </div>            <!-- Components Grid -->
+            <div class="card-glass rounded-3xl p-10 mt-8">
+                <h3 class="text-2xl font-black text-white mb-8 text-center tracking-tight">핵심 구성 요소</h3>
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div class="bg-white/5 rounded-2xl p-6 text-center group hover:bg-white/10 transition-all border border-white/5">
+                        <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">🔌</div>
+                         <h4 class="text-white font-bold mb-1">연동제어기</h4>
+                         <p class="text-slate-500 text-xs">감지기 신호 수신/제어</p>
                     </div>
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">📏</div>
-                        <p class="text-white font-medium text-sm">슬랫/커튼</p>
-                        <p class="text-slate-500 text-xs">Slat/Curtain</p>
+                    <div class="bg-white/5 rounded-2xl p-6 text-center group hover:bg-white/10 transition-all border border-white/5">
+                        <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">⚙️</div>
+                         <h4 class="text-white font-bold mb-1">전동개폐기</h4>
+                         <p class="text-slate-500 text-xs">셔터 승강 구동 모터</p>
                     </div>
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">⚡</div>
-                        <p class="text-white font-medium text-sm">개폐기</p>
-                        <p class="text-slate-500 text-xs">Operator</p>
+                    <div class="bg-white/5 rounded-2xl p-6 text-center group hover:bg-white/10 transition-all border border-white/5">
+                        <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">🚨</div>
+                         <h4 class="text-white font-bold mb-1">자동폐쇄장치</h4>
+                         <p class="text-slate-500 text-xs">비상시 자중 하강 제어</p>
                     </div>
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">🔘</div>
-                        <p class="text-white font-medium text-sm">제어반</p>
-                        <p class="text-slate-500 text-xs">Control Panel</p>
-                    </div>
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">📡</div>
-                        <p class="text-white font-medium text-sm">연기감지기</p>
-                        <p class="text-slate-500 text-xs">Smoke Detector</p>
-                    </div>
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">🌡️</div>
-                        <p class="text-white font-medium text-sm">열감지기</p>
-                        <p class="text-slate-500 text-xs">Heat Detector</p>
-                    </div>
-                    <div class="text-center p-4 bg-slate-800/50 rounded-xl">
-                        <div class="text-3xl mb-2">🚪</div>
-                        <p class="text-white font-medium text-sm">연동 방화문</p>
-                        <p class="text-slate-500 text-xs">Fire Door</p>
+                    <div class="bg-white/5 rounded-2xl p-6 text-center group hover:bg-white/10 transition-all border border-white/5">
+                        <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">🎞️</div>
+                         <h4 class="text-white font-bold mb-1">방화 원단</h4>
+                         <p class="text-slate-500 text-xs">비차열 1시간 내화 소재</p>
                     </div>
                 </div>
             </div>
         </section>
 
         <!-- Section 6: Field Checklist -->
-        <section id="section-check" class="scroll-mt-24 mb-16">
-            <div class="flex items-center gap-3 mb-8">
-                <div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">6</div>
+        <section id="section-check" class="scroll-mt-32">
+            <div class="section-separator"></div>
+            <div class="flex items-center gap-4 mb-10">
+                <div class="w-14 h-14 fire-gradient rounded-2xl flex items-center justify-center text-white shadow-xl">
+                    <span class="text-2xl font-black">06</span>
+                </div>
                 <div>
-                    <h2 class="text-2xl font-bold text-white">현장 실무 체크리스트</h2>
-                    <p class="text-slate-400 text-sm">Field Checklist</p>
+                    <h2 class="text-3xl font-black text-white tracking-tight">현장 점검 가이드</h2>
+                    <p class="text-orange-400 font-medium text-sm">Critical Field Inspection Points</p>
                 </div>
             </div>
 
-            <div class="grid md:grid-cols-2 gap-6">
-                <!-- 서류 확인 -->
-                <div class="card-glass rounded-2xl p-6">
-                    <div class="flex justify-between items-start mb-4">
-                        <div class="bg-orange-500/20 text-orange-400 px-3 py-1 rounded-lg text-xs font-bold">필수 서류</div>
-                        <input type="checkbox" id="check1" class="w-6 h-6 accent-orange-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
+            <div class="card-glass rounded-3xl overflow-hidden border border-white/5">
+                <div class="grid md:grid-cols-3 gap-0">
+                    <div class="p-8 border-b md:border-b-0 md:border-r border-white/5 hover:bg-white/5 transition-colors group">
+                        <div class="flex items-center gap-4 mb-6">
+                            <span class="text-2xl opacity-50 group-hover:opacity-100 transition-opacity">📑</span>
+                            <h4 class="text-white font-bold uppercase tracking-widest text-xs opacity-50">Document Review</h4>
+                        </div>
+                        <h5 class="text-xl font-bold text-white mb-4">서류 및 명판 일치</h5>
+                        <ul class="space-y-4">
+                            <li class="flex items-start gap-3">
+                                <div class="w-1.5 h-1.5 bg-orange-500 rounded-full mt-2"></div>
+                                <span class="text-slate-400 text-sm leading-relaxed">품질인정서와 현장 명판 일치 여부</span>
+                            </li>
+                            <li class="flex items-start gap-3">
+                                <div class="w-1.5 h-1.5 bg-orange-500 rounded-full mt-2"></div>
+                                <span class="text-slate-400 text-sm leading-relaxed">원단/모터 사양 준수 여부</span>
+                            </li>
+                        </ul>
                     </div>
-                    <h3 class="text-lg font-bold text-white mb-2">품질인정서</h3>
-                    <p class="text-slate-400 text-sm mb-4">KICT 원장 명의 발급 인정서 원본/사본</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
-                        <p>✓ 유효기간 확인 (5년)</p>
-                        <p>✓ 제조 공장 주소 일치 여부</p>
-                        <p>✓ 인정 규격과 납품 제품 일치 여부</p>
+                    <div class="p-8 border-b md:border-b-0 md:border-r border-white/5 hover:bg-white/5 transition-colors group">
+                        <div class="flex items-center gap-4 mb-6">
+                            <span class="text-2xl opacity-50 group-hover:opacity-100 transition-opacity">🛠️</span>
+                            <h4 class="text-white font-bold uppercase tracking-widest text-xs opacity-50">Hardware Check</h4>
+                        </div>
+                        <h5 class="text-xl font-bold text-white mb-4">하드웨어 건전성</h5>
+                        <ul class="space-y-4">
+                            <li class="flex items-start gap-3">
+                                <div class="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2"></div>
+                                <span class="text-slate-400 text-sm leading-relaxed">가이드레일 및 브래킷 상태</span>
+                            </li>
+                            <li class="flex items-start gap-3">
+                                <div class="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2"></div>
+                                <span class="text-slate-400 text-sm leading-relaxed">원단 및 와이어 체결 상태</span>
+                            </li>
+                        </ul>
                     </div>
-                </div>
-
-                <div class="card-glass rounded-2xl p-6">
-                    <div class="flex justify-between items-start mb-4">
-                        <div class="bg-orange-500/20 text-orange-400 px-3 py-1 rounded-lg text-xs font-bold">필수 서류</div>
-                        <input type="checkbox" id="check2" class="w-6 h-6 accent-orange-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
-                    </div>
-                    <h3 class="text-lg font-bold text-white mb-2">품질관리서</h3>
-                    <p class="text-slate-400 text-sm mb-4">제조사 → 감리자 제출 자체 보증서</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
-                        <p>✓ "인정 내용과 동일 생산" 문구</p>
-                        <p>✓ 제조일자 및 LOT 번호</p>
-                        <p>✓ 제조사 직인/서명</p>
-                    </div>
-                </div>
-
-                <div class="card-glass rounded-2xl p-6">
-                    <div class="flex justify-between items-start mb-4">
-                        <div class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-lg text-xs font-bold">현장 확인</div>
-                        <input type="checkbox" id="check3" class="w-6 h-6 accent-blue-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
-                    </div>
-                    <h3 class="text-lg font-bold text-white mb-2">설치 상태 점검</h3>
-                    <p class="text-slate-400 text-sm mb-4">현장 설치 적합성 육안 확인</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
-                        <p>✓ 방화문 3m 이내 설치 여부</p>
-                        <p>✓ 상부 바닥 밀착 여부</p>
-                        <p>✓ 가이드레일 내화벽체 접촉 여부</p>
-                    </div>
-                </div>
-
-                <div class="card-glass rounded-2xl p-6">
-                    <div class="flex justify-between items-start mb-4">
-                        <div class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-lg text-xs font-bold">현장 확인</div>
-                        <input type="checkbox" id="check4" class="w-6 h-6 accent-blue-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
-                    </div>
-                    <h3 class="text-lg font-bold text-white mb-2">작동 시험</h3>
-                    <p class="text-slate-400 text-sm mb-4">감지기 연동 및 폐쇄 동작 확인</p>
-                    <div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
-                        <p>✓ 연기감지 → 일부폐쇄 동작</p>
-                        <p>✓ 열감지 → 완전폐쇄 동작</p>
-                        <p>✓ 수동 개폐 정상 작동</p>
+                    <div class="p-8 hover:bg-white/5 transition-colors group">
+                        <div class="flex items-center gap-4 mb-6">
+                            <span class="text-2xl opacity-50 group-hover:opacity-100 transition-opacity">⚡</span>
+                            <h4 class="text-white font-bold uppercase tracking-widest text-xs opacity-50">Logic Test</h4>
+                        </div>
+                        <h5 class="text-xl font-bold text-white mb-4">연동 및 복구 테스트</h5>
+                        <ul class="space-y-4">
+                            <li class="flex items-start gap-3">
+                                <div class="w-1.5 h-1.5 bg-green-500 rounded-full mt-2"></div>
+                                <span class="text-slate-400 text-sm leading-relaxed">비상 배터리 구동 테스트</span>
+                            </li>
+                            <li class="flex items-start gap-3">
+                                <div class="w-1.5 h-1.5 bg-green-500 rounded-full mt-2"></div>
+                                <span class="text-slate-400 text-sm leading-relaxed">감지기 연동 폐쇄 확인</span>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
-
-            <!-- Status Box -->
-            <div id="status-box" class="mt-6 p-6 card-glass rounded-xl text-center transition-all duration-500">
-                <span id="status-text" class="font-bold text-slate-400 text-lg">위 항목들을 모두 확인해주세요.</span>
-                <div id="status-progress" class="mt-4 h-2 bg-slate-700 rounded-full overflow-hidden">
-                    <div id="progress-bar" class="h-full bg-gradient-to-r from-orange-500 to-red-500 transition-all duration-500" style="width: 0%"></div>
+            
+            <div class="mt-12 text-center pb-20">
+                <div class="inline-flex items-center gap-4 bg-white/5 border border-white/10 px-8 py-4 rounded-full text-slate-300 hover:text-white transition cursor-pointer group">
+                    <span>전체 가이드라인 PDF 다운로드</span>
+                    <svg class="w-5 h-5 group-hover:translate-y-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
                 </div>
             </div>
-
-            <!-- Online Verification -->
-            <div class="mt-8 card-glass rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-4">
-                <div class="flex items-center gap-4">
-                    <div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center text-2xl">🖥️</div>
-                    <div>
-                        <h4 class="font-bold text-white text-lg">온라인 진위 확인</h4>
-                        <p class="text-slate-400 text-sm">KICT 홈페이지에서 인정 취소/정지 여부 실시간 조회</p>
-                    </div>
-                </div>
-                <a href="https://www.kict.re.kr" target="_blank" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-xl transition shadow-lg">
-                    KICT 현황 조회 →
-                </a>
-            </div>
         </section>
-
     </main>
 
     <!-- Footer -->
-    <footer class="bg-slate-900 border-t border-slate-800 py-10">
-        <div class="max-w-5xl mx-auto px-4 text-center">
-            <div class="flex items-center justify-center gap-3 mb-4">
-                <div class="w-10 h-10 fire-gradient rounded-lg flex items-center justify-center">
-                    <span class="text-xl">🔥</span>
-                </div>
-                <span class="font-bold text-lg text-white">자동방화셔터 품질인정제도 가이드</span>
+    <footer class="mt-20 py-16 bg-black/40 backdrop-blur-3xl border-t border-white/5 relative overflow-hidden">
+        <div class="container mx-auto px-6 relative z-10 text-center">
+            <div class="text-2xl font-black text-white mb-4 tracking-tighter">
+                CODE<span class="text-orange-500">BRIDGE</span>-X
+            </div>
+            <p class="text-slate-500 text-sm mb-8">
+                &copy; 2024 SAM Sales Support System. Built for Safety Excellence.
+            </p>
+            <div class="flex justify-center gap-8 text-slate-400 text-xs font-medium uppercase tracking-widest">
+                <a href="#" class="hover:text-orange-500 transition-colors">Privacy Policy</a>
+                <a href="#" class="hover:text-orange-500 transition-colors">Terms of Service</a>
             </div>
-            <p class="text-slate-500 text-sm mb-2">참고 법령: 방화문 및 자동방화셔터의 인정 및 관리기준 (국토교통부고시 제2021-1009호)</p>
-            <p class="text-slate-600 text-xs">본 페이지는 교육 및 참고 목적으로 제작되었습니다. 정확한 법적 해석은 관련 기관에 문의하세요.</p>
-            <p class="text-slate-700 text-xs mt-4">© 2025 Fire Shutter Quality Recognition Guide</p>
         </div>
     </footer>
 
@@ -1407,6 +1719,134 @@
                 }
             });
         });
+
+        // --- Post-Management Simulator Core Logic ---
+        let currentSimStep = 1;
+        let simType = 'regular';
+
+        function setSimType(type) {
+            simType = type;
+            const regBtn = document.getElementById('btn-type-regular');
+            const ranBtn = document.getElementById('btn-type-random');
+            
+            if (type === 'regular') {
+                regBtn.className = 'flex-1 py-4 bg-purple-600/10 border border-purple-500/50 text-purple-400 rounded-2xl font-bold transition';
+                ranBtn.className = 'flex-1 py-4 bg-slate-800 border border-slate-700 text-slate-500 rounded-2xl font-bold hover:bg-slate-700 transition';
+            } else {
+                regBtn.className = 'flex-1 py-4 bg-slate-800 border border-slate-700 text-slate-500 rounded-2xl font-bold hover:bg-slate-700 transition';
+                ranBtn.className = 'flex-1 py-4 bg-blue-600/10 border border-blue-500/50 text-blue-400 rounded-2xl font-bold transition';
+            }
+        }
+
+        function goToSimStep(step) {
+            if (step > currentSimStep + 1 && step !== 1) return;
+            
+            for (let i = 1; i <= 4; i++) {
+                document.getElementById(`sim-panel-${i}`).classList.add('hidden');
+                document.getElementById(`sim-step-${i}`).className = 'w-10 h-10 bg-slate-800 text-slate-500 rounded-full flex items-center justify-center font-bold ring-4 ring-slate-900 transition-all duration-500';
+            }
+
+            document.getElementById(`sim-panel-${step}`).classList.remove('hidden');
+            currentSimStep = step;
+
+            for (let i = 1; i <= 4; i++) {
+                const el = document.getElementById(`sim-step-${i}`);
+                if (i < step) {
+                    el.className = 'w-10 h-10 bg-purple-900/50 text-purple-400 rounded-full flex items-center justify-center font-bold ring-4 ring-slate-900 transition-all';
+                    el.innerHTML = '✓';
+                } else if (i === step) {
+                    el.className = 'w-10 h-10 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold ring-4 ring-slate-900 transition-all scale-125 shadow-xl shadow-purple-900/40';
+                    el.innerHTML = i;
+                } else {
+                    el.innerHTML = i;
+                }
+            }
+
+            document.getElementById('sim-progress-line').style.width = ((step - 1) / 3 * 100) + '%';
+            
+            const titles = ['', 'Configuration', 'Field Audit', 'Data Analysis', 'Final Verdict'];
+            document.getElementById('sim-progress-text').innerText = `Step ${step} of 4: ${titles[step]}`;
+
+            if (step === 3) runVerdictAnalysis();
+        }
+
+        function runAudit() {
+            const company = document.getElementById('sim-company').value;
+            if (!company) {
+                alert('점검 대상 기업을 먼저 선택해주세요.');
+                return;
+            }
+            goToSimStep(2);
+        }
+
+        function updateSimProgress() {}
+
+        function runVerdictAnalysis() {
+            const loading = document.getElementById('verdict-loading');
+            const result = document.getElementById('verdict-result');
+            loading.classList.remove('hidden');
+            result.classList.add('hidden');
+
+            setTimeout(() => {
+                loading.classList.add('hidden');
+                result.classList.remove('hidden');
+
+                const isViolation = document.getElementById('chk-violation').checked;
+                const vIcon = document.getElementById('verdict-icon');
+                const vTitle = document.getElementById('verdict-title');
+                const vDesc = document.getElementById('verdict-desc');
+                const vSummary = document.getElementById('verdict-summary');
+                
+                const sHeader = document.getElementById('sanction-header');
+                const fAction = document.getElementById('final-action');
+                const fReason = document.getElementById('final-reason');
+
+                if (isViolation) {
+                    vIcon.innerText = '‼️';
+                    vTitle.innerText = '판정 결과: 부적합 발견';
+                    vTitle.className = 'text-3xl font-black text-red-500 mb-4';
+                    vDesc.innerText = '심각한 품질인정 기준 위반 사항이 감지되었습니다. 법규에 의거하여 즉각적인 행정 처분을 권고합니다.';
+                    vSummary.innerHTML = `
+                        <li class="flex items-center gap-3 text-red-400"><span class="w-1.5 h-1.5 bg-red-500 rounded-full animate-ping"></span> 자재 일치성 분석: <strong class="text-white">불일치 (두께 부족)</strong></li>
+                        <li class="flex items-center gap-3 text-red-400"><span class="w-1.5 h-1.5 bg-red-500 rounded-full"></span> 품질 시스템 신뢰도: <strong class="text-white">불량 (기록 도용)</strong></li>
+                    `;
+                    
+                    sHeader.className = 'bg-red-600/10 p-6 border-b border-slate-700 flex justify-between items-center';
+                    fAction.innerText = '인정 취소 (형사 고발 검토)';
+                    fAction.className = 'text-xl font-bold text-red-500';
+                    fReason.innerText = '방화셔터 슬랫 두께(규격 1.55T) 미달 제품을 생산하여 시중에 유통하였으며, 품질 관리 일지를 허위로 작성한 사실이 현장 점검에서 확인됨.';
+                } else {
+                    vIcon.innerText = '✅';
+                    vTitle.innerText = '판정 결과: 적합';
+                    vTitle.className = 'text-3xl font-black text-green-400 mb-4';
+                    vDesc.innerText = '공장 실사 및 데이터 분석 결과, 모든 품질 유지 요건을 충족하고 있음을 확인하였습니다.';
+                    vSummary.innerHTML = `
+                        <li class="flex items-center gap-3 text-green-400"><span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> 자재 일치성 분석: <strong class="text-white">100% 일치</strong></li>
+                        <li class="flex items-center gap-3 text-green-400"><span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> 품질 시스템 신뢰도: <strong class="text-white">매우 우수</strong></li>
+                    `;
+                    
+                    sHeader.className = 'bg-green-600/10 p-6 border-b border-slate-700 flex justify-between items-center';
+                    fAction.innerText = '현행 유지 (적합)';
+                    fAction.className = 'text-xl font-bold text-green-400';
+                    fReason.innerText = '사후관리 점검 결과, 인정 당시의 품질 및 생산 시스템을 최상의 상태로 유지하고 있으며 주요 원자입고부터 제품 출하까지 추적성이 완벽하게 관리되고 있음.';
+                }
+
+                document.getElementById('final-company').innerText = 
+                    document.getElementById('sim-company').options[document.getElementById('sim-company').selectedIndex].text.split(' - ')[0];
+
+            }, 1800);
+        }
+
+        function resetSimulator() {
+            currentSimStep = 1;
+            document.getElementById('sim-company').selectedIndex = 0;
+            const checkboxes = document.querySelectorAll('#sim-panel-2 input[type="checkbox"]');
+            checkboxes.forEach(c => c.checked = false);
+            document.getElementById('sim-note').value = '';
+            setSimType('regular');
+            goToSimStep(1);
+        }
     </script>
 </body>
 </html>
+
diff --git a/index.php b/index.php
index 894260d..9c1871c 100644
--- a/index.php
+++ b/index.php
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CodeBridge-X SAM - 영업관리 </title>
+    <title>영업 관리 시스템</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -478,6 +478,15 @@
             pdf: 'pdf/sales13.pdf',            
             script: "기존 ERP가 직원용 '도구'였다면, **SAM은 대표님의 의사결정을 위한 '무기'입니다.  로그인 10초 만에 AI가 요약한 5대 핵심 지표를 파악하고, '돈 들어오는 소리'와 함께 실시간으로 회사를 통제하십시오. 보고서 대기 없는 'AI 경영 비서' SAM으로, 이제 복잡한 데이터가 아닌 오직 '경영'에만 집중할 때입니다",
             tags: ['Comparison', 'AI', 'Efficiency'],
+          },
+          {
+            id: '14',
+            title: '품질인정제도 가이드 (영업 전략)',
+            image: 'img/sales14.jpg',
+            description: '2021년 강화된 자동방화셔터 품질인정제도에 따른 영업 대응 전략입니다. 법적 기준 변화를 기회로 만드는 핵심 인사이트를 제공합니다.',
+            url: 'etc/shutter.php',
+            script: "대표님, 최근 방화셔터 법규가 바뀐 것 알고 계시나요? 이제 단순히 셔터만 설치하는 게 아니라 '품질인정제도'를 통과한 제품만 시공이 가능합니다. 이 변화가 왜 대표님께 기회인지, 어떻게 리스크를 피할 수 있는지 이 가이드에서 핵심만 정리해 드립니다.",
+            tags: ['Strategy', 'Compliance', 'Sales Pitch'],
           }
         ];
 
@@ -495,6 +504,7 @@
 
         // Initial Render
         function init() {
+            
             renderFilters();
             renderGrid();
             if (typeof lucide !== 'undefined') {
@@ -524,7 +534,7 @@
         function getFilteredAssets() {
             if (activeFilter === '전체') return ASSETS;
             return ASSETS.filter(asset => {
-                if (activeFilter === 'CEO 설득') return asset.tags.some(tag => ['Pitch', 'Opener', 'Pain Points', 'Solution', 'Closing', 'Risk', 'Needs', 'Differentiation', 'Investment', 'Cost', 'Value'].includes(tag));
+                if (activeFilter === 'CEO 설득') return asset.tags.some(tag => ['Pitch', 'Opener', 'Pain Points', 'Solution', 'Closing', 'Risk', 'Needs', 'Differentiation', 'Investment', 'Cost', 'Value', 'Strategy'].includes(tag));
                 if (activeFilter === '데모') return asset.tags.some(tag => ['Demo', 'Dashboard', 'Video', 'Mobile', 'UX', 'Infra', 'Feature', 'Automation', 'Management'].includes(tag));
                 return true;
             });
@@ -737,16 +747,24 @@
                     
                     <div class="p-4 border-t border-slate-100 bg-slate-50 rounded-b-2xl flex justify-end gap-3">
                          <button onclick="closeModal()" class="px-3 sm:px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 font-medium hover:bg-slate-50 transition-colors whitespace-nowrap text-sm sm:text-base">닫기</button>
+                         ${asset.url ? `
+                         <a href="${asset.url}" class="px-3 sm:px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2 whitespace-nowrap text-sm sm:text-base">
+                            <i data-lucide="external-link" class="w-4 h-4 flex-shrink-0"></i>
+                            <span>품질인정제도 소개 →</span>
+                         </a>
+                         ` : ''}
                          ${asset.pdf ? `
                          <button onclick="openPdfViewer('${asset.id}')" class="px-3 sm:px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2 whitespace-nowrap text-sm sm:text-base">
                             <i data-lucide="file-text" class="w-4 h-4 flex-shrink-0"></i>
                             <span>상세자료 보기</span>
                          </button>
                          ` : `
+                         ${!asset.url ? `
                          <button onclick="showDownloadToast(); closeModal()" class="px-3 sm:px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2 whitespace-nowrap text-sm sm:text-base">
                             <i data-lucide="download" class="w-4 h-4 flex-shrink-0"></i>
                             <span>자료 사용하기</span>
                          </button>
+                         ` : ''}
                          `}
                     </div>
                 </div>
diff --git a/policy/index.php b/policy/index.php
index 0e4a631..d4504ec 100644
--- a/policy/index.php
+++ b/policy/index.php
@@ -574,24 +574,44 @@
             </div>
         </section>
 
-        <!-- Section 6: FAQs -->
+        <!-- Section 7: External Sales Assets -->
         <section class="section">
             <div class="section-header">
-                <span class="section-tag">Appendix</span>
-                <h2>주요 Q&A</h2>
+                <span class="section-tag">Sales Support Assets</span>
+                <h2>제품별 영업 가이드</h2>
+                <p>현장 영업에 즉시 활용 가능한 고도화된 제품 가이드라인입니다.</p>
             </div>
-            <div class="glass-card animate-up">
-                <div style="margin-bottom: 1.5rem;">
-                    <h4 style="color: var(--secondary);">Q. 하위 파트너가 없는 경우는 어떻게 되나요?</h4>
-                    <p>본인의 직접 판매에 대한 20% 수당만 지급됩니다. 관리자 및 교육자 수당은 하위 계층이 형성되었을 때만 발생합니다.</p>
-                </div>
-                <div style="margin-bottom: 1.5rem;">
-                    <h4 style="color: var(--secondary);">Q. 계약이 취소되면 수당을 반환해야 하나요?</h4>
-                    <p>이미 지급된 가입비 수당은 회수하지 않는 것을 원칙으로 하나, 부정 계약 등의 특수 상황 발생 시 별도 심의가 있을 수 있습니다.</p>
-                </div>
-                <div>
-                    <h4 style="color: var(--secondary);">Q. 월 구독료에 대한 수당은 없나요?</h4>
-                    <p>현재 SAM 수당 정책은 신규 파트너십 구축 및 인프라 기여도에 대한 가치를 높게 평가하여 <strong>가입비</strong>에만 수당을 집중하고 있습니다. 구독료는 서비스의 안정적 유지 및 고도화 비용으로 활용됩니다.</p>
+            
+            <div class="glass-card animate-up" style="border: 1px solid rgba(255, 95, 0, 0.2); background: linear-gradient(135deg, rgba(255, 95, 0, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);">
+                <div style="display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;">
+                    <div style="flex: 1; min-width: 300px;">
+                        <h3 style="color: #ff5f00; font-family: 'Outfit', sans-serif; font-size: 1.75rem; margin-bottom: 1rem;">🔥 자동방화셔터 품질인정제도 가이드</h3>
+                        <p style="color: var(--text-muted); margin-bottom: 1.5rem;">
+                            2021년 강화된 국토교통부 고시를 완벽 분석한 영업 자료입니다. 
+                            <span style="color: #ff5f00; font-weight: 600;">유리/철재/스크린 셔터</span>의 성능 기준과 현장 점검 필수 체크리스트를 포함하고 있습니다.
+                        </p>
+                        <a href="../etc/shutter.php" class="glass-card" style="display: inline-block; padding: 0.8rem 2rem; background: #ff5f00; color: white; text-decoration: none; border: none; font-weight: 800; border-radius: 12px; transition: var(--transition);">
+                            가이드 상세 보기 →
+                        </a>
+                    </div>
+                    <div class="policy-grid" style="flex: 1; min-width: 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                        <div style="background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 16px; text-align: center;">
+                            <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📐</div>
+                            <div style="font-size: 0.8rem; font-weight: 600;">설치 기준</div>
+                        </div>
+                        <div style="background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 16px; text-align: center;">
+                            <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📋</div>
+                            <div style="font-size: 0.8rem; font-weight: 600;">체크리스트</div>
+                        </div>
+                        <div style="background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 16px; text-align: center;">
+                            <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🔬</div>
+                            <div style="font-size: 0.8rem; font-weight: 600;">인정 절차</div>
+                        </div>
+                        <div style="background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 16px; text-align: center;">
+                            <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">🛠️</div>
+                            <div style="font-size: 0.8rem; font-weight: 600;">시공 안내</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
diff --git a/salesmanagement/api/company_info.php b/salesmanagement/api/company_info.php
index c9d89f2..de0b0cd 100644
--- a/salesmanagement/api/company_info.php
+++ b/salesmanagement/api/company_info.php
@@ -120,6 +120,123 @@ $roleData = [
             ]
         ]
     ],
+    '운영자' => [
+        'sales_records' => [
+            [
+                "id" => "sale_001",
+                "customer_name" => "대박 식당",
+                "program_id" => "prog_pro",
+                "contract_date" => "2024-10-15",
+                "duration_months" => 84,
+                "join_fee" => 2000000,
+                "subscription_fee" => 100000,
+                "total_amount" => 2000000,
+                "status" => "Active",
+                "dates" => [
+                    "contract" => "2024-10-15",
+                    "join_fee" => "2024-10-16",
+                    "service_start" => "2024-11-01",
+                    "subscription_fee" => "2024-11-25",
+                    "product_modified" => "2024-10-15"
+                ],
+                "history" => [
+                    [
+                        "date" => "2024-10-15",
+                        "type" => "New Contract",
+                        "program_id" => "prog_pro",
+                        "description" => "Initial contract signed (Pro Plan)"
+                    ]
+                ]
+            ]
+        ],
+        'current_user' => [
+            "id" => "user_admin",
+            "name" => "운영자",
+            "role" => "운영자",
+            "sub_managers" => []
+        ]
+    ],
+    '영업관리' => [
+        'sales_records' => [
+            [
+                "id" => "sale_201",
+                "customer_name" => "서초 IT센터",
+                "program_id" => "prog_pro",
+                "contract_date" => "2024-09-10",
+                "duration_months" => 84,
+                "join_fee" => 2000000,
+                "subscription_fee" => 100000,
+                "total_amount" => 2000000,
+                "status" => "Active",
+                "dates" => [
+                    "contract" => "2024-09-10",
+                    "join_fee" => "2024-09-11",
+                    "service_start" => "2024-10-01",
+                    "subscription_fee" => "2024-10-25",
+                    "product_modified" => "2024-09-10"
+                ],
+                "history" => [
+                    [
+                        "date" => "2024-09-10",
+                        "type" => "New Contract",
+                        "program_id" => "prog_pro",
+                        "description" => "Initial contract signed (Pro Plan)"
+                    ]
+                ]
+            ]
+        ],
+        'current_user' => [
+            "id" => "user_sales_admin",
+            "name" => "영업관리자",
+            "role" => "영업관리",
+            "sub_managers" => [
+                [
+                    "id" => "user_2B",
+                    "name" => "한성실 대리",
+                    "role" => "Sub-Manager",
+                    "total_sales" => 35000000,
+                    "active_contracts" => 4,
+                    "performance_grade" => "A"
+                ]
+            ]
+        ]
+    ],
+    '매니저' => [
+        'sales_records' => [
+            [
+                "id" => "sale_301",
+                "customer_name" => "잠실 마트",
+                "program_id" => "prog_basic",
+                "contract_date" => "2024-08-15",
+                "duration_months" => 84,
+                "join_fee" => 1000000,
+                "subscription_fee" => 50000,
+                "total_amount" => 1000000,
+                "status" => "Active",
+                "dates" => [
+                    "contract" => "2024-08-15",
+                    "join_fee" => "2024-08-16",
+                    "service_start" => "2024-09-01",
+                    "subscription_fee" => "2024-09-25",
+                    "product_modified" => "2024-08-15"
+                ],
+                "history" => [
+                    [
+                        "date" => "2024-08-15",
+                        "type" => "New Contract",
+                        "program_id" => "prog_basic",
+                        "description" => "Initial contract signed (Basic Plan)"
+                    ]
+                ]
+            ]
+        ],
+        'current_user' => [
+            "id" => "user_manager",
+            "name" => "매니저",
+            "role" => "매니저",
+            "sub_managers" => []
+        ]
+    ],
     '2차영업담당' => [
         'sales_records' => [
             [
diff --git a/salesmanagement/index.php b/salesmanagement/index.php
index 2e227b7..1809430 100644
--- a/salesmanagement/index.php
+++ b/salesmanagement/index.php
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>영업 관리 시스템 - codebridge-x</title>
+    <title>영업 관리 시스템</title>
     
     <!-- Fonts: Pretendard -->
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />