/* ==========================================================================
   인증 화면 — 로그인 · 회원가입 · 비밀번호 찾기 · 2단계 인증

   ★ 전달본(2026-08-28)에 <이 화면들이 없다.> 받은 것은 열일곱 장이고
     로그인도 가입도 그중에 없었다. 그래서 우리가 만들어야 하는데,
     지금까지는 exit.css 의 ex-* 로 그려 <혼자만 다른 결>이었다.

   ★ 여기서는 <전달본의 토큰과 규칙만> 쓴다. 새 색도 새 크기도 만들지 않는다.
     · 카드    → .mk-panel   (surface-1 + line + r)
     · 라벨    → .field__label (작고 굵게, 자간 .06em, 대문자, text-4)
     · 입력    → #walletModal .input (44px, panel + line, 포커스에 primary)
     · 단추    → .btn.btn--cta.btn--lg.btn--block
     · 힌트    → .hint
     · 알림    → .note / .note--warn
     그래야 회원이 지갑에서 보던 입력칸과 <같은 것>으로 읽는다.

   ⚠ 왜 베껴 쓰나 — 전달본은 그 규칙들을 <#walletModal 안에> 가둬 두었다.
     로그인 화면은 모달 밖이라 하나도 안 걸린다. 실제로 입력칸이
     브라우저 기본(흰 바탕)으로 떴고 라벨이 옆에 붙어 있었다.
     전달본 파일은 <받은 것>이라 고치지 않고, 같은 값을 여기 옮겨 적는다.

   ⚠ 이 파일은 디자인 CSS <뒤에> 실린다. 겹치는 이름이 없으므로
     전달본 화면은 하나도 안 바뀐다.
   ========================================================================== */

/* ---- 이 파일이 쓰는 색 ---------------------------------------------------
   ⚠ 전달본 tokens.css 에 <오류 색이 없다.> 화면마다 다른 빨강을 적지 않도록
     여기 한 곳에서 정한다. 전달본에 오류 색이 생기면 이 줄만 지운다.
   ------------------------------------------------------------------------ */
:root { --auth-error: #ff5252; }

/* ---- 화면 가운데 한 장 --------------------------------------------------- */
.auth {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.auth__card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* 가입은 칸이 여섯이라 조금 넓게 잡는다 */
.auth__card--wide { max-width: 520px; }

/* ---- 머리 --------------------------------------------------------------- */
.auth__head {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
  text-align: center;
}

.auth__logo {
  font-size: var(--fs-md);
  font-weight: 900;
  letter-spacing: .02em;
}
.auth__logo em { color: var(--primary); font-style: normal; }

.auth__title { font-size: var(--fs-xl); font-weight: 900; }
.auth__lead  { font-size: var(--fs-sm); color: var(--text-4); }

/* ---- 칸 ----------------------------------------------------------------- */
.auth__field { margin-bottom: 16px; }

/* ★★ 짝인 칸 두 개를 한 줄에 (레드 2026-09-13 「회원가입폼 너무크다 스크롤된다」)

   가입은 칸이 다섯이다. 세로로 쌓으니 카드가 861px 이 되어 859px 짜리 창을
   넘었고, 모달이 통째로 스크롤됐다. 이름 두 칸과 비밀번호 두 칸을 각각
   한 줄에 넣어 <두 줄을 줄인다>(약 173px).

   ⚠ 가로 간격만 준다(gap: 0 16px). 세로 간격은 .auth__field 의 margin-bottom 이
     이미 쥐고 있어, 여기서 또 주면 두 배로 벌어진다.

   ⚠ 좁아지면 한 줄로 되돌린다. 390px 화면에서 두 칸을 나란히 두면
     칸이 반씩 좁아져 「비밀번호 확인」 같은 라벨이 잘린다. */
.auth__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 560px) {
  .auth__grid { grid-template-columns: 1fr; }
}

/* 가입 폼은 칸이 많아 <여백도 한 번 더> 줄인다. 로그인(칸 둘)은 그대로 둔다 */
.auth__card--wide .auth__field { margin-bottom: 12px; }
.auth__card--wide .auth__head  { margin-bottom: 16px; }

.auth__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-4);
}
/* 필수 표시. 별표만 두면 무엇이 필수인지 눈에 안 들어온다 */
.auth__label .req { color: var(--auth-error); margin-left: 4px; }

