refactor(B05): 지도 · 노선 추천 범례 셋을 부품 범례로 (PLAN 553-2)

- 평면 상태 글판 범례 · 추천 지도 범례 · 추천 종단 그림 범례 = 부품 「범례」(선 · 점선 표지)
- 표지 색 = 그린 선 값(종단 그림 = --draw-text-secondary · --draw-primary · 지도 = --map-route) — 옛 범례가 계획선을
  --color-primary(초록)로 그려 그림(보라)과 어긋나던 것 맞춤
- 범례 부품 CSS 를 design_page 가 실음

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

A00_Common/design/design_page.ts

@@ -49,9 +49,10 @@ import {
   peekSectionDetail,
 } from "../../B06_Section/B06_Section_Section_Store";
 import "./design_page.css";
-// 클래스로 붙이는 부품(체크 · 빈 상태 · 보조 글 · 표)의 CSS — B05 · B06 화면 파일이 시험 때문에 import 없이 클래스만 씀(553-2)
+// 클래스로 붙이는 부품(체크 · 빈 상태 · 범례 · 보조 글 · 표)의 CSS — B05 · B06 화면 파일이 시험 때문에 import 없이 클래스만 씀(553-2)
 import "@ui/ui_template_checkbox";
 import "@ui/ui_template_empty";
+import "@ui/ui_template_flow_legend";
 import "@ui/ui_template_table";
 import "@ui/ui_template_text";
 

B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts

