/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 전역변수 스타일시트를 정의한다.
 * 
 * @file /app/resources/styles/Application.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 2. 11.
 */
:root {
    /**
     * 아이모듈에서 공통적으로 사용할 컬러셋을 지정합니다.
     */
    --im-color-foreground-100: #8e8e8e;
    --im-color-foreground-200: #757575;
    --im-color-foreground-300: #5b5b5b;
    --im-color-foreground-400: #2d2d2d;
    --im-color-foreground-500: #191919;
    --im-color-foreground-600: #000;

    --im-color-background-100: #d0d0d0;
    --im-color-background-200: #dadada;
    --im-color-background-300: #e6e6e6;
    --im-color-background-400: #f4f4f4;
    --im-color-background-500: #fff;
    --im-color-background-600: #fff;

    --im-color-accent-300: #66acfb;
    --im-color-accent-400: #3391f9;
    --im-color-accent-500: #0075f8;
    --im-color-accent-600: #005ec6;
    --im-color-accent-700: #004695;

    --im-color-accent-backward-400: #c5c5c5;
    --im-color-accent-backward-500: #f0f0f0;
    --im-color-accent-backward-600: #fff;

    --im-color-begining-400: #45e590;
    --im-color-begining-500: #14ae5c;
    --im-color-begining-600: #08ad55;

    --im-color-danger-400: #ef5454;
    --im-color-danger-500: #dc3535;
    --im-color-danger-600: #cc3131;

    --im-color-action-400: #8875fe;
    --im-color-action-500: #6d56fb;
    --im-color-action-600: #5442c2;

    --im-color-mark-400: #f7e9c1;
    --im-color-mark-500: #f8e6b0;
    --im-color-mark-600: #f0dfab;

    --im-color-selection-400: #eff5fc;
    --im-color-selection-500: #e1edfa;
    --im-color-selection-600: #dae5f2;

    --im-color-error-text-500: #342f5a;
    --im-color-error-text-400: #4f0f8f;
    --im-color-error-text-300: #9892a8;

    --im-color-error-background-400: #b0acc5;
    --im-color-error-background-300: #edd3fd;
    --im-color-error-background-200: #faf5fe;

    --im-color-error-accent-500: #4b476d;
    --im-color-error-accent-600: #342f5a;
    --im-color-error-accent-backward-500: #e8e5f0;
    --im-color-error-accent-backward-600: #fff;

    --im-font-family-head: SUITE;
    --im-font-family-body: SUIT;
    --im-font-family-numeric: SUIT;
    --im-font-family-monospace: SUIT;

    /**
     * 콘텐츠의 sticky 요소가 사이트 테마 및 레이아웃의 fixed, sticky 요소에 가려지지 않도록 오프셋을 지정한다.
     */
    --im-layout-sticky-offset: 0px;

    /**
     * 폰트크기
     */
    --im-font-size-display1: 5rem;
    --im-font-size-display2: 4.5rem;
    --im-font-size-display3: 4rem;
    --im-font-size-display4: 3.5rem;
    --im-font-size-display5: 3rem;
    --im-font-size-display6: 2.5rem;
    --im-font-size-h1: 2.5rem;
    --im-font-size-h2: 2rem;
    --im-font-size-h3: 1.75rem;
    --im-font-size-h4: 1.5rem;
    --im-font-size-h5: 1.25rem;
    --im-font-size-h6: 1rem;
    --im-font-size-large: 1rem;
    --im-font-size-default: 0.875rem;
    --im-font-size-small: 0.75rem;

    /**
     * 기본 줄간격을 정의합니다.
     */
    --im-line-height-default: 1.4;

    /**
     * 아이모듈 기본 컴포넌트에 대한 스타일 변수를 정의합니다.
     * 사이트테마에서 해당 변수를 재정의하여 아이모듈 기본 컴포넌트의 스타일을 해당 테마에 어울리게 지정할 수 있습니다.
     */
    --im-container-width: 1280px;
    --im-container-padding-inline: 20px;
    --im-container-padding-block: 0;

    --im-component-gap-large: 1rem;
    --im-component-gap-default: 0.5rem;
    --im-component-gap-small: 0.3rem;

    --im-component-border-weight: 1px;
    --im-component-border-radius: 0px;
    --im-component-border-radius-inner: 0px;
    --im-component-height-default: 2.5rem;
    --im-component-height-large: 3rem;
    --im-component-line-height: 1.25rem;
    --im-component-font-family: var(--im-font-family-body);
    --im-component-font-size-default: var(--im-font-size-default);
    --im-component-font-size-small: var(--im-font-size-small);

    /**
     * 기준이 되는 최상위 폰트크기를 지정합니다.
     * 가변폰트를 사용하려면 해당 값을 가변형으로 정의합니다.
     */
    font-size: 16px;

    /**
     * 다크테마 컬러셋을 정의한다.
     */
    &[data-color-scheme='dark'],
    &[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
        --im-color-foreground-100: #5b5b5b;
        --im-color-foreground-200: #757575;
        --im-color-foreground-300: #8e8e8e;
        --im-color-foreground-400: #c5c5c5;
        --im-color-foreground-500: #f0f0f0;
        --im-color-foreground-600: #fff;

        --im-color-background-100: #666;
        --im-color-background-200: #4d4d4d;
        --im-color-background-300: #333;
        --im-color-background-400: #222;
        --im-color-background-500: #191919;
        --im-color-background-600: #000;

        --im-color-accent-300: #004695;
        --im-color-accent-400: #005ec6;
        --im-color-accent-500: #0075f8;
        --im-color-accent-600: #3391f9;
        --im-color-accent-700: #66acfb;

        --im-color-accent-backward-400: #c5c5c5;
        --im-color-accent-backward-500: #f0f0f0;
        --im-color-accent-backward-600: #fff;

        --im-color-begining-400: #08ad55;
        --im-color-begining-500: #14ae5c;
        --im-color-begining-600: #45e590;

        --im-color-danger-400: #cc3131;
        --im-color-danger-500: #dc3535;
        --im-color-danger-600: #ef5454;

        --im-color-action-400: #5442c2;
        --im-color-action-500: #6d56fb;
        --im-color-action-600: #8875fe;

        --im-color-mark-400: #082043;
        --im-color-mark-500: #07394f;
        --im-color-mark-600: #204d61;

        --im-color-selection-400: #101a03;
        --im-color-selection-500: #1a3208;
        --im-color-selection-600: #254a0d;

        --im-color-error-text-500: #dad1fa;
        --im-color-error-text-400: #d2adea;
        --im-color-error-text-300: #9892a8;

        --im-color-error-background-400: #433f45;
        --im-color-error-background-300: #412e4f;
        --im-color-error-background-200: #342f36;

        --im-color-error-accent-500: #4b476d;
        --im-color-error-accent-600: #342f5a;
        --im-color-error-accent-backward-500: #e8e5f0;
        --im-color-error-accent-backward-600: #fff;
    }
}

