/* ============================================================
   Sionic Tech Blog — 사이트 공통 헤더·푸터 (단일 소스)
   assets/site-chrome.js가 마크업을 주입한다. 포스트 파일에는
   헤더·푸터 마크업을 직접 쓰지 않는다.
   테마 변수(--si-*, --sf-*)가 없는 표준(라이트 전용) 페이지에서도
   동작하도록 모든 변수에 fallback을 둔다.
   ============================================================ */

#sb-header {
  position: sticky; top: 0; z-index: 120; box-sizing: border-box;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid #E6EBEF;
  font-family: var(--font-sans, "Geist", "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif);
}
[data-theme=dark] #sb-header {
  background: color-mix(in srgb, var(--sf-bg, #040607) 88%, transparent);
  border-bottom-color: var(--si-border, #e8e9ea17);
}
#sb-header .sb-inner {
  max-width: 1339px; margin: 0 auto; padding: 0 24px; height: 77px;
  display: flex; align-items: center; gap: 36px; box-sizing: border-box;
}
.sb-logo { display: flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; }
.sb-logo .sb-mark {
  width: 38px; height: 38px; flex-shrink: 0; display: block;
  background: linear-gradient(148deg, #2E8B89 4%, #3FA9A6 34%, #33CFE5 78%, #7FE7F4 100%);
  -webkit-mask: url(/blog/assets/logo-mark.png) center / contain no-repeat;
  mask: url(/blog/assets/logo-mark.png) center / contain no-repeat;
  transition: filter .18s ease;
}
.sb-logo:hover .sb-mark { filter: saturate(1.2) brightness(1.06); }
.sb-logo .sb-word { font-weight: 800; font-size: 22.3px; letter-spacing: -.015em; color: #23272C; }
[data-theme=dark] .sb-logo .sb-word { color: var(--si-ink, #e8e9ea); }
#sb-header nav { display: flex; gap: 4px; margin-left: auto; }
#sb-header nav a {
  font-size: 14.5px; font-weight: 600; color: #4B5A6B; text-decoration: none;
  padding: 7px 13px; border-radius: 8px; transition: all .18s ease;
}
#sb-header nav a:hover { color: #0E1B2C; background: #F6F9FA; }
[data-theme=dark] #sb-header nav a { color: var(--si-ink-3, #8b9096); }
[data-theme=dark] #sb-header nav a:hover { color: var(--si-ink, #e8e9ea); background: var(--sf-panel, #0b0e10); }
@media (max-width: 640px) {
  #sb-header nav { display: none; }
  #sb-header .sb-inner { justify-content: space-between; }
}

#sb-footer {
  border-top: 1px solid var(--si-border, #E6EBEF);
  background: var(--sf-bg, #fff);
  margin-top: 40px;
  font-family: var(--font-sans, "Geist", "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif);
}
#sb-footer .sb-footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 26px 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; font-size: 13px;
  color: var(--si-ink-4, #8494A5);
}
#sb-footer .sb-logo .sb-mark { width: 24px; height: 24px; }
#sb-footer .sb-logo .sb-word { font-size: 15px; color: var(--si-ink, #0E1B2C); }