/**
 * 이 파일은 코스모스 모듈의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 코스모스 테마 공통 스타일
 *
 * @file /modules/naddle/coursemos/styles/common.css
 * @author youlapark <youlapark@naddle.net>
 * @license MIT License
 * @modified 2024. 12. 26.
 */
:root {
    --font-display-lg: 700 clamp(40px, 5.5vw, 88px) / 1.4545 SUIT;
    --font-display-md: 700 clamp(38px, 4.5vw, 72px) / 1.4444 SUIT;
    --font-head-lg: 700 2.5rem/1.5 SUIT;
    --font-head-md: 700 2.25rem/1.4444 SUIT;
    --font-head-sm: 700 max(28px, 2rem) / 1.5 SUIT;
    --font-head-xsm: 700 1.75rem/1.4286 SUIT;

    --font-label-2xlg: 700 1.5rem/1.5 SUIT;
    --font-label-xlg: 700 1.25rem/1.6 SUIT;
    --font-label-lg: 700 1.125rem/1.4444 SUIT;
    --font-label-md: 700 1rem/1.5 SUIT;
    --font-label-sm: 700 14px/1.5714 SUIT;
    --font-label-xsm: 700 12px/1.6667 SUIT;

    --font-paragraph-2xlg: 500 1.5rem/1.5 SUIT;
    --font-paragraph-xlg: 500 1.25rem/1.6 SUIT;
    --font-paragraph-lg: 500 1.125rem/1.5556 SUIT;
    --font-paragraph-md: 500 1rem/1.625 SUIT;
    --font-paragraph-sm: 500 0.875rem/1.7143 SUIT;
    --font-paragraph-xsm: 500 0.75rem/1.8333 SUIT;
    --font-caption-md: 500 12px/1.8333 SUIT;

    --color-cos-0: #000000;
    --color-cos-1: #030b16;
    --color-cos-2: #07162c;
    --color-cos-5: #041933;
    --color-cos-10: #0d509b;
    --color-cos-20: #085cc5;
    --color-cos-30: #0075f8;
    --color-cos-40: #068cff;
    --color-cos-50: #1eaaff;
    --color-cos-60: #48c9ff;
    --color-cos-70: #83deff;
    --color-cos-80: #b5eaff;
    --color-cos-90: #d6f2ff;
    --color-cos-95: #ebf9ff;
    --color-cos-98: #f5fcff;
    --color-cos-99: #fafeff;
    --color-cos-100: #ffffff;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-1: #030303;
    --color-gray-2: #050505;
    --color-gray-4: #0a0a0a;
    --color-gray-6: #0f0f0f;
    --color-gray-10: #1a1a1a;
    --color-gray-12: #1f1f1f;
    --color-gray-16: #262626;
    --color-gray-20: #333333;
    --color-gray-30: #4d4d4d;
    --color-gray-40: #666666;
    --color-gray-50: #808080;
    --color-gray-60: #999999;
    --color-gray-70: #b3b3b3;
    --color-gray-80: #cccccc;
    --color-gray-86: #d1d1d1;
    --color-gray-88: #d9d9d9;
    --color-gray-90: #e6e6e6;
    --color-gray-94: #f0f0f0;
    --color-gray-95: #f2f2f2;
    --color-gray-96: #f5f5f5;
    --color-gray-98: #fafafa;
    --color-gray-99: #fcfcfc;

    --color-white-0: rgba(255, 255, 255, 0);
    --color-white-1: rgba(255, 255, 255, 0.01);
    --color-white-2: rgba(255, 255, 255, 0.02);
    --color-white-4: rgba(255, 255, 255, 0.04);
    --color-white-5: rgba(255, 255, 255, 0.05);
    --color-white-6: rgba(255, 255, 255, 0.06);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-90: rgba(255, 255, 255, 0.9);
    --color-white-94: rgba(255, 255, 255, 0.94);
    --color-white-95: rgba(255, 255, 255, 0.95);
    --color-white-96: rgba(255, 255, 255, 0.97);
    --color-white-98: rgba(255, 255, 255, 0.98);
    --color-white-99: rgba(255, 255, 255, 0.99);
    --color-white-100: rgba(255, 255, 255, 1);

    --color-black-0: rgba(0, 0, 0, 0);
    --color-black-1: rgba(0, 0, 0, 0.01);
    --color-black-2: rgba(0, 0, 0, 0.02);
    --color-black-4: rgba(0, 0, 0, 0.04);
    --color-black-5: rgba(0, 0, 0, 0.05);
    --color-black-6: rgba(0, 0, 0, 0.06);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-30: rgba(0, 0, 0, 0.3);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black-70: rgba(0, 0, 0, 0.7);
    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-90: rgba(0, 0, 0, 0.9);
    --color-black-94: rgba(0, 0, 0, 0.94);
    --color-black-95: rgba(0, 0, 0, 0.95);
    --color-black-96: rgba(0, 0, 0, 0.97);
    --color-black-98: rgba(0, 0, 0, 0.98);
    --color-black-99: rgba(0, 0, 0, 0.99);
    --color-black-100: rgba(0, 0, 0, 1);

    --color-error-5: #440e0b;
    --color-error-10: #7d241f;
    --color-error-20: #97241d;
    --color-error-30: #b6271f;
    --color-error-40: #d93229;
    --color-error-50: #ec5047;
    --color-error-60: #f67a73;
    --color-error-70: #fbaaa6;
    --color-error-80: #fdcecb;
    --color-error-90: #fee3e2;
    --color-error-95: #fef3f2;

    --color-rblue-5: #0e2d5d;
    --color-rblue-10: #0d4a9b;
    --color-rblue-20: #0854c5;
    --color-rblue-30: #0063e6;
    --color-rblue-40: #0682ff;
    --color-rblue-50: #1ea1ff;
    --color-rblue-60: #48c2ff;
    --color-rblue-70: #83d9ff;
    --color-rblue-80: #b5e6ff;
    --color-rblue-90: #ceedff;
    --color-rblue-95: #edf9ff;

    --color-tblue-5: #1a2751;
    --color-tblue-10: #233e85;
    --color-tblue-20: #2446a9;
    --color-tblue-30: #2556d0;
    --color-tblue-40: #2e6ae2;
    --color-tblue-50: #4388ee;
    --color-tblue-60: #67a9f3;
    --color-tblue-70: #98c7f8;
    --color-tblue-80: #cfe4fc;
    --color-tblue-90: #ddebfc;
    --color-tblue-95: #f0f6fe;

    --color-green-5: #00371a;
    --color-green-10: #076033;
    --color-green-20: #06753b;
    --color-green-30: #009646;
    --color-green-40: #00c055;
    --color-green-50: #00ec6e;
    --color-green-60: #2bfd8d;
    --color-green-70: #70ffb4;
    --color-green-80: #aeffd4;
    --color-green-90: #d5ffe9;
    --color-green-95: #edfff5;

    --color-text-primary: var(--color-gray-10);
    --color-text-secondary: var(--color-gray-20);
    --color-text-tertiary: var(--color-gray-40);
    --color-text-quaternary: var(--color-gray-50);
    --color-text-quinary: var(--color-gray-60);
    --color-text-senary: var(--color-gray-80);

    --color-text-brand-primary: var(--color-cos-30);
    --color-text-brand-secondary: var(--color-cos-40);
    --color-text-brand-quaternary: var(--color-cos-20);
    --color-text-brand-tertiary: var(--color-cos-50);

    --color-text-white: var(--color-white);
    --color-text-placeholder: var(--color-gray-60);
    --color-text-disabled: var(--color-gray-80);
    --color-text-hyperlink: var(--color-cos-40);
    --color-text-hyperlink-hover: var(--color-cos-50);
    --color-text-information: var(--color-cos-40);
    --color-text-error-primary: var(--color-error-40);

    --color-border-primary: var(--color-gray-10);
    --color-border-secondary: var(--color-gray-90);
    --color-border-tertiary: var(--color-gray-94);
    --color-border-quaternary: var(--color-gray-96);
    --color-border-quinary: var(--color-gray-98);

    --color-border-brand-primary: var(--color-cos-30);
    --color-border-brand-secondary: var(--color-cos-40);
    --color-border-brand-tertiary: var(--color-cos-20);
    --color-border-brand-quaternary: var(--color-cos-50);

    --color-border-white: var(--color-white);
    --color-border-black: var(--color-black);
    --color-border-disabled: var(--color-gray-90);
    --color-border-underline: var(--color-gray-40);
    --color-border-error: var(--color-error-40);

    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-98);
    --color-bg-tertiary: var(--color-gray-96);
    --color-bg-quaternary: var(--color-gray-94);
    --color-bg-quinary: var(--color-gray-10);
    --color-bg-senary: var(--color-gray-5);

    --color-bg-brand-primary: var(--color-cos-30);
    --color-bg-brand-secondary: var(--color-cos-40);
    --color-bg-brand-tertiary: var(--color-cos-20);
    --color-bg-brand-quaternary: var(--color-cos-50);
    --color-bg-brand-section: var(--color-cos-95);

    --color-bg-white: var(--color-white);
    --color-bg-black: var(--color-black);
    --color-bg-disabled: var(--color-gray-94);
    --color-bg-error: var(--color-error-90);
    --color-bg-alpha-white-0: var(--color-white-0);
    --color-bg-alpha-white-60-scroll: var(--color-white-60);
    --color-bg-alpha-white-80: var(--color-white-80);
    --color-bg-alpha-black-0: var(--color-black-0);
    --color-bg-alpha-black-20-scroll: var(--color-black-20);
    --color-bg-alpha-black-40-scroll: var(--color-black-40);
    --color-bg-alpha-black-5: var(--color-black-5);
    --color-bg-alpha-black-5-hover: var(--color-black-10);

    --color-fg-primary: var(--color-gray-10);
    --color-fg-secondary: var(--color-gray-20);
    --color-fg-tertiary: var(--color-gray-40);
    --color-fg-quaternary: var(--color-gray-60);
    --color-fg-quinary: var(--color-gray-80);
    --color-fg-senary: var(--color-gray-98);

    --color-fg-brand-primary: var(--color-cos-30);
    --color-fg-brand-primary-subtle: var(--color-rblue-30);
    --color-fg-brand-secondary: var(--color-cos-40);
    --color-fg-brand-tertiary: var(--color-cos-20);
    --color-fg-brand-quaternary: var(--color-cos-50);

    --color-fg-white: var(--color-white);
    --color-fg-black: var(--color-black);
    --color-fg-disabled: var(--color-gray-80);
    --color-fg-error: var(--color-error-40);
    --color-fg-graph-green: var(--color-green-50);
    --color-fg-icon: var(--color-tblue-80);
    --color-fg-icon-subtle: var(--color-tblue-70);

    font-size: 16px;
}

