/* 계정 안전 — /forgot · /reset/:token · /ops/reset(인증 화면 문법 x-auth 위에 그룹 목록), 로그인 화면의 '비밀번호를 잊었어요'.
   /me 계정 삭제 시트와 관리 › 멤버 시트의 재설정 링크는 기존 .gl-* · .adm-* 문법만 쓴다(여기 규칙 없음) */

/* 로그인 — 비밀번호 칸 머리 오른쪽의 조용한 링크. DOM은 입력 뒤라 Tab 순서가 이메일 → 비밀번호 → 이 링크 */
body.x-auth .acct-pwfield { position: relative; }
body.x-auth .acct-pwfield > .acct-forgot {
  position: absolute; top: 0; right: 0; font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-3);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3);
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
body.x-auth .acct-pwfield > .acct-forgot::after { content: ''; position: absolute; inset: -12px -8px; }
@media (hover: hover) and (pointer: fine) { body.x-auth .acct-pwfield > .acct-forgot:hover { color: var(--ink); text-decoration-color: var(--ink); } }

/* 안내·재설정·운영자 화면 — 가운데 머리(킥커 · 제목 · 설명) 아래는 왼쪽 정렬의 묶음 */
body.x-acct .acct-card .gl { margin-top: var(--s-8); text-align: left; }
body.x-acct .acct-card .gl + .gl { margin-top: var(--s-7); }
body.x-acct .acct-card ol.gl-box { margin: 0; padding: 0; list-style: none; }
body.x-acct .acct-steps .gl-ic { font: 600 var(--t-ui)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
body.x-acct .acct-card .gl-row { align-items: flex-start; padding-top: var(--s-3); padding-bottom: var(--s-3); }
body.x-acct .acct-card .gl-row > .gl-ic { margin-top: 2px; }
body.x-acct .acct-card .gl-row.adm-copy { align-items: center; }
body.x-acct .acct-card .gl-s { word-break: keep-all; overflow-wrap: anywhere; }
body.x-acct .acct-card .gl-s.mono { white-space: normal; word-break: break-all; font-family: var(--font-mono); }
body.x-acct .acct-card .gl-s a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
body.x-acct .acct-card .auth-sub strong { font-weight: 600; color: var(--ink); }
body.x-acct main .acct-card .acct-back { margin-top: var(--s-8); }
body.x-acct .acct-card .acct-made + form { margin-top: var(--s-8); }
body.x-acct .acct-card .acct-err { margin: calc(-1 * var(--s-3)) 0 var(--s-4); text-align: left; }

/* 관리 › 멤버 시트의 재설정 링크 행 — 주소는 줄바꿈해 전부 보이게(390에서 말줄임으로 잘리지 않게), 만료 시각은 제목 옆에 조용히 */
.acct-link .gl-s.mono { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; font-family: var(--font-mono); }
.acct-until { font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-3); }
.acct-until:empty { display: none; }
/* 계정 삭제 시트 — 지워지는 것·남는 것 목록, 끝에 굵게 '되돌릴 수 없어요' */
.me-sheet .acct-del-list { margin: 0; padding-left: 1.15em; list-style: disc; }
.me-sheet .acct-del-list li { padding-left: 2px; }
.me-sheet .acct-del-list li + li { margin-top: var(--s-1); }
.me-sheet .acct-del-list + .acct-del-warn { margin-top: calc(-1 * var(--s-3)); }
.me-sheet .acct-del-warn strong { font-weight: 600; color: var(--ink); }
/* 삭제 시트의 오류 문구 — 바로 아래 도움말(.gl-f)과 같은 들여쓰기(휴대폰은 .gl-f가 s-1로 줄어든다) */
html body .me-sheet .me-delf .gl-box + .field-err[data-del-err] { padding: 0 var(--s-4); }
@media (max-width: 699px) { html body .me-sheet .me-delf .gl-box + .field-err[data-del-err] { padding: 0 var(--s-1); } }

