/* product_view 페이지: 출발일 선택 버튼 */
.product_view_wrap .info .box1 .ts-depart-full .btn {
  display: block;
  width: 100%;
  padding: 1.5rem 1rem;
  outline: none;
  border: none;
  font-size: 1.8rem;
  color: #fff;
  background: #4a90e2;
  border-radius: 1rem;
  cursor: pointer;
}

/* ================
   1) 모달 백드롭 + 박스
   ================ */

/* 모달 전체를 감싸는 검은 배경 */
.ts-depart-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* 흰색 모달 박스 */
.ts-depart-modal{
    background:#fff;
    width:95%;
    max-width:820px;   /* 오른쪽 리스트까지 고려해서 살짝 넓혀도 좋습니다 */
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* 모달 헤더 */
.ts-depart-modal .modal-header{
    padding:12px 16px;
    border-bottom:1px solid #eee;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ts-depart-modal .modal-header h4{
    margin:0;
    font-size:15px;
    font-weight:600;
}

.ts-depart-modal .modal-header #btnCloseDepartModal{
    border:none;
    background:transparent;
    font-size:18px;
    cursor:pointer;
}

/* 모달 바디 기본 패딩 */
.ts-depart-modal .modal-body{
    padding:12px 16px;
}

/* 안내 텍스트 */
.ts-depart-modal p{
    margin:0 0 8px 0;
    font-size:13px;
}

#ts_depart_modal .ts-modal-content {
    max-height: 80vh;    /* 화면 높이의 80%를 넘지 않게 */
    min-height: 360px;   /* 너무 작게 줄어들지 않게 최소 높이만 확보 */
    display: flex;
    flex-direction: column;
}

/* ================
   2) 왼쪽: 달력
   ================ */

/* 캘린더 + 사이드바 전체 랩 */
.ts-depart-body{
    display:flex;
    gap:16px;
    align-items:flex-start;
}

/* 왼쪽 달력 영역 */
.ts-calendar-wrap{
    flex:1 1 55%;
    min-width:0;
}

/* 캘린더 헤더 (월 이동 버튼 + 타이틀) */
.ts-calendar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}

.ts-cal-title{
    font-size:14px;
    font-weight:600;
}

.ts-cal-prev,
.ts-cal-next{
    border:1px solid #ddd;
    background:#fff;
    width:28px;
    height:28px;
    border-radius:4px;
    cursor:pointer;
    font-size:14px;
    line-height:1;
}

/* 달력 테이블 */
.ts-calendar-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    text-align:center;
}

.ts-calendar-table thead th{
    padding:4px 0;
    border-bottom:1px solid #eee;
    font-weight:500;
}

.ts-calendar-table td{
    height:32px;
    padding:2px 0;
}

/* 빈 칸 */
.ts-calendar-table td.ts-empty{
    background:#fafafa;
}

/* 기본 날짜 셀 */
.ts-day{
    cursor:default;
}

.ts-day .ts-day-num{
    width:24px;
    height:24px;
    line-height:24px;
    margin:0 auto;
    border-radius:50%;
}

/* 예약 가능(open) 날짜 */
.ts-day.ts-open{
    cursor:pointer;
}

.ts-day.ts-open .ts-day-num{
    background:#e6f0ff;
    color:#0050b3;
    font-weight:600;
}

/* 선택된 날짜 강조 */
.ts-day.ts-selected .ts-day-num{
    background:#2f54eb;
    color:#fff;
}

/* ================
   3) 오른쪽: 출발일 리스트 패널
   ================ */

.ts-depart-sidebar{
    flex:1 1 45%;
    display:flex;
    flex-direction:column;
    min-width:0;
}

.ts-depart-sidebar-header{
    margin-bottom:8px;
}

.ts-depart-sidebar-title{
    font-weight:600;
    font-size:14px;
}

.ts-depart-sidebar-desc{
    font-size:12px;
    color:#666;
}

/* 리스트 스크롤 영역 (5개 정도 보이도록) */
.ts-depart-list{
    max-height:260px;   /* 필요 시 조절 */
    overflow-y:auto;
    padding-right:4px;
    font-size:12px;
}

/* 리스트에 데이터 없을 때 메시지 */
.ts-depart-list .ts-empty-text{
    font-size:12px;
    color:#777;
    margin:8px 0;
}

/* 개별 항목 */
.ts-depart-item{
    padding:8px 0;
    border-bottom:1px solid rgba(0,0,0,0.06);
}

.ts-depart-item:last-child{
    border-bottom:none;
}

/* 선택 필터된 상태에서 강조 */
.ts-depart-item.ts-selected{
    background:#f5f7ff;
}

/* 1줄: 출발일 + 항공 여부/항공편 */
.ts-depart-row1{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    margin-bottom:2px;
}

.ts-depart-date{
    font-weight:600;
}

.ts-depart-air{
    font-size:11px;
    color:#555;
}

/* 2줄: 상품명 + 요금 */
.ts-depart-row2{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:12px;
    margin-bottom:2px;
}

.ts-depart-title{
    flex:1;
    font-weight:500;
}

.ts-depart-price{
    white-space:nowrap;
    font-weight:600;
}

/* 3줄: 여정 + 상태 */
.ts-depart-row3{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    color:#666;
}

.ts-depart-route{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ts-depart-status{
    white-space:nowrap;
}

/* 4줄: 테마 */
.ts-depart-row4{
    font-size:11px;
    color:#888;
}

/* ================
   4) 하단 버튼 영역
   ================ */

#btnDepartApply.btn{
    padding:6px 16px;
    font-size:13px;
}

/* ================
   5) 반응형 (모바일 등)
   ================ */

@media (max-width:768px){
    .ts-depart-modal{
        max-width:100%;
        width:96%;
    }
    .ts-depart-body{
        flex-direction:column;
    }
    .ts-calendar-wrap,
    .ts-depart-sidebar{
        flex:1 1 auto;
    }
}

/* 태블릿 */
@media (max-width:991.98px) {
    .product_view_wrap .info .box1 .ts-depart-full .btn {
        padding: 1.2rem 1rem;
        font-size: 1.6rem;
    }
}

/* 모바일 */
@media (max-width:767.98px) {
    .product_view_wrap .info .box1 .ts-depart-full .btn {
        padding: 1.2rem 1rem;
        font-size: 1.6rem;
    }
}

/* 모달 반응형 */
@media (max-width:768px){
    .ts-depart-modal{
        max-width:100%;
        width:96%;
    }
    .ts-depart-body{
        flex-direction:column;
    }
    .ts-calendar-wrap,
    .ts-depart-sidebar{
        flex:1 1 auto;
    }
}

/* 달력 영역 – 남는 공간을 적당히 채우도록 */
#ts_depart_modal .ts-calendar-wrapper {
    flex: 1;
    min-height: 520px;   /* 4주짜리 달이라도 일정 높이 유지 */
    overflow-y: auto;    /* 주가 아주 많을 때만 내부 스크롤 */
}