/**
 * 이 파일은 코스모스 메인테마의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 게시물 본문 스타일
 *
 * @file /modules/naddle/coursemos/templates/www/styles/article.css
 * @author youlapark <youlapark@naddle.net>
 * @license MIT License
 * @modified 2024. 11. 12.
 */
div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
    div[data-role='articles'] {
        > article {
            margin-top: 64px;

            /**
             * 케이스사례
             */
            &.case {
                > div[data-role='container'] {
                    background: var(--color-bg-tertiary);

                    > div.details {
                        display: flex;
                        max-width: var(--im-container-width);
                        padding-left: var(--subpage-padding-left);
                        padding-right: var(--subpage-padding-right);
                        margin: 0 auto;
                        gap: 40px;

                        > i {
                            width: 540px;
                            aspect-ratio: 540/450;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: center;
                            align-self: stretch;
                        }

                        > div {
                            display: flex;
                            flex-grow: 1;
                            gap: 32px;
                            flex-direction: column;
                            justify-content: center;
                            align-items: flex-start;
                            flex: 1 0 0;

                            > i {
                                display: flex;
                                align-items: center;
                                width: 100%;
                                height: 80px;
                                border: 16px solid var(--color-white);
                                background-repeat: no-repeat;
                                background-size: contain;
                                background-color: var(--color-white);
                            }

                            > p {
                                width: 100%;
                                height: 1px;
                                border: 1px solid var(--color-border-secondary);
                            }

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

                                > li {
                                    display: flex;
                                    gap: 16px;

                                    > b {
                                        width: 80px;
                                        font: var(--font-label-md);
                                        color: var(--color-text-primary);
                                    }

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

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

            /**
             * 랜딩이미지
             */
            &.landing {
                > div[data-role='container'] {
                    background: var(--color-bg-tertiary);

                    > div {
                        width: calc(
                            var(--im-container-width) - var(--subpage-padding-left) - var(--subpage-padding-right)
                        );
                        margin: 0 auto;

                        > div {
                            width: 100%;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: 50% 50%;

                            &.interview {
                                aspect-ratio: 1400/875;
                            }

                            &.research {
                                aspect-ratio: 1400/500;
                            }
                        }
                    }
                }
            }

            &.title {
                > h4 {
                    font: var(--font-head-xsm);
                    color: var(--color-text-secondary);
                }
            }

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

                    &.box {
                        padding: 20px 20px 20px calc(1lh + 20px);
                        background: var(--color-bg-secondary);
                        font: var(--font-paragraph-md);
                        color: var(--color-text-tertiary);
                        position: relative;

                        &::before {
                            font: var(--font-paragraph-md);
                            font-family: moimz;
                            width: 1lh;
                            height: 1lh;
                            color: var(--color-text-brand-primary);
                            position: absolute;
                            top: 20px;
                            left: 20px;
                            content: '\e503';
                        }
                    }
                }
            }

            &.article {
                display: flex;
                flex-direction: column;
                gap: 20px;

                > h4 {
                    font: var(--font-head-xsm);
                    color: var(--color-text-secondary);
                }

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

            &.qna {
                display: flex;
                flex-direction: column;
                gap: 20px;

                > h4 {
                    position: relative;
                    display: flex;
                    align-items: center;
                    font: var(--font-head-xsm);
                    color: var(--color-text-secondary);
                    padding-left: calc(1lh + 16px);

                    &::before {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 1lh;
                        height: 1lh;
                        content: 'Q';
                        border-radius: 50%;
                        text-align: center;
                        background: var(--color-bg-tertiary);
                        color: var(--color-text-brand-primary);
                    }
                }

                > p {
                    font: var(--font-paragraph-md);
                    color: var(--color-text-tertiary);
                    padding-left: calc(1lh + 30px);
                }
            }

            &.table {
                > b {
                    display: block;
                    font: var(--font-head-xsm);
                }

                > table {
                    table-layout: fixed;
                    border-collapse: 0;
                    border: 0;
                    border-top: 1px solid var(--color-border-secondary);
                    width: 100%;

                    > tbody {
                        > tr {
                            > td {
                                padding: 20px 0px;
                                vertical-align: top;

                                &:first-child {
                                    width: 200px;
                                    padding-right: 40px;
                                    color: var(--color-text-secondary);
                                    font: var(--font-label-md);
                                }

                                &:last-child {
                                    width: 100%;
                                    color: var(--color-text-tertiary);
                                    font: var(--font-paragraph-md);
                                }
                            }

                            &:first-child {
                                > td {
                                    padding-top: 40px;
                                }
                            }

                            &:last-child {
                                > td {
                                    padding-bottom: 40px;
                                }
                            }
                        }
                    }
                }

                > b + table {
                    margin-top: 24px;
                }
            }

            &.image {
                > div[data-role='container'] {
                    background: var(--color-bg-tertiary);

                    > div,
                    > a {
                        width: calc(
                            var(--im-container-width) - var(--subpage-padding-left) - var(--subpage-padding-right)
                        );
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: 50% 50%;
                    }
                }
            }

            &.card {
                --item-gap: 20px;
                --box-padding-inline: 80px;
                --box-padding-block: 64px;
                --item-max-width: calc(
                    var(--im-container-width) - var(--subpage-padding-left) - var(--subpage-padding-right) -
                        var(--box-padding) * 3
                );
                --item-max-height: min(500px, 60vw);

                > div[data-role='container'] {
                    position: relative;
                    background: var(--color-bg-tertiary);

                    &::before {
                        content: ' ';
                        width: calc(100vw - 100%);
                        height: 100%;
                        position: absolute;
                        top: 0;
                        right: 100%;
                        background: var(--color-bg-primary);
                        z-index: 100;
                    }

                    &::after {
                        content: ' ';
                        width: var(--box-padding);
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: linear-gradient(
                            to right,
                            var(--color-bg-tertiary) 0%,
                            var(--color-bg-tertiary) 10%,
                            rgba(255, 255, 255, 0) 100%
                        );
                        background: var(--color-bg-tertiary);
                        z-index: 100;
                    }

                    > div {
                        width: calc(
                            var(--im-container-width) - var(--subpage-padding-left) - var(--subpage-padding-right)
                        );
                        padding: var(--box-padding-block) 0 var(--box-padding-block) var(--box-padding-inline);

                        > div[data-role='swiper'] {
                            width: calc(100% + var(--item-gap));
                            margin: 0 calc(var(--item-gap) * -0.5);

                            > div.swiper-wrapper {
                                > div.swiper-slide {
                                    padding: 0 calc(var(--item-gap) / 2);
                                    flex-shrink: 1;

                                    > div {
                                        height: var(--item-max-height);
                                        background-repeat: no-repeat;
                                        background-size: cover;
                                        background-position: 50% 50%;

                                        &.wide {
                                            max-width: var(--item-max-width);
                                        }
                                    }
                                }
                            }

                            > div.controller {
                                padding: var(--box-padding-block) calc(var(--item-gap) / 2) 0 calc(var(--item-gap) / 2);
                                display: flex;
                                align-items: center;
                                gap: 44px;
                                z-index: 1;

                                > div.scrollbar {
                                    width: 100%;
                                    background: var(--color-border-secondary);
                                    height: 4px;
                                    border-radius: 2px;
                                    flex-grow: 1;

                                    > div {
                                        background: var(--color-fg-brand-primary);
                                        height: 4px;
                                        border-radius: 2px;
                                    }
                                }

                                > aside {
                                    display: flex;
                                    gap: 8px;
                                    flex-shrink: 0;
                                    z-index: 1000;

                                    > button {
                                        flex-shrink: 0;
                                        border-color: var(--color-border-secondary);

                                        &::before {
                                            background: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &.ol {
                margin-top: 20px;

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

                    > li {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        padding: 32px;
                        background: var(--color-bg-secondary);
                        border-radius: 8px;

                        > b {
                            display: flex;
                            flex-direction: column;
                            gap: 20px;
                            font: var(--font-label-xlg);
                            color: var(--color-text-secondary);

                            > i {
                                width: 40px;
                                height: 40px;
                                background-color: var(--color-bg-brand-primary);
                                border-radius: 999px;
                                font: var(--font-label-sm);
                                color: var(--color-text-white);
                                text-align: center;
                                align-content: center;
                            }
                        }

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

            &.interview {
                display: flex;
                align-items: center;
                gap: 32px;
                margin-top: 64px;

                > i {
                    display: inline-block;
                    width: 90px;
                    height: 90px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                    border-radius: 50%;
                }

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

                    > a {
                        display: flex;
                        align-items: center;
                        font: var(--font-paragraph-md);
                        color: var(--color-text-tertiary);

                        > i {
                            font-size: 20px;
                            padding-left: 4px;
                        }
                    }
                }
            }
        }
    }
}

@container module (width < 1360px) {
    div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
        div[data-role='articles'] {
            > article {
                &.image {
                    > div[data-role='container'] {
                        &.fullsize {
                            > div {
                                width: var(--im-container-width);
                            }
                        }
                    }
                }

                &.qna {
                    > p {
                        padding-left: calc(1lh + 30px);
                    }
                }

                &.card {
                    --box-padding-inline: 60px;
                    --box-padding-block: 40px;
                    --item-max-height: 400px;
                }
            }
        }
    }
}

@container module (width < 975px) {
    div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
        div[data-role='articles'] {
            > article {
                &.case {
                    > div[data-role='container'] {
                        > div.details {
                            > i {
                                width: 420px;
                            }
                        }
                    }
                }

                &.card {
                    --box-padding-inline: 40px;
                    --box-padding-block: 40px;
                    --item-max-width: calc(100vw - 80px);
                    --item-max-height: 360px;

                    > div[data-role='container'] {
                        > div {
                            > div[data-role='swiper'] {
                                > div.controller {
                                    > aside {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@container module (width < 720px) {
    div[data-role='module'][data-module='naddle/coursemos'][data-template='www'] {
        div[data-role='articles'] {
            > article {
                margin-top: 32px;

                &.case {
                    > div[data-role='container'] {
                        > div.details {
                            flex-direction: column;
                            gap: 0px;

                            > i {
                                width: 100%;
                            }

                            > div {
                                padding: 40px 0;
                                gap: 16px;
                                align-items: center;

                                > ul {
                                    width: 100%;
                                    gap: 8px;

                                    > li {
                                        flex-direction: row;

                                        > b {
                                            width: 100px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                &.landing {
                    margin-top: 0px;
                }

                &.ol {
                    > ul {
                        gap: 16px;

                        > li {
                            padding: 16px;
                            gap: 10px;
                        }
                    }
                }

                &.qna {
                    gap: 10px;

                    > p {
                        padding-left: calc(1lh + 22px);
                    }
                }

                &.table {
                    margin-top: 40px;

                    > table {
                        margin-top: 20px;

                        > tbody {
                            > tr {
                                display: flex;
                                flex-direction: column;

                                > td {
                                    padding: 10px 0px 6px 0px;
                                }
                            }
                        }
                    }
                }

                &.card {
                    --box-padding-inline: 20px;
                    --box-padding-block: 20px;
                    --item-max-width: calc(100vw - 80px);
                    --item-max-height: 360px;
                }

                &.interview {
                    gap: 16px;
                    margin-top: 32px;

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

                    > div {
                        > a {
                            > i {
                                padding-left: 3px;
                                font-weight: 400;
                            }
                        }
                    }
                }
            }
        }
    }
}