/* ============================================================
   hakoniwa — site chrome (L0 brand)
   全公開ページ共通の「サイトバー（パンくず）」と「サイトフッター」。
   既存ツールの class と衝突しないよう hk- 接頭辞のみを使う。
   tokens.css を読まないページでも崩れないよう色は fallback 付き。
   ============================================================ */
.hk-bar {
  display: flex; align-items: center; gap: 10px;
  max-width: 1080px; margin: 0 auto; padding: 10px 16px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.4;
  color: #8c8e8b;
}
nav.hk-bar ol.hk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: inherit; line-height: inherit; }
nav.hk-bar ol.hk-crumbs > li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
nav.hk-bar a, nav.hk-bar span { font-size: inherit; font-family: inherit; letter-spacing: inherit; }
.hk-crumbs > li + li::before { content: '›'; opacity: 0.6; }
.hk-crumbs a { color: #247BA0; text-decoration: none; }
.hk-crumbs a:hover { text-decoration: underline; }
.hk-crumbs .hk-home { font-weight: 600; }
.hk-crumbs [aria-current] { color: #50514F; }
.hk-bar-action {
  margin-left: auto; flex: none; white-space: nowrap;
  padding: 4px 12px; border-radius: 100px;
  border: 1px solid #247BA0; color: #247BA0;
  text-decoration: none; background: transparent;
}
.hk-bar-action:hover { background: #247BA0; color: #fff; text-decoration: none; }

.hk-footer {
  max-width: 720px; margin: 36px auto 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line, rgba(80, 81, 79, 0.16));
  font-size: 0.8rem; line-height: 1.7; text-align: center;
  color: #8c8e8b;
}
.hk-footer p { margin: 4px 0; }
.hk-footer a { color: #247BA0; text-decoration: none; }
.hk-footer a:hover { text-decoration: underline; }
.hk-footer .hk-fine { font-size: 0.74rem; }