/* ===========================
   丸つけカメラ — ../style.css・../play.css の上に重ねる
   =========================== */
.mt-h { font-size: 1rem; margin-bottom: 0.4rem; }
.mt-file { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mt-file:focus-within, #file:focus-visible + .mt-file { outline: 4px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus); }
.mt-cam { position: relative; margin-top: 0.6rem; }
.mt-cam video { width: 100%; max-height: 70dvh; background: #000; border-radius: var(--radius); display: block; object-fit: contain; }
/* 四すみの目安（紙の印をここに合わせる） */
.mt-guide { position: absolute; inset: 8% 10% 22%; pointer-events: none; }
.mt-guide span { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.mt-guide span:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.mt-guide span:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.mt-guide span:nth-child(3) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.mt-guide span:nth-child(4) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.mt-cam-row { justify-content: center; align-items: center; margin-top: 0.5rem; }
.mt-canvas { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin: var(--sp-2) 0; }
.mt-note { margin: 0.4rem 0; }
.mt-q { display: inline-block; color: #fff; background: #b45309; border-radius: 50%; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center; font-weight: 700; font-size: 0.85em; }
.mt-list { list-style: none; padding: 0; margin: 0.4rem 0; display: grid; gap: 0.3rem; }
.mt-list li { display: flex; align-items: center; gap: 0.5rem; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.mt-list .mt-ex { flex: 1; }
.mt-list .mt-read { font-size: var(--fs-s); color: var(--muted); }
.mt-mark { min-width: 48px; min-height: 44px; font-size: var(--fs-l); font-weight: 700; border-radius: var(--radius); border: 2px solid #d0021b; background: transparent; color: #d0021b; cursor: pointer; font-family: inherit; }
.mt-list li.ng .mt-mark { border-style: dashed; }
.mt-ul { padding-left: 1.2em; }
.mt-ul li { margin: 0.25rem 0; }
@media (prefers-color-scheme: dark) {
  .mt-mark { color: #ff6b6b; border-color: #ff6b6b; }
}