feat(WEB): 공정관리 드래그 순서변경, 수주서/출고증 리디자인, 체크리스트 관리 추가

- 공정관리: 드래그&드롭 순서 변경 기능 추가 (reorderProcesses API)
- 수주서(SalesOrderDocument): 기획서 D1.8 기준 리디자인, 출고증과 동일 자재 섹션 구조
- 출고증(ShipmentOrderDocument): 레이아웃 개선
- 체크리스트 관리 페이지 신규 추가 (master-data/checklist-management)
- QMS 품질감사: 타입 및 목데이터 수정
- menuRefresh 유틸 정리

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/outbound/ShipmentManagement/documents/ShipmentOrderDocument.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 /**
- * 출고 문서 공통 컴포넌트 (수주서 레이아웃 기반)
- * - 출고증, 납품확인서에서 제목만 변경하여 사용
- * - 수주서(SalesOrderDocument)와 동일한 레이아웃
+ * 출고 문서 공통 컴포넌트 (기획서 D1.8 기준 리디자인)
+ * - 출고증: showDispatchInfo + showLotColumn
+ * - 납품확인서: 기본값 (배차정보 없음, LOT 컬럼 없음)
  */
 
+import { useState } from 'react';
 import type { ShipmentDetail } from '../types';
 import { DELIVERY_METHOD_LABELS } from '../types';
 import { ConstructionApprovalTable } from '@/components/document-system';
@@ -14,56 +15,78 @@ interface ShipmentOrderDocumentProps {
   title: string;
   data: ShipmentDetail;
   showDispatchInfo?: boolean;
+  showLotColumn?: boolean;
 }
 
