/* ===========================
   book.css — 예약 페이지 (pc/book/)
   step01.jsp, step02.jsp, step03.jsp
   =========================== */


/* ========================================
   STEP 01 — 검색 조회 영역
   ======================================== */

/* 검색 영역 전체 컨테이너 */
.search_container {
	display: flex;
	gap: 40px;
	padding: 20px 0;
	max-width: 1200px;
	margin: 0 auto;
	background-color: var(--gray-0);
}

/* 좌측 필터 영역 */
.filter_section {
	width: 288px;
	min-width: 288px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 지도 보기 버튼 */
.map_view_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 36px;
	background-color: var(--gray-5);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-95);
	transition: background-color 0.2s;
}

.map_view_btn:hover {
	background-color: var(--gray-10);
}

.map_view_btn svg {
	width: 16px;
	height: 16px;
}

/* 필터 박스 */
.filter_box {

}

.filter_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}

.filter_title {
	font-size: var(--body-large);
	font-weight: 700;
	color: var(--gray-95);
}

.filter_reset {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-50);
}

.filter_reset:hover {
	color: var(--gray-60);
}

/* 필터 그룹 */
.filter_group {
	margin-bottom: 20px;
	border-bottom: 1px solid var(--gray-10);
	padding-bottom: 20px;
}

.filter_group:last-child {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}

.filter_group_title {
	font-size: var(--body-xsmall);
	font-weight: 700;
	color: var(--gray-95);
	margin-bottom: 10px;
}

/* 체크박스 스타일 */
.filter_options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.filter_option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.filter_option input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-md);
	background-color: var(--gray-0);
	cursor: pointer;
	margin: 0;
	position: relative;
	transition: all 0.2s;
}

.filter_option input[type="checkbox"]:hover {
	border-color: var(--main);
}

.filter_option input[type="checkbox"]:checked {
	background-color: var(--main);
	border-color: var(--main);
}

.filter_option input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10.28 2.28a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06L4.5 7.44l4.97-4.97a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* 기존 checkbox-custom span 숨김 처리 */
.filter_option .checkbox-custom {
	display: none;
}

.filter_option_label {
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-95);
	cursor: pointer;
}

/* 가격 범위 슬라이더 */
.price_range_container {
	padding: 8px 0;
}

.price_inputs {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 23px;
}

.price_input_group {
	/* flex: 1; */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
}

.price_input_label {
	font-size: 12px;
	font-weight: 400;
	color: var(--gray-50);
}

.price_input_wrapper {
	display: flex;
	align-items: center;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
	padding: 6px 6px;
	background-color: var(--gray-0);
}

.price_input {
	flex: 1;
	border: none;
	outline: none;
	font-size: var(--body-xsmall);
	font-weight: 700;
	color: var(--gray-95);
	width: 70px;
	text-align: right;
}

.price_separator {
	font-size: var(--body-xsmall);
	color: var(--gray-50);
}

.price_currency {
	font-size: 11px;
	font-weight: 400;
	color: var(--gray-50);
	margin-left: 4px;
}

/* 듀얼 레인지 슬라이더 */
.range_slider_container {
	position: relative;
}

.range_slider_track {
	position: absolute;
	width: 100%;
	height: 4px;
	background-color: var(--gray-10);
	border-radius: var(--radius-sm);
	top: 50%;
	transform: translateY(-50%);
}

.range_slider_progress {
	position: absolute;
	height: 4px;
	background-color: var(--main);
	border-radius: var(--radius-sm);
	top: 50%;
	transform: translateY(-50%);
}

.range_slider {
	position: absolute;
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	top: 50%;
	transform: translateY(-50%);
}

.range_slider::-webkit-slider-thumb {
	pointer-events: all;
	width: 20px;
	height: 20px;
	background-color: var(--gray-0);
	border: 1px solid var(--main);
	border-radius: 50%;
	cursor: pointer;
	-webkit-appearance: none;
}

.range_slider::-moz-range-thumb {
	pointer-events: all;
	width: 20px;
	height: 20px;
	background-color: var(--gray-0);
	border: 1px solid var(--main);
	border-radius: 50%;
	cursor: pointer;
}

