@charset "utf-8";

/* 기본 배너 스타일 */
.main-banner {
    position: relative;
    width: 100%;
    height: 350px; /* PC 기준 높이 */
    background: url('../img/lou_bg.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
	margin-bottom:50px;
}

/* 배경을 살짝 어둡게 하여 글자 가독성 높임 (Overlay) */
.main-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* 이미지에 따라 조절 */
}

.banner-content {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.banner-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
	color:#fff;
}

.banner-text {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 유지 */
}

/* 📱 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
    .main-banner {
        height: 280px; /* 모바일에서 높이 축소 */
    }

    .banner-title {
        font-size: 32px; /* 타이틀 크기 축소 */
        margin-bottom: 15px;
    }

    .banner-text {
        font-size: 15px; /* 본문 크기 축소 */
        line-height: 1.5;
        padding: 0 10px;
    }

    /* 모바일에서 강제 줄바꿈 해제 또는 최적화 */
    .banner-text br {
        display: none; /* 화면이 좁을 땐 브라우저 자동 줄바꿈 사용 */
    }
}


section.studyroom {
    padding: 0 20px 72px 20px;
    overflow: hidden;
}

section.studyroom .cont {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* 그리드 레이아웃 */
.room-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 아이템 간격 */
}

/* 카드 스타일 */
.room-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    /* PC 4열 기준 (기본) */
    width: calc(25% - 15px); 
}

.room-card:hover { transform: translateY(-5px); }

