/* 상세 페이지 */
.image-gallery {
	margin-top: 65px;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem 4%;
}

.gallery-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 320px 320px;
	gap: 12px;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

/* 갤러리 아이템 호버 효과 */
.gallery-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: #f5f5f5;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.gallery-item:hover img {
	transform: scale(1.1);
	filter: brightness(0.7);
}

/* 전체화면 갤러리 뷰어 */
.gallery-viewer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.95);
	z-index: 4002;
	opacity: 0;
	transition: opacity 0.3s;
}

.gallery-viewer.active {
	display: flex;
	opacity: 1;
}

.gallery-viewer-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-viewer-image {
	max-width: 90%;
	max-height: 85vh;
	object-fit: contain;
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

.gallery-viewer-close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #fff;
	font-size: 2.5rem;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
	z-index: 10;
}

.gallery-viewer-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: rotate(90deg);
}

.gallery-viewer-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #fff;
	font-size: 2rem;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
	z-index: 10;
}

.gallery-viewer-nav:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-50%) scale(1.1);
}

.gallery-viewer-nav.prev {
	left: 2rem;
}

.gallery-viewer-nav.next {
	right: 2rem;
}

.gallery-viewer-counter {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 0.8rem 1.5rem;
	border-radius: 25px;
	font-size: 0.9rem;
	font-weight: 700;
	backdrop-filter: blur(10px);
}

.gallery-viewer-thumbnails {
	position: absolute;
	bottom: 5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.8rem;
	max-width: 90%;
	overflow-x: auto;
	padding: 0.5rem;
}

.gallery-viewer-thumbnails::-webkit-scrollbar {
	height: 4px;
}

.gallery-viewer-thumbnails::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
}

.gallery-viewer-thumbnails::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
}

.gallery-thumbnail {
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--radius-md);
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.3s;
	border: 2px solid transparent;
}

.gallery-thumbnail:hover {
	opacity: 0.8;
	transform: scale(1.05);
}

.gallery-thumbnail.active {
	opacity: 1;
	border-color: #fff;
}

.gallery-item:first-child {
	grid-row: 1/3;
}

.view-all-photos {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: #fff;
	color: #000;
	padding: 0.8rem 1.5rem;
	border-radius: var(--radius-md);
	font-weight: 700;
	font-size: 0.9rem;
	border: none;
	cursor: pointer;
	z-index: 10;
	transition: all 0.3s;
}

.view-all-photos:hover {
	background: #f0f0f0;
	transform: translateY(-2px);
}

.content-wrapper {
	max-width: 1600px;
	margin: 0 auto;
	padding: 2rem 4%;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 4rem;
	align-items: start;
}

/* 스티키 탭 네비게이션 */
.section-tabs {
    position: sticky;
    top: 80px; /* 상단 메뉴 높이 */
    z-index: 90; /* right-booking보다 낮게 */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(255, 255, 255, 0.95) 100%
    );
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin: 0;
    padding: 0 2%;
    margin-bottom: 2rem;
}

/* 섹션 스크롤 오프셋 조정 (탭 높이 변경에 맞춰) */
#overview,
#rooms,
#location,
#policies {
    scroll-margin-top: 130px; /* 상단메뉴(70px) + 탭(70px) */
}

.section-tabs.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.section-tabs-container {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.section-tabs-container::-webkit-scrollbar {
    display: none;
}

.section-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.section-tab:hover {
    color: #111827;
    background: rgba(0, 0, 0, 0.02);
}

.section-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.section-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background: #3b82f6;
    transition: transform 0.3s ease;
}

.section-tab.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* 모바일 하단 고정 바 */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    transition: transform 0.3s ease;
}

.mobile-bottom-bar.hidden {
    transform: translateY(100%);
}

.mobile-bottom-bar-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mobile-bottom-bar-info {
    flex: 1;
    min-width: 0;
}

.mobile-bottom-bar-dates,
.mobile-bottom-bar-guests {
    font-size: 0.85rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-bottom-bar-dates {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.mobile-bottom-bar-guests {
    color: #6b7280;
}

.mobile-bottom-bar-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.mobile-bottom-bar-btn:active {
    background: #2563eb;
}

.mobile-bottom-bar-btn svg {
    transition: transform 0.3s;
}

/* 모바일 예약 정보 전체 화면 */
.mobile-booking-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: white;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-booking-sheet.active {
    transform: translateY(0);
}

.mobile-booking-sheet-header {
    display: flex;
    background: #ddd;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-booking-sheet-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.mobile-booking-sheet-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
}

.mobile-booking-sheet-content {
    padding: 1.5rem;
    max-height: calc(90vh - 70px);
    overflow-y: auto;
}

.mobile-booking-section {
    margin-bottom: 1.5rem;
}

.mobile-booking-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.mobile-booking-input {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-booking-input:active {
    background: #f3f4f6;
}

.mobile-booking-input-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-booking-input-item {
    flex: 1;
}

.mobile-booking-input-divider {
    color: #9ca3af;
    font-size: 1.2rem;
}

.mobile-booking-input-label {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.mobile-booking-input-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.mobile-booking-input-nights {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #3b82f6;
    font-weight: 600;
}

.mobile-booking-confirm-btn {
    width: 100%;
    padding: 1rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
}

.mobile-booking-confirm-btn:active {
    background: #2563eb;
}

.mobile-booking-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-booking-overlay.active {
    opacity: 1;
}

.left-content {
	min-width: 0;
}

.right-booking {
	position: sticky;
	top: 100px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding-right: 5px;
}

.right-booking::-webkit-scrollbar {
	width: 6px;
}

.right-booking::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.right-booking::-webkit-scrollbar-thumb {
	background: #d4af37;
	border-radius: 3px;
}

.right-booking::-webkit-scrollbar-thumb:hover {
	background: #c9a961;
}

.hotel-detail-header {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
}

.hotel-detail-location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.hotel-detail-location > span {
    flex: 1 1 auto;
    min-width: 0;
}

.hotel-detail-rating {
    flex-shrink: 0;
}

.hotel-detail-stars {
	color: #FFD700;
	font-size: 1.1rem;
}

.hotel-detail-amenities-section {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.5rem;
	margin: 2rem 0;
}

.hotel-detail-amenity-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

.hotel-detail-amenity-icon {
	font-size: 0.9rem;
}

.hotel-detail-amenity-icon img {
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-sm);
}

.hotel-detail-amenity-name {
	font-size: 0.85rem;
	color: #666;
}

.hotel-detail-section-title {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 0.6rem;
}

.promo-banner {
	background: #f8f9fa;
	padding: 2rem;
	border-radius: var(--radius-lg);
	margin: 2rem 0;
}

.promo-title {
	font-size: 1.2rem;
	font-weight: 800;
	margin-bottom: 1rem;
}

.promo-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

.promo-item {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.promo-icon {
	font-size: 1.5rem;
}

.promo-text {
	font-size: 0.9rem;
	color: #666;
}

.hotel-detail-content-section {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #e5e5e5;
}

.hotel-detail-content-section:last-child {
	border-bottom: none;
}

.info-large-image img {
	width: 100%;
	height: 400px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	margin-bottom: 2rem;
	object-fit: cover;
	object-position: center;
}

.info-video-container {
	position: relative;
	width: 100%;
	height: 400px;
	background: #000;
	border-radius: var(--radius-xl);
	overflow: hidden;
	margin-bottom: 2rem;
	color: #fff;
}

.info-video-container iframe,
.info-video-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.info-grid-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}

.info-grid-item {
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.info-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 모바일 예약 모달 */
.mobile-booking-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 3000;
	overflow-y: auto;
}

.mobile-booking-modal.active {
	display: block;
}

.mobile-booking-header {
	position: sticky;
	top: 0;
	background: #fff;
	padding: 1rem 4%;
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
}

.mobile-booking-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
}

.mobile-booking-content {
	padding: 2rem 4%;
}

.info-description {
	color: #666;
	line-height: 1.9;
	font-size: 0.95rem;
}

.room-card {
	border: 1px solid #e5e5e5;
	border-radius: var(--radius-xl);
	padding: 1rem;
	margin-bottom: 2rem;
}

.room-main-info {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

/* 객실 이미지 슬라이더 */
.room-image-slider {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--gray-100);
}

.room-image-slider:active {
	cursor: grabbing;
}

.room-image-track {
	display: flex;
	height: 100%;
	width: 100%;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.room-image-item {
	flex: 0 0 100%;
	height: 100%;
	position: relative;
	background: var(--gray-100);
}

.room-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	cursor: pointer;
	transition: transform 0.3s ease;
	pointer-events: auto;
}

.room-image-item img:hover {
	transform: scale(1.05);
}

/* 슬라이더 버튼 */
.room-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.9);
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: all var(--transition-normal);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	pointer-events: none;
}

