From 6262ddb76b755ad47aeb4bb60a7ca3b7306303dc Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Wed, 25 Mar 2026 15:01:53 +0900
Subject: [PATCH] =?UTF-8?q?feat(pop-work-detail):=20combined-final=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=95=88=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=E2=80=94=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=ED=99=95=EC=A0=95?=
 =?UTF-8?q?=EB=90=9C=20combined-final.html=20=EC=8B=9C=EC=95=88=EC=9D=84?=
 =?UTF-8?q?=20=EA=B8=B0=EB=B0=98=EC=9C=BC=EB=A1=9C=20PopWorkDetailComponen?=
 =?UTF-8?q?t=20=EC=A0=84=EB=A9=B4=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8:?=
 =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=EC=A1=B0=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD:=20-=20=ED=83=AD=20=EB=B0=94=20=E2=86=92=20?=
 =?UTF-8?q?=EC=A2=8C=EC=B8=A1=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94(w-52)?=
 =?UTF-8?q?=20+=20=EC=9A=B0=EC=B8=A1=20=EC=BD=98=ED=85=90=EC=B8=A0=20?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=20=EA=B5=AC=EC=A1=B0=EB=A1=9C=20=EC=A0=84?=
 =?UTF-8?q?=ED=99=98=20-=20=EB=AA=A8=EB=8B=AC=20=ED=97=A4=EB=8D=94:=20"?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=83=81=EC=84=B8"=20+=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=EC=A7=80=EC=8B=9C=EB=B2=88=ED=98=B8=20+=20=EB=8B=AB?=
 =?UTF-8?q?=EA=B8=B0(X)=20=EB=B2=84=ED=8A=BC=20-=20=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=EB=B0=94:=20#1a1a2e=20=EB=8B=A4=ED=81=AC=20=EB=B0=B0=EA=B2=BD,?=
 =?UTF-8?q?=20gap-8=20=EA=B0=84=EA=B2=A9,=20label(white/40)=20+=20value(wh?=
 =?UTF-8?q?ite)=20-=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94:=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A6=88=EB=B3=84=20=EA=B7=B8=EB=A3=B9=20(=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20+=20=EC=83=81=ED=83=9C=EC=83=89=20+=20?=
 =?UTF-8?q?=EC=A7=84=ED=96=89=EB=A5=A0),=20=EC=8B=A4=EC=A0=81=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A3=B9=20=ED=8F=AC=ED=95=A8=20-=20KPI=20=EC=B9=B4=EB=93=9C:?=
 =?UTF-8?q?=20=EC=BD=98=ED=85=90=EC=B8=A0=EC=99=80=20=ED=95=A8=EA=BB=98=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20(44px/800weight,=20tabular-nums,?=
 =?UTF-8?q?=20divider)=20-=20=ED=92=8B=ED=84=B0:=2048px=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=203=EB=B2=84=ED=8A=BC=20(border-2=20+=20rounded-xl)?=
 =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B5=AC=EC=A1=B0:=20-=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94:=20overflow-y-auto=20(?=
 =?UTF-8?q?=EC=9E=90=EC=B2=B4=20=EC=8A=A4=ED=81=AC=EB=A1=A4,=20thin=20scro?=
 =?UTF-8?q?llbar)=20-=20=EC=BD=98=ED=85=90=EC=B8=A0:=20overflow-y-auto=20(?=
 =?UTF-8?q?KPI=20+=20=EC=B2=B4=ED=81=AC=EB=A6=AC=EC=8A=A4=ED=8A=B8=20+=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A0=A5=20=ED=95=A8=EA=BB=98=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4)=20-=20=EC=A0=95=EB=B3=B4=EB=B0=94=20+=20=ED=92=8B?=
 =?UTF-8?q?=ED=84=B0:=20flex-shrink-0=20(=EA=B3=A0=EC=A0=95)=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD:=20-=20DESIGN=20?=
 =?UTF-8?q?=ED=86=A0=ED=81=B0:=20kpi.valueSize=2040=E2=86=9244,=20weight?=
 =?UTF-8?q?=20700=E2=86=92800,=20section.titleSize=2016=E2=86=9213=20-=20?=
 =?UTF-8?q?=EC=84=B9=EC=85=98=20=EC=A0=9C=EB=AA=A9:=20text-xs=20uppercase?=
 =?UTF-8?q?=20tracking-widest=20text-gray-400=20-=20=EC=8B=A4=EC=A0=81=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5:=20native=20input=20+=20rounded-xl,=202xl=20?=
 =?UTF-8?q?font,=20color-coded=20borders=20-=20=EB=B6=88=EB=9F=89=20?=
 =?UTF-8?q?=EC=9C=A0=ED=98=95:=20=EC=B9=B4=EB=93=9C=ED=98=95=20UI=20(round?=
 =?UTF-8?q?ed-xl=20border,=20severity=20badge)=20-=20=EB=93=B1=EB=A1=9D=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A0=A5:=20table=20=ED=98=95=ED=83=9C=20(=EC=B0=A8?=
 =?UTF-8?q?=EC=88=98/=EC=83=9D=EC=82=B0=EC=88=98=EB=9F=89/=EC=96=91?=
 =?UTF-8?q?=ED=92=88/=EB=B6=88=EB=9F=89/=EB=88=84=EC=A0=81/=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81)=20-=20GroupTimerHeader:=20px-8=20=EA=B0=84=EA=B2=A9,?=
 =?UTF-8?q?=20=EB=AF=B8=EB=8B=88=EB=A9=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=9C=A0=EC=A7=80:=20-=20step=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20+=20list=20=EB=AA=A8=EB=93=9C=20=EB=AA=A8=EB=91=90?=
 =?UTF-8?q?=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EA=B5=AC=EC=A1=B0=20?=
 =?UTF-8?q?=EC=95=88=EC=97=90=EC=84=9C=20=EC=A0=95=EC=83=81=20=EB=8F=99?=
 =?UTF-8?q?=EC=9E=91=20-=20=EC=B2=B4=ED=81=AC=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5/=EC=A0=80=EC=9E=A5,=20=EA=B7=B8=EB=A3=B9?=
 =?UTF-8?q?=20=ED=83=80=EC=9D=B4=EB=A8=B8,=20=EC=8B=A4=EC=A0=81=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D/=EC=9D=B4=EB=A0=A5=20=EB=AA=A8=EB=91=90=20?=
 =?UTF-8?q?=EB=B3=B4=EC=A1=B4=20-=202=EB=8B=A8=EA=B3=84=20=ED=99=95?=
 =?UTF-8?q?=EC=9D=B8=20(=EC=9E=91=EC=97=85=EC=99=84=EB=A3=8C),=20=EB=B6=88?=
 =?UTF-8?q?=EB=9F=89=EB=93=B1=EB=A1=9D=20=EC=97=B0=EB=8F=99=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PopWorkDetailComponent.tsx                | 1354 +++++++++--------
 1 file changed, 731 insertions(+), 623 deletions(-)

diff --git a/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx b/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
index 2d199537..30fe9a7f 100644
--- a/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx
@@ -134,22 +134,23 @@ const DEFAULT_CFG: PopWorkDetailConfig = {
 };
 
 // ========================================
