/**
 * 이 파일은 코스모스 메인테마의 일부입니다. (https://www.coursemos.co.kr)
 *
 * EMS, LMS, IBT 화면
 *
 * @file /modules/naddle/coursemos/themes/www/styles/lxp.css
 * @author youlapark <youlapark@naddle.net>
 * @license MIT License
 * @modified 2024. 12. 17.
 */
@property --percentage {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

section[data-role='introduce'] {
    > div {
        padding-bottom: var(--section-gap);

        > h3 {
            position: relative;
            font: var(--font-display-md);
            color: var(--color-text-primary);

            > i[data-role='icons'] {
                --icon-size: 400px;
                position: absolute;
                top: 0;
                right: var(--subpage-padding-right);
                width: 400px;
                height: 400px;
                display: inline-block;
                flex-shrink: 0;
            }
        }

        > ul {
            display: flex;
            gap: 8px;
            list-style: none;
            padding-top: 64px;
            padding-bottom: 64px;

            > li {
                > button {
                    padding-left: 32px;
                    padding-right: 32px;
                }
            }
        }

        > div {
            display: flex;
            flex-direction: column;
            gap: 32px;

            > p {
                font: var(--font-label-2xlg);
                color: var(--color-text-quinary);

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

    > ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 100px;
        row-gap: var(--section-gap);

        > li {
            > i {
                display: inline-block;
                width: 160px;
                height: 160px;
            }

            > div {
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding-top: 64px;

                > b {
                    font: var(--font-head-sm);
                    color: var(--color-text-primary);
                }

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

section[data-role='statistics'] {
    margin-top: var(--section-margin);

    > div[data-role='title'] {
        display: flex;
        flex-direction: column;
        gap: 20px;

        > h3 {
            font: var(--font-display-md);
            color: var(--color-text-primary);

            > i {
                color: var(--color-cos-30);
                font-style: normal;
            }
        }

        > small {
            font: var(--font-paragraph-2xlg);
            color: var(--color-text-secondary);
            padding-left: var(--subpage-padding-right);
        }
    }

    > div[data-role='container'].fullsize {
        position: relative;
        height: 725px;
        margin-top: 64px;
        margin-bottom: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        &::before {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -2;
            background-image: url('../images/lxp/statistics.webp');
            background-position: center;
            content: ' ';
        }

        > div {
            width: calc(100vw - var(--subpage-padding-left) * 2);
            max-width: 960px;
            margin: 0 auto;
            background-position: 50% 100%;
            background-size: contain;
            background-repeat: no-repeat;

            &[data-role='header'] {
                height: 48px;
                background: var(--color-bg-primary);
                border-radius: 8px 8px 0px 0px;
                border-bottom: 1px solid var(--color-border-secondary);
                display: flex;
                align-items: center;
                gap: 8px;
                padding-left: 28px;

                > i {
                    border-radius: 10px;
                    background: #ccc;
                    width: 14px;
                    height: 14px;
                }
            }

            &[data-role='body'] {
                height: 492px;
                background: var(--color-bg-alpha-white-80);
                backdrop-filter: blur(15px);
                -webkit-backdrop-filter: blur(15px);
                padding: 34px 60px;

                > b {
                    display: block;
                    font: var(--font-head-sm);
                    color: var(--color-text-primary);
                    height: 90px;
                    position: relative;

                    &::before {
                        display: block;
                        content: ' ';
                        width: 448px;
                        height: 7px;
                        background: var(--color-fg-quinary);
                        border-radius: 7px;
                        position: absolute;
                        left: 0;
                        bottom: 18px;
                        opacity: 0.5;
                    }

                    &::after {
                        display: block;
                        content: ' ';
                        width: 298px;
                        height: 7px;
                        background: var(--color-fg-quinary);
                        border-radius: 7px;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        opacity: 0.5;
                    }
                }

                &.lms {
                    > div.graph {
                        display: flex;
                        column-gap: 126px;
                        justify-content: center;
                        margin-top: 70px;

                        > div {
                            display: flex;
                            flex-direction: column;
                            gap: 11px;

                            > p {
                                font: var(--font-label-md);
                                color: var(--color-text-primary);
                                text-align: center;
                            }

                            > div.progress {
                                position: relative;
                                width: 140px;
                                height: 140px;

                                &::before {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                    appearance: none;
                                    background: radial-gradient(
                                        closest-side,
                                        var(--color-bg-primary) 60%,
                                        var(--color-tblue-80) 0% 100%
                                    );
                                    z-index: -1;
                                    content: ' ';
                                }

                                > i {
                                    --percentage: 0;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    transition: --percentage 1s ease-out;

                                    &.complete {
                                        z-index: 1;
                                        background: radial-gradient(
                                                closest-side,
                                                var(--color-bg-primary) 60%,
                                                transparent 0 100%
                                            ),
                                            conic-gradient(
                                                var(--color-cos-30) calc(var(--percentage) * 1%),
                                                transparent 0
                                            );

                                        &::after {
                                            font: var(--font-label-2xlg);
                                            color: var(--color-text-primary);
                                            content: attr(data-percentage) '%';
                                        }
                                    }

                                    &.proceeding {
                                        z-index: 0;
                                        background: radial-gradient(
                                                closest-side,
                                                var(--color-bg-primary) 60%,
                                                transparent 0% 100%
                                            ),
                                            conic-gradient(
                                                var(--color-fg-graph-green) calc(var(--percentage) * 1%),
                                                transparent 0
                                            );
                                    }
                                }
                            }
                        }
                    }

                    > div.legend {
                        display: flex;
                        justify-content: flex-end;
                        gap: 24px;
                        padding-top: 31px;
                        padding-right: 40px;

                        > p:nth-child(1) {
                            > i {
                                display: inline-block;
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                background: var(--color-cos-30);
                            }
                        }
                        > p:nth-child(2) {
                            > i {
                                display: inline-block;
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                background: var(--color-fg-graph-green);
                            }
                        }
                        > p:nth-child(3) {
                            > i {
                                display: inline-block;
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                background: var(--color-tblue-80);
                            }
                        }
                    }
                }

                &.ems {
                    > div.chart {
                        display: flex;
                        align-items: flex-end;
                        column-gap: 76px;
                        justify-content: center;
                        margin-top: 30px;

                        > i {
                            display: block;
                            width: 402px;
                            height: 254px;
                            background-image: url('../images/lxp/chartl.svg');
                        }

                        > ul {
                            list-style: none;
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            align-items: center;
                            column-gap: 32px;
                            row-gap: 34px;

                            > li {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                width: 72px;
                                height: 100px;
                                gap: 4px;

                                > div {
                                    width: 72px;
                                    height: 72px;
                                    padding: 16px;
                                    border-radius: 50%;
                                    background: var(--color-bg-primary);

                                    > i {
                                        --icon-size: 40px;
                                        --icon-grid: calc(var(--icon-size) * 1.6);
                                        display: inline-block;
                                        background: var(--color-fg-tertiary);
                                        mask-image: url('../images/lxp/ems_icons.svg');
                                        mask-repeat: no-repeat;
                                        mask-size: cover;
                                        width: var(--icon-size);
                                        height: var(--icon-size);
                                        overflow: hidden;

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

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

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

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

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

                                &:nth-child(1) > div {
                                    background: var(--color-fg-graph-green);

                                    > i {
                                        background-color: var(--color-white) !important;
                                    }
                                }

                                &:nth-child(5) > div {
                                    background: var(--color-fg-brand-primary);

                                    > i {
                                        background-color: var(--color-white) !important;
                                    }
                                }

                                > span {
                                    font: var(--font-paragraph-sm);
                                    color: var(--color-text-tertiary);
                                }
                            }
                        }
                    }
                }

                &.ibt {
                    > b {
                        > i {
                            display: none;
                            width: 40px;
                            height: 40px;
                            position: relative;
                            top: -13px;
                            left: 570px;
                            border-radius: 50%;
                            background: var(--color-bg-quinary);

                            > i {
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                width: 24px;
                                height: 24px;
                                transform: translate(-50%, -50%);
                                mask-image: url(../images/lxp/ibt_icons.svg);
                                mask-repeat: no-repeat;
                                mask-size: cover;
                                overflow: hidden;
                                background: var(--color-bg-primary);
                            }
                        }
                    }

                    > div.zoom {
                        display: flex;
                        justify-content: space-around;
                        flex-grow: 1;
                        margin-top: 34px;

                        > div {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 24px;
                            background: var(--color-bg-primary);
                            width: 244px;
                            height: 232px;
                            padding: 12px;
                            border-radius: 8px;

                            > span {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 12px 16px;
                                width: 220px;
                                height: 48px;
                                background: var(--color-text-brand-primary);
                                border-radius: 8px;

                                > p {
                                    font: var(--font-caption-md);
                                    color: var(--color-text-white);
                                }

                                > i {
                                    width: 24px;
                                    height: 24px;
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                }
                            }

                            > i {
                                display: inline-block;
                                width: 120px;
                                height: 120px;
                                mask-repeat: no-repeat;
                                mask-size: cover;
                                background-color: var(--color-fg-primary);
                            }
                        }

                        > ul {
                            list-style: none;
                            display: flex;
                            flex-direction: column;
                            gap: 24px;

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

                                    > li {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;

                                        > span {
                                            display: flex;
                                            align-items: center;
                                            gap: 6px;
                                            font: var(--font-label-sm);
                                            color: var(--color-text-primary);

                                            > i {
                                                --icon-size: 24px;
                                                --icon-grid: calc(var(--icon-size) * 2);
                                                mask-image: url(../images/lxp/ibt_icons.svg);
                                                mask-repeat: no-repeat;
                                                mask-size: cover;
                                                background-color: var(--color-fg-primary);
                                                width: 24px;
                                                height: 24px;
                                                overflow: hidden;

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

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

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

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

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

                                            &.color {
                                                color: var(--color-fg-graph-green);

                                                > i {
                                                    background-color: var(--color-fg-graph-green);
                                                }
                                            }
                                        }

                                        > p {
                                            width: 149px;
                                            height: 6px;
                                            background: var(--color-bg-primary);
                                            border-radius: 999px;

                                            > i {
                                                position: absolute;
                                                width: 81px;
                                                height: 6px;
                                                background: var(--color-cos-60);
                                                border-radius: 999px;
                                            }
                                        }

                                        &.text {
                                            font: var(--font-paragraph-md);
                                            color: var(--color-text-quinary);
                                            width: 360px;
                                            height: 46px;
                                            padding: 10px 20px;
                                            background: var(--color-bg-primary);
                                            border-radius: 8px;
                                            border: 1px solid var(--color-border-tertiary);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

section[data-role='features'] {
    padding: var(--section-gap) 0;

    > div[data-role='articles'] {
        display: flex;
        flex-direction: column;
        gap: var(--section-gap);

        > article {
            display: flex;
            flex-direction: column;

            > div[data-role='title'] {
                display: flex;
                flex-direction: column;
                gap: 20px;

                > h3 {
                    font: var(--font-head-lg);
                    color: var(--color-text-primary);
                }

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

            > div[data-role='subtitle'] {
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding-bottom: 40px;

                > h4 {
                    font: var(--font-head-sm);
                    color: var(--color-text-primary);
                    padding-left: 1lh;
                    position: relative;

                    &::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 1lh;
                        height: 1lh;
                        content: ' ';
                        background: url('../images/icons/bullet.svg') no-repeat 0 50%;
                    }
                }

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

            > div[data-role='container'].widecard {
                display: flex;
                flex-direction: row;
                background: var(--color-bg-secondary);

                > h5 {
                    font: var(--font-label-2xlg);
                    color: var(--color-text-secondary);
                    width: 360px;
                    padding: 32px 24px;

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

                > ul {
                    flex-grow: 1;
                    list-style: none;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    justify-content: flex-start;
                    padding: 32px 0px 32px 24px;

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

                        > b {
                            display: flex;
                            gap: 8px;
                            align-items: flex-start;
                            font: var(--font-label-xlg);

                            > i {
                                margin-top: calc((1lh - 28px) / 2);
                                --icon-size: 28px;
                                width: 28px;
                                height: 28px;
                            }

                            > span {
                                font: var(--font-label-xlg);
                                color: var(--color-text-secondary);
                            }
                        }

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

                    &:has(p) {
                        column-gap: 80px;
                        row-gap: 48px;
                    }

                    &:not(:has(p)) {
                        gap: 24px;
                    }
                }

                > h5 + ul {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }
    }

    &.ems {
        > div[data-role='tab'] {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding-bottom: var(--section-gap);

            > button {
                border: 0px;
                flex-basis: 50%;
                flex-grow: 1;
                flex-shrink: 0;
                height: 72px;
                padding: 20px 60px;
                text-align: center;
                font: var(--font-label-xlg);
                color: var(--color-text-secondary);
                background: var(--color-bg-tertiary);

                &.selected {
                    background: var(--color-bg-brand-primary);
                    color: var(--color-text-secondary);
                }
            }
        }

        > div[data-role='articles'][data-tab] {
            display: none;
            gap: var(--section-gap);
        }

        &[data-active='university'] {
            > div[data-role='tab'] {
                > button[data-tab='university'] {
                    background: var(--color-bg-brand-primary);
                    color: var(--color-text-white);
                }
            }

            > div[data-role='articles'][data-tab='university'] {
                display: flex;
            }
        }

        &[data-active='company'] {
            > div[data-role='tab'] {
                > button[data-tab='company'] {
                    background: var(--color-bg-brand-primary);
                    color: var(--color-text-white);
                }
            }

            > div[data-role='articles'][data-tab='company'] {
                display: flex;
            }
        }
    }
}

section[data-role='tools'] {
    position: relative;
    padding: var(--section-gap) 0;

    &::before {
        position: absolute;
        top: 0;
        left: calc(var(--im-container-width) / 2 - 50vw - var(--subpage-padding-left));
        width: 100vw;
        height: 100%;
        z-index: -1;

        background: var(--color-bg-brand-section);
        content: ' ';
    }

    > div[data-role='subtitle'] {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-bottom: 80px;

        > h4 {
            font: var(--font-head-lg);
            color: var(--color-text-primary);
        }

        > p {
            font: var(--font-paragraph-md);
            color: var(--color-gray-40);
        }
    }

    > div[data-role='container'].widecard {
        > ul {
            width: 100%;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            justify-content: flex-start;
            column-gap: 80px;
            row-gap: 48px;

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

                > b {
                    display: flex;
                    align-items: flex-start;
                    gap: 8px;
                    font: var(--font-label-xlg);

                    > i {
                        margin-top: calc((1lh - 28px) / 2);
                        --icon-size: 28px;
                        display: inline-block;
                        width: 28px;
                        height: 28px;
                    }

                    > span {
                        font: var(--font-label-xlg);
                        color: var(--color-text-secondary);
                    }
                }

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

body[data-color-scheme='dark'],
body[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
    section[data-role='statistics'] {
        > div[data-role='container'] {
            > div[data-role='body'] {
                &.ems {
                    > div.chart {
                        > i {
                            background-image: url('../images/lxp/chartd.svg');
                        }
                    }
                }
            }
        }
    }
}

/** 1280px 이하 (1024px 확인) */
@container content (width < 1000px) {
    section[data-role='introduce'] {
        > div {
            > h3 {
                > i[data-role='icons'] {
                    --icon-size: 300px;
                    width: 300px;
                    height: 300px;
                }
            }
        }

        > ul {
            column-gap: 70px;
            row-gap: 120px;
        }
    }

    section[data-role='statistics'] {
        > div[data-role='container'].fullsize {
            > div[data-role='body'] {
                padding: 40px 41px;

                &.lms {
                    > div.graph {
                        column-gap: 90px;
                        margin-top: 70px;
                    }

                    > div.legend {
                        padding: 50px 0px 0px 0px;
                    }
                }

                &.ems {
                    > div.chart {
                        column-gap: 20px;

                        > i {
                            background-size: 100%;
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }
                }
            }
        }
    }

    section[data-role='features'] {
        > div[data-role='articles'] {
            > article {
                > div[data-role='container'].widecard {
                    > h5 {
                        width: 320px;
                    }

                    > ul {
                        grid-template-columns: repeat(2, 1fr);
                        column-gap: 64px;
                    }
                }
            }
        }
    }

    section[data-role='tools'] {
        > div[data-role='container'].widecard {
            > ul {
                grid-template-columns: repeat(2, 1fr);
                column-gap: 64px;
            }
        }
    }
}

/** 1024px 이하 (768px 확인) */
@container content (width < 824px) {
    section[data-role='introduce'] {
        > div {
            > h3 {
                > i[data-role='icons'] {
                    --icon-size: 200px;
                    width: 200px;
                    height: 200px;
                    z-index: -1;
                }
            }
        }

        > ul {
            grid-template-columns: repeat(1, 1fr);
            row-gap: 50px;

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

    /**
     * @todo 768px 에서 확인 후 깨지지 않는 스타일시트로 복원
     */
    section[data-role='statistics'] {
        > div[data-role='container'].fullsize {
            &::before {
                background-size: cover;
            }

            > div[data-role='header'] {
                width: 70vw;
            }

            > div[data-role='body'] {
                width: 70vw;

                > b {
                    &::before {
                        width: 47vw;
                    }

                    &::after {
                        width: 35vw;
                    }
                }

                &.lms {
                    > div.graph {
                        column-gap: 30px;

                        > div {
                            > div.progress {
                                width: 15vw;
                                height: 15vw;

                                > i.complete {
                                    &::after {
                                        /* font: var(--font-label-lg); */
                                    }
                                }
                            }
                        }
                    }
                }

                &.ems {
                    > div.chart {
                        > i {
                            width: 220px;
                            height: 146px;
                        }

                        > ul {
                            column-gap: 1px;

                            > li {
                                width: 47px;
                                height: 0px;

                                > div {
                                    width: 30px;
                                    height: 30px;
                                    padding: 4px;

                                    > i {
                                        --icon-size: 21px;
                                        width: 21px;
                                        height: 21px;
                                    }
                                }

                                > span {
                                    font: var(--font-paragraph-xsm);
                                }
                            }
                        }
                    }
                    > div.chart {
                        display: grid;
                        justify-items: center;
                        row-gap: 10px;
                        margin-top: 10px;
                        gap: 35px;

                        > i {
                            width: 325px;
                            height: 210px;
                        }

                        > ul {
                            grid-template-columns: repeat(6, 1fr);
                            column-gap: 2.8vw;

                            > li {
                                > div {
                                    width: 50px;
                                    height: 50px;
                                    padding: 12px;

                                    > i {
                                        --icon-size: 25px;
                                        width: 25px;
                                        height: 25px;
                                    }
                                }
                            }
                        }
                    }
                }

                &.ibt {
                    > div.zoom {
                        gap: 14px;
                        margin-top: 60px;

                        > div {
                            width: 190px;
                            height: 172px;

                            > span {
                                justify-content: space-around;
                                width: 100%;
                                height: 30px;
                                padding: 6.75px 9px;

                                > p {
                                    font-size: 10px;
                                    font-weight: 500;
                                }

                                > i {
                                    width: 13.5px;
                                    height: 13.5px;
                                }
                            }

                            > i {
                                width: 90px;
                                height: 90px;
                            }
                        }

                        > ul {
                            > li {
                                > ul {
                                    > li {
                                        &:not(.text) {
                                            gap: 10px;

                                            > p {
                                                width: 120px;
                                            }
                                        }
                                        &.text {
                                            width: 100%;
                                            font: var(--font-paragraph-xsm);
                                            padding: 4px 12px;
                                            border-radius: 3.3px;
                                            border: 0.4px solid #bcbcbc;
                                            height: 26px;
                                        }

                                        > span {
                                            font: var(--font-label-xsm);
                                            gap: 4px;

                                            > i {
                                                --icon-size: 15px;
                                                width: 15px;
                                                height: 15px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        > div[data-role='title'] {
            > small {
                > br {
                    display: none;
                }
            }
        }
    }

    section[data-role='features'] {
        > div[data-role='articles'] {
            > article {
                > div[data-role='container'].widecard {
                    flex-direction: column;

                    > h5 {
                        flex-basis: 100%;
                        padding-bottom: 0;
                    }

                    > ul {
                        grid-template-columns: repeat(2, 1fr);
                        column-gap: 20px;
                        row-gap: 20px;
                    }
                }
            }
        }
    }

    section[data-role='tools'] {
        > div[data-role='container'].widecard {
            > ul {
                row-gap: 20px;
                column-gap: 20px;
            }
        }
    }
}

/** 768px 이하 (400px 확인) */
@container content (width < 560px) {
    /**
     * @todo 400px 에서 깨지지 않는 차트 스타일시트 복원
     */
    section[data-role='statistics'] {
        > div[data-role='container'].fullsize {
            height: 70vh;

            &::before {
                background-size: cover;
            }

            > div[data-role='header'] {
                width: 90vw;
                height: 36px;
                padding-left: 19px;

                > i {
                    width: 10px;
                    height: 10px;
                }
            }

            > div[data-role='body'] {
                width: 90vw;
                max-height: 55vh;
                padding: 22px 19px;

                > b {
                    font: var(--font-label-xlg);
                    height: 65px;

                    &::before {
                        width: 265px;
                    }

                    &::after {
                        width: 176px;
                    }
                }

                &.lms {
                    max-height: 55vh;

                    > div.graph {
                        margin-top: 70px;

                        > div {
                            > p {
                                font: var(--font-label-xsm);
                                word-break: break-all;
                                white-space: pre;
                            }
                            > div.progress {
                                width: 20vw;
                                height: 20vw;

                                > i.complete {
                                    &::after {
                                        font: var(--font-label-md);
                                    }
                                }
                            }
                        }
                    }

                    > div.legend {
                        justify-content: center;
                        padding: 48px 0px 0px 0px;
                    }
                }

                &.ems {
                    > div.chart {
                        > ul {
                            column-gap: 2vw;

                            > li {
                                > div {
                                    width: 40px;
                                    height: 40px;
                                    padding: 7px;
                                }
                            }
                        }

                        > i {
                            width: 280px;
                            height: 200px;
                        }
                    }
                }

                &.ibt {
                    > b {
                        > i {
                            display: none;
                        }
                    }

                    > div.zoom {
                        gap: 20px;
                        margin-top: 20px;
                        flex-direction: column;
                        align-items: center;

                        > div {
                            width: 170px;
                            height: 138px;
                            gap: 13.5px;

                            > span {
                                height: 26px;

                                > p {
                                    font-size: 8px;
                                }
                            }

                            > i {
                                width: 77.5px;
                                height: 77.5px;
                            }
                        }

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

    section[data-role='features'] {
        > div[data-role='articles'] {
            > article {
                > div[data-role='container'].widecard {
                    > ul {
                        grid-template-columns: repeat(1, 1fr);
                    }

                    > h5 + ul {
                        grid-template-columns: repeat(1, 1fr);
                    }
                }
            }
        }

        &.ems {
            > div[data-role='tab'] {
                > button {
                    height: 64px;
                    padding: 0px;
                }
            }
        }
    }

    section[data-role='tools'] {
        > div[data-role='container'].widecard {
            > ul {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }
}