feat: RoutePanel 시점/종점 측점명 상단/하단 표시

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/components/overlay/RoutePanel.tsx

@@ -228,6 +228,11 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
   // 교량/터널만 표시
   const filteredPois = pois.filter(p => p.category === '\uD130\uB110' || p.category === '\uAD50\uB7C9');
 
+  // 시점/종점 측점명
+  const sortedByKm = [...validStations].sort((a, b) => stationKm(a.title) - stationKm(b.title));
+  const startTitle = sortedByKm[0]?.title ?? '';
+  const endTitle = sortedByKm[sortedByKm.length - 1]?.title ?? '';
+
   return (
     <div
       ref={panelRef}
@@ -236,10 +241,22 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
     >
       {/* Center vertical line */}
       <div
-        className="absolute top-0 bottom-0"
+        className="absolute"
-        style={{ left: 36, width: 2, background: 'rgba(255,255,255,0.3)' }}
+        style={{ left: 36, width: 2, top: 18, bottom: 18, background: 'rgba(255,255,255,0.3)' }}
       />
 
+      {/* 시점 측점명 — 상단 */}
+      <div className="absolute left-0 right-0 flex items-center gap-1" style={{ top: 3 }}>
+        <div className="w-1.5 h-1.5 rounded-full bg-white/50 shrink-0" style={{ marginLeft: 30 }} />
+        <span className="text-[9px] text-white/60 truncate">{startTitle}</span>
+      </div>
+
+      {/* 종점 측점명 — 하단 */}
+      <div className="absolute left-0 right-0 flex items-center gap-1" style={{ bottom: 3 }}>
+        <div className="w-1.5 h-1.5 rounded-full bg-white/50 shrink-0" style={{ marginLeft: 30 }} />
+        <span className="text-[9px] text-white/60 truncate">{endTitle}</span>
+      </div>
+
       {/* 교량/터널 POIs */}
       {filteredPois.map((poi, i) => {
         const km = poiKm(poi, validStations);