/* ─────────────────────────────────────────────────
 * auth.css — 로그인 / 회원가입 페이지 스타일
 * admin.lichtenbrake.com 톤 (네이비 블루 + 화이트 카드)
 * ───────────────────────────────────────────────── */

:root {
    --auth-bg:        #f5f6f8;
    --auth-card-bg:   #ffffff;
    --auth-text:      #1f2937;
    --auth-text-sub:  #6b7280;
    --auth-border:    #e5e7eb;
    --auth-primary:   #1e40af;
    --auth-primary-h: #1e3a8a;
    --auth-secondary: #4b5563;
    --auth-secondary-h: #374151;
    --auth-ok:        #059669;
    --auth-err:       #dc2626;
    --auth-input-bg:  #f9fafb;
}

* { box-sizing: border-box; }

body.auth-body {
    margin: 0;
    padding: 0;
    background: var(--auth-bg);
    color: var(--auth-text);
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    padding: 40px 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
}

/* 브랜드 헤더 */
.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-brand-name {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--auth-primary);
}

.auth-brand-sub {
    font-size: 12px;
    color: var(--auth-text-sub);
    margin-top: 4px;
}

.auth-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 24px 0;
    color: var(--auth-text);
}

.auth-notice {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #1e40af;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* 단계 */
.auth-step {
    display: none;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--auth-border);
}
.auth-step:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.auth-step.active {
    display: block;
}

.auth-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-text);
    margin-bottom: 6px;
    margin-top: 12px;
}
.auth-label:first-child {
    margin-top: 0;
}

.auth-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.auth-input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--auth-text);
    outline: none;
    transition: border-color .15s, background .15s;
}
.auth-input:focus {
    border-color: var(--auth-primary);
    background: white;
}
.auth-input-full {
    width: 100%;
}

.auth-timer {
    color: var(--auth-err);
    font-size: 13px;
    font-weight: 600;
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.auth-hint {
    font-size: 12px;
    color: var(--auth-text-sub);
    margin-top: 4px;
    margin-bottom: 8px;
}

/* 버튼 */
.auth-btn {
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.auth-btn-primary {
    background: var(--auth-primary);
    color: white;
}
.auth-btn-primary:hover {
    background: var(--auth-primary-h);
}
.auth-btn-secondary {
    background: var(--auth-secondary);
    color: white;
}
.auth-btn-secondary:hover {
    background: var(--auth-secondary-h);
}
.auth-btn-full {
    width: 100%;
    margin-top: 12px;
}

/* 메시지 */
.auth-msg-slot {
    min-height: 4px;
    margin-top: 8px;
}
.auth-msg {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid;
}
.auth-msg.ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: var(--auth-ok);
}
.auth-msg.err {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--auth-err);
}
.auth-msg a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* 푸터 */
.auth-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--auth-text-sub);
}
.auth-footer a {
    color: var(--auth-primary);
    text-decoration: none;
    margin: 0 8px;
}
.auth-footer a:hover {
    text-decoration: underline;
}
.auth-divider {
    color: var(--auth-border);
}

/* ─────────────────────────────────────────────────
 * 로그인 전용 — 2단 스플릿 (Login.dc.html 이식)
 * signup 은 위 공용 카드 스타일 유지. 아래는 login 한정 클래스.
 * ───────────────────────────────────────────────── */

.login-split-wrap { min-height: 100vh; }

.login-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-family: 'Noto Sans KR', system-ui, sans-serif;
}

/* 좌 브랜드 패널 */
.login-brand {
    position: relative;
    overflow: hidden;
    background: #0f1c4d;
    color: #fff;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 60px),
        repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 60px);
}
.login-brand > * { position: relative; }

.login-brand-logo {
    font-family: Archivo, sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 3px;
}
.login-brand-mid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.login-brand-headline {
    font-family: Archivo, sans-serif;
    font-weight: 800;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -.5px;
}
.login-brand-sub {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.65);
}
.login-brand-copy {
    font-size: 12px;
    color: rgba(255,255,255,.4);
}

/* Aı 노란점 표기 */
.ai-mark { white-space: nowrap; }
.ai-i { position: relative; display: inline-block; }
.ai-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: .52em;
    width: .18em;
    height: .18em;
    border-radius: 50%;
    background: #ffc531;
}

/* 우 폼 패널 */
.login-form-panel {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}
.login-form {
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.login-mobile-logo {
    display: none;
    font-family: Archivo, sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 3px;
    color: #0f1c4d;
}
.login-form-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}
.login-form-title {
    font-size: 24px;
    font-weight: 700;
    color: #141a30;
}
.login-form-desc {
    font-size: 13px;
    color: #7a8299;
}

.login-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.login-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.login-label {
    font-size: 13px;
    font-weight: 500;
    color: #3a4257;
}
.login-forgot {
    font-size: 12px;
    color: #2a4fd0;
    text-decoration: none;
}
.login-forgot:hover { color: #1d3aa3; }

.login-input {
    height: 48px;
    border: 1px solid #d7dceb;
    border-radius: 8px;
    background: #fff;
    padding: 0 14px;
    font-size: 15px;
    font-family: inherit;
    color: #1a2036;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.login-input::placeholder { color: #9aa3b8; }
.login-input:focus {
    border-color: #2a4fd0;
    box-shadow: 0 0 0 3px rgba(42,79,208,.12);
}

.login-btn {
    height: 50px;
    border: none;
    border-radius: 8px;
    background: #1e3fae;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}
.login-btn:hover { background: #16308c; }

.login-signup {
    font-size: 13px;
    color: #7a8299;
    text-align: center;
}
.login-signup a {
    color: #2a4fd0;
    font-weight: 500;
    text-decoration: none;
}
.login-signup a:hover { color: #1d3aa3; }

/* 모바일 — 좌 패널 숨김, 폼 전체폭 */
@media (max-width: 768px) {
    .login-split { grid-template-columns: 1fr; }
    .login-brand { display: none; }
    .login-form-panel { padding: 32px 20px; }
    .login-mobile-logo { display: block; }
}