.txt_red {
    color: #ED5858;
}

.txt_green {
    color: var(--primary-color);
}

/* 버튼영역 */
.mara_btn_area {
    margin: 10px 0 0 0;
    padding: 10px 0 9px;
    border: 0px solid #e6e6e6;
    text-align: center;
}

label {
    cursor: pointer;
}

input[type=checkbox] {
    cursor: pointer;
}

.fa-clock-o {
    font-size: 15px;
    vertical-align: middle;
}

.empty_table {
    padding: 85px 0 !important;
}

.frm_essential {
    padding-right: 10px;
    background: url(./img/bg_formEssential.gif) no-repeat 100% 4px;
}

/* list */
#mara_list {
    margin: 0;
    padding: 0;
}

#mara_list table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#mara_list table caption {
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.mara_rl th {
    padding: 5px 0 3px 0;
    border: 1px solid #e6e6e6;
    text-align: center;
    line-height: 1.6em;
    background: #f5f5f5;
}

.mara_rl td {
    padding: 5px 7px 3px 7px;
    border: 1px solid #e6e6e6;
    text-align: center;
    vertical-align: middle;
    line-height: 1.6em;
}

.mara_rl a {
    color: #466c8a;
}

/* write */
#mara_write {
    margin: 0;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}
#mara_write .required:not(#captcha #captcha_key){
    all: unset !important;
    color: var(--primary-color) !important;
}

#mara_write .booking_date_section,
#mara_write .booking_time_section{
    display: flex;
    gap: var(--gap-9);
}

#mara_write .booking_date_section{
    margin-bottom: var(--gap-8);
}

#mara_write .booking_time_section{
    margin-bottom: var(--gap-10);
}

#mara_write .booking_date_section h2,
#mara_write .booking_time_section h2{
    min-width: 103px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
}

#mara_write .booking_date_section .date_content h3{
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--gap-2);
}

#mara_write .booking_date_section .date_content p{
    font-size: var(--font-size-2xs);
    color: #666666;
}


.time-slot-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-4);
    margin-bottom: var(--gap-2);
}

.time-slot-wrap {
    position: relative;
}

/* 실제 라디오 버튼 숨기기 */
.time-slot-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 버튼 스타일링 */
.time-slot-btn {
    display: inline-block;
    padding: var(--gap-2) var(--gap-4);
    background: rgba(102, 102, 102, 0.5);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.2s;
    color: #fff;
    font-weight: 700;
}

/* 호버 효과 */
.time-slot-btn:hover:not(.time-slot-full) {
    background: rgba(102, 102, 102, 0.7);
}

/* 선택된 상태 */
.time-slot-radio:checked + .time-slot-btn {
    background: var(--primary-color);
}

/* 예약 마감된 시간 */
.time-slot-full {
    background: #ED5858;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.8;
}

/* 예약 인원 수 표시 */
.booking-count {
    font-size: var(--font-size-2xs);
    margin-left: var(--gap-1);
}

#mara_write .booking_time_section .time_content p{
    font-size: var(--font-size-2xs);
    color: #666666;
}

#mara_write .customer_info_section{
    display: flex;
    flex-flow: column;
    gap: var(--gap-8);
    background: #FFF;
    box-shadow: 0px 8px 8px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: var(--gap-19) var(--gap-16);
    box-sizing: border-box;
    margin-bottom: 90px;
}

#mara_write .customer_info_section>div{
    display: flex;
    gap: var(--gap-10);
    align-items: center;
}

#mara_write .customer_info_section>div h2{
    min-width: 183px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-color);
    height: 42px;
    display: flex;
    align-items: center;
}

#mara_write .customer_info_section>div .input_wrap{
    flex: 1;
    max-width: 270px;
}

