style: 표/패널 UI 전면 통일 + 화면설명 드로어·글씨크기·탭 개선

표 디자인
- 모든 표를 가벼운 스타일로 통일(.data-table 경량화: 작은 회색 헤더·연한 구분선·hover)
- 표/패널 바깥 테두리 둥글게(rounded-lg) 일괄 적용, 표 래퍼에 패딩 카드(p-4) 통일
- 표 헤더·데이터 정렬을 전 화면 좌측 기준으로 통일
  - .data-table th/td text-align:left (전역), 흩어진 center/right 정렬 정리
  - 재디자인 Tailwind 표(포장단위·단가·기본코드·담당자·업체·판매대행소·무료대상자·지정판매소)도 셀 좌측화
- 기본정보관리 등 나머지 소메뉴 표를 기본 코드 관리 스타일(가벼운 표·상태 pill)로 재디자인

워크스페이스/공통
- "이 화면 설명" → 새 탭 대신 우측 드로어 팝업(현재 화면과 동시에 보기, Esc·드래그 폭조절)
- 상단바 글씨 크기 조절(A−/A+), 작업 내용에 zoom 적용
- 탭 최대치 도달 시 자동 삭제 대신 안내 토스트, "모두 닫기"(업무 현황 탭은 보존)

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

app/Views/bag/layout/portal.php

@@ -72,10 +72,12 @@ tailwind.config = {
 <?php include __DIR__ . '/../../home/_dashboard_gov_portal_chrome_css.php'; ?>
 /* 업무 본문 표/유틸 (기존 사이트 레이아웃에서 계승) */
 .data-table { width: 100%; border-collapse: collapse; font-family: 'Pretendard', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
-.data-table th, .data-table td { border: 1px solid #ccc; padding: 4px 8px; white-space: nowrap; font-size: 13px; }
-.data-table th { background-color: #e9ecef; text-align: center; vertical-align: middle; font-weight: bold; color: #333; }
-.data-table tbody tr:nth-child(even) td { background-color: #f9f9f9; }
-.data-table tbody tr:hover td { background-color: #e6f7ff !important; }
+.data-table { font-size: 13px; }
+.data-table th, .data-table td { text-align: left; padding: 0.55rem 0.5rem; white-space: nowrap; border: 0; border-bottom: 1px solid #e5e7eb; }
+.data-table thead th { font-size: 0.6875rem; font-weight: 600; color: #6b7280; background: transparent; vertical-align: middle; }
+.data-table tbody td { color: #374151; }
+.data-table tbody tr:last-child td { border-bottom: 0; }
+.data-table tbody tr:hover td { background-color: #f9fafb; }
 @media print {
   .portal-header, .sidebar, .portal-footer, .no-print, nav.portal-top-nav { display: none !important; }
   body.gov-portal-shell { background: #fff; display: block; }
@@ -90,6 +92,11 @@ tailwind.config = {
       <?= view('home/_dashboard_gov_portal_brand', ['brandHref' => base_url('/')]) ?>
       <?= view('home/_dashboard_gov_portal_topnav_click', $navPartial) ?>
       <div class="portal-header-utils" style="display:flex;align-items:center;gap:.5rem;">
+        <div class="ws-fontctl" title="글씨 크기 조절" style="display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:1px;">
+          <button type="button" id="wsFontMinus" title="글씨 작게" style="width:24px;height:22px;border:0;background:transparent;color:#fff;cursor:pointer;font-size:11px;line-height:1;border-radius:5px;">A−</button>
+          <span id="wsFontPct" style="min-width:34px;text-align:center;color:#fff;font-size:.68rem;font-weight:600;">100%</span>
+          <button type="button" id="wsFontPlus" title="글씨 크게" style="width:24px;height:22px;border:0;background:transparent;color:#fff;cursor:pointer;font-size:14px;line-height:1;border-radius:5px;">A+</button>
+        </div>
         <span class="user-line">
           <?php if ($lgLabel !== ''): ?><strong><?= esc($lgLabel) ?></strong> · <?php endif; ?>
           <?= esc($levelName) ?> · <?= esc($mbName) ?>님
@@ -120,7 +127,7 @@ tailwind.config = {
       <div style="display:flex;align-items:center;justify-content:space-between;gap:.5rem;">
         <h1 class="work-titlebar" style="margin-bottom:0;"><i class="fa-solid fa-folder-open tb-ico"></i><?= esc($title) ?></h1>
         <?php if ($helpUrl !== ''): ?>
-        <a href="<?= esc($helpUrl, 'attr') ?>" target="_blank" rel="noopener" class="no-print" style="display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:6px;background:#fff;border:1px solid var(--border);color:#1a2b4b;text-decoration:none;font-size:.75rem;font-weight:600;white-space:nowrap;">
+        <a href="<?= esc($helpUrl, 'attr') ?>" rel="noopener" class="no-print portal-help" style="display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:6px;background:#fff;border:1px solid var(--border);color:#1a2b4b;text-decoration:none;font-size:.75rem;font-weight:600;white-space:nowrap;">
           <i class="fa-regular fa-circle-question"></i> 이 화면 설명
         </a>
         <?php endif; ?>
@@ -207,5 +214,62 @@ tailwind.config = {
     else run();
   })();
   </script>
+
+  <!-- 화면 설명 드로어(팝업) -->
+  <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.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; }
+  .help-drawer-head .hd-btn:hover { background: rgba(255,255,255,.28); }
+  .help-drawer iframe { flex: 1; width: 100%; border: 0; }
+  .help-drawer-grip { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; }
+  </style>
+  <div id="helpDrawer" class="help-drawer no-print" aria-hidden="true">
+    <div class="help-drawer-grip" id="helpDrawerGrip"></div>
+    <div class="help-drawer-head">
+      <span><i class="fa-regular fa-circle-question"></i> 화면 설명</span>
+      <div><button type="button" id="helpDrawerClose" class="hd-btn" title="닫기">&times;</button></div>
+    </div>
+    <iframe id="helpDrawerFrame" title="화면 설명"></iframe>
+  </div>
+  <script>
+  (function () {
+    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); }
+      drawer.classList.add('open');
+    }
+    function closeHelp() { drawer.classList.remove('open'); }
+    document.addEventListener('click', function (e) {
+      var h = e.target.closest ? e.target.closest('a.portal-help') : null;
+      if (!h) return;
+      e.preventDefault();
+      openHelp(h.getAttribute('href'));
+    });
+    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'; });
+    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 = ''; });
+
+    // 글씨 크기 조절 — 본문(.work-main) 영역에 zoom 적용. 헤더/사이드바는 그대로.
+    var FONT_KEY = 'jrj_font_scale';
+    var target = document.querySelector('.work-main') || document.body;
+    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 pct = document.getElementById('wsFontPct'); if (pct) pct.textContent = s + '%';
+    }
+    applyScale(curScale());
+    var plus = document.getElementById('wsFontPlus'), minus = document.getElementById('wsFontMinus');
+    if (plus) plus.addEventListener('click', function () { applyScale(curScale() + 10); });
+    if (minus) minus.addEventListener('click', function () { applyScale(curScale() - 10); });
+  })();
+  </script>
 </body>
 </html>