sam-manage/resources/views/rd/fire-shutter-drawing/index.blade.php

@extends('layouts.app')

@section('title', '방화셔터 도면생성')

@section('content')
<style>
body { font-family: 'Pretendard', sans-serif; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0f172a; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
.glass-panel { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
.neon-border { box-shadow: 0 0 15px rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs-wrap { margin: -24px; min-height: calc(100vh - 64px); background: #020617; overflow: hidden; }
.fs-input { width: 100%; background: rgba(2,6,23,0.8); border: 1px solid #334155; border-radius: 0.75rem; padding: 0.5rem 0.75rem; color: #f8fafc; font-size: 0.875rem; font-weight: 700; outline: none; transition: border-color 0.2s; }
.fs-input:focus { border-color: #3b82f6; }
.fs-label { display: block; color: #94a3b8; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.25rem; }
.fs-section { background: rgba(15,23,42,0.5); border-radius: 1rem; padding: 1rem; border: 1px solid #1e293b; }
.fs-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.75rem; font-size: 0.625rem; font-weight: 900; color: white; }
.fs-toggle { position: relative; width: 2rem; height: 1rem; background: #334155; border-radius: 9999px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.fs-toggle.active { background: #3b82f6; }
.fs-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.75rem; height: 0.75rem; background: white; border-radius: 9999px; transition: transform 0.2s; }
.fs-toggle.active::after { transform: translateX(1rem); }
.fs-select { width: 100%; background: rgba(2,6,23,0.8); border: 1px solid #334155; border-radius: 0.75rem; padding: 0.5rem 0.75rem; color: #f8fafc; font-size: 0.875rem; font-weight: 700; outline: none; }
.fs-btn { padding: 0.5rem 1rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 900; cursor: pointer; transition: all 0.2s; border: none; }
.fs-btn-primary { background: #3b82f6; color: white; }
.fs-btn-primary:hover { background: #2563eb; }
.fs-btn-ghost { background: transparent; color: #94a3b8; border: 1px solid #334155; }
.fs-btn-ghost:hover { background: #1e293b; color: white; }
.fs-btn-ghost.active { background: #1e293b; color: #3b82f6; border-color: #3b82f6; }
.fs-calc-row { display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 0; border-bottom: 1px solid rgba(51,65,85,0.3); }
.fs-calc-label { color: #64748b; font-size: 0.75rem; }
.fs-calc-value { color: #f8fafc; font-size: 0.875rem; font-weight: 900; }
.fs-ctx-menu { position: fixed; display: none; z-index: 10000; background: rgba(15,23,42,0.95); border: 1px solid #334155; border-radius: 0.5rem; padding: 0.25rem; backdrop-filter: blur(12px); box-shadow: 0 10px 25px rgba(0,0,0,0.5); min-width: 160px; }
.fs-ctx-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; background: transparent; color: #e2e8f0; font-size: 0.8125rem; font-weight: 700; cursor: pointer; border-radius: 0.375rem; white-space: nowrap; text-align: left; }
.fs-ctx-btn:hover { background: rgba(59,130,246,0.2); color: #60a5fa; }
.fs-ctx-sep { height: 1px; background: #334155; margin: 0.25rem 0; }
.fs-iso-badge { position: absolute; top: 12px; left: 12px; display: none; padding: 6px 14px; background: rgba(59,130,246,0.9); color: white; font-size: 0.75rem; font-weight: 900; border-radius: 0.5rem; z-index: 100; cursor: pointer; box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
.fs-iso-badge:hover { background: rgba(37,99,235,1); }
</style>

<div class="fs-wrap">
    <main style="max-width:1800px; margin:0 auto; padding:1rem 1.5rem;">
        <!-- ========== TOP: 기본 설정 (전체 폭) ========== -->
        <div class="fs-section mb-3" style="padding:0.75rem 1rem;">
            <div class="flex gap-3 items-end">
                <div style="flex:0 0 120px;">
                    <label class="fs-label">유형</label>
                    <select id="productType" class="fs-select" style="font-size:0.75rem;padding:0.375rem 0.5rem;" onchange="fsOnProductType()">
                        <option value="steel">철재슬라트</option>
                        <option value="screen" selected>스크린형</option>
                    </select>
                </div>
                <div style="flex:0 0 130px;">
                    <label class="fs-label">제품 모델</label>
                    <select id="productModel" class="fs-select" style="font-size:0.75rem;padding:0.375rem 0.5rem;" onchange="fsOnModelChange()">
                        <optgroup label="철재슬라트">
                            <option value="KFS01">KFS01 - 기본</option>
                            <option value="KFS02">KFS02 - 대형</option>
                        </optgroup>
                        <optgroup label="스크린형">
                            <option value="KSS01" selected>KSS01 - 실리카</option>
                            <option value="KSS02">KSS02 - 와이어</option>
                        </optgroup>
                    </select>
                </div>
                <div style="flex:0 0 90px;">
                    <label class="fs-label">오픈폭</label>
                    <input type="number" id="openWidth" class="fs-input" style="font-size:0.75rem;padding:0.375rem 0.5rem;" value="2000" onchange="fsCalc()">
                </div>
                <div style="flex:0 0 90px;">
                    <label class="fs-label">오픈H</label>
                    <input type="number" id="openHeight" class="fs-input" style="font-size:0.75rem;padding:0.375rem 0.5rem;" value="3000" onchange="fsCalc()">
                </div>
                <div style="flex:0 0 60px;">
                    <label class="fs-label">수량</label>
                    <input type="number" id="quantity" class="fs-input" style="font-size:0.75rem;padding:0.375rem 0.5rem;" value="1" min="1" onchange="fsCalc()">
                </div>
                <div class="flex-1"></div>
                <div class="flex items-center gap-3 text-[11px] text-slate-400 shrink-0">
                    <span>W1: <b id="calcW1" class="text-white">2110</b></span>
                    <span>H1: <b id="calcH1" class="text-white">3350</b></span>
                    <span>면적: <b id="calcArea" class="text-white">7.07</b>m²</span>
                    <span>중량: <b id="calcWeight" class="text-white">176.7</b>kg</span>
                    <span>모터: <b id="calcMotor" class="text-blue-400">300K</b></span>
                    <span>레일: <b id="calcRailCombo" class="text-amber-400">3,150mm × 2</b></span>
                </div>
                <button onclick="var d=document.getElementById('settingsDetail');d.classList.toggle('hidden');this.querySelector('span').textContent=d.classList.contains('hidden')?'▼':'▲';" class="text-[11px] text-slate-500 hover:text-slate-300 font-bold px-2 py-1 rounded hover:bg-slate-800 transition-colors shrink-0">
                    <span>▼</span>
                </button>
            </div>
            <!-- 접기/펼치기 상세 영역 -->
            <div id="settingsDetail" class="hidden mt-3 pt-3 border-t border-slate-700/50">
                <div class="flex gap-6">
                    <div class="flex-1 space-y-2">
                        <span class="text-[10px] text-slate-500 font-bold">프리셋</span>
                        <div class="flex gap-2">
                            <select id="presetSelect" class="fs-select flex-1" style="font-size:0.75rem;"><option value="">-- 선택 --</option></select>
                            <button class="fs-btn fs-btn-primary" style="font-size:0.65rem;padding:0.375rem 0.5rem;" onclick="fsLoadPreset()">불러오기</button>
                        </div>
                        <div class="flex gap-2">
                            <input type="text" id="presetName" class="fs-input flex-1" style="font-size:0.75rem;" placeholder="프리셋 이름">
                            <button class="fs-btn fs-btn-primary" style="font-size:0.65rem;padding:0.375rem 0.5rem;" onclick="fsSavePreset()">저장</button>
                            <button class="fs-btn fs-btn-ghost" style="font-size:0.65rem;padding:0.375rem 0.5rem;" onclick="fsDeletePreset()">삭제</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ========== BOTTOM: 좌측 컨트롤 + 우측 뷰 ========== -->
        <div class="flex" style="gap:1.25rem; height:calc(100vh - 170px);">
            <!-- LEFT PANEL -->
            <div class="custom-scrollbar" style="width:28%; flex-shrink:0; overflow-y:auto; padding-right:0.5rem;">
                <!-- Tab Buttons (1x3) -->
                <div class="grid gap-1 mb-3 bg-slate-900/50 p-1.5 rounded-xl border border-slate-800" style="grid-template-columns:1fr 1fr 1fr;">
                    <button id="tabGuideRail" class="px-3 py-2 rounded-lg font-black text-xs transition-all flex items-center gap-1.5 justify-center text-slate-400 hover:text-white hover:bg-slate-800" onclick="fsSwitch('GuideRail')">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="18" rx="1"/></svg>
                        가이드레일
                    </button>
                    <button id="tabShutterBox" class="px-3 py-2 rounded-lg font-black text-xs transition-all flex items-center gap-1.5 justify-center text-slate-400 hover:text-white hover:bg-slate-800" onclick="fsSwitch('ShutterBox')">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="8" rx="2"/><path d="M6 12v4"/><path d="M18 12v4"/></svg>
                        셔터박스
                    </button>
                    <button id="tab3D" class="px-3 py-2 rounded-lg font-black text-xs transition-all flex items-center gap-1.5 justify-center text-slate-400 hover:text-white hover:bg-slate-800" onclick="fsSwitch('3D')">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                        3D 렌더링
                    </button>
                </div>

                <!-- ========== GUIDE RAIL TAB CONTROLS ========== -->
                <div id="ctrlGuideRail" class="hidden">
                    <section class="fs-section space-y-5">
                        <h2 class="text-lg font-black text-white flex items-center gap-3">
                            <span class="fs-badge bg-purple-600">GR</span>
                            가이드레일 파라미터
                        </h2>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="fs-label">레일 전체 폭 (mm)</label>
                                <input type="number" id="grWidth" class="fs-input" value="120" step="0.1" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">레일 깊이 (mm)</label>
                                <input type="number" id="grDepth" class="fs-input" value="70" step="0.1" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">강판 두께 (mm)</label>
                                <input type="number" id="grThickness" class="fs-input" value="1.55" step="0.01" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">립(입구) 높이 (mm)</label>
                                <input type="number" id="grLip" class="fs-input" value="10" step="0.1" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">연기차단재 두께 (mm)</label>
                                <input type="number" id="grSealThick" class="fs-input" value="0.8" step="0.1" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">연기차단재 깊이 (mm)</label>
                                <input type="number" id="grSealDepth" class="fs-input" value="40" step="0.1" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">슬랫 두께 (mm)</label>
                                <input type="number" id="grSlatThick" class="fs-input" value="0.8" step="0.1" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">앵커볼트 간격 (mm)</label>
                                <input type="number" id="grAnchorSpacing" class="fs-input" value="500" step="10" onchange="fsRender()">
                            </div>
                        </div>
                    </section>

                    <section class="fs-section space-y-3 mt-4">
                        <h2 class="text-sm font-black text-slate-400">뷰 옵션</h2>
                        <div class="flex flex-wrap gap-2">
                            <button class="fs-btn fs-btn-ghost active" data-grview="cross" onclick="fsGrView('cross')">평면도</button>
                            <button class="fs-btn fs-btn-ghost" data-grview="front" onclick="fsGrView('front')">정면도</button>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-400 font-bold">치수 표시</span>
                            <div id="toggleDim" class="fs-toggle active" onclick="fsToggle(this,'showDim')"></div>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-slate-400 font-bold">연기차단재 표시</span>
                            <div id="toggleSeal" class="fs-toggle active" onclick="fsToggle(this,'showSeal')"></div>
                        </div>
                    </section>
                </div>

                <!-- ========== SHUTTER BOX TAB CONTROLS ========== -->
                <div id="ctrlShutterBox" class="hidden">
                    <section class="fs-section space-y-5">
                        <h2 class="text-lg font-black text-white flex items-center gap-3">
                            <span class="fs-badge bg-amber-600">SB</span>
                            셔터박스 파라미터
                        </h2>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="fs-label">케이스 폭 (mm)</label>
                                <input type="number" id="sbWidth" class="fs-input" value="2210" step="10" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">케이스 높이 (mm)</label>
                                <input type="number" id="sbHeight" class="fs-input" value="380" step="10" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">케이스 깊이 (mm)</label>
                                <input type="number" id="sbDepth" class="fs-input" value="500" step="10" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">강판 두께 (mm)</label>
                                <input type="number" id="sbThickness" class="fs-input" value="1.6" step="0.1" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">샤프트 직경 (mm)</label>
                                <input type="number" id="sbShaftDia" class="fs-input" value="80" step="5" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">브래킷 폭 (mm)</label>
                                <input type="number" id="sbBracketW" class="fs-input" value="10" step="1" onchange="fsRender()">
                            </div>
                        </div>

                        <div>
                            <label class="fs-label">모터 위치</label>
                            <select id="sbMotorSide" class="fs-select" onchange="fsRender()">
                                <option value="right">우측</option>
                                <option value="left">좌측</option>
                            </select>
                        </div>
                    </section>

                    <section class="fs-section space-y-3 mt-4">
                        <h2 class="text-sm font-black text-slate-400">뷰 옵션</h2>
                        <div class="flex flex-wrap gap-2">
                            <button class="fs-btn fs-btn-ghost active" data-sbview="front" onclick="fsSbView('front')">정면도</button>
                            <button class="fs-btn fs-btn-ghost" data-sbview="side" onclick="fsSbView('side')">측면도</button>
                        </div>
                        <h2 class="text-sm font-black text-slate-400 mt-3">내부 부품 표시</h2>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">샤프트</span><div class="fs-toggle active" onclick="fsToggle(this,'showShaft')"></div></div>
                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">감긴 슬랫</span><div class="fs-toggle active" onclick="fsToggle(this,'showSlatRoll')"></div></div>
                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">모터/감속기</span><div class="fs-toggle active" onclick="fsToggle(this,'showMotor')"></div></div>
                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">브레이크</span><div class="fs-toggle active" onclick="fsToggle(this,'showBrake')"></div></div>
                            <div class="flex items-center justify-between"><span class="text-xs text-slate-400">밸런스 스프링</span><div class="fs-toggle active" onclick="fsToggle(this,'showSpring')"></div></div>
                        </div>
                    </section>
                </div>

                <!-- ========== 3D TAB CONTROLS ========== -->
                <div id="ctrl3D" class="hidden">
                    <section class="fs-section" style="padding:0.75rem 1rem;">
                        <!-- 개폐율: 한 행 -->
                        <div class="flex items-center gap-2 mb-1">
                            <label class="text-[10px] text-slate-500 font-bold shrink-0" style="width:24px;">개폐</label>
                            <input type="range" id="shutterPos" min="0" max="100" value="100" class="flex-1 accent-blue-500" style="height:3px;" oninput="fs3dShutterPos(this.value)">
                            <span id="shutterPosLabel" class="text-[10px] text-blue-400 font-black shrink-0" style="width:28px;text-align:right;">100%</span>
                        </div>
                        <!-- 투명도: 한 행 -->
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[10px] text-slate-500 font-bold shrink-0" style="width:24px;">투명</label>
                            <input type="range" id="caseOpacity" min="0" max="100" value="30" class="flex-1 accent-blue-500" style="height:3px;" oninput="fs3dOpacity(this.value)">
                            <span id="opacityLabel" class="text-[10px] text-blue-400 font-black shrink-0" style="width:28px;text-align:right;">30%</span>
                        </div>
                        <!-- 부품: 4열 compact grid -->
                        <div class="grid gap-x-0.5 gap-y-0.5 mb-2" style="grid-template-columns:repeat(4,auto);">
                            <div class="flex items-center gap-0.5"><div class="fs-toggle active" onclick="fsToggle3d(this,'case')"></div><span class="text-[10px] text-slate-500">박스</span></div>
                            <div class="flex items-center gap-0.5"><div class="fs-toggle active" onclick="fsToggle3d(this,'shaft')"></div><span class="text-[10px] text-slate-500">샤프트</span></div>
                            <div class="flex items-center gap-0.5"><div class="fs-toggle active" onclick="fsToggle3d(this,'motor')"></div><span class="text-[10px] text-slate-500">모터</span></div>
                            <div class="flex items-center gap-0.5"><div class="fs-toggle active" onclick="fsToggle3d(this,'rails')"></div><span class="text-[10px] text-slate-500">레일</span></div>
                            <div class="flex items-center gap-0.5"><div class="fs-toggle active" onclick="fsToggle3d(this,'slats')"></div><span class="text-[10px] text-slate-500">슬랫</span></div>
                            <div class="flex items-center gap-0.5"><div class="fs-toggle active" onclick="fsToggle3d(this,'bottomBar')"></div><span class="text-[10px] text-slate-500">하장바</span></div>
                            <div class="flex items-center gap-0.5"><div class="fs-toggle" onclick="fsToggle3d(this,'wall')"></div><span class="text-[10px] text-slate-500">벽</span></div>
                        </div>
                        <!-- 조명색 + 배경색: 한 행 -->
                        <div class="flex items-center gap-3 border-t border-slate-800 pt-1.5">
                            <div class="flex items-center gap-1"><label class="text-[10px] text-slate-500 font-bold">조명</label><input type="color" id="lightColor" value="#ffffff" class="w-4 h-4 rounded cursor-pointer border-0 p-0" style="background:none;" onchange="fs3dLightColor(this.value)"></div>
                            <div class="flex items-center gap-1">
                                <label class="text-[10px] text-slate-500 font-bold">배경</label>
                                <button onclick="fs3dBg('#ffffff')" class="w-3.5 h-3.5 rounded border border-slate-600 hover:border-blue-400" style="background:#fff"></button>
                                <button onclick="fs3dBg('#f0f0f0')" class="w-3.5 h-3.5 rounded border border-slate-600 hover:border-blue-400" style="background:#f0f0f0"></button>
                                <button onclick="fs3dBg('#808080')" class="w-3.5 h-3.5 rounded border border-slate-600 hover:border-blue-400" style="background:#808080"></button>
                                <button onclick="fs3dBg('#303030')" class="w-3.5 h-3.5 rounded border border-slate-600 hover:border-blue-400" style="background:#303030"></button>
                                <button onclick="fs3dBg('#1a1a2e')" class="w-3.5 h-3.5 rounded border border-slate-600 hover:border-blue-400" style="background:#1a1a2e"></button>
                                <button onclick="fs3dBg('#000')" class="w-3.5 h-3.5 rounded border border-slate-600 hover:border-blue-400" style="background:#000"></button>
                            </div>
                        </div>
                    </section>

                    <!-- 벽체 설정 (벽 토글 OFF 시 숨김) -->
                    <section id="wallSettings" class="fs-section mt-2 hidden" style="padding:0.75rem 1rem;">
                        <h3 class="text-[11px] font-black text-slate-300 mb-2 flex items-center gap-1.5">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="22" height="15" rx="2"/><path d="M1 10h22"/></svg>
                            벽체 설정
                        </h3>
                        <!-- 날개벽 폭 -->
                        <div class="flex items-center gap-2 mb-1">
                            <label class="text-[10px] text-slate-500 font-bold shrink-0" style="width:42px;">날개벽</label>
                            <input type="range" id="wallWing" min="0" max="2000" value="600" step="50" class="flex-1 accent-amber-500" style="height:3px;" oninput="fs3dWall('wing',this.value)">
                            <span id="wallWingLabel" class="text-[10px] text-amber-400 font-black shrink-0" style="width:40px;text-align:right;">600</span>
                        </div>
                        <!-- 벽 두께 -->
                        <div class="flex items-center gap-2 mb-1">
                            <label class="text-[10px] text-slate-500 font-bold shrink-0" style="width:42px;">두께</label>
                            <input type="range" id="wallThick" min="100" max="1000" value="600" step="10" class="flex-1 accent-amber-500" style="height:3px;" oninput="fs3dWall('thick',this.value)">
                            <span id="wallThickLabel" class="text-[10px] text-amber-400 font-black shrink-0" style="width:40px;text-align:right;">600</span>
                        </div>
                        <!-- 벽 상단 여유 -->
                        <div class="flex items-center gap-2 mb-1">
                            <label class="text-[10px] text-slate-500 font-bold shrink-0" style="width:42px;">상단</label>
                            <input type="range" id="wallTopMargin" min="0" max="1000" value="300" step="50" class="flex-1 accent-amber-500" style="height:3px;" oninput="fs3dWall('topMargin',this.value)">
                            <span id="wallTopMarginLabel" class="text-[10px] text-amber-400 font-black shrink-0" style="width:40px;text-align:right;">300</span>
                        </div>
                        <!-- 투명도 -->
                        <div class="flex items-center gap-2 mb-2">
                            <label class="text-[10px] text-slate-500 font-bold shrink-0" style="width:42px;">투명도</label>
                            <input type="range" id="wallOpacity" min="0" max="100" value="30" class="flex-1 accent-amber-500" style="height:3px;" oninput="fs3dWall('opacity',this.value)">
                            <span id="wallOpacityLabel" class="text-[10px] text-amber-400 font-black shrink-0" style="width:40px;text-align:right;">30%</span>
                        </div>
                        <!-- 색상 프리셋 -->
                        <div class="flex items-center gap-1.5">
                            <label class="text-[10px] text-slate-500 font-bold shrink-0">색상</label>
                            <button onclick="fs3dWallColor('#a1887f')" class="w-5 h-5 rounded border border-slate-600 hover:border-amber-400 hover:scale-110 transition-all" style="background:#a1887f" title="콘크리트"></button>
                            <button onclick="fs3dWallColor('#c0785c')" class="w-5 h-5 rounded border border-slate-600 hover:border-amber-400 hover:scale-110 transition-all" style="background:#c0785c" title="벽돌"></button>
                            <button onclick="fs3dWallColor('#e8e8e8')" class="w-5 h-5 rounded border border-slate-600 hover:border-amber-400 hover:scale-110 transition-all" style="background:#e8e8e8" title="흰색 도장"></button>
                            <button onclick="fs3dWallColor('#78909c')" class="w-5 h-5 rounded border border-slate-600 hover:border-amber-400 hover:scale-110 transition-all" style="background:#78909c" title="커튼월"></button>
                            <button onclick="fs3dWallColor('#8d6e63')" class="w-5 h-5 rounded border border-slate-600 hover:border-amber-400 hover:scale-110 transition-all" style="background:#8d6e63" title="갈색 벽돌"></button>
                            <button onclick="fs3dWallColor('#b0bec5')" class="w-5 h-5 rounded border border-slate-600 hover:border-amber-400 hover:scale-110 transition-all" style="background:#b0bec5" title="ALC"></button>
                            <input type="color" id="wallColorPicker" value="#a1887f" class="w-5 h-5 rounded cursor-pointer border border-slate-600 p-0" style="background:none;" onchange="fs3dWallColor(this.value)" title="직접 선택">
                        </div>
                    </section>
                </div>

            </div>

            <!-- RIGHT PANEL: 70% -->
            <div style="flex:1; min-width:0;">
                <section class="bg-slate-900 rounded-2xl border border-slate-800 shadow-2xl flex flex-col overflow-hidden relative" style="height:100%;">
                    <!-- Preview Header -->
                    <div class="px-8 py-5 border-b border-slate-800 flex items-center justify-between bg-slate-900/50 backdrop-blur">
                        <div class="flex items-center gap-4">
                            <h3 id="previewTitle" class="text-sm font-black text-blue-500 uppercase tracking-[0.2em] flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/><path d="M21 12c-1.889 2.991-4.67 5-9 5s-7.111-2.009-9-5c1.889-2.991 4.67-5 9-5s7.111 2.009 9 5Z"/></svg>
                                방화셔터 도면 미리보기
                            </h3>
                            <div class="h-4 w-px bg-slate-700"></div>
                            <span id="scaleDisplay" class="text-[10px] font-mono text-slate-500">SCALE: 100%</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <button class="fs-btn fs-btn-ghost" onclick="fsExportPng()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="inline mr-1"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                                PNG
                            </button>
                            <button class="fs-btn fs-btn-ghost" onclick="fsExportDxf()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="inline mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                DXF
                            </button>
                            <button class="fs-btn fs-btn-ghost" onclick="fsExportJson()">JSON</button>
                        </div>
                    </div>

                    <!-- Canvas -->
                    <div id="canvasViewport" class="flex-1 bg-[#050507] relative overflow-hidden cursor-grab active:cursor-grabbing">
                        <div id="svgContainer" class="absolute inset-0 flex items-center justify-center select-none"></div>
                        <div id="threeDContainer" class="absolute inset-0 hidden"></div>

                        <!-- Zoom Controls -->
                        <div class="absolute bottom-6 right-6 flex items-center gap-2 z-10">
                            <button id="zoomInBtn" class="w-10 h-10 rounded-xl bg-slate-800/80 border border-slate-700 text-white font-black text-lg hover:bg-slate-700 transition-all">+</button>
                            <button id="zoomOutBtn" class="w-10 h-10 rounded-xl bg-slate-800/80 border border-slate-700 text-white font-black text-lg hover:bg-slate-700 transition-all">−</button>
                            <button id="zoomResetBtn" class="px-4 h-10 rounded-xl bg-slate-800/80 border border-slate-700 text-slate-400 font-black text-xs hover:bg-slate-700 transition-all">리셋</button>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>
</div>

<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

@push('scripts')
<script>
(function(){
    'use strict';
    const $ = id => document.getElementById(id);

    // ============================
    // STATE
    // ============================
    const S = {
        tab: 'Settings',
        productType: 'screen',
        openWidth: 2000,
        openHeight: 3000,
        quantity: 1,
        // Guide Rail
        gr: { width:70, depth:120, thickness:1.55, lip:10, flange:26, sideWall:80, backWall:67, trimThick:1.2, sealThick:0.8, sealDepth:40, slatThick:0.8, anchorSpacing:500, viewMode:'cross', showDim:true, showSeal:true },
        // Shutter Box
        sb: { width:2280, height:380, depth:500, thickness:1.6, shaftDia:80, bracketW:10, motorSide:'right', viewMode:'front', showShaft:true, showSlatRoll:true, showMotor:true, showBrake:true, showSpring:true },
        // 3D
        td: { shutterPos:100, caseOpacity:0.3, lightPreset:'default', bgColor:'#ffffff', show:{ case:true, shaft:true, motor:true, rails:true, slats:true, bottomBar:true, wall:false, slatRoll:true } },
        // Wall (벽체)
        wall: { wing:600, thick:600, topMargin:300, color:'#a1887f', opacity:30 },
        // View
        view: { scale:1, offset:{x:0,y:0}, dragging:false, lastMouse:{x:0,y:0} },
        // Presets
        presets: JSON.parse(localStorage.getItem('fs_presets')||'[]'),
    };

    // Product defaults
    const PRODUCTS = {
        steel: { marginW:110, marginH:350, weightFactor:25, gr:{width:120,depth:75,thickness:1.55,lip:15}, slatThick:1.6,
            sb:{height:550, depth:650, frontH:410, bottomOpen:75, shaftDia:120},
            bk:{nmH:320, nmD:320, mtH:320, mtD:530, thick:18, sprocketR:215, motorSpR:40, motorOffset:160} },
        screen: { marginW:140, marginH:350, weightFactor:2,
            gr:{width:70, depth:120, thickness:1.55, lip:10, flange:26, sideWall:80, backWall:67, trimThick:1.2},
            slatThick:0.8,
            sb:{height:380, depth:500, frontH:240, bottomOpen:75, shaftDia:80},
            bk:{nmH:180, nmD:180, mtH:180, mtD:380, thick:18, sprocketR:70, motorSpR:30, motorOffset:0} },
    };
    const MOTORS = [{max:150,spec:'150K',inch:4},{max:300,spec:'300K',inch:4},{max:500,spec:'500K',inch:5},{max:750,spec:'750K',inch:5},{max:1000,spec:'1000K',inch:6},{max:1500,spec:'1500K',inch:6}];
    const RAIL_LENGTHS = [2438, 3305, 4430];

    // 3D objects
    let scene, camera, renderer, controls, animId;
    let meshes = {};
    let fs3dIsolated = null; // 현재 단품 보기 중인 키
    const meshLabels = {
        case: '셔터박스', shaft: '샤프트 ASSY', motor: '모터/체인',
        rails: '가이드레일', slats: '슬랫 커튼', slatRoll: '감긴 슬랫',
        bottomBar: '하부바', wall: '벽체',
    };

    // ============================
    // TAB SWITCHING
    // ============================
    window.fsSwitch = function(tab) {
        S.tab = tab;
        const tabs = ['GuideRail','ShutterBox','3D'];
        const tabBtnIds = ['tabGuideRail','tabShutterBox','tab3D'];
        const ctrlIds = ['ctrlGuideRail','ctrlShutterBox','ctrl3D'];
        tabs.forEach((t,i) => {
            const btn = $(tabBtnIds[i]);
            const ctrl = $(ctrlIds[i]);
            if (t === tab) {
                btn.className = 'px-3 py-2 rounded-lg font-black text-xs transition-all flex items-center gap-1.5 justify-center bg-blue-600 text-white';
                if (ctrl) ctrl.classList.remove('hidden');
            } else {
                btn.className = 'px-3 py-2 rounded-lg font-black text-xs transition-all flex items-center gap-1.5 justify-center text-slate-400 hover:text-white hover:bg-slate-800';
                if (ctrl) ctrl.classList.add('hidden');
            }
        });
        const svgC = $('svgContainer');
        const tdC = $('threeDContainer');
        if (tab === '3D') {
            svgC.classList.add('hidden');
            tdC.classList.remove('hidden');
            fs3dInit();
            fs3dBuild();
        } else {
            svgC.classList.remove('hidden');
            tdC.classList.add('hidden');
            fsRender();
        }
    };

    // ============================
    // CALCULATIONS
    // ============================
    window.fsCalc = function() {
        undoSaveState(); // Ctrl+Z용 스냅샷 저장
        S.productType = $('productType').value;
        S.openWidth = Number($('openWidth').value) || 2000;
        S.openHeight = Number($('openHeight').value) || 3000;
        S.quantity = Number($('quantity').value) || 1;
        const p = PRODUCTS[S.productType];
        const W1 = S.openWidth + p.marginW;
        const H1 = S.openHeight + p.marginH;
        const area = (W1 * H1) / 1000000;
        const weight = area * p.weightFactor;
        const motor = MOTORS.find(m => weight <= m.max) || MOTORS[MOTORS.length-1];

        // Guide rail height = 오픈H + 100mm (바닥~셔터박스 하단 결합부)
        const guideRailH = S.openHeight + 100;
        const bestCombo = `${guideRailH.toLocaleString()}mm × 2`;

        $('calcW1').textContent = W1.toLocaleString();
        $('calcH1').textContent = H1.toLocaleString();
        $('calcArea').textContent = area.toFixed(2);
        $('calcWeight').textContent = weight.toFixed(1);
        $('calcMotor').textContent = motor.spec;
        $('calcRailCombo').textContent = bestCombo;

        // Auto-update box width
        $('sbWidth').value = W1;
        S.sb.width = W1;

        // 3D 탭 활성 시 자동 갱신
        if (S.tab === '3D') fs3dBuild();
    };

    window.fsOnProductType = function() {
        undoSaveState(); // Ctrl+Z용 스냅샷 저장
        const type = $('productType').value;
        S.productType = type;
        const p = PRODUCTS[type];
        // Update guide rail defaults
        $('grWidth').value = p.gr.width; S.gr.width = p.gr.width;
        $('grDepth').value = p.gr.depth; S.gr.depth = p.gr.depth;
        $('grThickness').value = p.gr.thickness; S.gr.thickness = p.gr.thickness;
        $('grLip').value = p.gr.lip; S.gr.lip = p.gr.lip;
        $('grSlatThick').value = p.slatThick; S.gr.slatThick = p.slatThick;
        // 스크린형 전용 속성
        S.gr.flange = p.gr.flange || 0;
        S.gr.sideWall = p.gr.sideWall || 0;
        S.gr.backWall = p.gr.backWall || 0;
        S.gr.trimThick = p.gr.trimThick || 0;
        // Update shutter box defaults
        $('sbHeight').value = p.sb.height; S.sb.height = p.sb.height;
        $('sbDepth').value = p.sb.depth; S.sb.depth = p.sb.depth;
        $('sbShaftDia').value = p.sb.shaftDia; S.sb.shaftDia = p.sb.shaftDia;
        // Filter models
        const sel = $('productModel');
        for (const opt of sel.options) {
            const isSteel = opt.value.startsWith('KF');
            const isScreen = opt.value.startsWith('KS');
            opt.hidden = (type === 'steel' && isScreen) || (type === 'screen' && isSteel);
        }
        sel.value = type === 'steel' ? 'KFS01' : 'KSS01';
        fsCalc();
        if (S.tab !== '3D') fsRender();
    };

    window.fsOnModelChange = function() { fsCalc(); };

    // ============================
    // UNDO (Ctrl+Z) — 상태 스냅샷 기반
    // ============================
    const undoStack = [];
    const UNDO_MAX = 50;
    let undoLastTime = 0;
    function undoSaveState() {
        // 100ms 이내 연속 호출 무시 (슬라이더 드래그 등)
        const now = Date.now();
        if (now - undoLastTime < 100) return;
        undoLastTime = now;
        // S에서 undo에 필요한 입력값만 스냅샷
        undoStack.push(JSON.stringify({
            productType: S.productType,
            openWidth: S.openWidth, openHeight: S.openHeight, quantity: S.quantity,
            gr: { ...S.gr }, sb: { ...S.sb },
            td: { shutterPos: S.td.shutterPos, caseOpacity: S.td.caseOpacity,
                  show: { ...S.td.show } },
            wall: { ...S.wall },
        }));
        if (undoStack.length > UNDO_MAX) undoStack.shift();
    }
    function undoRestore() {
        if (undoStack.length === 0) return;
        const snap = JSON.parse(undoStack.pop());
        // 상태 복원
        S.productType = snap.productType;
        S.openWidth = snap.openWidth; S.openHeight = snap.openHeight; S.quantity = snap.quantity;
        Object.assign(S.gr, snap.gr);
        Object.assign(S.sb, snap.sb);
        S.td.shutterPos = snap.td.shutterPos;
        S.td.caseOpacity = snap.td.caseOpacity;
        Object.assign(S.td.show, snap.td.show);
        Object.assign(S.wall, snap.wall);
        // UI 입력 필드 동기화
        $('productType').value = S.productType;
        $('openWidth').value = S.openWidth;
        $('openHeight').value = S.openHeight;
        $('quantity').value = S.quantity;
        $('grWidth').value = S.gr.width;
        $('grDepth').value = S.gr.depth;
        $('grThickness').value = S.gr.thickness;
        $('grLip').value = S.gr.lip;
        $('grSealThick').value = S.gr.sealThick;
        $('grSealDepth').value = S.gr.sealDepth;
        $('grSlatThick').value = S.gr.slatThick;
        $('grAnchorSpacing').value = S.gr.anchorSpacing;
        $('sbWidth').value = S.sb.width;
        $('sbHeight').value = S.sb.height;
        $('sbDepth').value = S.sb.depth;
        $('sbThickness').value = S.sb.thickness;
        $('sbShaftDia').value = S.sb.shaftDia;
        $('sbBracketW').value = S.sb.bracketW;
        $('sbMotorSide').value = S.sb.motorSide;
        // 재계산 + 렌더링
        fsCalc();
        if (S.tab === '3D') fs3dBuild();
        else fsRender();
    }
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.key === 'z' && !e.shiftKey) {
            e.preventDefault();
            undoRestore();
        }
    });

    // ============================
    // READ STATE FROM INPUTS
    // ============================
    function readGr() {
        S.gr.width = Number($('grWidth').value);
        S.gr.depth = Number($('grDepth').value);
        S.gr.thickness = Number($('grThickness').value);
        S.gr.lip = Number($('grLip').value);
        S.gr.sealThick = Number($('grSealThick').value);
        S.gr.sealDepth = Number($('grSealDepth').value);
        S.gr.slatThick = Number($('grSlatThick').value);
        S.gr.anchorSpacing = Number($('grAnchorSpacing').value);
    }
    function readSb() {
        S.sb.width = Number($('sbWidth').value);
        S.sb.height = Number($('sbHeight').value);
        S.sb.depth = Number($('sbDepth').value);
        S.sb.thickness = Number($('sbThickness').value);
        S.sb.shaftDia = Number($('sbShaftDia').value);
        S.sb.bracketW = Number($('sbBracketW').value);
        S.sb.motorSide = $('sbMotorSide').value;
    }

    // ============================
    // SVG DISPLAY HELPER
    // ============================
    function displaySvg(svg) {
        const c = $('svgContainer');
        c.innerHTML = '';
        const div = document.createElement('div');
        div.style.cssText = 'width:100%;height:100%;display:flex;align-items:center;justify-content:center;';
        div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
        div.style.transformOrigin = 'center center';
        div.innerHTML = svg;
        c.appendChild(div);
        $('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
    }

    // ============================
    // RENDER DISPATCHER
    // ============================
    window.fsRender = function() {
        undoSaveState(); // Ctrl+Z용 스냅샷 저장
        if (S.tab === 'Settings') renderSettingsPreview();
        else if (S.tab === 'GuideRail') { readGr(); renderGuideRail(); }
        else if (S.tab === 'ShutterBox') { readSb(); renderShutterBox(); }
    };

    // ============================
    // SETTINGS PREVIEW (assembly overview SVG)
    // ============================
    function renderSettingsPreview() {
        const W = S.openWidth, H = S.openHeight;
        const p = PRODUCTS[S.productType];
        const W1 = W + p.marginW;
        const H1 = H + p.marginH;
        const sc = Math.min(700 / W1, 750 / H1) * 0.7;
        const sw = W1 * sc, sh = H1 * sc;
        const ox = 80, oy = 60;
        const boxH = 60, railW = 12;

        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${sw + 160} ${sh + 160}" style="max-width:100%;max-height:100%;">
            <defs>
                <pattern id="hatch" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                    <line x1="0" y1="0" x2="0" y2="8" stroke="#6b5b4f" stroke-width="1"/>
                </pattern>
            </defs>
            <!-- Wall (hatched) -->
            <rect x="${ox - 20}" y="${oy}" width="20" height="${sh}" fill="url(#hatch)" stroke="#8b7355" stroke-width="1"/>
            <rect x="${ox + sw}" y="${oy}" width="20" height="${sh}" fill="url(#hatch)" stroke="#8b7355" stroke-width="1"/>
            <rect x="${ox - 20}" y="${oy - 20}" width="${sw + 40}" height="20" fill="url(#hatch)" stroke="#8b7355" stroke-width="1"/>
            <!-- Shutter Box -->
            <rect x="${ox}" y="${oy}" width="${sw}" height="${boxH}" fill="#374151" stroke="#94a3b8" stroke-width="2" rx="3"/>
            <text x="${ox + sw/2}" y="${oy + boxH/2 + 4}" fill="#60a5fa" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 (CASE)</text>
            <!-- Shaft circle -->
            <circle cx="${ox + sw/2}" cy="${oy + boxH/2}" r="18" fill="none" stroke="#64748b" stroke-width="2" stroke-dasharray="4 2"/>
            <!-- Guide Rails -->
            <rect x="${ox}" y="${oy + boxH}" width="${railW}" height="${sh - boxH}" fill="#64748b" stroke="#94a3b8" stroke-width="1.5"/>
            <rect x="${ox + sw - railW}" y="${oy + boxH}" width="${railW}" height="${sh - boxH}" fill="#64748b" stroke="#94a3b8" stroke-width="1.5"/>
            <text x="${ox + railW/2}" y="${oy + boxH + (sh-boxH)/2}" fill="#a78bfa" font-size="9" font-weight="900" text-anchor="middle" transform="rotate(-90, ${ox + railW/2}, ${oy + boxH + (sh-boxH)/2})" font-family="Pretendard">가이드레일</text>
            <text x="${ox + sw - railW/2}" y="${oy + boxH + (sh-boxH)/2}" fill="#a78bfa" font-size="9" font-weight="900" text-anchor="middle" transform="rotate(-90, ${ox + sw - railW/2}, ${oy + boxH + (sh-boxH)/2})" font-family="Pretendard">가이드레일</text>
            <!-- Slat Curtain -->
            ${Array.from({length: Math.floor((sh - boxH - 20) / 12)}, (_, i) => {
                const y = oy + boxH + 10 + i * 12;
                return `<line x1="${ox + railW + 2}" y1="${y}" x2="${ox + sw - railW - 2}" y2="${y}" stroke="${S.productType === 'steel' ? '#9ca3af' : '#c084fc'}" stroke-width="1.5" opacity="0.5"/>`;
            }).join('')}
            <!-- Bottom Bar -->
            <rect x="${ox + railW}" y="${oy + sh - 14}" width="${sw - railW*2}" height="14" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" rx="2"/>
            <text x="${ox + sw/2}" y="${oy + sh - 4}" fill="#1e293b" font-size="8" font-weight="900" text-anchor="middle" font-family="Pretendard">하장바</text>
            <!-- Floor -->
            <line x1="${ox - 20}" y1="${oy + sh + 2}" x2="${ox + sw + 20}" y2="${oy + sh + 2}" stroke="#475569" stroke-width="2"/>
            <!-- Dimension lines -->
            <!-- Width -->
            <line x1="${ox}" y1="${oy + sh + 25}" x2="${ox + sw}" y2="${oy + sh + 25}" stroke="#3b82f6" stroke-width="1" marker-start="url(#arrowL)" marker-end="url(#arrowR)"/>
            <text x="${ox + sw/2}" y="${oy + sh + 42}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">W0 = ${W.toLocaleString()} mm</text>
            <!-- Height -->
            <line x1="${ox + sw + 35}" y1="${oy + boxH}" x2="${ox + sw + 35}" y2="${oy + sh}" stroke="#3b82f6" stroke-width="1"/>
            <text x="${ox + sw + 50}" y="${oy + (sh + boxH)/2 + 4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">H0 = ${H.toLocaleString()} mm</text>
            <!-- Type label -->
            <text x="${ox + sw/2}" y="${oy + boxH + (sh - boxH)/2 + 4}" fill="${S.productType === 'steel' ? '#94a3b8' : '#c084fc'}" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard" opacity="0.4">${S.productType === 'steel' ? '강판 슬랫' : '스크린 원단'}</text>
        </svg>`;
        displaySvg(svg);
    }

    // ============================
    // GUIDE RAIL SVG RENDERER
    // ============================
    function renderGuideRail() {
        if (S.gr.viewMode === 'cross') renderGrCross();
        else renderGrFront();
    }

    function renderGrCross() {
        const g = S.gr;

        // ====== 스크린형: 실제 조립 구조 평면도 (5개 부재) ======
        // 좌→우: 방화벽 → ③벽연형C → ④벽연형D → ②본체(C채널) → ⑤마감재(SUS커버) → 개구부
        // 세로 = 채널 폭 70mm
        if (S.productType === 'screen') {
            const sc = 4;                                // px per mm
            const t2 = g.thickness * sc;                 // 본체 EGI 1.55T
            const t5 = (g.trimThick || 1.2) * sc;       // 마감재 SUS 1.2T
            const sealT = g.sealThick * sc;
            const slatT = Math.max(g.slatThick * sc, 2);

            // ── ② 본체 치수 (절곡: 10-26-80-67-80-26-10) ──
            const bLip = g.lip * sc;                     // 10mm 립
            const bFl = g.flange * sc;                   // 26mm 플랜지
            const bSw = g.sideWall * sc;                 // 80mm 사이드월
            const bBw = g.backWall * sc;                 // 67mm 백월
            const bOuterW = bBw + 2 * t2;               // 70mm 외폭 (세로)
            const bSlot = bBw - 2 * bFl;                 // 15mm 슬롯 개구

            // ── ③ 벽연형-C 치수 (절곡: 30-45-30) ──
            const c3Lip = 30 * sc;                       // 립 30mm
            const c3Body = 45 * sc;                      // 몸체 45mm (백월에 밀착)

            // ── ④ 벽연형-D 치수 (절곡: 11-23-40-23-11) ──
            const c4a = 11 * sc, c4b = 23 * sc, c4c = 40 * sc;

            // ── ⑤ 마감재 치수 (절곡: 10-11-110-30-15-15-15) ──
            const m5a = 10 * sc;    // 벽측 립
            const m5b = 11 * sc;    // 벽측 절곡면
            const m5c = 110 * sc;   // 사이드월 커버 (긴 면)
            const m5d = 30 * sc;    // A각 절곡 후 면
            const m5e = 15 * sc;    // 끝단 1
            const m5f = 15 * sc;    // 끝단 2
            const m5g = 15 * sc;    // 끝단 3

            // ── 레이아웃 (좌→우 배치) ──
            const pad = 80, wallW = 35;

            // ③ 벽연형-C의 가장 왼쪽: 벽면에서 립 30mm 돌출
            const bkTotalD = c3Lip;                      // 벽→본체 백월 사이 깊이
            const bx = pad + wallW + 10 + bkTotalD;      // 본체 백월 외면 X

            // 본체 사이드월 끝 (립 시작점)
            const swEndX = bx + t2 + bSw;                // 백월두께 + 사이드월
            // 립 끝
            const lipEndX = swEndX + bLip;

            const by = pad;                              // 본체 상단 Y
            const svgW = lipEndX + pad + 120;
            const svgH = bOuterW + pad * 2 + 70;

            // 색상 정의
            const cBody = '#64748b';     // ② 본체 (EGI)
            const cBk3 = '#78716c';      // ③ 벽연형-C
            const cBk4 = '#92400e';      // ④ 벽연형-D
            const cTrim = '#a1a1aa';     // ⑤ 마감재 (SUS)
            const cClip = '#8b5cf6';     // ① 클립
            const ms = '#94a3b8';        // 스트로크
            const mw = 0.8;

            // ── 채널 내부 배경 ──
            const interiorSvg = `<rect x="${bx+t2}" y="${by+t2}" width="${bSw-t2}" height="${bOuterW-2*t2}" fill="#0f172a"/>`;

            // ── ② 본체 C채널 (절곡: lip-flange-sideWall-backWall-sideWall-flange-lip) ──
            const bodySvg = [
                // 백월 (수직, 좌측)
                `<rect x="${bx}" y="${by}" width="${t2}" height="${bOuterW}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 상단 사이드월 (백월→개구부 방향, 80mm)
                `<rect x="${bx}" y="${by}" width="${t2+bSw}" height="${t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 하단 사이드월
                `<rect x="${bx}" y="${by+bOuterW-t2}" width="${t2+bSw}" height="${t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 상단 플랜지 (사이드월 끝에서 안쪽/중앙으로 26mm 절곡)
                `<rect x="${swEndX-t2}" y="${by+t2}" width="${t2}" height="${bFl-t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 하단 플랜지
                `<rect x="${swEndX-t2}" y="${by+bOuterW-bFl}" width="${t2}" height="${bFl-t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 상단 립 (플랜지 끝에서 개구부 방향으로 10mm)
                `<rect x="${swEndX}" y="${by+bFl-t2}" width="${bLip}" height="${t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 하단 립
                `<rect x="${swEndX}" y="${by+bOuterW-bFl}" width="${bLip}" height="${t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
            ].join('\n');

            // ── ③ 벽연형-C (절곡: 30-45-30, 백월 뒤 C브라켓) ──
            // C 개구부가 ② 본체쪽(우측)을 향함: 몸체(벽쪽) → 립(본체쪽)
            const c3CenterY = by + bOuterW / 2;
            const c3Y = c3CenterY - c3Body / 2;
            const c3BodyX = bx - c3Lip;                  // 몸체 X (벽쪽, 좌측 끝)
            const c3LipEnd = bx;                         // 립 끝 = ② 백월 외면
            const bk3Svg = [
                // 몸체 (세로 45mm, 벽쪽)
                `<rect x="${c3BodyX}" y="${c3Y}" width="${t2}" height="${c3Body}" fill="${cBk3}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 상단 립 (몸체→본체 방향 30mm)
                `<rect x="${c3BodyX}" y="${c3Y}" width="${c3Lip}" height="${t2}" fill="${cBk3}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 하단 립 (몸체→본체 방향 30mm)
                `<rect x="${c3BodyX}" y="${c3Y+c3Body-t2}" width="${c3Lip}" height="${t2}" fill="${cBk3}" stroke="${ms}" stroke-width="${mw}"/>`,
            ].join('\n');

            // ── ④ 벽연형-D (절곡: 11-23-40-23-11, ③ 내부에 중첩) ──
            // ③ 내부에 배치, C 개구부가 ② 본체쪽(우측)을 향함
            // 몸체(40) 벽쪽, 사이드(23) 본체 방향, 립(11) 안쪽 절곡
            const c4CenterY = c3CenterY;
            const c4Y = c4CenterY - c4c / 2;
            const c4BodyX = c3BodyX + t2 + 2;            // ③ 몸체 바로 안쪽
            const c4SideEnd = c4BodyX + t2 + c4b;        // 사이드 끝 (본체쪽)
            const bk4Svg = [
                // 몸체 (세로 40mm, ③ 안쪽 벽쪽)
                `<rect x="${c4BodyX}" y="${c4Y}" width="${t2}" height="${c4c}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
                // 상단 사이드 (23mm, 본체 방향)
                `<rect x="${c4BodyX+t2}" y="${c4Y}" width="${c4b}" height="${t2}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
                // 하단 사이드
                `<rect x="${c4BodyX+t2}" y="${c4Y+c4c-t2}" width="${c4b}" height="${t2}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
                // 상단 립 (11mm, 사이드 끝에서 안쪽/중앙으로 절곡)
                `<rect x="${c4SideEnd-t2}" y="${c4Y+t2}" width="${t2}" height="${c4a}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
                // 하단 립 (11mm, 사이드 끝에서 안쪽/중앙으로 절곡)
                `<rect x="${c4SideEnd-t2}" y="${c4Y+c4c-t2-c4a}" width="${t2}" height="${c4a}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
            ].join('\n');

            // ── ⑤ 마감재 SUS 1.2T × 2 (절곡: 10-11-110-30-15-15-15) ──
            // 평면도(위에서 봄): 접힌 후 외곽 프레임 형태로 보임
            // 좌측: ③ 좌단과 정렬, 우측: 본체 립 끝 바깥으로 감싸는 형태
            const trimL = bx - c3Lip;                     // 좌측 끝 (③ 좌단 정렬)
            const trimR = lipEndX + t5;                   // 우측 끝 (립 바깥)
            const trimX2 = trimR;                         // 치수선용

            // 상단 마감재: 수평(좌→우) + 우측 리턴(안쪽으로 플랜지 높이만큼)
            const trim5Svg = `
                <polyline points="${trimL},${by-t5} ${trimR},${by-t5} ${trimR},${by+bFl}"
                    fill="none" stroke="${cTrim}" stroke-width="${t5}" stroke-linejoin="miter" opacity="0.7"/>
                <polyline points="${trimL},${by+bOuterW+t5} ${trimR},${by+bOuterW+t5} ${trimR},${by+bOuterW-bFl}"
                    fill="none" stroke="${cTrim}" stroke-width="${t5}" stroke-linejoin="miter" opacity="0.7"/>`;

            // ── ① 클립 (채널 내부, 개구부 근처 L형) ──
            const clipArmLen = 10 * sc;
            const clipLegLen = 15 * sc;
            const clipT = Math.max(t2, 2);
            const clipX1 = swEndX - t2 - 2;              // 플랜지 내면 근처
            const clipY1 = by + t2 + 2;
            const clipY2 = by + bOuterW - t2 - 2;
            const clipSvg = `
                <path d="M${clipX1},${clipY1} L${clipX1},${clipY1+clipLegLen} L${clipX1-clipArmLen},${clipY1+clipLegLen} L${clipX1-clipArmLen},${clipY1+clipLegLen-clipT} L${clipX1-clipT},${clipY1+clipLegLen-clipT} L${clipX1-clipT},${clipY1} Z" fill="${cClip}" opacity="0.4"/>
                <path d="M${clipX1},${clipY2} L${clipX1},${clipY2-clipLegLen} L${clipX1-clipArmLen},${clipY2-clipLegLen} L${clipX1-clipArmLen},${clipY2-clipLegLen+clipT} L${clipX1-clipT},${clipY2-clipLegLen+clipT} L${clipX1-clipT},${clipY2} Z" fill="${cClip}" opacity="0.4"/>`;

            // ── 연기차단재 ──
            let sealSvg = '';
            if (g.showSeal) {
                const slatCenterY = by + bOuterW / 2;
                const sealLen = bLip * 0.8;
                const sealPosX = swEndX + 2;
                const sealH = Math.max(sealT * 1.5, 6);
                sealSvg += `<rect x="${sealPosX}" y="${slatCenterY - slatT/2 - sealH}" width="${sealLen}" height="${sealH}" fill="#f97316" opacity="0.7" rx="1"/>`;
                sealSvg += `<rect x="${sealPosX}" y="${slatCenterY + slatT/2}" width="${sealLen}" height="${sealH}" fill="#f97316" opacity="0.7" rx="1"/>`;
                if (g.showDim) {
                    sealSvg += `<text x="${sealPosX + sealLen/2}" y="${slatCenterY - slatT/2 - sealH - 4}" fill="#f97316" font-size="7" font-weight="700" text-anchor="middle" font-family="Pretendard">차단재</text>`;
                }
            }

            // ── 슬랫 ──
            const slatY = by + bOuterW / 2 - slatT / 2;
            const slatX1 = bx + t2 + 2;
            const slatX2 = lipEndX - 2;

            // ── 방화벽 ──
            const wallX = pad;

            // ── 치수선 ──
            let dimLines = '';
            if (g.showDim) {
                const totalLeft = bx - c3Lip;
                const totalRight = trimX2;
                // 깊이 120mm (하단)
                dimLines += `<line x1="${totalLeft}" y1="${by+bOuterW+35}" x2="${totalRight}" y2="${by+bOuterW+35}" stroke="#3b82f6" stroke-width="1"/>`;
                dimLines += `<line x1="${totalLeft}" y1="${by+bOuterW+30}" x2="${totalLeft}" y2="${by+bOuterW+40}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dimLines += `<line x1="${totalRight}" y1="${by+bOuterW+30}" x2="${totalRight}" y2="${by+bOuterW+40}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dimLines += `<text x="${(totalLeft+totalRight)/2}" y="${by+bOuterW+52}" fill="#3b82f6" font-size="12" font-weight="900" text-anchor="middle" font-family="Pretendard">${g.depth} mm</text>`;
                // 폭 70mm (우측)
                dimLines += `<line x1="${totalRight+12}" y1="${by}" x2="${totalRight+12}" y2="${by+bOuterW}" stroke="#3b82f6" stroke-width="1"/>`;
                dimLines += `<line x1="${totalRight+7}" y1="${by}" x2="${totalRight+17}" y2="${by}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dimLines += `<line x1="${totalRight+7}" y1="${by+bOuterW}" x2="${totalRight+17}" y2="${by+bOuterW}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dimLines += `<text x="${totalRight+22}" y="${by+bOuterW/2+4}" fill="#3b82f6" font-size="12" font-weight="900" text-anchor="start" font-family="Pretendard">${g.width} mm</text>`;
                // 플랜지 26mm
                dimLines += `<line x1="${lipEndX+3}" y1="${by}" x2="${lipEndX+3}" y2="${by+bFl}" stroke="#94a3b8" stroke-width="0.8"/>`;
                dimLines += `<text x="${lipEndX+8}" y="${by+bFl/2+3}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="start" font-family="Pretendard">FL ${g.flange}</text>`;
                // 슬롯 개구
                dimLines += `<line x1="${lipEndX+1}" y1="${by+bFl+3}" x2="${lipEndX+1}" y2="${by+bOuterW-bFl-3}" stroke="#22c55e" stroke-width="0.8"/>`;
                dimLines += `<text x="${lipEndX+6}" y="${by+bOuterW/2+3}" fill="#22c55e" font-size="8" font-weight="700" text-anchor="start" font-family="Pretendard">슬롯 ${bSlot/sc}</text>`;
                // 립 깊이
                dimLines += `<line x1="${swEndX}" y1="${by+bFl+3}" x2="${lipEndX}" y2="${by+bFl+3}" stroke="#94a3b8" stroke-width="0.8"/>`;
                dimLines += `<text x="${(swEndX+lipEndX)/2}" y="${by+bFl+14}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">립 ${g.lip}</text>`;
                // 두께
                dimLines += `<text x="${bx+t2}" y="${by+bOuterW+65}" fill="#94a3b8" font-size="9" font-weight="700" font-family="Pretendard">②t=${g.thickness} ⑤t=${g.trimThick||1.2}</text>`;
                // 부재 번호 라벨
                dimLines += `<text x="${bx+t2+bSw/2}" y="${by+bOuterW/2+4}" fill="#475569" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">②</text>`;
                dimLines += `<text x="${c3BodyX+c3Lip/2}" y="${c3CenterY+4}" fill="${cBk3}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">③</text>`;
                dimLines += `<text x="${c4BodyX+c4b/2}" y="${c4CenterY+4}" fill="${cBk4}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">④</text>`;
                dimLines += `<text x="${(trimX1+trimX2)/2}" y="${by-t5-m5b-5}" fill="${cTrim}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">⑤</text>`;
                dimLines += `<text x="${clipX1-clipArmLen-2}" y="${clipY1+clipLegLen/2+3}" fill="${cClip}" font-size="8" font-weight="900" text-anchor="end" font-family="Pretendard">①</text>`;
            }

            const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" style="max-width:100%;max-height:100%;">
                <defs>
                    <pattern id="wallHatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                        <line x1="0" y1="0" x2="0" y2="6" stroke="#8b7355" stroke-width="0.8"/>
                    </pattern>
                </defs>
                <text x="${svgW/2}" y="25" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">가이드레일 평면도 (Plan View) — 스크린형</text>
                <!-- 방화벽 -->
                <rect x="${wallX}" y="${by-20}" width="${wallW}" height="${bOuterW+40}" fill="url(#wallHatch)" stroke="#8b7355" stroke-width="1" rx="2"/>
                <text x="${wallX+wallW/2}" y="${by+bOuterW+35}" fill="#a1887f" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">방화벽</text>
                <!-- 채널 내부 -->
                ${interiorSvg}
                <!-- ⑤ 마감재 SUS 커버 -->
                ${trim5Svg}
                <!-- ③ 벽연형-C -->
                ${bk3Svg}
                <!-- ④ 벽연형-D -->
                ${bk4Svg}
                <!-- ② 본체 C채널 -->
                ${bodySvg}
                <!-- ① 클립 -->
                ${clipSvg}
                <!-- 연기차단재 -->
                ${sealSvg}
                <!-- 슬랫 -->
                <rect x="${slatX1}" y="${slatY}" width="${slatX2-slatX1}" height="${slatT}" fill="#c084fc" opacity="0.8" rx="1"/>
                ${g.showDim ? `<text x="${(slatX1+slatX2)/2}" y="${slatY-4}" fill="#c084fc" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">슬랫 t=${g.slatThick}</text>` : ''}
                <!-- 개구부 방향 -->
                <text x="${lipEndX+15}" y="${by+bOuterW/2+4}" fill="#22c55e" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">→ 개구부</text>
                ${dimLines}
                <text x="${(bx+lipEndX)/2}" y="${by+bOuterW+65}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL — 스크린형 (5부재 조립)</text>
            </svg>`;

            displaySvg(svg);
            return;
        }

        // ====== 철재형: 기존 C채널 단면도 ======
        const sc = 6; // px per mm
        const w = g.width * sc, d = g.depth * sc, t = g.thickness * sc, lip = g.lip * sc;
        const sealT = g.sealThick * sc, sealD = g.sealDepth * sc, slatT = g.slatThick * sc;
        const pad = 120;
        const svgW = w + pad * 2 + 200, svgH = d + pad * 2 + 100;
        const ox = pad + 100, oy = pad;

        // C-channel path (looking from top)
        const outer = `M${ox},${oy} L${ox+w},${oy} L${ox+w},${oy+lip} L${ox+w-t},${oy+lip} L${ox+w-t},${oy+t} L${ox+t},${oy+t} L${ox+t},${oy+lip} L${ox},${oy+lip} Z`;
        const bottom = `M${ox},${oy+d-lip} L${ox+t},${oy+d-lip} L${ox+t},${oy+d-t} L${ox+w-t},${oy+d-t} L${ox+w-t},${oy+d-lip} L${ox+w},${oy+d-lip} L${ox+w},${oy+d} L${ox},${oy+d} Z`;
        const leftWall = `M${ox},${oy+lip} L${ox+t},${oy+lip} L${ox+t},${oy+d-lip} L${ox},${oy+d-lip} Z`;

        // Seal rectangles
        const sealY1 = oy + lip;
        const sealY2 = oy + d - lip - sealD;
        const sealX = ox + t;

        // Slat position (center of channel opening)
        const slatX = ox + w/2 - slatT/2;
        const slatY1 = oy + lip + 5;
        const slatY2 = oy + d - lip - 5;

        // Wall (hatched area to the right)
        const wallX = ox + w + 10;

        let dimLines = '';
        if (g.showDim) {
            // Width dimension (top)
            dimLines += `<line x1="${ox}" y1="${oy-30}" x2="${ox+w}" y2="${oy-30}" stroke="#3b82f6" stroke-width="1"/>`;
            dimLines += `<line x1="${ox}" y1="${oy-35}" x2="${ox}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>`;
            dimLines += `<line x1="${ox+w}" y1="${oy-35}" x2="${ox+w}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>`;
            dimLines += `<text x="${ox+w/2}" y="${oy-40}" fill="#3b82f6" font-size="12" font-weight="900" text-anchor="middle" font-family="Pretendard">${g.width} mm</text>`;
            // Depth dimension (left)
            dimLines += `<line x1="${ox-30}" y1="${oy}" x2="${ox-30}" y2="${oy+d}" stroke="#3b82f6" stroke-width="1"/>`;
            dimLines += `<line x1="${ox-35}" y1="${oy}" x2="${ox-5}" y2="${oy}" stroke="#3b82f6" stroke-width="0.5"/>`;
            dimLines += `<line x1="${ox-35}" y1="${oy+d}" x2="${ox-5}" y2="${oy+d}" stroke="#3b82f6" stroke-width="0.5"/>`;
            dimLines += `<text x="${ox-40}" y="${oy+d/2+4}" fill="#3b82f6" font-size="12" font-weight="900" text-anchor="end" font-family="Pretendard">${g.depth} mm</text>`;
            // Thickness annotation
            dimLines += `<text x="${ox+t/2}" y="${oy+d+25}" fill="#94a3b8" font-size="10" font-weight="700" text-anchor="middle" font-family="Pretendard">t=${g.thickness}</text>`;
            // Lip dimension
            dimLines += `<text x="${ox+w+15}" y="${oy+lip/2+4}" fill="#94a3b8" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">립 ${g.lip}</text>`;
        }

        let sealSvg = '';
        if (g.showSeal) {
            // Upper seal
            sealSvg += `<rect x="${sealX}" y="${sealY1}" width="${sealT}" height="${sealD}" fill="#f97316" opacity="0.7" rx="1"/>`;
            // Lower seal
            sealSvg += `<rect x="${sealX}" y="${sealY2}" width="${sealT}" height="${sealD}" fill="#f97316" opacity="0.7" rx="1"/>`;
            // Seal on right side
            sealSvg += `<rect x="${ox+w-t-sealT}" y="${sealY1}" width="${sealT}" height="${sealD}" fill="#f97316" opacity="0.7" rx="1"/>`;
            sealSvg += `<rect x="${ox+w-t-sealT}" y="${sealY2}" width="${sealT}" height="${sealD}" fill="#f97316" opacity="0.7" rx="1"/>`;
            if (g.showDim) {
                sealSvg += `<text x="${sealX + sealT + 5}" y="${sealY1 + sealD/2 + 3}" fill="#f97316" font-size="9" font-weight="700" font-family="Pretendard">연기차단재</text>`;
            }
        }

        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" style="max-width:100%;max-height:100%;">
            <defs>
                <pattern id="wallHatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                    <line x1="0" y1="0" x2="0" y2="6" stroke="#8b7355" stroke-width="0.8"/>
                </pattern>
            </defs>
            <!-- Title -->
            <text x="${svgW/2}" y="25" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">가이드레일 평면도 (Plan View)</text>
            <!-- Wall -->
            <rect x="${wallX}" y="${oy - 20}" width="60" height="${d + 40}" fill="url(#wallHatch)" stroke="#8b7355" stroke-width="1" rx="2"/>
            <text x="${wallX + 30}" y="${oy + d + 35}" fill="#a1887f" font-size="10" font-weight="700" text-anchor="middle" font-family="Pretendard">방화벽</text>
            <!-- C-Channel Body -->
            <path d="${outer}" fill="#64748b" stroke="#94a3b8" stroke-width="1.5"/>
            <path d="${bottom}" fill="#64748b" stroke="#94a3b8" stroke-width="1.5"/>
            <path d="${leftWall}" fill="#64748b" stroke="#94a3b8" stroke-width="1.5"/>
            <!-- Right wall of channel -->
            <rect x="${ox+w-t}" y="${oy+lip}" width="${t}" height="${d - lip*2}" fill="#64748b" stroke="#94a3b8" stroke-width="1.5"/>
            <!-- Channel interior (empty space) -->
            <rect x="${ox+t}" y="${oy+t}" width="${w-t*2}" height="${d-t*2}" fill="#0f172a" stroke="none"/>
            <!-- Re-draw lips over interior -->
            <rect x="${ox+t}" y="${oy+t}" width="${w-t*2}" height="${lip - t}" fill="#0f172a"/>
            <rect x="${ox+t}" y="${oy+d-lip}" width="${w-t*2}" height="${lip - t}" fill="#0f172a"/>
            <!-- Seals -->
            ${sealSvg}
            <!-- Slat Edge -->
            <rect x="${slatX}" y="${slatY1}" width="${slatT}" height="${slatY2 - slatY1}" fill="#60a5fa" opacity="0.8" rx="1"/>
            ${g.showDim ? `<text x="${slatX + slatT + 8}" y="${(slatY1+slatY2)/2 + 3}" fill="#60a5fa" font-size="9" font-weight="700" font-family="Pretendard">슬랫 t=${g.slatThick}</text>` : ''}
            <!-- Dimension Lines -->
            ${dimLines}
            <!-- Labels -->
            <text x="${ox + w/2}" y="${oy + d + 45}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL BODY (C-CHANNEL) — 철재슬라트</text>
        </svg>`;

        displaySvg(svg);
    }

    function renderGrFront() {
        const g = S.gr;
        const H = S.openHeight || 3000;
        const sc = Math.min(0.2, 700 / H);
        const rw = g.width * 3, rh = H * sc;
        const pad = 80;
        const svgW = rw + pad * 2 + 100, svgH = rh + pad * 2 + 60;
        const ox = pad + 50, oy = pad;

        // Anchor bolt positions
        const anchorCount = Math.floor(H / g.anchorSpacing);
        const anchors = Array.from({length: anchorCount}, (_, i) => oy + (i + 1) * g.anchorSpacing * sc);

        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" style="max-width:100%;max-height:100%;">
            <text x="${svgW/2}" y="25" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">가이드레일 정면도 (Front View)</text>
            <!-- Rail body -->
            <rect x="${ox}" y="${oy}" width="${rw}" height="${rh}" fill="#64748b" stroke="#94a3b8" stroke-width="2" rx="2"/>
            <!-- Channel groove (center line) -->
            <line x1="${ox + rw/2}" y1="${oy}" x2="${ox + rw/2}" y2="${oy + rh}" stroke="#334155" stroke-width="2" stroke-dasharray="8 4"/>
            <!-- Anchor bolts -->
            ${anchors.map(ay => `
                <circle cx="${ox + rw/2}" cy="${ay}" r="5" fill="#ef4444" stroke="#dc2626" stroke-width="1.5"/>
                <line x1="${ox + rw + 10}" y1="${ay}" x2="${ox + rw + 30}" y2="${ay}" stroke="#ef4444" stroke-width="0.8"/>
                <text x="${ox + rw + 35}" y="${ay + 3}" fill="#ef4444" font-size="9" font-weight="700" font-family="Pretendard">앵커볼트</text>
            `).join('')}
            <!-- Height dimension -->
            <line x1="${ox - 25}" y1="${oy}" x2="${ox - 25}" y2="${oy + rh}" stroke="#3b82f6" stroke-width="1"/>
            <line x1="${ox - 30}" y1="${oy}" x2="${ox - 5}" y2="${oy}" stroke="#3b82f6" stroke-width="0.5"/>
            <line x1="${ox - 30}" y1="${oy + rh}" x2="${ox - 5}" y2="${oy + rh}" stroke="#3b82f6" stroke-width="0.5"/>
            <text x="${ox - 35}" y="${oy + rh/2 + 4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="end" font-family="Pretendard">${H.toLocaleString()} mm</text>
            <!-- Width dimension -->
            <text x="${ox + rw/2}" y="${oy + rh + 30}" fill="#94a3b8" font-size="10" font-weight="900" text-anchor="middle" font-family="Pretendard">폭 ${g.width} mm | 앵커 간격 ${g.anchorSpacing} mm</text>
            <!-- Label -->
            <text x="${ox + rw/2}" y="${oy + rh + 50}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL — FRONT VIEW</text>
        </svg>`;

        displaySvg(svg);
    }

    // ============================
    // SHUTTER BOX SVG RENDERER
    // ============================
    function renderShutterBox() {
        if (S.sb.viewMode === 'front') renderSbFront();
        else renderSbSide();
    }

    function renderSbFront() {
        const b = S.sb;
        const sc = Math.min(700 / b.width, 600 / b.height);
        const sw = b.width * sc, sh = b.height * sc;
        const pad = 80;
        const svgW = sw + pad * 2 + 60, svgH = sh + pad * 2 + 60;
        const ox = pad, oy = pad;

        const bracketW = Math.max(b.bracketW * sc, 3); // min 3px visible
        const bracketX1 = ox; // left bracket
        const bracketX2 = ox + sw - bracketW; // right bracket
        const shaftCy = oy + sh / 2; // vertical center of box = bracket center

        // Shaft: horizontal bar connecting both brackets
        const shaftH = b.shaftDia * sc;
        const shaftX = ox + bracketW;
        const shaftW = sw - bracketW * 2;
        const shaftY = shaftCy - shaftH / 2;

        // Slat roll: horizontal bar wrapping shaft (larger)
        const rollH = shaftH + 50 * sc;
        const rollY = shaftCy - rollH / 2;

        // Motor: positioned near specified side
        const motorW = 80 * sc, motorH = 50 * sc;
        const motorX = b.motorSide === 'right' ? bracketX2 - motorW - 5 : ox + bracketW + 5;
        const motorY = shaftCy - motorH / 2;

        // Brake: next to motor
        const brakeW = 30 * sc, brakeH = 40 * sc;
        const brakeX = b.motorSide === 'right' ? motorX - brakeW - 5 : motorX + motorW + 5;

        // Spring: opposite side of motor
        const springW = 60 * sc, springH = 20 * sc;
        const springX = b.motorSide === 'right' ? ox + bracketW + 20 : bracketX2 - springW - 20;
        const springY = shaftCy + shaftH / 2 + 10;

        // Bracket label positioning (outside if too thin)
        const brkThin = bracketW < 15;

        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" style="max-width:100%;max-height:100%;">
            <text x="${svgW/2}" y="25" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 정면 단면도 (Front Cross-Section)</text>
            <!-- Case outer -->
            <rect x="${ox}" y="${oy}" width="${sw}" height="${sh}" fill="none" stroke="#94a3b8" stroke-width="2.5" rx="4"/>
            <rect x="${ox}" y="${oy}" width="${sw}" height="${sh}" fill="#374151" opacity="0.3" rx="4"/>
            <rect x="${ox+2}" y="${oy+2}" width="${sw-4}" height="${sh-4}" fill="none" stroke="#475569" stroke-width="1" stroke-dasharray="4 4" rx="3"/>
            <!-- Brackets -->
            <rect x="${bracketX1}" y="${oy + 3}" width="${bracketW}" height="${sh - 6}" fill="#8b5cf6" opacity="0.7" stroke="#7c3aed" stroke-width="1.5" rx="1"/>
            <rect x="${bracketX2}" y="${oy + 3}" width="${bracketW}" height="${sh - 6}" fill="#8b5cf6" opacity="0.7" stroke="#7c3aed" stroke-width="1.5" rx="1"/>
            ${brkThin ? `
                <text x="${bracketX1 - 5}" y="${oy + sh/2 + 3}" fill="#a78bfa" font-size="9" font-weight="700" text-anchor="end" font-family="Pretendard">브래킷</text>
                <text x="${bracketX2 + bracketW + 5}" y="${oy + sh/2 + 3}" fill="#a78bfa" font-size="9" font-weight="700" text-anchor="start" font-family="Pretendard">브래킷</text>
            ` : `
                <text x="${ox + bracketW/2}" y="${oy + sh/2}" fill="white" font-size="${Math.max(8, bracketW * 0.12)}" font-weight="900" text-anchor="middle" transform="rotate(-90, ${ox + bracketW/2}, ${oy + sh/2})" font-family="Pretendard">브래킷</text>
                <text x="${ox + sw - bracketW/2}" y="${oy + sh/2}" fill="white" font-size="${Math.max(8, bracketW * 0.12)}" font-weight="900" text-anchor="middle" transform="rotate(-90, ${ox + sw - bracketW/2}, ${oy + sh/2})" font-family="Pretendard">브래킷</text>
            `}
            <!-- Shaft: horizontal bar connecting brackets -->
            ${b.showShaft ? `
                <rect x="${shaftX}" y="${shaftY}" width="${shaftW}" height="${shaftH}" fill="#475569" stroke="#64748b" stroke-width="1.5" rx="${shaftH/2}"/>
                <text x="${ox + sw/2}" y="${shaftY - 6}" fill="#94a3b8" font-size="10" font-weight="900" text-anchor="middle" font-family="Pretendard">샤프트 ⌀${b.shaftDia}</text>
            ` : ''}
            <!-- Slat Roll: horizontal bar wrapping shaft -->
            ${b.showSlatRoll ? `
                <rect x="${shaftX}" y="${rollY}" width="${shaftW}" height="${rollH}" fill="none" stroke="#f59e0b" stroke-width="2.5" opacity="0.6" stroke-dasharray="6 3" rx="${rollH/2}"/>
                <text x="${ox + sw/2}" y="${rollY - 6}" fill="#f59e0b" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">감긴 슬랫</text>
            ` : ''}
            <!-- Motor -->
            ${b.showMotor ? `
                <rect x="${motorX}" y="${motorY}" width="${motorW}" height="${motorH}" fill="#2563eb" opacity="0.7" stroke="#3b82f6" stroke-width="1.5" rx="3"/>
                <text x="${motorX + motorW/2}" y="${motorY + motorH/2 + 4}" fill="white" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">모터+감속기</text>
            ` : ''}
            <!-- Brake -->
            ${b.showBrake ? `
                <rect x="${brakeX}" y="${motorY + 5}" width="${brakeW}" height="${brakeH}" fill="#dc2626" opacity="0.7" stroke="#ef4444" stroke-width="1.5" rx="2"/>
                <text x="${brakeX + brakeW/2}" y="${motorY + 5 + brakeH/2 + 3}" fill="white" font-size="7" font-weight="900" text-anchor="middle" font-family="Pretendard">브레이크</text>
            ` : ''}
            <!-- Spring -->
            ${b.showSpring ? `
                <rect x="${springX}" y="${springY}" width="${springW}" height="${springH}" fill="#16a34a" opacity="0.6" stroke="#22c55e" stroke-width="1.5" rx="2"/>
                <text x="${springX + springW/2}" y="${springY + springH/2 + 3}" fill="white" font-size="8" font-weight="900" text-anchor="middle" font-family="Pretendard">밸런스 스프링</text>
            ` : ''}
            <!-- Slat exit -->
            <line x1="${ox + bracketW + 5}" y1="${oy + sh}" x2="${ox + sw - bracketW - 5}" y2="${oy + sh}" stroke="#f59e0b" stroke-width="3" stroke-dasharray="8 4"/>
            <text x="${ox + sw/2}" y="${oy + sh + 18}" fill="#f59e0b" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">↓ 슬랫 출구 ↓</text>
            <!-- Dimensions -->
            <line x1="${ox}" y1="${oy + sh + 35}" x2="${ox + sw}" y2="${oy + sh + 35}" stroke="#3b82f6" stroke-width="1"/>
            <text x="${ox + sw/2}" y="${oy + sh + 50}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">${b.width.toLocaleString()} mm</text>
            <line x1="${ox + sw + 20}" y1="${oy}" x2="${ox + sw + 20}" y2="${oy + sh}" stroke="#3b82f6" stroke-width="1"/>
            <text x="${ox + sw + 35}" y="${oy + sh/2 + 4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">${b.height} mm</text>
            <!-- Case label -->
            <text x="${ox + sw/2}" y="${oy - 10}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 (CASE) — t=${b.thickness}mm</text>
        </svg>`;

        displaySvg(svg);
    }

    function renderSbSide() {
        const b = S.sb;
        const sc = Math.min(500 / b.depth, 600 / b.height);
        const sd = b.depth * sc, sh = b.height * sc;
        const pad = 80;
        const svgW = sd + pad * 2 + 100, svgH = sh + pad * 2 + 60;
        const ox = pad + 50, oy = pad;
        const shaftR = (b.shaftDia / 2) * sc;
        const shaftCx = ox + sd / 2;
        const shaftCy = oy + sh * 0.45;
        const rollR = shaftR + 20 * sc;

        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" style="max-width:100%;max-height:100%;">
            <text x="${svgW/2}" y="25" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 측면 단면도 (Side Cross-Section)</text>
            <!-- Case outer -->
            <rect x="${ox}" y="${oy}" width="${sd}" height="${sh}" fill="#374151" opacity="0.3" stroke="#94a3b8" stroke-width="2.5" rx="4"/>
            <!-- Shaft -->
            ${b.showShaft ? `
                <circle cx="${shaftCx}" cy="${shaftCy}" r="${shaftR}" fill="#475569" stroke="#64748b" stroke-width="2"/>
                <circle cx="${shaftCx}" cy="${shaftCy}" r="4" fill="#94a3b8"/>
            ` : ''}
            <!-- Slat roll -->
            ${b.showSlatRoll ? `
                <circle cx="${shaftCx}" cy="${shaftCy}" r="${rollR}" fill="none" stroke="#f59e0b" stroke-width="3" opacity="0.5" stroke-dasharray="6 3"/>
                ${Array.from({length:5},(_,i) => {
                    const r = shaftR + (i+1) * 4 * sc;
                    return r < rollR ? `<circle cx="${shaftCx}" cy="${shaftCy}" r="${r}" fill="none" stroke="#f59e0b" stroke-width="0.5" opacity="0.3"/>` : '';
                }).join('')}
            ` : ''}
            <!-- Motor (side view = circle) -->
            ${b.showMotor ? `
                <circle cx="${shaftCx}" cy="${shaftCy}" r="${shaftR * 0.6}" fill="#2563eb" opacity="0.5" stroke="#3b82f6" stroke-width="1.5"/>
                <text x="${shaftCx}" y="${shaftCy + 3}" fill="white" font-size="8" font-weight="900" text-anchor="middle" font-family="Pretendard">M</text>
            ` : ''}
            <!-- Slat exit -->
            <rect x="${ox + sd * 0.2}" y="${oy + sh - 5}" width="${sd * 0.6}" height="5" fill="#f59e0b" opacity="0.6" rx="1"/>
            <!-- Slat curtain going down -->
            <line x1="${ox + sd * 0.5}" y1="${oy + sh}" x2="${ox + sd * 0.5}" y2="${oy + sh + 30}" stroke="#9ca3af" stroke-width="2" stroke-dasharray="4 2"/>
            <text x="${ox + sd * 0.5 + 10}" y="${oy + sh + 20}" fill="#94a3b8" font-size="9" font-weight="700" font-family="Pretendard">↓ 슬랫</text>
            <!-- Dimensions -->
            <text x="${ox + sd/2}" y="${oy + sh + 50}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">깊이 ${b.depth} mm</text>
            <text x="${ox + sd + 25}" y="${oy + sh/2 + 4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">${b.height} mm</text>
        </svg>`;

        displaySvg(svg);
    }

    // ============================
    // VIEW MODE SWITCHES
    // ============================
    window.fsGrView = function(mode) {
        S.gr.viewMode = mode;
        document.querySelectorAll('[data-grview]').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.grview === mode);
            btn.style.color = btn.dataset.grview === mode ? '#3b82f6' : '';
            btn.style.borderColor = btn.dataset.grview === mode ? '#3b82f6' : '';
        });
        fsRender();
    };
    window.fsSbView = function(mode) {
        S.sb.viewMode = mode;
        document.querySelectorAll('[data-sbview]').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.sbview === mode);
            btn.style.color = btn.dataset.sbview === mode ? '#3b82f6' : '';
            btn.style.borderColor = btn.dataset.sbview === mode ? '#3b82f6' : '';
        });
        fsRender();
    };
    window.fsToggle = function(el, key) {
        el.classList.toggle('active');
        const on = el.classList.contains('active');
        if (key in S.gr) S.gr[key] = on;
        if (key in S.sb) S.sb[key] = on;
        fsRender();
    };

    // ============================
    // THREE.JS 3D RENDERING
    // ============================
    function fs3dInit() {
        const container = $('threeDContainer');
        if (renderer) return; // Already initialized

        scene = new THREE.Scene();
        scene.background = new THREE.Color(S.td.bgColor);
        camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 1, 50000);
        camera.position.set(2000, 1500, 3000);

        renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        container.appendChild(renderer.domElement);

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.1;
        controls.target.set(0, 0, 0);

        // Lights
        const ambient = new THREE.AmbientLight(0xffffff, 0.4);
        const dir1 = new THREE.DirectionalLight(0xffffff, 0.8);
        dir1.position.set(2000, 3000, 2000);
        dir1.castShadow = true;
        const dir2 = new THREE.DirectionalLight(0xffffff, 0.3);
        dir2.position.set(-2000, 1000, -1000);
        const hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.3);
        scene.add(ambient, dir1, dir2, hemi);

        // Grid
        const grid = new THREE.GridHelper(5000, 50, 0x334155, 0x1e293b);
        grid.position.y = 0;
        scene.add(grid);

        function animate() {
            animId = requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();

        // Resize (use ResizeObserver for flex layout)
        const ro = new ResizeObserver(() => {
            if (container.clientWidth && container.clientHeight) {
                camera.aspect = container.clientWidth / container.clientHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(container.clientWidth, container.clientHeight);
            }
        });
        ro.observe(container);

        // === 우클릭 컨텍스트 메뉴 (단품 보기 / 전체 보기) ===
        const ctxMenu = document.createElement('div');
        ctxMenu.className = 'fs-ctx-menu';
        document.body.appendChild(ctxMenu);

        // 단품 보기 상태 배지
        container.style.position = 'relative';
        const isoBadge = document.createElement('div');
        isoBadge.className = 'fs-iso-badge';
        isoBadge.onclick = () => { fs3dShowAll(); };
        container.appendChild(isoBadge);

        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();

        // 클릭된 메시에서 meshes 키 찾기
        function findMeshKey(hitObj) {
            let target = hitObj;
            while (target.parent && target.parent !== scene) target = target.parent;
            for (const [key, obj] of Object.entries(meshes)) {
                if (obj === target) return key;
            }
            return null;
        }

        // 우클릭 이벤트
        renderer.domElement.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            ctxMenu.style.display = 'none';

            const rect = renderer.domElement.getBoundingClientRect();
            mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);

            const sceneObjects = Object.values(meshes).filter(Boolean);
            const intersects = raycaster.intersectObjects(sceneObjects, true);

            let hitKey = null;
            if (intersects.length > 0) hitKey = findMeshKey(intersects[0].object);

            // 메뉴 항목 구성
            ctxMenu.innerHTML = '';
            let hasItem = false;

            if (hitKey) {
                const label = meshLabels[hitKey] || hitKey;
                const btn = document.createElement('button');
                btn.className = 'fs-ctx-btn';
                btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/><path d="M11 8v6M8 11h6"/></svg> '${label}' 단품 보기`;
                btn.onclick = () => { fs3dIsolate(hitKey); ctxMenu.style.display = 'none'; };
                ctxMenu.appendChild(btn);
                hasItem = true;
            }

            if (fs3dIsolated) {
                if (hasItem) {
                    const sep = document.createElement('div');
                    sep.className = 'fs-ctx-sep';
                    ctxMenu.appendChild(sep);
                }
                const btn = document.createElement('button');
                btn.className = 'fs-ctx-btn';
                btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> 전체 보기';
                btn.onclick = () => { fs3dShowAll(); ctxMenu.style.display = 'none'; };
                ctxMenu.appendChild(btn);
                hasItem = true;
            }

            if (!hasItem) return;

            // 화면 밖으로 넘어가지 않도록 위치 조정
            ctxMenu.style.display = 'block';
            const mw = ctxMenu.offsetWidth, mh = ctxMenu.offsetHeight;
            const mx = Math.min(e.clientX, window.innerWidth - mw - 8);
            const my = Math.min(e.clientY, window.innerHeight - mh - 8);
            ctxMenu.style.left = mx + 'px';
            ctxMenu.style.top = my + 'px';
        });

        // 좌클릭/스크롤 시 메뉴 닫기
        document.addEventListener('click', () => { ctxMenu.style.display = 'none'; });
        renderer.domElement.addEventListener('wheel', () => { ctxMenu.style.display = 'none'; });
    }

    let fs3dCameraInit = false;
    function fs3dBuild() {
        if (!scene) return;
        // Clear existing meshes
        Object.values(meshes).forEach(m => { if (m) scene.remove(m); });
        meshes = {};

        const W = S.openWidth || 2000;
        const H = S.openHeight || 3000;
        const p = PRODUCTS[S.productType];
        const W1 = W + p.marginW;
        const b = S.sb;
        const g = S.gr;

        // Center: opening center at 0,H/2,0
        const hw = W / 2;

        // 셔터박스 Z 배치 — 도면 기준
        // 스크린: Z방향 = width(개구부 70mm), 철재: Z방향 = depth(75mm)
        const railZSpan = S.productType === 'screen' ? p.gr.width : p.gr.depth;
        const railHalf = railZSpan / 2; // 스크린:35, 철재:37.5
        const frontOffset = railHalf + 50; // 박스 전면판 Z (스크린:85, 철재:110)
        const boxCenterZ = frontOffset - b.depth / 2;
        // 샤프트 Z: 기본 위치에서 시작, 박스 전면판을 벗어나면 자동 보정
        const maxFwd = Math.max(p.bk.nmD / 2, p.bk.sprocketR); // 전면 최대 돌출
        let shaftCenterZ = -(b.shaftDia / 2 + 5);
        if (shaftCenterZ + maxFwd > frontOffset - 5) {
            shaftCenterZ = frontOffset - maxFwd - 5; // 전면판 안쪽 5mm 여유
        }

        // === SHUTTER BOX (CASE) — 조립식 철판 구조 ===
        const pt = b.thickness || 1.6; // 철판 두께
        const frontH = p.sb.frontH; // 전면판 높이 (스크린:240, 철재:410)
        const boxMat = new THREE.MeshStandardMaterial({ color: 0x374151, transparent: true, opacity: S.td.caseOpacity, side: THREE.DoubleSide });
        const boxEdgeMat = new THREE.LineBasicMaterial({ color: 0x94a3b8 });
        meshes.case = new THREE.Group();
        meshes.case.position.set(0, H, boxCenterZ);

        // 철판 생성 헬퍼
        function addPlate(w, h, d, x, y, z) {
            const geo = new THREE.BoxGeometry(w, h, d);
            const m = new THREE.Mesh(geo, boxMat);
            m.position.set(x, y, z);
            meshes.case.add(m);
            const edges = new THREE.EdgesGeometry(geo);
            m.add(new THREE.LineSegments(edges, boxEdgeMat));
        }

        // ── 박스 본체 ──
        const flangeBack = 55; // 후면판 상단 안쪽 절곡 깊이
        const flangeFront = 50; // 전면판 상단 안쪽 절곡 깊이
        // 후면판 (Back plate — 전체 높이)
        addPlate(W1, b.height, pt, 0, b.height / 2, -b.depth / 2 + pt / 2);
        // 후면판 상단 'ㄱ' 절곡 (안쪽 수평 선반)
        addPlate(W1, pt, flangeBack, 0, b.height - pt / 2, -b.depth / 2 + flangeBack / 2);
        // 전면판 (Front plate — 짧음, 상단에서 걸림)
        addPlate(W1, frontH, pt, 0, b.height - frontH / 2, b.depth / 2 - pt / 2);
        // 전면판 상단 'ㄱ' 절곡 (안쪽 수평 선반)
        addPlate(W1, pt, flangeFront, 0, b.height - pt / 2, b.depth / 2 - flangeFront / 2);
        // 전면 하부판 (전면판 아래 빈 공간을 막는 수직판)
        const frontGap = b.height - frontH;
        if (frontGap > 0) addPlate(W1, frontGap, pt, 0, frontGap / 2, b.depth / 2 - pt / 2);
        // 좌측판 (Left side plate — 전체 높이)
        addPlate(pt, b.height, b.depth, -W1 / 2 + pt / 2, b.height / 2, 0);
        // 우측판 (Right side plate — 전체 높이)
        addPlate(pt, b.height, b.depth, W1 / 2 - pt / 2, b.height / 2, 0);

        // ── 밑면 결합체 (슬랫 통과 개구부: 레일 너비만큼만 개방) ──
        // 구조: [전면 립 50mm] → [개구부 = 레일 너비] → [후면 밑판]
        const frontLipD = 50; // 전면판 ~ 레일 전면 (50mm)
        const openingW = railZSpan; // 개구부 Z폭 (스크린:width=70, 철재:depth=75)
        const backLipD = b.depth - frontLipD - openingW; // 레일 후면 ~ 후면판
        if (frontLipD > 0) addPlate(W1, pt, frontLipD, 0, pt / 2, b.depth / 2 - frontLipD / 2);
        if (backLipD > 0) addPlate(W1, pt, backLipD, 0, pt / 2, -b.depth / 2 + backLipD / 2);

        // ── 덮개 (Cover) — 절곡 선반 위에 올라가는 평판 (용접 결합, 양쪽 10mm 축소) ──
        const coverY = b.height + pt; // 절곡 선반(pt) 위에 올라감
        addPlate(W1 - 20, pt, b.depth - 20, 0, coverY + pt / 2, 0);

        scene.add(meshes.case);

        // === SHAFT ASSEMBLY (양쪽 브라켓 관통, 슬랫 폭과 동일) ===
        const shaftY = H + b.height * 0.5; // 샤프트 중심 Y
        const shaftMat = new THREE.MeshStandardMaterial({ color: 0x64748b, metalness: 0.6, roughness: 0.3 });
        const bracketMat = new THREE.MeshStandardMaterial({ color: 0x4b5563, metalness: 0.5, roughness: 0.4 });
        meshes.shaft = new THREE.Group();

        const motorDir = b.motorSide === 'right' ? 1 : -1;
        const nonMotorSide = -motorDir;

        // 브라켓 치수 (제품 유형별)
        const bk = p.bk;
        const bkThick = bk.thick; // 두께 (X방향, 철판)
        const bkH = bk.nmH; // 비모터측 높이 (Y방향)
        const bkD = bk.nmD; // 비모터측 깊이 (Z방향)

        // 모터측 브라켓
        const motorBkW = bk.mtD; // 깊이 (Z방향, 샤프트~모터 거리 수용)
        const motorBkH = bk.mtH; // 높이 (Y방향)
        const motorBkD = bk.thick; // 두께 (X방향, 철판)
        const shaftFromInner = 90; // 브라켓 내면에서 샤프트 중심까지 거리 (도면 기준)

        // 환봉/플랜지 치수
        const stubPinR = 15; // 환봉 반지름 (ø30)
        const stubPinTotal = 300; // 환봉 전체 길이
        const stubPinVisible = 200; // 밖에서 보이는 길이 (플랜지 밖)
        const stubPinInside = stubPinTotal - stubPinVisible; // 플랜지 안쪽 (100mm)
        const shaftR = b.shaftDia / 2;
        const shaftWallThick = 4; // 샤프트 관 두께 (4mm)
        const flangeR = shaftR - shaftWallThick - 0.5; // 플랜지 외경 = 샤프트 내경 - 1mm 공차
        const flangeThick = 10; // 플랜지 두께
        const flangeMat = new THREE.MeshStandardMaterial({ color: 0x78716c, metalness: 0.5, roughness: 0.35 });
        const stubPinMat = new THREE.MeshStandardMaterial({ color: 0x9ca3af, metalness: 0.7, roughness: 0.25 });

        // 샤프트 관 길이: 양쪽 환봉 노출분만큼 축소
        const mainShaftLen = W1 - stubPinVisible * 2;

        // --- Non-motor side Bracket (180×180mm, 두께 18mm) — motor 그룹에 포함 (브라켓 한쌍) ---
        const bkGeo = new THREE.BoxGeometry(bkThick, bkH, bkD);
        const bkMesh = new THREE.Mesh(bkGeo, bracketMat);
        const bkCenterX = nonMotorSide * (W1 / 2 - bkThick / 2);
        bkMesh.position.set(bkCenterX, 0, 0);
        // meshes.motor에 추가 (아래에서 motor 그룹 생성 후 추가)

        // 비모터측 환봉 (브라켓에서 안쪽으로 200mm 돌출)
        const stubPinGeo = new THREE.CylinderGeometry(stubPinR, stubPinR, stubPinVisible, 16);
        stubPinGeo.rotateZ(Math.PI / 2);
        const stubPin = new THREE.Mesh(stubPinGeo, stubPinMat);
        const bkInnerFaceX = nonMotorSide * (W1 / 2 - bkThick);
        stubPin.position.set(bkInnerFaceX - nonMotorSide * stubPinVisible / 2, 0, 0);
        meshes.shaft.add(stubPin);

        // 모터측: 3인치 연결관 + 복주머니 (브라켓 직접 체결)
        const reducerR = 38; // 3인치 관 반지름 (ø76mm ≈ 3")
        const bokjuR = reducerR + 8; // 복주머니 외경
        const bokjuLen = 35; // 복주머니 길이
        const bokjuMat = new THREE.MeshStandardMaterial({ color: 0x6b7280, metalness: 0.6, roughness: 0.3 });

        const mtBkInnerFaceX = motorDir * (W1 / 2 - motorBkD);
        const shaftEndX = motorDir * (mainShaftLen / 2); // 샤프트 관 끝

        // 복주머니 (브라켓 내면에서 바로 안쪽, 브라켓과 직접 결합)
        const bokjuGeo = new THREE.CylinderGeometry(bokjuR, bokjuR, bokjuLen, 24);
        bokjuGeo.rotateZ(Math.PI / 2);
        const bokju = new THREE.Mesh(bokjuGeo, bokjuMat);
        bokju.position.set(mtBkInnerFaceX - motorDir * bokjuLen / 2, 0, 0);
        meshes.shaft.add(bokju);

        // 3인치 연결관 (복주머니 ~ 샤프트 관 끝, 플랜지 없이 직접 용접)
        const reducerStartX = mtBkInnerFaceX - motorDir * bokjuLen;
        const reducerEndX = shaftEndX;
        const reducerLen = Math.abs(reducerStartX - reducerEndX);
        const reducerGeo = new THREE.CylinderGeometry(reducerR, reducerR, reducerLen, 24);
        reducerGeo.rotateZ(Math.PI / 2);
        const reducer = new THREE.Mesh(reducerGeo, stubPinMat);
        reducer.position.set((reducerStartX + reducerEndX) / 2, 0, 0);
        meshes.shaft.add(reducer);

        // --- Main Shaft (원형관) ---
        const msGeo = new THREE.CylinderGeometry(shaftR, shaftR, mainShaftLen, 32);
        msGeo.rotateZ(Math.PI / 2);
        const msMesh = new THREE.Mesh(msGeo, shaftMat);
        msMesh.position.set(0, 0, 0);
        meshes.shaft.add(msMesh);

        // 비모터측 플랜지만 (샤프트 내경에 삽입 용접)
        const flangeGeo = new THREE.CylinderGeometry(flangeR, flangeR, flangeThick, 32);
        flangeGeo.rotateZ(Math.PI / 2);
        const flangeNM = new THREE.Mesh(flangeGeo, flangeMat);
        flangeNM.position.set(nonMotorSide * (mainShaftLen / 2 + flangeThick / 2), 0, 0);
        meshes.shaft.add(flangeNM);

        meshes.shaft.position.set(0, shaftY, shaftCenterZ);
        scene.add(meshes.shaft);

        // === MOTOR (체인 구동: 모터는 샤프트와 수평(Z방향) 배치 — 슬랫 간섭 방지) ===
        meshes.motor = new THREE.Group();
        meshes.motor.add(bkMesh); // 비모터측 브라켓도 motor 그룹에 포함 (브라켓 한쌍)
        const metalMat = new THREE.MeshStandardMaterial({ color: 0x94a3b8, metalness: 0.6, roughness: 0.3 });
        const darkMat = new THREE.MeshStandardMaterial({ color: 0x374151, metalness: 0.5, roughness: 0.4 });
        const chainMat = new THREE.MeshStandardMaterial({ color: 0xdc2626, metalness: 0.3, roughness: 0.5 });

        // --- 1) 모터측 브라켓 (380×180mm, 벽면 부착 — YZ 평면 판) ---
        // 380mm=Z방향(깊이, 샤프트~모터 수용), 180mm=Y방향(높이), 18mm=X방향(두께)
        const motorBkThick = motorBkD; // 18mm
        const motorBkCX = motorDir * (W1 / 2 - motorBkThick / 2);
        const motorR = b.shaftDia * 0.45;
        const shaftSprocketR = bk.sprocketR; // 철재:ø430(R215), 스크린:ø140(R70)
        const motorSprocketR = bk.motorSpR; // 철재:ø80(R40), 스크린:ø60(R30)
        const motorZ = bk.motorOffset > 0
            ? -bk.motorOffset  // 철재: 도면 기준 160mm
            : -(shaftSprocketR + motorSprocketR + 95); // 스크린: 자동 계산
        // 브라켓: Z 중심은 샤프트(0)와 모터(motorZ) 사이
        const motorBkGeo = new THREE.BoxGeometry(motorBkThick, motorBkH, motorBkW);
        const motorBk = new THREE.Mesh(motorBkGeo, bracketMat);
        motorBk.position.set(motorBkCX, 0, motorZ / 2);
        meshes.motor.add(motorBk);

        // --- 2) 스프로켓 톱니바퀴 (샤프트측 + 모터측) ---
        const sprocketThick = 12;
        const sprocketFaceX = motorDir * (W1 / 2 - motorBkThick);
        const shaftSprocketX = sprocketFaceX - motorDir * sprocketThick / 2;
        const sprocketMat = new THREE.MeshStandardMaterial({ color: 0x374151, metalness: 0.6, roughness: 0.35 });

        // 샤프트 스프로켓 톱니바퀴
        const shaftSpGroup = new THREE.Group();
        const shaftSpBodyGeo = new THREE.CylinderGeometry(shaftSprocketR * 0.85, shaftSprocketR * 0.85, sprocketThick, 32);
        shaftSpBodyGeo.rotateZ(Math.PI / 2);
        shaftSpGroup.add(new THREE.Mesh(shaftSpBodyGeo, sprocketMat));
        const shaftTeethCount = 18;
        const toothH = 8, toothTW = 6;
        for (let i = 0; i < shaftTeethCount; i++) {
            const a = (i / shaftTeethCount) * Math.PI * 2;
            const tGeo = new THREE.BoxGeometry(sprocketThick * 0.8, toothTW, toothH);
            const t = new THREE.Mesh(tGeo, sprocketMat);
            t.position.set(0, (shaftSprocketR - toothH / 2) * Math.sin(a), (shaftSprocketR - toothH / 2) * Math.cos(a));
            t.rotation.x = a;
            shaftSpGroup.add(t);
        }
        shaftSpGroup.position.set(shaftSprocketX, 0, 0);
        meshes.motor.add(shaftSpGroup);

        // --- 3) 모터 (샤프트와 수평방향 Z 오프셋 — 슬랫과 간섭 없음) ---
        const motorBodyLen = motorR * 3;
        // 모터 X: 브라켓 안쪽 (셔터박스 내부)
        const motorCX = sprocketFaceX - motorDir * (motorBodyLen / 2 + 20);

        // 모터 본체 (축=X, 샤프트와 평행, Y=0 수평, Z=motorZ)
        const bodyGeo = new THREE.CylinderGeometry(motorR, motorR, motorBodyLen, 24);
        bodyGeo.rotateZ(Math.PI / 2);
        const body = new THREE.Mesh(bodyGeo, metalMat);
        body.position.set(motorCX, 0, motorZ);
        meshes.motor.add(body);

        // 모터 후면 마감판
        const ecGeo = new THREE.CylinderGeometry(motorR + 3, motorR + 3, 4, 24);
        ecGeo.rotateZ(Math.PI / 2);
        const ec = new THREE.Mesh(ecGeo, darkMat);
        ec.position.set(motorCX - motorDir * (motorBodyLen / 2 + 2), 0, motorZ);
        meshes.motor.add(ec);

        // 상단 냉각 리브
        for (let i = 0; i < 3; i++) {
            const ribGeo = new THREE.BoxGeometry(motorBodyLen * 0.6, 3, motorR * 0.12);
            const rib = new THREE.Mesh(ribGeo, darkMat);
            rib.position.set(motorCX, motorR + 1.5, motorZ + (i - 1) * motorR * 0.4);
            meshes.motor.add(rib);
        }

        // 마운팅 플레이트
        const mMountGeo = new THREE.BoxGeometry(motorBodyLen * 0.6, 5, motorR * 1.4);
        const mMount = new THREE.Mesh(mMountGeo, darkMat);
        mMount.position.set(motorCX, -motorR - 2.5, motorZ);
        meshes.motor.add(mMount);

        // 모터 출력 스프로켓 톱니바퀴 (샤프트 스프로켓과 같은 X면, Z=motorZ)
        const mSpGroup = new THREE.Group();
        const mSpBodyGeo = new THREE.CylinderGeometry(motorSprocketR * 0.8, motorSprocketR * 0.8, sprocketThick, 20);
        mSpBodyGeo.rotateZ(Math.PI / 2);
        mSpGroup.add(new THREE.Mesh(mSpBodyGeo, sprocketMat));
        const motorTeethCount = 10;
        const mToothH = 6, mToothTW = 5;
        for (let i = 0; i < motorTeethCount; i++) {
            const a = (i / motorTeethCount) * Math.PI * 2;
            const tGeo = new THREE.BoxGeometry(sprocketThick * 0.8, mToothTW, mToothH);
            const t = new THREE.Mesh(tGeo, sprocketMat);
            t.position.set(0, (motorSprocketR - mToothH / 2) * Math.sin(a), (motorSprocketR - mToothH / 2) * Math.cos(a));
            t.rotation.x = a;
            mSpGroup.add(t);
        }
        mSpGroup.position.set(shaftSprocketX, 0, motorZ);
        meshes.motor.add(mSpGroup);

        // --- 4) 체인 (RS #40, YZ 평면 — 수평으로 두 스프로켓 연결) ---
        // 샤프트 스프로켓: (Y=0, Z=0), 모터 스프로켓: (Y=0, Z=motorZ)
        const R1 = shaftSprocketR, R2 = motorSprocketR;
        const chainPts = [];
        const seg = 20;
        // 큰 스프로켓 호: 상단→하단 (모터 반대쪽 반원, +Z side)
        for (let i = 0; i <= seg; i++) {
            const a = Math.PI / 2 - (i / seg) * Math.PI; // π/2 → -π/2
            chainPts.push(new THREE.Vector3(0, R1 * Math.sin(a), R1 * Math.cos(a)));
        }
        // 하단 직선: 큰 스프로켓 하단 → 작은 스프로켓 하단
        chainPts.push(new THREE.Vector3(0, -R2, motorZ));
        // 작은 스프로켓 호: 하단→상단 (샤프트 반대쪽, -Z side)
        for (let i = 0; i <= seg; i++) {
            const a = -Math.PI / 2 - (i / seg) * Math.PI; // -π/2 → -3π/2
            chainPts.push(new THREE.Vector3(0, R2 * Math.sin(a), motorZ + R2 * Math.cos(a)));
        }
        // 상단 직선: 작은 상단 → 큰 상단 (닫기)
        chainPts.push(chainPts[0].clone());

        const chainGeo = new THREE.BufferGeometry().setFromPoints(chainPts);
        const chainLine = new THREE.Line(chainGeo, new THREE.LineBasicMaterial({ color: 0xdc2626, linewidth: 2 }));
        chainLine.position.x = shaftSprocketX;
        meshes.motor.add(chainLine);


        meshes.motor.position.set(0, shaftY, shaftCenterZ);
        scene.add(meshes.motor);

        // === GUIDE RAILS (ExtrudeGeometry) ===
        const rw = g.width, rd = g.depth, rt = g.thickness;
        const railHeight = H + 100; // 바닥(0)부터 셔터박스 하단 결합부 (+100mm)
        const railExtrude = { depth: railHeight > 0 ? railHeight : H, bevelEnabled: false };
        const railMat = new THREE.MeshStandardMaterial({ color: 0x64748b, metalness: 0.5, roughness: 0.4 });
        const railSusMat = new THREE.MeshStandardMaterial({ color: 0x9ca3af, metalness: 0.7, roughness: 0.25 });
        const railEdgeMat = new THREE.LineBasicMaterial({ color: 0x94a3b8, transparent: true, opacity: 0.4 });

        function createRailGroup() {
            const grp = new THREE.Group();
            const isScreen = S.productType === 'screen';

            if (isScreen) {
                // ====== 스크린형 가이드레일 (실제 조립 구조) ======
                // 단면 좌표계: X=폭(0→70), Y=깊이(0=개구부/실내측, +=벽쪽)
                const fl = g.flange;    // 26mm 플랜지 (슬롯=backWall-2*fl=15mm)
                const lp = g.lip;       // 10mm (립)
                const sw = g.sideWall;  // 80mm (사이드월)
                const bw = g.backWall;  // 67mm (백월)

                // --- ② 본체 (EGI 1.55T): 슬롯10-플랜지30-사이드월80-백월t-사이드월80-플랜지30-슬롯 ---
                // C채널: 사이드월 80mm, 플랜지 30mm, 슬롯 개구부 10mm (=width-2*fl)
                const bodyShape = new THREE.Shape();
                // 외곽 (시계방향)
                bodyShape.moveTo(0, 0);                     // 하단-전면 모서리
                bodyShape.lineTo(0, sw + rt);               // 하단 사이드월 → 백월
                bodyShape.lineTo(rw, sw + rt);              // 백월 상단
                bodyShape.lineTo(rw, 0);                    // 상단 사이드월 → 전면
                bodyShape.lineTo(rw - fl, 0);               // 상단 플랜지 시작
                bodyShape.lineTo(rw - fl, -lp);             // 상단 립 끝 (개구부쪽으로 10mm)
                bodyShape.lineTo(fl, -lp);                  // 하단 립 끝 (슬롯 개구부)
                bodyShape.lineTo(fl, 0);                    // 하단 플랜지 시작
                bodyShape.lineTo(0, 0);                     // 닫기

                // 내부 채널 (hole) — 반시계방향
                const hole = new THREE.Path();
                hole.moveTo(rt, rt);                        // 하단 내면
                hole.lineTo(rt, sw);                        // 백월 내면
                hole.lineTo(rw - rt, sw);                   // 백월 내면 상단
                hole.lineTo(rw - rt, rt);                   // 상단 내면
                hole.lineTo(rw - fl - rt, rt);              // 상단 플랜지 내면
                hole.lineTo(rw - fl - rt, -lp + rt);       // 상단 립 내면 (개구부쪽)
                hole.lineTo(fl + rt, -lp + rt);            // 하단 립 내면 (개구부쪽)
                hole.lineTo(fl + rt, rt);                  // 하단 플랜지 내면
                hole.lineTo(rt, rt);                       // 닫기
                bodyShape.holes.push(hole);

                const bodyGeo = new THREE.ExtrudeGeometry(bodyShape, railExtrude);
                const bodyMesh = new THREE.Mesh(bodyGeo, railMat);
                grp.add(bodyMesh);
                // 본체 엣지라인
                const bodyEdge = new THREE.LineSegments(new THREE.EdgesGeometry(bodyGeo), railEdgeMat);
                grp.add(bodyEdge);

                // --- ③ 벽연형-C (EGI 1.55T): 30-45-30 ---
                // C브라켓: 백월 뒤에 배치, 본체를 벽에 고정
                const wcLip = 30, wcBody = 45;
                const wcY = sw + rt; // 본체 백월 뒤
                const wcCenterX = rw / 2;
                const wcShape = new THREE.Shape();
                wcShape.moveTo(wcCenterX - wcBody / 2, wcY);
                wcShape.lineTo(wcCenterX - wcBody / 2, wcY + wcLip);
                wcShape.lineTo(wcCenterX - wcBody / 2 + rt, wcY + wcLip);
                wcShape.lineTo(wcCenterX - wcBody / 2 + rt, wcY + rt);
                wcShape.lineTo(wcCenterX + wcBody / 2 - rt, wcY + rt);
                wcShape.lineTo(wcCenterX + wcBody / 2 - rt, wcY + wcLip);
                wcShape.lineTo(wcCenterX + wcBody / 2, wcY + wcLip);
                wcShape.lineTo(wcCenterX + wcBody / 2, wcY);
                wcShape.lineTo(wcCenterX - wcBody / 2, wcY);
                const wcGeo = new THREE.ExtrudeGeometry(wcShape, railExtrude);
                grp.add(new THREE.Mesh(wcGeo, railMat));

                // --- ④ 벽연형-D (EGI 1.55T): 11-23-40-23-11 ---
                // ③ 안쪽에 배치되는 보강 브라켓
                const wdSeg = [11, 23, 40, 23, 11]; // 절곡 치수
                const wdY = wcY + rt; // ③ 안쪽
                const wdShape = new THREE.Shape();
                wdShape.moveTo(wcCenterX - wdSeg[2] / 2, wdY);
                wdShape.lineTo(wcCenterX - wdSeg[2] / 2, wdY + wdSeg[1]);
                wdShape.lineTo(wcCenterX - wdSeg[2] / 2 - wdSeg[0], wdY + wdSeg[1]);
                wdShape.lineTo(wcCenterX - wdSeg[2] / 2 - wdSeg[0], wdY + wdSeg[1] - rt);
                wdShape.lineTo(wcCenterX - wdSeg[2] / 2 + rt, wdY + wdSeg[1] - rt);
                wdShape.lineTo(wcCenterX - wdSeg[2] / 2 + rt, wdY + rt);
                wdShape.lineTo(wcCenterX + wdSeg[2] / 2 - rt, wdY + rt);
                wdShape.lineTo(wcCenterX + wdSeg[2] / 2 - rt, wdY + wdSeg[3] - rt);
                wdShape.lineTo(wcCenterX + wdSeg[2] / 2 + wdSeg[4], wdY + wdSeg[3] - rt);
                wdShape.lineTo(wcCenterX + wdSeg[2] / 2 + wdSeg[4], wdY + wdSeg[3]);
                wdShape.lineTo(wcCenterX + wdSeg[2] / 2, wdY + wdSeg[3]);
                wdShape.lineTo(wcCenterX + wdSeg[2] / 2, wdY);
                wdShape.lineTo(wcCenterX - wdSeg[2] / 2, wdY);
                const wdGeo = new THREE.ExtrudeGeometry(wdShape, railExtrude);
                grp.add(new THREE.Mesh(wdGeo, railMat));

                // --- ⑤ 벽도마감 (SUS 1.2T): 9-114-34-10 × 2개 ---
                // 본체 양쪽 사이드를 감싸는 SUS 커버 (L자 프로파일)
                const trimT = g.trimThick || 1.2;
                // 하단 트림 (X=0 외면)
                const bt = new THREE.Shape();
                bt.moveTo(-trimT, -9);        // 전면 립 (9mm 돌출)
                bt.lineTo(0, -9);
                bt.lineTo(0, sw);             // 사이드 커버 (본체 사이드월까지)
                bt.lineTo(34, sw);            // 벽쪽 플랜지 (34mm 안쪽으로)
                bt.lineTo(34, sw + trimT);
                bt.lineTo(-trimT, sw + trimT);
                bt.lineTo(-trimT, -9);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(bt, railExtrude), railSusMat));
                // 상단 트림 (X=rw 외면)
                const tt = new THREE.Shape();
                tt.moveTo(rw + trimT, -9);    // 전면 립
                tt.lineTo(rw, -9);
                tt.lineTo(rw, sw);            // 사이드 커버
                tt.lineTo(rw - 34, sw);       // 벽쪽 플랜지
                tt.lineTo(rw - 34, sw + trimT);
                tt.lineTo(rw + trimT, sw + trimT);
                tt.lineTo(rw + trimT, -9);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(tt, railExtrude), railSusMat));

                // --- ① 마감재 (EGI 1.55T) × 2개 ---
                // 슬랫 가이드 클립: 사이드월 내면에 부착된 L형 브라켓
                // 참조 도면 기준: 채널 내부 사이드월에서 안쪽으로 돌출
                [{ x: rt, dir: 1 }, { x: rw - rt, dir: -1 }].forEach(({ x, dir }) => {
                    const clipShape = new THREE.Shape();
                    const cy = lp + rt + 3;  // 립 내면에서 약간 안쪽
                    const armLen = 12;       // 사이드월에서 안쪽으로 돌출 길이
                    const legLen = 20;       // 사이드월 따라 길이
                    // L형 브라켓 (사이드월 내면 → 채널 안쪽으로)
                    clipShape.moveTo(x, cy);
                    clipShape.lineTo(x + dir * armLen, cy);
                    clipShape.lineTo(x + dir * armLen, cy + rt);
                    clipShape.lineTo(x + dir * rt, cy + rt);
                    clipShape.lineTo(x + dir * rt, cy + legLen);
                    clipShape.lineTo(x, cy + legLen);
                    clipShape.lineTo(x, cy);
                    const clipGeo = new THREE.ExtrudeGeometry(clipShape, railExtrude);
                    grp.add(new THREE.Mesh(clipGeo, railMat));
                });

            } else {
                // ====== 철재슬라트 가이드레일 (기존 C채널) ======
                const rl = g.lip;
                // Top lip + wall
                const s1 = new THREE.Shape();
                s1.moveTo(0, 0); s1.lineTo(rw, 0); s1.lineTo(rw, rl);
                s1.lineTo(rw - rt, rl); s1.lineTo(rw - rt, rt);
                s1.lineTo(rt, rt); s1.lineTo(rt, rl); s1.lineTo(0, rl); s1.lineTo(0, 0);
                // Bottom lip + wall
                const s2 = new THREE.Shape();
                s2.moveTo(0, rd - rl); s2.lineTo(rt, rd - rl); s2.lineTo(rt, rd - rt);
                s2.lineTo(rw - rt, rd - rt); s2.lineTo(rw - rt, rd - rl);
                s2.lineTo(rw, rd - rl); s2.lineTo(rw, rd); s2.lineTo(0, rd); s2.lineTo(0, rd - rl);
                // Side walls
                const s3 = new THREE.Shape();
                s3.moveTo(0, rl); s3.lineTo(rt, rl); s3.lineTo(rt, rd - rl); s3.lineTo(0, rd - rl); s3.lineTo(0, rl);
                const s4 = new THREE.Shape();
                s4.moveTo(rw - rt, rl); s4.lineTo(rw, rl); s4.lineTo(rw, rd - rl); s4.lineTo(rw - rt, rd - rl); s4.lineTo(rw - rt, rl);
                [s1, s2, s3, s4].forEach(s => {
                    grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(s, railExtrude), railMat));
                });
            }

            // 회전: XY평면 → 수직 (Z extrude → Y height)
            grp.rotation.x = -Math.PI / 2;
            return grp;
        }

        meshes.rails = new THREE.Group();
        const isScreenType = S.productType === 'screen';

        if (isScreenType) {
            // ====== 스크린형: 채널 개구부가 중심(슬랫)을 향하도록 Y축 회전 ======
            // createRailGroup()의 Rx(-PI/2) 후: 개구부가 +Z 방향
            // Ry(±PI/2) 래퍼로 개구부를 ±X 방향(중심 향함)으로 회전

            // Left rail — Ry(+PI/2): 개구부 → +X (중심 방향)
            const railGroupL = createRailGroup();
            const wrapperL = new THREE.Group();
            wrapperL.add(railGroupL);
            wrapperL.rotation.y = Math.PI / 2;
            wrapperL.position.set(-hw, 0, rw / 2);
            meshes.rails.add(wrapperL);

            // Right rail — Ry(-PI/2): 개구부 → -X (중심 방향)
            const railGroupR = createRailGroup();
            const wrapperR = new THREE.Group();
            wrapperR.add(railGroupR);
            wrapperR.rotation.y = -Math.PI / 2;
            wrapperR.position.set(hw, 0, -rw / 2);
            meshes.rails.add(wrapperR);
        } else {
            // ====== 철재형: 기존 C채널 방식 (슬랫이 Z방향 슬롯 통과) ======
            const railGroupL = createRailGroup();
            railGroupL.position.set(-hw - rw / 2, 0, rd / 2);
            meshes.rails.add(railGroupL);

            const railGroupR = createRailGroup();
            railGroupR.scale.x = -1;
            railGroupR.position.set(hw + rw / 2, 0, rd / 2);
            meshes.rails.add(railGroupR);
        }
        scene.add(meshes.rails);

        // === SLAT CURTAIN ===
        const shutterH = H * (S.td.shutterPos / 100);
        const slatGeo = new THREE.PlaneGeometry(W - 20, shutterH);
        const slatMat = new THREE.MeshStandardMaterial({
            color: S.productType === 'steel' ? 0x9ca3af : 0xc084fc,
            side: THREE.DoubleSide,
            transparent: S.productType === 'screen',
            opacity: S.productType === 'screen' ? 0.6 : 0.9,
            metalness: S.productType === 'steel' ? 0.4 : 0,
            roughness: S.productType === 'steel' ? 0.5 : 0.8,
        });
        meshes.slats = new THREE.Mesh(slatGeo, slatMat);
        meshes.slats.position.set(0, H - shutterH / 2, 0);
        scene.add(meshes.slats);

        // Slat lines (horizontal grooves for steel type) — local coords relative to meshes.slats
        if (S.productType === 'steel') {
            const lineGroup = new THREE.Group();
            const slatPitch = 80; // mm
            const lineCount = Math.floor(shutterH / slatPitch);
            for (let i = 1; i < lineCount; i++) {
                const y = shutterH / 2 - i * slatPitch; // local Y: top of plane → down
                if (y < -shutterH / 2) break;
                const lineGeo = new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(-W/2 + 10, y, 1),
                    new THREE.Vector3(W/2 - 10, y, 1)
                ]);
                const line = new THREE.Line(lineGeo, new THREE.LineBasicMaterial({ color: 0x6b7280 }));
                lineGroup.add(line);
            }
            meshes.slats.add(lineGroup);
        }

        // === SLAT ROLL (샤프트에 감긴 슬랫 — 샤프트 전체에 두껍게 감기는 실린더) ===
        const rolledH = H - shutterH;
        if (rolledH > 0) {
            const wrapThick = S.productType === 'steel' ? 10 : 1;
            const shaftR = b.shaftDia / 2;
            const rollThick = Math.max(Math.sqrt(rolledH * wrapThick / Math.PI), 8);
            const rollOuterR = shaftR + rollThick;
            const rollLen = W - 30 - stubPinVisible * 2; // 샤프트 관 길이에 맞춤

            // 하나의 Mesh로 표현 (접시 모양 방지)
            const rollGeo = new THREE.CylinderGeometry(rollOuterR, rollOuterR, rollLen, 48, 1, false);
            rollGeo.rotateZ(Math.PI / 2);
            const rollMat = new THREE.MeshStandardMaterial({
                color: S.productType === 'steel' ? 0xC9B89A : 0xc084fc,
                metalness: S.productType === 'steel' ? 0.2 : 0,
                roughness: S.productType === 'steel' ? 0.5 : 0.8,
                opacity: 0.93,
                transparent: true,
            });
            meshes.slatRoll = new THREE.Mesh(rollGeo, rollMat);
            meshes.slatRoll.position.set(0, shaftY, shaftCenterZ);
            scene.add(meshes.slatRoll);

            // 표면 나선 라인 (감긴 슬랫 질감)
            if (rollThick > 5) {
                const spiralMat = new THREE.LineBasicMaterial({ color: S.productType === 'steel' ? 0x8B7355 : 0x7c4dff, opacity: 0.5, transparent: true });
                for (let s = 0; s < 4; s++) {
                    const pts = [];
                    const turns = Math.max(3, Math.min(rollLen / 60, 25));
                    const startA = (s / 4) * Math.PI * 2;
                    for (let i = 0; i <= turns * 32; i++) {
                        const t = i / (turns * 32);
                        const angle = startA + t * turns * Math.PI * 2;
                        const x = -rollLen / 2 + t * rollLen;
                        pts.push(new THREE.Vector3(x, Math.sin(angle) * (rollOuterR + 0.5), Math.cos(angle) * (rollOuterR + 0.5)));
                    }
                    const geo = new THREE.BufferGeometry().setFromPoints(pts);
                    meshes.slatRoll.add(new THREE.Line(geo, spiralMat));
                }
            }
        }

        // === BOTTOM BAR ===
        const barGeo = new THREE.BoxGeometry(W - 20, 40, 60);
        const barMat = new THREE.MeshStandardMaterial({ color: 0xf59e0b, metalness: 0.3, roughness: 0.5 });
        meshes.bottomBar = new THREE.Mesh(barGeo, barMat);
        meshes.bottomBar.position.set(0, H - shutterH - 20, 0);
        scene.add(meshes.bottomBar);

        // === WALL (좌/우 기둥 + 상부 인방) ===
        // 벽체: 기둥+인방을 하나의 U자 형상으로 생성 (이음새 없음)
        const wl = S.wall;
        const colH = H + b.height;
        const wallColor = new THREE.Color(wl.color);
        const wallMat = new THREE.MeshStandardMaterial({ color: wallColor, transparent: true, opacity: wl.opacity / 100, side: THREE.DoubleSide });
        meshes.wall = new THREE.Group();

        const whw = W1 / 2;
        const wg = wl.wing;
        const topH = wl.topMargin;
        const totalH = colH + topH;

        if (wg > 0 && topH > 0) {
            // U자 형상 (기둥+인방 일체형)
            const shape = new THREE.Shape();
            shape.moveTo(-whw - wg, 0);
            shape.lineTo(-whw - wg, totalH);
            shape.lineTo(whw + wg, totalH);
            shape.lineTo(whw + wg, 0);
            shape.lineTo(whw, 0);
            shape.lineTo(whw, colH);
            shape.lineTo(-whw, colH);
            shape.lineTo(-whw, 0);
            shape.lineTo(-whw - wg, 0);
            const wallGeo = new THREE.ExtrudeGeometry(shape, { depth: wl.thick, bevelEnabled: false });
            wallGeo.translate(0, 0, -wl.thick / 2);
            meshes.wall.add(new THREE.Mesh(wallGeo, wallMat));
        } else if (wg > 0) {
            // 기둥만 (인방 없음)
            const colGeo = new THREE.BoxGeometry(wg, colH, wl.thick);
            const leftCol = new THREE.Mesh(colGeo, wallMat);
            leftCol.position.set(-whw - wg / 2, colH / 2, 0);
            meshes.wall.add(leftCol);
            const rightCol = new THREE.Mesh(colGeo.clone(), wallMat);
            rightCol.position.set(whw + wg / 2, colH / 2, 0);
            meshes.wall.add(rightCol);
        } else if (topH > 0) {
            // 인방만 (기둥 없음)
            const lintelGeo = new THREE.BoxGeometry(W1, topH, wl.thick);
            const lintel = new THREE.Mesh(lintelGeo, wallMat);
            lintel.position.set(0, colH + topH / 2, 0);
            meshes.wall.add(lintel);
        }

        // 벽체 와이어프레임
        meshes.wall.children.forEach(m => {
            const edges = new THREE.EdgesGeometry(m.geometry);
            const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x8d6e63, opacity: 0.4, transparent: true }));
            m.add(line);
        });

        scene.add(meshes.wall);

        // 재빌드 후 토글/단품 상태 동기화
        if (fs3dIsolated) {
            // 단품 보기 모드 유지
            Object.entries(meshes).forEach(([k, obj]) => { if (obj) obj.visible = (k === fs3dIsolated); });
        } else {
            Object.keys(S.td.show).forEach(key => {
                if (meshes[key]) meshes[key].visible = S.td.show[key];
            });
        }

        // Camera: 최초 빌드 시에만 위치 설정, 이후 재빌드 시 현재 시점 유지
        if (!fs3dCameraInit) {
            controls.target.set(0, H / 2, 0);
            camera.position.set(W * 1.2, H * 0.8, W * 1.5);
            controls.update();
            fs3dCameraInit = true;
        }
    }

    // 단품 보기 (Isolation)
    function fs3dIsolate(key) {
        fs3dIsolated = key;
        Object.entries(meshes).forEach(([k, obj]) => {
            if (obj) obj.visible = (k === key);
        });
        // 배지 표시
        const badge = document.querySelector('.fs-iso-badge');
        if (badge) {
            const label = meshLabels[key] || key;
            badge.innerHTML = `${label} 단품 보기 중 &nbsp;✕`;
            badge.style.display = 'block';
        }
        // 카메라 위치 유지 (현재 뷰 그대로, 단품만 표시)
    }

    // 전체 보기 (Show All)
    function fs3dShowAll() {
        fs3dIsolated = null;
        Object.entries(meshes).forEach(([k, obj]) => {
            if (!obj) return;
            obj.visible = S.td.show[k] !== undefined ? S.td.show[k] : true;
        });
        // 배지 숨기기
        const badge = document.querySelector('.fs-iso-badge');
        if (badge) badge.style.display = 'none';
    }

    // 3D Controls
    window.fs3dShutterPos = function(v) {
        undoSaveState();
        S.td.shutterPos = Number(v);
        $('shutterPosLabel').textContent = v + '%';
        fs3dBuild();
    };
    window.fs3dOpacity = function(v) {
        undoSaveState();
        S.td.caseOpacity = Number(v) / 100;
        $('opacityLabel').textContent = v + '%';
        if (meshes.case) meshes.case.traverse(c => { if (c.isMesh) c.material.opacity = S.td.caseOpacity; });
    };
    window.fsToggle3d = function(el, key) {
        undoSaveState();
        el.classList.toggle('active');
        S.td.show[key] = el.classList.contains('active');
        if (meshes[key]) meshes[key].visible = S.td.show[key];
        // 벽 토글 시 벽체 설정 패널 연동
        if (key === 'wall') {
            const ws = $('wallSettings');
            if (ws) ws.classList.toggle('hidden', !S.td.show.wall);
        }
    };
    window.fs3dLightColor = function(color) {
        if (!scene) return;
        const c = new THREE.Color(color);
        scene.children.forEach(l => {
            if (l.isDirectionalLight) l.color.copy(c);
        });
    };
    window.fs3dBg = function(color) {
        S.td.bgColor = color;
        if (scene) scene.background = new THREE.Color(color);
    };
    window.fs3dWall = function(key, v) {
        undoSaveState();
        const num = Number(v);
        S.wall[key] = num;
        const labelId = 'wall' + key.charAt(0).toUpperCase() + key.slice(1) + 'Label';
        const label = $(labelId);
        if (label) label.textContent = key === 'opacity' ? num + '%' : num;
        fs3dBuild();
    };
    window.fs3dWallColor = function(color) {
        undoSaveState();
        S.wall.color = color;
        $('wallColorPicker').value = color;
        fs3dBuild();
    };

    // ============================
    // ZOOM / PAN (SVG tabs)
    // ============================
    const viewport = $('canvasViewport');
    viewport.addEventListener('mousedown', e => {
        if (S.tab === '3D') return;
        S.view.dragging = true;
        S.view.lastMouse = { x: e.clientX, y: e.clientY };
    });
    viewport.addEventListener('wheel', e => {
        if (S.tab === '3D') return;
        e.preventDefault();
        const delta = e.deltaY > 0 ? -0.1 : 0.1;
        S.view.scale = Math.max(0.1, Math.min(S.view.scale + delta, 10));
        fsRender();
    }, { passive: false });
    window.addEventListener('mousemove', e => {
        if (!S.view.dragging || S.tab === '3D') return;
        S.view.offset.x += e.clientX - S.view.lastMouse.x;
        S.view.offset.y += e.clientY - S.view.lastMouse.y;
        S.view.lastMouse = { x: e.clientX, y: e.clientY };
        fsRender();
    });
    window.addEventListener('mouseup', () => { S.view.dragging = false; });

    $('zoomInBtn').onclick = () => { if (S.tab === '3D') return; S.view.scale = Math.min(S.view.scale + 0.2, 10); fsRender(); };
    $('zoomOutBtn').onclick = () => { if (S.tab === '3D') return; S.view.scale = Math.max(S.view.scale - 0.2, 0.1); fsRender(); };
    $('zoomResetBtn').onclick = () => { if (S.tab === '3D') return; S.view.scale = 1; S.view.offset = {x:0,y:0}; fsRender(); };

    // ============================
    // EXPORT: PNG
    // ============================
    window.fsExportPng = function() {
        if (S.tab === '3D') {
            // 3D screenshot
            if (!renderer) return;
            renderer.render(scene, camera);
            const link = document.createElement('a');
            link.download = `fire-shutter-3d-${Date.now()}.png`;
            link.href = renderer.domElement.toDataURL('image/png');
            link.click();
            return;
        }
        // SVG to PNG
        const svgEl = $('svgContainer').querySelector('svg');
        if (!svgEl) return;
        const svgData = new XMLSerializer().serializeToString(svgEl);
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        img.onload = function() {
            canvas.width = img.width * 2;
            canvas.height = img.height * 2;
            ctx.fillStyle = '#050507';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            const link = document.createElement('a');
            link.download = `fire-shutter-${S.tab.toLowerCase()}-${Date.now()}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
            URL.revokeObjectURL(url);
        };
        img.src = url;
    };

    // ============================
    // EXPORT: DXF
    // ============================
    window.fsExportDxf = function() {
        let entities = '';
        if (S.tab === 'GuideRail') {
            const g = S.gr;
            const w = g.width, d = g.depth, t = g.thickness, lip = g.lip;
            // C-channel outline as DXF LWPOLYLINE
            const pts = [
                [0,0],[w,0],[w,lip],[w-t,lip],[w-t,t],[t,t],[t,lip],[0,lip],[0,0],
                [0,d-lip],[t,d-lip],[t,d-t],[w-t,d-t],[w-t,d-lip],[w,d-lip],[w,d],[0,d],[0,d-lip],
                [0,lip],[t,lip],[t,d-lip],[0,d-lip],
                [w,lip],[w-t,lip],[w-t,d-lip],[w,d-lip]
            ];
            pts.forEach((p, i) => {
                if (i > 0) {
                    const prev = pts[i-1];
                    entities += `0\nLINE\n8\nGUIDE_RAIL\n10\n${prev[0]}\n20\n${prev[1]}\n30\n0\n11\n${p[0]}\n21\n${p[1]}\n31\n0\n`;
                }
            });
        } else if (S.tab === 'ShutterBox') {
            const b = S.sb;
            entities += `0\nLINE\n8\nSHUTTER_BOX\n10\n0\n20\n0\n30\n0\n11\n${b.width}\n21\n0\n31\n0\n`;
            entities += `0\nLINE\n8\nSHUTTER_BOX\n10\n${b.width}\n20\n0\n30\n0\n11\n${b.width}\n21\n${b.height}\n31\n0\n`;
            entities += `0\nLINE\n8\nSHUTTER_BOX\n10\n${b.width}\n20\n${b.height}\n30\n0\n11\n0\n21\n${b.height}\n31\n0\n`;
            entities += `0\nLINE\n8\nSHUTTER_BOX\n10\n0\n20\n${b.height}\n30\n0\n11\n0\n21\n0\n31\n0\n`;
            // Shaft circle
            entities += `0\nCIRCLE\n8\nSHAFT\n10\n${b.width/2}\n20\n${b.height*0.45}\n30\n0\n40\n${b.shaftDia/2}\n`;
        }

        const dxf = `0\nSECTION\n2\nENTITIES\n${entities}0\nENDSEC\n0\nEOF\n`;
        const blob = new Blob([dxf], { type: 'application/dxf' });
        const link = document.createElement('a');
        link.download = `fire-shutter-${S.tab.toLowerCase()}-${Date.now()}.dxf`;
        link.href = URL.createObjectURL(blob);
        link.click();
    };

    // ============================
    // EXPORT: JSON (Params)
    // ============================
    window.fsExportJson = function() {
        const data = {
            productType: S.productType,
            openWidth: S.openWidth,
            openHeight: S.openHeight,
            guideRail: { ...S.gr },
            shutterBox: { ...S.sb },
            exportDate: new Date().toISOString(),
        };
        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
        const link = document.createElement('a');
        link.download = `fire-shutter-params-${Date.now()}.json`;
        link.href = URL.createObjectURL(blob);
        link.click();
    };

    // ============================
    // PRESETS (localStorage)
    // ============================
    function refreshPresetList() {
        const sel = $('presetSelect');
        sel.innerHTML = '<option value="">-- 선택 --</option>';
        S.presets.forEach((p, i) => {
            sel.innerHTML += `<option value="${i}">${p.name} (${p.productType === 'steel' ? '강판' : '스크린'} ${p.openWidth}×${p.openHeight})</option>`;
        });
    }

    window.fsSavePreset = function() {
        const name = $('presetName').value.trim();
        if (!name) { alert('프리셋 이름을 입력하세요.'); return; }
        S.presets.push({
            name,
            productType: S.productType,
            openWidth: S.openWidth,
            openHeight: S.openHeight,
            gr: { ...S.gr },
            sb: { ...S.sb },
        });
        localStorage.setItem('fs_presets', JSON.stringify(S.presets));
        $('presetName').value = '';
        refreshPresetList();
    };

    window.fsLoadPreset = function() {
        const idx = Number($('presetSelect').value);
        if (isNaN(idx) || !S.presets[idx]) return;
        const p = S.presets[idx];
        S.productType = p.productType;
        S.openWidth = p.openWidth;
        S.openHeight = p.openHeight;
        Object.assign(S.gr, p.gr);
        Object.assign(S.sb, p.sb);
        // Sync inputs
        $('productType').value = p.productType;
        $('openWidth').value = p.openWidth;
        $('openHeight').value = p.openHeight;
        $('grWidth').value = S.gr.width; $('grDepth').value = S.gr.depth;
        $('grThickness').value = S.gr.thickness; $('grLip').value = S.gr.lip;
        $('grSealThick').value = S.gr.sealThick; $('grSealDepth').value = S.gr.sealDepth;
        $('grSlatThick').value = S.gr.slatThick; $('grAnchorSpacing').value = S.gr.anchorSpacing;
        $('sbWidth').value = S.sb.width; $('sbHeight').value = S.sb.height;
        $('sbDepth').value = S.sb.depth; $('sbThickness').value = S.sb.thickness;
        $('sbShaftDia').value = S.sb.shaftDia; $('sbBracketW').value = S.sb.bracketW;
        $('sbMotorSide').value = S.sb.motorSide;
        fsCalc();
        fsRender();
    };

    window.fsDeletePreset = function() {
        const idx = Number($('presetSelect').value);
        if (isNaN(idx) || !S.presets[idx]) return;
        if (!confirm(`"${S.presets[idx].name}" 프리셋을 삭제하시겠습니까?`)) return;
        S.presets.splice(idx, 1);
        localStorage.setItem('fs_presets', JSON.stringify(S.presets));
        refreshPresetList();
    };

    // ============================
    // INIT
    // ============================
    fsOnProductType(); // 스크린형 기본값 적용 + 모델 필터링
    refreshPresetList();
    fsSwitch('3D');

})();
</script>
@endpush

@endsection