/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 관리자프레임을 위한 스타일시트를 정의한다.
 * 
 * @file /app/resources/frames/styles/admin.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2026. 7. 8.
 */
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 {
                        > div[data-role='fieldset'] {
                            width: 100%;
                            margin: 10px 0px;
                            display: flex;
                            flex-direction: column;
                            border-radius: 5px;

                            > div[data-field] {
                                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;

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

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

                                > div[data-role='help'] {
                                    position: fixed;
                                    top: anchor(center);
                                    left: anchor(right);
                                    transform: translateY(-50%);
                                    margin-left: 6px;
                                    width: fit-content;
                                    white-space: nowrap;
                                    line-height: 24px;
                                    padding: 4px 8px;
                                    background: var(--aui-danger-primary);
                                    color: var(--aui-white-primary);
                                    font-size: 14px;
                                    border-radius: 3px;
                                    z-index: 5;

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

                                    @media (max-width: 800px) {
                                        left: anchor(left);
                                        width: anchor-size(width);
                                        transform: none;
                                        margin-left: 0px;

                                        &::before {
                                            top: auto;
                                            right: auto;
                                            left: 16px;
                                        }
                                    }
                                }

                                &:has(:focus) {
                                    > input {
                                        outline: 2px solid var(--aui-accent-primary);
                                        outline-offset: -2px;
                                    }

                                    z-index: 5;
                                }

                                &[data-name='email'] {
                                    anchor-name: --login-email;
                                    margin-top: -1px;

                                    > div[data-role='help'] {
                                        position-anchor: --login-email;

                                        @media (max-width: 800px) {
                                            top: auto;
                                            bottom: anchor(top);
                                            margin-bottom: 6px;

                                            &::before {
                                                top: 100%;
                                                border-top: 6px solid var(--aui-danger-primary);
                                                border-bottom: none;
                                                border-left: 6px solid transparent;
                                                border-right: 6px solid transparent;
                                            }
                                        }
                                    }
                                }

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

                                    > div[data-role='help'] {
                                        position-anchor: --login-password;

                                        @media (max-width: 800px) {
                                            top: anchor(bottom);
                                            bottom: auto;
                                            margin-top: 6px;

                                            &::before {
                                                bottom: 100%;
                                                border-bottom: 6px solid var(--aui-danger-primary);
                                                border-top: none;
                                                border-left: 6px solid transparent;
                                                border-right: 6px solid transparent;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        > div[data-role='message'] {
                            position: fixed;
                            position-anchor: --login-password;
                            top: anchor(bottom);
                            left: anchor(left);
                            width: anchor-size(width);
                            margin-top: 6px;
                            line-height: 24px;
                            padding: 4px 8px;
                            background: var(--aui-danger-primary);
                            color: var(--aui-white-primary);
                            font-size: 14px;
                            border-radius: 3px;
                            z-index: 5;

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

                        > div[data-role='button'] {
                            width: 100%;
                            margin-top: 10px;
                            background: var(--aui-accent-secondary);
                            border-radius: 5px;
                            display: flex;
                            align-items: stretch;

                            > button {
                                flex-shrink: 0;
                                flex-grow: 1;
                                order: 2;
                                cursor: pointer;
                                background: transparent;
                                color: var(--aui-white-primary);
                                border: 0;
                                text-align: right;
                                padding-right: 10px;

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

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

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

                            > div[data-field='check'] {
                                order: 1;
                                flex-shrink: 0;

                                > label {
                                    display: block;
                                    cursor: pointer;
                                    font-size: 16px;
                                    font-weight: 400;
                                    line-height: 16px;
                                    padding-left: 28px;
                                    width: fit-content;
                                    margin: 16px auto;
                                    color: var(--aui-white-primary);
                                    padding-inline: 38px 10px;
                                    user-select: none;

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

                                        &::after {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                            content: ' ';
                                            box-sizing: border-box;
                                            border: 1px solid var(--aui-white-primary);
                                            background: var(--aui-white-primary);
                                            border-radius: 3px;
                                            z-index: 1;
                                        }

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

                            &:has(> button:hover) {
                                background: var(--aui-accent-primary);
                            }

                            &:has(> button:focus) {
                                background: var(--aui-accent-primary);
                                outline: 1px solid var(--aui-white-primary);
                                outline-offset: -2px;
                            }
                        }

                        &: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%;
            }
        }
    }
}