/* 바닥글 하나 — 모든 쪽이 같은 것을 쓴다(js/footer.js 가 채움). 검은 바탕 · 가운데 정렬:
   ⑥ 워드마크 2단 → 스튜디오 소개 두 줄 → 링크 줄 → © 줄.
   첫 화면 vault.css 의 footer 규칙(양끝 맞춤 · 줄바꿈 flex)과 같이 받혀도 이 꼴이 이기도록 footer.gfoot 로 묶고 그 칸들을 되돌려 둔다.
   색 토큰이 없는 쪽에서도 서도록 var() 마다 같은 값을 받침으로 적는다. */
footer.gfoot {
  position: relative;
  z-index: 5; /* 첫 화면 3D 판 · 화면에 고정된 벽감 카드 층(z 3) 위로 올라와 덮는다 */
  display: block;
  margin: 0;
  padding: 64px var(--gutter, 48px) calc(48px + env(safe-area-inset-bottom));
  border-top: 0; /* 블록 윗줄 대신 내용 묶음 위의 머리 줄(::before) — 화면 폭 끝까지 가는 줄은 경계로 읽힌다 */
  background: var(--void, #050506);
  color: var(--ink-2, #a3a9b0);
  font-family: var(--f-ui, "IBM Plex Sans KR", "Malgun Gothic", system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: normal;
  text-align: center;
  word-break: keep-all; /* 한글 낱말을 가운데서 자르지 않는다 */
  overflow-wrap: break-word;
}
footer.gfoot p { margin: 0; }
/* 가는 줄 둘 — 모서리 워드마크 위아래 줄과 같은 꼴(1px · 한 색, 양 끝 흐림 없음).
   줄 A: 내용 묶음 맨 위, ⑥ 위 40(폰 32) · 폭 min(640, 옆 여백 안). 한 화면 바닥글에서도 내용과 같이 가운데에 선다 */
footer.gfoot::before {
  content: "";
  display: block;
  width: min(640px, 100%);
  height: 1px;
  margin: 0 auto 40px;
  background: rgba(200, 204, 209, 0.35);
}

/* ⑥ 2단 꼴 — 굵은 GROO STUDIO(Mono 700 · 28px · 폰 24) 위, 작은 그루 스튜디오(0.4배 · 자간 .3em) 아래, 사이 0.25배. 누르면 처음 화면 */
.gf-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center; /* 한 화면 바닥글(flex)에서 줄 폭까지 늘어나지 않게 — 밑줄 B 가 글자 폭에 머문다 */
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
/* 줄 B: ⑥ 밑줄 — 그루 스튜디오 줄 아래 12, 폭 = GROO STUDIO 글자 폭(⑥ 묶음 폭) */
.gf-mark::after { content: ""; align-self: stretch; height: 1px; margin-top: 12px; background: rgba(200, 204, 209, 0.35); }
.gf-en { font-family: var(--f-mono, "IBM Plex Mono", monospace); font-weight: 700; letter-spacing: 0.02em; color: var(--glint, #e3e9f0); }
.gf-ko {
  margin-top: 0.25em;
  margin-right: -0.3em; /* 끝 자간을 빼 가운데를 맞춘다 */
  font-family: var(--f-ui, "IBM Plex Sans KR", sans-serif);
  font-size: max(12px, 0.4em); /* 0.4배는 28px 에서 11.2 · 폰 24px 에서 9.6px 라 한글 가장 작은 글 12px 로 받친다 */
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--ink-2, #a3a9b0);
}
.gf-mark:focus-visible { outline: 2px solid var(--focus, #f3eee7); outline-offset: 6px; border-radius: 4px; }

/* 스튜디오 소개 두 줄 — 14px / 1.7 실버 · 줄 너비 최대 560 */
footer.gfoot .gf-intro { max-width: 560px; margin: 20px auto 0; font-size: 14px; line-height: 1.7; color: var(--silver, #c9ced4); }

/* 링크 줄 — 13px · 낱말 사이 가운뎃점(장식) · 누르는 자리 44px · 호버 · 포커스 때 밑줄 + 밝게. 줄 끝 가운뎃점은 js 가 숨긴다 */
.gf-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 640px; margin: 24px auto 0; }
.gf-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink-2, #a3a9b0);
  text-decoration: none;
}
.gf-links a:hover,
.gf-links a:focus-visible,
.gf-links a[aria-current="page"] { color: var(--ink, #e6e8eb); text-decoration: underline; text-underline-offset: 4px; }
.gf-links a:focus-visible { outline: 2px solid var(--focus, #f3eee7); outline-offset: 3px; border-radius: 4px; }
.gf-dot { font-size: 13px; color: var(--muted, #6c7279); }

footer.gfoot .gf-copy { margin-top: 24px; font-size: 12px; color: var(--ink-2, #a3a9b0); }

/* 폰: 같은 차례로 세로로 쌓는다 */
@media (max-width: 640px) {
  footer.gfoot { padding: 48px var(--gutter, 16px) calc(40px + env(safe-area-inset-bottom)); }
  footer.gfoot::before { margin-bottom: 32px; }
  .gf-mark { font-size: 24px; }
  .gf-links { max-width: 320px; }
}