fix(WEB): DevToolbar 모바일 반응형 및 안드로이드 하단바 대응

- bottom-4 → bottom-9로 변경하여 안드로이드 하단 네비게이션바 회피
- max-w-[calc(100vw-1rem)] 추가하여 모바일 화면 넘침 방지
- 버튼 영역에 flex-wrap 적용하여 모바일에서 줄바꿈 지원

src/components/dev/DevToolbar.tsx

@@ -132,7 +132,7 @@ export function DevToolbar() {
   // 숨김 상태일 때 작은 버튼만 표시
   if (!isVisible) {
     return (
-      <div className="fixed bottom-4 right-4 z-[9999]">
+      <div className="fixed bottom-9 right-4 z-[9999]">
         <Button
           size="sm"
           variant="outline"
@@ -185,7 +185,7 @@ export function DevToolbar() {
   const hasFlowData = flowData.quoteId || flowData.orderId || flowData.workOrderId || flowData.lotNo;
 
   return (
-    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[9999]">
+    <div className="fixed bottom-9 left-1/2 -translate-x-1/2 z-[9999] max-w-[calc(100vw-1rem)]">
       <div className="bg-yellow-50 border-2 border-yellow-400 rounded-lg shadow-2xl overflow-hidden">
         {/* 헤더 */}
         <div className="flex items-center justify-between px-3 py-2 bg-yellow-100 border-b border-yellow-300">
@@ -257,7 +257,7 @@ export function DevToolbar() {
 
         {/* 판매/생산 플로우 버튼 영역 */}
         {isExpanded && (
-          <div className="flex items-center gap-2 px-3 py-3">
+          <div className="flex flex-wrap items-center gap-2 px-3 py-3">
             {FLOW_STEPS.map((step, index) => {
               const Icon = step.icon;
               const isActive = activePage === step.type;
@@ -331,7 +331,7 @@ export function DevToolbar() {
 
         {/* 2행: 회계 + 기준정보 + 자재 버튼 영역 */}
         {isExpanded && (
-          <div className="flex items-center gap-2 px-3 pb-3 border-t border-yellow-300 pt-3">
+          <div className="flex flex-wrap items-center gap-2 px-3 pb-3 border-t border-yellow-300 pt-3">
             {/* 회계 */}
             <span className="text-xs text-yellow-600 font-medium mr-1">회계:</span>
             {ACCOUNTING_STEPS.map((step) => {