.booking-wrap { width: 100%; margin: 0 auto; padding: 0; border-radius: 15px; background: rgba(0, 0, 0, 0.00); box-sizing: border-box; }
.booking-title { margin: 32px 0 16px 0; text-align: center; }
.booking-title h2 { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 10px; }
.booking-title > h3 { font-size: 20px; font-weight: 400; color: #000; margin-bottom: 24px; }
.booking-head { display: none; justify-content: space-between; width: 100%; margin: 0 auto; padding: 8px 10px; border-radius: 10px; background: #002b77; font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 5px; box-sizing: border-box; }
.booking-head span { width: 25%; text-align: center; }
.booking-body { height: auto; overflow: hidden; }
.booking-list { display: flex; flex-direction: column; }
.booking-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; font-size: 17px; font-weight: 400; border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; }
.booking-item:last-child { border-bottom: none; }
.booking-item span { width: 25%; text-align: center; }
.booking-item span:first-child { width: auto; min-width: 70px; max-width: 160px; margin: 0 auto; padding: 4px 11px; background: #ebd8b8; font-size: 14px; font-weight: 600; color: #000; white-space: nowrap; }
.booking-item span:last-child { width: auto; min-width: 70px; max-width: 120px; margin: 0 auto; padding: 4px 6px; border-radius: 16px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.booking-item span:first-child::before { display: none; }



@media (max-width:768px) {
  .booking-wrap { width: 100%; padding: 3px 7px; }
  .booking-title h2 { font-size: 24px; }
  .booking-title h3 { font-size: 16px; }
  .booking-head { padding: 10px; font-size: 16px; }
  .booking-item { 
    padding: 10px 4px; 
    font-size: 14px; 
    flex-wrap: nowrap; /* 1. 한 줄로 표시되도록 수정 */
    justify-content: space-between; /* 2. 아이템 정렬 방식 수정 */
    gap: 4px; /* 3. 아이템 간 간격 */
  }
  .booking-item span { 
    width: auto; 
    flex-grow: 0; /* 4. 기본적으로 늘어나지 않음 */
    flex-shrink: 1; /* 5. 공간이 부족하면 줄어듦 */
    flex-basis: auto; /* 6. 기본 크기 auto */
    margin-bottom: 0; 
    white-space: nowrap; /* 7. 텍스트 줄바꿈 방지 */
    overflow: hidden; /* 8. 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 9. 말줄임표(...) 처리 */
    text-align: center;
  }
  .booking-item span:first-child { 
    flex-grow: 0; 
    flex-shrink: 1; /* 10. 수정: 줄어들 수 있도록 1로 변경 */
    font-size: 12px; 
    padding: 4px 5px; /* 10. 수정: 좌우 패딩 감소 */
    margin: 0 5px 0 0; 
    min-width: 0; /* 13. 수정: 최소 너비 제한 제거 */
  }
  .booking-item span:last-child { 
    flex-grow: 0; 
    flex-shrink: 1; /* 11. 수정: 줄어들 수 있도록 1로 변경 */
    font-size: 12px; 
    padding: 4px 5px; /* 11. 수정: 좌우 패딩 감소 */
      min-width: 0;
    text-align: center; 
  }
  /* 12. 중간 아이템들(고객명, 지역)이 남은 공간을 채우도록 수정 */
  .booking-item span:not(:first-child):not(:last-child) {
      flex-grow: 1; /* 남은 공간을 나눠가짐 */
      flex-basis: 0; /* 비율 계산을 위해 0으로 설정 */
  }
}