.room-image-slider:hover .room-slider-btn {
	opacity: 1;
	pointer-events: auto;
}

.room-slider-btn:hover {
	background: var(--white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-50%) scale(1.1);
}

.room-slider-btn:active {
	transform: translateY(-50%) scale(0.95);
}

.room-slider-prev {
	left: 12px;
}

.room-slider-next {
	right: 12px;
}

.room-slider-btn svg {
	width: 24px;
	height: 24px;
	color: var(--text-primary);
}

/* 인디케이터 */
.room-slider-indicators {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
	pointer-events: none;
}

.room-slider-indicators .indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all var(--transition-fast);
	pointer-events: auto;
}

.room-slider-indicators .indicator:hover {
	background: rgba(255, 255, 255, 0.8);
	transform: scale(1.2);
}

.room-slider-indicators .indicator.active {
	background: var(--white);
	width: 24px;
	border-radius: 4px;
}

.room-details h3 {
	font-size: 1.3rem;
	font-weight: 800;
	margin-bottom: 0.8rem;
}

.room-specs {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.room-description {
	color: #666;
	font-size: 0.9rem;
	line-height: 1.7;
	margin: 1rem 0;
}

.room-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
	align-items: center;
}

.room-amenity {
	background: var(--gray-50);
	padding: 0.3rem 0.65rem;
	border-radius: 10px;
	font-size: 0.75rem;
	color: #666;
	border: 1px solid var(--border-light);
}

.rate-plans {
	border-top: 1px solid #f0f0f0;
	padding-top: 1.5rem;
}

.rate-plan-item {
	display: grid;
	grid-template-columns: 7fr 3fr; /* 7:3 비율 */
	gap: 1rem;
	align-items: start;
	padding: 1.5rem;
	background: #f0f1f5;
	border-radius: var(--radius-lg);
	margin-bottom: 1rem;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 1px solid var(--gray-300);
	position: relative;
}

.rate-plan-item:hover {
	border-color: var(--primary-lighter);
	transform: translateY(-2px);
}

