/* 공유 컴포넌트 — site 셸과 console 셸 양쪽에서 쓰는 크로스-셸 원자.
   base.html 이 tokens.css 다음 · 셸별 CSS(page_css) 이전에 전 페이지 로드한다.
   한 셸에서만 쓰는 규칙은 여기 두지 말 것(그건 nav.css/site.css/console.css). */

/* 사용자 아바타 — 이니셜 사각 칩. nav(액션·드로어)·console 상단바(user_menu.html) 공유.
   중립(ink) 룩으로 통일한다: brand 색은 CTA·활성상태 강조에 아껴 둔다.
   --ink/--paper 토큰 기반이라 라이트/다크에서 자동 반전. */
.avatar {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  font: 700 12px/1 var(--font-mono); letter-spacing: 0;
}
.avatar--lg { width: 36px; height: 36px; font-size: 14px; }