feat(M02): 흐름도 다이어그램 — 선 규칙 이름표 · 흐름 길 칠하기 · 끊긴 곳 · 알약 고름 · 가운데 단추 판 옮기기 · 글자 선택 막음(PLAN 35-9)

- 순수 부분을 M02_DF_Diagram_Parts.ts 로 나눔(700줄 안)

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

@@ -70,8 +70,15 @@
     transparent 1px
   );
   background-size: 20px 20px;
-  cursor: grab;
+  cursor: default;
   touch-action: none;
+  /* 왼쪽 끌기로 글자가 잡히지 않게 */
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.m02-dfdg__view.is-panning {
+  cursor: grabbing;
 }
 
 .m02-dfdg__world {
@@ -274,3 +281,132 @@
   border-color: var(--cfdg-in);
   color: var(--cfdg-in);
 }
+
+/* ── 흐름도 더함: 선 규칙 이름표 · 흐름 길 · 끊긴 곳 · 알약 고름 ── */
+.m02-dfdg {
+  --dfdg-back: var(--color-accent);
+  --dfdg-fwd: #c2410c;
+}
+
+:root[data-theme="dark"] .m02-dfdg {
+  --dfdg-fwd: #f0a35e;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .m02-dfdg {
+    --dfdg-fwd: #f0a35e;
+  }
+}
+
+.m02-dfdg__rule rect {
+  fill: var(--color-surface);
+  stroke: var(--color-border);
+}
+
+.m02-dfdg__rule text {
+  fill: var(--color-text-secondary);
+  font-size: 11px;
+}
+
+.m02-dfdg__link.is-strong .m02-dfdg__rule rect {
+  stroke: var(--color-accent);
+}
+
+/* 흐름 길 — 색 + 굵기 + 점선(색만으로 뜻을 안 전함) */
+.m02-dfdg__link.is-back .m02-dfdg__wire {
+  stroke: var(--dfdg-back);
+  stroke-width: 3.5;
+}
+
+.m02-dfdg__link.is-fwd .m02-dfdg__wire {
+  stroke: var(--dfdg-fwd);
+  stroke-width: 3.5;
+  stroke-dasharray: 8 5;
+}
+
+.m02-dfdg__link.is-dim .m02-dfdg__wire,
+.m02-dfdg__link.is-dim .m02-dfdg__rule {
+  opacity: 0.25;
+}
+
+.m02-dfdg__box.is-back {
+  outline: 3px solid var(--dfdg-back);
+  outline-offset: 2px;
+}
+
+.m02-dfdg__box.is-fwd {
+  outline: 3px dashed var(--dfdg-fwd);
+  outline-offset: 2px;
+}
+
+.m02-dfdg__box.is-dim {
+  opacity: 0.45;
+}
+
+.m02-dfdg__pill.is-back {
+  box-shadow: 0 0 0 2px var(--dfdg-back);
+}
+
+.m02-dfdg__pill.is-fwd {
+  outline: 2px dashed var(--dfdg-fwd);
+  outline-offset: 1px;
+}
+
+.m02-dfdg__legend {
+  padding: 0 var(--spacing-8);
+  border-radius: 999px;
+  font-size: var(--text-caption);
+}
+
+.m02-dfdg__legend.is-back {
+  border: 2px solid var(--dfdg-back);
+  color: var(--dfdg-back);
+}
+
+.m02-dfdg__legend.is-fwd {
+  border: 2px dashed var(--dfdg-fwd);
+  color: var(--dfdg-fwd);
+}
+
+/* 고른 알약 테두리 */
+.m02-dfdg__pill.is-chosen {
+  box-shadow: 0 0 0 2px var(--color-text);
+}
+
+/* 끊긴 곳 */
+.m02-dfdg__warn {
+  position: absolute;
+  top: -9px;
+  right: -9px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--color-danger);
+  color: #fff;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  cursor: pointer;
+}
+
+.m02-dfdg__pill.is-broken {
+  border-color: var(--color-danger);
+}
+
+.m02-dfdg__pill-warn {
+  color: var(--color-danger);
+  font-weight: 700;
+}
+
+.m02-dfdg__linkwarn circle {
+  fill: var(--color-danger);
+}
+
+.m02-dfdg__linkwarn text {
+  fill: #fff;
+  font-size: 11px;
+  font-weight: 700;
+}