#rangeMin::-webkit-slider-thumb {
	border-color: var(--gray-10);
	background-color: var(--gray-0);
}

#rangeMin.at-zero::-webkit-slider-thumb {
	transform: translateX(-10px);
}

#rangeMin::-moz-range-thumb {
	border-color: var(--gray-10);
}

#rangeMin.at-zero::-moz-range-thumb {
	transform: translateX(-10px);
}

#rangeMax::-webkit-slider-thumb {
	border-color: var(--gray-10);
	background-color: var(--gray-0);
	transform: scale(1.1);
}

#rangeMax::-moz-range-thumb {
	border-color: var(--gray-10);
}

/* 태그형 필터 옵션 */
.filter_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filter_tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 16px;
	border: 1px solid var(--gray-10);
	border-radius: 1000px;
	background-color: var(--gray-0);
	cursor: pointer;
	transition: all 0.2s;
}

.filter_tag input[type="checkbox"] {
	display: none;
}

.filter_tag_label {
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-95);
}

.filter_tag.active,
.filter_tag:has(input:checked) {
	background-color: var(--main-hover-light);
	border-color: var(--main);
}

.filter_tag.active .filter_tag_label,
.filter_tag:has(input:checked) .filter_tag_label {
	color: var(--main);
	font-weight: 500;
}

/* 우측 결과 영역 */
.result_section {
	flex: 1;
	min-width: 0;
}

/* 결과 헤더 */
.result_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.result_count {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.result_count_label {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
}

.result_count_number {
	font-size: var(--body-small);
	font-weight: 700;
	color: var(--gray-95);
}

/* 커스텀 정렬 드롭다운 */
.sort_select_wrapper {
	position: relative;
}

.sort_trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
}

.sort_trigger_arrow {
	width: 12px;
	height: 12px;
	color: var(--gray-60);
	transition: transform 0.2s ease;
}

.sort_trigger.is_open .sort_trigger_arrow {
	transform: rotate(180deg);
}

.sort_dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 140px;
	background: #fff;
	border-radius: 8px;
	padding: 8px 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.sort_dropdown.is_open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sort_option {
	padding: 10px 16px;
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-60);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sort_option:hover {
	background-color: #F4F5F6;
	color: var(--gray-80);
}

.sort_option.active {
	color: var(--gray-80);
	font-weight: 600;
}

/* 숙소 카드 리스트 (1열 가로형) */
.accommodation_grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 숙소 없음 안내 */
.hotel_empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 0;
	text-align: center;
}
.hotel_empty__icon {
	margin-bottom: 16px;
	color: var(--gray-20);
}
.hotel_empty__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--gray-95);
	line-height: 1.5;
	margin: 0 0 8px 0;
}
.hotel_empty__desc {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-40);
	line-height: 1.6;
	margin: 0;
}

/* 숙소 카드 (가로형) */
.accommodation_card {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--gray-0);
	gap: 20px;
	border-bottom: 1px solid var(--gray-10);
	padding-bottom: 20px;
	position: relative;
}

.accommodation_card:last-child {
	border-bottom: none;
}

/* 카드 이미지 */
.card_image_wrapper {
	position: relative;
	width: 340px;
	min-width: 288px;
	height: 200px;
	background-color: var(--gray-5);
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.card_image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 2px 6px;
	background-color: var(--gray-95);
	border-radius: var(--radius-md);
	font-size: 11px;
	font-weight: 700;
	color: var(--gray-0);
}

/* 카드 콘텐츠 */
.card_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card_type {
	font-size: 11px;
	font-weight: 400;
	color: var(--gray-50);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card_title {
	font-size: var(--body-medium);
	font-weight: 700;
	color: var(--gray-95);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card_location {
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-50);
}

.card_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px;
}

.card_tag {
	padding: 2px 6px;
	background-color: var(--main-surface);
	border-radius: var(--radius-md);
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--main);
}

.card_rating_price {
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-top: 8px;
	padding-bottom: 5px;
}

.card_rating {
	display: flex;
	align-items: center;
	gap: 4px;
}

