Merge remote-tracking branches 'origin/sub_desktop_1' and 'origin/sub_laptop_1' into main_laptop_1

B06_Section/B06_Section_UI_Cross_Design.ts

@@ -721,32 +721,55 @@ export function appendCrossDesignOverlay(
   }
 
   // 차도·노견 경계 짧은 수직 틱(N-4-2): ±3.6px(기존 ±6의 60%). 노면 단일 기울기라 육안
-  // 구분이 안 되는 경계를 표시한다. 노견 바깥 끝(road_edges)은 측구·사면 꺾임으로 이미 구분됨.
+  // 구분이 안 되는 경계를 표시한다.
   const edges = design.carriageway_edges;
   if (edges) {
-    for (const edge of [edges.left, edges.right]) {
-      const cx = x(edge.offset_m);
-      const cy = toDisplayY(edge.elevation_m);
+    const tickAt = (offsetM: number, elevationM: number, className: string, half: number) => {
+      const cx = x(offsetM);
+      const cy = toDisplayY(elevationM);
       const tick = document.createElementNS(SVG_NS, "line");
       tick.setAttribute("x1", String(cx));
-      tick.setAttribute("y1", String(cy - 3.6));
+      tick.setAttribute("y1", String(cy - half));
       tick.setAttribute("x2", String(cx));
-      tick.setAttribute("y2", String(cy + 3.6));
-      tick.setAttribute("class", "b06-chart__carriageway-tick");
+      tick.setAttribute("y2", String(cy + half));
+      tick.setAttribute("class", className);
       svg.append(tick);
+    };
+    for (const edge of [edges.left, edges.right]) {
+      tickAt(edge.offset_m, edge.elevation_m, "b06-chart__carriageway-tick", 3.6);
+    }
+    // 노견 바깥 끝에도 틱을 세운다(2026-09-12 사용자) — 종전에는 차도에만 표기가 있어
+    // **노견이 늘어난 건지 차도가 늘어난 건지 화면에서 못 가렸다**. 노견은 좌·우 0.5m 로
+    // 고정이고 확폭은 차도에만 붙으므로, 두 틱 사이 간격이 그 사실을 그대로 보여 준다.
+    const roadEdges = design.road_edges;
+    if (roadEdges) {
+      for (const edge of [roadEdges.left, roadEdges.right]) {
+        tickAt(edge.offset_m, edge.elevation_m, "b06-chart__shoulder-tick", 2.4);
+      }
     }
     // 노폭 라벨(2026-09-06 사용자 지시) — 확폭이 걸린 측점인지 눈으로 바로 알게 한다.
     // 확폭이 없으면 규격 폭만, 있으면 「4.5m (규격 3.0 + 확폭 1.5)」로 적는다.
     const widened = (design.widening_left_m ?? 0) + (design.widening_right_m ?? 0);
     const standardWidth = design.carriageway_standard_width_m;
+    const shoulderLeft = roadEdges ? roadEdges.left.offset_m - edges.left.offset_m : null;
+    const shoulderRight = roadEdges ? edges.right.offset_m - roadEdges.right.offset_m : null;
     const label = document.createElementNS(SVG_NS, "text");
     label.setAttribute("x", String((x(edges.left.offset_m) + x(edges.right.offset_m)) / 2));
     label.setAttribute("y", String(toDisplayY(edges.left.elevation_m) - 6));
     label.setAttribute("class", "b06-chart__carriageway-label");
-    label.textContent =
+    const widthText =
       widened > 0.001 && typeof standardWidth === "number"
         ? `노폭 ${design.carriageway_width_m.toFixed(2)}m (규격 ${standardWidth.toFixed(2)} + 확폭 ${widened.toFixed(2)})`
         : `노폭 ${design.carriageway_width_m.toFixed(2)}m`;
+    // 노견은 좌우가 같으면 한 번만 적는다 — 라벨이 길어지면 옆 측점 라벨과 겹친다.
+    label.textContent =
+      shoulderLeft != null && shoulderRight != null
+        ? `${widthText} · 노견 ${
+            Math.abs(shoulderLeft - shoulderRight) < 0.005
+              ? `${shoulderLeft.toFixed(2)}m`
+              : `좌 ${shoulderLeft.toFixed(2)} / 우 ${shoulderRight.toFixed(2)}m`
+          }`
+        : widthText;
     svg.append(label);
   }
 }

B06_Section/B06_Section_UI_Style_Cross_Areas.css

@@ -152,6 +152,14 @@
   stroke-width: 1.2;
 }
 
+/* 노견 바깥 끝 틱(2026-09-12) — 차도 틱보다 짧고 옅다. 차도 틱과 이 틱 사이가 노견이라,
+   노면이 넓어졌을 때 차도가 늘었는지 노견이 늘었는지 눈으로 바로 갈린다. */
+.b06-chart__shoulder-tick {
+  stroke: var(--color-royal-amethyst);
+  stroke-width: 1;
+  opacity: 0.55;
+}
+
 /* 노폭 라벨(2026-09-06) — 차도 위 가운데. 확폭이 걸린 측점을 눈으로 가려내는 표기다. */
 .b06-chart__carriageway-label {
   fill: var(--color-royal-amethyst);