/**
 * 이 파일은 코스모스 메인테마 템플릿의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 템플릿 레이아웃 공통 스타일
 *
 * @file /modules/naddle/coursemos/templates/www/styles/style.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2024. 5. 9.
 */
div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
    &[data-context='article'] {
        > ul[data-role='categories'] {
            --list-gap: 48px;

            list-style: none;
            display: none;
            flex-direction: row;
            justify-content: flex-end;
            gap: var(--list-gap);
            padding-bottom: 40px;

            > li {
                position: relative;
                font: var(--font-label-md);
                color: var(--color-text-quinary);

                &.selected {
                    color: var(--color-text-primary);
                }

                &:not(:first-child)::before {
                    position: absolute;
                    content: ' ';
                    top: calc(50% - 8px);
                    left: calc(var(--list-gap) / -2);
                    display: inline-block;
                    width: 1px;
                    height: 16px;
                    background: var(--color-border-tertiary);
                }
            }
        }

        > ul[data-role='lists'] {
            list-style: none;

            &[data-type='case'] {
                display: flex;
                flex-direction: column;
                gap: 48px;

                > li {
                    padding: 8px 0px 24px 0px;
                    border-bottom: 1px solid var(--color-border-secondary);

                    &:hover {
                        border-bottom: 1px solid var(--color-border-primary);

                        > a {
                            > b {
                                color: var(--color-text-primary);
                            }
                        }
                    }

                    > a {
                        display: flex;
                        row-gap: 4px;
                        column-gap: 20px;
                        flex-direction: row;
                        align-items: flex-start;
                        flex-wrap: wrap;

                        > i {
                            flex-basis: 100%;
                            font: var(--font-label-md);
                            color: var(--color-text-brand-primary);
                        }

                        > b {
                            flex-grow: 1;
                            flex-shrink: 1;
                            flex-basis: 0;
                            font: var(--font-paragraph-2xlg);
                            color: var(--color-text-tertiary);
                        }

                        > span {
                            flex-shrink: 0;
                            font: var(--font-paragraph-md);
                            color: var(--color-gray-50);
                        }
                    }
                }
            }

            &[data-type='interview'],
            &[data-type='research'] {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                row-gap: 80px;
                column-gap: 32px;
                border: none;
                list-style: none;

                > li {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;

                    > a {
                        display: flex;
                        flex-direction: column;
                        gap: 24px;

                        > div.image {
                            width: 100%;
                            aspect-ratio: 1400/875;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: 50%;
                        }

                        > b {
                            font: var(--font-paragraph-2xlg);
                            color: var(--color-text-secondary);
                        }
                    }

                    > small {
                        display: flex;
                        align-content: center;
                        gap: 16px;
                        font: var(--font-paragraph-md);
                        color: var(--color-text-quaternary);

                        > time {
                            position: relative;

                            &::before {
                                content: ' ';
                                position: absolute;
                                top: 3px;
                                left: -9px;
                                display: inline-block;
                                width: 1px;
                                height: calc(100% - 8px);
                                background: var(--color-border-tertiary);
                            }
                        }
                    }
                }

                &[data-type='research'] {
                    grid-template-columns: repeat(1, 1fr);

                    > li {
                        > a {
                            > div.image {
                                aspect-ratio: 1400/500;
                            }
                        }
                    }
                }
            }
        }

        > div[data-role='buttons'] {
            display: none;
            padding-top: 50px;
        }

        > section[data-role='subtitle'] {
            border: none;
            padding-top: 0px;
            margin-bottom: 54px;
            --subtitle-gap: 60px;

            &:has(> small) {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }

            > h3 {
                display: flex;
                gap: var(--subtitle-gap);
                align-items: center;

                > a {
                    flex-shrink: 0;
                    border: 1px solid var(--color-border-secondary);
                }

                > b {
                    font: var(--font-head-md);
                    color: var(--color-text-secondary);
                    white-space: normal;
                }
            }

            > small {
                display: flex;
                padding-left: calc(var(--subtitle-gap) * 3);
                align-content: center;
                gap: 16px;
                font: var(--font-paragraph-md);
                color: var(--color-text-quaternary);

                > time {
                    position: relative;

                    &::before {
                        content: ' ';
                        position: absolute;
                        top: calc(50% - 10px);
                        left: -8px;
                        display: inline-block;
                        width: 1px;
                        height: 20px;
                        background: var(--color-border-tertiary);
                    }
                }
            }
        }

        > section[data-role='content'] {
            padding-left: var(--subpage-padding-left);
            padding-right: var(--subpage-padding-right);

            div[data-role='container'] {
                &.fullsize {
                    width: 100vw;
                    max-width: 100vw;
                    margin-left: calc(var(--im-container-width) / 2 - 50vw - var(--subpage-padding-left));
                    margin-right: 0;
                }

                &.widecard {
                    width: calc((50vw + var(--im-container-width) / 2) - var(--subpage-padding-left));
                    max-width: calc((50vw + var(--im-container-width) / 2));
                    padding-right: var(--subpage-padding-right);
                }
            }

            > div[data-role='buttons'] {
                margin-top: 80px;
                padding-top: 64px;
                border-top: 1px solid var(--color-border-secondary);

                > div {
                    display: flex;

                    > a {
                        text-align: center;
                        align-content: center;

                        > i {
                            font-size: 1.5lh;
                        }

                        &:nth-child(1) {
                            border-radius: 999px 0px 0px 999px;
                            border: 1px solid var(--color-border-secondary);

                            &::before {
                                border-radius: 999px 0px 0px 999px;
                            }
                        }

                        &:nth-child(2) {
                            border-radius: 0px 999px 999px 0px;
                            border: 1px solid var(--color-border-secondary);

                            &::before {
                                border-radius: 0px 999px 999px 0px;
                            }
                        }
                    }
                }

                > a {
                    border: 1px solid var(--color-border-secondary);
                }
            }
        }
    }

    &[data-context='report'] {
        > section[data-role='content'] {
            > article {
                display: block;
                width: 100%;
                text-align: justify;
                word-break: keep-all;
                position: relative;

                > a[name] {
                    position: absolute;
                    top: -100px;
                    left: 0;
                    width: 0;
                    height: 0;
                }

                > h4 {
                    font: var(--font-head-lg);
                    color: var(--color-text-primary);
                    display: block;
                    margin: 64px 0px 32px 0px;
                }

                &:first-child {
                    > h4 {
                        margin-top: 0;
                    }
                }

                > h5 {
                    font: var(--font-label-2xlg);
                    color: var(--color-text-200);
                    display: block;
                    margin: 60px 0px 30px 0px;
                }

                > h6 {
                    font: var(--font-paragraph-lg);
                    color: var(--color-text-secondary);
                    font-weight: bold;
                    margin: 30px 0px 8px 0px;
                }

                > p {
                    font: var(--font-paragraph-md);
                    color: var(--color-text-tertiary);

                    &:has(> a) {
                        > a {
                            > b {
                                > i {
                                    padding: 0 1px 0 2px;
                                }
                            }
                        }
                    }
                }

                > div.image {
                    width: 100%;
                    margin: 32px 0px;

                    > img {
                        display: block;
                        width: 100%;
                    }
                }

                > div[data-role='box'] {
                    --box-gap: 32px;
                    width: 100%;
                    margin: 32px 0;
                    background-color: var(--color-bg-secondary);
                    padding: var(--box-gap);

                    > b {
                        display: block;
                        text-align: center;
                        font: var(--font-label-2xlg);
                        margin-bottom: 24px;
                    }

                    &.intro {
                        aspect-ratio: 100/40;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        > i {
                            width: 30%;
                            aspect-ratio: 374/56;
                            mask-repeat: no-repeat;
                            mask-position: 50% 50%;
                            mask-size: contain;
                            background: var(--color-text-primary)
                                linear-gradient(
                                    to right,
                                    var(--color-text-brand-primary),
                                    var(--color-text-brand-primary)
                                )
                                no-repeat;
                            background-size: 25% 100%;
                        }
                    }

                    &.keyword {
                        > ul {
                            list-style: none;
                            width: 100%;
                            display: flex;
                            flex-direction: row;
                            align-items: flex-start;
                            gap: var(--box-gap);

                            > li.title {
                                width: 220px;
                                flex-shrink: 0;
                                border-top: 1px solid var(--color-border-primary);
                                padding-top: calc(var(--box-gap) * 0.75);
                                background-repeat: no-repeat;
                                background-size: 60px 60px;
                                background-position: 100% calc(100% - var(--gap-content) * 0.75);
                                position: relative;

                                > b {
                                    display: block;
                                    font: var(--font-label-2xlg);
                                    color: var(--color-text-brand-primary);
                                }

                                > small {
                                    padding: 8px 0px;
                                    display: block;
                                    font: var(--font-paragraph-md);
                                    color: var(--color-text-tertiary);
                                }

                                > i[data-role='icons'] {
                                    --icon-size: 48px;
                                    width: 48px;
                                    height: 48px;
                                    position: absolute;
                                    right: 0;
                                    bottom: 8px;
                                }
                            }

                            > li.content {
                                flex-grow: 1;
                                border-top: 1px solid var(--color-border-secondary);
                                padding-top: calc(var(--box-gap) * 0.75);

                                > p {
                                    margin: 8px;
                                    font: var(--font-paragraph-md);
                                    color: var(--color-text-tertiary);
                                    position: relative;
                                    padding-left: calc(0.5lh + 4px);

                                    &::before {
                                        width: 4px;
                                        height: 4px;
                                        border-radius: 2px;
                                        background: var(--color-text-tertiary);
                                        position: absolute;
                                        top: calc(0.5lh - 2px);
                                        left: 0;
                                        content: ' ';
                                    }
                                }
                            }
                        }

                        > ul + ul {
                            margin-top: var(--box-gap);
                        }
                    }

                    &.platform {
                        > ul.card {
                            list-style: none;
                            display: flex;
                            flex-direction: row;
                            align-items: stretch;
                            gap: calc(var(--box-gap) / 2);
                            margin-bottom: calc(var(--box-gap) * 2);

                            > li {
                                flex-basis: 0;
                                flex-grow: 1;
                                background: var(--color-bg-primary);
                                padding: calc(var(--box-gap) * 0.625);

                                > b {
                                    display: block;
                                    font: var(--font-label-md);
                                    color: var(--color-text-brand-primary);
                                    padding-bottom: calc(var(--box-gap) / 2);
                                    border-bottom: 1px solid var(--color-border-secondary);
                                }

                                > p {
                                    padding-top: calc(var(--box-gap) / 2);
                                    font: var(--font-paragraph-md);
                                    color: var(--color-text-tertiary);
                                    text-align: left;
                                }
                            }
                        }

                        > ul.row {
                            list-style: none;
                            display: flex;
                            flex-direction: column;
                            gap: calc(var(--box-gap) / 2);

                            > li {
                                display: flex;
                                flex-direction: row;
                                align-items: stretch;
                                background: var(--color-bg-primary);
                                overflow: hidden;

                                > b {
                                    width: 170px;
                                    flex-shrink: 0;
                                    background: var(--color-text-brand-primary);
                                    color: var(--color-white);
                                    font: var(--font-label-md);
                                    text-align: center;
                                    padding: calc(var(--box-gap) * 0.625) 0;
                                }

                                > p {
                                    flex-grow: 1;
                                    font: var(--text-body-16-medium);
                                    padding: calc(var(--box-gap) * 0.625);
                                }
                            }
                        }
                    }

                    &.contract {
                        > p {
                            text-align: center;
                            margin: calc(var(--box-gap) * 0.75) 0;
                            background: var(--color-bg-primary);
                            padding: calc(var(--box-gap) * 0.625);
                            font: var(--font-paragraph-md);

                            > span {
                                font-weight: 700;
                                color: var(--color-text-brand-primary);
                            }
                        }

                        > ul {
                            list-style: none;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;

                            > li.circle {
                                width: clamp(75px, 12vw, 160px);
                                height: clamp(75px, 12vw, 160px);
                                font-weight: 700;
                                border-radius: 50%;
                                background: var(--color-fg-quinary);
                                color: var(--color-white);
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;

                                > b {
                                    display: block;
                                    text-align: center;
                                    font-size: clamp(16px, 2.5vw, 36px);
                                }

                                > small {
                                    display: block;
                                    font-size: clamp(12px, 1.25vw, 18px);
                                    text-align: center;
                                }

                                &.after {
                                    width: clamp(100px, 18vw, 260px);
                                    height: clamp(100px, 18vw, 260px);
                                    background: var(--color-text-brand-primary);

                                    > b {
                                        font-size: clamp(24px, 3.75vw, 54px);
                                    }
                                }
                            }

                            > li.progress {
                                position: relative;
                                width: clamp(85px, 11vw, 160px);
                                height: clamp(85px, 11vw, 160px);

                                > small {
                                    display: block;
                                    font: var(--font-label-md);
                                    color: var(--color-text-brand-primary);
                                    text-align: center;
                                }

                                > i {
                                    width: 60%;
                                    height: 2px;
                                    background: var(--color-text-primary);
                                    position: absolute;
                                    top: calc(50% - 0.125rem);
                                    left: 20%;

                                    &::after {
                                        position: absolute;
                                        top: -8px;
                                        right: -10px;
                                        border-left: 10px solid var(--color-text-primary);
                                        border-top: 10px solid transparent;
                                        border-bottom: 10px solid transparent;
                                        content: ' ';
                                    }
                                }
                            }
                        }
                    }

                    &.survey {
                        > ul {
                            list-style: none;
                            display: grid;
                            grid-template-columns: repeat(4, 1fr);
                            gap: calc(var(--box-gap) * 0.5);

                            > li {
                                background: var(--color-bg-primary);
                                padding: calc(var(--box-gap) * 0.625);

                                > b {
                                    display: block;
                                    font: var(--font-head-lg);
                                    color: var(--color-text-brand-primary);
                                }

                                > p {
                                    text-align: left;
                                    padding-top: 1rem;
                                    font: var(--font-paragraph-md);
                                    color: var(--color-text-tertiary);
                                }
                            }
                        }

                        > b {
                            display: block;
                            padding-top: calc(var(--box-gap) * 2);
                        }

                        > p {
                            font: var(--font-paragraph-md);
                            color: var(--color-text-tertiary);
                            padding-left: calc(0.5lh + 4px);
                            margin: 8px 0px;
                            position: relative;

                            > b {
                                font-weight: 700;
                            }

                            &::before {
                                width: 4px;
                                height: 4px;
                                border-radius: 2px;
                                background: var(--color-text-tertiary);
                                position: absolute;
                                top: calc(50% - 2px);
                                left: 0;
                                content: ' ';
                            }
                        }
                    }

                    &.cs {
                        > ul {
                            list-style: none;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;

                            > li.circle {
                                width: clamp(75px, 12vw, 160px);
                                height: clamp(75px, 12vw, 160px);
                                font-size: clamp(16px, 2.5vw, 36px);
                                font-weight: 700;
                                border-radius: 50%;
                                background: var(--color-fg-quinary);
                                color: var(--color-white);
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;

                                > b {
                                    display: block;
                                    text-align: center;
                                    font-size: clamp(16px, 2.5vw, 36px);
                                }

                                > small {
                                    display: block;
                                    font-size: clamp(12px, 1.25vw, 18px);
                                    text-align: center;
                                }

                                &.after {
                                    width: clamp(100px, 18vw, 260px);
                                    height: clamp(100px, 18vw, 260px);
                                    background: var(--color-text-brand-primary);

                                    > b {
                                        font-size: clamp(24px, 3.75vw, 54px);
                                    }
                                }
                            }

                            > li.progress {
                                position: relative;
                                width: clamp(90px, 11vw, 160px);
                                height: clamp(90px, 11vw, 160px);

                                > small {
                                    display: block;
                                    font: var(--font-label-md);
                                    color: var(--color-text-brand-primary);
                                    text-align: center;
                                }

                                > i {
                                    width: 60%;
                                    height: 2px;
                                    background: var(--color-text-primary);
                                    position: absolute;
                                    top: calc(50% - 0.125rem);
                                    left: 20%;

                                    &::after {
                                        position: absolute;
                                        top: -8px;
                                        right: -10px;
                                        border-left: 10px solid var(--color-text-primary);
                                        border-top: 10px solid transparent;
                                        border-bottom: 10px solid transparent;
                                        content: ' ';
                                    }
                                }
                            }
                        }

                        > img {
                            width: 100%;
                            padding-bottom: 24px;
                        }

                        > p {
                            display: flex;
                            gap: 30px;
                            justify-content: center;

                            > span {
                                > i {
                                    display: inline-block;
                                    margin: 0 auto;
                                    width: 10px;
                                    height: 10px;
                                    border-radius: 50%;
                                    margin-right: 4px;
                                }

                                &:nth-child(1) {
                                    > i {
                                        background-color: var(--color-fg-brand-primary);
                                    }
                                }

                                &:nth-child(2) {
                                    > i {
                                        background-color: var(--color-fg-quinary);
                                    }
                                }
                            }
                        }
                    }

                    &.insight {
                        > ul {
                            list-style: none;
                            width: 100%;
                            display: flex;
                            flex-direction: row;
                            align-items: stretch;
                            gap: var(--box-gap);

                            > li.icon {
                                width: 130px;
                                flex-shrink: 0;

                                > i {
                                    display: block;
                                    width: 120px;
                                    aspect-ratio: 1/1;
                                    background-color: var(--color-bg-primary);
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    > i[data-role='icons'] {
                                        --icon-size: 48px;
                                        display: block;
                                        width: 48px;
                                        height: 48px;
                                        margin-left: 5px;
                                    }
                                }
                            }

                            > li.content {
                                flex-grow: 1;

                                > b {
                                    display: block;
                                    font: var(--font-label-xlg);
                                }

                                > p {
                                    font: var(--font-paragraph-md);
                                    color: var(--color-text-secondary);
                                    margin: 10px 0px;
                                    padding-left: calc(0.5lh + 4px);
                                    position: relative;

                                    &::before {
                                        width: 4px;
                                        height: 4px;
                                        border-radius: 2px;
                                        background: var(--color-text-secondary);
                                        position: absolute;
                                        top: calc(50% - 2px);
                                        left: 0;
                                        content: ' ';
                                    }
                                }
                            }
                        }

                        > ul + ul {
                            margin-top: var(--box-gap);
                            border-top: 1px solid var(--color-border-secondary);
                            padding-top: var(--box-gap);
                        }
                    }
                }
            }
        }
    }
}

