@charset "utf-8";
/*
 * 2026-09-10
 * 예약페이지의 예약 날짜/시간 선택 컴포넌트 전용 CSS
 * 영문 예약 페이지(datepicker.css)를 태국 폼 디자인(#DF9500 / radius 10px / smallframe 640px)에 맞춰 변경
 */

/* ===== 가로 오버플로우 방지 =====
 * fieldset 은 브라우저 기본값이 min-inline-size:min-content 라
 * 내부에 넓은 요소가 들어오면 smallframe(640px)을 무시하고 늘어난다.
 */
.list08 fieldset {
    min-width: 0;
}

.list08 #reservationDayListDiv {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.list08 #reservationDayListDiv *,
.list08 #reservationDayListDiv *:before,
.list08 #reservationDayListDiv *:after {
    box-sizing: border-box;
}

/* ===== 공통 래퍼 ===== */
.list08 .reservation-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.list08 .reservation-box .rb-top {
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    padding: 10px 15px 15px;
    background: #fff;
    overflow: hidden;
}

.list08 .reservation-box .rb-bottom {
    margin-top: 15px;
}

/* ===== 달력 ===== */
.list08 .ui-datepicker a:link,
.list08 .ui-datepicker a:hover {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.list08 div.hasDatepicker {
    display: block;
    padding: 0;
    overflow: visible;
    width: 100%;
}

.list08 .ui-datepicker {
    overflow: visible;
    margin: 0;
    width: 100%;
}

.list08 .ui-datepicker .ui-datepicker-header {
    position: relative;
    height: 50px;
    background: none;
    border: 0;
}

/* 월 이동은 swiper 로 처리하므로 기본 화살표는 숨긴다 */
.list08 .ui-datepicker .ui-datepicker-prev,
.list08 .ui-datepicker .ui-datepicker-next {
    display: none;
}

.list08 .ui-datepicker .ui-datepicker-title {
    padding: 0 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    line-height: 50px;
}

.list08 .ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 15px;
}

.list08 .ui-datepicker-calendar th {
    height: 30px;
    font-weight: normal;
    text-align: center;
    color: #666;
    font-size: 13px;
    border: 0;
    background: none;
}

.list08 .ui-datepicker-calendar td {
    padding: 0;
    height: 42px;
    border: 0;
}

.list08 .ui-datepicker td span,
.list08 .ui-datepicker a {
    display: block;
    text-align: center;
    font-size: 15px;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
    border: 0;
    background: none;
    color: #222;
}

.list08 .ui-datepicker-calendar td a,
.list08 .ui-datepicker-calendar td span {
    width: 38px;
    height: 38px;
    line-height: 38px;
    margin: 2px auto;
    border-radius: 50em;
    box-sizing: border-box;
}

.list08 .ui-datepicker-calendar .ui-datepicker-week-end:first-child a,
.list08 .ui-datepicker-calendar .ui-datepicker-week-end:first-child span {
    /* 일요일 */
    color: #bc3a3f;
}

.list08 .ui-datepicker-calendar .ui-datepicker-week-end:last-child a,
.list08 .ui-datepicker-calendar .ui-datepicker-week-end:last-child span {
    /* 토요일 */
    color: #2a3ca2;
}

.list08 .ui-datepicker .ui-state-hover {
    background-color: #f5f5f5;
}

.list08 .ui-datepicker .ui-state-active {
    background-color: #DF9500;
    color: #fff !important;
    font-weight: 700;
}

.list08 .ui-datepicker .ui-state-disabled {
    opacity: .3;
    cursor: default !important;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ===== 달력 swiper =====
 * swiper.min.css 가 없거나 Swiper 초기화 전이어도 슬라이드가
 * 컨테이너 밖으로 밀려나지 않도록 폭을 직접 고정한다.
 */
.list08 .swiper-datapicker {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: 10px;
    overflow: hidden;
}

.list08 .swiper-datapicker .swiper-wrapper {
    display: flex;
    width: 100%;
    min-width: 0;
}

.list08 .swiper-datapicker .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
}

.list08 .swiper-datapicker .swiper-button-next,
.list08 .swiper-datapicker .swiper-button-prev {
    top: 22px;
    width: 30px;
    height: 30px;
    margin-top: 0;
    background-image: none;
    background-color: #fff;
}

.list08 .swiper-datapicker .swiper-button-next:after,
.list08 .swiper-datapicker .swiper-button-prev:after {
    content: '';
    position: absolute;
    top: 9px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
}

.list08 .swiper-datapicker .swiper-button-next:after {
    transform: rotate(45deg);
}

.list08 .swiper-datapicker .swiper-button-prev:after {
    transform: rotate(-135deg);
}

.list08 .swiper-datapicker .swiper-button-next {
    right: 0;
}

.list08 .swiper-datapicker .swiper-button-prev {
    left: 0;
}

.list08 .swiper-datapicker .swiper-button-disabled {
    opacity: .25;
}

/* ===== 시간 목록 ===== */
.list08 .rs-time-box {
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background: #fff;
    padding: 15px;
}

.list08 .rs-time-box.unable-time {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0;
}

.list08 .rs-time-box .sl-time {
    margin: 0;
    color: #999;
    font-size: 15px;
    text-align: center;
}

.list08 .time-box-scoll {
    max-height: 260px;
    overflow-y: auto;
}

.list08 ul.time-box {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px;
    padding: 0;
    list-style: none;
}

.list08 ul.time-box > li {
    width: 25%;
    padding: 4px;
    box-sizing: border-box;
    list-style: none;
}

.list08 ul.time-box > li.no-time {
    width: 100%;
    text-align: center;
    color: #999;
    font-size: 15px;
    padding: 20px 4px;
}

.list08 ul.time-box .btn_round {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd;
    border-radius: 50em;
    background: #fff;
    color: #222;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.list08 ul.time-box .btn_round.active {
    background-color: #DF9500;
    border-color: #DF9500;
    color: #fff;
    font-weight: 700;
}

/* ===== 반응형 ===== */
@media screen and (max-width: 720px) {
    .list08 .reservation-box .rb-top {
        padding: 5px 10px 10px;
    }

    .list08 .ui-datepicker-calendar td a,
    .list08 .ui-datepicker-calendar td span {
        width: 34px;
        height: 34px;
        line-height: 34px;
    }

    .list08 ul.time-box > li {
        width: 33.333%;
    }
}

@media screen and (max-width: 400px) {
    .list08 ul.time-box > li {
        width: 50%;
    }
}