body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f9;
  color: #333;
  height: 100%;
  overflow: hidden; /* 스크롤 기본 숨김 */
}

/* 컨테이너 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 화면 높이에 맞춤 */
  overflow-y: auto; /* 세로 스크롤 허용 */
}

/* 헤더 */
.header {
  height: auto; /* 유연한 높이 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #007bff;
  color: #fff;
  padding: 10px 15px;
  flex-shrink: 0; /* 헤더 높이 고정 */
}

.back-button {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

/* 메인 콘텐츠 */
.main {
  flex: 1; /* 남은 공간을 채움 */
  overflow-y: auto; /* 세로 스크롤 허용 */
  padding: 10px;
}

/* 이름과 지역 */
.member-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* 이미지 컨테이너 */
.profile-image {
  margin: 0 auto;
  width: 90px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid #ddd;
  background-color: #fff;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 세부 정보 */
.details {
  text-align: left;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.details .row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 텍스트와 버튼을 양쪽 정렬 */
  margin: 5px 0;
}

/* 버튼 그룹 */
.button-group {
  display: flex; /* 버튼을 가로로 배치 */
  gap: 5px; /* 버튼 간 간격 */
}

.action-button {
  font-size: 12px;
  background-color: transparent; /* 배경색 제거 */
  color: inherit; /* 부모 요소의 텍스트 색상 상속 */
  border: 1px solid #ccc; /* 기본 테두리 추가 */
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.action-button:hover {
  background-color: #f0f0f0; /* 호버 시 밝은 회색 배경 */
}

/* 하단 버튼 */
.footer {
  position: sticky; /* 화면 하단에 고정 */
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  background-color: #007bff;
  padding: 5px;
}

.action-button {
  flex: 1;
  font-size: 14px;
  color: #fff;
  background-color: #007bff;
  border: none;
  margin: 0 5px;
  text-align: center;
  line-height: 40px; /* 버튼 높이 조정 */
}

.action-button:last-child {
  margin-right: 0;
}

.action-button:hover {
  background-color: #0056b3;
}