.admin-wrap{
    .content-wrap {
        width: 100%;
        height: 100%;
        padding: 3rem;
    
        >.content-zone {
            height: calc(100% - 142px);
            // background-color: #ffffff;
            // padding: 3rem;
            // @include radius(20);
            // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
    
            >.content {
                height: 100%;
    
                .scroll {
                    height: 100%;
                    overflow-y: auto;
                }
    
            }
            &.full-page {
                height: 100%;
            }
            &.sch-full{
                height: calc(100% - 60px);
            }
            &.detail{
                height: calc(100% - 228px);
            }
        }
    }
    
    .content-wrap.main {
        .content-zone {
            height: 100%;
        }
    }
    
    .box-title,
    .section-title {
        font-size: var(--tk-fz-title-md);
        font-weight: 700;
        margin-bottom: 1rem;
    }
    
    .search-wrap{
        @include flex-layout(flex, center, space-between);
        margin-bottom: 3rem;
        .search-bar {
            position: relative;
            @include flex-layout(flex, center, end);
        
            .form-select {
                width: 120px;
                margin-left: 1rem;
        
                &.border-none{
                    border: none;
                    margin-left: 0;
                }
            }
        
            .form-control {
                width: 300px;
                margin-left: 1rem;
        
                &.border-none{
                    border: none;
                    margin-left: 0;
                }
            }

            .mark{
                margin-left: 1rem;
            }
        
            button{
                
                &.btn {
                    margin-left: 1rem;
                }
        
                &.btn-ico{
                    position: absolute;
                    top: 50%;
                    right: 1rem;
                    transform: translateY(-50%);
                    &.main{
                        &.ico-sch {
                            &::before,
                            &::after {
                                background-image: url(#{$url}/component/common/ico_sch_20_gn.svg);
                            }
                        }
                    }
                }
            }
        
            &.border{
                width: fit-content;
                border: 1px solid var(--tk-gray-60);
                background-color: var(--tk-white);
                border-radius: var(--tk-input-rd-sm);
            }

            .ml10{
                margin-left: 1rem
            }
        }
    }
    
    .btn-wrap {
        @include flex-layout(flex, center, end);
        // padding: 2rem 0;
        padding-top: 2rem;
    
        button {
            margin-left: 1rem;
        }
    
        &.list {
            @include flex-layout(flex, center, space-between);
            padding: 3rem 0;
        }
    }
    
    .form-content {
        padding: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: var(--tk-white);
        border-radius: 0 0 2rem 2rem;
        height: calc(100% - 45px);
        // max-height: fit-content;
    
        .layout {
            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 {
                min-width: 135px;
                max-width: 300px;
    
                &.fixed{
                    width: 135px;
                }
            }
    
            .form-control {
                max-width: calc(100% - 180px);
            }
    
            >div,
            .form-group {
                max-width: calc(100% - 180px);
    
                .form-control {
                    max-width: 100%;
                }
    
                span {
                    font-size: var(--tk-fz-detail-sm);
                }
    
                &.w_100{
                    width: 100%;
                }
            }
    
            >div,
            .input-group{
                max-width: calc(100% - 180px);
                &.w_100{
                    width: 100%;
                }
            }

            >div.modal-back{
                max-width: 100%;
            }
    
    
    
            &.grid-column {
                grid-column: 1/3;
            }
    
    
            &:last-child{
                grid-column: 1/3;
                padding-bottom: 0;
                border-bottom: 0;
            }
    
            &.pb10{
                padding-bottom: 1rem; 
            }
        }
    
        &.grid-none {
            display: block;
        }
    
    
        // 자식 div 개수가 짝수일 때 마지막 div의 스타일을 변경
        &:has(> div:nth-child(even)) {
    
            >div{
    
                &:nth-last-child(-n + 2){
                    border-bottom: 0;
                    &.border-bottom{
                        border-bottom: 1px solid var(--tk-gray-10);
                    }
                }
    
                &:last-child {
                    grid-column: unset;
        
                    &.grid-column {
                        grid-column: 1/3;
                    }
                }
            }
    
        }

        &.overflow-y{
            overflow-y: auto;
        }
    
    }
    
    .form-box {
        border: 1px solid var(--tk-gray-10);
        @include radius(20);
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
    
        .form-box-title {
            padding: 1rem 3rem;
            background-color: #c8d0d8;
            @include flex-layout(flex, center, start);
            font-size: var(--tk-fz-title-sm);
            border-radius: 2rem 2rem 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;
                }
            }
        }
    
        &.mb30{
            margin-bottom: 3rem
        }
    
    
    }
    
    .setting-box {
        @include flex-layout(flex, start, start);
        width: 100%;
        // height: calc(100% - 77.5px);
    
        .node-zone {
            width: 325px;
            height: 100%;
            margin-right: 3rem;
            background-color: #ffffff;
            border-radius: var(--tk-rd-12);
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
    
            .tree {
                padding: 3rem;
                width: 100%;
                height: calc(100% - 149px);
                overflow-y: auto;
    
    
            }
        }
    
        .setting-zone {
            width: calc(100% - 325px - 3rem);
            height: 100%;
    
            // .btn-wrap {
            //     // justify-content: flex-end;
            //     padding: 1rem 0;
            // }
    
    
        }
    
        .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;
            }
        }
    }
    
    .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;
    
        >div{
            flex: 0 0 calc(33.333% - 2rem);
            max-width: calc(33.333% - 2rem);
            padding: 2rem;
            @include radius(20);
            background-color: var(--tk-gray-5);
            border: 1px solid var(--tk-gray-30);

            .between{
                @include flex-layout(flex, center, space-between)
            }

            span{
                display: block;
                width: 50px;
                height: 50px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }

            &.first-box{
                span{
                    background-image: url(#{$url}/admin/ico_today.svg);
                }
            }
            &.two-box{
                span{
                    background-image: url(#{$url}/admin/ico_month.svg);
                }
            }
            &.three-box {
                background-color: var(--tk-main-50);
                .box-title{
                    color: var(--tk-white);
                }
                span{
                    background-image: url(#{$url}/admin/ico_total.svg);
                }
         

            }



            .box-content{
                min-width: 120px;
                text-align: center;
                font-size: 3rem;
                font-weight: 700;
                padding: 1rem 2rem;
                background-color: var(--tk-white);
                @include radius(50);

            }
        }
    }

    
    .chart-wrap {
        padding: 3rem;
        border: 1px solid var(--tk-gray-10);
        @include radius(20);
        background-color: var(--tk-white);
        height:350px
    }
    
    .area{
        font-size: var(--tk-input-fz-sm);
    }
    
    .form-check{
        display: flex;
        align-items: center;
    }
    
    .tbl-wrap{
        border: 1px solid var(--tk-gray-30);
        border-radius: 1rem;
    
        .tbl{
            max-width: 100%;
            width: 100%;
            &.data{
                thead{
                    th{
                        background-color: #c8d0d8;
                        &:first-child{
                            border-radius: 1rem 0 0 0;
                        }
                        &:last-child{
                            border-radius: 0 1rem 0 0;
                        }
    
                        &.sticky{
                            position: sticky;
                            top: 0;
                            z-index: 10;
                            background-color: #c8d0d8;
                        }
                    }
                }
        
                tbody{
                    tr{
                        &:last-child{
                            td{
                                border-bottom: 0;
                                &:first-child{
                                    border-radius:  0 0 0 1rem;
                                }
                                &:last-child{
                                    border-radius: 0 0 1rem 0;
                                }
                                &.data-none{
                                    border-radius:  0 0 1rem 1rem;
                                    text-align: center;
                                }
                                
                            }
                        }
                        td{
                            p{
                                @include ellipsis(1)
                            }
                            .form-check{
                                justify-content: center;
                                input[type=checkbox] ~ label{
                                    padding-left: calc(var(--tk-rdo-size-md));
                                }
                            }
                        }

                        
                    }
                }
            }
            &.mixing {
                thead{
                    tr{
                        &:nth-child(2){
                            th{
                                &:first-child{
                                    border-radius: 0;
                                }
                                &:last-child{
                                    border-radius: 0;
                                }
                            }
                        }
                        th{
                        
                            border-right: 1px solid var(--tk-secondary-30);
                
                            &[rowspan="2"]:last-child{
                                border-right:0;
                            }
                    
                            &.sticky{
                                position: sticky;
                                background-color: #c8d0d8;
                                z-index: 2;
                            }
                            &.top-0 {
                                top: 0;
                            }
                            &.top-40 {
                                top: 4rem; /* 첫 번째 헤더 높이에 맞춰 조정 */
                            }
                        }
                    }
                }
                
            }
    
        }
        &.overflow-y{
            overflow-y: auto;
        }
    
    }
    
    
    .mb30{
        margin-bottom: 3rem;
    }
    
    .dp__main{
        height: 100%;
        >div:first-child{
            height: 100%;
            *{
                height: 100%;
            }
            .dp__input{
                width: 100%;
                border: none;
                background-color: transparent;
                transition: none;
                line-height: 100%;
                padding: 0;
                font-size: 1.5rem;
            }
            .dp__icon{
                display: none;
            }
           
        }
    
        .dp__menu,
        .dp__selection_preview,
        .dp__action_button{
            font-size: 1.5rem;
        }
    }
    
    .check-area {
        @include flex-layout(flex, center);
        gap: 3rem;
    }
    
    .w_100{
        width: 100%;
    }
    
    .h_100{
        height: 100%;
    }
    
    .layout{
        @include flex-layout(flex, center, flex-start);
        .ml10{
            margin-left: 1rem;
        }
    
        &.between{
            @include flex-layout(flex, center, space-between);
        }

        &.gap-10{
            gap: 1rem;
        }

        &.wrap{
            flex-wrap: wrap;
        }

    }
    
    .border-top{
        border-top: 1px solid var(--tk-gray-10);
    }
    
    
    .gallery-wrap{
        margin-bottom: 3rem;
        .mySwiper{
            max-width: 600px;
            height: auto;
            aspect-ratio: 4/3;
            background-color: #c8d0d8;
        }
        
        .mySwiper2{
            max-width: 600px;
            .swiper-slide{
                width: 25%;
                height: auto;
                aspect-ratio: 4/3;
                background-color: #c8d0d8;
            }
        }
    }
    
    .video-zone{
        margin-bottom: 3rem;
    
        iframe{
            display: block;
            width: 600px;
            height: auto;
            aspect-ratio: 16/9;
            margin: 0 auto;
        }
    }
    
    .comment-box{
        padding: 3rem;
        background-color: var(--tk-gray-10);
        @include radius(20);
        margin-top: 3rem;
    
        .comment-head{
            width: auto;
            margin-right: 3rem;
            padding-left: 3rem;
            background-image: url(#{$url}/component/common/ico_comment.svg);
            background-repeat: no-repeat;
            background-position: left center;
        }
    
        .form-control{
            max-width: calc(100% - 230px);
        }
    
        .btn{
            margin-left: 1rem;
        }
    }
    
    .navigate-wrap{
        padding: 2rem;
        background-color: var(--tk-white);
        @include radius(20);
        margin-top: 2rem;
        .content-navigate{
            border-top: 1px solid var(--tk-gray-50);
            border-bottom: 1px solid var(--tk-gray-50);
            tbody{
                tr{
                    border-bottom: 1px solid var(--tk-gray-30);
    
                    td{
                        padding: 1rem;
                    }
    
                    &:last-child{
                        border-bottom: 0;
                    }
                }
            }
        }
    }
    
    .icon-btn-zone{
        button{
            border: 1px solid var(--tk-gray-30);
            background-color: var(--tk-white);
            border-radius: 50%;
            margin-left: 1rem;
            &.btn-ico[class*='ico-'] {
                background-size: 1.8rem;
            }
    
            &:first-child{
                margin-left: 0;
            }
        }
    }
    
    .state{
        display: inline-block;
        padding: .5rem 1rem;
        @include radius(10);
        font-weight: 700;
        &.red{
            background-color: var(--tk-point-10);
            color: var(--tk-point-40);
        }
        &.blue{
            background-color: var(--tk-primary-10); 
            color: var(--tk-primary-40); 
        }
    
        &.answer{
            border: 1px solid var(--tk-gray-90);
            margin-right: 1rem;
            font-size: 1.5rem;
        }
    
         &.question{
            background-color: var(--tk-gray-90);
            color: var(--tk-white);
            margin-right: 1rem;
            font-size: 1.5rem;
        }
    }
    
    .sch-full{
        height: calc(100% - 60px);
    }
    
    .breadcrumb-warp{
        padding: .5rem 1rem;
        background-color: var(--tk-white);
        @include radius(20);
        font-size: 1.3rem;
    
        .home{
            padding-left: 2rem;
            background-image: url(#{$url}/component/common/ico_bread_home.svg);
            background-position: left center;
            background-repeat: no-repeat;
        }
    }

    .word-list{
        min-height: 200px;
        max-height: 200px;
        overflow-y: auto;

        .word-item{
            padding: .5rem 1rem;
            border: 1px solid var(--tk-gray-10);
            @include radius(10)
        }
    }

    button {
        &.main{
            background-color: var(--tk-main-50);
            border: 1px solid var(--tk-main-50);
            &:hover{
                background-color: var(--tk-main-70);
                border: 1px solid var(--tk-main-70);
            }
            &[disabled] {
                background-color: var(--#{$prefix}gray-30);
                border-color: var(--#{$prefix}gray-30);
                color: var(--#{$prefix}gray-60);
            }
        }
    }

    .auth-btn{
        width: 120px;
    }
}