@charset "UTF-8";
/* CUST 로그인 리뉴얼 — 앱 셸(탑바) + 라이트/다크/딥블루 3테마. 자체 완결형(theme.css 비의존). */

:root {
    --mf-bg: #eef1f6;
    --mf-card-bg: #ffffff;
    --mf-topbar-bg: #ffffff;
    --mf-fg: #222a3a;
    --mf-muted: #6c7587;
    --mf-border: #e2e6ef;
    --mf-field: #f4f6fa;
    --mf-brand: #2f6bff;
    --mf-brand-2: #6f9bff;
}

[data-theme="dark"] {
    --mf-bg: #0f131a;
    --mf-card-bg: #1a2029;
    --mf-topbar-bg: #1a2029;
    --mf-fg: #d6dbe6;
    --mf-muted: #8a93a5;
    --mf-border: #2a3140;
    --mf-field: #121822;
    --mf-brand: #3b78ff;
}

[data-theme="deep"] {
    --mf-bg: #081427;
    --mf-card-bg: #0e1f3d;
    --mf-topbar-bg: #0a1830;
    --mf-fg: #dce6f7;
    --mf-muted: #8aa0c8;
    --mf-border: #1c3360;
    --mf-field: #0a1a35;
    --mf-brand: #2f6bff;
    --mf-accent: #38bdf8;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mf-bg);
    color: var(--mf-fg);
    font-family: -apple-system, "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
}

/* ── 탑바 ── */
.login-topbar {
    height: 56px; flex: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    background: var(--mf-topbar-bg);
    border-bottom: 1px solid var(--mf-border);
}
.login-topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; }
.login-topbar .brand svg { width: 26px; height: 26px; }
.login-topbar .actions { display: flex; align-items: center; gap: 4px; }
.login-topbar .btn-icon {
    border: 0; background: transparent; color: var(--mf-muted);
    font-size: 18px; width: 38px; height: 38px; border-radius: 8px;
    cursor: pointer; display: grid; place-items: center;
}
.login-topbar .btn-icon:hover { background: var(--mf-field); }
.theme-menu .dropdown-item.active { background: var(--mf-brand); color: #fff; }

/* ── 본문/카드 ── */
.login-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
    width: 100%; max-width: 380px;
    background: var(--mf-card-bg);
    border: 1px solid var(--mf-border);
    border-radius: 16px;
    padding: 30px;
}
.login-card .head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-card .head svg { width: 30px; height: 30px; flex: none; }
.login-card .head h1 { font-size: 20px; font-weight: 500; margin: 0; color: var(--mf-fg); }
.login-card .sub { font-size: 13px; color: var(--mf-muted); margin: 4px 0 18px; }

/* ── 계정유형/유지일수 세그 ── */
.lg-seg { display: flex; gap: 6px; margin-bottom: 4px; }
.lg-seg .item {
    flex: 1; text-align: center; font-size: 12.5px; padding: 9px 4px;
    border-radius: 9px; border: 1px solid var(--mf-border);
    color: var(--mf-muted); cursor: pointer; user-select: none;
}
.lg-seg .item.on { background: var(--mf-brand); color: #fff; border-color: var(--mf-brand); }

.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lg-chips .chip {
    font-size: 12.5px; padding: 7px 14px; border-radius: 20px;
    border: 1px solid var(--mf-border); color: var(--mf-muted); cursor: pointer; user-select: none;
}
.lg-chips .chip.on { background: var(--mf-brand); color: #fff; border-color: var(--mf-brand); }

/* ── 필드/버튼 ── */
.lg-label { display: block; font-size: 12px; color: var(--mf-muted); margin: 16px 0 6px; }
.lg-row { display: flex; gap: 8px; }
.lg-input, .lg-select {
    height: 42px; border-radius: 9px; border: 1px solid var(--mf-border);
    background: var(--mf-field); color: var(--mf-fg); padding: 0 12px; font-size: 14px; outline: none;
}
.lg-input { flex: 1; }
.lg-select { width: 100%; }
.lg-input:focus, .lg-select:focus { border-color: var(--mf-brand); box-shadow: 0 0 0 3px rgba(47,107,255,.22); }

.lg-btn {
    height: 42px; border: 0; border-radius: 9px; background: var(--mf-brand); color: #fff;
    font-size: 14px; font-weight: 500; padding: 0 18px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.lg-btn.block { width: 100%; }
.lg-btn:disabled, .lg-btn.is-busy { opacity: .7; cursor: default; }
.lg-btn .spin { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; }
.lg-btn.is-busy .spin { display: inline-block; animation: lgspin .7s linear infinite; }
@keyframes lgspin { to { transform: rotate(360deg); } }

.lg-hint { font-size: 12px; color: var(--mf-muted); margin-top: 14px; display: flex; align-items: center; gap: 6px; }
.lg-hint .bi { font-size: 14px; }
.lg-center { text-align: center; }