/* Header account: circular profile control with the nickname beside it. */
html body > header > .auth-header-button,
html body.mods-body > header > .auth-header-button,
html body.mod-detail-body > header > .auth-header-button,
html body.studio-body > header > .auth-header-button {
  width: auto !important;
  min-width: 42px !important;
  max-width: 170px !important;
  height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  color: #eef8f1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

html body > header > .auth-header-button > .auth-header-avatar,
html body > header > .auth-header-button > i {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: grid !important;
  place-items: center !important;
  object-fit: cover !important;
  color: #eef1ef !important;
  background: #404441 !important;
  border: 2px solid #747a76 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

html body > header > .auth-header-button > span {
  display: block !important;
  max-width: 112px !important;
  overflow: hidden !important;
  color: #eef8f1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Signed-out state: compact text button. Signed-in users keep the round avatar. */
html body > header > .auth-header-button:not(:has(.auth-header-avatar)) {
  width: auto !important;
  min-width: 74px !important;
  height: 38px !important;
  padding: 0 16px !important;
  justify-content: center !important;
  background: #252525 !important;
  border: 1px solid #555 !important;
  border-radius: 6px !important;
  color: #f5f7f5 !important;
}
html body > header > .auth-header-button:not(:has(.auth-header-avatar)) > i {
  display: none !important;
}
html body > header > .auth-header-button:not(:has(.auth-header-avatar)):hover {
  background: #333 !important;
  border-color: #777 !important;
}
html body > header > .auth-header-button:not(:has(.auth-header-avatar)) > span {
  max-width: none !important;
  font-weight: 800 !important;
}

html body > header > .auth-header-button:hover,
html body > header > .auth-header-button:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  html body > header > .auth-header-button,
  html body.mods-body > header > .auth-header-button,
  html body.mod-detail-body > header > .auth-header-button,
  html body.studio-body > header > .auth-header-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }
  html body > header > .auth-header-button > span { display: none !important; }
  html body > header > .auth-header-button:not(:has(.auth-header-avatar)) {
    width: auto !important;
    min-width: 74px !important;
    max-width: 170px !important;
    padding: 0 12px !important;
  }
  html body > header > .auth-header-button:not(:has(.auth-header-avatar)) > span { display: block !important; }
}

/* Compact, neutral account panel */
html body .auth-dialog:has(.auth-account-hero) {
  width: min(420px, calc(100vw - 24px)) !important;
  padding: 22px !important;
  color: #f2f5f3 !important;
  background: #151917 !important;
  border: 1px solid #343a36 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58) !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-close {
  top: 14px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  color: #aeb6b1 !important;
  background: #202522 !important;
  border-color: #363c38 !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-close:hover { color: #fff !important; background: #292f2b !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-brand { display: none !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-account-hero {
  gap: 15px !important;
  margin: 4px 42px 18px 0 !important;
  padding: 6px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid #303632 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-account-avatar,
html body .auth-dialog:has(.auth-account-hero) .auth-account-avatar.auth-avatar-fallback {
  width: 62px !important;
  height: 62px !important;
  border: 1px solid #59615c !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 1.55rem !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-online-dot { display: none !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-provider-pill { font-size: .68rem !important; letter-spacing: 0 !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-provider-pill i { display: none !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-account-copy h2 { margin: 5px 0 1px !important; font-size: 1.25rem !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-account-copy p { max-width: 245px !important; font-size: .78rem !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-profile-section {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-section-heading {
  padding: 0 0 11px !important;
  border-bottom: 0 !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-section-heading > span { font-size: .82rem !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-section-heading small { font-size: .7rem !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-nickname-row {
  min-height: 72px !important;
  padding: 13px 14px !important;
  border: 1px solid #303632 !important;
  border-radius: 10px !important;
  background: #101411 !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-mini-button {
  min-width: 64px !important;
  min-height: 34px !important;
  border-radius: 7px !important;
  color: #e5e9e6 !important;
  background: #252a27 !important;
  border-color: #404641 !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-account-actions { margin-top: 14px !important; }
html body .auth-dialog:has(.auth-account-hero) .auth-account-actions .auth-secondary {
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  color: #c8ceca !important;
  background: transparent !important;
  border-color: #343a36 !important;
  box-shadow: none !important;
}
html body .auth-dialog:has(.auth-account-hero) .auth-account-actions .auth-secondary:hover { color: #fff !important; background: #202522 !important; transform: none !important; }
@media (max-width: 480px) {
  html body .auth-dialog:has(.auth-account-hero) { padding: 18px !important; }
  html body .auth-dialog:has(.auth-account-hero) .auth-section-heading small { display: none !important; }
}

/* Account popover: neutral palette without decorative accents. */
html body .auth-dialog {
  background:linear-gradient(155deg,rgba(29,32,30,.99),rgba(13,15,14,.99))!important;
  border-color:rgba(255,255,255,.12)!important;
}
html body .auth-dialog::before,
html body .auth-dialog::after {
  display:none!important;
  content:none!important;
}
html body .auth-brand,
html body .auth-provider-pill,
html body .auth-nickname-row small,
html body .auth-nickname-row small i {
  color:#aeb7b1!important;
}
html body .auth-account-hero {
  border-color:rgba(255,255,255,.1)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
}
html body .auth-account-avatar,
html body .auth-preview-avatar {
  border-color:rgba(255,255,255,.28)!important;
  background:#242825!important;
}
html body .auth-avatar-fallback {
  color:#f2f4f2!important;
  background:linear-gradient(135deg,#777d79,#454a47)!important;
}
html body .auth-online-dot {
  border-color:#171a18!important;
  background:#aeb5b0!important;
}
html body .auth-mini-button:hover,
html body .auth-secondary:hover {
  border-color:rgba(255,255,255,.2)!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
html body .auth-account-actions .auth-secondary {
  color:#e7ebe8!important;
}

html body > header > .auth-header-button:focus-visible {
  outline: 2px solid #c6d0c9;
  outline-offset: 3px;
}

/* Signed-out header action: original soft pill treatment inspired by familiar
   account controls, without copying the supplied component. */
html body > header > .auth-header-button:not(:has(.auth-header-avatar)),
html body.mods-body > header > .auth-header-button:not(:has(.auth-header-avatar)),
html body.mod-detail-body > header > .auth-header-button:not(:has(.auth-header-avatar)),
html body.studio-body > header > .auth-header-button:not(:has(.auth-header-avatar)) {
  position:static!important;
  inset:auto!important;
  width:108px!important;
  max-width:108px!important;
  min-width:100px!important;
  height:42px!important;
  padding:0 20px!important;
  gap:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  color:#f4f7f5!important;
  background:linear-gradient(180deg,#2b2e2c,#202321)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:999px!important;
  box-shadow:0 5px 16px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.1)!important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
html body > header > .auth-header-button:not(:has(.auth-header-avatar))::before {
  content:none!important;
  display:none!important;
}
html body > header > .auth-header-button:not(:has(.auth-header-avatar)) > i {
  display:none!important;
}
html body > header > .auth-header-button:not(:has(.auth-header-avatar)):hover {
  transform:none!important;
  color:#fff!important;
  background:linear-gradient(180deg,#363a37,#272b28)!important;
  border-color:rgba(255,255,255,.34)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.14)!important;
}
html body > header > .auth-header-button:not(:has(.auth-header-avatar)):hover::before,
html body > header > .auth-header-button:not(:has(.auth-header-avatar)):focus-visible::before { content:none!important;display:none!important; }
html body > header > .auth-header-button:not(:has(.auth-header-avatar)):active {
  transform:none!important;
}
@media(max-width:900px){
  html body > header > .auth-header-button:not(:has(.auth-header-avatar)),
  html body > header > .auth-header-button:not(:has(.auth-header-avatar)):hover,
  html body > header > .auth-header-button:not(:has(.auth-header-avatar)):active{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  html body > header > .auth-header-button:not(:has(.auth-header-avatar))::before{display:none!important}
}

/* Use the spare right-side header space and keep the account control aligned. */
html body > header,
html body.mods-body > header,
html body.mod-detail-body > header,
html body.studio-body > header {
  padding-right: clamp(16px, 1.5vw, 28px) !important;
}
html body > header > .auth-header-button,
html body.mods-body > header > .auth-header-button,
html body.mod-detail-body > header > .auth-header-button,
html body.studio-body > header > .auth-header-button {
  justify-self: end !important;
  margin-right: 0 !important;
}
@media (max-width: 1220px) {
  html body > header,
  html body.mods-body > header,
  html body.mod-detail-body > header,
  html body.studio-body > header { padding-right: 16px !important; }
}
@media (max-width: 600px) {
  html body > header,
  html body.mods-body > header,
  html body.mod-detail-body > header,
  html body.studio-body > header { padding-right: 8px !important; }
}

/* Mobile account view: compact popover under the account button. */
@media (max-width: 640px) {
  html body .auth-modal:has(.auth-account-hero) {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .auth-modal:has(.auth-account-hero) .auth-backdrop {
    z-index: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .auth-dialog:has(.auth-account-hero) {
    position: fixed !important;
    z-index: 2 !important;
    top: var(--auth-anchor-top, 64px) !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(390px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - var(--auth-anchor-top, 64px) - 10px) !important;
    margin: 0 !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    transform: none !important;
    transform-origin: top right !important;
    animation: auth-account-mobile-pop .18s cubic-bezier(.2,.8,.2,1) !important;
  }
  html body .auth-dialog:has(.auth-account-hero) .auth-account-hero {
    margin-right: 38px !important;
  }
  html body .auth-dialog:has(.auth-account-hero) .auth-close {
    z-index: 20 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  @keyframes auth-account-mobile-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: none; }
  }
}

/* hidden 속성은 모든 반응형 표시 규칙보다 항상 우선합니다. */
html body .auth-modal[hidden],
html body .auth-modal[hidden]:has(.auth-account-hero) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}