#mara_write .customer_info_section>div .input_wrap input[type="text"],
#mara_write .customer_info_section>div .input_wrap input[type="password"]{
    width: 100%;
    padding: var(--gap-2) var(--gap-4);
    border: 1px solid #666666;
    border-radius: 5px;
    font-size: var(--font-size-base);
    color: var(--text-color);
}
#mara_write .customer_info_section>div .input_wrap select,
#mara_write .customer_info_section>div .select-wrapper select{
    width: 100%;
    padding: 0 var(--gap-4);
    border: 1px solid #666666;
    border-radius: 5px;
    font-size: var(--font-size-base);
    color: var(--text-color);
}
#mara_write .customer_info_section .memo_wrap .input_wrap{
    max-width: unset;
}
#mara_write .customer_info_section textarea{
    width: 100%;
    padding: var(--gap-2) var(--gap-4);
    border: 1px solid #666666;
    border-radius: 5px;
    font-size: var(--font-size-base);
    color: var(--text-color);
}

#mara_write .customer_info_section .address_wrap,
#mara_write .customer_info_section .memo_wrap{
    align-items: flex-start;
}
#mara_write .customer_info_section .address_wrap .input_wrap{
    max-width: unset;
}

#mara_write .customer_info_section .address_wrap .input_wrap>div{
    display: flex;
    gap: var(--gap-2);
}

#mara_write .customer_info_section .address_wrap .input_wrap>div input[type="text"]{
    max-width: 270px;
}

#mara_write .agreement_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2);
    margin-bottom: var(--gap-3);
}

#mara_write .agreement_wrap label{
    font-size: var(--font-size-lg);
    color: var(--text-color);
    font-weight: 700;
}

#mara_write .agreement_wrap label .btn_view_terms{
    font-size: var(--font-size-base);
    color: var(--text-color);
    font-weight: 400;
}

#mara_write .captcha_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-7);
}

#mara_write .captcha_wrap h2{
    font-size: var(--font-size-lg);
    color: var(--text-color);
    font-weight: 700;
}

#button_zone {
    width: 100%;
    text-align: center;
    margin-top: var(--gap-19);
    display: flex;
    gap: var(--gap-5);
    justify-content: center;
}

#button_zone button {
    padding: var(--gap-3) var(--gap-5);
    font-size: var(--font-size-sm);
    color: #ffffff;
    border: none;
}

#button_zone .btn_submit {
    background: var(--primary-color);
}

#button_zone .btn_cancel {
    background: #D9D9D9;
    color: #fff !important;
}

#button_zone .btn_edit {
    background: var(--primary-color);
}

#button_zone .btn_delete {
    background: #D9D9D9;
    color: #fff !important;
}

#button_zone .btn_list {
    background: var(--primary-color);
}

#button_zone .btn_cal {
    background: var(--primary-color);
}

@media (max-width: 768px) {
    #mara_view {
        padding-bottom: var(--gap-19) !important;
    }
    #mara_write .booking_date_section {
        margin-bottom: var(--gap-5);
    }

    #mara_write .booking_time_section {
        margin-bottom: var(--gap-5);
    }

    #mara_write .booking_date_section h2, 
    #mara_write .booking_time_section h2 {
        min-width: 17vw;
        font-size: var(--font-size-base);
    }

    #mara_write .booking_date_section .date_content h3 {
        font-size: var(--font-size-base);
    }

    #mara_write .booking_date_section .date_content p {
        font-size: var(--font-size-2xs);
    }

    .time-slot-container {
        gap: var(--gap-3);
        margin-bottom: var(--gap-2);
    }
    
    .time-slot-btn {
        font-size: var(--font-size-xs);
    }

    #mara_write .booking_time_section .time_content p {
        font-size: var(--font-size-2xs);
    }

    #mara_write .customer_info_section {
        gap: var(--gap-6);
        background: #FFF;
        box-shadow: 0px 4px 4px 5px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: var(--gap-8) var(--gap-5);
        margin-bottom: var(--gap-10);
    }

    #mara_write .customer_info_section>div {
        gap: var(--gap-4);
    }

    #mara_write .customer_info_section>div h2 {
        min-width: 30.5vw;
        font-size: var(--font-size-base);
        height: 7.6vw;
    }

    #mara_write .customer_info_section>div .input_wrap input[type="text"], #mara_write .customer_info_section>div .input_wrap input[type="password"] {
        font-size: var(--font-size-xs);
    }
    #mara_write .customer_info_section>div .input_wrap select,
    #mara_write .customer_info_section>div .select-wrapper select{
        font-size: var(--font-size-xs);

    }
    button.btn_frmline {
        height: unset;
    }

    #mara_write .agreement_wrap label {
        font-size: var(--font-size-sm);
    }

    #mara_write .agreement_wrap label .btn_view_terms {
        font-size: var(--font-size-xs);
    }

    #mara_write .captcha_wrap {
        gap: var(--gap-4);
    }

    #mara_write .captcha_wrap h2 {
        font-size: var(--font-size-sm);
    }

    #button_zone {
        margin-top: var(--gap-10);
        gap: var(--gap-4);
    }

    #mara_write .agreement_wrap {
        margin-bottom: var(--gap-8);
    }
}


