/* style/textbook-math.css */
/*
 * 게임 전역 분수 통일 규칙
 * --------------------------------
 * 구조: .textbook-math > .tm-frac > .tm-num / .tm-bar / .tm-den
 * 기본 프로필: .textbook-math--game (30px, 동일 분수선·빈칸)
 * 배경 테마: .textbook-math--on-light (흰 워크시트) / .textbook-math--on-dark (어두운 스테이지)
 * 소형: .textbook-math--size-sm (드론·UV 탭 등)
 */

/* 교과서식 수식 전체 영역 */
.textbook-math {
  --math-font: "Cambria Math", "Times New Roman", "Noto Serif KR", serif;

  /* 게임 화면 크기에 따라 여기만 조절하면 됨 */
  --math-fs: 36px;

  /* 네모칸 크기 */
  --blank-sm: 38px;
  --blank-md: 52px;
  --blank-lg: 66px;
  --blank-h: 38px;

  /* 분수 구조 */
  --num-h: 42px;
  --den-h: 40px;
  --bar-h: 2px;
  --min-bar: 0.72em;
  --bar-pad: 0.06em;
  --near-bar-gap: 1px;

  font-family: var(--math-font);
  font-size: var(--math-fs);
  font-weight: 500;
  color: #102f45;
  line-height: 1;
}

/* ===== 게임 전역 통일 프로필 (Stage 1·2 기본) ===== */
.textbook-math.textbook-math--game {
  --math-fs: 30px;
  --num-h: auto;
  --den-h: auto;
  --bar-h: 2px;
  /* 분수선: 숫자보다 살짝 넓게 (교과서식). 열 너비 = max(숫자, min-bar) */
  --min-bar: 1.12em;
  /* 0.08em+ 로 키우면 좁은 패널(s31 통분식)에서 끝자리(12의 2)가 잘림 */
  --bar-pad: 0.05em;
  --near-bar-gap: 0;
  /* 단독 □/□ 분수만 — 식 안 네모(1×□)는 --expr-near-bar-gap */
  --blank-near-bar-gap: 3px;
  --expr-near-bar-gap: 3px;
  --blank-sm: 40px;
  --blank-md: 57px;
  --blank-lg: 72px;
  --blank-h: 40px;
  --game-math-color: #0d1f35;
  --game-math-bar: #0d1f35;

  font-family: inherit;
  font-size: var(--math-fs);
  font-weight: 900;
  color: var(--game-math-color);
  line-height: 1;
}

.textbook-math.textbook-math--game .tm-frac {
  grid-template-rows: auto var(--bar-h) auto;
  grid-template-columns: max-content;
  gap: 0;
  width: max-content;
  max-width: 100%;
  justify-items: stretch;
}

.textbook-math.textbook-math--game .tm-num,
.textbook-math.textbook-math--game .tm-den {
  min-height: 0;
  padding-inline: var(--bar-pad);
  display: flex;
  justify-content: center;
  font-size: var(--math-fs);
  font-weight: 900;
  color: inherit;
  overflow: visible;
}

/* 숫자만 — 분수선에 가깝게 */
.textbook-math.textbook-math--game .tm-num {
  padding-bottom: var(--near-bar-gap);
  padding-top: 0;
  align-items: flex-end;
}

.textbook-math.textbook-math--game .tm-den {
  padding-bottom: 0;
  padding-top: var(--near-bar-gap);
  align-items: flex-start;
}

/* □/□ 처럼 분자·분모가 네모 하나뿐일 때 — 분수선 쪽에 붙임 */
.textbook-math.textbook-math--game .tm-num:has(> .tm-blank, > .edu-blank-input, > .stage1-scale-blank-input, > .s12-summary-input) {
  padding-bottom: var(--blank-near-bar-gap);
  padding-top: 0;
  align-items: flex-end;
}

