/* 로그인·가입·이메일 확인·재설정 페이지 공통. 로그인 없이 열리는 화면이라 app.css 와 이 파일만 쓴다. */
.gate{max-width:400px;margin:10vh auto 0;padding:0 16px 40px}
.gate h1{font-size:1.25rem;margin-bottom:4px}
.gate h2{font-size:1rem;margin:0 0 6px}
.gate .sub{margin-bottom:20px}
.gate .field{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-bottom:14px}
.gate .field label{font-size:0.8125rem;color:var(--muted)}
.gate input{width:100%;box-sizing:border-box;padding:10px 12px;font-size:0.9375rem}
.gate .btn{width:100%;justify-content:center;padding:11px}
.gate .links{margin:12px 0 0;font-size:0.8125rem;text-align:center}
.gate .callout{margin-top:12px}
.gate .panel + .panel{margin-top:12px}

/* 휴대폰: 입력창 16px (iOS 가 글자가 작으면 화면을 자동으로 확대한다), 조작 요소는 손가락 크기 */
@media (max-width:640px){
  .gate{margin-top:6vh;padding-bottom:var(--sp-8)}
  .gate input{font-size:16px;padding:12px}
  .gate .btn{min-height:48px}
  .gate h1{font-size:1.1875rem}
}
/* 화면이 낮으면(가로로 눕힌 폰, 키보드가 올라온 화면) 위 여백을 줄인다 */
@media (max-height:640px){
  .gate{margin-top:var(--sp-5)}
}