/* golf reserve */
:root { 
    --book-bg-color: #FBF9F4;
}
/* step1 */
#step1{position: relative;}

.month{text-align: center;font-weight: bold;font-size: 1.7rem;}
.week{display:flex;height: 50px;line-height: 50px;}
.week > li{flex:1;font-size: 14px;text-align: center;}
.week > li:first-child{color: red;}
.week > li:last-child{color: blue;}
.days{display:grid;grid-template-columns:repeat(7, 1fr);}
.days > li > div{text-align: center;height: 60px;margin: 0 auto;padding-top: 6px;}
.days > li > div > span{display: block;font-size: .9rem;color: #666;}
.days > li:nth-child(7n){color: #2D6FC4;}
.days > li:nth-child(7n+1){color: #ff6969;}
.today{cursor: pointer;border: 2px solid var(--main-color);background-color: #fff;}
.book{background-color: var(--book-bg-color)!important;cursor: pointer;}
.selected{background-color: var(--main-color) !important;color: #fff;}
.selected > span{color: #fff !important;}
.book:hover{background-color: var(--main-color) !important;color: #fff;}
.book:hover > span{color: #fff;}
.end{cursor:default;background-color: #D2D2D2;}
.wait{background-color: #E1C794;cursor: pointer;}
.holy{color: #FF6969;}

#step1 .arrow{width: 50px;height: 50px;line-height: 50px;text-align: center;position: absolute;top: 20px;transform: translateY(-50%);font-size: 40px;cursor: pointer;color: #999;}
#step1 .btn_prev{left: 0px;}
#step1 .btn_next{right: 0px;}

.step1_info{margin-top: 50px;line-height: 14px;display: flex;justify-content:center;  align-items: center; margin-bottom: 20px;}
	.step1_info > span{display: inline-block;width: 14px;height: 14px;}
	.step1_info > span:nth-child(1){border: 1px solid var(--main-color);}
	.step1_info > span:nth-child(3){background-color: var(--book-bg-color);}
	.step1_info > span:nth-child(5){background-color: #D2D2D2;}
	.step1_info > strong{display: inline-block;padding-right: 20px;padding-left: 4px;}


	@media (max-width:768px){
		.calendar-wrap > div{padding: 0;}
		.calendar-wrap > div:nth-child(2){margin-top: 20px;}
        .month{font-size: 20px;}
		.days > li > div{height: 50px;}
		.days > li > div > span{font-size: .8rem;}
		.days > li > div > span > i{display: none;}
        #step1 .arrow{width: 30px;height: 30px;line-height: 30px;font-size: 20px;top: 16px;}
	}

/* step2 */
#step2{padding-top: 20px;display: none;}
    .tab-golf{width: 100%;margin-bottom: 10px;background-color: #F3F3F5;display: flex;}
	.tab-golf > li{text-align: center;position: relative;flex: 1;}
	.tab-golf > li > a{display: block; color: #888;padding: 18px 0;line-height: 1rem;}
	.tab-golf > li > a.active{color: var(--sub-color);font-weight: 700;border: 1px solid var(--sub-color);border-radius:7px;background-color: #fff;}

	.tab-content{max-height:800px;overflow-y:auto;margin-top: 0;}
    .time-list .btn-main{width: 80px;}
    .time-list tr:hover{background-color: #F9F9F9;}
    .time-list td{padding: 12px 0px;}
    .special-price td:nth-child(4){text-decoration: line-through;}
    .special-price td:nth-child(6){color:#be2626;}
    .time-list .col-1{width: 14%;}
    .time-list .col-2{width: 14%;}
    .time-list .col-3{width: 14%;}
    .time-list .col-4{width: 15%;}
    .time-list .col-5{width: 14%;}
    .time-list .col-6{width: 15%;}
    .time-list .col-7{width: 14%;}

    span.event-name{font-size: 14px;padding: 2px 4px;border-radius: 5px;border: 1px solid #be2626;color: #be2626;}

	@media (max-width:768px){
        .time-list,
        span.event-name{font-size: 13px;}
        span.event-name{width: 52px;display: inline-block;padding: 2px 1px;}
		.tab_conts{height: auto;}
        .time-list .btn-main{width: auto;}
        .tab-golf > li > a{padding: 10px 0;}
        .time-list td{padding: 6px 0;}
        .time-list .col-1{width: 11%;}
        .time-list .col-2{width: 11%;}
        .time-list .col-3{width: 13%;}
        .time-list .col-4{width: 17%;}
        .time-list .col-5{width: 17%;}
        .time-list .col-6{width: 17%;}
        .time-list .col-7{width: 14%;}
	}

/* step3 */
#step3{display: none;}
#step3 h3{margin-top: 50px;}
.reserve-info{border-top: 1px solid #000;}
.reserve-info > ul{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.reserve-info > ul.one-line{align-items: flex-start;}
.reserve-info > ul > li{border-bottom: 1px solid #eee;padding: 12px 10px;height: 74px;display: flex;align-items: center;}
.reserve-info > ul > li:nth-child(2n){width: 33%;font-size: 22px;color: var(--main-color);}
.reserve-info > ul > li:nth-child(2n+1){width: 17%;}
.reserve-info > ul.one-line > li:nth-child(2n){width: 83%;}
.reserve-info > ul.one-line > li:nth-child(2n+1){width: 17%;}
.reserve-info s{font-size: 16px;color: #666;margin-right: 10px;}
.reserve-info .time-course-hole > span:not(:last-child)::after{content: '|';margin: 0 10px;color: #ccc;font-size: 18px;}
#step3 span.normalfee{color: #999;text-decoration: line-through;font-size: 1rem;padding-right: 10px;}

#step3 span.normalfee{color: #999;text-decoration: line-through;font-size: 1rem;padding-right: 10px;}

.golf-info-box{background-color: #f7f7f7;padding: 50px;margin-top: 30px;}

.btn-golf-wrap{display: flex;justify-content: center;align-items: center;gap: 6px;margin-top: 50px;}
.btn-golf-wrap > button{min-width: 150px;}

@media (max-width:992px){
    .reserve-info > ul > li:nth-child(2n),
    .reserve-info > ul.one-line > li:nth-child(2n){width: 65%;font-size: 16px;}
    .reserve-info > ul > li:nth-child(2n+1),
    .reserve-info > ul.one-line > li:nth-child(2n+1){width: 35%;}
    .reserve-info > ul > li{padding: 6px 0;height: 60px;}
    .reserve-info s{font-size: 14px;}
    .reserve-info .time-course-hole > span:not(:last-child)::after{font-size: 16px;}

    .golf-info-box{padding: 10px;}
}

@media (max-width:768px){
    .reserve-info > ul > li{padding: 6px 0;height: 50px;}
    .btn-golf-wrap{margin-top: 30px;}
    .btn-golf-wrap > button{min-width: auto;flex:1;}
}


/* conform */
.grid-list.golf > ul{grid-template-columns: 20% 15% 15% 15% 15% 20%;}
.grid-list.cancel-list > ul{grid-template-columns: repeat(6, 1fr);}
.grid-list.penalty-list > ul{grid-template-columns: repeat(4, 1fr);}
span.line{display: inline-block;width: 1px;height: 10px;background-color: #ccc;margin: 0 10px;}

@media (max-width:768px){
    .reserve-conform .grid-list ul{grid-template-columns: 1fr;grid-auto-flow: row;margin-bottom: 20px;border-top: 1px solid #5c5c5c;}
    .reserve-conform .grid-list li{padding: 10px 0;}
    .reserve-conform .grid-list li::before{display: inline-block;width:100px;margin-right: 6px;color: var(--main-color);}
    .reserve-conform .grid-list ul.thead{display: none;border-top: none;}

    .grid-list.golf{border-top: none;}
    .grid-list.golf > ul > li:nth-child(6){border-bottom: none;justify-content: end;}
    .grid-list.golf > ul > li:nth-child(1)::before{content: '예약일자';}
    .grid-list.golf > ul > li:nth-child(2)::before{content: '예약시간';}
    .grid-list.golf > ul > li:nth-child(3)::before{content: '코스';}
    .grid-list.golf > ul > li:nth-child(4)::before{content: '홀';}
    .grid-list.golf > ul > li:nth-child(5)::before{content: '혜택적용';}
    .grid-list.golf > ul > li:nth-child(6)::before{content: '';width: 0;margin-right: 0;}

    .grid-list.cancel-list{border-top: none;}
    .grid-list.cancel-list > ul > li:nth-child(1)::before{content: '예약일자';}
    .grid-list.cancel-list > ul > li:nth-child(2)::before{content: '예약시간';}
    .grid-list.cancel-list > ul > li:nth-child(3)::before{content: '코스';}
    .grid-list.cancel-list > ul > li:nth-child(4)::before{content: '취소일자';}
    .grid-list.cancel-list > ul > li:nth-child(5)::before{content: '비고';}
    .grid-list.cancel-list > ul > li:nth-child(6)::before{content: '구분';}

    .grid-list.penalty-list{border-top: none;}
    .grid-list.penalty-list > ul > li:nth-child(1)::before{content: '예약일자';}
    .grid-list.penalty-list > ul > li:nth-child(2)::before{content: '위약일자';}
    .grid-list.penalty-list > ul > li:nth-child(3)::before{content: '위약내용';}
    .grid-list.penalty-list > ul > li:nth-child(4)::before{content: '예약정지기간';}

    .no-content > li:nth-child(1)::before{display: none;}
}

/* 동반자등록 */
.grid-list.player > ul{grid-template-columns:repeat(5, 1fr);}
.grid-list.player > ul.no-data{grid-template-columns:1fr 2fr 1fr 1fr;}
.grid-list.player > ul a{width: 100px;}
.grid-list.player > ul > li{display: flex;align-items: center;justify-content: center;}

@media (max-width:768px){
    .grid-list.player > ul,
    .grid-list.player > ul.no-data{grid-template-columns: 30% 70%;grid-template-rows: repeat(3, 1fr); width: 100%;border-bottom: 1px solid #e7e7e7;}
    .grid-list.player > ul > li{border-bottom: none; justify-content: start;}
    .grid-list.player > ul > li:nth-child(1){grid-column: 1 / 3;grid-row: 1 / 2;font-size: 16px;color: var(--main-color);}
    .grid-list.player > ul > li:nth-child(2){grid-column: 1 / 2;grid-row: 2 / 3;} 
    .grid-list.player > ul > li:nth-child(3){grid-column: 2 / 3;grid-row: 2 / 3;} 
    .grid-list.player > ul > li:nth-child(4){grid-column: 1 / 2;grid-row: 3 / 4;} 
    .grid-list.player > ul > li:nth-child(5){grid-column: 2 / 3;grid-row: 3 / 4;justify-content: end;} 

    .grid-list.player > ul.no-data > li:nth-child(1){grid-column: 1 / 3;grid-row: 1 / 2;} 
    .grid-list.player > ul.no-data > li:nth-child(2){grid-column: 1 / 3;grid-row: 2 / 3;} 
    .grid-list.player > ul.no-data > li:nth-child(3){grid-column: 1 / 2;grid-row: 3 / 4;} 
    .grid-list.player > ul.no-data > li:nth-child(4){grid-column: 2 / 3;grid-row: 3 / 4;justify-content: end;} 
}

/* modal (myModal1 등 - reserve_ezs.css에서 이관) */
.modal-lg{max-width:800px;}
.modal .modal-body{padding:50px;}
.modal h4{margin-bottom: 30px;text-align: center;width: 100%;}
.bookingdate{text-align: center;background-color: #f7f7f7;padding: 14px;}
.bookingdate span{color: #666;font-size: 1rem;}
.bookingdate strong{font-size: 1.3rem;color: var(--main-color);padding-right: 20px;}
.bookinginfo{text-align: center;padding: 10px;margin-bottom: 20px;}
.bookinginfo2{text-align: center;padding: 10px;font-size: 1.4rem;}
.bookinginfo2 > strong{color: #B61C1C;}
.modal1 > div{position: relative;}
.modal1 > div > div{border: 1px solid rgba(44,116,134,.5);border-radius:7px;height: 100%;padding: 14px 14px 70px 14px;box-shadow:2px 2px 1px rgba(182,182,182,0.6);}
.modal1 button{position: absolute;bottom: 14px;width: 84%;left: 8%;}
.modal1 button > strong{color: #ff0;}
.modal1 span.normalfee{color: #999;text-decoration: line-through;padding: 0 10px;}
.modal1 form{margin-top: 10px;}
ul.entrust_info{margin-top: 10px;width: 98%;margin-left: 1%;padding: 10px;background-color: #f7f7f7;display: none;}
ul.entrust_info > li{padding: 3px 0;}
ul.entrust_info > li > span{display: inline-block;width: 30%;padding-left: 10px;}
ul.entrust_info > li:nth-child(3){text-align: center;}
.btn-closemodal{position: absolute;top: 10px;right: 10px;}
.modal_title3{text-align: center;background-color: #f7f7f7;padding: 6px;}
.modal1 li{text-align: center;}
.modal1 .text_wrap{text-align: center;display: flex;align-items: center; justify-content:center;height: 100%;}
.modal-footer{justify-content: center;}

.btn-main:disabled,
.btn-main[disabled]{background-color: #ccc !important;border-color: #ccc !important;}
.btn-main:disabled strong,
.btn-main[disabled] strong{color: #333 !important;}
.btn-closemodal{padding:10px 10px 8px 10px;line-height: 1;}

@media (max-width:768px){
    .bookingdate{text-align: center;}
    .bookinginfo{margin-bottom: 20px;}
    .modal1 > div:first-of-type{margin-bottom: 30px;}
    .modal1 form .form-control{width: 90%;margin-left: 5%;}
    .bookingdate span{display: none;}
    .modal .modal-body{padding:20px;}
    .modal1 button{width: 82%;left: 9%;}
}

.reserve-guest-banner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px 16px;
    margin-bottom:20px;
    padding:14px 16px;
    background:#F3F3F5;
    border-radius:6px;
    border:1px solid #e8e8eb;
}
.reserve-guest-banner > p{
    margin:0;
    flex:1;
    min-width:200px;
    font-size:0.95rem;
    line-height:1.55;
    color:#333;
}
.reserve-guest-banner .btn{flex-shrink:0;align-self:center;}

#step3 .reserve-guest-actions,
.reserve-guest-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    width:100%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
    gap:14px;
    padding-top:8px;
}
.reserve-guest-actions > p{
    margin:0;
    font-size:0.95rem;
    line-height:1.55;
    color:#555;
    text-align:center;
}
.reserve-guest-actions .btn{
    width:100%;
    max-width:none;
    min-width:0;
    align-self:stretch;
}

@media (max-width:768px){
    .reserve-guest-banner{
        flex-direction:column;
        align-items:stretch;
        padding:12px 14px;
    }
    .reserve-guest-banner .btn{width:100%;max-width:none;}
    #step3 .reserve-guest-actions{max-width:none;padding-left:0;padding-right:0;}
}