/*
 * 아테나 — 로그인 · 회원가입.
 *
 * ── 이 시트가 그리는 것이 페이지에서 **창**으로 돌아왔습니다 (2026-09-10) ──
 *
 * 운영자 요청은 「로그인,회원가입 페이지는 모델 없는 디자인으로 바꿔줘
 * 깔끔하고 심플하게 페이지보단 모달형식이 편할거같아」 입니다. 사흘 전
 * (2026-09-08) 이 두 화면을 페이지로 바꾼 것은 창이 **떠 있던 자리** 때문이고
 * — `/signup` 이 `/game?type=casino&auth=signup` 으로 넘겨서 은행 계좌를 적어
 * 달라는 양식이 카지노 격자 위에 떴습니다 — 창으로 돌아오면서 그 배경까지
 * 돌아오면 안 됩니다. 그 고침은 시트가 아니라 `lib/guest.ts` 에 있습니다.
 *
 * 그러나 그때 함께 고친 **결함 셋은 창에서도 그대로 서야 합니다.** 페이지가
 * 공짜로 주던 것들이라 되돌리면 셋 다 조용히 돌아옵니다. 이 시트에서 그 셋을
 * 맡는 것은 아래 세 규칙입니다:
 *
 *   1. **거절이 자리를 안 밀어냅니다** — `.ath-auth-alert-slot` 의
 *      `min-height`. 알림 자리를 미리 잡아 두면 카드 높이가 아예 안 변하고,
 *      높이가 안 변하면 세로 위치도 안 변합니다. 거기에 창을 화면 위쪽에
 *      **앉히는** 것(`align-items: flex-start`)을 더합니다 — 가운데 맞춤이면
 *      높이가 1px 변할 때마다 창 전체가 0.5px 씩 움직이므로, 자리를 잡아 둔
 *      곳 밖에서 무엇이 자라도 안 흔들리게 하는 두 번째 자물쇠입니다.
 *   2. **폰에서 안 넘칩니다** — 창은 화면보다 높아질 수 없고
 *      (`.ath-auth-modal { max-height: 100% }` 이 `100dvh` 짜리 겉에 걸립니다)
 *      몸통이 안에서 스크롤합니다(`.ath-auth-body { overflow-y: auto }`).
 *      **둘이 한 쌍입니다** — 높이만 막고 스크롤을 안 주면 아래 단추가 그냥
 *      잘리고, 그것이 예전 창의 결함(오류가 떠 있을 때 844px 화면에서 877px)
 *      이었습니다.
 *   3. **빈자리가 없습니다** — 어디에도 `height` 도 `min-height` 도 없습니다.
 *      회원가입 카드가 1120×820 **고정**이라 1단계의 한 칸 아래로 316px
 *      (카드 높이의 39%)이 남았고, 폰에서는 카드가 390×844 를 전부 차지한다고
 *      선언해 두고 자식이 604px 만 채워 240px 이 남았습니다. 채울 「카드
 *      높이」가 없으면 남는 자리가 생길 데가 없습니다.
 *
 * ── 판이 없어졌습니다 ──────────────────────────────────
 *
 * 두 판 나누기(`.ath-auth-frame`, 왼쪽 400px 그림 판)를 통째로 지웠습니다.
 * 그 판은 처음에 `#5B8DD6` 한 색으로 칠한 면이었고 — 거의 검은 스킨에서
 * 유일하게 큰 단색 면 — 다음에는 인물 PNG 가 섰습니다. 「깔끔하고
 * 심플하게」는 그 자리에 **다른 그림을 넣으라는 말이 아니라 그 자리를 없애라는
 * 말**로 읽었습니다. 남은 것은 양식 하나짜리 좁은 창입니다.
 *
 * 그래서 여기에는 인물도, 마스크도, 그림 배경도 없습니다. 예전 시트에
 * `mask-image` 가 있던 이유는 684×1022 투명 PNG 를 판에 세우면 아래가 몸통에서
 * 각지게 잘렸기 때문이고, 세울 것이 없으니 가릴 것도 없습니다.
 *
 * ── 울타리가 없는 채로 남습니다, 그리고 이제 그래야 합니다 ──
 *
 * `skins/assets.ts` 가 이 한 장만 `scoped` 없이 싣습니다. 페이지였던 사흘
 * 동안은 「이름이 곧 울타리라서」가 이유였지만, 창은
 * `AuthModalProvider` 가 `children` 의 **형제**로 그리고 스킨 CSS 의 울타리인
 * `data-skin` 은 그 `children` 안쪽 `#app` 에 붙습니다 — 즉 창은 울타리
 * **밖**이고, 감싸면 이 시트가 한 줄도 닿지 않습니다.
 *
 * 같은 까닭으로 이 시트는 `screens.css` 의 공용 어휘를 **부를 수 없습니다.**
 * `.ath-btn-submit` 도 `.ath-alert` 도 `.ath-hint` 도 `[data-skin="athena"]`
 * 안에서만 그려지므로, 창은 단추·알림·힌트를 자기 이름으로 자기가 다 정합니다
 * (`.ath-auth-submit` · `.ath-auth-alert` · `.ath-auth-hint`). 값은 같은
 * 토큰에서 오므로 얼굴은 사이트의 나머지와 같습니다.
 *
 * 그 대신 얻는 것이 하나 있습니다: 페이지였을 때는 `screens.css` 의
 * `[data-skin="athena"] .ath-screen input` (0,3,1) 을 이기려고 선택자를 넷씩
 * 쌓아야 했습니다. 울타리 밖에서는 그 규칙이 아예 안 오므로 여기 선택자는 전부
 * 한 겹입니다.
 *
 * ── 색을 손으로 안 적습니다 ────────────────────────────
 *
 * 값은 전부 `palette.css` 의 토큰이고 그 토큰은 `--t-*`(운영자가 개발자
 * 페이지에서 고른 조합)을 읽습니다. `#14191F` 를 여기 적으면 조합을 바꾼
 * 도메인에서 이 두 화면만 예전 색으로 남습니다.
 *
 * 딱 한 군데 예외가 `.ath-auth-scrim` 의 검은 겹입니다. 조합에 그 값이
 * 없는데(`--t-veil-rgb` 는 어두운 조합에서 **흰색**입니다 — 면을 밝히는
 * 겹입니다) 뒤 페이지를 눌러야 하는 것은 조합과 무관하고, 사이트의 다른
 * 대화상자(`components/notify.tsx`)가 이미 같은 값을 씁니다. 두 겹이 다르면
 * 같은 동작이 화면마다 다른 무게로 읽힙니다.
 *
 * 그림자·번짐·경사는 없습니다. 창이 페이지에서 떨어져 보이는 것은 겹과
 * 실선 한 줄이 합니다.
 */

