/*
 * 09_profile.css — 프로필 사진·회원 프로필·팔로우 화면
 *
 * 닉네임 옆 원형 사진, 사진+닉네임 링크, 내 프로필 설정과 공개 프로필을 꾸밉니다.
 * .user-avatar: 원형 사진 / .user-identity: 사진+닉네임 / .profile-settings: 설정 화면
 * .public-profile-header: 공개 프로필 상단 / .profile-stats: 팔로잉·팔로워 숫자
 * .follow-button: 팔로우 버튼 / .connection-row: 팔로잉·팔로워 목록 한 줄
 * 프로필 화면과 사진 크기를 바꿀 때 수정하세요. 게시글 상세의 작은 사진은 post_detail.css도 사용합니다.
 */

/* 글·댓글에서 공통으로 사용하는 원형 사진 */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  background: #e8edf3;
}

.user-avatar--default {
  color: #657080;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* 댓글에서는 작은 사진 사용 */
.comment-author {
  align-items: center;
}

.comment-author .user-avatar {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* 게시글 작성자 정보는 좁은 화면에서 자연스럽게 줄바꿈 */
.post-author-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-bottom: 16px;
  font-size: 13px;
}

.post-author-line span {
  overflow-wrap: anywhere;
}

/* 프로필 수정 화면 */
.profile-settings {
  max-width: 480px;
  margin: 0 auto;
}

.profile-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  overflow-wrap: anywhere;
}

.profile-preview .user-avatar {
  flex-basis: 80px;
  width: 80px;
  height: 80px;
  font-size: 28px;
}

.profile-settings input[type="file"] {
  box-sizing: border-box;
  max-width: 100%;
}


/* 사진과 닉네임을 하나의 프로필 링크로 표시 */
.user-identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  color: #252932;
  vertical-align: middle;
}

.user-identity-name {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

a.user-identity:hover {
  text-decoration: none;
}

a.user-identity:hover .user-identity-name {
  text-decoration: underline;
}

a.user-identity:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 공개 프로필 상단 */
.public-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #e2e5e9;
}

.public-profile-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}

.public-profile-identity .user-avatar {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  font-size: 28px;
}

.public-profile-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

.public-profile-info h1 {
  margin: 0;
  font-size: 24px;
}

.public-profile-info p {
  margin: 4px 0;
  font-size: 13px;
}

.profile-edit-link {
  padding: 8px 14px;
  border: 1px solid #d4dae3;
  border-radius: 20px;
  color: #252932;
  font-size: 13px;
}

.profile-posts-title {
  margin: 24px 0 8px;
  font-size: 17px;
}

@media (max-width: 600px) {
  .public-profile-identity {
    gap: 12px;
  }

  .public-profile-info h1 {
    font-size: 20px;
  }
}

/* 팔로잉·팔로워 숫자 */
.profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 13px;
}

.profile-stats a,
.profile-stats > span {
  color: #657080;
}

.profile-stats strong {
  color: #252932;
}

/* 팔로우 버튼 */
.profile-actions {
  flex-shrink: 0;
}

.profile-actions form {
  margin: 0;
}

.follow-button {
  min-height: 40px;
  padding: 8px 20px;
  border: 1px solid #171717;
  border-radius: 24px;
  background: #171717;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.follow-button--active {
  border-color: #d4dae3;
  background: #fff;
  color: #252932;
}

.follow-button--active:hover {
  border-color: #e6b5b5;
  background: #fff0ee;
  color: #b42318;
}

/* 회원 목록 */
.connections-heading {
  margin-top: 24px;
  font-size: 22px;
}

.connection-row {
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid #e2e5e9;
}