:root {
    --primary-color: #573cfa;
    --sub1-color: #BFC3FF;
    --sub2-color: #CCFC06;
    --font-primary1: "NanumSquareNeoBold";
    --font-primary2: "NanumSquareNeoExtraBold";
    --font-primary3: "NanumSquareNeoHeavy";
}

/* ======== 바텀시트 ======== */


.calendar-scroll { flex: 1; /* ✅ 남은 공간 채우기 */ overflow-y: auto;padding: 20px 10px; position: relative; height: 95vh;}
.bt-per {overflow-y: auto;}
.calendar-month {margin-bottom: 40px;}
.calendar-month h3 { margin-bottom: 20px; font-size: 18px; font-weight: 700; text-align: center;}
.bt_sheet.cal { position: fixed; background-color: #00000030; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 100; display: none; }
.bt_sheet.cal .sheet_box {position: absolute; bottom: 0; left: 0; background-color: #fff; padding: 0px 15px 20px 15px; width: 100%; height: 100vh; display: flex; flex-direction: column; }
.calendar-month .day.on {background-color: #007bff !important; color: #fff; border-radius: 50%; z-index: 1; position: relative; }
.calendar-month td {text-align: center; vertical-align: top; font-size: 14px; width: calc(100% / 7); aspect-ratio: 1 / 1;}
.calendar-month .day.disabled {color: #ccc; pointer-events: none;}
.calendar-month td.disabled {pointer-events: none;}
.calendar-month .day.today {border: 1px solid #eee; border-radius: 50%; font-weight: bold;}
.calendar-month td .day { font-weight: 500; aspect-ratio: 1 /1; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #555;}
/* 날짜 범위 배경은 날짜 숫자 부분만! */
.calendar-month .day.range {background-color: #f1f6ff; color: #000; border-radius: 0;}
/* 양 끝 날짜 둥글게 (셀에 적용) */
.calendar-month td.start .day.range {border-top-left-radius: 50%;  border-bottom-left-radius: 50%;}
.calendar-month td.end .day.range {border-top-right-radius: 50%; border-bottom-right-radius: 50%;}

.week {padding: 20px 10px 15px 10px; border-bottom: 1px solid #eee;}
.week ul {display: flex;}
.week ul li {width: calc(100% / 7); text-align: center; font-size: 14px; color: #444; font-weight: 500;}

.cal-bt {position: fixed; bottom: 0; left: 0; padding: 12px 20px; background-color: #fff; display: flex; align-items: center; gap: 25px; width: 100%; border-top: 1px solid #eee; z-index: 10;}
.cal-bt .reset i, .cal-bt .reset p {color: #aaa;cursor:pointer ;}
.cal-bt button {flex-grow: 1;}

.cal-head {position: sticky; top: 0; left: 0; width: 100%; height: 55px; display: flex; align-items: center; flex-shrink: 0; background-color: #fff; padding: 0 20px; z-index: 10;}
.cal-head .clo-btn {background: url(../img/clo-btn.png) no-repeat center/cover; width: 18px; height: 18px; margin-left: 5px;cursor: pointer;}
.cal-head h3 {font-size: 18px; font-weight: 600; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.cal-top {position: sticky; top: 55px; left: 0; width: 100%; background-color: #fff; z-index: 10;}


/* 양 끝 날짜 둥글게 */
.calendar-month td.range.start .day { border-top-left-radius: 50%; border-bottom-left-radius: 50%; background-color: #f1f6ff; position: relative;}
.play-detail-wrap .calendar-month td.range.start .day::after {display:none;}
.calendar-month td.range.start .day::after {content: ""; display: block; width: 50%; height: 100%; background-color: #f1f6ff; position: absolute; right: 0; top: 0;z-index: -2;}
.calendar-month td.range.start .day::before {content: ""; display: block; width: 100%; height: 100%; background-color: var(--primary-color); position: absolute; top: 0; left: 0; z-index: -1; border-radius: 50%;}
  
.calendar-month td.range.end .day {border-top-right-radius: 50%;border-bottom-right-radius: 50%; background-color: #f1f6ff;}
.calendar-month td.range.end .day::after {content: ""; display: block; width: 50%; height: 100%; background-color: #f1f6ff; position: absolute; left: 0; top: 0; z-index: -2;}
.calendar-month td.range.end .day::before {content: ""; display: block; width: 100%; height: 100%; background-color: var(--primary-color); position: absolute; top: 0; left: 0; z-index: -1; border-radius: 50%;}
.calendar-month td .price { margin-top: 4px; font-size: 10px; color: #666; font-weight: 500;}
.calendar-month .day.disabled { color: #ccc; pointer-events: none;}
.calendar-month td.disabled { pointer-events: none;}
.calendar-month table {width: 100%;}
.calendar-month table tr th {width: calc(100% / 7); text-align: center;}



/* 캘린더 커스텀 */
.cal-tab {display: flex; gap: 10px; margin-bottom: 12px;}
.cal-tab li {padding: 9px 18px; border-radius: 50px; border: 1px solid #eee; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; color: #555;cursor: pointer;}
.cal-tab li.on {border-color: var(--primary-color); color: var(--primary-color); font-weight: 600;}
.cal-tab li em {width: 16px; height: 16px;}
.cal-tab li.cal-date em {background: url(../img/cal1.png) no-repeat center/cover;}
.cal-tab li.cal-per em {background: url(../img/cal2.png) no-repeat center/cover;}
.cal-tab li.cal-date.on em {background: url(../img/cal1_on.png) no-repeat center/cover;}
.cal-tab li.cal-per.on em {background: url(../img/cal2_on.png) no-repeat center/cover;}

/* 인원 선택 */

.bt-per {padding: 20px 20px 60px 20px;}
.bt-per h4 {font-size: 18px; font-weight: 600; margin-bottom: 15px;}
.my-pet-chk {width: 100%; overflow: hidden; margin-bottom: 30px;}
.my-pet-chk ul {display: flex; align-items: center; gap: 15px; overflow-y: auto; flex-direction: row !important;}
.my-pet-chk ul li {display: flex; flex-direction: column; align-items: center; gap: 8px;cursor: pointer;}
.my-pet-chk ul li em {width: 80px; height: 80px; border-radius: 50%; overflow: hidden; position: relative;}
.my-pet-chk ul li p {font-size: 15px; font-weight: 500;}
.my-pet-chk ul li.on em::after {content: ""; display: block; width: 100%; height: 100%; background: rgba(87, 60, 250, .8); position: absolute; top: 0; left: 0;}
.my-pet-chk ul li.on em::before {content: ""; display: block; width: 35px; height: 32px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../img/foot.png) no-repeat center/cover; z-index: 1;}
.my-pet-chk ul li.on p {font-weight: 600;}
.my-pet-chk ul li.pet-add em {border: 1px dashed #ddd;}
.my-pet-chk ul li.pet-add span {width: 18px; position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.per-chk {display: flex; align-items: center; justify-content: space-between;}
.per-chk p {font-size: 16px; font-weight: 500; color: #555;}
.per-chk ul {display: flex; align-items: center; gap: 15px;}
.per-chk ul li.per-btn {width: 40px; height: 40px; border-radius: 50%; border: 1px solid #573cfa; display: flex; align-items: center; justify-content: center;cursor: pointer;}
.per-chk ul li.none {border-color: #eee;}
.per-chk ul li.per-btn:first-child.none span {width: 16px; height: 3px; background: url(../img/per-min.png) no-repeat center/cover;}
.per-chk ul li.per-btn:first-child span {width: 16px; height: 3px; background: url(../img/per-min-on.png) no-repeat center/cover;}
.per-chk ul li.per-btn:last-child span {width: 16px; height: 16px; background: url(../img/per-plus.png) no-repeat center/cover;}
.per-chk ul li {font-size: 18px; font-weight: 700;}

.type {padding-bottom: 20px; border-bottom: 1px solid #eee; margin-top: 30px;}
.type ul {display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 15px;}
.type ul li label {display: flex; align-items: center; gap: 6px; cursor: pointer;}

.per-per {margin-top: 30px; display: flex; flex-direction: column; gap: 20px;}

.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-weight: bold;
    gap: 25px;
    margin-bottom: 20px;
}
.calendar-header button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.st-prod-head {border-bottom: 1px solid #eee;}
.st-res {padding-bottom: 150px;}
.st-res h3 {font-size: 20px; font-weight: 700; padding: 30px 0 0 20px;}
.st-calendar {padding: 20px; border-bottom: 8px solid #f5f5f5;}
.mon-tit {font-size: 19px; font-weight: 800;}
.cal-prev {background: url(../img/cal-prev.png) no-repeat center/cover !important; width: 11px !important; height: 18px; margin-top: 0 !important;}
.cal-next {background: url(../img/cal-next.png) no-repeat center/cover !important; width: 11px !important; height: 18px;margin-top: 0 !important;}
.calendar-con table {width: 100%;}
.calendar-con table tr td div {aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.calendar-con table tr td div.today {border: 1px solid #eee;}
.calendar-con table tr td div.on {background: var(--primary-color); color: #fff;}
.calendar-con table tr td div.disabled {color: #aaa;}
.calendar-table thead tr th {text-align: center; color: #555; font-weight: 600; font-size: 14px;}
.st-prod-wrap {padding: 20px; display: flex; flex-direction: column; gap: 25px;}
.st-prod-wrap .per-chk div {display: flex; flex-direction: column; gap: 5px;}
.st-prod-wrap .per-chk div span {font-size: 15px; font-weight: 600;}
.st-prod-wrap .per-chk div p {font-size: 18px; font-weight: 700; color: #222;}

.calendar-modal {position: fixed; top: 0; left: 0; z-index: 100; background-color: #fff; width: 100%; height: 100%;}
/* 스크롤바 안보이게 xxxxxx */
.calendar-scroll::-webkit-scrollbar {
    display: none;
  }

/* 플레이존 상품 할인 가격 등록 */
.ot-pri {display: flex; flex-direction: row !important;}
.ot-pri b {font-weight: 600; font-size: 15px;}
.ot-pri.on span {font-size: 14px; font-weight: 500; text-decoration: line-through; color: #888;}

@media screen and (min-width: 860px) {
    .calendar-modal {width: 500px; height: 80vh; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 10px;}
    .calendar-modal .bt-per {margin-top: 0;}
    .calendar-month td .price {margin-top: 5px; font-size: 12px; font-weight: 400;}
    .calendar-month td .day {font-size: 15px;cursor:pointer;}
    .week {width: 80%;}
    .calendar-scroll {width: 80%; margin: 0 auto;}
    .cal-tab {margin-top: 10px;}
}