/* ── 겉 ───────────────────────────────────────────────── */

/*
 * `height: 100dvh` 가 `inset: 0` **옆에** 있는 것은 겹말이 아닙니다.
 *
 * `inset: 0` 만 두면 겉의 높이는 고정 요소의 컨테이닝 블록, 즉 브라우저가
 * 주소창을 겹쳐 접기 **전**의 큰 화면입니다. 폰에서 그러면 창의 아래 끝이
 * 주소창 뒤로 들어갑니다 — 안쪽 스크롤이 있어도 마지막 단추에 닿을 수 없고,
 * 그것이 고치려는 결함 그대로입니다. `100dvh` 는 지금 실제로 보이는 높이라
 * 아래 `max-height: 100%` 가 그 값을 받습니다.
 */
.ath-auth-scrim {
  --ath-auth-inset: 56px;
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  /*
   * **위에서부터 앉힙니다.** 가운데 맞춤이던 것이 「눌렀는데 튄다」의 절반
   * 이었습니다 — 카드가 오류 한 줄만큼 자라도 창 전체가 그 절반만큼 위로
   * 올라가서, 자리를 미리 잡아 둔 곳 밖에서 무엇이 자라면 다시 움직입니다.
   */
  align-items: flex-start;
  justify-content: center;
  height: 100dvh;
  padding: var(--ath-auth-inset) 20px;
  overflow-y: auto;
  /* 창 안쪽 스크롤이 끝에 닿았을 때 뒤 페이지가 따라 움직이지 않게. */
  overscroll-behavior: contain;
  background: rgb(0 0 0 / 0.55);
}

