회의예약 화면 레이아웃 개선

- 날짜/시간 입력 필드 레이아웃 수정
- 반응형 디자인 개선
- UI 일관성 향상

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

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

design/uiux/prototype/03-회의예약.html

@@ -65,6 +65,88 @@
       }
     }
 
+    /* 시간 입력 필드 래퍼 - 시계 아이콘 추가 */
+    .time-input-wrapper {
+      position: relative;
+    }
+
+    .time-input-wrapper input[type="text"] {
+      padding-right: 36px;
+    }
+
+    /* 시계 아이콘 */
+    .time-input-wrapper::after {
+      content: '🕐';
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      font-size: 18px;
+    }
+
+    /* 커스텀 시간 선택 팝업 */
+    .time-picker-popup {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      background: var(--white);
+      border: 1px solid var(--gray-300);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-lg);
+      z-index: 1000;
+      display: none;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .time-picker-popup.active {
+      display: block;
+    }
+
+    .time-picker-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1px;
+      background: var(--gray-300);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+    }
+
+    .time-picker-column {
+      background: var(--white);
+      padding: var(--space-sm);
+    }
+
+    .time-picker-label {
+      font-size: var(--font-small);
+      font-weight: var(--font-weight-medium);
+      color: var(--gray-700);
+      padding: var(--space-xs) var(--space-sm);
+      text-align: center;
+      border-bottom: 1px solid var(--gray-200);
+      margin-bottom: var(--space-xs);
+    }
+
+    .time-option {
+      padding: var(--space-sm);
+      text-align: center;
+      cursor: pointer;
+      border-radius: var(--radius-sm);
+      transition: all var(--transition-fast);
+    }
+
+    .time-option:hover {
+      background: var(--primary-light);
+    }
+
+    .time-option.selected {
+      background: var(--primary);
+      color: var(--white);
+      font-weight: var(--font-weight-medium);
+    }
+
     /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
     .date-input-wrapper {
       position: relative;
@@ -263,23 +345,51 @@
                 required
               >
             </div>
-            <div>
+            <div class="time-input-wrapper">
               <input
-                type="time"
+                type="text"
                 id="meeting-start-time"
                 name="startTime"
                 class="form-control"
+                placeholder="시작 시간"
+                readonly
                 required
               >
+              <div class="time-picker-popup" id="start-time-picker">
+                <div class="time-picker-grid">
+                  <div class="time-picker-column">
+                    <div class="time-picker-label">시</div>
+                    <div id="start-hour-options"></div>
                   </div>
-            <div>
+                  <div class="time-picker-column">
+                    <div class="time-picker-label">분</div>
+                    <div id="start-minute-options"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="time-input-wrapper">
               <input
-                type="time"
+                type="text"
                 id="meeting-end-time"
                 name="endTime"
                 class="form-control"
+                placeholder="종료 시간"
+                readonly
                 required
               >
+              <div class="time-picker-popup" id="end-time-picker">
+                <div class="time-picker-grid">
+                  <div class="time-picker-column">
+                    <div class="time-picker-label">시</div>
+                    <div id="end-hour-options"></div>
+                  </div>
+                  <div class="time-picker-column">
+                    <div class="time-picker-label">분</div>
+                    <div id="end-minute-options"></div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -457,6 +567,116 @@
       endTimeInput.value = '15:30';
     }
 
+    /**
+     * 시간 선택 팝업 초기화
+     */
+    function initTimePickers() {
+      const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+      const minutes = ['00', '15', '30', '45'];
+
+      // 시작 시간 선택기
+      const startHourOptions = $('#start-hour-options');
+      const startMinuteOptions = $('#start-minute-options');
+      const startTimePicker = $('#start-time-picker');
+
+      startHourOptions.innerHTML = hours.map(h =>
+        `<div class="time-option" data-value="${h}">${h}</div>`
+      ).join('');
+
+      startMinuteOptions.innerHTML = minutes.map(m =>
+        `<div class="time-option" data-value="${m}">${m}</div>`
+      ).join('');
+
+      // 종료 시간 선택기
+      const endHourOptions = $('#end-hour-options');
+      const endMinuteOptions = $('#end-minute-options');
+      const endTimePicker = $('#end-time-picker');
+
+      endHourOptions.innerHTML = hours.map(h =>
+        `<div class="time-option" data-value="${h}">${h}</div>`
+      ).join('');
+
+      endMinuteOptions.innerHTML = minutes.map(m =>
+        `<div class="time-option" data-value="${m}">${m}</div>`
+      ).join('');
+
+      // 시간 선택 상태
+      let startHour = '14';
+      let startMinute = '00';
+      let endHour = '15';
+      let endMinute = '30';
+
+      // 시작 시간 선택
+      startTimeInput.addEventListener('click', (e) => {
+        e.stopPropagation();
+        startTimePicker.classList.toggle('active');
+        endTimePicker.classList.remove('active');
+      });
+
+      $$('#start-hour-options .time-option').forEach(option => {
+        option.addEventListener('click', () => {
+          $$('#start-hour-options .time-option').forEach(o => o.classList.remove('selected'));
+          option.classList.add('selected');
+          startHour = option.dataset.value;
+          startTimeInput.value = `${startHour}:${startMinute}`;
+        });
+        if (option.dataset.value === startHour) {
+          option.classList.add('selected');
+        }
+      });
+
+      $$('#start-minute-options .time-option').forEach(option => {
+        option.addEventListener('click', () => {
+          $$('#start-minute-options .time-option').forEach(o => o.classList.remove('selected'));
+          option.classList.add('selected');
+          startMinute = option.dataset.value;
+          startTimeInput.value = `${startHour}:${startMinute}`;
+        });
+        if (option.dataset.value === startMinute) {
+          option.classList.add('selected');
+        }
+      });
+
+      // 종료 시간 선택
+      endTimeInput.addEventListener('click', (e) => {
+        e.stopPropagation();
+        endTimePicker.classList.toggle('active');
+        startTimePicker.classList.remove('active');
+      });
+
+      $$('#end-hour-options .time-option').forEach(option => {
+        option.addEventListener('click', () => {
+          $$('#end-hour-options .time-option').forEach(o => o.classList.remove('selected'));
+          option.classList.add('selected');
+          endHour = option.dataset.value;
+          endTimeInput.value = `${endHour}:${endMinute}`;
+        });
+        if (option.dataset.value === endHour) {
+          option.classList.add('selected');
+        }
+      });
+
+      $$('#end-minute-options .time-option').forEach(option => {
+        option.addEventListener('click', () => {
+          $$('#end-minute-options .time-option').forEach(o => o.classList.remove('selected'));
+          option.classList.add('selected');
+          endMinute = option.dataset.value;
+          endTimeInput.value = `${endHour}:${endMinute}`;
+        });
+        if (option.dataset.value === endMinute) {
+          option.classList.add('selected');
+        }
+      });
+
+      // 외부 클릭 시 팝업 닫기
+      document.addEventListener('click', (e) => {
+        if (!e.target.closest('.time-input-wrapper')) {
+          startTimePicker.classList.remove('active');
+          endTimePicker.classList.remove('active');
+        }
+      });
+    }
+
     /**
      * 문자 카운터 업데이트
      */
@@ -701,6 +921,7 @@
      */
     function init() {
       setDefaultDate();
+      initTimePickers();
       renderParticipantChips();
       initEventListeners();