@charset "utf-8";

/* ===== 상세 페이지 컨테이너 ===== */
.detail_container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 0 80px;
}

/* ===== 숙소 헤더 섹션 ===== */
.detail_header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}

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

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

.detail_header__title {
	font-size: var(--heading-large);
	font-weight: 700;
	color: var(--gray-95);
	line-height: 1.5;
	margin: 0;
}

.detail_header__address {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.detail_header__address_icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.detail_header__address_icon svg {
	width: 100%;
	height: 100%;
	fill: #a9b0b8;
}

.detail_header__address_text {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	line-height: 1.5;
}

.detail_header__address_arrow {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail_header__address_arrow svg {
	width: 18px;
	height: 18px;
	fill: var(--gray-90);
}

.detail_header__share {
	width: 40px;
	height: 40px;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray-0);
	cursor: pointer;
	transition: background-color 0.2s;
	flex-shrink: 0;
}

.detail_header__share:hover {
	background: #f9fafb;
}

.detail_header__share svg {
	width: 24px;
	height: 24px;
	color: var(--gray-60);
}

/* ===== 공유하기 팝업 ===== */
.share_popup_overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	justify-content: center;
	align-items: center;
}
.share_popup_overlay.active {
	display: flex;
}
.share_popup {
	background: var(--gray-0);
	border-radius: var(--radius-2xl);
	padding: 32px;
	width: 300px;
	text-align: center;
	position: relative;
}
.share_popup__title {
	font-size: 18px;
	font-weight: 700;
	color: #1f2328;
	margin-bottom: 24px;
}
.share_popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 28px;
	height: 28px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 20px;
	color: #a9b0b8;
}
.share_popup__icons {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 24px;
}
.share_popup__icon_btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: none;
	background: none;
	cursor: pointer;
}
.share_popup__icon_circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s;
}
.share_popup__icon_circle:hover {
	transform: scale(1.1);
}
.share_popup__icon_circle svg {
	width: 24px;
	height: 24px;
	fill: var(--gray-0);
}
.share_popup__icon_circle.kakao { background: #FEE500; }
.share_popup__icon_circle.kakao svg { fill: #3C1E1E; }
.share_popup__icon_circle.link { background: var(--gray-60); }
.share_popup__icon_label {
	font-size: 12px;
	color: var(--gray-50);
}
.share_popup__url_box {
	display: flex;
	border: 1px solid var(--gray-10);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.share_popup__url_input {
	flex: 1;
	padding: 10px 12px;
	border: none;
	font-size: var(--body-xsmall);
	color: var(--gray-50);
	background: #f9fafb;
	outline: none;
}
.share_popup__url_copy {
	padding: 10px 16px;
	border: none;
	background: #1f2328;
	color: var(--gray-0);
	font-size: var(--body-xsmall);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.share_popup__url_copy:hover {
	background: var(--gray-60);
}

/* ===== 이미지 갤러리 ===== */
.detail_gallery {
	display: flex;
	gap: 10px;
	margin-bottom: 28px;
}

.detail_gallery__main {
	flex: 1;
	height: 610px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--gray-5);
	position: relative;
	margin: auto;
	cursor: pointer;
}

.detail_gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.detail_gallery__side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 397px;
	flex-shrink: 0;
	justify-content: center;
}

.detail_gallery__thumb {
	height: 300px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--gray-5);
	position: relative;
	cursor: pointer;
}

.detail_gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s;
}

.detail_gallery__more {
	height: 290px;
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.detail_gallery__more img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s;
}

.detail_gallery__thumb:hover img,
.detail_gallery__more:hover img,
.detail_gallery__main:hover img {
	transform: scale(1.02);
}

.detail_gallery__more_badge {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: var(--radius-xl);
}

.detail_gallery__more_icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail_gallery__more_icon svg {
	width: 100%;
	height: 100%;
	fill: var(--gray-0);
}

.detail_gallery__more_text {
	font-size: var(--body-large);
	font-weight: 600;
	color: var(--gray-0);
}

