/*******************************************************************/
/***************************keywordSearch***************************/
/*******************************************************************/
.keywordSearch-header {
    position: relative;
    margin: -5rem 0 2.5rem;
    padding: 4rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
}

.keywordSearch-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #E9F2FA;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1;
}

.keywordSearch-header .progress-box {
    padding: 1rem;
}

.keywordSearch-header .progress-gif {
    width: 3.5rem;
}

.keywordSearch-header-label {
    width: fit-content;
    background: linear-gradient(to right, #00C893, #003EF8);
    border-radius: .25rem;
    padding: .25rem .5rem;
    color: var(--white);
    margin: .5rem 0;
}

#keywordSearch-value {
    color: var(--point);
}

#keywordSearch-value span {
    color: var(--black);
}

#searchEmptyBox {
    border: 1px solid #eee;
    border-radius: 1rem;
    color: #bbb;
    text-align: center;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}

.keywordSearch-jobList .list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-style: solid;
    border-color: var(--borderGray);
    border-width: 1px 0 0 1px;
    margin-bottom: 3rem;
}

.keywordSearch-jobList .list button {
    padding: 1rem;
    min-height: 5rem;
    border-style: solid;
    border-color: var(--borderGray);
    border-width: 0 1px 1px 0;
    color: var(--textGray);
}

.keywordSearch-jobList .list button:hover {
    color: var(--black);
    background-color: #f4f4f9;
}

.keywordSearch-jobList .list button.active {
    position: relative;
    z-index: 2;
    color: var(--black);
    background-color: var(--white);
    outline: 2px solid var(--point);
    border-radius: .25rem;
    box-shadow: var(--shadow-md);
}

.keywordSearch-salary {
    border: 3px solid rgb(238, 242, 250);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 12px;
}

.keywordSearch-salary h5 {
    margin-bottom: 1rem;
}

.keywordSearch-salary h5 span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--textGray);
}

.keywordSearch-info-grid {
    display: grid;
    grid-template-columns: 20rem calc(50% - 33rem) calc(50% - 11.5rem) 20rem;
    grid-template-rows: auto 12rem 10rem;
    gap: 1.5rem;
}

.keywordSearch-info-item {
    border: 3px solid #EEF2FA;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / 2%);
}

.keywordSearch-info-item:nth-child(1) {
    grid-column: 1/3;
}

.keywordSearch-info-item:nth-child(2) {
    grid-column: 3/4;
}

.keywordSearch-info-item:nth-child(3) {
    grid-column: 4/5;
    grid-row: 1/3;
}

.keywordSearch-info-item:nth-child(4) {
    grid-column: 1/2;
    grid-row: 2/3;
}

.keywordSearch-info-item:nth-child(5) {
    grid-column: 1/2;
    grid-row: 3/4;
}

.keywordSearch-info-item:nth-child(6) {
    grid-column: 2/4;
    grid-row: 2/4;
}

.keywordSearch-info-item > h5 {
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.keywordSearch-info-item > div {
    color: #5D5E62;
}

.keywordSearch-info-item > ul {
    overflow: auto;
    color: #5D5E62;
}

.keywordSearch-info-item > ul > li {
    margin: 0 0 .5rem .75rem;
    list-style: '- ';
}

.keywordSearch-info-salary {
    display: flex;
    margin-bottom: .5rem;
}

.keywordSearch-info-salary dt {
    width: 5rem;
    color: #5D5E62;
}

.keywordSearch-info-salary dd {
    color: #003BBA;
}

.keywordSearch-info-stsf {
    color: #00B1B7;
    font-weight: 800;
    font-size: 3rem;
}

.keywordSearch-lastItem {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
}

.keywordSearch-lastItem > div {
    padding: 0 .75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--textGray);
}

.keywordSearch-info-btn {
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

/*******************************************************************/
/******************************roadmap******************************/
/*******************************************************************/
.roadmap-layout {
    display: flex;
    gap: 3rem;
}

.roadmap-chart {
    display: flex;
    flex-direction: column;
    width: calc(100% - 40rem);
    border: 4px solid #EDF0F5;
    border-radius: 1rem;
    padding: 1rem 2rem;
    box-shadow: var(--shadow-md);
}

.roadmap-chart #svg-canvas {
    flex: 1;
}

.roadmap-chart #svg-canvas > svg {
    height: 100%;
}

.roadmap-info {
    width: 37rem;
}

.roadmap-list-label {
    background-color: var(--black);
    color: var(--white);
    border-radius: 5rem;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    width: fit-content;
    font-weight: 600;
    margin-bottom: 1rem;
}

#roadmap-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
    max-height: 10rem;
    overflow: auto;
}

#roadmap-list .btn-node {
    border: 2px solid transparent;
    border-radius: .25rem;
    padding: 2px 8px;
    box-shadow: var(--shadow-sm);
}

#roadmap-list .btn-node:hover {
    background-color: #f4f6f9;
}

