@charset "UTF-8";
/* 이벤트 (page/event.php)
 * 서브 공통(subNavi, subContainer)은 sub.css, 페이징(.paging)·빈 목록(.comm_empty)은 community.css 와 함께 로드된다 (theme/basic/head.sub.php).
 */

/*공통 - 타이틀*/
.event_sec{padding-bottom: 80px;}
.event_head{text-align: center; margin-bottom: 80px;}
.event_head .eng_titl{font-family: 'marcellus'; font-size: 18px; color:#BA8F71; letter-spacing: 4px; margin-bottom: 14px;}
.event_head .titl{font-family: 'marcellus'; font-size: 64px; font-weight: 300; color:#BA8F71; line-height: 1; letter-spacing: 2px; margin-bottom: 40px;}
.event_head .subs{font-size: 16px; color:#76706e;}

/*목록*/
.event_list{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px 26px; margin-bottom: 60px;}
.event_list .item a{display: block;}
.event_list .item .img_box{position: relative; aspect-ratio: 7/9; overflow: hidden; background: #F9F8F7;}
.event_list .item .img_box img{width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;}
.event_list .item a:hover .img_box img{transform: scale(1.04);}
.event_list .item .titl{margin-top: 16px; text-align: center; font-size: 16px; font-weight: 500; color:#353130; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.event_list .item .period{margin-top: 4px; text-align: center; font-size: 14px; color:#BCBCBC; font-family: 'Poppins';}
.event_list .item a:hover .titl{color:#BA8F71;}

/*종료*/
.event_list .item.is-end .img_box img{filter: grayscale(100%); opacity: .55;}
.event_list .item.is-end a:hover .img_box img{transform: none;}
.event_list .item .end_mark{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(53,49,48,.35); color:#fff; font-size: 26px; font-weight: 600; letter-spacing: 2px;}
.event_list .item.is-end .titl{color:#9a9a9a;}

.event_sec .paging{justify-content: center;}
.event_sec .comm_empty{background: #F9F8F7; margin-bottom: 60px;}

/*상세*/
.event_view{max-width: 900px; margin: 0 auto;}
.event_view__head{text-align: center; padding-bottom: 30px; border-bottom: 1px solid #afafaf; margin-bottom: 40px;}
.event_view__head .state{display: inline-block; padding: 4px 14px; font-size: 13px; color:#fff; background: #B98E71; margin-bottom: 14px;}
.event_view__head .state.ready{background: #8a9bb0;}
.event_view__head .state.end{background: #BCBCBC;}
.event_view__head .titl{font-size: 26px; font-weight: 600; color:#353130; line-height: 1.35; margin-bottom: 10px;}
.event_view__head .period{font-size: 15px; color:#9a9a9a; font-family: 'Poppins';}
.event_view__body .img_box{text-align: center;}
.event_view__body .img_box img{display: block; width: 100%; height: auto;}
.event_view__body .conts{margin-top: 40px; font-size: 16px; line-height: 1.7; color:#353130; word-break: keep-all;}
.event_view__body .conts img{max-width: 100%; height: auto;}
.event_view.is-end .event_view__body .img_box img{filter: grayscale(100%); opacity: .7;}
.event_view__btns{display: flex; justify-content: center; gap: 12px; margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee;}
.event_view__btns a,
.event_view__btns button{display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 54px; padding: 0 28px; border: 1px solid #BC9171; font-size: 16px; transition: all .3s ease;}
.event_view__btns .listBtn{color:#BC9171; background: #fff;}
.event_view__btns .listBtn:hover{background: #F9F8F7;}
.event_view__btns .rsvtBtn{color:#fff; background: #B98E71;}
.event_view__btns .rsvtBtn:hover{background: #a67656;}

.event_view__btns button{cursor: pointer; font-family: inherit;}

/*상담 예약 모달 - 입력 항목 스타일은 contact.css (.rsv_field, .rsv_type, .rsv_select, .rsv_date, .rsv_agree, .rsv_submit)*/
.ev_modal{position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;}
.ev_modal[hidden]{display: none;}
.ev_modal__dim{position: absolute; inset: 0; background: rgba(53,49,48,.55);}
.ev_modal__box{position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; background: #FAF0E4; border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.2);}
.ev_modal__head{position: sticky; top: 0; z-index: 7; padding: 30px 40px 22px; background: #BB8F72; color: #fff;}
.ev_modal__head .eng_titl{font-family: 'marcellus'; font-size: 14px; letter-spacing: 3px; opacity: .8; margin-bottom: 6px;}
.ev_modal__head .titl{font-size: 22px; font-weight: 600;}
.ev_modal__close{position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; border: 0; background: none; cursor: pointer;}
.ev_modal__close::before,
.ev_modal__close::after{content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 1px; background: #fff;}
.ev_modal__close::before{transform: translate(-50%,-50%) rotate(45deg);}
.ev_modal__close::after{transform: translate(-50%,-50%) rotate(-45deg);}
.ev_modal .form_box{padding: 30px 40px 40px;}
.ev_modal .rsv_date__panel{left: 0; right: 0; width: auto;}

html.ev_modal_open,
html.ev_modal_open body{overflow: hidden;}

@media screen and (max-width: 1024px) {
    .event_list{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px;}
    .event_head .titl{font-size: 52px;}
}

@media screen and (max-width: 768px) {
    .event_head{margin-bottom: 50px;}
    .event_head .eng_titl{font-size: 15px;}
    .event_head .titl{font-size: 40px; margin-bottom: 24px;}
    .event_head .subs{font-size: 14px;}

    .event_list{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; margin-bottom: 40px;}
    .event_list .item .titl{margin-top: 10px; font-size: 14px;}
    .event_list .item .period{font-size: 12px;}
    .event_list .item .end_mark{font-size: 20px;}

    .event_view__head .titl{font-size: 20px;}
    .event_view__body .conts{font-size: 15px;}
    .event_view__body .img_box{margin-left: -20px; margin-right: -20px;}
    .event_view__btns a,
    .event_view__btns button{min-width: 0; flex: 1; height: 50px; font-size: 15px;}

    .ev_modal{padding: 0; align-items: flex-end;}
    .ev_modal__box{max-width: none; max-height: 92vh; border-radius: 14px 14px 0 0;}
    .ev_modal__head{padding: 24px 24px 18px;}
    .ev_modal__head .titl{font-size: 19px;}
    .ev_modal__close{top: 18px; right: 16px;}
    .ev_modal .form_box{padding: 24px 24px 36px;}
}