/* ==========================================================================
   sections/footer.css — 블로그 띠 배너 · 푸터

   전 페이지 공통이라 항상 로드됩니다.

   ★ 구분선 없음(PC·모바일 모두) — 색 대비로만 구분합니다.
     --c4-color-border-dark 같은 토큰을 만들지 마세요.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 블로그 띠 배너

   높이(PC 42 / 모바일 62)는 상하 패딩 12 + 문구 줄높이에서 나오는 값이라
   height 로 고정하지 않습니다.
   좌우 패딩은 푸터와 같은 20 — 문구가 가운데 정렬이라 좁은 화면에서 글자가
   가장자리에 닿지 않게 하려는 용도입니다.
   -------------------------------------------------------------------------- */

.c4-topbar {
  background: var(--c4-color-accent);
  padding: var(--c4-topbar-pad-y) var(--c4-gutter-pc-chrome);
}

.c4-topbar__inner {
  display: flex;
  align-items: flex-end;      /* 시안: 두 조각이 밑선 정렬 */
  justify-content: center;
  gap: var(--c4-topbar-gap);
  text-align: center;
}

/* 두 조각은 같은 스타일입니다 — 굵기를 다르게 주지 마세요. 구분 문자도 없습니다. */
.c4-topbar__part {
  color: var(--c4-color-white);
  font-size: var(--c4-type-caption-size);
  font-weight: var(--c4-type-weight-regular);
  line-height: var(--c4-type-caption-lh);
}

/* --------------------------------------------------------------------------
   2. 푸터
   -------------------------------------------------------------------------- */

.c4-site-footer {
  background: var(--c4-color-footer-bg);
  padding: var(--c4-footer-pad-y) var(--c4-gutter-pc-chrome);
}

.c4-footer__inner {
  display: flex;
  flex-direction: column;
  max-width: var(--c4-container-chrome);
  margin-inline: auto;
}

/* ★ 세로 간격 셋은 값이 다릅니다. 한 값으로 묶지 마세요.
     :not(:first-child) 를 붙이는 이유 — 앞 블록이 통째로 빠져도(약관 링크를 둘 다
     고르지 않은 경우 등) 맨 위에 빈 여백이 남지 않게 하려는 것입니다. */
.c4-footer__logo:not(:first-child) {
  margin-top: var(--c4-footer-gap-terms-logo);
}

.c4-footer__company:not(:first-child) {
  margin-top: var(--c4-footer-gap-logo-company);
}

.c4-footer__copyright:not(:first-child) {
  margin-top: var(--c4-footer-gap-company-copy);
}

/* --------------------------------------------------------------------------
   3. 약관 링크 줄 — 푸터 맨 위, 로고보다 앞
   -------------------------------------------------------------------------- */

.c4-footer__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c4-footer-terms-gap);
}

.c4-footer__terms-link {
  color: var(--c4-color-white);
  font-size: var(--c4-type-body1-size);
  font-weight: var(--c4-type-weight-regular);
  line-height: var(--c4-type-body-lh);
}

.c4-footer__terms-link:hover,
.c4-footer__terms-link:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. 회사 정보

   ★ 마크업은 한 벌이고 CSS 로만 전환합니다.
       PC     블록 두 개, 각 줄 안의 항목을 ' | ' 로 이음
       모바일  같은 DOM 에서 항목 span 을 block 으로 바꿔 다섯 줄, 구분자 없음
   ★ 구분자는 의사요소라 빈 항목이 빠져도 줄 처음·끝에 남는 일이 원리적으로 없습니다.
   -------------------------------------------------------------------------- */

.c4-footer__company {
  color: var(--c4-color-white);
  font-size: var(--c4-type-body1-size);
  font-weight: var(--c4-type-weight-regular);
  line-height: var(--c4-type-body-lh);
}

.c4-footer__company-item:not(:first-child)::before {
  content: '|';
  margin-inline: var(--c4-footer-sep-gap);
}

/* 줄이 컨테이너를 넘칠 때 구분자만 줄 처음에 떨어지지 않게 항목을 통째로 넘깁니다. */
.c4-footer__company-item {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. 카피라이트

   ★ grey500 은 어두운 배경 위 3.9:1 로 AA 미달이지만 **확정 예외**입니다.
     대비를 이유로 상향하지 마세요.
   -------------------------------------------------------------------------- */

.c4-footer__copyright {
  color: var(--c4-color-text-muted);
  font-size: var(--c4-type-body4-size);
  font-weight: var(--c4-type-weight-regular);
  line-height: var(--c4-type-body-lh);
}

/* --------------------------------------------------------------------------
   6. 모바일 (768 미만)
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  /* 띠 배너 — 두 줄로 나뉘고 간격이 2 가 됩니다(토큰이 이미 바뀝니다). */
  .c4-topbar {
    padding-inline: var(--c4-gutter-mobile-chrome);
  }

  .c4-topbar__inner {
    flex-direction: column;
    align-items: center;
  }

  .c4-site-footer {
    padding-inline: var(--c4-gutter-mobile-chrome);
  }

  /* 회사 정보 — 항목마다 한 줄씩 다섯 줄, 구분자 없음. 같은 DOM 그대로입니다. */
  .c4-footer__company-item {
    display: block;
    white-space: normal;
  }

  .c4-footer__company-item:not(:first-child)::before {
    content: '';
    margin-inline: 0;
  }
}