/* Facility Card Styles */
.scroll-wrapper {
    position: relative;
    margin: 0 -12px; /* 컨테이너 패딩 보정 */
    padding: 0 12px;
}
.scroll-container {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    
    gap: 1rem; /* Gap between cards */
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.facility-cards-inner-container {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to enable horizontal scroll */
    gap: 1rem; /* 16px gap between cards */
    justify-content: flex-start; /* Align cards to the start for scrolling */
}

.facility-card {
    position: relative;
    border: 1px solid #eee;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #fff;
    min-width: 16.5rem; /* Minimum width for facility card */
    max-width: 20rem; /* Maximum width for facility card */
    width: 100%; /* Allow card to take full width of its container */
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* 카드가 축소되지 않도록 변경 */
}

.facility-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
}

.facility-card-header {
    display: flex;
    align-items: center;
    padding: 0.75rem; /* Reduced padding */
    gap: 0.75rem;
}

.facility-image-container {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f0f0f0;
    overflow: hidden;
}

.facility-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility-title-group {
    flex-grow: 1;
}

.facility-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facility-subtitle {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facility-card-body {
    padding: 0 0.75rem 0.75rem 0.75rem; /* Reduced padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.facility-body-image-container {
    display: none; /* 메인페이지에서 숨기기, 전용페이지에서 보여주기 Hide the image container by default */
    width: 100%;
    height: 8rem; /* Fixed height for the image */
    overflow: hidden;
    padding: 0 0.75rem 0.75rem 0.75rem; /* Reduced padding */
    border-radius: 0.5rem; /* Slightly rounded corners */
}

.facility-body-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
}

.facility-description {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.75rem;
    line-height: 1.5;
    height: 5.4rem; /* line-height * 4 lines */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facility-price-info {
    display: flex;
    align-items: flex-end; /* Changed to flex-end for bottom alignment */
    justify-content: flex-end; /* Align items to the right */
}

.facility-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-right: 0.5rem; /* Added margin for spacing */
}

.facility-discount {
    font-size: 0.8rem;
    color: #e60023; /* Red for discount */
    font-weight: 500;
}
.facility-metrics {
    display: flex;
    justify-content: space-between; /* Align items to both ends */
    align-items: center; /* Vertically align items */
    gap: 0.75rem; /* Gap between location and metrics group */
    font-size: 0.8rem;
    color: #999;
}

.facility-metrics-group {
    display: flex;
    align-items: center; /* 세로 정렬을 위해 추가 */
}

.facility-subscribers,
.facility-likes {
    font-size: 0.8rem;
    color: #999;
}
.facility-subscribers {
    margin-left: 0.7rem; /* 간격을 위해 왼쪽 여백 추가 */
}

.facility-tags {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* 태그 간 간격 */
}

.facility-location {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.375rem 0.375rem; /* product-subscription-tag와 동일한 패딩 */
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1;
}

.facility-card-heart-btn {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* 호버 영역과 원형 배경을 위해 크기 지정 */
    height: 2.5rem;
    border-radius: 50%; /* 원형으로 만들기 */

}

.facility-card-heart-btn:hover {
    background-color: #e9e9e9; /* 더 잘보이는 배경색 */
}

.facility-card-heart-btn img {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.2s ease-in-out; /* 아이콘 전환 효과 */
}

.facility-card-heart-btn:hover img {
    transform: scale(1.2); /* 아이콘 살짝 확대 */
}


/* Dark Mode Styles */
[data-bs-theme="dark"] .facility-card {
    background-color: #1e1e1e;
    border-color: #333;
}

[data-bs-theme="dark"] .facility-title,
[data-bs-theme="dark"] .facility-price {
    color: #f1f1f1;
}

[data-bs-theme="dark"] .facility-subtitle,
[data-bs-theme="dark"] .facility-description,
[data-bs-theme="dark"] .facility-metrics {
    color: #aaa;
}

[data-bs-theme="dark"] .facility-image-container {
    background-color: #333;
}
[data-bs-theme="dark"] .facility-location {
    background-color: rgba(255, 255, 255, 0.25);
    color: #f1f1f1;
}
[data-bs-theme="dark"] .facility-card-heart-btn {
    background-color: transparent;
}

[data-bs-theme="dark"] .facility-card-heart-btn:hover {
    background-color: #3a3a3a; /* 다크 모드에서 더 잘보이는 배경색 */
}

[data-bs-theme="dark"] .facility-card-heart-btn img {
    filter: invert(1);
}

/* ========== Trends.razor.css에서 누락된 스타일들 추가 ========== */

/* 광고 및 레이아웃 관련 스타일 */
.content-area {
    padding-top: 3.75rem; /* 상단바 높이 + 0.5rem */
}

.facility-section-wrapper {
    display: flex;
    gap: 1rem; /* 광고와 시설 카드 리스트 사이 간격 */
    padding: 1rem 0; /* 상하 패딩만 유지 */
}

.facility-section-wrapper .scroll-wrapper {
    flex-grow: 1;
    min-width: 0; /* 플렉스 아이템이 축소될 수 있도록 */
}