#roadmap-list .btn-node.btn-selected {
    color: var(--white);
    border: none;
    padding: 4px 10px;
}

#roadmap-list .btn-node.level1 {
    border-color: #ffcbcb;
}

#roadmap-list .btn-node.level1.btn-selected {
    background-color: #ce3232;
}

#roadmap-list .btn-node.level2 {
    border-color: #f8e68e;
}

#roadmap-list .btn-node.level2.btn-selected {
    background-color: #b49606;
}

#roadmap-list .btn-node.level3 {
    border-color: #74e967;
}

#roadmap-list .btn-node.level3.btn-selected {
    background-color: #229e14;
}

#roadmap-list .btn-node.level4 {
    border-color: #00ebcb;
}

#roadmap-list .btn-node.level4.btn-selected {
    background-color: #008987;
}

#roadmap-list .btn-node.level5 {
    border-color: #8da6f8;
}

#roadmap-list .btn-node.level5.btn-selected {
    background-color: #133ece;
}

#roadmap-list .btn-node.level6 {
    border-color: #b48bfc;
}

#roadmap-list .btn-node.level6.btn-selected {
    background-color: #5118b7;
}

#roadmap-list .btn-node.level7 {
    border-color: #e435f1;
}

#roadmap-list .btn-node.level7.btn-selected {
    background-color: #b309c0;
}

#roadmap-list .btn-node.level8 {
    border-color: #9e1c59;
}

#roadmap-list .btn-node.level8.btn-selected {
    background-color: #660e37;
}

.roadmap-summary {
    margin-bottom: 1.5rem;
    background-color: #F5F6F8;
    border-radius: .5rem;
    padding: 1.5rem 2rem;
}

.roadmap-summary h5 {
    margin-bottom: .25rem;
}

.roadmap-tasksTitle {
    margin-bottom: .5rem;
}

.roadmap-info #auFctrList {
    border-style: solid;
    border-color: var(--black);
    border-width: 1px 0;
}

.roadmap-info dl {
    display: flex;
}
.roadmap-info dl:nth-child(n + 2) {
    border-top: 1px solid var(--borderGray);
}

.roadmap-info dt {
    background-color: #f4f6f9;
    color: #47527a;
    padding: .5rem .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 10rem;
    font-weight: 600;
}

.roadmap-info dd {
    padding: .5rem .75rem;
    width: calc(100% - 10rem);
}

.roadmap-info dd li {
    margin-left: .75rem;
    list-style: '- ';
}

.roadmap-docs {
    padding-bottom: 1.5rem;
}

.roadmap-docs > div {
    margin-top: 1.5rem;
}

.roadmap-docs .title {
    margin-bottom: .5rem;
}

.roadmap-docs ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.roadmap-docs li {
    padding: 2px .5rem;
    border-radius: .25rem;
    font-weight: 500;
}

.roadmap-docs #dtaRlvtPrnm li {
    color: #1e314c;
    background-color: #e7f0f6;
}

.roadmap-docs #relCertList li {
    color: #27454a;
    background-color: #ebf3ed;
}

.roadmap-docs li.empty, .no-data-message {
    background-color: #eee !important;
    color: #999 !important;
}

.roadmap-bottom {
    margin-top: 4rem;
    text-align: center;
    color: var(--textGray);
}

.roadmap-bottom .btn {
    margin: 1rem auto 0;
}

/*******************************************************************/
/****************************diagMsg*****************************/
/*******************************************************************/
#diagMsg-form {
    margin-top: 3rem;
}

.diagMsg-description {
    margin-bottom: 1rem;
    color: var(--textGray);
    text-align: center;
}

.diagMsg-box {
    border: 5px solid #EDF0F5;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    padding: 3rem 4rem;
    margin: 0 auto 3rem;
    max-width: 70rem;
}

.diagMsg-counts {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: .75rem;
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--borderGray);
}

.diagMsg-counts .selected {
    color: var(--point);
}

.diagMsg-counts #checkAllDiagItem {
    position: absolute;
    bottom: 1.5rem;
    right: 0;
}

.diagMsg-count-label {
    font-weight: 600;
}

.diagMsg-count {
    font-weight: 800;
    font-size: 3rem;
}

.diagMsg-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.diagMsg-list label {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: 1.5rem;
    border-radius: .5rem;
    border: 2px solid #e8eaec;
}

.diagMsg-list label:hover {
    cursor: pointer;
    border-color: var(--borderGray);
}

.diagMsg-list label:has(:checked) {
    border-color: var(--point);
}

.diagMsg-name {
    font-weight: 600;
}

.diagMsg-length {
    color: var(--textGray);
}

.diagMsg-badge {
    font-size: .875rem;
    color: var(--white);
    border-radius: 5rem;
    background-color: var(--black);
    padding: 2px .5rem;
}

.diagMsg-checkBox {
    margin-left: auto;
    position: relative;
    min-width: 28px;
    appearance: none;
    cursor: pointer;
}

