/*
 * 로그인 · 회원가입 창 — 포세이돈 (2026-09-04, 「로그인, 회원가입폼도 디자인
 * 해줘」).
 *
 * ── 왜 `[data-skin]` 접두사가 없는가 ───────────────────────
 *
 * 다른 포세이돈 시트는 전부 `[data-skin="poseidon"]` 으로 감쌉니다. 이 시트만
 * 다른 이유는 **두 창이 그 울타리 밖에 그려지기 때문**입니다:
 * `AuthModalProvider` 는 창 둘을 `children` 의 **형제**로 놓고, `data-skin` 은
 * 그 `children` 안쪽 `#app` 에 붙습니다. 그래서 접두사를 붙이면 이 시트는
 * 창에 한 줄도 닿지 않습니다 — 원본 클래스(`popup_window`·`signup-grid`)가
 * 아무 모양 없이 무너져 있던 것이 정확히 그 이유였습니다.
 *
 * 새는 곳은 없습니다. 시트가 스킨별로 실리므로(`SKIN_ASSETS.poseidon
 * .globalSheets`) 이 파일은 포세이돈 문서에만 옵니다. 이름도 `.ps-auth*` 로
 * 이 창에서만 씁니다.
 *
 * 창의 테두리·제목줄·닫기는 공용 `AuthWindow` 의 것입니다(모든 스킨이 같이
 * 씀). 여기서 그리는 것은 그 **안쪽**뿐입니다.
 */

