/* ============================================================ カロリー帳 — 情報・法的・ガイドページ用スタイル styles.css のデザイントークン（--bg / --ink / --acc 等）と .site-footer / .brand-mark を再利用しつつ、文書系の体裁を足す。 ============================================================ */ body { background: var(--bg); background-image: var(--bg-grad); } /* ---------- ヘッダー ---------- */ /* 内容はアプリ（.topnav）と同じく 1180px 本体カラムに整列（full-width の間延びを解消）。 sticky のまま＝本文オフセット不要。ログイン中はアプリと同じ .brand/.nav-tabs を流用する。 */ .site-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--nav-h); padding: 0 max(clamp(16px, 4vw, 40px), calc(50% - 590px + clamp(16px, 4vw, 40px))); background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid color-mix(in oklch, var(--line) 70%, transparent); } .site-head-brand { display: flex; align-items: center; gap: 11px; flex: none; text-decoration: none; color: var(--ink); } /* アプリ用 .nav-tab は