/* ═════════ mark.css — 이름 놀이 한 벌 (2026-08-30a) ═════════
   선생님 화면(teacher.html)과 학생 화면(index.html)이 **같이 쓴다.**
   두 벌이 되면 한쪽만 고쳐져 서로 달라진다 — board.css 와 같은 이유다. */

/* ── 위 메뉴 줄에 놓인다 ──
   forget + remember 에서 「t」와 「reme」가 사라지며 사이가 좁혀져
   forgember 가 된다.

   ── 세 번째로 다시 짠 까닭 ──
   앞의 두 판은 setTimeout 으로 「사라짐 → 좁혀짐 → 색」 세 걸음을 이었다.
   jsdom 에서는 잘 돌았지만 브라우저에서는 두 번째 걸음에서 멈췄다.
   시간 사슬이 길수록 어디선가 끊긴다.
   그래서 걸음을 잇지 않고 **CSS 애니메이션 하나**로 끝낸다.
   한 번 시작하면 세 바퀴를 돌고 마지막 모습에서 멈춘다(forwards).
   JS 가 하는 일은 사라질 글자의 폭을 재어 주는 것뿐이다. */
.fgMark{margin-left:auto;margin-right:auto;display:flex;align-items:baseline;gap:11px;
  --st1:#98A2B3; --mk-fg:var(--navy); --wT:.6em; --wRe:2.6em;
  flex:0 1 auto;min-width:0;white-space:nowrap}
.fgMark .nmSlide{display:inline-flex;align-items:baseline;
  font-weight:800;letter-spacing:-.04em;line-height:1;
  white-space:nowrap;font-size:19px}
.fgMark .nf,.fgMark .nr{color:var(--st1);display:inline-block}
.fgMark .nr{margin-left:.42em}
.fgMark .seg{display:inline-block;overflow:hidden;vertical-align:baseline;
  padding-bottom:.26em;margin-bottom:-.26em}
.fgKo{font-size:11.5px;color:var(--mute);font-weight:600;opacity:0}

/* 한 바퀴 2.4초. 세 바퀴 돌고 마지막 모습에서 멈춘다 */
.fgMark.play #fgT{animation:fgDropT 2.4s ease 3 forwards}
.fgMark.play #fgRe{animation:fgDropRe 2.4s ease 3 forwards}
/* 「mber」쪽은 사이 좁히기와 색을 같이 맡는다 */
.fgMark.play .nr{animation:fgTight 2.4s ease 3 forwards}
.fgMark.play .nf{animation:fgInk 2.4s ease 3 forwards}
.fgMark.play .fgKo{animation:fgKoIn 2.4s ease 3 forwards}
@keyframes fgDropT{
  0%,12%{max-width:var(--wT);opacity:1}
  32%,100%{max-width:0;opacity:0} }
@keyframes fgDropRe{
  0%,12%{max-width:var(--wRe);opacity:1}
  32%,100%{max-width:0;opacity:0} }
@keyframes fgTight{
  0%,34%{margin-left:.42em;color:var(--st1)}
  52%{margin-left:0}
  66%,100%{margin-left:0;color:var(--mk-fg)} }
@keyframes fgInk{
  0%,52%{color:var(--st1)}
  66%,100%{color:var(--mk-fg)} }
@keyframes fgKoIn{
  0%,58%{opacity:0}
  72%,100%{opacity:1} }

/* 움직임을 꺼 둔 기기 — 어지러움을 느끼는 분이 있다.
   그때는 처음부터 완성된 모습으로 둔다 */
@media (prefers-reduced-motion:reduce){
  .fgMark.play #fgT,.fgMark.play #fgRe{animation:none;max-width:0;opacity:0}
  .fgMark.play .nr{animation:none;margin-left:0}
  .fgMark.play .nf,.fgMark.play .nr{color:var(--mk-fg)}
  .fgMark.play .fgKo{animation:none;opacity:1}
}
/* 위 띠는 56px 뿐이라 좁다. 좁아지면 우리말부터, 더 좁으면 이름도 숨긴다 */
@media(max-width:1250px){ .fgKo{display:none} }
@media(max-width:1020px){ .fgMark{display:none} }