.s62-screen{
  --s62-wrap-w:1200px;
  --s62-box-h:calc(720px - 1.5cm + 34px + 1cm);
  --s62-main-shift-y:0px;
  --s62-content-shift-y:1.5cm;
  --s62-frac-work-shift-y:2cm;
  --s62-card-w:500px;
  --s62-card-h:220px;
  --s62-card-gap:32px;
  --s62-card-pad-x:24px;
  --s62-card-pad-top:18px;
  --s62-card-content-up:38px;
  --s62-orange-card-shift:76px;
  --s62-blue-card-nudge:38px; /* 약 1cm @1920 — 파란 카드 오른쪽 */
  --s62-orange-card-nudge:38px; /* 약 1cm @1920 — 주황 카드 왼쪽 */
  --s62-natural-drop-offset:16px; /* 자연수 막대 낙하 거리 — 분수 결과와 겹치지 않게 짧게 */
  --s62-natural-stage-gap:48px; /* 분수 결과 막대와 자연수 막대 사이 간격 */
  --s62-fraction-precheck-gap:12px; /* 분수 부분 식 — 파란 막대 아래 간격 */
  --s62-fraction-precheck-shift-y:76px; /* 약 2cm — 파란 막대 아래 추가 간격 */
  --s62-fraction-result-side-gap:12px; /* 분수 부분 결과 — 막대 오른쪽 간격 */
  --s62-dimmed-opacity:0.38;
  --s62-mixed-display-size:26px;
  --s62-bar-w:320px;
  --s62-s51-bar-h:calc(62px * 2 / 3);
  --s62-bar-h:var(--s62-s51-bar-h);
  --s62-bar-gap:calc(10px * 2 / 3);
  --s62-workbar-w:320px;
  /* s61과 동일한 분수 막대 팔레트 */
  --s62-bar-blue-fill:linear-gradient(180deg, #4A9FD2, #2F7FB5);
  --s62-bar-orange-fill:linear-gradient(180deg, #F2A05B, #D87935);
  --s62-bar-empty:#E5EBEE;
  --s62-bar-divider-bg:#B8C9D4;
  --s62-bar-tray-border:#9AADB8;
  --s62-bar-seg-gap:2px;
  --s62-bar-outer-radius:10px;
  --s62-blue:#4A9FD2;
  --s62-blue-deep:#2F7FB5;
  --s62-orange:#F2A05B;
  --s62-orange-deep:#D87935;
  --s62-common-blue-left:146px;
  --s62-common-label-left:468px;
  --s62-common-compare-left:656px;
  --s62-problem-beside-gap:14px;
  --s62-left-stack-top:22px;
  --s62-whole-2-y:calc(var(--s62-left-stack-top) + var(--s62-bar-h) + var(--s62-bar-gap));
  --s62-problem-beside-top:calc(var(--s62-whole-2-y) + 4px);
  --s62-card-badge-h:46px;
  --s62-card-inner-pad-top:14px;
  --s62-badge-stack-gap:8px;
  --s62-stack-max-bars:5;
  --s62-stack-top:calc(var(--s62-card-inner-pad-top) + var(--s62-card-badge-h) + var(--s62-badge-stack-gap));
  --s62-stack-max-h:calc(var(--s62-stack-max-bars) * var(--s62-bar-h) + (var(--s62-stack-max-bars) - 1) * var(--s62-bar-gap));
  --s62-card-badge-shift-left:0px;
  --s62-frac-drop-target-y:calc(508px - 2cm + var(--s62-frac-work-shift-y));
  --s62-learning-panel-top:176px;
  --s62-learning-panel-width:1260px;
  --s62-learning-panel-height:calc(580px + 1cm);
  --s62-learning-panel-bg:rgba(2,14,26,.46);
  --s62-learning-panel-pad-x:34px;
  --s62-learning-panel-pad-y:28px;
  position:relative;
  width:1920px;
  height:1080px;
  overflow:hidden;
  color:#effbff;
  background:#030711;
}

.s62-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(8,12,18,.24), rgba(8,12,18,.08), rgba(8,12,18,.24)),
    url("../assets/images/s6.png") center / cover no-repeat;
  filter:brightness(.92) saturate(.92);
}

.s62-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.36));
}

.s62-learning-panel{
  position:absolute;
  left:50%;
  top:var(--s62-learning-panel-top);
  z-index:3;
  width:var(--s62-learning-panel-width);
  height:var(--s62-learning-panel-height);
  transform:translateX(-50%);
  border:1px solid rgba(141,239,255,.28);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(5,18,31,.46), rgba(2,13,24,.38)),
    var(--s62-learning-panel-bg);
  box-shadow:
    0 14px 30px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 16px rgba(82,205,244,.08);
  backdrop-filter:blur(1px);
  pointer-events:none;
  transition:width .35s ease, height .35s ease, top .35s ease, left .35s ease, background .35s ease, box-shadow .35s ease;
}

.s62-learning-panel.is-panel-synced{
  transform:translateX(-50%);
}

.s62-screen[data-phase="question"] .s62-common-question,
.s62-screen[data-phase="common"] .s62-common-question{
  /* 통분 단계에서도 계산 작업 흰 창 배경은 유지 */
  border-color:#54bce3;
  background:#ffffff;
  box-shadow:0 10px 22px rgba(36, 58, 76, .10);
}

.s62-wrap{
  position:absolute;
  left:176px;
  top:calc(122px + var(--s62-main-shift-y));
  z-index:5;
  width:var(--s62-wrap-w);
  min-height:650px;
}

.s62-scene-title{
  position:absolute;
  left:214px;
  top:66px;
  z-index:91;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  width:max-content;
  max-width:760px;
  pointer-events:none;
  text-align:left;
}

.s62-scene-title-main{
  margin:0;
  padding:6px 18px;
  border:1px solid rgba(141,239,255,.44);
  border-radius:999px;
  background:rgba(2,14,26,.68);
  box-shadow:0 0 18px rgba(82,205,244,.16), inset 0 1px 0 rgba(255,255,255,.07);
  color:#d8f4ff;
  font-size:16px;
  font-weight:850;
  line-height:1.25;
  white-space:nowrap;
}

.s62-stepbar{
  position:absolute;
  left:50%;
  top:78px;
  transform:translateX(-50%);
  z-index:32;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  pointer-events:none;
}

