/* 九九乘法表專用樣式；共用元件沿用 site.css */
#mt [hidden] { display: none !important; }
.mt-tabs { grid-template-columns: repeat(3, 1fr); }
.mt-range { margin: 0; }
.mt-eq { text-align: center; background: #eff4ff; border: 2px solid var(--brand); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; min-height: 4.4rem; }
.mt-eq strong { display: block; font-size: 1.7rem; line-height: 1.4; color: var(--brand-dark); }
.mt-eq span { display: block; min-height: 1.6em; font-size: 1.05rem; }

.table-scroll { overflow-x: auto; }
.mt-grid { border-collapse: collapse; margin: 8px auto; }
.mt-grid th, .mt-grid td { border: 1px solid var(--line); padding: 0; text-align: center; }
.mt-grid th { background: var(--soft); min-width: 36px; height: 36px; font-size: 1rem; }
.mt-grid td button { display: block; width: 100%; min-width: 36px; height: 36px; padding: 0; border: 0; background: #fff; font: inherit; font-size: 1rem; cursor: pointer; color: var(--fg); }
.mt-grid td.hl button { background: #eff4ff; }
.mt-grid td button.on { background: var(--brand); color: #fff; font-weight: 700; }
.mt-grid td button:hover { background: #dbe7ff; }
.mt-grid td button.on:hover { background: var(--brand); }
.mt-grid td button:focus-visible { outline: 3px solid var(--warn); outline-offset: -3px; }
.mt-n12 th, .mt-n12 td button { min-width: 30px; height: 32px; font-size: .95rem; }
.mt-n19 th, .mt-n19 td button { min-width: 26px; height: 28px; font-size: .8rem; }
.mt-n19 th { font-size: .8rem; }
.mt-cover td button:not(.rev) { color: transparent; }
.mt-cover td button:not(.rev)::after { content: "?"; color: var(--muted); }
.mt-cover td button.on { color: #fff; }

.mt-prog { margin: 0 0 8px; color: var(--muted); text-align: center; }
.mt-q { text-align: center; font-size: 2.4rem; font-weight: 700; color: var(--brand-dark); margin: 10px 0; }
#mt-q-ans { font-size: 1.5rem; text-align: center; }
#mt-q-run .btn { width: 100%; margin-top: 8px; }

.mt-kou td:first-child { width: 4em; text-align: center; }

@media (max-width: 480px) {
  .mt-n9 th, .mt-n9 td button { min-width: 29px; }
  .mt-n12 th, .mt-n12 td button { min-width: 23px; font-size: .85rem; }
  .mt-eq strong { font-size: 1.45rem; }
  .mt-q { font-size: 2rem; }
}

/* 列印預覽：畫面上只在「列印」分頁顯示；實際列印時只印這一塊 */
.mt-print { display: none; }
.mt-show-print .mt-print { display: block; overflow-x: auto; border: 1px dashed var(--line); border-radius: 10px; padding: 12px; margin: 1rem 0; background: #fff; }
.mt-ph { text-align: center; font-size: 1.3rem; margin: 0 0 12px; }
.mt-ptable { border-collapse: collapse; margin: 0 auto; width: 100%; }
.mt-ptable th, .mt-ptable td { border: 1px solid #444; text-align: center; padding: 4px 2px; font-size: .95rem; }
.mt-ptable th { background: #e8ecf2; }
.mt-pn19 th, .mt-pn19 td { font-size: .7rem; padding: 2px 0; }
.mt-pn12 th, .mt-pn12 td { font-size: .85rem; }
.mt-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mt-pblock { border: 1px solid #999; border-radius: 6px; padding: 6px 10px; break-inside: avoid; font-size: .95rem; line-height: 1.6; }
.mt-pname { text-align: center; margin: 0 0 12px; }
.mt-psheet { columns: 2; column-gap: 24px; margin: 0; padding-left: 2em; font-size: 1.1rem; }
.mt-psheet li { padding: 5px 0; break-inside: avoid; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .site-header, .site-footer, .breadcrumb, main > *:not(#mt-print) { display: none !important; }
  body { font-size: 12pt; line-height: 1.5; background: #fff; }
  main.wrap { max-width: none; padding: 0; }
  #mt-print { display: block !important; overflow: visible; border: 0; padding: 0; margin: 0; }
  .mt-ph { font-size: 18pt; margin-bottom: 8mm; }
  .mt-ptable th, .mt-ptable td { font-size: 13pt; padding: 3mm 1mm; }
  .mt-pn12 th, .mt-pn12 td { font-size: 11pt; padding: 2.4mm 0; }
  .mt-pn19 th, .mt-pn19 td { font-size: 8.5pt; padding: 1.4mm 0; }
  .mt-ptable th { background: #e8ecf2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mt-plist { gap: 5mm; grid-template-columns: repeat(3, 1fr); }
  .mt-pl12 { grid-template-columns: repeat(4, 1fr); }
  .mt-pl19 { grid-template-columns: repeat(5, 1fr); gap: 3mm; }
  .mt-pblock { font-size: 12pt; line-height: 1.6; padding: 2mm 3mm; }
  .mt-pl12 .mt-pblock { font-size: 11pt; line-height: 1.5; }
  .mt-pl19 .mt-pblock { font-size: 8.5pt; line-height: 1.4; padding: 1.5mm 2mm; }
  .mt-psheet { font-size: 13pt; }
  .mt-psheet li { padding: 1.1mm 0; }
}