/*
 * 이 스타일시트는 BOOK NOW 페이지 템플릿의 전용 스타일입니다.
 * --------------------------------------------------------------------------------
 */

/* 변수 정의 */
:root {
    --white-color: #ffffff;
    --card-height-pc: 264px;
    --pretendard: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --pink-color: #fb80db;
    --mudpink-color: #ce9196;
    --white-color: #ffffff;
    --black-color: #000000;
    --main-text: #2d2d2d;
    --sub-text: #666666;
    --hover-color: #b24b5a;
    --background-color: #fafaff;
    --header-height: 80px;
}

/* 이미지 기본 스타일을 재정의하여 부모 요소에 맞춰 크기를 고정 */
img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------------------------- */
/* 메인 레이아웃 및 타이틀 */
/* -------------------------------------------------------------------------------- */
.book-now-page__service-type {
display: none;
}
.book-now-page__main-title {
    color: var(--mudpink-color) !important;
}
.book-now-page__card {
    background: white;
}
.book-now-page__main-content {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: var(--background-color); /* 텍스트 색상 추가 */
}

.book-now-page__container {
    width: 100%;
    max-width: 1260px;
    text-align: left; /* 기본 좌측 정렬 */
}

.book-now-page__title-section {
    padding-top: 65px; /* 타이틀과 헤더 사이 여백 */
    text-align: left;
}

.book-now-page__main-title {
    font-size: 48px;
    font-weight: bold;
    color: var(--white-color);
    margin: 0;
    line-height: 1;
}

.book-now-page__sub-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--main-text);
    margin: 0;
    padding-bottom: 65px; /* 부제와 컨텐츠 사이 여백 */
}

.book-now-page__text-info h3 {
    color: var(--main-text);
}

/* -------------------------------------------------------------------------------- */
/* 컨텐츠 그리드 및 카드 */
/* -------------------------------------------------------------------------------- */
.book-now-page__content-grid-section {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.book-now-page__card-container {
    display: grid;
    /* 모바일에서는 1열로 정렬합니다. */
    grid-template-columns: 1fr;
    gap: 15px;
}

/* PC 레이아웃: 769px 이상 */
@media (min-width: 769px) {
    .book-now-page__card-container {
        /* PC에서는 3열로 정렬합니다. */
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.book-now-page__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.book-now-page__border-top {
    height: 1px;
    width: 100%;
    background-color: var(--white-color);
}

.book-now-page__card-content-wrapper {
    padding: 30px;
}

.book-now-page__image-wrapper {
    width: 100%;
    height: var(--card-height-pc);
    overflow: hidden;
}

.book-now-page__image-link {
    display: block;
    cursor: pointer;
    overflow: hidden;
}

.book-now-page__image-wrapper img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

.book-now-page__image-wrapper:hover img {
    transform: scale(1.1);
}

.book-now-page__text-info {
    padding-top: 10px;
}

.book-now-page__text-info h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding-bottom: 10px;
}

.book-now-page__text-info .book-now-page__description {
    font-size: 16px;
    font-weight: normal;
    color: #ccc;
    margin: 0;
}

.book-now-page__text-info .book-now-page__service-type {
    font-size: 20px;
    font-weight: normal;
    color: #9f9f9f;
    margin: 0;
    padding-top: 10px;
}
/* -------------------------------------------------------------------------------- */
/* 모바일 반응형 디자인 (768px 이하) */
/* -------------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* .book-now-page__card-container를 2열 그리드로 변경 */
    .book-now-page__card-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }	
    .book-now-page__container {
        padding: 0 15px;
    }

    .book-now-page__title-section {
        padding-top: 40px;
    }

    .book-now-page__main-title {
        font-size: 32px;
        text-align: center;
    }

    .book-now-page__sub-title {
        font-size: 24px;
        text-align: center;
        padding-bottom: 40px;
    }

    /* 모바일 그리드 관련 CSS를 .book-now-page__card-container로 옮겨서 처리 */
    .book-now-page__card {
        height: auto;
    }

    .book-now-page__image-wrapper {
        height: 150px;
    }

    .book-now-page__card-content-wrapper {
        padding: 20px 5px;
    }

    .book-now-page__text-info h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .book-now-page__text-info .book-now-page__description {
        font-size: 12px;
    }

    .book-now-page__text-info .book-now-page__service-type {
        font-size: 16px;
    }

    .book-now-page__main-title,
    .book-now-page__sub-title {
        text-align: left;
    }

    .book-now-page__sub-title {
        font-size: 18px;
    }
    
    .book-now-page__title-section {
        padding-top: 60px;
    }
    
    .book-now-page__main-content {
        padding: 20px 0px;
    }
    
    .book-now-page__card-content-wrapper {
        padding: 20px 5px;
    }

    /* .book-now-page__card-group 와 .book-now-page__content-grid-section 의 불필요한 그리드 속성 제거 */
    .book-now-page__card-group,
    .book-now-page__content-grid-section {
        display: flex; /* 또는 block */
        flex-direction: column;
        gap: 30px;
    }

}