/* ===================================================
   つくりてノート — アンカー位置の共通トークン
   ===================================================

   ★このファイルは「sticky ヘッダーとページ内リンク(#anchor)の位置合わせ」だけを持つ。
   リセット・フォント・配色トークンは入れないこと（base.css を読まない
   スタンドアロンページが、見た目を変えずにこれだけを読めることが存在意義）。

   読み込み先は base.css を読む全ページ（layout.html 経由のアプリ画面・LP・法務系）と、
   base.css を読まないスタンドアロンページ（ツール系・公開ポートフォリオ・
   おしながき印刷）。必ず各ページの独自CSSより前に <link> すること。
   （TestAnchorOffsetIsCentralized / TestStickyHeaderPagesLoadAnchorOffsetCSS が監視） */

/* ── sticky ヘッダーとアンカー位置の共通トークン ──
   アプリ(.header@layout.css)・LP(.header@lp.css)・ツール(.tool-header@tool.css 等)は
   いずれも position:sticky; top:0 でページ上端に貼り付く。そのままだと
   ページ内リンク(#anchor)で飛んだ見出しがヘッダーの下に潜って読めない。

   --header-h : 貼り付くヘッダーの実高さ（実測の最大値）。
                ★ .header / .tool-header の実高さと一致させること。
                ヘッダーの padding・font-size・.header-inner の height を変えたら
                ここも実測して更新する（Playwright で headerBottom を測る）。
                実測値(2026-08): アプリ .header mobile 50px / desktop 53.4px、
                LP・ツール .header 57px、ツール .tool-header 60.9px
                → 最大の 61px を採用し全ヘッダーを覆う。
   --anchor-offset : scroll-padding-top に入れる値。ヘッダー高さ＋見出しが
                ヘッダーに接しないための余白。 */
:root {
  --header-h: 61px;
  --anchor-offset: calc(var(--header-h) + 12px);
}

html {
  /* ページ内リンク(#anchor)のジャンプ先を sticky ヘッダーの下に潜らせない。
     このファイルは sticky ヘッダーを持つ全ページが読むので、ここに1回だけ書けば
     新しい画面を足しても自動で守られる。個別CSSでべた書きしないこと
     （TestAnchorOffsetIsCentralized がラチェット監視）。 */
  scroll-padding-top: var(--anchor-offset);
}