/* ============================================================
   footer.css — トップ・ガイド・法務・404 の共通フッター
   中身は generate-footers.js が footer-config.js（site）から焼き込む。
   エディタのフッター（data-footer="app"）は style.css 側で別。
   余白は 4 の倍数、文字は 13px（補足）と 16px（サイト名）の2段。
   ============================================================ */

.foot {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 64px 32px 48px;
  color: var(--text);
}
.foot-inner { max-width: 1056px; margin: 0 auto; }   /* トップの本文（1120px − 左右 32px）と左端を揃える */

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 96px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.foot-brand { flex: 1 1 240px; min-width: 0; }
.foot-name { margin: 0 0 12px; font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-tight); }
.foot-desc { margin: 0; font-size: var(--fs-note); line-height: var(--lh-base); color: var(--text-muted); }

.foot-cols {
  flex: 3 1 560px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 24px 32px;
}
.foot-col-title {
  margin: 0 0 12px;
  font-size: var(--fs-note);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-size: var(--fs-note);
  line-height: var(--lh-base);
  color: var(--text);
  text-decoration: none;
}
.foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-link:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; border-radius: 4px; }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 32px;
  font-size: var(--fs-note);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.foot-note { margin: 0; flex: 1 1 480px; }
.foot-copy { margin: 0; }

@media (max-width: 900px) {
  .foot { padding: 64px 16px 48px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-link { padding: 12px 0; }   /* 指で押せる高さ（44px 以上）を確保 */
}