@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" selected>철재스라트</option>
                        <option value="screen">스크린형</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" selected>KFS01 - 기본</option>
                            <option value="KFS02">KFS02 - 대형</option>
                        </optgroup>
                        <optgroup label="스크린형">
                            <option value="KSS01">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 id="grAnchorSpacingWrap">
                                <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 class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="fs-label">레일폭 (mm)</label>
                                <input type="number" id="sbRailWidth" class="fs-input" value="70" step="5" onchange="fsRender()">
                            </div>
                            <div>
                                <label class="fs-label">전면 밑치수 (mm)</label>
                                <input type="number" id="sbFrontBottom" class="fs-input" value="50" step="5" 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>
                        <div>
                            <label class="fs-label">점검구 방향</label>
                            <select id="sbDoorDir" class="fs-select" onchange="fsSetDoorDir(this.value)">
                                <option value="dual" selected>양면 (밑면+후면)</option>
                                <option value="bottom">밑면</option>
                                <option value="rear">후면</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" data-sbview="front" onclick="fsSbView('front')">정면도</button>
                            <button class="fs-btn fs-btn-ghost active" 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="grid gap-1 mb-1" style="grid-template-columns:1fr 1fr 1fr;">
                            <div>
                                <label class="text-[9px] text-slate-500 font-bold">깊이</label>
                                <input type="number" id="td3dDepth" class="fs-input" style="font-size:0.6rem;padding:0.2rem 0.3rem;" value="500" step="10" onchange="fsSet3dParam('depth',this.value)">
                            </div>
                            <div>
                                <label class="text-[9px] text-slate-500 font-bold">높이</label>
                                <input type="number" id="td3dHeight" class="fs-input" style="font-size:0.6rem;padding:0.2rem 0.3rem;" value="380" step="10" onchange="fsSet3dParam('height',this.value)">
                            </div>
                            <div>
                                <label class="text-[9px] text-slate-500 font-bold">샤프트⌀</label>
                                <input type="number" id="td3dShaftDia" class="fs-input" style="font-size:0.6rem;padding:0.2rem 0.3rem;" value="102" step="1" onchange="fsSet3dParam('shaftDia',this.value)">
                            </div>
                        </div>
                        <!-- 가변 파라미터 -->
                        <div class="grid gap-1 mb-2" style="grid-template-columns:1fr 1fr 1fr 1fr;">
                            <div>
                                <label class="text-[9px] text-slate-500 font-bold">점검구</label>
                                <select id="td3dDoorDir" class="fs-select" style="font-size:0.6rem;padding:0.2rem 0.3rem;" onchange="fsSetDoorDir(this.value)">
                                    <option value="dual">양면</option>
                                    <option value="bottom">밑면</option>
                                    <option value="rear">후면</option>
                                </select>
                            </div>
                            <div>
                                <label class="text-[9px] text-slate-500 font-bold">레일폭</label>
                                <input type="number" id="td3dRailWidth" class="fs-input" style="font-size:0.6rem;padding:0.2rem 0.3rem;" value="70" step="5" onchange="fsSet3dParam('railWidth',this.value)">
                            </div>
                            <div>
                                <label class="text-[9px] text-slate-500 font-bold">전면밑</label>
                                <input type="number" id="td3dFrontBottom" class="fs-input" style="font-size:0.6rem;padding:0.2rem 0.3rem;" value="50" step="5" onchange="fsSet3dParam('frontBottom',this.value)">
                            </div>
                            <div>
                                <label class="text-[9px] text-slate-500 font-bold">두께</label>
                                <input type="number" id="td3dThickness" class="fs-input" style="font-size:0.6rem;padding:0.2rem 0.3rem;" value="1.6" step="0.1" onchange="fsSet3dParam('thickness',this.value)">
                            </div>
                        </div>
                        <!-- 개폐율: 한 행 -->
                        <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="50" 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;">50%</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>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/TransformControls.js"></script>

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

    // ============================
    // STATE
    // ============================
    const S = {
        tab: 'GuideRail',
        productType: 'steel',
        openWidth: 2000,
        openHeight: 3000,
        quantity: 1,
        // Guide Rail
        gr: { width:70, depth:120, thickness:1.55, lip:10, flange:30, 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:102, railWidth:70, frontBottom:50, bracketW:10, motorSide:'right', doorDir:'dual', viewMode:'side', showShaft:true, showSlatRoll:true, showMotor:true, showBrake:true, showSpring:true },
        // 3D
        td: { shutterPos:50, 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:75,depth:130,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:30, sideWall:80, backWall:67, trimThick:1.2},
            slatThick:0.8,
            sb:{height:380, depth:500, frontH:240, rearDoorH:240, bottomDoorW:240, shaftDia:102, // 4인치 외경 (101.6mm)
                frontPanel:[17, 55, 50, 380, 55, 15, 20]}, // 케이스 전면판 절곡 프로파일 (세그먼트 1~7, 합계588)
            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; // 현재 단품 보기 중인 키
    let transformCtrl = null;
    let selectedKey = null;
    let selectionBox = null;
    const hiddenKeys = new Set(); // H키로 감춘 요소 추적
    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();
            if ($('td3dDoorDir')) $('td3dDoorDir').value = S.sb.doorDir;
            if ($('td3dDepth')) $('td3dDepth').value = S.sb.depth;
            if ($('td3dHeight')) $('td3dHeight').value = S.sb.height;
            if ($('td3dShaftDia')) $('td3dShaftDia').value = S.sb.shaftDia;
            if ($('td3dRailWidth')) $('td3dRailWidth').value = S.sb.railWidth;
            if ($('td3dFrontBottom')) $('td3dFrontBottom').value = S.sb.frontBottom;
            if ($('td3dThickness')) $('td3dThickness').value = S.sb.thickness;
            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];
        // 철재스라트: 앵커볼트 간격 숨김 (스크린 전용)
        if ($('grAnchorSpacingWrap')) $('grAnchorSpacingWrap').style.display = type === 'steel' ? 'none' : '';
        // 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;
        S.sb.railWidth = S.productType === 'screen' ? 70 : 75; $('sbRailWidth').value = S.sb.railWidth;
        S.sb.frontBottom = 50; $('sbFrontBottom').value = S.sb.frontBottom;
        // 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') fs3dBuild();
        else fsRender();
    };

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

    // ============================
    // 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;
        $('sbRailWidth').value = S.sb.railWidth;
        $('sbFrontBottom').value = S.sb.frontBottom;
        $('sbMotorSide').value = S.sb.motorSide;
        $('sbDoorDir').value = S.sb.doorDir;
        // 재계산 + 렌더링
        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.railWidth = Number($('sbRailWidth').value);
        S.sb.frontBottom = Number($('sbFrontBottom').value);
        S.sb.motorSide = $('sbMotorSide').value;
        S.sb.doorDir = $('sbDoorDir').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;

        // ====== 스크린형: 실제 조립 구조 평면도 (4개 부재) ======
        // ① 마감재 SUS 1.2T × 2장 (상하대칭, 빨간색) — ② 위를 덮씌우는 외피
        // ② 가이드레일 EGI 1.55T × 1개 (ㄷ자, 파란색) — C채널 기초 구조
        // ③ C형 — ④ D형/벽연형 (③ 내부 보강)
        // 세로 = 채널 폭 (스크린:70mm, 철재:75mm)
        if (S.productType === 'screen') {
            const sc = 3;                                // px per mm (두께 비율 개선)
            const t2 = g.thickness * sc;                 // ② 가이드레일 EGI 1.55T
            const t1 = (g.trimThick || 1.2) * sc;       // ① 마감재 SUS 1.2T
            const sealT = g.sealThick * sc;
            const slatT = Math.max(g.slatThick * sc, 2);

            // ── ② 가이드레일 EGI (ㄷ자 1개, 절곡: lip10-flange30-sw80-bw67-sw80-flange30-lip10) ──
            const bLip = g.lip * sc;                     // 10mm 립
            const bFl = g.flange * sc;                   // 30mm 플랜지
            const bSw = g.sideWall * sc;                 // 80mm 사이드월
            const bBw = g.backWall * sc;                 // 67mm 백월
            const bOuterW = g.width * sc;                // 70mm 외폭 (명시된 폭 사용, 부동소수점 방지)
            const bSlot = bOuterW - 2 * bFl;              // 슬롯 개구 = 70-2*30 = 10mm

            // ── ③ 벽연형-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;

            // ── ① 마감재 SUS 치수 (2장 대칭, ② 위 덮씌우기, 절곡: 10-11-110-30-15-15-15) ──
            const m1a = 10 * sc;    // 코킹립 (벽쪽, 수평)
            const m1b = 11 * sc;    // 측면탭 (수직)
            const m1c = 110 * sc;   // 수평면 (메인 커버, 코킹립10 포함 시 전체 120mm)
            const m1d = 30 * sc;    // 우측 수직벽 (표면→바닥, 중앙 방향)
            const m1e = 15 * sc;    // 하단 수평탭 (개구부 방향, 우측)
            const m1f = 15 * sc;    // 복귀벽 (하단탭→상단탭, 외측 방향)
            const m1g = 15 * sc;    // 상단 수평탭 (개구부 방향, 우측)

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

            // ③ 벽연형-C 몸체가 방화벽에 직접 맞닿음 → ③ 립(30mm)이 본체 백월까지 연장
            const bkTotalD = c3Lip;                      // ③ 립 = 벽→본체 백월 깊이
            const bx = pad + wallW + bkTotalD;            // 본체 백월 외면 X (벽+③립, 갭 없음)

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

            // ① 마감재 수평면 범위 (코킹립 끝 = 벽 내면, 측면탭 = 벽 내면 + 코킹립10mm)
            const trimL1 = pad + wallW + m1a + 2;         // 측면탭 X (코킹립이 벽 내면까지만 도달)
            const trimR1 = lipEndX;                       // 수평면 우측 끝 (C채널 립 끝에 맞춤)

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

            // ── 색상 정의 (부재별 명확 구분) ──
            const cTrim = '#ef4444';     // ① 마감재 SUS — 빨간색
            const cBody = '#3b82f6';     // ② 가이드레일 EGI — 파란색
            const cBk3  = '#22c55e';     // ③ C형 — 초록색
            const cBk4  = '#f97316';     // ④ D형 — 주황색
            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채널 EGI (ㄷ자 1개, 절곡: 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}"/>`,
                // 상단 립 (사이드월 끝에서 바깥Y 유지, 개구부 방향 10mm 연장, 'ㄱ' 수평부)
                `<rect x="${swEndX}" y="${by}" width="${bLip}" height="${t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 하단 립 (거울상)
                `<rect x="${swEndX}" y="${by+bOuterW-t2}" width="${bLip}" height="${t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 상단 플랜지 (립 우측 끝에서 안쪽/중앙으로 절곡, 'ㄱ' 수직부)
                `<rect x="${lipEndX-t2}" y="${by+t2}" width="${t2}" height="${bFl-t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 상단 플랜지 끝 10mm 절곡 (플랜지 내측 끝에서 좌측으로, 채널 안쪽)
                `<rect x="${lipEndX-t2-bLip}" y="${by+bFl-t2}" width="${bLip+t2}" height="${t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 하단 플랜지 (거울상)
                `<rect x="${lipEndX-t2}" y="${by+bOuterW-bFl}" width="${t2}" height="${bFl-t2}" fill="${cBody}" stroke="${ms}" stroke-width="${mw}"/>`,
                // 하단 플랜지 끝 10mm 절곡 (플랜지 내측 끝에서 좌측으로, 채널 안쪽)
                `<rect x="${lipEndX-t2-bLip}" y="${by+bOuterW-bFl}" width="${bLip+t2}" 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, ③ 내부에 중첩) ──
            // ③과 마주보는 형태: ③은 우측(②쪽)으로 열리고, ④는 좌측(벽쪽)으로 열림
            // 몸체(40) ②쪽(우측), 사이드(23) 벽 방향(좌측), 립(11) 안쪽 절곡
            const c4CenterY = c3CenterY;
            const c4Y = c4CenterY - c4c / 2;
            const c4BodyX = bx - t2 - 2;                 // 몸체: ② 백월 바로 좌측 (우측 배치)
            const c4SideStartX = c4BodyX - 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="${c4SideStartX}" y="${c4Y}" width="${c4b}" height="${t2}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
                // 하단 사이드
                `<rect x="${c4SideStartX}" y="${c4Y+c4c-t2}" width="${c4b}" height="${t2}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
                // 상단 립 (11mm, 사이드 좌측 끝에서 안쪽/중앙으로 절곡)
                `<rect x="${c4SideStartX}" y="${c4Y+t2}" width="${t2}" height="${c4a}" fill="${cBk4}" stroke="${ms}" stroke-width="${mw}" opacity="0.8"/>`,
                // 하단 립 (11mm, 사이드 좌측 끝에서 안쪽/중앙으로 절곡)
                `<rect x="${c4SideStartX}" 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, 상하 대칭) ──
            // 좌측: 코킹립(10, 벽쪽 수평) + 측면탭(11, 수직) → 방화벽과 'ㄴ'자 립 결합
            // 우측: 30(수직,중앙↓) → 15(수평,우측→) → 15(수직,외측↑) → 15(수평,우측→) — J-hook 접힘 (총높이 30mm)
            const trimX2 = lipEndX;                        // 치수선용 우측 끝

            // ①는 ② 바깥을 감싸는 구조
            const tTop = by - t1;                         // 상단 ① 수평면 Y (② 상면 바깥)
            const tBot = by + bOuterW;                    // 하단 ① 수평면 Y (② 하면 바깥)

            // 개구부쪽 접힘 좌표 (상단 기준)
            const wrapX = trimR1;                         // 접힘 시작 X = 수평면 우측 끝

            const trim1Svg = [
                // ══════ 상단 ① 마감재 (② 상면 바깥을 감싸기) ══════
                // 코킹립: 측면탭 하단에서 벽쪽(좌측) 방향 수평 10mm ('ㄴ'자 하단)
                `<rect x="${trimL1-m1a}" y="${tTop+m1b}" width="${m1a}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 측면탭: 벽쪽 수직 11mm ('ㄴ'자 세로획)
                `<rect x="${trimL1}" y="${tTop}" width="${t1}" height="${m1b+t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 수평면: 벽~립 (좌→우, 메인 커버)
                `<rect x="${trimL1}" y="${tTop}" width="${trimR1-trimL1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 1단: 수직벽 30mm (수평면 우측 끝에서 아래로, 중앙 방향)
                `<rect x="${wrapX-t1}" y="${tTop+t1}" width="${t1}" height="${m1d}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 2단: 하단 수평탭 15mm (수직벽 하단에서 좌측으로, 채널 안쪽)
                `<rect x="${wrapX-t1-m1e}" y="${tTop+m1d}" width="${m1e+t1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 3단: 복귀벽 15mm (하단탭 좌측 끝에서 위로, 외측 방향)
                `<rect x="${wrapX-t1-m1e}" y="${tTop+m1d-m1f}" width="${t1}" height="${m1f+t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 4단: 상단 수평탭 15mm (복귀벽 상단에서 좌측으로, 채널 더 안쪽 — 연기차단재 용접 공간)
                `<rect x="${wrapX-t1-m1e-m1g}" y="${tTop+m1d-m1f}" width="${m1g+t1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // ══════ 하단 ① 마감재 (② 하면 바깥을 감싸기, 거울상) ══════
                // 코킹립: 측면탭 하단에서 벽쪽(좌측) 방향 수평 10mm ('ㄴ'자 하단)
                `<rect x="${trimL1-m1a}" y="${tBot-m1b-t1}" width="${m1a}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 측면탭
                `<rect x="${trimL1}" y="${tBot-m1b}" width="${t1}" height="${m1b+t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 수평면
                `<rect x="${trimL1}" y="${tBot}" width="${trimR1-trimL1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 1단: 수직벽 30mm (수평면 우측 끝에서 위로, 중앙 방향)
                `<rect x="${wrapX-t1}" y="${tBot-m1d}" width="${t1}" height="${m1d}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 2단: 상단 수평탭 15mm (수직벽 상단에서 좌측으로, 채널 안쪽)
                `<rect x="${wrapX-t1-m1e}" y="${tBot-m1d}" width="${m1e+t1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 3단: 복귀벽 15mm (상단탭 좌측 끝에서 아래로, 외측 방향)
                `<rect x="${wrapX-t1-m1e}" y="${tBot-m1d}" width="${t1}" height="${m1f+t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
                // 개구부쪽 4단: 하단 수평탭 15mm (복귀벽 하단에서 좌측으로, 채널 더 안쪽 — 연기차단재 용접 공간)
                `<rect x="${wrapX-t1-m1e-m1g}" y="${tBot-m1d+m1f}" width="${m1g+t1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`,
            ].join('\n');

            // ── 연기차단재 (현재 비활성 — 위치 재조정 후 활성화 예정) ──
            let sealSvg = '';

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

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

            // ── 각 부재별 절곡 치수 라벨 ──
            const sdf = 'font-size="7" font-weight="700" font-family="Pretendard"';
            let segDims = '';
            // ② 가이드레일 (파란색)
            segDims += `<text x="${bx-4}" y="${by+bOuterW/2+2}" fill="${cBody}" ${sdf} text-anchor="end">${g.width}</text>`;
            segDims += `<text x="${bx+t2+bSw/2}" y="${by-4}" fill="${cBody}" ${sdf} text-anchor="middle">${g.sideWall}</text>`;
            segDims += `<text x="${swEndX+bLip/2}" y="${by+t2+10}" fill="${cBody}" ${sdf} text-anchor="middle">${g.lip}</text>`;
            segDims += `<text x="${lipEndX+4}" y="${by+bFl/2+2}" fill="${cBody}" ${sdf} text-anchor="start">${g.flange}</text>`;
            segDims += `<text x="${bx+t2+bSw/2}" y="${by+bOuterW+t2+9}" fill="${cBody}" ${sdf} text-anchor="middle">${g.sideWall}</text>`;
            segDims += `<text x="${lipEndX+4}" y="${by+bOuterW-bFl/2+2}" fill="${cBody}" ${sdf} text-anchor="start">${g.flange}</text>`;
            // ③ C형 (초록색)
            segDims += `<text x="${c3BodyX-4}" y="${c3CenterY+2}" fill="${cBk3}" ${sdf} text-anchor="end">${Math.round(c3Body/sc)}</text>`;
            segDims += `<text x="${c3BodyX+c3Lip/2}" y="${c3Y-4}" fill="${cBk3}" ${sdf} text-anchor="middle">${Math.round(c3Lip/sc)}</text>`;
            segDims += `<text x="${c3BodyX+c3Lip/2}" y="${c3Y+c3Body+9}" fill="${cBk3}" ${sdf} text-anchor="middle">${Math.round(c3Lip/sc)}</text>`;
            // ④ D형 (주황색)
            segDims += `<text x="${c4BodyX+t2+4}" y="${c4CenterY+2}" fill="${cBk4}" ${sdf} text-anchor="start">${Math.round(c4c/sc)}</text>`;
            segDims += `<text x="${c4SideStartX+c4b/2}" y="${c4Y-4}" fill="${cBk4}" ${sdf} text-anchor="middle">${Math.round(c4b/sc)}</text>`;
            segDims += `<text x="${c4SideStartX-4}" y="${c4Y+t2+c4a/2+2}" fill="${cBk4}" ${sdf} text-anchor="end">${Math.round(c4a/sc)}</text>`;
            segDims += `<text x="${c4SideStartX-4}" y="${c4Y+c4c-t2-c4a/2+2}" fill="${cBk4}" ${sdf} text-anchor="end">${Math.round(c4a/sc)}</text>`;
            // ① 마감재 상단 (빨간색)
            segDims += `<text x="${trimL1-m1a/2}" y="${tTop+m1b+t1+9}" fill="${cTrim}" ${sdf} text-anchor="middle">10</text>`;
            segDims += `<text x="${trimL1-6}" y="${tTop+m1b/2+2}" fill="${cTrim}" ${sdf} text-anchor="end">11</text>`;
            segDims += `<text x="${(trimL1+trimR1)/2}" y="${tTop-3}" fill="${cTrim}" ${sdf} text-anchor="middle">110</text>`;
            segDims += `<text x="${wrapX+4}" y="${tTop+m1d/2+2}" fill="${cTrim}" ${sdf} text-anchor="start">30</text>`;
            segDims += `<text x="${wrapX-m1e/2}" y="${tTop+m1d+t1+9}" fill="${cTrim}" ${sdf} text-anchor="middle">15</text>`;
            segDims += `<text x="${wrapX-m1e-6}" y="${tTop+m1d-m1f/2+2}" fill="${cTrim}" ${sdf} text-anchor="end">15</text>`;
            segDims += `<text x="${wrapX-m1e-m1g/2}" y="${tTop+m1d-m1f-4}" fill="${cTrim}" ${sdf} text-anchor="middle">15</text>`;
            // ① 마감재 하단 (빨간색, 거울상)
            segDims += `<text x="${trimL1-m1a/2}" y="${tBot-m1b-4}" fill="${cTrim}" ${sdf} text-anchor="middle">10</text>`;
            segDims += `<text x="${trimL1-6}" y="${tBot-m1b/2+2}" fill="${cTrim}" ${sdf} text-anchor="end">11</text>`;
            segDims += `<text x="${(trimL1+trimR1)/2}" y="${tBot+t1+9}" fill="${cTrim}" ${sdf} text-anchor="middle">110</text>`;
            segDims += `<text x="${wrapX+4}" y="${tBot-m1d/2+2}" fill="${cTrim}" ${sdf} text-anchor="start">30</text>`;
            segDims += `<text x="${wrapX-m1e/2}" y="${tBot-m1d-4}" fill="${cTrim}" ${sdf} text-anchor="middle">15</text>`;
            segDims += `<text x="${wrapX-m1e-6}" y="${tBot-m1d+m1f/2+2}" fill="${cTrim}" ${sdf} text-anchor="end">15</text>`;
            segDims += `<text x="${wrapX-m1e-m1g/2}" y="${tBot-m1d+m1f+t2+9}" fill="${cTrim}" ${sdf} text-anchor="middle">15</text>`;

            // ── 치수선 ──
            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 (우측, 충분히 떨어진 위치)
                const dimRightX = totalRight + 40;
                dimLines += `<line x1="${dimRightX}" y1="${by}" x2="${dimRightX}" y2="${by+bOuterW}" stroke="#3b82f6" stroke-width="1"/>`;
                dimLines += `<line x1="${dimRightX-5}" y1="${by}" x2="${dimRightX+5}" y2="${by}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dimLines += `<line x1="${dimRightX-5}" y1="${by+bOuterW}" x2="${dimRightX+5}" y2="${by+bOuterW}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dimLines += `<text x="${dimRightX+8}" 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 += `<text x="${lipEndX+6}" y="${by+bFl/2+3}" fill="${cBody}" font-size="8" font-weight="700" text-anchor="start" font-family="Pretendard">②FL${g.flange}</text>`;
                // ① 코킹립 10mm (벽쪽 라벨)
                dimLines += `<text x="${trimL1-m1a-4}" y="${tTop+m1b+t1/2+3}" fill="${cTrim}" font-size="8" font-weight="700" text-anchor="end" font-family="Pretendard">①립${m1a/sc}</text>`;
                // 슬롯 개구 (우측 중앙)
                dimLines += `<text x="${lipEndX+6}" y="${by+bOuterW/2+16}" fill="#22c55e" font-size="8" font-weight="700" text-anchor="start" font-family="Pretendard">슬롯${Math.round(bSlot/sc)}</text>`;
                // 립 깊이
                dimLines += `<text x="${(swEndX+lipEndX)/2}" y="${by+bFl+14}" fill="${cBody}" font-size="8" font-weight="700" text-anchor="middle" font-family="Pretendard">②립${g.lip}</text>`;
                // 두께 (하단, 120mm 치수선 아래)
                dimLines += `<text x="${(totalLeft+totalRight)/2}" y="${by+bOuterW+68}" fill="#94a3b8" font-size="8" font-weight="700" text-anchor="middle" font-family="Pretendard">①t=${g.trimThick||1.2}(SUS) ②t=${g.thickness}(EGI)</text>`;
                // 부재 번호 라벨 (참조 도면 기준 배치)
                // ① 마감재: 수평면 중앙 (상단, 하단 각 1개)
                dimLines += `<text x="${(trimL1+trimR1)/2}" y="${tTop+t1/2+3}" fill="${cTrim}" font-size="20" font-weight="900" text-anchor="middle" font-family="Pretendard">①</text>`;
                dimLines += `<text x="${(trimL1+trimR1)/2}" y="${tBot+t1/2+3}" fill="${cTrim}" font-size="20" font-weight="900" text-anchor="middle" font-family="Pretendard">①</text>`;
                // ② 가이드레일: 채널 내부 중앙
                dimLines += `<text x="${bx+t2+bSw/2}" y="${by+bOuterW/2+4}" fill="${cBody}" font-size="24" font-weight="900" text-anchor="middle" font-family="Pretendard">②</text>`;
                // ③ C형: 몸체(45mm) 중심
                dimLines += `<text x="${c3BodyX+c3Lip/2}" y="${c3CenterY+4}" fill="${cBk3}" font-size="20" font-weight="900" text-anchor="middle" font-family="Pretendard">③</text>`;
                // ④ D형: 몸체(40mm) 중심 (좌측 열림, ③과 마주봄)
                dimLines += `<text x="${c4BodyX-c4b/2}" y="${c4CenterY+4}" fill="${cBk4}" font-size="20" font-weight="900" text-anchor="middle" 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) — ${S.productType==='screen'?'스크린형':'철재스라트'}</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}
                <!-- ② 가이드레일 C채널 EGI (파란색, ㄷ자 1개) -->
                ${bodySvg}
                <!-- ③ C형 -->
                ${bk3Svg}
                <!-- ④ D형 -->
                ${bk4Svg}
                <!-- ① 마감재 SUS (빨간색, ② 위 덮씌우기) -->
                ${trim1Svg}
                <!-- 연기차단재 -->
                ${sealSvg}
                <!-- 슬랫 -->
                <rect x="${slatX1}" y="${slatY}" width="${slatX2-slatX1}" height="${slatT}" fill="#c084fc" opacity="0.8" rx="1"/>
                ${g.showDim ? `<text x="${slatX1}" y="${slatY-4}" fill="#c084fc" font-size="8" font-weight="700" text-anchor="start" font-family="Pretendard">슬랫 t=${g.slatThick}</text>` : ''}
                <!-- 절곡 치수 -->
                ${segDims}
                <!-- 개구부 방향 -->
                <text x="${lipEndX+10}" y="${by+bOuterW/2-2}" fill="#64748b" font-size="9" font-weight="700" text-anchor="start" font-family="Pretendard">→개구부</text>
                ${dimLines}
                <text x="${svgW/2}" y="${by+bOuterW+82}" fill="#94a3b8" font-size="10" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL — ${S.productType==='screen'?'스크린형':'철재스라트'} (①마감재 ②가이드레일 ③C형 ④D형)</text>
            </svg>`;

            displaySvg(svg);
            return;
        }

        // ====== 철재스라트: 가이드레일 평면도 (130mm × 75mm 결합도) ======
        // LEFT = 방화벽(벽쪽), RIGHT = 개구부(실내쪽, 슬랫 통과)
        // ① 마감재 SUS 1.2T (빨간색) - ② 바깥을 감싸는 외피, 상하 2장
        //   상단: 10←lip + 13↓tab + 120→body + 25↓ + 15←
        //   하단: 10←lip + 13↑tab + 120→body + 25↑ + 내부스텝(19← + 14↓ + 15←)
        // ② 본체 EGI 1.55T (회색) - 메인 C채널, 개구부가 RIGHT
        //   외형: 90mm(가로) × 72mm(세로), 좌측벽 72mm, 상/하단 플랜지 90mm
        //   우측 상부 립 21mm, 내부 개구부가 y=60까지 확장, 하부 립 12mm
        // ③ C형 EGI 1.55T (주황색) - ② 내부 좌측 상단에 위치, 30-45-30 ㄷ자(우측열림)
        // ④ 벽연형 EGI 1.55T (갈색) - ② 좌측에 위치, 벽과 연결, 30-45-30 ㄷ자(우측열림)
        {
            const sc = 4;                          // px per mm (확대하여 철판 비율 현실적)
            const t  = g.thickness * sc;           // 1.55mm → 6.2px (EGI)
            const t1 = (g.trimThick || 1.2) * sc;  // 1.2mm → 4.8px (SUS)
            const slatT = Math.max(g.slatThick * sc, 2);

            // 색상
            const cBody = '#4b5563', cTrim = '#ef4444', cC3 = '#f59e0b', cWall = '#8b6c5c';

            // ── 도면 치수 (mm 단위, sc 미적용) ──
            // 전체: 130mm(가로) × 75mm(세로)
            // ① 마감재: lip=10, tab=13, body=120, end25=25, end15=15, end19=19, end14=14
            // ② 본체: 90×72, lip=21, 내부 shelf78/shelf30/step43/s15/s20
            // ③ C형: 30-45-30
            // ④ 벽연형: 30-45-30

            // ── 기준 좌표 설정 ──
            // ① lip 좌측 끝을 x 기준 0으로 놓고 오프셋 적용
            const wallW = 50;      // 방화벽 해치 너비 (px)
            const wallGap = 0;     // 방화벽과 ④ 밀착 (벽에 부착)
            const padL = 30;       // SVG 좌측 여백 (px)
            const padT = 55;       // SVG 상단 여백 (타이틀 공간)

            // ④ C형 보강 치수
            const w4depth = 30 * sc;
            const w4height = 45 * sc;

            // ② 본체 치수
            const b2w = 90 * sc;   // 90mm → 270px (가로)
            const b2h = 72 * sc;   // 72mm → 216px (세로)
            const b2lip = 21 * sc; // 21mm → 63px (우측 상/하부 립)

            // ① 마감재 치수
            const m1lip  = 10 * sc;  // 10mm → 30px  (좌측 코킹립)
            const m1tab  = 13 * sc;  // 13mm → 39px  (좌측 절곡탭)
            const m1body = 120 * sc; // 120mm → 360px (본체 수평부)
            const m1e25  = 25 * sc;  // 25mm → 75px  (우측 수직 절곡)
            const m1e15  = 15 * sc;  // 15mm → 45px  (우측 수평 리턴)
            const m1e19  = 19 * sc;  // 19mm → 57px  (하단 내부 수평)
            const m1e14  = 14 * sc;  // 14mm → 42px  (하단 내부 수직)

            // ── 좌표 계산 ──
            // 방화벽 우측면 = ① 립 좌측 끝 (밀착)
            const trimLipX = padL + wallW;      // ① 립 좌측 = 벽 우측
            const bx = trimLipX + m1lip;        // ② 좌측벽 = ① 립 끝
            const by = padT + m1tab;            // ② 상단 y
            const trimRightX = bx + m1body;     // ① body 우측 끝 (130mm 끝)
            const w4x = trimLipX;               // ④ 좌측 = 벽 우측면 = ① 립 좌측

            // SVG 캔버스 크기
            const svgW = trimRightX + 80;  // 우측 치수선/라벨 공간
            const svgH = by + b2h + m1tab + 60;  // 하단 치수선/범례 공간

            const P = [];  // SVG 부재 요소 배열

            // ══════════════════════════════════════════
            // ══════════════════════════════════════════
            // ④ C형 보강 EGI 1.55T (갈색, ㄷ자 30-45-30 우측열림)
            // 벽 우측면에 부착, 세로 중앙 정렬
            // ══════════════════════════════════════════
            const w4cy = by + (b2h - w4height) / 2;
            P.push(`<rect x="${w4x}" y="${w4cy}" width="${w4depth}" height="${t}" fill="${cWall}" stroke="${cWall}" stroke-width="0.5" opacity="0.85"/>`);
            P.push(`<rect x="${w4x}" y="${w4cy}" width="${t}" height="${w4height}" fill="${cWall}" stroke="${cWall}" stroke-width="0.5" opacity="0.85"/>`);
            P.push(`<rect x="${w4x}" y="${w4cy + w4height - t}" width="${w4depth}" height="${t}" fill="${cWall}" stroke="${cWall}" stroke-width="0.5" opacity="0.85"/>`);
            // ④ 치수 라벨 (갈색)
            const wdf = 'font-size="7" font-weight="700" font-family="Pretendard"';
            P.push(`<text x="${w4x + w4depth / 2}" y="${w4cy - 4}" fill="${cWall}" ${wdf} text-anchor="middle">30</text>`);
            P.push(`<text x="${w4x - 4}" y="${w4cy + w4height / 2 + 2}" fill="${cWall}" ${wdf} text-anchor="end">45</text>`);

            // ══════════════════════════════════════════
            // ② 본체 EGI 1.55T (절곡, 체이닝 좌표)
            // 프로파일 좌표: (0,0)=좌상단, 90×72mm
            // 내부 개구부가 아래로 확장 (④ 진입 공간)
            // ══════════════════════════════════════════
            {
                const ox2 = w4x + w4depth + (7 + 0.75) * sc; // ② 좌측벽 = ④ 끝 + 7mm + 0.75(반두께)
                const oy2 = by; // ② 상단
                const c = cBody, s = '#94a3b8';
                // 프로파일 좌표 → SVG 좌표 변환
                function r(x,y,w,h,op) {
                    P.push(`<rect x="${ox2+x*sc}" y="${oy2+y*sc}" width="${w*sc}" height="${h*sc}" fill="${c}" stroke="${s}" stroke-width="${op?'0.3':'0.5'}" ${op?'opacity="0.7"':''}/>`);
                }
                // 벤드포인트 체이닝 (프로파일 좌표 mm 단위)
                // B0=(0,60) → Seg1(10→) → (10,60): 립 우측(채널 안쪽)
                r(0, 60-0.75, 10, 1.55);
                // B0=(0,60) → Seg2(60↑) → (0,0): 좌측벽 상부
                r(0, 0, 1.55, 60);
                // (0,0) → Seg3(90→) → (90,0): 상단 플랜지
                r(0, 0, 90, 1.55);
                // (90,0) → Seg4(21↓) → (90,21): 상부 립
                r(90-1.55, 0, 1.55, 21);
                // (90,21) → Seg5(78←) → (12,21): 상부 내부 선반 (넓은)
                r(12, 21, 78, 1.55, 1);
                // (12,21) → Seg6(30↓) → (12,51): 내부 벽
                r(12, 21, 1.55, 30, 1);
                // (12,51) → Seg7(43→) → (55,51): 하부 내부 선반
                r(12, 51, 43, 1.55, 1);
                // (55,51) → Seg8(15↓) → (55,66): 스텝 하강
                r(55-1.55, 51, 1.55, 15, 1);
                // (55,66) → Seg9(20→) → (75,66): 스텝 우측
                r(55, 66-1.55, 20, 1.55, 1);
                // (75,66) → Seg10(15↑) → (75,51): 스텝 상승
                r(75, 51, 1.55, 15, 1);
                // (75,51) → Seg11(15→) → (90,51): 스텝 우측
                r(75, 51, 15, 1.55, 1);
                // (90,51) → Seg12(21↓) → (90,72): 하부 립
                r(90-1.55, 51, 1.55, 21);
                // (90,72) → Seg13(90←) → (0,72): 하단 플랜지
                r(0, 72-1.55, 90, 1.55);
                // (0,72) → Seg14(12↑) → (0,60): 좌측벽 하부
                r(0, 60, 1.55, 12);
                // (0,60) → Seg15(10→) → (10,60): 끝 립 (Seg1과 겹침)
                r(0, 60, 10, 1.55);

                // ── ② 본체 절곡 치수 라벨 (검증용, 본체 색상) ──
                const df = 'font-size="7" font-weight="700" font-family="Pretendard"';
                function d(x, y, txt, anc, clr) {
                    P.push(`<text x="${ox2+x*sc}" y="${oy2+y*sc}" fill="${clr||s}" ${df} text-anchor="${anc||'middle'}">${txt}</text>`);
                }
                d(5, 57, '10');            // Seg1: 립 10mm
                d(-4, 30, '60', 'end');    // Seg2: 좌측벽 60mm
                d(45, -3, '90');           // Seg3: 상단 플랜지 90mm
                d(94, 11, '21', 'start');  // Seg4: 상부 립 21mm
                d(51, 18, '78');           // Seg5: 상부 선반 78mm
                d(9, 36, '30', 'end');     // Seg6: 내부 벽 30mm
                d(33, 49, '43');           // Seg7: 하부 선반 43mm
                d(49, 59, '15', 'end');    // Seg8: 스텝↓ 15mm
                d(65, 70, '20');           // Seg9: 스텝→ 20mm
                d(79, 59, '15', 'start');  // Seg10: 스텝↑ 15mm
                d(82, 49, '15');           // Seg11: 스텝→ 15mm
                d(94, 62, '21', 'start');  // Seg12: 하부 립 21mm
                d(45, 76, '90');           // Seg13: 하단 플랜지 90mm
                d(-4, 67, '12', 'end');    // Seg14: 좌측벽 하부 12mm
            }

            // ══════════════════════════════════════════
            // ① 마감재 SUS 1.2T (빨간색) — 상단 장
            // 경로: 10←lip + 13↓tab + 120→body + 25↓ + 15←
            // ② 상단 플랜지 바로 위를 감싸는 형태
            // ══════════════════════════════════════════
            const tTop = by - t1;  // ② 상단 플랜지 바로 위
            // ── 상단 ① 경로: 120→body + 13↓tab + 10←lip ── (우측: 25↓ + 15←)
            // (a) 본체 수평부 120mm
            P.push(`<rect x="${bx}" y="${tTop}" width="${m1body}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (b) 좌측 절곡탭 13mm: body 좌단에서 아래로
            P.push(`<rect x="${bx}" y="${tTop}" width="${t1}" height="${m1tab}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (c) 좌측 코킹립 10mm: tab 하단에서 좌측으로
            P.push(`<rect x="${bx - m1lip}" y="${tTop + m1tab - t1}" width="${m1lip + t1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (d) 우측 수직 절곡 25mm: body 우측 끝에서 아래로
            P.push(`<rect x="${trimRightX - t1}" y="${tTop}" width="${t1}" height="${m1e25}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (e) 우측 수평 리턴 15mm: 25mm 끝에서 좌측으로
            P.push(`<rect x="${trimRightX - m1e15}" y="${tTop + m1e25 - t1}" width="${m1e15}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);

            // ══════════════════════════════════════════
            // ① 마감재 하단 — 경로: 120→body + 13↑tab + 10←lip (우측: 25↑+19←+14↓+15←)
            // ══════════════════════════════════════════
            const tBot = by + b2h;
            // (a) 본체 수평부 120mm
            P.push(`<rect x="${bx}" y="${tBot}" width="${m1body}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (b) 좌측 절곡탭 13mm: body 좌단에서 위로
            P.push(`<rect x="${bx}" y="${tBot - m1tab + t1}" width="${t1}" height="${m1tab}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (c) 좌측 코킹립 10mm: tab 상단에서 좌측으로
            P.push(`<rect x="${bx - m1lip}" y="${tBot - m1tab}" width="${m1lip + t1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (c) 본체 수평부 120mm: bx에서 우측으로
            P.push(`<rect x="${bx}" y="${tBot}" width="${m1body}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (d) 우측 수직 절곡 25mm: body 우측 끝에서 위로
            P.push(`<rect x="${trimRightX - t1}" y="${tBot - m1e25 + t1}" width="${t1}" height="${m1e25}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (e) 내부스텝 19mm 수평: 25mm 벽 상단에서 좌측으로
            P.push(`<rect x="${trimRightX - m1e19}" y="${tBot - m1e25 + t1}" width="${m1e19}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (f) 내부스텝 14mm 수직: 19mm 좌측 끝에서 아래로
            P.push(`<rect x="${trimRightX - m1e19}" y="${tBot - m1e25 + t1}" width="${t1}" height="${m1e14}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);
            // (g) 내부스텝 15mm 수평: 14mm 끝에서 좌측으로
            P.push(`<rect x="${trimRightX - m1e19 - m1e15}" y="${tBot - m1e25 + m1e14 + t1}" width="${m1e15 + t1}" height="${t1}" fill="${cTrim}" stroke="${cTrim}" stroke-width="0.3"/>`);

            // ── ① 마감재 치수 라벨 (빨간색) ──
            const tdf = `font-size="7" font-weight="700" font-family="Pretendard"`;
            // 상단 ①
            P.push(`<text x="${bx + m1body / 2}" y="${tTop - 3}" fill="${cTrim}" ${tdf} text-anchor="middle">120</text>`);
            P.push(`<text x="${bx - 4}" y="${tTop + m1tab / 2 + 2}" fill="${cTrim}" ${tdf} text-anchor="end">13</text>`);
            P.push(`<text x="${bx - m1lip / 2}" y="${tTop + m1tab + 6}" fill="${cTrim}" ${tdf} text-anchor="middle">10</text>`);
            P.push(`<text x="${trimRightX + 4}" y="${tTop + m1e25 / 2 + 2}" fill="${cTrim}" ${tdf} text-anchor="start">25</text>`);
            P.push(`<text x="${trimRightX - m1e15 / 2}" y="${tTop + m1e25 + 6}" fill="${cTrim}" ${tdf} text-anchor="middle">15</text>`);
            // 하단 ①
            P.push(`<text x="${bx + m1body / 2}" y="${tBot + t1 + 9}" fill="${cTrim}" ${tdf} text-anchor="middle">120</text>`);
            P.push(`<text x="${bx - 4}" y="${tBot - m1tab / 2 + 2}" fill="${cTrim}" ${tdf} text-anchor="end">13</text>`);
            P.push(`<text x="${bx - m1lip / 2}" y="${tBot - m1tab - 3}" fill="${cTrim}" ${tdf} text-anchor="middle">10</text>`);
            P.push(`<text x="${trimRightX + 4}" y="${tBot - m1e25 / 2 + 2}" fill="${cTrim}" ${tdf} text-anchor="start">25</text>`);
            P.push(`<text x="${trimRightX - m1e19 / 2}" y="${tBot - m1e25 - 2}" fill="${cTrim}" ${tdf} text-anchor="middle">19</text>`);
            P.push(`<text x="${trimRightX - m1e19 - 4}" y="${tBot - m1e25 + m1e14 / 2 + 2}" fill="${cTrim}" ${tdf} text-anchor="end">14</text>`);
            P.push(`<text x="${trimRightX - m1e19 - m1e15 / 2}" y="${tBot - m1e25 + m1e14 + 9}" fill="${cTrim}" ${tdf} text-anchor="middle">15</text>`);

            // (슬랫 표시 생략 — 철재는 슬랫이 개구부 밖에서 통과)

            // ══════════════════════════════════════════
            // 치수선
            // ══════════════════════════════════════════
            let dims = '';
            if (g.showDim) {
                // ── 수평 치수: 전체 깊이 (130mm = g.depth) ──
                // ① lip 좌측 ~ ① body 우측
                const dimHy = tBot + m1tab + 18;
                dims += `<line x1="${trimLipX}" y1="${dimHy}" x2="${trimRightX}" y2="${dimHy}" stroke="#3b82f6" stroke-width="1" marker-start="url(#dimArrow)" marker-end="url(#dimArrow)"/>`;
                dims += `<line x1="${trimLipX}" y1="${dimHy - 5}" x2="${trimLipX}" y2="${dimHy + 5}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dims += `<line x1="${trimRightX}" y1="${dimHy - 5}" x2="${trimRightX}" y2="${dimHy + 5}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dims += `<text x="${(trimLipX + trimRightX) / 2}" y="${dimHy + 14}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">${g.depth} mm</text>`;

                // ── 수직 치수: 전체 폭 (75mm = g.width) ──
                const dimVx = trimRightX + 12;
                // ①상단 lip ~ ①하단 lip (전체 75mm)
                const dimVtop = tTop;
                const dimVbot = tBot + t1;
                dims += `<line x1="${dimVx}" y1="${dimVtop}" x2="${dimVx}" y2="${dimVbot}" stroke="#3b82f6" stroke-width="1"/>`;
                dims += `<line x1="${dimVx - 5}" y1="${dimVtop}" x2="${dimVx + 5}" y2="${dimVtop}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dims += `<line x1="${dimVx - 5}" y1="${dimVbot}" x2="${dimVx + 5}" y2="${dimVbot}" stroke="#3b82f6" stroke-width="0.5"/>`;
                dims += `<text x="${dimVx + 8}" y="${(dimVtop + dimVbot) / 2 + 4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">${g.width} mm</text>`;

                // ── 보조 치수: ② 본체 가로 90mm ──
                const dimB2y = by - m1tab - 12;
                dims += `<line x1="${bx}" y1="${dimB2y}" x2="${bx + b2w}" y2="${dimB2y}" stroke="#94a3b8" stroke-width="0.7" stroke-dasharray="3,2"/>`;
                dims += `<line x1="${bx}" y1="${dimB2y - 4}" x2="${bx}" y2="${dimB2y + 4}" stroke="#94a3b8" stroke-width="0.5"/>`;
                dims += `<line x1="${bx + b2w}" y1="${dimB2y - 4}" x2="${bx + b2w}" y2="${dimB2y + 4}" stroke="#94a3b8" stroke-width="0.5"/>`;
                dims += `<text x="${bx + b2w / 2}" y="${dimB2y - 3}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">90</text>`;

                // ── 보조 치수: ② 본체 세로 72mm ──
                const dimB2x = bx - m1lip - 12;
                dims += `<line x1="${dimB2x}" y1="${by}" x2="${dimB2x}" y2="${by + b2h}" stroke="#94a3b8" stroke-width="0.7" stroke-dasharray="3,2"/>`;
                dims += `<line x1="${dimB2x - 4}" y1="${by}" x2="${dimB2x + 4}" y2="${by}" stroke="#94a3b8" stroke-width="0.5"/>`;
                dims += `<line x1="${dimB2x - 4}" y1="${by + b2h}" x2="${dimB2x + 4}" y2="${by + b2h}" stroke="#94a3b8" stroke-width="0.5"/>`;
                dims += `<text x="${dimB2x - 3}" y="${by + b2h / 2 + 4}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="end" font-family="Pretendard">72</text>`;
            }

            // ══════════════════════════════════════════
            // 번호 라벨 (원 + 번호)
            // ══════════════════════════════════════════
            let labels = '';
            // ① 마감재 라벨 (상단 중앙 위)
            const lb1x = bx + m1body / 2, lb1y = tTop - 12;
            labels += `<circle cx="${lb1x}" cy="${lb1y}" r="8" fill="none" stroke="${cTrim}" stroke-width="1.5"/>`;
            labels += `<text x="${lb1x}" y="${lb1y + 3}" fill="${cTrim}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">①</text>`;
            // (② 라벨 — 제거)
            // (③ C형 라벨 — 생략)
            // ④ C형 보강 라벨
            const lb4x = w4x + w4depth / 2, lb4y = w4cy + w4height / 2;
            labels += `<circle cx="${lb4x}" cy="${lb4y}" r="8" fill="none" stroke="${cWall}" stroke-width="1.5"/>`;
            labels += `<text x="${lb4x}" y="${lb4y + 3}" fill="${cWall}" font-size="9" font-weight="900" text-anchor="middle" font-family="Pretendard">④</text>`;

            // ══════════════════════════════════════════
            // 개구부 방향 표시
            // ══════════════════════════════════════════
            const arrowX = bx + b2w + 8;
            const arrowY = by + b2h / 2;
            const arrowTxt = `<text x="${arrowX}" y="${arrowY}" fill="#64748b" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">→ 개구부</text>`;

            // ══════════════════════════════════════════
            // 방화벽 (해치 패턴) — ① 립 좌측에 밀착
            // ══════════════════════════════════════════
            const wallX = trimLipX - wallW; // 벽 우측 = ① 립 좌측
            const wallYstart = by - 20;
            const wallH = b2h + 40;

            // ══════════════════════════════════════════
            // SVG 조립
            // ══════════════════════════════════════════
            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="steelWH" 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="22" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">가이드레일 평면도 (Plan View) — 철재스라트</text>
                <!-- 방화벽 (해치) -->
                <rect x="${wallX}" y="${wallYstart}" width="${wallW}" height="${wallH}" fill="url(#steelWH)" stroke="#8b7355" stroke-width="1" rx="2"/>
                <text x="${wallX + wallW / 2}" y="${wallYstart + wallH + 14}" fill="#a1887f" font-size="10" font-weight="700" text-anchor="middle" font-family="Pretendard">방화벽</text>
                <!-- 부재들 -->
                ${P.join('\n                ')}
                <!-- 개구부 방향 -->
                ${arrowTxt}
                <!-- 치수선 -->
                ${dims}
                <!-- 번호 라벨 -->
                ${labels}
                <!-- 범례 -->
                <text x="${svgW / 2}" y="${svgH - 10}" fill="#94a3b8" font-size="10" font-weight="900" text-anchor="middle" font-family="Pretendard">①마감재 SUS t=${g.trimThick||1.2} ②본체 EGI t=${g.thickness} ③C형 ④벽연형 — GUIDE RAIL 철재스라트</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 p = PRODUCTS[S.productType];
        const D = b.depth, H = b.height;
        const fb = b.frontBottom || 50; // 전면 밑치수
        const rw = b.railWidth || 70;  // 레일폭
        // 점검구 치수 (고정치수 제외한 나머지 = 가변)
        // 밑면: D - frontBottom - railWidth - 50(린텔선반) - 20(린텔훅) - 20(코너훅) - 50(코너선반)
        const bDoorW = D - fb - rw - 50 - 20 - 20 - 50;
        // 후면: H - 50(상부코너벽) - 20(상부립) - 20(하부립) - 50(하부코너벽)
        const rDoorH = H - 50 - 20 - 20 - 50;
        const tabSz = 13;                        // 점검구 스크류 탭
        const flgSz = 17;                        // 리시빙 플랜지
        const sc = Math.min(480 / D, 520 / H);
        const pad = 80;
        const sD = D*sc, sH = H*sc;
        const svgW = sD + pad*2 + 140, svgH = sH + pad*2 + 70;
        const ox = pad + 65, oy = pad + 30;
        const vt = Math.max(2, (b.thickness||1.55)*sc*1.5);
        const pf='#4b5563', ps='#6b7280', ff='#374151';
        const doorFill='rgba(139,92,52,0.35)', doorStroke='#d97706';

        // 절곡 치수 (스케일 적용)
        const f13=tabSz*sc, f17=flgSz*sc, f50=(b.frontBottom||50)*sc, f55=55*sc, f20=20*sc, f15=15*sc;

        // 후면 점검구 위치 (높이 방향 가운데 정렬)
        const rTopH = Math.round((H - rDoorH) / 2); // 후면 상부 고정부 높이 (~70mm)
        const rBotH = H - rDoorH - rTopH;            // 후면 하부 고정부 높이
        const srTopH = rTopH*sc, srBotH = rBotH*sc, srDoorH = rDoorH*sc;

        // 밑면 점검구 위치 (깊이 방향 가운데 정렬)
        const bFrontW = Math.round((D - bDoorW) / 2); // 밑면 전면측 고정부 (~130mm)
        const bRearW = D - bDoorW - bFrontW;
        const sbFrontW = bFrontW*sc, sbRearW = bRearW*sc, sbDoorW = bDoorW*sc;

        // 레일 홀
        const railHoleW = (b.railWidth || (S.productType==='screen' ? 70 : 120))*sc;
        const railUp = 100*sc;

        // 샤프트 위치
        const shaftR = (b.shaftDia/2)*sc;
        const shaftCx = ox + sD*0.40;
        const shaftCy = oy + sH*0.50;
        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="22" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 측면 단면도 — 양면점검구</text>

            <!-- 내부 공간 배경 -->
            <rect x="${ox+vt}" y="${oy+vt}" width="${sD-vt*2}" height="${sH-vt*2}" fill="rgba(55,65,81,0.10)" rx="2"/>

            <!-- ━━━━━ 고정 판재 (회색) ━━━━━ -->
            <!-- ① 케이스 전면판 절곡 프로파일 (7세그먼트, 전개길이 ${(p.sb.frontPanel||[]).reduce((a,b)=>a+b,0)}mm) -->
            ${(() => {
                const seg = (p.sb.frontPanel || [17,55,50,380,55,15,20]).map(v => v*sc);
                seg[2] = (b.frontBottom || 50) * sc; // 전면 밑치수 가변 적용
                // 상부: 55→(선반) 15↓(스텝) 20→(커버 받침 립) — 커버가 올라가는 파임 형태
                // 하부: frontBottom→, 55↑, 17← (J-훅)
                const O = [
                    [ox+seg[4]+seg[6], oy+seg[5]],            // 0: Seg7 끝 (커버 받침 립 끝)
                    [ox+seg[4],        oy+seg[5]],             // 1: Seg6 하단 / Seg7 시작
                    [ox+seg[4],        oy],                     // 2: Seg5 끝 / Seg6 상단 (55mm 선반)
                    [ox,               oy],                     // 3: 본체 상단
                    [ox,               oy+sH],                  // 4: 본체 하단
                    [ox+seg[2],        oy+sH],                 // 5: Seg3 끝 (50mm→)
                    [ox+seg[2],        oy+sH-seg[1]],          // 6: Seg2 상단 (55mm↑)
                    [ox+seg[2]-seg[0], oy+sH-seg[1]],         // 7: Seg1 끝 (17mm←)
                ];
                const I = [
                    [ox+seg[4]+seg[6], oy+seg[5]-vt],          // 0: Seg7 내곽
                    [ox+seg[4]-vt,     oy+seg[5]-vt],           // 1: Seg6/Seg7 내곽 코너
                    [ox+seg[4]-vt,     oy+vt],                   // 2: Seg5/Seg6 내곽 코너
                    [ox+vt,            oy+vt],                    // 3: 본체/Seg5 내곽 코너
                    [ox+vt,            oy+sH-vt],                 // 4: 본체/Seg3 내곽 코너
                    [ox+seg[2]-vt,     oy+sH-vt],                 // 5: Seg3/Seg2 내곽 코너
                    [ox+seg[2]-vt,     oy+sH-seg[1]+vt],          // 6: Seg2/Seg1 내곽 코너
                    [ox+seg[2]-seg[0], oy+sH-seg[1]+vt],         // 7: Seg1 내곽 끝
                ];
                const outer = O.map(p=>p.join(',')).join(' L');
                const inner = [I[7],I[6],I[5],I[4],I[3],I[2],I[1],I[0]].map(p=>p.join(',')).join(' L');
                const fpCol = '#60a5fa';
                const lbls = [
                    { x:(O[3][0]+O[2][0])/2, y:oy-6, t:'55→' },                    // Seg5
                    { x:O[1][0]+10, y:(O[2][1]+O[1][1])/2, t:'15↓' },               // Seg6
                    { x:(O[1][0]+O[0][0])/2, y:O[0][1]+10, t:'20→' },               // Seg7
                    { x:(O[4][0]+O[5][0])/2, y:O[4][1]+12, t:'50→' },               // Seg3
                    { x:O[5][0]+10, y:(O[5][1]+O[6][1])/2, t:'55↑' },               // Seg2
                    { x:(O[6][0]+O[7][0])/2, y:O[7][1]-6, t:'←17' },                // Seg1
                ];
                return `
                    <path d="M${outer} L${inner} Z" fill="${pf}" stroke="${ps}" stroke-width="1.2" opacity="0.95"/>
                    ${lbls.map(l => `<text x="${l.x}" y="${l.y}" fill="${fpCol}" font-size="7" font-weight="700" text-anchor="middle" font-family="Pretendard" opacity="0.7">${l.t}</text>`).join('\n                    ')}
                    <text x="${ox-28}" y="${oy+sH/2}" fill="#60a5fa" font-size="8" font-weight="700" text-anchor="middle" font-family="Pretendard" transform="rotate(-90,${ox-28},${oy+sH/2})" opacity="0.6">전면판 전개 ${(p.sb.frontPanel||[]).reduce((a,b)=>a+b,0)}mm</text>
                `;
            })()}

            <!-- ② 상부 커버 (389mm = D-55-50-6, 전면판 Seg5 뒤에서 시작) -->
            ${(() => {
                const coverW = (D - 55 - 50 - 6) * sc; // 389mm
                const coverX = ox + 55*sc; // Seg5(55mm) 뒤에서 시작
                return `
                    <rect x="${coverX}" y="${oy + f15 - vt}" width="${coverW}" height="${vt}" fill="#546e7a" stroke="#78909c" stroke-width="1.2"/>
                    <text x="${coverX + coverW/2}" y="${oy + f15 - vt - 4}" fill="#78909c" font-size="7" font-weight="700" text-anchor="middle" font-family="Pretendard">상부 커버 (${D-55-50-6}mm)</text>
                `;
            })()}

            <!-- ━━━━━ 후면벽 구조 (doorDir에 따라 분기) ━━━━━ -->
            ${(() => {
                const c20=20*sc, c15=15*sc, c50=50*sc;
                const cx = ox + sD - vt;
                const cCol = '#8b6c5c', cStr = '#6d4c3d';

                if (b.doorDir === 'bottom') {
                    // ── 밑면 전용: 후면벽 연속 절곡판 (상부훅+380mm벽+하부훅) ──
                    return `
                        <!-- 후면벽 본체 (380mm 전체 높이) -->
                        <rect x="${cx}" y="${oy}" width="${vt}" height="${sH}" fill="${cCol}" stroke="${cStr}" stroke-width="1" opacity="0.9"/>
                        <!-- 상부 선반 (50mm ←) -->
                        <rect x="${cx-c50}" y="${oy}" width="${c50+vt}" height="${vt}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                        <!-- 상부 스텝 (15mm ↓) -->
                        <rect x="${cx-c50}" y="${oy+vt}" width="${vt*0.7}" height="${c15}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                        <!-- 상부 립 (20mm ←) -->
                        <rect x="${cx-c50-c20}" y="${oy+c15}" width="${c20+vt}" height="${vt*0.7}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                        <!-- 하부 선반 (50mm ←) -->
                        <rect x="${cx-c50}" y="${oy+sH-vt}" width="${c50+vt}" height="${vt}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                        <!-- 하부 스텝 (15mm ↑) -->
                        <rect x="${cx-c50}" y="${oy+sH-vt-c15}" width="${vt*0.7}" height="${c15}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                        <!-- 하부 립 (20mm ←) -->
                        <rect x="${cx-c50-c20}" y="${oy+sH-c15-vt}" width="${c20+vt}" height="${vt*0.7}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                        <text x="${cx-c50/2}" y="${oy+sH/2}" fill="${cCol}" font-size="7" font-weight="700" text-anchor="middle" font-family="Pretendard" opacity="0.6" transform="rotate(-90,${cx-c50/2},${oy+sH/2})">후면벽 (연속)</text>
                    `;
                }

                // ── 양면(dual) / 후면(rear): 상부코너 + 후면점검구 + 밑면코너 ──
                const ct = oy, cy = oy + sH;
                return `
                    <!-- ③ 상부 코너부 -->
                    <rect x="${cx-c50}" y="${ct}" width="${c50+vt}" height="${vt}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx}" y="${ct}" width="${vt}" height="${c50}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c50}" y="${ct+vt}" width="${vt*0.7}" height="${c15}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c50-c20}" y="${ct+c15}" width="${c20+vt}" height="${vt*0.7}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c15}" y="${ct+c50}" width="${c15}" height="${vt*0.7}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c15}" y="${ct+c50}" width="${vt*0.7}" height="${c20}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <text x="${cx-c50/2}" y="${ct+c50/2}" fill="${cCol}" font-size="6" font-weight="700" text-anchor="middle" font-family="Pretendard" opacity="0.6">상부코너</text>
                    <!-- ⑥ 밑면 코너부 -->
                    <rect x="${cx}" y="${cy-c50}" width="${vt}" height="${c50}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c15}" y="${cy-c50}" width="${c15}" height="${vt*0.7}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c15}" y="${cy-c50-c20}" width="${vt*0.7}" height="${c20}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c50}" y="${cy-vt}" width="${c50+vt}" height="${vt}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    ${b.doorDir !== 'rear' ? `
                    <rect x="${cx-c50}" y="${cy-c15-vt}" width="${vt*0.7}" height="${c15+vt}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${cx-c50-c20}" y="${cy-c15-vt}" width="${c20+vt}" height="${vt*0.7}" fill="${cCol}" stroke="${cStr}" stroke-width="0.8" opacity="0.85"/>
                    ` : ''}
                    <text x="${cx-c50/2}" y="${cy-c50/2}" fill="${cCol}" font-size="6" font-weight="700" text-anchor="middle" font-family="Pretendard" opacity="0.6">코너부</text>
                    <!-- ⑦ 후면 점검구 절곡판 -->
                    <rect x="${cx}" y="${oy+srTopH}" width="${vt}" height="${srDoorH}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1.5" stroke-dasharray="6 3"/>
                    <rect x="${cx-f13}" y="${oy+srTopH}" width="${f13+vt}" height="${vt*0.7}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <rect x="${cx-f13}" y="${oy+srTopH-f17}" width="${vt*0.7}" height="${f17}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <rect x="${cx-f13}" y="${oy+srTopH+srDoorH-vt*0.7}" width="${f13+vt}" height="${vt*0.7}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <rect x="${cx-f13}" y="${oy+srTopH+srDoorH}" width="${vt*0.7}" height="${f17}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <text x="${cx+vt+15}" y="${oy+srTopH+srDoorH/2-4}" fill="${doorStroke}" font-size="9" font-weight="700" text-anchor="start" font-family="Pretendard">후면</text>
                    <text x="${cx+vt+15}" y="${oy+srTopH+srDoorH/2+8}" fill="${doorStroke}" font-size="8" text-anchor="start" font-family="Pretendard" opacity="0.7">점검구</text>
                `;
            })()}

            <!-- ━━━━━ 밑면 구조 (doorDir에 따라 분기) ━━━━━ -->
            ${(() => {
                const brkCol = '#7c9c6b', brkStroke = '#5a7a4a';
                const dy = oy + sH;
                const rhX = ox + f50;
                const rhW = railHoleW;

                if (b.doorDir === 'rear') {
                    // ── 후면 전용: 밑면 연속판 (전면판 J-훅 + 레일개구 + 연속 밑면) ──
                    const c20=20*sc, c15=15*sc, c50=50*sc;
                    const bottomLen = sD - f50 - rhW; // 린텔위치~후면벽
                    return `
                        <!-- 레일 홀 -->
                        <rect x="${rhX}" y="${dy-vt}" width="${rhW}" height="${vt}" fill="rgba(100,116,139,0.2)" stroke="#64748b" stroke-width="1" stroke-dasharray="3 2" rx="1"/>
                        <rect x="${rhX}" y="${dy-railUp}" width="${rhW}" height="${railUp-vt}" fill="rgba(100,116,139,0.08)" stroke="#64748b" stroke-width="0.8" stroke-dasharray="4 2" rx="1"/>
                        <text x="${rhX+rhW/2}" y="${dy-railUp/2+4}" fill="#64748b" font-size="7" font-weight="700" text-anchor="middle" font-family="Pretendard">레일</text>
                        <!-- 밑면 연속판 (린텔벽~후면벽, 점검구 없음) -->
                        <rect x="${rhX+rhW}" y="${dy-vt}" width="${bottomLen}" height="${vt}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="1" opacity="0.9"/>
                        <!-- 린텔측 상향 훅 (55벽+30립) -->
                        <rect x="${rhX+rhW}" y="${dy-55*sc}" width="${vt}" height="${55*sc}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="0.8" opacity="0.85"/>
                        <rect x="${rhX+rhW}" y="${dy-55*sc}" width="${30*sc}" height="${vt}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="0.8" opacity="0.85"/>
                        <!-- 후면 전용: 중간 훅 없음 (하나의 연속 절곡물) -->
                        <text x="${ox+sD/2}" y="${dy+12}" fill="${brkCol}" font-size="7" font-weight="700" text-anchor="middle" font-family="Pretendard" opacity="0.6">밑면 (연속)</text>
                    `;
                }

                // ── 양면(dual) / 밑면(bottom): 린텔 + 밑면 점검구 + 코너부 밑면선반 ──
                const b20=20*sc, b15=15*sc, b50b=50*sc, b55=55*sc, b30=30*sc;
                const lintelX = ox + f50 + rhW;
                const lintelShelfEnd = lintelX + b50b;
                const lintelHookEnd = lintelShelfEnd + b20;
                const doorMainSpan = bDoorW;
                const dw = doorMainSpan * sc;
                const df17 = f17, df13 = f13;
                const fy = dy - f15;
                return `
                    <!-- 레일 홀 -->
                    <rect x="${rhX}" y="${dy-vt}" width="${rhW}" height="${vt}" fill="rgba(100,116,139,0.2)" stroke="#64748b" stroke-width="1" stroke-dasharray="3 2" rx="1"/>
                    <rect x="${rhX}" y="${dy-railUp}" width="${rhW}" height="${railUp-vt}" fill="rgba(100,116,139,0.08)" stroke="#64748b" stroke-width="0.8" stroke-dasharray="4 2" rx="1"/>
                    <text x="${rhX+rhW/2}" y="${dy-railUp/2+4}" fill="#64748b" font-size="7" font-weight="700" text-anchor="middle" font-family="Pretendard">레일</text>
                    <!-- 린텔 -->
                    <rect x="${lintelX}" y="${dy-b55}" width="${vt}" height="${b55}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${lintelX}" y="${dy-b55}" width="${b30}" height="${vt}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${lintelX}" y="${dy-vt}" width="${b50b}" height="${vt}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${lintelX+b50b}" y="${dy-b15-vt}" width="${vt}" height="${b15+vt}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="0.8" opacity="0.85"/>
                    <rect x="${lintelX+b50b}" y="${dy-b15-vt}" width="${b20}" height="${vt}" fill="${brkCol}" stroke="${brkStroke}" stroke-width="0.8" opacity="0.85"/>
                    <text x="${lintelX+b30/2}" y="${dy-b55/2}" fill="${brkCol}" font-size="6" font-weight="700" text-anchor="middle" font-family="Pretendard" opacity="0.6">린텔</text>
                    <!-- 밑면 점검구 -->
                    <rect x="${lintelHookEnd}" y="${fy+df13}" width="${dw}" height="${vt}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1.5" stroke-dasharray="6 3"/>
                    <rect x="${lintelHookEnd}" y="${fy}" width="${vt*0.7}" height="${df13+vt}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <rect x="${lintelHookEnd-df17}" y="${fy}" width="${df17+vt*0.3}" height="${vt*0.7}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <rect x="${lintelHookEnd+dw-vt*0.7}" y="${fy}" width="${vt*0.7}" height="${df13+vt}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <rect x="${lintelHookEnd+dw-vt*0.3}" y="${fy}" width="${df17+vt*0.3}" height="${vt*0.7}" fill="${doorFill}" stroke="${doorStroke}" stroke-width="1" stroke-dasharray="4 2"/>
                    <line x1="${lintelHookEnd}" y1="${fy+df13+vt+8}" x2="${lintelHookEnd+dw}" y2="${fy+df13+vt+8}" stroke="${doorStroke}" stroke-width="0.8"/>
                    <line x1="${lintelHookEnd}" y1="${fy+df13+vt+3}" x2="${lintelHookEnd}" y2="${fy+df13+vt+13}" stroke="${doorStroke}" stroke-width="0.5"/>
                    <line x1="${lintelHookEnd+dw}" y1="${fy+df13+vt+3}" x2="${lintelHookEnd+dw}" y2="${fy+df13+vt+13}" stroke="${doorStroke}" stroke-width="0.5"/>
                    <text x="${lintelHookEnd+dw/2}" y="${fy+df13+vt+22}" fill="${doorStroke}" font-size="10" font-weight="900" text-anchor="middle" font-family="Pretendard">밑면 점검구 ${doorMainSpan}</text>
                `;
            })()}

            <!-- ━━━━━ 슬랫 경로 (레일홀 → 상부 → 샤프트 시계방향 감김) ━━━━━ -->
            ${(() => {
                const railCx = ox + f50 + railHoleW / 2; // 레일 개구 중앙
                const rollTopY = shaftCy - rollR;
                return `
                    <!-- 케이스 외부: 슬랫 하강 -->
                    <line x1="${railCx}" y1="${oy+sH}" x2="${railCx}" y2="${oy+sH+20}" stroke="#f59e0b" stroke-width="2" stroke-dasharray="5 3" opacity="0.5"/>
                    <!-- 케이스 내부: 레일홀에서 샤프트 롤 좌측까지 대각선 직선 (팽팽한 천) -->
                    <line x1="${railCx}" y1="${oy+sH-vt}" x2="${shaftCx-rollR}" y2="${shaftCy}" stroke="#f59e0b" stroke-width="2.5" stroke-dasharray="5 3" opacity="0.5"/>
                    <text x="${railCx+12}" y="${oy+sH+18}" fill="#94a3b8" font-size="8" font-weight="700" font-family="Pretendard">↓ 슬랫</text>
                `;
            })()}

            <!-- ━━━━━ 내부 구성품 ━━━━━ -->
            ${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"/>
            ` : ''}
            ${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('')}
            ` : ''}
            ${b.showMotor ? (() => {
                const mR = shaftR * 1.1;
                const gap = rollR + mR + 25*sc;
                const mCx = shaftCx + gap;
                const mCy = shaftCy;
                const sprS = shaftR * 0.35; // 샤프트 스프로켓
                const sprM = mR * 0.4;      // 모터 스프로켓
                return `
                <!-- 모터 본체 -->
                <circle cx="${mCx}" cy="${mCy}" r="${mR}" fill="#2563eb" opacity="0.25" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="4 2"/>
                <text x="${mCx}" y="${mCy+3}" fill="#3b82f6" font-size="8" font-weight="900" text-anchor="middle" font-family="Pretendard" opacity="0.6">M</text>
                <!-- 스프로켓 (샤프트측 + 모터측) -->
                <circle cx="${shaftCx}" cy="${shaftCy}" r="${sprS}" fill="none" stroke="#60a5fa" stroke-width="1.5" opacity="0.6"/>
                <circle cx="${mCx}" cy="${mCy}" r="${sprM}" fill="none" stroke="#60a5fa" stroke-width="1.5" opacity="0.6"/>
                <!-- 체인 루프 (스프로켓 감싸는 벨트 형태) -->
                <path d="M${shaftCx},${shaftCy-sprS} L${mCx},${mCy-sprM} A${sprM},${sprM} 0 0 1 ${mCx},${mCy+sprM} L${shaftCx},${shaftCy+sprS} A${sprS},${sprS} 0 0 1 ${shaftCx},${shaftCy-sprS} Z" fill="rgba(96,165,250,0.08)" stroke="#60a5fa" stroke-width="1.5" stroke-dasharray="4 2" opacity="0.5"/>
                `;
            })() : ''}

            <!-- ━━━━━ 치수선 ━━━━━ -->
            <!-- 깊이 (상단) -->
            <line x1="${ox}" y1="${oy-15}" x2="${ox+sD}" y2="${oy-15}" stroke="#3b82f6" stroke-width="1"/>
            <line x1="${ox}" y1="${oy-20}" x2="${ox}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>
            <line x1="${ox+sD}" y1="${oy-20}" x2="${ox+sD}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>
            <text x="${ox+sD/2}" y="${oy-22}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">${D} × ${H}</text>
            <!-- 전체 높이 (좌측) -->
            <line x1="${ox-20}" y1="${oy}" x2="${ox-20}" y2="${oy+sH}" stroke="#3b82f6" stroke-width="1"/>
            <line x1="${ox-25}" y1="${oy}" x2="${ox-15}" y2="${oy}" stroke="#3b82f6" stroke-width="0.5"/>
            <line x1="${ox-25}" y1="${oy+sH}" x2="${ox-15}" y2="${oy+sH}" stroke="#3b82f6" stroke-width="0.5"/>
            <text x="${ox-28}" y="${oy+sH/2+4}" fill="#3b82f6" font-size="10" font-weight="700" text-anchor="end" font-family="Pretendard">${H}</text>
            <!-- 후면 점검구 높이 (우측 1단, 양면/후면 모드만 표시) -->
            ${b.doorDir !== 'bottom' ? `
            <line x1="${ox+sD+15}" y1="${oy+srTopH}" x2="${ox+sD+15}" y2="${oy+srTopH+srDoorH}" stroke="${doorStroke}" stroke-width="1"/>
            <line x1="${ox+sD+10}" y1="${oy+srTopH}" x2="${ox+sD+20}" y2="${oy+srTopH}" stroke="${doorStroke}" stroke-width="0.5"/>
            <line x1="${ox+sD+10}" y1="${oy+srTopH+srDoorH}" x2="${ox+sD+20}" y2="${oy+srTopH+srDoorH}" stroke="${doorStroke}" stroke-width="0.5"/>
            <text x="${ox+sD+25}" y="${oy+srTopH+srDoorH/2+4}" fill="${doorStroke}" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">${rDoorH}</text>
            ` : ''}
            <!-- 밑면 점검구 치수: 절곡판 IIFE 내에서 표시 -->

            <!-- 측면 라벨 -->
            <text x="${ox-8}" y="${oy+sH/2}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard" transform="rotate(-90,${ox-8},${oy+sH/2})">전면 (실내)</text>
            <text x="${ox+sD+8}" y="${oy+sH/2}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard" transform="rotate(90,${ox+sD+8},${oy+sH/2})">후면 (벽측)</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.fsSet3dParam = function(key, v) {
        S.sb[key] = Number(v);
        // 셔터박스 탭 입력과 양방향 동기화
        const syncMap = { railWidth:'sbRailWidth', frontBottom:'sbFrontBottom', depth:'sbDepth', height:'sbHeight', shaftDia:'sbShaftDia', thickness:'sbThickness' };
        if (syncMap[key] && $(syncMap[key])) $(syncMap[key]).value = v;
        fs3dBuild();
    };
    window.fsSetDoorDir = function(v) {
        S.sb.doorDir = v;
        if ($('sbDoorDir')) $('sbDoorDir').value = v;
        if ($('td3dDoorDir')) $('td3dDoorDir').value = v;
        if (S.tab === '3D') fs3dBuild(); else 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 (B키로 토글)
        const grid = new THREE.GridHelper(5000, 50, 0x334155, 0x1e293b);
        grid.position.y = 0;
        scene.add(grid);
        let floorGridRef = grid; // B키 토글용 참조

        // === TransformControls (클릭 선택 + 이동) ===
        transformCtrl = new THREE.TransformControls(camera, renderer.domElement);
        transformCtrl.setMode('translate');
        transformCtrl.setSize(0.8);
        scene.add(transformCtrl);

        // 드래그 중 OrbitControls 비활성화
        transformCtrl.addEventListener('dragging-changed', (e) => {
            controls.enabled = !e.value;
        });

        // 선택 HUD
        const selectHud = document.createElement('div');
        selectHud.className = 'fs-select-hud';
        selectHud.style.cssText = 'position:absolute;top:8px;left:8px;display:none;background:rgba(0,0,0,0.7);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;pointer-events:none;z-index:10;font-family:Pretendard,sans-serif;';
        container.appendChild(selectHud);

        function updateSelectHud() {
            const hiddenInfo = hiddenKeys.size > 0
                ? `<span style="color:#f59e0b;margin-left:8px;">${hiddenKeys.size}개 감춤</span> <span style="opacity:0.5">Alt+H:전체 표시</span>`
                : '';
            if (!selectedKey) {
                if (hiddenKeys.size > 0) {
                    selectHud.innerHTML = hiddenInfo;
                    selectHud.style.display = 'block';
                } else {
                    selectHud.style.display = 'none';
                }
                return;
            }
            const label = meshLabels[selectedKey] || selectedKey;
            const axisAll = transformCtrl.showX && transformCtrl.showY && transformCtrl.showZ;
            let axisText = '전체 축';
            let axisColor = '#fff';
            if (!axisAll) {
                if (transformCtrl.showX) { axisText = 'X축'; axisColor = '#ef4444'; }
                if (transformCtrl.showY) { axisText = 'Y축'; axisColor = '#22c55e'; }
                if (transformCtrl.showZ) { axisText = 'Z축'; axisColor = '#3b82f6'; }
            }
            selectHud.innerHTML = `<b>${label}</b> 선택 · <span style="color:${axisColor}">${axisText}</span> 이동 <span style="opacity:0.5">| 화살표 기즈모를 드래그하여 이동 · X Y Z:축 · H:감추기 · ESC:해제</span>${hiddenInfo}`;
            selectHud.style.display = 'block';
        }

        function selectMesh(key) {
            deselectMesh();
            selectedKey = key;
            const obj = meshes[key];
            transformCtrl.attach(obj);
            transformCtrl.showX = true;
            transformCtrl.showY = true;
            transformCtrl.showZ = true;
            // 선택 박스 (녹색 바운딩박스)
            selectionBox = new THREE.BoxHelper(obj, 0x22c55e);
            scene.add(selectionBox);
            updateSelectHud();
        }

        function deselectMesh() {
            if (selectionBox) { scene.remove(selectionBox); selectionBox = null; }
            if (selectedKey) { transformCtrl.detach(); selectedKey = null; }
            updateSelectHud();
        }

        // 클릭 감지 (드래그와 구분)
        let clickStart = null;
        renderer.domElement.addEventListener('pointerdown', (e) => {
            if (e.button === 0) clickStart = { x: e.clientX, y: e.clientY };
        });
        renderer.domElement.addEventListener('pointerup', (e) => {
            if (!clickStart || e.button !== 0) return;
            const dx = e.clientX - clickStart.x, dy = e.clientY - clickStart.y;
            clickStart = null;
            if (Math.sqrt(dx * dx + dy * dy) > 4) return; // 드래그면 무시
            if (transformCtrl.dragging) return; // 기즈모 조작 중이면 무시

            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.entries(meshes).filter(([k, m]) => m && !hiddenKeys.has(k)).map(([, m]) => m);
            const intersects = raycaster.intersectObjects(sceneObjects, true);

            if (intersects.length > 0) {
                const key = findMeshKey(intersects[0].object);
                if (key && meshes[key]) selectMesh(key);
            } else {
                deselectMesh();
            }
        });

        // 키보드 단축키 (축 제한 + 감추기)
        document.addEventListener('keydown', (e) => {
            if (S.tab !== '3D') return;
            const k = e.key.toLowerCase();

            // Alt+H: 감춘 요소 전체 표시
            if (k === 'h' && e.altKey) {
                e.preventDefault();
                if (hiddenKeys.size === 0) return;
                hiddenKeys.forEach(hk => {
                    if (meshes[hk]) meshes[hk].visible = true;
                    // S.td.show + 토글 UI 복원
                    if (hk in S.td.show) {
                        S.td.show[hk] = true;
                        document.querySelectorAll(`[onclick*="fsToggle3d(this,'${hk}')"]`).forEach(el => el.classList.add('active'));
                    }
                });
                hiddenKeys.clear();
                updateSelectHud();
                return;
            }

            // B: 바닥 그리드 토글
            if (k === 'b' && !e.altKey && !e.ctrlKey) {
                if (floorGridRef) floorGridRef.visible = !floorGridRef.visible;
                return;
            }

            // H: 선택된 요소 감추기 (토글 UI 연동)
            if (k === 'h' && selectedKey) {
                const hideKey = selectedKey;
                deselectMesh();
                if (meshes[hideKey]) {
                    meshes[hideKey].visible = false;
                    hiddenKeys.add(hideKey);
                    // S.td.show 상태 + 토글 UI 동기화
                    if (hideKey in S.td.show) {
                        S.td.show[hideKey] = false;
                        document.querySelectorAll(`[onclick*="fsToggle3d(this,'${hideKey}')"]`).forEach(el => el.classList.remove('active'));
                    }
                    // 슬랫 숨기면 감긴 슬랫도 연동
                    if (hideKey === 'slats') {
                        S.td.show.slatRoll = false;
                        if (meshes.slatRoll) meshes.slatRoll.visible = false;
                    }
                }
                updateSelectHud();
                return;
            }

            // 아래는 선택된 상태에서만 동작
            if (!selectedKey) return;
            if (k === 'x') {
                transformCtrl.showX = true; transformCtrl.showY = false; transformCtrl.showZ = false;
                updateSelectHud();
            } else if (k === 'y') {
                transformCtrl.showX = false; transformCtrl.showY = true; transformCtrl.showZ = false;
                updateSelectHud();
            } else if (k === 'z') {
                transformCtrl.showX = false; transformCtrl.showY = false; transformCtrl.showZ = true;
                updateSelectHud();
            } else if (k === 'a' || k === ' ') {
                transformCtrl.showX = true; transformCtrl.showY = true; transformCtrl.showZ = true;
                updateSelectHud();
            } else if (k === 'escape') {
                deselectMesh();
            }
        });

        function animate() {
            animId = requestAnimationFrame(animate);
            controls.update();
            if (selectionBox) selectionBox.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 viewPanel = document.createElement('div');
        viewPanel.style.cssText = 'position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:10;';
        const viewPresets = [
            { label: '정면', icon: '⬜', key: 'front' },
            { label: '평면', icon: '⬒', key: 'top' },
            { label: '우측', icon: '▷', key: 'right' },
            { label: '좌측', icon: '◁', key: 'left' },
            { label: '배면', icon: '⬛', key: 'back' },
            { label: '투시', icon: '◈', key: 'persp' },
        ];
        viewPresets.forEach(vp => {
            const btn = document.createElement('button');
            btn.style.cssText = 'padding:5px 10px;background:rgba(30,41,59,0.85);border:1px solid rgba(100,116,139,0.4);color:#94a3b8;font-size:11px;font-weight:700;border-radius:6px;cursor:pointer;font-family:Pretendard,sans-serif;transition:all 0.15s;';
            btn.textContent = vp.label;
            btn.onmouseenter = () => { btn.style.background = 'rgba(59,130,246,0.3)'; btn.style.color = '#fff'; btn.style.borderColor = '#3b82f6'; };
            btn.onmouseleave = () => { btn.style.background = 'rgba(30,41,59,0.85)'; btn.style.color = '#94a3b8'; btn.style.borderColor = 'rgba(100,116,139,0.4)'; };
            btn.onclick = () => fs3dSetView(vp.key);
            viewPanel.appendChild(btn);
        });
        container.appendChild(viewPanel);

        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.entries(meshes).filter(([k, m]) => m && !hiddenKeys.has(k)).map(([, m]) => m);
            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;
        // 선택/숨기기 해제 (리빌드 시 메시가 교체되므로)
        if (transformCtrl) transformCtrl.detach();
        if (selectionBox) { scene.remove(selectionBox); selectionBox = null; }
        selectedKey = null;
        hiddenKeys.clear();
        // 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 doorH = b.height - frontH; // 점검구 높이 (스크린:140, 철재:140)
        const junctionY = b.height - frontH; // 상부판-점검구 접합부 Y위치

        const boxMat = new THREE.MeshStandardMaterial({ color: 0x374151, transparent: true, opacity: S.td.caseOpacity, side: THREE.DoubleSide });
        const doorMat = new THREE.MeshStandardMaterial({ color: 0x5c4833, transparent: true, opacity: Math.min(S.td.caseOpacity * 0.85, 1), side: THREE.DoubleSide });
        const boxEdgeMat = new THREE.LineBasicMaterial({ color: 0x94a3b8 });
        const doorEdgeMat = new THREE.LineBasicMaterial({ color: 0xd97706 });
        meshes.case = new THREE.Group();
        meshes.case.position.set(0, H, boxCenterZ);

        // 철판 생성 헬퍼 (mat, eMat: 선택적 재질 오버라이드)
        function addPlate(w, h, d, x, y, z, mat, eMat) {
            const geo = new THREE.BoxGeometry(w, h, d);
            const m = new THREE.Mesh(geo, mat || boxMat);
            m.position.set(x, y, z);
            meshes.case.add(m);
            const edges = new THREE.EdgesGeometry(geo);
            m.add(new THREE.LineSegments(edges, eMat || boxEdgeMat));
        }

        const isDualDoor = !!p.sb.rearDoorH; // 양면점검구 여부 (screen/wire)

        if (isDualDoor) {
            // ━━━━━ 양면점검구 구조 (screen, wire slat) ━━━━━
            const fbVal = b.frontBottom || 50;
            const rwVal = b.railWidth || 70;
            const bDoorW = b.depth - fbVal - rwVal - 50 - 20 - 20 - 50; // 밑면 점검구 (가변)
            const rDoorH = b.height - 50 - 20 - 20 - 50; // 후면 점검구 (가변)
            const flgSz = 17;  // 리시빙 플랜지 (고정부)
            const tabSz = 13;  // 스크류 탭 (점검구)
            const retCorner = 50; // 상판 후면측 코너 리턴

            // 후면: 높이 방향 가운데 정렬
            const rTopH = Math.round((b.height - rDoorH) / 2);
            const rBotH = b.height - rDoorH - rTopH;

            // 밑면: 깊이 방향 가운데 정렬
            const bFrontW = Math.round((b.depth - bDoorW) / 2);
            const bRearW = b.depth - bDoorW - bFrontW;

            // ── ① 케이스 전면판 절곡 프로파일 ──
            const fpSeg = [...(p.sb.frontPanel || [17, 55, 50, 380, 55, 15, 20])];
            fpSeg[2] = b.frontBottom || 50; // 전면 밑치수 가변 적용
            const frontZ = b.depth / 2;
            // Seg4: 본체 (전체 높이 수직면)
            addPlate(W1, b.height, pt, 0, b.height / 2, frontZ - pt / 2);
            // ── 상부: 55→(선반) 15↓(스텝) 20→(커버 받침 립) ──
            // Seg5: 55mm → (케이스 상단에서 내향, 커버 선반)
            addPlate(W1, pt, fpSeg[4], 0, b.height - pt / 2, frontZ - fpSeg[4] / 2);
            // Seg6: 15mm ↓ (Seg5 내측 끝에서 하향, 커버 두께 스텝)
            addPlate(W1, fpSeg[5], pt, 0, b.height - fpSeg[5] / 2, frontZ - fpSeg[4] + pt / 2);
            // Seg7: 20mm → (Seg6 하단에서 더 내향, 커버 받침 립)
            addPlate(W1, pt, fpSeg[6], 0, b.height - fpSeg[5] + pt / 2, frontZ - fpSeg[4] - fpSeg[6] / 2);
            // ── 하부: J-훅 (50→ 내향, 55↑ 상향, 17← 전면복귀) ──
            // Seg3: 50mm → (케이스 바닥에서 내향)
            addPlate(W1, pt, fpSeg[2], 0, pt / 2, frontZ - fpSeg[2] / 2);
            // Seg2: 55mm ↑ (Seg3 끝에서 케이스 내부 위로)
            addPlate(W1, fpSeg[1], pt, 0, fpSeg[1] / 2, frontZ - fpSeg[2] + pt / 2);
            // Seg1: 17mm ← (Seg2 상단에서 전면 방향으로 복귀)
            addPlate(W1, pt, fpSeg[0], 0, fpSeg[1] - pt / 2, frontZ - fpSeg[2] + fpSeg[0] / 2);

            // ── 밑면레일연결절곡물 (린텔, 전면에서 70mm 레일 띄우고 위치) ──
            // 전면판 J-훅과 Y축 대칭, CCW: Seg1(20→)─Seg2(15↑)─Seg3(50←)─Seg4(55↑)─Seg5(30→)
            const brkMat = new THREE.MeshStandardMaterial({ color: 0x7c9c6b, transparent: true, opacity: S.td.caseOpacity, side: THREE.DoubleSide });
            const railW = b.railWidth || (S.productType === 'screen' ? 70 : 120);
            const brkZ = frontZ - fpSeg[2] - railW; // 전면판 Seg3(50) + 레일(70) 뒤
            // Seg4: 좌측벽 (55mm ↑, 밑면에서 위로, 린텔 메인벽)
            addPlate(W1, 55, pt, 0, 55 / 2, brkZ + pt / 2, brkMat);
            // Seg5: 상부립 (30mm → 내향, 벽 상단)
            addPlate(W1, pt, 30, 0, 55 - pt / 2, brkZ - 30 / 2, brkMat);
            // Seg3: 하부선반 (50mm → 내향, 밑면 레벨)
            addPlate(W1, pt, 50, 0, pt / 2, brkZ - 50 / 2, brkMat);
            // Seg2: 후크벽 (15mm ↑, 선반 내측 끝에서 상향, 케이스 내부로)
            addPlate(W1, 15, pt, 0, 15 / 2, brkZ - 50 - pt / 2, brkMat);
            // Seg1: 하부립 (20mm → 내향, 후크 상단에서)
            addPlate(W1, pt, 20, 0, 15 - pt / 2, brkZ - 50 - 20 / 2, brkMat);

            // ── 밑면 코너부 (6세그먼트: 20,15,50,50,15,20, 후면벽↔밑면 L-코너) ──
            const cornerMat = new THREE.MeshStandardMaterial({ color: 0x8b6c5c, transparent: true, opacity: S.td.caseOpacity, side: THREE.DoubleSide });
            const cornerZ = -b.depth / 2 + pt; // 후면벽 내측 Z
            // Seg3: 수직부 (50mm, 후면벽 내측 하부)
            addPlate(W1, 50, pt, 0, 50 / 2, cornerZ + pt / 2, cornerMat);
            // Seg1: 상부 립 (20mm ↑, 수직부 상단에서 상향)
            addPlate(W1, 20, pt * 0.7, 0, 50 + 20 / 2, cornerZ + pt / 2, cornerMat);
            // Seg2: 상부 스텝 (15mm → 내향, 수직부 상단)
            addPlate(W1, pt * 0.7, 15, 0, 50, cornerZ + pt + 15 / 2, cornerMat);
            // Seg4: 수평부 (50mm, 밑면 선반)
            addPlate(W1, pt, 50, 0, pt / 2, cornerZ + 50 / 2, cornerMat);
            // Seg5: 하부 스텝 (15mm ↑, 선반 내측 끝에서 상향)
            addPlate(W1, 15, pt * 0.7, 0, 15 / 2, cornerZ + 50 + pt / 2, cornerMat);
            // Seg6: 하부 립 (20mm → 내향, 점검구 우측 결합)
            addPlate(W1, pt * 0.7, 20, 0, 15, cornerZ + 50 + 20 / 2, cornerMat);

            // ── ② 상부 커버는 케이스 공통으로 아래에서 렌더링 ──

            const doorDir = b.doorDir || 'dual';
            const rearZ = -b.depth / 2 + pt / 2; // 후면벽 Z

            // ── 후면벽 구조 (doorDir 분기) ──
            if (doorDir === 'bottom') {
                // 밑면 전용: 후면벽 연속판 (상부훅+벽+하부훅)
                addPlate(W1, b.height, pt, 0, b.height / 2, rearZ); // 전체 높이 벽
                addPlate(W1, pt, 50, 0, b.height - pt / 2, rearZ + pt / 2 + 25); // 상부 선반
                addPlate(W1, pt, 50, 0, pt / 2, rearZ + pt / 2 + 25); // 하부 선반
            } else {
                // 양면/후면: 상부고정부 + 점검구 + 하부고정부
                addPlate(W1, rTopH, pt, 0, b.height - rTopH / 2, rearZ);
                addPlate(W1, rBotH, pt, 0, rBotH / 2, rearZ);
                // 후면 점검구 (탈착)
                addPlate(W1, rDoorH, pt, 0, rBotH + rDoorH / 2, rearZ, doorMat, doorEdgeMat);
            }

            // ── 좌우측판 ──
            addPlate(pt, b.height, b.depth, -W1 / 2 + pt / 2, b.height / 2, 0);
            addPlate(pt, b.height, b.depth,  W1 / 2 - pt / 2, b.height / 2, 0);

            // ── 밑면 구조 (doorDir 분기) ──
            const openW = railZSpan;
            if (doorDir === 'rear') {
                // 후면 전용: 밑면 연속판 (레일홀 후~후면벽)
                const contStart = frontZ - fpSeg[2] - railW;
                const contLen = b.depth / 2 + contStart;
                addPlate(W1, pt, contLen, 0, pt / 2, contStart - contLen / 2);
            } else {
                // 양면/밑면: 린텔~점검구~코너부 구조
                const solidFront = bFrontW - openW;
                if (solidFront > 0) addPlate(W1, pt, solidFront, 0, pt / 2, b.depth / 2 - solidFront / 2);
                addPlate(W1, pt, bRearW, 0, pt / 2, -b.depth / 2 + bRearW / 2);
                // 밑면 점검구 (탈착)
                addPlate(W1, pt, bDoorW, 0, pt / 2, b.depth / 2 - bFrontW - bDoorW / 2, doorMat, doorEdgeMat);
            }

        } else {
            // ━━━━━ 기존 전면 점검구 구조 (steel) ━━━━━
            const flangeBack = 55, flangeFront = 50, returnW = 50;

            // 후면판 (전체 높이)
            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);

            // 전면 상부판 (frontH)
            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);
            addPlate(W1, pt, returnW, 0, junctionY - pt / 2, b.depth / 2 - pt - returnW / 2);

            // 전면 점검구 (doorH, 탈착식)
            if (doorH > 0) {
                addPlate(W1, doorH, pt, 0, doorH / 2, b.depth / 2 - pt / 2, doorMat, doorEdgeMat);
                addPlate(W1, pt, returnW, 0, junctionY + pt / 2, b.depth / 2 - pt - returnW / 2, doorMat, doorEdgeMat);
            }

            // 좌우측판
            addPlate(pt, b.height, b.depth, -W1 / 2 + pt / 2, b.height / 2, 0);
            addPlate(pt, b.height, b.depth,  W1 / 2 - pt / 2, b.height / 2, 0);

            // 바닥판 (레일 개구부 제외)
            const frontLipD = 50, openW = railZSpan;
            const backLipD = b.depth - frontLipD - openW;
            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);
        }

        // ── 상부 커버 (절곡 없는 평판, 전면판 립 안쪽 10mm에 올라감) ──
        // 폭: W1 - 20 (양쪽 10mm 축소), 깊이: depth - 20 (양쪽 10mm 축소)
        // 중앙 정렬 → 전면에서 10mm, 후면에서 10mm 들어간 위치
        addPlate(W1 - 20, pt, b.depth - 20, 0, b.height + 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;    // 30mm 플랜지 (슬롯=outerW-2*fl=10mm)
                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();
                // 몸체(벽쪽) → 개구부(②쪽): SVG 도면과 일치하도록 벽쪽 body, 채널쪽 opening
                wcShape.moveTo(wcCenterX - wcBody / 2, wcY + wcLip);
                wcShape.lineTo(wcCenterX - wcBody / 2, wcY);
                wcShape.lineTo(wcCenterX - wcBody / 2 + rt, wcY);
                wcShape.lineTo(wcCenterX - wcBody / 2 + rt, wcY + wcLip - rt);
                wcShape.lineTo(wcCenterX + wcBody / 2 - rt, wcY + wcLip - rt);
                wcShape.lineTo(wcCenterX + wcBody / 2 - rt, wcY);
                wcShape.lineTo(wcCenterX + wcBody / 2, wcY);
                wcShape.lineTo(wcCenterX + wcBody / 2, wcY + wcLip);
                wcShape.lineTo(wcCenterX - wcBody / 2, wcY + wcLip);
                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();
                // 립이 안쪽(중앙)으로 향하도록 수정: SVG 도면과 일치
                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));

                // --- ② 플랜지 끝 10mm 절곡 (채널 안쪽으로, 각 플랜지 내측 끝) ---
                [[fl - rt, fl], [rw - fl, rw - fl + rt]].forEach(([x1, x2]) => {
                    const feLip = new THREE.Shape();
                    feLip.moveTo(x1, 0);
                    feLip.lineTo(x1, lp);
                    feLip.lineTo(x2, lp);
                    feLip.lineTo(x2, 0);
                    feLip.lineTo(x1, 0);
                    grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(feLip, railExtrude), railMat));
                });

                // --- ① 마감재 SUS 1.2T × 2장 (절곡: 10-11-110-30-15-15-15, J-hook 상하 대칭) ---
                const tT = g.trimThick || 1.2;
                const m1d = 30, m1e = 15, m1f = 15, m1g = 15, m1a = 10, m1b = 11;

                // 하단 트림 (X=0 외면) — cover + J-hook
                const bt = new THREE.Shape();
                bt.moveTo(-tT, sw + rt + tT);
                bt.lineTo(-tT, -lp);
                bt.lineTo(m1d, -lp);
                bt.lineTo(m1d, -lp + m1e);
                bt.lineTo(m1d - m1f, -lp + m1e);
                bt.lineTo(m1d - m1f, -lp + m1e + m1g);
                bt.lineTo(m1d - m1f + tT, -lp + m1e + m1g);
                bt.lineTo(m1d - m1f + tT, -lp + m1e - tT);
                bt.lineTo(m1d - tT, -lp + m1e - tT);
                bt.lineTo(m1d - tT, -lp + tT);
                bt.lineTo(0, -lp + tT);
                bt.lineTo(0, sw + rt + tT);
                bt.lineTo(-tT, sw + rt + tT);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(bt, railExtrude), railSusMat));
                // 하단 벽쪽 ㄴ자 (측면탭 11mm + 코킹립 10mm)
                const btW = new THREE.Shape();
                btW.moveTo(0, sw + rt);
                btW.lineTo(m1b + tT, sw + rt);
                btW.lineTo(m1b + tT, sw + rt + m1a);
                btW.lineTo(m1b, sw + rt + m1a);
                btW.lineTo(m1b, sw + rt + tT);
                btW.lineTo(0, sw + rt + tT);
                btW.lineTo(0, sw + rt);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(btW, railExtrude), railSusMat));

                // 상단 트림 (X=rw 외면) — cover + J-hook (대칭)
                const tt = new THREE.Shape();
                tt.moveTo(rw + tT, sw + rt + tT);
                tt.lineTo(rw + tT, -lp);
                tt.lineTo(rw - m1d, -lp);
                tt.lineTo(rw - m1d, -lp + m1e);
                tt.lineTo(rw - m1d + m1f, -lp + m1e);
                tt.lineTo(rw - m1d + m1f, -lp + m1e + m1g);
                tt.lineTo(rw - m1d + m1f - tT, -lp + m1e + m1g);
                tt.lineTo(rw - m1d + m1f - tT, -lp + m1e - tT);
                tt.lineTo(rw - m1d + tT, -lp + m1e - tT);
                tt.lineTo(rw - m1d + tT, -lp + tT);
                tt.lineTo(rw, -lp + tT);
                tt.lineTo(rw, sw + rt + tT);
                tt.lineTo(rw + tT, sw + rt + tT);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(tt, railExtrude), railSusMat));
                // 상단 벽쪽 ㄴ자 (대칭)
                const ttW = new THREE.Shape();
                ttW.moveTo(rw, sw + rt);
                ttW.lineTo(rw - m1b - tT, sw + rt);
                ttW.lineTo(rw - m1b - tT, sw + rt + m1a);
                ttW.lineTo(rw - m1b, sw + rt + m1a);
                ttW.lineTo(rw - m1b, sw + rt + tT);
                ttW.lineTo(rw, sw + rt + tT);
                ttW.lineTo(rw, sw + rt);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(ttW, railExtrude), railSusMat));

            } else {
                // ====== 철재스라트 가이드레일 (상세 프로파일, 2D 평면도 기준) ======
                // 3D 좌표: X=폭(0→rw=75), Y=깊이(0=개구부/실내→rd=벽)
                // 2D 평면도 → 3D 매핑: plan_y→X, plan_x→Y(반전)
                const bXO = (rw - 72) / 2;          // 본체 X 오프셋 (폭 중앙 정렬)
                const bYO = rd - 90 - 15;            // 본체 Y 오프셋 (벽쪽 15mm 여유)
                const tT = g.trimThick || 1.2;       // ① SUS 두께

                // 본체 세그먼트 생성 헬퍼 (평면도 좌표 → 3D Shape)
                function bSeg(px, py, pw, ph) {
                    const s = new THREE.Shape();
                    const x1 = bXO + py, x2 = bXO + py + ph;
                    const y1 = bYO + 90 - px - pw, y2 = bYO + 90 - px;
                    s.moveTo(x1,y1); s.lineTo(x2,y1); s.lineTo(x2,y2); s.lineTo(x1,y2); s.lineTo(x1,y1);
                    return s;
                }

                // ── ② 본체 EGI 1.55T (15세그먼트 절곡) ──
                const bodySegs = [
                    [0, 59.25, 10, rt],       // Seg1/15: 립 10mm
                    [0, 0, rt, 60],            // Seg2: 좌측벽 상부 60mm
                    [0, 0, 90, rt],            // Seg3: 상단 플랜지 90mm
                    [90-rt, 0, rt, 21],        // Seg4: 상부 립 21mm
                    [12, 21, 78, rt],          // Seg5: 상부 선반 78mm
                    [12, 21, rt, 30],          // Seg6: 내부 벽 30mm
                    [12, 51, 43, rt],          // Seg7: 하부 선반 43mm
                    [55-rt, 51, rt, 15],       // Seg8: 스텝↓ 15mm
                    [55, 66-rt, 20, rt],       // Seg9: 스텝→ 20mm
                    [75, 51, rt, 15],          // Seg10: 스텝↑ 15mm
                    [75, 51, 15, rt],          // Seg11: 스텝→ 15mm
                    [90-rt, 51, rt, 21],       // Seg12: 하부 립 21mm
                    [0, 72-rt, 90, rt],        // Seg13: 하단 플랜지 90mm
                    [0, 60, rt, 12],           // Seg14: 좌측벽 하부 12mm
                ];
                bodySegs.forEach(([px,py,pw,ph]) => {
                    grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(bSeg(px,py,pw,ph), railExtrude), railMat));
                });

                // ── ④ 벽연형 EGI 1.55T (ㄷ자 30-45-30) ──
                const w4Y = bYO + 90 + 3;           // 본체 뒤 3mm 간격
                const w4X = (rw - 45) / 2;           // 폭 중앙 정렬
                const w4S = new THREE.Shape();
                w4S.moveTo(w4X, w4Y);
                w4S.lineTo(w4X+45, w4Y); w4S.lineTo(w4X+45, w4Y+30);
                w4S.lineTo(w4X+45-rt, w4Y+30); w4S.lineTo(w4X+45-rt, w4Y+rt);
                w4S.lineTo(w4X+rt, w4Y+rt); w4S.lineTo(w4X+rt, w4Y+30);
                w4S.lineTo(w4X, w4Y+30); w4S.lineTo(w4X, w4Y);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(w4S, railExtrude), railMat));

                // ── ① 마감재 SUS 1.2T × 2장 (상/하 대칭) ──
                // 상단: body(120)→tab(13↓)→lip(10←) + 우측: 25↓→15←
                const m1Lip=10, m1Tab=13, m1Body=120, m1E25=25, m1E15=15;
                const trimYFront = bYO + 90 - 90;    // 본체 개구부쪽 = bYO
                const trimYBack = trimYFront + m1Body; // 120mm 수평부

                // 상단 ① (X=bXO-tT 위치)
                const t1Top = new THREE.Shape();
                const tx = bXO - tT;
                // 수평부 120mm
                t1Top.moveTo(tx, trimYFront); t1Top.lineTo(tx+tT, trimYFront);
                t1Top.lineTo(tx+tT, trimYBack); t1Top.lineTo(tx, trimYBack); t1Top.lineTo(tx, trimYFront);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t1Top, railExtrude), railSusMat));
                // 좌측탭 13mm + 립 10mm
                const t1Tab = new THREE.Shape();
                t1Tab.moveTo(tx, trimYBack); t1Tab.lineTo(tx+m1Tab, trimYBack);
                t1Tab.lineTo(tx+m1Tab, trimYBack+m1Lip); t1Tab.lineTo(tx+m1Tab-tT, trimYBack+m1Lip);
                t1Tab.lineTo(tx+m1Tab-tT, trimYBack+tT); t1Tab.lineTo(tx, trimYBack+tT); t1Tab.lineTo(tx, trimYBack);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t1Tab, railExtrude), railSusMat));
                // 우측 25mm 수직 + 15mm 리턴
                const t1R = new THREE.Shape();
                t1R.moveTo(tx, trimYFront-m1E25); t1R.lineTo(tx+tT, trimYFront-m1E25);
                t1R.lineTo(tx+tT, trimYFront); t1R.lineTo(tx, trimYFront); t1R.lineTo(tx, trimYFront-m1E25);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t1R, railExtrude), railSusMat));
                const t1Ret = new THREE.Shape();
                t1Ret.moveTo(tx, trimYFront-m1E25); t1Ret.lineTo(tx+m1E15, trimYFront-m1E25);
                t1Ret.lineTo(tx+m1E15, trimYFront-m1E25+tT); t1Ret.lineTo(tx, trimYFront-m1E25+tT); t1Ret.lineTo(tx, trimYFront-m1E25);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t1Ret, railExtrude), railSusMat));

                // 하단 ① (X=bXO+72 위치, 대칭)
                const bx2 = bXO + 72;
                const t2Top = new THREE.Shape();
                t2Top.moveTo(bx2, trimYFront); t2Top.lineTo(bx2+tT, trimYFront);
                t2Top.lineTo(bx2+tT, trimYBack); t2Top.lineTo(bx2, trimYBack); t2Top.lineTo(bx2, trimYFront);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t2Top, railExtrude), railSusMat));
                const t2Tab = new THREE.Shape();
                t2Tab.moveTo(bx2, trimYBack); t2Tab.lineTo(bx2, trimYBack+tT);
                t2Tab.lineTo(bx2+m1Tab-tT, trimYBack+tT); t2Tab.lineTo(bx2+m1Tab-tT, trimYBack+m1Lip);
                t2Tab.lineTo(bx2+m1Tab, trimYBack+m1Lip); t2Tab.lineTo(bx2+m1Tab, trimYBack); t2Tab.lineTo(bx2, trimYBack);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t2Tab, railExtrude), railSusMat));
                const t2R = new THREE.Shape();
                t2R.moveTo(bx2, trimYFront-m1E25); t2R.lineTo(bx2+tT, trimYFront-m1E25);
                t2R.lineTo(bx2+tT, trimYFront); t2R.lineTo(bx2, trimYFront); t2R.lineTo(bx2, trimYFront-m1E25);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t2R, railExtrude), railSusMat));
                const t2Ret = new THREE.Shape();
                t2Ret.moveTo(bx2, trimYFront-m1E25); t2Ret.lineTo(bx2+m1E15, trimYFront-m1E25);
                t2Ret.lineTo(bx2+m1E15, trimYFront-m1E25+tT); t2Ret.lineTo(bx2, trimYFront-m1E25+tT); t2Ret.lineTo(bx2, trimYFront-m1E25);
                grp.add(new THREE.Mesh(new THREE.ExtrudeGeometry(t2Ret, railExtrude), railSusMat));
            }

            // 회전: 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() 단면: X=폭(0→70), Y=깊이(lip=-10 ~ backWall=sw+rt)
            // Rx(-PI/2) 후: X=폭, Y=높이(extrude), Z=-Y(lip→z=+10, backWall→z=-81.55)
            //
            // 좌표계 정리 (Rx(-PI/2) 후):
            //   z>0 = 립/개구부(실내쪽), z<0 = 백월(벽쪽)
            //
            // Left: Ry(+PI/2) → x'=z → 립(z=10)→x'=+10(중심), 백월(z=-81.55)→x'=-81.55(벽)
            // Right: Ry(-PI/2) → x'=-z → 립(z=10)→x'=-10(중심), 백월(z=-81.55)→x'=+81.55(벽)

            // 레일 백월을 벽면에서 20mm 슬랫 방향으로 이격
            const railDepth = g.sideWall + rt; // 81.55mm
            const railOffset = 20; // 벽면에서 슬랫 방향 이격 거리
            const railPosX = W1 / 2 - railDepth - railOffset; // wrapper X 위치

            // Left rail — Ry(+PI/2): 립→+X(중심), 백월→-X(벽=-W1/2)
            // Z방향: z'=-x(원본), 폭 0→70이 z' 0→-70으로 매핑
            // wrapper Z=+rw/2 → 레일 Z범위 -rw/2 ~ +rw/2 (벽면 중심에 걸침)
            const railGroupL = createRailGroup();
            const wrapperL = new THREE.Group();
            wrapperL.add(railGroupL);
            wrapperL.rotation.y = Math.PI / 2;
            wrapperL.position.set(-railPosX, 0, rw / 2);
            meshes.rails.add(wrapperL);

            // Right rail — Ry(-PI/2): 립→-X(중심), 백월→+X(벽=+W1/2)
            // Z방향: z'=x(원본), 폭 0→70이 z' 0→70으로 매핑
            // wrapper Z=-rw/2 → 레일 Z범위 -rw/2 ~ +rw/2 (벽면 중심에 걸침)
            const railGroupR = createRailGroup();
            const wrapperR = new THREE.Group();
            wrapperR.add(railGroupR);
            wrapperR.rotation.y = -Math.PI / 2;
            wrapperR.position.set(railPosX, 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 slatTop = shaftY;                    // 샤프트 중심에서 시작
        const slatBottom = H - shutterH;           // 바닥 (100%일 때 Y=0)
        const slatHeight = slatTop - slatBottom;   // 샤프트~바닥 전체 높이
        const slatGeo = new THREE.PlaneGeometry(W - 20, slatHeight > 0 ? slatHeight : 1);
        const slatColor = S.productType === 'steel' ? 0x8b9aab : 0xc084fc;
        const slatMat = new THREE.MeshStandardMaterial({
            color: slatColor,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: S.productType === 'screen' ? 0.6 : 0.85,
            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, slatTop - slatHeight / 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;
        {
            const wrapThick = S.productType === 'steel' ? 10 : 1;
            const shaftR = b.shaftDia / 2;
            // 감아올린 양에 비례 (100% 내림 시 최소 3mm 고정부만 표시)
            const rollThick = rolledH > 0
                ? Math.max(Math.sqrt(rolledH * wrapThick / Math.PI), 5)
                : 3;
            const rollOuterR = shaftR + rollThick;
            const rollLen = W - 20; // 슬랫 커튼과 동일 너비 (같은 스크린)

            // 하나의 Mesh로 표현 (접시 모양 방지)
            const rollGeo = new THREE.CylinderGeometry(rollOuterR, rollOuterR, rollLen, 48, 1, false);
            rollGeo.rotateZ(Math.PI / 2);
            const rollMat = new THREE.MeshStandardMaterial({
                color: slatColor, // 슬랫과 동일 색상
                metalness: S.productType === 'steel' ? 0.3 : 0,
                roughness: S.productType === 'steel' ? 0.4 : 0.8,
                opacity: 0.9,
                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' ? 0x6b7a8b : 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 (하장바 어셈블리: 하단마감재 ㄷ채널 + L바 + 평철) ===
        meshes.bottomBar = new THREE.Group();
        {
            const barW = W - 20;
            const barH = 40, barD = 60;
            const halfH = barH / 2, halfD = barD / 2;
            const bt = 3, lipW = 22;
            const barExtrude = { depth: barW, bevelEnabled: false };
            const barEdgeMat = new THREE.LineBasicMaterial({ color: 0xb45309, transparent: true, opacity: 0.5 });

            // 회전 래퍼 (XY 단면 → Z extrude → Y축 회전으로 X방향 정렬)
            const barInner = new THREE.Group();
            barInner.rotation.y = Math.PI / 2;
            barInner.position.set(-barW / 2, 0, 0);

            // --- 1) 하단마감재 (ㄷ채널, SUS 1.2T) ---
            const cs = new THREE.Shape();
            cs.moveTo(-halfD, -halfH);
            cs.lineTo(halfD, -halfH);
            cs.lineTo(halfD, halfH);
            cs.lineTo(halfD - lipW, halfH);
            cs.lineTo(halfD - lipW, halfH - bt);
            cs.lineTo(halfD - bt, halfH - bt);
            cs.lineTo(halfD - bt, -halfH + bt);
            cs.lineTo(-halfD + bt, -halfH + bt);
            cs.lineTo(-halfD + bt, halfH - bt);
            cs.lineTo(-halfD + lipW, halfH - bt);
            cs.lineTo(-halfD + lipW, halfH);
            cs.lineTo(-halfD, halfH);
            cs.closePath();
            const csGeo = new THREE.ExtrudeGeometry(cs, barExtrude);
            barInner.add(new THREE.Mesh(csGeo, new THREE.MeshStandardMaterial({ color: 0xf59e0b, metalness: 0.5, roughness: 0.3 })));
            barInner.add(new THREE.LineSegments(new THREE.EdgesGeometry(csGeo), barEdgeMat));

            // --- 2) L바 (180° 회전: 수평부 아래, 수직부 위로, EGI 1.55T) ---
            // L바 2개가 수직부(긴 면)를 서로 마주보며 스크린+평철을 직결피스로 클램핑
            // 수평부는 바깥으로 뻗어 하장바 내부에 위치
            // 하장바를 아래에서 끼우면 날개(lipW=22)가 수평부 위를 덮어 고리처럼 잡아줌
            const lbT = 2;
            const cg = 3;       // 중심~수직부 내면 간격 (스크린+평철)
            const armY = 5;     // 수평부 바닥 Y (채널 내부)
            const vtop = 25;    // 수직부 상단 Y (하장바 위로 돌출)
            const lMat = new THREE.MeshStandardMaterial({ color: 0xd97706, metalness: 0.3, roughness: 0.5 });
            // 좌측 L바: 수평부→왼쪽(바깥), 수직부→위로(중심쪽)
            const llS = new THREE.Shape();
            llS.moveTo(cg, armY);                    // 수평부 우하단 (중심쪽)
            llS.lineTo(halfD - bt - 1, armY);        // 수평부 좌하단 (벽 근처)
            llS.lineTo(halfD - bt - 1, armY + lbT);  // 수평부 좌상단
            llS.lineTo(cg + lbT, armY + lbT);        // 수직부-수평부 연결점
            llS.lineTo(cg + lbT, vtop);              // 수직부 좌면 상단
            llS.lineTo(cg, vtop);                    // 수직부 우면 상단 (긴 면)
            llS.closePath();
            barInner.add(new THREE.Mesh(new THREE.ExtrudeGeometry(llS, barExtrude), lMat));
            // 우측 L바 (반전): 수평부→오른쪽(바깥), 수직부→위로(중심쪽)
            const rlS = new THREE.Shape();
            rlS.moveTo(-cg, armY);
            rlS.lineTo(-(halfD - bt - 1), armY);
            rlS.lineTo(-(halfD - bt - 1), armY + lbT);
            rlS.lineTo(-cg - lbT, armY + lbT);
            rlS.lineTo(-cg - lbT, vtop);
            rlS.lineTo(-cg, vtop);
            rlS.closePath();
            barInner.add(new THREE.Mesh(new THREE.ExtrudeGeometry(rlS, barExtrude), lMat));

            // --- 3) 평철 (L바 수직부 사이, EGI 1.15T) ---
            // 스크린 시접 안의 보강 평철, 직결피스로 L바+평철+L바 체결
            const fpT = 2, fpH = 18;
            const fpS = new THREE.Shape();
            fpS.moveTo(-fpT / 2, armY); fpS.lineTo(fpT / 2, armY);
            fpS.lineTo(fpT / 2, armY + fpH); fpS.lineTo(-fpT / 2, armY + fpH);
            fpS.closePath();
            barInner.add(new THREE.Mesh(new THREE.ExtrudeGeometry(fpS, barExtrude),
                new THREE.MeshStandardMaterial({ color: 0x92400e, metalness: 0.3, roughness: 0.5 })));

            meshes.bottomBar.add(barInner);
        }
        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();

        // 벽 기둥 내면 = 브라켓 벽면(W1/2)과 동일 선상
        // 스크린: 레일 백월 = 브라켓 벽면 = W1/2 (③④ 벽연형은 벽 두께 안에 매립)
        // 철재: 레일 절반 폭 기준
        const whw = isScreenType
            ? (W1 / 2)                    // 브라켓/레일 백월 정렬
            : (hw + rw / 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;
        }

        // 빌드 후 부품 표시/숨김 상태 복원
        Object.keys(S.td.show).forEach(k => {
            if (meshes[k]) meshes[k].visible = S.td.show[k];
        });
    }

    // 단품 보기 (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';
    }

    // 뷰 프리셋 (정면/평면/우측면/좌측면/배면/투시)
    function fs3dSetView(preset) {
        if (!camera || !controls) return;
        const t = controls.target.clone(); // 현재 타겟 유지
        const dist = camera.position.distanceTo(t); // 현재 거리 유지
        const d = Math.max(dist, 2000); // 최소 거리 보장
        let pos;
        switch (preset) {
            case 'front': pos = new THREE.Vector3(t.x, t.y, t.z + d); break;       // +Z: 정면 (전면에서 봄)
            case 'back':  pos = new THREE.Vector3(t.x, t.y, t.z - d); break;       // -Z: 배면 (후면에서 봄)
            case 'top':   pos = new THREE.Vector3(t.x, t.y + d, t.z + 1); break;   // +Y: 평면 (위에서 봄)
            case 'right': pos = new THREE.Vector3(t.x + d, t.y, t.z); break;       // +X: 우측면
            case 'left':  pos = new THREE.Vector3(t.x - d, t.y, t.z); break;       // -X: 좌측면
            case 'persp': pos = new THREE.Vector3(t.x + d * 0.7, t.y + d * 0.5, t.z + d * 0.7); break;
            default: return;
        }
        // 부드러운 전환 (애니메이션)
        const startPos = camera.position.clone();
        const startTime = performance.now();
        const duration = 400; // ms
        function animateView(now) {
            const elapsed = now - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const ease = 1 - Math.pow(1 - progress, 3); // easeOutCubic
            camera.position.lerpVectors(startPos, pos, ease);
            camera.lookAt(t);
            controls.update();
            if (progress < 1) requestAnimationFrame(animateView);
        }
        requestAnimationFrame(animateView);
    }

    // 3D Controls
    window.fs3dShutterPos = function(v) {
        undoSaveState();
        S.td.shutterPos = Number(v);
        $('shutterPosLabel').textContent = v + '%';
        fs3dBuild();
        // 빌드 후 숨겨진 부품 상태 복원
        Object.keys(S.td.show).forEach(k => {
            if (meshes[k]) meshes[k].visible = S.td.show[k];
        });
    };
    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];
        // 슬랫 토글 시 감긴 슬랫(slatRoll)도 연동
        if (key === 'slats') {
            S.td.show.slatRoll = S.td.show[key];
            if (meshes.slatRoll) meshes.slatRoll.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(S.productType === 'steel' ? 'GuideRail' : '3D');

})();
</script>
@endpush

@endsection