feat(WEB): 절곡 중간검사 성적서 DATA 테이블 레거시 PHP 동기화

- TemplateInspectionContent에 bending DATA 렌더링 추가
  - 제품별(가이드레일/하단마감재/케이스/연기차단재) 다중 POINT 행 확장
  - 간격 외 컬럼(분류, 타입, 절곡상태, 길이, 너비, 판정) rowSpan 병합
  - DEFAULT_GAP_PROFILES 상수로 제품별 간격 도면치수 정의
  - bending_info JSON에서 제품 목록 동적 생성 (buildBendingProducts)
- InspectionReportModal에서 node_groups 기반 개소 단위 변환 추가
  - buildFromReportData()로 node_groups → WorkItemData[] 매핑
- 다단계 헤더(group_name "/" 구분자), check 라벨, POINT sub_label 지원

src/components/production/WorkOrders/documents/InspectionReportModal.tsx

@@ -24,7 +24,7 @@ import {
   saveInspectionDocument,
 } from '../actions';
 import type { WorkOrder, ProcessType } from '../types';
-import type { InspectionReportData } from '../actions';
+import type { InspectionReportData, InspectionReportNodeGroup } from '../actions';
 import { ScreenInspectionContent } from './ScreenInspectionContent';
 import { SlatInspectionContent } from './SlatInspectionContent';
 import { BendingInspectionContent } from './BendingInspectionContent';
@@ -73,16 +73,52 @@ function toInspectionData(raw: Record<string, unknown>): InspectionData {
 }
 
 /**
- * API 응답의 items를 WorkItemData[] + InspectionDataMap으로 변환
+ * API 응답을 WorkItemData[] + InspectionDataMap으로 변환
+ * node_groups가 있으면 개소(node) 단위, 없으면 개별 아이템 단위 (폴백)
  */
