/* 제시 상자(PM #55): 교과서의 식 상자처럼 문두 아래 연한 둥근 테두리 상자에 가운데 정렬로 둔다.
   문두와 같은 글자 크기를 기준으로 식은 1.35배, 빈칸 □는 글자 높이의 정사각 테두리다. */
.stimulus-box {
  margin: 4px 0 12px; padding: 10px 14px; border: 1.5px solid #b9c6f5; border-radius: 14px;
  background: #f7f9ff; color: var(--text); font-size: 19px; line-height: 1.5;
  overflow: auto; overscroll-behavior: contain; flex: 0 1 auto; min-height: 0; order: 1;
}
.stimulus-center { text-align: center; }
.stimulus-box p, .stimulus-box ul { margin: 0; }
.stimulus-line + .stimulus-line { margin-top: 2px; }
.stimulus-title { font-size: .8em; font-weight: 700; color: var(--muted); text-align: center; margin-bottom: 2px; }
.stimulus-text { white-space: pre-line; }
.stimulus-items { list-style: none; padding: 0; text-align: left; }
.stimulus-items li { padding-left: 1.6em; text-indent: -1.6em; }
.stimulus-expr .stimulus-line { font-size: 1.35em; line-height: 1.6; overflow-x: auto; overflow-y: hidden; padding: 2px 0; white-space: nowrap; }
.stimulus-expr .katex { font-size: 1em; }
.stimulus-box .inline-math .katex { font-size: 1.1em; }
/* 빈칸: 현재 글자 크기(1em)와 같은 높이의 정사각 테두리. 분수 안에서도 그 크기에 맞춘다. */
.stimulus-blank {
  display: inline-block; width: .9em; height: .9em; box-sizing: border-box;
  border: max(1.5px, .07em) solid currentColor; border-radius: 0; vertical-align: -.08em; margin: 0 .08em;
}
.katex .stimulus-blank { vertical-align: -.05em; }
.stimulus-underline { display: inline-block; width: 3.2em; height: 1em; border-bottom: 2px solid currentColor; vertical-align: -.2em; margin: 0 .15em; }
.tv-mode .stimulus-box { border-color: var(--line); }

/* 풀이 화면: 제시 상자는 그림(figure)과 같은 주요 시각 자료다. 가로는 왼쪽 큰 영역(그림 문항과 같은 58:42), 세로는 화면 높이의 약 43%,
   식은 stimulus.js 가 상자에 들어가는 가장 큰 글자(본문 1.35~3.2배)로 맞춘다. 그림이 같이 있으면 문두 → 상자 → 그림 순서로 같은 영역을 나눈다. */
.quiz-screen #app .question-prompt:has(> .stimulus-box) > .q-text,
.quiz-screen #app .question-stimulus:has(> .stimulus-box) > .q-text { flex: 0 1 auto; min-height: 1.5em; }
.quiz-screen .stimulus-box { margin: 0; padding: 8px 12px; font-size: clamp(14px, 2.7cqh, 20px); }
.quiz-screen #app:not([data-quiz-size="large"]) .stimulus-box { font-size: 16px; }
.quiz-screen #app[data-quiz-size="tiny"] .stimulus-box { font-size: 14px; padding: 4px 10px; }
.quiz-screen #app .stimulus-box { font-size: clamp(16px, 2.8cqh, 24px); flex: 0 1 auto; min-height: 0; }
/* 식 상자는 영역을 채우고, 제시문·〈보기〉 상자는 글 길이만큼만 차지한다(길면 상자 안 스크롤). */
.quiz-screen #app .stimulus-expr { flex: 1 1 0; }
.tv-mode.quiz-screen #app .stimulus-box { font-size: clamp(22px, 3.4cqh, 38px); }
/* 식은 상자 가운데(세로·가로). 넘칠 때 위쪽이 잘리지 않게 auto 여백으로 가운데를 맞춘다. */
.quiz-screen .stimulus-expr { display: flex; flex-direction: column; }
.quiz-screen .stimulus-expr > :first-child { margin-top: auto; }
.quiz-screen .stimulus-expr > :last-child { margin-bottom: auto; }
.quiz-screen .stimulus-expr .stimulus-line { text-align: center; flex: none; }
/* 그림과 함께: 같은 영역을 상자 2 : 그림 3 으로 나눈다(그림 최소 35vh 규칙은 상자와 나눌 때 해제). */
.quiz-screen #app .question-stimulus > .stimulus-box + .figure-open { flex: 3 1 0; min-height: 0; height: auto; }
.quiz-screen #app .question-stimulus > .stimulus-expr:has(+ .figure-open) { flex: 2 1 0; }
@media (orientation: portrait) {
  /* 세로 화면: 그림만 있을 때와 같은 자리, 상자 단독이면 화면 높이의 43% */
  .quiz-screen #app .question-stimulus > .stimulus-expr:not(:has(+ .figure-open)) { flex: 0 1 43vh; flex-basis: 43dvh; }
}
.stimulus-openable { cursor: pointer; }