-export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }: ShipmentOrderDocumentProps) {
-  // 스크린 제품 필터링 (productGroups 기반)
-  const screenProducts = data.productGroups.filter(g =>
-    g.productName?.includes('스크린') ||
-    g.productName?.includes('방화') ||
-    g.productName?.includes('셔터')
-  );
+// ===== 문서 전용 목데이터 =====
 
-  // 전체 부품 목록
-  const allParts = [
-    ...data.productGroups.flatMap(g => g.parts),
-    ...data.otherParts,
-  ];
+const MOCK_SCREEN_ROWS = [
+  { no: 1, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+  { no: 2, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+];
 
-  // 모터 아이템 필터링
-  const motorItems = allParts.filter(part =>
-    part.itemName?.includes('모터')
-  );
+const MOCK_STEEL_ROWS = [
+  { no: 1, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+  { no: 2, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+];
 
-  // 브라켓 아이템 필터링
-  const bracketItems = allParts.filter(part =>
-    part.itemName?.includes('브라켓')
-  );
+const MOCK_MOTOR_LEFT = [
+  { item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6, lot: '123123' },
+  { item: '브라켓트', type: '-', spec: '380X180', qty: 6, lot: '123123' },
+  { item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4, lot: '123123' },
+];
 
-  // 가이드레일 아이템 필터링
-  const guideRailItems = allParts.filter(part =>
-    part.itemName?.includes('가이드') ||
-    part.itemName?.includes('레일')
-  );
+const MOCK_MOTOR_RIGHT = [
+  { item: '전동개폐기', type: '릴박스', spec: '-', qty: 1, lot: '123123' },
+  { item: '전동개폐기', type: '매입', spec: '-', qty: 1, lot: '123123' },
+];
 
-  // 케이스 아이템 필터링
-  const caseItems = allParts.filter(part =>
-    part.itemName?.includes('케이스') ||
-    part.itemName?.includes('셔터박스')
-  );
+const MOCK_GUIDE_RAIL_ITEMS = [
+  { name: '항목명', spec: 'L: 3,000', qty: 22 },
+  { name: '하부BASE', spec: '130X80', qty: 22 },
+];
 
-  // 하단마감재 아이템 필터링
-  const bottomFinishItems = allParts.filter(part =>
-    part.itemName?.includes('하단') ||
-    part.itemName?.includes('마감')
-  );
+const MOCK_GUIDE_SMOKE = { name: '연기차단재(W50)', spec: '2,438', qty: 4 };
+
+const MOCK_CASE_ITEMS = [
+  { name: '500X330', spec: 'L: 4,000', qty: 3 },
+  { name: '500X330', spec: 'L: 5,000', qty: 4 },
+  { name: '상부덮개', spec: '1219X389', qty: 55 },
+  { name: '측면부 (마구리)', spec: '500X355', qty: '500X355' },
+];
+
+const MOCK_CASE_SMOKE = { name: '연기차단재(W80)', spec: '3,000', qty: 4 };
+
+const MOCK_BOTTOM_SCREEN = [
+  { name: '하단마감재', spec: '60X40', l1: 'L: 3,000', q1: 6, name2: '하단마감재', spec2: '60X40', l2: 'L: 4,000', q2: 6 },
+  { name: '하단보강엘비', spec: '60X17', l1: 'L: 3,000', q1: 6, name2: '하단보강엘비', spec2: '60X17', l2: 'L: 4,000', q2: 6 },
+  { name: '하단보강평철', spec: '-', l1: 'L: 3,000', q1: 6, name2: '하단보강평철', spec2: '-', l2: 'L: 4,000', q2: 6 },
+  { name: '하단무게평철', spec: '50X12T', l1: 'L: 3,000', q1: 6, name2: '하단무게평철', spec2: '50X12T', l2: 'L: 4,000', q2: 6 },
+];
+
+const MOCK_BOTTOM_STEEL = { spec: '60X40', length: 'L: 3,000', qty: 22 };
+
+const MOCK_SUBSIDIARY = [
+  { leftItem: '감기사프트', leftSpec: '4인치 4500', leftQty: 6, rightItem: '각파이프', rightSpec: '6000', rightQty: 4 },
+  { leftItem: '조인트바', leftSpec: '300', leftQty: 6, rightItem: '환봉', rightSpec: '3000', rightQty: 5 },
+];
+
+// ===== 공통 스타일 =====
+const thBase = 'border-r border-gray-400 px-1 py-1';
+const tdBase = 'border-r border-gray-300 px-1 py-1';
+const tdCenter = `${tdBase} text-center`;
+const imgPlaceholder = 'flex items-center justify-center border border-dashed border-gray-300 text-gray-400';
+
+export function ShipmentOrderDocument({ title, data, showDispatchInfo = false, showLotColumn = false }: ShipmentOrderDocumentProps) {
+  const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');
 
   const deliveryMethodLabel = DELIVERY_METHOD_LABELS[data.deliveryMethod] || '-';
   const fullAddress = [data.address, data.addressDetail].filter(Boolean).join(' ') || data.deliveryAddress || '-';
+  const motorRows = Math.max(MOCK_MOTOR_LEFT.length, MOCK_MOTOR_RIGHT.length);
 
   return (
     <div className="bg-white p-8 min-h-full text-[11px]">
-      {/* 헤더: 제목 (좌측) + 결재란 (우측) */}
+      {/* ========== 헤더: 제목 + 결재란 ========== */}
       <div className="flex justify-between items-start mb-4">
         <div>
           <h1 className="text-2xl font-bold tracking-widest mb-2">{title}</h1>
@@ -74,30 +97,26 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
             </div>
           </div>
         </div>
-
-        {/* 결재란 (우측) */}
-        <ConstructionApprovalTable
-          approvers={{ writer: { name: '홍길동' } }}
-        />
+        <ConstructionApprovalTable approvers={{ writer: { name: '홍길동' } }} />
       </div>
 
-      {/* 상품명 / 제품명 / 로트번호 / 인정번호 */}
+      {/* ========== 로트번호 / 제품명 / 제품코드 / 인정번호 ========== */}
       <table className="border border-gray-400 w-full mb-3 text-[10px]">
         <tbody>
           <tr>
-            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">상품명</td>
-            <td className="px-2 py-1 border-r border-gray-400">{data.productGroups[0]?.productName || '-'}</td>
-            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
-            <td className="px-2 py-1 border-r border-gray-400">{data.products[0]?.itemName || '-'}</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">로트번호</td>
             <td className="px-2 py-1 border-r border-gray-400">{data.lotNo}</td>
+            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
+            <td className="px-2 py-1 border-r border-gray-400">{data.productGroups[0]?.productName || '-'}</td>
+            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품코드</td>
+            <td className="px-2 py-1 border-r border-gray-400">KWS01</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">인정번호</td>
-            <td className="px-2 py-1">-</td>
+            <td className="px-2 py-1">ABC1234</td>
           </tr>
         </tbody>
       </table>
 
-      {/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
+      {/* ========== 3열 섹션: 신청업체 | 신청내용 | 납품정보 ========== */}
       <div className="border border-gray-400 mb-4">
         <div className="grid grid-cols-3">
           {/* 신청업체 */}
@@ -110,21 +129,17 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
                   <td className="px-2 py-1">{data.scheduledDate}</td>
                 </tr>
                 <tr className="border-b border-gray-300">
-                  <td className="bg-gray-100 px-2 py-1 font-medium">업체명</td>
+                  <td className="bg-gray-100 px-2 py-1 font-medium">수주처</td>
                   <td className="px-2 py-1">{data.customerName}</td>
                 </tr>
                 <tr className="border-b border-gray-300">
                   <td className="bg-gray-100 px-2 py-1 font-medium">수주 담당자</td>
                   <td className="px-2 py-1">{data.registrant || '-'}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
                   <td className="px-2 py-1">{data.driverContact || '-'}</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
-                  <td className="px-2 py-1">{fullAddress}</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -146,14 +161,10 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
                   <td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
                   <td className="px-2 py-1">{data.shipmentDate || data.scheduledDate}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
                   <td className="px-2 py-1">{data.productGroups.length}개소</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
-                  <td className="px-2 py-1">&nbsp;</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -175,21 +186,22 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
                   <td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
                   <td className="px-2 py-1">{data.receiverContact || '-'}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
                   <td className="px-2 py-1">{deliveryMethodLabel}</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
-                  <td className="px-2 py-1">&nbsp;</td>
-                </tr>
               </tbody>
             </table>
           </div>
         </div>
+        {/* 배송지 주소 - 한 줄 병합 */}
+        <div className="border-t border-gray-400 flex">
+          <div className="bg-gray-100 px-2 py-1 w-20 shrink-0 font-medium">배송지 주소</div>
+          <div className="px-2 py-1 flex-1">{fullAddress}</div>
+        </div>
       </div>
 
-      {/* 배차정보 (출고증에서만 표시) */}
+      {/* ========== 배차정보 (출고증에서만) ========== */}
       {showDispatchInfo && (() => {
         const dispatch = data.vehicleDispatches[0];
         return (
@@ -221,366 +233,406 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
         );
       })()}
 
-      <p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
+      {/* ========== 자재 및 철거 내역 헤더 ========== */}
+      <div className="bg-gray-800 text-white text-center py-2 font-bold mb-4">
+        자재 및 철거 내역
+      </div>
 
-      {/* 1. 스크린 테이블 */}
+      {/* ========== 1. 스크린 ========== */}
       <div className="mb-4">
         <p className="font-bold mb-2">1. 스크린</p>
         <div className="border border-gray-400">
           <table className="w-full">
             <thead>
               <tr className="bg-gray-100 border-b border-gray-400">
-                <th className="border-r border-gray-400 px-1 py-1 w-8" rowSpan={2}>No</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-16" rowSpan={2}>품류</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>부호</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>오픈사이즈</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>제작사이즈</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-24" rowSpan={2}>가이드레일<br/>유형</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>샤프트<br/>(인치)</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>케이스<br/>(인치)</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>모터</th>
+                <th className={`${thBase} w-8`} rowSpan={2}>No</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>품류</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                <th className={thBase} colSpan={2}>오픈사이즈</th>
+                <th className={thBase} colSpan={2}>제작사이즈</th>
+                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                <th className={thBase} colSpan={2}>모터</th>
                 <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
               </tr>
               <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
-                <th className="border-r border-gray-400 px-1">가로</th>
-                <th className="border-r border-gray-400 px-1">세로</th>
-                <th className="border-r border-gray-400 px-1">가로</th>
-                <th className="border-r border-gray-400 px-1">세로</th>
-                <th className="border-r border-gray-400 px-1">브라켓트</th>
-                <th className="border-r border-gray-400 px-1">용량Kg</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>브라켓트</th>
+                <th className={thBase}>용량Kg</th>
               </tr>
             </thead>
             <tbody>
-              {screenProducts.length > 0 ? (
-                screenProducts.map((group, index) => {
-                  // specification에서 가로x세로 파싱 (예: "2000 x 2500 mm")
-                  const specMatch = group.specification?.match(/(\d+)\s*[xX×]\s*(\d+)/);
-                  const width = specMatch ? specMatch[1] : '-';
-                  const height = specMatch ? specMatch[2] : '-';
-
-                  return (
-                    <tr key={group.id} className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{index + 1}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{group.productName || '-'}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">-</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center text-[9px]">백면형<br/>(120X70)</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">380X180</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">300</td>
-                      <td className="px-1 py-1 text-center">SUS마감</td>
-                    </tr>
-                  );
-                })
-              ) : (
-                <tr>
-                  <td colSpan={13} className="px-2 py-3 text-center text-gray-400">
-                    등록된 스크린 제품이 없습니다
-                  </td>
+              {MOCK_SCREEN_ROWS.map((row) => (
+                <tr key={row.no} className="border-b border-gray-300">
+                  <td className={tdCenter}>{row.no}</td>
+                  <td className={tdCenter}>{row.type}</td>
+                  <td className={tdCenter}>{row.code}</td>
+                  <td className={tdCenter}>{row.openW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.openH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.guideRail}</td>
+                  <td className={tdCenter}>{row.shaft}</td>
+                  <td className={tdCenter}>{row.caseInch}</td>
+                  <td className={tdCenter}>{row.bracket}</td>
+                  <td className={tdCenter}>{row.capacity}</td>
+                  <td className="px-1 py-1 text-center">{row.finish}</td>
                 </tr>
-              )}
+              ))}
             </tbody>
           </table>
         </div>
       </div>
 
-      {/* 2. 모터 테이블 */}
+      {/* ========== 2. 절재 ========== */}
       <div className="mb-4">
-        <p className="font-bold mb-2">2. 모터</p>
+        <p className="font-bold mb-2">2. 절재</p>
         <div className="border border-gray-400">
           <table className="w-full">
             <thead>
               <tr className="bg-gray-100 border-b border-gray-400">
-                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-14">수량</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
-                <th className="px-2 py-1 w-14">수량</th>
+                <th className={`${thBase} w-8`} rowSpan={2}>No.</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                <th className={thBase} colSpan={2}>오픈사이즈</th>
+                <th className={thBase} colSpan={2}>제작사이즈</th>
+                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                <th className={thBase} colSpan={2}>모터</th>
+                <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
+              </tr>
+              <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>브라켓트</th>
+                <th className={thBase}>용량Kg</th>
               </tr>
             </thead>
             <tbody>
-              {(motorItems.length > 0 || bracketItems.length > 0) ? (
-                <>
-                  {/* 모터 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[0]?.specification || 'KD-150K'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0]?.quantity ?? '-'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[1]?.specification || 'KD-150K'}</td>
-                    <td className="px-2 py-1 text-center">{motorItems[1]?.quantity ?? '-'}</td>
-                  </tr>
-                  {/* 브라켓트 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[0]?.specification || '380X180 [2-4"]'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0]?.quantity ?? '-'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[1]?.specification || '380X180 [2-4"]'}</td>
-                    <td className="px-2 py-1 text-center">{bracketItems[1]?.quantity ?? '-'}</td>
-                  </tr>
-                  {/* 브라켓트 추가 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">밑침통 영금</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[2]?.specification || '∠40-40 L380'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2]?.quantity ?? '-'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="px-2 py-1 text-center"></td>
-                  </tr>
-                </>
-              ) : (
-                <tr>
-                  <td colSpan={8} className="px-2 py-3 text-center text-gray-400">
-                    등록된 모터/브라켓 품목이 없습니다
-                  </td>
+              {MOCK_STEEL_ROWS.map((row) => (
+                <tr key={row.no} className="border-b border-gray-300">
+                  <td className={tdCenter}>{row.no}</td>
+                  <td className={tdCenter}>{row.code}</td>
+                  <td className={tdCenter}>{row.openW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.openH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.guideRail}</td>
+                  <td className={tdCenter}>{row.shaft}</td>
+                  <td className={tdCenter}>{row.jointBar}</td>
+                  <td className={tdCenter}>{row.caseInch}</td>
+                  <td className={tdCenter}>{row.bracket}</td>
+                  <td className={tdCenter}>{row.capacity}</td>
+                  <td className="px-1 py-1 text-center">{row.finish}</td>
                 </tr>
-              )}
+              ))}
             </tbody>
           </table>
         </div>
       </div>
 
-      {/* 3. 절곡물 */}
+      {/* ========== 3. 모터 ========== */}
       <div className="mb-4">
-        <p className="font-bold mb-2">3. 절곡물</p>
-
-        {/* 3-1. 가이드레일 */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">백면형 (120X70)</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">측면형 (120X120)</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {guideRailItems.length > 0 ? (
-                  <>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
-                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
-                          IMG
-                        </div>
-                      </td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">{guideRailItems[0]?.quantity ?? 22}</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
-                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
-                          IMG
-                        </div>
-                      </td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
-                      <td className="px-2 py-1 text-center">{guideRailItems[1]?.quantity ?? 22}</td>
-                    </tr>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">하부BASE<br/>[130X80]</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="px-2 py-1 text-center"></td>
-                    </tr>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="px-2 py-1 text-center"></td>
-                    </tr>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">KSS01</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
-                      <td className="px-2 py-1 text-center">KSS01</td>
-                    </tr>
-                  </>
-                ) : (
-                  <tr>
-                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
-                      등록된 가이드레일이 없습니다
-                    </td>
+        <p className="font-bold mb-2">3. 모터</p>
+        <div className="border border-gray-400">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-100 border-b border-gray-400">
+                <th className={`${thBase} w-20`}>항목</th>
+                <th className={`${thBase} w-20`}>구분</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={`${thBase} w-10`}>수량</th>
+                {showLotColumn && <th className={`${thBase} w-16`}>입고 LOT</th>}
+                <th className={`${thBase} w-20`}>항목</th>
+                <th className={`${thBase} w-20`}>구분</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={showLotColumn ? `${thBase} w-10` : 'px-1 py-1 w-10'}>수량</th>
+                {showLotColumn && <th className="px-1 py-1 w-16">입고 LOT</th>}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: motorRows }).map((_, i) => {
+                const left = MOCK_MOTOR_LEFT[i];
+                const right = MOCK_MOTOR_RIGHT[i];
+                return (
+                  <tr key={i} className="border-b border-gray-300">
+                    <td className={tdBase}>{left?.item || ''}</td>
+                    <td className={tdBase}>{left?.type || ''}</td>
+                    <td className={tdBase}>{left?.spec || ''}</td>
+                    <td className={tdCenter}>{left?.qty ?? ''}</td>
+                    {showLotColumn && <td className={tdCenter}>{left?.lot || ''}</td>}
+                    <td className={tdBase}>{right?.item || ''}</td>
+                    <td className={tdBase}>{right?.type || ''}</td>
+                    <td className={tdBase}>{right?.spec || ''}</td>
+                    <td className={showLotColumn ? tdCenter : 'px-1 py-1 text-center'}>{right?.qty ?? ''}</td>
+                    {showLotColumn && <td className="px-1 py-1 text-center">{right?.lot || ''}</td>}
                   </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 정보 */}
-          <div className="mt-2 border border-gray-400">
-            <table className="w-full text-[10px]">
-              <tbody>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div className="font-medium">연기차단재(W50)</div>
-                    <div>• 가이드레일 마감재</div>
-                    <div className="text-red-600 font-medium">양측에 설치</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div>EGI 0.8T +</div>
-                    <div>화이버글라스코팅직물</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
-                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
-                      IMG
-                    </div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">3,000</td>
-                  <td className="px-2 py-1 text-center">4,000</td>
-                </tr>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">44</td>
-                  <td className="px-2 py-1 text-center">1</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <div className="mt-2 text-[10px]">
-            <span className="font-medium">• 별도 추가사항</span>
-          </div>
-        </div>
-
-        {/* 3-2. 케이스(셔터박스) */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-2. 케이스(셔터박스) - EGI 1.5ST</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">&nbsp;</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">규격</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">측면부</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {caseItems.length > 0 ? (
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={3}>
-                      <div className="flex items-center justify-center h-16 border border-dashed border-gray-300">
-                        IMG
-                      </div>
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      500X330<br/>(150X300,<br/>400K원)
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      L: 4,000<br/>L: 5,000<br/>상부덮개<br/>(1219X389)
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      3<br/>4<br/>55
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">500X355</td>
-                    <td className="px-2 py-1 text-center">22</td>
-                  </tr>
-                ) : (
-                  <tr>
-                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
-                      등록된 케이스가 없습니다
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 정보 */}
-          <div className="mt-2 border border-gray-400">
-            <table className="w-full text-[10px]">
-              <tbody>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div className="font-medium">연기차단재(W50)</div>
-                    <div>• 판넬부, 전면부</div>
-                    <div className="text-red-600 font-medium">감싸에 설치</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div>EGI 0.8T +</div>
-                    <div>화이버글라스코팅직물</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
-                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
-                      IMG
-                    </div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
-                  <td className="px-2 py-1 text-center">3,000</td>
-                </tr>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
-                  <td className="px-2 py-1 text-center">44</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* 3-3. 하단마감재 */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강앨비(EGI 1.5ST) + 하단 보강철(EGI 1.1ST) + 하단 무게형 철(50X12T)</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {bottomFinishItems.length > 0 ? (
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단마감재<br/>(60X40)</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단보강<br/>(60X17)</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단무게<br/>[50X12T]</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="px-2 py-1 text-center">11</td>
-                  </tr>
-                ) : (
-                  <tr>
-                    <td colSpan={9} className="px-2 py-2 text-center text-gray-400">
-                      등록된 하단마감재가 없습니다
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
+                );
+              })}
+            </tbody>
+          </table>
         </div>
       </div>
 
-      {/* 특이사항 */}
+      {/* ========== 4. 절곡물 ========== */}
+      <div className="mb-4">
+        <p className="font-bold mb-2">4. 절곡물</p>
+
+        {/* 4-1. 가이드레일 */}
+        <div className="mb-3">
+          <p className="text-[10px] font-medium mb-1">4-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
+
+          {/* 메인 테이블 */}
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-32`}>백면형 (120X70)</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                {MOCK_GUIDE_RAIL_ITEMS.map((item, i) => (
+                  <tr key={i} className="border-b border-gray-300">
+                    {i === 0 && (
+                      <td className={tdCenter} rowSpan={MOCK_GUIDE_RAIL_ITEMS.length}>
+                        <div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
+                      </td>
+                    )}
+                    <td className={tdCenter}>{item.name}</td>
+                    <td className={tdCenter}>{item.spec}</td>
+                    <td className="px-1 py-1 text-center">{item.qty}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 연기차단재 */}
+          <div className="mt-1 border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-gray-300">
+                  <td className={tdCenter}>
+                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                  </td>
+                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.name}</td>
+                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.spec}</td>
+                  <td className="px-1 py-1 text-center">{MOCK_GUIDE_SMOKE.qty}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <p className="mt-1 text-[10px]">
+            <span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
+          </p>
+        </div>
+
+        {/* 4-2. 케이스(셔터박스) */}
+        <div className="mb-3">
+          <p className="text-[10px] font-medium mb-1">4-2. 케이스(셔터박스) - EGI 1.5ST</p>
+
+          {/* 메인 테이블 */}
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                {MOCK_CASE_ITEMS.map((item, i) => (
+                  <tr key={i} className="border-b border-gray-300">
+                    {i === 0 && (
+                      <td className={tdCenter} rowSpan={MOCK_CASE_ITEMS.length}>
+                        <div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
+                      </td>
+                    )}
+                    <td className={tdCenter}>{item.name}</td>
+                    <td className={tdCenter}>{item.spec}</td>
+                    <td className="px-1 py-1 text-center">{item.qty}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 연기차단재 */}
+          <div className="mt-1 border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-gray-300">
+                  <td className={tdCenter}>
+                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                  </td>
+                  <td className={tdCenter}>{MOCK_CASE_SMOKE.name}</td>
+                  <td className={tdCenter}>{MOCK_CASE_SMOKE.spec}</td>
+                  <td className="px-1 py-1 text-center">{MOCK_CASE_SMOKE.qty}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <p className="mt-1 text-[10px]">
+            <span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
+          </p>
+        </div>
+
+        {/* 4-3. 하단마감재 (토글: 스크린 / 절재) */}
+        <div className="mb-3">
+          {/* 토글 버튼 */}
+          <div className="flex items-center gap-2 mb-2">
+            <button
+              onClick={() => setBottomFinishView('screen')}
+              className={`px-3 py-1 text-[10px] font-bold border rounded ${
+                bottomFinishView === 'screen'
+                  ? 'bg-gray-800 text-white border-gray-800'
+                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
+              }`}
+            >
+              # 스크린의 경우
+            </button>
+            <button
+              onClick={() => setBottomFinishView('steel')}
+              className={`px-3 py-1 text-[10px] font-bold border rounded ${
+                bottomFinishView === 'steel'
+                  ? 'bg-gray-800 text-white border-gray-800'
+                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
+              }`}
+            >
+              # 절재의 경우
+            </button>
+          </div>
+
+          {bottomFinishView === 'screen' ? (
+            <>
+              <p className="text-[10px] font-medium mb-1">
+                4-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강엘비(EGI 1.5ST) + 하단 보강평철(EGI 1.1ST) + 하단 무게평철(50X12T)
+              </p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-100 border-b border-gray-400">
+                      <th className={`${thBase} w-20`}>항목</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className={`${thBase} w-10`}>수량</th>
+                      <th className={`${thBase} w-20`}>항목</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className="px-1 py-1 w-10">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {MOCK_BOTTOM_SCREEN.map((row, i) => (
+                      <tr key={i} className="border-b border-gray-300">
+                        <td className={tdBase}>{row.name}</td>
+                        <td className={tdCenter}>{row.spec}</td>
+                        <td className={tdCenter}>{row.l1}</td>
+                        <td className={tdCenter}>{row.q1}</td>
+                        <td className={tdBase}>{row.name2}</td>
+                        <td className={tdCenter}>{row.spec2}</td>
+                        <td className={tdCenter}>{row.l2}</td>
+                        <td className="px-1 py-1 text-center">{row.q2}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-[10px] font-medium mb-1">
+                4-3. 하단마감재 -EGI 1.5ST
+              </p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-100 border-b border-gray-400">
+                      <th className={`${thBase} w-32`}>하단마감재</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className="px-1 py-1 w-10">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr className="border-b border-gray-300">
+                      <td className={tdCenter}>
+                        <div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
+                      </td>
+                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.spec}</td>
+                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.length}</td>
+                      <td className="px-1 py-1 text-center">{MOCK_BOTTOM_STEEL.qty}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* ========== 5. 부자재 ========== */}
+      <div className="mb-4">
+        <p className="font-bold mb-2">5. 부자재</p>
+        <div className="border border-gray-400">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-100 border-b border-gray-400">
+                <th className={`${thBase} w-24`}>항목</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={`${thBase} w-10`}>수량</th>
+                <th className={`${thBase} w-24`}>항목</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className="px-1 py-1 w-10">수량</th>
+              </tr>
+            </thead>
+            <tbody>
+              {MOCK_SUBSIDIARY.map((row, i) => (
+                <tr key={i} className="border-b border-gray-300">
+                  <td className={tdBase}>{row.leftItem}</td>
+                  <td className={tdCenter}>{row.leftSpec}</td>
+                  <td className={tdCenter}>{row.leftQty}</td>
+                  <td className={tdBase}>{row.rightItem}</td>
+                  <td className={tdCenter}>{row.rightSpec}</td>
+                  <td className="px-1 py-1 text-center">{row.rightQty}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* ========== 특이사항 ========== */}
       {data.remarks && (
         <div className="mb-4">
           <p className="font-bold mb-2">【 특이사항 】</p>

src/components/outbound/ShipmentManagement/documents/ShippingSlip.tsx

@@ -13,5 +13,5 @@ interface ShippingSlipProps {
 }
 
 export function ShippingSlip({ data }: ShippingSlipProps) {
-  return <ShipmentOrderDocument title="출 고 증" data={data} showDispatchInfo />;
+  return <ShipmentOrderDocument title="출 고 증" data={data} showDispatchInfo showLotColumn />;
 }