.facility-ad-left {
    width: 230px;
    height: 100%;
    flex-shrink: 0; /* 광고가 줄어들지 않도록 */
    background-color: #f0f0f0; /* 광고 배경색 */
    border: 1px solid #ddd;
    border-radius: 0.75rem; /* 모서리 둥글게 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 이미지 넘침 방지 */
}

.facility-main-content {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 */
    min-width: 0; /* 내부컨텐츠가 아무리 넓어도 자체의 너비가 광고영역을 제외한 나머지 공간으로 고정 */
}

.trends-content-wrapper {
    display: flex;
    gap: 1rem; /* 광고와 상품 리스트 사이 간격 */
    padding: 1rem 0; /* 상하 패딩만 유지 */
}

.trends-ad-left {
    width: 230px;
    height: 100%;
    flex-shrink: 0; /* 광고가 줄어들지 않도록 */
    background-color: #f0f0f0; /* 광고 배경색 */
    border: 1px solid #ddd;
    border-radius: 0.75rem; /* 모서리 둥글게 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 이미지 넘침 방지 */
}

.trends-main-content {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 */
    min-width: 0; /* 내부컨텐츠가 아무리 넓어도 자체의 너비가 광고영역을 제외한 나머지 공간으로 고정 */
}

.trends-product-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 카드 사이 간격 */
}

/* Trends 전용 product 카드 스타일 */
.trends-product-list .product-card {
    width: 100%;
    display: flex;
    flex-direction: row; /* 가로형 배치 */
    align-items: stretch; /* 자식 요소들이 높이를 채우도록 */
    border: 1px solid #eee;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #fff;
}

.trends-product-list .product-card-link {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: inherit;
}

.trends-product-list .product-card-thumbnail {
    width: auto; /* 유동적인 너비 */
    flex-basis: 16rem; /* 기본 너비 */
    flex-shrink: 1; /* 필요시 줄어들도록 허용 */
    min-width: 12rem; /* 최소 너비 설정 */
    height: 100%; /* 부모 높이 채우기 */
    padding-top: 0; /* 기존 padding-top 제거 */
    border-radius: 0.75rem 0 0 0.75rem; /* 좌측 상단, 좌측 하단만 둥글게 */
}

.trends-product-list .product-card-thumbnail img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trends-product-list .product-card-body {
    flex-grow: 1;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.trends-product-list .product-card-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    white-space: normal; /* 한 줄로 표시 */
    display: block; /* 블록 요소로 변경 */
    -webkit-line-clamp: 2; /* 두 줄로 제한 */
    overflow: hidden;
    text-overflow: ellipsis; /* 넘치는 텍스트 ...으로 표시 */
}

.trends-product-list .product-card-brand {
    margin-bottom: 0.5rem;
}

.trends-product-list .product-card-price-info {
    margin-bottom: 0.5rem;
}

.trends-product-list .product-tags-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trends-product-list .product-card-heart-btn {
    position: static;
    margin-left: auto; /* 우측 정렬 */
}

/* 다크모드 확장 스타일 */
[data-bs-theme="dark"] .trends-product-list .product-card {
    background-color: #1e1e1e;
    border-color: #333;
}

[data-bs-theme="dark"] .trends-product-list .product-card-title,
[data-bs-theme="dark"] .trends-product-list .product-price {
    color: #f1f1f1;
}

[data-bs-theme="dark"] .trends-product-list .product-card-brand,
[data-bs-theme="dark"] .trends-product-list .product-card-meta {
    color: #aaa;
}

[data-bs-theme="dark"] .trends-product-list .product-delivery-tag,
[data-bs-theme="dark"] .trends-product-list .product-subscription-tag {
    background-color: rgba(255, 255, 255, 0.25);
    color: #f1f1f1;
}

[data-bs-theme="dark"] .trends-product-list .product-card-heart-btn {
    background-color: transparent;
}

[data-bs-theme="dark"] .trends-product-list .product-card-heart-btn:hover {
    background-color: #3a3a3a;
}

[data-bs-theme="dark"] .trends-product-list .product-card-heart-btn img {
    filter: invert(1);
}

[data-bs-theme="dark"] .facility-ad-left,
[data-bs-theme="dark"] .trends-ad-left {
    background-color: #1e1e1e;
    border-color: #333;
}

/* 반응형 디자인 스타일 */
@media (max-width: 30rem) { /* 480px 이하 */
    .trends-product-list .product-card {
        flex-direction: column;
        height: auto; /* 높이 자동 조절 */
    }

    .trends-product-list .product-card-link {
        flex-direction: column;
    }

    .trends-product-list .product-card-thumbnail {
        width: 100%;
        height: auto;
        flex-basis: auto;
        min-width: auto;
        padding-top: 65%; /* 기존 product-card의 비율 유지 */
        border-radius: 0.75rem 0.75rem 0 0; /* 상단만 둥글게 */
    }

    .trends-product-list .product-card-thumbnail img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .trends-product-list .product-card-body {
        padding: 0.75rem;
        min-width: 0;
    }

    .trends-product-list .product-card-title {
        white-space: normal; /* 여러 줄로 표시 */
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 두 줄로 제한 */
        -webkit-box-orient: vertical;
        overflow: hidden; /* 넘치는 텍스트 숨김 */
        text-overflow: ellipsis; /* 넘치는 텍스트에 말줄임표 표시 */
    }
}