/* 數學學習單共用樣式（口算、四則、概數、單位、因數倍數、分數、時鐘、錢幣、位值數線、幾何）
 * 紙張一律用 mm，畫面預覽與列印同一套數字（排版見 sheet-app.js 的 PAGE／GAP）。
 * 線條、圖形都用 border 或 SVG：Chrome 列印預設不印背景色。
 */

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

/* 設定面板 */
.ms-panel { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
@media (max-width: 991.98px) { .ms-panel { position: static; max-height: none; } }
.ms-grade { font-size: 12px; font-weight: 700; color: var(--zg-muted, #7a6f63); margin: 10px 0 2px; letter-spacing: .05em; }
.ms-grade:first-child { margin-top: 0; }
.ms-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; }
.ms-preset:hover { background: #f6f1e9; }
.ms-preset input { margin-top: 3px; flex: none; }
.ms-code { font-size: 11px; color: var(--zg-muted, #7a6f63); white-space: nowrap; }
.ms-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.ms-multi label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ms-count-box { width: 120px; flex: none; }
.ms-count-hint { line-height: 1.6; }
.ms-count-hint .btn { padding: 0 8px; margin: 2px 4px 0 0; font-size: 12px; }

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

/* 預覽紙張 */
.ms-pages { background: #ece6dc; border-radius: 16px; padding: 16px; overflow-x: auto; }
.ms-empty { background: #fff; border-radius: 12px; padding: 40px 16px; text-align: center; color: var(--zg-muted, #7a6f63); }
.ms-page {
    zoom: var(--ms-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;
}
.ms-page:last-child { margin-bottom: 0; }
.ms-head { flex: none; height: 16mm; margin-bottom: 4mm; box-sizing: border-box; border-bottom: .3mm solid #333; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 1.5mm; }
.ms-title { margin: 0; font-size: 6mm; line-height: 8mm; font-weight: 700; text-align: center; }
.ms-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; }
.ms-fields { display: flex; justify-content: flex-end; gap: 6mm; font-size: 3.6mm; line-height: 5mm; }
.ms-instr { margin-right: auto; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 頁首左邊的說明（學齡前工具） */
.ms-fields i { display: inline-block; width: 24mm; border-bottom: .25mm solid #333; }
.ms-fields .ms-f1 { width: 12mm; }
.ms-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ms-foot { flex: none; height: 6mm; line-height: 6mm; text-align: center; font-size: 3mm; color: #666; }
.ms-row { display: grid; column-gap: 5mm; align-items: start; flex: none; }
.ms-cell { min-width: 0; }

/* 共用題目元件 */
.ms-no { font-weight: 700; margin-right: 1mm; }
.ms-blank { display: inline-block; min-width: 14mm; border-bottom: .25mm solid #333; vertical-align: -.8mm; text-align: center; }
.ms-ans { color: #c8102e; font-weight: 700; }
/* 括號畫在框的兩側外面：min-width 就是括號裡可以寫字的寬度（各工具估寬度時另外加兩個括號 2F）
 * 括號用負 margin 凸出框外、框本身留 1em 外距給括號；答案在兩個括號中間置中 */
.ms-paren { display: inline-flex; justify-content: space-between; align-items: baseline; min-width: 14mm; margin: 0 1em; }
.ms-paren::before { content: '（'; width: 1em; margin-left: -1em; flex: none; color: #111; font-weight: 400; }
.ms-paren::after { content: '）'; width: 1em; margin-right: -1em; flex: none; color: #111; font-weight: 400; }
.ms-muted { color: #555; }

/* 分數：分子分母上下疊（橫線用 border，列印才看得到） */
.ms-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.1; margin: 0 .6mm; }
.ms-frac .ms-fn { border-bottom: .3mm solid currentColor; padding: 0 .8mm .2mm; min-width: 3mm; text-align: center; }
.ms-frac .ms-fd { padding: .2mm .8mm 0; min-width: 3mm; text-align: center; }
.ms-mixed { display: inline-flex; align-items: center; vertical-align: middle; }
.ms-mixed > .ms-frac { margin-left: .3mm; }
.ms-fbox { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .8mm; }
.ms-fbox i { display: block; width: 8mm; height: 5.5mm; border: .25mm solid #555; border-radius: .6mm; font-style: normal; text-align: center; line-height: 5.5mm; }
.ms-fbox i + i { margin-top: 1.2mm; position: relative; }
.ms-fbox i + i::before { content: ''; position: absolute; left: -1mm; right: -1mm; top: -.9mm; border-top: .3mm solid #111; }

/* ===== 列印：只印紙張 ===== */
@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(.ms-root) { display: none !important; }
    .ms-root > *:not(.ms-layout), .ms-layout > .ms-panel, .ms-preview > *:not(.ms-pages) { display: none !important; }
    .ms-root, .ms-layout, .ms-preview { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .ms-pages { background: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
    .ms-empty { display: none !important; }
    /* 276mm：剛好等於 A4 可印高度 277mm 時，瀏覽器多出的零點幾 mm 會多印一張空白頁 */
    .ms-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; }
    .ms-page:last-child { break-after: auto; page-break-after: auto; }
}

/* ===== 口算 ===== */
.mt-m { white-space: nowrap; font-family: "Noto Sans TC", Arial, sans-serif; }
.mt-bl { display: inline-block; text-align: center; border-bottom: .25mm solid #333; line-height: 1.25; margin: 0 .6mm; vertical-align: baseline; }

/* ===== 九九乘法表（tools/times.js）===== */
/* 依段排列：一段一塊，一列四段 */
.mt-tt-segs { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; font-family: "Noto Sans TC", Arial, sans-serif; }
.mt-tt-seg { box-sizing: border-box; border: .3mm solid #555; border-radius: 2mm; padding: 1.5mm 2.5mm; }
.mt-tt-segh { font-weight: 700; text-align: center; border-bottom: .25mm solid #999; margin-bottom: .3mm; box-sizing: border-box; }
.mt-tt-line { display: grid; grid-template-columns: 1.1em 1.3em 1.1em 1.5em auto; align-items: baseline; white-space: nowrap; }
.mt-tt-line > span { text-align: center; }
.mt-tt-line > .mt-tt-v { text-align: left; font-weight: 700; }
.mt-tt-bl { min-width: 10mm; justify-self: start; }
/* 縱橫表：表頭加粗、淡底色（列印時保留底色） */
.mt-tt-gridwrap { display: flex; justify-content: center; }
.mt-tt-grid { border-collapse: collapse; font-family: "Noto Sans TC", Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mt-tt-grid th, .mt-tt-grid td { width: 12mm; height: 12mm; box-sizing: border-box; border: .3mm solid #444; padding: 0; text-align: center; vertical-align: middle; line-height: 1; }
.mt-tt-grid th { font-weight: 700; background: #f3ede2; }
.mt-tt-grid .mt-tt-corner { font-weight: 400; color: #555; }

/* ===== 四則混合運算：題目一行、下面每步一行 ===== */
.mt-x { white-space: nowrap; }
.mt-x-line { padding-left: 7mm; }
.mt-x-blank { display: inline-block; width: 55mm; border-bottom: .25mm solid #999; vertical-align: -.8mm; }
.mt-x-step { color: #c8102e; }

/* ===== 概數 ===== */
.mt-r { white-space: nowrap; }
.mt-r-indent { display: inline-block; width: 7mm; }

/* ===== 單位換算 ===== */
.mt-u { white-space: nowrap; }

/* ===== 因數與倍數：短除法（除數在左，數字左邊與下方畫 L 形線） ===== */
.mt-f { white-space: nowrap; }
.mt-f-pad { display: inline-block; width: 7mm; }   /* 第二行起的縮排（行內空白） */
.mt-f-indent { padding-left: 7mm; }                 /* 短除法下方「最大公因數：」「最小公倍數：」各自一行 */
.mt-sd-wrap { padding-left: 9mm; }
.mt-sd { border-collapse: collapse; }
.mt-sd td { height: var(--sdrow, 7.2mm); line-height: 1; padding: 0 1.5mm; box-sizing: border-box; text-align: center; font-family: Arial, "Noto Sans TC", sans-serif; }
.mt-sd .sd-div { width: 8mm; text-align: right; padding-right: 1.2mm; }
.mt-sd .sd-n { min-width: 13mm; border-bottom: .3mm solid #222; }
.mt-sd .sd-n.sd-first { border-left: .3mm solid #222; }
.mt-sd .sd-last { min-width: 13mm; }
.mt-sd tr.sd-pad td { border: 0; }   /* 補足固定列數的空白列不畫線（題目卷不透露要除幾次） */

/* ===== 分數 ===== */
.mt-q { display: flex; align-items: center; gap: 1mm; white-space: nowrap; height: 13mm; }
.mt-q.is-shade { height: auto; }   /* 塗色題的圓形 21mm 比一行高，高度由圖決定（fraction.js 的 size 另外算） */
.mt-q-line { display: inline-flex; align-items: center; }
.mt-q-blank { min-width: 16mm; margin-left: 1mm; }
.mt-q-line > .ms-ans { margin-left: 1mm; }   /* flex 會吃掉「＝」後面的空白，答案另外空一點 */
.mt-q-op { margin: 0 1mm; }   /* 運算子與＝：flex 會吃掉空白，用 margin 固定間距 */
.ms-frac .ms-fn, .ms-frac .ms-fd { font-variant-numeric: tabular-nums; }
.mt-q-circle { display: inline-block; width: 7mm; height: 7mm; border: .3mm solid #222; border-radius: 50%; text-align: center; line-height: 6.4mm; margin: 0 1mm; vertical-align: middle; box-sizing: border-box; }   /* 空的圓圈也要和文字置中對齊 */
.mt-q-hole { display: inline-block; width: 6mm; height: 4.6mm; border: .25mm solid #555; border-radius: .6mm; vertical-align: middle; font-style: normal; }
.mt-q-shade { display: flex; align-items: center; gap: 4mm; }
.mt-q-svg { display: block; overflow: visible; }

/* ===== 時鐘 ===== */
.mt-c { display: flex; align-items: flex-start; gap: 1mm; white-space: nowrap; }
.mt-c-col { display: flex; flex-direction: column; align-items: center; gap: 1.5mm; }
.mt-c-col.is-left { align-items: flex-start; }
.mt-c-row { display: flex; align-items: center; gap: 3mm; line-height: 2; }
.mt-c-arrow { font-size: 5mm; color: #555; }
.mt-c-text { line-height: 9mm; }
.mt-c-svg { display: block; flex: none; }

/* ===== 錢幣 ===== */
.mt-m2 { white-space: nowrap; line-height: 7mm; }
.mt-m2-row { display: flex; align-items: center; gap: 1.2mm; flex-wrap: nowrap; margin: .6mm 0 .9mm 7mm; }
.mt-m2-row svg { display: block; flex: none; }
.mt-m2-sum { padding-left: 7mm; line-height: 8mm; }
.mt-m2-least { display: flex; flex-wrap: wrap; gap: 1mm 5mm; padding-left: 7mm; line-height: 7mm; }

/* ===== 位值與數線 ===== */
.mt-p { white-space: nowrap; }
.mt-p-line { padding-left: 7mm; line-height: 0; }
.mt-p-svg { display: block; }
.mt-p-ans { padding-left: 7mm; line-height: 8mm; }

/* ===== 幾何 ===== */
.mt-g { white-space: nowrap; line-height: 6.5mm; }
.mt-g-body { display: flex; flex-direction: column; align-items: flex-start; padding-left: 4mm; }
.mt-g-svg { display: block; flex: none; overflow: visible; }
.mt-g-q { line-height: 8.5mm; }

/* ===== 數學考卷（exam-app.js）===== */
/* 設定面板的大題卡片 */
.me-templates { display: flex; flex-wrap: wrap; gap: 4px; }
.me-total { font-weight: 700; font-size: 14px; }
.me-card { border: 1px solid #e3dccf; border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fff; }
.me-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.me-card-no { font-weight: 700; flex: none; }
.me-card .me-presets { max-height: 200px; overflow-y: auto; margin: 6px 0; padding: 0 4px 0 8px; }
.me-card .me-opts:empty { display: none; }
.me-nums { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; }
.me-nums label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.me-nums input { width: 64px; }
.me-warn { color: #b45309; margin-top: 4px; }

/* 考卷頁首：第一頁 26mm＋4mm 間距（與 exam-app.js 的 PAGE.head1 一致） */
.me-head { flex: none; height: 26mm; margin-bottom: 4mm; box-sizing: border-box; border-bottom: .3mm solid #333; padding-bottom: 2mm; display: flex; gap: 4mm; }
.me-head-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.me-school { font-size: 4mm; line-height: 5.5mm; text-align: center; }
.me-title { margin: 0; font-size: 6mm; line-height: 8mm; font-weight: 700; text-align: center; }
.me-fields { display: flex; gap: 6mm; font-size: 3.8mm; line-height: 6mm; white-space: nowrap; }
.me-fields i { display: inline-block; width: 16mm; border-bottom: .25mm solid #333; }
.me-fields .me-f-l { width: 34mm; }
.me-boxes { flex: none; display: flex; gap: 2mm; }
.me-box { position: relative; width: 24mm; height: 100%; box-sizing: border-box; border: .35mm solid #333; border-radius: 1mm; }
.me-box span { position: absolute; left: 1.5mm; top: .8mm; font-size: 3.2mm; line-height: 4mm; }
.me-head.is-ans .me-fields, .me-head.is-ans .me-boxes { visibility: hidden; }   /* 答案卷不要作答欄，但位置保留，題目位置才和題目卷一樣 */
/* 第二頁以後：一行小標題 7mm＋2mm 間距（PAGE.head） */
.me-head2 { flex: none; height: 7mm; margin-bottom: 2mm; box-sizing: border-box; border-bottom: .25mm solid #999; font-size: 3.4mm; line-height: 6.5mm; color: #555; text-align: center; }
/* 大題標題：「一、直式計算（每題 5 分，共 30 分）」 */
.me-sec { flex: none; display: flex; align-items: flex-end; gap: 1mm; box-sizing: border-box; padding-bottom: 1mm; font-size: 4.4mm; line-height: 6mm; font-weight: 700; white-space: nowrap; overflow: hidden; }
.me-sec-pts { font-size: 3.8mm; font-weight: 400; }