.rate-plan-action-column {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* 버튼 호버 효과도 개선 */
.rate-plan-item .btn-select-rate {
	transition: all 0.3s ease;
}

.rate-plan-item:hover .btn-select-rate {
	transform: scale(1.05);
	box-shadow: 0 4px 12px var(--primary-opacity-30);
}

/* 가격 강조 효과 */
.rate-plan-item:hover .rate-price {
	color: var(--primary-color);
}

.rate-plan-info h4 {
	font-size: 1.1rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.rate-plan-description {
	color: #666;
	font-size: 0.85rem;
	line-height: 1.6;
	margin-bottom: 0.8rem;
}

.rate-plan-tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.rate-plan-price {
	text-align: right;
	margin-bottom: 1rem;
}

/* 할인 배지 그룹 */
.discount-badges-group {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* 할인율 배지 기본 */
.discount-rate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* 프로모션 할인 배지 */
.discount-rate.promo-discount {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    color: white;
}

/* 연박할인 배지 */
.discount-rate.los-discount {
    background: linear-gradient(135deg, #4a90e2 0%, #5ba3f5 100%);
    color: white;
}

.discount-rate.los-discount i {
    font-size: 11px;
}

/* 원래 가격 (취소선) */
.rate-price-original {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
    margin-bottom: 4px;
}

/* 최종 가격 */
.rate-price {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

/* 가격 단위 */
.rate-unit {
    font-size: 12px;
    color: #666;
}

/* 취소 규정 정보 */
.rate-cancellation-info {
	margin-top: 0.8rem;
	padding: 0.8rem;
	background: var(--gray-50);
	border-radius: var(--radius-sm);
	font-size: 0.80rem;
	color: var(--text-tertiary);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.rate-cancellation-info i {
	color: var(--primary-color);
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.rate-unit {
	font-size: 0.875rem;
	color: #6b7280;
}

.btn-select-rate {
	width: auto; 
	padding: 0.75rem 1.5rem;
	background-color: #1a1a1a;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
	margin-bottom: 0;
	align-self: flex-end;
}

/* 오른쪽 영역 래퍼 */
.rate-plan-right {
	display: flex;
	flex-direction: column;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   일자별 요금 상세 토글
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nightly-breakdown-container {
    margin-top: 1rem;
}

.nightly-breakdown-toggle {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #bacfe0;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

.nightly-breakdown-toggle:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.nightly-breakdown-toggle.active {
    background: #0066FF;
    border-color: #0066FF;
    color: white;
}

.nightly-breakdown-toggle.active:hover {
    background: #0052CC;
    border-color: #0052CC;
}

.nightly-breakdown-toggle-text {
	font-size: 0.8rem;
    flex: 1;
    text-align: left;
}

.nightly-breakdown-toggle-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.nightly-breakdown-toggle.active .nightly-breakdown-toggle-icon {
    transform: rotate(180deg);
}

.nightly-breakdown {
    margin-top: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.nightly-breakdown-room {
    padding: 0.6rem;
    background: white;
}

.nightly-breakdown-room:not(:last-child) {
    border-bottom: 1px solid #e9ecef;
}

.nightly-breakdown-room-title {
    font-weight: 600;
	color: #4b5563;
	margin-bottom: 0.4rem;
	font-size: 0.75rem; 
	padding-left: 0.4rem;
	border-left: 2px solid #10b981;
}

.nightly-breakdown-row {
    display: flex;
	justify-content: space-between;
	padding: 0.35rem 0.5rem;
	font-size: 0.8rem;
	background-color: white;
	border-radius: 4px;
	margin-bottom: 0.25rem;
}

.nightly-breakdown-row:not(:last-child) {
    border-bottom: 1px solid #f1f3f5;
}

.nightly-breakdown-row.free {
	background-color: #fef3c7;
	border: 1px dashed #f59e0b;

}

.nightly-date {
	font-weight: 500;
}

.nightly-price {
    font-weight: 600;
	color: #111827;
	white-space: nowrap;
	font-size: 0.8rem;
}

.nightly-price.free-night {
    color: #f59e0b;
	font-weight: 700;
	font-size: 0.85rem;
}

/* 요금 로딩 */
.rate-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	min-height: 200px;
}

.rate-loading-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid var(--gray-200);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.rate-loading-text {
	margin-top: 1.5rem;
	font-size: 1rem;
	color: var(--text-secondary);
	font-weight: 500;
}

/* 요금 조회 에러 */
.rate-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	min-height: 200px;
}

.rate-error-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.rate-error-text {
	font-size: 1rem;
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
}

.btn-retry {
	padding: 0.8rem 2rem;
	background: var(--primary-color);
	color: var(--white);
	border: none;
	border-radius: var(--radius-md);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-normal);
}

.btn-retry:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px var(--primary-opacity-30);
}

.reviews-summary {
	text-align: center;
	padding: 2rem;
	background: #fafafa;
	border-radius: var(--radius-lg);
	margin-bottom: 2rem;
}

.review-score {
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.review-item {
	padding: 2rem;
	border: 1px solid #e5e5e5;
	border-radius: var(--radius-lg);
	margin-bottom: 1.5rem;
}

.review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.reviewer-name {
	font-weight: 700;
}

.review-date {
	color: #999;
	font-size: 0.85rem;
}

.review-rating {
	color: #FFD700;
}

.review-content {
	color: #666;
	line-height: 1.8;
}

.map-container {
	width: 100%;
	height: 400px;
	background: #f5f5f5;
	border-radius: var(--radius-lg);
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
}

.info-list {
	list-style: none;
}

.info-list li {
	padding: 1.2rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.info-list li:last-child {
	border-bottom: none;
}

.hotel-info-label {
	font-weight: 700;
	color: #000;
}

.hotel-info-value {
	font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* 아코디언 스타일 */
.info-accordion {
	margin-top: 2rem;
}

.accordion-item {
	margin-bottom: 1rem;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	transition: all var(--transition-normal);
}

.accordion-item:hover {
	border-color: var(--accent-color);
}

.accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.0rem;
	cursor: pointer;
	background: #fafafa;
	transition: all 0.3s;
}

.accordion-header:hover {
	background: #f5f5f5;
}

.accordion-item.active .accordion-header {
	background: #f8f9fa;
	border-bottom: 1px solid #e5e5e5;
}

.accordion-title {
	font-size: 1.0rem;
	font-weight: 800;
	color: #000;
	margin: 0;
}

.accordion-icon {
	font-size: 1.5rem;
	font-weight: 300;
	color: #666;
	transition: transform 0.3s;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.accordion-item.active .accordion-icon {
	color: var(--accent-color);
}

.accordion-content {
	display: none;
	padding: 1.5rem;
	background: #fff;
}

.accordion-content .info-list {
	margin: 0;
}

.accordion-content .info-list li {
	padding: 1rem 0;
}

.accordion-content .info-list li:first-child {
	padding-top: 0;
}

.accordion-content .info-list li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.booking-card {
	padding: 1.5rem;
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.booking-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.booking-overlay.active {
    display: flex;
}

.booking-loader {
    background: white;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.booking-loader-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0066cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.booking-loader-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.booking-loader-text {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

.booking-loader-steps {
    margin-top: 24px;
    text-align: left;
}

.booking-loader-step {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9rem;
    color: #888;
    transition: all 0.3s ease;
}

.booking-loader-step.active {
    color: #0066cc;
    font-weight: 600;
}

.booking-loader-step.completed {
    color: #28a745;
}

.booking-loader-step-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.booking-loader-step.active .booking-loader-step-icon {
    border-color: #0066cc;
    background: #0066cc;
    color: white;
}

.booking-loader-step.completed .booking-loader-step-icon {
    border-color: #28a745;
    background: #28a745;
    color: white;
}

.booking-loader-step-icon .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0066cc;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 요금 변경 모달 */
.price-change-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.price-change-overlay.active {
    display: flex;
}

.price-change-modal {
    background: white;
    border-radius: 16px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: fadeInScale 0.3s ease-out;
}

.price-change-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 20px;
}

.price-change-icon.price-increase {
    color: #dc3545;
}

.price-change-icon.price-decrease {
    color: #28a745;
}

.price-change-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.price-change-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.price-change-item {
    flex: 1;
    text-align: center;
}

.price-label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.price-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.price-value.original {
    color: #666;
    text-decoration: line-through;
}

.price-value.new {
    font-size: 1.8rem;
}

.price-value.new.price-increase {
    color: #dc3545;
}

.price-value.new.price-decrease {
    color: #28a745;
}

.price-change-arrow {
    font-size: 2rem;
    font-weight: 700;
}

.price-change-arrow.price-increase {
    color: #dc3545;
}

.price-change-arrow.price-decrease {
    color: #28a745;
}

.price-change-diff {
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.price-change-diff.price-increase {
    background: #fff5f5;
    border: 2px solid #dc3545;
}

.price-change-diff.price-decrease {
    background: #f0fff4;
    border: 2px solid #28a745;
}

.price-diff-amount {
    font-size: 1.3rem;
    font-weight: 700;
    margin-right: 10px;
}

.price-diff-percent {
    font-size: 1rem;
    color: #666;
}

.price-change-reason {
    background: #fff9e6;
    border-left: 4px solid #ffc107;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.price-change-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: #e7f3ff;
    border-radius: 8px;
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: #0066cc;
}

.warning-icon {
    font-size: 1.2rem;
}

.price-change-actions {
    display: flex;
    gap: 10px;
}

.price-change-actions .btn-cancel,
.price-change-actions .btn-confirm {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.price-change-actions .btn-cancel {
    background: #e9ecef;
    color: #333;
}

.price-change-actions .btn-cancel:hover {
    background: #dee2e6;
}

.price-change-actions .btn-confirm {
    background: #0066cc;
    color: white;
}

.price-change-actions .btn-confirm.price-increase {
    background: #dc3545;
}

.price-change-actions .btn-confirm.price-decrease {
    background: #28a745;
}

.price-change-actions .btn-confirm:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 가격 요약 영역 */
.price-summary {
	margin-bottom: 1rem;
}

/* 요금 상세 내용 */
.price-detail-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 1.2rem;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	cursor: pointer;
	transition: all 0.3s;
	font-size: 0.85rem;
	font-weight: 600;
	color: #666;
}

.price-detail-toggle:hover {
	background: #f8f8f8;
	color: #000;
}

.toggle-icon {
	transition: transform 0.3s;
	font-size: 0.8rem;
}

.price-detail-toggle.active .toggle-icon {
	transform: rotate(180deg);
}


.price-detail-content {
	display: none;
	padding: 1.2rem;
	background: #fff;
	border-top: 1px solid #f0f0f0;
	font-size: 0.8rem;
}

.price-breakdown-section {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #f0f0f0;
}

.price-breakdown-title {
	font-size: 0.9rem;
	font-weight: 800;
	color: #000;
	margin-bottom: 0.8rem;
}

.price-breakdown-subtitle {
	font-size: 0.85rem;
	font-weight: 700;
	color: #333;
	margin-bottom: 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.subtitle-icon {
	font-size: 0.9rem;
}

.price-breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--gray-100);
	font-size: 0.9rem;
}

.price-breakdown-row:last-child {
	border-bottom: none;
}

.price-breakdown-row.total {
	padding: 1rem 0;
	margin-top: 0.5rem;
	border-top: 2px solid var(--border-dark);
	border-bottom: none;
	font-weight: 700;
	font-size: 1rem;
}

.price-breakdown-row.highlight {
	background: rgba(39, 174, 96, 0.05);
	padding: 0.8rem 1rem;
	margin: 0.3rem -1rem;
	border-radius: var(--radius-md);
	border-bottom: none;
}

.date-with-room {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1; /* ★ 추가 - 남은 공간 차지 */
}

.room-number {
	font-size: 0.75rem;
	color: #fff;
	background: var(--primary-color);
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-sm);
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0; /* ★ 추가 - 축소 방지 */
}

.date-text {
	font-size: 0.9rem;
	color: var(--text-primary);
	font-weight: 500; /* ★ 추가 - 가독성 향상 */
	flex-shrink: 0; /* ★ 추가 - 축소 방지 */
}

/* 기존 span 태그와의 충돌 방지 */
.price-breakdown-row > span:not(.date-with-room) {
	flex: 1;
}

.amount-primary {
	font-weight: 700;
	color: #000;
	font-size: 0.85rem;
}

.amount-secondary {
	font-size: 0.7rem;
	color: #999;
}

.price-policy-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.4rem 0;
	line-height: 1.5;
	color: #666;
	font-size: 0.78rem;
}

.policy-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 0.65rem;
	font-weight: 700;
}

.policy-icon.success {
	background: #d4edda;
	color: #27ae60;
}

.policy-icon.warning {
	background: #fff3cd;
	color: #ff9800;
}

.price-breakdown-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}



.subtitle-icon {
	font-size: 1rem;
}


.price-breakdown-row.total {
	padding: 1rem 0;
	margin-top: 0.5rem;
	border-top: 2px solid var(--border-dark);
	border-bottom: none;
	font-weight: 700;
	font-size: 1rem;
}

.price-breakdown-row.highlight {
	background: rgba(39, 174, 96, 0.05);
	padding: 0.8rem 1rem;
	margin: 0.3rem -1rem;
	border-radius: var(--radius-md);
	border-bottom: none;
}

.price-breakdown-amounts {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	min-width: 140px;
}

.amount-primary {
	font-weight: 700;
	color: var(--text-primary);
}

.amount-primary.free {
	color: var(--success);
	font-weight: 800;
}

.amount-secondary {
	font-size: 0.8rem;
	color: var(--text-tertiary);
}

.price-breakdown-row.highlight .price-breakdown-amounts {
	justify-content: center;
}

.accordion-icon {
    font-size: 1.5rem;
    color: var(--text-tertiary);
    transition: transform var(--transition-normal);
}

.room-delete-btn {
	width: 28px;
	height: 28px;
	border: none;
	background: var(--error);
	color: #fff;
	border-radius: 50%;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: all var(--transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.room-delete-btn:hover {
	background: #e53e3e;
	transform: scale(1.1);
}

.room-delete-btn:active {
	transform: scale(0.95);
}

/* ================================================
   호텔 태그 — 화이트 배경용
   promo-tags (사진 위) 와 동일 색상 계열 유지
   ================================================ */

.hotel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.hotel-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.2s ease;
    background: #f5f5f5;
    color: #555555;
    border: 1px solid #dddddd;
}

.hotel-tag:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* 할인 — 레드  (사진태그: rgba(180,50,50)) */
.hotel-tag.tag-discount {
    background: #f5f0f0;
    color: #9b2020;
    border: 1px solid #e8c4c4;
}

/* 특전 — 블루  (사진태그: rgba(50,100,160)) */
.hotel-tag.tag-special {
    background: #f0f4fa;
    color: #1e4d8c;
    border: 1px solid #bdd0ec;
}

/* 라스트미닛 — 앰버  (사진태그: rgba(180,120,20)) */
.hotel-tag.tag-lastminute {
    background: #fdf6e8;
    color: #8a5a0a;
    border: 1px solid #e8d090;
}

/* 얼리버드 — 딥골드  (사진태그: rgba(160,110,10)) */
.hotel-tag.tag-early {
    background: #faf4e5;
    color: #7a5208;
    border: 1px solid #dfc070;
}

/* 무료숙박 — 슬레이트퍼플  (사진태그: rgba(100,80,160)) */
.hotel-tag.tag-stay {
    background: #f4f2fa;
    color: #4a3a8a;
    border: 1px solid #c8bce8;
}

/* 웰니스 — 골드  (사진태그: rgba(150,120,40)) */
.hotel-tag.tag-wellness {
    background: #faf6ea;
    color: #7a6010;
    border: 1px solid #dcc870;
}

/* 미식 — 딥퍼플  (사진태그: rgba(90,50,150)) */
.hotel-tag.tag-gastronomy {
    background: #f5f0fa;
    color: #48208a;
    border: 1px solid #c8a8e4;
}

/* 헤리티지 — 로즈  (사진태그: rgba(170,50,100)) */
.hotel-tag.tag-heritage {
    background: #faf0f4;
    color: #8a1a40;
    border: 1px solid #e4b0c8;
}

/* 어반 — 틸  (사진태그: rgba(20,120,110)) */
.hotel-tag.tag-urban {
    background: #f0faf8;
    color: #0a6058;
    border: 1px solid #90d0c8;
}

/* 하이드어웨이 — 워밍앰버  (사진태그: rgba(160,100,20)) */
.hotel-tag.tag-hideaway {
    background: #fdf5e8;
    color: #7a4a08;
    border: 1px solid #e0c080;
}

/* 기본 */
.hotel-tag.tag-default {
    background: #f5f5f5;
    color: #555555;
    border: 1px solid #dddddd;
}

/* 예약 폼의 guest-display는 배경 제거 */
.booking-card .guest-display {
	background: transparent;
	padding: 0.8rem;
	border: 1px solid #ddd;
	border-radius: var(--radius-md);
	cursor: pointer;
	margin-bottom: 1.2rem;
}

.guest-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--border-light);
}

.guest-row:last-child {
	border-bottom: none;
}

.guest-row > span {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-primary);
}

.guest-control {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.guest-btn {
	width: 36px;
	height: 36px;
	border: 1px solid var(--border-dark);
	background: #fff;
	border-radius: 50%;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--text-primary);
	cursor: pointer;
	transition: all var(--transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
}

.guest-btn:hover {
	border-color: var(--primary-color);
	color: var(--primary-color);
	background: var(--primary-opacity-10);
}

.guest-btn:active {
	transform: scale(0.95);
}

.guest-btn:hover:not(:disabled) {
	border-color: #000;
	background: #f5f5f5;
}

.guest-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.guest-control > span {
	min-width: 40px;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
}

.guest-count {
	min-width: 40px;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text-primary);
}

.children-ages {
	display: none;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-light);
}

.children-ages.show {
	display: block;
}

.child-age-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0;
}

.child-age-row span {
	font-size: 0.9rem;
	color: var(--text-secondary);
}

.child-age-select {
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-md);
	font-size: 0.9rem;
	background: #fff;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.child-age-select:hover {
	border-color: var(--primary-color);
}

.child-age-select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px var(--primary-opacity-10);
}

.children-ages-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text-secondary);
	margin-bottom: 0.8rem;
}

