.admin-wrap {
    background-color: #eaeff4;
    display: grid;
    grid-template-columns: clamp(240px, 10vw, 450px) minmax(1020px, 1fr);
    grid-template-rows: 60px 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, center, 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: 0 1rem;
                        border-right: 1px solid var(--tk-gray-30);

                        &:last-child{
                            border-right: none;
                        }

                        button{
                            @include flex-layout(flex,center);
                            padding: .3rem 1rem !important;
                            background-color: var(--tk-white);
                            @include radius(20);
                            font-size:1.4rem;
                            gap: .5rem;
                        }
                    }
                }
            }
        }

    }

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

        nav{
            height: calc(100% - 60px);
            /* 메뉴 스타일 */
            .main-menu {
                padding: 2rem 0;
                height: 100%;
                overflow-y: auto;
                .menu-item {
                    position: relative;
                    cursor: pointer;
                    padding: 0 2rem;
    
                    span{
                        display: block;
                        padding: 1rem;
    
                        &.main-active{
                            color: var(--tk-main-50);
                            font-weight: 700;

                        }
                    }
                    
                    >span.has-children{
                        position: relative;

                        &::after {
                            content: '';
                            position: absolute;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 20px;
                            height: 20px;
                            background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
                            background-repeat: no-repeat;
                            background-size: contain;
                            border:1px solid var(--tk-gray-50);
                            border-radius: 50%;
                            transition: transform 0.3s ease;
                        }
                    
                        &.open::after {
                            border: 1px solid var(--tk-main-50);
                            background-image: url(#{$url}/component/common/ico_arr_16_right_green70.svg);
                            transform: translateY(-50%) rotate(90deg); // 오른쪽 화살표 → 아래 방향
                    
                        }
                    }
    
                    /* 서브메뉴 스타일 */
                    .sub-menu {
                        padding: 1rem;
                        background: var(--tk-white);
                        border: 1px solid #ccc;
                        @include radius(10);
                        display: block;
                        width: 100%;
    
                        >li{
    
                            cursor: pointer;
    
                            &.sub-active{
                                >span{
                                    background-color: var(--tk-main-50);
                                    color: var(--tk-white);
                                    font-weight: 700;
                                    @include radius(10);
                                }
                            }
    
    
                            &.has-third-depth{
                                &.sub-active {
                                    >span{
                                        background-color: var(--tk-main-50);
                                        color: var(--tk-white);
                                        font-weight: 700;
                                        @include radius(10);
                                        // border-radius: 1rem 1rem 0 0;
                                    }
                                }
    
                            }
    
                            .ssub-menu{
                                padding: 1rem;
                                background-color: var(--tk-gray-10);
                                @include radius(10);
                                li{
                                    span{
                                        padding: 1rem;
                                    }
                                    &.ss-active{
                                        color: var(--tk-main-50);
                                        font-weight: 700;
                                    }
                                }
                            }
                        }
                    }
    
                }
            }
        }
    }

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