@charset "utf-8";

@import url("../font/pretendard.min.css");

@import url("./reset.css");





:root {

    --color-key: #907aff;

    --color-key-t: #907aff34;

    --color-alert: #FB6514;

    --color-warning: #D92D20;

    --color-atention: #ddb83e;

    --color-cansel: #44444f;

    --color-delete: #24242d;

    --color-posi1: #1570EF;

    --color-posi2: #0BA5EC;

    --color-posi4: #12B76A;

    --color-posi3: #7BC111;

    --color-txt: #000;

    --color-txt2: #E4E4E7;

    --color-txt3: #D4D4D8;

    --color-txt4: #A1A1AA;

    --color-txt5: #71717A;

    --color-txt6: #52525B;

    --color-txt7: #3F3F46;

    --color-txt8: #27272A;

    --color-txt9: #18181B;

    /* --color-txt9: #09090B; */



    --color-bg0: #f9fbfd;

    --color-bg1: #fff;

    --color-bg2: #f9f9f9;

    --color-bg-btn1: #f5f5f5;

    --color-bd-input: #0002;

    --color-bd1: #0001;

    --color-bd2: #444;

    --color-sd: #fff;

    --color-sd1: rgba(0, 0, 0, 0.03);

    --color-sd2: rgba(0, 0, 0, 0.05);

    --color-sd3: rgba(0, 0, 0, 0.07);

    --color-sd4: rgba(0, 0, 0, 0.1);

    --color-sd5: #0005;

    --color-sd6: #0006;

    --color-sd7: #0007;

    --color-sd8: #0008;

    --color-sd9: #0009;

    --rem: 16px;

    --gap: 1rem;

    --grid-top: 3.125rem;

    --grid-left: 11.75rem;

    --bor: .25rem;

    --fhd-h: 59.5625rem;

    --h: calc((((var(--fhd-h) - var(--grid-top)) - 4rem) / 2) - (var(--gap) / 2));

    --hover-bs: 0 0 1.875rem var(--color-txt2);





    --img-logo: url('../../images/logo-hanati.svg');



    --icon-manage_accounts: url('../../images/manage_accounts.svg');

    --icon-password: url('../../images/common/icon-password.svg');



    --icon-dashboard: url('../../images/common/icon-dashboard.svg');

    --icon-user: url('../../images/common/icon-user.svg');

    --icon-experiments: url('../../images/common/icon-document.svg');

    --icon-lab: url('../../images/common/icon-home.svg');

    --icon-job: url('../../images/common/icon-job-management.svg');

    --icon-monitoring: url('../../images/common/icon-monitoring.svg');

    --icon-community: url('../../images/common/icon-community.svg');

    --icon-home: url('../../images/common/icon-home.svg');

    --icon-search: url('../../images/common/icon-search.svg');

    --icon-add: url('../../images/common/icon-add.svg');





    --indicator-prev: url('../../images/common/indicator-prev.svg');

    --indicator-next: url('../../images/common/indicator-next.svg');

    --indicator-first: url('../../images/common/indicator-first.svg');

    --indicator-last: url('../../images/common/indicator-last.svg');

    --indicator-arrow-down: url('../../images/common/indicator-arrow-down-small.svg');

    --indicator-arrow-up: url('../../images/common/indicator-arrow-up-small.svg');

    --indicator-calendar: url('../../images/common/indicator-calendar.svg');







    --icon-cluster: url('../../images/common/icon-cluster-management.svg');

    --icon-manage: url('../../images/common/icon-operations-management.svg');

    --icon-security: url('../../images/common/icon-security-management.svg');

    --icon-common: url('../../images/common/icon-common-code-management.svg');

    --icon-menu: url('../../images/common/icon-menu-program-management.svg');

    --icon-log: url('../../images/common/icon-log-management.svg');



    --img-client: url('../../images/client-logo-demo.svg');

    --icon-data-science: url('../../images/icon-data-science.svg');



    --img-login: url('../../images/bg_login.webp');



    --icon-excel: url('../../images/icon-excel.svg');

    --icon-file-qdrep: url('../../images/common/file-qdrep.svg');



    --icon-document: url('../../images/common/icon-document.svg');

    --icon-noti: url('../../images/common/icon-noti.svg');

    --icon-help: url('../../images/common/icon-help.svg');

    --icon-time: url('../../images/common/icon-time.svg');

    --icon-logout: url('../../images/common/icon-logout.svg');

    --icon-to-user: url('../../images/common/icon-user-console.svg');

    --icon-to-admin: url('../../images/common/icon-admin-console.svg');

    --icon-viewmore: url('../../images/common/icon-viewmore.svg');

    --icon-viewmore-trans: url('../../images/common/icon-viewmore-trans.svg');





    --icon-dashboard-f01: url('../../images/dashboard/feature-01.svg');

    --icon-dashboard-f02: url('../../images/dashboard/feature-02.svg');

    --icon-dashboard-f03: url('../../images/dashboard/feature-03.svg');

    --icon-dashboard-f04: url('../../images/dashboard/feature-04.svg');



    --icon-noti-job: url('../../images/dashboard/icon-noti-job.svg');

    --icon-noti-project-member: url('../../images/dashboard/icon-noti-project-member.svg');

    --icon-noti-job-stop: url('../../images/dashboard/icon-noti-job-stop.svg');

    --icon-noti-qna-complete: url('../../images/dashboard/icon-noti-qna-complete.svg');



    --icon-file: url('../../images/common/icon-file-outline.svg');

    --icon-folder-close: url('../../images/common/icon-folder-close.svg');

    --icon-folder-open: url('../../images/common/icon-folder-open.svg');

    --icon-folder-open-current: url('../../images/common/icon-folder-open-current.svg');

}





#app.prd {

    --img-client: url('../../images/client-logo-hanati.svg');

}



#app.dev {

    --img-client: url('../../images/client-logo-demo.svg');

}



#app.stage {

    --img-client: url('../../images/client-logo-demo.svg');

}



#app.local {

    --img-client: url('../../images/client-logo-demo.svg');

}



#app.hana {

    --img-client: url('../../images/client-logo-hanati.svg');

}





.icon {

    width: 1.5rem;

    aspect-ratio: 1;

    display: inline-block;

    vertical-align: middle;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;



    &.document {

        background-image: var(--icon-document);

    }



    &.notification {

        background-image: var(--icon-noti);

    }



    &.help {

        background-image: var(--icon-help);

    }



    &.time {

        background-image: var(--icon-time);

    }



    &.logout {

        background-image: var(--icon-logout);

    }



    &.to-admin {

        background-image: var(--icon-to-user);

    }



    &.to-user {

        background-image: var(--icon-to-admin);

    }



    &.change-password {

        background-image: var(--icon-password);

    }

}









* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    border: 0;

    list-style: none;

    text-decoration: none;

    line-height: 1;

    font-family: inherit;

    font-size: inherit;

    color: inherit;

    transition: inherit;

}





select::-ms-expand {

    display: none;

}





/* Scrollbar styling --> */





*::-webkit-scrollbar-track {

    border-radius: .1875rem;

}



*::-webkit-scrollbar {

    width: .375rem;

    height: .375rem;

}



*::-webkit-scrollbar-thumb {

    border-radius: .1875rem;

    background-color: var(--color-sd4);

    min-height: 2rem;

}





*::-webkit-scrollbar-corner {

    background: transparent;

}



*::-webkit-scrollbar-button:vertical:start:decrement,

*::-webkit-scrollbar-button:vertical:end:decrement {

    display: block;

    width: .1875rem;

    height: .1875rem;

}





/* Scrollbar styling --> */





html,

body {

    width: 100%;

    height: 100%;

    max-width: 100vw;

    margin: 0;

    padding: 0;

    background: var(--color-bg0);

    color: var(--color-txt);

    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

    font-size: var(--rem);

    font-weight: 400;

}





body {

    padding: var(--grid-top) 0 0 var(--grid-left);

    background: none;

}







/* Top menu --> */



.admin_header {

    display: flex;

    position: fixed;

    justify-content: space-between;

    z-index: 100;

    /* top: 0;

    right: 0;

    left: 0; */

    top: 0;

    transform: translateX(-50%);

    left: 50%;



    width: 100vw;

    height: var(--grid-top);











    backdrop-filter: blur(0.3rem);

    flex-direction: row;

    align-items: center;

    padding: 0 calc(var(--gap) * 2) 0 calc(var(--gap) * 1);

    gap: calc(var(--gap) * 1);

    transition: all .3s;

    background: var(--color-bg1);

    box-shadow: 0 0 1rem #0001;



    &::after {

        content: '';

        display: block;

        position: absolute;

        width: 100%;

        height: 1px;

        bottom: 0;

        left: 50%;

        transform: translateX(-50%);

        background: var(--color-key);

        opacity: .5;

    }



    &>* {

        margin: 0 0;

    }



    & .logo {

        display: block;

        position: relative;

        margin-right: auto;

        width: auto;

        height: 100%;

        aspect-ratio: 8.4 /2;

        background: var(--img-logo) center left / auto 46% no-repeat;



        &.admin:after {

            content: '[Admin]';

            display: block;

            position: absolute;

            right: -4.2em;

            font-size: 1.2rem;

            font-weight: 800;

            width: 4em;

            color: var(--color-key);

        }



        & p {

            overflow: hidden;

            text-indent: -999em;

        }



    }



    & .menu,

    .time,

    .utility {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: var(--gap);



        &>a {

            width: 1.5rem;

            height: 1.5rem;

            display: block;

            position: relative;

            cursor: pointer;

            z-index: 10;



            &::before {

                content: '';

                display: block;

                position: absolute;

                white-space: nowrap;

                width: fit-content;

                top: 0%;

                left: 50%;

                opacity: 0;

                transform: translate(-50%, 50%) scale(0, 0);

                background: var(--color-sd5);

                color: var(--color-bg0);

                border-radius: var(--bor);

                padding: calc(var(--bor) * 2) calc(var(--bor) * 3);

                transition: all .3s;

                font-size: .75rem;

            }





            &:hover {

                opacity: 1;



                &::before {

                    display: block;

                    top: 60%;

                    transform: translate(-50%, 50%) scale(1, 1);

                    opacity: 1;

                }

            }



            &.notification::before {

                content: none;

            }



            &.notification.enable::before {

                content: attr(data-notification);

            }



            &.help::before {

                content: 'Q&A';

            }



            &.notification.enable {

                animation: 2s cubic-bezier(0.76, -0.02, 0.24, 1.29) 0s infinite running alarm;



                & span {

                    filter: saturate(1);

                    opacity: 1;



                }



                &::after {

                    content: '';

                    display: block;

                    position: absolute;

                    width: .375rem;

                    height: .375rem;

                    background: var(--color-warning);

                    border-radius: 50%;

                    top: 0;

                    right: 0;

                }

            }





        }



        & span.icon {

            opacity: .5;

            filter: saturate(0);



            &:hover {

                filter: saturate(1);

                opacity: 1;

            }

        }

    }



    & .utility {

        &>a {

            /* overflow: hidden; */

            color: transparent;

            position: relative;

            opacity: .5;



            &::before {

                content: '';

                display: block;

                position: absolute;

                white-space: nowrap;

                width: fit-content;

                top: 0%;

                left: 50%;

                opacity: 0;

                transform: translate(-50%, 50%) scale(0, 0);

                background: var(--color-sd5);

                color: var(--color-bg0);

                border-radius: var(--bor);

                padding: calc(var(--bor) * 2) calc(var(--bor) * 3);

                transition: all .3s;

                font-size: .75rem;

            }



            &:hover {

                opacity: 1;



                &::before {

                    display: block;

                    top: 60%;

                    transform: translate(-50%, 50%) scale(1, 1);

                    opacity: 1;

                }

            }



            &.logout::before {

                content: '로그아웃';

            }



            &.change-password::before {

                content: '비밀번호 변경';

            }



            &.to-user::before {

                content: '사용자 콘솔로';

            }



            &.to-admin::before {

                content: '관리자 콘솔로';

            }



        }





        &>a:hover::after {

            color: var(--color-txt);

        }

    }



    & span.mso {

        display: block;

        font-size: 1.5rem;

        color: var(--color-txt5);

        width: 1.5rem;

        line-height: 1.5rem;



        &:hover {

            color: var(--color-txt);

        }

    }



    & .user {

        display: flex;

        position: relative;

        flex-flow: wrap;

        align-items: center;

        background: var(--color-txt2);

        position: relative;

        gap: var(--gap);

        border-radius: calc(var(--gap)* 1.5);

        padding: 0.1rem 0.7rem;



        & .name {

            font-size: .75rem;

            font-weight: 500;

            color: var(--color-txt);

            line-height: 1.5rem;

        }



        & .info {

            font-size: .75rem;

            color: var(--color-txt5);

            width: fit-content;

            max-width: 12rem;

            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;

            line-height: 1.5rem;

        }

    }



    & .time {

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

        gap: .25rem;

        color: var(--color-alert);



        & p {

            font-size: .75rem;

            width: 3em;

        }



        &:hover,

        &:hover .mso {

            color: var(--color-txt);

        }

    }



    & .my {

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;



    }





}



@keyframes alarm {

    0% {

        transform: rotate(0deg);

    }



    70% {

        transform: rotate(0deg);

    }



    75% {

        transform: rotate(0deg) translateY(-5%);

    }



    80% {

        transform: rotate(7deg) translateY(-5%);

    }



    85% {

        transform: rotate(-7deg) translateY(-5%);

    }



    90% {

        transform: rotate(7deg) translateY(-5%);

    }



    95% {

        transform: rotate(-7deg) translateY(-5%);

    }



    100% {

        transform: rotate(0deg);

    }



}



.open_menu .admin_header .logo {

    aspect-ratio: 1 /2;

    margin-left: 0.5rem;

}



/*



.admin_header .my .menu_icon_t6 {

    background: var(--icon-manage_accounts);

} */



/* <-- Top menu */





/* GNB  --> */



.admin_gnb {

    position: fixed;

    display: flex;

    flex-direction: column;

    /* justify-content: space-between; */

    justify-content: flex-start;

    gap: 0;

    z-index: 98;

    top: 0;

    bottom: 0;

    left: 0;

    width: var(--grid-left);

    transition: all .3s;

    max-height: calc(100vh - var(--grid-top));

    margin-top: var(--grid-top);

    overflow: hidden;

    background-color: #f9fbfdd1;

    backdrop-filter: blur(0.3rem);

    border-right: solid 1px var(--color-bd1);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



.admin_gnb .open_btn {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: .5rem .625rem .5rem 1.25rem;

    cursor: pointer;

}





.open_menu .admin_gnb .open_btn {

    justify-content: center;

    padding: .5rem 0;

}



.admin_gnb .open_btn p {

    font-size: .875rem;

    line-height: 1.5rem;

    color: var(--color-txt5);

}



.admin_gnb .open_btn>a svg {

    width: 1.5rem;

    height: 1.5rem;

    fill: var(--color-txt);

}



.admin_gnb .open_btn span {

    font-size: 1.5rem;

    line-height: 1.5rem;

    color: var(--color-txt5);

    font-weight: 300;

}



.admin_gnb .open_btn:hover span {

    color: var(--color-txt);

}



.admin_gnb .open_btn a {

    width: 1.5rem;

    height: 1.5rem;

    display: block;

}



.admin_gnb .menu {

    /* max-height: calc(100vh - (var(--grid-top) + 2.5625rem + 4rem)); */

    max-height: calc(100vh - (var(--grid-top) + 3.125rem + 0.5rem));

    overflow-x: hidden;

    overflow-y: auto;

    position: relative;

}



.admin_gnb .menu>ul {

    display: flex;

    position: relative;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

    gap: calc(var(--gap) / 4);

    width: 100%;

    padding: 0 .5rem 2rem 0;

}



.admin_gnb .menu>ul>li {

    width: 100%;

    position: relative;

}



.admin_gnb .menu>ul>li.on {

    color: var(--color-txt8);

    overflow: visible;

}



.admin_gnb .menu>ul>li.on:after {

    content: '';

    display: block;

    position: absolute;

    width: calc(100% + .5rem);

    height: calc(100% + 1rem);

    box-shadow: 0 0.1875rem 0.3125rem var(--color-txt2);

    background: var(--color-bg1);

    top: -.5rem;

    left: 0;

    z-index: -1;

    opacity: 1;

    transition: all .3s;

    border-radius: 0 0.4rem .4rem 0;

}







.admin_gnb .menu>ul>li.off>a+ul {

    opacity: 0;

    height: 0;

    overflow-y: hidden;

    padding-bottom: 0;

}



.admin_gnb .menu>ul>li>a,

.admin_gnb .menu>ul>li>ul>li>a {

    display: flex;

    align-items: center;

    position: relative;

    cursor: pointer;

    font-size: .875rem;

    padding: .5rem 0rem .5rem 0.7rem;

    gap: calc(var(--gap) / 2);

    overflow: hidden;

    white-space: nowrap;

    transition: none;

}



.admin_gnb .menu>ul>li>a::before {

    content: '';

    display: block;

    width: 1.5rem;

    height: 1.5rem;

    background-position: center center;

    background-size: 80% 80%;

    background-repeat: no-repeat;

}



.admin_gnb .menu>ul>li>a.dashboard::before,

.icon.dashboard {

    background-image: var(--icon-dashboard);

}



.admin_gnb .menu>ul>li>a.user::before,

.icon.user {

    background-image: var(--icon-user);

}



.admin_gnb .menu>ul>li>a.experiments::before,

.icon.experiments {

    background-image: var(--icon-experiments);

}



.admin_gnb .menu>ul>li>a.lab::before,

.icon.lab {

    background-image: var(--icon-lab);

}



.admin_gnb .menu>ul>li>a.job::before,

.icon.job {

    background-image: var(--icon-job);

}



.admin_gnb .menu>ul>li>a.community::before,

.icon.community {

    background-image: var(--icon-community);

}



.admin_gnb .menu>ul>li>a.monitoring::before,

.icon.monitoring {

    background-image: var(--icon-monitoring);

}



.admin_gnb .menu>ul>li>a.cluster::before,

.icon.cluster {

    background-image: var(--icon-cluster);

}



.admin_gnb .menu>ul>li>a.manage::before,

.icon.manage {

    background-image: var(--icon-manage);

}



.admin_gnb .menu>ul>li>a.security::before,

.icon.security {

    background-image: var(--icon-security);

}



.admin_gnb .menu>ul>li>a.common::before,

.icon.common {

    background-image: var(--icon-common);

}



.admin_gnb .menu>ul>li>a.menu::before,

.icon.menu {

    background-image: var(--icon-menu);

}



.admin_gnb .menu>ul>li>a.log::before,

.icon.log {

    background-image: var(--icon-log);

}







.open_menu .admin_gnb .menu>ul {

    padding: .5rem .5rem 2rem;

}



.open_menu .admin_gnb .menu>ul>li>a {

    padding: .375rem;

    display: flex;

    justify-content: center;

}



.admin_gnb .menu>ul>li>ul>li>a:hover {

    color: var(--color-key);

    transition: none;

}



.open_menu .admin_gnb .menu>ul>li>ul>li>a {

    height: 0;

    padding: 0;

    opacity: 0;

}





.admin_gnb .menu>ul>li>a span {

    font-size: 1.5rem;

    font-weight: 300;

    display: block;

    width: 1.5rem;

    height: 1.5rem;

}



.admin_gnb .icon {

    overflow: hidden;

    text-indent: -999em;

    background-position: center center;

    background-size: 80% 80%;

    background-repeat: no-repeat;

}





.admin_gnb .menu>ul>li>a p {

    flex: 1;

    color: var(--color-txt4)

}



.admin_gnb .menu>ul>li>a::after {

    content: '';

    background: transparent var(--indicator-arrow-up) calc(100% - .375rem) 50% / 1em 1em no-repeat;

    display: block;

    position: relative;

    width: 1.5rem;

    height: 1.5rem;

    margin-left: auto;

    margin-right: 0;

}



.admin_gnb .menu>ul>li:not(.on)>a::after {

    background-image: var(--indicator-arrow-down);

}





.admin_gnb .menu>ul>li>a.on span {

    color: var(--color-key);

}



.admin_gnb .menu>ul>li>a.on p {

    font-weight: 500;

    color: var(--color-key);

}





.admin_gnb .menu>ul>li>a+ul {

    padding-bottom: .5rem;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-items: flex-start;

    gap: calc(var(--gap) / 4);

}



.open_menu .admin_gnb .menu>ul>li>a+ul {

    padding-bottom: 0;

}





.admin_gnb .menu>ul>li ul li a p {

    padding-left: calc(1.5rem + calc(var(--gap) / 2));

}





.admin_gnb .menu>ul>li ul li.on a:before {

    background: var(--color-key);

}



.admin_gnb .menu>ul>li ul li.on a p {

    color: var(--color-key);

}



.admin_gnb .client {

    margin-top: auto;

    margin-bottom: 0;

    display: grid;

    width: 100%;

    text-indent: -999em;

    padding: 0.75rem;

    justify-content: center;

    position: relative;

}



.admin_gnb .client:before {

    content: '';

    background: var(--img-client) center center / auto 1.5rem no-repeat;

    display: block;

    width: 7rem;

    height: 1.5rem;

}



.admin_gnb .client:after {

    display: block;

    position: absolute;

    content: '';

    width: 100%;

    height: 1rem;

    top: -1rem;

    background: #0001;

    background: radial-gradient(farthest-corner at 50% 180%, #000 0%, #0001 50%, #0000 60%);

    opacity: .2;

}







.open_menu .admin_gnb .client:after {

    opacity: 0;

}





.open_menu .admin_gnb .client:before {

    width: 1.5rem;

    background-position: center left;

}



body.open_menu {

    padding-left: 60px;

}



body.open_menu .admin_gnb .menu {

    max-height: unset;

}





body.open_menu .admin_gnb .menu>ul>li>a::after,

body.open_menu .admin_gnb .menu>ul>li>a p {

    display: none;

    opacity: 0;

}



body.open_menu .admin_gnb .menu>ul>li>a span:last-child {

    display: none;

}



body.open_menu .admin_gnb .menu>ul>li ul li a p {

    display: none;

}



body.open_menu .admin_gnb .logo {

    display: none;

}



body.open_menu .admin_gnb .menu>ul>li>a p {

    display: none;

    opacity: 0;

}



body.open_menu .admin_gnb .menu>ul>li>a span:last-child {

    display: none;

}



body.open_menu .admin_gnb .menu>ul>li ul li a p {

    display: none;

}



body.open_menu .admin_gnb .logo {

    display: none;

}



body.open_menu {

    padding-left: 60px;

}



body.open_menu .admin_gnb {

    width: 60px;

}



body.open_menu .admin_gnb .open_btn p {

    width: 0;

    height: 0;

    opacity: 0;

}



body.open_menu .admin_gnb .open_btn span {

    transform: rotate(180deg);

}



body.open_menu .admin_gnb .open_btn>a>svg {

    transform: rotate(180deg);

}



body.open_menu .admin_gnb .menu>ul>li>a p {

    display: none;

    opacity: 0;

}



body.open_menu .admin_gnb .menu>ul>li>a>svg:last-child {

    display: none;

}



body.open_menu .admin_gnb .menu>ul>li ul li a p {

    display: none;

}



body.open_menu .admin_gnb .logo {

    display: none;

}



body.open_menu .admin_gnb .menu>ul>li>a p {

    display: none;

    opacity: 0;

}



body.open_menu .admin_gnb .menu>ul>li ul li a p {

    display: none;

}



body.open_menu .admin_gnb .logo {

    display: none;

}



/* <!-- GNB  */











/* breadcrumbs -- > */



.page-header {

    display: flex;

    flex-flow: row;

    align-items: flex-end;

    padding: calc(var(--gap) / 1) calc(var(--gap) * 1);

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: space-between;

}



ul.breadcrumbs {

    display: flex;

    align-items: center;

    flex-direction: row;

    justify-content: flex-start;

    gap: 1.5rem;

    white-space: nowrap;

}



ul.breadcrumbs li {

    display: block;

    position: relative;

    line-height: 1.5rem;

    font-size: .75rem;

    color: var(--color-txt7);

    text-align: left;

}





ul.breadcrumbs li:before {



    content: '';

    display: block;

    position: absolute;

    width: .5rem;

    height: .5rem;

    color: var(--color-txt5);

    border-top: solid 1px;

    border-right: solid 1px;

    top: 50%;

    left: -1rem;

    transform: translateY(-50%) rotate(45deg);

}







ul.breadcrumbs li:first-child {

    width: 1rem;

    height: 1.5rem;

    text-indent: -999em;

    overflow: hidden;

    text-align: center;

}



ul.breadcrumbs li:first-child::before {

    content: none;

}



ul.breadcrumbs li:first-child:after {

    content: '';

    display: block;

    position: absolute;

    width: 1rem;

    height: 1.5rem;

    background: var(--icon-home) center/100% no-repeat;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

}











.page-header .page-title {

    font-size: 1.5rem;

    font-weight: 600;

    line-height: 2rem;

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: calc(var(--gap) / 1);

}



.page-header .page-title span.icon {

    display: inline-block;

    width: 2rem;

    height: 2rem;

}



/* < -- breadcrumbs  */









/* layout --> */



main>.sub {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    justify-content: flex-start;

    align-items: flex-start;

    --gap: 1rem;

    padding: 0 var(--gap) calc(var(--gap) * 2);

    gap: var(--gap);

    min-width: 80rem;

}





main>.sub>section,

main>.sub .tab-content>section,

main>.sub.tab-wrapper .tab-content section.board-list-wrap,

main>.sub.tab-wrapper .tab-content section.board-detail-wrap {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

    width: 100%;

    border-radius: var(--bor);

    background: var(--color-bg1);

    box-shadow: 0 0.1875rem 0.3125rem var(--color-txt2);

}







main>.sub .tab-content>section {

    padding: var(--gap);

}





main>.sub#monitoring>section {

    width: 100%;

    overflow: hidden;

}



main>.sub#monitoring>section iframe {

    width: calc(100% + 2.9375rem);

    margin-left: -2.9375rem;

}



main>.sub#monitoring>section iframe.monitoring-dashboard {



    margin-left: 0;

}



main>.sub#monitoring>section:has(.alram) {

    padding: 3rem;

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

    align-items: stretch;

    align-content: stretch;

    /* height: 800px; */

    gap: 2rem;

}



main>.sub#monitoring>section:has(.alram) .alram-iframe-wrap {

    height: 270px;

    overflow: hidden;

}



main>.sub#monitoring>section iframe.alram {

    height: 300px;

}





#experiments-01 .board-list-wrap {

    height: unset;

}



.board-list-wrap.listonly {

    height: unset;

}





.tree-wrap,

.board-list-wrap {

    overflow: hidden;

    padding: var(--gap);

}



.tab-content .board-list-wrap,

#training-02 .board-list-wrap {

    overflow: unset;

    padding: 0;

    width: 100%;

}





.board-list-wrap .board-utility {

    display: block;

    position: relative;

    width: 100%;

}







.tab-content .board-list-wrap .board-list {

    height: unset;

    width: 100%;

}



.board-list-wrap.listonly .board-list {

    height: unset;

}



.board-detail-wrap>article {

    padding: var(--gap);

    width: 100%;



    &:has(.panel-wrap + .panel-wrap) {

        display: flex;

        flex-direction: column;

        flex-wrap: nowrap;

        align-items: flex-start;

        justify-content: flex-start;

        gap: var(--gap);

    }



    &>.header {

        display: flex;

        position: relative;

        justify-content: space-between;

        align-items: center;

        padding: calc(var(--gap) / 2) calc(var(--gap) / 1.5);

        line-height: 1.5rem;

        font-size: 1rem;

        width: 100%;

        color: var(--color-txt5);

        overflow: hidden;

        gap: var(--gap);

    }

}





main>.sub>section.tree-wrap {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: stretch;

    justify-content: space-between;

    gap: var(--gap);





}



.tree-wrap  {

    --item-h: 2.5rem;

    --h: calc( 100dvh - 11.3rem );

}

.tree-wrap * {

    user-select: none;

}

.tree-wrap:has( .utility) {

    --h: calc( 100dvh - 14.9rem );

}

.tree-wrap .utility {

    width: 100%;

}





.tree-wrap .tree-view,

.tree-wrap .content-view {

    width: calc((100% / 2) - (var(--gap) * (1 / 2)));

    overflow-x: hidden;

    border: solid 1px #0001;

    border-radius: .5rem;

}

.tree-wrap .tree-view {

    overflow-y: auto;

    max-height: var(--h);

}





summary {

    position: relative;

    cursor: pointer;

    padding-left: 1.5rem; /* 마커 공간 확보 */

    display: block;

}



summary::before {

    content: '\25B6'; /* ▶ (right-pointing triangle) Unicode character */

    position: absolute;

    left: .25rem;

    top: 0;

    font-size: .75rem;

    opacity: .2;

}



details[open]>summary::before {

    content: '\25BC'; /* ▼ (down-pointing triangle) Unicode character */

}



details details {

    padding-left: 1.5rem;

}







.tree-view summary {

    display: block;

    position: relative;

    font-size: 1rem;

    line-height:var(--item-h);

    background: transparent;

}

.tree-view summary:after {

    content: '';

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: 0;

    width: 50vw;

    height: 1px;

    background-color: #0001;

}

.tree-view summary.current:after {

    background-color: var(--color-key);

    top: 0;

    height: 100%;

    opacity: .05;

}



.tree-view details > ul {

    display: none;

}



#innerfolder {

    position: relative;

    display: block;



}

#innerfolder .current-folder {

    width: 100%;

    line-height: var(--item-h);

    position: relative;

    box-shadow: 0 4px 20px #0001;

    padding: 0 var(--gap) var(--gap);

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: calc(var(--gap) / 2) var(--gap) ;

}

#innerfolder .current-folder  .breadcrumb {

    display: flex;

    width: 100%;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: flex-start;

    align-items: center;

    gap: calc(var(--gap) * .8);

    padding: var(--gap) 0 calc(var(--gap) / 2) 0;

    font-size: .875rem;

    opacity: .5;

}

#innerfolder .current-folder  .breadcrumb li {

    position: relative;

}

#innerfolder .current-folder  .breadcrumb li::after {

    position: absolute;

    content: ' /';

    right: calc(var(--gap)* -.5);

}



#innerfolder .current-folder .folder-name {

    display: block;

    position: relative;

    font-size: 1.25rem;

    padding-left: var(--item-h);

    color: var(--color-key);

    flex: 1;



}



#innerfolder .current-folder .file-count {

    display: block;

    position: relative;

    font-size: .875rem;

    color: var(--color-key);

    text-align: right;

}



.tree-view summary .folder {

    padding-left: calc(var(--item-h));

}

.tree-view summary.current> .folder {

    color: var(--color-key)

}

.tree-view summary .folder::before,

#innerfolder .current-folder  .folder-name::before,

#innerfolder .folder::before,

#innerfolder li>a::before {

    content: '';

    position: absolute;

    left: 1rem;

    top: 50%;

    transform: translateY(-50%);

    width: calc(var(--item-h) * .75);

    height: calc(var(--item-h) * .75);

    background-repeat: no-repeat;

    background-position: center;

    background-size: 24px 24px;

}



.tree-view details > summary> .folder:before {

    left: 1.5rem;

    background-image: var(--icon-folder-close);

}



.tree-view details[open] > summary> .folder:before {

    left: 1.5rem;

    background-image: var(--icon-folder-open);

}



.tree-view details[open] > summary.current> .folder:before {

    left: 1.5rem;

    background-image: var(--icon-folder-open-current);

}





#innerfolder .current-folder  .folder-name::before {

    background-image: var(--icon-folder-open-current);

    left: 0;

}





#innerfolder li>a::before {

    background-image: var(--icon-file);

}

#innerfolder .folder::before {

    background-image: var(--icon-folder-close);

}





#innerfolder > ul {

    display: block;

    max-height: calc(var(--h) - ( var(--item-h) * 2.2));

    overflow-y: auto;

}

#innerfolder > ul li span.folder, 

#innerfolder > ul li a {

    display: block;

    width: 100%;

    position: relative;

    font-size: 1rem;

    line-height: var(--item-h);

    cursor: pointer;

    padding: 0 1rem 0 calc(var(--item-h) + 1rem);



}



#innerfolder > ul li a  {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;



}





#innerfolder > ul li a>span {

    font-size: 1rem;

    line-height: var(--item-h);

}





#innerfolder > ul li span.folder::after, 

#innerfolder > ul li a::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background: #0001;

}





#innerfolder > ul li span.folder:hover:after, 

#innerfolder > ul li a:hover:after {

    top: 0;

    width: 100%;

    height: 100%;

    opacity: .3;

}





.sub section>.header {

    display: flex;

    position: relative;

    justify-content: space-between;

    align-items: center;

    padding: calc(var(--gap) / 2) calc(var(--gap) / 1.5);

    line-height: 1.5rem;

    font-size: 1rem;

    width: 100%;

    color: var(--color-txt5);

    overflow: hidden;

    gap: var(--gap);

}



.sub section>.header button.cta {

    padding: .25rem .75rem;

    line-height: 1.5rem;

}



.sub.tab-wrapper section>.header {

    padding-left: 0;

    padding-top: 0;

}



.sub section.board-detail-wrap>.header>.row>p,

.sub section.board-detail-wrap>.header>p {

    font-size: 1rem;

    line-height: 2rem;

    font-weight: bold;

    color: var(--color-txt7);

}



.sub section>.header::after {

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 100%;

    left: 0;

    box-shadow: 0 0 .625rem var(--color-sd3);

}





.sub section>.main {

    width: 100%;

    position: relative;

    display: flex;

    flex-direction: column;

    padding: var(--gap);

    gap: var(--gap);

    flex-wrap: nowrap;

    transition: none;

}





/* <-- layout  */





/* board table -- > */





.board-list {

    width: 100%;

}







.pagination {

    border-top: solid 1px var(--color-bd1);

    padding: var(--gap) 0;

    display: flex;

    /* width: fit-content !important; */

    width: 100%;

    margin: 0 auto;

    --page: calc(var(--gap) * 1.5);

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: center;

    gap: calc(var(--gap) /4);

    font-family: Roboto;



}



.pagination button {

    display: block;

    position: relative;

    width: var(--page);

    height: var(--page);

    line-height: var(--page);

    text-align: center;

    overflow: hidden;

    color: var(--color-txt5);

    font-size: .875rem;

    border: none;

    border-radius: var(--bor);

    margin: 0;

    padding: 0;

}



.pagination button:hover {

    color: var(--color-txt);

    background-color: var(--color-sd2);

}



.pagination button:is(.page-first, .page-prev, .page-next, .page-last) {

    text-indent: -999em;

    opacity: .3;



    &::before {

        content: '';

        text-indent: 0;

        display: block;

        position: absolute;

        width: 1.5rem;

        height: 1.5rem;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        transition: all .3s;

        background-size: contain;

        background-repeat: no-repeat;

        background-position: center;

    }



    &:hover {

        background-color: unset;

        opacity: 1;

    }



    &.page-first::before {

        background-image: var(--indicator-first);

    }



    &.page-prev::before {

        background-image: var(--indicator-prev);

    }



    &.page-next::before {

        background-image: var(--indicator-next);

    }



    &.page-last::before {

        background-image: var(--indicator-last);

    }

}









.pagination button.current {

    background-color: var(--color-key);

    color: var(--color-bg1)

}





/* < -- board table  */



/* board detail --> */





/* <-- board detail  */













/* form  -->  */

.form-wrap,

.column {

    display: flex;

    position: relative;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

    width: 100%;

    gap: var(--gap);

}



#metering-billing-02 .form-wrap,

.board-list-wrap .form-wrap {

    padding-bottom: var(--gap);

}



.board-detail-wrap .form-wrap {

    padding-top: var(--gap);

}



.board-detail-wrap .panel-wrap .form-wrap {

    padding-top: 0;



    &.padding {

        padding: 0 var(--gap);

    }

}





#experiments-01 .column .form-wrap,

#experiments-01 .board-utility .form-wrap {

    padding-top: 0;

    padding-bottom: 0;

}



.column-row {

    flex-direction: row !important;

    gap: var(--gap);

}



.row {

    display: block;

    position: relative;

    width: 100%;

}



.column .row {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: flex-start;

    align-items: center;

    gap: var(--gap);

}





.form-wrap .row {

    display: flex;

    justify-content: space-between;

    gap: var(--gap);

}



.row.left {

    justify-content: flex-start;

}





dl.panel.w50+.column.w50 {

    padding-left: var(--gap);



    &::before {

        left: 0;

    }

}



/*

.column.w50:nth-child(even):before {

    content: '';

    position: absolute;

    display: block;

    width: 1px;

    height: 100%;

    background: var(--color-bd1);

    top: 0;

    left: calc(var(--gap) * -1);

} */



#inter-06 .panel-wrap,

#inter-05 .form-wrap,

#training-05 .form-wrap,

#training-07 .form-wrap,

#training-08 .panel-wrap,

.board-utility .form-wrap {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    /* align-items: flex-start; */

}





.form-wrap .notice {

    font-size: .875rem;

    width: fit-content;

    color: var(--color-txt6);

    display: block;

    position: absolute;

    top: 0;

    right: 0;

}



span.require {

    display: inline-block;

    position: relative;

    overflow: hidden;

    width: 1em;

    text-indent: -999em;

    text-align: left;

}



span.require:after {

    content: '';

    display: block;

    position: absolute;

    top: 0.25rem;

    left: 0;

    width: .3125rem;

    height: .3125rem;

    background: var(--color-alert);

    border-radius: 50%;

}



.form-wrap fieldset {

    display: flex;

    position: relative;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    --gap: .5rem;

    gap: var(--gap);

    width: 100%;





    &:has(.working-time) {

        & .working-time {

            display: flex;

            flex-direction: row;

            flex-wrap: wrap;

            align-items: center;

            justify-content: flex-start;

            gap: var(--gap);



            & label {

                width: unset;

            }



            & input[type=number] {

                width: 4rem;

                min-width: 4rem;

                max-width: 36.6rem;

                padding-left: .5rem;

                padding-right: .5rem;

                font-family: monospace;

            }



        }

    }

}





.board-utility .form-wrap .row fieldset {

    width: fit-content;

    margin-left: auto;

    margin-right: 0;



    &.cta,

    &.total,

    &.filter {

        margin-left: 0;

        /* margin-right: auto; */

    }



    &.daterange,

    &.search {

        flex-direction: row;

        justify-content: flex-end;

        margin-left: auto;

        margin-right: 0;

    }



    &.total+.cta {

        margin-left: auto;

        margin-right: 0;

    }



    &.daterange+fieldset.search {

        margin-left: 0;

    }

}



.form-wrap .row fieldset,

.row.left fieldset {

    width: unset;

}



/*

.board-utility .form-wrap fieldset {

    width: unset;

} */





.daterange {

    position: relative;



    & .datepick {

        width: 10rem;

    }



    & .dp__input_wrap>div {

        width: 100%;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

    }



    & svg.dp__input_icon {

        display: block;

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

    }

}



.dp__instance_calendar button[type=button] {

    width: unset;

    min-width: unset;

    border: none !important;

    display: inline-block;

}





.board-utility .form-wrap fieldset.daterange label {

    font-size: .75rem;

    line-height: 2.375rem;

    min-width: unset;

    padding: 0 1em;

    border: none;

    background: var(--color-sd8);

    color: var(--color-bg1)

}







.form-wrap fieldset legend {

    display: flex;

    position: relative;

    font-size: 1rem;

    line-height: 2.375rem;

    height: 2.375rem;

    color: var(--color-txt5);

    white-space: nowrap;

    margin-bottom: calc(var(--gap)/ 2);

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: calc(var(--gap) / 2);

}



.form-wrap fieldset legend:has(p.info) {

    justify-content: space-between;

    width: 100%;



    & p.info {

        color: var(--color-alert);



        &::before {

            content: '\24D8';

            padding-right: .5em;

        }



        & .version {

            font-family: monospace;

            font-weight: bold;

        }

    }

}





.form-wrap fieldset.require legend:after {

    content: '';

    display: block;

    position: absolute;

    top: .2rem;

    left: calc(100% + 0.2rem);

    width: .3125rem;

    height: .3125rem;

    background: var(--color-alert);

    border-radius: 50%;

}



dd fieldset.require legend:after {

    content: '';

    display: inline-block;

    position: relative;

    top: -0.4rem;

    left: 0.3rem;

    width: .3125rem;

    height: .3125rem;

    background: var(--color-alert);

    border-radius: 50%;

}



.form-wrap fieldset legend .code {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: calc(100% + 2rem);

    color: var(--color-txt7);

    font-size: .875rem;

    opacity: .6;

    font-style: italic;

    font-family: monospace;

}





.form-wrap fieldset.vertical {

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    width: unset;

}



.form-wrap fieldset.horizontal {

    align-items: flex-start;

    padding-top: 2rem;

    padding-bottom: 2rem;

    padding-left: 16rem;

    border-bottom: solid 1px var(--color-bd1);

}



.form-wrap fieldset.horizontal:last-child {

    border-bottom: none;

}





.form-wrap fieldset.horizontal>legend {

    position: absolute;

    top: 0;

    left: 0;

}



.form-wrap fieldset.horizontal>legend .code {

    top: 1.5rem;

    transform: unset;

    left: 0;

    bottom: unset;

}



.form-wrap fieldset.horizontal fieldset {

    font-size: .875rem;

    position: absolute;

    z-index: +1;

    top: 3rem;

    left: 0;

    overflow: hidden;

    overflow-y: auto;

    height: calc(100% - 3.3rem);

}



.form-wrap fieldset.horizontal>select[name=containner-image] {

    margin-top: -2rem;

    width: calc((100% / 3) - (var(--gap) * (2 / 3)));

}

 ul.note {

    display: flex;

    position: relative;

    width: 100%;

    height: fit-content;

    padding: 1rem;

    background: var(--color-bd1);

    border-radius: var(--bor);

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: stretch;

    gap: .5rem;

    list-style: disc;



    & > li {

        list-style: inherit;

        margin-left: 1.5rem;

        line-height: 1.3em;

        font-size: .875rem;

        color: var(--color-warning);



        & strong {

            font-weight: bold;

            

        }

    }

}



.form-wrap fieldset.horizontal .figure-wrap {

    display: flex;

    flex-flow: wrap;

    align-items: flex-start;

    justify-content: flex-start;

    width: 100%;

    gap: var(--gap);

    margin-top: -2rem;

}



.form-wrap fieldset p.location {

    line-height: 2rem;

    font-family: monospace;

    padding: .25rem .5rem;

    width: 100%;

    background-color: var(--color-sd9);

    color: var(--color-bg1);

    border: none;

    border-radius: var(--bor);

}



.form-wrap fieldset p.desc {

    font-size: .875rem;

    line-height: 1.5rem;

    padding-bottom: .5rem;

    color: var(--color-alert);

    font-weight: 400;

}





.figure-wrap .tag-list {

    display: flex;

    position: relative;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    gap: calc(var(--gap) /2);

}



.figure-wrap figure {

    /* width: 100%; */

    border-radius: var(--bor);

    box-shadow: 0 0 .5rem var(--color-sd3);

    text-align: left;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

    gap: calc(var(--gap) /3);

    transition: all .3s;

    cursor: pointer;

}



.figure-wrap.software figure {

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    height: 6rem;



}



.figure-wrap figure:hover {

    box-shadow: var(--hover-bs);

}



.figure-wrap figure {

    width: calc((100% / 4) - (var(--gap) * (3 / 4)));

    position: relative;

}







.figure-wrap figure.current {

    border: solid 1px var(--color-key-t);

    box-shadow: 0 0 1.25rem var(--color-key-t);

    background: var(--color-key-t);

}







.figure-wrap figure .img-wrap {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-bg0);

    overflow: hidden;

}



.figure-wrap figure.current .img-wrap {

    background: var(--color-key-t);

}



.figure-wrap.software figure .img-wrap {

    width: calc((100% / 3) - (var(--gap) * (2 / 3)));

    height: 6rem;

}





.figure-wrap figure .img-wrap img {

    width: auto;

    height: 8.5rem;

    display: block;

    position: relative;

    filter: drop-shadow(0 0 2px var(--color-bg1));

    object-fit: contain;

    margin: -1rem;

}



.figure-wrap.software figure .img-wrap img {

    width: 4rem;

    height: auto;

}



.figure-wrap figure figcaption {

    padding: var(--gap);

    max-width: 100%;

}



.figure-wrap figure.current figcaption dl {

    color: var(--color-txt);

}



.figure-wrap figure figcaption dl {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

    gap: calc(var(--gap) / 4);

    color: var(--color-txt7);

    min-width: 100%;

}



.figure-wrap figure figcaption dl dt {

    font-size: 1rem;

    line-height: 1.7rem;

    font-weight: 600;

    display: block;

}



.figure-wrap figure figcaption dl dd {

    font-size: .875rem;

    line-height: 1.125rem;

    white-space: nowrap;

    overflow: hidden;

    display: block;

    max-width: 100%;

    text-overflow: ellipsis;

}



.figure-wrap figure figcaption dl dd.location {

    font-weight: 400;



}



figure.containner-image:has(.info-tooltip) {

    & .info-tooltip {

        position: absolute;

        display: none;

        width: calc(100% + 2rem);

        left: 60%;

        top: calc(100% + 1rem);

        transform: translateX(-50%);



        background: #fff;

        padding: 1rem;

        font-size: .875rem;

        box-shadow: var(--hover-bs);

        border-radius: var(--bor);

        z-index: +100;



        &::before {

            content: '';

            display: block;

            position: absolute;

            top: -20px;

            left: 1rem;

            width: 0px;

            height: 0px;

            border-style: solid;

            border-width: 0 12px 20.8px 12px;

            border-color: transparent transparent #fff transparent;

            transform: rotate(0deg);

        }



        & dl {

            display: flex;

            flex-direction: column;

            flex-wrap: nowrap;

            align-items: flex-start;

            justify-content: flex-start;

            gap: calc(var(--gap));



            & dt {

                font-weight: 600;

            }



            & dd {

                color: var(--color-txt5);

            }

        }

    }



    &:hover .info-tooltip {

        display: block;

    }

}











.board-detail-wrap textarea,

.form-wrap fieldset textarea {

    width: 100%;

    white-space: pre;

    font-size: .875rem;

    line-height: 1rem;

    padding: var(--gap);

    min-height: 10rem;

    height: 100%;

    overflow: auto;

    font-family: monospace;

    letter-spacing: 0.01em;

    resize: none;

    border-radius: var(--bor);

    margin: .0;

    border: solid 1px var(--color-key);

}





.form-wrap fieldset textarea::placeholder {

    color: var(--color-txt7);

    font-size: .875rem;

    opacity: .6;

    font-style: italic;

    font-family: monospace;

}



.column.w50:has( fieldset.script ) {

    height: calc(var(--fhd-h) - 19.4rem);

    align-items: stretch;

}

fieldset.script {

    display: flex;

    align-items: stretch;

    gap: var(--gap);

    flex-direction: column;

    flex-wrap: nowrap;

    width: 100%;

    flex: 1;

    justify-content: space-between;

    overflow: hidden;

}

fieldset.script + fieldset.script {

    flex: unset;

}

/* fieldset.script:has( .location) {} */



fieldset.script .script-wrap {

    width: 100%;

    min-height: 10rem;

    flex: auto;

    position: relative;

}



fieldset.script pre.script-overwrap {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    white-space: pre;

    font-size: .875rem;

    line-height: 1rem;

    background: #fff;

    padding: var(--gap);

    height: 10rem;

    overflow: auto;

    font-family: monospace;

    letter-spacing: 0.01em;

    resize: none;

    border-radius: var(--bor);

    margin: .0;

    border: solid 1px var(--color-alert);

    z-index: +1;

}



pre.script-overwrap em {

    color: var(--color-alert);

}



pre.script-overwrap input[type="text"] {

    line-height: 1rem;

    font-size: .875rem;

    padding: 0;

    height: unset;

    display: inline-block;

    width: unset;

    min-width: unset;

}



/*

pre.script-overwrap input[type="text"]:invalid {

    color: var(--color-alert);

}



pre.script-overwrap input[type="text"]:valid {

    color: var(--color-alert);

}



pre.script-overwrap em:has(input[type="text"]:valid) {

    color: var(--color-posi1);

} */





fieldset.script:has(pre.script-overwrap input[type="text"]:user-valid) pre {

    display: none;

}





.form-wrap fieldset textarea.code {

    max-height: calc(var(--fhd-h) - 20rem);

    flex: 1;

}



#training-07 .form-wrap fieldset textarea.code {

    height: 29.7rem;

}



.form-wrap fieldset textarea:disabled {

    background-color: var(--color-sd9);

    color: var(--color-bg1);

    border: none;

}



textarea.fullh {

    height: calc(100% - 2rem);

}



.script-wrap .code strong {

    color: var(--color-dark-strong, #c8ff00);

    font-weight: bold;

}







.tab-title {

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--color-txt7);

    line-height: 1.75rem;

}



.form-wrap.column-row,

.panel-wrap {

    display: flex;

    position: relative;

    flex-direction: column;

    flex-wrap: wrap;

    align-items: stretch;

    justify-content: flex-start;

    gap: var(--gap);

    width: 100%;

}



.panel-wrap+.panel-wrap {

    padding-top: calc(var(--gap) * 2);



    &::before {

        content: '';

        display: block;

        position: absolute;

        width: 100%;

        height: 1px;

        background: var(--color-bd1);

        left: 0;

        top: calc(var(--gap) * .5);

    }

}



#metering-billing-01 .panel-wrap {

    flex-direction: row;

}









#job-list-02 .script-wrap {

    width: 100%;

}











/* panel styling --> */



dl.panel {

    display: flex;

    position: relative;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: flex-start;

    font-size: 1rem;

    line-height: 1.75rem;

    color: var(--color-txt7);

    gap: calc(var(--gap) / 2);

    padding: calc(var(--gap) / 2) var(--gap) var(--gap);

    width: 100%;

    border-radius: var(--bor);

    background: var(--color-bg1);

    box-shadow: 0 0.1875rem 0.3125rem var(--color-txt2);

    z-index: 0;

    /* padding-top: calc(2.25rem + calc(var(--gap) / 4)); */

    align-content: flex-start;



    &:hover {

        box-shadow: var(--hover-bs);

    }



    & dt {



        &::before {

            content: '';

            color: var(--color-sd5);

            display: block;

            position: absolute;

            top: -0.0935rem;

            left: -0.425rem;

            width: 0;

            height: 0;

            border-left: solid 0.725rem transparent;

            border-bottom: solid .725rem;

            border-right: solid .725rem transparent;

            transform: rotate(-45deg);

        }



        &>p {

            font-size: 1rem;

            line-height: 2rem;

            font-weight: 400;

        }



        & a.view-more {

            display: block;

            position: absolute;

            cursor: pointer;

            width: 1.5rem;

            height: 1.5rem;

            overflow: hidden;

            text-indent: -999em;

            opacity: 0.3;

            top: 0.3rem;

            right: 0.4rem;



            &::before {

                content: 'open_in_new';

                display: block;

                position: absolute;

                font-family: 'Material Symbols Outlined';

                text-indent: 0;

                width: 1.5rem;

                height: 1.5rem;

                font-size: 1.25rem;

                line-height: 1.5rem;

                text-align: center;

                font-weight: 300;

            }



            &:hover {

                opacity: .8;

            }

        }

    }



    & dd {

        position: relative;

        font-size: .875rem;

        line-height: 1.75rem;

        padding-left: 1rem;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: flex-start;

        justify-content: flex-start;

        min-height: 1.75rem;

        gap: calc(var(--gap) / 2);

        width: 100%;



        &:has(pre, textarea) {

            flex-direction: column;

            flex-wrap: nowrap;

            align-items: flex-start;



            & .item-content {

                display: block;

                width: 100%;

            }



        }



        &:has(p.warning) {

            padding-left: 0;

            margin-top: 2rem;



            &::before {

                content: none;

            }

        }



        &::before {

            content: "";

            position: absolute;

            width: 0.25rem;

            height: 0.25rem;

            background: var(--color-key);

            top: 0.7rem;

            left: 0px;

            border-radius: 50%;

        }

        &.input::before {

            top: 1.05rem;

        }



        &.table {

            padding-left: 0;

            overflow: hidden;



            &>* {

                width: 100%;

            }



            & .pinned {

                width: 100%;

            }

        }



        &.content pre {

            width: 100%;

            white-space: pre-line;

            font-size: .875rem;

            line-height: 1.5rem;

            background: var(--color-sd1);

            color: var(--color-txt);

            padding: var(--gap);

            height: unset;

            max-height: 10rem;

            overflow: auto;

            font-family: inherit;

            letter-spacing: 0;

            resize: none;

            border-radius: var(--bor);

            margin: .0;

            /* border: solid 1px var(--color-bd1); */

        }



        &.input textarea {

            width: 100%;

            white-space: pre-line;

            font-size: .875rem;

            line-height: 1.5rem;

            background: var(--color-sd1);

            color: var(--color-txt);

            padding: var(--gap);

            height: unset;

            max-height: 10rem;

            overflow: auto;

            font-family: inherit;

            letter-spacing: 0;

            resize: none;

            border-radius: var(--bor);

            margin: .0;

            border: solid 1px var(--color-bd1);

            height: 10rem;

            max-height: unset;



            &:read-only,

            &:disabled {

                border: none !important;

            }

        }



        &.input.reply textarea {

            height: 28.4rem;

        }



        &.input fieldset {

            display: flex;

            flex-direction: row;

            align-items: center;

            justify-content: flex-start;

            flex-wrap: wrap;

            gap: calc(var(--gap) / 2);

            width: 100%;



            & legend {

                position: relative;

                font-size: inherit;

                padding: 0;

                line-height: 1.75rem;

                color: var(--color-txt7);

            }



            & input[type="text"] {

                width: 100%;

            }

        }



        &.table::before {

            content: none;

        }

    }



    & dd.file,

    dd.download {

        padding-left: 0;

        color: var(--color-key);

    }



}



input.editor:read-only,

input.editor:disabled,

textarea.editor:read-only,

textarea.editor:disabled,

dl.panel dd.input input:read-only,

dl.panel dd.input input:disabled,

dl.panel dd.input textarea:read-only,

dl.panel dd.input textarea:disabled {

    border: none !important;

}



#user-02 .w60 dl.panel {

    height: 23.25rem;

}





/* <-- panel styling */







/* Message styling --> */





p.warning,

p.empty-message,

p.noresult-message,

.alert p,

p.alert {

    ---color: var(--color-alert);

    color: var(---color);

    display: block;

    position: relative;

    text-align: left;

    padding: var(--gap);

    padding-left: 3rem;

    width: 100%;

    border-radius: var(--bor);

    border: solid 1px;

    line-height: 1.375rem;

}



p.warning {

    --color: var(--color-warning);

    border: none;

}



p.noresult-message,

p.empty-message {

    --gap: 1rem;

    text-align: center;

    padding: calc(var(--gap) * 4) 0 calc(var(--gap) * 1);

}



.tablewrap p.noresult-message,

.tablewrap p.empty-message {

    height: 18rem;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: center;

}





.tablewrap p.noresult-message::before,

.tablewrap p.empty-message:before {

    top: calc(50% - (var(--gap) * 3));

}





.pinned .tablewrap p.empty-message {

    height: calc(var(--h) - 9.5625rem);

}





p.noresult-message {

    ---color: var(--color-key);

}



p.noresult-message::before,

p.warning::before,

p.empty-message:before,

.alert p:before,

p.alert:before {

    content: 'error';

    text-indent: 0;

    font-size: 2rem;

    width: 1em;

    height: 1em;

    left: .5rem;

    top: 50%;

    transform: translateY(-50%);

    padding: 0;

    margin: 0;

    display: flex;

    position: absolute;

    color: inherit;

    font-family: 'Material Symbols Outlined';

    font-weight: normal;

    font-style: normal;

    line-height: inherit;

    letter-spacing: normal;

    text-transform: none;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-smoothing: antialiased;

    align-items: center;

    justify-content: center;

}



p.warning:before {

    content: 'warning';

}



p.noresult-message::before,

p.empty-message:before {

    content: 'data_alert';

    top: var(--gap);

    left: 50%;

    transform: translate(-50%, calc(var(--gap) * -.5));

    font-size: 3rem;

}



p.noresult-message::after,

p.warning::after,

p.empty-message:after,

.alert p:after,

p.alert::after {

    content: '';

    position: absolute;

    display: block;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(---color);

    opacity: .1;

}







p.noresult-message button {

    display: block;

    position: relative;

    margin: 0 auto;

    margin-top: 2rem;

    z-index: +10;

}









p.notice {



    color: var(--color-alert);

    margin-bottom: calc(var(--gap) / 2);





}



/* <--  Message styling */



dl.panel dd.process,

dl.panel dd.file {

    width: 100%;

    display: block;

}





data.price:after,

.form-wrap input[type="text"].price:after {

    content: '원';

    display: inline-block;

    padding-left: .25em;

}



data.price.about:before {

    content: '약';

    display: inline-block;

    padding-right: .25em;

}





dl.panel dd.file img {

    width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

}





dl.panel dd.file .file-name,

dl.panel dd.file .file-info {

    position: relative;

    display: inline-block;

    line-height: 1.75rem;

    height: 1.75rem;

}



dl.panel dd.file .file-link {

    display: flex;

    width: fit-content;

    height: fit-content;

    position: relative;

    z-index: +10;

    color: inherit;

    border-color: var(--color-key);

    padding: 0.5rem 0.75rem .5rem 0;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    gap: 1rem;

    cursor: pointer !important;

    pointer-events: auto !important;

}









dl.panel dd.file .file-name {

    padding-left: 2rem;

}





.file-name.qdrep {

    background: var(--icon-file-qdrep) center left / auto 100% no-repeat;

}





dl.panel dd.alert::before,

dl.panel dd.file::before,

dl.panel dd.process::before,

dl.panel dd.download::before,

dl.panel dd.description::before {

    content: none;

}



dl.panel dd.description {

    padding-left: 0;

}



dl.panel dd.description>p {

    color: var(--color-key);

    margin-bottom: calc(var(--gap) / 2);

    display: block;

    width: 100%;

    position: relative;

    word-break: keep-all;

    font-size: .875rem;

    line-height: 1.5rem;

    background: var(--color-sd2);

    padding: 1rem;

    padding-left: 2rem;

    border-radius: var(--bor);

}



dl.panel dd.description>p::before {

    content: '※';

    display: block;

    position: absolute;

    width: fit-content;

    height: 1.5rem;

    background: none;

    top: 1rem;

    line-height: 1.5rem;

    left: 1rem;

}



dl.panel dd.description table {

    border: none;

    border-top: 1px solid var(--color-key);

    border-bottom: 1px solid var(--color-key);

    margin-bottom: 1rem;



    & tr {

        border-bottom: solid 1px var(--color-bd1);



        & th:first-child {

            border-right: solid 1px var(--color-bd1);

        }

    }



    & thead th {

        color: var(--color-txt4);

    }



    & tbody {

        & tr:last-child {

            border-bottom: none;

        }

    }



    & th,

    td {

        padding: .125rem;

    }



    & td {

        text-align: left;

        padding-left: 1em;

    }

}





dl.panel em {

    color: var(--color-posi3);

    font-style: italic;

    ;

}



span.item-title,

dl.panel dd .item-title {

    display: inline-block;

    position: relative;

    min-width: 6.75rem;

    line-height: inherit;

    color: var(--color-txt5);

}



#user-04 .panel-wrap dl .item-title,

#user-01 .panel-wrap dl:nth-child(2) .item-title {

    min-width: 12rem;

}





div[jobreqtypcd="INTERACTIVE"] {

    & .item-title {

        min-width: 8.6rem !important;

    }

}



div[jobreqtypcd="TRAINING"] {

    & .item-title {

        min-width: 8.6rem !important;

    }

}



dl.panel dd .item-title.require {

    overflow: unset;

    width: unset;

    text-indent: inherit;

    text-align: unset;

}



dl.panel dd .item-title.require:after {

    content: '';

    display: inline-block;

    position: relative;

    top: -0.4rem;

    left: 0.3rem;

    width: .3125rem;

    height: .3125rem;

    background: var(--color-alert);

    border-radius: 50%;

}











span.item-content,

dl.panel dd .item-content {

    font-size: 1rem;

    color: var(--color-txt);

    line-height: 1.75rem;

    flex: 1;



    & pre.script {

        white-space: pre;

        font-size: .875rem;

        line-height: 1rem;

        padding: var(--gap);

        height: 10rem;

        overflow: auto;

        font-family: monospace;

        letter-spacing: 0.01em;

        resize: none;

        border-radius: var(--bor);

        margin: .0;

        border: solid 1px var(--color-bd1);

        color: var(--color-txt7);

        background: var(--color-sd1);



        &.preline {

            white-space: pre-line;

        }

    }

}

ul.agreement {

    display: flex;

    position: relative;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    flex-wrap: nowrap;

    gap: calc(var(--gap) / 2);

    list-style: disc;



    &>li {

        display: flex;

        position: relative;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: center;

        justify-content: flex-start;

        gap: var(--gap);

        padding-left: 1.25rem;



        &::before {

            content: '';

            display: block;

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            left: .25rem;

            width: .5rem;

            height: .5rem;

            border-radius: 50%;

            background: var(--color-sd5);

        }



        &>span {

            display: block;

            line-height: 1.75rem;

            font-size: .875rem;

            color: var(--color-sd5);



            &.title {

                color: var(--color-txt)

            }



            &.code::before {

                content: '/ ';

            }



            &.daterange {

                &::before {

                    content: '[';

                }



                &::after {

                    content: ']';

                }

            }

        }



    }

}



p.guide {

    display: block;

    position: relative;

    color: var(--color-alert);

    padding: .5rem;

    padding-left: 1.875rem;

    line-height: 1.7em;

    overflow: hidden;

    border-radius: var(--bor);

    z-index: 0;

    & > em {

        position: relative;

        display: inline-block;

        padding: .23em .5em;

        background: var(--color-bg1);

        color: var(--color-bd2);

        border-radius: var(--bor);

        z-index: +1;

        font-family: monospace;

    }



    &::before {

        content: '※ ';

        position: absolute;

        top: 0.4rem;

        left: 0.7rem;

    }



    &::after {

        content: '';

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        background: var(--color-alert);

        opacity: .1;

        z-index: -1;

    }

}

ul.guide {

    display: flex;

    position: relative;

    width: 100%;

    color: var(--color-alert);

    padding: 1rem;

    overflow: hidden;

    border-radius: var(--bor);

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: stretch;

    gap: .5rem;

    & li {

        display: block;

        position: relative;

        padding-left: 1.25rem;

        &::before {

            content: '※ ';

            display: block;

            position: absolute;

            left: 0;

        }

    }



    &::after {

        content: '';

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        background: var(--color-alert);

        opacity: .1;

    }

}





dl.panel dd p.guide {

    margin-left: auto;

    margin-right: 0;

}



dl.panel dd:has(textarea) {

    &:not(fieldset) {

        align-items: flex-start;





        .item-content {

            display: block;

            width: 100%;



            textarea {

                width: 100%;

                white-space: pre;

                font-size: .875rem;

                line-height: 1rem;

                background: var(--color-sd1);

                padding: var(--gap);

                height: 12rem;

                overflow: auto;

                font-family: monospace;

                letter-spacing: 0.01em;

                resize: none;

                border-radius: var(--bor);

                margin: .0;

                border: solid 1px var(--color-bd1);

            }

        }

    }

}



dl.panel:has(.item-title.require+.item-content>em):before {

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    box-shadow: 0 0 1.25rem var(--color-alert);

    opacity: .3;

    z-index: -1;

}



dl.panel:has(.item-title.require + .item-content>em) dt::before {

    color: var(--color-alert);

    /* border-color: var(--color-alert); */

    /* border-top: solid 2px var(--color-alert); */

}



.item-title.require+.item-content>em {

    color: var(--color-alert);

    font-style: italic;

    ;

}



dl.panel .btn-wrap {

    display: flex;

    position: relative;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    gap: var(--gap);

    padding: calc(var(--gap) / 4) 0 calc(var(--gap) / 2);

    width: 100%;

}





dl.panel button[type="button"] {

    font-size: .875rem;

    line-height: 1.25rem;

    height: 2rem;

    padding: .2rem .5rem;

    /* opacity: .4; */

}



dl.panel .form-wrap .row button[type="button"] {

    padding: .375rem 1.25rem;

    line-height: 1.75rem;

    height: unset;

}



dl.panel button[type="button"]:hover {

    opacity: 1;

}



dl.panel dd .noti {

    display: block;

    position: relative;

    flex: 1;



    color: var(--color-alert);

    padding-left: 1.25rem;

    line-height: 1.75rem;

    &:before {

            content: '※ ';

            display: block;

            position: absolute;

            left: 0;

    }

}



dl.panel dd .item-content + .noti {

    width: 100%;

    margin-left: calc((var(--gap) / 2) + 6.75rem);

    margin-bottom: calc((var(--gap) / 2));

    flex: unset;

    margin-top: calc(var(--gap) * -.5);

}





/* GPU 프로파일링 절차 안내 --> */

dl.panel dd.process {

    padding-left: 0;

    overflow-x: auto;

}



ol.process-diagram {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: space-between;

    align-items: flex-start;

    --gap: 1.5rem;

    gap: var(--gap);

    z-index: 0;

    transition: none;

    padding-left: 7rem;

    position: relative;

    width: 100%;

    min-width: 45rem;

    margin: 0 auto;



    &::before {

        content: '';

        position: absolute;

        display: block;

        background: var(--icon-data-science) center/ contain no-repeat;

        width: 4rem;

        height: 4rem;

        left: 0rem;

        top: calc(2.75rem + var(--gap));

        z-index: +10;

    }



    &::after {

        :after {

            content: '';

            color: var(--color-sd4);

            display: block;

            position: absolute;

            top: .5rem;

            right: calc(var(--gap) * (-2 / 3));

            transform: translateY(-50%);



            width: 0;

            height: 0;

            border-left: solid 1rem transparent;

            border-right: solid 1rem;

            border-bottom: solid 1rem transparent;

            transform: rotate(45deg);

        }

    }



    &>li,

    li>ol {

        display: flex;

        position: relative;

        flex-direction: column;

        flex-wrap: nowrap;

        align-items: center;

        justify-content: flex-start;

        gap: var(--gap);

        z-index: 0;

    }



    &>li {

        width: calc((100% / 3) - (var(--gap) * (3/4)));



        &:nth-child(1) {

            --obj-color: var(--color-posi3);



            &>ol::before {

                height: 0;

                width: calc(var(--gap) * 2.2);

                left: calc(var(--gap) * -2.2);

            }

        }



        &:nth-child(2) {

            --obj-color: var(--color-posi2);

        }



        &:nth-child(3) {

            --obj-color: var(--color-key);



            &>ol>li:last-child::after {

                content: none;

            }

        }



        &:last-child::after {

            content: none;

        }



        &>p {

            text-align: center;

            font-size: 1.25rem;

            line-height: 1.25rem;

            font-weight: 800;

            color: var(--obj-color);

        }

    }



    &>li>ol {

        width: 100%;



        &::before {

            content: '';

            display: block;

            position: absolute;

            width: calc(var(--gap) * .5);

            height: calc(100% - (var(--gap) + 32px));

            border-style: solid;

            border-width: 4px 0 0 4px;

            left: calc((var(--gap) * -.5) - 3px);

            top: calc((60px / 2) - 2px);

            border-color: var(--color-bd2);

        }



        &>li {

            width: 100%;

            position: relative;



            &::before,

            &::after {

                content: '';

                position: absolute;

            }



            &::before {

                width: 0;

                height: 0;

                border-style: solid;

                border-width: 10px 6.5px 0 6.5px;

                border-color: var(--color-bd2) transparent transparent transparent;

                background: none;

                transform: rotate(0deg);

                left: 50%;

                top: 0;

                transform: translate(-50%, -50%);

                z-index: +1;

            }



            &:first-child::before {

                border-width: 6.5px 0 6.5px 10px;

                border-color: transparent transparent transparent var(--color-bd2);

                top: 50%;

                left: 0;

            }



            &::after {

                width: .25rem;

                height: var(--gap);

                left: calc(50% - .125rem);

                bottom: calc(var(--gap) * -1);

                background: var(--color-bd2);

            }



            &:last-child::after {

                width: calc(var(--gap) * 0.5);

                height: .25rem;

                bottom: unset;

                top: calc(50% - .125rem);

                left: unset;

                right: calc(var(--gap) * -0.5);

            }



            &>p {

                max-width: 16rem;

                height: 3.75rem;

                display: flex;

                justify-content: center;

                align-items: center;

                padding: 1.8em 1em;

                border-radius: var(--bor);

                font-size: .875rem;

                line-height: 1.375rem;

                color: var(--color-bg1);

                background: var(--obj-color);

                text-align: center;

            }

        }

    }

}





/* <-- GPU 프로파일링 절차 안내 */



input:disabled {

    background: var(--color-sd3);

    color: var(--color-txt4);

}





button,

.btn p,

fieldset input[type=text],

.form-wrap input[type=text],

.form-wrap input[type=search],

.form-wrap input[type=date],

.form-wrap input[type=datetime],

.form-wrap input[type=year],

.form-wrap input[type=month],

.form-wrap input[type=number],

.form-wrap input[type=time],

.form-wrap input[type=email],

.form-wrap input[type=password],

.form-wrap input[type=button],

.form-wrap button[type=button],

.radio-wrap>input[type=radio]+label,

.file-upload+label,

.form-wrap select,

dl.panel select {

    font-size: 1rem;

    position: relative;

    margin: 0;

    padding-block: 0;

    padding-inline: 0;

    outline: none;

    padding: .375rem 1.25rem;

    line-height: 1.75rem;

    border: solid 1px var(--color-bd-input, #0002);

    border-radius: var(--bor);

}



.form-wrap .agreement-num input[type=number] {

    width: 20rem;

}



.form-wrap input[type=button],

.form-wrap button[type=button],

.radio-wrap>input[type=radio]+label {

    cursor: pointer;

}



input.editor:read-only {

    border: none !important;

    background: var(--color-sd1);

}



textarea.editor {

    white-space: pre-line !important;



    &:read-only,

    &:disabled {

        border: none !important;

    }

}



input[type="text"].affinity {

    width: 8rem !important;

}



.file-upload+label {

    cursor: pointer;

    /* width: 5.5rem; */

    text-align: center;

}



.w50 input[type=text],

.w50 input[type=date],

.w50 input[type=datetime],

.w50 input[type=email],

.w50 select {

    width: 80%;

}



.board-detail-wrap .daterange input[type=date],

.board-detail-wrap .daterange input[type=datetime] {

    width: 12rem;

}





.w50 input[type=text].file-upload {

    width: calc(80% - 5.5rem - var(--gap));

}



.file-upload+label+input[type="file"] {

    position: absolute;

    width: 0;

    height: 0;

    padding: 0;

    overflow: hidden;

    border: 0;

}



ul.file-list {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-items: flex-start;

    gap: var(--gap);

    width: 100%;



    & li {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: center;

        gap: var(--gap);



        & button {

            opacity: .6;

            filter: saturate(0);

        }



        &:hover button {



            opacity: 1;

            filter: saturate(1);



        }

    }

}



.f-column {

    flex-direction: column !important;

    flex-wrap: nowrap !important;

    align-items: flex-start !important;

}







select:disabled {

    background: var(--color-sd2) var(--indicator-arrow-down) calc(100% - .375rem) 50% / 1em 1em no-repeat !important;

    color: var(--color-txt5);

}





button[type='button'] {

    --bt-color: var(--color-txt);

    color: var(--bt-color);

    border-color: var(--bt-color);

}





input[type="search"] {

    min-width: 12rem;

    padding-right: 2rem !important;

}



input[type="search"]+button[type=button] {

    margin-left: calc((var(--gap) + 2.5rem) * -1);

    border: none;

    overflow: hidden;

    text-align: left;

    text-indent: -999em;

    width: 2rem;

    position: relative;

}



input[type="search"]+button:before {

    content: '';

    width: 100%;

    height: 100%;

    left: 0;

    padding: 0;

    margin: 0;

    display: flex;

    position: absolute;

    background: var(--icon-search) center/1.5rem no-repeat;

}



input[type="search"]:focus+button:before {

    color: var(--color-key);

}



input[type="date" i]::-webkit-calendar-picker-indicator {

    background-image: var(--indicator-calendar);

    padding: 0;

    block-size: 1.5rem;

    inline-size: 1.5rem;

}



.daterange div:has(>svg.dp__input_icon) {

    width: 1.5rem;

    height: 1.5rem;

    background: var(--indicator-calendar) center / 100% no-repeat;

    top: calc(50% - 0.725rem);

    left: .25rem;

    opacity: 0.4;



    & svg {

        stroke: transparent;

        fill: transparent;

    }



}





input[type=radio],

input[type=checkbox] {

    display: none;

}



label:has(input[type=checkbox]),

label:has(input[type=radio]),

input[type=radio]+label,

input[type=checkbox]+label {

    display: block;

    position: relative;

    opacity: .7;

    font-size: inherit;

    line-height: inherit;

    padding: inherit;

    padding-left: 2em;

    color: var(--color-txt7);

    width: fit-content;

    height: inherit;

    cursor: pointer;

}



label:has(input[type=radio]):hover,

label:has(input[type=checkbox]):hover,

input[type=radio]+label:hover,

input[type=checkbox]+label:hover {

    opacity: 1;

}



label:has(input[type=radio])::before,

label:has(input[type=checkbox])::before,

input[type=radio]+label::before,

input[type=checkbox]+label::before {

    content: 'done';

    display: block;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: var(--color-txt3);

    background-color: var(--color-sd3);

    width: 1.25em;

    height: 1.25em;

    line-height: 1.25em;

    text-align: center;

    border-radius: var(--bor);

    position: absolute;

    font-family: 'Material Symbols Outlined';

    font-weight: normal;

    font-style: normal;

    font-size: 1em;

    letter-spacing: normal;

    text-transform: none;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-smoothing: antialiased;

}



label:has(input[type=radio])::before,

input[type=radio]+label::before {

    border-radius: 50%;

}





input#idsave[type=checkbox]+label:before {

    left: 0.6rem;

}



label:has(input[type=checkbox]:checked)::before,

input[type=radio]:checked+label,

input[type=checkbox]:checked+label {

    opacity: 1;

    color: var(--color-txt);

}



label:has(input[type=checkbox]:checked)::before,

input[type=radio]:checked+label:before,

input[type=checkbox]:checked+label:before {

    background-color: var(--color-key);

    color: var(--color-bg1);

    font-weight: bold;

}



:is(textarea, input[type=text],

    input[type=search],

    input[type=date],

    input[type=number],

    input[type=time],

    input[type=password]):not(:read-only, :disabled):focus {

    border-color: var(--color-key) !important;

    box-shadow: 0 0 .5rem #d8d1ff;

    outline: none;

    background: var(--color-bg1);

}



:is(textarea, input[type=text],

    input[type=search],

    input[type=date],

    input[type=number],

    input[type=time],

    input[type=password]):is(:read-only, :disabled):focus {

    outline: none;

}





/*

textarea:focus,

.form-wrap input[type=text]:focus,

.form-wrap input[type=search]:focus,

.form-wrap input[type=date]:focus,

.form-wrap input[type=number]:focus,

.form-wrap input[type=time]:focus,

.form-wrap input[type=password]:focus {}



textarea:read-only:focus {

    box-shadow: none;

} */



.without_ampm::-webkit-datetime-edit-ampm-field {

    display: none;

}



input[type=time]::-webkit-clear-button,

input[type=time]::-webkit-calendar-picker-indicator {

    -webkit-appearance: none;

    -moz-appearance: none;

    -o-appearance: none;

    -ms-appearance: none;

    appearance: none;

    display: none;

}









input.without_ampm {

    width: 7rem !important;

}









dl.panel select,

.form-wrap select {

    -webkit-appearance: none;

    -moz-appearance: none;

    -o-appearance: none;

    -ms-appearance: none;

    appearance: none;

    background: transparent var(--indicator-arrow-down) calc(100% - .375rem) 50% / 1em 1em no-repeat;

    padding-right: 2rem;

    cursor: pointer;

}





.form-wrap input::placeholder {

    display: block;

    position: absolute;

    top: 50%;

    left: 1rem;

    transform: translateY(-50%);

    font-size: 12px;

    color: var(--color-sd5);

    transition: transform .3s;

    opacity: 1;

}







.form-wrap input:focus::placeholder {

    transform: translateY(-300%);



}





.form-wrap input[type=text]#comment {

    width: 20rem;

}





.radio-wrap>input[type=radio] {

    display: none;

}



.checkbtn-wrap>input[type=checkbox]+label,

.radio-wrap>input[type=radio]+label {

    display: block;

    position: relative;

    color: var(--color-key);

    /* border-color: var(--color-key); */

    border-radius: var(--bor);

    border: 1px solid;

    cursor: pointer;

    opacity: .5;

    padding: .375rem .75rem;

    line-height: 1.75rem;

    min-width: 8rem;

    text-align: center;

    height: unset;

    white-space: nowrap;

}



.radio-wrap>input[type=radio]+label:before,

.checkbtn-wrap>input[type=checkbox]+label::before {

    content: none;

}



.checkbtn-wrap>input[type=checkbox]+label:hover,

.radio-wrap>input[type=radio]+label:hover {

    opacity: 1;

}



.checkbtn-wrap>input[type=checkbox]:checked+label,

.radio-wrap>input[type=radio]:checked+label {

    background-color: var(--color-key);

    color: var(--color-bg1);

    opacity: 1;



    &::before {

        content: none;

    }

}

.checkbtn-wrap>input[type=checkbox]:checked:disabled+label,

.radio-wrap>input[type=radio]:checked:disabled+label {

    background-color: var(--color-sd5);

}



#experiments-01 .radio-wrap>input[type=radio]+label {

    width: 15rem;

    overflow: hidden;

    text-overflow: ellipsis;

}



.input-wrap {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    gap: var(--gap);

}



.input-wrap>label {

    min-width: 5rem;

    background: var(--color-txt4);

    color: var(--color-bg1);

    display: block;

    border-radius: var(--bor);

    white-space: nowrap;

    padding: .6875rem;

}



.w50 .input-wrap>label+input,

.input-wrap>label+input {

    width: 60%;



}



.table-wrap {

    width: 100%;

    margin-top: var(--gap);

}







button::before,

button:after {

    content: '';

    display: block;

    position: absolute;

    top: 50%;

    right: .5em;

    transform: translateY(-50%);

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    display: block;



    font-family: 'Material Symbols Outlined';

    font-weight: normal;

    font-style: normal;

    font-size: inherit;

    line-height: 1;

    letter-spacing: normal;

    text-transform: none;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-smoothing: antialiased;

}



button::before {

    right: unset;

    left: .5em;

}



button.reset {

    --bt-color: var(--color-key);

    background: var(--color-bg1);

    padding-left: 2em !important;



    &:before {

        content: 'restart_alt';

    }

}



button.cta.connect,

button.cta.link,

button.cta.download,

button.cta.copy {

    --bt-color: var(--color-key);

    padding-right: 2em !important;

}



button.cta.connect {

    width: 9rem;

    text-align: left;

}



button.link:after {

    content: 'open_in_new';

    content: '';

    background: var(--bt-color) var(--icon-viewmore-trans) center / contain no-repeat;

    width: 1rem;

    height: 1rem;

}



button.link,

button.download,

button.download.cta {

    padding-right: 2em !important;

    --bt-color: var(--color-key);

}



button.download:after {

    content: 'download';

}







button.copy:after {

    content: 'content_copy';

}



button.connect:after {

    content: 'conversion_path';

}



button.add,

button.delete {

    background: #fff;

    padding-left: 2em !important;

    border-color: var(--bt-color) !important;

}



button.add {

    --bt-color: var(--color-key);



}



button.delete {

    --bt-color: var(--color-warning);

}











button.cta.excel {

    padding-left: 2.5em !important;

    opacity: 1;

}



button.excel:after {

    content: '';

    background-image: var(--icon-excel);



    right: unset;

    left: .5em;

    width: 1.3rem;

    height: 1.3rem;

}



button.add:before {

    background-image: var(--icon-add);

    background-color: var(--bt-color);

    width: 1rem;

    height: 1rem;

}



button.add:after {

    content: none;

}



button.delete:before {

    content: 'delete';

}



button.excel:hover,

button.add:hover {

    opacity: 1;

}





button.help,

button.erase {

    padding: 0;

    border: none;

    overflow: hidden;

    text-indent: -999em;

    line-height: unset;

    width: 2.375rem;

    height: 2.375rem;

}



button.help::before,

button.erase::before {

    text-indent: 0;

    font-size: 1.5rem;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    padding: 0;

    opacity: .5;

}



button.help:hover:before,

button.erase:hover::before {

    opacity: .8;

}



button.erase::before {

    content: 'ink_eraser';

}





button.help::before {

    content: 'help';

}











button.cta.sub {

    --bt-color: var(--color-posi1);

}





button.cta {

    --bt-color: var(--color-key);

    color: var(--color-bg1);

    border-color: var(--bt-color);

    background: transparent;

    z-index: 0;

    transition: all .3s;

    /* padding: .25rem .75rem !important; */

    &::before {

        content: '';

        display: block;

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        transform: none;

        background: var(--bt-color);

        z-index: -1;

        opacity: .7;

        transition: all .3s;

    }

    &:hover {

        background: var(--bt-color);

        &::before {

            box-shadow: 0 0 .875rem var(--bt-color);

            opacity: .5;

        }

    }

    &:disabled {

        cursor:default;

        opacity: 1;

        &::before {

            background: var(--color-sd5);

            opacity: 1;

        }

        &:hover {

            background: inherit;

            opacity: 1;

            &::before {

                box-shadow: none;

                opacity: inherit;

            }

        }

    }

}









/* button.cta.cancel, */

button.cta.delete {

    --bt-color: var(--color-warning);

    padding: .375rem 1.25rem !important;

}



button.cta.reset {

    --bt-color: var(--color-key) !important;

    padding: .375rem 1.25rem !important;

    color: var(--color-key);

    background: var(--color-bg1) !important;

    margin-left: auto;

    margin-right: 0;



    &::before,

    &::after {

        content: none;

    }

}





button.cta.cancel {

    --bt-color: var(--color-bd2);

}







.foot-cta,

.foot-nav {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-start;

    gap: var(--gap);

    width: 100%;

}



.foot-nav>button {

    display: none !important;

}



.foot-nav>button.active {

    display: flex !important;

}



.panel-wrap .foot-cta {

    padding-top: var(--gap);

    width: 100%;

    border-top: 1px solid var(--color-bd1);

}





button.next,

button.prev {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: center;

    gap: calc(var(--gap) / 4);

    --bt-color: var(--color-key);

    background: var(--color-bg1);

}



button.next {

    padding-right: 1.5rem;

}



button.prev {

    padding-left: 1.5rem;

}



button.next:after,

button.prev:after {

    content: '';

    display: block;

    position: absolute;

    width: .5rem;

    height: .5rem;

    color: var(--color-key);

    background: var(--color-bg1);

    border-top: solid 2px;

    border-right: solid 2px;

    top: 50%;

    right: .5rem;

    transform: translateY(-50%) rotate(45deg);

}



button.prev:after {

    right: unset;

    left: .5rem;

    transform: translateY(-50%) rotate(-135deg);

}





button.submit {

    --bt-color: var(--color-key);

    background-color: var(--bt-color);

    color: var(--color-bg1);

    padding: .25rem 1.75rem;

}





/* <-- form   */





/* popup --> */

dialog.popup {

    display: none;

}





dialog.popup[open] {

    border: none;

    width: fit-content;

    height: fit-content;

    max-width: 80vw;

    min-width: 30rem;

    max-height: 80vh;

    overflow: hidden;

    margin: auto;

    font-size: 1rem;

    display: block;

    padding: 0;

    /*

    padding: var(--gap);

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    align-items: flex-start;

    transition: none;



    gap: calc(var(--gap) * 2); */



    &>header,

    &>main,

    &>menu {

        display: flex;

        position: relative;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        padding: var(--gap);

    }



    &>header {

        border-bottom: solid 1px var(--color-key);



        & p {

            display: block;

            font-size: 1.25rem;

            line-height: 1.25rem;

            font-weight: 600;

            color: var(--color-txt);

        }

    }





    & button.close {

        cursor: pointer;

        pointer-events: all;

        position: relative;

        overflow: hidden;

        display: block;

        margin: 0;

        padding: 0;

        width: 1.5rem;

        height: 1.5rem;

        text-indent: -999em;

        z-index: +1;

        border: none;



        &:before,

        &:after {

            content: "";

            display: block;

            position: absolute;

            width: 1rem;

            height: 2px;

            background: var(--color-key);

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%) rotate(-45deg);

        }



        &:after {

            transform: translate(-50%, -50%) rotate(45deg);

        }

    }



    /*

    &>menu::after,

    &>header::after {

        content: '';

        position: absolute;

        width: calc(100% + 2rem);

        height: 1px;

        background: var(--color-key);

        left: calc((var(--gap)) * -1);

        bottom: calc((var(--gap)) * -1);

    } */



    &>menu::after {

        bottom: unset;

        top: calc((var(--gap)) * -1);

    }



    &>main {

        flex-direction: column;

        flex-wrap: nowrap;

        justify-content: flex-start;

        align-items: flex-start;

        gap: var(--gap);

        max-height: calc(80vh - 41px - 58px);

        overflow-y: auto;



        & .tablewrap table.inner {

            & tbody {

                display: block;

                max-height: calc(80vh - 203px);

                overflow-y: auto;

                scrollbar-width: none;

                -ms-overflow-style: none;

            }

        }



        & table {

            table-layout: auto;



            &.inner {

                & tr {

                    width: 100%;



                    & th,

                    td {

                        min-width: unset;



                        &:has(>label) {

                            padding: 0;

                        }



                        &:has(>input[type=checkbox]+label),

                        &:has(>input[type=radio]+label) {

                            padding: .625rem .625rem;



                            & input[type=radio]+label,

                            & input[type=checkbox]+label {

                                width: 1.25rem;

                                height: 1.25rem;

                                padding: 0;

                                margin: 0 auto;

                            }

                        }



                        & label {

                            display: block;

                            padding: .625rem .625rem;

                            overflow: hidden;

                            text-overflow: ellipsis;

                            cursor: pointer;

                        }





                    }

                }

            }



        }

    }



    &>menu {

        display: flex;

        justify-content: center;

        gap: var(--gap);

    }



    &::backdrop {

        background: var(--color-sd6);

        backdrop-filter: grayscale(1);

        -webkit-backdrop-filter: grayscale(1);

        cursor: pointer;

        pointer-events: all;



    }

}

dialog.popup#dataset-update {

    width: 50rem;

    overflow: visible;

    border-radius: 1rem;

    & > header {

        padding: 1rem 2rem;

        & button.close {

            position: absolute;

            top: 0;

            right: -3rem;

            width: 3rem;

            height: 3rem;

            &:before,

            &:after {

                width: 2rem;

                background: var(--color-bg1);

            }

        }

    }

    & > main {

        padding: 1rem 2rem;

        & .notice {

            top: 1rem;

            right: 2rem;

        }

    }

}





/* <-- popup */













/* Login --> */



body:has(.login-pf-header, .register-ip),

body.sign-in {

    margin: 0;

    padding: 0;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    position: relative;

    display: grid;

    justify-content: center;

    align-items: center;

}



body:has(.login-pf-header, .register-ip):before,

body.sign-in::before {

    content: '';

    display: block;

    position: absolute;

    width: 110%;

    height: 110%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: var(--img-login) center center /cover no-repeat;

    /* filter: blur(0.4rem) brightness(1) contrast(0.4); */

    filter: blur(2px);

    z-index: -1;

    opacity: .1;

}



body:has(.login-pf-header) {

    & .alert-error {

        display: flex;

        position: fixed;

        z-index: +100;

        background: #917bfff0;

        color: #fff;

        padding: 2rem;

        border-radius: 2rem;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        flex-wrap: nowrap;

        gap: 1rem;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        box-shadow: 0 0 1rem #0005;



        & .pf-c-alert__icon {

            font-size: 3rem;

            text-shadow: 0 0 3px #0005;

        }



        & .pf-c-alert__title {

            display: block;

            max-width: 20em;

            text-align: center;

            font-size: 1.2rem;

            line-height: 1.5em;

        }

    }



    & .card-pf {

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        margin: unset !important;

        padding: unset !important;



        & .login-pf-header {

            display: none;

        }

    }



    & .login-pf-page-header {

        display: none;

    }



    & #kc-content-wrapper {

        & .alert-info {

            color: var(--color-key);

            background-color: var(--color-key-t);

            border: none;

            padding: 1rem;

            border-radius: .5rem;

            margin-bottom: 1rem;

            display: flex;

            flex-direction: row;

            flex-wrap: wrap;

            align-items: flex-start;

            justify-content: flex-start;

            gap: .5rem;

        }

    }

}













.admin_login {

    display: flex;

    background: var(--color-bg1);

    box-shadow: 1.25rem 1.25rem 3.75rem #bebebe, -1.25rem -1.25rem 3.75rem #ffffff;

    border-radius: 1rem;

    overflow: hidden;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -ms-user-select: none;

    user-select: none;



    &>.row {

        display: flex;

        position: relative;

        flex-direction: column;

        justify-content: space-between;

        align-items: center;

        padding: var(--grid-top) var(--grid-top) calc(var(--grid-top) * 1.7);

        width: 22.5rem;

        height: 32.5rem;

        margin: 0;

        flex-wrap: nowrap;

        -webkit-animation: 1.5s cubic-bezier(0.65, 0.05, 0.56, 0.84) 0s 1 login-set;

        animation: 1.5s cubic-bezier(0.65, 0.05, 0.56, 0.84) 0s 1 login-set;



        &::after {

            content: '';

            background: var(--img-client) center center / auto 1.5rem no-repeat;

            display: block;

            width: 7rem;

            height: 1.5rem;

            position: absolute;

            bottom: 2rem;

        }



        &>.head {

            width: 100%;



            &>.logo {

                display: block;

                position: relative;

                width: 100%;

                height: 1rem;

                background: var(--img-logo) center left /contain no-repeat;



                & img {

                    display: none;

                }



                & p {

                    overflow: hidden;

                    text-indent: -999em;

                    width: 0;

                    height: 0;



                }

            }

        }



        &>.body {

            display: flex;

            flex-direction: column;

            align-items: center;

            flex-wrap: nowrap;

            justify-content: flex-start;

            gap: var(--gap);



            &>form {

                display: flex;

                flex-direction: column;

                align-items: center;

                flex-wrap: nowrap;

                justify-content: flex-start;

                gap: var(--gap);

            }





            & .in,

            .form-group {

                display: flex;

                width: 100%;

                flex-direction: row;

                flex-wrap: wrap;

                align-items: center;

                justify-content: space-between;

                margin: 0;

            }



            & input[type=text],

            input[type=password] {

                position: relative;

                width: 100%;

                outline: none;

                -webkit-appearance: none;

                appearance: none;

                background: var(--color-bd1);

                color: var(--color-key);

                border: solid 1px var(--color-bd1);

                line-height: 2rem;

                padding: .5rem 1rem;

                border-radius: var(--bor);

                overflow: hidden;

                font-family: monospace;

                transition: all .3s;

                font-weight: 600;

                overflow: hidden;





                &::placeholder {

                    display: block;

                    position: absolute;

                    top: 50%;

                    left: 1rem;

                    transform: translateY(-50%);

                    font-size: 12px;

                    color: var(--color-sd5);

                    transition: all .3s;

                    opacity: 1;

                }



                &:focus {

                    background: var(--color-bg1);



                    &::placeholder {

                        transform: translateY(-300%);

                        opacity: 0;





                    }

                }

            }



            & .check,

            .forgot-pass {

                display: block;

                position: relative;

                font-size: .875rem;

                font-weight: 400;

                line-height: 1.74rem;

            }





            & .check>input#rememberMe {

                display: none;



                &+label {

                    position: relative;

                    padding-left: 1.6rem;

                    cursor: pointer;

                    color: var(--color-txt5);

                }

            }



            & .login-pf-settings a,

            .forgot-pass {

                color: var(--color-key);

                font-size: .875rem;

                font-weight: 400;

                line-height: 1.74rem;

            }



            & .button {

                display: block;

                width: 100%;

                background: var(--color-key);

                font-weight: 600;

                color: var(--color-bg1);

                font-size: 1rem;

                cursor: pointer;

                position: relative;

                margin: 0;

                padding-block: 0;

                padding-inline: 0;

                outline: none;

                line-height: 1.75rem;

                padding: .25rem .75rem;

                height: 2.375rem;

                border: solid 1px var(--color-bd-input, #0002);

                border-radius: var(--bor);

            }



            &:disabled {

                opacity: .6;

                background: var(--color-sd5);

            }

        }



        & .info {

            display: block;

            position: relative;

            padding-left: 1.25rem;

            color: var(--color-sd5);

            word-break: keep-all;



            & .mso,

            .material-symbols-outlined {

                position: absolute;

                display: block;

                top: 0;

                left: 0;

                font-size: .875rem;

                width: 1.25rem;

                line-height: 1.25rem;

                height: 1.25rem;

                text-align: center;

                overflow: clip;

                color: transparent;



                &::before {

                    content: '\24d8';

                    color: var(--color-sd5);

                }

            }



            & p {

                font-size: .75rem;

                line-height: 1.25rem;

                margin: 0;

            }

        }



    }



    & .bg_img {

        display: block;

        position: relative;

        width: 45rem;

        height: 32.5rem;

        background: var(--img-login) no-repeat;

        background-size: cover;

        background-position-x: center;

        border-radius: 1rem;

        box-shadow: 1.25rem 1.25rem 3.75rem #000, -1.25rem -1.25rem 3.75rem #FFFFFF;

        z-index: +1;

        overflow: hidden;

    }

}



.admin_login .row::before {

    display: none;

    content: none;

}









@-webkit-keyframes login-set {

    0% {

        margin-left: -22.5rem;

    }



    100% {

        margin-left: 0vh;

    }

}



@keyframes login-set {

    0% {

        margin-left: -22.5rem;

    }



    100% {

        margin-left: 0vh;

    }

}









input#rememberMe+label::before,

input#rememberMe+label::after {

    content: '';

    display: block;

    position: absolute;

    top: 50%;

    left: 0;

    width: 1rem;

    height: 1rem;

    line-height: 1rem;

    text-align: center;

    overflow: hidden;

    transform: translatey(-50%);

}



input#rememberMe+label::before {

    border: solid 1px var(--color-txt5);

    border-radius: var(--bor);

}



input#rememberMe:checked+label {

    color: var(--color-key);

}



input#rememberMe:checked+label::before {

    background: var(--color-key);

    border: solid 1px var(--color-key);

}





input#rememberMe:checked+label::after {

    border-right: solid 2px #fff;

    border-bottom: solid 2px #fff;

    transform: rotate(40deg);

    width: 0.3rem;

    height: 0.5rem;

    line-height: unset;

    z-index: +1;

    top: 0.46rem;

    left: 0.37rem;

}





.admin_login .bg_img:after {

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 2.7rem;

    background: var(--img-logo) center center /contain no-repeat;

    filter: saturate(0) brightness(20) drop-shadow(10px 10px 16px #000);

    bottom: 1.5rem;

    right: 0rem;

    opacity: 0.3;

    -webkit-animation: 1.5s cubic-bezier(0.65, 0.05, 0.56, 0.84) 0s 1 login-set2;

    animation: 1.5s cubic-bezier(0.65, 0.05, 0.56, 0.84) 0s 1 login-set2;

}



@-webkit-keyframes login-set2 {

    0% {

        transform: translateX(100%);

        opacity: 0;

    }



    100% {

        transform: translateX(0%);

        opacity: .3;

    }

}



@keyframes login-set2 {

    0% {

        transform: translateX(100%);

        opacity: 0;

    }



    100% {

        transform: translateX(0%);

        opacity: .3;

    }

}









.register-ip,

div:has(>#kc-header) {

    --gap: 2rem;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-start;

    gap: var(--gap);

    background: var(--color-bg1);

    box-shadow: 1.25rem 1.25rem 3.75rem #bebebe, -1.25rem -1.25rem 3.75rem #ffffff;

    border-radius: 1rem;

    padding: 3rem 4rem;

}



div:has(.card-pf>#kc-content>#kc-content-wrapper>#kc-form>.admin_login) {

    --gap: unset;

    display: unset;

    background: unset;

    box-shadow: unset;

    border-radius: unset;

    padding: unset;



    & #kc-header {

        display: none;

    }

}







#kc-header {

    display: block;

    width: 100%;



}



#kc-header-wrapper {

    --logo: url('data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0ODYgNTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4NiA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzM2MTdDRTt9DQoJLnN0MXtmaWxsOiNBREFEQUQ7fQ0KPC9zdHlsZT4NCjxnPg0KCTxyZWN0IHg9IjEuMDQiIHk9IjEuMzUiIGNsYXNzPSJzdDAiIHdpZHRoPSI0NS4yOCIgaGVpZ2h0PSIxMS4zNiIvPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTcuMTgsMTYuMjcgMTcuMTgsNDkuMzUgMzAuMTksNDkuMzUgMzAuMTksMjIuNzggCSIvPg0KPC9nPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTg2Ljk5LDM0LjMzbC0xLjkzLDcuODVoLTkuNGw5Ljg2LTMzLjdoMTIuMTFsMTAuMTgsMzMuN2gtOS44M2wtMi4xOS03Ljg1SDg2Ljk5eiBNOTQuNTUsMjcuNjVsLTEuNTktNi4wNQ0KCQljLTAuNTItMS45LTEuMTctNC42Mi0xLjctNi42aC0wLjFjLTAuNSwxLjk4LTEsNC43My0xLjUsNi42NGwtMS40Niw2LjAxQzg4LjIsMjcuNjUsOTQuNTUsMjcuNjUsOTQuNTUsMjcuNjV6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTEyMS4yMyw4LjQ4djMzLjdoLTkuMDdWOC40OEgxMjEuMjN6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE2Mi45Miw0MS4zMWMtMS4yOSwwLjYzLTQuNTEsMS40MS04LjYsMS40MWMtMTIuNzIsMC0xOC4zMS03Ljg1LTE4LjMxLTE2LjgzYzAtMTEuODcsOC43Ni0xNy45MywxOC45MS0xNy45Mw0KCQljMy45MiwwLDcuMTIsMC43Myw4LjU1LDEuNTJsLTEuNzgsNy4xMmMtMS40OS0wLjYyLTMuNjItMS4yMy02LjM1LTEuMjNjLTUuMjMsMC05Ljc3LDMuMDYtOS43Nyw5Ljk0YzAsNi4wOCwzLjY4LDkuOTEsOS45NCw5LjkxDQoJCWMyLjIzLDAsNC43Mi0wLjQzLDYuMTQtMC45OEwxNjIuOTIsNDEuMzF6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE2Ny4zNCw2LjY1aDkuMDd2MzUuNTNoLTkuMDdWNi42NXoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjA3LjMsMjkuNjNjMCw4Ljg4LTYuMzksMTMuMTEtMTMuMzksMTMuMTFjLTcuMzksMC0xMy4xOC00LjY3LTEzLjE4LTEyLjY4YzAtNy43OCw1LjE3LTEzLjAzLDEzLjY1LTEzLjAzDQoJCUMyMDIuMTQsMTcuMDMsMjA3LjMsMjIuMjMsMjA3LjMsMjkuNjN6IE0xOTAuMDksMjkuODdjMCwzLjY3LDEuMjMsNi40OSw0LjA1LDYuNDljMi40NSwwLDMuODEtMi41MiwzLjgxLTYuNDkNCgkJYzAtMy40MS0xLjEyLTYuNDYtMy44My02LjQ2QzE5MS4xMiwyMy40MSwxOTAuMDksMjYuNjYsMTkwLjA5LDI5Ljg3eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yMzYuMDcsMzMuNzljMCwzLjQ5LDAuMSw2LjMyLDAuMiw4LjM5aC03LjgxbC0wLjQtMy4yNmgtMC4xOGMtMC44NywxLjMxLTMuMDQsMy44MS03LjUyLDMuODENCgkJYy01LjUxLDAtOC43OC0zLjU0LTguNzgtMTAuNjZ2LTE0LjVoOS4wN3YxMy4wNGMwLDMuMTQsMS4wNCw0Ljg2LDMuMTksNC44NmMxLjcyLDAsMi41OS0xLjE5LDIuOTUtMi4xMg0KCQljMC4xNy0wLjM2LDAuMjItMC44MSwwLjIyLTEuMzFWMTcuNThoOS4wN3YxNi4yMUgyMzYuMDd6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI2Ni44Niw2LjY1djI3Ljc2YzAsMy4wNiwwLjEsNi4xOCwwLjIsNy43N2gtOC4wNGwtMC4zNi0zLjM1aC0wLjFjLTEuNjUsMi44LTQuNjcsMy45LTcuNSwzLjkNCgkJYy01Ljc0LDAtMTAuNTYtNC45Mi0xMC41Ni0xMi42OWMtMC4wNC04LjI3LDUuMjMtMTMuMDIsMTEuMDgtMTMuMDJjMi43NCwwLDUuMDEsMC43Nyw2LjEzLDIuMzhoMC4xVjYuNjVIMjY2Ljg2eiBNMjU3LjgsMjguMjUNCgkJYzAtMC4zNiwwLTAuNzgtMC4wNi0xLjE2Yy0wLjMzLTEuNzUtMS43MS0zLjE3LTMuNjItMy4xN2MtMy4wNiwwLTQuNDMsMi43LTQuNDMsNS45MWMwLDMuNzUsMS44Nyw1LjcyLDQuMzksNS43Mg0KCQljMS44NiwwLDMuMjgtMS4zMiwzLjU5LTIuOTljMC4xMS0wLjUxLDAuMTMtMS4wOCwwLjEzLTEuNjZMMjU3LjgsMjguMjVMMjU3LjgsMjguMjV6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTMxMS40NywzMC4wN2MtMC4xMS0zLjg2LTAuMTktOC4zOC0wLjE4LTEzLjcxaC0wLjE0Yy0xLjA1LDQuNTItMi41LDkuNTctMy42MSwxMy4zM2wtMy4zNywxMS44aC03LjExDQoJCWwtMi44NC0xMS43NmMtMC44OC0zLjY4LTEuOTItOC42OS0yLjcyLTEzLjM3aC0wLjFjLTAuMTksNC43OS0wLjM2LDkuODUtMC41MSwxMy43MWwtMC41MSwxMi4xMWgtOC4zN2wyLjA2LTMzLjdoMTIuMjlsMi4yMyw5LjAyDQoJCWMwLjkzLDMuNzQsMS45Myw4LjIyLDIuNjQsMTIuMzdoMC4xOGMwLjk1LTQuMTMsMi4wOS04LjkxLDMuMDktMTIuNDRsMi41NC04Ljk0aDEybDEuNjcsMzMuN2gtOC44M0wzMTEuNDcsMzAuMDd6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTM0MC4yNyw0Mi4xOWwtMC40OC0yLjE2aC0wLjE4Yy0xLjcyLDEuOTgtNC4xOSwyLjcxLTYuODUsMi43MWMtNS4wNiwwLTguMTgtMy42NC04LjE4LTcuNzMNCgkJYzAtNi42LDUuOTItOS41NSwxNC4zOC05LjU2di0wLjIyYzAtMS0wLjc1LTIuMDktNC4wNi0yLjA5Yy0yLjYyLDAtNS4zOSwwLjk0LTYuOTksMS44NWwtMS41OC01LjczYzEuNTgtMC44NCw1LjEtMi4yMywxMC4yMy0yLjIzDQoJCWM4LjQ3LDAsMTEuNDYsNC42NywxMS40NiwxMC44NXY4LjMxYzAsMi40NiwwLjE0LDQuNzYsMC40LDZIMzQwLjI3eiBNMzM5LjI1LDMwLjk2Yy0zLjcyLDAuMDEtNS43OSwxLjAzLTUuNzksMy4xNg0KCQljMCwxLjU2LDEuMDIsMi4zNiwyLjU3LDIuMzZjMS4zLDAsMi43LTAuOTMsMy4xMS0yLjNjMC4xLTAuMzcsMC4xMS0wLjgzLDAuMTEtMS4yN0wzMzkuMjUsMzAuOTZMMzM5LjI1LDMwLjk2eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zNTMuNjMsMjUuOThjMC0zLjMtMC4xLTYuMTMtMC4yLTguMzloNy44MWwwLjQsMy4xNWgwLjE4YzAuODgtMS4yNSwzLjI0LTMuNyw3LjQyLTMuNw0KCQljNS43NCwwLDguOTMsMy45LDguOTMsMTAuNjd2MTQuNDhoLTkuMDdWMjguODVjMC0yLjg2LTAuOTktNC41NC0zLjE2LTQuNTRjLTEuNzgsMC0yLjU4LDEuMjQtMywyLjE5Yy0wLjIsMC40NS0wLjI1LDEuMTUtMC4yNSwxLjgNCgkJdjEzLjloLTkuMDdWMjUuOThIMzUzLjYzeiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zOTguMDIsNDIuMTlsLTAuNDgtMi4xNmgtMC4xOGMtMS43MiwxLjk4LTQuMTksMi43MS02Ljg1LDIuNzFjLTUuMDYsMC04LjE4LTMuNjQtOC4xOC03LjczDQoJCWMwLTYuNiw1LjkyLTkuNTUsMTQuMzgtOS41NnYtMC4yMmMwLTEtMC43NS0yLjA5LTQuMDYtMi4wOWMtMi42MiwwLTUuMzksMC45NC02Ljk5LDEuODVsLTEuNTgtNS43M2MxLjU4LTAuODQsNS4xLTIuMjMsMTAuMjMtMi4yMw0KCQljOC40NywwLDExLjQ2LDQuNjcsMTEuNDYsMTAuODV2OC4zMWMwLDIuNDYsMC4xNCw0Ljc2LDAuNCw2SDM5OC4wMnogTTM5NywzMC45NmMtMy43MiwwLjAxLTUuNzksMS4wMy01Ljc5LDMuMTYNCgkJYzAsMS41NiwxLjAyLDIuMzYsMi41NywyLjM2YzEuMywwLDIuNy0wLjkzLDMuMTEtMi4zYzAuMS0wLjM3LDAuMTEtMC44MywwLjExLTEuMjdMMzk3LDMwLjk2TDM5NywzMC45NnoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNDM2LDE3LjU4Yy0wLjExLDEuNDktMC4yMSwzLjU4LTAuMjEsNy41OHYxMy40MWMwLDQuMy0wLjg2LDguMzktMy44NiwxMS4wMWMtMi44NCwyLjQxLTYuNjMsMy4wNi0xMC40NiwzLjA2DQoJCWMtMy40LDAtNi45LTAuNjYtOS4yLTEuODVsMS43LTYuODNjMS41MSwwLjgzLDQuMzIsMS44MSw3LjE1LDEuODFjMy4yMSwwLDUuNzctMS43Miw1Ljc3LTUuNTd2LTEuMDloLTAuMQ0KCQljLTEuNTEsMS45LTMuNzUsMi43OC02LjIsMi43OGMtNi4wNCwwLTEwLjQ1LTQuNzYtMTAuNDUtMTEuOTZjMC03Ljc2LDUuMDItMTIuOTIsMTEuMjUtMTIuOTJjMy4wNSwwLDUuMDgsMS4xOCw2LjQsMy4xOWgwLjENCgkJbDAuMjgtMi42M0w0MzYsMTcuNThMNDM2LDE3LjU4eiBNNDI2LjczLDI3Ljc5YzAtMC4zOC0wLjAzLTAuODEtMC4xMS0xLjE0Yy0wLjQxLTEuODEtMS41OS0yLjg1LTMuMjQtMi44NQ0KCQljLTIuMTUsMC00LjA1LDIuMDYtNC4wNSw2YzAsMy4xNSwxLjU0LDUuNTIsNC4wNiw1LjUyYzEuNjcsMCwyLjg4LTEuMTQsMy4xOS0yLjQ4YzAuMTMtMC41MywwLjE2LTEuMywwLjE2LTEuODh2LTMuMTdINDI2LjczeiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00NDguNzQsMzMuMDVjMC4yOSwxLjk0LDMuMTYsMy4wMiw2LjM0LDMuMDJjMi4zNCwwLDQuNTQtMC4yNSw2LjgxLTAuOTZsMS4xNCw2LjA0DQoJCWMtMywxLjE5LTYuMjMsMS41Ni05LjI4LDEuNTZjLTguNzIsMC0xMy42NC00Ljc5LTEzLjY0LTEyLjU4YzAtNS42NSwzLjY1LTEzLjExLDEyLjgzLTEzLjExYzguMDQsMCwxMS40Myw1LjkxLDExLjQzLDEyLjYxDQoJCWMwLDEuNDgtMC4xOCwyLjgxLTAuMzMsMy40MUw0NDguNzQsMzMuMDVMNDQ4Ljc0LDMzLjA1eiBNNDU2LjA0LDI2LjkyYzAtMS4zOS0wLjY3LTMuOTktMy41Mi0zLjk5Yy0yLjY5LDAtMy43NCwyLjQ0LTMuODksMy45OQ0KCQlINDU2LjA0eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00NjguNDgsMjUuOWMwLTMuOTYtMC4wNi02LjI4LTAuMi04LjMyaDcuNzRsMC4zMiw0LjQ3aDAuMmMxLjMyLTMuNzYsNC40Ny01LjAyLDYuNjEtNS4wMg0KCQljMC44LDAsMS4xNiwwLjAxLDEuODEsMC4xNXY4LjQ5Yy0wLjY2LTAuMTQtMS4zNS0wLjI1LTIuMzItMC4yNWMtMi43MiwwLTQuNTEsMS4xNC00Ljk3LDMuMTFjLTAuMDgsMC40Mi0wLjEyLDAuOTUtMC4xMiwxLjV2MTIuMTYNCgkJaC05LjA3TDQ2OC40OCwyNS45TDQ2OC40OCwyNS45eiIvPg0KPC9nPg0KPC9zdmc+DQo=');

    display: block;

    width: 100%;

    height: 2rem;

    background-image: var(--logo);

    background-size: auto 100%;

    background-position: 0 center;

    background-repeat: no-repeat;

    overflow: hidden;

    text-indent: -999em;

}



#kc-content-wrapper {

    display: flex;

    flex-direction: column-reverse;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-start;

    gap: var(--gap);

}





.login-update-password {

    display: grid;

    gap: var(--gap);

    width: fit-content;

    height: fit-content;

    max-width: 75rem;

    min-width: 50rem;

    align-content: center;

    justify-content: center;



    & .header {

        width: 100%;



        & .header-wrapper {

            display: block;

            width: 100%;

            height: 2rem;

            background-image: var(--logo);

            background-size: auto 100%;

            background-position: 0 center;

            background-repeat: no-repeat;

            overflow: hidden;

            text-indent: -999em;

        }

    }





}





.register-ip {

    width: 40rem !important;

    --gap: 1rem;

    align-items: flex-start;

    & > h1 {

        background: var(--img-logo) no-repeat center center;

        background-size: auto 100%;

        width: 100%;

        height: 2rem;

        color: transparent;

        margin-bottom: var(--gap);

    }

    & > h2 {

        font-size: 1.5rem;

        line-height: 1.7em;

        font-weight: 800;

        color: var(--color-key);

    }

    & > p {

        font-size: 1rem;

        line-height: 1.7em;

    }

    & > form {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        flex-wrap: nowrap;

        gap: var(--gap);

    }

    &  fieldset.connected-ip {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: space-around;

        align-content: stretch;

        align-items: center;

        gap: var(--gap);

        line-height: 1.7rem;

        &  label[for='connected-ip'] {

            font-weight: normal;

            width: 6.875rem;

            white-space: nowrap;

        }

        &  input[name='connected-ip'] {

            background: none;



            border: none;

            margin: 0;

            padding: 0;

            text-align: left;

            font-size: 1.25rem;

            font-weight: bold;

            max-width: calc(100% - 18rem);

        }

        &  button {

            width: fit-content;

            padding: .25rem 1rem;

            padding-right: 1.5rem;

            margin: 0;

            white-space: nowrap;

            line-height: 1.5rem;

            &::after {

                content: '\21B5';

            }

        }

    }

    &  fieldset.regist-ip {

        display: flex;

        flex-direction: column;

        flex-wrap: nowrap;

        align-items: stretch;

        justify-content: flex-start;

        gap: var(--gap);



        &>input {

            width: 100%;

            text-align: center;

            font-size: 1.75rem;

            font-weight: bold;

            color: var(--color-key);

        }

        &>ul {

            display: flex;

            flex-direction: column;

            align-items: flex-start;

            justify-content: center;

            flex-wrap: nowrap;

            gap: calc(var(--gap) / 2);

            background: var(--color-key-t);

            border-radius: var(--bor);

            list-style: disc;

            padding: 1rem;

            padding-left: 2.5rem;

            font-size: .875rem;



            & > li {

                list-style: inherit;

            }

        }

        &>button.cta {

            width: 100%;

            padding: .5rem 1rem;

            margin: 0;

            line-height: 1.75rem;

            font-size: 1.25rem;

            font-weight: bold;



        }

    }



}



.form-wrapper {

    display: flex;

    flex-direction: column;

    gap: calc(var(--gap) / 1);



    & .form-header h1 {

        text-align: center;

        font-size: 2rem;

        line-height: 1.7em;

        font-weight: 800;

        background: #999dfd;

        background: linear-gradient(-45deg, #40a7c6 15%, #6265b6 50%, #a34396 85%);

        background-clip: text;

        -webkit-background-clip: text;

        color: transparent;

        text-shadow: .125rem .125rem 0rem #0001, .25rem .25rem .125rem #0001, .0375rem .0375rem .25rem #0001;

    }





}



& form#kc-passwd-update-form {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex-wrap: nowrap;

    justify-content: flex-start;

    gap: calc(var(--gap) / 2);



    & .form-group {

        display: flex;

        width: 100%;

        flex-direction: column;

        flex-wrap: nowrap;

        align-items: flex-start;

        justify-content: flex-start;

        gap: calc(var(--gap) / 4);



        & .label-wrapper label {

            font-size: .875rem;

            font-weight: 400;

            color: #0009;

        }



        & .input-wrapper {

            display: flex;

            /* width: calc(20rem + var(--gap) + 11.25rem); */

            flex-direction: column;

            flex-wrap: nowrap;

            align-items: flex-start;

            justify-content: flex-start;

            gap: calc(var(--gap) / 2);





            & span {

                white-space: nowrap;

                color: var(--color-alert);

                font-size: .875rem;

                font-weight: 300;

            }

        }



        & .form-option .option-wrapper .checkbox {

            & label {

                display: block;

                padding-left: 1.75rem;

                line-height: 1.5rem;

                font-size: .875rem;

                font-weight: 500;

                --check-color: #0009;

                color: var(--check-color);



                &::before,

                &::after {

                    content: '';

                    display: block;

                    position: absolute;

                    width: 1rem;

                    height: 1rem;

                    top: 50%;

                    left: 0;

                    transform: translateY(-50%);

                }



                &::before {

                    background: var(--check-color);

                    border-radius: var(--bor);

                    opacity: .3;

                }



                &::after {

                    width: .25rem;

                    height: .5rem;

                    left: .25rem;

                    border-right: solid .125rem #fff;

                    border-bottom: solid .125rem #fff;

                    transform: rotate(45deg) translate(-50%, -50%);

                }



                & input[type="checkbox"] {

                    display: none;

                }



                &:has(input[type="checkbox"]:checked) {

                    --check-color: var(--color-key);



                    &::before,

                    &::after {

                        opacity: 1;

                    }

                }

            }

        }

    }



    input[type=password] {

        position: relative;

        width: 20rem;

        outline: none;

        -webkit-appearance: none;

        appearance: none;

        background: var(--color-bd1);

        color: var(--color-key);

        border: solid 1px var(--color-bd1);

        line-height: 2rem;

        padding: .5rem 1rem;

        border-radius: var(--bor);

        overflow: hidden;

        font-family: monospace;

        transition: all .3s;

        font-weight: 600;

        overflow: hidden;



        &::placeholder {

            display: block;

            position: absolute;

            top: 50%;

            left: 1rem;

            transform: translateY(-50%);

            font-size: 12px;

            color: #0005;

            transition: all .3s;

            opacity: 1;

        }



        &:focus {

            background: var(--color-bg1);



            &::placeholder {

                transform: translateY(-300%);

                opacity: 0;





            }

        }

    }

}



& form#kc-reset-password-form {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex-wrap: nowrap;

    justify-content: flex-start;

    gap: var(--gap);



    & .form-group {

        display: flex;

        width: 100%;

        flex-direction: column;

        flex-wrap: nowrap;

        align-items: flex-start;

        justify-content: flex-start;

        gap: calc(var(--gap) / 2);

        margin: 0 !important;



        & label {

            font-size: .875rem;

            font-weight: 400;

            color: #0009;

        }



        & .input-wrapper {

            display: flex;

            flex-direction: column;

            flex-wrap: nowrap;

            align-items: flex-start;

            justify-content: flex-start;

            gap: calc(var(--gap) / 2);





            & span {

                white-space: nowrap;

                color: var(--color-alert);

                font-size: .875rem;

                font-weight: 300;

            }

        }



        & .form-option .option-wrapper .checkbox {

            & label {

                display: block;

                padding-left: 1.75rem;

                line-height: 1.5rem;

                font-size: .875rem;

                font-weight: 500;

                --check-color: #0009;

                color: var(--check-color);



                &::before,

                &::after {

                    content: '';

                    display: block;

                    position: absolute;

                    width: 1rem;

                    height: 1rem;

                    top: 50%;

                    left: 0;

                    transform: translateY(-50%);

                }



                &::before {

                    background: var(--check-color);

                    border-radius: var(--bor);

                    opacity: .3;

                }



                &::after {

                    width: .25rem;

                    height: .5rem;

                    left: .25rem;

                    border-right: solid .125rem #fff;

                    border-bottom: solid .125rem #fff;

                    transform: rotate(45deg) translate(-50%, -50%);

                }



                & input[type="checkbox"] {

                    display: none;

                }



                &:has(input[type="checkbox"]:checked) {

                    --check-color: var(--color-key);



                    &::before,

                    &::after {

                        opacity: 1;

                    }

                }

            }

        }

    }



    input[type=text] {

        position: relative;

        width: 20rem;

        outline: none;

        -webkit-appearance: none;

        appearance: none;

        background: var(--color-bd1);

        color: var(--color-key);

        border: solid 1px var(--color-bd1);

        line-height: 2rem;

        padding: .5rem 1rem;

        border-radius: var(--bor);

        overflow: hidden;

        font-family: monospace;

        transition: all .3s;

        font-weight: 600;

        overflow: hidden;



        &::placeholder {

            display: block;

            position: absolute;

            top: 50%;

            left: 1rem;

            transform: translateY(-50%);

            font-size: 12px;

            color: #0005;

            transition: all .3s;

            opacity: 1;

        }



        &:focus {

            background: var(--color-bg1);



            &::placeholder {

                transform: translateY(-300%);

                opacity: 0;





            }

        }

    }



    & form#kc-reset-password-form {

        display: flex;

        flex-direction: column;

        align-items: center;

        flex-wrap: nowrap;

        justify-content: flex-start;

        gap: var(--gap);



        & .form-group {

            display: flex;

            width: 100%;

            flex-direction: column;

            flex-wrap: nowrap;

            align-items: flex-start;

            justify-content: flex-start;

            gap: calc(var(--gap) / 2);

            margin: 0;



            &::before,

            &::after {

                content: none !important;

                display: none !important;

            }



            & label {

                font-size: .875rem;

                font-weight: 400;

                color: #0009;

            }



            & .input-wrapper {

                display: flex;

                flex-direction: column;

                flex-wrap: nowrap;

                align-items: flex-start;

                justify-content: flex-start;

                gap: calc(var(--gap) / 2);





                & span {

                    white-space: nowrap;

                    color: var(--color-alert);

                    font-size: .875rem;

                    font-weight: 300;

                }

            }



            & .form-option .option-wrapper .checkbox {

                & label {

                    display: block;

                    padding-left: 1.75rem;

                    line-height: 1.5rem;

                    font-size: .875rem;

                    font-weight: 500;

                    --check-color: #0009;

                    color: var(--check-color);



                    &::before,

                    &::after {

                        content: '';

                        display: block;

                        position: absolute;

                        width: 1rem;

                        height: 1rem;

                        top: 50%;

                        left: 0;

                        transform: translateY(-50%);

                    }



                    &::before {

                        background: var(--check-color);

                        border-radius: var(--bor);

                        opacity: .3;

                    }



                    &::after {

                        width: .25rem;

                        height: .5rem;

                        left: .25rem;

                        border-right: solid .125rem #fff;

                        border-bottom: solid .125rem #fff;

                        transform: rotate(45deg) translate(-50%, -50%);

                    }



                    & input[type="checkbox"] {

                        display: none;

                    }



                    &:has(input[type="checkbox"]:checked) {

                        --check-color: var(--color-key);



                        &::before,

                        &::after {

                            opacity: 1;

                        }

                    }

                }

            }

        }



        input[type=text] {

            position: relative;

            width: 20rem;

            outline: none;

            -webkit-appearance: none;

            appearance: none;

            background: var(--color-bd1);

            color: var(--color-key);

            border: solid 1px var(--color-bd1);

            line-height: 2rem;

            padding: .5rem 1rem;

            border-radius: var(--bor);

            overflow: hidden;

            font-family: monospace;

            transition: all .3s;

            font-weight: 600;

            overflow: hidden;



            &::placeholder {

                display: block;

                position: absolute;

                top: 50%;

                left: 1rem;

                transform: translateY(-50%);

                font-size: 12px;

                color: #0005;

                transition: all .3s;

                opacity: 1;

            }



            &:focus {

                background: var(--color-bg1);



                &::placeholder {

                    transform: translateY(-300%);

                    opacity: 0;





                }

            }

        }

    }

}



.form-group::before,

.form-group::after {

    content: none !important;

    display: none !important;

}



.alert-success {

    color: var(--color-key);

    background: var(--color-key-t);

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: flex-start;

    padding: 1rem;

    gap: .5rem;

    border-radius: .5rem;



    & .pf-c-alert__icon {

        line-height: 1.5rem;

    }



    & span.pf-c-alert__title.kc-feedback-text {

        max-width: 20rem;

        font-size: 1rem;

        line-height: 1.5rem;

    }

}



.login-pf-signup {

    width: 20rem;



    & .pf-c-alert__icon {

        display: none;

    }



    & #kc-info-wrapper {

        display: block;

        position: relative;

        padding-left: 1.25rem;

        color: #0005;

        word-break: keep-all;

        font-size: .75rem;

        line-height: 1.25rem;

        margin: 0;



        &:before {

            content: '\24D8';

            display: block;

            position: absolute;

            top: 0;

            left: 0;

            font-size: 1rem;

        }

    }

}





#kc-form-buttons {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: stretch;

    width: 100%;

    justify-content: flex-start;

    gap: calc(var(--gap) / 2);



    & .button {

        display: block;

        cursor: pointer;

        position: relative;

        margin: 0;

        padding-block: 0;

        padding-inline: 0;

        outline: none;

        --bt-color: var(--color-key);

        border-radius: var(--bor);

    }



    & .btn-large {

        font-weight: 600;

        font-size: 1rem;

        line-height: 1.75rem;

        padding: .25rem .75rem;

        width: 100%;

    }



    & .btn-primary {

        background: var(--bt-color);

        color: #fff;

    }



    & .btn-default {

        border: solid 1px var(--bt-color);

        color: var(--bt-color);

        background: #fff;

    }

}



#kc-form-buttons {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: stretch;

    width: 100%;

    justify-content: flex-start;

    gap: calc(var(--gap) / 2);



    & .pf-c-button {

        display: block;

        cursor: pointer;

        position: relative;

        margin: 0;

        padding-block: 0;

        padding-inline: 0;

        outline: none;

        --bt-color: var(--color-key);

        border-radius: var(--bor);

    }



    & .btn-lg {

        font-weight: 600;

        font-size: 1rem;

        line-height: 1.75rem;

        padding: .25rem .75rem;

        width: 100%;

    }



    & .pf-m-primary {

        background: var(--bt-color);

        color: #fff;

    }



}



.login-pf-settings {

    flex-direction: column-reverse !important;



    & #kc-form-options {

        display: block;

        width: 100%;



        & a {

            display: block;

            position: relative;

            width: 100%;

            font-size: 1rem;

            line-height: 1.5rem;

            color: var(--color-key)

        }

    }

}



.admin_login .form-group.login-pf-settings {

    flex-direction: row !important;

    flex-wrap: wrap !important;

    justify-content: space-between !important;



    & #kc-form-options {

        width: fit-content;

    }

}





a#try-another-way {

    color: var(--color-key);

    font-size: .875rem;

    font-weight: 400;

    line-height: 1.74rem;

}



.alert-warning {

    width: 20rem;



    & .pf-c-alert__icon {

        display: none;

    }



    & .kc-feedback-text {

        display: block;

        position: relative;

        padding-left: 1.25rem;

        color: #0005;

        word-break: keep-all;

        font-size: .75rem;

        line-height: 1.25rem;

        margin: 0;



        &:before {

            content: '\24D8';

            display: block;

            position: absolute;

            top: 0;

            left: 0;

            font-size: 1rem;

        }

    }

}



footer p.copyright {

    font-size: .75rem;

    letter-spacing: .1em;

    color: #0005;

    font-weight: 300;

}



/* <-- Login */









/* Dashboard --> */



main>.dashboard {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    justify-content: flex-start;

    align-items: flex-start;

    padding: var(--gap);

    --gap: 1rem;

    gap: var(--gap);

    transition: all .3s;

    color: var(--color-txt7);

    min-width: 1440px;



}



main>.dashboard .dashboard-row {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: var(--gap);

    width: 100%;

}



.widget {

    position: relative;

    border-radius: 0.25rem;

    background: var(--color-bg1);

    box-shadow: 0 0.1875rem 0.3125rem var(--color-txt2);

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-items: flex-start;

    justify-content: flex-start;

}



.widget:hover {

    box-shadow: var(--hover-bs);

}



.widget>header {

    display: flex;

    position: relative;

    justify-content: space-between;

    align-items: center;

    padding: calc(var(--gap) / 2) calc(var(--gap) / 2);

    line-height: 1.5rem;

    font-size: 1rem;

    width: 100%;

    color: var(--color-txt5);

    overflow: hidden;

    gap: var(--gap)

}



.widget>header:after {

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 100%;

    left: 0;

    box-shadow: 0 0 .625rem var(--color-sd3);

}



.widget>header>* {

    display: grid;

    line-height: inherit;

}



.widget>header>ul {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    gap: calc(var(--gap) / 4);

}



.widget>header .subject {

    transition: all .3s;

    flex: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    opacity: .7;

}



.widget>header>.resource-legend-wrap {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 3rem;

    font-size: .875rem;

    padding-top: 0.5rem;

    padding-right: 3rem;



    & .legend {

        ---color: #0002;

        --size: .5rem;

        display: block;

        position: relative;

        background: var(---color);

        width: calc(var(--size) *3);

        height: calc(var(--size) *1);

        z-index: +1;



        &.active {

            ---color: var(--color-posi3);

        }



        &::before,

        &::after {

            content: '';

            display: block;

            position: absolute;

            background: var(---color);

            width: 100%;

            height: 100%;

            z-index: -1;

        }



        &::before {

            top: calc(var(--size) * -1);

            transform: skewX(-45deg);

            left: calc(var(--size) * .5);

            height: calc(var(--size) * 1);

            filter: brightness(1.1);

        }



        &::after {

            bottom: calc(var(--size) * .5);

            transform: skewy(-45deg);

            right: calc(var(--size) * -1);

            width: calc(var(--size) * 1);

            filter: brightness(0.8);

        }



        & p {

            display: block;

            position: absolute;

            white-space: nowrap;

            width: fit-content;

            top: calc(50% - (var(--size) / 2));

            left: calc(var(--size) * 4.5);

            transform: translateY(-50%);

        }

    }

}









.widget:hover>header .subject {

    opacity: 1;

}



.widget>header a.view-more {

    cursor: pointer;

    width: 1.5rem;

    height: 1.5rem;

    overflow: hidden;

    text-indent: -999em;

    position: relative;



}



.widget>header a.view-more::before {

    content: '';

    position: absolute;

    width: 1rem;

    height: 1rem;

    background: var(--icon-viewmore) center/contain no-repeat;

    opacity: .3;

    transition: all .3s ease;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.widget>header a.view-more:hover::before {

    opacity: 1;

}







.widget>.main {

    padding: calc(var(--gap) / 2) calc(var(--gap) / 1);

    display: block;

    width: 100%;

}



.widget>.main>* {

    height: 9rem;

    padding: .1em 0;

    transition: none;

    overflow: hidden;

    overflow-x: scroll;

}



.widget>.main>article.involve {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-between;

    gap: var(--gap);

}



.widget>.main>article.involve>.involve-project {

    width: 6rem;

    background: var(--color-sd3);

    border-radius: var(--bor);

    padding: 1rem;

    height: 100%;

    background: var(--color-key-t);

    color: var(--color-key)

}





.widget.h14rem>.main>article {

    height: 14rem;



}



.widget.h10rem>.main>article {

    height: 10rem;



}



.widget.h8rem>.main>article {

    height: 8rem;



}



.widget.feature>.main>article {

    overflow-y: hidden;

}



.widget.grafana>.main>article {

    overflow-y: hidden;

}



.widget.feature>.main figure {

    display: flex;

    position: relative;

    width: 100%;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    --gap: 1.5rem;

    gap: var(--gap);

    --img-sz: 100px;

}



.widget.feature>.main figure>img {

    display: block;

    position: relative;

    width: var(--img-sz);

    height: auto;

    margin-left: calc(var(--gap) * 2/3);

}



#feature-01.active,

#feature-02.active,

#feature-03.active,

#feature-04.active {

    container-name: welcomewrap;

    container-type: inline-size;

}





#feature-01 figure>img {

    content: var(--icon-dashboard-f01);

}



#feature-02 figure>img {

    content: var(--icon-dashboard-f02);

}



#feature-03 figure>img {

    content: var(--icon-dashboard-f03);

}



#feature-04 figure>img {

    content: var(--icon-dashboard-f04);

}



@container welcomewrap (max-width: 636px) {



    /*

523.19px ~ 637.59px



cqw: 5.2px ~ 6.3px



6.3 : 100px



*/

    #feature-01.active,

    #feature-02.active,

    #feature-03.active,

    #feature-04.active {

        & figcaption p {

            font-size: clamp(.75rem, 2.2cqw, 1rem);

        }

    }



}







.widget.feature>.main .active figure>img {

    animation: feature-ani 4s infinite linear;

}



@keyframes feature-ani {

    0% {

        transform: translateY(0rem);

    }



    25% {

        transform: translateY(-.3rem);

    }



    50% {

        transform: translateY(0rem);

    }



    75% {

        transform: translateY(.3rem);

    }



    100% {

        transform: translateY(0rem);

    }

}







.widget.feature>.main figure figcaption {

    display: flex;

    position: relative;

    width: calc(100% - var(--img-sz) - (var(--gap) * 5/3));

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: calc(var(--gap) /2);

    font-size: .875rem;

}



.widget.feature>.main figure figcaption p {

    font-weight: 300;

    line-height: 1.5em;

    word-break: keep-all;

    color: var(--color-txt8);

    padding-right: var(--gap);

}



.widget.feature>.main figure figcaption strong {

    color: var(--color-key);

    font-weight: 600;

}



.widget.feature>.main figure figcaption strong.first {

    font-size: 1.25rem;

    display: block;

    margin-bottom: .75rem;

    font-weight: 500;

}









.widget .list {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: space-between;

    font-size: .875rem;

    height: unset;

}



.widget .list li {

    flex: 1;

    border-bottom: solid 1px var(--color-bd1);

}



.widget .list li:last-child {

    border-bottom: none;

}



.widget .list li:hover {

    background: var(--color-bg2);

}



.widget .list li a {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: calc(var(--gap) / 2);

    cursor: pointer;

    color: var(--color-txt7);

    height: 100%;

}



.widget .list li:hover a {

    color: var(--color-txt);

}



.widget .list li a>* {

    line-height: 1.875rem;

    white-space: nowrap;

    display: block;

    overflow: hidden;

    color: var(--color-txt5);

}



.widget .list li a>*:first-child,

.widget .list li a>*:last-child {

    margin: 0;

}





.widget .list li a .icon {

    opacity: .4;

    filter: saturate(0);

    width: 1.2rem;

    height: 1.2rem;

    color: transparent;

}



.widget .list li a .tag {

    border: solid 1px;

    line-height: 1em;

    padding: .2em .3em;

    width: 4em;

    text-align: center;

    border-radius: var(--bor);

    color: var(--color-txt5);

    background: var(--color-bg1);

    font-size: .75rem;

}



.widget .list li a p.subject {

    display: block;

    flex: 1;

    /* width: calc( 100% - var(--gap) - 6.5rem); */

    text-overflow: ellipsis;

}



.widget .list.noti li a {

    gap: var(--gap);

}



.noti.icon {

    display: block;

    position: relative;

    width: 1.5rem;

    height: 1.5rem;

}



.noti.icon:before {

    content: '';

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    height: 100%;

    background-size: contain;

    background-position: center center;

    background-repeat: no-repeat;

}





.noti.icon[data-noti-class="문의"]:before {

    background-image: var(--icon-noti-qna-complete);

}



.noti.icon[data-noti-class="Job 상태"]:before {

    background-image: var(--icon-noti-job-stop);

}



.noti.icon[data-noti-class="프로젝트"]:before {

    background-image: var(--icon-noti-project-member);

}



.noti.icon[data-noti-class="작업"]:before {

    background-image: var(--icon-noti-job);

}









.widget .list li a time.timeago {

    font-size: 0.8rem;

    text-align: right;

    width: 5rem;

}



.widget>.main>article:has(iframe) {

    margin: 0;

    padding: 0;

    /* overflow: hidden !important;

    margin: 0;

    padding: 0;

    width: 100%;

    height: 9rem; */

}



.iframe-wrap {

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    height: 9rem;



    /* --margin-side: 20px;

    --margin-top: 64px;

    overflow: hidden;



    height: calc(9rem + var(--margin-top));

    margin-top: calc(var(--margin-top) * -1);

    margin-left: calc(var(--margin-side) * -1);

    margin-right: calc(var(--margin-side) * -1); */

}



.iframe-wrap iframe {

    --margin-top: 32px;

    height: calc(9rem + var(--margin-top));

    margin-top: calc(var(--margin-top) * -1);

    /* margin: 0;

    padding: 0;

    width: 100%;

    height: calc(9rem + var(--margin-top)); */



    /* --margin-bottom: -20px; */

    /* width: calc(100% + var(--margin-side) + var(--margin-side));

    height: calc(9rem + var(--margin-top));

    margin-top: calc(var(--margin-top) * -1); */

    /* margin-bottom: calc(var(--margin-bottom) * -1); */





    /* margin-left: calc(var(--margin-side) * -1); */

    /* margin-right: calc(var(--margin-side) * -1); */



}





/* 전체 GPU 사용 현황 --> */





.resource-wrap {

    position: relative;

    height: 100%;

    display: flex;

    align-items: flex-end;

    --gap: 1rem;

    --size: .5rem;

    ---color: #0002;

    --length: 8;

    ---gap: calc(var(--gap) / 3);

    gap: var(---gap);

    padding: 0 var(--size);



    & .status {

        width: calc((100% / var(--length)) - (var(---gap) * ((var(--length) - 1) / var(--length))));

        height: 100%;

        position: relative;

        display: flex;

        flex-direction: column-reverse;

        flex-wrap: nowrap;

        align-items: center;

        gap: calc(var(--size) * .6);

        padding-bottom: 1rem;



        & .resource {

            display: block;

            position: relative;

            background: var(---color);

            width: calc(var(--size) *3);

            height: calc(var(--size) *1);

            transition: all .3s;

            opacity: 0;

            animation: fade .3s forwards;



            &.active {

                ---color: var(--color-posi3);

            }



            &:nth-child(1) {

                animation-delay: 0s;

            }



            &:nth-child(2) {

                animation-delay: .3s;

            }



            &:nth-child(3) {

                animation-delay: .6s;

            }



            &:nth-child(4) {

                animation-delay: .9s;

            }



            &:nth-child(5) {

                animation-delay: 1.2s;

            }



            &:nth-child(6) {

                animation-delay: 1.5s;

            }



            &:nth-child(7) {

                animation-delay: 1.8s;

            }



            &:nth-child(8) {

                animation-delay: 2.1s;

            }



            &:nth-child(9) {

                animation-delay: 2.4s;

            }





            &::before,

            &::after {

                content: '';

                display: block;

                position: absolute;

                background: var(---color);

                width: 100%;

                height: 100%;

                z-index: -1;

            }



            &::before {

                top: calc(var(--size) * -1);

                transform: skewX(-45deg);

                left: calc(var(--size) * .5);

                height: calc(var(--size) * 1);

                filter: brightness(1.1);

            }



            &::after {

                bottom: calc(var(--size) * .5);

                transform: skewy(-45deg);

                right: calc(var(--size) * -1);

                width: calc(var(--size) * 1);

                filter: brightness(0.8);

            }

        }



        & .name {

            font-size: .75rem;

            text-align: center;

            display: block;

            position: absolute;

            bottom: 0;

            left: 50%;

            transform: translateX(-50%);

            z-index: +1;

            width: fit-content;

            white-space: nowrap;

            color: var(--color-txt5);

        }

    }

}



@keyframes fade {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }



}



/*

.resource-wrap:after {

    content: '';

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: repeating-linear-gradient(to bottom,

            #fff0 0px, #fff0 1px,

            #fff4 1px, #fff4 2px);

}



.resource-wrap .status {

    --value: 87.5%;

    flex-grow: 1;

    height: 100%;

    position: relative;

    background-color: #eee;

    background: linear-gradient(to top,

            #eee 0%, #eee 10%, transparent 10%, transparent 12.85%,

            #eee 12.85%, #eee 22.85%, transparent 22.85%, transparent 25.7%,

            #eee 25.7%, #eee 35.7%, transparent 35.7%, transparent 38.55%,

            #eee 38.55%, #eee 48.55%, transparent 48.55%, transparent 51.4%,

            #eee 51.4%, #eee 61.4%, transparent 61.4%, transparent 64.25%,

            #eee 64.25%, #eee 74.25%, transparent 74.25%, transparent 77.1%,

            #eee 77.1%, #eee 87.1%, transparent 87.1%, transparent 89.95%,

            #eee 89.95%, #eee 100%);

}



.resource-wrap .status:before {

    content: attr(data-name);

    display: block;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: -1.375rem;

    font-size: .875rem;

    text-align: center;

    width: fit-content;

    font-size: .8125rem;

    color: var(--color-txt5);

    filter: none;

    white-space: nowrap;

}



.resource-wrap .status:after {

    content: '';

    display: block;

    position: absolute;

    top: 0;

    left: -1%;

    width: 102%;

    height: 100%;

    background-color: #76b900;



    background: linear-gradient(to top,

            #76b900 0%, #76b900 10%, transparent 10%, transparent 12.85%,

            #76b900 12.85%, #76b900 22.85%, transparent 22.85%, transparent 25.7%,

            #76b900 25.7%, #76b900 35.7%, transparent 35.7%, transparent 38.55%,

            #76b900 38.55%, #76b900 48.55%, transparent 48.55%, transparent 51.4%,

            #76b900 51.4%, #76b900 61.4%, transparent 61.4%, transparent 64.25%,

            #76b900 64.25%, #76b900 74.25%, transparent 74.25%, transparent 77.1%,

            #76b900 77.1%, #76b900 87.1%, transparent 87.1%, transparent 89.95%,

            #76b900 89.95%, #76b900 100%);

    clip-path: inset(calc(100% - var(--value)) 0 0 0);

    animation: check-level 2s alternate 1;

}







@keyframes check-level {

    0% {

        clip-path: inset(100% 0 0 0);

    }



    100% {

        clip-path: inset(calc(100% - var(--value)) 0 0 0);

    }

} */





/* <-- 전체 GPU 사용 현황  */











.job-index,

.my-activity,

iframe {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -ms-user-select: none;

    user-select: none;

}







.widget .job-index {

    display: flex;

    flex-direction: row;

    /* --gap: ; */

    gap: var(--gap, 1rem);

    justify-content: space-between;

    align-items: flex-start;

}



.widget dl.job-status-count {

    display: flex;

    position: relative;

    flex-direction: row;

    flex-wrap: wrap;

    background: var(--color-sd1);

    border-radius: var(--bor);

    padding: 1rem;

    /* --gap: .5rem; */

    gap: 0 var(--gap);

    height: 100%;

}





.widget dl.job-status-count:after {

    content: '';

    width: 1px;

    height: 30%;

    position: absolute;

    display: block;

    background: var(--color-bd1);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.widget dl.job-status-count dt {

    display: flex;

    width: 100%;

    text-align: center;

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--color-txt6);

    flex-direction: column;

    justify-content: center;

}



.widget dl.job-status-count dd {

    display: flex;

    flex-direction: column-reverse;

    flex-wrap: nowrap;

    justify-content: center;

    align-items: center;

    color: var(--color-txt7);



}



.widget dl.job-status-count dd::before {

    content: attr(data-status);

    font-size: .875rem;

    line-height: 1.5em;

}



.widget dl.job-status-count dd::after {

    content: attr(data-status-count);

    font-size: 3rem;

    font-weight: 800;

    line-height: 1.5em;

}



.widget dl.job-status-count dd[data-status='실행 중']::before,

.widget dl.job-status-count dd[data-status='실행 중']::after {

    color: var(--color-key);

}



.widget dl.job-status-count dd[data-status='대기 중']::before,

.widget dl.job-status-count dd[data-status='대기 중']::after {

    color: var(--color-txt3);

}



.widget>.main>.resources,

.widget>.main>.my-activity {

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    --gap: 1rem;

    gap: var(--gap);

    align-content: space-between;

    overflow: visible;

}



.widget>.main>.resources {

    width: 100%;

}



.resources>figure,

.my-activity>figure {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-start;

    gap: var(--gap);

    height: calc((100% / 2) - (var(--gap) * (1 / 2))) !important;

    transition: all .3s;

    padding: .5rem;

    border-radius: var(--bor);



    overflow: hidden;

}



.resources>figure {

    width: 100%;

    justify-content: center;

}





.resources>figure>img,

.my-activity>figure>img {

    display: block;

    height: 40px;

    width: auto;

    aspect-ratio: 1;



}





.involve .involve-project,

.resources>figure figcaption,

.my-activity>figure figcaption {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    color: var(--color-txt8);

    gap: calc(var(--gap) /6);

}



.resources>figure figcaption {

    width: 4rem;

}





.involve .involve-project .count,

.resources>figure figcaption .count,

.my-activity>figure figcaption .count {

    font-size: 2rem;

    font-weight: 800;

}



.involve .involve-project .count-item,

.resources>figure figcaption .count-item,

.my-activity>figure figcaption .count-item {

    font-size: .875rem;

    color: var(--color-txt4)

}









/* status tag --> */



span.tag {

    display: inline-block;

    text-transform: uppercase;

    padding: 0.2em 0.4em;

    text-align: center;

    border: solid 1px;

    font-size: .75rem;

    font-weight: 400;

    border-radius: var(--bor);

    text-align: center;

    background: var(--color-bg1);

    line-height: 1em;

}



