/* ============================================================
   QQ Market Board — 인증(로그인 게이트/모달) 스타일
   토큰(tokens.css) 변수만 참조 · 라이트/다크 자동 대응
   ============================================================ */
.auth-toggle { font-size: 15px; }

/* 모달 + 페이지 게이트 공용 카드 */
.auth-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-modal.hidden { display: none; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }

.auth-gate { position: fixed; inset: var(--gnb-h) 0 0 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }

.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: var(--sp-6) var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); text-align: center;
}
.auth-brand { font-weight: 700; color: var(--text); font-size: var(--fs-md); }
.auth-logo {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: var(--r-sm); background: var(--qq-gold); color: #1a1400; font-weight: 800; font-size: var(--fs-xs); margin-right: 4px; vertical-align: middle;
}
.auth-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-top: var(--sp-1); }
.auth-sub { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.auth-input {
  width: 100%; box-sizing: border-box; padding: 11px 12px; margin-top: var(--sp-1);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); font-size: var(--fs-md); font-family: var(--ff);
}
.auth-input:focus { outline: 2px solid var(--qq-gold); outline-offset: 1px; border-color: var(--qq-gold); }
.auth-btn {
  width: 100%; padding: 11px 12px; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--qq-gold); color: #1a1400; font-weight: 700; font-size: var(--fs-md); font-family: var(--ff);
}
.auth-btn:hover { background: var(--qq-gold-dim); }
.auth-msg { min-height: 16px; font-size: var(--fs-xs); color: var(--text-3); }

/* v2: 탭·가입폼·마이/관리자 */
.auth-card--wide { max-width: 420px; text-align: left; }
.auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); }
.auth-tab { flex: 1; border: 0; background: transparent; color: var(--text-3); padding: 8px 4px; cursor: pointer; font-size: var(--fs-xs); font-family: var(--ff); border-bottom: 2px solid transparent; }
.auth-tab.is-active { color: var(--text); font-weight: 700; border-bottom-color: var(--qq-gold); }
.auth-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-radio { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); padding: 2px 0; }
.auth-radio span:first-child { color: var(--text-3); font-size: var(--fs-xs); }
.auth-radio label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.auth-check { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; }
.auth-check input { margin-top: 2px; }
.auth-check a { color: var(--qq-gold); }

/* 마이페이지 / 관리자 콘솔 공통 카드 */
.acc-wrap { max-width: 720px; margin: 0 auto; }
.acc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.acc-card h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); color: var(--text); }
.acc-row { display: flex; gap: var(--sp-2); align-items: center; margin: 6px 0; flex-wrap: wrap; }
.acc-input { flex: 1; min-width: 180px; padding: 9px 11px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-family: var(--ff); }
.acc-btn { padding: 9px 16px; border: 0; border-radius: var(--r-md); background: var(--qq-gold); color: #1a1400; font-weight: 700; cursor: pointer; font-family: var(--ff); }
.acc-btn.danger { background: var(--up); color: #fff; }
.acc-btn.ghost { background: var(--surface-2); color: var(--text-2); }
.acc-msg { font-size: var(--fs-xs); min-height: 15px; color: var(--text-3); }
.acc-msg.is-err { color: var(--up); font-weight: 600; }
.acc-msg.is-ok { color: var(--sig-new); font-weight: 600; }
.usr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.usr-table th, .usr-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border-soft); color: var(--text-2); }
.usr-table th { color: var(--text-3); font-weight: 600; white-space: nowrap; }
.usr-badge { font-size: var(--fs-2xs); border-radius: var(--r-pill); padding: 1px 8px; }
.usr-badge.on { background: rgba(22,199,132,.15); color: var(--sig-new); }
.usr-badge.off { background: var(--surface-2); color: var(--text-3); }
.usr-badge.banned { background: rgba(246,70,93,.15); color: var(--up); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }

.auth-msg.is-err { color: var(--up); font-weight: 600; }
.auth-note { font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.5; margin-top: var(--sp-1); }
.auth-links { text-align: center; font-size: var(--fs-xs); margin-top: 2px; }
.auth-links a { color: var(--text-3); cursor: pointer; text-decoration: none; }
.auth-links a:hover { color: var(--qq-gold); text-decoration: underline; }