.diagMsg-checkBox::before {
    content: '';
    right: 0;
    top: calc(50% - 14px);
    position: absolute;
    width: 28px;
    height: 28px;
    background-image: url("../img/icon-plus.png");
}

.diagMsg-checkBox:checked::before {
    background-image: url("../img/icon-minus.png");
}

.diagMsg-prev {
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.diagMsg-prev-ttl {
    color: var(--textGray);
}

.diagMsg-prev strong {
    font-size: 2rem;
    color: var(--point);
    font-weight: 800;
}

.diag-timer-wrapper {
    display: flex;
    justify-content: space-between;
    margin: -2rem 0 2rem;
    font-weight: 600;
}

.diag-timer-wrapper span {
    color: var(--point);
}

.diag-count {
    display: flex;
    gap: .5rem;
}

#selfDiagnosisSend th:nth-child(n + 2),
#selfDiagnosisSend td:nth-child(n + 2) {
    width: 6rem;
    padding: .5rem 0;
    text-align: center;
}

#selfDiagnosisSend td input {
    position: relative;
    appearance: none;
    border: 2px solid var(--borderGray);
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

#selfDiagnosisSend td input:hover {
    border-color: var(--textGray);
    cursor: pointer;
}

#selfDiagnosisSend td input:checked {
    border-color: var(--point);
}

#selfDiagnosisSend td input:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--point);
}

.diagResult-layout {
    display: flex;
    gap: 3rem;
    padding-bottom: 4rem;
    margin: 2rem 0 4rem;
    border-bottom: 1px solid var(--borderGray);
}

.diagResult-box {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.diagResult-box-title {
    border: 4px solid #0b0c41;
    border-bottom: none;
    background-color: #272853;
    border-radius: 1rem 1rem 0 0;
    color: var(--white);
    padding: .75rem;
    font-weight: 600;
    text-align: center;
}

.diagResult-cont {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 4px solid #EDF0F5;
    border-top: none;
    border-radius: 0 0 1rem 1rem;
    padding: 0 3rem 3rem;
}

.diagResult-graph {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.diagResult-avgWrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 20rem;
    aspect-ratio: 1;
    background-color: #E9EDF0;
    border-radius: 50%;
    overflow: hidden;
}

.diagResult-avgProgress {
    position: absolute;
    z-index: 10;
    width: 100%;
}

.diagResult-avgCenter {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 12rem;
    aspect-ratio: 1;
    background-color: var(--white);
    border-radius: 50%;
    margin: auto;
    box-shadow: var(--shadow-md);
}

.diagResult-avgLevel {
    font-size: 2.5rem;
    font-weight: 600;
}

.diagResult-avgScore b {
    font-size: 1.5rem;
}

.diagResult-avgMessage {
    font-size: 1.25rem;
    margin-top: 2.5rem;
}

#diagResult-radar {
    width: 100%;
    aspect-ratio: 1.4;
}

.diagResult-details {
    padding-top: 3rem;
    border-top: 1px solid var(--borderGray);
}

.diagResult-details-title {
    margin-bottom: 1rem;
}

.diagResult-details-list {
    max-height: 40rem;
    overflow: auto;
    padding-right: .5rem;
}

.diagResult-details-list li {
    margin-bottom: 1.5rem;
}

.diagResult-details-list .ttl {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.diagResult-details-list .ttl b {
    font-weight: 600;
}

.diagResult-details-list .ttl a {
    margin-left: .5rem;
}

.diagResult-details-list .graph {
    height: .5rem;
    border-radius: 5rem;
    background-color: #E9ECF1;
}

.diagResult-details-list .graph-bar {
    height: inherit;
    border-radius: inherit;
}

.diagRcmd-layout {
    display: flex;
    gap: 2.5rem;
}

.diagRcmd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.diagRcmd-flex {
}

.diagRcmd-item {
    display: block;
    border-radius: .75rem;
    border: 1px solid var(--borderGray);
    padding: 1.5rem 2rem;
    cursor: pointer;
}

.diagRcmd-item:hover {
    background-color: #f4f6f9;
}

.diagRcmd-item h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: .5rem 0;
    word-break: break-word;
}

.diagRcmd-item-body p {
    color: var(--textGray);
}

.diagRcmd-item-header,
.diagRcmd-item-body p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.diagRcmd-item-header .edu-round {
    display: inline-block;
    background-color: #EEF2F7;
    border-radius: .25rem;
    padding: 0 .5rem;
    margin-right: .5rem;
}

.diagRcmd-list {
    overflow: auto;
    max-height: 960px;
}

.diagRcmd-list .diagRcmd-item {
    margin-bottom: 1.5rem;
}

.ai-tool-item .tool-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ai-tool-item .tool-content img {
    width: 5rem;
    aspect-ratio: 1;
    background-color: var(--bgGray);
    border-radius: 1rem;
}

.ai-tool-item .tool-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ai-tool-item .tool-footer {
    margin-top: .5rem;
    color: var(--textGray);
}