/* --- 共通: ノート風レイアウトのベース --- */
.notebook-unit {
    display: grid;
    grid-template-columns: 7fr 3fr; /* PCでの比率 */
    gap: 0 2rem; /* 左右の隙間 */
    
    /* 重要: ユニット同士をくっつけるため上下マージンを制御 */
    margin-bottom: 0; 
    padding-bottom: 0;
}

/* 左側（メイン）共通 */
.notebook-main {
    padding: 0.5rem 0; /* 文章が窮屈にならない程度の余白 */
}

/* --- 右側（メモ）共通設定 --- */
.notebook-note {
    font-size: 0.85rem;
    color: #555;
    padding: 0.5rem 0 0.5rem 1rem;
    background-color: transparent;
    min-height: 100%;
    
    /* ベースの線（指定がない場合のデフォルト色） */
    border-left: 2px solid #ccc; 
    transition: border-color 0.3s; /* 切り替え時にふわっと色が変わる演出 */
}

/* --- バリエーションごとの色設定 --- */

/* 重要（赤線）: is-style-note-red が付いたとき */
.notebook-note.is-style-note-red {
    border-left-color: #d85e5e;
    background-color: #fffdfd; /* 背景もほんのり赤くしても可愛い */
}

/* メモ（灰線）: is-style-note-gray が付いたとき */
.notebook-note.is-style-note-gray {
    border-left-color: #bbbbbb;
}

/* 補足（青線）: is-style-note-blue が付いたとき */
.notebook-note.is-style-note-blue {
    border-left-color: #5e9ed8;
    background-color: #f0f8ff; /* 背景を薄い水色に */
}


/* --- 1. ヘッダー部分（タイトル込み）の設定 --- */
.notebook-unit-header .notebook-note {
    /* ★ここがポイント: タイトルの高さ分だけメモを下にずらす */
    /* 例: タイトル文字サイズ(1.5em) + 上下マージン分 ≒ 3.5rem と想定 */
    margin-top: 3.5rem; 
    min-height: calc(100% - 3.5rem);
}

/* --- 2. 中間部分の設定 --- */
.notebook-unit-body .notebook-main,
.notebook-unit-body .notebook-note {
    /* 上のブロックと自然につながるように調整 */
    padding-top: 0;
}

/* --- 3. 最後尾（下線あり）の設定 --- */
.notebook-unit-footer {
    /* ここだけ下に余白と境界線をつける */
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px dashed #ccc; 
}


/* --- スマホ対応（レスポンシブ） --- */
@media (max-width: 768px) {
    .notebook-unit {
        display: block; /* グリッド解除 */
        margin-bottom: 0;
        border-bottom: none; /* スマホでは連結線は不要な場合が多い */
    }
    
    /* スマホでは「下げ」を無効化する（タイトルの下に来るため） */
    .notebook-unit-header .notebook-note {
        margin-top: 1rem;
        margin-bottom: 2rem; /* ブロック間の区切り */
        border-left: 4px solid #d85e5e;
        background-color: #f9f9f9;
        padding: 1rem;
    }
    
    /* スマホでの連結表示が不要なら、中間・フッターも同様に調整 */
    .notebook-unit-body, .notebook-unit-footer {
        margin-bottom: 2rem;
    }
    
    .notebook-unit-footer {
         border-bottom: 1px dashed #ccc;
    }
}