/*
 * 창. **높이가 없습니다** — 자기 내용만큼 높고, 화면보다 높아지려 할 때만
 * `max-height` 가 막습니다. 그 두 문장이 316px 빈자리와 877px 넘침을 한꺼번에
 * 답합니다.
 *
 * `max-height: 100%` 는 겉의 **내용 상자**를 가리키므로 위아래 여백이 이미
 * 빠져 있습니다. 값을 두 번 적지 않는다는 뜻이고, 여백을 바꿀 때 한 곳만
 * 바꿉니다.
 */
.ath-auth-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-panel);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

/*
 * 회원가입만 넓습니다. 2단계가 여덟 칸이라 한 줄씩 세우면 1080px 화면에서도
 * 몸통을 스크롤해야 하고, 스크롤할 양식은 끝이 어디인지 안 보이는 양식입니다.
 * 480px 이면 두 칸으로 서서 다섯 줄로 끝납니다.
 */
.ath-auth-modal-signup {
  max-width: 480px;
}

/* ── 머리 ─────────────────────────────────────────────── */

.ath-auth-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--color-line-soft);
}

.ath-auth-bar > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * 10px 라틴 눈썹(강조색, 자간 1.6px) 위에 한글 제목. 사이트의 모든 구획
 * 머리가 이 리듬이고 창도 예외가 아닙니다. 이 창에서 눈썹은 **여기 하나**라,
 * 안쪽 구획들은 눈썹 없이 제목 한 줄로 섭니다.
 */
