.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: var(--color-soft-white);
  z-index: 1000;
  box-shadow: none;
  transition: box-shadow 0.3s ease, border-bottom 0.3s ease;
  border-bottom: 0 solid transparent;
}

.header.scrolled {
  border-bottom: 1px solid #ddd;
}

.header-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center; /* 세로축 정렬 */
  height: 100%; /* 부모 높이 채우기 */
  margin: 0; /* 여백 제거 */
  padding: 0; /* 여백 제거 */
  justify-self: start;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-self: end;
  width: 100%;
  justify-content: flex-end;
}

.icon-link {
  text-decoration: none; /* 링크 밑줄 제거 */
  display: inline-block; /* 인라인 요소의 기본적인 여백 제거 */
  vertical-align: middle; /* 아이콘을 부모 요소와 수직으로 정렬 */
  line-height: 0; /* 추가된 줄 간격 제거 */
}

.icon {
  width: 30px; /* 아이콘 크기 조정 */
  height: 30px;
  background-color: transparent; /* 배경 투명 */
  border-radius: 50%; /* 원형 유지 */
  filter: invert(100%) contrast(100%); /* 흰 배경을 투명하게 만들고 검은 부분 유지 */
}

.site-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.site-title h1 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.site-title a {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  color: var(--color-soft-black);
  text-decoration: none;
}