/**
 * 漢字練習シート（印刷用）レイアウト
 * 参照: _reference/kanji/practice/sheet.php に合わせたスタイル
 */

/* シート表示時は固定ヘッダー・メニュー・パンくずを非表示 */
body.kanji-sheet header {
    display: none !important;
}
body.kanji-sheet .container:has(.breadcrumb-nav) {
    display: none !important;
}

/* シート表示時は .container.main の幅制限を外す */
body.kanji-sheet .container.main {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.kanji-sheet-page {
    margin: 20px auto 0;
}

/* 漢字練習シート（小学○年生）の下のスペース */
body.kanji-sheet .print-header {
    margin-bottom: 35px;
}

.kanji-container {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    margin: 20px auto 0 auto;
    justify-content: right;
    flex-wrap: wrap;
    width: 1400px;
    padding-right: 3px;
}

/* 1列目=情報・2列目=緑マス+青マスにし、情報の高さで青マスが下がらないようにする */
.kanji-container .kanji {
    width: 240px;
    margin-left: 20px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 100px 120px;
    grid-template-rows: 120px auto;
    gap: 30px 10px;
}
.kanji-container .kanji .sample-block {
    grid-column: 2;
    grid-row: 1;
}
.kanji-container .kanji .info {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    display: flex;
    flex-direction: row-reverse;
    font-size: 14px;
    width: 100px;
    flex-wrap: wrap;
}
.kanji-container .kanji .practice {
    grid-column: 2;
    grid-row: 2;
}

/* 四角の幅・高さ 120px */
.kanji-container .kanji .sample-block,
.kanji-container .kanji .sample-block img,
.kanji-container .kanji .block {
    width: 120px;
    height: 120px;
    clear: both;
    box-sizing: border-box;
}

.kanji-container .kanji .sample-block {
    border: 2px solid #8dc41d;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 90px;
    line-height: 90px;
    font-optical-sizing: auto;
    font-family: "Noto Serif JP", "Sawarabi Mincho", "ヒラギノ明朝 ProN W6", "MS PMincho", serif;
}

.kanji-container .kanji .sample-block .moji {
    position: relative;
    padding-bottom: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kanji-container .kanji .sample-block .moji img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kanji-container .kanji .info .kuausu,
.kanji-container .kanji .info .on-yomi,
.kanji-container .kanji .info .kun-yomi,
.kanji-container .kanji .info .bushu {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 1.2em;
    height: auto;
    min-height: 60px;
    overflow: visible;
}

.kanji-container .kanji .info .kuausu .number {
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
}

.kanji-container .kanji .info .label {
    color: #666;
    margin-inline-end: 4px;
}

.kanji-container .kanji .block {
    float: right;
    font-size: 90px;
    line-height: 90px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-optical-sizing: auto;
    font-family: "Noto Serif JP", "Sawarabi Mincho", "MS PMincho", serif;
}

.kanji-container .kanji .practice .block {
    position: relative;
    border: 2px solid #0C79C0;
    margin-bottom: 30px;
}

/* 四角の中央に十字の点線（縦線・横線を中央位置で描画） */
.kanji-container .kanji .practice .block::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed #A9E1F9;
    box-sizing: border-box;
}
.kanji-container .kanji .practice .block::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed #A9E1F9;
    box-sizing: border-box;
}

.kanji-container .kanji .practice .block.transparent-1 .moji {
    opacity: 0.3;
    position: relative;
    top: -8px;
}

.kanji-container .kanji .practice .block.transparent-2 .moji {
    opacity: 0.1;
    position: relative;
    top: -8px;
}

.page-break {
    page-break-before: always;
    width: 100%;
}

.print-button-background {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 1000;
}

.print-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 1001;
}

