* {
    box-sizing: border-box;
}
body {
    font-size: 14px;
    color: var(--nesc-color-text);
}
ul {
    list-style: none;
    padding: 0;
}
ol {
    margin: 0;
}
a {
    cursor: pointer;
}

:root {
    --icon-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px'%3E%3Cpath d='M330-250h300v-60H330v60Zm0-160h300v-60H330v60Zm-77.69 310Q222-100 201-121q-21-21-21-51.31v-615.38Q180-818 201-839q21-21 51.31-21H570l210 210v477.69Q780-142 759-121q-21 21-51.31 21H252.31ZM540-620v-180H252.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v615.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h455.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46V-620H540ZM240-800v180-180V-160v-640Z'/%3E%3C/svg%3E");
    --icon-health: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px'%3E%3Cpath d='M539.28-100q-99.87 0-170.15-70.04T298.85-340v-21.85q-81-10.53-135.5-72.23-54.5-61.69-54.5-145.92v-230h120v-40h60v140h-60v-40h-60v170q0 66 47 113t113 47q66 0 113-47t47-113v-170h-60v40h-60v-140h60v40h120v230q0 84.23-54.5 145.92-54.5 61.7-135.5 72.23V-340q0 75 52.61 127.5T539.23-160q75 0 127.5-52.5t52.5-127.5v-64.69q-31.54-9.31-51.92-36.27-20.39-26.96-20.39-61.35 0-42.62 29.86-72.46 29.85-29.84 72.5-29.84 42.64 0 72.45 29.84 29.81 29.84 29.81 72.46 0 34.39-20.39 61.35-20.38 26.96-51.92 36.27V-340q0 99.92-70.04 169.96T539.28-100Zm239.99-372.27q12.27-12.27 12.27-30.04t-12.27-30.03q-12.27-12.27-30.04-12.27t-30.04 12.27q-12.27 12.26-12.27 30.03 0 17.77 12.27 30.04T749.23-460q17.77 0 30.04-12.27Zm-30.04-30.04Z'/%3E%3C/svg%3E");
    --icon-guide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px'%3E%3Cpath d='M438-351.85 650.15-564l-42.77-42.77L438-437.38l-84.77-84.77-42.77 42.77L438-351.85Zm42 251.08q-129.77-35.39-214.88-152.77Q180-370.92 180-516v-230.15l300-112.31 300 112.31V-516q0 145.08-85.12 262.46Q609.77-136.16 480-100.77Zm0-63.23q104-33 172-132t68-220v-189l-240-89.62L240-705v189q0 121 68 220t172 132Zm0-315.62Z'/%3E%3C/svg%3E");
    --icon-faq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px'%3E%3Cpath d='M345.04-534.96q10.34-10.35 10.34-25.04t-10.34-25.04q-10.35-10.34-25.04-10.34t-25.04 10.34q-10.34 10.35-10.34 25.04t10.34 25.04q10.35 10.34 25.04 10.34t25.04-10.34Zm160 0q10.34-10.35 10.34-25.04t-10.34-25.04q-10.35-10.34-25.04-10.34t-25.04 10.34q-10.34 10.35-10.34 25.04t10.34 25.04q10.35 10.34 25.04 10.34t25.04-10.34Zm160 0q10.34-10.35 10.34-25.04t-10.34-25.04q-10.35-10.34-25.04-10.34t-25.04 10.34q-10.34 10.35-10.34 25.04t10.34 25.04q10.35 10.34 25.04 10.34t25.04-10.34ZM100-118.46v-669.23Q100-818 121-839q21-21 51.31-21h615.38Q818-860 839-839q21 21 21 51.31v455.38Q860-302 839-281q-21 21-51.31 21H241.54L100-118.46ZM216-320h571.69q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-455.38q0-4.62-3.85-8.46-3.84-3.85-8.46-3.85H172.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v523.08L216-320Zm-56 0v-480 480Z'/%3E%3C/svg%3E");
}

