@charset "UTF-8";
/* =====================================================================
 * 파일: member-login.css
 * 경로: /home/library/marc/public_html/assets/css/member-login.css
 * 설명: 로그인 화면 전용 모양 (views/layout/login.php, views/member/login.php 와 짝)
 *       목업에는 로그인 화면이 없어서 목업 색·부품으로 새로 만듦
 *
 * [구성]
 * 1) 바탕 (.login-page : 화면 가운데 정렬)
 * 2) 카드 (.login-card : 왼쪽 소개 + 오른쪽 입력)
 * 3) 왼쪽 소개 (.login-intro)
 * 4) 오른쪽 입력 (.login-form)
 *
 * [주의]
 * - 버튼·입력칸·알림 상자 모양은 app-ui.css 것을 씀 (여기서 다시 안 만듦)
 * - 왼쪽 소개 색은 왼쪽 메뉴와 같은 이름표(--app-side-*)
 * - 폭이 좁으면(760px 이하) 왼쪽 소개를 숨기고 입력만
 * ===================================================================== */

:root {
    --login-card-w: 760px;   /* 카드 폭 */
    --login-intro-w: 300px;  /* 왼쪽 소개 폭 */
}

/* ---------------------------------------------------------------------
 * 1) 바탕
 * --------------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
}

/* ---------------------------------------------------------------------
 * 2) 카드
 * --------------------------------------------------------------------- */
.login-card {
    display: grid;
    grid-template-columns: var(--login-intro-w) minmax(0, 1fr);
    width: 100%;
    max-width: var(--login-card-w);
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-panel);
    box-shadow: 0 10px 30px #15243f14;
}

/* ---------------------------------------------------------------------
 * 3) 왼쪽 소개
 * --------------------------------------------------------------------- */
.login-intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px 30px;
    background: var(--app-side-bg);
    color: var(--app-side-text);
}

.login-intro .app-product-icon {
    width: 40px;
    height: 40px;
}

.login-intro strong {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.login-intro p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--app-side-text);
}

.login-intro small {
    margin-top: auto;            /* 맨 아래로 */
    font-size: 11px;
    color: var(--app-side-sub);
}

/* ---------------------------------------------------------------------
 * 4) 오른쪽 입력
 * --------------------------------------------------------------------- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 40px 36px;
}

.login-form .login-logo {
    display: block;
    width: 120px;
    height: auto;
    margin-bottom: 4px;
}

.login-form h1 {
    font-size: 20px;
    font-weight: 700;
}

.login-form .app-button {
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------
 * 좁은 화면 : 소개 숨김
 * --------------------------------------------------------------------- */
@media (max-width: 760px) {
    .login-card {
        grid-template-columns: 1fr;
    }

    .login-intro {
        display: none;
    }

    .login-form {
        padding: 30px 24px;
    }
}