@import url("https://unpkg.com/open-props");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

:root {
    /* open-propsの設計思想に合わせつつ、指定の色味をマッピング（完全維持） */
    --brand-bg: #fbf7f4;
    --brand-theme: #4a3629;
    --brand-text: #2d2018; /* 視認性の良い濃いめのチョコブラウン */
}

/* ==========================================================================
   最外殻のリセット（Android / iOS アプリ内ブラウザの高さ誤認バグを完全粉砕）
   ========================================================================== */
html {
    /* 💡ここが最大の修正ポイント：
       html自体を画面に対して『絶対空間（ビューポート）』としてピン留めします。
       これでブラウザがシステムバーをどう誤認しようが、物理的なスマホ画面の
       100%のサイズ（上下左右の端）から土台が絶対に動かなくなります。 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    
    margin: 0;
    padding: 0;
    
    /* 💡ここが一番重要：画面全体のスクロールとバウンドを完全に禁止 */
    overflow: hidden; 
    overscroll-behavior: none; 
    
    -webkit-text-size-adjust: 100%;
}

body {
    /* htmlの絶対空間を100%引き継ぎ、画面サイズにミリ単位でぴったり合わせます */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--brand-bg);
    color: var(--brand-text);
    
    /* 💡スマホの引っ張りジェスチャーによる画面移動を禁止 */
    touch-action: none; 

    font-family: 'Noto Sans JP', var(--font-sans);
    -webkit-tap-highlight-color: transparent;

    /* 💡元のFlexbox構造を完全維持 */
    display: flex;
    flex-direction: column;
}