body {
  margin-top: 70px; /*header의 높이 만큼 margin값 부여*/
}

header {
  position: fixed; /*sticky와 고민했지만 항상 상단에 나타나야 할 네비바의 경우 fixed가 적절할 거라고 판단함.*/
  top: 0px;
}

.banner {
  background-color: #cfe5ff;
  height: 540px;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position: 80% bottom;
  background-size: 55%;
}

#hero {
  background-image: url("../images/home/hero-image.png");
}

#features {
  padding-bottom: 138px;
}

#bottomBanner {
  background-image: url("../images/home/bottom-banner-image.png");
}

/* 버튼 등의 요소에 고정된 width나 height을 부여하는 것보다 내부 콘텐츠에 padding을 적용해서 요소의 전체 크기를 유동적으로 조정하는 방법이 반응형 웹 디자인과 접근성(accessibility) 측면에서 더 적합합니다. */
#loginLinkButton {
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  padding: 11.5px 23px;
}

/* banner 요소 내의 pill-button을 선택해 스타일 적용. ID 선택자 대신 이렇게 캐스캐이딩을 활용하는 방법은 특정 컨텍스트 내에서만 스타일을 적용하고자 할 때 유용해요. */
.banner .pill-button {
  margin-top: 32px;
}

/* flex 요소에서는 gap 속성을 사용해 자식 요소 사이의 간격을 조정할 수 있어요. */
.feature {
  padding: 138px 0;
  display: flex;
  align-items: center;
  gap: 5%;
}

/* pseudo-selector인 nth-child(2)를 통해 feature 클래스를 가진 요소 중 두 번째 아이템에만 다른 스타일을 적용했어요. */
.feature:nth-child(2) {
  text-align: right;
}

/* flex: 1을 통해 부모 요소인 feature의 남은 공간을 모두 차지하도록 설정할 수 있어요. */
.feature-content {
  flex: 1;
}

.feature-tag {
  color: #3692ff;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  margin-bottom: 12px;
}

.feature-description {
  font-size: 24px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.08em;
  margin-top: 24px;
}