/* 공용 사이트 푸터 — 허브(main/index.html)와 모든 훈련 모듈이 동일하게 사용(2026-07-23 헤더/푸터 통일). */
footer.site-footer { padding: 52px 0 30px; background: var(--footer-bg); color: #fff; }
footer.site-footer .brand { color: #fff; }
footer.site-footer .brand .sub { border-left-color: rgba(255,255,255,.3); }
footer.site-footer .brand .sub-logo { background: #fff; padding: 4px 8px; border-radius: 6px; }

/* 카테고리 4개(두뇌훈련·대회·브레인체크·멘사코리아)를 1fr씩 주면 항목이 2~3개뿐인 컬럼도
   균등하게 늘어나 서로 멀어져 보인다 — auto로 내용 폭만큼만 차지하게 하고, 브랜드 컬럼(1fr)이
   남는 공간을 전부 흡수해 카테고리 묶음이 자연히 오른쪽 끝에 붙게 한다(2026-08-10). */
.ft-grid { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 32px; margin-bottom: 36px; }
.ft-grid h5 { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--footer-mute); margin-bottom: 16px; }
.ft-grid li { list-style: none; padding: 5px 0; font-size: 13.5px; color: #ccc; }
.ft-grid li a:hover { color: #fff; }
.ft-brand-blurb { font-size: 13.5px; line-height: 1.7; color: #aaa; margin-top: 14px; max-width: 300px; }
/* 소개·문의하기·계정 링크 — GNB엔 없는 유틸리티 링크라 4개 카테고리 컬럼에 억지로 끼워넣지 않고
   브랜드 컬럼 아래 한 줄로 모은다(2026-08-10). */
.ft-utility { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; list-style: none; padding: 0; max-width: 300px; }
.ft-utility li { padding: 0; font-size: 12.5px; }
.ft-utility a { color: #999; }
.ft-utility a:hover { color: #fff; }
.ft-bot { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: #777; letter-spacing: .02em; flex-wrap: wrap; gap: 8px 20px; }
.ft-legal a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 760px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
/* 모바일: 브랜드는 한 줄 전체, 링크 4개 카테고리는 그 아래 2x2로 나란히 — 전부 세로로 쌓으면 푸터가 지나치게 길어짐 */
@media (max-width: 480px) {
  .ft-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "brand brand" "c1 c2" "c3 c4";
    row-gap: 24px; column-gap: 14px;
  }
  .ft-grid > div:nth-child(1) { grid-area: brand; }
  .ft-grid > div:nth-child(2) { grid-area: c1; }
  .ft-grid > div:nth-child(3) { grid-area: c2; }
  .ft-grid > div:nth-child(4) { grid-area: c3; }
  .ft-grid > div:nth-child(5) { grid-area: c4; }
  .ft-grid h5 { font-size: 11px; margin-bottom: 10px; }
  .ft-grid li { padding: 4px 0; font-size: 12.5px; }
  .ft-bot { flex-direction: column; align-items: flex-start; }
  footer.site-footer { padding: 32px 0 20px; }
  .ft-grid { margin-bottom: 24px; }
}