/* ===== 이미지 갤러리 팝업 ===== */
.gallery_popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #000;
}

.gallery_popup.active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery_popup__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.gallery_popup__close:hover svg {
	fill: var(--gray-20);
}

.gallery_popup__container {
	width: 100%;
	height: 100%;
	max-width: 1200px;
	max-height: 800px;
	position: relative;
	padding: 60px 80px;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

.gallery_popup__swiper {
	width: 100%;
	height: 100%;
	background: #000;
}

.gallery_popup__swiper .swiper-wrapper {
	background: #000;
}

.gallery_popup__swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	opacity: 1 !important;
}

.gallery_popup__swiper .swiper-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #000;
}

.gallery_popup__nav.swiper-button-prev,
.gallery_popup__nav.swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	background: none;
	color: var(--gray-0);
	user-select: none;
	-webkit-user-select: none;
	z-index: 20;
}

.gallery_popup__nav.swiper-button-prev {
	left: 10px;
}

.gallery_popup__nav.swiper-button-next {
	right: 10px;
}

.gallery_popup__nav.swiper-button-prev::after,
.gallery_popup__nav.swiper-button-next::after {
	font-size: 24px;
	font-weight: 700;
}

.gallery_popup__swiper .swiper-pagination {
	bottom: 20px;
}

.gallery_popup__swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.gallery_popup__swiper .swiper-pagination-bullet-active {
	background: var(--gray-0);
}

.gallery_popup__counter {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 500;
	color: var(--gray-0);
	z-index: 10001;
}

/* ===== 객실 상세 팝업 ===== */
.room_detail_popup_overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	align-items: center;
	justify-content: center;
}

.room_detail_popup_overlay.active {
	display: flex;
}

.room_detail_popup {
	width: 540px;
	max-height: 90vh;
	background: var(--gray-0);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
}

.room_detail_popup__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
/* 	border-bottom: 1px solid #e6e8ea; */
	flex-shrink: 0;
}

.room_detail_popup__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--gray-95);
	margin: 0;
	line-height: 1.5;
}

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

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

.room_detail_popup__close:hover svg {
	fill: var(--gray-95);
}

.room_detail_popup__content {
	display: flex;
	flex-direction: column;
	overflow: auto;
	flex: 1;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.room_detail_popup__content::-webkit-scrollbar {
	display: none;
}

/* 객실 이미지 슬라이더 */
.room_detail_popup__gallery {
	position: relative;
	width: 500px;
	height: 363px;
	background: var(--gray-5);
	flex-shrink: 0;
	margin: 0 auto;
	border-radius: var(--radius-lg);
}

.room_detail_popup__swiper {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-lg);
}

.room_detail_popup__swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.room_detail_popup__swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.room_detail_popup__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	background: rgb(255 255 255 / 55%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	border: none;
	transition: background 0.2s;
}

.room_detail_popup__nav svg {
	width: 20px;
	height: 20px;
	fill: var(--gray-90);
}

.room_detail_popup__nav--prev {
	left: 12px;
}

.room_detail_popup__nav--next {
	right: 12px;
}

.room_detail_popup__counter {
	position: absolute;
	bottom: 12px;
	right: -1%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	background: rgba(19, 20, 22, 0.4);
	border-radius: var(--radius-lg);
	z-index: 10;
}

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

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

