@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

* {
  box-sizing: border-box;
}

:root {
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  color: #20242b;
  background: #eef1f5;
  line-height: 1.7;
}

body {
  margin: 0;
}

button,
input {
  font: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid #f2a93b;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.site-main {
  width: min(100% - 32px, 1040px);
  margin: 0 auto;
  padding: 32px 0 56px;
}

.screen {
  padding: 28px 32px 38px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(31 42 58 / 10%);
}

.start-screen {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
}

.start-screen h1 {
  margin: 4px 0 16px;
  line-height: 1.35;
}

.start-screen h1 span {
  white-space: nowrap;
}

.version-label {
  margin: 0;
  font-weight: 700;
  color: #536173;
}

.notice-list {
  display: inline-block;
  margin: 18px auto 28px;
  padding-left: 1.4em;
  text-align: left;
}

.exam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d9dde3;
}

.group-number {
  font-weight: 700;
}

.category-name {
  margin-left: 12px;
  color: #4d5968;
}

.exam-status {
  display: flex;
  align-items: center;
  gap: 18px;
}

.progress-text {
  white-space: nowrap;
}

.timer {
  min-width: 154px;
  padding: 7px 12px;
  border: 1px solid #aeb4bf;
  border-radius: 8px;
  background: #f5f6f8;
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
}

#timer-text {
  display: inline-block;
  min-width: 58px;
  margin-left: 5px;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.timer.is-warning {
  border-color: #ad6800;
  background: #fff4d6;
}

.timer.is-danger {
  border-color: #a12828;
  background: #fde7e7;
}

.timer.is-danger #timer-text {
  color: #941f1f;
}

.problem-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 30px;
  margin-top: 26px;
}

.common-area,
.question-area {
  min-width: 0;
}

.common-text,
.question-text,
.explanation-text {
  white-space: pre-wrap;
}

.common-text {
  margin-top: 0;
}

.question-image-area {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  background: #fff;
}

#question-image {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
}

.question-label {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

.question-text {
  margin: 0 0 20px;
}

.choices-area {
  display: grid;
  gap: 10px;
}

.choice-item {
  display: grid;
  grid-template-columns: auto 1.8rem 1fr;
  align-items: start;
  gap: 8px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px #b8bec8;
  border-radius: 8px;
  cursor: pointer;
}

.choice-item:hover {
  background: #f5f7fb;
}

.choice-item.is-selected {
  border-color: #315fb4;
  box-shadow: none;
  background: #edf3ff;
}

.choice-item input {
  width: 18px;
  height: 18px;
  margin: .3em 0 0;
}

.choice-id {
  font-weight: 700;
}

.question-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #ddd;
}

.question-tab {
  position: relative;
  box-sizing: border-box;
  min-width: 58px;
  min-height: 44px;
  padding: 7px 25px 7px 12px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px #989faa;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.question-tab:hover {
  background: #f5f6f8;
}

.question-tab.is-current {
  border-color: #b75b00;
  box-shadow: none;
  background: #fff0df;
  font-weight: 700;
}

.question-tab.is-answered {
  padding-right: 25px;
}

.question-tab.is-answered::after {
  content: "✓";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  font-weight: 700;
}