.s62-step-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 13px;
  border:1px solid rgba(141,239,255,.28);
  border-radius:999px;
  background:rgba(2,14,26,.74);
  color:rgba(218,242,255,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  font-size:14px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  transition:color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.s62-step-index{
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:12px;
  font-weight:950;
  line-height:1;
}

.s62-step-item.is-current{
  color:#e8fbff;
  border-color:rgba(141,239,255,.78);
  background:rgba(6,33,52,.88);
  box-shadow:0 0 18px rgba(82,205,244,.26), inset 0 1px 0 rgba(255,255,255,.08);
}

.s62-step-item.is-done{
  color:rgba(160,255,220,.9);
  border-color:rgba(110,232,176,.5);
  background:rgba(4,26,28,.7);
}

.s62-step-item.is-waiting{
  opacity:.62;
}

.s62-problem{
  display:grid;
  grid-template-columns:var(--s62-card-w) var(--s62-card-w);
  gap:var(--s62-card-gap);
  justify-content:center;
  align-items:start;
  transition:opacity .45s ease, transform .45s ease;
}

.s62-problem.s62-top-area-dimmed{
  pointer-events:none;
}

.s62-problem.s62-source-bars-dimmed .s62-whole-bar,
.s62-problem.s62-source-bars-dimmed .s62-origin-frac-bar{
  opacity:.42;
  filter:none;
  transition:opacity .4s ease, filter .4s ease;
}

.s62-problem.s62-top-area-dimmed .s62-card-badge,
.s62-problem.s62-top-area-dimmed .s62-whole-bar{
  opacity:0.28;
  filter:brightness(0.7);
  transition:opacity .4s ease, filter .4s ease;
}

.s62-problem.s62-top-area-dimmed.s62-top-borrowed .s62-blue-wrap .s62-card-badge{
  opacity:.78;
  filter:brightness(.95);
}

.s62-problem.s62-top-area-dimmed .s62-whole-bar.s62-borrow-source-used{
  opacity:.1;
  filter:saturate(.15) brightness(.48);
}

.s62-problem.s62-top-area-dimmed .s62-whole-bar.s62-borrow-source-used .s62-bar span.is-fill{
  background:var(--s62-bar-empty, #E5EBEE);
  box-shadow:none;
}

.s62-problem.s62-top-area-dimmed .s62-frac-drop-wrap,
.s62-problem.s62-fraction-dropped .s62-frac-drop-wrap,
.s62-fraction-flight .s62-frac-drop-wrap{
  opacity:1;
  filter:none;
}

.s62-problem.s62-top-area-dimmed .s62-problem-card-wrap{
  opacity:1;
  filter:none;
}

.s62-problem.s62-fraction-dropping,
.s62-problem.s62-fraction-dropped{
  overflow:visible;
}

.s62-problem.s62-fraction-dropping .s62-card,
.s62-problem.s62-fraction-dropped .s62-card,
.s62-problem.s62-fraction-dropping .s62-card-stack,
.s62-problem.s62-fraction-dropped .s62-card-stack{
  overflow:visible;
}

.s62-frac-drop-wrap{
  position:relative;
  z-index:8;
  width:var(--s62-bar-w);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  will-change:transform;
}

.s62-frac-drop-wrap.is-dropping{
  z-index:14;
}

.s62-frac-drop-wrap.is-descended .s62-source-frac-bar{
  filter:drop-shadow(0 0 14px rgba(94,210,255,.18));
}

.s62-orange-wrap .s62-frac-drop-wrap.is-descended .s62-source-frac-bar{
  filter:drop-shadow(0 4px 14px rgba(255,120,50,.32));
}

.s62-frac-drop-label{
  width:var(--s62-bar-w);
  color:#e8f8ff;
  margin-top:8px;
  font-size:24px;
  font-weight:950;
  text-align:center;
  line-height:1;
  height:0;
  overflow:hidden;
  opacity:0;
}

.s62-fraction-dropped .s62-frac-drop-label{
  height:auto;
  overflow:visible;
  animation:s62-frac-label-in .35s ease .12s forwards;
}

.s62-fraction-flight .s62-frac-drop-label{
  height:auto;
  overflow:visible;
  opacity:1;
}

/* 막대 아래 기본 3/6·4/6 숫자는 표시하지 않음 (받아내림 식만 표시) */
.s62-fraction-flight .s62-frac-drop-label:not(.is-borrow-inline):not(.is-borrow-resolved){
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.s62-fraction-flight .s62-frac-drop-label.is-borrow-inline,
.s62-fraction-flight .s62-frac-drop-label.is-borrow-resolved{
  display:flex !important;
  height:auto !important;
  min-height:38px !important;
  margin-top:4px !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.s62-fraction-flight.is-compare-attempt .s62-frac-drop-label,
.s62-fraction-flight.is-compare-blocked .s62-frac-drop-label,
.s62-fraction-flight.is-compare-return .s62-frac-drop-label{
  opacity:0;
  visibility:hidden;
}

.s62-blue-frac-label{
  color:var(--s62-blue);
}

.s62-orange-frac-label{
  color:var(--s62-orange);
}

@keyframes s62-frac-label-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}

.s62-frac-target-probe{
  position:absolute;
  top:var(--s62-frac-drop-target-y, 508px);
  visibility:hidden;
  pointer-events:none;
  width:0;
  height:0;
}

.s62-fraction-flight{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  overflow:visible;
  visibility:hidden;
}

.s62-fraction-flight.is-active{
  visibility:visible;
}

.s62-frac-flight-host{
  position:absolute;
  z-index:14;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  will-change:transform;
}

.s62-frac-workbench-title{
  position:absolute;
  left:50%;
  top:calc(var(--s62-frac-drop-target-y, 508px) - 54px);
  transform:translateX(-50%);
  margin:0;
  z-index:20;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  white-space:nowrap;
  display:none !important;
}

.s62-fraction-flight.is-active .s62-frac-workbench-title,
.s62-fraction-flight.is-compare-attempt .s62-frac-workbench-title,
.s62-fraction-flight.is-compare-blocked .s62-frac-workbench-title{
  opacity:1;
}

.s62-frac-flight-orange.s62-orange-overlap-blue{
  z-index:18;
}

.s62-fraction-flight.is-compare-shake{
  animation:s62-compare-shake-flight .45s ease 2;
}

.s62-bar .s62-shortage-cell,
.s62-source-frac-bar .s62-shortage-cell{
  outline:3px dashed rgba(255,80,110,.95);
  outline-offset:-3px;
  box-shadow:0 0 18px rgba(255,80,110,.45);
  position:relative;
  z-index:2;
}

.s62-fraction-flight .s62-compare-x{
  position:absolute;
  transform:translate(-50%, 0);
  z-index:22;
  color:#ff5a74;
  font-size:34px;
  font-weight:950;
  line-height:1;
  opacity:0;
  text-shadow:0 0 16px rgba(255,70,100,.55);
  transition:opacity .35s ease, transform .4s cubic-bezier(.22,.82,.28,1);
}

.s62-fraction-flight .s62-compare-x.is-visible{
  opacity:1;
}

.s62-borrow-source-highlight .s62-bar{
  filter:brightness(1.36) drop-shadow(0 0 16px rgba(126,232,255,.5));
  animation:s62-borrow-source-glow .85s ease infinite;
}

.s62-borrow-clone-host{
  position:absolute;
  z-index:24;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:9px;
  pointer-events:none;
  will-change:transform;
}

.s62-borrow-clone-host .s62-whole-bar{
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
  filter:brightness(1.08) drop-shadow(0 0 16px rgba(126,232,255,.35));
}

.s62-borrow-clone-host.is-arrived .s62-whole-bar{
  filter:brightness(1.1) drop-shadow(0 0 18px rgba(126,232,255,.4));
}

.s62-borrow-clone-host.is-arrived{
  z-index:26;
}

.s62-borrow-clone-host.is-result-fraction{
  z-index:28;
}

.s62-borrow-copy-label{
  display:none !important;
  position:absolute;
  left:-126px;
  top:50%;
  width:112px;
  color:#bff8ff;
  font-size:22px;
  font-weight:950;
  line-height:1;
  opacity:0;
  text-align:right;
  transform:translateY(calc(-50% - 4px));
  text-shadow:0 0 14px rgba(70,210,245,.25);
  transition:opacity .32s ease, transform .32s ease;
}

.s62-borrow-clone-host.is-arrived .s62-borrow-copy-label{
  opacity:0;
  transform:translateY(-50%);
}

.s62-borrow-clone-host.is-merging .s62-borrow-copy-label{
  opacity:0;
  transform:translateY(calc(-50% - 8px));
}

.s62-borrow-clone-host.is-result-fraction .s62-borrow-copy-label{
  display:block !important;
  position:static;
  width:var(--s62-bar-w);
  color:var(--s62-blue);
  margin-top:8px;
  text-align:center;
  transform:none;
}

.s62-borrow-eq{
  position:absolute;
  z-index:27;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#dff7ff;
  --s62-eq-size:22px;
  font-size:22px;
  font-weight:950;
  white-space:nowrap;
  transform:translateX(-50%);
  text-shadow:0 0 14px rgba(70,210,245,.16);
  pointer-events:none;
}

.s62-borrow-clone-host.is-merge-hold .s62-whole-bar,
.s62-frac-flight-blue.is-merge-hold .s62-source-frac-bar{
  animation:s62-borrow-pair-glow .5s ease 2 alternate;
}

.s62-fraction-flight.is-borrowed-visual .s62-borrow-clone-host .s62-whole-bar,
.s62-fraction-flight.is-borrowed-visual .s62-frac-flight-blue.is-borrowed-base .s62-source-frac-bar{
  filter:brightness(1.08) drop-shadow(0 0 16px rgba(126,232,255,.28));
}

.s62-frac-flight-orange.is-subtract-spent{
  opacity:.22;
  transition:opacity .35s ease;
}

.s62-frac-flight-blue.is-subtract-cleared{
  opacity:0;
  transition:opacity .3s ease;
}

.s62-fraction-flight.is-subtract-active{
  z-index:36;
  visibility:visible;
  pointer-events:none;
}

.s62-fraction-flight.is-subtract-active .s62-frac-flight-orange{
  z-index:42;
}

.s62-fraction-flight .s62-subtract-moving-cell{
  position:absolute;
  z-index:250;
  display:block;
  box-sizing:border-box;
  border:2px solid rgba(255,255,255,.9);
  border-radius:0;
  background:linear-gradient(180deg, #f6ad62, #d87935);
  box-shadow:
    0 0 0 2px rgba(242,160,91,.35),
    0 8px 20px rgba(216,121,53,.5);
  pointer-events:none;
  opacity:1;
  will-change:left, top;
}

.s62-orange-cell-launching{
  visibility:hidden !important;
}

.s62-fraction-flight .s62-subtract-moving-cell.is-cancelled{
  opacity:0;
  transition:opacity .16s ease;
}

.s62-orange-cell-spent{
  background:var(--s62-bar-empty, #E5EBEE) !important;
  box-shadow:none !important;
}

.s62-blue-cell-removed{
  background:var(--s62-bar-empty, #E5EBEE) !important;
  box-shadow:none !important;
}

.s62-subtract-flash{
  outline:2px solid rgba(255,244,177,.88);
  outline-offset:-2px;
  box-shadow:0 0 12px rgba(255,239,144,.45) !important;
}

.s62-frac-flight-host.is-merged{
  align-items:center;
}

.s62-screen[data-phase="borrowAsSixSix"] .s62-frac-flight-blue,
.s62-screen[data-phase="borrowMerge"] .s62-frac-flight-blue,
.s62-screen[data-phase="borrowMerged"] .s62-frac-flight-blue{
  align-items:flex-start;
}

.s62-screen[data-phase="borrowAsSixSix"] .s62-frac-flight-blue .s62-frac-drop-label,
.s62-screen[data-phase="borrowMerge"] .s62-frac-flight-blue .s62-frac-drop-label{
  display:none;
}

.s62-screen[data-phase="borrowMerged"] .s62-frac-flight-blue .s62-frac-drop-label,
.s62-screen[data-phase="subtractAnimating"] .s62-frac-flight-blue .s62-frac-drop-label,
.s62-screen[data-phase="fractionSubtractCheckInput"] .s62-frac-flight-blue .s62-frac-drop-label,
.s62-screen[data-phase="subtractDone"] .s62-frac-flight-blue .s62-frac-drop-label,
.s62-screen[data-phase="wholeSubtractAnimating"] .s62-frac-flight-blue .s62-frac-drop-label,
.s62-screen[data-phase="wholeSubtractCheckInput"] .s62-frac-flight-blue .s62-frac-drop-label{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.s62-screen[data-phase="borrowCheckInput"] .s62-frac-flight-blue .s62-frac-drop-label.is-borrow-inline{
  display:flex !important;
  height:auto !important;
  min-height:38px !important;
  margin-top:4px !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.s62-screen[data-phase="borrowAsSixSix"] .s62-frac-flight-blue .s62-source-frac-bar,
.s62-screen[data-phase="borrowMerge"] .s62-frac-flight-blue .s62-source-frac-bar,
.s62-screen[data-phase="borrowMerged"] .s62-frac-flight-blue .s62-source-frac-bar{
  margin-left:0;
}

.s62-screen[data-phase="borrowAsSixSix"] .s62-borrow-copy-label,
.s62-screen[data-phase="borrowMerge"] .s62-borrow-copy-label,
.s62-screen[data-phase="borrowMerged"] .s62-borrow-copy-label{
  display:none;
}

.s62-nine-six-final{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  animation:s62-nine-six-in .32s ease both;
}

.s62-nine-six-bar{
  width:420px;
  filter:brightness(1.08) drop-shadow(0 0 16px rgba(126,232,255,.28));
}

.s62-nine-six-label{
  width:420px;
  color:var(--s62-blue);
}

.s62-blue-wrap .s62-card-badge,
.s62-orange-wrap .s62-card-badge{
  opacity:.92;
}

.s62-problem.s62-hide-top-labels .s62-card-badge,
.s62-problem.s62-hide-top-labels .s62-card-convert,
.s62-problem.s62-hide-top-labels .s62-top-equation{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.s62-problem.s62-top-area-dimmed .s62-blue-wrap .s62-card-badge,
.s62-problem.s62-top-area-dimmed .s62-orange-wrap .s62-card-badge{
  opacity:.62;
}

.s62-shortage-message{
  display:block;
  margin-top:6px;
  color:#ffb8c6;
  font-weight:950;
}

.s62-screen.s62-fraction-ready-compare .s62-action{
  margin-top:calc(-128px + var(--s62-frac-work-shift-y));
  visibility:visible;
  pointer-events:auto;
}

.s62-screen[data-phase="compare"] .s62-workbench,
.s62-screen[data-phase="blocked"] .s62-workbench,
.s62-screen[data-phase="borrowReady"] .s62-workbench,
.s62-screen[data-phase="borrowPull"] .s62-workbench,
.s62-screen[data-phase="borrowPulled"] .s62-workbench,
.s62-screen[data-phase="borrowAsSixSix"] .s62-workbench,
.s62-screen[data-phase="borrowCheckInput"] .s62-workbench,
.s62-screen[data-phase="borrowMerge"] .s62-workbench,
.s62-screen[data-phase="borrowMerged"] .s62-workbench,
.s62-screen[data-phase="subtractAnimating"] .s62-workbench,
.s62-screen[data-phase="subtractDone"] .s62-workbench,
.s62-screen[data-phase="result"] .s62-workbench{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  z-index:4;
}

.s62-screen[data-phase="compare"] .s62-bench-layer,
.s62-screen[data-phase="blocked"] .s62-bench-layer,
.s62-screen[data-phase="borrowReady"] .s62-bench-layer,
.s62-screen[data-phase="borrowPull"] .s62-bench-layer,
.s62-screen[data-phase="borrowPulled"] .s62-bench-layer,
.s62-screen[data-phase="borrowAsSixSix"] .s62-bench-layer,
.s62-screen[data-phase="borrowMerge"] .s62-bench-layer,
.s62-screen[data-phase="borrowMerged"] .s62-bench-layer,
.s62-screen[data-phase="subtractAnimating"] .s62-bench-layer,
.s62-screen[data-phase="result"] .s62-bench-layer{
  height:0;
  min-height:0;
}

.s62-screen[data-phase="fraction"] .s62-workbench,
.s62-screen[data-phase="compare"] .s62-workbench{
  display:none !important;
}

.s62-guide:empty{
  display:none !important;
}

.s62-screen[data-phase="compare"] .s62-guide{
  display:block;
  position:relative;
  bottom:auto;
  margin:0 auto 8px;
  transform:none;
  text-align:center;
}

.s62-screen[data-phase="blocked"] .s62-guide,
.s62-screen[data-phase="borrowReady"] .s62-guide,
.s62-screen[data-phase="borrowPull"] .s62-guide,
.s62-screen[data-phase="borrowPulled"] .s62-guide,
.s62-screen[data-phase="borrowAsSixSix"] .s62-guide,
.s62-screen[data-phase="borrowCheckInput"] .s62-guide,
.s62-screen[data-phase="borrowMerge"] .s62-guide,
.s62-screen[data-phase="borrowMerged"] .s62-guide,
.s62-screen[data-phase="subtractAnimating"] .s62-guide,
.s62-screen[data-phase="fractionSubtractCheckInput"] .s62-guide,
.s62-screen[data-phase="subtractDone"] .s62-guide,
.s62-screen[data-phase="wholeSubtractAnimating"] .s62-guide,
.s62-screen[data-phase="wholeSubtractCheckInput"] .s62-guide,
.s62-screen[data-phase="wholeSubtractDone"] .s62-guide,
.s62-screen[data-phase="finalResult"] .s62-guide,
.s62-screen[data-phase="result"] .s62-guide{
  display:none !important;
}

.s62-screen[data-phase="borrowCheckInput"] .s62-workbench,
.s62-screen[data-phase="fractionSubtractCheckInput"] .s62-workbench,
.s62-screen[data-phase="subtractDone"] .s62-workbench,
.s62-screen[data-phase="wholeSubtractAnimating"] .s62-workbench,
.s62-screen[data-phase="wholeSubtractCheckInput"] .s62-workbench,
.s62-screen[data-phase="wholeSubtractDone"] .s62-workbench{
  position:absolute;
  left:0;
  right:0;
  width:100%;
  margin:0;
  padding:0;
  z-index:4;
  bottom:72px;
}

.s62-screen[data-phase="borrowCheckInput"] .s62-bench-layer,
.s62-screen[data-phase="fractionSubtractCheckInput"] .s62-bench-layer,
.s62-screen[data-phase="subtractDone"] .s62-bench-layer,
.s62-screen[data-phase="wholeSubtractAnimating"] .s62-bench-layer,
.s62-screen[data-phase="wholeSubtractCheckInput"] .s62-bench-layer,
.s62-screen[data-phase="wholeSubtractDone"] .s62-bench-layer{
  height:392px;
  min-height:392px;
}

.s62-screen[data-phase="finalResult"] .s62-workbench{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background:transparent;
  pointer-events:none;
  z-index:80;
}

.s62-screen[data-phase="finalResult"] .s62-bench-layer{
  height:100%;
  min-height:0;
}

.s62-screen[data-phase="finalResult"] .s62-action{
  position:absolute;
  left:auto;
  right:42px;
  top:auto;
  bottom:28px;
  transform:none;
  margin-top:0;
  pointer-events:auto;
  z-index:90;
}

.s62-screen[data-phase="finalResult"] .s62-problem{
  opacity:1;
  filter:none;
  transition:none;
}

@keyframes s62-compare-shake-flight{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-7px);}
  60%{transform:translateX(6px);}
}

@keyframes s62-borrow-source-glow{
  0%,100%{filter:brightness(1.2) drop-shadow(0 0 12px rgba(126,232,255,.32));}
  50%{filter:brightness(1.48) drop-shadow(0 0 20px rgba(126,232,255,.56));}
}

@keyframes s62-nine-six-in{
  from{opacity:0;transform:translateY(8px) scaleX(.94);}
  to{opacity:1;transform:translateY(0) scaleX(1);}
}

@keyframes s62-borrow-pair-glow{
  from{filter:brightness(1.02) drop-shadow(0 0 10px rgba(126,232,255,.18));}
  to{filter:brightness(1.16) drop-shadow(0 0 18px rgba(126,232,255,.34));}
}

.s62-fraction-band{
  position:absolute;
  left:0;
  width:100%;
  z-index:12;
  pointer-events:none;
  visibility:hidden;
}

.s62-fraction-band.is-ready{
  visibility:visible;
}

.s62-fraction-band-cols{
  display:grid;
  grid-template-columns:var(--s62-card-w) var(--s62-card-w);
  gap:var(--s62-card-gap);
  justify-content:center;
  align-items:start;
}

.s62-fraction-band-slot{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.s62-fraction-band-slot.s62-orange-band-slot{
  transform:translateX(calc(-1 * var(--s62-orange-card-shift)));
}

.s62-screen[data-phase="fraction"]{
  overflow:visible;
}

.s62-screen[data-phase="fraction"] .s62-wrap{
  overflow:visible;
}

.s62-source-frac-bar.is-drop-pending{
  filter:brightness(1.38) drop-shadow(0 0 16px rgba(141,239,255,.34));
  transition:filter .2s ease;
}

.s62-orange-wrap .s62-source-frac-bar.is-drop-pending{
  filter:brightness(1.32) drop-shadow(0 0 16px rgba(255,160,90,.32));
}

.s62-source-frac-bar.is-drop-source{
  filter:brightness(1.18) drop-shadow(0 0 12px rgba(141,239,255,.22));
  transition:filter .35s ease, opacity .4s ease;
}

.s62-orange-wrap .s62-source-frac-bar.is-drop-source{
  filter:brightness(1.14) drop-shadow(0 0 12px rgba(255,160,90,.2));
}

.s62-problem.is-dimmed{
  opacity:1;
  pointer-events:none;
}

.s62-problem.is-dimmed .s62-card-badge,
.s62-problem.is-dimmed .s62-card-stack,
.s62-problem.is-dimmed .s62-inline-conversion{
  opacity:var(--s62-dimmed-opacity);
  transition:opacity .45s ease;
}

.s62-problem-card-wrap{
  position:relative;
  width:var(--s62-card-w);
  min-height:calc(var(--s62-stack-top) + var(--s62-stack-max-h) + 18px);
}

/* 상단 3 1/2 / 1 2/3 막대 간격 — 각각 1cm 안쪽으로 */
.s62-problem.s62-top-static .s62-blue-wrap{
  transform:translateX(var(--s62-blue-card-nudge, 38px));
}

.s62-problem.s62-top-static .s62-orange-wrap{
  transform:translateX(calc(-1 * var(--s62-orange-card-nudge, 38px)));
}

.s62-problem .s62-card{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  position:relative;
  width:var(--s62-card-w);
  height:calc(var(--s62-stack-top) + var(--s62-stack-max-h) + 18px);
  display:block;
}

.s62-problem.is-dimmed .s62-card{
  border:0;
  background:transparent;
  box-shadow:none;
}

.s62-problem.is-dimmed{
  filter:saturate(.86);
}

.s62-problem .s62-card.s62-orange{
  transform:translateX(calc(-1 * var(--s62-orange-card-shift)));
}

.s62-problem.is-commonized .s62-card{
  animation:s62-top-redivide .72s ease both;
}

.s62-problem.is-commonized .s62-card-stack > .s62-bar:last-child{
  animation:s62-fraction-regrid .86s ease both .12s;
}

.s62-screen[data-phase="fraction"] .s62-problem.is-commonized .s62-card,
.s62-screen[data-phase="fraction"] .s62-problem.is-commonized .s62-card-stack > .s62-bar:last-child{
  animation:none;
}

@keyframes s62-top-redivide{
  0%{filter:brightness(.72);opacity:.72;}
  48%{filter:brightness(.62) blur(.2px);opacity:.82;}
  100%{filter:brightness(1);opacity:1;}
}

@keyframes s62-fraction-regrid{
  0%{filter:brightness(.72);transform:scaleX(.78);}
  58%{filter:brightness(1.28) drop-shadow(0 0 18px rgba(141,239,255,.28));transform:scaleX(1.02);}
  100%{filter:brightness(1);transform:scaleX(1);}
}

.s62-problem .s62-card-stack{
  position:absolute;
  top:var(--s62-stack-top);
  left:50%;
  transform:translateX(-50%);
  margin:0;
}

.s62-card{
  position:relative;
  width:var(--s62-card-w);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.s62-card-badge{
  position:absolute;
  top:var(--s62-card-inner-pad-top);
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--s62-card-badge-h);
  min-height:var(--s62-card-badge-h);
  margin:0;
  color:#eef7ff;
  text-align:center;
  transform:none;
}

.s62-card-badge.s62-card-mixed,
.s62-problem-beside-row.s62-equation-math{
  --s62-eq-size:var(--s62-mixed-display-size);
  font-size:var(--s62-mixed-display-size);
  line-height:1;
}

.s62-card-badge .s62-card-convert{
  font-size:inherit;
  line-height:1;
}

.s62-card-badge .s62-card-whole-only{
  --s62-eq-size:var(--s62-mixed-display-size);
  font-size:var(--s62-mixed-display-size);
  line-height:1;
}

.s62-card-convert{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  --s62-eq-size:24px;
  font-size:24px;
  white-space:nowrap;
  max-width:100%;
}

.s62-top-borrow-chain{
  --s62-eq-size:22px;
  font-size:22px;
}

.s62-card-convert-eq{
  color:rgba(226,247,255,.72);
  font-weight:850;
}

.s62-card-stack{
  margin:0 auto;
  width:var(--s62-bar-w);
  display:grid;
  gap:var(--s62-bar-gap);
}

.s62-inline-conversion{
  position:absolute;
  left:50%;
  bottom:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:30px;
  padding:4px 12px;
  border:1px solid rgba(141,239,255,.22);
  border-radius:999px;
  background:rgba(2,14,26,.66);
  color:#e8f8ff;
  font-size:18px;
  font-weight:950;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
  animation:s62-workbench-in .36s ease both .22s;
}

.s62-blue-conversion{
  transform:translateX(-50%);
}

.s62-orange-conversion{
  transform:translateX(calc(-50% - var(--s62-orange-card-shift)));
  border-color:rgba(255,166,112,.24);
}

.s62-top-equation{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:max-content;
  min-height:54px;
  margin:-8px auto 10px;
  padding:10px 24px;
  border:1px solid rgba(141,239,255,.22);
  border-radius:16px;
  background:rgba(2,14,26,.58);
  color:#e8f8ff;
  box-shadow:0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  --s62-eq-size:32px;
}

.s62-screen[data-phase="common"] .s62-top-equation{
  animation:s62-workbench-in .36s ease both .14s;
}

.s62-top-equation.is-converting{
  --s62-eq-size:26px;
  font-size:26px;
  gap:8px;
  padding:9px 20px;
}

.s62-bar,
.s62-piece-bar{
  display:grid;
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
  gap:var(--s62-bar-seg-gap, 2px);
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:var(--s62-bar-outer-radius, 10px);
  background:var(--s62-bar-divider-bg, #B8C9D4);
  border:1px solid var(--s62-bar-tray-border, #9AADB8);
  box-shadow:none;
}

.s62-bar.s62-orange,
.s62-piece-bar.s62-orange{
  border-color:var(--s62-bar-tray-border, #9AADB8);
}

.s62-bar span,
.s62-piece-bar span{
  min-width:0;
  border:none;
  border-radius:0;
  background:var(--s62-bar-empty, #E5EBEE);
  box-shadow:none;
}

.s62-bar span:first-child,
.s62-piece-bar span:first-child{
  border-left:none;
}

.s62-bar span.is-fill,
.s62-piece-bar.s62-blue span.is-fill,
.s62-piece-bar.s62-blue span{
  background:var(--s62-bar-blue-fill);
  box-shadow:none;
}

.s62-bar.s62-orange span.is-fill,
.s62-piece-bar.s62-orange span.is-fill,
.s62-piece-bar.s62-orange span{
  background:var(--s62-bar-orange-fill);
  box-shadow:none;
}

.s62-piece-bar span.is-extra{
  background:var(--s62-bar-blue-fill);
  box-shadow:none;
}

.s62-whole-bar{
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
}

.s62-whole-bar .s62-bar{
  width:100%;
  height:100%;
}

.s62-fraction-flight .s62-nine-six-bar{
  width:420px;
}

.s62-fraction-flight .s62-nine-six-label{
  width:420px;
}

.s62-equation-math{
  --s62-eq-size:32px;
  font-size:var(--s62-eq-size);
  line-height:1;
}

.s62-equation-math .s4-mixed,
.s62-eq-mixed.s4-mixed{
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
  vertical-align:middle;
}

.s62-equation-math .s4-mixed > strong,
.s62-eq-mixed.s4-mixed > strong{
  font-size:1em;
  line-height:.95;
  font-weight:950;
  color:#e8f8ff;
}

.s62-equation-math .s4-fraction,
.s62-eq-frac.s4-fraction{
  display:inline-grid;
  grid-template-rows:auto 2px auto;
  align-items:center;
  justify-items:center;
  gap:0;
  min-width:auto;
  line-height:.92;
  vertical-align:middle;
}

.s62-equation-math .s4-fraction strong,
.s62-equation-math .s4-fraction .tm-num,
.s62-eq-frac.s4-fraction strong,
.s62-eq-frac.s4-fraction .tm-num,
.s62-equation-math .s4-fraction .tm-den,
.s62-eq-frac.s4-fraction .tm-den{
  min-width:.72em;
  padding:0;
  font-size:.92em;
  line-height:.92;
  text-align:center;
  font-weight:950;
  color:#e8f8ff;
}

.s62-equation-math .s4-mixed .s4-fraction strong,
.s62-equation-math .s4-mixed .s4-fraction .tm-num,
.s62-equation-math .s4-mixed .s4-fraction .tm-den{
  font-size:1em;
  line-height:.92;
}

.s62-equation-math .s4-fraction i,
.s62-equation-math .s4-fraction .tm-bar,
.s62-eq-frac.s4-fraction i,
.s62-eq-frac.s4-fraction .tm-bar{
  width:.88em;
  min-width:.88em;
  height:2px;
  border-radius:2px;
  background:#dff7ff;
}

.s62-workbench{
  position:relative;
  width:1040px;
  height:430px;
  margin:-4px auto 0;
  padding:14px 18px 56px;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .35s ease, transform .35s ease;
  animation:s62-workbench-in .36s ease both;
}

.s62-workbench.s62-workbench-open{
  opacity:1;
  transform:translateY(0);
}

.s62-intro-workbench.s61-workbench{
  --s61-bar-w:var(--s62-bar-w);
  --s61-bar-h:var(--s62-bar-h);
  --s61-bar-gap:var(--s62-bar-gap);
  --s61-workbar-w:var(--s62-workbar-w);
  --s61-workbar-h:var(--s62-bar-h);
  --s61-guide-lift:114px;
  --s61-eq-shift-x:95px;
  --s61-card-w:500px;
  --s61-card-gap:32px;
  --s61-card-pad-x:24px;
  --s61-orange-card-shift:76px;
  --s61-wrap-w:1568px;
  --s61-workbench-content-w:960px;
  --s61-workbench-pad-x:18px;
  --s61-workbench-outer-w:calc(var(--s61-workbench-content-w) + var(--s61-workbench-pad-x) * 2);
  --s61-problem-grid-w:calc(var(--s61-card-w) * 2 + var(--s61-card-gap));
  --s61-problem-grid-x:calc((var(--s61-wrap-w) - var(--s61-problem-grid-w)) / 2);
  --s61-card-content-w:calc(var(--s61-card-w) - var(--s61-card-pad-x) * 2);
  --s61-card-bar-inset:calc((var(--s61-card-content-w) - var(--s61-bar-w)) / 2);
  --s61-blue-card-bar-x:calc(var(--s61-problem-grid-x) + var(--s61-card-pad-x) + var(--s61-card-bar-inset));
  --s61-orange-card-bar-x:calc(
    var(--s61-problem-grid-x)
    + var(--s61-card-w)
    + var(--s61-card-gap)
    + var(--s61-card-pad-x)
    + var(--s61-card-bar-inset)
    - var(--s61-orange-card-shift)
  );
  --s61-workbench-inner-x:calc((var(--s61-wrap-w) - var(--s61-workbench-outer-w)) / 2 + var(--s61-workbench-pad-x));
  --s61-workbench-bar-nudge:24px;
  --blue-x:calc(var(--s61-blue-card-bar-x) - var(--s61-workbench-inner-x) + var(--s61-workbench-bar-nudge));
  --orange-x:calc(var(--s61-orange-card-bar-x) - var(--s61-workbench-inner-x) + var(--s61-workbench-bar-nudge));
  --whole-1-y:34px;
  --whole-2-y:74px;
  --whole-3-y:114px;
  --whole-4-y:154px;
  --fraction-y:194px;
  --drop-start-y:12px;
  --eq-box-x:var(--orange-x);
  --problem-beside-y:calc(var(--whole-2-y) + 4px);
  margin:16px auto 0;
}

.s62-intro-workbench .s61-bench-layer{
  height:256px;
}

.s62-intro-workbench .s61-blue-whole-4{
  left:var(--blue-x);
  top:var(--drop-start-y);
  opacity:0;
  z-index:3;
}

.s62-intro-workbench.s61-blue-drop .s61-blue-whole-4{
  animation:s62i-drop-row4 .85s cubic-bezier(.22,.82,.28,1) .3s forwards;
}

@keyframes s62i-drop-row4{
  from{top:var(--drop-start-y);opacity:0;}
  to{top:var(--whole-4-y);opacity:1;}
}

.s62-intro-workbench .s61-orange-whole-1{
  left:var(--orange-x);
  top:var(--drop-start-y);
  opacity:0;
  z-index:5;
}

.s62-intro-workbench.s61-orange-drop .s61-orange-whole-1{
  animation:s61-drop-row1 .85s cubic-bezier(.22,.82,.28,1) forwards;
}

.s62-intro-workbench.s61-orange-match .s61-orange-whole-1{
  left:var(--blue-x);
  top:var(--whole-1-y);
  z-index:7;
}

.s62-intro-workbench.s61-orange-vanish .s61-orange-whole-1{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .85s ease, visibility 0s linear .85s;
}

.s62-intro-workbench.s61-pair-hold .s61-blue-whole-1.s61-pair-blue .s61-bar,
.s62-intro-workbench.s61-pair-hold .s61-orange-whole-1.s61-pair-orange .s61-bar{
  box-shadow:0 0 0 2px rgba(255,255,255,.34), 0 0 22px rgba(126,232,255,.42);
  filter:brightness(1.22);
}

.s62-intro-workbench.s61-pair-hold .s61-orange-whole-1{
  z-index:8;
}

.s62-intro-workbench.s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s62-intro-workbench.s61-remain-result .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s62-intro-workbench.s61-whole-quiz-active .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s62-intro-workbench.s61-fraction-prompt .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s62-intro-workbench.s61-frac-subtract-animate .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s62-intro-workbench.s61-frac-subtract-tick .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s62-intro-workbench.s61-common-scale-applied .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s62-intro-workbench.s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar span,
.s62-intro-workbench.s61-remain-result .s61-blue-whole-1.s61-whole-empty .s61-bar span,
.s62-intro-workbench.s61-whole-quiz-active .s61-blue-whole-1.s61-whole-empty .s61-bar span,
.s62-intro-workbench.s61-fraction-prompt .s61-blue-whole-1.s61-whole-empty .s61-bar span,
.s62-intro-workbench.s61-frac-subtract-animate .s61-blue-whole-1.s61-whole-empty .s61-bar span,
.s62-intro-workbench.s61-frac-subtract-tick .s61-blue-whole-1.s61-whole-empty .s61-bar span,
.s62-intro-workbench.s61-common-scale-applied .s61-blue-whole-1.s61-whole-empty .s61-bar span{
  background:var(--s62-bar-empty, #E5EBEE);
  box-shadow:none;
  transition:background .8s ease;
}

.s62-intro-workbench.s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar,
.s62-intro-workbench.s61-remain-result .s61-blue-whole-1.s61-whole-empty .s61-bar,
.s62-intro-workbench.s61-whole-quiz-active .s61-blue-whole-1.s61-whole-empty .s61-bar,
.s62-intro-workbench.s61-fraction-prompt .s61-blue-whole-1.s61-whole-empty .s61-bar,
.s62-intro-workbench.s61-frac-subtract-animate .s61-blue-whole-1.s61-whole-empty .s61-bar,
.s62-intro-workbench.s61-frac-subtract-tick .s61-blue-whole-1.s61-whole-empty .s61-bar,
.s62-intro-workbench.s61-common-scale-applied .s61-blue-whole-1.s61-whole-empty .s61-bar{
  border-color:var(--s62-bar-tray-border, #9AADB8);
  background:var(--s62-bar-divider-bg, #B8C9D4);
  box-shadow:none;
  transition:border-color .8s ease, background .8s ease;
}

.s62-intro-workbench.s61-remain-result .s61-blue-whole-1{
  left:var(--blue-x);
  top:var(--whole-1-y);
  opacity:1;
  visibility:visible;
}

.s62-intro-workbench.s61-remain-result .s61-blue-whole-2{
  left:var(--blue-x);
  top:var(--whole-2-y);
  opacity:1;
  visibility:visible;
  z-index:4;
}

.s62-intro-workbench.s61-remain-result .s61-blue-whole-3{
  left:var(--blue-x);
  top:var(--whole-3-y);
  opacity:1;
  visibility:visible;
  z-index:4;
}

.s62-intro-workbench.s61-remain-result .s61-blue-whole-4{
  left:var(--blue-x);
  top:var(--whole-4-y);
  opacity:1;
  visibility:visible;
  z-index:6;
}

.s62-intro-workbench.s61-remain-result .s61-blue-fraction,
.s62-intro-workbench.s61-fraction-prompt .s61-blue-fraction{
  top:var(--fraction-y);
}

.s62-intro-workbench.s61-blue-drop .s61-blue-fraction{
  animation:s62i-drop-frac .85s cubic-bezier(.22,.82,.28,1) .45s forwards;
}

.s62-intro-workbench.s61-orange-drop .s61-orange-fraction{
  animation:s62i-drop-frac .85s cubic-bezier(.22,.82,.28,1) .28s forwards;
}

@keyframes s62i-drop-frac{
  from{top:var(--drop-start-y);opacity:0;}
  to{top:var(--fraction-y);opacity:1;}
}

.s62-intro-workbench .s61-problem-beside-box{
  top:calc(var(--whole-2-y) - 8px);
  transform:translateX(calc(-100% - 24px));
}

.s62-intro-workbench .s61-problem-beside-row.s61-equation-math{
  --s61-eq-size:38px;
  font-size:38px;
  gap:10px;
  text-shadow:0 0 14px rgba(0,0,0,.68), 0 0 14px rgba(141,239,255,.2);
}

.s62-intro-workbench[data-phase="commonScaleQuiz"] #s62-natural-eq,
.s62-intro-workbench.s61-common-scale-applied #s62-natural-eq{
  display:none!important;
}

.s62-intro-workbench.s61-common-scale-applied .s61-blue-whole-1{
  left:var(--blue-x);
  top:var(--whole-1-y);
  opacity:1;
  visibility:visible;
  z-index:4;
}

.s62-intro-workbench.s61-common-scale-applied .s61-blue-whole-1.s61-whole-empty .s61-bar{
  border-color:var(--s62-bar-tray-border, #9AADB8);
  background:var(--s62-bar-divider-bg, #B8C9D4);
  box-shadow:none;
}

.s62-intro-workbench.s61-common-scale-applied .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill{
  background:var(--s62-bar-blue-fill);
  box-shadow:none;
}

.s62-intro-workbench.s61-common-scale-applied .s61-orange-whole-1{
  left:var(--orange-x);
  top:var(--whole-1-y);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:5;
}

.s62-intro-workbench.s61-common-scale-applied .s61-orange-fraction{
  left:var(--orange-x);
  top:var(--fraction-y);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:5;
}

.s62-common-question{
  position:relative;
  width:680px;
  min-height:148px;
  margin:10px auto 0;
  padding:18px 24px 16px;
  display:grid;
  justify-items:center;
  gap:12px;
  border:1px solid rgba(141,239,255,.24);
  border-radius:18px;
  background:rgba(2,14,26,.64);
  box-shadow:0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  animation:s62-workbench-in .36s ease both;
}

.s62-common-question-title{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  --s62-eq-size:22px;
  font-size:22px;
  font-weight:950;
  line-height:1.25;
  text-align:center;
  color:#effbff;
}

.s62-common-question-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}

.s62-q-frac.s4-fraction{
  display:inline-grid;
  grid-template-rows:auto 2px auto;
  align-items:center;
  justify-items:center;
  gap:1px;
  vertical-align:middle;
}

.s62-q-frac.s4-fraction strong,
.s62-q-frac.s4-fraction .tm-num,
.s62-q-frac.s4-fraction .tm-den{
  min-width:.86em;
  padding:0;
  font-size:1em;
  line-height:.92;
  text-align:center;
  font-weight:950;
  color:#effbff;
}

.s62-q-frac.s4-fraction i,
.s62-q-frac.s4-fraction .tm-bar{
  width:.88em;
  min-width:.88em;
  height:2px;
  border-radius:2px;
  background:#dff7ff;
}

.s62-common-input-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.s62-common-denom-input{
  width:82px;
  height:42px;
  padding:0 10px;
  border:2px solid rgba(141,239,255,.55);
  border-radius:10px;
  color:#effbff;
  background:rgba(2,14,26,.92);
  font-size:22px;
  font-weight:950;
  text-align:center;
}

.s62-common-denom-input::placeholder{
  color:rgba(190,220,235,.46);
  font-size:14px;
  font-weight:820;
}

.s62-common-denom-input:focus{
  outline:none;
  border-color:rgba(157,246,255,.95);
  box-shadow:0 0 0 2px rgba(94,220,255,.28);
}

.s62-common-denom-input.is-wrong{
  border-color:rgba(255,100,120,.88);
  box-shadow:0 0 0 2px rgba(255,89,109,.24);
}

/* 모든 s62 입력칸의 오답 표시는 학습 화면 공통 노란 테두리로 통일한다. */
body.s62-active .s62-screen input.s62-common-denom-input.is-wrong,
body.s62-active .s62-screen input.s62-check-input.is-wrong,
body.s62-active .s62-screen input.s62-stage4-math-input.is-wrong,
body.s62-active .s62-screen input.s62-u-input.is-wrong{
  border-color:#e5a735 !important;
  background:#fff7df !important;
  box-shadow:0 0 0 4px rgba(229,167,53,.16) !important;
}

.s62-common-denom-input.is-ok{
  border-color:rgba(110,232,176,.88);
}

.s62-common-denom-btn{
  min-width:68px;
  height:42px;
  padding:0 14px;
  border:1px solid rgba(141,239,255,.62);
  border-radius:10px;
  color:#03151f;
  background:linear-gradient(180deg,#9df6ff,#4bbfe8);
  box-shadow:0 10px 22px rgba(50,180,230,.22), inset 0 1px 0 rgba(255,255,255,.55);
  font-size:15px;
  font-weight:950;
  cursor:pointer;
}

.s62-common-denom-btn:disabled,
.s62-common-denom-input:disabled{
  opacity:.72;
  cursor:default;
}

.s62-common-denom-btn:focus-visible{
  outline:3px solid rgba(255,247,180,.72);
  outline-offset:2px;
}

.s62-common-question .s62-choice-feedback{
  display:none;
}

.s62-choice-feedback{
  margin:0;
  min-height:20px;
  color:#ffd9df;
  font-size:15px;
  font-weight:850;
  line-height:1.35;
  text-align:center;
}

.s62-choice-feedback.is-success{
  color:rgba(170,255,218,.92);
}

.s62-choice-feedback:empty{
  display:none;
}

.s62-check-stage{
  position:absolute;
  inset:0;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:22px;
  padding-top:26px;
  box-sizing:border-box;
}

.s62-borrow-check-stage{
  padding-top:214px;
}

.s62-fraction-check-stage{
  padding-top:18px;
}

.s62-fraction-check-stage .s62-check-form{
  margin-top:82px;
}

.s62-check-form{
  display:grid;
  justify-items:center;
  gap:10px;
}

.s62-check-equation{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  color:#eef7ff;
  font-size:28px;
}

.s62-check-before{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.s62-check-answer-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.s62-check-input{
  width:66px;
}

.s62-check-suffix{
  color:#dff7ff;
  font-size:24px;
  font-weight:950;
  white-space:nowrap;
}

.s62-check-answer-wrap.is-fraction{
  display:inline-grid;
  justify-items:center;
  gap:0;
  align-self:center;
}

.s62-check-answer-frac{
  position:relative;
  display:inline-block;
  min-width:78px;
  width:78px;
  height:58px;
  transform:translateY(-4px);
}

.s62-check-answer-frac-top{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -2px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.s62-check-answer-frac .s62-check-input{
  width:66px;
  height:36px;
}

.s62-check-answer-frac-bar{
  position:absolute;
  left:50%;
  top:35px;
  transform:translateX(-50%);
  width:78px;
  height:2px;
  border-radius:2px;
  background:#dff7ff;
}

.s62-check-answer-frac-bottom{
  position:absolute;
  left:50%;
  top:41px;
  transform:translateX(-50%);
  min-width:.72em;
  font-size:.92em;
  line-height:.92;
  text-align:center;
  font-weight:950;
  color:#e8f8ff;
}

.s62-check-btn{
  min-width:68px;
}

@keyframes s62-workbench-in{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}

.s62-guide{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  min-width:520px;
  max-width:780px;
  min-height:42px;
  display:grid;
  place-items:center;
  padding:8px 18px;
  border:1px solid rgba(141,239,255,.24);
  border-radius:14px;
  background:rgba(4,18,32,.72);
  color:rgba(235,247,250,.9);
  font-size:16px;
  font-weight:850;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}

.s62-bench-layer{
  position:relative;
  width:100%;
  height:330px;
}

.s62-workbench-title{
  margin:0;
  color:rgba(226,247,255,.9);
  font-size:20px;
  font-weight:950;
  line-height:1.2;
  text-align:center;
}

.s62-common-stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:auto auto;
  gap:18px 28px;
  align-content:start;
  justify-content:center;
  padding:18px 44px 0;
  box-sizing:border-box;
}

.s62-convert-card{
  display:grid;
  justify-items:center;
  gap:12px;
  min-height:166px;
  padding:16px 18px;
  border:1px solid rgba(141,239,255,.18);
  border-radius:18px;
  background:rgba(2,14,26,.56);
  box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

.s62-convert-card.s62-orange{
  border-color:rgba(255,166,112,.22);
}

.s62-convert-title{
  color:rgba(226,247,255,.86);
  font-size:17px;
  font-weight:950;
}

.s62-convert-bars{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.s62-convert-bars .s62-bar{
  width:178px;
}

.s62-convert-arrow{
  color:#dff7ff;
  font-size:28px;
  font-weight:950;
  line-height:1;
}

.s62-convert-card strong{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#e8f8ff;
  font-size:24px;
  font-weight:950;
}

.s62-after-scale{
  animation:s62-common-bar-split .72s ease both .18s;
}

.s62-converted-equation{
  grid-column:1 / -1;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:11px 24px;
  border:1px solid rgba(141,239,255,.24);
  border-radius:16px;
  background:rgba(2,14,26,.68);
  box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}

.s62-converted-equation.s62-equation-math{
  --s62-eq-size:32px;
}

.s62-fraction-drop-layer,
.s62-fraction-workspace{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
}

.s62-fraction-drop-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  white-space:nowrap;
}

.s62-fraction-workspace-active{
  opacity:1;
  filter:brightness(1.08);
}

.s62-fraction-work-row{
  position:absolute;
  inset:0;
  margin:0;
}

.s62-fraction-item{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.s62-fraction-label{
  width:var(--s62-bar-w);
  margin-top:0;
  color:#e8f8ff;
  font-size:24px;
  font-weight:950;
  text-align:center;
  line-height:1;
}

.s62-fraction-item-blue .s62-fraction-label{
  color:var(--s62-blue);
}

.s62-fraction-item-orange .s62-fraction-label{
  color:var(--s62-orange);
}

.s62-fraction-work-bar{
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
  will-change:transform;
}

.s62-fraction-drop-layer.is-pre-drop .s62-fraction-work-bar,
.s62-fraction-workspace.is-pre-drop .s62-fraction-work-bar{
  opacity:0;
}

.s62-fraction-drop-layer.is-pre-drop .s62-fraction-label,
.s62-fraction-drop-layer.is-dropping .s62-fraction-label,
.s62-fraction-workspace.is-pre-drop .s62-fraction-label,
.s62-fraction-workspace.is-dropping .s62-fraction-label{
  opacity:0;
}

.s62-fraction-drop-layer.is-arrived .s62-fraction-label,
.s62-fraction-workspace.is-arrived .s62-fraction-label{
  opacity:1;
  transition:opacity .35s ease;
}

.s62-fraction-drop-layer.is-dropping .s62-fraction-label,
.s62-fraction-workspace.is-dropping .s62-fraction-label{
  transition:opacity .35s ease .42s;
}

.s62-compare-focus{
  position:absolute;
  inset:0;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:12px;
  padding-top:18px;
  box-sizing:border-box;
}

.s62-compare-focus.is-ready .s62-compare-focus-bars{
  height:210px;
}

.s62-compare-focus.is-ready .s62-compare-target{
  top:18px;
  animation:s62-fraction-drop-blue .78s cubic-bezier(.22,.82,.28,1) both;
}

.s62-compare-focus.is-ready .s62-compare-subtractor{
  transform:translate(-50%, 96px);
  animation:s62-fraction-drop-orange .82s cubic-bezier(.22,.82,.28,1) .08s both;
}

@keyframes s62-fraction-drop-blue{
  from{
    opacity:0;
    transform:translate(-50%, -210px);
    filter:brightness(1.28) drop-shadow(0 0 18px rgba(126,232,255,.3));
  }
  to{
    opacity:1;
    transform:translate(-50%, 0);
    filter:drop-shadow(0 0 14px rgba(94,210,255,.18));
  }
}

@keyframes s62-fraction-drop-orange{
  from{
    opacity:0;
    transform:translate(-50%, -190px);
    filter:brightness(1.24) drop-shadow(0 0 18px rgba(255,160,90,.28));
  }
  to{
    opacity:1;
    transform:translate(-50%, 96px);
    filter:drop-shadow(0 4px 14px rgba(255,120,50,.32));
  }
}

.s62-screen[data-phase="fraction"] .s62-workbench{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  z-index:4;
  opacity:1;
  transform:none;
  animation:none;
}

.s62-screen[data-phase="fraction"] .s62-bench-layer{
  height:0;
  min-height:0;
}

.s62-screen[data-phase="fraction"] .s62-guide{
  display:none;
}

.s62-screen[data-phase="fraction"] .s62-action{
  margin-top:-118px;
  visibility:hidden;
  pointer-events:none;
}

.s62-compare-focus-bars{
  position:relative;
  width:620px;
  height:184px;
}

.s62-compare-target,
.s62-compare-subtractor{
  position:absolute;
  left:50%;
  top:24px;
  display:grid;
  justify-items:center;
  gap:7px;
  color:#e8f8ff;
  font-size:24px;
  font-weight:950;
}

.s62-compare-target{
  z-index:4;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 14px rgba(94,210,255,.18));
}

.s62-compare-subtractor{
  z-index:6;
  opacity:.95;
  transform:translate(-50%, 84px);
  filter:drop-shadow(0 4px 14px rgba(255,120,50,.32));
}

.s62-phase-compare .s62-compare-subtractor{
  animation:s62-compare-overlay 1.05s cubic-bezier(.22,.82,.28,1) .26s forwards;
}

.s62-phase-blocked .s62-compare-subtractor{
  transform:translate(-50%, 0);
}

@keyframes s62-compare-overlay{
  from{transform:translate(-50%, 84px);}
  to{transform:translate(-50%, 0);}
}

.s62-compare-focus .s62-compare-main-bar{
  width:var(--s62-bar-w);
  height:38px;
}

.s62-compare-focus .s62-missing-cell{
  left:50%;
  top:18px;
  width:calc(var(--s62-bar-w) / 6);
  height:46px;
  opacity:0;
}

.s62-compare-focus .s62-block-x{
  left:calc(50% + 178px);
  top:18px;
  opacity:0;
}

.s62-compare-focus .s62-compare-sign{
  position:static;
  transform:none;
  opacity:0;
  color:#ffd9df;
  font-size:30px;
  font-weight:950;
}

.s62-phase-compare .s62-compare-focus,
.s62-phase-blocked .s62-compare-focus{
  animation:s62-compare-shake .56s ease 2 1.05s;
}

.s62-phase-compare .s62-compare-focus .s62-missing-cell,
.s62-phase-blocked .s62-compare-focus .s62-missing-cell,
.s62-phase-compare .s62-compare-focus .s62-compare-sign,
.s62-phase-blocked .s62-compare-focus .s62-compare-sign{
  opacity:1;
  transition:opacity .35s ease 1.05s;
}

.s62-phase-compare .s62-compare-focus .s62-block-x,
.s62-phase-blocked .s62-compare-focus .s62-block-x{
  opacity:1;
  transform:scale(1);
  transition:opacity .35s ease 1.16s, transform .4s cubic-bezier(.22,.82,.28,1) 1.16s;
}

.s62-problem-beside-box{
  position:absolute;
  left:var(--s62-common-blue-left);
  top:var(--s62-problem-beside-top);
  width:max-content;
  transform:translateX(calc(-100% - var(--s62-problem-beside-gap)));
  transform-origin:right center;
  pointer-events:none;
  z-index:6;
  opacity:1;
  transition:opacity .35s ease, visibility .35s ease;
}

.s62-problem-beside-row.s62-equation-math{
  --s62-eq-size:28px;
}

.s62-phase-compare .s62-problem-beside-box,
.s62-phase-blocked .s62-problem-beside-box{
  opacity:0;
  visibility:hidden;
}

.s62-phase-compare,
.s62-phase-blocked{
  --s62-bench-row-shift:-22px;
}

.s62-problem-beside-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}

.s62-problem-beside-op{
  color:#e8f8ff;
  font-size:1em;
  font-weight:950;
  line-height:1;
  flex:0 0 auto;
}

.s62-left-stack{
  position:absolute;
  left:var(--s62-common-blue-left);
  top:calc(var(--s62-left-stack-top) + var(--s62-bench-row-shift));
  display:grid;
  gap:10px;
  width:var(--s62-bar-w);
  transition:top .4s ease;
}

.s62-phase-common .s62-left-stack .s62-fraction-stack .s62-bar,
.s62-phase-common .s62-compare-zone .s62-compare-row{
  animation:s62-common-bar-split .72s ease both;
}

@keyframes s62-common-bar-split{
  from{opacity:.36;filter:blur(.2px) brightness(.86);transform:scaleX(.72);}
  to{opacity:1;filter:none;transform:scaleX(1);}
}

.s62-whole-stack{
  display:grid;
  gap:10px;
}

.s62-fraction-stack{
  display:grid;
  justify-items:center;
  gap:5px;
}

.s62-bar-label{
  color:rgba(220,244,252,.86);
  font-size:18px;
  font-weight:900;
}

.s62-conversion-labels{
  position:absolute;
  left:var(--s62-common-label-left);
  top:calc(70px + var(--s62-bench-row-shift));
  display:grid;
  gap:12px;
  width:180px;
  transition:top .4s ease;
}

.s62-conversion-labels span{
  display:grid;
  place-items:center;
  min-height:42px;
  border:1px solid rgba(141,239,255,.26);
  border-radius:12px;
  background:rgba(2,14,26,.66);
  color:#e8f8ff;
  font-size:18px;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.s62-compare-zone{
  position:absolute;
  left:var(--s62-common-compare-left);
  top:calc(74px + var(--s62-bench-row-shift));
  width:360px;
  min-height:174px;
  transition:top .4s ease;
}

.s62-compare-row{
  position:absolute;
  left:0;
  display:grid;
  grid-template-columns:var(--s62-bar-w) auto;
  align-items:center;
  gap:12px;
  color:#e8f8ff;
  font-size:18px;
  font-weight:950;
  transition:top .85s cubic-bezier(.22,.82,.28,1), opacity .45s ease, transform .55s ease;
}

.s62-compare-blue{
  top:8px;
  z-index:4;
}

.s62-compare-orange{
  top:72px;
  z-index:5;
}

.s62-compare-zone.is-active .s62-compare-orange{
  top:8px;
  opacity:.82;
  filter:drop-shadow(0 4px 14px rgba(255,120,50,.32));
}

.s62-compare-zone.is-active .s62-compare-blue{
  filter:drop-shadow(0 0 14px rgba(94,210,255,.18));
}

.s62-missing-cell{
  position:absolute;
  left:calc((var(--s62-bar-w) / 6) * 3);
  top:4px;
  width:calc(var(--s62-bar-w) / 6);
  height:calc(var(--s62-bar-h) + 8px);
  border:3px dashed rgba(255,74,100,.92);
  background:rgba(255,74,100,.13);
  box-shadow:0 0 16px rgba(255,74,100,.34);
  opacity:0;
  z-index:7;
}

.s62-block-x{
  position:absolute;
  left:calc(var(--s62-bar-w) + 16px);
  top:5px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,102,125,.58);
  background:rgba(106,18,34,.68);
  color:#ffd9df;
  font-size:20px;
  font-weight:950;
  opacity:0;
  transform:scale(.4);
  z-index:8;
}

.s62-compare-sign{
  position:absolute;
  left:94px;
  top:88px;
  color:#ffd9df;
  font-size:24px;
  font-weight:950;
  opacity:0;
}

.s62-phase-compare .s62-compare-zone,
.s62-phase-blocked .s62-compare-zone{
  animation:s62-compare-shake .56s ease 2 .82s;
}

.s62-phase-compare .s62-missing-cell,
.s62-phase-blocked .s62-missing-cell,
.s62-phase-compare .s62-compare-sign,
.s62-phase-blocked .s62-compare-sign{
  opacity:1;
  transition:opacity .35s ease .75s;
}

.s62-phase-compare .s62-block-x,
.s62-phase-blocked .s62-block-x{
  opacity:1;
  transform:scale(1);
  transition:opacity .35s ease .85s, transform .4s cubic-bezier(.22,.82,.28,1) .85s;
}

@keyframes s62-compare-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-7px);}
  60%{transform:translateX(6px);}
}

.s62-borrow-stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:330px 270px 360px;
  gap:28px;
  align-items:start;
  justify-content:center;
}

.s62-borrow-left,
.s62-borrow-right,
.s62-borrow-transform{
  display:grid;
  justify-items:center;
  gap:10px;
}

.s62-borrow-term{
  color:#fff7df;
  font-size:30px;
  font-weight:950;
  text-shadow:0 0 18px rgba(141,239,255,.18);
}

.s62-borrow-wholes,
.s62-borrow-result-wholes{
  display:grid;
  gap:10px;
}

.s62-borrow-source{
  animation:s62-borrow-source-pulse 1.1s ease infinite;
}

@keyframes s62-borrow-source-pulse{
  0%,100%{filter:brightness(1);transform:translateY(0);}
  50%{filter:brightness(1.3) drop-shadow(0 0 16px rgba(126,232,255,.36));transform:translateY(-3px);}
}

.s62-borrow-transform{
  padding-top:26px;
}

.s62-borrow-label{
  color:#e8f8ff;
  font-size:19px;
  font-weight:950;
}

.s62-borrow-sub{
  display:inline-grid;
  place-items:center;
  min-width:80px;
  height:26px;
  border:1px solid rgba(255,210,126,.38);
  border-radius:999px;
  color:#ffe6a8;
  background:rgba(70,40,10,.48);
  font-size:13px;
  font-weight:900;
}

.s62-borrow-arrow{
  color:#8deeff;
  font-size:38px;
  font-weight:950;
  line-height:1;
  animation:s62-arrow-drop .9s ease infinite;
}

@keyframes s62-arrow-drop{
  0%,100%{transform:translateY(0);opacity:.72;}
  50%{transform:translateY(8px);opacity:1;}
}

.s62-six-six{
  animation:s62-six-in .7s ease both .35s;
}

@keyframes s62-six-in{
  from{opacity:0;transform:translateY(-18px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.s62-borrow-transform strong,
.s62-borrow-result-frac span{
  color:#e8f8ff;
  font-size:18px;
  font-weight:950;
}

.s62-borrow-right{
  opacity:.3;
  transform:translateX(-20px);
  transition:opacity .65s ease, transform .65s ease;
}

.s62-phase-borrowed .s62-borrow-left{
  opacity:.5;
}

.s62-phase-borrowed .s62-borrow-right{
  opacity:1;
  transform:translateX(0);
}

.s62-borrow-result-frac{
  display:grid;
  justify-items:center;
  gap:7px;
}

.s62-nine-six{
  width:360px;
}

.s62-subtract-stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:330px 470px;
  gap:46px;
  align-items:start;
  justify-content:center;
  padding-top:18px;
}

.s62-subtract-wholes{
  display:grid;
  gap:10px;
  justify-items:center;
}

.s62-subtract-bars{
  position:relative;
  min-height:180px;
  padding-top:54px;
}

.s62-subtract-blue,
.s62-subtract-orange{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:6px;
  color:#e8f8ff;
  font-size:20px;
  font-weight:950;
  transition:top .9s cubic-bezier(.22,.82,.28,1), opacity .55s ease;
}

.s62-subtract-blue{
  top:40px;
  z-index:4;
}

.s62-subtract-orange{
  top:112px;
  opacity:.95;
  z-index:5;
  animation:s62-subtract-slide .95s ease .28s forwards;
}

@keyframes s62-subtract-slide{
  to{top:40px;}
}

.s62-subtract-stage.is-result .s62-subtract-orange{
  opacity:0;
}

.s62-subtract-stage.is-result .s62-subtract-blue{
  top:58px;
}

.s62-four-six{
  width:214px;
}

.s62-five-six{
  width:240px;
}

.s62-cancel-mask{
  position:absolute;
  left:50%;
  top:36px;
  width:160px;
  height:38px;
  transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(90deg, rgba(255,150,80,.24), rgba(255,220,150,.36));
  box-shadow:0 0 18px rgba(255,130,80,.26);
  opacity:0;
  z-index:8;
}

.s62-phase-subtract .s62-cancel-mask{
  animation:s62-cancel-flash .7s ease 1.05s 2;
}

@keyframes s62-cancel-flash{
  0%,100%{opacity:0;}
  50%{opacity:1;}
}

.s62-result-card{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  min-height:62px;
  display:grid;
  place-items:center;
  padding:12px 26px;
  border:1px solid rgba(141,239,255,.28);
  border-radius:16px;
  background:rgba(2,14,26,.72);
  box-shadow:0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  animation:s62-result-in .42s ease both;
  z-index:12;
}

.s62-result-card[hidden]{
  display:none!important;
}

@keyframes s62-result-in{
  from{opacity:0;transform:translate(-50%, 12px);}
  to{opacity:1;transform:translate(-50%, 0);}
}

.s62-result-card .s62-equation-math{
  --s62-eq-size:30px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.s62-eq-op{
  color:#e8f8ff;
  font-size:1em;
  font-weight:950;
}

.s62-result-value .s4-mixed > strong,
.s62-result-value .s4-fraction strong,
.s62-result-value .s4-fraction .tm-num,
.s62-result-value .s4-fraction .tm-den{
  color:#8dffc6;
}

.s62-result-value .s4-fraction i,
.s62-result-value .s4-fraction .tm-bar{
  background:#8dffc6;
}

.s62-formula-panel{
  position:absolute;
  right:112px;
  top:248px;
  width:250px;
  display:grid;
  gap:7px;
  padding:12px 14px;
  border:1px solid rgba(141,239,255,.16);
  border-radius:14px;
  background:rgba(2,14,26,.48);
  color:rgba(232,248,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  opacity:.9;
}

.s62-formula-panel p{
  margin:0;
  font-size:15px;
  font-weight:850;
  line-height:1.35;
  white-space:nowrap;
}

.s62-action{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  margin-top:-40px;
  z-index:12;
}

.s62-action-form{
  margin-top:calc(-128px + 8.4cm);
}

.s62-action-form .s62-check-form{
  gap:4px;
}

.s62-action-form .s62-check-equation{
  gap:10px;
}

.s62-action-form .s62-choice-feedback:empty{
  display:none;
}

.s62-screen[data-phase="common"] .s62-action{
  margin-top:2px;
}

.s62-screen[data-phase="borrowReady"] .s62-action{
  margin-top:calc(-128px + 5cm);
}

.s62-screen[data-phase="borrowMerged"] .s62-action{
  margin-top:calc(-128px + 6.4cm);
}

/* 9/6 - 4/6 = □/6 — 파란 막대 가운데, 아래 2cm (flight 안 JS 좌표) */
.s62-fraction-flight .s62-fraction-precheck-action,
.s62-fraction-flight .s62-fraction-animation-equation,
.s62-fraction-flight .s62-fraction-calculation-persistent{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0;
  transform:none;
  pointer-events:auto;
  z-index:96;
}

.s62-fraction-precheck-label{
  font-family:var(--edu-worksheet-font, "Pretendard", "Noto Sans KR", system-ui, sans-serif);
  font-size:16px;
  font-weight:800;
  line-height:1;
  color:#172b3a;
  white-space:nowrap;
}

.s62-fraction-precheck-row{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* 분수 부분 결과 5/6 */
.s62-fraction-flight .s62-fraction-result-side{
  position:absolute;
  top:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  transform:none;
  white-space:nowrap;
  z-index:140;
}

.s62-fraction-flight .s62-fraction-result-side:not(.is-at-orange-start){
  left:calc(var(--s62-bar-w) + var(--s62-fraction-result-side-gap, 12px));
}

.s62-fraction-flight .s62-fraction-result-flight{
  overflow:visible;
}

.s62-screen[data-phase="subtractDone"] .s62-action{
  position:absolute;
  left:50%;
  top:484px;
  transform:translateX(-50%);
  margin-top:0;
}

.s62-screen[data-phase="fractionSubtractCheckInput"] .s62-problem{
  opacity:.08;
  filter:brightness(.42) saturate(.55);
  transition:opacity .45s ease, filter .45s ease;
}

/* 자연수 계산은 아래 작업 막대만 바뀌며, 위쪽 원래 문제는 그대로 둡니다. */
.s62-screen[data-phase="wholeSubtractAnimating"] .s62-problem,
.s62-screen[data-phase="wholeSubtractCheckInput"] .s62-problem{
  opacity:1;
  filter:none;
  transition:none;
}

/* 단계 버튼은 계산 막대 아래의 최종 위치에서 즉시 나타납니다. */
body.s62-active #s62-fraction-flight .s62-common-compare-action{
  animation:none !important;
  transition:none !important;
}

/* 자연수 빼기에서는 위 두 자연수 막대와 5/6의 강조 밝기를 서로 바꿉니다. */
body.s62-active #s62-fraction-flight.s62-whole-color-swapped
.s62-frac-flight-blue :is(.s62-card-whole-1, .s62-card-whole-2),
body.s62-active #s62-fraction-flight.s62-whole-color-swapped
.s62-frac-flight-blue :is(.s62-card-whole-1, .s62-card-whole-2) .s62-bar{
  opacity:1 !important;
  filter:none !important;
}

body.s62-active #s62-fraction-flight.s62-whole-color-swapped
.s62-frac-flight-blue .s62-card-whole-3{
  opacity:.52 !important;
  filter:brightness(.82) saturate(.72) !important;
}

/* 자연수 답을 맞힌 뒤에는 1 5/6 전체를 정상 밝기로 되돌립니다. */
body.s62-active #s62-fraction-flight.s62-natural-result-restored.s62-whole-color-swapped
.s62-frac-flight-blue .s62-card-whole-3{
  opacity:1 !important;
  filter:none !important;
}

.s62-screen[data-phase="wholeSubtractAnimating"] .s62-problem.s62-top-area-dimmed .s62-whole-bar,
.s62-screen[data-phase="wholeSubtractCheckInput"] .s62-problem.s62-top-area-dimmed .s62-whole-bar{
  opacity:.42;
  filter:none;
}

.s62-screen[data-phase="wholeSubtractAnimating"] .s62-problem.s62-top-area-dimmed .s62-whole-bar.s62-top-whole-moving-out{
  opacity:.42;
  filter:none;
}

.s62-screen[data-phase="wholeSubtractAnimating"] .s62-problem.s62-top-area-dimmed .s62-whole-bar.s62-top-whole-removed,
.s62-screen[data-phase="wholeSubtractCheckInput"] .s62-problem.s62-top-area-dimmed .s62-whole-bar.s62-top-whole-removed{
  opacity:0 !important;
  visibility:hidden;
}

.s62-screen[data-phase="borrowed"] .s62-action{
  margin-top:-128px;
}

.s62-action-start{
  margin-top:22px;
}

.s62-btn{
  min-width:112px;
  height:50px;
  padding:0 18px;
  border:1px solid rgba(141,239,255,.68);
  border-radius:14px;
  color:#03151f;
  background:linear-gradient(180deg,#9df6ff,#4bbfe8);
  box-shadow:0 13px 28px rgba(50,180,230,.24), inset 0 1px 0 rgba(255,255,255,.55);
  font-size:17px;
  font-weight:950;
  cursor:pointer;
}

.s62-btn:disabled{
  opacity:.58;
  cursor:default;
}

.s62-btn:focus-visible{
  outline:3px solid rgba(255,247,180,.82);
  outline-offset:3px;
}

.s62-whole-subtract-stage{
  position:absolute;
  inset:0;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:28px;
  padding:18px 0 0;
  box-sizing:border-box;
}

.s62-whole-subtract-stage.is-fraction-result{
  gap:0;
  padding:42px 0 0;
}

.s62-fraction-result-mini{
  display:grid;
  justify-items:center;
  gap:8px;
  width:var(--s62-bar-w);
  opacity:.92;
}

.s62-fraction-result-mini.is-whole-summary{
  opacity:1;
}

.s62-fraction-result-caption{
  color:rgba(226,247,255,.72);
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.s62-fraction-result-mini .s62-fraction-result-bar{
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
}

.s62-fraction-result-label{
  color:var(--s62-blue);
  font-size:22px;
}

.s62-whole-subtract-board{
  display:grid;
  grid-template-columns:var(--s62-bar-w) var(--s62-bar-w);
  gap:96px;
  align-items:end;
  justify-content:center;
}

.s62-whole-blue-stack,
.s62-whole-result-stack{
  display:grid;
  gap:10px;
  justify-items:center;
}

.s62-whole-result-mini{
  display:grid;
  justify-items:center;
  gap:12px;
}

.s62-whole-blue-item,
.s62-whole-orange-source{
  width:var(--s62-bar-w);
  transition:opacity .22s ease, transform .22s ease, filter .22s ease;
}

.s62-whole-stage-bar{
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
}

.s62-whole-blue-stack.is-active .s62-whole-bar,
.s62-whole-orange-source.is-active .s62-whole-bar{
  animation:s62-whole-focus-glow .36s ease 3 alternate;
}

@keyframes s62-whole-focus-glow{
  from{filter:brightness(1.02) drop-shadow(0 0 10px rgba(141,239,255,.18));}
  to{filter:brightness(1.24) drop-shadow(0 0 22px rgba(255,234,146,.42));}
}

.s62-whole-orange-source{
  align-self:end;
}

.s62-whole-orange-source.is-moving-out{
  opacity:.32;
}

.s62-whole-orange-source.is-hidden{
  opacity:0;
  visibility:hidden;
}

.s62-whole-blue-item.is-hit .s62-whole-bar{
  animation:s62-whole-hit .26s ease 2 alternate;
}

.s62-whole-blue-item.is-removed{
  opacity:0;
  visibility:hidden;
  transform:scale(.96);
}

@keyframes s62-whole-hit{
  from{filter:brightness(1.02) drop-shadow(0 0 8px rgba(141,239,255,.18));}
  to{filter:brightness(1.22) drop-shadow(0 0 18px rgba(255,234,146,.46));}
}
  to{filter:brightness(1.22) drop-shadow(0 0 18px rgba(255,234,146,.46));}
}

.s62-whole-moving{
  position:absolute;
  z-index:36;
  pointer-events:none;
  will-change:transform, opacity;
}

.s62-whole-moving .s62-whole-bar{
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
  filter:drop-shadow(0 4px 16px rgba(255,140,82,.28));
}

.s62-whole-moving.is-cancelled{
  opacity:0;
  transform:scale(.9);
  transition:opacity .16s ease, transform .16s ease;
}

.s62-top-whole-moving-out{
  opacity:.22;
  transition:opacity .18s ease;
}

.s62-top-whole-hit .s62-bar{
  animation:s62-whole-hit .26s ease 2 alternate;
}

.s62-top-whole-removed{
  opacity:0 !important;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}

.s62-whole-result-line{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:14px;
  color:#dff7ff;
  font-size:32px;
  font-weight:950;
  text-shadow:0 0 14px rgba(82,205,244,.2);
}

/* 최종: 이전 작업 장면(막대·계산 줄)은 그대로 두고, 버튼·비교 표식만 숨긴다. */
body.s62-active .s62-screen[data-phase="finalResult"] .s62-fraction-animation-equation,
body.s62-active .s62-screen[data-phase="finalResult"] .s62-inline-fraction-check:not(.s62-fraction-calculation-persistent),
body.s62-active .s62-screen[data-phase="finalResult"] .s62-fraction-precheck-action,
body.s62-active .s62-screen[data-phase="finalResult"] .s62-common-compare-action,
body.s62-active .s62-screen[data-phase="finalResult"] .s62-borrow-eq,
body.s62-active .s62-screen[data-phase="finalResult"] .s62-compare-x,
body.s62-active .s62-screen[data-phase="finalResult"] .s62-compare-note{
  display:none !important;
}

body.s62-active .s62-common-question.has-final-result{
  position:relative !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  overflow:visible !important;
}

/* 결과 카드는 계산 작업 상자 위 가운데에 겹쳐 표시 (뒤 내용은 그대로) */
body.s62-active .s62-common-question.has-final-result .s62-final-result-stage{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  z-index:30 !important;
  background:transparent !important;
  pointer-events:none !important;
}

body.s62-active .s62-common-question.has-final-result .s62-final-result-card{
  position:relative !important;
  transform:none !important;
  pointer-events:auto !important;
  z-index:31 !important;
}

body.s62-active .s62-screen[data-phase="finalResult"] .s62-workbench{
  pointer-events:none !important;
  background:transparent !important;
}

body.s62-active .s62-final-result-kicker{
  display:none !important;
}

.s62-final-result-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0;
  box-sizing:border-box;
}

.s62-final-work-summary{
  display:grid;
  grid-template-columns:340px 260px;
  align-items:start;
  justify-content:center;
  gap:62px;
  min-height:176px;
}

.s62-fraction-result-mini.is-final-summary{
  align-self:start;
  margin-top:40px;
  opacity:1;
}

.s62-final-whole-summary{
  display:grid;
  justify-items:center;
  gap:12px;
}

.s62-final-whole-summary .s62-whole-result-line{
  margin-top:0;
  font-size:30px;
}

.s62-fraction-result-mini.is-final-summary .s62-fraction-result-label{
  font-size:30px;
}

.s62-final-result-card{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transform:none;
  min-width:310px;
  max-width:430px;
  min-height:58px;
  padding:10px 18px;
  border:1.5px solid rgba(74,136,166,.52);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 24px rgba(24,56,76,.16);
  color:#18384c;
  z-index:120;
}

.s62-final-result-kicker{
  display:none;
}

.s62-final-result-equation{
  --s62-eq-size:23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#18384c;
  font-size:23px;
  font-weight:900;
  line-height:1;
}

.s62-final-result-value .s4-mixed > strong,
.s62-final-result-value .s4-fraction strong,
.s62-final-result-value .s4-fraction .tm-num,
.s62-final-result-value .s4-fraction .tm-den{
  color:#18384c;
}

.s62-final-result-value .s4-fraction i,
.s62-final-result-value .s4-fraction .tm-bar{
  background:#18384c;
}

.s62-final-result-bars{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:34px;
}

.s62-final-whole-stack,
.s62-final-frac-stack{
  display:grid;
  justify-items:center;
  gap:10px;
}

.s62-final-whole-stack .s62-whole-blue-item{
  transform:scale(.94);
  transform-origin:center;
}

.s62-final-frac-stack .s62-fraction-result-bar{
  width:250px;
}

@media (prefers-reduced-motion:reduce){
  .s62-workbench,
  .s62-common-question,
  .s62-common-denom-btn,
  .s62-phase-common .s62-left-stack .s62-fraction-stack .s62-bar,
  .s62-phase-common .s62-compare-zone .s62-compare-row,
  .s62-compare-row,
  .s62-compare-zone,
  .s62-block-x,
  .s62-borrow-source,
  .s62-borrow-arrow,
  .s62-six-six,
  .s62-subtract-orange,
  .s62-cancel-mask,
  .s62-result-card{
    animation:none!important;
    transition:none!important;
  }

  .s62-workbench{
    opacity:1;
    transform:none;
  }

  .s62-compare-zone.is-active .s62-compare-orange{
    top:8px;
  }

  .s62-phase-compare .s62-missing-cell,
  .s62-phase-blocked .s62-missing-cell,
  .s62-phase-compare .s62-compare-sign,
  .s62-phase-blocked .s62-compare-sign,
  .s62-phase-compare .s62-block-x,
  .s62-phase-blocked .s62-block-x{
    opacity:1;
    transform:scale(1);
  }

  .s62-subtract-orange{
    top:40px;
  }
}

/* s61-style white worksheet shell + black text on light panel */
body.s62-active .s62-learning-panel{
  display:none !important;
}

body.s62-active .s62-wrap.corridor-puzzle-card.edu-worksheet-panel.edu-worksheet-panel--large{
  display:flex;
  flex-direction:column;
  position:absolute;
  left:50%;
  top:calc(122px - 0.5cm);
  z-index:5;
  width:min(var(--s62-wrap-w), calc(100% - 80px)) !important;
  max-width:min(var(--s62-wrap-w), calc(100% - 80px)) !important;
  min-width:0 !important;
  height:var(--s62-box-h) !important;
  min-height:var(--s62-box-h) !important;
  max-height:var(--s62-box-h) !important;
  padding:var(--edu-worksheet-padding, 36px 42px 32px) !important;
  box-sizing:border-box;
  transform:translateX(-50%);
  overflow:visible;
  /* 반투명+blur 제거: 학습지 본문은 항상 불투명 흰색 */
  background:linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 흰 패널은 고정하고, 학습지 안의 내용만 아래로 이동합니다. */
body.s62-active .s62-wrap .s62-content{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  transform:translateY(var(--s62-content-shift-y));
}

body.s62-active .s62-wrap .s62-board-header.s21-sheet-header.edu-worksheet-header{
  position:static;
  flex:0 0 auto;
  margin:0;
  padding:0 0 14px;
  border-bottom:var(--edu-worksheet-header-border);
  box-sizing:border-box;
  width:auto;
  max-width:none;
  transform:translateY(calc(-1 * var(--s62-content-shift-y)));
  z-index:auto;
}

body.s62-active .s62-wrap .s62-board-header .s21-sheet-title.edu-worksheet-title{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--edu-worksheet-title-color, #17384d);
  font-family:var(--edu-worksheet-font, "Pretendard", "Noto Sans KR", system-ui, sans-serif);
  font-size:var(--edu-worksheet-title-size, 30px);
  font-weight:var(--edu-worksheet-title-weight, 800);
  letter-spacing:var(--edu-worksheet-title-letter-spacing, 0.02em);
  line-height:1.2;
  text-align:left;
  text-shadow:none;
  white-space:normal;
}

/* s5-1(s51) progress step indicator on white worksheet */
body.s62-active .s62-wrap .s62-stepbar.s51-progress{
  position:static;
  left:auto;
  top:auto;
  transform:translateY(calc(-1 * var(--s62-content-shift-y)));
  z-index:auto;
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  margin:12px 0 18px;
  padding:0 4px;
  pointer-events:none;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#4b5563 !important;
  -webkit-text-fill-color:#4b5563 !important;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step .num{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid #b8c5d1;
  background:#f3f6f9;
  color:#4b5563 !important;
  -webkit-text-fill-color:#4b5563 !important;
  font-size:12px;
  font-weight:800;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-label{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step.active{
  color:#1679b8 !important;
  -webkit-text-fill-color:#1679b8 !important;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step.active .num{
  border-color:#3d9fe3;
  background:#eaf5fd;
  color:#1679b8 !important;
  -webkit-text-fill-color:#1679b8 !important;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step.active .s51-progress-label{
  color:#1679b8 !important;
  -webkit-text-fill-color:#1679b8 !important;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step.done{
  color:#278b58 !important;
  -webkit-text-fill-color:#278b58 !important;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step.done .num{
  border-color:#6bc492;
  background:#ebf8ef;
  color:#278b58 !important;
  -webkit-text-fill-color:#278b58 !important;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-step.done .s51-progress-label{
  color:#278b58 !important;
  -webkit-text-fill-color:#278b58 !important;
}

body.s62-active .s62-wrap .s62-stepbar.s51-progress .s51-progress-line{
  display:inline-block;
  width:28px;
  height:1px;
  margin:0 6px;
  background:#d7e1ea;
  flex-shrink:0;
}

body.s62-active .s62-wrap,
body.s62-active .s62-wrap .s62-card-badge,
body.s62-active .s62-wrap .s62-equation-math,
body.s62-active .s62-wrap .s62-equation-math *,
body.s62-active .s62-wrap .s62-common-question,
body.s62-active .s62-wrap .s62-common-question *,
body.s62-active .s62-wrap .s62-check-form,
body.s62-active .s62-wrap .s62-check-form *,
body.s62-active .s62-wrap .s62-workbench-title,
body.s62-active .s62-wrap .s62-convert-title,
body.s62-active .s62-wrap .s62-fraction-drop-title,
body.s62-active .s62-wrap .s62-common-question-title,
body.s62-active .s62-wrap .s62-frac-workbench-title,
body.s62-active .s62-wrap label,
body.s62-active .s62-wrap button,
body.s62-active .s62-wrap input{
  color:#111827;
}

body.s62-active .s62-wrap input{
  background:rgba(255,255,255,.96);
  caret-color:#111827;
}

body.s62-active .s62-wrap .tm-bar,
body.s62-active .s62-wrap .eq-fraction-line{
  background-color:#18384C !important;
  border-color:#18384C !important;
}

/* s61과 동일한 분수 막대 — 패널 안 전체 .s62-bar */
body.s62-active .s62-wrap .s62-bar,
body.s62-active .s62-wrap .s62-piece-bar,
body.s62-active .s62-wrap .s62-whole-bar .s62-bar,
body.s62-active .s62-wrap .s62-source-frac-bar,
body.s62-active .s62-wrap .s62-fraction-work-bar,
body.s62-active .s62-wrap .s62-fraction-result-bar,
body.s62-active .s62-wrap .s62-check-answer-frac-bar{
  gap:var(--s62-bar-seg-gap, 2px);
  border:1px solid var(--s62-bar-tray-border, #9AADB8);
  border-radius:var(--s62-bar-outer-radius, 10px);
  background:var(--s62-bar-divider-bg, #B8C9D4);
  box-shadow:none;
}

body.s62-active .s62-wrap .s62-bar span,
body.s62-active .s62-wrap .s62-piece-bar span{
  border:none;
  background:var(--s62-bar-empty, #E5EBEE);
  box-shadow:none;
}

body.s62-active .s62-wrap .s62-bar.s62-blue span.is-fill,
body.s62-active .s62-wrap .s62-piece-bar.s62-blue span.is-fill,
body.s62-active .s62-wrap .s62-piece-bar.s62-blue span{
  background:var(--s62-bar-blue-fill);
}

body.s62-active .s62-wrap .s62-bar.s62-orange span.is-fill,
body.s62-active .s62-wrap .s62-piece-bar.s62-orange span,
body.s62-active .s62-wrap .s62-piece-bar.s62-orange span.is-fill{
  background:var(--s62-bar-orange-fill);
}

body.s62-active .s62-wrap .s61-bar,
body.s62-active .s62-wrap .s62-intro-workbench .s61-bar{
  gap:var(--s61-bar-seg-gap, 2px);
  border:1px solid var(--s62-bar-tray-border, #9AADB8);
  border-radius:var(--s62-bar-outer-radius, 10px);
  background:var(--s62-bar-divider-bg, #B8C9D4);
  box-shadow:none;
}

body.s62-active .s62-wrap .s61-bar span{
  border:none;
  background:var(--s62-bar-empty, #E5EBEE);
  box-shadow:none;
}

body.s62-active .s62-wrap .s61-bar.s61-blue span.is-fill{
  background:var(--s62-bar-blue-fill);
}

body.s62-active .s62-wrap .s61-bar.s61-orange span.is-fill{
  background:var(--s62-bar-orange-fill);
}

body.s62-active .s62-wrap .s61-blue-fraction .s61-frac-blue-bar span:not(:first-child),
body.s62-active .s62-wrap .s61-orange-fraction .s61-frac-orange-bar span:not(:first-child){
  border-left:none;
  box-shadow:none;
}

/* ===== s62 숫자 — s61과 동일 (textbook-math--game 30px) ===== */
body.s62-active .s62-wrap .textbook-math.textbook-math--game{
  --bar-h:1.5px;
}

body.s62-active .s62-screen .s62-card-badge.s62-card-mixed,
body.s62-active .s62-screen .s62-problem-beside-row.s62-equation-math{
  --s62-eq-size:var(--s62-mixed-display-size);
}

/* s62 분수 막대 — s61과 동일 크기 */
body.s62-active .s62-screen .s62-bar,
body.s62-active .s62-screen .s62-whole-bar,
body.s62-active .s62-screen .s62-source-frac-bar,
body.s62-active .s62-screen .s62-piece-bar{
  width:var(--s62-bar-w);
  height:var(--s62-bar-h);
}

/* s61과 같은 상단 문제 카드: 막대의 기존 좌표·낙하 애니메이션은 유지한다. */
body.s62-active .s62-problem.s62-top-static .s62-problem-card-wrap{
  isolation:isolate;
}

body.s62-active .s62-problem.s62-top-static .s62-problem-card-wrap::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-34px;
  left:50%;
  width:360px;
  height:186px;
  box-sizing:border-box;
  transform:translateX(-50%);
  border:1px solid #a9dafa;
  border-radius:16px;
  background:linear-gradient(180deg, #f7fcff, #f0f9ff);
  box-shadow:0 10px 22px rgba(36,58,76,.08), inset 0 1px 0 rgba(255,255,255,.9);
  pointer-events:none;
}

body.s62-active .s62-problem.s62-top-static .s62-problem-card-wrap > .s62-card{
  z-index:1;
}

/* 숫자+막대 묶음을 카드 중심에 맞춰 양쪽 여백을 같게 한다. */
body.s62-active .s62-problem.s62-top-static .s62-card-layout{
  transform:translateX(-16px) !important;
}

body.s62-active .s62-problem.s62-top-static .s62-problem-card-wrap::before{
  position:absolute;
  z-index:2;
  top:-46px;
  left:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  height:28px;
  padding:0 14px;
  box-sizing:border-box;
  transform:translateX(-50%);
  border:1px solid #d8e8ef;
  border-radius:999px;
  background:#fbfdfe;
  box-shadow:0 3px 8px rgba(43,73,92,.06);
  color:#6e99ae;
  font-size:14px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}

body.s62-active .s62-problem.s62-top-static .s62-blue-wrap::before{
  content:"남아 있는 양";
}

body.s62-active .s62-problem.s62-top-static .s62-orange-wrap::before{
  content:"빼는 양";
  border-color:#f2dfd1;
  color:#bd8c6b;
}

body.s62-active .s62-problem.s62-top-static .s62-orange-wrap::after{
  border-color:#f6cba8;
  background:linear-gradient(180deg, #fffaf6, #fff5ee);
}

/* 첫 단계의 공통분모 입력도 s61 계산 작업과 같은 독립 상자로 표시한다. */
body.s62-active .s62-common-question.s5-conv-denom::before{
  content:"계산 작업";
  position:absolute;
  top:-15px;
  left:50%;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:128px;
  height:30px;
  transform:translateX(-50%);
  border:1px solid #249fbd;
  border-radius:10px;
  background:linear-gradient(180deg, #4bc5ca, #239ea6);
  box-shadow:0 5px 10px rgba(23,131,146,.20);
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}

/* 통분 완료(is-complete) 후에도 계산 작업 흰 창을 숨기지 않는다. */
body.s62-active .s62-common-question.s5-conv-denom,
body.s62-active .s62-common-question.s5-conv-denom.is-complete{
  background:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}