/* SITE-AUTH-CONTINUITY-SEAMLESS-02 — reserve auth layout without visible loading controls. */
.account-actions {
  min-width: 174px;
  min-height: 42px;
  justify-content: flex-end;
}

/* SITE-HOME-SAME-URL-STABILITY-01 — CHECKING must reserve the final geometry
   without looking like a missing/old header. The neutral text makes first paint
   truthful for both signed-in and signed-out users and never claims logout. */
.account-auth-placeholder {
  width: 164px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}

.account-auth-unknown {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.account-auth-retry,
.account-auth-login {
  /* COMMON-UI-POLISH-01 (QA #20) — the same 44px touch floor as 로그인·회원가입. */
  min-height: 44px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.account-auth-retry:hover,
.account-auth-retry:focus-visible,
.account-auth-login:hover,
.account-auth-login:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* SITE-HEADER-AUTH-QA-23-24-01 (#23) — while Account has not answered, the
   neutral 확인 중 stays for a moment; if the wait lasts, 로그인 takes its place
   so a signed-out visitor is never stuck. A quick answer replaces both before
   the delay ends, so nobody sees 로그인 flash. Opacity and pointer-events
   only: the reserved geometry does not move. */
.account-actions[data-auth-state="checking"] {
  position: relative;
}

.account-actions[data-auth-state="checking"] .account-login-while-checking {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  margin-block: auto;
  height: fit-content;
  opacity: 0;
  pointer-events: none;
  animation: lotbi-login-while-checking 0s linear 0.8s forwards;
}

.account-actions[data-auth-state="checking"]:has(.account-login-while-checking) .account-auth-placeholder {
  animation: lotbi-checking-yields 0s linear 0.8s forwards;
}

/* FIX 03 — the same delayed 로그인 beside "계정 확인 중" in the sidebar account
   row (a PC's only account area; the phone drawer's too). */
.sidebar-account-slot[data-auth-state="checking"] {
  position: relative;
}

.sidebar-account-slot[data-auth-state="checking"] .account-login-while-checking {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  margin-block: auto;
  height: fit-content;
  opacity: 0;
  pointer-events: none;
  animation: lotbi-login-while-checking 0s linear 0.8s forwards;
}

/* USER_FIRST_STANDARD 6 — 로그인·회원가입 keep their look; the part that takes a
   tap reaches 6px past the border above and below (36 → 48+; inset is measured
   from the padding box, so -7px for a 1px border). The checking 로그인 above is
   already absolute, so it is left out here. */
.account-actions .account-action:not(.account-login-while-checking) {
  position: relative;
}

.account-actions .account-action:not(.account-login-while-checking)::after {
  content: "";
  position: absolute;
  inset-block: -7px;
  inset-inline: 0;
}

/* USER_FIRST_STANDARD 6 — the look stays the size of the buttons it turns into,
   the part that takes a tap is at least 48px (pointer-events are inherited, so
   it is as inert as the button until the delay ends). */
.account-login-while-checking::after {
  content: "";
  position: absolute;
  inset-block: -9px;
  inset-inline: -6px;
}

@keyframes lotbi-login-while-checking {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes lotbi-checking-yields {
  to {
    opacity: 0;
  }
}

/* SITE-HEADER-AUTH-QA-23-24-01 (#24) — the phone Header's account button.
   Only where the sidebar is folded into the drawer (≤900px) and only once the
   Site session is signed in. */
.mobile-header-account {
  display: none;
}

@media (max-width: 900px) {
  body[data-site-authenticated="true"] .mobile-header-account {
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body[data-site-authenticated="true"] .mobile-header-account:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .mobile-header-account .sidebar-profile-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

/* The callback must stay visually blank during the normal pending/success
   path. The existing callback card is reserved exclusively for a real error. */
body.auth-callback-page:not(.auth-callback-error-page) {
  display: block;
  padding: 0;
  background: #fff;
}

.auth-callback-page:not(.auth-callback-error-page) .auth-callback-shell,
.auth-callback-shell[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .account-actions {
    min-width: 132px;
    min-height: 36px;
  }

  .account-auth-placeholder {
    width: 126px;
    min-height: 36px;
    font-size: 12px;
  }

  .account-auth-unknown {
    min-height: 36px;
    gap: 4px;
  }

  .account-auth-retry,
  .account-auth-login {
    min-height: 44px;
    padding: 0 7px;
    font-size: 11px;
  }
}