.ps-auth {
  /*
   * 조합 씨앗을 **`:root` 에서 직접** 읽습니다. 다른 시트는
   * `[data-skin]` 안쪽의 `--p-*` 를 읽는데, 이 창은 그 울타리 밖에
   * 그려지므로(머리말 참조) 거기까지 안 닿습니다. 씨앗이 `:root` 에
   * 부어지는 이유가 이것입니다 — 몸통은 금색인데 가입 창만 파란 일이
   * 안 생기게.
   */
  --a-accent: var(--t-accent, #1fb6ff);
  --a-accent-rgb: var(--t-accent-rgb, 31 182 255);
  --a-accent-deep: var(--t-accent-deep, #0a8fd6);
  --a-accent-ink: var(--t-accent-ink, #ffffff);
  --a-money: var(--t-money, #e8bd55);
  --a-bg: var(--t-panel, #141828);
  --a-sunk: var(--t-sunk, #0d1220);
  --a-line: rgb(var(--t-veil-rgb, 255 255 255) / 0.1);
  --a-line-strong: rgb(var(--t-veil-rgb, 255 255 255) / 0.18);
  /*
   * 글자도 조합을 탑니다.
   *
   * 여기 두 값이 `#eaeaea` · `#8a91a8` 로 박혀 있었습니다. 어두운 조합만
   * 있을 때는 맞는 값이었지만, 판(`--a-bg`)은 조합을 따라가는데 글자만
   * 안 따라가면 **밝은 조합에서 흰 판에 흰 글자**가 됩니다 — 2026-09-06
   * 지적 「로그인 회원가입창에도 가입버튼 흰색이라 안 보이는게 있어」.
   * 안 보이던 것은 단추만이 아니라 아이디·비밀번호 칸에 **치는 글자**도
   * 마찬가지였습니다.
   *
   * 슬레이트의 씨앗이 정확히 이 두 값이라 어두운 기본은 그대로입니다.
   */
  --a-text: var(--t-ink, #eaeaea);
  --a-muted: var(--t-ink-muted, #8a91a8);
  /* 뜻이 있는 셋 — 조합에 안 딸립니다. */
  --a-ok: #3ddc97;
  --a-no: #ff5a5a;
  --a-warn: #ffb347;
  /*
   * 경고를 **글자로** 쓸 때. 뜻은 주황에 두고 밝기만 조합의 글자색 쪽으로
   * 당깁니다 — `ui.css` 의 `--p-ink-warn` 과 같은 값이고, 같은 값을 두 번
   * 적는 이유는 그쪽이 `[data-skin]` 울타리 **안**에 살기 때문입니다. 이
   * 창은 그 밖에 그려지므로(머리말) 거기까지 안 닿고, `var()` 가 못 찾으면
   * 대체값도 없이 색이 통째로 무효가 되어 테더 경고문이 본문색으로
   * 떨어져 있었습니다.
   */
  --a-ink-warn: color-mix(in srgb, #e0a53a 55%, var(--t-ink, #eaeaea));
  /*
   * 판 위에 **글자로** 쓰는 강조색. 강조색을 본문 글자색 쪽으로 당겨서, 어두운 조합에서는 밝게 · 밝은 조합에서는 진하게
   * 나옵니다. `--t-accent-soft` 는 조합마다 뜻이 달라(white 는 진한 파랑, sand 는 옅은 베이지 틴트) 글자에 쓰면 sand 에서
   * 「일반가입」 · 안내 상자가 흰 판 위 베이지로 안 보였습니다(2026-11-04 지적).
   */
  --a-accent-text: color-mix(in srgb, var(--a-accent) 60%, var(--a-text));
  --a-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  display: flex;
  flex-direction: column;
  padding: 0;
  color: var(--a-text);
  font-size: 14px;
}

/* ── 머리 — 로고와 한 줄 ───────────────────────────────────── */

.ps-auth__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 24px 20px;
  text-align: center;
  /* 평평한 바탕. 파란 빛이 위에서 번지던 것을 없앴습니다 — 창을 여는 것마다
     후광이 있으면 어느 것이 중요한지가 없어집니다. */
  background: var(--a-sunk);
  border-bottom: 1px solid var(--a-line);
}
.ps-auth__logo {
  max-width: 168px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/*
 * 제목 위의 표시.
 *
 * 둥근 사각형에 방사형 파란 빛을 깔고 아이콘을 앉혀 두었습니다. 그런
 * 「빛나는 아이콘 배지」가 화면마다 있으면 만든 티가 납니다
 * (2026-09-04 사용자 지적 「전부 너무 AI스러운데」). 글자만 남기고
 * 아이콘은 작게, 색은 한 톤으로.
 */
.ps-auth__mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--a-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ps-auth__mark i {
  font-size: 13px;
  color: var(--a-accent);
}
.ps-auth__lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--a-muted);
  word-break: keep-all;
}
.ps-auth__note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgb(var(--a-accent-rgb) / 0.08);
  border: 1px solid rgb(var(--a-accent-rgb) / 0.22);
  font-size: 12px;
  line-height: 1.6;
  color: var(--a-accent-text);
  text-align: left;
  word-break: keep-all;
}

/* ── 몸 ────────────────────────────────────────────────────── */

.ps-auth__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 22px;
  background: var(--a-bg);
}
/* 가입 폼은 폰보다 깁니다 — 제목줄과 바닥 단추는 두고 몸만 구릅니다. */
.ps-auth__body--scroll {
  max-height: min(560px, calc(100dvh - 260px));
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.ps-auth__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--a-line);
  background: var(--a-sunk);
}
.ps-auth__foot p {
  margin: 0;
  font-size: 12.5px;
  color: var(--a-muted);
  text-align: center;
}
/*
 * 칸 수가 단추 수를 따릅니다. `1fr 1fr` 로 못박아 두면 테더를 안 파는
 * 도메인에서 「회원가입」 하나가 반폭으로 서고 그 옆이 빈 칸으로 남습니다.
 */
.ps-auth__foot-pair {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}

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

.ps-auth__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-auth__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ps-auth__field > label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-ink-muted, #8a91a8);
}
.ps-auth__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--a-sunk);
  border: 1px solid var(--a-line-strong);
  color: var(--a-text);
  font-size: 14.5px;
  outline: none;
  transition: border-color 150ms var(--a-ease), box-shadow 150ms var(--a-ease);
}
.ps-auth__input::placeholder {
  color: rgb(var(--t-veil-rgb, 255 255 255) / 0.22);
}
/* 은행 고르기 — 글자 칸과 같은 상자에 화살표만 브라우저 것. 펼친 목록의 색은 `globals.css` 가 조합에서 줍니다. */
.ps-auth__select {
  cursor: pointer;
}
.ps-auth__input:focus {
  border-color: var(--a-accent);
}

/*
 * 브라우저가 채워 준 칸. UA 가 배경과 글자색을 `!important` 로 덮는 자리라
 * 「더 세게」로는 못 이깁니다. `globals.css` 가 사이트 전체에 전환 지연을
 * 걸어 두었지만 전환은 **변화가 있어야** 걸리고, 대화상자 안의 칸은 처음
 * 그려질 때 이미 채워져 있을 수 있습니다. 그래서 전환에 안 기대는 규칙을
 * 칸 바로 옆에 둡니다.
 *
 * 색은 위 `.ps-auth__input` 이 이미 쓰는 토큰을 그대로 가리킵니다 — 베껴
 * 적으면 조합이 바뀌는 날 이 두 줄만 옛 색으로 남습니다.
 *
 * 테두리는 `--a-line-strong` 으로 불투명해서 그 밑으로 UA 색이 비칠 자리가
 * 없습니다. `background-clip` 이 없는 까닭입니다.
 */
.ps-auth__input:-webkit-autofill,
.ps-auth__input:-webkit-autofill:hover,
.ps-auth__input:-webkit-autofill:focus,
.ps-auth__input:-webkit-autofill:active {
  /* 46px 짜리 칸을 덮기만 하면 되는 수입니다. 번짐 0 이라 곧 칠입니다. */
  box-shadow: inset 0 0 0 100px var(--a-sunk);
  -webkit-text-fill-color: var(--a-text);
  caret-color: var(--a-text);
}
/* 중복확인은 칸 **옆**에 — 아래에 두면 칸과 답 사이에 단추가 낍니다. */
.ps-auth__row {
  display: flex;
  gap: 8px;
}
.ps-auth__row .ps-auth__input {
  min-width: 0;
  flex: 1;
}
.ps-auth__check {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 15px;
  border-radius: 6px;
  border: 1px solid var(--a-line-strong);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  color: var(--a-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms var(--a-ease), background 150ms var(--a-ease);
}
.ps-auth__check:hover {
  border-color: var(--a-accent);
  background: rgb(var(--a-accent-rgb) / 0.12);
}

/* 칸 밑에 붙는 말 — 힌트·경고·거절·판정. 색이 곧 뜻입니다. */
.ps-auth__say {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--a-muted);
  word-break: keep-all;
}
.ps-auth__say--ok {
  color: var(--a-ok);
}
.ps-auth__say--no {
  color: var(--a-no);
}
/*
 * 되찾을 수 없는 것에 대한 경고(테더주소). 다른 망으로 나간 출금은 되돌릴
 * 방법이 없어서, 힌트와 **다른 무게**로 그립니다.
 */
.ps-auth__warn {
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  border-left: 3px solid var(--a-warn);
  background: rgba(255, 179, 71, 0.09);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--a-ink-warn);
  word-break: keep-all;
}