.rating_star {
	color: #FFA64C;
	font-size: var(--body-xsmall);
}

.rating_score {
	font-size: var(--body-xsmall);
	font-weight: 700;
	color: var(--gray-95);
}

.rating_count {
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-50);
}

.card_price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.price_original {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}

.price_discount_rate {
	font-size: var(--body-small);
	font-weight: 700;
	color: var(--main);
}

.price_before {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-40);
	text-decoration: line-through;
}

.price_current {
	display: flex;
	align-items: baseline;
	gap: 2px;
}

.price_currency_label {
	font-size: var(--body-medium);
	font-weight: 400;
	color: var(--gray-95);
}

.price_amount {
	font-size: var(--heading-medium);
	font-weight: 700;
	color: var(--gray-95);
	letter-spacing: -0.4px;
}

.sold_out_btn {
	min-width: 140px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray-20);
	color: var(--gray-0);
	border: none;
	border-radius: var(--radius-lg);
	font-size: var(--body-small);
	font-weight: 600;
	cursor: not-allowed;
}

/* step01 반응형 */
@media screen and (max-width: 1500px) {
	.search_container {
		max-width: 1200px;
		padding: 20px;
	}
}

@media screen and (max-width: 1200px) {
	.search_container {
		flex-direction: column;
	}

	.filter_section {
		width: 100%;
	}

	.filter_box {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.filter_group {
		flex: 1;
		min-width: 200px;
		margin-bottom: 0;
	}

	/* 카드 2열로 변경 */
	.accommodation_grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.accommodation_card {
		flex-direction: column;
	}

	.card_image_wrapper {
		width: 100%;
		min-width: auto;
		height: 180px;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}

	.card_content {
		padding: 12px;
	}
}


/* ========================================
   STEP 02 — 예약 정보 입력
   ======================================== */

/* 페이지 컨테이너 */
.booking_container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 38px 0 40px;
}

/* 페이지 헤더 */
.booking_header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
}

.booking_header__back {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.booking_header__back svg {
	width: 24px;
	height: 24px;
	fill: var(--gray-95);
}

.booking_header__title {
	font-size: var(--heading-medium);
	font-weight: 700;
	color: var(--gray-95);
	margin: 0;
}

/* 메인 레이아웃 */
.booking_layout {
	display: flex;
	gap: 40px;
}

.booking_main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.booking_sidebar {
	width: 360px;
	flex-shrink: 0;
	position: sticky;
	top: 100px;
	align-self: flex-start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

/* 섹션 카드 */
.booking_section {
	background: var(--gray-0);
	padding: 20px 0;
}

.booking_section__title {
	font-size: var(--body-large);
	font-weight: 700;
	color: var(--gray-95);
	margin: 0 0 16px 0;
}

/* 폼 그룹 */
.form_group {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* 폼 행 - 라벨 + 입력필드 가로 배치 */
.form_row {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.form_row--vertical {
	flex-direction: column;
	gap: 4px;
}

.form_label {
	width: 120px;
	flex-shrink: 0;
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	line-height: 55px;
}

.form_label--vertical {
	width: auto;
	line-height: 1.5;
	margin-bottom: 4px;
}

.form_field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.form_input {
	width: 100%;
	height: 55px;
	padding: 16px 20px;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
	font-size: var(--body-medium);
	font-weight: 400;
	color: var(--gray-95);
	background: var(--gray-0);
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s;
}

.form_input:focus {
	border-color: var(--main);
}

.form_input::placeholder {
	color: #a9b0b8;
}

.form_hint {
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-50);
	margin-top: 4px;
}

.form_textarea {
	width: 100%;
	min-height: 190px;
	padding: 16px 20px;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
	font-size: var(--body-medium);
	font-weight: 400;
	color: var(--gray-95);
	background: var(--gray-0);
	box-sizing: border-box;
	outline: none;
	resize: none;
	font-family: inherit;
	line-height: 1.5;
}

.form_textarea:focus {
	border-color: var(--main);
}

.form_textarea::placeholder {
	color: #a9b0b8;
}

/* 이메일 입력 그룹 */
.email_group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.email_group .form_input {
	flex: 1;
}

.email_group__at {
	font-size: var(--body-medium);
	color: var(--gray-50);
}

.email_group select {
	height: 55px;
	padding: 0 16px;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
	font-size: var(--body-small);
	color: var(--gray-60);
	background: var(--gray-0);
	outline: none;
	cursor: pointer;
}

/* 구분선 */
.divider {
	height: 1px;
	background: var(--gray-10);
	margin: 16px 0;
}

/* 섹션 헤더 */
.booking_section__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.booking_section__header .booking_section__title {
	margin: 0;
}

/* 투숙객 정보 - 예약자 정보와 동일 버튼 */
.guest_same_check {
	display: flex;
	align-items: center;
	gap: 2px;
}

.guest_same_check input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 17px;
	height: 17px;
	border: 1px solid var(--gray-10);
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	position: relative;
}

.guest_same_check input[type="checkbox"]:checked {
	background: var(--main);
	border-color: var(--main);
}

.guest_same_check input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.guest_same_check label {
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-95);
	cursor: pointer;
}

/* 결제 수단 선택 */
.payment_methods {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.payment_method_btn {
	flex: 0 0 calc(25% - 6px);
	max-width: calc(25% - 6px);
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
	background: var(--gray-0);
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-60);
	cursor: pointer;
	transition: all 0.2s;
	box-sizing: border-box;
}

.payment_method_btn:hover {
	border-color: var(--main);
	color: var(--main);
}

.payment_method_btn.active {
	border-color: var(--main);
	background: var(--main);
	color: var(--gray-0);
	font-weight: 600;
}

.payment_empty {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
}

.payment_empty__text {
	margin: 12px 0 0;
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-40);
	text-align: center;
	line-height: 1.6;
}

