@charset "utf-8";
.sub-search {padding-block: 24px;}
.sub-filter {padding-block: 40px; border-top: 1px solid #EEEEEE;}
.sub-filter .cate-filter {width: fit-content; margin-inline: auto;}
.sub-section {padding-block: 60px 150px; border-top: 1px solid #EEEEEE;}
.sub-section h2 {display: flex; align-items: center; column-gap: 8px; font-size: 17px; font-weight: 500;}
/* 지역 선택 */
.region-search {transition: left 0.3s; z-index: 99999; position: fixed; top: 0; left: -100%; width: 100vw; height: calc(100vh - 90px); background-color: #fff; overflow: hidden;}
html:has(.region-search.open) {overflow: hidden;}
.region-search.open {left: 0;}
.region-search .site-header {position: unset;}
.region-search .region-search-form-wrap .inner{padding-block: 12px;}
.region-search .region-search-form-wrap .search-form {width: 100%;}
.region-search .region-search-list {display: flex; height: calc(100% - 69px);}
.region-search .region-search-list .left {width: 115px; border-right: 1px solid #EEEEEE; background-color: #F8F8F8; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none;}
.region-search .region-search-list .left::-webkit-scrollbar {display: none;}
.region-search .region-search-list .left li {transition: background-color 0.2s; cursor: pointer; border-left: 3px solid transparent; padding: 6px 10px 6px 8px; display: flex; flex-direction: column; align-items: flex-start;}
.region-search .region-search-list .left li strong {font-size: 16px; font-weight: 500; color: #555;}
.region-search .region-search-list .left li span {font-size: 15px; font-weight: 400; color: #bbb;}
.region-search .region-search-list .left li.active {border-color: #FF4D4F; background-color: #FFFFFF;}
.region-search .region-search-list .left li.active strong {color: #FF4D4F;}
.region-search .region-search-list .left li.active span {color: #FA8D8E;}
.region-search .region-search-list .right {width: calc(100% - 115px);}
.region-search .region-search-list .right .region-name {padding: 14px 16px; border-bottom: 1px solid #f5f5f5;}
.region-search .region-search-list .right .region-name span {font-size: 15px; color: #7B7B7B;}
.region-search .region-search-list .right .region-gu-list {-ms-overflow-style: none; scrollbar-width: none; max-height: calc(100% - 50px); overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-wrap: wrap; gap: 8px;}
.region-search .region-search-list .right .region-gu-list::-webkit-scrollbar {display: none;}
.region-search .region-search-list .right .region-gu-list li {width: calc(50% - 4px); height: 40px;}
.region-search .region-search-list .right .region-gu-list li .square-btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 10px; border: 1px solid #E8E8E8; background-color: #FAFAFA; font-size: 14px; color: #444;}
.region-search .region-search-list .right .region-gu-list li .square-btn.active {background-color: #FF4D4F; border: 0; color: #ffff;}
/* 찜복록 */
.wish-list {padding-block: 30px 150px;}
.wish-header {display: flex; align-items: center; justify-content: space-between;}
.wish-list .wish-header .label {background-color: #EFF6FF; border: 1px solid #BFDBFE; color: #2563EB; padding: 6px 10px; font-size: 16px; font-weight: 500;}
.wish-list .wish-header .delete-btn {display: flex; align-items: center; column-gap: 6px; font-size: 16px; font-weight: 500; color: #3d3d3d;}
.wish-list .shop-list {margin-top: 30px;}
/* 예약내역 */
.reservation-list .inner {max-width: 748px;}
.reservation-list .reservation-tab-menu {display: flex;}
.reservation-list .reservation-tab-menu a {border-bottom: 2px solid transparent; padding: 12px; flex: 1; display: flex; align-items: center; column-gap: 10px; justify-content: center;}
.reservation-list .reservation-tab-menu a .tab-txt {font-size: 14px; color: #888;}
.reservation-list .reservation-tab-menu a .tab-count {width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; background-color: #BDBDBD; color: #fff;}
.reservation-list .reservation-tab-menu a.active {border-color: #FF4D4F; background-color: #FFF5F5;}
.reservation-list .reservation-tab-menu a.active .tab-txt {color: #FF4D4F;}
.reservation-list .reservation-tab-menu a.active .tab-count {background-color: #FF4D4F;}
.reservation-list .reservation-card-list {padding-top: 30px; display: flex; flex-direction: column; row-gap: 30px;}
.reservation-list .reservation-card {background-color: #fff; padding: 16px; border-radius: 18px; border: 1px solid #EBEBEB; position: relative;}
.reservation-list .reservation-card .reservation-delete-btn {width: 34px; height: 34px; border-radius: 50%; position: absolute; top: 16px; right: 16px;}
.reservation-list .reservation-card .card-top a {display: flex; align-items: center; column-gap: 12px;}
.reservation-list .reservation-card .shop-thumb {width: 76px; height: 76px; border-radius: 12px; overflow: hidden;}
.reservation-list .reservation-card .shop-thumb img {width: 100%; height: 100%; object-fit: cover;}
.reservation-list .reservation-card .shop-body {max-width: calc(100% - 76px - 12px - 40px);}
.reservation-list .reservation-card .shop-body .shop-name {font-size: 16px; font-weight: 500; color: #111;}
.reservation-list .reservation-card .shop-body .shop-course {margin-top: 2px; margin-bottom: 10px; font-size: 14px; color: #888;}
.reservation-list .reservation-card .shop-body .shop-name,
.reservation-list .reservation-card .shop-body .shop-course {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
.reservation-list .reservation-card .schedule-box {margin-block: 14px; width: 100%; height: 40px; padding-inline: 12px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between;}
.reservation-list .reservation-card .schedule-box span {font-size: 14px;}
.reservation-list .reservation-card.confirmed .schedule-box {border-color: #BFDBFE; background-color: #EFF6FF;}
.reservation-list .reservation-card.confirmed .schedule-box span {color: #1D4ED8;}
.reservation-list .reservation-card.completed .schedule-box,
.reservation-list .reservation-card.canceled .schedule-box {background-color: #F8F9FA;}
.reservation-list .reservation-card.completed .schedule-box span,
.reservation-list .reservation-card.canceled .schedule-box span {color: #111;}
.reservation-list .reservation-card.completed .schedule-box svg path,
.reservation-list .reservation-card .canceled .schedule-box svg path {fill: #bbb;}
.reservation-list .reservation-card .info-box {padding: 10px 12px; border-radius: 10px; background-color: #F8F9FA; display: flex; flex-direction: column; row-gap: 14px;}
.reservation-list .reservation-card .info-box + .btn-wrap {margin-top: 30px;}
.reservation-list .reservation-card .info-box .info-label {font-size: 14px; color: #bbb;}
.reservation-list .reservation-card .info-box .info-value {font-size: 14px; color: #111; margin-top: 2px;}
.reservation-list .reservation-card .info-location {display: flex;}
.reservation-list .reservation-card .info-location .info-cont {flex: 1; padding-right: 1vw;}
.reservation-list .reservation-card .info-location .trans-btn {flex-shrink: 0;}
.reservation-list .reservation-card .info-meta {display: flex; align-items: center;}
.reservation-list .reservation-card .info-meta .info-col {flex: 1;}
.reservation-list .reservation-card .btn-wrap {column-gap: 8px;}
.reservation-list .reservation-card .btn-wrap .square-btn {flex: 1; height: 41px; font-size: 15px; column-gap: 5px;}
.reservation-list .reservation-card .btn-wrap .review-btn .arrow {margin-left: auto;}
.reservation-delete-modal {max-width: 320px;}
.reservation-delete-modal .reservation-delete-icon {display: block; margin-bottom: 16px; margin-inline: auto;}
.reservation-delete-modal strong {display: block; color: #111; font-size: 17px; font-weight: 600; text-align: center;}
.reservation-delete-modal p {margin-top: 8px; color: #888; font-size: 15px; font-weight: 500; text-align: center;}
.reservation-delete-modal .btn-wrap {column-gap: 10px;}

/* 예약내역-비회원 */
.guest-reservation-auth {width: 100%; max-width: 553px; margin-inline: auto; display: flex; flex-direction: column; row-gap: 60px;}
.guest-reservation-auth .guest-auth-top {display: flex; flex-direction: column; align-items: center; row-gap: 6px;}
.guest-reservation-auth .guest-auth-top .guest-auth-icon {width: 50px; height: 50px; border-radius: 50%; background-color: #FEF1F1; display: flex; align-items: center; justify-content: center;}
.guest-reservation-auth .guest-auth-top .guest-auth-title {font-size: 20px; font-size: 500; color: #000;}
.guest-reservation-auth .guest-auth-top .guest-auth-text {text-align: center; font-size: 16px; color: #AEAEB2;}
.guest-reservation-auth .guest-auth-form .guest-auth-btn {margin-top: 30px;}
.guest-reservation-auth .guest-auth-bottom .guest-auth-divider {padding-top: 10px; margin-bottom: 20px; display: flex; align-items: center; column-gap: 12px;}
.guest-reservation-auth .guest-auth-bottom .guest-auth-divider::after,
.guest-reservation-auth .guest-auth-bottom .guest-auth-divider::before {content: ''; width: auto; flex: 1; height: 1px; background-color: #E5E5EA;}
.guest-reservation-auth .guest-auth-bottom .guest-auth-divider span {flex-shrink: 0; font-size: 13px; color: #AEAEB2;}
/* 예약상세 */
.reservation-detail {background-color: #F7F7F7;}
.reservation-detail .inner {max-width: 748px;}
.reservation-detail .reservation-detail-wrap {display: flex; flex-direction: column; row-gap: 30px;}
.reservation-detail .detail-card {border-radius: 18px; background-color: #fff; border: 1px solid #F3F3F3;} 
.reservation-detail .detail-card .detail-card-title {display: block; font-size: 15px; color: #8E8E93; padding: 12px 18px;}
.reservation-detail .detail-card .detail-info-list {}
.reservation-detail .detail-card .detail-info-row {gap: 6px; padding: 10px 18px; border-bottom: 1px solid #EFEFEF; display: flex; align-items: center; justify-content: space-between;}
.reservation-detail .detail-card .detail-info-row:last-child {border-bottom: 0;}
.reservation-detail .detail-card .detail-info-row .detail-info-label {font-size: 15px; color: #636366; flex-shrink: 0;}
.reservation-detail .detail-card .detail-info-row .detail-info-value {text-align: right; font-size: 16px; color: #1C1C1E; word-break: keep-all;}
.reservation-detail .detail-card .detail-info-row .detail-info-value .sub-text {color: #8E8E93; padding-left: 6px;}
.reservation-detail .detail-card .detail-info-row .detail-info-value.total-price {font-size: 20px;}
.reservation-detail .detail-card .detail-info-row .detail-info-value.text-blue {color: #3478F6;}
.reservation-detail .detail-card .detail-info-row .detail-info-value.text-red {color: #FF3B30;}
.reservation-detail .detail-status-card {padding: 20px; display: flex; flex-direction: column; row-gap: 10px; align-items: center;}
.reservation-detail .detail-status-card .detail-date {font-size: 18px; color: #1C1C1E;}
.reservation-detail .detail-status-card .detail-time {font-size: 15px; color: #636366;}
.reservation-detail .detail-shop-card .shop-info-box {display: flex; align-items: center; column-gap: 20px; padding: 14px 18px;}
.reservation-detail .detail-shop-card .shop-info-box .shop-thumb {width: 76px; height: 76px; border-radius: 12px; overflow: hidden;}
.reservation-detail .detail-shop-card .shop-info-box .shop-thumb img {width: 100%; height: 100%; object-fit: cover;}
.reservation-detail .detail-shop-card .shop-info-box .shop-body .shop-name {font-size: 18px; font-weight: 500; color: #111111;}
.reservation-detail .detail-shop-card .shop-info-box .shop-body .shop-course {font-size: 16px; margin-top: 4px; color: #888888;}
.reservation-detail .btn-wrap {margin-top: 50px; column-gap: 8px;}
.reservation-detail .btn-wrap .square-btn {flex: 1; height: 41px; font-size: 15px; column-gap: 5px;}

/* 상세 */
.detail-page {padding-bottom: 100px;}
.detail-page .inner {max-width: 1262px;}
.detail-page .detail-top {display: flex; justify-content: space-between; align-items: flex-start;}
.detail-page .detail-top .detail-gallery {width: 60%;}
.detail-page .detail-top .detail-gallery-main {width: 100%; height: 467px;}
.detail-page .detail-top .detail-gallery-main img {width: 100%; height: 100%; object-fit: cover;}
.detail-page .detail-top .distance-label,
.detail-page .detail-top .detail-gallery-count {position: absolute; right: 20px; bottom: 20px; z-index: 10; padding: 10px 12px; display: flex; align-items: center; column-gap: 12px; border-radius: 30px; background-color: rgba(0, 0, 0, 0.6);}
.detail-page .detail-top .detail-gallery-count .detail-gallery-fraction {font-size: 15px; color: #fff;}
.detail-page .detail-top .detail-gallery-count .detail-gallery-nav {background-color: transparent; display: flex;}
.detail-page .detail-top .detail-gallery-count .swiper-button-disabled {opacity: 0.5; cursor: auto;}
.detail-page .detail-top .distance-label {display: none; right: 0; left: 20px; width: fit-content;}
.detail-page .detail-top .distance-label span {font-size: 15px; color: #fff;}
.detail-page .detail-top .detail-side {width: calc(40% - 40px);}
.detail-page .detail-top .detail-side .detail-title {font-size: 32px; font-weight: 600; color: #111; margin-bottom: 16px;}
.detail-page .detail-top .detail-side .detail-summary {display: flex; align-items: center; column-gap: 30px;}
.detail-page .detail-top .detail-side .detail-summary .detail-summary-item {display: flex; align-items: center; column-gap: 6px;}
.detail-page .detail-top .detail-side .detail-summary .detail-summary-item strong {font-size: 14px; font-weight: 400; color: #111; display: flex; align-items: center; column-gap: 2px;}
.detail-page .detail-top .detail-side .detail-summary .detail-summary-item strong span {color: #aaa;}
.detail-page .detail-top .detail-side .detail-status-row {margin-top: 60px; margin-bottom: 20px; display: flex; align-items: center; column-gap: 16px;}
.detail-page .detail-top .detail-side .detail-status-row .detail-status-time {font-size: 16px; color: #111;}
.detail-page .detail-top .detail-side .detail-address-row {display: flex; align-items: center; justify-content: space-between; column-gap: 8px;}
.detail-page .detail-top .detail-side .detail-address-row .detail-address-content {display: flex; align-items: center; column-gap: 16px;}
.detail-page .detail-top .detail-side .detail-address-row .detail-address-content span,
.detail-page .detail-top .detail-side .detail-address-row .detail-address-content .detail-address-text {display: flex; align-items: center; column-gap: 8px; }
.detail-page .detail-top .detail-side .detail-address-row .detail-address-content span {font-size: 15px; font-weight: 500; color: #828282; flex-shrink: 0;}
.detail-page .detail-top .detail-side .detail-address-row .detail-address-content .detail-address-text p {max-width: 300px; font-size: 15px; font-weight: 400; color: #111;}
.detail-page .detail-top .detail-side .detail-address-row .detail-address-content .detail-address-text .detail-copy-btn {flex-shrink: 0; display: flex; align-items: center; column-gap: 2px;}
.detail-page .detail-top .detail-side .detail-address-row .detail-address-content .detail-address-text .detail-copy-btn span {font-size: 15px; color: #2563EB;}
.detail-page .detail-top .detail-side .btn-list {margin-top: 108px;}
.detail-page .detail-top .detail-side .btn-list .square-btn {column-gap: 8px; padding-block: 0; height: 51px;}
.detail-page .detail-tab-wrap {margin-top: 80px;}
.detail-page .detail-tab-menu {display: flex;}
.detail-page .detail-tab-menu .detail-tab-btn {border-bottom: 2px solid transparent; padding: 12px; flex: 1; display: flex; align-items: center; column-gap: 10px; justify-content: center;}
.detail-page .detail-tab-menu .detail-tab-btn.active {border-color: #FF4D4F; background-color: #FFF5F5; color: #FF4D4F;}
.detail-page .detail-tab-content .detail-tab-panel:not(.active) {display: none;}
.detail-page .detail-tab-content .detail-tab-panel .detail-box {padding: 18px 16px;}
.detail-page .detail-tab-content .detail-tab-panel .detail-box:not(:last-child) {border-bottom: 8px solid #F5F6F8;}
.detail-page .detail-tab-content .detail-tab-panel .detail-box .box-title {margin-bottom: 12px; font-size: 15px; line-height: 1.5; color: #111;}
.detail-page .detail-tab-content .detail-tab-panel .detail-box .info-description {margin-bottom: 14px;}
.detail-page .detail-tab-content .detail-tab-panel .detail-box .info-description p {font-size: 15px; color: #555;}
.detail-page .detail-tab-content .detail-tab-panel .detail-box .detail-more-btn {display: flex; align-items: center; column-gap: 6px; font-size: 15px; color: #FF4D4F;}
.detail-page .detail-tab-content .detail-course-box .course-list {display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item {display: flex; align-items: center; column-gap: 12px; justify-content: space-between; width: calc(50% - 6px); padding: 14px; border-radius: 14px; border: 1px solid #E8E8E8; background: #fff;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .detail-course-left {display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .detail-course-left .course-tit {display: flex; align-items: center; column-gap: 10px;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .detail-course-left .course-name,
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .detail-course-left .course-time {font-size: 16px; font-weight: 500; color: #111;}
/* .detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .detail-course-left .course-time {font-size: 14px; font-weight: 400; color: #aaa;} */
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .detail-course-left .course-desc {font-size: 15px; font-weight: 400; color: #333;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .course-price-wrap {flex-shrink: 0; display: flex; flex-direction: column; row-gap: 4px; align-items: flex-end;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .course-price-wrap .course-price {font-size: 16px; font-weight: 500; color: #FF4D4F; display: flex; align-items: center; column-gap: 6px;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .course-price-wrap .course-price em {padding: 4px 8px; border-radius: 4px; background-color: #FF4D4F; color: #fff; font-style: normal;}
.detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .course-price-wrap .course-origin-price {font-size: 14px; color: #888888; position: relative;}
/* .detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .course-price-wrap .course-origin-price::after {content: ''; width: 100%; height: 1px; position: absolute; top: 50%; left: 0; background-color: #888;} */
/* 리뷰 */
.detail-header {display: none;}
.detail-page .detail-review-summary {display: flex; align-items: flex-start; column-gap: 20px; padding: 38px 32px; border-bottom: 8px solid #F5F6F8;}
.detail-page .detail-review-summary .detail-review-score-box {display: flex; align-items: center; flex-direction: column; row-gap: 4px; align-items: center;}
.detail-page .detail-review-summary .detail-review-score-box .detail-review-score {font-size: 36px; font-weight: 700; color: #000;}
.detail-page .detail-review-summary .detail-review-score-box span {font-size: 13px; color: #8E8E93;}
.detail-page .detail-review-summary .detail-score-info {flex: 1; max-width: 283px;}
.detail-page .detail-review-summary .detail-review-score-meta {display: flex; flex-direction: column; row-gap: 8px;}
.detail-page .detail-review-summary .detail-review-stars {display: flex; align-items: center; column-gap: 2px;}
.detail-page .detail-review-summary .detail-review-count {font-size: 14px; color: #8E8E93;}
.detail-page .detail-review-summary .detail-review-graph {margin-top: 8px; max-width: 370px; display: flex; flex-direction: column; row-gap: 4px;}
.detail-page .detail-review-summary .detail-review-graph-row {display: flex; align-items: center; column-gap: 6px;}
.detail-page .detail-review-summary .detail-review-graph-label {width: 22px; font-size: 13px; color: #8E8E93;}
.detail-page .detail-review-summary .detail-review-graph-bar {flex: 1; height: 4px; border-radius: 999px; background-color: #F2F2F7; overflow: hidden;}
.detail-page .detail-review-summary .detail-review-graph-fill {display: block; height: 100%; border-radius: 999px; background-color: #FF9500;}
.detail-page .detail-review-filter {margin-top: 18px; display: flex;}
.detail-page .detail-review-filter button {min-width: 100px; padding-block: 14px; text-align: center; font-size: 15px; color: #8E8E93; border-bottom: 2px solid transparent;}
.detail-page .detail-review-filter button.active {font-weight: 600; color: #000; border-color: #000;}
.detail-page .detail-review-list {margin-bottom: 18px;}
.detail-page .detail-review-item {padding: 20px 16px; display: flex; flex-direction: column; row-gap: 12px;}
.detail-page .detail-review-item .review-head {}
.detail-page .detail-review-item .review-profile {display: flex; align-items: center; column-gap: 8px;}
.detail-page .detail-review-item .review-profile .review-avatar {width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;}
.detail-page .detail-review-item:nth-child(3n+1) .review-avatar {background: #E8F4FF; color: #2060C0;}
.detail-page .detail-review-item:nth-child(3n+2) .review-avatar {background: #F0E8FF; color: #6030B0;}
.detail-page .detail-review-item:nth-child(3n+3) .review-avatar {background: #E8FFE8; color: #1A7A1A;}
.detail-page .detail-review-item:not(.is-mine) {border-bottom: 1px solid #F2F2F7;}
.detail-page .detail-review-item.is-mine {background-color: #FFF8F0;}
.detail-page .detail-review-item.is-mine .review-profile .review-avatar {background: #FFF0E0; color: #CC6600;}
.detail-page .detail-review-item .review-head .review-profile .review-user {display: flex; flex-direction: column; row-gap: 4px;}
.detail-page .detail-review-item .review-head .review-profile .review-user .review-name {font-size: 14px; font-weight: 600; color: #000;}
.detail-page .detail-review-item .review-head .review-profile .review-user .review-date {font-size: 14px; color: #8E8E93;}
.detail-page .detail-review-item .review-stars-row {display: flex; align-items: center; column-gap: 2px;}
.detail-page .detail-review-item .review-body p {font-size: 15px; line-height: 1.5; color: #3C3C43;}
.detail-page .detail-review-item .review-body .review-more {font-size: 14px; color: #007AFF;}
.detail-page .detail-review-item .review-tag-list {display: flex; column-gap: 8px;}
.detail-page .detail-review-item .review-tag-list .review-tag {padding: 5px 10px; border-radius: 100px; background-color: #F2F2F7; font-size: 13px; color: #3C3C43;}
.detail-page .detail-review-item .review-action {column-gap: 8px;}
.detail-page .detail-review-item .review-action .round-btn {padding: 6px 11px; border-radius: 100px; font-size: 14px;}
.detail-page .detail-review-item .review-action .round-btn.review-edit {border-color: #E5E5EA; color: #8E8E93;}
.detail-page .detail-review-item .review-action .round-btn.review-delete {border-color: #FF3B30; color: #FF3B30;}
.detail-page .detail-review-item .review-thumb-list {display: flex; column-gap: 8px;}
.detail-page .detail-review-item .review-thumb-list .review-thumb {width: 72px; height: 72px; border-radius: 8px; overflow: hidden;}
.detail-page .detail-review-item .review-thumb-list .review-thumb img {width: 100%; height: 100%; object-fit: cover;}
.detail-page .detail-review-item .review-thumb-list {display: flex; column-gap: 8px;}
.detail-page .detail-review-item .review-thumb-list .review-thumb {position: relative; display: block; flex-shrink: 0; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background-color: #F2F2F7; cursor: pointer;}
.detail-page .detail-review-item .review-thumb-list .review-thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
.detail-page .detail-review-item .review-thumb-list .review-thumb.more-view::after {content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,.48);}
.detail-page .detail-review-item .review-thumb-list .review-thumb .more-count {position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff;}
body.modal-open {overflow: hidden;}
.review-gallery-viewer {position: fixed; inset: 0; z-index: 99999; opacity: 0; visibility: hidden; pointer-events: none; background: #000; transition: .2s ease;}
.review-gallery-viewer.is-open {opacity: 1; visibility: visible; pointer-events: auto;}
.review-gallery-viewer__header {max-width: 1840px; width: calc(100% - 40px); margin: 0 auto; position: relative; z-index: 10; padding-block: 26px; display: flex; align-items: center; justify-content: space-between;}
.review-gallery-viewer__header.mo {display: none;}
.review-gallery-viewer__title {flex: 1; font-size: 16px; font-weight: 600; color: #fff;}
.review-gallery-viewer__close {flex: 1; display: flex; align-items: center; justify-content: flex-end; column-gap: 9px; border: 0; background: transparent; font-size: 16px; color: #fff; cursor: pointer;}
.review-gallery-viewer__count {height: 35px; padding: 8px 20px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; white-space: nowrap;}
.review-gallery-viewer__container {max-width: 1840px; width: calc(100% - 40px); height: calc(100% - 174px); max-height: 663px; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: space-between;}
.review-gallery-viewer__stage {position: relative; max-width: 1158px; width: calc(100% - 160px); aspect-ratio: 1158 / 663; margin-inline: auto; overflow: hidden;}
.review-gallery-swiper {width: 100%; height: 100%;}
.review-gallery-swiper .swiper-wrapper {height: 100%;}
.review-gallery-swiper .swiper-slide {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.review-gallery-swiper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: contain;}
.review-gallery-viewer__nav {width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; position: relative; z-index: 3;}
.review-gallery-viewer__nav.swiper-button-disabled {opacity: 0.5; cursor: unset;}
.review-gallery-viewer__nav--prev {left: 24px;}
.review-gallery-viewer__nav--next {right: 24px;}
.review-gallery-viewer__count.mo-count {display: none;}

/* 리뷰작성 */
.review-write-page {background-color: #F7F7F7;}
.review-write-page .inner {max-width: 619px;}
.review-write-page .review-write-wrap,
.review-write-page .review-write-form {display: flex; flex-direction: column; row-gap: 20px;}
.review-write-page .review-write-top,
.review-write-page .review-write-form .review-card {padding: 16px; border-radius: 16px; background-color: #fff;}
.review-write-page .review-write-form .review-card .review-card-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;}
.review-write-page .review-write-form .review-card .review-card-head .review-count {font-size: 14px; color: #8E8E93; transition: color 0.2s;}
.review-write-page .review-write-form .review-card .review-card-head .review-count.max {color: #FF4D4F;}
.review-write-page .review-write-form .review-card .review-card-label {font-size: 15px; font-weight: 700; color: #000;}
.review-write-page .review-write-form .review-card .review-tag-desc {font-size: 14px; color: #8E8E93;}
.review-write-page .review-write-top .review-shop-card {display: flex; align-items: center; column-gap: 12px;}
.review-write-page .review-write-top .review-shop-card .review-shop-thumb {width: 70px; height: 70px; border-radius: 10px; overflow: hidden;}
.review-write-page .review-write-top .review-shop-card .review-shop-thumb img {width: 100%; height: 100%; object-fit: cover;}
.review-write-page .review-write-top .review-shop-card .review-shop-info {display: flex; flex-direction: column; row-gap: 4px;}
.review-write-page .review-write-top .review-shop-card .review-shop-info .review-shop-name {font-size: 16px; font-weight: 700; color: #000;}
.review-write-page .review-write-top .review-shop-card .review-shop-info .review-shop-date {font-size: 14px; color: #8E8E93;}
.review-write-page .review-write-form .review-score-card {padding-block: 18px; display: flex; flex-direction: column; align-items: center; row-gap: 14px;}
.review-write-page .review-write-form .review-score-card .review-card-title {font-size: 16px; font-weight: 700; color: #000;}
.review-write-page .review-write-form .review-score-card .review-star-wrap {display: flex; align-items: center; column-gap: 10px;}
.review-write-page .review-write-form .review-score-card .review-star-wrap .review-star-btn {padding: 4px;}
.review-write-page .review-write-form .review-score-card .review-star-wrap .review-star-btn.active svg path{fill: #F59E0B;}
.review-write-page .review-write-form .review-score-card .review-score-desc {font-size: 14px; color: #8E8E93;}
.review-write-page .review-photo-card {overflow: hidden;}
.review-write-page .review-photo-swiper {width: 100%; overflow: hidden;}
.review-write-page .review-photo-swiper .swiper-wrapper {align-items: center;}
.review-write-page .review-photo-swiper .swiper-slide {width: 100px; max-width: 100px; flex-shrink: 0;}
.review-write-page .review-photo-box {position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 1px dashed #C7C7CC; border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer;transition: border-color .2s ease, background-color .2s ease;}
.review-write-page .review-photo-box:hover {border-color: #FF4D4F;}
.review-write-page .review-photo-input {display: none;}
.review-write-page .review-photo-placeholder,
.review-write-page .review-photo-preview {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;}
.review-write-page .review-photo-placeholder svg {width: 2.4rem; height: 2.4rem;}
.review-write-page .review-photo-preview {display: none; background-size: cover; background-position: center; background-repeat: no-repeat;}
.review-write-page .review-photo-box.is-filled {border-style: solid; border-color: #e5e5ea;}
.review-write-page .review-photo-box.is-filled .review-photo-placeholder {display: none;}
.review-write-page .review-photo-box.is-filled .review-photo-preview {display: block;}
.review-write-page .photo-count {transition: color .2s ease;}
.review-write-page .photo-count.max {color: #ff4d4f; font-weight: 700;}
.review-write-page .radio-group {gap: 12px;}
.review-write-page .radio-item {padding: 10px 14px;}
.review-write-page .radio-item span {font-size: 14px; font-weight: 400; color: #3C3C43;}

/* 예약/결제 페이지 */
.reservation-page {background-color: #F7F7F7;}
.reservation-page .inner {max-width: 1006px;}
.reservation-page .reservation-wrap {display: flex; align-items: flex-start; column-gap: 24px;}
.reservation-page .reservation-content {width: calc(100% - 362px - 24px);}
.reservation-page .reservation-summary {width: 362px;}
.reservation-page .reservation-content,
.reservation-page .reservation-content form {display: flex; flex-direction: column; row-gap: 20px;}
.reservation-page .reservation-summary,
.reservation-page .reservation-card {padding: 30px; border-radius: 16px; background-color: #fff; border: 1px solid #E5E7EB;}
.reservation-page .reservation-shop-name {font-size: 20px; font-weight: 700; color: #353535;}
.reservation-page .reservation-shop-address {font-size: 15px; color: #727272;}
.reservation-page .reservation-card-title {display: block; font-size: 15px; font-weight: 500; color: #111; margin-bottom: 14px;}
.reservation-page .reservation-date-list {display: flex; align-items: center; column-gap: 10px;}
.reservation-page .reservation-date-swiper {margin-inline: 0; padding: 10px 8px; border-radius: 10px; background-color: #F8F8F8;}
.reservation-page .reservation-date-swiper .swiper-slide {width: fit-content;}
.reservation-page .reservation-date-swiper .swiper-slide .custom-radio label {border-color: #D0D0D0; padding: 10px 16px; flex-direction: column; align-items: center;}
.reservation-page .reservation-date-swiper .swiper-slide .custom-radio input[type="radio"]:checked + label {border-color: #FF4D4F;}
.reservation-page .reservation-date-swiper .swiper-slide .custom-radio label span {display: block;}
.reservation-page .reservation-calendar-wrap {flex-shrink: 0; position: relative;}
.reservation-page .reservation-date-all-btn {background-color: #fff; border-color: #D0D0D0; font-size: 16px; color: #040404; column-gap: 10px; min-height: 50px;}
.reservation-page .reservation-time-group + .reservation-time-group {margin-top: 14px;}
.reservation-page .reservation-time-list {display: flex; flex-wrap: wrap; gap: 10px;}
.reservation-page .reservation-time-list .custom-radio label {padding: 12px 18px; border-color: #D0D0D0; color: #111; font-size: 14px; font-weight: 400;}
.reservation-page .reservation-course-list {display: flex; flex-direction: column; row-gap: 10px;}
.reservation-page .reservation-course-item {padding: 14px; border-radius: 14px; border: 1px solid #E8E8E8;}
.reservation-page .reservation-course-item .reservation-course-top {padding-bottom: 10px; border-bottom: 1px solid #E8E8E8;}
.reservation-page .reservation-course-item .reservation-course-info {display: flex; flex-direction: column; row-gap: 10px;}
.reservation-page .reservation-course-item .reservation-course-badge {padding: 4px 10px; background-color: #FF4D4F; color: #fff; font-size: 12px; font-weight: 400;}
.reservation-page .reservation-course-item .reservation-course-name-wrap {display: flex; align-items: center; column-gap: 10px;}
.reservation-page .reservation-course-item .reservation-course-name-wrap .reservation-course-name {font-size: 16px; font-weight: 500; color: #111;}
.reservation-page .reservation-course-item .reservation-course-name-wrap .reservation-course-duration {font-size: 14px; color: #AAAAAA;}
.reservation-page .reservation-course-item .reservation-course-bottom {padding-top: 10px; display: flex; align-items: center; justify-content: space-between;}
.reservation-page .reservation-course-item .reservation-course-bottom .reservation-course-count {display: flex; align-items: center; column-gap: 4px;}
.reservation-page .reservation-course-item .reservation-course-bottom .reservation-course-count .reservation-count-num {min-width: 60px; text-align: center; padding: 9px 10px; font-size: 15px; color: #A4A4A4;}
.reservation-page .reservation-course-item .reservation-course-bottom .reservation-course-count .reservation-count-btn {width: 36px; height: 36px; background-color: #FAFAFA;}
.reservation-page .reservation-form-row + .reservation-form-row {margin-top: 20px;}
.reservation-page .reservation-form-head {display: flex; align-items: center; justify-content: space-between;}
.reservation-page .reservation-form-head label {font-size: 14px; font-weight: 400; color: #525252;}
.reservation-page .reservation-form-head .custom-chk label span {margin-right: 6px; background-color: #F0F0F0; border-color: #E6E6E6;}
.reservation-page .reservation-summary {position: sticky; top: 115px;}
.reservation-page .reservation-summary .reservation-summary-card,
.reservation-page .reservation-summary .reservation-summary-card .reservation-summary-list {display: flex; flex-direction: column; row-gap: 30px;}
.reservation-page .reservation-summary .reservation-summary-item {display: flex; flex-direction: column; row-gap: 6px; padding-bottom: 14px; border-bottom: 1px solid #E6E6E6;}
.reservation-page .reservation-summary .reservation-summary-item .reservation-summary-label {font-size: 15px; font-weight: 500; color: #111;}
.reservation-page .reservation-summary .reservation-summary-item .reservation-summary-value {font-size: 15px; color: #595959;}
.reservation-page .reservation-summary .reservation-total-row {display: flex; align-items: center; justify-content: space-between;}
.reservation-page .reservation-summary .reservation-total-row strong {font-size: 15px; font-weight: 500; color: #111;}
.reservation-page .reservation-summary .reservation-total-row span {font-size: 26px; font-weight: 700; color: #111827;}
.reservation-page .reservation-summary .reservation-submit-wrap .reservation-summary-note {font-size: 12px; color: #9CA3AF; text-align: center; margin-top: 10px;}
.reservation-calendar-modal {display: none; border-radius: 20px; box-shadow: 0 1px 10px 2px #ADADAD4D; position: absolute; top: calc(100% + 10px); right: 0; z-index: 9999; background-color: #fff; padding: 30px  20px;}
.reservation-calendar-modal .reservation-calendar-head {display: none; position: unset;}
.reservation-calendar-modal .flatpickr-calendar {border: 0; box-shadow: unset;}
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months {margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between;}
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-current-month {padding-top: 0;}
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-next-month {width: 34px; height: 34px; position: unset; background-color: #EEEEEE; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-size: 16px;}
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {display: none;}
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {background-image: url(../img/flatpickr-prev-month.svg);}
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-next-month {background-image: url(../img/flatpickr-next-month.svg);}
.reservation-calendar-modal .flatpickr-calendar .flatpickr-months .flatpickr-disabled {display: block; opacity: 0.5;}
.reservation-calendar-modal .reservation-calendar-bottom .reservation-calendar-selected {margin-top: 20px; text-align: center; font-size: 14px; color: #727272; margin-bottom: 10px;}
.reservation-calendar-modal .reservation-calendar-bottom .reservation-calendar-confirm {padding-block: 13px;}
.reservation-calendar-modal.open {display: block;}

/* 결제하기 페이지 */
.payment-page {background-color: #F7F7F7;}
.payment-page .inner {max-width: 748px;}
.payment-page .payment-wrap {display: flex; flex-direction: column; row-gap: 20px;}
.payment-page .payment-card {overflow: hidden; padding: 30px; border-radius: 16px; background-color: #fff;}
.payment-page .payment-shop-name {display: block; font-size: 20px; font-weight: 700; color: #353535;}
.payment-page .payment-shop-address {font-size: 16px; color: #727272; margin-top: 6px;}

.payment-page .payment-section {display: flex; flex-direction: column; row-gap: 10px;}
.payment-page .payment-section-title {font-size: 15px; font-weight: 500; color: #8E8E93;}

.payment-page .payment-info-card .payment-course-name {display: block; font-size: 15px; font-weight: 600; color: #636366; margin-bottom: 8px;}
.payment-page .payment-info-card .payment-reservation-meta {display: flex; align-items: center; column-gap: 4px;}
.payment-page .payment-info-card .payment-reservation-meta span {padding: 5px 10px; border-radius: 8px; background-color: #EEF4FF; color: #3478F6; font-size: 15px; font-weight: 400;}

.payment-page .payment-price-card {padding: 0;}
.payment-page .payment-price-card .payment-price-row {display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #F3F3F3;}
.payment-page .payment-price-card .payment-price-row span {font-size: 15px; color: #636366;}
.payment-page .payment-price-card .payment-price-row strong {font-size: 15px; color: #1C1C1E;}
.payment-page .payment-price-card .payment-price-row.discount strong {color: #FF3B30;}
.payment-page .payment-price-card .payment-price-row.total {border-bottom: 0;}
.payment-page .payment-price-card .payment-price-row.total span {font-weight: 500; color: #1C1C1E;}
.payment-page .payment-price-card .payment-price-row.total strong {font-size: 20px; font-weight: 500; color: #1C1C1E;}

.payment-page .payment-method-card {padding: 0;}
.payment-page .payment-method-card .payment-method-item {border-bottom: 1px solid #EDEDED;}
.payment-page .payment-method-card .payment-method-item label {width: 100%; max-height: none; padding: 14px 16px; border: 0; border-radius: 0; background-color: transparent; text-align: left; justify-content: flex-start; column-gap: 12px; color: #1C1C1E;}
.payment-page .payment-method-card .payment-method-item input[type="radio"]:checked + label {background-color: transparent; border-color: transparent; color: #111;}
.payment-page .payment-method-card .payment-method-item label::before {transition: border 0.2s; content: ""; flex-shrink: 0; width: 18px; height: 18px; border: 1px solid #C9CCD3; border-radius: 50%; background-color: #fff; box-sizing: border-box;}
.payment-page .payment-method-card .payment-method-item input[type="radio"]:checked + label::before {border: 6px solid #0B7CFF;}
.payment-page .payment-method-card .payment-method-item label .payment-method-text {display: flex; flex-direction: column; row-gap: 4px;}
.payment-page .payment-method-card .payment-method-item label strong {display: block; font-size: 15px; font-weight: 500; color: #1C1C1E;}
.payment-page .payment-method-card .payment-method-item label span {display: block; font-size: 15px; font-weight: 400; color: #8E8E93;}
.payment-page .payment-card-add-btn {display: flex; align-items: center; column-gap: 8px; width: 100%; padding: 14px 16px; font-size: 15px; font-weight: 400; color: #007AFF;}
.payment-page .payment-card-add-btn span {transition: background-color 0.2s; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: #F2F2F7;}
.payment-page .payment-card-add-btn span svg line {transition: stroke 0.2s;}

.payment-page .payment-user-card {padding: 0;}
.payment-page .payment-user-card .payment-user-row {display: flex; flex-direction: column; row-gap: 6px; padding: 14px 16px; border-bottom: 1px solid #F0F0F0;}
.payment-page .payment-user-card .payment-user-row:last-child {border-bottom: 0;}
.payment-page .payment-user-card .payment-user-row span {font-size: 13px; color: #9A9A9A;}
.payment-page .payment-user-card .payment-user-row strong {font-size: 15px; font-weight: 500; color: #111;}

.payment-page .payment-agree-card {padding: 0;}
.payment-page .payment-agree-card .payment-agree-item {padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F0F0F0;}
.payment-page .payment-agree-card .payment-agree-item:last-child {border-bottom: 0;}
.payment-page .payment-agree-card .payment-agree-item label {display: flex; align-items: center; flex: 1;}
.payment-page .payment-agree-card .payment-agree-item label p {display: flex; align-items: center; column-gap: 12px; font-size: 15px; color: #1C1C1E;}
.payment-page .payment-agree-card .payment-agree-item.all label p {font-weight: 500;}
.payment-page .payment-agree-card .payment-agree-item label p em {font-style: normal; font-size: 13px; color: #FF3B30;}
.payment-page .payment-agree-card .payment-agree-item label p em.optional {color: #8E8E93;}
.payment-page .payment-agree-card .payment-agree-more {flex: 1; display: flex; align-items: center; justify-content: space-between;}
.payment-page .payment-agree-card .payment-agree-more svg path {transition: fill 0.2s;}

.payment-page .payment-bottom-wrap {display: flex; flex-direction: column; row-gap: 10px;}
.payment-page .payment-safe-text {display: flex; align-items: center; justify-content: center; column-gap: 5px; font-size: 13px; color: #777;}
.payment-page .payment-safe-text span {width: 6px; height: 6px; border-radius: 50%; background-color: #2BCB6A;}

.payment-page .payment-submit-btn:disabled {background-color: #C8C8CF; border-color: #C8C8CF; color: #fff; cursor: default;}

/* 카드등록모달 */
.payment-card-modal {max-height: 90vh;}
.payment-card-modal .input-list {row-gap: 14px; max-height: calc(90vh - 240px); overflow-y: auto; padding: 5px; padding-bottom: 20px;}
.payment-card-modal .input-row input {width: calc(100% / 4 - 24px / 4);}
.payment-card-modal .round-btn.secondary-btn {column-gap: 4px; font-size: 14px; font-weight: 400;}
.payment-card-app-agree-box {display: none; margin-top: 28px;}
.payment-card-company-modal.has-selected .payment-card-app-agree-box {display: block;}
.payment-card-company-list {display: flex; gap: 10px; flex-wrap: wrap;}
.payment-card-company-btn {border: 2px solid transparent; width: calc(100% / 4 - 30px / 4);background-color: #f3f5f7; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; row-gap: 10px;}
.payment-card-company-btn .card-company-logo {overflow: hidden; width: 40px; height: 40px; border-radius: 50%; background-color: pink;}
.payment-card-company-btn .card-company-logo img {width: 100%; height: 100%; object-fit: cover;}
.payment-card-company-btn strong {font-size: 15px; font-weight: 500;}
.payment-card-company-btn.active {border: 2px solid #FF4D4F; background-color: #fff;}
.payment-card-app-agree-head {padding-top: 8px; padding-bottom: 20px;}
.payment-card-app-agree-head h5 {font-size: 18px; font-weight: 800; line-height: 1.35; color: #111; margin-bottom: 12px;}
.payment-card-app-agree-head h5 #selected_card_company {font-size: 18px; font-weight: 800; color: #FF4D4F;}
.payment-card-app-agree-head p {font-size: 14px; line-height: 1.5; color: #777;}
.payment-card-app-agree-accordion {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.payment-card-app-agree-row {width: 100%; height: 58px; border: 0; background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0; cursor: pointer;}
.payment-card-app-agree-row span {font-size: 15px; font-weight: 500; color: #111;}
.payment-card-app-agree-row em {font-size: 28px; font-style: normal; color: #777; transform: rotate(90deg); transition: transform .25s ease;}
.payment-card-app-agree-accordion.open .payment-card-app-agree-row em {transform: rotate(-90deg);}
.payment-card-app-agree-cont {max-height: 0; opacity: 0; overflow: hidden; padding: 0 0; transition: max-height .35s ease, opacity .25s ease, padding .25s ease;}
.payment-card-app-agree-accordion.open .payment-card-app-agree-cont {max-height: 300px; opacity: 1; padding: 12px 0 18px;}
.payment-card-app-agree-cont ul {display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; background-color: #F7F8FA;}
.payment-card-app-agree-cont li {display: flex; flex-direction: column; gap: 4px;}
.payment-card-app-agree-cont strong {font-size: 13px; font-weight: 700; color: #111;}
.payment-card-app-agree-cont p {font-size: 13px; line-height: 1.5; color: #666;}

@media (hover: hover) {
    .region-search .region-search-list .left li:hover {background-color: #fff;}
    .detail-page .detail-review-item .review-body .review-more:hover {text-decoration: underline;}
    .payment-page .payment-method-card .payment-method-item label:hover {box-shadow: unset;}
    .payment-page .payment-method-card .payment-method-item label:hover::before {border: 6px solid #aad6ff;}
    .payment-page .payment-card-add-btn:hover span {background-color: #EEF4FF;}
    .payment-page .payment-card-add-btn:hover span svg line {stroke: #3478F6;}
    .payment-page .payment-agree-card .payment-agree-more:hover svg path {fill: #C7C7CC;}
}
@media screen and (max-width: 1440px) {
    .detail-page .detail-top .detail-side {width: calc(40% - 24px);}
}
@media screen and (max-width: 1280px) {
    .detail-page .detail-top .detail-gallery {width: 50%;}
    .detail-page .detail-top .detail-side {width: calc(50% - 24px);}


}
@media screen and (max-width: 1024px) {
    .detail-page .detail-top .detail-gallery {width: 50%;}
    .detail-page .detail-top .detail-side {width: calc(50% - 24px);}
    .reservation-page .reservation-wrap {flex-direction: column; row-gap: 20px;}
    .reservation-page .reservation-content,
    .reservation-page .reservation-summary {width: 100%;}
    .reservation-page .reservation-summary {position: unset;}

    .detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item {flex-direction: column-reverse; row-gap: 10px; align-items: flex-start;}
    .detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .course-price-wrap {align-items: center; flex-direction: row-reverse; column-gap: 8px;}
}
@media screen and (max-width: 768px) {
    .sub-section {padding-block: 30px 120px;}
    .site-header {height: 69px;}
    .site-header .main-header {display: none;}
    .site-header .sub-header {display: flex; height: 100%;}
    .site-header .sub-header .back-btn {display: flex; align-items: center; column-gap: 8px; font-size: 17px; font-weight: 500; color: #111;}
    .site-header .sub-header .back-btn span {font-size: 17px; font-weight: 500; color: #111; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .site-header .sub-header:has(.icon-btn.region-btn) .back-btn {max-width: calc(100% - 50px);}
    .site-header .sub-header .sub-btn-wrap .icon-btn {display: none; border-radius: 50%; border-color: #D4D4D4; box-shadow: 0 1px 10px 2px #ADADAD4D;}
    .site-header .sub-header .sub-btn-wrap .square-btn.region-btn {display: none; column-gap: 5px; padding: 8px 10px; font-size: 16px; font-weight: 400; color: #2A2A2A; border: 1px solid #E4E4E4; background-color: #FDFDFD;}
    .site-header .sub-header .sub-btn-wrap .square-btn.region-btn img {width: 20px; height: 20px;}
    .sub-filter {padding-block: 18px;}
    /* 내주변 */
    .near-search {padding: 0;}
    .near-search .gt-search-form {max-width: calc(100% - 48px - 80px - 10px); position: fixed; top: 0; right: 24px; z-index: 10000; height: 69px; display: flex; align-items: center; justify-content: center;}
    .near-search .gt-search-form .gt-current-location {column-gap: 5px; width: 100%; padding: 12px 14px;}
    .near-search .gt-search-form .gt-current-location span:not(.icon) {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .reservation-list {background-color: #F7F7F7; padding-top: 46px; min-height: calc(100vh - 69px);}
    .reservation-list .reservation-tab-menu {position: fixed; top: 69px; left: 0; width: 100%; background-color: #fff; z-index: 99;}
    .reservation-list .reservation-card-list {padding-top: 20px;}
    .reservation-detail {padding-top: 20px;}
    .reservation-detail .detail-card .detail-card-title {font-size: 12px;}
    .reservation-detail .detail-card .detail-info-row .detail-info-label {font-size: 14px;}
    .reservation-detail .detail-card .detail-info-row .detail-info-value {font-size: 15px;}
    .reservation-detail .detail-shop-card .shop-info-box .shop-body .shop-name {font-size: 16px;}
    .reservation-detail .detail-shop-card .shop-info-box .shop-body .shop-course {font-size: 15px;}
    .reservation-detail .btn-wrap {background-color: #F2F2F7; border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: 0; padding: 16px 24px; z-index: 9999; position: fixed; bottom: 0; left: 0; width: 100%;}
    .detail-header {display: block;}
    .detail-header .sub-header .sub-btn-wrap .icon-btn {display: flex;}
    .detail-header {background-color: transparent; border-bottom: 0;}
    .detail-header .icon-btn {background-color: #fff; box-shadow: unset !important; border-color: #D4D4D4; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
    .main-container:has(.detail-page) {padding-top: 0;}
    .detail-page {padding-top: 0;}
    .detail-page .inner {width: 100%;}
    .detail-page .detail-breadcrumb {display: none;}
    .detail-page .detail-top {flex-direction: column;}
    .detail-page .detail-top .detail-gallery,
    .detail-page .detail-top .detail-side {width: 100%;}
    .detail-page .detail-top .detail-gallery-main {aspect-ratio: 748 / 500; height: auto;}
    .detail-page .detail-top .detail-side {padding: 30px 24px; position: relative;}
    .detail-page .detail-top .detail-side .detail-title {max-width: calc(100% - 100px); line-height: 34px; font-size: 22px; margin-bottom: 6px; padding-top: 60px; max-width: unset;}
    .detail-page .detail-top .detail-side .detail-summary {position: absolute; top: 90px; right: 24px; height: 34px;}
    .detail-page .detail-top .detail-side .detail-summary .detail-summary-item:not(:first-child) {display: none;}
    .detail-page .detail-top .detail-side .detail-status-row {margin-top: 0; margin-bottom: 0; position: absolute; top: 30px; left: 24px;}
    .detail-page .detail-top .detail-side .detail-address-row {margin-top: 30px;}
    .detail-page .detail-top .detail-side .detail-address-row .detail-address-content,
    .detail-page .detail-top .detail-side .detail-address-row .detail-address-content .detail-address-text {align-items: flex-start; flex-direction: column; row-gap: 6px;}
    .detail-page .detail-top .detail-side .detail-address-row .detail-address-content .detail-address-text p {max-width: 100%;}
    .detail-page .detail-top .detail-side .btn-list { z-index: 9999; position: fixed; bottom: 0; left: 0; width: 100%; margin-top: 0; flex-direction: row; column-gap: 9px; padding: 16px 24px; background-color: #fff; border-top: 1px solid #F0F0F0;}
    .detail-page .detail-top .detail-side .btn-list .square-btn {padding-inline: 14px; height: 47px;}
    .detail-page .detail-tab-wrap {margin-top: 0;}
    .detail-page .detail-tab-content .detail-tab-panel .detail-box {padding: 18px 24px;}
    .detail-page .detail-review-item {padding: 20px 24px;}
    .detail-page .detail-top .distance-label {display: flex;}
    .detail-page .detail-top .detail-gallery-count .detail-gallery-nav svg {height: 13px;}
    .detail-page .detail-top .detail-gallery-count .swiper-button-disabled {display: none;}
    .detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item {width: 100%;}
      
    .review-gallery-viewer {background-color: #fff;}
    .review-gallery-viewer__header.pc,
    .review-gallery-viewer__nav {display: none;}
    .review-gallery-viewer__header.mo {display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 69px; border-bottom: 1px solid #EEEEEE; background-color: #fff; padding-block: 14px;}
    .review-gallery-viewer__header.mo .inner {}
    .review-gallery-viewer__header.mo .review-gallery-viewer__back {display: flex; align-items: center; column-gap: 8px; font-size: 17px; font-weight: 500; color: #111;}
    .review-gallery-viewer__header.mo .review-gallery-viewer__title {flex: none; font-size: 16px; font-weight: 500; color: #000;}
    .review-gallery-viewer__container {width: 100% !important; height: calc(100% - 62px); max-height: unset; top: 62px; left: 0; transform: none; display: block;}
    .review-gallery-viewer__stage {width: 100%; max-width: none; height: 100%; aspect-ratio: auto;}
    .review-gallery-swiper {width: 100%; height: 100%;}
    .review-gallery-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: contain;}
    .review-gallery-viewer__count.mo-count {display: flex; position: absolute; right: 24px; bottom: 16px; z-index: 5; height: 35px; padding: 8px 20px; border-radius: 999px; background-color: rgba(0,0,0,.5); color: #fff;}

    .review-write-page .review-submit-wrap {z-index: 9999; padding: 16px 24px; background-color: #fff; border-top: 1px solid #E5E5EA; position: fixed; bottom: 0; left: 0; width: 100%;}
    .review-write-page .review-photo-swiper .swiper-slide,
    .review-write-page .review-photo-box {width: 68px; height: 68px;}

    .reservation-page {padding-block: 0 104px;}
    .reservation-page > .inner {width: 100%;}
    .reservation-page .reservation-summary, .reservation-page .reservation-card {border-radius: 0; padding: 20px 24px; border: 0;}
    .reservation-submit-wrap {padding: 10px 24px; background-color: #fff; border-top: 1px solid #F0F0F0; z-index: 9999; position: fixed; bottom: 0; left: 0; width: 100%;}
    html:has(.reservation-calendar-modal.open) {overflow-y: hidden;}
    .reservation-calendar-modal {transition: left 0.3s; display: block; border-radius: 0; padding: 0; z-index: 99999; width: 100%; height: 100%; position: fixed; top: 0; left: -100vw;}
    .reservation-calendar-modal.open {left: 0;}
    .reservation-calendar-modal .reservation-calendar-head {display: flex;}
    .reservation-calendar-modal .reservation-calendar-body {height: calc(100vh - 69px - 104px); padding: 30px max(20px,5vw); overflow-y: auto;}
    .reservation-calendar-modal .flatpickr-calendar .flatpickr-months {margin-bottom: 20px;}
    .reservation-calendar-modal .reservation-calendar-bottom {padding: 10px 24px; background-color: #fff; border-top: 1px solid #F0F0F0; width: 100%;}
    .reservation-calendar-modal .reservation-calendar-bottom .reservation-calendar-selected {margin-top: 0;}
    
    .payment-page {padding-bottom: 140px;}
    .payment-page .payment-bottom-wrap {padding: 16px 24px; background-color: #fff; border-top: 1px solid #fff; z-index: 9999; position: fixed; bottom: 0; left: 0; width: 100%;}

    .payment-card-modal input {padding: 10px;}
    .payment-card-company-btn {width: calc(100% / 3 - 20px / 3);}
}

@media screen and (max-width: 480px) {
    .region-search {height: calc(100vh - 80px);}
    .near-search .gt-search-form {max-width: calc(100% - 32px - 80px - 10px); right: 16px;}
    .reservation-detail .btn-wrap {padding: 14px 16px;}
    .detail-page .detail-top .detail-side {padding: 30px 16px;}
    .detail-page .detail-top .detail-side .btn-list {padding: 10px 16px;}
    .detail-page .detail-top .detail-side .detail-summary {right: 16px;}
    .detail-page .detail-tab-content .detail-tab-panel .detail-box {padding: 18px 16px;}
    .detail-page .detail-review-item {padding: 16px;}
    .detail-page .detail-top .detail-gallery-main {aspect-ratio: 393 / 320;}
    .detail-page .map-wrap {aspect-ratio: 1/1;}
    .review-write-page .review-submit-wrap {padding: 16px;}
    .reservation-page {padding-block: 0 77px;}
    .reservation-page .reservation-summary, .reservation-page .reservation-card {padding: 20px 16px;}
    .reservation-submit-wrap {padding: 10px 16px;}
    /* .reservation-page .reservation-summary {display: none;} */
    .reservation-page .reservation-summary .reservation-submit-wrap .reservation-summary-note {display: none;}
    .payment-page .payment-bottom-wrap {padding: 10px 16px;}
    .detail-page .detail-review-item .review-thumb-list .review-thumb {width: 15vw; height: 15vw;}

    .near-search .gt-search-form .gt-current-location {max-width: calc(100vw - 150px - 32px); padding: 8px 10px;}

    .detail-page .detail-top .detail-side .detail-status-row {right: unset; left: 16px;}
}

@media screen and (max-width: 400px) {
    /* .detail-page .detail-top .detail-side .detail-title {max-width: 100%; line-height: 1.2; padding-top: 100px;} */
    .detail-page .detail-top .detail-side .detail-address-row {margin-top: 20px;}
}

@media screen and (max-width: 375px) {
    .near-search .gt-search-form .gt-current-location {max-width: 45vw;}
    /* .detail-page .detail-top .detail-side .detail-status-row {flex-direction: column; row-gap: 10px;align-items: flex-start;} */
}

@media screen and (max-width: 350px) {
    .region-search .region-search-list .left {width: 90px;}
    .region-search .region-search-list .right {width: calc(100% - 90px);}
    .region-search .region-search-list .right .region-gu-list li .square-btn {padding: 6px 0;}
    .reservation-list .reservation-tab-menu a {padding: 10px 6px; column-gap: 2px;}
    .detail-page .detail-tab-content .detail-course-box .course-list .detail-course-item .detail-course-left .course-tit {flex-direction: column; row-gap: 5px; align-items: flex-start;}
    .detail-page .detail-top .detail-side .btn-list .square-btn.call-btn {font-size: 0; width: 47px; min-width: 47px; padding: 0; position: relative;}
    .detail-page .detail-top .detail-side .btn-list .square-btn.call-btn svg {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
}


/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */