.admin-wrap {
    background-color: #eaeff4;
    display: grid;
    grid-template-columns: clamp(240px, 10vw, 450px) minmax(1020px, 1fr);
    grid-template-rows: auto minmax(851px, 1226px);
    grid-template-areas:
        "sidebar header "
        "sidebar main ";
    height: 100%;
    // font-size: 1.8rem;


    .admin-header {
        grid-area: header;
        @include flex-layout(flex, center, space-between);
        padding: 1rem 3rem;
        border-bottom: 1px solid var(--tk-gray-30);

        .title-zone{
            @include flex-layout(flex, flex-end, flex-start); 

            .page-title {
                font-size: var(--tk-fz-title-xlg);
                font-weight: 700;
                margin-right: 1rem
            }
        }

        .info-wrap {
            .info {
                @include flex-layout(flex, center, flex-end);
                .info-name{
                    padding: .8rem
                }
                ul.info-btn{
                    @include flex-layout(flex, center);
                    li{
                        @include flex-layout(flex, center, center);
                        padding: 1rem;
                    }
                }
            }
        }

    }

    .side-bar{
    // .sub-menu {
        grid-area: sidebar;
        height: 100%;
        background-color: #f7f9fb;
        border-right: 1px solid var(--tk-gray-30);
        overflow-y: auto;
        
        .logo{
            padding: 1rem;
            font-size: var(--tk-fz-title-lg);
            font-weight: 700;
            text-align: center;
        }

       
        /* 메뉴 스타일 */
        .main-menu {
            .menu-item {
                position: relative;
                cursor: pointer;
                padding: 0 1rem;

                span{
                    display: block;
                    padding: 1rem 0;

                    &.main-active{
                        color: #008943;
                        font-weight: 700;
                    }
                }

                /* 서브메뉴 스타일 */
                .sub-menu {
                    padding: 1rem;
                    background: var(--tk-white);
                    border: 1px solid #ccc;
                    @include radius(10);
                    display: block;
                    width: 100%;

                    >li{
                        padding: 0 1rem;
                        cursor: pointer;


                        &.only-second-depth{
                            &.sub-active{
                                background-color: #008943;
                                color: var(--tk-white);
                                font-weight: 700;
                                @include radius(10);
                            }
                        }

                        &.has-third-depth{
                            &.sub-active{
                                >span{
                                    font-weight: 700;
                                }
                            }

                            .ss-active{
                                background-color: #008943;
                                color: var(--tk-white);
                                font-weight: 700;
                                @include radius(10);
                            }
                        }

                        .ssub-menu{
                            padding: 1rem;
                            background-color: var(--tk-gray-10);
                            @include radius(10);
                            li{
                                span{
                                    padding: 1rem;
                                }
                            }
                        }
                    }
                }

            }
        }
    }

    .main-wrap {
        grid-area: main;
        width: 100%;
        height: 100%
    }
}