/************************************************************** 
* 진료예약
**************************************************************/
:root {
    --reservation-section-container-gap: clamp(20px, 4vw, 60px);
}

.sub-container.advice0201 {position: relative;}

#reservationForm > fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#reservationForm :where(input, select, textarea):focus {outline: none;}

.reservation-section-container {
    display: flex;
    justify-content: space-between;
    gap: var(--reservation-section-container-gap);
    margin-top: var(--content-vertical-gap-sm);
}

:root {
    --reservation-section-width: 700px;
    --reservation-calendar-box-height: 610px;
}
.reservation-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 35px;
    width: var(--reservation-section-width);
}


/* 타이틀 공통 */
.reservation-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reservation-calendar-box > .reservation-title {
    padding: 20px;
    background-color: var(--color-main-03);

    &:first-child span {background: var(--color-main-07);}
}
.reservation-title > span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #f1f1f1;
    font-size: clamp(12px, 2.1875vw, 14px);
    font-weight: 650;
    letter-spacing: -0.025rem;
}
.reservation-title > p {
    font-size: 18px;
    font-weight: 700;
}
.reservation-calendar-box > .reservation-title > span {
    background-color: var(--color-main-04); 
    font-weight: 500;
}
.reservation-calendar-box > .reservation-title > p {font-weight: 500;}
.reservation-calendar-box > .reservation-title > :where(span, p) {color: #fff;}


/* 내원일 선택 달력 */
.reservation-calendar-box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: var(--reservation-calendar-box-height);
    border: 1px solid var(--color-line-01);;
    border-radius: 7px;
}
.reservation-calendar {
    width: 100%;
    height: 100%;
}


/* 예약 참고사항 */
.reservation-note {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    border-radius: 7px;
    background-color: var(--color-main-04);
}
.reservation-note-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* width: max-content; */
}
.note {
    position: relative;
    padding-left: 10px;
    line-height: 1.2;
}
.note:first-child, 
.note:last-child {
    font-weight: 600;
    color: var(--color-main-03);
}
.note::before {
    position: absolute;
    top: 7px;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #2a2a2a;
    content: '';
}


/* 예약 상담 - 365일 콜센터 */
:root {
    --reservation-realtime-consult-gap: clamp(10px, 2vw, 30px);
    --rt-item-btn-grid-01-width: clamp(180px, 13.333vw, 200px);
}

.reservation-realtime-consult {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--reservation-realtime-consult-gap);
    height: fit-content;
    padding: 45px 30px;
    border: 1px solid var(--color-line-01);;
    border-radius: 7px;
    background-color: #fff;
    font-weight: 600;
    margin-bottom: var(--mobile-content-vertical-gap-sm);

    & h3 {
        font-size: var(--font-news-list-num-size);
        color: var(--color-main-03);
    }

    & .rt-item-box {
        display: grid;
        grid-template-columns: var(--rt-item-btn-grid-01-width) auto;
        gap: var(--reservation-realtime-consult-gap);

        & .rt-item {
            display: flex;
            flex-direction: column;
            gap: calc(var(--reservation-realtime-consult-gap) * 0.5);

            & h4 {font-size: var(--font-size-18);}

            & a.rt-item-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                width: 100%;
                height: 100%;
                padding: 
                    calc(var(--reservation-realtime-consult-gap) * 0.5)
                    calc(var(--reservation-realtime-consult-gap) * 0.5)
                ;
                border-radius: var(--sub-border-radius-default);
                background-color: var(--color-main-03);
                font-size: var(--font-size-20);
                font-weight: var(--font-weight-bold);
                color: var(--color-main-white);

                @media screen and (max-width: 640px) {
                    & {
                        padding: 
                            calc(var(--reservation-realtime-consult-gap) * 1)
                            calc(var(--reservation-realtime-consult-gap) * 1)
                        ;
                    }
                }

                & .rt-item-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: clamp(22px, 5.3125vw, 34px);
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    background-image: url('/img/common/icon-simple-01-default.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 50%;
                    background-color: var(--color-main-white);
                }
            }

            & .rt-item-btn-group {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;

                & a.rt-item-btn {
                    background-color: var(--color-main-04);
                    font-size: var(--font-size-16);
                    color: var(--color-text-02);

                    &:nth-child(1) .rt-item-icon {
                        background-image: url('/img/common/icon-kakao-consult-white.webp');
                        background-color: var(--color-sns-kakao);
                    }
                    &:nth-child(2) .rt-item-icon {
                        background-image: url('/img/common/icon-naver-reservation-white.webp');
                        background-color: var(--color-sns-naver);
                    }
                }
            }
        }
    }
}
.reservation-realtime-consult.move {
    z-index: 2900;
    position: fixed;
    top: calc(calc(var(--header-height) + var(--lnb-height)) + 30px);
    width: 630px;
}
@media screen and (max-width: 1280px) {
    .reservation-realtime-consult.move {
        top: calc(calc(var(--header-height) + var(--lnb-height)) + 20px);
        width: calc(50vw - 20px);
    }
}
@media screen and (max-width: 1200px) {
    .reservation-realtime-consult {
        align-items: center;
        gap: 20px;
        
        & .rt-item-box {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;

            & .rt-item {
                align-items: center;
                gap: 10px;

                & .rt-item-btn-group {width: 100%;}
            }
        }
    }
}

