.grade-sheet {
    --gs-ink: #111;
    --gs-red: #c53030;
    display: grid;
    grid-template-columns: auto 220px;
    border: 2px solid #111;
    background: #fff;
    color: #111;
    font-family: "DFKai-SB", "KaiTi", "TW-Kai", "Microsoft JhengHei", serif;
    font-size: 12px;
    line-height: 1.2;
    width: max-content;
}

.gs-main {
    min-width: 0;
    padding: 8px 8px 10px;
    border-right: 2px solid #111;
}

.gs-head {
    display: grid;
    grid-template-columns: 140px 1fr 150px;
    align-items: end;
    gap: 8px;
    margin-bottom: 6px;
}
.gs-class { font-size: 13px; text-align: left; }
.gs-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.35;
}
.gs-exam { text-align: right; font-size: 13px; }

.gs-main table {
    border-collapse: collapse;
    width: 100%;
}
.gs-main th,
.gs-main td {
    border: 1px solid #111;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    font-weight: 400;
}
.gs-main th {
    font-weight: 700;
    height: 52px;
    vertical-align: middle;
    white-space: normal;
}
.gs-main .gs-times {
    display: block;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0;
}
.gs-main td.name { letter-spacing: 0.12em; }
.gs-main .is-fail { color: #111; }
.gs-stat td { font-weight: 700; }
.gs-dynamics {
    margin-top: 8px;
    text-align: left;
    font-size: 12px;
    line-height: 1.45;
}
.gs-dynamics-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.gs-dynamics-body {
    white-space: normal;
}
.gs-dynamics a {
    color: #1c3554;
    text-decoration: underline;
}
.gs-news-img {
    max-width: min(100%, 360px);
    max-height: 140px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.gs-side {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.gs-period {
    padding: 8px;
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid #111;
}
.gs-box {
    padding: 8px;
    border-bottom: 1px solid #111;
}
.gs-box h3 {
    margin: 0 0 8px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.2em;
}
.gs-news {
    min-height: 120px;
    white-space: pre-wrap;
    line-height: 1.45;
}
.gs-grow { flex: 1; display: flex; flex-direction: column; }
.gs-blank { flex: 1; min-height: 80px; }
.gs-sign {
    margin-top: 10px;
    text-align: right;
}
.gs-self {
    width: 100%;
    border-collapse: collapse;
    margin-top: auto;
}
.gs-self th,
.gs-self td {
    border: 1px solid #111;
    padding: 6px 8px;
    text-align: center;
}
.gs-self th { width: 72px; background: #f7f7f7; }
.gs-self tr:last-child th,
.gs-self tr:last-child td { height: 150px; vertical-align: top; }

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }
    @page {
        @top-left { content: none; }
        @top-center { content: none; }
        @top-right { content: none; }
        @bottom-left { content: none; }
        @bottom-center { content: none; }
        @bottom-right { content: none; }
    }
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 6mm 5mm 7mm 5mm !important;
    }
    .grade-sheet {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        grid-template-columns: minmax(0, 1fr) 48mm;
        font-size: 11px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .gs-head {
        grid-template-columns: 1fr 2.2fr 1fr;
        gap: 4px;
    }
    .gs-title { font-size: 14px; }
    .gs-main th,
    .gs-main td {
        padding: 2px 2px;
        font-size: 10px;
    }
    .gs-main th { height: auto; min-height: 36px; }
    .gs-news { min-height: 22mm; }
    .gs-self tr:last-child th,
    .gs-self tr:last-child td { height: 28mm; }
}

@media screen and (max-width: 900px) {
    .grade-sheet {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .gs-main { border-right: 0; border-bottom: 2px solid #111; }
    .gs-head { grid-template-columns: 1fr; text-align: center; }
    .gs-class, .gs-exam { text-align: center; }
}