@charset "UTF-8";
@font-face {
    font-family: 'SUIT Variable';
    font-style: normal;
    font-weight: 400;
    src :url('//cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations'),
    url('../../include/font/SUIT-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'SUIT Variable';
    font-style: normal;
    font-weight: 700;
    src :url('//cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations'),
    url('../../include/font/SUIT-Bold.ttf') format('truetype');
}
* {
    font-family: 'SUIT Variable', sans-serif;
}

div.main-menu a:hover {
    color: #8D4DD4;
}

/* 선택된 메뉴 */
div.main-menu li.selected a {
    color: #8D4DD4;
}

div.main-account div.name:hover {
    color: #8D4DD4;
}

a.account-menu-item:hover {
    background-color: #8D4DD4;
}

div.page-title {
    color: #8D4DD4;
}

#contextmenu > div:hover:not(.not-click) {
    background-color: #8D4DD4;
}

div.modal {
    border: 3px solid #8D4DD4;
}

#helpbox {
    border: 3px solid #8D4DD4;
}

ul.submenu-buttons li.selected a {
    background-color: #8D4DD4;
}

ul.submenu-buttons li a:hover {
    background-color: #8D4DD4aa;
}

.s-btn-ok {
    background-color: #8D4DD4;;
}

.pure-button-primary {
    background-color: #8D4DD4;;
}

.modal-title {
    color: #8D4DD4;
}

div.progress-complete {
    background-color: #8D4DD4;
}

html, body { height: 100%; }
body {
    margin: 0;
    background: #fff;
}
.pure-menu-item:hover > .pure-menu-link {
    background:none !important;
}
.page-contents {
    border:none !important;
    border-radius: 0 !important;
    padding:20px !important;
    box-shadow: none !important;
}

.main-head {
    background: linear-gradient(
            170deg,
            #8d4dd4 0%,   /* 보라 */
            #5b6ee1 50%,  /* 중간 블루 */
            #3b82f6 100%  /* 밝은 블루 */
    );
    color: #fff;
    height:50px;
    margin:0 !important;
    position: sticky;
    top: 0;
    /*z-index: 1000;*/
}

.make-container {
    padding:0 !important;
    max-width: 100% !important;
}

#logoLink {
    display:flex;
    text-decoration: none !important;
    margin-right: 71px;
    margin-left: 23px;
}

#headLogo {
    height:20px;
}

#headCaret {
    height:19px;
    position: fixed;
    left:210px;
    top:15px;
    cursor:pointer;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 메뉴 기본 상태 */
ul.submenu-buttons {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
}

/* 열렸을 때 */
ul.submenu-buttons.open {
    max-height: 500px; /* 충분히 큰 값 */
    opacity: 1;
    transform: translateY(0);
}

.project-name {
    margin-left: 24px;
    color:white !important;
    font-size:17px;
}

.main-account {
    display:flex;
    align-items: center;
}
.main-account .name {
    font-size:12px;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.main-account .name:hover {
    color:white !important;
}
.main-account .divider {
    margin:0 10px;
    color:rgba(255,255,255,0.5);
}
.main-account .user-id {
    font-size:12px;
    margin-right: 24px;
}

.submenu-buttons {
    position: absolute;
    left:0;
    top:50px;
    background-color:white;
    padding:0 !important;
    width:240px;
    z-index:10;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.35);
}
.submenu-buttons > li {
    display:block !important;
}
.submenu-buttons > li.selected a {
    background-color:#F6EDFF !important;
    color:#414141 !important;
    font-weight:bold;
    border-radius: 0 !important;
}
.submenu-buttons a {
    display:flex;
    align-items: center;
    color:#414141 !important;
    padding:15px 0 14px 24px !important;
}
.submenu-buttons a:hover {
    background-color:#F6EDFF !important;
    color:#414141 !important;
    font-weight:bold;
    border-radius: 0 !important;
}
.submenu-buttons a img {
    margin-right: 22px;
}

.account-menu {
    position:absolute;
    width:118px;
    right:24px;
    top:50px;
    background-color:white;
    z-index:10;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
    overflow:hidden;
}
.account-menu a {
    padding:10px 17px;
    border:none;
    font-size:12px;
    text-align:left;
    color:#414141 !important;
}
.account-menu a:hover {
    background-color:#F6EDFF !important;
    color:#414141 !important;
    font-weight:bold;
}

#reportMenu {
    height:50px;
    padding-left: 264px !important;
    padding-right: 24px !important;
    background-color: #f5f5f5;
    border-top: 1px solid #d9d9d9 !important;
    border-bottom: none !important;
    overflow-y:hidden;
}
#reportMenu li {
    margin-top: 7px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding:10px 20px !important;
    border-bottom:none !important;
    color:#7B7B7B !important;
}
#reportMenu li.selected {
    position: relative;
    margin-top: 7px;
    border-radius: 6px 6px 0 0;
    padding:10px 20px !important;

    background: #fff; /* ✅ 배경은 무조건 흰색 */
    z-index: 1;

    border: 1px solid transparent; /* 👉 gradient border용 */
}

#reportMenu li.selected span {
    background-image: linear-gradient(170deg, #8d4dd4, #5b6ee1, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#reportMenu li.selected::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 4px 4px 0 0;
    padding: 1px;
    background: linear-gradient(170deg, #8d4dd4, #5b6ee1, #3b82f6);

    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    z-index: -1;
}

/* 🔥 아래쪽 테두리 가리기 */
#reportMenu li.selected::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 0;
    height: 3px;           /* border 두께보다 조금 크게 */
    background: white;      /* 배경색과 동일 */
    z-index: 2;
}

ul#reportMenu #versionPopup {
    border-radius: 3px;
    border: 1px solid #D9D9D9 !important;
    background: white;
    font-size:12px !important;
    margin:9px 0 0 !important;
    padding:4px 10px !important;
    text-align:center;
}

ul#reportMenu #downloadXlsxPptx {
    border-radius: 3px;
    border: 1px solid #D9D9D9 !important;
    background: white;
    font-size:12px !important;
    margin:9px 0 0 !important;
    padding:4px 10px !important;
    text-align:center;
    display:flex;
    align-items: center;
}

ul#reportMenu #saveReport {
    border-radius: 3px;
    border: 1px solid #D9D9D9 !important;
    background: #414141 !important;
    font-size:12px !important;
    margin:9px 24px 0 0 !important;
    padding:4px 10px !important;
    text-align:center;
    color:white !important;
}
ul#reportMenu #saveReport.changed {
    background: red !important;
}

#downloadXlsxPptxPopup {
    position:absolute;
    border-radius: 10px;
    background: white;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-size:12px;
    z-index: 2;
}
#downloadXlsxPptxPopup > div {
    display:flex;
    align-items: center;
    padding:10px 14px;
    cursor:pointer;
}
#downloadXlsxPptxPopup > div:hover {
    background-color:#F6EDFF;
}

#reportMenu .univ-sub-head {
    border-radius: 3px;
    border: 1px solid #D9D9D9 !important;
    background: white !important;
    font-size:12px !important;
    margin:9px 0 0 !important;
    padding:4px 10px !important;
    text-align:center;
}

.custom-tooltip{
    border-radius: 5px;
    border: 1px solid #8D4DD4;
    background: white;
    box-shadow: 0 0 15px 0 rgba(141, 77, 212, 0.20);
    color: #8D4DD4;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 18px */
    letter-spacing: -0.24px;
    max-width:240px;
    padding:12px 17px;
}

.versionName {
    font-size:12px !important;
    margin:10px 0 0 !important;
    padding:4px 10px !important;
    text-align:center;
}