/* 利用する際の注意点→https://star-delta.github.io/ */

@media (prefers-color-scheme: light) {
    .markdown-body {
        color-scheme: light;
        --color-font: Black;
        --color-canvas-default: White;
        --color-canvas-muted: GhostWhite;
        --color-canvas-subtle: WhiteSmoke;
        --color-border-default: LightGray;
        --color-border-muted: DarkGray;
        --color-border-subtle: Gray;
        --color-headline-default: DarkSeaGreen;
        --color-headline-muted: MediumSeaGreen;
        --color-headline-subtle: SeaGreen;
        --color-danger: red;
        --color-syntax: DarkGoldenrod;
        }
}

@media (prefers-color-scheme: dark) {
    .markdown-body {
        color-scheme: dark;
        --color-font: White;
        --color-canvas-default: #1f2933;
        --color-canvas-muted: #323f4b;
        --color-canvas-subtle: #3e4c59;
        --color-border-default: #52606d;
        --color-border-muted: #616e7c;
        --color-border-subtle: #7b8794;
        --color-headline-default: DarkOliveGreen;
        --color-headline-muted: Olive;
        --color-headline-subtle: OliveDrab;
        --color-danger: red;
        --color-syntax: Goldenrod;
        }
}

.markdown-body {
    /* --margin: calc(var(--font-size) * 0.5); */
    --margin: 0.5cm;
    --margin-bottom: var(--font-size);
    --border: none;
    --padding:none;
    --font-size: 16px;
    /* --line-height: calc(var(--font-size) * 1.25); */
    --line-height: 1.5;
}

.markdown-body {
    background-color: var(--color-canvas-default);
    /* margin: var(--margin); */
    /* margin-bottom: var(--margin-bottom); */
    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-selif;

    /* HeadLine */
    & h1,
    & h2,
    & h3,
    & h4,
    & h5{
        margin-left: 0;
        margin-right: 0;
        padding-top: calc(var(--font-size) * 0.25);
        padding-bottom: calc(var(--font-size) * 0);
        line-height:1;
    }
    & h2,
    & h3,
    & h4,
    & h5 {
        margin-bottom: calc(var(--margin-bottom));
    }

    & h1,
    & h2 {
        background: var(--color-headline-default);
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    & h1 {
        margin-right: calc(var(--font-size) * 2);
        margin-bottom: calc(var(--margin-bottom) + var(--font-size));
        border: none;
        box-shadow: var(--font-size) calc(var(--font-size) / 2) 0 var(--color-headline-muted), calc(var(--font-size) * 2) var(--font-size) 0 var(--color-headline-subtle);
        font-size:xx-large;
        text-align: center;
        @media print {
            margin-top: 50vh;
            + p {text-align: center;}
        }
        counter-reset: h2;
    }
    & h2 {
        border-left: solid calc(var(--font-size) * 0.5) var(--color-headline-muted);
        border-bottom: solid calc(var(--font-size) * 0.25) var(--color-headline-subtle);
        padding-left: calc(var(--font-size) / 2);
        font-size:xx-large;
        counter-increment: h2;
        counter-reset: h3;
        &::before {
            content: counter(h2) " ";
        }
        @media print {
                page-break-before: always;
        }
        ~ :not(h1 ,h2 ,h3) {
            margin-left: calc(var(--font-size) * 1);
        }
    }
    & h3 {
        border-left: solid calc(var(--font-size) * 1) var(--color-headline-muted);
        border-bottom: solid calc(var(--font-size) * 0.25) var(--color-headline-subtle);
        padding-left: calc(var(--font-size) / 2);
        font-size:xx-large;
        counter-increment: h3;
        &::before {
            content: counter(h2) "." counter(h3) " ";
        }
        ~ :not(h1 ,h2 ,h3) {
            margin-left: calc(var(--font-size) * 1.5);
        }
    }
    & h4 {
        font-size:x-large;
        border-bottom: solid calc(var(--font-size) * 0.66) var(--color-headline-default);
        position: relative;
        display: table;
    }
    & h5 {
        font-size:large;
        border-bottom: solid calc(var(--font-size) * 0.33) var(--color-headline-muted);
        position: relative;
        display: table;
    }
    /* HeadLine */

    & h6 {
        margin: 0;
        font-size:xx-small;
        &::before {content: '[*';}
        &::after {content: ']';}
        + p {
            font-size: xx-small;
            margin-top: 0;
        }
    }
    
    /* characters and sentences */
    & p:has(+ ul) ,
    & p:has(+ ol) {
        margin-bottom: 0;
    }
    & strong {
        color: var(--color-danger);
    }

    & em {
        font-family:
            /* 英語 */
            'Segoe Script',/* Windows用 */
            /* 明朝体 */
            YuMincho,/* Mac用 */
            'Yu Mincho',/* Windows用 */
            'Noto Serif JP',/* Linux用 */
            serif;
        font-style: italic;
    }
    /* characters and sentences */
    /* Table */
    & table {
        /* margin: var(--margin); */
        margin-bottom: var(--margin-bottom);
        border-width: medium;
        border-style: solid;
        border-color: var(--color-border-default);
        border-spacing: unset;
        padding: unset;
        & thead {
            background-color: var(--color-canvas-subtle);
            border-bottom: thin solid var(--color-border-subtle);
            & tr {
                & th {
                    border-style:  none solid;
                    border-width: thin;
                    border-color: var(--color-border-default);
                    padding: calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.2);
                }
            }
        }
        & tbody {
            border-top: thin solid var(--color-border-subtle);
            & tr {
                & td {
                    border-style: dotted solid;
                    border-width: thin;
                    border-color: var(--color-border-default);
                    padding: calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.2);
                }
            }
            > tr:nth-of-type(2n-0){
                background-color: var(--color-canvas-muted);
            }
        }
    }
    /* Table */
    /* CodeBlock */
    & pre {
        background-color: var(--color-canvas-subtle);
        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-default);
        padding: calc(var(--font-size) * 0.25);
    }
    & code {
        background-color: var(--color-canvas-subtle);
        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;
    }
    /* CodeBlock */
    /* Decoration */
    & hr {
        background-color: var(--color-border-default);
        /* margin: var(--margin); */
        /* margin-bottom: var(--margin-bottom); */
        border: 0;
        /* border-style:solid; */
        padding: 1px;
    }
    & blockquote{
        background-color: var(--color-canvas-muted);
        border: unset;
        border-left: solid calc(var(--font-size) / 2) var(--color-border-default);
        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 */
}