/* ============================================================
   Footer — shared component styles (전역 공용 풋터)
   ============================================================
   기준: pages/main/main.css 메인 푸터 UI (Figma 10349:47922 / mfooter).
   모든 리뉴얼 페이지는 이 파일만으로 푸터를 렌더한다.
   페이지 CSS 의 중복 .footer 블록은 제거됨 — 이후 페이지별 재정의 금지.
   ============================================================ */

:root {
  --color-bg-footer: #f3f5f6;
  --footer-padding-y: 30px;
  --footer-padding-x: 50px;
  --footer-padding-bottom: 140px;
  --footer-stack-gap: 60px;
  --footer-top-inner-gap: 30px;
  --footer-meta-groups-gap: 30px;
  --footer-meta-item-gap: 10px;
  --footer-m-padding: 20px;
  --footer-m-padding-bottom: 120px;
  --footer-m-stack-gap: 40px;
  --footer-m-logo-meta-gap: 30px;
  --footer-m-nav-row-gap: 10px;
  --footer-m-content-inset: 4px;
  --footer-m-link-size: 14px;
  --footer-m-link-leading: 22px;
}

/* ----------------------------------------------------------
   Footer — desktop base (메인과 동일)
   ---------------------------------------------------------- */
.site-chrome .footer {
  background-color: var(--color-bg-footer);
  padding: var(--footer-padding-y) var(--footer-padding-x) var(--footer-padding-bottom) var(--footer-padding-x);
}

.site-chrome .footer__inner {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-stack-gap);
}

.site-chrome .footer__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-top-inner-gap);
  width: 100%;
}

.site-chrome .footer__brand {
  margin: 0;
}

.site-chrome .footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.site-chrome .footer__logo-mark {
  display: block;
  width: 103px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
}

.site-chrome .footer__logo-roaming {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  transform: translateY(2px);
  letter-spacing: var(--letter-tight);
  color: #666666;
}

.site-chrome .footer__nav {
  width: 100%;
}

.site-chrome .footer__nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--footer-meta-groups-gap);
}

.site-chrome .footer__info-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--footer-meta-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-chrome .footer__info-item {
  display: flex;
  align-items: center;
  gap: var(--footer-meta-item-gap);
  margin: 0;
}

/* Pipe before 2nd+ item inside each group (메인: #ccc) */
.site-chrome .footer__info-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ccc;
  flex-shrink: 0;
}

.site-chrome .footer__link {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--letter-tight);
  color: var(--color-text-primary);
  text-decoration: none;
}

.site-chrome .footer__link em,
.site-chrome .footer__link i {
  font-style: normal;
}

.site-chrome .footer__link--emphasis {
  font-weight: 700;
}

.site-chrome .footer__link:hover,
.site-chrome .footer__link:focus-visible {
  text-decoration: none;
  color: var(--color-text-primary);
}

.site-chrome .footer__copyright {
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: var(--letter-tight);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   Footer — mobile/tablet (<1280)
   ---------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .site-chrome .footer {
    padding: var(--footer-m-padding) var(--footer-m-padding) var(--footer-m-padding-bottom) var(--footer-m-padding);
  }

  .site-chrome .footer__inner {
    gap: var(--footer-m-stack-gap);
  }

  .site-chrome .footer__top {
    gap: var(--footer-m-logo-meta-gap);
    padding-inline: var(--footer-m-content-inset);
  }

  .site-chrome .footer__logo {
    gap: 6px;
  }

  .site-chrome .footer__logo-mark {
    width: 82px;
    height: 24px;
  }

  .site-chrome .footer__logo-roaming {
    font-size: 12.8px;
    line-height: 19.2px;
    transform: translateY(1px);
  }

  .site-chrome .footer__nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--footer-m-nav-row-gap);
    width: 100%;
  }

  .site-chrome .footer__info-list {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--footer-meta-item-gap);
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  /* 연락처: 줄바꿈 시 전화↔이메일 세로 gap 없음 (가로 구분만 유지) */
  .site-chrome .footer__info-list--contact {
    row-gap: 0;
    column-gap: var(--footer-meta-item-gap);
  }

  .site-chrome .footer__info-item:not(:last-child)::after {
    height: 10px;
    align-self: center;
  }

  .site-chrome .footer__link,
  .site-chrome .footer__copyright {
    font-size: var(--footer-m-link-size);
    line-height: var(--footer-m-link-leading);
    letter-spacing: -0.01em;
  }

  .site-chrome .footer__copyright {
    text-align: start;
    padding-inline: var(--footer-m-content-inset);
  }
}