refactor(web-ui): 전체 UI 반응형 디자인 개선

모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록
UI 컴포넌트를 전면 개선했습니다.

주요 변경사항:
- 네비게이션 바: flex-wrap, rem 단위, sticky positioning 적용
- 사용자 정보 영역: max-width로 크기 제한, 텍스트 overflow 처리
- 공통 헤더: clamp()로 반응형 폰트, 반응형 패딩 적용
- 모든 관리 페이지: ES6 모듈 로딩 통일 (type="module")
- 반응형 breakpoint: 1200px, 768px, 640px, 480px

개선 효과:
✅ 모든 페이지에서 일관된 헤더 표시
✅ 사용자 정보 영역 늘어나는 문제 해결
✅ 모든 화면 크기에서 최적화된 레이아웃
✅ rem 단위 사용으로 접근성 개선

수정된 파일:
- web-ui/components/navbar.html: 전면 리팩토링
- web-ui/css/common.css: 반응형 스타일 추가
- web-ui/pages/**/*.html: 모듈 로딩 및 버전 업데이트 (13개 파일)
- web-ui/js/*.js: 모듈 시스템 개선

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

web-ui/css/common.css

@@ -11,27 +11,34 @@
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   text-align: center;
-  padding: 3rem 2rem;
+  padding: 2rem 1.5rem;
   margin-bottom: 0;
 }
 
 .work-report-header h1 {
-  font-size: 2.5rem;
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
   font-weight: 700;
-  margin: 0 0 1rem 0;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  margin: 0 0 0.75rem 0;
+  text-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .work-report-header .subtitle {
-  font-size: 1.1rem;
+  font-size: clamp(0.875rem, 2vw, 1.1rem);
   opacity: 0.9;
   margin: 0;
   font-weight: 300;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .work-report-main {
   background: #f8f9fa;
-  min-height: calc(100vh - 200px);
+  min-height: calc(100vh - 12rem);
   padding-top: 2rem;
 }
 
@@ -43,18 +50,52 @@
   background: rgba(255, 255, 255, 0.9);
   color: #495057;
   text-decoration: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   font-weight: 500;
-  margin: 0 2rem 2rem 2rem;
+  margin: 0 1.5rem 1.5rem 1.5rem;
   transition: all 0.3s ease;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
+  white-space: nowrap;
 }
 
 .back-button:hover {
   background: white;
   color: #007bff;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+  transform: translateY(-0.0625rem);
+  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
+}
+
+/* 반응형 헤더 */
+@media (max-width: 768px) {
+  .work-report-header {
+    padding: 1.5rem 1rem;
+  }
+
+  .work-report-header h1 {
+    margin-bottom: 0.5rem;
+  }
+
+  .back-button {
+    margin: 0 1rem 1rem 1rem;
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .work-report-header {
+    padding: 1.25rem 0.75rem;
+  }
+
+  .work-report-header .subtitle {
+    font-size: 0.8125rem;
+  }
+
+  .back-button {
+    margin: 0 0.75rem 0.75rem 0.75rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.8125rem;
+  }
 }
 
 /* Reset and Base Styles */