.auth__input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--t-bg);
}
.auth__input:focus { border-color: var(--primary); }
.auth__input::placeholder { color: var(--text-4); }
.auth__input[readonly] { color: var(--text-2); background: rgba(255,255,255,.02); cursor: default; }

/* 칸 아래 한 줄 설명. 전달본 .hint 와 같은 결이다 */
.auth__hint {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-5);
}
.auth__hint--error { color: var(--auth-error); }

/* ---- 라벨 옆 한 줄 (안내 · 계정 찾기) ------------------------------------ */
.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 20px;
  font-size: var(--fs-xs);
}
.auth__note { display: inline-flex; align-items: center; gap: 6px; color: var(--text-5); }
.auth__help { color: var(--text-3); font-weight: 700; }
.auth__help:hover { color: var(--text); }

/* ---- 알림 한 줄 — 전달본 .note 결 --------------------------------------- */
.auth__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.auth__alert--ok    { background: rgba(102,187,106,.12); border-color: rgba(102,187,106,.30); }
.auth__alert--warn  { background: rgba(255,167,38,.12);  border-color: rgba(255,167,38,.30); }
.auth__alert--error { background: rgba(255,82,82,.12);   border-color: rgba(255,82,82,.30); }

/* ---- 동의 체크 — 전달본 .check 결 --------------------------------------- */
.auth__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
}
.auth__check input {
  appearance: none;
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-bg), border-color var(--t-bg);
}
.auth__check input:checked { background: var(--primary); border-color: var(--primary); }
.auth__check input:checked::after { content: "✓"; color: var(--text); font-size: var(--fs-sm); font-weight: 900; }
.auth__check a { color: var(--text); font-weight: 700; text-decoration: underline; }

/* ---- 「또는」 가름선 ------------------------------------------------------ */
.auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-size: var(--fs-xs);
  color: var(--text-5);
}
.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---- 소셜 --------------------------------------------------------------- */
.auth__social { display: grid; gap: 10px; }

/* ---- 발 ----------------------------------------------------------------- */
.auth__foot {
  margin-top: 24px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-4);
}
.auth__foot a { color: var(--primary); font-weight: 800; margin-left: 6px; }

/* ---- 좁은 화면 ---------------------------------------------------------- */
@media (max-width: 640px) {
  .auth { min-height: auto; padding: 24px 0; }
  .auth__card { padding: 24px 20px; }
}

/* ==========================================================================
   비밀번호 · 2단계 인증 — 위와 같은 결

   ★ 이 화면들도 전달본에 없다. exit.css 의 ex-pw-* · ex-verify-* 로
     그리고 있었는데, 그 파일의 색 토큰(--ex-*)은 전달본 토큰과 다른 값이다.
     같은 흐름(로그인 → 코드 → 새 비밀번호)인데 화면마다 결이 달라 보였다.
   ========================================================================== */

/* ---- 단계 한 덩이 -------------------------------------------------------- */
.auth__step { text-align: center; }

.auth__step h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--text);
}

/* 동그란 아이콘. 무슨 단계인지 글자보다 먼저 읽힌다 */
.auth__icon {
  width: 56px; height: 56px;
  margin: 4px auto 16px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.auth__icon--ok {
  background: rgba(102,187,106,.14);
  color: var(--success);
}

.auth__step .auth__lead {
  margin: 9px auto 20px;
  max-width: 340px;
  line-height: 1.6;
}

/* 단계 안의 폼은 왼쪽 정렬로 되돌린다 — 라벨이 가운데 오면 읽기 나쁘다 */
.auth__form { text-align: left; }

/* ---- 코드 여섯 자리 ------------------------------------------------------ */
.auth__code {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: .4em;
  text-align: center;
  outline: none;
  transition: border-color var(--t-bg);
}
.auth__code:focus { border-color: var(--primary); }
.auth__code::placeholder { color: var(--text-5); letter-spacing: .4em; }

/* ---- 가름선 · 발 --------------------------------------------------------- */
.auth__sep {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---- 글자만 있는 단추 (다시 보내기 등) ---------------------------------- */
.auth__linkbtn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--primary);
  font-weight: 800;
}
.auth__linkbtn[disabled] { color: var(--text-5); cursor: default; }


