@charset "utf-8";


/* ===================================
    Google font
====================================== */

/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(/fonts/woff2/Pretendard-Black.woff2) format('woff2'), url(/fonts/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(/fonts/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(/fonts/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(/fonts/woff2/Pretendard-Bold.woff2) format('woff2'), url(/fonts/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(/fonts/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(/fonts/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(/fonts/woff2/Pretendard-Medium.woff2) format('woff2'), url(/fonts/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(/fonts/woff2/Pretendard-Regular.woff2) format('woff2'), url(/fonts/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(/fonts/woff2/Pretendard-Light.woff2) format('woff2'), url(/fonts/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(/fonts/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(/fonts/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(/fonts/woff2/Pretendard-Thin.woff2) format('woff2'), url(/fonts/woff/Pretendard-Thin.woff) format('woff');
}


.main-font{font-family: 'Pretendard', sans-serif;}
.alt-font{font-family:  'Pretendard', sans-serif;}

/* 기본 스타일 */
body {
	font-family: 'Pretendard',  sans-serif  !important;
    margin: 0;
    padding: 20px;
    background-color: #f7f7f7;
    color: #333;
    line-height: 1.6;
}

/* 스크롤을 막기 위한 클래스 */
body.no-scroll {
    overflow: hidden; /* 이 속성이 중요합니다! */
    height: 100vh; /* 높이를 뷰포트에 맞추고 스크롤바를 숨깁니다. */
}

.mobile-menu{
    display: none; /* 기본적으로 숨김 */
}

/* 사이드바 오버레이 스타일 */
.sidebar-overlay {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 반투명 검정 배경 */
    z-index: 1000; /* 사이드바 바로 아래 */
    opacity: 0; /* 기본적으로 투명 */
    transition: opacity 0.3s ease-in-out;
}

.sidebar-overlay.active {
    display: none; /* 활성화 시 보이도록 */
    opacity: 1; /* 활성화 시 불투명하게 */
}


/* 전체 래퍼 (가운데 정렬, 1200px 너비) */
.wrapper {
    width: 1300px;
    margin: 0 auto; /* 가운데 정렬 */
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden; /* 자식 요소들이 넘치지 않도록 */
    display: flex; /* 좌우 요소를 나란히 배치 */
    min-height: 600px; /* 최소 높이 설정 */
}

/* 좌측 필터 부분 (260px) */
.sidebar {
    width: 400px;
    padding: 25px 20px;
    box-sizing: border-box; /* 패딩을 너비에 포함 */
    background-color: #eef2f7;
    border-right: 1px solid #e0e0e0;
    /* 모바일에서 사이드바를 위한 속성 추가 (데스크톱에는 영향 없음) */
    transition: left 0.3s ease-in-out;
}

.sidebar.is-fixed {
    position: fixed; /* 화면에 고정 */
    top: 20px; /* 상단에서 20px 떨어진 곳에 고정 */
    /* left 값은 동적으로 계산 필요. (아래 jQuery 참고) */
    /* width 값도 동적으로 계산 필요. */
    /* z-index: 100; (다른 요소 위에 나타나도록) */
}

.sidebar h3 {
    margin-top: 0;
    color: #0056b3;
    font-size: 1.4em;
    padding-bottom: 10px;
    border-bottom: 1px solid #d0d0d0;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.sidebar ul li {
    font-size: 1.05em;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
	background: #FCFCFC;
    border: 1px solid #DEDEDE;
    padding: 20px 14px;
	border-radius:16px;
	margin-bottom:18px;
}

/* 사이드바 하단 버튼 그룹 스타일 */
.sidebar-buttons {
    padding-top: 0px; /* 버튼 상단 여백 */
    border-top: none; /* 구분선 */
    display: flex;
    flex-direction: column; /* 버튼들을 세로로 쌓음 */
    gap: 10px; /* 버튼 사이 간격 */
    margin-top: auto; /* ul이 공간을 다 차지하고 이 요소를 가장 아래로 밀어냄 */
}

.sidebar-buttons button {
    width: 100%; /* 버튼 너비를 100%로 설정 */
    padding: 12px;
    border: none;
    border-radius: 16px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-buttons .reset-button {
    background-color: #e0e0e0;
    color: #555;
}

.sidebar-buttons .reset-button:hover {
    background-color: #d0d0d0;
}

.sidebar-buttons .apply-filter-button {
    background-color: #007bff; /* 파란색 */
    color: white;
}

.sidebar-buttons .apply-filter-button:hover {
    background-color: #0056b3; /* 진한 파란색 */
}

.thisAirSchedule td{
	padding:0px 0px 4px 0px;
	font-size:13px;
}



.thisAirTitle {
	font-size:14px;
	color:#6c757d;
	text-align:center;
}	

.thisDiaryCalendar{
	border-left:solid 1px #efefef;
	border-right:solid 1px #efefef;
	border-top:solid 1px #efefef;
	border-bottom:solid 1px #efefef;
	margin-top:0px;
}

.thisStart, .thisEnd {
	width:35%;
	text-align:center;
	font-size:16px !important;
	color:#333;
	line-height:1.2;
}	

/* 우측 상품 리스트 (940px) */
.product-list {
    flex-grow: 1;
    width: 900px;
    padding: 25px;
    box-sizing: border-box; /* 패딩을 너비에 포함 */
    background-color: #ffffff;
    display: flex; /* 상품 아이템들을 유연하게 배치 */
    flex-wrap: wrap; /* 상품이 넘치면 다음 줄로 */
    gap: 20px; /* 상품 아이템 간의 간격 */
    justify-content: flex-start; /* 시작점에서 정렬 */
    align-content: flex-start; /* 시작점에서 콘텐츠 정렬 */
}

.product-list h3 {
    width: 100%; /* 제목이 한 줄을 다 차지하도록 */
    margin-top: 0;
    margin-bottom: 30px;
    color: #28a745;
    font-size: 1.5em;
    text-align: center;
}

.product-item {
    width: calc((100% - 40px) / 3); /* 3개씩 한 줄에 배치 (20px gap 두 번) */
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.product-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.product-item h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.15em;
}

.product-item p {
    color: #007bff;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0;
}

#no-results-alert{
	width:100%;
	margin-top:18px;
}

#no-results-alert .alert-content{
	width:100%;
	text-align:center;
}

#no-results-alert .alert-content .alert-icon{
	width:40%;
	border-radius:8px;
}

#no-results-alert .alert-content .alert-message{
	font-size:13px;
}

#no-results-alert .alert-content .inquiry-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
	margin-top:18px;
}


/* ****** 새로 추가된 부분 스타일 시작 ****** */

.show-filter-mobile {
    width: 100%;
    margin-bottom: 0px; /* 필터 섹션과 상품 목록 사이 간격 */
    padding-bottom: 0px;
    border-bottom: none;
}

.show-filter-mobile .thisCount{
	max-width:100px;
	float:left;
    font-size: 1.2em;	
	margin-top: 4px;
}


/* ✨ 알림 메시지 영역 스타일 시작 ✨ */
.product-notification-area {
	display:block;
    width: 850px;
    margin-bottom: 24px; /* 알림 영역과 상품 카드 사이 간격 */
}

.product-notification-area .swiper {
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden; /* 자식 요소 삐져나오지 않도록 */
}

.product-notification-area .swiper-slide {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f8ff; /* 슬라이드 배경색 */
    border-radius: 8px; /* 슬라이드 자체 둥근 모서리 */
    padding: 10px 0px 10px 0px;
}

.product-notification-area .sc-cfccff7c-2 { /* 주신 클래스명 사용 */
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
}

.product-notification-area .sc-cfccff7c-2 p {
    flex-grow: 1; /* 텍스트가 남은 공간 차지 */
    font-size: 1.1em;
    font-weight: 400;
    color: #333;
    margin: 0;
}

/* Swiper pagination (하단 점들) 스타일 */
.product-notification-area .swiper-pagination-bullet {
    background: #007bff; /* 파란색 점 */
    opacity: 0.4;
}

.product-notification-area .swiper-pagination-bullet-active {
    opacity: 1;
}
/* ✨ 알림 메시지 영역 스타일 끝 ✨ */




.btn-filter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.button-filter, .btn-clear-filter {
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
}

.button-filter .stt-icon-filter { /* 아이콘을 위한 기본 스타일 */
    margin-right: 5px;
}

.btn-clear-filter {
    background-color: #fcebeb;
    border-color: #eebfbf;
    color: #d9534f;
}
.btn-clear-filter:hover {
    background-color: #fae0e0;
}

.show-filter-mobile .thisToolbar{
	float:right;
	text-align:right;
}

.show-filter-mobile .thisProductTitle{
	font-size:20px;
	font-weight:600;
}


/* sort/layout 섹션 (toolbar-action) */
.sidebar .thisToolbar ul.toolbar-action {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 기본적으로 모바일에서는 숨김 (d-none) */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: flex-first; /* 왼쪽 정렬 */
    gap: 20px;
    width: 100%;
}

.sidebar .thisToolbar ul.toolbar-action li {
	width:90px;
    font-size: 1.05em;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    background: #FCFCFC;
    border: 1px solid #DEDEDE;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 4px;
}


/* 드롭다운 스타일 */
.dropdown {
    position: relative; /* 드롭다운 메뉴가 이 요소를 기준으로 위치 */
}

.dropdown-toggle {
	width:100%;
	background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    color: #333;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-menu {
    display: none; /* 기본적으로 숨김 */
    position: absolute;
    top: 100%; /* 버튼 바로 아래 */
    left: -5px; /* 오른쪽 정렬 */
    min-width: 180px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px 0;
    z-index: 100;
}

.dropdown-toggle::after {
    margin-left: auto; /* 이 속성이 ::after 요소를 .dropdown-toggle의 오른쪽 끝으로 밀어냅니다. */
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

/* 달력 메뉴 드롭다운 (초기에는 숨김) */
.calendar-dropdown-menu {
    display: none; /* 기본적으로 숨김 */
    position: absolute; /* .calendar-container를 기준으로 위치 */
    z-index: 1000; /* 다른 요소 위에 나타나도록 */
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 15px;
    min-width: 332px; /* 달력 UI의 크기에 따라 조절 */
}

/* 달력 UI Placeholder 스타일 (선택 사항) */
.calendar-dropdown-menu p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}


.sort-menu .sort-item {
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
	text-align:left;
}
.sort-menu .sort-item:last-child {
    border-bottom: none;
}
.sort-menu .sort-item .title {
    display: block;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
}

/* 커스텀 라디오 버튼 (st-icheck) */
.st-icheck-item {
    margin-bottom: 5px;
}
.st-icheck-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9em;
    color: #666;
}
.st-icheck-item input[type="radio"] {
    display: none; /* 기본 라디오 버튼 숨김 */
}

.st-icheck-item .checkmark {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%; /* 원형 */
    margin-right: 8px;
    position: relative;
    transition: all 0.2s;
}

.st-icheck-item input[type="radio"]:checked + .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

.st-icheck-item input[type="radio"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
}


.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}


.st-service-feature {
    padding-top: 26px;
    padding-left: 12px;	
	padding-bottom: 0px;
    border-top: 1px solid #d7dce3;
    border-bottom: none;
	margin-bottom: 20px;

    .item {
        margin-bottom: 10px;

        .icon {
            margin-right: 15px;
			margin-top: 4px;

            i {
                font-size: 28px;
                color: #6c757d;
            }
        }

        .info {
            .name {
                font-size: 12px;
                color: var(--grey-color, #5E6D77);
                margin: 0;
                line-height: 16px;
            }

            .value {
                font-size: 14px;
				color: var(--link-color, #1A2B48);
                margin: 0;
            }

            .value.r {
				color: #cc0000;
            }
        }
    }
}



/* 레이아웃 버튼 (list/grid) */
.layout {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 0px;
    padding: 3px;
}

.layout-item {
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s, color 0.2s;
    font-size: 1em;
}
.layout-item:hover {
    background-color: #fff;
}

.layout-item.active {
    background-color: #fff;
    color: #3B71FE;
}

.stt-icon { /* 아이콘 폰트 대신 placeholder */
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #fff; /* 아이콘 색상 임시 지정 */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.stt-icon-filter { background-color: #333; } /* 실제 아이콘 대신 임시 색상 */
.stt-icon-arrow-down { background-color: #fff; }
.stt-icon-list { background-color: #fff; }
.stt-icon-category { background-color: #fff; }
.layout-item.active .stt-icon { background-color: white; } /* 활성 아이콘 색상 변경 */


.stt-icon-calendar{
	font-size: 26px;
}

.thisWeek{
	font-size:12px;
	color:#898989;
}

/* ****** 새로 추가된 부분 스타일 끝 ****** */
/* ✨ 로딩 오버레이 스타일 시작 ✨ */
.loading-overlay {
    position: fixed; /* ✨ absolute -> fixed 변경 ✨ */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(1, 1, 1, 0.65); /* 반투명 흰색 배경 */
    display: flex;
    flex-direction: column; /* 스피너와 텍스트를 세로로 정렬 */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* ✨ 다른 요소들 위에 오도록 z-index를 높임 ✨ */
    opacity: 0; /* 초기에는 숨김 (투명) */
    visibility: hidden; /* 접근성 및 실제 렌더링에서 숨김 */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* 부드러운 페이드 인/아웃 */
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    border: 5px solid #f3f3f3; /* 밝은 회색 테두리 */
    border-top: 5px solid #3498db; /* 파란색 스피너 부분 */
    border-radius: 50%; /* 원형 */
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite; /* 1초 간격으로 무한 회전 애니메이션 */
}

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

.loading-overlay p {
    margin-top: 15px;
    font-size: 1.1em;
    color: #555;
    font-weight: 600;
}
/* ✨ 로딩 오버레이 스타일 끝 ✨ */


.thisLogo img{
	width:45%;
	cursor:pointer;
}

.sidebar h4{
	font-size:16px;
	margin-left:6px;
	margin-bottom:10px;	
}

.product-list h3 {
    width: 100%; /* 제목이 한 줄을 다 차지하도록 */
    margin-top: 0;
    margin-bottom: 30px;
    color: #28a745;
    font-size: 1.5em;
    text-align: center;
}

.product-item {
    width: calc((100% - 40px) / 3); /* 3개씩 한 줄에 배치 (20px gap 두 번) */
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.product-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.product-item h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.15em;
}

.product-item p {
    color: #007bff;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0;
}

.hotel-view {
  display: block;
  padding: 0px 0px;
  max-width: 100%;  /* 최대 너비 제한 */
  margin: 0 auto;     /* 가운데 정렬 */  
}

.hotel-view .thisPhoto{
  width: 100%;  /* 최대 너비 제한 */
  margin-bottom: 20px;     /* 가운데 정렬 */  
  border-radius:8px;
}

/* ===== 카드 리스트 ===== */

.hotel-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  padding: 20px 0px;
  max-width: 100%;  /* 최대 너비 제한 */
  margin: 0 auto;     /* 가운데 정렬 */  
}

.hotel-card {
  position: relative;
  display: inline-block;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border:1px solid #ddd;
}

.hotel-card .hotel-title{
  font-size:16px;	
  font-weight:400;
  height:50px;
}

.hotel-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  transform: translateY(-4px);
}
.hotel-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* ===== 카드 본문 ===== */
.hotel-info {
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hotel-info h3 {
  font-size: 16px;
  margin: 0;
  color: #1e1e1e;
  font-weight: 700;
  line-height: 1.35;
}

/* ===== 시설/포함사항 ===== */

.facilities {
  margin: 0px 0px 12px 0px;
}

.facilities-title {
  margin: 8px 0px 10px 0px;
  font-size: 14px;
  font-weight: 300;
  color: #4154ff;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.facilities-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 13px;  
}
.facilities-item {
  font-size: 13px;
  color: #666;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.facilities-item::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border: 1px solid #e3e3e8;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 1px;
  background: #f6f8ff;
}

/* ===== 가격 라인 ===== */
.hotel-price {
  margin-top: 4px;
  padding:0px 12px 10px 14px;
  border-top: none;
  font-size: 18px;
  font-weight: 400;
  color: #1c1c1e;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.hotel-price .thisKRW {
    font-size: 14px;
    margin-left: 0px;
    color: #ababab;	
}


.hotel-price .cta {
  background: #1f73ff;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .2s ease;
}
.hotel-price .cta:hover { filter: brightness(0.95); }


#hotel-list-title{
	display: inline-block;
	padding: 0px;
	width: 100%;  /* 최대 너비 제한 */
	max-width: 100%;  /* 최대 너비 제한 */
	margin: 20px 0px 0px 0px;     /* 가운데 정렬 */  
	font-size:20px;
	font-weight: 700;
	text-align:left;
}

/* ****** List View 스타일 시작 ****** */
.product-list.list-view {
    display: flex; /* 그리드 대신 flexbox 사용 */
    flex-direction: column; /* 세로로 카드들을 정렬 */
    gap: 0px; /* 카드 간 간격 */
}

.product-list.list-view .hotel-list {
	display: inline-block;
	padding: 0px;
	width: 100%;  /* 최대 너비 제한 */
	max-width: 100%;  /* 최대 너비 제한 */
	margin: 0 auto;     /* 가운데 정렬 */  
}

.product-list.list-view .hotel-card {
    flex-direction: row; /* 이미지와 정보를 가로로 정렬 */
    width: 100%; /* 너비는 100% */
    max-width: 100%; /* 너비는 100% */	
    height: auto; /* 높이는 내용에 맞춰 자동 조절 */
	margin-top:20px;
}

.product-list.list-view .hotel-card img {
    width: 250px;
    height: 200px;
    border-radius: 10px 0px 0px 10px; /* 이미지 둥근 모서리 */
    margin-right: 25px; /* 이미지와 내용 사이 간격 */
    object-fit: cover;	
}

.product-list.list-view .hotel-info {
    width: 55%;
    padding-top: 18px; /* 이미지 옆으로 붙으므로 왼쪽 패딩 제거 */
	padding-left: 0; /* 이미지 옆으로 붙으므로 왼쪽 패딩 제거 */
    justify-content: space-between; /* 상하로 내용 정렬 */
}

.product-list.list-view .hotel-card .hotel-title {
    font-size: 18px; /* 리스트 뷰에서 제목 더 크게 */
    margin-bottom: 5px;
    height: 22px;	
}

.product-list.list-view .facilities-title {
    margin-top: 0; /* 리스트 뷰에서 타이틀 마진 조정 */
    margin-bottom: 5px;
}

.product-list.list-view .facilities-list {
    grid-template-columns: repeat(2, 1fr); /* 시설 목록 2단으로 */
    gap: 5px 10px; /* 행과 열 간격 */
}

.product-list.list-view .hotel-price {
    width: 15%;
    display: flex;
    flex-direction: column;  /* 세로 정렬 */
    align-items: center;     /* 가로 가운데 */
    text-align: center;
    justify-content: flex-end;   /* 하단 정렬 */
	padding-bottom:24px;
	padding-right:10px;	
}

.product-list.list-view .hotel-price span {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
}

.product-list.list-view .hotel-price .thisKRW {
    font-size: 14px;
    margin-left: 0px;
    color: #ababab;	
}

.product-list.list-view .hotel-price .cta {
    display: block;
    margin-top: 6px;
    padding: 6px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
	width:80%;
}

/* ****** List View 스타일 끝 ****** */


.badge {
  position: absolute;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: rgba(255,255,255,0);
  border-radius: 4px;
}

.badge-left {
  top: 6px;
  left: 8px;
  font-size: 16px;  
}

.badge-right {
  top: 0px;
  right: 8px;
  font-size: 18px;  
  cursor: pointer;
}

.badge-price {
  display:none;
}	

.thisKRW {
  font-size: 13px;
}

/* 버튼 기본 스타일 */
button[name="thisHotel"] {
	
    /* 기존 스타일 */
    padding: 0px 18px; /* Flexbox 정렬 시 패딩은 0으로 설정하거나 Flexbox item 내부에서 관리하는 것이 일반적입니다. */
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;

    /* ----- 버튼 크기 고정을 위한 스타일 (유지) ----- */
    width: auto;
    height: 36px;
    box-sizing: border-box;

    /* ----- Flexbox를 이용한 텍스트 수직/수평 중앙 정렬 (추가/수정) ----- */
    align-items: center; /* 자식 요소(텍스트)를 세로(수직) 기준으로 가운데 정렬 */
    justify-content: center; /* 자식 요소(텍스트)를 가로(수평) 기준으로 가운데 정렬 */

    /* Flexbox 사용 시 line-height는 더 이상 수직 정렬에 직접적인 영향을 주지 않으므로, 기본값으로 두거나 필요에 따라 조정 가능합니다. */
    /* white-space, overflow, text-overflow는 여전히 텍스트 길이에 따른 처리로 필요합니다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

/* 선택된 버튼 스타일 (배경색과 글자색 반전) */
button[name="thisHotel"].selected {
	  background: #333333;
	  color: #fff;
	  font-weight: 600;
	  border-color: #333333;
}

/* 마우스 오버 효과 (선택 여부와 관계 없이) */
button[name="thisHotel"]:hover {
	  background: #333333;
	  color: #fff;
	  font-weight: 400;
	  border-color: #333333;
}

/* 버튼 기본 스타일 */
button[name="thisDay"] {
	
    /* 기존 스타일 */
    padding: 0px 18px; /* Flexbox 정렬 시 패딩은 0으로 설정하거나 Flexbox item 내부에서 관리하는 것이 일반적입니다. */
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;

    /* ----- 버튼 크기 고정을 위한 스타일 (유지) ----- */
    width: auto;
    height: 36px;
    box-sizing: border-box;

    /* ----- Flexbox를 이용한 텍스트 수직/수평 중앙 정렬 (추가/수정) ----- */
    align-items: center; /* 자식 요소(텍스트)를 세로(수직) 기준으로 가운데 정렬 */
    justify-content: center; /* 자식 요소(텍스트)를 가로(수평) 기준으로 가운데 정렬 */

    /* Flexbox 사용 시 line-height는 더 이상 수직 정렬에 직접적인 영향을 주지 않으므로, 기본값으로 두거나 필요에 따라 조정 가능합니다. */
    /* white-space, overflow, text-overflow는 여전히 텍스트 길이에 따른 처리로 필요합니다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

/* 선택된 버튼 스타일 (배경색과 글자색 반전) */
button[name="thisDay"].selected {
	  background: #333333;
	  color: #fff;
	  font-weight: 600;
	  border-color: #333333;
}

/* 마우스 오버 효과 (선택 여부와 관계 없이) */
button[name="thisDay"]:hover {
	  background: #333333;
	  color: #fff;
	  font-weight: 400;
	  border-color: #333333;
}


/* 버튼 기본 스타일 */
button[name="thisGolfCode"] {
	
    /* 기존 스타일 */
    padding: 0px 18px; /* Flexbox 정렬 시 패딩은 0으로 설정하거나 Flexbox item 내부에서 관리하는 것이 일반적입니다. */
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;

    /* ----- 버튼 크기 고정을 위한 스타일 (유지) ----- */
    width: auto;
    height: 36px;
    box-sizing: border-box;

    /* ----- Flexbox를 이용한 텍스트 수직/수평 중앙 정렬 (추가/수정) ----- */
    align-items: center; /* 자식 요소(텍스트)를 세로(수직) 기준으로 가운데 정렬 */
    justify-content: center; /* 자식 요소(텍스트)를 가로(수평) 기준으로 가운데 정렬 */

    /* Flexbox 사용 시 line-height는 더 이상 수직 정렬에 직접적인 영향을 주지 않으므로, 기본값으로 두거나 필요에 따라 조정 가능합니다. */
    /* white-space, overflow, text-overflow는 여전히 텍스트 길이에 따른 처리로 필요합니다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

/* 선택된 버튼 스타일 (배경색과 글자색 반전) */
button[name="thisGolfCode"].selected {
	  background: #333333;
	  color: #fff;
	  font-weight: 600;
	  border-color: #333333;
}

/* 마우스 오버 효과 (선택 여부와 관계 없이) */
button[name="thisGolfCode"]:hover {
	  background: #333333;
	  color: #fff;
	  font-weight: 400;
	  border-color: #333333;
}
/* 버튼 기본 스타일 */
button[name="thisMeal"] {
	
    /* 기존 스타일 */
    padding: 0px 18px; /* Flexbox 정렬 시 패딩은 0으로 설정하거나 Flexbox item 내부에서 관리하는 것이 일반적입니다. */
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;

    /* ----- 버튼 크기 고정을 위한 스타일 (유지) ----- */
    width: auto;
    height: 36px;
    box-sizing: border-box;

    /* ----- Flexbox를 이용한 텍스트 수직/수평 중앙 정렬 (추가/수정) ----- */
    align-items: center; /* 자식 요소(텍스트)를 세로(수직) 기준으로 가운데 정렬 */
    justify-content: center; /* 자식 요소(텍스트)를 가로(수평) 기준으로 가운데 정렬 */

    /* Flexbox 사용 시 line-height는 더 이상 수직 정렬에 직접적인 영향을 주지 않으므로, 기본값으로 두거나 필요에 따라 조정 가능합니다. */
    /* white-space, overflow, text-overflow는 여전히 텍스트 길이에 따른 처리로 필요합니다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

/* 선택된 버튼 스타일 (배경색과 글자색 반전) */
button[name="thisMeal"].selected {
	  background: #333333;
	  color: #fff;
	  font-weight: 600;
	  border-color: #333333;
}

/* 마우스 오버 효과 (선택 여부와 관계 없이) */
button[name="thisMeal"]:hover {
	  background: #333333;
	  color: #fff;
	  font-weight: 400;
	  border-color: #333333;
}
/* 버튼 기본 스타일 */
button[name="thisAir"] {
	
    /* 기존 스타일 */
    padding: 0px 18px; /* Flexbox 정렬 시 패딩은 0으로 설정하거나 Flexbox item 내부에서 관리하는 것이 일반적입니다. */
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;

    /* ----- 버튼 크기 고정을 위한 스타일 (유지) ----- */
    width: auto;
    height: 36px;
    box-sizing: border-box;

    /* ----- Flexbox를 이용한 텍스트 수직/수평 중앙 정렬 (추가/수정) ----- */
    align-items: center; /* 자식 요소(텍스트)를 세로(수직) 기준으로 가운데 정렬 */
    justify-content: center; /* 자식 요소(텍스트)를 가로(수평) 기준으로 가운데 정렬 */

    /* Flexbox 사용 시 line-height는 더 이상 수직 정렬에 직접적인 영향을 주지 않으므로, 기본값으로 두거나 필요에 따라 조정 가능합니다. */
    /* white-space, overflow, text-overflow는 여전히 텍스트 길이에 따른 처리로 필요합니다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

/* 선택된 버튼 스타일 (배경색과 글자색 반전) */
button[name="thisAir"].selected {
	  background: #333333;
	  color: #fff;
	  font-weight: 600;
	  border-color: #333333;
}

/* 마우스 오버 효과 (선택 여부와 관계 없이) */
button[name="thisAir"]:hover {
	  background: #333333;
	  color: #fff;
	  font-weight: 400;
	  border-color: #333333;
}

/* 버튼 기본 스타일 */
button[name="thisShuttle"] {
	
    /* 기존 스타일 */
    padding: 0px 18px; /* Flexbox 정렬 시 패딩은 0으로 설정하거나 Flexbox item 내부에서 관리하는 것이 일반적입니다. */
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    outline: none;

    /* ----- 버튼 크기 고정을 위한 스타일 (유지) ----- */
    width: auto;
    height: 36px;
    box-sizing: border-box;

    /* ----- Flexbox를 이용한 텍스트 수직/수평 중앙 정렬 (추가/수정) ----- */
    align-items: center; /* 자식 요소(텍스트)를 세로(수직) 기준으로 가운데 정렬 */
    justify-content: center; /* 자식 요소(텍스트)를 가로(수평) 기준으로 가운데 정렬 */

    /* Flexbox 사용 시 line-height는 더 이상 수직 정렬에 직접적인 영향을 주지 않으므로, 기본값으로 두거나 필요에 따라 조정 가능합니다. */
    /* white-space, overflow, text-overflow는 여전히 텍스트 길이에 따른 처리로 필요합니다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

/* 선택된 버튼 스타일 (배경색과 글자색 반전) */
button[name="thisShuttle"].selected {
	  background: #333333;
	  color: #fff;
	  font-weight: 600;
	  border-color: #333333;
}

/* 마우스 오버 효과 (선택 여부와 관계 없이) */
button[name="thisShuttle"]:hover {
	  background: #333333;
	  color: #fff;
	  font-weight: 400;
	  border-color: #333333;
}

.thisDivide{
	display:none;
}

.r{color:#cc0000;}
.nv{color:#0000cc;}

table {
    margin-bottom: 0px;
}

th {
    /* border-bottom: 0px solid #dedede; */
	border:none;
	font-size:12px;
	padding:10px 0px 10px 0px;
}

td {
    /* border-bottom: 0px solid #dedede; */
    border:none;
	font-size:12px;
	padding:8px 0px 8px 0px;
}

.thisDiary{
	margin-bottom: 6px;
}

.thisDiaryMsg{
	 font-size:12px;
	 margin-bottom: 20px;
}

.nonDate{
	color:#ababab; 	
}

.prevDate{
	background-color:#fefefe; 	
}

.bookingDate{
	background-color:#e9e9e9; 
	font-weight: 400;
}

.bookingDateActive{
	background-color:#3b71fe; 
	font-weight: 400;
	color:#fff;
}


.bookingDate:hover{
	background-color:#3b71fe;
	color:#fff;
}

.bookingDate:active{
	background-color:#3b71fe;
	color:#fff;
}

.thisPrev{
	text-align:left;
	padding-left: 0px;
	cursor:pointer; font-size: 18px;
	border-bottom: none;
}

.thisCenter{
	text-align:center;
	border-bottom: none;
	font-size: 16px;
}

.thisNext{
	text-align:right;
	padding-right: 0px;
	cursor:pointer; font-size: 18px;
	border-bottom: none;
}

.thisMonth{ font-size: 18px;}

.thisPax_1{
	font-size: 14px;
	padding-top: 6px;
}

.thisRoute {border: 1px solid #adc4c4;	margin-top: 20px;}
.thisDate {border: 1px solid #adc4c4;	margin-top: 20px;}

.thisMsg{font-size: 12px; font-weight: 300; color:cc0000;display:none;}

.thisMsg.active{display:block;}


.thisGolfInfo{
	font-size:13px;
}

.thisGolfInfo .fullwidth_comment_wrapper{
	text-align:left;
}

.thisGolfInfo .fullwidth_comment_wrapper h3{
	text-align:left;
	color: #333;
}

.totalKRW{
	margin-right:10px;
}

.thisBookingBotton {
	display:none;
}

/* --- 모바일 환경을 위한 미디어 쿼리 시작 --- */

/* 화면 너비가 768px 이하일 때 (태블릿 및 모바일 가로) */
@media screen and (max-width: 768px) {
    body {
        padding: 0px; /* 전체적인 페이지 패딩 줄이기 */
    }

    /* 모바일 메뉴 버튼 표시 */
    .mobile-menu {
        display: block; /* 모바일에서 버튼 보이게 함 */
    }

    .wrapper {
        width: 100%; /* 너비 100% 사용 */
        padding: 0; /* 내부 패딩은 각 섹션에서 처리 */
        box-sizing: border-box; /* 패딩을 너비에 포함 */
        flex-direction: column; /* 요소들을 세로로 쌓음 */
        border-radius: 0; /* 모바일에서는 둥근 모서리 제거 */
        box-shadow: none; /* 그림자 제거 */
        min-height: auto; /* 최소 높이 해제 */
    }

    .sidebar {
        /* 모바일에서 사이드바 숨기고, 열릴 때 슬라이드 효과 */
        width: 330px; /* 사이드바 너비 고정 */
        position: fixed; /* 화면에 고정 */
        top: 0; /* 상단에서 시작 */
        left: -320px; /* 화면 밖으로 완전히 숨김 (너비 + 약간의 여유) */
        height: 100%; /* 전체 높이 */
        z-index: 1002; /* 오버레이 위에 표시 */
        box-shadow: 2px 0 10px rgba(0,0,0,0.3); /* 그림자 추가 */
        border-right: none; /* 기존 border 제거 */
        padding-top: 20px; /* 버튼과 겹치지 않게 패딩 */
        box-sizing: border-box;

        /* --- 스크롤바 추가 및 스타일링 시작 --- */
        overflow-y: auto; /* 내용이 넘칠 경우 세로 스크롤바 자동 생성 */
        -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */

        /* Firefox 스크롤바 스타일 */
        scrollbar-width: thin; /* 'auto' 또는 'none'도 가능 */
        scrollbar-color: #a7a7a7 #e0e0e0; /* 스크롤 막대 색상, 트랙 색상 */

        /* Webkit 기반 브라우저 (Chrome, Safari, Edge) 스크롤바 스타일 */
        &::-webkit-scrollbar {
            width: 1px; /* 스크롤바 너비 */
        }
        &::-webkit-scrollbar-thumb {
            background-color: #a7a7a7; /* 스크롤 막대 색상 */
            border-radius: 1px; /* 스크롤 막대 둥근 모서리 */
            border: 1px solid transparent; /* 막대 주변 투명 테두리로 여백 효과 */
            background-clip: padding-box; /* 테두리가 배경색에 영향을 주지 않도록 */
        }
        &::-webkit-scrollbar-track {
            background-color: #e0e0e0; /* 스크롤바 트랙(배경) 색상 */
            border-radius: 1px; /* 트랙 둥근 모서리 */
        }
        /* --- 스크롤바 추가 및 스타일링 끝 --- */
    }

    /* 사이드바가 활성화되었을 때 */
    .sidebar.active {
        left: 0; /* 화면 안으로 슬라이드 */
    }

    /* 사이드바가 모바일 환경에서 숨겨지므로, product-list는 너비 전체를 차지하도록 */
    .product-list {
        width: 100%; /* 상품 리스트도 전체 너비 사용 */
        padding: 20px; /* 내부 패딩 조정 */
        justify-content: center; /* 상품 아이템 가운데 정렬 */
        gap: 15px; /* 상품 아이템 간격 줄이기 */
    }

    .product-list h3 {
        text-align: center; /* 제목 가운데 정렬 */
        margin-bottom: 25px;
    }

    .product-item {
        /* 태블릿에서는 2개씩 표시, 조금 더 작게 */
        width: calc(50% - 10px); /* (100% - gap) / 2 */
        padding: 10px;
    }
}


/* 화면 너비가 480px 이하일 때 (일반적인 모바일 세로) */
@media screen and (max-width: 480px) {
    body {
        padding: 0px; /* 전체적인 패딩 더 줄이기 */
    }

	.thisBookingBotton {
		display:block;
		width:100%;
		text-align:center;
	}

	.thisBookingBotton .booking-button{
		width:70%;
		text-align:center;
		background-color: #ffffff;
		color: #007bff;	
		border:1px solid #007bff;	
		padding: 12px;
		margin-top: 10px;
		margin-bottom: 32px;	
		border-radius: 16px;
		font-size: 1.1em;
		cursor: pointer;
		transition: background-color 0.2s, color 0.2s;	
	}

    .mobile-menu {
        display: flex; /* Flexbox를 사용하여 내부 요소들을 정렬합니다. */
		position:fixed;
        justify-content: space-between; /* .thisLogo를 왼쪽 끝에, .mobile-menu-toggle을 오른쪽 끝에 배치합니다. */
        align-items: center; /* 세로 방향으로 중앙에 정렬합니다. */
        padding: 8px 14px; /* 상하좌우 여백을 추가하여 깔끔하게 보입니다. */
        background-color: #ffffff; /* 배경색을 흰색으로 지정하여 가독성을 높입니다. */
        border-bottom: 1px solid #eeeeee; /* 하단에 얇은 선을 추가하여 구분을 명확히 합니다. */
        width: 100%; /* 너비를 100%로 설정하여 화면 전체를 차지하도록 합니다. */
        box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정합니다. */
		z-index:100;
    }

    /* thisLogo 이미지 스타일 */
    .mobile-menu .thisLogo {
        max-width: 60%; /* 로고 이미지의 최대 너비를 설정하여 너무 커지지 않도록 합니다. */
        height: auto; /* 비율에 맞춰 높이가 자동으로 조절되도록 합니다. */
    }

    /* 모바일 메뉴 토글 버튼 스타일 */
    .mobile-menu .mobile-menu-toggle {
        font-size: 22px; /* 버튼 아이콘의 크기를 키워 터치하기 쉽게 합니다. */
        background: none; /* 배경색을 없앱니다. */
        border: none; /* 테두리를 없앱니다. */
        cursor: pointer; /* 마우스 오버 시 포인터 모양으로 변경하여 클릭 가능함을 알립니다. */
        color: #6c757d; /* 아이콘 색상을 어둡게 하여 잘 보이도록 합니다. */
        padding: 5px; /* 터치 영역 확보를 위해 패딩을 추가합니다. */
    }

    .sidebar {
        padding: 15px;
        padding-top: 10px; /* 버튼 크기에 맞춰 조정 */
        width: 330px; /* 모바일에서 사이드바 너비 살짝 줄임 */
        left: -350px; /* 숨겨지는 위치도 조정 */
    }

	/* 사이드바 오버레이 스타일 */
	.sidebar-overlay {
		display: none; /* 기본적으로 숨김 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6); /* 반투명 검정 배경 */
		z-index: 1000; /* 사이드바 바로 아래 */
		opacity: 0; /* 기본적으로 투명 */
		transition: opacity 0.3s ease-in-out;
	}

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

    .sidebar .thisLogo{
		width:70%;
    }	

	.thisLogo img {
		width: 45%;
		cursor: pointer;
	}	
	
    .sidebar h3 {
        font-size: 1.3em;
    }

    .sidebar ul {
        flex-direction: column; /* 메뉴 아이템 다시 세로로 쌓기 */
        align-items: flex-start; /* 왼쪽 정렬 */
    }

    .sidebar ul li {
        margin-bottom: 8px; /* 다시 세로 마진 추가 */
        font-size: 1em;
    }

	/* ✨ 알림 메시지 영역 스타일 시작 ✨ */
	.product-notification-area {
		width: 100%;
		margin-bottom: 0px; /* 알림 영역과 상품 카드 사이 간격 */
		display:none;
	}

	.product-notification-area .mySwiper .swiper-wrapper .swiper-slide .sc-cfccff7c-2{
		padding:0px 10px;
		font-size:12px;
	}

	.product-list {
        padding:70px 15px 15px 15px;
        gap: 10px; /* 상품 아이템 간격 더 줄이기 */
    }

	.product-list .show-filter-mobile .thisCount{
		float:left;
		font-size: 1.2em;	
        margin-top: 4px;
	}

    .product-list h3 {
        font-size: 1.4em;
        margin-bottom: 20px;
    }

    .product-item {
        width: 100%; /* 모바일에서는 1개씩 전체 너비 사용 */
        padding: 12px;
    }
	
	/* ===== 카드 리스트 ===== */
	.hotel-list {
	  display: grid;
	  gap: 20px;
	  padding: 20px 0px 20px 0px;
	}
	.hotel-card {
	  border-radius: 14px;
	  overflow: hidden;
	  background: #fff;
	  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	  transition: box-shadow 0.3s ease, transform 0.3s ease;
	  display: flex;
	  flex-direction: column;
	}

	.hotel-card .hotel-title{
	  font-size:18px;	
	  font-weight:800;
	}

	.hotel-card:hover {
	  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
	  transform: translateY(-4px);
	}
	.hotel-card img {
	  width: 100%;
	  height: 220px;
	  object-fit: cover;
	}

	/* ===== 카드 본문 ===== */
	.hotel-info {
	  padding: 14px 14px 12px 14px;
	  display: flex;
	  flex-direction: column;
	  gap: 8px;
	}
	.hotel-info h3 {
	  font-size: 16px;
	  margin: 0;
	  color: #1e1e1e;
	  font-weight: 700;
	  line-height: 1.35;
	}

	/* ===== 시설/포함사항 ===== */
	.facilities-title {
	  margin: 8px 0px 10px 0px;
	  font-size: 14px;
	  font-weight: 300;
	  color: #4154ff;
	  letter-spacing: .02em;
	  text-transform: uppercase;
	}
	.facilities-list {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  display: grid;
	  grid-template-columns: 1fr;
	  gap: 6px;
	}
	.facilities-item {
	  font-size: 13px;
	  color: #666;
	  font-weight: 400;
	  display: flex;
	  align-items: flex-start;
	  gap: 8px;
	}
	.facilities-item::before {
	  content: "✓";
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  font-weight: 800;
	  border: 1px solid #e3e3e8;
	  width: 18px;
	  height: 18px;
	  line-height: 18px;
	  border-radius: 4px;
	  font-size: 12px;
	  margin-top: 1px;
	  background: #f6f8ff;
	}

	/* ===== 가격 라인 ===== */
	.hotel-price {
	  margin-top: 4px;
	  padding-top: 8px;
	  border-top: 1px dashed #eee;
	  font-size: 16px;
	  font-weight: 600;
	  color: #1c1c1e;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.hotel-price .cta {
	  background: #1f73ff;
	  color: #fff;
	  border: 0;
	  border-radius: 8px;
	  padding: 8px 10px;
	  font-size: 13px;
	  font-weight: 700;
	  cursor: pointer;
	  transition: filter .2s ease;
	}
	.hotel-price .cta:hover { filter: brightness(0.95); }

	.hotel-card img { height: 200px; }	
	
	.badge-price {
	  display:none;
	}	

	/* ****** List View 스타일 시작 ****** */
	.product-list.list-view {
		display: flex; /* 그리드 대신 flexbox 사용 */
		flex-direction: column; /* 세로로 카드들을 정렬 */
		gap: 10px; /* 카드 간 간격 */
	}
	
	.product-list.list-view .hotel-list {
		display: inline-block;
		padding: 0px;
		width: 100%;  /* 최대 너비 제한 */
		max-width: 100%;  /* 최대 너비 제한 */
		margin: 0 auto;     /* 가운데 정렬 */  
	}

	.product-list.list-view .hotel-card {
		border-radius:0px;
		flex-direction: row; /* 이미지와 정보를 가로로 정렬 */
		width: 100%; /* 너비는 100% */
		max-width: 100%; /* 너비는 100% */	
		height: auto; /* 높이는 내용에 맞춰 자동 조절 */
        box-shadow: none;		
		margin-top:20px;
	}

	.product-list.list-view .hotel-card img {

		width: 140px;
		height: 178px;
		border-radius: 6px; /* 이미지 둥근 모서리 */
		margin-right: 20px; /* 이미지와 내용 사이 간격 */
		object-fit: cover;	
	}

	.product-list.list-view .hotel-info {
		width: 100%;
		justify-content: space-between; /* 상하로 내용 정렬 */
		padding: 0px 0px 0px 0px;
	}

	.product-list.list-view .hotel-card .hotel-title {
		font-size: 14px; /* 리스트 뷰에서 제목 더 크게 */
		margin-bottom: 5px;
		height: auto;
		font-weight:600;
	}

	.product-list.list-view .facilities-title {
		font-size: 12px; /* 리스트 뷰에서 제목 더 크게 */	
		margin-top: 0; /* 리스트 뷰에서 타이틀 마진 조정 */
		margin-bottom: 3px;
	}

	.product-list.list-view .facilities-list {
		font-size: 12px; /* 리스트 뷰에서 제목 더 크게 */		
		grid-template-columns: repeat(1, 1fr); /* 시설 목록 2단으로 */
		gap: 2px 10px; /* 행과 열 간격 */
		color:#787878;
	}

	.product-list.list-view .hotel-price {
		width: 100%;
		display:none;
		flex-direction:inherit;
		text-align: left;
		bottom:0;		
		padding-bottom:10px;
	}

	.product-list.list-view .hotel-price span {
		left:0;
		width:50%;
		font-weight: bold;
		font-size: 12px;
		margin-bottom: 6px;
		text-align:left;
		float:left;
	}

	.product-list.list-view .hotel-price .thisKRW {
		font-size: 14px;
		margin-left: 0px;
		color: #ababab;	
	}

	.product-list.list-view .hotel-price .cta {
		right:0;
		margin-top: 6px;
		padding: 6px 12px;
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		width:40%;
		float:right;		
	}

	.product-list.list-view .badge {
	  position: absolute;
	  padding: 3px 6px;
	  font-size: 11px;
	  font-weight: bold;
	  color: white;
	  background-color: rgba(255,255,255,0);
	  border-radius: 4px;
	}

	.product-list.list-view .badge-left {
	  top: 6px;
	  left: 6px;
	  font-size: 12px;  
	}

	.product-list.list-view .badge-right {
	  top: 4px;
	  left: 108px;
	  font-size: 15px;  
	  cursor: pointer;
	}

	.product-list.list-view .badge-price {
	  display:block;
	  bottom: 4px;
	  left: 6px;
	  font-size: 13px;  
	  cursor: pointer;
	}

	.thisDivide{
		display:block;
	}

	.thisAirTitle {
		font-size:14px;
		color:#6c757d;
		text-align:center;
	}	

	.thisDiary{
		width:100%;
		margin-bottom: 0px;
		overflow:hidden;
		overflow:scroll-y;
	}

	table tr th, table tr td {
		padding: 6px 6px 6px 6px;
		text-align: center;
		border-bottom: 1px solid #f1f1f1;
	}

	.thisAirSchedule tr th, .thisAirSchedule tr td{
		padding: 4px 3px 0px 3px;
		text-align: center;
		border-bottom: none;
		font-size: 12px;
	}

	.dropdown-toggle {
		width:100%;
		background: none;
		border: none;
		padding: 4px 6px;
		border-radius: 5px;
		cursor: pointer;
		color: #333;
		font-size: 0.95em;
		display: flex;
		align-items: center;
		gap: 5px;
	}

	/* 달력 메뉴 드롭다운 (초기에는 숨김) */
	.calendar-dropdown-menu {
		display: none; /* 기본적으로 숨김 */
		position: absolute; /* .calendar-container를 기준으로 위치 */
		z-index: 1000; /* 다른 요소 위에 나타나도록 */
		background-color: #fff;
		border: 1px solid #ddd;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		border-radius: 8px;
		padding: 15px;
		min-width: 300px; /* 달력 UI의 크기에 따라 조절 */
		left:15px;
	}

	/* 달력 UI Placeholder 스타일 (선택 사항) */
	.calendar-dropdown-menu p {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.thisStart, .thisEnd {
		width:35%;
		text-align:center;
		font-size:14px !important;
		font-weight:700;
		color:#333;
	}	


	/* ****** List View 스타일 끝 ****** */	
}