feat(WEB): 입력 컴포넌트 공통화 및 UI 개선

- 숫자/통화/전화번호/사업자번호 등 특수 입력 컴포넌트 추가
- MobileCard 컴포넌트 통합 (ListMobileCard 제거)
- IntegratedListTemplateV2 페이지네이션 버그 수정 (NaN 이슈)
- IntegratedDetailTemplate 타이틀 중복 수정
- 문서 시스템 컴포넌트 추가
- 헤더 벨 아이콘 포커스 스타일 개선

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

src/components/document-system/viewer/DocumentContent.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React, { useRef, ReactNode } from 'react';
+import { UseDragReturn } from '../types';
+
+interface DocumentContentProps {
+  children: ReactNode;
+  zoom: number;
+  drag: UseDragReturn;
+  enableDrag?: boolean;
+}
+
+/**
+ * 문서 콘텐츠 영역
+ * - 줌 적용
+ * - 드래그 이동 (줌 100% 초과 시)
+ */
+export function DocumentContent({
+  children,
+  zoom,
+  drag,
+  enableDrag = true,
+}: DocumentContentProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // 드래그는 줌 100% 초과 시에만 활성화
+  const isDragEnabled = enableDrag && zoom > 100;
+
+  return (
+    <div
+      ref={containerRef}
+      className="flex-1 overflow-auto bg-gray-100 relative print:overflow-visible print:bg-white"
+      {...(isDragEnabled ? drag.handlers : {})}
+      style={{
+        cursor: isDragEnabled ? (drag.isDragging ? 'grabbing' : 'grab') : 'default',
+      }}
+    >
+      <div
+        ref={contentRef}
+        className="p-4 origin-top-left transition-transform duration-150 ease-out print:p-0 print:transform-none"
+        style={{
+          transform: `scale(${zoom / 100}) translate(${drag.position.x / (zoom / 100)}px, ${drag.position.y / (zoom / 100)}px)`,
+          minWidth: '800px',
+        }}
+      >
+        {children}
+      </div>
+
+      {/* 모바일 줌 힌트 */}
+      {zoom === 100 && enableDrag && (
+        <div className="sm:hidden absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/70 text-white text-xs px-3 py-1.5 rounded-full print:hidden">
+          확대 후 드래그로 이동
+        </div>
+      )}
+    </div>
+  );
+}