dl.panel .item-content span.tag {

    display: inline-block;

    position: relative;

    padding: 0 .4em;

    margin-left: 0.2em;

    font-size: 1rem;

    color: var(--color-txt);

    background: none;

    line-height: inherit;

    border: none;



    &::after {

        content: '';

        position: absolute;

        top: 0;

        left: -.2em;

        width: calc(100% + .4em);

        height: 100%;

        background: var(--color-bg1);

        border: solid 1px var(--color-bd2);

        border-radius: var(--bor);

        z-index: -1;

        opacity: .5;

    }

}





#user-04 dl.panel {

    min-width: 66rem;

}



#user-04 dl.panel dd.multiline {

    align-items: flex-start

}



#user-04 dl.panel dd.multiline p {

    display: block;

    line-height: 1.75rem;

}



button.tag {

    display: flex;

    align-items: center;

    padding: 0 .875rem;

    height: 2rem;

    border-radius: 1rem;

    background: var(--color-txt1);

    color: var(--color-txt6);

    border: none;

    font-size: .875rem;

    line-height: 2rem;

}



button.tag span.mso {

    font-size: 1rem;

}



button[type="reset"].tag {

    background: var(--color-bg1);

    border: solid 1px;

    color: var(--color-key);

}



.widget .list li a span.tag {

    /* border: solid 1px; */



    /* padding: .2em .3em; */

    width: 4em;

}



.tag.ALLOCATED,

.tag.COMPLETING,

.tag.IDLE,

.tag.MIXED,

.tag.running {

    color: var(--color-posi2);

}



.tag.pending {

    color: var(--color-txt);

}



.tag.unenrolled,

.tag.canceled {

    color: var(--color-alert);

}



.tag.completed {

    color: var(--color-posi3);

}



.tag.event {

    color: var(--color-posi2) !important;

}



.tag.attention {

    color: var(--color-alert) !important;

}



.tag.DRAINING,

.tag.DRAIN,

.tag.DOWN,

.tag.delete,

.tag.secure {

    color: var(--color-warning) !important;

}



.tag.active,

.status.active {

    color: var(--color-key);

}



.tag.lock,

.tag.close,

.status.close {

    color: var(--color-txt5);

}







/* <-- tag  */













/* input --> */



.check-wrap input[type=checkbox] {

    display: none;

}



.check-wrap input[type=checkbox]+label {

    display: block;

    position: relative;

    width: 100%;

    opacity: .7;

    font-size: inherit;

    line-height: 1.5em;

    padding: .25em .5em .25em 2em;

    color: var(--color-txt7);

    width: 14rem;

}



.dashboard .check-wrap input[type=checkbox]+label {

    width: fit-content;

    height: 1.5rem;

    line-height: 1.5rem;

    padding: 0;

    padding-left: 2em;

}



.check-wrap input[type=checkbox]+label:hover {

    /* background: var(--color-sd1); */

    opacity: 1;

}



.check-wrap input[type=checkbox]+label:before {

    content: 'done';

    display: block;

    top: 50%;

    left: .25em;

    transform: translateY(-50%);

    color: var(--color-txt3);

    background-color: var(--color-sd3);

    width: 1.25em;

    height: 1.25em;

    line-height: 1.25em;

    text-align: center;

    border-radius: var(--bor);

    position: absolute;

    font-family: 'Material Symbols Outlined';

    font-weight: normal;

    font-style: normal;

    font-size: 1em;

    letter-spacing: normal;

    text-transform: none;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-smoothing: antialiased;

}



.check-wrap input[type=checkbox]:checked+label {

    opacity: 1;

    color: var(--color-txt);

}



.check-wrap input[type=checkbox]:checked+label:before {

    background-color: var(--color-key);

    color: var(--color-bg1);

    font-weight: bold;

}





.widget .check-wrap {

    font-size: .875rem;

}





/* <-- input */







a.text-link {

    position: relative;

    display: block;

    color: var(--color-key);

    padding-right: 1em;

    /* opacity: .5; */

    overflow: hidden;

    transition: all .3s;

}



a.text-link>span {

    position: relative;

    display: inline-block;

    z-index: +1;

}



a.text-link:hover {

    color: var(--color-bg1);

}



a.text-link::before {

    content: '';

    display: block;

    position: absolute;

    background: var(--color-bg1);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 0%;

    height: auto;

    aspect-ratio: 1;

    z-index: 0;

    opacity: 0;

    transition: all .3s;

}



a.text-link:hover::before {

    background: var(--color-key);

    width: 100%;

    opacity: 1;



}





a.text-link:after {

    content: '';

    display: block;

    position: absolute;

    width: 0.4em;

    height: 0.4em;

    top: 50%;

    right: 0;

    border-top: solid 1px;

    border-right: solid 1px;

    color: var(--color-key);

    transform: translateY(-50%) rotate(45deg);

}



a.text-link:hover::after {

    border-color: var(--color-bg1);

}



.widget>.main .text-link,

.admin_container.main .body figure figcaption .text-link {

    border: solid 1px;

    padding: 0.8em 2em 0.8em 1em;

    border-radius: 2em;

}



.widget>.main .text-link::after,

.admin_container.main .body figure figcaption .text-link:after {

    right: 1em;

}















.w12-3 {

    width: calc(12% - (var(--gap) * (2 / 3))) !important;

}



.w20-2 {

    width: calc(20% - (var(--gap) * (1 / 2))) !important;

}



.w20-3 {

    width: calc((100% / 5) - (var(--gap) * (2 / 3))) !important;

}





.w12-4 {

    width: calc(12% - (var(--gap) * (9/10))) !important;

}



.w20-4 {

    width: calc(20% - (var(--gap) * (9/10))) !important;

}



.w24-4 {

    width: calc(24% - (var(--gap) * (9/10))) !important;

}



.w25 {

    width: calc((100% / 4) - (var(--gap) * (3/4))) !important;

}



.w25-3 {

    width: calc((100% / 4) - (var(--gap) * (2/3))) !important;

}



.w28-3 {

    width: calc(28% - (var(--gap) * (1 / 1.33))) !important;

}



.w30 {

    width: calc(30% - (var(--gap) * (2 / 3))) !important;

}



.w30-2 {

    width: calc(30% - (var(--gap) * (1 / 2))) !important;

}



.w30-3 {

    width: calc(30% - (var(--gap) * (1 / 1.33))) !important;

}



.w33 {

    width: calc((100% / 3) - (var(--gap) * (2 / 3))) !important;

}



.w33-2 {

    width: calc((100% / 3) - (var(--gap) * (1 / 2))) !important;

}



.w36 {

    width: calc(36% - (var(--gap) * (2 / 3))) !important;

}





.w40 {

    width: calc(40% - (var(--gap) * (1 / 2))) !important;

}



.w40-4 {

    width: calc(40% - (var(--gap) * (3 / 4))) !important;

}



.w50 {

    width: calc((100% / 2) - (var(--gap) * (1 / 2))) !important;

}



.w50-3 {

    width: calc((100% / 2) - (var(--gap) * (3 / 4))) !important;

}



.w60 {

    width: calc(60% - (var(--gap) * (1 / 2))) !important;

}



.w60-3 {

    width: calc(60% - (var(--gap) * (1 / 1.33))) !important;

}



.w66-2 {

    width: calc((100% * (2 / 3)) - (var(--gap) * (1 / 2))) !important;

}



.w70-2 {

    width: calc(70% - (var(--gap) * (1 / 2))) !important;

}



.w80-2 {

    width: calc(80% - (var(--gap) * (1 / 2))) !important;

}











/* Loading --> */

.loading {

    display: none;

    visibility: hidden;

    background: transparent;



    &.now {

        z-index: +9999 !important;

        color: transparent;

        position: fixed;

        display: block;

        visibility: visible;

        bottom: unset;

        right: unset;

        width: 72px;

        height: 72px;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        --color: var(--color-key);



        &::before {

            content: 'Loading...';

            position: absolute;

            display: block;

            text-indent: 0;

            bottom: -3rem;

            font-size: 1.5rem;

            font-weight: 300;

            letter-spacing: .5em;

            color: var(--color);

            width: 12em;

            text-align: center;

            left: 50%;

            z-index: +1;

            transform: translateX(-50%);

        }



        &::after {

            content: '';

            display: block;

            position: fixed;

            width: 100vw;

            height: 100vh;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            background: #fff6;

            z-index: 0;

        }



        & div {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: +1;

            background: transparent;



            &::before {

                display: block;

                width: 15%;

                height: 15%;

                margin: 0 auto;

                content: "";

                border-radius: 100%;

                background-color: var(--color);

                transform: translate(-50%, -50%);

                -webkit-animation: spinner 1.2s infinite ease-in-out both;

                animation: spinner 1.2s infinite ease-in-out both;

            }



            &:nth-child(2) {

                transform: rotate(30deg);



                &:before {

                    -webkit-animation-delay: -1.1s;

                    animation-delay: -1.1s;

                }

            }



            &:nth-child(3) {

                transform: rotate(60deg);



                &::before {

                    -webkit-animation-delay: -1s;

                    animation-delay: -1s;

                }

            }



            &:nth-child(4) {

                transform: rotate(90deg);



                &::before {

                    -webkit-animation-delay: -0.9s;

                    animation-delay: -0.9s;

                }

            }



            &:nth-child(5) {

                transform: rotate(120deg);



                &::before {

                    -webkit-animation-delay: -0.8s;

                    animation-delay: -0.8s;

                }

            }



            &:nth-child(6) {

                transform: rotate(150deg);



                &::before {

                    -webkit-animation-delay: -0.7s;

                    animation-delay: -0.7s;

                }

            }



            &:nth-child(7) {

                transform: rotate(180deg);



                &::before {

                    -webkit-animation-delay: -0.6s;

                    animation-delay: -0.6s;

                }

            }



            &:nth-child(8) {

                transform: rotate(210deg);



                &::before {

                    -webkit-animation-delay: -0.5s;

                    animation-delay: -0.5s;

                }

            }



            &:nth-child(9) {

                transform: rotate(240deg);



                &::before {

                    -webkit-animation-delay: -0.4s;

                    animation-delay: -0.4s;

                }

            }



            &:nth-child(10) {

                transform: rotate(270deg);



                &::before {

                    -webkit-animation-delay: -0.3s;

                    animation-delay: -0.3s;

                }

            }



            &:nth-child(11) {

                transform: rotate(300deg);



                &::before {

                    -webkit-animation-delay: -0.2s;

                    animation-delay: -0.2s;

                }

            }



            &:nth-child(12) {

                transform: rotate(330deg);



                &::before {

                    -webkit-animation-delay: -0.1s;

                    animation-delay: -0.1s;

                }

            }



        }

    }



}



@-webkit-keyframes spinner {

    0% {

        transform: scale(0, 0);

    }



    10% {

        transform: scale(0, 0);

    }



    50% {

        transform: scale(1, 1);

    }



    90% {

        transform: scale(0, 0);

    }



    100% {

        transform: scale(0, 0);

    }

}



@keyframes spinner {

    0% {

        transform: scale(0, 0);

    }



    10% {

        transform: scale(0, 0);

    }



    50% {

        transform: scale(1, 1);

    }



    90% {

        transform: scale(0, 0);

    }



    100% {

        transform: scale(0, 0);

    }

}









.wrap-loading {

    position: relative;



    &::before,

    &::after {

        content: '';

        display: flex;

        position: absolute;



        flex-direction: column;

        flex-wrap: nowrap;

        justify-content: center;

        align-items: center;

    }



    &::before {

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        background: var(--color-key-t);

        z-index: +1;

        border-radius: var(--bor);

        backdrop-filter: blur(.0625rem) saturate(0);

    }



    &::after {

        content: attr(data-msg);

        z-index: +2;

        text-align: left;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        color: var(--color-key);

        text-shadow: 0 0 3px var(--color-bg1);

        margin-top: 5%;

    }



    & .loading-indicator {

        position: absolute;

        display: block;

        width: 15%;

        max-width: 7rem;

        height: auto;

        aspect-ratio: 1;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        margin-top: -7%;

        --color: var(--color-key);

        z-index: +3;



        & .loading-bullet {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;



            &::before {

                display: block;

                width: 15%;

                height: 15%;

                margin: 0 auto;

                content: "";

                border-radius: 100%;

                background-color: var(--color);

                transform: translate(-50%, -50%);

                -webkit-animation: spinner 1.2s infinite ease-in-out both;

                animation: spinner 1.2s infinite ease-in-out both;

            }



            &:nth-child(2) {

                transform: rotate(30deg);



                &:before {

                    -webkit-animation-delay: -1.1s;

                    animation-delay: -1.1s;

                }

            }



            &:nth-child(3) {

                transform: rotate(60deg);



                &::before {

                    -webkit-animation-delay: -1s;

                    animation-delay: -1s;

                }

            }



            &:nth-child(4) {

                transform: rotate(90deg);



                &::before {

                    -webkit-animation-delay: -0.9s;

                    animation-delay: -0.9s;

                }

            }



            &:nth-child(5) {

                transform: rotate(120deg);



                &::before {

                    -webkit-animation-delay: -0.8s;

                    animation-delay: -0.8s;

                }

            }



            &:nth-child(6) {

                transform: rotate(150deg);



                &::before {

                    -webkit-animation-delay: -0.7s;

                    animation-delay: -0.7s;

                }

            }



            &:nth-child(7) {

                transform: rotate(180deg);



                &::before {

                    -webkit-animation-delay: -0.6s;

                    animation-delay: -0.6s;

                }

            }



            &:nth-child(8) {

                transform: rotate(210deg);



                &::before {

                    -webkit-animation-delay: -0.5s;

                    animation-delay: -0.5s;

                }

            }



            &:nth-child(9) {

                transform: rotate(240deg);



                &::before {

                    -webkit-animation-delay: -0.4s;

                    animation-delay: -0.4s;

                }

            }



            &:nth-child(10) {

                transform: rotate(270deg);



                &::before {

                    -webkit-animation-delay: -0.3s;

                    animation-delay: -0.3s;

                }

            }



            &:nth-child(11) {

                transform: rotate(300deg);



                &::before {

                    -webkit-animation-delay: -0.2s;

                    animation-delay: -0.2s;

                }

            }



            &:nth-child(12) {

                transform: rotate(330deg);



                &::before {

                    -webkit-animation-delay: -0.1s;

                    animation-delay: -0.1s;

                }

            }

        }

    }











}





.btn-wrap.wrap-loading {

    overflow: hidden;

    text-align: center;

    padding: .5rem !important;



    &::after {

        margin-top: unset;

        left: unset;

        right: 3rem;

        transform: translateY(-50%);

    }



    & .loading-indicator {

        position: absolute;

        display: block;

        width: auto;

        height: 1.25rem;

        aspect-ratio: 1;

        top: 50%;

        left: unset;

        right: 1rem;

        margin-top: unset;

        transform: translateY(-50%);

        --color: var(--color-key);

        z-index: +3;

    }



}





.btn-loading {

    &::after {

        content: 'autorenew' !important;

        animation: rotate 3s infinite linear;

        top: calc(50% - .5rem);

        width: 1rem;

        height: 1rem;

        line-height: 1rem;

        font-size: 1rem;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

    }

}



@keyframes rotate {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



@-webkit-keyframes rotate {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}







/* <-- Loading */









/* table re-styling --> */



/* table default --> */

table {

    border: 0;

    width: 100%;

    position: relative;

    border-top: solid 0.125rem var(--color-key)

}



td,

th {

    padding: .625rem .625rem;

    text-align: center;

    margin: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: .875rem;

    line-height: 1.5rem;

}





/* <-- table default  */





/* widget table --> */

.widget table {

    border-top: none;

    width: 100%;

    table-layout: auto;



    & thead th {

        padding: 0 0.6rem;

        height: calc((9rem / 5) - 2px);

        color: var(--color-txt4);

    }



    & tbody>tr {

        border-top: solid 0.125rem var(--color-bd1);

        opacity: .6;

        position: relative;



        & th,

        td {

            padding: 0 0.6rem;

            text-align: center;

            font-size: .875rem;

            color: var(--color-txt9);

            height: calc((9rem / 5) - 1px);

        }



        &:hover {

            opacity: 1;

            background: var(--color-bg2);

        }

    }



}



.widget .contents.involve {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: flex-start;

    gap: var(--gap);

}



.widget .involve-project+table {

    width: calc(100% - 6rem - var(--gap));

}







/* <-- widget table */



/* board-list table --> */



.board-list table {

    table-layout: fixed;

    max-width: 100% !important;



    & tr {

        &:has(input, label, button) {

            opacity: 1 !important;

        }

    }



    & th,

    td {

        padding: .625rem .625rem;

        text-align: center;

        margin: 0;

        white-space: nowrap;

        font-size: .875rem;

        line-height: 1.5rem;





        & .cell {

            font-size: inherit;

            line-height: inherit;

        }



        &:has(input[type=checkbox]) {

            &:not(:has(label)) {

                position: relative;

                cursor: pointer;



                &::before {

                    content: 'done';

                    display: block;

                    top: 50%;

                    left: 50%;

                    transform: translate(-50%, -50%);

                    color: var(--color-txt3);

                    background-color: var(--color-sd3);

                    width: 1.25em;

                    height: 1.25em;

                    line-height: 1.25em;

                    text-align: center;

                    border-radius: var(--bor);

                    position: absolute;

                    font-family: 'Material Symbols Outlined';

                    font-weight: normal;

                    font-style: normal;

                    font-size: 1em;

                    letter-spacing: normal;

                    text-transform: none;

                    white-space: nowrap;

                    word-wrap: normal;

                    direction: ltr;

                    -webkit-font-smoothing: antialiased;

                }



                &:has(input[type=checkbox]:checked)::before {

                    background-color: var(--color-key);

                    color: var(--color-bg1);

                    font-weight: bold;

                }

            }

        }





        &:has(>label) {

            padding: 0;



            & label {

                display: block;

                width: 100%;

                padding: .625rem .625rem;

                cursor: pointer;

                margin: 0 auto;

                font-size: .875rem;

                line-height: 1.5rem;

            }



            & input+label {

                height: 2.75rem;



                &::before {

                    top: 50%;

                    left: 50%;

                    transform: translate(-50%, -50%);

                }

            }

        }



        &:has(button) {

            padding: 0;



            & button {

                margin: -.625rem -.625rem;

                font-size: .75rem;

                height: unset;

                padding: 0 .75rem;

                opacity: 1;

                background: #fff;

            }

        }

    }





    & thead {

        border-bottom: solid 1px var(--color-bd1);



        & th,

        td {

            font-weight: inherit;

            color: var(--color-txt7);

            position: relative;

            font-size: .875rem;



        }

    }



    & tbody {

        & tr {

            position: relative;

            cursor: pointer;

            opacity: .65;



            &:hover {

                opacity: 1;

                background: #00ff0018;

            }



            &.current {

                background: var(--color-key-t);

                opacity: 1;



                &:hover {

                    background: var(--color-key-t);

                }

            }



            &:nth-child(even) {

                background: var(--color-sd1);



                &:hover {

                    opacity: 1;

                    background: #00ff0018;

                }



                &.current {

                    background: var(--color-key-t);

                    opacity: 1;



                    &:hover {

                        background: var(--color-key-t);

                    }

                }

            }



        }



    }



}





/* <-- board-list table  */





/* inner table --> */



.inner table,

table.inner {

    min-width: 100%;

    font-size: 1rem;

    color: var(--color-txt);

    line-height: inherit;

    border: 0;

    position: relative;

    border-top: solid 0.125rem var(--color-key) !important;

    border-bottom: 1px solid var(--color-bd1);



    & th,

    thead td {

        color: var(--color-txt7);

        opacity: .9;

    }





    & th,

    td {

        padding: .625rem .625rem;

        min-width: 3rem;

        text-align: center;

        margin: 0;

        white-space: nowrap;

        font-size: .875rem;

        line-height: 1.5rem;



        & button[type=button] {

            margin: -.625rem -.625rem;

            font-size: .75rem;

            height: unset;

            padding: 0 .75rem;

        }



        &[rowspan] {

            border-right: 1px solid var(--color-bd1);

        }

        & .radio-wrap, & .checkbtn-wrap {

            display: inline-block;

        }

        & .node-count {

            font-size: 1.5rem;

            font-weight: bold;

            color: var(--color-key);

        }



        & ul.agreement {

            display: flex;

                flex-direction: column;

                flex-wrap: nowrap;

                align-items: stretch;

                justify-content: flex-start;

                gap: calc(var(--gap) / 2);

                list-style: disc;

                padding-left: 1rem;

            & > li {

                text-align: left;

                list-style: inherit;

            }

        }

        & ul.node-info {

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            justify-content: space-between;

            gap: calc(var(--gap) / 2);



            & > li {

                display: block;

                width: calc((100% / 2) - (var(--gap) * (1 / 2)));

                text-align: left;

                line-height: 1.5rem;

                font-size: 1rem;

                & span.title {

                    font-size: .875rem;

                    display: inline-block;

                    color: var(--color-sd8);

                    width: 7rem;

                }

            }

        }

    }



    & tbody>tr,

    tfoot>tr {

        border-top: 1px solid var(--color-bd1);



        &.current {

            background: var(--color-key-t);

            opacity: 1;

        }

    }



    & th+td {

        border-left: 1px solid var(--color-bd1);

    }



    &.month-report tbody {

        & tr>th {

            border-left: 1px solid var(--color-bd1);

        }



        tr:first-child>th:first-child {

            border-left: none;

        }

    }

}



table.inner.vertical {

    max-width: 90%;

    min-width: unset;



    & tbody {

        & th {

            max-width: 4rem;

            color: var(--color-sd7);

        }

        & th ~ th {

            border-left: 1px solid var(--color-bd1);

        }

        & td {}

    }

    &.billing {

        max-width: 100%;

        border-bottom: 1px solid var(--color-key);

        margin-bottom: 1rem;

        & tr > th {

            min-width: unset;

            max-width: unset;

            width: 160px;

        }





    }

    &.agreement {

        margin-top: 2rem;

        max-width: 100%;

        border-bottom: 1px solid var(--color-key);

        & tr > th {

            min-width: unset;

            max-width: unset;

            width: 160px;

        }

    }

}



/* <-- inner table  */

















/* partition table --> */

.partition {

    width: 100%;

}



.partition table {

    overflow: hidden;



    & thead {

        & tr {

            border-bottom: solid 1px var(--color-bd1);

        }

    }



    & tbody {

        & tr {

            & td {

                &:has(div.check) {

                    background: var(--color-bg1);

                    position: relative;

                    z-index: +1;

                    border-right: solid 1px var(--color-bd1);

                    border-bottom: solid 1px var(--color-bd1);

                    text-align: center;

                    overflow: visible;



                    &::after {

                        content: '';

                        display: block;

                        position: absolute;

                        width: 100vw;

                        height: 1px;

                        background: var(--color-bd2);

                        left: 0;

                        bottom: 0;

                        opacity: 0.2;

                    }

                }



                & .check {

                    display: block;

                    position: relative;

                    width: calc(100% + 1.25rem);

                    height: calc(100% + 1.25rem);

                    margin: -.625rem -.625rem;



                    &>input+label {

                        width: 100%;

                        height: 100%;

                        display: flex;

                        flex-direction: column;

                        justify-content: center;

                        align-items: center;

                        position: absolute;

                        cursor: pointer;

                        background: #fff;

                        top: 0;

                        left: 0;



                        &::before {

                            content: 'done';

                            display: block;

                            color: var(--color-txt5);

                            background-color: var(--color-sd3);

                            width: 1.25em;

                            height: 1.25em;

                            line-height: 1.25em;

                            text-align: center;

                            border-radius: var(--bor);

                            position: absolute;

                            top: 50%;

                            left: 50%;

                            transform: translate(-50%, -50%);



                            font-family: 'Material Symbols Outlined';

                            font-weight: normal;

                            font-style: normal;

                            font-size: 1em;

                            letter-spacing: normal;

                            text-transform: none;

                            white-space: nowrap;

                            word-wrap: normal;

                            direction: ltr;

                            -webkit-font-smoothing: antialiased;

                        }



                    }



                    & input[type="checkbox"],

                    input[type="radio"] {

                        display: none;



                        &:checked+label::before {

                            color: var(--color-bg1);

                            background: var(--color-key);

                        }



                    }



                }



            }



            &>* {

                position: relative;

                opacity: 1;

            }



            &:nth-child(even):after {

                content: none;

            }



            &:hover::after {

                content: none;

            }

        }

    }

}









/* <-- partition table  */

/*  topology table --> */



.table-wrap:has(table.topology) {

    max-width: 100%;

    overflow-x: auto;

    margin-top: 0;

}



table.topology {

    border: none;

    overflow: hidden;

    table-layout: auto;

    min-width: 100%;

    max-width: fit-content;

    /* font-family: monospace; */



    & th,

    td {

        padding: 0;

        font-size: .875rem;

        position: relative;

        box-shadow: inset 0 0 0 .5px var(--color-bd1);

        min-width: 2rem;

    }



    & th {

        font-weight: bold;

        font-size: .75rem;

        background: var(--color-sd1);

        box-shadow: unset;

    }



    & td:hover {

        overflow: visible;



        &::before,

        &::after {

            content: '';

            display: block;

            position: absolute;

            width: 100%;

            height: 100%;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            background: var(--color-key);

            opacity: .2;

            pointer-events: none;

        }



        &::before {

            width: 100vw;

        }



        &::after {

            height: 100vh;

        }

    }

}





.column header p.info::before {

    content: '\24D8';

    padding-right: .5em;

    color: var(--color-txt3);

}



.legend-wrap {

    width: 100%;



    & .title {

        line-height: 1.75rem;

        font-size: 1rem;

        font-weight: 600;

        color: var(--color-txt6);

        border-bottom: solid 1px var(--color-key);

    }



    &>ul {

        display: flex;

        flex-direction: column;

        flex-wrap: nowrap;

        align-items: stretch;

        justify-content: flex-start;

        gap: calc(var(--gap) / 4);

        padding-top: calc(var(--gap) / 2);

        font-size: .75rem;



        & li {

            display: flex;

            flex-direction: row;

            flex-wrap: wrap;

            justify-content: flex-start;

            gap: calc(var(--gap) / 2);

            /* font-family: monospace; */



            & .legend {

                position: relative;

                width: 4rem;

                line-height: 1.25rem;

                color: var(--color-txt4);



                &::after {

                    content: '=';

                    display: block;

                    position: absolute;

                    top: 0;

                    right: 0;

                    color: var(--color-txt4)

                }

            }



            & .legend-desc {

                flex: 1;

                line-height: 1.25rem;

            }

        }

    }

}



.legend-wrap.nic li .legend:after {

    content: ':';

}







/* <-- topology table  */





/* element table -> */

section.board-list-wrap:has(.pinned) {

    max-height: var(--h);



    & .board-list.pinned {

        max-height: calc(var(--h) - 9.5625rem);



        & .tablewrap {



            & .el-table__body-wrapper {

                height: 100%;

                max-height: calc(var(--h) - 14.7rem);

                overflow-y: auto;

                overflow-x: hidden;

            }

        }

    }



    & .pagination {



        & .pagination {

            margin: 0;

            padding: 0;

            border: none;

        }

    }

}







.tablewrap {

    width: 100%;

    max-width: 100%;

}



.form-wrap+.board-list>.tablewrap {

    min-height: 14rem;

}







.el-table__inner-wrapper table {

    table-layout: auto;

    border-top: none;



    & thead {

        border-top: solid 0.125rem var(--color-key);

    }



    & tbody {

        /* border-top: solid 0.125rem var(--color-bd1);

        border-bottom: solid 0.125rem var(--color-bd1); */



        & tr:nth-child(even) {

            background: var(--color-bg2);



        }

    }



    & th,

    td {

        padding: 0;

        text-align: unset;

        margin: unset;

        white-space: unset;

        overflow: unset;

        text-overflow: unset;

        font-size: unset;

        line-height: unset;

        box-sizing: border-box;



        &>.cell {

            padding: .625rem .625rem;

            text-align: center;

            margin: 0;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            font-size: .875rem;

            line-height: 1.5rem;

        }



        &.job-status,

        &.status,

        &.tag {

            padding: .625rem .625rem;

            text-align: center;

            margin: 0;



            &.open,

            &.running {

                --tag-color: var(--color-posi2);

            }





            &.pending {

                --tag-color: var(--color-txt);

            }



            &.close,

            &.canceled {

                --tag-color: var(--color-alert);

            }



            &.completed {

                --tag-color: var(--color-posi3);

            }



            &.up {

                --tag-color: var(--color-posi2);

            }



            &.down {

                --tag-color: var(--color-alert);

            }



            & .cell {

                color: var(--tag-color);

                padding: 0;

                display: inline-block;

                text-transform: uppercase;

                padding: 0.2em 0.4em;

                text-align: center;

                border: solid 1px;

                font-size: .75rem;

                font-weight: 400;

                border-radius: var(--bor);

                text-align: center;

                background: var(--color-bg1);

                line-height: 1em;

            }

        }

    }

}





dialog .tablewrap {

    max-width: 50vw;

}



/* 사용자 > 내 정보 > 내 프로젝트 테이블 간격 별건 처리 */

#user-02 .board-list table {

    table-layout: fixed;

}



#user-02 .board-list colgroup {

    display: none;

}



#user-02 .board-list tr th:nth-child(1),

#user-02 .board-list tr td:nth-child(1) {

    /* No */

    width: 8rem;

}



#user-02 .board-list tr th:nth-child(2),

#user-02 .board-list tr td:nth-child(2) {

    /* 프로젝트코드 */

    width: 10rem;

}



#user-02 .board-list tr th:nth-child(3),

#user-02 .board-list tr td:nth-child(3) {

    /* 프로젝트명 */

    width: 10rem;

}



#user-02 .board-list tr th:nth-child(4),

#user-02 .board-list tr td:nth-child(4) {

    /* 멤버 수 */

    width: 4rem;

}



#user-02 .board-list tr th:nth-child(5),

#user-02 .board-list tr td:nth-child(5) {

    /* 상태 */

    width: 4rem;

}



#user-02 .board-list tr th:nth-child(6),

#user-02 .board-list tr td:nth-child(6) {

    /* 그룹 관리자 */

    width: 16rem;

}



#user-02 .board-list tr th:nth-child(7),

#user-02 .board-list tr td:nth-child(7) {

    /* MLFlow 서버 정보 */

    width: calc(100% - 64rem);

    min-width: 20rem;

}



#user-02 .board-list tr th:nth-child(8),

#user-02 .board-list tr td:nth-child(8) {

    /* 등록일자 */

    width: 12rem;

}



/* 사용자 > 내 정보 > 내 알림 테이블 간격 별건 처리 */



#user-03 colgroup {

    display: none;

}



#user-03 tr th:nth-child(1),

#user-03 tr td:nth-child(1) {

    /* No */

    width: 8rem;

}



#user-03 tr th:nth-child(2),

#user-03 tr td:nth-child(2) {

    /* 알림 ID */

    width: 8rem;

}



#user-03 tr th:nth-child(3),

#user-03 tr td:nth-child(3) {

    /* 알림 ID */

    width: 28rem;

}



#user-03 tr th:nth-child(3) .cell,

#user-03 tr td:nth-child(3) .cell {

    /* 제목 */

    text-align: left;

}



#user-03 tr th:nth-child(4),

#user-03 tr td:nth-child(4) {

    /* 제목 */

    width: calc(100% - 56rem);

}



#user-03 tr th:nth-child(4) .cell,

#user-03 tr td:nth-child(4) .cell {

    /* 내용 */

    text-align: left;

}



#user-03 tr th:nth-child(5),

#user-03 tr td:nth-child(5) {

    /* 등록일시 */

    width: 12rem;

}





/* 실험 및 모델 - 등록된 모델 테이블 간격 별건 처리 */

#experiments-02 table {

    table-layout: fixed;

}



#experiments-02 colgroup {

    display: none;

}



#experiments-02 tr th:nth-child(1),

#experiments-02 tr td:nth-child(1) {

    /* No */

    width: 8rem;

}



#experiments-02 tr th:nth-child(2),

#experiments-02 tr td:nth-child(2) {

    /* 모델명 */

    width: 12rem;

}



#experiments-02 tr th:nth-child(3),

#experiments-02 tr td:nth-child(3) {

    /* 일시 */

    width: 10rem;

}





#experiments-02 tr th:nth-child(4),

#experiments-02 tr td:nth-child(4) {

    /* 일시 */

    width: 10rem;

}



#experiments-02 tr th:nth-child(5),

#experiments-02 tr td:nth-child(5) {

    /* version */

    width: 10rem;

}



#experiments-02 tr th:nth-child(6),

#experiments-02 tr td:nth-child(6) {

    /*  일시 */

    width: 10rem;

}



#experiments-02 tr th:nth-child(7),

#experiments-02 tr td:nth-child(7) {

    /*  stage */

    width: 10rem;

}



#experiments-02 tr th:last-child,

#experiments-02 tr td:last-child {

    /*  description */



    white-space: wrap;

    text-align: left;

    width: calc(100% - 64rem);

    min-width: 20rem;

}





/* 컨테이너 이미지 별건 처리 */

.container-image table {

    table-layout: fixed;

}



.container-image colgroup {

    display: none;

}



.container-image tr th:nth-child(1),

.container-image tr td:nth-child(1) {

    /* No */

    width: 8rem;

}



.container-image tr th:nth-child(2),

.container-image tr td:nth-child(2) {

    /* 속성 */

    width: 8rem;

}



.container-image tr th:nth-child(3),

.container-image tr td:nth-child(3) {

    /* 구분 */

    width: 10rem;

}



.container-image tr th:nth-child(4),

.container-image tr td:nth-child(4) {

    /* 태그 */

    width: 10rem;

}



.container-image tr th:nth-child(5),

.container-image tr td:nth-child(5) {

    /* 이미지명 */

    width: calc(100% - 66rem);

    min-width: 20rem;

}



.container-image tr th:nth-child(6),

.container-image tr td:nth-child(6) {

    /* 파일 크기 */

    width: 8rem;

}



.container-image tr th:nth-child(7),

.container-image tr td:nth-child(7) {

    /* 등록자 */

    width: 10rem;

}



.container-image tr th:nth-child(8),

.container-image tr td:nth-child(8) {

    /* 등록일시 */

    width: 12rem;

}



/* 실험 및 모델 테이블 별건 처리 */

.labmodel table {

    table-layout: fixed;

}



.labmodel colgroup {

    display: none;

}



.labmodel tr th:nth-child(1),

.labmodel tr td:nth-child(1) {

    /* No */

    width: 8rem;

}



.labmodel tr th:nth-child(2),

.labmodel tr td:nth-child(2) {

    /* 프로젝트 코드 */

    width: 10rem;

}



.labmodel tr th:nth-child(3),

.labmodel tr td:nth-child(3) {

    /* 프로젝트명 */

    /* width: 10rem; */

    width: calc(50% - 46rem);

    min-width: 20rem;

}



.labmodel tr th:nth-child(4),

.labmodel tr td:nth-child(4) {

    /* 상태 */

    width: 6rem;

}



.labmodel tr th:nth-child(5),

.labmodel tr td:nth-child(5) {

    /* ML Flow 서버 정보 */

    width: calc(50% - 46rem);

    min-width: 20rem;

}



.labmodel tr th:nth-child(6),

.labmodel tr td:nth-child(6) {

    /* 등록자 */

    width: 10rem;

}



.labmodel tr th:nth-child(7),

.labmodel tr td:nth-child(7) {

    /* 등록일시 */

    width: 12rem;

}





.tablewrap[common-table-id="BBSUSE0001"] {

    & table {

        table-layout: fixed;

    }



    & colgroup {

        display: none;

    }



    & tr th:nth-child(1),

    tr td:nth-child(1) {

        /* No */

        width: 8rem;

    }



    & tr th:nth-child(2),

    tr td:nth-child(2) {

        /* 제목 */

        width: calc(100% - 40rem);

    }



    & tr th:nth-child(3),

    tr td:nth-child(3) {

        /* 분류 */

        width: 8rem;

    }



    & tr th:nth-child(4),

    tr td:nth-child(4),

    tr th:nth-child(5),

    tr td:nth-child(5) {

        /* 등록일시 */

        width: 12rem;

    }

}



.tablewrap[common-table-id="BBSUSE0002"] {

    & table {

        table-layout: fixed;

    }



    & colgroup {

        display: none;

    }



    & tr th:nth-child(1),

    tr td:nth-child(1) {

        /* No */

        width: 8rem;

    }



    & tr th:nth-child(2),

    tr td:nth-child(2) {

        /* 제목 */

        width: calc(100% - 56rem);

    }



    & tr th:nth-child(3),

    tr td:nth-child(3) {

        /* 상태 */

        width: 8rem;

    }



    & tr th:nth-child(4),

    tr td:nth-child(4) {

        /* 상태 */

        width: 16rem;

    }



    & tr th:nth-child(5),

    tr td:nth-child(5),

    tr th:nth-child(6),

    tr td:nth-child(6) {

        /* 등록일시 */

        width: 12rem;

    }

}





.tablewrap[common-table-id="BBSUSE0003"] {

    & table {

        table-layout: fixed;

    }



    & colgroup {

        display: none;

    }



    & tr th:nth-child(1),

    tr td:nth-child(1) {

        /* No */

        width: 8rem;

    }



    & tr th:nth-child(2),

    tr td:nth-child(2) {

        /* 제목 */

        width: calc(100% - 32rem);

    }





    & tr th:nth-child(3),

    tr td:nth-child(3),

    tr th:nth-child(4),

    tr td:nth-child(4) {

        /* 등록일시 */

        width: 12rem;

    }

}



.tablewrap.admin[common-table-id="BBSUSE0001"] {

    & table {

        table-layout: fixed;

    }



    & colgroup {

        display: none;

    }



    & tr th:nth-child(1),

    tr td:nth-child(1) {

        /* No */

        width: 8rem;

    }



    & tr th:nth-child(2),

    tr td:nth-child(2) {

        /* 분류 */

        width: 8rem;

    }



    & tr th:nth-child(3),

    tr td:nth-child(3) {

        /* 제목 */

        width: calc(100% - 56rem);

    }



    & tr th:nth-child(4),

    tr td:nth-child(4),

    tr th:nth-child(5),

    tr td:nth-child(5) {

        /* 개시여부, 대시보드 노출 */

        width: 8rem;

    }



    & tr th:nth-child(6),

    tr td:nth-child(6),

    tr th:nth-child(7),

    tr td:nth-child(7) {

        /* 등록일시 */

        width: 12rem;

    }

}





/* 데이터셋 테이블 별건 처리 */



.dataset table {

    table-layout: fixed;

}



.dataset colgroup {

    display: none;

}



.dataset tr th:nth-child(1),

.dataset tr td:nth-child(1) {

    /* No */

    width: 8rem;

}



.dataset tr th:nth-child(2),

.dataset tr td:nth-child(2) {

    /* 속성 */

    width: 8rem;

}



.dataset tr th:nth-child(3),

.dataset tr td:nth-child(3) {

    /* 프로젝트 */

    width: 8rem;

}



.dataset tr th:nth-child(4),

.dataset tr td:nth-child(4) {

    /* 디렉토리 */

    width: 12rem;

}



.dataset tr th:nth-child(5),

.dataset tr td:nth-child(5) {

    /* 파일명 */



    width: calc(100% - 72rem);

    min-width: 20rem;

}



.dataset tr th:nth-child(6),

.dataset tr td:nth-child(6) {

    /* 파일크기 */

    width: 10rem;

}



.dataset tr th:nth-child(7),

.dataset tr td:nth-child(7) {

    /* 등록자 */

    width: 14rem;

}



.dataset tr th:nth-child(8),

.dataset tr td:nth-child(8) {

    /* 등록일시 */

    width: 12rem;

}













/* 어드민 > 보안 관리 > 권한별 메뉴 */

.board-list.auth-menu {

    & tr :is(th, td) {

        &:nth-child(1) {

            /* Checkbox */

            width: 4rem;

        }



        &:nth-child(2) {

            /* No */

            width: 8rem;

        }



        &:nth-child(3) {

            /* 권한코드 */

            width: 12rem;

        }



        &:nth-child(4) {

            /* 권한명 */

            width: 12rem;

        }



        &:nth-child(5) {

            /* 메뉴 구분 */

            width: calc(100% - 70rem);

            min-width: 15rem;

        }



        &:nth-child(6) {

            /* 메뉴명 */

            width: 8rem;

        }



        &:nth-child(7) {

            /* 메뉴유형 */

            width: 8rem;

        }



        &:nth-child(8) {

            /* 등록일시 */

            width: 12rem;

        }



        &:nth-child(9) {

            /* 등록취소 */

            width: 6rem;

        }



    }

}



.board-list.auth-role {

    & tr :is(th, td) {

        &:nth-child(1) {

            /* Checkbox */

            width: 4rem;

        }



        &:nth-child(2) {

            /* No */

            width: 8rem;

        }



        &:nth-child(3) {

            /* 권한코드 */

            width: 12rem;

        }



        &:nth-child(4) {

            /* 권한명 */

            width: 12rem;

        }



        &:nth-child(5) {

            /* 롤ID */

            width: 8rem;



        }



        &:nth-child(6) {

            /* 롤 명 */

            width: 14rem;

        }



        &:nth-child(7) {

            /* 롤패턴 */

            /* width: 12rem; */



            width: calc(100% - 70rem);

            min-width: 15rem;

        }



        &:nth-child(8) {

            /* 등록일시 */

            width: 12rem;

        }



        &:nth-child(9) {

            /* 등록취소 */

            width: 6rem;

        }



    }

}



#systemlog-01 .board-list {

    & colgroup {

        display: none;

    }



    & tr {

        width: 100%;

    }



    & tr :is(th, td) {

        &:nth-child(1) {

            /* No */

            width: 8rem;

        }



        &:nth-child(2) {

            /* 요청일시 */

            width: 12rem;

        }





        &:nth-child(3) {

            /* API End point */

            width: calc(100% - 70rem);

            min-width: 20rem;

            text-align: left;



            & .cell {

                width: 100%;

                text-align: left;

            }

        }



        &:nth-child(4) {

            /* method */

            width: 10rem;

        }



        &:nth-child(5) {

            /* 상태코드 */

            width: 6rem;

        }





        &:nth-child(6) {

            /* 응답일시 */

            width: 12rem;

        }



        &:nth-child(7) {

            /* 요청자 ID */

            width: 8rem;

        }

    }

}







.board-list.containner-image-table {



    & table {

        table-layout: fixed;

        width: 100% !important;

    }



    & colgroup {

        display: none;

    }



    & tr {

        width: 100%;

    }



    & tr :is(th, td) {

        position: relative;

        padding: 0 !important;





        &:nth-child(1) {

            /* No */

            width: 6rem !important;

        }



        &:nth-child(2) {

            /* Platform */

            width: 12rem;

        }



        &:nth-child(3) {

            /* 이미지명 */

            width: calc(100% - 52rem);

            min-width: 20rem;

            text-align: left;



            & .cell {

                width: 100%;

                text-align: left;

            }

        }



        &:nth-child(4) {

            /* 태그 */

            width: 12rem;

        }



        &:nth-child(5) {

            /* 파일크기 */

            width: 8rem;

        }



        &:nth-child(6) {

            /* 상태 */

            width: 8rem;

        }



        &:nth-child(7) {

            /* 등록일시 */

            width: 12rem;

        }

    }

}



/* <- element table  */











/* <-- table re-styling */





/* <-- Tab styling  */







/* calendar ui debugging --> */





.datepick .dp--menu-wrapper {



    --dp-font-family: inherit;

    --dp-month-year-row-height: 1rem;

    --dp-month-year-row-button-size: 1rem;

    --dp-button-icon-height: 1rem;

    --dp-common-padding: .1rem;

    --dp-input-icon-padding: .1rem;

    --dp-input-padding: .1rem;

    --dp-action-buttons-padding: .1rem;

    --dp-row-margin: .1rem;

    --dp-font-size: 0.75rem;

    --dp-preview-font-size: 0.75rem;

    --dp-time-font-size: 0.75rem;

    --gap: .875rem;



    & button[type=button] {

        font-size: .875rem;

        line-height: 1.5em;

        padding: 0 0.5em;

        margin: unset;

        width: unset;

        height: unset;



        &.dp__btn.dp__button.dp__overlay_action {

            margin: 0 auto;

            display: block;

        }

    }





    & .dp__calendar_row {

        margin: 0;

    }



    & .dp__month_year_row {

        width: fit-content;

        margin: 0 auto;

        display: flex;

        justify-content: center;

        align-items: center;

        flex-wrap: nowrap;

        flex-direction: row;

        gap: var(--gap);



        & .dp__month_year_wrap {

            width: fit-content;

            gap: var(--gap);

        }

    }



    & .dp__overlay_cell_pad {

        padding: 0.5em 0;

    }



    & .dp__action_buttons {

        gap: 0.5rem;

    }



}



/* <-- calendar ui debugging  */









.tab-wrapper ul.tab {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    gap: calc(var(--gap) / 4);

    margin-top: calc((var(--gap) / 2) * -1);

    margin-bottom: calc((var(--gap) / 2) * -1);

}



.tab-wrapper .row ul.tab {

    margin-top: 0;

}



.sub>ul.tab {

    margin-top: 0;

}



.tab-wrapper ul.tab li a {

    display: block;

    position: relative;

    color: var(--color-txt5);

    cursor: pointer;

    line-height: 1.5rem;

    padding: calc(var(--gap) * (4/7)) .75rem calc(var(--gap) * (3/7));

    opacity: .6;

    font-weight: 500;

}





.tab-wrapper ul.tab li a.active {

    color: var(--color-txt7);

    opacity: 1;

}



.tab-wrapper ul.tab li a:hover {

    color: var(--color-txt8);

    opacity: 1;

}





.tab-wrapper ul.tab li.on a.active,

.tab-wrapper ul.tab li.on a {

    color: var(--color-key);

}



.tab-wrapper ul.tab li a.active::before,

.tab-wrapper ul.tab li.on a::before {

    content: '';

    position: absolute;

    display: block;

    width: 100%;

    height: 4px;

    background: var(--color-key);

    top: 0;

    left: 0;

    z-index: +10;

}



.tab-wrapper .tab-content {

    display: none !important;

    opacity: 0;

    /* display: flex !important;

    opacity: 1; */

    transition: all .3s;

    width: 100%;

}



.tab-wrapper .tab-content.active {

    display: flex !important;

    opacity: 1;

}



#metering-billing-01.tab-content.active {

    flex-direction: column;

    gap: var(--gap);

}



/* <-- Tab styling  */







/* Common styling  --> */



.user-profile {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-start;

    gap: .5rem;





    & .id,

    & .title,

    & .part,

    time {

        font-size: .875rem;

        font-weight: 300;

        line-height: 1.75rem;

    }



    & .name {

        font-size: 1rem;

        font-weight: 500;

    }



    & .id {



    }



    & .part {

        &::before {

            content: '/ ';

        }

    }





    & time {



        &::before {

            content: '/ ';

            color: var(--color-txt5);

        }



        &::after {

            content: attr(datetime);

            color: var(--color-txt5);

        }

    }



}



.upload-warning.popup {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: +9999;

    &::before {

        content: '';

        display: block;

        position: fixed;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 100dvw;

        height: 100dvh;

        background: #0005;

        z-index: -1;

        border-radius: var(--bor);

    }

    & .popup-wrap {

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

        gap: 1rem;

        padding: 1rem;

        border-radius: var(--bor);

        box-shadow: 0 0 2rem #0005;

        background: #fff;

        z-index: +10;

        & .popup-header p {

            font-size: 1.5rem;

            line-height: 2rem;

            font-weight: bold;

            color: var(--color-key);

            padding-top: .5rem;

        }

        & .popup-body p {

            font-size: .875rem;

            line-height: 1.25rem;

            text-align: center;

        }

        & .popup-footer {



        }

    }

}







/* <-- Common styling   */