/* 사이드바 - 예약 정보 */
.sidebar_card {
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-xl);
	overflow: hidden;
	margin-bottom: 20px;
}
.sidebar_card--vip {
	border: 1px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #c2a672, #917a4d 40%, #ab8f5c 70%, #c2a672);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.sidebar_card__vip_crown {
	width: 20px;
	height: 20px;
	fill: url(#vipGold);
	vertical-align: middle;
	margin-top: -2px;
	margin-right: 4px;
}
.sidebar_card--vip .sidebar_price_row__value {
	color: #ab8f5c;
}
.sidebar_terms.sidebar_terms--vip input[type="checkbox"]:checked {
	background: #ab8f5c;
	border-color: #ab8f5c;
}
.guest_same_check.guest_same_check--vip input[type="checkbox"]:checked {
	background: #ab8f5c;
	border-color: #ab8f5c;
}
.submit_btn.submit_btn--vip {
	background: linear-gradient(135deg, #bd9c5f 0%, #ab8c4e 40%);
}
.submit_btn.submit_btn--vip:hover {
	background: linear-gradient(135deg, #bb9a5c 0%, #a7884b 40%);
}

.sidebar_card__header {
	padding: 20px 20px 0 20px;
}

.sidebar_card__hotel_name {
	font-size: var(--body-large);
	font-weight: 700;
	color: var(--gray-95);
	margin: 0;
}

.sidebar_card__content {
	padding: 20px 20px 10px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sidebar_info_row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.sidebar_info_row__label {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-50);
}

.sidebar_info_row__value {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	text-align: right;
}

.sidebar_card__divider {
	height: 1px;
	background: var(--gray-10);
	margin: 8px 0;
}

.sidebar_card__price_section {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sidebar_price_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sidebar_price_row__label {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-50);
}

.sidebar_price_row__value {
	font-size: var(--body-large);
	font-weight: 600;
	color: var(--main);
	letter-spacing: -0.4px;
}

.sidebar_card__policy {
	padding: 15px 20px;
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--accent);
	text-align: right;
	cursor: pointer;
}

/* 마일리지 사용 */
.sidebar_info_row--mileage {
	align-items: center;
	gap: 8px;
}
.sidebar_info_row--mileage .sidebar_mileage_input__row {
	display: flex;
	gap: 6px;
	align-items: center;
	flex: 1;
	min-width: 0;
	justify-content: flex-end;
}
.sidebar_mileage_detail {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--gray-5);
	border-radius: var(--radius-md);
	padding: 10px 12px;
}
.sidebar_mileage_input__row .form_input--small {
	width: 65%;
	height: 36px;
	padding: 6px 10px;
	font-size: var(--body-small);
	border-radius: var(--radius-md);
	text-align: right;
}
.sidebar_mileage_input__row .form_input--small::-webkit-inner-spin-button,
.sidebar_mileage_input__row .form_input--small::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.btn_mileage_apply {
	flex-shrink: 0;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--main-surface);
	border-radius: var(--radius-md);
	background: var(--main-surface);
	color: var(--main);
	font-size: var(--body-small);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.btn_mileage_apply:hover {background-color: var(--main-hover-light);}

.sidebar_mileage_useall {
	display: flex;
	align-items: center;
	gap: 2px;
	cursor: pointer;
	font-size: var(--body-xsmall);
	color: var(--gray-50);
}
.sidebar_mileage_useall input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 17px;
	height: 17px;
	border: 1px solid var(--gray-10);
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.sidebar_mileage_useall input[type="checkbox"]:checked {
	background: var(--main);
	border-color: var(--main);
}
.sidebar_mileage_useall input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.sidebar_mileage_info {
	font-size: var(--body-xsmall);
	color: var(--gray-40);
}
.sidebar_mileage_info strong {
	color: var(--gray-60);
}
.sidebar_mileage_msg {
	font-size: var(--body-xsmall);
	line-height: 1.4;
}

/* 부가상품(패키지) 카드 */
.package_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.package_item {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	padding: 15px;
	border: 1px solid var(--gray-15, #e5e7eb);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.package_item:hover { border-color: var(--gray-30, #c0c5cd); }
.package_item--required { border-color: var(--accent); cursor: default; }
.package_item--required:hover { border-color: var(--accent); }
.package_item--required input[type="checkbox"] { display: none; }
.package_required_badge {
	flex: 0 0 auto;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 500;
	color: var(--accent);
	background: var(--accent-surface);
	border-radius: 3px;
	margin-top: -1px;
}
.package_item input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin-top: 2px;
	border: 1px solid var(--gray-10);
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.package_item input[type="checkbox"]:checked {
	background: var(--main);
	border-color: var(--main);
}
.package_item input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.package_item__info { flex: 1 1 auto; min-width: 0; }
.package_item__name {font-size: var(--body-small);font-weight: 500;color: var(--gray-95);padding-top: 1px;}
.package_item__desc {margin-top: 5px;font-size: var(--body-xsmall);color: var(--gray-60);line-height: 1.5;white-space: pre-line;}
.package_item__price {flex: 0 0 auto;font-size: var(--body-small);font-weight: 500;color: var(--gray-95);white-space: nowrap;margin-left: 5px;}
.package_free { color: var(--green-60, #16a34a); }
.sidebar_pkg_row .sidebar_info_row__value { color: var(--gray-80, #2f343c); }

/* 이용약관 동의 */
.terms-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.terms_all_check {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.terms_all_check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--main);
}

.terms_all_check span {
	font-size: var(--body-medium);
	font-weight: 600;
	color: var(--gray-95);
}

.terms_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
}

.terms_item__check {
	display: flex;
	align-items: center;
	gap: 8px;
}

.terms_item__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--main);
}

.terms_item__check label {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	cursor: pointer;
}

.terms_item__toggle {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	transition: transform 0.2s;
}

.terms_item__toggle svg {
	width: 16px;
	height: 16px;
	fill: #a9b0b8;
}

.terms_item__toggle.open {
	transform: rotate(180deg);
}

.terms_item__content {
	display: none;
	padding: 16px;
	background: #f9fafb;
	border-radius: var(--radius-lg);
	font-size: var(--body-xsmall);
	color: var(--gray-60);
	line-height: 1.6;
	max-height: 200px;
	overflow-y: auto;
}

.terms_item__content.open {
	display: block;
}

/* 사이드바 약관 동의 */
.sidebar_terms {
	padding: 20px;
}

.sidebar_terms .terms_item {
	padding: 6px 0;
}

.sidebar_terms .terms_item__check label span {
	text-decoration: underline;
}

.sidebar_terms input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 17px;
	height: 17px;
	border: 1px solid var(--gray-10);
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	flex-shrink: 0;
}

.sidebar_terms input[type="checkbox"]:checked {
	background: var(--main);
	border-color: var(--main);
}

.sidebar_terms input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 1px;
	left: 4px;
	width: 5px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* 사이드바 푸터 */
.sidebar_card__footer {
	padding: 20px;
	padding-top: 0;
}

/* 결제 버튼 */
.submit_btn {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--main);
	color: var(--gray-0);
	border: none;
	border-radius: var(--radius-lg);
	font-size: var(--body-medium);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s;
}

.submit_btn:hover {
	background: var(--main-hover);
}
.submit_btn:disabled {
	background: #ccc;
	cursor: not-allowed;
}

/* step02 반응형 */
@media screen and (max-width: 1240px) {
	.booking_container {
		padding: 38px 20px 40px;
	}
}

@media screen and (max-width: 900px) {
	.booking_layout {
		flex-direction: column;
	}

	.booking_sidebar {
		width: 100%;
		order: -1;
		position: static;
	}
}

/* step02 모바일: .contents가 좌우 16px padding을 이미 제공하므로 내부 여백 제거 */
@media screen and (max-width: 768px) {
	.booking_container {
		padding: 0;
	}
	.booking_header {
		margin-bottom: 20px;
	}
	.booking_section {
		padding: 16px 0;
	}
	.sidebar_card {
		border: none;
		border-radius: 0;
	}
	.sidebar_card__header {
		padding: 0;
	}
	.sidebar_card__content {
		padding: 16px 0 8px;
	}
	.sidebar_card__price_section {
		padding: 0;
	}
	.sidebar_card__policy {
		padding: 12px 0;
	}
	.sidebar_terms {
		padding: 0;
	}
	.sidebar_card__footer {
		padding: 0;
	}
}

/* step02 기존 스타일 숨김 */
.contents_sub,
.n_reser_topbox,
.n_reser_stepbox,
.reser_info_flex_row_box,
.reser_info_flex_left,
.right_reser_infobox {
	display: none !important;
}


/* ========================================
   STEP 03 — 예약 완료
   ======================================== */

/* 페이지 컨테이너 */
.complete_container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 0 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 완료 아이콘 */
.complete_icon {
	width: 48px;
	height: 48px;
	border-radius: 34.5px;
	background: var(--main);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	margin-bottom: 16px;
}

.complete_icon svg {
	width: 32px;
	height: 32px;
	fill: var(--gray-0);
}

/* 완료 메시지 */
.complete_text_section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-bottom: 25px;
}

