/**
 * 이 파일은 자동으로 번들링된 파일입니다.
 *
 * @file core.css
 * @cached 2026-05-21T19:58:12+09:00 (0.00455904ms)
 */
/* /app/resources/styles/Application.css */
: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;
    --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%;
}
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);
            }
        }
    }
}

/* /app/resources/styles/Exceptions.css */
body {
    &:has(main[data-type='error'][data-mode='debug']) {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        overflow: auto;
        > main[data-type='error'] {
            min-height: 100%;
            > section {
                max-width: 1000px;
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
            }
        }
    }
    main[data-type='error'] {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        padding: 50px 15px;
        box-sizing: border-box;
        > section {
            width: 100%;
            max-width: 500px;
            border: 1px solid var(--im-color-background-200);
            background: var(--im-color-background-500);
            flex-grow: 0;
            flex-shrink: 0;
            &[data-debug] {
                max-width: 1000px;
            }
            &[data-role='message'] {
                padding: 24px;
                > h4 {
                    font-size: 20px;
                    margin-bottom: 24px;
                    padding-bottom: 16px;
                    color: var(--im-color-foreground-500);
                    border-bottom: 1px solid var(--im-color-background-200);
                    font-weight: bold;
                }
                > b {
                    display: block;
                    color: var(--im-color-error-text-500);
                    font-size: 16px;
                    line-height: 1.4;
                }
                > small {
                    display: block;
                    margin-top: 16px;
                    color: var(--im-color-error-text-300);
                    font-size: 14px;
                    word-break: break-all;
                    line-height: 1.4;
                }
            }
            &[data-role='debug'] {
                margin-top: 24px;
                > aside {
                    display: flex;
                    width: 100%;
                    height: 48px;
                    background: var(--im-color-error-accent-500);
                    align-items: center;
                    justify-content: center;
                    > button {
                        display: block;
                        height: 40px;
                        line-height: 40px;
                        color: var(--im-color-error-accent-backward-500);
                        cursor: pointer;
                        padding: 0 16px;
                        border: 0;
                        background: transparent;
                        border-radius: 3px;
                        font-size: 14px;
                        &.selected {
                            background: var(--im-color-error-accent-600);
                            color: var(--im-color-error-accent-backward-600);
                        }
                    }
                }
                > article {
                    > div {
                        &:not(.selected) {
                            display: none !important;
                        }
                        &[data-tab='trace'] {
                            display: flex;
                            align-items: stretch;
                            > aside {
                                width: 300px;
                                flex-shrink: 0;
                                z-index: 1;
                                background: var(--im-color-background-500);
                                border-right: 1px solid var(--im-color-background-200);
                                > button {
                                    display: block;
                                    width: 100%;
                                    background: transparent;
                                    border: 0;
                                    padding: 14px 14px 14px 54px;
                                    text-align: left;
                                    cursor: pointer;
                                    position: relative;
                                    border-bottom: 1px solid var(--im-color-background-300);
                                    &::after {
                                        content: ' ';
                                        position: absolute;
                                        top: 0;
                                        left: 40px;
                                        width: 2px;
                                        height: 100%;
                                        background: var(--im-color-background-300);
                                    }
                                    > label {
                                        display: block;
                                        font-size: 14px;
                                        color: var(--im-color-error-text-400);
                                        line-height: 1.4;
                                        word-break: break-all;
                                        margin-bottom: 10px;
                                    }
                                    > p {
                                        display: flex;
                                        align-items: flex-end;
                                        position: relative;
                                        > b {
                                            flex-grow: 1;
                                            font-size: 14px;
                                            line-height: 20px;
                                            color: var(--im-color-error-text-300);
                                            word-break: break-all;
                                            > small {
                                                font-size: 12px;
                                                display: block;
                                            }
                                        }
                                        > small {
                                            flex-basis: auto;
                                            background: var(--im-color-background-200);
                                            color: var(--im-color-foreground-400);
                                            height: 20px;
                                            line-height: 20px;
                                            padding: 0px 4px;
                                            border-radius: 3px;
                                            font-size: 12px;
                                        }
                                        > i {
                                            position: absolute;
                                            top: 0;
                                            left: -54px;
                                            width: 40px;
                                            height: 20px;
                                            line-height: 20px;
                                            font-style: normal;
                                            color: var(--im-color-error-text-300);
                                            font-weight: bold;
                                            font-size: 12px;
                                            text-align: center;
                                        }
                                    }
                                    &.selected {
                                        background: var(--im-color-error-background-200);
                                        &::after {
                                            background: var(--im-color-error-background-400);
                                        }
                                    }
                                }
                            }
                            > div {
                                flex-grow: 1;
                                > div[data-index] {
                                    &:not(.selected) {
                                        display: none;
                                    }
                                    > ul {
                                        list-style: none;
                                        width: 100%;
                                        > li {
                                            width: 100%;
                                            display: flex;
                                            align-items: stretch;
                                            > small {
                                                flex-basis: 50px;
                                                font-size: 12px;
                                                background: var(--im-color-background-400);
                                                border-right: 1px solid var(--im-color-background-200);
                                                line-height: 20px;
                                                flex-shrink: 0;
                                                text-align: right;
                                                padding-right: 8px;
                                                font-family: 'Nanum Gothic Coding', monospace;
                                                color: var(--im-color-foreground-300);
                                            }
                                            > pre {
                                                line-height: 20px;
                                                word-break: break-all;
                                                width: 100%;
                                                white-space: pre-wrap;
                                                padding: 0px 8px;
                                                font-family: 'Nanum Gothic Coding', monospace;
                                                font-size: 14px;
                                            }
                                            &.file {
                                                display: block;
                                                box-sizing: border-box;
                                                background: var(--im-color-background-300);
                                                padding: 10px 20px;
                                                border-bottom: 1px solid var(--im-color-background-200);
                                                > label {
                                                    display: block;
                                                    font-size: 14px;
                                                    color: var(--im-color-error-text-300);
                                                    line-height: 1.4;
                                                    word-break: break-all;
                                                    margin-bottom: 10px;
                                                    word-break: break-all;
                                                }
                                                > b {
                                                    display: block;
                                                    font-weight: normal;
                                                    color: var(--im-color-error-text-400);
                                                    font-size: 16px;
                                                    word-break: break-all;
                                                }
                                            }
                                            &.focus {
                                                > small {
                                                    background: var(--im-color-error-background-300);
                                                }
                                                > pre {
                                                    background: var(--im-color-error-background-200);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &[data-tab='trace'] {
                    > aside {
                        > button[data-tab='trace'] {
                            background: var(--im-color-error-accent-600);
                            color: var(--im-color-error-accent-backward-600);
                        }
                    }
                }
            }
        }
    }
}

/* /app/resources/styles/Fields.css */
body {
    &[data-frame='site'],
    &[data-frame='context'] {
        a[data-role='button'],
        button[data-role='button'] {
            --im-button-background-default: var(--im-color-background-400);
            --im-button-background-hover: var(--im-color-background-300);
            --im-button-background-disabled: var(--im-color-background-300);
            --im-button-border-default: var(--im-color-background-200);
            --im-button-border-separator: var(--im-color-background-200);
            --im-button-color-default: var(--im-color-foreground-500);
            &.confirm,
            &.pressed {
                --im-button-background-default: var(--im-color-accent-500);
                --im-button-background-hover: var(--im-color-accent-600);
                --im-button-background-disabled: var(--im-color-accent-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-accent-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }
            &.danger {
                --im-button-background-default: var(--im-color-danger-500);
                --im-button-background-hover: var(--im-color-danger-600);
                --im-button-background-disabled: var(--im-color-danger-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-danger-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }
            &.action {
                --im-button-background-default: var(--im-color-action-500);
                --im-button-background-hover: var(--im-color-action-600);
                --im-button-background-disabled: var(--im-color-action-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-action-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }
            &.begining {
                --im-button-background-default: var(--im-color-begining-500);
                --im-button-background-hover: var(--im-color-begining-600);
                --im-button-background-disabled: var(--im-color-begining-500);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-color-begining-600);
                --im-button-color-default: var(--im-color-accent-backward-500);
            }
            height: var(--im-component-height-default);
            font-family: var(--im-component-font-family);
            font-size: var(--im-component-font-size-default);
            line-height: var(--im-component-line-height);
            color: var(--im-button-color-default);
            border: var(--im-component-border-weight) solid var(--im-button-border-default);
            border-radius: var(--im-component-border-radius);
            padding: calc((var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2);
            position: relative;
            cursor: pointer;
            background: var(--im-button-background-default);
            overflow: hidden;
            z-index: 0;
            &:has(> i):has(> span) {
                display: inline-flex;
                flex-direction: row;
                gap: var(--im-component-gap-default);
                > i {
                    width: var(--im-component-line-height);
                    height: var(--im-component-line-height);
                }
            }
            &:hover {
                background: var(--im-button-background-hover);
            }
            &[disabled] {
                cursor: not-allowed;
                opacity: 0.6;
                background: var(--im-button-background-disabled) !important;
                &.loading {
                    position: relative;
                    &::before {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background: var(--im-button-background-disabled) !important;
                        z-index: 1;
                        content: ' ';
                        top: 0;
                        left: 0;
                    }
                    &::after {
                        position: absolute;
                        height: 100%;
                        aspect-ratio: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        top: 0;
                        left: 50%;
                        translate: -50% 0;
                        font-family: moimz;
                        content: '\efff';
                        z-index: 5;
                        color: inherit;
                        animation: mi-loading 2s infinite linear;
                    }
                }
            }
        }
        div[data-role='buttons'] {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: center;
            gap: var(--im-component-gap-default);
            &.left {
                justify-content: flex-start;
            }
            &.center {
                justify-content: center;
            }
            &.right {
                justify-content: right;
            }
            > span[data-role='space'] {
                flex-grow: 1;
            }
        }
        div[data-role='field'] {
            > div[data-role='help'] {
                display: block;
                padding-block: var(--im-component-gap-small);
                color: var(--im-color-foreground-300);
                font-family: var(--im-component-font-family);
                font-size: var(--im-component-font-size-small);
                box-sizing: border-box;
            }
            > input,
            > textarea {
                width: 100%;
                height: var(--im-component-height-default);
                font-family: var(--im-component-font-family);
                font-size: var(--im-component-font-size-default);
                line-height: var(--im-component-line-height);
                color: var(--im-color-foreground-500);
                background: var(--im-color-background-500);
                border: var(--im-component-border-weight) solid var(--im-color-background-300);
                border-radius: var(--im-component-border-radius);
                padding: calc((var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2);
                resize: none;
                position: relative;
                overflow: hidden;
                vertical-align: top;
                &:focus {
                    border-color: var(--im-color-accent-500);
                }
                &::after {
                    position: absolute;
                    z-index: 1;
                    border: 1px solid transparent;
                    width: calc(100% - var(--im-component-border-weight) * 2);
                    height: calc(100% - var(--im-component-border-weight) * 2);
                    top: var(--im-component-border-weight);
                    left: var(--im-component-border-weight);
                    border-radius: var(--im-component-border-radius-inner);
                    content: ' ';
                }
                &::placeholder {
                    color: var(--im-color-foreground-300);
                }
            }
            > textarea {
                height: auto;
            }
            &.error {
                > div[data-role='help'] {
                    color: var(--im-color-danger-500);
                }
                > input,
                > textarea,
                > button {
                    border-color: var(--im-color-danger-500);
                }
            }
            &[data-field='date'] {
                display: flex;
                flex-direction: row;
                position: relative;
                max-width: calc(var(--im-component-height-default) * 5);
                > input {
                    flex-grow: 1;
                    flex-basis: 0;
                    border-right: 0;
                    &[type='date'] {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        display: none;
                    }
                }
                > label {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: calc(100% - var(--im-component-height-default));
                    height: var(--im-component-height-default);
                    line-height: var(--im-component-line-height);
                    color: var(--im-color-foreground-500);
                    background: var(--im-color-background-500);
                    vertical-align: top;
                    border: var(--im-component-border-weight) solid transparent;
                    border-radius: var(--im-component-border-radius);
                    padding: calc(
                        (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                    );
                    background-clip: content-box;
                    font-size: var(--im-component-font-size-default);
                    font-family: var(--im-component-font-family);
                }
                &:has(> input:focus) {
                    > label {
                        display: none;
                    }
                }
                > button {
                    width: calc(var(--im-component-height-default));
                    height: calc(var(--im-component-height-default));
                    line-height: var(--input-line-height);
                    padding-block: calc(
                        (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                    );
                    background: var(--im-color-accent-500);
                    color: var(--im-color-accent-backward-500);
                    border: var(--im-component-border-weight) solid var(--im-color-accent-500);
                    > i {
                        font-family: moimz;
                        font-style: normal;
                        font-size: calc(var(--im-component-height-default) / 2);
                        &::before {
                            content: '\e791';
                        }
                    }
                }
            }
            &[data-field='check'],
            &[data-field='radio'] {
                > label {
                    display: block;
                    cursor: pointer;
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    padding-block: calc((var(--im-component-height-default) - 1lh) / 2);
                    padding-right: 0;
                    width: fit-content;
                    color: var(--input-color-default);
                    > input {
                        position: relative;
                        width: var(--im-component-line-height);
                        height: var(--im-component-line-height);
                        cursor: pointer;
                        vertical-align: top;
                        margin-right: var(--im-component-gap-default);
                        appearance: none;
                        &::before {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            content: ' ';
                            box-sizing: border-box;
                            border: var(--im-component-border-weight) solid var(--im-color-background-300);
                            background: var(--im-color-background-500);
                            z-index: 1;
                        }
                        &::after {
                            position: absolute;
                            top: var(--im-component-border-weight);
                            left: var(--im-component-border-weight);
                            width: calc(100% - var(--im-component-border-weight) * 2);
                            height: calc(100% - var(--im-component-border-weight) * 2);
                            content: ' ';
                            box-sizing: border-box;
                            border: 1px solid transparent;
                            border-radius: var(--im-component-border-radius-inner);
                            z-index: 2;
                        }
                        &:focus {
                            &::before {
                                border-color: var(--im-color-accent-500);
                            }
                            &:checked {
                                &::after {
                                    border-color: var(--im-color-accent-backward-400);
                                }
                            }
                        }
                        &[type='checkbox'] {
                            &:checked::before {
                                border-color: var(--im-color-accent-500);
                                background: var(--im-color-accent-500);
                                color: var(--im-color-accent-backward-500);
                                border-radius: var(--im-component-border-radius);
                                font-family: moimz;
                                content: '\e404';
                                font-size: calc(1lh * 0.8);
                                text-align: center;
                                line-height: calc(
                                    var(--im-component-line-height) - var(--im-component-border-weight) * 2
                                );
                            }
                        }
                        &[type='radio'] {
                            &::before,
                            &::after {
                                border-radius: 50%;
                            }
                            &:checked {
                                &::before {
                                    border: calc(var(--im-component-line-height) / 2 - 4px) solid
                                        var(--im-color-accent-500);
                                    background: var(--im-color-accent-backward-500);
                                }
                            }
                        }
                    }
                }
                > div[data-role='help'] {
                    padding-left: var(--input-font-weight);
                }
                &.error {
                    > label {
                        color: var(--im-color-danger-500);
                        > input {
                            &::before {
                                border-color: var(--im-color-danger-500);
                            }
                        }
                    }
                }
            }
            &[data-field='select'] {
                position: relative;
                > select {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    display: none;
                }
                > button {
                    width: 100%;
                    height: var(--im-component-height-default);
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    color: var(--im-color-foreground-500);
                    background: var(--im-color-background-500);
                    border: var(--im-component-border-weight) solid var(--im-color-background-300);
                    border-radius: var(--im-component-border-radius);
                    position: relative;
                    font-size: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: row;
                    text-align: left;
                    align-items: stretch;
                    > span {
                        flex-grow: 1;
                        box-sizing: border-box;
                        vertical-align: top;
                        height: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        font-family: var(--im-component-font-family);
                        font-size: var(--im-component-font-size-default);
                        line-height: var(--im-component-line-height);
                        color: var(--im-color-foreground-500);
                        padding: calc(
                            (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                        );
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    > i {
                        flex-shrink: 0;
                        font-size: var(--im-component-font-size-default);
                        width: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        height: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        line-height: var(--im-component-line-height);
                        padding: calc(
                            (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                        );
                        text-align: center;
                        font-family: moimz;
                        font-style: normal;
                        &::before {
                            content: '\e234';
                        }
                    }
                    &:focus {
                        border-color: var(--im-color-accent-500);
                    }
                }
                > ul {
                    display: 'block';
                    list-style: none;
                    width: 100%;
                    max-height: inherit;
                    box-sizing: border-box;
                    border: var(--im-component-border-weight) solid var(--im-color-accent-500);
                    background: var(--im-color-background-500);
                    border-radius: var(--im-component-border-radius);
                    color: var(--im-color-foreground-500);
                    > li {
                        width: 100%;
                        box-sizing: border-box;
                        vertical-align: top;
                        font-size: var(--im-component-font-size-default);
                        font-family: var(--im-component-font-family);
                        line-height: var(--im-component-line-height);
                        height: calc(var(--im-component-height-default) - var(--im-component-border-weight) * 2);
                        padding: calc(
                            (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                        );
                        cursor: pointer;
                        &:hover {
                            background: var(--im-color-background-400);
                        }
                        &:focus {
                            background: var(--im-color-accent-500);
                            color: var(--im-color-accent-backward-500);
                        }
                    }
                }
                &.expand {
                    > button {
                        border-color: var(--im-color-accent-500);
                        > i {
                            &::before {
                                content: '\e233';
                            }
                        }
                    }
                    &.top {
                        > button {
                            border-bottom-left-radius: 0px;
                            border-bottom-right-radius: 0px;
                        }
                        > ul {
                            border-top: 0px;
                            border-top-left-radius: 0px;
                            border-top-right-radius: 0px;
                        }
                    }
                    &.bottom {
                        > button {
                            border-top-left-radius: 0px;
                            border-top-right-radius: 0px;
                        }
                        > ul {
                            border-bottom: 0px;
                            border-bottom-left-radius: 0px;
                            border-bottom-right-radius: 0px;
                        }
                    }
                }
                &.error {
                    > button {
                        border-color: var(--im-color-danger-500);
                    }
                }
            }
            &[data-field='file'] {
                display: flex;
                flex-direction: row;
                position: relative;
                align-items: stretch;
                > label {
                    flex-grow: 1;
                    flex-shrink: 1;
                    height: var(--im-component-height-default);
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    color: var(--im-color-foreground-500);
                    background: var(--im-color-background-500);
                    border: var(--im-component-border-weight) solid var(--im-color-background-300);
                    border-radius: var(--im-component-border-radius);
                    padding: calc(
                        (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight) * 2
                    );
                    border-right: 0;
                    overflow: hidden;
                    &:focus {
                        border-color: var(--im-color-accent-500);
                    }
                }
                > button {
                    flex-basis: auto;
                    flex-shrink: 0;
                    flex-grow: 0;
                    min-width: 0;
                }
                > input {
                    position: absolute;
                    opacity: 0;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                }
            }
            &[data-field='display'] {
                > div {
                    display: block;
                    width: 100%;
                    height: var(--im-component-height-default);
                    font-family: var(--im-component-font-family);
                    font-size: var(--im-component-font-size-default);
                    line-height: var(--im-component-line-height);
                    padding-block: calc((var(--im-component-height-default) - 1lh) / 2);
                    color: var(--im-color-foreground-500);
                }
            }
            &[data-field='input'] + &[data-field='input'] {
                margin-top: 5px;
            }
        }
    }
}

/* /app/resources/styles/Absolute.css */
body {
    &[data-frame='site'],
    &[data-frame='context'] {
        > div[data-role='absolutes'] {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 100000;
            > div[data-role='absolute'] {
                position: absolute;
            }
        }
        &:has(div[data-role='absolutes']) {
            > div[data-role='scrollbar'] {
                display: none;
            }
            overflow: hidden;
        }
    }
}

/* /app/resources/styles/Modal.css */
body {
    &[data-frame='site'],
    &[data-frame='context'] {
        > div[data-role='modals'] {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 20000;
            top: 0;
            left: 0;
            overflow-y: auto;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            &::before {
                content: ' ';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--im-color-background-400);
                opacity: 0.7;
                z-index: -1;
            }
            > section {
                min-width: 100%;
                min-height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                > div[data-role='modal'] {
                    width: 90%;
                    max-width: 400px;
                    box-sizing: border-box;
                    background: var(--im-color-background-500);
                    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
                    > div[data-role='title'] {
                        width: 100%;
                        height: var(--im-component-height-large);
                        padding-inline: var(--im-component-gap-large);
                        padding-top: calc(var(--im-component-gap-large) + var(--im-component-gap-default));
                        padding-bottom: 0;
                        font-size: var(--im-font-size-h4);
                        color: var(--modal-title-color);
                        font-size: var(--modal-title-font-size);
                        font-weight: bold;
                        position: sticky;
                        top: 0;
                    }
                    > div[data-role='content'] {
                        padding: var(--im-component-gap-large);
                        font-size: var(--im-font-size-default);
                        line-height: var(--im-component-line-height);
                        color: var(--im-color-foreground-500);
                        box-sizing: border-box;
                        word-break: break-all;
                    }
                    > div[data-role='buttons'] {
                        width: 100%;
                        position: sticky;
                        bottom: 0;
                        display: flex;
                        padding: 0;
                        gap: 0;
                        > button {
                            flex-grow: 1;
                            flex-shrink: 1;
                            flex-basis: 0;
                            border-radius: 0;
                            &:not(.confirm)&:not(.begining)&:not(.danger)&:not(.action) {
                                border: 0;
                                padding: calc((var(--im-component-height-default) - 1lh) / 2);
                                border-color: var(--im-color-background-430);
                                &::before {
                                    background: var(--im-color-background-300);
                                }
                                &:hover {
                                    background: var(--im-color-background-200);
                                }
                            }
                        }
                    }
                }
            }
        }
        &:has(div[data-role='modals']) {
            > div[data-role='scrollbar'] {
                display: none;
            }
            overflow: hidden;
        }
    }
}

/* /app/resources/styles/Calendar.css */
body {
    &[data-frame='site'] {
        > div[data-role='absolutes'] {
            > div[data-role='absolute'] {
                &:has(> div[data-role='calendar']) {
                    background: var(--im-color-background-500);
                    display: block;
                    min-height: 100px;
                    min-width: 200px;
                    position: fixed;
                }
                > div[data-role='calendar'] {
                    font-family: var(--im-font-family-body);
                    font-size: var(--im-font-size-default);
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    background: var(--im-color-background-500);
                    border: 1px solid var(--im-color-accent-500);
                    height: 320px;
                    width: 320px;
                    > div[data-role='header'] {
                        display: flex;
                        flex-direction: row;
                        align-items: stretch;
                        padding: calc(16px * 0.5);
                        height: 48px;
                        background: var(--im-color-accent-400);
                        flex-shrink: 0;
                        > button {
                            background: transparent;
                            border: 0;
                            cursor: pointer;
                            color: var(--im-color-background);
                            font-size: var(--im-font-size-default);
                            &[data-action='month'] {
                                margin-right: auto;
                            }
                            &[data-action='prev'],
                            &[data-action='next'] {
                                width: var(--im-component-height-default);
                                font-family: moimz;
                                font-size: var(--im-font-size-large);
                            }
                            &[data-action='prev']::before {
                                content: '\e211';
                            }
                            &[data-action='next']::before {
                                content: '\e212';
                            }
                            &[data-action='month']::after {
                                display: inline-block;
                                padding-left: 8px;
                                content: '\e234';
                                font-family: moimz;
                                font-size: var(--im-font-size-large);
                            }
                        }
                        > div[data-role='picker'] {
                            position: absolute;
                            top: 48px;
                            left: 0;
                            width: 100%;
                            height: calc(100% - calc(16px * 2) - calc(16px * 0.5) * 2);
                            background: var(--im-color-background-500);
                            z-index: 10;
                            display: none;
                            grid-template-columns: 1fr 2fr;
                            grid-template-rows: 1fr calc(
                                    var(--im-component-height-default) + calc(16px * 0.5) * 2 + 1px
                                );
                            grid-template-areas:
                                'year month'
                                'footer footer';
                            column-gap: 2px;
                            row-gap: 0px;
                            background: var(--im-color-accent-500);
                            > ul[data-role='years'] {
                                grid-area: year;
                                list-style: none;
                                flex-grow: 1;
                                flex-shrink: 1;
                                min-height: 0;
                                overflow-y: scroll;
                                display: grid;
                                gap: 1px;
                                background: var(--im-color-background-300);
                                grid-template-columns: 1fr;
                                grid-auto-rows: calc((100% - 5px) / 6);
                            }
                            > ul[data-role='months'] {
                                grid-area: month;
                                display: grid;
                                grid-template-columns: repeat(2, 1fr);
                                grid-template-rows: repeat(6, 1fr);
                                gap: 1px;
                                background: var(--im-color-background-300);
                            }
                            > ul {
                                > li {
                                    height: 36px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    background: var(--im-color-background-500);
                                    cursor: pointer;
                                    &.selected {
                                        background: var(--im-color-accent-500);
                                        color: var(--im-color-accent-backward-500);
                                    }
                                }
                            }
                            > div {
                                grid-area: footer;
                                border-top: 1px solid var(--im-color-background-200);
                                background: var(--im-color-background-500);
                                padding: calc(16px * 0.5);
                                height: 49px;
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                                > button {
                                    background: var(--im-color-accent-500);
                                    color: var(--im-color-accent-backward-500);
                                    height: var(--im-component-height-default);
                                    font-size: var(--im-font-size-default);
                                    border: 0;
                                    padding: 0px calc(16px * 0.5);
                                    cursor: pointer;
                                }
                            }
                        }
                        &.picker {
                            > div[data-role='picker'] {
                                display: grid;
                            }
                        }
                    }
                    > div[data-role='content'] {
                        flex-grow: 1;
                        flex-shrink: 1;
                        display: flex;
                        flex-direction: column;
                        > ul[data-role='days'] {
                            flex-shrink: 1;
                            background: var(--im-color-background-300);
                            display: flex;
                            flex-direction: row;
                            align-items: stretch;
                            list-style: none;
                            gap: 1px;
                            border-bottom: 1px solid var(--im-color-background-300);
                            margin: 0;
                            padding: 0;
                            > li {
                                flex-basis: 0;
                                flex-grow: 1;
                                height: var(--im-component-height-default);
                                line-height: var(--im-component-height-default);
                                text-align: center;
                                color: var(--im-color-foreground-500);
                                background: var(--im-color-background-400);
                                &:first-child {
                                    color: #dc3535;
                                }
                                &:last-child {
                                    color: #0075f8;
                                }
                            }
                        }
                        > ul[data-role='dates'] {
                            flex-grow: 1;
                            flex-shrink: 1;
                            min-height: 0;
                            overflow: auto;
                            background: var(--im-color-background-300);
                            gap: 1px;
                            display: grid;
                            grid-template-columns: repeat(7, 1fr);
                            list-style: none;
                            margin: 0;
                            padding: 0;
                            > li {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: var(--im-color-background-500);
                                text-align: center;
                                cursor: pointer;
                                color: var(--im-color-foreground-400);
                                &.sun {
                                    color: #dc3535;
                                }
                                &.sat {
                                    color: #0075f8;
                                }
                                &:hover {
                                    background: var(--im-color-background-400);
                                }
                                &.today {
                                    outline: 1px solid var(--im-color-accent-400);
                                }
                                &.unfocused {
                                    color: var(--im-color-background-100);
                                }
                                &.selected {
                                    background: var(--im-color-accent-500);
                                    color: var(--im-color-background-500);
                                }
                            }
                        }
                    }
                    > div[data-role='footer'] {
                        border-top: 1px solid var(--im-color-background-200);
                        padding: calc(16px * 0.5);
                        height: 48px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        > button {
                            background: var(--im-color-accent-500);
                            color: var(--im-color-accent-backward-500);
                            height: var(--im-component-height-default);
                            font-size: var(--im-font-size-default);
                            border: 0;
                            padding: 0px calc(16px * 0.5);
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}

/* /app/resources/styles/Editor.css */