/* 회원 프로필 아바타(원형) — rl_member_avatar() 단일 출처 렌더. 여러 surface(계정 관리·내 정보 등) 재사용.
   사진 있으면 __img(cover), 없으면 --empty 원형 플레이스홀더(실루엣). 색·간격·radius는 토큰만. */
.rl-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rl-r-full);
    overflow: hidden;
    background: var(--rl-surface-2);
    color: var(--rl-text-4);
}
.rl-avatar--sm { width: var(--rl-sp-7); height: var(--rl-sp-7); }
.rl-avatar--md { width: var(--rl-sp-8); height: var(--rl-sp-8); }
.rl-avatar--lg { width: calc(var(--rl-sp-8) + var(--rl-sp-5)); height: calc(var(--rl-sp-8) + var(--rl-sp-5)); }
.rl-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-avatar__ph { width: 62%; height: 62%; }

/* ── 프로필 사진 편집(rl_settings_account_edit.php?field=nick) — 중앙 아바타 + 변경/삭제.
   업로드/삭제 로직은 api/account_photo.php 단일 출처, 여기선 레이아웃·액션 버튼 톤만. ── */
.rl-avatar--xl { width: var(--rl-sp-9); height: var(--rl-sp-9); }

.rl-avatar-edit {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 아바타 = 탭 트리거(바텀시트 오픈). 우하단 카메라 배지로 편집 가능 표시. */
.rl-avatar-edit__trigger {
    position: relative;
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--rl-r-full);
}
.rl-avatar-edit__trigger:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: 2px;
}
/* 카메라 배지 — 아바타 우하단, 사진 위에 떠 편집 어포던스. surface-elev 원 + line border. */
.rl-avatar-edit__cam {
    position: absolute;
    right: var(--rl-sp-1);
    bottom: var(--rl-sp-1);
    width: var(--rl-sp-6);
    height: var(--rl-sp-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-full);
    color: var(--rl-text-2);
}
.rl-avatar-edit__cam svg { width: 60%; height: 60%; display: block; }
/* 파일 input 시각 숨김(JS click 트리거 전용) — 테마 input 룰에 안 밀리도록 position:absolute. */
.rl-avatar-edit input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}