From 73674385be774d1027008390c21a62030d1bb68a Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Fri, 20 Mar 2026 10:51:26 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20MES=20=EC=B9=B4=EB=93=9C=20=EC=82=B0?=
 =?UTF-8?q?=EC=97=85=EC=9A=A9=20=ED=83=9C=EB=B8=94=EB=A6=BF=20UI=20?=
 =?UTF-8?q?=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8=20(10=EC=9D=B8=EC=B9=98=20?=
 =?UTF-8?q?=ED=84=B0=EC=B9=98=20=EC=B5=9C=EC=A0=81=ED=99=94)=20=EC=82=B0?=
 =?UTF-8?q?=EC=97=85=ED=98=84=EC=9E=A5=2010=EC=9D=B8=EC=B9=98=20=ED=83=9C?=
 =?UTF-8?q?=EB=B8=94=EB=A6=BF=EC=97=90=EC=84=9C=EC=9D=98=20=EA=B0=80?=
 =?UTF-8?q?=EB=8F=85=EC=84=B1=EA=B3=BC=20=ED=84=B0=EC=B9=98=20=EC=A1=B0?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=EC=9D=84=20=EB=8C=80=ED=8F=AD=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=ED=95=9C=EB=8B=A4.=20HTML=20=EC=8B=9C=EC=95=88(pop-de?=
 =?UTF-8?q?sign-v2)=EC=9D=84=20=EA=B8=B0=EB=B0=98=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EC=A1=B4=20=EA=B8=B0=EB=8A=A5=EC=9D=84=20=EB=AA=A8?=
 =?UTF-8?q?=EB=91=90=20=EB=B3=B4=EC=A1=B4=ED=95=98=EB=A9=B4=EC=84=9C=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=EB=A7=8C=20=EB=B3=80=EA=B2=BD.=20[?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=97=A4=EB=8D=94=20=EC=9E=AC=EA=B5=AC?=
 =?UTF-8?q?=EC=84=B1]=20-=20=ED=92=88=EB=AA=A9=EB=AA=85(item=5Fname)=2020p?=
 =?UTF-8?q?x=20bold=20=EA=B0=95=EC=A1=B0=20(=EA=B8=B0=EC=A1=B4:=20?=
 =?UTF-8?q?=EB=AF=B8=ED=91=9C=EC=8B=9C)=20-=20WO=EB=B2=88=ED=98=B8+?=
 =?UTF-8?q?=EA=B3=B5=EC=A0=95=EB=AA=85=2014px=20=EB=B3=B4=EC=A1=B0=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=EB=A1=9C=20=EC=A0=84=ED=99=98=20(=EA=B8=B0?=
 =?UTF-8?q?=EC=A1=B4:=20WO=EB=B2=88=ED=98=B8=2013px=20=EC=A3=BC=EC=9D=B8?=
 =?UTF-8?q?=EA=B3=B5)=20-=20=EC=83=81=ED=83=9C=20=EB=B0=B0=EC=A7=80=2014px?=
 =?UTF-8?q?=20rounded-full=20pill=20(=EA=B8=B0=EC=A1=B4:=2010px)=20-=20?=
 =?UTF-8?q?=EC=9E=AC=EC=9E=91=EC=97=85=20=EB=B0=B0=EC=A7=80=2012px=20(?=
 =?UTF-8?q?=EA=B8=B0=EC=A1=B4:=209px)=20-=20=EC=A2=8C=EC=B8=A1=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=AC=EB=B0=94=204px=20(=EA=B8=B0=EC=A1=B4:=203px)=20[?=
 =?UTF-8?q?=EB=A9=94=ED=8A=B8=EB=A6=AD=203=EB=8B=A8=20=ED=86=B5=EC=9D=BC?=
 =?UTF-8?q?=20=EA=B5=AC=EC=A1=B0]=20-=20=EC=A0=91=EC=88=98=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5:=20=EC=BB=A8=ED=85=8D=EC=8A=A4=ED=8A=B8=20+=20?=
 =?UTF-8?q?=ED=8C=8C=EB=9E=91=20=EB=B0=95=EC=8A=A4(=EC=A0=91=EC=88=98?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=20N=20EA)=20-=20=EC=A7=84=ED=96=89=EC=A4=91:?=
 =?UTF-8?q?=20=EC=BB=A8=ED=85=8D=EC=8A=A4=ED=8A=B8=20+=20=EC=A3=BC?=
 =?UTF-8?q?=ED=99=A9=20=EB=B0=95=EC=8A=A4(=EC=83=9D=EC=82=B0=20N=20/=20N?=
 =?UTF-8?q?=20EA)=20+=20=EC=B9=A9(=EC=96=91=ED=92=88/=EB=B6=88=EB=9F=89/?=
 =?UTF-8?q?=EC=9E=94=EC=97=AC)=20-=20=EC=99=84=EB=A3=8C:=20=EC=BB=A8?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8+=EC=88=98=EC=9C=A8pill=20+=20?=
 =?UTF-8?q?=EC=B4=88=EB=A1=9D=20=EB=B0=95=EC=8A=A4(=EC=B5=9C=EC=A2=85?=
 =?UTF-8?q?=EC=96=91=ED=92=88=20N=20EA)=20+=20=EC=B9=A9=20-=20=EC=9E=AC?=
 =?UTF-8?q?=EC=9E=91=EC=97=85:=20=EC=BB=A8=ED=85=8D=EC=8A=A4=ED=8A=B8=20+?=
 =?UTF-8?q?=20=EC=A3=BC=ED=99=A9=20=EB=B0=95=EC=8A=A4(=EC=9E=AC=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EC=88=98=EB=9F=89=20N=20EA)=20-=20=ED=95=B5?=
 =?UTF-8?q?=EC=8B=AC=20=EC=88=98=EB=9F=89=2036px=20extrabold,=20=EC=BB=A8?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=2014px=20(=EA=B8=B0=EC=A1=B4:=2018p?=
 =?UTF-8?q?x/10px)=20[=EC=B9=B4=EB=93=9C=20=EB=86=92=EC=9D=B4=20=EC=9D=BC?=
 =?UTF-8?q?=EA=B4=80=EC=84=B1]=20-=20=EB=A9=94=ED=8A=B8=EB=A6=AD=20?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=20flex-1=20=EC=A0=81=EC=9A=A9:=20=EA=B0=99?=
 =?UTF-8?q?=EC=9D=80=20=ED=96=89=EC=9D=98=20=EC=B9=B4=EB=93=9C=EB=93=A4?=
 =?UTF-8?q?=EC=9D=B4=20=EB=8F=99=EC=9D=BC=20=EB=86=92=EC=9D=B4=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=20-=20=EA=B3=B5=EC=A0=95=20=ED=9D=90?=
 =?UTF-8?q?=EB=A6=84/=EB=B2=84=ED=8A=BC=EC=9D=B4=20=ED=95=AD=EC=83=81=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=95=98=EB=8B=A8=20=EA=B3=A0=EC=A0=95=20?=
 =?UTF-8?q?[=EA=B3=B5=EC=A0=95=20=ED=9D=90=EB=A6=84=20=EB=85=B8=EB=93=9C?=
 =?UTF-8?q?=20=EA=B8=B0=EB=B0=98=20=EB=94=94=EC=9E=90=EC=9D=B8]=20-=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=B9=A9=20->=2040x40px=20?=
 =?UTF-8?q?=EB=85=B8=EB=93=9C=20=EB=B0=95=EC=8A=A4=20+=20=EB=9D=BC?=
 =?UTF-8?q?=EB=B2=A8=20(=EA=B8=B0=EC=A1=B4:=2010px=20=EC=B9=A9)=20-=20?=
 =?UTF-8?q?=EC=BB=A4=EB=84=A5=ED=84=B0=20=EB=9D=BC=EC=9D=B8=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B3=B5=EC=A0=95=20=EC=97=B0=EA=B2=B0=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=ED=99=94=20[=EC=95=A1=EC=85=98=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EB=8C=80=ED=98=95=ED=99=94]=20-=20h-14(56px)=20full-width?=
 =?UTF-8?q?=20rounded-xl=2017px=20bold=20(=EA=B8=B0=EC=A1=B4:=20h-7=2028px?=
 =?UTF-8?q?=2011px)=20[MES=20=EC=B9=B4=EB=93=9C=20=EB=9E=98=ED=8D=BC=20?=
 =?UTF-8?q?=ED=8C=A8=EB=94=A9]=20-=20MES=20=EC=B9=B4=EB=93=9C=20=EC=A0=84?=
 =?UTF-8?q?=EC=9A=A9=20p-1=20=EC=A0=9C=EA=B1=B0=20(=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=82=B4=EB=B6=80=20=EC=B6=A9=EB=B6=84=ED=95=9C=20=ED=8C=A8?=
 =?UTF-8?q?=EB=94=A9=20px-5=20=EB=B3=B4=EC=9C=A0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PopCardListV2Component.tsx                |   4 +-
 .../pop-card-list-v2/cell-renderers.tsx       | 330 ++++++++++--------
 2 files changed, 192 insertions(+), 142 deletions(-)

diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx
index 075e436b..0913779c 100644
--- a/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx
@@ -1861,11 +1861,11 @@ function CardV2({
       )}
 
       {/* CSS Grid 기반 셀 렌더링 */}
-      <div className="flex-1 overflow-hidden p-1" style={gridStyle}>
+      <div className={cn("flex-1 overflow-hidden", !isMesCard && "p-1")} style={gridStyle}>
         {cardGrid.cells.map((cell) => (
           <div
             key={cell.id}
-            className="overflow-hidden p-1"
+            className={cn("overflow-hidden", !isMesCard && "p-1")}
             style={{
               display: "flex",
               flexDirection: "column",
diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx b/frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx
index 6c0b15bd..9c24d382 100644
--- a/frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx
@@ -829,12 +829,6 @@ function ProcessQtySummaryCell({ cell, row }: CellRendererProps) {
               style={{ width: `${progressPct}%` }}
             />
           </div>
-          <span className={cn(
-            "text-[10px] font-bold tabular-nums",
-            isBatchDone ? "text-violet-600" : "text-primary",
-          )}>
-            {progressPct}%
-          </span>
         </div>
         {/* 수량 상세 */}
         <div className="flex items-center justify-between gap-0.5">
@@ -1027,6 +1021,7 @@ function MesProcessCardCell({ cell, row, onActionButtonClick, currentUserId }: C
   const processName = currentStep?.processName || String(row.__process_process_name ?? "");
   const woNo = String(row.work_instruction_no ?? "");
   const itemId = String(row.item_id ?? "");
+  const itemName = String(row.item_name ?? "");
 
   // MES 워크플로우 상태 기반 버튼 결정
   const acceptBtn = (cell.actionButtons || []).find((b) => b.showCondition?.type === "timeline-status");
@@ -1052,36 +1047,32 @@ function MesProcessCardCell({ cell, row, onActionButtonClick, currentUserId }: C
     <>
       <div
         className="flex h-full w-full flex-col overflow-hidden"
-        style={{ borderLeft: `3px solid ${st.color}`, backgroundColor: st.bg }}
+        style={{ borderLeft: `4px solid ${st.color}`, backgroundColor: st.bg }}
       >
         {/* ── 헤더 ── */}
-        <div className="flex items-start justify-between px-3 pt-2.5 pb-1">
+        <div className="flex items-start justify-between px-5 pt-5 pb-1">
           <div className="min-w-0 flex-1">
-            <div className="flex items-center gap-1.5">
-              <span className="truncate text-[13px] font-bold leading-tight">{woNo}</span>
-              {itemId && itemId !== "-" && (
-                <span className="truncate text-[10px] text-muted-foreground">{itemId}</span>
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-[14px] font-medium text-muted-foreground">{woNo}</span>
+              {processName && (
+                <span className="text-[14px] font-semibold" style={{ color: st.color }}>
+                  {processName}
+                  {processFlow && processFlow.length > 1 && ` (${currentIdx + 1}/${processFlow.length})`}
+                </span>
               )}
             </div>
-            {processName && (
-              <div className="mt-0.5 flex items-center gap-1">
-                <span className="text-[11px] font-semibold" style={{ color: st.color }}>{processName}</span>
-                {processFlow && processFlow.length > 1 && (
-                  <span className="text-[9px] text-muted-foreground">
-                    ({currentIdx + 1}/{processFlow.length}공정)
-                  </span>
-                )}
-              </div>
-            )}
+            <div className="mt-1">
+              <span className="text-[20px] font-bold leading-tight">{itemName || itemId || "-"}</span>
+            </div>
           </div>
-          <div className="ml-2 flex shrink-0 items-center gap-1">
+          <div className="ml-3 flex shrink-0 items-center gap-2">
             {isRework && (
-              <span className="rounded bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold text-white">
+              <span className="rounded-md bg-amber-500 px-2.5 py-1 text-[12px] font-bold text-white">
                 재작업
               </span>
             )}
             <span
-              className="rounded px-2 py-0.5 text-[10px] font-bold"
+              className="rounded-full px-3.5 py-1.5 text-[14px] font-bold"
               style={{ backgroundColor: st.color, color: "#fff" }}
             >
               {st.label}
@@ -1090,7 +1081,7 @@ function MesProcessCardCell({ cell, row, onActionButtonClick, currentUserId }: C
         </div>
 
         {/* ── 수량 메트릭 (상태별) ── */}
-        <div className="px-3 py-1.5">
+        <div className="flex-1 px-5 py-3">
           {(isClone || rawStatus === "acceptable" || rawStatus === "waiting") && (
             <MesAcceptableMetrics
               instrQty={instrQty}
@@ -1130,7 +1121,7 @@ function MesProcessCardCell({ cell, row, onActionButtonClick, currentUserId }: C
         {/* ── 공정 흐름 스트립 (클릭 시 모달) ── */}
         {processFlow && processFlow.length > 0 && (
           <div
-            className="cursor-pointer border-t px-3 py-1.5 transition-colors hover:bg-black/2"
+            className="cursor-pointer border-t px-5 py-3 transition-colors hover:bg-black/3"
             style={{ borderColor: `${st.color}20` }}
             onClick={(e) => { e.stopPropagation(); setFlowModalOpen(true); }}
             title="클릭하여 공정 상세 보기"
@@ -1139,49 +1130,58 @@ function MesProcessCardCell({ cell, row, onActionButtonClick, currentUserId }: C
           </div>
         )}
 
-        {/* ── 하단: 부가정보 + 액션 ── */}
-        <div
-          className="mt-auto flex items-center justify-between border-t px-3 py-1.5"
-          style={{ borderColor: `${st.color}20` }}
-        >
-          <div className="flex items-center gap-2 text-[9px] text-muted-foreground">
-            {row.end_date && <span>납기 {formatValue(row.end_date)}</span>}
-            {row.equipment_id && <span>{String(row.equipment_id)}</span>}
-            {row.work_team && <span>{String(row.work_team)}</span>}
+        {/* ── 부가정보 ── */}
+        {(row.end_date || row.equipment_id || row.work_team) && (
+          <div
+            className="border-t px-5 py-2"
+            style={{ borderColor: `${st.color}20` }}
+          >
+            <div className="flex items-center gap-4 text-[14px] text-muted-foreground">
+              {row.end_date && <span>납기 <b className="text-foreground">{formatValue(row.end_date)}</b></span>}
+              {row.equipment_id && <span>{String(row.equipment_id)}</span>}
+              {row.work_team && <span>{String(row.work_team)}</span>}
+            </div>
           </div>
-          <div className="flex shrink-0 items-center gap-1">
-            {activeBtn && (
-              <Button
-                variant={activeBtn.variant || "default"}
-                size="sm"
-                className="h-7 px-3 text-[11px] font-semibold"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  const actions = activeBtn.clickActions?.length ? activeBtn.clickActions : [activeBtn.clickAction];
-                  const firstAction = actions[0];
-                  const config: Record<string, unknown> = { ...firstAction, __allActions: actions };
-                  if (processId !== undefined) config.__processId = processId;
-                  onActionButtonClick?.(activeBtn.label, row, config);
-                }}
-              >
-                {activeBtn.label}
-              </Button>
-            )}
-            {showManualComplete && (
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-7 px-3 text-[11px] font-semibold"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onActionButtonClick?.("__manualComplete", row, { __processId: processId });
-                }}
-              >
-                수동 완료
-              </Button>
-            )}
+        )}
+
+        {/* ── 액션 버튼 ── */}
+        {(activeBtn || showManualComplete) && (
+          <div
+            className="mt-auto border-t px-5 py-3"
+            style={{ borderColor: `${st.color}20` }}
+          >
+            <div className="flex gap-3">
+              {activeBtn && (
+                <Button
+                  variant={activeBtn.variant || "default"}
+                  className="h-14 flex-1 rounded-xl text-[17px] font-bold"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const actions = activeBtn.clickActions?.length ? activeBtn.clickActions : [activeBtn.clickAction];
+                    const firstAction = actions[0];
+                    const config: Record<string, unknown> = { ...firstAction, __allActions: actions };
+                    if (processId !== undefined) config.__processId = processId;
+                    onActionButtonClick?.(activeBtn.label, row, config);
+                  }}
+                >
+                  {activeBtn.label}
+                </Button>
+              )}
+              {showManualComplete && (
+                <Button
+                  variant="outline"
+                  className="h-14 flex-1 rounded-xl text-[17px] font-bold"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onActionButtonClick?.("__manualComplete", row, { __processId: processId });
+                  }}
+                >
+                  수동 완료
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
 
       {/* ── 공정 상세 모달 ── */}
@@ -1260,7 +1260,7 @@ function MesProcessCardCell({ cell, row, onActionButtonClick, currentUserId }: C
   );
 }
 
-// ── 공정 흐름 스트립 (5슬롯: 지나온 + 이전 + 현재 + 다음 + 남은) ──
+// ── 공정 흐름 스트립 (노드 기반: 지나온 + 이전 + 현재 + 다음 + 남은) ──
 function ProcessFlowStrip({ steps, currentIdx, instrQty }: {
   steps: TimelineProcessStep[]; currentIdx: number; instrQty: number;
 }) {
@@ -1277,61 +1277,75 @@ function ProcessFlowStrip({ steps, currentIdx, instrQty }: {
     return sem === "done";
   });
 
-  const renderChip = (step: TimelineProcessStep, isCurrent: boolean) => {
+  const renderNode = (step: TimelineProcessStep, isCurrent: boolean) => {
     const sem = step.semantic || LEGACY_STATUS_TO_SEMANTIC[step.status] || "pending";
     return (
-      <span className={cn(
-        "inline-flex shrink-0 items-center gap-0.5 rounded-full px-2 py-0.5 text-[10px] font-medium whitespace-nowrap",
-        isCurrent
-          ? "bg-primary text-primary-foreground shadow-sm"
-          : sem === "done"
-            ? "bg-emerald-50 text-emerald-700"
-            : "bg-muted text-muted-foreground",
-      )}>
-        {sem === "done" && !isCurrent && <Check className="h-2.5 w-2.5" />}
-        {step.seqNo} {step.processName}
-      </span>
+      <div className="flex flex-col items-center gap-1">
+        <div className={cn(
+          "flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] border-2 text-[14px] font-bold",
+          isCurrent
+            ? "border-primary bg-primary text-primary-foreground shadow-sm shadow-primary/20"
+            : sem === "done"
+              ? "border-emerald-200 bg-emerald-50 text-emerald-600"
+              : "border-border bg-muted text-muted-foreground",
+        )}>
+          {sem === "done" && !isCurrent ? <Check className="h-4 w-4" /> : step.seqNo}
+        </div>
+        <span className={cn(
+          "max-w-[56px] truncate text-center text-[11px] font-medium",
+          isCurrent ? "font-bold text-primary" : "text-muted-foreground",
+        )}>
+          {step.processName}
+        </span>
+      </div>
     );
   };
 
+  const connDone = "mt-[18px] h-[3px] w-5 shrink-0 bg-emerald-400";
+  const connPending = "mt-[18px] h-[3px] w-5 shrink-0 bg-border";
+
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-start">
       {hiddenBefore > 0 && (
         <>
-          <span className={cn(
-            "inline-flex shrink-0 items-center rounded-full px-1.5 py-0.5 text-[10px] font-bold tabular-nums",
-            allBeforeDone
-              ? "bg-emerald-100 text-emerald-600"
-              : "bg-slate-100 text-slate-500",
-          )}>
-            +{hiddenBefore}
-          </span>
-          <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/40" />
+          <div className="flex flex-col items-center gap-1">
+            <div className={cn(
+              "flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] border-2 text-[13px] font-bold tabular-nums",
+              allBeforeDone
+                ? "border-emerald-200 bg-emerald-50 text-emerald-600"
+                : "border-border bg-muted text-muted-foreground",
+            )}>
+              +{hiddenBefore}
+            </div>
+          </div>
+          <div className={allBeforeDone ? connDone : connPending} />
         </>
       )}
 
       {prevStep && (
         <>
-          {renderChip(prevStep, false)}
-          <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/40" />
+          {renderNode(prevStep, false)}
+          <div className={connDone} />
         </>
       )}
 
-      {currStep && renderChip(currStep, true)}
+      {currStep && renderNode(currStep, true)}
 
       {nextStep && (
         <>
-          <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/40" />
-          {renderChip(nextStep, false)}
+          <div className={connPending} />
+          {renderNode(nextStep, false)}
         </>
       )}
 
       {hiddenAfter > 0 && (
         <>
-          <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/40" />
-          <span className="inline-flex shrink-0 items-center rounded-full bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-amber-600">
-            +{hiddenAfter}
-          </span>
+          <div className={connPending} />
+          <div className="flex flex-col items-center gap-1">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[10px] border-2 border-amber-200 bg-amber-50 text-[13px] font-bold tabular-nums text-amber-600">
+              +{hiddenAfter}
+            </div>
+          </div>
         </>
       )}
     </div>
@@ -1344,21 +1358,22 @@ function MesAcceptableMetrics({ instrQty, prevGoodQty, availableQty, inputQty, i
 }) {
   if (isRework) {
     return (
-      <div className="space-y-1.5">
-        <div className="flex items-center gap-3 text-[10px]">
-          <span className="text-amber-600 font-medium">불량 재작업 대상</span>
+      <div className="space-y-3">
+        <div className="flex items-center gap-3 text-[14px]">
+          <span className="font-medium text-amber-600">불량 재작업 대상</span>
         </div>
-        <div className="flex items-center justify-center rounded-md py-2" style={{ backgroundColor: "rgba(245,158,11,0.08)" }}>
-          <span className="text-[11px] text-muted-foreground">재작업 수량&ensp;</span>
-          <span className="text-lg font-extrabold tabular-nums text-amber-600">{inputQty.toLocaleString()}</span>
+        <div className="flex items-center justify-center gap-2.5 rounded-lg py-3.5" style={{ backgroundColor: "rgba(245,158,11,0.08)" }}>
+          <span className="text-[16px] font-medium text-muted-foreground">재작업 수량</span>
+          <span className="text-[36px] font-extrabold tabular-nums leading-none tracking-tight text-amber-600">{inputQty.toLocaleString()}</span>
+          <span className="text-[16px] font-medium text-muted-foreground">EA</span>
         </div>
       </div>
     );
   }
   const displayAvail = isClone ? availableQty : (availableQty || prevGoodQty);
   return (
-    <div className="space-y-1.5">
-      <div className="flex items-center gap-3 text-[10px]">
+    <div className="space-y-3">
+      <div className="flex items-center gap-4 text-[14px]">
         <span className="text-muted-foreground">지시 <b className="text-foreground">{instrQty.toLocaleString()}</b></span>
         {!isFirstProcess && (
           <span className="text-muted-foreground">전공정양품 <b className="text-emerald-600">{prevGoodQty.toLocaleString()}</b></span>
@@ -1367,9 +1382,10 @@ function MesAcceptableMetrics({ instrQty, prevGoodQty, availableQty, inputQty, i
           <span className="text-muted-foreground">기접수 <b className="text-foreground">{inputQty.toLocaleString()}</b></span>
         )}
       </div>
-      <div className="flex items-center justify-center rounded-md py-2" style={{ backgroundColor: "rgba(37,99,235,0.06)" }}>
-        <span className="text-[11px] text-muted-foreground">접수가능&ensp;</span>
-        <span className="text-lg font-extrabold tabular-nums text-primary">{displayAvail.toLocaleString()}</span>
+      <div className="flex items-center justify-center gap-2.5 rounded-lg py-3.5" style={{ backgroundColor: "rgba(37,99,235,0.06)" }}>
+        <span className="text-[16px] font-medium text-muted-foreground">접수가능</span>
+        <span className="text-[36px] font-extrabold tabular-nums leading-none tracking-tight text-primary">{displayAvail.toLocaleString()}</span>
+        <span className="text-[16px] font-medium text-muted-foreground">EA</span>
       </div>
     </div>
   );
@@ -1380,28 +1396,42 @@ function MesInProgressMetrics({ inputQty, totalProd, goodQty, defectQty, concess
   inputQty: number; totalProd: number; goodQty: number; defectQty: number; concessionQty: number; remainingQty: number; progressPct: number; availableQty: number; isBatchDone: boolean; statusColor: string;
 }) {
   return (
-    <div className="space-y-1.5">
-      {/* 메인 프로그레스 */}
-      <div className="flex items-center gap-2">
-        <span className="text-[10px] text-muted-foreground">접수 <b className="text-foreground">{inputQty.toLocaleString()}</b></span>
-        <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-secondary">
-          <div className="h-full rounded-full transition-all duration-300" style={{ width: `${progressPct}%`, backgroundColor: statusColor }} />
-        </div>
-        <span className="text-[11px] font-extrabold tabular-nums" style={{ color: statusColor }}>{progressPct}%</span>
+    <div className="space-y-3">
+      <div className="flex items-center gap-4 text-[14px]">
+        <span className="text-muted-foreground">접수 <b className="text-foreground">{inputQty.toLocaleString()}</b></span>
+        {availableQty > 0 && (
+          <span className="text-muted-foreground">추가접수가능 <b className="text-violet-600">{availableQty.toLocaleString()}</b></span>
+        )}
       </div>
-      {/* 수량 메트릭 */}
-      <div className={cn("grid gap-1", concessionQty > 0 ? "grid-cols-5" : "grid-cols-4")}>
-        <MesMetricBox label="완료" value={totalProd} color="#3b82f6" />
-        <MesMetricBox label="양품" value={goodQty} color="#10b981" />
-        <MesMetricBox label="불량" value={defectQty} color="#ef4444" dimZero />
-        {concessionQty > 0 && <MesMetricBox label="특채" value={concessionQty} color="#8b5cf6" />}
-        <MesMetricBox label="잔여" value={remainingQty} color={remainingQty > 0 ? "#f59e0b" : "#10b981"} />
+      <div className="flex items-center justify-center gap-2.5 rounded-lg py-3.5" style={{ backgroundColor: `${statusColor}0F` }}>
+        <span className="text-[16px] font-medium text-muted-foreground">생산</span>
+        <span className="text-[36px] font-extrabold tabular-nums leading-none tracking-tight" style={{ color: statusColor }}>
+          {totalProd.toLocaleString()}
+        </span>
+        <span className="text-[20px] font-normal text-muted-foreground">/ {inputQty.toLocaleString()}</span>
+        <span className="text-[16px] font-medium text-muted-foreground">EA</span>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <span className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-50 px-3 py-1.5 text-[14px] font-semibold text-emerald-600">
+          <span className="font-medium opacity-70">양품</span> {goodQty.toLocaleString()}
+        </span>
+        {defectQty > 0 && (
+          <span className="inline-flex items-center gap-1.5 rounded-lg bg-red-50 px-3 py-1.5 text-[14px] font-semibold text-red-600">
+            <span className="font-medium opacity-70">불량</span> {defectQty.toLocaleString()}
+          </span>
+        )}
+        {concessionQty > 0 && (
+          <span className="inline-flex items-center gap-1.5 rounded-lg bg-violet-50 px-3 py-1.5 text-[14px] font-semibold text-violet-600">
+            <span className="font-medium opacity-70">특채</span> {concessionQty.toLocaleString()}
+          </span>
+        )}
+        <span className={cn(
+          "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[14px] font-semibold",
+          remainingQty > 0 ? "bg-amber-50 text-amber-600" : "bg-emerald-50 text-emerald-600",
+        )}>
+          <span className="font-medium opacity-70">잔여</span> {remainingQty.toLocaleString()}
+        </span>
       </div>
-      {availableQty > 0 && (
-        <div className="text-right text-[9px] text-muted-foreground">
-          추가접수가능 <b className="text-violet-600">{availableQty.toLocaleString()}</b>
-        </div>
-      )}
     </div>
   );
 }
@@ -1411,17 +1441,37 @@ function MesCompletedMetrics({ instrQty, goodQty, defectQty, concessionQty, yiel
   instrQty: number; goodQty: number; defectQty: number; concessionQty: number; yieldRate: number;
 }) {
   return (
-    <div className="space-y-1.5">
-      <div className="flex items-center gap-3 text-[10px]">
+    <div className="space-y-3">
+      <div className="flex items-center gap-4 text-[14px]">
         <span className="text-muted-foreground">지시 <b className="text-foreground">{instrQty.toLocaleString()}</b></span>
-        <span className="text-muted-foreground">최종양품 <b className="text-emerald-600">{goodQty.toLocaleString()}</b></span>
-        {concessionQty > 0 && (
-          <span className="text-muted-foreground">특채 <b className="text-violet-600">{concessionQty.toLocaleString()}</b></span>
-        )}
-        <span className="ml-auto text-muted-foreground">수율 <b style={{ color: yieldRate >= 95 ? "#059669" : yieldRate >= 80 ? "#d97706" : "#ef4444" }}>{yieldRate}%</b></span>
+        <span
+          className="ml-auto rounded-full px-3.5 py-1 text-[14px] font-bold"
+          style={{
+            backgroundColor: yieldRate >= 95 ? "#f0fdf4" : yieldRate >= 80 ? "#fffbeb" : "#fef2f2",
+            color: yieldRate >= 95 ? "#059669" : yieldRate >= 80 ? "#d97706" : "#ef4444",
+          }}
+        >
+          수율 {yieldRate}%
+        </span>
       </div>
-      {defectQty > 0 && (
-        <div className="text-[9px] text-muted-foreground">불량 <b className="text-destructive">{defectQty.toLocaleString()}</b></div>
+      <div className="flex items-center justify-center gap-2.5 rounded-lg py-3.5" style={{ backgroundColor: "rgba(5,150,105,0.06)" }}>
+        <span className="text-[16px] font-medium text-muted-foreground">최종양품</span>
+        <span className="text-[36px] font-extrabold tabular-nums leading-none tracking-tight text-emerald-600">{goodQty.toLocaleString()}</span>
+        <span className="text-[16px] font-medium text-muted-foreground">EA</span>
+      </div>
+      {(defectQty > 0 || concessionQty > 0) && (
+        <div className="flex flex-wrap gap-2">
+          {defectQty > 0 && (
+            <span className="inline-flex items-center gap-1.5 rounded-lg bg-red-50 px-3 py-1.5 text-[14px] font-semibold text-red-600">
+              <span className="font-medium opacity-70">불량</span> {defectQty.toLocaleString()}
+            </span>
+          )}
+          {concessionQty > 0 && (
+            <span className="inline-flex items-center gap-1.5 rounded-lg bg-violet-50 px-3 py-1.5 text-[14px] font-semibold text-violet-600">
+              <span className="font-medium opacity-70">특채</span> {concessionQty.toLocaleString()}
+            </span>
+          )}
+        </div>
       )}
     </div>
   );