/* index.css */

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    background: #f6f7f9;
    color: #262626;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

:root {
    --teal: #00A3A3;
    --line: #e7e9ee;
    --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    --radius: 14px;
}

/* ====== 페이지 레이아웃 ====== */
.lp-main {
    width: 100%;
    max-width: 1920px;
    min-height: calc(100vh - 80px);
    margin: 0 auto;
    background: #f6f7f9;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    box-sizing: border-box;
}

.lp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    width: 100%;
    max-width: 1461px;
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
}

.lp-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lp-panel,
.lp-cart {
    min-width: 0;
    height: 100%;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, .03);
    overflow: hidden;
}

/* ====== TABS (첨부 이미지 스타일) ====== */
.lp-tabs-wrap {
    display: flex;
    align-items: stretch;
    background: #F3F5F7;
    border-bottom: 1.5px solid #00A3A3;
    flex: 0 0 auto;
    margin-bottom: 20px;
}

/* 뷰포트: 한 페이지(최대 4개)만 보이도록 overflow hidden */
.lp-tabs-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* 탭 트랙: transform: translateX 로 페이지 이동 (키오스크 방식) */
.lp-tabs {
    --lp-tab-width: 25%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--lp-tab-width);
    transition: transform 0.35s ease;
    will-change: transform;
}

/* 좌우 화살표 — 시설이 5개 이상일 때만(.lp-tabs-wrap.has-overflow) 노출 */
.lp-tabs-arrow {
    flex: 0 0 40px;
    border: 0;
    background: #fff;
    cursor: pointer;
    color: #262626;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
}

.lp-tabs-wrap.has-overflow .lp-tabs-arrow {
    display: flex;
}

.lp-tabs-arrow:hover:not(:disabled) {
    background: #00A3A3;
    color: #fff;
}

.lp-tabs-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.tab {
    height: 54px;
    border: 0;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    background: #fff;
    color: #262626;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    padding: 0 12px;
    box-sizing: border-box;
}

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: inherit;
}

.tab-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}
.tab .tab-icon-active   { display: none; }
.tab .tab-icon-inactive { display: block; }
.tab.is-active .tab-icon-active   { display: block; }
.tab.is-active .tab-icon-inactive { display: none; }

.tab-label {
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
}

/* 활성 탭(서핑장처럼) */
.tab.is-active {
    background: var(--teal);
    /* #00A3A3 */
    color: #fff;
}

/* ── 상품 탭 (tab_type='PRODUCT') 전용 스타일 ──
   세트/1+1 컨테이너 성격을 시설 탭(청록)과 구분하기 위해 오렌지 톤 적용.
   기존 카트 세트 그룹·뱃지에 쓰이는 #E68A3E 와 통일. */
.tab[data-tab-type="PRODUCT"] {
    background: #FFF5EC;
    color: #B26A2A;
    box-shadow: inset 0 -3px 0 #E68A3E;
}
.tab[data-tab-type="PRODUCT"].is-active {
    background: #E68A3E;
    color: #fff;
    box-shadow: none;
}

/* 아래 흰 영역이 탭에 붙어 보이게 */
.lp-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#bookingSection {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 15px 0 20px;
    margin: 20px 0;
    margin-right: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.lp-title {
    margin: 0 0 30px 0;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
}

.lp-title-mt {
    margin-top: 36px;
}

.lp-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 30px;
    align-items: start;
    /* height: 370px;
    6주까지 출력되는 달 때문에 높이 사이즈 줌(필요 없을 시 삭제) */

}

/* ====== CHECKOUT MODE ====== */
.lp-panel.is-checkout .lp-tabs-wrap {
    display: none;
}

/* ====== CALENDAR ====== */
.calendar {
    border-right: 0.5px solid #D9D9D9;
    padding-right: 18px;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}

.cal-nav {
    width: 25px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6px 12px;
    font-size: 0;
    line-height: 0;
    padding: 0;
}

.cal-nav.prev {
    background-image: url("/pc/img/prev_icon.png");
}

