diff --git a/web/.asset-version-state.json b/web/.asset-version-state.json
index 9371a60..7ddcf9f 100644
--- a/web/.asset-version-state.json
+++ b/web/.asset-version-state.json
@@ -16,8 +16,8 @@
     "mtimeMs": 1783602619602.658
   },
   "ticket-order.js": {
-    "size": 40982,
-    "mtimeMs": 1783823251900.007
+    "size": 41045,
+    "mtimeMs": 1783829841573.1077
   },
   "ticket-search.js": {
     "size": 17269,
diff --git a/web/asset-versions.json b/web/asset-versions.json
index bbe1803..6869638 100644
--- a/web/asset-versions.json
+++ b/web/asset-versions.json
@@ -3,7 +3,7 @@
   "blog.css": 2,
   "custom-dialog.js": 11,
   "public-status.js": 14,
-  "ticket-order.js": 28,
+  "ticket-order.js": 29,
   "ticket-search.js": 12,
   "ticket-route.js": 3,
   "index.js": 5,
diff --git a/web/ticket-order.html b/web/ticket-order.html
index ee7b6c0..809a604 100644
--- a/web/ticket-order.html
+++ b/web/ticket-order.html
@@ -158,7 +158,7 @@
   </div>
 
   <script src="/custom-dialog.js?v=11"></script>
-  <script src="/ticket-order.js?v=28"></script>
+  <script src="/ticket-order.js?v=29"></script>
   <script src="/public-status.js?v=14"></script>
   <script>
     document.addEventListener('DOMContentLoaded', () => {
diff --git a/web/ticket-order.js b/web/ticket-order.js
index 0de30b4..82b3c0f 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -265,55 +265,61 @@
           const startX = 140;
           const baseY = 80;
           const lineGapY = 64;
-          const minGapX = 68;
+          const gridScaleX = 96;
 
-          const occurrences = {};
+          // 1. Assign base Y to lines
+          const lineBaseY = {};
+          for (let i = 0; i < lineStops.length; i++) {
+              lineBaseY[lineStops[i].idx] = i;
+          }
+
+          // 2. Assign Grid X to canonical stations (Topological / Depth based)
+          const stationGridX = {};
           for (const li of lineStops) {
-              for (let i = 0; i < li.stops.length; i++) {
-                  const code = li.stops[i];
-                  if (code === '-') continue;
+              li.stops.forEach((code, idx) => {
+                  if (code === '-') return;
                   const canonical = stationCanonicalByCode[code] || code;
-                  if (!occurrences[canonical]) occurrences[canonical] = [];
-                  occurrences[canonical].push(i * minGapX);
-              }
-          }
-          const stationDegreeByCanonical = {};
-          for (const canonical of Object.keys(lineIdxsByCanonical)) {
-              stationDegreeByCanonical[canonical] = lineIdxsByCanonical[canonical].size;
+                  if (stationGridX[canonical] == null) {
+                      stationGridX[canonical] = idx;
+                  } else {
+                      stationGridX[canonical] = Math.max(stationGridX[canonical], idx);
+                  }
+              });
           }
 
-          stationXByCanonical = {};
-          for (const canonical of Object.keys(occurrences)) {
-              const arr = occurrences[canonical];
-              const avg = arr.reduce((a,b)=>a+b,0) / Math.max(1, arr.length);
-              stationXByCanonical[canonical] = startX + Math.round(avg);
-          }
-
-          const sortedCanonicals = Object.keys(stationXByCanonical).sort((a, b) => stationXByCanonical[a] - stationXByCanonical[b]);
-          for (let i = 1; i < sortedCanonicals.length; i++) {
-              const prev = sortedCanonicals[i - 1];
-              const cur = sortedCanonicals[i];
-              const minSpacing = (stationDegreeByCanonical[prev] >= 2 || stationDegreeByCanonical[cur] >= 2) ? 88 : 68;
-              if (stationXByCanonical[cur] < stationXByCanonical[prev] + minSpacing) {
-                  stationXByCanonical[cur] = stationXByCanonical[prev] + minSpacing;
-              }
-          }
-
-          for (let pass = 0; pass < 3; pass++) {
+          // Relax Grid X to ensure connections always move forward (minimum 1 unit gap)
+          let changed = true;
+          let passes = 0;
+          while (changed && passes < 100) {
+              changed = false;
+              passes++;
               for (const li of lineStops) {
-                  let prevX = startX - minGapX;
+                  let prevCanonical = null;
                   for (const code of li.stops) {
-                      if (code === '-') continue;
+                      if (code === '-') {
+                          prevCanonical = null;
+                          continue;
+                      }
                       const canonical = stationCanonicalByCode[code] || code;
-                      const x = stationXByCanonical[canonical] ?? (prevX + minGapX);
-                      const spacing = stationDegreeByCanonical[canonical] >= 2 ? 88 : minGapX;
-                      const nx = Math.max(x, prevX + spacing);
-                      if (stationXByCanonical[canonical] == null || nx > stationXByCanonical[canonical]) stationXByCanonical[canonical] = nx;
-                      prevX = stationXByCanonical[canonical];
+                      if (prevCanonical) {
+                          // Extra spacing if either is a transfer station to avoid crowding
+                          const needExtra = (lineIdxsByCanonical[canonical]?.size >= 2 || lineIdxsByCanonical[prevCanonical]?.size >= 2) ? 1.5 : 1;
+                          if (stationGridX[canonical] < stationGridX[prevCanonical] + needExtra) {
+                              stationGridX[canonical] = stationGridX[prevCanonical] + needExtra;
+                              changed = true;
+                          }
+                      }
+                      prevCanonical = canonical;
                   }
               }
           }
 
+          stationXByCanonical = {};
+          for (const canonical of Object.keys(stationGridX)) {
+              stationXByCanonical[canonical] = startX + stationGridX[canonical] * gridScaleX;
+          }
+
+          // 3. Assign Grid Y to canonical stations (Average of their lines)
           const hubYByCanonical = {};
           for (const canonical of Object.keys(lineIdxsByCanonical)) {
               const idxs = Array.from(lineIdxsByCanonical[canonical] || []).sort((a, b) => a - b);
@@ -475,10 +481,11 @@
               `;
           }
 
-          const allX = Object.values(stationXByCanonical);
-          const maxX = allX.length > 0 ? Math.max(...allX) : 0;
-          const width = Math.max(800, maxX + 180);
-          const height = Math.max(260, baseY + currentLineIdx * lineGapY + 60);
+          const allCanonicals = Object.keys(stationXByCanonical);
+          const minX = Math.min(...allCanonicals.map(c => stationXByCanonical[c] || 0));
+          const maxX = Math.max(...allCanonicals.map(c => stationXByCanonical[c] || 0));
+          const width = Math.max(560, maxX + 200);
+          const height = Math.max(260, baseY + currentLineIdx * lineGapY + 120);
           mapContainer.innerHTML = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${svgContent}</svg>`;
           
       } catch(e) {