/*
 * 기믹 sortGlyphs (서장 「흩어진 글자」) — js/gimmicks/sortGlyphs.js
 * - 글자 크기는 em: 과제 창 글자 크기 calc(17px * var(--fs) * var(--st-big))(css/stage.css)를 물려받아 글자 크기 3단계·교사 크게 보기를 따른다.
 * - 색만으로 나누지 않는다: 틀림 ×, 고칠 곳 △, 정답 자리 ○ 기호와 테두리 모양이 함께 바뀐다.
 * - 움직임 줄이기(html.nm-reduced-motion, html[data-nm-motion="reduce"])면 흩어지는 움직임·기울기를 끈다.
 * - 한 화면에: 1280×800 에서 흩어진 글자·칸·제출 단추가 스크롤 없이 보이도록 작게 짠다(칸 머리와 '여기에 놓기'가 한 줄,
 *   칸은 넓으면 나란히). 창이 넘치면 제출 줄(.nm-gsg-foot)이 창 아래에 붙어 있다(sticky).
 * - 360px 폭에서 가로 스크롤이 생기지 않게 모두 줄바꿈한다. 단추는 44px 이상.
 */
.nm-gsg { display: flex; flex-direction: column; gap: .55em; }
.nm-gsg-lead { margin: 0; font-size: .88em; opacity: .9; }
.nm-gsg-lead[hidden] { display: none; }
/* 단계 대사(선배의 말) — 장면 대사 줄(.nm-dlg-line)을 작게 */
.nm-gsg-say { padding: .45em .6em; border-radius: 10px; background: var(--hanji, #efe4cf); border-left: 4px solid var(--seal, #b8322a); }
.nm-gsg-say[hidden] { display: none; }
.nm-gsg-say[data-say="done"] { border-left-color: var(--st-know, #4f6b3a); }
.nm-gsg-say .nm-dlg-line { gap: .55em; align-items: center; }
.nm-gsg-say .nm-dlg-portrait { width: 2.6em; height: 2.6em; min-width: 2.6em; }
.nm-gsg-say .nm-dlg-text { margin: 0; font-size: .98em; }
.nm-gsg-say .nm-dlg-who { font-size: .8em; }
.nm-gsg-line { margin: 0; }
/* 지금 고른 글자 알림(미리 고른 다음 글자 포함) */
.nm-gsg-now {
  margin: 0; padding: .25em .6em; border-radius: 8px; font-size: .88em; font-weight: 600;
  border: 2px dashed var(--st-focus, #d08a12); background: #fff7e0;
}
.nm-gsg-now[hidden] { display: none; }
.nm-gsg-now-glyph { font-size: 1.3em; padding: 0 .15em; line-height: 1; }
.nm-gsg-head, .nm-gsg-binname, .nm-gsg-grouphead { margin: 0; font-size: .95em; font-weight: 700; }
.nm-gsg-head { font-size: .85em; }
.nm-gsg-pool { border: 2px dashed var(--st-line, rgba(43, 36, 32, .22)); border-radius: 12px; padding: .35em .6em .45em; background: #fffaf0; }
.nm-gsg-tiles { display: flex; flex-wrap: wrap; gap: .4em; min-height: 46px; align-items: center; }
.nm-gsg-scatter { padding: .35em .1em .1em; }
.nm-gsg-empty { margin: .2em 0 0; font-size: .85em; opacity: .8; }

.nm-gsg-tile {
  position: relative; min-width: 44px; min-height: 44px; width: 2.6em; height: 2.6em; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink, #2b2420); border-radius: 10px; background: var(--paper, #f6efe2); color: var(--ink, #2b2420);
  cursor: pointer; font: inherit;
}
.nm-gsg-tile[hidden] { display: none; }
.nm-gsg-scatter .nm-gsg-tile { transform: rotate(var(--gsg-r, 0deg)) translateY(clamp(-4px, var(--gsg-dy, 0px), 4px)); animation: nm-gsg-in .45s ease-out both; }
@keyframes nm-gsg-in { from { opacity: 0; transform: rotate(0deg) translateY(-14px) scale(.8); } }
html.nm-reduced-motion .nm-gsg-tile, html[data-nm-motion="reduce"] .nm-gsg-tile { animation: none !important; transform: none !important; transition: none !important; }
.nm-gsg-glyph { font-size: 1.9em; line-height: 1; }
.nm-gsg-tile.is-selected { background: var(--hanji, #efe4cf); box-shadow: inset 0 0 0 3px var(--ink, #2b2420); }
.nm-gsg-tile.is-selected::after { content: '\25BC'; position: absolute; top: -1.05em; left: 50%; transform: translateX(-50%); font-size: .7em; }
.nm-gsg-tile:disabled { cursor: default; }
/* 앞 단계에서 맞게 갈라 고정된 글자: 흐리게 하지 않고 테두리만 옅게 */
.nm-gsg-tile.is-fixed { border-color: var(--st-line, rgba(43, 36, 32, .35)); background: #fffdf7; }
.nm-gsg-flag { position: absolute; top: -.45em; right: -.45em; min-width: 1.25em; height: 1.25em; border-radius: 50%; font-size: .78em; font-weight: 800; line-height: 1.25em; text-align: center; }
.nm-gsg-flag:empty { display: none; }
.nm-gsg-tile.is-wrong { border-style: dashed; border-color: var(--seal, #b8322a); }
.nm-gsg-tile.is-wrong .nm-gsg-glyph { opacity: .45; filter: blur(.6px); }
.nm-gsg-tile.is-wrong .nm-gsg-flag { background: var(--seal, #b8322a); color: #fff; }
.nm-gsg-tile.is-hint { outline: 3px solid var(--st-focus, #d08a12); outline-offset: 2px; }
.nm-gsg-tile.is-hint:not(.is-wrong) .nm-gsg-flag { background: var(--st-focus, #d08a12); color: #fff; }
.nm-gsg-tile.is-answer { border-width: 3px; border-style: double; }
.nm-gsg-tile.is-answer .nm-gsg-flag { background: var(--st-know, #4f6b3a); color: #fff; }

/* 칸: 넓으면 '아는 글자' | '모르는 글자'(28자 안 · 밖) 나란히, 좁으면 위아래 */
.nm-gsg-bins { display: flex; flex-wrap: wrap; gap: .55em; align-items: stretch; }
.nm-gsg-bin {
  flex: 1 1 11em; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: .3em;
  border: 2px solid var(--ink, #2b2420); border-radius: 12px; padding: .4em .55em; background: #fffaf0;
}
.nm-gsg-bin[hidden], .nm-gsg-group[hidden], .nm-gsg-grouphead[hidden] { display: none; }
.nm-gsg-bin[data-bin="known"] { border-style: solid; }
.nm-gsg-bin[data-bin="unknown"] { border-style: dashed; }
.nm-gsg-bin[data-bin="lost"] { border-style: dashed; }
.nm-gsg-bin[data-bin="outside"] { border-style: dotted; }
.nm-gsg-bin.is-hint { outline: 3px solid var(--st-focus, #d08a12); outline-offset: 2px; }
.nm-gsg-binhead { display: flex; gap: .4em; align-items: flex-start; min-width: 0; }
/* '여기에 놓기' 단추와 놓인 글자가 한 줄(넘치면 줄바꿈) */
.nm-gsg-binrow { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; align-content: flex-start; flex: none; }
.nm-gsg-binrow > .nm-gsg-tiles { display: contents; }
.nm-gsg-binmark { flex: none; width: 1.1em; height: 1.1em; margin-top: .2em; border: 2px solid currentColor; }
.nm-gsg-bin[data-bin="known"] .nm-gsg-binmark { border-radius: 50%; }
.nm-gsg-bin[data-bin="unknown"] .nm-gsg-binmark { border-radius: 2px; border-style: dashed; }
.nm-gsg-bin[data-bin="lost"] .nm-gsg-binmark { border-radius: 2px; transform: rotate(45deg) scale(.85); }
.nm-gsg-bin[data-bin="outside"] .nm-gsg-binmark { border-radius: 2px; }
.nm-gsg-binnames { min-width: 0; }
.nm-gsg-bindesc { margin: 0; font-size: .78em; line-height: 1.35; opacity: .85; }
.nm-gsg-put { flex: none; min-height: 44px; padding: .2em .75em; font-size: .85em; }
.nm-gsg-group { flex: 2 1 22em; min-width: 0; display: flex; flex-direction: column; gap: .3em; border: 2px solid var(--st-line, rgba(43, 36, 32, .22)); border-radius: 14px; padding: .35em .45em .45em; }
/* 앞 단계('모르는 글자' 한 칸): 묶음 테두리 없이 칸 하나 */
.nm-gsg-group[data-split="0"] { flex: 1 1 11em; border: none; padding: 0; }
.nm-gsg-grouphead { padding: 0 .3em; font-size: .88em; }
.nm-gsg-grouprow { display: flex; flex-wrap: wrap; gap: .45em; flex: 1 1 auto; }
.nm-gsg-grouprow > .nm-gsg-bin { flex: 1 1 8em; }
.nm-gsg-group[data-split="0"] .nm-gsg-grouprow { height: 100%; }

.nm-gsg-retry { margin: 0; padding: .3em .6em; border-radius: 8px; font-size: .88em; font-weight: 600; border: 2px dashed var(--seal, #b8322a); background: #fde9e6; }
.nm-gsg-retry[hidden] { display: none; }

/* 제출 줄: 창이 넘쳐도 창 아래에 붙어 보인다 */
.nm-gsg-foot {
  display: flex; flex-wrap: wrap; gap: .6em; align-items: center; justify-content: flex-end;
  position: sticky; bottom: -.9em; z-index: 1; margin: 0 -.3em; padding: .35em .3em;
  background: var(--paper, #f6efe2); box-shadow: 0 -6px 8px -6px rgba(43, 36, 32, .25);
}
.nm-gsg[data-state="done"] .nm-gsg-foot, .nm-gsg[data-state="doneByHelp"] .nm-gsg-foot, .nm-gsg[data-state="locked"] .nm-gsg-foot { position: static; box-shadow: none; }
.nm-gsg-left { margin-right: auto; font-size: .88em; }
.nm-gsg-foot .nm-st-btn[hidden] { display: none; }

.nm-gsg-dogam { border: 2px solid var(--ink, #2b2420); border-radius: 12px; padding: .7em .8em; background: var(--hanji, #efe4cf); }
.nm-gsg-dogam-title { margin: 0; font-size: 1.05em; }
.nm-gsg-dogam-title::before { content: '\25C6  '; }
.nm-gsg-dogam-lead { margin: .2em 0 .5em; font-size: .9em; }
.nm-gsg-dogam-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45em; }
.nm-gsg-dogam-entry { display: flex; gap: .7em; align-items: center; background: #fffaf0; border-radius: 10px; padding: .4em .6em; }
.nm-gsg-dogam-glyph { flex: none; width: 1.6em; text-align: center; font-size: 1.9em; line-height: 1.2; }
.nm-gsg-dogam-info { display: flex; flex-direction: column; min-width: 0; }
.nm-gsg-dogam-name { font-weight: 700; }
.nm-gsg-dogam-bin { font-size: .8em; opacity: .85; }
.nm-gsg-dogam-note { font-size: .9em; }

@media (max-width: 520px) {
  .nm-gsg { gap: .45em; }
  /* 흩어진 글자 상자 이름은 창 제목과 같으니 좁은 화면에서는 화면 낭독기에만(상자의 aria-label 은 그대로) */
  .nm-gsg-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nm-gsg-lead { font-size: .82em; }
  .nm-gsg-tiles { gap: .35em; }
  .nm-gsg-say { padding: .35em .5em; }
  .nm-gsg-say .nm-dlg-portrait { width: 2em; height: 2em; min-width: 2em; }
  .nm-gsg-say .nm-dlg-text { font-size: .92em; }
  /* 28자 안 · 밖 칸 설명은 좁은 화면에서 화면 낭독기에만(칸 이름과 '모르는 글자' 묶음 머리가 남는다) */
  .nm-gsg-grouprow .nm-gsg-bindesc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nm-gsg-group { flex-basis: 100%; }
  .nm-gsg-foot { bottom: -.75em; }
}