From a42dbde1a5eeccb8063d8b50ed8cd1dac3a8eaf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Fri, 13 Mar 2026 20:04:37 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[sales]=20=EA=B0=80=EA=B2=A9=EC=8B=9C?=
 =?UTF-8?q?=EB=AE=AC=EB=A0=88=EC=9D=B4=ED=84=B0=20=EB=8F=84=EC=9B=80?=
 =?UTF-8?q?=EB=A7=90=EC=9D=84=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 인라인 패널에서 fixed 오버레이 모달로 전환
- 배경 클릭/X 버튼으로 닫기
- 본문 영역 스크롤 가능 (max-height: calc(100vh - 160px))
---
 .../sales/price-simulator/index.blade.php     | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/resources/views/sales/price-simulator/index.blade.php b/resources/views/sales/price-simulator/index.blade.php
index cb9be9bd..5e3c0ba0 100644
--- a/resources/views/sales/price-simulator/index.blade.php
+++ b/resources/views/sales/price-simulator/index.blade.php
@@ -37,15 +37,22 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
         </div>
     </div>
 
-    {{-- 도움말 패널 --}}
-    <div x-show="showHelp" x-cloak
+    {{-- 도움말 모달 --}}
+    <div x-show="showHelp" x-cloak class="fixed inset-0 z-50 overflow-y-auto"
          x-transition:enter="transition ease-out duration-300"
-         x-transition:enter-start="opacity-0 -translate-y-4"
-         x-transition:enter-end="opacity-100 translate-y-0"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
          x-transition:leave="transition ease-in duration-200"
-         x-transition:leave-start="opacity-100 translate-y-0"
-         x-transition:leave-end="opacity-0 -translate-y-4"
-         class="mb-6 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl overflow-hidden">
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0">
+        <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm" x-on:click="showHelp = false"></div>
+        <div class="min-h-screen px-4 py-8 flex items-start justify-center relative">
+            <div class="bg-white rounded-2xl shadow-2xl w-full relative overflow-hidden"
+                 style="max-width: 860px;"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 scale-95 translate-y-4"
+                 x-transition:enter-end="opacity-100 scale-100 translate-y-0"
+                 x-on:click.stop>
 
         {{-- 도움말 헤더 --}}
         <div class="px-6 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 flex items-center justify-between">
@@ -68,7 +75,7 @@ class="mb-6 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 r
         </div>
 
         {{-- 도움말 본문 (탭 방식) --}}
-        <div x-data="{ helpTab: 'overview' }" class="p-6">
+        <div x-data="{ helpTab: 'overview' }" class="p-6 overflow-y-auto" style="max-height: calc(100vh - 160px);">
             {{-- 탭 네비게이션 --}}
             <div class="flex flex-wrap gap-2 mb-5">
                 <button x-on:click="helpTab = 'overview'" :class="helpTab === 'overview' ? 'bg-blue-600 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'" class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 transition-colors">
@@ -569,7 +576,10 @@ class="mb-6 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 r
                 </div>
             </div>
         </div>
-    </div>
+
+            </div>{{-- /모달 본체 --}}
+        </div>{{-- /모달 센터링 --}}
+    </div>{{-- /모달 오버레이 --}}
 
     <div class="flex gap-6" style="align-items: flex-start;">
         {{-- 좌측: 상품 선택 영역 --}}