@media (prefers-color-scheme: light), print {

    .markdown-body,
    .markdown-colorpallet {
        color-scheme: light;
        --color-font: Black;
        --color-background-emphasis: WhiteSmoke;
        --color-background: GhostWhite;
        --color-background-muted: White;
        /* --color-background-subtle: WhiteSmoke; */
        --color-border: LightGray;
        /* --color-border-muted: DarkGray; */
        --color-border-subtle: Gray;
        --color-heading-default: SeaGreen;
        --color-heading-muted: MediumSeaGreen;
        --color-heading-subtle: DarkSeaGreen;
        /* --color-danger: red; */
        --color-syntax: SaddleBrown;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .markdown-body,
    .markdown-colorpallet {
        color-scheme: dark;
        --color-font: White;
        --color-background-emphasis: #1e2838;
        --color-background: #1a202f;
        --color-background-muted: #151826;
        /* --color-background-subtle: #10101d; */
        --color-border: #52606d;
        /* --color-border-muted: #616e7c; */
        --color-border-subtle: #7b8794;
        --color-heading-default: OliveDrab;
        --color-heading-muted: Olive;
        --color-heading-subtle: DarkOliveGreen;
        /* --color-danger: red; */
        --color-syntax: SandyBrown;
    }
}

.markdown-body {
    /* --margin: calc(var(--font-size) * 0.5); */
    /* --margin: 0.5cm; */
    --margin-bottom: var(--font-size);
    --border: none;
    --padding: 0;
    --font-size: 1rem;
    --content-indent: var(--font-size);
    /* --line-height: calc(var(--font-size) * 1.25); */
    --line-height: 1.5;
}

.markdown-body {
    background-color: var(--color-background);
    /* margin: var(--margin); */
    /* margin-bottom: var(--margin-bottom); */
    margin: 0;

    > :first-child {
        margin-block-start: 0;
    }

    > :last-child {
        margin-block-end: 0;
    }

    > :not(h1, h2, h3, h6, hr) {
        margin-inline: var(--content-indent);
    }

    border: var(--border);
    padding: var(--padding);
    line-height: var(--line-height);
    font-size: var(--font-size);
    color: var(--color-font);
    font-family: "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
    overflow-wrap: anywhere;

    /* HeadLine */
    :is(h1, h2, h3, h4, h5) {
        margin-block: 1.5em 0.5em;
        padding-block: 0;
        /* padding-bottom: calc(var(--font-size) * 0); */
        line-height: 1.2;

        + :is(h1, h2, h3, h4, h5) {
            margin-block: 0.25em;
        }
    }

    & h1 {
        margin-inline-end: 1em;
        /* margin-block-end: 1em; */
        /* margin-bottom: calc(var(--margin-bottom) + var(--font-size)); */
        border: none;
        padding-block-start: 0.2em;
        background: var(--color-heading-subtle);
        box-shadow: 0.5em 0.25em var(--color-heading-muted), 1em 0.5em var(--color-heading-default);
        font-size: 2em;
        text-align: center;
        counter-reset: h2 h3;
    }

    & h2 {
        border-inline-start: solid var(--font-size) var(--color-heading-muted);
        border-block-end: solid calc(var(--font-size) * 0.25) var(--color-heading-default);
        padding-inline-start: 0.25em;
        padding-block-start: 0.25em;
        background: var(--color-heading-subtle);
        font-size: 1.5em;
        counter-increment: h2;
        counter-reset: h3;

        &::before {
            content: counter(h2) " ";
        }
    }

    & h3 {
        border-inline-start: solid var(--font-size) var(--color-heading-muted);
        border-block-end: solid calc(var(--font-size) * 0.25) var(--color-heading-default);
        padding-inline-start: 0.25em;
        padding-block-start: 0.25em;
        font-size: 1.5em;
        counter-increment: h3;

        &::before {
            content: counter(h2) "." counter(h3) " ";
        }
    }

    & h4 {
        font-size: 1.2em;
        border-block-end: solid 0.25em var(--color-heading-default);
        position: relative;
        display: table;
    }

    & h5 {
        /* font-size:large; */
        border-block-end: solid 0.25em var(--color-heading-muted);
        position: relative;
        display: table;
    }

    /* HeadLine */

    & h6 {
        /* 注釈として利用 */
        margin-block: 0;
        font-size: 0.6em;

        &::before {
            content: '[*';
        }

        &::after {
            content: ']';
        }

        +p {
            font-size: 0.6em;
            margin-block-start: 0;
        }
    }

    /* characters and sentences */
    & p:has(+ ul),
    & p:has(+ ol) {
        margin-bottom: 0;
    }

    & strong {
        color: inherit;
        font-weight: bold;
    }

    & em {
        font-family:
            /* 英語 */
            'Segoe Script',
            /* Windows用 */
            /* 明朝体 */
            YuMincho,
            /* Mac用 */
            'Yu Mincho',
            /* Windows用 */
            'Noto Serif JP',
            /* Linux用 */
            serif;
        font-style: italic;
    }

    /* characters and sentences */

    /* Table */
    & table {
        background-color: var(--color-background);
        margin-bottom: var(--margin-bottom);
        padding: 0;
        border: medium solid var(--color-border);
        border-collapse: separate;
        border-spacing: 0;
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;

        & thead {
            background-color: var(--color-background-emphasis);
        }

        & th,
        & td {
            border: 0;
            white-space: nowrap;
            padding:
                calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.2);
        }

        /* 列間の縦罫線 */
        & tr> :not(:first-child) {
            border-inline-start: thin solid var(--color-border-subtle);
        }

        /* HeaderとBodyの境界 */
        & tbody>tr:first-child>* {
            border-block-start: thin solid var(--color-border);
        }

        /* Body内の行間 */
        & tbody>tr+tr>* {
            border-block-start: thin dotted var(--color-border-subtle);
        }

        /* 縞縞をつける */
        & tbody>tr:nth-of-type(even) {
            background-color: var(--color-background-muted);
        }
    }

    >table {
        max-width: calc(100% - 2 * var(--content-indent));
    }

    /* Table */

    /* CodeBlock */
    & pre {
        background-color: var(--color-background-muted);
        border-radius: calc(var(--font-size) * 0.225);
        /* margin: var(--margin); */
        /* margin: 0; */
        margin-bottom: var(--margin-bottom);
        border: calc(var(--font-size) * 0.1) solid var(--color-border);
        padding: calc(var(--font-size) * 0.25);
        overflow-x: auto;
        max-block-size: none;
    }

    & code {
        background-color: var(--color-background-muted);
        border-radius: calc(var(--font-size) * 0.225);
        font-size: calc(100% * 0.9);
        font-family:
            Menlo,
            /* Mac OS X 10.6(2009年) */
            Consolas,
            /* Windows Vista(2006年) */
            "Hiragino Kaku Gothic ProN",
            /* 和文コメント用：Mac OS X 10.5(2006年) */
            Meiryo,
            /* 和文コメント用：Windows Vista(2006年) */
            monospace;
        /* 上記以外 */
        line-height: 1;
    }

    /* インラインコードの文字色と長い連続文字列の折り返し */
    & code:not(pre code) {
        color: var(--color-syntax);
        overflow-wrap: anywhere;
    }

    /* CodeBlock */

    /* Image */
    & img {
        max-width: 100%;
        height: auto;
    }

    >img {
        max-width: calc(100% - 2 * var(--content-indent));
    }

    /* Image */

    /* Decoration */
    & hr {
        background-color: var(--color-border);
        /* margin: var(--margin); */
        /* margin-bottom: var(--margin-bottom); */
        border: 0;
        /* border-style:solid; */
        padding: 1px;
    }

    & blockquote {
        background-color: var(--color-background-muted);
        border: unset;
        border-left: solid calc(var(--font-size) / 2) var(--color-border);
        padding-left: calc(var(--font-size) / 2);
    }

    /* Decoration */

    /* List */
    & ol,
    & ul {
        padding-left: calc(var(--font-size) * 2);
    }

    & li {

        & ol,
        & ul {
            margin-bottom: unset;
        }
    }

    /* List */
}