/* view */
#mara_view {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
	padding-top: var(--header-height);
	padding-bottom: 112px;
}

#mara_view caption {
    text-align: left;
    padding: 0px 0px 10px 0px;
    font-size: 13px;
}

#mara_view .explain {
    margin: 0;
    height: auto;
    padding: 10px 10px 10px 30px;
    border: 1px solid #ebebeb;
    background: #fafafa;
    line-height: 1.6em;
}

#mara_view .explain li {
    margin: 0;
    padding: 0;
}

#mara_view .explain span {
    color: #ff0000;
}

#mara_view table {
    width: 100%;
    margin: 10px 0px 20px 0px;
    border-spacing: 0;
    border-collapse: collapse;
}

#mara_view th {
    height: 40px;
    font-size: 12px;
    text-align: right;
    background: #eeeeee;
    border: 1px solid #cccccc;
    padding: 8px 10px 8px 0px;
}

#mara_view td {
    font-size: 12px;
    text-align: left;
    border: 1px solid #cccccc;
    padding: 8px 10px 8px 10px;
}

#mara_view select {
    padding: 4px 5px 4px 3px;
    font-size: 12px;
}

#mara_view #jobs_list {
    padding: 10px 0px 0px 50px;
}

#mara_view ul {
    padding: 0px;
    margin: 0px;
}

#mara_view ul li {
    padding: 4px 0px;
    margin: 0px;
    list-style: none
}

#mara_view .jobs {
    float: left;
    width: 280px;
    padding: 5px;
}

#mara_view .jobs h1 {
    font-size: 14px;
    color: blue;
    margin: 7px 0px;
}

#mara_view .office_name {
    font-size: 14px;
    color: blue;
}

#mara_view .job_list {
    text-align: center !important;
    padding: 0px !important;
}




#except li {
    display: inline-block;
    padding: 0px 30px 0px 0px !important;
}

/* calendar */
#mara_cal {
    background: #ffffff;
}



/* 안내글 */
#mara_cal .explain {
    margin-bottom: 10px;
    padding: 10px;
    min-height: 40px;
    border: 1px solid #ebebeb;
    background: #fafafa;
    line-height: 1.6em;
    text-align: left;
}

#mara_cal .explain li {
    padding: 0px;
    margin: 0;
    list-style: none;
}


/* 달력 디자인 */
#mara_cal table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#mara_cal table caption {
    font-size: 0;
    line-height: 0;
}

#mara_cal th {
    padding: var(--gap-3) 0px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    text-align: center;
    background: #F5F5F5;
    font-weight: 400;
    font-size: var(--font-size-base);
}

#mara_cal th.red {
    color: #ED5858;
}

#mara_cal th.blue {
    color: #0C9A61;
}

#mara_cal td {
    padding: 0px 0px var(--gap-2) 0px;
    height: auto;
    height: 110px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    line-height: 1.5em;
    vertical-align: top;
}

#mara_cal td.gray {
    color: #D9D9D9;
}

#mara_cal td.null {
    background: #ffffff;
}

#mara_cal td p {
    margin: 0;
    padding: 0px 0px 0px 4px;
    line-height: 1.6em;
}