.exam-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.primary-button,
.secondary-button,
.finish-button {
  min-height: 48px;
  padding: 11px 24px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.primary-button {
  color: #fff;
  background: #2856a3;
}

.primary-button:hover {
  background: #1f478a;
}

.secondary-button {
  color: #20242b;
  border: 1px solid #9da5b0;
  background: #fff;
}

.finish-button {
  color: #fff;
  background: #8b2f2f;
}

.finish-button:hover {
  background: #712626;
}

.score-card {
  padding: 18px 22px;
  border-radius: 10px;
  background: #f4f6fa;
}

.score-card p {
  margin: 5px 0;
}

.score-card strong {
  margin-left: 8px;
  font-size: 1.5rem;
}

.completion-message {
  margin-top: 0;
  font-weight: 700;
}

.category-result-list {
  padding-left: 1.4em;
}

.explanation-item {
  padding: 24px 0;
  border-bottom: 1px solid #ddd;
}

.explanation-item h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.judgment {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
}

.judgment.is-correct {
  background: #e5f5e9;
}

.judgment.is-incorrect {
  background: #fde9e9;
}

.answer-summary {
  margin: 0 0 12px;
}

.explanation-text {
  margin: 0;
  padding: 16px;
  border-left: 4px solid #9ba5b5;
  background: #f7f8fa;
}

.finish-dialog {
  width: min(100% - 32px, 480px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 16px 50px rgb(0 0 0 / 25%);
}

.finish-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.finish-dialog form {
  padding: 26px;
}

.finish-dialog h2 {
  margin-top: 0;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

@media (max-width: 760px) {
  .site-main {
    width: min(100% - 20px, 1040px);
    padding: 10px 0 32px;
  }

  .screen {
    padding: 18px 14px 26px;
    border-radius: 8px;
  }

  .start-screen {
    margin-top: 20px;
  }

  .exam-header {
    flex-direction: column;
    align-items: stretch;
  }

  .exam-status {
    justify-content: space-between;
  }

  .problem-card {
    grid-template-columns: 1fr;
  }

  .category-name {
    display: block;
    margin: 2px 0 0;
  }

  .exam-buttons {
    justify-content: stretch;
  }

  .primary-button,
  .finish-button {
    width: 100%;
  }

  .dialog-buttons {
    flex-direction: column-reverse;
  }

  .dialog-buttons button {
    width: 100%;
  }
}

.explanation-image {
  display: block;
  max-width: 760px;
  width: 100%;
  height: auto;
  margin-top: 16px;
}


/* Ver0.6: Google Formsアンケート */
.survey-panel {
  margin: 28px 0;
  padding: 22px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}

.survey-panel h2 {
  margin-top: 0;
}

.survey-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.attempt-id-line {
  margin: 16px 0 0;
  color: #596574;
  font-size: .86rem;
  overflow-wrap: anywhere;
}

.attempt-id-line code {
  user-select: all;
}

.text-button {
  margin-left: 6px;
  padding: 3px 7px;
  border: 1px solid #a8b0bc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  font-size: .82rem;
}

.save-status{font-weight:700;margin-top:.75rem}.save-status:empty{display:none}

/* Ver0.95 Phase4: RulePreset連動の下部タイマー */
.bottom-timer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  height: 10px;
  background: #e5e7eb;
  overflow: hidden;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, .12);
}

.bottom-timer-bar {
  width: 100%;
  height: 100%;
  background: #2563eb;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .25s linear, background-color .2s ease;
}

.bottom-timer.is-warning .bottom-timer-bar { background: #d97706; }
.bottom-timer.is-danger .bottom-timer-bar { background: #dc2626; }
.timer.is-visual-only #timer-text { display: none; }
.timer.is-visual-only { font-size: .86rem; color: #596574; }

@media (prefers-reduced-motion: reduce) {
  .bottom-timer-bar { transition: none; }
}


/* Ver0.96 Phase2: 模試選択・プランメニュー */
.start-screen {
  max-width: 940px;
  text-align: left;
}

.start-top-nav {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.site-home-link {
  color: #365f8d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site-home-link:hover {
  text-decoration: underline;
}

.site-home-link:focus-visible {
  outline: 3px solid #f2a93b;
  outline-offset: 4px;
  border-radius: 3px;
}

.start-hero { text-align: center; margin-bottom: 34px; }
.start-hero h1 { margin-bottom: 8px; }
.plan-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e8eef9;
  color: #2856a3;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.plan-badge.is-premium { background: #fff1cf; color: #7a5200; }
.exam-menu-section { margin-top: 30px; }
.menu-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.menu-heading-row h2 { margin: 0; font-size: 1.25rem; }
.menu-count, .premium-heading-label {
  color: #647184;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.premium-heading-label { color: #8a5a00; }
.exam-menu-card {
  position: relative;
  padding: 22px;
  border: 1px solid #d5dae2;
  border-radius: 12px;
  background: #fff;
}
.exam-menu-card.is-available {
  border-color: #9fb5db;
  box-shadow: 0 7px 20px rgb(38 76 139 / 9%);
}
.exam-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.exam-menu-card h3 { margin: 4px 0 6px; font-size: 1.2rem; }
.exam-menu-card p { margin: 0; color: #536173; }
.exam-type-label { color: #2856a3; font-size: .82rem; font-weight: 800; }
.exam-meta-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exam-meta-list li {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f0f3f8;
  white-space: nowrap;
  font-size: .78rem;
}
.exam-start-button { width: auto; margin-top: 20px; }
.premium-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.exam-menu-card.is-locked {
  min-height: 190px;
  background: #f7f8fa;
  color: #667180;
}
.exam-menu-card.is-locked .exam-type-label { color: #687486; }
.lock-label { float: right; color: #7a5200; font-size: .78rem; font-weight: 800; }
.coming-soon {
  display: inline-block;
  margin-top: 18px;
  color: #7b8490;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.exam-notes {
  margin-top: 30px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #f6f7f9;
}
.exam-notes summary { cursor: pointer; font-weight: 700; }
.exam-notes .notice-list { margin: 14px 0 0; }
@media (max-width: 760px) {
  .exam-card-main { flex-direction: column; }
  .exam-meta-list { justify-content: flex-start; }
  .premium-grid { grid-template-columns: 1fr; }
  .exam-start-button { width: 100%; }
}

/* Ver0.97 Phase2: 模試メタデータ */
.exam-detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  color: #354155;
  font-size: .86rem;
}
.exam-detail-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.exam-detail-label {
  color: #6b7686;
  font-size: .76rem;
  font-weight: 700;
}
.difficulty-stars {
  color: #8a5a00;
  letter-spacing: .03em;
}
.exam-menu-card.is-locked .difficulty-stars {
  color: #7a8390;
}

/* Ver0.98: 試験方式 → 受検モード → 模試 */
.selection-view { margin-top: 30px; }
.selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.selection-card {
  position: relative;
  display: flex;
  min-height: 230px;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid #d5dae2;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.selection-card:hover {
  transform: translateY(-2px);
  border-color: #8ca8d5;
  box-shadow: 0 10px 24px rgb(38 76 139 / 12%);
}
.selection-card-kicker,
.selection-eyebrow {
  color: #2856a3;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.selection-card strong {
  margin-top: 6px;
  font-size: 1.25rem;
  line-height: 1.45;
}
.selection-card-description {
  margin-top: 8px;
  color: #536173;
  line-height: 1.65;
}
.selection-card .exam-meta-list {
  justify-content: flex-start;
  margin-top: 18px;
}
.selection-card-action {
  margin-top: auto;
  padding-top: 20px;
  color: #2856a3;
  font-weight: 800;
}
.mode-status {
  display: inline-block;
  margin-top: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f0f2f5;
  color: #737d89;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.mode-status.is-available {
  background: #e7f3e9;
  color: #286139;
}
.selection-view-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.selection-view-header h2,
.selection-view-header p { margin: 0; }
.back-button,
.start-breadcrumb button {
  padding: 7px 12px;
  border: 1px solid #b8c0cb;
  border-radius: 8px;
  background: #fff;
  color: #364253;
  cursor: pointer;
}
.back-button:hover,
.start-breadcrumb button:hover { background: #f3f5f8; }
.start-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -10px 0 22px;
  color: #687486;
  font-size: .86rem;
}
.exam-definition-list {
  display: grid;
  gap: 16px;
}
.empty-state {
  padding: 34px 24px;
  border: 1px dashed #bdc4ce;
  border-radius: 12px;
  background: #f8f9fb;
  text-align: center;
}
.empty-state p { margin: 0; color: #596575; }

@media (max-width: 760px) {
  .selection-grid { grid-template-columns: 1fr; }
  .selection-card { min-height: 205px; }
  .selection-view-header { flex-direction: column; }
}

/* Ver0.99 */
.exam-locked-button { width: 100%; }
.premium-dialog .lock-label { display: inline-flex; margin-bottom: .75rem; }
.premium-dialog h2 { margin-top: 0; }


/* Ver1.0: 公開日から30日間の自動NEW表示 */
.exam-meta-list li.is-new {
  background: #fff0f0;
  color: #b42318;
  font-weight: 900;
  letter-spacing: .05em;
}

/* Ver1.0: 偏差値算出対象の模試 */
.exam-meta-list li.is-deviation-score {
  font-weight: 700;
  border-style: solid;
}

/* Ver1.1 Phase1: 数値・文字入力 */
.answer-input-wrapper { display: grid; gap: .5rem; max-width: 28rem; margin-top: 1rem; }
.answer-input-label { font-weight: 700; }
.answer-input { width: 100%; min-height: 3.25rem; box-sizing: border-box; padding: .7rem .9rem; border: 2px solid #b8c5d6; border-radius: .65rem; font: inherit; font-size: 1.15rem; background: #fff; }
.answer-input:focus { outline: 3px solid rgba(35, 99, 190, .2); border-color: #2363be; }

.explanation-common-text {
  white-space: pre-wrap;
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid #8aa4c8;
  background: #f4f7fb;
  line-height: 1.75;
}

.explanation-question-text {
  white-space: pre-wrap;
}

/* Ver1.1 Phase3: 分数入力 */
.fraction-input-wrapper { border: 0; padding: 0; margin: 1rem 0 0; max-width: 18rem; }
.fraction-input { display: grid; gap: .35rem; justify-items: stretch; }
.fraction-input-part { display: grid; grid-template-columns: 3.5rem minmax(8rem, 1fr); gap: .65rem; align-items: center; font-weight: 700; }
.fraction-input-part.is-numerator { padding-bottom: .45rem; border-bottom: 2px solid #334155; }
.fraction-input-part .answer-input { text-align: center; }
@media (max-width: 480px) {
  .fraction-input-wrapper { max-width: none; }
  .fraction-input-part { grid-template-columns: 3rem 1fr; }
}

/* Ver1.1 Phase9: WEBテスティング言語のマトリクス回答 */
.matrix-answer-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-top: 1rem;
  border: 1px solid #d7dde8;
  border-radius: 12px;
  background: #fff;
}

.matrix-answer-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.matrix-answer-table th,
.matrix-answer-table td {
  border-right: 1px solid #d7dde8;
  border-bottom: 1px solid #d7dde8;
  padding: 0.8rem;
  vertical-align: middle;
}

.matrix-answer-table tr:last-child > * {
  border-bottom: 0;
}

.matrix-answer-table tr > *:last-child {
  border-right: 0;
}

.matrix-question-header,
.matrix-row-header {
  width: 26%;
  text-align: left;
}

.matrix-question-header,
.matrix-choice-header {
  background: #f4f7fb;
  text-align: center;
  font-weight: 700;
}

.matrix-choice-header {
  font-size: 0.86rem;
  line-height: 1.45;
}

.matrix-choice-id {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.matrix-choice-text {
  display: block;
  font-weight: 500;
}

.matrix-row-label {
  display: inline-block;
  min-width: 2.2rem;
  margin-right: 0.45rem;
  font-weight: 700;
}

.matrix-row-text {
  font-weight: 600;
}

.matrix-choice-cell {
  text-align: center;
  transition: background-color 0.15s ease;
}

.matrix-choice-cell:hover,
.matrix-choice-cell.is-selected {
  background: #eef5ff;
}

.matrix-choice-cell input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: #245ea8;
}

@media (max-width: 720px) {
  .matrix-answer-table {
    min-width: 680px;
  }

  .matrix-answer-table th,
  .matrix-answer-table td {
    padding: 0.65rem 0.5rem;
  }
}

/* Ver1.1 Phase10: マトリクスを画面幅内に収める */
.matrix-answer-wrapper {
  overflow-x: visible;
}

.matrix-answer-table {
  min-width: 0;
  width: 100%;
}

.matrix-question-header,
.matrix-row-header {
  width: 36%;
}

.matrix-choice-header,
.matrix-choice-cell {
  width: 16%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.matrix-choice-id {
  margin-bottom: 0;
}

.matrix-choice-text:not(:empty) {
  margin-top: 0.2rem;
}

@media (max-width: 720px) {
  .matrix-answer-table {
    min-width: 0;
    table-layout: fixed;
  }

  .matrix-answer-table th,
  .matrix-answer-table td {
    padding: 0.48rem 0.22rem;
  }

  .matrix-question-header,
  .matrix-row-header {
    width: 40%;
  }

  .matrix-choice-header,
  .matrix-choice-cell {
    width: 15%;
  }

  .matrix-row-label {
    min-width: 0;
    margin-right: 0.25rem;
    font-size: 0.78rem;
  }

  .matrix-row-text,
  .matrix-choice-header {
    font-size: 0.78rem;
  }

  .matrix-choice-cell input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* Ver1.1 Phase11: 解説画面を大問単位で整理 */
.explanation-group {
  margin: 0 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color, #d9dee7);
  border-radius: 14px;
  background: #fff;
}

.explanation-group-heading {
  margin: 0 0 1rem;
}

.explanation-group .explanation-common-text {
  margin: 0 0 1rem;
  white-space: pre-wrap;
}

.explanation-group .explanation-item {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color, #e2e6ed);
}

.explanation-group .explanation-item:first-of-type {
  margin-top: 1rem;
}

.explanation-question-image,
.explanation-image {
  display: block;
  width: min(100%, 900px);
  height: auto;
  margin: 1rem auto;
  border-radius: 8px;
}

.answer-summary {
  white-space: normal;
}

.answer-summary-line {
  display: block;
  margin: 0.25rem 0;
}

/* Ver1.2 Phase1: 本番再現UI（画面内完結・経過時間ゲージ） */
body.is-exam-active {
  height: 100dvh;
  overflow: hidden;
}

body.is-exam-active .site-main {
  width: 100%;
  height: 100dvh;
  padding: 0;
}

#exam-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: calc(100dvh - 10px);
  padding: 18px 24px 20px;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

#exam-screen .exam-header {
  min-height: 58px;
  padding-bottom: 12px;
}

.exam-position {
  display: flex;
  align-items: center;
}

#exam-screen .problem-card {
  min-height: 0;
  margin-top: 16px;
  gap: 22px;
  overflow: hidden;
}

#exam-screen .common-area,
#exam-screen .question-area {
  min-height: 0;
}

#exam-screen .common-area {
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
}

#exam-screen .question-area {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
}

#exam-screen .question-prompt {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
}

#exam-screen .choices-area {
  max-height: min(42dvh, 390px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px 4px 2px 0;
  border-top: 1px solid #e2e6eb;
}

#exam-screen .question-tabs {
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 10px;
}

#exam-screen .exam-buttons {
  align-items: center;
  min-height: 64px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d9dde3;
  background: #fff;
}

#exam-screen .choice-item {
  padding-block: 9px;
}

/* 下部ゲージは残り時間ではなく経過時間。左から右へ背景を埋める。 */
.bottom-timer {
  height: 10px;
  background: #dfe5e3;
}

.bottom-timer-bar {
  width: 100%;
  background: #39a96b;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform, background-color;
}

.bottom-timer.is-yellow .bottom-timer-bar { background: #e0bd22; }
.bottom-timer.is-orange .bottom-timer-bar { background: #e8832f; }
.bottom-timer.is-red .bottom-timer-bar { background: #d64545; }

/* 旧クラスによる色上書きを無効化 */
.bottom-timer.is-warning .bottom-timer-bar,
.bottom-timer.is-danger .bottom-timer-bar { background: #39a96b; }

@media (max-width: 760px) {
  #exam-screen {
    height: calc(100dvh - 10px);
    padding: 10px 12px 14px;
  }

  #exam-screen .exam-header {
    flex-direction: row;
    align-items: center;
    min-height: 50px;
    gap: 10px;
  }

  #exam-screen .exam-status {
    margin-left: auto;
  }

  #exam-screen .timer {
    min-width: 128px;
    padding: 5px 8px;
  }

  #exam-screen .problem-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 10px;
    margin-top: 8px;
  }

  #exam-screen .choices-area {
    max-height: 34dvh;
  }

  #exam-screen .exam-buttons {
    min-height: 58px;
    margin-top: 6px;
    padding-top: 6px;
  }
}


/* Ver1.2 Phase2: PC前提・一画面完結レイアウト */
@media (min-width: 1024px) {
  #exam-screen {
    --exam-font-size: 16px;
    --exam-line-height: 1.55;
    --exam-gap: 18px;
    --choice-gap: 8px;
    --choice-padding-y: 8px;
    --choice-padding-x: 12px;
    font-size: var(--exam-font-size);
  }

  #exam-screen .problem-card {
    height: 100%;
    min-height: 0;
    margin-top: 8px;
    gap: var(--exam-gap);
    overflow: hidden;
    align-items: stretch;
  }

  #exam-screen .common-area,
  #exam-screen .question-area,
  #exam-screen .question-prompt,
  #exam-screen .choices-area {
    min-height: 0;
    overflow: hidden !important;
    overscroll-behavior: none;
    scrollbar-width: none;
  }

  #exam-screen .common-area::-webkit-scrollbar,
  #exam-screen .question-area::-webkit-scrollbar,
  #exam-screen .question-prompt::-webkit-scrollbar,
  #exam-screen .choices-area::-webkit-scrollbar {
    display: none;
  }

  #exam-screen .common-area {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 4px 6px 4px 2px;
  }

  #exam-screen .common-text,
  #exam-screen .question-text {
    line-height: var(--exam-line-height);
  }

  #exam-screen .question-area {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start;
    padding: 4px 2px;
  }

  #exam-screen .question-prompt {
    padding-right: 0;
  }

  #exam-screen .question-text {
    margin-bottom: 10px;
  }

  #exam-screen .choices-area {
    align-content: start;
    max-height: none;
    gap: var(--choice-gap);
    padding: 4px 0 0;
    border-top: 0;
  }

  #exam-screen .choice-item {
    gap: 7px;
    padding: var(--choice-padding-y) var(--choice-padding-x);
    line-height: 1.35;
  }

  #exam-screen .question-tabs {
    margin-top: 8px;
    padding-top: 7px;
  }

  #exam-screen .question-tab {
    min-width: 42px;
    padding: 6px 10px;
  }

  #exam-screen .question-image-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  #exam-screen #question-image {
    width: auto;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 短い問題は中央寄せの1カラム。 */
  #exam-screen.layout-compact .problem-card {
    grid-template-columns: minmax(0, 900px);
    justify-content: center;
  }

  #exam-screen.layout-compact .common-area {
    display: none;
  }

  #exam-screen.layout-compact .question-area {
    width: min(100%, 900px);
    justify-self: center;
    grid-template-rows: auto auto auto;
    align-content: center;
  }

  /* 長文は本文と設問を左右に分離。 */
  #exam-screen.layout-long-text .problem-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  }

  /* 図表問題は画像側を広めに確保。 */
  #exam-screen.layout-image .problem-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr);
  }

  /* マトリクスは設問表を広めにする。 */
  #exam-screen.layout-matrix .problem-card {
    grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.28fr);
  }

  #exam-screen.layout-matrix .question-area {
    grid-template-rows: minmax(0, 1fr);
  }

  #exam-screen.layout-matrix .matrix-answer-table {
    width: 100%;
    table-layout: fixed;
    font-size: .95em;
  }

  #exam-screen.layout-matrix .matrix-question-header,
  #exam-screen.layout-matrix .matrix-row-header {
    width: 48%;
  }

  #exam-screen.layout-matrix .matrix-answer-table th,
  #exam-screen.layout-matrix .matrix-answer-table td {
    padding: 7px 5px;
  }

  /* 画面高さに応じた段階的な密度調整。JSが必要な段階まで自動適用する。 */
  #exam-screen.density-1 {
    --exam-font-size: 15px;
    --exam-line-height: 1.45;
    --exam-gap: 14px;
    --choice-gap: 6px;
    --choice-padding-y: 6px;
  }

  #exam-screen.density-2 {
    --exam-font-size: 14px;
    --exam-line-height: 1.38;
    --exam-gap: 11px;
    --choice-gap: 4px;
    --choice-padding-y: 5px;
    --choice-padding-x: 10px;
  }

  #exam-screen.density-2 .exam-header,
  #exam-screen.density-3 .exam-header,
  #exam-screen.density-4 .exam-header {
    min-height: 48px;
    padding-bottom: 6px;
  }

  #exam-screen.density-3 {
    --exam-font-size: 13px;
    --exam-line-height: 1.32;
    --exam-gap: 8px;
    --choice-gap: 3px;
    --choice-padding-y: 4px;
    --choice-padding-x: 8px;
    padding-top: 10px;
  }

  #exam-screen.density-3 .question-label,
  #exam-screen.density-4 .question-label {
    margin-bottom: 5px;
    font-size: 1.05em;
  }

  #exam-screen.density-3 .question-text,
  #exam-screen.density-4 .question-text {
    margin-bottom: 5px;
  }

  #exam-screen.density-3 .question-tabs,
  #exam-screen.density-4 .question-tabs {
    margin-top: 4px;
    padding-top: 4px;
  }

  #exam-screen.density-4 {
    --exam-font-size: 12px;
    --exam-line-height: 1.25;
    --exam-gap: 6px;
    --choice-gap: 2px;
    --choice-padding-y: 3px;
    --choice-padding-x: 7px;
    padding: 8px 16px 12px;
  }

  #exam-screen.density-4 .choice-item input {
    width: 15px;
    height: 15px;
  }
}

