/* =========================================================
   Reservation Base
========================================================= */

.reservationWrap{
    max-width:1200px;
    margin:70px auto 100px;
    padding:40px 20px;
    box-sizing:border-box;
}


.reservationHero{
    text-align:center;
    margin-bottom:60px;
}


.heroBadge{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:#FDE7EF;
    color:#EC5A87;
    font-size:13px;
    font-weight:600;
}


.reservationHero h2{
    margin:18px 0 15px;
    font-size:44px;
    color:#222;
}


.reservationHero p{
    font-size:17px;
    line-height:1.8;
    color:#777;
}



/* =========================================================
   Card
========================================================= */

.reserveCard{
    background:#fff;
    border:1px solid #eee;
    border-radius:24px;
    padding:45px;
    margin-bottom:35px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}


.sectionTitle{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:35px;
}


.step{
    width:48px;
    height:48px;
    flex-shrink:0;
    border-radius:50%;
    background:#EC5A87;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
}


.sectionTitle h3{
    margin:0;
    font-size:32px;
}



/* =========================================================
   Product Select
========================================================= */

.productTabArea{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:0;
}


/* 상품 3개씩 한 줄 */

.productTabRow{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}


/* 상품 선택 버튼 */

.productTab{
    width:100%;
    min-width:0;
    min-height:66px;
    padding:13px 16px;

    display:flex;
    justify-content:center;
    align-items:center;

    box-sizing:border-box;

    border:1px solid #ddd;
    border-radius:16px;

    background:#fff;
    color:#444;

    font-family:inherit;
    font-size:16px;
    font-weight:600;
    line-height:1.4;
    text-align:center;

    cursor:pointer;
    transition:
        border-color .2s,
        background-color .2s,
        color .2s,
        box-shadow .2s,
        transform .2s;

    white-space:normal;
    word-break:keep-all;
    overflow-wrap:break-word;
}


/* 버튼 안 상품명 */

.productTabName{
    display:block;
    width:100%;
}


/* 마우스 올렸을 때 */

.productTab:hover{
    border-color:#EC5A87;
    background:#FFF8FA;
    color:#EC5A87;
    transform:translateY(-2px);
}


/* 선택된 상품 */

.productTab.active{
    border-color:#EC5A87;
    background:#EC5A87;
    color:#fff;
    box-shadow:0 8px 20px rgba(236,90,135,.22);
}



/* =========================================================
   Calendar
========================================================= */

.calendarWrap{
    max-width:420px;
    margin:auto;
    padding:25px;
    border:1px solid #eee;
    border-radius:24px;
}


.calendarHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}


#calendarTitle{
    font-size:24px;
    font-weight:bold;
}


.monthBtn{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid #eee;
    background:#fff;
    font-size:25px;
}



.calendarWeek,
#calendarBody{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
    text-align:center;
}



.calendarWeek div{
    font-size:14px;
    font-weight:bold;
}


.sun{
    color:#EF5350;
}


.sat{
    color:#4285F4;
}



.calendarDay{
    width:42px;
    height:42px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    cursor:pointer;
    font-size:15px;
}


.calendarDay:hover{
    background:#fde7ef;
}


.calendarDay.selected{
    background:#EC5A87;
    color:#fff!important;
}


.calendarDay.today{
    border:2px solid #EC5A87;
}


.calendarDay.disabled{
    color:#ccc;
}



.calendarDay.empty{
    visibility:hidden;
}


/* =========================================================
   Time Select
========================================================= */

#timeArea{
    display:flex;
    flex-direction:column;
    gap:24px;
}


/* 오전 / 오후 그룹 */

.timeGroup{
    width:100%;
}


.timeGroup h4{
    margin:0 0 10px;
    font-size:15px;
    font-weight:700;
    color:#333;
}


/* 시간 버튼 목록 */

.timeList{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px;
}


.timeBtn{
    width:100%;
    min-width:0;
    height:56px;
    box-sizing:border-box;

    border:1px solid #ddd;
    border-radius:14px;
    background:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    font-size:16px;
    font-weight:600;

    transition:.2s;
}