body {
    --header-height: 72px;

    --im-container-width: 1440px;
    --im-container-padding-inline: 80px;
    --im-container-padding-block: 0;

    --im-color-background: var(--color-bg-primary);
    --im-color-foreground: var(--color-text-primary);

    /**
     * 공통 아이콘팩
     */
    i[data-role='icons'] {
        &[data-size='28'] {
            --icon-size: 28px;
            --icon-grid: calc(var(--icon-size) * 1.5);
            background-image: url(../images/icons_28_light.svg);
            background-size: calc(var(--icon-grid) * 14) calc(var(--icon-grid) * 5);
            background-repeat: no-repeat;
            background-position: 0 0;
            overflow: hidden;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        &[data-size='160'] {
            --icon-size: 160px;
            --icon-grid: calc(var(--icon-size) * 1.5);
            background-image: url(../images/icons_160_light.svg);
            background-size: calc(var(--icon-grid) * 6) calc(var(--icon-grid) * 9);
            background-repeat: no-repeat;
            background-position: 0 0;
            overflow: hidden;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        --transition-duration: 0.5s;

        position: relative;
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        height: var(--action-button-height);
        border: 0px solid transparent;
        border-radius: var(--action-button-height);
        overflow: hidden;
        background: transparent;
        cursor: pointer;

        &.border {
            --action-inner-height: calc(var(--action-button-height) - 2px);
            border: 1px solid var(--color-border-primary);
        }

        > span {
            display: flex;
            flex-direction: row;
            gap: 12px;
            box-sizing: border-box;
            line-height: inherit;
            height: var(--action-inner-height);
            color: transparent;
            padding: calc((var(--action-inner-height) - 1lh) / 2);
            background: var(--color-text-primary)
                linear-gradient(to right, var(--color-bg-primary), var(--color-bg-primary)) no-repeat;
            background-size: 0 100%;
            background-position: 0 0;
            background-clip: text;
            transition: background-size var(--transition-duration) ease-in-out;

            &:has(b) {
                padding-left: calc((var(--action-inner-height) - 1lh) / 2 * 1.6);
                padding-right: calc((var(--action-inner-height) - 1lh) / 2 * 1.6);
            }

            > b {
                line-height: inherit;
                height: 1lh;
            }

            > i {
                line-height: inherit;
                font-size: 1lh;
                line-height: 1;
                width: 1lh;
                height: 1lh;
            }
        }

        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background: var(--color-bg-primary);
            border-radius: var(--action-button-height);
            content: ' ';
        }

        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--color-text-primary);
            z-index: -1;
            content: ' ';
            transform: translateX(-100%);
            transition: transform var(--transition-duration) ease-in-out;
        }

        &[disabled] {
            border-color: var(--color-border-tertiary);
            background: var(--color-border-secondary);
            pointer-events: none;

            &::before {
                background: var(--color-border-secondary);
            }
        }

        &:has(> span > b) {
            &::after {
                border-radius: var(--action-button-height);
            }
        }

        &:hover {
            &::after {
                transform: translateX(0);
            }

            > span {
                background-size: 100% 100%;
            }
        }

        &.left {
            > span {
                background-position: right bottom;
            }

            &::after {
                transform: translateX(100%);
            }

            &:hover {
                &::after {
                    transform: translateX(0);
                }
            }
        }

        &.up {
            > span {
                background-size: 100% 0;
                background-position: center bottom;
                background-clip: text;
            }

            &::after {
                transform: translateY(100%);
            }

            &:hover {
                &::after {
                    transform: translateY(0);
                }

                > span {
                    background-size: 100% 100%;
                }
            }
        }
    }

    /**
     * 다크모드시 톤 다운 요소
     */
    *.darktone {
        position: relative;

        &::after {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: rgba(0, 0, 0, 0.2);
            content: ' ';
        }

        &.with {
            &::after {
                z-index: -1;
            }
        }
    }

    /**
     * 다크모드
     */
    &[data-color-scheme='dark'],
    &[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
        --im-scrollbar-color: rgba(255, 255, 255, 0.4);
        --color-text-primary: var(--color-gray-95);
        --color-text-secondary: var(--color-gray-80);
        --color-text-tertiary: var(--color-gray-60);
        --color-text-quaternary: var(--color-gray-50);
        --color-text-quinary: var(--color-gray-40);
        --color-text-senary: var(--color-gray-30);

        --color-text-brand-primary: var(--color-cos-30);
        --color-text-brand-secondary: var(--color-cos-40);
        --color-text-brand-quaternary: var(--color-cos-20);
        --color-text-brand-tertiary: var(--color-cos-50);

        --color-text-white: var(--color-white);
        --color-text-placeholder: var(--color-gray-40);
        --color-text-disabled: var(--color-gray-30);
        --color-text-hyperlink: var(--color-cos-40);
        --color-text-hyperlink-hover: var(--color-cos-50);
        --color-text-information: var(--color-cos-40);
        --color-text-error-primary: var(--color-error-40);

        --color-border-primary: var(--color-gray-90);
        --color-border-secondary: var(--color-gray-20);
        --color-border-tertiary: var(--color-gray-16);
        --color-border-quaternary: var(--color-gray-12);
        --color-border-quinary: var(--color-gray-10);

        --color-border-brand-primary: var(--color-cos-30);
        --color-border-brand-secondary: var(--color-cos-40);
        --color-border-brand-tertiary: var(--color-cos-20);
        --color-border-brand-quaternary: var(--color-cos-50);

        --color-border-white: var(--color-white);
        --color-border-black: var(--color-black);
        --color-border-disabled: var(--color-gray-20);
        --color-border-underline: var(--color-gray-60);
        --color-border-error: var(--color-error-40);

        --color-bg-primary: var(--color-black);
        --color-bg-secondary: var(--color-gray-10);
        --color-bg-tertiary: var(--color-gray-12);
        --color-bg-quaternary: var(--color-gray-16);
        --color-bg-quinary: var(--color-gray-95);
        --color-bg-senary: var(--color-white);

        --color-bg-brand-primary: var(--color-cos-30);
        --color-bg-brand-secondary: var(--color-cos-40);
        --color-bg-brand-tertiary: var(--color-cos-20);
        --color-bg-brand-quaternary: var(--color-cos-50);
        --color-bg-brand-section: var(--color-cos-5);

        --color-bg-white: var(--color-white);
        --color-bg-black: var(--color-black);
        --color-bg-disabled: var(--color-gray-10);
        --color-bg-error: var(--color-error-5);
        --color-bg-alpha-white-0: var(--color-black-0);
        --color-bg-alpha-white-60-scroll: var(--color-black-60);
        --color-bg-alpha-white-80: var(--color-black-80);
        --color-bg-alpha-black-0: var(--color-black-0);
        --color-bg-alpha-black-20-scroll: var(--color-white-20);
        --color-bg-alpha-black-40-scroll: var(--color-white-40);
        --color-bg-alpha-black-5: var(--color-black-5);
        --color-bg-alpha-black-5-hover: var(--color-black-10);

        --color-fg-primary: var(--color-gray-90);
        --color-fg-secondary: var(--color-gray-40);
        --color-fg-tertiary: var(--color-gray-60);
        --color-fg-quaternary: var(--color-gray-40);
        --color-fg-quinary: var(--color-gray-30);
        --color-fg-senary: var(--color-gray-5);

        --color-fg-brand-primary: var(--color-cos-30);
        --color-fg-brand-primary-subtle: var(--color-rblue-30);
        --color-fg-brand-secondary: var(--color-cos-40);
        --color-fg-brand-tertiary: var(--color-cos-20);
        --color-fg-brand-quaternary: var(--color-cos-50);

        --color-fg-white: var(--color-white);
        --color-fg-black: var(--color-black);
        --color-fg-disabled: var(--color-gray-30);
        --color-fg-error: var(--color-error-40);
        --color-fg-graph-green: var(--color-green-50);
        --color-fg-icon: var(--color-tblue-5);
        --color-fg-icon-subtle: var(--color-tblue-10);

        --im-color-background: var(--color-bg-primary);
        --im-color-foreground: var(--color-text-primary);

        i[data-role='icons'] {
            &[data-size='28'] {
                background-image: url(../images/icons_28_dark.svg);
            }

            &[data-size='160'] {
                background-image: url(../images/icons_160_dark.svg);
            }
        }

        *.darktone {
            &::after {
                display: block;
            }
        }
    }

    > header {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: var(--header-height);

        > div {
            width: 100%;
            height: var(--header-height);
            top: -100%;
            left: 0;
            transition: top 0.5s ease-in-out, height 0.2s ease-in-out;
            overflow: hidden;

            > div[data-role='navigation'] {
                width: 100%;
                height: var(--header-height);
                transition: background 0s ease-in-out;
                transition-delay: 0.2s;

                > div[data-role='container'] {
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-shrink: 0;

                    > h1 {
                        flex-shrink: 0;
                        mask-repeat: no-repeat;
                        mask-position: 0 50%;
                        mask-size: contain;
                        transition: background 0s ease-in-out;
                        transition-delay: 0.2s;
                        background-size: 100% 100%;
                        background-position: 0 0;

                        > a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            font-size: 0;
                            color: transparent;
                        }
                    }

                    > nav {
                        flex-grow: 1;
                        height: 32px;

                        > ul {
                            list-style: none;
                            height: 32px;
                            display: flex;
                            align-items: stretch;
                            justify-content: flex-end;
                            gap: 24px;

                            > li {
                                > a {
                                    display: block;
                                    font: var(--font-label-sm);
                                    height: 32px;
                                    padding: 5px 8px;
                                    color: var(--color-text-primary);
                                    transition: color 0s ease-in-out;
                                    transition-delay: 0.2s;
                                }

                                > button {
                                    display: block;
                                    width: 32px;
                                    height: 32px;
                                    background: transparent;
                                    cursor: pointer;
                                    border: 0;
                                    position: relative;

                                    > span {
                                        display: block;
                                        width: 24px;
                                        height: 2px;
                                        position: absolute;
                                        left: 4px;
                                        background: var(--color-text-primary);
                                        border-radius: 1px;
                                        transition: transform 0.2s ease-in, top 0.2s ease-in, background 0s ease-in;
                                        transition-delay: 0.2s;

                                        &:nth-child(1) {
                                            top: 10px;
                                        }

                                        &:nth-child(2) {
                                            top: 20px;
                                        }
                                    }

                                    > i {
                                        color: var(--color-text-primary);
                                        font-size: 20px;
                                        transition: color 0s ease-in;
                                        transition-delay: 0.2s;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            > div[data-role='sitemap'] {
                transition: background 0s ease-in-out;
                transition-delay: 0.2s;
                width: 100%;
                height: calc(100vh - var(--header-height));
                overflow-y: auto;
                overscroll-behavior: contain;

                > div[data-role='container'] {
                    padding-top: 120px;
                    padding-bottom: 80px;
                    min-height: calc(100vh - var(--header-height));
                    color: var(--color-white);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 40px;

                    > ul.menu {
                        width: 100%;
                        list-style: none;

                        > li {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                            padding: 40px 0px;

                            > b {
                                font: var(--font-head-lg);
                                color: var(--color-text-white);
                            }

                            > ul {
                                list-style: none;
                                display: flex;
                                flex-flow: wrap;
                                column-gap: 41px;
                                row-gap: 20px;

                                > li {
                                    position: relative;
                                    border-bottom: 1px solid transparent;

                                    &:hover {
                                        border-color: var(--color-white);
                                    }

                                    > a {
                                        font: var(--font-label-xlg);
                                        color: var(--color-text-whiet);
                                    }

                                    &::after {
                                        display: inline-block;
                                        position: absolute;
                                        content: ' ';
                                        width: 1px;
                                        height: 16px;
                                        top: calc(50% - 8px);
                                        left: -21px;
                                        opacity: 0.4;
                                        background: var(--color-white);
                                    }

                                    &:first-child::after {
                                        content: none;
                                    }
                                }
                            }
                        }
                    }

                    > ul.footer {
                        display: flex;
                        list-style: none;
                        gap: 40px;

                        > li {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            opacity: 0.6;
                            border-bottom: 1px solid transparent;

                            &:hover {
                                border-color: var(--color-white);
                            }

                            > a {
                                font: var(--font-label-md);
                                color: var(--color-text-white);

                                > i {
                                    padding-left: 8px;
                                }
                            }
                        }
                    }

                    > div.gap {
                        flex-grow: 1;
                        height: 40px;
                    }

                    > div.coursemos {
                        font: 700 clamp(48px, 9.75vw, 156px) / 1 SUIT;
                        opacity: 0.1;
                        margin-left: calc(1ex * -0.2);
                        content: 'COURSEMOS';
                    }
                }
            }
        }

        &.fixed {
            > div {
                position: fixed;
                top: 0;
                left: 0;

                > div[data-role='navigation'] {
                    background: var(--color-bg-alpha-white-60-scroll);
                    backdrop-filter: blur(5px);
                    -webkit-backdrop-filter: blur(5px);

                    > div[data-role='container'] {
                        > nav {
                            > ul {
                                > li {
                                    > button {
                                        > span {
                                            background: var(--color-text-primary);
                                        }

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

        &.toggle,
        &[data-layout='subcover'].toggle {
            > div {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                transition: top 0s ease-in-out, height 0.2s ease-in-out;

                > div[data-role='navigation'] {
                    background: var(--color-bg-brand-primary);
                    transition-delay: 0s;
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;

                    > div[data-role='container'] {
                        > h1 {
                            background: linear-gradient(to right, var(--color-white), var(--color-white));
                            transition-delay: 0s;
                        }

                        > nav {
                            > ul {
                                > li {
                                    > a {
                                        color: var(--color-white);
                                        transition-delay: 0s;
                                    }

                                    > button {
                                        > span {
                                            background: var(--color-white);
                                            transition-delay: 0s;

                                            &:nth-child(1),
                                            &:nth-child(2) {
                                                top: 15px;
                                            }

                                            &:nth-child(1) {
                                                transform: rotate(45deg);
                                            }

                                            &:nth-child(2) {
                                                transform: rotate(-45deg);
                                            }
                                        }

                                        > i {
                                            color: var(--color-white);
                                            transition-delay: 0s;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                > div[data-role='sitemap'] {
                    background: var(--color-bg-brand-primary);
                    transition-delay: 0s;
                }
            }
        }
    }

    > footer {
        background: var(--color-black);

        > section[data-role='footer'] {
            padding: 120px 0px;
            display: flex;
            flex-direction: column;
            gap: 40px;

            > div[data-role='container'] {
                display: flex;
                align-items: stretch;

                > div {
                    flex-basis: 0;
                    flex-grow: 1;

                    &.slogan {
                        padding-bottom: 40px;
                        font: var(--font-head-sm);
                        color: var(--color-white);
                    }

                    &.sitemap {
                        padding-bottom: 40px;
                        border-bottom: 1px solid var(--color-white-10);

                        > ul {
                            list-style: none;
                            display: flex;
                            align-items: flex-start;

                            > li {
                                flex-basis: 0;
                                flex-grow: 1;

                                > a {
                                    font: var(--font-label-sm);
                                    color: var(--color-gray-80);
                                }

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

                                    > li {
                                        > a {
                                            color: var(--color-gray-40);
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &.link {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        > div.contact {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;

                            > a.tel {
                                font: var(--font-label-xlg);
                                color: var(--color-text-senary);
                            }

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

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

                            > li {
                                > a {
                                    font: var(--font-paragraph-sm);
                                    color: var(--color-text-senary);
                                }
                            }
                        }

                        > div.company {
                            width: 100%;
                            display: flex;
                            gap: 33px;
                            margin-top: 47px;

                            > a {
                                &:first-child {
                                    position: relative;
                                    display: block;
                                    width: 63px;
                                    height: 18px;
                                    background-image: url('../images/ubion.svg');
                                    background-repeat: no-repeat;
                                    background-position: 0 50%;
                                    background-size: contain;
                                    font-size: 0;
                                    color: transparent;

                                    &::before {
                                        pointer-events: none;
                                        position: absolute;
                                        content: ' ';
                                        width: 1px;
                                        height: 18px;
                                        top: 2px;
                                        left: 79px;
                                        background: var(--color-white-10);
                                    }
                                }

                                &:last-child {
                                    display: block;
                                    width: 116px;
                                    height: 18px;
                                    background-image: url('../images/coursemos.svg');
                                    background-repeat: no-repeat;
                                    background-position: 0 50%;
                                    background-size: contain;
                                    font-size: 0;
                                    color: transparent;
                                }
                            }
                        }
                    }

                    &.copyright {
                        display: flex;
                        flex-direction: row;

                        > div {
                            &:first-child {
                                flex-grow: 1;
                            }

                            &:last-child {
                                flex-basis: 200px;
                            }

                            > address {
                                display: block;
                                font-style: normal;
                                font: var(--font-paragraph-sm);
                                color: var(--color-gray-40);
                            }

                            > small {
                                display: block;
                                margin-top: 61px;
                                font: var(--font-paragraph-sm);
                                color: var(--color-gray-40);
                            }

                            > div[data-role='field'][data-field='select'] {
                                > button {
                                    background: var(--color-black);
                                    border-color: var(--color-gray-20) !important;

                                    > span,
                                    > i {
                                        color: var(--color-gray-95);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    > aside {
        position: fixed;
        right: 32px;
        bottom: 32px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 8px;

        > button {
            border-color: var(--color-border-secondary) !important;

            &[data-action='light'],
            &[data-action='dark'],
            &[data-action='auto'] {
                display: none;
            }
        }

        &.toggle {
            > button {
                &[data-action='light'],
                &[data-action='dark'],
                &[data-action='auto'] {
                    display: block;
                }
            }
        }
    }

    &[data-color-scheme='light'] {
        > aside {
            > button[data-action='light'] {
                display: none !important;
            }

            > button[data-action='color'] {
                > span {
                    > i {
                        &::before {
                            content: '\e901';
                        }
                    }
                }
            }
        }
    }

    &[data-color-scheme='dark'] {
        > aside {
            > button[data-action='dark'] {
                display: none !important;
            }

            > button[data-action='color'] {
                > span {
                    > i {
                        &::before {
                            content: '\e902';
                        }
                    }
                }
            }
        }
    }

    &[data-color-scheme='auto'] {
        > aside {
            > button[data-action='auto'] {
                display: none !important;
            }

            > button[data-action='color'] {
                > span {
                    > i {
                        &::before {
                            content: '\e903';
                        }
                    }
                }
            }
        }
    }

    div[data-role='field'][data-field='select'][data-name='sites'] {
        > ul {
            background: var(--color-black);
            border-color: var(--color-gray-20) !important;
            color: var(--color-gray-95);

            > li {
                &:hover {
                    background: var(--color-gray-16);
                }

                &[data-value=''] {
                    display: none;
                }
            }
        }
    }
}

@media (width < 1600px) {
    body {
        --im-container-padding-inline: clamp(40px, calc(100vw - 1440px), 80px);
        --im-container-width: calc(100vw - var(--im-container-padding-inline) * 2);
    }
}

@media (width < 1280px) {
    body {
        --im-container-padding-inline: clamp(20px, calc(100vw - 1024px), 40px);
        --im-container-width: calc(100vw - var(--im-container-padding-inline) * 2);
    }
}

@media (width < 1024px) {
    :root {
        font-size: 14px;
    }

    body {
        --im-container-padding-inline: 24px;
        --im-container-width: calc(100vw - var(--im-container-padding-inline) * 2);

        > header {
            > div {
                > div[data-role='sitemap'] {
                    > div[data-role='container'] {
                        padding-top: 0px;

                        > ul.menu {
                            > li {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 14px;
                                padding: 20px 0px;

                                > ul {
                                    row-gap: 10px;
                                    width: 100%;
                                    justify-content: flex-start;
                                }
                            }
                        }
                    }
                }
            }
        }

        > footer {
            > section[data-role='footer'] {
                padding: 80px 0px;
                gap: 40px;
            }
        }

        > aside {
            right: 15px;
            bottom: 15px;
        }
    }
}

@media (width < 768px) {
    body {
        --im-container-padding-inline: 16px;
        --im-container-width: calc(100vw - var(--im-container-padding-inline) * 2);
        --header-height: 60px;

        > header {
            > div {
                > div[data-role='navigation'] {
                    > div[data-role='container'] {
                        > nav {
                            > ul {
                                > li {
                                    display: none;

                                    &:has(button) {
                                        display: block;
                                    }
                                }
                            }
                        }
                    }
                }

                > div[data-role='sitemap'] {
                    > div[data-role='container'] {
                        > ul.menu {
                            > li {
                                > ul {
                                    row-gap: 10px;
                                }
                            }
                        }

                        > ul.footer {
                            gap: 20px;
                        }
                    }
                }
            }
        }

        > footer {
            > section[data-role='footer'] {
                padding: 40px 0px;

                > div[data-role='container'] {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 40px;

                    > div {
                        &.slogan {
                            flex-basis: 0;
                        }

                        &.sitemap {
                            > ul {
                                flex-direction: column;
                                align-items: stretch;
                                gap: 40px;
                            }
                        }

                        &.link {
                            > ul {
                                padding-top: 40px;
                                flex-direction: column;
                                gap: 16px;

                                > li {
                                    flex-basis: 0;
                                }
                            }
                        }

                        &.copyright {
                            flex-basis: 0;
                            flex-direction: column;

                            > div {
                                > small {
                                    margin-top: 16px;
                                    margin-bottom: 16px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}