/* Teacher help only: settings and student play retain their own layouts. */
.modal:has(.teacher-help) {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border: 1px solid #DFE6DD;
  border-radius: 24px;
  background: #F8F9F5;
  color: #243D35;
  box-shadow: 0 20px 64px #243D3520;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 24px;
}
.modal:has(.teacher-help) > .panel-title { align-items: center; gap: 16px; margin-bottom: 8px; }
.modal:has(.teacher-help) > .panel-title h2 { color: #243D35; font-family: var(--ui-font, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif); font-size: calc(28px * var(--reading-scale, 1)); font-weight: 750; line-height: 1.3; letter-spacing: -.04em; }
.modal:has(.teacher-help) #close-modal { min-width: 48px; min-height: 48px; padding: 8px; border: 1px solid #DFE6DD; border-radius: 12px; background: #fff; color: #243D35; box-shadow: none; font-size: 26px; }
.teacher-help { color: #243D35; font-family: var(--ui-font, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif); font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.65; }
.teacher-help [hidden] { display: none !important; }
.teacher-help p { color: #66766D; margin: 0 0 12px; overflow-wrap: anywhere; }
.teacher-help .teacher-help-intro { margin: 0 0 18px; font-size: calc(15px * var(--reading-scale, 1)); }
.teacher-help .teacher-help-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.teacher-help .teacher-help-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-width: 0; min-height: 104px; padding: 14px; border: 1px solid #DFE6DD; border-radius: 14px; background: #fff; color: #243D35; box-shadow: 0 3px 14px #243D3505; font: inherit; text-align: left; cursor: pointer; }
.teacher-help .teacher-help-step > b { display: grid; place-items: center; width: 30px; height: 32px; border-radius: 9px; background: #D2EB67; color: #243D35; font-size: calc(16px * var(--reading-scale, 1)); font-weight: 750; }
.teacher-help .teacher-help-step:nth-child(2) > b { background: #DAEDF6; }
.teacher-help .teacher-help-step:nth-child(3) > b { background: #F4DCE7; }
.teacher-help .teacher-help-step > span { display: grid; gap: 5px; min-width: 0; }
.teacher-help .teacher-help-step strong { font-size: calc(16px * var(--reading-scale, 1)); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; }
.teacher-help .teacher-help-step small { color: #66766D; font-size: calc(13px * var(--reading-scale, 1)); line-height: 1.55; overflow-wrap: anywhere; }
.teacher-help .teacher-help-step > .teacher-help-step-arrow { display: block; color: #66766D; font-size: 18px; }
.teacher-help .teacher-help-search { display: grid; gap: 8px; margin: 0 0 14px; }
.teacher-help .teacher-help-search > label { font-size: calc(17px * var(--reading-scale, 1)); font-weight: 700; color: #243D35; }
.teacher-help .teacher-help-search-box { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 4px 14px; border: 1px solid #B9C9B6; border-radius: 14px; background: #fff; }
.teacher-help .teacher-help-search-box:focus-within { border-color: #243D35; outline: 2px solid #D2EB67; outline-offset: 2px; }
.teacher-help .teacher-help-search-box > svg { width: 22px; height: 22px; color: #66766D; flex-shrink: 0; }
.teacher-help .teacher-help-search input { width: 100%; min-width: 0; min-height: 48px; padding: 9px 0; border: 0; border-radius: 0; background: transparent; color: #243D35; font: inherit; box-shadow: none; }
.teacher-help .teacher-help-search input:focus-visible { outline: none; }
.teacher-help .teacher-help-search input::-webkit-search-cancel-button { display: none; }
.teacher-help .teacher-help-search input::placeholder { color: #66766D; opacity: 1; }
.teacher-help [data-help-clear] { min-width: 48px; min-height: 48px; padding: 8px; border: 0; border-radius: 10px; background: #F8F9F5; color: #243D35; font-size: 24px; }
.teacher-help .teacher-help-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.teacher-help .teacher-help-topics button { min-height: 48px; padding: 10px 14px; border: 1px solid #DFE6DD; border-radius: 11px; background: #fff; color: #66766D; box-shadow: none; font: inherit; font-weight: 600; cursor: pointer; }
.teacher-help .teacher-help-topics button[aria-pressed="true"] { border-color: #B6CE71; background: #D2EB67; color: #243D35; box-shadow: inset 0 -2px 0 #728846; font-weight: 750; }
.teacher-help .teacher-help-result-count { margin: 0 0 22px; min-height: 22px; color: #66766D; font-size: calc(13px * var(--reading-scale, 1)); }
.teacher-help .teacher-help-topic-section { margin: 0 0 22px; }
.teacher-help .teacher-help-topic-section > h3 { margin: 0 0 10px; color: #243D35; font-size: calc(17px * var(--reading-scale, 1)); font-weight: 700; line-height: 1.4; }
.teacher-help .teacher-help-detail { padding: 0; margin-bottom: 8px; border: 1px solid #DFE6DD; border-radius: 12px; background: #fff; overflow: hidden; }
.teacher-help .teacher-help-detail > summary { min-height: 52px; padding: 14px 16px; color: #243D35; font: inherit; font-weight: 600; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
.teacher-help .teacher-help-detail[open] > summary { background: #EEF3E6; border-bottom: 1px solid #DFE6DD; }
.teacher-help .teacher-help-answer { padding: 16px; }
.teacher-help .teacher-help-answer > p { margin: 0 0 12px; font-size: calc(15px * var(--reading-scale, 1)); line-height: 1.7; }
.teacher-help .teacher-help-answer > p:last-child { margin-bottom: 0; }
.teacher-help .teacher-help-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 10px 14px; border: 1px solid #B9C9B6; border-radius: 11px; background: #F8F9F5; color: #243D35; box-shadow: none; font: inherit; font-weight: 650; line-height: 1.5; text-align: left; white-space: normal; cursor: pointer; }
.teacher-help .teacher-help-readiness { padding: 12px; margin-bottom: 14px; border-left: 3px solid #8AA64E; border-radius: 0 10px 10px 0; background: #F3F7EC; }
.teacher-help .teacher-help-readiness b { display: block; font-size: calc(14px * var(--reading-scale, 1)); line-height: 1.5; font-weight: 700; }
.teacher-help .teacher-help-readiness p { margin: 4px 0 0; font-size: calc(14px * var(--reading-scale, 1)); line-height: 1.6; }
.teacher-help .teacher-help-no-results { display: grid; justify-items: center; gap: 12px; padding: 24px 18px; margin-bottom: 24px; border: 1px dashed #BAC9B5; border-radius: 16px; background: #fff; text-align: center; }
.teacher-help .teacher-help-no-results p { max-width: 420px; margin: 0; }
.teacher-help .teacher-help-no-results img { width: 72px; height: 72px; object-fit: contain; }
.teacher-help .teacher-help-report { padding: 0 16px; border: 1px solid #DFE6DD; border-radius: 14px; background: #fff; }
.teacher-help .teacher-help-report > summary { min-height: 52px; padding: 14px 0; color: #243D35; font: inherit; font-weight: 650; cursor: pointer; }
.teacher-help .teacher-help-report > p { font-size: calc(14px * var(--reading-scale, 1)); }
.teacher-help .teacher-help-report-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.teacher-help .teacher-help-report label { display: grid; gap: 7px; color: #243D35; font: inherit; font-weight: 600; min-width: 0; }
.teacher-help .teacher-help-report :is(select, textarea) { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #BAC9B5; border-radius: 11px; background: #fff; color: #243D35; font: inherit; line-height: 1.5; }
.teacher-help .teacher-help-report textarea { min-height: 116px; resize: vertical; background: #F8F9F5; font-weight: 400; }
.teacher-help .teacher-help-copy-preview { margin-bottom: 14px; }
.teacher-help .teacher-help-copy-status,
.teacher-help .teacher-help-action-status { margin: 10px 0 0; color: #243D35; font-size: calc(14px * var(--reading-scale, 1)); }
.teacher-help .teacher-help-copy-status { padding-bottom: 14px; }
.teacher-help .teacher-help-action-status:empty { display: none; }
.teacher-help :is(button, select, input, summary, textarea):focus-visible { outline: 3px solid #243D35; outline-offset: 3px; }
.teacher-help :is(button, select, summary) { touch-action: manipulation; }
.teacher-help button:disabled { cursor: default; opacity: .6; }
.teacher-help button[aria-busy="true"] { cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .teacher-help .teacher-help-step:hover:not(:disabled),
  .teacher-help .teacher-help-action:hover:not(:disabled) { border-color: #8AA64E; background: #F4F7EA; }
}
@media (max-width: 620px) {
  .modal:has(.teacher-help) { padding: 20px; border-radius: 18px; }
  .teacher-help .teacher-help-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .teacher-help .teacher-help-step { min-height: 76px; grid-template-columns: 30px minmax(0, 1fr) 16px; }
  .teacher-help .teacher-help-report-fields { grid-template-columns: minmax(0, 1fr); }
}
html[data-text-size="150"] .teacher-help .teacher-help-steps { grid-template-columns: minmax(0, 1fr); }
html[data-text-size="150"] .teacher-help .teacher-help-report-fields { grid-template-columns: minmax(0, 1fr); }
html[data-text-size="150"] .teacher-help .teacher-help-step { min-height: 96px; }
html[data-color-mode="contrast"] .modal:has(.teacher-help) { background: #fff; color: #111; border-color: #111; box-shadow: none; }
html[data-color-mode="contrast"] .teacher-help :is(p, h3, strong, small, label, b, summary, select, textarea) { color: #111; }
html[data-color-mode="contrast"] .teacher-help :is(.teacher-help-step, .teacher-help-detail, .teacher-help-report, .teacher-help-search-box, .teacher-help-readiness, .teacher-help-no-results, .teacher-help-action, select, textarea) { border-color: #111; background: #fff; color: #111; box-shadow: none; }
html[data-color-mode="contrast"] .teacher-help .teacher-help-step > b { background: #fff; border: 1px solid #111; color: #111; }
html[data-color-mode="contrast"] .teacher-help .teacher-help-topics button { border-color: #111; color: #111; }
html[data-color-mode="contrast"] .teacher-help .teacher-help-topics button[aria-pressed="true"] { background: #111; color: #fff; box-shadow: none; }
html[data-color-mode="contrast"] .teacher-help .teacher-help-detail[open] > summary { background: #fff; border-color: #111; }
html[data-color-mode="contrast"] .teacher-help .teacher-help-search-box:focus-within { outline-color: #111; }
@media (prefers-reduced-motion: reduce) {
  .teacher-help button:active { transform: none !important; }
}
html[data-reduced-motion="true"] .teacher-help button:active { transform: none !important; }