/********************************
  산출물 상세 페이지
********************************/
.page-body .local-body .content-head,
.page-body .local-body .content-head .content-subject {
    padding: 0 !important;
    font-size: 24px;
}
.output-page {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    margin: 0 auto;
}
.output-page-header .output-title {
    display: none;
}
.output-page-body {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.output-sidebar {
    display: flex;
    flex-direction: column;
    width: 206px;
    row-gap: 8px;
}
.output-sidebar .sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--nesc-color-text-sub);
    background-color: var(--nesc-color-white);
    border: 1px solid var(--nesc-color-border);
    border-radius: 8px;
    cursor: pointer;
}
.output-sidebar .sidebar-btn::before {
    content: "";
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.output-content {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--nesc-color-border);
    border-radius: 8px;
    padding: 32px;
}
.page-body .local-body .output-content .content-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 40px;
}

.output-content .content-title {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--nesc-color-text);
    margin: 0;
}
.output-content .content-title::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.content-links {
    display: flex;
    gap: 8px;
    font-size: 14px;
    margin-top: 0;
}
.content-links li a {
    color: var(--nesc-color-text-sub);
    text-decoration: none;
}
.content-links li a:after {
    content: "";
    display: inline-flex;
    width: 1px;
    height: 12px;
    background-color: var(--nesc-color-border-gray);
    margin-left: 8px;
}
.content-links li a:hover {
    text-decoration: underline;
}
.content-links li:last-child a:after {
    display: none;
}
.grade-guide,
.desc-list .desc-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed var(--nesc-color-border);
}
.output-section h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--nesc-color-primary);
    margin-top: 0;
    margin-bottom: 8px;
}
.output-section h3 span {
    font-size: 14px;
}
.output-section p {
    font-size: 16px;
    font-weight: 400;
    color: var(--nesc-color-text-sub);
    line-height: 26px;
    margin: 0;
}
.grade-guide .grade-bar {
    display: flex;
}
.grade-guide .grade-bar .grade-seg {
    height: 10px;
}
.grade-guide .grade-bar .grade-seg:first-child {
    border-radius: 10px 0 0 10px;
}
.grade-guide .grade-bar .grade-seg:last-child {
    border-radius: 0 10px 10px 0;
}
.grade-guide .grade-labels {
    display: flex;
}
.grade-guide .grade-label {
    font-size: 12px;
    text-align: center;
}
.grade-guide .grade-label .grade-name {
    font-size: 14px;
    font-weight: 700;
    margin-top: 8px;
}
.grade-guide .grade-label .grade-range {
    font-size: 14px;
    margin: 0;
    color: var(--nesc-color-text-sub);
    line-height: inherit;
}
.grade-guide .standard-boxes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}
.grade-guide .standard-boxes .standard-box {
    flex: 1;
    background-color: var(--nesc-color-gray);
    border: 1px solid var(--nesc-color-border-gray);
    padding: 20px;
    border-radius: 4px;
    text-align: center;
}
.grade-guide .standard-box p {
    font-size: 14px;
    margin: 0;
}
.grade-guide .standard-box .standard-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--nesc-color-primary);
    text-align: center;
    margin-top: 0;
    margin-bottom: 4px;
}
.grade-guide h3 {
    margin-bottom: 16px;
}
.desc-list .desc-item:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.meta-list {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.meta-list .tag {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(255, 200, 61, 0.55);
    color: var(--nesc-color-text);
    margin-top: 20px;
}
.impact-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.impact-list .impact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: var(--nesc-color-text-sub);
    text-align: center;
    padding: 0 10px;
    border-right: 1px dashed var(--nesc-color-border);

}
.impact-list .impact-item:last-child {
    border: none;
}
.impact-list .impact-item .impact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    color: var(--nesc-color-text);
    background-color: var(--nesc-color-bg);
    border-radius: 20px;
}
.guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.guide-list li {
    display: flex;
    align-items: flex-start;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dotted var(--nesc-color-border);
    color: var(--nesc-color-text-sub);
    line-height: 24px;
}
.guide-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.guide-list li .guide-num {
    font-weight: 700;
    color: var(--nesc-color-primary);
    min-width: 18px;
}
.faq-list .faq-item:last-child {
    padding-bottom: 0;
}
.faq-list .faq-item:first-child .faq-question {
    padding-top: 0;
}
.faq-list .faq-item:last-child .faq-question {
    padding-bottom: 0;
    border: none;
}
.faq-list .faq-item.is-open .faq-question {
    border: none;
}
.faq-list .faq-item.is-open .faq-arrow {
    transform: rotate(180deg);
}
.faq-list .faq-question {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    line-height: 22px;
    color: var(--nesc-color-text-sub);
    margin: 0;
    border-bottom: 1px dotted var(--nesc-color-border);
}
.faq-list .faq-question:hover {
    font-weight: 700;
}
.faq-list .faq-q-mark,
.faq-list .faq-a-mark {
    flex-shrink: 0;
    min-width: 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--nesc-color-primary);
    line-height: 26px;
}
.faq-list .faq-q-text,
.faq-list .faq-a-text {
    flex: 1;
    line-height: 26px;
    font-size: 16px;
    color: var(--nesc-color-text-sub);
}
.faq-list .faq-arrow {
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform 0.2s ease;
    fill: var(--nesc-color-text-sub);
}
.faq-list .faq-item.is-open .faq-answer {
    display: flex;
}
.faq-list .faq-item .faq-answer {
    display: none;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 32px;
    background-color: #f1f7fd;
    border-radius: 9px;
}
.faq-list .faq-item:last-child .faq-answer {
    margin-top: 12px;
}