body[data-color-scheme='dark'],
body[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
    div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
        &[data-context='inquiry'] {
            > section[data-role='content'] {
                > ul[data-role='lists'] {
                    > li {
                        > ul {
                            > li.text {
                                > i {
                                    --icon-size: 28px;
                                    --icon-grid: calc(var(--icon-size) * 2);
                                    background-image: url('../images/icons_inquiry_dark.svg');
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    width: var(--icon-size);
                                    height: var(--icon-size);
                                    overflow: hidden;

                                    &[data-x='1'] {
                                        background-position: calc(var(--icon-grid) * -1);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        &[data-context='report'] {
            > section[data-role='content'] {
                > article.report {
                    > div[data-role='box'] {
                        &.cs {
                            > img.bar {
                                content: url('../images/bar_chart_dark.svg');
                            }
                        }
                    }
                }
            }
        }
    }
}

/**
 * 1280px 이하 (1024px 에서 확인)
 */
@container module (width < 920px) {
    div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
        &[data-context='report'] {
            > section[data-role='content'] {
                > article.report {
                    > div[data-role='box'] {
                        display: flex;
                        flex-direction: column;
                        gap: 24px;

                        &.cs {
                            > img {
                                width: 100%;
                                padding-bottom: 24px;
                            }
                        }
                    }
                }
            }
        }
    }
}

/**
 * 1024px 이하 (768px 에서 확인)
 */
@container module (width < 764px) {
    div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
        &[data-context='article'] {
            > ul[data-role='lists'] {
                &[data-type='interview'],
                &[data-type='research'] {
                    row-gap: 32px;
                    column-gap: var(--im-container-padding-inline);

                    > li {
                        gap: 8px;

                        > a {
                            gap: 12px;
                        }
                    }
                }
            }

            > section[data-role='subtitle'] {
                > h3 {
                    gap: calc(var(--subtitle-gap) / 2);

                    > a {
                        &.xlg {
                            --action-button-height: 96px;
                            --action-inner-height: 96px;
                            font: var(--font-label-2xlg);
                        }
                    }
                }

                > small {
                    padding-left: calc(var(--subtitle-gap) * 2.21);
                }
            }
        }

        &[data-context='report'] {
            > section[data-role='content'] {
                p {
                    word-break: break-all;
                }

                > article {
                    > h6 {
                        margin: 16px 0px 8px 0px;
                    }

                    > div[data-role='box'] {
                        &.keyword {
                            > ul {
                                > li.content {
                                    > p {
                                        margin: 5px;
                                    }
                                }
                            }
                        }

                        &.platform {
                            > b {
                                margin-bottom: 0px;
                            }

                            > ul.row {
                                > li {
                                    > b {
                                        align-content: center;
                                    }
                                }
                            }
                        }

                        &.contract {
                            > b {
                                margin: 0px;
                            }

                            > ul {
                                > li.progress {
                                    > small {
                                        position: relative;
                                        top: -35px;
                                    }
                                }
                            }
                        }

                        &.survey {
                            > p {
                                margin: 0px;
                            }
                        }

                        &.insight {
                            > ul + ul {
                                margin-top: 0px;
                            }
                        }
                    }
                }
            }
        }

        &[data-context='inquiry'] {
            > section[data-role='content'] {
                > ul[data-role='lists'] {
                    grid-template-columns: repeat(1, 1fr);
                    row-gap: 16px;
                }
            }
        }
    }
}

/**
 * 768px 이하 (400px 에서 확인)
 */
@container module (width < 528px) {
    div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
        &[data-context='article'] {
            > ul[data-role='categories'] {
                --list-gap: 33px;
            }

            > ul[data-role='lists'] {
                &[data-type='interview'],
                &[data-type='research'] {
                    grid-template-columns: repeat(1, 1fr);
                    row-gap: 32px;
                    column-gap: var(--im-container-padding-inline);

                    > li {
                        gap: 8px;

                        > a {
                            gap: 12px;
                        }
                    }
                }
            }

            > section[data-role='subtitle'] {
                &:has(> small) {
                    gap: 20px;
                    margin-bottom: 32px;
                }

                > h3 {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 13px;

                    > a {
                        &.xlg {
                            --action-button-height: 56px;
                            --action-inner-height: 56px;
                            font: var(--font-label-lg);
                            font-weight: 400;
                        }
                    }
                }

                > small {
                    padding-left: 0px;
                }
            }
        }

        &[data-context='report'] {
            > section[data-role='content'] {
                > article {
                    > h4 {
                        margin: 40px 0px;
                    }

                    > h5 {
                        margin: 0px;
                    }

                    > div[data-role='box'] {
                        margin: 16px 0px 0px 0px;

                        &.intro {
                            > i {
                                width: 90%;
                            }
                        }

                        &.keyword {
                            > b {
                                margin-bottom: 12px;
                            }

                            > ul {
                                flex-direction: column;
                                gap: 20px;

                                > li.title {
                                    width: 100%;
                                }

                                > li.content {
                                    padding-top: 0px;
                                    border-top: none;

                                    > p {
                                        margin: 0px 0px 4px 0px;

                                        &:last-child {
                                            margin: 0px;
                                        }
                                    }
                                }
                            }
                        }

                        &.platform {
                            > b {
                                gap: 12px;
                            }

                            > ul.card {
                                flex-direction: column;
                                gap: 8px;
                                margin-bottom: calc(var(--box-gap) / 1.06);

                                > li {
                                    padding: calc(var(--box-gap) / 2);

                                    > b {
                                        padding-bottom: calc(var(--box-gap) / 4);
                                    }

                                    > p {
                                        padding-top: calc(var(--box-gap) / 4);
                                    }
                                }
                            }

                            > ul.row {
                                gap: 8px;

                                > li {
                                    flex-direction: column;

                                    > b {
                                        width: 100%;
                                        padding: calc(var(--box-gap) / 3.2);
                                    }

                                    > p {
                                        padding: 13px;
                                    }
                                }
                            }
                        }

                        &.contract {
                            gap: 12px;

                            > b {
                                font: var(--font-label-lg);
                            }

                            > p {
                                padding: calc(var(--box-gap) * 0.86);
                                margin: 0px 0px 30px 0px;

                                > br {
                                    display: none;
                                }
                            }

                            > ul {
                                > li.progress {
                                    > i {
                                        left: 15%;
                                    }
                                }
                            }
                        }

                        &.survey {
                            gap: 12px;

                            > ul {
                                grid-template-columns: repeat(2, 1fr);
                                padding-bottom: 18px;

                                > li {
                                    padding: 20px;
                                }
                            }

                            > b {
                                padding-top: calc(var(--box-gap) / 5.3);
                                margin: 0px;
                            }

                            > p {
                                line-height: 24px;
                            }
                        }

                        &.cs {
                            gap: 12px;
                            margin: 0px;

                            > b {
                                margin: 0px;
                            }

                            > img {
                                margin-bottom: 0px !important;
                            }
                        }

                        &.insight {
                            margin: 0px;

                            > ul {
                                flex-direction: column;
                                gap: 20px;

                                > li.icon {
                                    > i {
                                        width: 60px;
                                        height: 60px;

                                        > i[data-role='icons'] {
                                            --icon-size: 28px;
                                            width: 28px;
                                            height: 28px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    > p {
                        margin: 16px 0px 40px 0px;
                    }
                }

                > article.report {
                    > h5 {
                        margin-top: 40px;
                    }

                    &:last-child {
                        > p {
                            margin: 16px 0px 0px 0px;
                        }
                    }
                }
            }
        }
    }
}