/* =====================================================================
   예약 프로그램(v2) 화면 전용 스타일
   - /reservation/**, /onsite/** 경로에서만 로드된다.
   - 논개제(sub.css)에 있던 레이아웃 클래스를 야행 테마에 맞춰 옮긴 것.
     · 포인트 컬러 : #147fe4 / #54a3ee (논개제 파랑) → #5d4596 (야행 보라)
     · 폰트        : GmarketSans(논개제 전용) → 야행 기본 폰트 + 굵기로 대체
   ===================================================================== */

/* --- 텍스트 유틸 (논개제 GmarketSans 대체) --- */
.text-gb { font-weight: 700 !important; }
.text-gm { font-weight: 500 !important; }
.text-ngf { color: #5d4596; }

/* --- 본문 영역 --- */
.sub-contents {
    padding-top: 80px;
    padding-bottom: 100px;
}
.sub-contents-title {
    margin-bottom: 50px;
    position: relative;
    z-index: 9;
}
.sub-contents-title > * {
    text-align: center;
}
.sub-contents-title h1 { font-size: 50px; }
.sub-contents-title h2 { font-size: 40px; line-height: 60px; }
.sub-contents-title h4 { font-size: 26px; line-height: 40px; }
.sub-contents-title h5 {
    position: relative;
    font-size: 22px;
    margin-top: 25px;
    z-index: 5;
}

/* --- 프로그램 카드 목록 --- */
.sub-p-list.slick-initialized .slick-slide { margin: 0 10px; }
.sub-p-hover-more {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    line-height: 58px;
    background: #5d4596;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
.sub-p-wave {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
}


/* --- 프로그램 카드 (논개제 sub.css 의 .sub-p-* 기본 레이아웃) --- */
.sub-p-item {
    float: left;
    width: calc((100% - 60px) / 3);
    height: 395px;
    border-radius: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
}
.sub-p-item:nth-child(3n) { margin-right: 0; }
.sub-p-img {
    position: relative;
    width: 100%;
    height: 310px;
    overflow: hidden;
}
.sub-p-img .list-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sub-p-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 0;
}
.sub-p-item:hover .sub-p-hover { display: flex; }
.sub-p-txt {
    position: relative;
    width: 100%;
    height: 100px;
    background: #fff;
    padding: 10px 20px;
}
.sub-p-txt h5 {
    font-size: 24px;
    word-break: keep-all;
    min-height: 36px;
}

/* 기간/장소 아이콘 */
.info-location::before,
.info-date::before {
    position: absolute;
    display: block;
    content: '';
    left: 0;
    width: 25px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 20px;
}
.info-location::before { top: 0; background-image: url(../images/sub/detail-location.png); }
.info-date::before { top: 3px; background-image: url(../images/sub/detail-calendar.png); }

@media screen and (max-width: 1024px) {
    .sub-p-item { height: 310px; }
    .sub-p-img { height: 210px; }
}
@media screen and (max-width: 768px) {
    .sub-p-item {
        width: calc((100% - 10px) / 2);
        height: 200px;
        border-radius: 15px;
        margin-right: 10px;
        margin-bottom: 20px;
    }
    .sub-p-item:nth-child(3n) { margin-right: 10px; }
    .sub-p-item:nth-child(2n) { margin-right: 0; }
    .sub-p-img { height: 150px; }
    .sub-p-txt { padding: 0 10px; }
    .sub-p-txt h5 { font-size: 18px; margin-bottom: 0; }
    .sub-p-txt p { font-size: 12px; word-break: break-all; width: 100%; }
    .info-location::before { background-size: 16px; }
    .info-date::before { background-size: 18px; }
}

/* --- 상세 --- */
.detail-info {
    position: absolute;
    bottom: 30px;
}
.detail-info h6 {
    position: relative;
    margin-top: 10px;
    padding-left: 30px;
    line-height: 30px;
}
.sub-detail-contents {
    width: 950px;
    max-width: 100%;
    margin: 80px auto;
    text-align: center;
    word-break: keep-all;
}
.detail-bar {
    display: block;
    content: '';
    width: 28px;
    height: 3px;
    background: #5d4596;
    margin: 20px auto;
}
.detail-pp {
    margin: 35px 0;
    line-height: 28px;
}
.btn-sub-to-list {
    display: block;
    width: 320px;
    height: 80px;
    border-radius: 40px;
    font-size: 20px;
    border: 3px solid #5d4596;
    background: #5d4596;
    color: #fff;
    margin: 30px auto 0;
    cursor: pointer;
}
.btn-sub-to-list:hover {
    background: #fff;
    color: #5d4596;
}

/* --- 반응형 --- */
@media screen and (max-width: 768px) {
    .sub-contents {
        padding-top: 40px;
        padding-bottom: 30px;
    }
    .sub-contents-title {
        margin-bottom: 0;
        padding: 0 20px;
        word-break: keep-all;
    }
    .sub-contents-title h1 { margin-bottom: 20px; font-size: 34px; }
    .sub-contents-title h2 { font-size: 24px; line-height: 40px; }
    .sub-contents-title h4 { font-size: 18px; line-height: 30px; }
    .sub-contents-title h5 {
        font-size: 16px;
        line-height: 24px;
        word-break: keep-all;
        padding: 0 20px 20px;
        margin-top: 10px;
    }
    .detail-info { position: relative; bottom: 0; }
    .detail-info h6 { margin-top: 10px; padding-left: 25px; line-height: 25px; }
    .sub-detail-contents { width: 100%; margin: 30px 0; }
    .detail-bar { margin: 15px auto; }
    .detail-pp { margin: 15px 0; line-height: 24px; font-size: 14px; }
    .btn-sub-to-list { width: 60%; height: 50px; border-radius: 25px; font-size: 16px; }
}

/* 대표 이미지 미등록 시 대체 썸네일 (깨진 이미지 아이콘 방지) */
.list-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: linear-gradient(135deg, #5d4596 0%, #3d2d63 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

/* 상세 대표 이미지 미등록 시 */
.detail-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 340px;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(135deg, #5d4596 0%, #3d2d63 100%);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}