/* assets/css/auth.css */

.page-auth .auth-wrap{
  padding: 50px 0;
  min-height: calc(100vh - 200px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-card{
  width:min(520px, calc(100% - 32px));
  border-radius: 18px;
  padding: 28px;
  border: 1px solid rgb(255 255 255 / 19%);
  background: rgb(171 171 171 / 24%);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
}

.auth-head .kicker{
  font-size: 16px;
  letter-spacing:.08em;
  opacity:.7;
  text-transform: uppercase;
}
.auth-title{ margin: 6px 0 8px; font-size: 24px; }
.auth-desc{ margin: 0 0 18px; opacity: .85; line-height: 1.6; }

.auth-form .field{ display:block; margin: 12px 0; }
.auth-form .field span{ display:block; font-size: 13px; margin-bottom: 8px; opacity:.85; }
.auth-form .input{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius: 12px;
  /*border:1px solid rgba(0,0,0,.12);*/
  outline:none;
}
.auth-form .input:focus{ border-color: rgba(0,0,0,.35); }

.auth-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin: 10px 0 16px;
  flex-wrap: wrap;
}
.auth-check{ display:flex; align-items:center; gap:8px; font-size: 13px; opacity:.9; }

.auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 14px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.12);
  background: #111;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  font-size: 16px;
}
.auth-btn.block{ width:100%; }
.auth-btn.ghost{
  background: #436aff24;
  color: #adb2c7;
}

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 18px 0;
  opacity:.7;
}
.divider:before,.divider:after{
  content:"";
  flex:1;
  height:1px;
  background: rgb(232 232 232 / 65%);
}
.social-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.auth-foot{
  margin: 16px 0 0;
  font-size: 13px;
  opacity:.9;
  text-align:center;
}

.auth-alert{
    margin: 12px 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgb(252 252 252 / 25%);
    background: rgb(255 255 255 / 5%);
    color: #ff9dae;
    font-size: 13px;
    line-height: 1.4;
}
/* SNS 버튼 2열 고정 */
.social-grid.social-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* ✅ 모바일에서도 2열 */
  gap: 10px;
}

/* 모바일에서 버튼이 너무 두꺼워 보이면 살짝 조정 */
@media (max-width: 420px){
  .social-grid.social-2col .auth-btn{
    height: 44px;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 12px;
  }
}