/* AkiWatch 共通デザイントークン + 共通コンポーネント (単一ソース)
   全ページで各ページの <style> の後に読み込む (後勝ちで共通部を統一する)。
   ページ側で同名クラスを再定義しても、ここが最終的な基準になる。
   2つの変数命名体系 (--paper系 / --bg系) を両方定義し、どちらの参照でも描画されるようにする。 */
:root{
  --paper:#efe8d7; --paper2:#e8dfc9; --card:#f5efe1; --ink:#26281d; --ink2:#4d4f3e; --faint:#8b8571;
  --forest:#3e4a35; --moss:#5c7040; --rust:#a8492a; --ochre:#bf7f34; --stone:#b4ac95; --line:#d4caae; --mist:#ded5bf;
  --open:#5c7040; --open-ink:#f5efe1; --few:#bf7f34; --few-ink:#2a1e07; --full:#c8bfa4;
  --accent:#a8492a; --accent2:#8f3c22; --accent-ink:#f5efe1;
  --bg:var(--paper); --bg2:var(--paper2); --panel:var(--card); --panel2:#ece3ce; --muted:var(--ink2);
  --serif:"Fraunces","Zen Old Mincho",Georgia,serif;
  --sans:"Archivo","Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#161811; --paper2:#1c1f16; --card:#1f2318; --ink:#ece5d1; --ink2:#b3ad96; --faint:#7d7862;
  --forest:#9db77a; --moss:#8ba867; --rust:#d97a45; --ochre:#d59a4a; --stone:#4a4d3a; --line:#32362a; --mist:#262a1e;
  --open:#8ba867; --open-ink:#161811; --few:#d59a4a; --few-ink:#161811; --full:#3a3e2e;
  --accent:#d97a45; --accent2:#e58b56; --accent-ink:#161811;
  --panel2:#20231a;
}}

/* ページのキャンバス色 (iOS Safariのツールバー伸縮・オーバースクロールで未描画領域が出た時、
   コンテンツ断片でなく背景色が出るようにする) */
html{background:var(--paper)}

/* ---- ヘッダー (不透明 + 上側シールド) ---- */
nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);backdrop-filter:none}
nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:140px;background:inherit}
a.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:700;font-family:var(--serif);margin:0;justify-content:flex-start}
a.brand svg{width:24px;height:24px}

/* ---- 言語トグル (角丸2px・forest選択色で統一) ---- */
.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang button{background:none;border:0;color:var(--ink2);font-size:.72rem;font-weight:700;padding:6px 12px;cursor:pointer;min-height:40px;min-width:44px}
.lang button[aria-pressed=true]{background:var(--forest);color:var(--paper)}

/* ---- モバイル下部タブバー (不透明で統一) ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:var(--paper);backdrop-filter:none;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;color:var(--ink2);text-decoration:none;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;min-height:44px}
.tabbar a svg{width:22px;height:22px}
.tabbar a.on{color:var(--rust)}
@media(min-width:760px){.tabbar{display:none}}
body.has-tabbar{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
@media(min-width:760px){body.has-tabbar{padding-bottom:0}}

/* ---- 共通フッター (utilityページ用。indexは独自footerを維持) ---- */
footer.site-foot{background:var(--paper2);border-top:1px solid var(--line);margin-top:44px;padding:26px 18px calc(22px + env(safe-area-inset-bottom))}
footer.site-foot .foot-links{display:flex;flex-wrap:wrap;gap:14px 18px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;max-width:640px;margin:0 auto}
footer.site-foot .foot-links a{color:var(--ink2);text-decoration:none}
footer.site-foot .copy{color:var(--faint);font-size:.72rem;margin-top:12px;max-width:640px;margin-left:auto;margin-right:auto}

/* ---- 下部固定CTA (watch) も不透明に ---- */
.cta{background:var(--paper);backdrop-filter:none}

/* ---- 下側シールド: iOS Safariのツールバー伸縮時に fixed 下部バーの下へ本文が透けるのを防ぐ
   (ヘッダーの nav::before と対になる対策) ---- */
.tabbar::after,.cta::after{content:"";position:absolute;left:0;right:0;top:100%;height:220px;background:inherit;pointer-events:none;
  /* fixed親のレイヤーはビューポート下端でクリップされシールドが消える (iOS実機で確認)。
     独自の合成レイヤーに昇格させてクリッピングを回避する */
  transform:translate3d(0,0,0);will-change:transform}