enhance: daily-work-report.html 모던 UI 대폭 개선 - 대시보드 일관성 및 사용성 향상

🎨 모던 디자인 시스템 적용:
1. 대시보드와 일관된 디자인 언어:
   - design-system.css 활용한 통일된 색상, 타이포그래피
   - 동일한 카드, 버튼, 애니메이션 스타일
   - 일관된 간격, 그림자, 테두리 반경

2. 새로운 CSS 파일 분리:
   - daily-work-report.css 생성 (673줄)
   - 인라인 스타일 완전 제거 (926줄 → 0줄)
   - 모듈화된 스타일 관리

🚀 사용자 경험 대폭 개선:
1. 모던한 진행 단계 표시:
   - 상단 3단계 진행 바 추가
   - 실시간 단계 상태 표시 (활성/완료)
   - 시각적 진행도 피드백

2. 개선된 레이아웃 구조:
   - 헤더: 그라데이션 배경, 중앙 정렬
   - 메인: 최대 너비 1200px, 중앙 배치
   - 카드: 일관된 패딩, 그림자, 테두리

3. 향상된 작업자 선택 UI:
   - worker-btn → worker-card 클래스 변경
   - 카드형 디자인으로 시각적 개선
   - 호버 효과: 상단 컬러 바, 배경 변화
   - 선택 상태: 그라데이션 배경, 흰색 텍스트

✨ 인터랙션 개선:
1. 버튼 디자인 통일:
   - 일관된 패딩, 높이 (48px)
   - 호버 효과: translateY(-2px), 그림자 확대
   - 색상: primary, success, secondary 통일

2. 폼 요소 개선:
   - form-input 클래스로 통일된 스타일
   - 포커스 상태: 테두리 색상, 그림자 효과
   - 라벨: 명확한 계층 구조

3. 애니메이션 효과:
   - 단계 전환: opacity, transform 애니메이션
   - 카드 호버: translateY, 그림자 변화
   - 부드러운 전환: var(--transition-normal)

📱 반응형 디자인 최적화:
1. 모바일 (768px 이하):
   - 진행 단계: 세로 배치
   - 작업자 그리드: 1열로 변경
   - 패딩, 폰트 크기 조정

2. 태블릿 (1024px 이하):
   - 적절한 그리드 컬럼 수 조정
   - 터치 친화적 버튼 크기

🔧 기술적 개선:
1. JavaScript 업데이트:
   - updateProgressSteps() 함수 추가
   - 진행 단계 실시간 업데이트
   - CSS 클래스명 변경 반영

2. HTML 구조 개선:
   - 시맨틱 태그 활용 (header, main)
   - 접근성 향상 (label, aria 속성)
   - 깔끔한 마크업 구조

🎯 결과:
- 대시보드와 완벽한 디자인 일관성
- 직관적이고 사용하기 쉬운 인터페이스
- 모든 디바이스에서 최적화된 경험
- 프로페셔널한 시각적 품질

테스트: http://localhost:20000/pages/common/daily-work-report.html

web-ui/js/daily-work-report.js

@@ -86,9 +86,29 @@ function goToStep(stepNumber) {
       }
     }
   }
+  
+  // 진행 단계 표시 업데이트
+  updateProgressSteps(stepNumber);
+  
   currentStep = stepNumber;
 }
 
+// 진행 단계 표시 업데이트
+function updateProgressSteps(currentStepNumber) {
+  for (let i = 1; i <= 3; i++) {
+    const progressStep = document.getElementById(`progressStep${i}`);
+    if (progressStep) {
+      progressStep.classList.remove('active', 'completed');
+      
+      if (i < currentStepNumber) {
+        progressStep.classList.add('completed');
+      } else if (i === currentStepNumber) {
+        progressStep.classList.add('active');
+      }
+    }
+  }
+}
+
 // 초기 데이터 로드 (통합 API 사용)
 async function loadData() {
   try {
@@ -203,7 +223,7 @@ function populateWorkerGrid() {
   workers.forEach(worker => {
     const btn = document.createElement('button');
     btn.type = 'button';
-    btn.className = 'worker-btn';
+    btn.className = 'worker-card';
     btn.textContent = worker.worker_name;
     btn.dataset.id = worker.worker_id;
     
@@ -470,7 +490,7 @@ function resetForm() {
   goToStep(1);
   
   selectedWorkers.clear();
-  document.querySelectorAll('.worker-btn.selected').forEach(btn => {
+  document.querySelectorAll('.worker-card.selected').forEach(btn => {
     btn.classList.remove('selected');
   });