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

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

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

web-ui/components/navbar.html

@@ -3,6 +3,10 @@
 <header class="dashboard-header">
   <div class="header-content">
     <div class="header-left">
+      <!-- 모바일 메뉴 버튼 -->
+      <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="메뉴 열기">
+        ☰
+      </button>
       <div class="brand">
         <img src="/img/logo.png" alt="테크니컬코리아" class="brand-logo">
         <div class="brand-text">
@@ -16,7 +20,7 @@
       <div class="datetime-weather-box">
         <div class="date-time-section">
           <span class="date-value" id="dateValue">--월 --일 (--)</span>
-          <span class="time-value" id="timeValue">--:--:--</span>
+          <span class="time-value" id="timeValue">--시 --분 --초</span>
         </div>
         <div class="weather-section" id="weatherSection">
           <span class="weather-icon" id="weatherIcon">🌤️</span>
@@ -598,18 +602,61 @@ body {
   font-size: var(--text-sm);
 }
 
+/* 모바일 메뉴 버튼 */
+.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;
+  margin-right: var(--space-3);
+  flex-shrink: 0;
+}
+
+.mobile-menu-btn:hover,
+.mobile-menu-btn:active {
+  background: rgba(255, 255, 255, 0.25);
+}
+
 /* 반응형 디자인 */
+@media (max-width: 1024px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
+}
+
 @media (max-width: 768px) {
   .dashboard-header {
-    padding: var(--space-3) var(--space-4);
+    padding: var(--space-2) var(--space-3);
+    height: 64px;
+  }
+
+  body {
+    padding-top: 64px;
+  }
+
+  .header-content {
+    padding: 0 var(--space-2);
+  }
+
+  .brand-logo {
+    width: 36px;
+    height: 36px;
   }
 
   .brand-title {
-    font-size: var(--text-lg);
+    font-size: var(--text-base);
   }
 
   .brand-subtitle {
-    font-size: var(--text-xs);
+    display: none;
   }
 
   .header-center {
@@ -620,6 +667,11 @@ body {
     display: none;
   }
 
+  .user-avatar {
+    width: 36px;
+    height: 36px;
+  }
+
   .dashboard-btn .btn-text,
   .report-btn .btn-text {
     display: none;
@@ -627,12 +679,55 @@ body {
 
   .dashboard-btn,
   .report-btn {
-    padding: var(--space-2) var(--space-3);
+    padding: var(--space-2);
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+  }
+
+  .dashboard-btn .btn-icon,
+  .report-btn .btn-icon {
+    margin: 0;
+  }
+
+  .notification-btn {
+    width: 40px;
+    height: 40px;
   }
 
   .notification-dropdown {
-    width: 280px;
-    right: -50px;
+    position: fixed;
+    top: 64px;
+    left: var(--space-3);
+    right: var(--space-3);
+    width: auto;
+  }
+
+  .header-right {
+    gap: var(--space-2);
+  }
+
+  .mobile-menu-btn {
+    width: 40px;
+    height: 40px;
+    margin-right: var(--space-2);
+  }
+
+  .user-profile {
+    padding: var(--space-1) var(--space-2);
+  }
+
+  .profile-menu {
+    position: fixed;
+    top: 64px;
+    right: var(--space-3);
+    left: auto;
+    width: 200px;
   }
 }
+
+/* 모바일 사이드바 열릴 때 바디 스크롤 방지 */
+body.sidebar-mobile-open {
+  overflow: hidden;
+}
 </style>