/* Stage 5-1 — 해킹 코드 슬래시 */

body.stage5-ui-active{
  --s51-cyan:#69efff;
  --s51-green:#7dffc6;
  --s51-yellow:#ffd166;
  --s51-red:#ff5f7d;
  --s51-line:rgba(105,239,255,.28);
  /* s52 — 방법 패널(top 고정)과 로복 대사창(bottom 고정) 사이 균등 간격 */
  --s52-board-top:100px;
  --s52-strip-block:calc(-0.5cm + 46px + 10px);
  --s52-panel-block:calc(520px - 0.5cm);
  --s52-methods-bottom:calc(var(--s52-board-top) + var(--s52-strip-block) + var(--s52-panel-block));
  --s52-dialogue-top:calc(1080px - var(--eq-inventory-height, 44px) - 28px - 100px);
  --s52-compare-card-est:108px;
  --s52-compare-gap:max(24px, calc((var(--s52-dialogue-top) - var(--s52-methods-bottom) - var(--s52-compare-card-est)) / 2));
  color:#eefcff;
}

body.stage5-ui-active .s51-stage{
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:1080px;
  overflow:hidden;
  isolation:isolate;
  background:#01070e;
}

.s51-hack-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3, 10, 18, .08), rgba(3, 10, 18, .38)),
    url("../assets/images/s5.png") center / cover no-repeat;
  filter:saturate(.96) brightness(.88);
}

.s51-hack-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(65, 224, 255, .12), transparent 44%),
    linear-gradient(180deg, rgba(1, 8, 16, .12), rgba(1, 6, 12, .28));
  pointer-events:none;
}

.s51-hack-bg::before{
  display:none;
}

.s51-slash-main{
  position:absolute;
  left:50%;
  top:108px;
  z-index:4;
  width:1320px;
  height:748px;
  transform:translateX(-50%);
}

.s51-slash-shell{
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(105,239,255,.32);
  border-radius:24px;
  background:rgba(2,13,23,.96);
  box-shadow:0 32px 86px rgba(0,0,0,.52),0 0 42px rgba(43,190,230,.12),inset 0 1px 0 rgba(255,255,255,.07);
}

.s51-slash-shell::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:8;
  border:1px solid rgba(105,239,255,.07);
  border-radius:18px;
  pointer-events:none;
}

.s51-slash-shell.is-shaking{animation:s51-shell-shake .34s ease;}
@keyframes s51-shell-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(4px)}
}

.s51-hack-console{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:210px 1fr;
  gap:18px;
  height:238px;
  padding:20px 22px;
  border-bottom:1px solid rgba(105,239,255,.24);
  background:
    linear-gradient(90deg,rgba(18,72,94,.18),transparent 36%),
    linear-gradient(180deg,rgba(5,27,43,.98),rgba(2,16,29,.96));
}

