fix: [sales] 가격시뮬레이터 도움말을 모달창으로 변경

- 인라인 패널에서 fixed 오버레이 모달로 전환
- 배경 클릭/X 버튼으로 닫기
- 본문 영역 스크롤 가능 (max-height: calc(100vh - 160px))

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;">
         {{-- 좌측: 상품 선택 영역 --}}