@charset "UTF-8";
:root {font-family:"Yu Gothic","Meiryo",sans-serif;color:#e6ede6;background:#172a2d;font-size:14px}
:root {--red:#ad6a4f;--white:#fffefa;--gold:#a88948;--teal:#356e66}
* {box-sizing:border-box} body {margin:0;height:100vh;display:flex;flex-direction:column} button,select,input,textarea {font:inherit}
button,select {cursor:pointer} button {border:1px solid #83a99c;border-radius:4px;background:#284a47;color:#f1f6ec;padding:7px 12px}
button:hover {background:#38665d} button:disabled {opacity:.45;cursor:default} a {color:#b9dfcc}
:focus-visible {outline:3px solid #f2d67e;outline-offset:3px} [hidden] {display:none!important} h1,h2,h3,h4,p,figure {margin:0}
.game-work :focus-visible,dialog :focus-visible {outline-color:#8b4f00}
dialog a,.game-work a {color:#22584e;text-decoration:underline}
.game-header {height:58px;flex:none;display:flex;align-items:center;gap:20px;padding:0 24px;background:#102123;border-bottom:1px solid #4d746b}
.game-header h1 {font-size:20px;white-space:nowrap;color:#e3d5a9} .game-header p {flex:1;min-width:0;font-size:12px}
.game-header button {font-size:12px} .game-layout {flex:1;min-height:0;display:grid;grid-template-columns:230px minmax(440px,1fr) 280px;gap:12px;padding:12px}
.game-nav,.game-work,.game-inspector {background:#203b3b;border:1px solid #54796d;border-radius:6px;padding:16px;min-width:0}
.game-nav h2,.game-inspector h2 {font-size:16px;color:#e3d5a9;margin-bottom:15px} label {display:block}
.game-nav label,.game-inspector label {font-size:12px;color:#bfd1c4;margin-bottom:12px} select,input,textarea {color:#172e2b;background:#f5f5e8;border:1px solid #a7c1ad;border-radius:3px;padding:7px;max-width:100%}
.game-nav select,.game-inspector select {display:block;width:100%;margin-top:4px} .import-foundation-hint {margin-top:4px;font-size:11px;line-height:1.35;color:#e3d5a9} .key-hint {border-top:1px solid #4b6e65;padding-top:12px;font-size:11px;color:#aac2b5}
.game-work {display:flex;flex-direction:column;background:#f1f1e6;color:#213b38} .game-work>header {border-bottom:1px solid #bcccbf;padding-bottom:8px;margin-bottom:8px}
.game-work h2 {font-size:19px} #work-meta,.question-kind,.question-progress {font-size:11px;color:#56766c}
#quiz {min-height:0} .question-navigation {display:flex;align-items:end;gap:15px;margin-bottom:8px;font-size:11px}
#quiz:has(> .worksheet-study) {display:flex;flex:1;flex-direction:column}
#quiz:has(> .worksheet-study) .question-navigation {flex:none}
.worksheet-study {overflow:auto;min-height:0;padding:4px}
.worksheet-image {display:block;max-width:100%;height:auto;margin:8px auto;background:#fff}
.worksheet-review {padding-top:8px;margin-top:8px;border-top:1px solid #bcccbf}
.worksheet-teaching-notes {padding:10px 14px;border:1px solid #b9cbbd;border-radius:6px;background:#fffefa}
.worksheet-teaching-notes h4 {margin:9px 0 3px}
.question-navigation label {flex:1;min-width:0} .question-navigation select {display:block;width:100%;margin-top:3px}
.grade-quiz {padding:0} .grade-quiz fieldset,.written-review fieldset {border:0;padding:0;margin:0}
.grade-quiz legend,.question-title {font-size:17px;font-weight:bold;line-height:1.45;margin:5px 0 8px}
.grade-option {display:flex;gap:8px;align-items:flex-start;border:1px solid #c2d1c3;border-radius:3px;padding:6px 9px;margin:5px 0;background:white}
.grade-option:has(input:checked) {background:#d9eade;border-color:#447f70} .grade-option input {margin-top:4px}
.study-button {margin:7px 7px 0 0} .grade-result,.written-review {background:#dfeae0;border-left:3px solid #54877b;padding:8px 12px;margin-top:8px}
.grade-result h3,.written-review h3 {font-size:15px} .grade-result p,.written-review p {margin-top:4px;line-height:1.4}
.grade-result button,.written-review button {margin:5px 5px 0 0}.quiz-terms {display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:12px}
.quiz-terms button {padding:3px 7px;font-size:12px} .quiz-material {margin:3px 0}.quiz-material button {font-size:12px;padding:5px 9px}
.typed-label input {display:block;margin-top:4px;min-width:200px}.cloze-passage {line-height:2}.cloze-label {display:inline-block;font-size:11px}
.cloze-label input {width:110px;margin:0 3px}.written-label textarea {display:block;width:100%;height:68px;resize:none;margin-top:4px}
.rubric-point {display:flex;align-items:start;gap:6px;margin:3px 0;font-size:12px}.written-review fieldset {margin:3px 0}
.feedback-dialog .explanation-copy {white-space:pre-wrap; line-height:1.55}
.choice-review {margin-block:12px}
.option-reasons {padding-inline-start:1.55em}
.option-reasons li {margin-block:.5em; break-inside:avoid}
.choice-review-key {display:inline-block; margin-inline-start:.55em; color:#21594c; font-size:.8em}
.choice-review-missing {color:#52665d; font-size:.85em}
.choice-review-caution {padding:.45em .6em; border-left:3px solid #95601e; background:#fbecd8}
.feedback-dialog .explanation-sources {padding-left:1.25em}
.quiz-finish p {margin:8px 0}
.inspector-body {display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.5}.inspector-body h3 {font-size:16px}
.inspector-link {text-align:left;padding:5px 8px;font-size:12px}.inspector-image {width:100%;height:auto;max-height:280px;object-fit:contain;border-radius:4px}
.image-button {padding:5px;width:100%;background:#142a2a}.game-inspector p {line-height:1.5}.quiz-sources {font-size:12px;margin-top:5px}
dialog {width:min(850px,90vw);max-height:90vh;border:1px solid #83a99c;border-radius:6px;padding:20px;background:#f4f3e9;color:#203c37}
dialog::backdrop {background:#091616c9} dialog p {margin:10px 0} dialog button {margin-top:10px}.detail-image,.material-content img {display:block;max-width:100%;max-height:50vh;object-fit:contain;margin:auto}
.material-content table {border-collapse:collapse;width:100%}.material-content th,.material-content td {border:1px solid #a8beb0;padding:4px}.material-content figcaption {font-size:11px}
kbd {font-size:11px}@media(max-height:760px){.game-layout{padding:8px;gap:8px}.game-nav,.game-work,.game-inspector{padding:10px}.game-nav label{margin-bottom:8px}}

.game-layout {grid-template-rows:minmax(0,1fr)}
.game-nav,.game-work,.game-inspector {min-height:0}
.game-inspector {overflow:auto}
.inspector-stimulus {margin-bottom:10px;padding:8px;background:#172e2d;border:1px solid #4d746b;border-radius:4px}
.inspector-stimulus h3 {font-size:13px;color:#e3d5a9;margin-bottom:4px}
.inspector-stimulus p {font-size:12px;margin-bottom:6px}
.inspector-figure {margin:4px 0;text-align:center}
.inspector-figure figcaption {font-size:11px;color:#bfd1c4;margin-top:3px}
.inspector-origin-list {margin:0 0 8px;font-size:12px}
.inspector-origin-list dt {color:#aac2b5;font-weight:bold;margin-top:4px}
.inspector-origin-list dd {margin:1px 0 0 8px}
.quiz-inline-stimulus {margin:6px 0 10px;padding:10px 12px;background:#fffefa;border:1px solid #b9cbbd;border-radius:6px}
.quiz-inline-stimulus.is-blank-map {padding:6px;background:#fff;border-width:2px}
.quiz-stimulus-title {font-size:14px;color:#214b43;margin-bottom:4px}
.quiz-stimulus-text {font-size:12px;color:#35524c;margin-bottom:6px}
.quiz-stimulus-figure {margin:4px 0;text-align:center}
.quiz-inline-stimulus.is-blank-map .quiz-stimulus-figure {margin:0}
.quiz-stimulus-image {max-width:100%;max-height:310px;object-fit:contain;border-radius:4px}
.quiz-stimulus-image.is-blank-map-image {display:block;width:100%;max-height:min(62vh,580px);margin:0 auto;object-fit:contain}
.grade-quiz.is-blank-map .question-title {font-size:15px;margin:4px 0 6px}
.grade-quiz.is-blank-map .cloze-passage {line-height:1.7}
.explanation-visual-card {margin:10px 0;padding:10px;background:#f7f9f4;border:1px solid #a8bfb2;border-radius:8px}
.explanation-diagram-svg {display:block;width:100%;height:auto;max-height:420px}
.explanation-visual-points {margin:8px 0 0;padding-left:1.4em;font-size:13px;line-height:1.5;color:#1e3a35}
.explanation-visual-summary {margin:6px 0 0;font-size:13px;color:#23463f;font-weight:bold}
.explanation-visual-media {margin:8px 0 0;display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px;align-items:center;padding-top:8px;border-top:1px solid #d4e0d8}
.explanation-visual-media img {width:100%;max-height:120px;object-fit:contain;border-radius:4px;background:#fff}
.explanation-visual-media figcaption {font-size:12px;line-height:1.45;color:#2d4a43}
.inspector-search {margin-top:10px}.inspector-search input {width:100%;display:block;margin-top:4px}
.inspector-table {border-collapse:collapse;width:100%;font-size:11px}.inspector-table th,.inspector-table td {border:1px solid #78998d;padding:3px}
.question-material-hint {font-size:11px;color:#56766c}
.written-detail {width:min(700px,90vw)}
.detail-visual .sequence {min-height:0;padding:14px;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-visual .sequence.sequence-flow {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.detail-visual .sequence-item,.detail-visual .sequence-flow .sequence-item {display:block;padding:10px}
.detail-visual .sequence.sequence-flow .sequence-item {display:block;padding:10px}
.detail-visual .sequence-number {font-size:16px;margin-bottom:5px}
.detail-visual .sequence-item h3 {font-size:15px;line-height:1.4;margin-bottom:5px}
.detail-visual .sequence-item p {font-size:13px;line-height:1.5}
.detail-visual svg {max-height:42vh}
.detail-visual .map-legend {padding:8px}
.collection-choice {display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap}
.collection-choice select {padding:5px;font-size:12px;width:140px}
.order-events {padding-left:20px;margin:10px 0;font-size:14px;line-height:1.7}
.order-fields {display:flex;gap:10px!important}.order-fields label {font-size:12px}.order-fields select {display:block;margin-top:4px}
.order-status,.writing-count,.exam-focus {font-size:11px;color:#56766c;margin:4px 0}
.detail-control {display:inline-block}.feedback-dialog h4 {margin:14px 0 5px}.reasoning-steps li {margin:8px 0;line-height:1.6}
.official-exam-dialog select {margin:8px 0;min-width:180px}.external-document {display:inline-block;padding:9px 12px;margin:8px 8px 8px 0;border:1px solid #83a99c;border-radius:4px}
.official-links p {font-size:15px}.official-exams {margin-top:12px}
.global-search-control {margin-top:8px}.global-search-dialog {width:min(800px,90vw)}
.global-search-dialog form {display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:12px}
.global-search-dialog label:first-child,.global-search-dialog label:has(select:disabled),.global-search-dialog .global-search-status {grid-column:1/-1}
.global-search-dialog label:has(select:not([id])) {min-width:0}
.global-search-dialog input,.global-search-dialog select {display:block;width:100%;margin-top:5px}
.global-search-dialog button {justify-self:start}.global-search-dialog label:has(select:enabled) {grid-column:1/-1}
.game-nav dialog h2,.game-inspector dialog h2,.game-work dialog h2,
.game-nav dialog label,.game-inspector dialog label,.game-work dialog label {color:#203c37}

/* インライン用語リンク・問題の重要用語バー・包括的用語集ダイアログ */
.glossary-inline-link {
  display: inline;
  padding: 0 2px;
  margin: 0 1px;
  border: none;
  border-bottom: 1.5px dashed #2b6e5e;
  border-radius: 2px;
  background: rgba(53, 110, 102, 0.09);
  color: #16493e;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  cursor: pointer;
  vertical-align: baseline;
}
.glossary-inline-link:hover {
  background: rgba(53, 110, 102, 0.22);
  border-bottom-style: solid;
  color: #0d332b;
}
.glossary-question-bar {
  margin: 10px 0;
  padding: 8px 12px;
  background: #eaf1ec;
  border: 1px solid #9cb8aa;
  border-radius: 6px;
}
.glossary-question-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.glossary-question-bar-title {
  font-size: 12px;
  color: #1f473e;
}
.glossary-open-all-btn {
  padding: 3px 9px;
  font-size: 11px;
  background: #284a47;
  color: #f1f6ec;
}
.glossary-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.glossary-term-chip {
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #1c453c;
  border: 1px solid #759d8e;
  font-weight: 600;
  margin: 0 !important;
}
.glossary-term-chip:hover {
  background: #284a47;
  color: #ffffff;
}

/* ホバー・フォーカス時の用語解説ポップアップ（ツールチップカード） */
.glossary-hover-popover {
  position: fixed;
  z-index: 99999;
  width: min(390px, 90vw);
  max-height: min(480px, calc(100vh - 24px));
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid #2b6356;
  background: #fdfdfb;
  color: #1c332f;
  box-shadow: 0 10px 28px rgba(10, 28, 25, 0.28);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: auto;
}
.glossary-popover-header {
  position: sticky;
  top: -12px;
  background: #fdfdfb;
  z-index: 2;
  margin-top: -4px;
  padding-top: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #d5e2da;
  padding-bottom: 6px;
  margin-bottom: 7px;
}
.glossary-popover-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.glossary-popover-jump-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  background: #235c4e;
  border: 1px solid #1a493e;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.glossary-popover-jump-btn:hover {
  background: #174238;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.glossary-popover-jump-btn:active {
  background: #103028;
  transform: translateY(0);
}
.glossary-popover-jump-btn:focus-visible {
  outline: 2px solid #38a169;
  outline-offset: 1px;
}
.glossary-popover-title {
  font-size: 15px;
  color: #14362f;
}
.glossary-popover-summary {
  margin: 4px 0 !important;
  font-size: 13px;
  line-height: 1.55;
  color: #1c332f;
}
.glossary-popover-reason {
  margin: 5px 0 0 !important;
  font-size: 12px;
  line-height: 1.5;
  color: #2c4c45;
}
.glossary-popover-pitfall {
  margin: 6px 0 0 !important;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.45;
  background: #fdf2e4;
  border-left: 3px solid #b86523;
  border-radius: 4px;
  color: #4d2e11;
}
.glossary-popover-funfact {
  margin: 6px 0 0 !important;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.45;
  background: #eef4fa;
  border-left: 3px solid #366796;
  border-radius: 4px;
  color: #1c3954;
}
.glossary-popover-footer {
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px dashed #cedcd3;
  text-align: right;
}
.glossary-popover-footer-btn,
.glossary-popover-hint {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #235c4e;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-align: right;
  transition: color 0.15s ease;
}
.glossary-popover-footer-btn:hover,
.glossary-popover-hint:hover {
  color: #14362f;
  text-decoration-style: solid;
}

/* 過去問類題出典表示（右カラム） */
.inspector-related-exams {
  margin: 10px 0;
  padding: 8px;
  background: #172e2d;
  border: 1px solid #4d746b;
  border-radius: 5px;
}
.inspector-related-exams h3 {
  font-size: 12px;
  color: #e3d5a9;
  margin-bottom: 6px;
}
.inspector-exam-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.inspector-exam-jump-btn {
  padding: 4px 8px;
  font-size: 11px;
  background: #234340;
  border: 1px solid #759d8e;
  border-radius: 4px;
  color: #e9f3ee;
  text-align: left;
}
.inspector-exam-jump-btn:hover {
  background: #35665e;
}

/* 包括的用語集モーダル */
.glossary-dialog {
  width: min(1080px, 95vw);
  height: min(820px, 92vh);
  max-height: 92vh;
  padding: 0;
  border: 2px solid #54796d;
  border-radius: 10px;
  background: #f4f5ee;
  color: #1d3531;
}
.glossary-dialog[open] {
  display: flex;
  flex-direction: column;
}
.glossary-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #172e2d;
  color: #f1f6ec;
  border-bottom: 1px solid #4d746b;
}
.glossary-modal-title {
  font-size: 17px;
  color: #e3d5a9;
}
.glossary-modal-subtitle {
  font-size: 11px;
  color: #bfd1c4;
  margin: 2px 0 0 !important;
}
.glossary-modal-close {
  margin: 0 !important;
  padding: 6px 12px;
  font-size: 12px;
}
.glossary-filter-bar {
  padding: 10px 18px;
  background: #e6ece6;
  border-bottom: 1px solid #bdcdc2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.glossary-discipline-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.glossary-tab {
  margin: 0 !important;
  padding: 5px 12px;
  font-size: 12px;
  background: #ffffff;
  color: #203c37;
  border: 1px solid #88a79b;
  border-radius: 999px;
}
.glossary-tab.is-active {
  background: #234742;
  color: #ffffff;
  border-color: #17332f;
  font-weight: bold;
}
.glossary-controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 10px;
}
.glossary-search-input, .glossary-section-select {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #88a79b;
  border-radius: 5px;
}
.glossary-modal-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
}
.glossary-list-pane {
  border-right: 1px solid #c5d4c9;
  background: #ebf0eb;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.glossary-list-count {
  margin: 0 !important;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: bold;
  color: #2c4c45;
  border-bottom: 1px solid #d2dfd6;
}
.glossary-term-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
.glossary-term-list-item {
  margin-bottom: 3px;
}
.glossary-term-item-btn {
  margin: 0 !important;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: transparent;
  color: #1d3531;
  border: 1px solid transparent;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.glossary-term-item-btn:hover {
  background: #dce7df;
}
.glossary-term-item-btn.is-selected {
  background: #234742;
  color: #ffffff;
  border-color: #16302d;
}
.glossary-term-item-name {
  font-size: 13px;
  font-weight: bold;
}
.glossary-term-item-meta {
  font-size: 11px;
  opacity: 0.82;
}
.glossary-term-list-more {
  padding: 8px;
  font-size: 11px;
  color: #4a665f;
  text-align: center;
}
.glossary-detail-pane {
  padding: 18px 22px;
  overflow-y: auto;
  min-height: 0;
  background: #fbfbf7;
}
.glossary-back-btn {
  margin: 0 0 10px !important;
  padding: 4px 10px;
  font-size: 12px;
  background: #dfe9e2;
  color: #1f423b;
  border: 1px solid #8eab9e;
}
.glossary-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.glossary-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: #e2ebe5;
  color: #244740;
  font-weight: 600;
}
.glossary-badge.is-history { background: #f2e2ce; color: #5c3818; }
.glossary-badge.is-geography { background: #d6eadf; color: #194d37; }
.glossary-badge.is-science { background: #dce8f5; color: #1d3f66; }
.glossary-badge.is-mathematics { background: #eadcf2; color: #47255c; }
.glossary-badge.is-count { background: #fff3cd; color: #664d03; }
.glossary-detail-title {
  font-size: 22px;
  color: #15332d;
  border-bottom: 2px solid #88a79b;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.glossary-detail-section {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: #f2f6f3;
  border-left: 4px solid #447a6d;
}
.glossary-detail-section.is-summary {
  background: #e9f3ee;
  border-left-color: #235c4e;
}
.glossary-detail-section.is-pitfall {
  background: #fdf2e4;
  border-left-color: #b86523;
}
.glossary-detail-section.is-funfact {
  background: #eef4fa;
  border-left-color: #366796;
}
.glossary-detail-section.is-question {
  background: #f6f4e8;
  border-left-color: #8c732b;
}
.glossary-section-heading {
  font-size: 13px;
  color: #214a41;
  margin-bottom: 4px;
}
.glossary-section-text {
  margin: 4px 0 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: #1c332f;
}
.glossary-exam-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.glossary-exam-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid #9cb5a8;
  border-radius: 4px;
  color: #244740;
}
.glossary-concept-link-wrap {
  margin-top: 14px !important;
  font-size: 13px;
  font-weight: bold;
}
@media (max-width: 780px) {
  .glossary-controls-row { grid-template-columns: 1fr; }
  .glossary-modal-body { grid-template-columns: 1fr; grid-template-rows: 220px minmax(0, 1fr); }
}

/* Explanation Diagram Cards (Auto-wrapping HTML/Flex/Grid - never clips text) */
.explanation-diagram-card {
  margin: 8px 0 12px;
  border: 2px solid #9ab4a6;
  border-radius: 10px;
  background: #f7f9f4;
  overflow: hidden;
  color: #172e2b;
}
.explanation-diagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: #2c5e55;
  color: #fffef7;
}
.explanation-diagram-title {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.35;
}
.explanation-diagram-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: bold;
  background: #dfece4;
  color: #1d473f;
  border-radius: 999px;
  white-space: nowrap;
}
.explanation-diagram-grid {
  display: grid;
  gap: 12px;
  padding: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.explanation-diagram-grid.is-count-2 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.explanation-diagram-node {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  background: #ffffff;
  border: 1.5px solid #b8cbbd;
  border-top: 6px solid #2f6b5f;
  border-radius: 8px;
  min-width: 0;
}
.explanation-diagram-node.is-accent-0 { border-top-color: #2f6b5f; background: #ffffff; }
.explanation-diagram-node.is-accent-1 { border-top-color: #9e6b30; background: #fffdf8; }
.explanation-diagram-node.is-accent-2 { border-top-color: #8f4939; background: #fffaf7; }
.explanation-diagram-node.is-accent-3 { border-top-color: #3b5c76; background: #f8fbff; }
.explanation-diagram-node-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #d8e2da;
}
.explanation-diagram-node-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f6b5f;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.explanation-diagram-node.is-accent-1 .explanation-diagram-node-num { background: #9e6b30; }
.explanation-diagram-node.is-accent-2 .explanation-diagram-node-num { background: #8f4939; }
.explanation-diagram-node.is-accent-3 .explanation-diagram-node-num { background: #3b5c76; }
.explanation-diagram-node-label {
  margin: 0 !important;
  font-size: 14px;
  font-weight: bold;
  color: #172e2b;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.explanation-diagram-node-detail {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.55;
  color: #263e3a;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Structured Math Problem & Cropped Figures */
.math-structured-problem {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 12px;
}
.math-instructions-box {
  padding: 10px 14px;
  background: #edf5f0;
  border: 1px solid #9ab8a9;
  border-left: 5px solid #2c6658;
  border-radius: 6px;
  color: #17302b;
}
.math-instructions-heading {
  display: block;
  font-size: 13px;
  color: #1f4d42;
  margin-bottom: 4px;
}
.math-instructions-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.math-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.math-section-heading {
  grid-column: 1 / -1;
  margin: 6px 0 2px !important;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  background: #28544b;
  color: #fffef8;
  border-radius: 5px;
}
.math-item-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #bdcfc3;
  border-radius: 7px;
  color: #172e2b;
  box-shadow: 0 1px 2px rgba(15, 35, 30, 0.05);
}
.math-item-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.math-item-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 5px;
  background: #2f665a;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}
.math-item-prompt {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #172e2b;
}
.math-cropped-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  background: #fafcf9;
  border: 1px dashed #c2d4c8;
  border-radius: 6px;
}
.math-cropped-figure-card {
  margin: 0;
  text-align: center;
}
.math-cropped-figure {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}
.math-item-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid #e6eee9;
  font-size: 12px;
  color: #35574e;
}
.math-item-input-label {
  flex: none;
  font-weight: 600;
}
.math-item-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid #9ab4a7;
  border-radius: 4px;
  background: #fdfefc;
  color: #172e2b;
}
.worksheet-original-toggle, .math-graph-pad-toggle {
  margin: 6px 0;
  border: 1px solid #b5c9bd;
  border-radius: 6px;
  background: #f4f8f5;
  padding: 6px 10px;
}
.worksheet-original-summary, .math-graph-pad-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #1f4f44;
  padding: 2px 0;
}
.math-structured-answer {
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: #f4f9f5;
  border: 1px solid #9ebbaf;
  border-left: 5px solid #2b6658;
  border-radius: 6px;
  color: #172e2b;
}
.math-structured-answer-heading {
  margin: 0 0 6px !important;
  font-size: 14px;
  color: #1d4c41;
}
.math-structured-answer-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 280px;
  overflow-y: auto;
}
.math-answer-line {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.45;
}
.math-answer-line.is-highlight {
  margin-top: 4px !important;
  padding: 3px 8px;
  background: #e1efe7;
  border-radius: 4px;
  font-weight: bold;
  color: #163d34;
}

/* Interactive Coordinate Graph Pad */
.math-graph-pad {
  padding: 12px 14px;
  background: #f8fbf9;
  border: 2px solid #7c9e90;
  border-radius: 8px;
  color: #172e2b;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.math-graph-pad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.math-graph-pad-title {
  margin: 0 !important;
  font-size: 14px;
  color: #18453b;
}
.math-graph-pad-coord {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  background: #e3eee8;
  border-radius: 4px;
  color: #1c3d35;
}
.math-graph-pad-toolbar, .math-graph-actions-bar, .math-graph-endpoint-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.math-graph-mode-btn, .math-graph-action-btn, .math-graph-endpoint-btn {
  margin: 0 !important;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid #7d9e90;
  background: #ffffff;
  color: #1b3d35;
  cursor: pointer;
}
.math-graph-mode-btn.is-active {
  background: #23574c;
  color: #ffffff;
  border-color: #163b33;
  font-weight: bold;
}
.math-graph-action-btn.is-reference-toggle {
  background: #fff6e0;
  border-color: #c29138;
  color: #5c3f09;
  font-weight: bold;
}
.math-graph-action-btn.is-reference-toggle[aria-pressed="true"] {
  background: #b85d19;
  color: #ffffff;
  border-color: #8f440d;
}
.math-graph-endpoint-hint {
  font-size: 12px;
  font-weight: bold;
  color: #295248;
}
.math-graph-pad-body {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
}
.math-graph-svg {
  width: min(100%, 400px);
  height: auto;
  background: #ffffff;
  border: 1px solid #9ab3a8;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.math-graph-legend {
  min-width: 170px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #b6cabf;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}
.math-graph-legend-title {
  font-size: 12px;
  color: #1d473e;
  border-bottom: 1px solid #dce6e1;
  padding-bottom: 3px;
}
.math-graph-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.math-graph-legend-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  flex: none;
}

/* パンくずメニュー・戻る／進む・元の演習導線へ戻るバー */
.study-breadcrumb-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #e3ece6;
  border: 1px solid #a6bfb1;
  border-radius: 6px;
}
.study-breadcrumb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.study-history-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.study-history-btn {
  margin: 0 !important;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: #234742;
  color: #f1f6ec;
  border: 1px solid #4d746b;
}
.study-history-btn:hover:not(:disabled) {
  background: #33635b;
}
.study-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  font-size: 12px;
  min-width: 0;
}
.study-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.study-breadcrumb-link {
  margin: 0 !important;
  padding: 2px 6px;
  font-size: 11.5px;
  background: #ffffff;
  color: #1c473e;
  border: 1px solid #96b3a5;
  border-radius: 4px;
  font-weight: 600;
}
.study-breadcrumb-link:hover {
  background: #28524a;
  color: #ffffff;
}
.study-breadcrumb-current {
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: bold;
  color: #15362f;
  background: #d2e2d8;
  border-radius: 4px;
}
.study-breadcrumb-sep {
  color: #5c7a6f;
  font-weight: bold;
  padding: 0 1px;
}
.study-origin-return-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: #fff5df;
  border: 1.5px solid #c98a2c;
  border-left: 5px solid #b86b11;
  border-radius: 5px;
  color: #4a2c06;
}
.study-origin-return-text {
  font-size: 12px;
  font-weight: 600;
}
.study-origin-return-btn {
  margin: 0 !important;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: bold;
  background: #b85d14;
  color: #ffffff;
  border: 1px solid #8c4308;
  border-radius: 4px;
}
.study-origin-return-btn:hover {
  background: #96490b;
}
.inspector-return-origin-btn {
  display: block;
  width: 100%;
  margin: 0 0 10px !important;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: bold;
  background: #b85d14;
  color: #ffffff;
  border: 1px solid #e3a857;
  border-radius: 5px;
  text-align: center;
}
.inspector-return-origin-btn:hover {
  background: #d16c1b;
}

/* 同一論点のバリエーション切替バー */
.question-variation-bar {
  margin: 6px 0 8px;
  padding: 7px 10px;
  background: #e6f0eb;
  border: 1px solid #96b5a6;
  border-left: 4px solid #2b6658;
  border-radius: 6px;
}
.question-variation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.question-variation-title {
  font-size: 11.5px;
  color: #1c473e;
}
.question-variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.question-variation-pill {
  margin: 0 !important;
  padding: 3px 9px;
  font-size: 11.5px;
  border-radius: 999px;
  background: #ffffff;
  color: #1e463d;
  border: 1px solid #7fa393;
}
.question-variation-pill:hover {
  background: #d3e5dc;
}
.question-variation-pill.is-answered {
  background: #e8f4ec;
  border-color: #4d8a72;
}
.question-variation-pill.is-active {
  background: #235449;
  color: #ffffff;
  border-color: #15362f;
  font-weight: bold;
}

/* 基礎確認セットのランダム再選出コントロール */
.import-foundation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.import-foundation-shuffle-btn {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: bold;
  background: #2b5d53;
  color: #f4faf6;
  border: 1px solid #8eb8a8;
}
.import-foundation-shuffle-btn:hover:not(:disabled) {
  background: #3a7569;
}
.import-foundation-fixed-btn {
  padding: 5px 8px;
  font-size: 11px;
  background: #1d3635;
  color: #d6e6dc;
  border: 1px solid #6b9183;
}
.question-reshuffle-btn {
  margin: 0 !important;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: bold;
  background: #28564c;
  color: #f5fbf8;
  border: 1px solid #759f90;
  border-radius: 4px;
  white-space: nowrap;
}
.question-reshuffle-btn:hover {
  background: #377064;
}

/* ==================== 英語構文トレーナー（品詞色分け・薬袋式フレーム） ==================== */
.glossary-badge.is-syntax { background: #fce8f1; color: #8c144e; }
.glossary-badge.is-english { background: #e3f0fc; color: #154c8a; }

.syntax-mode-pills {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.syntax-mode-pill {
  margin: 0 !important;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: bold;
  background: #183030;
  color: #dbe9e1;
  border: 1px solid #598074;
  border-radius: 5px;
}
.syntax-mode-pill.is-active {
  background: #f0d180;
  color: #172e2b;
  border-color: #fff1bd;
}

.syntax-pos-legend-nav {
  margin: 10px 0;
  padding: 8px;
  background: #162b2b;
  border: 1px solid #4a6f64;
  border-radius: 5px;
}
.syntax-pos-legend-nav h3 {
  font-size: 11.5px;
  color: #e3d5a9;
  margin-bottom: 6px;
}
.syntax-legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.syntax-legend-chip {
  margin: 0 !important;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 4px;
  border: 1.5px solid transparent;
}
.syntax-legend-chip.is-active {
  outline: 2px solid #f5d77f;
  transform: scale(1.04);
}

/* 7品詞のカラーパレット（高コントラスト＆色覚多様性に配慮したラベル併記） */
.is-pos-noun { background: #e8f1fc !important; color: #12488f !important; border-color: #6ca0e0 !important; }
.is-pos-verb { background: #fdecec !important; color: #9e1c1c !important; border-color: #e67c7c !important; }
.is-pos-adj  { background: #e7f6ec !important; color: #165e2f !important; border-color: #67bd86 !important; }
.is-pos-adv  { background: #fff3e2 !important; color: #8c4600 !important; border-color: #e09b4c !important; }
.is-pos-prep { background: #f3ebfc !important; color: #522d7d !important; border-color: #aa82db !important; }
.is-pos-rel  { background: #fce8f1 !important; color: #91124e !important; border-color: #e072a4 !important; }
.is-pos-conj { background: #eaf0f2 !important; color: #2b4750 !important; border-color: #84a3ad !important; }

.syntax-colored-sentence-box {
  margin: 8px 0 12px;
  padding: 12px;
  background: #ffffff;
  border: 2px solid #9ab4a6;
  border-radius: 8px;
}
.syntax-token-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.syntax-bracket-marker {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  color: #7a1c4b;
  background: #fdf0f6;
  border: 1.5px dashed #d46b9e;
  border-radius: 6px;
}
.syntax-token-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3px;
  padding: 7px 10px;
  border-width: 2px;
  border-style: solid;
  border-radius: 7px;
  text-align: left;
  min-width: 78px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: opacity 0.15s, transform 0.15s;
}
.syntax-token-chip.is-dimmed {
  opacity: 0.32;
}
.syntax-token-chip.is-highlighted {
  outline: 3px solid #222;
  transform: translateY(-2px);
}
.syntax-token-word {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.syntax-token-meta {
  display: inline-block;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.78);
  border-radius: 4px;
  border: 1px solid currentColor;
}
.syntax-token-gloss {
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.92;
}

/* 並び替えクイックビルダー */
.syntax-problem-word-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: #fffefa;
  border: 1.5px solid #9ab5a7;
  border-radius: 7px;
}
.syntax-problem-word-card {
  display: inline-block;
  padding: 5px 12px;
  font-size: 16px;
  font-weight: 800;
  color: #14362f;
  background: #eaf3ee;
  border: 1.5px solid #548778;
  border-radius: 6px;
}
.syntax-quick-builder {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #f5f9f6;
  border: 1.5px solid #9ab5a7;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.syntax-tile-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.syntax-word-tile {
  margin: 0 !important;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  background: #ffffff;
  color: #17362f;
  border: 1.5px solid #4c8273;
  border-radius: 6px;
}
.syntax-word-tile:hover:not(:disabled) {
  background: #dff0e8;
}
.syntax-word-tile.is-used {
  opacity: 0.38;
  background: #e2e8e5;
}
.syntax-tile-preview {
  padding: 8px 10px;
  background: #fffdf7;
  border: 1px dashed #7a9c8e;
  border-radius: 5px;
  font-size: 15px;
}
.syntax-preview-label {
  font-size: 12px;
  color: #2c594e;
  margin-right: 6px;
}
.syntax-preview-sentence {
  font-weight: bold;
  color: #152e29;
}
.syntax-tile-controls {
  display: flex;
  gap: 6px;
}
.syntax-mini-btn {
  margin: 0 !important;
  padding: 4px 10px;
  font-size: 12px;
}
.syntax-quick-mode-bridge {
  margin-bottom: 8px;
}

/* 色分け英文で学ぶモード＆品詞別単語一覧 */
.syntax-learn-container, .syntax-words-container {
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}
.syntax-learn-nav {
  flex-wrap: wrap;
}
.syntax-step-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.syntax-step-buttons button {
  margin: 0 !important;
}
.syntax-learn-main-card {
  padding: 14px 16px;
  background: #fffefa;
  border: 2px solid #88a899;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.syntax-learn-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.syntax-number-badge {
  padding: 2px 9px;
  font-size: 12px;
  font-weight: bold;
  background: #234e45;
  color: #ffffff;
  border-radius: 999px;
}
.syntax-pattern-badge {
  padding: 2px 9px;
  font-size: 12px;
  font-weight: bold;
  background: #fce8f1;
  color: #8c144e;
  border: 1px solid #e072a4;
  border-radius: 999px;
}
.syntax-learn-title {
  font-size: 17px;
  color: #163831;
}
.syntax-learn-english {
  font-size: 21px;
  font-weight: 800;
  color: #102925;
  padding: 6px 10px;
  background: #eef5f0;
  border-left: 5px solid #2b6658;
  border-radius: 4px;
}
.syntax-learn-japanese {
  font-size: 14px;
  font-weight: bold;
  color: #2c4c45;
}
.syntax-token-click-hint {
  font-size: 12px;
  color: #3f6158;
}
.syntax-bracket-analysis-box {
  padding: 10px 14px;
  background: #fdf6ea;
  border: 1px solid #dec08f;
  border-left: 5px solid #b86b14;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.syntax-bracket-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14.5px;
  font-weight: bold;
  color: #4d2600;
  background: #fffdf9;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #e3cfa8;
}
.syntax-minai-point-text {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  color: #1c332f;
}
.syntax-explanation-text {
  font-size: 13px;
  line-height: 1.5;
  color: #2c4a43;
}
.syntax-minai-guide-card {
  padding: 12px 16px;
  background: #ebf3ee;
  border: 1.5px solid #88a899;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.syntax-minai-lead {
  font-size: 12.5px;
  color: #24473f;
}
.syntax-minai-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}
.syntax-minai-rule-item {
  padding: 9px 11px;
  background: #ffffff;
  border: 1px solid #b5cabf;
  border-top: 4px solid #91124e;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.syntax-minai-rule-badge {
  font-size: 11px;
  font-weight: bold;
  color: #91124e;
}
.syntax-minai-rule-item h4 {
  font-size: 13px;
  color: #17332e;
}
.syntax-minai-rule-item p {
  font-size: 12px;
  line-height: 1.45;
  color: #2a4640;
}
.syntax-all-sentences-section {
  padding: 12px;
  background: #fffefa;
  border: 1px solid #b9cbbd;
  border-radius: 8px;
}
.syntax-sentence-mini-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.syntax-mini-card {
  padding: 9px 11px;
  background: #f8faf8;
  border: 1px solid #bdcfc3;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.syntax-mini-card.is-active {
  background: #e4f2ea;
  border: 2px solid #2b6658;
}
.syntax-mini-card-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.syntax-mini-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.syntax-mini-token {
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.syntax-mini-open-btn {
  margin: 0 !important;
  padding: 4px 8px;
  font-size: 11.5px;
}
.syntax-pos-word-section {
  padding: 12px 14px;
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
  margin-bottom: 10px;
}
.syntax-pos-section-header {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.syntax-pos-minai-note {
  font-size: 12.5px;
  font-weight: bold;
  padding: 5px 8px;
  background: rgba(255,255,255,0.75);
  border-radius: 4px;
}
.syntax-word-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.syntax-word-card {
  padding: 9px 11px;
  background: #ffffff !important;
  color: #172e2b !important;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.syntax-word-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid #e1e8e4;
  padding-bottom: 4px;
}
.syntax-word-card-head {
  font-size: 15px;
  color: #122b27;
}
.syntax-pos-badge {
  padding: 1px 6px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.syntax-word-meaning {
  font-size: 12.5px;
  font-weight: bold;
  color: #1b3d36;
}
.syntax-word-role {
  font-size: 12px;
  line-height: 1.45;
  color: #294740;
}
.syntax-word-example {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  background: #f3f7f5;
  padding: 4px 6px;
  border-radius: 4px;
  color: #183630;
}
.syntax-inspector-card {
  margin-bottom: 10px;
  padding: 9px 11px;
  background: #172e2d;
  border: 1px solid #4d746b;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.syntax-inspector-card h3 {
  font-size: 13px;
  color: #e3d5a9;
}
.syntax-inspector-bracket {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: bold;
  padding: 4px 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

/* ルビ（ふりがな）表示スタイル */
ruby {
  ruby-align: center;
  ruby-position: over;
}
rt {
  font-size: 0.62em;
  line-height: 1.05;
  font-weight: 500;
  color: inherit;
  opacity: 0.9;
  letter-spacing: 0;
  user-select: none;
}
.glossary-badge.is-yomi {
  background: #f5efe2;
  color: #523b16;
  border: 1px solid #d7c59f;
}
.glossary-detail-yomi {
  margin-left: 8px;
  font-size: 13px;
  font-weight: normal;
  color: #46635b;
}

/* ==================== 数学クイック入力キーパッド・手書き計算メモ・スマホ最適化 ==================== */
.quiz-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.quiz-submit-row .study-button {
  margin: 0 !important;
}
.study-button.secondary.is-giveup-btn {
  background: #435c57;
  border-color: #7d9d94;
  color: #f4f8f5;
  font-size: 13px;
}
.study-button.secondary.is-giveup-btn:hover {
  background: #53706a;
}

.typed-label.is-math-typed input {
  width: min(100%, 480px);
  font-size: 16px;
  font-weight: 600;
  padding: 9px 12px;
  border: 2px solid #4c8273;
  border-radius: 6px;
  background: #ffffff;
}

.math-keypad {
  margin: 10px 0 6px;
  padding: 10px 12px;
  background: #e6f0ec;
  border: 1.5px solid #88ab9d;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 540px;
  user-select: none;
}
.math-keypad-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.math-keypad-title {
  font-size: 12.5px;
  font-weight: bold;
  color: #173f36;
}
.math-keypad-kb-toggle {
  margin: 0 !important;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  background: #ffffff;
  color: #1d463d;
  border: 1px solid #759c8d;
  border-radius: 6px;
}
.math-keypad-kb-toggle.is-pad-only {
  background: #235248;
  color: #ffffff;
}
.math-keypad-smart-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  background: #f4f9f6;
  border: 1px dashed #8eb0a2;
  border-radius: 7px;
}
.math-keypad-smart-label {
  font-size: 11.5px;
  font-weight: bold;
  color: #265348;
  margin-right: 2px;
}
.math-keypad-smart-chip {
  margin: 0 !important;
  padding: 5px 11px;
  font-size: 13.5px;
  font-weight: 700;
  background: #fff8e6;
  color: #543808;
  border: 1.5px solid #d19f3e;
  border-radius: 999px;
  touch-action: manipulation;
}
.math-keypad-smart-chip:hover,
.math-keypad-smart-chip:active {
  background: #f7e3b0;
}
.math-keypad-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}
.math-keypad-btn {
  margin: 0 !important;
  padding: 9px 2px;
  min-height: 42px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid #8ea89d;
  background: #ffffff;
  color: #16332d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(16, 36, 32, 0.08);
}
.math-keypad-btn:hover {
  background: #eef6f2;
}
.math-keypad-btn:active {
  transform: translateY(1px);
  background: #d5e8df;
}
.math-keypad-btn.is-op {
  background: #edf5fb;
  color: #134670;
  border-color: #7ea8cc;
}
.math-keypad-btn.is-sym {
  background: #f5effb;
  color: #48216b;
  border-color: #a98bc7;
}
.math-keypad-btn.is-var,
.math-keypad-btn.is-unit {
  background: #eef7f0;
  color: #164f33;
  border-color: #7cb396;
  font-style: italic;
}
.math-keypad-btn.is-unit {
  font-style: normal;
}
.math-keypad-btn.is-action {
  background: #fbeae8;
  color: #822017;
  border-color: #d4877f;
  font-size: 13px;
}

/* 手書き計算メモパッド */
.math-scratchpad-details {
  margin: 6px 0 10px;
  border: 1.5px solid #8eb0a2;
  border-radius: 8px;
  background: #f6faf7;
  overflow: hidden;
}
.math-scratchpad-summary {
  cursor: pointer;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: bold;
  color: #1b4b40;
  user-select: none;
}
.math-scratchpad-body {
  padding: 8px 10px 10px;
  border-top: 1px solid #c5dad1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.math-scratchpad-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.math-scratchpad-btn {
  margin: 0 !important;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  background: #ffffff;
  color: #1c3d35;
  border: 1px solid #86a699;
  border-radius: 6px;
  touch-action: manipulation;
}
.math-scratchpad-btn.is-active {
  background: #235449;
  color: #ffffff;
  border-color: #14332c;
}
.math-scratchpad-canvas {
  display: block;
  width: 100%;
  max-width: 680px;
  height: 210px;
  background: #ffffff;
  background-image:
    linear-gradient(to right, rgba(140, 175, 160, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 175, 160, 0.22) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1.5px solid #8ea89d;
  border-radius: 6px;
  touch-action: none;
  cursor: crosshair;
}

/* 問題送りボタン（← 前へ / 次へ →） */
.question-step-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.question-step-btn {
  margin: 0 !important;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: bold;
  background: #234f46;
  color: #f3f9f6;
  border: 1px solid #6b998b;
  border-radius: 5px;
  white-space: nowrap;
  touch-action: manipulation;
}
.question-step-btn:hover:not(:disabled) {
  background: #336b5f;
}

/* モバイル単元開閉ボタン（デスクトップでは非表示） */
.game-nav-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.game-nav-header-row h2 {
  margin-bottom: 0 !important;
}
.mobile-nav-toggle-btn {
  display: none;
  margin: 0 !important;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  background: #2e5d53;
  color: #f5faf7;
  border: 1px solid #8bb5a6;
  border-radius: 5px;
}

/* スマートフォン・タブレット縦持ち向けレスポンシブレイアウト */
@media (max-width: 820px) {
  body {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
  }
  .game-header {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 8px 12px;
  }
  .game-header h1 {
    font-size: 16px;
  }
  .game-header p#location {
    order: 10;
    flex: 1 1 100%;
    font-size: 11.5px;
    color: #cfe0d6;
  }
  .game-header button kbd {
    display: none;
  }
  .game-layout,
  .game-layout:has(#import-grade) {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px;
    overflow: visible;
  }
  .game-nav,
  .game-work,
  .game-inspector {
    width: 100%;
    padding: 12px;
  }
  .mobile-nav-toggle-btn {
    display: inline-flex;
    align-items: center;
  }
  .game-nav.is-mobile-collapsed .game-nav-body {
    display: none;
  }
  .game-nav.is-mobile-collapsed .game-nav-header-row {
    margin-bottom: 0;
  }
  .question-navigation {
    flex-wrap: wrap;
    gap: 8px;
  }
  .question-navigation label {
    flex: 1 1 100%;
  }
  .question-navigation select {
    font-size: 14px;
    padding: 8px;
  }
  .question-step-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 38px;
  }
  .grade-quiz legend,
  .question-title,
  .game-work:has(+ .game-inspector) .grade-quiz legend,
  .game-work:has(+ .game-inspector) .question-title {
    font-size: 16.5px !important;
    line-height: 1.5 !important;
    margin: 6px 0 10px !important;
  }
  .grade-option,
  .game-work:has(+ .game-inspector) .grade-option {
    font-size: 15px !important;
    line-height: 1.45 !important;
    padding: 11px 12px !important;
    margin: 7px 0 !important;
    min-height: 46px;
    border-radius: 6px;
    align-items: center;
  }
  .grade-option input {
    width: 18px;
    height: 18px;
    margin-top: 0;
    flex: none;
  }
  .study-button {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
  }
  .math-keypad {
    max-width: 100%;
    padding: 8px;
  }
  .math-keypad-btn {
    min-height: 44px;
    font-size: 15.5px;
  }
}