/* 여기에 스타일을 구현해 주세요 */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  background: #fff;
  color: #111;
}

.wrap {
  padding: 24px;
}
.title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

/* float 사용하기 */
.avatar-list {
  list-style: none;
  margin: 0;
  padding: 0;

  /* 줄바꿈 */
  width: 328px;
}

/* float 해제 */
.avatar-list::after {
  content: '';
  display: block;
  clear: both;
}

.avatar-list {
  list-style: none;
  margin: 0;
  padding: 0;

  width: 328px;
}

/* 아바타 아이템 */
.avatar-item {
  float: left;
  /* 이미지 크기 */
  width: 64px;
  height: 64px;

  /* 이미지간의 간격 20px */
  margin-right: 20px;
  margin-bottom: 20px;
}

/* 4개씩 끊기 (마지막 칸 오른쪽 여백 제거) */
.avatar-item:nth-child(4n) {
  margin-right: 0;
}

/* 회색 원 */
.avatar {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  background: #dbdbdb;
}

/* 프로필 이미지 */
.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ✅ 상태 점: position */
.status {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #fff;
}

.status--online {
  background: #4cfe88;
}

.status--offline {
  background: #dbdbdb;
}