diff --git a/claudedocs/[FIX-2026-02-26] windows-compatibility-checklist.md b/claudedocs/[FIX-2026-02-26] windows-compatibility-checklist.md
new file mode 100644
index 00000000..9cab31c1
--- /dev/null
+++ b/claudedocs/[FIX-2026-02-26] windows-compatibility-checklist.md	
@@ -0,0 +1,109 @@
+# Windows 호환성 개선 계획서
+
+> 작성일: 2026-02-26
+> 배경: macOS 개발환경 → Windows 공장 PC 사용자 환경 차이로 인한 이슈
+> 상태: 계획 단계
+
+---
+
+## 완료된 작업
+
+- [x] Popover 계열 컴포넌트 Windows 포커스 이슈 수정 (6개 파일)
+  - `ui/date-picker.tsx` — onPointerDownOutside/onInteractOutside 방어
+  - `ui/time-picker.tsx` — 동일
+  - `ui/date-range-picker.tsx` — 동일
+  - `ui/multi-select-combobox.tsx` — 동일
+  - `ui/searchable-select.tsx` — 동일
+  - `molecules/ColumnSettingsPopover.tsx` — 동일
+- [x] 삭제 버튼 아이콘 X → Trash2 통일 (23개 파일)
+
+---
+
+## Phase 1: IMPORTANT — 사용자 체감 영향 큰 항목
+
+### 1-1. backdrop-filter 성능 최적화
+- **파일**: `src/app/globals.css` (line 269-280)
+- **문제**: `backdrop-filter: blur()` 가 Windows GPU에서 비효율적 → 공장 PC에서 스크롤 버벅거림
+- **영향 범위**: `.clean-glass` 클래스 사용하는 전체 레이아웃 (Sidebar, Login 등)
+- **수정 방향**:
+  - `prefers-reduced-motion` / `prefers-reduced-transparency` 미디어쿼리로 분기
+  - 성능 낮은 환경에서는 `backdrop-filter: none` + 불투명 배경 대체
+- [ ] globals.css `.clean-glass` 수정
+- [ ] 적용된 컴포넌트에서 시각적 변화 확인
+
+### 1-2. 폰트 굵기 렌더링 차이 보정
+- **파일**: `src/app/globals.css` (line 219-235), `src/app/[locale]/layout.tsx` (line 14-19)
+- **문제**: Windows 폰트 렌더링이 macOS보다 ~0.5-1.5 weight 더 굵게 표시 (Pretendard 변수 폰트)
+- **영향 범위**: 전체 UI 텍스트
+- **수정 방향**:
+  - `-webkit-font-smoothing: antialiased` 확인 (이미 적용됨)
+  - `font-weight: 400` 명시적 지정
+  - 필요 시 Windows에서 `font-weight: 350` 적용 검토 (변수 폰트이므로 가능)
+- [ ] 현재 폰트 설정 확인
+- [ ] Windows에서 시각 비교 테스트 후 보정값 결정
+- [ ] globals.css 수정
+
+### 1-3. 스크롤바 동작 차이
+- **파일**: `src/app/globals.css` (line 332-412), `src/layouts/AuthenticatedLayout.tsx` (line 173-197)
+- **문제**: macOS는 스크롤바 자동 숨김, Windows는 항상 표시 → 투명→페이드인 방식이 어색
+- **영향 범위**: 모든 스크롤 가능한 영역
+- **수정 방향**:
+  - 스크롤바 thumb을 기본 살짝 보이게 (`rgba(0,0,0,0.1)`)
+  - `.is-scrolling` 시 진하게 (`rgba(0,0,0,0.2)`) 유지
+  - 너비 8px → 10-12px 로 Windows 기대치에 맞게 조정 검토
+- [ ] globals.css 스크롤바 스타일 수정
+- [ ] Windows에서 시각 확인
+
+### 1-4. 숫자 포맷 locale 명시
+- **파일**: `src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx` (line 65-68)
+- **문제**: `toLocaleString(undefined, ...)` → Windows 지역 설정에 따라 포맷 달라짐
+- **영향 범위**: 해당 페이지 숫자 표시 (다른 곳에도 동일 패턴 있는지 추가 검색 필요)
+- **수정 방향**:
+  - `undefined` → `'ko-KR'` 명시적 locale 지정
+  - 프로젝트 전체에서 동일 패턴 일괄 검색 후 수정
+- [ ] `toLocaleString(undefined` 패턴 전체 검색
+- [ ] locale을 `'ko-KR'`로 일괄 변경
+
+---
+
+## Phase 2: MINOR — 안정성/효율성 개선
+
+### 2-1. number input 스피너 버튼 숨김
+- **파일**: 품질관리 문서 등 `input[type="number"]` 사용처
+- **문제**: Windows에서 ↑↓ 스피너 버튼 표시 → 터치스크린에서 실수 클릭
+- **수정 방향**: 전역 CSS로 스피너 숨김 처리
+- [ ] globals.css에 `input[type="number"]` 스피너 숨김 CSS 추가
+
+### 2-2. 클립보드 API 에러 핸들링
+- **파일**: `src/app/[locale]/(protected)/dev/component-registry/ComponentRegistryClient.tsx` (line 44-48)
+- **문제**: `navigator.clipboard.writeText()` 가 Windows 보안 정책으로 실패 가능
+- **수정 방향**: try-catch + `document.execCommand('copy')` fallback
+- [ ] 클립보드 사용 코드 에러 핸들링 추가
+
+### 2-3. 출퇴근 시계 갱신 주기 최적화
+- **파일**: `src/app/[locale]/(protected)/hr/attendance/page.tsx` (line ~170-180)
+- **문제**: `setInterval(1000)` 매초 갱신 → 공장 PC CPU 부하
+- **수정 방향**: 날짜만 표시하므로 60초 간격으로 변경
+- [ ] setInterval 주기 1초 → 60초로 변경
+
+---
+
+## 테스트 체크리스트
+
+모든 수정 후 Windows 환경에서 확인:
+
+- [ ] DatePicker: Dialog 안에서 날짜 선택 → 값 정상 입력
+- [ ] DatePicker: 이전/다음달 날짜 클릭 → 팝업 유지, 월 이동
+- [ ] TimePicker: Dialog 안에서 시간 선택 → 정상 동작
+- [ ] 스크롤: 메인 레이아웃 + 테이블 스크롤 부드러움 확인
+- [ ] 폰트: 텍스트 두께가 macOS와 비슷한 수준인지 확인
+- [ ] 숫자 포맷: 천단위 구분자, 소수점 정상 표시
+- [ ] number input: 스피너 버튼 안 보이는지 확인
+
+---
+
+## 참고
+
+- Windows 공장 PC 사양: 보통 중저사양 (Intel i3-i5, 8GB RAM, 내장 GPU)
+- 브라우저: Chrome 또는 Edge (Chromium 기반)
+- 터치스크린 사용 가능성 있음
diff --git a/src/app/[locale]/(protected)/accounting/gift-certificates/page.tsx b/src/app/[locale]/(protected)/accounting/gift-certificates/page.tsx
index b36faedd..6211c99c 100644
--- a/src/app/[locale]/(protected)/accounting/gift-certificates/page.tsx
+++ b/src/app/[locale]/(protected)/accounting/gift-certificates/page.tsx
@@ -17,7 +17,7 @@ export default function GiftCertificatesPage() {
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (mode === 'edit' && id) {
+    if ((mode === 'edit' || mode === 'view') && id) {
       setIsLoading(true);
       getGiftCertificateById(id)
         .then((result) => {
@@ -33,6 +33,17 @@ export default function GiftCertificatesPage() {
     return <GiftCertificateDetail mode="new" />;
   }
 
+  if (mode === 'view' && id) {
+    if (isLoading) return <ListPageSkeleton showStats statsCount={4} tableColumns={8} />;
+    return (
+      <GiftCertificateDetail
+        mode="view"
+        id={id}
+        initialData={editData ?? undefined}
+      />
+    );
+  }
+
   if (mode === 'edit' && id) {
     if (isLoading) return <ListPageSkeleton showStats statsCount={4} tableColumns={8} />;
     return (
diff --git a/src/app/[locale]/(protected)/board/[boardCode]/page.tsx b/src/app/[locale]/(protected)/board/[boardCode]/page.tsx
index b8d049ea..bf9489ab 100644
--- a/src/app/[locale]/(protected)/board/[boardCode]/page.tsx
+++ b/src/app/[locale]/(protected)/board/[boardCode]/page.tsx
@@ -311,7 +311,7 @@ function BoardListContent({ boardCode }: { boardCode: string }) {
               <div className="flex-1 space-y-2">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-muted-foreground">#{globalIndex}</span>
+                    <span className="text-sm text-muted-foreground">{globalIndex}</span>
                     {item.isNotice && (
                       <Badge variant="destructive" className="text-xs">공지</Badge>
                     )}
diff --git a/src/app/[locale]/(protected)/boards/[boardCode]/page.tsx b/src/app/[locale]/(protected)/boards/[boardCode]/page.tsx
index ab47180d..fa0a3698 100644
--- a/src/app/[locale]/(protected)/boards/[boardCode]/page.tsx
+++ b/src/app/[locale]/(protected)/boards/[boardCode]/page.tsx
@@ -318,7 +318,7 @@ function DynamicBoardListContent({ boardCode }: { boardCode: string }) {
               <div className="flex-1 space-y-2">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-muted-foreground">#{globalIndex}</span>
+                    <span className="text-sm text-muted-foreground">{globalIndex}</span>
                     {item.isNotice && (
                       <Badge variant="destructive" className="text-xs">공지</Badge>
                     )}
diff --git a/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx b/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
index c39022d6..b7c008fc 100644
--- a/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
+++ b/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
@@ -502,7 +502,7 @@ export default function CustomerAccountManagementPage() {
               variant="outline"
               className="bg-gray-100 text-gray-700 font-mono text-xs"
             >
-              #{globalIndex}
+              {globalIndex}
             </Badge>
             <code className="inline-block text-xs bg-gray-100 text-gray-700 px-2.5 py-0.5 rounded-md font-mono whitespace-nowrap">
               {customer.code}
diff --git a/src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx b/src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx
index 4fd0d94f..49b6d51e 100644
--- a/src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx
+++ b/src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx
@@ -267,8 +267,8 @@ export default function OrderEditPage() {
     return (
       <div className="space-y-6">
         {/* 상태 뱃지 */}
-        <div className="flex items-center gap-2">
-          <code className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">
+        <div className="flex items-center gap-2 flex-wrap">
+          <code className="text-sm font-mono bg-gray-100 px-2 py-1 rounded whitespace-nowrap">
             {form.lotNumber}
           </code>
           {getOrderStatusBadge(form.status)}
@@ -283,7 +283,7 @@ export default function OrderEditPage() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               <div className="space-y-1">
                 <Label className="text-muted-foreground text-sm">로트번호</Label>
                 <p className="font-medium">{form.lotNumber}</p>
@@ -298,7 +298,7 @@ export default function OrderEditPage() {
               </div>
               <div className="space-y-1">
                 <Label className="text-muted-foreground text-sm">발주처</Label>
-                <p className="font-medium">{form.client}</p>
+                <p className="font-medium truncate">{form.client}</p>
               </div>
               <div className="space-y-1">
                 <Label className="text-muted-foreground text-sm">현장명</Label>
diff --git a/src/app/[locale]/(protected)/sales/order-management-sales/[id]/page.tsx b/src/app/[locale]/(protected)/sales/order-management-sales/[id]/page.tsx
index 1b183728..2a470ab4 100644
--- a/src/app/[locale]/(protected)/sales/order-management-sales/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/sales/order-management-sales/[id]/page.tsx
@@ -527,7 +527,7 @@ export default function OrderDetailPage() {
             <CardTitle className="text-lg">기본 정보</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
               <InfoItem label="로트번호" value={order.lotNumber} />
               <InfoItem label="수주일" value={order.orderDate} />
               <InfoItem label="수주처" value={order.client} />
@@ -555,7 +555,7 @@ export default function OrderDetailPage() {
               <InfoItem label="운임비용" value={order.shippingCostLabel || order.shippingCost} />
               <InfoItem label="수신자" value={order.receiver} />
               <InfoItem label="수신처 연락처" value={order.receiverContact} />
-              <div className="md:col-span-2">
+              <div className="col-span-2 md:col-span-4">
                 <p className="text-sm text-muted-foreground">주소</p>
                 <p className="font-medium">{order.address || "-"}</p>
               </div>
@@ -578,10 +578,10 @@ export default function OrderDetailPage() {
         {/* 제품내용 (아코디언) */}
         <Card>
           <CardHeader>
-            <div className="flex items-center justify-between">
-              <CardTitle className="text-lg">제품내용</CardTitle>
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <CardTitle className="text-lg shrink-0">제품내용</CardTitle>
               {((order.nodes && order.nodes.length > 0) || (order.products && order.products.length > 0)) && (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 shrink-0">
                   <Button
                     variant="ghost"
                     size="sm"
@@ -625,27 +625,25 @@ export default function OrderDetailPage() {
                       <button
                         type="button"
                         onClick={() => toggleProduct(productKey)}
-                        className="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
+                        className="w-full flex items-center p-3 sm:p-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left gap-2"
                       >
-                        <div className="flex items-center gap-3">
+                        <div className="shrink-0 w-7 h-7 flex items-center justify-center">
                           {isExpanded ? (
                             <ChevronDown className="h-5 w-5 text-gray-500" />
                           ) : (
                             <ChevronRight className="h-5 w-5 text-gray-500" />
                           )}
-                          <Package className="h-5 w-5 text-blue-600" />
-                          <div>
-                            <span className="font-medium">{productName}</span>
+                        </div>
+                        <Package className="h-5 w-5 text-blue-600 shrink-0" />
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium break-words">{productName}</div>
+                          <div className="flex flex-wrap items-center gap-x-2 text-sm text-gray-500">
                             {nodeWidth && nodeHeight && (
-                              <span className="ml-2 text-sm text-gray-500">
-                                ({nodeWidth} × {nodeHeight})
-                              </span>
+                              <span className="whitespace-nowrap">({nodeWidth} × {nodeHeight})</span>
                             )}
+                            <span className="whitespace-nowrap">부품 {nodeItems.length}개</span>
                           </div>
                         </div>
-                        <span className="text-sm text-gray-500">
-                          부품 {nodeItems.length}개
-                        </span>
                       </button>
 
                       {/* 부품 목록 (확장 시 표시) */}
@@ -701,27 +699,25 @@ export default function OrderDetailPage() {
                       <button
                         type="button"
                         onClick={() => toggleProduct(productKey)}
-                        className="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
+                        className="w-full flex items-center p-3 sm:p-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left gap-2"
                       >
-                        <div className="flex items-center gap-3">
+                        <div className="shrink-0 w-7 h-7 flex items-center justify-center">
                           {isExpanded ? (
                             <ChevronDown className="h-5 w-5 text-gray-500" />
                           ) : (
                             <ChevronRight className="h-5 w-5 text-gray-500" />
                           )}
-                          <Package className="h-5 w-5 text-blue-600" />
-                          <div>
-                            <span className="font-medium">{product.productName}</span>
+                        </div>
+                        <Package className="h-5 w-5 text-blue-600 shrink-0" />
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium break-words">{product.productName}</div>
+                          <div className="flex flex-wrap items-center gap-x-2 text-sm text-gray-500">
                             {product.openWidth && product.openHeight && (
-                              <span className="ml-2 text-sm text-gray-500">
-                                ({product.openWidth} × {product.openHeight})
-                              </span>
+                              <span className="whitespace-nowrap">({product.openWidth} × {product.openHeight})</span>
                             )}
+                            <span className="whitespace-nowrap">부품 {productItems.length}개</span>
                           </div>
                         </div>
-                        <span className="text-sm text-gray-500">
-                          부품 {productItems.length}개
-                        </span>
                       </button>
 
                       {/* 부품 목록 (확장 시 표시) */}
@@ -1206,37 +1202,37 @@ export default function OrderDetailPage() {
 
       {/* 생산지시 되돌리기 다이얼로그 */}
       <Dialog open={isRevertDialogOpen} onOpenChange={setIsRevertDialogOpen}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
+        <DialogContent className="max-w-md max-h-[85vh] flex flex-col">
+          <DialogHeader className="shrink-0">
             <DialogTitle className="flex items-center gap-2">
               <RotateCcw className="h-5 w-5 text-amber-600" />
               생산지시 되돌리기
             </DialogTitle>
           </DialogHeader>
 
-          <div className="space-y-4">
+          <div className="space-y-4 overflow-y-auto flex-1 min-h-0">
             {/* 수주 정보 박스 */}
-            <div className="border rounded-lg p-4 space-y-2 text-sm">
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">수주번호</span>
-                <span className="font-medium">{order.lotNumber}</span>
+            <div className="border rounded-lg p-3 space-y-2 text-sm">
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground whitespace-nowrap shrink-0">수주번호</span>
+                <span className="font-medium truncate">{order.lotNumber}</span>
               </div>
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">발주처</span>
-                <span>{order.client}</span>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground whitespace-nowrap shrink-0">발주처</span>
+                <span className="truncate">{order.client}</span>
               </div>
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">현장명</span>
-                <span>{order.siteName}</span>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground whitespace-nowrap shrink-0">현장명</span>
+                <span className="truncate">{order.siteName}</span>
               </div>
-              <div className="flex justify-between items-center">
-                <span className="text-muted-foreground">현재 상태</span>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground whitespace-nowrap shrink-0">현재 상태</span>
                 {getOrderStatusBadge(order.status)}
               </div>
             </div>
 
             {/* 경고 메시지 */}
-            <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm space-y-1">
+            <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm space-y-1">
               <p className="font-medium mb-2 text-amber-700">⚠️ 되돌리기 시 삭제되는 데이터</p>
               <ul className="space-y-1 text-amber-600">
                 <li>• 이 수주에 연결된 모든 작업지시가 삭제됩니다</li>
@@ -1253,38 +1249,40 @@ export default function OrderDetailPage() {
                 placeholder="되돌리기 사유를 입력해주세요 (선택)"
                 value={revertReason}
                 onChange={(e) => setRevertReason(e.target.value)}
-                rows={3}
+                rows={2}
               />
             </div>
 
             {/* 확인 안내 */}
-            <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm">
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm">
               <p className="text-red-700 font-medium">
                 이 작업은 되돌릴 수 없습니다. 정말로 생산지시를 되돌리시겠습니까?
               </p>
             </div>
           </div>
 
-          <DialogFooter className="flex-col sm:flex-row gap-2">
+          <DialogFooter className="shrink-0 flex-col gap-2 pt-2">
             <Button
               variant="outline"
               onClick={() => setIsRevertDialogOpen(false)}
+              className="w-full"
             >
               취소
             </Button>
-            <div className="flex gap-2">
+            <div className="flex flex-col sm:flex-row gap-2 w-full">
               {isDev && (
                 <Button
                   onClick={handleForceRevertProduction}
                   variant="destructive"
                   disabled={isForceReverting || isReverting}
+                  className="w-full sm:w-auto"
                 >
                   {isForceReverting ? "처리 중..." : "완전삭제 (DEV)"}
                 </Button>
               )}
               <Button
                 onClick={handleRevertProductionSubmit}
-                className="bg-amber-600 hover:bg-amber-700"
+                className="bg-amber-600 hover:bg-amber-700 w-full sm:w-auto"
                 disabled={isReverting || isForceReverting}
               >
                 <RotateCcw className="h-4 w-4 mr-1" />
@@ -1297,7 +1295,7 @@ export default function OrderDetailPage() {
 
       {/* 수주확정 되돌리기 다이얼로그 */}
       <Dialog open={isRevertConfirmDialogOpen} onOpenChange={setIsRevertConfirmDialogOpen}>
-        <DialogContent className="max-w-md">
+        <DialogContent className="max-w-md max-h-[90vh] flex flex-col">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <RotateCcw className="h-5 w-5 text-slate-600" />
@@ -1305,7 +1303,7 @@ export default function OrderDetailPage() {
             </DialogTitle>
           </DialogHeader>
 
-          <div className="space-y-4">
+          <div className="space-y-4 overflow-y-auto flex-1">
             {/* 수주 정보 박스 */}
             <div className="border rounded-lg p-4 space-y-2 text-sm">
               <div className="flex justify-between">
diff --git a/src/app/[locale]/(protected)/sales/order-management-sales/page.tsx b/src/app/[locale]/(protected)/sales/order-management-sales/page.tsx
index 98d3e2dc..49a3f351 100644
--- a/src/app/[locale]/(protected)/sales/order-management-sales/page.tsx
+++ b/src/app/[locale]/(protected)/sales/order-management-sales/page.tsx
@@ -613,7 +613,7 @@ function OrderListContent() {
               variant="outline"
               className="bg-gray-100 text-gray-700 font-mono text-xs"
             >
-              #{globalIndex}
+              {globalIndex}
             </Badge>
             <code className="inline-block text-xs bg-gray-100 text-gray-700 px-2.5 py-0.5 rounded-md font-mono whitespace-nowrap">
               {order.lotNumber}
diff --git a/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx b/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx
index bf4e83f0..0428751c 100644
--- a/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx
+++ b/src/components/accounting/BadDebtCollection/BadDebtDetail.tsx
@@ -9,7 +9,7 @@ import { useState, useCallback, useMemo } from 'react';
 import { useDaumPostcode } from '@/hooks/useDaumPostcode';
 import { useRouter } from 'next/navigation';
 import { format } from 'date-fns';
-import { Plus, X, FileText, Receipt, CreditCard, Upload, Download, Trash2 } from 'lucide-react';
+import { Plus, FileText, Receipt, CreditCard, Upload, Download, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
@@ -913,7 +913,7 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
                         className="h-6 w-6 text-gray-400 hover:text-red-500"
                         onClick={() => handleDeleteMemo(memo.id)}
                       >
-                        <X className="h-4 w-4" />
+                        <Trash2 className="h-4 w-4" />
                       </Button>
                     )}
                   </div>
diff --git a/src/components/accounting/BankTransactionInquiry/TransactionFormModal.tsx b/src/components/accounting/BankTransactionInquiry/TransactionFormModal.tsx
index e0011f3e..054d603f 100644
--- a/src/components/accounting/BankTransactionInquiry/TransactionFormModal.tsx
+++ b/src/components/accounting/BankTransactionInquiry/TransactionFormModal.tsx
@@ -281,7 +281,7 @@ export function TransactionFormModal({
           </div>
 
           {/* 거래일 * / 거래시간 */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label className="font-medium">
                 거래일 <span className="text-red-500">*</span>
@@ -327,7 +327,7 @@ export function TransactionFormModal({
           </div>
 
           {/* 금액 * / 잔액 (자동계산) */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label className="font-medium">
                 금액 <span className="text-red-500">*</span>
@@ -399,33 +399,15 @@ export function TransactionFormModal({
         </div>
 
         {/* 하단 버튼 */}
-        <div className="flex items-center justify-between pt-4 border-t">
-          {/* 좌측: 원본으로 복원 (③) - 수정 모드에서만 */}
-          <div>
-            {mode === 'edit' && (
-              <Button
-                variant="outline"
-                onClick={handleRestore}
-                disabled={isProcessing}
-                className="gap-1"
-              >
-                {isRestoring ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <RotateCcw className="h-4 w-4" />
-                )}
-                원본으로 복원
-              </Button>
-            )}
-          </div>
-
-          {/* 우측: 삭제 + 수정/등록 */}
+        <div className="flex flex-col gap-2 pt-4 border-t">
+          {/* 삭제 + 수정/등록 (50:50) */}
           <div className="flex gap-2">
             {mode === 'edit' && (
               <Button
                 variant="outline"
                 onClick={handleDelete}
                 disabled={isProcessing}
+                className="flex-1"
               >
                 {isDeleting ? <Loader2 className="h-4 w-4 mr-1 animate-spin" /> : null}
                 삭제
@@ -434,11 +416,29 @@ export function TransactionFormModal({
             <Button
               onClick={handleSubmit}
               disabled={isProcessing}
+              className="flex-1"
             >
               {isSaving ? <Loader2 className="h-4 w-4 mr-1 animate-spin" /> : null}
               {mode === 'create' ? '등록' : '수정'}
             </Button>
           </div>
+
+          {/* 원본으로 복원 (100%) - 수정 모드에서만 */}
+          {mode === 'edit' && (
+            <Button
+              variant="outline"
+              onClick={handleRestore}
+              disabled={isProcessing}
+              className="w-full gap-1"
+            >
+              {isRestoring ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <RotateCcw className="h-4 w-4" />
+              )}
+              원본으로 복원
+            </Button>
+          )}
         </div>
       </DialogContent>
     </Dialog>
diff --git a/src/components/accounting/BillManagement/BillDetail.tsx b/src/components/accounting/BillManagement/BillDetail.tsx
index 16db08ff..1021d73e 100644
--- a/src/components/accounting/BillManagement/BillDetail.tsx
+++ b/src/components/accounting/BillManagement/BillDetail.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, X } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
@@ -428,13 +428,14 @@ export function BillDetail({ billId, mode }: BillDetailProps) {
           )}
         </CardHeader>
         <CardContent>
+          <div className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
                 <TableHead className="w-[50px]">No</TableHead>
-                <TableHead>일자</TableHead>
-                <TableHead>금액</TableHead>
-                <TableHead>비고</TableHead>
+                <TableHead className="min-w-[130px]">일자</TableHead>
+                <TableHead className="min-w-[120px]">금액</TableHead>
+                <TableHead className="min-w-[120px]">비고</TableHead>
                 {!isViewMode && <TableHead className="w-[60px]">삭제</TableHead>}
               </TableRow>
             </TableHeader>
@@ -480,7 +481,7 @@ export function BillDetail({ billId, mode }: BillDetailProps) {
                           className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
                           onClick={() => handleRemoveInstallment(inst.id)}
                         >
-                          <X className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                         </Button>
                       </TableCell>
                     )}
@@ -489,6 +490,7 @@ export function BillDetail({ billId, mode }: BillDetailProps) {
               )}
             </TableBody>
           </Table>
+          </div>
         </CardContent>
       </Card>
     </>
diff --git a/src/components/accounting/BillManagement/BillManagementClient.tsx b/src/components/accounting/BillManagement/BillManagementClient.tsx
index d3070897..9d8e1290 100644
--- a/src/components/accounting/BillManagement/BillManagementClient.tsx
+++ b/src/components/accounting/BillManagement/BillManagementClient.tsx
@@ -247,7 +247,7 @@ export function BillManagementClient({
         isSelected={handlers.isSelected}
         onToggleSelection={handlers.onToggle}
         infoGrid={
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 gap-2">
             <InfoField label="거래처" value={item.vendorName} />
             <InfoField label="금액" value={`${formatNumber(item.amount)}원`} />
             <InfoField label="발행일" value={item.issueDate} />
@@ -387,35 +387,39 @@ export function BillManagementClient({
         icon: Plus,
       },
 
-      // 헤더 액션: 상태 선택 + 저장 + 수취/발행 라디오
+      // 헤더 액션: 수취/발행 라디오 + 상태 선택 + 저장
+      // 모바일: 라디오/상태필터는 숨기고 저장만 표시 (filterConfig 바텀시트와 중복 방지)
+      // 데스크톱: 모두 표시
       headerActions: () => (
-        <div className="flex items-center gap-3">
-          <RadioGroup
-            value={billTypeFilter}
-            onValueChange={(value) => { setBillTypeFilter(value); loadData(1); }}
-            className="flex items-center gap-3"
-          >
-            <div className="flex items-center space-x-1">
-              <RadioGroupItem value="received" id="received" />
-              <Label htmlFor="received" className="cursor-pointer text-sm">수취</Label>
-            </div>
-            <div className="flex items-center space-x-1">
-              <RadioGroupItem value="issued" id="issued" />
-              <Label htmlFor="issued" className="cursor-pointer text-sm">발행</Label>
-            </div>
-          </RadioGroup>
-          <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="min-w-[100px] w-auto">
-              <SelectValue placeholder="상태" />
-            </SelectTrigger>
-            <SelectContent>
-              {BILL_STATUS_FILTER_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        <div className="flex items-center gap-3" style={{ display: 'flex' }}>
+          <div className="hidden xl:flex items-center gap-3">
+            <RadioGroup
+              value={billTypeFilter}
+              onValueChange={(value) => { setBillTypeFilter(value); loadData(1); }}
+              className="flex items-center gap-3"
+            >
+              <div className="flex items-center space-x-1">
+                <RadioGroupItem value="received" id="received" />
+                <Label htmlFor="received" className="cursor-pointer text-sm whitespace-nowrap">수취</Label>
+              </div>
+              <div className="flex items-center space-x-1">
+                <RadioGroupItem value="issued" id="issued" />
+                <Label htmlFor="issued" className="cursor-pointer text-sm whitespace-nowrap">발행</Label>
+              </div>
+            </RadioGroup>
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="min-w-[100px] w-auto">
+                <SelectValue placeholder="상태" />
+              </SelectTrigger>
+              <SelectContent>
+                {BILL_STATUS_FILTER_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
           <Button onClick={handleSave} size="sm" disabled={isLoading}>
             <Save className="h-4 w-4 mr-1" />
             저장
diff --git a/src/components/accounting/CardTransactionInquiry/ManualInputModal.tsx b/src/components/accounting/CardTransactionInquiry/ManualInputModal.tsx
index 9ee00fe2..d7af2fe0 100644
--- a/src/components/accounting/CardTransactionInquiry/ManualInputModal.tsx
+++ b/src/components/accounting/CardTransactionInquiry/ManualInputModal.tsx
@@ -140,7 +140,7 @@ export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputM
           </div>
 
           {/* 사용일 + 사용시간 (공통 DatePicker/TimePicker) */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <Label className="text-sm font-medium">
                 사용일 <span className="text-red-500">*</span>
@@ -167,7 +167,7 @@ export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputM
           </div>
 
           {/* 승인번호 + 승인유형 */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <FormField
               label="승인번호"
               value={formData.approvalNumber}
@@ -196,7 +196,7 @@ export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputM
           </div>
 
           {/* 공급가액 + 세액 */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <FormField
               type="number"
               label="공급가액"
@@ -216,7 +216,7 @@ export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputM
           </div>
 
           {/* 가맹점명 + 사업자번호 */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <FormField
               label="가맹점명"
               value={formData.merchantName}
@@ -233,7 +233,7 @@ export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputM
           </div>
 
           {/* 공제여부 + 계정과목 (Select - FormField 예외) */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <Label className="text-sm font-medium">
                 공제여부 <span className="text-red-500">*</span>
@@ -272,7 +272,7 @@ export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputM
           </div>
 
           {/* 증빙/판매자상호 + 내역 */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <FormField
               label="증빙/판매자상호"
               value={formData.vendorName}
@@ -297,7 +297,7 @@ export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputM
           />
 
           {/* 합계 금액 */}
-          <div className="bg-muted/50 rounded-lg p-3 flex items-center justify-between">
+          <div className="bg-muted/50 rounded-lg p-3 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
             <span className="text-sm font-medium">합계 금액 (공급가액 + 세액)</span>
             <span className="text-lg font-bold">{formatNumber(totalAmount)}원</span>
           </div>
diff --git a/src/components/accounting/DailyReport/actions.ts b/src/components/accounting/DailyReport/actions.ts
index 732a2271..c5d442ad 100644
--- a/src/components/accounting/DailyReport/actions.ts
+++ b/src/components/accounting/DailyReport/actions.ts
@@ -104,42 +104,3 @@ export async function getDailyReportSummary(params?: {
   });
 }
 
-// ===== 일일 보고서 엑셀 다운로드 =====
-export async function exportDailyReportExcel(params?: {
-  date?: string;
-}): Promise<{
-  success: boolean;
-  data?: Blob;
-  filename?: string;
-  error?: string;
-}> {
-  try {
-    const cookieStore = await cookies();
-    const token = cookieStore.get('access_token')?.value;
-
-    const headers: HeadersInit = {
-      'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-      'Authorization': token ? `Bearer ${token}` : '',
-      'X-API-KEY': process.env.API_KEY || '',
-    };
-
-    const response = await fetch(
-      buildApiUrl('/api/v1/daily-report/export', { date: params?.date }),
-      { method: 'GET', headers }
-    );
-
-    if (!response.ok) {
-      return { success: false, error: `API 오류: ${response.status}` };
-    }
-
-    const blob = await response.blob();
-    const contentDisposition = response.headers.get('Content-Disposition');
-    const filename = contentDisposition?.match(/filename="?(.+)"?/)?.[1] || `일일일보_${params?.date || 'today'}.xlsx`;
-
-    return { success: true, data: blob, filename };
-  } catch (error) {
-    if (isNextRedirectError(error)) throw error;
-    console.error('[DailyReportActions] exportDailyReportExcel error:', error);
-    return { success: false, error: '서버 오류가 발생했습니다.' };
-  }
-}
\ No newline at end of file
diff --git a/src/components/accounting/DailyReport/index.tsx b/src/components/accounting/DailyReport/index.tsx
index d557e4c3..b1bd44cb 100644
--- a/src/components/accounting/DailyReport/index.tsx
+++ b/src/components/accounting/DailyReport/index.tsx
@@ -22,7 +22,7 @@ import { formatNumber as formatAmount } from '@/lib/utils/amount';
 import { Badge } from '@/components/ui/badge';
 import type { NoteReceivableItem, DailyAccountItem } from './types';
 import { MATCH_STATUS_LABELS, MATCH_STATUS_COLORS } from './types';
-import { getNoteReceivables, getDailyAccounts, getDailyReportSummary, exportDailyReportExcel } from './actions';
+import { getNoteReceivables, getDailyAccounts, getDailyReportSummary } from './actions';
 import { toast } from 'sonner';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { usePermission } from '@/hooks/usePermission';
@@ -156,22 +156,32 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
     }
   }, [selectedDate]);
 
-  // ===== 엑셀 다운로드 =====
+  // ===== 엑셀 다운로드 (프록시 API 직접 호출) =====
   const handleExcelDownload = useCallback(async () => {
-    const result = await exportDailyReportExcel({ date: selectedDate });
+    try {
+      const url = `/api/proxy/daily-report/export?date=${selectedDate}`;
+      const response = await fetch(url);
 
-    if (result.success && result.data) {
-      const url = URL.createObjectURL(result.data);
+      if (!response.ok) {
+        toast.error(`엑셀 다운로드에 실패했습니다. (${response.status})`);
+        return;
+      }
+
+      const blob = await response.blob();
+      const contentDisposition = response.headers.get('Content-Disposition');
+      const filename = contentDisposition?.match(/filename="?(.+)"?/)?.[1] || `일일일보_${selectedDate}.xlsx`;
+
+      const blobUrl = URL.createObjectURL(blob);
       const a = document.createElement('a');
-      a.href = url;
-      a.download = result.filename || `일일일보_${selectedDate}.xlsx`;
+      a.href = blobUrl;
+      a.download = filename;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
-      URL.revokeObjectURL(url);
+      URL.revokeObjectURL(blobUrl);
       toast.success('엑셀 파일이 다운로드되었습니다.');
-    } else {
-      toast.error(result.error || '엑셀 다운로드에 실패했습니다.');
+    } catch {
+      toast.error('엑셀 다운로드 중 오류가 발생했습니다.');
     }
   }, [selectedDate]);
 
@@ -187,18 +197,17 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
       {/* 헤더 액션 (날짜 선택, 버튼 등) */}
       <Card>
         <CardContent className="p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2">
-                <Calendar className="h-4 w-4 text-gray-500" />
-                <span className="text-sm font-medium text-gray-700">조회 일자</span>
-                <DatePicker
-                  value={selectedDate}
-                  onChange={setSelectedDate}
-                  className="w-[170px]"
-                  size="sm"
-                />
-              </div>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-2 min-w-0">
+              <Calendar className="h-4 w-4 text-gray-500 shrink-0" />
+              <span className="text-sm font-medium text-gray-700 shrink-0">조회 일자</span>
+              <DatePicker
+                value={selectedDate}
+                onChange={setSelectedDate}
+                className="w-auto min-w-[140px]"
+                size="sm"
+                align="start"
+              />
             </div>
             <div className="flex items-center gap-2">
               <Button
@@ -206,18 +215,19 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
                 size="sm"
                 onClick={loadData}
                 disabled={isLoading}
+                className="h-8 px-2 text-xs"
               >
                 {isLoading ? (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
                 ) : (
-                  <RefreshCw className="mr-2 h-4 w-4" />
+                  <RefreshCw className="mr-1 h-3.5 w-3.5" />
                 )}
                 새로고침
               </Button>
               {canExport && (
-                <Button variant="outline" size="sm" onClick={handleExcelDownload}>
-                  <Download className="mr-2 h-4 w-4" />
-                  엑셀 다운로드
+                <Button variant="outline" size="sm" onClick={handleExcelDownload} className="h-8 px-2 text-xs">
+                  <Download className="mr-1 h-3.5 w-3.5" />
+                  엑셀
                 </Button>
               )}
             </div>
@@ -232,13 +242,14 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
             <h3 className="text-lg font-semibold">어음 및 외상매출채권현황</h3>
           </div>
           <div className="rounded-md border overflow-x-auto">
+            <div className="min-w-[550px]">
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead className="font-semibold">내용</TableHead>
-                  <TableHead className="font-semibold text-right w-[150px]">현재 잔액</TableHead>
-                  <TableHead className="font-semibold text-center w-[120px]">발행일</TableHead>
-                  <TableHead className="font-semibold text-center w-[120px]">만기일</TableHead>
+                  <TableHead className="font-semibold max-w-[200px]">내용</TableHead>
+                  <TableHead className="font-semibold text-right whitespace-nowrap">현재 잔액</TableHead>
+                  <TableHead className="font-semibold text-center whitespace-nowrap">발행일</TableHead>
+                  <TableHead className="font-semibold text-center whitespace-nowrap">만기일</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -260,10 +271,10 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
                 ) : (
                   noteReceivables.map((item) => (
                     <TableRow key={item.id} className="hover:bg-muted/50">
-                      <TableCell>{item.content}</TableCell>
-                      <TableCell className="text-right">{formatAmount(item.currentBalance)}</TableCell>
-                      <TableCell className="text-center">{item.issueDate}</TableCell>
-                      <TableCell className="text-center">{item.dueDate}</TableCell>
+                      <TableCell className="max-w-[200px] truncate">{item.content}</TableCell>
+                      <TableCell className="text-right whitespace-nowrap">{formatAmount(item.currentBalance)}</TableCell>
+                      <TableCell className="text-center whitespace-nowrap">{item.issueDate}</TableCell>
+                      <TableCell className="text-center whitespace-nowrap">{item.dueDate}</TableCell>
                     </TableRow>
                   ))
                 )}
@@ -272,13 +283,14 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
                 <TableFooter>
                   <TableRow className="bg-muted/50 font-medium">
                     <TableCell className="font-bold">합계</TableCell>
-                    <TableCell className="text-right font-bold">{formatAmount(noteReceivableTotal)}</TableCell>
+                    <TableCell className="text-right font-bold whitespace-nowrap">{formatAmount(noteReceivableTotal)}</TableCell>
                     <TableCell></TableCell>
                     <TableCell></TableCell>
                   </TableRow>
                 </TableFooter>
               )}
             </Table>
+            </div>
           </div>
         </CardContent>
       </Card>
@@ -292,15 +304,16 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
             </h3>
           </div>
           <div className="rounded-md border overflow-x-auto">
+            <div className="min-w-[650px]">
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead className="font-semibold w-[200px]">구분</TableHead>
-                  <TableHead className="font-semibold text-center w-[80px]">상태</TableHead>
-                  <TableHead className="font-semibold text-right w-[150px]">전월 이월</TableHead>
-                  <TableHead className="font-semibold text-right w-[120px]">수입</TableHead>
-                  <TableHead className="font-semibold text-right w-[120px]">지출</TableHead>
-                  <TableHead className="font-semibold text-right w-[120px]">잔액</TableHead>
+                  <TableHead className="font-semibold max-w-[180px]">구분</TableHead>
+                  <TableHead className="font-semibold text-center whitespace-nowrap">상태</TableHead>
+                  <TableHead className="font-semibold text-right whitespace-nowrap">전월 이월</TableHead>
+                  <TableHead className="font-semibold text-right whitespace-nowrap">수입</TableHead>
+                  <TableHead className="font-semibold text-right whitespace-nowrap">지출</TableHead>
+                  <TableHead className="font-semibold text-right whitespace-nowrap">잔액</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -326,16 +339,16 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
                       .filter(item => item.currency === 'KRW')
                       .map((item) => (
                         <TableRow key={item.id} className="hover:bg-muted/50">
-                          <TableCell>{item.category}</TableCell>
-                          <TableCell className="text-center">
+                          <TableCell className="max-w-[180px] truncate">{item.category}</TableCell>
+                          <TableCell className="text-center whitespace-nowrap">
                             <Badge className={MATCH_STATUS_COLORS[item.matchStatus]}>
                               {MATCH_STATUS_LABELS[item.matchStatus]}
                             </Badge>
                           </TableCell>
-                          <TableCell className="text-right">{formatAmount(item.carryover)}</TableCell>
-                          <TableCell className="text-right">{formatAmount(item.income)}</TableCell>
-                          <TableCell className="text-right">{formatAmount(item.expense)}</TableCell>
-                          <TableCell className="text-right">{formatAmount(item.balance)}</TableCell>
+                          <TableCell className="text-right whitespace-nowrap">{formatAmount(item.carryover)}</TableCell>
+                          <TableCell className="text-right whitespace-nowrap">{formatAmount(item.income)}</TableCell>
+                          <TableCell className="text-right whitespace-nowrap">{formatAmount(item.expense)}</TableCell>
+                          <TableCell className="text-right whitespace-nowrap">{formatAmount(item.balance)}</TableCell>
                         </TableRow>
                       ))}
                   </>
@@ -345,25 +358,26 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
                 <TableFooter>
                   {/* 외화원 (USD) 합계 */}
                   <TableRow className="bg-blue-50/50">
-                    <TableCell className="font-semibold">외화원 (USD) 합계</TableCell>
+                    <TableCell className="font-semibold whitespace-nowrap">외화원 (USD) 합계</TableCell>
                     <TableCell></TableCell>
-                    <TableCell className="text-right">${formatAmount(accountTotals.usd.carryover)}</TableCell>
-                    <TableCell className="text-right">${formatAmount(accountTotals.usd.income)}</TableCell>
-                    <TableCell className="text-right">${formatAmount(accountTotals.usd.expense)}</TableCell>
-                    <TableCell className="text-right">${formatAmount(accountTotals.usd.balance)}</TableCell>
+                    <TableCell className="text-right whitespace-nowrap">${formatAmount(accountTotals.usd.carryover)}</TableCell>
+                    <TableCell className="text-right whitespace-nowrap">${formatAmount(accountTotals.usd.income)}</TableCell>
+                    <TableCell className="text-right whitespace-nowrap">${formatAmount(accountTotals.usd.expense)}</TableCell>
+                    <TableCell className="text-right whitespace-nowrap">${formatAmount(accountTotals.usd.balance)}</TableCell>
                   </TableRow>
                   {/* 현금성 자산 합계 */}
                   <TableRow className="bg-muted/50 font-medium">
-                    <TableCell className="font-bold">현금성 자산 합계</TableCell>
+                    <TableCell className="font-bold whitespace-nowrap">현금성 자산 합계</TableCell>
                     <TableCell></TableCell>
-                    <TableCell className="text-right font-bold">{formatAmount(cashAssetTotal.carryover)}</TableCell>
-                    <TableCell className="text-right font-bold">{formatAmount(cashAssetTotal.income)}</TableCell>
-                    <TableCell className="text-right font-bold">{formatAmount(cashAssetTotal.expense)}</TableCell>
-                    <TableCell className="text-right font-bold">{formatAmount(cashAssetTotal.balance)}</TableCell>
+                    <TableCell className="text-right font-bold whitespace-nowrap">{formatAmount(cashAssetTotal.carryover)}</TableCell>
+                    <TableCell className="text-right font-bold whitespace-nowrap">{formatAmount(cashAssetTotal.income)}</TableCell>
+                    <TableCell className="text-right font-bold whitespace-nowrap">{formatAmount(cashAssetTotal.expense)}</TableCell>
+                    <TableCell className="text-right font-bold whitespace-nowrap">{formatAmount(cashAssetTotal.balance)}</TableCell>
                   </TableRow>
                 </TableFooter>
               )}
             </Table>
+            </div>
           </div>
         </CardContent>
       </Card>
diff --git a/src/components/accounting/ExpectedExpenseManagement/index.tsx b/src/components/accounting/ExpectedExpenseManagement/index.tsx
index b75f53f3..b1cd6cab 100644
--- a/src/components/accounting/ExpectedExpenseManagement/index.tsx
+++ b/src/components/accounting/ExpectedExpenseManagement/index.tsx
@@ -765,11 +765,18 @@ export function ExpectedExpenseManagement({
         isSelected={isSelected}
         onToggleSelection={onToggle}
         infoGrid={
-          <div className="grid grid-cols-2 gap-3">
-            <InfoField label="예상 지급일" value={item.expectedPaymentDate} />
-            <InfoField label="지출금액" value={`${formatNumber(item.amount)}원`} />
-            <InfoField label="거래처" value={item.vendorName} />
-            <InfoField label="계좌" value={item.bankAccount} />
+          <div className="space-y-1.5 text-sm">
+            {[
+              { label: '예상 지급일', value: item.expectedPaymentDate },
+              { label: '지출금액', value: `${formatNumber(item.amount)}원` },
+              { label: '거래처', value: item.vendorName },
+              { label: '계좌', value: item.bankAccount || '-' },
+            ].map((field) => (
+              <div key={field.label} className="flex justify-between items-center">
+                <span className="text-muted-foreground">{field.label}</span>
+                <span className="font-medium">{field.value}</span>
+              </div>
+            ))}
           </div>
         }
       />
@@ -1080,13 +1087,13 @@ export function ExpectedExpenseManagement({
 
       {/* 등록/수정 폼 다이얼로그 */}
       <Dialog open={showFormDialog} onOpenChange={setShowFormDialog}>
-        <DialogContent className="sm:max-w-[600px]">
+        <DialogContent className="sm:max-w-[600px] max-h-[85vh] flex flex-col">
           <DialogHeader>
             <DialogTitle>{editingItem ? '미지급비용 수정' : '미지급비용 등록'}</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 py-4 overflow-y-auto flex-1">
             {/* 예상 지급일 */}
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>예상 지급일 *</Label>
                 <DatePicker
@@ -1118,7 +1125,7 @@ export function ExpectedExpenseManagement({
             </div>
 
             {/* 거래처 / 금액 */}
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>거래처</Label>
                 <Select
@@ -1156,7 +1163,7 @@ export function ExpectedExpenseManagement({
             </div>
 
             {/* 계좌 / 계정과목 */}
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>출금계좌</Label>
                 <Select
@@ -1203,7 +1210,7 @@ export function ExpectedExpenseManagement({
                 value={formData.paymentStatus}
                 onValueChange={(value) => setFormData(prev => ({ ...prev, paymentStatus: value as PaymentStatus }))}
               >
-                <SelectTrigger className="min-w-[200px] w-auto">
+                <SelectTrigger>
                   <SelectValue placeholder="결제상태 선택" />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/src/components/accounting/GeneralJournalEntry/AccountSubjectSettingModal.tsx b/src/components/accounting/GeneralJournalEntry/AccountSubjectSettingModal.tsx
index 31cfcb88..74ead516 100644
--- a/src/components/accounting/GeneralJournalEntry/AccountSubjectSettingModal.tsx
+++ b/src/components/accounting/GeneralJournalEntry/AccountSubjectSettingModal.tsx
@@ -205,74 +205,78 @@ export function AccountSubjectSettingModal({
           </DialogHeader>
 
           {/* 추가 영역 */}
-          <div className="flex items-end gap-2 p-3 bg-muted/50 rounded-lg">
-            <FormField
-              label="코드"
-              value={newCode}
-              onChange={setNewCode}
-              placeholder="코드"
-              className="flex-1"
+          <div className="space-y-2 p-3 bg-muted/50 rounded-lg">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+              <FormField
+                label="코드"
+                value={newCode}
+                onChange={setNewCode}
+                placeholder="코드"
+              />
+              <FormField
+                label="계정과목명"
+                value={newName}
+                onChange={setNewName}
+                placeholder="계정과목명"
+              />
+            </div>
+            <div className="flex items-end gap-2">
+              <div className="flex-1">
+                <label className="text-sm font-medium mb-1.5 block">분류</label>
+                <Select
+                  value={newCategory}
+                  onValueChange={(v) => setNewCategory(v as AccountSubjectCategory)}
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ACCOUNT_CATEGORY_OPTIONS.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <Button size="sm" className="h-9" onClick={handleAdd} disabled={isAdding}>
+                {isAdding ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <>
+                    <Plus className="h-4 w-4 mr-1" />
+                    추가
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* 검색/필터 영역 */}
+          <div className="space-y-2 sm:space-y-0 sm:flex sm:items-center sm:gap-2">
+            <Input
+              placeholder="코드 또는 이름 검색"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full sm:max-w-[250px] h-9 text-sm"
             />
-            <FormField
-              label="계정과목명"
-              value={newName}
-              onChange={setNewName}
-              placeholder="계정과목명"
-              className="flex-1"
-            />
-            <div className="flex-1">
-              <label className="text-sm font-medium mb-1.5 block">분류</label>
-              <Select
-                value={newCategory}
-                onValueChange={(v) => setNewCategory(v as AccountSubjectCategory)}
-              >
-                <SelectTrigger className="h-9 text-sm">
+            <div className="flex items-center gap-2">
+              <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+                <SelectTrigger className="min-w-[100px] w-auto h-9 text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {ACCOUNT_CATEGORY_OPTIONS.map((opt) => (
+                  {ACCOUNT_CATEGORY_FILTER_OPTIONS.map((opt) => (
                     <SelectItem key={opt.value} value={opt.value}>
                       {opt.label}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
+              <span className="text-sm text-muted-foreground ml-auto">
+                {filteredSubjects.length}개
+              </span>
             </div>
-            <Button size="sm" className="h-9" onClick={handleAdd} disabled={isAdding}>
-              {isAdding ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <>
-                  <Plus className="h-4 w-4 mr-1" />
-                  추가
-                </>
-              )}
-            </Button>
-          </div>
-
-          {/* 검색/필터 영역 */}
-          <div className="flex items-center gap-2">
-            <Input
-              placeholder="코드 또는 이름 검색"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="max-w-[250px] h-9 text-sm"
-            />
-            <Select value={categoryFilter} onValueChange={setCategoryFilter}>
-              <SelectTrigger className="min-w-[100px] w-auto h-9 text-sm">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {ACCOUNT_CATEGORY_FILTER_OPTIONS.map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <span className="text-sm text-muted-foreground ml-auto">
-              {filteredSubjects.length}개
-            </span>
           </div>
 
           {/* 테이블 */}
diff --git a/src/components/accounting/GeneralJournalEntry/JournalEditModal.tsx b/src/components/accounting/GeneralJournalEntry/JournalEditModal.tsx
index fb9b6755..1785dbb4 100644
--- a/src/components/accounting/GeneralJournalEntry/JournalEditModal.tsx
+++ b/src/components/accounting/GeneralJournalEntry/JournalEditModal.tsx
@@ -278,7 +278,7 @@ export function JournalEditModal({
           </DialogHeader>
 
           {/* 거래 정보 (읽기전용) */}
-          <div className="grid grid-cols-5 gap-3 p-3 bg-muted/50 rounded-lg text-sm">
+          <div className="grid grid-cols-2 sm:grid-cols-5 gap-3 p-3 bg-muted/50 rounded-lg text-sm">
             <div>
               <Label className="text-xs text-muted-foreground">날짜</Label>
               <div className="font-medium">{record.date}</div>
@@ -323,13 +323,13 @@ export function JournalEditModal({
           </div>
 
           {/* 분개 테이블 */}
-          <div className="flex-1 overflow-auto border rounded-md">
+          <div className="flex-1 min-h-0 max-h-[40vh] overflow-auto border rounded-md">
             {isLoading ? (
               <div className="flex items-center justify-center h-[150px] text-sm text-muted-foreground">
                 로딩 중...
               </div>
             ) : (
-              <Table>
+              <Table className="min-w-[750px]">
                 <TableHeader>
                   <TableRow>
                     <TableHead className="text-center w-[90px]">구분</TableHead>
diff --git a/src/components/accounting/GeneralJournalEntry/ManualJournalEntryModal.tsx b/src/components/accounting/GeneralJournalEntry/ManualJournalEntryModal.tsx
index af3cfa46..663a2944 100644
--- a/src/components/accounting/GeneralJournalEntry/ManualJournalEntryModal.tsx
+++ b/src/components/accounting/GeneralJournalEntry/ManualJournalEntryModal.tsx
@@ -202,7 +202,7 @@ export function ManualJournalEntryModal({
         </DialogHeader>
 
         {/* 거래 정보 */}
-        <div className="grid grid-cols-3 gap-3 p-3 bg-muted/50 rounded-lg">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 p-3 bg-muted/50 rounded-lg">
           <div>
             <Label className="text-sm font-medium">
               전표일자 <span className="text-red-500">*</span>
@@ -239,8 +239,8 @@ export function ManualJournalEntryModal({
         </div>
 
         {/* 분개 테이블 */}
-        <div className="flex-1 overflow-auto border rounded-md">
-          <Table>
+        <div className="flex-1 min-h-0 max-h-[40vh] overflow-auto border rounded-md">
+          <Table className="min-w-[750px]">
             <TableHeader>
               <TableRow>
                 <TableHead className="text-center w-[90px]">구분</TableHead>
diff --git a/src/components/accounting/GeneralJournalEntry/index.tsx b/src/components/accounting/GeneralJournalEntry/index.tsx
index 074e55f6..0a123dff 100644
--- a/src/components/accounting/GeneralJournalEntry/index.tsx
+++ b/src/components/accounting/GeneralJournalEntry/index.tsx
@@ -316,8 +316,6 @@ export function GeneralJournalEntry() {
           subtitle={item.date}
           badge={JOURNAL_DIVISION_LABELS[item.division] || item.division}
           badgeVariant="outline"
-          isSelected={false}
-          onToggle={() => {}}
           onClick={() => setJournalEditTarget(item)}
           details={[
             { label: '입금', value: `${formatNumber(item.depositAmount || 0)}원` },
diff --git a/src/components/accounting/GiftCertificateManagement/GiftCertificateDetail.tsx b/src/components/accounting/GiftCertificateManagement/GiftCertificateDetail.tsx
index 57212403..21895355 100644
--- a/src/components/accounting/GiftCertificateManagement/GiftCertificateDetail.tsx
+++ b/src/components/accounting/GiftCertificateManagement/GiftCertificateDetail.tsx
@@ -3,9 +3,9 @@
 import { useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
 import { FormField } from '@/components/molecules/FormField';
 import { PageLayout, PageHeader } from '@/components/organisms';
+import { DetailActions } from '@/components/templates/IntegratedDetailTemplate/components/DetailActions';
 import { Gift, AlertCircle } from 'lucide-react';
 import { toast } from 'sonner';
 import {
@@ -23,7 +23,7 @@ import {
 import type { GiftCertificateFormData } from './types';
 
 interface GiftCertificateDetailProps {
-  mode: 'new' | 'edit';
+  mode: 'new' | 'edit' | 'view';
   initialData?: GiftCertificateFormData;
   id?: string;
 }
@@ -40,6 +40,8 @@ export function GiftCertificateDetail({
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const isNew = mode === 'new';
+  const isView = mode === 'view';
+  const isEditable = !isView;
   const showUsageInfo = formData.faceValue >= FACE_VALUE_THRESHOLD;
 
   const handleChange = useCallback(
@@ -110,11 +112,13 @@ export function GiftCertificateDetail({
   return (
     <PageLayout>
       <PageHeader
-        title={isNew ? '상품권 등록' : '상품권 상세'}
+        title={isNew ? '상품권 등록' : isView ? '상품권 상세' : '상품권 수정'}
         description={
           isNew
             ? '새 상품권을 등록합니다.'
-            : '상품권 상세를 등록하고 관리합니다.'
+            : isView
+              ? '상품권 상세 정보를 확인합니다.'
+              : '상품권 정보를 수정합니다.'
         }
         icon={Gift}
       />
@@ -135,21 +139,23 @@ export function GiftCertificateDetail({
             />
             <FormField
               label="상품권명"
-              required
+              required={isEditable}
               value={formData.name}
               onChange={(v) => handleChange('name', v)}
               placeholder="상품권명을 입력하세요"
+              disabled={!isEditable}
             />
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <FormField
               label="액면가"
-              required
+              required={isEditable}
               type="currency"
               value={formData.faceValue}
               onChangeNumber={(v) => handleChange('faceValue', v ?? 0)}
               placeholder="0"
+              disabled={!isEditable}
             />
             <FormField
               label="구입처"
@@ -159,16 +165,18 @@ export function GiftCertificateDetail({
               options={[]}
               selectPlaceholder="거래처 선택"
               helpText="매입 거래처명 목록 (API 연동 후 사용 가능)"
+              disabled={!isEditable}
             />
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <FormField
               label="구입일"
-              required
+              required={isEditable}
               type="date"
               value={formData.purchaseDate}
               onChange={(v) => handleChange('purchaseDate', v)}
+              disabled={!isEditable}
             />
             <FormField
               label="구입목적"
@@ -176,6 +184,7 @@ export function GiftCertificateDetail({
               value={formData.purchasePurpose}
               onChange={(v) => handleChange('purchasePurpose', v)}
               options={PURCHASE_PURPOSE_OPTIONS}
+              disabled={!isEditable}
             />
           </div>
 
@@ -186,6 +195,7 @@ export function GiftCertificateDetail({
               value={formData.entertainmentExpense}
               onChange={(v) => handleChange('entertainmentExpense', v)}
               options={ENTERTAINMENT_EXPENSE_OPTIONS}
+              disabled={!isEditable}
             />
             <FormField
               label="상태"
@@ -193,6 +203,7 @@ export function GiftCertificateDetail({
               value={formData.status}
               onChange={(v) => handleChange('status', v)}
               options={statusDetailOptions}
+              disabled={!isEditable}
             />
           </div>
         </CardContent>
@@ -223,13 +234,15 @@ export function GiftCertificateDetail({
               type="date"
               value={formData.usedDate}
               onChange={(v) => handleChange('usedDate', v)}
+              disabled={!isEditable}
             />
             <FormField
               label="수령인"
               value={formData.recipientName}
               onChange={(v) => handleChange('recipientName', v)}
               placeholder="수령인 이름"
-              required={showUsageInfo}
+              required={showUsageInfo && isEditable}
+              disabled={!isEditable}
             />
           </div>
 
@@ -239,12 +252,14 @@ export function GiftCertificateDetail({
               value={formData.recipientOrganization}
               onChange={(v) => handleChange('recipientOrganization', v)}
               placeholder="회사명"
+              disabled={!isEditable}
             />
             <FormField
               label="사용처/용도"
               value={formData.usageDescription}
               onChange={(v) => handleChange('usageDescription', v)}
               placeholder="내용"
+              disabled={!isEditable}
             />
           </div>
 
@@ -255,32 +270,22 @@ export function GiftCertificateDetail({
             onChange={(v) => handleChange('memo', v)}
             placeholder="비고 사항을 입력하세요"
             rows={3}
+            disabled={!isEditable}
           />
         </CardContent>
       </Card>
 
-      {/* 하단 버튼 */}
-      <div className="flex justify-end gap-2">
-        {!isNew && (
-          <Button
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={isSubmitting}
-          >
-            삭제
-          </Button>
-        )}
-        <Button
-          variant="outline"
-          onClick={() => router.push('/ko/accounting/gift-certificates')}
-          disabled={isSubmitting}
-        >
-          취소
-        </Button>
-        <Button onClick={handleSubmit} disabled={isSubmitting}>
-          {isSubmitting ? '처리 중...' : isNew ? '등록' : '수정'}
-        </Button>
-      </div>
+      {/* 하단 버튼 (DetailActions sticky 패턴) */}
+      <DetailActions
+        mode={isNew ? 'create' : isView ? 'view' : 'edit'}
+        sticky
+        isSubmitting={isSubmitting}
+        onBack={() => router.push('/ko/accounting/gift-certificates')}
+        onCancel={() => router.push('/ko/accounting/gift-certificates')}
+        onEdit={() => router.push(`/ko/accounting/gift-certificates?mode=edit&id=${id}`)}
+        onDelete={!isNew ? handleDelete : undefined}
+        onSubmit={handleSubmit}
+      />
     </PageLayout>
   );
 }
diff --git a/src/components/accounting/GiftCertificateManagement/actions.ts b/src/components/accounting/GiftCertificateManagement/actions.ts
index 3e7b96d6..f2304e82 100644
--- a/src/components/accounting/GiftCertificateManagement/actions.ts
+++ b/src/components/accounting/GiftCertificateManagement/actions.ts
@@ -48,7 +48,25 @@ export async function getGiftCertificateById(
   //   transform: transformDetailApiToFrontend,
   //   errorMessage: '상품권 조회에 실패했습니다.',
   // });
-  return { success: false, error: '상품권을 찾을 수 없습니다.' };
+  return {
+    success: true,
+    data: {
+      serialNumber: 'GC-2026-001',
+      name: '신세계 상품권',
+      faceValue: 500000,
+      vendorId: '',
+      vendorName: '신세계백화점',
+      purchaseDate: '2026-02-10',
+      purchasePurpose: 'entertainment',
+      entertainmentExpense: 'applicable',
+      status: 'used',
+      usedDate: '2026-02-20',
+      recipientName: '홍길동',
+      recipientOrganization: '(주)테크솔루션',
+      usageDescription: '거래처 접대용',
+      memo: '2월 접대비 처리 완료',
+    },
+  };
 }
 
 // ===== 상품권 등록 (Mock) =====
diff --git a/src/components/accounting/PurchaseManagement/PurchaseDetail.tsx b/src/components/accounting/PurchaseManagement/PurchaseDetail.tsx
index 07b9efea..7966b22e 100644
--- a/src/components/accounting/PurchaseManagement/PurchaseDetail.tsx
+++ b/src/components/accounting/PurchaseManagement/PurchaseDetail.tsx
@@ -21,8 +21,9 @@ import { FileText, Eye } from 'lucide-react';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { LineItemsTable, useLineItems } from '@/components/organisms/LineItemsTable';
 import { purchaseConfig } from './purchaseConfig';
-import { DocumentDetailModal } from '@/components/approval/DocumentDetail';
-import type { ProposalDocumentData, ExpenseReportDocumentData } from '@/components/approval/DocumentDetail/types';
+import { DocumentDetailModalV2 as DocumentDetailModal } from '@/components/approval/DocumentDetail';
+import type { ProposalDocumentData, ExpenseReportDocumentData, ExpenseEstimateDocumentData } from '@/components/approval/DocumentDetail/types';
+import { getApprovalById } from '@/components/approval/DocumentCreate/actions';
 import type { PurchaseRecord, PurchaseItem, PurchaseType } from './types';
 import { PURCHASE_TYPE_LABELS } from './types';
 import {
@@ -34,7 +35,6 @@ import {
 import { getClients } from '../VendorManagement/actions';
 import { toast } from 'sonner';
 import { formatNumber as formatAmount } from '@/lib/utils/amount';
-import { formatDate } from '@/lib/utils/date';
 
 interface PurchaseDetailProps {
   purchaseId: string;
@@ -83,8 +83,11 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
   const [withdrawalAccount, setWithdrawalAccount] = useState<PurchaseRecord['withdrawalAccount']>(undefined);
   const [createdAt, setCreatedAt] = useState('');
 
-  // ===== 다이얼로그 상태 =====
+  // ===== 문서 열람 모달 상태 =====
   const [documentModalOpen, setDocumentModalOpen] = useState(false);
+  const [modalData, setModalData] = useState<ProposalDocumentData | ExpenseReportDocumentData | ExpenseEstimateDocumentData | null>(null);
+  const [isModalLoading, setIsModalLoading] = useState(false);
+  const [approvalId, setApprovalId] = useState<string | undefined>(undefined);
 
   // ===== 품목 관리 (공통 훅) =====
   const { handleItemChange, handleAddItem, handleRemoveItem, totals } = useLineItems<PurchaseItem>({
@@ -129,6 +132,7 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
           setSourceDocument(data.sourceDocument);
           setWithdrawalAccount(data.withdrawalAccount);
           setCreatedAt(data.createdAt);
+          setApprovalId(data.approvalId);
         }
       } else if (isNewMode) {
         setPurchaseNo('(자동생성)');
@@ -139,6 +143,89 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
     loadInitialData();
   }, [purchaseId, mode, isNewMode]);
 
+  // ===== 문서 열람 핸들러 (API 연동) =====
+  const handleOpenDocument = useCallback(async () => {
+    if (!approvalId) {
+      toast.error('연결된 결재 문서가 없습니다.');
+      return;
+    }
+
+    setIsModalLoading(true);
+    setDocumentModalOpen(true);
+
+    try {
+      const result = await getApprovalById(parseInt(approvalId));
+      if (result.success && result.data) {
+        const formData = result.data;
+        const docType = sourceDocument?.type === 'expense_report' ? 'expenseReport' : 'proposal';
+
+        // 기안자 정보
+        const drafter = {
+          id: 'drafter-1',
+          name: formData.basicInfo.drafter,
+          position: formData.basicInfo.drafterPosition || '',
+          department: formData.basicInfo.drafterDepartment || '',
+          status: 'approved' as const,
+        };
+
+        // 결재자 정보
+        const approvers = formData.approvalLine.map((person) => ({
+          id: person.id,
+          name: person.name,
+          position: person.position,
+          department: person.department,
+          status: 'approved' as const,
+        }));
+
+        if (docType === 'expenseReport') {
+          setModalData({
+            documentNo: formData.basicInfo.documentNo,
+            createdAt: formData.basicInfo.draftDate,
+            requestDate: formData.expenseReportData?.requestDate || '',
+            paymentDate: formData.expenseReportData?.paymentDate || '',
+            items: formData.expenseReportData?.items.map((item, index) => ({
+              id: item.id,
+              no: index + 1,
+              description: item.description,
+              amount: item.amount,
+              note: item.note,
+            })) || [],
+            cardInfo: formData.expenseReportData?.cardId || '-',
+            totalAmount: formData.expenseReportData?.totalAmount || 0,
+            attachments: formData.expenseReportData?.uploadedFiles?.map(f => f.name) || [],
+            approvers,
+            drafter,
+          } as ExpenseReportDocumentData);
+        } else {
+          const uploadedFileUrls = (formData.proposalData?.uploadedFiles || []).map(f =>
+            `/api/proxy/files/${f.id}/download`
+          );
+          setModalData({
+            documentNo: formData.basicInfo.documentNo,
+            createdAt: formData.basicInfo.draftDate,
+            vendor: formData.proposalData?.vendor || '-',
+            vendorPaymentDate: formData.proposalData?.vendorPaymentDate || '',
+            title: formData.proposalData?.title || '',
+            description: formData.proposalData?.description || '-',
+            reason: formData.proposalData?.reason || '-',
+            estimatedCost: formData.proposalData?.estimatedCost || 0,
+            attachments: uploadedFileUrls,
+            approvers,
+            drafter,
+          } as ProposalDocumentData);
+        }
+      } else {
+        toast.error(result.error || '문서 조회에 실패했습니다.');
+        setDocumentModalOpen(false);
+      }
+    } catch {
+      toast.error('문서 조회 중 오류가 발생했습니다.');
+      setDocumentModalOpen(false);
+    } finally {
+      setIsModalLoading(false);
+    }
+  }, [approvalId, sourceDocument]);
+
   // ===== 핸들러 =====
   const handleVendorChange = useCallback((clientId: string) => {
     const client = clients.find(c => c.id === clientId);
@@ -224,16 +311,18 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
             {sourceDocument ? (
               <>
                 {/* 문서 타입 및 열람 버튼 */}
-                <div className="flex items-center gap-4 p-3 bg-orange-50 border border-orange-200 rounded-lg">
-                  <Badge variant="outline" className={getPresetStyle('orange')}>
-                    {sourceDocument.type === 'proposal' ? '품의서' : '지출결의서'}
-                  </Badge>
-                  <span className="text-sm text-muted-foreground">연결된 문서가 있습니다</span>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-3 p-3 bg-orange-50 border border-orange-200 rounded-lg">
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className={getPresetStyle('orange')}>
+                      {sourceDocument.type === 'proposal' ? '품의서' : '지출결의서'}
+                    </Badge>
+                    <span className="text-sm text-muted-foreground">연결된 문서가 있습니다</span>
+                  </div>
                   <Button
                     variant="outline"
                     size="sm"
-                    className="ml-auto border-orange-300 text-orange-700 hover:bg-orange-100"
-                    onClick={() => setDocumentModalOpen(true)}
+                    className="sm:ml-auto border-orange-300 text-orange-700 hover:bg-orange-100 w-full sm:w-auto"
+                    onClick={handleOpenDocument}
                   >
                     <Eye className="h-4 w-4 mr-1" />
                     문서 열람
@@ -243,7 +332,7 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
                 {/* 품의서/지출결의서용 필드 */}
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   {/* 품의서/지출결의서 제목 */}
-                  <div className="space-y-2 col-span-2">
+                  <div className="space-y-2 md:col-span-2">
                     <Label>{sourceDocument.type === 'proposal' ? '품의서' : '지출결의서'} 제목</Label>
                     <Input
                       value={sourceDocument.title}
@@ -297,7 +386,7 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
                   </div>
 
                   {/* 매입 유형 */}
-                  <div className="space-y-2 col-span-2">
+                  <div className="space-y-2">
                     <Label>매입 유형</Label>
                     <Select
                       value={purchaseType}
@@ -446,97 +535,16 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
       </div>
 
       {/* ===== 품의서/지출결의서 문서 열람 모달 ===== */}
-      {sourceDocument && (
+      {modalData && (
         <DocumentDetailModal
           open={documentModalOpen}
-          onOpenChange={setDocumentModalOpen}
-          documentType={sourceDocument.type === 'proposal' ? 'proposal' : 'expenseReport'}
-          data={
-            sourceDocument.type === 'proposal'
-              ? {
-                  documentNo: sourceDocument.documentNo,
-                  createdAt: formatDate(createdAt),
-                  vendor: vendorName,
-                  vendorPaymentDate: purchaseDate,
-                  title: sourceDocument.title,
-                  description: '품의 내역 상세',
-                  reason: '업무 수행을 위한 필수 구매',
-                  estimatedCost: sourceDocument.expectedCost,
-                  attachments: [],
-                  approvers: [
-                    {
-                      id: 'approver-1',
-                      name: '김팀장',
-                      position: '팀장',
-                      department: '경영지원팀',
-                      status: 'approved',
-                      approvedAt: formatDate(createdAt),
-                    },
-                    {
-                      id: 'approver-2',
-                      name: '이부장',
-                      position: '부장',
-                      department: '경영지원팀',
-                      status: 'approved',
-                      approvedAt: formatDate(createdAt),
-                    },
-                  ],
-                  drafter: {
-                    id: 'drafter-1',
-                    name: '홍길동',
-                    position: '대리',
-                    department: '경영지원팀',
-                    status: 'none',
-                  },
-                } as ProposalDocumentData
-              : {
-                  documentNo: sourceDocument.documentNo,
-                  createdAt: formatDate(createdAt),
-                  requestDate: purchaseDate,
-                  paymentDate: purchaseDate,
-                  items: items.map((item, idx) => ({
-                    id: item.id,
-                    no: idx + 1,
-                    description: item.itemName,
-                    amount: item.supplyPrice + item.vat,
-                    note: item.note || '',
-                  })),
-                  cardInfo: withdrawalAccount
-                    ? `${withdrawalAccount.bankName} ${withdrawalAccount.accountNo}`
-                    : '',
-                  totalAmount: totals.total,
-                  attachments: [],
-                  approvers: [
-                    {
-                      id: 'approver-1',
-                      name: '김팀장',
-                      position: '팀장',
-                      department: '경영지원팀',
-                      status: 'approved',
-                      approvedAt: formatDate(createdAt),
-                    },
-                    {
-                      id: 'approver-2',
-                      name: '이부장',
-                      position: '부장',
-                      department: '경영지원팀',
-                      status: 'approved',
-                      approvedAt: formatDate(createdAt),
-                    },
-                  ],
-                  drafter: {
-                    id: 'drafter-1',
-                    name: '홍길동',
-                    position: '대리',
-                    department: '경영지원팀',
-                    status: 'none',
-                  },
-                } as ExpenseReportDocumentData
-          }
-          onEdit={() => toast.info('문서 수정 기능 준비 중입니다.')}
-          onCopy={() => toast.info('문서 복제 기능 준비 중입니다.')}
-          onApprove={() => toast.info('승인 기능 준비 중입니다.')}
-          onReject={() => toast.info('반려 기능 준비 중입니다.')}
+          onOpenChange={(open) => {
+            setDocumentModalOpen(open);
+            if (!open) setModalData(null);
+          }}
+          mode="reference"
+          documentType={sourceDocument?.type === 'expense_report' ? 'expenseReport' : 'proposal'}
+          data={modalData}
         />
       )}
 
diff --git a/src/components/accounting/PurchaseManagement/PurchaseDetailModal.tsx b/src/components/accounting/PurchaseManagement/PurchaseDetailModal.tsx
index d40ea352..3b7eb118 100644
--- a/src/components/accounting/PurchaseManagement/PurchaseDetailModal.tsx
+++ b/src/components/accounting/PurchaseManagement/PurchaseDetailModal.tsx
@@ -33,7 +33,7 @@ import {
 } from '@/components/ui/table';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { formatNumber } from '@/lib/utils/amount';
-import { FileText, Plus, X, ExternalLink } from 'lucide-react';
+import { FileText, Plus, Trash2, ExternalLink } from 'lucide-react';
 import type { PurchaseRecord, PurchaseItem, PurchaseType } from './types';
 import { PURCHASE_TYPE_LABELS } from './types';
 import { getBankAccounts, getVendors } from './actions';
@@ -343,7 +343,7 @@ export function PurchaseDetailModal({
                           className="h-8 w-8 text-red-600"
                           onClick={() => handleRemoveItem(item.id)}
                         >
-                          <X className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                         </Button>
                       </TableCell>
                     </TableRow>
diff --git a/src/components/accounting/PurchaseManagement/actions.ts b/src/components/accounting/PurchaseManagement/actions.ts
index b3d445ad..97763c8f 100644
--- a/src/components/accounting/PurchaseManagement/actions.ts
+++ b/src/components/accounting/PurchaseManagement/actions.ts
@@ -98,7 +98,7 @@ export async function getPurchases(params?: {
   page?: number; perPage?: number; startDate?: string; endDate?: string;
   clientId?: string; status?: string; search?: string;
 }) {
-  return executePaginatedAction<PurchaseApiData, PurchaseRecord>({
+  const result = await executePaginatedAction<PurchaseApiData, PurchaseRecord>({
     url: buildApiUrl('/api/v1/purchases', {
       page: params?.page,
       per_page: params?.perPage,
@@ -111,6 +111,7 @@ export async function getPurchases(params?: {
     transform: transformApiToFrontend,
     errorMessage: '매입 목록 조회에 실패했습니다.',
   });
+  return result;
 }
 
 // ===== 매입 상세 조회 =====
diff --git a/src/components/accounting/ReceivablesStatus/index.tsx b/src/components/accounting/ReceivablesStatus/index.tsx
index d2bbbf72..347a2529 100644
--- a/src/components/accounting/ReceivablesStatus/index.tsx
+++ b/src/components/accounting/ReceivablesStatus/index.tsx
@@ -8,7 +8,9 @@ import { Switch } from '@/components/ui/switch';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter } from '@/components/ui/table';
+import { MobileCard } from '@/components/organisms/MobileCard';
 import {
   Select,
   SelectContent,
@@ -348,16 +350,16 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
       {/* 헤더 액션 (연도 선택, 버튼) */}
       <Card>
         <CardContent className="p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="grid grid-cols-1 gap-3 sm:flex sm:items-center sm:gap-4">
               {/* 연도 선택 */}
               <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-gray-700">연도</span>
+                <span className="text-sm font-medium text-gray-700 shrink-0">연도</span>
                 <Select
                   value={String(selectedYear)}
                   onValueChange={(value) => setSelectedYear(Number(value))}
                 >
-                  <SelectTrigger className="min-w-[120px] w-auto">
+                  <SelectTrigger className="min-w-[100px] w-auto">
                     <SelectValue placeholder="연도 선택" />
                   </SelectTrigger>
                   <SelectContent>
@@ -372,12 +374,12 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
 
               {/* 정렬 선택 */}
               <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-gray-700">정렬</span>
+                <span className="text-sm font-medium text-gray-700 shrink-0">정렬</span>
                 <Select
                   value={sortOption}
                   onValueChange={(value) => setSortOption(value as SortOption)}
                 >
-                  <SelectTrigger className="min-w-[140px] w-auto">
+                  <SelectTrigger className="min-w-[110px] w-auto">
                     <SelectValue placeholder="정렬 선택" />
                   </SelectTrigger>
                   <SelectContent>
@@ -390,7 +392,7 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                 </Select>
               </div>
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               <Button
                 variant="outline"
                 size="sm"
@@ -444,19 +446,19 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
         </CardContent>
       </Card>
 
-      {/* 테이블 */}
-      <Card>
+      {/* 테이블 - xl 이상에서만 표시 */}
+      <Card className="hidden xl:block">
         <CardContent className="pt-6">
           <div className="rounded-md border overflow-x-auto">
             <Table className="border-separate border-spacing-0" style={{ minWidth: `${200 + 70 + (monthCount * 100) + 120}px` }}>
               <TableHeader>
                 <TableRow>
                   {/* 거래처/연체 - 왼쪽 고정 */}
-                  <TableHead className="w-[200px] min-w-[200px] max-w-[200px] sticky left-0 z-20 bg-white border-r border-gray-200">
+                  <TableHead className="w-[140px] sm:w-[200px] min-w-[140px] sm:min-w-[200px] max-w-[140px] sm:max-w-[200px] sticky left-0 z-20 bg-white border-r border-gray-200">
                     거래처 / 연체
                   </TableHead>
-                  {/* 구분 - 왼쪽 고정 (거래처 옆) */}
-                  <TableHead className="w-[70px] min-w-[70px] text-center sticky left-[200px] z-20 bg-white border-r border-gray-200">
+                  {/* 구분 - sm 이상에서만 왼쪽 고정 */}
+                  <TableHead className="w-[70px] min-w-[70px] text-center sm:sticky sm:left-[200px] z-20 bg-white border-r border-gray-200">
                     구분
                   </TableHead>
                   {/* 동적 월 레이블 - 스크롤 영역 */}
@@ -465,8 +467,8 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                       {month}
                     </TableHead>
                   ))}
-                  {/* 합계 - 오른쪽 고정 */}
-                  <TableHead className="w-[100px] min-w-[100px] text-right sticky right-0 z-20 bg-white border-l border-gray-200">
+                  {/* 합계 - sm 이상에서만 오른쪽 고정 */}
+                  <TableHead className="w-[100px] min-w-[100px] text-right sm:sticky sm:right-0 z-20 bg-white sm:border-l border-gray-200">
                     합계
                   </TableHead>
                 </TableRow>
@@ -514,7 +516,7 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                         >
                           {/* 거래처명 - 왼쪽 고정 (매 행마다 개별 셀, 첫 행만 내용 표시) */}
                           <TableCell
-                            className={`font-medium border-r border-gray-200 sticky left-0 z-10 w-[200px] min-w-[200px] max-w-[200px] overflow-hidden whitespace-normal ${rowBgClass} ${catIndex === 0 ? 'align-top pt-3' : 'p-0'}`}
+                            className={`font-medium border-r border-gray-200 sticky left-0 z-10 w-[140px] sm:w-[200px] min-w-[140px] sm:min-w-[200px] max-w-[140px] sm:max-w-[200px] overflow-hidden whitespace-normal ${rowBgClass} ${catIndex === 0 ? 'align-top pt-3' : 'p-0'}`}
                           >
                             {catIndex === 0 && (
                               <div className="flex flex-col gap-2 overflow-hidden">
@@ -533,8 +535,8 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                             )}
                           </TableCell>
 
-                          {/* 구분 - 왼쪽 고정 */}
-                          <TableCell className={`text-center border-r border-gray-200 text-sm sticky left-[200px] z-10 ${rowBgClass}`}>
+                          {/* 구분 - sm 이상에서만 왼쪽 고정 */}
+                          <TableCell className={`text-center border-r border-gray-200 text-sm sm:sticky sm:left-[200px] z-10 ${rowBgClass}`}>
                             {CATEGORY_LABELS[category]}
                           </TableCell>
 
@@ -548,8 +550,8 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                             </TableCell>
                           ))}
 
-                          {/* 합계 - 오른쪽 고정 */}
-                          <TableCell className={`text-right font-medium text-sm sticky right-0 z-10 border-l border-gray-200 ${rowBgClass}`}>
+                          {/* 합계 - sm 이상에서만 오른쪽 고정 */}
+                          <TableCell className={`text-right font-medium text-sm sm:sticky sm:right-0 z-10 sm:border-l border-gray-200 ${rowBgClass}`}>
                             {formatAmount(categoryData.amounts.total)}
                           </TableCell>
                         </TableRow>
@@ -561,10 +563,10 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                     rows.push(
                       <TableRow key={`${vendor.id}-memo`}>
                         {/* 거래처명 셀 (빈 셀 - 시각적 병합 유지) */}
-                        <TableCell className={`border-r border-gray-200 sticky left-0 z-10 w-[200px] min-w-[200px] max-w-[200px] overflow-hidden p-0 ${rowBgClass}`} />
+                        <TableCell className={`border-r border-gray-200 sticky left-0 z-10 w-[140px] sm:w-[200px] min-w-[140px] sm:min-w-[200px] max-w-[140px] sm:max-w-[200px] overflow-hidden p-0 ${rowBgClass}`} />
 
                         {/* 구분: 메모 + 접기/펼치기 버튼 */}
-                        <TableCell className={`text-center border-r border-gray-200 text-sm sticky left-[200px] z-10 ${rowBgClass}`}>
+                        <TableCell className={`text-center border-r border-gray-200 text-sm sm:sticky sm:left-[200px] z-10 ${rowBgClass}`}>
                           <div className="flex items-center justify-center gap-1">
                             <span>메모</span>
                             <button
@@ -608,7 +610,7 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                   <TableCell className="border-r border-gray-200 sticky left-0 z-10 bg-gray-100">
                     합계
                   </TableCell>
-                  <TableCell className="text-center border-r border-gray-200 sticky left-[200px] z-10 bg-gray-100">
+                  <TableCell className="text-center border-r border-gray-200 sm:sticky sm:left-[200px] z-10 bg-gray-100">
                     미수금
                   </TableCell>
                   {/* 월별 합계 - 스크롤 영역 */}
@@ -617,8 +619,8 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
                       {formatAmount(amount)}
                     </TableCell>
                   ))}
-                  {/* 총합계 - 오른쪽 고정 */}
-                  <TableCell className="text-right font-bold sticky right-0 z-10 bg-gray-100 border-l border-gray-200">
+                  {/* 총합계 - sm 이상에서만 오른쪽 고정 */}
+                  <TableCell className="text-right font-bold sm:sticky sm:right-0 z-10 bg-gray-100 sm:border-l border-gray-200">
                     {formatAmount(grandTotals.total)}
                   </TableCell>
                 </TableRow>
@@ -627,6 +629,104 @@ export function ReceivablesStatus({ highlightVendorId, initialData, initialSumma
           </div>
         </CardContent>
       </Card>
+
+      {/* 모바일 카드 뷰 - xl 미만에서만 표시 */}
+      <div className="xl:hidden space-y-3">
+        {isLoading ? (
+          <Card>
+            <CardContent className="py-8">
+              <div className="flex items-center justify-center gap-2">
+                <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+                <span className="text-gray-500">데이터를 불러오는 중...</span>
+              </div>
+            </CardContent>
+          </Card>
+        ) : sortedData.length === 0 ? (
+          <Card>
+            <CardContent className="py-8 text-center text-gray-500">
+              검색 결과가 없습니다.
+            </CardContent>
+          </Card>
+        ) : (
+          <>
+            {sortedData.map((vendor) => {
+              const salesCat = vendor.categories.find(c => c.category === 'sales');
+              const depositCat = vendor.categories.find(c => c.category === 'deposit');
+              const billCat = vendor.categories.find(c => c.category === 'bill');
+              const receivableCat = vendor.categories.find(c => c.category === 'receivable');
+              const isHighlighted = highlightVendorId === vendor.id;
+
+              return (
+                <MobileCard
+                  key={vendor.id}
+                  title={vendor.vendorName}
+                  className={
+                    isHighlighted
+                      ? 'border-yellow-400 bg-yellow-50'
+                      : vendor.isOverdue
+                        ? 'border-red-300 bg-red-50/50'
+                        : undefined
+                  }
+                  headerBadges={
+                    vendor.isOverdue ? (
+                      <Badge variant="destructive" className="text-xs">연체</Badge>
+                    ) : null
+                  }
+                  subtitle={`미수금 합계: ${formatNumber(receivableCat?.amounts.total || 0)}원`}
+                  collapsible
+                  defaultExpanded={false}
+                  infoGrid={
+                    <div className="space-y-2 text-sm">
+                      {[
+                        { label: '매출', value: salesCat?.amounts.total || 0 },
+                        { label: '입금', value: depositCat?.amounts.total || 0 },
+                        { label: '어음', value: billCat?.amounts.total || 0 },
+                        { label: '미수금', value: receivableCat?.amounts.total || 0, bold: true },
+                      ].map((item) => (
+                        <div key={item.label} className="flex justify-between items-center">
+                          <span className="text-muted-foreground">{item.label}</span>
+                          <span className={item.bold ? 'font-bold' : 'font-medium'}>
+                            {formatNumber(item.value)}원
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  }
+                  bottomContent={
+                    <div className="space-y-3" onClick={(e) => e.stopPropagation()}>
+                      <div className="flex items-center gap-2">
+                        <Switch
+                          checked={vendor.isOverdue}
+                          onCheckedChange={(checked) => handleOverdueToggle(vendor.id, checked)}
+                          className="data-[state=checked]:bg-red-500"
+                        />
+                        <span className="text-sm">연체 설정</span>
+                      </div>
+                      <Textarea
+                        value={vendor.memo}
+                        onChange={(e) => handleMemoChange(vendor.id, e.target.value)}
+                        placeholder="거래처 메모를 입력하세요..."
+                        className="text-sm resize-none"
+                        rows={2}
+                      />
+                    </div>
+                  }
+                />
+              );
+            })}
+
+            {/* 합계 카드 */}
+            <Card className="bg-gray-50 border-gray-300">
+              <CardContent className="p-4">
+                <div className="flex justify-between items-center">
+                  <span className="font-semibold text-sm">미수금 총합계</span>
+                  <span className="font-bold text-lg">{formatNumber(grandTotals.total)}원</span>
+                </div>
+              </CardContent>
+            </Card>
+          </>
+        )}
+      </div>
     </PageLayout>
   );
 }
\ No newline at end of file
diff --git a/src/components/accounting/SalesManagement/SalesDetail.tsx b/src/components/accounting/SalesManagement/SalesDetail.tsx
index 1185f8e1..3a0f47dd 100644
--- a/src/components/accounting/SalesManagement/SalesDetail.tsx
+++ b/src/components/accounting/SalesManagement/SalesDetail.tsx
@@ -350,22 +350,34 @@ export function SalesDetail({ mode, salesId }: SalesDetailProps) {
           <CardTitle className="text-lg">거래명세서</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex items-center justify-between flex-wrap gap-4">
-            <div className="flex items-center gap-3">
-              <Label htmlFor="transactionStatement">거래명세서 발행</Label>
-              <Switch
-                id="transactionStatement"
-                checked={transactionStatementIssued}
-                onCheckedChange={setTransactionStatementIssued}
-                disabled={isViewMode}
-              />
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Label htmlFor="transactionStatement">거래명세서 발행</Label>
+                <Switch
+                  id="transactionStatement"
+                  checked={transactionStatementIssued}
+                  onCheckedChange={setTransactionStatementIssued}
+                  disabled={isViewMode}
+                />
+              </div>
+              {transactionStatementIssued ? (
+                <span className="text-sm text-green-600 flex items-center gap-1">
+                  <FileText className="h-4 w-4" />
+                  발행완료
+                </span>
+              ) : (
+                <span className="text-sm text-gray-500 flex items-center gap-1">
+                  <FileText className="h-4 w-4" />
+                  미발행
+                </span>
+              )}
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex flex-col sm:flex-row gap-2">
               <Button
                 variant="default"
                 className="bg-gray-900 hover:bg-gray-800 text-white"
                 onClick={() => {
-                  // TODO: 거래명세서 조회 기능 연결
                   toast.info('거래명세서 조회 기능 준비 중입니다.');
                 }}
               >
@@ -383,17 +395,6 @@ export function SalesDetail({ mode, salesId }: SalesDetailProps) {
                   거래명세서 발행하기
                 </Button>
               )}
-              {transactionStatementIssued ? (
-                <span className="text-sm text-green-600 flex items-center gap-1">
-                  <FileText className="h-4 w-4" />
-                  발행완료
-                </span>
-              ) : (
-                <span className="text-sm text-gray-500 flex items-center gap-1">
-                  <FileText className="h-4 w-4" />
-                  미발행
-                </span>
-              )}
             </div>
           </div>
         </CardContent>
diff --git a/src/components/accounting/TaxInvoiceIssuance/index.tsx b/src/components/accounting/TaxInvoiceIssuance/index.tsx
index 1ce81da4..a4a32678 100644
--- a/src/components/accounting/TaxInvoiceIssuance/index.tsx
+++ b/src/components/accounting/TaxInvoiceIssuance/index.tsx
@@ -198,9 +198,9 @@ export function TaxInvoiceIssuancePage({
 
       {/* 전자세금계산서 발행 섹션 */}
       <Card>
-        <CardHeader className="flex flex-row items-center justify-between pb-4">
+        <CardHeader className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pb-4">
           <CardTitle className="text-base">전자세금계산서 발행</CardTitle>
-          <div className="flex gap-2">
+          <div className="flex gap-2 shrink-0">
             <Button
               variant="outline"
               size="sm"
diff --git a/src/components/accounting/TaxInvoiceManagement/CardHistoryModal.tsx b/src/components/accounting/TaxInvoiceManagement/CardHistoryModal.tsx
index 8bdefaa2..815f1690 100644
--- a/src/components/accounting/TaxInvoiceManagement/CardHistoryModal.tsx
+++ b/src/components/accounting/TaxInvoiceManagement/CardHistoryModal.tsx
@@ -89,17 +89,17 @@ export function CardHistoryModal({
         {/* 검색 영역 */}
         <div className="space-y-2">
           {/* Row1: 날짜 범위 */}
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2">
             <DatePicker
               value={startDate}
               onChange={setStartDate}
-              className="flex-1"
+              className="w-full sm:flex-1"
             />
-            <span className="text-sm text-muted-foreground shrink-0">~</span>
+            <span className="text-sm text-muted-foreground shrink-0 text-center">~</span>
             <DatePicker
               value={endDate}
               onChange={setEndDate}
-              className="flex-1"
+              className="w-full sm:flex-1"
             />
           </div>
           {/* Row2: 검색어 + 조회 */}
diff --git a/src/components/accounting/TaxInvoiceManagement/ManualEntryModal.tsx b/src/components/accounting/TaxInvoiceManagement/ManualEntryModal.tsx
index 8a584657..e173bfa3 100644
--- a/src/components/accounting/TaxInvoiceManagement/ManualEntryModal.tsx
+++ b/src/components/accounting/TaxInvoiceManagement/ManualEntryModal.tsx
@@ -151,7 +151,7 @@ export function ManualEntryModal({
 
           <div className="space-y-4 py-2">
             {/* 구분 + 작성일자 */}
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <div className="space-y-1.5">
                 <Label className="text-sm">구분</Label>
                 <Select
@@ -181,7 +181,7 @@ export function ManualEntryModal({
 
             {/* 공급자 정보 */}
             <div className="space-y-2 p-3 border rounded-lg bg-muted/30">
-              <div className="flex items-center justify-between">
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                 <Label className="text-sm font-semibold">공급자 정보</Label>
                 <Button
                   variant="outline"
@@ -192,7 +192,7 @@ export function ManualEntryModal({
                   카드 내역 불러오기
                 </Button>
               </div>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <FormField
                   label="공급자명"
                   value={formData.vendorName}
@@ -209,7 +209,7 @@ export function ManualEntryModal({
             </div>
 
             {/* 금액 */}
-            <div className="grid grid-cols-3 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
               <FormField
                 label="공급가액"
                 type="number"
@@ -234,7 +234,7 @@ export function ManualEntryModal({
             </div>
 
             {/* 품목 + 과세유형 */}
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <FormField
                 label="품목"
                 value={formData.itemName}
diff --git a/src/components/accounting/TaxInvoiceManagement/index.tsx b/src/components/accounting/TaxInvoiceManagement/index.tsx
index 04ded406..ec534423 100644
--- a/src/components/accounting/TaxInvoiceManagement/index.tsx
+++ b/src/components/accounting/TaxInvoiceManagement/index.tsx
@@ -355,7 +355,7 @@ export function TaxInvoiceManagement() {
           />
 
           {/* 매출/매입 탭 + 액션 버튼 */}
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
             <Tabs value={activeTab} onValueChange={(v) => handleTabChange(v as InvoiceTab)}>
               <TabsList>
                 {TAB_OPTIONS.map((t) => (
@@ -447,8 +447,6 @@ export function TaxInvoiceManagement() {
           subtitle={item.documentNumber || item.writeDate}
           badge={INVOICE_STATUS_MAP[item.status].label}
           badgeVariant="outline"
-          isSelected={false}
-          onToggle={() => {}}
           onClick={() => setJournalTarget(item)}
           details={[
             { label: '작성일자', value: item.writeDate },
@@ -484,20 +482,21 @@ export function TaxInvoiceManagement() {
         <Card>
           <CardContent className="p-4">
             <div className="text-sm font-semibold mb-3">기간 요약</div>
-            <div className="flex items-center justify-center gap-4 text-center">
-              <div>
+            {/* 모바일: 세로 스택, sm 이상: 가로 배치 */}
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 text-center">
+              <div className="w-full sm:w-auto">
                 <div className="text-xs text-muted-foreground mb-1">매출 합계 (공급가액 + 세액)</div>
-                <div className="text-xl font-bold">{formatNumber(summary.salesTotalAmount)}원</div>
+                <div className="text-lg sm:text-xl font-bold">{formatNumber(summary.salesTotalAmount)}원</div>
               </div>
-              <div className="text-2xl font-bold text-muted-foreground">⊖</div>
-              <div>
+              <div className="text-xl sm:text-2xl font-bold text-muted-foreground">⊖</div>
+              <div className="w-full sm:w-auto">
                 <div className="text-xs text-muted-foreground mb-1">매입 합계 (공급가액 + 세액)</div>
-                <div className="text-xl font-bold">{formatNumber(summary.purchaseTotalAmount)}원</div>
+                <div className="text-lg sm:text-xl font-bold">{formatNumber(summary.purchaseTotalAmount)}원</div>
               </div>
-              <div className="text-2xl font-bold text-muted-foreground">=</div>
-              <div>
+              <div className="text-xl sm:text-2xl font-bold text-muted-foreground">=</div>
+              <div className="w-full sm:w-auto">
                 <div className="text-xs text-muted-foreground mb-1">예상 부가세</div>
-                <div className={`text-xl font-bold ${periodDifference >= 0 ? 'text-blue-700' : 'text-red-700'}`}>
+                <div className={`text-lg sm:text-xl font-bold ${periodDifference >= 0 ? 'text-blue-700' : 'text-red-700'}`}>
                   {formatNumber(periodDifference)}원
                 </div>
               </div>
diff --git a/src/components/accounting/VendorLedger/VendorLedgerDetail.tsx b/src/components/accounting/VendorLedger/VendorLedgerDetail.tsx
index b1c9fe16..76a01a2b 100644
--- a/src/components/accounting/VendorLedger/VendorLedgerDetail.tsx
+++ b/src/components/accounting/VendorLedger/VendorLedgerDetail.tsx
@@ -196,44 +196,44 @@ export function VendorLedgerDetail({
           <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
             {/* 좌측 열 */}
             <div className="space-y-3">
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">회사명</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">회사명</span>
                 <span className="font-medium">{vendorDetail.vendorName || '-'}</span>
               </div>
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">사업자등록번호</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">사업자등록번호</span>
                 <span>{vendorDetail.businessNumber || '-'}</span>
               </div>
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">전화번호</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">전화번호</span>
                 <span>{vendorDetail.phone || '-'}</span>
               </div>
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">팩스</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">팩스</span>
                 <span>{vendorDetail.fax || '-'}</span>
               </div>
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">주소</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">주소</span>
                 <span>{vendorDetail.address || '-'}</span>
               </div>
             </div>
 
             {/* 우측 열 */}
             <div className="space-y-3">
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">기간</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">기간</span>
                 <span>{vendorDetail.periodStart || startDate} ~ {vendorDetail.periodEnd || endDate}</span>
               </div>
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">대표자</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">대표자</span>
                 <span>{vendorDetail.representativeName || '-'}</span>
               </div>
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">모바일</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">모바일</span>
                 <span>{vendorDetail.mobile || '-'}</span>
               </div>
-              <div className="flex">
-                <span className="text-gray-500 w-28 shrink-0">이메일</span>
+              <div className="flex flex-col sm:flex-row">
+                <span className="text-gray-500 sm:w-28 sm:shrink-0 text-sm">이메일</span>
                 <span>{vendorDetail.email || '-'}</span>
               </div>
             </div>
@@ -245,7 +245,7 @@ export function VendorLedgerDetail({
       {summary && (
         <Card className="mb-6">
           <CardContent className="p-4">
-            <div className="grid grid-cols-4 gap-4 text-center">
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
               <div>
                 <div className="text-sm text-gray-500">이월잔액</div>
                 <div className="font-medium">{formatNumber(summary.carryoverBalance)}원</div>
diff --git a/src/components/accounting/VendorManagement/VendorDetail.tsx b/src/components/accounting/VendorManagement/VendorDetail.tsx
index eaac62ab..a42df570 100644
--- a/src/components/accounting/VendorManagement/VendorDetail.tsx
+++ b/src/components/accounting/VendorManagement/VendorDetail.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { useDaumPostcode } from '@/hooks/useDaumPostcode';
 import { useRouter } from 'next/navigation';
-import { Plus, X, Upload } from 'lucide-react';
+import { Plus, Trash2, Upload, FileText, X, CheckCircle2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { getClientById, createClient, updateClient, deleteClient } from './actions';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
@@ -151,6 +151,16 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
   // 새 메모 입력
   const [newMemo, setNewMemo] = useState('');
 
+  // 사업자등록증 파일
+  const MAX_FILES = 5;
+  const MAX_FILE_SIZE_MB = 5;
+  const ACCEPT_TYPES = '.pdf,.jpg,.jpeg,.png,.gif,.bmp,.tiff';
+  const DANGEROUS_EXTENSIONS = ['.exe', '.bat', '.cmd', '.sh', '.js', '.jsx', '.ts', '.tsx', '.mjs', '.jar', '.app', '.scr', '.vbs', '.ps1', '.htm', '.html', '.svg', '.swf'];
+  const [businessFiles, setBusinessFiles] = useState<File[]>([]);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   // 신용분석 모달
   const [isCreditModalOpen, setIsCreditModalOpen] = useState(false);
 
@@ -184,6 +194,48 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
     setFormData(prev => ({ ...prev, [field]: value }));
   }, []);
 
+  // 파일 검증 및 추가
+  const validateAndAddFiles = useCallback((files: FileList | File[]) => {
+    setFileError(null);
+    const fileArray = Array.from(files);
+
+    if (businessFiles.length + fileArray.length > MAX_FILES) {
+      setFileError(`최대 ${MAX_FILES}건까지 업로드 가능합니다.`);
+      return;
+    }
+
+    for (const file of fileArray) {
+      const ext = '.' + (file.name.split('.').pop()?.toLowerCase() || '');
+      if (DANGEROUS_EXTENSIONS.includes(ext)) {
+        setFileError('보안상 허용되지 않는 파일 형식입니다.');
+        return;
+      }
+      const allowedExts = ACCEPT_TYPES.split(',').map(e => e.trim().toLowerCase());
+      if (!allowedExts.some(allowed => ext === allowed)) {
+        setFileError(`허용되지 않은 파일 형식입니다. (${ACCEPT_TYPES})`);
+        return;
+      }
+      if (file.size / (1024 * 1024) > MAX_FILE_SIZE_MB) {
+        setFileError(`파일 크기는 ${MAX_FILE_SIZE_MB}MB 이하여야 합니다.`);
+        return;
+      }
+    }
+
+    setBusinessFiles(prev => [...prev, ...fileArray]);
+  }, [businessFiles.length]);
+
+  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      validateAndAddFiles(e.target.files);
+      e.target.value = '';
+    }
+  }, [validateAndAddFiles]);
+
+  const handleRemoveFile = useCallback((index: number) => {
+    setBusinessFiles(prev => prev.filter((_, i) => i !== index));
+    setFileError(null);
+  }, []);
+
   // 메모 추가 핸들러
   const handleAddMemo = useCallback(() => {
     if (!newMemo.trim()) return;
@@ -354,16 +406,81 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
           {/* 사업자등록증 파일 업로드 영역 */}
           <div className="space-y-2">
             <Label className="text-sm font-medium text-gray-700">사업자등록증</Label>
-            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
-              <Upload className="h-8 w-8 mx-auto text-gray-400 mb-2" />
-              <p className="text-sm text-gray-500">클릭하여 파일을 올리거나, 드래그로 파일을 올립니다</p>
-              <p className="text-xs text-gray-400 mt-1">파일은 최대 5건, 1건당 5MB 이하</p>
-              {!isViewMode && (
-                <Button variant="outline" className="mt-2">
-                  파일 업로드
-                </Button>
-              )}
-            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={ACCEPT_TYPES}
+              multiple
+              onChange={handleFileInputChange}
+              className="hidden"
+            />
+
+            {/* 업로드된 파일 목록 */}
+            {businessFiles.length > 0 && (
+              <div className="space-y-2">
+                {businessFiles.map((file, idx) => (
+                  <div
+                    key={`${file.name}-${idx}`}
+                    className="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg border"
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <FileText className="h-5 w-5 text-primary shrink-0" />
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium truncate">{file.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {(file.size / 1024).toFixed(1)} KB
+                        </p>
+                      </div>
+                      <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                    </div>
+                    {!isViewMode && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 shrink-0 text-gray-400 hover:text-red-500"
+                        onClick={() => handleRemoveFile(idx)}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* 드래그앤드롭 / 클릭 업로드 영역 */}
+            {!isViewMode && businessFiles.length < MAX_FILES && (
+              <div
+                onDragEnter={(e) => { e.preventDefault(); e.stopPropagation(); setIsDragging(true); }}
+                onDragLeave={(e) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); }}
+                onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                onDrop={(e) => {
+                  e.preventDefault(); e.stopPropagation(); setIsDragging(false);
+                  if (e.dataTransfer.files) validateAndAddFiles(e.dataTransfer.files);
+                }}
+                onClick={() => fileInputRef.current?.click()}
+                className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
+                  isDragging ? 'border-primary bg-primary/5' : 'border-gray-300 hover:border-primary/50'
+                }`}
+              >
+                <Upload className="h-8 w-8 mx-auto text-gray-400 mb-2" />
+                <p className="text-sm text-gray-500">클릭하여 파일을 올리거나, 드래그로 파일을 올립니다</p>
+                <p className="text-xs text-gray-400 mt-1">
+                  PDF, 이미지 파일 / 최대 {MAX_FILES}건, 1건당 {MAX_FILE_SIZE_MB}MB 이하
+                  {businessFiles.length > 0 && ` (${businessFiles.length}/${MAX_FILES})`}
+                </p>
+              </div>
+            )}
+
+            {/* view 모드에서 파일 없을 때 */}
+            {isViewMode && businessFiles.length === 0 && (
+              <p className="text-sm text-muted-foreground py-3">등록된 파일이 없습니다.</p>
+            )}
+
+            {/* 에러 메시지 */}
+            {fileError && (
+              <p className="text-sm text-red-500">{fileError}</p>
+            )}
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* 사업자등록번호 - BusinessNumberInput 사용 */}
@@ -376,7 +493,7 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
                 onChange={(value) => handleChange('businessNumber', value)}
                 placeholder="000-00-00000"
                 disabled={isViewMode}
-                showValidation
+                showValidation={!isViewMode}
                 error={!!validationErrors.businessNumber}
               />
             </div>
@@ -652,7 +769,7 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
                       className="h-6 w-6 text-gray-400 hover:text-red-500"
                       onClick={() => handleDeleteMemo(memo.id)}
                     >
-                      <X className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4" />
                     </Button>
                   )}
                 </div>
diff --git a/src/components/accounting/VendorManagement/VendorDetailClient.tsx b/src/components/accounting/VendorManagement/VendorDetailClient.tsx
index 9cb6060f..a57ffb44 100644
--- a/src/components/accounting/VendorManagement/VendorDetailClient.tsx
+++ b/src/components/accounting/VendorManagement/VendorDetailClient.tsx
@@ -3,7 +3,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { formatNumber } from '@/lib/utils/amount';
-import { Plus, X, Upload } from 'lucide-react';
+import { Plus, Trash2, Upload } from 'lucide-react';
 import { Switch } from '@/components/ui/switch';
 import { CurrencyInput } from '@/components/ui/currency-input';
 import { NumberInput } from '@/components/ui/number-input';
@@ -588,7 +588,7 @@ export function VendorDetailClient({ mode, vendorId, initialData }: VendorDetail
                       className="h-6 w-6 text-gray-400 hover:text-red-500"
                       onClick={() => handleDeleteMemo(memo.id)}
                     >
-                      <X className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4" />
                     </Button>
                   )}
                 </div>
diff --git a/src/components/approval/DocumentCreate/ApprovalLineSection.tsx b/src/components/approval/DocumentCreate/ApprovalLineSection.tsx
index 37a86338..f9983e5e 100644
--- a/src/components/approval/DocumentCreate/ApprovalLineSection.tsx
+++ b/src/components/approval/DocumentCreate/ApprovalLineSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Plus, X } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Select,
@@ -97,7 +97,7 @@ export function ApprovalLineSection({ data, onChange }: ApprovalLineSectionProps
                 className="h-9 w-9 text-red-500 hover:text-red-700 hover:bg-red-50"
                 onClick={() => handleRemove(index)}
               >
-                <X className="w-4 h-4" />
+                <Trash2 className="w-4 h-4" />
               </Button>
             </div>
           ))
diff --git a/src/components/approval/DocumentCreate/ExpenseReportForm.tsx b/src/components/approval/DocumentCreate/ExpenseReportForm.tsx
index 314b0334..5fcd4189 100644
--- a/src/components/approval/DocumentCreate/ExpenseReportForm.tsx
+++ b/src/components/approval/DocumentCreate/ExpenseReportForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Plus, X } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
@@ -157,7 +157,7 @@ export function ExpenseReportForm({ data, onChange }: ExpenseReportFormProps) {
                         className="h-8 w-8 text-red-500 hover:text-red-700 hover:bg-red-50"
                         onClick={() => handleRemoveItem(index)}
                       >
-                        <X className="w-4 h-4" />
+                        <Trash2 className="w-4 h-4" />
                       </Button>
                     </TableCell>
                   </TableRow>
diff --git a/src/components/approval/DocumentCreate/ReferenceSection.tsx b/src/components/approval/DocumentCreate/ReferenceSection.tsx
index 59cbdf15..502eea6d 100644
--- a/src/components/approval/DocumentCreate/ReferenceSection.tsx
+++ b/src/components/approval/DocumentCreate/ReferenceSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Plus, X } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Select,
@@ -97,7 +97,7 @@ export function ReferenceSection({ data, onChange }: ReferenceSectionProps) {
                 className="h-9 w-9 text-red-500 hover:text-red-700 hover:bg-red-50"
                 onClick={() => handleRemove(index)}
               >
-                <X className="w-4 h-4" />
+                <Trash2 className="w-4 h-4" />
               </Button>
             </div>
           ))
diff --git a/src/components/board/BoardManagement/index.tsx b/src/components/board/BoardManagement/index.tsx
index aa16062e..70f83775 100644
--- a/src/components/board/BoardManagement/index.tsx
+++ b/src/components/board/BoardManagement/index.tsx
@@ -173,7 +173,7 @@ const createBoardManagementConfig = (router: ReturnType<typeof useRouter>): Univ
         headerBadges={
           <div className="flex items-center gap-2 flex-wrap">
             <Badge variant="outline" className="text-xs">
-              #{globalIndex}
+              {globalIndex}
             </Badge>
             <span className="text-xs text-muted-foreground">
               {getTargetDisplay(item)}
diff --git a/src/components/business/CEODashboard/sections/CalendarSection.tsx b/src/components/business/CEODashboard/sections/CalendarSection.tsx
index e7a823b9..d15d3e8a 100644
--- a/src/components/business/CEODashboard/sections/CalendarSection.tsx
+++ b/src/components/business/CEODashboard/sections/CalendarSection.tsx
@@ -90,12 +90,11 @@ export function CalendarSection({
 
   // 스토어에서 공휴일/세무일정 가져오기 (API 연동)
   const schedulesByYear = useCalendarScheduleStore((s) => s.schedulesByYear);
-  // TODO: 백엔드 API(/api/v1/calendar-schedules) 구현 후 주석 해제
-  // const fetchSchedules = useCalendarScheduleStore((s) => s.fetchSchedules);
-  // useEffect(() => {
-  //   const year = currentDate.getFullYear();
-  //   fetchSchedules(year);
-  // }, [currentDate, fetchSchedules]);
+  const fetchSchedules = useCalendarScheduleStore((s) => s.fetchSchedules);
+  useEffect(() => {
+    const year = currentDate.getFullYear();
+    fetchSchedules(year);
+  }, [currentDate, fetchSchedules]);
 
   // 날짜가 있는 이슈만 필터링
   const issuesWithDate = useMemo(() => {
diff --git a/src/components/business/construction/contract/ContractDetailForm.tsx b/src/components/business/construction/contract/ContractDetailForm.tsx
index eb1abf87..fec34bf7 100644
--- a/src/components/business/construction/contract/ContractDetailForm.tsx
+++ b/src/components/business/construction/contract/ContractDetailForm.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Eye, Download, FileText, X, FilePlus2, Stamp } from 'lucide-react';
+import { Eye, Download, FileText, Trash2, FilePlus2, Stamp } from 'lucide-react';
 import { FileInput } from '@/components/ui/file-input';
 import { FileDropzone } from '@/components/ui/file-dropzone';
 import { FileList, type NewFile, type ExistingFile } from '@/components/ui/file-list';
@@ -458,7 +458,7 @@ export default function ContractDetailForm({
                         size="icon"
                         onClick={handleRemoveContractFile}
                       >
-                        <X className="h-4 w-4" />
+                        <Trash2 className="h-4 w-4" />
                       </Button>
                     )}
                   </div>
diff --git a/src/components/business/construction/estimates/sections/EstimateDetailTableSection.tsx b/src/components/business/construction/estimates/sections/EstimateDetailTableSection.tsx
index 34f72779..6993184d 100644
--- a/src/components/business/construction/estimates/sections/EstimateDetailTableSection.tsx
+++ b/src/components/business/construction/estimates/sections/EstimateDetailTableSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { X, HelpCircle } from 'lucide-react';
+import { Trash2, HelpCircle } from 'lucide-react';
 import {
   Tooltip,
   TooltipContent,
@@ -609,7 +609,7 @@ export function EstimateDetailTableSection({
                               className="h-8 w-8 text-red-500 hover:text-red-600"
                               onClick={() => onRemoveItem(item.id)}
                             >
-                              <X className="h-4 w-4" />
+                              <Trash2 className="h-4 w-4" />
                             </Button>
                           </TableCell>
                         )}
diff --git a/src/components/business/construction/estimates/sections/EstimateSummarySection.tsx b/src/components/business/construction/estimates/sections/EstimateSummarySection.tsx
index d047cb02..4e6bb66d 100644
--- a/src/components/business/construction/estimates/sections/EstimateSummarySection.tsx
+++ b/src/components/business/construction/estimates/sections/EstimateSummarySection.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Plus, X } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -135,7 +135,7 @@ export function EstimateSummarySection({
                           className="h-8 w-8 text-red-500 hover:text-red-600"
                           onClick={() => onRemoveItem(item.id)}
                         >
-                          <X className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                         </Button>
                       </TableCell>
                     )}
diff --git a/src/components/business/construction/handover-report/HandoverReportDetailForm.tsx b/src/components/business/construction/handover-report/HandoverReportDetailForm.tsx
index 8e48ae55..379eb6a2 100644
--- a/src/components/business/construction/handover-report/HandoverReportDetailForm.tsx
+++ b/src/components/business/construction/handover-report/HandoverReportDetailForm.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, X, Eye, Stamp } from 'lucide-react';
+import { Plus, Trash2, Eye, Stamp } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
@@ -446,7 +446,7 @@ export default function HandoverReportDetailForm({
                             className="h-8 w-8"
                             onClick={() => handleRemoveManager(manager.id)}
                           >
-                            <X className="h-4 w-4" />
+                            <Trash2 className="h-4 w-4" />
                           </Button>
                         </TableCell>
                       )}
diff --git a/src/components/business/construction/issue-management/IssueDetailForm.tsx b/src/components/business/construction/issue-management/IssueDetailForm.tsx
index 6b8074ab..0c6d954c 100644
--- a/src/components/business/construction/issue-management/IssueDetailForm.tsx
+++ b/src/components/business/construction/issue-management/IssueDetailForm.tsx
@@ -3,7 +3,7 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { getTodayString } from '@/lib/utils/date';
-import { Mic, X, Upload } from 'lucide-react';
+import { Mic, Trash2, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
@@ -582,7 +582,7 @@ export default function IssueDetailForm({ issue, mode = 'view' }: IssueDetailFor
                         onClick={() => handleImageRemove(image.id)}
                         className="absolute top-1 right-1 p-1 bg-black/50 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                       >
-                        <X className="h-4 w-4" />
+                        <Trash2 className="h-4 w-4" />
                       </button>
                     )}
                     <div className="text-xs text-muted-foreground truncate mt-1">
diff --git a/src/components/business/construction/item-management/ItemDetailClient.tsx b/src/components/business/construction/item-management/ItemDetailClient.tsx
index 00f21ba4..c54c6a60 100644
--- a/src/components/business/construction/item-management/ItemDetailClient.tsx
+++ b/src/components/business/construction/item-management/ItemDetailClient.tsx
@@ -7,7 +7,7 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { X } from 'lucide-react';
+import { Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -449,7 +449,7 @@ export default function ItemDetailClient({
                               className="h-10 w-10 bg-black hover:bg-black/80"
                               onClick={() => handleRemoveOrderItem(item.id)}
                             >
-                              <X className="h-4 w-4 text-white" />
+                              <Trash2 className="h-4 w-4 text-white" />
                             </Button>
                           )}
                         </div>
diff --git a/src/components/business/construction/management/ConstructionDetailClient.tsx b/src/components/business/construction/management/ConstructionDetailClient.tsx
index 4ab4bbcf..986e6321 100644
--- a/src/components/business/construction/management/ConstructionDetailClient.tsx
+++ b/src/components/business/construction/management/ConstructionDetailClient.tsx
@@ -4,9 +4,10 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { getTodayString, formatDate } from '@/lib/utils/date';
-import { Plus, Trash2, FileText, Upload, X } from 'lucide-react';
+import { Plus, Trash2, FileText, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DateTimePicker } from '@/components/ui/date-time-picker';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -491,17 +492,15 @@ export default function ConstructionDetailClient({ id, mode }: ConstructionDetai
                           {isViewMode ? (
                             <span>{progress.scheduleDate || '-'}</span>
                           ) : (
-                            <Input
-                              type="datetime-local"
-                              value={progress.scheduleDate.replace(' ', 'T')}
-                              onChange={(e) =>
+                            <DateTimePicker
+                              value={progress.scheduleDate}
+                              onChange={(val) =>
                                 handleWorkProgressChange(
                                   progress.id,
                                   'scheduleDate',
-                                  e.target.value.replace('T', ' ')
+                                  val
                                 )
                               }
-                              className="w-full"
                             />
                           )}
                         </td>
@@ -651,7 +650,7 @@ export default function ConstructionDetailClient({ id, mode }: ConstructionDetai
                         onClick={() => handleDeletePhoto(photo.id)}
                         className="absolute top-1 right-1 p-1 bg-black/50 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                       >
-                        <X className="h-4 w-4" />
+                        <Trash2 className="h-4 w-4" />
                       </button>
                     )}
                     <div className="text-xs text-muted-foreground truncate mt-1">
diff --git a/src/components/business/construction/order-management/OrderManagementUnified.tsx b/src/components/business/construction/order-management/OrderManagementUnified.tsx
index 354d75bc..7b2a7ac3 100644
--- a/src/components/business/construction/order-management/OrderManagementUnified.tsx
+++ b/src/components/business/construction/order-management/OrderManagementUnified.tsx
@@ -527,7 +527,7 @@ export function OrderManagementUnified({ initialData }: OrderManagementUnifiedPr
           headerBadges={
             <div className="flex items-center gap-2 flex-wrap">
               <Badge variant="outline" className="text-xs">
-                #{globalIndex}
+                {globalIndex}
               </Badge>
               <span className="text-xs text-muted-foreground">
                 {item.orderNumber}
diff --git a/src/components/business/construction/partners/PartnerForm.tsx b/src/components/business/construction/partners/PartnerForm.tsx
index afac7c47..08d9d45c 100644
--- a/src/components/business/construction/partners/PartnerForm.tsx
+++ b/src/components/business/construction/partners/PartnerForm.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, X } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { ImageUpload } from '@/components/ui/image-upload';
 import { FileDropzone } from '@/components/ui/file-dropzone';
 import { FileList, type ExistingFile } from '@/components/ui/file-list';
@@ -585,7 +585,7 @@ export default function PartnerForm({ mode, partnerId, initialData }: PartnerFor
                           className="h-6 w-6 text-gray-400 hover:text-red-500"
                           onClick={() => handleDeleteMemo(memo.id)}
                         >
-                          <X className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                         </Button>
                       )}
                     </div>
diff --git a/src/components/business/construction/site-briefings/SiteBriefingForm.tsx b/src/components/business/construction/site-briefings/SiteBriefingForm.tsx
index e1bd1762..d482e41a 100644
--- a/src/components/business/construction/site-briefings/SiteBriefingForm.tsx
+++ b/src/components/business/construction/site-briefings/SiteBriefingForm.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, X, Loader2, Mic, Check, ChevronsUpDown } from 'lucide-react';
+import { Plus, X, Trash2, Loader2, Mic, Check, ChevronsUpDown } from 'lucide-react';
 import { FileDropzone } from '@/components/ui/file-dropzone';
 import { FileList, type NewFile, type ExistingFile } from '@/components/ui/file-list';
 import { Button } from '@/components/ui/button';
@@ -879,7 +879,7 @@ export default function SiteBriefingForm({ mode, briefingId, initialData }: Site
                         className="h-8 w-8 text-gray-400 hover:text-red-500"
                         onClick={() => handleRemoveCompany(company.id)}
                       >
-                        <X className="h-4 w-4" />
+                        <Trash2 className="h-4 w-4" />
                       </Button>
                     )}
                   </div>
diff --git a/src/components/checklist-management/ChecklistListClient.tsx b/src/components/checklist-management/ChecklistListClient.tsx
index e3a1d946..f43ca468 100644
--- a/src/components/checklist-management/ChecklistListClient.tsx
+++ b/src/components/checklist-management/ChecklistListClient.tsx
@@ -453,7 +453,7 @@ export default function ChecklistListClient() {
           headerBadges={
             <>
               <Badge variant="outline" className="text-xs">
-                #{globalIndex}
+                {globalIndex}
               </Badge>
               <Badge variant="outline" className="text-xs font-mono">
                 {checklist.checklistCode}
diff --git a/src/components/common/ScheduleCalendar/ScheduleCalendar.tsx b/src/components/common/ScheduleCalendar/ScheduleCalendar.tsx
index 25d59ac0..c10f3ed5 100644
--- a/src/components/common/ScheduleCalendar/ScheduleCalendar.tsx
+++ b/src/components/common/ScheduleCalendar/ScheduleCalendar.tsx
@@ -67,11 +67,11 @@ export function ScheduleCalendar({
     setMounted(true);
   }, []);
 
-  // TODO: 백엔드 API(/api/v1/calendar-schedules) 구현 후 주석 해제
-  // useEffect(() => {
-  //   const year = currentDate.getFullYear();
-  //   useCalendarScheduleStore.getState().fetchSchedules(year);
-  // }, [currentDate]);
+  // 현재 표시 중인 연도의 공휴일/일정 데이터를 스토어에 로드
+  useEffect(() => {
+    const year = currentDate.getFullYear();
+    useCalendarScheduleStore.getState().fetchSchedules(year);
+  }, [currentDate]);
 
   // 이전 (뷰에 따라 일/주/월 단위)
   const handlePrevMonth = useCallback(() => {
diff --git a/src/components/customer-center/EventManagement/EventList.tsx b/src/components/customer-center/EventManagement/EventList.tsx
index f536bd95..c62e85a0 100644
--- a/src/components/customer-center/EventManagement/EventList.tsx
+++ b/src/components/customer-center/EventManagement/EventList.tsx
@@ -233,7 +233,7 @@ export function EventList() {
                 </div>
                 <div className="flex-1 space-y-2">
                   <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">#{globalIndex}</span>
+                    <span className="text-sm text-muted-foreground">{globalIndex}</span>
                     <span className="text-sm text-muted-foreground">조회 {item.viewCount}</span>
                   </div>
                   <h3 className="font-medium">{item.title}</h3>
diff --git a/src/components/customer-center/InquiryManagement/InquiryList.tsx b/src/components/customer-center/InquiryManagement/InquiryList.tsx
index e7955773..c9641cb8 100644
--- a/src/components/customer-center/InquiryManagement/InquiryList.tsx
+++ b/src/components/customer-center/InquiryManagement/InquiryList.tsx
@@ -266,7 +266,7 @@ export function InquiryList() {
                 <div className="flex-1 space-y-2">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm text-muted-foreground">#{globalIndex}</span>
+                      <span className="text-sm text-muted-foreground">{globalIndex}</span>
                       <Badge variant="outline">{INQUIRY_CATEGORY_LABELS[item.category]}</Badge>
                     </div>
                     {getStatusBadge(item.status)}
diff --git a/src/components/customer-center/NoticeManagement/NoticeList.tsx b/src/components/customer-center/NoticeManagement/NoticeList.tsx
index 086f7b03..3d41d4dc 100644
--- a/src/components/customer-center/NoticeManagement/NoticeList.tsx
+++ b/src/components/customer-center/NoticeManagement/NoticeList.tsx
@@ -201,7 +201,7 @@ export function NoticeList() {
                 </div>
                 <div className="flex-1 space-y-2">
                   <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">#{globalIndex}</span>
+                    <span className="text-sm text-muted-foreground">{globalIndex}</span>
                     <span className="text-sm text-muted-foreground">조회 {item.viewCount}</span>
                   </div>
                   <h3 className="font-medium">{item.title}</h3>
diff --git a/src/components/hr/CalendarManagement/BulkRegistrationDialog.tsx b/src/components/hr/CalendarManagement/BulkRegistrationDialog.tsx
index 2c6f8986..1da0fa86 100644
--- a/src/components/hr/CalendarManagement/BulkRegistrationDialog.tsx
+++ b/src/components/hr/CalendarManagement/BulkRegistrationDialog.tsx
@@ -27,6 +27,31 @@ const TYPE_KEYWORD_MAP: Record<string, CalendarScheduleType> = {
   '임시휴일': 'temporaryHoliday',
 };
 
+// 대체공휴일 이름 패턴 (이름에 "대체" 포함)
+const SUBSTITUTE_HOLIDAY_PATTERN = /대체/;
+
+// 공휴일 이름 패턴 (한국 법정공휴일 키워드)
+const PUBLIC_HOLIDAY_KEYWORDS = [
+  '신정', '설날', '설연휴', '삼일절', '어린이날', '부처님오신날',
+  '석가탄신일', '현충일', '광복절', '추석', '개천절', '한글날',
+  '성탄절', '크리스마스', '제헌절', '선거',
+];
+
+/**
+ * companyEvent로 잘못 저장된 일정의 올바른 유형을 추정
+ * - 이름에 "대체" 포함 → substituteHoliday
+ * - 공휴일 키워드 매칭 → publicHoliday
+ * - 매칭 안 됨 → 그대로 companyEvent 유지
+ */
+function inferCorrectType(schedule: CalendarSchedule): CalendarScheduleType {
+  if (schedule.type !== 'companyEvent') return schedule.type;
+
+  const name = schedule.name;
+  if (SUBSTITUTE_HOLIDAY_PATTERN.test(name)) return 'substituteHoliday';
+  if (PUBLIC_HOLIDAY_KEYWORDS.some((kw) => name.includes(kw))) return 'publicHoliday';
+  return 'companyEvent';
+}
+
 function parseBulkText(text: string): BulkScheduleItem[] {
   const lines = text.split('\n').filter((line) => line.trim());
   const items: BulkScheduleItem[] = [];
@@ -69,7 +94,9 @@ function parseBulkText(text: string): BulkScheduleItem[] {
 function schedulesToText(schedules: CalendarSchedule[]): string {
   return schedules.map((s) => {
     const datePart = s.startDate === s.endDate ? s.startDate : `${s.startDate}~${s.endDate}`;
-    const typePart = s.type !== 'publicHoliday' ? ` [${SCHEDULE_TYPE_LABELS[s.type]}]` : '';
+    // companyEvent로 잘못 저장된 공휴일/대체휴일은 올바른 유형으로 변환
+    const correctedType = inferCorrectType(s);
+    const typePart = correctedType !== 'publicHoliday' ? ` [${SCHEDULE_TYPE_LABELS[correctedType]}]` : '';
     return `${datePart} ${s.name}${typePart}`;
   }).join('\n');
 }
diff --git a/src/components/hr/CalendarManagement/index.tsx b/src/components/hr/CalendarManagement/index.tsx
index 323faad1..82f74248 100644
--- a/src/components/hr/CalendarManagement/index.tsx
+++ b/src/components/hr/CalendarManagement/index.tsx
@@ -80,7 +80,10 @@ export function CalendarManagement() {
       if (statsResult.success && statsResult.data) {
         setStats(statsResult.data);
       }
-      useCalendarScheduleStore.getState().setSchedulesForYear(year, loadedSchedules);
+      // 캐시 무효화 후 새 데이터 설정 → 다른 컴포넌트에서 stale 데이터 방지
+      const store = useCalendarScheduleStore.getState();
+      store.invalidateYear(year);
+      store.setSchedulesForYear(year, loadedSchedules);
     } catch {
       // 조회 실패 시 빈 상태 유지
     } finally {
diff --git a/src/components/hr/EmployeeManagement/CSVUploadPage.tsx b/src/components/hr/EmployeeManagement/CSVUploadPage.tsx
index 1010e0b0..012104aa 100644
--- a/src/components/hr/EmployeeManagement/CSVUploadPage.tsx
+++ b/src/components/hr/EmployeeManagement/CSVUploadPage.tsx
@@ -15,7 +15,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { X, Users, Download } from 'lucide-react';
+import { Trash2, Users, Download } from 'lucide-react';
 import type { Employee, CSVEmployeeRow, CSVValidationResult } from './types';
 
 interface CSVUploadPageProps {
@@ -225,7 +225,7 @@ export function CSVUploadPage({ onUpload }: CSVUploadPageProps) {
                     onClick={handleRemoveFile}
                     className="text-muted-foreground hover:text-foreground"
                   >
-                    <X className="h-4 w-4" />
+                    <Trash2 className="h-4 w-4" />
                   </button>
                 </div>
               )}
diff --git a/src/components/hr/EmployeeManagement/index.tsx b/src/components/hr/EmployeeManagement/index.tsx
index bd621516..f048024d 100644
--- a/src/components/hr/EmployeeManagement/index.tsx
+++ b/src/components/hr/EmployeeManagement/index.tsx
@@ -638,7 +638,7 @@ export function EmployeeManagement() {
           headerBadges={
             <div className="flex items-center gap-2 flex-wrap">
               <Badge variant="outline" className="text-xs">
-                #{globalIndex}
+                {globalIndex}
               </Badge>
               <code className="text-xs bg-gray-100 px-2 py-1 rounded">
                 {item.employeeCode}
diff --git a/src/components/items/ItemTypeSelect.tsx b/src/components/items/ItemTypeSelect.tsx
index c1847b5f..332f56ce 100644
--- a/src/components/items/ItemTypeSelect.tsx
+++ b/src/components/items/ItemTypeSelect.tsx
@@ -48,7 +48,7 @@ export default function ItemTypeSelect({
   return (
     <div className="space-y-2">
       {showLabel && (
-        <Label htmlFor="item-type-select">
+        <Label htmlFor="item-type-select" className="whitespace-nowrap">
           {label}
           {required && <span className="text-red-500 ml-1">*</span>}
           {description}
diff --git a/src/components/material/ReceivingManagement/ReceivingDetail.tsx b/src/components/material/ReceivingManagement/ReceivingDetail.tsx
index 9e4162c7..86ad1e52 100644
--- a/src/components/material/ReceivingManagement/ReceivingDetail.tsx
+++ b/src/components/material/ReceivingManagement/ReceivingDetail.tsx
@@ -16,7 +16,7 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Upload, FileText, Search, X, Plus, ClipboardCheck } from 'lucide-react';
+import { FileText, Search, Plus, ClipboardCheck, Trash2 } from 'lucide-react';
 import { getTodayString } from '@/lib/utils/date';
 import { FileDropzone } from '@/components/ui/file-dropzone';
 import { ItemSearchModal } from '@/components/quotes/ItemSearchModal';
@@ -43,6 +43,7 @@ import {
   createReceiving,
   updateReceiving,
   checkInspectionTemplate,
+  uploadInspectionFiles,
 } from './actions';
 import {
   Table,
@@ -86,6 +87,7 @@ const INITIAL_FORM_DATA: Partial<ReceivingDetailType> = {
   inspectionDate: '',
   inspectionResult: '',
   certificateFile: undefined,
+  certificateFileId: undefined,
   inventoryAdjustments: [],
 };
 
@@ -135,6 +137,8 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
 
   // 업로드된 파일 상태 (File 객체)
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  // 서버에 저장된 기존 성적서 파일 정보
+  const [existingCertFile, setExistingCertFile] = useState<{ id: number; name: string } | null>(null);
 
   // 수입검사 성적서 모달 상태
   const [isInspectionModalOpen, setIsInspectionModalOpen] = useState(false);
@@ -199,6 +203,13 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
         if (result.data.inventoryAdjustments) {
           setAdjustments(result.data.inventoryAdjustments);
         }
+        // 기존 성적서 파일 정보 설정
+        if (result.data.certificateFileId) {
+          setExistingCertFile({
+            id: result.data.certificateFileId,
+            name: result.data.certificateFileName || `file-${result.data.certificateFileId}`,
+          });
+        }
         // 수정 모드일 때 폼 데이터 설정
         if (isEditMode) {
           setFormData({
@@ -219,6 +230,7 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
             inspectionDate: result.data.inspectionDate || '',
             inspectionResult: result.data.inspectionResult || '',
             certificateFile: result.data.certificateFile,
+            certificateFileId: result.data.certificateFileId,
           });
         }
 
@@ -261,8 +273,22 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
   const handleSave = async (): Promise<{ success: boolean; error?: string }> => {
     setIsSaving(true);
     try {
+      let certificateFileId = formData.certificateFileId;
+
+      // 새 파일이 선택된 경우 먼저 업로드
+      if (uploadedFile) {
+        const uploadResult = await uploadInspectionFiles([uploadedFile]);
+        if (!uploadResult.success) {
+          toast.error(uploadResult.error || '성적서 파일 업로드에 실패했습니다.');
+          return { success: false, error: uploadResult.error };
+        }
+        certificateFileId = uploadResult.data?.[0]?.id;
+      }
+
+      const saveData = { ...formData, certificateFileId };
+
       if (isNewMode) {
-        const result = await createReceiving(formData);
+        const result = await createReceiving(saveData);
         if (result.success) {
           toast.success('입고가 등록되었습니다.');
           router.push('/ko/material/receiving-management');
@@ -272,7 +298,7 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
           return { success: false, error: result.error };
         }
       } else if (isEditMode) {
-        const result = await updateReceiving(id, formData);
+        const result = await updateReceiving(id, saveData);
         if (result.success) {
           toast.success('입고 정보가 수정되었습니다.');
           router.push(`/ko/material/receiving-management/${id}?mode=view`);
@@ -406,6 +432,27 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
               {renderReadOnlyField('검사일', detail.inspectionDate)}
               {renderReadOnlyField('검사결과', detail.inspectionResult)}
             </div>
+            <div className="mt-4">
+              <Label className="text-sm text-muted-foreground">업체 제공 성적서 자료</Label>
+              {existingCertFile ? (
+                <div className="mt-1.5 flex items-center gap-3 p-2 rounded-md border bg-muted/30">
+                  <FileText className="w-5 h-5 shrink-0 text-muted-foreground" />
+                  <span className="text-sm font-medium truncate flex-1">{existingCertFile.name}</span>
+                  <a
+                    href={`/api/proxy/files/${existingCertFile.id}/download`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-blue-600 hover:underline shrink-0"
+                  >
+                    다운로드
+                  </a>
+                </div>
+              ) : (
+                <div className="mt-1.5 px-3 py-2 bg-gray-50 border rounded-md text-sm text-muted-foreground">
+                  첨부된 파일이 없습니다.
+                </div>
+              )}
+            </div>
             <div className="mt-4">
               <Label className="text-sm text-muted-foreground">검사 첨부파일</Label>
               {inspectionAttachments.length > 0 ? (
@@ -497,7 +544,7 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
         </Card>
       </div>
     );
-  }, [detail, adjustments, inspectionAttachments]);
+  }, [detail, adjustments, inspectionAttachments, existingCertFile]);
 
   // ===== 등록/수정 폼 콘텐츠 =====
   const renderFormContent = useCallback(() => {
@@ -698,12 +745,47 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
             {/* 업체 제공 성적서 자료 - 파일 업로드 */}
             <div className="mt-4">
               <Label className="text-sm text-muted-foreground">업체 제공 성적서 자료</Label>
-              <div className="mt-1.5 px-4 py-8 border-2 border-dashed rounded-md bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-                <div className="flex flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
-                  <Upload className="w-8 h-8 text-gray-400" />
-                  <span>클릭하여 파일을 찾거나, 마우스로 파일을 끌어오세요.</span>
+              {!uploadedFile && !existingCertFile ? (
+                <div className="mt-1.5">
+                  <FileDropzone
+                    onFilesSelect={(files) => setUploadedFile(files[0])}
+                    accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xlsx"
+                    maxSize={10}
+                    title="클릭하거나 파일을 드래그하세요"
+                    description="성적서 파일 (PDF, 이미지, 문서 / 최대 10MB)"
+                  />
                 </div>
-              </div>
+              ) : (
+                <div className="mt-1.5 flex items-center gap-3 p-3 rounded-md border bg-muted/30">
+                  <FileText className="w-5 h-5 shrink-0 text-muted-foreground" />
+                  <span className="text-sm font-medium truncate flex-1">
+                    {uploadedFile ? uploadedFile.name : existingCertFile?.name}
+                  </span>
+                  {uploadedFile && (
+                    <span className="text-xs text-muted-foreground shrink-0">
+                      {uploadedFile.size < 1024 * 1024
+                        ? `${(uploadedFile.size / 1024).toFixed(1)} KB`
+                        : `${(uploadedFile.size / (1024 * 1024)).toFixed(1)} MB`}
+                    </span>
+                  )}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 text-red-500 hover:text-red-700 hover:bg-red-50 shrink-0"
+                    onClick={() => {
+                      if (uploadedFile) {
+                        setUploadedFile(null);
+                      } else {
+                        setExistingCertFile(null);
+                        setFormData((prev) => ({ ...prev, certificateFileId: undefined }));
+                      }
+                    }}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              )}
             </div>
           </CardContent>
         </Card>
@@ -770,7 +852,7 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
                             className="h-7 w-7 text-red-500 hover:text-red-700 hover:bg-red-50"
                             onClick={() => handleRemoveAdjustment(adj.id)}
                           >
-                            <X className="w-4 h-4" />
+                            <Trash2 className="w-4 h-4" />
                           </Button>
                         </TableCell>
                       </TableRow>
@@ -789,7 +871,7 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
         </Card>
       </div>
     );
-  }, [formData, adjustments]);
+  }, [formData, adjustments, uploadedFile, existingCertFile]);
 
   // ===== 커스텀 헤더 액션 (view/edit 모드) =====
   // 수정 버튼은 IntegratedDetailTemplate의 DetailActions에서 아이콘으로 제공하므로 중복 제거
diff --git a/src/components/material/ReceivingManagement/ReceivingList.tsx b/src/components/material/ReceivingManagement/ReceivingList.tsx
index 5f941a90..bcbe86b5 100644
--- a/src/components/material/ReceivingManagement/ReceivingList.tsx
+++ b/src/components/material/ReceivingManagement/ReceivingList.tsx
@@ -388,7 +388,7 @@ export function ReceivingList() {
             headerBadges={
               <>
                 <Badge variant="outline" className="text-xs">
-                  #{globalIndex}
+                  {globalIndex}
                 </Badge>
                 {item.lotNo && (
                   <Badge variant="outline" className="text-xs">
diff --git a/src/components/material/ReceivingManagement/actions.ts b/src/components/material/ReceivingManagement/actions.ts
index ad94265c..adf5d47e 100644
--- a/src/components/material/ReceivingManagement/actions.ts
+++ b/src/components/material/ReceivingManagement/actions.ts
@@ -359,6 +359,9 @@ interface ReceivingApiData {
   inspection_result?: string;
   // 수입검사 템플릿 연결 여부 (서버에서 계산)
   has_inspection_template?: boolean;
+  // 성적서 파일
+  certificate_file_id?: number;
+  certificate_file?: { id: number; display_name?: string; file_path?: string };
 }
 
 interface ReceivingApiStatsResponse {
@@ -456,6 +459,8 @@ function transformApiToDetail(data: ReceivingApiData): ReceivingDetail {
     createdBy: data.creator?.name,
     inspectionDate: data.inspection_date,
     inspectionResult: data.inspection_result,
+    certificateFileId: data.certificate_file_id,
+    certificateFileName: data.certificate_file?.display_name,
   };
 }
 
@@ -495,6 +500,7 @@ function transformFrontendToApi(
   if (data.lotNo !== undefined) result.lot_no = data.lotNo;
   if (data.supplierMaterialNo !== undefined) result.material_no = data.supplierMaterialNo;
   if (data.manufacturer !== undefined) result.manufacturer = data.manufacturer;
+  if (data.certificateFileId !== undefined) result.certificate_file_id = data.certificateFileId;
 
   return result;
 }
diff --git a/src/components/material/ReceivingManagement/types.ts b/src/components/material/ReceivingManagement/types.ts
index f3a6a938..5c329a2b 100644
--- a/src/components/material/ReceivingManagement/types.ts
+++ b/src/components/material/ReceivingManagement/types.ts
@@ -108,6 +108,7 @@ export interface ReceivingDetail {
   inspectionDate?: string;  // 검사일 (읽기전용)
   inspectionResult?: string; // 검사결과 (읽기전용) - 합격/불합격
   certificateFile?: string; // 업체 제공 성적서 자료 (수정가능)
+  certificateFileId?: number; // 성적서 파일 ID
   certificateFileName?: string; // 파일명
   // 재고 조정 이력
   inventoryAdjustments?: InventoryAdjustmentRecord[];
diff --git a/src/components/material/StockStatus/StockStatusList.tsx b/src/components/material/StockStatus/StockStatusList.tsx
index 8184bfba..954e6a29 100644
--- a/src/components/material/StockStatus/StockStatusList.tsx
+++ b/src/components/material/StockStatus/StockStatusList.tsx
@@ -311,7 +311,7 @@ export function StockStatusList() {
         onClick={() => handleRowClick(item)}
         headerBadges={
           <>
-            <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
+            <Badge variant="outline" className="text-xs">{globalIndex}</Badge>
           </>
         }
         title={item.itemName}
diff --git a/src/components/molecules/ColumnSettingsPopover.tsx b/src/components/molecules/ColumnSettingsPopover.tsx
index 9284795b..4f26d131 100644
--- a/src/components/molecules/ColumnSettingsPopover.tsx
+++ b/src/components/molecules/ColumnSettingsPopover.tsx
@@ -34,7 +34,12 @@ export function ColumnSettingsPopover({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-56 p-3">
+      <PopoverContent
+        align="end"
+        className="w-56 p-3"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <div className="flex items-center justify-between mb-2">
           <span className="text-sm font-medium">컬럼 표시 설정</span>
           <Button
diff --git a/src/components/orders/OrderRegistration.tsx b/src/components/orders/OrderRegistration.tsx
index 4a373b99..ecca6539 100644
--- a/src/components/orders/OrderRegistration.tsx
+++ b/src/components/orders/OrderRegistration.tsx
@@ -853,7 +853,7 @@ export function OrderRegistration({
             <div className="space-y-2 md:col-span-4">
               <Label>주소</Label>
               <div className="flex gap-2">
-                <Button variant="outline" type="button" onClick={openPostcode}>
+                <Button variant="outline" type="button" onClick={openPostcode} className="shrink-0">
                   우편번호 찾기
                 </Button>
                 <Input
@@ -864,15 +864,14 @@ export function OrderRegistration({
                   }
                   className="w-32"
                 />
-                <Input
-                  placeholder="주소"
-                  value={form.address}
-                  onChange={(e) =>
-                    setForm((prev) => ({ ...prev, address: e.target.value }))
-                  }
-                  className="flex-1"
-                />
               </div>
+              <Input
+                placeholder="주소"
+                value={form.address}
+                onChange={(e) =>
+                  setForm((prev) => ({ ...prev, address: e.target.value }))
+                }
+              />
             </div>
           </div>
         </FormSection>
diff --git a/src/components/orders/OrderSalesDetailEdit.tsx b/src/components/orders/OrderSalesDetailEdit.tsx
index 13bc2100..5313b87f 100644
--- a/src/components/orders/OrderSalesDetailEdit.tsx
+++ b/src/components/orders/OrderSalesDetailEdit.tsx
@@ -337,11 +337,11 @@ export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
   const customHeaderActions = useMemo(() => {
     if (!form) return null;
     return (
-      <div className="flex items-center gap-2">
-        <code className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">
+      <div className="flex items-center gap-1 sm:gap-2 min-w-0 overflow-hidden">
+        <code className="text-xs sm:text-sm font-mono bg-gray-100 px-1.5 py-0.5 sm:px-2 sm:py-1 rounded truncate max-w-[100px] sm:max-w-none">
           {form.lotNumber}
         </code>
-        {getOrderStatusBadge(form.status)}
+        <span className="shrink-0 [&>span]:text-xs [&>span]:sm:text-sm">{getOrderStatusBadge(form.status)}</span>
       </div>
     );
   }, [form]);
@@ -361,7 +361,7 @@ export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
               <div className="space-y-1">
                 <Label className="text-muted-foreground text-sm">로트번호</Label>
                 <p className="font-medium">{form.lotNumber}</p>
@@ -372,7 +372,7 @@ export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
               </div>
               <div className="space-y-1">
                 <Label className="text-muted-foreground text-sm">수주처</Label>
-                <p className="font-medium">{form.client}</p>
+                <p className="font-medium truncate">{form.client}</p>
               </div>
               <div className="space-y-1">
                 <Label className="text-muted-foreground text-sm">현장명</Label>
@@ -541,8 +541,8 @@ export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
         {/* 제품내용 (아코디언) */}
         <Card>
           <CardHeader>
-            <div className="flex items-center justify-between">
-              <CardTitle className="text-lg flex items-center gap-2">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <CardTitle className="text-lg flex items-center gap-2 shrink-0">
                 제품내용
                 {!form.canEditItems && (
                   <span className="flex items-center gap-1 text-sm font-normal text-orange-600">
@@ -552,7 +552,7 @@ export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
                 )}
               </CardTitle>
               {form.products && form.products.length > 0 && (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 shrink-0">
                   <button
                     type="button"
                     onClick={expandAllProducts}
@@ -589,27 +589,25 @@ export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
                       <button
                         type="button"
                         onClick={() => toggleProduct(productKey)}
-                        className="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
+                        className="w-full flex items-center p-3 sm:p-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left gap-2"
                       >
-                        <div className="flex items-center gap-3">
+                        <div className="shrink-0 w-7 h-7 flex items-center justify-center">
                           {isExpanded ? (
                             <ChevronDown className="h-5 w-5 text-gray-500" />
                           ) : (
                             <ChevronRight className="h-5 w-5 text-gray-500" />
                           )}
-                          <Package className="h-5 w-5 text-blue-600" />
-                          <div>
-                            <span className="font-medium">{product.productName}</span>
+                        </div>
+                        <Package className="h-5 w-5 text-blue-600 shrink-0" />
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium break-words">{product.productName}</div>
+                          <div className="flex flex-wrap items-center gap-x-2 text-sm text-gray-500">
                             {product.openWidth && product.openHeight && (
-                              <span className="ml-2 text-sm text-gray-500">
-                                ({product.openWidth} × {product.openHeight})
-                              </span>
+                              <span className="whitespace-nowrap">({product.openWidth} × {product.openHeight})</span>
                             )}
+                            <span className="whitespace-nowrap">부품 {productItems.length}개</span>
                           </div>
                         </div>
-                        <span className="text-sm text-gray-500">
-                          {productItems.length}개 부품
-                        </span>
                       </button>
 
                       {/* 부품 목록 (확장 시 표시) */}
@@ -716,7 +714,7 @@ export function OrderSalesDetailEdit({ orderId }: OrderSalesDetailEditProps) {
 
       </div>
     );
-  }, [form]);
+  }, [form, expandedProducts]);
 
   return (
     <IntegratedDetailTemplate
diff --git a/src/components/orders/OrderSalesDetailView.tsx b/src/components/orders/OrderSalesDetailView.tsx
index 835faf9c..78ad5946 100644
--- a/src/components/orders/OrderSalesDetailView.tsx
+++ b/src/components/orders/OrderSalesDetailView.tsx
@@ -474,7 +474,9 @@ export function OrderSalesDetailView({ orderId }: OrderSalesDetailViewProps) {
               <InfoItem label="운임비용" value={order.shippingCostLabel || ""} />
               <InfoItem label="수신(반장/업체)" value={order.receiver || ""} />
               <InfoItem label="수신처 연락처" value={order.receiverContact || ""} />
-              <InfoItem label="수신처 주소" value={order.address || ""} />
+              <div className="col-span-2 md:col-span-4">
+                <InfoItem label="주소" value={order.address || ""} />
+              </div>
             </div>
           </CardContent>
         </Card>
diff --git a/src/components/organisms/LineItemsTable/LineItemsTable.tsx b/src/components/organisms/LineItemsTable/LineItemsTable.tsx
index 8fdb2916..dbc26750 100644
--- a/src/components/organisms/LineItemsTable/LineItemsTable.tsx
+++ b/src/components/organisms/LineItemsTable/LineItemsTable.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { Plus, X } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { QuantityInput } from '@/components/ui/quantity-input';
@@ -85,15 +85,15 @@ export function LineItemsTable<T extends { id: string }>({
   return (
     <>
       <div className="overflow-x-auto">
-        <Table>
+        <Table className="min-w-[1000px]">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[50px] text-center">#</TableHead>
-              <TableHead>품목명</TableHead>
-              <TableHead className="w-[100px] text-right">수량</TableHead>
-              <TableHead className="w-[120px] text-right">단가</TableHead>
-              <TableHead className="w-[120px] text-right">공급가액</TableHead>
-              <TableHead className="w-[100px] text-right">부가세</TableHead>
+              <TableHead className="min-w-[200px]">품목명</TableHead>
+              <TableHead className="w-[130px] text-right">수량</TableHead>
+              <TableHead className="w-[160px] text-right">단가</TableHead>
+              <TableHead className="w-[160px] text-right">공급가액</TableHead>
+              <TableHead className="w-[140px] text-right">부가세</TableHead>
               {renderExtraHeaders?.()}
               {showNote && <TableHead>적요</TableHead>}
               <TableHead className="w-[50px]"></TableHead>
@@ -111,7 +111,7 @@ export function LineItemsTable<T extends { id: string }>({
                     disabled={isViewMode}
                   />
                 </TableCell>
-                <TableCell>
+                <TableCell className="text-right">
                   <QuantityInput
                     value={getQuantity(item)}
                     onChange={(value) => onItemChange(index, 'quantity', value ?? 0)}
@@ -119,7 +119,7 @@ export function LineItemsTable<T extends { id: string }>({
                     min={1}
                   />
                 </TableCell>
-                <TableCell>
+                <TableCell className="text-right">
                   <CurrencyInput
                     value={getUnitPrice(item)}
                     onChange={(value) => onItemChange(index, 'unitPrice', value ?? 0)}
@@ -151,7 +151,7 @@ export function LineItemsTable<T extends { id: string }>({
                       className="h-8 w-8 text-red-600 hover:text-red-700"
                       onClick={() => onRemoveItem(index)}
                     >
-                      <X className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4" />
                     </Button>
                   )}
                 </TableCell>
diff --git a/src/components/organisms/MobileCard.tsx b/src/components/organisms/MobileCard.tsx
index 0df5996c..43a13b66 100644
--- a/src/components/organisms/MobileCard.tsx
+++ b/src/components/organisms/MobileCard.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { ReactNode, ComponentType, memo } from 'react';
+import { ReactNode, ComponentType, memo, useState } from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
-import { LucideIcon } from 'lucide-react';
+import { LucideIcon, ChevronDown } from 'lucide-react';
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
 
@@ -106,12 +106,16 @@ export interface MobileCardProps {
       }>;
 
   // === Layout ===
-  detailsColumns?: 1 | 2 | 3; // details 그리드 컬럼 수 (기본: 2)
+  detailsColumns?: 1 | 2 | 3; // details 그리드 컬럼 수 (기본: 1)
   showSeparator?: boolean; // 구분선 표시 여부 (기본: infoGrid 사용시 true)
 
   // === 추가 콘텐츠 ===
   topContent?: ReactNode;
   bottomContent?: ReactNode;
+
+  // === Collapsible ===
+  collapsible?: boolean;        // 기본값: true (접기/펼치기 자동 적용)
+  defaultExpanded?: boolean;    // 기본값: false (접힌 상태로 시작)
 }
 
 export function MobileCard({
@@ -143,11 +147,14 @@ export function MobileCard({
   // Actions
   actions,
   // Layout
-  detailsColumns = 2,
+  detailsColumns = 1,
   showSeparator,
   // 추가 콘텐츠
   topContent,
   bottomContent,
+  // Collapsible
+  collapsible: collapsibleProp = true,
+  defaultExpanded = false,
 }: MobileCardProps) {
   // === 별칭 통합 ===
   const handleClick = onClick || onCardClick;
@@ -156,6 +163,12 @@ export function MobileCard({
   const shouldShowCheckbox = showCheckbox ?? !!handleToggle;
   const shouldShowSeparator = showSeparator ?? (!!infoGrid || !!headerBadges);
 
+  // === Collapsible 로직 ===
+  const hasDetailContent =
+    itemDetails.length > 0 || !!infoGrid || !!actions || !!bottomContent || !!description;
+  const isCollapsible = collapsibleProp && hasDetailContent;
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
   // === Badge 렌더링 ===
   const renderBadge = () => {
     // statusBadge 우선 (ReactNode)
@@ -261,83 +274,151 @@ export function MobileCard({
     return renderDetails();
   };
 
+  // === 헤더 클릭 핸들러 ===
+  const handleHeaderClick = () => {
+    if (isCollapsible) {
+      setExpanded((prev) => !prev);
+    } else {
+      handleClick?.();
+    }
+  };
+
+  // === 세부 영역 클릭 핸들러 ===
+  const handleDetailClick = () => {
+    handleClick?.();
+  };
+
   return (
     <div
       className={cn(
-        'border rounded-lg p-5 space-y-4 bg-white dark:bg-card transition-all overflow-hidden',
-        handleClick && 'cursor-pointer',
+        'border rounded-lg bg-white dark:bg-card transition-all overflow-hidden',
         isSelected
           ? 'border-blue-500 bg-blue-50/50'
           : 'border-gray-200 hover:border-primary/50',
         className
       )}
-      onClick={handleClick}
     >
       {/* 상단 추가 콘텐츠 */}
-      {topContent}
+      {topContent && <div className="px-5 pt-5">{topContent}</div>}
 
-      {/* 헤더 영역 */}
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex items-start gap-3 flex-1 min-w-0">
-          {/* Checkbox */}
+      {/* 헤더 영역 - 항상 보임 */}
+      <div
+        className={cn(
+          'p-5 space-y-2',
+          isCollapsible ? 'cursor-pointer select-none' : handleClick && 'cursor-pointer',
+        )}
+        onClick={handleHeaderClick}
+      >
+        {/* 1행: 체크박스 + 뱃지들 + 상태뱃지 (flex-wrap으로 자연 줄바꿈) */}
+        <div className="flex items-center gap-2 flex-wrap">
           {shouldShowCheckbox && handleToggle && (
             <Checkbox
               checked={isSelected}
               onCheckedChange={handleToggle}
               onClick={(e) => e.stopPropagation()}
-              className="mt-0.5 h-5 w-5"
+              className="h-5 w-5 shrink-0"
             />
           )}
-
-          {/* Icon */}
-          {icon && <div className="mt-0.5 shrink-0">{icon}</div>}
-
-          <div className="flex-1 min-w-0">
-            {/* 헤더 뱃지들 */}
-            {headerBadges && (
-              <div className="flex items-center gap-2 flex-wrap mb-2">
-                {headerBadges}
-              </div>
-            )}
-
-            {/* 제목 */}
-            <h3 className="font-semibold text-gray-900 dark:text-gray-100 truncate">
-              {title}
-            </h3>
-
-            {/* 부제목 */}
-            {subtitle && (
-              <p className="text-sm text-muted-foreground truncate">
-                {subtitle}
-              </p>
-            )}
-          </div>
+          {icon && <div className="shrink-0">{icon}</div>}
+          {headerBadges}
+          {renderBadge()}
         </div>
 
-        {/* 우측 상단: 뱃지 */}
-        <div className="shrink-0">{renderBadge()}</div>
+        {/* 3행: 제목 + 쉐브론 */}
+        <div className="flex items-start gap-2">
+          <h3 className="font-semibold text-gray-900 dark:text-gray-100 break-words min-w-0 flex-1">
+            {title}
+          </h3>
+          {isCollapsible && (
+            <ChevronDown
+              className={cn(
+                'w-5 h-5 text-muted-foreground transition-transform duration-200 shrink-0 mt-0.5',
+                expanded && 'rotate-180'
+              )}
+            />
+          )}
+        </div>
+
+        {/* 4행: 부제목 */}
+        {subtitle && (
+          <p className="text-sm text-muted-foreground break-words">
+            {subtitle}
+          </p>
+        )}
       </div>
 
-      {/* 설명 */}
-      {description && (
-        <p className="text-sm text-muted-foreground line-clamp-2">
-          {description}
-        </p>
+      {/* 세부 영역 - collapsible 시 접기/펼치기 */}
+      {isCollapsible ? (
+        <div
+          className={cn(
+            'grid transition-[grid-template-rows] duration-200 ease-out',
+            expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+          )}
+        >
+          <div className="overflow-hidden">
+            <div
+              className={cn(
+                'px-5 pb-5 space-y-4',
+                handleClick && 'cursor-pointer'
+              )}
+              onClick={handleDetailClick}
+            >
+              {/* 설명 */}
+              {description && (
+                <p className="text-sm text-muted-foreground line-clamp-2">
+                  {description}
+                </p>
+              )}
+
+              {/* 구분선 */}
+              {shouldShowSeparator && (infoGrid || itemDetails.length > 0) && (
+                <Separator className="bg-gray-100" />
+              )}
+
+              {/* 정보 영역 */}
+              {renderInfoArea()}
+
+              {/* 액션 버튼 */}
+              {renderActions()}
+
+              {/* 하단 추가 콘텐츠 */}
+              {bottomContent}
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* 비-collapsible: 기존과 동일 */
+        hasDetailContent && (
+          <div
+            className={cn(
+              'px-5 pb-5 space-y-4',
+              handleClick && 'cursor-pointer'
+            )}
+            onClick={handleClick}
+          >
+            {/* 설명 */}
+            {description && (
+              <p className="text-sm text-muted-foreground line-clamp-2">
+                {description}
+              </p>
+            )}
+
+            {/* 구분선 */}
+            {shouldShowSeparator && (infoGrid || itemDetails.length > 0) && (
+              <Separator className="bg-gray-100" />
+            )}
+
+            {/* 정보 영역 */}
+            {renderInfoArea()}
+
+            {/* 액션 버튼 */}
+            {renderActions()}
+
+            {/* 하단 추가 콘텐츠 */}
+            {bottomContent}
+          </div>
+        )
       )}
-
-      {/* 구분선 (infoGrid/headerBadges 사용시) */}
-      {shouldShowSeparator && (infoGrid || itemDetails.length > 0) && (
-        <Separator className="bg-gray-100" />
-      )}
-
-      {/* 정보 영역 */}
-      {renderInfoArea()}
-
-      {/* 액션 버튼 */}
-      {renderActions()}
-
-      {/* 하단 추가 콘텐츠 */}
-      {bottomContent}
     </div>
   );
 }
diff --git a/src/components/organisms/StatCards.tsx b/src/components/organisms/StatCards.tsx
index 1f303b92..7d2ae153 100644
--- a/src/components/organisms/StatCards.tsx
+++ b/src/components/organisms/StatCards.tsx
@@ -41,6 +41,8 @@ export function StatCards({ stats }: StatCardsProps) {
               isClickable ? 'cursor-pointer hover:border-primary/50' : ''
             } ${
               stat.isActive ? 'border-primary bg-primary/5' : ''
+            } ${
+              count % 2 === 1 && index === count - 1 ? 'col-span-2 sm:col-span-1' : ''
             }`}
             onClick={stat.onClick}
           >
diff --git a/src/components/outbound/ShipmentManagement/ShipmentCreate.tsx b/src/components/outbound/ShipmentManagement/ShipmentCreate.tsx
index 82763328..7b13305c 100644
--- a/src/components/outbound/ShipmentManagement/ShipmentCreate.tsx
+++ b/src/components/outbound/ShipmentManagement/ShipmentCreate.tsx
@@ -7,9 +7,10 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, X as XIcon, ChevronDown, Search } from 'lucide-react';
+import { Plus, Trash2, ChevronDown, Search } from 'lucide-react';
 import { getTodayString } from '@/lib/utils/date';
 import { Input } from '@/components/ui/input';
+import { DateTimePicker } from '@/components/ui/date-time-picker';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -378,7 +379,7 @@ export function ShipmentCreate() {
           <CardTitle className="text-base">기본 정보</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          <div className="grid grid-cols-1 gap-4">
             {/* 출고번호 - 자동생성 */}
             <div>
               <div className="text-sm text-muted-foreground mb-1">출고번호</div>
@@ -588,11 +589,10 @@ export function ShipmentCreate() {
                     </Select>
                   </TableCell>
                   <TableCell className="p-1">
-                    <Input
-                      type="datetime-local"
+                    <DateTimePicker
                       value={dispatch.arrivalDateTime}
-                      onChange={(e) => handleDispatchChange(index, 'arrivalDateTime', e.target.value)}
-                      className="h-8"
+                      onChange={(val) => handleDispatchChange(index, 'arrivalDateTime', val)}
+                      size="sm"
                       disabled={isSubmitting}
                     />
                   </TableCell>
@@ -651,7 +651,7 @@ export function ShipmentCreate() {
                         onClick={() => handleRemoveDispatch(index)}
                         disabled={isSubmitting}
                       >
-                        <XIcon className="w-4 h-4 text-red-500" />
+                        <Trash2 className="w-4 h-4 text-red-500" />
                       </Button>
                     )}
                   </TableCell>
diff --git a/src/components/outbound/ShipmentManagement/ShipmentDetail.tsx b/src/components/outbound/ShipmentManagement/ShipmentDetail.tsx
index beabf024..eed286f0 100644
--- a/src/components/outbound/ShipmentManagement/ShipmentDetail.tsx
+++ b/src/components/outbound/ShipmentManagement/ShipmentDetail.tsx
@@ -38,6 +38,7 @@ import {
   DialogHeader,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
+import { DateTimePicker } from '@/components/ui/date-time-picker';
 import { Label } from '@/components/ui/label';
 import { PhoneInput } from '@/components/ui/phone-input';
 import { DocumentViewer } from '@/components/document-system/viewer/DocumentViewer';
@@ -327,7 +328,7 @@ export function ShipmentDetail({ id }: ShipmentDetailProps) {
             <CardTitle className="text-base">기본 정보</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 gap-4">
               {renderInfoField('로트번호', detail.lotNo)}
               {renderInfoField('현장명', detail.siteName)}
               {renderInfoField('수주처', detail.customerName)}
@@ -577,12 +578,10 @@ export function ShipmentDetail({ id }: ShipmentDetailProps) {
             {targetStatus === 'ready' && (
               <div className="space-y-2">
                 <Label htmlFor="loadingTime">상차 시간 (선택)</Label>
-                <Input
-                  id="loadingTime"
-                  type="datetime-local"
+                <DateTimePicker
                   value={statusFormData.loadingTime}
-                  onChange={(e) =>
-                    setStatusFormData((prev) => ({ ...prev, loadingTime: e.target.value }))
+                  onChange={(val) =>
+                    setStatusFormData((prev) => ({ ...prev, loadingTime: val }))
                   }
                 />
               </div>
@@ -629,12 +628,10 @@ export function ShipmentDetail({ id }: ShipmentDetailProps) {
             {targetStatus === 'completed' && (
               <div className="space-y-2">
                 <Label htmlFor="confirmedArrival">도착 확인 시간 (선택)</Label>
-                <Input
-                  id="confirmedArrival"
-                  type="datetime-local"
+                <DateTimePicker
                   value={statusFormData.confirmedArrival}
-                  onChange={(e) =>
-                    setStatusFormData((prev) => ({ ...prev, confirmedArrival: e.target.value }))
+                  onChange={(val) =>
+                    setStatusFormData((prev) => ({ ...prev, confirmedArrival: val }))
                   }
                 />
               </div>
diff --git a/src/components/outbound/ShipmentManagement/ShipmentEdit.tsx b/src/components/outbound/ShipmentManagement/ShipmentEdit.tsx
index 27c7e806..f36a9de5 100644
--- a/src/components/outbound/ShipmentManagement/ShipmentEdit.tsx
+++ b/src/components/outbound/ShipmentManagement/ShipmentEdit.tsx
@@ -7,8 +7,9 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, X as XIcon, ChevronDown, Search } from 'lucide-react';
+import { Plus, Trash2, ChevronDown, Search } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { DateTimePicker } from '@/components/ui/date-time-picker';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -390,7 +391,7 @@ export function ShipmentEdit({ id }: ShipmentEditProps) {
             <CardTitle className="text-base">기본 정보</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 gap-4">
               <div className="space-y-1">
                 <Label className="text-muted-foreground">로트번호</Label>
                 <div className="font-medium">{detail.lotNo}</div>
@@ -587,11 +588,10 @@ export function ShipmentEdit({ id }: ShipmentEditProps) {
                       </Select>
                     </TableCell>
                     <TableCell className="p-1">
-                      <Input
-                        type="datetime-local"
+                      <DateTimePicker
                         value={dispatch.arrivalDateTime}
-                        onChange={(e) => handleDispatchChange(index, 'arrivalDateTime', e.target.value)}
-                        className="h-8"
+                        onChange={(val) => handleDispatchChange(index, 'arrivalDateTime', val)}
+                        size="sm"
                         disabled={isSubmitting}
                       />
                     </TableCell>
@@ -650,7 +650,7 @@ export function ShipmentEdit({ id }: ShipmentEditProps) {
                           onClick={() => handleRemoveDispatch(index)}
                           disabled={isSubmitting}
                         >
-                          <XIcon className="w-4 h-4 text-red-500" />
+                          <Trash2 className="w-4 h-4 text-red-500" />
                         </Button>
                       )}
                     </TableCell>
diff --git a/src/components/outbound/ShipmentManagement/ShipmentList.tsx b/src/components/outbound/ShipmentManagement/ShipmentList.tsx
index d13cd69f..64289926 100644
--- a/src/components/outbound/ShipmentManagement/ShipmentList.tsx
+++ b/src/components/outbound/ShipmentManagement/ShipmentList.tsx
@@ -335,7 +335,7 @@ export function ShipmentList() {
             headerBadges={
               <>
                 <Badge variant="outline" className="text-xs">
-                  #{globalIndex}
+                  {globalIndex}
                 </Badge>
                 <Badge variant="outline" className="text-xs">
                   {item.shipmentNo}
diff --git a/src/components/outbound/VehicleDispatchManagement/VehicleDispatchEdit.tsx b/src/components/outbound/VehicleDispatchManagement/VehicleDispatchEdit.tsx
index 6af8f002..ab45e5d5 100644
--- a/src/components/outbound/VehicleDispatchManagement/VehicleDispatchEdit.tsx
+++ b/src/components/outbound/VehicleDispatchManagement/VehicleDispatchEdit.tsx
@@ -8,6 +8,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Input } from '@/components/ui/input';
+import { DateTimePicker } from '@/components/ui/date-time-picker';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -266,10 +267,9 @@ export function VehicleDispatchEdit({ id }: VehicleDispatchEditProps) {
                 </div>
                 <div className="space-y-2">
                   <Label>입차일시</Label>
-                  <Input
-                    type="datetime-local"
+                  <DateTimePicker
                     value={formData.arrivalDateTime}
-                    onChange={(e) => handleInputChange('arrivalDateTime', e.target.value)}
+                    onChange={(val) => handleInputChange('arrivalDateTime', val)}
                     disabled={isSubmitting}
                   />
                 </div>
diff --git a/src/components/outbound/VehicleDispatchManagement/VehicleDispatchList.tsx b/src/components/outbound/VehicleDispatchManagement/VehicleDispatchList.tsx
index b8b5bc64..30f3dbf9 100644
--- a/src/components/outbound/VehicleDispatchManagement/VehicleDispatchList.tsx
+++ b/src/components/outbound/VehicleDispatchManagement/VehicleDispatchList.tsx
@@ -271,7 +271,7 @@ export function VehicleDispatchList() {
             headerBadges={
               <>
                 <Badge variant="outline" className="text-xs">
-                  #{globalIndex}
+                  {globalIndex}
                 </Badge>
                 <Badge variant="outline" className="text-xs">
                   {item.dispatchNo}
diff --git a/src/components/pricing-table-management/PricingTableForm.tsx b/src/components/pricing-table-management/PricingTableForm.tsx
index 46b57e2c..33b7fe48 100644
--- a/src/components/pricing-table-management/PricingTableForm.tsx
+++ b/src/components/pricing-table-management/PricingTableForm.tsx
@@ -10,7 +10,7 @@
 
 import { useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
-import { ArrowLeft, Save, Trash2, X } from 'lucide-react';
+import { ArrowLeft, Save, Trash2 } from 'lucide-react';
 import { getTodayString } from '@/lib/utils/date';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -420,7 +420,7 @@ export function PricingTableForm({ mode, initialData }: PricingTableFormProps) {
                           onClick={() => handleRemoveRow(index)}
                           className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                         >
-                          <X className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                         </Button>
                       </td>
                     </tr>
diff --git a/src/components/pricing-table-management/PricingTableListClient.tsx b/src/components/pricing-table-management/PricingTableListClient.tsx
index dd2aa981..7441ae7f 100644
--- a/src/components/pricing-table-management/PricingTableListClient.tsx
+++ b/src/components/pricing-table-management/PricingTableListClient.tsx
@@ -323,7 +323,7 @@ export default function PricingTableListClient() {
             headerBadges={
               <>
                 <Badge variant="outline" className="text-xs">
-                  #{globalIndex}
+                  {globalIndex}
                 </Badge>
                 <Badge variant="outline" className="text-xs font-mono">
                   {item.pricingCode}
diff --git a/src/components/pricing/PricingListClient.tsx b/src/components/pricing/PricingListClient.tsx
index cc1de3cf..3217dc02 100644
--- a/src/components/pricing/PricingListClient.tsx
+++ b/src/components/pricing/PricingListClient.tsx
@@ -299,9 +299,11 @@ export function PricingListClient({
         title={item.itemName}
         headerBadges={
           <div className="flex items-center gap-2 flex-wrap">
-            <code className="text-xs bg-gray-100 px-2 py-1 rounded">
-              {item.itemCode}
-            </code>
+            {item.itemCode && (
+              <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+                {item.itemCode}
+              </code>
+            )}
             {renderItemTypeBadge(item.itemType)}
           </div>
         }
diff --git a/src/components/process-management/ProcessListClient.tsx b/src/components/process-management/ProcessListClient.tsx
index 7b2ba2b3..99fdf981 100644
--- a/src/components/process-management/ProcessListClient.tsx
+++ b/src/components/process-management/ProcessListClient.tsx
@@ -496,7 +496,7 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
             onClick={() => handleRowClick(process)}
             headerBadges={
               <>
-                <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
+                <Badge variant="outline" className="text-xs">{globalIndex}</Badge>
                 <Badge variant="outline" className="text-xs font-mono">{process.processCode}</Badge>
               </>
             }
diff --git a/src/components/production/ProductionDashboard/index.tsx b/src/components/production/ProductionDashboard/index.tsx
index 2f743411..a770299d 100644
--- a/src/components/production/ProductionDashboard/index.tsx
+++ b/src/components/production/ProductionDashboard/index.tsx
@@ -143,27 +143,27 @@ export default function ProductionDashboard() {
 
   return (
     <PageLayout>
-      <div className="space-y-6">
+      <div className="space-y-6 overflow-x-hidden pb-20">
         {/* 헤더 */}
-        <div className="flex items-center justify-between">
+        <div className="space-y-3">
           <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 shrink-0">
               <Factory className="h-5 w-5 text-primary" />
             </div>
-            <div>
-              <h1 className="text-2xl font-bold">생산 현황판</h1>
+            <div className="min-w-0">
+              <h1 className="text-xl sm:text-2xl font-bold">생산 현황판</h1>
               <p className="text-sm text-muted-foreground">공장별 작업 현황을 확인합니다.</p>
             </div>
           </div>
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             {screenPerm.canView && (
-              <Button variant="outline" onClick={handleWorkerScreenClick}>
-                <Users className="mr-2 h-4 w-4" />
+              <Button variant="outline" size="sm" onClick={handleWorkerScreenClick}>
+                <Users className="mr-1 h-4 w-4" />
                 작업자 화면
               </Button>
             )}
             {workOrderPerm.canView && (
-              <Button variant="outline" onClick={handleWorkOrderListClick}>
+              <Button variant="outline" size="sm" onClick={handleWorkOrderListClick}>
                 작업지시 목록
               </Button>
             )}
@@ -171,19 +171,21 @@ export default function ProductionDashboard() {
         </div>
 
         {/* 공정별 탭 (동적 생성) */}
-        <Tabs value={selectedTab} onValueChange={setSelectedTab}>
-          <TabsList>
-            {isLoadingProcesses ? (
-              <TabsTrigger value="all" className="px-6">전체</TabsTrigger>
-            ) : (
-              tabOptions.map((tab) => (
-                <TabsTrigger key={tab.value} value={tab.value} className="px-6">
-                  {tab.label}
-                </TabsTrigger>
-              ))
-            )}
-          </TabsList>
-        </Tabs>
+        <div className="overflow-x-auto -mx-3 px-3 md:mx-0 md:px-0">
+          <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+            <TabsList className="w-max">
+              {isLoadingProcesses ? (
+                <TabsTrigger value="all" className="px-6">전체</TabsTrigger>
+              ) : (
+                tabOptions.map((tab) => (
+                  <TabsTrigger key={tab.value} value={tab.value} className="px-4 sm:px-6">
+                    {tab.label}
+                  </TabsTrigger>
+                ))
+              )}
+            </TabsList>
+          </Tabs>
+        </div>
 
         {/* 로딩 상태 */}
         {isLoading && <StatCardGridSkeleton count={6} />}
@@ -395,41 +397,40 @@ function WorkOrderCard({ order, onClick, showDelay, showCompleted }: WorkOrderCa
       onClick={onClick}
       className="p-3 border rounded-lg hover:bg-accent cursor-pointer transition-colors"
     >
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-medium text-muted-foreground">
-              {order.orderNo}
-            </span>
-            {!showCompleted && (
-              <Badge className={`text-xs ${statusColors[order.status]}`}>
-                {STATUS_LABELS[order.status]}
-              </Badge>
-            )}
-          </div>
-          <p className="text-sm font-medium mt-1 truncate">{order.productName}</p>
-          <p className="text-xs text-muted-foreground truncate">{order.client}</p>
-          {order.assignees.length > 0 && (
-            <p className="text-xs text-blue-600 truncate">담당: {order.assignees.join(', ')}</p>
-          )}
-        </div>
-        <div className="text-right shrink-0">
-          <Badge variant="outline" className="text-xs">
-            {order.processName}
+      {/* 1행: 작업번호 + 상태뱃지 + 공정뱃지 */}
+      <div className="flex items-center gap-1.5 flex-wrap">
+        <span className="text-xs font-medium text-muted-foreground">
+          {order.orderNo}
+        </span>
+        {!showCompleted && (
+          <Badge className={`text-xs ${statusColors[order.status]}`}>
+            {STATUS_LABELS[order.status]}
           </Badge>
-          {showDelay && order.delayDays && (
-            <p className="text-xs text-orange-600 mt-1">+{order.delayDays}일 지연</p>
-          )}
-          {showCompleted && (
-            <p className="text-xs text-green-600 mt-1">{formatDate(order.createdAt)}</p>
-          )}
-          {order.isUrgent && !showDelay && !showCompleted && (
-            <p className="text-xs text-muted-foreground mt-1">순위 {order.priority}</p>
-          )}
-        </div>
+        )}
+        <Badge variant="outline" className="text-xs">
+          {order.processName}
+        </Badge>
       </div>
+      {/* 2행: 품명 + 우측 정보 */}
+      <div className="flex items-center justify-between gap-2 mt-1">
+        <p className="text-sm font-medium truncate min-w-0">{order.productName}</p>
+        {showDelay && order.delayDays && (
+          <span className="text-xs text-orange-600 font-medium shrink-0">+{order.delayDays}일 지연</span>
+        )}
+        {showCompleted && (
+          <span className="text-xs text-green-600 shrink-0">{formatDate(order.createdAt)}</span>
+        )}
+        {order.isUrgent && !showDelay && !showCompleted && (
+          <span className="text-xs text-muted-foreground shrink-0">순위 {order.priority}</span>
+        )}
+      </div>
+      {/* 3행: 거래처 */}
+      <p className="text-xs text-muted-foreground truncate">{order.client}</p>
+      {order.assignees.length > 0 && (
+        <p className="text-xs text-blue-600 truncate">담당: {order.assignees.join(', ')}</p>
+      )}
       {order.instruction && !showCompleted && (
-        <p className="text-xs text-muted-foreground mt-2 truncate">
+        <p className="text-xs text-muted-foreground mt-1 truncate">
           {order.instruction}
         </p>
       )}
diff --git a/src/components/production/WorkOrders/WorkOrderDetail.tsx b/src/components/production/WorkOrders/WorkOrderDetail.tsx
index 501ba9f2..d27d2457 100644
--- a/src/components/production/WorkOrders/WorkOrderDetail.tsx
+++ b/src/components/production/WorkOrders/WorkOrderDetail.tsx
@@ -74,7 +74,7 @@ function ProcessStepPills({
   }
 
   return (
-    <div className="flex items-center gap-2 flex-wrap">
+    <div className="flex flex-col sm:flex-row sm:flex-wrap gap-2">
       {steps.map((step, index) => {
         const isCompleted = index < currentStep;
 
@@ -384,83 +384,85 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
         {/* 기본 정보 (기획서 4열 구성) */}
         <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 md:p-6">
           <h3 className="font-semibold mb-4">기본 정보</h3>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-4">
-            {/* 1행: 작업번호 | 수주일 | 공정 | 구분 */}
-            <div className="min-w-0">
-              <p className="text-sm text-muted-foreground mb-1">작업번호</p>
-              <p className="font-medium truncate">{order.workOrderNo}</p>
-            </div>
-            <div className="min-w-0">
-              <p className="text-sm text-muted-foreground mb-1">수주일</p>
-              <p className="font-medium">{order.salesOrderDate || '-'}</p>
-            </div>
-            <div className="min-w-0">
-              <p className="text-sm text-muted-foreground mb-1">공정</p>
-              <p className="font-medium">{order.processName}</p>
-            </div>
-            <div className="min-w-0">
-              <p className="text-sm text-muted-foreground mb-1">구분</p>
-              <p className="font-medium">{order.processName !== '-' ? order.processName : '-'}</p>
-            </div>
+          <div className="max-h-[360px] overflow-y-auto md:max-h-none md:overflow-visible">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-4">
+              {/* 1행: 작업번호 | 수주일 | 공정 | 구분 */}
+              <div className="min-w-0">
+                <p className="text-sm text-muted-foreground mb-1">작업번호</p>
+                <p className="font-medium text-xs sm:text-sm break-all">{order.workOrderNo}</p>
+              </div>
+              <div className="min-w-0">
+                <p className="text-sm text-muted-foreground mb-1">수주일</p>
+                <p className="font-medium">{order.salesOrderDate || '-'}</p>
+              </div>
+              <div className="min-w-0">
+                <p className="text-sm text-muted-foreground mb-1">공정</p>
+                <p className="font-medium">{order.processName}</p>
+              </div>
+              <div className="min-w-0">
+                <p className="text-sm text-muted-foreground mb-1">구분</p>
+                <p className="font-medium">{order.processName !== '-' ? order.processName : '-'}</p>
+              </div>
 
-            {/* 2행: 로트번호 | 수주처 | 현장명 | 수주 담당자 */}
-            <div className="min-w-0">
-              <p className="text-sm text-muted-foreground mb-1">로트번호</p>
-              <p className="font-medium truncate">{order.lotNo}</p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">수주처</p>
-              <p className="font-medium">{order.client}</p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">현장명</p>
-              <p className="font-medium">{order.projectName}</p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">수주 담당자</p>
-              <p className="font-medium">{order.salesOrderWriter || '-'}</p>
-            </div>
+              {/* 2행: 로트번호 | 수주처 | 현장명 | 수주 담당자 */}
+              <div className="min-w-0">
+                <p className="text-sm text-muted-foreground mb-1">로트번호</p>
+                <p className="font-medium text-xs sm:text-sm break-all">{order.lotNo}</p>
+              </div>
+              <div className="min-w-0">
+                <p className="text-sm text-muted-foreground mb-1">수주처</p>
+                <p className="font-medium break-words">{order.client}</p>
+              </div>
+              <div className="min-w-0">
+                <p className="text-sm text-muted-foreground mb-1">현장명</p>
+                <p className="font-medium break-words">{order.projectName}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">수주 담당자</p>
+                <p className="font-medium">{order.salesOrderWriter || '-'}</p>
+              </div>
 
-            {/* 3행: 담당자 연락처 | 출고예정일 | 틀수 | 우선순위 */}
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">담당자 연락처</p>
-              <p className="font-medium">{order.clientContact || '-'}</p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">출고예정일</p>
-              <p className="font-medium">{order.shipmentDate || '-'}</p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">틀수 (개소)</p>
-              <p className="font-medium">{order.shutterCount != null ? `${Math.floor(order.shutterCount)}개소` : '-'}</p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">우선순위</p>
-              <p className="font-medium">{order.priorityLabel || '-'}</p>
-            </div>
+              {/* 3행: 담당자 연락처 | 출고예정일 | 틀수 | 우선순위 */}
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">담당자 연락처</p>
+                <p className="font-medium">{order.clientContact || '-'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">출고예정일</p>
+                <p className="font-medium">{order.shipmentDate || '-'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">틀수 (개소)</p>
+                <p className="font-medium">{order.shutterCount != null ? `${Math.floor(order.shutterCount)}개소` : '-'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">우선순위</p>
+                <p className="font-medium">{order.priorityLabel || '-'}</p>
+              </div>
 
-            {/* 4행: 부서 | 생산 담당자 | 상태 | 비고 */}
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">부서</p>
-              <p className="font-medium">{order.department || '-'}</p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">생산 담당자</p>
-              <p className="font-medium">
-                {order.assignees && order.assignees.length > 0
-                  ? order.assignees.map(a => a.name).join(', ')
-                  : order.assignee}
-              </p>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">상태</p>
-              <Badge className={`${WORK_ORDER_STATUS_COLORS[order.status]} border-0`}>
-                {WORK_ORDER_STATUS_LABELS[order.status]}
-              </Badge>
-            </div>
-            <div>
-              <p className="text-sm text-muted-foreground mb-1">비고</p>
-              <p className="font-medium whitespace-pre-wrap">{order.note || '-'}</p>
+              {/* 4행: 부서 | 생산 담당자 | 상태 | 비고 */}
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">부서</p>
+                <p className="font-medium">{order.department || '-'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">생산 담당자</p>
+                <p className="font-medium">
+                  {order.assignees && order.assignees.length > 0
+                    ? order.assignees.map(a => a.name).join(', ')
+                    : order.assignee}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">상태</p>
+                <Badge className={`${WORK_ORDER_STATUS_COLORS[order.status]} border-0`}>
+                  {WORK_ORDER_STATUS_LABELS[order.status]}
+                </Badge>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground mb-1">비고</p>
+                <p className="font-medium whitespace-pre-wrap">{order.note || '-'}</p>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/production/WorkOrders/WorkOrderEdit.tsx b/src/components/production/WorkOrders/WorkOrderEdit.tsx
index d084d83b..c7d80cd8 100644
--- a/src/components/production/WorkOrders/WorkOrderEdit.tsx
+++ b/src/components/production/WorkOrders/WorkOrderEdit.tsx
@@ -9,7 +9,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
-import { Pencil, Trash2 } from 'lucide-react';
+import { SquarePen, Trash2 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
@@ -374,9 +374,10 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
         )}
 
         {/* 기본 정보 (기획서 4열 구성) */}
-        <section className="bg-amber-50 border border-amber-200 rounded-lg p-6">
+        <section className="bg-amber-50 border border-amber-200 rounded-lg p-4 md:p-6">
           <h3 className="font-semibold mb-4">기본 정보</h3>
-          <div className="grid grid-cols-4 gap-x-6 gap-y-4">
+          <div className="max-h-[400px] overflow-y-auto md:max-h-none md:overflow-visible">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-3 md:gap-y-4">
             {/* 1행: 작업번호(읽기) | 수주일(읽기) | 공정(셀렉트) | 구분(읽기) */}
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">작업번호</Label>
@@ -500,6 +501,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
               />
             </div>
           </div>
+          </div>
         </section>
 
         {/* 공정 진행 섹션 */}
@@ -524,7 +526,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
             </p>
 
             {/* 공정 단계 토글 버튼 */}
-            <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex flex-col sm:flex-row sm:flex-wrap gap-2">
               {processSteps.map((step) => {
                 const isCompleted = stepStatus[step.key] || false;
                 return (
@@ -609,7 +611,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
                           onClick={() => handleItemEditStart(item.id)}
                           disabled={item.isEditing}
                         >
-                          <Pencil className="h-4 w-4" />
+                          <SquarePen className="h-4 w-4" />
                         </Button>
                         <Button
                           type="button"
diff --git a/src/components/production/WorkOrders/WorkOrderList.tsx b/src/components/production/WorkOrders/WorkOrderList.tsx
index fbb93316..757ac8cf 100644
--- a/src/components/production/WorkOrders/WorkOrderList.tsx
+++ b/src/components/production/WorkOrders/WorkOrderList.tsx
@@ -405,7 +405,7 @@ export function WorkOrderList() {
             headerBadges={
               <>
                 <Badge variant="outline" className="text-xs">
-                  #{globalIndex}
+                  {globalIndex}
                 </Badge>
                 <Badge variant="outline" className="text-xs">
                   {item.workOrderNo}
diff --git a/src/components/production/WorkResults/WorkResultList.tsx b/src/components/production/WorkResults/WorkResultList.tsx
index 7a743391..5ac7ed91 100644
--- a/src/components/production/WorkResults/WorkResultList.tsx
+++ b/src/components/production/WorkResults/WorkResultList.tsx
@@ -331,7 +331,7 @@ export function WorkResultList() {
             headerBadges={
               <>
                 <Badge variant="outline" className="text-xs">
-                  #{globalIndex}
+                  {globalIndex}
                 </Badge>
                 <Badge variant="outline" className="text-xs">
                   {item.lotNo}
diff --git a/src/components/production/WorkerScreen/MaterialInputModal.tsx b/src/components/production/WorkerScreen/MaterialInputModal.tsx
index 134021b0..09052c14 100644
--- a/src/components/production/WorkerScreen/MaterialInputModal.tsx
+++ b/src/components/production/WorkerScreen/MaterialInputModal.tsx
@@ -323,9 +323,9 @@ export function MaterialInputModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="!max-w-3xl p-0 gap-0">
+      <DialogContent className="!max-w-3xl p-0 gap-0 max-h-[85vh] flex flex-col">
         {/* 헤더 */}
-        <DialogHeader className="p-6 pb-4">
+        <DialogHeader className="p-6 pb-4 shrink-0">
           <DialogTitle className="text-xl font-semibold">
             자재 투입{workOrderItemName ? ` - ${workOrderItemName}` : ''}
           </DialogTitle>
@@ -334,7 +334,7 @@ export function MaterialInputModal({
           </p>
         </DialogHeader>
 
-        <div className="px-6 pb-6 space-y-4">
+        <div className="px-6 pb-6 space-y-4 flex-1 min-h-0 flex flex-col">
           {/* 자재 목록 */}
           {isLoading ? (
             <ContentSkeleton type="table" rows={4} />
@@ -343,7 +343,7 @@ export function MaterialInputModal({
               이 공정에 배정된 자재가 없습니다.
             </div>
           ) : (
-            <div className="space-y-4 max-h-[60vh] overflow-y-auto">
+            <div className="space-y-4 flex-1 overflow-y-auto min-h-0">
               {materialGroups.map((group) => {
                 const groupAllocated = group.lots.reduce(
                   (sum, lot) => sum + (allocations.get(getLotKey(lot)) || 0),
@@ -355,8 +355,8 @@ export function MaterialInputModal({
                 return (
                   <div key={group.groupKey} className="border rounded-lg overflow-hidden">
                     {/* 품목 그룹 헤더 */}
-                    <div className="flex items-center justify-between px-4 py-2.5 bg-gray-50 border-b">
-                      <div className="flex items-center gap-2">
+                    <div className="flex flex-wrap items-center justify-between gap-1.5 px-4 py-2.5 bg-gray-50 border-b">
+                      <div className="flex items-center gap-2 flex-wrap min-w-0">
                         {group.category && (
                           <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
                             group.category === 'guideRail' ? 'bg-blue-100 text-blue-700' :
@@ -381,7 +381,7 @@ export function MaterialInputModal({
                           </span>
                         )}
                       </div>
-                      <div className="flex items-center gap-3">
+                      <div className="flex items-center gap-2 flex-wrap">
                         <span className="text-xs text-gray-500">
                           {group.alreadyInputted > 0 ? (
                             <>
@@ -433,6 +433,7 @@ export function MaterialInputModal({
                     </div>
 
                     {/* 로트 테이블 */}
+                    <div className="overflow-x-auto">
                     <Table>
                       <TableHeader>
                         <TableRow>
@@ -509,6 +510,7 @@ export function MaterialInputModal({
                         })}
                       </TableBody>
                     </Table>
+                    </div>
                   </div>
                 );
               })}
@@ -516,7 +518,7 @@ export function MaterialInputModal({
           )}
 
           {/* 버튼 영역 */}
-          <div className="flex gap-3">
+          <div className="flex gap-3 shrink-0">
             <Button
               variant="outline"
               onClick={resetAndClose}
diff --git a/src/components/production/WorkerScreen/WorkItemCard.tsx b/src/components/production/WorkerScreen/WorkItemCard.tsx
index 4e47e7f0..fd40751b 100644
--- a/src/components/production/WorkerScreen/WorkItemCard.tsx
+++ b/src/components/production/WorkerScreen/WorkItemCard.tsx
@@ -14,7 +14,7 @@
  */
 
 import { useState, useCallback, memo } from 'react';
-import { ChevronDown, ChevronUp, Pencil, Trash2, ImageIcon } from 'lucide-react';
+import { ChevronDown, ChevronUp, SquarePen, Trash2, ImageIcon } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -89,11 +89,12 @@ export const WorkItemCard = memo(function WorkItemCard({
 
         {/* 제작 사이즈 (재공품은 숨김) */}
         {!item.isWip && (
-          <div className="flex items-center gap-1.5 text-sm text-gray-700">
+          <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-sm text-gray-700">
             <span className="text-gray-500">제작 사이즈</span>
             <span className="font-medium">
               {formatNumber(item.width)} X {formatNumber(item.height)} mm
             </span>
+            <span className="text-gray-500">수량</span>
             <span className="font-medium text-gray-900">{item.quantity}개</span>
           </div>
         )}
@@ -216,7 +217,7 @@ export const WorkItemCard = memo(function WorkItemCard({
                               className="h-7 w-7 p-0"
                               onClick={() => onEditMaterial(item.id, mat)}
                             >
-                              <Pencil className="h-3.5 w-3.5 text-gray-500" />
+                              <SquarePen className="h-3.5 w-3.5 text-gray-500" />
                             </Button>
                             <Button
                               variant="ghost"
@@ -264,7 +265,7 @@ function SlatExtraInfo({
   jointBar?: number;
 }) {
   return (
-    <div className="flex gap-2">
+    <div className="flex flex-wrap gap-2">
       {length != null && length > 0 && (
         <Badge variant="outline" className="text-xs px-2.5 py-1 border-gray-300">
           길이 {formatNumber(length)}mm
diff --git a/src/components/production/WorkerScreen/index.tsx b/src/components/production/WorkerScreen/index.tsx
index 2f005a1b..8ffa88fd 100644
--- a/src/components/production/WorkerScreen/index.tsx
+++ b/src/components/production/WorkerScreen/index.tsx
@@ -1383,7 +1383,7 @@ export default function WorkerScreen() {
 
   return (
     <PageLayout>
-      <div className="pb-20">
+      <div className="pb-20 overflow-x-hidden">
         {/* 완료 토스트 */}
         {toastInfo && <CompletionToast info={toastInfo} />}
 
@@ -1403,21 +1403,23 @@ export default function WorkerScreen() {
           value={activeTab}
           onValueChange={(v) => setActiveTab(v)}
         >
-          <TabsList className="w-full">
-            {processTabs.length > 0 ? (
-              processTabs.map((proc) => (
-                <TabsTrigger key={proc.id} value={proc.id} className="flex-1">
-                  {proc.processName}
-                </TabsTrigger>
-              ))
-            ) : (
-              (['screen', 'slat', 'bending'] as ProcessTab[]).map((tab) => (
-                <TabsTrigger key={tab} value={tab} className="flex-1">
-                  {PROCESS_TAB_LABELS[tab]}
-                </TabsTrigger>
-              ))
-            )}
-          </TabsList>
+          <div className="overflow-x-auto -mx-3 px-3 md:mx-0 md:px-0">
+            <TabsList className="w-max md:w-full">
+              {processTabs.length > 0 ? (
+                processTabs.map((proc) => (
+                  <TabsTrigger key={proc.id} value={proc.id} className="px-4 md:flex-1">
+                    {proc.processName}
+                  </TabsTrigger>
+                ))
+              ) : (
+                (['screen', 'slat', 'bending'] as ProcessTab[]).map((tab) => (
+                  <TabsTrigger key={tab} value={tab} className="px-4 md:flex-1">
+                    {PROCESS_TAB_LABELS[tab]}
+                  </TabsTrigger>
+                ))
+              )}
+            </TabsList>
+          </div>
 
           {(processTabs.length > 0
             ? processTabs.map((p) => p.id)
@@ -1508,7 +1510,7 @@ export default function WorkerScreen() {
                   <Card>
                     <CardContent className="p-4">
                       <h3 className="text-sm font-semibold text-gray-900 mb-3">수주 정보</h3>
-                      <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3">
+                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3">
                         <InfoField label="수주일" value={orderInfo?.orderDate} />
                         <InfoField label="수주로트" value={orderInfo?.salesOrderNo} />
                         <InfoField label="현장명" value={orderInfo?.siteName} />
@@ -1631,14 +1633,14 @@ export default function WorkerScreen() {
 
       {/* 하단 고정 버튼 */}
       {(hasWipItems || activeProcessSettings.needsWorkLog || activeProcessSettings.hasDocumentTemplate) && (
-        <div className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[24px] ${sidebarCollapsed ? 'md:left-[113px]' : 'md:left-[304px]'}`}>
-          <div className="flex gap-3">
+        <div className={`fixed bottom-4 left-3 right-3 px-3 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:left-auto md:right-[24px] md:px-6 ${sidebarCollapsed ? 'md:left-[113px]' : 'md:left-[304px]'}`}>
+          <div className="flex gap-2 md:gap-3">
             {hasWipItems ? (
               <Button
                 onClick={handleInspection}
-                className="flex-1 py-6 text-base font-medium bg-gray-900 hover:bg-gray-800"
+                className="flex-1 py-5 md:py-6 text-sm md:text-base font-medium bg-gray-900 hover:bg-gray-800"
               >
-                작업일지 및 검사성적서 보기
+                작업일지 및 검사성적서
               </Button>
             ) : (
               <>
@@ -1646,7 +1648,7 @@ export default function WorkerScreen() {
                   <Button
                     variant="outline"
                     onClick={handleWorkLog}
-                    className="flex-1 py-6 text-base font-medium"
+                    className="flex-1 py-5 md:py-6 text-sm md:text-base font-medium"
                   >
                     작업일지 보기
                   </Button>
@@ -1654,7 +1656,7 @@ export default function WorkerScreen() {
                 {activeProcessSettings.hasDocumentTemplate && (
                   <Button
                     onClick={handleInspection}
-                    className="flex-1 py-6 text-base font-medium bg-gray-900 hover:bg-gray-800"
+                    className="flex-1 py-5 md:py-6 text-sm md:text-base font-medium bg-gray-900 hover:bg-gray-800"
                   >
                     검사성적서 보기
                   </Button>
diff --git a/src/components/quality/InspectionManagement/InspectionList.tsx b/src/components/quality/InspectionManagement/InspectionList.tsx
index b127ba42..dff2ca6a 100644
--- a/src/components/quality/InspectionManagement/InspectionList.tsx
+++ b/src/components/quality/InspectionManagement/InspectionList.tsx
@@ -348,7 +348,7 @@ export function InspectionList() {
             onClick={() => handleRowClick(item)}
             headerBadges={
               <>
-                <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
+                <Badge variant="outline" className="text-xs">{globalIndex}</Badge>
                 <Badge variant="outline" className="text-xs">{item.qualityDocNumber}</Badge>
               </>
             }
diff --git a/src/components/quality/PerformanceReportManagement/PerformanceReportList.tsx b/src/components/quality/PerformanceReportManagement/PerformanceReportList.tsx
index 3d2a3785..430abd78 100644
--- a/src/components/quality/PerformanceReportManagement/PerformanceReportList.tsx
+++ b/src/components/quality/PerformanceReportManagement/PerformanceReportList.tsx
@@ -547,7 +547,7 @@ export function PerformanceReportList() {
             onToggleSelection={handlers.onToggle}
             headerBadges={
               <>
-                <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
+                <Badge variant="outline" className="text-xs">{globalIndex}</Badge>
                 <Badge variant="outline" className="text-xs">{item.qualityDocNumber}</Badge>
               </>
             }
diff --git a/src/components/quotes/LocationDetailPanel.tsx b/src/components/quotes/LocationDetailPanel.tsx
index 8589b573..b6faf9f7 100644
--- a/src/components/quotes/LocationDetailPanel.tsx
+++ b/src/components/quotes/LocationDetailPanel.tsx
@@ -261,7 +261,7 @@ export function LocationDetailPanel({
 
   if (!location) {
     return (
-      <div className="flex flex-col items-center justify-center h-full bg-gray-50 text-gray-500">
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 text-gray-500 px-6 text-center">
         <Package className="h-12 w-12 mb-4 text-gray-300" />
         <p className="text-lg font-medium">개소를 선택해주세요</p>
         <p className="text-sm">왼쪽 목록에서 개소를 선택하면 상세 정보가 표시됩니다</p>
@@ -279,7 +279,7 @@ export function LocationDetailPanel({
       <div className="bg-gray-50 border-b">
         {/* 1행: 층, 부호, 가로, 세로, 제품코드 */}
         <div className="px-4 py-3 space-y-3">
-          <div className="grid grid-cols-5 gap-3">
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
             <div>
               <label className="text-xs text-gray-600">층</label>
               <Input
@@ -357,7 +357,7 @@ export function LocationDetailPanel({
           </div>
 
           {/* 2행: 가이드레일, 전원, 제어기 */}
-          <div className="grid grid-cols-3 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
             <div>
               <label className="text-xs text-gray-600 flex items-center gap-1">
                 🔧 가이드레일
@@ -424,7 +424,7 @@ export function LocationDetailPanel({
           </div>
 
           {/* 3행: 제작사이즈, 산출중량, 산출면적, 수량, 산출하기 */}
-          <div className="grid grid-cols-5 gap-3 text-sm pt-2 border-t border-gray-200">
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 text-sm pt-2 border-t border-gray-200">
             <div>
               <span className="text-xs text-gray-500">제작사이즈</span>
               <p className="font-semibold">
diff --git a/src/components/quotes/LocationListPanel.tsx b/src/components/quotes/LocationListPanel.tsx
index 080601aa..a537de15 100644
--- a/src/components/quotes/LocationListPanel.tsx
+++ b/src/components/quotes/LocationListPanel.tsx
@@ -285,7 +285,7 @@ export function LocationListPanel({
       {!disabled && (
         <div className="bg-gray-50 p-4 space-y-3 border-b border-gray-200">
           {/* 1행: 층, 부호, 가로, 세로, 제품코드, 수량 */}
-          <div className="grid grid-cols-6 gap-2">
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
             <div>
               <label className="text-xs text-gray-600">층</label>
               <Input
@@ -364,8 +364,8 @@ export function LocationListPanel({
           </div>
 
           {/* 2행: 가이드레일, 전원, 제어기, 추가 버튼 */}
-          <div className="flex items-end gap-2">
-            <div className="flex-1">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 items-end">
+            <div>
               <label className="text-xs text-gray-600 flex items-center gap-1">
                 🔧 가이드레일
               </label>
@@ -437,7 +437,7 @@ export function LocationListPanel({
 
       {/* 발주 개소 목록 헤더 */}
       <div className="bg-blue-100 px-4 py-3 border-b border-blue-200">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
           <h3 className="font-semibold text-blue-800">
             📋 발주 개소 목록 ({locations.length})
           </h3>
diff --git a/src/components/quotes/QuoteFooterBar.tsx b/src/components/quotes/QuoteFooterBar.tsx
index 1a97e410..d1818c37 100644
--- a/src/components/quotes/QuoteFooterBar.tsx
+++ b/src/components/quotes/QuoteFooterBar.tsx
@@ -77,22 +77,22 @@ export function QuoteFooterBar({
 }: QuoteFooterBarProps) {
   return (
     <div className="sticky bottom-0 bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200 shadow-lg">
-      <div className="px-3 py-3 md:px-6 md:py-4 flex items-center justify-between">
+      <div className="px-3 py-3 md:px-6 md:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
         {/* 왼쪽: 뒤로가기 + 금액 표시 */}
         <div className="flex items-center gap-3 md:gap-6">
           <Button
             variant="outline"
             onClick={onBack}
             size="sm"
-            className="md:size-default"
+            className="md:size-default shrink-0"
           >
             <ArrowLeft className="h-4 w-4 md:mr-2" />
             <span className="hidden md:inline">목록으로</span>
           </Button>
 
-          <div>
-            <p className="text-xs md:text-sm text-gray-600">예상 전체 견적금액</p>
-            <p className="text-lg md:text-3xl font-bold text-blue-600">
+          <div className="min-w-0">
+            <p className="text-xs md:text-sm text-gray-600 whitespace-nowrap">예상 전체 견적금액</p>
+            <p className="text-lg md:text-3xl font-bold text-blue-600 whitespace-nowrap">
               {formatNumber(totalAmount)}
               <span className="text-sm md:text-lg font-normal text-gray-500 ml-1">원</span>
             </p>
@@ -100,7 +100,7 @@ export function QuoteFooterBar({
         </div>
 
         {/* 오른쪽: 버튼들 */}
-        <div className="flex items-center gap-1 md:gap-3">
+        <div className="flex items-center flex-wrap gap-1 md:gap-3 justify-end">
           {/* 견적서 보기 */}
           <Button
             onClick={onQuoteView}
diff --git a/src/components/quotes/QuoteManagementClient.tsx b/src/components/quotes/QuoteManagementClient.tsx
index d6c2a9e1..8cfbf807 100644
--- a/src/components/quotes/QuoteManagementClient.tsx
+++ b/src/components/quotes/QuoteManagementClient.tsx
@@ -471,7 +471,7 @@ export function QuoteManagementClient({
                   variant="outline"
                   className="bg-gray-100 text-gray-700 font-mono text-xs"
                 >
-                  #{globalIndex}
+                  {globalIndex}
                 </Badge>
                 <code className="inline-block text-xs bg-gray-100 text-gray-700 px-2.5 py-0.5 rounded-md font-mono whitespace-nowrap">
                   {quote.quoteNumber}
diff --git a/src/components/quotes/QuoteSummaryPanel.tsx b/src/components/quotes/QuoteSummaryPanel.tsx
index 9cb36844..557e7a95 100644
--- a/src/components/quotes/QuoteSummaryPanel.tsx
+++ b/src/components/quotes/QuoteSummaryPanel.tsx
@@ -250,23 +250,23 @@ export function QuoteSummaryPanel({
         </div>
 
         {/* 하단 바: 총 개소 수, 예상 견적금액, 견적 상태 */}
-        <div className="bg-gray-900 text-white px-6 py-5 flex items-center justify-between">
-          <div className="flex items-center gap-10">
+        <div className="bg-gray-900 text-white px-4 py-4 md:px-6 md:py-5 flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-4 md:gap-10">
             <div>
-              <p className="text-sm text-gray-400">총 개소 수</p>
-              <p className="text-4xl font-bold">{locations.length}</p>
+              <p className="text-xs md:text-sm text-gray-400">총 개소 수</p>
+              <p className="text-2xl md:text-4xl font-bold">{locations.length}</p>
             </div>
             <div>
-              <p className="text-sm text-gray-400">예상 견적금액</p>
-              <p className="text-4xl font-bold text-blue-400">
+              <p className="text-xs md:text-sm text-gray-400">예상 견적금액</p>
+              <p className="text-2xl md:text-4xl font-bold text-blue-400">
                 {formatNumber(totalAmount)}
-                <span className="text-xl ml-1">원</span>
+                <span className="text-base md:text-xl ml-1">원</span>
               </p>
             </div>
           </div>
           <div className="text-right">
-            <p className="text-sm text-gray-400">견적 상태</p>
-            <span className="inline-block bg-blue-500/20 text-blue-300 border border-blue-500/50 text-lg px-4 py-1 rounded">
+            <p className="text-xs md:text-sm text-gray-400">견적 상태</p>
+            <span className="inline-block bg-blue-500/20 text-blue-300 border border-blue-500/50 text-sm md:text-lg px-3 py-1 md:px-4 rounded">
               작성중
             </span>
           </div>
diff --git a/src/components/settings/PaymentHistoryManagement/PaymentHistoryClient.tsx b/src/components/settings/PaymentHistoryManagement/PaymentHistoryClient.tsx
index 2f7bca30..143d13a7 100644
--- a/src/components/settings/PaymentHistoryManagement/PaymentHistoryClient.tsx
+++ b/src/components/settings/PaymentHistoryManagement/PaymentHistoryClient.tsx
@@ -27,7 +27,7 @@ import {
   type RowClickHandlers,
   type ListParams,
 } from '@/components/templates/UniversalListPage';
-import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
+import { ListMobileCard } from '@/components/organisms/MobileCard';
 import { getPayments } from './actions';
 import { formatNumber } from '@/lib/utils/amount';
 import type { PaymentHistory, SortOption } from './types';
@@ -188,21 +188,21 @@ export function PaymentHistoryClient({
             isSelected={false}
             onToggleSelection={() => {}}
             infoGrid={
-              <div className="grid grid-cols-2 gap-3">
-                <InfoField label="결제일" value={item.paymentDate} />
-                <InfoField label="구독명" value={item.subscriptionName} />
-                <InfoField label="결제 수단" value={item.paymentMethod} />
-                <InfoField label="금액" value={`${formatNumber(item.amount)}원`} />
-                <div className="col-span-2">
-                  <InfoField
-                    label="구독 기간"
-                    value={
-                      item.subscriptionPeriod.start && item.subscriptionPeriod.end
-                        ? `${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`
-                        : '-'
-                    }
-                  />
-                </div>
+              <div className="space-y-1.5 text-sm">
+                {[
+                  { label: '결제일', value: item.paymentDate },
+                  { label: '구독명', value: item.subscriptionName },
+                  { label: '결제 수단', value: item.paymentMethod || '-' },
+                  { label: '금액', value: `${formatNumber(item.amount)}원` },
+                  { label: '구독 기간', value: item.subscriptionPeriod.start && item.subscriptionPeriod.end
+                    ? `${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`
+                    : '-' },
+                ].map((field) => (
+                  <div key={field.label} className="flex justify-between items-center">
+                    <span className="text-muted-foreground">{field.label}</span>
+                    <span className="font-medium">{field.value}</span>
+                  </div>
+                ))}
               </div>
             }
             actions={
diff --git a/src/components/settings/PaymentHistoryManagement/index.tsx b/src/components/settings/PaymentHistoryManagement/index.tsx
index 8d92de4d..7b24b4cb 100644
--- a/src/components/settings/PaymentHistoryManagement/index.tsx
+++ b/src/components/settings/PaymentHistoryManagement/index.tsx
@@ -157,17 +157,21 @@ export function PaymentHistoryManagement({
         isSelected={false}
         onToggleSelection={() => {}}
         infoGrid={
-          <div className="grid grid-cols-2 gap-3">
-            <InfoField label="결제일" value={item.paymentDate} />
-            <InfoField label="구독명" value={item.subscriptionName} />
-            <InfoField label="결제 수단" value={item.paymentMethod} />
-            <InfoField label="금액" value={`${formatNumber(item.amount)}원`} />
-            <div className="col-span-2">
-              <InfoField
-                label="구독 기간"
-                value={`${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`}
-              />
-            </div>
+          <div className="space-y-1.5 text-sm">
+            {[
+              { label: '결제일', value: item.paymentDate },
+              { label: '구독명', value: item.subscriptionName },
+              { label: '결제 수단', value: item.paymentMethod || '-' },
+              { label: '금액', value: `${formatNumber(item.amount)}원` },
+              { label: '구독 기간', value: item.subscriptionPeriod.start && item.subscriptionPeriod.end
+                ? `${item.subscriptionPeriod.start} ~ ${item.subscriptionPeriod.end}`
+                : '-' },
+            ].map((field) => (
+              <div key={field.label} className="flex justify-between items-center">
+                <span className="text-muted-foreground">{field.label}</span>
+                <span className="font-medium">{field.value}</span>
+              </div>
+            ))}
           </div>
         }
         actions={
diff --git a/src/components/settings/PopupManagement/PopupList.tsx b/src/components/settings/PopupManagement/PopupList.tsx
index bd7d6414..2fe9a1e3 100644
--- a/src/components/settings/PopupManagement/PopupList.tsx
+++ b/src/components/settings/PopupManagement/PopupList.tsx
@@ -165,7 +165,7 @@ export function PopupList({ initialData }: PopupListProps) {
                 </div>
                 <div className="flex-1 space-y-2">
                   <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">#{globalIndex}</span>
+                    <span className="text-sm text-muted-foreground">{globalIndex}</span>
                     <Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
                       {item.status === 'active' ? '사용함' : '사용안함'}
                     </Badge>
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
index 7616cd30..f7fcf084 100644
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -9,6 +9,7 @@ import { cn } from "./utils";
 import { Button } from "./button";
 import { Calendar } from "./calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { useCalendarScheduleInit } from "@/hooks/useCalendarScheduleInit";
 
 interface DatePickerProps {
   /** 선택된 날짜 (YYYY-MM-DD 형식 문자열) */
@@ -74,6 +75,9 @@ function DatePicker({
   const [showMonthPicker, setShowMonthPicker] = React.useState(false);
   const [pickerYear, setPickerYear] = React.useState(new Date().getFullYear());
 
+  // 표시 중인 연도의 공휴일/일정 데이터를 스토어에 로드
+  useCalendarScheduleInit(displayMonth?.getFullYear() ?? new Date().getFullYear());
+
   // 문자열 → Date 변환
   const selectedDate = React.useMemo(() => {
     if (!value) return undefined;
@@ -154,7 +158,21 @@ function DatePicker({
           <span className="truncate">{displayText}</span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align={align} side={side} sideOffset={sideOffset}>
+      <PopoverContent
+        className="w-auto p-0"
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        onPointerDownOutside={(e) => {
+          // Popover가 Portal로 렌더링되어, Dialog 안이나 Windows 환경에서
+          // 날짜 클릭이 "외부 클릭"으로 오인되는 것을 방지
+          // 닫기는 handleSelect(날짜선택) / Escape / 트리거 토글로 처리
+          e.preventDefault();
+        }}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
         <div className="p-3">
           {showMonthPicker ? (
             /* 연월 선택 피커 */
diff --git a/src/components/ui/date-range-picker.tsx b/src/components/ui/date-range-picker.tsx
index d0691b8d..714ae736 100644
--- a/src/components/ui/date-range-picker.tsx
+++ b/src/components/ui/date-range-picker.tsx
@@ -10,6 +10,7 @@ import { cn } from "./utils";
 import { Button } from "./button";
 import { Calendar } from "./calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { useCalendarScheduleInit } from "@/hooks/useCalendarScheduleInit";
 
 interface DateRangePickerProps {
   /** 시작 날짜 (yyyy-MM-dd 형식) */
@@ -62,6 +63,9 @@ function DateRangePicker({
   const [showMonthPicker, setShowMonthPicker] = React.useState(false);
   const [pickerYear, setPickerYear] = React.useState(new Date().getFullYear());
 
+  // 표시 중인 연도의 공휴일/일정 데이터를 스토어에 로드
+  useCalendarScheduleInit(displayMonth?.getFullYear() ?? new Date().getFullYear());
+
   // 내부 범위 상태 (팝오버 내 선택 중간 상태 관리)
   const [internalRange, setInternalRange] = React.useState<DateRange | undefined>();
   // 선택 단계: 'idle' → 'selecting-end' (시작일 선택 후 종료일 대기)
@@ -192,7 +196,12 @@ function DateRangePicker({
           <span className="truncate">{displayText}</span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align={align}>
+      <PopoverContent
+        className="w-auto p-0"
+        align={align}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <div className="p-3">
           {showMonthPicker ? (
             /* 연월 선택 피커 */
diff --git a/src/components/ui/date-time-picker.tsx b/src/components/ui/date-time-picker.tsx
new file mode 100644
index 00000000..c3d67d71
--- /dev/null
+++ b/src/components/ui/date-time-picker.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+import { DatePicker } from "./date-picker";
+import { TimePicker } from "./time-picker";
+
+interface DateTimePickerProps {
+  /** "YYYY-MM-DD HH:mm" 또는 "YYYY-MM-DDTHH:mm" 형식 */
+  value?: string;
+  /** 동일 형식으로 반환 */
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+  /** DatePicker/TimePicker에 전달 */
+  size?: "default" | "sm" | "lg";
+  /** TimePicker 분 단위 간격 (기본 5) */
+  minuteStep?: number;
+  datePlaceholder?: string;
+  timePlaceholder?: string;
+}
+
+function DateTimePicker({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  size = "default",
+  minuteStep = 5,
+  datePlaceholder = "날짜 선택",
+  timePlaceholder = "시간 선택",
+}: DateTimePickerProps) {
+  // 구분자 감지: T 또는 공백
+  const separator = React.useMemo(() => {
+    if (!value) return "T";
+    return value.includes("T") ? "T" : " ";
+  }, [value]);
+
+  // value를 date / time 파트로 분리
+  const [datePart, timePart] = React.useMemo(() => {
+    if (!value) return ["", ""];
+    const sep = value.includes("T") ? "T" : " ";
+    const parts = value.split(sep);
+    return [parts[0] || "", parts[1] || ""];
+  }, [value]);
+
+  const handleDateChange = React.useCallback(
+    (newDate: string) => {
+      const time = timePart || "00:00";
+      onChange?.(`${newDate}${separator}${time}`);
+    },
+    [timePart, separator, onChange]
+  );
+
+  const handleTimeChange = React.useCallback(
+    (newTime: string) => {
+      const date = datePart || new Date().toISOString().slice(0, 10);
+      onChange?.(`${date}${separator}${newTime}`);
+    },
+    [datePart, separator, onChange]
+  );
+
+  const sizeClasses = {
+    default: "h-10",
+    sm: "h-8 text-sm",
+    lg: "h-12 text-base",
+  };
+
+  return (
+    <div className={cn("flex gap-2", className)}>
+      <DatePicker
+        value={datePart}
+        onChange={handleDateChange}
+        disabled={disabled}
+        size={size}
+        placeholder={datePlaceholder}
+        className="flex-1 min-w-0"
+      />
+      <TimePicker
+        value={timePart}
+        onChange={handleTimeChange}
+        disabled={disabled}
+        minuteStep={minuteStep}
+        placeholder={timePlaceholder}
+        className={cn("w-[130px] shrink-0", sizeClasses[size])}
+      />
+    </div>
+  );
+}
+
+export { DateTimePicker };
+export type { DateTimePickerProps };
diff --git a/src/components/ui/multi-select-combobox.tsx b/src/components/ui/multi-select-combobox.tsx
index 7712243a..7ed308c7 100644
--- a/src/components/ui/multi-select-combobox.tsx
+++ b/src/components/ui/multi-select-combobox.tsx
@@ -85,7 +85,12 @@ export function MultiSelectCombobox({
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
+      <PopoverContent
+        className="w-[200px] p-0"
+        align="start"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <Command>
           <CommandInput placeholder={searchPlaceholder} />
           <CommandList>
diff --git a/src/components/ui/searchable-select.tsx b/src/components/ui/searchable-select.tsx
index ff62b821..8476b25b 100644
--- a/src/components/ui/searchable-select.tsx
+++ b/src/components/ui/searchable-select.tsx
@@ -167,7 +167,12 @@ export function SearchableSelect({
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+      <PopoverContent
+        className="w-[--radix-popover-trigger-width] p-0"
+        align="start"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <Command shouldFilter={!isServerSearch}>
           <CommandInput
             placeholder={searchPlaceholder}
diff --git a/src/components/ui/time-picker.tsx b/src/components/ui/time-picker.tsx
index 66a4ee48..e7dde8e9 100644
--- a/src/components/ui/time-picker.tsx
+++ b/src/components/ui/time-picker.tsx
@@ -135,7 +135,12 @@ function TimePicker({
           {displayValue}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent
+        className="w-auto p-0"
+        align="start"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <div className="p-3">
           {/* 헤더 */}
           <div className="text-center mb-3">
diff --git a/src/hooks/useCalendarScheduleInit.ts b/src/hooks/useCalendarScheduleInit.ts
new file mode 100644
index 00000000..2f089937
--- /dev/null
+++ b/src/hooks/useCalendarScheduleInit.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useCalendarScheduleStore } from '@/stores/useCalendarScheduleStore';
+
+/**
+ * 달력 일정 데이터를 스토어에 초기 로드하는 경량 훅
+ *
+ * 지정된 연도의 공휴일/세무일정/회사일정이 아직 로드되지 않았으면
+ * API를 호출하여 Zustand 스토어에 캐시합니다.
+ *
+ * @param year 로드할 연도
+ */
+export function useCalendarScheduleInit(year: number) {
+  const fetchSchedules = useCalendarScheduleStore((s) => s.fetchSchedules);
+  const loaded = useCalendarScheduleStore((s) => s.loadedYears[year]);
+
+  useEffect(() => {
+    if (!loaded) {
+      fetchSchedules(year);
+    }
+  }, [year, loaded, fetchSchedules]);
+}
diff --git a/src/layouts/AuthenticatedLayout.tsx b/src/layouts/AuthenticatedLayout.tsx
index cd9ea21c..eb5e6e03 100644
--- a/src/layouts/AuthenticatedLayout.tsx
+++ b/src/layouts/AuthenticatedLayout.tsx
@@ -49,6 +49,7 @@ import { deserializeMenuItems } from '@/lib/utils/menuTransform';
 import { stripLocalePrefix } from '@/lib/utils/locale';
 import { safeJsonParse } from '@/lib/utils';
 import { useMenuPolling } from '@/hooks/useMenuPolling';
+import { useCalendarScheduleInit } from '@/hooks/useCalendarScheduleInit';
 import {
   Select,
   SelectContent,
@@ -109,6 +110,9 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
   const router = useRouter();
   const pathname = usePathname(); // 현재 경로 추적
 
+  // 올해 공휴일/세무일정 데이터를 Zustand 스토어에 로드
+  useCalendarScheduleInit(new Date().getFullYear());
+
   // 폰트 크기 조절 (12~20px, 기본 16px)
   const FONT_SIZES = [12, 13, 14, 15, 16, 17, 18, 19, 20] as const;
   const [fontSize, setFontSize] = useState(16);