feat(WEB): Pretendard 폰트 적용 및 HR/회계 모바일 필터 마이그레이션

- Pretendard Variable 폰트 추가 및 전역 적용
- HR 모듈 모바일 필터 적용:
  - AttendanceManagement: MobileFilter 컴포넌트 적용
  - EmployeeManagement: MobileFilter 컴포넌트 적용
  - SalaryManagement: MobileFilter 컴포넌트 적용
  - VacationManagement: MobileFilter 컴포넌트 적용
- 회계 모듈:
  - VendorManagement: MobileFilter 컴포넌트 적용
- 전자결재:
  - ReferenceBox: 모바일 UI 개선
- AuthenticatedLayout: 레이아웃 개선
- middleware: 설정 업데이트

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

src/layouts/AuthenticatedLayout.tsx

@@ -93,6 +93,14 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
   // 회사 선택 상태 (목업)
   const [selectedCompany, setSelectedCompany] = useState<string>("all");
 
+  // 🔧 클라이언트 마운트 상태 (새로고침 시 스피너 표시용)
+  const [isMounted, setIsMounted] = useState(false);
+
+  // 🔧 클라이언트 마운트 확인 (새로고침 시 스피너 표시)
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   // 메뉴 폴링 (30초마다 메뉴 변경 확인)
   // 백엔드 GET /api/v1/menus API 준비되면 자동 동작
   const { restartAfterAuth } = useMenuPolling({
@@ -309,6 +317,18 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
   // By removing this check, we allow the component to render immediately with default values
   // and update once hydration completes through the useEffect above.
 
+  // 🔧 새로고침 시 스피너 표시 (hydration 전)
+  if (!isMounted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-center">
+          <div className="inline-block h-10 w-10 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
+          <p className="text-muted-foreground text-sm">로딩 중...</p>
+        </div>
+      </div>
+    );
+  }
+
   // 현재 페이지가 대시보드인지 확인
   const isDashboard = pathname?.includes('/dashboard') || activeMenu === 'dashboard';