/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 전역변수 스타일시트를 정의한다.
 * 
 * @file /app/resources/styles/Application.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2026. 9. 20.
 */
:root {
    /**
     * 폰트설정
     */
    --im-font-family-default: 'SUIT Variable';
    --im-font-family-head: 'SUITE Variable';
    --im-font-family-numeric: 'SUIT Variable';
    --im-font-family-monospace: 'Roboto Mono';

    /**
     * 폰트크기
     */
    --im-font-size-display1: 5rem; /* 80px */
    --im-font-size-display2: 4.5rem; /* 72px */
    --im-font-size-display3: 4rem; /* 64px */
    --im-font-size-display4: 3.5rem; /* 56px */
    --im-font-size-display5: 3rem; /* 48px */
    --im-font-size-display6: 2.5rem; /* 40px */
    --im-font-size-h1: 2.5rem; /* 40px */
    --im-font-size-h2: 2rem; /* 32px */
    --im-font-size-h3: 1.75rem; /* 28px */
    --im-font-size-h4: 1.5rem; /* 24px */
    --im-font-size-h5: 1.25rem; /* 20px */
    --im-font-size-h6: 1rem; /* 16px */
    --im-font-size-extra-large: 1.125rem; /* 18px */
    --im-font-size-large: 1rem; /* 16px */
    --im-font-size-default: 0.875rem; /* 14px */
    --im-font-size-small: 0.75rem; /* 12px */

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

    --im-component-gap-extra-large: 1rem; /* 16px */
    --im-component-gap-large: 0.75rem; /* 12px */
    --im-component-gap-default: 0.625rem; /* 10px */
    --im-component-gap-small: 0.5rem; /* 8px */
    --im-component-gap-extra-small: 0.25rem; /* 4px */

    --im-component-padding-extra-large: 2.25rem; /* 36px */
    --im-component-padding-large: 2rem; /* 32px */
    --im-component-padding-default: 1.75rem; /* 28px */
    --im-component-padding-small: 1.5rem; /* 24px */
    --im-component-padding-extra-small: 1.25rem; /* 20px */

    --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-size-default: var(--im-font-size-default);
    --im-component-font-size-small: var(--im-font-size-small);

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

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

    /**
     * 아이모듈에서 공통적으로 사용할 컬러셋을 지정합니다.
     */
    --im-white-primary: rgba(255, 255, 255, 1);
    --im-white-secondary: rgba(255, 255, 255, 0.7);
    --im-white-tertiary: rgba(255, 255, 255, 0.4);
    --im-white-quaternary: rgba(255, 255, 255, 0.2);

    --im-black-primary: rgba(0, 0, 0, 1);
    --im-black-secondary: rgba(0, 0, 0, 0.7);
    --im-black-tertiary: rgba(0, 0, 0, 0.4);
    --im-black-quaternary: rgba(0, 0, 0, 0.2);

    --im-bg-primary: #ffffff;
    --im-bg-secondary: #f9f9f9;
    --im-bg-tertiary: #f3f3f3;
    --im-bg-quaternary: #ededed;
    --im-bg-primary-alpha: rgba(255, 255, 255, 0.92);
    --im-bg-secondary-alpha: rgba(255, 255, 255, 0.85);
    --im-bg-tertiary-alpha: rgba(255, 255, 255, 0.78);
    --im-bg-quaternary-alpha: rgba(255, 255, 255, 0.7);

    --im-fill-primary: #cccccc;
    --im-fill-secondary: #d9d9d9;
    --im-fill-tertiary: #e5e5e5;
    --im-fill-quaternary: #f2f2f2;
    --im-fill-primary-alpha: rgba(0, 0, 0, 0.2);
    --im-fill-secondary-alpha: rgba(0, 0, 0, 0.16);
    --im-fill-tertiary-alpha: rgba(0, 0, 0, 0.08);
    --im-fill-quaternary-alpha: rgba(0, 0, 0, 0.04);

    --im-text-primary: #212121;
    --im-text-secondary: #666666;
    --im-text-tertiary: #8c8c8c;
    --im-text-quaternary: #b2b2b2;
    --im-text-primary-alpha: rgba(0, 0, 0, 0.87);
    --im-text-secondary-alpha: rgba(0, 0, 0, 0.6);
    --im-text-tertiary-alpha: rgba(0, 0, 0, 0.45);
    --im-text-quaternary-alpha: rgba(0, 0, 0, 0.3);

    --im-border-primary: #c6c6c8;
    --im-border-secondary: #d6d6d8;
    --im-border-tertiary: #e5e5e7;
    --im-border-quaternary: #f5f5f7;
    --im-border-primary-alpha: rgba(0, 0, 0, 0.24);
    --im-border-secondary-alpha: rgba(0, 0, 0, 0.12);
    --im-border-tertiary-alpha: rgba(0, 0, 0, 0.08);
    --im-border-quaternary-alpha: rgba(0, 0, 0, 0.04);

    --im-selection-primary: #dae5f2;
    --im-selection-secondary: #e3edf8;
    --im-selection-tertiary: #edf4fb;
    --im-selection-quaternary: #f5f9fd;

    --im-mark-primary: #f8e6b0;
    --im-mark-secondary: #faefc6;
    --im-mark-tertiary: #fcf5da;
    --im-mark-quaternary: #fefbf0;

    --im-accent-primary: #0a84ff;
    --im-accent-secondary: #338ff9;
    --im-accent-tertiary: #66aafc;
    --im-accent-quaternary: #99c5fd;

    --im-beginning-primary: #14ae5c;
    --im-beginning-secondary: #3ccf7a;
    --im-beginning-tertiary: #8fddb6;
    --im-beginning-quaternary: #d6f3e4;

    --im-brand-primary: #6d56fb;
    --im-brand-secondary: #8572fc;
    --im-brand-tertiary: #b4a9fe;
    --im-brand-quaternary: #e3e0ff;

    --im-danger-primary: #dc3535;
    --im-danger-secondary: #e85b5b;
    --im-danger-tertiary: #f3a3a3;
    --im-danger-quaternary: #fde2e2;

    /**
     * 다크테마 컬러셋을 정의한다.
     */
    &[data-color-scheme='dark'],
    &[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
        --im-bg-primary: #000000;
        --im-bg-secondary: #0e0e10;
        --im-bg-tertiary: #1c1c1e;
        --im-bg-quaternary: #2c2c2e;
        --im-bg-primary-alpha: rgba(0, 0, 0, 0.92);
        --im-bg-secondary-alpha: rgba(14, 14, 16, 0.85);
        --im-bg-tertiary-alpha: rgba(28, 28, 30, 0.78);
        --im-bg-quaternary-alpha: rgba(44, 44, 46, 0.7);

        --im-fill-primary: #333333;
        --im-fill-secondary: #262626;
        --im-fill-tertiary: #1a1a1a;
        --im-fill-quaternary: #0d0d0d;
        --im-fill-primary-alpha: rgba(255, 255, 255, 0.2);
        --im-fill-secondary-alpha: rgba(255, 255, 255, 0.18);
        --im-fill-tertiary-alpha: rgba(255, 255, 255, 0.16);
        --im-fill-quaternary-alpha: rgba(255, 255, 255, 0.12);

        --im-text-primary: #ffffff;
        --im-text-secondary: #999999;
        --im-text-tertiary: #737373;
        --im-text-quaternary: #4c4c4c;
        --im-text-primary-alpha: rgba(255, 255, 255, 1);
        --im-text-secondary-alpha: rgba(255, 255, 255, 0.6);
        --im-text-tertiary-alpha: rgba(255, 255, 255, 0.48);
        --im-text-quaternary-alpha: rgba(255, 255, 255, 0.3);

        --im-border-primary: #38383a;
        --im-border-secondary: #2c2c2e;
        --im-border-tertiary: #212123;
        --im-border-quaternary: #151517;
        --im-border-primary-alpha: rgba(255, 255, 255, 0.24);
        --im-border-secondary-alpha: rgba(255, 255, 255, 0.12);
        --im-border-tertiary-alpha: rgba(255, 255, 255, 0.08);
        --im-border-quaternary-alpha: rgba(255, 255, 255, 0.06);

        --im-selection-primary: #2a3a4d;
        --im-selection-secondary: #223245;
        --im-selection-tertiary: #1b2a3c;
        --im-selection-quaternary: #142233;

        --im-mark-primary: #4a3f2a;
        --im-mark-secondary: #3f3525;
        --im-mark-tertiary: #332b20;
        --im-mark-quaternary: #292219;

        --im-accent-primary: #3b8fe6;
        --im-accent-secondary: #2476d9;
        --im-accent-tertiary: #155fbf;
        --im-accent-quaternary: #0d4a99;

        --im-beginning-primary: #2fbf79;
        --im-beginning-secondary: #1ea664;
        --im-beginning-tertiary: #15864f;
        --im-beginning-quaternary: #0f6a3e;

        --im-brand-primary: #8d7ef0;
        --im-brand-secondary: #7462e6;
        --im-brand-tertiary: #5b49cf;
        --im-brand-quaternary: #4636a8;

        --im-danger-primary: #e85a5a;
        --im-danger-secondary: #d94444;
        --im-danger-tertiary: #b93232;
        --im-danger-quaternary: #8f2424;
    }

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

/**
 * 스타일 초기화
 */
* {
    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 {
    background-color: var(--im-bg-primary);
    color: var(--im-text-primary);
    font-family: var(--im-font-family-default);

    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-mark-primary);
    }
}

/**
 * 프레임별 스타일 정의
 */
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-bg-tertiary);
                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-text-secondary);
                line-height: var(--im-component-line-height);
            }
        }

        &[data-role='preview'] {
            width: 1280px !important;

            &[data-preview='page'] {
                > header,
                > footer {
                    display: none;
                }
            }
        }
    }
}