/**
 * 스타일 초기화
 */
* {
    padding: 0px;
    margin: 0px;
    outline: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/**
 * 기본 DOM 요소에 대한 스타일정의
 */
body {
    --im-color-scrollbar: var(--im-color-foreground-500);
    --im-color-background: var(--im-color-background-500);
    --im-color-foreground: var(--im-color-foreground-500);

    background-color: var(--im-color-background);
    color: var(--im-color-foreground);
    font-family: var(--im-font-family-body);

    input,
    textarea,
    select {
        font-family: inherit;
        font-size: inherit;
        border-radius: 0;
        outline: none;

        &[type='search'] {
            -webkit-appearance: none;

            &::-webkit-search-decoration {
                -webkit-appearance: none;
            }
        }
    }

    button,
    a {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
        cursor: pointer;
        text-decoration: none;
        outline: none;
    }

    a[disabled] {
        &:active {
            pointer-events: none;
        }
    }

    mark {
        background: var(--im-color-mark-500);
        color: var(--im-color-foreground-500);
    }
}

/**
 * 프레임별 스타일 정의
 */
body {
    /**
     * 사이트 프레임
     */
    &[data-frame='site'] {
        /**
         * 아이모듈 기본 컴포넌트에 대한 스타일정의
         */
        div[data-role='container'] {
            container: container / inline-size;
            margin: 0 auto;
            width: calc(100vw - var(--im-container-padding-inline) * 2);
            max-width: var(--im-container-width);
            padding-block: var(--im-container-padding-block);
        }

        main[data-role='layout'] {
            container-name: main;
            container-type: inline-size;

            div[data-role='content'] {
                container-name: content;
                container-type: inline-size;
            }

            div[data-role='module'] {
                container-name: module;
                container-type: inline-size;
            }

            div[data-role='widget'] {
                container: widget / inline-size;
            }
        }

        > div[data-role='disabled'] {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            &::before {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--im-color-background-400);
                opacity: 0.7;
                content: ' ';
                z-index: -1;
            }
            z-index: 100000;

            &:has(> div[data-role='text']) {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            > div[data-role='text'] {
                max-width: 500px;
                padding: var(--im-component-gap-large);
                font-size: var(--im-component-font-size-default);
                color: var(--im-color-foreground-300);
                line-height: var(--im-component-line-height);
            }
        }
    }
}