#reservation-section {
    user-select: none;
    
    & .reservation-section-inner {
        --reservation-section-inner-gap: clamp(20px, 2.5vw, 40px);
        --section-line-height: 1.2;
        
        display: flex;
        gap: var(--reservation-section-inner-gap);
        margin: 
            /* var(--mobile-content-vertical-gap-sm) */
            0
            auto
            var(--mobile-content-vertical-gap-big)
        ;
        padding-top: var(--header-height);
        @media screen and (max-width: 1000px) {
            flex-direction: column;
        }

        & > section {flex: 1;}

        & .section-title {
            --section-title-gap: 10px;
            --section-margin-block: 20px;
            --section-title-font-size: var(--font-size-14);

            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--section-title-gap);
            margin-block: var(--section-margin-block);

            & span {
                display: flex;
                justify-content: center;
                align-items: center;
                width: calc(var(--section-title-font-size) * 2.5);
                aspect-ratio: 1/1;
                border-radius: 50%;

                font-size: var(--section-title-font-size);
                font-weight: var(--font-weight-bold);
                background-color: var(--color-main-02);
                color: var(--color-main-white);
                letter-spacing: 0.25px;
            }

            & p {
                font-size: calc(var(--section-title-font-size) * 1.29);
                font-weight: var(--font-weight-regular);
                line-height: var(--section-line-height);
                word-break: keep-all;
            }
        }

        & #section-calendar {
            --section-calendar-padding: 10px;
            display: flex;
            flex-direction: column;
            gap: calc(var(--section-calendar-padding) * 2.5);

            & .calendar-container {
                overflow: hidden;
                width: 100%;
                margin-top: -1px;
                border: 1px solid var(--color-line-01);
                border-radius: var(--main-border-radius-default);
            }
            & .calendar-note-bx {
                display: flex;
                flex-direction: column;
                gap: calc(var(--section-calendar-padding) * 1.5);
                padding: calc(var(--section-calendar-padding) * 2);
                border-radius: var(--main-border-radius-default);
                background-color: var(--color-sub-04);
                font-size: var(--font-size-14);

                & p {
                    display: flex;
                    line-height: var(--section-line-height);

                    &::before {
                        content: '·';
                        margin-right: 3px;
                    }
                }
            }
            & .calendar-service-bx {
                display: flex;
                flex-direction: column;
                gap: var(--section-calendar-padding);

                & .calendar-service-title {
                    font-size: var(--font-size-18);
                    font-weight: var(--font-weight-regular);
                    color: var(--color-main-02);
                }
                & .calendar-service-list {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                    align-items: center;
                    gap: var(--section-calendar-padding);

                    & .calendar-service-item {

                        & .calendar-service-item-anchor {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: var(--section-calendar-padding);
                            padding: var(--section-calendar-padding);
                            border-radius: 20px;

                            & img {max-width: 20px;}
                            & p {
                                font-weight: var(--font-weight-regular);
                                line-height: var(--section-line-height);
                            }

                            &:where(.tel, .naver-booking) {color: var(--color-main-white);}
                            &.tel {background-color: var(--color-main-02);}
                            &.naver-booking {background-color: var(--app-color-line);}
                            &.kakaotalk {background-color: var(--app-color-kakaotalk);}
                        }
                    }

                    @media screen and (max-width: 460px) {
                        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                        gap: 5px;

                        & .calendar-service-item {
                            & .calendar-service-item-anchor {
                                gap: 5px;
                                padding: clamp(6px, 1.73913043vw, 8px);
                                & p {font-size: 12px;}
                            }
                        }
                    }
                }
            }

        }
        & #section-time {

            & .time-list {
                --time-list-gap: clamp(10px, 1.25vw, 20px);

                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: var(--time-list-gap);

                & .time-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 10px;
                    border: 1px solid var(--color-line-01);
                    border-radius: var(--main-border-radius-default);
                    font-weight: var(--font-weight-regular);
                    line-height: var(--section-line-height);
                    color: var(--color-text-03);
                    letter-spacing: 0;
                    cursor: pointer;

                    &.no-selected {
                        grid-column: 1 / 4;
                        font-weight: var(--font-weight-normal);
                        letter-spacing: -0.025rem;
                        word-break: keep-all;
                        cursor: auto;
                    }

                    &.selected {
                        background-color: var(--color-main-02);
                        color: var(--color-main-white);
                    }
                }
            }
        }
        & #section-info {

            & .section-info-group {
                --section-info-group-gap: 20px;

                display: flex;
                flex-direction: column;
                gap: var(--section-info-group-gap);

                /* 개인정보 기입 */
                & .personal-info-input-bx {
                    --input-name-w: 125px;
                    --input-gap: 10px;
                    --input-padding-block: 7px;
                    --input-padding-inline: calc(var(--input-padding-block) * 2);

                    display: grid;
                    grid-template-columns: var(--input-name-w) auto;
                    align-items: center;
                    gap: var(--input-gap);

                    @media screen and (max-width: 1280px) {
                        grid-template-columns: 1fr;
                    }

                    & input {
                        
                        width: 100%;
                        padding-block: var(--input-padding-block);
                        padding-inline: var(--input-padding-inline);
                        border: 1px solid var(--color-line-01);
                        border-radius: var(--main-border-radius-default);
                        font-size: var(--font-size-16);
                        color: var(--color-text-03);
                    }

                    & .input-wrap {
                        display: grid;
                        align-items: center;
                    
                        & .placeholder {
                            position: relative;
                            display: block;
                    
                            /* 공통 별 모양 (*) */
                            &::before {
                                content: '*';
                                color: red;
                                position: absolute;
                                top: 50%;
                                left: var(--input-padding-inline);
                                transform: translateY(-50%);
                                z-index: 1;
                            }
                    
                            /* 공통 글자 가이드 */
                            &::after {
                                color: var(--color-text-03);
                                position: absolute;
                                top: 50%;
                                left: calc(var(--input-padding-inline) * 1.8);
                                transform: translateY(-50%);
                                z-index: 1;
                            }
                    
                            /* [핵심] 값이 있거나 포커스 시 숨기기 */
                            &:has(input:focus, input:not(:placeholder-shown)) {
                                &::before, &::after {
                                    display: none;
                                }
                            }
                        }
                    
                        /* 성함 입력칸용 세팅 */
                        &.name {
                            grid-template-columns: 1fr;
                            & .placeholder::after { content: '성함'; }
                        }
                    
                        /* 전화번호 입력칸용 세팅 */
                        &.tel {
                            grid-template-columns: 1fr auto 1fr auto 1fr;
                            & .placeholder:first-child::after { content: '010'; }
                    
                            & span {
                                padding-inline: calc(var(--input-gap) / 2);
                                text-align: center;
                            }
                        }
                    }
                }

                /* 카테고리 선택 - 라디오 버튼 모음 */
                & .radio-bx {
                    --radio-bx-padding: 10px;

                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    border: 1px solid var(--color-line-01);
                    border-radius: var(--main-border-radius-default);

                    & .radio-title {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-block: var(--radio-bx-padding);
                        background-color: var(--color-table-01);
                        font-size: var(--font-size-17);
                        font-weight: var(--font-weight-regular);
                    }
                    & .radio-category-list {
                        --radio-category-list-max-w: 310px;
                        --radio-category-list-grid-row-gap: 20px;

                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        grid-row-gap: var(--radio-category-list-grid-row-gap);
                        width: 100%;
                        max-width: var(--radio-category-list-max-w);
                        margin: 0 auto;
                        padding: calc(var(--radio-bx-padding) * 2);

                        & .radio-category {
                            line-height: var(--section-line-height);
                            word-break: keep-all;

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

                /* 개인정보처리방침 체크 */
                & .agree-bx {
                    --agree-bx-height: 26px;
                    --agree-bx-margin-inline: 10px;

                    position: relative;
                    display: flex;
                    align-items: center;
                    height: var(--agree-bx-height);
                    margin-inline: var(--agree-bx-margin-inline);

                    & .agree-input-wrap {
                        & label {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                            z-index: 1;

                            &::before {
                                content: '';
                                width: var(--agree-bx-height);
                                aspect-ratio: 1/1;
                                border: 1px solid var(--color-line-01);
                                border-radius: calc(var(--main-border-radius-default) / 2);
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: var(--color-main-white);
                                box-sizing: border-box;
                            }
                            &:has(input:checked)::before {
                                content: url('/img/sub/about/reservation/icon-check.webp');
                            }
                        }
                        & input {appearance: none;}
                    }
                    & p {
                        --label-text-padding: calc(var(--agree-bx-height) * 1.25);

                        position: relative;
                        z-index: 0;
                        padding-left: var(--label-text-padding);
                        line-height: var(--section-line-height);
                        word-break: keep-all;
                    }
                }

                /* 버튼 */
                & .button-bx {
                    --button-bx-gap: clamp(10px, 3.125vw, 20px);

                    display: flex;
                    align-items: center;
                    gap: var(--button-bx-gap);

                    & .btn-reservation {
                        flex: 1;
                        appearance: none;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        padding-block: calc(var(--button-bx-gap) / 2);
                        border: 1px solid var(--color-line-01);
                        border-radius: var(--main-border-radius-default);
                        font-size: var(--font-size-17);
                        color: var(--color-text-03);
                        line-height: normal;

                        &.alt {
                            background-color: var(--color-main-02);
                            color: var(--color-main-white);
                        }
                    }
                }
            }
        }
    }
}