SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
sam-sales/etc/shutter.php
aweso 1e636ecbcc 히어로 섹션에 Vimeo 영상을 추가 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-06 14:17:16 +09:00

1907 lines
124 KiB
PHP
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동방화셔터 품질인정제도 가이드</title>
<script src="https://cdn.tailwindcss.com"></script>
<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: #020617;
color: #f8fafc;
overflow-x: hidden;
}
.gradient-bg {
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, var(--brand-orange) 0%, #dc2626 100%);
box-shadow: 0 10px 20px -5px rgba(234, 88, 12, 0.5);
}
/* Refined glassmorphism */
.card-glass {
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(-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%;
max-width: 600px;
margin: auto;
height: 320px;
}
@media (min-width: 768px) {
.chart-container { height: 360px; }
}
.glow-orange {
box-shadow: 0 0 40px rgba(234, 88, 12, 0.25);
}
.glow-blue {
box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.step-connector {
position: absolute;
left: 24px;
top: 48px;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, var(--brand-orange), transparent);
opacity: 0.3;
}
::-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, 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: 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-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 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 class="tracking-tight">자동방화셔터 <span class="text-white/60 font-light">가이드</span></span>
</div>
<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>
<a href="https://www.kict.re.kr/menu.es?mid=a10403020000" target="_blank" class="flex items-center gap-1.5 text-orange-400 hover:text-white transition bg-orange-400/5 px-4 py-2 rounded-xl border border-orange-400/20">
<span class="font-bold">KICT</span>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
</a>
</div>
<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-900 border-t border-white/5">
<div class="px-4 py-3 space-y-2">
<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 border-b border-white/5">체크리스트</button>
<a href="https://www.kict.re.kr/menu.es?mid=a10403020000" target="_blank" class="block w-full text-left py-3 text-orange-400 font-bold">🏛️ KICT 바로가기</a>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-5xl mx-auto px-4 py-8 space-y-24 relative z-10">
<!-- Hero Section -->
<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-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-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-6 mb-12">
<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-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>
<!-- Video Section -->
<div class="mt-16 max-w-4xl mx-auto animate-slide-up" style="animation-delay: 0.2s;">
<div class="card-glass rounded-3xl p-6 md:p-8 overflow-hidden border border-white/10 hover:border-orange-500/30 transition-all">
<div class="flex items-center justify-center gap-3 mb-6">
<div class="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
<h3 class="text-2xl md:text-3xl font-black text-white tracking-tight">
<span class="fire-text-gradient">품질인정제도의 현실</span>
</h3>
<div class="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
</div>
<div class="relative w-full" style="padding-bottom: 56.25%; background: #000;">
<iframe
src="https://player.vimeo.com/video/1151273154?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
class="absolute top-0 left-0 w-full h-full rounded-2xl"
style="border: none;">
</iframe>
</div>
</div>
</div>
</div>
</header>
<!-- Section 1: Overview -->
<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-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-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 text-lg">
자동방화셔터는 <strong class="text-orange-400 font-bold">방화구획</strong>의 공간적 한계를 극복하기 위해 화재 시 연기 및 열을 감지하여 자동 폐쇄되는 고난도 방화설비입니다.
</p>
<p class="text-slate-400 leading-relaxed">
대형 유통시설, 공항, 환승센터 등 대규모 개방 공간에서 평상시 동선을 확보하면서도 화재 시 안전한 구획을 형성하는 핵심 안전 장치입니다.
</p>
</div>
<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-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-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-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-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-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>
</div>
</div>
</section>
<!-- Section 2: Types of Fire Shutters -->
<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-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 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="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="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-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-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-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-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-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-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-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-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-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-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="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-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-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-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-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="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>
</div>
</div>
</section>
<!-- Section 3: Performance Specifications -->
<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-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-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-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>
</div>
<!-- 차연성능 -->
<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-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>
</div>
<!-- 개폐성능 -->
<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-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>
</div>
<!-- 감지 연동 -->
<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-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 text-xs">
<span class="text-slate-400">열 감지</span>
<span class="text-red-500 font-bold">2단계 폐쇄</span>
</div>
</div>
</div>
</div>
<!-- Validity Period Chart -->
<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>
<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>
<!-- Section 4: Recognition Process -->
<section id="section-process" 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">4</div>
<div>
<h2 class="text-2xl font-bold text-white">품질인정 절차 및 심사</h2>
<p class="text-slate-400 text-sm">Recognition Process & Audit</p>
</div>
</div>
<!-- Sub Navigation for Process -->
<div class="flex gap-2 mb-6 overflow-x-auto pb-2">
<button id="proc-tab-flow" onclick="showProcessTab('flow')" class="tab-active px-5 py-2 rounded-lg font-medium whitespace-nowrap transition text-sm">
인정 절차
</button>
<button id="proc-tab-audit" onclick="showProcessTab('audit')" class="bg-slate-700 text-slate-300 px-5 py-2 rounded-lg font-medium whitespace-nowrap hover:bg-slate-600 transition text-sm">
인정심사 항목
</button>
<button id="proc-tab-docs" onclick="showProcessTab('docs')" class="bg-slate-700 text-slate-300 px-5 py-2 rounded-lg font-medium whitespace-nowrap hover:bg-slate-600 transition text-sm">
필수 서류
</button>
<button id="proc-tab-post" onclick="showProcessTab('post')" class="bg-slate-700 text-slate-300 px-5 py-2 rounded-lg font-medium whitespace-nowrap hover:bg-slate-600 transition text-sm">
사후관리
</button>
</div>
<!-- Tab Content: Flow -->
<div id="proc-content-flow" class="card-glass rounded-2xl p-8 animate-slide-up">
<div class="flex items-center gap-2 mb-8">
<div class="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center">
<span>🏛️</span>
</div>
<span class="text-slate-300">운영 기관: <strong class="text-white">한국건설기술연구원(KICT)</strong></span>
</div>
<div class="relative">
<!-- Process Steps -->
<div class="space-y-6">
<!-- Step 1 -->
<div id="process-step-1" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(1)">
<div class="absolute left-0 top-0 w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">1</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-orange-500 to-blue-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-orange-500/50 group-hover:border-orange-500 transition">
<h4 class="text-lg font-bold text-white mb-2">성능 시험 신청</h4>
<p class="text-slate-400 text-sm hidden md:block">KOLAS 공인시험기관에서 내화·차연·개폐성능 시험</p>
</div>
</div>
<!-- Step 2 -->
<div id="process-step-2" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(2)">
<div class="absolute left-0 top-0 w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">2</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 to-green-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-blue-500 transition">
<h4 class="text-lg font-bold text-white mb-2">공장 심사</h4>
<p class="text-slate-400 text-sm hidden md:block">KICT 전문가의 제조 공장 품질관리 시스템 현장 심사</p>
</div>
</div>
<!-- Step 3 -->
<div id="process-step-3" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(3)">
<div class="absolute left-0 top-0 w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">3</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-green-500 to-purple-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-green-500 transition">
<h4 class="text-lg font-bold text-white mb-2">품질인정서 발급</h4>
<p class="text-slate-400 text-sm hidden md:block">성능시험 + 공장심사 합격 시 KICT 원장 명의 인정서 발급</p>
</div>
</div>
<!-- Step 4 -->
<div id="process-step-4" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(4)">
<div class="absolute left-0 top-0 w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">4</div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-purple-500 transition">
<h4 class="text-lg font-bold text-white mb-2">사후 관리</h4>
<p class="text-slate-400 text-sm hidden md:block">매년 정기/불시 점검, 품질 유지 여부 감시 (위반 시 인정 취소)</p>
</div>
</div>
</div>
</div>
<!-- Process Detail Modal -->
<div id="process-detail" class="mt-8 bg-slate-700/50 rounded-xl p-6 hidden animate-slide-up">
<div id="detail-content"></div>
</div>
<!-- Timeline Note -->
<div class="mt-8 flex items-center gap-3 bg-blue-500/10 border border-blue-500/30 rounded-xl p-4">
<span class="text-2xl">⏱️</span>
<p class="text-slate-300 text-sm">
<strong class="text-blue-400">예상 소요기간:</strong> 성능시험부터 인정서 발급까지 통상 <strong class="text-white">3개월 이상</strong> 소요
</p>
</div>
</div>
<!-- Tab Content: Audit (인정심사 항목) -->
<div id="proc-content-audit" 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-orange-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">
<!-- 제조현장 품질관리 확인 -->
<div class="bg-slate-800/50 rounded-xl p-6 border border-slate-600">
<h4 class="text-orange-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-start gap-2">
<span class="text-green-400 mt-0.5">✓</span>
<div>
<strong class="text-white">원재료 입고검사</strong>
<p class="text-slate-400">슬랫, 가이드레일 등 주요 재료 품질기준 충족 여부</p>
</div>
</li>
<li class="flex items-start gap-2">
<span class="text-green-400 mt-0.5">✓</span>
<div>
<strong class="text-white">제조공정 관리</strong>
<p class="text-slate-400">배합비 허용오차 ±10% 이하, 공정 표준 준수</p>
</div>
</li>
<li class="flex items-start gap-2">
<span class="text-green-400 mt-0.5">✓</span>
<div>
<strong class="text-white">제품검사</strong>
<p class="text-slate-400">출하 전 성능 검사, LOT별 기록 관리</p>
</div>
</li>
<li class="flex items-start gap-2">
<span class="text-green-400 mt-0.5">✓</span>
<div>
<strong class="text-white">제조·검사설비 유지관리</strong>
<p class="text-slate-400">설비 점검 기록, 교정 현황</p>
</div>
</li>
<li class="flex items-start gap-2">
<span class="text-green-400 mt-0.5">✓</span>
<div>
<strong class="text-white">부적합품 및 불만처리</strong>
<p class="text-slate-400">부적합 처리 절차, 고객 불만 대응 기록</p>
</div>
</li>
</ul>
</div>
<!-- 인정 적정성 심사 -->
<div class="bg-slate-800/50 rounded-xl p-6 border border-slate-600">
<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-start gap-2">
<span class="text-blue-400 mt-0.5">▸</span>
<div>
<strong class="text-white">성능 적합성</strong>
<p class="text-slate-400">품질시험 결과 내화·차연·개폐성능 충족 확인</p>
</div>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-400 mt-0.5">▸</span>
<div>
<strong class="text-white">내구성 및 안전성</strong>
<p class="text-slate-400">부가시험 결과 (차연성능, 개폐성능 등)</p>
</div>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-400 mt-0.5">▸</span>
<div>
<strong class="text-white">시공 적정성</strong>
<p class="text-slate-400">시험체 제작확인서, 시험결과보고서 검토</p>
</div>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-400 mt-0.5">▸</span>
<div>
<strong class="text-white">설계도서 적합성</strong>
<p class="text-slate-400">인정 규격과 실제 설계도면 일치 여부</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 신청자격 제한 사항 -->
<div class="mt-6 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>
<div class="grid md:grid-cols-2 gap-4 text-sm">
<div class="bg-slate-800/30 rounded-lg p-4">
<p class="text-white font-medium mb-2">6개월 이내 취소 시</p>
<ul class="text-slate-400 space-y-1">
<li>• 유효기간 연장 시험 불합격</li>
<li>• 경미한 개선요청 미이행</li>
</ul>
</div>
<div class="bg-slate-800/30 rounded-lg p-4">
<p class="text-white font-medium mb-2">12개월 이내 취소 시</p>
<ul class="text-slate-400 space-y-1">
<li>• 일시정지 중 제품 판매</li>
<li>• 품질관리 허위/점검 거부</li>
</ul>
</div>
<div class="bg-slate-800/30 rounded-lg p-4 md:col-span-2">
<p class="text-white font-medium mb-2">24개월 이내 취소 시</p>
<ul class="text-slate-400 space-y-1">
<li>• 시험체 허위 제작 후 인정 취득</li>
<li>• 원재료 품질기준 미달 제품 판매</li>
<li>• 미인정 제품을 인정 제품으로 판매</li>
<li>• 배합비 상이 제품 판매</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Tab Content: Docs (필수 서류) -->
<div id="proc-content-docs" 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-green-500/20 rounded-lg flex items-center justify-center">
<span>📁</span>
</div>
<span class="text-white font-bold text-lg">인정 신청 및 심사 필수 서류</span>
</div>
<div class="space-y-6">
<!-- 인정 신청 서류 -->
<div>
<h4 class="text-orange-400 font-bold mb-4 text-lg">📋 인정 신청 시 제출 서류</h4>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-orange-500">
<p class="text-white font-medium">건축자재등 인정신청서</p>
<p class="text-slate-400 text-sm">관리기준 제1호서식</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-orange-500">
<p class="text-white font-medium">설계도서</p>
<p class="text-slate-400 text-sm">상세 구조도, 재료 규격, 치수 도면</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-orange-500">
<p class="text-white font-medium">품질관리설명서</p>
<p class="text-slate-400 text-sm">배합비, 공정관리, 검사설비 목록 포함</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-orange-500">
<p class="text-white font-medium">사업자등록증</p>
<p class="text-slate-400 text-sm">제조업 등록 확인</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-orange-500">
<p class="text-white font-medium">공장등록증</p>
<p class="text-slate-400 text-sm">제조현장 소재지 확인</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-orange-500">
<p class="text-white font-medium">품질시험 희망기관 신청서</p>
<p class="text-slate-400 text-sm">KOLAS 공인시험기관 지정</p>
</div>
</div>
</div>
<!-- 심사 과정 서류 -->
<div>
<h4 class="text-blue-400 font-bold mb-4 text-lg">🔍 심사 과정 생성 서류</h4>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-blue-500">
<p class="text-white font-medium">시료채취확인서</p>
<p class="text-slate-400 text-sm">별지 제3호서식 - 현장 시료 채취 기록</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-blue-500">
<p class="text-white font-medium">품질시험 결과보고서</p>
<p class="text-slate-400 text-sm">별지 제4호서식 - 시험기관 발급</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-blue-500">
<p class="text-white font-medium">시험체 제작확인서</p>
<p class="text-slate-400 text-sm">별지 제5호서식 - 시험체 규격 확인</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-blue-500">
<p class="text-white font-medium">제조현장 품질관리점검표</p>
<p class="text-slate-400 text-sm">공장심사 결과 기록</p>
</div>
</div>
</div>
<!-- 인정 후 관리 서류 -->
<div>
<h4 class="text-green-400 font-bold mb-4 text-lg">✅ 인정 후 제출/비치 서류</h4>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-green-500">
<p class="text-white font-medium">품질인정서</p>
<p class="text-slate-400 text-sm">별지 제2호서식 - KICT 원장 발급</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-green-500">
<p class="text-white font-medium">품질관리서</p>
<p class="text-slate-400 text-sm">제조사 → 감리자 제출 보증서</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-green-500">
<p class="text-white font-medium">생산 및 판매실적</p>
<p class="text-slate-400 text-sm">별지 제7호서식 - 분기별 제출</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-green-500">
<p class="text-white font-medium">시공실적</p>
<p class="text-slate-400 text-sm">현장별 시공 내역 기록</p>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content: Post (사후관리) -->
<div id="proc-content-post" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
<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>
<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="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-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="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="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>
<!-- 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="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>
<!-- 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>
<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>
</div>
</div>
</section>
<!-- Section 5: Installation Standards -->
<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-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-8">
<!-- 필수 요건 -->
<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>
</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>
</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>
</div>
</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="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>
</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="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="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="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-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-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="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>
<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 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>
<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>
</section>
<!-- KICT Shortcut Section -->
<section class="mt-16 mb-24">
<div class="card-glass rounded-[2rem] p-1.5 overflow-hidden group">
<a href="https://www.kict.re.kr/menu.es?mid=a10403020000" target="_blank" class="flex flex-col md:flex-row items-center gap-8 bg-black/40 rounded-[1.8rem] p-8 md:p-12 transition-all group-hover:bg-black/60">
<div class="w-full md:w-1/3 flex justify-center p-6 bg-white rounded-2xl group-hover:scale-105 transition-transform shadow-2xl">
<img src="../img/kict_logo.png" alt="KICT 한국건설기술연구원" class="h-16 md:h-20 object-contain">
</div>
<div class="flex-1 text-center md:text-left">
<div class="inline-flex items-center gap-2 bg-orange-500/10 text-orange-400 px-4 py-1.5 rounded-full text-xs font-bold mb-4 border border-orange-500/20">
KICT 공식 서비스
</div>
<h3 class="text-2xl md:text-3xl font-black text-white mb-4 tracking-tight">
한국건설기술연구원 <span class="text-orange-500">인증·인정 서비스</span>
</h3>
<p class="text-slate-400 text-lg mb-8 font-light leading-relaxed">
시험 신청, 진행 현황 확인 및 관련 규정 조회를 위한<br class="hidden md:block">
<strong class="text-white font-medium">KICT 공식 홈페이지</strong>로 직접 연결됩니다.
</p>
<div class="inline-flex items-center gap-3 bg-white text-black font-bold py-4 px-8 rounded-2xl hover:bg-orange-500 hover:text-white transition-all transform group-hover:translate-x-2">
<span>인증·인정 업무 사이트 바로가기</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</div>
</div>
</a>
</div>
</section>
</main>
<!-- Footer -->
<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>
</div>
</footer>
<!-- JavaScript -->
<script>
// Mobile Menu Toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
// Smooth Scroll
function scrollToSection(id) {
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
document.getElementById('mobile-menu').classList.add('hidden');
}
// Process Tab Switch
function showProcessTab(type) {
const tabs = ['flow', 'audit', 'docs', 'post'];
tabs.forEach(t => {
const tabBtn = document.getElementById(`proc-tab-${t}`);
const content = document.getElementById(`proc-content-${t}`);
if (t === type) {
tabBtn.classList.add('tab-active');
tabBtn.classList.remove('bg-slate-700', 'text-slate-300');
content.classList.remove('hidden');
} else {
tabBtn.classList.remove('tab-active');
tabBtn.classList.add('bg-slate-700', 'text-slate-300');
content.classList.add('hidden');
}
});
}
// Shutter Type Tabs
function showShutterType(type) {
const types = ['steel', 'screen', 'compare'];
types.forEach(t => {
document.getElementById(`tab-${t}`).classList.remove('tab-active');
document.getElementById(`tab-${t}`).classList.add('bg-slate-700', 'text-slate-300');
document.getElementById(`content-${t}`).classList.add('hidden');
});
document.getElementById(`tab-${type}`).classList.add('tab-active');
document.getElementById(`tab-${type}`).classList.remove('bg-slate-700', 'text-slate-300');
document.getElementById(`content-${type}`).classList.remove('hidden');
}
// Process Detail
const processDetails = {
1: {
title: '1단계: 성능 시험 신청',
icon: '🔬',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-orange-400">시험기관:</strong> KOLAS 인정 공인시험기관 또는 ISO/IEC 17025 인정기관</li>
<li><strong class="text-orange-400">시험항목:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 내화성능 (KS F 2268-1) - 비차열 1시간 이상</li>
<li>• 차연성능 (KS F 4510)</li>
<li>• 개폐성능 (KS F 4510)</li>
</ul>
</li>
<li><strong class="text-orange-400">주의:</strong> 시험체 양면 각 1회씩 시험 실시</li>
</ul>
`
},
2: {
title: '2단계: 공장 심사',
icon: '🏭',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-blue-400">심사기관:</strong> 한국건설기술연구원(KICT) 전문가</li>
<li><strong class="text-blue-400">심사내용:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 원자재 입고 및 관리 체계</li>
<li>• 제조 공정 표준화 준수</li>
<li>• 품질검사 설비 및 인력</li>
<li>• 출하 전 검사 시스템</li>
</ul>
</li>
<li><strong class="text-blue-400">핵심:</strong> 품질인정제도의 가장 중요한 차별점!</li>
</ul>
`
},
3: {
title: '3단계: 품질인정서 발급',
icon: '📜',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-green-400">발급조건:</strong> 성능시험 + 공장심사 모두 합격</li>
<li><strong class="text-green-400">발급기관:</strong> 한국건설기술연구원장 명의</li>
<li><strong class="text-green-400">유효기간:</strong> 5년 (갱신 심사 필요)</li>
<li><strong class="text-green-400">기재사항:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 인정 규격 (크기, 성능등급)</li>
<li>• 제조 공장 정보</li>
<li>• 인정 조건 및 제한사항</li>
</ul>
</li>
</ul>
`
},
4: {
title: '4단계: 사후 관리',
icon: '🔍',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-purple-400">정기점검:</strong> 매년 실시</li>
<li><strong class="text-purple-400">불시점검:</strong> 공장 또는 건설현장 무작위 점검</li>
<li><strong class="text-purple-400">점검내용:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 인정 내용대로 생산 여부</li>
<li>• 품질관리 시스템 유지 상태</li>
<li>• 시공 현장 적합성</li>
</ul>
</li>
<li><strong class="text-red-400">제재:</strong> 위반 시 인정 취소 또는 정지 가능</li>
</ul>
`
}
};
function showProcessDetail(step) {
const detail = processDetails[step];
const container = document.getElementById('process-detail');
const content = document.getElementById('detail-content');
content.innerHTML = `
<div class="flex items-center gap-3 mb-4">
<span class="text-3xl">${detail.icon}</span>
<h4 class="text-lg font-bold text-white">${detail.title}</h4>
</div>
${detail.content}
`;
container.classList.remove('hidden');
}
// Checklist Status
function updateChecklistStatus() {
const checks = [
document.getElementById('check1').checked,
document.getElementById('check2').checked,
document.getElementById('check3').checked,
document.getElementById('check4').checked
];
const count = checks.filter(c => c).length;
const percent = (count / 4) * 100;
const box = document.getElementById('status-box');
const text = document.getElementById('status-text');
const bar = document.getElementById('progress-bar');
bar.style.width = percent + '%';
if (count === 4) {
box.classList.remove('card-glass');
box.classList.add('bg-green-500/20', 'border', 'border-green-500/50');
text.className = 'font-bold text-green-400 text-lg';
text.innerHTML = '✅ 모든 항목 확인 완료! 현장 반입 승인 가능';
} else if (count > 0) {
box.classList.remove('bg-green-500/20', 'border-green-500/50');
box.classList.add('card-glass');
text.className = 'font-bold text-orange-400 text-lg';
text.innerHTML = `⚠️ ${count}/4 항목 확인됨. 나머지 항목을 확인해주세요.`;
} else {
box.classList.remove('bg-green-500/20', 'border-green-500/50');
box.classList.add('card-glass');
text.className = 'font-bold text-slate-400 text-lg';
text.innerHTML = '위 항목들을 모두 확인해주세요.';
}
}
// Chart.js - Validity Period
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('validityChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['방화문', '자동방화셔터', '내화구조', '내화채움구조', '복합자재(패널)'],
datasets: [{
label: '유효기간 (년)',
data: [5, 5, 5, 5, 3],
backgroundColor: [
'rgba(234, 88, 12, 0.8)',
'rgba(234, 88, 12, 1)',
'rgba(234, 88, 12, 0.8)',
'rgba(234, 88, 12, 0.8)',
'rgba(245, 158, 11, 0.8)'
],
borderColor: [
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(245, 158, 11)'
],
borderWidth: 2,
borderRadius: 8
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#fff',
bodyColor: '#94a3b8',
borderColor: 'rgba(234, 88, 12, 0.5)',
borderWidth: 1,
padding: 12,
callbacks: {
label: function(context) {
return `유효기간: ${context.raw}년`;
}
}
}
},
scales: {
x: {
beginAtZero: true,
max: 6,
grid: { color: 'rgba(71, 85, 105, 0.3)' },
ticks: { color: '#94a3b8' },
title: {
display: true,
text: '년 (Year)',
color: '#94a3b8'
}
},
y: {
grid: { display: false },
ticks: {
color: '#e2e8f0',
font: { weight: '500' }
}
}
}
}
});
});
// --- 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>
Reference in New Issue View Git Blame Copy Permalink