.date-display {
	padding: 0.8rem;
	border: 1px solid #ddd;
	border-radius: var(--radius-md);
	cursor: pointer;
	margin-bottom: 1rem;
}

.date-label {
	font-size: 0.7rem;
	color: #666;
	margin-bottom: 0.2rem;
}

.date-value {
	font-size: 0.9rem;
	font-weight: 700;
}

.nights-info {
	text-align: center;
	font-size: 0.8rem;
	color: #666;
	margin-top: 0.4rem;
}

.date-display:hover {
	border-color: #000;
}

.date-display-content {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
}

.date-item {
	text-align: center;
}

.calendar-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 4000;
}

.calendar-overlay.active {
	display: block;
}

.calendar-popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	z-index: 4001;
	max-width: 95%;
	width: 850px;
}

.calendar-body {
	padding: 1.2rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.calendar-month-container {
	display: flex;
	flex-direction: column;
}

.calendar-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 1.2rem;
	gap: 1rem;
}

.calendar-month-title {
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.calendar-popup.active {
	display: block;
}

.calendar-header {
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 700;
    font-size: 1.1rem;
}

.calendar-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calendar-reset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-reset-btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
    color: #333;
}

.calendar-reset-btn:active {
    transform: scale(0.98);
}

.calendar-reset-btn svg {
    flex-shrink: 0;
}
.calendar-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
}

