/* 사용자 로그인 화면 (views/user/login.ejs) — 시안 v15 (개발계획서 시안v15 4-6, 2026-10-26 사용자 결정 "새 시안대로 반영")
 * - 앱 레이아웃(user-app-head) 하위 화면: 상단 바 "‹ 로그인"(명조 · 잉크 선) · 하단 탭 없음 · body.app--v15(회색 바탕 #f2f2f2).
 *   레이아웃이 user-tokens.css → user-fonts.css → user-home.css → user-app.css → 이 파일 순서로 읽음.
 * - 폼 모양: 흰 입력칸(높이 48px · 모서리 12px · 강한 테두리, 고르면 잉크 테두리) · 잉크 로그인 버튼(48px) — 로그인 시트 버튼(.app-sheet__btn--ink)과 같은 모양.
 *   입력 글자 16px(모바일 브라우저가 확대하지 않게). 오류 칸은 빨간 테두리 + 빨간 글자(#d1222a — #f2f2f2 위 약 4.9 : 1).
 * - 색 · 크기는 토큰만, 인라인 style 없음(CSP style-src 'self'). 시안과 다르게 정한 값은 "(제안)". */

.auth-main {
  padding-bottom: var(--space-6);
}

.auth {
  margin-top: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
}

.auth__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-xl);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}

.auth-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-sm);
}

.auth-field__input {
  width: 100%;
  min-height: var(--layout-hit-min);
  padding: 0 var(--space-3_5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-lg);              /* 16px — 모바일 확대 방지 */
  line-height: var(--font-leading-compact);
}

.auth-field__input:focus {
  border-color: var(--color-border-inverse);
}

.auth-field__input[aria-invalid="true"] {
  border-color: var(--color-brand-primary);
}

.auth-field__error {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}

.auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--layout-hit-min);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: inherit;
  font-size: 0.9375rem;                        /* 15px (로그인 시트 버튼과 같음) */
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  cursor: pointer;
}

.auth__submit:active {
  background: var(--color-bg-inverse-pressed);
}

.auth__links,
.auth__note {
  margin: var(--space-5) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
  text-align: center;
}

.auth__note {
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
}

.auth__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);           /* 누르는 영역 48px */
  padding-inline: var(--space-1);
  color: var(--color-text-link);
  text-underline-offset: 0.2em;
}

/* ── 회원 흐름 통합 (화면설계서 F v0.4 · A v0.3, C-56 · C-58): 가입 · 재동의 · 복구 · 계정 찾기 · 완료 화면 공통 조각 ──
 * 토큰만 씀(인라인 style 없음). 시안에 없는 값은 (제안). */
.auth--center { text-align: center; }

.auth__text {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-md);
}

.auth__step + .auth__step {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-divider);
}

