feat(테마): 그림 전용 값 --draw-* — 종단 · 횡단 · 이정표 SVG · 지도 계획선 · CAD 바탕 · 3D 바탕 색을 화면 테마와 떼어 지금 색 고정 (PLAN 551-2)

- ui_template_theme.css 끝 블록 = --draw-* 17 개 · 밝음 / 어두움 / 시스템 어두움 글자 hex
- B05 · B06 · B08 그림 CSS stroke · fill 125 줄 · --b06-tag = --draw-*
- 캔버스 · 3D 읽기 = B05 노선 편집 지도 · 노선 추천 지도 · 3D 바탕 · B04 3D 바탕 · 지도 MC 글 · D03 고른 측점 · CAD 바탕 · 격자
- 지킴 시험 test_551_2_draw_tokens(화면 변수를 모두 바꿔도 그림 풀린 색 같음)
- 기존 시험 7 개 = 그림 줄이 옛 --color-* 이름을 잡던 단정을 --draw-* 로 고침(값 같음)

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

B06_Section/B06_Section_UI_Style_Cross_Chart.css

@@ -1,6 +1,6 @@
 /* SVG 차트 색상은 테마 토큰만 사용한다. */
 .b06-chart__bg {
-  fill: var(--color-surface-raised);
+  fill: var(--draw-surface-raised);
 }
 
 /* 세로 창을 변환으로 옮기는 겹(2026-09-04) — 세로로 눌리거나 늘어나도 선 굵기·점선 간격은
@@ -10,19 +10,19 @@
 }
 
 .b06-chart__grid {
-  stroke: var(--color-border);
+  stroke: var(--draw-grid);
   stroke-width: 1;
 }
 
 .b06-chart__axis {
-  stroke: var(--color-text-secondary);
+  stroke: var(--draw-text-secondary);
   stroke-width: 1;
 }
 
 .b06-chart__tick,
 .b06-chart__station-label,
 .b06-chart__axis-label {
-  fill: var(--color-text-secondary);
+  fill: var(--draw-text-secondary);
   font-family: var(--font-body);
 }
 
@@ -35,7 +35,7 @@
 .b06-chart__station-label--mc {
   font-size: 12px;
   font-weight: var(--font-weight-bold);
-  fill: var(--color-warning);
+  fill: var(--draw-warning);
 }
 
 .b06-station--mc {
@@ -47,7 +47,7 @@
 /* 중심고 Y축 라벨(318-2) — 눈금과 같은 10px · 둥근 상자 · 축선 앞에서 멈춤 ·
    바탕 = 불투명 섞음(겹친 눈금 글을 위에서 가림 · 319-1) · 색 = 원지반선 · 설계선(379-3 · `--b06-tag` = _Cross_Areas.css) */
 .b06-chart__center-box {
-  fill: color-mix(in srgb, var(--b06-tag) 14%, var(--color-surface-raised));
+  fill: color-mix(in srgb, var(--b06-tag) 14%, var(--draw-surface-raised));
   stroke: var(--b06-tag);
   stroke-width: 1;
 }
@@ -60,7 +60,7 @@
 /* 겹쳐 위 단으로 올린 측점 이름(407-4) — 선 · 지반선 위라 바탕색 테두리로 읽히게. */
 .b06-chart__station-label--lifted {
   paint-order: stroke;
-  stroke: var(--color-surface-raised);
+  stroke: var(--draw-surface-raised);
   stroke-width: 3px;
   stroke-linejoin: round;
   pointer-events: none;
@@ -74,14 +74,14 @@
 }
 
 .b06-chart__axis-label {
-  fill: var(--color-text-body);
+  fill: var(--draw-text-body);
   font-size: var(--text-caption);
   font-weight: var(--font-weight-medium);
 }
 
 .b06-chart__profile {
   fill: none;
-  stroke: var(--color-chart-0);
+  stroke: var(--draw-chart-0);
   stroke-width: 2.5;
 }
 
@@ -93,14 +93,14 @@
 
 .b06-chart__cross-profile {
   fill: none;
-  stroke: var(--color-chart-1);
+  stroke: var(--draw-chart-1);
   stroke-width: 2.4;
 }
 
 /* 종단 계획선(시공계획고): 지반선과 구분되도록 파선 + 강조색 */
 .b06-chart__design-profile {
   fill: none;
-  stroke: var(--color-royal-amethyst);
+  stroke: var(--draw-accent);
   stroke-width: 2.2;
   stroke-dasharray: 8 4;
 }
@@ -119,7 +119,7 @@
 }
 
 .b06-chart__balance-boundary {
-  stroke: var(--color-royal-amethyst);
+  stroke: var(--draw-accent);
   stroke-width: 1.2;
   stroke-dasharray: 3 3;
   opacity: 0.55;
@@ -148,42 +148,42 @@
 .b06-chart__station-line--bp,
 .b06-chart__station-line--regular,
 .b06-chart__station-line--curve {
-  stroke: var(--color-warning);
+  stroke: var(--draw-warning);
 }
 
 .b06-chart__station-line--ep {
-  stroke: var(--color-accent);
+  stroke: var(--draw-accent);
   stroke-dasharray: 4 3;
 }
 
 /* 비정규 측점(구조물)은 종단면도에서도 자수정색 파선으로 구분한다(B05 종단 규칙과 정합).
    미선택 시 stroke 미정의로 세로선이 안 그려지던 문제 해소. */
 .b06-chart__station-line--irregular {
-  stroke: var(--color-royal-amethyst, rgb(139 92 246));
+  stroke: var(--draw-accent);
   stroke-width: 1.4;
   stroke-dasharray: 5 3;
 }
 
 /* 추가 측점(368-3) = 일반측점 색 점선 */
 .b06-chart__station-line--plus {
-  stroke: var(--color-warning);
+  stroke: var(--draw-warning);
   stroke-dasharray: 5 3;
 }
 
 .b06-chart__station-line--selected,
 .b06-chart__center-marker {
-  stroke: var(--color-danger);
+  stroke: var(--draw-danger);
   stroke-width: 2.5;
 }
 
 /* 십자선이 계획 노선(계획고) 위치를 가리킬 때: 종단 계획선과 동일 색으로 대응시킨다 */
 .b06-chart__center-marker--design {
-  stroke: var(--color-royal-amethyst);
+  stroke: var(--draw-accent);
 }
 
 .b06-chart__station--selected .b06-chart__station-label,
 .b06-chart__station-label--selected {
-  fill: var(--color-danger);
+  fill: var(--draw-danger);
   font-weight: var(--font-weight-bold);
 }