feat(M02): 흐름도 다이어그램 — 기댐 선(규칙의 조건 알약 → 규칙 자리) · 빈 판 안내 세 줄 · 쉼 갈래(회색 점선 · 받는 상자 흐리게 · 「!」 는 문제에만)(PLAN 35-9 브레인 검증)

- Model ruleSources · elementPort 로 기댐 선(표 조건 · 조건 · 재료 「규격에 포함」) · 흐름 길에도 칠함 · 누르면 그 규칙 자리(선 · 재료 상자) 고름
- breaks level(쉼 · 문제) · 없으면 「통과 안 됨」 = 쉼
- 끌기 손잡이를 Parts 로(Diagram 681줄 · Parts 320줄)
- 시험 test_m02_df_diagram_parts.py 4 통과 · DataFlow 전부 검사 초록

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

M02_MasterTemplete/DataFlow/M02_DF_Diagram.css

@@ -410,3 +410,91 @@
   font-size: 11px;
   font-weight: 700;
 }
+
+/* 기댐 선 — 규칙이 기대는 알약 → 그 규칙이 있는 곳 · 흐린 점선 + 화살 */
+.m02-dfdg__dep {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.m02-dfdg__depwire {
+  fill: none;
+  stroke: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
+  stroke-width: 1.5;
+  stroke-dasharray: 3 4;
+}
+
+.m02-dfdg__arrow {
+  fill: var(--color-text-muted);
+}
+
+.m02-dfdg__deptext rect {
+  fill: var(--color-canvas);
+  stroke: none;
+  opacity: 0.85;
+}
+
+.m02-dfdg__deptext text {
+  fill: var(--color-text-muted);
+  font-size: 10px;
+}
+
+.m02-dfdg__dep.is-strong .m02-dfdg__depwire {
+  stroke: var(--color-accent);
+  stroke-width: 2.5;
+}
+
+.m02-dfdg__dep.is-back .m02-dfdg__depwire {
+  stroke: var(--dfdg-back);
+  stroke-width: 2.5;
+}
+
+.m02-dfdg__dep.is-fwd .m02-dfdg__depwire {
+  stroke: var(--dfdg-fwd);
+  stroke-width: 2.5;
+}
+
+.m02-dfdg__dep.is-dim {
+  opacity: 0.25;
+}
+
+/* 쉼 — 조건이 안 맞아 이번엔 안 지나감(문제 아님) */
+.m02-dfdg__link.is-rest .m02-dfdg__wire {
+  stroke: var(--color-text-muted);
+  stroke-width: 1.5;
+  stroke-dasharray: 2 5;
+}
+
+.m02-dfdg__restmark rect {
+  fill: var(--color-surface);
+  stroke: var(--color-text-muted);
+  stroke-dasharray: 2 2;
+}
+
+.m02-dfdg__restmark text {
+  fill: var(--color-text-muted);
+  font-size: 10px;
+}
+
+.m02-dfdg__box.is-rest {
+  opacity: 0.5;
+}
+
+/* 빈 판 안내 — 가운데 세 줄 */
+.m02-dfdg__empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: var(--spacing-16) var(--spacing-24);
+  list-style: none;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  pointer-events: none;
+}