body,
button,
input,
select {
    font-family: "Neue Haas Grotesk Text Pro", "Aptos", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Noto Sans JP", "游ゴシック", sans-serif;
}

input,
select,
button {
    font-size: inherit;
}

@media screen {
    :root{
        --sch-min: 0px;
    }
    header {
        position: fixed;
        top: env(titlebar-area-y, 0);
        left: env(titlebar-area-x, 0);
        height: env(titlebar-area-height, 36px);
        width: env(titlebar-area-width, 100%);
        -webkit-app-region: drag;
        display: grid;
        place-items: center;
    }

    article {
        margin-top: env(titlebar-area-y, 0);
        padding-top: env(titlebar-area-height, 36px);
    }

    header a {
        -webkit-app-region: no-drag;
    }

    dialog {
        padding: 0;
    }

    .formTitle {
        margin: 6px;
        display: grid;
        place-items: center;
    }

    .formBody {
        margin: 6px;
    }

    .formTitle h2 {
        margin: 0;
    }

    .form_table {
        display: grid;
        gap: 6px;
        grid-template-columns: auto 1fr;
    }

    .form_table>:nth-child(odd) {
        display: grid;
        align-items: center;
        justify-content: end;
    }

    .form_table>:nth-child(even)>select,
    .form_table>:nth-child(even)>input {
        width: 100%;
        min-height: 36px;
        box-sizing: border-box;
        display: grid;
        align-items: center;
    }

    form:last-child .formButton {
        position: sticky;
        bottom: 6px;
    }

    .formButton {
        display: flex;
        gap: 6px;
        align-items: stretch;
        justify-content: space-around;
        margin: 6px;
    }

    .formButton button {
        flex: 1;
        min-height: 36px;
    }

    #canvPre {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        justify-items: center;
        align-items: center;
    }

    #canvPre canvas,
    #canvPre img:not(:fullscreen) {
        max-width: 100%;
        max-height: 100dvh;
        border: 1px solid;
        border-radius: 6px;
        box-sizing: border-box;
    }

    #canvPre img:fullscreen {
        background-color: white;
        animation: fade 1s;
    }

    @keyframes fade {
        0% {
            opacity: 0;
            filter: blur(20px);
        }
    }

    #sample_table>table {
        min-width: 100%;
    }

    #sample_table>table tr {
        text-align: center;
    }

    #planTitle {
        margin: 0;
        min-width: 36px;
        min-height: 36px;
    }

    #main_cal>table {
        display: grid;
        grid-template-columns: repeat(7, auto);

        thead,
        tbody,
        tfoot,
        tr {
            display: contents;
        }

        th,
        td {
            display: block;
        }

        width: 100%;
    }

    #main_cal>table td>button {
        width: 100%;
        height: 100%;
        min-height: 36px;
        display: grid;
        grid-template-rows: auto 1fr;
        align-items: stretch;
        padding: 0;
    }
    #main_cal>table td>button>*:first-child{
        display: grid;
        place-items: center;
        min-height: var(--sch-min);
    }
    #main_cal>table td>button>*:last-child{
        display: grid;
        place-items: center;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            color-scheme: dark;
        }

        #canvPre img:fullscreen {
            background-color: black;
        }
    }
}

@media print {

    header,
    dialog,
    main {
        display: none;
    }

    @page {
        size: A4 portrait;
    }

    body {
        width: 190mm;
        margin: 0;
    }

    article>section {
        width: 190mm;
        height: 277mm;
        overflow: hidden;
        page-break-after: always;
        box-sizing: border-box;
    }
}