/* 객실 정보 */
.room_detail_popup__info {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

.room_detail_popup__room_name {
	font-size: 20px;
	font-weight: 700;
	color: var(--gray-95);
	margin: 0;
	line-height: 1.5;
}

.room_detail_popup__room_type {
	display: inline-flex;
	border-radius: var(--radius-lg);
	font-size: var(--body-medium);
	font-weight: 700;
	color: var(--gray-95);
	width: fit-content;
}

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

.room_detail_popup__meta_item {
	display: flex;
	align-items: center;
	gap: 4px;
	width: calc(50% - 10px);
	box-sizing: border-box;
}

.room_detail_popup__meta_icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.room_detail_popup__meta_icon svg {
	width: 16px;
	height: 16px;
	color: var(--gray-90);
}
.room_detail_popup__meta_item:first-child .room_detail_popup__meta_icon svg {
	width: 20px;
	height: 20px;
}

.room_detail_popup__meta_text {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	line-height: 1.5;
}

.room_detail_popup__divider {
	width: 100%;
	height: 1px;
	background: var(--gray-10);
}

/* 기본정보 섹션 */
.room_detail_popup__section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.room_detail_popup__section_title {
	font-size: var(--body-medium);
	font-weight: 700;
	color: var(--gray-95);
	margin: 0;
	line-height: 1.5;
}

.room_detail_popup__section_content {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.room_detail_popup__section_text {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-80);
	line-height: 1.5;
	margin: 0;
}

/* 객실 편의 시설 */
.room_detail_popup__amenities {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding-top: 5px;
}

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

.room_detail_popup__amenity_tag::before, .room_detail_popup__section_text::before {
	content: "·";
	margin-right: 4px;
}

/* 반응형 */
@media screen and (max-width: 600px) {
	.room_detail_popup {
		width: calc(100% - 40px);
		margin: 0 20px;
		max-height: 85vh;
	}

	.room_detail_popup__gallery {
		height: 280px;
	}

	.room_detail_popup__nav {
		width: 40px;
		height: 40px;
	}

	.room_detail_popup__info {
		padding: 16px;
	}
}

/* ===== 탭 네비게이션 ===== */
.detail_tabs_wrapper {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--gray-0);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	margin-bottom: 28px;
}



.detail_tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 0;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	background: var(--gray-0);
}

.detail_tabs__item {
	padding: 0 24px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--body-medium);
	font-weight: 400;
	color: var(--gray-50);
	background: var(--gray-0);
	border: none;
	cursor: pointer;
	position: relative;
	transition: color 0.2s;
}

.detail_tabs__item:hover {
	color: var(--gray-80);
}

.detail_tabs__item.active {
	font-weight: 700;
	color: var(--main);
	border-bottom: 2px solid var(--main);
}

/* ===== 섹션 공통 스타일 ===== */
.detail_section {
	padding: 28px 0;
}

.detail_section__divider {
	width: 100%;
	height: 1px;
	background: var(--gray-10);
	margin-bottom: 20px;
}

.detail_section__title {
	font-size: var(--heading-medium);
	font-weight: 700;
	color: var(--gray-95);
	line-height: 1.5;
	margin: 0 0 12px 0;
}

/* ===== 객실 선택 섹션 ===== */
.room_section {
	padding: 0 0 28px;
}

.room_list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

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

/* 객실 카드 */
.room_card {
	display: flex;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--gray-10);
}

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

/* 객실 이미지 영역 */
.room_card__gallery {
	flex: 0 0 600px;
	position: relative;
}

.room_card__image_main {
	width: 100%;
	height: 330px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--gray-5);
	position: relative;
}

.room_card__image_main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 객실타입 이미지 슬라이더
 * 핵심: position:absolute로 부모(room_card__image_main) 크기에 완전 종속
 * → Swiper가 부모 밖으로 절대 확장 불가
 */
.room_type_slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.room_type_slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.room_type_slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.85);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
	color: var(--gray-80);
}

.room_card__image_main:hover .room_type_slider__nav {
	opacity: 1;
}

.room_type_slider__nav--prev { left: 10px; }
.room_type_slider__nav--next { right: 10px; }

.room_type_slider__nav svg {
	width: 20px;
	height: 20px;
}

.room_type_slider__counter {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 10px;
	background: rgba(19, 20, 22, 0.4);
	border-radius: var(--radius-lg);
	z-index: 10;
	font-size: 12px;
	color: var(--gray-0);
}

/* 객실 정보 영역 */
.room_card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 객실 헤더 */
.room_card__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.room_card__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--gray-95);
	line-height: 1.4;
	margin: 0;
}

/* 객실 기본 정보 */
.room_card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.room_card__meta_item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-60);
}

