/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 관리자패이지 프레임을 위한 스타일시트를 정의한다.
 * 
 * @file /app/resources/frames/styles/admin.css
 * @author sungjin <esung246@naddle.net>
 * @license MIT License
 * @modified 2026. 11. 13.
 */
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;
                        }
                    }

                    /**
                     * 폼 하단의 로그인 상태유지 체크박스와 같은 줄 오른쪽에 배치한다.
                     */
                    > div[data-role='buttons']:not([data-module]) {
                        display: flex;
                        align-items: center;
                        width: fit-content;
                        height: 16px;
                        margin: -16px 0px 0px auto;

                        > button {
                            padding: 0px;
                            background: transparent;
                            border: 0;
                            color: rgba(255, 255, 255, 0.8);
                            font-size: 14px;
                            line-height: 14px;
                            cursor: pointer;

                            & + button {
                                margin-left: 12px;
                                padding-left: 12px;
                                border-left: 1px solid rgba(255, 255, 255, 0.4);
                            }

                            &:hover,
                            &:focus-visible {
                                color: var(--aui-white-primary);
                                text-decoration: underline;
                                outline: none;
                            }
                        }
                    }

                    > form {
                        > label {
                            display: none;
                        }

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

                            > input {
                                display: block;
                                width: 100%;
                                height: 46px;
                                line-height: 22px;
                                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;
                                }
                            }

                            > 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 (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 (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 (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='buttons'] {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            margin-top: 10px;

                            > button {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 100%;
                                height: 45px;
                                border: 1px solid transparent;
                                border-radius: 5px;
                                background: var(--aui-accent-secondary);
                                color: var(--aui-white-primary);
                                font-size: 16px;
                                cursor: pointer;

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

                                &:focus-visible {
                                    outline: 1px solid var(--aui-white-primary);
                                    outline-offset: -3px;
                                }

                                &[data-action='passkey'] {
                                    background: var(--aui-brand-secondary);

                                    &:hover {
                                        background: var(--aui-brand-primary);
                                    }
                                }

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

                        > div[data-field='check'] {
                            margin-top: 12px;

                            > label {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                width: fit-content;
                                color: var(--aui-white-primary);
                                font-size: 14px;
                                line-height: 16px;
                                cursor: pointer;
                                user-select: none;

                                > input {
                                    position: relative;
                                    flex-shrink: 0;
                                    width: 16px;
                                    height: 16px;
                                    margin: 0px;
                                    border: 1px solid var(--aui-white-primary);
                                    border-radius: 3px;
                                    background: var(--aui-white-primary);
                                    cursor: pointer;
                                    appearance: none;

                                    &:checked {
                                        border-color: var(--aui-accent-primary);
                                        background: var(--aui-accent-primary);

                                        &::after {
                                            position: absolute;
                                            inset: 0;
                                            color: var(--aui-white-primary);
                                            font-family: moimz;
                                            font-size: 12px;
                                            font-weight: 500;
                                            line-height: 14px;
                                            text-align: center;
                                            content: '\e404';
                                        }
                                    }

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