feat(m02-df): 끊긴 곳은 문제만 · 쉬는 갈래는 따로 회색 줄(level)

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

M02_MasterTemplete/DataFlow/M02_DF_Verify.css

@@ -116,3 +116,15 @@
   color: var(--color-danger);
   font-size: var(--text-caption);
 }
+
+/* 쉬는 갈래 — 문제가 아니라 회색으로 */
+.m02-dfver__rest {
+  padding: var(--spacing-8) var(--spacing-12);
+  border-left: 4px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+}
+
+.m02-dfver__rest .ui-btn {
+  color: var(--color-text-muted);
+}

M02_MasterTemplete/DataFlow/M02_DF_Verify.ts

@@ -24,6 +24,11 @@ import "./M02_DF_Verify.css";
 const TEXT = {
   Breaks: ["끊긴 곳", "Broken spots"],
   BreaksHint: ["누르면 그 상자 · 선을 고름", "Click to select the box or line"],
+  Rest: ["쉬는 갈래", "Resting branches"],
+  RestHint: [
+    "조건이 안 맞아 쉬는 곳 — 누르면 그 선을 고름",
+    "Idle because a condition is not met — click to select the line",
+  ],
   Design: ["설계 때 정할 것", "To decide at design time"],
   DesignHint: ["여기서 바꾸면 그 상자도 바뀜", "Changing here changes the box too"],
   Vars: ["변수 예시값", "Variable samples"],
@@ -333,33 +338,45 @@ export function renderVerify(
 
   /* 끊긴 곳 */
   const spots = breaks(lg, opts.values ?? {}, { logics: opts.logics });
-  const spotBlock = spots.length
-    ? [
-        el("div", {
-          className: "m02-dfver__block m02-dfver__breaks",
+  const spotList = (list: typeof spots, hint: TextKey): HTMLElement[] => [
+    el("ul", {
+      className: "m02-dfver__list",
+      children: list.map((s) =>
+        el("li", {
           children: [
-            el("strong", { text: tv("Breaks") }),
-            el("ul", {
-              className: "m02-dfver__list",
-              children: spots.map((s) =>
-                el("li", {
-                  children: [
-                    createButton({
-                      label: s.text,
-                      variant: "ghost",
-                      size: "sm",
-                      disabled: !s.box || !on.select,
-                      onClick: () => on.select?.({ box: s.box, port: s.port, link: s.link }),
-                    }),
-                  ],
-                }),
-              ),
+            createButton({
+              label: s.text,
+              variant: "ghost",
+              size: "sm",
+              disabled: !s.box || !on.select,
+              onClick: () => on.select?.({ box: s.box, port: s.port, link: s.link }),
             }),
-            el("p", { className: "m02-dfver__muted", text: tv("BreaksHint") }),
           ],
         }),
-      ]
-    : [];
+      ),
+    }),
+    el("p", { className: "m02-dfver__muted", text: tv(hint) }),
+  ];
+  const problems = spots.filter((s) => s.level !== "쉼");
+  const resting = spots.filter((s) => s.level === "쉼");
+  const spotBlock = [
+    ...(problems.length
+      ? [
+          el("div", {
+            className: "m02-dfver__block m02-dfver__breaks",
+            children: [el("strong", { text: tv("Breaks") }), ...spotList(problems, "BreaksHint")],
+          }),
+        ]
+      : []),
+    ...(resting.length
+      ? [
+          el("div", {
+            className: "m02-dfver__block m02-dfver__rest",
+            children: [el("strong", { text: tv("Rest") }), ...spotList(resting, "RestHint")],
+          }),
+        ]
+      : []),
+  ];
 
   /* 설계 때 정할 것 — Model `designInputs`(변수 · 재료 자리 · 다른 로직) + 재료 조건 자리 */
   const designs = designInputs(lg);