/* ============================================================
   공통 푸터 (.site-footer) — 대시보드 + 서브페이지 전 페이지
   ------------------------------------------------------------
   site-footer.js가 .main-area 끝에 주입한다. 마크업이 페이지에
   없으므로 <link>와 <script defer> 두 줄만 넣으면 된다.

   대시보드와 서브페이지는 .main-area의 성질이 다르다.
     서브페이지 — flex 컬럼, 패딩 없음  → margin-top:auto로 바닥에 붙음
     대시보드   — 일반 블록, 패딩 28px  → 음수 마진으로 패딩을 뚫어야 함
   그래서 대시보드에는 .sf-dash를 붙여 따로 처리한다.

   색은 전부 토큰으로만 쓴다. 그래야 theme-32/33이 토큰을 갈아끼울 때
   푸터도 그 시안의 톤을 따라간다.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-footer {
  /* 본문이 짧아도 화면 아래에 붙는다 (서브페이지: .main-area가 flex 컬럼) */
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 22px 24px;
}
.site-footer .sf-inner {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-footer .sf-logo {
  height: 34px; width: auto; flex-shrink: 0;
  /* 원본이 회색이라 다크에서 배경에 묻는다 */
  opacity: 0.85;
}
[data-theme="dark"] .site-footer .sf-logo { filter: brightness(0) invert(1); opacity: 0.55; }
.site-footer .sf-info { flex: 1; min-width: 0; }
.site-footer p { margin: 0; }
.site-footer .sf-addr {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12.5px; color: var(--fg); font-weight: 600;
  word-break: keep-all;
}
.site-footer .sf-addr a { color: inherit; text-decoration: none; }
.site-footer .sf-addr a:hover { text-decoration: underline; }
.site-footer .sf-copy {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11.5px; color: var(--muted); font-weight: 500;
  word-break: keep-all;
}
.site-footer .sf-family { flex-shrink: 0; }
.site-footer .sitevalue {
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; min-width: 158px; cursor: pointer;
}

/* ── 대시보드 ──
   .main-area의 패딩 28px 안쪽에 들어가면 좌우가 떠 보인다.
   음수 마진으로 패딩을 뚫어 서브페이지와 같은 폭으로 맞춘다. */
.site-footer.sf-dash {
  margin: 28px -28px -28px;
}
@media (max-width: 768px) {
  /* 대시보드는 이 폭에서 패딩이 16px로 줄어든다 */
  .site-footer.sf-dash { margin: 16px -16px -16px; }
}

@media (max-width: 900px) {
  .site-footer .sf-inner { flex-wrap: wrap; gap: 14px; }
  .site-footer .sf-info { flex-basis: 100%; order: 3; }
}