.rt-consult-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: max-content;
}
.rt-consult-inner strong {font-size: 34px;}
.rt-consult-inner strong span {color: var(--color-main-03);}
.talk-consult {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.talk-consult > p {font-size: 24px;}
.talk-consult-btn-box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.talk-consult-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 184px;
    height: 60px;
    border: 1px solid var(--color-line-01);;
    border-radius: 30px;
    background-color: #f8f8f8;
    font-size: 18px;
}
.talk-consult-btn:nth-child(1)::before {content: url('/inc/img/advice02/icon_talk_01.webp');}
.talk-consult-btn:nth-child(2)::before {content: url('/inc/img/advice02/icon_talk_02.webp');}


/* input 디자인 공통 */
.resv-input-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    border: 1px solid var(--color-line-01);;
    border-radius: 7px;
    font-weight: 500;
    color: #777;
    word-break: keep-all;
    line-height: 1.2;
    cursor: pointer;
}
:where(input[type='text'].resv-input-item, input[type='tel'].resv-input-item):focus {border: 2px solid var(--color-main-03);}
input:disabled {
    background-color: #fff;
    cursor: not-allowed;
}
.input-resident-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;

    & > div:not(:nth-child(2)) {
        flex-grow: 1;
    }
}


:root {
    --reservation-section-right-margin-top: 20px;
}
/* 내원 여부 선택 */
.visit-select {
    display: flex;
    gap: 20px;
    margin-top: var(--reservation-section-right-margin-top);
}
.visit-option.selected,
.treat-category-option.selected {
    background-color: var(--color-main-03);
    color: #fff;
}
.treat-category-option > .resv-doctor-select-box {display: none;}

/* 예약자 정보 입력 */
.info-input {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: var(--reservation-section-right-margin-top);
}
.input-tel-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.input-tel-inner > .resv-input-item {flex: 1;}


/* 진료과목 선택 */
.treat-category-select {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: var(--reservation-section-right-margin-top);
}
.treat-category-select > .resv-input-item {
    height: 61px;
    padding: 10px 20px;
    text-align: center;
}
:where(input[type='text'], input[type='tel']).resv-input-item:focus {
    border: 0;
    outline: 2px solid var(--color-main-03);
}


/* 의료진 선택 */
.resv-doctor-box {margin-top: var(--reservation-section-right-margin-top);}
.resv-doctor-box > .resv-input-item {justify-content: flex-start;}
.doctor-empty {background-color: var(--color-02);}