#currentMonth {
	font-size: 1rem;
	font-weight: 700;
}

.calendar-nav-btn {
	background: #f5f5f5;
	border: none;
	cursor: pointer;
	font-size: 1.3rem;
	padding: 0.4rem 0.8rem;
	border-radius: var(--radius-sm);
	transition: all 0.3s;
	min-width: 32px;
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar-nav-btn:hover {
	background: #e5e5e5;
}

.calendar-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: var(--radius-sm);
	font-size: 0.85rem;
}

.calendar-day:hover:not(.disabled):not(.empty) {
	background: #f5f5f5;
}

.calendar-day.disabled {
	color: #ddd;
	cursor: not-allowed;
}

.calendar-day.start, .calendar-day.end {
	background: #000;
	color: #fff;
	font-weight: 700;
}

.calendar-day.start:hover, .calendar-day.end:hover {
	background: #222 !important;
	color: #fff;
}

.calendar-day.in-range {
	background: #f0f0f0;
}

.calendar-day.empty {
	visibility: hidden;
	pointer-events: none;
}

.calendar-footer {
	padding: 1.2rem;
	border-top: 1px solid #e5e5e5;
	display: flex;
	gap: 0.8rem;
}

.calendar-btn {
	flex: 1;
	padding: 0.75rem;
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 700;
	cursor: pointer;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 0.9rem;
}

