/**
 * 이 파일은 코스모스 메인테마의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 테마 레이아웃 공통 스타일
 *
 * @file /modules/naddle/coursemos/themes/www/styles/style.css
 * @author youlapark <youlapark@naddle.net>
 * @license MIT License
 * @modified 2025. 4. 29.
 */
:root {
    --section-margin: 240px;
    --section-gap: 160px;
}

/**
 * 웹사이트 레이아웃 요소 정의
 */
body[data-type='website'] {
    > header {
        > div {
            > div[data-role='navigation'] {
                > div[data-role='container'] {
                    > h1 {
                        width: 162px;
                        height: 24px;
                        background: linear-gradient(
                            to right,
                            var(--color-text-brand-primary) 0%,
                            var(--color-text-brand-primary) 25%,
                            var(--color-text-primary) 25%,
                            var(--color-text-primary) 100%
                        );
                        transition: background 0s ease-in-out;
                        transition-delay: 0.3s;
                    }
                }
            }
        }

        &[data-layout='subcover']:not(.fixed) {
            > div {
                > div[data-role='navigation'] {
                    > div[data-role='container'] {
                        > h1 {
                            background: linear-gradient(
                                to right,
                                var(--color-text-brand-primary) 0%,
                                var(--color-text-brand-primary) 25%,
                                var(--color-gray-95) 25%,
                                var(--color-gray-95) 100%
                            );
                        }

                        > nav {
                            > ul {
                                > li {
                                    > a {
                                        color: var(--color-gray-95);
                                    }

                                    > button {
                                        > span {
                                            background: var(--color-gray-95);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    > main {
        /**
         * 인덱스 레이아웃
         */
        &[data-layout='index'] {
            --container-small-width: 1080px;
            --container-small-padding: calc((var(--im-container-width) - var(--container-small-width)) / 2);

            div[data-role='container'].small {
                max-width: var(--container-small-width);
            }
        }

        /**
         * 서브페이지 공통 레이아웃
         */
        &[data-layout='subcover'],
        &[data-layout='subtitle'],
        &[data-layout='subcontent'] {
            --container-small-padding: 180px;
            --subpage-padding-left: var(--container-small-padding);
            --subpage-padding-right: var(--container-small-padding);

            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 {
                    --container-widecard-width: calc(
                        (50vw + var(--im-container-width) / 2) - var(--subpage-padding-left)
                    );
                    --container-widecard-padding: calc(var(--im-container-width) - var(--subpage-padding-left));
                    width: var(--container-widecard-width);
                    max-width: var(--container-widecard-width);
                    padding-right: calc(var(--container-widecard-width) - var(--container-widecard-padding));
                }
            }

            &:has([data-module='naddle/coursemos']) {
                margin-bottom: var(--section-gap);
            }
        }

        /**
         * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
         */
        &[data-layout='subcover'],
        &[data-layout='subtitle'] {
            /**
             * 서브타이틀 레이아웃의 경우 좌측메뉴를 위해 좌측 여백을 조절한다.
             */
            &[data-layout='subtitle'] {
                --subpage-padding-left: calc(var(--container-small-padding) * 2);
            }

            > section[data-role='content'] {
                > div[data-role='container'] {
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;

                    > aside {
                        --padding-inline: 32px;
                        --padding-block: 24px;

                        > div[data-role='position'] {
                            width: 100%;
                            height: 1px;
                            position: absolute;
                            bottom: calc(100% + var(--header-height));
                            left: 0;
                            opacity: 0.5;
                        }

                        width: var(--subpage-padding-left);
                        border-left: 1px solid transparent;
                        position: sticky;
                        top: var(--header-height);
                        padding: 140px 0 0 0;
                        z-index: 10;

                        > ul {
                            list-style: none;
                            flex-shrink: 0;
                            display: flex;
                            flex-direction: column;
                            gap: var(--padding-block);

                            > li {
                                > a {
                                    font: var(--font-label-md);
                                    color: var(--color-bg-alpha-black-40-scroll);
                                    padding-left: calc(var(--padding-inline) + 1px);
                                    margin-left: -1px;

                                    &.selected {
                                        color: var(--color-text-primary);
                                        border-left: 1.5px solid var(--color-border-primary);
                                    }
                                }

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

                        > nav {
                            width: 240px;
                            margin-left: -1px;
                            background: var(--color-bg-secondary);
                            margin-top: 40px;

                            > ul {
                                list-style: none;
                                width: 100%;
                                padding: 0 var(--padding-inline) var(--padding-block) var(--padding-inline);

                                > li {
                                    font: var(--font-paragraph-md);
                                    font-weight: 700;
                                    padding: 5px 3px;

                                    > a {
                                        display: block;
                                        width: fit-content;
                                        margin: 10px 0px;
                                        font: var(--font-paragraph-md);
                                        color: var(--color-text-quinary);
                                        text-decoration: none;

                                        &.selected {
                                            color: var(--color-text-primary);
                                            border-bottom: 1px solid var(--color-text-primary);
                                        }
                                    }

                                    &.headline {
                                        padding: 24px 0px 10px 0px;
                                        font: var(--font-label-md);
                                        color: var(--color-text-quinary);

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

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

                        &:has(> nav) {
                            top: calc(var(--header-height) * -1 - 140px);
                        }

                        &:has(> ul > li) {
                            border-left-color: var(--color-bg-alpha-black-20-scroll);
                        }
                    }

                    > article {
                        flex-grow: 1;
                        padding-top: var(--section-gap);

                        &:not(:has(> form)) {
                            padding-right: var(--subpage-padding-right);
                        }
                    }
                }
            }
        }

        /**
         * 커버이미지가 존재하는 레이아웃의 랜딩영역
         */
        &[data-layout='subcover'] {
            > section[data-role='landing'] {
                height: 960px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                > div[data-role='container'] {
                    overflow: hidden;

                    > h2 {
                        padding-bottom: 48px;
                        font: var(--font-display-lg);
                        color: var(--color-text-white);

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

                        transform: translateX(-100%);
                        transition: transform 1.2s cubic-bezier(0.34, 0.07, 0.095, 0.995);
                    }

                    > small {
                        display: block;
                        padding-left: var(--subpage-padding-left);
                        font: var(--font-head-sm);
                        color: var(--color-text-white);

                        transform: translateY(100%);
                        transition: transform 1.2s cubic-bezier(0.34, 0.07, 0.095, 0.995);
                    }
                }

                > div[data-role='cover'] {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    content: ' ';
                    background-image: url(../images/subcover.webp);
                }

                &.animate {
                    > div[data-role='container'] {
                        > h2 {
                            transform: translateX(0);
                        }

                        > small {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }

        /**
         * 타이틀이 존재하는 레이아웃의 랜딩영역 및 본문 영역
         */
        &[data-layout='subtitle'],
        &[data-layout='subcontent'] {
            padding-top: var(--header-height);

            > section[data-role='landing'] {
                --padding-block: 128px;

                > div[data-role='container'] {
                    padding-top: var(--padding-block);

                    > h2 {
                        font: var(--font-display-lg);
                        color: var(--color-text-primary);
                        padding-bottom: 48px;

                        > i {
                            font-style: normal;
                            color: var(--color-text-brand-primary);
                        }
                    }

                    &:has(> small) {
                        margin-bottom: var(--padding-block);
                        overflow: hidden;

                        > h2 {
                            transform: translateX(-100%);
                            transition: transform 1.2s cubic-bezier(0.34, 0.07, 0.095, 0.995);
                        }

                        > small {
                            display: block;
                            padding-left: var(--subpage-padding-left);
                            font: var(--font-head-sm);
                            color: var(--color-text-secondary);

                            transform: translateY(100%);
                            transition: transform 1.2s cubic-bezier(0.34, 0.07, 0.095, 0.995);
                        }
                    }
                }

                > div[data-role='cover'] {
                    height: 360px;
                    background-image: url(../images/subtitle.webp);
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: 50% 50%;
                }

                &.animate {
                    > div[data-role='container'] {
                        > h2 {
                            transform: translateX(0);
                        }

                        > small {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
    }

    > footer {
        > section[data-role='contact'] {
            width: 100%;
            height: 480px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;

            &::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -2;
                background: url(../images/contact.webp) no-repeat 50% 50%;
                background-size: cover;
                content: ' ';
            }

            > div[data-role='container'] {
                > h4 {
                    font: var(--font-display-lg);
                    color: var(--color-white);

                    > i {
                        font-style: normal;
                        color: var(--color-text-brand-primary);
                    }
                }

                > div[data-role='container'] {
                    margin-top: 48px;
                    display: flex;

                    > p {
                        flex-grow: 1;
                        font: var(--font-head-sm);
                        color: var(--color-white);
                    }
                }
            }
        }
    }
}

/**
 * 컨텍스트 레이아웃 요소 정의
 */
body[data-type='context'] {
    > header {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: var(--theme-color);
        color: var(--color-text-white);

        > h1 {
            font-size: 20px;
            flex-grow: 1;
            flex-shrink: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-inline: var(--im-container-padding-inline);
        }

        > button {
            cursor: pointer;
            background: rgba(0, 0, 0, 0.1);
            width: 60px;
            height: 60px;
            font-family: moimz;
            color: var(--color-text-white);
            border: 0;
            font-size: 24px;

            &:hover {
                background: rgba(0, 0, 0, 0.15);
            }

            &::before {
                content: '\e405';
            }
        }
    }

    > main {
        &[data-popup='true'] {
            width: 100%;
            height: calc(100vh - 60px);
            padding-inline: var(--im-container-padding-inline);
        }

        padding-block: var(--im-container-padding-inline);
    }
}

@media (width < 1600px) {
    body[data-type='website'] {
        > main {
            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'],
            &[data-layout='subcontent'] {
                /**
                 * 서브타이틀 레이아웃의 경우 좌측메뉴를 위해 좌측 여백을 조절한다.
                 */
                &[data-layout='subtitle'] {
                    --subpage-padding-left: 280px;
                }
            }
        }
    }
}

@media (width < 1440px) {
    body[data-type='website'] {
        > main {
            /**
             * 인덱스 레이아웃
             */
            &[data-layout='index'] {
                --container-small-width: 940px;
            }

            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'],
            &[data-layout='subcontent'] {
                --subpage-padding-left: 180px;
                --subpage-padding-right: 0px;
            }

            /**
             * 커버이미지가 존재하는 레이아웃의 랜딩영역
             */
            &[data-layout='subcover'] {
                > section[data-role='landing'] {
                    height: 840px;
                }
            }

            /**
             * 타이틀이 존재하는 레이아웃의 랜딩영역 및 본문 영역
             */
            &[data-layout='subtitle'],
            &[data-layout='subcontent'] {
                > section[data-role='landing'] {
                    --padding-block: 64px;

                    > div[data-role='cover'] {
                        height: 280px;
                    }
                }
            }
        }
    }
}

@media (width < 1280px) {
    body[data-type='website'] {
        > main {
            /**
             * 인덱스 레이아웃
             */
            &[data-layout='index'] {
                --container-small-width: var(--im-container-width);
            }

            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'],
            &[data-layout='subcontent'] {
                --subpage-padding-left: 160px;
                --subpage-padding-right: 0px;

                /**
                 * 서브타이틀 레이아웃의 경우 좌측메뉴를 위해 좌측 여백을 조절한다.
                 */
                &[data-layout='subtitle'] {
                    --subpage-padding-left: 220px;
                }

                /**
                 * 본문영역의 경우 좌측 여백을 조절한다.
                 */
                &[data-layout='subcontent'] {
                    --subpage-padding-left: 0px;
                }
            }

            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'] {
                > section[data-role='content'] {
                    > div[data-role='container'] {
                        > aside {
                            --padding-inline: 16px;
                            --padding-block: 16px;

                            &:has(> nav) {
                                top: calc(var(--header-height) * -1 - 116px);
                            }

                            > nav {
                                width: 200px;
                            }
                        }
                    }
                }
            }

            /**
             * 커버이미지가 존재하는 레이아웃의 랜딩영역
             */
            &[data-layout='subcover'] {
                > section[data-role='landing'] {
                    height: 760px;
                }
            }
        }

        > footer {
            > section[data-role='contact'] {
                height: 340px;
            }
        }
    }
}

@media (width < 1024px) {
    body[data-type='website'] {
        --section-margin: 120px;
        --section-gap: 80px;

        /**
         * 액션 디자인
         */
        a[data-role='action'],
        button[data-role='action'] {
            --action-button-height: 56px;
            --action-inner-height: 56px;
            font: var(--font-label-md);

            &.dark {
                --color-bg-primary: var(--color-black);
                --color-text-primary: var(--color-white);
            }

            &.sm {
                --action-button-height: 40px;
                --action-inner-height: 40px;
                font: var(--font-label-sm);
            }

            &.lg {
                --action-button-height: 80px;
                --action-inner-height: 80px;
                font: var(--font-label-2xlg);
            }

            &.xlg {
                --action-button-height: 100px;
                --action-inner-height: 100px;
                font: var(--font-head-sm);
            }
        }

        > main {
            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'],
            &[data-layout='subcontent'] {
                --subpage-padding-left: 160px;
                --subpage-padding-right: 0px;

                /**
                 * 서브타이틀 레이아웃의 경우 좌측메뉴를 위해 좌측 여백을 조절한다.
                 */
                &[data-layout='subtitle'] {
                    --subpage-padding-left: 200px;
                }

                /**
                 * 본문영역의 경우 좌측 여백을 조절한다.
                 */
                &[data-layout='subcontent'] {
                    --subpage-padding-left: 0px;
                }
            }

            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'] {
                > section[data-role='content'] {
                    > div[data-role='container'] {
                        > aside {
                            --padding-inline: 16px;
                            --padding-block: 16px;

                            &:has(> nav) {
                                top: calc(var(--header-height) * -1 - 107px);
                            }

                            > nav {
                                width: 180px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width < 768px) {
    body[data-type='website'] {
        > header {
            &.fixed.withsub {
                > div {
                    > div[data-role='navigation'] {
                        backdrop-filter: none;
                        -webkit-backdrop-filter: none;
                    }
                }
            }
        }

        > main {
            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'],
            &[data-layout='subcontent'] {
                --subpage-padding-left: 0px;
                --subpage-padding-right: 0px;

                /**
                 * 서브타이틀 레이아웃의 경우 좌측메뉴를 위해 좌측 여백을 조절한다.
                 */
                &[data-layout='subtitle'] {
                    --subpage-padding-left: 0px;
                }

                /**
                 * 본문영역의 경우 좌측 여백을 조절한다.
                 */
                &[data-layout='subcontent'] {
                    --subpage-padding-left: 0px;
                }
            }

            /**
             * 좌측에 네비게이션이 존재하는 서브페이지 공통 레이아웃
             */
            &[data-layout='subcover'],
            &[data-layout='subtitle'] {
                > section[data-role='content'] {
                    > div[data-role='container'] {
                        flex-direction: column;
                        align-items: stretch;

                        > aside {
                            width: 100vw;
                            margin: 0px calc(var(--im-container-padding-inline) * -1);
                            background: var(--color-bg-alpha-white-60-scroll);
                            border: 0;
                            padding: 0px;
                            &.withheader {
                                background: transparent;

                                &::before {
                                    position: absolute;
                                    top: calc(var(--header-height) * -1);
                                    left: 0;
                                    width: 100%;
                                    height: calc(var(--header-height) + 54px);
                                    content: ' ';
                                    background: var(--color-bg-alpha-white-60-scroll);
                                    z-index: -1;
                                    backdrop-filter: blur(5px);
                                    -webkit-backdrop-filter: blur(5px);
                                }
                            }

                            > ul {
                                height: 54px;
                                display: flex;
                                flex-direction: row;
                                gap: 20px;
                                padding: 0px 12px;
                                border-bottom: 1px solid var(--color-bg-alpha-black-20-scroll);
                                overflow-y: auto;

                                > li {
                                    > a {
                                        height: 54px;
                                        margin-left: 0;
                                        margin-bottom: -1px;
                                        padding-left: 0;
                                        border-bottom: 1px solid transparent;
                                        line-height: 54px;

                                        &.selected {
                                            border-left: none;
                                            border-bottom: 2px solid var(--color-border-primary);
                                        }
                                    }
                                }
                            }

                            > nav {
                                margin-top: 0;
                                display: block;
                                width: 100vw;
                                padding: 0px 12px;
                                overflow-y: auto;

                                > ul {
                                    padding: var(--padding-block) var(--padding-inline);
                                    width: max-content;
                                    display: grid;
                                    grid-template-columns: repeat(auto-fill, max-content);
                                    grid-template-rows: repeat(2, auto);
                                    grid-auto-flow: column;

                                    > li {
                                        padding: 0px 24px 0px 0px;

                                        > a {
                                            margin: 2px 0px 0px 0px;
                                        }

                                        &.headline {
                                            padding: 0px;
                                        }

                                        &:not(.headline) {
                                            display: flex;
                                            width: max-content;
                                            flex-direction: row;
                                            gap: 24px;

                                            > a {
                                                flex-shrink: 0;
                                                white-space: nowrap;
                                            }
                                        }
                                    }
                                }
                            }

                            &:has(> nav) {
                                top: var(--header-height);
                            }
                        }
                    }
                }
            }
        }

        > footer {
            > section[data-role='contact'] {
                > div[data-role='container'] {
                    > div[data-role='container'] {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 16px;
                    }
                }
            }
        }
    }
}