/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 아이모듈 field 스타일시트를 정의한다.
 * 
 * @file /app/resources/styles/Fields.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 10. 14.
 */
body {
    &[data-frame='site'],
    &[data-frame='context'],
    &[data-frame='popup'] {
        a[data-role='button'],
        button[data-role='button'] {
            --im-button-background-default: var(--im-bg-tertiary);
            --im-button-background-hover: var(--im-bg-quaternary);
            --im-button-background-disabled: var(--im-bg-quaternary);
            --im-button-border-default: var(--im-border-secondary);
            --im-button-border-separator: var(--im-border-secondary);
            --im-button-color-default: var(--im-text-primary);

            &.confirm,
            &.pressed {
                --im-button-background-default: var(--im-accent-primary);
                --im-button-background-hover: var(--im-accent-primary);
                --im-button-background-disabled: var(--im-accent-primary);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-accent-primary);
                --im-button-color-default: var(--im-white-primary);
            }

            &.danger {
                --im-button-background-default: var(--im-danger-primary);
                --im-button-background-hover: var(--im-danger-primary);
                --im-button-background-disabled: var(--im-danger-primary);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-danger-primary);
                --im-button-color-default: var(--im-white-primary);
            }

            &.action {
                --im-button-background-default: var(--im-brand-primary);
                --im-button-background-hover: var(--im-brand-primary);
                --im-button-background-disabled: var(--im-brand-primary);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-brand-primary);
                --im-button-color-default: var(--im-white-primary);
            }

            &.begining {
                --im-button-background-default: var(--im-beginning-primary);
                --im-button-background-hover: var(--im-beginning-primary);
                --im-button-background-disabled: var(--im-beginning-primary);
                --im-button-border-default: transparent;
                --im-button-border-separator: var(--im-beginning-primary);
                --im-button-color-default: var(--im-white-primary);
            }

            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));
            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-small);

                > 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-small);

            &.left {
                justify-content: flex-start;
            }

            &.center {
                justify-content: center;
            }

            &.right {
                justify-content: right;
            }

            > span[data-role='space'] {
                flex-grow: 1;
            }
        }

        /**
         * 폼필드를 기준으로 표시되는 팝오버 (셀렉트 목록, 캘린더 등)
         */
        :where(div[data-role='field'] > [popover]) {
            margin: 0;
            padding: 0;
            border: 0;
            overflow: visible;
            color: inherit;
            background: transparent;
        }

        div[data-role='field'] > [popover]:popover-open {
            position: fixed;
            inset: auto;
            position-area: block-end span-inline-end;
            position-try-fallbacks: flip-block, flip-inline;
            position-try-order: most-block-size;
            position-visibility: anchors-visible;
            min-width: anchor-size(width);
            max-width: calc(100% - 10px);
            max-height: calc(100% - 10px);
        }

        div[data-role='field'] {
            > div[data-role='help'] {
                display: block;
                padding-block: var(--im-component-gap-small);
                color: var(--im-text-secondary);
                font-family: var(--im-component-font-family);
                font-size: var(--im-component-font-size-small);
                box-sizing: border-box;
            }

            > input,
            > textarea,
            > div[contenteditable] {
                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-text-primary);
                background: var(--im-bg-primary);
                border: var(--im-component-border-weight) solid var(--im-bg-quaternary);
                border-radius: var(--im-component-border-radius);
                padding: calc((var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight));
                resize: none;
                position: relative;
                overflow: hidden;
                vertical-align: top;

                &:focus {
                    border-color: var(--im-accent-primary);
                }

                &::placeholder {
                    color: var(--im-text-secondary);
                }
            }

            > textarea {
                height: auto;

                /**
                 * contentEditable 편집영역을 사용하는 경우 TEXTAREA 를 숨긴다.
                 */
                &:has(+ div[contenteditable]) {
                    display: none;
                }
            }

            > div[contenteditable] {
                height: auto;
                min-height: calc(var(--im-textarea-rows, 5) * 1lh + var(--im-component-height-default) - 1lh);
                overflow-wrap: anywhere;
                outline: none;
                cursor: text;

                &:empty::before {
                    content: attr(data-placeholder);
                    white-space: pre-wrap;
                    color: var(--im-text-secondary);
                    pointer-events: none;
                }

                span[data-role='mention'] {
                    color: var(--im-accent-primary);
                }
            }

            &.error {
                > div[data-role='help'] {
                    color: var(--im-danger-primary);
                }

                > input,
                > textarea,
                > div[contenteditable],
                > button {
                    border-color: var(--im-danger-primary);
                }
            }

            &[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-text-primary);
                    background: var(--im-bg-primary);
                    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));
                    background-clip: content-box;
                    font-size: var(--im-component-font-size-default);
                    font-family: var(--im-component-font-family);
                }

                &:has(> input:focus:not([readonly])) {
                    > label {
                        display: none;
                    }
                }

                > button {
                    width: calc(var(--im-component-height-default));
                    height: calc(var(--im-component-height-default));
                    padding-block: calc(
                        (var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight)
                    );
                    background: var(--im-accent-primary);
                    color: var(--im-white-primary);
                    border: var(--im-component-border-weight) solid var(--im-accent-primary);

                    > i {
                        font-family: moimz;
                        font-style: normal;
                        font-size: var(--im-font-size-large);

                        &::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-small);
                        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-bg-quaternary);
                            background: var(--im-bg-primary);
                            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-accent-primary);
                            }

                            &:checked {
                                &::after {
                                    border-color: var(--im-white-primary);
                                }
                            }
                        }

                        &[type='checkbox'] {
                            &:checked::before {
                                border-color: var(--im-accent-primary);
                                background: var(--im-accent-primary);
                                color: var(--im-white-primary);
                                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-accent-primary);
                                    background: var(--im-white-primary);
                                }
                            }
                        }
                    }
                }

                > div[data-role='help'] {
                    padding-left: var(--input-font-weight);
                }

                &.error {
                    > label {
                        color: var(--im-danger-primary);

                        > input {
                            &::before {
                                border-color: var(--im-danger-primary);
                            }
                        }
                    }
                }
            }

            &[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-text-primary);
                    background: var(--im-bg-primary);
                    border: var(--im-component-border-weight) solid var(--im-bg-quaternary);
                    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-text-primary);
                        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-accent-primary);
                    }
                }

                > ul {
                    display: 'block';
                    list-style: none;
                    width: max-content;
                    overflow-y: auto;
                    box-sizing: border-box;
                    border: var(--im-component-border-weight) solid var(--im-accent-primary);
                    background: var(--im-bg-primary);
                    border-radius: var(--im-component-border-radius);
                    color: var(--im-text-primary);

                    > 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-bg-tertiary);
                        }

                        &:focus {
                            background: var(--im-accent-primary);
                            color: var(--im-white-primary);
                        }
                    }
                }

                &.expand {
                    > button {
                        border-color: var(--im-accent-primary);

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

            &[data-field='image'] {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--im-component-gap-default);

                > input[type='file'] {
                    display: none;
                }

                /**
                 * 이미지 목록의 이미지 및 이미지 편집영역 공통 (삭제버튼, 업로드 진행상태)
                 */
                > ul[data-role='images'] > li,
                > div[data-role='editor'] > div[data-role='files'] {
                    position: relative;
                    background-image:
                        repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                        repeating-linear-gradient(45deg, #ccc 25%, #fff 25%, #fff 75%, #ccc 75%, #ccc);
                    background-position:
                        0 0,
                        7px 7px;
                    background-size: 14px 14px;

                    > button[data-action='delete'] {
                        position: absolute;
                        display: none;
                        top: 0;
                        right: 0;
                        width: 24px;
                        height: 24px;
                        padding: 0;
                        border: 0;
                        background: var(--im-danger-primary);
                        color: var(--im-white-primary);
                        cursor: pointer;
                        z-index: 10;

                        > i {
                            display: block;
                            width: 24px;
                            height: 24px;
                            line-height: 24px;
                            font-size: 16px;
                            font-family: moimz;
                            font-style: normal;

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

                    > progress {
                        display: none;
                        position: absolute;
                        z-index: 5;
                        appearance: none;
                        box-sizing: border-box;
                        overflow: hidden;

                        &::-webkit-progress-bar {
                            background: var(--im-black-secondary);
                        }

                        &[data-role='read'] {
                            --progress: 0;
                            width: 1.4rem;
                            height: 1.4rem;
                            top: calc(50% - 0.7rem);
                            left: calc(50% - 0.7rem);
                            border-radius: 50%;
                            outline: 1px solid var(--im-white-secondary);
                            outline-offset: -1px;

                            &::-webkit-progress-value {
                                width: 100% !important;
                                height: 100% !important;
                                border-radius: 50%;
                                background: conic-gradient(
                                    var(--im-white-primary) calc(var(--progress) * 1%),
                                    rgba(0, 0, 0, 0) 0%
                                );
                            }
                        }

                        &[data-role='upload'] {
                            width: 80%;
                            max-width: 100px;
                            height: calc(0.5rem - 2px);
                            bottom: 0.5rem;
                            left: 50%;
                            transform: translateX(-50%);
                            border-radius: 0.25rem;
                            outline: 1px solid var(--im-black-secondary);

                            &::-webkit-progress-value {
                                background: var(--im-white-primary);
                                border-radius: 3px;
                                transition: width ease-in 0.2s;
                            }
                        }
                    }

                    &[data-status] {
                        > button[data-action='delete'] {
                            display: block;
                        }
                    }

                    &[data-upload-status='WAITING'],
                    &[data-upload-status='READING'] {
                        > progress[data-role='read'] {
                            display: block;
                        }
                    }

                    &[data-upload-status='READED'],
                    &[data-upload-status='START'],
                    &[data-upload-status='UPLOADING'] {
                        > progress[data-role='upload'] {
                            display: block;
                        }
                    }

                    &[data-upload-status='START'] {
                        > progress[data-role='upload'] {
                            &::-webkit-progress-value {
                                width: 30% !important;
                                animation: im-field-image-progress-loading infinite 2s;
                            }
                        }
                    }
                }

                /**
                 * 이미지 편집이 불가능한 경우 첨부된 이미지 목록
                 */
                > ul[data-role='images'] {
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--im-component-gap-small);
                    margin: 0;
                    padding: 0;
                    list-style: none;

                    &:empty {
                        display: none;
                    }

                    > li {
                        width: 96px;
                        height: 96px;
                        overflow: hidden;
                        border-radius: var(--im-component-border-radius);

                        > i[data-role='image'] {
                            display: block;
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                        }

                        &[data-status='LOCAL'] > i[data-role='image'] {
                            opacity: 0.5;
                        }
                    }
                }

                /**
                 * 이미지 편집이 가능한 경우 이미지 편집영역
                 */
                > div[data-role='editor'] {
                    display: flex;
                    flex-direction: column;
                    width: fit-content;
                    max-width: 100%;
                    row-gap: var(--im-component-gap-default);

                    > div[data-role='files'] {
                        width: fit-content;
                        max-width: 100%;
                        padding: 2rem;
                        box-sizing: border-box;

                        > div[data-role='image'] {
                            position: relative;
                            z-index: 1;
                            max-width: 100%;
                            overflow: hidden;
                            background-size: contain;
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                        }

                        > progress[data-role='upload'] {
                            bottom: 13px;
                        }

                        /**
                         * 편집중인 이미지가 있는 경우, 크롭영역 바깥에 편집이미지를 반투명하게 표시한다.
                         */
                        &[data-has-image='true'] {
                            background: var(--im-black-primary);

                            > div[data-role='image'] {
                                outline: 1px solid var(--im-bg-primary);
                                cursor: grab;
                                touch-action: none;

                                &:active {
                                    cursor: grabbing;
                                }
                            }

                            > button[data-action='delete'] {
                                display: block;
                            }

                            &::before {
                                content: '';
                                position: absolute;
                                inset: 0;
                                background-image: var(--edit-bg-image, none);
                                background-size: var(--edit-bg-size, auto);
                                background-position: var(--edit-bg-position, 0 0);
                                background-repeat: no-repeat;
                                background-color: var(--im-black-primary);
                                opacity: 0.65;
                                pointer-events: none;
                            }
                        }
                    }

                    > div[data-role='tools'] {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: var(--im-component-gap-default);

                        &[hidden] {
                            display: none;
                        }

                        > button {
                            flex-shrink: 0;
                            width: var(--im-component-height-default);
                            height: var(--im-component-height-default);
                            padding: 0;
                            border: 1px solid var(--im-border-primary);
                            background: var(--im-fill-quaternary-alpha);
                            color: var(--im-text-primary);
                            cursor: pointer;

                            > i {
                                display: block;
                                font-family: moimz;
                                font-style: normal;
                                font-size: var(--im-font-size-default);
                                text-align: center;
                            }

                            &:hover {
                                background: var(--im-fill-tertiary-alpha);
                            }

                            &[data-rotate='left'] > i::before {
                                content: '\ed68';
                            }

                            &[data-rotate='right'] > i::before {
                                content: '\ed69';
                            }

                            &[disabled] {
                                cursor: not-allowed;
                                opacity: 0.7;

                                > i {
                                    animation: mi-loading 2s infinite linear;

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

                        > input[type='range'][data-role='zoomer'] {
                            flex-grow: 1;
                            flex-shrink: 1;
                            min-width: 0;
                            accent-color: var(--im-accent-primary);
                        }
                    }
                }
            }

            &[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-text-primary);
                    background: var(--im-bg-primary);
                    border: var(--im-component-border-weight) solid var(--im-bg-quaternary);
                    border-radius: var(--im-component-border-radius);
                    padding: calc(
                        (var(--im-component-height-default) - var(--im-component-line-height)) / 2 -
                            var(--im-component-border-weight)
                    );
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    border-right: 0;
                    overflow: hidden;

                    &:focus {
                        border-color: var(--im-accent-primary);
                    }
                }

                > button {
                    flex-basis: auto;
                    flex-shrink: 0;
                    flex-grow: 0;
                    min-width: 0;
                    height: var(--im-component-height-default);
                    line-height: var(--im-component-line-height);
                    padding: calc((var(--im-component-height-default) - 1lh) / 2 - var(--im-component-border-weight));

                    > i {
                        line-height: calc(var(--im-component-line-height) + 1px);
                    }
                }

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

            &[data-field='input'] + &[data-field='input'] {
                margin-top: 5px;
            }
        }
    }
}

@keyframes im-field-image-progress-loading {
    to,
    from {
        margin-left: 0;
    }

    50% {
        margin-left: 100%;
        transform: translateX(-100%);
    }
}