/* ============================================================================
   인증 화면 셸 — 로그인 · 로그아웃 · 2단계 인증 · 비밀번호 변경/초기화
   ----------------------------------------------------------------------------
   본 화면(layout-shell.css)과 같은 색 체계를 쓴다: 청회색 틀 바탕 위에 흰 카드.
   이 화면들은 include/header.jsp 를 쓰지 않으므로 각 JSP 의 <head> 에서 직접 로드하고,
   다크 표식(<html data-bs-theme>)도 각 JSP 의 초기 스크립트가 세팅한다.
   theme.css 는 </head> 뒤에 동적으로 꽂혀 이 파일보다 뒤에 오므로 body.auth-page 로 특이도를 올린다.
   ============================================================================ */

:root {
    --auth-bg: #e4e9f2;
    --auth-bg-accent: #d6deeb;
    --auth-card-bg: #fff;
    --auth-card-border: #d3dae6;
    --auth-card-shadow: 0 1px 2px rgba(30, 41, 59, .06), 0 12px 32px rgba(30, 41, 59, .10);
    --auth-pane-bg: #f4f6f9;
    --auth-title: #1e293b;
    --auth-muted: #6b778c;
    --auth-brand: #0070c0;
}

[data-bs-theme="dark"] {
    --auth-bg: #1e2022;
    --auth-bg-accent: #262b33;
    --auth-card-bg: #2c323b;
    --auth-card-border: #3d444f;
    --auth-card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --auth-pane-bg: #252a32;
    --auth-title: #f1f5f9;
    --auth-muted: #97a4af;
    --auth-brand: #4aa3ee;
}

body.auth-page {
    min-height: 100vh;
    background-color: var(--auth-bg);
    /* 위쪽에 은은한 면 하나 — 사선 도형·초록 배경 이미지 대신 */
    background-image:
        radial-gradient(1200px 520px at 50% -180px, var(--auth-bg-accent), transparent 70%);
    background-repeat: no-repeat;
}

body.auth-page .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    background: transparent;
}

body.auth-page .main > .container {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

/* 로고 — 위쪽 가운데 */
body.auth-page .main > .container > a:first-child {
    margin-bottom: 1.75rem !important;
}

body.auth-page .main > .container > a:first-child img {
    width: 13.5rem !important;
    max-width: 70vw;
    height: auto;
}

/* 카드 */
body.auth-page .card {
    background-color: var(--auth-card-bg);
    border: 1px solid var(--auth-card-border);
    border-radius: 1rem;
    box-shadow: var(--auth-card-shadow);
    overflow: hidden;
}

body.auth-page .card .display-5 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--auth-title);
    letter-spacing: -.01em;
}

body.auth-page .ns-copyright {
    color: var(--auth-muted) !important;
}

/* ---- 로그인: 넓은 화면에서 [로그인 폼 | 모바일 앱 안내] 2단 ---- */
body.auth-page .auth-wide {
    max-width: 30rem;
}

body.auth-page .auth-app-pane {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--auth-card-border);
}

body.auth-page .auth-app-pane .auth-app-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--auth-title);
    margin-bottom: .25rem;
}

body.auth-page .auth-app-pane .auth-qr {
    display: inline-block;
    padding: .5rem;
    background: #fff;           /* QR 은 다크에서도 흰 바탕이어야 읽힌다 */
    border: 1px solid var(--auth-card-border);
    border-radius: .75rem;
}

body.auth-page .auth-app-pane .auth-qr img {
    display: block;
    width: 132px;
    max-width: 100%;
    cursor: pointer;
}

@media (min-width: 992px) {
    body.auth-page .auth-wide {
        max-width: 52rem;
    }

    body.auth-page .auth-wide .card-body {
        padding: 0;
    }

    body.auth-page .auth-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 19rem;
    }

    body.auth-page .auth-form-pane {
        padding: 2.5rem 2.75rem;
    }

    body.auth-page .auth-app-pane {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 0;
        padding: 2.5rem 1.75rem;
        border-top: 0;
        border-left: 1px solid var(--auth-card-border);
        background-color: var(--auth-pane-bg);
    }
}

/* ---- 로그아웃 등 한 장짜리 확인 카드 ---- */
body.auth-page .auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* rem 이 아니라 px — 루트 글자 크기(13px·배율 조절)에 따라 45.5px 같은 소수 크기가 되면
       원과 그림이 반 픽셀씩 어긋나 가운데가 아닌 것처럼 보인다 */
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--auth-brand);
    background-color: var(--auth-pane-bg);
    border: 1px solid var(--auth-card-border);
}

/* 아이콘은 인라인 SVG(16×16 상자, 그림이 상자 정중앙) — flex 가운데 정렬로 원 중심과 일치 */
body.auth-page .auth-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

body.auth-page .auth-confirm-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--auth-title);
}

body.auth-page .auth-confirm-sub {
    color: var(--auth-muted);
    margin-bottom: 1.5rem;
}