/* /redesign/login/login.css — 로그인 시안(결정 86). 토큰 · 헤더 · 푸터는 ../d3/d.css, 여기는 이 페이지 모양(.lg-*)만.
   바탕 #f5f6f8 단색(글로우 · 패턴 · 움직임 없음) · 헤더는 공용 흰 유리 그대로 · 가운데 한 열 400px.
   결정 87: 배율(zoom) 축소 없이 실제 값 — 열 400 · 주소 · 이메일 · 비밀번호 칸 48(radius 14 · 흰 바탕 · 그림자 없음) · 로그인 버튼 48, 글자는 shared/type.css 토큰(폼 페이지 예외: 제목 26 / 모바일 24 · 부제 = 보조 본문).
   배경: 폼 뒤 흰 로고(login-mark.png) 780px · 20% · 가운데(모바일 520) */
.lg {
  --nav-h: 76px;
  --lg-bg: #f5f6f8; --lg-soft: #f7f8fa; --lg-line: #e3e5ea; --lg-mute: #9a9fa8; --lg-err: #96103f;
  --lg-badge-bg: #e9ecf3; --lg-badge: #3b4a6b;
  --lg-fs-h1: 26px;   /* 페이지 제목 — 폼 페이지 예외(토큰 h1 46을 쓰지 않음), 모바일 24 */
  background: var(--lg-bg);
}