/* 예약시간 선택 */
.resv-time-select {
    margin-top: var(--reservation-section-right-margin-top);
    background: url('/img/common/icon-dropdown-gray-big.webp') no-repeat 96.5%/2.5%;
    appearance: none;
}
.resv-time-select.on {background-image: url('/inc/img/advice02/icon_arrow_up_b.webp');}
.resv-time-select:focus {outline: 2px solid var(--color-main-03);}


/* 상담내용 */
.resevation-consultation-contents > textarea {
    margin-top: var(--reservation-section-right-margin-top);
    width: 100%;
    height: 110px;
    max-height: 300px;
    padding: 20px;
    border: 1px solid var(--color-line-01);;
    border-radius: 7px;
    font-size: 16px;
    resize: vertical;
}
.resevation-consultation-contents > textarea:focus {outline: 2px solid var(--color-main-03);}


/* 개인정보처리방침 */
.reservation-policy {
    margin-bottom: var(--content-vertical-gap-big);

    @media screen and (max-width: 640px) {
        & {margin-bottom: var(--mobile-content-vertical-gap-sm);}
    }
}
.reservation-policy-inner {
    width: 100%;
    padding: 25px 10px 0;
    border-top: 2.5px solid #2a2a2a;
}
.reservation-policy-inner > p {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(16px, 2.81vw, 18px);
    cursor: pointer;
}
.reservation-policy-inner > p > em {color: var(--color-main-03);}
.reservation-policy-inner > p > span {font-weight: 700;}


/* 개인정보처리방침 - 약관내용 */
.policy-box {
    overflow: auto;
    width: 100%;
    height: 125px;
    margin-top: var(--reservation-section-right-margin-top);
    padding: 15px;
    border: 1px solid var(--color-line-01);;
    border-radius: 7px;
    line-height: 1.3;;

    & table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important; /* 내용에 맞게 칸 크기 자동 조절 */

        & th, & td {
          padding: 8px !important;
          text-align: left !important;
          word-break: break-word !important; /* 긴 글자가 셀 안에서 줄바꿈 되도록 */
        }
    }
}
.policy-box > div {
    margin: 15px auto !important;
    font-size: 12px !important;
    text-align: justify !important;
    word-break: keep-all !important;
    line-height: 1.3 !important;
}
.policy-box > div table {width: 100% !important;}
.policy-box > div :where(th, td) {padding: 2px 0 !important; line-height: 1.3 !important;}


/* 개인정보처리방침 - 체크박스 이하 */
.policy-check {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}
.policy-check-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    transform: translateX(-6px);
}
.policy-checkbox-label {
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-line-01);;
    border-radius: 4px;
    cursor: pointer;
}
#policy-checkbox:checked + .policy-checkbox-label {
    background: url('/img/common/icon-checkbox.webp') no-repeat center/55%;
}
.policy-check-inner p {
    font-size: 18px;
    font-weight: 700;
} 

.reservation-submit-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 2.5px solid #2a2a2a;
}
.resv-policy-btn {
    all: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 18px 20px;
    border-radius: 7px;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.resv-policy-btn.submit {background-color: var(--color-main-03);}
.resv-policy-btn.cancel {background-color: var(--color-main-04);}


/* 초진 선택 시 내원동기 선택 활성화 */
.visit-route-select-box {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-column-gap: 8px;
    grid-row-gap: 20px;
    width: 100%;
    margin-top: var(--reservation-section-right-margin-top);
    padding: 25px;
    border: 1px solid var(--color-line-01);;
    border-radius: 7px;
}
.visit-route-select-box > p {
    grid-column: 1/5;
    font-size: 18px;
    font-weight: 600;
}
.visit-route-select-box > div {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-weight: 500;
    color: #777;
}
.visit-route-select-box > div > .route-label::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-line-01);;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    box-sizing: border-box;
    content: '';
}
.visit-route-select-box > div > input[type='radio']:checked + .route-label::before {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-main-02);
    transform: translateY(-50%);
    content: '';
}
.route-label > p {cursor: pointer;}


