diff --git a/frontend/src/lib/components/HandwriteCanvas.svelte b/frontend/src/lib/components/HandwriteCanvas.svelte
index ee5eb4e..892b3f5 100644
--- a/frontend/src/lib/components/HandwriteCanvas.svelte
+++ b/frontend/src/lib/components/HandwriteCanvas.svelte
@@ -159,8 +159,10 @@
     const dpr = window.devicePixelRatio || 1;
     canvas.width = cssWidth * dpr;
     canvas.height = cssHeight * dpr;
-    canvas.style.width = `${cssWidth}px`;
-    canvas.style.height = `${cssHeight}px`;
+    // canvas.style.width/height 는 svelte 의 style:width / style:height directive 가
+    // reactive 로 처리. imperative set 은 inline style="..." 의 reactive 변수
+    // (예: style="cursor: {tool}") 갱신 시 함께 덮어써서 사라지는 회귀 (확대 = canvas
+    // 가 internal pixel 그대로 displayed) 의 원인이었음.
     const ctx = canvas.getContext('2d');
     if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     scheduleRedraw();
@@ -802,7 +804,10 @@
       oncontextmenu={(e) => e.preventDefault()}
       onselectstart={(e) => e.preventDefault()}
       class="block"
-      style="touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: {tool === 'eraser' ? 'cell' : 'crosshair'};"
+      style:cursor={tool === 'eraser' ? 'cell' : 'crosshair'}
+      style:width={cssWidth ? `${cssWidth}px` : undefined}
+      style:height={cssHeight ? `${cssHeight}px` : undefined}
+      style="touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;"
     ></canvas>
 
     {#if DBG}