diff --git a/src/App.jsx b/src/App.jsx
index 64cf6ba..b0bff02 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -213,6 +213,35 @@ const programTypeOptions = {
 
 const getProgramType = (type) => (type === 'commercial' ? 'commercial' : 'internal');
 const getProgramTypeMeta = (type) => programTypeOptions[getProgramType(type)];
+const programRoleOptions = {
+  flow: {
+    label: '업무 프로그램',
+    shortLabel: '업무',
+    badgeClass: 'bg-sky-50 text-sky-700 ring-sky-100'
+  },
+  reference: {
+    label: '참고 프로그램',
+    shortLabel: '참고',
+    badgeClass: 'bg-slate-100 text-slate-600 ring-slate-200'
+  }
+};
+const getProgramRole = (role) => (role === 'reference' ? 'reference' : 'flow');
+const getProgramRoleMeta = (role) => programRoleOptions[getProgramRole(role)];
+const normalizeAuxiliaryTargets = (program) => {
+  const targets = Array.isArray(program?.auxiliaryTargets) ? program.auxiliaryTargets : [];
+  const legacyTargets = targets.length === 0 && Array.isArray(program?.auxiliaryTargetIds)
+    ? program.auxiliaryTargetIds.map((programId) => ({ programId, stepId: '' }))
+    : [];
+  const mergedTargets = [...targets, ...legacyTargets]
+    .map((target) => ({
+      programId: target?.programId ?? target,
+      stepId: target?.stepId ?? ''
+    }))
+    .filter((target) => target.programId);
+  return mergedTargets.filter((target, index, list) =>
+    list.findIndex((item) => item.programId === target.programId && (item.stepId ?? '') === (target.stepId ?? '')) === index
+  );
+};
 
 const defaultContent = {
   cheonjiin: {
@@ -223,9 +252,12 @@ const defaultContent = {
     format: 'glb',
     engine: '',
     programType: 'internal',
+    programRole: 'flow',
     programNote: '',
     predecessors: [],
     successors: [],
+    auxiliaryTargetIds: [],
+    auxiliaryTargets: [],
     mergeGroup: ''
   },
   wayPrimal: {
@@ -236,9 +268,12 @@ const defaultContent = {
     engine: '',
     deliverables: ['기본설계 모델'],
     programType: 'internal',
+    programRole: 'flow',
     programNote: '',
     predecessors: [],
     successors: [],
+    auxiliaryTargetIds: [],
+    auxiliaryTargets: [],
     mergeGroup: '',
     linkLabel: '천지인 산출 모델을 WayPrimal 설계 입력으로 연계'
   },
@@ -253,10 +288,13 @@ function normalizeStoredContent(parsed) {
         ...defaultContent.cheonjiin,
         ...(parsed.cheonjiin ?? {}),
         programType: getProgramType(parsed.cheonjiin?.programType ?? defaultContent.cheonjiin.programType),
+        programRole: getProgramRole(parsed.cheonjiin?.programRole ?? defaultContent.cheonjiin.programRole),
         programNote: parsed.cheonjiin?.programNote ?? '',
         engine: parsed.cheonjiin?.engine ?? '',
         predecessors: parsed.cheonjiin?.predecessors ?? [],
         successors: parsed.cheonjiin?.successors ?? [],
+        auxiliaryTargetIds: parsed.cheonjiin?.auxiliaryTargetIds ?? [],
+        auxiliaryTargets: normalizeAuxiliaryTargets(parsed.cheonjiin),
         mergeGroup: parsed.cheonjiin?.mergeGroup ?? '',
         format:
           !parsed.cheonjiin?.format || parsed.cheonjiin.format === '예: DXF, SHP, GeoTIFF, 수치지형도 v2 등'
@@ -267,10 +305,13 @@ function normalizeStoredContent(parsed) {
         ...defaultContent.wayPrimal,
         ...(parsed.wayPrimal ?? {}),
         programType: getProgramType(parsed.wayPrimal?.programType ?? defaultContent.wayPrimal.programType),
+        programRole: getProgramRole(parsed.wayPrimal?.programRole ?? defaultContent.wayPrimal.programRole),
         programNote: parsed.wayPrimal?.programNote ?? '',
         engine: parsed.wayPrimal?.engine ?? '',
         predecessors: parsed.wayPrimal?.predecessors ?? [],
         successors: parsed.wayPrimal?.successors ?? [],
+        auxiliaryTargetIds: parsed.wayPrimal?.auxiliaryTargetIds ?? [],
+        auxiliaryTargets: normalizeAuxiliaryTargets(parsed.wayPrimal),
         mergeGroup: parsed.wayPrimal?.mergeGroup ?? '',
         format:
           parsed.wayPrimal?.format === '예: DWG, LandXML, XLSX, 도공계산서, 기본설계 모델 등'
@@ -285,10 +326,13 @@ function normalizeStoredContent(parsed) {
       extraPrograms: (parsed.extraPrograms ?? []).map((program, index, programs) => ({
         ...program,
         programType: getProgramType(program.programType),
+        programRole: getProgramRole(program.programRole),
         programNote: program.programNote ?? '',
         engine: program.engine ?? '',
         predecessors: program.predecessors ?? [],
         successors: program.successors ?? [],
+        auxiliaryTargetIds: program.auxiliaryTargetIds ?? [],
+        auxiliaryTargets: normalizeAuxiliaryTargets(program),
         mergeGroup: program.mergeGroup ?? '',
         linkLabel: program.linkLabel ?? `이전 프로그램 산출물을 ${program.name} 입력으로 연계`
       }))
@@ -484,14 +528,16 @@ function splitDeliverableText(item) {
     .filter(Boolean);
 }
 
-function FlowCard({ step, index, total, accent, status, isEditing, onChange, searchMatched = false }) {
+function FlowCard({ step, index, total, accent, status, isEditing, onChange, searchMatched = false, searchTargetMatched = false, auxiliaryPrograms = [] }) {
   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 ${
-          searchMatched
-            ? 'border-yellow-300 bg-gradient-to-br from-yellow-50 to-white shadow-yellow-100 ring-2 ring-yellow-200'
+          searchTargetMatched
+            ? 'border-orange-300 bg-gradient-to-br from-orange-50 to-white shadow-orange-100 ring-2 ring-orange-200'
+            : 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'
@@ -503,8 +549,10 @@ function FlowCard({ step, index, total, accent, status, isEditing, onChange, sea
       >
         <div
           className={`absolute inset-x-0 top-0 h-1 ${
-            searchMatched
-              ? 'bg-yellow-400'
+            searchTargetMatched
+              ? 'bg-orange-300'
+              : searchMatched
+                ? 'bg-yellow-400'
               : status === 'active'
               ? 'bg-amber-400'
               : status === 'completed'
@@ -516,13 +564,15 @@ function FlowCard({ step, index, total, accent, status, isEditing, onChange, sea
           <div className={`flex h-9 w-9 items-center justify-center rounded-2xl ${accent.iconBg}`}>
             <Icon className={`h-4 w-4 ${accent.iconText}`} />
           </div>
-          <span
-            className={`text-[11px] font-bold ${
-              searchMatched ? 'text-yellow-700' : status === 'active' ? 'text-amber-700' : status === 'completed' ? 'text-emerald-700' : 'text-slate-400'
-            }`}
-          >
-            {searchMatched ? '검색' : status === 'active' ? '재진입' : status === 'completed' ? '통과' : `${String(index + 1).padStart(2, '0')} / ${String(total).padStart(2, '0')}`}
-          </span>
+	          {(searchMatched || status === 'active' || status !== 'completed') && (
+	            <span
+	              className={`text-[11px] font-bold ${
+	                searchTargetMatched ? 'text-orange-700' : searchMatched ? 'text-yellow-700' : status === 'active' ? 'text-amber-700' : 'text-slate-400'
+	              }`}
+	            >
+	              {searchMatched ? '검색' : status === 'active' ? '재진입' : `${String(index + 1).padStart(2, '0')} / ${String(total).padStart(2, '0')}`}
+	            </span>
+	          )}
         </div>
         {isEditing ? (
           <div className="space-y-2">
@@ -555,6 +605,15 @@ function FlowCard({ step, index, total, accent, status, isEditing, onChange, sea
             </p>
           </>
         )}
+        {!isEditing && auxiliaryPrograms.length > 0 && (
+          <div className="mt-3 flex flex-wrap gap-1 border-t border-dashed border-slate-200 pt-2">
+            {auxiliaryPrograms.map((program) => (
+              <span key={program.id} className="rounded-full bg-pink-50 px-2 py-0.5 text-[10px] font-black text-pink-700 ring-1 ring-pink-200">
+                참고 입력 · {program.name}
+              </span>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -586,7 +645,10 @@ function FlowRow({
   onMoveStep,
   onProgramDelete,
   rowRef,
-  searchMatchedStepIds = []
+  searchMatchedStepIds = [],
+  searchTargetStepIds = [],
+  auxiliaryPrograms = [],
+  stepAuxiliaryProgramsByStepId = {}
 }) {
   const activeIndex = steps.findIndex((step) => step.id === activeStep);
 
@@ -637,6 +699,8 @@ function FlowRow({
         isEditing={isEditing}
         onChange={onStepChange}
         searchMatched={searchMatchedStepIds.includes(step.id)}
+        searchTargetMatched={searchTargetStepIds.includes(step.id)}
+        auxiliaryPrograms={stepAuxiliaryProgramsByStepId[step.id] ?? []}
       />
       {isEditing && (onMoveStep || onRemoveStep) && (
         <div className="flex flex-wrap justify-center gap-1.5">
@@ -764,8 +828,8 @@ function FlowRow({
               className="mt-2 w-full 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 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>
+            <div className="mt-2 grid grid-cols-[42px_minmax(0,1fr)] 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="text-[11px] font-black uppercase tracking-wide text-amber-600">NOTE</span>
               <span className="whitespace-pre-line">{programNote}</span>
             </div>
           ) : null}
@@ -846,6 +910,25 @@ function FlowRow({
           )}
         </div>
       </div>
+      {auxiliaryPrograms.length > 0 && (
+        <div className="mb-4 flex flex-wrap gap-2">
+          {auxiliaryPrograms.map((program) => {
+            const typeMeta = getProgramTypeMeta(program.programType);
+            return (
+              <div key={program.id} className="rounded-2xl border border-pink-100 bg-pink-50/90 px-3 py-2 shadow-sm">
+                <div className="flex items-center gap-2">
+                  <span className="text-[10px] font-black text-pink-600">보조 입력</span>
+                  <span className={`rounded-full px-2 py-0.5 text-[10px] font-black ring-1 ${typeMeta.badgeClass}`}>
+                    {typeMeta.shortLabel}
+                  </span>
+                </div>
+                <p className="mt-1 text-sm font-black text-pink-950">{program.name}</p>
+                <p className="mt-0.5 max-w-[220px] truncate text-[11px] font-bold text-pink-700/70">{program.description}</p>
+              </div>
+            );
+          })}
+        </div>
+      )}
       <div className="relative overflow-hidden rounded-[24px] bg-white/25 px-9 pb-5 pt-1 ring-1 ring-white/70">
         {steps.length > maxVisibleSteps && (
           <>
@@ -1210,7 +1293,8 @@ function DetailPopup({
   );
 }
 
-function RelationPopup({ programs, onToggleRelation, onMergeGroupChange, onClose }) {
+function RelationPopup({ programs, onToggleRelation, onMergeGroupChange, onMergeGroupMembersChange, onProgramRoleChange, onAuxiliaryTargetsChange, onClose }) {
+  const flowPrograms = programs.filter((program) => getProgramRole(program.programRole) === 'flow');
   return (
     <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/30 px-4 backdrop-blur-sm">
       <section className="relative flex max-h-[calc(100vh-48px)] w-full max-w-4xl flex-col overflow-hidden rounded-3xl border border-white/70 bg-white shadow-2xl">
@@ -1239,13 +1323,35 @@ function RelationPopup({ programs, onToggleRelation, onMergeGroupChange, onClose
           </div>
           <div className="space-y-3">
             {programs.map((program) => {
-              const candidates = programs.filter((item) => item.id !== program.id);
+              const programRole = getProgramRole(program.programRole);
+              const isReferenceProgram = programRole === 'reference';
+              const candidates = flowPrograms.filter((item) => item.id !== program.id);
+              const currentGroupKey = program.mergeGroup || program.id;
+              const mergedPrograms = flowPrograms.filter((item) => (item.mergeGroup || item.id) === currentGroupKey);
+              const mergedProgramNames = mergedPrograms.map((item) => item.name).join(', ');
               return (
-                <div key={program.id} className="grid gap-3 rounded-2xl bg-white p-4 ring-1 ring-slate-100 lg:grid-cols-[180px_1fr_1fr_220px]">
+                <div key={program.id} className="grid gap-3 rounded-2xl bg-white p-4 ring-1 ring-slate-100 lg:grid-cols-[180px_1fr_1fr_240px]">
                   <div>
                     <p className="text-[11px] font-extrabold uppercase tracking-wide text-slate-400">프로그램</p>
                     <h4 className="mt-1 text-base font-extrabold text-slate-950">{program.name}</h4>
+                    <div className="mt-2 flex flex-wrap gap-1">
+                      {Object.entries(programRoleOptions).map(([roleKey, roleMeta]) => (
+                        <button
+                          key={roleKey}
+                          type="button"
+                          onClick={() => onProgramRoleChange(program.id, roleKey)}
+                          className={`rounded-full px-2.5 py-1 text-[11px] font-black ring-1 transition ${
+                            programRole === roleKey
+                              ? roleMeta.badgeClass
+                              : 'bg-white text-slate-400 ring-slate-200 hover:bg-slate-50'
+                          }`}
+                        >
+                          {roleMeta.shortLabel}
+                        </button>
+                      ))}
+                    </div>
                   </div>
+                  {!isReferenceProgram ? (
                   <div>
                     <p className="mb-2 text-[12px] font-extrabold text-amber-700">선행</p>
                     <div className="flex flex-wrap gap-1.5">
@@ -1262,6 +1368,12 @@ function RelationPopup({ programs, onToggleRelation, onMergeGroupChange, onClose
                       ))}
                     </div>
                   </div>
+                  ) : (
+                  <div className="rounded-2xl bg-slate-50 px-3 py-2 text-[12px] font-bold leading-5 text-slate-500 ring-1 ring-slate-100">
+                    참고 프로그램은 선행/후행 흐름에는 포함하지 않습니다.
+                  </div>
+                  )}
+                  {!isReferenceProgram ? (
                   <div>
                     <p className="mb-2 text-[12px] font-extrabold text-blue-700">후행</p>
                     <div className="flex flex-wrap gap-1.5">
@@ -1278,27 +1390,76 @@ function RelationPopup({ programs, onToggleRelation, onMergeGroupChange, onClose
                       ))}
                     </div>
                   </div>
+                  ) : (
                   <div>
-                    <p className="mb-2 text-[12px] font-extrabold text-violet-700">하나로 인식</p>
-                    <select
-                      value={program.mergeGroup ?? ''}
-                      onChange={(event) => onMergeGroupChange(program.id, event.target.value)}
-                      className="w-full rounded-xl border border-violet-100 bg-violet-50 px-3 py-2 text-[12px] font-extrabold text-violet-800 outline-none focus:border-violet-300"
-                    >
-                      <option value="">개별 프로그램</option>
-                      {candidates.map((candidate) => {
-                        const groupValue = candidate.mergeGroup || candidate.id;
+                    <p className="mb-2 text-[12px] font-extrabold text-sky-700">보조 입력 대상</p>
+                    <div className="grid gap-2">
+                      {flowPrograms.map((candidate) => {
+                        const target = normalizeAuxiliaryTargets(program).find((item) => item.programId === candidate.id);
+                        const isChecked = Boolean(target);
                         return (
-                          <option key={candidate.id} value={groupValue}>
-                            {candidate.name}와 같은 프로그램
-                          </option>
+                          <div key={candidate.id} className="rounded-2xl bg-sky-50/80 p-2 ring-1 ring-sky-100">
+                            <label className="flex cursor-pointer items-center gap-1.5 text-[11px] font-extrabold text-sky-800">
+                              <input
+                                type="checkbox"
+                                checked={isChecked}
+                                onChange={(event) => onAuxiliaryTargetsChange(program.id, candidate.id, event.target.checked, '')}
+                                className="h-3.5 w-3.5 accent-sky-500"
+                              />
+                              {candidate.name}
+                            </label>
+                            {isChecked && (
+                              <select
+                                value={target?.stepId ?? ''}
+                                onChange={(event) => onAuxiliaryTargetsChange(program.id, candidate.id, true, event.target.value)}
+                                className="mt-1.5 w-full rounded-xl border border-sky-100 bg-white px-2 py-1.5 text-[11px] font-bold text-slate-700 outline-none focus:border-sky-300"
+                              >
+                                <option value="">프로그램 전체</option>
+                                {(candidate.steps ?? []).map((step, stepIndex) => (
+                                  <option key={step.id ?? stepIndex} value={step.id}>
+                                    {stepIndex + 1}. {step.title}
+                                  </option>
+                                ))}
+                              </select>
+                            )}
+                          </div>
                         );
                       })}
-                    </select>
+                    </div>
+                  </div>
+                  )}
+                  {!isReferenceProgram ? (
+                  <div>
+                    <p className="mb-2 text-[12px] font-extrabold text-violet-700">하나로 인식</p>
+                    <div className="mb-2 rounded-xl bg-violet-50 px-3 py-2 text-[11px] font-extrabold text-violet-800 ring-1 ring-violet-100">
+                      {mergedPrograms.length > 1 ? mergedProgramNames : '개별 프로그램'}
+                    </div>
+                    <div className="flex flex-wrap gap-1.5">
+                      {candidates.map((candidate) => {
+                        const candidateGroupKey = candidate.mergeGroup || candidate.id;
+                        const isMerged = currentGroupKey === candidateGroupKey && (program.mergeGroup || candidate.mergeGroup);
+                        return (
+                          <label key={candidate.id} className="flex cursor-pointer items-center gap-1.5 rounded-full bg-violet-50 px-2.5 py-1.5 text-[11px] font-extrabold text-violet-800 ring-1 ring-violet-100">
+                            <input
+                              type="checkbox"
+                              checked={Boolean(isMerged)}
+                              onChange={(event) => onMergeGroupMembersChange(program.id, candidate.id, event.target.checked)}
+                              className="h-3.5 w-3.5 accent-violet-500"
+                            />
+                            {candidate.name}
+                          </label>
+                        );
+                      })}
+                    </div>
                     <p className="mt-2 text-[11px] font-bold leading-4 text-slate-400">
-                      같은 단계로 보는 프로그램을 묶으면 연결도에서는 하나의 박스로 표시됩니다.
+                      체크한 프로그램들이 연결도에서 하나의 비교 프로그램 박스로 표시됩니다.
                     </p>
                   </div>
+                  ) : (
+                  <div className="rounded-2xl bg-sky-50 px-3 py-2 text-[11px] font-bold leading-4 text-sky-700 ring-1 ring-sky-100">
+                    대상 업무 프로그램 카드에 작은 보조 입력 카드로 표시됩니다.
+                  </div>
+                  )}
                 </div>
               );
             })}
@@ -1312,58 +1473,86 @@ function RelationPopup({ programs, onToggleRelation, onMergeGroupChange, onClose
 function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonSave, onComparisonDelete, onClose }) {
   const internalProgram = programs.find((program) => getProgramType(program.programType) === 'internal');
   const commercialProgram = programs.find((program) => getProgramType(program.programType) === 'commercial');
+  const isValidProgramId = (programId) => programs.some((program) => program.id === programId);
+  const getComparisonProgramIds = (comparison) => {
+    const ids = Array.isArray(comparison?.programIds) && comparison.programIds.length > 0
+      ? comparison.programIds
+      : [comparison?.leftProgramId, comparison?.rightProgramId];
+    return ids.filter((programId, index, list) => isValidProgramId(programId) && list.indexOf(programId) === index);
+  };
+  const createComparisonId = (programIds) => `comparison-${programIds.slice().sort().join('__')}`;
+  const programSetMatches = (comparison, programIds) =>
+    getComparisonProgramIds(comparison).slice().sort().join('__') === programIds.slice().sort().join('__');
   const savedComparisons = comparisons
     .filter(
       (comparison) =>
-        programs.some((program) => program.id === comparison.leftProgramId) &&
-        programs.some((program) => program.id === comparison.rightProgramId) &&
+        getComparisonProgramIds(comparison).length >= 2 &&
         (comparison.title?.trim() || (comparison.stepMatches ?? []).some((match) => match.reason?.trim()) || comparison.note?.trim())
     )
     .sort((left, right) => (right.updatedAt ?? '').localeCompare(left.updatedAt ?? ''));
-  const createComparisonId = (leftProgramId, rightProgramId) => `comparison-${[leftProgramId, rightProgramId].sort().join('__')}`;
-  const isValidProgramId = (programId) => programs.some((program) => program.id === programId);
-  const pairMatches = (comparison, leftProgramId, rightProgramId) =>
-    [comparison.leftProgramId, comparison.rightProgramId].sort().join('__') === [leftProgramId, rightProgramId].sort().join('__');
   const defaultLeftProgramId = isValidProgramId(initialPair?.leftProgramId)
     ? initialPair.leftProgramId
     : internalProgram?.id ?? programs[0]?.id ?? '';
   const defaultRightProgramId = isValidProgramId(initialPair?.rightProgramId) && initialPair.rightProgramId !== defaultLeftProgramId
     ? initialPair.rightProgramId
     : commercialProgram?.id ?? programs.find((program) => program.id !== defaultLeftProgramId)?.id ?? '';
-  const findSavedComparisonByPair = (leftProgramId, rightProgramId) =>
-    savedComparisons.find((comparison) => pairMatches(comparison, leftProgramId, rightProgramId));
+  const initialGroupProgramIds = (initialPair?.programIds ?? [])
+    .filter((programId, index, ids) => isValidProgramId(programId) && ids.indexOf(programId) === index);
+  const defaultProgramIds = initialGroupProgramIds.length >= 2
+    ? initialGroupProgramIds
+    : [defaultLeftProgramId, defaultRightProgramId].filter(Boolean);
+  const findSavedComparisonByPrograms = (programIds) =>
+    savedComparisons.find((comparison) => programSetMatches(comparison, programIds));
   const createEmptyDraft = (leftProgramId = defaultLeftProgramId, rightProgramId = defaultRightProgramId) => ({
-    id: createComparisonId(leftProgramId, rightProgramId),
+    id: createComparisonId(defaultProgramIds),
     title: '',
     leftProgramId,
     rightProgramId,
+    programIds: defaultProgramIds,
     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 normalizeStepMatches = (matches = [], ownerDraft = {}) =>
+    matches.map((match, index) => {
+      const leftStepIndex = match.leftStepIndex !== undefined ? String(match.leftStepIndex) : '';
+      const rightStepIndex = match.rightStepIndex !== undefined ? String(match.rightStepIndex) : '';
+      return {
+        id: match.id ?? `match-${index}-${leftStepIndex}-${rightStepIndex}`,
+        leftStepIndex,
+        rightStepIndex,
+        stepIndexes: {
+          ...(match.stepIndexes ?? {}),
+          ...(ownerDraft?.leftProgramId ? { [ownerDraft.leftProgramId]: leftStepIndex } : {}),
+          ...(ownerDraft?.rightProgramId ? { [ownerDraft.rightProgramId]: rightStepIndex } : {})
+        },
+        reason: match.reason ?? ''
+      };
+    });
   const [draft, setDraft] = useState(() => {
-    const pairComparison = initialPair ? findSavedComparisonByPair(defaultLeftProgramId, defaultRightProgramId) : null;
+    const pairComparison = initialPair ? findSavedComparisonByPrograms(defaultProgramIds) : null;
     const initialDraft = pairComparison ?? (initialPair ? createEmptyDraft(defaultLeftProgramId, defaultRightProgramId) : savedComparisons[0] ?? createEmptyDraft());
-    return { ...initialDraft, stepMatches: normalizeStepMatches(initialDraft.stepMatches) };
+    const initialProgramIds = getComparisonProgramIds(initialDraft);
+    return { ...initialDraft, programIds: initialProgramIds, stepMatches: normalizeStepMatches(initialDraft.stepMatches, initialDraft) };
   });
   const [loadTargetId, setLoadTargetId] = useState(() => {
-    const pairComparison = initialPair ? findSavedComparisonByPair(defaultLeftProgramId, defaultRightProgramId) : null;
+    const pairComparison = initialPair ? findSavedComparisonByPrograms(defaultProgramIds) : null;
     return pairComparison?.id ?? (initialPair ? '' : savedComparisons[0]?.id ?? '');
   });
   const [isCompareEditing, setIsCompareEditing] = useState(() => {
-    const pairComparison = initialPair ? findSavedComparisonByPair(defaultLeftProgramId, defaultRightProgramId) : null;
+    const pairComparison = initialPair ? findSavedComparisonByPrograms(defaultProgramIds) : null;
     return !pairComparison && !savedComparisons[0];
   });
   const [formatMenu, setFormatMenu] = useState(null);
   const [lastTextSelection, setLastTextSelection] = useState(null);
   const leftProgram = programs.find((program) => program.id === draft.leftProgramId);
   const rightProgram = programs.find((program) => program.id === draft.rightProgramId);
+  const comparisonProgramIds = getComparisonProgramIds(draft).length >= 2
+    ? getComparisonProgramIds(draft)
+    : [draft.leftProgramId, draft.rightProgramId].filter(Boolean);
+  const comparisonPrograms = comparisonProgramIds
+    .map((programId) => programs.find((program) => program.id === programId))
+    .filter(Boolean);
+  const comparisonProgramSteps = Object.fromEntries(comparisonPrograms.map((program) => [program.id, program.steps ?? []]));
   const leftSteps = leftProgram?.steps ?? [];
   const rightSteps = rightProgram?.steps ?? [];
   const stepMatches = draft.stepMatches ?? [];
@@ -1377,6 +1566,18 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
   const updateDraft = (field, value) => {
     setDraft((current) => ({ ...current, [field]: value }));
   };
+  const updateCompareProgram = (side, programId) => {
+    setDraft((current) => {
+      if (side === 'leftProgramId') {
+        const nextRightProgramId = programId === current.rightProgramId
+          ? programs.find((program) => program.id !== programId)?.id ?? ''
+          : current.rightProgramId;
+        return { ...current, leftProgramId: programId, rightProgramId: nextRightProgramId, programIds: [programId, nextRightProgramId].filter(Boolean) };
+      }
+      if (programId === current.leftProgramId) return current;
+      return { ...current, rightProgramId: programId, programIds: [current.leftProgramId, programId].filter(Boolean) };
+    });
+  };
   const startNewComparison = () => {
     const nextDraft = createEmptyDraft();
     setDraft(nextDraft);
@@ -1388,7 +1589,8 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
     if (!selected) return;
     setDraft({
       ...selected,
-      stepMatches: normalizeStepMatches(selected.stepMatches),
+      programIds: getComparisonProgramIds(selected),
+      stepMatches: normalizeStepMatches(selected.stepMatches, selected),
       note: selected.note ?? '',
       title: selected.title ?? ''
     });
@@ -1396,18 +1598,22 @@ 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);
+    const nextProgramIds = comparisonProgramIds.length >= 2 ? comparisonProgramIds : [draft.leftProgramId, draft.rightProgramId];
+    const nextComparisonId = createComparisonId(nextProgramIds);
     onComparisonSave({
       ...draft,
       id: nextComparisonId,
+      programIds: nextProgramIds,
+      leftProgramId: nextProgramIds[0],
+      rightProgramId: nextProgramIds[1],
       title: draft.title ?? '',
-      stepMatches: normalizeStepMatches(draft.stepMatches).filter(
-        (match) => match.reason?.trim() || match.leftStepIndex !== '' || match.rightStepIndex !== ''
+      stepMatches: normalizeStepMatches(draft.stepMatches, draft).filter(
+        (match) => match.reason?.trim() || Object.values(match.stepIndexes ?? {}).some((value) => value !== '')
       ),
       note: draft.note ?? '',
       updatedAt: new Date().toISOString()
     });
-    setDraft((current) => ({ ...current, id: nextComparisonId }));
+    setDraft((current) => ({ ...current, id: nextComparisonId, programIds: nextProgramIds }));
     setLoadTargetId(nextComparisonId);
     setIsCompareEditing(false);
   };
@@ -1422,16 +1628,26 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
   const addComparisonRow = () => {
     setDraft((current) => {
       const currentMatches = current.stepMatches ?? [];
-      const usedLeftIndexes = new Set(currentMatches.map((match) => String(match.leftStepIndex ?? '')).filter(Boolean));
-      const usedRightIndexes = new Set(currentMatches.map((match) => String(match.rightStepIndex ?? '')).filter(Boolean));
+      const currentProgramIds = getComparisonProgramIds(current).length >= 2
+        ? getComparisonProgramIds(current)
+        : [current.leftProgramId, current.rightProgramId].filter(Boolean);
+      const nextStepIndexes = Object.fromEntries(currentProgramIds.map((programId) => {
+        const program = programs.find((item) => item.id === programId);
+        const steps = program?.steps ?? [];
+        const usedIndexes = new Set(currentMatches.map((match) => String(match.stepIndexes?.[programId] ?? '')).filter(Boolean));
+        return [programId, getNextStepIndex(steps, usedIndexes)];
+      }));
+      const leftStepIndex = nextStepIndexes[current.leftProgramId] ?? '';
+      const rightStepIndex = nextStepIndexes[current.rightProgramId] ?? '';
       return {
         ...current,
         stepMatches: [
           ...currentMatches,
           {
             id: `match-${Date.now()}-${currentMatches.length}`,
-            leftStepIndex: getNextStepIndex(leftSteps, usedLeftIndexes),
-            rightStepIndex: getNextStepIndex(rightSteps, usedRightIndexes),
+            leftStepIndex,
+            rightStepIndex,
+            stepIndexes: nextStepIndexes,
             reason: ''
           }
         ]
@@ -1455,10 +1671,28 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
       };
     });
   };
+  const updateComparisonProgramStep = (matchId, programId, value) => {
+    setDraft((current) => ({
+      ...current,
+      stepMatches: (current.stepMatches ?? []).map((match) => {
+        if (match.id !== matchId) return match;
+        const nextMatch = {
+          ...match,
+          stepIndexes: {
+            ...(match.stepIndexes ?? {}),
+            [programId]: value
+          }
+        };
+        if (programId === current.leftProgramId) nextMatch.leftStepIndex = value;
+        if (programId === current.rightProgramId) nextMatch.rightStepIndex = value;
+        return nextMatch;
+      })
+    }));
+  };
   const getStepLabel = (step, index) => `${index + 1}. ${step?.title ?? '-'}`;
   const getProgramName = (programId) => programs.find((program) => program.id === programId)?.name ?? programId;
   const getComparisonTitle = (comparison) =>
-    comparison.title?.trim() || `${getProgramName(comparison.leftProgramId)} ↔ ${getProgramName(comparison.rightProgramId)}`;
+    comparison.title?.trim() || `${getComparisonProgramIds(comparison).map(getProgramName).join(' ↔ ')} 비교`;
   const getComparisonMemoCount = (comparison) =>
     (comparison.stepMatches ?? []).filter((match) => match.reason?.trim()).length;
   const stripFormatTags = (text = '') => text.replace(/\[(red|redbold|blue|bold|mark)\]([\s\S]*?)\[\/\1\]/g, '$2').trim();
@@ -1752,15 +1986,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                 <span className="text-[12px] font-black text-slate-500">비교 프로그램 A</span>
                 <select
                   value={draft.leftProgramId}
-                  onChange={(event) => {
-                    const nextProgramId = event.target.value;
-                    setDraft((current) => {
-                      const nextRightProgramId = nextProgramId === current.rightProgramId
-                        ? programs.find((program) => program.id !== nextProgramId)?.id ?? ''
-                        : current.rightProgramId;
-                      return { ...current, leftProgramId: nextProgramId, rightProgramId: nextRightProgramId };
-                    });
-                  }}
+                  onChange={(event) => updateCompareProgram('leftProgramId', event.target.value)}
                   className="mt-1 w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-extrabold text-slate-800 outline-none focus:border-blue-400"
                 >
                   {programs.map((program) => (
@@ -1772,7 +1998,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                 <span className="text-[12px] font-black text-slate-500">비교 프로그램 B</span>
                 <select
                   value={draft.rightProgramId}
-                  onChange={(event) => updateDraft('rightProgramId', event.target.value)}
+                  onChange={(event) => updateCompareProgram('rightProgramId', event.target.value)}
                   className="mt-1 w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-extrabold text-slate-800 outline-none focus:border-blue-400"
                 >
                   {programs.map((program) => (
@@ -1781,12 +2007,44 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                 </select>
               </label>
             </div>
+            {initialGroupProgramIds.length > 2 && (
+              <div className="mt-3 rounded-2xl bg-violet-50/70 p-3 ring-1 ring-violet-100">
+                <p className="text-[11px] font-black text-violet-700">같은 비교 프로그램 묶음</p>
+                <div className="mt-2 flex flex-wrap gap-1.5">
+                  {initialGroupProgramIds.map((programId) => {
+                    const program = programs.find((item) => item.id === programId);
+                    if (!program) return null;
+                    const isSelected = draft.leftProgramId === programId || draft.rightProgramId === programId;
+                    return (
+                      <button
+                        key={programId}
+                        type="button"
+                        onClick={() => {
+                          if (isSelected) return;
+                          updateCompareProgram('rightProgramId', programId);
+                        }}
+                        className={`rounded-full px-3 py-1.5 text-[11px] font-black ring-1 transition ${
+                          isSelected
+                            ? 'bg-violet-600 text-white ring-violet-600'
+                            : 'bg-white text-violet-700 ring-violet-100 hover:bg-violet-100'
+                        }`}
+                      >
+                        {program.name}
+                      </button>
+                    );
+                  })}
+                </div>
+                <p className="mt-2 text-[11px] font-bold text-slate-500">
+                  묶음 안 프로그램이 3개 이상이면 비교표에 모두 함께 표시됩니다.
+                </p>
+              </div>
+            )}
           </div>
           ) : (
             <div className="rounded-3xl bg-white p-5 ring-1 ring-slate-100">
               <p className="text-[12px] font-black uppercase tracking-wide text-blue-700">비교 보고서</p>
               <h3 className="mt-1 text-xl font-black text-slate-950">
-                {draft.title?.trim() || `${leftProgram?.name ?? '-'} ↔ ${rightProgram?.name ?? '-'} 비교`}
+                {draft.title?.trim() || `${comparisonPrograms.map((program) => program.name).join(' ↔ ')} 비교`}
               </h3>
               <p className="mt-2 text-sm font-bold text-slate-500">
                 두 프로그램의 동일/연계 스텝에서 사내 한계와 상용 프로그램 활용 사유를 정리합니다.
@@ -1794,9 +2052,15 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
             </div>
           )}
 
-          <div className="mt-4 grid grid-cols-2 gap-4">
-            {renderProgramSummary(leftProgram)}
-            {renderProgramSummary(rightProgram)}
+          <div
+            className="mt-4 grid gap-4 overflow-x-auto pb-1"
+            style={{ gridTemplateColumns: `repeat(${Math.max(2, comparisonPrograms.length)}, minmax(220px, 1fr))` }}
+          >
+            {comparisonPrograms.map((program) => (
+              <div key={program.id}>
+                {renderProgramSummary(program)}
+              </div>
+            ))}
           </div>
 
           <div className="mt-4 rounded-3xl bg-white p-4 ring-1 ring-slate-100">
@@ -1804,7 +2068,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
               <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 && (
@@ -1824,51 +2088,72 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                   {isCompareEditing ? '비교 행을 추가해서 좌우 스텝을 선택하세요.' : '작성된 비교 행이 없습니다.'}
                 </div>
               ) : (
-                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={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">
-                        <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>
-                        {leftStep?.note && (
-                          <p className="mt-2 whitespace-pre-line text-[11px] font-bold leading-5 text-slate-500">{leftStep.note}</p>
-                        )}
-                      </div>
-                      {isCompareEditing ? (
-                        <label className="block">
-                          <span className="flex items-center justify-between gap-2">
+	                comparisonRows.map((match, rowIndex) => {
+	                  return (
+	                    <div
+	                      key={match.id}
+	                      className="grid gap-3 overflow-x-auto rounded-2xl border border-slate-100 bg-slate-50/80 p-3"
+	                      style={{ gridTemplateColumns: `${comparisonPrograms.map(() => 'minmax(190px, 1fr)').join(' ')} minmax(230px, 1.25fr)` }}
+	                    >
+	                      {comparisonPrograms.map((program, programIndex) => {
+	                        const steps = comparisonProgramSteps[program.id] ?? [];
+	                        const selectedStepIndex = match.stepIndexes?.[program.id] !== undefined
+	                          ? String(match.stepIndexes[program.id])
+	                          : program.id === draft.leftProgramId
+	                            ? String(match.leftStepIndex ?? '')
+	                            : program.id === draft.rightProgramId
+	                              ? String(match.rightStepIndex ?? '')
+	                              : '';
+	                        const stepIndexNumber = selectedStepIndex === '' ? -1 : Number(selectedStepIndex);
+	                        const step = steps[stepIndexNumber];
+	                        const toneClass = programIndex === 0
+	                          ? 'bg-amber-50/70 ring-amber-100'
+	                          : programIndex === 1
+	                            ? 'bg-blue-50/70 ring-blue-100'
+	                            : 'bg-violet-50/70 ring-violet-100';
+	                        const labelClass = programIndex === 0
+	                          ? 'text-amber-700'
+	                          : programIndex === 1
+	                            ? 'text-blue-700'
+	                            : 'text-violet-700';
+	                        return (
+	                          <div key={program.id} className={`rounded-2xl p-3 ring-1 ${toneClass}`}>
+	                            <div className="flex items-start justify-between gap-2">
+	                              <span className={`text-[11px] font-black ${labelClass}`}>{program.name} 스텝</span>
+	                              <span className={`rounded-full bg-white/75 px-2 py-0.5 text-[10px] font-black ring-1 ${labelClass}`}>
+	                                #{rowIndex + 1}
+	                              </span>
+	                            </div>
+	                            {isCompareEditing ? (
+	                              <select
+	                                value={selectedStepIndex}
+	                                onChange={(event) => updateComparisonProgramStep(match.id, program.id, event.target.value)}
+	                                className="mt-2 w-full rounded-xl border border-white bg-white px-3 py-2 text-[12px] font-black text-slate-800 outline-none focus:border-blue-300"
+	                              >
+	                                <option value="">스텝 선택</option>
+	                                {steps.map((item, stepIndex) => (
+	                                  <option key={item.id ?? stepIndex} value={String(stepIndex)}>
+	                                    {getStepLabel(item, stepIndex)}
+	                                  </option>
+	                                ))}
+	                              </select>
+	                            ) : (
+	                              <h4 className="mt-1 text-sm font-black text-slate-950">
+	                                {step ? getStepLabel(step, stepIndexNumber) : '선택된 스텝 없음'}
+	                              </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-white/60">
+	                              {step?.feature || '해당 스텝 없음'}
+	                            </p>
+	                            {step?.note && (
+	                              <p className="mt-2 whitespace-pre-line text-[11px] font-bold leading-5 text-slate-500">{step.note}</p>
+	                            )}
+	                          </div>
+	                        );
+	                      })}
+	                      {isCompareEditing ? (
+	                        <label className="block">
+	                          <span className="flex items-center justify-between gap-2">
                             <span className="text-[11px] font-black text-slate-700">안 되는 기능 / 상용 사용 이유</span>
                             <button
                               type="button"
@@ -1899,38 +2184,11 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                           <span className="text-[11px] font-black text-slate-500">상용 활용 사유</span>
                           <p className="mt-2 whitespace-pre-line text-sm font-bold leading-6 text-slate-800">
                             {renderFormattedText(match.reason, '작성된 비교 내용이 없습니다.')}
-                          </p>
-                        </div>
-                      )}
-                      <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>
-                        {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>
-                        {rightStep?.note && (
-                          <p className="mt-2 whitespace-pre-line text-[11px] font-bold leading-5 text-slate-500">{rightStep.note}</p>
-                        )}
-                      </div>
-                    </div>
-                  );
+	                          </p>
+	                        </div>
+	                      )}
+	                    </div>
+	                  );
                 })
               )}
             </div>
@@ -2023,11 +2281,13 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
 
 function RelationTreePanel({
   programs,
+  referencePrograms = [],
   onProgramClick,
   onOpenComparePair,
   onRelationSelect,
   onRelationReset,
   selectedRelationId,
+  selectedRelationIds = [],
   searchedRelationIds = [],
   stepSearchQuery = '',
   onStepSearchChange,
@@ -2125,6 +2385,7 @@ function RelationTreePanel({
   });
   const miniNodeWidth = fullPage ? 128 : 108;
   const miniNodeHeight = fullPage ? 38 : 34;
+  const satelliteNodeHeight = fullPage ? 22 : 18;
   const miniColumnGap = fullPage ? 42 : 14;
   const miniRowGap = fullPage ? 96 : 72;
   const miniPadding = 34;
@@ -2154,6 +2415,38 @@ function RelationTreePanel({
       ]);
     })
   );
+  const auxiliarySatellites = Object.entries(
+    referencePrograms.reduce((groups, program) => {
+      normalizeAuxiliaryTargets(program).forEach((target) => {
+        const alreadyAdded = groups[target.programId]?.some((item) => item.id === program.id);
+        if (!alreadyAdded) {
+          groups[target.programId] = [...(groups[target.programId] ?? []), program];
+        }
+      });
+      return groups;
+    }, {})
+  ).flatMap(([targetId, satellites]) => {
+    const targetPosition = miniNodePositions[targetId];
+    if (!targetPosition) return [];
+    return satellites.map((program, index) => {
+      const satelliteNodeWidth = Math.min(fullPage ? 110 : 92, Math.max(fullPage ? 34 : 28, (program.name?.length ?? 0) * (fullPage ? 7 : 6.2) + 12));
+      const baseX = targetPosition.x + miniNodeWidth - satelliteNodeWidth / 2;
+      const y = Math.max(
+        8,
+        Math.min(
+          miniGraphHeight - satelliteNodeHeight - 8,
+          targetPosition.y - satelliteNodeHeight / 2 + index * (satelliteNodeHeight + 3)
+        )
+      );
+      return {
+        program,
+        targetId,
+        estimatedWidth: satelliteNodeWidth,
+        x: Math.max(8, Math.min(miniGraphWidth - satelliteNodeWidth - 8, baseX)),
+        y
+      };
+    });
+  });
   const mergeGroupBoxes = Object.entries(groupMap)
     .map(([groupKey, groupPrograms]) => {
       const positionedPrograms = groupPrograms
@@ -2328,14 +2621,16 @@ function RelationTreePanel({
   };
 
   return (
-    <aside className={`${fullPage ? 'h-screen overflow-hidden rounded-none border-0 bg-white/80 p-3' : 'sticky top-5 max-h-[calc(100vh-40px)] overflow-y-auto overflow-x-hidden rounded-[26px] border border-white/75 bg-white/75 p-3.5 shadow-sm'} backdrop-blur transition-[width] duration-300`}>
+    <aside className={`${fullPage ? 'h-screen overflow-hidden rounded-none border-0 bg-white/80 p-3' : 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden rounded-[26px] border border-white/75 bg-white/75 p-3.5 shadow-sm'} backdrop-blur transition-[width] duration-300`}>
       <div className="mb-4 flex items-start justify-between gap-3">
         <div>
           <p className="text-[11px] font-black uppercase tracking-wide text-blue-700">Program Map</p>
           <h2 className={`${fullPage ? 'text-2xl' : 'text-lg'} mt-1 font-black text-slate-950`}>프로그램 연결</h2>
-          <p className="mt-1 text-xs font-semibold leading-5 text-slate-500">
-            {fullPage ? '연결 관계를 큰 화면에서 확인합니다.' : '필요할 때 연결도 영역을 새창으로 크게 펼칩니다.'}
-          </p>
+          {fullPage && (
+            <p className="mt-1 text-xs font-semibold leading-5 text-slate-500">
+              연결 관계를 큰 화면에서 확인합니다.
+            </p>
+          )}
         </div>
         {!fullPage && (
           <button
@@ -2349,10 +2644,31 @@ function RelationTreePanel({
           </button>
         )}
       </div>
+      {!fullPage && onStepSearchChange && (
+        <div className="mb-2 rounded-2xl bg-white/85 p-2 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>
+        </div>
+      )}
       <div className="rounded-3xl bg-white/70 p-2 shadow-inner ring-1 ring-slate-100">
-        <div className="mb-2 flex items-center justify-between gap-2 px-1">
-          <div className="flex min-w-0 items-center gap-1.5">
-            <span className="flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-1 text-[10px] font-black text-emerald-700 ring-1 ring-emerald-100">
+	        <div className="mb-2 flex items-center justify-between gap-2 px-1">
+	          <div className="flex min-w-0 items-center gap-1.5">
+	            <span className="flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-1 text-[10px] font-black text-emerald-700 ring-1 ring-emerald-100">
               <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
               사내
             </span>
@@ -2360,17 +2676,22 @@ function RelationTreePanel({
               <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
               상용
             </span>
-            {selectedRelationId && (
-              <button
-                type="button"
+	            {selectedRelationIds.length > 0 && (
+	              <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>
+	                선택 해제
+	              </button>
+	            )}
+	          </div>
+	          {fullPage && (
+	            <span className="ml-auto rounded-full bg-slate-50 px-2 py-1 text-[10px] font-black text-slate-500 ring-1 ring-slate-100">
+	              Shift + 화살표 선택 시 다중선택
+	            </span>
+	          )}
           {!fullPage && (
             <div className="flex items-center justify-between gap-2">
               <div className="flex shrink-0 items-center gap-1">
@@ -2412,7 +2733,7 @@ function RelationTreePanel({
                   onClick={() => {
                     const [leftProgramId, rightProgramId] = box.programIds;
                     if (leftProgramId && rightProgramId) {
-                      onOpenComparePair?.({ leftProgramId, rightProgramId });
+                      onOpenComparePair?.({ leftProgramId, rightProgramId, programIds: box.programIds });
                     }
                   }}
                   className="absolute z-20 rounded-[18px] border-2 border-dashed border-violet-300 bg-violet-50/25 text-left transition hover:border-violet-400 hover:bg-violet-50/45"
@@ -2428,6 +2749,27 @@ function RelationTreePanel({
                   </span>
                 </button>
               ))}
+              {auxiliarySatellites.map(({ program, targetId, x, y }) => (
+                  <button
+                    key={`${targetId}-${program.id}`}
+                    type="button"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onProgramClick?.(program.id);
+                    }}
+                    title={`${program.name} · ${program.description}`}
+                    className="absolute z-[58] overflow-hidden rounded-lg border border-pink-200 bg-pink-50/95 px-0.5 py-0.5 text-left text-pink-900 shadow-sm ring-1 ring-pink-100 transition hover:-translate-y-0.5 hover:bg-pink-100 hover:shadow-md"
+	                    style={{
+	                      left: x,
+	                      top: y,
+	                      minHeight: satelliteNodeHeight
+	                    }}
+	                  >
+                    <span className="block whitespace-nowrap text-[8.5px] font-black leading-4">
+                      {program.name}
+                    </span>
+                  </button>
+              ))}
               <svg
                 className="pointer-events-none absolute inset-0 z-40 h-full w-full overflow-visible"
                 viewBox={`0 0 ${miniGraphWidth} ${miniGraphHeight}`}
@@ -2453,7 +2795,7 @@ function RelationTreePanel({
                   if (!from || !to) return null;
                   const selectedToId = groupRepresentativeMap[relation.toGroupKey] ?? relation.to.id;
                   const relationId = `${relation.from.id}->${selectedToId}`;
-                  const isSelectedRelation = selectedRelationId === relationId;
+	                  const isSelectedRelation = selectedRelationIds.includes(relationId);
                   const isSearchedRelation = searchedRelationIds.includes(relationId);
                   const toGroupBox = mergeGroupBoxMap[relation.toGroupKey];
                   const fromLevel = levelMap[relation.from.id] ?? 0;
@@ -2489,10 +2831,10 @@ function RelationTreePanel({
                     : Math.abs(fromCenterX - toCenterX) < 6
                       ? `M ${fromCenterX} ${startY} L ${toCenterX} ${endY - 8}`
                       : `M ${fromCenterX} ${startY} C ${fromCenterX} ${midY}, ${toCenterX} ${midY}, ${toCenterX} ${endY - 8}`;
-                  const handleRelationClick = (event) => {
-                    event.stopPropagation();
-                    onRelationSelect?.(relation.from.id, selectedToId);
-                  };
+	                  const handleRelationClick = (event) => {
+	                    event.stopPropagation();
+	                    onRelationSelect?.(relation.from.id, selectedToId, event.shiftKey);
+	                  };
                   const stopRelationDrag = (event) => {
                     event.stopPropagation();
                   };
@@ -2564,32 +2906,17 @@ function RelationTreePanel({
               })}
             </div>
           </div>
-        ) : (
-          <div className="rounded-2xl bg-white px-3 py-6 text-center text-xs font-bold text-slate-500 ring-1 ring-slate-100">
-            아직 연결된 프로그램이 없습니다.
-          </div>
-        )}
-        {onStepSearchChange && (
+	        ) : (
+	          <div className="rounded-2xl bg-white px-3 py-6 text-center text-xs font-bold text-slate-500 ring-1 ring-slate-100">
+	            아직 연결된 프로그램이 없습니다.
+	          </div>
+	        )}
+	        <p className="mt-2 px-1 text-[10px] font-bold text-slate-400">
+	          Shift + 화살표 선택 시 다중선택
+	        </p>
+	        {onStepSearchChange && stepSearchQuery.trim() && (
           <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">
+            <div className="space-y-2">
                 {stepSearchResult?.programPath?.length ? (
                   <>
                     <div className="rounded-2xl bg-yellow-50/70 px-3 py-2 ring-1 ring-yellow-100">
@@ -2645,7 +2972,6 @@ function RelationTreePanel({
                   <p className="text-[11px] font-bold text-slate-400">검색된 변경사항/재진입 스텝이 없습니다.</p>
                 )}
               </div>
-            )}
           </div>
         )}
       </div>
@@ -2668,7 +2994,8 @@ export default function App() {
   const [isRelationPopupOpen, setIsRelationPopupOpen] = useState(false);
   const [isComparePopupOpen, setIsComparePopupOpen] = useState(false);
   const [compareInitialPair, setCompareInitialPair] = useState(null);
-  const [selectedRelationId, setSelectedRelationId] = useState('');
+  const [selectedRelationIds, setSelectedRelationIds] = useState([]);
+  const selectedRelationId = selectedRelationIds[selectedRelationIds.length - 1] ?? '';
   const [stepSearchQuery, setStepSearchQuery] = useState('');
   const [selectedStepSearchMatchId, setSelectedStepSearchMatchId] = useState('');
   const [sidebarWidth, setSidebarWidth] = useState(420);
@@ -2687,8 +3014,11 @@ export default function App() {
       format: content.cheonjiin.format,
       engine: content.cheonjiin.engine ?? '',
       programType: getProgramType(content.cheonjiin.programType),
+      programRole: getProgramRole(content.cheonjiin.programRole),
       predecessors: content.cheonjiin.predecessors ?? [],
       successors: content.cheonjiin.successors ?? [],
+      auxiliaryTargetIds: content.cheonjiin.auxiliaryTargetIds ?? [],
+      auxiliaryTargets: normalizeAuxiliaryTargets(content.cheonjiin),
       mergeGroup: content.cheonjiin.mergeGroup ?? '',
         accent: {
         iconBg: 'bg-blue-50',
@@ -2706,8 +3036,11 @@ export default function App() {
       format: content.wayPrimal.format,
       engine: content.wayPrimal.engine ?? '',
       programType: getProgramType(content.wayPrimal.programType),
+      programRole: getProgramRole(content.wayPrimal.programRole),
       predecessors: content.wayPrimal.predecessors ?? [],
       successors: content.wayPrimal.successors ?? [],
+      auxiliaryTargetIds: content.wayPrimal.auxiliaryTargetIds ?? [],
+      auxiliaryTargets: normalizeAuxiliaryTargets(content.wayPrimal),
       mergeGroup: content.wayPrimal.mergeGroup ?? '',
       accent: {
         iconBg: 'bg-indigo-50',
@@ -2725,8 +3058,11 @@ export default function App() {
       format: program.format,
       engine: program.engine ?? '',
       programType: getProgramType(program.programType),
+      programRole: getProgramRole(program.programRole),
       predecessors: program.predecessors ?? [],
       successors: program.successors ?? [],
+      auxiliaryTargetIds: program.auxiliaryTargetIds ?? [],
+      auxiliaryTargets: normalizeAuxiliaryTargets(program),
       mergeGroup: program.mergeGroup ?? '',
       accent: {
         iconBg: 'bg-blue-50',
@@ -2736,6 +3072,21 @@ export default function App() {
       }
     }))
   ];
+  const flowPrograms = programs.filter((program) => getProgramRole(program.programRole) === 'flow');
+  const referencePrograms = programs.filter((program) => getProgramRole(program.programRole) === 'reference');
+  const auxiliaryProgramsByTargetId = referencePrograms.reduce((groups, program) => {
+    normalizeAuxiliaryTargets(program).filter((target) => !target.stepId).forEach((target) => {
+      groups[target.programId] = [...(groups[target.programId] ?? []), program];
+    });
+    return groups;
+  }, {});
+  const auxiliaryProgramsByStepTarget = referencePrograms.reduce((groups, program) => {
+    normalizeAuxiliaryTargets(program).filter((target) => target.stepId).forEach((target) => {
+      const key = `${target.programId}::${target.stepId}`;
+      groups[key] = [...(groups[key] ?? []), program];
+    });
+    return groups;
+  }, {});
   const getStoredProgram = (programId) => (
     programId === 'cheonjiin'
       ? content.cheonjiin
@@ -2751,11 +3102,40 @@ export default function App() {
     if (!representatives[groupKey]) representatives[groupKey] = program.id;
     return representatives;
   }, {});
+  const groupProgramsByKey = programs.reduce((groups, program) => {
+    const groupKey = getProgramGroupKey(program);
+    groups[groupKey] = groups[groupKey] ?? [];
+    groups[groupKey].push(program);
+    return groups;
+  }, {});
   const getRelationId = (fromId, toId) => `${fromId}->${toId}`;
+  const selectedRelationInfos = selectedRelationIds
+    .map((relationId) => {
+        const [fromId, toId] = relationId.split('->');
+        const fromProgram = programById[fromId];
+        const toProgram = programById[toId];
+        if (!fromProgram || !toProgram) return null;
+        const toGroupKey = getProgramGroupKey(toProgram);
+        return {
+          fromProgram,
+          toPrograms: groupProgramsByKey[toGroupKey] ?? [toProgram],
+          relationProgramIds: new Set([fromProgram.id, ...(groupProgramsByKey[toGroupKey] ?? [toProgram]).map((program) => program.id)])
+        };
+      })
+    .filter(Boolean);
+  const selectedRelationInfo = selectedRelationInfos[selectedRelationInfos.length - 1] ?? null;
+  const selectedRelationProgramIds = new Set(selectedRelationInfos.flatMap((info) => [...info.relationProgramIds]));
+  const shouldFilterMainByRelation = Boolean(selectedRelationInfos.length > 0 && !isEditing);
+  function shouldShowMainProgram(programId) {
+    return (
+      getProgramRole(programById[programId]?.programRole) === 'flow' &&
+      (!activeMainProgramIds || activeMainProgramIds.has(programId))
+    );
+  }
   const normalizeSearchText = (value) => String(value ?? '').trim().toLowerCase();
   const stepSearchTerm = normalizeSearchText(stepSearchQuery);
   const stepSearchMatches = stepSearchTerm
-    ? programs.flatMap((program) =>
+    ? flowPrograms.flatMap((program) =>
         buildReviewItems(program.id, program.steps, getStoredProgram(program.id)?.detailGates)
           .map((gate, gateIndex) => {
             const targetProgramId = resolveGateTargetProgramId(gate, program.id, programs);
@@ -2789,8 +3169,8 @@ export default function App() {
     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 rootPrograms = flowPrograms.filter((program) => (program.predecessors ?? []).length === 0);
+    const queue = (rootPrograms.length ? rootPrograms : flowPrograms.slice(0, 1)).map((program) => [program.id]);
     const visited = new Set();
     while (queue.length) {
       const path = queue.shift();
@@ -2805,27 +3185,42 @@ export default function App() {
     }
     return [programById[targetProgramId]].filter(Boolean);
   };
-  const searchedProgramPath = primaryStepSearchMatch ? findProgramPath(primaryStepSearchMatch.program.id) : [];
-  const searchedRelationIds = searchedProgramPath.slice(0, -1).map((program, index) => {
+	  const searchedProgramPath = primaryStepSearchMatch ? findProgramPath(primaryStepSearchMatch.program.id) : [];
+	  const searchedProgramIds = new Set(searchedProgramPath.map((program) => program.id));
+	  const shouldFilterMainBySearch = Boolean(stepSearchTerm && primaryStepSearchMatch && searchedProgramPath.length > 0 && !isEditing);
+	  const activeMainProgramIds = shouldFilterMainBySearch
+	    ? searchedProgramIds
+	    : shouldFilterMainByRelation
+	      ? selectedRelationProgramIds
+	      : null;
+	  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
-  };
+	  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 searchTargetStepIdsByProgram = primaryStepSearchMatch?.program && primaryStepSearchMatch?.step
+	    ? { [primaryStepSearchMatch.program.id]: [primaryStepSearchMatch.step.id] }
+	    : {};
+	  const stepSearchResult = {
+	    query: stepSearchQuery,
+	    matches: stepSearchMatches,
+	    program: primaryStepSearchMatch?.program,
+	    step: primaryStepSearchMatch?.step,
+	    programPath: searchedProgramPath
+	  };
+	  const visibleReferencePrograms = activeMainProgramIds
+	    ? referencePrograms.filter((program) =>
+	        normalizeAuxiliaryTargets(program).some((target) => activeMainProgramIds.has(target.programId))
+	      )
+	    : referencePrograms;
   useEffect(() => {
     if (!stepSearchTerm) {
       if (selectedStepSearchMatchId) setSelectedStepSearchMatchId('');
@@ -2840,10 +3235,10 @@ export default function App() {
     const targetName = targetPrograms.map((program) => program.name).join(' / ');
     return storedTarget?.linkLabel || `${fromProgram.name} 결과물을 ${targetName}로 연계`;
   };
-  const focusRelation = (relationId, shouldScroll = true) => {
-    setSelectedRelationId(relationId);
-    if (shouldScroll) {
-      requestAnimationFrame(() => {
+	  const focusRelation = (relationId, shouldScroll = true) => {
+	    setSelectedRelationIds(relationId ? [relationId] : []);
+	    if (shouldScroll) {
+	      requestAnimationFrame(() => {
         relationBlockRefs.current[relationId]?.scrollIntoView({
           behavior: 'smooth',
           block: 'center'
@@ -2851,7 +3246,7 @@ export default function App() {
       });
     }
   };
-  const broadcastRelationSelection = (relationId) => {
+	  const broadcastRelationSelection = (relationId) => {
     try {
       window.localStorage.setItem(selectedRelationStorageKey, createSelectionSignal(relationId));
       window.opener?.postMessage?.({ type: 'program-flow-selected-relation', relationId }, window.location.origin);
@@ -2861,12 +3256,29 @@ export default function App() {
     } catch {
       window.localStorage.setItem(selectedRelationStorageKey, createSelectionSignal(relationId));
     }
-  };
-  const selectRelation = (fromId, toId) => {
-    const relationId = getRelationId(fromId, toId);
-    focusRelation(relationId, !isRelationMapWindow);
-    broadcastRelationSelection(relationId);
-  };
+	  };
+	  const selectRelation = (fromId, toId, additive = false) => {
+	    const relationId = getRelationId(fromId, toId);
+		    if (additive) {
+		      setSelectedRelationIds((current) => {
+		        const nextIds = current.includes(relationId)
+		          ? current.filter((item) => item !== relationId)
+		          : [...current, relationId];
+		        return nextIds;
+		      });
+	      if (!isRelationMapWindow) {
+	        requestAnimationFrame(() => {
+	          relationBlockRefs.current[relationId]?.scrollIntoView({
+	            behavior: 'smooth',
+	            block: 'center'
+		          });
+		        });
+		      }
+		    } else {
+		      focusRelation(relationId, !isRelationMapWindow);
+		      broadcastRelationSelection(relationId);
+		    }
+		  };
   const resetRelationSelection = () => {
     focusRelation('', false);
     broadcastRelationSelection('');
@@ -2898,7 +3310,7 @@ export default function App() {
     const successorGroups = Object.values(
       (fromProgram.successors ?? [])
         .map((successorId) => programById[successorId])
-        .filter(Boolean)
+        .filter((program) => program && getProgramRole(program.programRole) === 'flow')
         .reduce((groups, successorProgram) => {
           const groupKey = getProgramGroupKey(successorProgram);
           groups[groupKey] = groups[groupKey] ?? {
@@ -2914,7 +3326,10 @@ export default function App() {
       const rightOrder = Math.min(...right.programs.map((program) => programOrderMap[program.id] ?? 9999));
       return leftOrder - rightOrder;
     });
-    if (successorGroups.length === 0) return null;
+	    const visibleSuccessorGroups = shouldFilterMainByRelation
+	      ? successorGroups.filter((successorGroup) => selectedRelationIds.includes(getRelationId(fromProgram.id, successorGroup.representativeId)))
+	      : successorGroups;
+    if (visibleSuccessorGroups.length === 0) return null;
     return (
       <section className="rounded-[22px] border border-slate-200/80 bg-white px-4 py-3 shadow-sm">
         <div className="mb-2 flex items-center gap-2">
@@ -2929,11 +3344,11 @@ export default function App() {
           </div>
         </div>
         <div className="grid gap-2">
-          {successorGroups.map((successorGroup) => {
+          {visibleSuccessorGroups.map((successorGroup) => {
             const toPrograms = successorGroup.programs;
             const representativeId = successorGroup.representativeId;
             const relationId = getRelationId(fromProgram.id, representativeId);
-            const isSelected = selectedRelationId === relationId;
+	            const isSelected = selectedRelationIds.includes(relationId);
             const label = getRelationLabel(fromProgram, toPrograms);
             const targetName = toPrograms.map((program) => program.name).join(' / ');
             return (
@@ -2950,7 +3365,7 @@ export default function App() {
               >
                 <button
                   type="button"
-                  onClick={() => selectRelation(fromProgram.id, representativeId)}
+	                  onClick={(event) => selectRelation(fromProgram.id, representativeId, event.shiftKey)}
                   className="flex w-full items-center gap-2 text-left"
                 >
                   <span className="rounded-full bg-white px-2 py-1 text-[11px] font-black text-slate-700 ring-1 ring-slate-200">
@@ -3374,6 +3789,117 @@ export default function App() {
     });
   };
 
+  const updateProgramMergeGroupMembers = (programId, relatedProgramId, checked) => {
+    setContent((current) => {
+      const currentPrograms = [
+        { id: 'cheonjiin', ...current.cheonjiin },
+        { id: 'wayPrimal', ...current.wayPrimal },
+        ...(current.extraPrograms ?? [])
+      ];
+      const sourceProgram = currentPrograms.find((program) => program.id === programId);
+      const relatedProgram = currentPrograms.find((program) => program.id === relatedProgramId);
+      if (!sourceProgram || !relatedProgram) return current;
+
+      if (!checked) {
+        const sourceGroup = sourceProgram.mergeGroup || sourceProgram.id;
+        const relatedGroup = relatedProgram.mergeGroup || relatedProgram.id;
+        if (sourceGroup !== relatedGroup) return current;
+
+        const removeProgramId = relatedProgram.mergeGroup
+          ? relatedProgramId
+          : sourceProgram.mergeGroup
+            ? programId
+            : relatedProgramId;
+
+        let nextContent = updateProgramRecord(current, removeProgramId, (program) => ({
+          ...program,
+          mergeGroup: ''
+        }));
+
+        const nextPrograms = [
+          { id: 'cheonjiin', ...nextContent.cheonjiin },
+          { id: 'wayPrimal', ...nextContent.wayPrimal },
+          ...(nextContent.extraPrograms ?? [])
+        ];
+        const groupCounts = nextPrograms.reduce((counts, program) => {
+          const groupKey = program.mergeGroup || program.id;
+          counts[groupKey] = (counts[groupKey] ?? 0) + 1;
+          return counts;
+        }, {});
+
+        nextPrograms
+          .filter((program) => program.mergeGroup && groupCounts[program.mergeGroup] < 2)
+          .forEach((program) => {
+            nextContent = updateProgramRecord(nextContent, program.id, (targetProgram) => ({
+              ...targetProgram,
+              mergeGroup: ''
+            }));
+          });
+
+        return nextContent;
+      }
+
+      const sourceGroup = sourceProgram.mergeGroup || sourceProgram.id;
+      const relatedGroup = relatedProgram.mergeGroup || relatedProgram.id;
+      const nextMergeGroup = sourceProgram.mergeGroup || relatedProgram.mergeGroup || sourceProgram.id;
+      return currentPrograms
+        .filter((program) => (program.mergeGroup || program.id) === sourceGroup || (program.mergeGroup || program.id) === relatedGroup)
+        .reduce((nextContent, program) => (
+          updateProgramRecord(nextContent, program.id, (targetProgram) => ({
+            ...targetProgram,
+            mergeGroup: nextMergeGroup
+          }))
+        ), current);
+    });
+  };
+
+  const updateProgramRole = (programId, role) => {
+    const nextRole = getProgramRole(role);
+    setContent((current) => {
+      let nextContent = updateProgramRecord(current, programId, (program) => ({
+        ...program,
+        programRole: nextRole,
+        predecessors: nextRole === 'reference' ? [] : (program.predecessors ?? []),
+        successors: nextRole === 'reference' ? [] : (program.successors ?? []),
+        mergeGroup: nextRole === 'reference' ? '' : (program.mergeGroup ?? ''),
+      auxiliaryTargetIds: nextRole === 'reference' ? (program.auxiliaryTargetIds ?? []) : [],
+      auxiliaryTargets: nextRole === 'reference' ? normalizeAuxiliaryTargets(program) : []
+      }));
+
+      if (nextRole === 'reference') {
+        [
+          { id: 'cheonjiin' },
+          { id: 'wayPrimal' },
+          ...(current.extraPrograms ?? [])
+        ].forEach((program) => {
+          if (program.id === programId) return;
+          nextContent = updateProgramRecord(nextContent, program.id, (targetProgram) => ({
+            ...targetProgram,
+            predecessors: (targetProgram.predecessors ?? []).filter((item) => item !== programId),
+            successors: (targetProgram.successors ?? []).filter((item) => item !== programId)
+          }));
+        });
+      }
+
+      return nextContent;
+    });
+  };
+
+  const updateAuxiliaryTargets = (programId, targetProgramId, checked, stepId = '') => {
+    setContent((current) => updateProgramRecord(current, programId, (program) => ({
+      ...program,
+      auxiliaryTargetIds: checked
+        ? [...new Set([...normalizeAuxiliaryTargets(program).map((target) => target.programId), targetProgramId])]
+        : normalizeAuxiliaryTargets(program).map((target) => target.programId).filter((item) => item !== targetProgramId),
+      auxiliaryTargets: checked
+        ? [
+            ...normalizeAuxiliaryTargets(program).filter((target) => target.programId !== targetProgramId),
+            { programId: targetProgramId, stepId }
+          ]
+        : normalizeAuxiliaryTargets(program).filter((target) => target.programId !== targetProgramId)
+    })));
+  };
+
   const updateComparison = (comparisonId, leftProgramId, rightProgramId, field, value) => {
     setContent((current) => {
       const comparisons = current.comparisons ?? [];
@@ -3463,37 +3989,42 @@ export default function App() {
     }));
   };
 
-  const addProgram = () => {
+  const addProgram = (role = 'flow') => {
     const id = `program-${Date.now()}`;
+    const programRole = getProgramRole(role);
+    const isReference = programRole === 'reference';
     setContent((current) => ({
       ...current,
       extraPrograms: [
         ...current.extraPrograms,
         {
           id,
-          name: '새 프로그램',
-          description: '새 프로그램 업무 플로우',
+          name: isReference ? '새 참고 프로그램' : '새 프로그램',
+          description: isReference ? '보조 입력 데이터를 생성합니다.' : '새 프로그램 업무 플로우',
           steps: [
             {
               id: `${id}-1`,
-              title: '1단계',
-              feature: '주요 기능 입력',
-              note: '단계 설명을 입력합니다.'
+              title: isReference ? '입력 생성' : '1단계',
+              feature: isReference ? '보조 입력 데이터 생성' : '주요 기능 입력',
+              note: isReference ? '참고 프로그램 설명을 입력합니다.' : '단계 설명을 입력합니다.'
             },
-            {
+            ...(isReference ? [] : [{
               id: `${id}-2`,
               title: '2단계',
               feature: '주요 기능 입력',
               note: '단계 설명을 입력합니다.'
-            }
+            }])
           ],
           format: '',
           engine: '',
-          deliverables: ['성과물'],
+          deliverables: [isReference ? '보조 데이터' : '성과물'],
           programType: 'internal',
+          programRole,
           programNote: '',
           predecessors: [],
           successors: [],
+          auxiliaryTargetIds: [],
+          auxiliaryTargets: [],
           mergeGroup: '',
           linkLabel: '이전 프로그램 산출물을 새 프로그램 입력으로 연계'
         }
@@ -3711,12 +4242,14 @@ export default function App() {
     return (
       <main className="min-h-screen bg-white text-slate-900">
         <RelationTreePanel
-          programs={programs}
+          programs={flowPrograms}
+          referencePrograms={referencePrograms}
           onProgramClick={selectProgramFromMap}
           onOpenComparePair={openComparePair}
           onRelationSelect={selectRelation}
           onRelationReset={resetRelationSelection}
           selectedRelationId={selectedRelationId}
+          selectedRelationIds={selectedRelationIds}
           searchedRelationIds={searchedRelationIds}
           onOpenRelationPopup={() => setIsRelationPopupOpen(true)}
           sidebarWidth={1280}
@@ -3742,130 +4275,159 @@ export default function App() {
 
   return (
     <main className="min-h-screen bg-white text-slate-900">
-      <div className="mx-auto max-w-[1760px] space-y-4 px-3 py-4">
-        <div className="sticky top-0 z-50 -mx-3 flex justify-end gap-2 border-b border-slate-100 bg-white/95 px-3 py-3 backdrop-blur">
-          {isEditing && (
-            <button
-              type="button"
-              onClick={addProgram}
-              className="flex items-center gap-2 rounded-full bg-blue-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-blue-700"
-            >
-              <Plus className="h-4 w-4" />
-              프로그램 추가
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={toggleProgramEdit}
-            className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-bold shadow-sm ${
-              isEditing
-                ? 'bg-emerald-600 text-white hover:bg-emerald-700'
-                : 'bg-blue-600 text-white hover:bg-blue-700'
-            }`}
-          >
-            {isEditing ? <Save className="h-4 w-4" /> : <Edit3 className="h-4 w-4" />}
-            {isEditing ? '수정 완료' : '프로그램 추가 및 수정'}
-          </button>
-        </div>
-
+      <div className="mx-auto max-w-[1760px] px-3 py-4">
         <div
           className="grid gap-4 xl:items-start"
           style={{ gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` }}
         >
-          <RelationTreePanel
-            programs={programs}
-            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}
-            onSidebarWidthChange={setSidebarWidth}
-          />
+          <aside className="sticky top-4 flex max-h-[calc(100vh-32px)] flex-col gap-3 overflow-hidden">
+            <div className="rounded-[22px] border border-slate-100 bg-white px-4 py-3 shadow-sm">
+              <div className="flex flex-wrap items-center gap-2">
+                <button
+                  type="button"
+                  onClick={toggleProgramEdit}
+                  className={`flex flex-1 items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-bold shadow-sm ${
+                    isEditing
+                      ? 'bg-emerald-600 text-white hover:bg-emerald-700'
+                      : 'bg-blue-600 text-white hover:bg-blue-700'
+                  }`}
+                >
+                  {isEditing ? <Save className="h-4 w-4" /> : <Edit3 className="h-4 w-4" />}
+                  {isEditing ? '수정 완료' : '프로그램 추가 및 수정'}
+                </button>
+                {isEditing && (
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => addProgram('flow')}
+                      className="flex items-center justify-center gap-1.5 rounded-full bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700"
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      업무 추가
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => addProgram('reference')}
+                      className="flex items-center justify-center gap-1.5 rounded-full bg-slate-700 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-slate-800"
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                      참고 추가
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+            <RelationTreePanel
+              programs={flowPrograms}
+              referencePrograms={referencePrograms}
+              onProgramClick={selectProgramFromMap}
+              onOpenComparePair={openComparePair}
+              onRelationSelect={selectRelation}
+              onRelationReset={resetRelationSelection}
+              selectedRelationId={selectedRelationId}
+              selectedRelationIds={selectedRelationIds}
+              searchedRelationIds={searchedRelationIds}
+              stepSearchQuery={stepSearchQuery}
+              onStepSearchChange={setStepSearchQuery}
+              stepSearchResult={stepSearchResult}
+              selectedSearchMatchId={primaryStepSearchMatch?.id ?? ''}
+              onSearchMatchSelect={setSelectedStepSearchMatchId}
+              onOpenRelationPopup={() => setIsRelationPopupOpen(true)}
+              onOpenMapWindow={openRelationMapWindow}
+              sidebarWidth={sidebarWidth}
+              onSidebarWidthChange={setSidebarWidth}
+            />
+          </aside>
 
           <section className="min-w-0 space-y-5">
 
-        <FlowRow
-          label={content.cheonjiin.name}
-          description={content.cheonjiin.description}
-          programNote={content.cheonjiin.programNote ?? ''}
-          steps={editableCheonjiinFlow}
-          onLabelClick={() => openProgramWindow('cheonjiin')}
-          activeStep={getMainActiveStep('cheonjiin')}
-          isEditing={isEditing}
-          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}
-          onFormatChange={(value) => updateFormat('cheonjiin', value)}
-          engine={content.cheonjiin.engine ?? ''}
-          onEngineChange={(value) => updateProgramTitle('cheonjiin', 'engine', value)}
-          deliverables={content.cheonjiin.deliverables}
-          onDeliverableChange={(index, value) => updateProgramDeliverable('cheonjiin', index, value)}
-          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-blue-50',
-            iconText: 'text-blue-700',
-            labelText: 'text-blue-700',
-            arrowText: 'text-blue-600'
-          }}
-        />
-        {renderRelationBlock(programById.cheonjiin)}
+        {shouldShowMainProgram('cheonjiin') && (
+          <>
+            <FlowRow
+              label={content.cheonjiin.name}
+              description={content.cheonjiin.description}
+              programNote={content.cheonjiin.programNote ?? ''}
+              steps={editableCheonjiinFlow}
+              onLabelClick={() => openProgramWindow('cheonjiin')}
+              activeStep={getMainActiveStep('cheonjiin')}
+              isEditing={isEditing}
+              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}
+              onFormatChange={(value) => updateFormat('cheonjiin', value)}
+              engine={content.cheonjiin.engine ?? ''}
+              onEngineChange={(value) => updateProgramTitle('cheonjiin', 'engine', value)}
+              deliverables={content.cheonjiin.deliverables}
+              onDeliverableChange={(index, value) => updateProgramDeliverable('cheonjiin', index, value)}
+              onAddStep={() => addStep('cheonjiin')}
+              onRemoveStep={(index) => removeStep('cheonjiin', index)}
+              onMoveStep={(index, nextIndex) => moveStep('cheonjiin', index, nextIndex)}
+              searchMatchedStepIds={searchedStepIdsByProgram.cheonjiin ?? []}
+              searchTargetStepIds={searchTargetStepIdsByProgram.cheonjiin ?? []}
+              auxiliaryPrograms={auxiliaryProgramsByTargetId.cheonjiin ?? []}
+              stepAuxiliaryProgramsByStepId={Object.fromEntries(editableCheonjiinFlow.map((step) => [step.id, auxiliaryProgramsByStepTarget[`cheonjiin::${step.id}`] ?? []]))}
+              rowRef={(node) => {
+                programSectionRefs.current.cheonjiin = node;
+              }}
+              accent={{
+                iconBg: 'bg-blue-50',
+                iconText: 'text-blue-700',
+                labelText: 'text-blue-700',
+                arrowText: 'text-blue-600'
+              }}
+            />
+            {renderRelationBlock(programById.cheonjiin)}
+          </>
+        )}
 
-        <FlowRow
-          label={content.wayPrimal.name}
-          description={content.wayPrimal.description}
-          programNote={content.wayPrimal.programNote ?? ''}
-          steps={editableWayPrimalFlow}
-          onLabelClick={() => openProgramWindow('wayPrimal')}
-          activeStep={getMainActiveStep('wayPrimal')}
-          isEditing={isEditing}
-          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}
-          onFormatChange={(value) => updateFormat('wayPrimal', value)}
-          engine={content.wayPrimal.engine ?? ''}
-          onEngineChange={(value) => updateProgramTitle('wayPrimal', 'engine', value)}
-          deliverables={content.wayPrimal.deliverables ?? []}
-          onDeliverableChange={(index, value) => updateProgramDeliverable('wayPrimal', index, value)}
-          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-blue-700',
-            labelText: 'text-blue-700',
-            arrowText: 'text-blue-600'
-          }}
-        />
-        {renderRelationBlock(programById.wayPrimal)}
+        {shouldShowMainProgram('wayPrimal') && (
+          <>
+            <FlowRow
+              label={content.wayPrimal.name}
+              description={content.wayPrimal.description}
+              programNote={content.wayPrimal.programNote ?? ''}
+              steps={editableWayPrimalFlow}
+              onLabelClick={() => openProgramWindow('wayPrimal')}
+              activeStep={getMainActiveStep('wayPrimal')}
+              isEditing={isEditing}
+              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}
+              onFormatChange={(value) => updateFormat('wayPrimal', value)}
+              engine={content.wayPrimal.engine ?? ''}
+              onEngineChange={(value) => updateProgramTitle('wayPrimal', 'engine', value)}
+              deliverables={content.wayPrimal.deliverables ?? []}
+              onDeliverableChange={(index, value) => updateProgramDeliverable('wayPrimal', index, value)}
+              onAddStep={() => addStep('wayPrimal')}
+              onRemoveStep={(index) => removeStep('wayPrimal', index)}
+              onMoveStep={(index, nextIndex) => moveStep('wayPrimal', index, nextIndex)}
+              searchMatchedStepIds={searchedStepIdsByProgram.wayPrimal ?? []}
+              searchTargetStepIds={searchTargetStepIdsByProgram.wayPrimal ?? []}
+              auxiliaryPrograms={auxiliaryProgramsByTargetId.wayPrimal ?? []}
+              stepAuxiliaryProgramsByStepId={Object.fromEntries(editableWayPrimalFlow.map((step) => [step.id, auxiliaryProgramsByStepTarget[`wayPrimal::${step.id}`] ?? []]))}
+              rowRef={(node) => {
+                programSectionRefs.current.wayPrimal = node;
+              }}
+              accent={{
+                iconBg: 'bg-indigo-50',
+                iconText: 'text-blue-700',
+                labelText: 'text-blue-700',
+                arrowText: 'text-blue-600'
+              }}
+            />
+            {renderRelationBlock(programById.wayPrimal)}
+          </>
+        )}
 
-        {content.extraPrograms.map((program, programIndex) => (
+        {content.extraPrograms.map((program, programIndex) => shouldShowMainProgram(program.id) && (
           <React.Fragment key={program.id}>
             {isEditing && (
               <section className="rounded-[24px] border border-white/70 bg-white/70 px-5 py-4 shadow-sm backdrop-blur">
@@ -3944,6 +4506,9 @@ export default function App() {
               onMoveStep={(index, nextIndex) => moveStep(program.id, index, nextIndex)}
               onProgramDelete={() => removeProgram(programIndex)}
               searchMatchedStepIds={searchedStepIdsByProgram[program.id] ?? []}
+              searchTargetStepIds={searchTargetStepIdsByProgram[program.id] ?? []}
+              auxiliaryPrograms={auxiliaryProgramsByTargetId[program.id] ?? []}
+              stepAuxiliaryProgramsByStepId={Object.fromEntries(normalizeProgramSteps(program).map((step) => [step.id, auxiliaryProgramsByStepTarget[`${program.id}::${step.id}`] ?? []]))}
               rowRef={(node) => {
                 programSectionRefs.current[program.id] = node;
               }}
@@ -3959,6 +4524,102 @@ export default function App() {
           </React.Fragment>
         ))}
 
+        {visibleReferencePrograms.length > 0 && (
+          <section className="rounded-[28px] border border-slate-200 bg-white p-4 shadow-[0_18px_50px_rgba(15,23,42,0.06)]">
+            <div className="mb-3">
+              <p className="text-[11px] font-black uppercase tracking-wide text-slate-400">Reference Programs</p>
+              <h2 className="mt-1 text-lg font-black text-slate-950">참고 프로그램</h2>
+              <p className="mt-1 text-xs font-bold text-slate-500">
+                업무 플로우에는 포함되지 않고, 필요한 프로그램 카드에 보조 입력으로 표시됩니다.
+              </p>
+            </div>
+            <div className="grid gap-2 md:grid-cols-2">
+              {visibleReferencePrograms.map((program) => {
+                const typeMeta = getProgramTypeMeta(program.programType);
+	                const targetEntries = normalizeAuxiliaryTargets(program)
+	                  .filter((target) => !activeMainProgramIds || activeMainProgramIds.has(target.programId))
+	                  .map((target) => {
+                    const targetProgram = programById[target.programId];
+                    const targetStep = targetProgram?.steps?.find((step) => step.id === target.stepId);
+                    return targetProgram ? { targetProgram, targetStep } : null;
+                  })
+                  .filter(Boolean);
+                const extraProgramIndex = content.extraPrograms.findIndex((item) => item.id === program.id);
+                return (
+                  <div
+                    key={program.id}
+                    ref={(node) => {
+                      programSectionRefs.current[program.id] = node;
+                    }}
+                    className="rounded-2xl border border-slate-100 bg-slate-50/80 p-3"
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="min-w-0">
+                        {isEditing ? (
+                          <input
+                            value={program.name}
+                            onChange={(event) => updateProgramTitle(program.id, 'name', event.target.value)}
+                            className="w-full rounded-xl border border-slate-200 bg-white px-2.5 py-1.5 text-sm font-black text-slate-950 outline-none focus:border-sky-300"
+                          />
+                        ) : (
+                          <h3 className="truncate text-sm font-black text-slate-950">{program.name}</h3>
+                        )}
+                      </div>
+                      <div className="flex shrink-0 items-center gap-1">
+                        <span className={`rounded-full px-2 py-0.5 text-[10px] font-black ring-1 ${typeMeta.badgeClass}`}>
+                          {typeMeta.shortLabel} · 참고
+                        </span>
+                        {isEditing && extraProgramIndex >= 0 && (
+                          <button
+                            type="button"
+                            onClick={() => removeProgram(extraProgramIndex)}
+                            className="rounded-full bg-rose-50 px-2 py-1 text-[10px] font-black text-rose-600 hover:bg-rose-100"
+                          >
+                            삭제
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                    {isEditing ? (
+                      <textarea
+                        value={program.description}
+                        onChange={(event) => updateProgramTitle(program.id, 'description', event.target.value)}
+                        rows={2}
+                        className="mt-2 w-full resize-none rounded-xl border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-bold text-slate-700 outline-none focus:border-sky-300"
+                      />
+                    ) : (
+                      <p className="mt-1.5 line-clamp-2 whitespace-pre-line text-xs font-bold leading-5 text-slate-700">{program.description}</p>
+                    )}
+                    {isEditing ? (
+                      <textarea
+                        value={program.programNote ?? ''}
+                        onChange={(event) => updateProgramTitle(program.id, 'programNote', event.target.value)}
+                        rows={2}
+                        placeholder="참고 프로그램 설명"
+                        className="mt-2 w-full resize-none rounded-xl border border-amber-100 bg-white px-2.5 py-1.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-300"
+                      />
+                    ) : program.programNote ? (
+                      <p className="mt-2 line-clamp-2 rounded-xl bg-amber-50 px-2.5 py-1.5 text-[11px] font-bold leading-4 text-amber-800 ring-1 ring-amber-100">{program.programNote}</p>
+                    ) : null}
+                    <div className="mt-2 flex flex-wrap gap-1">
+                      <span className="text-[11px] font-black text-slate-400">보조 입력 대상</span>
+                      {targetEntries.length > 0 ? targetEntries.map(({ targetProgram, targetStep }) => (
+                        <span key={`${targetProgram.id}-${targetStep?.id ?? 'all'}`} className="rounded-full bg-white px-2 py-0.5 text-[10px] font-black text-sky-700 ring-1 ring-sky-100">
+                          {targetProgram.name}{targetStep ? ` · ${targetStep.title}` : ''}
+                        </span>
+                      )) : (
+                        <span className="rounded-full bg-white px-2 py-0.5 text-[10px] font-black text-slate-400 ring-1 ring-slate-100">
+                          미지정
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        )}
+
           </section>
         </div>
 
@@ -3967,6 +4628,9 @@ export default function App() {
             programs={programs}
             onToggleRelation={toggleProgramRelation}
             onMergeGroupChange={updateProgramMergeGroup}
+            onMergeGroupMembersChange={updateProgramMergeGroupMembers}
+            onProgramRoleChange={updateProgramRole}
+            onAuxiliaryTargetsChange={updateAuxiliaryTargets}
             onClose={() => setIsRelationPopupOpen(false)}
           />
         )}