/* login.css — 로그인 화면. 시안 `design/Login.dc.html`·`LoginDesktop.dc.html`
 * (A안 「조용한 문」, 2026-08-30 채택).
 *
 * **폭마다 파일을 가르지 않는다.** 시안이 두 장인 것은 아트보드가 두 폭이라서지
 * 규칙이 두 벌이라서가 아니다 — 데스크톱도 면 분할 없이 같은 컬럼을 가운데
 * 세운다(카카오 계정 웹 구조). 그래서 여기서 갈리는 것은 **컬럼 폭과 치수 몇
 * 개**뿐이고 미디어 쿼리 한 덩이로 끝난다.
 *
 * 값은 시안 그대로다. 소수점·홀수 값을 반올림하지 않는 것은 tokens.css 가 적어
 * 둔 것과 같은 이유다 — 반올림하면 여백 비율이 밀린다. 색은 **전부 tokens 에서**
 * 온다(시안이 쓴 리터럴은 하나도 남기지 않았다).
 *
 * ⚠ **세로 배치가 `flex` 비율이다.** 시안이 위 1.15 : 아래 1.55 로 로고 뭉치를
 * 화면 가운데보다 살짝 위에 둔다. 고정 여백으로 옮기면 폰 높이(667~932)마다
 * 다른 자리에 서므로, 비율을 그대로 옮긴다. */

.login {
  /* 문은 흰 바탕이다 — 상담 화면(--c-bg 회색)과 다르다. 시안 그대로 */
  background: var(--c-surface);
}

.lg {
  min-height: 100vh;
  min-height: 100dvh;      /* 폰 주소창이 접혔다 펴져도 안 튄다 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
}

.lg-top { flex: 1.15 1 0; }
.lg-bot { flex: 1.55 1 0; }

/* ── 로고 뭉치 ──────────────────────────────────────────── */

.lg-brand {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
  /* 시안의 `flex: 0 0 48px` 자리. 빈 div 대신 여백으로 둔다 */
  margin-bottom: 48px;
}

.lg-mark {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--c-brand); color: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
}

.lg-name { display: flex; flex-direction: column; gap: 6px; }

.lg-name h1 {
  margin: 0;
  font: 800 24px/1.3 var(--ff-title);
  letter-spacing: -.5px;
  color: var(--c-tx);
}

.lg-name p {
  margin: 0;
  font: 400 12.5px/1.5 var(--ff-body);
  color: var(--c-tx-mute);
}

/* ── 입력 ───────────────────────────────────────────────── */

.lg-form {
  flex: 0 0 auto;
  width: 100%;
  display: flex; flex-direction: column; gap: 10px;
}

.lg-field {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--c-bd-faint);
  background: var(--c-surface-soft);
}

/* 칸이 초점을 받으면 테두리만 바뀐다. 그림자·확대는 시안에 없다 */
.lg-field:focus-within { border-color: var(--c-brand); }

.lg-field input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; padding: 0;
  font: 400 14px/1.5 var(--ff-body);
  color: var(--c-tx);
}
.lg-field input:focus { outline: none; }   /* 테두리가 이미 말한다 */
.lg-field input::placeholder { color: var(--c-tx-faint); }

/* 자동완성이 칠하는 노란 바탕을 칸 색으로 되돌린다. 사파리·크롬이
   `background-color` 를 무시하므로 그림자로 덮는 것이 관례다 */
.lg-field input:-webkit-autofill,
.lg-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 60px var(--c-surface-soft) inset;
  -webkit-text-fill-color: var(--c-tx);
}

.lg-eye {
  display: flex; align-items: center; justify-content: center;
  /* 히트 타깃 44 (N2). 아이콘은 20 이지만 누를 수 있는 면은 그보다 커야 한다 —
     칸 높이가 54 라 세로로는 넘치지 않는다 */
  width: 44px; height: 44px; margin-right: -12px;
  color: var(--c-tx-faint);
}
.lg-eye[aria-pressed="true"] { color: var(--c-tx-3); }