.auth__step-label {
  margin: 0 0 var(--space-1);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.auth__submit { text-decoration: none; }
.auth__submit--red { background: var(--color-brand-primary); }
.auth__submit--red:active { background: var(--color-brand-primary); }
.auth__submit--line {
  border: 1px solid var(--color-border-inverse);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.auth-field__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 비밀번호 칸 안 보기 버튼 (2026-10-30 사용자 지시 "비밀번호 입력 보기 기능을 비밀번호 입력창 안으로 이동", partials/auth/field.ejs)
 * 입력칸 오른쪽 안에 눈 아이콘(누르는 영역 48 × 48), 입력칸 오른쪽 여백은 버튼 자리만큼 늘 비움(스크립트가 버튼을 켜도 글자 자리가 그대로 — 화면 밀림 없음).
 * 켜짐(aria-pressed=true) = 눈에 빗금(지금 보임 → 누르면 숨김). 토큰만 씀. */
.auth-field__control {
  position: relative;
}

.auth-field__input--reveal {
  padding-right: var(--layout-hit-min);
}

.auth-field__reveal {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-hit-min);
  height: var(--layout-hit-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.auth-field__reveal[hidden] {
  display: none;
}

.auth-field__reveal:focus-visible {
  outline: 2px solid var(--color-border-inverse);
  outline-offset: -6px;
}

.auth-field__reveal[aria-pressed="true"] {
  color: var(--color-text-primary);
}

.auth-field__eye {
  width: var(--layout-auth-eye-icon);
  height: var(--layout-auth-eye-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-field__eye--hide,
.auth-field__reveal[aria-pressed="true"] .auth-field__eye--show {
  display: none;
}

.auth-field__reveal[aria-pressed="true"] .auth-field__eye--hide {
  display: block;
}

.auth-field__help {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-sm);
}

.auth-box {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}

.auth-box--error,
.auth-box--warning { color: var(--color-brand-primary); }

.auth-terms__all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--layout-hit-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
}

.auth-terms__list {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.auth-terms__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--layout-hit-min);
}

.auth-terms__row.is-missing .auth-terms__name { color: var(--color-brand-primary); }

.auth-terms__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.auth-terms__name { margin: 0; font-size: var(--font-size-sm); }

.auth-terms__view {
  color: var(--color-text-link);
  font-size: var(--font-size-sm);
}

.auth-badge {
  padding: 0 var(--space-1_5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.auth-badge--required { color: var(--color-brand-primary); }
.auth-badge--optional { color: var(--color-text-tertiary); }

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.auth-split__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.auth-split__list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}

.auth-steps { margin: 0 0 var(--space-5); }
.auth-steps__row { display: flex; gap: var(--space-3); padding: var(--space-2) 0; }
.auth-steps__row dt { flex: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.auth-steps__row dd { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.auth-support { margin: var(--space-4) 0; }
.auth-support__title { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.auth-support__list { margin: 0; }
.auth-support__row { display: flex; gap: var(--space-3); font-size: var(--font-size-sm); }
.auth-support__row dt { flex: none; color: var(--color-text-tertiary); }
.auth-support__row dd { margin: 0; }
.auth-support__empty { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* 가입 이메일 인증 묶음 (화면설계서 F v0.5 F-03B 7 · 7-1 ~ 7-7, 2026-10-27) — 칸과 버튼 한 줄, 코드 칸 · 남은 시간 · 다시 받기 · 인증 완료 */
.auth-email {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-divider);
}
.auth-email .auth-field__input { flex: 1 1 auto; min-width: 0; }
.auth-email__send,
.auth-email__verify {
  flex: none;
  min-height: var(--layout-hit-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  cursor: pointer;
}
.auth-email__verify {
  border-color: var(--color-bg-inverse);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.auth-email__send:disabled,
.auth-email__verify:disabled,
.auth-email__resend:disabled { opacity: 0.5; cursor: default; }
.auth-email__code { margin-top: var(--space-3); }
.auth-email__code-input {
  font-size: 1.375rem;                         /* 22px — C-59 코드 칸 큰 글자 */
  letter-spacing: 0.3em;
  text-align: center;
}
.auth-email__timer {
  margin: 0;
  color: var(--color-brand-primary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}
.auth-email__resend,
.auth-email__change {
  min-height: var(--layout-hit-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-link);
  font: inherit;
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
}
.auth-email__done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.auth-email__done[hidden],
.auth-email__code[hidden] { display: none; }
.auth-email__done-text {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
/* 화면에는 안 보이지만 엔터 키 기본 제출 버튼으로 쓰임 */
.auth-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

/* ── 가입 F-03 적용 (화면설계서 F v0.6 F-03 · F-03A · F-03B, 회원가입_F03 개발계획서 2026-10-27) ──
 * - 단계: form.is-stepped(스크립트가 켬)면 보이는 단계 하나만 — 두 단계 사이 구분선 없음. 스크립트가 없으면 지금처럼 위 약관 · 아래 정보.
 * - 약관 줄(시안 .wf-ag): 줄 사이 가는 선 · '필수' 빨간 바탕 / '선택' 회색 바탕 알약 · '보기 ›' 잉크 굵은 글자(밑줄 없음). 재동의(F-03C)도 같은 조각.
 * - '동의하고 다음'(시안 7): 필수를 모두 체크하기 전에는 흐린 회색(aria-disabled — 누르면 빠진 줄 표시), 체크하면 빨강.
 * - 정보 칸 사이 16(C-56). 토큰만, 인라인 style 없음. */
.auth__form.is-stepped .auth__step + .auth__step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.auth__step {
  display: flex;
  flex-direction: column;
}

.auth__step .auth-field + .auth-field,
.auth__step .auth-field + .auth-email,
.auth__step .auth-email + .auth-field {
  margin-top: var(--space-4);
}

.auth-terms__all {
  min-height: 56px;                            /* 시안 전체 동의 상자 */
  padding: 0 var(--space-4);
  border-width: 1.5px;
  border-radius: var(--radius-box);
  font-size: var(--font-size-md);
}

.auth-terms__list {
  margin-top: var(--space-3);
}

.auth-terms__row {
  min-height: 56px;
  padding: 0 var(--space-1);
}

.auth-terms__row + .auth-terms__row {
  border-top: 1px solid var(--color-border-divider);
}

.auth-terms__row.is-missing {
  border-radius: var(--radius-sm);
  outline: 1.5px solid var(--color-brand-primary);
  outline-offset: -1.5px;
}

.auth-terms__check {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--layout-hit-min);
  font-size: var(--font-size-md);
  cursor: pointer;
}

.auth-terms__check input[type="checkbox"],
.auth-terms__all input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-bg-inverse);
}

.auth-terms__name { font-size: var(--font-size-md); }

.auth-terms__view {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  padding-inline: var(--space-1);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.auth-badge {
  flex: none;
  padding: 2px var(--space-1_5);
  border-radius: var(--radius-xs);
  line-height: var(--font-leading-compact);
}

.auth-badge--required { background: var(--color-brand-primary-subtle); }
.auth-badge--optional { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

.auth-terms__error { margin: 0 0 var(--space-3); }

.auth-step__hint { margin-top: var(--space-4); }

.auth-step__next { margin-top: var(--space-4); }

.auth-step__next[aria-disabled="true"],
.auth-step__next[aria-disabled="true"]:active {
  background: var(--color-border-strong);
  color: var(--color-text-inverse);
  cursor: default;
}

/* hidden 속성이 위 display 보다 이기게(스크립트 없을 때 '동의하고 다음'은 안 보임 · 숨은 단계) */
.auth__step[hidden],
.auth-step__next[hidden],
.auth-step__hint[hidden] {
  display: none;
}

/* ── 로그인 · 회원가입(F-05 v0.8, 2026-10-30 — 시안 J-S9 · 화면설계서 F v0.8): 이메일 로그인 · 회원가입 · 찾기 링크 아래 안내 글
 *    '처음이면 약관에 동의하고 바로 가입돼요'(시안 .lgp-s — 가운데 · 보조 글자). 토큰만 씀 ── */
.auth__lead {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
  text-align: center;
}
.auth__lead + .signup-methods { margin-top: var(--space-3); }

/* ── 로그인 · 회원가입 위쪽 합침 (F-05 v0.8, 2026-10-30 사용자 지시 "f-05에서 로그인 창이 위의 이미지랑 합쳐져야 해" — 시안 J-S9 .lgp) ──
 * 템플릿이 vm.brand 일 때만 이 클래스를 씀(공통 상단 바 없음 · 흰 카드 없음 · 회색 바탕 위 가운데 정렬).
 * 시안 값: 위 여백 28px(.lgp padding-top), 닫기 X 유리 상자 36px(위 4 · 왼쪽 −6), 일러스트 132px(위 8), 로고 40px 800(위 6),
 *          제목 15px 보조 글자(아래 22), 안내 글 13px 흐린 글자. 토큰만 씀, 인라인 style 없음. 시안에 없는 값(폼 · 버튼 · 링크)은 위 v0.8 그대로. */
.app-main.auth-main--brand {
  padding-top: max(var(--app-top-min), var(--app-safe-top));      /* 상단 바가 없으므로 상태 표시줄 여백을 본문이 맡음(시안 .sbar) */
}

.auth--brand {
  position: relative;
  margin-top: 0;
  padding: var(--space-7) var(--space-1) 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

/* 닫기 X: 누르는 영역 48 × 48, 그 가운데 36 × 36 유리 상자(시안 .lgx) — 상자 자리가 시안과 같게 영역을 6px 바깥으로 */
.auth-close {
  position: absolute;
  top: calc(var(--space-1) - (var(--layout-hit-min) - var(--layout-auth-close)) / 2);
  left: calc(-1 * var(--space-1_5) - (var(--layout-hit-min) - var(--layout-auth-close)) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-hit-min);
  height: var(--layout-hit-min);
  color: var(--color-text-primary);
  -webkit-tap-highlight-color: transparent;
}

.auth-close::before {
  content: "";
  position: absolute;
  inset: calc((var(--layout-hit-min) - var(--layout-auth-close)) / 2);
  border: var(--border-width-rule) solid var(--color-border-glass);
  background: var(--color-bg-glass);
  box-shadow: var(--elevation-glass);
  -webkit-backdrop-filter: var(--effect-glass);
  backdrop-filter: var(--effect-glass);
}

.auth-close:active::before {
  background: var(--color-bg-glass-indicator);
}

.auth-close:focus-visible {
  outline: 2px solid var(--color-border-inverse);
  outline-offset: -4px;
}

.auth-close__icon {
  position: relative;
  width: var(--layout-auth-close-icon);
  height: var(--layout-auth-close-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-brand__img {
  display: block;
  margin: var(--space-2) auto 0;
}

.auth-brand__logo {
  margin: var(--space-1_5) 0 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-brand-logo);
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--font-tracking-brand-logo);
  line-height: var(--font-leading-compact);
}

.auth-brand__dot {
  color: var(--color-brand-primary);
}

.auth--brand .auth__title {
  margin: var(--space-2) 0 var(--space-5_5);
  color: var(--color-text-secondary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md_5);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-relaxed);
}

.auth--brand .auth__form {
  text-align: left;
}

.auth--brand .auth__lead {
  color: var(--color-text-tertiary);
}

/* F-11B 이메일 찾기 결과(이름 + 휴대폰, 2026-10-30): 가린 이메일 · 가입일 목록 */
.auth-found {
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.auth-found__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.auth-found__item + .auth-found__item { margin-top: var(--space-2); }

.auth-found__email {
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.auth-found__date {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* F-11B 결과 보완(2026-11-01 사용자 지시 "결과 화면 보완"): 계정마다 가입 방법 · 로그인 수단 줄, SNS 로만 쓰는 계정 안내 + SNS 버튼(user-signup.css .signup-method),
 * 찾음 [로그인하기] 아래 [비밀번호 찾기] 줄 버튼 · 못 찾음 [다시 찾기] 아래 [회원가입] 줄 버튼. 토큰만 씀 (제안) */
.auth-found__meta {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.auth-found__meta-row {
  display: flex;
  gap: var(--space-1);
  min-width: 0;
}

.auth-found__meta dt {
  color: var(--color-text-tertiary);
}

.auth-found__meta dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.auth-found__sns {
  flex-basis: 100%;
  margin-top: var(--space-2);
}

.auth-found__sns-text {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}

.auth-found__sns .signup-method { font-size: 0.9375rem; }
.auth-found__sns .signup-method:active { filter: brightness(0.94); }