/* ============================================================================
   로그인(login.html) — 카드 한 장
   ============================================================================
   색·글꼴은 styles.css, 판짜임 되돌리기(body.browse)와 맨 윗줄(.sc-top)은 browse.css
   에서 받는다 — policy.html이 쓰는 것과 **같은 껍데기**다. 여기 있는 것은 카드와
   폼뿐이니 새 색을 만들지 말 것.

   ── 왜 admin.css의 `.ad-*`를 안 빌려 오나 ────────────────────────────────
   생김새는 같은 어휘를 쓰지만(아래) 저쪽은 `body.admin`으로 시작하는 **관리 화면의**
   판짜임이고, 표·할 일 버튼·붙박이 열까지 딸려 온다. 이 리포는 문서 하나에 판짜임
   CSS 하나를 두는 관례다(browse.css · doc.css · admin.css) — 그 줄을 여기서 흐리면
   '관리 화면을 고쳤더니 로그인이 깨지는' 날이 온다.

   ── 어휘는 온보딩 네 화면 그대로 ─────────────────────────────────────────
   ① 모서리는 각지게  ② 깊이는 그림자가 아니라 1px 선  ③ 강조색은 화면당 한 점
   ④ 메타 라벨은 --mono + 넓은 자간.
   ③이 여기서 특히 값을 한다 — 채워진 버튼이 [메일 받기] 하나뿐이라, 이 화면에서
   할 일이 무엇인지 색 하나로 말해진다.
   ============================================================================ */

.lg-wrap { display: flex; justify-content: center; padding: 64px 20px; }
.lg-card {
  width: 100%; max-width: 420px;
  border: 1px solid var(--line); background: var(--panel);
  padding: 30px 28px 26px; box-shadow: var(--ui-shadow);
}
.lg-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 10px;
}
.lg-card h1 { margin: 0 0 8px; font-size: 19px; letter-spacing: .02em; }
.lg-p { margin: 0 0 20px; font-size: 12.5px; color: var(--muted); line-height: 1.7; word-break: keep-all; }
.lg-note { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.65; word-break: keep-all; }
/* 글 속 링크는 강조색 — 안 주면 브라우저 기본(파랑·방문 후 보라)이 나와 이 화면에서
   유일하게 팔레트 밖 색이 된다(doc.css의 `.pol a`와 같은 까닭). */
.lg-p a, .lg-note a { color: var(--accent); }

/* ---------- 폼 ---------- */
.lg-field { display: block; margin-bottom: 14px; }
.lg-field > span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
/* 테두리는 여기서 직접 준다 — styles.css는 폼 컨트롤의 바탕·글자색만 전역으로 주고
   테두리는 사이드바 맥락(.field input)에서만 준다. 안 주면 브라우저 기본 테두리가
   남는다(browse.css의 .sc-search·admin.css의 .ad-field와 같은 까닭). */
.lg-field input {
  width: 100%; box-sizing: border-box; border-radius: 0;
  border: 1px solid var(--line); padding: 9px 11px;
  font-family: inherit; font-size: 14px;
}
.lg-field input:focus { outline: none; border-color: var(--accent); }
/* 여섯 자리 코드 — 글자 사이를 벌려 '자릿수를 세며 치는 값'으로 보이게 */
.lg-code { font-family: var(--mono); letter-spacing: .38em; text-align: center; }

.lg-btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 14px; border-radius: 0; cursor: pointer; width: 100%;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.lg-btn:hover:not(:disabled) { background: var(--hover); }
.lg-btn:disabled { opacity: .45; cursor: default; }
.lg-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-primary:hover:not(:disabled) { background: var(--accent); opacity: .9; }
/* 글자만 있는 버튼(주소 고치기·다시 보내기) — 폭을 안 먹고 줄 안에 선다 */
.lg-link {
  background: none; border: 0; padding: 0; width: auto;
  font-family: inherit; font-size: 12px; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}
.lg-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.lg-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }

.lg-err {
  border: 1px solid var(--danger); color: var(--danger);
  padding: 9px 11px; font-size: 12.5px; line-height: 1.6; margin-bottom: 14px;
  word-break: keep-all;
}
/* 보낸 주소를 그대로 보여준다 — 오타를 이 자리에서 알아채라고 */
.lg-sent { font-weight: 700; color: var(--ink); word-break: break-all; }

/* ---------- 들어와 있을 때 ---------- */
.lg-who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.lg-who .lg-mail { font-size: 15px; font-weight: 700; word-break: break-all; }
.lg-badge {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  padding: 3px 7px; border: 1px solid var(--accent); color: var(--accent);
}
/* 계정이 무엇을 해 주는지 — 목록으로 두어야 '아직 안 붙은 것'을 나중에 줄로 더한다 */
.lg-perks { margin: 0 0 4px; padding-left: 1.2em; }
.lg-perks li { font-size: 12.5px; color: var(--muted); line-height: 1.8; word-break: keep-all; }

@media (max-width: 480px) {
  .lg-wrap { padding: 34px 14px; }
  .lg-card { padding: 24px 18px 20px; }
}