.complete_title {
	font-size: var(--heading-medium);
	font-weight: 700;
	color: var(--gray-95);
	margin: 0;
	text-align: center;
	line-height: 1.4;
}

.complete_desc {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-50);
	margin: 0;
	text-align: center;
	line-height: 1.5;
}

/* 예약 정보 카드 */
.booking_card {
	width: 100%;
	max-width: 420px;
	background: var(--gray-0);
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-xl);
	overflow: hidden;
	margin-bottom: 15px;
}

.booking_card__content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.booking_info_row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.booking_info_row__label {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-50);
	flex-shrink: 0;
}

.booking_info_row__value {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	text-align: right;
}


.booking_card__divider {
	height: 1px;
	background: var(--gray-10);
	margin: 8px 0;
}

/* 결제 금액 강조 */
.booking_card__price-section {
	padding: 20px 24px;
	background: #f9fafb;
}



/* 버튼 그룹 */
.button_group {
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: 360px;
}

.btn {
	flex: 1;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	font-size: var(--body-medium);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
}

.btn--outline {
	background: var(--gray-5);
	border: 1px solid var(--gray-5);
	color: var(--gray-70);
}

.btn--primary {
	background: var(--main);
	color: var(--gray-0);
}

.btn--primary:hover {
	background: var(--main-hover);
}

