/* 理科ラボ 確認問題の型（2026-10-18）。ページの枠は publication.css などを使う */
.qz-lead { max-width: 720px; color: #496373; line-height: 1.7; }
.qz-progress { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid #d8e3e7; border-radius: 14px; background: rgba(255,255,255,.96); font-weight: 800; }
.qz-progress[hidden] { display: none; }
.qz-dots { display: flex; gap: 6px; }
.qz-dots span { width: 14px; height: 14px; border-radius: 50%; background: #d8e3e7; }
.qz-dots .ok { background: #2e9d6a; } .qz-dots .ng { background: #e0894a; }

.qz-card { margin: 0 0 20px; padding: 20px; border: 1px solid #d8e3e7; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(29,63,78,.08); }
.qz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qz-no { font-weight: 900; color: #087c86; }
.qz-type { padding: 3px 9px; border-radius: 999px; background: #e9f8fa; color: #087c86; font-size: .78rem; font-weight: 800; }
.qz-q { margin: 0 0 14px; font-size: 1.08rem; font-weight: 800; line-height: 1.6; }

.qz-fig { margin: 0 0 14px; border: 1px solid #e3ecef; border-radius: 12px; background: #f7fbfc; overflow: hidden; }
.qz-fig > svg { display: block; width: 100%; height: auto; }
.qz-side:empty { display: none; }
.qz-side { padding: 0 10px 10px; }
.qz-side svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; background: #fff; border: 1px solid #dbe8eb; border-radius: 12px; }

.qz-choices { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz-choices button, .qz-tiles button { width: 100%; min-height: 48px; text-align: left; color: #173b52; background: #f3fbfc; border: 2px solid #c8e4e7; font-weight: 750; touch-action: manipulation; }
.qz-choices button:hover:not(:disabled), .qz-tiles button:hover:not(:disabled) { color: #173b52; background: #e9f8fa; border-color: #087c86; }
.qz-choices button:disabled { cursor: default; opacity: 1; }
.qz-choices .is-correct { border-color: #2e9d6a; background: #e8f7ef; }
.qz-choices .is-wrong { border-color: #e0894a; background: #fdf1e8; }
.qz-choices .is-correct::after { content: "  ✓ 正解"; color: #1f6b3a; }

/* JavaScript が動かないときは「答えと解説」を開いて読む（今までと同じ） */
.qz-reveal { margin-top: 14px; }
.qz-reveal > summary { min-height: 44px; padding: 10px 0; color: #087c86; font-weight: 800; cursor: pointer; }
.qz-js .qz-reveal > summary { display: none; }
.qz-js .qz-reveal:not([open]) { display: none; }
.qz-explain { padding: 14px 16px; border-radius: 12px; background: #f3f7f9; border-left: 5px solid #087c86; line-height: 1.7; }
.qz-explain p { margin: 0 0 6px; } .qz-explain p:last-child { margin: 0; }
.qz-explain ul { margin: 6px 0 0; padding-left: 1.2em; }
.qz-card[data-result="ok"] .qz-explain { background: #e8f7ef; border-left-color: #2e9d6a; }
.qz-card[data-result="ng"] .qz-explain { background: #fdf1e8; border-left-color: #e0894a; }
.qz-verdict { display: block; margin-bottom: 4px; font-weight: 900; }
.qz-replay { min-height: 38px; margin-top: 10px; padding: 6px 12px; border: 1px solid #087c86; color: #087c86; background: #fff; font-size: .88rem; }
.qz-replay:hover { color: #fff; }

.qz-think textarea { width: 100%; min-height: 84px; padding: 10px; border: 1px solid #b8ced3; border-radius: 10px; font: inherit; line-height: 1.6; }
.qz-note { margin: 6px 0 10px; color: #71848d; font-size: .8rem; }
.qz-self { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qz-self p { flex-basis: 100%; margin: 0; font-weight: 800; }
.qz-self button { flex: 1; min-width: 110px; }
.qz-self .b-ok { background: #2e9d6a; } .qz-self .b-mid { background: #b8862a; } .qz-self .b-ng { background: #d9783a; }
.qz-self button[aria-pressed="true"] { outline: 3px solid #173b52; outline-offset: 2px; }

.qz-order-items { margin: 0 0 6px; color: #496373; }
.qz-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-tiles button { width: auto; min-width: 58px; text-align: center; font-size: 1.05rem; }
.qz-tiles button:disabled { opacity: .35; }
.qz-slots { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 52px; margin: 12px 0; padding: 8px 10px; border: 2px dashed #c8e4e7; border-radius: 12px; font-weight: 900; font-size: 1.05rem; }
.qz-slots .ph { color: #8aa0a8; font-weight: 600; font-size: .9rem; }
.qz-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qz-row .ghost { border: 1px solid #087c86; color: #087c86; background: #fff; }
.qz-row .ghost:hover { color: #fff; }

.qz-result { scroll-margin-top: 72px; margin: 0 0 24px; padding: 22px; border: 2px solid #087c86; border-radius: 18px; background: #fff; }
.qz-result[hidden] { display: none; }
.qz-result h2 { margin: 0 0 8px; }
.qz-result ul { line-height: 1.8; }
@media (max-width: 760px) { .qz-card { padding: 16px; } }
@media print { .qz-progress, .qz-replay, .qz-row, .qz-self, .qz-think button { display: none !important; } .qz-reveal, .qz-js .qz-reveal:not([open]) { display: block; } }
.qz-card, .qz-result, .qz-progress { max-width: 760px; }