diff --git a/web-ui/css/daily-work-report.css b/web-ui/css/daily-work-report.css
index 3ba8f76..c085e6b 100644
--- a/web-ui/css/daily-work-report.css
+++ b/web-ui/css/daily-work-report.css
@@ -247,6 +247,7 @@
   transition: all 0.3s ease;
   text-align: center;
   font-weight: var(--font-semibold);
+  font-size: var(--text-lg);
   min-height: 100px;
   display: flex;
   align-items: center;
@@ -293,40 +294,67 @@
 
 /* 작업 항목 */
 .work-entry {
-  background: var(--bg-tertiary);
+  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
   border: 2px solid var(--border-light);
-  border-radius: var(--radius-xl);
-  padding: var(--space-6);
+  border-radius: var(--radius-2xl);
+  padding: var(--space-8);
   margin-bottom: var(--space-6);
   position: relative;
   transition: var(--transition-normal);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.work-entry::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .work-entry:hover {
-  border-color: var(--primary-200);
-  box-shadow: var(--shadow-md);
+  border-color: var(--primary-300);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+.work-entry:hover::before {
+  opacity: 1;
 }
 
 .work-entry-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--space-4);
-  padding-bottom: var(--space-3);
-  border-bottom: 1px solid var(--border-light);
+  margin-bottom: var(--space-6);
+  padding-bottom: var(--space-4);
+  border-bottom: 2px solid var(--border-light);
 }
 
 .work-entry-title {
-  font-size: var(--text-lg);
+  font-size: var(--text-xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.work-entry-title::before {
+  content: '🔧';
+  font-size: var(--text-lg);
 }
 
 .remove-work-btn {
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   border-radius: var(--radius-full);
-  background: var(--error-500);
+  background: linear-gradient(135deg, var(--error-500), var(--error-600));
   color: white;
   border: none;
   cursor: pointer;
@@ -335,28 +363,113 @@
   justify-content: center;
   transition: var(--transition-normal);
   font-size: var(--text-lg);
+  box-shadow: var(--shadow-sm);
 }
 
 .remove-work-btn:hover {
-  background: var(--error-600);
-  transform: scale(1.1);
+  background: linear-gradient(135deg, var(--error-600), var(--error-700));
+  transform: scale(1.1) rotate(90deg);
+  box-shadow: var(--shadow-md);
 }
 
 .work-entry-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space-4);
+  gap: var(--space-6);
 }
 
 .work-entry-full {
   grid-column: span 2;
 }
 
+/* 폼 필드 그룹 */
+.form-field-group {
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  border: 1px solid var(--border-light);
+  transition: var(--transition-normal);
+}
+
+.form-field-group:hover {
+  border-color: var(--primary-200);
+  box-shadow: var(--shadow-sm);
+}
+
+.form-field-group.focused {
+  border-color: var(--primary-500);
+  box-shadow: 0 0 0 3px var(--primary-100);
+}
+
+.form-field-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  font-size: var(--text-base);
+}
+
+.form-field-icon {
+  font-size: var(--text-lg);
+}
+
+.form-select {
+  width: 100%;
+  padding: var(--space-4);
+  border: 2px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-base);
+  background: var(--bg-primary);
+  transition: var(--transition-normal);
+  cursor: pointer;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--primary-500);
+  box-shadow: 0 0 0 3px var(--primary-100);
+}
+
+.form-select:hover {
+  border-color: var(--primary-300);
+}
+
+/* 에러 유형 섹션 */
+.error-type-section {
+  background: linear-gradient(135deg, var(--error-50) 0%, var(--warning-50) 100%);
+  border: 2px solid var(--error-200);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  margin-top: var(--space-4);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(-10px);
+}
+
+.error-type-section.visible {
+  opacity: 1;
+  max-height: 200px;
+  transform: translateY(0);
+}
+
+.error-type-section .form-field-label {
+  color: var(--error-700);
+}
+
+.error-type-section .form-field-icon {
+  color: var(--error-500);
+}
+
 /* 시간 입력 */
 .time-input-section {
-  background: var(--primary-50);
-  border-radius: var(--radius-lg);
-  padding: var(--space-4);
+  background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%);
+  border: 2px solid var(--primary-200);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
   margin-top: var(--space-4);
 }
 
@@ -369,27 +482,47 @@
 }
 
 .quick-time-btn {
-  padding: var(--space-2) var(--space-4);
-  background: var(--bg-primary);
-  border: 2px solid var(--primary-200);
-  border-radius: var(--radius-lg);
+  padding: var(--space-3) var(--space-4);
+  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
+  border: 2px solid var(--primary-300);
+  border-radius: var(--radius-xl);
   cursor: pointer;
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
-  transition: var(--transition-normal);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   color: var(--primary-700);
+  min-width: 60px;
+  text-align: center;
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+.quick-time-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  transition: left 0.5s ease;
 }
 
 .quick-time-btn:hover {
+  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
+  color: white;
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: var(--shadow-lg);
   border-color: var(--primary-400);
-  background: var(--primary-100);
-  transform: translateY(-1px);
+}
+
+.quick-time-btn:hover::before {
+  left: 100%;
 }
 
 .quick-time-btn:active {
-  background: var(--primary-500);
-  color: white;
-  transform: translateY(0);
+  transform: translateY(0) scale(0.98);
 }
 
 /* 총 작업시간 표시 */
@@ -540,7 +673,7 @@
   .worker-card {
     min-height: 80px;
     padding: var(--space-3);
-    font-size: var(--text-sm);
+    font-size: var(--text-base);
   }
   
   .work-entry-grid {
@@ -570,6 +703,20 @@
   }
 }
 
+/* 슬라이드 다운 애니메이션 */
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    max-height: 200px;
+    transform: translateY(0);
+  }
+}
+
 @media (max-width: 480px) {
   .work-report-header h1 {
     font-size: var(--text-2xl);
diff --git a/web-ui/js/daily-work-report.js b/web-ui/js/daily-work-report.js
index adf60eb..1285673 100644
--- a/web-ui/js/daily-work-report.js
+++ b/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');
+      });
     }
   });
 }