/* VoiceHub 로그인 — S-025 리디자인(Login 시안).
   토큰은 index.css·ops.css 와 같은 값을 각 파일이 따로 들고 있다. /static 화이트리스트가 6개로
   고정이라 공용 토큰 파일을 새로 둘 수 없다(파일 추가 = 계약 변경). 값이 갈라지지 않게
   README 토큰 표를 원본으로 삼아 그대로 옮겨 적는다. */
:root{
  /* 브랜드 */
  --brand:#E8590C; --brand-hover:#D9480F; --brand-tint:#FDEFE2; --brand-ink:#A04D00;
  /* 중립 텍스트 4단 + 뮤트(일반 텍스트 하한) */
  --ink:#1A1C1E; --ink-strong:#2A2E31; --ink-label:#3E4448; --ink-sub:#5F666B; --muted:#757C80;
  /* 비활성·플레이스홀더 전용(하한 예외 — 일반 본문 사용 금지) */
  --disabled:#C3C9CC; --placeholder:#B6BCBF;
  /* 면 */
  --line:#E4E7E9; --rule:#F1F3F4; --edge:#EDF0F1;
  --surface:#F5F4F2; --surface-alt:#FAFBFB; --card:#FFFFFF;
  /* 상태 */
  --neg-ink:#B03030; --neg-tint:#FBEBEB; --neg-surface:#FDF6F6; --neg-line:#F0C4C4;
  /* 크기 */
  --fs-meta:12.5px; --fs-sub:13.5px; --fs-body:14px; --fs-card-title:15px; --fs-login-title:22px;
  --control:44px; --r-card:14px; --r-control:10px;
  --font:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:#F8F6F2;
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center; padding:24px;
  position:relative; overflow:hidden;
}
/* 하단 물결 — 장식. 폭에 맞춰 늘어난다(preserveAspectRatio=none). */
.wave{position:fixed; left:0; right:0; bottom:0; width:100%; height:120px; pointer-events:none}

.card{
  position:relative; width:400px; max-width:100%;
  background:var(--card); border:1px solid #E8EBEC; border-radius:20px;
  box-shadow:0 6px 24px rgba(20,40,30,.06);
  padding:40px 36px 32px;
}
.brand{display:flex; flex-direction:column; align-items:center}
.logo{
  width:46px; height:44px; border-radius:13px; background:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.title{font-size:var(--fs-login-title); font-weight:700; letter-spacing:-.3px; margin-top:14px}
.tagline{font-size:var(--fs-sub); color:var(--muted); margin-top:6px}

.fld{margin-top:16px}
.fld:first-of-type{margin-top:28px}
label.lbl{display:block; font-size:var(--fs-sub); font-weight:600; color:var(--ink-label)}
.inwrap{position:relative; margin-top:7px}
input[type=text],input[type=password]{
  width:100%; height:var(--control); padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-alt);
  font-family:inherit; font-size:var(--fs-body); color:var(--ink-strong);
}
input::placeholder{color:var(--placeholder)}
input:focus{outline:none; border-color:var(--brand); background:var(--card);
  box-shadow:0 0 0 3px rgba(232,89,12,.12)}
/* 비밀번호 표시 토글 — 입력칸 안쪽 오른쪽. 44px 규칙은 입력칸이 지키고, 이 버튼은 그 안의 아이콘이다. */
.eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:0; background:none; padding:0; cursor:pointer; color:var(--muted); border-radius:8px;
}
.eye:hover{color:var(--ink-label); background:var(--rule)}
.inwrap:has(.eye) input{padding-right:42px}

.remember{display:flex; align-items:center; gap:8px; margin-top:16px; cursor:pointer;
  font-size:var(--fs-sub); color:var(--ink-label); font-weight:500}
.remember input{position:absolute; opacity:0; width:0; height:0}
.box{width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line); background:var(--card);
  display:inline-flex; align-items:center; justify-content:center; flex:none; color:transparent}
.remember input:checked + .box{background:var(--brand); border-color:var(--brand); color:#fff}
.remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(232,89,12,.2)}

button[type=submit]{
  width:100%; height:var(--control); margin-top:20px;
  border:0; border-radius:var(--r-control); background:var(--brand); color:#fff;
  font-family:inherit; font-size:var(--fs-card-title); font-weight:700; cursor:pointer;
}
button[type=submit]:hover{background:var(--brand-hover)}
button[type=submit]:disabled{background:var(--disabled); cursor:default}

.err{
  display:none; margin-top:18px; padding:10px 12px;
  background:var(--neg-surface); border:1px solid var(--neg-line); border-radius:var(--r-control);
  color:var(--neg-ink); font-size:var(--fs-sub);
}
.err.show{display:block}
.foot{font-size:var(--fs-meta); color:var(--muted); text-align:center; margin-top:20px; line-height:1.6}