fix(M02): 단가산출 다이어그램 — 확대 단추 글 · 어두운 화면 종류 글자 밝게(PLAN 35-7)

- CostFlow 전부 검사 초록 · 660줄
- ORCA 견본(상자 8 · 선 9 · 직렬 · 병렬): 처음 한눈에 맞춤 · 선 끝 알약에서 0.05 안 · 상자 끌기 → on.move(f3, 400, 350)(+100, +50)
  · 확대 1.212→1.454 · 휠 1.322 · 한눈에 1.161 모두 판 안 · 끌어 잇기 → Model 잇기 통과 · 막힘 까닭 한 줄
  · 함수 고르면 이어진 선 넷만 진하게 · 선 끊기 · 줄 맞추기 · 화살표 · 더하기 · 지우기 물음 · 밝음 · 어두움

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ly2oHAaTDYRjcniAmHR81z

M02_MasterTemplete/CostFlow/M02_CF_Diagram.css

@@ -11,11 +11,13 @@
 
 :root[data-theme="dark"] .m02-cfdg {
   --cfdg-out: #e5a866;
+  --cfdg-lift: #fff;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) .m02-cfdg {
     --cfdg-out: #e5a866;
+    --cfdg-lift: #fff;
   }
 }
 
@@ -128,7 +130,8 @@
 
 .m02-cfdg__kind {
   grid-column: 1;
-  color: var(--cf-color);
+  /* 어두운 화면은 종류 색을 밝게 섞음 */
+  color: color-mix(in srgb, var(--cf-color) 55%, var(--cfdg-lift, var(--cf-color)));
   font-size: var(--text-caption);
   font-weight: 600;
 }

M02_MasterTemplete/CostFlow/M02_CF_Diagram.ts

@@ -454,27 +454,12 @@ export function renderDiagram(
       addBtn("function", "AddFunc"),
       addBtn("output", "AddOutput"),
       el("span", { className: "m02-cfdg__gap" }),
-      createButton({
-        label: "−",
-        size: "sm",
-        variant: "ghost",
-        onClick: () => setZoom(st.zoom / 1.2),
-      }),
+      sm("ZoomOut", () => setZoom(st.zoom / 1.2)),
       zoomLabel,
-      createButton({
-        label: "+",
-        size: "sm",
-        variant: "ghost",
-        onClick: () => setZoom(st.zoom * 1.2),
-      }),
-      createButton({ label: tt("Fit"), size: "sm", variant: "ghost", onClick: fit }),
-      createButton({
-        label: tt("Arrange"),
-        size: "sm",
-        variant: "ghost",
-        onClick: () => {
-          for (const [id, p] of Object.entries(arrange(lg))) on.move(id, p.x, p.y);
-        },
+      sm("ZoomIn", () => setZoom(st.zoom * 1.2)),
+      sm("Fit", fit),
+      sm("Arrange", () => {
+        for (const [id, p] of Object.entries(arrange(lg))) on.move(id, p.x, p.y);
       }),
     ],
   });