refactor(M02): 흐름도 — 시험판 Entry 지움 · 패널 「흐름도」 단추 하나(접기 · 펴기) · 끌기 손잡이 늘 보임(사용자 지시)

- M02_DF_Entry.ts · .css 지움(아무도 안 부름) · Paper · 상세 내용 틀이 쓰던 꾸밈 18 규칙은 M02_DF_Paper.css 로 옮김
- Paper 의 시험 로직(DF-) 받기 지움 — 다른 로직은 부르는 쪽 logics 로만
- 패널: 머리 「접기」 · 띠 「흐름도 ▸」 → 「흐름도」 단추 하나(펼치면 머리 · 접으면 띠 · aria-expanded) · 접기 전 너비 기억(펴면 그 너비)
- 끌기 손잡이: 세로 막대 + 가운데 잡이 늘 보임 · 올리면 강조
- typecheck · DataFlow 전부 검사 초록 · 시험 10 통과 · ORCA: 단추 머리 ↔ 띠 · onResize 560 → 40 → 560

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

M02_MasterTemplete/DataFlow/M02_DF_Panel.css

@@ -57,43 +57,64 @@
   padding: var(--spacing-4) 0;
 }
 
-/* 왼쪽 가장자리 끌기 */
+/* 왼쪽 가장자리 끌기 — 늘 보이는 손잡이(세로 막대 + 가운데 잡이) */
 .m02-dfp__grip {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: -4px;
+  left: -5px;
   z-index: 2;
-  width: 8px;
+  width: 10px;
   cursor: col-resize;
   touch-action: none;
+  background: color-mix(in srgb, var(--color-border) 70%, transparent);
+  border-radius: 4px;
+}
+
+.m02-dfp__grip::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 40px;
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+  background: var(--color-text-muted);
 }
 
 .m02-dfp__grip:hover,
 .m02-dfp__grip:focus-visible,
 .m02-dfp.is-resizing .m02-dfp__grip {
-  background: color-mix(in srgb, var(--color-accent) 35%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 40%, transparent);
   outline: none;
 }
 
+.m02-dfp__grip:hover::after,
+.m02-dfp__grip:focus-visible::after,
+.m02-dfp.is-resizing .m02-dfp__grip::after {
+  background: var(--color-accent);
+}
+
 .m02-dfp.is-resizing {
   user-select: none;
 }
 
-/* 접기 = 얇은 띠 */
+/* 접기 = 얇은 띠 — 같은 「흐름도」 단추를 세로로 */
 .m02-dfp__strip {
+  display: flex;
+  justify-content: center;
   width: 100%;
-  padding: var(--spacing-12) 0;
-  border: 0;
+  padding: var(--spacing-8) 0;
   background: var(--color-surface);
-  color: var(--color-text-secondary);
-  font: inherit;
-  writing-mode: vertical-rl;
-  cursor: pointer;
 }
 
-.m02-dfp__strip:hover,
-.m02-dfp__strip:focus-visible {
+/* 공용 작은 단추 크기는 그대로 — 글 방향만 세로 */
+.m02-dfp__strip .m02-dfp__toggle {
+  writing-mode: vertical-rl;
+}
+
+.m02-dfp__toggle[aria-expanded="true"] {
   color: var(--color-accent);
 }