/* 小型画面では受検非推奨だが、閲覧可能な従来レイアウトを維持する。 */
@media (max-width: 1023px) {
  body.is-exam-active::before {
    content: "本模試はPCでの受検を推奨しています。";
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px 10px;
    background: #fff4d6;
    color: #6b4a00;
    text-align: center;
    font-size: 12px;
  }

  body.is-exam-active .site-main {
    padding-top: 26px;
  }
}


/* Ver1.2 Phase3: 操作時にレイアウト寸法を変えない */
#exam-screen .problem-card,
#exam-screen .common-area,
#exam-screen .question-area,
#exam-screen .question-prompt,
#exam-screen .choices-area,
#exam-screen .choice-item,
#exam-screen .question-tabs,
#exam-screen .question-tab {
  box-sizing: border-box;
}

#exam-screen .choice-item,
#exam-screen .question-tab,
#exam-screen .matrix-choice-cell {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

@media (min-width: 1024px) {
  /* 動的zoomを廃止し、大問内では常に同じ幅・密度を維持する。 */
  #exam-screen .problem-card {
    zoom: 1 !important;
    width: 100%;
  }

  #exam-screen.layout-image .common-area,
  #exam-screen.layout-image .question-area,
  #exam-screen.layout-long-text .common-area,
  #exam-screen.layout-long-text .question-area {
    width: auto;
    min-width: 0;
  }

  /* 7択以上は2列にして高さを節約。大問内の全小問で同じ列構成を保つ。 */
  #exam-screen.many-choices:not(.layout-matrix) .choices-area {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
  }

  #exam-screen.many-choices:not(.layout-matrix) .choice-item {
    min-width: 0;
  }

  /* 長文の本文領域を安定して広く確保し、右側に設問と回答を収める。 */
  #exam-screen.layout-long-text .problem-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(430px, .65fr);
  }

  #exam-screen.layout-long-text.many-choices .problem-card {
    grid-template-columns: minmax(0, 1.25fr) minmax(500px, .75fr);
  }

  #exam-screen.layout-long-text .common-text {
    white-space: pre-wrap;
  }

  #exam-screen.layout-long-text.many-choices .question-text {
    font-size: .94em;
    line-height: 1.28;
  }

  #exam-screen.layout-long-text.many-choices .choice-item {
    padding-block: 4px;
  }

  /* 資料解釈など小問タブを切り替えても左右カラム幅を固定。 */
  #exam-screen.layout-image .problem-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(410px, .8fr);
  }
}


/* Ver1.2 Phase4: ヘッダー圧縮・大問単位の安定配置 */
@media (min-width: 1024px) {
  #exam-screen {
    grid-template-rows: 42px minmax(0, 1fr) 10px 50px;
    padding: 8px 20px 8px;
  }

  #exam-screen .exam-header {
    min-height: 0;
    height: 42px;
    padding: 0 0 5px;
    gap: 10px;
  }

  #exam-screen .group-number {
    font-size: 13px;
    line-height: 1;
  }

  #exam-screen .exam-status {
    gap: 8px;
  }

  #exam-screen .progress-text {
    font-size: 12px;
  }

  #exam-screen .timer {
    min-width: 108px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.15;
  }

  #exam-screen #timer-text {
    min-width: 43px;
    margin-left: 3px;
    font-size: 15px;
  }

  #exam-screen .problem-card {
    margin-top: 4px;
    padding-top: 0;
  }

  #exam-screen .exam-buttons {
    min-height: 50px;
    height: 50px;
    margin-top: 0;
    padding-top: 6px;
  }

  #exam-screen .question-area {
    grid-template-rows: auto auto auto;
    align-content: start;
  }

  /* 大問内で最長の問題文に合わせ、選択肢の開始位置を固定する。 */
  #exam-screen.prompt-short .question-prompt { min-height: 70px; }
  #exam-screen.prompt-medium .question-prompt { min-height: 112px; }
  #exam-screen.prompt-long .question-prompt { min-height: 168px; }
  #exam-screen.prompt-xlong .question-prompt { min-height: 220px; }

  #exam-screen.layout-long-text.prompt-short .question-prompt { min-height: 64px; }
  #exam-screen.layout-long-text.prompt-medium .question-prompt { min-height: 96px; }
  #exam-screen.layout-long-text.prompt-long .question-prompt { min-height: 142px; }
  #exam-screen.layout-long-text.prompt-xlong .question-prompt { min-height: 188px; }

  /* 2列化は大問単位で固定し、タブ切替時にも列数を変えない。 */
  #exam-screen.choice-columns-2:not(.layout-matrix) .choices-area {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    align-items: stretch;
  }

  #exam-screen.choice-columns-2:not(.layout-matrix) .choice-item {
    min-width: 0;
    height: 100%;
  }

  /* 長文＋多数選択肢は右側を広げ、切れを防ぐ。 */
  #exam-screen.layout-long-text.choice-columns-2 .problem-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(560px, .95fr);
  }

  #exam-screen.layout-long-text.choice-columns-2 .question-text {
    line-height: 1.25;
    margin-bottom: 5px;
  }

  #exam-screen.layout-long-text.choice-columns-2 .choice-item {
    padding-block: 3px;
    line-height: 1.2;
  }

  #exam-screen .question-tabs {
    min-height: 38px;
    margin-top: 5px;
    padding-top: 5px;
  }
}

