/* site/pages/login.css — 로그인 · 아이디·비밀번호 찾기 전용
   원천: 퍼블리싱/assets/css/site/pages/login.css. 아이디 저장 체크·설명 문구의 스타일은 걷어냈다.
   찾기 화면은 같은 카드에 탭 둘을 얹은 변형이다. */

.login-shell { max-width: 460px; margin: 0 auto; }
/* 보내져 온 사유(로그인 필요·세션 만료·재설정 메일 요청)가 있을 때만 노출하는 안내 띠 */
.login-gate { display: flex; align-items: flex-start; gap: var(--sp-2); background: var(--c-navy-50); border: 1px solid var(--c-navy-100); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); font-size: var(--fs-14); color: var(--c-primary); line-height: var(--lh-base); word-break: keep-all; }
.login-gate svg { flex: none; margin-top: 2px; }
.login-card { background: var(--c-white); border: var(--bd); border-radius: var(--r-xl); padding: var(--sp-8); box-shadow: var(--shadow-md); }
.login-card h1 { font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--c-primary); text-align: center; margin: var(--sp-4) 0 var(--sp-6); }
.login-card .field { margin-bottom: var(--sp-4); }
/* 입력 칸 왼쪽 아이콘 — 라벨 글자는 칸 안의 안내 글자로 옮기고 라벨은 sr-only로 남긴다.
   배치는 디자인 시스템 components/forms.html의 검색 입력(.search-input)과 같다.
   비밀번호 칸은 공통 스크립트가 .pw-wrap(position: relative)으로 감싸 아이콘보다 나중에 그려지므로 z-index로 아이콘을 칸 위에 올린다 */
.login-input { position: relative; }
.login-input svg { position: absolute; z-index: 1; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--c-text-mute); pointer-events: none; }
.login-input .input { padding-left: calc(var(--sp-10) + var(--sp-1)); }
/* 서버가 거부했을 때의 실패 안내 — 무엇이 틀렸는지 구분하지 않는다 */
.login-error { display: flex; align-items: flex-start; gap: var(--sp-2); background: color-mix(in srgb, var(--c-danger) 8%, var(--c-white)); border: 1px solid color-mix(in srgb, var(--c-danger) 40%, var(--c-white)); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); font-size: var(--fs-14); color: var(--c-danger); line-height: var(--lh-base); word-break: keep-all; }
.login-error svg { flex: none; margin-top: 2px; }
.login-opts { display: flex; align-items: center; justify-content: flex-end; margin: var(--sp-2) 0 var(--sp-6); }
.login-opts .find-link { font-size: var(--fs-14); color: var(--c-text-soft); text-decoration: underline; text-underline-offset: 2px; }
.login-opts .find-link:hover { color: var(--c-primary); }
.login-join { background: var(--c-surface-tint); border-radius: var(--r-lg); padding: var(--sp-5); margin-top: var(--sp-6); text-align: center; font-size: var(--fs-15); color: var(--c-text-soft); word-break: keep-all; }
.login-join a { font-weight: var(--fw-bold); color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── 아이디·비밀번호 찾기 — 탭 모양은 공통 하위 메뉴 탭(.board-tabs, navigation/tabs.html)이고 카드 폭을 둘이 나눠 갖는다 ── */
.find-tabs { flex-wrap: nowrap; margin-bottom: var(--sp-6); }
.find-tabs button { flex: 1; padding: var(--sp-3) var(--sp-2); word-break: keep-all; }
/* 찾은 이메일 — 확인 메일 안내의 보낸 주소(signup.css .sent-email)와 같은 글자 모양을 틴트 상자에 늘어놓는다 */
.find-result__title { font-size: var(--fs-15); color: var(--c-text-soft); text-align: center; margin-bottom: var(--sp-3); }
.find-result__list { list-style: none; margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--c-surface-tint); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--sp-2); }
.find-result__list li { font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--c-primary); text-align: center; word-break: break-all; }

/* ── 반응형 ── */
@media (max-width: 767px) {
  .login-card { padding: var(--sp-6) var(--sp-5); }
}