/* ==========================================================================
   자동완성된 칸 — 크롬이 <흰 바탕을 강제로 칠한다>

   ★ 비밀번호를 저장해 둔 회원은 로그인 화면에 들어오자마자
     칸 둔이 <하얀게> 뜨다. 실제로 재여서 확인했다 —
       자동완성된 칸   바탕 #E8F0FE · 글자 검정
       가만히 둔 칸     바탕 #2C2852 · 글자 흰색  (우리 팔레트)
     어두운 사이트에서 그 두 칸만 하얀 종이처럼 드러난다.

   ★ background-color 로는 못 고친다. 크롬이 제 값을 우선하기 때문에
     <안쪽 그림자(inset box-shadow)로 덮는> 것이 유일한 방법이다.
     글자는 -webkit-text-fill-color 로 따로 준다 — color 는 무시된다.

   ⚠ transition 을 아주 길게 둔다. 크롬은 사람이 칸을 만지면
     배경을 <다시 칠하는데>, 전환이 끝나기 전에는 못 칠한다.
     999999s 는 그 다시 칠하기를 사실상 오지 않게 하는 상투적 수법이다.
   ========================================================================== */
.auth__input:-webkit-autofill,
.auth__input:-webkit-autofill:hover,
.auth__input:-webkit-autofill:focus,
.auth__input:-webkit-autofill:active,
.auth__code:-webkit-autofill,
.auth__code:-webkit-autofill:hover,
.auth__code:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
          box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text);
  transition: background-color 999999s ease-in-out 0s;
}

/* ══════════════════════════════════════════════════════════════════════
   로그인 · 가입 모달 (레드 2026-09-13)

   ★ 화면(.auth)을 그대로 쓴다. 여기서는 <감싸는 겹>만 만든다 —
     폼을 한 벌 더 만들면 한쪽만 고치는 날이 온다.

   ⚠ 배경을 눌러도 닫히지 않는다. 마크업에 onClick 이 아예 없다 —
     아이디·비밀번호를 적다가 바깥을 한 번 잘못 누르면 적던 것이 사라진다.
     지갑 창은 배경으로 닫지만 그쪽은 <보는> 화면이고 여기는 <적는> 화면이다.
     닫는 길은 닫기 단추와 Esc 둘이다.
   ══════════════════════════════════════════════════════════════════════ */
.authmodal{
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center;
  padding:24px 16px;
  overflow-y:auto;
}

/* ★ 뒤를 <충분히> 어둡게 (레드 지시). 옅으면 뒤 화면 글자가 비쳐
     입력칸이 어디까지인지 눈이 못 잡는다. */
.authmodal__veil{
  position:fixed; inset:0;
  background:rgba(3, 7, 15, .82);
  backdrop-filter:blur(3px);
  /* ⚠ 누름을 받지 않는다. 받으면 「눌러도 안 닫히네」가 고장으로 읽힌다 */
  pointer-events:none;
}

.authmodal__sheet{
  position:relative; z-index:1;
  width:100%; max-width:520px;
  animation:authmodal-in .16s ease-out;
}
/* 가입은 칸이 많아 넓다 — 화면 쪽 auth__card--wide 와 짝이다 */
.authmodal__sheet:has(.auth__card--wide){ max-width:640px; }

@keyframes authmodal-in{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .authmodal__sheet{ animation:none; }
}

.authmodal__close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--text-3, #9aa4b2);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.authmodal__close:hover{ background:rgba(255,255,255,.12); color:#fff; }
.authmodal__close:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ── 모달 안에서는 바깥 겹의 <화면 채우기>를 끈다 ─────────────────────
   .auth 는 페이지로 쓸 때 화면 높이를 채우고 가운데로 모은다.
   모달 안에서 그대로 두면 상자가 화면만큼 커져 <닫기 단추가 멀어진다>. */
.auth--modal{
  min-height:0; padding:0;
  display:block;
}
.auth--modal .auth__card{ margin:0; width:100%; max-width:none; }

/* 아래 「가입하기 / 로그인」 — 모달에서는 주소가 아니라 갈아타기라 button 이다.
   생김새는 링크와 같아야 한다. */
.auth__link{
  border:0; background:none; padding:0;
  font:inherit; color:var(--primary); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.auth__link:hover{ filter:brightness(1.15); }