/* 한 화면(스크롤 없음, 사용자 요청): 일반 푸터 없이 무대가 헤더 아래 남는 높이를 다 씀 — 내용이 더 길 때만 늘어남 */
body.lg { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.lg main { flex: 1; display: flex; flex-direction: column; }
.lg .lg-stage { flex: 1; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-top: calc(var(--nav-h) * -1); padding: calc(var(--nav-h) + 24px) 24px 24px; background: var(--lg-bg); }   /* 화면 세로 가운데 · 헤더 높이만큼 위 여백 */
.lg .lg-col { position: relative; z-index: 1; width: 400px; max-width: 100%; }
.lg .lg-bgmark { position: absolute; left: 50%; top: calc(50% + var(--nav-h) / 2); z-index: 0; width: auto; max-width: none; height: min(680px, calc((100% - var(--nav-h)) * .82)); transform: translate(-50%, -48%); opacity: .2; pointer-events: none; user-select: none; }   /* 폼 뒤 흰 로고 — 가운데 = 헤더 아래 영역의 가운데, 높이 = 헤더 아래 남는 높이의 82%(최대 680) — 위 · 아래 여백을 두고 화면 안에(사용자 요청: 좀 더 작게) */
.lg .lg-head { margin: 0 0 28px; text-align: center; }   /* 제목이 열의 맨 위 */
.lg .lg-h1 { margin: 0; font-size: var(--lg-fs-h1); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; color: var(--ink); }
.lg .lg-sub { margin: var(--t-gap-lead) 0 0; font-size: var(--t-sub); line-height: 1.6; color: var(--t-lead-c); }

/* 칸 이름 */
.lg .lg-lab { display: flex; align-items: center; margin: 0 0 7px; font-size: var(--t-lab); font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.lg .lg-lock { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: var(--t-cap); font-weight: 400; color: var(--t-cap-c); white-space: nowrap; }
.lg .lg-lock[hidden] { display: none; }
.lg .lg-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ③ 브랜드 주소 */
.lg .lg-addr { display: flex; align-items: center; gap: 0; height: 48px; padding: 0 16px; border: 1px solid var(--lg-line); border-radius: 14px; background: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.lg .lg-addr[hidden] { display: none; }
.lg .lg-addr:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(22, 24, 29, .06); }
.lg .lg-pf { flex: none; font-size: var(--t-body); color: var(--lg-mute); white-space: nowrap; }
.lg .lg-addr input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.lg .lg-addr input::placeholder { font-weight: 400; color: #c3c7cf; }
/* 브랜드 주소로 접근 — 고정 표시: 바탕 #f7f8fa · 테두리 · 그림자 없음 · 오른쪽 브랜드명 배지 */
.lg .lg-addr--fixed { gap: 12px; height: auto; min-height: 48px; padding-block: 8px; border-color: transparent; background: var(--lg-soft); box-shadow: none; }   /* 긴 주소 · 브랜드명은 줄바꿈(잘림 없음) */
.lg .lg-fx { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-body); font-weight: 600; line-height: 1.35; color: var(--ink); }
.lg .lg-nm { flex: none; max-width: 42%; overflow-wrap: anywhere; text-align: center; padding: 5px 9px; border-radius: 8px; background: var(--lg-badge-bg); color: var(--lg-badge); font-size: var(--t-cap); font-weight: 600; line-height: 1.4; }   /* 배지 = 주석 크기 + 600 */
.lg .lg-nm[hidden] { display: none; }
.lg .lg-help { margin: 8px 0 0; padding: 0 2px; font-size: var(--t-cap); line-height: 1.55; color: var(--t-cap-c); }
.lg .lg-help[hidden] { display: none; }

/* ④ ⑤ 이메일 · 비밀번호 */
.lg .lg-fs { margin-top: 20px; }
.lg .lg-f + .lg-f { margin-top: 12px; }
.lg .lg-ib { display: flex; align-items: center; height: 48px; border: 1px solid var(--lg-line); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.lg .lg-ib:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(22, 24, 29, .06); }
.lg .lg-ib input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.lg .lg-ib input::placeholder { font-weight: 400; color: #c3c7cf; }
.lg .lg-eye { flex: none; display: grid; place-items: center; width: 48px; height: 100%; padding: 0; border: 0; background: none; color: var(--lg-mute); cursor: pointer; border-radius: 0 14px 14px 0; }
.lg .lg-eye:hover, .lg .lg-eye[aria-pressed="true"] { color: var(--ink-2); }
.lg .lg-eye:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.lg .lg-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lg .lg-eye-off, .lg .lg-eye[aria-pressed="true"] .lg-eye-on { display: none; }
.lg .lg-eye[aria-pressed="true"] .lg-eye-off { display: block; }

/* 오류 — 문제 칸 테두리 #96103f */
.lg .lg-addr:has(input[aria-invalid="true"]), .lg .lg-ib:has(input[aria-invalid="true"]) { border-color: var(--lg-err); }
.lg .lg-addr:has(input[aria-invalid="true"]):focus-within, .lg .lg-ib:has(input[aria-invalid="true"]):focus-within { box-shadow: 0 0 0 4px rgba(150, 16, 63, .08); }
.lg .lg-err { margin: 12px 0 0; font-size: var(--t-sub); line-height: 1.5; color: var(--lg-err); }
.lg .lg-err:empty { display: none; }

/* ⑥ 상태 유지 · 비밀번호 찾기 */
.lg .lg-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: var(--t-sub); color: var(--ink-2); }
.lg .lg-keep { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.lg .lg-keep input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); }
.lg .lg-lk { color: var(--ink-3); text-decoration: underline; text-decoration-color: #c9cdd6; text-underline-offset: 3px; white-space: nowrap; }
.lg .lg-lk:hover { color: var(--ink); }

/* ⑦ 로그인 버튼 */
.lg .lg-go { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 20px; border: 0; border-radius: 14px; background: var(--brand); color: #fff; font: inherit; font-size: var(--t-body); font-weight: 600; cursor: pointer; transition: background .15s; }
.lg .lg-go:hover { background: var(--brand-deep); }
.lg .lg-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ⑧ ⑨ */
.lg .lg-alt { margin: 24px 0 0; text-align: center; font-size: var(--t-sub); line-height: 1.6; color: var(--ink-3); }
.lg .lg-alt a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lg .lg-cs { margin: 8px 0 0; text-align: center; font-size: var(--t-cap); line-height: 1.55; color: var(--t-cap-c); }
.lg .lg-cs a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.lg .lg-legal { margin: 6px 0 0; text-align: center; font-size: var(--t-cap); line-height: 1.55; color: var(--t-cap-c); }   /* 푸터 대신 약관 한 줄 */
.lg .lg-legal a { color: var(--t-cap-c); text-decoration: none; }
.lg .lg-legal a:hover { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .lg { --nav-h: 64px; }
  .lg .lg-stage { padding-top: calc(var(--nav-h) + 40px); }
}
@media (max-width: 600px) {
  .lg { --lg-fs-h1: 24px; }
  .lg .lg-stage { align-items: flex-start; min-height: 0; padding: calc(var(--nav-h) + 40px) 16px 56px; }
  .lg .lg-col { width: 100%; }
  .lg .lg-bgmark { width: 520px; height: auto; }   /* 모바일 — section overflow hidden이라 가로 스크롤 없음 */
  .lg .lg-addr { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg .lg-addr, .lg .lg-ib, .lg .lg-go { transition: none; }
}