feat: Implement reservation functionality with new UI, backend services, and data access layers.

src/main/resources/static/css/web/service/makeReservation.css

@@ -129,11 +129,75 @@ body {
     margin-right: 8px;
 }
 
-/* Calendar section */
+/* Calendar section (CRM Style) */
 .calendar-box {
     margin-bottom: 20px;
 }
 
+/* Flatpickr inline calendar를 calendar-box에 맞춤 */
+.calendar-box .flatpickr-calendar {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-shadow: none;
+    border: 1px solid #eee;
+    border-radius: 12px;
+}
+
+.calendar-box .flatpickr-months {
+    padding: 8px 0;
+}
+
+.calendar-box .dayContainer {
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+}
+
+.calendar-box .flatpickr-days {
+    width: 100% !important;
+}
+
+.calendar-box .flatpickr-day {
+    max-width: none;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 8px;
+}
+
+.calendar-box .flatpickr-day.selected {
+    background: #b23c3c;
+    border-color: #b23c3c;
+}
+
+.calendar-box .flatpickr-day.today {
+    border-color: #b23c3c;
+}
+
+/* 공휴일/일요일 스타일 - 빨간색+회색(지나간 날 스타일) */
+.calendar-box .flatpickr-day.flatpickr-holiday {
+    color: #e8a0a0 !important;
+    background: #f5f5f5 !important;
+    position: relative;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.calendar-box .flatpickr-day.flatpickr-holiday:hover {
+    background: #f5f5f5 !important;
+    color: #e8a0a0 !important;
+    cursor: not-allowed;
+}
+
+.calendar-box .flatpickr-day.flatpickr-holiday.selected {
+    background: #f5f5f5 !important;
+    color: #e8a0a0 !important;
+}
+
+/* 일요일 컬럼 (첫 번째 열) */
+.calendar-box .flatpickr-day:nth-child(7n+1) {
+    color: #D13E3E;
+}
+
 .calendar-header {
     display: flex;
     justify-content: center;
@@ -299,9 +363,17 @@ body {
 }
 
 @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.02); }
-    100% { transform: scale(1); }
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.02);
+    }
+
+    100% {
+        transform: scale(1);
+    }
 }
 
 /* Phone message styles (common.js PhoneValidator용) */
@@ -392,7 +464,7 @@ body {
         gap: 16px;
         padding: 20px 15px;
     }
-    
+
     .box {
         padding: 20px 14px;
     }
@@ -406,7 +478,7 @@ body {
         height: auto;
         padding: 20px 15px;
     }
-    
+
     .box {
         min-height: unset;
         min-width: unset;
@@ -419,17 +491,17 @@ body {
         padding: 15px;
         gap: 20px;
     }
-    
+
     .box {
         padding: 16px 12px;
     }
-    
+
     .calendar-table th,
     .calendar-table td {
         width: 1.8em;
         height: 1.8em;
     }
-    
+
     .time-btn {
         min-width: 70px;
         font-size: 0.95em;
@@ -442,29 +514,29 @@ body {
         padding: 10px;
         gap: 16px;
     }
-    
+
     .box {
         padding: 16px 8px;
     }
-    
+
     .calendar-table th,
     .calendar-table td {
         width: 1.5em;
         height: 1.5em;
         font-size: 0.9em;
     }
-    
+
     .time-btn {
         min-width: 60px;
         font-size: 0.9em;
         padding: 6px 0;
     }
-    
+
     .step-title {
         font-size: 1em;
     }
-    
+
     .service-item {
         font-size: 1em;
     }
-}
+}