:root {
    color: #17324d;
    background: #f4f7fa;
    font-family: system-ui, sans-serif
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

main {
    max-width: 760px;
    margin: auto;
    padding: 24px 16px 60px
}

header {
    color: #fff;
    background: #123b5d;
    border-radius: 18px;
    margin-bottom: 16px;
    padding: 28px
}

header span {
    color: #9fd4dc;
    font-size: .9rem
}

h1 {
    margin: 8px 0;
    font-size: 2rem
}

.notice {
    background: #fff8e7;
    border: 1px solid #edd28b;
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 14px
}

.card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 18px #123b5d12
}

h2 {
    border-bottom: 2px solid #dce9ed;
    margin-top: 0;
    margin-bottom: 18px;
    padding-bottom: 8px;
    font-size: 1.2rem
}

label {
    margin: 14px 0;
    font-weight: 600;
    display: block
}

input,
select {
    width: 100%;
    font: inherit;
    background: #fff;
    border: 1px solid #b8c9d3;
    border-radius: 8px;
    margin-top: 6px;
    padding: 11px;
    display: block
}

.base-year-month,
.base-date {
    margin: 14px 0;
    font-weight: 600;
    display: block
}

.base-year-month-label,
.base-date-label {
    display: block
}

.base-year-month-fields,
.base-date-fields {
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    display: grid
}

.base-year-month-fields {
    grid-template-columns: minmax(7rem, .85fr) auto minmax(8rem, 1fr) auto
}

.base-date-fields {
    grid-template-columns: minmax(6.5rem, .85fr) auto minmax(7rem, 1fr) auto minmax(7rem, 1fr) auto
}

.base-year-month-fields input,
.base-year-month-fields select,
.base-date-fields input,
.base-date-fields select {
    margin: 0
}

.base-year-month-fields span,
.base-date-fields span {
    font-size: .9rem
}

.field-error {
    color: #b42318;
    margin: 7px 0 0;
    font-size: .88rem;
    font-weight: 600
}

.special-options {
    background: #f3f8fa;
    border: 1px solid #d4e4e9;
    border-radius: 10px;
    margin: 18px 0;
    padding: 12px 14px
}

.special-options label {
    align-items: center;
    gap: 9px;
    margin: 8px 0;
    display: flex
}

.special-options input {
    accent-color: #0b7189;
    width: auto;
    margin: 0
}

.education-help {
    color: #29495f;
    background: #f7fafc;
    border-left: 4px solid #0b7189;
    border-radius: 8px;
    margin: 0 0 18px;
    padding: 14px 16px;
    font-size: .9rem;
    line-height: 1.65
}

.education-help p {
    margin: 5px 0
}

.education-help ul {
    margin: 6px 0;
    padding-left: 22px
}

.education-help li {
    margin: 5px 0
}

.history {
    grid-template-columns: 1fr 1.35fr 1fr;
    align-items: end;
    gap: 10px;
    margin: 12px 0;
    display: grid
}

.history b {
    font-size: .9rem
}

.history>select {
    margin: 0
}

.history-end>span {
    font-size: .85rem;
    font-weight: 600
}

.history-end-fields {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, .75fr) auto;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    display: grid
}

.history-end-fields select {
    margin: 0;
    padding: 10px 7px
}

.history-end-fields span {
    font-size: .85rem
}

.done {
    color: #16734b;
    background: #e8f7ef;
    border-radius: 8px;
    padding: 10px
}

.applied-specials {
    background: #eef8f3;
    border-radius: 9px;
    margin: 16px 0;
    padding: 12px 16px
}

.applied-specials p {
    margin: 6px 0
}

.applied-specials ul {
    margin: 8px 0 0;
    padding-left: 22px
}

button {
    color: #fff;
    cursor: pointer;
    background: #0b7189;
    border: 0;
    border-radius: 9px;
    margin-top: 18px;
    padding: 13px 20px;
    font-size: 1rem;
    font-weight: 700
}

button:disabled {
    cursor: not-allowed;
    background: #aabac2
}

.secondary {
    background: #607482;
    margin-left: 8px
}

.print-button {
    background: #345f43;
    margin-left: 8px
}

.error {
    color: #b42318
}

.amount {
    color: #0b7189;
    margin: 16px 0;
    font-size: 2.6rem;
    font-weight: 800
}

.amount small {
    margin-left: 4px;
    font-size: 1rem
}

pre {
    color: #d5f3e5;
    background: #17232c;
    border-radius: 8px;
    padding: 12px;
    font-size: .75rem;
    overflow: auto
}

.print-report {
    display: none
}

@media (width<=600px) {
    main {
        padding: 12px
    }

    .base-year-month-fields,
    .base-date-fields {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto
    }

    .history {
        grid-template-columns: 1fr
    }

    .history b {
        margin-top: 8px
    }

    header {
        padding: 22px
    }

    h1 {
        font-size: 1.6rem
    }

    button {
        width: 100%
    }

    .secondary,
    .print-button {
        margin-left: 0
    }
}

@media print {
    @page {
        size: A4;
        margin: 18mm
    }

    :root {
        color: #111;
        background: #fff
    }

    body {
        background: #fff
    }

    main {
        max-width: none;
        margin: 0;
        padding: 0
    }

    main>header,
    main>.notice,
    .screen-result,
    .result-actions,
    .debug-output {
        display: none !important
    }

    .card.result {
        box-shadow: none;
        border-radius: 0;
        padding: 0
    }

    .print-report {
        font-family: Yu Gothic, Meiryo, sans-serif;
        font-size: 11pt;
        display: block !important
    }

    .print-report h2 {
        text-align: center;
        border: 0;
        margin: 0 0 10mm;
        font-size: 18pt
    }

    .print-report dl {
        margin: 0
    }

    .print-report dl>div {
        border-bottom: 1px solid #ddd;
        grid-template-columns: 48mm 1fr;
        padding: 2.4mm 0;
        display: grid
    }

    .print-report dt {
        font-weight: 700
    }

    .print-report dd {
        margin: 0
    }

    .print-report hr {
        border: 0;
        border-top: 1px solid #555;
        margin: 7mm 0
    }

    .print-report p {
        margin-top: 8mm
    }
}