-// ISA-101 디자인 토큰 (산업 터치 기준)
+// ISA-101 디자인 토큰 (combined-final 기준)
 // ========================================
 
 const DESIGN = {
   button: { height: 56, minWidth: 100 },
   input: { height: 56 },
   stat: { valueSize: 40, labelSize: 14, weight: 700 },
-  section: { titleSize: 16, gap: 20 },
+  section: { titleSize: 13, gap: 20 },
   tab: { height: 48 },
   footer: { height: 64 },
-  header: { height: 56 },
-  kpi: { valueSize: 40, labelSize: 14, weight: 700 },
+  header: { height: 48 },
+  kpi: { valueSize: 44, labelSize: 13, weight: 800 },
   nav: { height: 56 },
-  infoBar: { labelSize: 14, valueSize: 16 },
-  defectRow: { height: 56 },
-  bg: { page: '#F5F5F5', card: '#FFFFFF', header: '#263238' },
+  infoBar: { labelSize: 12, valueSize: 14 },
+  defectRow: { height: 44 },
+  sidebar: { width: 208 },
+  bg: { page: '#F5F5F5', card: '#FFFFFF', header: '#1a1a2e', infoBar: '#1a1a2e' },
 } as const;
 
 const COLORS = {
@@ -707,6 +708,30 @@ export function PopWorkDetailComponent({
     await handleTimerAction("complete");
   }, [handleTimerAction]);
 
+  // 현재 탭의 그룹 목록
+  const currentTabGroups = useMemo(
+    () => (activePhaseTab && !resultTabActive ? groupsByPhase[activePhaseTab] ?? [] : []),
+    [activePhaseTab, resultTabActive, groupsByPhase]
+  );
+
+  // 탭 전환 시 해당 phase의 첫 번째 그룹 자동 선택
+  const handlePhaseTabChange = useCallback((phase: string) => {
+    setActivePhaseTab(phase);
+    setResultTabActive(false);
+    const phaseGrps = groupsByPhase[phase];
+    if (phaseGrps && phaseGrps.length > 0) {
+      setSelectedGroupId(phaseGrps[0].itemId);
+    }
+    contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [groupsByPhase]);
+
+  const handleResultTabClick = useCallback(() => {
+    setResultTabActive(true);
+    setActivePhaseTab(null);
+    setSelectedGroupId(null);
+    contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, []);
+
   // ========================================
   // 안전 장치
   // ========================================
@@ -749,37 +774,32 @@ export function PopWorkDetailComponent({
   }
   const selectedGroup = groups.find((g) => g.itemId === selectedGroupId);
 
-  // 현재 탭의 그룹 목록
-  const currentTabGroups = useMemo(
-    () => (activePhaseTab && !resultTabActive ? groupsByPhase[activePhaseTab] ?? [] : []),
-    [activePhaseTab, resultTabActive, groupsByPhase]
-  );
-
-  // 탭 전환 시 해당 phase의 첫 번째 그룹 자동 선택
-  const handlePhaseTabChange = useCallback((phase: string) => {
-    setActivePhaseTab(phase);
-    setResultTabActive(false);
-    const phaseGrps = groupsByPhase[phase];
-    if (phaseGrps && phaseGrps.length > 0) {
-      setSelectedGroupId(phaseGrps[0].itemId);
-    }
-    contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
-  }, [groupsByPhase]);
-
-  const handleResultTabClick = useCallback(() => {
-    setResultTabActive(true);
-    setActivePhaseTab(null);
-    setSelectedGroupId(null);
-    contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
-  }, []);
-
   // ========================================
-  // 렌더링
+  // 렌더링 (combined-final 레이아웃)
   // ========================================
 
+  const woNo = parentRow?.wo_no ? String(parentRow.wo_no) : "";
+
   return (
-    <div className="flex h-full flex-col" style={{ backgroundColor: DESIGN.bg.page }}>
-      {/* ── 고정 헤더: 작업 정보 ── */}
+    <div className="flex h-full flex-col rounded-2xl overflow-hidden" style={{ backgroundColor: DESIGN.bg.card }}>
+      {/* ── 모달 헤더: 미니멀 ── */}
+      <div
+        className="flex shrink-0 items-center justify-between border-b border-gray-100 px-6"
+        style={{ height: `${DESIGN.header.height}px` }}
+      >
+        <div className="flex items-center gap-4">
+          <h2 className="text-lg font-bold tracking-tight text-gray-900">작업 상세</h2>
+          {woNo && <span className="font-mono text-xs text-gray-400">{woNo}</span>}
+        </div>
+        <button
+          className="flex h-9 w-9 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+          onClick={() => publish("close_modal", {})}
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* ── 정보바: 미니멀 다크 (고정) ── */}
       {cfg.infoBar.enabled && (
         <InfoBar
           fields={cfg.infoBar.fields.length > 0 ? cfg.infoBar.fields : DEFAULT_INFO_FIELDS}
@@ -788,299 +808,360 @@ export function PopWorkDetailComponent({
         />
       )}
 
-      {/* ── KPI 카드 (항상 표시) ── */}
-      <KpiCards
-        inputQty={parseInt(processData?.input_qty ?? "0", 10) || 0}
-        completedQty={parseInt(processData?.total_production_qty ?? "0", 10) || 0}
-        defectQty={parseInt(processData?.defect_qty ?? "0", 10) || 0}
-      />
+      {/* ── 본문: 사이드바 + 콘텐츠 ── */}
+      <div className="flex flex-1 overflow-hidden">
 
-      {/* ── 탭 바 ── */}
-      <div
-        className="flex shrink-0 border-b"
-        style={{ height: `${DESIGN.tab.height}px`, backgroundColor: DESIGN.bg.card }}
-      >
-        {availablePhases.map((phase) => {
-          const progress = phaseProgress[phase];
-          const isActive = !resultTabActive && activePhaseTab === phase;
-          return (
-            <button
-              key={phase}
-              className={cn(
-                "flex flex-1 items-center justify-center gap-1.5 text-sm font-medium transition-colors",
-                isActive
-                  ? "border-b-2 border-primary text-primary"
-                  : "text-muted-foreground hover:text-foreground"
-              )}
-              onClick={() => handlePhaseTabChange(phase)}
-            >
-              {cfg.phaseLabels[phase] ?? phase}
-              {progress && (
-                <span className={cn("text-xs", isActive ? "text-primary" : "text-muted-foreground")}>
-                  {progress.done}/{progress.total}
-                </span>
-              )}
-            </button>
-          );
-        })}
-        {hasResultSections && (
-          <button
-            className={cn(
-              "flex flex-1 items-center justify-center gap-1.5 text-sm font-medium transition-colors",
-              resultTabActive
-                ? "border-b-2 border-primary text-primary"
-                : "text-muted-foreground hover:text-foreground"
-            )}
-            onClick={handleResultTabClick}
-          >
-            실적
-          </button>
-        )}
-      </div>
+        {/* ===== 사이드바 ===== */}
+        <div
+          className="flex shrink-0 flex-col overflow-y-auto border-r border-gray-100"
+          style={{
+            width: `${DESIGN.sidebar.width}px`,
+            backgroundColor: 'rgba(249,250,251,0.5)',
+            scrollbarWidth: 'thin',
+          }}
+        >
+          <div className="py-4">
+            {/* 페이즈별 그룹 */}
+            {availablePhases.map((phase) => {
+              const phaseGrps = groupsByPhase[phase] || [];
+              const progress = phaseProgress[phase];
+              const allDone = progress && progress.done >= progress.total && progress.total > 0;
+              const anyActive = phaseGrps.some((g) => g.stepStatus === "active");
 
-      {/* ── 콘텐츠 영역 (스크롤) ── */}
-      <div className="flex flex-1 flex-col overflow-hidden">
-        {/* 실적 입력 패널 (hidden으로 상태 유지, unmount 방지) */}
-        {hasResultSections && (
-          <div className={cn("flex flex-1 flex-col overflow-hidden", !resultTabActive && "hidden")}>
-            <ResultPanel
-              workOrderProcessId={workOrderProcessId!}
-              processData={processData}
-              sections={cfg.resultSections ?? []}
-              isProcessCompleted={isProcessCompleted}
-              defectTypes={cachedDefectTypes}
-              onSaved={(updated) => {
-                setProcessData((prev) => prev ? { ...prev, ...updated } : prev);
-                publish("process_completed", { workOrderProcessId, status: updated?.status });
-              }}
-            />
-          </div>
-        )}
-
-        {/* 체크리스트 영역 */}
-        <div className={cn("flex flex-1 flex-col overflow-hidden", resultTabActive && "hidden")}>
-          {cfg.displayMode === "step" ? (
-            /* ======== 스텝 모드 ======== */
-            <>
-              {showQuantityPanel || allItemsCompleted ? (
-                /* 수량 등록 + 공정 완료 화면 */
-                <div ref={contentRef} className="flex flex-1 flex-col items-center justify-center gap-5 overflow-y-auto p-6">
-                  <CheckCircle2 className="h-12 w-12 text-green-600" />
-                  <p className="text-base font-medium">모든 작업 항목이 완료되었습니다</p>
-
-                  {cfg.showQuantityInput && !isProcessCompleted && !hasResultSections && (
-                    <div className="w-full max-w-sm space-y-4 rounded-lg border p-5" style={{ backgroundColor: DESIGN.bg.card }}>
-                      <p className="font-semibold" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>실적 수량 등록</p>
-                      <div className="space-y-3">
-                        <div className="flex items-center gap-3">
-                          <span className="w-12 text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>양품</span>
-                          <Input type="number" className="text-base" style={{ height: `${DESIGN.input.height}px` }} value={goodQty} onChange={(e) => setGoodQty(e.target.value)} placeholder="0" />
-                        </div>
-                        <div className="flex items-center gap-3">
-                          <span className="w-12 text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>불량</span>
-                          <Input type="number" className="text-base" style={{ height: `${DESIGN.input.height}px` }} value={defectQty} onChange={(e) => setDefectQty(e.target.value)} placeholder="0" />
-                        </div>
-                        {(parseInt(goodQty, 10) || 0) + (parseInt(defectQty, 10) || 0) > 0 && (
-                          <p className="text-right text-sm text-muted-foreground">
-                            합계: {(parseInt(goodQty, 10) || 0) + (parseInt(defectQty, 10) || 0)}
-                          </p>
-                        )}
-                      </div>
+              return (
+                <div key={phase} className="mb-5">
+                  {/* 페이즈 헤더 */}
+                  <div className="mb-2 flex items-center gap-2 px-4">
+                    <div
+                      className={cn(
+                        "flex h-5 w-5 items-center justify-center rounded-full",
+                        allDone ? "bg-green-500" : anyActive ? "bg-blue-500" : "bg-gray-300"
+                      )}
+                    >
+                      {allDone ? (
+                        <Check className="h-3 w-3 text-white" strokeWidth={3} />
+                      ) : anyActive ? (
+                        <svg className="h-3 w-3 text-white" fill="none" stroke="currentColor" strokeWidth={3} viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+                      ) : (
+                        <Check className="h-3 w-3 text-white" strokeWidth={3} />
+                      )}
                     </div>
-                  )}
+                    <span
+                      className={cn(
+                        "text-xs font-semibold uppercase tracking-wider",
+                        allDone || anyActive ? "text-gray-900" : "text-gray-400"
+                      )}
+                    >
+                      {cfg.phaseLabels[phase] ?? phase}
+                    </span>
+                    <span
+                      className={cn(
+                        "ml-auto text-xs font-medium",
+                        allDone ? "text-green-600" : anyActive ? "text-blue-600" : "text-gray-400"
+                      )}
+                    >
+                      {progress?.done ?? 0}/{progress?.total ?? 0}
+                    </span>
+                  </div>
 
-                  {isProcessCompleted && (
-                    <Badge variant="outline" className="text-base text-green-600 px-3 py-1">
-                      공정이 완료되었습니다
-                    </Badge>
-                  )}
+                  {/* 그룹 항목 */}
+                  <div className="space-y-0.5">
+                    {phaseGrps.map((g) => {
+                      const isSelected = selectedGroupId === g.itemId && !resultTabActive;
+                      return (
+                        <button
+                          key={g.itemId}
+                          className={cn(
+                            "flex w-full items-center gap-2.5 rounded-r-lg py-2 pl-4 pr-2 text-left transition-all duration-150 hover:bg-black/[0.04]",
+                            isSelected && "border-l-[3px] border-l-blue-500 bg-blue-500/[0.06]",
+                            !isSelected && "border-l-[3px] border-l-transparent"
+                          )}
+                          style={isSelected ? { paddingLeft: 13 } : undefined}
+                          onClick={() => {
+                            setSelectedGroupId(g.itemId);
+                            setActivePhaseTab(g.phase);
+                            setResultTabActive(false);
+                            contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+                          }}
+                        >
+                          <SidebarStepIcon status={g.stepStatus} isSelected={isSelected} />
+                          <span
+                            className={cn(
+                              "truncate text-sm",
+                              g.stepStatus === "completed" ? "text-gray-500" :
+                              isSelected ? "font-medium text-blue-700" :
+                              g.stepStatus === "active" ? "text-gray-700" : "text-gray-400"
+                            )}
+                          >
+                            {g.title}
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
                 </div>
-              ) : (
-                /* 단계별 항목 표시 */
-                <>
-                  {/* 그룹 헤더 + 타이머 + 진행률 */}
-                  {selectedGroup && (
-                    <>
-                      <GroupTimerHeader
-                        group={selectedGroup}
-                        cfg={cfg}
-                        isProcessCompleted={isProcessCompleted}
-                        isGroupStarted={isGroupStarted}
-                        isGroupPaused={isGroupPaused}
-                        isGroupCompleted={isGroupCompleted}
-                        groupTimerFormatted={groupTimerFormatted}
-                        groupElapsedFormatted={groupElapsedFormatted}
-                        onTimerAction={handleGroupTimerAction}
-                      />
-                      <div className="px-4 pb-2" style={{ backgroundColor: DESIGN.bg.card }}>
-                        <div className="flex items-center justify-between text-xs text-muted-foreground">
-                          <span>{currentItemIdx + 1} / {currentItems.length}</span>
+              );
+            })}
+
+            {/* 실적 그룹 */}
+            {hasResultSections && (
+              <div>
+                <div className="mb-2 flex items-center gap-2 px-4">
+                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-amber-500">
+                    <ClipboardList className="h-3 w-3 text-white" strokeWidth={2.5} />
+                  </div>
+                  <span className="text-xs font-semibold uppercase tracking-wider text-gray-900">실적</span>
+                  <span className="ml-auto text-xs font-medium text-amber-600">
+                    {isProcessCompleted ? "확정" : "미확정"}
+                  </span>
+                </div>
+                <div className="space-y-0.5">
+                  <button
+                    className={cn(
+                      "flex w-full items-center gap-2.5 rounded-r-lg py-2 pl-4 pr-2 text-left transition-all duration-150 hover:bg-black/[0.04]",
+                      resultTabActive && "border-l-[3px] border-l-blue-500 bg-blue-500/[0.06]",
+                      !resultTabActive && "border-l-[3px] border-l-transparent"
+                    )}
+                    style={resultTabActive ? { paddingLeft: 13 } : undefined}
+                    onClick={handleResultTabClick}
+                  >
+                    <AlertCircle className={cn("h-4 w-4 shrink-0", resultTabActive ? "text-blue-500" : "text-amber-500")} />
+                    <span className={cn("text-sm", resultTabActive ? "font-medium text-blue-700" : "font-medium text-amber-700")}>실적 입력</span>
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* ===== 메인 콘텐츠 ===== */}
+        <div className="flex flex-1 flex-col overflow-hidden" style={{ backgroundColor: DESIGN.bg.page }}>
+          {/* 실적 입력 패널 (hidden으로 상태 유지) */}
+          {hasResultSections && (
+            <div className={cn("flex flex-1 flex-col overflow-hidden", !resultTabActive && "hidden")}>
+              <ResultPanel
+                workOrderProcessId={workOrderProcessId!}
+                processData={processData}
+                sections={cfg.resultSections ?? []}
+                isProcessCompleted={isProcessCompleted}
+                defectTypes={cachedDefectTypes}
+                onSaved={(updated) => {
+                  setProcessData((prev) => prev ? { ...prev, ...updated } : prev);
+                  publish("process_completed", { workOrderProcessId, status: updated?.status });
+                }}
+              />
+            </div>
+          )}
+
+          {/* 체크리스트 영역 */}
+          <div className={cn("flex flex-1 flex-col overflow-hidden", resultTabActive && "hidden")}>
+            {cfg.displayMode === "step" ? (
+              /* ======== 스텝 모드 ======== */
+              <>
+                {showQuantityPanel || allItemsCompleted ? (
+                  <div ref={contentRef} className="flex flex-1 flex-col items-center justify-center gap-5 overflow-y-auto p-6">
+                    <CheckCircle2 className="h-12 w-12 text-green-600" />
+                    <p className="text-base font-medium">모든 작업 항목이 완료되었습니다</p>
+                    {cfg.showQuantityInput && !isProcessCompleted && !hasResultSections && (
+                      <div className="w-full max-w-sm space-y-4 rounded-lg border p-5" style={{ backgroundColor: DESIGN.bg.card }}>
+                        <p className="text-sm font-semibold uppercase tracking-wide text-gray-500">실적 수량 등록</p>
+                        <div className="space-y-3">
+                          <div className="flex items-center gap-3">
+                            <span className="w-12 text-sm text-gray-500">양품</span>
+                            <Input type="number" className="text-base" style={{ height: `${DESIGN.input.height}px` }} value={goodQty} onChange={(e) => setGoodQty(e.target.value)} placeholder="0" />
+                          </div>
+                          <div className="flex items-center gap-3">
+                            <span className="w-12 text-sm text-gray-500">불량</span>
+                            <Input type="number" className="text-base" style={{ height: `${DESIGN.input.height}px` }} value={defectQty} onChange={(e) => setDefectQty(e.target.value)} placeholder="0" />
+                          </div>
+                          {(parseInt(goodQty, 10) || 0) + (parseInt(defectQty, 10) || 0) > 0 && (
+                            <p className="text-right text-sm text-gray-500">
+                              합계: {(parseInt(goodQty, 10) || 0) + (parseInt(defectQty, 10) || 0)}
+                            </p>
+                          )}
                         </div>
-                        <div className="mt-1 h-2 w-full overflow-hidden rounded-full bg-muted">
-                          <div
-                            className="h-full bg-primary transition-all duration-300"
-                            style={{
-                              width: `${currentItems.length > 0 && selectedGroup.total > 0 ? ((selectedGroup.completed / selectedGroup.total) * 100) : 0}%`,
-                            }}
+                      </div>
+                    )}
+                    {isProcessCompleted && (
+                      <Badge variant="outline" className="px-3 py-1 text-base text-green-600">
+                        공정이 완료되었습니다
+                      </Badge>
+                    )}
+                  </div>
+                ) : (
+                  <>
+                    {/* 그룹 헤더 + 타이머 + 진행률 */}
+                    {selectedGroup && (
+                      <>
+                        <GroupTimerHeader
+                          group={selectedGroup}
+                          cfg={cfg}
+                          isProcessCompleted={isProcessCompleted}
+                          isGroupStarted={isGroupStarted}
+                          isGroupPaused={isGroupPaused}
+                          isGroupCompleted={isGroupCompleted}
+                          groupTimerFormatted={groupTimerFormatted}
+                          groupElapsedFormatted={groupElapsedFormatted}
+                          onTimerAction={handleGroupTimerAction}
+                        />
+                        <div className="px-4 pb-2" style={{ backgroundColor: DESIGN.bg.card }}>
+                          <div className="flex items-center justify-between text-xs text-gray-500">
+                            <span>{currentItemIdx + 1} / {currentItems.length}</span>
+                          </div>
+                          <div className="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+                            <div
+                              className="h-full bg-blue-500 transition-all duration-300"
+                              style={{
+                                width: `${currentItems.length > 0 && selectedGroup.total > 0 ? ((selectedGroup.completed / selectedGroup.total) * 100) : 0}%`,
+                              }}
+                            />
+                          </div>
+                        </div>
+                      </>
+                    )}
+
+                    {/* 현재 항목 1개 표시 */}
+                    <div ref={contentRef} className="flex flex-1 flex-col overflow-y-auto p-5">
+                      {currentItems[currentItemIdx] && (
+                        <div className="mx-auto w-full max-w-lg space-y-3">
+                          {currentItems[currentItemIdx].started_at && (
+                            <div className="flex items-center justify-end gap-1.5 text-xs text-gray-500">
+                              <Timer className="h-3.5 w-3.5" />
+                              {currentItems[currentItemIdx].recorded_at
+                                ? formatDuration(currentItems[currentItemIdx].started_at!, currentItems[currentItemIdx].recorded_at!)
+                                : "진행 중..."}
+                            </div>
+                          )}
+                          <ChecklistItem
+                            item={currentItems[currentItemIdx]}
+                            saving={savingIds.has(currentItems[currentItemIdx].id)}
+                            disabled={isProcessCompleted || isStepLocked}
+                            onSave={saveResultValue}
                           />
                         </div>
-                      </div>
-                    </>
-                  )}
+                      )}
+                    </div>
 
-                  {/* 현재 항목 1개 표시 */}
-                  <div ref={contentRef} className="flex flex-1 flex-col overflow-y-auto p-5">
-                    {currentItems[currentItemIdx] && (
-                      <div className="mx-auto w-full max-w-lg space-y-3">
-                        {currentItems[currentItemIdx].started_at && (
-                          <div className="flex items-center justify-end gap-1.5 text-xs text-muted-foreground">
-                            <Timer className="h-3.5 w-3.5" />
-                            {currentItems[currentItemIdx].recorded_at
-                              ? formatDuration(currentItems[currentItemIdx].started_at!, currentItems[currentItemIdx].recorded_at!)
-                              : "진행 중..."}
-                          </div>
+                    {/* 스텝 네비게이션 */}
+                    <div className="flex items-center justify-between border-t border-gray-100 bg-white px-4 py-3">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="gap-1.5 px-5"
+                        style={{ height: `${DESIGN.nav.height}px` }}
+                        disabled={currentItemIdx <= 0 && selectedIndex <= 0}
+                        onClick={() => {
+                          if (currentItemIdx > 0) {
+                            setCurrentItemIdx(currentItemIdx - 1);
+                          } else if (selectedIndex > 0) {
+                            const prevGroup = groups[selectedIndex - 1];
+                            setSelectedGroupId(prevGroup.itemId);
+                            setActivePhaseTab(prevGroup.phase);
+                            const prevItems = allResults.filter(
+                              (r) => r.source_work_item_id === prevGroup.itemId
+                            );
+                            setCurrentItemIdx(Math.max(0, prevItems.length - 1));
+                          }
+                        }}
+                      >
+                        <ChevronLeft className="h-4 w-4" />이전
+                      </Button>
+
+                      <span className="text-xs text-gray-500">
+                        {selectedGroup?.title} ({currentItemIdx + 1}/{currentItems.length})
+                      </span>
+
+                      <Button
+                        size="sm"
+                        variant={currentItemIdx >= currentItems.length - 1 && selectedIndex >= groups.length - 1 ? "default" : "outline"}
+                        className="gap-1.5 px-5"
+                        style={{ height: `${DESIGN.nav.height}px` }}
+                        onClick={() => {
+                          if (currentItemIdx < currentItems.length - 1) {
+                            setCurrentItemIdx(currentItemIdx + 1);
+                          } else if (selectedIndex < groups.length - 1) {
+                            const nextGroup = groups[selectedIndex + 1];
+                            setActivePhaseTab(nextGroup.phase);
+                            navigateStep(1);
+                          } else {
+                            setShowQuantityPanel(true);
+                          }
+                        }}
+                      >
+                        {currentItemIdx >= currentItems.length - 1 && selectedIndex >= groups.length - 1 ? (
+                          <>수량 등록<ChevronRight className="h-4 w-4" /></>
+                        ) : (
+                          <>다음<ChevronRight className="h-4 w-4" /></>
                         )}
-                        <ChecklistItem
-                          item={currentItems[currentItemIdx]}
-                          saving={savingIds.has(currentItems[currentItemIdx].id)}
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </>
+            ) : (
+              /* ======== 리스트 모드 ======== */
+              <div ref={contentRef} className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin' }}>
+                {/* KPI 카드 (콘텐츠와 함께 스크롤) */}
+                <KpiCards
+                  inputQty={parseInt(processData?.input_qty ?? "0", 10) || 0}
+                  completedQty={parseInt(processData?.total_production_qty ?? "0", 10) || 0}
+                  defectQty={parseInt(processData?.defect_qty ?? "0", 10) || 0}
+                />
+
+                {/* 그룹 헤더 + 타이머 */}
+                {selectedGroup && (
+                  <GroupTimerHeader
+                    group={selectedGroup}
+                    cfg={cfg}
+                    isProcessCompleted={isProcessCompleted}
+                    isGroupStarted={isGroupStarted}
+                    isGroupPaused={isGroupPaused}
+                    isGroupCompleted={isGroupCompleted}
+                    groupTimerFormatted={groupTimerFormatted}
+                    groupElapsedFormatted={groupElapsedFormatted}
+                    onTimerAction={handleGroupTimerAction}
+                  />
+                )}
+
+                {/* 체크리스트 콘텐츠 */}
+                <div className="space-y-8 px-8 py-6">
+                  {selectedGroupId && (
+                    <div className="space-y-2.5">
+                      {currentItems.map((item) => (
+                        <ChecklistRowItem
+                          key={item.id}
+                          item={item}
+                          saving={savingIds.has(item.id)}
                           disabled={isProcessCompleted || isStepLocked}
                           onSave={saveResultValue}
                         />
-                      </div>
-                    )}
-                  </div>
-
-                  {/* 스텝 네비게이션 */}
-                  <div className="flex items-center justify-between border-t px-4 py-3" style={{ backgroundColor: DESIGN.bg.card }}>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="gap-1.5 px-5"
-                      style={{ height: `${DESIGN.nav.height}px`, fontSize: `${DESIGN.section.titleSize}px` }}
-                      disabled={currentItemIdx <= 0 && selectedIndex <= 0}
-                      onClick={() => {
-                        if (currentItemIdx > 0) {
-                          setCurrentItemIdx(currentItemIdx - 1);
-                        } else if (selectedIndex > 0) {
-                          const prevGroup = groups[selectedIndex - 1];
-                          setSelectedGroupId(prevGroup.itemId);
-                          setActivePhaseTab(prevGroup.phase);
-                          const prevItems = allResults.filter(
-                            (r) => r.source_work_item_id === prevGroup.itemId
-                          );
-                          setCurrentItemIdx(Math.max(0, prevItems.length - 1));
-                        }
-                      }}
-                    >
-                      <ChevronLeft className="h-4 w-4" />이전
-                    </Button>
-
-                    <span className="text-xs text-muted-foreground">
-                      {selectedGroup?.title} ({currentItemIdx + 1}/{currentItems.length})
-                    </span>
-
-                    <Button
-                      size="sm"
-                      variant={currentItemIdx >= currentItems.length - 1 && selectedIndex >= groups.length - 1 ? "default" : "outline"}
-                      className="gap-1.5 px-5"
-                      style={{ height: `${DESIGN.nav.height}px`, fontSize: `${DESIGN.section.titleSize}px` }}
-                      onClick={() => {
-                        if (currentItemIdx < currentItems.length - 1) {
-                          setCurrentItemIdx(currentItemIdx + 1);
-                        } else if (selectedIndex < groups.length - 1) {
-                          const nextGroup = groups[selectedIndex + 1];
-                          setActivePhaseTab(nextGroup.phase);
-                          navigateStep(1);
-                        } else {
-                          setShowQuantityPanel(true);
-                        }
-                      }}
-                    >
-                      {currentItemIdx >= currentItems.length - 1 && selectedIndex >= groups.length - 1 ? (
-                        <>수량 등록<ChevronRight className="h-4 w-4" /></>
-                      ) : (
-                        <>다음<ChevronRight className="h-4 w-4" /></>
-                      )}
-                    </Button>
-                  </div>
-                </>
-              )}
-            </>
-          ) : (
-            /* ======== 리스트 모드 ======== */
-            <>
-              {/* 탭 내 그룹 목록 표시 (그룹이 여러 개인 경우) */}
-              {currentTabGroups.length > 1 && (
-                <div className="flex gap-2 overflow-x-auto border-b px-4 py-2" style={{ backgroundColor: DESIGN.bg.card }}>
-                  {currentTabGroups.map((g) => (
-                    <button
-                      key={g.itemId}
-                      className={cn(
-                        "flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-colors",
-                        selectedGroupId === g.itemId
-                          ? "bg-primary text-primary-foreground"
-                          : "bg-muted hover:bg-muted/80 text-muted-foreground"
-                      )}
-                      onClick={() => {
-                        setSelectedGroupId(g.itemId);
-                        contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
-                      }}
-                    >
-                      <StepStatusIcon status={g.stepStatus} />
-                      <span className="truncate max-w-[120px]">{g.title}</span>
-                      <span className="text-xs opacity-70">{g.completed}/{g.total}</span>
-                    </button>
-                  ))}
+                      ))}
+                    </div>
+                  )}
                 </div>
-              )}
-
-              {/* 그룹 헤더 + 타이머 */}
-              {selectedGroup && (
-                <GroupTimerHeader
-                  group={selectedGroup}
-                  cfg={cfg}
-                  isProcessCompleted={isProcessCompleted}
-                  isGroupStarted={isGroupStarted}
-                  isGroupPaused={isGroupPaused}
-                  isGroupCompleted={isGroupCompleted}
-                  groupTimerFormatted={groupTimerFormatted}
-                  groupElapsedFormatted={groupElapsedFormatted}
-                  onTimerAction={handleGroupTimerAction}
-                />
-              )}
-
-              {/* 체크리스트 콘텐츠 */}
-              <div ref={contentRef} className="flex-1 overflow-y-auto p-4">
-                {selectedGroupId && (
-                  <div className="space-y-2.5">
-                    {currentItems.map((item) => (
-                      <ChecklistRowItem
-                        key={item.id}
-                        item={item}
-                        saving={savingIds.has(item.id)}
-                        disabled={isProcessCompleted || isStepLocked}
-                        onSave={saveResultValue}
-                      />
-                    ))}
-                  </div>
-                )}
               </div>
-            </>
-          )}
+            )}
+          </div>
         </div>
       </div>
 
       {/* ── 고정 풋터 액션바 ── */}
       {!isProcessCompleted && (
         <div
-          className="flex shrink-0 items-center gap-3 border-t px-4"
-          style={{ height: `${DESIGN.footer.height}px`, backgroundColor: DESIGN.bg.card }}
+          className="flex shrink-0 items-center gap-3 border-t border-gray-100 bg-white px-6"
+          style={{ height: `${DESIGN.footer.height}px` }}
         >
           {/* 일시정지 */}
-          <Button
-            variant="outline"
-            className="flex-1 gap-2 border-amber-400 text-amber-700 hover:bg-amber-50 font-medium"
-            style={{ height: `${DESIGN.footer.height - 16}px`, fontSize: `${DESIGN.section.titleSize}px` }}
+          <button
+            className={cn(
+              "flex flex-1 items-center justify-center gap-2 rounded-xl border-2 text-sm font-semibold transition-colors",
+              isGroupPaused
+                ? "border-blue-400 text-blue-700 hover:bg-blue-50"
+                : "border-amber-400 text-amber-700 hover:bg-amber-50",
+              !isGroupStarted && "opacity-50 cursor-not-allowed"
+            )}
+            style={{ height: 48 }}
+            disabled={!isGroupStarted}
             onClick={() => {
               if (isGroupPaused) {
                 handleGroupTimerAction("resume");
@@ -1088,17 +1169,15 @@ export function PopWorkDetailComponent({
                 handleGroupTimerAction("pause");
               }
             }}
-            disabled={!isGroupStarted}
           >
-            <Pause className="h-5 w-5" />
+            <Pause className="h-5 w-5" fill="currentColor" />
             {isGroupPaused ? "재개" : "일시정지"}
-          </Button>
+          </button>
 
           {/* 불량등록 */}
-          <Button
-            variant="outline"
-            className="flex-1 gap-2 border-red-400 text-red-700 hover:bg-red-50 font-medium"
-            style={{ height: `${DESIGN.footer.height - 16}px`, fontSize: `${DESIGN.section.titleSize}px` }}
+          <button
+            className="flex flex-1 items-center justify-center gap-2 rounded-xl border-2 border-red-300 text-sm font-semibold text-red-600 transition-colors hover:bg-red-50"
+            style={{ height: 48 }}
             onClick={() => {
               if (hasResultSections) {
                 handleResultTabClick();
@@ -1109,41 +1188,38 @@ export function PopWorkDetailComponent({
           >
             <AlertTriangle className="h-5 w-5" />
             불량등록
-          </Button>
+          </button>
 
           {/* 작업완료 (2단계 확인) */}
           {!confirmCompleteOpen ? (
-            <Button
-              variant="default"
-              className="flex-1 gap-2 bg-green-600 hover:bg-green-700 font-medium"
-              style={{ height: `${DESIGN.footer.height - 16}px`, fontSize: `${DESIGN.section.titleSize}px` }}
+            <button
+              className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-green-600 text-sm font-semibold text-white transition-colors hover:bg-green-700"
+              style={{ height: 48 }}
               onClick={() => setConfirmCompleteOpen(true)}
             >
-              <CheckCircle2 className="h-5 w-5" />
+              <Check className="h-5 w-5" />
               작업완료
-            </Button>
+            </button>
           ) : (
             <div className="flex flex-1 gap-2">
-              <Button
-                variant="outline"
-                className="flex-1 font-medium"
-                style={{ height: `${DESIGN.footer.height - 16}px`, fontSize: `${DESIGN.section.titleSize}px` }}
+              <button
+                className="flex flex-1 items-center justify-center rounded-xl border-2 border-gray-300 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50"
+                style={{ height: 48 }}
                 onClick={() => setConfirmCompleteOpen(false)}
               >
                 취소
-              </Button>
-              <Button
-                variant="default"
-                className="flex-1 gap-2 bg-green-600 hover:bg-green-700 font-medium"
-                style={{ height: `${DESIGN.footer.height - 16}px`, fontSize: `${DESIGN.section.titleSize}px` }}
+              </button>
+              <button
+                className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-green-600 text-sm font-semibold text-white transition-colors hover:bg-green-700"
+                style={{ height: 48 }}
                 onClick={() => {
                   setConfirmCompleteOpen(false);
                   handleProcessComplete();
                 }}
               >
-                <CheckCircle2 className="h-5 w-5" />
+                <Check className="h-5 w-5" />
                 정말 완료
-              </Button>
+              </button>
             </div>
           )}
         </div>
@@ -1151,10 +1227,10 @@ export function PopWorkDetailComponent({
 
       {isProcessCompleted && (
         <div
-          className="flex shrink-0 items-center justify-center border-t"
-          style={{ height: `${DESIGN.footer.height}px`, backgroundColor: DESIGN.bg.card }}
+          className="flex shrink-0 items-center justify-center border-t border-gray-100 bg-white"
+          style={{ height: `${DESIGN.footer.height}px` }}
         >
-          <Badge variant="outline" className="text-base text-green-600 px-4 py-1.5">
+          <Badge variant="outline" className="px-4 py-1.5 text-base text-green-600">
             <CheckCircle2 className="mr-2 h-5 w-5" />
             공정이 완료되었습니다
           </Badge>
@@ -1390,274 +1466,277 @@ function ResultPanel({
   };
 
   return (
-    <div className="flex flex-1 flex-col overflow-y-auto">
-      <div className="space-y-5 p-4">
+    <div className="flex flex-1 flex-col overflow-y-auto" style={{ scrollbarWidth: 'thin', backgroundColor: DESIGN.bg.page }}>
+      {/* KPI 카드 (실적 탭에서도 표시) */}
+      <KpiCards
+        inputQty={inputQty}
+        completedQty={accumulatedTotal}
+        defectQty={accumulatedDefect}
+      />
+
+      <div className="space-y-8 px-8 py-6">
         {/* 확정 상태 배너 */}
         {isConfirmed && (
-          <div className="flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-2.5">
-            <FileCheck className={cn("h-4 w-4", COLORS.good)} />
-            <span className="font-medium text-green-700" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>실적이 확정되었습니다</span>
+          <div className="flex items-center gap-2 rounded-xl border border-green-200 bg-green-50 px-4 py-2.5">
+            <FileCheck className="h-4 w-4 text-green-600" />
+            <span className="text-sm font-medium text-green-700">실적이 확정되었습니다</span>
           </div>
         )}
 
-        {/* 공정 현황: 접수량 / 작업완료 / 잔여 + 앞공정 완료량 */}
-        <div className="rounded-lg border bg-muted/20 px-4 py-3">
-          <div className="mb-2 font-semibold uppercase text-muted-foreground" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>공정 현황</div>
-          <div className="flex items-center gap-5">
-            <div className="text-center">
-              <div className="font-bold" style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>{inputQty}</div>
-              <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>접수량</div>
-            </div>
-            <div className="text-center">
-              <div className={COLORS.complete} style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>{accumulatedTotal}</div>
-              <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>작업완료</div>
-            </div>
-            <div className="text-center">
-              <div className={remainingQty > 0 ? COLORS.warning : COLORS.good} style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>
-                {remainingQty}
-              </div>
-              <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>잔여</div>
-            </div>
-            {availableInfo && availableInfo.availableQty > 0 && (
-              <div className="text-center">
-                <div className={COLORS.info} style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>{availableInfo.availableQty}</div>
-                <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>추가접수가능</div>
-              </div>
-            )}
-          </div>
-          {inputQty > 0 && (
-            <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
-              <div
-                className="h-full bg-blue-500 transition-all duration-300"
-                style={{ width: `${Math.min(100, (accumulatedTotal / inputQty) * 100)}%` }}
-              />
-            </div>
-          )}
-          {availableInfo && (
-            <div className="mt-2 flex gap-3 text-xs text-muted-foreground">
-              <span>앞공정 완료: {availableInfo.prevGoodQty}</span>
-              <span>지시수량: {availableInfo.instructionQty}</span>
-            </div>
-          )}
-        </div>
-
-        {/* 누적 실적 현황 */}
-        <div className="rounded-lg border bg-muted/20 px-4 py-3">
-          <div className="mb-2 font-semibold uppercase text-muted-foreground" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>누적 실적</div>
-          <div className="flex items-center gap-5">
-            <div className="text-center">
-              <div className="font-bold" style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>{accumulatedTotal}</div>
-              <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>총생산</div>
-            </div>
-            <div className="text-center">
-              <div className={COLORS.good} style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>{accumulatedGood}</div>
-              <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>양품</div>
-            </div>
-            <div className="text-center">
-              <div className={COLORS.defect} style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>{accumulatedDefect}</div>
-              <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>불량</div>
-            </div>
-            <div className="text-center">
-              <div className="font-bold" style={{ fontSize: `${DESIGN.stat.valueSize}px`, fontWeight: DESIGN.stat.weight }}>{history.length}</div>
-              <div className="text-muted-foreground" style={{ fontSize: `${DESIGN.stat.labelSize}px` }}>차수</div>
-            </div>
-          </div>
-          {accumulatedTotal > 0 && (
-            <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
-              <div
-                className="h-full bg-green-500 transition-all duration-300"
-                style={{ width: `${accumulatedTotal > 0 ? (accumulatedGood / accumulatedTotal) * 100 : 0}%` }}
-              />
-            </div>
-          )}
-        </div>
-
         {/* 이번 차수 실적 입력 */}
         {!isConfirmed && (
-          <div className="space-y-4">
-            <div className="font-semibold" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>이번 차수 실적</div>
+          <div>
+            <div className="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400">이번 차수 실적 입력</div>
 
             {/* 생산수량 */}
             {enabledSections.some((s) => s.type === "total-qty") && (
-              <div className="space-y-2">
-                <label className="font-medium" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>생산수량</label>
-                <div className="flex items-center gap-3">
-                  <Input
-                    type="number"
-                    className="w-40 text-base"
-                    style={{ height: `${DESIGN.input.height}px` }}
-                    value={batchQty}
-                    onChange={(e) => setBatchQty(e.target.value)}
-                    placeholder="0"
-                  />
-                  <span className="text-muted-foreground" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>EA</span>
-                </div>
-              </div>
-            )}
-
-            {/* 양품/불량 */}
-            {enabledSections.some((s) => s.type === "good-defect") && (
-              <div className="space-y-2">
-                <label className="font-medium" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>양품 / 불량</label>
-                <div className="flex items-center gap-4">
+              <div className="mb-5 flex items-end gap-6">
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-gray-600">생산수량</label>
                   <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>양품</span>
-                    <Input
+                    <input
                       type="number"
-                      className="w-28 bg-muted/50 text-base"
-                      style={{ height: `${DESIGN.input.height}px` }}
-                      value={batchGood > 0 ? String(batchGood) : ""}
-                      readOnly
-                      placeholder="자동"
-                    />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>불량</span>
-                    <Input
-                      type="number"
-                      className="w-28 text-base"
-                      style={{ height: `${DESIGN.input.height}px` }}
-                      value={batchDefect}
-                      onChange={(e) => setBatchDefect(e.target.value)}
+                      className="h-14 w-36 rounded-xl border-2 border-gray-200 px-4 text-center text-2xl font-bold text-gray-900 transition-colors focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-100"
+                      value={batchQty}
+                      onChange={(e) => setBatchQty(e.target.value)}
                       placeholder="0"
                     />
+                    <span className="text-sm text-gray-400">EA</span>
                   </div>
                 </div>
-                {(parseInt(batchQty, 10) || 0) > 0 && (
-                  <p className="text-xs text-muted-foreground">
-                    양품 {batchGood} = 생산 {batchQty} - 불량 {batchDefect || 0}
-                  </p>
-                )}
-              </div>
-            )}
-
-            {/* 불량 유형 상세 */}
-            {enabledSections.some((s) => s.type === "defect-types") && (
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <label className="font-medium" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>불량 유형 상세</label>
-                  <Button size="sm" variant="outline" className="gap-1" style={{ height: `${DESIGN.button.height}px`, fontSize: `${DESIGN.stat.labelSize}px` }} onClick={addDefectEntry}>
-                    <Plus className="h-3.5 w-3.5" />추가
-                  </Button>
-                </div>
-                {defectEntries.length === 0 ? (
-                  <p className="text-muted-foreground" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>등록된 불량 유형이 없습니다.</p>
-                ) : (
-                  <div className="space-y-2">
-                    {defectEntries.map((entry, idx) => (
-                      <div key={idx} className="flex items-center gap-2 rounded-lg border p-2.5">
-                        <select
-                          className="rounded-md border px-2"
-                          style={{ height: `${DESIGN.defectRow.height}px`, fontSize: `${DESIGN.stat.labelSize}px` }}
-                          value={entry.defect_code}
-                          onChange={(e) => updateDefectEntry(idx, "defect_code", e.target.value)}
-                        >
-                          <option value="">불량유형 선택</option>
-                          {defectTypes.map((dt) => (
-                            <option key={dt.defect_code} value={dt.defect_code}>
-                              {dt.defect_name} ({dt.defect_code})
-                            </option>
-                          ))}
-                        </select>
-                        <Input
-                          type="number"
-                          className="w-20"
-                          style={{ height: `${DESIGN.defectRow.height}px`, fontSize: `${DESIGN.stat.labelSize}px` }}
-                          value={entry.qty}
-                          onChange={(e) => updateDefectEntry(idx, "qty", e.target.value)}
-                          placeholder="수량"
-                        />
-                        <select
-                          className="rounded-md border px-2"
-                          style={{ height: `${DESIGN.defectRow.height}px`, fontSize: `${DESIGN.stat.labelSize}px` }}
-                          value={entry.disposition}
-                          onChange={(e) => updateDefectEntry(idx, "disposition", e.target.value)}
-                        >
-                          {DISPOSITION_OPTIONS.map((opt) => (
-                            <option key={opt.value} value={opt.value}>{opt.label}</option>
-                          ))}
-                        </select>
-                        <Button size="icon" variant="ghost" className="shrink-0" style={{ height: `${DESIGN.defectRow.height}px`, width: `${DESIGN.defectRow.height}px` }} onClick={() => removeDefectEntry(idx)}>
-                          <Trash2 className="h-4 w-4 text-destructive" />
-                        </Button>
+                {enabledSections.some((s) => s.type === "good-defect") && (
+                  <>
+                    <div>
+                      <label className="mb-1.5 block text-sm font-medium text-gray-600">
+                        양품 <span className="ml-1 rounded bg-blue-50 px-1.5 py-0.5 text-xs text-blue-500">자동</span>
+                      </label>
+                      <input
+                        type="number"
+                        className="h-14 w-28 cursor-default rounded-xl border border-gray-200 bg-gray-50 px-3 text-center text-2xl font-bold text-green-600"
+                        value={batchGood > 0 ? String(batchGood) : ""}
+                        readOnly
+                      />
+                    </div>
+                    <div>
+                      <label className="mb-1.5 block text-sm font-medium text-gray-600">불량</label>
+                      <input
+                        type="number"
+                        className="h-14 w-28 rounded-xl border-2 border-red-200 px-3 text-center text-2xl font-bold text-red-600 transition-colors focus:border-red-400 focus:outline-none focus:ring-2 focus:ring-red-100"
+                        value={batchDefect}
+                        onChange={(e) => setBatchDefect(e.target.value)}
+                        placeholder="0"
+                      />
+                    </div>
+                    {(parseInt(batchQty, 10) || 0) > 0 && (
+                      <div className="pb-3">
+                        <p className="text-xs text-gray-400">양품 {batchGood} = 생산 {batchQty} - 불량 {batchDefect || 0}</p>
                       </div>
-                    ))}
-                  </div>
+                    )}
+                  </>
                 )}
               </div>
             )}
-
-            {/* 비고 */}
-            {enabledSections.some((s) => s.type === "note") && (
-              <div className="space-y-2">
-                <label className="font-medium" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>비고</label>
-                <Textarea
-                  className="min-h-[60px] text-sm"
-                  value={resultNote}
-                  onChange={(e) => setResultNote(e.target.value)}
-                  placeholder="작업 내용, 특이사항 등"
-                />
-              </div>
-            )}
-
-            {/* 미구현 섹션 플레이스홀더 (순서 보존) */}
-            {enabledSections
-              .filter((s) => !IMPLEMENTED_SECTIONS.has(s.type))
-              .map((s) => (
-                <div key={s.id} className="flex items-center gap-3 rounded-lg border border-dashed p-4">
-                  <Construction className="h-5 w-5 shrink-0 text-muted-foreground" />
-                  <div>
-                    <p className="text-sm font-medium">{SECTION_LABELS[s.type] ?? s.type}</p>
-                    <p className="text-xs text-muted-foreground">준비 중인 기능입니다</p>
-                  </div>
-                </div>
-              ))}
-
-            {/* 등록 버튼 */}
-            <div className="flex items-center gap-3">
-              <Button
-                className="gap-2 px-6"
-                style={{ height: `${DESIGN.button.height}px`, fontSize: `${DESIGN.section.titleSize}px` }}
-                onClick={handleSubmitBatch}
-                disabled={saving || !batchQty}
-              >
-                {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
-                실적 등록
-              </Button>
-            </div>
           </div>
         )}
 
-        {/* 이전 실적 이력 */}
-        <div className="space-y-2">
-          <div className="font-semibold" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>등록 이력</div>
+        {/* 불량 유형 상세 */}
+        {!isConfirmed && enabledSections.some((s) => s.type === "defect-types") && (
+          <div>
+            <div className="mb-4 flex items-center justify-between">
+              <div className="text-xs font-semibold uppercase tracking-widest text-gray-400">불량 유형 상세</div>
+              <div className="flex items-center gap-3">
+                {totalDefectFromEntries > 0 && (
+                  <span className="text-sm font-semibold text-red-500">합계: {totalDefectFromEntries}개</span>
+                )}
+                <button
+                  className="flex h-9 items-center gap-1.5 rounded-lg border-2 border-dashed border-gray-300 px-4 text-xs font-medium text-gray-500 transition-colors hover:border-blue-400 hover:text-blue-600"
+                  onClick={addDefectEntry}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                  유형 추가
+                </button>
+              </div>
+            </div>
+            {defectEntries.length === 0 ? (
+              <p className="text-sm text-gray-400">등록된 불량 유형이 없습니다.</p>
+            ) : (
+              <div className="space-y-3">
+                {defectEntries.map((entry, idx) => {
+                  const dt = defectTypes.find((d) => d.defect_code === entry.defect_code);
+                  return (
+                    <div key={idx} className="rounded-xl border border-gray-200 bg-white p-4">
+                      <div className="flex items-center gap-3">
+                        <div className="flex-1">
+                          <select
+                            className="h-11 w-full rounded-lg border border-gray-200 bg-white px-3 text-sm font-medium focus:border-blue-400 focus:outline-none"
+                            value={entry.defect_code}
+                            onChange={(e) => updateDefectEntry(idx, "defect_code", e.target.value)}
+                          >
+                            <option value="">불량유형 선택</option>
+                            {defectTypes.map((d) => (
+                              <option key={d.defect_code} value={d.defect_code}>
+                                {d.defect_name} ({d.defect_code})
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+                        <div className="w-24">
+                          <input
+                            type="number"
+                            className="h-11 w-full rounded-lg border-2 border-red-200 bg-white px-3 text-center text-lg font-bold text-red-600 focus:outline-none focus:ring-2 focus:ring-red-100"
+                            value={entry.qty}
+                            onChange={(e) => updateDefectEntry(idx, "qty", e.target.value)}
+                            placeholder="수량"
+                          />
+                        </div>
+                        <div className="w-28">
+                          <select
+                            className="h-11 w-full rounded-lg border border-gray-200 bg-white px-3 text-sm font-medium"
+                            value={entry.disposition}
+                            onChange={(e) => updateDefectEntry(idx, "disposition", e.target.value)}
+                          >
+                            {DISPOSITION_OPTIONS.map((opt) => (
+                              <option key={opt.value} value={opt.value}>{opt.label}</option>
+                            ))}
+                          </select>
+                        </div>
+                        <button
+                          className="flex h-11 w-11 items-center justify-center rounded-lg transition-colors hover:bg-red-50"
+                          onClick={() => removeDefectEntry(idx)}
+                        >
+                          <Trash2 className="h-4 w-4 text-gray-400 hover:text-red-500" />
+                        </button>
+                      </div>
+                      {dt && (
+                        <div className="mt-2 flex items-center gap-2 text-xs">
+                          <span className={cn(
+                            "rounded px-2 py-0.5 font-medium",
+                            dt.severity === "critical" || dt.severity === "심각" ? "bg-red-100 text-red-600" : "bg-amber-100 text-amber-600"
+                          )}>
+                            {dt.defect_type}
+                          </span>
+                          <span className="text-gray-400">심각도: {dt.severity}</span>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+
+                {/* 불량 합계 */}
+                {defectEntries.length > 0 && (
+                  <div className="flex items-center justify-between rounded-lg bg-gray-50 px-4 py-2.5">
+                    <span className="text-xs font-medium text-gray-500">불량 유형 합계</span>
+                    <div className="flex items-center gap-4 text-xs text-gray-500">
+                      {DISPOSITION_OPTIONS.map((opt) => {
+                        const cnt = defectEntries.reduce(
+                          (s, e) => s + (e.disposition === opt.value ? (parseInt(e.qty, 10) || 0) : 0), 0
+                        );
+                        return <span key={opt.value}>{opt.label}: {cnt}</span>;
+                      })}
+                      <span className="text-sm font-bold text-red-600">총 {totalDefectFromEntries}개</span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 비고 */}
+        {!isConfirmed && enabledSections.some((s) => s.type === "note") && (
+          <div>
+            <div className="mb-3 text-xs font-semibold uppercase tracking-widest text-gray-400">비고</div>
+            <textarea
+              className="h-16 w-full resize-none rounded-xl border border-gray-200 px-4 py-3 text-sm transition-colors focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-100"
+              value={resultNote}
+              onChange={(e) => setResultNote(e.target.value)}
+              placeholder="작업 내용, 특이사항 등"
+            />
+          </div>
+        )}
+
+        {/* 미구현 섹션 플레이스홀더 (순서 보존) */}
+        {!isConfirmed && enabledSections
+          .filter((s) => !IMPLEMENTED_SECTIONS.has(s.type))
+          .map((s) => (
+            <div key={s.id} className="flex items-center gap-3 rounded-xl border border-dashed border-gray-200 p-4">
+              <Construction className="h-5 w-5 shrink-0 text-gray-400" />
+              <div>
+                <p className="text-sm font-medium text-gray-700">{SECTION_LABELS[s.type] ?? s.type}</p>
+                <p className="text-xs text-gray-400">준비 중인 기능입니다</p>
+              </div>
+            </div>
+          ))}
+
+        {/* 등록 버튼 */}
+        {!isConfirmed && (
+          <div className="flex items-center gap-3">
+            <button
+              className={cn(
+                "flex h-12 items-center gap-2 rounded-xl bg-gray-900 px-8 text-sm font-semibold text-white transition-colors hover:bg-gray-800",
+                (saving || !batchQty) && "cursor-not-allowed opacity-50"
+              )}
+              onClick={handleSubmitBatch}
+              disabled={saving || !batchQty}
+            >
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
+              실적 등록 {batchQty ? `(${batchQty}개)` : ""}
+            </button>
+          </div>
+        )}
+
+        {/* 등록 이력 (테이블 형태 - combined-final) */}
+        <div>
+          <div className="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400">등록 이력</div>
           {historyLoading ? (
-            <div className="flex items-center gap-2 py-4 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2 py-4 text-sm text-gray-400">
               <Loader2 className="h-4 w-4 animate-spin" />불러오는 중...
             </div>
           ) : history.length === 0 ? (
-            <p className="py-4 text-sm text-muted-foreground">등록된 실적이 없습니다.</p>
+            <p className="py-4 text-sm text-gray-400">등록된 실적이 없습니다.</p>
           ) : (
-            <div className="space-y-1.5">
-              {[...history].reverse().map((h) => (
-                <div key={h.seq} className="flex items-center justify-between rounded-lg border px-3 py-2">
-                  <div className="flex items-center gap-3">
-                    <Badge variant="secondary" className="text-xs px-2">#{h.seq}</Badge>
-                    <span className="text-sm font-medium">+{h.batch_qty}</span>
-                    <span className={cn("text-xs", COLORS.good)}>양품 +{h.batch_good}</span>
-                    {h.batch_defect > 0 && (
-                      <span className={cn("text-xs", COLORS.defect)}>불량 +{h.batch_defect}</span>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                    <span>누적 {h.accumulated_total}</span>
-                    <span>{new Date(h.changed_at).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-xs uppercase tracking-wider text-gray-400">
+                  <th className="px-3 py-2 text-left font-medium">차수</th>
+                  <th className="px-3 py-2 text-right font-medium">생산수량</th>
+                  <th className="px-3 py-2 text-right font-medium">양품</th>
+                  <th className="px-3 py-2 text-right font-medium">불량</th>
+                  <th className="px-3 py-2 text-right font-medium">누적</th>
+                  <th className="px-3 py-2 text-right font-medium">시각</th>
+                </tr>
+              </thead>
+              <tbody>
+                {[...history].reverse().map((h, i) => (
+                  <tr
+                    key={h.seq}
+                    className="border-t border-gray-100"
+                    style={i % 2 === 1 ? { backgroundColor: '#FAFBFC' } : undefined}
+                  >
+                    <td className="px-3 py-3">
+                      <span className={cn(
+                        "rounded px-2 py-0.5 text-xs font-bold",
+                        i === 0 ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-600"
+                      )}>
+                        #{h.seq}
+                      </span>
+                    </td>
+                    <td className="px-3 py-3 text-right font-semibold text-gray-900">+{h.batch_qty}</td>
+                    <td className="px-3 py-3 text-right font-medium text-green-600">+{h.batch_good}</td>
+                    <td className="px-3 py-3 text-right font-medium text-red-600">+{h.batch_defect}</td>
+                    <td className="px-3 py-3 text-right text-gray-500">{h.accumulated_total}</td>
+                    <td className="px-3 py-3 text-right text-gray-400">
+                      {new Date(h.changed_at).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           )}
         </div>
+
+        {/* 여백 */}
+        <div className="h-2" />
       </div>
 
       {/* 실적 확정 버튼 제거됨 - 자동 완료로 대체 (2026-03-17 결정) */}
@@ -1703,13 +1782,11 @@ interface InfoBarProps {
 function InfoBar({ fields, parentRow, processName }: InfoBarProps) {
   return (
     <div
-      className="flex shrink-0 flex-wrap items-center gap-x-5 gap-y-1.5 px-4"
+      className="flex shrink-0 items-center gap-8 px-6"
       style={{
-        minHeight: `${DESIGN.header.height}px`,
-        backgroundColor: DESIGN.bg.header,
-        color: '#FFFFFF',
-        paddingTop: 8,
-        paddingBottom: 8,
+        backgroundColor: DESIGN.bg.infoBar,
+        paddingTop: 10,
+        paddingBottom: 10,
       }}
     >
       {fields.map((f) => {
@@ -1717,9 +1794,9 @@ function InfoBar({ fields, parentRow, processName }: InfoBarProps) {
           ? processName
           : parentRow[f.column];
         return (
-          <div key={f.column} className="flex items-center gap-1.5">
-            <span className="text-white/60" style={{ fontSize: `${DESIGN.infoBar.labelSize}px` }}>{f.label}</span>
-            <span className="font-medium text-white" style={{ fontSize: `${DESIGN.infoBar.valueSize}px` }}>{val != null ? String(val) : "-"}</span>
+          <div key={f.column} className="flex items-center gap-2">
+            <span className="text-xs" style={{ color: 'rgba(255,255,255,0.4)' }}>{f.label}</span>
+            <span className="text-sm font-medium text-white">{val != null ? String(val) : "-"}</span>
           </div>
         );
       })}
@@ -1740,30 +1817,38 @@ interface KpiCardsProps {
 function KpiCards({ inputQty, completedQty, defectQty }: KpiCardsProps) {
   const remaining = Math.max(0, inputQty - completedQty);
   const cards = [
-    { label: "접수량", value: inputQty, color: COLORS.kpiInput },
-    { label: "작업완료", value: completedQty, color: COLORS.kpiComplete },
-    { label: "잔여", value: remaining, color: COLORS.kpiRemaining },
-    { label: "불량", value: defectQty, color: COLORS.kpiDefect },
+    { label: "접수량", value: inputQty, color: "text-gray-900", labelColor: "text-gray-400" },
+    { label: "완료", value: completedQty, color: "text-blue-600", labelColor: "text-blue-400" },
+    { label: "잔여", value: remaining, color: "text-amber-600", labelColor: "text-amber-400" },
+    { label: "불량", value: defectQty, color: "text-red-600", labelColor: "text-red-400" },
   ];
 
   return (
-    <div className="flex shrink-0 gap-3 px-4 py-3" style={{ backgroundColor: DESIGN.bg.card }}>
-      {cards.map((c) => (
-        <div
-          key={c.label}
-          className="flex flex-1 flex-col items-center rounded-lg border py-2 shadow-sm"
-          style={{ backgroundColor: DESIGN.bg.card }}
-        >
-          <span
-            className={cn("font-bold tabular-nums", c.color)}
-            style={{ fontSize: `${DESIGN.kpi.valueSize}px`, fontWeight: DESIGN.kpi.weight }}
-          >
-            {c.value}
-          </span>
-          <span className="text-muted-foreground" style={{ fontSize: `${DESIGN.kpi.labelSize}px` }}>
-            {c.label}
-          </span>
-        </div>
+    <div className="flex gap-5 border-b border-gray-100 bg-white px-8 py-5">
+      {cards.map((c, i) => (
+        <React.Fragment key={c.label}>
+          {i > 0 && <div className="w-px bg-gray-100" />}
+          <div className="flex flex-1 flex-col items-center py-3">
+            <span
+              className={cn(c.color)}
+              style={{
+                fontSize: `${DESIGN.kpi.valueSize}px`,
+                lineHeight: 1,
+                fontWeight: DESIGN.kpi.weight,
+                fontVariantNumeric: 'tabular-nums',
+                letterSpacing: '-0.02em',
+              }}
+            >
+              {c.value}
+            </span>
+            <span
+              className={cn("mt-1 font-medium", c.labelColor)}
+              style={{ fontSize: `${DESIGN.kpi.labelSize}px`, letterSpacing: '0.01em' }}
+            >
+              {c.label}
+            </span>
+          </div>
+        </React.Fragment>
       ))}
     </div>
   );
@@ -1797,58 +1882,58 @@ function GroupTimerHeader({
   onTimerAction,
 }: GroupTimerHeaderProps) {
   return (
-    <div className="border-b" style={{ backgroundColor: DESIGN.bg.card }}>
+    <div className="border-b border-gray-100 bg-white">
       {/* 그룹 제목 + 진행 카운트 */}
-      <div className="flex items-center justify-between px-4 pt-3 pb-1.5">
+      <div className="flex items-center justify-between px-8 pb-1.5 pt-4">
         <div className="flex items-center gap-2.5">
-          <span className="font-semibold" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>{group.title}</span>
-          <Badge variant="secondary" className="text-xs px-2 py-0.5">
+          <span className="text-sm font-semibold text-gray-900 uppercase tracking-wide">{group.title}</span>
+          <span className="rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
             {group.completed}/{group.total}
-          </Badge>
+          </span>
         </div>
         {isGroupCompleted && (
-          <Badge variant="outline" className={cn("text-xs px-2 py-0.5", COLORS.good)}>완료</Badge>
+          <span className="rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">완료</span>
         )}
       </div>
 
       {/* 그룹 타이머 */}
       {cfg.showTimer && (
-        <div className="flex items-center justify-between bg-muted/20 px-4 py-2.5">
+        <div className="flex items-center justify-between bg-gray-50/50 px-8 py-2.5">
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2">
-              <Timer className="h-4 w-4 text-muted-foreground" />
-              <span className="font-mono font-medium tabular-nums" style={{ fontSize: `${DESIGN.section.titleSize}px` }}>{groupTimerFormatted}</span>
-              <span className="text-xs text-muted-foreground">작업</span>
+              <Timer className="h-4 w-4 text-gray-400" />
+              <span className="font-mono text-sm font-medium tabular-nums text-gray-900">{groupTimerFormatted}</span>
+              <span className="text-xs text-gray-400">작업</span>
             </div>
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <span className="font-mono text-xs tabular-nums">{groupElapsedFormatted}</span>
-              <span className="text-xs">경과</span>
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-xs tabular-nums text-gray-400">{groupElapsedFormatted}</span>
+              <span className="text-xs text-gray-400">경과</span>
             </div>
           </div>
           {!isProcessCompleted && !isGroupCompleted && (
             <div className="flex items-center gap-1.5">
               {!isGroupStarted && (
-                <Button size="sm" variant="outline" className="px-4" style={{ height: `${DESIGN.button.height}px`, fontSize: `${DESIGN.section.titleSize}px` }} onClick={() => onTimerAction("start")}>
-                  <Play className="mr-1.5 h-4 w-4" />시작
+                <Button size="sm" variant="outline" className="gap-1.5 px-4 text-sm" onClick={() => onTimerAction("start")}>
+                  <Play className="h-4 w-4" />시작
                 </Button>
               )}
               {isGroupStarted && !isGroupPaused && (
                 <>
-                  <Button size="sm" variant="outline" className="px-3" style={{ height: `${DESIGN.button.height}px`, fontSize: `${DESIGN.section.titleSize}px` }} onClick={() => onTimerAction("pause")}>
-                    <Pause className="mr-1.5 h-4 w-4" />정지
+                  <Button size="sm" variant="outline" className="gap-1.5 px-3 text-sm" onClick={() => onTimerAction("pause")}>
+                    <Pause className="h-4 w-4" />정지
                   </Button>
-                  <Button size="sm" variant="default" className="px-3" style={{ height: `${DESIGN.button.height}px`, fontSize: `${DESIGN.section.titleSize}px` }} onClick={() => onTimerAction("complete")}>
-                    <CheckCircle2 className="mr-1.5 h-4 w-4" />완료
+                  <Button size="sm" variant="default" className="gap-1.5 px-3 text-sm" onClick={() => onTimerAction("complete")}>
+                    <CheckCircle2 className="h-4 w-4" />완료
                   </Button>
                 </>
               )}
               {isGroupStarted && isGroupPaused && (
                 <>
-                  <Button size="sm" variant="outline" className="px-3" style={{ height: `${DESIGN.button.height}px`, fontSize: `${DESIGN.section.titleSize}px` }} onClick={() => onTimerAction("resume")}>
-                    <Play className="mr-1.5 h-4 w-4" />재개
+                  <Button size="sm" variant="outline" className="gap-1.5 px-3 text-sm" onClick={() => onTimerAction("resume")}>
+                    <Play className="h-4 w-4" />재개
                   </Button>
-                  <Button size="sm" variant="default" className="px-3" style={{ height: `${DESIGN.button.height}px`, fontSize: `${DESIGN.section.titleSize}px` }} onClick={() => onTimerAction("complete")}>
-                    <CheckCircle2 className="mr-1.5 h-4 w-4" />완료
+                  <Button size="sm" variant="default" className="gap-1.5 px-3 text-sm" onClick={() => onTimerAction("complete")}>
+                    <CheckCircle2 className="h-4 w-4" />완료
                   </Button>
                 </>
               )}
@@ -1875,6 +1960,29 @@ function StepStatusIcon({ status }: { status: "pending" | "active" | "completed"
   }
 }
 
+// ========================================
+// 사이드바 아이템 상태 아이콘 (combined-final)
+// ========================================
+
+function SidebarStepIcon({ status, isSelected }: { status: "pending" | "active" | "completed"; isSelected: boolean }) {
+  if (status === "completed") {
+    return (
+      <svg className="h-4 w-4 shrink-0 text-green-500" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    );
+  }
+  if (isSelected || status === "active") {
+    return (
+      <svg className="h-4 w-4 shrink-0 text-blue-500" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v4l3 3" />
+      </svg>
+    );
+  }
+  return <div className="h-4 w-4 shrink-0 rounded-full border-2 border-gray-300" />;
+}
+
 // ========================================
 // 체크리스트 행 래퍼 (행 전체 터치 영역 + 상태 표시)
 // ========================================