/* blod */
.bold_font12 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.bold_font13 {
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}
.bold_font14 {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
}
.bold_font15 {
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
}
.bold_font16 {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.bold_font18 {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}
.bold_font20 {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
.bold_font22 {
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
}
.bold_font24 {
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
}
.bold_font26 {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
}
.bold_font28 {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
}
.bold_font40 {
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
}
/* medium */
.medium_font12 {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.medium_font13 {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}
.medium_font14 {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}
.medium_font15 {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
}
.medium_font16 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

/*color*/
.col_white {
    color: #FFFFFF;
}
.col_nowgo {
    color: #FF5139;
}
.col_error {
    color: #D90000;
}
.col_info {
    color: #007AFF;
}
.col_able {
    color: #00B807;
}
.col_wait {
    color: #F0831E;
}

.col_black {
    color: #1C1C1E;
}

.col_grey1 {
    color: #3A3A3C;
}
.col_grey2 {
    color: #48484A;
}
.col_grey3 {
    color: #636366;
}
.col_grey4 {
    color: #8E8E93;
}
.col_grey5 {
    color: #AEAEB2;
}
.col_grey6 {
    color: #C7C7CC;
}
.col_grey7 {
    color:#D1D1D6;
}
.col_grey8 {
    color: #E5E5EA;
}
.col_grey9 {
    color: #F2F2F7;
}

/* background */
.bg_white {
    background-color: #FFFFFF;
}
.bg_nowgo {
    background-color: #FF5139;
}
.bg_error {
    background-color: #D90000;
}
.bg_info {
    background-color: #007AFF;
}
.bg_able {
    background-color: #00B807;
}
.bg_wait {
    background-color: #F0831E;
}

.bg_black {
    background-color: #1C1C1E;
}

.bg_grey1 {
    background-color: #3A3A3C;
}
.bg_grey2 {
    background-color: #48484A;
}
.bg_grey3 {
    background-color: #636366;
}
.bg_grey4 {
    background-color: #8E8E93;
}
.bg_grey5 {
    background-color: #AEAEB2;
}
.bg_grey6 {
    background-color: #C7C7CC;
}
.bg_grey7 {
    background-color:#D1D1D6;
}
.bg_grey8 {
    background-color: #E5E5EA;
}
.bg_grey9 {
    background-color: #F2F2F7;
}


/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px)  {
    /* container */
    .container {
        max-width: 1280px;
        width: 100%;
        margin: auto;
        padding: 0 16px;
    }

        
    /*상단 네비*/
    .reservation {
        border-bottom: 1px solid #D9D9D9;
    }
    .reservation .reservationWrap {
        max-width: 700px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: auto;
    }
    
    .reservation .reservationWrap .reservation_list {
        min-width: 160px;
        padding: 28px 32px;
        border: 2px solid transparent;
        cursor: pointer;
        text-align: center;
    }
    .reservation .reservationWrap .reservation_list.active {
        border-bottom:2px solid #FF5139;
        color: #FF5139;
    }
    
    
    .top_reservation {
        background-color: #FFFFFF;
        box-shadow: 0px 1px 2px 0px rgba(59, 64, 75, 0.08) inset;
        padding: 27px 16px;
        border-bottom: 8px solid #F2F2F7;
    }
    .top_reservation .top_reservation_wrap {
        max-width: 1024px;
        margin: auto;
        display: flex;
        align-items: center;
        position: relative;
    
    }
    
    .top_reservation .top_reservation_wrap > .back_icon {
        width: 24px;
        position: absolute;
        left: 0;
    }
    .top_reservation .top_reservation_wrap h3 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }


}



/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) { 
    /* container */
    .container {
        max-width: 760px;
        width: 100%;
        margin: auto;
        padding: 0 16px;
    }
    
    /*상단 네비*/
    .reservation {
        border-bottom: 1px solid #D9D9D9;
    }
    .reservation .reservationWrap {
        max-width: 480px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
    }
    
    .reservation .reservationWrap .reservation_list {
        display: flex;
width: 125px;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;


        border-bottom: 1px solid var(--system-color-grey-8, #E5E5EA);



color: var(--system-color-grey-4, #8E8E93);
/* pretendard_medium/15 fontsize */
font-family: Pretendard;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 160% */
    }
    .reservation .reservationWrap .reservation_list.active {
        border-bottom:2px solid #FF5139;
        color: #FF5139;
    }
    
    
    .top_reservation {
        background-color: #FFFFFF;
        box-shadow: 0px 1px 2px 0px rgba(59, 64, 75, 0.08) inset;
        padding: 16px 16px;
    }
    .top_reservation .top_reservation_wrap {
        max-width: 1024px;
        margin: auto;
        display: flex;
        align-items: center;
        position: relative;
    
    }
    
    .top_reservation .top_reservation_wrap > .back_icon {
        width: 24px;
        position: absolute;
        left: 0;
    }
    .top_reservation .top_reservation_wrap h3 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
}