/* ==========================================================
   components/footer.css — 푸터
   마크업은 tools/lib/layout.js 의 footer() 에서 만든다.
   ========================================================== */

.ftr {
  padding: 36px 0 calc(56px + env(safe-area-inset-bottom));
  background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
.ftr .logo { font-size: 18px; }
.ftr-desc { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.ftr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 22px 0; }
.ftr-col h3 { margin-bottom: 6px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.ftr-col a { display: flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ftr-col a:hover { color: var(--ink); }
.ftr-col a.em { font-weight: 800; color: var(--ink-2); }
.ftr-note { max-width: 62em; line-height: 1.75; }
.ftr-note b { color: var(--ink-2); }
.ftr-copy { margin-top: 18px; font-size: 12px; }

@media (min-width: 768px) {
  .ftr-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}