/* 이미지 영역 */
.room-img { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.room-img img { width: 100%; height: 100%; object-fit: cover; }
.badge {
    position: absolute; top: 10px; left: 10px;
    background: #ff4757; color: #fff; padding: 4px 8px;
    font-size: 11px; border-radius: 4px; font-weight: bold;
}

/* 정보 영역 */
.room-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.room-name { font-size: 18px ; margin-bottom: 8px; line-height: 1.4; word-break: keep-all; }
.room-address {
	font-size: 13px;
    color: #777;
    margin-bottom: 15px;
    
    /* 한 줄 말줄임 핵심 설정 */
    white-space: nowrap;      /* 줄바꿈 금지 */
    overflow: hidden;         /* 넘치는 부분 숨김 */
    text-overflow: ellipsis;  /* 넘치는 부분을 ...으로 표시 */
    
    /* 아이콘과 텍스트가 같이 있을 때 정렬 보정 */
    display: block;           
    width: 100%;
}

.room-address i {
    margin-right: 5px;
}

.room-details { list-style: none; margin-bottom: 20px; border-top: 1px dashed #eee; padding-top: 15px; }
.room-details li { font-size: 14px; margin-bottom: 6px; color: #555; }
.room-details li i { width: 20px; color: #3498db; }
.room-details li strong { color: #222; font-size: 16px; }

/* 버튼 */
.btn-reserve {
    display: block; text-align: center; background: #3498db; color: #fff;
    padding: 12px; border-radius: 6px; text-decoration: none;
    font-weight: 600; font-size: 14px; transition: background 0.2s;
}
.btn-reserve:hover { background: #2980b9; }

/* --- 반응형 미디어 쿼리 --- */

/* 태블릿 (1024px 이하) : 3열 */
@media screen and (max-width: 1024px) {
    .room-card { width: calc(33.33% - 14px); }
}

/* 태블릿/모바일 (768px 이하) : 2열 */
@media screen and (max-width: 768px) {
    .room-card { width: calc(50% - 10px); }
    .room-name { font-size: 16px; }
}

/* 모바일 (480px 이하) : 1열 */
@media screen and (max-width: 480px) {
    .room-card { width: 100%; }
    .room-img { aspect-ratio: 16 / 9; } /* 모바일은 조금 더 넓게 */
}


/* 상세페이지 루트 컨테이너 */
.sr-detail-container { max-width: 100%; margin: 0 auto; background: #fff; padding-bottom: 100px; position: relative; }

/* 이미지 슬라이드 */
.sr-visual { width: 100%; aspect-ratio: 16 / 9; background: #eee; }
.sr-visual img { width: 100%; height: 100%; object-fit: cover; }

/* 헤더 정보 */
.sr-header { padding: 25px 20px; border-bottom: 8px solid #f5f7fa; }
.sr-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; color: #111; }
.sr-address { font-size: 14px; color: #777; margin-bottom: 20px; }

.sr-comment {padding: 30px 20px; line-height: 1.8; color: #444;}

.sr-summary-grid { display: flex; background: #f8f9fb; border-radius: 10px; padding: 15px; justify-content: space-around; }
.summary-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.summary-item i { color: #3498db; font-size: 18px; }
.summary-item span { font-size: 12px; color: #888; }
.summary-item strong { font-size: 14px; color: #222; }

/* 탭 메뉴 스타일 */
.sr-tabs { display: flex; list-style: none !important; padding: 0 !important; margin: 0 !important; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 10; }
.sr-tabs li { flex: 1; text-align: center; padding: 15px 0; font-size: 15px; color: #888; cursor: pointer; border-bottom: 2px solid transparent; }
.sr-tabs li.active { color: #3498db; border-bottom-color: #3498db; font-weight: 700; }

/* 탭 컨텐츠 */
.sr-tab-content { display: none; padding: 30px 20px; line-height: 1.8; color: #444; }
.sr-tab-content.active { display: block; }
.sr-tab-content h3 { font-size: 18px; margin-bottom: 15px; color: #111; }
.sr-tab-content img { width: 100%; border-radius: 8px; margin-top: 15px; }

.facility-list, .notice-list { list-style: none !important; padding: 0 !important; }
.facility-list li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.facility-list i { width: 20px; color: #3498db; }
.notice-list li { position: relative; padding-left: 15px; margin-bottom: 10px; color: #666; }
.notice-list li::before { content: "•"; position: absolute; left: 0; color: #ff4757; }


/* 버튼 컨테이너 */
.sr-action-buttons {
    display: flex;
    gap: 12px;
    padding: 40px 20px;
    background: #fff;
    justify-content: center;
    border-top: 1px solid #eee;
    margin-top: 20px;
}

/* 공통 버튼 스타일 */
.sr-action-buttons button, 
.sr-action-buttons a {
    flex: 1;
    max-width: 250px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* 취소하기 버튼 (연한 회색 계열) */
.btn-cancel {
    background-color: #f1f3f5 !important;
    color: #495057 !important;
}
.btn-cancel:hover {
    background-color: #e9ecef !important;
}

/* 예약하기 버튼 (브랜드 컬러 - 파란색) */
.btn-submit {
    background-color: #3498db !important;
    color: #fff !important;
}
.btn-submit:hover {
    background-color: #2980b9 !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}


@media screen and (max-width: 480px) {
    .sr-action-buttons {
        display: flex !important;
        flex-direction: row !important; /* 가로 정렬 강제 */
        gap: 8px; /* 버튼 사이 간격 최적화 */
        padding: 20px 15px !important;
        background: #fff;
    }

    .sr-action-buttons button, 
    .sr-action-buttons a {
        height: 56px !important; /* 모바일에서 누르기 좋은 도톰한 높이 */
        font-size: 16px !important;
        border-radius: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 취소하기: 가로 폭을 조금 줄임 (약 35%) */
    .btn-cancel {
        flex: 1.5 !important; 
        background-color: #f1f3f5 !important;
        color: #868e96 !important;
        border: 1px solid #e9ecef !important;
    }

    /* 예약하기: 중요하므로 더 넓게 배정 (약 65%) */
    .btn-submit {
        flex: 3 !important; 
        background-color: #3498db !important;
        color: #fff !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
    }
}

/* 안내 글상자 스타일 */
.sr-info-box {
    margin-top: 15px;
    padding: 12px 15px;
    background-color: #fff9db !important; /* 연한 노란색 계열 (강조용) */
    border: 1px solid #ffec99 !important;
    border-radius: 8px;
    display: flex;
    align-items: flex-start; /* 아이콘이 상단에 고정되게 */
    gap: 10px;
}

/* 아이콘 스타일 */
.sr-info-box i {
    color: #f08c00 !important; /* 아이콘 색상 (주황색 계열) */
    font-size: 16px;
    margin-top: 2px; /* 텍스트 첫 줄과 높이 맞춤 */
}

/* 텍스트 스타일 */
.sr-info-box .info-text p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #444 !important;
    word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 */
}

/* 텍스트 내 강조(strong) 스타일 */
.sr-info-box .info-text strong {
    color: #e67e22 !important;
    font-weight: 700;
}

/* 모바일 대응 */
@media screen and (max-width: 480px) {
    .sr-info-box {
        padding: 10px;
    }
    .sr-info-box .info-text p {
        font-size: 12px !important;
    }
}


/* 모달 배경 오버레이 */
.sr-modal-overlay {
    display: none; /* 기본 숨김 */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 10002;
    align-items: center; justify-content: center;
}

/* 모달 본체 */
.sr-modal-content {
    background: #fff; width: 90%; max-width: 450px;
    border-radius: 15px; overflow: hidden; position: relative;
    animation: slideUp 0.3s ease-out;
}

.sr-modal-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.sr-modal-header h3 { margin: 0; font-size: 18px; }
.btn-modal-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #999; }

.sr-modal-body { padding: 20px; }
.res-info-summary { background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; }
.res-info-summary p { font-size: 14px; margin-bottom: 5px; color: #666; }
.res-total-price { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #ddd; display: flex; justify-content: space-between; align-items: center; }
.res-total-price strong { font-size: 20px; color: #e74c3c; }

/* 결제 수단 선택 */
.payment-methods { display: flex; flex-direction: column; gap: 10px; }
.payment-methods label { padding: 12px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.payment-methods input:checked + label { border-color: #3498db; background: #f1f9ff; }

.sr-modal-footer { padding: 20px; }
.btn-pay-start { width: 100%; padding: 15px; background: #3498db; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; }

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


.res-field { margin-bottom: 20px; }
.res-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #333; }
.res-field input, .res-field select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; }

/* 타임 그리드 */
.time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.time-slot { 
    padding: 10px 5px; border: 1px solid #eee; text-align: center; 
    border-radius: 6px; font-size: 13px; cursor: pointer; background: #fff; transition: 0.2s;
}
.time-slot:hover { border-color: #3498db; color: #3498db; }
.time-slot.active { background: #3498db; color: #fff; border-color: #3498db; }
.time-slot.disabled { background: #f5f5f5; color: #ccc; cursor: not-allowed; text-decoration: line-through; }

.time-info { font-size: 11px; color: #999; margin-top: 8px; }

/* 금액 프리뷰 박스 */
.res-price-preview { background: #f1f9ff; padding: 15px; border-radius: 10px; border: 1px solid #d0ebff; }
.price-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.price-row.total { margin-top: 10px; padding-top: 10px; border-top: 1px solid #d0ebff; align-items: center; }
.price-row.total strong { font-size: 20px; color: #228be6; }

/* 결제 수단 그리드 */
.pay-method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 배치 */
    gap: 10px;
    margin-top: 10px;
}

/* 실제 라디오 인풋은 숨김 */
.pay-method-grid input[type="radio"] {
    display: none;
}

/* 커스텀 라벨 버튼 */
.pay-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
    gap: 8px;
}

.pay-item i {
    font-size: 20px;
    color: #555;
}

.pay-item span {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

/* 선택되었을 때 스타일 */
.pay-method-grid input[type="radio"]:checked + .pay-item {
    border-color: #3498db;
    background-color: #f1f9ff;
    box-shadow: 0 0 0 1px #3498db;
}

.pay-method-grid input[type="radio"]:checked + .pay-item i,
.pay-method-grid input[type="radio"]:checked + .pay-item span {
    color: #3498db;
}

/* 카카오페이 전용 포인트 컬러 (선택사항) */
.pay-method-grid input[type="radio"]:checked + .pay-kakao {
    border-color: #fee500;
    background-color: #fffde7;
}
.pay-method-grid input[type="radio"]:checked + .pay-kakao i,
.pay-method-grid input[type="radio"]:checked + .pay-kakao span {
    color: #3c1e1e;
}