/* ===========================================================================
   사이트 크롬 — 푸터

   chrome.css 에서 나눴다. 상단바와 푸터가 한 파일이면 300줄을 넘는다.
   =========================================================================== */

/* Apple 푸터는 옅은 회색 바탕에 아주 작은 글씨(12px)다. 눈에 띄지 않는 것이
   목적이다. */

.footer {
  background: var(--nx-bg-sunken);
  padding-block: var(--nx-sp-12) var(--nx-sp-8);
  margin-top: 0;
  font-size: var(--nx-fs-xs);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--nx-sp-10);
  margin-bottom: var(--nx-sp-10);
}

/* 제목 탐색에서 본문의 마지막 h2 밑에 매달리지 않게 h2 로 둔다. 크기와
   줄 간격은 h2 기본값을 받지 않고 여기서 정한다. */
.footer__title {
  font-size: var(--nx-fs-xs);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--nx-text);
  margin-bottom: var(--nx-sp-3);
}

.footer__list li + li {
  margin-top: var(--nx-sp-2);
}

.footer__list a,
.footer__meta {
  font-size: var(--nx-fs-xs);
  color: var(--nx-text-2);
}

.footer__list a:hover {
  color: var(--nx-text);
  text-decoration: underline;
}

.footer .brand__name {
  color: var(--nx-text);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-sp-4);
  justify-content: space-between;
  padding-top: var(--nx-sp-5);
  border-top: 1px solid var(--nx-divider);
  font-size: var(--nx-fs-xs);
  color: var(--nx-text-2);
}

.footer__bottom a:hover {
  color: var(--nx-text);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-sp-8);
  }
  /* 휴대폰에서 12px 링크는 읽기도 누르기도 어렵다. 글자를 14px 로 올리고
     줄 간격 대신 링크 자체의 위아래 여백으로 누를 자리를 44px 로 만든다. */
  .footer,
  .footer__list a,
  .footer__meta,
  .footer__title,
  .footer__bottom {
    font-size: var(--nx-fs-sm);
  }
  .footer__list li + li {
    margin-top: 0;
  }
  .footer__list a,
  .footer__list li > .footer__meta {
    display: inline-block;
    padding-block: 11px;
  }
  .footer__bottom {
    align-items: center;
  }
  .footer__bottom a {
    display: inline-block;
    padding-block: 12px;
  }
}