.cal-nav.next {
    background-image: url("/pc/img/next_icon.png");
}

.cal-month {
    font-size: 20px;
    font-weight: 500;
    color: #262626;
}

.cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    color: #262626;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 8px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
}

/* 날짜 버튼 2줄 구조 */
.cal-day {
    width: 52px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.cal-day-inner {
    display: grid;
    gap: 2px;
    justify-items: center;
    line-height: 1;
}

.cal-day-num {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
}

.cal-day-sub {
    font-size: 9px;
    font-weight: 400;
    color: #262626;
}

/* 선택 가능 날짜는 배경 없음(요구사항) */
.cal-day.is-enabled {
    border-color: transparent;
    background: transparent;
}

/* 선택했을 때만 배경 */
.cal-day.is-active {
    background: var(--teal);
    border-color: var(--teal);
}

.cal-day.is-active .cal-day-num,
.cal-day.is-active .cal-day-sub {
    color: #fff !important;
}

/* 옆달 */
.cal-day.is-other {
    opacity: .35;
}

/* 공휴일/일요일: #00A3A3 */
.cal-day.is-sun .cal-day-num,
.cal-day.is-sun .cal-day-sub,
.cal-day.is-holiday .cal-day-num,
.cal-day.is-holiday .cal-day-sub {
    color: var(--teal);
}

/* 토요일은 평일과 동일(#262626) → 별도 스타일 없음 */

/* 매진: #D9D9D9 */
.cal-day.is-soldout {
    cursor: not-allowed;
}

.cal-day.is-soldout .cal-day-num,
.cal-day.is-soldout .cal-day-sub {
    color: #D9D9D9;
}

/* 비활성(선택 불가) */
.cal-day.is-disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* ====== TIME ====== */
.timebox {
    padding-left: 0;
}

.timebox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 8px;
    margin-top: 20px;
}