.room_card__meta_item_icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.room_card__meta_item_icon svg {
	width: 18px;
	height: 18px;
	color: var(--gray-90);
}

.room_card__meta_divider {
	width: 1px;
	height: 14px;
	background: var(--gray-20);
}

/* 요금 타입 리스트 */
.room_card__rate_list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

/* 요금 타입 카드 */
.room_rate {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 20px;
/* 	background: #f9fafb; */
	border-radius: var(--radius-xl);
	border: 1px solid var(--gray-10);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.room_rate:hover {
	border-color: var(--main);
	box-shadow: 0 2px 8px rgba(92, 32, 146, 0.08);
}

/* 상세보기 버튼 - 우측 상단 */
.room_rate__detail_link {
	position: absolute;
	top: 16px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 14px;
	font-weight: 500;
	color: var(--gray-70);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: color 0.2s;
}

.room_rate__detail_link:hover {
	color: var(--gray-80);
}

.room_rate__detail_link svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* 요금 정보 영역 */
.room_rate__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

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

/* 예약특가 뱃지 */
.room_rate__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.room_rate__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var(--main-surface);
	border-radius: var(--radius-md);
	font-size: 12px;
	font-weight: 600;
	color: var(--main);
}

/* 환불 정책 */
.room_rate__policy {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--body-xsmall);
	font-weight: 400;
	color: var(--gray-50);
	margin-top: 4px;
	width: fit-content;
	cursor: pointer;
}

.room_rate__policy--refundable {
	color: var(--accent);
}

.room_rate__policy--non_refundable {
	color: #dc3545;
}

.room_rate__policy_icon {
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.room_rate__policy_icon svg {
	width: 100%;
	height: 100%;
}

/* 하단 영역: 가격(좌) + 예약버튼(우) */
.room_rate__footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 8px;
}

/* 가격 영역 - 좌측 하단 */
.room_rate__price_area {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.room_rate__discount_row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.room_rate__discount {
	font-size: 14px;
	font-weight: 700;
/* 	color: #dc3545; */
}

.room_rate__original_price {
	font-size: 14px;
	font-weight: 400;
	color: #a9b0b8;
	text-decoration: line-through;
}

.room_rate__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.room_rate__member_row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.room_rate__member_badge {
	font-size: 11px;
	font-weight: 500;
	color: var(--gray-0);
	background: var(--main);
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
}

.room_rate__member_price {
	font-size: var(--body-small);
	font-weight: 600;
	color: var(--accent);
}

/* 최대 쿠폰 적용가 배지 — 보유 쿠폰 중 최대 할인 적용 후 실제 결제 예상가.
   회원특가 배지와 같은 자리(KRW 좌측)에 배타적으로 노출된다. */
.room_rate__benefit_badge {
	font-size: 11px;
	font-weight: 500;
	color: var(--gray-0);
	background: var(--accent);
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
}

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

.room_rate__amount {
	font-size: var(--heading-small);
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--gray-95);
}

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

.room_rate--soldout .room_rate__price,
.room_rate--soldout .room_rate__discount {
	color: var(--gray-20);
}
.room_rate--soldout .room_rate__currency,
.room_rate--soldout .room_rate__amount,
.room_rate--soldout .room_rate__per_night {
	color: var(--gray-20);
}
.room_rate--soldout .room_rate__book_btn {
	font-weight: 400;
}
.room_rate--soldout .room_rate__login_hint {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.4;
}

.room_rate__login_hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 6px 10px;
	background: var(--main-surface);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
}

.room_rate__login_hint_icon {
	width: 14px;
	height: 14px;
	color: var(--main);
	flex-shrink: 0;
}
.room_rate__login_hint_text {
	font-size: 12px;
	color: var(--main);
	font-weight: 500;
}

.room_rate__remain {
	font-size: var(--body-xsmall-bold);
    font-weight: 700;
    color: var(--accent);
}