/* Ver1.2 Phase5: 問題表示と回答操作を分離し、回答エリアを下部に固定 */
@media (min-width: 1024px) {
  #exam-screen .problem-card {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) var(--answer-dock-height, 180px);
    gap: 8px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #exam-screen .exam-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: var(--exam-gap, 14px);
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #exam-screen .common-area,
  #exam-screen .question-area,
  #exam-screen .question-prompt {
    min-height: 0;
    height: 100%;
    overflow: hidden !important;
  }

  #exam-screen .common-area {
    padding: 2px 8px 2px 2px;
  }

  #exam-screen .question-area {
    display: block;
    padding: 2px 2px 2px 8px;
  }

  #exam-screen .question-prompt {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0 !important;
  }

  #exam-screen .common-text,
  #exam-screen .question-text {
    margin-top: 0;
    line-height: var(--exam-line-height, 1.45);
  }

  #exam-screen .common-text {
    margin-bottom: 6px;
  }

  #exam-screen .question-text {
    margin-bottom: 0;
  }

  /* 回答エリアは大問中ずっと同じ高さ・同じ位置。 */
  #exam-screen .answer-dock {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 4px;
    height: var(--answer-dock-height, 180px);
    min-height: 0;
    padding: 5px 0 0;
    border-top: 1px solid #d9dde3;
    background: #fff;
    overflow: hidden;
  }

  #exam-screen .answer-dock .choices-area {
    display: grid;
    align-content: center;
    max-height: none;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: 2px 0;
    border-top: 0;
  }

  #exam-screen .answer-dock .question-tabs {
    align-self: end;
    min-height: 36px;
    margin: 0;
    padding: 4px 0 0;
    border-top: 1px solid #e4e7eb;
  }

  #exam-screen .answer-dock .question-tab {
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* 問題形式ごとに上段だけを切り替える。回答位置は共通。 */
  #exam-screen.layout-compact .exam-content-grid {
    grid-template-columns: minmax(0, 900px);
    justify-content: center;
  }

  #exam-screen.layout-compact .common-area {
    display: none;
  }

  #exam-screen.layout-compact .question-area {
    width: min(100%, 900px);
    justify-self: center;
    padding-left: 2px;
  }

  #exam-screen.layout-long-text .exam-content-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(390px, .72fr);
  }

  #exam-screen.layout-image .exam-content-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr);
  }

  #exam-screen.layout-matrix .exam-content-grid {
    grid-template-columns: 1fr;
  }

  #exam-screen.layout-matrix .question-area {
    display: none;
  }

  #exam-screen.layout-matrix .common-area {
    padding-right: 2px;
  }

  #exam-screen.layout-matrix .answer-dock {
    grid-template-rows: minmax(0, 1fr);
  }

  /* 2列選択肢も固定回答エリア内で処理する。 */
  #exam-screen.choice-columns-2:not(.layout-matrix) .answer-dock .choices-area,
  #exam-screen.many-choices:not(.layout-matrix) .answer-dock .choices-area {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
  }

  #exam-screen .answer-dock .choice-item {
    min-width: 0;
    min-height: 34px;
    padding-top: var(--choice-padding-y, 6px);
    padding-bottom: var(--choice-padding-y, 6px);
  }

  /* 長文の本文は縮めすぎず、作問ルール（推奨450字・上限700字）で一画面に収める。 */
  #exam-screen.layout-long-text .common-text {
    font-size: 14.5px;
    line-height: 1.42;
  }

  #exam-screen.layout-long-text .question-text {
    font-size: 14.5px;
    line-height: 1.4;
  }

  /* 旧Phase4の問題文min-heightは、回答ドック固定後は不要。 */
  #exam-screen.prompt-short .question-prompt,
  #exam-screen.prompt-medium .question-prompt,
  #exam-screen.prompt-long .question-prompt,
  #exam-screen.prompt-xlong .question-prompt,
  #exam-screen.layout-long-text.prompt-short .question-prompt,
  #exam-screen.layout-long-text.prompt-medium .question-prompt,
  #exam-screen.layout-long-text.prompt-long .question-prompt,
  #exam-screen.layout-long-text.prompt-xlong .question-prompt {
    min-height: 0 !important;
  }
}

/* Ver1.2 Phase5 Fix2: 回答ドックを実DOM構造ごと下部固定 */
@media (min-width: 1024px) {
  body.is-exam-active,
  body.is-exam-active .site-main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  #exam-screen {
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr);
    height: 100vh;
    min-height: 0;
    padding: 8px 20px;
    overflow: hidden;
  }

  #exam-screen .problem-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) var(--answer-dock-height, 220px) !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 6px;
    overflow: hidden;
  }

  #exam-screen .exam-content-grid {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #exam-screen .answer-dock {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 8px 48px !important;
    gap: 4px;
    height: var(--answer-dock-height, 220px) !important;
    min-height: 0;
    padding: 3px 0 0;
    border-top: 1px solid #d9dde3;
    background: #fff;
    overflow: hidden;
  }

  #exam-screen .answer-dock .choices-area {
    min-height: 0;
    height: 100%;
    align-content: center;
    overflow: hidden !important;
    padding: 0;
  }

  #exam-screen .answer-dock .bottom-timer {
    position: static !important;
    width: 100%;
    height: 8px !important;
    min-height: 8px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #exam-screen .answer-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    height: 48px;
    border-top: 1px solid #e4e7eb;
  }

  #exam-screen .answer-navigation .question-tabs {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    margin: 0;
    padding: 3px 0 0;
    border-top: 0;
  }

  #exam-screen .answer-navigation .question-tabs[hidden] {
    display: none !important;
  }

  #exam-screen .answer-navigation .exam-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 190px;
    min-height: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
  }

  #exam-screen .answer-navigation .exam-buttons button {
    min-height: 40px;
    height: 40px;
    margin: 0;
    padding: 7px 20px;
  }

  /* マトリクスも同じ回答ドック構造を維持する。 */
  #exam-screen.layout-matrix .answer-dock {
    grid-template-rows: minmax(0, 1fr) 8px 48px !important;
  }
}

/* Ver1.2 Phase5 Fix3: 回答ドックを物理的に画面下部へ固定し、選択肢の位置も大問内で固定 */
@media (min-width: 1024px) {
  #exam-screen .problem-card {
    position: relative !important;
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* 上段は回答ドックの直前までを必ず使用する */
  #exam-screen .exam-content-grid {
    position: absolute !important;
    inset: 0 0 calc(var(--answer-dock-height, 220px) + 6px) 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* 回答ドック自体を下端にアンカー。本文量の影響を一切受けない。 */
  #exam-screen .answer-dock {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 8px 48px !important;
    width: 100% !important;
    height: var(--answer-dock-height, 220px) !important;
    min-height: var(--answer-dock-height, 220px) !important;
    max-height: var(--answer-dock-height, 220px) !important;
    margin: 0 !important;
    padding: 3px 0 0 !important;
    background: #fff !important;
    border-top: 1px solid #d9dde3 !important;
    overflow: hidden !important;
    z-index: 5;
  }

  /* 選択肢は中央寄せせず、固定行へストレッチして位置変化を防ぐ。 */
  #exam-screen .answer-dock .choices-area {
    display: grid !important;
    grid-template-rows: repeat(var(--choice-row-count, 1), minmax(0, 1fr)) !important;
    align-content: stretch !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 0 !important;
    overflow: hidden !important;
  }

  #exam-screen.choice-columns-2:not(.layout-matrix) .answer-dock .choices-area,
  #exam-screen.many-choices:not(.layout-matrix) .answer-dock .choices-area {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--choice-row-count, 1), minmax(0, 1fr)) !important;
  }

  #exam-screen .answer-dock .choice-item {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 2px 0 !important;
    align-self: stretch !important;
  }

  #exam-screen .answer-navigation {
    position: relative !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }

  #exam-screen .answer-navigation .question-tabs {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  #exam-screen .answer-navigation .exam-buttons {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  /* マトリクスは行数が多いため従来の専用グリッドを優先する。 */
  #exam-screen.layout-matrix .answer-dock .choices-area {
    grid-template-rows: none !important;
    align-content: stretch !important;
  }
}


/* Ver1.2 Phase6: 回答欄の開始位置を模試全体で固定 */
@media (min-width: 1024px) {
  #exam-screen { --answer-dock-height: 300px; }

  #exam-screen .answer-dock {
    height: var(--answer-dock-height) !important;
    min-height: var(--answer-dock-height) !important;
    max-height: var(--answer-dock-height) !important;
  }

  #exam-screen .exam-content-grid {
    inset: 0 0 calc(var(--answer-dock-height) + 6px) 0 !important;
  }

  /* 回答UIはドック上端から開始。中央寄せによる上下移動を禁止。 */
  #exam-screen .answer-dock .choices-area {
    align-content: start !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(40px, auto) !important;
    gap: 6px !important;
    padding: 8px 0 4px !important;
  }

  #exam-screen.choice-columns-2:not(.layout-matrix) .answer-dock .choices-area,
  #exam-screen.many-choices:not(.layout-matrix) .answer-dock .choices-area {
    grid-template-rows: none !important;
    grid-auto-rows: minmax(40px, auto) !important;
  }

  #exam-screen .answer-dock .choice-item {
    height: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  /* 数値・分数入力も選択肢と同じY位置から始める。 */
  #exam-screen .answer-dock .answer-input-wrapper,
  #exam-screen .answer-dock .fraction-input-wrapper {
    align-self: start !important;
    justify-self: start !important;
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #exam-screen .answer-dock .answer-input-label { margin: 0 0 6px !important; }
  #exam-screen .answer-dock .answer-input { min-height: 48px !important; box-sizing: border-box !important; }

  /* タブがない大問でもナビゲーション行そのものは確保する。 */
  #exam-screen .answer-navigation { height: 48px !important; min-height: 48px !important; }

  #exam-screen.layout-matrix .answer-dock {
    height: var(--answer-dock-height) !important;
    min-height: var(--answer-dock-height) !important;
    max-height: var(--answer-dock-height) !important;
  }
}

@media (min-width: 1024px) and (max-height: 740px) {
  #exam-screen { --answer-dock-height: 280px; }
}

/* =========================================================
   Ver1.2 Phase7: SPI本番準拠レイアウト
   左＝問題・共通条件・資料 / 右＝設問・回答欄
   下＝大問経過バー / 右下＝次へ
   ========================================================= */
