/* 여기에 스타일을 구현해 주세요 */

/* 1. 가로 한 줄을 담당하는 상자 */
.spacer {
  /* float된 자식들의 높이를 인식하기 위한 설정 */
  overflow: hidden;
  /* 줄과 줄 사이의 세로 간격 20px */
  margin-bottom: 20px;
  /* 배지가 이 상자를 기준으로 움직이게 함 */
  position: relative;
}

/* 2. 각 프로필 컨테이너 */
.profile-container {
  /* 배지 위치 기준 */
  position: relative;
  /* figure 태그의 기본 여백 제거 */
  margin: 0;
  /* float 왼쪽으로 차례대로 붙임 */
  float: left;
  /* margin으로 이미지 사이 간격 조절 */
  margin-right: 20px;
}

/* 3. 프로필 이미지를 원형으로 만들기 */
.circle-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 4. 상태 표시 배지 공통 스타일 */
.status-badge {
  /* 위치 설정 */
  position: absolute; /* 부모를 기준으로 절대 위치 */
  /* 바닥에서 px만큼 위로 */
  bottom: 0px;
  /* 오른쪽에서 px만큼 안으로 */
  right: 0px; /* 

  /* 모양 설정 */
  /* 배지 크기 */
  width: 20px;
  height: 20px;
  border-radius: 50%; /* 원형 */

  /* 테두리 설정 */
  border: 2px solid #ffffff;
  /* 테두리가 크기에 포함되도록 설정 */
  box-sizing: border-box;
}

/* 5. 상태별 배경색 */
/* HTML에 작성한 title에 따라 적용함 */

/* 온라인 상태 */
.status-badge[title='온라인'] {
  background-color: #4cfe88;
}

/* 오프라인 상태 */
.status-badge[title='오프라인'] {
  background-color: #dbdbdb;
}