/* ═══════════════════════════════════
   avatar.css — 아바타 공통 스타일
   speak-light-verb.html 등에서 사용
═══════════════════════════════════ */

/* ── 기본 원형 표시 ── */
.avatar-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
  background: #e5e7eb;
  user-select: none;
}

/* ── 크기 variants ── */
.avatar-xs  { width: 24px;  height: 24px;  font-size: 14px; }
.avatar-sm  { width: 32px;  height: 32px;  font-size: 19px; }
.avatar-md  { width: 40px;  height: 40px;  font-size: 24px; }
.avatar-lg  { width: 56px;  height: 56px;  font-size: 34px; }
.avatar-xl  { width: 80px;  height: 80px;  font-size: 48px; }

/* ── 아바타 선택 그리드 ── */
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 16px;
}

/* ── 개별 아바타 옵션 ── */
.avatar-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}

.avatar-option:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235,.15);
}

.avatar-option.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}

.avatar-option-emoji {
  font-size: 32px;
  line-height: 1;
}

.avatar-option-label {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}

/* ── 랭킹 아이템 내 아바타 여백 ── */
.rank-item .avatar-display {
  margin-right: 2px;
}