/* 시간 버튼도 2줄 구조 */
.time {
    width: 110px;
    border-radius: 8px;
    border: 0.5px solid var(--teal);
    background: #fff;
    height: 50px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.time-inner {
    display: grid;
    gap: 2px;
    justify-items: center;
    line-height: 1;
}

.time-main {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
}

.time-sub {
    font-size: 12px;
    font-weight: 400;
    color: #EA3333;
    margin-top: 3px;
}

/* 선택 */
.time.is-active {
    background: var(--teal);
    border-color: var(--teal);
}

.time.is-active .time-main,
.time.is-active .time-sub {
    color: #fff !important;
}

/* 예약대기(점선) */
.time.is-wait {
    border-style: dashed;
}

.time.is-wait .time-main {
    color: #D9D9D9;
}

.time.is-wait .time-sub {
    color: #EA3333;
}

/* 예약마감 */
.time.is-closed {
    border-color: #D9D9D9;
    cursor: not-allowed;
}

.time.is-closed .time-main,
.time.is-closed .time-sub {
    color: #D9D9D9;
}

/* ====== PEOPLE ====== */
.people {
    display: grid;
    gap: 10px;
}

.row {
    border: 1px solid #D9D9D9;
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.row-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.row-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tag {
    min-width: 62px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
}

/* .tag-blue {
    border-color: #d7e7ff;
    background: #f4f8ff;
    color: #2f6bd3;
} */

/* .tag-gray {
    border-color: #e6e8ee;
    background: #f6f7f9;
    color: #5a6375;
} */

.meta-title {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
}

.price {
    font-size: 20px;
    font-weight: 600;
    color: #262626;
}

.qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.qty-btn {
    width: 34px;
    height: 28px;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    color: #262626;
}

.qty-num {
    width: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #262626;
}

.people-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* 담기 버튼 */
.lp-sticky-actions {
    bottom: 0;
    z-index: 5;
    background: #fff;
    padding: 0 20px 20px;
}

.lp-panel.is-checkout .lp-sticky-actions {
    display: none !important;
}

.btn-add {
    width: 155px;
    height: 55px;
    border-radius: 12px;
    background: #F2F2F2;
    font-weight: 600;
    color: #262626;
    font-size: 20px;
}

.btn-add.is-enabled {
    background: var(--teal);
    color: #fff;
    cursor: pointer;
}

.row.is-selected .tag {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

/* ====== CART ====== */
.cart-head {
    padding: 25px 20px 20px 20px;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
}

.lp-cart {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.cart-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 400px);
    padding: 0 15px 0 20px;
    margin-right: 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cart-empty {
    height: calc(100vh - 500px);
    border-radius: 14px;
    display: grid;
    place-items: center;
    text-align: center;
}

.cart-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #262626;
}

.cart-empty-desc {
    font-size: 16px;
    font-weight: 400;
    color: #A6A6A6;
    padding: 5px;
}

/* ====== CART ITEMS ====== */
.cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 6px;
    background: #f2f2f2;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    align-items: center;
}

/* 시설 그룹 카드 — 세트 그룹(cart-group-bundle)과 동일한 헤더 스트립 + 흰
   아이템 영역 구조. 세트는 피치, 시설은 teal 로 컬러만 구분. */
.cart-group {
    background: #fff;
    border: 1px solid #C7E8E8;
    border-left: 3px solid #00A3A3;
    border-radius: 8px;
    margin: 6px 0;
    padding: 0;
    overflow: hidden;
}

.cart-group-title {
    color: #00808F;
    font-size: 16px;
    font-weight: 700;
    background: #E6F5F5;
    padding: 12px 14px;
    margin: 0;
    min-height: 44px;
    line-height: 1.35;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    letter-spacing: -0.2px;
}

.cart-group-title:first-child {
    margin-top: 0;
}

/* 헤더 스트립 아래 아이템/디바이더는 좌측 teal 보더에 붙지 않도록 여백 */
.cart-group .cart-item,
.cart-group .cart-divider {
    margin-left: 10px;
    margin-right: 10px;
}

.cart-divider {
    height: 1px;
    background: #00A3A3;
    opacity: .6;
    margin: 8px 0 10px;
}

.cart-item {
    display: grid;
    gap: 10px;
    border-bottom: 1px solid #D9D9D9;
}

.cart-item:last-child {
    border-bottom: 0;
}

.cart-item-left {
    display: grid;
    gap: 6px;
    margin: 15px 0;
}

.cart-item-left:first-child {
    margin-top: 0;
}

.cart-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cart-item-head .cart-remove {
    margin: 0;
    flex: 0 0 auto;
    align-self: center;
}

.cart-item-meta {
    font-size: 16px;
    font-weight: 400;
    color: #4d4d4d;
    margin: 5px 0;
}

.cart-item-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cart-remove {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #9aa3b2;
}

.cart-tag {
    min-width: 50px;
    min-height: 25px;               /* fixed height → min-height 로 컨텐츠에 따라 자연 확장 */
    padding: 4px 10px;              /* 상하 패딩 추가로 세로 중앙 정렬 확보 */
    border-radius: 6px;
    background: var(--teal);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    display: inline-flex;           /* inline-grid + place-items 대신 flex 로 통일 */
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.cart-price {
    font-size: 14px;
    font-weight: 700;
    color: #262626;
    min-width: 84px;
    text-align: right;
}

/* cart qty는 기존 qty 스타일 재사용 가능 */
.cart-qty {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.cart-qty .qty-btn {
    width: 30px;
    height: 26px;
    font-size: 14px;
    font-weight: 600;
}

.cart-qty .qty-num {
    width: 22px;
    font-size: 13px;
    font-weight: 700;
}

.cart-foot {
    padding: 20px;
    display: grid;
    gap: 5px;
    margin-top: auto;
}

.cart-foot .sumrow:nth-child(3) {
    margin: 14px 0;
}

.sumrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
}

.sumrow b {
    font-size: 24px;
    font-weight: 600;
    color: #262626;
}

.sumrow-total {
    font-size: 20px;
    font-weight: 600;
    color: #262626;
}

.muted {
    color: #7b8394;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini {
    height: 25px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #D9D9D9;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    margin-top: 4px;
}

.accent {
    color: var(--teal) !important;
}

.btn-pay {
    height: 52px;
    border-radius: 9px;
    border: 0;
    background: var(--teal);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin-top: 5px;
    font-size: 20px;
}

.is-hidden {
    display: none !important;
}

/* 상품 탭(tab_type='PRODUCT') 활성 시 시설 탭 전용 요소들을 숨김.
   .is-hidden 과 별도 클래스라 setPeopleVisible 등 다른 함수의 클래스 토글에 영향 안 받음. */
.is-product-hidden {
    display: none !important;
}

/* body[data-tab-mode="PRODUCT"] 로 전환되면 시설 전용 요소는 무조건 숨김.
   개별 요소의 인라인 style/클래스 상태와 무관하게 상위 속성 셀렉터로 강제하므로
   setPeopleVisible 등 다른 함수가 뒤늦게 display 를 되살려도 이 규칙이 이긴다. */
body[data-tab-mode="PRODUCT"] .lp-facility-only {
    display: none !important;
}

/* 기본 */
#bookingSection {
    display: block;
}

#checkoutSection {
    display: none;
}

