/*
 * 기믹 'wordRiver' (종장 고등판 변화의 강) — js/gimmicks/wordRiver.js
 * - 글자 크기: 과제 창 글꼴(css/stage.css: calc(17px * var(--fs, 1) * var(--st-big, 1)))을 em 으로 따른다 → 글자 크기 3단계·교사 크게 보기.
 * - 색만으로 나누지 않는다: 틀림 ✕ · 강조 ★ · 정답 ○ · 고름 ☑/☐ · 빠짐 △ 기호와 화면 낭독기 글, 테두리 모양이 함께 바뀐다.
 * - 누를 곳은 44px 이상. 360px 너비에서 가로 스크롤 없음(나루가 줄바꿈). 움직임 줄이기면 전환 없음.
 */
.wr { display: flex; flex-direction: column; gap: .9em; }
.wr-orig { max-height: 14em; overflow: auto; }
.wr-sec { display: flex; flex-direction: column; gap: .5em; padding: .6em .7em; border-radius: 10px; border: 1px solid var(--st-line, rgba(43, 36, 32, .22)); background: #fffaf0; position: relative; }
.wr-title { margin: 0; font-size: 1.02em; font-weight: 700; }
.wr-help { margin: 0; font-size: .9em; display: block; }
.wr-note { margin: 0; font-size: .8em; opacity: .85; }

/* 강 */
.wr-word { display: flex; flex-direction: column; gap: .35em; padding: .45em .5em; border-radius: 8px; position: relative;
  background: linear-gradient(180deg, rgba(52, 80, 138, .08), rgba(52, 80, 138, .02)); border: 1px solid rgba(52, 80, 138, .25); }
.wr-word-label { margin: 0; font-weight: 700; font-size: .92em; }
.wr-river { list-style: none; margin: 0; padding: .3em .2em; display: flex; flex-wrap: wrap; align-items: center; gap: .3em;
  border-bottom: 3px double rgba(52, 80, 138, .45); }
.wr-stop-li { display: flex; align-items: center; gap: .3em; }
.wr-end { font-size: .8em; font-weight: 700; opacity: .8; }
.wr-arrow { opacity: .7; }
.wr-yet { font-family: var(--font-yet, 'NMYet', 'NMSans', serif); }

.wr-stop, .wr-chip, .wr-choice {
  min-height: 44px; min-width: 44px; padding: .25em .6em; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--ink, #2b2420); background: #fffdf7; color: var(--ink, #2b2420);
  font: 600 1em/1.3 var(--font-ui, system-ui, sans-serif); position: relative;
  transition: background-color .15s ease;
}
.wr-stop { min-width: 4.2em; font-size: 1.12em; border-style: dashed; border-radius: 50% / 40%; display: inline-flex; align-items: center; justify-content: center; gap: .2em; }
.wr-stop.is-filled { border-style: solid; border-radius: 8px; }
.wr-stop-num { opacity: .45; font-size: .8em; }
.wr-chip { font-size: 1.12em; }
.wr-chip[hidden], .wr-pool-empty[hidden], .wr-missing[hidden], .wr-need[hidden], .wr-submit[hidden] { display: none; }
.wr-stop:disabled, .wr-chip:disabled, .wr-choice:disabled { cursor: default; opacity: 1; }
.wr-stop:focus-visible, .wr-chip:focus-visible, .wr-choice:focus-visible, .wr-predict-input:focus-visible { outline: 3px solid var(--st-focus, #d08a12); outline-offset: 2px; }
.wr-pool { display: flex; flex-wrap: wrap; gap: .4em; padding: .4em; border-radius: 8px; background: var(--st-shade, rgba(43, 36, 32, .07)); min-height: 44px; }
.wr-pool-empty { margin: 0; align-self: center; font-size: .85em; }

/* 지금의 변화 */
.wr-choices { display: flex; flex-direction: column; gap: .4em; }
.wr-choice { text-align: left; display: flex; align-items: center; gap: .45em; font-weight: 500; }
.wr-choice[aria-pressed="true"] { background: #fff1c9; border-width: 3px; font-weight: 700; }
.wr-choice-sym { font-size: 1.1em; flex: 0 0 auto; }
.wr-missing { margin: 0; font-weight: 700; padding: .3em .5em; border-radius: 8px; background: #fdf0ee; border: 1px dashed var(--seal, #b8322a); }
.wr-missing-sym { margin-right: .3em; }
.wr-now.is-missing { border: 2px dashed var(--seal, #b8322a); }

/* 예측 한 줄 */
.wr-predict-input { width: 100%; box-sizing: border-box; min-height: 3em; padding: .5em .6em; border-radius: 10px; resize: vertical;
  border: 2px solid var(--st-line, rgba(43, 36, 32, .22)); background: #fffdf7; color: var(--ink, #2b2420); font: 400 1em/1.5 var(--font-ui, system-ui, sans-serif); }

/* 표시 */
.wr-sym { display: inline-flex; align-items: center; font-size: .8em; font-weight: 700; margin-left: .25em; }
.wr .is-wrong { border-color: var(--seal, #b8322a) !important; border-style: dotted !important; border-width: 3px !important; background: #fdf0ee !important; }
.wr-sym-wrong { color: var(--seal, #b8322a); }
.wr-word.is-hint, .wr-sec.is-hint { outline: 3px dashed var(--st-focus, #d08a12); outline-offset: 2px; background: #fff6dd; }
.wr-word > .wr-sym-hint, .wr-sec > .wr-sym-hint { position: absolute; top: .15em; right: .35em; color: #8a5a00; }
.wr .is-answer { border-color: #2c7a3a !important; border-style: solid !important; border-width: 3px !important; background: #eef7ec !important; }
.wr-sym-answer { color: #2c7a3a; }
.wr.is-done .wr-stop.is-filled, .wr.is-done .wr-choice[aria-pressed="true"] { border-color: #2c7a3a; }

.wr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5em; }
.wr-need { margin: 0; font-size: .85em; flex: 1 1 12em; }

html[data-nm-motion="reduce"] .wr *, html.nm-reduced-motion .wr * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wr * { transition: none !important; } }
@media (max-width: 420px) {
  .wr-stop { min-width: 3.4em; font-size: 1.02em; padding: .2em .35em; }
  .wr-chip { font-size: 1.02em; padding: .2em .4em; }
}