/* 공용 푸터 스타일.
   site-shell.css(공용 헤더)와 짝을 이루지만, 푸터를 자체적으로 스타일링하는
   페이지(index / payment-service / payment-diagnosis)는 이 파일을 불러오지 않는다. */

footer { padding: 48px 0 24px; background: #071b34; color: #c7d2de; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 0.55fr 0.55fr 0.65fr; gap: 50px; }
.footer-brand img { width: auto; height: 48px; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-brand p { max-width: 420px; margin-top: 15px; color: #9fb0c0; font-size: 13px; }
.footer-contact { display: grid; align-content: start; gap: 8px; }
.footer-contact b { margin-bottom: 5px; color: var(--white); }
.footer-contact a { min-height: 44px; display: inline-flex; align-items: center; color: #aebdca; font-size: 13px; }
.footer-contact .footer-tel { color: var(--white); font-size: 18px; font-weight: 850; }
footer nav { display: grid; gap: 8px; }
footer nav b { margin-bottom: 5px; color: var(--white); }
footer nav a { min-height: 44px; display: inline-flex; align-items: center; color: #aebdca; font-size: 13px; }
/* footer.njk 는 span 사이 공백을 일부러 지운 마크업이다(`</span\n><span`).
   여기서 flex 로 벌려주지 않으면 "…rights reserved.서비스별…아이콘 제공:" 처럼
   세 문장이 한 덩어리로 붙어버린다. 장식이 아니라 필수 규칙이다. */
.copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 35px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #8194a6; font-size: 12px; }

@media (max-width: 1050px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
}