/* 결제 단계 */
.lp-panel.is-checkout #bookingSection {
    display: none !important;
}

.lp-panel.is-checkout #checkoutSection {
    display: block !important;
}

/* ====== CHECKOUT (예약자정보) ====== */
#checkoutSection {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 15px 0 0;
    margin: 20px 5px 20px 20px;
}

.checkout-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 10px 20px 10px;
}

.checkout-line {
    height: 2px;
    background: var(--teal);
    opacity: .7;
    margin-bottom: 18px;
}

.checkout-form {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    margin-bottom: 22px;
    padding: 0 10px;
}

.field {
    display: grid;
}

.label {
    font-size: 16px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 10px;
}

.req {
    color: var(--teal);
    margin-left: 2px;
}

.input {
    height: 48px;
    border-radius: 12px;
    border: 1px solid #D9D9D9;
    padding: 16px 12px;
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    outline: none;
}

.input::placeholder {
    font-size: 16px;
    font-weight: 400;
    color: #A6A6A6;
    outline: none;
}

.input:focus {
    border: 1.5px solid var(--teal);
}

.input.is-error {
    border: 1.5px solid var(--teal);
}

.input.is-error:placeholder-shown {
    padding-right: 56px;
    background-image: url("/pc/img/caution_icon.png");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 25px;
}

.help {
    font-size: 14px;
    font-weight: 400;
    color: var(--teal);
    margin: 5px 0 0;
}

/* ====== TERMS ====== */
.terms-title {
    font-size: 16px;
    font-weight: 600;
    margin: 18px 10px 10px;
}

.terms-line {
    height: 2px;
    background: var(--teal);
    opacity: .7;
}

.terms-list {
    display: grid;
    padding: 0 10px;
}

.terms-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    column-gap: 0px;
    padding: 15px 0;
    border-bottom: 1px solid #D9D9D9;
    font-size: 16px;
    font-weight: 400;
    color: #262626;
}

.terms-item>span {
    line-height: 1.2;
}

.terms-item input {
    accent-color: var(--teal);
}

/* 체크박스 커스텀 */
.terms-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    background: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 0;
}

/* 체크 됐을 때: teal 배경 + check_w_icon */
.terms-item input[type="checkbox"]:checked {
    border-color: var(--teal);
    background: var(--teal);
    background-image: url("/pc/img/check_w_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;
    /* 아이콘 크기 */
}

/* 포커스(키보드 접근성) */
.terms-item input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(0, 163, 163, .18);
    outline-offset: 2px;
}


.terms-link {
    justify-self: end;
    color: var(--teal);
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline !important;
}

/* ====== INFO TABLES (취소/환불규정, 운영시간) ====== */
.info-wrap {
    display: grid;
    gap: 15px;
    padding: 10px 0;
}

.info-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 5px 0 10px;
}

