feat: 다수 기능 개선 - 순찰, 출근, 작업분석, 모바일 UI 등

- 순찰/점검 기능 개선 (zone-detail 페이지 추가)
- 출근/근태 시스템 개선 (연차 조회, 근무현황)
- 작업분석 대분류 그룹화 및 마이그레이션 스크립트
- 모바일 네비게이션 UI 추가
- NAS 배포 도구 및 문서 추가

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

web-ui/components/sidebar-nav.html

@@ -89,6 +89,9 @@
         <span class="nav-arrow">&#9662;</span>
       </button>
       <div class="nav-category-items">
+        <a href="/pages/attendance/my-vacation-info.html" class="nav-item" data-page-key="attendance.my_vacation_info">
+          <span class="nav-text">내 연차 정보</span>
+        </a>
         <a href="/pages/attendance/monthly.html" class="nav-item" data-page-key="attendance.monthly">
           <span class="nav-text">월간 근태</span>
         </a>
@@ -354,16 +357,68 @@ body.has-sidebar.sidebar-collapsed > .main-content {
   margin-left: 60px;
 }
 
-/* 반응형 */
+/* 반응형 - 모바일 */
 @media (max-width: 1024px) {
   .sidebar-nav {
     transform: translateX(-100%);
+    width: 280px;
+    top: 0;
+    height: 100vh;
+    z-index: 1001;
   }
 
   .sidebar-nav.mobile-open {
     transform: translateX(0);
   }
 
+  /* 모바일 헤더 */
+  .sidebar-toggle {
+    justify-content: space-between;
+    padding: 0 1rem;
+    height: 64px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .sidebar-toggle::after {
+    content: '메뉴';
+    font-size: 1rem;
+    font-weight: 600;
+    color: #e2e8f0;
+  }
+
+  .sidebar-nav .toggle-icon {
+    font-size: 1.5rem;
+  }
+
+  .sidebar-nav.mobile-open .toggle-icon {
+    font-size: 1.5rem;
+  }
+
+  .sidebar-nav.mobile-open .toggle-icon::before {
+    content: '✕';
+  }
+
+  .sidebar-nav.mobile-open .toggle-icon span {
+    display: none;
+  }
+
+  /* 오버레이 배경 */
+  .sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    backdrop-filter: blur(2px);
+  }
+
+  .sidebar-overlay.show {
+    display: block;
+  }
+
   body.has-sidebar .dashboard-container,
   body.has-sidebar .page-container,
   body.has-sidebar > .main-content,
@@ -372,5 +427,53 @@ body.has-sidebar.sidebar-collapsed > .main-content {
   body.has-sidebar > .dashboard-main {
     margin-left: 0;
   }
+
+  /* 메뉴 아이템 모바일 최적화 */
+  .nav-item {
+    padding: 1rem 1.25rem;
+    font-size: 1rem;
+  }
+
+  .nav-category-items .nav-item {
+    padding-left: 3rem;
+  }
+
+  .nav-category-header {
+    padding: 1rem 1.25rem;
+    font-size: 0.9rem;
+  }
+
+  .nav-icon {
+    font-size: 1.5rem;
+  }
+}
+
+/* 모바일 메뉴 버튼 (헤더용) */
+.mobile-menu-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 10px;
+  cursor: pointer;
+  color: white;
+  font-size: 1.5rem;
+  transition: all 0.2s;
+}
+
+.mobile-menu-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+@media (max-width: 1024px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
 }
 </style>
+
+<!-- 모바일 오버레이 -->
+<div class="sidebar-overlay" id="sidebarOverlay"></div>