feat(m02-cf): 고른 상자 판 머리에 상자 색 바꾸기(정함 점검 9)

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

M02_MasterTemplete/CostFlow/M02_CF_Entry.css

@@ -196,3 +196,25 @@
 .m02-cf__note:empty {
   display: none;
 }
+
+.m02-cf__color {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-bottom: var(--spacing-8);
+  font-size: var(--text-body-sm);
+}
+
+.m02-cf__color[hidden] {
+  display: none;
+}
+
+.m02-cf__color-input {
+  width: 44px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: none;
+  cursor: pointer;
+}

M02_MasterTemplete/CostFlow/M02_CF_Entry.ts

@@ -72,6 +72,7 @@ const TEXT = {
   Box: ["고른 상자", "Chosen box"],
   PickBox: ["다이어그램에서 상자를 고르면 여기에 그 상자 판이 보임", "Choose a box in the diagram"],
   Summary: ["원가", "Cost"],
+  Color: ["상자 색", "Box colour"],
   NoName: ["로직 이름을 넣어 주세요", "Enter a logic name"],
   SaveAnyway: [
     "고칠 곳이 있음 — {v} · 그래도 저장할까요?",
@@ -327,6 +328,18 @@ function openCostFlow(): void {
     const note = el("p", { className: "m02-cf__note", attrs: { role: "status" } });
     const diagramHost = el("div");
     const pickHint = muted(te("PickBox"));
+    // 상자마다 색 바꾸기(정함 점검 9) — 고른 상자 판 머리에 하나
+    const colorBox = el("input", {
+      className: "m02-cf__color-input",
+      attrs: { type: "color", "aria-label": te("Color") },
+    });
+    colorBox.addEventListener("change", () => {
+      if (selected) edit(M.model.setColor(lg, selected, colorBox.value));
+    });
+    const colorRow = el("label", {
+      className: "m02-cf__color",
+      children: [el("span", { text: te("Color") }), colorBox],
+    });
     // 판마다 제 상태를 쥠 — 종류마다 따로 두고 숨기기만(갈아끼우면 편집기가 있다고 여김)
     const funcHost = el("div");
     const outHost = el("div");
@@ -415,6 +428,8 @@ function openCostFlow(): void {
     const drawPanel = (): void => {
       const box = lg.boxes.find((b) => b.id === selected);
       pickHint.hidden = !!box;
+      colorRow.hidden = !box;
+      if (box && /^#[0-9a-f]{6}$/i.test(box.color)) colorBox.value = box.color;
       funcHost.hidden = box?.kind !== "function";
       outHost.hidden = box?.kind !== "output";
       inHost.hidden = box?.kind !== "input";
@@ -522,7 +537,7 @@ function openCostFlow(): void {
           el("div", {
             className: "m02-cf__lower",
             children: [
-              part(te("Box"), "m02-cf__box", [pickHint, inHost, funcHost, outHost]),
+              part(te("Box"), "m02-cf__box", [pickHint, colorRow, inHost, funcHost, outHost]),
               part(te("Summary"), "m02-cf__summary", [summaryHost]),
             ],
           }),