fix: [planning-design] 템플릿 패널 잘림 현상 수정

- position: absolute → fixed로 변경 (부모 overflow 영향 제거)
- 버튼 위치 기준으로 JS 동적 좌표 계산
- 화면 경계 밖 방지 (좌/우/하단 overflow 체크)

resources/views/rd/planning-design/index.blade.php

@@ -748,10 +748,10 @@
 }
 .sb-tpl-trigger:hover { border-color: var(--pc-indigo); color: var(--pc-indigo); }
 .sb-tpl-panel {
-    position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 100;
+    position: fixed; z-index: 9990;
-    width: 360px; max-height: 480px; background: #fff;
+    width: 380px; max-height: 520px; background: #fff;
     border: 1px solid #e2e8f0; border-radius: 10px;
-    box-shadow: 0 12px 32px rgba(0,0,0,0.12); display: flex; flex-direction: column;
+    box-shadow: 0 12px 32px rgba(0,0,0,0.15); display: flex; flex-direction: column;
 }
 .sb-tpl-tabs {
     display: flex; border-bottom: 1px solid #e2e8f0;
@@ -1429,8 +1429,8 @@
                                         <div class="sb-block-toolbar-sep"></div>
                                         {{-- Template Dropdown --}}
                                         <div class="sb-tpl-dropdown" @click.outside="sbTplOpen = false">
-                                            <button class="sb-tpl-trigger" @click="sbTplOpen = !sbTplOpen">📋 템플릿 <span style="font-size:8px;">▾</span></button>
+                                            <button class="sb-tpl-trigger" x-ref="sbTplBtn" @click="sbToggleTplPanel()">📋 템플릿 <span style="font-size:8px;">▾</span></button>
-                                            <div class="sb-tpl-panel" x-show="sbTplOpen" x-cloak x-transition>
+                                            <div class="sb-tpl-panel" x-ref="sbTplPanel" x-show="sbTplOpen" x-cloak x-transition>
                                                 <div class="sb-tpl-tabs">
                                                     <div class="sb-tpl-tab" :class="{ active: sbTplTab === 'preset' }" @click="sbTplTab = 'preset'">기본 템플릿</div>
                                                     <div class="sb-tpl-tab" :class="{ active: sbTplTab === 'custom' }" @click="sbTplTab = 'custom'">내 템플릿</div>
@@ -2997,6 +2997,30 @@ function planningCanvas() {
             localStorage.setItem('sb_custom_templates', JSON.stringify(this.sbCustomTemplates));
         },
 
+        sbToggleTplPanel() {
+            this.sbTplOpen = !this.sbTplOpen;
+            if (this.sbTplOpen) {
+                this.$nextTick(() => {
+                    const btn = this.$refs.sbTplBtn;
+                    const panel = this.$refs.sbTplPanel;
+                    if (!btn || !panel) return;
+                    const r = btn.getBoundingClientRect();
+                    const pw = 380;
+                    const ww = window.innerWidth;
+                    const wh = window.innerHeight;
+                    // 가로: 버튼 오른쪽 끝 기준, 화면 밖이면 왼쪽으로 이동
+                    let left = r.right - pw;
+                    if (left < 8) left = 8;
+                    if (left + pw > ww - 8) left = ww - pw - 8;
+                    // 세로: 버튼 아래, 공간 부족하면 위로
+                    let top = r.bottom + 4;
+                    if (top + 520 > wh) top = Math.max(8, r.top - 520 - 4);
+                    panel.style.left = left + 'px';
+                    panel.style.top = top + 'px';
+                });
+            }
+        },
+
         sbEditMenu() {
             // deep copy menuTree → draft (+ _open 플래그 추가)
             this.sbMenuDraft = JSON.parse(JSON.stringify(this.sb.menuTree)).map(m => {