/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 관리자프레임을 위한 스타일시트를 정의한다.
 * 
 * @file /app/resources/frames/styles/admin.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2026. 2. 27.
 */
body {
    &[data-frame='admin'] {
        > main {
            width: 100vw;
            height: 100vh;

            &[data-layout='login'] {
                background: url('../../images/login.png') no-repeat 50% 50%;
                background-size: cover;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100vh;

                > section {
                    width: 300px;

                    > h1 {
                        height: 100px;
                        display: block;
                        color: #fff;
                        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
                        text-align: center;
                        font-size: 24px;
                        font-weight: 200;
                        letter-spacing: -1px;

                        > i {
                            display: block !important;
                            text-align: center;
                            height: 60px;
                            line-height: 50px;
                            font-size: 50px !important;
                        }
                    }

                    > form {
                        position: relative;

                        > div[data-role='fieldset'] {
                            width: 100%;
                            position: relative;
                            margin: 10px 0px;
                            display: flex;
                            flex-direction: column;
                            border-radius: 5px;

                            > div[data-field] {
                                position: relative;
                                width: 100%;

                                > input {
                                    display: block;
                                    width: 100%;
                                    height: 45px;
                                    line-height: 25px;
                                    padding: 10px;
                                    background: rgba(255, 255, 255, 0.9);
                                    border: 1px solid rgba(0, 0, 0, 0.6);
                                    outline: none;
                                    font-size: 16px;
                                    box-sizing: border-box;
                                    color: #222;

                                    &:focus {
                                        outline: 2px solid var(--aui-color-accent-500);
                                        z-index: 5;
                                    }

                                    &[name='email'] {
                                        border-radius: 5px 5px 0px 0px;
                                    }

                                    &[name='password'] {
                                        border-radius: 0px 0px 5px 5px;
                                        padding-right: 50px;
                                    }
                                }

                                > div[data-role='help'] {
                                    position: absolute;
                                    top: 8px;
                                    left: calc(100% + 10px);
                                    width: fit-content;
                                    white-space: nowrap;
                                    height: 28px;
                                    line-height: 28px;
                                    padding: 0px 8px;
                                    background: var(--im-color-danger-500);
                                    color: var(--im-color-accent-backward-500);
                                    font-size: 14px;
                                    border-radius: 3px;

                                    &::before {
                                        position: absolute;
                                        top: 8px;
                                        right: 100%;
                                        border-right: 6px solid var(--im-color-danger-500);
                                        border-top: 6px solid transparent;
                                        border-bottom: 6px solid transparent;
                                        content: ' ';
                                    }
                                }

                                &[data-name='password'] {
                                    margin-top: -1px;
                                }
                            }

                            > button {
                                position: absolute;
                                bottom: 8px;
                                right: 8px;
                                cursor: pointer;
                                border: 1px solid rgba(0, 0, 0, 0.6);
                                background: transparent;
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                z-index: 10;
                                color: rgba(0, 0, 0, 0.6);

                                > i {
                                    display: block;
                                    width: 28px;
                                    height: 28px;
                                    line-height: 28px;
                                    text-align: center;
                                    font-weight: bold;
                                    font-size: 14px;
                                }

                                &:hover {
                                    color: var(--aui-color-accent-500);
                                    border-color: var(--aui-color-accent-500);
                                }

                                &:focus {
                                    outline: 2px solid var(--aui-color-accent-500);
                                }

                                &[disabled] {
                                    border-color: rgba(0, 0, 0, 0.6) !important;
                                    opacity: 0.6;
                                    cursor: not-allowed;
                                    color: rgba(0, 0, 0, 0.6) !important;

                                    > i {
                                        animation: mi-loading 2s infinite linear;
                                        &::before {
                                            content: '\efff';
                                        }
                                    }
                                }
                            }
                        }

                        > div[data-field='check'] {
                            > label {
                                display: block;
                                cursor: pointer;
                                font-size: 16px;
                                font-weight: 400;
                                line-height: 16px;
                                padding-left: 28px;
                                width: fit-content;
                                margin: 16px auto;
                                color: rgba(255, 255, 255, 0.9);

                                > input {
                                    position: relative;
                                    width: 16px;
                                    height: 16px;
                                    cursor: pointer;
                                    vertical-align: top;
                                    margin: 0px 8px 0px -28px;
                                    border-radius: 3px;
                                    appearance: none;

                                    &:focus {
                                        outline: 2px solid var(--aui-color-accent-400);
                                    }

                                    &::after {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        content: ' ';
                                        box-sizing: border-box;
                                        border: 1px solid rgba(0, 0, 0, 0.6);
                                        background: rgba(255, 255, 255, 0.9);
                                        border-radius: 3px;
                                        z-index: 1;
                                    }

                                    &:checked::after {
                                        border-color: var(--im-color-accent-500);
                                        background: var(--im-color-accent-500);
                                        color: var(--im-color-accent-backward-500);
                                        font-family: moimz;
                                        content: '\e404';
                                        font-size: 14px;
                                        text-align: center;
                                        line-height: 14px;
                                        font-weight: 500;
                                    }
                                }
                            }
                        }

                        > div[data-role='message'] {
                            position: absolute;
                            top: 100px;
                            left: 50%;
                            width: fit-content;
                            max-width: 100%;
                            min-width: 300px;
                            line-height: 24px;
                            padding: 4px 8px;
                            background: var(--im-color-danger-500);
                            color: var(--im-color-accent-backward-500);
                            font-size: 14px;
                            transform: translateX(-50%);
                            border-radius: 3px;
                            z-index: 5;

                            &::before {
                                position: absolute;
                                left: 16px;
                                bottom: 100%;
                                border-bottom: 6px solid var(--im-color-danger-500);
                                border-left: 6px solid transparent;
                                border-right: 6px solid transparent;
                                content: ' ';
                            }
                        }

                        &:has(div[data-role='help']),
                        &:has(div[data-role='message']) {
                            > div[data-role='fieldset'] {
                                box-shadow: 0px 0px 5px 5px rgba(255, 0, 0, 0.3);

                                > div[data-field] {
                                    > input {
                                        border-color: var(--aui-color-danger-500);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            > section[data-role='aui'] {
                width: 100vw;
                height: 100%;
            }
        }
    }
}