/* step03 반응형 */
@media screen and (max-width: 540px) {
	.complete_container {
		padding: 60px 20px 80px;
	}

	.booking_card {
		max-width: 100%;
	}

	.button_group {
		max-width: 100%;
		flex-direction: column;
	}
}

/* step03 기존 스타일 숨김 */
.complete_content {
	display: none !important;
}

/* ===== 쿠폰 사이드바 (step02) ===== */
.sidebar_info_row--coupon { flex-wrap: wrap; }
.sidebar_coupon_input__row {
	display: flex; gap: 8px; width: 100%; margin-top: 6px;
}
.sidebar_coupon_input__row #couponSelect {
	flex: 1; min-width: 0;
	height: 34px; padding: 4px 8px; font-size: 13px;
	border: 1px solid #d0d5db; border-radius: 4px; background: #fff;
}
.btn_coupon_apply {
	flex-shrink: 0; height: 34px; padding: 0 14px;
	border: 0; border-radius: 4px; background: #1a73e8; color: #fff;
	font-size: 13px; cursor: pointer;
}
.btn_coupon_apply:hover { background: #1665c1; }
.sidebar_info_row--coupon-applied { padding-top: 4px; }
.sidebar_info_row--coupon-applied .sidebar_info_row__value--discount { display: flex; align-items: center; gap: 8px; }
.btn_coupon_clear {
	height: 22px; padding: 0 8px;
	border: 1px solid #d0d5db; border-radius: 3px; background: #fff;
	font-size: 11px; color: #666; cursor: pointer;
}
.btn_coupon_clear:hover { background: #f5f7fa; }
.sidebar_coupon_detail { width: 100%; padding: 4px 0 8px; }
.discount_msg { display: block; font-size: 13px; margin-top: 4px; }
.sidebar_mileage_disabled { opacity: 0.45; pointer-events: none; }

/* ===== 마일리지/쿠폰 booking_section (step02) ===== */
.discount_control_row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.discount_input_wrap {
	flex: 1;
	width: auto;
	display: flex;
	align-items: center;
	padding: 0 20px;
}
.discount_input_wrap:focus-within { border-color: var(--main); }

.discount_input {
	flex: 1;
	border: none;
	outline: none;
	font-size: var(--body-medium);
	color: var(--gray-95);
	background: transparent;
	height: 100%;
	padding: 0;
}
.discount_input::placeholder { color: #a9b0b8; }

.discount_input__suffix {
	font-size: var(--body-medium);
	color: var(--gray-50);
	margin-left: 4px;
}

.discount_apply_btn {
	flex-shrink: 0;
	height: 55px;
	padding: 0 24px;
	border: none;
	border-radius: var(--radius-lg);
	background: var(--main-surface);
	color: var(--main);
	font-size: var(--body-medium);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.discount_apply_btn:hover { background: var(--main-hover-light); }

.discount_useall_btn {
	flex-shrink: 0;
	height: 55px;
	padding: 0 24px;
	border: 1px solid var(--main-surface);
	border-radius: var(--radius-lg);
	background: #fff;
	color: var(--main);
	font-size: var(--body-medium);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.discount_useall_btn:hover { background: var(--main-surface); }

.discount_sub_info {
	font-size: var(--body-small);
	color: var(--gray-50);
}
.discount_sub_info .text_main { color: var(--main); }

.discount_select_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.discount_select_box:hover { border-color: var(--gray-30); }
.discount_select_box--disabled {
	cursor: default;
	background-color: var(--gray-5);
	border: 1px solid var(--gray-10);
	height: 44px;
	padding: 12px 16px;
}
.discount_select_box--disabled .discount_select__text {
	font-size: var(--body-small);
}
.discount_select_box--disabled:hover { border-color: var(--gray-10); }
.form_row:has(.discount_select_box--disabled) > .form_label { line-height: 44px; }

.discount_select__text {
	font-size: var(--body-medium);
	color: var(--gray-40);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.discount_select__text.selected { color: var(--gray-95); }

.coupon_clear_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--gray-70);
	cursor: pointer;
	flex-shrink: 0;
	margin-left: 8px;
}

.discount_coupon_result {
	font-size: var(--body-small);
	color: var(--main);
}
.discount_coupon_result strong { font-weight: 600; }

.discount_disabled { opacity: 0.45; pointer-events: none; }

/* ===== 쿠폰 선택 팝업 (step02) ===== */
.coupon_popup_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.coupon_popup {
	width: 480px;
	max-width: 90vw;
	max-height: 80vh;
	background: #fff;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.coupon_popup__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 20px;
}

.coupon_popup__title {
	font-size: var(--body-large);
	font-weight: 700;
	color: var(--gray-95);
	margin: 0;
}

.coupon_popup__close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.2s;
}
.coupon_popup__close:hover { background: var(--gray-5); }

.coupon_popup__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.coupon_popup__body::-webkit-scrollbar { display: none; }

.coupon_card {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
}

.coupon_card__radio {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border: 1px solid var(--gray-20);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.coupon_card__radio:checked {
	border-color: var(--main);
	background: var(--main);
}
.coupon_card__radio:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 50%;
}

.coupon_card__body {
	flex: 1;
	min-width: 0;
	padding: 18px 16px;
	border: 1px solid var(--gray-10);
	border-radius: 12px;
	transition: border-color 0.2s;
}
.coupon_card:has(.coupon_card__radio:checked) .coupon_card__body {
	border-color: var(--main);
}

.coupon_card__discount {
	font-size: var(--heading-small);
	font-weight: 700;
	color: var(--main);
	margin-bottom: 5px;
}

.coupon_card__subtitle {
	font-size: var(--body-xsmall);
	font-weight: 500;
	color: var(--gray-70);
	margin-bottom: 8px;
	line-height: 1.4;
}

.coupon_card__partial_note {
	display: block;
	margin-top: 4px;
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-60);
	line-height: 1.4;
}

.coupon_card__name {
	font-size: var(--body-small);
	font-weight: 500;
	color: var(--gray-90);
	margin-bottom: 12px;
}

.coupon_card__details {
	display: flex;
	flex-direction: column;
}

.coupon_card__detail_row {
	display: flex;
	gap: 16px;
}

.coupon_card__detail_label {
	font-size: var(--body-xsmall);
	color: var(--gray-50);
	width: 90px;
	flex-shrink: 0;
}

.coupon_card__detail_value {
	font-size: var(--body-xsmall);
	color: var(--gray-95);
}

.coupon_popup__footer {
	padding: 16px 24px 24px;
}

.coupon_popup__apply_btn {
	width: 100%;
	height: 50px;
	background: var(--main);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: var(--body-medium);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}
.coupon_popup__apply_btn:hover { background: var(--main-hover); }

/* disabled 쿠폰 카드 */
.coupon_card--disabled {
	cursor: default;
}
.coupon_card--disabled .coupon_card__radio {
	border-color: var(--gray-10) !important;
	background: var(--gray-5) !important;
	cursor: default;
}
.coupon_card--disabled .coupon_card__body {
	border-color: var(--gray-10) !important;
}
.coupon_card--disabled .coupon_card__discount,
.coupon_card--disabled .coupon_card__name,
.coupon_card--disabled .coupon_card__details {
	opacity: 0.45;
}
.coupon_card__disabled_reason {
	font-size: var(--body-xsmall);
	color: #d32f2f;
	margin-top: 8px;
}

/* 쿠폰 소진 회차 안내 — "(1장 · 4회 적용)" / 잔여 부족 시 경고색 */
.coupon_use_note {
	font-size: 12px;
	color: #58616a;
}
.coupon_use_note--warn {
	color: #d32f2f;
	font-weight: 600;
}

/* 취소정책 배지 — '무료취소 가능' 상태만 파란색.
   JS(computeCancelState) 가 라벨이 '무료취소 가능' 일 때만 이 클래스를 붙인다.
   refundable=true 에는 기본문구('취소 환불규정') 도 포함되므로 그 플래그로 판정하면 안 된다.
   기존 배지 규칙보다 뒤에 와야 색이 덮인다 — 파일 끝 유지할 것.
   색상: 토큰 --success (마이페이지 예약취소 영역의 무료/환불 표기와 동일) */
.cancel_badge--free {
	color: var(--success) !important;
}