优化预订事项房型与房表展示

client/src/components/reservation/ReservationV4RoomInformationCard.vue

@@ -7,7 +7,7 @@
       {{ t('taskV4.roomInformation.noDisplayModel') }}
     </div>
     <template v-else>
-      <div class="room-information__header">
+      <div class="room-information__summary">
         <div class="room-information__chips">
           <span>{{ eventTypeLabel }}</span>
           <span>{{ bookingTypeLabel }}</span>
@@ -664,11 +664,15 @@ const roomInformationLabelKeys: Record<string, string> = {
   gap: 16px;
 }
 
-.room-information__header {
+.room-information__summary {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 14px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: linear-gradient(180deg, var(--th-color-white), var(--th-color-slate-50));
+  padding: 10px 12px;
 }
 
 .room-information__chips {
@@ -688,19 +692,32 @@ const roomInformationLabelKeys: Record<string, string> = {
 
 .room-information__status-slot {
   display: flex;
+  flex: 0 1 360px;
   justify-content: flex-end;
-  min-width: min(260px, 100%);
+  min-width: 0;
 }
 
 .room-information__status-badge,
 .room-information__status-field {
-  display: grid;
-  gap: 6px;
-  min-width: 180px;
+  width: min(320px, 100%);
+  min-width: 0;
   border: 1px solid var(--th-color-slate-200);
   border-radius: var(--th-radius-sm);
-  background: var(--th-color-slate-50);
-  padding: 10px 12px;
+  background: var(--th-color-white);
+  padding: 8px 10px;
+}
+
+.room-information__status-badge {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.room-information__status-field {
+  display: grid;
+  gap: 6px;
 }
 
 .room-information__status-badge span,
@@ -718,12 +735,18 @@ const roomInformationLabelKeys: Record<string, string> = {
 
 .room-information__status-badge strong {
   color: var(--th-color-slate-900);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 900;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.room-information__status-badge .room-information__status-error {
+  flex-basis: 100%;
 }
 
 .room-information__status-field select {
-  min-height: 36px;
+  min-height: 34px;
   border: 1px solid var(--th-color-slate-200);
   border-radius: var(--th-radius-sm);
   background: var(--th-color-white);
@@ -866,13 +889,20 @@ const roomInformationLabelKeys: Record<string, string> = {
 }
 
 @media (max-width: 760px) {
-  .room-information__header {
+  .room-information__summary {
     align-items: stretch;
     flex-direction: column;
   }
 
   .room-information__status-slot {
+    flex: 0 1 auto;
     justify-content: flex-start;
+    width: 100%;
+  }
+
+  .room-information__status-badge,
+  .room-information__status-field {
+    width: 100%;
   }
 
   .room-information__grid,

client/src/components/reservation/ReservationV4RoomingListCard.vue

@@ -16,9 +16,6 @@
         {{ t('task.viewOrder') }}
       </RouterLink>
     </div>
-
-    <p>{{ t('taskV4.roomingList.description') }}</p>
-    <small>{{ t('taskV4.roomingList.confirmHint') }}</small>
   </section>
 </template>
 
@@ -89,19 +86,6 @@ function readableValue(value?: string | null): string {
   overflow-wrap: anywhere;
 }
 
-.rooming-list-card p,
-.rooming-list-card small {
-  margin: 0;
-  color: var(--th-color-slate-600);
-  font-size: 13px;
-  line-height: 1.55;
-}
-
-.rooming-list-card small {
-  color: var(--th-color-slate-500);
-  font-weight: 700;
-}
-
 .rooming-list-card__link {
   color: var(--th-color-blue-600);
   flex: 0 0 auto;