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/orders/documents/SalesOrderDocument.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 /**
- * 수주서 문서 컴포넌트
- * - 스크린샷 기반 디자인
- * - 제목 좌측, 결재란 우측
- * - 신청업체/신청내용/납품정보 3열 구조
- * - 스크린, 모터, 절곡물 테이블
+ * 수주서 문서 컴포넌트 (기획서 D1.8 기준 리디자인)
+ * - 출고증(ShipmentOrderDocument)과 동일한 자재 섹션 구조
+ * - 수주서 전용 헤더 (결재란, 로트번호, 제품코드, 인정번호)
+ * - 배차정보/LOT 컬럼 없음
  */
 
+import { useState } from "react";
 import { getTodayString } from "@/utils/date";
 import { OrderItem } from "../actions";
 import { ProductInfo } from "./OrderDocumentModal";
@@ -15,8 +15,8 @@ import { ConstructionApprovalTable } from "@/components/document-system";
 
 interface SalesOrderDocumentProps {
   documentNumber?: string;
-  orderNumber: string;  // 로트번호
-  certificationNumber?: string;  // 인정번호
+  orderNumber: string;
+  certificationNumber?: string;
   orderDate?: string;
   client: string;
   siteName?: string;
@@ -35,23 +35,64 @@ interface SalesOrderDocumentProps {
   remarks?: string;
 }
 
-/**
- * 수량 포맷 함수
- */
-function formatQuantity(quantity: number, unit?: string): string {
-  const countableUnits = ["EA", "SET", "PCS", "개", "세트", "BOX", "ROLL"];
-  const upperUnit = (unit || "").toUpperCase();
+// ===== 문서 전용 목데이터 (출고증과 동일 구조) =====
 
-  if (countableUnits.includes(upperUnit)) {
-    return Math.round(quantity).toLocaleString();
-  }
+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 rounded = Math.round(quantity * 10000) / 10000;
-  return rounded.toLocaleString(undefined, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 4
-  });
-}
+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 MOCK_MOTOR_LEFT = [
+  { item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6 },
+  { item: '브라켓트', type: '-', spec: '380X180', qty: 6 },
+  { item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4 },
+];
+
+const MOCK_MOTOR_RIGHT = [
+  { item: '전동개폐기', type: '릴박스', spec: '-', qty: 1 },
+  { item: '전동개폐기', type: '매입', spec: '-', qty: 1 },
+];
+
+const MOCK_GUIDE_RAIL_ITEMS = [
+  { name: '항목명', spec: 'L: 3,000', qty: 22 },
+  { name: '하부BASE', spec: '130X80', qty: 22 },
+];
+
+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 SalesOrderDocument({
   documentNumber = "ABC123",
@@ -73,53 +114,14 @@ export function SalesOrderDocument({
   products = [],
   remarks,
 }: SalesOrderDocumentProps) {
-  // 스크린 제품만 필터링
-  const screenProducts = products.filter(p =>
-    p.productCategory?.includes("스크린") ||
-    p.productName?.includes("스크린") ||
-    p.productName?.includes("방화") ||
-    p.productName?.includes("셔터")
-  );
+  const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');
 
-  // 모터 아이템 필터링
-  const motorItems = items.filter(item =>
-    item.itemName?.toLowerCase().includes("모터") ||
-    item.type?.includes("모터") ||
-    item.itemCode?.startsWith("MT")
-  );
-
-  // 브라켓 아이템 필터링
-  const bracketItems = items.filter(item =>
-    item.itemName?.includes("브라켓") ||
-    item.type?.includes("브라켓")
-  );
-
-  // 가이드레일 아이템 필터링
-  const guideRailItems = items.filter(item =>
-    item.itemName?.includes("가이드") ||
-    item.itemName?.includes("레일") ||
-    item.type?.includes("가이드")
-  );
-
-  // 케이스 아이템 필터링
-  const caseItems = items.filter(item =>
-    item.itemName?.includes("케이스") ||
-    item.itemName?.includes("셔터박스") ||
-    item.type?.includes("케이스")
-  );
-
-  // 하단마감재 아이템 필터링
-  const bottomFinishItems = items.filter(item =>
-    item.itemName?.includes("하단") ||
-    item.itemName?.includes("마감") ||
-    item.type?.includes("하단마감")
-  );
+  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">수 주 서</h1>
           <div className="text-[10px] space-y-1">
@@ -129,30 +131,26 @@ export function SalesOrderDocument({
             </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">{products[0]?.productCategory || "-"}</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">{products[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">{orderNumber}</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">{products[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">{certificationNumber}</td>
           </tr>
         </tbody>
       </table>
 
-      {/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
+      {/* ========== 3열 섹션: 신청업체 | 신청내용 | 납품정보 ========== */}
       <div className="border border-gray-400 mb-4">
         <div className="grid grid-cols-3">
           {/* 신청업체 */}
@@ -165,21 +163,17 @@ export function SalesOrderDocument({
                   <td className="px-2 py-1">{orderDate}</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">{client}</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">{manager}</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">{managerContact}</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
-                  <td className="px-2 py-1">{address}</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -201,14 +195,10 @@ export function SalesOrderDocument({
                   <td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
                   <td className="px-2 py-1">{expectedShipDate}</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">{shutterCount}개소</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>
@@ -230,377 +220,411 @@ export function SalesOrderDocument({
                   <td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
                   <td className="px-2 py-1">{recipientContact}</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">{deliveryMethod}</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">{address}</div>
+        </div>
       </div>
 
       <p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
 
-      {/* 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((product, index) => (
-                  <tr key={index} 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">{product.productCategory || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.code || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</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]?.spec || "KD-150K"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0] ? formatQuantity(motorItems[0].quantity, motorItems[0].unit) : "6"}</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]?.spec || "KD-150K"}</td>
-                    <td className="px-2 py-1 text-center">{motorItems[1] ? formatQuantity(motorItems[1].quantity, motorItems[1].unit) : "6"}</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]?.spec || "380X180 [2-4\"]"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0] ? formatQuantity(bracketItems[0].quantity, bracketItems[0].unit) : "6"}</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]?.spec || "380X180 [2-4\"]"}</td>
-                    <td className="px-2 py-1 text-center">{bracketItems[1] ? formatQuantity(bracketItems[1].quantity, bracketItems[1].unit) : "6"}</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]?.spec || "∠40-40 L380"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2] ? formatQuantity(bracketItems[2].quantity, bracketItems[2].unit) : "44"}</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 ? (
-                  <>
-                    {/* 1행: L: 3,000 / 22 */}
-                    <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">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">22</td>
-                    </tr>
-                    {/* 2행: 하부BASE */}
-                    <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>
-                    {/* 3행: 빈 행 */}
-                    <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>
-                    {/* 4행: 제품명 */}
-                    <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>
+                <th className={`${thBase} w-20`}>항목</th>
+                <th className={`${thBase} w-20`}>구분</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className="px-1 py-1 w-10">수량</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>
+                    <td className={tdBase}>{right?.item || ''}</td>
+                    <td className={tdBase}>{right?.type || ''}</td>
+                    <td className={tdBase}>{right?.spec || ''}</td>
+                    <td className="px-1 py-1 text-center">{right?.qty ?? ''}</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>
+
+      {/* ========== 특이사항 ========== */}
       {remarks && (
         <div className="mb-4">
           <p className="font-bold mb-2">【 특이사항 】</p>
@@ -611,4 +635,4 @@ export function SalesOrderDocument({
       )}
     </div>
   );
-}
+}