/* 진료과목 선택 시 의료진 선택 활성화 */
:root {
    --all-doc-btn-padding-base: clamp(4px, 1.25vw, 8px);
}
.all-doc-btn {
    margin-left: 6px;
    padding: var(--all-doc-btn-padding-base) calc(var(--all-doc-btn-padding-base) * 2);
    border-radius: 4px;
    background-color: #5e6871;
    color: #fff;
}
.resv-doctor-select-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.resv-doctor-option {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 32px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-line-01);;
    border-radius: 7px;
    cursor: pointer;
}

.resv-doctor-option.selected {border: 2px solid var(--color-main-03);}
.resv-doctor-option.selected .doc-opt-name {
    background-color: var(--color-main-03);
    color: #fff
}
.doc-opt-img-box {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;

    &:not(.no-doctor) {
        padding-top: 15px;
    }
}
.doc-opt-img-box > img {
    width: 70%;
    height: 100%;
    object-fit: cover;
}
.doc-opt-name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 25%; */
    background-color: var(--color-main-04);
    font-size: 16px;
    font-weight: 500;
    color: #777;
    word-break: keep-all;
    text-align: center;
}

@media screen and (max-width: 1500px) {
    :root {
        --reservation-section-width: 45vw;
    }

    /* 예약 참고사항 */
    .reservation-note {padding: clamp(20px, 2.3vw, 30px);}
    .reservation-note-list {font-size: clamp(14px, 1.25vw, 16px);}

    /* 365일 콜센터 */
    .reservation-realtime-consult {padding: clamp(30px, 3.9vw, 50px) 20px;}
    .rt-consult-inner {gap: 10px;}
    .rt-consult-inner strong {font-size: clamp(24px, 2.65vw, 34px);}
    .talk-consult > p {font-size: clamp(20px, 1.82vw, 24px);}
    .talk-consult-btn-box {gap: 10px;}
    .talk-consult-btn {
        gap: 0px;
        width: 100%;
        height: 40px;
        padding-right: 7px;
        border-radius: 25px;
        font-size: clamp(16px, 1.4vw, 18px);
    }
    .talk-consult-btn::before {transform: scale(0.7);}

    /* 진료예약 오른쪽 란 */
    .resv-input-item {
        padding: clamp(15px, 1.55vw, 20px);
        font-size: clamp(14px, 1.4vw, 18px);
    }
    .visit-select {gap: 10px;}
    .visit-route-select-box {padding: clamp(15px, 1.95vw, 25px);}
    .visit-route-select-box > p {font-size: clamp(16px, 1.4vw, 18px);}
    .route-label p {font-size: clamp(14px, 1.4vw, 18px);}
    .treat-category-select {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .treat-category-select > .resv-input-item {
        height: clamp(50px, 4.76vw, 61px);
        padding: 0 clamp(5px, 1.55vw, 20px);
    }

    /* 의료진 선택 */
    .resv-doctor-select-box {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .reservation-submit-box {gap: 10px;}
}

@media screen and (max-width: 920px) {
    :root {
        --reservation-section-right-margin-top: 10px;
        --reservation-calendar-box-height: clamp(420px, 78.125vw, 500px);
    }
    .br-mx800 {display: none;}
    .sub-container.advice0201 {padding-bottom: 370px;}
    /* .reservation-note, .reservation-realtime-consult {
        position: absolute;
        width: calc(100vw - 30px);
    }
    .reservation-note {bottom: 220px;}
    .reservation-realtime-consult {bottom: 30px;} */

    .reservation-section-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: var(--mobile-content-vertical-gap-sm);

        /* 섹션 너비 vw로 설정함 (250920) */
        & section {width: calc(100vw - calc(var(--content-inner-padding) * 2));}
    }

    /* calendar */
    #wrap .calendar-wrap {
        padding: 10px 5px;

        & .calendar-header {padding-bottom: 10px;}
    
        & .dateTitle {
            padding-top: 3px;
            padding-left: 10px;
            font-size: 20px;
        }
        & .grid div {font-size: 16px;}

        & .btn-box {gap: 20px;}
    }

    /* 오른쪽 란 */
    .info-input {gap: 10px;}
    .input-tel-inner {gap: 2.5px;}
    .resv-input-item {font-size: clamp(14px, 2vw, 16px);}
    :where(input[type='text'], input[type='tel']).resv-input-item {font-size: 16px;}
    .route-label p {font-size: clamp(14px, 2.25vw, 18px);}
    .treat-category-select > .resv-input-item {font-size: clamp(14px, 2.25vw, 18px);}

    /* 개인정보처리방침 */
    .policy-check-inner {transform: translateX(-6px);}
    .policy-check {padding: 15px 0;}

    .resv-policy-btn {
        padding: 12px 15px;
        font-size: clamp(14px, 2.25vw, 18px);
    }

    .section-left { display: contents; }

  /* 기본 순서: 왼쪽 섹션 일반 콘텐츠(1) → 오른쪽 섹션(2) → 노트/실시간상담(3) */
  .section-left > * { order: 2; }             /* 진료과/의료진 등 기존 아이템 */
  .section-right    { order: 3; }             /* 달력/시간/상담/약관 섹션 */
  /* .section-left > .reservation-note { order: 1; } */
  .section-left > .reservation-realtime-consult { order: 4; margin-top: -10%;}  /* 맨 아래로 */

  /* (선택) 가로폭 꽉 차게 */
  .reservation-note,
  .reservation-realtime-consult { width: 100%; }
}

