/* 기본 타이포 */
html { font-family: 'Source Sans Pro', sans-serif; }
body {
  margin: 0;
  line-height: 1.6;
  min-height: 100dvh;           /* 모바일 주소창 변동 대응 */
  display: flex;                 /* 중앙 정렬 */
  align-items: center;
  justify-content: center;
  padding: 24px;                 /* 가장자리 여백으로 잘림 방지 */
  box-sizing: border-box;
}

/* 링크 */
a { text-decoration: none; color: #1565c0; }
a:hover { color: #217ee7; }

/* 컨텐츠 박스: 고정 위치 대신 유동 레이아웃 */
#content {
  width: min(92vw, 560px);       /* 화면에 맞춰 줄어들게 */
  text-align: center;
}

/* 이미지/아바타 */
.avatar {
  border-radius: 50%;
  width: 150px;
  max-width: 40vw;               /* 작은 화면에서 자동 축소 */
  height: auto;
}

/* 아이콘 행 */
.icons {
  list-style: none;
  font-size: clamp(20px, 5vw, 28px); /* 화면에 맞춰 크기 조절 */
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;                      /* 넓이 고정보다 간격 기반이 안전 */
  width: 100%;
  max-width: 340px;
  margin: 1em auto;
}
.icons li { display: inline-flex; }
.icons a { color: black; }
.icons a:hover { color: #1565c0; }

/* 제목도 반응형 크기 */
h1 { font-size: clamp(22px, 4.5vw, 32px); }

/* 긴 단어/URL 줄바꿈 허용 */
#content, p, a { overflow-wrap: anywhere; }