body.login-page{
  min-height:100vh;
  background:#edf4fb;
  color:var(--text);
}
.login-shell{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(135deg,rgba(15,107,199,.76),rgba(0,163,131,.7)),
    url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1600&q=80') center/cover fixed;
}
.login-brand-panel{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:2.6rem 1.25rem 0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.login-brand{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  width:max-content;
  font-family:'Nunito',sans-serif;
  color:white;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,50,95,.16);
}
.login-brand img{
  width:34px;
  height:34px;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}
.login-brand strong{
  font-size:1.65rem;
  font-weight:900;
  letter-spacing:0;
}
.login-brand span{
  font-size:1rem;
  font-weight:900;
  color:rgba(255,255,255,.78);
}
.login-panel{
  width:100%;
  max-width:430px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding:1.25rem 1.25rem 2rem;
}
.join-panel{
  max-width:520px;
}
.login-card{
  width:100%;
  padding:1.6rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 24px 70px rgba(40,67,103,.12);
  backdrop-filter:blur(10px);
}
.join-card{
  padding:1.65rem;
}
.login-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.65rem;
}
.login-card-head p{
  margin-bottom:.2rem;
  font-family:'Nunito',sans-serif;
  font-size:.72rem;
  font-weight:900;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.login-card-head h1{
  font-size:1.65rem;
  font-weight:900;
  letter-spacing:0;
}
.join-subtitle{
  display:block;
  margin-top:.35rem;
  color:var(--text2);
  font-size:.78rem;
  font-weight:700;
  line-height:1.5;
}
.login-card-head a{
  flex:0 0 auto;
  padding:.38rem .72rem;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text2);
  font-size:.78rem;
  font-weight:800;
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.login-form label{
  display:flex;
  flex-direction:column;
  gap:.42rem;
}
.login-form label span{
  font-size:.78rem;
  font-weight:800;
  color:var(--text);
}
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"],
.login-form input[type="tel"]{
  width:100%;
  height:48px;
  border:1px solid #d9e4f2;
  border-radius:10px;
  background:#fbfdff;
  padding:0 .9rem;
  color:var(--text);
  font-size:.92rem;
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.login-form input:focus{
  border-color:var(--blue);
  background:white;
  box-shadow:0 0 0 4px rgba(27,142,240,.12);
}
.field-with-button{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  gap:.45rem;
}
.field-with-button button{
  height:48px;
  border:1px solid var(--blue);
  border-radius:10px;
  background:white;
  color:var(--blue);
  font-size:.76rem;
  font-weight:900;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.field-with-button button:hover{
  background:var(--blue);
  color:white;
}
.field-with-button button:disabled{
  border-color:#cdd9e8;
  background:#edf3fa;
  color:#8a98ab;
  cursor:not-allowed;
}
.field-with-button button.is-verified,
.field-with-button button.is-verified:disabled{
  border-color:#00a383;
  background:#00a383;
  color:white;
  box-shadow:0 8px 18px rgba(0,163,131,.18);
}
.social-join-alert{
  padding:.85rem;
  border:1px solid #cfe0f4;
  border-radius:10px;
  background:#f5f9ff;
}
.social-join-alert strong{
  display:block;
  color:var(--text);
  font-size:.86rem;
  font-weight:900;
  line-height:1.35;
}
.social-join-alert p{
  margin:.28rem 0 0;
  color:var(--text2);
  font-size:.74rem;
  font-weight:700;
  line-height:1.55;
}
.social-join-alert.naver{
  border-color:rgba(3,199,90,.28);
  background:rgba(3,199,90,.08);
}
.social-join-alert.kakao{
  border-color:rgba(234,210,0,.5);
  background:rgba(254,229,0,.16);
}
.social-join-alert.google{
  border-color:rgba(116,119,117,.3);
  background:#fff;
}
.social-join-alert.apple{
  border-color:rgba(17,24,39,.18);
  background:#f7f8fa;
}
.verification-code-panel.is-hidden,
.verification-status.is-hidden{
  display:none;
}
.verification-status{
  margin-top:-.35rem;
  color:#8a98ab;
  font-size:.74rem;
  font-weight:700;
  line-height:1.45;
}
.verification-status.is-success{
  color:#00a383;
}
.verification-status.is-warning{
  color:#d27d00;
}
.join-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.join-agreements{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin:.1rem 0 .35rem;
  padding:.85rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fbff;
}
.join-agreements .check-label{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:.42rem;
  cursor:pointer;
}
.join-agreements .agree-all{
  margin-bottom:.2rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--border);
}
.join-agreements .agree-all span{
  color:var(--text);
  font-weight:900;
}
.join-agreements a{
  color:var(--text2);
  text-decoration:underline;
  text-underline-offset:3px;
}
.join-agreements a:hover{
  color:var(--blue);
}
.login-options{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:.1rem 0 .25rem;
}
.login-options .check-label{
  flex-direction:row;
  align-items:center;
  gap:.38rem;
  cursor:pointer;
}
.login-message{
  margin:-.1rem 0 .1rem;
  color:#d27d00;
  font-size:.76rem;
  font-weight:800;
  line-height:1.45;
}
.login-message.is-hidden{
  display:none;
}
.login-message.is-success{
  color:#00a383;
}
.login-helper{
  margin:0;
  color:#6b7c8f;
  font-size:.82rem;
  line-height:1.65;
}
.check-label input{
  width:16px;
  height:16px;
  accent-color:var(--blue);
}
.check-label span{
  color:var(--text2);
  font-size:.78rem;
  font-weight:700;
}
.login-submit{
  width:100%;
  height:50px;
  border:0;
  border-radius:10px;
  background:var(--blue);
  color:white;
  font-size:.95rem;
  font-weight:900;
  cursor:pointer;
  transition:background .15s,transform .15s;
}
.login-submit:hover{
  background:var(--blue-dark);
  transform:translateY(-1px);
}
.login-submit:disabled{
  background:#91b9dd;
  cursor:not-allowed;
  transform:none;
}
.auth-link-button{
  display:block;
  text-align:center;
  text-decoration:none;
}
.login-links{
  display:flex;
  justify-content:center;
  gap:.85rem;
  margin:1rem 0 1.25rem;
}
.login-links a{
  color:var(--text2);
  font-size:.8rem;
  font-weight:700;
}
.login-links a:hover{
  color:var(--blue);
}
.social-divider{
  position:relative;
  display:flex;
  justify-content:center;
  margin-bottom:.9rem;
  color:#8a98ab;
  font-size:.76rem;
  font-weight:800;
}
.social-divider::before{
  content:'';
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:var(--border);
}
.social-divider span{
  position:relative;
  z-index:1;
  padding:0 .75rem;
  background:white;
}
.social-list{
  display:grid;
  grid-template-columns:1fr;
  gap:.55rem;
}
.social-button{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid #d9e4f2;
  border-radius:10px;
  background:white;
  color:var(--text);
  font-size:.83rem;
  font-weight:800;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.social-button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(38,61,90,.1);
  border-color:#c7d8eb;
}
.social-mark{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-family:'Nunito',sans-serif;
  font-size:.78rem;
  font-weight:900;
}
.social-button.naver{
  background:#03c75a;
  border-color:#03c75a;
  color:white;
}
.social-button.naver .social-mark{background:#03c75a;color:white}
.social-button.kakao{background:#fee500;border-color:#ead200}
.social-button.kakao .social-mark{background:transparent;color:#191919}
.social-button.google{
  border-color:#747775;
  color:#1f1f1f;
  font-family:Roboto,'Noto Sans KR',sans-serif;
  font-weight:700;
}
.social-button.google .social-mark{background:white;color:#4285f4;border:0}
.social-button.apple{background:#111827;color:white;border-color:#111827}
.social-button.apple .social-mark{background:transparent;color:white}
.social-mark img{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
}
.social-button.apple .social-mark img{
  width:15px;
  height:15px;
  filter:invert(1);
}
.social-button.naver .social-mark img{
  width:15px;
  height:15px;
}
.login-notice{
  margin-top:.85rem;
  color:#7b8798;
  font-size:.74rem;
  line-height:1.55;
  text-align:center;
}
.auth-copyright{
  width:100%;
  margin-top:1rem;
  text-align:center;
}
.auth-copyright p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:.68rem;
  font-weight:700;
  line-height:1.45;
  text-shadow:0 1px 8px rgba(0,50,95,.18);
}
@media(max-width:520px){
  .login-card{
    padding:1.35rem;
    border-radius:12px;
  }
  .login-card-head{
    align-items:center;
  }
  .login-card-head h1{
    font-size:1.38rem;
  }
  .login-options{
    flex-direction:column;
    align-items:flex-start;
    gap:.55rem;
  }
  .field-with-button,
  .join-grid{
    grid-template-columns:1fr;
  }
}