/* ── 자동 로그인 ────────────────────────────────────────── */

.lg-keep {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; min-height: var(--tap);
  cursor: pointer;
  user-select: none;
}

/* 진짜 체크박스는 숨기되 **지우지 않는다** — 폼 값과 키보드 이동이 그것에
   붙어 있다. `display:none` 이면 초점을 못 받는다 */
.lg-keep input {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lg-box {
  width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--c-tx-off);
  background: var(--c-surface);
  color: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.lg-box .ic { opacity: 0; }
.lg-keep input:checked + .lg-box {
  background: var(--c-brand); border-color: var(--c-brand);
}
.lg-keep input:checked + .lg-box .ic { opacity: 1; }
/* 숨긴 칸이라 초점 자국이 갈 곳이 없다. 네모에 그린다 */
.lg-keep input:focus-visible + .lg-box {
  outline: 2px solid var(--c-brand); outline-offset: 2px;
}

.lg-keep-tx { font: 400 13.5px/1.5 var(--ff-body); color: var(--c-tx-2); }

/* ── 오류·안내 한 줄 ────────────────────────────────────── */

/* 시안에 없는 요소다. **뜰 때만 자리를 먹는다** — 평소 화면이 시안과 같아야
   하고, 여기에 늘 빈 줄이 있으면 A안이 지키려는 여백이 흐트러진다 */
.lg-msg {
  margin: 0;
  padding: 11px 14px;
  border-radius: 12px;
  font: 400 12.5px/1.55 var(--ff-body);
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-bd);
  color: var(--c-warn-tx);
  text-align: center;
}

/* ── 단추 ───────────────────────────────────────────────── */

.lg-go {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px; border-radius: 14px;
  background: var(--c-brand); color: var(--c-surface);
  font: 700 15px/1 var(--ff-title);
  letter-spacing: -.2px;
}
.lg-go:hover { background: var(--c-brand-strong); }
/* 보내는 중. **글자를 바꾸지 않는다** — 「로그인 중…」으로 바꾸면 폭이 변해
   단추가 들썩인다. 흐리게만 두고 두 번 눌리는 것은 JS 가 막는다 */
.lg-go[disabled] { opacity: .55; cursor: default; }
.lg-go[disabled]:hover { background: var(--c-brand); }

.lg-links {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; min-height: var(--tap);
}
.lg-link {
  min-height: var(--tap);
  font: 500 13px/1.5 var(--ff-body);
  color: var(--c-tx-4);
}
.lg-link:hover { color: var(--c-tx-2); }
.lg-sep { width: 1px; height: 12px; background: var(--c-bd-chip); }

.lg-copy {
  flex: 0 0 auto;
  margin: 0 0 26px;
  text-align: center;
  font: 400 var(--fs-note)/1.5 var(--ff-body);
  color: var(--c-tx-faint);
}

/* 눈에 안 보이는 라벨. 칸 안 글자가 라벨을 겸하는 A안이라 이것이 스크린리더의
   유일한 이름이다 — 지우면 칸 둘이 이름 없이 선다 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 데스크톱 ───────────────────────────────────────────── */
/* 시안 `LoginDesktop` — 카드도 면 분할도 없이 360 컬럼 하나를 가운데 세운다.
   갈리는 것은 컬럼 폭과 치수 몇 개뿐이다. 경계를 600 에 두는 것은 그 아래가
   폰·태블릿 세로라 전폭 컬럼이 맞기 때문이다 */
@media (min-width: 600px) {
  .lg { padding: 0 20px; }
  .lg-top { flex: 1.1 1 0; }
  .lg-bot { flex: 1.5 1 0; }

  .lg-brand { margin-bottom: 22px; }
  .lg-mark { width: 64px; height: 64px; }
  .lg-mark svg { width: 30px; height: 30px; }
  .lg-name h1 { font-size: 23px; }

  .lg-form { width: 360px; }
  .lg-field { min-height: 52px; }
  .lg-go { min-height: 52px; }
  .lg-copy { margin-bottom: 28px; }
}