.info-dot {
    width: 16px;
    height: 16px;
    background-image: url("/pc/img/caution_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    flex-shrink: 0
}

.info-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--teal);
}

.info-card {
    background: #F2F2F2;
    border-radius: 10px;
    border: 1px solid #F2F2F2;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.info-table th,
.info-table td {
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    font-weight: 400;
    color: #262626;
    text-align: center;
}

.info-table thead th {
    background: #f2f2f2;
    font-size: 16px;
    font-weight: 600;
    width: 50%;
}

.info-table th+th,
.info-table td+td {
    border-left: 1px solid #f2f2f2;
}

.info-table tbody tr:last-child td {
    border-bottom: 0;
}

/* 운영시간 아래 bullet */
.info-bullets {
    margin: 15px 5px 0;
    color: var(--teal);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.info-bullets li {
    margin: 4px 0;
}


/* ====== CART ACTIONS ====== */
.cart-actions {
    display: grid;
    align-items: end;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
}

/* 예약자정보 단계에서 버튼 두개 */
.cart-actions.is-checkout {
    grid-template-columns: 0.8fr 1.2fr;
}

.btn-pay,
.btn-back {
    width: 100%;
    display: block;
    text-align: center;
}

.btn-back {
    height: 52px;
    border-radius: 9px;
    border: 0;
    background: #e9ecef;
    color: #262626;
    font-weight: 600;
    cursor: pointer;
    font-size: 18px;
}


/* 스크롤바 커스터마이징 */
/* Chrome / Edge / Safari */
/* 왼쪽 영역 */
#bookingSection::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#bookingSection::-webkit-scrollbar-thumb {
    background-color: #DADADA;
    border-radius: 4px;
}

#bookingSectiont::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

#bookingSection::-webkit-scrollbar-track {
    background: transparent;
}

#checkoutSection::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#checkoutSection::-webkit-scrollbar-thumb {
    background-color: #DADADA;
    border-radius: 4px;
}

#checkoutSection::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

#checkoutSection::-webkit-scrollbar-track {
    background: transparent;
}

/* 오른쪽 영역 */
.cart-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.cart-body::-webkit-scrollbar-thumb {
    background-color: #DADADA;
    border-radius: 4px;
}

.cart-body::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

.cart-body::-webkit-scrollbar-track {
    background: transparent;
}


/* ====== 이용약관 모달 ====== */
.modal-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dim.is-hidden {
    display: none;
}

.modal {
    width: 550px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
    padding: 30px 25px 25px;
    position: relative;
}

.modal-title {
    display: none !important;
}

.tmodal-title {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.tmodal-title-accent {
    color: var(--teal);
}

.tmodal-title-text {
    color: #262626;
}

/* .modal-body {
    font-size: 12px;
    color: #4d4d4d;
    line-height: 1.55;
    max-height: 260px;
    overflow: auto;
    padding: 6px 4px;
} */

/* 번호 리스트(1,2,3) */
.tmodal-ol {
    margin: 0;
    display: grid;
    gap: 15px;
}

.tmodal-ol li {
    color: #262626;
    /* list-style: decimal; */
    font-size: 16px;
    font-weight: 400;
}

.tmodal-ol-head {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}

.tmodal-ol-body {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}

.tmodal-desc {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    margin-bottom: 20px;
    text-align: center;
}

.modal-ok {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: 0;
    background: #f2f2f2;
    color: #262626;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    margin-top: 25px;
}

/* 모달 열렸을 때 스크롤 잠금용(선택) */
body.is-modal-open {
    overflow: hidden;
}

/* ====== 할인/쿠폰 모달 ====== */
.coupon-modal {
    width: 460px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
    padding: 26px 24px 22px;
    position: relative;
}

.coupon-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    border: 0;
    background-color: transparent;
    background-image: url("/pc/img/close_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    cursor: pointer;
    opacity: .7;
}

.coupon-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    margin-top: 15px;
}

.coupon-desc {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #4D4D4D;
    margin: 10px 0 20px;
}

.coupon-desc span {
    color: var(--teal);
}