/* 印刷時：漢字シートでは print.css を読まないので、ここだけで @page 横・1ページに5字を保証する */
@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    /* print.css の代わり（ヘッダー非表示・印刷用表示） */
    body,
    body.kanji-sheet .container.main {
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    header,
    nav,
    .breadcrumb-nav,
    h1,
    .print-button,
    .footer,
    .container-fluid.footer,
    .print-button-background,
    .print-button {
        display: none !important;
    }
    .print-header,
    .print-footer {
        display: block !important;
    }

    body.kanji-sheet .print-header {
        margin-bottom: 35px !important;
    }
    body.kanji-sheet .print-header .logo img {
        width: 100px !important;
        height: auto !important;
    }
    body.kanji-sheet .print-header .title {
        font-size: 11pt !important;
    }
    body.kanji-sheet .print-header .fill-field .line-date {
        min-width: 26mm;
    }
    body.kanji-sheet .print-header .fill-field .line-name {
        min-width: 36mm;
    }

    body.kanji-sheet .container.main {
        max-width: none !important;
        width: 273mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .kanji-sheet-page {
        margin: 0;
        padding: 0;
        break-inside: avoid;
        page-break-inside: avoid;
        width: 100%;
    }

    .kanji-sheet-page .print-footer {
        margin-top: 1mm !important;
    }

    .kanji-sheet-page:first-of-type {
        margin-top: 0;
    }

    .page-break {
        break-before: page;
        page-break-before: always;
        height: 0;
        overflow: hidden;
    }

    /* 列幅を限界まで広げる（A4横 余白除く 277mm。48mm×5 + gap 2mm×4 + margin 1mm×5 = 253mm） */
    .kanji-container {
        width: 253mm !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 2mm !important;
        gap: 2mm !important;
        flex-wrap: nowrap !important;
    }

    /* 情報ブロックと緑・青マスをグリッドで分離。四角20mm、緑・青・青の間3mm */
    .kanji-container .kanji {
        width: 48mm !important;
        margin-left: 1mm !important;
        flex-shrink: 0 !important;
        display: grid !important;
        grid-template-columns: 26mm 20mm !important;
        grid-template-rows: 20mm auto !important;
        gap: 3mm 2mm !important;
    }
    .kanji-container .kanji .sample-block {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .kanji-container .kanji .info {
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
        align-self: start !important;
    }
    .kanji-container .kanji .practice {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    /* 四角の幅・高さ 20mm */
    .kanji-container .kanji .sample-block,
    .kanji-container .kanji .sample-block img,
    .kanji-container .kanji .practice .block {
        width: 20mm !important;
        height: 20mm !important;
    }

    .kanji-container .kanji .sample-block {
        font-size: 14pt !important;
        line-height: 1 !important;
    }

    .kanji-container .kanji .sample-block .moji img {
        width: 85% !important;
        height: 85% !important;
        object-fit: contain !important;
    }

    .kanji-container .kanji .info {
        width: 26mm !important;
        font-size: 6.5pt !important;
    }

    /* 情報ブロック：縦書きのため height/width の論理プロパティで指定 */
    .kanji-container .kanji .info .kuausu,
    .kanji-container .kanji .info .on-yomi,
    .kanji-container .kanji .info .kun-yomi,
    .kanji-container .kanji .info .bushu {
        max-inline-size: 100mm !important;
        max-block-size: 8mm !important;
        overflow: visible !important;
    }

    .kanji-container .kanji .block {
        font-size: 14pt !important;
        line-height: 1 !important;
    }

    /* 練習マス内のグレー文字を印刷で 35pt、上下中央に配置。四角間の縦スペース 30px≒8mm */
    .kanji-container .kanji .practice .block {
        margin-bottom: 3mm !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .kanji-container .kanji .practice .block .moji {
        font-size: 35pt !important;
        position: relative !important;
        top: 0 !important;
    }

    /* 四角の中央に十字の点線（印刷時も中央位置で描画） */
    .kanji-container .kanji .practice .block::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 0 !important;
        border-left: 1px dashed rgba(0, 0, 0, 0.25) !important;
        box-sizing: border-box !important;
    }
    .kanji-container .kanji .practice .block::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        height: 0 !important;
        border-top: 1px dashed rgba(0, 0, 0, 0.25) !important;
        box-sizing: border-box !important;
    }
}