.training-ui-question {
  --training-ui-ink: var(--ink, #25312b);
  --training-ui-muted: var(--muted, #66716b);
  --training-ui-paper: var(--paper, #fbf7ee);
  --training-ui-surface: var(--surface, #fffdf8);
  --training-ui-line: var(--line, #d8cebd);
  --training-ui-green: var(--green, #315644);
  --training-ui-green-soft: var(--green-soft, #dce7dd);
  --training-ui-wrong: var(--terracotta-dark, #843b2c);
  min-height: 300px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 3cqw, 1.7rem);
  padding: 1rem 0 clamp(1rem, 4cqw, 2.25rem);
  color: var(--training-ui-ink);
}

.training-ui-reference {
  margin: 0;
  color: var(--training-ui-green);
  font-family: Georgia, "Noto Serif KR", "Apple SD Gothic Neo", serif;
  font-size: clamp(1.35rem, 4cqw, 2rem);
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}

.training-ui-question--passage {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(0.75rem, 1.8cqw, 1.1rem);
}
.training-ui-passage-scroll {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.training-ui-passage-scroll::after {
  position: absolute;
  right: 0.4rem;
  bottom: 0;
  left: 0.2rem;
  height: 2.5rem;
  background: linear-gradient(transparent, var(--training-ui-surface) 82%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.training-ui-passage-scroll__cue {
  position: absolute;
  z-index: 2;
  bottom: 0.15rem;
  left: 50%;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--training-ui-green);
  background: var(--training-ui-green-soft);
  box-shadow: 0 1px 4px rgba(37, 49, 43, 0.12);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 150ms ease;
}
.training-ui-passage-scroll.is-scrollable:not(.is-at-end)::after,
.training-ui-passage-scroll.is-scrollable:not(.is-at-end) .training-ui-passage-scroll__cue { opacity: 1; }

.training-ui-choices { display: grid; gap: 0.65rem; }
.training-ui-choices--passage {
  height: 100%;
  min-height: 0;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  align-content: start;
  padding: 0.2rem 0.4rem 0.4rem 0.2rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--training-ui-green) 38%, transparent) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  background:
    linear-gradient(var(--training-ui-surface, #fffdf8) 30%, transparent) center top,
    linear-gradient(transparent, var(--training-ui-surface, #fffdf8) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(37, 49, 43, 0.16), transparent) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(37, 49, 43, 0.16), transparent) center bottom;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
  background-size: 100% 1.3rem, 100% 1.3rem, 100% 0.55rem, 100% 0.55rem;
}
.training-ui-choices--passage:focus-visible,
.training-ui-choice:focus-visible { outline: 3px solid #1268a8; outline-offset: -3px; }
.training-ui-choices--passage::-webkit-scrollbar { width: 8px; }
.training-ui-choices--passage::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--training-ui-green) 38%, transparent); }
.training-ui-choices--passage .training-ui-choice {
  align-items: start;
  padding: 0.75rem 0.8rem;
  line-height: 1.45;
}
.training-ui-choices--passage .training-ui-choice__number { margin-top: 0.08rem; }
.training-ui-choice {
  position: relative;
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid var(--training-ui-line);
  border-radius: 0.8rem;
  color: var(--training-ui-ink);
  background: #fffef9;
  font-family: system-ui, sans-serif;
  line-height: 1.55;
  text-align: left;
}
.training-ui-choice__text { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.training-ui-choice:hover:not(:disabled) { border-color: var(--training-ui-green); background: var(--training-ui-green-soft); }
.training-ui-choice.is-selected { box-shadow: inset 0 0 0 1px currentColor; }
.training-ui-choice.is-correct { border-color: var(--training-ui-green); color: var(--training-ui-green); background: var(--training-ui-green-soft); }
.training-ui-choice.is-wrong { border-color: var(--training-ui-wrong); color: var(--training-ui-wrong); background: #f8e7df; }
.training-ui-choice__number {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.42rem;
  color: var(--training-ui-muted);
  background: var(--training-ui-paper);
  font-size: 0.72rem;
  font-weight: 800;
}
.is-correct .training-ui-choice__number { color: white; background: var(--training-ui-green); }
.is-wrong .training-ui-choice__number { color: white; background: var(--training-ui-wrong); }

.training-ui-statement {
  padding: clamp(1rem, 3cqw, 1.4rem);
  border-radius: 0.9rem;
  background: var(--training-ui-paper);
  text-align: center;
}
.training-ui-statement strong { color: var(--training-ui-green); font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(1.2rem, 3.5cqw, 1.75rem); }
.training-ui-statement p { margin: 0.8rem 0 0; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(1rem, 2.5cqw, 1.25rem); line-height: 1.85; word-break: keep-all; }
.training-ui-ox { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.training-ui-ox__button {
  position: relative;
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px solid var(--training-ui-line);
  border-radius: 0.9rem;
  color: var(--training-ui-ink);
  background: #fffef9;
}
.training-ui-ox__button kbd { position: absolute; top: 0.65rem; left: 0.7rem; color: var(--training-ui-muted); }
.training-ui-ox__button b { font-family: Georgia, serif; font-size: 2.4rem; }
.training-ui-ox__button--yes b { color: var(--training-ui-green); }
.training-ui-ox__button--no b { color: var(--training-ui-wrong); }
.training-ui-ox__button.is-correct { border-color: var(--training-ui-green); background: var(--training-ui-green-soft); }
.training-ui-ox__button.is-wrong { border-color: var(--training-ui-wrong); background: #f8e7df; }

.training-ui-chunk-target {
  min-height: 82px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 2px dashed var(--training-ui-line);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--training-ui-green-soft) 45%, transparent);
}
.training-ui-chunk-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.training-ui-chunk {
  position: relative;
  min-height: 42px;
  padding: 0.6rem 0.7rem 0.6rem 1.75rem;
  border: 1px solid var(--training-ui-line);
  border-radius: 0.7rem;
  color: var(--training-ui-ink);
  background: #fffef9;
  line-height: 1.45;
}
.training-ui-chunk small { position: absolute; top: 0.45rem; left: 0.55rem; color: var(--training-ui-muted); font-size: 0.65rem; font-weight: 800; }
.training-ui-chunk.is-selected { border-color: var(--training-ui-green); background: var(--training-ui-green-soft); }

.training-ui-blank,
.training-ui-hint {
  margin: 0;
  padding: clamp(1rem, 3cqw, 1.4rem);
  border-radius: 0.85rem;
  background: var(--training-ui-paper);
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: clamp(1rem, 2.6cqw, 1.25rem);
  line-height: 1.85;
  text-align: center;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.training-ui-hint { border: 1px dashed var(--training-ui-green); color: var(--training-ui-green); background: var(--training-ui-green-soft); letter-spacing: 0.08em; }
.training-ui-form { display: grid; gap: 0.75rem; }
.training-ui-form input,
.training-ui-form textarea { width: 100%; border: 1px solid var(--training-ui-line); border-radius: 0.75rem; color: var(--training-ui-ink); background: white; }
.training-ui-form input { min-height: 48px; padding: 0 0.85rem; }
.training-ui-form textarea { min-height: 150px; padding: 0.85rem; resize: vertical; line-height: 1.7; }
.training-ui-form--recall { flex: 1; }
.training-ui-submit { align-self: flex-end; min-height: 42px; padding: 0.65rem 1rem; border: 0; border-radius: 0.7rem; color: white; background: var(--training-ui-green); font-weight: 800; }
.training-ui-submit:disabled { cursor: default; opacity: 0.4; }
.training-ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@container (max-width: 520px) {
  .training-ui-question { min-height: 0; justify-content: flex-start; gap: 0.8rem; padding: 0; }
  .training-ui-reference { font-size: 1.15rem; }
  .training-ui-choices--passage .training-ui-choice { padding: 0.65rem 0.7rem; font-size: 0.86rem; line-height: 1.4; }
  .training-ui-choice { min-height: 52px; padding: 0.7rem; font-size: 0.88rem; }
  .training-ui-statement { padding: 0.85rem; }
  .training-ui-statement strong { font-size: 1.05rem; }
  .training-ui-statement p { margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.65; }
  .training-ui-ox__button { min-height: 72px; }
  .training-ui-ox__button b { font-size: 1.9rem; }
  .training-ui-chunk-target { min-height: 58px; padding: 0.5rem; }
  .training-ui-chunk { min-height: 38px; padding: 0.5rem 0.55rem 0.5rem 1.55rem; font-size: 0.82rem; }
  .training-ui-blank,
  .training-ui-hint { padding: 0.8rem; font-size: 0.92rem; line-height: 1.65; }
  .training-ui-form textarea { min-height: 120px; }
}

@media (prefers-reduced-motion: no-preference) {
  .training-ui-choice,
  .training-ui-ox__button,
  .training-ui-chunk { transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
}