.s61-screen{
  --s61-card-w: 500px;
  --s61-card-h: 220px;
  --s61-card-gap: 32px;
  /* 모든 수막대 너비만 기존 320px의 80%로 축소 (높이·간격은 유지). */
  --s61-bar-w: 256px;
  --s61-s51-bar-h: calc(62px * 2 / 3);
  --s61-bar-h: var(--s61-s51-bar-h);
  --s61-s51-bar-gap: calc(4px * 2 / 3);
  --s61-s51-bar-pad: calc(4px * 2 / 3);
  --s61-s51-stroke-1: 0.3px;
  --s61-s51-stroke-2: 0.6px;
  --s61-workbar-w: var(--s61-bar-w);
  --s61-workbar-h: var(--s61-bar-h);
  --s61-bar-gap: calc(10px * 2 / 3);
  --s61-bar-stack-step: calc(var(--s61-bar-h) + var(--s61-bar-gap));
  --s61-card-pad-x: 24px;
  --s61-card-pad-top: 18px;
  --s61-card-content-up: 38px; /* 약 1cm @1920 디자인 */
  --s61-orange-card-shift: 76px; /* 약 2cm @1920 — 2 1/3 카드 왼쪽 이동 */
  --s61-dimmed-opacity: 0.5;
  --s61-eq-shift-x: 95px; /* 약 2.5cm @1920 */
  --s61-final-answer-lift: 95px; /* 약 2.5cm @1920 — 최종 답 박스 */
  --s61-guide-lift: 114px; /* 약 3cm @1920 */
  /* s43 학습지 박스와 동일 높이, 가로 1200px */
  --s61-wrap-w: 1200px;
  --s61-box-h: calc(720px - 1.5cm + 34px);
  --s61-workbench-pad-x: 18px;
  --s61-workbench-content-w: 960px;
  --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;
  --s61-badge-size: 46px;
  --s61-mixed-display-size: 26px;
  --s61-scene-title-top: 66px;
  --s61-scene-title-left: 24px;
  --s61-scene-title-shift-x: 190px; /* 약 5cm @1920 */
  /* 아이보리 학습지 + 파랑/주황 막대 */
  --s61-ivory-panel-bg:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.9), transparent 34%),
    linear-gradient(180deg, #f8f5ee 0%, #eef3f5 100%);
  --s61-ivory-panel-border: #5A8DA6;
  --s61-ivory-title: #18384C;
  --s61-ivory-header-line: #C5D8DE;
  --s61-bar-blue-fill: linear-gradient(180deg, #4A9FD2, #2F7FB5);
  --s61-bar-orange-fill: linear-gradient(180deg, #F2A05B, #D87935);
  --s61-bar-empty: #E5EBEE;
  --s61-bar-tray: #E5EBEE;
  --s61-bar-tray-border: #9AADB8;
  --s61-bar-divider-bg: #B8C9D4;
  --s61-bar-seg-gap: 2px;
  --s61-bar-outer-radius: 10px;
  --s61-btn-bg: linear-gradient(180deg, #56C4E8, #2F9FC5);
  --s61-btn-border: #2F9FC5;
  --s61-btn-text: #18384C;
  --s61-btn-shadow: 0 8px 20px rgba(47, 159, 197, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  position:relative;
  width:1920px;
  height:1080px;
  overflow:hidden;
  color:#effbff;
  background:#030711;
}

.s61-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);
}

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

.s61-wrap{
  position:absolute;
  left:50%;
  top:122px;
  z-index:5;
  width:min(var(--s61-wrap-w), calc(100% - 80px));
  height:var(--s61-box-h);
  min-height:var(--s61-box-h);
  max-height:var(--s61-box-h);
  padding:56px 28px 24px;
  box-sizing:border-box;
  transform:translateX(-50%);
}

/*
 * edu-worksheet-panel--large(1080px) + corridor-puzzle-card(stage2.css)가
 * .s61-wrap 보다 뒤에서 width/height를 덮어씀 → s61 전용으로 재고정
 */
body.s61-active .s61-wrap.corridor-puzzle-card.edu-worksheet-panel.edu-worksheet-panel--large{
  display:flex;
  flex-direction:column;
  width:min(var(--s61-wrap-w), calc(100% - 80px)) !important;
  max-width:min(var(--s61-wrap-w), calc(100% - 80px)) !important;
  min-width:0 !important;
  height:var(--s61-box-h) !important;
  min-height:var(--s61-box-h) !important;
  max-height:var(--s61-box-h) !important;
  padding:var(--edu-worksheet-padding, 36px 42px 32px) !important;
}

/* s31(magic-lab-board)과 동일한 edu-worksheet 제목 */
body.s61-active .s61-wrap .s61-board-header.s21-sheet-header.edu-worksheet-header{
  position:static;
  flex:0 0 auto;
  margin:0 0 20px;
  padding:0 0 14px;
  border-bottom:1px solid var(--s61-ivory-header-line, #C5D8DE);
  box-sizing:border-box;
  width:auto;
  max-width:none;
  transform:none;
  z-index:auto;
}

body.s61-active .s61-wrap .s61-board-header .s21-sheet-title.edu-worksheet-title{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--s61-ivory-title, #18384C);
  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;
}

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

.s61-problem.is-dimmed{
  opacity:1;
}

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

.s61-problem .s61-card{
  border:0;
  background:transparent;
  box-shadow:none;
}

.s61-problem .s61-card-stack{
  margin-top:calc(14px - var(--s61-card-content-up));
}

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

.s61-card{
  position:relative;
  width:var(--s61-card-w);
  height:var(--s61-card-h);
  padding:var(--s61-card-pad-top) var(--s61-card-pad-x) 18px;
  border:1px solid rgba(129,229,255,.18);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(5,22,38,.78), rgba(2,10,20,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

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

.s61-card-badge{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  color:#eef7ff;
}

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

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

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

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

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

.s61-bar span:first-child{
  border-left:none;
}

.s61-bar span.is-fill{
  border:none;
}

.s61-bar span:first-child.is-fill{
  border-left:none;
}

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

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

.s61-action{
  display:flex;
  justify-content:center;
  margin-top:22px;
}

.s61-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:112px;
  height:50px;
  padding:0 16px;
  border:1px solid var(--s61-btn-border);
  border-radius:14px;
  color:var(--s61-btn-text);
  background:var(--s61-btn-bg);
  box-shadow:var(--s61-btn-shadow);
  font-size:17px;
  font-weight:950;
  line-height:1;
  cursor:pointer;
}

.s61-btn:disabled{
  opacity:.48;
  cursor:default;
}

.s61-btn-secondary{
  min-width:176px;
}

.s61-workbench{
  --bar-w:var(--s61-bar-w);
  --bar-h:var(--s61-bar-h);
  --bar-gap:var(--s61-bar-gap);
  --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:calc(var(--whole-1-y) + var(--s61-bar-stack-step));
  --whole-3-y:calc(var(--whole-2-y) + var(--s61-bar-stack-step));
  --fraction-y:calc(var(--whole-3-y) + var(--s61-bar-stack-step));
  --problem-beside-gap:14px;
  --problem-beside-y:calc(var(--whole-2-y) + 4px);
  --eq-box-x:var(--orange-x);
  --guide-bottom:calc(12px + var(--s61-guide-lift));
  --eq-box-w:320px;
  --frac-gap:12px;
  --drop-start-y:12px;
  position:relative;
  width:960px;
  height:430px;
  margin:16px 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;
  overflow:visible;
}

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

.s61-scene-title{
  position:absolute;
  left:calc(var(--s61-scene-title-left) + var(--s61-scene-title-shift-x));
  top:var(--s61-scene-title-top);
  z-index:91;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  width:max-content;
  max-width:min(720px, calc(100% - 48px));
  pointer-events:none;
  text-align:left;
}

.s61-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;
  letter-spacing:.02em;
  line-height:1.25;
  white-space:nowrap;
}

.s61-bench-layer{
  position:relative;
  width:100%;
  height:296px;
}

.s61-blue-whole-group,
.s61-orange-whole-group{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.s61-whole-bar{
  position:absolute;
  width:var(--bar-w);
  height:var(--bar-h);
  transition:
    left .85s cubic-bezier(.22,.82,.28,1),
    top .85s cubic-bezier(.22,.82,.28,1),
    opacity .85s ease,
    transform 1s ease,
    filter .45s ease,
    box-shadow .45s ease,
    visibility 0s linear 1s;
  will-change:left, top, opacity, transform;
}

.s61-remain-bar{
  transition:
    left .85s cubic-bezier(.22,.82,.28,1),
    top .5s cubic-bezier(.22,.82,.28,1),
    opacity 1s ease,
    filter .45s ease,
    box-shadow .45s ease,
    visibility 0s linear 1s;
}

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

.s61-blue-whole-1,
.s61-blue-whole-2,
.s61-blue-whole-3{
  left:var(--blue-x);
  top:var(--drop-start-y);
  opacity:0;
  z-index:3;
}

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

.s61-blue-fraction .s61-bar,
.s61-orange-fraction .s61-bar{
  transition:
    border-color .55s ease,
    background .55s ease,
    box-shadow .55s ease;
}

.s61-blue-fraction .s61-bar span,
.s61-orange-fraction .s61-bar span{
  transition:
    background .55s ease,
    border-color .55s ease,
    box-shadow .55s ease;
}

.s61-blue-fraction,
.s61-orange-fraction{
  position:absolute;
  display:grid;
  justify-items:center;
  gap:5px;
  width:var(--bar-w);
  top:var(--drop-start-y);
  opacity:0;
  z-index:4;
  transition:
    left .85s cubic-bezier(.22,.82,.28,1),
    top .85s cubic-bezier(.22,.82,.28,1),
    opacity .85s ease,
    transform .85s ease;
}

.s61-blue-fraction{
  left:var(--blue-x);
}

.s61-orange-fraction{
  left:var(--orange-x);
}

.s61-blue-fraction .s61-bar,
.s61-orange-fraction .s61-bar{
  width:var(--bar-w);
  height:var(--bar-h);
}

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

.s61-blue-drop .s61-blue-whole-2{
  animation:s61-drop-row2 .85s cubic-bezier(.22,.82,.28,1) .1s forwards;
}

.s61-blue-drop .s61-blue-whole-3{
  animation:s61-drop-row3 .85s cubic-bezier(.22,.82,.28,1) .2s forwards;
}

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

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

.s61-orange-drop .s61-orange-whole-2{
  animation:s61-drop-row2 .85s cubic-bezier(.22,.82,.28,1) .12s forwards;
}

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

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

@keyframes s61-drop-row2{
  from{top:var(--drop-start-y);opacity:0;}
  to{top:var(--whole-2-y);opacity:1;}
}

@keyframes s61-drop-row3{
  from{top:var(--drop-start-y);opacity:0;}
  to{top:var(--whole-3-y);opacity:1;}
}

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

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

.s61-orange-match .s61-orange-whole-1{
  left:var(--blue-x);
  top:var(--whole-1-y);
}

.s61-orange-match .s61-orange-whole-2{
  left:var(--blue-x);
  top:var(--whole-2-y);
}

.s61-orange-match .s61-orange-whole-1,
.s61-orange-match .s61-orange-whole-2{
  z-index:7;
}

/* 자연수 두 막대를 확인하는 동안 1/3은 그 바로 아래에 둡니다. */
.s61-orange-match .s61-orange-fraction,
.s61-pair-hold .s61-orange-fraction{
  left:var(--blue-x);
  top:var(--orange-fraction-y, var(--fraction-y));
  opacity:1;
}

.s61-frac-storage .s61-blue-fraction,
.s61-frac-storage .s61-orange-fraction{
  opacity:.34;
}

.s61-pair-hold .s61-pair-blue .s61-bar,
.s61-pair-hold .s61-pair-orange .s61-bar{
  border-color:#6bc492;
  box-shadow:0 0 0 var(--s61-s51-stroke-1) rgba(54,162,105,.22);
  filter:none;
}

.s61-pair-hold .s61-orange-whole-1,
.s61-pair-hold .s61-orange-whole-2{
  z-index:8;
}

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

.s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
.s61-whole-cancel-to-empty .s61-blue-whole-2.s61-whole-empty .s61-bar span.is-fill{
  background:var(--s61-bar-empty, #E5EBEE);
  box-shadow:none;
  transition:background .8s ease, box-shadow .8s ease;
}

.s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar span,
.s61-whole-cancel-to-empty .s61-blue-whole-2.s61-whole-empty .s61-bar span{
  background:var(--s61-bar-empty, #E5EBEE);
  box-shadow:none;
}

.s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar,
.s61-whole-cancel-to-empty .s61-blue-whole-2.s61-whole-empty .s61-bar{
  border-color:var(--s61-bar-tray-border, #9AADB8);
  background:var(--s61-bar-divider-bg, #B8C9D4);
  box-shadow:none;
  transition:border-color .8s ease, background .8s ease, box-shadow .8s ease;
}

.s61-whole-filled.s61-blue-whole-3 .s61-bar span.is-fill{
  background:var(--s61-bar-blue-fill);
}

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

.s61-remain-result .s61-blue-whole-1{
  top:var(--whole-1-y);
}

.s61-remain-result .s61-blue-whole-2{
  top:var(--whole-2-y);
}

.s61-remain-result .s61-blue-whole-3{
  left:var(--blue-x);
  top:var(--whole-3-y);
  width:var(--bar-w);
  height:var(--bar-h);
  opacity:1;
  transform:none;
  visibility:visible;
  z-index:6;
}

.s61-natural-equation-box{
  position:absolute;
  left:var(--eq-box-x);
  top:var(--whole-1-y);
  width:auto;
  max-width:308px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:grid;
  gap:7px;
  opacity:0;
  transition:opacity .45s ease;
  z-index:6;
}

.s61-natural-equation-box.is-show{
  opacity:1;
}

.s61-natural-equation-label{
  color:rgba(190,220,235,.72);
  font-size:15px;
  font-weight:820;
  letter-spacing:.02em;
}

.s61-natural-equation-expr{
  color:#e8f8ff;
  font-size:28px;
  font-weight:950;
  letter-spacing:.03em;
  white-space:nowrap;
}

.s61-natural-equation-row{
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
}

.s61-natural-equation-result{
  color:#e8f8ff;
  font-size:28px;
  font-weight:950;
  display:none;
}

.s61-natural-equation-note{
  color:rgba(170,255,218,.82);
  font-size:15px;
  font-weight:820;
  line-height:1.35;
  display:none;
}

.s61-natural-answered .s61-natural-equation-result{
  display:inline;
}

.s61-natural-answered .s61-whole-quiz-input,
.s61-natural-answered .s61-whole-quiz-btn{
  display:none;
}

.s61-natural-quiz .s61-whole-quiz-input,
.s61-natural-quiz .s61-whole-quiz-btn{
  display:inline-flex;
}

.s61-natural-quiz .s61-natural-equation-result,
.s61-natural-quiz .s61-natural-equation-note{
  display:none;
}

.s61-whole-quiz-input{
  display:none;
  width:31px;
  height:46px;
  padding:0 4px;
  border:1px solid rgba(141,239,255,.55);
  border-radius:6px;
  color:#effbff;
  background:rgba(2,14,26,.92);
  font-size:18px;
  font-weight:950;
  text-align:center;
}

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

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

.s61-whole-quiz-input.is-ok{
  border-color:rgba(110,232,176,.88);
}

.s61-whole-quiz-btn{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:32px;
  padding:0 8px;
  border:1px solid var(--s61-btn-border);
  border-radius:8px;
  color:var(--s61-btn-text);
  background:var(--s61-btn-bg);
  box-shadow:var(--s61-btn-shadow);
  font-size:12px;
  font-weight:950;
  cursor:pointer;
}

.s61-whole-quiz-btn:disabled{
  opacity:.5;
  cursor:default;
}

.s61-whole-quiz-msg{
  margin:0;
  min-height:14px;
  color:rgba(255,180,190,.92);
  font-size:15px;
  font-weight:820;
  line-height:1.35;
}

.s61-natural-quiz .s61-whole-quiz-msg:not(:empty){
  display:block;
}

.s61-whole-quiz-msg:empty{
  display:none;
}

.s61-fraction-equation-box{
  position:absolute;
  left:var(--eq-box-x);
  top:var(--fraction-y);
  width:auto;
  max-width:360px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:grid;
  gap:7px;
  opacity:0;
  transition:opacity .45s ease;
  z-index:6;
}

.s61-fraction-equation-label{
  color:rgba(190,220,235,.72);
  font-size:15px;
  font-weight:820;
  letter-spacing:.02em;
}

.s61-problem-beside-box{
  position:absolute;
  left:var(--blue-x);
  top:var(--problem-beside-y);
  width:max-content;
  max-width:none;
  transform:translateX(calc(-100% - var(--problem-beside-gap)));
  transform-origin:right center;
  z-index:8;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}

.s61-problem-beside-box.is-show{
  opacity:1;
}

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

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

.s61-problem-beside-final{
  display:none;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.s61-problem-beside-final.is-show{
  display:inline-flex;
}

.s61-problem-beside-result .s4-mixed > strong,
.s61-problem-beside-result .s4-fraction strong{
  color:#8dffc6;
}

.s61-problem-beside-result .s4-fraction i{
  background:#8dffc6;
}

.s61-fraction-equation-box.is-show{
  opacity:1;
}

.s61-frac-answer-group{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.s61-fraction-equation-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

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

.s61-fraction-equation-op{
  color:#e8f8ff;
  font-size:20px;
  font-weight:950;
  line-height:1;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em;
  min-width:1em;
}

.s61-equation-math .s4-mixed,
.s61-eq-mixed.s4-mixed{
  display:inline-flex;
  align-items:center;
  gap:.06em;
  white-space:nowrap;
  vertical-align:middle;
  flex:0 0 auto;
}

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

.s61-equation-math .s4-mixed .s4-fraction i{
  width:1.4em;
  min-width:1.4em;
}

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

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

.s61-equation-math .s4-mixed .s4-fraction strong{
  font-size:1em;
  line-height:1;
}

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

.s61-frac-answer-frac .s61-frac-num-cell{
  display:grid;
  place-items:center;
  min-width:.92em;
  min-height:calc(var(--s61-eq-size) * .95);
}

.s61-frac-quiz-input{
  width:17px;
  height:calc((var(--s61-eq-size) + 2px) / 2);
  padding:0 2px;
  border:1px solid rgba(141,239,255,.55);
  border-radius:4px;
  color:#effbff;
  background:rgba(2,14,26,.92);
  font-size:calc((var(--s61-eq-size) - 2px) / 2);
  font-weight:950;
  text-align:center;
}

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

.s61-frac-quiz-input.is-wrong{
  border-color:rgba(255,100,120,.88);
}

.s61-frac-quiz-input.is-ok{
  border-color:rgba(110,232,176,.88);
}

.s61-frac-quiz-result{
  font-size:var(--s61-eq-size);
  line-height:.95;
  font-weight:950;
  color:#e8f8ff;
}

.s61-frac-quiz-btn{
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:32px;
  padding:0 8px;
  border:1px solid var(--s61-btn-border);
  border-radius:8px;
  color:var(--s61-btn-text);
  background:var(--s61-btn-bg);
  box-shadow:var(--s61-btn-shadow);
  font-size:12px;
  font-weight:950;
  cursor:pointer;
  flex:0 0 auto;
}

.s61-frac-quiz-msg{
  margin:0;
  min-height:14px;
  color:rgba(255,180,190,.92);
  font-size:15px;
  font-weight:820;
  line-height:1.35;
}

.s61-frac-quiz-msg:empty{
  display:none;
}

.s61-frac-answered .s61-frac-quiz-input,
.s61-frac-answered .s61-frac-quiz-btn{
  display:none;
}

.s61-frac-answered .s61-frac-quiz-result{
  display:inline-block;
}

.s61-final-show .s61-final-answer-box{
  opacity:1;
  pointer-events:none;
}

.s61-next-btn{
  position:absolute;
  right:28px;
  bottom:28px;
  z-index:12;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:104px;
  max-width:148px;
  height:40px;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(67, 179, 220, .72);
  border-radius:11px;
  color:#102f42;
  -webkit-text-fill-color:#102f42;
  background:linear-gradient(180deg, #91ebff 0%, #43bfe9 100%);
  box-shadow:
    0 8px 17px rgba(38, 157, 203, .22),
    inset 0 1px 0 rgba(255, 255, 255, .68);
  font-size:14px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.035em;
  white-space:nowrap;
  box-sizing:border-box;
}

.s61-final-answer-box{
  position:absolute;
  left:50%;
  bottom:calc(8px + var(--s61-final-answer-lift));
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
  z-index:9;
}

.s61-final-answer-box.is-show{
  opacity:1;
}

.s61-final-answer-box[hidden]{
  display:none!important;
}

.s61-final-answer-result{
  --s61-eq-size:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:max-content;
  min-height:58px;
  padding:10px 24px;
  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);
}

.s61-final-answer-op{
  color:#e8f8ff;
  font-size:1em;
  font-weight:950;
  line-height:1;
  flex:0 0 auto;
}

.s61-final-answer-result .s61-final-answer-value .s4-mixed > strong,
.s61-final-answer-result .s61-final-answer-value .s4-fraction strong{
  color:#8dffc6;
}

.s61-final-answer-result .s61-final-answer-value .s4-fraction i{
  background:#8dffc6;
}

.s61-common-subtract-result .s61-blue-fraction{
  left:var(--blue-x);
  top:var(--fraction-y);
  z-index:5;
}

.s61-common-subtract-result .s61-orange-fraction.is-subtracting{
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
}

.s61-workbench.s61-whole-quiz-active .s61-blue-whole-3{
  animation:s61-remain-bar-pulse 1.15s ease-in-out infinite;
}

@keyframes s61-remain-bar-pulse{
  0%,100%{
    filter:brightness(1);
    box-shadow:none;
  }
  50%{
    filter:brightness(1.22);
    box-shadow:0 0 14px rgba(74,159,210,.58), 0 0 0 2px rgba(86,196,232,.42);
  }
}

.s61-frac-label{
  color:rgba(226,242,248,.78);
  font-size:12px;
  font-weight:900;
  opacity:0;
  transition:opacity .35s ease;
}

.s61-workbench.s61-whole-quiz-active .s61-orange-fraction,
.s61-workbench.s61-remain-result .s61-orange-fraction,
.s61-workbench.s61-fraction-prompt:not(.s61-frac-subtract-overlap):not(.s61-frac-subtract-tick) .s61-orange-fraction,
.s61-workbench.s61-common-scale-applied:not(.s61-common-subtract-overlap):not(.s61-common-subtract-animate) .s61-orange-fraction{
  left:var(--orange-x);
}

.s61-workbench.s61-whole-quiz-active .s61-orange-fraction,
.s61-workbench.s61-remain-result .s61-orange-fraction,
.s61-workbench.s61-fraction-prompt:not(.s61-frac-subtract-overlap):not(.s61-frac-subtract-tick):not(.s61-common-subtract-overlap) .s61-orange-fraction,
.s61-workbench.s61-common-scale-applied:not(.s61-common-subtract-overlap) .s61-orange-fraction{
  top:var(--fraction-y);
}

.s61-fraction-prompt .s61-blue-fraction{
  left:var(--blue-x);
  top:var(--fraction-y);
  opacity:1;
  z-index:4;
  animation:none;
}

.s61-fraction-prompt:not(.s61-frac-subtract-overlap):not(.s61-frac-subtract-tick) .s61-orange-fraction{
  left:var(--orange-x);
  top:var(--fraction-y);
  opacity:1;
  z-index:4;
}

.s61-fraction-prompt:not(.s61-frac-subtract-animate):not(.s61-frac-subtract-overlap):not(.s61-frac-subtract-tick):not(.s61-frac-subtract-return):not(.s61-common-subtract-animate) .s61-orange-fraction{
  transform:none;
  animation:none;
}

.s61-fraction-prompt .s61-frac-label,
.s61-fraction-prompt .s61-frac-label-blue{
  display:none;
}

.s61-frac-label-blue{
  color:rgba(190,235,255,.82);
}

.s61-frac-overlap-fx{
  position:absolute;
  left:var(--blue-x);
  top:var(--fraction-y);
  width:var(--bar-w);
  min-height:calc(var(--bar-h) + 34px);
  pointer-events:none;
  z-index:9;
  opacity:0;
  transition:opacity .35s ease;
}

.s61-frac-subtract-overlap .s61-frac-overlap-fx,
.s61-frac-subtract-tick .s61-frac-overlap-fx,
.s61-tick-mismatch .s61-frac-overlap-fx{
  opacity:1;
}

.s61-frac-subtract-return .s61-frac-overlap-fx,
.s61-common-scale-applied .s61-frac-overlap-fx{
  opacity:0;
}

.s61-frac-overlap-fx .s61-tick-overlay{
  position:relative;
  top:0;
  left:0;
  width:var(--bar-w);
  height:var(--bar-h);
}

.s61-fraction-mismatch-tag{
  position:absolute;
  top:calc(var(--bar-h) + 8px);
  left:50%;
  transform:translateX(-50%);
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(210,88,108,.58);
  background:rgba(255,251,252,.97);
  color:#b4233a;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:0;
  transition:opacity .35s ease .12s;
}

.s61-frac-subtract-tick .s61-fraction-mismatch-tag,
.s61-tick-mismatch .s61-fraction-mismatch-tag{
  opacity:1;
}

.s61-frac-stack-minus{
  display:none;
}

@keyframes s61-orange-slide-x{
  from{transform:translateX(0);}
  to{transform:translateX(calc(var(--blue-x) - var(--orange-x)));}
}

.s61-frac-subtract-animate .s61-orange-fraction{
  left:var(--orange-x);
  top:var(--fraction-y);
  opacity:1;
  animation:s61-orange-slide-x .9s cubic-bezier(.4,0,.2,1) forwards;
  transition:none;
  z-index:7;
  filter:drop-shadow(0 4px 16px rgba(255,130,60,.34));
}

.s61-frac-subtract-animate .s61-frac-orange-bar{
  border-color:var(--s61-bar-tray-border, #9AADB8);
}

.s61-frac-subtract-animate .s61-frac-orange-bar span.is-fill{
  background:var(--s61-bar-orange-fill);
}

.s61-frac-subtract-animate .s61-blue-fraction{
  z-index:5;
}

.s61-frac-subtract-overlap .s61-blue-fraction,
.s61-frac-subtract-tick .s61-blue-fraction{
  left:var(--blue-x);
  top:var(--fraction-y);
  opacity:1;
  z-index:5;
}

.s61-frac-subtract-overlap .s61-orange-fraction,
.s61-frac-subtract-tick .s61-orange-fraction{
  left:var(--blue-x);
  top:var(--fraction-y);
  opacity:.58;
  z-index:6;
  animation:none;
  transform:none;
  filter:drop-shadow(0 4px 14px rgba(255,120,50,.28));
}

.s61-frac-subtract-overlap .s61-blue-fraction .s61-frac-blue-bar,
.s61-frac-subtract-tick .s61-blue-fraction .s61-frac-blue-bar{
  box-shadow:0 0 0 2px rgba(74,159,210,.28);
}

.s61-frac-subtract-overlap .s61-orange-fraction .s61-frac-label,
.s61-frac-subtract-tick .s61-orange-fraction .s61-frac-label{
  opacity:0;
}

.s61-frac-subtract-overlap .s61-frac-blue-bar,
.s61-frac-subtract-tick .s61-frac-blue-bar{
  border-color:var(--s61-bar-tray-border, #9AADB8);
  background:var(--s61-bar-divider-bg, #B8C9D4);
}

.s61-frac-subtract-overlap .s61-frac-orange-bar,
.s61-frac-subtract-tick .s61-frac-orange-bar{
  border-color:var(--s61-bar-tray-border, #9AADB8);
  background:var(--s61-bar-divider-bg, #B8C9D4);
}

.s61-frac-subtract-overlap .s61-frac-orange-bar span.is-fill,
.s61-frac-subtract-tick .s61-frac-orange-bar span.is-fill{
  background:var(--s61-bar-orange-fill);
}

.s61-frac-subtract-tick .s61-orange-fraction{
  animation:s61-frac-mismatch-nudge .55s ease 2;
}

.s61-frac-subtract-return .s61-orange-fraction{
  left:var(--orange-x);
  top:var(--fraction-y);
  opacity:1;
  z-index:4;
  animation:none;
  transform:none;
  transition:left .8s cubic-bezier(.22,.82,.28,1), opacity .45s ease;
}

.s61-frac-subtract-return .s61-frac-blue-bar span:not(:first-child),
.s61-frac-subtract-return .s61-frac-orange-bar span:not(:first-child){
  border-left:none;
  box-shadow:none;
}

@keyframes s61-frac-mismatch-nudge{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(4px);}
}

.s61-frac-subtract-tick .s61-frac-blue-bar,
.s61-frac-subtract-tick .s61-frac-orange-bar{
  position:relative;
}

.s61-fraction-focus .s61-blue-fraction,
.s61-fraction-overlap .s61-blue-fraction,
.s61-fraction-rebound .s61-blue-fraction{
  left:var(--frac-center-x);
  top:var(--frac-focus-blue-y);
  opacity:1;
  z-index:5;
}

.s61-fraction-focus .s61-orange-fraction,
.s61-fraction-rebound .s61-orange-fraction{
  left:var(--frac-center-x);
  top:var(--frac-focus-orange-y);
  opacity:1;
  z-index:4;
}

.s61-fraction-focus .s61-frac-label,
.s61-fraction-rebound .s61-frac-label{
  opacity:1;
}

.s61-fraction-overlap .s61-orange-fraction{
  left:var(--frac-center-x);
  top:var(--frac-focus-blue-y);
  opacity:.75;
  z-index:6;
}

.s61-fraction-overlap .s61-orange-fraction .s61-frac-label{
  opacity:0;
}

.s61-blue-fraction .s61-frac-blue-bar span:not(:first-child),
.s61-orange-fraction .s61-frac-orange-bar span:not(:first-child){
  border-left:none;
  box-shadow:none;
  transition:border-color .4s ease, box-shadow .4s ease;
}

.s61-fraction-overlap .s61-frac-blue-bar span:not(:first-child),
.s61-fraction-overlap .s61-frac-orange-bar span:not(:first-child),
.s61-tick-compare .s61-frac-blue-bar span:not(:first-child),
.s61-tick-compare .s61-frac-orange-bar span:not(:first-child),
.s61-tick-mismatch .s61-frac-blue-bar span:not(:first-child),
.s61-tick-mismatch .s61-frac-orange-bar span:not(:first-child){
  border-left-color:#ff4757;
  border-left-width:4px;
  box-shadow:inset 3px 0 0 rgba(255,130,130,.62), 0 0 8px rgba(255,71,87,.48);
}

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

.s61-tick-overlay{
  position:absolute;
  top:0;
  left:0;
  width:var(--bar-w);
  height:var(--bar-h);
  pointer-events:none;
  z-index:7;
  opacity:0;
  transition:opacity .45s ease;
}

.s61-fraction-overlap .s61-tick-overlay,
.s61-tick-compare .s61-tick-overlay,
.s61-tick-mismatch .s61-tick-overlay{
  opacity:1;
}

.s61-fraction-rebound .s61-tick-overlay{
  opacity:0;
}

.s61-tick-blue,
.s61-tick-orange{
  position:absolute;
  inset:0;
}

.s61-tick{
  position:absolute;
  top:-7px;
  width:4px;
  height:calc(var(--bar-h) + 14px);
  border-radius:2px;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .35s ease;
}

.s61-tick-blue .s61-tick{
  background:linear-gradient(180deg, rgba(120,200,255,.22), #4A9FD2 16%, #2F7FB5 84%, rgba(120,200,255,.22));
  box-shadow:0 0 8px rgba(74,159,210,.62), 0 0 2px rgba(210,240,255,.85);
}

.s61-tick-orange .s61-tick{
  background:linear-gradient(180deg, rgba(255,190,130,.24), #F2A05B 16%, #D87935 84%, rgba(255,190,130,.24));
  box-shadow:0 0 8px rgba(242,160,91,.58), 0 0 2px rgba(255,230,200,.85);
}

.s61-fraction-overlap .s61-tick,
.s61-tick-compare .s61-tick,
.s61-tick-mismatch .s61-tick,
.s61-frac-subtract-tick .s61-tick{
  opacity:1;
}

.s61-tick-b1{ left:25%; }
.s61-tick-b2{ left:50%; }
.s61-tick-b3{ left:75%; }
.s61-tick-o1{ left:33.333%; }
.s61-tick-o2{ left:66.666%; }

.s61-tick-mismatch .s61-mismatch-line,
.s61-frac-subtract-tick .s61-mismatch-line{
  opacity:1;
  transform:translateX(-50%) scaleY(1);
}

.s61-mismatch-line{
  position:absolute;
  top:-6px;
  width:4px;
  height:calc(var(--bar-h) + 12px);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(255,89,109,.25), #ff3b55 12%, #ff3b55 88%, rgba(255,89,109,.25));
  box-shadow:0 0 10px rgba(255,59,85,.75);
  opacity:0;
  transform:translateX(-50%) scaleY(0);
  transform-origin:center top;
  transition:opacity .35s ease .12s, transform .4s ease .12s;
  z-index:8;
}

.s61-line-a{ left:33.333%; }
.s61-line-b{ left:50%; }
.s61-line-c{ left:66.666%; }

.s61-shake .s61-blue-fraction,
.s61-shake .s61-orange-fraction{
  animation:s61-shake .52s ease 3;
}

@keyframes s61-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-8px);}
  50%{transform:translateX(7px);}
  75%{transform:translateX(-4px);}
}

.s61-x-pop .s61-fraction-x{
  animation:s61-x-pop .45s ease .22s forwards;
}

@keyframes s61-x-pop{
  0%{opacity:0;transform:scale(.4);}
  70%{transform:scale(1.12);}
  100%{opacity:1;transform:scale(1);}
}

.s61-fraction-x{
  position:absolute;
  left:calc(var(--bar-w) + 10px);
  top:calc(var(--bar-h) / 2 - 17px);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#ffd9df;
  border:1px solid rgba(255,102,125,.55);
  background:rgba(106,18,34,.62);
  font-size:18px;
  font-weight:950;
  opacity:0;
  transform:scale(.4);
  z-index:9;
}

.s61-guide{
  position:absolute;
  left:50%;
  bottom:58px;
  transform:translateX(-50%);
  width:788px;
  max-width:788px;
  min-height:36px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(4,18,32,.72);
  color:rgba(235,247,250,.88);
  font-size:14px;
  font-weight:820;
  text-align:center;
  opacity:0;
  transition:opacity .35s ease;
}

.s61-guide.is-show{
  opacity:1;
}

.s61-guide-btn{
  position:absolute;
  left:50%;
  bottom:var(--guide-bottom);
  transform:translateX(-50%);
  min-width:176px;
  height:44px;
  padding:0 16px;
  border:1px solid var(--s61-btn-border);
  border-radius:14px;
  color:var(--s61-btn-text);
  background:var(--s61-btn-bg);
  box-shadow:var(--s61-btn-shadow);
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}

.s61-guide-btn.is-show{
  opacity:1;
  pointer-events:auto;
}

.s61-guide-btn:disabled{
  opacity:0;
  pointer-events:none;
}

.s61-common-scale-box{
  position:absolute;
  left:50%;
  bottom:var(--guide-bottom);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:8;
}

.s61-common-scale-box.is-show{
  opacity:1;
  pointer-events:auto;
}

.s61-common-scale-box[hidden]{
  display:none!important;
}

.s61-common-scale-prompt{
  display:none;
}

.s61-common-scale-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.s61-common-scale-eq{
  color:#e8f8ff;
  font-size:18px;
  font-weight:950;
  white-space:nowrap;
}

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

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

.s61-common-denom-input.is-wrong{
  border-color:rgba(255,100,120,.88);
}

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

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

.s61-aligned-subtract-btn,
.s61-common-denom-btn{
  min-width:52px;
  height:40px;
  padding:0 12px;
  border:1px solid var(--s61-btn-border);
  border-radius:10px;
  color:var(--s61-btn-text);
  background:var(--s61-btn-bg);
  box-shadow:var(--s61-btn-shadow);
  font-size:13px;
  font-weight:950;
  cursor:pointer;
}

.s61-common-scale-msg{
  margin:0;
  min-height:14px;
  color:rgba(255,180,190,.92);
  font-size:13px;
  font-weight:820;
  text-align:center;
}

.s61-common-scale-msg:empty{
  display:none;
}

.s61-common-scale-applied .s61-blue-fraction,
.s61-common-scale-applied .s61-orange-fraction{
  opacity:1;
  transform:none;
}

.s61-common-scale-applied:not(.s61-common-subtract-animate) .s61-blue-fraction,
.s61-common-scale-applied:not(.s61-common-subtract-animate) .s61-orange-fraction{
  animation:none;
}

.s61-common-scale-applied .s61-blue-fraction{
  left:var(--blue-x);
  top:var(--fraction-y);
  z-index:5;
}

.s61-common-scale-applied .s61-orange-fraction{
  left:var(--orange-x);
  top:var(--fraction-y);
  z-index:4;
}

.s61-common-scale-applied .s61-frac-overlap-fx{
  opacity:0;
}

.s61-common-scale-applied .s61-frac-blue-bar,
.s61-common-scale-applied .s61-frac-orange-bar{
  transition:opacity .35s ease;
}

.s61-common-scale-applied .s61-frac-blue-bar span:not(:first-child),
.s61-common-scale-applied .s61-frac-orange-bar span:not(:first-child){
  border-left:none;
  box-shadow:none;
}

.s61-common-scale-applied .s61-frac-blue-bar span.is-fill{
  background:var(--s61-bar-blue-fill);
}

.s61-common-scale-applied .s61-frac-orange-bar span.is-fill{
  background:var(--s61-bar-orange-fill);
}

.s61-common-scale-applied .s61-frac-blue-bar,
.s61-common-scale-applied .s61-frac-orange-bar{
  border-color:var(--s61-bar-tray-border, #9AADB8);
  background:var(--s61-bar-divider-bg, #B8C9D4);
}

.s61-common-subtract-animate .s61-orange-fraction{
  left:var(--orange-x);
  top:var(--fraction-y);
  animation:s61-orange-slide-x .85s cubic-bezier(.4,0,.2,1) forwards;
  transition:none;
  z-index:7;
}

.s61-common-subtract-overlap .s61-blue-fraction,
.s61-common-subtract-overlap .s61-orange-fraction{
  left:var(--blue-x);
  top:var(--fraction-y);
  opacity:1;
  animation:none;
  transform:none;
  z-index:5;
}

.s61-common-subtract-overlap .s61-orange-fraction{
  opacity:.82;
  z-index:6;
}

.s61-mixed-value.s4-mixed,
.s61-mixed-value .s4-mixed{
  display:inline-flex;
  align-items:center;
  gap:.06em;
  line-height:1;
  white-space:nowrap;
}

.s61-mixed-value.s4-mixed > strong,
.s61-mixed-value > strong,
.s61-mixed-value .s4-mixed > strong,
.s61-card-mixed .s4-mixed > strong,
.s61-card-mixed.s61-equation-math .s4-mixed > strong{
  font-size:1em;
  line-height:1;
  font-weight:950;
}

.s61-mixed-value .s4-fraction,
.s61-card-mixed .s4-fraction{
  display:inline-grid;
  grid-template-rows:auto 2px auto;
  align-items:center;
  justify-items:center;
  gap:var(--s61-eq-frac-gap, 1px);
  min-width:auto;
  line-height:1;
}

.s61-mixed-value .s4-fraction strong,
.s61-card-mixed .s4-fraction strong,
.s61-card-mixed.s61-equation-math .s4-mixed .s4-fraction strong{
  min-width:.86em;
  padding:0;
  font-size:1em;
  line-height:1;
  text-align:center;
  font-weight:950;
}

.s61-mixed-value .s4-fraction i,
.s61-card-mixed .s4-fraction i,
.s61-card-mixed.s61-equation-math .s4-mixed .s4-fraction i{
  width:1.4em;
  min-width:1.4em;
  height:2px;
  border-radius:2px;
  background:#dff7ff;
}

.s61-eq > span{
  color:#ffd166;
  font-weight:950;
}

@media (prefers-reduced-motion:reduce){
  .s61-workbench,
  .s61-whole-bar,
  .s61-blue-fraction,
  .s61-orange-fraction,
  .s61-fraction-x,
  .s61-mismatch-line{
    animation:none!important;
    transition:none!important;
  }

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

  .s61-blue-drop .s61-blue-whole-1,
  .s61-blue-drop .s61-blue-whole-2,
  .s61-blue-drop .s61-blue-whole-3,
  .s61-blue-drop .s61-blue-fraction,
  .s61-orange-drop .s61-orange-whole-1,
  .s61-orange-drop .s61-orange-whole-2,
  .s61-orange-drop .s61-orange-fraction{
    animation:none!important;
  }

  .s61-blue-drop .s61-blue-whole-1{ top:var(--whole-1-y); opacity:1; left:var(--blue-x); }
  .s61-blue-drop .s61-blue-whole-2{ top:var(--whole-2-y); opacity:1; left:var(--blue-x); }
  .s61-blue-drop .s61-blue-whole-3{ top:var(--whole-3-y); opacity:1; left:var(--blue-x); }
  .s61-blue-drop .s61-blue-fraction{ top:var(--fraction-y); opacity:1; left:var(--blue-x); }
  .s61-orange-drop .s61-orange-whole-1{ top:var(--whole-1-y); opacity:1; left:var(--orange-x); }
  .s61-orange-drop .s61-orange-whole-2{ top:var(--whole-2-y); opacity:1; left:var(--orange-x); }
  .s61-orange-drop .s61-orange-fraction{ top:var(--fraction-y); opacity:1; left:var(--orange-x); }
  .s61-workbench.s61-whole-quiz-active .s61-orange-fraction,
  .s61-workbench.s61-remain-result .s61-orange-fraction,
  .s61-workbench.s61-fraction-prompt:not(.s61-frac-subtract-overlap):not(.s61-frac-subtract-tick) .s61-orange-fraction,
  .s61-workbench.s61-common-scale-applied:not(.s61-common-subtract-overlap):not(.s61-common-subtract-animate) .s61-orange-fraction{
    left:var(--orange-x);
  }
  .s61-workbench.s61-whole-quiz-active .s61-orange-fraction,
  .s61-workbench.s61-remain-result .s61-orange-fraction,
  .s61-workbench.s61-fraction-prompt:not(.s61-frac-subtract-overlap):not(.s61-frac-subtract-tick):not(.s61-common-subtract-overlap) .s61-orange-fraction,
  .s61-workbench.s61-common-scale-applied:not(.s61-common-subtract-overlap) .s61-orange-fraction{
    top:var(--fraction-y);
  }
  .s61-workbench.s61-frac-subtract-animate .s61-orange-fraction,
  .s61-workbench.s61-common-subtract-animate .s61-orange-fraction{
    animation:s61-orange-slide-x .9s cubic-bezier(.4,0,.2,1) forwards!important;
  }
  .s61-orange-match .s61-orange-whole-1,
  .s61-orange-match .s61-orange-whole-2{ left:var(--blue-x); }
  .s61-frac-subtract-animate .s61-orange-fraction{
    left:var(--blue-x);
    top:var(--fraction-y);
    transform:none;
    opacity:.8;
  }
  .s61-common-subtract-animate .s61-orange-fraction{
    left:var(--blue-x);
    top:var(--fraction-y);
    transform:none;
    opacity:.82;
  }
  .s61-frac-subtract-overlap .s61-orange-fraction,
  .s61-frac-subtract-tick .s61-orange-fraction{
    left:var(--blue-x);
    top:var(--fraction-y);
    opacity:.8;
    transform:none;
  }
  .s61-orange-vanish .s61-orange-whole-1,
  .s61-orange-vanish .s61-orange-whole-2{ opacity:0; visibility:hidden; }
  .s61-remain-result .s61-blue-whole-1,
  .s61-remain-result .s61-blue-whole-2{
    left:var(--blue-x);
    opacity:1;
    visibility:visible;
  }
  .s61-remain-result .s61-blue-whole-1{ top:var(--whole-1-y); }
  .s61-remain-result .s61-blue-whole-2{ top:var(--whole-2-y); }
  .s61-remain-result .s61-blue-whole-3{ left:var(--blue-x); top:var(--whole-3-y); width:var(--bar-w); height:var(--bar-h); opacity:1; }
  .s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar span.is-fill,
  .s61-whole-cancel-to-empty .s61-blue-whole-2.s61-whole-empty .s61-bar span.is-fill,
  .s61-whole-cancel-to-empty .s61-blue-whole-1.s61-whole-empty .s61-bar span,
  .s61-whole-cancel-to-empty .s61-blue-whole-2.s61-whole-empty .s61-bar span{
    background:var(--s61-bar-empty, #E5EBEE);
    box-shadow:none;
  }
  .s61-workbench.s61-whole-quiz-active .s61-blue-whole-3{
    animation:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
}

/* 아이보리 학습지 패널 — 도서관 배경과 어울리는 따뜻한 톤 */
body.s61-active .s61-wrap.corridor-puzzle-card.edu-worksheet-panel.edu-worksheet-panel--large{
  background:var(--s61-ivory-panel-bg) !important;
  border:1.5px solid var(--s61-ivory-panel-border, #5A8DA6) !important;
  box-shadow:0 16px 40px rgba(24,56,76,.14), inset 0 0 0 1px rgba(255,255,255,.35) !important;
  color:var(--s61-ivory-title, #18384C) !important;
}

body.s61-active .s61-wrap .textbook-math.textbook-math--game{
  --bar-h:1.5px;
}

body.s61-active .s61-wrap .s61-fraction-mismatch-tag{
  color:#b4233a !important;
  border-color:rgba(210,88,108,.58) !important;
  background:rgba(255,251,252,.97) !important;
}

body.s61-active .s61-wrap .s61-btn,
body.s61-active .s61-wrap .s61-guide-btn,
body.s61-active .s61-wrap .s61-whole-quiz-btn,
body.s61-active .s61-wrap .s61-frac-quiz-btn,
body.s61-active .s61-wrap .s61-aligned-subtract-btn,
body.s61-active .s61-wrap .s61-common-denom-btn{
  color:var(--s61-btn-text) !important;
  border-color:var(--s61-btn-border) !important;
  background:var(--s61-btn-bg) !important;
  box-shadow:var(--s61-btn-shadow) !important;
}

/* s62의 작은 계산 버튼 규격: 처음 빼기와 통분 뒤 빼기를 같은 스타일로 통일 */
body.s61-active #s61-minus,
body.s61-active #s61-guide-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:fit-content !important;
  min-width:88px !important;
  max-width:none !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 12px !important;
  border:1px solid rgba(67,179,220,.72) !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#91ebff,#43bfe9) !important;
  box-shadow:0 5px 12px rgba(38,151,190,.22), inset 0 1px 0 rgba(255,255,255,.55) !important;
  color:#102f42 !important;
  font-size:12.6px !important;
  line-height:1 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

body.s61-active #s61-guide-btn:not(.is-show){
  display:none !important;
}

/* 마지막 다음 버튼은 제외하고, s61 조작 버튼 글자를 20% 키운다. */
body.s61-active #s61-minus,
body.s61-active #s61-guide-btn{
  font-size:15.12px !important;
}