@media (min-width: 1024px) {
  body.is-exam-active,
  body.is-exam-active .site-main {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden !important;
  }

  #exam-screen {
    display: grid !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 6px 14px 8px !important;
    overflow: hidden !important;
    background: #fff;
    font-size: 16px !important;
  }

  #exam-screen .exam-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 0 5px !important;
    margin: 0 !important;
    border-bottom: 1px solid #d8dde3;
  }

  #exam-screen .group-number {
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1 !important;
  }

  #exam-screen .exam-status {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #exam-screen .timer {
    min-width: 118px !important;
    height: 34px;
    padding: 4px 8px !important;
    border: 1px solid #adb6c2;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 11px !important;
    line-height: 1;
  }

  #exam-screen #timer-text {
    min-width: 48px !important;
    margin-left: 4px;
    font-size: 18px !important;
    font-weight: 700;
  }

  /* 旧回答ドック方式を完全に無効化 */
  #exam-screen .problem-card {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) 54px !important;
    gap: 6px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #exam-screen .exam-content-grid {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 58fr) minmax(420px, 42fr) !important;
    gap: 28px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px 4px 2px !important;
  }

  #exam-screen .common-area,
  #exam-screen .question-area {
    position: static !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #exam-screen .common-area {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 2px 8px 0 2px !important;
  }

  #exam-screen .left-prompt-slot,
  #exam-screen .right-prompt-slot {
    min-width: 0;
  }

  #exam-screen .common-text:empty {
    display: none !important;
  }

  #exam-screen .common-text,
  #exam-screen .question-text {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.52 !important;
    white-space: pre-wrap;
  }

  #exam-screen .question-image-area {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    overflow: hidden !important;
  }

  #exam-screen .question-image-area[hidden] {
    display: none !important;
  }

  #exam-screen #question-image {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* 右側は本番の回答パネル。設問→回答→小問タブの順。 */
  #exam-screen .question-area {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) 44px !important;
    align-content: stretch !important;
    padding: 16px 18px 0 !important;
    border: 1px solid #b8bec6;
    background: #fff;
  }

  #exam-screen .right-prompt-slot {
    min-height: 0;
    padding-bottom: 8px;
  }

  #exam-screen .question-prompt {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #exam-screen.no-shared-material .left-prompt-slot .question-prompt {
    padding: 12px 14px 0 14px;
  }

  #exam-screen.no-shared-material .common-area {
    justify-content: flex-start !important;
  }

  #exam-screen .question-label {
    margin: 0 0 10px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  #exam-screen .choices-area {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(34px, auto) !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* 本番に寄せ、テストセンターは選択肢を縦1列にする。 */
  #exam-screen.exam-ui-testcenter.choice-columns-2 .choices-area,
  #exam-screen.exam-ui-testcenter.many-choices .choices-area {
    grid-template-columns: 1fr !important;
  }

  #exam-screen .choice-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 4px 7px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15.5px !important;
    line-height: 1.3 !important;
  }

  #exam-screen .choice-item:hover,
  #exam-screen .choice-item.is-selected,
  #exam-screen .choice-item:has(input:checked) {
    border: 0 !important;
    background: #f4f7fb !important;
    box-shadow: none !important;
  }

  #exam-screen .choice-item input[type="radio"] {
    flex: 0 0 auto;
    width: 19px !important;
    height: 19px !important;
    margin-top: 1px;
  }

  #exam-screen .question-tabs {
    display: flex !important;
    align-items: end !important;
    gap: 4px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 -18px !important;
    padding: 5px 18px 0 !important;
    border-top: 1px solid #d7dbe0 !important;
    background: linear-gradient(#fff, #f0f0f0) !important;
  }

  #exam-screen .question-tabs[hidden] {
    visibility: hidden !important;
    display: flex !important;
  }

  #exam-screen .question-tab {
    min-width: 44px !important;
    height: 38px !important;
    padding: 5px 11px !important;
    margin: 0 !important;
    border: 1px solid #aeb5bd !important;
    border-bottom: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    background: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  #exam-screen .question-tab.is-active,
  #exam-screen .question-tab[aria-current="true"] {
    background: #ffd19a !important;
    border-color: #ca6b16 !important;
    box-shadow: none !important;
  }

  /* 数値入力は右回答欄の上側に小さく置く。 */
  #exam-screen .answer-input-wrapper,
  #exam-screen .fraction-input-wrapper {
    width: min(100%, 330px) !important;
    margin: 8px 0 0 !important;
  }

  #exam-screen .answer-input {
    width: 180px !important;
    max-width: 100% !important;
    height: 48px !important;
    padding: 6px 10px !important;
    font-size: 20px !important;
  }

  #exam-screen .answer-input-label {
    font-size: 14px !important;
  }

  /* WEB言語マトリクスは右側を回答表として使用。 */
  #exam-screen.answer-format-matrix .question-area {
    padding: 8px 10px 0 !important;
  }

  #exam-screen.answer-format-matrix .right-prompt-slot {
    display: none !important;
  }

  #exam-screen.answer-format-matrix .choices-area {
    display: block !important;
    padding-top: 0 !important;
  }

  #exam-screen .matrix-answer-wrapper,
  #exam-screen .matrix-answer-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #exam-screen .matrix-answer-table {
    table-layout: fixed !important;
    font-size: 14px !important;
  }

  #exam-screen .matrix-answer-table th,
  #exam-screen .matrix-answer-table td {
    padding: 6px 4px !important;
  }

  /* 下部は本番同様、経過バー＋右下の次へだけ。 */
  #exam-screen .exam-bottom-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 170px !important;
    align-items: end !important;
    gap: 22px !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 4px 10px 0 6px !important;
    background: #fff;
  }

  #exam-screen .bottom-timer {
    position: static !important;
    display: block;
    align-self: end !important;
    width: 100% !important;
    height: 10px !important;
    margin: 0 0 8px !important;
    background: #e3e8e6 !important;
    overflow: hidden !important;
  }

  #exam-screen .bottom-timer[hidden] {
    visibility: hidden !important;
    display: block !important;
  }

  #exam-screen .exam-buttons {
    display: flex !important;
    align-items: end !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #exam-screen .exam-buttons button {
    min-width: 150px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 18px !important;
    border-radius: 7px !important;
    font-size: 16px !important;
  }

  /* 長文は左本文を広めに。作問上限700字を前提。 */
  #exam-screen.layout-long-text .exam-content-grid {
    grid-template-columns: minmax(0, 62fr) minmax(420px, 38fr) !important;
  }

  #exam-screen.layout-long-text .common-text,
  #exam-screen.layout-long-text .question-text {
    font-size: 15px !important;
    line-height: 1.46 !important;
  }

  /* 図表問題は左の資料を大きく取る。 */
  #exam-screen.layout-image .exam-content-grid {
    grid-template-columns: minmax(0, 60fr) minmax(420px, 40fr) !important;
  }

  /* 旧answer-dockはPhase7 DOMでは存在しない。残存指定を無効化。 */
  #exam-screen .answer-dock,
  #exam-screen .answer-navigation {
    position: static !important;
    display: none !important;
  }
}

/* Phase7: 旧layout-*固有指定より本番準拠の左右骨格を優先 */
@media (min-width: 1024px) {
  #exam-screen.layout-compact .exam-content-grid,
  #exam-screen.layout-standard .exam-content-grid,
  #exam-screen.layout-matrix .exam-content-grid {
    grid-template-columns: minmax(0, 58fr) minmax(420px, 42fr) !important;
    justify-content: stretch !important;
  }

  #exam-screen.layout-compact .common-area,
  #exam-screen.layout-standard .common-area,
  #exam-screen.layout-matrix .common-area {
    display: flex !important;
    width: auto !important;
  }

  #exam-screen.layout-compact .question-area,
  #exam-screen.layout-standard .question-area,
  #exam-screen.layout-matrix .question-area {
    display: grid !important;
    width: auto !important;
    justify-self: stretch !important;
  }

  #exam-screen.answer-format-matrix .question-area {
    grid-template-rows: minmax(0, 1fr) 44px !important;
  }

  #exam-screen.answer-format-matrix .choices-area {
    grid-row: 1 !important;
  }

  #exam-screen.answer-format-matrix .question-tabs {
    grid-row: 2 !important;
  }
}

/* =========================================================
   Ver1.2 Phase8 - 本番準拠UIの微調整
   ・右側（設問＋回答欄）を広げる
   ・設問の(1)(2)見出しは表示しない
   ・共通条件文をヘッダーから少し離す
   ・長い設問でも選択肢が下で切れにくいよう密度を調整
   ========================================================= */
@media (min-width: 1024px) {
  /* 標準は左54 / 右46。本番の横長回答パネルを優先する。 */
  #exam-screen .exam-content-grid,
  #exam-screen.layout-compact .exam-content-grid,
  #exam-screen.layout-standard .exam-content-grid,
  #exam-screen.layout-matrix .exam-content-grid {
    grid-template-columns: minmax(0, 54fr) minmax(460px, 46fr) !important;
    gap: 22px !important;
  }

  /* 図表問題も右側を少し広げる。 */
  #exam-screen.layout-image .exam-content-grid {
    grid-template-columns: minmax(0, 55fr) minmax(460px, 45fr) !important;
  }

  /* 長文は左右ほぼ半々。設問と選択肢の折返しを減らす。 */
  #exam-screen.layout-long-text .exam-content-grid {
    grid-template-columns: minmax(0, 53fr) minmax(480px, 47fr) !important;
  }

  /* 共通条件文はヘッダー直下に貼り付けない。 */
  #exam-screen.has-shared-material .common-area {
    padding-top: 18px !important;
  }

  #exam-screen.has-shared-material .common-text {
    margin-top: 0 !important;
  }

  /* 小問番号はタブで十分なので設問欄には出さない。 */
  #exam-screen .question-label {
    display: none !important;
  }

  /* 設問が長い大問は右パネルの余白と選択肢間隔を少し詰める。 */
  #exam-screen.prompt-long .question-area,
  #exam-screen.prompt-xlong .question-area {
    padding: 10px 14px 0 !important;
  }

  #exam-screen.prompt-long .right-prompt-slot,
  #exam-screen.prompt-xlong .right-prompt-slot {
    padding-bottom: 4px !important;
  }

  #exam-screen.prompt-long .question-text,
  #exam-screen.prompt-xlong .question-text {
    font-size: 15px !important;
    line-height: 1.38 !important;
  }

  #exam-screen.prompt-long .choices-area,
  #exam-screen.prompt-xlong .choices-area,
  #exam-screen.many-choices .choices-area {
    gap: 2px !important;
    padding-top: 1px !important;
  }

  #exam-screen.prompt-long .choice-item,
  #exam-screen.prompt-xlong .choice-item,
  #exam-screen.many-choices .choice-item {
    min-height: 29px !important;
    padding: 2px 5px !important;
    font-size: 14.5px !important;
    line-height: 1.22 !important;
  }

  #exam-screen.prompt-long .choice-item input[type="radio"],
  #exam-screen.prompt-xlong .choice-item input[type="radio"],
  #exam-screen.many-choices .choice-item input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
  }

  /* 右欄は内容が多い場合も下端を切らず、利用可能高を最大限使う。 */
  #exam-screen .question-area {
    grid-template-rows: auto minmax(0, 1fr) 44px !important;
  }

  #exam-screen .choices-area {
    align-self: stretch !important;
    max-height: 100% !important;
  }
}

/* Ver1.2 Phase9: 本番準拠UIの安全余白・複数選択・最終フォールバック */
@media (min-width: 1024px) {
  #exam-screen .exam-header {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 0 4px !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }
  #exam-screen .group-number {
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
  }
  #exam-screen .timer {
    min-height: 26px !important;
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
  }
  #exam-screen .timer #timer-text,
  #exam-screen #timer-text {
    font-size: 1rem !important;
  }

  /* 右側は通常はスクロールなし。内容が画面高を超えた場合だけ自動で縦スクロールを出す。 */
  #exam-screen .question-area {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    padding-right: 8px !important;
  }
  #exam-screen .choices-area {
    overflow: visible !important;
    max-height: none !important;
  }
  #exam-screen .right-prompt-slot,
  #exam-screen .question-prompt {
    overflow: visible !important;
    max-height: none !important;
  }

  /* 複数選択は通常選択と同じ寸法でチェックボックスを表示 */
  #exam-screen .choice-item input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 1.05rem;
    margin: 0;
    accent-color: #245ea8;
    cursor: pointer;
  }
  #exam-screen.answer-format-multiple .choice-item {
    cursor: pointer;
  }
}


