From 2e83ce11af2470e2a3520912af979dca4685d22a Mon Sep 17 00:00:00 2001
From: Hyein <hikim2@samaneng.com>
Date: Wed, 24 Jun 2026 14:59:49 +0900
Subject: [PATCH] Polish flow map window and page title

---
 flow.html   |  2 +-
 index.html  |  2 +-
 src/App.jsx | 26 +++++++++++++++-----------
 3 files changed, 17 insertions(+), 13 deletions(-)
diff --git a/flow.html b/flow.html
index de66747..9ebc82f 100644
--- a/flow.html
+++ b/flow.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>유역면적 산정 피드백 엔진</title>
+    <title>프로그램 흐름도</title>
     <link rel="icon" href="data:," />
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
diff --git a/index.html b/index.html
index de66747..9ebc82f 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>유역면적 산정 피드백 엔진</title>
+    <title>프로그램 흐름도</title>
     <link rel="icon" href="data:," />
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
diff --git a/src/App.jsx b/src/App.jsx
index 341c7d9..ce3c75e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1677,7 +1677,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                 </button>
               )}
             </div>
-            <div className="grid gap-3 lg:grid-cols-2">
+            <div className="grid grid-cols-2 gap-3">
               <label className="block">
                 <span className="text-[12px] font-black text-slate-500">비교 프로그램 A</span>
                 <select
@@ -1724,7 +1724,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
             </div>
           )}
 
-          <div className="mt-4 grid gap-4 lg:grid-cols-2">
+          <div className="mt-4 grid grid-cols-2 gap-4">
             {renderProgramSummary(leftProgram)}
             {renderProgramSummary(rightProgram)}
           </div>
@@ -1750,7 +1750,7 @@ function ProgramComparePopup({ programs, comparisons, initialPair, onComparisonS
                   return (
                     <div
                       key={`step-compare-${stepIndex}`}
-                      className="grid gap-3 rounded-2xl border border-slate-100 bg-slate-50/80 p-3 lg:grid-cols-[minmax(0,1fr)_minmax(280px,1.35fr)_minmax(0,1fr)]"
+                      className="grid grid-cols-[minmax(0,1fr)_minmax(230px,1.35fr)_minmax(0,1fr)] gap-3 rounded-2xl border border-slate-100 bg-slate-50/80 p-3"
                     >
                       <div className="rounded-2xl bg-amber-50/70 p-3 ring-1 ring-amber-100">
                         <span className="text-[11px] font-black text-amber-700">{leftProgram?.name ?? 'A'} 스텝</span>
@@ -1992,7 +1992,7 @@ function RelationTreePanel({
   const miniNodeWidth = 128;
   const miniNodeHeight = 38;
   const miniColumnGap = 52;
-  const miniRowGap = 96;
+  const miniRowGap = fullPage ? 96 : 72;
   const miniPadding = 34;
   const miniSideLaneWidth = 96;
   const sidebarSizes = [420, 560, 720];
@@ -2004,7 +2004,7 @@ function RelationTreePanel({
     miniPadding * 2 + miniSideLaneWidth + miniMaxLevelCount * miniNodeWidth + Math.max(0, miniMaxLevelCount - 1) * miniColumnGap
   );
   const miniGraphHeight = Math.max(
-    fullPage ? 720 : 660,
+    fullPage ? 720 : 430,
     miniPadding * 2 + graphLevels.length * miniNodeHeight + Math.max(0, graphLevels.length - 1) * miniRowGap
   );
   const miniNodePositions = Object.fromEntries(
@@ -2262,7 +2262,7 @@ function RelationTreePanel({
         {relations.length > 0 ? (
           <div
             ref={handleMapViewportRef}
-            className={`${fullPage ? 'h-[calc(100vh-150px)] overflow-hidden' : 'h-[660px] overflow-hidden'} relative cursor-grab touch-none overscroll-contain rounded-2xl bg-white ring-1 ring-slate-100 ${mapDrag ? 'cursor-grabbing' : ''}`}
+            className={`${fullPage ? 'h-[calc(100vh-150px)] overflow-hidden' : 'h-[450px] overflow-hidden'} relative cursor-grab touch-none overscroll-contain rounded-2xl bg-white ring-1 ring-slate-100 ${mapDrag ? 'cursor-grabbing' : ''}`}
             onPointerDown={handleMapPointerDown}
             onPointerMove={handleMapPointerMove}
             onPointerUp={handleMapPointerEnd}
@@ -2306,11 +2306,11 @@ function RelationTreePanel({
                 preserveAspectRatio="none"
               >
                 <defs>
-                  <marker id="sidebar-relation-arrow" markerWidth="9" markerHeight="9" refX="8" refY="4.5" orient="auto" markerUnits="strokeWidth">
-                    <path d="M 0 0 L 9 4.5 L 0 9 z" fill="#2563eb" />
+                  <marker id="sidebar-relation-arrow" markerWidth="6" markerHeight="6" refX="5.5" refY="3" orient="auto" markerUnits="strokeWidth">
+                    <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb" />
                   </marker>
-                  <marker id="sidebar-relation-arrow-skip" markerWidth="9" markerHeight="9" refX="8" refY="4.5" orient="auto" markerUnits="strokeWidth">
-                    <path d="M 0 0 L 9 4.5 L 0 9 z" fill="#7c3aed" />
+                  <marker id="sidebar-relation-arrow-skip" markerWidth="6" markerHeight="6" refX="5.5" refY="3" orient="auto" markerUnits="strokeWidth">
+                    <path d="M 0 0 L 6 3 L 0 6 z" fill="#7c3aed" />
                   </marker>
                 </defs>
                 {relations.map((relation) => {
@@ -2400,6 +2400,10 @@ function RelationTreePanel({
 }
 
 export default function App() {
+  useEffect(() => {
+    document.title = '프로그램 흐름도';
+  }, []);
+
   const urlParams = new URLSearchParams(window.location.search);
   const isDetailWindow = urlParams.get('view') === 'program-detail' || urlParams.get('view') === 'cheonjiin-detail';
   const isRelationMapWindow = urlParams.get('view') === 'relation-map';
@@ -3123,7 +3127,7 @@ export default function App() {
     window.open(
       '/?view=relation-map',
       'program-relation-map',
-      'popup=yes,width=700,height=820,left=120,top=40,resizable=yes,scrollbars=yes'
+      'popup=yes,width=830,height=890,left=120,top=40,resizable=yes,scrollbars=yes'
     );
   };
 
