@charset "utf-8";

html, body {overflow: hidden; height: 100%; padding: 0; margin: 0;}
body * {box-sizing: border-box;}


/*-------------------- COMMON --------------------*/
.ico {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: contain; font-size: 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.btn .ico {width: 32px; height: 32px;}
.ico__search {background-image: url(../images/ico_find.png);}
.ico__add {background-image: url(../images/ico_add-circle.svg); background-size: 20px;}
.ico__delete {background-image: url(../images/ico_delete-circle.svg); background-size: 20px;}
.ico__dropdown {background-image: url(../images/ico_dropdown--black.svg);}
.ico__warning {background-image: url(../images/ico_warning.svg);}
.ico__mail {background-image: url(../images/ico_mail.svg); background-size: 16px;}
.ico__discord {background-image: url(../images/ico_discord.svg); background-size: 18px;}
.ico__like {background-image: url(../images/ico_like.svg); background-size: 16px;}
.ico__note {background-image: url(../images/ico_note.svg); background-size: 16px;}
.ico__square-arrow-right {background-image: url(../images/ico_square-arrow-right.svg);}

/* form */
.form-group--search {display: flex; align-items: center; position: relative;}
.form-group--search .it {width: 100%; padding-right: 70px;}
.form-group--search .btn {z-index: 1; position: absolute; right: 0; width: 40px; height: 40px;}


/*-------------------- LAYOUT --------------------*/
#sidebar {z-index: 99; position: fixed; top: 0; bottom: 0; left: 0; width: 280px; height: 100%; background-color: #273343; transition: all 0.3s;}
#container {overflow: auto; height: 100%; margin-left: 280px;}
#content > * {min-width: 1360px; max-width: 1360px; margin: 0 auto; padding-left: 30px; padding-right: 30px;}
#content.content--wide > * {max-width: 1920px;}
#header {align-items: center; z-index: 98; position: sticky; height: 88px;}
#body {position: relative; min-height: calc(100vh - 88px); padding-bottom: 40px;}

body.collapsed #sidebar {width: 72px; background-color: transparent;}
body.collapsed #sidebar .logo {display: none;}
body.collapsed #sidebar .gnb {display: none;}
body.collapsed.hovered #sidebar {width: 280px; background-color: #273343; transition: none;}
body.collapsed.hovered #sidebar .logo {display: flex;}
body.collapsed.hovered #sidebar .gnb {display: flex;}
body.collapsed #container {margin-left: 72px;}


/*-------------------- SIDEBAR --------------------*/
.sidebar-toggle-btn {display: inline-flex; justify-content: center; align-items: center; z-index: 9999; position: fixed; top: 20px; width: 72px; height: 48px;}
.ico__hamburger {background-image: url(../images/ico_hamburger-white--unfold.svg);}
body.collapsed .ico__hamburger {background-image: url(../images/ico_hamburger--fold.svg)}
body.collapsed.hovered .ico__hamburger {background-image: url(../images/ico_hamburger-white__fold.svg)}
.logo {display: flex; justify-content: center; align-items: center; height: 88px;}
.logo > a {display: flex; align-items: center;}
.gnb {position: relative; height: calc(100vh - 88px); padding: 16px 4px 16px 24px;}
.gnb__list {overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; padding-right: 20px;}
.gnb__list::-webkit-scrollbar {width: 6px; height: 6px;}
.gnb__list::-webkit-scrollbar-thumb {border-radius: 8px; background-color: rgba(255,255,255,0.4);;}
.gnb__list::-webkit-scrollbar-track {border-radius: 8px; background-color: rgba(255,255,255,0.1);}
.gnb__list-label {display: flex; align-items: flex-end; width: 100%; height: 16px; margin-left: 48px; color: #6f747b; font-size: 10px; font-weight: bold;}
.gnb__title {display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; border-radius: 4px; color: #d1d6ea; font-size: 14px;}
.gnb__title .ico {background-size: 20px;}
.gnb__title .ico__dashboard {background-image: url(../images/gnb_dashboard.svg);}
.gnb__title .ico__project {background-image: url(../images/gnb_project.svg);}
.gnb__title .ico__education {background-image: url(../images/gnb_education.svg);}
.gnb__title .ico__site {background-image: url(../images/gnb_site.svg);}
.gnb__title .ico__system {background-image: url(../images/gnb_system.svg);}
.gnb__title .ico__statistic {background-image: url(../images/gnb_statistic.svg);}
.gnb__title .ico__assessment {background-image: url(../images/gnb_assessment.svg);}
.gnb__title .ico__code {background-image: url(../images/gnb_code.svg);}
.gnb__title .ico__mentoring {background-image: url(../images/gnb_mentoring.svg);}
.gnb__title .ico__support {background-image: url(../images/gnb_support.svg);}
.gnb__title .ico__dropdown {margin-left: auto; background-image: url(../images/ico_dropdown.svg); transition: transform .3s;}
li.active .gnb__title .ico__dashboard {background-image: url(../images/gnb_dashboard--active.svg);}
li.active .gnb__title .ico__project {background-image: url(../images/gnb_project--active.svg);}
li.active .gnb__title .ico__education {background-image: url(../images/gnb_education--active.svg);}
li.active .gnb__title .ico__site {background-image: url(../images/gnb_site--active.svg);}
li.active .gnb__title .ico__system {background-image: url(../images/gnb_system--active.svg);}
li.active .gnb__title .ico__statistic {background-image: url(../images/gnb_statistic--active.svg);}
li.active .gnb__title .ico__assessment {background-image: url(../images/gnb_assessment--active.svg);}
li.active .gnb__title .ico__code {background-image: url(../images/gnb_code--active.svg);}
li.active .gnb__title .ico__mentoring {background-image: url(../images/gnb_mentoring--active.svg);}
li.active .gnb__title .ico__support {background-image: url(../images/gnb_support--active.svg);}
li.active .gnb__title .ico__dropdown {background-image: url(../images/ico_dropdown--white.svg);}
li.collapsed .gnb__title .ico__dropdown {transform: rotate(-90deg);}
.gnb__list > li > .gnb__title {height: 44px; padding-left: 20px; padding-right: 10px; font-size: 16px; font-weight: bold;}
.gnb__list > li.active > .gnb__title {color: #ffffff; background-color: #5e77ff;}
.skinAdmin .gnb__list > li.active > .gnb__title {color: #ffffff; background-color: #39415a;}
.skinMento .gnb__list > li.active > .gnb__title {color: #ffffff; background-color: #2fcad7;}
.gnb__list ul li .gnb__title {padding-left: 56px;}
.gnb__list ul li .gnb__title:hover {color: #ffffff;}
.gnb__list ul li.active .gnb__title {color: #00faff;}
.gnb__list > li .gnb__list--level-two {visibility: visible; opacity: 1; height: auto; transition: opacity .5s;}
.gnb__list > li.collapsed .gnb__list--level-two {visibility: hidden; opacity: 0; height: 0;}
.gnb__list > li .gnb__list--level-two > li .gnb__list-label  {margin-top: 12px;}
.gnb__list > li .gnb__list--level-two > li:last-child {margin-bottom: 8px;}


/*-------------------- CONTAINER --------------------*/
#header .form-group--search {width: 500px;}
.language-box {position: absolute; top: 4px; right: 160px; transition: all 0.4s 0s;}
.language-box .dropdown-btn {display: flex; align-items: center; position: relative; height: 38px; padding-right: 20px;}
.language-box .dropdown-btn::after {content: ''; position: absolute; top: calc(50% - 8px); right: 0; width: 16px; height: 16px; background-repeat: no-repeat; background-image: url(../images/ico_arr_down.png); background-position: center; background-size: 100% auto; transition: all 0.4s 0s;}
.language-box.active .dropdown-btn::after {transform: rotate(180deg);}
.language-box ul {display: none; z-index: 9999; position: absolute; top: 40px; right: 0; padding: 10px 20px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 0 5px 0 rgba(0, 0, 0, 0.04); border: solid 1px #e1e1e8;}
.language-box.active ul {display: block;}
.language-box .language {position: relative; line-height: 38px; cursor: pointer;}
.language-box .language::before {overflow: hidden; content: ''; display: block; position: absolute; top: calc(50% - 10px); left: 0; width: 20px; height: 20px; border: 1px solid #ced4da; background-repeat: no-repeat; background-position: center; background-size: 32px;}
.language-box .language--ko::before {background-image: url(../images/lang_ko.svg);}
.language-box .language--en::before {background-image: url(../images/lang_en.svg);}
.language-box .language .value {padding-left: 28px; color: #1e1e1e; font-size: 14px;}

#header .gRt {height: 38px; padding-right: 30px;}
#header .gRt.org {top: 4px;}
#header .gRt.auth {top: 45px;}
.mUser2 .sel {height: 38px;}
.lUser1 {top: 40px;}
.mUser1 .sel > .im {width: 32px; height: 32px;}
.mUser1 .sel > .im img {width: 32px; height: 32px;}

#body > .gTitle1 {z-index: 10; position: sticky; top: 88px; background-color: #f2f4f8;}
.mSort2 .mCnt2 ~ .mBtn1 {margin-left: 16px;}
.mSche2 thead th.w_sat {color: #1d76eb;}
.mSche2 thead th.w_sat > strong {color: #1d76eb;}
.mSche2 thead th.w_sun {color: #ec3e5f}
.mSche2 thead th.w_sun > strong {color: #ec3e5f}
.mSort1 .mw1196 .row {display: flex; justify-content: space-between;}
.mSort1 .col.ml120, .mSort1 .col + .col.ml120 {margin-left: unset;}


/*-------------------- 공통UI --------------------*/
.badge {display: inline-flex; justify-content: center; align-items: center; height: 20px; padding: 0 4px; border-width: 1px; border-style: solid; border-radius: 4px; font-size: 11px; font-weight: 500;}
.text-ellipsis {overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap;}

/***** card *****/
.card {overflow: hidden; border: 1px solid #e1e1e8; border-radius: 20px; background-color: #ffffff;}
.card__header {display: flex; align-items: center; padding: 24px 24px 8px;}
.card__header .title {color: #1e1e1e; font-size: 24px; font-weight: bold;}
.card__header .btn-group {display: flex; gap: 8px; margin-left: auto;}
.card__body {padding: 16px 24px;}
.card__header + .card__body {padding-top: 8px;}
.card__footer {padding: 8px 24px 24px;}
.card__footer .btn-group {display: flex; justify-content: center; gap: 8px; width: 100%;}
.card__footer .btn-group button {width: 160px; height: 48px; font-size: 16px; letter-spacing: normal;}


/***** 드래그 일정등록 *****/
.draggable th:first-child,
.draggable td:first-child {border-left: 1px dashed #ced4da;}
.draggable .mSche2 tbody td {height: 56px; cursor: pointer;}
/* 타입: 기본 */
.draggable__item {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 100%; height: 56px; padding: 2px 8px; transition: all 0.3s;}
.draggable__item .title {padding: 0; color: #ffffff; font-size: 14px; font-weight: 500;}
.draggable__item .badge {height: 18px; padding: 0 8px; border-radius: 24px; color: #ffffff; font-size: 12px;}
.draggable__item .result {display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; height: 20px; padding: 0 8px; background-color: #ffffff; border-radius: 4px; font-size: 12px;}
.draggable__item.draggable__item--confirm .result span,
.draggable__item.draggable__item--decline .result span {position: relative; padding-left: 18px;}
.draggable__item.draggable__item--confirm .result span::before,
.draggable__item.draggable__item--decline .result span::before {content: ''; display: block; position: absolute; top: 1px; left: 0; width: 16px; height: 16px; background: url(../images/ico_draggable-check.svg) no-repeat center / 14px;}
/* 타입: 평가 */
.draggable__item.evaluation {background-color: #36c2cf;}
.draggable__item.evaluation:hover {background-color: #1c9490;}
.draggable__item.evaluation .badge {background-color: #268891;}
.draggable__item.evaluation .result span {color: #1c9490;}
.draggable__item.evaluation.requestor {background-color: #2EA5B0;}
.draggable__item.evaluation.requestor:hover {background-color: #1c9490;}
/* 타입: 코드리뷰 */
.draggable__item.review {background-color: #FB923C;}
.draggable__item.review:hover {background-color: #d57c33;}
.draggable__item.review .badge {background-color: #975824;}
.draggable__item.review .result span {color: #ff7300;}
.draggable__item.review.requestor {background-color: #D57C33;}
.draggable__item.review.requestor:hover {background-color: #ab6d3a;}
/* 타입: 멘토링 */
.draggable__item.mentoring {background-color: #5473e8;}
.draggable__item.mentoring:hover {background-color: #6969b1;}
.draggable__item.mentoring .badge {background-color: #575792;}
.draggable__item.mentoring .result span {color: #5757fa;}
.draggable__item.mentoring.requestor {background-color: #7B7BCF;}
.draggable__item.mentoring.requestor:hover {background-color: #6969b1;}
/* 상태: 요청가능 */
.draggable__item.requestor {background-color: #eff5ff;}
.draggable__item.requestor .title {color: #6f747b;}
/* 상태: 요청가능선택 */
.draggable__item.requestor.draggable__item--active {background-color: #2d51d0;}
.draggable__item.requestor.draggable__item--active .title {position: relative; padding-left: 22px; background: url(../images/ico_draggable-check.svg) no-repeat left center / 18px; color: #ffffff;}
/* 상태: 오픈 */
.draggable__item.draggable__item--open {background-color: #5473e8;}
.draggable__item.draggable__item--open:hover {background-color: #32458b;}
/* 상태: 마감 */
.draggable__item.draggable__item--closed {opacity: 0.2;}
.draggable__item.draggable__item--closed:hover {opacity: 1; background-color: #a9acbb !important;}
.draggable__item.draggable__item--closed:not(.draggable__item--open, .evaluation, .review, .mentoring) {background-color: #a9acbb;}
.draggable__item.draggable__item--closed:not(.draggable__item--open, .evaluation, .review, .mentoring):hover {opacity: 0.2;}
.draggable__item.draggable__item--closed .result span {color: #6f747b;}
.draggable__item.draggable__item--open.draggable__item--closed:hover {background-color: #6f747b !important;}
/* 상태: 거절 */
.draggable__item.draggable__item--decline .result span {color: #6f747b;}
.draggable__item.draggable__item--decline .result span::before {filter: invert(75%) contrast(3%);}
/* 상태: 확정 */
.draggable__item.draggable__item--confirm .result {background-color: rgba(0, 0, 0, 0.16);}
.draggable__item.draggable__item--confirm .result span {color: #ffffff;}
/* 상태: 대기시간경과 */
.draggable__item.draggable__item--elapsed {background-color: #90929f;}
.draggable__item.draggable__item--elapsed .result span {position: relative; padding-left: 18px; color: #6f747b;}
.draggable__item.draggable__item--elapsed .result span::before {content: ''; display: block; position: absolute; top: 1px; left: 0; width: 16px; height: 16px; background: url(../images/ico_draggable-check.svg) no-repeat left 1px / 14px; filter: invert(75%) contrast(3%);}


/***** 이름 조회 *****/
.search-box {position: relative;}
.search__result {visibility: hidden; opacity: 0; position: absolute; top: 48px; height: 498px; padding: 8px 4px; border: 1px solid #ced4da; border-radius: 4px; background-color: #ffffff; transition: all 0.2s ease-in-out;}
.search__result.show {visibility: visible; opacity: 1;}
.user-list {display: flex; flex-direction: column; width: 560px; height: 480px; padding: 0 12px 0 16px;}
.user-list li {display: flex;}
.user-list .user {display: flex; gap: 24px; position: relative; padding: 16px 16px;}
.user-list .user + .user {border-top: 1px dashed #ced4da;}
.user-list .user .user__visual {overflow: hidden; flex-shrink: 0; display: flex; width: 104px; height: 104px; border-radius: 50%;}
.user__summary {display: flex; flex-direction: column;}
.user__summary > * {display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; line-height: 1;}
.user__summary .text-ellipsis {max-width: 280px;}
.user__summary .ico__note + p {display: flex; align-items: center; gap: 4px;}
.user__summary-base {margin-bottom: 4px;}
.user__summary-base .name {color: #1e1e1e; font-size: 18px; font-weight: bold;}
.user__summary-base .level {margin-left: 6px; margin-right: 2px; color: #2d51d0; font-size: 20px; font-weight: bold;}
.user__summary-base .name ~ .badge {margin-left: 4px;}
.user__summary-base .badge.leaner {border-color: #e1ecff; background-color: #e1ecff; color: #2d51d0;}
.user__summary-base .badge.mentor {border-color: #e0faf6; background-color: #e0faf6; color: #1c9490;}
.user__summary-base .badge.state-run {border-color: #5e77ff; color: #5e77ff;}
.user__summary-base .badge.state-leave {border-color: #f0b000; color: #f0b000;}
.user__summary-base .badge.state-long-leave {border-color: #ed7d31; color: #ed7d31;}
.user__summary-base .badge.state-stop {border-color: #fa2c37; color: #fa2c37;}
.user__summary-base .badge.state-black {border-color: #263343; color: #263343;}
.user__summary-base .badge.connected {border-color: #5e77ff; box-shadow: inset 0 0 4px #5e77ff; color: #5e77ff;}
.user__summary-base .badge.disconnected {border-color: #6f747b; box-shadow: inset 0 0 4px #666666; color: #6f747b;}
.user-list .user .more {display: flex; justify-content: center; align-items: center; position: absolute; right: 0; transition: all 0.3s ease-in-out;}
.user-list .user .more:hover .ico {background-image: url(../images/ico_square-arrow-right--hover.svg);}
.user-list .user .more .iQ {background: none;}
.user-list .user .more .lQ {top: 28px; bottom: unset;}
.user-list .user .more .lQ:before {top: -6px; bottom: unset; transform: rotate(90deg);}


/***** ckeditor *****/
.editor blockquote, .editor ol, .editor p, .editor ul,
.ck-editor blockquote, .ck-editor ol, .ck-editor p, .ck-editor ul {padding-top: .2em; font-size: 1em; line-height: 1.6em;}
.editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6,
.ck-editor h1, .ck-editor h2, .ck-editor h3, .ck-editor h4, .ck-editor h5, .ck-editor h6 {margin-bottom: .4em; padding-top: .8em; font-weight: bold; line-height: 1.2em;}
.editor h1, .ck-editor h1 {font-size: 2.3em;}
.editor h2, .ck-editor h2 {font-size: 1.84em;}
.editor h3, .ck-editor h3 {font-size: 1.48em;}
.editor h4, .ck-editor h4 {font-size: 1.22em;}
.editor h5, .ck-editor h5 {font-size: 1.06em;}
.editor h6, .ck-editor h6 {font-size: 1em;}
.editor ol, .editor ul, .ck-editor ol, .ck-editor ul {margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px;}
.editor ol li, .ck-editor ol li {list-style: decimal;}
.editor ul li, .ck-editor ul li {list-style: disc;}
.editor pre, .ck-editor pre {min-width: 200px; padding: 1em; border: 1px solid #c4c4c4; border-radius: 2px; background: hsla(0,0%,78%,.3); color: #353535; text-align: left; font-style: normal; white-space: pre-wrap; direction: ltr; tab-size: 4;}
.editor pre code, .ck-editor pre code {padding: 0; border-radius: 0; background: unset;}
.editor table, .ck-editor table {display: table; margin: .9em auto; border: 1px double #b3b3b3; border-collapse: collapse; border-spacing: 0;}
.editor table td, .editor table th, .ck-editor table td, .ck-editor table th {min-width: 2em; padding: .4em; border: 1px solid #bfbfbf;}
.editor img {max-width: 100%; object-fit:scale-down;}


/*-------------------- PAGES --------------------*/

/* login */
.login {overflow: auto; display: flex; position: relative; height: 100vh;}
.login > * {display: flex; justify-content: center; align-items: center; width: 50%; min-width: 820px;}
.login__visual {position: relative; background-color: #1E2B31;}
.login__visual .logo {z-index: 10; position: absolute; top: 4vh; left: 2vw; width: 130px; height: auto;}
.login__visual .bg {max-width: 960px; width: 100%; max-height: 720px; object-fit: contain;}
.login__form {flex-direction: column; position: relative; padding-left: 6vw; padding-right: 16vw;}
.login__form .mLogin2 {width: 430px;}
.login #footer {flex-direction: column; position: absolute; bottom: 8vh; padding: 0;}
.login #footer .txt {display: flex; flex-direction: column; padding: 0;}
.login #footer .txt .bar:before {display: none;}
.login #footer .lnk {padding-top: 24px;}

/* 대시보드 */
.dashboard {display: flex; flex-direction: column; gap: 20px;}
.dashboard > * {margin: unset;}
.dashboard__summary {display: flex; gap: 10px; padding: 28px 20px; border: solid 1px #e1e1e8; border-radius: 20px; background-color: #ffffff;}
.summary-game {width: 300px; padding: 10px; background-color: #f2f4f8; border-radius: 12px;}
.summary-score {width: 300px;}
.summary-score .mList3 .lst.level {border-radius: 12px 12px 0 0;}
.summary-score .mList3 .lst2 {border-radius: 0 0 12px 12px;}
.summary-score .gQ {position: absolute; right: 8px;}
.summary-score .mList3 .progress {padding-bottom: 0;}
.summary-flex {display: flex; align-items: center; gap: 20px; width: calc(100% - (300px + 300px + 20px)); padding: 15px 15px; border: 1px solid #e1e1e8; border-radius: 12px;}
.summary-flex .mList4 {flex: 1; margin: 0;}
.summary-flex .mList4 .tit {padding-bottom: 0; margin-bottom: 14px; font-size: 16px; line-height: 22px;}
.summary-flex .mList4 .lst {display: flex; gap: 4px;}
.summary-flex .mList4 .lst .col a {display: flex; flex-direction: column; width: 56px; height: 56px;}
.summary-flex .mList4 .lst .col .t {padding-top: 12px; font-size: 12px;}
.summary-flex .mList4 .lst .col .n {font-size: 20px; line-height: normal;}
.summary-flex .mList4 + .mList4 {padding-top: 0; border-top: none;}
.summary-flex .mList4 + .mList4 .lst {position: relative;}
.summary-flex .mList4 + .mList4 .lst::before {content: ''; display: block; z-index: 1; position: absolute; left: -10px; width: 1px; height: 75px; background-color: #e1e1e8;}
.dashboard__progress .mTitle1 {margin-bottom: 16px;}
.dashboard__progress .mBox1 {padding: 44px 44px;}
/* TODO: 스케줄 스크롤 높이 이슈 */
.dashboard__schedule .mSche1.isProgress {height: 686px; padding: 44px 44px;}
.mSche2 thead tr th {border-bottom: 1px solid #ced4da;}
.scroll {margin: 0;}

/* 월간일정 */
.monthly-schedule .mGrid1 {position: relative;}
.monthly-schedule .mGrid1.sche > .gRight {padding-left: 0; padding-right: 264px;}
.monthly-schedule .mGrid1 > .mProfile2 {position: absolute; right: 0;}

/* 평가요청 */
.has-evaluation td {border-bottom: 0;}
.has-evaluation + .evaluation-detail td[colspan="8"] {padding-right: 58px; border-top: 1px dashed #ced4da;}
.has-evaluation + .evaluation-detail:hover td {background-color: transparent;}
.evaluation-list {display: flex; flex-direction: column; gap: 6px;}
.evaluation__summary {display: flex; align-items: center; gap: 10px; height: 48px;}
.evaluation__summary .img {width: 30px; height: 30px; border: 1px solid #ced4da; border-radius: 50%;}
.evaluation__summary .created_at {color: #6F747B; font-size: 12px;}
.evaluation__summary .period {margin-left: auto;}
.evaluation__summary .score {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 77px; height: 30px; border-radius: 15px; font-size: 12px; font-weight: bold; line-height: 1;}
.evaluation__summary .score b {font-size: 16px;}
.evaluation__summary .score.pass b {color: #2d51d0;}
.evaluation__summary .score.fail b {color: #ec3e5f;}
.evaluation__comment {padding: 12px 14px; border-radius: 0 20px 20px 20px; background-color: #f4f6ff; text-align: left;}

/* 프로젝트 현황 상세 */
.project-flex {position: relative;}
.project-list {position: fixed; width: 400px;}
body.skinAdmin .project-list,
body.skinMento .project-list {min-height: calc(100vh - (88px + 98px));}
.project-list .card__header {flex-direction: column; align-items: flex-start; padding: 0;}
.project-list .card__body {padding: 0;}
.project-list .badge {min-width: 50px; border-color: #014099; background-color: #ffffff; color: #014099;}
.project__info {width: 100%; padding: 16px 24px; background-color: #014099; color: #ffffff;}
.project__info .title {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.project__info .title .category {display: flex; gap: 10px;}
.project__info .title .category .badge {background-color: #014099;}
.project__info .title .category .badge.field {border-color: #ffffff; color: #ffffff;}
.project__info .title .category .badge.language {border-color: #2ec9d6; color: #2ec9d6;}
.project__info .title .text {max-width: 348px; color: #ffffff ; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.project__summary {display: flex; flex-wrap: wrap; gap: 16px 16px; width: 100%; min-height: 140px; padding: 16px 24px; border-bottom: 1px solid #e1e1e8; background-color: #f2f4f8;}
.project__summary li {font-size: 14px; color: #3b3b3b;}
.project__summary li h5 {margin-bottom: 6px; font-size: 12px; font-weight: 500;}
.project__summary li .date {display: inline-flex; justify-content: center; align-items: center; height: 24px; padding: 0 10px; background-color: #ffffff; border: solid 1px #ced4da; border-radius: 20px; font-size: 12px;}
.project__summary li.none-data {display: flex; justify-content: center; align-items: center; width: 100%;}
.project__summary li.start {width: 88px;}
.project__summary li.end {width: 88px;}
.project__summary li.progress {position: relative; width: calc(100% - (32px + 88px + 88px));}
.project__summary li.progress progress {width: 100%; height: 12px; appearance: none; -webkit-appearance: none;}
.project__summary li.progress progress::-webkit-progress-bar {overflow: hidden; border-radius: 20px; background-color: #e1e1e8;}
.project__summary li.progress progress::-webkit-progress-value { background-color: #0043ce;}
.project__summary li.progress .progress__value {position: absolute; top: 0; right: 0; font-size: 14px; font-weight: bold;}
.project__summary li.team {flex: 1;}
.project__summary li.team ul {display: flex; flex-wrap: wrap; gap: 6px;}
.project__summary li.team ul li > * {display: inline-flex; justify-content: center; align-items: center; height: 24px; padding: 0 8px; background-color: #ffffff; border: solid 1px #ced4da; border-radius: 20px; font-size: 12px;}
.hierarchy-box {padding-top: 12px; padding-bottom: 16px;}
.hierarchy__title {display: flex; align-items: center; gap: 8px; position: relative; height: 40px;}
.hierarchy__title--main {padding-left: 16px; padding-right: 16px;}
li.active > .hierarchy__title--main {background-color: #f2f4f8;}
.hierarchy__title .ico__dropdown {transform: rotate(-180deg); transition: all 0.3s ease-in-out;}
li.collapsed .hierarchy__title .ico__dropdown {transform: rotate(0deg);}
.hierarchy__title .title {display: flex; align-items: center; gap: 8px;}
.hierarchy__title--project .title .badge {border-color: #014099; background-color: #014099; color: #ffffff;}
.hierarchy__title .title .text {font-size: 14px; font-weight: 500; color: #3b3b3b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;}
.hierarchy-box.none-data .hierarchy__title .title .text {color: #ec3e5f;}
.hierarchy__title--main .title .text {max-width: 310px; font-size: 16px; font-weight: bold;}
body.skinAdmin .hierarchy__title--main .title .text {max-width: 286px;}
.hierarchy__list li > .hierarchy__title .title .text {position: relative;}
.hierarchy__list li > .hierarchy__title .title .text::after {content: ''; opacity: 0.2; display: block; position: absolute; bottom: -4px; width: 0; height: 12px; background-color: #0043ce; transition: width 0.2s ease-in-out;}
.hierarchy__list li.active > .hierarchy__title .title .text::after {width: 100%;}
.hierarchy__title .title .text:hover {text-decoration: underline;}
.hierarchy-box.none-data > li > .hierarchy__title .title .text:hover,
li.active > .hierarchy__title .title .text:hover {text-decoration: none;}
.hierarchy__title .period {width: 40px; color: #3b3b3b; font-size: 14px; line-height: 1;}
.hierarchy__title--main .period {display: inline-flex; justify-content: center; align-items: center; width: 48px; height: 24px; padding: 0 8px; border-radius: 8px; background-color: #39405a; color: #ffffff; font-size: 14px; font-weight: bold;}
.hierarchy__title--main .btn-add {position: absolute; right: 12px;}
.hierarchy__title .btn-delete {position: absolute; right: 0;}
.hierarchy__list {margin-top: 8px; margin-left: 8px; margin-right: 4px;}
body.skinAdmin .hierarchy__list,
body.skinMento .hierarchy__list {height: calc(100vh - (88px + 58px + 78px + 40px));}
.hierarchy__list li {position: relative;}
.hierarchy__list li::after {content: ''; display: block; position: absolute; top: 40px; left: 12px; width: 1px; height: calc(100% - 50px); border-left: 1px dashed #ced4da;}
.hierarchy__list ul {display: flex; flex-direction: column;}
.hierarchy__list li.collapsed > ul {display: none;}
.question__list {padding-left: 24px;}
.question__list .hierarchy__title {height: 36px;}
.question__list .hierarchy__title .title .text {font-size: 13px; font-weight: 500;}
.question__list .hierarchy__title .period {font-size: 12px;}
.question__list .hierarchy__title .result {position: absolute; right: 0; width: 36px; font-size: 12px; font-weight: bold; text-align: center;}
.question__list .hierarchy__title .result--pass {color: #1d76eb;}
.question__list .hierarchy__title .result--fail {color: #ec3e5f;}
.hierarchy__list > li {width: 378px;}
.hierarchy__list > li > .hierarchy__title .title .text {max-width: 240px;}
body.skinAdmin .hierarchy__list > li > .hierarchy__title .title .text,
body.skinMento .hierarchy__list > li > .hierarchy__title .title .text {max-width: 212px;}
.hierarchy__list > li > ul {width: 354px; margin-left: 24px;}
.hierarchy__list > li > ul > li > .hierarchy__title .title .text {max-width: 216px;}
.hierarchy__list > li > ul.question__list > li > .hierarchy__title .title .text {max-width: 242px;}
body.skinAdmin .hierarchy__list > li > ul.question__list > li > .hierarchy__title .title .text {max-width: 282px;}
.hierarchy__list > li > ul > li > ul {width: 330px; margin-left: 24px;}
.hierarchy__list > li > ul > li > ul > li > .hierarchy__title .title .text {max-width: 222px;}
.hierarchy__list > li > ul > li > ul.question__list > li > .hierarchy__title .title .text {max-width: 218px;}
body.skinAdmin .hierarchy__list > li > ul > li > ul.question__list > li > .hierarchy__title .title .text {max-width: 258px;}
.project-detail {display: flex; flex-direction: column; padding-left: 424px;}
.project-detail > form {display: flex; flex-direction: column; gap: 24px;}
.project-detail .mBoard1 .tal {padding-left: 12px; padding-right: 12px;}
.project-detail .mBoard1 .fs13,
.mBoard1.h40Type1 th.fs13,
.mBoard1.h40Type1 td.fs13 {font-size: 12px;}