/********************************
  산출물 모달
********************************/
.info-popup.module-a .output-help-popup {
    width: 700px;
    max-width: 100%;
    border-radius: 8px;
    padding: 24px;
}
.info-popup.module-a .output-help-popup .popup-local .popup-local-head {
    display: block;
    position: relative;
    overflow: unset;
    visibility: unset;
    margin: 0 0 30px;
    padding: 0;
    width: 100%;
    height: 30px;
    line-height: normal;
    font-size: 12px;
    border: 0;
    clip: unset;
    pointer-events: unset;
}
.info-popup.module-a .output-help-popup .popup-local .popup-local-head .form.select {
    display: inline-flex;
    align-items: center;
    position: relative;
    background-color: var(--nesc-color-white);
}
.info-popup.module-a .output-help-popup .popup-local .popup-local-head .form.select .form-elem {
    width: 160px;
    font-size: 12px;
    height: 34px;
    color: var(--nesc-color-text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    appearance: unset;
    padding-left: 8px;
    margin-left: 8px;
    border: 1px solid var(--nesc-color-border);
    border-radius: 4px;
}
.info-popup.module-a .output-help-popup .popup-local .popup-local-head .form.select .output-arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    fill: var(--nesc-color-text-sub);
}
.info-popup.module-a .output-help-popup .popup-local .popup-local-body {
    padding: 0;
    margin: 0;
}
.output-help-popup .output-content {
    padding: 24px;
    border-radius: 0 0 4px 4px;
    border-top: none;
}
.output-help-popup .output-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 16px;
}
.output-help-popup .output-title .abbr {
    font-size: 14px;
    color: var(--nesc-color-text-sub);
    font-weight: 400;
}
.output-help-popup .output-section h3 {
    font-size: 16px;
    color: var(--nesc-color-text);
    margin-top: 0;
}
.output-help-popup .output-section h3 span {
    font-size: 12px;
    color: var(--nesc-color-text-sub);
    margin-bottom: 8px;
}
.output-help-popup .grade-guide .grade-label .grade-name,
.output-help-popup .grade-guide .grade-label .grade-range,
.output-help-popup .grade-guide .standard-box .standard-title,
.output-help-popup .grade-guide .standard-box p {
    font-size: 12px;
    line-height: 20px;
}
.output-help-popup .output-section p,
.output-help-popup .tab-content.faq-list .faq-question,
.output-help-popup .faq-list .faq-q-mark,
.output-help-popup .faq-list .faq-a-mark,
.output-help-popup .faq-list .faq-q-text,
.output-help-popup .faq-list .faq-a-text {
    font-size: 14px;
    line-height: 24px;
}

