/*
 * FOOTER: 회사 로고 이미지·주소·저작권·맨 위로 링크
 * 수정 위치: 페이지 맨 아래 회사 로고·주소·저작권 및 BACK TO TOP.
 */

/* 1. FOOTER 상단: 회사 로고/주소와 BACK TO TOP 링크의 가로 배치 */
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-block: 40px;
}

/* 회사 주소·사업자 정보 등 연락처 텍스트의 크기와 행간 */
.footer-main address {
  font-style: normal;
  font-size: 11px;
  line-height: 2.1;
}

/* 주소 문장 안의 보조 정보 간격 */
.footer-main address span {
  margin-left: 24px;
}

/* 화면 맨 위로 이동하는 BACK TO TOP 링크의 글자 크기 */
.back-top {
  font-size: 9px;
  letter-spacing: 1px;
}

/* 2. 하단 저작권·보조 문구의 좌우 정렬 */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  font-size: 9px;
}

/* 3. 모바일(760px 이하): 주소·저작권을 세로로 배치 */
@media (max-width: 760px) {
  .footer-main {
      flex-direction: column;
      gap: 25px;
  }

  .footer-bottom {
      flex-direction: column;
      gap: 7px;
  }

  .footer-bottom > span:last-child {
      font-size: 8px;
  }
}

/* 4. 푸터 네이비 배경, 상단 얇은 구분선 */
/* 푸터 영역의 배경·테두리·텍스트 색상 */
footer {
  border-top: 1px solid var(--glass-border);
  background: rgba(4, 10, 22, 0.32);
}

/* 주소·BACK TO TOP·저작권 문구의 기본 색상 */
.footer-main address,
.back-top,
.footer-bottom {
  color: var(--text-sub);
}

/* 저작권 부분 위쪽 가로 구분선 */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 5. FOOTER 이미지 로고(assets/logo.svg) 표시 크기. 히어로가 아닌 푸터용입니다. */
.brand.brand-image {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 178px;
  height: 44px;
  flex-shrink: 0;
  line-height: 1;
}

/* 이미지 로고 자체의 크기와 잘림 방지 */
.brand.brand-image img {
  display: block;
  flex: none;
  width: auto;
  height: 60px; /* 푸터 로고의 기본 표시 높이 */
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* 푸터에만 적용하는 로고 이미지 높이(기본 60px보다 우선) */
.footer-main .brand.brand-image img {
  height: 54px; /* 푸터에 실제 우선 적용되는 로고 이미지 높이 */
}

/* 6. 모바일(760px 이하): 로고 너비·높이 조정 */
@media (max-width: 760px) {
  .brand.brand-image {
      width: 156px;
      height: 38px;
  }

  .brand.brand-image img {
      height: 50px;
  }

  .footer-main .brand.brand-image img {
      height: 48px;
  }
}