fix(study): debug — 좌상단 빨간 사각형 + 빨간 굵은 stroke 강제

stroke 가 안 보이는 원인 격리. iPad 화면에서:
- 좌상단 빨간 50x50 사각형 보임 + 빨간 stroke 보임 → 토큰 색 문제
- 사각형 보임 + stroke 안 보임 → drawStroke / strokeStyle 문제
- 사각형도 안 보임 → redraw 미호출 또는 canvas 자체 가려짐

frontend/src/lib/components/HandwriteCanvas.svelte

@@ -117,25 +117,24 @@
     redraw();
   }
 
-  // ── render — 단순 ctx.stroke() 로 갈아치움 (perfect-freehand 미사용).
-  // 이유: perfect-freehand 의 polygon fill 이 그려지지 않는 보고. 단순 line 으로
-  // 안정성 확보 후 문제 격리. 압력 효과는 lineWidth 변경으로 흉내.
+  // ── render — 디버그 모드: stroke 빨강 + 굵게 + 좌상단 빨간 사각형 강제.
+  // 사용자 보고에 따라 격리: 빨간 사각형 보임 + 빨간 stroke 안 보임 → drawStroke 문제.
+  // 빨간 사각형도 안 보임 → redraw 미호출 / canvas 가려짐.
   function drawStroke(ctx: CanvasRenderingContext2D, s: Stroke) {
     if (s.points.length === 0) return;
-    ctx.beginPath();
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
-    ctx.lineWidth = baseSize;
-    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = 12;        // 디버그: 충분히 굵게
+    ctx.strokeStyle = '#ff3333'; // 디버그: 빨강 강제
+    ctx.fillStyle = '#ff3333';
     if (s.points.length === 1) {
-      // 점 하나만 있으면 작은 원
       const [x, y] = s.points[0];
       ctx.beginPath();
-      ctx.fillStyle = strokeColor;
-      ctx.arc(x, y, baseSize / 2, 0, Math.PI * 2);
+      ctx.arc(x, y, 6, 0, Math.PI * 2);
       ctx.fill();
       return;
     }
+    ctx.beginPath();
     ctx.moveTo(s.points[0][0], s.points[0][1]);
     for (let i = 1; i < s.points.length; i++) {
       ctx.lineTo(s.points[i][0], s.points[i][1]);
@@ -161,6 +160,11 @@
     if (!ctx) return;
     ctx.clearRect(0, 0, cssWidth, cssHeight);
     drawTraceBackground(ctx);
+
+    // 디버그: 좌상단 빨간 사각형 (50x50). 보이면 redraw + canvas 정상 동작.
+    ctx.fillStyle = '#ff0000';
+    ctx.fillRect(10, 10, 50, 50);
+
     for (const s of strokes) {
       drawStroke(ctx, s);
     }