/* 로그인 흐름 공용 2단(히어로+카드) 레이아웃 — 로그인·2FA·비번변경 등 로그인 완료까지 동일 디자인 유지.
   각 페이지는 자신의 카드 내부 스타일을 그대로 두고, 이 파일은 바깥 레이아웃과 왼쪽 히어로만 제공한다. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Pretendard,system-ui,sans-serif;color:#222d40;background:#f4f6fb}
.auth{display:flex;min-height:100vh}
.auth-hero{position:relative;flex:0 0 58%;min-width:0;overflow:hidden;color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,#0a0a1a 0%,#1e1b4b 22%,#312e81 44%,#6d28d9 66%,#be185d 88%,#581c87 100%);background-size:320% 320%;animation:heroShift 13s ease infinite}
@keyframes heroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.auth-hero .hero-glow{position:absolute;border-radius:50%;will-change:transform}
.auth-hero .g1{width:600px;height:600px;top:0;left:0;background:radial-gradient(circle,rgba(99,102,241,.5) 0%,transparent 70%);animation:glow1 14s ease-in-out infinite}
.auth-hero .g2{width:520px;height:520px;bottom:0;right:0;background:radial-gradient(circle,rgba(236,72,153,.42) 0%,transparent 70%);animation:glow2 18s ease-in-out infinite}
.auth-hero .g3{width:420px;height:420px;top:45%;left:30%;background:radial-gradient(circle,rgba(56,189,248,.32) 0%,transparent 70%);animation:glow3 16s ease-in-out infinite}
@keyframes glow1{0%,100%{transform:translate(-33%,-33%) scale(1)}50%{transform:translate(-16%,-20%) scale(1.25)}}
@keyframes glow2{0%,100%{transform:translate(33%,33%) scale(1)}50%{transform:translate(18%,22%) scale(1.2)}}
@keyframes glow3{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-38%,-62%) scale(1.3);opacity:.9}}
.auth-hero .hero-grid{position:absolute;inset:0;opacity:.05;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:40px 40px}
.auth-hero .hero-top,.auth-hero .hero-mid,.auth-hero .hero-foot{position:relative;z-index:2}
.auth-hero .hero-tr{position:absolute;top:24px;right:24px;z-index:3;text-align:right;color:#fff}
.auth-hero .hc-time{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.auth-hero .hc-date{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px}
.auth-hero .brand{display:inline-flex;align-items:center;gap:10px}
.auth-hero .brand .mk{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:linear-gradient(135deg,#7c5cff,#5b34e8);color:#fff;font-weight:800;font-size:15px}
.auth-hero .brand .wm{display:flex;flex-direction:column;line-height:1}
.auth-hero .brand .wm b{font-size:16px;font-weight:800;letter-spacing:-.02em;color:#f7f5ff}
.auth-hero .brand .wm span{margin-top:4px;font-size:10.5px;font-weight:600;color:rgba(247,245,255,.72)}
.auth-hero .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.85);margin-bottom:22px}
.auth-hero .pulse-dot{width:7px;height:7px;border-radius:50%;background:#34d399;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.auth-hero .hero-mid h2{font-size:44px;line-height:1.12;font-weight:800;margin:0 0 18px;letter-spacing:-1.5px}
.auth-hero .hero-accent{background:linear-gradient(90deg,#fbbf24,#f59e0b,#fbbf24,#fcd34d);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 3s linear infinite}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
.auth-hero .hero-mid p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.6;margin:0}
.auth-hero .hero-foot{font-size:12px;color:rgba(255,255,255,.5)}
.auth-form{flex:1 1 42%;display:flex;align-items:center;justify-content:center;padding:40px 36px;background:#f4f6fb;overflow:auto}
.relogin{text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid #eef2f8}
.relogin a{color:#64718a;font-size:13px;font-weight:600;text-decoration:none}
.relogin a:hover{color:#5b34e8}
@media (max-width:1080px){.auth-hero{display:none}.auth-form{flex:1 1 100%}}
@media (max-width:480px){.auth-form{padding:24px 16px}}