.s51-console-title{
  padding:10px 16px;
  border-right:1px solid rgba(105,239,255,.14);
}
.s51-console-title span{display:block;color:rgba(119,236,255,.62);font-size:10px;font-weight:900;line-height:1.45;letter-spacing:.14em;}
.s51-console-title h1{margin:13px 0 0;color:#f2fdff;font-size:29px;font-weight:950;line-height:1.1;letter-spacing:-.035em;}

.s51-console-body{display:grid;grid-template-columns:minmax(0,1fr) 314px;gap:14px;min-width:0;}
.s51-equation-panel,
.s51-slash-hud{border:1px solid rgba(105,239,255,.15);border-radius:14px;background:rgba(1,11,21,.66);}
.s51-equation-panel{display:grid;grid-template-columns:205px 1fr;align-items:center;padding:14px 18px;}

.s51-problem-row{display:grid;justify-items:center;gap:10px;border-right:1px solid rgba(105,239,255,.12);}
.s51-problem-row > span{color:rgba(200,239,246,.54);font-size:11px;font-weight:900;letter-spacing:.08em;}
.s51-problem-row > strong{display:flex;align-items:center;gap:12px;color:#fff;font-size:25px;line-height:1;}
.s51-problem-row b,.s51-repair-lines b{color:rgba(120,234,255,.65);font-weight:900;}

.s51-repair-lines{display:grid;gap:10px;padding-left:27px;color:#fff;font-size:25px;font-weight:900;}
.s51-repair-lines > div{display:flex;align-items:center;gap:10px;min-height:44px;line-height:1;}
.s51-repair-lines .s51-repair-label{color:rgba(220,244,248,.82);font-size:18px;font-weight:850;letter-spacing:-.01em;}

.s51-code-frac.tm-frac {
  min-width: 1.05em;
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  line-height: 1;
}

.s51-code-frac.slot-frac.tm-frac {
  min-width: 1.35em;
}

.s51-code-frac.slot-frac .tm-num,
.s51-code-frac.slot-frac .tm-den {
  color: rgba(235, 248, 252, 0.96);
}

.textbook-math .s51-code-frac.tm-frac .tm-num,
.textbook-math .s51-code-frac.tm-frac .tm-den {
  font-size: 0.78em;
  line-height: 0.92;
}

.textbook-math .s51-code-frac.tm-frac .tm-bar {
  background: rgba(255, 255, 255, 0.92);
}

.s51-code-slot{
  display:inline-grid;
  place-items:center;
  box-sizing:border-box;
  min-width:30px;
  width:30px;
  height:28px;
  padding:0;
  border:2px solid rgba(152,202,215,.28);
  border-radius:7px;
  color:rgba(215,240,245,.42);
  background:rgba(255,255,255,.04);
  font-size:17px;
  font-weight:950;
  line-height:1;
}
.s51-code-frac.slot-frac .s51-code-slot{
  min-width:30px;
  width:30px;
  height:28px;
  font-size:17px;
}
.s51-repair-lines > div:first-child .s51-code-slot{
  min-width:34px;
  width:34px;
  height:30px;
  font-size:18px;
}
.s51-code-slot.active{border-color:var(--s51-yellow);color:#fff4c2;background:rgba(125,87,13,.34);box-shadow:0 0 18px rgba(255,209,102,.32),inset 0 0 12px rgba(255,209,102,.1);animation:s51-slot-pulse .82s ease-in-out infinite;}
.s51-code-slot.done{border-color:rgba(125,255,198,.62);color:#a5ffda;background:rgba(16,87,67,.35);box-shadow:0 0 14px rgba(125,255,198,.18);}
@keyframes s51-slot-pulse{50%{filter:brightness(1.35);transform:scale(1.04)}}

/* Stage 5-3 — 콘솔 수식 패널 (s53) */
.s53-stage .s51-hack-console{
  grid-template-columns:1fr;
  height:auto;
  min-height:0;
  padding:12px 18px;
}

.s53-stage .s51-slash-main{
  /* 메뉴 아래 ↔ 로복 대사창 위 여백을 같게 */
  --s53-menu-end:60px;
  --s53-dialogue-block:calc(var(--eq-inventory-height, 44px) + 28px + 108px);
  --s53-v-gap:20px;
  top:calc(var(--s53-menu-end) + var(--s53-v-gap));
  bottom:calc(var(--s53-dialogue-block) + var(--s53-v-gap) + 1.5cm);
  height:auto;
}

.s53-stage .s51-slash-shell{
  display:flex;
  flex-direction:column;
}

.s53-stage .s51-canvas-zone{
  flex:1 1 auto;
  height:auto;
  min-height:0;
}

.s53-stage .s51-console-body{
  grid-template-columns:minmax(0,1fr) 314px;
  gap:12px;
}

.s53-stage .s51-equation-panel{
  grid-template-columns:200px minmax(0,1fr);
  align-items:stretch;
  padding:10px 16px;
  gap:8px;
}

.s53-mission-row{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.s53-mission-label{
  font-size:16px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(200,222,240,.88);
  white-space:nowrap;
}

.s53-mission-label b{
  color:#9bedff;
  font-size:18px;
  margin-left:2px;
}

.s53-mission-dots{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.s53-mission-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(38,52,72,.85);
  border:1px solid rgba(70,92,118,.55);
}

.s53-mission-dot.is-current{
  background:#5fe0ff;
  border-color:#9bedff;
  box-shadow:0 0 10px rgba(95,224,255,.9);
}

.s53-mission-dot.is-pending{
  background:rgba(32,44,62,.9);
  border-color:rgba(58,78,102,.5);
}

.s53-mission-dot.is-done{
  background:rgba(95,224,255,.42);
  border-color:rgba(126,224,255,.62);
}

.s53-problem-row{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2px 12px 4px 0;
  gap:0;
}

.s53-problem-row .s53-mission-row{
  align-self:center;
  justify-content:center;
  margin-top:0;
}

.s53-stage-name{
  display:none;
}

.s53-problem-expr{
  display:inline-flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
  font-size:45px;
  line-height:1;
  color:#fff;
}

.s53-problem-expr .s51-code-frac{
  font-size:45px;
}

.s53-repair-lines{
  display:flex;
  align-items:center;
  align-self:center;
  gap:0;
  padding-left:12px;
  font-size:37.5px;
  font-weight:900;
}

.s53-repair-lines .s51-repair-label{
  font-size:22px;
  white-space:nowrap;
}

.s53-formula-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:0;
  line-height:1;
  flex-wrap:nowrap;
  width:auto;
  justify-content:flex-start;
}

.s53-common-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:0;
  line-height:1;
  flex-wrap:nowrap;
  flex:0 0 auto;
  margin-left:18px;
  padding-left:18px;
  border-left:1px solid rgba(105,239,255,.18);
}

.s53-formula-row .s53-eq{
  color:rgba(120,234,255,.72);
  font-weight:900;
}

.s53-repair-lines .s51-code-frac{
  font-size:37.5px;
}

.s53-repair-lines .textbook-math{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  --bar-h:3px;
  --min-bar:0;
  --near-bar-gap:2px;
  --bar-pad:0;
}

.s53-repair-lines .textbook-math .s51-code-frac.slot-frac.tm-frac{
  display:inline-grid;
  grid-template-rows:auto var(--bar-h, 2px) auto;
  grid-template-columns:max-content;
  justify-items:center;
  align-items:center;
  gap:0;
  min-width:0;
  width:max-content;
}

.s53-repair-lines .s51-code-frac.slot-frac .tm-num,
.s53-repair-lines .s51-code-frac.slot-frac .tm-den{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  padding-inline:0;
}

.s53-repair-lines .s51-code-frac.slot-frac .tm-bar{
  width:100%;
  min-width:100%;
  height:var(--bar-h, 3px);
  margin:2px 0;
  background:rgba(230, 250, 255, 0.95);
  border-radius:999px;
}

.s53-repair-lines .s51-code-slot{
  min-width:54px;
  width:54px;
  height:50px;
  border-width:2px;
  border-color:rgba(170, 230, 245, 0.55);
  border-radius:10px;
  color:rgba(235, 248, 252, 0.72);
  background:rgba(8, 28, 42, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(120, 210, 240, 0.12),
    0 0 12px rgba(70, 180, 220, 0.12);
  font-size:28px;
}

/* 지금 채울 칸 — 노란 깜박임 (기본 칸 스타일보다 우선) */
.s53-stage .s53-repair-lines .s51-code-slot.active,
.s53-stage .s53-formula-row .s51-code-frac.slot-frac .s51-code-slot.active{
  border-width:3px;
  border-color:#ffe08a;
  color:#fff7d0;
  background:
    linear-gradient(180deg, rgba(168, 118, 20, 0.72), rgba(98, 62, 10, 0.88));
  box-shadow:
    0 0 0 2px rgba(255, 224, 138, 0.28),
    0 0 28px rgba(255, 209, 102, 0.55),
    inset 0 0 18px rgba(255, 209, 102, 0.22);
  animation:s53-slot-blink 0.78s ease-in-out infinite;
}

@keyframes s53-slot-blink{
  0%, 100%{
    filter:brightness(1);
    box-shadow:
      0 0 0 2px rgba(255, 224, 138, 0.22),
      0 0 18px rgba(255, 209, 102, 0.35),
      inset 0 0 14px rgba(255, 209, 102, 0.16);
  }
  50%{
    filter:brightness(1.28);
    box-shadow:
      0 0 0 3px rgba(255, 236, 170, 0.45),
      0 0 34px rgba(255, 220, 120, 0.72),
      inset 0 0 20px rgba(255, 224, 140, 0.28);
  }
}

@media (prefers-reduced-motion:reduce){
  .s53-stage .s53-repair-lines .s51-code-slot.active,
  .s53-stage .s53-formula-row .s51-code-frac.slot-frac .s51-code-slot.active{
    animation:none;
    filter:none;
  }
}

/* 공통분모 칸 — 수식 오른쪽, 현재 목표라 더 선명하게 */
.s53-stage .s53-common-row .s51-code-slot,
.s53-stage .s53-formula-row .s53-common-row .s51-code-slot{
  min-width:64px;
  width:64px;
  height:58px;
  border-width:3px;
  border-color:rgba(190, 240, 255, 0.72);
  border-radius:12px;
  color:rgba(245, 252, 255, 0.88);
  background:
    linear-gradient(180deg, rgba(18, 52, 74, 0.96), rgba(8, 28, 42, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(150, 230, 255, 0.18),
    0 0 18px rgba(90, 210, 255, 0.22);
  font-size:30px;
}

.s53-stage .s53-common-row .s51-code-slot.active{
  border-color:#ffe08a;
  color:#fff4c2;
  background:
    linear-gradient(180deg, rgba(150, 105, 18, 0.55), rgba(90, 58, 10, 0.72));
  box-shadow:
    0 0 26px rgba(255, 209, 102, 0.42),
    inset 0 0 16px rgba(255, 209, 102, 0.16);
  animation:s53-slot-blink 0.78s ease-in-out infinite;
}

.s53-stage .s53-common-row .s51-code-slot.done{
  border-color:rgba(125, 255, 198, 0.78);
  color:#b8ffe0;
  background:
    linear-gradient(180deg, rgba(22, 98, 74, 0.55), rgba(12, 58, 46, 0.72));
  box-shadow:0 0 18px rgba(125, 255, 198, 0.28);
}

.s53-repair-lines .s51-code-frac.slot-frac .s51-code-slot,
.s53-repair-lines .s51-code-frac.slot-frac .s51-code-slot.is-denom{
  min-width:54px;
  width:54px;
  height:50px;
  font-size:28px;
}

.s53-stage .s53-slash-hud{
  display:grid;
  grid-template-rows:auto 11px auto 11px;
  gap:8px;
  padding:10px 16px;
  align-content:center;
}

.s53-stage .s53-slash-hud span{
  font-size:13px;
  font-weight:850;
}

.s53-stage .s53-slash-hud strong{
  font-size:20px;
  font-weight:950;
}

.s53-stage .s53-slash-hud .s51-hud-pair{
  gap:10px;
}

.s53-stage .s53-slash-hud .s51-hud-pair p{
  padding:12px 14px;
  border-radius:10px;
}

.s53-stage .s53-slash-hud .s51-meter{
  height:11px;
}

.s53-stage .s53-slash-hud .s51-time-label span,
.s53-stage .s53-slash-hud .s51-time-label strong{
  font-size:15px;
}

.s51-slash-hud{display:grid;grid-template-rows:auto auto auto 7px auto 7px;gap:7px;padding:11px 13px;}
.s51-slash-hud > div:not(.s51-hud-pair):not(.s51-meter):not(.s51-time-label){display:flex;align-items:center;justify-content:space-between;gap:12px;}
.s51-slash-hud span{color:rgba(205,238,245,.54);font-size:10px;font-weight:850;}
.s51-slash-hud strong{color:#f1fcff;font-size:12px;font-weight:950;text-align:right;}
.s51-slash-hud strong.target{color:#8af3ff;font-size:12px;font-weight:950;text-align:right;letter-spacing:.04em;}
.s51-hud-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.s51-hud-pair p{display:flex;align-items:center;justify-content:space-between;margin:0;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.035);}
.s51-hud-pair p:last-child strong{color:#ff91a5;}
.s51-meter{height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07);}
.s51-meter i{display:block;height:100%;border-radius:inherit;transition:width .18s linear;}
.s51-meter.risk i{background:linear-gradient(90deg,#ffd166,#ff5f7d);box-shadow:0 0 10px rgba(255,95,125,.3);}
.s51-meter.time i{background:linear-gradient(90deg,#47aaff,#69efff);}
.s51-time-label{display:flex;align-items:center;justify-content:space-between;}

.s51-canvas-zone{position:relative;height:510px;overflow:hidden;background:#010812;touch-action:none;}
#s51-slash-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;}
.s51-canvas-caption{position:absolute;left:18px;bottom:14px;display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid rgba(105,239,255,.16);border-radius:999px;color:rgba(213,245,249,.58);background:rgba(1,11,20,.7);font-size:10px;font-weight:850;pointer-events:none;}
.s51-canvas-caption i{width:22px;height:1px;background:rgba(105,239,255,.28);}
.s51-canvas-caption strong{color:#8af3ff;letter-spacing:.05em;}

.s51-slash-effect{position:absolute;left:50%;top:44%;z-index:12;transform:translate(-50%,-50%) scale(.72);padding:11px 20px;border-radius:999px;color:#a8ffda;background:rgba(4,34,28,.9);border:1px solid rgba(125,255,198,.48);box-shadow:0 0 28px rgba(125,255,198,.28);font-size:22px;font-weight:950;letter-spacing:.05em;opacity:0;pointer-events:none;}
.s51-slash-effect[data-type="wrong"]{color:#ffc0cb;background:rgba(65,8,23,.92);border-color:rgba(255,95,125,.58);box-shadow:0 0 28px rgba(255,95,125,.28);}
.s51-slash-effect.show{animation:s51-effect-pop .82s ease forwards;}
@keyframes s51-effect-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1.08)}}

.s51-game-modal{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:rgba(0,6,13,.72);backdrop-filter:blur(5px);}
.s51-game-modal.show{display:grid;}
.s51-modal-card{width:650px;box-sizing:border-box;padding:30px 34px;border:1px solid rgba(105,239,255,.38);border-radius:20px;background:linear-gradient(180deg,rgba(7,32,50,.98),rgba(2,14,26,.99));box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 35px rgba(58,211,244,.16);text-align:center;}
.s51-modal-kicker{color:#80edff;font-size:11px;font-weight:950;letter-spacing:.16em;}
.s51-modal-card h2{margin:8px 0 10px;color:#f4fdff;font-size:29px;font-weight:950;letter-spacing:-.03em;}
.s51-modal-card p{margin:8px 0;color:rgba(213,241,247,.68);font-size:13px;font-weight:750;line-height:1.5;}
.s51-modal-card button{min-width:170px;height:45px;margin-top:18px;padding:0 22px;border:1px solid rgba(116,237,255,.62);border-radius:11px;color:#03151f;background:linear-gradient(180deg,#8df4ff,#43b8e9);box-shadow:0 12px 25px rgba(40,165,220,.2),inset 0 1px 0 rgba(255,255,255,.55);font-size:15px;font-weight:950;cursor:pointer;}
.s51-modal-card button:hover{filter:brightness(1.1);transform:translateY(-1px);}
.s51-modal-card.danger{border-color:rgba(255,95,125,.5);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 35px rgba(255,76,108,.15);}
.s51-modal-card.danger .s51-modal-kicker{color:#ff8da1;}
.s51-modal-card.clear,.s51-modal-card.final{border-color:rgba(125,255,198,.44);}
.s51-modal-card.clear .s51-modal-kicker,.s51-modal-card.final .s51-modal-kicker{color:#8dffd0;}

.s51-howto{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:center;gap:8px;margin:24px 0 17px;}
.s51-howto > div{display:grid;justify-items:center;gap:8px;}
.s51-howto b{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(105,239,255,.42);border-radius:50%;color:#83efff;background:rgba(44,173,205,.12);font-size:16px;}
.s51-howto span{color:#dff8fc;font-size:12px;font-weight:850;line-height:1.45;}
.s51-howto > i{height:1px;background:rgba(105,239,255,.2);}

.s51-clear-equation{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 12px;
  margin:18px auto;
  max-width:min(920px,96%);
  color:#f5feff;
  font-size:25px;
  font-weight:900;
  line-height:1;
}
.s51-clear-equation b{color:rgba(120,234,255,.72);font-weight:900;}
.s51-clear-equation .s51-code-frac .tm-bar {
  background: rgba(255, 255, 255, 0.92);
}
.s51-clear-eq{color:rgba(120,234,255,.72);font-weight:900;}
.s51-clear-result{color:#8dffd0;font-size:28px;}
.s51-simplify-note{display:inline-block!important;padding:7px 13px;border:1px solid rgba(255,209,102,.24);border-radius:999px;color:#ffe5a0!important;background:rgba(104,72,10,.22);}
.s51-final-result{display:flex;align-items:center;justify-content:center;margin:8px auto 17px;color:#a7ffdb;font-size:34px;font-weight:950;}
.s51-exit-code{display:block;margin:6px 0 10px;color:#fff0a6;font-size:58px;font-weight:950;letter-spacing:.18em;text-shadow:0 0 25px rgba(255,209,102,.34);}

body.stage5-ui-active #dialogue-panel{z-index:155;}
body.stage5-ui-active .stage-chrome-topbar,
body.stage5-ui-active .stage-chrome-inventory,
body.stage5-ui-active .stage-chrome-support-actions{z-index:120;}

@media (prefers-reduced-motion:reduce){
  .s51-code-slot.active,.s51-slash-effect.show{animation:none!important;}
}

/* ============================================================
   Stage 5-1 — 컴퓨터실 서버 해킹 도입 연출 (s5-computer-intro)
   ============================================================ */
.s5-computer-intro{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  opacity:0;
  transition:opacity .6s ease;
}
.s5-computer-intro.is-visible{opacity:1;}
.s5-computer-intro.is-closing{opacity:0;transition:opacity .5s ease;}

.s5-computer-intro-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 30%, rgba(10,40,60,.34), rgba(1,6,12,.86) 68%),
    rgba(1,5,10,.9);
  pointer-events:auto;
}

.s5-computer-intro-flicker{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(105,239,255,0), rgba(105,239,255,.16), rgba(255,95,125,.12), rgba(105,239,255,0));
  opacity:0;
}
.s5-computer-intro.is-powered .s5-computer-intro-flicker{
  animation:s5-intro-flicker 1.1s ease-out 1;
}
@keyframes s5-intro-flicker{
  0%{opacity:0;}
  8%{opacity:.9;}
  14%{opacity:.1;}
  22%{opacity:.75;}
  30%{opacity:.2;}
  46%{opacity:.6;}
  60%{opacity:.08;}
  100%{opacity:0;}
}

.s5-computer-intro-scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);
}

.s5-computer-intro-warning{
  position:relative;
  margin-top:120px;
  width:640px;
  max-width:72%;
  box-sizing:border-box;
  padding:22px 30px 24px;
  text-align:center;
  border:2px solid rgba(255,95,125,.7);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(34,8,16,.92), rgba(18,4,9,.95));
  box-shadow:0 0 30px rgba(255,76,108,.32), inset 0 0 22px rgba(255,76,108,.16);
  opacity:0;
  transform:translateY(-12px);
}
.s5-computer-intro-warning.is-visible{
  animation:s5-intro-warning-in .5s ease forwards, s5-intro-warning-glow 2.4s ease-in-out .5s infinite;
}
@keyframes s5-intro-warning-in{
  0%{opacity:0;transform:translateY(-14px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes s5-intro-warning-glow{
  0%,100%{box-shadow:0 0 26px rgba(255,76,108,.26), inset 0 0 18px rgba(255,76,108,.14);}
  50%{box-shadow:0 0 38px rgba(255,76,108,.42), inset 0 0 26px rgba(255,76,108,.22);}
}
.s5-computer-intro-warning-tag{
  display:inline-block;
  margin-bottom:12px;
  padding:5px 16px;
  border-radius:999px;
  border:1px solid rgba(255,95,125,.6);
  color:#ff7d96;
  background:rgba(60,10,22,.7);
  font-size:15px;
  font-weight:950;
  letter-spacing:.22em;
  text-shadow:0 0 12px rgba(255,95,125,.55);
  animation:s5-intro-tag-blink 1.3s steps(2,end) infinite;
}
@keyframes s5-intro-tag-blink{
  0%,70%{opacity:1;}
  72%,82%{opacity:.45;}
  100%{opacity:1;}
}
.s5-computer-intro-warning p{
  margin:6px 0;
  color:#ffd8df;
  font-size:18px;
  font-weight:800;
  line-height:1.5;
}

.s5-computer-intro-status{
  position:relative;
  margin-top:26px;
  display:flex;
  gap:20px;
  opacity:0;
  transform:translateY(16px);
}
.s5-computer-intro-status.is-visible{
  animation:s5-intro-card-in .55s ease forwards;
}
@keyframes s5-intro-card-in{
  0%{opacity:0;transform:translateY(16px);}
  100%{opacity:1;transform:translateY(0);}
}
.s5-computer-intro-status-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:190px;
  padding:18px 24px;
  border:1px solid rgba(105,239,255,.4);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(6,28,44,.92), rgba(2,14,24,.95));
  box-shadow:0 0 22px rgba(58,211,244,.18), inset 0 0 16px rgba(58,211,244,.08);
}
.s5-computer-intro-status-row.danger{
  border-color:rgba(255,95,125,.5);
  box-shadow:0 0 22px rgba(255,76,108,.2), inset 0 0 16px rgba(255,76,108,.1);
}
.s5-computer-intro-status-label{
  color:rgba(200,239,246,.72);
  font-size:14px;
  font-weight:850;
  letter-spacing:.04em;
}
.s5-computer-intro-status-row.danger .s5-computer-intro-status-label{color:#ff9fb0;}
.s5-computer-intro-status-value{
  color:#eafdff;
  font-size:38px;
  font-weight:950;
}
.s5-computer-intro-status-row.danger .s5-computer-intro-status-value{color:#ffc6d0;}

.s5-computer-intro-equation{
  position:relative;
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:22px;
  color:#8af3ff;
  font-size:66px;
  font-weight:950;
  opacity:0;
  transform:scale(.92);
}
.s5-computer-intro-equation.is-visible{
  animation:s5-intro-eq-in .6s ease forwards, s5-intro-eq-glow 2.6s ease-in-out .6s infinite;
}
@keyframes s5-intro-eq-in{
  0%{opacity:0;transform:scale(.92);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes s5-intro-eq-glow{
  0%,100%{text-shadow:0 0 18px rgba(105,239,255,.4);}
  50%{text-shadow:0 0 30px rgba(105,239,255,.72);}
}
.s5-computer-intro-eq-op{color:#ffd166;text-shadow:0 0 18px rgba(255,209,102,.4);}
.s5-computer-intro-equation .textbook-math { --bar-h: 4px; }

@media (prefers-reduced-motion:reduce){
  .s5-computer-intro-flicker,
  .s5-computer-intro-warning.is-visible,
  .s5-computer-intro-warning-tag,
  .s5-computer-intro-equation.is-visible{animation:none!important;}
  .s5-computer-intro-warning,
  .s5-computer-intro-status,
  .s5-computer-intro-equation{opacity:1;transform:none;}
}

/* ============================================================
   Stage 5-1 — 5단계 인터랙티브 학습 (서버 저장 공간 시각화)
   막대 전체 길이는 동일(--s5-bar-w), 칸 수/칸 너비만 다르다.
   ============================================================ */
.s5-learn{
  position:absolute;
  left:50%;
  top:112px;
  z-index:50;
  width:1240px;
  max-width:96%;
  /* 두 막대가 공유하는 고정 전체 길이 */
  --s5-bar-w:520px;
  --s5-bar-h:60px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
.s5-learn.is-visible{opacity:1;pointer-events:auto;}
.s5-learn.is-closing{opacity:0;transition:opacity .45s ease;}

/* s51 — 중앙 학습 콘텐츠 흰색 박스 (배경·대사창·아이템창은 그대로) */
.s51-stage.s5-computer-intro-stage .s51-learning-shell{
  --s51-bg:#ffffff;
  --s51-surface:#f8fafc;
  --s51-border:#d7e1ea;
  --s51-text:#1f2937;
  --s51-subtext:#607080;
  --s51-blue:#3d9fe3;
  --s51-blue-soft:#eef8fe;
  --s51-blue-border:#8ac8ec;
  --s51-red:#ee6376;
  --s51-red-soft:#fff2f4;
  --s51-red-border:#f1a3ae;
  --s51-green:#36a269;
  --s51-yellow:#dda400;
  --s51-shell-top:calc(92px + 3cm);
  --s51-shell-height-trim:2cm;
  /* 1단계 기준 높이를 측정한 뒤 아래쪽으로 1cm 확장해 전 단계에 고정 */
  --s51-shell-min-height:calc(560px - 1cm);
  --s51-stroke-1:0.3px;
  --s51-stroke-2:0.6px;
  --s51-shell-safe-bottom:calc(var(--eq-inventory-height, 44px) + 28px + 100px);
  --s5-bar-w:620px;
  --s5-bar-h:62px;
  --s51-bar-stack-col-gap:24px;
  --s51-frac-col:72px;
  --s51-bar-stack-gap:38px;
  --s51-bar-stack-offset:calc(72px + 1cm);
  position:absolute;
  left:50%;
  top:var(--s51-shell-top);
  z-index:50;
  box-sizing:border-box;
  width:min(calc(var(--edu-worksheet-width, 1080px) - 1cm), calc(100% - 220px));
  max-width:calc(var(--edu-worksheet-width, 1080px) - 1cm);
  min-height:0;
  max-height:calc(1080px - var(--s51-shell-top) - var(--s51-shell-safe-bottom) - var(--s51-shell-height-trim));
  padding:0;
  transform:translateX(-50%);
  overflow:visible;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--s51-text);
  font-family:var(--edu-worksheet-font, "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-worksheet-board{
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  width:100% !important;
  max-width:100% !important;
  height:100%;
  min-height:0 !important;
  max-height:none !important;
  margin:0;
  padding:18px 34px 22px;
  overflow:hidden;
  border:var(--s51-stroke-1) solid var(--s51-border);
  border-radius:22px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 32px rgba(29,46,61,.16);
  color:var(--s51-text);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-board-header{
  flex:0 0 auto;
  margin:0 0 20px;
  padding:0 0 14px;
  border-bottom:var(--edu-worksheet-header-border, 1px solid rgba(180, 220, 240, 0.65));
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-board-header .edu-worksheet-title{
  margin:0;
  color:var(--edu-worksheet-title-color, #17384d);
  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);
  text-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-board-body{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell:has(.s5-learn.is-visible){
  opacity:1;
  pointer-events:auto;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell.is-height-locked:has(.s5-learn.is-visible){
  height:calc(var(--s51-shell-min-height) + 1cm);
  min-height:calc(var(--s51-shell-min-height) + 1cm);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell.is-height-locked:has(.s5-learn.is-visible) .s51-worksheet-board{
  height:100%;
  min-height:100%;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell:has(.s5-learn.is-closing){
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn{
  position:relative;
  left:auto;
  top:auto;
  z-index:auto;
  width:100%;
  max-width:100%;
  transform:none;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  height:auto;
  gap:12px;
  padding-bottom:0;
  box-sizing:border-box;
  color:var(--s51-text);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell:has(.s5-learn.is-result-step) .s51-worksheet-board{
  padding-bottom:22px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell:has(.s5-learn.is-result-step) .s51-result-next-slot{
  right:0;
  bottom:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-next-slot{
  position:absolute;
  right:36px;
  bottom:22px;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:96px;
  min-height:44px;
  pointer-events:auto;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-next-slot[hidden]{
  display:none !important;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-next-slot .stage1-primary-action.s51-card-next-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  height:auto;
  padding:10px 22px;
  border:1px solid rgba(127,226,255,.32);
  border-radius:6px;
  background:linear-gradient(180deg,#3bd8ff,#2579ff);
  box-shadow:0 12px 24px rgba(0,78,177,.26),0 0 18px rgba(61,206,255,.24);
  color:#ffffff;
  font-size:15px;
  font-weight:950;
  letter-spacing:0;
  cursor:pointer;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-next-slot .stage1-primary-action.s51-card-next-btn:hover:not(:disabled){
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:24px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-under-bars,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-under-bars{
  margin-top:calc(24px + 1cm);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-under-bars #s5-learn-action{
  min-width:152px;
  padding-left:21px;
  padding-right:21px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-corner-next,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-corner-next{
  position:absolute;
  right:36px;
  bottom:22px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:auto;
  min-width:96px;
  min-height:44px;
  margin-top:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-corner-next .stage1-primary-action.s51-card-next-btn,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-corner-next .stage1-primary-action.s51-card-next-btn,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-corner-next #s5-learn-action,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-corner-next #s5-learn-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  height:auto;
  padding:10px 22px;
  border:1px solid rgba(127,226,255,.32);
  border-radius:6px;
  background:linear-gradient(180deg,#3bd8ff,#2579ff);
  box-shadow:0 12px 24px rgba(0,78,177,.26),0 0 18px rgba(61,206,255,.24);
  color:#ffffff;
  font-size:15px;
  font-weight:950;
  letter-spacing:0;
  cursor:pointer;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-corner-next .stage1-primary-action.s51-card-next-btn.is-hidden,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-corner-next .stage1-primary-action.s51-card-next-btn.is-hidden,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-corner-next #s5-learn-action.is-hidden,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-corner-next #s5-learn-action.is-hidden{
  visibility:hidden;
  pointer-events:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-corner-next .stage1-primary-action.s51-card-next-btn:hover:not(:disabled),
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-corner-next .stage1-primary-action.s51-card-next-btn:hover:not(:disabled),
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-action-slot.is-corner-next #s5-learn-action:hover:not(:disabled),
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-next-slot.is-corner-next #s5-learn-action:hover:not(:disabled){
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-subtract-action-slot{
  display:flex;
  justify-content:center;
  width:100%;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step{
  gap:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s51-action-slot,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s51-card-next-slot{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:0;
  min-height:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step #s5-learn-action{
  min-width:133px;
  height:34px;
  margin-top:0;
  padding:0 18px;
  border-radius:8px;
  font-size:13px;
  box-shadow:0 4px 8px rgba(44,132,185,.2);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step #s5-learn-action:hover:not(:disabled){
  transform:translateY(-1px);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell #s5-learn-action[hidden]{
  visibility:hidden;
  pointer-events:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-learning-board{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:0;
}

/* ── 단계 진행 ── */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  margin:0 0 6px;
  padding:0 4px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .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;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress-step .num{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  border:var(--s51-stroke-2) solid #b8c5d1;
  background:#f3f6f9;
  color:#4b5563;
  font-size:12px;
  font-weight:800;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress-step.active{
  color:#1679b8;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress-label{
  color:inherit;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress-step.active .num{
  border-color:#3d9fe3;
  background:#eaf5fd;
  color:#1679b8;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress-step.done{
  color:#278b58;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress-step.done .num{
  border-color:#6bc492;
  background:#ebf8ef;
  color:#278b58;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-progress-line{
  display:inline-block;
  width:28px;
  height:1px;
  margin:0 6px;
  background:#d7e1ea;
  flex-shrink:0;
}

/* ── 수식 ── */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-main-equation,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn-eq,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-final-eq{
  color:#172536;
  text-shadow:none;
  font-size:38px;
  font-weight:800;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-main-equation .op,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn-eq .op,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq .op,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-final-eq .op,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-op{
  color:#d39100;
  text-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn-eq.s5-final .ans,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-result-label{
  color:#1679b8;
  text-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .textbook-math.textbook-math--on-light,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-frac .textbook-math,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-rowfrac .textbook-math,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-fraction .textbook-math{
  color:#172536;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:28px;
  font-weight:800;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq .op{
  align-self:center;
  flex-shrink:0;
  line-height:1;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq .textbook-math.textbook-math--game{
  --math-fs:28px;
  --bar-h:2px;
  --min-bar:1.12em;
  --blank-sm:34px;
  --blank-h:28px;
  --blank-near-bar-gap:2px;
  --near-bar-gap:1px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq .textbook-math.textbook-math--game .tm-num,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq .textbook-math.textbook-math--game .tm-den{
  font-size:28px;
  font-weight:900;
  line-height:1;
  min-height:28px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq .tm-blank.s5-conv-num-input{
  box-sizing:border-box;
  width:34px;
  min-width:34px;
  max-width:34px;
  height:28px;
  padding:0;
  font-size:22px;
  line-height:1;
  text-align:center;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .textbook-math.textbook-math--on-light .tm-bar,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq .textbook-math .tm-bar{
  background:#111111;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-lesson-eq{
  margin:4px 0 18px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s51-data-card{
  width:min(558px, calc(92% * 0.9));
  padding:14px 20px 13px;
  border-radius:16px;
  gap:9px;
  box-shadow:0 5px 16px rgba(38,58,78,.08);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s51-data-card .s5-server-bar{
  width:var(--s5-bar-w);
  height:var(--s5-bar-h);
  align-self:center;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s51-card-label{
  font-size:17px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s51-card-fraction{
  font-size:23px;
}


/* ── 데이터 카드 ── */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-data-card{
  width:min(620px, 92%);
  padding:16px 22px 14px;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(38,58,78,.08);
  gap:10px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-data-card--current{
  background:var(--s51-blue-soft);
  border:var(--s51-stroke-2) solid var(--s51-blue-border);
  color:#203347;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-data-card--hack{
  background:var(--s51-red-soft);
  border:var(--s51-stroke-2) solid var(--s51-red-border);
  color:#203347;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-label{
  color:#203347;
  font-size:19px;
  font-weight:800;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-fraction{
  font-size:26px;
  font-weight:800;
  color:#172536;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-card-sub{
  color:#4b5563;
  font-size:13px;
  font-weight:800;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn-bars{
  gap:14px;
  width:100%;
}

/* ── 막대 ── */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-server-bar{
  width:100%;
  gap:4px;
  padding:4px;
  box-sizing:border-box;
  border-radius:12px;
  background:#dde6ee;
  border:var(--s51-stroke-1) solid #c7d2dc;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-server-bar.s5-bar-flush{
  background:#dde6ee;
  border:var(--s51-stroke-1) solid #c7d2dc;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-server-bar.s5-bar-flush .s5-cell{
  border-left:var(--s51-stroke-2) solid rgba(255,255,255,.85);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-bar-group{
  border-color:rgba(120,160,190,.45);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-cell{
  border-radius:6px;
  border:var(--s51-stroke-1) solid rgba(255,255,255,.65);
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-cell-blue{
  background:linear-gradient(180deg,#5eb5ec,#3a9bd9);
  border-color:rgba(255,255,255,.7);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-cell-red{
  background:linear-gradient(180deg,#f47c8c,#ea5d71);
  border-color:rgba(255,255,255,.7);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-cell-empty{
  background:#e8edf2;
  border-color:#d5dde6;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-bar-wrap .s5-server-bar.is-confirmed{
  border-color:#6bc492;
  box-shadow:0 0 0 var(--s51-stroke-1) rgba(54,162,105,.22);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-stage .s5-cell.is-subtract-target{
  background:linear-gradient(180deg,#f47c8c,#ea5d71);
  box-shadow:none;
}

/* ── 버튼 ── */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn-btn,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-primary-action,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-button,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-num-btn,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-next-btn{
  min-width:190px;
  height:48px;
  padding:0 26px;
  border:0;
  border-radius:12px;
  color:#ffffff;
  background:#3c9edb;
  box-shadow:0 5px 12px rgba(44,132,185,.2);
  font-size:18px;
  font-weight:800;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn-btn:disabled,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-button:disabled,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-num-btn:disabled{
  opacity:.45;
}

/* ── 입력 ── */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-panel{
  width:min(620px, 92%);
  border:var(--s51-stroke-1) solid var(--s51-border);
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 4px 14px rgba(38,58,78,.06);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:calc(8px + 1cm);
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-q,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-q,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-label{
  color:#203347;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-input,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-input,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-num-input{
  background:#ffffff;
  color:#172536;
  border:var(--s51-stroke-2) solid #5aa8d8;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-input::placeholder{
  color:#6b7280;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-input:focus,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-input:focus,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-num-input:focus{
  border-color:#3d9fe3;
  box-shadow:0 0 0 3px rgba(61,159,227,.18);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-input.is-correct,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-input.is-correct,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-num-input.is-correct{
  background:#ebf8ef;
  border-color:#3fa469;
  color:#1f5f3a;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-input.is-wrong,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-input.is-wrong,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-num-input.is-wrong{
  background:#fff5cc;
  border-color:#dfaa10;
  color:#172536;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-feedback.is-correct,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-feedback.is-correct{
  color:#278b58;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-feedback.is-wrong,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-feedback.is-wrong{
  color:#9a6b00;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-frac-line{
  background:#111111;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-frac-den{
  color:#172536;
}

/* ── 눈금 불일치 ── */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-red-block,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-piece{
  background:rgba(238,99,118,.72);
  border:var(--s51-stroke-2) solid #ed8495;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-grid-overlay span{
  border-left-width:var(--s51-stroke-2);
  border-left-color:rgba(61,159,227,.75);
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-guide{
  border-left-width:var(--s51-stroke-2);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-guide-red{
  border-left-color:#ee6376;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-guide-grid{
  border-left-color:#3d9fe3;
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-tag{
  background:#ffffff;
  color:#b8324a;
  border:var(--s51-stroke-1) solid #ed8495;
  box-shadow:0 3px 8px rgba(180,55,75,.12);
  font-size:14px;
  font-weight:800;
  padding:6px 14px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-fail-stack,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-bars{
  width:calc(var(--s5-bar-w) + var(--s51-bar-stack-col-gap) + var(--s51-frac-col));
  margin:0 auto;
  gap:var(--s51-bar-stack-gap);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-fail-stack{
  padding-top:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-stage,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-stage{
  --s5-bar-w:620px;
  --s5-bar-h:62px;
  --s5-frac-col:var(--s51-frac-col);
  padding:0;
  min-height:auto;
  justify-content:flex-start;
  align-items:center;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-bars{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-fail-step .s5-fail-row,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-conv-line{
  display:grid;
  grid-template-columns:var(--s5-bar-w) var(--s51-frac-col);
  column-gap:var(--s51-bar-stack-col-gap);
  align-items:center;
  justify-content:start;
  width:100%;
  gap:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-bar-wrap,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-bar-wrap,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-overlap-wrap{
  width:var(--s5-bar-w);
  height:var(--s5-bar-h);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-frac,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-rowfrac{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-left:0.5cm;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-frac .textbook-math,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-rowfrac .textbook-math{
  font-size:34px;
  color:#172536;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-label{
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.01em;
  white-space:nowrap;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-denom-input{
  box-sizing:border-box;
  width:52px;
  min-width:52px;
  max-width:52px;
  height:44px;
  padding:0 4px;
  font-size:22px;
  text-align:center;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-num-btn,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-answer-button{
  display:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-fail-stage,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-stage,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-stage{
  width:100%;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s51-learning-board,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-problem-step .s5-learn-board{
  justify-content:flex-start;
  flex:0 0 auto;
  min-height:0;
  gap:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-fail-step .s51-learning-board,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-fail-step .s5-learn-board,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s51-learning-board,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-learn-board{
  flex:1;
  justify-content:flex-start;
  align-items:center;
  min-height:0;
  width:100%;
  padding:var(--s51-bar-stack-offset) 0 0;
  margin:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s51-learning-board{
  flex:1;
  justify-content:flex-start;
  align-items:center;
  min-height:0;
  width:100%;
  padding:var(--s51-bar-stack-offset) 0 0;
  margin:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s5-subtract-stage{
  position:relative;
  padding:0;
  gap:0;
  align-items:stretch;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s5-subtract-bars{
  position:relative;
  width:calc(var(--s5-bar-w) + var(--s51-bar-stack-col-gap) + var(--s51-frac-col));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--s51-bar-stack-gap);
  overflow:visible;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s5-conv-line{
  display:grid;
  grid-template-columns:var(--s5-bar-w) auto;
  column-gap:var(--s51-bar-stack-col-gap);
  justify-content:start;
  align-items:center;
  width:100%;
  overflow:visible;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s5-conv-eq{
  justify-self:start;
  min-width:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s5-subtract-op-row{
  position:absolute;
  left:0;
  top:calc(var(--s5-bar-h) + (var(--s51-bar-stack-gap) / 2));
  transform:translateY(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  width:var(--s5-bar-w);
  margin:0;
  padding:0;
  pointer-events:none;
  z-index:2;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s5-subtract-op-row .s5-fail-op{
  grid-column:auto;
  width:auto;
  margin:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-fly-root{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  overflow:visible;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-fly{
  position:absolute;
  opacity:0;
  z-index:31;
  pointer-events:none;
  will-change:transform, opacity;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-fly.is-visible{
  opacity:1;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-fly-block{
  width:100%;
  height:100%;
  border-radius:8px;
  background:#ee6376;
  border:var(--s51-stroke-2) solid #ed8495;
  box-shadow:0 3px 8px rgba(180,55,75,.18);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-stage .s5-cell{
  transition:background .35s ease, opacity .55s ease, transform .55s ease, box-shadow .35s ease;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-stage .s5-cell.is-removing{
  transform:scale(.35) rotate(10deg);
  opacity:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-subtract-step .s5-subtract-stage .s5-cell.is-subtract-target{
  background:#ee6376;
  border-color:#ed8495;
  box-shadow:0 0 12px rgba(238,99,118,.35);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-subtract-result{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:calc(18px + 1cm);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-subtract-result-eq{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  color:#172536;
  font-size:28px;
  font-weight:800;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-subtract-result-eq .op{
  color:#d39100;
  line-height:1;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-subtract-result-eq .textbook-math.textbook-math--game{
  --math-fs:28px;
  --bar-h:2px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-subtract-result-eq .textbook-math.textbook-math--game .tm-num,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-subtract-result-eq .textbook-math.textbook-math--game .tm-den{
  font-size:28px;
  font-weight:900;
  line-height:1;
  min-height:28px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-result-step{
  margin-top:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-result-step .s51-learning-board{
  flex:1;
  justify-content:flex-start;
  align-items:center;
  min-height:0;
  width:100%;
  padding:var(--s51-bar-stack-offset) 0 0;
  margin:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  gap:0;
}

/* ⑤ 결과 확인: 분수 막대 + 수식만 2cm 위로 (버튼·스텝·대사창은 그대로) */
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-result-step .s51-result-stage{
  transform:translateY(-2cm);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv{
  width:100%;
  padding:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv-bars{
  width:calc(var(--s5-bar-w) + var(--s51-bar-stack-col-gap) + var(--s51-frac-col));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--s51-bar-stack-gap);
  overflow:visible;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-conv-line{
  display:grid;
  grid-template-columns:var(--s5-bar-w) auto;
  column-gap:var(--s51-bar-stack-col-gap);
  justify-content:start;
  align-items:center;
  width:100%;
  overflow:visible;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-conv-bar-wrap,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv #s51-result-final-wrap{
  width:var(--s5-bar-w) !important;
  min-width:var(--s5-bar-w) !important;
  max-width:var(--s5-bar-w) !important;
  height:var(--s5-bar-h);
  flex-shrink:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-conv-bar-wrap .s5-server-bar,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv #s51-result-final-bar{
  width:100% !important;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-bar-eq .op{
  color:#d39100;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-conv-eq{
  justify-self:start;
  min-width:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  min-height:28px;
  padding:0 6px;
  border-radius:8px;
  background:#ebf8ef;
  border:1px solid #3fa469;
  color:#1f5f3a;
  font-weight:800;
  box-sizing:border-box;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-final-eq{
  /* 결과 요약 수식: 막대와 수식 사이 간격 = 수식과 박스 하단 간격이 되도록 균형 */
  margin-top:34px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-final-eq.is-hidden{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-final-eq.is-revealed{
  animation:s51-result-eq-in .55s ease forwards;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-bar-line.is-reveal-pending{
  display:none;
  pointer-events:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-bar-line.is-revealed{
  display:grid;
  grid-template-columns:var(--s5-bar-w) auto;
  column-gap:var(--s51-bar-stack-col-gap);
  opacity:1;
  animation:s51-result-row-in .45s ease forwards;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-conv-eq.is-eq-changing{
  opacity:.35;
  transform:translateY(2px);
  transition:opacity .18s ease, transform .18s ease;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-conv-eq.is-eq-reveal{
  animation:s51-result-eq-in .42s ease;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-conv-bar-wrap.is-bar-morphing{
  opacity:.55;
  transform:scale(.985);
  transition:opacity .22s ease, transform .22s ease;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell{
  animation:s51-result-cell-in .38s ease backwards;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(1){animation-delay:20ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(2){animation-delay:36ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(3){animation-delay:52ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(4){animation-delay:68ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(5){animation-delay:84ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(6){animation-delay:100ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(7){animation-delay:116ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(8){animation-delay:132ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(9){animation-delay:148ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(10){animation-delay:164ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(11){animation-delay:180ms;}
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-server-bar.is-bar-morph-in .s5-cell:nth-child(12){animation-delay:196ms;}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-cell-blue.is-ghost{
  background:linear-gradient(180deg,rgba(94,181,236,.34),rgba(58,155,217,.28));
  border-color:rgba(255,255,255,.45);
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-cell-red.is-ghost{
  background:linear-gradient(180deg,rgba(244,124,140,.34),rgba(234,93,113,.28));
  border-color:rgba(255,255,255,.45);
  box-shadow:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv .s5-subtract-fly-root{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:30;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-blue-fly{
  position:absolute;
  opacity:0;
  z-index:32;
  pointer-events:none;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-blue-fly.is-visible{
  opacity:1;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-blue-fly-block{
  width:100%;
  height:100%;
  border-radius:10px;
  background:linear-gradient(180deg,#5eb5ec,#3a9bd9);
  border:var(--s51-stroke-1) solid rgba(255,255,255,.72);
  box-shadow:0 8px 18px rgba(58,155,217,.28);
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s51-result-conv{
  position:relative;
}

@keyframes s51-result-eq-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes s51-result-row-in{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes s51-result-cell-in{
  from{opacity:0;transform:scale(.82);}
  to{opacity:1;transform:scale(1);}
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-result-step .s5-learn-btn,
.s51-stage.s5-computer-intro-stage .s51-learning-shell.is-height-locked > .s51-action-slot.is-corner-next #s5-learn-action,
.s51-stage.s5-computer-intro-stage .s51-learning-shell > .s51-action-slot.is-corner-next #s5-learn-action,
.s51-stage.s5-computer-intro-stage .s51-learning-shell > .s51-card-next-slot.is-corner-next #s5-learn-action{
  display:inline-flex !important;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-fail-step .s5-fail-stage,
.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-conv-stage{
  width:100%;
  padding:0;
  margin:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-conv-stage{
  gap:22px;
  width:100%;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-conv-stage.is-bars{
  padding-top:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-conv-stage.is-bars .s5-conv-bars{
  width:calc(var(--s5-bar-w) + var(--s51-bar-stack-col-gap) + var(--s51-frac-col));
  margin:0 auto;
  gap:var(--s51-bar-stack-gap);
  overflow:visible;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-conv-stage.is-bars .s5-conv-line{
  grid-template-columns:var(--s5-bar-w) auto;
  column-gap:var(--s51-bar-stack-col-gap);
  justify-content:start;
  width:100%;
  overflow:visible;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-learn.is-conv-step .s5-conv-stage.is-bars .s5-conv-eq{
  justify-self:start;
  min-width:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-lesson-bars-area{
  margin-top:0;
  padding-top:0;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-conv-eq-done{
  font-size:28px;
}

.s51-stage.s5-computer-intro-stage .s51-learning-shell .s5-subtract-final-eq{
  font-size:34px;
}

/* 단계 표시 */
.s5-learn-steps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.s5-step-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 15px;
  border-radius:999px;
  border:1px solid rgba(105,239,255,.2);
  background:rgba(3,16,28,.72);
  color:rgba(200,239,246,.55);
  font-size:13px;
  font-weight:850;
  transition:color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.s5-step-chip .num{
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border-radius:50%;
  border:1px solid currentColor;
  font-size:12px;
  font-weight:950;
}
.s5-step-chip.is-current{
  color:#bdf6ff;
  border-color:var(--s51-cyan);
  background:rgba(10,52,72,.8);
  box-shadow:0 0 16px rgba(58,211,244,.32);
}
.s5-step-chip.is-done{
  color:#9fffd4;
  border-color:rgba(125,255,198,.5);
}
.s5-step-chip.is-done .num{border-color:rgba(125,255,198,.7);}

/* 학습 보드 */
.s5-learn-board{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:100%;
  min-height:300px;
}
/* 두 막대를 세로로 쌓아 전체 길이 비교가 쉽도록 */
.s5-learn-bars{
  display:flex;
  flex-direction:column;
  gap:16px;
  justify-content:center;
  align-items:center;
}

/* 서버 저장 공간 패널 */
.s5-server-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:13px 20px 11px;
  border:1px solid rgba(105,239,255,.28);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(5,24,38,.92), rgba(2,12,22,.95));
  box-shadow:0 0 24px rgba(58,211,244,.14), inset 0 0 16px rgba(58,211,244,.06);
}
.s5-server-panel-title{
  display:flex;
  align-items:center;
  gap:9px;
  color:#cdf3fb;
  font-size:17px;
  font-weight:900;
}
.s5-server-panel-title .textbook-math { font-size: 22px; color: #8af3ff; }
.s5-server-panel-sub{
  color:rgba(170,214,226,.66);
  font-size:13px;
  font-weight:800;
  letter-spacing:.03em;
}

/* 막대: 전체 길이는 항상 --s5-bar-w 로 고정, 칸은 1fr 로 균등 분할 */
.s5-server-bar{
  width:var(--s5-bar-w);
  height:var(--s5-bar-h);
  display:grid;
  gap:5px;
  padding:6px;
  box-sizing:content-box;
  border-radius:12px;
  background:rgba(0,8,16,.6);
  border:1px solid rgba(105,239,255,.16);
}
.s5-server-bar.is-grouped{gap:6px;}
.s5-bar-group{
  display:grid;
  gap:3px;
  padding:3px;
  height:100%;
  box-sizing:border-box;
  border-radius:9px;
  border:1px dashed rgba(105,239,255,.42);
}

.s5-cell{
  min-width:0;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.12);
  transition:background .4s ease, opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.s5-cell-blue{
  background:linear-gradient(180deg, #4fc3ff, #2b86d8);
  border-color:rgba(140,220,255,.5);
  box-shadow:inset 0 0 8px rgba(255,255,255,.25), 0 0 10px rgba(75,180,255,.35);
}
.s5-cell-red{
  background:linear-gradient(180deg, #ff6f86, #d83b56);
  border-color:rgba(255,150,170,.55);
  box-shadow:inset 0 0 8px rgba(255,255,255,.2), 0 0 12px rgba(255,80,110,.45);
}
.s5-cell-empty{
  background:rgba(40,52,64,.5);
  border-color:rgba(120,140,160,.18);
  box-shadow:none;
}
.s5-cell.is-enter{opacity:0;transform:translateY(8px) scale(.85);}
.s5-cell.is-removing{transform:scale(.4) rotate(10deg);opacity:0;}

/* 눈금이 보이는 flush 막대 (실패 연출용): 간격 없이 칸 경계선만 */
.s5-server-bar.s5-bar-flush{
  gap:0;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  background:rgba(0,8,16,.72);
}
.s5-server-bar.s5-bar-flush .s5-cell{
  border-radius:0;
  border:none;
  border-left:2px solid rgba(140,220,255,.55);
}
.s5-server-bar.s5-bar-flush .s5-cell:first-child{border-left:none;}

/* 수식 */
.s5-learn-eq{
  display:flex;
  align-items:center;
  gap:14px;
  color:#8af3ff;
  font-size:42px;
  font-weight:950;
  text-shadow:0 0 16px rgba(105,239,255,.35);
}
.s5-learn-eq .op{color:#ffd166;text-shadow:0 0 16px rgba(255,209,102,.4);}
.s5-learn-eq.s5-conv{flex-direction:column;gap:8px;font-size:34px;}
.s5-learn-eq.s5-final{flex-direction:column;gap:5px;font-size:34px;}
.s5-learn-eq.s5-final .ans{color:#9fffd4;font-size:44px;text-shadow:0 0 20px rgba(125,255,198,.42);}
.s5-learn-eq .textbook-math { --bar-h: 3px; }

.s5-learn-note{
  color:rgba(190,228,238,.78);
  font-size:15px;
  font-weight:800;
}

.s5-learn.is-problem-step{gap:14px;}
.s5-learn.is-problem-step .s5-learn-board{min-height:0;gap:0;}
.s5-learn.is-problem-step .s5-learn-btn{margin-top:24px;}

/* 1단계: 수식 → 막대 → 버튼 흐름 */
.s5-lesson-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.s5-lesson-eq{
  margin-top:18px;
  margin-bottom:24px;
  text-align:center;
}
.s5-lesson-bars-area{
  margin-top:12px;
  padding-top:calc(40px - 0.5cm);
}

.s5-learn.is-fail-step{gap:14px;}
.s5-learn.is-fail-step .s5-learn-board{min-height:440px;gap:10px;}
.s5-learn.is-fail-step .s5-learn-btn{margin-top:8px;}

/* ---------- 2단계: 눈금 확인 / 빼기 시도 실패 연출 ---------- */
.s5-fail-stage{
  --s5-bar-w:600px;
  --s5-bar-h:72px;
  --s5-frac-col:72px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:50px 0 8px;
  width:100%;
  min-height:380px;
}
/* 막대 3줄 공통 폭 — 분수 열까지 포함해 줄마다 중앙 기준이 달라지지 않게 */
.s5-fail-stack{
  width:calc(var(--s5-bar-w) + 24px + var(--s5-frac-col));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
  overflow:visible;
}
.s5-fail-row{
  display:grid;
  grid-template-columns:var(--s5-bar-w) var(--s5-frac-col);
  column-gap:24px;
  align-items:center;
  overflow:visible;
}
.s5-fail-frac-spacer{
  visibility:hidden;
  pointer-events:none;
}
/* 막대 오른쪽에 분수만 크게 (grid 2열) */
.s5-fail-frac{
  position:static;
  left:auto;
  display:flex;
  align-items:center;
}
.s5-fail-frac .textbook-math { font-size: 34px; color: #8af3ff; --bar-h: 3px; }

/* 가운데 연산 기호 (−, =) — 막대 열 가운데 */
.s5-fail-stack .s5-fail-op{
  width:var(--s5-bar-w);
  text-align:center;
}
.s5-fail-op{
  color:#ffd166;
  font-size:36px;
  font-weight:950;
  line-height:1;
  text-shadow:0 0 16px rgba(255,209,102,.45);
}

/* 겹침 장면(3번째 줄): 빈 틀 + 착지한 파란 막대 + 빨간 조각 + 눈금선 */
.s5-fail-overlap-wrap,
.s5-fail-bar-wrap{
  position:relative;
  width:var(--s5-bar-w);
  height:var(--s5-bar-h);
  overflow:visible;
}
.s5-fail-overlap-wrap .s5-server-bar,
.s5-fail-bar-wrap > .s5-server-bar{width:100%;height:100%;}

/* 막대 위에 겹친 복제 레이어 — 좌표 계산 없이 바로 아래로만 이동 */
.s5-fail-fly-layer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:25;
  opacity:0;
  pointer-events:none;
  will-change:transform;
  transition:transform .85s cubic-bezier(.25,.85,.35,1), opacity .2s ease;
}
.s5-fail-fly-layer.is-visible{opacity:1;}
.s5-fail-fly-red{
  width:25%;
  height:100%;
}
.s5-fail-red-block{
  width:100%;
  height:100%;
  border-radius:8px;
  background:rgba(255,76,120,.72);
  border:2px solid rgba(255,120,160,.95);
  box-shadow:0 0 18px rgba(255,60,110,.45), inset 0 0 10px rgba(255,255,255,.18);
}

.s5-fail-settled-blue{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:2;
  transition:opacity .35s ease;
}
.s5-fail-settled-blue.show{opacity:1;}
.s5-fail-settled-blue .s5-server-bar{width:100%;height:100%;}

.s5-fail-piece{
  position:absolute;
  top:0;
  left:0;
  width:25%;
  height:100%;
  border-radius:8px;
  background:rgba(255,76,120,.72);
  border:2px solid rgba(255,120,160,.95);
  box-shadow:0 0 18px rgba(255,60,110,.45), inset 0 0 10px rgba(255,255,255,.18);
  opacity:0;
  z-index:5;
  transition:opacity .4s ease;
}
.s5-fail-piece.is-visible{opacity:1;}
.s5-fail-piece.is-shaking{animation:s5-piece-shake .55s ease 3;}
@keyframes s5-piece-shake{
  0%,100%{transform:translateY(0) rotate(0);}
  25%{transform:translateY(0) translateX(-5px) rotate(-2deg);}
  50%{transform:translateY(0) translateX(5px) rotate(2deg);}
  75%{transform:translateY(0) translateX(-3px);}
}

/* 6칸 눈금선 — 빨간 조각 위 레이어 */
.s5-fail-grid-overlay{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  z-index:8;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
.s5-fail-grid-overlay.show{opacity:1;}
.s5-fail-grid-overlay span{
  border-left:2px solid rgba(190,245,255,.92);
  box-shadow:-1px 0 8px rgba(105,239,255,.45);
}
.s5-fail-grid-overlay span:first-child{border-left:none;}

/* 눈금 불일치 안내선 */
.s5-fail-guide{
  position:absolute;
  top:-14px;
  width:0;
  height:calc(100% + 28px);
  border-left:2px dashed transparent;
  opacity:0;
  transition:opacity .35s ease;
  z-index:9;
  pointer-events:none;
}
.s5-fail-guide.show{opacity:1;}
.s5-fail-guide-red{left:25%;border-left-color:#ff7d96;box-shadow:0 0 8px rgba(255,95,125,.65);}
.s5-fail-guide-grid{left:33.333%;border-left-color:#8af3ff;box-shadow:0 0 8px rgba(105,239,255,.65);}

.s5-fail-tag{
  position:absolute;
  top:-36px;
  left:29%;
  transform:translateX(-50%);
  padding:4px 11px;
  border-radius:999px;
  border:1px solid rgba(255,95,125,.65);
  background:rgba(40,8,16,.94);
  color:#ffadbb;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  opacity:0;
  transition:opacity .35s ease;
  z-index:10;
}
.s5-fail-tag.show{opacity:1;}

/* ---------- 2단계: 통분 입력 패널 ---------- */
.s5-subtract-answer-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding:18px 26px;
  border:1px solid rgba(105,239,255,.4);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(5,24,38,.92), rgba(2,12,22,.95));
  box-shadow:0 0 24px rgba(58,211,244,.18), inset 0 0 16px rgba(58,211,244,.06);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.s5-subtract-answer-panel.is-revealed{opacity:1;transform:translateY(0);}
.s5-subtract-answer-q{
  color:#cdf3fb;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
}
.s5-subtract-answer-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.s5-subtract-answer-input{
  width:160px;
  height:48px;
  padding:0 16px;
  border-radius:12px;
  border:2px solid rgba(105,239,255,.45);
  background:rgba(0,8,16,.7);
  color:#bdf6ff;
  font-size:22px;
  font-weight:900;
  text-align:center;
  letter-spacing:.1em;
  outline:none;
  transition:border-color .2s ease, box-shadow .25s ease, background .25s ease;
}
.s5-subtract-answer-input::placeholder{color:rgba(150,200,214,.5);font-size:16px;font-weight:700;letter-spacing:0;}
.s5-subtract-answer-input:focus{border-color:var(--s51-cyan);box-shadow:0 0 14px rgba(58,211,244,.4);}
.s5-subtract-answer-input.is-correct{
  border-color:rgba(125,255,198,.85);
  background:rgba(10,40,28,.7);
  color:#9fffd4;
  box-shadow:0 0 20px rgba(125,255,198,.5);
}
.s5-subtract-answer-input.is-wrong{
  border-color:rgba(255,95,125,.85);
  box-shadow:0 0 16px rgba(255,76,108,.45);
  animation:s5-answer-shake .45s ease;
}
@keyframes s5-answer-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-7px);}
  40%{transform:translateX(7px);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(5px);}
}
.s5-subtract-answer-button{
  height:48px;
  padding:0 24px;
  border:1px solid rgba(116,237,255,.6);
  border-radius:12px;
  color:#03151f;
  background:linear-gradient(180deg, #8df4ff, #43b8e9);
  box-shadow:0 8px 18px rgba(40,165,220,.25), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:17px;
  font-weight:950;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease, opacity .2s ease;
}
.s5-subtract-answer-button:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px);}
.s5-subtract-answer-button:disabled{opacity:.45;cursor:default;}
.s5-subtract-answer-feedback{
  font-size:14px;
  font-weight:850;
  line-height:1.5;
  text-align:center;
  max-width:420px;
}
.s5-subtract-answer-feedback.is-correct{color:#9fffd4;}
.s5-subtract-answer-feedback.is-wrong{color:#ffadbb;}

/* ---------- 3단계: 통분 (공통분모 + 분자 입력) ---------- */
.s5-conv-stage{
  --s5-bar-w:560px;
  --s5-bar-h:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:78px 0 16px;
  width:100%;
}
/* 공통분모 입력 단계: 기존 막대 유지 + 주관식 입력 */
.s5-conv-bars{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  width:100%;
}
.s5-conv-rowfrac{
  display:flex;
  align-items:center;
}
.s5-conv-rowfrac .textbook-math { font-size: 32px; color: #8af3ff; }
.s5-conv-denom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:6px;
  padding:18px 28px;
  border:1px solid rgba(105,239,255,.4);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(5,24,38,.92), rgba(2,12,22,.95));
  box-shadow:0 0 24px rgba(58,211,244,.16), inset 0 0 16px rgba(58,211,244,.06);
}
.s5-conv-q{
  color:#cdf3fb;
  font-size:19px;
  font-weight:900;
  letter-spacing:.02em;
}
.s5-conv-denom-row{
  display:flex;
  align-items:center;
  gap:14px;
}
.s5-conv-denom-label{
  color:#bdf6ff;
  font-size:18px;
  font-weight:900;
}
.s5-conv-denom-input{
  width:120px;
  height:48px;
  padding:0 14px;
  border-radius:12px;
  border:2px solid rgba(105,239,255,.45);
  background:rgba(0,8,16,.7);
  color:#bdf6ff;
  font-size:24px;
  font-weight:950;
  text-align:center;
  letter-spacing:.06em;
  outline:none;
  transition:border-color .2s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
}
.s5-conv-denom-input::placeholder{color:rgba(150,210,230,.5);font-size:16px;font-weight:700;letter-spacing:0;}
.s5-conv-denom-input:focus{border-color:var(--s51-cyan);box-shadow:0 0 14px rgba(58,211,244,.4);}
.s5-conv-denom-input.is-correct{
  border-color:rgba(125,255,198,.85);
  background:rgba(10,40,28,.7);
  color:#9fffd4;
  box-shadow:0 0 20px rgba(125,255,198,.55);
}
.s5-conv-denom-input.is-wrong{
  border-color:rgba(255,95,125,.85);
  box-shadow:0 0 16px rgba(255,76,108,.45);
  animation:s5-answer-shake .45s ease;
}
.s5-conv-feedback{
  font-size:14px;
  font-weight:850;
  line-height:1.5;
  text-align:center;
  max-width:440px;
}
.s5-conv-feedback.is-correct{color:#9fffd4;}
.s5-conv-feedback.is-wrong{color:#ffadbb;}

/* 분자 입력 단계 (막대 + 식) */
.s5-conv-stage.is-bars{gap:26px;padding-top:52px;}

/* ---------- 4단계: 뺄셈 (통분 막대 아래 이어서) ---------- */
.s5-subtract-stage{
  --s5-eq-w:320px;
  gap:12px;
  padding:52px 0 10px;
  align-items:center;
}
.s5-learn.is-subtract-step .s5-learn-board{min-height:460px;}
.s5-conv-eq-done{font-size:28px;}
.s5-subtract-stage .s5-conv-line{
  display:grid;
  grid-template-columns:var(--s5-bar-w) var(--s5-eq-w);
  gap:30px;
  justify-content:start;
  align-items:center;
  width:calc(var(--s5-bar-w) + 30px + var(--s5-eq-w));
}
.s5-subtract-stage .s5-conv-bar-wrap{
  grid-column:1;
  justify-self:start;
}
.s5-subtract-stage .s5-conv-eq{
  grid-column:2;
  justify-self:start;
  white-space:nowrap;
}
.s5-subtract-stage .s5-fail-op{
  width:calc(var(--s5-bar-w) + 30px + var(--s5-eq-w));
  text-align:center;
}
.s5-subtract-stage .s5-cell{
  transition:background .45s ease, opacity .7s ease, transform .7s ease, box-shadow .45s ease;
}
.s5-subtract-stage .s5-cell.is-removing{
  transform:scale(.35) rotate(12deg);
  opacity:0;
}
.s5-subtract-stage .s5-cell.is-subtract-target{
  background:linear-gradient(180deg, #ff8fa3, #e84a66);
  border-color:rgba(255,150,170,.65);
  box-shadow:0 0 16px rgba(255,80,110,.55), inset 0 0 8px rgba(255,255,255,.2);
}
.s5-subtract-final{
  width:calc(var(--s5-bar-w) + 30px + var(--s5-eq-w));
  margin-top:61px;
}
.s5-subtract-final-eq{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:15px;
  color:#8af3ff;
  font-size:39px;
  font-weight:950;
}
.s5-subtract-final-eq .op{color:#ffd166;text-shadow:0 0 14px rgba(255,209,102,.4);}
.s5-subtract-final-eq .textbook-math { --bar-h: 5px; }
.s5-subtract-next-btn{
  margin-top:21px;
  height:56px;
  padding:0 36px;
  border:1px solid rgba(116,237,255,.6);
  border-radius:14px;
  color:#03151f;
  background:linear-gradient(180deg, #8df4ff, #43b8e9);
  box-shadow:0 8px 18px rgba(40,165,220,.25), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:26px;
  font-weight:950;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
}
.s5-subtract-next-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
/* Result-step next button is shown via s51 corner-next rules; do not hide it. */
.s5-conv-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  width:100%;
  transition:opacity .3s ease;
}
.s5-conv-line.is-locked{opacity:.4;}
.s5-conv-bar-wrap{
  width:var(--s5-bar-w);
  height:var(--s5-bar-h);
}
.s5-conv-bar-wrap .s5-server-bar{width:100%;height:100%;}
.s5-conv-bar-wrap .s5-server-bar.is-confirmed{
  box-shadow:0 0 22px rgba(125,255,198,.5);
  border-color:rgba(125,255,198,.55);
}
.s5-conv-eq{
  display:flex;
  align-items:center;
  gap:12px;
  color:#8af3ff;
  font-size:30px;
  font-weight:950;
}
.s5-conv-eq .op{color:#ffd166;text-shadow:0 0 14px rgba(255,209,102,.4);}
.s5-conv-eq .textbook-math { --bar-h: 3px; }
.s5-conv-frac{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.s5-conv-num-input{
  width:54px;
  height:44px;
  padding:0;
  border-radius:10px;
  border:2px solid rgba(105,239,255,.45);
  background:rgba(0,8,16,.7);
  color:#bdf6ff;
  font-size:24px;
  font-weight:950;
  text-align:center;
  outline:none;
  transition:border-color .2s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
}
.s5-conv-num-input:focus{border-color:var(--s51-cyan);box-shadow:0 0 14px rgba(58,211,244,.4);}
.s5-conv-num-input:disabled{opacity:1;}
.s5-conv-num-input.is-correct{
  border-color:rgba(125,255,198,.85);
  background:rgba(10,40,28,.7);
  color:#9fffd4;
  box-shadow:0 0 18px rgba(125,255,198,.5);
}
.s5-conv-num-input.is-wrong{
  border-color:rgba(255,95,125,.85);
  box-shadow:0 0 16px rgba(255,76,108,.45);
  animation:s5-answer-shake .45s ease;
}
.s5-conv-frac-line{
  width:64px;
  height:3px;
  background:#8af3ff;
  border-radius:2px;
}
.s5-conv-frac-den{
  font-size:26px;
  font-weight:950;
  color:#8af3ff;
}
.s5-conv-num-btn{
  height:42px;
  padding:0 18px;
  border:1px solid rgba(116,237,255,.6);
  border-radius:10px;
  color:#03151f;
  background:linear-gradient(180deg, #8df4ff, #43b8e9);
  box-shadow:0 6px 14px rgba(40,165,220,.25), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  transition:filter .2s ease, transform .15s ease, opacity .2s ease;
}
.s5-conv-num-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px);}
.s5-conv-num-btn:disabled{opacity:.4;cursor:default;}

.s5-result-label{
  display:flex;
  align-items:center;
  gap:10px;
  color:#9fffd4;
  font-size:22px;
  font-weight:900;
}
.s5-result-label .textbook-math { font-size: 30px; }

/* 단계 진행 버튼 */
.s5-learn-btn{
  min-width:208px;
  height:52px;
  padding:0 32px;
  border:1px solid rgba(116,237,255,.6);
  border-radius:13px;
  color:#03151f;
  background:linear-gradient(180deg, #8df4ff, #43b8e9);
  box-shadow:0 12px 26px rgba(40,165,220,.25), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:18px;
  font-weight:950;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease, opacity .2s ease;
}
.s5-learn-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px);}
.s5-learn-btn:disabled{opacity:.4;cursor:default;}

@media (prefers-reduced-motion:reduce){
  .s5-fail-fly-layer{transition:none!important;}
  .s5-fail-piece{animation:none!important;transition:none;}
  .s5-fail-piece.is-visible{opacity:1;}
  .s5-cell.is-enter{opacity:1;transform:none;}
}

/* Stage 5-2 — s32 밝은 보드: s51-learning-shell과 동일한 상·하단 y */
body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board{
  display:grid !important;
  grid-template-rows:minmax(0, 1fr) !important;
  grid-template-areas:"dual-main" !important;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .dual-textbook-main{
  display:block !important;
  position:relative !important;
  grid-area:dual-main !important;
  height:100% !important;
  padding:0 !important;
  overflow:visible !important;
}

body.s52-formula-active .s51-stage .s32-learning-wrap.s51-learning-shell.s52-board-shell{
  --s51-shell-top:calc(92px + 3cm);
  --s51-shell-min-height:560px;
  --s51-shell-safe-bottom:calc(var(--eq-inventory-height, 44px) + 28px + 100px);
  --s51-shell-height-trim:2cm;
  position:absolute;
  left:50%;
  top:var(--s51-shell-top);
  z-index:50;
  box-sizing:border-box;
  width:min(var(--edu-worksheet-width, 1080px), calc(100% - 220px));
  max-width:var(--edu-worksheet-width, 1080px);
  transform:translateX(-50%);
  opacity:1;
  pointer-events:auto;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

body.s52-formula-active .s51-stage .s32-learning-wrap.s51-learning-shell.s52-board-shell.is-height-locked{
  /* s51-learning-shell과 동일한 외곽 높이 */
  height:calc(var(--s51-shell-min-height) + 1cm + 0.5cm);
  min-height:calc(var(--s51-shell-min-height) + 1cm + 0.5cm);
  max-height:calc(1080px - var(--s51-shell-top) - var(--s51-shell-safe-bottom) - var(--s51-shell-height-trim));
}

/* s52 — 방법1·방법2: s32와 동일한 타이틀↔패널 간격, 아래로 내린 만큼 높이 보정 */
body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .s32-board-header{
  margin-bottom:20px;
  padding-bottom:14px;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .s32-board-body{
  flex:1 1 auto;
  min-height:0;
  overflow:visible;
  padding-bottom:2px;
  box-sizing:border-box;
  gap:12px;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .dual-textbook-sheets{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:100% !important;
  max-height:100% !important;
  align-items:stretch !important;
  overflow:visible !important;
  box-sizing:border-box;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .dual-method-column{
  height:100%;
  min-height:0;
  max-height:100%;
  overflow:visible;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .dual-method-sheet{
  box-sizing:border-box !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  border-radius:20px !important;
  overflow:hidden !important;
}

/* s52 — s31 magic-lab-next-slot과 동일한 다음 버튼 */
body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .s32-learning-board{
  position:relative;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .s52-next-slot{
  position:absolute;
  right:28px;
  bottom:18px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:96px;
  min-height:44px;
  pointer-events:auto;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .s52-next-slot[hidden]{
  display:none !important;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .s52-next-slot .stage1-primary-action.s21-card-next-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  height:auto;
  padding:10px 22px;
  border:1px solid rgba(127,226,255,.32);
  border-radius:6px;
  background:linear-gradient(180deg,#3bd8ff,#2579ff);
  box-shadow:0 12px 24px rgba(0,78,177,.26),0 0 18px rgba(61,206,255,.24);
  color:#ffffff;
  font-size:15px;
  font-weight:950;
  letter-spacing:0;
  cursor:pointer;
}

body.s52-formula-active .dual-textbook-stage.s32-bright-board.s52-bright-board .s52-next-slot .stage1-primary-action.s21-card-next-btn:hover:not(:disabled){
  filter:brightness(1.06);
  transform:translateY(-1px);
}

body.s52-formula-active .s51-stage .s52-board-shell .s32-learning-board{
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  overflow:hidden;
}

/* Stage 5-2 — 수식으로 통분하여 빼기 (s33형 2열 + 흰 패널) */
.s52-stage{
  color:#1f2937;
  position:relative;
}

.s52-learning-shell{
  --s52-bg:#ffffff;
  --s52-surface:#f8fafc;
  --s52-border:#d7e1ea;
  --s52-text:#1f2937;
  --s52-subtext:#607080;
  --s52-blue:#3d9fe3;
  --s52-blue-soft:#eef8fe;
  --s52-blue-border:#8ac8ec;
  --s52-green:#36a269;
  --s52-green-soft:#ebf8ef;
  --s52-yellow:#dda400;
  --s52-panel-width:560px;
  --s52-panel-height:536px;
  --s52-panel-gap:32px;
  --s52-main-width:1152px;
  --s52-input-w:56px;
  --s52-input-h:34px;
  --s52-input-font:22px;
  position:absolute;
  left:50%;
  top:calc(92px + 3cm);
  z-index:50;
  box-sizing:border-box;
  width:min(var(--s52-main-width), calc(100% - 220px));
  max-width:var(--s52-main-width);
  max-height:calc(1080px - calc(92px + 3cm) - var(--eq-inventory-height, 44px) - 28px - 100px);
  padding:18px 28px 22px;
  transform:translateX(-50%);
  overflow:visible;
  border:1px solid var(--s52-border);
  border-radius:22px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 32px rgba(29,46,61,.16);
  color:var(--s52-text);
  font-family:var(--edu-worksheet-font, "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif);
}

.s52-board{
  position:relative;
  left:auto;
  top:auto;
  z-index:1;
  display:grid;
  gap:14px;
  width:100%;
  max-height:none;
  transform:none;
}

.s52-below-panels{
  display:grid;
  gap:10px;
  width:100%;
  justify-items:stretch;
}

.s52-below-panels.has-compare-btn{
  margin-top:8px;
}

.s52-below-panels:empty{
  display:none;
}

.s52-compare-zone{
  position:relative;
  left:auto;
  top:auto;
  z-index:1;
  display:grid;
  gap:14px;
  width:100%;
  transform:none;
  pointer-events:auto;
  animation:s52-fade-in-opacity .35s ease;
}

.s52-compare-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  width:100%;
  pointer-events:auto;
}

.s52-next-outside{
  position:relative;
  left:auto;
  bottom:auto;
  justify-self:end;
  pointer-events:auto;
}

.s52-problem-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:46px;
  margin:0;
  margin-bottom:0;
  padding:10px 22px;
  border:1px solid #d7e1ea;
  border-radius:999px;
  background:#f8fafc;
  color:#607080;
  font-size:17px;
  font-weight:800;
}

.s52-problem-strip strong{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#1f2937;
  font-size:24px;
  font-weight:950;
}

.s52-methods{
  --s52-panel-height:536px;
  display:grid;
  grid-template-columns:560px 560px;
  gap:32px;
  justify-content:center;
  align-items:stretch;
  width:100%;
  height:var(--s52-panel-height);
  max-height:var(--s52-panel-height);
  min-height:var(--s52-panel-height);
}

.s52-method-panel{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  min-height:0;
  height:100%;
  overflow:hidden;
  padding:14px 14px 12px;
  border:1px solid #d7e1ea;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  box-shadow:0 8px 18px rgba(29,46,61,.08);
  transition:border-color .28s ease, box-shadow .28s ease, opacity .28s ease;
  filter:none;
}

.s52-method-panel::before{
  display:none;
}

.s52-method-1{
  border-color:#e8d4bc;
}

.s52-method-2{
  border-color:#c8e4f6;
}

.s52-method-panel.is-active{
  border-color:#8ac8ec;
  box-shadow:0 10px 24px rgba(61,159,227,.16), inset 0 0 0 1px rgba(138,200,236,.35);
  filter:none;
  opacity:1;
}

.s52-method-1.is-active{
  border-color:#e0b878;
  box-shadow:0 10px 24px rgba(221,164,0,.12), inset 0 0 0 1px rgba(224,184,120,.35);
}

.s52-method-panel.is-waiting,
.s52-method-panel.is-preview{
  opacity:.58;
  filter:none;
}

.s52-method-panel.is-complete{
  opacity:1;
  filter:none;
  border-color:#9ed4b4;
  box-shadow:0 8px 18px rgba(54,162,105,.12), inset 0 0 0 1px rgba(110,196,140,.28);
}

.s52-method-head{
  position:relative;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  padding-bottom:10px;
  border-bottom:1px solid #d7e1ea;
}

.s52-method-label{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  height:28px;
  padding:0 12px;
  border:1px solid #8ac8ec;
  border-radius:999px;
  color:#256f9e;
  background:#eef8fe;
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  white-space:nowrap;
}

.s52-method-1 .s52-method-label{
  border-color:#e0b878;
  color:#9a6b12;
  background:#fff8eb;
}

.s52-method-head h2{
  margin:0;
  flex:1 1 auto;
  color:#1f2937;
  font-size:17px;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.2;
  white-space:normal;
}

.s52-method-head em{
  flex:0 0 100%;
  color:#607080;
  font-size:13px;
  font-style:normal;
  font-weight:800;
  white-space:normal;
}

.s52-method-formula{
  position:relative;
  display:grid;
  gap:8px;
  justify-items:stretch;
  align-content:start;
  padding:6px 8px 0 24px;
  overflow:auto;
  min-height:0;
}

.s52-formula-line{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  width:100%;
  min-height:38px;
}

.s52-formula-line.is-first{
  grid-template-columns:minmax(0,1fr);
}

.s52-formula-line.is-first .s52-equals{
  display:none;
}

.s52-equals{
  color:#dda400;
  font-size:20px;
  font-weight:950;
  text-align:left;
  text-shadow:none;
}

.s52-equals:empty{
  visibility:hidden;
}

.s52-expression{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  color:#1f2937;
  font-size:20px;
  font-weight:900;
}

.s52-expression .textbook-math.textbook-math--game{
  --tm-num-size:22px;
  --tm-den-size:22px;
}

.s52-answer-frac .textbook-math.textbook-math--game .tm-num,
.s52-answer-frac .textbook-math.textbook-math--game .tm-den{
  color:#36a269;
  text-shadow:none;
}

.s52-op,
.s52-times{
  color:#dda400;
  font-weight:950;
  text-shadow:none;
}

.s52-input,
.s52-blank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  min-width:56px;
  height:34px;
  box-sizing:border-box;
  border-radius:8px;
  font-size:22px;
  font-weight:800;
  line-height:1;
  text-align:center;
}

.s52-input{
  border:2px solid #8ac8ec;
  color:#1f2937;
  background:#ffffff;
  box-shadow:none;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.s52-input:focus{
  border-color:#3d9fe3;
  box-shadow:0 0 0 3px rgba(61,159,227,.18);
}

.s52-input.is-correct{
  border-color:#6bc492;
  color:#1f5f3a;
  background:#ebf8ef;
  box-shadow:none;
}

.s52-input.is-wrong{
  border-color:#ee6376;
  color:#9f2335;
  background:#fff2f4;
  box-shadow:none;
  animation:s52-shake .42s ease;
}

.s52-blank{
  border:1px dashed #c7d2dc;
  color:#94a3b2;
  background:#f1f5f9;
}

.s52-blank.is-solved{
  border:1px solid #6bc492;
  color:#1f5f3a;
  background:#ebf8ef;
  box-shadow:none;
}

.s52-wait-note{
  color:#607080;
  font-size:14px;
  font-weight:800;
  text-align:center;
}

.s52-method-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

.s52-method-footer:empty{
  display:none;
}

.s52-btn{
  min-width:132px;
  height:46px;
  padding:0 24px;
  border:1px solid rgba(116,237,255,.62);
  border-radius:12px;
  color:#03151f;
  background:linear-gradient(180deg,#8df4ff,#43b8e9);
  box-shadow:0 10px 22px rgba(40,165,220,.22), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:16px;
  font-weight:950;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
}

.s52-btn:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}

.s52-summary-panel{
  display:grid;
  justify-items:center;
  gap:14px;
  padding:18px 24px 20px;
  border:1px solid rgba(125,255,198,.24);
  border-radius:20px;
  background:rgba(1,11,21,.78);
  box-shadow:0 0 24px rgba(125,255,198,.08);
}

.s52-compare-card{
  display:grid;
  gap:12px;
  align-content:start;
  min-width:0;
  min-height:108px;
  padding:18px 20px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #d7e1ea;
  box-shadow:0 4px 12px rgba(29,46,61,.06);
}

.s52-compare-card.is-method-1{
  border-color:#e8d4bc;
  background:#fffdf8;
}

.s52-compare-card.is-method-2{
  border-color:#c8e4f6;
  background:#f8fcff;
}

.s52-compare-row .s52-method-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid #8ac8ec;
  color:#256f9e;
  background:#eef8fe;
  font-size:16px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}

.s52-compare-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.s52-compare-row .s52-method-name{
  color:#1f2937;
  font-size:20px;
  font-weight:900;
}

.s52-compare-row .s52-method-point{
  margin:0;
  color:#607080;
  font-size:18px;
  font-weight:700;
  line-height:1.5;
}

.s52-compare-actions{
  display:flex;
  justify-content:center;
  width:100%;
}

.s52-btn-compare{
  min-width:148px;
  height:44px;
  border:1px solid rgba(127,226,255,.32);
  border-radius:6px;
  color:#ffffff;
  background:linear-gradient(180deg,#3bd8ff,#2579ff);
  box-shadow:0 12px 24px rgba(0,78,177,.18);
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  animation:s52-fade-in .45s ease;
}

.s52-btn-compare:hover{
  filter:brightness(1.06);
}

.s52-next-small{
  justify-self:end;
  min-width:96px;
  height:auto;
  padding:10px 22px;
  border-radius:6px;
}

@keyframes s52-fade-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes s52-fade-in-opacity{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes s52-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}

.s52-compare-card.is-method-1 .s52-method-badge{
  border-color:#e0b878;
  color:#9a6b12;
  background:#fff8eb;
}

.s52-board.is-awaiting-compare .s52-method-2.is-complete{
  border-color:#9ed4b4;
  box-shadow:0 10px 24px rgba(54,162,105,.14), inset 0 0 0 1px rgba(110,196,140,.28);
}

body.s52-formula-active .s52-methods{
  grid-template-columns:560px 560px;
}

@media (prefers-reduced-motion:reduce){
  .s52-input.is-wrong{animation:none!important;}
}