/* 出題（M1）の画面で、core の app.css に足りない分だけ。色と大きさは app.css の変数と rem を使う。 */

/* ───── 共通 ───── */
.qz-lead { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--c-sub); }
.qz-catch { margin: 0; }
.qz-notice--top { display: flex; align-items: flex-start; gap: 10px; }
.qz-notice--top p { margin: 0; }
.qz-notice--top .ic { margin-top: 3px; color: var(--c-theme-dark); }
.qz-row--start { justify-content: flex-start; flex-wrap: wrap; }
.qz-subpanel { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.qz-select { padding-right: 8px; }

/* チップの名前は、語の切れ目で折り返す（「地名・難読地／名」のような切れ方をさせない） */
.qz-chip > span { word-break: auto-phrase; }
/* 「準備中」の札がある（押せない）チップは、札と名前が重ならないよう上をあける（文字が大きいときに2行になるため） */
.qz-chip--tagged { padding-top: 12px; }

/* radio で作る2択（時間制限・結果の見せ方）。見た目は .qz-seg__btn と同じ */
.qz-seg--radio .qz-seg__btn { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; }
.qz-chipwrap input:focus-visible + .qz-seg__btn { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.qz-seg--timer { flex: none; width: 180px; max-width: 52%; }

/* 「前回の設定でスタート」など、フォームの送信ボタンで作るリンクカード */
.qz-cardform { margin: 0; }
.qz-linkcard--button { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.qz-linkcard__title { display: flex; align-items: center; gap: 6px; }
.qz-linkcard__title .ic { color: var(--c-theme-dark); }
.qz-linkcard--king { background: var(--c-king-bg); border-color: var(--c-king-line); color: #FFFFFF; }
.qz-linkcard--king:hover { color: #FFFFFF; border-color: var(--c-gold); }
.qz-linkcard--king .qz-linkcard__sub { color: var(--c-king-sub); }
.qz-linkcard--king .ic, .qz-linkcard--king .qz-linkcard__title .ic { color: var(--c-gold); }

/* ───── トップの出題条件 ───── */
.qz-topform { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.qz-switch--row {
  display: flex; width: 100%; min-height: 52px; padding: 6px 12px 6px 14px;
  border: 1.5px solid var(--c-line); border-radius: 12px; background: #FFFFFF;
}
.qz-switch--row[aria-pressed="true"] { border-color: var(--c-theme); background: var(--c-theme-pale); }
.qz-switch__text { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; color: var(--c-ink); text-align: left; }
.qz-switch__text .ic { color: var(--c-theme-dark); }
.qz-switch--row[aria-pressed="false"] .qz-switch__text .ic { visibility: hidden; }
.qz-available { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--c-sub); }
.qz-available.is-short, .qz-available.is-none { color: var(--c-warn); font-weight: 700; }

/* ───── はじめる前の画面 ───── */
.qz-startform { gap: 18px; }
.qz-progress--flat { padding: 0; border: none; border-radius: 0; }

/* ───── クイズ画面 ───── */
body.is-playing { overflow-x: hidden; }
.qz-main--play { padding-top: 0; gap: 16px; }
/* user_header(header=false) は <main> を先に開くので、クイズ中のヘッダーは main の中に置き、画面の幅いっぱいに広げる */
.qz-main--play > .qz-header--play {
  order: -1;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50% - 8px);
}
.qz-progressline:empty { display: none; }
.qz-view { display: flex; flex-direction: column; gap: 16px; }
.qz-view--explain { gap: 14px; }
.qz-rubybtn {
  margin-left: auto; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--c-line); border-radius: 10px; background: #FFFFFF; color: var(--c-sub);
  font-size: 0.8125rem; font-weight: 700; cursor: pointer;
}
.qz-rubybtn[aria-pressed="true"] { border-color: var(--c-theme); background: var(--c-theme-pale); color: var(--c-theme-dark); }
/* 問題文は、読み上げのためにフォーカスを移すだけ（押せる部品ではないので、枠は出さない） */
.qz-q__body:focus, .qz-q__body:focus-visible { outline: none; }
.qz-media .qz-btn, .qz-hint .qz-btn { align-self: flex-start; }
.qz-q__img--sm { max-height: 160px; }
.qz-results__img { margin-bottom: 10px; }
.qz-results__audio { display: block; width: 100%; margin-bottom: 10px; }
.qz-hint { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.qz-hint__text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-warn-pale); font-size: 0.9375rem; line-height: 1.6; }
.qz-verdict #qz-verdict-icon { display: flex; flex: none; }
.qz-explain__text { white-space: pre-line; }
.qz-source--plain { margin: 0; color: var(--c-sub); }
.qz-asof { margin: 0; }
.qz-btn--next { letter-spacing: 0; font-size: 1.25rem; }
.qz-autonext { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 0.875rem; color: var(--c-sub); }
.qz-overlay__sub { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1.5; color: var(--c-ink); }
.qz-overlay__box--result { border-color: var(--c-theme); color: var(--c-theme-dark); }

/* まちがいを報告 */
body.has-dialog { overflow: hidden; }
.qz-dialogwrap { z-index: 85; }
.qz-dialog {
  width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 18px; border-radius: 16px; background: #FFFFFF; color: var(--c-ink);
  box-shadow: 0 8px 30px rgba(24, 33, 28, 0.25);
}
.qz-dialog .qz-form { gap: 14px; }
.qz-dialog .qz-h2 { display: flex; align-items: center; gap: 8px; }
.qz-dialog .qz-sub { margin: 0; }

/* ───── 結果 ───── */
.qz-copybtn { align-self: flex-start; gap: 6px; text-decoration: none; }
.qz-certbox--guest { border-style: dashed; }
.qz-certbox__note { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--c-sub); }
.qz-certbox__text .qz-btn--text { min-height: 40px; }
.qz-source--inline { min-height: 0; padding: 0; margin: 0; }
.qz-reportlink { align-self: flex-start; }
.qz-btnrow--one { grid-template-columns: minmax(0, 1fr); }
.qz-btnrow form { margin: 0; display: flex; }
.qz-btnstack form { margin: 0; }
.qz-guestnote { margin: 0; text-align: center; }
.qz-guestnote a { white-space: nowrap; }

/* ───── きょうの10問 ───── */
.qz-dailycard .qz-h2 { display: flex; align-items: center; gap: 6px; }
.qz-dailycard__done { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.qz-daylist .qz-list__row { padding: 0; }
.qz-daylist__link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 6px 16px; color: var(--c-ink); text-decoration: none; }
.qz-daylist__link:hover { color: var(--c-ink); background: var(--c-theme-pale); }
.qz-daylist__link .qz-list__name { flex: 1; }
.qz-daylist__link > .ic { color: var(--c-theme); }