/* ── 가입 갈래 고르기 ──────────────────────────────────────── */

.ps-auth__flows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ps-auth__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--a-line-strong);
  background: var(--a-sunk);
  color: var(--a-muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms var(--a-ease), background 150ms var(--a-ease),
    color 150ms var(--a-ease);
}
.ps-auth__flow:hover {
  border-color: rgb(var(--a-accent-rgb) / 0.5);
  color: var(--a-text);
}
/*
 * 고른 갈래.
 *
 * 잉크색이 아니라 **판 위 글자용 강조색**(`--a-accent-text`)입니다. 잉크색은 「강조색을 꽉 채운 면
 * 위」의 답인데 여기 바탕은 강조 12% 틴트라 제 판에 가깝습니다. 흰 조합의
 * 잉크색은 흰색이므로, 그대로 두면 옅은 파란 칸에 흰 글자가 앉아 「일반가입」
 * 이 눌린 채로 안 읽혔습니다.
 */
.ps-auth__flow[aria-pressed="true"] {
  border-color: var(--a-accent);
  background: rgb(var(--a-accent-rgb) / 0.12);
  color: var(--a-accent-text);
}
.ps-auth__legend {
  margin: 0 0 -6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-ink-muted, #8a91a8);
}

/* ── 단추 ──────────────────────────────────────────────────── */

.ps-auth__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 150ms var(--a-ease), transform 120ms var(--a-ease),
    border-color 150ms var(--a-ease), background 150ms var(--a-ease);
}
.ps-auth__btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.ps-auth__btn:active:not(:disabled) {
  transform: translateY(1px);
}
.ps-auth__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ps-auth__btn--primary {
  background: var(--a-accent-deep);
  color: var(--a-accent-ink);
}
.ps-auth__btn--ghost {
  height: 44px;
  font-size: 13.5px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  border-color: var(--a-line-strong);
  color: var(--a-text);
}
.ps-auth__btn--ghost:hover:not(:disabled) {
  border-color: var(--a-accent);
  background: rgb(var(--a-accent-rgb) / 0.12);
}

/* 보냈고 끝난 상태 */
.ps-auth__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  color: var(--a-text);
  word-break: keep-all;
}
.ps-auth__done i {
  font-size: 34px;
  color: var(--a-ok);
}

@media (max-width: 480px) {
  .ps-auth__head {
    padding: 20px 16px 16px;
  }
  .ps-auth__body,
  .ps-auth__foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ps-auth__flows,
  .ps-auth__foot-pair {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}