/* 로그인 화면 — 왼쪽 브랜드 면(우주 모션) + 오른쪽 입력. 다른 화면에서는 쓰지 않는다 */
/* 스크롤바 자리(app.css scrollbar-gutter)가 회색 띠로 남지 않게 */
html:has(.qp){scrollbar-gutter:auto;background:var(--surface)}
.qp{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,1fr);background:var(--surface)}

/* 브랜드 면: 캔버스(우주 · 데이터 행성 — public/js/login-anim.js) 위에 이름 · 문구 · 로고 */
.qp-brand{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;padding:32px 40px 28px;background:#050A18}
.qp-brand>*{position:relative;z-index:1}
.qp-brand>.qp-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.qp-word{font-size:24px;font-weight:800;letter-spacing:.08em;line-height:1;display:flex;align-items:center;gap:10px}
.qp-word b{color:#7DE6FF;font-weight:800;text-shadow:0 0 18px rgba(111,227,255,.55)}
.qp-word i{width:7px;height:7px;border-radius:50%;background:#7DE6FF;box-shadow:0 0 0 4px rgba(111,227,255,.16),0 0 12px #6FE3FF}
.qp-copy{margin-top:auto;pointer-events:none;animation:qpUp .9s cubic-bezier(.2,.7,.2,1) 2.8s backwards}
.qp-copy h2{font-size:clamp(22px,2.3vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.35;margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.qp-copy p{margin:0;color:rgba(255,255,255,.6);font-size:14.5px}
.qp-foot{display:flex;align-items:center;gap:16px;margin-top:40px;font-size:12px;color:rgba(255,255,255,.45)}
.qp-foot img{height:28px;width:auto;display:block}
@keyframes qpUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qp-copy{animation:none}}

/* 입력 면 */
.qp-main{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 32px}
.qp-form{width:min(340px,100%);display:flex;flex-direction:column;gap:18px}
.qp-form h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0}
.qp-form .sub{color:var(--muted);font-size:13.5px}
.qp-form .form-control{height:42px}
.qp-form .btn-primary{height:44px;font-weight:600}
.qp-legal{display:none}

@media (max-width:900px){
  .qp{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .qp-brand{height:300px;padding:20px}
  .qp-word{font-size:20px}
  .qp-copy,.qp-foot{display:none}
  .qp-main{justify-content:flex-start;padding:28px 16px 24px}
  .qp-legal{display:block;margin-top:auto;padding-top:28px;font-size:12px;color:var(--faint);text-align:center}
}