diff --git a/web/.asset-version-state.json b/web/.asset-version-state.json
index 08ddef0..9371a60 100644
--- a/web/.asset-version-state.json
+++ b/web/.asset-version-state.json
@@ -16,8 +16,8 @@
     "mtimeMs": 1783602619602.658
   },
   "ticket-order.js": {
-    "size": 40237,
-    "mtimeMs": 1783822753545.6997
+    "size": 40982,
+    "mtimeMs": 1783823251900.007
   },
   "ticket-search.js": {
     "size": 17269,
diff --git a/web/asset-versions.json b/web/asset-versions.json
index 6fb80f8..bbe1803 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": 27,
+  "ticket-order.js": 28,
   "ticket-search.js": 12,
   "ticket-route.js": 3,
   "index.js": 5,
diff --git a/web/ticket-order.html b/web/ticket-order.html
index 2ce38ad..ee7b6c0 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=27"></script>
+  <script src="/ticket-order.js?v=28"></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 d90e1af..0de30b4 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -264,8 +264,8 @@
           const legendW = 10;
           const startX = 140;
           const baseY = 80;
-          const lineGapY = 92;
-          const minGapX = 78;
+          const lineGapY = 64;
+          const minGapX = 68;
 
           const occurrences = {};
           for (const li of lineStops) {
@@ -293,7 +293,7 @@
           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) ? 108 : 82;
+              const minSpacing = (stationDegreeByCanonical[prev] >= 2 || stationDegreeByCanonical[cur] >= 2) ? 88 : 68;
               if (stationXByCanonical[cur] < stationXByCanonical[prev] + minSpacing) {
                   stationXByCanonical[cur] = stationXByCanonical[prev] + minSpacing;
               }
@@ -306,7 +306,7 @@
                       if (code === '-') continue;
                       const canonical = stationCanonicalByCode[code] || code;
                       const x = stationXByCanonical[canonical] ?? (prevX + minGapX);
-                      const spacing = stationDegreeByCanonical[canonical] >= 2 ? 104 : 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];
@@ -331,12 +331,26 @@
               }
           }
 
+          const getContrastColor = (hexcolor) => {
+              if (!hexcolor) return '#ffffff';
+              let hex = hexcolor.replace('#', '');
+              if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+              const r = parseInt(hex.substr(0,2),16) || 0;
+              const g = parseInt(hex.substr(2,2),16) || 0;
+              const b = parseInt(hex.substr(4,2),16) || 0;
+              const yiq = ((r*299)+(g*587)+(b*114))/1000;
+              return (yiq >= 140) ? '#0f172a' : '#ffffff';
+          };
+
           const labelPlacements = {};
           const placeLabel = (x, y, isStart, name, enName, color) => {
               const key = `${x},${y},${isStart ? 'left' : 'right'}`;
               const count = labelPlacements[key] || 0;
               labelPlacements[key] = count + 1;
               
+              const textColor = getContrastColor(color);
+              const subTextColor = textColor === '#ffffff' ? 'rgba(255,255,255,0.9)' : 'rgba(15,23,42,0.8)';
+              
               const hasEn = !!enName;
               const nameLen = Math.max(name.length * 13 + 16, hasEn ? enName.length * 6.5 + 16 : 0);
               const h = hasEn ? 36 : 24;
@@ -344,19 +358,19 @@
               
               let lx, textX;
               if (isStart) {
-                  lx = x - 40 - nameLen; // Pushed further out to avoid line overlap
+                  lx = x - 54 - nameLen; // Pushed further out to avoid line overlap
                   textX = lx + nameLen / 2;
               } else {
-                  lx = x + 40; // Pushed further out
+                  lx = x + 54; // Pushed further out
                   textX = lx + nameLen / 2;
               }
               
               let svg = `<rect x="${lx}" y="${y + yOffset}" width="${nameLen}" height="${h}" rx="6" fill="${color}" />`;
               if (hasEn) {
-                  svg += `<text x="${textX}" y="${y + yOffset + 15}" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold">${name}</text>`;
-                  svg += `<text x="${textX}" y="${y + yOffset + 28}" text-anchor="middle" fill="rgba(255,255,255,0.9)" font-size="9" font-weight="600">${enName}</text>`;
+                  svg += `<text x="${textX}" y="${y + yOffset + 15}" text-anchor="middle" fill="${textColor}" font-size="12" font-weight="bold">${name}</text>`;
+                  svg += `<text x="${textX}" y="${y + yOffset + 28}" text-anchor="middle" fill="${subTextColor}" font-size="9" font-weight="600">${enName}</text>`;
               } else {
-                  svg += `<text x="${textX}" y="${y + yOffset + 16}" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold">${name}</text>`;
+                  svg += `<text x="${textX}" y="${y + yOffset + 16}" text-anchor="middle" fill="${textColor}" font-size="12" font-weight="bold">${name}</text>`;
               }
               return svg;
           };