.output-help-popup .output-page-body {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
}
.output-help-popup .output-sidebar {
    flex-direction: row;
    width: auto;
    row-gap: 0;
    border: 1px solid var(--nesc-color-border);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.output-help-popup .output-sidebar .sidebar-btn {
    flex: 1;
    font-size: 14px;
    gap: 6px;
    border: none;
    border-right: 1px solid var(--nesc-color-border);
    border-radius: 0;
    background-color: var(--nesc-color-white);
}
.output-help-popup .output-sidebar .sidebar-btn svg {
    display: inline-flex;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.output-help-popup .output-sidebar .sidebar-btn:last-child {
    border-right: none;
}
.output-help-popup .output-sidebar .sidebar-btn.is-active {
    color: var(--nesc-color-primary);
    background-color: var(--nesc-color-bg);
    border-radius: 0;
    border-bottom: 2px solid var(--nesc-color-primary);
}
.output-help-popup .output-sidebar .sidebar-btn::before {
    display: inline-block;
}
.output-sidebar .sidebar-btn[data-tab="desc"]::before,
.content-head .content-title[data-tab="desc"]::before {
    -webkit-mask-image: var(--icon-desc);
    mask-image: var(--icon-desc);
}
.output-sidebar .sidebar-btn[data-tab="health"]::before,
.content-head .content-title[data-tab="health"]::before {
    -webkit-mask-image: var(--icon-health);
    mask-image: var(--icon-health);
}
.output-sidebar .sidebar-btn[data-tab="guide"]::before,
.content-head .content-title[data-tab="guide"]::before {
    -webkit-mask-image: var(--icon-guide);
    mask-image: var(--icon-guide);
}
.output-sidebar .sidebar-btn[data-tab="faq"]::before,
.content-head .content-title[data-tab="faq"]::before {
    -webkit-mask-image: var(--icon-faq);
    mask-image: var(--icon-faq);
}
.output-sidebar .sidebar-btn:hover {
    color: var(--nesc-color-primary);
}
.output-sidebar .sidebar-btn.is-active {
    color: var(--nesc-color-white);
    background-color: var(--nesc-color-primary);
    border-radius: 8px;
}

.output-help-popup .grade-guide,
.output-help-popup .desc-list .desc-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
}
.output-help-popup .desc-list .desc-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}
.more-info {
    background-color: #f1f7fd;
    border: 1px solid var(--nesc-color-border);
    border-radius: 4px;
    text-align: center;
    padding: 20px;
    margin-top: 12px;
}
.more-info p {
    font-size: 12px;
    color: var(--nesc-color-text);
    margin: 0;
}
.more-info .btn-output-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--nesc-color-primary);
    font-weight: 700;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #d6d1d8;
    border-radius: 4px;
    margin-left: 5px;
    text-decoration: none;
}
.more-info .btn-output-more:hover {
    background-color: var(--nesc-color-white);
    border: 1px solid var(--nesc-color-primary);
}

