/*
 * 로그인(index.html, 반응형 한 장) — beta2: 시안 A 색 · B 모양(큰 라운드 카드·pill 버튼) · 사용성 원칙(큰 글자·큰 입력칸).
 * 계약: team/contracts/beta2-ui.md §9. 다크 지원(index.html 은 html.dark-ok) — 하드코딩 색 없음.
 * 로고: 데스크톱 폭 140px(높이 180, 2026-09-30 사용자 지시), 창이 낮으면 로고만 줄인다(하한 96px) — 세로 스크롤 없음.
 */
body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
body > div{width:100%;max-width:420px;}
.brand{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;}
.brand img{width:auto;aspect-ratio:758/976;display:block;
  height:clamp(96px, calc(100vh - 500px), 180px);
  height:clamp(96px, calc(100dvh - 500px), 180px);}
/* 브랜드 영문명 — 유지하되 눈에 덜 띄게(작은 보통 굵기, 14px 하한) */
.brand p{margin:10px 0 0;font-size:var(--t-xs);font-weight:var(--w-reg);color:var(--ink-3);letter-spacing:.02em;}
.card{width:100%;background:var(--panel);border:0;border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden;}
.card-h{padding:26px 28px 2px;}
.card-t{margin:0;font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-0.015em;}
.card-b{padding:16px 28px 24px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink);margin-bottom:7px;}
.input{width:100%;height:52px;padding:0 16px;border:1.5px solid var(--line-3);border-radius:var(--r-md);
  background:var(--panel);font-size:17px;font-family:inherit;color:var(--ink);outline:none;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.input::placeholder{color:var(--ink-4);}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring);}
.btn{height:var(--ctl-lg);border-radius:var(--r-btn);border:0;background:var(--fill);
  font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;}
.btn.pri{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-brand);width:100%;margin-top:6px;}
.btn.pri:hover{background:var(--accent-hover);}
.btn.pri:active{background:var(--accent-press);}
.btn:disabled{opacity:.7;cursor:not-allowed;}
.hint{margin:16px 0 0;text-align:center;font-size:var(--t-xs);color:var(--ink-3);line-height:1.55;}
.hint .m-br{display:none;}
.error{margin:12px 0 0;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--dang);text-align:center;}
.success{padding:2px 0;text-align:center;}
.success-msg{margin:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.6;}
:root.dark-ok[data-theme=dark] .brand img{filter:brightness(1.08);}

/* 회원 가입 진입 — "처음이신가요? [회원 가입]" (계약 team/contracts/signup.md §4). 로그인 버튼보다 한 단계 약하게(채움 버튼). */
.su-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.su-q{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);}
.btn.su-go{height:var(--ctl);padding:0 22px;flex:0 0 auto;font-size:var(--t-md);text-decoration:none;background:var(--fill);color:var(--ink);box-shadow:none;}
.btn.su-go:hover{background:var(--fill-2);}
.btn.su-go:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}

/* 낮은 데스크톱 창(1280×720 등) — 로고 140×180 은 그대로 두고 여백만 줄여 회원 가입 줄까지 스크롤 없이 */
@media (min-width:641px) and (max-height:800px){
  body{padding-block:10px;}
  .brand{margin-bottom:12px;}
  .brand p{margin-top:6px;}
  .card-h{padding-top:20px;}
  .card-b{padding-top:12px;padding-bottom:18px;}
  .field{margin-bottom:10px;}
  .su-cta{margin-top:12px;padding-top:12px;}
  .hint{margin-top:10px;}
}

/*
 * 모바일(세로 폰 ≤640px, 가로 폰 높이 ≤500px) — 화면 높이(100dvh)에 맞추고 로고만 줄인다(하한 64px). 입력 16px↑(iOS 확대 방지).
 * (2026-10-12) 회원 가입 줄(.su-cta) 추가로 빼는 높이를 다시 잼: 보통 570 · 빠듯 510 · 오류 시 605 · 545.
 */
@media (max-width:640px), (max-height:500px){
  body{min-height:100vh;min-height:100dvh;padding:20px 20px;flex-direction:column;}
  body > div{width:100%;max-width:420px;}
  .brand{margin-bottom:18px;}
  .brand img{width:auto;max-width:132px;
    height:clamp(64px, calc(100vh - 570px), 170px);
    height:clamp(64px, calc(100dvh - 570px), 170px);}
  .brand p{margin-top:8px;font-size:var(--t-xs);text-align:center;}
  .card{box-shadow:var(--sh-1);}
  .card-h{padding:22px 22px 2px;}
  .card-b{padding:14px 22px 22px;}
  .field label{font-size:var(--t-md);}
  .input{height:52px;font-size:17px;}
  .hint{margin-top:14px;}
  .hint .m-br{display:inline;}
}
/* 세로 공간이 빠듯한 폰(주소창 포함 iPhone SE 등) — 여백만 한 단계 줄인다 */
@media (max-width:640px) and (max-height:700px), (max-height:500px){
  body{padding-block:12px;}
  .brand{margin-bottom:12px;}
  .brand img{height:clamp(64px, calc(100vh - 510px), 170px);
    height:clamp(64px, calc(100dvh - 510px), 170px);}
  .brand p{margin-top:6px;}
  .card-h{padding-top:16px;}
  .card-b{padding-top:10px;padding-bottom:16px;}
  .field{margin-bottom:10px;}
  .input{height:50px;}
  .btn{height:52px;}
  .hint{margin-top:10px;}
}
/* 로그인 오류 문구가 뜨면 그만큼 로고를 줄여 작은 폰에서도 스크롤이 생기지 않게 */
@media (max-width:640px), (max-height:500px){
  body:has(#login-error:not([hidden])) .brand img{
    height:clamp(64px, calc(100vh - 605px), 170px);
    height:clamp(64px, calc(100dvh - 605px), 170px);}
}
@media (max-width:640px) and (max-height:700px), (max-height:500px){
  body:has(#login-error:not([hidden])) .brand img{
    height:clamp(64px, calc(100vh - 545px), 170px);
    height:clamp(64px, calc(100dvh - 545px), 170px);}
}