.calendar-btn.cancel {
	background: #f5f5f5;
}

.calendar-btn.confirm {
	background: #000;
	color: #fff;
}

.guest-section {
	background: #fafafa;
	border-radius: var(--radius-md);
}

.guest-popup-body .guest-section {
	padding: 1rem;
	background: #fff;
}

/* 객실 수 선택 */
.room-count-section {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--border-dark);
}

/* 각 객실 섹션 */
.room-guest-section {
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	background: var(--gray-50);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-light);
}

.room-guest-section:last-child {
	margin-bottom: 0;
}

.room-guest-header {
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--border-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.guest-display {
	padding: 1rem;
	border: 1px solid #ddd;
	border-radius: var(--radius-md);
	cursor: pointer;
	margin-bottom: 1rem;
}

.guest-display:hover {
	border-color: #000;
}

.guest-display-content {
	text-align: center;
}

.guest-label {
	font-size: 0.7rem;
	color: #666;
	margin-bottom: 0.2rem;
}

.guest-value {
	font-size: 0.9rem;
	font-weight: 700;
}

.guest-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 4000;
}

.guest-overlay.active {
	display: block;
}

.guest-popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: var(--radius-xl);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	z-index: 4001;
	max-width: 90%;
	width: 500px;
}

.guest-popup.active {
	display: block;
}

.guest-popup-header {
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 700;
    font-size: 1.1rem;
}

.guest-popup-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-reset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.guest-reset-btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
    color: #333;
}

.guest-reset-btn:active {
    transform: scale(0.98);
}

.guest-reset-btn svg {
    flex-shrink: 0;
}

.guest-popup-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
}

.guest-popup-body {
	padding: 1.5rem;
	max-height: 70vh;
	overflow-y: auto;
}

.guest-popup-footer {
	padding: 1.5rem;
	border-top: 1px solid #e5e5e5;
	display: flex;
	gap: 1rem;
}

.guest-popup-btn {
	flex: 1;
	padding: 0.9rem;
	border: none;
	border-radius: var(--radius-md);
	font-weight: 700;
	cursor: pointer;
	font-family: 'Nanum Gothic', sans-serif;
}

.guest-popup-btn.cancel {
	background: #f5f5f5;
}

.guest-popup-btn.confirm {
	background: #000;
	color: #fff;
}

.btn-primary {
	width: 100%;
	padding: 0.9rem;
	border: none;
	font-size: 0.95rem;
	font-weight: 800;
	cursor: pointer;
	font-family: 'Nanum Gothic', sans-serif;
	background: var(--black);
	color: var(--white);
	border-radius: var(--radius-md);
	transition: all var(--transition-normal);
}

.btn-primary:hover {
	background: var(--gray-800);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-info {
	width: 100%;
	padding: 0.9rem;
	border: none;
	font-size: 0.95rem;
	font-weight: 800;
	cursor: pointer;
	background: #1a1a1a;
	color: var(--white);
	border-radius: var(--radius-md);
	transition: all var(--transition-normal);
}

.btn-info:hover {
	background: var(--primary-light);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 요금 없음 컨테이너 */
.no-rate-available {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 10px;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-radius: 16px;
	border: 2px dashed #cbd5e1;
	text-align: center;
	min-height: 80px;
	justify-content: center;
}

/* 아이콘 */
.no-rate-icon {
	margin-bottom: 18px;
	animation: fadeInScale 0.5s ease-out;
}

.no-rate-icon svg {
	filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.1));
}

/* 컨텐츠 */
.no-rate-content {
	max-width: 600px;
}

.no-rate-title {
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 12px;
	line-height: 1.4;
}

.no-rate-description {
	font-size: 13px;
	color: #64748b;
	line-height: 1.6;
	margin-bottom: 32px;
}

/* 버튼 그룹 */
.no-rate-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.no-rate-actions button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	outline: none;
}

/* 날짜 변경 버튼 */
.btn-modify-search {
	background: white;
	color: #3b82f6;
	border: 2px solid #3b82f6;
}

.btn-modify-search:hover {
	background: #3b82f6;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
}

/* 카카오톡 상담 버튼 */
.btn-kakao-inquiry {
	background: #FEE500;
	color: #3c1e1e;
	border: 2px solid #FEE500;
	position: relative;
	overflow: hidden;
}

.btn-kakao-inquiry::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.5s, height 0.5s;
}

.btn-kakao-inquiry:hover::before {
	width: 300px;
	height: 300px;
}

.btn-kakao-inquiry:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(254, 229, 0, 0.4);
}

.btn-kakao-inquiry svg {
	position: relative;
	z-index: 1;
}

.btn-kakao-inquiry span {
	position: relative;
	z-index: 1;
}

/* 안내 문구 */
.no-rate-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: #64748b;
	padding: 12px 20px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.no-rate-info i {
	color: #3b82f6;
}

/* 검색 폼 하이라이트 애니메이션 */
.highlight-pulse {
	animation: pulse 2s ease-in-out;
}

@keyframes pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
	}
	50% {
		box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
	}
}

/* 아동 나이 선택 필수 표시 */
.children-ages-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #374151;
    font-size: 0.9rem;
}

/* 미선택 상태 스타일 */
.child-age-select.unselected {
    border: 2px solid #f59e0b !important;
    background-color: #fffbeb;
    color: #92400e;
    font-weight: 600;
}

/* 선택 완료 상태 */
.child-age-select:not(.unselected) {
    border: 1px solid #d1d5db;
    background-color: white;
}

/* placeholder 옵션 스타일 */
.child-age-select option[value=""] {
    color: #9ca3af;
    font-style: italic;
}

/* 포커스 상태 */
.child-age-select.unselected:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    outline: none;
}

/* 선택 완료 후 포커스 */
.child-age-select:not(.unselected):focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* 경고 애니메이션 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