.timeBtn:hover{
    border-color:#EC5A87;
    color:#EC5A87;
}


.timeBtn.active{
    background:#EC5A87;
    color:#fff;
    border-color:#EC5A87;
}


.timeBtn.disabled{
    background:#f7f7f7;
    color:#bbb;
    cursor:not-allowed;
}



/* =========================================================
   Form
========================================================= */


.reserveForm{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}



.formItem{

    display:flex;

    flex-direction:column;

}



.formItem.full{

    grid-column:1/-1;

}



.formItem label{

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#444;

}



.formItem input,
.formItem textarea{

    width:100%;

    box-sizing:border-box;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:16px;

    padding:0 18px;

}



.formItem input{

    height:58px;

}



.formItem textarea{

    height:150px;

    padding-top:15px;

    resize:none;

}



.formItem input:focus,
.formItem textarea:focus{

    outline:none;

    border-color:#EC5A87;

}




/* =========================================================
   Button
========================================================= */


.reserveButtonArea{

    text-align:center;

    margin-top:60px;

}



.btnReserve{

    width:320px;

    height:64px;

    border:none;

    border-radius:50px;

    background:#EC5A87;

    color:#fff;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}



.btnReserve:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(236,90,135,.3);

}





/* =========================================================
   Complete Page
========================================================= */


.reservationComplete{

    max-width:600px;

    margin:100px auto;

}



.completeHero{

    text-align:center;

    margin-bottom:40px;

}



.completeIcon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:#222;

    color:#fff;

    font-size:40px;

    line-height:70px;

}



.completeCard{

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.completeRow{

    display:flex;

    justify-content:space-between;

    padding:15px 0;

    border-bottom:1px solid #eee;

}



.completeRow span{

    color:#888;

}



.completeNotice{

    text-align:center;

    margin:30px 0;

    color:#666;

}



.completeButton{

    text-align:center;

}



.btnHome{

    display:inline-block;

    padding:15px 40px;

    border-radius:30px;

    background:#222;

    color:#fff;

}





/* =========================================================
   Mobile
========================================================= */


@media(max-width:768px){


    .reservationWrap{

        margin:40px auto 70px;

        padding:0 15px;

    }



    .reservationHero{

        margin-bottom:40px;
		padding-top:40px;

    }



    .reservationHero h2{

        font-size:34px;

    }



    .reservationHero p{

        font-size:15px;

    }



    .reserveCard{

        padding:25px 20px;

        border-radius:18px;

    }



    .sectionTitle{

        gap:12px;

        margin-bottom:25px;

    }



    .step{

        width:40px;

        height:40px;

        font-size:14px;

    }



    .sectionTitle h3{

        font-size:24px;

    }

	/* 상품 선택 */

	.productTabArea{
		gap:8px;
	}

	.productTabRow{
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:8px;
	}

	.productTab{
		min-height:64px;
		padding:9px 5px;
		border-radius:12px;

		font-size:12px;
		line-height:1.35;

		letter-spacing:-0.4px;
	}

	.productTab:hover{
		transform:none;
	}

    /* 달력 */


    .calendarWrap{

        width:100%;

        padding:15px;

        box-sizing:border-box;

    }



    #calendarBody,
    .calendarWeek{

        gap:4px;

    }



    .calendarDay{

        width:36px;

        height:36px;

        font-size:14px;

    }




    /* 시간 */


    /* 시간 */

	#timeArea{
		display:flex;
		flex-direction:column;
		gap:20px;
	}


	.timeGroup h4{
		margin-bottom:8px;
		font-size:14px;
	}


	.timeList{
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:8px;
	}


	.timeBtn{
		height:48px;
		border-radius:12px;
		font-size:14px;
	}




    /* 입력폼 */


    .reserveForm{

        grid-template-columns:1fr;

        gap:20px;

    }




    .formItem input{

        height:52px;

    }




    /* 예약버튼 */


    .btnReserve{

        width:100%;

        height:58px;

        font-size:18px;

    }



}