/* 2단계 인증(/me/2fa) — QR은 흰 바탕 정사각(인증 앱이 읽기 쉽게, 어두운 테마에서도 흰 판), 키·복구 코드는 고정폭 */
body.x-acct .mfa-qr { width: 208px; max-width: 100%; margin: 0 auto var(--s-6); padding: var(--s-3); border-radius: var(--r-md, 12px); background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
body.x-acct .mfa-qr svg { display: block; width: 100%; height: auto; }
body.x-acct .mfa-codes { display: grid; grid-template-columns: 1fr 1fr; }
body.x-acct .mfa-codes .gl-row { justify-content: center; }
body.x-acct .mfa-codes .gl-t { flex: 1; text-align: center; }
body.x-acct .mfa-codes .gl-t { font-family: var(--font-mono); letter-spacing: 0.02em; }
body.x-acct .mfa-codes .gl-row:nth-child(2)::before { content: none; } /* 두 칸 격자 — 첫 줄 오른쪽 칸에 윗선이 생기지 않게(왼쪽·오른쪽 헤어라인을 맞춘다) */
body.x-acct .mfa-in { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
body.x-acct .acct-card .mfa-copy { margin: var(--s-6) 0 var(--s-3); }
body.x-acct .acct-card .gl + form, body.x-acct .acct-card .gl form { margin-top: var(--s-4); }
/* 앱 모드 — 재설정 링크의 계정이 이 기기에 로그인한 사람과 다를 때 폼 위 고정 안내 한 줄(SPEC-appmode §4) */
body.x-acct .acct-other { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--wash-1); font: 400 var(--t-footnote)/1.5 var(--font); color: var(--ink-2); text-align: left; }
body.x-acct .acct-other strong { font-weight: 600; color: var(--ink); }

/* 가입 — maru ID 칸(필수). '{호스트}/@' 접두 + 입력(48 · 16px) · 아래 한 줄은 도움말이자 검사 줄(쓸 수 있으면 잉크 + 체크, 막히면 빨강) · 추천 칩(한 줄, 넘치면 옆으로) */
body.x-auth main .su-id-in > span { flex: none; padding-left: 16px; font: 400 var(--t-body)/1 var(--font); letter-spacing: -0.01em; color: var(--ink-3); }
body.x-auth main .su-id-in > input { min-width: 0; font: 400 var(--t-body)/1 var(--font); letter-spacing: -0.01em; }
body.x-auth main .su-id-in:has(> input[aria-invalid="true"]) { border-color: var(--danger); box-shadow: none; }
body.x-auth main .su-id-in:has(> input[aria-invalid="true"]):focus-within { box-shadow: var(--ring-danger); }
body.x-auth .su-id-st { display: flex; align-items: center; gap: 4px; min-height: 20px; margin: var(--s-2) 0 0; font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-3); }
body.x-auth .su-id-st.is-err { color: var(--danger); font-weight: 500; }
body.x-auth .su-id-st.is-ok { color: var(--ink); font-weight: 500; }
body.x-auth .su-id-st svg { flex: none; width: 16px; height: 16px; animation: su-id-tick var(--dur-2) var(--ease-out); }
@keyframes su-id-tick { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
body.x-auth .su-id-sugg { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); padding: 2px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
body.x-auth .su-id-sugg::-webkit-scrollbar { display: none; }
body.x-auth .su-id-sugg[hidden] { display: none; }
/* 한 번 보인 칩 줄은 비어도 자리를 지킨다(public/signup-id.js가 is-held) — 칩이 들락날락할 때 아래 폼이 흔들리지 않게 */
body.x-auth .su-id-sugg { min-height: calc(var(--h-sm) + 4px); }
body.x-auth .su-id-sugg.is-held { visibility: hidden; }
body.x-auth .su-id-sugg-h { flex: none; margin-right: 2px; font: 500 var(--t-footnote)/1 var(--font); color: var(--ink-3); }
body.x-auth .su-id-chips { display: contents; }
body.x-auth .su-id-chip {
  position: relative; flex: none; display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--wash-2); color: var(--ink-2); font: 500 var(--t-footnote)/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
body.x-auth .su-id-chip:active { scale: var(--m-press-chip); transition-duration: var(--dur-1); }
body.x-auth .su-id-chip:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) { body.x-auth .su-id-chip:hover { background: var(--wash-3); color: var(--ink); } }
/* 휴대폰 — 가입·로그인 칸의 값은 모두 16px(iOS는 16px보다 작은 칸에 포커스하면 화면을 키운다).
   v5.css의 :where 16px 규칙을 v4-platform.css(15px)가 덮어서 여기서 다시 — ID 칸만 크고 굵어 보이지 않게 네 칸이 같은 크기 · 굵기 */
@media (max-width: 699px) {
  body.x-auth main :is(.input, .input-prefix > span, .input-prefix > input) { font-size: 16px; }
  body.x-auth .su-id-chip { height: 36px; }
  body.x-auth .su-id-sugg { min-height: 40px; }
}
@media (max-width: 359px) { body.x-auth .su-id-host { display: none; } }
@media (prefers-reduced-motion: reduce) { body.x-auth .su-id-st svg { animation: none; } }