/* =========================================================
   Ver1.2 Phase10 - 右回答欄の見切れ防止 / レイアウト安定化 / 結果画面隔離
   ========================================================= */

/* 受検中は結果画面をCSS側でも必ず隔離する。hidden属性に加えた二重ガード。 */
body.is-exam-active #result-screen {
  display: none !important;
}

@media (min-width: 1024px) {
  /* 右側は「設問→回答→タブ」を自然な文書フローにする。
     収まる通常時はスクロールなし、超過時だけこのパネル自体に縦スクロールが出る。 */
  #exam-screen .question-area {
    display: flex !important;
    flex-direction: column !important;
    align-content: initial !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    overscroll-behavior: contain !important;
    overflow-anchor: none !important;
    min-height: 0 !important;
    padding-right: 10px !important;
  }

  #exam-screen .right-prompt-slot {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  #exam-screen .choices-area {
    flex: 0 0 auto !important;
    display: grid !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
  }

  #exam-screen .question-tabs {
    flex: 0 0 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin-top: 6px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
  }

  /* タブ非表示の1問大問では、空の44pxを確保しない。 */
  #exam-screen .question-tabs[hidden] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    flex-basis: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* 選択状態の前後で寸法は絶対に変えない。 */
  #exam-screen .choice-item,
  #exam-screen .choice-item:hover,
  #exam-screen .choice-item.is-selected,
  #exam-screen .choice-item:has(input:checked) {
    border-width: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #exam-screen .choice-item {
    contain: layout paint;
  }

  #exam-screen .choice-item input[type="radio"],
  #exam-screen .choice-item input[type="checkbox"] {
    flex: 0 0 19px !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    margin: 1px 0 0 !important;
  }

  /* 最終推論のように8択かつ設問が長いときは、読みやすさを保ちつつ縦寸法を少し圧縮。 */
  #exam-screen.exam-ui-testcenter.many-choices .choice-item {
    min-height: 30px !important;
    padding: 3px 6px !important;
    font-size: 14.5px !important;
    line-height: 1.22 !important;
  }

  #exam-screen.exam-ui-testcenter.many-choices .right-prompt-slot {
    padding-bottom: 2px !important;
  }

  #exam-screen.exam-ui-testcenter.many-choices .question-text {
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
  }

  /* マトリクスは表自体が回答欄なのでflex化後も全面を使う。 */
  #exam-screen.answer-format-matrix .question-area {
    display: flex !important;
  }
  #exam-screen.answer-format-matrix .choices-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   Ver1.2 Phase11 - 本番準拠レイアウト安定化
   ・受検画面の縦スクロールを完全廃止
   ・右回答欄を拡大
   ・タブ大問は大問内で高さ・選択肢位置を固定
   ========================================================= */
@media (min-width: 1024px) {
  body.is-exam-active,
  body.is-exam-active .site-main,
  #exam-screen,
  #exam-screen .problem-card,
  #exam-screen .exam-content-grid,
  #exam-screen .common-area,
  #exam-screen .question-area,
  #exam-screen .choices-area {
    overflow: hidden !important;
  }

  #exam-screen {
    grid-template-rows: 26px minmax(0, 1fr) !important;
    padding-top: 3px !important;
  }

  #exam-screen .exam-header {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 0 2px !important;
  }

  #exam-screen .group-number {
    font-size: 12px !important;
  }

  #exam-screen .timer {
    height: 23px !important;
    min-height: 23px !important;
    min-width: 103px !important;
    padding: 1px 6px !important;
    font-size: 10px !important;
  }

  #exam-screen #timer-text {
    min-width: 43px !important;
    font-size: 15px !important;
  }

  /* 標準は50:50。短いヘッダーで得た縦幅と合わせ、回答側を十分広く取る。 */
  #exam-screen .exam-content-grid,
  #exam-screen.layout-compact .exam-content-grid,
  #exam-screen.layout-standard .exam-content-grid,
  #exam-screen.layout-matrix .exam-content-grid {
    grid-template-columns: minmax(0, 50fr) minmax(500px, 50fr) !important;
    gap: 18px !important;
  }

  #exam-screen.layout-image .exam-content-grid {
    grid-template-columns: minmax(0, 52fr) minmax(500px, 48fr) !important;
  }

  #exam-screen.layout-long-text .exam-content-grid {
    grid-template-columns: minmax(0, 52fr) minmax(500px, 48fr) !important;
  }

  /* 右パネルは固定3段。小問切替ではこの行サイズを再計算しない。 */
  #exam-screen .question-area {
    display: grid !important;
    grid-template-rows: var(--prompt-zone-height, 90px) minmax(0, 1fr) 44px !important;
    min-height: 0 !important;
    padding: 10px 14px 0 !important;
    scrollbar-gutter: auto !important;
  }

  #exam-screen.no-shared-material .question-area {
    grid-template-rows: 0 minmax(0, 1fr) 44px !important;
  }

  #exam-screen .right-prompt-slot {
    min-height: 0 !important;
    height: 100% !important;
    padding-bottom: 4px !important;
    overflow: hidden !important;
  }

  #exam-screen .question-prompt,
  #exam-screen .question-text {
    max-height: 100% !important;
    overflow: hidden !important;
  }

  #exam-screen .choices-area {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(var(--choice-row-count, 1), minmax(0, 1fr)) !important;
    grid-auto-rows: unset !important;
    gap: 2px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 2px 0 !important;
    align-content: stretch !important;
  }

  #exam-screen .choice-item {
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: 2px 5px !important;
    margin: 0 !important;
    line-height: 1.18 !important;
    align-items: center !important;
  }

  #exam-screen.many-choices .choice-item {
    font-size: 14px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }

  #exam-screen .question-tabs,
  #exam-screen .question-tabs[hidden] {
    grid-row: 3 !important;
    align-self: end !important;
    position: static !important;
    flex: none !important;
    width: calc(100% + 28px) !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 -14px !important;
    padding: 5px 14px 0 !important;
  }

  #exam-screen .question-tabs[hidden] {
    visibility: hidden !important;
    display: flex !important;
  }

  /* 数値入力も右欄の上端から自然に表示し、無駄な大空白を作らない。 */
  #exam-screen.answer-format-numeric .choices-area {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 10px !important;
  }

  /* マトリクスは右欄全面を使う。 */
  #exam-screen.answer-format-matrix .question-area {
    grid-template-rows: minmax(0, 1fr) 44px !important;
  }
  #exam-screen.answer-format-matrix .choices-area {
    grid-row: 1 !important;
    display: block !important;
    height: 100% !important;
  }
  #exam-screen.answer-format-matrix .question-tabs {
    grid-row: 2 !important;
  }
}


/* =========================================================
   Ver1.2 Phase12 - 実Phase11ベースの最終推論見切れ修正
   ========================================================= */
@media (min-width: 1024px) {
  /* 8択大問でも設問文を最低116px確保。右欄全体のスクロールは使わない。 */
  #exam-screen.exam-ui-testcenter.many-choices .right-prompt-slot,
  #exam-screen.exam-ui-testcenter.many-choices .question-prompt {
    min-height: var(--prompt-zone-height, 116px) !important;
  }
  #exam-screen.exam-ui-testcenter.many-choices .question-text {
    font-size: 14px !important;
    line-height: 1.28 !important;
    margin: 0 !important;
  }
  #exam-screen.exam-ui-testcenter.many-choices .choice-item {
    font-size: 13.8px !important;
    line-height: 1.16 !important;
  }
}

/* =========================================================
   Ver1.2 Phase12.1 - WEBテスティング非言語・推論 左欄の見切れ修正
   ========================================================= */
@media (min-width: 1024px) {
  /* WEBテスティングで共通条件文がある問題は、左端に安全余白を確保する。
     受検画面全体の横幅や右回答パネルの幅は変えない。 */
  #exam-screen.exam-ui-web.has-shared-material .common-area {
    padding-left: 18px !important;
    padding-right: 10px !important;
  }

  #exam-screen.exam-ui-web.has-shared-material .common-text {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   Ver1.2 Phase12.3 - WEBテスティング数値入力のフォーカスリング補正
   ========================================================= */
@media (min-width: 1024px) {
  /* フォーカス時の水色リングが左端でクリップされないよう安全余白を確保。 */
  #exam-screen.answer-format-numeric .answer-input-wrapper {
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  /* 外周リングは位置を動かさず、入力欄の実寸を維持する。 */
  #exam-screen.answer-format-numeric .answer-input:focus {
    outline-offset: 2px !important;
  }
}

/* =========================================================
   Ver1.2 Phase12.4 - 読みやすさ・タイマー整列・本番風経過ゲージ
   ========================================================= */
@media (min-width: 1024px) {
  /* 本文は大きさを変えず、役割ごとに行間だけ最適化する。 */
  #exam-screen .common-text {
    line-height: 1.52 !important;
  }

  #exam-screen .question-text {
    line-height: 1.43 !important;
  }

  #exam-screen .choice-item,
  #exam-screen .matrix-choice-text {
    line-height: 1.35 !important;
  }

  /* 残り時間を枠の上下中央へ。 */
  #exam-screen .timer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }

  #exam-screen #timer-text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
}

/* 下部の回答時間ゲージ（本番風の区切り表示）:
   全区間は淡い色で常時表示し、経過した部分だけを左から順番に濃色へ置き換える。
   濃色バー自体は縮小せず、全幅の配色をクリップして見せることで、
   緑・黄・橙・赤の境界位置が常に 50% / 70% / 90% に固定される。 */
