/* 直式計算練習產生器
 * 紙張尺寸一律用 mm，畫面預覽與列印同一套數字（排版計算見 vertical-app.js 的 PAGE / BOX）。
 * 格線、橫線、小數點、除號都用 border 或 SVG 畫：Chrome 列印預設不印背景色，用背景畫的會消失。
 */

.mv-root { max-width: 1360px; margin: 0 auto; }
.mv-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .mv-layout { grid-template-columns: minmax(0, 1fr); } }

/* 設定面板 */
.mv-panel { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
@media (max-width: 991.98px) { .mv-panel { position: static; max-height: none; } }
.mv-grade { font-size: 12px; font-weight: 700; color: var(--zg-muted, #7a6f63); margin: 10px 0 2px; letter-spacing: .05em; }
.mv-grade:first-child { margin-top: 0; }
.mv-preset { display: flex; align-items: flex-start; gap: 8px; padding: 5px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; font-size: 14px; line-height: 1.35; }
.mv-preset:hover { background: #f6f1e9; }
.mv-preset input { margin-top: 3px; flex: none; }
.mv-code { font-size: 11px; color: var(--zg-muted, #7a6f63); white-space: nowrap; }

/* 題數 */
.mv-count-box { width: 120px; flex: none; }
.mv-count-hint { line-height: 1.6; }
.mv-count-hint .btn { padding: 0 8px; margin: 2px 4px 0 0; font-size: 12px; }

/* 工具列 */
.mv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.mv-info { color: var(--zg-muted, #7a6f63); font-size: 13px; }
.mv-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.mv-share-url { width: auto; flex: 1 1 260px; min-width: 200px; }

/* 預覽紙張 */
.mv-pages { background: #ece6dc; border-radius: 16px; padding: 16px; overflow-x: auto; }
.mv-empty { background: #fff; border-radius: 12px; padding: 40px 16px; text-align: center; color: var(--zg-muted, #7a6f63); }
.mv-page {
    zoom: var(--mv-zoom, 1);
    width: 210mm; height: 297mm; padding: 10mm; box-sizing: border-box;
    margin: 0 auto 16px; background: #fff; color: #111;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    display: flex; flex-direction: column;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
.mv-page:last-child { margin-bottom: 0; }

/* 頁首 20mm（16mm＋4mm 間距）、頁尾 6mm；高度或間距改了要同步改 vertical-app.js 的 PAGE.head */
/* 姓名那排下面不畫橫線：欄位本身已經有底線，多一條反而和第一題擠在一起 */
.mv-head { flex: none; height: 16mm; margin-bottom: 4mm; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 1.5mm; }
.mv-title { margin: 0; font-size: 6mm; line-height: 8mm; font-weight: 700; text-align: center; }
.mv-anstag { display: inline-block; margin-left: 3mm; padding: 0 2.5mm; border: .35mm solid #c8102e; border-radius: 1.5mm; color: #c8102e; font-size: 4mm; line-height: 6mm; vertical-align: .6mm; }
.mv-fields { display: flex; justify-content: flex-end; gap: 7mm; font-size: 3.6mm; line-height: 5mm; }
.mv-fields i { display: inline-block; width: 26mm; border-bottom: .25mm solid #333; }
.mv-fields span:nth-child(2) i { width: 14mm; }
.mv-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4mm; }
.mv-foot { flex: none; height: 6mm; line-height: 6mm; text-align: center; font-size: 3mm; color: #666; }

/* 一列題目：欄寬平均，題目靠左上 */
.mv-row { display: grid; column-gap: 5mm; align-items: start; flex: none; }
/* 題目方框與直式方格（格線、小數點、劃掉、除號）的樣式在 vertical-grid.css，數學考卷共用 */

/* ===== 列印：只印紙張 ===== */
@media print {
    @page { size: A4 portrait; margin: 10mm; }

    html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    body > *:not(main) { display: none !important; }
    main > *:not(.mv-root) { display: none !important; }
    .mv-root > *:not(.mv-layout),
    .mv-layout > .mv-panel,
    .mv-preview > *:not(.mv-pages) { display: none !important; }

    .mv-root, .mv-layout, .mv-preview {
        display: block !important; width: auto !important; max-width: none !important;
        margin: 0 !important; padding: 0 !important;
    }
    .mv-pages { background: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
    .mv-empty { display: none !important; }   /* 還沒勾題型時，Ctrl+P 不要印出提示文字 */
    /* 高度 276mm（A4 扣邊界是 277mm）：剛好等於可印高度時，瀏覽器多出的零點幾 mm 會多印一張空白頁 */
    .mv-page {
        zoom: 1 !important; width: 190mm !important; height: 276mm !important;
        padding: 0 !important; margin: 0 !important; box-shadow: none !important;
        break-after: page; page-break-after: always;
    }
    .mv-page:last-child { break-after: auto; page-break-after: auto; }
}