.content-wrap {
    width: 100%;
    height: 100%;
    padding: 3rem;



    .box-title,
    .section-title {
        font-size: var(--tk-fz-title-md);
        font-weight: 700;
        margin-bottom: 1rem;
    }


    .search-bar {
        @include flex-layout(flex, center, end);
        margin-bottom: 1rem;

        .form-select {
            width: 120px;
        }

        .form-control {
            width: 300px;
            margin-left: 1rem;
        }

        .btn {
            margin-left: 1rem;
        }
    }

    .btn-wrap {
        @include flex-layout(flex, center, end);
        padding: 3rem 0;

        button {
            margin-left: 1rem
        }
    }

    .btn-wrap.list {
        @include flex-layout(flex, center, space-between);
        padding: 3rem 0;
    }

    .form-content {
        padding: 3rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        // grid-template-rows: 1fr 1fr;

        >div {
            @include flex-layout(flex, center, start);
            width: 100%;
            padding: 1rem;
            border-bottom: 1px solid var(--tk-gray-10);

            .form-title {
                width: 180px;
                font-weight: 700;

                span {
                    color: var(--tk-point-40);
                    margin-right: .5rem;
                }
            }


            .form-select {
                width: 200px;
            }

            .form-control {
                max-width: calc(100% - 180px);
            }

            .form-group {
                width: calc(100% - 180px);

                .form-control {
                    max-width: 100%;
                }

                span {
                    font-size: var(--tk-fz-detail-sm);
                }
            }
        }

        >div:nth-child(1),
        div:nth-child(2) {
            padding-top: 0;
        }

        >div:last-child {
            grid-column: 1/3;
            padding-bottom: 0;
            border-bottom: 0;
        }

        // 자식 div 개수가 짝수일 때 마지막 div의 스타일을 변경
        &:has(> div:nth-child(even):last-child) {
            >div {
                padding-left: 3rem;
            }

            >div:last-child {
                grid-column: unset;
            }

            >div:nth-last-child(2) {
                border-bottom: 0;
            }
        }

        .check-area {
            @include flex-layout(flex, center);
            gap: 3rem;
        }


    }

    
    .title-zone {
        @include flex-layout(flex, center, space-between);
        margin-bottom: 3rem;

        .section-title {
            margin-bottom: 0;
        }
    }

    >.content-zone {
        height: calc(100% - 70px);
        background-color: var(--tk-white);
        padding: 3rem;
        @include radius(30);

        >.content {
            height: 100%;

            .scroll {
                height: 100%;
                overflow-y: auto;

                .top-zone {
                    >div {
                        margin-bottom: 5rem;

                        .tbl {
                            .table-title {
                                @include ellipsis(1);
                            }

                        }
                    }

                }

                .middle-zone {
                    @include flex-layout(flex, flex-start, space-between);
                    gap: 3rem;
                    margin-bottom: 5rem;

                    .first-box,
                    .two-box,
                    .three-box {
                        flex: 0 0 calc(33.333% - 2rem);
                        max-width: calc(33.333% - 2rem);
                        padding: 2rem;
                        border-radius: var(--tk-rd-12);
                        text-align: center;
                        border: 1px solid var(--tk-gray-10);


                    }
                }

                .chart-wrap {
                    padding: 3rem;
                    border: 1px solid var(--tk-gray-10);
                    @include radius(30);
                }

                .form-box {
                    border: 1px solid var(--tk-gray-10);
                    @include radius(30);

                    .form-box-title {
                        padding: 1rem 3rem;
                        background-color: #fbfbfb;
                        @include flex-layout(flex, center, start);
                        font-size: var(--tk-fz-title-sm);
                        border-radius: 3rem 3rem 0 0;

                        >p {
                            margin-right: 1rem;
                            font-weight: 700;
                        }

                        >p:nth-of-type(2) {
                            font-size: var(--tk-fz-detail-sm);
                            background-color: var(--tk-point-5);
                            border: 1px solid var(--tk-point-40);
                            padding: .2rem 1rem;
                            // border-radius: var(--tk-rd-12);
                            @include radius(30);
                            font-weight: 400;

                            span {
                                color: var(--tk-point-40);
                                margin-right: .5rem;
                            }
                        }
                    }


                }
            }

            .setting-box {
                @include flex-layout(flex, start, start);
                width: 100%;
                height: calc(100% - 38.5px);

                .node-zone {
                    width: 325px;
                    height: 100%;
                    margin-right: 5rem;
                    background-color: #fbfbfb;
                    border-radius: var(--tk-rd-12);

                    .tree {
                        padding: 3rem;
                        width: 100%;
                        height: calc(100% - 149px);
                        overflow-y: auto;


                    }
                }

                .setting-zone {
                    width: calc(100% - 325px - 5rem);
                    height: 100%;

                    .form-content {
                        padding: 0;

                        >div {
                            padding: 1rem;
                        }

                        >div:nth-child(2),
                        div:nth-child(4),
                        div:nth-child(6) {
                            padding-left: 3rem;
                        }

                        >div:last-child {
                            align-items: flex-start;
                        }

                    }
                }

                .btn-zone {
                    padding: 3rem;

                    button {
                        min-width: 126px;
                        margin-left: 1rem;
                        margin-bottom: 1rem;
                    }

                    button:nth-child(1) {
                        margin-left: 0;
                    }

                    button:last-child {
                        min-width: 100%;
                        margin-left: 0;
                        margin-bottom: 0;
                    }
                }
            }
        }

    }


}

.content-wrap.main {
    .content-zone {
        height: 100%;
    }
}