.bottom-timer {
  position: relative !important;
  height: 10px !important;
  overflow: hidden !important;
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(5% - 4px), #ffffff calc(5% - 4px) 5%),
    linear-gradient(to right,
      #dcefe3 0%, #dcefe3 50%,
      #fff2bf 50%, #fff2bf 70%,
      #fde2c8 70%, #fde2c8 90%,
      #f7d5d5 90%, #f7d5d5 100%) !important;
}

.bottom-timer-bar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  clip-path: inset(0 calc(100% - var(--elapsed-progress, 0%)) 0 0);
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(5% - 4px), #ffffff calc(5% - 4px) 5%),
    linear-gradient(to right,
      #39a96b 0%, #39a96b 50%,
      #e0bd22 50%, #e0bd22 70%,
      #e8832f 70%, #e8832f 90%,
      #d64545 90%, #d64545 100%) !important;
  transition: clip-path .25s linear !important;
  will-change: clip-path;
}

/* 旧来の現在色クラスは、区間配色を上書きしない。 */
.bottom-timer.is-yellow .bottom-timer-bar,
.bottom-timer.is-orange .bottom-timer-bar,
.bottom-timer.is-red .bottom-timer-bar,
.bottom-timer.is-warning .bottom-timer-bar,
.bottom-timer.is-danger .bottom-timer-bar {
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(5% - 4px), #ffffff calc(5% - 4px) 5%),
    linear-gradient(to right,
      #39a96b 0%, #39a96b 50%,
      #e0bd22 50%, #e0bd22 70%,
      #e8832f 70%, #e8832f 90%,
      #d64545 90%, #d64545 100%) !important;
}


/* =========================================================
   Ver1.2 Phase12.6 - 回答時間ゲージを一本帯方式へ修正
   ========================================================= */
/* Phase12.5 の区切りブロック方式を完全に上書き。
   薄い4色帯を背景として固定し、同じ配色の濃色帯を
   左から右へクリップして表示する。 */
.bottom-timer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  display: block !important;
  z-index: 1000 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: linear-gradient(to right,
    #dcefe3 0%, #dcefe3 50%,
    #fff2bf 50%, #fff2bf 70%,
    #fde2c8 70%, #fde2c8 90%,
    #f7d5d5 90%, #f7d5d5 100%) !important;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .10) !important;
}

.bottom-timer[hidden] {
  display: none !important;
}

.bottom-timer-bar,
.bottom-timer.is-yellow .bottom-timer-bar,
.bottom-timer.is-orange .bottom-timer-bar,
.bottom-timer.is-red .bottom-timer-bar,
.bottom-timer.is-warning .bottom-timer-bar,
.bottom-timer.is-danger .bottom-timer-bar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 10px !important;
  max-height: 10px !important;
  transform: none !important;
  transform-origin: left center !important;
  background: linear-gradient(to right,
    #39a96b 0%, #39a96b 50%,
    #e0bd22 50%, #e0bd22 70%,
    #e8832f 70%, #e8832f 90%,
    #d64545 90%, #d64545 100%) !important;
  clip-path: inset(0 calc(100% - var(--elapsed-progress, 0%)) 0 0) !important;
  transition: clip-path .25s linear !important;
  will-change: clip-path !important;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-timer-bar {
    transition: none !important;
  }
}

/* =========================================================
   Ver1.2 Phase12.7 - 回答時間ゲージの配置を下部へ復帰
   =========================================================
   Phase12.6 では帯の見た目を固定するため .bottom-timer を fixed にしたため、
   exam-bottom-controls 内から外れて画面上端側に表示されるケースがあった。
   見た目（薄い4色背景＋濃色の経過帯）は維持し、配置だけ本来の下部コントロール内に戻す。 */
#exam-screen .exam-bottom-controls .bottom-timer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  margin: 0 0 8px !important;
  align-self: end !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10) !important;
}

#exam-screen .exam-bottom-controls .bottom-timer[hidden] {
  visibility: hidden !important;
  display: block !important;
}

/* =========================================================
   Ver1.2 Phase12.8 - 回答時間ゲージの配置修正
   =========================================================
   .bottom-timer-bar は absolute 配置のため、親 .bottom-timer を
   normal flow のまま containing block にする必要がある。
   position: static だと bar が exam-screen を基準に配置され、
   画面上部へ飛ぶため relative に固定する。 */
@media (min-width: 1024px) {
  #exam-screen .exam-bottom-controls .bottom-timer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    margin: 0 0 8px !important;
    align-self: end !important;
    overflow: hidden !important;
  }

  #exam-screen .exam-bottom-controls .bottom-timer-bar {
    position: absolute !important;
    inset: 0 !important;
  }
}


/* =========================================================
   Ver1.2 Phase14 - WEBテスティング言語 左側共通条件欄を拡張
   ・文完成/空欄補充などの長めの共通条件文の折返しを抑える
   ・右回答欄は最低500pxを維持
   ========================================================= */
@media (min-width: 1024px) {
  #exam-screen.exam-ui-web.exam-section-language.has-shared-material .exam-content-grid {
    grid-template-columns: minmax(0, 58fr) minmax(500px, 42fr) !important;
    gap: 16px !important;
  }

  #exam-screen.exam-ui-web.exam-section-language.has-shared-material .common-area {
    padding-left: 18px !important;
    padding-right: 14px !important;
  }
}

/* Ver1.2 Phase15: click targets, result hierarchy, selection accents */
#exam-screen .choice-item {
  cursor: pointer;
}
#exam-screen .choice-item:hover {
  background: #f2f7ff;
}
#exam-screen .matrix-choice-cell {
  cursor: pointer;
  transition: background-color .12s ease, box-shadow .12s ease;
}
#exam-screen .matrix-choice-cell:hover {
  background: #eef5ff;
}
#exam-screen .matrix-choice-cell:focus-within {
  box-shadow: inset 0 0 0 2px #5d8ed8;
}

