/* Grid cards: 各カードの表題（最初のp要素）に背景色を設定 */
.grid.cards > ul > li:nth-child(1) > p:first-child {
    background-color: #E3F2FD;
    margin: -0.8rem -0.8rem 0.8rem;
    padding: 0.8rem;
    border-radius: 0.2rem 0.2rem 0 0;
}

.grid.cards > ul > li:nth-child(2) > p:first-child {
    background-color: #E8F5E9;
    margin: -0.8rem -0.8rem 0.8rem;
    padding: 0.8rem;
    border-radius: 0.2rem 0.2rem 0 0;
}

.grid.cards > ul > li:nth-child(3) > p:first-child {
    background-color: #FFF3E0;
    margin: -0.8rem -0.8rem 0.8rem;
    padding: 0.8rem;
    border-radius: 0.2rem 0.2rem 0 0;
}

.grid.cards > ul > li:nth-child(4) > p:first-child {
    background-color: #FFEBEE;
    margin: -0.8rem -0.8rem 0.8rem;
    padding: 0.8rem;
    border-radius: 0.2rem 0.2rem 0 0;
}

/* ダークモード時のGrid cards表題の背景色 */
[data-md-color-scheme="slate"] .grid.cards > ul > li:nth-child(1) > p:first-child {
    background-color: #1A3A52;
    color: #E3F2FD;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li:nth-child(2) > p:first-child {
    background-color: #1B3A2A;
    color: #E8F5E9;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li:nth-child(3) > p:first-child {
    background-color: #3A2A10;
    color: #FFF3E0;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li:nth-child(4) > p:first-child {
    background-color: #3A1A1A;
    color: #FFEBEE;
}

/* 見出しのボーダー */
h1 {
    border-bottom: solid 2px #9E9E9E;
}

h2 {
    border-bottom: 2px dotted #9E9E9E;
}

/* inline admonition の float を次のセクション見出しでクリア */
.clear-float-h2 h2 {
    clear: both;
}

h3 {
    border-bottom: 1px dotted #9E9E9E;
}

/* ダークモード時の見出しのボーダー */
[data-md-color-scheme="slate"] h1 {
    border-bottom: solid 2px #616161;
}

[data-md-color-scheme="slate"] h2 {
    border-bottom: 2px dotted #616161;
}

[data-md-color-scheme="slate"] h3 {
    border-bottom: 1px dotted #616161;
}

/* 外部リンクアイコン（リンク前に表示） */
.md-content a[target="_blank"]::before {
    content: "";
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    margin-right: 0.2em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-17.7 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-17.7 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 列ヘッダーテーブル: tbody の th（行ヘッダー）をスタイリング */
.col-header table tbody th[scope="row"],
table.col-header tbody th[scope="row"] {
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    min-width: 8em;
    border-top: 0.05rem solid var(--md-typeset-table-color);
}

/* 列ヘッダーテーブル: 行ホバー時に全セルを同じ色で統一 */
.col-header table tr:hover th,
.col-header table tr:hover td,
table.col-header tr:hover th,
table.col-header tr:hover td {
    background-color: var(--md-accent-fg-color--transparent);
}

/* Single HTML 埋め込み表示: コンテナのスタイル */
.single-html-container {
    width: 100%;
    min-height: 200px;
}

.single-html-container:not(.single-html-loaded) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-default-fg-color--light);
}

.single-html-container:not(.single-html-loaded)::before {
    content: "読み込み中...";
}

/* Single HTML ページでは zensical の見出しボーダーを無効化 */
.single-html-container h1,
.single-html-container h2,
.single-html-container h3 {
    border-bottom: none;
}

/* コンテンツ幅の切り替えアニメーション（初回ロード時はアニメーション無効） */
body.md-wide-ready .md-grid {
    transition: max-width 0.3s ease;
}

/* コンテンツ幅の拡張（body.md-wide クラスで切り替え） */
body.md-wide .md-grid {
    max-width: 1800px;
}