// 수주/생산관리/공정관리 플로우차트 컴포넌트
// 검은색 라인 도형(네모, 마름모, 원형)으로 구성
import React, { useState } from 'react';

const ProductionUserFlow = () => {
  const [activeFlow, setActiveFlow] = useState('main');

  // 직사각형 노드 (프로세스)
  const Rectangle = ({ children, className = '' }) => (
    <div className={`border-2 border-black bg-white px-4 py-2 text-sm font-medium text-center min-w-[80px] ${className}`}>
      {children}
    </div>
  );

  // 모서리 둥근 직사각형 (시작/종료)
  const RoundedRect = ({ children, className = '' }) => (
    <div className={`border-2 border-black bg-white px-4 py-2 rounded-full text-sm font-medium text-center min-w-[80px] ${className}`}>
      {children}
    </div>
  );

  // 마름모 (판단/분기) - 크기 증가
  const Diamond = ({ children, className = '' }) => (
    <div className={`relative w-28 h-28 flex items-center justify-center ${className}`}>
      <div className="absolute border-2 border-black bg-white transform rotate-45"
           style={{ width: '80px', height: '80px', margin: 'auto', top: 0, bottom: 0, left: 0, right: 0 }}></div>
      <span className="relative z-10 text-xs font-bold text-center leading-tight">{children}</span>
    </div>
  );

  // 원형 (연결점)
  const Circle = ({ children, className = '' }) => (
    <div className={`w-10 h-10 border-2 border-black bg-white rounded-full flex items-center justify-center text-xs font-bold ${className}`}>
      {children}
    </div>
  );

  // 화살표 (오른쪽)
  const ArrowRight = ({ label = '' }) => (
    <div className="flex flex-col items-center mx-1">
      <div className="flex items-center">
        <div className="w-10 h-0.5 bg-black"></div>
        <div className="w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-l-[10px] border-l-black"></div>
      </div>
      {label && <span className="text-xs font-bold text-black mt-1">{label}</span>}
    </div>
  );

  // 화살표 (아래)
  const ArrowDown = ({ label = '' }) => (
    <div className="flex items-center my-1">
      <div className="flex flex-col items-center">
        <div className="w-0.5 h-6 bg-black"></div>
        <div className="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[10px] border-t-black"></div>
      </div>
      {label && <span className="text-xs font-bold text-black ml-2">{label}</span>}
    </div>
  );

  // 수평선 (분기용)
  const HLine = ({ width = 'w-12' }) => (
    <div className={`${width} h-0.5 bg-black`}></div>
  );

  // 문서 도형 (물결 하단)
  const Document = ({ children, className = '' }) => (
    <div className={`border-2 border-black bg-yellow-50 px-3 py-2 text-xs font-medium text-center min-w-[70px] relative ${className}`}>
      {children}
      <div className="absolute bottom-0 left-0 right-0 h-1 bg-yellow-50 border-b-2 border-black" style={{ borderRadius: '0 0 50% 50%' }}></div>
    </div>
  );

  // 메인 플로우 (수주 → 출하)
  const MainFlowChart = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-8 border-b pb-2">
        1. 전체 업무 흐름도 (수주 → 출하)
      </h2>

      <div className="flex flex-col items-center min-w-[600px]">
        <RoundedRect>시작</RoundedRect>
        <ArrowDown />
        <Rectangle>견적 작성</Rectangle>
        <ArrowDown />

        <Diamond>수주<br/>확정?</Diamond>

        <div className="flex items-start justify-center w-full mt-2">
          <div className="flex flex-col items-center">
            <span className="text-sm font-bold text-green-600 bg-green-100 px-3 py-1 rounded border-2 border-green-400">Y</span>
            <ArrowDown />
            <Rectangle>수주 등록</Rectangle>
            <ArrowDown />

            <Diamond>자동<br/>생성?</Diamond>

            <div className="flex items-start justify-center gap-16 mt-2">
              <div className="flex flex-col items-center">
                <span className="text-sm font-bold text-green-600 bg-green-100 px-3 py-1 rounded border-2 border-green-400 mb-2">Y</span>
                <ArrowDown />
                <Rectangle>AI 자동생성</Rectangle>
              </div>
              <div className="flex flex-col items-center">
                <span className="text-sm font-bold text-red-600 bg-red-100 px-3 py-1 rounded border-2 border-red-400 mb-2">N</span>
                <ArrowDown />
                <Rectangle>수동 입력</Rectangle>
              </div>
            </div>

            <div className="flex items-center mt-6">
              <HLine width="w-20" />
              <Circle>A</Circle>
              <HLine width="w-20" />
            </div>
            <ArrowDown />

            <Rectangle>작업지시 확정</Rectangle>
            <ArrowDown />
            <Rectangle>자재 투입</Rectangle>
            <ArrowDown />
            <Rectangle>공정별 생산</Rectangle>
            <div className="text-xs text-gray-500 my-1">(스크린/슬랫/절곡/재고)</div>
            <ArrowDown />
            <Rectangle>작업실적 등록</Rectangle>
            <ArrowDown />

            <Diamond>검사<br/>합격?</Diamond>

            <div className="flex items-start justify-center gap-16 mt-2">
              <div className="flex flex-col items-center">
                <span className="text-sm font-bold text-green-600 bg-green-100 px-3 py-1 rounded border-2 border-green-400 mb-2">Y</span>
                <ArrowDown />
                <Rectangle>포장</Rectangle>
                <ArrowDown />
                <Rectangle>출하</Rectangle>
                <ArrowDown />
                <RoundedRect>종료</RoundedRect>
              </div>
              <div className="flex flex-col items-center">
                <span className="text-sm font-bold text-red-600 bg-red-100 px-3 py-1 rounded border-2 border-red-400 mb-2">N</span>
                <ArrowDown />
                <Rectangle className="border-red-500">부적합품 처리</Rectangle>
                <div className="text-xs text-gray-500 mt-2">(재작업 또는 폐기)</div>
              </div>
            </div>
          </div>

          <div className="flex flex-col items-center ml-24">
            <span className="text-sm font-bold text-red-600 bg-red-100 px-3 py-1 rounded border-2 border-red-400 mb-2">N</span>
            <ArrowDown />
            <Rectangle className="bg-gray-100">견적 취소/보류</Rectangle>
            <ArrowDown />
            <RoundedRect className="bg-gray-100">종료</RoundedRect>
          </div>
        </div>
      </div>
    </div>
  );

  // 작업지시 상세 플로우 (수주 자동 생성 기반)
  const WorkOrderFlowChart = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        2. 작업지시 생성 및 관리 플로우
      </h2>
      <p className="text-sm text-gray-600 mb-8">수주 확정 시 공정별 작업지시 자동 생성 → 담당자 배정 → 작업 진행</p>

      {/* 메인 플로우 */}
      <div className="mb-10">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 정상 프로세스: 수주 → 자동 생성 ]</h3>
        <div className="flex flex-col items-center min-w-[500px]">
          <RoundedRect>수주 확정</RoundedRect>
          <ArrowDown />
          <Rectangle>회계 확인</Rectangle>
          <div className="text-xs text-gray-500 mt-1">(입금확인/외상승인)</div>
          <ArrowDown />
          <Rectangle className="bg-blue-50 border-blue-500">생산지시</Rectangle>
          <ArrowDown />

          <div className="border-2 border-dashed border-blue-400 rounded-lg p-4 bg-blue-50/30">
            <div className="text-xs text-blue-600 font-bold mb-2 text-center">[ 자동 생성 영역 ]</div>
            <div className="flex items-start justify-center gap-8">
              <div className="flex flex-col items-center">
                <Rectangle className="text-xs bg-blue-100 border-blue-400">스크린 작업지시</Rectangle>
                <div className="text-xs text-gray-500 mt-1">망+앤드락+미싱</div>
              </div>
              <div className="flex flex-col items-center">
                <Rectangle className="text-xs bg-purple-100 border-purple-400">슬랫 작업지시</Rectangle>
                <div className="text-xs text-gray-500 mt-1">코일절단</div>
              </div>
              <div className="flex flex-col items-center">
                <Rectangle className="text-xs bg-orange-100 border-orange-400">절곡 작업지시</Rectangle>
                <div className="text-xs text-gray-500 mt-1">부품+철재</div>
              </div>
            </div>
          </div>

          <ArrowDown />
          <Rectangle className="bg-yellow-50 border-yellow-500">생산관리자: 담당자 배정</Rectangle>
          <div className="text-xs text-gray-500 mt-1">(팀별/개인별 선택)</div>
          <ArrowDown />

          <Diamond>승인<br/>완료?</Diamond>

          <div className="flex items-start justify-center gap-16 mt-2">
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-green-600 bg-green-100 px-3 py-1 rounded border-2 border-green-400 mb-2">Y</span>
              <ArrowDown />
              <Rectangle>작업지시 확정</Rectangle>
              <ArrowDown />
              <Rectangle>자재 투입</Rectangle>
              <ArrowDown />
              <Rectangle>작업 시작</Rectangle>
              <ArrowDown />
              <RoundedRect>작업자 화면 이동</RoundedRect>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-red-600 bg-red-100 px-3 py-1 rounded border-2 border-red-400 mb-2">N</span>
              <ArrowDown />
              <Rectangle className="border-red-400">수정 필요</Rectangle>
              <div className="text-xs text-gray-500 mt-2">↺ 담당자 재배정</div>
            </div>
          </div>
        </div>
      </div>

      {/* 예외 케이스 안내 */}
      <div className="mt-8 pt-6 border-t-2 border-gray-300">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 예외 케이스 ]</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="p-4 border-2 border-gray-300 rounded bg-gray-50">
            <div className="text-sm font-bold text-gray-700 mb-2">📋 샘플/시제품</div>
            <p className="text-xs text-gray-600">내부요청 수주 생성</p>
            <p className="text-xs text-gray-500">(거래처: 내부, 타입: 샘플)</p>
            <p className="text-xs text-blue-600 mt-1">→ "내부요청" 탭 참조</p>
          </div>
          <div className="p-4 border-2 border-gray-300 rounded bg-gray-50">
            <div className="text-sm font-bold text-gray-700 mb-2">🔄 불량 재작업</div>
            <p className="text-xs text-gray-600">부적합품 처리에서 생성</p>
            <p className="text-xs text-gray-500">(원 수주와 연결)</p>
            <p className="text-xs text-blue-600 mt-1">→ "내부요청" 탭 참조</p>
          </div>
          <div className="p-4 border-2 border-gray-300 rounded bg-gray-50">
            <div className="text-sm font-bold text-gray-700 mb-2">📦 재고 선생산</div>
            <p className="text-xs text-gray-600">별도 생산계획 시스템</p>
            <p className="text-xs text-gray-500">(MRP 영역)</p>
            <p className="text-xs text-gray-500 mt-1">현재 MES 범위 외</p>
          </div>
        </div>
      </div>

      {/* 담당자 배정 상세 */}
      <div className="mt-8 pt-6 border-t-2 border-gray-300">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 담당자 배정 프로세스 ]</h3>
        <div className="flex flex-wrap items-center gap-2 text-sm">
          <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">미배정 작업지시 확인</span>
          <span className="text-gray-400">→</span>
          <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">공정별 팀 선택</span>
          <span className="text-gray-400">→</span>
          <span className="px-3 py-1 bg-yellow-100 rounded border border-yellow-400 font-medium">담당자 배정</span>
          <span className="text-gray-400">→</span>
          <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">배정 저장</span>
          <span className="text-gray-400">→</span>
          <span className="px-3 py-1 bg-green-100 rounded border border-green-400">작업자 화면 노출</span>
        </div>
        <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded text-xs text-gray-600">
          <strong>💡 TIP:</strong> 담당자 배정은 팀 전체 선택 또는 개별 작업자 선택이 가능합니다.
          미배정 작업지시는 빨간색으로 표시되며, "작업지시 관리" 화면에서 일괄 배정할 수 있습니다.
        </div>
      </div>
    </div>
  );

  // 생산 공정별 플로우
  const ProductionProcessFlow = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-8 border-b pb-2">
        3. 생산 공정별 상세 흐름
      </h2>

      {/* 스크린 공정 */}
      <div className="mb-10">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 스크린 공정 ]</h3>
        <div className="flex items-center flex-wrap gap-1">
          <RoundedRect className="text-xs px-2 py-1">시작</RoundedRect>
          <ArrowRight />
          <Rectangle className="text-xs">원단 절단</Rectangle>
          <ArrowRight />
          <Rectangle className="text-xs">미싱</Rectangle>
          <ArrowRight />
          <Rectangle className="text-xs">앤드락</Rectangle>
          <ArrowRight />
          <Diamond className="w-20 h-20">검사<br/>합격?</Diamond>
          <div className="flex flex-col items-start ml-2 gap-2">
            <div className="flex items-center">
              <span className="text-xs font-bold text-green-600 bg-green-100 px-2 rounded border border-green-400 mr-2">Y</span>
              <ArrowRight />
              <Rectangle className="text-xs">포장</Rectangle>
              <ArrowRight />
              <RoundedRect className="text-xs px-2 py-1">종료</RoundedRect>
            </div>
            <div className="flex items-center">
              <span className="text-xs font-bold text-red-600 bg-red-100 px-2 rounded border border-red-400 mr-2">N</span>
              <ArrowRight />
              <Rectangle className="text-xs border-red-400">재작업</Rectangle>
              <span className="text-xs text-gray-500 ml-2">↺</span>
            </div>
          </div>
        </div>
      </div>

      {/* 슬랫 공정 */}
      <div className="mb-10">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 슬랫 공정 ]</h3>
        <div className="flex items-center flex-wrap gap-1">
          <RoundedRect className="text-xs px-2 py-1">시작</RoundedRect>
          <ArrowRight />
          <Rectangle className="text-xs">코일 절단</Rectangle>
          <ArrowRight />
          <Diamond className="w-20 h-20">검사<br/>합격?</Diamond>
          <div className="flex flex-col items-start ml-2 gap-2">
            <div className="flex items-center">
              <span className="text-xs font-bold text-green-600 bg-green-100 px-2 rounded border border-green-400 mr-2">Y</span>
              <ArrowRight />
              <Rectangle className="text-xs">미미작업</Rectangle>
              <ArrowRight />
              <Rectangle className="text-xs">포장</Rectangle>
              <ArrowRight />
              <RoundedRect className="text-xs px-2 py-1">종료</RoundedRect>
            </div>
            <div className="flex items-center">
              <span className="text-xs font-bold text-red-600 bg-red-100 px-2 rounded border border-red-400 mr-2">N</span>
              <ArrowRight />
              <Rectangle className="text-xs border-red-400">재절단</Rectangle>
              <span className="text-xs text-gray-500 ml-2">↺</span>
            </div>
          </div>
        </div>
      </div>

      {/* 절곡 공정 */}
      <div className="mb-10">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 절곡 공정 ]</h3>
        <div className="flex items-center flex-wrap gap-1">
          <RoundedRect className="text-xs px-2 py-1">시작</RoundedRect>
          <ArrowRight />
          <Rectangle className="text-xs">판/코일 절단</Rectangle>
          <ArrowRight />
          <Rectangle className="text-xs">절곡</Rectangle>
          <ArrowRight />
          <Diamond className="w-20 h-20">검사<br/>합격?</Diamond>
          <div className="flex flex-col items-start ml-2 gap-2">
            <div className="flex items-center">
              <span className="text-xs font-bold text-green-600 bg-green-100 px-2 rounded border border-green-400 mr-2">Y</span>
              <ArrowRight />
              <Rectangle className="text-xs">포장</Rectangle>
              <ArrowRight />
              <RoundedRect className="text-xs px-2 py-1">종료</RoundedRect>
            </div>
            <div className="flex items-center">
              <span className="text-xs font-bold text-red-600 bg-red-100 px-2 rounded border border-red-400 mr-2">N</span>
              <ArrowRight />
              <Rectangle className="text-xs border-red-400">재절곡</Rectangle>
              <span className="text-xs text-gray-500 ml-2">↺</span>
            </div>
          </div>
        </div>
      </div>

      {/* 재고 생산 공정 (포밍) */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 재고 생산 (포밍) ] - 절곡 부품 반제품 생산</h3>
        <div className="flex items-center flex-wrap gap-1">
          <RoundedRect className="text-xs px-2 py-1">시작</RoundedRect>
          <ArrowRight />
          <Rectangle className="text-xs">포밍</Rectangle>
          <ArrowRight />
          <Diamond className="w-20 h-20">검사<br/>합격?</Diamond>
          <div className="flex flex-col items-start ml-2 gap-2">
            <div className="flex items-center">
              <span className="text-xs font-bold text-green-600 bg-green-100 px-2 rounded border border-green-400 mr-2">Y</span>
              <ArrowRight />
              <Rectangle className="text-xs">포장</Rectangle>
              <ArrowRight />
              <RoundedRect className="text-xs px-2 py-1">재고입고</RoundedRect>
            </div>
            <div className="flex items-center">
              <span className="text-xs font-bold text-red-600 bg-red-100 px-2 rounded border border-red-400 mr-2">N</span>
              <ArrowRight />
              <Rectangle className="text-xs border-red-400">재포밍</Rectangle>
              <span className="text-xs text-gray-500 ml-2">↺</span>
            </div>
          </div>
        </div>
      </div>

      {/* 범례 */}
      <div className="mt-8 pt-4 border-t-2 border-gray-300">
        <h4 className="font-bold mb-4 text-sm">[ 범례 ]</h4>
        <div className="flex flex-wrap gap-6 text-sm">
          <div className="flex items-center gap-2">
            <div className="w-14 h-7 border-2 border-black bg-white"></div>
            <span>프로세스</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 border-2 border-black bg-white transform rotate-45 scale-75"></div>
            <span>판단/분기</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-14 h-7 border-2 border-black bg-white rounded-full"></div>
            <span>시작/종료</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs font-bold text-green-600 bg-green-100 px-2 py-0.5 rounded border border-green-400">Y</span>
            <span>예 (합격)</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs font-bold text-red-600 bg-red-100 px-2 py-0.5 rounded border border-red-400">N</span>
            <span>아니오 (불합격)</span>
          </div>
        </div>
      </div>
    </div>
  );

  // 작업자 화면 플로우
  const WorkerFlowChart = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-8 border-b pb-2">
        4. 작업자 화면 흐름
      </h2>

      <div className="flex flex-col items-center min-w-[500px]">
        <RoundedRect>작업자 로그인</RoundedRect>
        <ArrowDown />
        <Rectangle>작업자 선택</Rectangle>
        <ArrowDown />
        <Rectangle>내 작업 목록 조회</Rectangle>
        <ArrowDown />
        <Rectangle>작업 선택</Rectangle>
        <ArrowDown />
        <Rectangle>작업 시작</Rectangle>
        <ArrowDown />
        <Rectangle>작업 진행</Rectangle>
        <ArrowDown />

        <Diamond>완료<br/>방식?</Diamond>

        <div className="flex items-start justify-center gap-16 mt-4">
          <div className="flex flex-col items-center">
            <span className="text-sm font-bold text-green-600 bg-green-100 px-3 py-1 rounded border-2 border-green-400 mb-2">원클릭</span>
            <ArrowDown />
            <Rectangle>전량 완료</Rectangle>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-sm font-bold text-blue-600 bg-blue-100 px-3 py-1 rounded border-2 border-blue-400 mb-2">직접입력</span>
            <ArrowDown />
            <Rectangle>양품/불량 입력</Rectangle>
          </div>
        </div>

        <div className="flex items-center mt-8">
          <HLine width="w-24" />
          <Circle>C</Circle>
          <HLine width="w-24" />
        </div>
        <ArrowDown />
        <Rectangle>실적 등록</Rectangle>
        <ArrowDown />

        <Diamond>다음<br/>작업?</Diamond>

        <div className="flex items-start justify-center gap-16 mt-2">
          <div className="flex flex-col items-center">
            <span className="text-sm font-bold text-green-600 bg-green-100 px-3 py-1 rounded border-2 border-green-400 mb-2">Y</span>
            <ArrowDown />
            <div className="text-xs text-gray-600 border border-gray-300 px-3 py-2 rounded bg-gray-50">↺ 작업 목록으로</div>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-sm font-bold text-red-600 bg-red-100 px-3 py-1 rounded border-2 border-red-400 mb-2">N</span>
            <ArrowDown />
            <RoundedRect>종료</RoundedRect>
          </div>
        </div>
      </div>
    </div>
  );

  // 문서/결재 승인 플로우 (신규)
  const DocumentApprovalFlow = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        5. 문서/결재 승인 프로세스
      </h2>
      <p className="text-sm text-gray-600 mb-8">업무 단계별 발생 문서와 결재/승인 시점</p>

      {/* 문서 흐름 타임라인 */}
      <div className="mb-10">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 단계별 문서 발생 ]</h3>

        {/* 견적 단계 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">1. 견적</span>
            <span className="text-sm text-gray-600">고객 요청 → 견적서 작성</span>
          </div>
          <div className="ml-4 space-y-2">
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">견적서</span>
              <span className="text-xs text-gray-500">→ 고객에게 발송</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-300 px-2 py-1 rounded border border-gray-500 font-medium">결재</span>
              <span className="text-sm">견적 승인</span>
              <span className="text-xs text-gray-500">담당자 → 팀장 (금액 기준)</span>
            </div>
          </div>
        </div>

        {/* 수주 단계 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">2. 수주</span>
            <span className="text-sm text-gray-600">견적 확정 → 수주 등록</span>
          </div>
          <div className="ml-4 space-y-2">
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-100 px-2 py-1 rounded border border-gray-400 font-medium">수신</span>
              <span className="text-sm">발주서 (PO)</span>
              <span className="text-xs text-gray-500">← 고객으로부터 수신</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">수주확인서</span>
              <span className="text-xs text-gray-500">→ 고객에게 발송</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-300 px-2 py-1 rounded border border-gray-500 font-medium">결재</span>
              <span className="text-sm">수주 승인</span>
              <span className="text-xs text-gray-500">담당자 → 팀장 → 부서장</span>
            </div>
          </div>
        </div>

        {/* 작업지시 단계 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">3. 작업지시</span>
            <span className="text-sm text-gray-600">수주 확정 → 생산 계획</span>
          </div>
          <div className="ml-4 space-y-2">
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">작업지시서</span>
              <span className="text-xs text-gray-500">→ 생산현장 배포</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-300 px-2 py-1 rounded border border-gray-500 font-medium">결재</span>
              <span className="text-sm">작업지시 승인</span>
              <span className="text-xs text-gray-500">생산담당 → 생산팀장</span>
            </div>
          </div>
        </div>

        {/* 자재투입 단계 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">4. 자재투입</span>
            <span className="text-sm text-gray-600">작업지시 확정 → 자재 불출</span>
          </div>
          <div className="ml-4 space-y-2">
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">자재불출요청서</span>
              <span className="text-xs text-gray-500">→ 자재창고</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">자재출고전표</span>
              <span className="text-xs text-gray-500">LOT 추적용</span>
            </div>
          </div>
        </div>

        {/* 생산/검사 단계 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">5. 생산/검사</span>
            <span className="text-sm text-gray-600">생산 완료 → 품질 검사</span>
          </div>
          <div className="ml-4 space-y-2">
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">작업일보</span>
              <span className="text-xs text-gray-500">일일 생산실적</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">검사성적서</span>
              <span className="text-xs text-gray-500">품질검사 결과</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-400 px-2 py-1 rounded border border-gray-500 font-medium text-white">발행</span>
              <span className="text-sm">부적합보고서</span>
              <span className="text-xs text-gray-500">(불량 발생 시)</span>
            </div>
          </div>
        </div>

        {/* 출하 단계 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">6. 출하</span>
            <span className="text-sm text-gray-600">검사 합격 → 출하 처리</span>
          </div>
          <div className="ml-4 space-y-2">
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">출하지시서</span>
              <span className="text-xs text-gray-500">→ 물류팀</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded border border-gray-400 font-medium">발행</span>
              <span className="text-sm">납품서 (거래명세서)</span>
              <span className="text-xs text-gray-500">→ 고객 동봉</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-300 px-2 py-1 rounded border border-gray-500 font-medium">결재</span>
              <span className="text-sm">출하 승인</span>
              <span className="text-xs text-gray-500">물류담당 → 물류팀장</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs bg-gray-100 px-2 py-1 rounded border border-gray-400 font-medium">수신</span>
              <span className="text-sm">수령확인서 (인수증)</span>
              <span className="text-xs text-gray-500">← 고객 서명</span>
            </div>
          </div>
        </div>
      </div>

      {/* 결재 라인 플로우 */}
      <div className="mb-8">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 전자결재 흐름 ]</h3>
        <div className="flex flex-col items-center">
          <RoundedRect>기안 작성</RoundedRect>
          <ArrowDown />
          <Rectangle>기안자 제출</Rectangle>
          <ArrowDown />

          <Diamond>1차<br/>검토?</Diamond>
          <div className="flex items-start justify-center gap-16 mt-2">
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-700 bg-gray-200 px-3 py-1 rounded border-2 border-gray-400 mb-2">승인</span>
              <ArrowDown />
              <Rectangle>팀장 결재</Rectangle>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-700 bg-gray-300 px-3 py-1 rounded border-2 border-gray-500 mb-2">반려</span>
              <ArrowDown />
              <Rectangle className="border-gray-500">수정 후 재기안</Rectangle>
              <div className="text-xs text-gray-500 mt-1">↺ 기안 작성으로</div>
            </div>
          </div>

          <div className="flex items-center mt-6">
            <HLine width="w-20" />
            <Circle>D</Circle>
            <HLine width="w-20" />
          </div>
          <ArrowDown />

          <Diamond>최종<br/>승인?</Diamond>
          <div className="flex items-start justify-center gap-16 mt-2">
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-700 bg-gray-200 px-3 py-1 rounded border-2 border-gray-400 mb-2">승인</span>
              <ArrowDown />
              <Rectangle>결재 완료</Rectangle>
              <ArrowDown />
              <RoundedRect>문서 확정</RoundedRect>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-700 bg-gray-300 px-3 py-1 rounded border-2 border-gray-500 mb-2">반려</span>
              <ArrowDown />
              <Rectangle className="border-gray-500">사유 기재</Rectangle>
              <div className="text-xs text-gray-500 mt-1">↺ 기안자에게 반송</div>
            </div>
          </div>
        </div>
      </div>

      {/* 문서 종류별 결재 라인 */}
      <div className="mt-8 pt-4 border-t-2 border-gray-300">
        <h4 className="font-bold mb-4 text-base">[ 문서별 결재 라인 ]</h4>
        <table className="w-full text-sm border-collapse">
          <thead>
            <tr className="bg-gray-100">
              <th className="border border-gray-300 px-3 py-2 text-left">문서종류</th>
              <th className="border border-gray-300 px-3 py-2 text-left">기안</th>
              <th className="border border-gray-300 px-3 py-2 text-left">1차 결재</th>
              <th className="border border-gray-300 px-3 py-2 text-left">최종 결재</th>
              <th className="border border-gray-300 px-3 py-2 text-left">비고</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-300 px-3 py-2">견적서</td>
              <td className="border border-gray-300 px-3 py-2">판매담당</td>
              <td className="border border-gray-300 px-3 py-2">판매팀장</td>
              <td className="border border-gray-300 px-3 py-2">-</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">1천만원 초과시 부서장</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2">수주확인서</td>
              <td className="border border-gray-300 px-3 py-2">판매담당</td>
              <td className="border border-gray-300 px-3 py-2">판매팀장</td>
              <td className="border border-gray-300 px-3 py-2">판매부서장</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">-</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2">작업지시서</td>
              <td className="border border-gray-300 px-3 py-2">생산계획</td>
              <td className="border border-gray-300 px-3 py-2">생산팀장</td>
              <td className="border border-gray-300 px-3 py-2">-</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">AI 자동생성시 검토만</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2">출하지시서</td>
              <td className="border border-gray-300 px-3 py-2">물류담당</td>
              <td className="border border-gray-300 px-3 py-2">물류팀장</td>
              <td className="border border-gray-300 px-3 py-2">-</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">검사합격 필수</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2">부적합보고서</td>
              <td className="border border-gray-300 px-3 py-2">품질담당</td>
              <td className="border border-gray-300 px-3 py-2">품질팀장</td>
              <td className="border border-gray-300 px-3 py-2">품질부서장</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">원인분석 필수</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 범례 */}
      <div className="mt-6 pt-4 border-t border-gray-200">
        <h4 className="font-bold mb-3 text-sm">[ 뱃지 범례 ]</h4>
        <div className="flex flex-wrap gap-4 text-sm">
          <div className="flex items-center gap-2">
            <span className="text-xs bg-yellow-200 px-2 py-1 rounded border border-yellow-400 font-medium">발행</span>
            <span>문서 생성/출력</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs bg-blue-200 px-2 py-1 rounded border border-blue-400 font-medium">결재</span>
            <span>승인 필요</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs bg-green-200 px-2 py-1 rounded border border-green-400 font-medium">수신</span>
            <span>외부에서 수령</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-xs bg-red-200 px-2 py-1 rounded border border-red-400 font-medium">발행</span>
            <span>이슈 문서</span>
          </div>
        </div>
      </div>
    </div>
  );

  // 품질검사 프로세스 플로우 (신규)
  const QualityInspectionFlow = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        6. 품질검사 프로세스
      </h2>
      <p className="text-sm text-gray-600 mb-8">검사 유형별 프로세스와 판정 기준</p>

      {/* 검사 유형 개요 */}
      <div className="mb-10">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 검사 유형 분류 ]</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="p-4 border-2 border-gray-400 rounded bg-gray-50">
            <div className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded mb-3 text-center">IQC 입고검사</div>
            <ul className="text-xs space-y-1 text-gray-600">
              <li>• 자재 입고 시점</li>
              <li>• KS D 3528 규격 적용</li>
              <li>• 겉모양/치수/기계적성질</li>
              <li>• AQL 샘플링 검사</li>
            </ul>
          </div>
          <div className="p-4 border-2 border-gray-400 rounded bg-gray-50">
            <div className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded mb-3 text-center">PQC 중간검사</div>
            <ul className="text-xs space-y-1 text-gray-600">
              <li>• 생산 중 품질검사</li>
              <li>• 공정별 품질확인</li>
              <li>• 치수/외관/직각도</li>
              <li>• 다중측정 (n=5)</li>
            </ul>
          </div>
          <div className="p-4 border-2 border-gray-400 rounded bg-gray-50">
            <div className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded mb-3 text-center">FQC 제품검사</div>
            <ul className="text-xs space-y-1 text-gray-600">
              <li>• 출하 후 고객요청 검사</li>
              <li>• 제품검사성적서 발행</li>
              <li>• 치수/외관/기능/작동</li>
              <li>• 고객 요청 시 수행</li>
            </ul>
          </div>
        </div>
      </div>

      {/* 검사 프로세스 흐름 */}
      <div className="mb-10">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 검사 프로세스 흐름 ]</h3>

        {/* 입고검사 흐름 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">1. 입고검사 (IQC)</span>
            <span className="text-sm text-gray-600">자재 입고 → 검사 → 입고확정</span>
          </div>
          <div className="flex flex-wrap items-center gap-2 ml-4 text-sm">
            <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">자재 입고</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">LOT 생성</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-300 rounded border border-gray-500 font-medium">샘플 채취</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-300 rounded border border-gray-500 font-medium">검사 실시</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">판정</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-100 rounded border border-gray-400">입고확정/반품</span>
          </div>
        </div>

        {/* 중간검사 흐름 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">2. 중간검사 (PQC)</span>
            <span className="text-sm text-gray-600">작업 완료 → 중간검사 → 다음 공정</span>
          </div>
          <div className="flex flex-wrap items-center gap-2 ml-4 text-sm">
            <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">작업 완료</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-300 rounded border border-gray-500 font-medium">중간검사 요청</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-300 rounded border border-gray-500 font-medium">검사 실시 (①~⑤)</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">판정 입력</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-100 rounded border border-gray-400">합격/재작업</span>
          </div>
        </div>

        {/* 제품검사 흐름 */}
        <div className="mb-6 p-4 border-l-4 border-gray-400 bg-gray-50">
          <div className="flex items-center gap-4 mb-3">
            <span className="text-sm font-bold bg-gray-600 text-white px-3 py-1 rounded">3. 제품검사 (FQC)</span>
            <span className="text-sm text-gray-600">출하 후 → 고객요청 → 제품검사</span>
          </div>
          <div className="flex flex-wrap items-center gap-2 ml-4 text-sm">
            <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">포장 완료</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-300 rounded border border-gray-500 font-medium">검사 요청</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-300 rounded border border-gray-500 font-medium">전수검사</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-200 rounded border border-gray-400">성적서 발행</span>
            <span className="text-gray-400">→</span>
            <span className="px-3 py-1 bg-gray-100 rounded border border-gray-400">출하대기/불합격</span>
          </div>
        </div>
      </div>

      {/* 검사항목 테이블 - 스크린 셔터 */}
      <div className="mb-10">
        <h3 className="font-bold mb-4 text-gray-700 text-base border-b pb-2">[ 스크린 셔터 제품검사 항목 (FQC) ]</h3>
        <table className="w-full text-sm border-collapse mb-4">
          <thead>
            <tr className="bg-gray-100">
              <th className="border border-gray-300 px-3 py-2 text-left">카테고리</th>
              <th className="border border-gray-300 px-3 py-2 text-left">검사항목</th>
              <th className="border border-gray-300 px-3 py-2 text-left">검사기준</th>
              <th className="border border-gray-300 px-3 py-2 text-left">검사방법</th>
              <th className="border border-gray-300 px-3 py-2 text-center">주기</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-medium" rowSpan="5">겉모양</td>
              <td className="border border-gray-300 px-3 py-2">가공상태</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">사용상 해로운 결함이 없을 것</td>
              <td className="border border-gray-300 px-3 py-2">육안검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2">재봉상태</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">내화실에 의해 견고하게 접합</td>
              <td className="border border-gray-300 px-3 py-2">육안검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2">조립상태</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">앤드락 견고하게 조립</td>
              <td className="border border-gray-300 px-3 py-2">육안검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2">연기차단재</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">케이스 W80, 가이드레일 W50</td>
              <td className="border border-gray-300 px-3 py-2">육안검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2">하단마감재</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">내부 무게평철 설치 유무</td>
              <td className="border border-gray-300 px-3 py-2">육안검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-medium" rowSpan="4">치수</td>
              <td className="border border-gray-300 px-3 py-2">길이</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">발주치수 ± 30mm</td>
              <td className="border border-gray-300 px-3 py-2">체크검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2">높이</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">발주치수 ± 30mm</td>
              <td className="border border-gray-300 px-3 py-2">체크검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2">가이드레일 홈간격</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">10 ± 5mm</td>
              <td className="border border-gray-300 px-3 py-2">체크검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2">하단마감재간격</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">가이드레일 틈새 25mm 이내</td>
              <td className="border border-gray-300 px-3 py-2">체크검사</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-medium">작동</td>
              <td className="border border-gray-300 px-3 py-2">개폐성능</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">일부/완전폐쇄 작동 확인</td>
              <td className="border border-gray-300 px-3 py-2">실동작시험</td>
              <td className="border border-gray-300 px-3 py-2 text-center">전수</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 판정 기준 */}
      <div className="mb-10">
        <h3 className="font-bold mb-4 text-gray-700 text-base border-b pb-2">[ 판정 기준 ]</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="p-4 border border-gray-300 rounded">
            <h4 className="font-bold mb-3 text-sm">합격 판정</h4>
            <ul className="text-xs space-y-2 text-gray-600">
              <li className="flex items-center gap-2">
                <span className="w-2 h-2 bg-gray-400 rounded-full"></span>
                모든 검사항목 "적합" 판정
              </li>
              <li className="flex items-center gap-2">
                <span className="w-2 h-2 bg-gray-400 rounded-full"></span>
                측정값이 규격 범위 내
              </li>
              <li className="flex items-center gap-2">
                <span className="w-2 h-2 bg-gray-400 rounded-full"></span>
                AQL 기준 불합격품 ≤ 허용개수
              </li>
            </ul>
          </div>
          <div className="p-4 border border-gray-300 rounded">
            <h4 className="font-bold mb-3 text-sm">불합격 처리</h4>
            <ul className="text-xs space-y-2 text-gray-600">
              <li className="flex items-center gap-2">
                <span className="w-2 h-2 bg-gray-500 rounded-full"></span>
                부적합보고서 발행
              </li>
              <li className="flex items-center gap-2">
                <span className="w-2 h-2 bg-gray-500 rounded-full"></span>
                원인분석 및 시정조치
              </li>
              <li className="flex items-center gap-2">
                <span className="w-2 h-2 bg-gray-500 rounded-full"></span>
                재작업/폐기/특채 결정
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* 부적합품 처리 플로우 */}
      <div className="mb-8">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 부적합품 처리 흐름 ]</h3>
        <div className="flex flex-col items-center">
          <RoundedRect>불합격 판정</RoundedRect>
          <ArrowDown />
          <Rectangle>부적합보고서 작성</Rectangle>
          <ArrowDown />
          <Diamond>처리<br/>방법?</Diamond>
          <div className="flex items-start justify-center gap-12 mt-2">
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-700 bg-gray-200 px-3 py-1 rounded border-2 border-gray-400 mb-2">재작업</span>
              <ArrowDown />
              <Rectangle>재작업 지시</Rectangle>
              <ArrowDown />
              <Rectangle>재검사</Rectangle>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-700 bg-gray-300 px-3 py-1 rounded border-2 border-gray-500 mb-2">특채</span>
              <ArrowDown />
              <Rectangle>특채 결재</Rectangle>
              <ArrowDown />
              <Rectangle>조건부 출하</Rectangle>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-700 bg-gray-400 text-white px-3 py-1 rounded border-2 border-gray-500 mb-2">폐기</span>
              <ArrowDown />
              <Rectangle>폐기 결재</Rectangle>
              <ArrowDown />
              <Rectangle>폐기 처리</Rectangle>
            </div>
          </div>
        </div>
      </div>

      {/* KS 규격 참조 */}
      <div className="mt-8 pt-4 border-t-2 border-gray-300">
        <h4 className="font-bold mb-4 text-base">[ 적용 KS 규격 ]</h4>
        <table className="w-full text-sm border-collapse">
          <thead>
            <tr className="bg-gray-100">
              <th className="border border-gray-300 px-3 py-2 text-left">규격번호</th>
              <th className="border border-gray-300 px-3 py-2 text-left">규격명</th>
              <th className="border border-gray-300 px-3 py-2 text-left">적용 검사</th>
              <th className="border border-gray-300 px-3 py-2 text-left">비고</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-mono">KS D 3528</td>
              <td className="border border-gray-300 px-3 py-2">용융아연도금강판 및 강대</td>
              <td className="border border-gray-300 px-3 py-2">IQC (입고검사)</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">EGI/CGI 자재</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-mono">KS F 4510</td>
              <td className="border border-gray-300 px-3 py-2">건축용 방충망</td>
              <td className="border border-gray-300 px-3 py-2">PQC, FQC</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">스크린 제품</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-mono">KS D 3503</td>
              <td className="border border-gray-300 px-3 py-2">일반구조용 압연강재</td>
              <td className="border border-gray-300 px-3 py-2">PQC, FQC</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">절곡품/구조재</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-mono">KS Q ISO 2859-1</td>
              <td className="border border-gray-300 px-3 py-2">AQL 샘플링 검사</td>
              <td className="border border-gray-300 px-3 py-2">IQC</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">샘플링 기준</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );

  // 내부요청/재작업 플로우 (신규)
  const InternalRequestFlow = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        7. 내부요청/재작업 프로세스
      </h2>
      <p className="text-sm text-gray-600 mb-8">수주 없이 작업지시가 필요한 예외 케이스 처리 플로우</p>

      {/* 내부요청 수주 (샘플/시제품) */}
      <div className="mb-10">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 1. 내부요청 수주: 샘플/시제품 ]</h3>
        <p className="text-sm text-gray-600 mb-4">판매팀 요청 또는 R&D 테스트용 제품 생산</p>

        <div className="flex flex-col items-center min-w-[500px]">
          <RoundedRect>샘플/시제품 요청</RoundedRect>
          <div className="text-xs text-gray-500 mt-1">(판매팀/개발팀)</div>
          <ArrowDown />

          <Rectangle className="bg-blue-50 border-blue-500">수주 등록 (내부요청)</Rectangle>
          <div className="text-xs text-gray-500 mt-1">거래처: "내부", 타입: "샘플"</div>
          <ArrowDown />

          <div className="border-2 border-dashed border-gray-400 rounded-lg p-4 bg-gray-50">
            <div className="text-xs text-gray-600 font-bold mb-2 text-center">[ 내부요청 수주 필수 정보 ]</div>
            <div className="grid grid-cols-2 gap-2 text-xs">
              <div className="p-2 bg-white rounded border">• 요청 부서</div>
              <div className="p-2 bg-white rounded border">• 요청 목적</div>
              <div className="p-2 bg-white rounded border">• 품목/수량</div>
              <div className="p-2 bg-white rounded border">• 희망 납기일</div>
            </div>
          </div>
          <ArrowDown />

          <Rectangle>내부 승인</Rectangle>
          <div className="text-xs text-gray-500 mt-1">(팀장 → 부서장)</div>
          <ArrowDown />

          <Rectangle className="bg-green-50 border-green-500">생산지시 → 작업지시 자동생성</Rectangle>
          <div className="text-xs text-gray-500 mt-1">(정상 프로세스와 동일)</div>
          <ArrowDown />

          <RoundedRect>작업 진행</RoundedRect>
        </div>
      </div>

      {/* 재작업 지시 (부적합품 처리) */}
      <div className="mb-10 pt-6 border-t-2 border-gray-300">
        <h3 className="font-bold mb-6 text-gray-700 text-base border-b pb-2">[ 2. 재작업 지시: 부적합품 처리 ]</h3>
        <p className="text-sm text-gray-600 mb-4">FQC/PQC 불합격 제품의 재작업 프로세스</p>

        <div className="flex flex-col items-center min-w-[500px]">
          <RoundedRect className="border-red-500 bg-red-50">검사 불합격</RoundedRect>
          <div className="text-xs text-gray-500 mt-1">(IQC/PQC/FQC)</div>
          <ArrowDown />

          <Rectangle className="border-red-400">부적합품 등록</Rectangle>
          <div className="text-xs text-gray-500 mt-1">(부적합 유형/원인 기록)</div>
          <ArrowDown />

          <Diamond>처리<br/>방법?</Diamond>

          <div className="flex items-start justify-center gap-12 mt-4">
            {/* 재작업 */}
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-blue-600 bg-blue-100 px-3 py-1 rounded border-2 border-blue-400 mb-2">재작업</span>
              <ArrowDown />
              <Rectangle className="bg-blue-50 border-blue-500">재작업 지시 생성</Rectangle>
              <div className="text-xs text-gray-500 mt-1">(원 수주 연결)</div>
              <ArrowDown />
              <Rectangle>담당자 배정</Rectangle>
              <ArrowDown />
              <Rectangle>재작업 실시</Rectangle>
              <ArrowDown />
              <Rectangle>재검사</Rectangle>
              <ArrowDown />
              <Diamond className="w-16 h-16">합격?</Diamond>
              <div className="flex gap-4 mt-2">
                <div className="flex flex-col items-center">
                  <span className="text-xs text-green-600 bg-green-100 px-2 rounded border border-green-400">Y</span>
                  <div className="text-xs mt-1">→ 출하대기</div>
                </div>
                <div className="flex flex-col items-center">
                  <span className="text-xs text-red-600 bg-red-100 px-2 rounded border border-red-400">N</span>
                  <div className="text-xs mt-1">↺ 재처리</div>
                </div>
              </div>
            </div>

            {/* 특채 */}
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-yellow-600 bg-yellow-100 px-3 py-1 rounded border-2 border-yellow-400 mb-2">특채</span>
              <ArrowDown />
              <Rectangle className="bg-yellow-50 border-yellow-500">특채 요청서 작성</Rectangle>
              <ArrowDown />
              <Rectangle>결재 (부서장→품질팀장)</Rectangle>
              <ArrowDown />
              <Diamond className="w-16 h-16">승인?</Diamond>
              <div className="flex gap-4 mt-2">
                <div className="flex flex-col items-center">
                  <span className="text-xs text-green-600 bg-green-100 px-2 rounded border border-green-400">Y</span>
                  <div className="text-xs mt-1">→ 조건부 출하</div>
                </div>
                <div className="flex flex-col items-center">
                  <span className="text-xs text-red-600 bg-red-100 px-2 rounded border border-red-400">N</span>
                  <div className="text-xs mt-1">→ 폐기</div>
                </div>
              </div>
            </div>

            {/* 폐기 */}
            <div className="flex flex-col items-center">
              <span className="text-sm font-bold text-gray-600 bg-gray-200 px-3 py-1 rounded border-2 border-gray-400 mb-2">폐기</span>
              <ArrowDown />
              <Rectangle className="bg-gray-100 border-gray-500">폐기 결재 요청</Rectangle>
              <ArrowDown />
              <Rectangle>결재 승인</Rectangle>
              <ArrowDown />
              <Rectangle>폐기 처리</Rectangle>
              <ArrowDown />
              <Rectangle>폐기 기록</Rectangle>
            </div>
          </div>
        </div>
      </div>

      {/* 재작업 작업지시 특징 */}
      <div className="mt-8 pt-6 border-t-2 border-gray-300">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 재작업 작업지시 특징 ]</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-4 border-2 border-gray-300 rounded bg-gray-50">
            <h4 className="font-bold mb-3 text-sm">🔗 원 수주 연결</h4>
            <ul className="text-xs space-y-2 text-gray-600">
              <li>• 원래 작업지시번호 참조</li>
              <li>• 부적합보고서 번호 연결</li>
              <li>• 원가 추적 가능</li>
              <li>• 이력 관리 (재작업 횟수)</li>
            </ul>
          </div>
          <div className="p-4 border-2 border-gray-300 rounded bg-gray-50">
            <h4 className="font-bold mb-3 text-sm">📋 필수 기록 사항</h4>
            <ul className="text-xs space-y-2 text-gray-600">
              <li>• 부적합 원인 분석</li>
              <li>• 시정조치 내용</li>
              <li>• 재작업 공정 (전체/부분)</li>
              <li>• 재검사 결과</li>
            </ul>
          </div>
        </div>
      </div>

      {/* 부적합 유형 분류 */}
      <div className="mt-8 pt-6 border-t-2 border-gray-300">
        <h3 className="font-bold mb-4 text-gray-700 text-base">[ 부적합 유형 분류 ]</h3>
        <table className="w-full text-sm border-collapse">
          <thead>
            <tr className="bg-gray-100">
              <th className="border border-gray-300 px-3 py-2 text-left">유형</th>
              <th className="border border-gray-300 px-3 py-2 text-left">설명</th>
              <th className="border border-gray-300 px-3 py-2 text-left">주요 조치</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-medium">치수 불량</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">규격 범위 초과/미달</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">재절단, 재절곡</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-medium">외관 불량</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">스크래치, 찍힘, 도금 불량</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">수정, 재도금, 폐기</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-medium">조립 불량</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">부품 누락, 조립 오류</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">재조립</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-medium">작동 불량</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">개폐 불량, 소음</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">원인 분석 후 수리</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-medium">자재 불량</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">입고 자재 결함</td>
              <td className="border border-gray-300 px-3 py-2 text-xs">반품, 자재 교체</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* ISO 관련 요구사항 */}
      <div className="mt-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
        <h4 className="font-bold text-yellow-800 mb-2">📋 ISO 9001 요구사항</h4>
        <div className="text-xs text-yellow-700 space-y-1">
          <p>• <strong>8.7 부적합 출력물의 관리:</strong> 부적합품 식별, 격리, 처리 기록</p>
          <p>• <strong>10.2 부적합 및 시정조치:</strong> 원인 분석, 재발 방지 대책, 효과성 검증</p>
          <p>• 모든 부적합품은 부적합보고서(NCR) 발행 필수</p>
          <p>• 재작업 결과는 재검사로 합격 판정 필요</p>
        </div>
      </div>
    </div>
  );

  // 화면 미리보기 컴포넌트 (와이어프레임 - 그레이스케일)
  const ScreenPreview = ({ title, children }) => (
    <div className="mt-4 border-2 border-gray-400 rounded bg-white">
      <div className="bg-gray-300 px-3 py-1 border-b border-gray-400 flex items-center gap-2">
        <div className="flex gap-1">
          <div className="w-2 h-2 rounded-full bg-gray-500"></div>
          <div className="w-2 h-2 rounded-full bg-gray-400"></div>
          <div className="w-2 h-2 rounded-full bg-gray-400"></div>
        </div>
        <span className="text-xs text-gray-700 font-medium">{title}</span>
      </div>
      <div className="p-3 bg-gray-50">
        {children}
      </div>
    </div>
  );

  // 데이터 구조 흐름도 (견적 → 수주 → 생산지시 → 작업지시)
  const DataStructureFlow = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        10. 데이터 구조 흐름 (견적 → 작업자)
      </h2>
      <p className="text-sm text-gray-600 mb-8">견적서 데이터가 수주 → 생산지시 → 작업지시로 흘러가는 실제 데이터 연결 구조</p>

      {/* 핵심 개념 */}
      <div className="mb-8 p-4 bg-indigo-50 border border-indigo-200 rounded-lg">
        <h3 className="font-bold text-indigo-800 mb-3">📌 핵심 데이터 흐름 원칙</h3>
        <div className="space-y-2 text-sm text-indigo-900">
          <p><span className="font-bold">• 데이터 상속:</span> 견적서에 입력된 품목 정보(폭, 높이, 색상, 모터타입 등)가 모든 하위 단계로 자동 전파</p>
          <p><span className="font-bold">• 단일 소스:</span> 견적서가 유일한 원본 데이터, 수정 시 연결된 모든 문서에 반영</p>
          <p><span className="font-bold">• 자재 자동 계산:</span> 품목 규격에 따라 필요 자재(원단 종류, 앤드락 사이즈 등) 자동 결정</p>
        </div>
      </div>

      {/* 데이터 흐름 다이어그램 */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 1단계: 견적서 → 수주 ]</h3>
        <div className="flex items-start gap-6 flex-wrap">
          {/* 견적서 데이터 */}
          <div className="border-2 border-blue-500 rounded-lg p-4 bg-blue-50 min-w-[280px]">
            <div className="font-bold text-blue-800 mb-3 flex items-center gap-2">
              <span className="bg-blue-600 text-white px-2 py-0.5 rounded text-xs">SOURCE</span>
              📋 견적서
            </div>
            <div className="space-y-1.5 text-xs bg-white p-3 rounded border">
              <div className="font-bold text-gray-700 border-b pb-1 mb-2">품목 정보 (예: 스크린)</div>
              <div className="flex justify-between"><span>품목명:</span><span className="font-mono">스크린 방충망(프리미엄)</span></div>
              <div className="flex justify-between"><span>수량:</span><span className="font-mono">3 SET</span></div>
              <div className="flex justify-between"><span>폭(W):</span><span className="font-mono text-blue-600 font-bold">950mm</span></div>
              <div className="flex justify-between"><span>높이(H):</span><span className="font-mono text-blue-600 font-bold">2100mm</span></div>
              <div className="flex justify-between"><span>색상:</span><span className="font-mono">화이트</span></div>
              <div className="flex justify-between"><span>조작방법:</span><span className="font-mono">체인</span></div>
              <div className="flex justify-between"><span>설치위치:</span><span className="font-mono">3층 C-01</span></div>
            </div>
          </div>

          <div className="flex items-center">
            <div className="text-center">
              <div className="w-20 h-0.5 bg-blue-500"></div>
              <div className="text-xs text-blue-600 mt-1">수주확정</div>
              <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-l-[12px] border-l-blue-500 ml-auto mr-0"></div>
            </div>
          </div>

          {/* 수주 데이터 */}
          <div className="border-2 border-green-500 rounded-lg p-4 bg-green-50 min-w-[280px]">
            <div className="font-bold text-green-800 mb-3 flex items-center gap-2">
              <span className="bg-green-600 text-white px-2 py-0.5 rounded text-xs">COPY</span>
              📦 수주
            </div>
            <div className="space-y-1.5 text-xs bg-white p-3 rounded border">
              <div className="font-bold text-gray-700 border-b pb-1 mb-2">수주 품목 (견적서에서 복사)</div>
              <div className="flex justify-between"><span>품목명:</span><span className="font-mono">스크린 방충망(프리미엄)</span></div>
              <div className="flex justify-between"><span>수량:</span><span className="font-mono">3 SET</span></div>
              <div className="flex justify-between"><span>폭(W):</span><span className="font-mono text-green-600 font-bold">950mm ✓</span></div>
              <div className="flex justify-between"><span>높이(H):</span><span className="font-mono text-green-600 font-bold">2100mm ✓</span></div>
              <div className="flex justify-between"><span>색상:</span><span className="font-mono">화이트 ✓</span></div>
              <div className="flex justify-between"><span>납기일:</span><span className="font-mono">2024-01-15</span></div>
              <div className="flex justify-between"><span>수주번호:</span><span className="font-mono">SO-2024-0001</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* 2단계: 수주 → 생산지시 */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 2단계: 수주 → 생산지시 ]</h3>
        <div className="flex items-start gap-6 flex-wrap">
          <div className="border-2 border-green-500 rounded-lg p-4 bg-green-50 min-w-[200px]">
            <div className="font-bold text-green-800 mb-2">📦 수주</div>
            <div className="text-xs">SO-2024-0001</div>
          </div>

          <div className="flex items-center">
            <div className="text-center">
              <div className="w-20 h-0.5 bg-orange-500"></div>
              <div className="text-xs text-orange-600 mt-1">생산지시 생성</div>
              <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-l-[12px] border-l-orange-500 ml-auto mr-0"></div>
            </div>
          </div>

          {/* 생산지시 데이터 */}
          <div className="border-2 border-orange-500 rounded-lg p-4 bg-orange-50 min-w-[320px]">
            <div className="font-bold text-orange-800 mb-3 flex items-center gap-2">
              <span className="bg-orange-600 text-white px-2 py-0.5 rounded text-xs">GENERATE</span>
              📄 생산지시서
            </div>
            <div className="space-y-1.5 text-xs bg-white p-3 rounded border">
              <div className="font-bold text-gray-700 border-b pb-1 mb-2">생산지시 품목 (수주 기반 생성)</div>
              <div className="flex justify-between"><span>지시번호:</span><span className="font-mono">WO-2024-0001</span></div>
              <div className="flex justify-between"><span>품목:</span><span className="font-mono">스크린 방충망(프리미엄)</span></div>
              <div className="flex justify-between"><span>지시수량:</span><span className="font-mono">3 SET</span></div>
              <div className="flex justify-between border-t pt-1 mt-1"><span className="font-bold">생산 품목 리스트:</span></div>
              <div className="bg-orange-50 p-2 rounded mt-1">
                <div>• 3층 C-01 1/3 (W:950 H:2100)</div>
                <div>• 3층 C-01 2/3 (W:950 H:2100)</div>
                <div>• 3층 C-01 3/3 (W:950 H:2100)</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 3단계: 생산지시 → 공정별 작업지시 */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 3단계: 생산지시 → 공정별 작업지시 (자동 분배) ]</h3>
        <div className="border-2 border-dashed border-purple-400 rounded-lg p-4 bg-purple-50/30">
          <div className="text-sm text-purple-700 font-bold mb-4 text-center">
            🔄 공정타입에 따라 자동으로 작업지시 생성 및 자재 계산
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            {/* 원단절단 */}
            <div className="border-2 border-blue-400 rounded-lg p-3 bg-blue-50">
              <div className="font-bold text-blue-700 text-sm mb-2">🧵 1. 원단절단</div>
              <div className="text-xs space-y-1 bg-white p-2 rounded">
                <div className="font-bold border-b pb-1">자재 자동계산:</div>
                <div className="text-blue-600">폭 950mm → <b>원단 1016mm</b></div>
                <div className="text-gray-500 text-[10px]">
                  (950≤1000 → 1016 선택)<br/>
                  (1001~1250 → 1270)<br/>
                  (1251~1500 → 1524)
                </div>
              </div>
            </div>

            {/* 미싱 */}
            <div className="border-2 border-pink-400 rounded-lg p-3 bg-pink-50">
              <div className="font-bold text-pink-700 text-sm mb-2">🪡 2. 미싱</div>
              <div className="text-xs space-y-1 bg-white p-2 rounded">
                <div className="font-bold border-b pb-1">자재:</div>
                <div>• 미싱실 (색상: 화이트)</div>
                <div className="text-gray-500 text-[10px]">품목 색상에 맞춰 실 색상 결정</div>
              </div>
            </div>

            {/* 앤드락 */}
            <div className="border-2 border-amber-400 rounded-lg p-3 bg-amber-50">
              <div className="font-bold text-amber-700 text-sm mb-2">🔧 3. 앤드락작업</div>
              <div className="text-xs space-y-1 bg-white p-2 rounded">
                <div className="font-bold border-b pb-1">자재 자동계산:</div>
                <div className="text-amber-600">높이 2100mm → <b>앤드락 2100</b></div>
                <div className="text-gray-500 text-[10px]">
                  높이값에 따라 앤드락 사이즈 결정<br/>
                  (각 품목당 2EA 필요)
                </div>
              </div>
            </div>

            {/* 포장 */}
            <div className="border-2 border-teal-400 rounded-lg p-3 bg-teal-50">
              <div className="font-bold text-teal-700 text-sm mb-2">📦 4. 포장</div>
              <div className="text-xs space-y-1 bg-white p-2 rounded">
                <div className="font-bold border-b pb-1">자재:</div>
                <div>• PE필름 포장재</div>
                <div>• 박스 (사이즈별)</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 4단계: 작업자 화면 */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 4단계: 작업자 화면 - 실제 표시 데이터 ]</h3>
        <div className="border-2 border-gray-800 rounded-lg p-4 bg-gray-50">
          <div className="font-bold text-gray-800 mb-3 flex items-center gap-2">
            <span className="bg-gray-800 text-white px-2 py-0.5 rounded text-xs">DISPLAY</span>
            👷 작업자 화면 (원단절단 공정)
          </div>

          <div className="bg-white border rounded-lg p-4">
            <div className="flex items-center justify-between border-b pb-2 mb-3">
              <div className="font-bold">WO-2024-0001 | 스크린 방충망(프리미엄)</div>
              <div className="text-sm text-gray-500">진행률: 0/3</div>
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded border">
                <div>
                  <div className="font-medium">☐ 3층 C-01 1/3</div>
                  <div className="text-xs text-gray-500">W:950 x H:2100 | 화이트</div>
                </div>
                <div className="bg-amber-100 text-amber-700 px-2 py-1 rounded text-xs">
                  🧵 방충망 원단 <b>1016</b>
                </div>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded border">
                <div>
                  <div className="font-medium">☐ 3층 C-01 2/3</div>
                  <div className="text-xs text-gray-500">W:950 x H:2100 | 화이트</div>
                </div>
                <div className="bg-amber-100 text-amber-700 px-2 py-1 rounded text-xs">
                  🧵 방충망 원단 <b>1016</b>
                </div>
              </div>
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded border">
                <div>
                  <div className="font-medium">☐ 3층 C-01 3/3</div>
                  <div className="text-xs text-gray-500">W:950 x H:2100 | 화이트</div>
                </div>
                <div className="bg-amber-100 text-amber-700 px-2 py-1 rounded text-xs">
                  🧵 방충망 원단 <b>1016</b>
                </div>
              </div>
            </div>

            <div className="mt-4 p-3 bg-blue-50 rounded border border-blue-200 text-xs">
              <div className="font-bold text-blue-800 mb-1">💡 자재 계산 로직</div>
              <div className="text-blue-700">
                각 품목의 <b>폭(W) 950mm</b> → 원단 규격 중 950mm 이상 최소값 → <b>1016mm 원단</b> 자동 선택
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 데이터 연결 요약 테이블 */}
      <div className="mb-6">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 데이터 연결 요약 ]</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm border-collapse">
            <thead>
              <tr className="bg-gray-100">
                <th className="border p-2 text-left">단계</th>
                <th className="border p-2 text-left">문서</th>
                <th className="border p-2 text-left">저장 데이터</th>
                <th className="border p-2 text-left">연결 키</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border p-2 bg-blue-50">1</td>
                <td className="border p-2 font-bold text-blue-700">견적서</td>
                <td className="border p-2 text-xs">품목명, 수량, 폭, 높이, 색상, 조작방법, 설치위치</td>
                <td className="border p-2 font-mono text-xs">quotationId</td>
              </tr>
              <tr>
                <td className="border p-2 bg-green-50">2</td>
                <td className="border p-2 font-bold text-green-700">수주</td>
                <td className="border p-2 text-xs">견적서 품목 복사 + 납기일, 결제조건, 고객정보</td>
                <td className="border p-2 font-mono text-xs">orderId → quotationId</td>
              </tr>
              <tr>
                <td className="border p-2 bg-orange-50">3</td>
                <td className="border p-2 font-bold text-orange-700">생산지시</td>
                <td className="border p-2 text-xs">수주 품목 기반 생산 품목 리스트 생성</td>
                <td className="border p-2 font-mono text-xs">workOrderId → orderId</td>
              </tr>
              <tr>
                <td className="border p-2 bg-purple-50">4</td>
                <td className="border p-2 font-bold text-purple-700">작업지시</td>
                <td className="border p-2 text-xs">공정별 작업 내용 + 자동 계산된 자재 정보</td>
                <td className="border p-2 font-mono text-xs">taskId → workOrderId</td>
              </tr>
              <tr>
                <td className="border p-2 bg-gray-50">5</td>
                <td className="border p-2 font-bold text-gray-700">작업자 화면</td>
                <td className="border p-2 text-xs">품목별 상세정보 + 계산된 자재 표시</td>
                <td className="border p-2 font-mono text-xs">taskId 기반 조회</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 자재 계산 규칙 */}
      <div className="p-4 bg-yellow-50 border border-yellow-300 rounded-lg">
        <h3 className="font-bold text-yellow-800 mb-3">⚙️ 자재 자동 계산 규칙 (스크린 기준)</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
          <div>
            <div className="font-bold text-yellow-700 mb-2">원단절단 - 원단 규격 선택</div>
            <div className="bg-white p-2 rounded text-xs font-mono">
              폭 ≤ 1000mm → 원단 1016mm<br/>
              폭 1001~1250mm → 원단 1270mm<br/>
              폭 1251~1500mm → 원단 1524mm<br/>
              폭 &gt; 1500mm → 원단 1780mm
            </div>
          </div>
          <div>
            <div className="font-bold text-yellow-700 mb-2">앤드락작업 - 사이즈 선택</div>
            <div className="bg-white p-2 rounded text-xs font-mono">
              높이값을 기준으로 앤드락 사이즈 결정<br/>
              예: H:2100 → 앤드락 2100<br/>
              (품목당 2EA 필요)
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  // 작업실적 데이터 흐름도 (신규)
  const WorkResultDataFlow = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        9. 작업실적 데이터 흐름
      </h2>
      <p className="text-sm text-gray-600 mb-8">작업자 완료 처리 → 실적 데이터 → 조회 화면 연결 관계</p>

      {/* 핵심 개념 설명 */}
      <div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <h3 className="font-bold text-blue-800 mb-3">📌 핵심 개념</h3>
        <div className="space-y-2 text-sm">
          <p><span className="font-bold">• 작업자 화면:</span> 작업자가 할당받은 작업을 실제로 완료 처리하는 화면</p>
          <p><span className="font-bold">• 작업실적 (메뉴):</span> 전체 작업 실적을 관리자/팀장이 조회하고 관리하는 화면</p>
          <p><span className="font-bold">• 작업지시 상세 &gt; 작업실적 탭:</span> 특정 작업지시에 연결된 실적만 필터링해서 보는 화면</p>
        </div>
      </div>

      {/* 데이터 흐름도 */}
      <div className="flex flex-col items-center min-w-[600px]">
        <div className="text-center mb-4">
          <span className="text-sm font-bold bg-gray-700 text-white px-4 py-2 rounded">데이터 발생 단계</span>
        </div>

        <RoundedRect className="bg-blue-100 border-blue-500">작업자 화면</RoundedRect>
        <div className="text-xs text-gray-500 my-1">(생산관리 → 작업자 화면)</div>
        <ArrowDown />

        <Rectangle>내 작업 목록에서<br/>작업 선택</Rectangle>
        <ArrowDown />

        <Rectangle>작업 진행</Rectangle>
        <ArrowDown />

        <div className="border-2 border-green-500 bg-green-50 px-6 py-3 rounded-lg">
          <div className="font-bold text-green-700 text-center">✅ 완료 처리</div>
          <div className="text-xs text-green-600 mt-1 text-center">(양품/불량 수량 입력)</div>
        </div>
        <ArrowDown />

        <div className="text-center my-4">
          <span className="text-sm font-bold bg-orange-500 text-white px-4 py-2 rounded">데이터 저장</span>
        </div>

        <div className="border-2 border-orange-400 bg-orange-50 px-6 py-4 rounded-lg text-center">
          <div className="font-bold text-orange-700">workResults 데이터 생성</div>
          <div className="text-xs text-orange-600 mt-2 space-y-1">
            <p>• 작업지시번호 (workOrderNo)</p>
            <p>• 양품수량, 불량수량</p>
            <p>• 작업자, 완료일시</p>
            <p>• 품목, 공정 정보</p>
          </div>
        </div>

        <div className="flex items-center my-6">
          <HLine width="w-20" />
          <Circle>D</Circle>
          <HLine width="w-20" />
        </div>

        <div className="text-center mb-4">
          <span className="text-sm font-bold bg-purple-600 text-white px-4 py-2 rounded">데이터 조회 화면</span>
        </div>

        {/* 두 개의 조회 경로 */}
        <div className="flex items-start justify-center gap-12 mt-2">
          {/* 경로 1: 작업실적 메뉴 */}
          <div className="flex flex-col items-center">
            <span className="text-sm font-bold text-purple-600 bg-purple-100 px-3 py-1 rounded border-2 border-purple-400 mb-2">경로 1</span>
            <ArrowDown />
            <Rectangle className="bg-purple-50 border-purple-400">작업실적 메뉴</Rectangle>
            <div className="text-xs text-gray-500 my-1">(생산관리 → 작업실적)</div>
            <ArrowDown />
            <div className="border border-gray-300 bg-gray-50 p-3 rounded text-center">
              <div className="font-bold text-sm mb-2">전체 실적 조회</div>
              <div className="text-xs text-gray-600 space-y-1">
                <p>• 모든 작업지시의 실적</p>
                <p>• 필터: 기간, 담당자, 공정</p>
                <p>• 대상: 관리자, 팀장</p>
              </div>
            </div>
          </div>

          {/* 경로 2: 작업지시 상세 */}
          <div className="flex flex-col items-center">
            <span className="text-sm font-bold text-indigo-600 bg-indigo-100 px-3 py-1 rounded border-2 border-indigo-400 mb-2">경로 2</span>
            <ArrowDown />
            <Rectangle className="bg-indigo-50 border-indigo-400">작업지시 상세</Rectangle>
            <div className="text-xs text-gray-500 my-1">(작업지시 관리 → 상세보기)</div>
            <ArrowDown />
            <div className="border border-gray-300 bg-gray-50 p-3 rounded text-center">
              <div className="font-bold text-sm mb-2">작업실적 탭</div>
              <div className="text-xs text-gray-600 space-y-1">
                <p>• 해당 작업지시만의 실적</p>
                <p>• workOrderNo로 필터링</p>
                <p>• 대상: 담당자, 팀장</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 관계 설명 테이블 */}
      <div className="mt-10 border-t pt-6">
        <h3 className="font-bold text-gray-800 mb-4">📋 화면별 역할 비교</h3>
        <table className="w-full text-sm border border-gray-300">
          <thead className="bg-gray-100">
            <tr>
              <th className="border border-gray-300 px-3 py-2 text-left">화면</th>
              <th className="border border-gray-300 px-3 py-2 text-left">메뉴 위치</th>
              <th className="border border-gray-300 px-3 py-2 text-left">역할</th>
              <th className="border border-gray-300 px-3 py-2 text-left">데이터 범위</th>
              <th className="border border-gray-300 px-3 py-2 text-left">사용자</th>
            </tr>
          </thead>
          <tbody>
            <tr className="bg-blue-50">
              <td className="border border-gray-300 px-3 py-2 font-bold">작업자 화면</td>
              <td className="border border-gray-300 px-3 py-2">생산관리 → 작업자 화면</td>
              <td className="border border-gray-300 px-3 py-2">작업 완료 처리<br/>(실적 데이터 생성)</td>
              <td className="border border-gray-300 px-3 py-2">내 작업만</td>
              <td className="border border-gray-300 px-3 py-2">작업자</td>
            </tr>
            <tr className="bg-purple-50">
              <td className="border border-gray-300 px-3 py-2 font-bold">작업실적</td>
              <td className="border border-gray-300 px-3 py-2">생산관리 → 작업실적</td>
              <td className="border border-gray-300 px-3 py-2">전체 실적 조회/관리</td>
              <td className="border border-gray-300 px-3 py-2">전체 실적</td>
              <td className="border border-gray-300 px-3 py-2">관리자, 팀장</td>
            </tr>
            <tr className="bg-indigo-50">
              <td className="border border-gray-300 px-3 py-2 font-bold">작업지시 상세<br/>(작업실적 탭)</td>
              <td className="border border-gray-300 px-3 py-2">작업지시 관리 → 상세</td>
              <td className="border border-gray-300 px-3 py-2">특정 작업지시 실적 확인</td>
              <td className="border border-gray-300 px-3 py-2">해당 지시만</td>
              <td className="border border-gray-300 px-3 py-2">담당자, 팀장</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 흐름 요약 */}
      <div className="mt-8 p-4 bg-green-50 border border-green-200 rounded-lg">
        <h3 className="font-bold text-green-800 mb-3">✅ 요약: 데이터 흐름</h3>
        <div className="flex items-center gap-2 flex-wrap text-sm">
          <span className="bg-blue-200 px-2 py-1 rounded font-medium">작업자 화면</span>
          <span>→ 완료 처리 →</span>
          <span className="bg-orange-200 px-2 py-1 rounded font-medium">실적 데이터 생성</span>
          <span>→</span>
          <span className="bg-purple-200 px-2 py-1 rounded font-medium">작업실적 메뉴</span>
          <span>(전체 조회)</span>
        </div>
        <div className="flex items-center gap-2 flex-wrap text-sm mt-2 ml-[200px]">
          <span>↘</span>
          <span className="bg-indigo-200 px-2 py-1 rounded font-medium">작업지시 상세 탭</span>
          <span>(개별 조회)</span>
        </div>
      </div>
    </div>
  );

  // 작업일지 프로세스 (ISO 인증용 문서)
  const WorkLogDocumentFlow = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6 overflow-x-auto">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        9-1. 작업일지 출력 및 관리
      </h2>
      <p className="text-sm text-gray-600 mb-8">ISO 인증 대응용 공정별 작업일지 템플릿 연결 및 출력 프로세스</p>

      {/* 핵심 개념 설명 */}
      <div className="mb-8 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <h3 className="font-bold text-amber-800 mb-3">📋 작업일지란?</h3>
        <div className="space-y-2 text-sm">
          <p><span className="font-bold">• 목적:</span> ISO 9001 품질경영시스템 인증 대응을 위한 생산기록 문서화</p>
          <p><span className="font-bold">• 유형:</span> 공정별 전용 양식 (절곡, 슬랫, 스크린, 재고생산)</p>
          <p><span className="font-bold">• 접근:</span> 작업지시 상세화면 → [작업일지] 버튼 클릭</p>
          <p><span className="font-bold">• 출력:</span> A4 규격, 결재란 포함, 인쇄 즉시 가능</p>
        </div>
      </div>

      {/* 공정별 작업일지 유형 */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 공정별 작업일지 템플릿 ]</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="border-2 border-orange-300 rounded-lg p-4 bg-orange-50">
            <div className="flex items-center gap-2 mb-2">
              <span className="bg-orange-500 text-white px-2 py-1 rounded text-xs font-bold">WL-BEND</span>
              <span className="font-bold text-orange-700">절곡 작업일지</span>
            </div>
            <ul className="text-xs text-gray-600 space-y-1">
              <li>• 부품별 절곡 작업내역 기록</li>
              <li>• 중간검사성적서 포함</li>
              <li>• 최종합격 판정란</li>
            </ul>
          </div>
          <div className="border-2 border-purple-300 rounded-lg p-4 bg-purple-50">
            <div className="flex items-center gap-2 mb-2">
              <span className="bg-purple-500 text-white px-2 py-1 rounded text-xs font-bold">WL-SLAT</span>
              <span className="font-bold text-purple-700">슬랫 작업일지</span>
            </div>
            <ul className="text-xs text-gray-600 space-y-1">
              <li>• LOT별 슬랫 생산내역 기록</li>
              <li>• 중간검사성적서 포함</li>
              <li>• 최종합격 판정란</li>
            </ul>
          </div>
          <div className="border-2 border-blue-300 rounded-lg p-4 bg-blue-50">
            <div className="flex items-center gap-2 mb-2">
              <span className="bg-blue-500 text-white px-2 py-1 rounded text-xs font-bold">WL-SCR</span>
              <span className="font-bold text-blue-700">스크린 작업일지</span>
            </div>
            <ul className="text-xs text-gray-600 space-y-1">
              <li>• 망규격×폭규격 매트릭스 기록</li>
              <li>• 중간검사성적서 포함</li>
              <li>• 최종합격 판정란</li>
            </ul>
          </div>
          <div className="border-2 border-green-300 rounded-lg p-4 bg-green-50">
            <div className="flex items-center gap-2 mb-2">
              <span className="bg-green-500 text-white px-2 py-1 rounded text-xs font-bold">WL-STK</span>
              <span className="font-bold text-green-700">재고생산 작업일지</span>
            </div>
            <ul className="text-xs text-gray-600 space-y-1">
              <li>• 재고부품 생산내역 기록</li>
              <li>• 중간검사성적서 포함</li>
              <li>• 최종합격 판정란</li>
            </ul>
          </div>
        </div>
      </div>

      {/* 접근 경로 플로우 */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 작업일지 접근 경로 ]</h3>
        <div className="flex flex-col items-center min-w-[500px]">
          <RoundedRect className="bg-gray-100 border-gray-500">작업지시 관리 화면</RoundedRect>
          <div className="text-xs text-gray-500 my-1">(생산관리 → 작업지시 관리)</div>
          <ArrowDown />

          <Rectangle>작업지시 선택 (클릭)</Rectangle>
          <ArrowDown />

          <RoundedRect className="bg-blue-100 border-blue-500">작업지시 상세 화면</RoundedRect>
          <ArrowDown />

          <div className="border-2 border-amber-500 bg-amber-50 px-6 py-3 rounded-lg text-center">
            <div className="font-bold text-amber-700">[작업일지] 버튼 클릭</div>
            <div className="text-xs text-amber-600 mt-1">(상단 액션 버튼)</div>
          </div>
          <ArrowDown />

          <Diamond>공정타입<br/>확인</Diamond>

          <div className="flex items-center gap-4 mt-4">
            <div className="flex flex-col items-center">
              <span className="text-xs text-orange-600 mb-1">절곡</span>
              <ArrowDown />
              <Rectangle className="bg-orange-50 border-orange-400 text-xs">WL-BEND 템플릿</Rectangle>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-xs text-purple-600 mb-1">슬랫</span>
              <ArrowDown />
              <Rectangle className="bg-purple-50 border-purple-400 text-xs">WL-SLAT 템플릿</Rectangle>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-xs text-blue-600 mb-1">스크린</span>
              <ArrowDown />
              <Rectangle className="bg-blue-50 border-blue-400 text-xs">WL-SCR 템플릿</Rectangle>
            </div>
            <div className="flex flex-col items-center">
              <span className="text-xs text-green-600 mb-1">재고생산</span>
              <ArrowDown />
              <Rectangle className="bg-green-50 border-green-400 text-xs">WL-STK 템플릿</Rectangle>
            </div>
          </div>

          <div className="mt-6">
            <ArrowDown />
          </div>

          <div className="border-2 border-green-500 bg-green-50 px-6 py-3 rounded-lg text-center">
            <div className="font-bold text-green-700">[인쇄] 버튼으로 출력</div>
            <div className="text-xs text-green-600 mt-1">A4 규격 문서 출력</div>
          </div>
        </div>
      </div>

      {/* 작업일지 공통 구성 */}
      <div className="mb-8">
        <h3 className="font-bold mb-4 text-gray-700 border-b pb-2">[ 작업일지 공통 구성요소 ]</h3>
        <table className="w-full text-sm border border-gray-300">
          <thead className="bg-gray-100">
            <tr>
              <th className="border border-gray-300 px-3 py-2 text-left w-32">영역</th>
              <th className="border border-gray-300 px-3 py-2 text-left">포함 내용</th>
              <th className="border border-gray-300 px-3 py-2 text-left w-28">비고</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-bold">헤더</td>
              <td className="border border-gray-300 px-3 py-2">KD 로고, 문서번호, 작업일지 제목</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">자동 생성</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-bold">결재란</td>
              <td className="border border-gray-300 px-3 py-2">작성(판매/개발자), 검토(생산), 승인(품질)</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">서명란 포함</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-bold">기본정보</td>
              <td className="border border-gray-300 px-3 py-2">작업지시번호, 수주번호, 현장명, 작업일자, LOT번호</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">작업지시에서 연동</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-bold">작업내역</td>
              <td className="border border-gray-300 px-3 py-2">공정별 세부 작업내역 테이블 (규격, 수량, 비고 등)</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">공정별 양식 상이</td>
            </tr>
            <tr>
              <td className="border border-gray-300 px-3 py-2 font-bold">중간검사성적서</td>
              <td className="border border-gray-300 px-3 py-2">검사항목, 규격값, 측정값, 판정결과</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">ISO 필수</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="border border-gray-300 px-3 py-2 font-bold">최종판정</td>
              <td className="border border-gray-300 px-3 py-2">합격/불합격 판정, 특이사항, 검사자 서명</td>
              <td className="border border-gray-300 px-3 py-2 text-xs text-gray-500">수기 기입</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* TIP */}
      <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <h3 className="font-bold text-blue-800 mb-2">💡 활용 팁</h3>
        <ul className="text-sm text-blue-700 space-y-1">
          <li>• <span className="font-medium">작업자 화면</span>에서도 진행 중인 작업의 [작업일지] 버튼으로 동일 템플릿 출력 가능</li>
          <li>• 출력된 작업일지는 <span className="font-medium">현장 보관용</span>으로 작업 완료 후 결재 받아 보관</li>
          <li>• 템플릿은 공정타입에 따라 자동 선택되며, 필요시 다른 템플릿 선택 가능</li>
          <li>• LOT번호는 <span className="bg-yellow-200 px-1 rounded">노란색</span>으로 강조되어 추적 용이</li>
        </ul>
      </div>
    </div>
  );

  // 화면 조작 가이드 (실제 화면 미리보기 포함)
  const PrototypeGuide = () => (
    <div className="bg-white rounded-lg border border-gray-300 p-8 mb-6">
      <h2 className="text-lg font-bold text-gray-800 mb-4 border-b pb-2">
        8. 화면 조작 가이드
      </h2>
      <p className="text-sm text-gray-600 mb-6">실제 시스템에서 메뉴/버튼 클릭 순서와 화면 구성 (전체 메뉴 가이드)</p>

      {/* STEP 1: 수주 등록 */}
      <div className="mb-8 border-l-4 border-gray-500 pl-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-sm font-bold bg-gray-700 text-white px-3 py-1 rounded">STEP 1</span>
          <span className="font-bold">수주 등록</span>
        </div>
        <div className="space-y-2 text-sm mb-3">
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">메뉴</span>
            <span>판매관리 → 수주관리</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">클릭</span>
            <span>[+ 신규등록]</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">입력</span>
            <span>거래처, 현장, 품목, 수량, 납기일, 공정정보</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">완료</span>
            <span>[저장] → 목록 확인</span>
          </div>
        </div>

        <ScreenPreview title="판매관리 → 수주관리">
          <div className="space-y-2">
            {/* 상단 버튼 영역 */}
            <div className="flex gap-2 mb-3">
              <div className="border-2 border-gray-700 bg-gray-700 text-white px-3 py-1 text-xs rounded font-bold">+ 신규등록</div>
              <div className="border border-gray-400 px-3 py-1 text-xs rounded text-gray-600">엑셀 다운로드</div>
            </div>
            {/* 검색 필터 */}
            <div className="flex gap-2 p-2 bg-gray-100 rounded text-xs">
              <div className="border border-gray-300 px-2 py-1 bg-white rounded">거래처 ▼</div>
              <div className="border border-gray-300 px-2 py-1 bg-white rounded">현장 ▼</div>
              <div className="border border-gray-300 px-2 py-1 bg-white rounded">상태 ▼</div>
              <div className="border border-gray-300 px-2 py-1 bg-white rounded">기간: 2024-01-01 ~ 2024-12-31</div>
              <div className="border border-gray-500 px-2 py-1 rounded bg-gray-200 font-medium">검색</div>
            </div>
            {/* 목록 테이블 - 실제 수주 목록 컬럼과 동기화 */}
            <div className="border border-gray-300 rounded">
              <div className="grid grid-cols-8 gap-0 bg-gray-200 text-xs font-bold">
                <div className="border-r border-gray-300 p-1 text-center">수주번호</div>
                <div className="border-r border-gray-300 p-1 text-center">거래처</div>
                <div className="border-r border-gray-300 p-1 text-center">현장명</div>
                <div className="border-r border-gray-300 p-1 text-center">품목</div>
                <div className="border-r border-gray-300 p-1 text-center">납기일</div>
                <div className="border-r border-gray-300 p-1 text-center">상태</div>
                <div className="border-r border-gray-300 p-1 text-center">생산지시</div>
                <div className="p-1 text-center">출하진행</div>
              </div>
              <div className="grid grid-cols-8 gap-0 text-xs bg-white">
                <div className="border-r border-t border-gray-300 p-1 text-center font-medium underline">SO-2024-001</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">ABC건설</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">강남현장</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">방화셔터</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">2024-03-15</div>
                <div className="border-r border-t border-gray-300 p-1 text-center"><span className="bg-gray-300 px-1 rounded">확정</span></div>
                <div className="border-r border-t border-gray-300 p-1 text-center"><span className="bg-gray-300 px-1 rounded">완료</span></div>
                <div className="border-t border-gray-300 p-1 text-center">60%</div>
              </div>
              <div className="grid grid-cols-8 gap-0 text-xs bg-gray-50">
                <div className="border-r border-t border-gray-300 p-1 text-center font-medium underline">SO-2024-002</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">XYZ산업</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">서초현장</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">방화셔터</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">2024-03-20</div>
                <div className="border-r border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">대기</span></div>
                <div className="border-r border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">-</span></div>
                <div className="border-t border-gray-300 p-1 text-center">-</div>
              </div>
            </div>
          </div>
        </ScreenPreview>
      </div>

      {/* STEP 2: 작업지시 생성 */}
      <div className="mb-8 border-l-4 border-gray-500 pl-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-sm font-bold bg-gray-700 text-white px-3 py-1 rounded">STEP 2</span>
          <span className="font-bold">작업지시 생성 (수주 → 공정별 자동 분리)</span>
        </div>
        <div className="space-y-2 text-sm mb-3">
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">메뉴</span>
            <span>생산관리 → 작업지시 관리</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">클릭</span>
            <span>[수주 불러오기] → 수주 선택</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">자동</span>
            <span>수주에서 입력한 공정 정보 그대로 작업지시로 변환</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">검토</span>
            <span>각 공정별 담당자/일정 확인 및 수정</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">완료</span>
            <span>[일괄확정] 또는 개별 [확정]</span>
          </div>
        </div>

        <ScreenPreview title="생산관리 → 작업지시 관리">
          <div className="space-y-3">
            {/* 상단: 수주 불러오기 */}
            <div className="flex gap-2 items-center">
              <div className="border-2 border-gray-700 bg-gray-700 text-white px-3 py-1 text-xs rounded font-bold">수주 불러오기</div>
              <div className="border border-gray-400 px-3 py-1 text-xs rounded text-gray-600">+ 수동등록</div>
              <div className="border-2 border-gray-600 bg-gray-600 text-white px-3 py-1 text-xs rounded font-bold">일괄확정</div>
            </div>

            {/* 수주 선택 영역 */}
            <div className="border-2 border-gray-400 rounded p-2 bg-gray-100">
              <div className="text-xs font-bold text-gray-700 mb-2">선택된 수주</div>
              <div className="flex justify-between items-center text-xs">
                <div className="flex gap-4">
                  <span><b>SO-2024-001</b></span>
                  <span>ABC건설 / 강남현장</span>
                  <span>방화셔터 50 SET</span>
                  <span>납기: 2024-03-15</span>
                </div>
                <span className="bg-gray-300 px-2 py-0.5 rounded font-bold">수주확정</span>
              </div>
            </div>

            {/* 수주에서 가져온 공정 정보 */}
            <div className="border border-gray-400 rounded p-2 bg-gray-100">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-bold text-gray-700">수주 등록 시 입력된 공정 정보</span>
                <span className="text-xs text-gray-500">(수주에서 그대로 가져옴)</span>
              </div>
              <div className="text-xs text-gray-600 mb-1">
                방화셔터 50 SET → <b>4개 공정</b> 등록됨
              </div>
              <div className="flex gap-1 text-xs">
                <span className="bg-gray-300 px-2 py-0.5 rounded border border-gray-400">스크린 50SET</span>
                <span>→</span>
                <span className="bg-gray-300 px-2 py-0.5 rounded border border-gray-400">슬랫 50SET</span>
                <span>→</span>
                <span className="bg-gray-300 px-2 py-0.5 rounded border border-gray-400">절곡 50SET</span>
                <span>→</span>
                <span className="bg-gray-300 px-2 py-0.5 rounded border border-gray-400">재고 50SET</span>
              </div>
            </div>

            {/* 공정별 작업지시 목록 - 자동 생성됨 */}
            <div className="text-xs font-bold text-gray-700 border-b border-gray-400 pb-1">공정별 작업지시 (자동 생성)</div>

            {/* 공정 1: 스크린 */}
            <div className="border border-gray-400 rounded p-2 bg-white">
              <div className="flex justify-between items-center mb-1">
                <div className="flex items-center gap-2">
                  <span className="bg-gray-700 text-white px-2 py-0.5 rounded text-xs font-bold">1</span>
                  <span className="font-bold text-sm">WO-2024-0015-01</span>
                  <span className="text-xs text-gray-700 font-bold">스크린 공정</span>
                </div>
                <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-400">검토중</span>
              </div>
              <div className="grid grid-cols-5 gap-1 text-xs text-gray-600">
                <div>원단 절단 → 미싱 → 앤드락</div>
                <div>수량: 50 SET</div>
                <div>담당: 김스크린</div>
                <div>예상: 2일</div>
                <div className="flex gap-1">
                  <span className="border border-gray-500 bg-white px-1 rounded font-medium">확정</span>
                  <span className="border border-gray-300 px-1 rounded">수정</span>
                </div>
              </div>
            </div>

            {/* 공정 2: 슬랫 */}
            <div className="border border-gray-400 rounded p-2 bg-white">
              <div className="flex justify-between items-center mb-1">
                <div className="flex items-center gap-2">
                  <span className="bg-gray-700 text-white px-2 py-0.5 rounded text-xs font-bold">2</span>
                  <span className="font-bold text-sm">WO-2024-0015-02</span>
                  <span className="text-xs text-gray-700 font-bold">슬랫 공정</span>
                </div>
                <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-400">검토중</span>
              </div>
              <div className="grid grid-cols-5 gap-1 text-xs text-gray-600">
                <div>코일 절단 → 미미작업</div>
                <div>수량: 50 SET</div>
                <div>담당: 박슬랫</div>
                <div>예상: 1.5일</div>
                <div className="flex gap-1">
                  <span className="border border-gray-500 bg-white px-1 rounded font-medium">확정</span>
                  <span className="border border-gray-300 px-1 rounded">수정</span>
                </div>
              </div>
            </div>

            {/* 공정 3: 절곡 */}
            <div className="border border-gray-400 rounded p-2 bg-white">
              <div className="flex justify-between items-center mb-1">
                <div className="flex items-center gap-2">
                  <span className="bg-gray-700 text-white px-2 py-0.5 rounded text-xs font-bold">3</span>
                  <span className="font-bold text-sm">WO-2024-0015-03</span>
                  <span className="text-xs text-gray-700 font-bold">절곡 공정</span>
                </div>
                <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-400">검토중</span>
              </div>
              <div className="grid grid-cols-5 gap-1 text-xs text-gray-600">
                <div>판/코일 절단 → 절곡</div>
                <div>수량: 50 SET</div>
                <div>담당: 이절곡</div>
                <div>예상: 1일</div>
                <div className="flex gap-1">
                  <span className="border border-gray-500 bg-white px-1 rounded font-medium">확정</span>
                  <span className="border border-gray-300 px-1 rounded">수정</span>
                </div>
              </div>
            </div>

            {/* 공정 4: 재고 생산 */}
            <div className="border border-gray-400 rounded p-2 bg-white">
              <div className="flex justify-between items-center mb-1">
                <div className="flex items-center gap-2">
                  <span className="bg-gray-700 text-white px-2 py-0.5 rounded text-xs font-bold">4</span>
                  <span className="font-bold text-sm">WO-2024-0015-04</span>
                  <span className="text-xs text-gray-700 font-bold">재고 생산</span>
                </div>
                <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-400">검토중</span>
              </div>
              <div className="grid grid-cols-5 gap-1 text-xs text-gray-600">
                <div>재고 출고 → 조립 → 포장</div>
                <div>수량: 50 SET</div>
                <div>담당: 최재고</div>
                <div>예상: 0.5일</div>
                <div className="flex gap-1">
                  <span className="border border-gray-500 bg-white px-1 rounded font-medium">확정</span>
                  <span className="border border-gray-300 px-1 rounded">수정</span>
                </div>
              </div>
            </div>

            {/* 요약 */}
            <div className="bg-gray-200 rounded p-2 text-xs border border-gray-300">
              <div className="flex justify-between">
                <span>총 <b>4개 공정</b> / 예상 총 소요: <b>6일</b></span>
                <span className="font-bold">[일괄확정] 클릭 시 4개 작업지시 동시 확정</span>
              </div>
            </div>
          </div>
        </ScreenPreview>
      </div>

      {/* STEP 3: 자재 투입 */}
      <div className="mb-8 border-l-4 border-gray-500 pl-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-sm font-bold bg-gray-700 text-white px-3 py-1 rounded">STEP 3</span>
          <span className="font-bold">자재 투입</span>
        </div>
        <div className="space-y-2 text-sm mb-3">
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">메뉴</span>
            <span>작업지시 상세 → [자재투입] 탭</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">선택</span>
            <span>투입할 LOT 선택 (FIFO 순)</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">완료</span>
            <span>[투입확정]</span>
          </div>
        </div>

        <ScreenPreview title="작업지시 상세 → 자재투입 탭">
          <div className="space-y-2">
            {/* 탭 영역 */}
            <div className="flex border-b border-gray-400">
              <div className="px-3 py-1 text-xs border-b-2 border-gray-300 text-gray-500">기본정보</div>
              <div className="px-3 py-1 text-xs border-b-2 border-gray-300 text-gray-500">공정순서</div>
              <div className="px-3 py-1 text-xs border-b-2 border-gray-700 text-gray-800 font-bold bg-gray-200">자재투입</div>
              <div className="px-3 py-1 text-xs border-b-2 border-gray-300 text-gray-500">실적현황</div>
            </div>
            {/* 자재 목록 */}
            <div className="border border-gray-300 rounded">
              <div className="grid grid-cols-6 gap-0 bg-gray-200 text-xs font-bold">
                <div className="border-r border-gray-300 p-1 text-center">선택</div>
                <div className="border-r border-gray-300 p-1 text-center">자재코드</div>
                <div className="border-r border-gray-300 p-1 text-center">자재명</div>
                <div className="border-r border-gray-300 p-1 text-center">LOT번호</div>
                <div className="border-r border-gray-300 p-1 text-center">재고수량</div>
                <div className="p-1 text-center">투입수량</div>
              </div>
              <div className="grid grid-cols-6 gap-0 text-xs bg-gray-100 border-2 border-gray-500">
                <div className="border-r border-gray-300 p-1 text-center"><div className="w-3 h-3 border-2 border-gray-700 bg-gray-700 mx-auto rounded-sm"></div></div>
                <div className="border-r border-gray-300 p-1 text-center">MAT-001</div>
                <div className="border-r border-gray-300 p-1 text-center">방화원단</div>
                <div className="border-r border-gray-300 p-1 text-center font-bold">LOT-240101-A</div>
                <div className="border-r border-gray-300 p-1 text-center">500m</div>
                <div className="p-1 text-center"><span className="border border-gray-400 px-2 bg-white">200</span></div>
              </div>
              <div className="grid grid-cols-6 gap-0 text-xs bg-white">
                <div className="border-r border-t border-gray-300 p-1 text-center"><div className="w-3 h-3 border border-gray-400 mx-auto rounded-sm"></div></div>
                <div className="border-r border-t border-gray-300 p-1 text-center">MAT-001</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">방화원단</div>
                <div className="border-r border-t border-gray-300 p-1 text-center text-gray-500">LOT-240115-B</div>
                <div className="border-r border-t border-gray-300 p-1 text-center">300m</div>
                <div className="border-t border-gray-300 p-1 text-center"><span className="border border-gray-400 px-2 bg-white">-</span></div>
              </div>
            </div>
            {/* FIFO 안내 */}
            <div className="bg-gray-100 border border-gray-400 rounded p-2 text-xs">
              <span className="font-bold">FIFO 권장:</span> LOT-240101-A (입고일: 2024-01-01) 우선 사용
            </div>
            {/* 확정 버튼 */}
            <div className="flex justify-end">
              <div className="border-2 border-gray-700 bg-gray-700 text-white px-4 py-1 text-xs rounded font-bold">투입확정</div>
            </div>
          </div>
        </ScreenPreview>
      </div>

      {/* STEP 4: 작업 실적 */}
      <div className="mb-8 border-l-4 border-gray-500 pl-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-sm font-bold bg-gray-700 text-white px-3 py-1 rounded">STEP 4</span>
          <span className="font-bold">작업 실적 (개별 품목 완료 지원)</span>
        </div>
        <div className="space-y-2 text-sm mb-3">
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">메뉴</span>
            <span>생산관리 → 작업자 화면</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">선택</span>
            <span>작업자 선택 → 작업 선택</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">작업</span>
            <span>[시작] → 수행 → [완료] (개별 품목별 가능)</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">중단</span>
            <span>[중단] 후 다음날 [재개] 가능 - 진행상태 유지</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">완료</span>
            <span>[전량완료] 또는 개별 품목 완료 처리</span>
          </div>
        </div>

        <ScreenPreview title="생산관리 → 작업자 화면">
          <div className="space-y-2">
            {/* 작업자 선택 */}
            <div className="bg-gray-100 p-2 rounded border border-gray-300">
              <div className="text-xs text-gray-600 mb-1">작업자 선택</div>
              <div className="flex gap-2">
                <div className="border-2 border-gray-700 bg-gray-200 px-3 py-1 text-xs rounded font-bold">홍길동</div>
                <div className="border border-gray-400 px-3 py-1 text-xs rounded text-gray-600">김철수</div>
                <div className="border border-gray-400 px-3 py-1 text-xs rounded text-gray-600">이영희</div>
              </div>
            </div>
            {/* 내 작업 목록 */}
            <div className="text-xs font-bold text-gray-700 mb-1">내 작업 목록</div>
            <div className="border-2 border-gray-500 rounded p-3 bg-gray-100">
              <div className="flex justify-between items-center mb-2">
                <div>
                  <div className="font-bold text-sm">WO-2024-0015 / 스크린 공정</div>
                  <div className="text-xs text-gray-500">방화셔터 3개 작업 → 원단 절단</div>
                </div>
                <span className="bg-gray-300 px-2 py-0.5 rounded text-xs font-bold border border-gray-400">진행중</span>
              </div>

              {/* 진행 현황 요약 - NEW */}
              <div className="grid grid-cols-4 gap-1 text-xs mb-2">
                <div className="bg-gray-200 p-1 rounded text-center">
                  <div className="font-bold">전체</div>
                  <div>3</div>
                </div>
                <div className="bg-green-100 p-1 rounded text-center border border-green-300">
                  <div className="font-bold text-green-700">완료</div>
                  <div className="text-green-700">1</div>
                </div>
                <div className="bg-blue-100 p-1 rounded text-center border border-blue-300">
                  <div className="font-bold text-blue-700">진행중</div>
                  <div className="text-blue-700">1</div>
                </div>
                <div className="bg-gray-100 p-1 rounded text-center border border-gray-300">
                  <div className="font-bold text-gray-600">대기</div>
                  <div className="text-gray-600">1</div>
                </div>
              </div>

              {/* 개별 품목 목록 - NEW */}
              <div className="space-y-1 mb-2">
                <div className="flex items-center justify-between bg-green-50 p-1.5 rounded border border-green-200 text-xs">
                  <div className="flex items-center gap-2">
                    <span className="bg-green-600 text-white px-1.5 py-0.5 rounded text-[10px]">완료</span>
                    <span>스크린 #1 (W1200×H2400)</span>
                  </div>
                  <span className="text-green-600 text-[10px]">LOT: P-251210-SC-01</span>
                </div>
                <div className="flex items-center justify-between bg-blue-50 p-1.5 rounded border border-blue-200 text-xs">
                  <div className="flex items-center gap-2">
                    <span className="bg-blue-600 text-white px-1.5 py-0.5 rounded text-[10px]">진행중</span>
                    <span>스크린 #2 (W1500×H2700)</span>
                  </div>
                  <div className="flex gap-1">
                    <span className="border border-gray-400 bg-white px-1.5 py-0.5 rounded text-[10px]">완료</span>
                    <span className="border border-orange-400 bg-orange-50 px-1.5 py-0.5 rounded text-[10px]">중단</span>
                  </div>
                </div>
                <div className="flex items-center justify-between bg-white p-1.5 rounded border border-gray-200 text-xs">
                  <div className="flex items-center gap-2">
                    <span className="bg-gray-400 text-white px-1.5 py-0.5 rounded text-[10px]">대기</span>
                    <span>스크린 #3 (W1800×H3000)</span>
                  </div>
                  <span className="border border-gray-400 bg-white px-1.5 py-0.5 rounded text-[10px]">시작</span>
                </div>
              </div>

              {/* 진행률 바 */}
              <div className="w-full bg-gray-300 rounded h-2 mb-2">
                <div className="bg-gray-600 h-2 rounded" style={{width: '33%'}}></div>
              </div>

              {/* 버튼 영역 */}
              <div className="flex gap-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-4 py-2 text-xs rounded font-bold flex-1 text-center">전량완료</div>
                <div className="border border-gray-400 px-3 py-2 text-xs rounded text-gray-600 text-center">직접입력</div>
              </div>
            </div>

            {/* 작업 히스토리 - NEW */}
            <div className="border border-gray-300 rounded p-2 bg-white">
              <div className="text-xs font-bold mb-2">📋 작업 히스토리 (다음날 이어서 작업 가능)</div>
              <div className="space-y-1 text-xs">
                <div className="flex justify-between text-gray-600 bg-gray-50 p-1 rounded">
                  <span>스크린 #1 - 완료</span>
                  <span>2024-12-10 09:30 | 홍길동</span>
                </div>
                <div className="flex justify-between text-gray-600 bg-gray-50 p-1 rounded">
                  <span>스크린 #2 - 시작</span>
                  <span>2024-12-10 10:15 | 홍길동</span>
                </div>
                <div className="flex justify-between text-orange-600 bg-orange-50 p-1 rounded">
                  <span>스크린 #2 - 중단 (퇴근)</span>
                  <span>2024-12-10 18:00 | 홍길동</span>
                </div>
                <div className="flex justify-between text-blue-600 bg-blue-50 p-1 rounded">
                  <span>스크린 #2 - 재개</span>
                  <span>2024-12-11 08:30 | 홍길동</span>
                </div>
              </div>
            </div>
          </div>
        </ScreenPreview>
      </div>

      {/* STEP 5: 검사 */}
      <div className="mb-8 border-l-4 border-gray-500 pl-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-sm font-bold bg-gray-700 text-white px-3 py-1 rounded">STEP 5</span>
          <span className="font-bold">검사</span>
        </div>
        <div className="space-y-2 text-sm mb-3">
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">메뉴</span>
            <span>품질관리 → 검사관리</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">선택</span>
            <span>검사 대기 항목</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">입력</span>
            <span>측정값 입력</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">판정</span>
            <span>[합격] 또는 [불합격]</span>
          </div>
        </div>

        <ScreenPreview title="품질관리 → 검사관리">
          <div className="space-y-2">
            {/* 검사 대기 목록 */}
            <div className="border border-gray-300 rounded">
              <div className="grid grid-cols-5 gap-0 bg-gray-200 text-xs font-bold">
                <div className="border-r border-gray-300 p-1 text-center">작업지시</div>
                <div className="border-r border-gray-300 p-1 text-center">품목</div>
                <div className="border-r border-gray-300 p-1 text-center">검사항목</div>
                <div className="border-r border-gray-300 p-1 text-center">기준값</div>
                <div className="p-1 text-center">상태</div>
              </div>
              <div className="grid grid-cols-5 gap-0 text-xs bg-gray-100 border-2 border-gray-500">
                <div className="border-r border-gray-300 p-1 text-center">WO-2024-0015</div>
                <div className="border-r border-gray-300 p-1 text-center">방화셔터</div>
                <div className="border-r border-gray-300 p-1 text-center">치수검사</div>
                <div className="border-r border-gray-300 p-1 text-center">±2mm</div>
                <div className="p-1 text-center"><span className="bg-gray-300 px-1 rounded border border-gray-400">대기</span></div>
              </div>
            </div>
            {/* 검사 입력 폼 */}
            <div className="border border-gray-400 rounded p-3 bg-gray-100">
              <div className="font-bold text-sm mb-2">검사 입력</div>
              <div className="grid grid-cols-2 gap-3 text-xs mb-3">
                <div>
                  <div className="text-gray-500 mb-1">검사항목: 치수검사</div>
                  <div className="text-gray-500">기준: 1000mm ±2mm</div>
                </div>
                <div>
                  <div className="text-gray-500 mb-1">측정값 입력</div>
                  <div className="flex items-center gap-1">
                    <span className="border-2 border-gray-500 px-3 py-1 bg-white rounded font-bold">1001</span>
                    <span>mm</span>
                  </div>
                </div>
              </div>
              {/* 자동 판정 결과 */}
              <div className="bg-gray-200 border border-gray-400 rounded p-2 text-xs mb-3">
                <span className="font-bold">자동 판정: 합격</span>
                <span className="ml-2">(기준범위 내: 998~1002mm)</span>
              </div>
              {/* 판정 버튼 */}
              <div className="flex gap-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-4 py-1 text-xs rounded font-bold flex-1 text-center">합격</div>
                <div className="border-2 border-gray-500 bg-white px-4 py-1 text-xs rounded font-bold flex-1 text-center">불합격</div>
              </div>
            </div>
          </div>
        </ScreenPreview>
      </div>

      {/* STEP 6: 출하 */}
      <div className="mb-8 border-l-4 border-gray-500 pl-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-sm font-bold bg-gray-700 text-white px-3 py-1 rounded">STEP 6</span>
          <span className="font-bold">출하</span>
        </div>
        <div className="space-y-2 text-sm mb-3">
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">메뉴</span>
            <span>물류관리 → 출하관리</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">클릭</span>
            <span>[+ 출하등록]</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">선택</span>
            <span>출하 대상 (검사합격품)</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">출력</span>
            <span>[출하지시서 출력]</span>
          </div>
          <div className="flex gap-2">
            <span className="bg-gray-200 px-2 py-0.5 rounded text-xs border border-gray-300">완료</span>
            <span>[출하확정]</span>
          </div>
        </div>

        <ScreenPreview title="물류관리 → 출하관리">
          <div className="space-y-2">
            {/* 상단 버튼 */}
            <div className="flex gap-2 mb-2">
              <div className="border-2 border-gray-700 bg-gray-700 text-white px-3 py-1 text-xs rounded font-bold">+ 출하등록</div>
              <div className="border border-gray-400 px-3 py-1 text-xs rounded text-gray-600">출하지시서 출력</div>
            </div>
            {/* 출하 대상 목록 */}
            <div className="border border-gray-300 rounded">
              <div className="grid grid-cols-6 gap-0 bg-gray-200 text-xs font-bold">
                <div className="border-r border-gray-300 p-1 text-center">선택</div>
                <div className="border-r border-gray-300 p-1 text-center">수주번호</div>
                <div className="border-r border-gray-300 p-1 text-center">거래처</div>
                <div className="border-r border-gray-300 p-1 text-center">품목</div>
                <div className="border-r border-gray-300 p-1 text-center">수량</div>
                <div className="p-1 text-center">검사상태</div>
              </div>
              <div className="grid grid-cols-6 gap-0 text-xs bg-gray-100 border-2 border-gray-500">
                <div className="border-r border-gray-300 p-1 text-center"><div className="w-3 h-3 border-2 border-gray-700 bg-gray-700 mx-auto rounded-sm"></div></div>
                <div className="border-r border-gray-300 p-1 text-center">SO-2024-001</div>
                <div className="border-r border-gray-300 p-1 text-center">ABC건설</div>
                <div className="border-r border-gray-300 p-1 text-center">방화셔터</div>
                <div className="border-r border-gray-300 p-1 text-center">50 SET</div>
                <div className="p-1 text-center"><span className="bg-gray-300 px-1 rounded font-bold border border-gray-400">합격</span></div>
              </div>
            </div>
            {/* 출하 정보 입력 */}
            <div className="border border-gray-400 rounded p-3 bg-gray-100">
              <div className="font-bold text-sm mb-2">출하 정보</div>
              <div className="grid grid-cols-2 gap-2 text-xs mb-3">
                <div className="flex items-center gap-1">
                  <span className="text-gray-500">배송일:</span>
                  <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">2024-03-15</span>
                </div>
                <div className="flex items-center gap-1">
                  <span className="text-gray-500">차량번호:</span>
                  <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">12가 3456</span>
                </div>
                <div className="flex items-center gap-1">
                  <span className="text-gray-500">기사명:</span>
                  <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">박기사</span>
                </div>
                <div className="flex items-center gap-1">
                  <span className="text-gray-500">연락처:</span>
                  <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">010-1234-5678</span>
                </div>
              </div>
              <div className="flex gap-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-4 py-1 text-xs rounded font-bold">출하확정</div>
                <div className="border border-gray-400 px-3 py-1 text-xs rounded text-gray-600">납품서 출력</div>
              </div>
            </div>
          </div>
        </ScreenPreview>
      </div>

      {/* 요약 테이블 - 핵심 생산 프로세스 */}
      <div className="mt-6 pt-4 border-t border-gray-300">
        <h4 className="font-bold mb-3 text-sm">[ 핵심 생산 프로세스 요약 ]</h4>
        <table className="w-full text-sm border-collapse">
          <thead>
            <tr className="bg-gray-100">
              <th className="border border-gray-300 px-2 py-1 text-left">단계</th>
              <th className="border border-gray-300 px-2 py-1 text-left">메뉴 경로</th>
              <th className="border border-gray-300 px-2 py-1 text-left">핵심 버튼</th>
              <th className="border border-gray-300 px-2 py-1 text-left">완료 조건</th>
            </tr>
          </thead>
          <tbody>
            <tr><td className="border border-gray-300 px-2 py-1">1. 수주</td><td className="border border-gray-300 px-2 py-1">판매 → 수주관리</td><td className="border border-gray-300 px-2 py-1">[신규등록] → [저장]</td><td className="border border-gray-300 px-2 py-1">목록에 등록됨</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1">2. 작업지시</td><td className="border border-gray-300 px-2 py-1">생산 → 작업지시</td><td className="border border-gray-300 px-2 py-1">[수주 불러오기] → [확정]</td><td className="border border-gray-300 px-2 py-1">상태: 확정</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1">3. 자재투입</td><td className="border border-gray-300 px-2 py-1">작업지시 상세 → 자재투입</td><td className="border border-gray-300 px-2 py-1">[투입확정]</td><td className="border border-gray-300 px-2 py-1">LOT 투입 완료</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1">4. 작업실적</td><td className="border border-gray-300 px-2 py-1">생산 → 작업자 화면</td><td className="border border-gray-300 px-2 py-1">[전량완료] or 직접입력</td><td className="border border-gray-300 px-2 py-1">실적 100%</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1">5. 검사</td><td className="border border-gray-300 px-2 py-1">품질 → 검사관리</td><td className="border border-gray-300 px-2 py-1">[합격] or [불합격]</td><td className="border border-gray-300 px-2 py-1">검사 판정 완료</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1">6. 출하</td><td className="border border-gray-300 px-2 py-1">물류 → 출하관리</td><td className="border border-gray-300 px-2 py-1">[출하등록] → [출하확정]</td><td className="border border-gray-300 px-2 py-1">출하 완료</td></tr>
          </tbody>
        </table>
      </div>

      {/* ============ 기준정보 메뉴 가이드 ============ */}
      <div className="mt-10 pt-6 border-t-2 border-gray-400">
        <h3 className="text-base font-bold text-gray-800 mb-4">기준정보 메뉴 가이드</h3>
        <p className="text-sm text-gray-600 mb-6">시스템 사용 전 반드시 설정해야 하는 기준 데이터 관리</p>

        {/* 거래처 기준관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">기준정보</span>
            <span className="font-bold text-sm">거래처기준관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>기준정보 → 거래처기준관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>고객사/공급업체/협력사 등록 및 관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>수주 등록 시 거래처 선택, 회계 매출/매입 연동</div>
          </div>
          <ScreenPreview title="기준정보 → 거래처기준관리">
            <div className="space-y-2 text-xs">
              <div className="flex gap-2 mb-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-2 py-0.5 rounded font-bold">+ 거래처 등록</div>
                <div className="border border-gray-400 px-2 py-0.5 rounded text-gray-600">엑셀 업로드</div>
              </div>
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-6 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">거래처코드</div>
                  <div className="border-r border-gray-300 p-1 text-center">거래처명</div>
                  <div className="border-r border-gray-300 p-1 text-center">유형</div>
                  <div className="border-r border-gray-300 p-1 text-center">사업자번호</div>
                  <div className="border-r border-gray-300 p-1 text-center">담당자</div>
                  <div className="p-1 text-center">상태</div>
                </div>
                <div className="grid grid-cols-6 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">C-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">ABC건설</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">고객사</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">123-45-67890</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">김담당</div>
                  <div className="border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">활성</span></div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>

        {/* 현장 기준관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">기준정보</span>
            <span className="font-bold text-sm">현장기준관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>기준정보 → 현장기준관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>설치 현장 정보 등록 (주소, 담당자, 층수 등)</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>수주 등록 시 현장 선택, 출하 시 배송지 연동</div>
          </div>
          <ScreenPreview title="기준정보 → 현장기준관리">
            <div className="space-y-2 text-xs">
              <div className="flex gap-2 mb-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-2 py-0.5 rounded font-bold">+ 현장 등록</div>
              </div>
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-6 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">현장코드</div>
                  <div className="border-r border-gray-300 p-1 text-center">현장명</div>
                  <div className="border-r border-gray-300 p-1 text-center">거래처</div>
                  <div className="border-r border-gray-300 p-1 text-center">주소</div>
                  <div className="border-r border-gray-300 p-1 text-center">현장담당</div>
                  <div className="p-1 text-center">유형</div>
                </div>
                <div className="grid grid-cols-6 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">S-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">강남현장</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">ABC건설</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">서울시 강남구...</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">박현장</div>
                  <div className="border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">신규</span></div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>

        {/* 품목 기준관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">기준정보</span>
            <span className="font-bold text-sm">품목기준관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>기준정보 → 품목기준관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>제품/반제품/자재 품목 등록 및 BOM 관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>수주/생산/재고 전 영역에서 품목 참조</div>
          </div>
          <ScreenPreview title="기준정보 → 품목기준관리">
            <div className="space-y-2 text-xs">
              <div className="flex gap-2 mb-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-2 py-0.5 rounded font-bold">+ 품목 등록</div>
                <div className="border border-gray-400 px-2 py-0.5 rounded text-gray-600">BOM 관리</div>
              </div>
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-6 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">품목코드</div>
                  <div className="border-r border-gray-300 p-1 text-center">품목명</div>
                  <div className="border-r border-gray-300 p-1 text-center">품목유형</div>
                  <div className="border-r border-gray-300 p-1 text-center">단위</div>
                  <div className="border-r border-gray-300 p-1 text-center">재고</div>
                  <div className="p-1 text-center">상태</div>
                </div>
                <div className="grid grid-cols-6 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">P-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">방화셔터</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">제품</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">SET</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">150</div>
                  <div className="border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">활성</span></div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>

        {/* 공정 기준관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">기준정보</span>
            <span className="font-bold text-sm">공정기준관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>기준정보 → 공정기준관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>스크린/슬랫/절곡/재고 공정 및 작업단계 정의</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>작업지시 생성 시 공정 흐름 자동 적용</div>
          </div>
          <ScreenPreview title="기준정보 → 공정기준관리">
            <div className="space-y-2 text-xs">
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-5 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">공정코드</div>
                  <div className="border-r border-gray-300 p-1 text-center">공정명</div>
                  <div className="border-r border-gray-300 p-1 text-center">부서</div>
                  <div className="border-r border-gray-300 p-1 text-center">작업단계</div>
                  <div className="p-1 text-center">상태</div>
                </div>
                <div className="grid grid-cols-5 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">P-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">스크린</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">스크린생산부서</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">원단절단→미싱→앤드락→검사→포장</div>
                  <div className="border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">활성</span></div>
                </div>
                <div className="grid grid-cols-5 gap-0 bg-gray-50">
                  <div className="border-r border-t border-gray-300 p-1 text-center">P-004</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">재고(포밍)</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">포밍생산부서</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">포밍→검사→포장</div>
                  <div className="border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">활성</span></div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>

        {/* 품질 기준관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">기준정보</span>
            <span className="font-bold text-sm">품질기준관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>기준정보 → 품질기준관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>입고/공정/최종/출하 검사 항목 및 기준 정의</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>검사 수행 시 자동 판정 기준 적용</div>
          </div>
          <ScreenPreview title="기준정보 → 품질기준관리">
            <div className="space-y-2 text-xs">
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-6 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">검사코드</div>
                  <div className="border-r border-gray-300 p-1 text-center">검사명</div>
                  <div className="border-r border-gray-300 p-1 text-center">유형</div>
                  <div className="border-r border-gray-300 p-1 text-center">규격</div>
                  <div className="border-r border-gray-300 p-1 text-center">허용오차</div>
                  <div className="p-1 text-center">KS규격</div>
                </div>
                <div className="grid grid-cols-6 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">INS-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">치수검사</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">FQC</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">발주치수</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">±30mm</div>
                  <div className="border-t border-gray-300 p-1 text-center">KS F 4510</div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>
      </div>

      {/* ============ 자재관리 메뉴 가이드 ============ */}
      <div className="mt-10 pt-6 border-t-2 border-gray-400">
        <h3 className="text-base font-bold text-gray-800 mb-4">자재관리 메뉴 가이드</h3>
        <p className="text-sm text-gray-600 mb-6">재고 현황 확인 및 입고 관리</p>

        {/* 재고현황 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">자재관리</span>
            <span className="font-bold text-sm">재고현황</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>자재관리 → 재고현황</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>LOT별 재고수량 조회, 창고별 현황 확인</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>자재투입 시 가용재고 확인, FIFO 순서 제공</div>
          </div>
          <ScreenPreview title="자재관리 → 재고현황">
            <div className="space-y-2 text-xs">
              <div className="flex gap-2 p-2 bg-gray-100 rounded">
                <div className="border border-gray-300 px-2 py-0.5 bg-white rounded">품목 ▼</div>
                <div className="border border-gray-300 px-2 py-0.5 bg-white rounded">창고 ▼</div>
                <div className="border border-gray-500 px-2 py-0.5 rounded bg-gray-200 font-medium">검색</div>
              </div>
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-6 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">품목코드</div>
                  <div className="border-r border-gray-300 p-1 text-center">품목명</div>
                  <div className="border-r border-gray-300 p-1 text-center">LOT번호</div>
                  <div className="border-r border-gray-300 p-1 text-center">창고</div>
                  <div className="border-r border-gray-300 p-1 text-center">재고수량</div>
                  <div className="p-1 text-center">입고일</div>
                </div>
                <div className="grid grid-cols-6 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">MAT-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">방화원단</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center font-bold">LOT-240101-A</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">원자재창고</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">500m</div>
                  <div className="border-t border-gray-300 p-1 text-center">2024-01-01</div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>

        {/* 입고관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">자재관리</span>
            <span className="font-bold text-sm">입고관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>자재관리 → 입고관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>자재/부품 입고 등록 및 LOT 번호 발행</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>입고검사(IQC) 자동 생성, 재고 반영</div>
          </div>
          <ScreenPreview title="자재관리 → 입고관리">
            <div className="space-y-2 text-xs">
              <div className="flex gap-2 mb-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-2 py-0.5 rounded font-bold">+ 입고등록</div>
              </div>
              <div className="border border-gray-400 rounded p-2 bg-gray-100">
                <div className="font-bold mb-2">입고 정보 입력</div>
                <div className="grid grid-cols-2 gap-2 mb-2">
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">품목:</span>
                    <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">방화원단 ▼</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">수량:</span>
                    <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">500</span> m
                  </div>
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">공급업체:</span>
                    <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">원단공급사 ▼</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">LOT:</span>
                    <span className="border-2 border-gray-500 px-2 py-0.5 bg-white rounded font-bold">자동생성</span>
                  </div>
                </div>
                <div className="flex gap-2">
                  <div className="border-2 border-gray-700 bg-gray-700 text-white px-3 py-1 rounded font-bold">입고확정</div>
                  <div className="border border-gray-400 px-2 py-1 rounded text-gray-600">입고검사 등록</div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>
      </div>

      {/* ============ 회계관리 메뉴 가이드 ============ */}
      <div className="mt-10 pt-6 border-t-2 border-gray-400">
        <h3 className="text-base font-bold text-gray-800 mb-4">회계관리 메뉴 가이드</h3>
        <p className="text-sm text-gray-600 mb-6">매출/매입/수금 관리 및 원가 분석</p>

        {/* 매출관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">회계관리</span>
            <span className="font-bold text-sm">매출관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>회계관리 → 매출관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>출하 완료 건 기준 매출 등록 및 세금계산서 발행</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>출하 완료 → 매출 자동 생성, 수금관리 연동</div>
          </div>
          <ScreenPreview title="회계관리 → 매출관리">
            <div className="space-y-2 text-xs">
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-6 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">매출번호</div>
                  <div className="border-r border-gray-300 p-1 text-center">거래처</div>
                  <div className="border-r border-gray-300 p-1 text-center">수주번호</div>
                  <div className="border-r border-gray-300 p-1 text-center">매출금액</div>
                  <div className="border-r border-gray-300 p-1 text-center">세금계산서</div>
                  <div className="p-1 text-center">수금상태</div>
                </div>
                <div className="grid grid-cols-6 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">SL-2024-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">ABC건설</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">SO-2024-001</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">25,000,000</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center"><span className="bg-gray-300 px-1 rounded">발행</span></div>
                  <div className="border-t border-gray-300 p-1 text-center"><span className="bg-gray-200 px-1 rounded">미수금</span></div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>

        {/* 수금관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">회계관리</span>
            <span className="font-bold text-sm">수금관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>회계관리 → 수금관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>매출채권 회수 등록 및 미수금 관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>매출관리 연동, 금전출납부 자동 기록</div>
          </div>
          <ScreenPreview title="회계관리 → 수금관리">
            <div className="space-y-2 text-xs">
              <div className="flex gap-2 mb-2">
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-2 py-0.5 rounded font-bold">+ 수금등록</div>
              </div>
              <div className="border border-gray-400 rounded p-2 bg-gray-100">
                <div className="font-bold mb-2">수금 등록</div>
                <div className="grid grid-cols-2 gap-2 mb-2">
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">거래처:</span>
                    <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">ABC건설</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">수금금액:</span>
                    <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">25,000,000</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">입금일:</span>
                    <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">2024-03-20</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <span className="text-gray-500">입금방법:</span>
                    <span className="border border-gray-400 px-2 py-0.5 bg-white rounded">계좌이체 ▼</span>
                  </div>
                </div>
                <div className="border-2 border-gray-700 bg-gray-700 text-white px-3 py-1 rounded font-bold inline-block">수금확정</div>
              </div>
            </div>
          </ScreenPreview>
        </div>

        {/* 원가관리 */}
        <div className="mb-6 border-l-4 border-gray-400 pl-4">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs font-bold bg-gray-600 text-white px-2 py-0.5 rounded">회계관리</span>
            <span className="font-bold text-sm">원가관리</span>
          </div>
          <div className="text-xs text-gray-600 space-y-1 mb-2">
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">메뉴</span>회계관리 → 원가관리</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">용도</span>작업지시별/제품별 원가 분석</div>
            <div><span className="bg-gray-200 px-1.5 py-0.5 rounded mr-1">연동</span>자재투입 원가, 공정별 가공비 자동 집계</div>
          </div>
          <ScreenPreview title="회계관리 → 원가관리">
            <div className="space-y-2 text-xs">
              <div className="border border-gray-300 rounded">
                <div className="grid grid-cols-6 gap-0 bg-gray-200 font-bold">
                  <div className="border-r border-gray-300 p-1 text-center">작업지시</div>
                  <div className="border-r border-gray-300 p-1 text-center">품목</div>
                  <div className="border-r border-gray-300 p-1 text-center">재료비</div>
                  <div className="border-r border-gray-300 p-1 text-center">가공비</div>
                  <div className="border-r border-gray-300 p-1 text-center">총원가</div>
                  <div className="p-1 text-center">단위원가</div>
                </div>
                <div className="grid grid-cols-6 gap-0 bg-white">
                  <div className="border-r border-t border-gray-300 p-1 text-center">WO-2024-0015</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">방화셔터</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">8,500,000</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center">3,200,000</div>
                  <div className="border-r border-t border-gray-300 p-1 text-center font-bold">11,700,000</div>
                  <div className="border-t border-gray-300 p-1 text-center">234,000/SET</div>
                </div>
              </div>
            </div>
          </ScreenPreview>
        </div>
      </div>

      {/* ============ 전체 메뉴 연동 맵 ============ */}
      <div className="mt-10 pt-6 border-t-2 border-gray-400">
        <h3 className="text-base font-bold text-gray-800 mb-4">전체 메뉴 연동 관계</h3>
        <table className="w-full text-xs border-collapse">
          <thead>
            <tr className="bg-gray-200">
              <th className="border border-gray-300 px-2 py-1 text-left">메뉴 그룹</th>
              <th className="border border-gray-300 px-2 py-1 text-left">주요 메뉴</th>
              <th className="border border-gray-300 px-2 py-1 text-left">데이터 연동</th>
              <th className="border border-gray-300 px-2 py-1 text-left">필수 선행작업</th>
            </tr>
          </thead>
          <tbody>
            <tr><td className="border border-gray-300 px-2 py-1 font-bold" rowSpan="5">기준정보</td><td className="border border-gray-300 px-2 py-1">거래처기준</td><td className="border border-gray-300 px-2 py-1">수주/매출/수금</td><td className="border border-gray-300 px-2 py-1">-</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1">현장기준</td><td className="border border-gray-300 px-2 py-1">수주/출하</td><td className="border border-gray-300 px-2 py-1">거래처 등록</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1">품목기준</td><td className="border border-gray-300 px-2 py-1">전체(수주/생산/재고)</td><td className="border border-gray-300 px-2 py-1">-</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1">공정기준</td><td className="border border-gray-300 px-2 py-1">작업지시 생성</td><td className="border border-gray-300 px-2 py-1">-</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1">검사기준</td><td className="border border-gray-300 px-2 py-1">검사관리</td><td className="border border-gray-300 px-2 py-1">-</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1 font-bold" rowSpan="2">판매관리</td><td className="border border-gray-300 px-2 py-1">수주관리</td><td className="border border-gray-300 px-2 py-1">작업지시/출하/매출</td><td className="border border-gray-300 px-2 py-1">거래처/현장/품목 등록</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1">단가관리</td><td className="border border-gray-300 px-2 py-1">수주 금액 자동계산</td><td className="border border-gray-300 px-2 py-1">품목/거래처 등록</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1 font-bold" rowSpan="3">생산관리</td><td className="border border-gray-300 px-2 py-1">작업지시</td><td className="border border-gray-300 px-2 py-1">작업실적/검사</td><td className="border border-gray-300 px-2 py-1">수주 확정</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1">작업실적</td><td className="border border-gray-300 px-2 py-1">재고/검사</td><td className="border border-gray-300 px-2 py-1">작업지시/자재투입</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1">작업자화면</td><td className="border border-gray-300 px-2 py-1">작업실적</td><td className="border border-gray-300 px-2 py-1">작업지시 확정</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1 font-bold">품질관리</td><td className="border border-gray-300 px-2 py-1">검사관리</td><td className="border border-gray-300 px-2 py-1">출하 가능 여부</td><td className="border border-gray-300 px-2 py-1">작업 완료</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1 font-bold" rowSpan="2">자재관리</td><td className="border border-gray-300 px-2 py-1">입고관리</td><td className="border border-gray-300 px-2 py-1">재고/입고검사</td><td className="border border-gray-300 px-2 py-1">품목/공급업체 등록</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1">재고현황</td><td className="border border-gray-300 px-2 py-1">자재투입 LOT선택</td><td className="border border-gray-300 px-2 py-1">입고 완료</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1 font-bold">물류관리</td><td className="border border-gray-300 px-2 py-1">출하관리</td><td className="border border-gray-300 px-2 py-1">매출 생성</td><td className="border border-gray-300 px-2 py-1">검사 합격</td></tr>
            <tr><td className="border border-gray-300 px-2 py-1 font-bold" rowSpan="2">회계관리</td><td className="border border-gray-300 px-2 py-1">매출관리</td><td className="border border-gray-300 px-2 py-1">수금관리</td><td className="border border-gray-300 px-2 py-1">출하 완료</td></tr>
            <tr className="bg-gray-50"><td className="border border-gray-300 px-2 py-1">수금관리</td><td className="border border-gray-300 px-2 py-1">금전출납부</td><td className="border border-gray-300 px-2 py-1">매출 등록</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  );

  return (
    <div className="p-6 bg-gray-100 min-h-screen">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800">
          수주/생산관리/공정관리 플로우차트
        </h1>
        <p className="text-gray-500 mt-1">방화셔터 제조 MES - 전체 업무 흐름도</p>
      </div>

      <div className="flex gap-2 mb-6 border-b border-gray-300 pb-2 flex-wrap">
        {[
          { id: 'main', label: '1. 전체 흐름' },
          { id: 'work-order', label: '2. 작업지시' },
          { id: 'production', label: '3. 생산 공정' },
          { id: 'worker', label: '4. 작업자' },
          { id: 'document', label: '5. 문서/결재' },
          { id: 'quality', label: '6. 품질검사' },
          { id: 'internal-request', label: '7. 내부요청/재작업' },
          { id: 'prototype', label: '8. 조작가이드' },
          { id: 'work-result', label: '9. 작업실적 흐름' },
          { id: 'work-log', label: '9-1. 작업일지' },
          { id: 'data-structure', label: '10. 데이터 구조' },
          { id: 'all', label: '전체 보기' },
        ].map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveFlow(tab.id)}
            className={`px-3 py-2 text-sm font-medium transition-colors ${
              activeFlow === tab.id
                ? 'border-b-2 border-black text-black bg-white'
                : 'text-gray-500 hover:text-gray-700'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeFlow === 'main' && <MainFlowChart />}
      {activeFlow === 'work-order' && <WorkOrderFlowChart />}
      {activeFlow === 'production' && <ProductionProcessFlow />}
      {activeFlow === 'worker' && <WorkerFlowChart />}
      {activeFlow === 'document' && <DocumentApprovalFlow />}
      {activeFlow === 'quality' && <QualityInspectionFlow />}
      {activeFlow === 'internal-request' && <InternalRequestFlow />}
      {activeFlow === 'prototype' && <PrototypeGuide />}
      {activeFlow === 'work-result' && <WorkResultDataFlow />}
      {activeFlow === 'work-log' && <WorkLogDocumentFlow />}
      {activeFlow === 'data-structure' && <DataStructureFlow />}
      {activeFlow === 'all' && (
        <>
          <MainFlowChart />
          <WorkOrderFlowChart />
          <ProductionProcessFlow />
          <WorkerFlowChart />
          <DocumentApprovalFlow />
          <QualityInspectionFlow />
          <InternalRequestFlow />
          <PrototypeGuide />
          <WorkResultDataFlow />
          <WorkLogDocumentFlow />
          <DataStructureFlow />
        </>
      )}
    </div>
  );
};

export default ProductionUserFlow;
