@charset "utf-8";

/* 예약내역 조회 (/reservation/find.php) */
.reserv-find-section .inner {max-width: 748px !important;}
.reserv-find-section .section-tit-wrap {margin-bottom: var(--space-40); display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: 8px;}
.reserv-find-section .reserv-find-wrap {width: 100%;}
.reserv-find-wrap .reserv-find-form .square-btn {margin-top: var(--space-24); column-gap: 8px;}

.reserv-find-wrap .reserv-login-card {margin-top: var(--space-24); padding: var(--space-40); border-radius: var(--radius); background-color: var(--color-static4); display: flex; align-items: center; column-gap: var(--space-24);}
.reserv-login-card .user-ico {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: var(--color-static4); flex-shrink: 0;}
.reserv-login-card .txt-group {flex: 1; min-width: 0; display: flex; flex-direction: column; row-gap: 4px;}
.reserv-login-card .round-btn {flex-shrink: 0; column-gap: 4px; padding-inline: var(--fs-18);}

/* 예약 상세 (/reservation/view.php) */
.reserv-detail-section .inner {max-width: 1006px !important;}
.reserv-detail-section .section-tit-wrap {margin-bottom: var(--space-40); text-align: center;}
.reserv-detail-section .reserv-detail-wrap {width: 100%; display: flex; flex-direction: column; row-gap: var(--space-30);}

.reserv-detail-wrap .reserv-status-card {display: flex; align-items: flex-start; column-gap: var(--fs-16); padding: var(--space-30); border-radius: var(--fs-12); background-color: var(--color-gray2);}
.reserv-status-card .txt-group {display: flex; flex-direction: column; row-gap: 2px;}
.reserv-status-card .txt-group .card-sub {color: var(--color-gray6);}
.reserv-status-card .txt-group .body-medium {color: var(--color-gray8);}
.reserv-status-card .txt-group ul {margin-top: var(--fs-14); color: var(--color-gray6);}

.reserv-detail-wrap .reserv-status-card.confirm {background-color: var(--color-static4);}
.reserv-status-card.confirm .txt-group .card-sub {color: var(--color-static1);}
.reserv-detail-wrap .reserv-status-card.cancel {background-color: var(--color-redbg);}
.reserv-status-card.cancel .txt-group .card-sub {color: var(--color-red);}

.reserv-detail-wrap .reserv-card-item {display: flex; flex-direction: column; row-gap: var(--fs-12);}
.reserv-card-item .card-item-tit {display: flex; align-items: center; column-gap: 8px; color: var(--color-black);}
.reserv-card-item .card-box {padding: var(--space-24) var(--space-30); border: 1px solid var(--color-gray3); border-radius: var(--radius); background-color: var(--color-white);}

.reserv-card-item .shop-info-box {display: flex; align-items: flex-start; column-gap: var(--fs-20);}
.shop-info-box .shop-thumb {width: 90px; height: 90px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0;}
.shop-info-box .shop-thumb img {width: 100%; height: 100%; object-fit: cover;}
.shop-info-box .shop-txt {flex: 1; min-width: 0; display: flex; flex-direction: column; row-gap: 4px;}
.shop-info-box .shop-txt address {font-style: normal;}
.shop-info-box .shop-txt .shop-link {margin-top: 4px; display: inline-flex; align-items: center; column-gap: 4px;}
.shop-info-box .shop-txt .shop-link:hover {color: var(--color-gray9);}

.reserv-card-item .reserv-data-list {display: flex; flex-direction: column; row-gap: var(--fs-14);}
.reserv-data-list .data-row {display: flex; align-items: center;}
.reserv-data-list .data-row dt {width: 120px; flex-shrink: 0;}
.reserv-data-list .data-row dd {flex: 1; color: var(--color-gray9);}

.reserv-detail-wrap .reserv-notice-box {padding: var(--space-24) var(--space-30); border-radius: var(--radius); background-color: var(--color-gray2); display: flex; flex-direction: column; row-gap: var(--fs-12);}