.ath-auth-bar small {
  display: block;
  margin: 0 0 6px;
  color: var(--color-brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.ath-auth-bar h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/*
 * 닫는 ×. 겉을 눌러 닫는 길이 **일부러** 없으므로(반쯤 채운 여덟 칸을 한 번의
 * 오클릭으로 잃지 않게) 이것과 Escape 가 닫는 길 전부입니다.
 */
.ath-auth-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -3px -4px 0 0;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-nav);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.ath-auth-close:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* ── 몸통: 안에서 스크롤하는 자리 ─────────────────────── */

/*
 * `min-height: 0` 이 규칙의 요점입니다. 세로 flex 안에서 이것이 없으면 자식은
 * 자기 내용보다 작아지지 않고, 그러면 `overflow-y: auto` 가 켜져 있어도 창이
 * `max-height` 를 넘겨 자라며 스크롤 막대가 안 생깁니다.
 */
.ath-auth-body {
  flex: 0 1 auto;
  min-height: 0;
  padding: 22px 24px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── 칸 ───────────────────────────────────────────────── */

.ath-auth-fields {
  display: grid;
  gap: 16px;
}

.ath-auth-field {
  display: block;
  min-width: 0;
}

.ath-auth-field > label,
.ath-auth-label > label {
  display: block;
  margin: 0 0 7px;
  color: var(--color-ink-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ath-auth-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
}

.ath-auth-label > label {
  margin: 0;
}

.ath-auth-badge {
  padding: 2px 8px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/*
 * 상자형 칸.
 *
 * 사이트의 다른 화면은 밑줄 칸(`screens.css`)이고 이 두 창만 상자입니다 —
 * 아이콘이 칸 안에 서고, 회원이 처음 만나는 화면이라 과녁이 커야 합니다.
 * 반지름 12px 은 이 스킨이 칸과 카드에 쓰는 11–18px 안입니다.
 *
 * **둘이 같아 보입니다.** 예전에는 아이디 칸이 강조색 테두리, 비밀번호 칸이
 * 중립 테두리로 쉬고 있었습니다. 같은 종류의 칸이 다르게 생기면 회원은 그
 * 차이를 「하나는 지금 잘못됐다」로 읽습니다. 규칙 하나가 둘을 다 그리고,
 * 강조색은 `:focus-within` 에서만 나옵니다.
 */
.ath-auth-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-field);
  transition: border-color 0.15s ease;
}

.ath-auth-input > svg {
  flex: 0 0 auto;
  color: var(--color-ink-nav);
}

.ath-auth-input:focus-within {
  border-color: var(--color-brand);
}

/*
 * 상자 안의 칸은 자기 테두리를 버립니다. 선택자가 한 겹인 것은 이 창이
 * `#app` 밖이라 `screens.css` 의 입력 규칙이 애초에 안 오기 때문입니다 —
 * 페이지였을 때는 넷을 쌓아야 이겼습니다.
 */
.ath-auth-input input,
.ath-auth-input select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
}

.ath-auth-input input:focus,
.ath-auth-input select:focus {
  outline: 0;
}

/*
 * 브라우저가 채워 준 칸.
 *
 * 크로미움과 사파리는 자기가 채운 칸의 배경과 글자색을 UA 시트에서
 * `!important` 로 덮습니다. 작성자의 `!important` 는 그 위가 아니라 아래라
 * 「더 세게 적으면 이긴다」가 안 통하는 자리입니다. `globals.css` 가 사이트
 * 전체에 전환 지연을 걸어 그 변화를 미뤄 두지만, 전환은 **변화가 있어야**
 * 걸립니다 — 칸이 처음 그려질 때 이미 채워져 있으면 미룰 것이 없고, 이 창은
 * 대화상자라 그 꼴이 됩니다. 그래서 여기에 전환에 안 기대는 규칙이 하나 더
 * 있습니다.
 *
 * 이 스킨은 **배경색을 한 자도 안 적습니다.** 다른 넷은 칸 자신이 자기 배경을
 * 칠해서 덧칠로 되돌려야 하지만(그러려면 칠할 색을 이름으로 대야 합니다),
 * 아테나의 칸은 위에서 보듯 `background: none` 이고 색은 감싸는
 * `.ath-auth-input` 이 `--color-field` 로 칠합니다. 되돌릴 것이 없으니
 * **UA 배경을 안 보이게만** 하면 됩니다 — `background-clip: text` 가 배경을
 * 글자 모양으로 오려 내고, 그 글자는 바로 아래 줄이 우리 색으로 덮습니다.
 * 남는 자리는 원래대로 상자의 `--color-field` 입니다.
 *
 * 덤으로 이 길은 그림자를 안 씁니다. 흔한 답인
 * `box-shadow: inset 0 0 0 100px <색>` 이었다면 이 시트가 그림자를 금지하는
 * 규칙(`athena-auth.spec.ts` 의 「칠한 그라디언트도, 번짐도, 그림자도 없습니다」)
 * 과 부딪혔을 것입니다.
 *
 * 재는 것은 `scripts/skin-autofill-probe.mjs` 입니다.
 */
.ath-auth-input input:-webkit-autofill,
.ath-auth-input input:-webkit-autofill:hover,
.ath-auth-input input:-webkit-autofill:focus,
.ath-auth-input input:-webkit-autofill:active,
.ath-auth-input select:-webkit-autofill {
  -webkit-background-clip: text;
  background-clip: text;
  /*
     UA 는 `color` 를 덮지만 `-webkit-text-fill-color` 는 **다른 속성**이라
     덮이지 않습니다. 위 규칙의 `color` 와 같은 토큰이어야 하고, 어긋나면
     자가 잡습니다. 커서는 `color` 를 따라가므로 따로 적습니다.
  */
  -webkit-text-fill-color: var(--color-ink);
  caret-color: var(--color-ink);
}

.ath-auth-input select {
  /* 화살표를 브라우저에게 맡깁니다 — 직접 그리면 조합마다 색이 어긋납니다. */
  cursor: pointer;
}

.ath-auth-input input::placeholder {
  color: var(--color-ink-nav);
  opacity: 1;
}

/* 중복확인이 붙는 줄. */
.ath-auth-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ath-auth-row > .ath-auth-input {
  flex: 1 1 auto;
}

.ath-auth-check {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--ui-btn-outline-line);
  border-radius: var(--ui-btn-radius);
  background: none;
  color: var(--ui-btn-outline-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.ath-auth-check:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* ── 칸 아래 한 줄들 ──────────────────────────────────── */

.ath-auth-hint {
  margin: 7px 0 0;
  color: var(--color-ink-nav);
  font-size: 12px;
  line-height: 1.55;
}

/*
 * 테더주소의 경고. 이 양식에서 **돌려받을 수 없는 돈**을 말하는 유일한
 * 문장이라 힌트와 다르게 생겨야 합니다 — 힌트만 그리는 판에서 이것이 눈에
 * 안 띄게 섞여 사라지는 것이 막으려는 일입니다.
 */
.ath-auth-notice {
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-brand);
  border-radius: 8px;
  color: var(--color-ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.ath-auth-verdict {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.ath-auth-verdict-idle {
  color: var(--color-ink-nav);
}

.ath-auth-verdict-success {
  color: var(--color-up-text);
}

.ath-auth-verdict-error {
  color: var(--color-danger-text);
}

.ath-auth-error {
  margin: 7px 0 0;
  color: var(--color-danger-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* ── 아이디 저장 ──────────────────────────────────────── */

.ath-auth-remember {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  color: var(--color-ink-soft);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

/* 진짜 체크박스는 남아 있습니다 — 탭과 스페이스로 닿아야 하니까요. */
.ath-auth-remember > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ath-auth-tick {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-line-head);
  border-radius: 5px;
  background: var(--color-field);
  color: transparent;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.ath-auth-remember > input:checked + .ath-auth-tick {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--t-accent-ink, #fff);
}

.ath-auth-remember > input:focus-visible + .ath-auth-tick {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ── 자리를 미리 잡아 둔 알림 칸 ──────────────────────── */

/*
 * 이 화면의 「눌렀는데 튄다」가 여기였습니다.
 *
 * `model.error` 가 비밀번호 칸과 단추 **사이에** 끼워지고 있어서, 한 번
 * 틀리면 카드가 그만큼 자라고 창이 세로 가운데 맞춤이라 전체가 다시 중앙으로
 * 뛰었습니다 — 누르려던 단추가 커서 아래에서 움직였습니다.
 *
 * 처음에는 두 줄치(56px)를 잡았습니다 — 거절 넷 중 가장 긴 것(「이 주소에서는
 * 이용하실 수 없는 계정입니다…」)이 두 줄이라서요. 그런데 비어 있는 날이 대부분이라
 * 「아이디 저장」과 단추 사이가 휑하다는 지적을 받았고(2026-10-22 「간격 너무크더라」),
 * **한 줄치(30px)**로 줄였습니다. 흔한 거절(아이디나 비밀번호가 틀렸다)은 한 줄이라
 * 여전히 단추가 안 움직이고, 가장 긴 거절에서만 한 줄만큼 밀립니다 — 창이 위에
 * 앉아 있어 그때도 창 전체가 뛰지는 않습니다. 30px 은 한 줄(12px × 1.45)과
 * 위아래 6px 의 합입니다.
 */
.ath-auth-alert-slot {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin: 8px 0 0;
}

.ath-auth-alert {
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border-left: 3px solid var(--ui-alert-bad-line);
  background: var(--ui-alert-bad-bg);
  color: var(--ui-alert-bad-ink);
  font-size: 12px;
  line-height: 1.45;
}

/* ── 보내는 단추 ──────────────────────────────────────── */

/*
 * `screens.css` 의 `.ath-btn-submit` 과 **같은 얼굴**이지만 여기서 다시
 * 정합니다 — 그 규칙은 `[data-skin="athena"]` 안에서만 그려지고 이 창은 그
 * 밖입니다. 값이 같은 토큰에서 오므로 조합을 바꿔도 둘이 같이 움직입니다.
 */
.ath-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--ui-btn-h-lg);
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: var(--ui-btn-radius);
  background: var(--ui-btn-primary-bg);
  color: var(--ui-btn-primary-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ath-auth-submit:hover:not(:disabled) {
  background: var(--ui-btn-primary-bg-hover);
}

.ath-auth-submit:disabled {
  background: var(--color-raise);
  color: var(--color-ink-muted);
  cursor: default;
}

.ath-auth-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgb(255 255 255 / 0.45);
  border-top-color: currentcolor;
  border-radius: 50%;
  animation: ath-auth-spin 0.7s linear infinite;
}

@keyframes ath-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * 단추 아래 한 줄. 로그인에서는 「비밀번호를 잊으셨다면」(링크가 아니라
 * 문장입니다 — 손님이 갈 수 있는 길에 고객센터가 없어서 링크는 죽은 단추가
 * 됩니다), 회원가입에서는 등록 정보를 어디에 쓰는지입니다.
 */
.ath-auth-help {
  margin: 14px 0 0;
  color: var(--color-ink-nav);
  font-size: 12px;
  line-height: 1.6;
}

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

.ath-auth-join {
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-line-soft);
}

.ath-auth-join-label {
  margin: 0 0 10px;
  color: var(--color-ink-nav);
  font-size: 12px;
}

.ath-auth-join-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/*
 * 길이 하나뿐인 도메인에서는 그 하나가 줄을 다 씁니다.
 *
 * `:has(> :only-child)` 이고, `>` 가 결함의 수리입니다. 예전 시트는
 * `:has(:only-child)` 였는데 그것은 **자손** 중에 외자식이 있느냐를 묻습니다 —
 * 단추마다 `<span>` 안에 아이콘 `<svg>` 가 하나씩 들어 있어서 길이 둘인
 * 도메인에서도 언제나 참이었고, 그래서 「회원가입」과 「테더회원가입」이 두 칸
 * 격자를 선언해 둔 채로 늘 위아래로 쌓였습니다. 1920 스크린샷에서
 * 발견했습니다.
 */
.ath-auth-join-actions:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.ath-auth-join-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.ath-auth-join-button:hover {
  border-color: var(--color-brand);
}

.ath-auth-join-button > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.ath-auth-join-button b {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 회원가입: 진행 표시 ──────────────────────────────── */

/*
 * 이 화면에서 단계를 이야기하는 **유일한** 자리.
 *
 * 페이지로 바꾸기 전에는 왼쪽 기둥의 목록, 오른쪽 판의 「01 / 03」 조각,
 * 바닥의 「STEP 01」 — 세 자리가 같은 사실을 동시에 말했습니다. 한 화면에서
 * 같은 사실이 세 자리에 있으면 회원은 그 셋이 서로 다른 것을 뜻한다고 읽습니다.
 *
 * 창은 좁으므로 **지금 단계의 낱말만** 글로 남고 나머지는 번호 동그라미입니다.
 * 세 낱말을 9px 로 줄여 넣는 것보다 낫고, 지금 어디인지는 `aria-current` 가
 * 낭독기에 말합니다.
 */
.ath-auth-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.ath-auth-steps > li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--color-line-soft);
}

/* 지금 단계가 남는 폭을 다 씁니다 — 밑줄이 어디까지 왔는지를 그립니다. */
.ath-auth-steps > li[data-state="active"] {
  flex: 1 1 auto;
  border-bottom-color: var(--color-brand);
}

.ath-auth-steps > li[data-state="done"] {
  border-bottom-color: var(--color-line-head);
}

.ath-auth-steps > li b {
  display: none;
}

.ath-auth-steps > li[data-state="active"] b {
  display: block;
  overflow: hidden;
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ath-auth-step-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-nav);
  font-family: var(--font-numeric);
  font-size: 11px;
  font-weight: 700;
}

.ath-auth-steps > li[data-state="active"] .ath-auth-step-mark {
  border-color: transparent;
  background: var(--color-brand);
  color: var(--t-accent-ink, #fff);
}

.ath-auth-steps > li[data-state="done"] .ath-auth-step-mark {
  border-color: var(--color-line-head);
  color: var(--color-ink-soft);
}

/* ── 회원가입: 가입 방식 ──────────────────────────────── */

.ath-auth-routes-block {
  margin: 0 0 22px;
}

.ath-auth-routes-block > h3 {
  margin: 0 0 10px;
  color: var(--color-ink-label);
  font-size: 12px;
  font-weight: 600;
}

.ath-auth-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* 같은 수리 — 위 `.ath-auth-join-actions` 의 문단이 이유입니다. */
.ath-auth-routes:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.ath-auth-route {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.ath-auth-route > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.ath-auth-route b {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.ath-auth-route > svg {
  flex: 0 0 auto;
  color: var(--color-brand);
}

.ath-auth-route:hover {
  border-color: var(--color-brand);
}

.ath-auth-route-on {
  border-color: var(--color-brand);
}

.ath-auth-routes-note {
  margin: 10px 0 0;
}

.ath-auth-routes-note p {
  margin: 0;
  color: var(--color-ink-nav);
  font-size: 12px;
  line-height: 1.65;
}

/*
 * 일반가입의 단서 — 「테더주소를 등록하지 않습니다」. 이 갈래를 고른 회원이
 * 나중에 고객센터에 가지 않고 알 수 있는 유일한 자리라, 위 줄과 붙여 놓지
 * 않고 한 칸 띄웁니다.
 */
.ath-auth-routes-note p + p {
  margin: 7px 0 0;
  color: var(--color-ink-soft);
}

/* ── 회원가입: 칸 격자 ────────────────────────────────── */

.ath-signup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.ath-signup-field-wide {
  grid-column: 1 / -1;
}

.ath-signup-fields + .ath-auth-submit {
  margin: 24px 0 0;
}

/* ── 회원가입: 끝났습니다 ─────────────────────────────── */

.ath-signup-success {
  padding: 4px 0 2px;
  text-align: center;
}

.ath-signup-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 0 16px;
  border: 1px solid var(--color-brand);
  border-radius: 999px;
  color: var(--color-brand);
}

.ath-signup-success h3 {
  margin: 0 0 8px;
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 700;
}

/*
 * 「승인 후 로그인할 수 있습니다」가 여기 섭니다. 가입은 됐는데 아직 못
 * 들어가는 경우가 도메인 설정마다 있고, 그 문장이 없으면 회원은 바로 로그인을
 * 시도하고 거절당한 뒤에야 그것을 압니다.
 */
.ath-signup-success p {
  max-width: 34ch;
  margin: 0 auto;
  color: var(--color-ink-soft);
  font-size: 13px;
  line-height: 1.7;
}

.ath-signup-success .ath-auth-submit {
  margin: 22px 0 0;
}

/* ── 767px 아래: 한 칸 ───────────────────────────────── */

/*
 * 이 스킨이 끊는 폭 셋(`lib/table-cards.ts`) 가운데 하나만 씁니다. 창은
 * 원래 좁아서 판을 접을 것이 없고, 여기서 하는 일은 여백을 줄이고 격자를 한
 * 칸으로 세우는 것뿐입니다 — 그 폭이 이 사이트가 표를 딱지로 접는 폭과
 * 같아야 하는 이유는 회원이 폰을 돌렸을 때 화면마다 다른 폭에서 접히지 않게
 * 하는 것입니다.
 */
@media (max-width: 767px) {
  .ath-auth-scrim {
    --ath-auth-inset: 14px;
    padding: var(--ath-auth-inset) 12px;
  }

  .ath-auth-modal {
    border-radius: 14px;
  }

  .ath-auth-bar {
    padding: 18px 18px 14px;
  }

  .ath-auth-bar h2 {
    font-size: 18px;
  }

  .ath-auth-body {
    padding: 18px 18px 22px;
  }

  .ath-signup-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ath-auth-join-actions,
  .ath-auth-routes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ath-auth-spinner {
    animation-duration: 2.4s;
  }

  .ath-auth-input,
  .ath-auth-check,
  .ath-auth-close,
  .ath-auth-join-button,
  .ath-auth-route,
  .ath-auth-submit,
  .ath-auth-tick {
    transition: none;
  }
}