.result-page-body .explanation-group {
  border: 1px solid #c9d8ee;
  border-radius: 12px;
  background: #f8fbff;
  overflow: hidden;
}
.result-page-body .explanation-group-heading {
  margin: 0;
  padding: 12px 18px;
  background: #dceaff;
  color: #173d72;
}
.result-page-body .explanation-common-text,
.result-page-body .explanation-question-text {
  margin: 12px 16px;
  padding: 14px 16px;
  border: 1px solid #d4e2f5;
  border-radius: 8px;
  background: #edf5ff;
}
.result-page-body .answer-summary {
  margin: 12px 16px;
  padding: 12px 16px;
  border: 1px solid #e0e5ec;
  border-radius: 8px;
  background: #fff;
}
.result-page-body .explanation-text {
  margin: 12px 16px 18px;
  padding: 14px 16px;
  border-left: 4px solid #4f7fc5;
  border-radius: 7px;
  background: #dfeeff;
}
.result-page-body .explanation-item {
  padding: 14px 0 4px;
  border-bottom: 1px solid #cbd9eb;
}
.result-page-body .judgment { margin-left: 16px; }
.result-next-actions {
  margin: 34px 0 18px;
  padding: 24px;
  border: 1px solid #b8cceb;
  border-radius: 12px;
  background: #eef5ff;
  text-align: center;
}
.result-next-actions h2 { margin-top: 0; color: #173d72; }
.result-top-button { display: inline-flex; width: auto; text-decoration: none; }
.result-page-body .survey-panel {
  background: #f8fbff;
  border-color: #cbd9eb;
}
.result-page-body .survey-button {
  background: #fff;
  color: #2457a6;
  border: 2px solid #5f86c4;
}
.result-page-body .survey-button:hover { background: #edf5ff; }

/* 模試選択：青系をベースに役割をアクセントで識別 */
.exam-type-card { border-left: 5px solid #3f6fb5; }
.exam-type-card.exam-type-spi-web-testing,
.exam-type-card[class*="web"] { border-left-color: #2b8ca8; }
.exam-mode-card.exam-mode-fixed { border-left: 5px solid #315fa8; }
.exam-mode-card.exam-mode-random { border-left: 5px solid #6b79c8; }
.exam-menu-card.exam-kind-fixed { border-left: 5px solid #315fa8; }
.exam-menu-card.exam-kind-random { border-left: 5px solid #6b79c8; }
.exam-menu-card.exam-plan-free::after {
  content: "FREE";
  position: absolute;
  top: 10px;
  right: 12px;
  color: #2d7657;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.exam-menu-card.exam-plan-premium { border-left-color: #a77b24; }


/* Ver1.2 Phase15.1: final UI refinements */
/* WEBテスティング言語の長文 textInput: focus ring clipping guard */
#exam-screen.answer-format-text .answer-input-wrapper {
  box-sizing: border-box;
  padding-left: 4px;
  padding-right: 4px;
}
#exam-screen.answer-format-text .answer-input:focus {
  outline: 3px solid rgba(35, 99, 190, .20);
  outline-offset: 0;
  border-color: #2363be;
}

/* 文の並べ替え：完答採点ルールを明示 */
.result-page-body .grouped-scoring-note {
  margin: 8px 16px 12px;
  padding: 9px 12px;
  border: 1px solid #b8cceb;
  border-radius: 7px;
  background: #f3f7fd;
  color: #31547d;
  font-size: .88rem;
  font-weight: 700;
}

/* 試験方式のアクセント色 */
.exam-type-card.exam-type-spi_testcenter { border-left-color: #3f6fb5; }
.exam-type-card.exam-type-spi_web { border-left-color: #2b8ca8; }
.exam-type-card.exam-type-tamatebako { border-left-color: #7a5bb4; }
.exam-type-card.exam-type-scoa { border-left-color: #334b73; }
.exam-menu-card.exam-type-SPI_TESTCENTER { --exam-type-accent: #3f6fb5; }
.exam-menu-card.exam-type-SPI_WEB { --exam-type-accent: #2b8ca8; }
.exam-menu-card.exam-type-TAMATEBAKO { --exam-type-accent: #7a5bb4; }
.exam-menu-card.exam-type-SCOA { --exam-type-accent: #334b73; }

/* 科目はカード全体を塗らず、ラベルで区別する */
.exam-menu-card.exam-subject-nonverbal .exam-type-label::after,
.exam-menu-card.exam-subject-verbal .exam-type-label::after {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  vertical-align: middle;
}
.exam-menu-card.exam-subject-nonverbal .exam-type-label::after {
  content: "非言語";
  background: #e3f4f1;
  color: #226c63;
}
.exam-menu-card.exam-subject-verbal .exam-type-label::after {
  content: "言語";
  background: #eee9fb;
  color: #5c4694;
}

/* Googleフォーム導線は設定前でも存在が分かる */
.result-page-body .survey-button.is-disabled {
  pointer-events: none;
  opacity: .58;
  cursor: default;
}

/* Phase16: 受検前確認 */
.precheck-view { max-width: 1040px; margin: 30px auto 0; }
.precheck-sections { display: grid; gap: 18px; margin-top: 22px; }
.precheck-card, .precheck-consent { background: #f7fbff; border: 1px solid #cfe3f6; border-radius: 14px; padding: 22px 24px; }
.precheck-card h3 { display:flex; align-items:center; gap:10px; margin:0 0 14px; color:#153b63; font-size:18px; }
.precheck-number { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#1769aa; color:#fff; font-size:14px; }
.precheck-card p { margin: 9px 0; line-height: 1.75; }
.precheck-list { margin:0; padding-left:1.4em; line-height:1.8; }
.precheck-note { padding:12px 14px; background:#fff; border-left:4px solid #66a7dc; border-radius:6px; font-size:14px; }
.attribute-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:14px; }
.attribute-grid label { display:grid; gap:8px; font-weight:700; color:#24445f; }
.attribute-grid select { width:100%; min-height:44px; border:1px solid #aac7df; border-radius:8px; background:#fff; padding:0 38px 0 12px; font:inherit; color:#172b3a; }
.attribute-grid select:focus { outline:3px solid rgba(46,142,209,.18); outline-offset:2px; border-color:#2e8ed1; }
.required-mark { display:inline-block; width:max-content; padding:2px 7px; border-radius:999px; background:#e9f3fb; color:#1769aa; font-size:11px; }
.precheck-consent { background:#fff; border-color:#b9d4ea; }
.consent-row { display:flex; align-items:flex-start; gap:12px; padding:12px 4px; cursor:pointer; line-height:1.6; }
.consent-row input { width:19px; height:19px; margin-top:3px; flex:0 0 auto; accent-color:#1769aa; }
.precheck-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }
#precheck-start:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.2); }
.start-screen.is-precheck .exam-notes { display:none; }
@media (max-width: 820px) { .attribute-grid { grid-template-columns:1fr; } .precheck-card,.precheck-consent{padding:18px;} }


/* Ver1.2 Phase15.2: 受検開始前は試験画面をレイアウトから完全に除外する */
body:not(.is-exam-active) #exam-screen { display:none !important; width:0 !important; height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; }
body.is-exam-active #exam-screen:not([hidden]) { display:grid; width:100%; height:calc(100dvh - 10px); }


/* Phase18.1 final4: 動作環境と受検前注意事項を読みやすい縦並びで表示 */
.precheck-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.precheck-top-grid .precheck-card {
  height: 100%;
}
.precheck-notice-card {
  background: #f4f9ff;
  border-color: #9fc8eb;
}
.precheck-notice-card h3 {
  color: #0f4f83;
}
.precheck-notice-card .precheck-list li::marker {
  color: #1769aa;
}
@media (max-width: 900px) {
  .precheck-top-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Phase18.3 - モバイル学習レイアウト / 電卓使用可
   PC・タブレット横向き（1024px以上）の本番再現UIは変更しない。
   1023px以下のみ、縦1カラムで最後まで受検可能な学習向けUIに切替。
   ========================================================= */
.exam-meta-list li.is-calculator,
.precheck-feature-badge {
  background: #fff3cf;
  color: #745000;
  border: 1px solid #e6c96f;
  font-weight: 800;
}
.precheck-feature-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
}
.precheck-feature-badge[hidden] { display: none !important; }

@media (max-width: 1023px) {
  /* 小型画面は「壊れたPC版」ではなく、明示的な学習向け1カラムUIにする。 */
  body.is-exam-active {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f5f8fc !important;
  }

  body.is-exam-active::before {
    content: "学習向けレイアウトで表示中。本番に近い環境はPCまたはタブレット横向きを推奨します。" !important;
    position: fixed !important;
    z-index: 1200 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 5px 10px !important;
    background: #fff4d6 !important;
    color: #6b4a00 !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.is-exam-active .site-main {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: 31px 8px 20px !important;
    overflow: visible !important;
  }

  body.is-exam-active #exam-screen:not([hidden]) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 31px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #exam-screen .exam-header {
    position: sticky !important;
    z-index: 50 !important;
    top: 31px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 6px 8px !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 2px 8px rgba(35,70,110,.08) !important;
  }

  #exam-screen .exam-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #exam-screen .group-number,
  #exam-screen .progress-text { font-size: 11px !important; }
  #exam-screen .timer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
  }
  #exam-screen #timer-text { font-size: 14px !important; line-height: 1 !important; }

  #exam-screen .problem-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  #exam-screen .exam-content-grid,
  #exam-screen.layout-compact .exam-content-grid,
  #exam-screen.layout-standard .exam-content-grid,
  #exam-screen.layout-image .exam-content-grid,
  #exam-screen.layout-long-text .exam-content-grid,
  #exam-screen.layout-matrix .exam-content-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  #exam-screen .common-area,
  #exam-screen .question-area {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #exam-screen .common-area {
    padding: 14px 14px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  #exam-screen.no-shared-material .common-area:empty,
  #exam-screen.no-shared-material .common-area {
    min-height: 0 !important;
  }

  #exam-screen .common-text,
  #exam-screen .question-text {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  #exam-screen .question-image-area {
    width: 100% !important;
    margin: 10px 0 0 !important;
    overflow: hidden !important;
    text-align: center !important;
  }
  #exam-screen .question-image-area img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #exam-screen .question-area {
    padding: 12px 14px 10px !important;
  }
  #exam-screen .right-prompt-slot,
  #exam-screen .question-prompt {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    overflow: visible !important;
  }
  #exam-screen .question-label { margin: 0 0 6px !important; font-size: 15px !important; }

  #exam-screen .choices-area,
  #exam-screen.prompt-long .choices-area,
  #exam-screen.prompt-xlong .choices-area,
  #exam-screen.many-choices .choices-area {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 7px !important;
    padding: 2px 0 !important;
    overflow: visible !important;
    align-content: start !important;
  }

  #exam-screen .choice-item,
  #exam-screen.many-choices .choice-item,
  #exam-screen.prompt-long .choice-item,
  #exam-screen.prompt-xlong .choice-item {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }
  #exam-screen .choice-item input[type="radio"],
  #exam-screen .choice-item input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
    margin-top: 1px !important;
  }

  #exam-screen .question-tabs,
  #exam-screen .question-tabs[hidden] {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    padding: 9px 0 0 !important;
    gap: 6px !important;
    border-top: 1px solid #e4eaf0 !important;
  }
  #exam-screen .question-tabs[hidden] { display: none !important; }
  #exam-screen .question-tab { min-width: 42px !important; min-height: 38px !important; }

  /* 入力問題 */
  #exam-screen.answer-format-numeric .choices-area,
  #exam-screen.answer-format-text .choices-area {
    display: block !important;
    height: auto !important;
    padding: 5px 0 4px !important;
  }
  #exam-screen .answer-input-wrapper,
  #exam-screen.answer-format-numeric .answer-input-wrapper,
  #exam-screen.answer-format-text .answer-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  #exam-screen .answer-input { max-width: 100% !important; }

  /* マトリクスは表だけ横スクロールを許可。ページ全体は横スクロールさせない。 */
  #exam-screen.answer-format-matrix .question-area { display: block !important; }
  #exam-screen.answer-format-matrix .choices-area { display: block !important; height: auto !important; }
  #exam-screen .matrix-answer-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  #exam-screen .matrix-answer-table {
    width: max(100%, 520px) !important;
    min-width: 520px !important;
    table-layout: fixed !important;
    font-size: 13px !important;
  }
  #exam-screen .matrix-answer-table th,
  #exam-screen .matrix-answer-table td { padding: 7px 5px !important; }

  /* 下部操作はスマホでも常に使えるよう画面下に追従。 */
  #exam-screen .exam-bottom-controls {
    position: sticky !important;
    z-index: 60 !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 7px !important;
    margin: 12px 0 0 !important;
    padding: 8px 10px 9px !important;
    border-top: 1px solid #ccd8e5 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -3px 12px rgba(35,70,110,.08) !important;
  }
  #exam-screen .bottom-timer,
  #exam-screen .exam-bottom-controls .bottom-timer {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 9px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  #exam-screen .bottom-timer[hidden] { display: none !important; }
  #exam-screen .exam-buttons {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: stretch !important;
    margin: 0 !important;
  }
  #exam-screen .exam-buttons button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  #exam-screen .common-area,
  #exam-screen .question-area { padding-left: 11px !important; padding-right: 11px !important; }
  #exam-screen .common-text,
  #exam-screen .question-text { font-size: 14.5px !important; }
  #exam-screen .matrix-answer-table { min-width: 480px !important; width: 480px !important; }
  body.is-exam-active::before { font-size: 10.5px !important; }
}


/* =========================================================
   Phase18.3d - mobile question image fit
   スマホ・タブレット縦向きでは資料全体を画面幅に収める。
   拡大UIは使用しない。PC・タブレット横向きには影響させない。
   ========================================================= */
@media (max-width: 1023px) {
  #exam-screen .question-image-area {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    cursor: default !important;
  }
  #exam-screen .question-image-area img,
  #exam-screen #question-image {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* 小型画面でも電卓可バッジを省略しない。hidden属性だけを表示条件にする。 */
  .exam-meta-list li.is-calculator,
  .precheck-feature-badge:not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
  }
}

@media (max-width: 600px) {
  /* 結果・解説はスマホ幅をできるだけ使う。 */
  .result-page-body .site-main {
    width: calc(100% - 10px) !important;
    max-width: none !important;
    padding: 10px 0 28px !important;
  }
  .result-page-body .screen {
    padding: 16px 8px 24px !important;
    border-radius: 10px !important;
  }
  .result-page-body .explanation-group {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .result-page-body .explanation-group-heading {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .result-page-body .explanation-common-text,
  .result-page-body .explanation-question-text,
  .result-page-body .answer-summary,
  .result-page-body .explanation-text,
  .result-page-body .grouped-scoring-note {
    margin-left: 7px !important;
    margin-right: 7px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
  .result-page-body .explanation-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .result-page-body .judgment {
    margin-left: 7px !important;
  }
}

/* Phase18.4a: オフライン終了時の待機画面 */
.offline-completion-wait {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(239, 244, 250, 0.96);
}
.offline-completion-wait[hidden] { display: none !important; }
.offline-completion-card {
  width: min(560px, 100%);
  padding: 36px 32px;
  border: 1px solid #c9d5e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(20, 48, 84, 0.12);
  text-align: center;
}
.offline-completion-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e8f5ec;
  color: #237a3c;
  font-size: 30px;
  font-weight: 800;
}
.offline-completion-card h2 {
  margin: 0 0 16px;
  font-size: 1.55rem;
}
.offline-completion-message {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
}
.offline-completion-sub {
  margin: 0;
  color: #526274;
  line-height: 1.75;
}
.offline-completion-spinner {
  width: 30px;
  height: 30px;
  margin: 24px auto 0;
  border: 4px solid #dbe5f0;
  border-top-color: #2d5fad;
  border-radius: 50%;
  animation: offline-completion-spin 0.9s linear infinite;
}
@keyframes offline-completion-spin { to { transform: rotate(360deg); } }
body.is-offline-completion-wait { overflow: hidden !important; }
@media (max-width: 600px) {
  .offline-completion-wait { padding: 16px; }
  .offline-completion-card { padding: 28px 20px; border-radius: 14px; }
  .offline-completion-card h2 { font-size: 1.35rem; }
  .offline-completion-message { font-size: 1rem; }
}

/* Phase18.5a Noto Sans JP: Test Center nonverbal right-side readability */
@media (min-width: 1024px) {
  #exam-screen.exam-ui-testcenter:not(.exam-section-language) .question-area .question-text {
    font-size: 16px !important;
  }
}

/* Content protection: exam / explanation areas */
#exam-screen,
#result-screen {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#exam-screen img,
#result-screen img {
  -webkit-user-drag: none;
  user-drag: none;
}