/* 1. ページ全体のフェードインと背景グリッド（最優先設定） */
html body {
    opacity: 0; 
    transition: opacity 1.2s ease-in-out !important;
    /* 背景：設計図風のグリッド（少し濃いめに調整） */
    background-image: 
        linear-gradient(rgba(26, 54, 93, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 54, 93, 0.08) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-attachment: fixed !important;
    background-color: #f4f6f9 !important;
}
html body.loaded { opacity: 1 !important; }

/* 2. 読了進捗バー（黄色にして視認性を最大化） */
#scroll-progress {
    position: fixed; top: 0; left: 0; width: 0%; height: 5px;
    background: #ff8b17 !important; /* 目立つオレンジ/黄色 */
    z-index: 100000 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* 3. メインエリアを「浮き上がるカード」にする */
#hpb-container {
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    overflow: hidden;
}