:root{
  --bg1: #0b1020;
  --bg2: #0f1a3a;
  --card: rgba(255,255,255,.92);
  --card-border: rgba(255,255,255,.18);
  --text: #0f172a;
  --muted: #64748b;
  --ring: rgba(99,102,241,.25);
  --accent1: #667eea;
  --accent2: #f5576c;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  color:var(--text);
  line-height:1.5;
  /* font-family만 Pretendard로 변경 */
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(102,126,234,.55), transparent 60%),
    radial-gradient(900px 600px at 85% 75%, rgba(245,87,108,.45), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  overflow:hidden;
}


/* 은근한 노이즈(고급 느낌) */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 18px 18px;
  opacity:.25;
  pointer-events:none;
}

.login-wrap{
  width:100%;
  max-width:420px;
  animation: fadeIn .6s ease-out;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

.login-wrap h1{
  text-align:center;
  color: rgba(255,255,255,.92);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 14px;
}

/* 제목 아래 한 줄 설명을 넣고 싶으면(선택): h1 아래에 p 태그 추가 */
.login-wrap .subtitle{
  text-align:center;
  color: rgba(255,255,255,.65);
  font-size:.95rem;
  margin-bottom: 22px;
}

.login-box{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.35) inset;
  padding: 26px;
  position:relative;
  backdrop-filter: blur(12px);
}



.login-box label{
  display:block;
  margin-top: 14px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: .92rem;
  color: #1f2937;
}

.login-box label:first-of-type{ margin-top: 6px; }

.login-box input{
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.9);
  font-size: 1rem;
  transition: .18s ease;
}

.login-box input:focus{
  outline:none;
  border-color: rgba(99,102,241,.65);
  box-shadow: 0 0 0 4px var(--ring);
  background: #fff;
}

.login-box input::placeholder{ color:#94a3b8; }

.login-box button{
  width:100%;
  margin-top: 18px;
  padding: 14px 16px;
  border:0;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 800;
  font-size: 1.05rem;
  color:white;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 16px 35px rgba(245,87,108,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.login-box button:hover:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 22px 45px rgba(245,87,108,.34);
}

.login-box button:active:not(:disabled){
  transform: translateY(0);
}

#msg{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(254,242,242,.85);
  color: #991b1b;
}

/* 모바일 */
@media (max-width:480px){
  .login-wrap{ max-width: 100%; }
  .login-box{ padding: 22px; }
}