#mara_cal td .day_title li{
    font-size: var(--font-size-xs);
    margin-left: 4px;
    margin-top: 5px;
}

#mara_cal td .title_day {
    padding: 0 0 5px;
}

#mara_cal td .day {
    padding: 0 0 5px 0;
}

#mara_cal td span.open {
    color: #333;
}

#mara_cal td span.close {
    color: #999;
}


#mara_cal ul {
    margin: 0;
}

#mara_cal .day_title{
    display: flex;
    justify-content: space-between;
}

#mara_cal ul li {
    padding: 0;
    margin: 0;
    list-style: none;
}

#mara_cal .m_list {
    padding: 5px 0px 0px 5px;
    height: auto;
    display: flex;
    flex-flow: column;
    gap: var(--gap-1);
}

#mara_cal .member_list {
    list-style: none;
    padding: 0px;
}

#mara_cal .member_list a {
    color: var(--text-color);
    font-size: var(--font-size-2xs);
}

#mara_cal .li_day {
    float: left;
}

/* 예약가능 버튼 */
#mara_cal .li_btn {
    padding: 5px 14px;
    margin-left: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box;
    background: var(--primary-color);
    border-radius: 0 0 0 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

#mara_cal .li_btn a {
    color: #fff;
}

#mara_cal .li_closed {
    /* float: right;
    color: #ffffff;
    background: #dd6666;
    padding: 1px 3px;
    border-radius: 6px; */

    padding: 5px 14px;
    margin-left: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box;
    background: #ED5858;
    border-radius: 0 0 0 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #fff;
}

/* 정기휴무 */
#mara_cal .li_closed2 {
    float: right;
    color: #ffffff;
    background: #888;
    padding: 1px 3px;
    border-radius: 6px;
}

/* 정기휴무 */
#mara_cal .li_closed a {
    color: #ffffff;
}

#mara_cal .sunday {
    color: #ED5858;
}

/* 일요일 날자 색상 */
#mara_cal .sat {
    color: #0C9A61;
}

/* 토요일 날자 색상 */
#mara_cal .sunday_td {
    background: rgba(237, 88, 88, 0.2);
}

/* 일요일 배경색 색상 */
#mara_cal .sat_td {
    background: rgba(12, 154, 97, 0.1);
}

/* 토요일 배경색 색상 */

#mara_cal .gray {
    color: #D9D9D9;
    float: left;
}

/* 최소예약일 이전 날자 색상 */
#mara_cal .today_td {
    background: #E2EFFF !important;
}

/*오늘 배경색 색상 */
#mara_cal .booking_list {
    padding: 4px 10px;
}

/* 버튼 */

/* 달력 상단 ( 이전달, 오늘날짜로, 다음달 ) 버튼 */
#mara_cal .title {
    display: flex;
    text-align: center;
    justify-content: center;
    gap: var(--gap-19);
    margin-bottom: var(--gap-8);
}

#mara_cal .prev_text,
#mara_cal .next_text {
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: var(--text-color);
    padding: var(--gap-2) var(--gap-3);
    vertical-align: middle;
    font-weight: normal;
    border-bottom: 1px solid var(--text-color);
}

#mara_cal .center_today {
    cursor: pointer;
    vertical-align: middle;
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-color);
}

#mara_cal .prev_text:hover,
#mara_cal .next_text:hover,
#mara_cal .center_today:hover {
    color: var(--primary-color);
    transition: all 0.5s;
}

#mara_cal .top_msg {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    margin-bottom: var(--gap-4);
}

/* interval switch 예약현황 자동 갱신 스위치 */
div.interval_switch {
    text-align: right;
    float: right;
    margin-bottom: var(--gap-4);
}

span#set_interval {
    display: inline-block;
    width: 35px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

span.interval_on {
    transition: all 1s;
    background: #dd6666;
    color: #ffffff;
}

span.interval_on:before {
    content: "ON";
}

span.interval_off {
    transition: all 1s;
    background: #888888;
    color: #ffffff;
}

span.interval_off:before {
    content: "OFF";
}