/* 예약 버튼 영역 - 우측 하단 */
.room_rate__action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.room_rate__book_btn {
	width: 118px;
	min-width: 98px;
	height: 39px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	gap: 4px;
	background: var(--main);
	color: var(--gray-0);
	border: none;
	border-radius: 8px;
	font-size: var(--body-small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

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

.room_rate__book_btn.disabled {
	background: var(--gray-20);
	cursor: not-allowed;
}

.room_rate__book_btn.disabled:hover {
	background: var(--gray-20);
}

/* Room Rate Details (bullet list) */
.room_rate__details {
	padding-top: 14px;
}
.room_rate__details ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.room_rate__details li {
	font-size: 13px;
	color: var(--gray-60);
	line-height: 1.6;
	margin-bottom: 2px;
}
.room_rate__details li::before {
	content: '·';
	margin-right: 6px;
	font-weight: 700;
}
.room_rate__details li:last-child {
	margin-bottom: 0;
}

/* ===== VIP (수분양자 소유 객실) ===== */
.room_rate--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;
}
.room_rate--vip:hover {
	border-color: transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #ab8f5c, #7d6940 40%, #917a4d 70%, #ab8f5c);
	box-shadow: 0 2px 8px rgba(171,143,92,0.12);
}
.room_card__vip_crown {
	width: 22px;
	height: 22px;
	fill: url(#vipGold);
	flex-shrink: 0;
	margin-right: 6px;
	vertical-align: middle;
	margin-top: -3px;
}
.room_rate--vip .room_rate__book_btn {
	background: linear-gradient(135deg, #bd9c5f 0%, #ab8c4e 40%);
}
.room_rate--vip .room_rate__book_btn:hover {
	background: linear-gradient(135deg, #bb9a5c 0%, #a7884b 40%);
}

/* ===== 로그인 유도 모달 ===== */
.login_popup_overlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.login_popup_overlay.active { display: flex; }

.login_popup {
	width: 380px;
	background: var(--gray-0);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	text-align: center;
}
.login_popup__body {
	padding: 36px 24px 24px;
}
.login_popup__icon {
	width: 48px; height: 48px;
	margin: 0 auto 16px;
	color: var(--main);
}
.login_popup__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--gray-95);
	margin: 0 0 8px;
}
.login_popup__desc {
	font-size: 14px;
	color: var(--gray-50);
	margin: 0;
	line-height: 1.5;
}
.login_popup__actions {
	display: flex;
	gap: 8px;
	padding: 0 24px 24px;
}
.login_popup__btn {
	flex: 1;
	height: 44px;
	border-radius: var(--radius-lg);
	font-size: var(--body-small);
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background-color 0.2s;
}
.login_popup__btn--join {
	background: var(--gray-10);
	color: var(--gray-80);
}
.login_popup__btn--join:hover { background: var(--gray-20); }
.login_popup__btn--login {
	background: var(--main);
	color: var(--gray-0);
}
.login_popup__btn--login:hover { background: var(--main-hover); }

/* ===== 서비스 및 부대시설 섹션 ===== */
.service_list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.service_item {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 223px;
}

.service_item__icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service_item__icon svg {
	width: 20px;
	height: 20px;
	fill: var(--gray-70);
}

.service_item__text {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	line-height: 1.5;
}

/* ===== 이용안내 섹션 ===== */
.info_notice {
	background: var(--gray-5);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 20px;
}

.info_notice__title {
	font-size: var(--body-small);
	font-weight: 700;
	color: var(--gray-95);
	margin: 0 0 8px 0;
}

.info_notice__text {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-95);
	line-height: 1.5;
	margin: 0;
	white-space: pre-line;
}

.info_group {
	margin-bottom: 20px;
}

.info_group__title {
	font-size: var(--body-small);
	font-weight: 700;
	color: var(--gray-80);
	margin: 0 0 8px 0;
	line-height: 1.5;
}

.info_group__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.info_group__item {
	font-size: var(--body-small);
	font-weight: 400;
	color: var(--gray-60);
	line-height: 1.5;
	margin: 0;
	padding-left: 12px;
	position: relative;
	white-space: pre-line;
}

.info_group__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 4px;
	height: 4px;
	background: #a9b0b8;
	border-radius: 50%;
}