/********************************
  768px 이하 모바일
********************************/
@media (max-width: 768px) {

    /* 상세페이지 */
    .output-page-body {
        display: unset;
    }
    .output-sidebar {
        flex-direction: row;
        width: auto;
        row-gap: 0;
        border: 1px solid var(--nesc-color-border);
        border-radius: 4px 4px 0 0;
        overflow: hidden;
    }
    .output-sidebar .sidebar-btn {
        flex: 1;
        font-size: 12px;
        padding: 10px 4px;
        border: none;
        border-right: 1px solid var(--nesc-color-border);
        border-radius: 0;
        background-color: var(--nesc-color-white);
    }
    .output-sidebar .sidebar-btn.is-active {
        color: var(--nesc-color-primary);
        background-color: var(--nesc-color-bg);
        border-radius: 0;
        border-bottom: 2px solid var(--nesc-color-primary);
    }
    .output-sidebar .sidebar-btn:last-child {
        border-right: none;
    }
    .page-body .local-body .content-head .content-subject,
    .page-body .local-body .output-content .content-head {
        font-size: 18px !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    .output-content {
        border-radius: 0 0 4px 4px;
        border: none;
        padding: 24px 0 0;
    }
    .output-content .content-title {
        display: none;
    }
    .content-head .content-links {
        font-size: 14px;
        margin-left: auto;
    }
    .output-section h3,
    .output-section p,
    .faq-list .faq-question,
    .faq-list .faq-answer,
    .faq-list .faq-q-mark,
    .faq-list .faq-a-mark,
    .faq-list .faq-q-text,
    .faq-list .faq-a-text {
        font-size: 14px;
        line-height: 22px;
    }
    .grade-guide .grade-label .grade-name,
    .grade-guide .grade-label .grade-range,
    .grade-guide .standard-box .standard-title,
    .grade-guide .standard-box p,
    .meta-list .tag {
        font-size: 12px;
        line-height: 20px;
    }
    .grade-guide .standard-boxes {
        display: block;
    }
    .grade-guide .standard-boxes .standard-box {
        display: block;
        width: 100%;
        padding: 16px;
    }
    .grade-guide .standard-boxes .standard-box:first-child {
        margin-bottom: 12px;
    }
    .grade-guide .standard-boxes .standard-box.mr-10 {
        margin-right: 0;
    }
    .grade-guide,
    .desc-list .desc-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .impact-list {
        grid-template-columns: 1fr;
        gap: 0;
        margin: 0;
    }
    .impact-list .impact-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        width: 100%;
        font-size: 14px;
        color: var(--nesc-color-text-sub);
        line-height: 24px;
        text-align: left;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px dashed var(--nesc-color-border);
        border-right: none;
    }
    .impact-list .impact-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .impact-list .impact-item .impact-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin: 0;
        flex-shrink: 0;
    }
    .impact-list .impact-item .impact-icon svg {
        width: 28px;
        height: 28px;
    }
    .guide-list li:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .faq-list .faq-question {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .faq-list .faq-item .faq-answer {
        padding: 12px 16px;
    }
    .faq-list .faq-item:last-child .faq-answer {
        margin-top: 12px;
    }

    /* 모달 */
    .output-help-popup .output-page-header .output-title {
        margin-top: 12px;
    }
    .output-help-popup .output-content {
        padding: 24px 0;
    }
    .output-help-popup .output-sidebar .sidebar-btn {
        display: grid;
        font-size: 12px;
        padding: 12px 4px;
    }
    .output-help-popup .output-sidebar .sidebar-btn::before {
        width: 28px;
        height: 28px;
        margin: 0 auto;
    }
    .info-popup.module-a .output-help-popup .popup-local .popup-local-head {
        margin: 0 0 20px;
    }
    .info-popup.module-a,
    .info-popup.module-a .output-help-popup {
        padding: 16px;
    }
    .output-help-popup .output-section h3 {
        margin-bottom: 8px;
    }
    .output-help-popup .grade-guide h3 {
        margin-bottom: 12px
    }
    .more-info {
        padding: 16px;
    }
    .more-info p {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .more-info .btn-output-more {
        margin-left: 0;
        padding: 8px 20px;
    }
}