From 3771971f3ead1cdd8007df939a3384c9371f919c Mon Sep 17 00:00:00 2001
From: Hyein <hikim2@samaneng.com>
Date: Thu, 25 Jun 2026 16:19:09 +0900
Subject: [PATCH] Improve search and comparison flow UI

---
 src/App.jsx | 595 ++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 436 insertions(+), 159 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 29f7e87..bec0762 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -223,6 +223,7 @@ const defaultContent = {
     deliverables: cheonjiinDeliverables,
     format: 'glb',
     programType: 'internal',
+    programNote: '',
     predecessors: [],
     successors: [],
     mergeGroup: ''
@@ -234,6 +235,7 @@ const defaultContent = {
     format: '',
     deliverables: ['기본설계 모델'],
     programType: 'internal',
+    programNote: '',
     predecessors: [],
     successors: [],
     mergeGroup: '',
@@ -250,6 +252,7 @@ function normalizeStoredContent(parsed) {
         ...defaultContent.cheonjiin,
         ...(parsed.cheonjiin ?? {}),
         programType: getProgramType(parsed.cheonjiin?.programType ?? defaultContent.cheonjiin.programType),
+        programNote: parsed.cheonjiin?.programNote ?? '',
         predecessors: parsed.cheonjiin?.predecessors ?? [],
         successors: parsed.cheonjiin?.successors ?? [],
         mergeGroup: parsed.cheonjiin?.mergeGroup ?? '',
@@ -262,6 +265,7 @@ function normalizeStoredContent(parsed) {
         ...defaultContent.wayPrimal,
         ...(parsed.wayPrimal ?? {}),
         programType: getProgramType(parsed.wayPrimal?.programType ?? defaultContent.wayPrimal.programType),
+        programNote: parsed.wayPrimal?.programNote ?? '',
         predecessors: parsed.wayPrimal?.predecessors ?? [],
         successors: parsed.wayPrimal?.successors ?? [],
         mergeGroup: parsed.wayPrimal?.mergeGroup ?? '',
@@ -278,6 +282,7 @@ function normalizeStoredContent(parsed) {
       extraPrograms: (parsed.extraPrograms ?? []).map((program, index, programs) => ({
         ...program,
         programType: getProgramType(program.programType),
+        programNote: program.programNote ?? '',
         predecessors: program.predecessors ?? [],
         successors: program.successors ?? [],
         mergeGroup: program.mergeGroup ?? '',
@@ -475,13 +480,15 @@ function splitDeliverableText(item) {
     .filter(Boolean);
 }
 
-function FlowCard({ step, index, total, accent, status, isEditing, onChange }) {
+function FlowCard({ step, index, total, accent, status, isEditing, onChange, searchMatched = false }) {
   const Icon = step.icon ?? pickStepIcon(step);
   return (
     <div className="relative z-10 h-full w-full">
       <div
         className={`relative h-full overflow-hidden rounded-2xl border px-4 py-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md ${
-          status === 'active'
+          searchMatched
+            ? 'border-yellow-300 bg-gradient-to-br from-yellow-50 to-white shadow-yellow-100 ring-2 ring-yellow-200'
+            : status === 'active'
             ? 'border-amber-200 bg-gradient-to-br from-amber-50 to-white shadow-amber-100'
             : status === 'disabled'
               ? 'border-slate-100 bg-white/45 opacity-45 shadow-none'
@@ -492,7 +499,9 @@ function FlowCard({ step, index, total, accent, status, isEditing, onChange }) {
       >
         <div
           className={`absolute inset-x-0 top-0 h-1 ${
-            status === 'active'
+            searchMatched
+              ? 'bg-yellow-400'
+              : status === 'active'
               ? 'bg-amber-400'
               : status === 'completed'
                 ? 'bg-emerald-400'
@@ -505,10 +514,10 @@ function FlowCard({ step, index, total, accent, status, isEditing, onChange }) {
           </div>
           <span
             className={`text-[11px] font-bold ${
-              status === 'active' ? 'text-amber-700' : status === 'completed' ? 'text-emerald-700' : 'text-slate-400'
+              searchMatched ? 'text-yellow-700' : status === 'active' ? 'text-amber-700' : status === 'completed' ? 'text-emerald-700' : 'text-slate-400'
             }`}
           >
-            {status === 'active' ? '재진입' : status === 'completed' ? '통과' : `${String(index + 1).padStart(2, '0')} / ${String(total).padStart(2, '0')}`}
+            {searchMatched ? '검색' : status === 'active' ? '재진입' : status === 'completed' ? '통과' : `${String(index + 1).padStart(2, '0')} / ${String(total).padStart(2, '0')}`}
           </span>
         </div>
         {isEditing ? (
@@ -550,6 +559,7 @@ function FlowCard({ step, index, total, accent, status, isEditing, onChange }) {
 function FlowRow({
   label,
   description,
+  programNote = '',
   steps,
   accent,
   onLabelClick,
@@ -562,13 +572,15 @@ function FlowRow({
   onDeliverableChange,
   onLabelChange,
   onDescriptionChange,
+  onProgramNoteChange,
   programType,
   onProgramTypeChange,
   onAddStep,
   onRemoveStep,
   onMoveStep,
   onProgramDelete,
-  rowRef
+  rowRef,
+  searchMatchedStepIds = []
 }) {
   const activeIndex = steps.findIndex((step) => step.id === activeStep);
 
@@ -596,6 +608,14 @@ function FlowRow({
     setStepWindowStart((current) => Math.min(current, maxWindowStart));
   }, [maxWindowStart]);
 
+  useEffect(() => {
+    if (!searchMatchedStepIds.length) return;
+    const matchedIndex = steps.findIndex((step) => searchMatchedStepIds.includes(step.id));
+    if (matchedIndex < 0) return;
+    if (matchedIndex >= stepWindowStart && matchedIndex < stepWindowStart + maxVisibleSteps) return;
+    setStepWindowStart(Math.min(maxWindowStart, Math.max(0, matchedIndex - maxVisibleSteps + 1)));
+  }, [searchMatchedStepIds, steps, stepWindowStart, maxWindowStart]);
+
   const moveStepWindow = (direction) => {
     setStepWindowStart((current) => Math.min(maxWindowStart, Math.max(0, current + direction)));
   };
@@ -610,6 +630,7 @@ function FlowRow({
         status={getStatus(index)}
         isEditing={isEditing}
         onChange={onStepChange}
+        searchMatched={searchMatchedStepIds.includes(step.id)}
       />
       {isEditing && (onMoveStep || onRemoveStep) && (
         <div className="flex flex-wrap justify-center gap-1.5">
@@ -724,6 +745,21 @@ function FlowRow({
           ) : (
             <h2 className="mt-1 whitespace-pre-line text-sm font-bold tracking-tight text-slate-800">{description}</h2>
           )}
+          {isEditing && onProgramNoteChange ? (
+            <textarea
+              value={programNote}
+              onClick={(event) => event.stopPropagation()}
+              onChange={(event) => onProgramNoteChange(event.target.value)}
+              rows={2}
+              placeholder="프로그램 노트를 입력하세요"
+              className="mt-2 w-full min-w-[360px] resize-none rounded-xl border border-amber-100 bg-amber-50/70 px-3 py-2 text-sm font-bold leading-5 text-slate-800 outline-none focus:border-amber-300"
+            />
+          ) : programNote ? (
+            <div className="mt-2 max-w-3xl rounded-2xl bg-amber-50/80 px-3 py-2 text-sm font-semibold leading-5 text-amber-900 ring-1 ring-amber-100">
+              <span className="mr-2 text-[11px] font-black uppercase tracking-wide text-amber-600">NOTE</span>
+              <span className="whitespace-pre-line">{programNote}</span>
+            </div>
+          ) : null}
         </div>
         <div className="flex flex-col items-start gap-2 md:items-end">
           {onFormatChange && (
@@ -812,7 +848,12 @@ function FlowRow({
             <div key={step.id} className="relative">
               {renderStepCard(step, index, 'min-w-0')}
               {itemIndex < visibleStepItems.length - 1 && (
-                <ArrowDown className={`mx-auto mt-2 h-5 w-5 xl:hidden ${accent.arrowText}`} />
+                <>
+                  <ArrowDown className={`mx-auto mt-2 h-5 w-5 xl:hidden ${searchMatchedStepIds.includes(step.id) && searchMatchedStepIds.includes(visibleStepItems[itemIndex + 1]?.step.id) ? 'text-yellow-500' : accent.arrowText}`} />
+                  <ArrowRight
+                    className={`pointer-events-none absolute left-[calc(100%+0.625rem)] top-[129px] z-20 hidden h-5 w-5 -translate-x-1/2 -translate-y-1/2 xl:block ${searchMatchedStepIds.includes(step.id) && searchMatchedStepIds.includes(visibleStepItems[itemIndex + 1]?.step.id) ? 'text-yellow-500' : accent.arrowText}`}
+                  />
+                </>
               )}
             </div>
           ))}
@@ -822,13 +863,6 @@ function FlowRow({
               className="hidden min-h-[258px] rounded-2xl border border-dashed border-transparent xl:block"
             />
           ))}
-          {visibleStepItems.slice(0, -1).map((item, index) => (
-            <ArrowRight
-              key={`arrow-${item.step.id}`}
-              className={`pointer-events-none absolute top-1/2 z-20 hidden h-5 w-5 -translate-x-1/2 -translate-y-1/2 xl:block ${accent.arrowText}`}
-              style={{ left: `${25 * (index + 1)}%` }}
-            />
-          ))}
         </div>
         {steps.length > 1 && (
           <div className="mt-3 flex items-center justify-center gap-1.5">
@@ -876,7 +910,6 @@ function DetailPopup({
   const [position, setPosition] = useState({ x: 24, y: 72 });
   const [dragStart, setDragStart] = useState(null);
   const [isDetailEditing, setIsDetailEditing] = useState(false);
-  const [changeSearch, setChangeSearch] = useState('');
 
   const normalizedGates = reviewItems.reduce((nextGates, item) => ({
     ...nextGates,
@@ -888,17 +921,6 @@ function DetailPopup({
     const targetProgram = getTargetProgram(gate);
     return `${targetProgram.name} · ${getStepLabel(targetProgram, gate.stepId)}`;
   };
-  const normalizedSearch = changeSearch.trim().toLowerCase();
-  const isSearchMatched = (gate) => Boolean(normalizedSearch) && [
-    gate.question,
-    gate.yes,
-    gate.no,
-    getTargetLabel(gate)
-  ].join(' ').toLowerCase().includes(normalizedSearch);
-  const searchMatchCount = normalizedSearch
-    ? reviewItems.filter((gate) => isSearchMatched(gate)).length
-    : 0;
-
   const setGate = (key, value) => {
     const nextGates = { ...normalizedGates, [key]: value };
     setGates(nextGates);
@@ -997,21 +1019,6 @@ function DetailPopup({
               <div className="mb-5 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                 <h3 className="text-base font-extrabold text-slate-950">변경사항 검토 및 재진입 흐름</h3>
                 <div className="flex flex-wrap items-center gap-2">
-                  <input
-                    value={changeSearch}
-                    onChange={(event) => setChangeSearch(event.target.value)}
-                    placeholder="변경사항 검색 예: 노선변경"
-                    className="h-8 w-56 rounded-full border border-slate-200 bg-white/90 px-3 text-[12px] font-bold text-slate-700 outline-none focus:border-teal-400"
-                  />
-                  {changeSearch && (
-                    <button
-                      type="button"
-                      onClick={() => setChangeSearch('')}
-                      className="rounded-full bg-slate-100 px-3 py-1.5 text-[11px] font-extrabold text-slate-500 hover:bg-slate-200"
-                    >
-                      검색 해제
-                    </button>
-                  )}
                   {isDetailEditing && (
                     <button
                       type="button"
@@ -1024,19 +1031,13 @@ function DetailPopup({
                 </div>
               </div>
               <div className="space-y-4">
-                {normalizedSearch && (
-                  <p className="text-center text-[12px] font-bold text-slate-500">
-                    `{changeSearch}` 매칭 스텝 {searchMatchCount}개
-                  </p>
-                )}
                 {reviewItems.map((gate, index) => {
                   const blocked = reviewItems.slice(0, index).some((item) => normalizedGates[item.key] === 'yes');
                   const active = normalizedGates[gate.key] === 'yes';
                   const passed = normalizedGates[gate.key] === 'no' && !blocked;
-                  const matched = isSearchMatched(gate);
                   return (
-                  <div key={gate.key} className={`grid grid-cols-[0.85fr_minmax(220px,1.25fr)_0.85fr] items-center gap-2.5 ${blocked ? 'opacity-35' : ''} ${matched ? 'rounded-3xl bg-yellow-50/60 p-2 ring-2 ring-yellow-300' : ''}`}>
-                    <div className={`rounded-2xl px-3 py-3.5 ${matched ? 'bg-yellow-100/90 ring-2 ring-yellow-300' : active ? 'bg-amber-100/90 ring-2 ring-amber-300' : 'bg-amber-50/80 ring-1 ring-amber-100'}`}>
+                  <div key={gate.key} className={`grid grid-cols-[0.85fr_minmax(220px,1.25fr)_0.85fr] items-center gap-2.5 ${blocked ? 'opacity-35' : ''}`}>
+                    <div className={`rounded-2xl px-3 py-3.5 ${active ? 'bg-amber-100/90 ring-2 ring-amber-300' : 'bg-amber-50/80 ring-1 ring-amber-100'}`}>
                       {isDetailEditing ? (
                         <div className="space-y-1.5">
                           <input
@@ -1079,7 +1080,7 @@ function DetailPopup({
                         </div>
                       )}
                     </div>
-                    <div className={`rounded-2xl bg-white/95 px-4 py-4 text-center shadow-sm ring-1 ${matched ? 'ring-yellow-300' : active ? 'ring-amber-300' : passed ? 'ring-emerald-300' : 'ring-slate-200'}`}>
+                    <div className={`rounded-2xl bg-white/95 px-4 py-4 text-center shadow-sm ring-1 ${active ? 'ring-amber-300' : passed ? 'ring-emerald-300' : 'ring-slate-200'}`}>
                       {isDetailEditing ? (
                         <div className="space-y-1.5">
                           <textarea
@@ -1134,7 +1135,7 @@ function DetailPopup({
                         </button>
                       </div>
                     </div>
-                    <div className={`rounded-2xl px-3 py-3.5 ${matched ? 'bg-yellow-100/90 ring-2 ring-yellow-300' : passed ? 'bg-emerald-100/90 ring-2 ring-emerald-300' : 'bg-emerald-50/80 ring-1 ring-emerald-100'}`}>
+                    <div className={`rounded-2xl px-3 py-3.5 ${passed ? 'bg-emerald-100/90 ring-2 ring-emerald-300' : 'bg-emerald-50/80 ring-1 ring-emerald-100'}`}>
                       {isDetailEditing ? (
                         <input
                           value={gate.no}
@@ -1307,9 +1308,17 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
     stepMatches: [],
     note: ''
   });
+  const normalizeStepMatches = (matches = []) =>
+    matches.map((match, index) => ({
+      id: match.id ?? `match-${index}-${match.leftStepIndex ?? ''}-${match.rightStepIndex ?? ''}`,
+      leftStepIndex: match.leftStepIndex !== undefined ? String(match.leftStepIndex) : '',
+      rightStepIndex: match.rightStepIndex !== undefined ? String(match.rightStepIndex) : '',
+      reason: match.reason ?? ''
+    }));
   const [draft, setDraft] = useState(() => {
     const pairComparison = initialPair ? findSavedComparisonByPair(defaultLeftProgramId, defaultRightProgramId) : null;
-    return pairComparison ?? (initialPair ? createEmptyDraft(defaultLeftProgramId, defaultRightProgramId) : savedComparisons[0] ?? createEmptyDraft());
+    const initialDraft = pairComparison ?? (initialPair ? createEmptyDraft(defaultLeftProgramId, defaultRightProgramId) : savedComparisons[0] ?? createEmptyDraft());
+    return { ...initialDraft, stepMatches: normalizeStepMatches(initialDraft.stepMatches) };
   });
   const [loadTargetId, setLoadTargetId] = useState(() => {
     const pairComparison = initialPair ? findSavedComparisonByPair(defaultLeftProgramId, defaultRightProgramId) : null;
@@ -1326,7 +1335,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
   const leftSteps = leftProgram?.steps ?? [];
   const rightSteps = rightProgram?.steps ?? [];
   const stepMatches = draft.stepMatches ?? [];
-  const maxStepCount = Math.max(leftSteps.length, rightSteps.length);
+  const comparisonRows = stepMatches;
   const isSavedDraft = savedComparisons.some((comparison) => comparison.id === draft.id);
   const hasDraftContent =
     draft.title?.trim() ||
@@ -1347,7 +1356,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
     if (!selected) return;
     setDraft({
       ...selected,
-      stepMatches: selected.stepMatches ?? [],
+      stepMatches: normalizeStepMatches(selected.stepMatches),
       note: selected.note ?? '',
       title: selected.title ?? ''
     });
@@ -1355,50 +1364,62 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
   };
   const saveDraft = () => {
     if (!draft.leftProgramId || !draft.rightProgramId || draft.leftProgramId === draft.rightProgramId) return;
+    const nextComparisonId = createComparisonId(draft.leftProgramId, draft.rightProgramId);
     onComparisonSave({
       ...draft,
-      id: createComparisonId(draft.leftProgramId, draft.rightProgramId),
+      id: nextComparisonId,
       title: draft.title ?? '',
-      stepMatches: (draft.stepMatches ?? []).filter((match) => match.reason?.trim()),
+      stepMatches: normalizeStepMatches(draft.stepMatches).filter(
+        (match) => match.reason?.trim() || match.leftStepIndex !== '' || match.rightStepIndex !== ''
+      ),
       note: draft.note ?? '',
       updatedAt: new Date().toISOString()
     });
-    setLoadTargetId(draft.id);
+    setDraft((current) => ({ ...current, id: nextComparisonId }));
+    setLoadTargetId(nextComparisonId);
     setIsCompareEditing(false);
   };
   const deleteDraft = () => {
     if (isSavedDraft) onComparisonDelete(draft.id);
     startNewComparison();
   };
-  const getStepMatch = (stepIndex) =>
-    stepMatches.find(
-      (match) => String(match.leftStepIndex) === String(stepIndex) && String(match.rightStepIndex) === String(stepIndex)
-    ) ?? {};
-  const updateStepReason = (stepIndex, value) => {
+  const getNextStepIndex = (steps, usedIndexes) => {
+    const nextIndex = steps.findIndex((_, index) => !usedIndexes.has(String(index)));
+    return nextIndex >= 0 ? String(nextIndex) : '';
+  };
+  const addComparisonRow = () => {
     setDraft((current) => {
       const currentMatches = current.stepMatches ?? [];
-      const existingIndex = currentMatches.findIndex(
-        (match) => String(match.leftStepIndex) === String(stepIndex) && String(match.rightStepIndex) === String(stepIndex)
-      );
-      if (!value.trim()) {
-        return {
-          ...current,
-          stepMatches: existingIndex >= 0 ? currentMatches.filter((_, index) => index !== existingIndex) : currentMatches
-        };
-      }
-      const nextMatch = {
-        ...(existingIndex >= 0 ? currentMatches[existingIndex] : {}),
-        id: `step-${stepIndex}`,
-        leftStepIndex: String(stepIndex),
-        rightStepIndex: String(stepIndex),
-        reason: value
-      };
+      const usedLeftIndexes = new Set(currentMatches.map((match) => String(match.leftStepIndex ?? '')).filter(Boolean));
+      const usedRightIndexes = new Set(currentMatches.map((match) => String(match.rightStepIndex ?? '')).filter(Boolean));
       return {
         ...current,
-        stepMatches:
-          existingIndex >= 0
-            ? currentMatches.map((match, index) => (index === existingIndex ? nextMatch : match))
-            : [...currentMatches, nextMatch]
+        stepMatches: [
+          ...currentMatches,
+          {
+            id: `match-${Date.now()}-${currentMatches.length}`,
+            leftStepIndex: getNextStepIndex(leftSteps, usedLeftIndexes),
+            rightStepIndex: getNextStepIndex(rightSteps, usedRightIndexes),
+            reason: ''
+          }
+        ]
+      };
+    });
+  };
+  const removeComparisonRow = (matchId) => {
+    setDraft((current) => ({
+      ...current,
+      stepMatches: (current.stepMatches ?? []).filter((match) => match.id !== matchId)
+    }));
+  };
+  const updateComparisonRow = (matchId, field, value) => {
+    setDraft((current) => {
+      const currentMatches = current.stepMatches ?? [];
+      return {
+        ...current,
+        stepMatches: currentMatches.map((match) =>
+          match.id === matchId ? { ...match, [field]: value } : match
+        )
       };
     });
   };
@@ -1412,10 +1433,10 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
   const generateComparisonConclusion = () => {
     const reasonMatches = (draft.stepMatches ?? [])
       .map((match) => {
-        const stepIndex = Number(match.leftStepIndex);
         return {
           ...match,
-          stepIndex,
+          leftStepIndexNumber: Number(match.leftStepIndex),
+          rightStepIndexNumber: Number(match.rightStepIndex),
           reason: stripFormatTags(match.reason)
         };
       })
@@ -1427,7 +1448,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
     }
 
     const stepNames = reasonMatches
-      .map((match) => leftSteps[match.stepIndex]?.title || rightSteps[match.stepIndex]?.title)
+      .map((match) => leftSteps[match.leftStepIndexNumber]?.title || rightSteps[match.rightStepIndexNumber]?.title)
       .filter(Boolean);
     const uniqueStepNames = [...new Set(stepNames)];
     const stepSummary = uniqueStepNames.length > 0
@@ -1481,6 +1502,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
     event.preventDefault();
     const isSameTarget =
       lastTextSelection?.target?.type === target.type &&
+      String(lastTextSelection?.target?.matchId ?? '') === String(target.matchId ?? '') &&
       String(lastTextSelection?.target?.stepIndex ?? '') === String(target.stepIndex ?? '');
     let selectionStart = textarea.selectionStart !== textarea.selectionEnd
       ? textarea.selectionStart
@@ -1539,30 +1561,13 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
     if (formatMenu.target.type === 'reason') {
       setDraft((current) => {
         const currentMatches = current.stepMatches ?? [];
-        const existingIndex = currentMatches.findIndex(
-          (match) =>
-            String(match.leftStepIndex) === String(formatMenu.target.stepIndex) &&
-            String(match.rightStepIndex) === String(formatMenu.target.stepIndex)
-        );
-        const currentMatch =
-          existingIndex >= 0
-            ? currentMatches[existingIndex]
-            : {
-                id: `step-${formatMenu.target.stepIndex}`,
-                leftStepIndex: String(formatMenu.target.stepIndex),
-                rightStepIndex: String(formatMenu.target.stepIndex),
-                reason: ''
-              };
-        const nextMatch = {
-          ...currentMatch,
-          reason: wrapText(currentMatch.reason ?? '')
-        };
         return {
           ...current,
-          stepMatches:
-            existingIndex >= 0
-              ? currentMatches.map((match, index) => (index === existingIndex ? nextMatch : match))
-              : [...currentMatches, nextMatch]
+          stepMatches: currentMatches.map((match) =>
+            match.id === formatMenu.target.matchId
+              ? { ...match, reason: wrapText(match.reason ?? '') }
+              : match
+          )
         };
       });
     }
@@ -1749,33 +1754,65 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
           </div>
 
           <div className="mt-4 rounded-3xl bg-white p-4 ring-1 ring-slate-100">
-            <div>
-              <h3 className="text-base font-black text-slate-950">전체 스텝 1:1 비교</h3>
-              <p className="mt-1 text-[12px] font-bold text-slate-500">
-                두 프로그램의 스텝을 전부 펼친 뒤, 가운데에 해당 스텝에서 상용 프로그램을 쓰는 이유를 적습니다.
-              </p>
+            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+              <div>
+                <h3 className="text-base font-black text-slate-950">선택 스텝 비교</h3>
+                <p className="mt-1 text-[12px] font-bold text-slate-500">
+                  비교 행을 만들고, 왼쪽/오른쪽 프로그램에서 비교할 스텝을 각각 선택합니다.
+                </p>
+              </div>
+              {isCompareEditing && (
+                <button
+                  type="button"
+                  onClick={addComparisonRow}
+                  className="rounded-full bg-blue-50 px-4 py-2 text-[12px] font-black text-blue-700 ring-1 ring-blue-100 hover:bg-blue-100"
+                >
+                  비교 행 추가
+                </button>
+              )}
             </div>
 
             <div className="mt-4 space-y-3">
-              {maxStepCount === 0 ? (
+              {comparisonRows.length === 0 ? (
                 <div className="rounded-2xl bg-slate-50 px-4 py-6 text-center text-sm font-bold text-slate-500 ring-1 ring-slate-100">
-                  비교할 스텝이 없습니다.
+                  {isCompareEditing ? '비교 행을 추가해서 좌우 스텝을 선택하세요.' : '작성된 비교 행이 없습니다.'}
                 </div>
               ) : (
-                Array.from({ length: maxStepCount }).map((_, stepIndex) => {
-                  const leftStep = leftSteps[stepIndex];
-                  const rightStep = rightSteps[stepIndex];
-                  const match = getStepMatch(stepIndex);
+                comparisonRows.map((match, rowIndex) => {
+                  const leftStepIndex = match.leftStepIndex === '' ? -1 : Number(match.leftStepIndex);
+                  const rightStepIndex = match.rightStepIndex === '' ? -1 : Number(match.rightStepIndex);
+                  const leftStep = leftSteps[leftStepIndex];
+                  const rightStep = rightSteps[rightStepIndex];
                   return (
                     <div
-                      key={`step-compare-${stepIndex}`}
+                      key={match.id}
                       className="grid grid-cols-[minmax(0,1fr)_minmax(230px,1.35fr)_minmax(0,1fr)] gap-3 rounded-2xl border border-slate-100 bg-slate-50/80 p-3"
                     >
                       <div className="rounded-2xl bg-amber-50/70 p-3 ring-1 ring-amber-100">
-                        <span className="text-[11px] font-black text-amber-700">{leftProgram?.name ?? 'A'} 스텝</span>
-                        <h4 className="mt-1 text-sm font-black text-slate-950">
-                          {leftStep ? getStepLabel(leftStep, stepIndex) : `${stepIndex + 1}. -`}
-                        </h4>
+                        <div className="flex items-start justify-between gap-2">
+                          <span className="text-[11px] font-black text-amber-700">{leftProgram?.name ?? 'A'} 스텝</span>
+                          <span className="rounded-full bg-white/75 px-2 py-0.5 text-[10px] font-black text-amber-700 ring-1 ring-amber-100">
+                            #{rowIndex + 1}
+                          </span>
+                        </div>
+                        {isCompareEditing ? (
+                          <select
+                            value={match.leftStepIndex ?? ''}
+                            onChange={(event) => updateComparisonRow(match.id, 'leftStepIndex', event.target.value)}
+                            className="mt-2 w-full rounded-xl border border-amber-100 bg-white px-3 py-2 text-[12px] font-black text-slate-800 outline-none focus:border-amber-300"
+                          >
+                            <option value="">왼쪽 스텝 선택</option>
+                            {leftSteps.map((step, stepIndex) => (
+                              <option key={step.id ?? stepIndex} value={String(stepIndex)}>
+                                {getStepLabel(step, stepIndex)}
+                              </option>
+                            ))}
+                          </select>
+                        ) : (
+                          <h4 className="mt-1 text-sm font-black text-slate-950">
+                            {leftStep ? getStepLabel(leftStep, leftStepIndex) : '선택된 스텝 없음'}
+                          </h4>
+                        )}
                         <p className="mt-2 whitespace-pre-line rounded-xl bg-white/75 px-3 py-2 text-[12px] font-bold leading-5 text-slate-700 ring-1 ring-amber-50">
                           {leftStep?.feature || '해당 스텝 없음'}
                         </p>
@@ -1785,15 +1822,24 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                       </div>
                       {isCompareEditing ? (
                         <label className="block">
-                          <span className="text-[11px] font-black text-slate-700">안 되는 기능 / 상용 사용 이유</span>
+                          <span className="flex items-center justify-between gap-2">
+                            <span className="text-[11px] font-black text-slate-700">안 되는 기능 / 상용 사용 이유</span>
+                            <button
+                              type="button"
+                              onClick={() => removeComparisonRow(match.id)}
+                              className="rounded-full bg-white px-2.5 py-1 text-[10px] font-black text-red-600 ring-1 ring-red-100 hover:bg-red-50"
+                            >
+                              행 삭제
+                            </button>
+                          </span>
                           <textarea
                             value={match.reason ?? ''}
-                            onChange={(event) => updateStepReason(stepIndex, event.target.value)}
-                            onSelect={(event) => rememberTextSelection(event, { type: 'reason', stepIndex })}
-                            onMouseUp={(event) => rememberTextSelection(event, { type: 'reason', stepIndex })}
-                            onKeyUp={(event) => rememberTextSelection(event, { type: 'reason', stepIndex })}
-                            onPointerDown={(event) => openFormatMenuOnRightDown(event, { type: 'reason', stepIndex })}
-                            onContextMenu={(event) => openFormatMenu(event, { type: 'reason', stepIndex })}
+                            onChange={(event) => updateComparisonRow(match.id, 'reason', event.target.value)}
+                            onSelect={(event) => rememberTextSelection(event, { type: 'reason', matchId: match.id })}
+                            onMouseUp={(event) => rememberTextSelection(event, { type: 'reason', matchId: match.id })}
+                            onKeyUp={(event) => rememberTextSelection(event, { type: 'reason', matchId: match.id })}
+                            onPointerDown={(event) => openFormatMenuOnRightDown(event, { type: 'reason', matchId: match.id })}
+                            onContextMenu={(event) => openFormatMenu(event, { type: 'reason', matchId: match.id })}
                             rows={5}
                             placeholder="강조할 글자를 드래그한 뒤 우클릭하세요."
                             className="mt-1 h-[128px] w-full resize-y rounded-xl border border-slate-200 bg-white px-3 py-2 text-[12px] font-bold leading-5 text-slate-800 outline-none focus:border-blue-300"
@@ -1812,9 +1858,24 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                       )}
                       <div className="rounded-2xl bg-blue-50/70 p-3 ring-1 ring-blue-100">
                         <span className="text-[11px] font-black text-blue-700">{rightProgram?.name ?? 'B'} 스텝</span>
-                        <h4 className="mt-1 text-sm font-black text-slate-950">
-                          {rightStep ? getStepLabel(rightStep, stepIndex) : `${stepIndex + 1}. -`}
-                        </h4>
+                        {isCompareEditing ? (
+                          <select
+                            value={match.rightStepIndex ?? ''}
+                            onChange={(event) => updateComparisonRow(match.id, 'rightStepIndex', event.target.value)}
+                            className="mt-2 w-full rounded-xl border border-blue-100 bg-white px-3 py-2 text-[12px] font-black text-slate-800 outline-none focus:border-blue-300"
+                          >
+                            <option value="">오른쪽 스텝 선택</option>
+                            {rightSteps.map((step, stepIndex) => (
+                              <option key={step.id ?? stepIndex} value={String(stepIndex)}>
+                                {getStepLabel(step, stepIndex)}
+                              </option>
+                            ))}
+                          </select>
+                        ) : (
+                          <h4 className="mt-1 text-sm font-black text-slate-950">
+                            {rightStep ? getStepLabel(rightStep, rightStepIndex) : '선택된 스텝 없음'}
+                          </h4>
+                        )}
                         <p className="mt-2 whitespace-pre-line rounded-xl bg-white/75 px-3 py-2 text-[12px] font-bold leading-5 text-slate-700 ring-1 ring-blue-50">
                           {rightStep?.feature || '해당 스텝 없음'}
                         </p>
@@ -1827,7 +1888,6 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                 })
               )}
             </div>
-
             {isCompareEditing ? (
               <>
                 <label className="mt-4 block">
@@ -1920,7 +1980,14 @@ function RelationTreePanel({
   onProgramClick,
   onOpenComparePair,
   onRelationSelect,
+  onRelationReset,
   selectedRelationId,
+  searchedRelationIds = [],
+  stepSearchQuery = '',
+  onStepSearchChange,
+  stepSearchResult,
+  selectedSearchMatchId = '',
+  onSearchMatchSelect,
   onOpenRelationPopup,
   onOpenMapWindow,
   sidebarWidth,
@@ -2253,6 +2320,16 @@ function RelationTreePanel({
               <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
               상용
             </span>
+            {selectedRelationId && (
+              <button
+                type="button"
+                onClick={onRelationReset}
+                className="rounded-full bg-orange-50 px-2 py-1 text-[10px] font-black text-orange-700 ring-1 ring-orange-100 hover:bg-orange-100"
+                title="reset relation selection"
+              >
+                선택 해제
+              </button>
+            )}
           </div>
           {!fullPage && (
           <div className="flex items-center justify-between gap-2">
@@ -2336,6 +2413,9 @@ function RelationTreePanel({
                   <marker id="sidebar-relation-arrow-selected" markerWidth="7" markerHeight="7" refX="6.5" refY="3.5" orient="auto" markerUnits="strokeWidth">
                     <path d="M 0 0 L 7 3.5 L 0 7 z" fill="#f97316" />
                   </marker>
+                  <marker id="sidebar-relation-arrow-search" markerWidth="7" markerHeight="7" refX="6.5" refY="3.5" orient="auto" markerUnits="strokeWidth">
+                    <path d="M 0 0 L 7 3.5 L 0 7 z" fill="#0ea5e9" />
+                  </marker>
                 </defs>
                 {relations.map((relation) => {
                   const from = miniNodePositions[relation.from.id];
@@ -2344,6 +2424,7 @@ function RelationTreePanel({
                   const selectedToId = groupRepresentativeMap[relation.toGroupKey] ?? relation.to.id;
                   const relationId = `${relation.from.id}->${selectedToId}`;
                   const isSelectedRelation = selectedRelationId === relationId;
+                  const isSearchedRelation = searchedRelationIds.includes(relationId);
                   const toGroupBox = mergeGroupBoxMap[relation.toGroupKey];
                   const fromLevel = levelMap[relation.from.id] ?? 0;
                   const toLevel = levelMap[relation.to.id] ?? 0;
@@ -2397,25 +2478,25 @@ function RelationTreePanel({
                         onPointerDown={stopRelationDrag}
                         onClick={handleRelationClick}
                       />
-                      {isSelectedRelation && (
+                      {(isSelectedRelation || isSearchedRelation) && (
                         <path
                           d={pathD}
                           fill="none"
-                          stroke="#fed7aa"
-                          strokeWidth="5.5"
+                          stroke={isSelectedRelation ? '#fed7aa' : '#bae6fd'}
+                          strokeWidth={isSelectedRelation ? '5.5' : '6'}
                           strokeLinecap="round"
-                          opacity="0.65"
+                          opacity={isSelectedRelation ? '0.65' : '0.8'}
                           style={{ pointerEvents: 'none' }}
                         />
                       )}
                       <path
                         d={pathD}
                         fill="none"
-                        stroke={isSelectedRelation ? '#f97316' : isSkipEdge ? '#7c3aed' : '#2563eb'}
-                        strokeWidth={isSelectedRelation ? '2.9' : isSkipEdge ? '2.2' : '2'}
+                        stroke={isSelectedRelation ? '#f97316' : isSearchedRelation ? '#0ea5e9' : isSkipEdge ? '#7c3aed' : '#2563eb'}
+                        strokeWidth={isSelectedRelation ? '2.9' : isSearchedRelation ? '3.2' : isSkipEdge ? '2.2' : '2'}
                         strokeDasharray={isSkipEdge ? '6 5' : undefined}
-                        opacity={isSelectedRelation ? '1' : isSkipEdge ? '0.82' : '1'}
-                        markerEnd={isSelectedRelation ? 'url(#sidebar-relation-arrow-selected)' : isSkipEdge ? 'url(#sidebar-relation-arrow-skip)' : 'url(#sidebar-relation-arrow)'}
+                        opacity={isSelectedRelation || isSearchedRelation ? '1' : isSkipEdge ? '0.82' : '1'}
+                        markerEnd={isSelectedRelation ? 'url(#sidebar-relation-arrow-selected)' : isSearchedRelation ? 'url(#sidebar-relation-arrow-search)' : isSkipEdge ? 'url(#sidebar-relation-arrow-skip)' : 'url(#sidebar-relation-arrow)'}
                         className="cursor-pointer"
                         style={{ pointerEvents: 'stroke' }}
                         onPointerDown={stopRelationDrag}
@@ -2458,6 +2539,85 @@ function RelationTreePanel({
             아직 연결된 프로그램이 없습니다.
           </div>
         )}
+        {onStepSearchChange && (
+          <div className="mt-3 rounded-2xl bg-white p-3 ring-1 ring-slate-100">
+            <div className="flex items-center gap-2">
+              <input
+                value={stepSearchQuery}
+                onChange={(event) => onStepSearchChange(event.target.value)}
+                placeholder="변경사항 검색 예: 노선변경"
+                className="min-w-0 flex-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-2 text-[12px] font-bold text-slate-700 outline-none focus:border-sky-300"
+              />
+              {stepSearchQuery && (
+                <button
+                  type="button"
+                  onClick={() => onStepSearchChange('')}
+                  className="rounded-full bg-slate-100 px-3 py-2 text-[11px] font-black text-slate-500 hover:bg-slate-200"
+                >
+                  해제
+                </button>
+              )}
+            </div>
+            {stepSearchQuery.trim() && (
+              <div className="mt-3 space-y-2">
+                {stepSearchResult?.programPath?.length ? (
+                  <>
+                    <div className="rounded-2xl bg-sky-50/70 px-3 py-2 ring-1 ring-sky-100">
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        {stepSearchResult.programPath.map((program, index) => (
+                          <React.Fragment key={program.id}>
+                            <span className={`rounded-full px-2.5 py-1 text-[11px] font-black ring-1 ${index === stepSearchResult.programPath.length - 1 ? 'bg-sky-100 text-sky-800 ring-sky-200' : 'bg-white text-slate-700 ring-slate-200'}`}>
+                              {program.name}
+                            </span>
+                            {index < stepSearchResult.programPath.length - 1 && (
+                              <ArrowRight className="h-3.5 w-3.5 text-sky-500" />
+                            )}
+                          </React.Fragment>
+                        ))}
+                      </div>
+                      <p className="mt-1.5 text-[11px] font-bold text-slate-500">
+                        {stepSearchResult.program?.name} · {stepSearchResult.step?.title}까지 필요한 업무 스텝을 노란색으로 표시합니다.
+                      </p>
+                    </div>
+                    {stepSearchResult.matches?.length > 1 && (
+                      <div className="space-y-1.5">
+                        <p className="text-[11px] font-black text-slate-500">
+                          비슷한 항목 {stepSearchResult.matches.length}개 중 선택
+                        </p>
+                        <div className="grid gap-1.5">
+                          {stepSearchResult.matches.map((match) => {
+                            const isSelected = selectedSearchMatchId === match.id;
+                            return (
+                              <button
+                                key={match.id}
+                                type="button"
+                                onClick={() => onSearchMatchSelect?.(match.id)}
+                                className={`w-full rounded-xl px-3 py-2 text-left text-[11px] font-bold ring-1 transition ${
+                                  isSelected
+                                    ? 'bg-yellow-100 text-yellow-900 ring-yellow-300'
+                                    : 'bg-slate-50 text-slate-600 ring-slate-100 hover:bg-yellow-50'
+                                }`}
+                              >
+                                <span className="block truncate font-black">
+                                  {match.program.name} · {match.step.title}
+                                </span>
+                                <span className="mt-0.5 block truncate text-[10px]">
+                                  {match.gate.question}
+                                </span>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <p className="text-[11px] font-bold text-slate-400">검색된 변경사항/재진입 스텝이 없습니다.</p>
+                )}
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </aside>
   );
@@ -2479,6 +2639,8 @@ export default function App() {
   const [isComparePopupOpen, setIsComparePopupOpen] = useState(false);
   const [compareInitialPair, setCompareInitialPair] = useState(null);
   const [selectedRelationId, setSelectedRelationId] = useState('');
+  const [stepSearchQuery, setStepSearchQuery] = useState('');
+  const [selectedStepSearchMatchId, setSelectedStepSearchMatchId] = useState('');
   const [sidebarWidth, setSidebarWidth] = useState(420);
   const [isServerLoaded, setIsServerLoaded] = useState(false);
   const relationBlockRefs = useRef({});
@@ -2490,23 +2652,25 @@ export default function App() {
       id: 'cheonjiin',
       name: content.cheonjiin.name,
       description: content.cheonjiin.description,
+      programNote: content.cheonjiin.programNote ?? '',
       steps: editableCheonjiinFlow,
       format: content.cheonjiin.format,
       programType: getProgramType(content.cheonjiin.programType),
       predecessors: content.cheonjiin.predecessors ?? [],
       successors: content.cheonjiin.successors ?? [],
       mergeGroup: content.cheonjiin.mergeGroup ?? '',
-      accent: {
-        iconBg: 'bg-teal-50',
-        iconText: 'text-teal-700',
-        labelText: 'text-teal-700',
-        arrowText: 'text-teal-600'
+        accent: {
+        iconBg: 'bg-blue-50',
+        iconText: 'text-blue-700',
+        labelText: 'text-blue-700',
+        arrowText: 'text-blue-600'
       }
     },
     {
       id: 'wayPrimal',
       name: content.wayPrimal.name,
       description: content.wayPrimal.description,
+      programNote: content.wayPrimal.programNote ?? '',
       steps: editableWayPrimalFlow,
       format: content.wayPrimal.format,
       programType: getProgramType(content.wayPrimal.programType),
@@ -2515,15 +2679,16 @@ export default function App() {
       mergeGroup: content.wayPrimal.mergeGroup ?? '',
       accent: {
         iconBg: 'bg-indigo-50',
-        iconText: 'text-indigo-700',
-        labelText: 'text-indigo-700',
-        arrowText: 'text-indigo-600'
+        iconText: 'text-blue-700',
+        labelText: 'text-blue-700',
+        arrowText: 'text-blue-600'
       }
     },
     ...content.extraPrograms.map((program) => ({
       id: program.id,
       name: program.name,
       description: program.description,
+      programNote: program.programNote ?? '',
       steps: normalizeProgramSteps(program),
       format: program.format,
       programType: getProgramType(program.programType),
@@ -2554,6 +2719,88 @@ export default function App() {
     return representatives;
   }, {});
   const getRelationId = (fromId, toId) => `${fromId}->${toId}`;
+  const normalizeSearchText = (value) => String(value ?? '').trim().toLowerCase();
+  const stepSearchTerm = normalizeSearchText(stepSearchQuery);
+  const stepSearchMatches = stepSearchTerm
+    ? programs.flatMap((program) =>
+        buildReviewItems(program.id, program.steps, getStoredProgram(program.id)?.detailGates)
+          .map((gate, gateIndex) => {
+            const targetProgramId = resolveGateTargetProgramId(gate, program.id, programs);
+            const targetProgram = programById[targetProgramId] ?? program;
+            const targetStep = targetProgram.steps.find((step) => step.id === gate.stepId);
+            return {
+              id: `${program.id}::${gate.key}`,
+              sourceProgram: program,
+              program: targetProgram,
+              step: targetStep,
+              stepIndex: targetProgram.steps.findIndex((step) => step.id === gate.stepId),
+              gate,
+              gateIndex
+            };
+          })
+          .filter(({ sourceProgram, program, step, gate }) =>
+            step &&
+            [
+              gate.question,
+              gate.yes,
+              gate.no,
+              `${program.name} ${step.title}`,
+              `${sourceProgram.name} ${program.name} ${step.title}`
+            ].some((value) => normalizeSearchText(value).includes(stepSearchTerm))
+          )
+      )
+    : [];
+  const primaryStepSearchMatch =
+    stepSearchMatches.find((match) => match.id === selectedStepSearchMatchId) ??
+    stepSearchMatches[0] ??
+    null;
+  const findProgramPath = (targetProgramId) => {
+    if (!targetProgramId || !programById[targetProgramId]) return [];
+    const rootPrograms = programs.filter((program) => (program.predecessors ?? []).length === 0);
+    const queue = (rootPrograms.length ? rootPrograms : programs.slice(0, 1)).map((program) => [program.id]);
+    const visited = new Set();
+    while (queue.length) {
+      const path = queue.shift();
+      const currentId = path[path.length - 1];
+      if (currentId === targetProgramId) return path.map((programId) => programById[programId]).filter(Boolean);
+      if (visited.has(currentId)) continue;
+      visited.add(currentId);
+      (programById[currentId]?.successors ?? []).forEach((successorId) => {
+        if (!programById[successorId] || path.includes(successorId)) return;
+        queue.push([...path, successorId]);
+      });
+    }
+    return [programById[targetProgramId]].filter(Boolean);
+  };
+  const searchedProgramPath = primaryStepSearchMatch ? findProgramPath(primaryStepSearchMatch.program.id) : [];
+  const searchedRelationIds = searchedProgramPath.slice(0, -1).map((program, index) => {
+    const nextProgram = searchedProgramPath[index + 1];
+    const nextGroupKey = getProgramGroupKey(nextProgram);
+    return getRelationId(program.id, groupRepresentativeByKey[nextGroupKey] ?? nextProgram.id);
+  });
+  const searchedStepIdsByProgram = searchedProgramPath.reduce((matches, program, pathIndex) => {
+    const isTargetProgram = pathIndex === searchedProgramPath.length - 1;
+    const targetStepIndex = isTargetProgram ? primaryStepSearchMatch?.stepIndex ?? -1 : program.steps.length - 1;
+    matches[program.id] = program.steps
+      .slice(0, Math.max(0, targetStepIndex + 1))
+      .map((step) => step.id);
+    return matches;
+  }, {});
+  const stepSearchResult = {
+    query: stepSearchQuery,
+    matches: stepSearchMatches,
+    program: primaryStepSearchMatch?.program,
+    step: primaryStepSearchMatch?.step,
+    programPath: searchedProgramPath
+  };
+  useEffect(() => {
+    if (!stepSearchTerm) {
+      if (selectedStepSearchMatchId) setSelectedStepSearchMatchId('');
+      return;
+    }
+    if (selectedStepSearchMatchId && stepSearchMatches.some((match) => match.id === selectedStepSearchMatchId)) return;
+    setSelectedStepSearchMatchId(stepSearchMatches[0]?.id ?? '');
+  }, [stepSearchTerm, selectedStepSearchMatchId, stepSearchMatches]);
   const getRelationLabel = (fromProgram, toPrograms) => {
     const targetPrograms = Array.isArray(toPrograms) ? toPrograms : [toPrograms];
     const storedTarget = targetPrograms.map((program) => getStoredProgram(program.id)).find((program) => program?.linkLabel);
@@ -2587,6 +2834,10 @@ export default function App() {
     focusRelation(relationId, !isRelationMapWindow);
     broadcastRelationSelection(relationId);
   };
+  const resetRelationSelection = () => {
+    focusRelation('', false);
+    broadcastRelationSelection('');
+  };
   const focusProgram = (programId, shouldScroll = true) => {
     if (shouldScroll) {
       programSectionRefs.current[programId]?.scrollIntoView({
@@ -2715,7 +2966,7 @@ export default function App() {
       if (event.data?.states) {
         setProgramStates(event.data.states);
       }
-      if (event.data?.selectedRelationId) {
+      if (event.data && Object.prototype.hasOwnProperty.call(event.data, 'selectedRelationId')) {
         focusRelation(event.data.selectedRelationId, !isRelationMapWindow);
       }
       if (event.data?.selectedProgramId) {
@@ -2813,7 +3064,7 @@ export default function App() {
       if (event.data?.type === 'program-flow-selected-program' && event.data.programId) {
         focusProgram(event.data.programId, true);
       }
-      if (event.data?.type === 'program-flow-selected-relation' && event.data.relationId) {
+      if (event.data?.type === 'program-flow-selected-relation' && Object.prototype.hasOwnProperty.call(event.data, 'relationId')) {
         focusRelation(event.data.relationId, true);
       }
     };
@@ -3206,6 +3457,7 @@ export default function App() {
           format: '',
           deliverables: ['성과물'],
           programType: 'internal',
+          programNote: '',
           predecessors: [],
           successors: [],
           mergeGroup: '',
@@ -3429,7 +3681,9 @@ export default function App() {
           onProgramClick={selectProgramFromMap}
           onOpenComparePair={openComparePair}
           onRelationSelect={selectRelation}
+          onRelationReset={resetRelationSelection}
           selectedRelationId={selectedRelationId}
+          searchedRelationIds={searchedRelationIds}
           onOpenRelationPopup={() => setIsRelationPopupOpen(true)}
           sidebarWidth={1280}
           onSidebarWidthChange={() => {}}
@@ -3479,7 +3733,14 @@ export default function App() {
             onProgramClick={selectProgramFromMap}
             onOpenComparePair={openComparePair}
             onRelationSelect={selectRelation}
+            onRelationReset={resetRelationSelection}
             selectedRelationId={selectedRelationId}
+            searchedRelationIds={searchedRelationIds}
+            stepSearchQuery={stepSearchQuery}
+            onStepSearchChange={setStepSearchQuery}
+            stepSearchResult={stepSearchResult}
+            selectedSearchMatchId={primaryStepSearchMatch?.id ?? ''}
+            onSearchMatchSelect={setSelectedStepSearchMatchId}
             onOpenRelationPopup={() => setIsRelationPopupOpen(true)}
             onOpenMapWindow={openRelationMapWindow}
             sidebarWidth={sidebarWidth}
@@ -3511,6 +3772,7 @@ export default function App() {
         <FlowRow
           label={content.cheonjiin.name}
           description={content.cheonjiin.description}
+          programNote={content.cheonjiin.programNote ?? ''}
           steps={editableCheonjiinFlow}
           onLabelClick={() => openProgramWindow('cheonjiin')}
           activeStep={getMainActiveStep('cheonjiin')}
@@ -3518,6 +3780,7 @@ export default function App() {
           onStepChange={(index, field, value) => updateStep('cheonjiin', index, field, value)}
           onLabelChange={(value) => updateProgramTitle('cheonjiin', 'name', value)}
           onDescriptionChange={(value) => updateProgramTitle('cheonjiin', 'description', value)}
+          onProgramNoteChange={(value) => updateProgramTitle('cheonjiin', 'programNote', value)}
           programType={content.cheonjiin.programType}
           onProgramTypeChange={(value) => updateProgramTitle('cheonjiin', 'programType', value)}
           format={content.cheonjiin.format}
@@ -3527,14 +3790,15 @@ export default function App() {
           onAddStep={() => addStep('cheonjiin')}
           onRemoveStep={(index) => removeStep('cheonjiin', index)}
           onMoveStep={(index, nextIndex) => moveStep('cheonjiin', index, nextIndex)}
+          searchMatchedStepIds={searchedStepIdsByProgram.cheonjiin ?? []}
           rowRef={(node) => {
             programSectionRefs.current.cheonjiin = node;
           }}
           accent={{
-            iconBg: 'bg-teal-50',
-            iconText: 'text-teal-700',
-            labelText: 'text-teal-700',
-            arrowText: 'text-teal-600'
+            iconBg: 'bg-blue-50',
+            iconText: 'text-blue-700',
+            labelText: 'text-blue-700',
+            arrowText: 'text-blue-600'
           }}
         />
         {renderRelationBlock(programById.cheonjiin)}
@@ -3542,6 +3806,7 @@ export default function App() {
         <FlowRow
           label={content.wayPrimal.name}
           description={content.wayPrimal.description}
+          programNote={content.wayPrimal.programNote ?? ''}
           steps={editableWayPrimalFlow}
           onLabelClick={() => openProgramWindow('wayPrimal')}
           activeStep={getMainActiveStep('wayPrimal')}
@@ -3549,6 +3814,7 @@ export default function App() {
           onStepChange={(index, field, value) => updateStep('wayPrimal', index, field, value)}
           onLabelChange={(value) => updateProgramTitle('wayPrimal', 'name', value)}
           onDescriptionChange={(value) => updateProgramTitle('wayPrimal', 'description', value)}
+          onProgramNoteChange={(value) => updateProgramTitle('wayPrimal', 'programNote', value)}
           programType={content.wayPrimal.programType}
           onProgramTypeChange={(value) => updateProgramTitle('wayPrimal', 'programType', value)}
           format={content.wayPrimal.format}
@@ -3558,14 +3824,15 @@ export default function App() {
           onAddStep={() => addStep('wayPrimal')}
           onRemoveStep={(index) => removeStep('wayPrimal', index)}
           onMoveStep={(index, nextIndex) => moveStep('wayPrimal', index, nextIndex)}
+          searchMatchedStepIds={searchedStepIdsByProgram.wayPrimal ?? []}
           rowRef={(node) => {
             programSectionRefs.current.wayPrimal = node;
           }}
           accent={{
             iconBg: 'bg-indigo-50',
-            iconText: 'text-indigo-700',
-            labelText: 'text-indigo-700',
-            arrowText: 'text-indigo-600'
+            iconText: 'text-blue-700',
+            labelText: 'text-blue-700',
+            arrowText: 'text-blue-600'
           }}
         />
         {renderRelationBlock(programById.wayPrimal)}
@@ -3592,6 +3859,13 @@ export default function App() {
                       onChange={(event) => updateProgram(programIndex, 'description', event.target.value)}
                       className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-blue-400"
                     />
+                    <textarea
+                      value={program.programNote ?? ''}
+                      onChange={(event) => updateProgram(programIndex, 'programNote', event.target.value)}
+                      placeholder="프로그램 노트"
+                      rows={2}
+                      className="md:col-span-2 resize-none rounded-md border border-amber-100 bg-amber-50/70 px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-amber-300"
+                    />
                   </div>
                   <div className="flex gap-2">
                     <button
@@ -3620,6 +3894,7 @@ export default function App() {
             <FlowRow
               label={program.name}
               description={program.description}
+              programNote={program.programNote ?? ''}
               steps={normalizeProgramSteps(program)}
               onLabelClick={() => openProgramWindow(program.id)}
               activeStep={getMainActiveStep(program.id)}
@@ -3627,6 +3902,7 @@ export default function App() {
               onStepChange={(index, field, value) => updateProgramStep(programIndex, index, field, value)}
               onLabelChange={(value) => updateProgramTitle(program.id, 'name', value)}
               onDescriptionChange={(value) => updateProgramTitle(program.id, 'description', value)}
+              onProgramNoteChange={(value) => updateProgramTitle(program.id, 'programNote', value)}
               programType={program.programType}
               onProgramTypeChange={(value) => updateProgram(programIndex, 'programType', value)}
               format={program.format}
@@ -3637,6 +3913,7 @@ export default function App() {
               onRemoveStep={(index) => removeStep(program.id, index)}
               onMoveStep={(index, nextIndex) => moveStep(program.id, index, nextIndex)}
               onProgramDelete={() => removeProgram(programIndex)}
+              searchMatchedStepIds={searchedStepIdsByProgram[program.id] ?? []}
               rowRef={(node) => {
                 programSectionRefs.current[program.id] = node;
               }}