/* ─────────────────────────────────────────────────────────────
   veil-footer.css — 문서·안내 페이지 공용 푸터 (2026-09-06)

   왜 있나: 푸터 마크업(.footer-inner / .footer-brand / .footer-cols /
   .footer-bottom / .container)은 `styles.css` 에만 정의돼 있는데,
   아래 35개 페이지는 `styles.css` 도 `pages-modern.css` 도 로드하지 않는다.

     guide.html + guide-*.html 21개, policy/security/status/changelog/dpa/contact
     (한국어·영어 각각), admin.html

   그래서 이 페이지들의 푸터는 규칙이 하나도 안 걸린 날것이었다.
   링크가 기본 파란 밑줄로 나오고, 3열 그리드가 세로로 흐르고,
   폭 제약이 없어진 .brand-mark svg 가 부풀었다.

   ⚠ 이건 2026-08-20 에 랜딩 4종에서 이미 한 번 잡은 것과 **같은 결함**이다.
     그때 만든 `tests/landing-footer-wiring.test.mjs` 가 랜딩 4개만 봤기 때문에
     나머지 35개가 그대로 남았다. 이제 그 테스트가 전 페이지를 본다.

   어떻게 쓰나: veil-header.css 와 같은 자리(</head> 근처)에 링크한다.
   veil-header.css 처럼 **자족형**이다 — 다른 스타일시트의 변수·리셋에
   기대지 않는다. 값은 `styles.css` + `app-modern.css` 가 합쳐진 결과
   (membership.html 라이브 실측)와 같게 맞췄다.

   ⛔ 다크모드는 잠금 상태다(DESIGN-3). 라이트 기준으로만 쓴다.
   ───────────────────────────────────────────────────────────── */

.footer {
  background: #F7F7F9;
  color: #0B0B0F;
  border-top: 1px solid #E9E9EE;
  padding: 80px 0 32px;
  font-size: .9rem;
  line-height: 1.7;
}

/* 이 페이지들에는 .container 규칙이 없다. 푸터 안에서만 정의한다. */
.footer .container {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 56px;
}

/* 브랜드 — svg 에 width/height 속성이 없어 규칙이 없으면 컨테이너 폭까지 부푼다.
   2026-08-20 랜딩에서 푸터 높이가 1779px 이 됐던 원인이 정확히 이것이다. */
.footer-brand .brand-mark {
  display: inline-block;
  vertical-align: -.12em;
  color: #CDA00A;
}
.footer-brand .brand-mark svg {
  display: block;
  width: 18px;
  height: 18px;
}
.footer-brand .brand-name {
  margin-left: 8px;
  color: #0B0B0F;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.footer-tag {
  margin: 16px 0 0;
  color: #6C6C77;
  font-style: italic;
  font-size: .9rem;
  line-height: 1.7;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-cols h5 {
  margin: 0 0 14px;
  color: #6C6C77;
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.footer-cols a {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 4px 0;
  color: #3A3A42;
  font-size: .92rem;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-cols a:hover,
.footer-cols a:focus-visible { color: #1E3AFF; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #E9E9EE;
}
.footer-bottom small {
  color: #6C6C77;
  font-size: .8rem;
}
.footer-bottom .soli { font-style: italic; }

@media (max-width: 720px) {
  .footer { padding: 56px 0 28px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  /* 손가락으로 누르는 화면에서는 최소 44px 를 지킨다(QA 접근성 기준). */
  .footer-cols a { padding: 10px 0; }
}