feat: TFT/OLED 캔버스 클릭 시 확대 오버레이

- 클릭 → 화면 최대 3배 확대, 90vw/90vh 이내로 제한
- 오버레이 클릭 또는 ESC 키로 닫기
- cursor:zoom-in/zoom-out 표시

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web-ui/arduino-emulator.html

@@ -117,7 +117,6 @@
   .oled-dot { width:6px; height:6px; border-radius:50%; background:#333; flex-shrink:0; }
   .oled-dot.on { background:#60a5fa; box-shadow:0 0 4px #60a5fa; }
   .oled-wrap { background:#000; border:2px solid #222; border-radius:4px; padding:4px; position:relative; }
-  #oled-canvas { display:block; max-width:100%; height:auto; image-rendering:pixelated; }
   .oled-placeholder { position:absolute; inset:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; pointer-events:none; }
   .oled-placeholder span { font-size:10px; color:#333; letter-spacing:.05em; }
   .oled-placeholder .oled-ph-grid { width:100%; height:2px; background:repeating-linear-gradient(90deg,#1a1a1a 0,#1a1a1a 4px,transparent 4px,transparent 8px); }
@@ -128,7 +127,25 @@
   .tft-dot { width:6px; height:6px; border-radius:50%; background:#333; flex-shrink:0; }
   .tft-dot.on { background:#22c55e; box-shadow:0 0 4px #22c55e; }
   .tft-wrap { background:#000; border:2px solid #222; border-radius:4px; padding:4px; overflow:hidden; }
-  #tft-canvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
+  #tft-canvas { display:block; width:100%; height:auto; image-rendering:pixelated; cursor:zoom-in; }
+  #oled-canvas { display:block; max-width:100%; height:auto; image-rendering:pixelated; cursor:zoom-in; }
+
+  /* 확대 오버레이 */
+  #canvas-zoom-overlay {
+    display:none; position:fixed; inset:0; z-index:9999;
+    background:rgba(0,0,0,.85); align-items:center; justify-content:center;
+    cursor:zoom-out;
+  }
+  #canvas-zoom-overlay.open { display:flex; }
+  #canvas-zoom-img {
+    image-rendering:pixelated; max-width:90vw; max-height:90vh;
+    border:2px solid #333; border-radius:4px;
+    box-shadow:0 8px 40px rgba(0,0,0,.8);
+  }
+  #canvas-zoom-hint {
+    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
+    font-size:11px; color:#555; pointer-events:none;
+  }
 
   /* DHT sensor controls */
   .dht-section { padding:10px 14px; flex-shrink:0; border-bottom:1px solid var(--bdr-in); }
@@ -7905,6 +7922,40 @@ function mobToggleBoard(){
     document.getElementById('mobtab-serial').classList.remove('active');
   }
 }
+
+// ── 캔버스 확대 오버레이 ──────────────────────────────────────────────────────
+(function() {
+  const overlay = document.createElement('div');
+  overlay.id = 'canvas-zoom-overlay';
+  overlay.innerHTML = '<img id="canvas-zoom-img"><div id="canvas-zoom-hint">클릭 또는 ESC로 닫기</div>';
+  document.body.appendChild(overlay);
+
+  function openZoom(canvas) {
+    const img = document.getElementById('canvas-zoom-img');
+    img.src = canvas.toDataURL();
+    // 자연 크기의 3배, 화면 90% 이내
+    const scale = Math.min(3, window.innerWidth * 0.9 / canvas.width, window.innerHeight * 0.9 / canvas.height);
+    img.style.width  = (canvas.width  * scale) + 'px';
+    img.style.height = (canvas.height * scale) + 'px';
+    overlay.classList.add('open');
+  }
+
+  function closeZoom() { overlay.classList.remove('open'); }
+
+  overlay.addEventListener('click', closeZoom);
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeZoom(); });
+
+  // TFT / OLED 캔버스에 클릭 핸들러 연결 (DOM 준비 후)
+  document.addEventListener('DOMContentLoaded', () => {
+    ['tft-canvas', 'oled-canvas'].forEach(id => {
+      const c = document.getElementById(id);
+      if (c) c.addEventListener('click', () => openZoom(c));
+    });
+  });
+
+  // canvas가 나중에 그려질 수 있으므로 전역 노출
+  window._canvasZoomOpen = openZoom;
+})();
 </script>
 </body>
 </html>