@media screen and (max-width: 640px) {
    .reservation-section-container {margin-top: 15px;}
    :where(input[type='text'], input[type='tel']).resv-input-item {font-size: 14px;}
}

@media screen and (max-width: 490px) {
    .sub-container.advice0201 {padding-bottom: 380px;}
    .reservation-note {bottom: 190px;}
    .reservation-realtime-consult {padding: 20px;}

    #wrap .calendar-wrap {
        & .grid {gap: 0;}
    }
    #wrap .reservation-calendar-box > .reservation-title {padding: 10px;}
    #wrap .reservation-title > p {
        font-size: 15px;
    }
    .reservation-title {gap: clamp(4px, 1.62vw, 8px);}
    .reservation-title > p {font-size: clamp(17px, 3.67vw, 18px);}

    .route-label p {
        font-size: clamp(14px, 3.265vw, 16px);
    }

    .treat-category-select > .resv-input-item {word-break: unset;}
    .doc-opt-name {font-size: clamp(14px, 3.25vw, 16px);}
    .policy-check-inner {gap: 4px; transform: translateX(-4px);}
    .policy-check-inner p {font-size: 16px;}
    .policy-checkbox-label {width: 22px; height: 22px;}

    .rt-consult-inner {gap: 10px;}
    .rt-consult-inner strong {font-size: 20px;}
    .talk-consult {gap: 10px;}
    .talk-consult > p {font-size: 16px;}
    .talk-consult-btn-box {gap: 5px;}
    .talk-consult-btn {
        height: 34px;
        font-size: 14px;
    }
    .talk-consult-btn::before {transform: scale(0.6);}
}
@media screen and (max-width: 375px) {
    .visit-route-select-box > div {
        padding-left: 18px;
    }
}
@media screen and (max-width: 370px) {
    .sub-container.advice0201 {padding-bottom: 420px;}
    .route-label p {font-size: clamp(12px, 3.78vw, 14px);}
}
@media screen and (max-width: 360px) {
    .visit-route-select-box {grid-column-gap: 3px;}
    .visit-route-select-box > div {
        padding-left: 18px;
        font-size: clamp(12px, 3.885vw, 14px);
    }
}




/*=============================================================
// 진료시간
==============================================================*/

/* 스케쥴 전체 */
.schedule-container {
    margin-top: var(--content-vertical-gap-sm);
    margin-bottom: var(--content-vertical-gap-big);

    @media screen and (max-width: 640px) {
        & {
            margin-top: var(--mobile-content-vertical-gap-sm);
            margin-bottom: var(--mobile-content-vertical-gap-sm)
        }
    }
}

