From db489c7c3a0ad17ae3a54cf1fb27353cf3d85bef Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Fri, 25 Sep 2026 18:18:10 +0900
Subject: [PATCH] =?UTF-8?q?fix(M02):=20=EC=9E=91=EB=8F=84=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EC=B0=BD=EC=9D=84=20=EB=8B=A8=EC=B6=94=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=20=EC=95=84=EB=9E=98=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=A4=EC=9C=BC=EB=A1=9C=20=C2=B7=20=EC=B0=BD=20?=
 =?UTF-8?q?=EB=B0=96=EC=9C=BC=EB=A1=9C=20=EC=95=88=20=EB=82=98=EA=B0=80?=
 =?UTF-8?q?=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PxvYb5ufV1kWdBvZbpDfu6
---
 M02_MasterTemplete/M02_MasterTemplete_Drawing.css | 11 +++++++++++
 M02_MasterTemplete/M02_MasterTemplete_Drawing.ts  |  9 +++++++++
 2 files changed, 20 insertions(+)

diff --git a/M02_MasterTemplete/M02_MasterTemplete_Drawing.css b/M02_MasterTemplete/M02_MasterTemplete_Drawing.css
index 982029d0..d6b91d2b 100644
--- a/M02_MasterTemplete/M02_MasterTemplete_Drawing.css
+++ b/M02_MasterTemplete/M02_MasterTemplete_Drawing.css
@@ -73,3 +73,14 @@
   margin-left: auto;
   white-space: nowrap;
 }
+
+.m02-pop {
+  display: block;
+}
+
+.m02-pop > .ui-modal {
+  position: absolute;
+  width: 23rem;
+  max-width: calc(100vw - 16px);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
+}
diff --git a/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts b/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts
index c56f8da6..63ae1738 100644
--- a/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts
+++ b/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts
@@ -150,8 +150,17 @@ export function mountDrawingTemplate(
       title: "작도 영역",
       closeLabel: "닫기",
       dialogClass: "m02-modal",
+      backdropClass: "m02-pop",
       mount: (body) => body.append(areaForm),
     });
+    // 단추 바로 아래 · 오른쪽 맞춤 · 화면 밖으로 안 나가게
+    const dialog = document.querySelector<HTMLElement>(".m02-pop > .ui-modal");
+    if (!dialog) return;
+    const at = areaButton.getBoundingClientRect();
+    const width = dialog.offsetWidth;
+    dialog.style.top = `${at.bottom + 4}px`;
+    dialog.style.left = `${Math.max(8, Math.min(at.right - width, innerWidth - width - 8))}px`;
+    dialog.style.maxHeight = `${innerHeight - at.bottom - 12}px`;
   });
 
   // CAD 안 💾 · Ctrl+S — 양식 파일은 페이지 [저장] 만 쓴다. 저장 중 또 눌러도 한 번만 부른다.