feat(expense): 첨부 뷰어 모달 — 이미지 미리보기 + 펜 주석

승인 대기 페이지의 "첨부" 텍스트 링크를 클립 아이콘 버튼으로 교체.
클릭 시 모달 팝업으로 이미지 미리보기 + 마우스 펜 주석 + 다운로드.

뷰어 컴포넌트 (전역, 다른 페이지에서도 재사용 가능):
- 좌측: 첨부 목록 (썸네일/메타)
- 우측: 캔버스 스택 (img + 투명 canvas)
- 도구: 펜/지우개, 색상 4종, 굵기 3종, 전체 지우기, 합성 PNG 저장, 원본 열기
- 이미지 외 파일은 다운로드 링크만 표시
- ESC/배경 클릭으로 닫기, pointer events 지원

전역 노출: window.ErpAttachViewer.{open, openFor, close}

app/static/erp-attach-viewer.css

@@ -0,0 +1,116 @@
+/* ════════════════════════════════════════════════════
+   첨부 뷰어 모달 — 이미지 미리보기 + 펜 주석
+   ════════════════════════════════════════════════════ */
+
+.eav-overlay {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(0, 0, 0, 0.62);
+  display: none;
+  align-items: stretch; justify-content: center;
+  padding: 24px;
+}
+.eav-overlay[data-open="true"] { display: flex; }
+
+.eav-modal {
+  background: var(--color-canvas-white, #fff);
+  width: 100%;
+  max-width: 1180px;
+  border-radius: 14px;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
+}
+
+.eav-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--color-subtle-ash, #e5e5e5);
+  background: var(--color-canvas-white, #fff);
+}
+.eav-title { font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
+             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.eav-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.eav-btn {
+  border: 1px solid var(--color-subtle-ash, #e5e5e5);
+  background: var(--color-canvas-white, #fff);
+  color: var(--color-rich-black, #0a0a0a);
+  padding: 5px 10px; font-size: 12px; border-radius: 8px; cursor: pointer;
+  font-family: inherit;
+}
+.eav-btn:hover { background: var(--color-ghost-gray, #f2f2f2); }
+.eav-btn.is-active { background: var(--color-deep-black, #000); color: #fff; border-color: #000; }
+.eav-color {
+  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
+  box-shadow: 0 0 0 1px var(--color-subtle-ash, #e5e5e5);
+  cursor: pointer; padding: 0;
+}
+.eav-color.is-active { box-shadow: 0 0 0 2px var(--color-deep-black, #000); }
+.eav-close {
+  width: 28px; height: 28px; border-radius: 8px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 0; background: transparent; cursor: pointer; font-size: 18px;
+}
+.eav-close:hover { background: var(--color-ghost-gray, #f2f2f2); }
+
+.eav-body {
+  display: grid; grid-template-columns: 200px 1fr; min-height: 0; height: 100%;
+  background: #1a1a1a;
+}
+.eav-list {
+  background: #fff; border-right: 1px solid var(--color-subtle-ash, #e5e5e5);
+  overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px;
+}
+.eav-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px; border-radius: 8px; cursor: pointer;
+  border: 1px solid transparent; background: transparent;
+  text-align: left; font-family: inherit; font-size: 12px;
+}
+.eav-item:hover { background: var(--color-ghost-gray, #f2f2f2); }
+.eav-item.is-active { background: var(--color-ghost-gray, #f2f2f2); border-color: var(--color-subtle-ash, #e5e5e5); }
+.eav-item-thumb {
+  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
+  background: var(--color-ghost-gray, #f2f2f2);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 16px; color: var(--color-midtone-gray, #737373);
+  overflow: hidden;
+}
+.eav-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.eav-item-meta { flex: 1; min-width: 0; }
+.eav-item-name { font-weight: 500; color: var(--color-rich-black, #0a0a0a);
+                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.eav-item-sub { font-size: 11px; color: var(--color-midtone-gray, #737373); }
+
+.eav-canvas-wrap {
+  position: relative;
+  overflow: auto;
+  display: flex; align-items: center; justify-content: center;
+  padding: 16px;
+}
+.eav-canvas-stack {
+  position: relative;
+  line-height: 0;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  background: #fff;
+}
+.eav-img { display: block; max-width: 100%; height: auto; user-select: none; }
+.eav-canvas {
+  position: absolute; left: 0; top: 0;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.eav-fallback {
+  color: #fff; text-align: center; padding: 40px;
+}
+.eav-fallback a {
+  display: inline-block; margin-top: 12px;
+  background: #fff; color: #000; padding: 8px 16px; border-radius: 8px;
+}
+
+@media (max-width: 720px) {
+  .eav-body { grid-template-columns: 1fr; grid-template-rows: 80px 1fr; }
+  .eav-list { flex-direction: row; overflow-x: auto; }
+  .eav-item { flex-shrink: 0; min-width: 160px; }
+}