.reserv-detail-wrap .reserv-btn-wrap {display: flex; column-gap: var(--fs-12); margin-top: var(--fs-10);}
.reserv-btn-wrap .square-btn {flex: 1;}

.reserv-detail-wrap .reserv-link-wrap {display: flex; justify-content: center; margin-top: 4px;}
.reserv-link-wrap .txt-btn {column-gap: 4px;}

/* 예약내역 목록 (/reservation/list.php) */
.reserv-list-section .inner {max-width: 1006px !important; row-gap: var(--fs-32) !important;}
.reserv-list-section .section-tit-wrap {margin-bottom: 0;}
.reserv-list-section .reserv-list-wrap {width: 100%; display: flex; flex-direction: column;}
.reserv-list-wrap .pill-tab-list {margin-bottom: var(--space-24);}
.reserv-list-wrap .reserv-card-list {display: flex; flex-direction: column; row-gap: 10px; margin-bottom: var(--space-48);}
.reserv-card-list .reserv-card-item {position: relative; display: flex; align-items: flex-start; column-gap: var(--fs-20); padding: var(--fs-20); border: 1px solid var(--color-gray3); border-radius: var(--radius); background-color: var(--color-white); transition: border-color 0.2s;}
.reserv-card-list .reserv-card-item:hover {border-color: var(--color-gray4);}
.reserv-card-item .thumb-wrap {width: 140px; height: 140px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0;}
.reserv-card-item .thumb-wrap img {width: 100%; height: 100%; object-fit: cover;}
.reserv-card-item .txt-wrap {flex: 1; min-width: 0; display: flex; flex-direction: column; row-gap: 2px;}
.reserv-card-item .txt-wrap .name-row {display: flex; align-items: center; column-gap: var(--fs-12); margin-bottom: 6px;}
.reserv-card-item .txt-wrap .name-row .body-large {font-weight: 600;}
.reserv-card-item .txt-wrap > .body-small {color: var(--color-gray6);}
.reserv-card-item .txt-wrap .price-txt {margin-top: 6px; color: var(--color-gray8); font-weight: 600;}
.reserv-card-item .side-action-wrap {align-self: flex-end; flex-shrink: 0;}
.reserv-card-item .side-action-wrap .divider {font-size: var(--fs-12); color: var(--color-gray4);}
.reserv-list-wrap .pagination .pagination-ellipsis {display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;}

/* 예약내역 없을 때 (빈 상태) */
.reserv-list-wrap .reserv-empty-wrap {display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; padding: var(--space-60) var(--space-20); border-radius: var(--radius); background-color: var(--color-gray1); text-align: center;}
.reserv-empty-wrap .empty-ico {display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background-color: var(--color-gray4); margin-bottom: var(--fs-16);}
.reserv-empty-wrap .empty-tit {color: var(--color-gray9); margin-bottom: 6px;}
.reserv-empty-wrap .empty-desc {color: var(--color-gray8); margin-bottom: var(--fs-32);}

/* 반응형 */
@media screen and (max-width: 768px) {
    .reserv-find-wrap .reserv-login-card {flex-direction: column; align-items: flex-start; row-gap: var(--fs-16);}
    .reserv-login-card .round-btn {width: 100%;}
    .reserv-card-item .shop-info-box {flex-direction: column; row-gap: var(--fs-16);}
    .reserv-data-list .data-row {flex-direction: column; align-items: flex-start; row-gap: 4px;}
    .reserv-data-list .data-row dt {width: auto;}
    .reserv-detail-wrap .reserv-btn-wrap {flex-direction: column; row-gap: var(--fs-10);}
    
    .reserv-card-list .reserv-card-item {flex-direction: column; row-gap: var(--fs-16); padding: var(--fs-20);}
    .reserv-card-item .thumb-wrap {width: 100%; height: 160px;}
    .reserv-card-item .side-action-wrap {align-self: stretch; justify-content: flex-end; padding-top: var(--fs-12); border-top: 1px solid var(--color-gray2); width: 100%;}
}