/* 로그인·계정 관리 화면 — 기존 app.css 의 토큰(--surface, --accent …)을 그대로 쓴다. */

/* 담당자에게는 관리자 전용 버튼을 숨긴다(권한 검사는 서버가 한다 — 이건 화면 정리용). */
body.role-staff [data-admin],
body.role-staff .admin-only { display: none !important; }

.auth-screen {
  position: fixed; inset: 0; z-index: 300;
  background: var(--page-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-md); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand h1 { font-size: 18px; font-weight: 700; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form h2 { font-size: 16px; font-weight: 700; }
.auth-submit { justify-content: center; padding: 10px 14px; font-size: 14px; }
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-msg { font-size: 12.5px; color: var(--critical); min-height: 18px; white-space: pre-line; }
.auth-msg.ok { color: var(--good-ink); }
.auth-switch { font-size: 12.5px; color: var(--ink-muted); text-align: center; }

.my-account-info { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; font-size: 13.5px; }
.my-account-info dt { color: var(--ink-muted); }
.my-account-info dd { margin: 0; color: var(--ink); }

.accounts-section { margin-top: 16px; }
.accounts-section h3 {
  font-size: 12px; font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
table.accounts { width: 100%; border-collapse: collapse; font-size: 13px; }
table.accounts th, table.accounts td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
table.accounts th { font-size: 11.5px; color: var(--ink-secondary); background: var(--surface-2); }
table.accounts td .row-actions { display: flex; gap: 6px; }
table.accounts select { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 4px 6px; color: var(--ink); font-family: inherit; }
.accounts-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); }