/* 지문(passage, PM #55): 그림과 같은 자리·크기 규칙. 글자 17px 이상·줄 간격 1.7, 길면 상자 안 스크롤. */
.stimulus-passage { font-size: 19px; line-height: 1.7; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
.stimulus-heading { text-align: center; font-weight: 800; margin-bottom: .3em; }
.stimulus-source { text-align: right; font-size: .85em; color: var(--muted); margin-top: .3em; }
.stimulus-passage p { margin: 0; }
.stimulus-para + .stimulus-para { margin-top: .4em; text-indent: 0; }
.stimulus-right { text-align: right; }
.stimulus-centered { text-align: center; }
.stimulus-u { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
.stimulus-mark { display: inline-block; min-width: 1.4em; padding: 0 .25em; border: 1.5px solid currentColor; border-radius: 999px; line-height: 1.35; text-align: center; font-weight: 700; }
.stimulus-form-poem { text-align: center; }
.stimulus-stanza + .stimulus-stanza { margin-top: .8em; }
.stimulus-form-dialogue { display: grid; grid-template-columns: max-content 1fr; column-gap: .6em; row-gap: .25em; align-content: start; }
.stimulus-form-dialogue > .stimulus-heading, .stimulus-form-dialogue > .stimulus-source { grid-column: 1 / -1; }
.stimulus-turn { display: contents; }
.stimulus-speaker { font-weight: 800; white-space: nowrap; }
.stimulus-nospeaker > span { grid-column: 1 / -1; }
.stimulus-form-letter .stimulus-para, .stimulus-form-notice .stimulus-para { text-indent: 0; }
.stimulus-form-notice { border-style: double; border-width: 4px; }
.stimulus-form-notice .stimulus-heading { font-size: 1.15em; }
/* 표는 지문의 강제 줄바꿈을 물려받지 않는다. 좁은 화면에서는 자료 상자 안에서 표 전체를 스크롤한다. */
.stimulus-box.stimulus-passage.stimulus-form-table {
  max-width: 100%; min-width: 0; overflow: auto;
  background: var(--surface, #fff); color: var(--text, #1b2130);
}
.stimulus-table { border-collapse: collapse; margin: 0 auto; width: 100%; max-width: none; }
.stimulus-table th, .stimulus-table td {
  border: 1px solid var(--line, #d9deea); padding: .25em .7em; text-align: center;
  word-break: keep-all; overflow-wrap: normal;
}
/* 지역 테마가 바뀌는 검수함·관리자와 독립 콘텐츠 화면에서도 배경/글자색을 같은 토큰 쌍으로 읽는다. */
.stimulus-table thead th {
  background: var(--surface-2, #eef1f8); color: var(--text, #1b2130); white-space: nowrap;
}
.stimulus-passage:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* 풀이 화면의 지문 상자: 가로는 왼쪽 큰 영역을 채우고, 세로는 상단 약 45%(그림과 같은 자리). 문두·보기는 그대로 보인다. */
.quiz-screen #app .stimulus-passage.stimulus-box { font-size: max(17px, clamp(16px, 2.8cqh, 24px)); line-height: 1.7; flex: 1 1 0; padding: 10px 14px; }
.tv-mode.quiz-screen #app .stimulus-passage.stimulus-box { font-size: max(22px, clamp(22px, 3.4cqh, 38px)); }
@media (orientation: portrait) {
  .quiz-screen #app .question-stimulus > .stimulus-passage.stimulus-box { flex: 0 1 45vh; flex-basis: 45dvh; }
}
.quiz-screen #app .question-stimulus > .stimulus-passage:has(+ .figure-open) { flex: 2 1 0; }

/* 관리자 미리보기 */
.qtext .stimulus-box { font-size: 15px; margin: 6px 0; }

/* #54 풀이 화면: 해설이 남은 높이를 차지해도 식·지문 상자는 내용만큼 남긴다(가로에서 상자가 한 줄로 눌리지 않게).
   식은 맞춤 배율 대신 고정 1.35배, 긴 지문은 상자 안에서 스크롤한다. */
.quiz-screen #app .has-solution.has-solution .question-stimulus > .stimulus-box.stimulus-box { flex: 0 0 auto; min-height: 44px; max-height: 36dvh; }
.quiz-screen #app .has-solution.has-solution .question-stimulus > .stimulus-expr.stimulus-expr { justify-content: center; }
.quiz-screen #app .has-solution .stimulus-expr .stimulus-line { font-size: 1.35em !important; }
.quiz-screen #app .has-solution.has-solution .question-stimulus > .stimulus-passage.stimulus-box { max-height: 30dvh; }