.textbook-math.textbook-math--game .tm-den:has(> .tm-blank, > .edu-blank-input, > .stage1-scale-blank-input, > .s12-summary-input) {
  padding-top: var(--blank-near-bar-gap);
  padding-bottom: 0;
  align-items: flex-start;
}

/* 1×□ 식 — 숫자와 네모 밑줄 맞춤, 분수선 간격 최소 */
.textbook-math.textbook-math--game .tm-num:has(.tm-expr) {
  padding-bottom: var(--expr-near-bar-gap);
  padding-top: 0;
  align-items: flex-end;
}

.textbook-math.textbook-math--game .tm-den:has(.tm-expr) {
  padding-top: var(--expr-near-bar-gap);
  padding-bottom: 0;
  align-items: flex-start;
}

.textbook-math.textbook-math--game .tm-expr:has(.tm-blank) {
  align-items: flex-start;
  gap: 0.12em;
}

.textbook-math.textbook-math--game .tm-num .tm-expr:has(.tm-blank) {
  align-items: flex-end;
}

.textbook-math.textbook-math--game .tm-bar {
  background: var(--game-math-bar);
  border-radius: 999px;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.textbook-math.textbook-math--game .tm-bar.eq-fraction-line,
.textbook-math.textbook-math--game .tm-bar.fraction-line {
  width: 100%;
  margin: 0;
}

/*
 * 레거시 stage*.css 차단 — 스테이지마다 tm-bar를 고치지 않도록
 * (stage1 .eq-fraction { min-width:1.95em }, .eq-fraction-line { width:1.12em } 등)
 */
.textbook-math.textbook-math--game:not(:has(.tm-line)) {
  width: max-content;
  max-width: 100%;
}

.textbook-math.textbook-math--game .tm-frac.eq-fraction,
.textbook-math.textbook-math--game .tm-frac.math-fraction {
  min-width: 0;
  width: max-content;
  max-width: 100%;
}

.textbook-math.textbook-math--game .fraction-line,
.textbook-math.textbook-math--game .eq-fraction-line,
.textbook-math.textbook-math--game .tm-frac .tm-bar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--bar-h);
  margin: 0;
  opacity: 1;
}

.textbook-math.textbook-math--game .tm-op,
.textbook-math.textbook-math--game .tm-paren {
  font-size: var(--math-fs);
  font-weight: 900;
  color: inherit;
}