.coupon-inputs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.coupon-input {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #d9d9d9;
    text-align: center;
    font-size: 14px;
    outline: none;
}

.coupon-input:focus {
    border-color: var(--teal);
}

.coupon-submit {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: 0;
    background: var(--teal);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}


/* =========================
   예약 대기 모달
========================= */
.wait-modal {
    width: 550px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
    padding: 26px 24px 22px;
    position: relative;
}

.wait-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 22px;
    height: 22px;
    border: 0;
    background: url("/pc/img/close_icon.png") no-repeat center;
    background-size: 18px;
    cursor: pointer;
}

.wait-body {
    display: grid;
    gap: 14px;
}

.wait-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
}

.wait-when {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: #262626;
    margin-bottom: 10px;
}

.wait-when .accent {
    color: var(--teal);
    font-weight: 600;
    font-size: 16px;
}

.wait-list {
    margin: 0;
    color: #666666;
    font-size: 16px;
    font-weight: 400;
    padding-left: 20px;
}

.wait-list li {
    list-style: disc;
    margin-bottom: 10px;
}

.wait-agree {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    color: #262626;
    user-select: none;
    font-weight: 400;
}

.wait-agree input {
    accent-color: var(--teal);
}

/* 체크박스 커스텀 */
.wait-agree input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    background: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 0;
}

/* 체크 됐을 때: teal 배경 + check_w_icon */
.wait-agree input[type="checkbox"]:checked {
    border-color: var(--teal);
    background: var(--teal);
    background-image: url("/pc/img/check_w_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;
    /* 아이콘 크기 */
}

/* 포커스(키보드 접근성) */
.wait-agree input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(0, 163, 163, .18);
    outline-offset: 2px;
}

.wait-agree-icon {
    width: 12px;
    height: 12px;
    display: none;
}