.child-age-select.unselected.shake {
    animation: shake 0.4s ease-in-out;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   호텔 특전 스타일
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.benefits-intro {
    background: linear-gradient(135deg, #8B6914 0%, #C9A961 50%, #D4AF37 100%);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
    padding: 1.2rem;
    border-radius: 12px 12px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.benefits-intro::before {
    content: '\f005';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    font-size: 2rem;
    color: rgba(255, 215, 0, 0.3);
}

.benefits-intro::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.benefits-list {
    background: #f8fafc;
    border: 2px solid #D4AF37;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 0 1.4rem;
    display: grid;
}

.benefit-item {
    background: white;
    border-radius: 10px;
    padding: 0.5;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
    border-left-color: #D4AF37;
}

.benefit-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF9E6 0%, #F4E4C1 100%);
    border-radius: 10px;
}

.benefit-icon i {
    color: #D4AF37;
}

.benefit-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
}

.benefit-text strong {
    color: #1e293b;
    font-weight: 700;
}

.benefit-note {
    display: block;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.25rem;
    font-style: italic;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   공유하기 기능
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 호텔 타이틀 + 공유 버튼 행 */
.hotel-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.hotel-title-row .hotel-title {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* 공유 컨테이너 (팝업 기준점) */
.share-container {
    position: relative;
    flex-shrink: 0;
    align-self: center;
}

/* 공유 버튼 */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 5px;
    color: #555;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: 'Nanum Gothic', sans-serif;
}

.share-btn:hover {
    border-color: #888;
    color: #111;
    background: #f7f7f7;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.share-btn svg {
    flex-shrink: 0;
}

/* ── 공유 팝업 (데스크탑: 드롭다운) ── */
.share-popup {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    min-width: 210px;
    z-index: 3999;
    overflow: hidden;
    animation: shareDropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.share-popup.active {
    display: block;
}

@keyframes shareDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 팝업 헤더 */
.share-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f2f2f2;
}

.share-popup-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111;
}

/* 닫기 버튼 — 모바일에서만 표시 */
.share-popup-close {
    display: none;
    width: 28px;
    height: 28px;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    color: #555;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}

.share-popup-close:hover {
    background: #e5e7eb;
}

/* 공유 옵션 목록 */
.share-options {
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 개별 공유 옵션 */
.share-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: 'Nanum Gothic', sans-serif;
    transition: background 0.15s ease;
}

.share-option:hover {
    background: #f5f5f5;
}

.share-option:active {
    background: #ebebeb;
    transform: scale(0.98);
}

/* 아이콘 원형 배경 */
.share-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.share-option-icon.share-link     { background: #f0f0f0; color: #444; }
.share-option-icon.share-kakao    { background: #FEE500; color: #3c1e1e; }
.share-option-icon.share-facebook { background: #1877F2; color: #fff; }
.share-option-icon.share-x        { background: #000;    color: #fff; }

.share-option-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1f1f1f;
}

/* ── 모바일 오버레이 ── */
.share-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 3998;
    opacity: 0;
    transition: opacity 0.3s;
}

.share-overlay.active {
    display: block;
    opacity: 1;
}

/* ── 복사 완료 토스트 ── */
.share-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(20, 20, 20, 0.82);
    color: #fff;
    padding: 11px 22px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.share-toast.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* 반응형 */
@media ( max-width : 1024px) {
	.content-wrapper {
		grid-template-columns: 1fr;
	}
	
	.right-booking {
        display: none !important;
    }
    .mobile-bottom-bar {
        display: block !important;
    }
    .mobile-booking-sheet {
		display: block !important;
	}
	.mobile-booking-overlay {
		display: block !important;
	}
}

@media ( max-width : 768px) {
	.gallery-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(5, 220px);
	}
	.gallery-item:first-child {
		grid-row: auto;
	}
	
	.section-tab {
	    padding: 0.9rem 1.2rem;
	}
	
	.amenities-section {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.hotel-detail-amenities-section {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
		margin: 2rem 0;
	}
	
	.promo-items {
		grid-template-columns: 1fr;
	}
	.room-main-info {
		grid-template-columns: 1fr;
	}
	.rate-plan-item {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.rate-plan-action-column {
		width: 100%;
	}
	
	.rate-plan-price {
		text-align: right;
	}
	
	.discount-badges-group {
        gap: 4px;
    }
    
    .discount-rate {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    .rate-price {
        font-size: 20px;
    }
	
	.btn-select-rate {
		width: 100%;
		align-self: stretch;
	}
	
	.nightly-breakdown-row {
		font-size: 0.75rem;
	}
	
	.nightly-price {
		font-size: 0.75rem;
	}
	.rate-plan-item:hover {
		transform: translateY(-1px);
	}
	
	.rate-loading {
		padding: 3rem 1.5rem;
		min-height: 150px;
	}
	
	.rate-loading-spinner {
		width: 40px;
		height: 40px;
	}
	
	.rate-loading-text {
		font-size: 0.9rem;
	}
	
	.rate-error {
		padding: 3rem 1.5rem;
	}
	
	.rate-error-icon {
		font-size: 2.5rem;
	}
	
	.info-list li {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	.info-grid-images {
		grid-template-columns: repeat(2, 1fr);
	}
	.info-large-image img, .info-video-container {
		height: 300px;
	}
	
	.gallery-viewer-nav {
		width: 45px;
		height: 45px;
		font-size: 1.5rem;
	}
	
	.gallery-viewer-nav.prev {
		left: 1rem;
	}
	
	.gallery-viewer-nav.next {
		right: 1rem;
	}
	
	.gallery-viewer-close {
		top: 1rem;
		right: 1rem;
		width: 40px;
		height: 40px;
		font-size: 2rem;
	}
	
	.gallery-viewer-thumbnails {
		bottom: 4rem;
		gap: 0.5rem;
	}
	
	.gallery-thumbnail {
		width: 60px;
		height: 45px;
	}
	
	/* 달력 모달 모바일 최적화 */
	.calendar-popup {
		width: 95%;
		max-height: 90vh;
		top: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
	}
	
	.calendar-popup.active {
		display: flex;
		flex-direction: column;
	}
	
	.calendar-header {
		flex-shrink: 0;
		padding: 1rem;
		font-size: 0.95rem;
	}
	
	.calendar-close {
		font-size: 1.3rem;
	}
	
	.calendar-body {
		flex: 1;
		overflow-y: auto;
		padding: 1rem;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.calendar-body::-webkit-scrollbar {
		width: 4px;
	}
	
	.calendar-body::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	
	.calendar-body::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 2px;
	}
	
	.calendar-controls {
		margin-bottom: 1rem;
	}
	
	.calendar-nav-btn {
		min-width: 36px;
		min-height: 36px;
		font-size: 1.2rem;
		padding: 0.5rem 0.8rem;
	}
	
	.calendar-month-title {
		font-size: 0.95rem;
	}
	
	.calendar-day {
		font-size: 0.8rem;
	}
	
	.calendar-footer {
		flex-shrink: 0;
		padding: 1rem;
		gap: 0.6rem;
	}
	
	.calendar-btn {
		padding: 0.8rem;
		font-size: 0.85rem;
	}
	
	/* 인원 선택 모달 모바일 최적화 */
	.guest-popup {
		width: 95%;
		max-height: 90vh;
	}
	
	.guest-popup.active {
		display: flex;
		flex-direction: column;
	}
	
	.guest-popup-header {
		flex-shrink: 0;
		padding: 1rem;
		font-size: 1rem;
	}
	
	.guest-popup-close {
		font-size: 1.3rem;
	}
	
	.guest-popup-body {
		flex: 1;
		overflow-y: auto;
		padding: 1rem;
		max-height: none;
	}
	
	.guest-popup-body::-webkit-scrollbar {
		width: 4px;
	}
	
	.guest-popup-body::-webkit-scrollbar-track {
		background: #f1f1f1;
	}
	
	.guest-popup-body::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 2px;
	}
	
	.guest-popup-footer {
		flex-shrink: 0;
		padding: 1rem;
		gap: 0.6rem;
	}
	
	.guest-popup-btn {
		padding: 0.8rem;
		font-size: 0.85rem;
	}
	
	.benefits-intro {
        padding: 1.1rem;
        font-size: 0.95rem;
        border-radius: 10px 10px 0 0;
    }
    
    .benefits-intro::before {
        font-size: 1.5rem;
        right: 1rem;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: rgba(255, 215, 0, 0.4);
    }
    
    .benefits-list {
        padding: 0 1.2rem;
        border-radius: 0 0 10px 10px;
    }
    
    .benefit-item {
        padding: 1rem;
        gap: 0.875rem;
    }
    
    .benefit-icon {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
    }
    
    .benefit-text {
        font-size: 0.875rem;
    }
    
    .benefit-note {
        font-size: 0.75rem;
    }
    
    .share-btn-label {
        display: none; /* 아이콘만 표시 */
    }

    .share-btn {
        padding: 8px 10px;
        border-radius: 8px;
    }

    /* 바텀시트 */
    .share-popup {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: unset;
        border-radius: 20px 20px 0 0;
        border: none;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
        z-index: 4000;
        padding-bottom: env(safe-area-inset-bottom, 8px);
        animation: shareSheetIn 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes shareSheetIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0);    }
    }

    .share-popup-close {
        display: flex; /* 모바일에서 닫기 버튼 표시 */
    }

    .share-popup-header {
        padding: 16px 18px 12px;
    }

    .share-popup-title {
        font-size: 1rem;
    }

    .share-options {
        padding: 10px 12px 16px;
        gap: 4px;
    }

    .share-option {
        padding: 13px 12px;
        border-radius: 12px;
    }

    .share-option-icon {
        width: 46px;
        height: 46px;
        border-radius: 5px;
    }

    .share-option-label {
        font-size: 0.98rem;
    }

    .share-toast {
        bottom: 80px;
        font-size: 0.85rem;
    }
}

@media ( max-width : 480px) {
	.guest-popup {
		width: 100%;
		border-radius: var(--radius-lg);
		max-height: 100vh;
	}
	
	.guest-popup-body {
		max-height: calc(100vh - 150px);
		padding: 1rem;
	}
	
	.room-count-section {
		padding-bottom: 1rem;
		margin-bottom: 1rem;
	}
	
	.room-guest-section {
		padding: 0.8rem;
		margin-bottom: 1rem;
	}
	
	.guest-row {
		padding: 0.8rem 0;
	}
	
	.guest-control {
		gap: 0.8rem;
	}
	
	.guest-btn {
		width: 30px;
		height: 30px;
		font-size: 0.9rem;
	}
	
	.guest-count {
		min-width: 35px;
		font-size: 1rem;
	}
	
	.price-breakdown-amounts {
		min-width: 100px;
	}
	
	.amount-primary {
		font-size: 0.85rem;
	}
	
	.amount-secondary {
		font-size: 0.75rem;
	}
	
	.date-with-room {
		gap: 0.4rem;
		flex-direction: row; /* 모바일에서도 가로 유지 */
	}
	
	.room-number {
		font-size: 0.65rem;
		padding: 0.2rem 0.4rem;
	}
	
	.date-text {
		font-size: 0.8rem;
	}
	
	.date-info {
		gap: 0.4rem;
		font-size: 0.85rem;
	}
	
	.room-image-slider {
		height: 240px;
	}
	
	.room-slider-btn {
		width: 32px;
		height: 32px;
		opacity: 1; /* 소형 모바일도 항상 표시 */
	}
	
	.room-slider-btn svg {
		width: 16px;
		height: 16px;
	}
	
	.room-slider-prev {
		left: 6px;
	}
	
	.room-slider-next {
		right: 6px;
	}
	
	.hotel-tags {
        gap: 0.4rem;
    }
    
    .hotel-tag {
        padding: 0.3rem 0.7rem;
        font-size: 0.7rem;
    }
    
    .no-rate-available {
		padding: 20px 10px;
		min-height: 80px;
	}
	
	.no-rate-title {
		font-size: 15px;
	}
	
	.no-rate-description {
		font-size: 12px;
	}
	
	.no-rate-actions {
		flex-direction: column;
		width: 100%;
	}
	
	.no-rate-actions button {
		width: 100%;
		justify-content: center;
	}
	
	.benefits-intro {
        padding: 1rem;
        font-size: 0.875rem;
    }
    
    .benefits-list {
        padding: 0 1rem;
    }
    
    .benefit-item {
        padding: 0.875rem;
        flex-direction: row;
        align-items: flex-start;
    }
    
    .benefit-icon {
        font-size: 1.25rem;
        width: 36px;
        height: 36px;
    }
}