.main{
	/*background-color:var(--primary_color);*/
}

.rooms_bg{
    padding-top: clamp(3.549rem, 5.73vw, 6.875rem) ;
    padding-bottom: clamp(2.742rem, 4.43vw, 5.313rem);
}

.rooms_bg .wrap {
    /* width: 100%;
    max-width: 81.25rem;
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem); */
}

/* 圖片預留空間 placeholder */
.rooms_bg .img {
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #dde3e8 0 0.75rem, #d3dae0 0.75rem 1.5rem);
}

.rooms_bg .img img {
    /* position: absolute; */
    /* inset: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* object-fit: cover; */
    /* display: block; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-data);
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: var(--transition-data);
}




.rooms_bg .img .ph-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Courier New", monospace;
    font-size: 0.813rem;
    color: #5d6b78;
    background: rgba(255, 255, 255, .82);
    padding: 0.3rem 0.7rem;
    border-radius: 0.2rem;
    letter-spacing: .5px;
    white-space: nowrap;
    pointer-events: none;
}

/* -------------------------------------------------------- */
/* 頁面標題                                                  */
/* -------------------------------------------------------- */
.rooms_head {
    text-align: center;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 4vw, 3rem);
}

.rooms_head .en {
    display: block;
    font-family: var(--foreign_font);
    font-size: 0.875rem;
    letter-spacing: 0.35em;
    color: #8a929c;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

.rooms_head strong {
    display: block;
    font-family: var(--foreign_font);
    font-weight: 600;
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    letter-spacing: 0.18em;
    color: var(--second_color);
}

.rooms_head p {
    max-width: 42rem;
    margin: 1.1rem auto 0;
    font-size: 1rem;
    color: var(--dark_color);
    letter-spacing: .5px;
    line-height: 1.9;
}

/* -------------------------------------------------------- */
/* 房型區塊（共用結構，外觀差異由 modifier 控制）            */
/* spa_area > spa_list > spa_card > spa_in > spa_content */
/* -------------------------------------------------------- */
.spa_area {
    margin: 0;
    padding: 0;
    list-style-type : none;
    display: block;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(3.549rem, 5.73vw, 6.875rem);
    /* padding-bottom: clamp(4rem, 9vw, 7rem); */
}

.spa_card {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.spa_card .spa_in {
    min-width: 0;
}

/* 偶數房型左右對調，營造節奏 */
.spa_list:nth-child(even) .spa_card {
    direction: rtl;
}

.spa_list:nth-child(even) .spa_card>* {
    direction: ltr;
}

/* ---- 圖庫（Swiper Thumbs gallery loop） ---- */
.spa_gallery {
    position: relative;
}

.spa_main {
    border-radius: 0.5rem;
    overflow: hidden;
}

.spa_main .swiper-slide .img {
    /* aspect-ratio: 4/3; */
    aspect-ratio: 1.62 / 1;
    position: relative;
}
    .spa_main .swiper-slide .img:before{
        pointer-events: none;
        position: absolute;
        content: "";
        width: calc(100% - clamp(0.968rem, 1.56vw, 1.875rem));
        height:calc(100% - clamp(0.968rem, 1.56vw, 1.875rem));
        border: .0625rem solid #fff;
        border-bottom-left-radius: clamp(3.226rem, 5.21vw, 6.25rem);
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        z-index: 2;
        mix-blend-mode: overlay; /*覆蓋*/
        border-radius: 0.5rem;
    } 



.spa_name_tag {
    position: absolute;
    left: 1.4rem;
    bottom: 1.4rem;
    z-index: 5;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.spa_name_tag .en {
    display: block;
    font-family: var(--foreign_font);
    font-size: 0.813rem;
    letter-spacing: 0.28em;
    opacity: .92;
}

.spa_name_tag strong {
    display: block;
    font-family: var(--foreign_font);
    font-weight: 600;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    letter-spacing: 0.1em;
    line-height: 1.25;
}

.spa_main .nav_btn {
    position: absolute;
    /* top: calc(50% - 1.7rem); */
    top: calc(50% - 0rem);
    transform: translateY(-50%);
    z-index: 6;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(30, 79, 126, .32);
    backdrop-filter: blur(2px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-data);
}

.spa_main .nav_btn:hover {
    background: var(--second_color);
    border-color: var(--second_color);
}

.spa_main .nav_btn.prev {
    left: 1rem;
}

.spa_main .nav_btn.next {
    right: 1rem;
}

.spa_main .nav_btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.spa_thumbs {
    margin-top: 0.85rem;
}

.spa_thumbs .swiper-slide {
    cursor: pointer;
    /* border-radius: 0.35rem; */
    border-radius: clamp(0.645rem, 1.04vw, 1.25rem);
    overflow: hidden;
    /* opacity: .55; */
    opacity: 1;
    transition: var(--transition-data);
}

.spa_thumbs .swiper-slide .img {
    /* aspect-ratio: 4/3; */
    position: relative;
    aspect-ratio: 1.62 / 1;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: clamp(0.645rem, 1.04vw, 1.25rem);
    transition: var(--transition-data);
}

/* .spa_thumbs .swiper-slide-thumb-active .img {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--second_color);
} */
.spa_thumbs .swiper-slide-thumb-active .img:before ,
.spa_thumbs .swiper-slide-thumb-active .img:after {
    pointer-events: none;
    position: absolute;
    content: "";
    /* width: calc(100% - clamp(0.968rem, 1.56vw, 1.875rem));
    height: calc(100% - clamp(0.968rem, 1.56vw, 1.875rem)); */
    width: calc(100% - 0.375rem);
    height: calc(100% - 0.375rem);
    border: 0.1875rem solid #fff;
    border-radius: 0;
    border-radius: clamp(0.645rem, 1.04vw, 1.25rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    mix-blend-mode: overlay;
}
.spa_thumbs .swiper-slide .img:hover {
    opacity:0.5;
    transition: var(--transition-data);
}


/* ---- 房型資訊 ---- */
.spa_content .spa_kicker {
    font-family: var(--foreign_font);
    font-size: 0.813rem;
    letter-spacing: 0.3em;
    color: #8a929c;
    text-transform: uppercase;

    display: none;
}

.spa_content .spa_title {
    /* font-family: var(--foreign_font); */
    font-weight: 600;
    font-size: clamp(1.6rem, 3.6vw, 2.25rem);
    letter-spacing: 0.1em;
    color: var(--dark_color_sec);
    margin-top: 0.5rem;
    font-family: var(--mandarin_font2);
    font-weight: 700;
    line-height: 1.3;
}

/* .spa_content .spa_specs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.4rem;
    font-size: 1rem;
    color: #52606e;
    letter-spacing: .5px;
}

.spa_content .spa_specs li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.spa_content .spa_specs li::before {
    content: "";
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary_color);
} */


.spa_content .spa_specs {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/* margin-bottom: clamp(1.452rem, 2.34vw, 2.813rem); */
	/* border-bottom: 1px solid rgba(0, 0, 0, 0.08); */
}

.spa_content .spa_specs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--dark_color);
}

.spa_content .spa_specs li .material-icons {
	font-size: 1.125rem;
	color: var(--primary_color);
	flex-shrink: 0;
}

.spa_content .spa_specs span{
    font-size: clamp(0.938rem, 0.871rem + 0.11vw, 1rem);
    color: var(--dark_color);
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

.spa_content .spa_specs a {
    color: inherit;
    text-decoration: none;
}

.spa_content .spa_specs a:hover {
    color: var(--primary_color);
}

.spa_content .spa_desc {
    font-size: 1rem;
    color: var(--dark_color);
    line-height: 1.9;
    margin-top: 1.5rem;
}

.spa_content .spa_price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1.75rem;
    font-size: 1rem;
    color: var(--dark_color);
    letter-spacing: .5px;
}

.spa_content .spa_price strong {
    font-family: var(--foreign_font);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    color: var(--primary_color);
    /* letter-spacing: .02em; */
}







    .spa_content .spa_actions ,
	.more_link_btn2{
		justify-content: unset;
		/* gap: 0.25rem;
		font-weight: 600;
		color: var(--dark_color_sec);		
		transition: var(--transition-data);
		text-decoration: none;		
		font-size: clamp(0.909rem, 0.546rem + 0.59vw, 1.25rem);	 */
        
        gap: 0.9rem;
        margin-top: 1.9rem;
	}

		/* .spa_content .more_link_btn2 a , 
        .spa_content .more_link_btn2 .more_btn{
			margin: 0;
			padding: 0;
			font-size: inherit;
			font-weight: inherit;
			line-height: inherit;
			color      : inherit;
			gap: inherit;
			display: flex;
			text-decoration: none !important;
			padding: clamp(0.71rem, 0.001rem + 1.15vw, 1.375rem) clamp(1.032rem, 1.67vw, 2rem);
			border-radius: .3125rem;
			border: var(--dark_color_sec) 1px solid;
			width: max-content;
			transition: var(--transition-data);
		}
			.spa_content .more_link_btn2 .btn_text{
				margin: 0;
				padding: 0;
				font-size: inherit;
				font-weight: inherit;
				line-height: inherit;
				color      : inherit;
				display: flex;
				align-items: center;
				gap: inherit;
			}
			.spa_content .more_link_btn2 .btn_text::after{
				content: '\F138';
				font-family: 'bootstrap-icons';
				font-weight: 900;
				font-size: calc(clamp(0.938rem, 0.871rem + 0.11vw, 1rem) * 1.25);
			} */


        .spa_content .more_link_btn2 .ghost {
            background: #fff;
            color: var(--primary_color);
            border: 1px solid var(--primary_color);
        }

        /* .spa_content .more_link_btn2 .ghost:hover {
            background: var(--primary_color);
            color: #fff;
        } */

        .spa_content .more_link_btn2 .solid {
            background: var(--primary_color);
            color: #fff;
        }

        .spa_content .more_link_btn2 .more_btn:hover {
            /* background: var(--third_color); */
            /* border-color: var(--third_color); */
            color: #fff;
        }




/* .spa_content .spa_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.9rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1rem;
    letter-spacing: 0.12em;
    padding: 0.85rem 1.7rem;
    border-radius: 0.3rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-data);
    border: 1px solid var(--primary_color);
}

.btn svg {
    width: 0.95rem;
    height: 0.95rem;
}



 */
















@media (max-width:820px) {
    .spa_card {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .spa_list:nth-child(even) .spa_card {
        direction: ltr;
    }

    .spa_main .nav_btn {
        width: 2.5rem;
        height: 2.5rem;
    }
}