/* ===== 위치 섹션 ===== */
.location_map {
	width: 100%;
	height: 480px;
	border-radius: var(--radius-xl);
	background: var(--gray-5);
	margin-bottom: 12px;
	overflow: hidden;
}

.location_map iframe {
	width: 100%;
	height: 100%;
	border: none;
}

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

.location_address__text {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--body-small);
	color: var(--gray-90);
}

.location_address__icon {
	width: 16px;
	height: 16px;
}

.location_address__copy {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	font-size: var(--body-xsmall);
	font-weight: 500;
	color: var(--gray-40);
	background: transparent;
	border: none;
	cursor: pointer;
}

.location_address__copy:hover {
	text-decoration: underline;
}

/* ===== 리뷰 섹션 ===== */
.review_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

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

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

.review_header__count {
	font-size: var(--heading-medium);
	font-weight: 700;
	color: var(--main);
}

.review_header__sort {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	color: var(--gray-95);
	cursor: pointer;
	position: relative;
}

.review_header__sort .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);
}

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

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

.review_header__sort .sort_dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 140px;
	background: var(--gray-0);
	border-radius: var(--radius-lg);
	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;
}

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

.review_header__sort .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;
}

.review_header__sort .sort_option:hover {
	background-color: var(--gray-5);
	color: var(--gray-80);
}

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

.review_list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.review_item {
	display: flex;
	gap: 20px;
	padding: 12px 0 20px;
	border-bottom: 1px solid var(--gray-5);
}

.review_item__user {
	flex: 0 0 232px;
	display: flex;
	gap: 8px;
}

.review_item__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--gray-20);
}

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

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

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

.review_item__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.review_item__rating {
	display: flex;
	gap: 2px;
}

.review_item__rating .star {
	width: 16px;
	height: 16px;
	fill: #ffc107;
}

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

.review_item__images {
	display: flex;
	gap: 10px;
}

.review_item__image {
	width: 0;
	flex: 1;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--gray-5);
}

.review_item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.review_item__text {
	font-size: var(--body-small);
	color: var(--gray-60);
	line-height: 1.5;
}

.review_empty__text {
	text-align: center;
	padding: 80px 0;
	font-size: 15px;
	color: var(--gray-40);
}

/* ===== 페이지네이션 ===== */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	padding: 40px 0;
}

.pagination__btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--gray-0);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.pagination__btn:hover {
	background: var(--gray-5);
}

.pagination__btn svg {
	width: 20px;
	height: 20px;
	fill: var(--gray-50);
}

.pagination__num {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	background: var(--gray-0);
	border: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--gray-60);
	cursor: pointer;
	transition: all 0.2s;
}

.pagination__num:hover {
	background: var(--gray-5);
}

.pagination__num.active {
	background: var(--main);
	color: var(--gray-0);
}

/* ===== 반응형 ===== */
@media screen and (max-width: 1240px) {
	.detail_container {
		padding: 20px;
	}
}

@media screen and (max-width: 1200px) {
	/* 숙소 헤더 반응형 */
	.detail_header__title {
		font-size: 26px;
	}

	.detail_header__address_text {
		font-size: 14px;
	}

	/* 이미지 갤러리 반응형 */
	.detail_gallery {
		flex-direction: column;
		height: auto;
	}

	.detail_gallery__main {
		width: 100%;
		height: 400px;
	}

	.detail_gallery__side {
		flex-direction: row;
		width: 100%;
		height: 200px;
	}

	.detail_gallery__thumb,
	.detail_gallery__more {
		flex: 1;
	}

	/* 객실 카드 반응형 */
	.room_card {
		flex-direction: column;
		gap: 24px;
	}

	.room_card__gallery {
		flex: none;
		width: 100%;
	}

	.room_card__image_main {
		height: 320px;
	}

	.room_rate__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.room_rate__action {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.room_rate__book_btn {
		min-width: 120px;
		width: auto;
	}
}

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