.textbook-math.textbook-math--game .tm-blank {
  font-family: inherit;
  font-size: calc(var(--math-fs) * 0.9);
  font-weight: 900;
  color: var(--game-math-color);
  border: 2px solid rgba(90, 180, 240, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 8px rgba(80, 190, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* 흰 워크시트·밝은 카드 */
.textbook-math.textbook-math--on-light {
  --game-math-color: #0d1f35;
  --game-math-bar: #0d1f35;
  color: #0d1f35;
}

/* 어두운 스테이지·UV·드론 패널 */
.textbook-math.textbook-math--on-dark {
  --game-math-color: #dffcff;
  --game-math-bar: rgba(230, 250, 255, 0.95);
  color: #dffcff;
}

.textbook-math.textbook-math--on-dark .tm-blank {
  color: #9af8ff;
  background: rgba(3, 16, 28, 0.9);
  border-color: rgba(132, 226, 255, 0.58);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(78, 212, 255, 0.14);
}

/* 소형 분수 (UV 탭·드론) */
.textbook-math.textbook-math--size-sm {
  --math-fs: 20px;
  --blank-sm: 34px;
  --blank-md: 44px;
  --blank-h: 34px;
  --min-bar: 1.12em;
  --bar-pad: 0.04em;
}

/* s14 이동 카드: 작은 화면에서도 달리는 분수를 한눈에 읽을 수 있는 전용 크기 */
body.s14-ui-active .s14-fraction-card .textbook-math.textbook-math--game {
  --math-fs: 30px;
  --bar-h: 3px;
  --min-bar: 1.16em;
}

/* Stage 3-2 통분 교과서 패널 (s32) — 분수·빈칸 모양은 여기서, 레이아웃은 s32.js 주입 CSS */
.textbook-math.textbook-math--s32 {
  --bar-h: 2px;
  --min-bar: 0;
}

/* S32 밝은 보드: on-light + s32 */
.textbook-math.textbook-math--on-light.textbook-math--s32 {
  --math-fs: clamp(28px, 2.6vw, 38px);
  --blank-sm: calc(var(--math-fs) * 1.08);
  --blank-md: calc(var(--math-fs) * 1.48);
  --blank-h: calc(var(--math-fs) * 1.08);
  --num-h: var(--blank-h);
  --den-h: var(--blank-h);
  --near-bar-gap: 2px;
  --blank-near-bar-gap: 2px;
  --expr-near-bar-gap: 2px;
  --bar-pad: 0.05em;
  --min-bar: 1.2em;
  --game-math-color: #0d1f35;
  --game-math-bar: #0d1f35;
  color: #0d1f35;
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-frac {
  grid-template-rows: var(--num-h) var(--bar-h) var(--den-h);
  gap: 0;
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-num {
  min-height: var(--num-h);
  padding-bottom: var(--near-bar-gap);
  padding-top: 0;
  align-items: flex-end;
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-den {
  min-height: var(--den-h);
  padding-top: var(--near-bar-gap);
  padding-bottom: 0;
  align-items: flex-start;
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-num:has(> .tm-blank, > .s32-fraction-input, > .edu-blank-input) {
  padding-bottom: var(--blank-near-bar-gap);
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-den:has(> .tm-blank, > .s32-fraction-input, > .edu-blank-input) {
  padding-top: var(--blank-near-bar-gap);
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-num:has(.tm-expr) {
  padding-bottom: var(--expr-near-bar-gap);
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-den:has(.tm-expr) {
  padding-top: var(--expr-near-bar-gap);
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-num,
.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-den,
.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-op,
.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-whole {
  color: #0d1f35;
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-bar {
  background: #0d1f35;
  box-shadow: none;
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-blank.s32-fraction-input {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--math-fs);
  font-weight: 900;
  height: var(--blank-h);
  color: #0d1f35;
  caret-color: #0d1f35;
  -webkit-text-fill-color: #0d1f35;
  border-color: rgba(120, 200, 255, 0.55);
  background: rgba(255, 255, 255, 0.96);
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-blank.s32-fraction-input:disabled:not(.is-correct) {
  opacity: 0.42;
  border-color: rgba(120, 200, 255, 0.32);
  background: rgba(248, 252, 255, 0.72);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.textbook-math.textbook-math--on-light.textbook-math--s32 .tm-blank.s32-fraction-input.is-correct:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--edu-blank-input-correct-border, #45d8ff);
  background: rgba(230, 250, 255, 0.98);
  box-shadow: var(--edu-blank-input-correct-shadow, 0 0 12px rgba(69, 216, 255, 0.28));
  opacity: 1;
}

/* s31 레거시 어두운 s32 테마 (직접 ?stage=3-2 밝은 보드에서는 on-light가 우선) */
.textbook-math.textbook-math--s32:not(.textbook-math--on-light) {
  --game-math-bar: rgba(246, 255, 255, 0.92);
  color: #f6ffff;
}

.textbook-math.textbook-math--s32 .tm-num,
.textbook-math.textbook-math--s32 .tm-den {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.textbook-math.textbook-math--s32:not(.textbook-math--on-light) .tm-bar {
  box-shadow: 0 0 10px rgba(114, 255, 242, 0.3);
}

/* s31 주입 CSS(20px 빈칸)보다 우선 — S32 밝은 보드 */
.dual-textbook-stage.s32-bright-board .dual-method-sheet .textbook-math.textbook-math--s32 {
  display: inline-block;
  width: auto;
  max-width: none;
  vertical-align: middle;
}

.dual-textbook-stage.s32-bright-board .dual-method-sheet .textbook-math.textbook-math--s32 .tm-frac {
  width: max-content;
  max-width: max-content;
  min-width: 0;
  grid-template-columns: max-content;
  grid-template-rows: var(--num-h, var(--blank-h)) var(--bar-h, 2px) var(--den-h, var(--blank-h));
  justify-items: stretch;
  align-items: stretch;
}

.dual-textbook-stage.s32-bright-board .dual-method-sheet .textbook-math.textbook-math--s32 .tm-num,
.dual-textbook-stage.s32-bright-board .dual-method-sheet .textbook-math.textbook-math--s32 .tm-den {
  width: 100%;
  min-width: var(--min-bar);
  max-width: none;
  justify-self: stretch;
  box-sizing: border-box;
}

.dual-textbook-stage.s32-bright-board .dual-method-sheet .textbook-math.textbook-math--s32 .tm-bar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
}

.dual-textbook-stage.s32-bright-board .dual-method-sheet .textbook-math.textbook-math--s32 .tm-blank.s32-fraction-input {
  box-sizing: border-box;
  display: inline-block !important;
  flex: 0 0 auto;
  width: var(--blank-sm);
  min-width: var(--blank-sm);
  max-width: var(--blank-sm);
  font-size: var(--math-fs) !important;
  font-weight: 900 !important;
  height: var(--blank-h) !important;
  line-height: var(--blank-h);
  padding-top: 0;
  padding-bottom: 0;
}

.dual-textbook-stage.s32-bright-board .dual-method-sheet .textbook-math.textbook-math--s32 .tm-blank-md.s32-fraction-input {
  width: var(--blank-md);
  min-width: var(--blank-md);
  max-width: var(--blank-md);
}

.textbook-problem-bar.dual-problem-bar .textbook-math.textbook-math--s32 {
  font-size: 0.92em;
}

.textbook-problem-bar.dual-problem-bar .textbook-math.textbook-math--s32 .tm-frac {
  min-width: 0;
  width: max-content;
  grid-template-rows: auto 2px auto;
}

.textbook-problem-bar.dual-problem-bar .textbook-math.textbook-math--s32 .tm-bar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 2px;
  box-shadow: none;
}

.dual-method-sheet .textbook-math.textbook-math--s32 .tm-frac {
  min-width: 46px;
  grid-template-rows: auto 2px auto;
}

.dual-method-sheet .textbook-math.textbook-math--s32 .tm-bar {
  min-width: 42px;
  height: 2px;
}

.compare-card-summary .textbook-math.textbook-math--s32 {
  font-size: 0.92em;
}

.compare-card-summary .textbook-math.textbook-math--s32 .tm-frac {
  min-width: 34px;
  vertical-align: middle;
}

.compare-card-summary .textbook-math.textbook-math--s32 .tm-bar {
  min-width: 30px;
}

@media (max-width: 1280px) {
  .dual-textbook-main .textbook-math.textbook-math--s32 .tm-frac {
    min-width: 56px;
  }

  .dual-textbook-main .textbook-math.textbook-math--s32 .tm-bar {
    min-width: 48px;
  }
}

/* 부모 글자 크기·색을 그대로 쓰는 인라인 분수 (레거시) */
.textbook-math.textbook-math--inherit {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}

.textbook-math.textbook-math--inherit .tm-num,
.textbook-math.textbook-math--inherit .tm-den,
.textbook-math.textbook-math--inherit .tm-op,
.textbook-math.textbook-math--inherit .tm-paren,
.textbook-math.textbook-math--inherit .tm-whole {
  font-size: inherit;
}

/* 작은 탭·카드 라벨용 — 고정 42/40px 행 높이 해제 */
.textbook-math.textbook-math--compact {
  --num-h: auto;
  --den-h: auto;
  --bar-h: 2px;
  --min-bar: 1.15em;
  --near-bar-gap: 0;
  --bar-pad: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

/* 흰 워크시트(분수 막대 복구 등) — 교과서 구조 + 기존 숫자 크기 유지 */
.textbook-math.textbook-math--worksheet {
  --num-h: auto;
  --den-h: auto;
  --bar-h: 2px;
  --min-bar: 1.15em;
  --near-bar-gap: 0;
  --bar-pad: 0;
  --blank-sm: 40px;
  --blank-md: 57px;
  --blank-h: 40px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1;
}

.textbook-math.textbook-math--worksheet .tm-frac {
  grid-template-rows: auto var(--bar-h) auto;
  gap: 0;
}

.textbook-math.textbook-math--worksheet .tm-num,
.textbook-math.textbook-math--worksheet .tm-den {
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.textbook-math.textbook-math--worksheet .tm-blank {
  font-family: inherit;
  font-size: inherit;
  border-color: rgba(90, 180, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 8px rgba(80, 190, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.textbook-math.textbook-math--compact .tm-frac {
  grid-template-rows: auto var(--bar-h) auto;
}

.textbook-math.textbook-math--compact .tm-num,
.textbook-math.textbook-math--compact .tm-den {
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* 수식 한 줄 */
.textbook-math .tm-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* +, -, =, 괄호 등 */
.textbook-math .tm-op,
.textbook-math .tm-paren {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 괄호는 살짝 크게 */
.textbook-math .tm-paren {
  font-size: 1.15em;
}

/* 분수 전체 */
.textbook-math .tm-frac {
  display: inline-grid;
  grid-template-rows: var(--num-h) var(--bar-h) var(--den-h);
  grid-template-columns: max-content;
  vertical-align: middle;
  line-height: 1;
}

/* 분자 */
.textbook-math .tm-num {
  grid-row: 1;
  grid-column: 1;

  min-width: var(--min-bar);
  padding-inline: var(--bar-pad);
  padding-bottom: var(--near-bar-gap);
  box-sizing: border-box;

  display: flex;
  align-items: flex-end;     /* 분수선 쪽으로 붙임 */
  justify-content: center;
  white-space: nowrap;
}

/* 분수선 */
.textbook-math .tm-bar {
  grid-row: 2;
  grid-column: 1;

  justify-self: stretch;
  height: var(--bar-h);
  background: currentColor;
  border-radius: 999px;
}

/* 분모 */
.textbook-math .tm-den {
  grid-row: 3;
  grid-column: 1;

  min-width: var(--min-bar);
  padding-inline: var(--bar-pad);
  padding-top: var(--near-bar-gap);
  box-sizing: border-box;

  display: flex;
  align-items: flex-start;   /* 분수선 쪽으로 붙임 */
  justify-content: center;
  white-space: nowrap;
}

/* 분자/분모 안의 식: 1×□, 3×2 같은 것 */
.textbook-math .tm-expr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

/* 대분수: 자연수 + 분수 */
.textbook-math .tm-mixed {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.textbook-math .tm-whole {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--math-fs);
  font-weight: 900;
  line-height: 1;
  color: inherit;
}

/* 네모칸 */
.textbook-math .tm-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--blank-h);
  border: 2px solid #20bfff;
  border-radius: 6px;
  background: #f7fdff;
  box-sizing: border-box;

  font-family: inherit;
  font-size: 0.78em;
  font-weight: 500;
  color: #102f45;
  text-align: center;
  line-height: 1;

  outline: none;
  padding: 0;
}

/* 한 자리용 */
.textbook-math .tm-blank-sm {
  width: var(--blank-sm);
}

/* 두 자리용 */
.textbook-math .tm-blank-md {
  width: var(--blank-md);
}

/* 세 자리 또는 결과값용 */
.textbook-math .tm-blank-lg {
  width: var(--blank-lg);
}

/* 자연수 자리에 있는 네모 */
.textbook-math .tm-whole-blank {
  vertical-align: middle;
}

/* 빈칸 피드백 (Stage 1·2 공통) */
.textbook-math .tm-blank.is-correct,
.textbook-math .tm-blank.stage1-scale-blank-input.is-correct {
  border-color: #4fc3e8;
  background: #e8f8ff;
}

.textbook-math .tm-blank.is-error,
.textbook-math .tm-blank.stage1-scale-blank-input.is-error {
  border-color: rgba(245, 158, 11, 0.72);
  background: rgba(255, 251, 235, 0.98);
}

.textbook-math .tm-blank:focus-visible,
.textbook-math .tm-blank.stage1-scale-blank-input:focus-visible {
  border-color: #35c9ff;
  box-shadow:
    0 0 0 2px rgba(53, 201, 255, 0.18),
    0 0 12px rgba(53, 201, 255, 0.22);
}

/* Stage 4/5/6 — legacy fraction classes on unified tm structure */
.s4-fraction.tm-frac,
.s51-code-frac.tm-frac,
.s52-frac.tm-frac,
.textbook-frac.tm-frac {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  align-items: center;
  justify-items: center;
  gap: 0;
  vertical-align: middle;
  line-height: 0.92;
}

/*
 * 전역 적용 보장 — stage*.css의 옛 분수 규칙 무력화
 * (이 파일이 ui.css 뒤에 로드되므로 게임 전역 프로필이 최종 우선)
 */
.textbook-math.textbook-math--game .eq-fraction:not(.tm-frac) {
  display: inline-grid;
  grid-template-rows: auto var(--bar-h) auto;
  grid-template-columns: max-content;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.textbook-math.textbook-math--game .eq-fraction-num,
.textbook-math.textbook-math--game .fraction-numerator,
.textbook-math.textbook-math--game .tm-num {
  min-width: var(--min-bar);
  padding-inline: var(--bar-pad);
}

.textbook-math.textbook-math--game .eq-fraction-den,
.textbook-math.textbook-math--game .fraction-denominator,
.textbook-math.textbook-math--game .tm-den {
  min-width: var(--min-bar);
  padding-inline: var(--bar-pad);
}

.textbook-math.textbook-math--game .eq-fraction-line,
.textbook-math.textbook-math--game .fraction-line,
.textbook-math.textbook-math--game .tm-bar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--bar-h);
  margin: 0;
  background: var(--game-math-bar, currentColor);
  opacity: 1;
}

.textbook-math.textbook-math--game .tm-op,
.textbook-math.textbook-math--game .tm-expr,
.textbook-math.textbook-math--game .tm-paren,
.textbook-math.textbook-math--game .tm-whole {
  font-size: var(--math-fs);
  font-weight: 900;
  color: inherit;
  line-height: 1;
}

.textbook-math.textbook-math--game .tm-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
}

/* ===== Stage 4 — textbook-math 통일 (tm-* 전용) ===== */
body.stage4-ui-active .s4-fraction.tm-frac {
  min-width: 0;
  vertical-align: middle;
}

/* 대분수 — 자연수·분자·분모 숫자 크기 통일 */
body.stage4-ui-active .textbook-math .s4-mixed {
  align-items: center;
  gap: 0.06em;
}

body.stage4-ui-active .textbook-math .s4-mixed > strong,
body.stage4-ui-active .textbook-math .s4-mixed .tm-whole {
  font-size: var(--math-fs);
  font-weight: 900;
  line-height: 1;
  color: inherit;
}

/* s44 이동 카드: size-sm 자동 분류와 관계없이 자연수를 카드 분수(30px)에 맞춘다. */
body.stage4-ui-active .textbook-math.s44-card-mixed {
  --math-fs: 30px;
}

body.stage4-ui-active .textbook-math .s4-fraction.tm-frac .tm-bar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--bar-h);
  margin: 0;
  border-radius: 2px;
  background: var(--game-math-bar, currentColor);
  opacity: 1;
}

body.stage4-ui-active .textbook-math .s4-fraction.tm-frac .tm-num,
body.stage4-ui-active .textbook-math .s4-fraction.tm-frac .tm-den {
  min-width: var(--min-bar, 0);
  padding-inline: var(--bar-pad, 0);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: inherit;
}

/* s41·s42 밝은 워크시트 */
body.stage4-ui-active .s4-learning-one-workbench .textbook-math,
body.stage4-ui-active #s42-center-panel .textbook-math {
  --game-math-color: #111111;
  --game-math-bar: #222222;
  color: #111111;
}

body.stage4-ui-active .s4-learning-one-workbench .textbook-math .tm-num,
body.stage4-ui-active .s4-learning-one-workbench .textbook-math .tm-den,
body.stage4-ui-active #s42-center-panel .textbook-math .tm-num,
body.stage4-ui-active #s42-center-panel .textbook-math .tm-den {
  color: #111111;
}

body.stage4-ui-active #s42-center-panel .textbook-math .tm-bar {
  background: rgba(194, 151, 98, 0.92);
}

body.stage4-ui-active .s4-learning-one-workbench .s4-l1-result-mixed .textbook-math,
body.stage4-ui-active .s4-learning-one-workbench .s4-l1-result-mixed .textbook-math .tm-num,
body.stage4-ui-active .s4-learning-one-workbench .s4-l1-result-mixed .textbook-math .tm-den {
  color: #17384d;
}

/* s43 어두운 카드 워크벤치 */
body.stage4-ui-active .s43-card-workbench .textbook-math {
  --game-math-color: #fff4d8;
  --game-math-bar: rgba(255, 225, 170, 0.92);
  color: #fff4d8;
}

body.stage4-ui-active .s43-card-workbench .textbook-math .tm-num,
body.stage4-ui-active .s43-card-workbench .textbook-math .tm-den {
  color: #fff4d8;
}

body.stage4-ui-active .s43-card-workbench .textbook-math .tm-bar {
  height: 3px;
  background: rgba(255, 225, 170, 0.92);
}

body.stage4-ui-active .s43-card-workbench .s4-l2m-input-frac.tm-frac {
  grid-template-rows: auto 3px auto;
  gap: 2px;
}

body.stage4-ui-active .s43-card-workbench .s4-l2m-input-frac .tm-bar {
  width: 1.35em;
  min-width: 1.35em;
}

/* s44 러너 — 어두운 보드 */
body.stage4-ui-active .s44-runner-main .textbook-math,
body.stage4-ui-active .s44-equation-stack .textbook-math,
body.stage4-ui-active .s44-problem-expr .textbook-math {
  --game-math-color: #fff8e8;
  --game-math-bar: #fff0c9;
  color: #fff8e8;
}

body.stage4-ui-active .s44-runner-main .textbook-math .tm-num,
body.stage4-ui-active .s44-runner-main .textbook-math .tm-den,
body.stage4-ui-active .s44-equation-stack .textbook-math .tm-num,
body.stage4-ui-active .s44-equation-stack .textbook-math .tm-den,
body.stage4-ui-active .s44-problem-expr .textbook-math .tm-num,
body.stage4-ui-active .s44-problem-expr .textbook-math .tm-den {
  color: #fff8e8;
}

body.stage4-ui-active .s44-blank-frac .textbook-math .tm-bar {
  height: 3px;
  min-width: 28px;
  background: rgba(255, 240, 200, 0.95);
}

body.stage4-ui-active .s44-plank-card .textbook-math,
body.stage4-ui-active .s44-convert-card-value .textbook-math {
  --game-math-color: #fff8e8;
  --game-math-bar: rgba(255, 240, 200, 0.95);
  color: #fff8e8;
}

body.stage4-ui-active .s44-plank-card .textbook-math .tm-num,
body.stage4-ui-active .s44-plank-card .textbook-math .tm-den {
  color: #fff9ed;
  font-size: 30px;
  text-shadow: 0 2px 3px rgba(46, 20, 5, 0.72);
}

body.stage4-ui-active .s44-plank-card .textbook-math .tm-bar {
  min-width: 26px;
  background: #fff2d9;
}

body.stage4-ui-active .s44-problem-expr .textbook-math .tm-bar,
body.stage4-ui-active .s44-runner-main .textbook-math .tm-bar,
body.stage4-ui-active .s44-equation-stack .textbook-math .tm-bar {
  width: calc(100% + 2px);
  min-width: 0;
  margin: 1px 0;
}

/* s41 게임 보드(체육관) — 선택지·마루판 카드 */
body.stage4-ui-active .s4-answer-choice .textbook-math,
body.stage4-ui-active .s4-plank-card .textbook-math,
body.stage4-ui-active .s4-selected-slot .textbook-math,
body.stage4-ui-active .s4-needed-length .textbook-math,
body.stage4-ui-active .s4-install-plank .textbook-math {
  --game-math-bar: #bcefff;
}

body.stage4-ui-active .s4-method-steps .textbook-math,
body.stage4-ui-active .s4-mini-equation .textbook-math,
body.stage4-ui-active .s4-improper-step-card .textbook-math {
  --math-fs: 16px;
}

body.stage4-ui-active .s4-l2m-eq-row .textbook-math .tm-bar,
body.stage4-ui-active .s4-l2m-eq-line .textbook-math .tm-bar {
  background: rgba(194, 151, 98, 0.92);
}

/* 화면이 작을 때 */
@media (max-width: 768px) {
  .textbook-math {
    --math-fs: 30px;
    --blank-sm: 34px;
    --blank-md: 46px;
    --blank-lg: 58px;
    --blank-h: 34px;
    --num-h: 38px;
    --den-h: 36px;
  }
}

/*
 * Stage tool add/sub result: match proper-fraction □/12 blanks
 * (ui.css 20px blanks + 30px digits) for mixed whole/fraction lines too.
 */
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .textbook-math,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .textbook-math,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .textbook-math,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .textbook-math{
  --math-fs:30px !important;
  --blank-sm:20px !important;
  --blank-h:20px !important;
  --blank-near-bar-gap:2px !important;
  --min-bar:1.05em !important;
}

.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .eq-math-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .eq-math-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .eq-math-blank.tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .eq-math-blank.tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-whole-line .eq-math-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-whole-line .eq-math-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-whole-line .eq-math-blank.tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-whole-line .eq-math-blank.tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .eq-math-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .eq-math-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .eq-math-blank.tm-blank,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .eq-math-blank.tm-blank{
  width:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;
  padding:0 !important;
  border:2px dashed #85c9df !important;
  border-radius:6px !important;
  background:#ffffff !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  flex:0 0 20px !important;
  display:block !important;
  box-sizing:border-box !important;
}

.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-whole-line .eq-math-plain-line,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-whole-line .eq-math-plain-line{
  font-size:30px !important;
  font-weight:900 !important;
  gap:14px !important;
}

.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-whole-line .eq-math-plain-line > span:not(.eq-math-blank),
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-whole-line .eq-math-plain-line > span:not(.eq-math-blank){
  font-size:30px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#17384a !important;
}

.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-whole-line .eq-math-symbol,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-whole-line .eq-math-symbol,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .eq-math-symbol,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .eq-math-symbol,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .eq-math-symbol,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .eq-math-symbol{
  font-size:28px !important;
  font-weight:900 !important;
  color:#17384a !important;
}

.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .tm-num,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .tm-num,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .tm-den,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .tm-den,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-blank-equation .eq-fraction-den,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-blank-equation .eq-fraction-den,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .tm-num,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .tm-num,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .tm-den,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .tm-den,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="add"] .eq-math-fraction-line .eq-fraction-den,
.eq-math-tool-panel[data-stage-shared-tool="true"][data-tool-id="sub"] .eq-math-fraction-line .eq-fraction-den{
  font-size:30px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#17384a !important;
}