/* 회사정보변경 바로가기 버튼 */
span.office_edit {
    display: inline-block;
    background: #888888;
    color: #fff;
    width: 100px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

span.office_edit:hover {
    transition: all 0.7s;
    background: #dd6666;
    color: #ffffff;
}

span#cal_wide {
    display: inline-block;
    background: #888888;
    color: #fff;
    width: 40px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

span#cal_wide:hover {
    transition: all 0.7s;
    background: #dd6666;
    color: #ffffff;
}

#mara_cal {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    padding-top: var(--header-height);
    padding-bottom: 155px;
}

.section1 {
    width: 100%;
    background: #fff;

}

.section1 h1 {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: var(--gap-14);
}


@media (max-width: 768px) {
    #mara_cal {
        padding-bottom: var(--gap-19);
    }
    .section1 h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--gap-10);
    }
    #mara_cal .title {
        gap: var(--gap-8);
        margin-bottom: var(--gap-6);
    }
    #mara_cal .prev_text, #mara_cal .next_text {
        font-size: var(--font-size-sm);
        padding: var(--gap-2) var(--gap-3);
    }
    #mara_cal .center_today {
        font-size: var(--font-size-lg);
        display: flex;
        align-items: center;
    }
    #mara_cal .top_msg {
        font-size: var(--font-size-2xs);
        margin-bottom: var(--gap-3);
    }
    #mara_cal th {
        padding: var(--gap-2) 0px;
        font-size: var(--font-size-xs);
    }
    #mara_cal .day_title {
        flex-flow: column-reverse;
    }
    #mara_cal td .day_title li {
        font-size: var(--font-size-2xs);
        margin-left: 3px;
        margin-top: 4px;
        line-height: 1.2;
    }
    #mara_cal .li_closed {
        padding: 4px 0px;
        margin-left: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 0 5px 5px;
        font-size: var(--font-size-2xs);
        text-align: center;
        font-weight: 500;
    }
    #mara_cal .li_btn {
        padding: 4px 0px;
        margin-left: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 0 5px 5px;
        font-size: var(--font-size-2xs);
        text-align: center;
        font-weight: 500;
    }
    .fa-clock-o {
        font-size: var(--font-size-2xs);
        vertical-align: middle;
    }
    #mara_cal .m_list {
        padding: 4px 0px 0px 4px;
    }
    #mara_cal .member_list {
        line-height: normal;
    }
    #mara_cal .member_list a {
        font-size: 10px;
    }
    #mara_cal .member_list a i{
        /* display: none; */
        font-size: var(--font-size-2xs);
    }
    #mara_cal .today_td {
        height: unset;
    }
    #mara_cal td {
        height: 17vw;
    }
}


/* 옵션 선택 관련 스타일 */
.option_box {
    align-items: flex-start !important;
}

.select-wrapper {
    flex: 1;
    max-width: 270px;
}

#selectedOptionsContainer {
    display: none;
    flex-direction: column;
    gap: var(--gap-3);
    margin-top: 15px;
}

#selectedOptionsContainer.active {
    display: flex;
}

.selected-option-box {
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    padding: var(--gap-3);
}

.option-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--gap-2);
}

.option-name-price{
    display: flex;
    gap: var(--gap-2);
}

.option-name {
    font-weight: bold;
    color: var(--text-color);
    font-size: var(--font-size-xs);
}

.option-price {
    color: #ED5858;
    font-weight: bold;
    font-size: var(--font-size-xs);
    word-break: auto-phrase;
}

.option-delete {
    background: none;
    border: none;
    color: #ED5858;
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: 0 5px;
    margin-top: calc(var(--gap-1) * -1);
    display: flex;
}

.option-description {
    font-size: var(--font-size-2xs);
    color: #666666;
}

.total_price_wrap {
    margin-bottom: var(--gap-7);
    padding: var(--gap-5);
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
}

.price_summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price_summary .label {
    font-size: var(--font-size-base);
    color: #666666;
}

.price_summary .amount {
    font-size: var(--font-size-base);
    color: #ED5858;
    font-weight: bold;
}