feat: 화면설명 소제목 스크롤·강조 + 글씨크기 메뉴 확대 + 드로어 개선

- screenHelp 앵커(?hl=)로 '이 화면 설명' 클릭 시 해당 소제목으로 스크롤·강조, 재오픈 시 재강조(postMessage)
- 글씨 크기(A−/A+)가 상단 대메뉴·좌측 사이드바까지 확대, 관리자 페이지에도 조절 기능 추가
- 화면 설명 드로어 양방향 리사이즈(좁히기 가능) + 기본 너비 2배

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/Views/bag/layout/portal.php

@@ -217,7 +217,7 @@ tailwind.config = {
 
   <!-- 화면 설명 드로어(팝업) -->
   <style>
-  .help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); background: #fff; box-shadow: -8px 0 26px rgba(0,0,0,.18); z-index: 9999; display: none; flex-direction: column; }
+  .help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 92vw); background: #fff; box-shadow: -8px 0 26px rgba(0,0,0,.18); z-index: 9999; display: none; flex-direction: column; }
   .help-drawer.open { display: flex; }
   .help-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; background: #1a2b4b; color: #fff; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
   .help-drawer-head .hd-btn { color: #fff; background: rgba(255,255,255,.14); border: 0; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-left: 4px; }
@@ -238,7 +238,12 @@ tailwind.config = {
     var drawer = document.getElementById('helpDrawer'), dFrame = document.getElementById('helpDrawerFrame');
     function openHelp(url) {
       var u = url; try { var x = new URL(url, location.href); x.searchParams.set('embed', '1'); u = x.href; } catch (e) {}
-      if (dFrame.getAttribute('data-src') !== u) { dFrame.src = u; dFrame.setAttribute('data-src', u); }
+      if (dFrame.getAttribute('data-src') !== u) {
+        dFrame.src = u; dFrame.setAttribute('data-src', u);
+      } else {
+        // 같은 URL → 재로드 안 함. 매뉴얼에 다시 강조하라고 알림(껐다 켜도 강조되도록)
+        try { dFrame.contentWindow.postMessage({ type: 'manual-hl' }, location.origin); } catch (e) {}
+      }
       drawer.classList.add('open');
     }
     function closeHelp() { drawer.classList.remove('open'); }
@@ -251,18 +256,23 @@ tailwind.config = {
     document.getElementById('helpDrawerClose').addEventListener('click', closeHelp);
     document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeHelp(); });
     var grip = document.getElementById('helpDrawerGrip'), dragging = false;
-    grip.addEventListener('mousedown', function (e) { e.preventDefault(); dragging = true; document.body.style.userSelect = 'none'; });
+    // 드래그 중 iframe 이 마우스 이벤트를 가로채면(특히 좁힐 때) 멈추므로, 화면 전체 투명 오버레이로 이벤트를 가로챈다.
+    var ov = document.createElement('div');
+    ov.style.cssText = 'position:fixed;inset:0;z-index:10000;cursor:col-resize;display:none;';
+    document.body.appendChild(ov);
+    grip.addEventListener('mousedown', function (e) { e.preventDefault(); dragging = true; ov.style.display = 'block'; document.body.style.userSelect = 'none'; });
     document.addEventListener('mousemove', function (e) { if (!dragging) return; var w = window.innerWidth - e.clientX; drawer.style.width = Math.min(window.innerWidth * 0.92, Math.max(300, w)) + 'px'; });
-    document.addEventListener('mouseup', function () { dragging = false; document.body.style.userSelect = ''; });
+    document.addEventListener('mouseup', function () { if (!dragging) return; dragging = false; ov.style.display = 'none'; document.body.style.userSelect = ''; });
 
-    // 글씨 크기 조절 — 본문(.work-main) 영역에 zoom 적용. 헤더/사이드바는 그대로.
+    // 글씨 크기 조절 — 본문 + 상단 대메뉴 + 좌측 사이드바(메뉴)에 zoom 적용.
     var FONT_KEY = 'jrj_font_scale';
-    var target = document.querySelector('.work-main') || document.body;
+    var scaleSelectors = ['.portal-header', '.sidebar', '.work-main'];
     function curScale() { var s = parseInt(localStorage.getItem(FONT_KEY) || '100', 10); return (s >= 70 && s <= 150) ? s : 100; }
     function applyScale(s) {
       s = Math.min(150, Math.max(70, s));
       try { localStorage.setItem(FONT_KEY, String(s)); } catch (e) {}
-      target.style.zoom = (s / 100);
+      var z = s / 100;
+      scaleSelectors.forEach(function (sel) { var el = document.querySelector(sel); if (el) el.style.zoom = z; });
       var pct = document.getElementById('wsFontPct'); if (pct) pct.textContent = s + '%';
     }
     applyScale(curScale());