/* 상단 진료시간 */
.treatment-info-section {
    display: grid;
    grid-template-columns: var(--treatment-info-box-width) auto;
    gap: var(--schedule-doctor-info-box-gap);
    margin-top: var(--mobile-content-vertical-gap-sm);

    @media screen and (max-width: 1050px) {
        & {
            display: flex;
            flex-direction: column;

            & .treatment-info-box {
                align-items: center;
                gap: 20px;
                text-align: center;
            }
        }
    }

    & > div {
        padding: 
            var(--treatment-info-section-padding) 
            calc(var(--treatment-info-section-padding) * 1.5)
        ;
        border-radius: var(--treatment-info-section-border-radius);

        & h2 {
            font-size: var(--font-size-28);

            @media screen and (max-width: 1320px) {
                & {font-size: var(--font-news-list-num-size);}
            }
            @media screen and (max-width: 640px) {
                & {font-size: var(--font-size-18);}
            }
        }
    }

    & .treatment-info-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--color-sub-01);

        & .info-business-phone {
            font-size: clamp(30px, 6.25vw, 40px);
            font-weight: var(--font-weight-bold);
            color: var(--color-main-02);
        }

        & .treatment-info-box-text {
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: var(--font-size-20);
            font-weight: var(--font-weight-bold);

            @media screen and (max-width: 1320px) {
                & {font-size: var(--font-size-18);}
            }
            @media screen and (max-width: 640px) {
                & {font-size: var(--font-size-16);}
            }

            & p {
                line-height: 1.3;
                word-break: keep-all;

                & a {color: var(--color-main-02);}
            }
        }
    }

    & .treatment-time-box {
        display: grid;
        /* grid-template-columns: repeat(2, 1fr); */
        grid-template-columns: repeat(2, auto);
        gap: 20px;
        border: 1px solid var(--color-line-02);
        font-size: var(--font-size-20);

        
        @media screen and (max-width: 1320px) {
            & {font-size: var(--font-size-18);}
        }
        @media screen and (max-width: 1050px) {
            & {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }
        @media screen and (max-width: 640px) {
            & {font-size: var(--font-size-16);}
        }

        & .treatment-item-wrap {
            display: flex;
            flex-direction: column;
            gap: clamp(10px, 3.125vw, 20px);

            & .treatment-time-list {
                display: flex;
                flex-direction: column;
                gap: 10px;

                @media screen and (max-width: 1050px) {
                    & {align-items: center;}
                }

                & .treatment-time-list-item {
                    display: grid;
                    grid-template-columns: clamp(45px, 8.59375vw, 55px) auto;
                    gap: clamp(10px, 3.125vw, 20px);

                    & .treatment-time {
                        display: flex;
                        align-items: center;

                        & div {
                            width: 95px;
                            font-weight: var(--font-weight-bold);

                            @media screen and (max-width: 1320px) {
                                & {width: 85px;}
                            }
                            @media screen and (max-width: 640px) {
                                & {width: clamp(68px, 11.71875vw, 75px);}
                            }
                        }
                    }
                }

                & .treatment-time-note {
                    margin-top: var(--treatment-time-note-margin);
                    color: var(--color-text-06);
                    line-height: 1.5;
                    word-break: keep-all;

                    @media screen and (max-width: 1500px) {
                        & {font-size: clamp(16px, 1.33vw, 18px);}
                    }
                    @media screen and (max-width: 640px) {
                        & {
                            margin-top: 0;
                            font-size: var(--font-size-16);
                        }
                    }
                }
            }
        }

        & .schedule-time-img-box {
            display: flex;
            max-width: 140px;
            margin-left: auto;

            & img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            @media screen and (max-width: 1320px) {
                & {
                    position: absolute;
                    display: none;
                    width: 0;
                    height: 0;
                    margin-right: 0;
                }
            }
        }

    }
}
/*  */


/* <------- schedule-box 내용은 sub_common.css로 이동 -----------> */