@@ -135,9 +135,11 @@ export function createRouteEditChrome(
         </div>
         <div class="b05-routeedit__info">
           <span class="b05-routeedit__status">노선을 읽는 중…</span>
-          <span class="b05-routeedit__legend">
-            <span><i class="is-expected"></i> 예상노선(원본)</span>
-            <span><i class="is-planned"></i> 계획노선</span>
+          <span class="ui-legend ui-legend--vertical b05-routeedit__legend">
+            <span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--dash is-expected"
+              style="--legend-color: var(--color-text-secondary)"></i>예상노선(원본)</span>
+            <span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--line is-planned"
+              style="--legend-color: var(--map-route)"></i>계획노선</span>
           </span>
           <span class="b05-routeedit__summary"></span>
           <button type="button" data-size="18" class="ui-icon-btn ui-icon-btn--ghost b05-routeedit__info-toggle" data-act="info-toggle"

B05_Profile/B05_Profile_UI_RouteEdit_Recommend.ts

@@ -240,10 +240,13 @@ export function openRecommendModal(params: RecommendParams): void {
             <div class="b05-routerec__row"><button type="button" class="ui-btn ui-btn--glass" data-act="rerun">재계산</button></div>
               </div>
             </div>
-            <div class="b05-routerec__legend">
-              <span><i class="is-expected"></i>예상노선(원본)</span>
-              <span><i class="is-current"></i>창을 연 노선</span>
-              <span><i class="is-preview"></i>미리 보기</span>
+            <div class="ui-legend b05-routerec__legend">
+              <span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--dash is-expected"
+                style="--legend-color: var(--color-text-secondary)"></i>예상노선(원본)</span>
+              <span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--line is-current"
+                style="--legend-color: var(--map-route)"></i>창을 연 노선</span>
+              <span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--line is-preview"
+                style="--legend-color: var(--color-primary)"></i>미리 보기</span>
             </div>
             <div class="b05-routerec__maphint">휠 = 확대 · 축소 &nbsp; 끌기 = 이동 &nbsp; ↺ ↻ = 회전</div>
           </div>

B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Profile.ts

@@ -181,13 +181,14 @@ export function profileSvg(
     <path class="is-plan" d="${planM.length ? path(stationsM, planM) : ""}" vector-effect="non-scaling-stroke" />${initialPath}</svg>`;
 }
 
-/** 그림 아래 범례 — 그린 선만. */
+/** 그림 아래 범례 — 그린 선만 · 부품 「범례」(553-2) · 색 = 그린 선 값. */
 export function profileLegend(hasPlan: boolean, hasInitial: boolean): string {
-  const item = (cls: string, name: string): string => `<span><i class="${cls}"></i>${name}</span>`;
-  return `<div class="b05-routerec__plegend">${[
-    item("is-ground", "지반선"),
-    hasPlan ? item("is-plan", "균형 계획선") : "",
-    hasInitial ? item("is-initial", "적용될 초기 종단") : "",
+  const item = (cls: string, kind: string, color: string, name: string): string =>
+    `<span class="ui-legend__item"><i class="ui-legend__mark ui-legend__mark--${kind} ${cls}" style="--legend-color: ${color}"></i>${name}</span>`;
+  return `<div class="ui-legend b05-routerec__plegend">${[
+    item("is-ground", "line", "var(--draw-text-secondary)", "지반선"),
+    hasPlan ? item("is-plan", "line", "var(--draw-primary)", "균형 계획선") : "",
+    hasInitial ? item("is-initial", "dash", "var(--map-route)", "적용될 초기 종단") : "",
   ].join("")}</div>`;
 }
 

B05_Profile/B05_Profile_UI_Style_RouteEdit.css

@@ -153,20 +153,9 @@
   white-space: nowrap;
 }
 
-.b05-routeedit__legend i {
-  display: inline-block;
-  width: 22px;
-  height: 0;
-  margin-right: 2px;
-  vertical-align: middle;
-}
-
-.b05-routeedit__legend i.is-expected {
-  border-top: 2px dashed var(--color-text-secondary);
-}
-
-.b05-routeedit__legend i.is-planned {
-  border-top: 2px solid var(--map-route, #f97316);
+/* 범례 = 부품 「범례」 세로(553-2) · 줄 사이만 붙임 */
+.b05-routeedit__legend.ui-legend {
+  gap: 0;
 }
 
 /* 오른쪽 덮는 판 — 패널 양식(382-1 · `ui_template_side_panels` · 손잡이 · 머리 · 폭 끌기) 을 지도 위에 얹음 ·

B05_Profile/B05_Profile_UI_Style_RouteRecommend.css

@@ -244,34 +244,11 @@
   font-size: var(--text-body-sm);
 }
 
-.b05-routerec__legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-12);
-  color: var(--color-text-secondary);
-  font-size: var(--text-body-sm);
-}
-
-.b05-routerec__legend i {
-  display: inline-block;
-  width: 22px;
-  margin-right: 6px;
-  vertical-align: middle;
-}
-
-.b05-routerec__legend i.is-expected {
-  border-top: 2px dashed var(--color-text-secondary);
-}
-
-.b05-routerec__legend i.is-current {
-  border-top: 2px solid var(--map-route, #f97316);
+/* 범례 = 부품 「범례」(553-2) · 창을 연 노선은 지도처럼 흐림 */
+.b05-routerec__legend .is-current {
   opacity: 0.55;
 }
 
-.b05-routerec__legend i.is-preview {
-  border-top: 3px solid var(--color-primary);
-}
-
 /* 옵션 겹창 — 지도 왼쪽 위 작은 칸(회전 단추는 오른쪽 위 · PLAN 77-4). 지도 끌기를 막지 않게 제 칸만. */
 .b05-routerec__side {
   position: absolute;
@@ -511,28 +488,9 @@
   stroke-dasharray: 6 3;
 }
 
+/* 그림 범례 = 부품 「범례」(553-2) */
 .b05-routerec__plegend {
-  display: flex;
-  gap: var(--spacing-12);
-  margin-top: var(--spacing-4, 4px);
-  color: var(--color-text-secondary);
-  font-size: var(--text-caption);
-}
-
-.b05-routerec__plegend i {
-  display: inline-block;
-  width: 16px;
-  margin-right: var(--spacing-4, 4px);
-  vertical-align: middle;
-  border-top: 2px solid var(--color-text-secondary);
-}
-
-.b05-routerec__plegend i.is-plan {
-  border-top-color: var(--color-primary);
-}
-
-.b05-routerec__plegend i.is-initial {
-  border-top: 2px dashed var(--map-route, #f97316);
+  margin-top: var(--spacing-4);
 }
 
 /* 이 모달에서 셈한 후보 표 — 절 · 성 · 반입 · 최대 종단경사. */