.wait-actions {
    display: grid;
    align-items: end;
    grid-template-columns: 0.5fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.wait-actions--one {
    grid-template-columns: 1fr;
}

.wait-btn {
    height: 54px;
    border-radius: 10px;
    border: 0;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

.wait-btn--ghost {
    background: #f2f2f2;
    color: #262626;
}

.wait-btn--primary {
    background: var(--teal);
    color: #fff;
}

/* 체크되면 아이콘 표시 */
.wait-agree input:checked~.wait-agree-icon {
    display: inline-block;
}

/* 쿠폰 모달 닫기 버튼 */
.coupon-close {
    width: 12px;
    height: 12px;
    background: url("/pc/img/close_icon.png") no-repeat center;
    background-size: 12px;
    border: 0;
    cursor: pointer;
}

/* 예약대기 모달 닫기 버튼 */
.wait-close {
    width: 12px;
    height: 12px;
    background: url("/pc/img/close_icon.png") no-repeat center;
    background-size: 12px;
    border: 0;
    cursor: pointer;
}

/* kicc 모달 스타일 */
.kicc-modal {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:9999;
}

.kicc-modal-size {
    width:600px;
    max-width:120vw;
    height:720px;
    max-height:92vh;
    margin:4vh auto;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.kicc-modal-bold {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-bottom:1px solid #eee;
}

.kicc-iframe {
    width:100%;
    height:calc(100% - 48px);
    border:0;
}

/* 결제 완료 후 redirect 모달*/
.redirect-modal {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:10000;
}

.redirect-bold {
    width:320px;
    max-width:92vw;
    margin:30vh auto;
    background:#fff;
    border-radius:12px;
    padding:18px;
}

/* ===== 결제 주의사항 모달 ===== */
.rc-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.rc-modal.is-hidden {
    display: none !important;
}

.btn-cancel.is-active {
    background: var(--teal);
    color: #fff;
}

.rc-modal-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.rc-modal-panel {
    position: relative;
    width: 500px;
    max-width: calc(100vw - 40px);
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    padding: 32px 28px 26px;
}

.rc-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 12px;
    height: 12px;
    border: 0;
    cursor: pointer;
    background-color: transparent;
    background-image: url("/pc/img/close_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* .rc-modal-close:hover {
  opacity: 1;
} */

.rc-modal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 10px;
}

.rc-modal-desc {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #4d4d4d;
    margin-bottom: 30px;
}

.rc-modal-desc .accent {
    color: var(--teal);
    font-weight: 600;
}

.rc-modal-form {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.rc-modal-form.is-hidden {
    display: none !important;
}

.rc-modal-input {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    outline: none;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    margin-bottom: 10px;
}

.rc-modal-input:focus {
    border: 1.5px solid var(--teal);
}

/* 기본(안내/오류/완료): 회색 버튼 */
.rc-modal-ok {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: 0;
    background: var(--teal);
    color: white;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
}

/* 비밀번호 모달: 민트 버튼 */
.rc-modal-ok.is-teal {
    background: var(--teal);
    color: #fff;
}

/* ===== 새 모달 버튼 세트 ===== */
.x-modal-actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

/* 공통 버튼 */
.x-btn {
    flex: 1;
    height: 60px;               /* 충분히 넉넉하게 */
    border-radius: 18px;
    font-size: 17px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: 0.15s ease;
}

/* 취소 버튼 */
.x-btn-cancel {
    background: #f3f4f6;
    color: #111827;
}

/* 메인 버튼 */
.x-btn-primary {
    background: #00A3A3;
    color: #ffffff;
}

/* 눌림 효과 */
.x-btn:active {
    transform: scale(0.98);
}

/* 비활성 */
.x-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 경고 모달 — 세트 예약 모달(z-index 9990) 보다 위에 노출되도록 상향 */
.m-alert {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* PC 여백 */
}

/* 카드 */
.m-alert-card {
    width: 100%;
    max-width: 480px;   /* ⭐ PC에서 적당한 폭 */
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 28px 24px;
    text-align: center;
}

/* 제목 */
.m-alert-title {
    font-size: 22px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 16px;
}

/* 설명 */
.m-alert-desc {
    line-height: 1.55;
    margin-bottom: 24px;
    color: #4D4D4D;
    font-size: 17px;
}

/* 강조 텍스트 */
.m-alert-accent {
    color: var(--teal);
    font-weight: 600;
}

/* 취소/환불 체크박스 */
.terms-item:has(#agreeRefund) {
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: none;
}

/* 반응형 작업 대기 
@media (max-width: 1500px) {
    .lp-main {
        max-width: 1180px;
        padding: 0 18px;
    }

    .lp-wrap {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .lp-wrap {
        grid-template-columns: 1fr;
    }

    .calendar {
        border-right: 0;
        padding-right: 0;
    }

    .lp-grid {
        grid-template-columns: 1fr;
    }

    .timebox-grid {
        grid-template-columns: repeat(3, 1fr);
    }
} */

/* ===== 결제 완료 모달 본문 ===== */
.pay-done {
    text-align: left;
    font-size: 14px;
    color: #222;
    max-height: 60vh;
    overflow-y: auto;
}
.pay-done__section {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.pay-done__section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.pay-done__section:first-child {
    padding-top: 0;
}
.pay-done__section-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}
.pay-done__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    line-height: 1.45;
}
.pay-done__label {
    color: #777;
    flex: 0 0 auto;
    min-width: 76px;
}
.pay-done__value {
    text-align: right;
    color: #222;
    word-break: break-all;
}
.pay-done__row--total {
    padding-top: 6px;
    padding-bottom: 6px;
}
.pay-done__row--total .pay-done__label {
    font-weight: 700;
    color: #222;
}
.pay-done__value--amount {
    font-weight: 700;
    font-size: 18px;
    color: #d32f2f;
}
.pay-done__lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pay-done__line {
    padding: 8px 10px;
    background: #f7f8fa;
    border-radius: 6px;
}
.pay-done__line--empty {
    color: #999;
    text-align: center;
}
.pay-done__line-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 2px;
}
.pay-done__line-type {
    font-size: 12px;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1px 8px;
}
.pay-done__line-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
}