@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root{
  --accent:#2b6cff; --accent-2:#1e51d6; --ink:#1b2433; --ink-2:#5b6678;
  --muted:#8a93a6; --line:#e6e9f0; --ok:#16a34a; --err:#dc2626;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:#0b1220;-webkit-font-smoothing:antialiased}
.ico{display:inline-block;vertical-align:middle;flex:none}

.auth-wrap{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}

/* 1열 브랜드 */
.auth-brand{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1200px 600px at 0% 0%,#1c2f59 0%,#0e1830 45%,#0a1326 100%)}
.is-front .auth-brand{background:radial-gradient(1200px 600px at 0% 0%,#10325f 0%,#0c1d3a 45%,#081427 100%)}
.auth-brand-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:64px 60px;max-width:560px;margin-left:auto}
.brand-logo{display:flex;align-items:center;gap:13px;margin-bottom:38px}
.brand-logo .brand-mark{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#5b8bff);box-shadow:0 8px 24px rgba(43,108,255,.5)}
.brand-name{font-size:26px;font-weight:800;letter-spacing:.5px}
.brand-headline{font-size:30px;line-height:1.32;font-weight:700;margin:0 0 34px;letter-spacing:-.4px}
.brand-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.brand-features li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:#c8d4ea}
.brand-features li .ico{color:#5b8bff;background:rgba(91,139,255,.16);border-radius:50%;padding:5px;width:30px;height:30px}
.brand-glow{position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:-120px;
  background:radial-gradient(circle,rgba(43,108,255,.34),transparent 62%);z-index:1}
.brand-car{position:absolute;right:-30px;bottom:-40px;color:rgba(255,255,255,.05);z-index:1}

/* 2열 폼 */
.auth-form-col{display:flex;align-items:center;justify-content:center;background:#f4f6fb;padding:40px 24px}
.auth-form-box{width:100%;max-width:392px;background:#fff;border-radius:18px;padding:42px 38px;
  box-shadow:0 24px 60px rgba(8,16,33,.16)}
.auth-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--accent-2);
  background:#e8f0ff;padding:6px 12px;border-radius:20px;margin-bottom:18px}
.auth-title{font-size:25px;font-weight:800;margin:0 0 7px}
.auth-sub{color:var(--muted);font-size:13.5px;margin:0 0 28px}

.auth-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field-input{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;
  padding:0 13px;background:#fff;transition:.15s}
.field-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,108,255,.13)}
.field-input .field-ico{color:var(--muted)}
.field-input input{flex:1;border:0;outline:none;padding:13px 0;font-size:14.5px;font-family:inherit;background:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:11px;
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;border:0;transition:.15s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(43,108,255,.32)}
.btn-primary:hover{background:var(--accent-2)}
.btn-block{width:100%;margin-top:6px}

.auth-back{display:inline-block;margin-top:24px;color:var(--muted);font-size:13px}
.auth-back:hover{color:var(--accent)}

.flashes{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.flash{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:500}
.flash-error{background:#fdecec;color:var(--err)}
.flash-success{background:#e9f7ef;color:var(--ok)}
.flash-info{background:#e8f0ff;color:var(--accent-2)}

@media(max-width:880px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-form-col{min-height:100vh}
}