#printPdf .areaFooter,
#printPdf .areaButtonback
{
    display: flex;
    flex-wrap: wrap;
    background-color: white;
}
#printPdf .areaBottom{
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: white;
    padding: 6px 28px 2px 28px;
}

#printPdf .areaBottom > span:first-child{
    color: red;
    font-size: 13.5px;
}
#printPdf .areaFooter {
    font-size: 15.5px;
    padding-top: 12px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
#printPdf .areaBottom .contentSpan:nth-of-type(1) {
    padding-bottom: 5px; 
}
#printPdf .contentSpan {
    line-height: 1.16 !important;
}

/* ============================================================================
 * QR banner (.areaQrCode): sits BETWEEN the note (.areaBottom) and copyright (.areaFooter).
 * Right-aligned, keeps the original image size (322×82). Shown for the window (item) +
 * mirai_eco flows.
 * Page-break: see the @media print at the end of the block (window pushes the whole block to the next page if
 * there isn't room, the note stays on the previous page; mirai_eco also adds a repeated header via applyMiraiEcoPageBreaks).
 * ========================================================================== */
#printPdf .areaQrCode {
    display: none; /* hidden by default (e.g. water flow) */
    padding: 8px 28px 6px 28px; /* 28px horizontal margin = matches .areaBottom */
    text-align: right; /* QR right-aligned (image's right edge = note's right edge); text-align is safe on all old browsers */
    background-color: white;
}

#printPdf.pdf_window .areaQrCode,
#printPdf.pdf_mirai_eco .areaQrCode {
    display: block;
}

#printPdf .areaQrCode a {
    display: inline-block;
}

/* The QR source image switched to a larger 579×149 version (prints sharper) but ALWAYS displays exactly 322px wide
   in the PDF. width:322px is fixed (beats #wrapper img{height:auto} on specificity), height:auto
   keeps the ratio → ~82.9px tall. Swapping in another source image just needs the same ratio to avoid a height mismatch. */
#printPdf .areaQrCode img {
    width: 322px;
    height: auto;
}

@media print {
    /* window + mirai_eco: do NOT split the QR. If there's no room at the end of the page → push the whole block
       to the next page (the note .areaBottom stays on the previous page). */
    #printPdf.pdf_window .areaQrCode,
    #printPdf.pdf_mirai_eco .areaQrCode {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* mirai_eco: keep the copyright (.areaFooter) on the SAME page as the QR so it never breaks onto a lone,
       header-less page (Safari). Reinforces applyMiraiEcoPageBreaks, which folds the copyright height into the
       QR's break decision so the QR + copyright + repeated header always move to the next page together. */
    #printPdf.pdf_mirai_eco .areaFooter {
        break-before: avoid;
        page-break-before: avoid;
    }

    /* window flow: same protection — keep the copyright on the QR's page so it never breaks onto a lone,
       header-less page. Pairs with applyWindowQrPageBreak now measuring to the copyright's bottom. */
    #printPdf.pdf_window .areaFooter {
        break-before: avoid;
        page-break-before: avoid;
    }
}

/* ============================================================================
 * PDF みらいエコ override (applies ONLY when exporting the mirai_eco PDF, does not affect
 * screen & does not affect other options). Fill in values here.
 * ========================================================================== */
#printPdf.pdf_mirai_eco .areaBottom {
}