/* ============================================================
   auth.css: 로그인 · 가입 · 비밀번호 재설정

   무대도 도구도 아닌 문턱이다. 화면에 있는 일은 하나뿐이어야 한다.
   가입은 초대 코드 없이 열려 있고, 초대 코드는 펼쳐야 보이는 선택 항목이다.
   ============================================================ */

:root {
  --accent:      #eceef2;
  --accent-dim:  #b4b8c1;
  --accent-wash: rgba(236,238,242,.06);
}

body.auth {
  min-height: 100svh;
  display: flex; flex-direction: column;
}

.auth-main {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px clamp(16px, 5vw, 24px) 64px;
}

.auth-box { width: min(400px, 100%); }

.auth-mark {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 36px;
}
.auth-mark__logo { width: 24px; height: 24px; }
.auth-mark__brand { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.auth-mark__sub { font-size: 14px; font-weight: 500; color: var(--mute); }

.auth-title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.3; margin-bottom: 6px; }
.auth-lede { font-size: var(--fs-md); color: var(--mute-2); margin-bottom: 28px; line-height: 1.6; }

/* 하위 서비스에서 넘어온 경우, 어디로 돌아갈지 먼저 알린다. */
.auth-from {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; margin-bottom: 20px;
  border: 1px solid var(--credit-line);
  background: var(--credit-wash);
  border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--mute-2);
}

.auth-form { margin-bottom: 20px; }
.auth-form .btn { margin-top: 8px; }

.auth-alt {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 16px;
  color: var(--mute); font-size: 13px;
}
.auth-alt::before, .auth-alt::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

.auth-switch {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--mute);
}

.auth-fine {
  margin-top: 20px;
  font-size: 13px; color: var(--mute);
  line-height: 1.65;
}

.auth-foot {
  padding: 18px clamp(16px, 5vw, 24px) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--mute);
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}

/* Google 단추는 계정에 관한 것이지만 돈이 아니므로 라임을 쓰지 않는다. */
.btn--google { border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .btn--google:hover:not(:disabled) { border-color: var(--line-hard); background: var(--hover); }
}

.pane[hidden] { display: none; }

/* 창을 바꿀 때 새 창이 짧게 떠오른다. 키보드로 넘겨도 같은 자리에서 바뀌므로 거리는 짧다. */
@media (prefers-reduced-motion: no-preference) {
  .pane { animation: auth-in 260ms var(--ease-out); }
}
@keyframes auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 가입 ─────────────────────────────────────────────────── */

.auth-lede b { color: var(--credit); font-weight: 650; }
.auth-hint { margin-top: 8px; font-size: 13px; color: var(--mute); text-align: center; }

/* 초대 코드는 선택이다. 눌러야 펼쳐지고, 초대 링크로 왔으면 펼쳐진 채로 채워진다. */
.auth-code { margin: 4px 0 16px; }
.auth-code summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  font-size: 14px; color: var(--mute-2);
  cursor: pointer; list-style: none;
}
.auth-code summary::-webkit-details-marker { display: none; }
.auth-code summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.auth-code[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.auth-code .field { margin-top: 8px; }