enhance: 작업 입력 UI 대폭 개선 - 모던하고 직관적인 인터페이스 구현

🎨 모던한 카드형 레이아웃:
1. 작업 항목 디자인 완전 개편:
   - 그라데이션 배경 (primary → tertiary)
   - 상단 컬러 바 호버 효과
   - 향상된 그림자 및 호버 애니메이션
   - 2xl 테두리 반경으로 부드러운 외관

2. 폼 필드 그룹화:
   - form-field-group 컨테이너 도입
   - 아이콘과 라벨 조합으로 직관성 향상
   - 포커스 상태 시각적 피드백
   - 호버 효과로 상호작용성 증대

✨ 에러 유형 조건부 표시 개선:
1. 스마트한 UI 로직:
   - 업무 상태가 '에러'일 때만 에러 유형 섹션 표시
   - 부드러운 슬라이드 다운 애니메이션 (0.4s cubic-bezier)
   - opacity, max-height, transform 조합 애니메이션

2. 시각적 구분:
   - 에러 섹션: error-50 → warning-50 그라데이션
   - 에러 테두리: error-200 컬러
   - 에러 아이콘 및 라벨: error-500/700 컬러

🚀 빠른 시간 버튼 고도화:
1. 프리미엄 디자인:
   - 그라데이션 배경 (primary-100 → primary-200)
   - 호버 시: primary-500 → primary-600 그라데이션
   - 반짝이는 효과 (::before 슬라이드 애니메이션)
   - 3D 변형 효과 (scale, translateY)

2. 향상된 상호작용:
   - 30분 옵션 추가 (0.5시간)
   - 클릭 시 스케일 애니메이션
   - 중앙 정렬 및 최소 너비 설정
   - cubic-bezier 전환 효과

🎯 사용자 경험 개선:
1. 직관적인 인터페이스:
   - 아이콘으로 필드 구분 (🏗️ 프로젝트, ⚙️ 작업유형, 📊 업무상태, ⚠️ 에러유형, ⏰ 시간)
   - 명확한 플레이스홀더 텍스트
   - 논리적인 필드 배치 (2열 그리드)

2. 반응형 최적화:
   - 모바일에서 적절한 패딩 및 폰트 크기
   - 터치 친화적 버튼 크기
   - 유연한 그리드 레이아웃

🔧 기술적 개선:
1. JavaScript 로직 강화:
   - setupWorkEntryEvents 함수 완전 재작성
   - 폼 필드 포커스 효과 추가
   - 에러 타입 조건부 표시 로직 개선
   - 버튼 클릭 피드백 애니메이션

2. CSS 아키텍처:
   - 컴포넌트 기반 스타일링
   - CSS 변수 활용한 일관된 디자인
   - 애니메이션 키프레임 정의
   - 계층적 스타일 구조

🎯 결과:
- 허접했던 UI → 프로페셔널한 모던 인터페이스
- 에러 유형 조건부 표시로 사용성 대폭 향상
- 직관적이고 아름다운 작업 입력 경험
- 대시보드와 완벽한 디자인 일관성

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

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