-function buildFromReportItems(
-  items: InspectionReportData['items'],
+function buildFromReportData(
+  reportData: InspectionReportData,
   processType: ProcessType
 ): { workItems: WorkItemData[]; inspectionDataMap: InspectionDataMap } {
   const workItems: WorkItemData[] = [];
   const inspectionDataMap: InspectionDataMap = new Map();
 
-  for (const item of items) {
+  // node_groups가 있으면 개소(node) 단위로 생성 — WorkerScreen과 동일
+  if (reportData.node_groups && reportData.node_groups.length > 0) {
+    reportData.node_groups.forEach((group: InspectionReportNodeGroup, index: number) => {
+      const nodeKey = group.node_id != null ? String(group.node_id) : `unassigned-${index}`;
+      const syntheticId = `report-node-${nodeKey}`;
+      const itemNames = group.items.map((it) => it.item_name).filter(Boolean);
+
+      workItems.push({
+        id: syntheticId,
+        apiItemId: group.items[0]?.id,
+        itemNo: index + 1,
+        itemCode: '',
+        itemName: itemNames.join(', ') || '-',
+        floor: group.floor || '-',
+        code: group.code || '-',
+        width: group.width || 0,
+        height: group.height || 0,
+        quantity: group.total_quantity,
+        processType: processType === 'bending_wip' ? 'bending' : processType,
+        steps: [],
+      });
+
+      // 개소 내 아이템 중 inspection_data가 있으면 병합
+      for (const item of group.items) {
+        if (item.inspection_data) {
+          inspectionDataMap.set(syntheticId, toInspectionData(item.inspection_data));
+          break; // 개소 단위 검사 데이터는 첫 번째 것 사용
+        }
+      }
+    });
+
+    return { workItems, inspectionDataMap };
+  }
+
+  // 폴백: 개별 아이템 단위 (node_groups 없는 구버전 응답)
+  for (const item of reportData.items) {
     const syntheticId = `report-item-${item.id}`;
 
     workItems.push({
@@ -226,7 +262,7 @@ export function InspectionReportModal({
           // 2) 검사 성적서 데이터 → workItems + inspectionDataMap 구성
           if (reportResult.success && reportResult.data) {
             const { workItems: apiItems, inspectionDataMap: apiMap } =
-              buildFromReportItems(reportResult.data.items, processType);
+              buildFromReportData(reportResult.data, processType);
             setApiWorkItems(apiItems);
             setApiInspectionDataMap(apiMap);
             setReportSummary(reportResult.data.summary);

src/components/production/WorkOrders/documents/TemplateInspectionContent.tsx

@@ -17,7 +17,7 @@
  * - select (판정): 자동 계산 적/부
  */
 
-import { useState, forwardRef, useImperativeHandle, useEffect, useMemo } from 'react';
+import React, { useState, forwardRef, useImperativeHandle, useEffect, useMemo } from 'react';
 import type { WorkOrder } from '../types';
 import type { WorkItemData } from '@/components/production/WorkerScreen/types';
 import type { InspectionDataMap } from './InspectionReportModal';
@@ -35,6 +35,7 @@ import {
   INPUT_CLASS,
 } from './inspection-shared';
 import { formatNumber } from '@/lib/utils/amount';
+import type { BendingInfoExtended } from './bending/types';
 
 export type { InspectionContentRef };
 
@@ -145,6 +146,158 @@ function isJudgmentColumn(label: string): boolean {
   return label.includes('판정');
 }
 
+// ===== Bending 검사 DATA 지원 (레거시 PHP 동기화) =====
+
+interface BendingGapPoint {
+  point: string;
+  designValue: string;
+}
+
+interface BendingProduct {
+  id: string;
+  category: string;
+  productName: string;
+  productType: string;
+  lengthDesign: string;
+  widthDesign: string;
+  gapPoints: BendingGapPoint[];
+}
+
+interface BendingExpandedRow {
+  productIdx: number;
+  product: BendingProduct;
+  pointIdx: number;
+  gapPoint: BendingGapPoint;
+  isFirstRow: boolean;
+  totalPoints: number;
+}
+
+// 절곡 제품별 기본 간격 POINT (단면 치수 - 제품 사양에 따른 고정값)
+const DEFAULT_GAP_PROFILES: Record<string, BendingGapPoint[]> = {
+  guideRailWall: [
+    { point: '(1)', designValue: '30' },
+    { point: '(2)', designValue: '78' },
+    { point: '(3)', designValue: '25' },
+    { point: '(4)', designValue: '45' },
+  ],
+  guideRailSide: [
+    { point: '(1)', designValue: '28' },
+    { point: '(2)', designValue: '75' },
+    { point: '(3)', designValue: '42' },
+    { point: '(4)', designValue: '38' },
+    { point: '(5)', designValue: '32' },
+  ],
+  bottomBar: [{ point: '(1)', designValue: '60' }],
+  caseBox: [
+    { point: '(1)', designValue: '550' },
+    { point: '(2)', designValue: '50' },
+    { point: '(3)', designValue: '385' },
+    { point: '(4)', designValue: '50' },
+    { point: '(5)', designValue: '410' },
+  ],
+  smokeW50: [
+    { point: '(1)', designValue: '50' },
+    { point: '(2)', designValue: '12' },
+  ],
+  smokeW80: [
+    { point: '(1)', designValue: '80' },
+    { point: '(2)', designValue: '12' },
+  ],
+};
+
+/** bending_info에서 제품 목록 생성, 없으면 기본값 */
+function buildBendingProducts(order: WorkOrder): BendingProduct[] {
+  const bi = order.bendingInfo as BendingInfoExtended | undefined;
+  const productCode = bi?.productCode || 'KQTS01';
+  const products: BendingProduct[] = [];
+
+  // 가이드레일 벽면형
+  if (!bi || bi.guideRail?.wall) {
+    const len = bi?.guideRail?.wall?.lengthData?.[0]?.length || 3500;
+    products.push({
+      id: 'guide-wall', category: productCode, productName: '가이드레일',
+      productType: '벽면형', lengthDesign: String(len), widthDesign: 'N/A',
+      gapPoints: DEFAULT_GAP_PROFILES.guideRailWall,
+    });
+  }
+
+  // 가이드레일 측면형
+  if (bi?.guideRail?.side) {
+    const len = bi.guideRail.side.lengthData?.[0]?.length || 3000;
+    products.push({
+      id: 'guide-side', category: productCode, productName: '가이드레일',
+      productType: '측면형', lengthDesign: String(len), widthDesign: 'N/A',
+      gapPoints: DEFAULT_GAP_PROFILES.guideRailSide,
+    });
+  }
+
+  // 하단마감재
+  products.push({
+    id: 'bottom-bar', category: productCode, productName: '하단마감재',
+    productType: '60×40', lengthDesign: '3000', widthDesign: 'N/A',
+    gapPoints: DEFAULT_GAP_PROFILES.bottomBar,
+  });
+
+  // 케이스 (shutterBox)
+  if (bi?.shutterBox?.length) {
+    bi.shutterBox.forEach((box, boxIdx) => {
+      (box.lengthData || []).forEach((ld, li) => {
+        products.push({
+          id: `case-${boxIdx}-${li}`, category: productCode, productName: '케이스',
+          productType: `${box.size || '양면'}\n${box.direction || ''}`.trim(),
+          lengthDesign: String(ld.length), widthDesign: 'N/A',
+          gapPoints: DEFAULT_GAP_PROFILES.caseBox,
+        });
+      });
+    });
+  } else {
+    products.push({
+      id: 'case-0', category: productCode, productName: '케이스',
+      productType: '양면', lengthDesign: '3000', widthDesign: 'N/A',
+      gapPoints: DEFAULT_GAP_PROFILES.caseBox,
+    });
+  }
+
+  // 연기차단재
+  products.push({
+    id: 'smoke-w50', category: productCode, productName: '연기차단재',
+    productType: '화이바 W50\n가이드레일용', lengthDesign: '-', widthDesign: '50',
+    gapPoints: DEFAULT_GAP_PROFILES.smokeW50,
+  });
+  products.push({
+    id: 'smoke-w80', category: productCode, productName: '연기차단재',
+    productType: '화이바 W80\n케이스용', lengthDesign: '-', widthDesign: '80',
+    gapPoints: DEFAULT_GAP_PROFILES.smokeW80,
+  });
+
+  return products;
+}
+
+// ===== 이미지 섹션 컴포넌트 (onError 핸들링) =====
+function SectionImage({ section }: { section: { id: number; title?: string; name?: string; image_path?: string | null } }) {
+  const [imgError, setImgError] = useState(false);
+  const title = section.title || section.name || '';
+  const url = section.image_path ? getImageUrl(section.image_path) : '';
+
+  return (
+    <div className="mb-3">
+      <p className="text-sm font-bold mb-1">■ {title}</p>
+      {url && !imgError ? (
+        <img
+          src={url}
+          alt={title}
+          className="w-full border rounded"
+          onError={() => setImgError(true)}
+        />
+      ) : (
+        <div className="border border-dashed border-gray-300 rounded p-6 text-center text-gray-400 text-xs">
+          이미지 미등록
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ===== 컴포넌트 =====
 
 export const TemplateInspectionContent = forwardRef<InspectionContentRef, TemplateInspectionContentProps>(
@@ -193,18 +346,47 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
       return map;
     }, [template.columns, allItems]);
 
-    // complex 컬럼 존재 여부 (2행 헤더 필요 판단)
-    const hasComplexColumn = useMemo(
-      () => template.columns.some(c => c.column_type === 'complex' && c.sub_labels && c.sub_labels.length > 0),
-      [template.columns]
-    );
-
     // 셀 값 상태: key = `${rowIdx}-${colId}`
     const [cellValues, setCellValues] = useState<Record<string, CellValue>>({});
     const [inadequateContent, setInadequateContent] = useState('');
 
     const effectiveWorkItems = workItems || [];
 
+    // ===== Bending template detection & expanded rows =====
+    const isBending = useMemo(() => {
+      if (order.processType === 'bending') return true;
+      return template.columns.some(col =>
+        col.sub_labels?.some(sl => sl.toLowerCase().includes('point'))
+      );
+    }, [order.processType, template.columns]);
+
+    const gapColumnId = useMemo(() => {
+      if (!isBending) return null;
+      return template.columns.find(col =>
+        col.sub_labels?.some(sl => sl.toLowerCase().includes('point'))
+      )?.id ?? null;
+    }, [isBending, template.columns]);
+
+    const bendingProducts = useMemo(() => {
+      if (!isBending) return [];
+      return buildBendingProducts(order);
+    }, [isBending, order]);
+
+    const bendingExpandedRows = useMemo(() => {
+      if (!isBending) return [];
+      const rows: BendingExpandedRow[] = [];
+      bendingProducts.forEach((product, productIdx) => {
+        const total = product.gapPoints.length;
+        product.gapPoints.forEach((gp, pointIdx) => {
+          rows.push({
+            productIdx, product, pointIdx, gapPoint: gp,
+            isFirstRow: pointIdx === 0, totalPoints: total,
+          });
+        });
+      });
+      return rows;
+    }, [isBending, bendingProducts]);
+
     // inspectionDataMap에서 초기값 복원
     // InspectionInputModal 저장 키: section_{sectionId}_item_{itemId} / 값: "ok"|"ng"|number
     // TemplateInspectionContent 내부 키: {rowIdx}-{colId} / 값: CellValue
@@ -499,31 +681,75 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
       },
     }));
 
+    // Bending 제품별 판정
+    const getBendingProductJudgment = (productIdx: number): '적' | '부' | null => {
+      const checkCol = template.columns.find(c => c.column_type === 'check');
+      if (!checkCol) return null;
+      const cell = cellValues[`b-${productIdx}-${checkCol.id}`];
+      if (cell?.status === 'bad') return '부';
+      if (cell?.status === 'good') return '적';
+      return null;
+    };
+
     // 종합판정
-    const judgments = effectiveWorkItems.map((_, idx) => getRowJudgment(idx));
+    const judgments = isBending && bendingProducts.length > 0
+      ? bendingProducts.map((_, idx) => getBendingProductJudgment(idx))
+      : effectiveWorkItems.map((_, idx) => getRowJudgment(idx));
     const overallResult = calculateOverallResult(judgments);
 
-    // 컬럼별 colspan 계산 (complex 컬럼은 sub_labels 수)
+    // 컬럼별 colspan 계산 (mng _colSpan 동기화)
     const getColSpan = (col: (typeof template.columns)[0]) => {
       if (col.column_type === 'complex' && col.sub_labels && col.sub_labels.length > 0) {
         return col.sub_labels.length;
       }
+      const label = (col.label || '').trim();
+      if (label.includes('검사항목') || label.includes('항목') ||
+          label.includes('검사기준') || label.includes('기준')) return 2;
       return 1;
     };
 
-    // 기본필드 값 해석 (field_key → WorkOrder 데이터 매핑)
+    // check 컬럼의 체크박스 라벨 추출 (sub_labels 기반, 없으면 양호/불량)
+    const getCheckLabels = (col: (typeof template.columns)[0]): [string, string] => {
+      if (col.sub_labels && col.sub_labels.length >= 2) {
+        const a = (col.sub_labels[0] || '').trim();
+        const b = (col.sub_labels[1] || '').trim();
+        if (a && b && !/^n?\d+$/i.test(a)) return [a, b];
+      }
+      return ['양호', '불량'];
+    };
+
+    // 기본필드 값 해석 (field_key 또는 label 기반 매핑)
     const resolveFieldValue = (field: (typeof template.basic_fields)[0]) => {
       if (!field) return '';
-      switch (field.field_key) {
+      // field_key가 있으면 field_key 기준, 없으면 label 기준 매칭
+      const key = field.field_key || '';
+      const label = (field.label || '').trim();
+
+      const LABEL_TO_KEY: Record<string, string> = {
+        '품명': 'product_name',
+        '제품명': 'product_name',
+        '규격': 'specification',
+        '수주 LOT NO': 'lot_no',
+        'LOT NO': 'lot_no',
+        '로트크기': 'lot_size',
+        '발주처': 'client',
+        '현장명': 'site_name',
+        '검사일자': 'inspection_date',
+        '검사자': 'inspector',
+      };
+
+      const resolvedKey = key || LABEL_TO_KEY[label] || '';
+
+      switch (resolvedKey) {
         case 'product_name': return order.items?.[0]?.productName || '-';
         case 'specification': return field.default_value || '-';
         case 'lot_no': return order.lotNo || '-';
-        case 'lot_size': return `${order.items?.length || 0} 개소`;
+        case 'lot_size': return `${effectiveWorkItems.length || order.items?.length || 0} 개소`;
         case 'client': return order.client || '-';
         case 'site_name': return order.projectName || '-';
         case 'inspection_date': return fullDate;
         case 'inspector': return primaryAssignee;
-        default: return field.default_value || '(입력)';
+        default: return field.default_value || '-';
       }
     };
 
@@ -576,6 +802,15 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
           );
         }
 
+        // POINT → 포인트 번호 표시 (mng mCell 동기화)
+        if (sl.includes('point') || sl.includes('포인트')) {
+          return (
+            <td key={`${col.id}-s${subIdx}`} className="border border-gray-400 px-1 py-1.5 text-center">
+              <span className="text-gray-400 text-[10px] italic">({subIdx + 1})</span>
+            </td>
+          );
+        }
+
         // 측정값 → 입력 필드
         const mIdx = inputIdx++;
         return (
@@ -599,6 +834,302 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
       });
     };
 
+    // 다단계 헤더 행 빌드 (group_name "/" 구분자 지원, mng renderHeaders 동기화)
+    const buildHeaderRows = () => {
+      const cols = template.columns;
+      if (cols.length === 0) return [];
+
+      const thCls = 'border border-gray-400 px-2 py-1.5 bg-gray-100 text-center';
+      const thSubCls = 'border border-gray-400 px-1 py-1 bg-gray-100 text-center text-[10px]';
+
+      // 1) group_name "/" split → depth 배열
+      const colGroups = cols.map(col => {
+        const gn = (col.group_name || '').trim();
+        return gn ? gn.split('/').map(s => s.trim()) : [];
+      });
+      // 단일 레벨 group_name은 그룹 행 생성 안 함 (하위 호환)
+      const maxDepth = Math.max(0, ...colGroups.map(g => g.length > 1 ? g.length : 0));
+      const needSubRow = cols.some(c =>
+        c.column_type === 'complex' && c.sub_labels && c.sub_labels.length > 0
+      );
+      const totalHeaderRows = maxDepth + 1 + (needSubRow ? 1 : 0);
+
+      const rows: React.ReactElement[] = [];
+
+      // 2) 그룹 행들 (maxDepth > 0일 때만)
+      if (maxDepth > 0) {
+        for (let depth = 0; depth < maxDepth; depth++) {
+          const cells: React.ReactElement[] = [];
+          let ci = 0;
+
+          while (ci < cols.length) {
+            const levels = colGroups[ci];
+            const col = cols[ci];
+
+            // 그룹 없는/단일 레벨: depth=0에서 전체 rowspan
+            if (levels.length <= 1) {
+              if (depth === 0) {
+                const cs = getColSpan(col);
+                cells.push(
+                  <th key={`g0-${ci}`} className={thCls}
+                      colSpan={cs > 1 ? cs : undefined}
+                      rowSpan={totalHeaderRows}
+                      style={col.width ? { width: col.width } : undefined}>
+                    {col.label}
+                  </th>
+                );
+              }
+              ci++; continue;
+            }
+
+            if (levels.length <= depth) { ci++; continue; }
+
+            // 같은 prefix 중복 방지
+            const prefix = levels.slice(0, depth + 1).join('/');
+            let isFirst = true;
+            for (let k = 0; k < ci; k++) {
+              if (colGroups[k].length > depth &&
+                  colGroups[k].slice(0, depth + 1).join('/') === prefix) {
+                isFirst = false; break;
+              }
+            }
+            if (!isFirst) { ci++; continue; }
+
+            // colspan 합산
+            let span = getColSpan(col);
+            let cj = ci + 1;
+            while (cj < cols.length) {
+              if (colGroups[cj].length > depth &&
+                  colGroups[cj].slice(0, depth + 1).join('/') === prefix) {
+                span += getColSpan(cols[cj]); cj++;
+              } else break;
+            }
+
+            // 하위 그룹 존재 여부
+            let hasDeeper = false;
+            for (let k = ci; k < cj; k++) {
+              if (colGroups[k].length > depth + 1) { hasDeeper = true; break; }
+            }
+
+            const groupLabel = levels[depth];
+            const rs = (!hasDeeper && depth < maxDepth - 1) ? maxDepth - depth : undefined;
+            cells.push(
+              <th key={`g-${ci}-${depth}`} className={thCls} colSpan={span} rowSpan={rs}>
+                {groupLabel}
+              </th>
+            );
+            ci = cj;
+          }
+
+          rows.push(<tr key={`grp-${depth}`}>{cells}</tr>);
+        }
+      }
+
+      // 3) 컬럼 라벨 행
+      const labelCells: React.ReactElement[] = [];
+      cols.forEach((col, idx) => {
+        const levels = colGroups[idx];
+        if (maxDepth > 0 && levels.length <= 1) return;
+
+        const cs = getColSpan(col);
+        const isComplex = col.column_type === 'complex' && col.sub_labels && col.sub_labels.length > 0;
+
+        if (needSubRow && isComplex) {
+          labelCells.push(
+            <th key={col.id} className={thCls} colSpan={cs}>{col.label}</th>
+          );
+        } else if (needSubRow) {
+          labelCells.push(
+            <th key={col.id} className={thCls}
+                colSpan={cs > 1 ? cs : undefined} rowSpan={2}
+                style={col.width ? { width: col.width } : undefined}>
+              {col.label}
+            </th>
+          );
+        } else {
+          labelCells.push(
+            <th key={col.id} className={thCls}
+                colSpan={cs > 1 ? cs : undefined}
+                style={col.width ? { width: col.width } : undefined}>
+              {col.label}
+            </th>
+          );
+        }
+      });
+      rows.push(<tr key="labels">{labelCells}</tr>);
+
+      // 4) sub_labels 행
+      if (needSubRow) {
+        const subCells: React.ReactElement[] = [];
+        cols.forEach(col => {
+          if (col.column_type === 'complex' && col.sub_labels && col.sub_labels.length > 0) {
+            col.sub_labels.forEach((sl, si) => {
+              const slLower = (sl || '').toLowerCase();
+              const isBasis = slLower.includes('도면') || slLower.includes('기준');
+              subCells.push(
+                <th key={`${col.id}-sh-${si}`} className={thSubCls}
+                    style={isBasis ? { background: '#f3f4f6' } : undefined}>
+                  {sl}
+                </th>
+              );
+            });
+          }
+        });
+        rows.push(<tr key="sublabels">{subCells}</tr>);
+      }
+
+      return rows;
+    };
+
+    // --- Bending DATA 테이블 body 렌더링 (제품별 다중 POINT 행 + rowSpan 병합) ---
+    const renderBendingBody = () => {
+      return bendingExpandedRows.map((row) => {
+        const { productIdx, product, pointIdx, gapPoint, isFirstRow, totalPoints } = row;
+
+        return (
+          <tr key={`b-${productIdx}-${pointIdx}`}>
+            {template.columns.map(col => {
+              const isGapCol = col.id === gapColumnId;
+
+              // 간격 외 컬럼: 첫 행만 렌더 (rowSpan으로 병합)
+              if (!isGapCol && !isFirstRow) return null;
+
+              const rs = isFirstRow && !isGapCol ? totalPoints : undefined;
+              const cellKey = isGapCol
+                ? `b-${productIdx}-p${pointIdx}-${col.id}`
+                : `b-${productIdx}-${col.id}`;
+              const cell = cellValues[cellKey];
+              const label = col.label.trim();
+
+              // 1. 분류/제품명 (text)
+              if (col.column_type === 'text' && (label.includes('분류') || label.includes('제품명'))) {
+                return (
+                  <td key={col.id} rowSpan={rs}
+                      className="border border-gray-400 px-2 py-1.5 text-center align-middle text-xs"
+                      style={col.width ? { width: col.width } : undefined}>
+                    <div>{product.category}</div>
+                    <div className="font-medium">{product.productName}</div>
+                  </td>
+                );
+              }
+
+              // 2. 타입 (text)
+              if (col.column_type === 'text' && label === '타입') {
+                return (
+                  <td key={col.id} rowSpan={rs}
+                      className="border border-gray-400 px-2 py-1.5 text-center align-middle text-xs whitespace-pre-line"
+                      style={col.width ? { width: col.width } : undefined}>
+                    {product.productType}
+                  </td>
+                );
+              }
+
+              // 3. check (절곡상태 - 양호/불량)
+              if (col.column_type === 'check') {
+                const [goodLabel, badLabel] = getCheckLabels(col);
+                return (
+                  <td key={col.id} rowSpan={rs} className="border border-gray-400 p-1"
+                      colSpan={getColSpan(col) > 1 ? getColSpan(col) : undefined}>
+                    <div className="flex flex-col items-center gap-0.5">
+                      <label className="flex items-center gap-0.5 cursor-pointer text-xs whitespace-nowrap">
+                        <InspectionCheckbox
+                          checked={cell?.status === 'good'}
+                          onClick={() => updateCell(cellKey, { status: cell?.status === 'good' ? null : 'good' })}
+                          readOnly={readOnly}
+                        />
+                        {goodLabel}
+                      </label>
+                      <label className="flex items-center gap-0.5 cursor-pointer text-xs whitespace-nowrap">
+                        <InspectionCheckbox
+                          checked={cell?.status === 'bad'}
+                          onClick={() => updateCell(cellKey, { status: cell?.status === 'bad' ? null : 'bad' })}
+                          readOnly={readOnly}
+                        />
+                        {badLabel}
+                      </label>
+                    </div>
+                  </td>
+                );
+              }
+
+              // 4. complex 간격 (per-POINT) → POINT + 도면치수 + 측정값
+              if (isGapCol && col.column_type === 'complex' && col.sub_labels) {
+                return col.sub_labels.map((sl, si) => {
+                  const slLower = sl.toLowerCase();
+                  if (slLower.includes('point') || slLower.includes('포인트')) {
+                    return (
+                      <td key={`${col.id}-s${si}`}
+                          className="border border-gray-400 px-1 py-1.5 text-center text-xs">
+                        {gapPoint.point}
+                      </td>
+                    );
+                  }
+                  if (slLower.includes('도면') || slLower.includes('기준')) {
+                    return (
+                      <td key={`${col.id}-s${si}`}
+                          className="border border-gray-400 px-2 py-1.5 text-center text-blue-600 font-bold text-xs">
+                        {gapPoint.designValue}
+                      </td>
+                    );
+                  }
+                  return (
+                    <td key={`${col.id}-s${si}`} className="border border-gray-400 p-0.5">
+                      <input type="text" className={INPUT_CLASS}
+                        value={cell?.measurements?.[0] || ''}
+                        onChange={e => updateCell(cellKey, { measurements: [e.target.value, '', ''] })}
+                        readOnly={readOnly} placeholder="측정값"
+                      />
+                    </td>
+                  );
+                });
+              }
+
+              // 5. complex 길이/너비 (merged) → 도면치수 + 측정값
+              if (!isGapCol && col.column_type === 'complex' && col.sub_labels) {
+                const isLen = label.includes('길이');
+                const designVal = isLen ? product.lengthDesign : product.widthDesign;
+                return col.sub_labels.map((sl, si) => {
+                  const slLower = sl.toLowerCase();
+                  if (slLower.includes('도면') || slLower.includes('기준')) {
+                    return (
+                      <td key={`${col.id}-s${si}`} rowSpan={rs}
+                          className="border border-gray-400 px-2 py-1.5 text-center text-blue-600 font-bold text-xs">
+                        {designVal}
+                      </td>
+                    );
+                  }
+                  return (
+                    <td key={`${col.id}-s${si}`} rowSpan={rs} className="border border-gray-400 p-0.5">
+                      <input type="text" className={INPUT_CLASS}
+                        value={cell?.measurements?.[si] || ''}
+                        onChange={e => {
+                          const m: [string, string, string] = [...(cell?.measurements || ['', '', ''])] as [string, string, string];
+                          m[si] = e.target.value;
+                          updateCell(cellKey, { measurements: m });
+                        }}
+                        readOnly={readOnly} placeholder="측정값"
+                      />
+                    </td>
+                  );
+                });
+              }
+
+              // 6. 판정 (적/부)
+              if (isJudgmentColumn(label)) {
+                return <JudgmentCell key={col.id} judgment={getBendingProductJudgment(productIdx)} rowSpan={rs} />;
+              }
+
+              // fallback
+              return (
+                <td key={col.id} rowSpan={rs}
+                    className="border border-gray-400 px-2 py-1.5 text-center text-xs">-</td>
+              );
+            })}
+          </tr>
+        );
+      });
+    };
+
     return (
       <div className="p-6 bg-white">
         {/* ===== 헤더: KD + 회사명(좌) | 제목(중앙) | 결재라인(우) ===== */}
@@ -677,24 +1208,11 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
 
         {/* ===== 이미지 섹션: items 없는 섹션 ===== */}
         {imageSections.map(section => (
-          <div key={section.id} className="mb-3">
-            <p className="text-sm font-bold mb-1">■ {section.title || section.name}</p>
-            {section.image_path ? (
-              <img
-                src={getImageUrl(section.image_path)}
-                alt={section.title || section.name}
-                className="w-full border rounded"
-              />
-            ) : (
-              <div className="border border-dashed border-gray-300 rounded p-6 text-center text-gray-400 text-xs">
-                이미지 미등록
-              </div>
-            )}
-          </div>
+          <SectionImage key={section.id} section={section} />
         ))}
 
         {/* ===== DATA 테이블: columns 기반 헤더 + work items 행 ===== */}
-        {template.columns.length > 0 && effectiveWorkItems.length > 0 && (
+        {template.columns.length > 0 && (isBending ? bendingProducts.length > 0 : effectiveWorkItems.length > 0) && (
           <>
             {dataSections.length > 0 && (
               <p className="text-sm font-bold mb-1 mt-3">■ {dataSections[0].title || dataSections[0].name}</p>
@@ -702,44 +1220,10 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
             <div className="overflow-x-auto">
               <table className="w-full border-collapse text-xs">
                 <thead>
-                  {/* 상위 헤더 */}
-                  <tr className="bg-gray-100">
-                    {template.columns.map(col => {
-                      const isComplex = col.column_type === 'complex' && col.sub_labels && col.sub_labels.length > 0;
-                      return (
-                        <th
-                          key={col.id}
-                          className="border border-gray-400 px-2 py-1.5"
-                          colSpan={getColSpan(col)}
-                          rowSpan={isComplex ? 1 : (hasComplexColumn ? 2 : 1)}
-                          style={col.width ? { width: col.width } : undefined}
-                        >
-                          {col.label}
-                        </th>
-                      );
-                    })}
-                  </tr>
-                  {/* 하위 헤더: complex 컬럼의 sub_labels */}
-                  {hasComplexColumn && (
-                    <tr className="bg-gray-100">
-                      {template.columns.map(col => {
-                        if (col.column_type !== 'complex' || !col.sub_labels || col.sub_labels.length === 0) {
-                          return null; // rowSpan=2로 이미 커버
-                        }
-                        return col.sub_labels.map((subLabel, subIdx) => (
-                          <th
-                            key={`${col.id}-sh-${subIdx}`}
-                            className="border border-gray-400 px-1 py-1 text-[10px]"
-                          >
-                            {subLabel}
-                          </th>
-                        ));
-                      })}
-                    </tr>
-                  )}
+                  {buildHeaderRows()}
                 </thead>
                 <tbody>
-                  {effectiveWorkItems.map((wi, rowIdx) => (
+                  {isBending ? renderBendingBody() : effectiveWorkItems.map((wi, rowIdx) => (
                     <tr key={wi.id}>
                       {template.columns.map(col => {
                         const cellKey = `${rowIdx}-${col.id}`;
@@ -759,10 +1243,12 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
                           return <JudgmentCell key={col.id} judgment={getRowJudgment(rowIdx)} />;
                         }
 
-                        // check → 양호/불량
+                        // check → 커스텀 라벨 (mng _getCheckLabels 동기화)
                         if (col.column_type === 'check') {
+                          const [goodLabel, badLabel] = getCheckLabels(col);
                           return (
-                            <td key={col.id} className="border border-gray-400 p-1">
+                            <td key={col.id} className="border border-gray-400 p-1"
+                                colSpan={getColSpan(col) > 1 ? getColSpan(col) : undefined}>
                               <div className="flex flex-col items-center gap-0.5">
                                 <label className="flex items-center gap-0.5 cursor-pointer text-xs whitespace-nowrap">
                                   <InspectionCheckbox
@@ -770,7 +1256,7 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
                                     onClick={() => updateCell(cellKey, { status: cell?.status === 'good' ? null : 'good' })}
                                     readOnly={readOnly}
                                   />
-                                  양호
+                                  {goodLabel}
                                 </label>
                                 <label className="flex items-center gap-0.5 cursor-pointer text-xs whitespace-nowrap">
                                   <InspectionCheckbox
@@ -778,7 +1264,7 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
                                     onClick={() => updateCell(cellKey, { status: cell?.status === 'bad' ? null : 'bad' })}
                                     readOnly={readOnly}
                                   />
-                                  불량
+                                  {badLabel}
                                 </label>
                               </div>
                             </td>
@@ -793,7 +1279,8 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
                         // select (판정 외) → 텍스트 입력
                         if (col.column_type === 'select') {
                           return (
-                            <td key={col.id} className="border border-gray-400 p-0.5">
+                            <td key={col.id} className="border border-gray-400 p-0.5"
+                                colSpan={getColSpan(col) > 1 ? getColSpan(col) : undefined}>
                               <input
                                 type="text"
                                 className={INPUT_CLASS}
@@ -808,7 +1295,8 @@ export const TemplateInspectionContent = forwardRef<InspectionContentRef, Templa
 
                         // text/기타 → 텍스트 입력
                         return (
-                          <td key={col.id} className="border border-gray-400 p-0.5">
+                          <td key={col.id} className="border border-gray-400 p-0.5"
+                              colSpan={getColSpan(col) > 1 ? getColSpan(col) : undefined}>
                             <input
                               type="text"
                               className={INPUT_CLASS}