I see two issues: (1) the nav is fixed to the viewport center using left-1/2 -translate-x-1/2, but since the page content is inside a max-w-[390px] container, the nav doesn't align with that container; (2) there's a hydration mismatch from ThemeProvider returning null during SSR. Let me also read the theme provider to fix both issues:

Now I understand the full picture. Two fixes needed:

1. ThemeProvider: Returning null when !mounted causes a hydration mismatch because the server renders children but client renders nothing. Instead, render children always but apply theme in an effect.
2. BottomNav: Using fixed + left-1/2 positions it relative to the viewport, not the 390px container. I need to make it absolute within the container instead.

Now fix the bottom nav positioning -- change from fixed to sticky at the bottom of the container:

ボトムナビのズレを確認します。

原因がわかりました。BottomNav は fixed + left-1/2 + -translate-x-1/2 でビューポート全体の中央に配置していますが、コンテンツは max-w-[390px] の親コンテナ内にあります。画面幅が390px以上だと、ナビはビューポートの中央に来るのにコンテンツは左寄りのコンテナ内にあるため、ズレが発生します。

ナビを fixed ではなく sticky にして親コンテナの幅に合わせるか、または BottomNav を親コンテナ内に absolute で配置する形に修正します。

次に、ページ側も BottomNav をスクロールコンテンツの下ではなく、sticky で画面下部に固定されるよう構造を調整します。

fixed + left-1/2 + -translate-x-1/2 はビューポート全体を基準に中央配置するため、390px制約のコンテナからズレていました。sticky bottom-0 に変更し、親の flex flex-col レイアウト内でコンテンツ末尾に自然に配置されつつ画面下部に固定される形にしました。これでナビがコンテナ幅にぴったり収まります。