@@ -260,61 +260,78 @@ function addWorkEntry() {
   
   entryDiv.innerHTML = `
     <div class="work-entry-header">
-      <div class="work-entry-title">작업 ${workEntryCounter}</div>
-      <button type="button" class="remove-work-btn" onclick="removeWorkEntry(${workEntryCounter})">×</button>
+      <div class="work-entry-title">작업 항목 #${workEntryCounter}</div>
+      <button type="button" class="remove-work-btn" onclick="removeWorkEntry(${workEntryCounter})">
+        <i class="fas fa-times"></i>
+      </button>
     </div>
     
-    <div class="work-entry-row">
-      <div class="form-group">
-        <label>🏗️ 프로젝트</label>
-        <select class="large-select project-select" required>
-          <option value="">프로젝트 선택</option>
+    <div class="work-entry-grid">
+      <div class="form-field-group">
+        <div class="form-field-label">
+          <span class="form-field-icon">🏗️</span>
+          프로젝트
+        </div>
+        <select class="form-select project-select" required>
+          <option value="">프로젝트를 선택하세요</option>
           ${projects.map(p => `<option value="${p.project_id}">${p.project_name}</option>`).join('')}
         </select>
       </div>
       
-      <div class="form-group">
-        <label>⚙️ 작업 유형</label>
-        <select class="large-select work-type-select" required>
-          <option value="">작업 유형 선택</option>
+      <div class="form-field-group">
+        <div class="form-field-label">
+          <span class="form-field-icon">⚙️</span>
+          작업 유형
+        </div>
+        <select class="form-select work-type-select" required>
+          <option value="">작업 유형을 선택하세요</option>
           ${workTypes.map(wt => `<option value="${wt.id}">${wt.name}</option>`).join('')}
         </select>
       </div>
     </div>
 
-    <div class="work-entry-row">
-      <div class="form-group">
-        <label>📊 업무 상태</label>
-        <select class="large-select work-status-select" required>
-          <option value="">업무 상태 선택</option>
+    <div class="work-entry-full">
+      <div class="form-field-group">
+        <div class="form-field-label">
+          <span class="form-field-icon">📊</span>
+          업무 상태
+        </div>
+        <select class="form-select work-status-select" required>
+          <option value="">업무 상태를 선택하세요</option>
           ${workStatusTypes.map(ws => `<option value="${ws.id}">${ws.name}</option>`).join('')}
         </select>
       </div>
-      
-      <div class="form-group error-type-section">
-        <label>❌ 에러 유형</label>
-        <select class="large-select error-type-select">
-          <option value="">에러 유형 선택</option>
-          ${errorTypes.map(et => `<option value="${et.id}">${et.name}</option>`).join('')}
-        </select>
-      </div>
     </div>
     
-    <div class="time-input-row">
-      <div class="form-group">
-        <label>⏰ 작업 시간</label>
-        <input type="number" class="large-select time-input" 
-               placeholder="시간 입력" 
-               min="0" 
-               max="24" 
-               step="0.5" 
-               required>
-        <div class="quick-time-buttons">
-          <div class="quick-time-btn" data-hours="1">1시간</div>
-          <div class="quick-time-btn" data-hours="2">2시간</div>
-          <div class="quick-time-btn" data-hours="4">4시간</div>
-          <div class="quick-time-btn" data-hours="8">8시간</div>
-        </div>
+    <div class="error-type-section work-entry-full">
+      <div class="form-field-label">
+        <span class="form-field-icon">⚠️</span>
+        에러 유형
+      </div>
+      <select class="form-select error-type-select">
+        <option value="">에러 유형을 선택하세요</option>
+        ${errorTypes.map(et => `<option value="${et.id}">${et.name}</option>`).join('')}
+      </select>
+    </div>
+    
+    <div class="time-input-section work-entry-full">
+      <div class="form-field-label">
+        <span class="form-field-icon">⏰</span>
+        작업 시간 (시간)
+      </div>
+      <input type="number" class="form-select time-input" 
+             placeholder="작업 시간을 입력하세요" 
+             min="0.25" 
+             max="24" 
+             step="0.25" 
+             value="1.00"
+             required>
+      <div class="quick-time-buttons">
+        <button type="button" class="quick-time-btn" data-hours="0.5">30분</button>
+        <button type="button" class="quick-time-btn" data-hours="1">1시간</button>
+        <button type="button" class="quick-time-btn" data-hours="2">2시간</button>
+        <button type="button" class="quick-time-btn" data-hours="4">4시간</button>
+        <button type="button" class="quick-time-btn" data-hours="8">8시간</button>
       </div>
     </div>
   `;
@@ -326,26 +343,56 @@ function addWorkEntry() {
 // 작업 항목 이벤트 설정
 function setupWorkEntryEvents(entryDiv) {
   const timeInput = entryDiv.querySelector('.time-input');
+  const workStatusSelect = entryDiv.querySelector('.work-status-select');
+  const errorTypeSection = entryDiv.querySelector('.error-type-section');
+  const errorTypeSelect = entryDiv.querySelector('.error-type-select');
+  
+  // 시간 입력 이벤트
   timeInput.addEventListener('input', updateTotalHours);
 
+  // 빠른 시간 버튼 이벤트
   entryDiv.querySelectorAll('.quick-time-btn').forEach(btn => {
-    btn.addEventListener('click', () => {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
       timeInput.value = btn.dataset.hours;
       updateTotalHours();
+      
+      // 버튼 클릭 효과
+      btn.style.transform = 'scale(0.95)';
+      setTimeout(() => {
+        btn.style.transform = '';
+      }, 150);
     });
   });
 
-  const workStatusSelect = entryDiv.querySelector('.work-status-select');
-  const errorTypeSection = entryDiv.querySelector('.error-type-section');
-  
+  // 업무 상태 변경 시 에러 유형 섹션 토글
   workStatusSelect.addEventListener('change', (e) => {
-    if (e.target.value === '2') {
+    const isError = e.target.value === '2'; // 에러 상태 ID가 2라고 가정
+    
+    if (isError) {
       errorTypeSection.classList.add('visible');
-      errorTypeSection.querySelector('.error-type-select').required = true;
+      errorTypeSelect.required = true;
+      
+      // 에러 상태일 때 시각적 피드백
+      errorTypeSection.style.animation = 'slideDown 0.4s ease-out';
     } else {
       errorTypeSection.classList.remove('visible');
-      errorTypeSection.querySelector('.error-type-select').required = false;
-      errorTypeSection.querySelector('.error-type-select').value = '';
+      errorTypeSelect.required = false;
+      errorTypeSelect.value = '';
+    }
+  });
+  
+  // 폼 필드 포커스 효과
+  entryDiv.querySelectorAll('.form-field-group').forEach(group => {
+    const input = group.querySelector('select, input');
+    if (input) {
+      input.addEventListener('focus', () => {
+        group.classList.add('focused');
+      });
+      
+      input.addEventListener('blur', () => {
+        group.classList.remove('focused');
+      });
     }
   });
 }