/* =========================
   STAGE 1
========================= */

.stage1-bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/s1.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.stage1-topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 26, 43, 0.82);
  backdrop-filter: blur(10px);
  z-index: 140;
}

.stage1-mission {
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
}

#home-btn {
  position: absolute;
  z-index: 141 !important;
  right: 20px;
  top: 15px;
  height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(to bottom, #4b8eff, #2d67df);
  color: white;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.stage1-field {
  position: absolute;
  inset: 74px 0 0 0;
  overflow: hidden;
}

.sprinkler-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.sprinkler-click-area {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
}

/* 제어함 */
.control-box {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 168px;
  height: 102px;
  border-radius: 18px;
  background: linear-gradient(145deg, #d8b55e 0%, #9d6c25 100%);
  border: 4px solid #6c4815;
  color: #fff4d0;
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 18;
}

/* 퍼즐 */
.puzzle-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 24, 0.42);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.puzzle-panel {
  width: 820px;
  background: rgba(248, 251, 254, 0.97);
  border: 2px solid rgba(94, 202, 255, 0.7);
  border-radius: 30px;
  padding: 34px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.puzzle-panel h2 {
  margin: 0 0 24px;
  text-align: center;
  font-size: 38px;
  color: #162434;
  letter-spacing: -0.03em;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.number-btn {
  height: 88px;
  border: 2px solid #d6dfe8;
  border-radius: 18px;
  background: linear-gradient(to bottom, #ffffff, #f4f7fa);
  font-size: 30px;
  font-weight: 800;
  cursor: pointer;
  color: #17202b;
}

.number-btn.selected {
  background: linear-gradient(to bottom, #7be39b, #5cca7b);
  border-color: #2f874a;
  color: #102114;
}

.puzzle-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.puzzle-actions button {
  border: none;
  border-radius: 14px;
  padding: 14px 22px;
  color: white;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

#hint-btn {
  background: linear-gradient(to bottom, #f1af42, #d98d1a);
}

#calc-btn {
  background: linear-gradient(to bottom, #7085ff, #5266df);
}

#confirm-btn {
  background: linear-gradient(to bottom, #2f98ff, #1f75db);
}

#close-btn {
  background: linear-gradient(to bottom, #74818c, #5a6772);
}

#msg {
  min-height: 28px;
  margin-top: 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #cf3a3a;
}

/* =========================
   HOME SCENE — see style/home.css
========================= */

/* =========================
   INTRO SCENE
========================= */

.intro-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(135deg, #07111d 0%, #0f2741 50%, #173e61 100%);
}

.intro-bg-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(72px);
  opacity: 0.28;
  pointer-events: none;
}

.intro-bg-glow-1 {
  width: 320px;
  height: 320px;
  left: 10%;
  top: 14%;
  background: #3f8fff;
}

.intro-bg-glow-2 {
  width: 420px;
  height: 420px;
  right: 8%;
  bottom: 10%;
  background: #5ed8ff;
}

.intro-card {
  position: relative;
  z-index: 2;
  width: 820px;
  padding: 54px 42px;
  text-align: center;
  border-radius: 30px;
  background: rgba(10, 20, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.intro-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(84, 196, 255, 0.12);
  border: 1px solid rgba(84, 196, 255, 0.25);
  color: #8edfff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.intro-title {
  margin: 0 0 18px;
  font-size: 64px;
  line-height: 1.1;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.04em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.intro-text {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.7;
  color: #e5f2ff;
}

.intro-text.sub {
  margin-bottom: 34px;
  color: #cfe1f5;
  opacity: 0.95;
}

.intro-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.intro-buttons button {
  min-width: 220px;
  padding: 16px 28px;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 800;
  color: white;
  cursor: pointer;
  background: linear-gradient(to bottom, #3f89ff, #2964dc);
  box-shadow: 0 12px 24px rgba(41, 100, 220, 0.3);
}

.intro-buttons .secondary-btn {
  background: linear-gradient(to bottom, #5f6f7f, #47535e);
}

/* =========================
   INVENTORY
========================= */

#inventory-panel {
  position: absolute;
  top: 76px;
  right: 0;
  width: 74px;
  padding: 8px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(
    180deg,
    rgba(16, 28, 42, 0.92) 0%,
    rgba(24, 39, 56, 0.9) 100%
  );
  border: 1px solid rgba(120, 210, 255, 0.22);
  border-right: none;
  box-shadow:
    -8px 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: white;
  z-index: 130;
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#inventory-panel.drop-ready {
  box-shadow:
    -8px 10px 24px rgba(0, 0, 0, 0.18),
    0 0 0 4px rgba(124, 214, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: scale(1.04);
}

#inventory-panel .ui-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: #dff6ff;
  text-align: center;
  letter-spacing: -0.02em;
}

#inventory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inventory-slot {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.inventory-slot.filled {
  background: linear-gradient(
    180deg,
    rgba(86, 132, 255, 0.22) 0%,
    rgba(50, 84, 138, 0.3) 100%
  );
  border: 1px solid rgba(120, 200, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.inventory-slot.empty {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.inventory-slot:hover {
  transform: scale(1.04);
}

.inventory-icon {
  width: 60%;
  height: 60%;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 18px;
  flex-shrink: 0;
}

.inventory-name {
  display: none;
}

.inventory-empty-text {
  display: none;
}

/* =========================
   ITEM DRAG OVERLAY
========================= */
.item-found-overlay {
  position: absolute;
  top: 74px;      /* 상단 미션 바 제외 */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 115;
  pointer-events: none;
}

.item-found-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 24, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

/* 열쇠만 위에 */
.item-found-draggable {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  pointer-events: auto;
  z-index: 200; /* 기본도 충분히 높게 */
  transition: transform 0.15s ease, opacity 0.15s ease;
}


.item-found-draggable:active {
  cursor: grabbing;
}

.item-found-draggable.dragging {
  animation: none;
  opacity: 0.96;
  z-index: 99999; /* ⭐ 드래그 중엔 무조건 맨 위 */
}


.item-found-draggable.item-spawn {
  animation: keySpawn 0.7s ease-out;
}

.item-found-icon {
  font-size: 86px;
  line-height: 1;
  margin: 0;
  filter: drop-shadow(0 0 20px rgba(255, 220, 120, 0.65));
  animation: keyFloat 1.3s ease-in-out infinite alternate;
}

.item-found-name {
  display: none;
}

#inventory-panel.drop-ready {
  box-shadow:
    -8px 10px 24px rgba(0, 0, 0, 0.18),
    0 0 0 4px rgba(124, 214, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: scale(1.04);
}

@keyframes keySpawn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(-18deg);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2) rotate(8deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes keyFloat {
  0% {
    transform: translateY(0px) rotate(-6deg);
  }
  100% {
    transform: translateY(-10px) rotate(6deg);
  }
}

/* =========================
   STAGE 3 SCIENCE LAB
========================= */

.science-lab-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #ecfbff;
  background:
    radial-gradient(circle at 50% 34%, rgba(116, 96, 255, 0.2), transparent 27%),
    linear-gradient(180deg, #071521 0%, #02070c 100%);
}

.science-lab-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 12, 22, 0.08) 0%, rgba(5, 11, 20, 0.22) 100%),
    url("../assets/images/s3.png") center / cover no-repeat;
  filter: saturate(1.02) brightness(1.02);
}

.science-lab-header,
.reagent-lab {
  position: relative;
  z-index: 1;
  width: 1180px;
  margin: 0 auto;
}

.science-lab-header {
  margin-top: 46px;
  min-height: 112px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 2px solid rgba(100, 216, 255, 0.42);
  border-radius: 10px;
  background: rgba(3, 15, 29, 0.78);
  box-shadow: 0 0 28px rgba(40, 194, 255, 0.12);
}

.science-lab-kicker {
  margin: 0 0 6px;
  color: #83f8ff;
  font-size: 17px;
  font-weight: 900;
}

.science-lab-header h2 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0;
}

.science-lab-header span {
  color: #bdefff;
  font-size: 18px;
  font-weight: 800;
}

.science-home-btn,
.laser-input-row button,
.final-answer-row button {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #50d7ff, #2679eb);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(35, 132, 255, 0.34);
}

.science-home-btn {
  min-width: 82px;
  height: 52px;
}

.reagent-lab {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.reagent-rack {
  min-height: 250px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.reagent-card,
.laser-console,
.main-beaker-zone,
.final-panel {
  border: 2px solid rgba(90, 210, 255, 0.42);
  border-radius: 10px;
  background: rgba(2, 14, 28, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 30px rgba(46, 196, 255, 0.1);
}

.reagent-card {
  min-height: 250px;
  padding: 14px 16px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: #ecfbff;
  cursor: pointer;
}

.reagent-card.clickable {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 20px rgba(111, 245, 225, 0.18);
}

.reagent-card.clickable:hover {
  border-color: rgba(126, 255, 228, 0.8);
  transform: translateY(-2px);
}

.reagent-label {
  font-size: 20px;
  font-weight: 900;
}

.reagent-hint {
  min-height: 22px;
  color: #a9e9ff;
  font-size: 15px;
  font-weight: 800;
}

.science-vessel {
  width: 126px;
  height: 180px;
}

.science-vessel.main {
  width: 230px;
  height: 230px;
}

.vessel-glass {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 4px solid rgba(202, 250, 255, 0.7);
  border-top: 0;
  border-radius: 0 0 36px 36px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 22% 78%, rgba(255, 255, 255, 0.12)),
    rgba(7, 28, 43, 0.7);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.12),
    0 0 22px rgba(99, 235, 255, 0.28);
}

.science-vessel.main .vessel-glass {
  border-top: 4px solid rgba(202, 250, 255, 0.7);
  border-radius: 18px 18px 42px 42px;
}

.science-vessel.faint .vessel-glass {
  opacity: 0.42;
}

.vessel-cell {
  position: relative;
  flex: 1 1 0;
  border-top: 1px solid rgba(218, 254, 255, 0.44);
  background: transparent;
}

.vessel-cell:first-child {
  border-top: 0;
}

.vessel-cell.blue {
  background:
    linear-gradient(180deg, rgba(134, 238, 255, 0.92), rgba(36, 118, 255, 0.9));
  box-shadow: inset 0 0 20px rgba(164, 246, 255, 0.36);
}

.vessel-cell.yellow {
  background:
    linear-gradient(180deg, rgba(255, 246, 132, 0.96), rgba(250, 176, 45, 0.93));
  box-shadow: inset 0 0 20px rgba(255, 252, 178, 0.36);
}

.laser-console {
  min-height: 100px;
  padding: 14px 20px;
  display: grid;
  gap: 12px;
}

.laser-input-row {
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  gap: 12px;
  align-items: center;
}

.laser-input-row label {
  color: #83f8ff;
  font-size: 18px;
  font-weight: 900;
}

.laser-input-row input,
.final-answer-row input {
  height: 52px;
  border: 2px solid rgba(111, 221, 255, 0.42);
  border-radius: 8px;
  background: rgba(1, 8, 15, 0.92);
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.laser-input-row input:focus,
.final-answer-row input:focus {
  border-color: rgba(117, 255, 227, 0.9);
  box-shadow: 0 0 18px rgba(117, 255, 227, 0.28);
}

.science-feedback {
  min-height: 26px;
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.science-feedback.info { color: #ffe779; }
.science-feedback.good { color: #7dffd7; }
.science-feedback.bad { color: #ff8c99; }

.sync-equation {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.sync-equation.hidden,
.final-panel.hidden {
  display: none;
}

.main-beaker-zone {
  position: relative;
  min-height: 260px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: center;
  gap: 20px;
}

.beaker-label {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 32px;
  font-weight: 900;
}

.beaker-fraction {
  margin: 0;
  color: #a9e9ff;
  font-size: 22px;
  font-weight: 900;
}

.beaker-fraction strong {
  color: #7dffd7;
}

.reagent-pop {
  position: absolute;
  left: 66%;
  top: 28%;
  font-size: 28px;
  font-weight: 900;
  animation: reagentPop 0.65s ease-out forwards;
  pointer-events: none;
}

.reagent-pop.blue { color: #78eaff; }
.reagent-pop.yellow { color: #ffe779; }

.final-panel {
  min-height: 118px;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 86px 1fr 470px;
  gap: 18px;
  align-items: center;
}

.lock-visual {
  position: relative;
  width: 72px;
  height: 82px;
}

.lock-shackle {
  position: absolute;
  left: 16px;
  top: 0;
  width: 40px;
  height: 42px;
  border: 8px solid #bdefff;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  transition: transform 0.25s ease;
}

.lock-body {
  position: absolute;
  left: 5px;
  bottom: 0;
  width: 62px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7db65, #e49023);
  box-shadow: 0 0 18px rgba(255, 218, 91, 0.38);
}

.lock-visual.open .lock-shackle {
  transform: translateX(18px) rotate(18deg);
}

.final-copy h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
}

.final-copy p {
  margin: 0;
  color: #bdefff;
  font-size: 17px;
  font-weight: 800;
}

.final-answer-row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 160px;
  gap: 10px;
  align-items: center;
}

.final-answer-row span {
  color: #ffffff;
  font-size: 32px;
  font-weight: 900;
  text-align: center;
}

.final-panel.success {
  border-color: rgba(125, 255, 215, 0.86);
  box-shadow:
    0 0 36px rgba(125, 255, 215, 0.35),
    inset 0 0 28px rgba(125, 255, 215, 0.12);
  animation: scienceSuccessPulse 0.85s ease-out;
}

.grid-sync-laser {
  position: absolute;
  left: 0;
  top: 33%;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #8ffff3, #70a8ff, transparent);
  box-shadow: 0 0 28px rgba(130, 255, 243, 0.92);
  animation: gridLaserSweep 0.9s ease-out forwards;
  pointer-events: none;
}

.shake {
  animation: scienceShake 0.32s ease;
}

@keyframes reagentPop {
  0% { opacity: 0; transform: translateY(22px) scale(0.75); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-42px) scale(1.2); }
}

@keyframes gridLaserSweep {
  0% { opacity: 0; transform: translateY(-90px) scaleX(0.25); }
  45% { opacity: 1; transform: translateY(0) scaleX(1); }
  100% { opacity: 0; transform: translateY(150px) scaleX(1); }
}

@keyframes scienceShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-5px); }
}

@keyframes scienceSuccessPulse {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

/* =========================
   STAGE 3 COMPACT CHEM GAME
========================= */

.science-lab-compact {
  display: flow-root;
}

.chem-header {
  position: relative;
  z-index: 1;
  width: 1340px;
  height: 118px;
  margin: 44px auto 0;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid rgba(93, 219, 255, 0.44);
  border-radius: 10px;
  background: rgba(3, 14, 27, 0.82);
  box-shadow: 0 0 28px rgba(54, 207, 255, 0.12);
}

.chem-header p,
.chem-header h2,
.chem-header span {
  margin: 0;
}

.chem-header p {
  color: #7df3ff;
  font-size: 17px;
  font-weight: 900;
}

.chem-header h2 {
  margin-top: 2px;
  color: #fff;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
}

.chem-header span {
  display: block;
  margin-top: 5px;
  color: #bff1ff;
  font-size: 17px;
  font-weight: 800;
}

.chem-board {
  position: relative;
  z-index: 1;
  width: 1340px;
  height: 760px;
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  grid-template-rows: 330px 1fr;
  gap: 14px;
}

.chem-card {
  min-width: 0;
  min-height: 0;
  border: 2px solid rgba(88, 214, 255, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(7, 25, 43, 0.9), rgba(2, 11, 22, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px rgba(53, 195, 255, 0.12);
}

.reagent-card-compact {
  padding: 16px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  color: #ecfbff;
  cursor: pointer;
  user-select: none;
}

.reagent-card-compact.is-active {
  border-color: rgba(126, 255, 226, 0.8);
  box-shadow:
    0 0 28px rgba(126, 255, 226, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.reagent-card-compact:hover {
  transform: translateY(-2px);
}

.reagent-card-compact h3,
.reagent-card-compact p {
  margin: 0;
  text-align: center;
}

.reagent-card-compact h3 {
  font-size: 24px;
  font-weight: 900;
}

.reagent-card-compact p {
  color: #bff1ff;
  font-size: 16px;
  font-weight: 900;
}

.chem-console {
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 12px;
}

.chem-phase {
  width: max-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(125, 255, 215, 0.16);
  color: #7dffd7;
  font-size: 15px;
  font-weight: 900;
}

.chem-console label {
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.chem-input-line {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
}

.chem-input-line input,
.final-answer-line input {
  width: 100%;
  height: 54px;
  border: 2px solid rgba(113, 225, 255, 0.48);
  border-radius: 8px;
  background: rgba(1, 8, 16, 0.94);
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.chem-input-line input:focus,
.final-answer-line input:focus {
  border-color: rgba(125, 255, 215, 0.9);
  box-shadow: 0 0 18px rgba(125, 255, 215, 0.24);
}

.chem-blue-btn,
.chem-green-btn {
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.chem-blue-btn {
  background: linear-gradient(180deg, #4fd6ff, #277bec);
  box-shadow: 0 10px 22px rgba(39, 123, 236, 0.28);
}

.chem-green-btn {
  background: linear-gradient(180deg, #67f4c2, #16a97e);
  box-shadow: 0 10px 22px rgba(22, 169, 126, 0.28);
}

.chem-blue-btn:disabled,
.chem-green-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.chem-equations {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}

.chem-feedback {
  min-height: 46px;
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.chem-feedback.info { color: #ffe875; }
.chem-feedback.good { color: #7dffd7; }
.chem-feedback.bad { color: #ff8c99; }

.main-beaker-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 164px;
  align-items: center;
  gap: 14px;
}

.main-beaker-copy h3,
.main-beaker-copy span {
  margin: 0;
}

.main-beaker-copy h3 {
  color: #fff;
  font-size: 30px;
  font-weight: 900;
}

.main-beaker-copy strong {
  display: block;
  margin: 10px 0;
  color: #7dffd7;
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
}

.main-beaker-copy span {
  color: #bff1ff;
  font-size: 16px;
  font-weight: 800;
}

.chem-status-card {
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 20px;
}

.chem-status-card h3,
.chem-status-card p {
  margin: 0;
}

.chem-status-card h3 {
  color: #ffffff;
  font-size: 26px;
  font-weight: 900;
}

.chem-status-card p {
  color: #dff9ff;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 800;
}

.chem-progress-dots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.chem-progress-dots span {
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(124, 224, 255, 0.28);
}

.chem-progress-dots span.filled {
  background: linear-gradient(90deg, #55dcff, #7dffd7);
  box-shadow: 0 0 14px rgba(125, 255, 215, 0.3);
}

.final-mix-card {
  padding: 14px;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
}

.final-mix-card.is-locked {
  opacity: 0.78;
}

.final-mix-card.success {
  border-color: rgba(125, 255, 215, 0.86);
  box-shadow:
    0 0 36px rgba(125, 255, 215, 0.34),
    inset 0 0 26px rgba(125, 255, 215, 0.12);
}

.chem-lock {
  position: relative;
  grid-row: 1 / span 2;
  width: 60px;
  height: 70px;
}

.chem-lock-shackle {
  position: absolute;
  left: 13px;
  top: 0;
  width: 34px;
  height: 34px;
  border: 7px solid #dff9ff;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  transition: transform 0.24s ease;
}

.chem-lock-body {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 52px;
  height: 44px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe977, #ec9729);
  box-shadow: 0 0 18px rgba(255, 232, 119, 0.32);
}

.chem-lock.open .chem-lock-shackle {
  transform: translateX(15px) rotate(18deg);
}

.final-mix-copy h3,
.final-mix-copy p,
.final-locked-note {
  margin: 0;
}

.final-mix-copy h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.final-mix-copy p,
.final-locked-note {
  color: #bff1ff;
  font-size: 15px;
  font-weight: 800;
}

.final-answer-line {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 22px 1fr 132px;
  gap: 8px;
  align-items: center;
}

.final-answer-line span {
  color: white;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}

.final-mix-card .chem-green-btn {
  grid-column: 1 / -1;
}

.chem-vessel {
  width: 112px;
  height: 176px;
}

.chem-vessel.main {
  width: 154px;
  height: 238px;
}

.chem-glass {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 4px solid rgba(213, 252, 255, 0.72);
  border-top: 0;
  border-radius: 0 0 34px 34px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 24% 76%, rgba(255, 255, 255, 0.11)),
    rgba(6, 24, 41, 0.76);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.12),
    0 0 22px rgba(91, 219, 255, 0.22);
}

.chem-vessel.main .chem-glass {
  border-top: 4px solid rgba(213, 252, 255, 0.72);
  border-radius: 16px 16px 42px 42px;
}

.chem-vessel.faint {
  opacity: 0.38;
}

.chem-cell {
  flex: 1 1 0;
  border-top: 1px solid rgba(221, 254, 255, 0.5);
  background: transparent;
}

.chem-cell:first-child {
  border-top: 0;
}

.chem-cell.blue {
  background: linear-gradient(180deg, rgba(121, 232, 255, 0.96), rgba(37, 118, 255, 0.92));
  box-shadow: inset 0 0 18px rgba(159, 243, 255, 0.34);
}

.chem-cell.yellow {
  background: linear-gradient(180deg, rgba(255, 243, 118, 0.98), rgba(244, 170, 35, 0.94));
  box-shadow: inset 0 0 18px rgba(255, 249, 170, 0.34);
}

.chem-success-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 18px 36px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgba(3, 15, 29, 0.92);
  border: 2px solid rgba(125, 255, 215, 0.9);
  color: white;
  font-size: 38px;
  font-weight: 900;
  box-shadow: 0 0 48px rgba(125, 255, 215, 0.44);
  animation: scienceSuccessPulse 0.85s ease-out;
  pointer-events: none;
}

.chem-drop {
  position: absolute;
  top: 315px;
  font-size: 26px;
  font-weight: 900;
  z-index: 4;
  pointer-events: none;
  animation: chemDropLeft 0.7s ease-out forwards;
}

.chem-drop.from-left {
  left: 170px;
  animation-name: chemDropLeft;
}

.chem-drop.from-right {
  right: 170px;
  animation-name: chemDropRight;
}

.chem-drop.blue { color: #7eeaff; }
.chem-drop.yellow { color: #ffe875; }

.chem-laser {
  position: absolute;
  left: 0;
  right: 0;
  top: 292px;
  height: 5px;
  background: linear-gradient(90deg, transparent, #8ffff3, #7ca4ff, transparent);
  box-shadow: 0 0 28px rgba(143, 255, 243, 0.9);
  animation: gridLaserSweep 0.9s ease-out forwards;
  pointer-events: none;
}

.gym-stage-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ecfbff;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(91, 219, 255, 0.08) 18.2% 18.5%, transparent 18.8% 50%, rgba(91, 219, 255, 0.08) 50.2% 50.5%, transparent 50.8%),
    radial-gradient(circle at 50% 35%, rgba(125, 255, 215, 0.16), transparent 28%),
    linear-gradient(180deg, #071521, #02070c);
}

.gym-stage-card {
  width: 760px;
  padding: 48px;
  text-align: center;
  border: 2px solid rgba(93, 219, 255, 0.44);
  border-radius: 12px;
  background: rgba(3, 14, 27, 0.82);
  box-shadow: 0 0 34px rgba(54, 207, 255, 0.18);
}

.gym-stage-card p {
  margin: 0 0 10px;
  color: #7df3ff;
  font-size: 20px;
  font-weight: 900;
}

.gym-stage-card h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 54px;
  font-weight: 900;
}

.gym-stage-card span {
  display: block;
  margin-bottom: 28px;
  color: #dff9ff;
  font-size: 22px;
  font-weight: 800;
}

.gym-stage-card button {
  min-width: 120px;
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #4fd6ff, #277bec);
  color: white;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

@keyframes chemDropLeft {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(140px, 250px) scale(1.15); }
}

@keyframes chemDropRight {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-140px, 250px) scale(1.15); }
}

/* =========================
   STAGE 3 SCIENCE ROOM
========================= */

body.stage3-ui-active {
  --eq-frame-width: 1920px;
  --eq-frame-height: 1080px;
  --eq-shell-gap: clamp(18px, calc(var(--eq-frame-width) * 0.018), 28px);
  --eq-home-pill-width: 68px;
}

.stage3-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  color: #eef8ff;
  background: #030912;
}

.stage3-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 12, 22, 0.98) 0 15%, transparent 15% 85%, rgba(6, 12, 22, 0.98) 85% 100%),
    linear-gradient(180deg, #0d1925 0%, #142b37 28%, #07121c 29%, #030912 100%);
}

.stage3-bg::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(121, 94, 255, 0.18), transparent 28%),
    repeating-linear-gradient(90deg, rgba(132, 225, 255, 0.08) 0 3px, transparent 3px 150px),
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(255, 255, 255, 0.05) 119px 121px);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  opacity: 0.86;
}

.stage3-topbar {
  z-index: 52;
}

.stage3-play-layer {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: grid;
  grid-template-rows: 106px 1fr;
  gap: 12px;
  padding: 94px 218px 150px 76px;
  box-sizing: border-box;
  pointer-events: auto;
}

.science-title-card {
  min-height: 0;
  padding: 16px 22px;
  border-radius: 8px;
  background: rgba(5, 18, 31, 0.82);
  border: 1px solid rgba(114, 226, 255, 0.38);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28), inset 0 0 26px rgba(62, 174, 255, 0.06);
}

.science-title-card p,
.science-title-card h2,
.science-title-card span {
  margin: 0;
}

.science-title-card p {
  color: #8bf3ff;
  font-size: 17px;
  font-weight: 950;
}

.science-title-card h2 {
  margin-top: 2px;
  color: #fff;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
}

.science-title-card span {
  display: block;
  margin-top: 6px;
  color: #c8eefb;
  font-size: 17px;
  font-weight: 850;
}

.science-game-board {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 14px;
}

.science-reagent-panel,
.science-center-panel,
.grid-control-card,
.main-beaker-panel,
.science-feedback-box,
.science-final-panel {
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 220, 255, 0.1), transparent 54%),
    rgba(5, 18, 31, 0.84);
  border: 1px solid rgba(114, 226, 255, 0.34);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.25), inset 0 0 26px rgba(62, 174, 255, 0.06);
}

.science-reagent-panel {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: #eef8ff;
  cursor: pointer;
  user-select: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.science-reagent-panel.active {
  border-color: rgba(127, 255, 224, 0.84);
  box-shadow: 0 0 24px rgba(127, 255, 224, 0.28), inset 0 0 26px rgba(127, 255, 224, 0.08);
}

.science-reagent-panel.warning {
  border-color: rgba(255, 115, 130, 0.88);
  box-shadow: 0 0 24px rgba(255, 84, 112, 0.28), inset 0 0 26px rgba(255, 84, 112, 0.08);
}

.science-reagent-panel:hover {
  transform: translateY(-2px);
}

.science-reagent-panel h3,
.science-reagent-panel p {
  margin: 0;
  text-align: center;
}

.science-reagent-panel h3 {
  color: #ffffff;
  font-size: 23px;
  font-weight: 950;
}

.science-reagent-panel p {
  color: #c8eefb;
  font-size: 17px;
  font-weight: 900;
}

.science-center-panel {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 250px;
  grid-template-rows: 168px 1fr 122px;
  gap: 12px;
}

.grid-control-card {
  grid-column: 1 / 2;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.grid-control-card h3,
.grid-control-card p {
  margin: 0;
}

.grid-control-card h3 {
  color: #ffffff;
  font-size: 25px;
  font-weight: 950;
}

.grid-control-card p {
  color: #c8eefb;
  font-size: 15px;
  font-weight: 850;
}

.grid-stepper {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 10px;
  align-items: center;
}

.grid-stepper button,
.science-primary-btn,
.science-success-btn {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 950;
  cursor: pointer;
  background: linear-gradient(180deg, #5de4ff, #2576ef);
  box-shadow: 0 12px 24px rgba(0, 83, 190, 0.34), 0 0 18px rgba(81, 220, 255, 0.24);
}

.grid-stepper button {
  font-size: 26px;
  line-height: 1;
}

.grid-stepper strong {
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(127, 220, 255, 0.24);
  font-size: 19px;
  font-weight: 950;
}

.science-primary-btn:disabled,
.grid-stepper button:disabled {
  opacity: 0.42;
  cursor: default;
}

.science-equation {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #7dffd7;
  font-size: 17px;
  font-weight: 950;
}

.main-beaker-panel {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 10px;
}

.main-beaker-panel.success {
  border-color: rgba(127, 255, 224, 0.88);
  box-shadow: 0 0 34px rgba(127, 255, 224, 0.34), inset 0 0 26px rgba(127, 255, 224, 0.1);
}

.main-beaker-header {
  text-align: center;
}

.main-beaker-header h3,
.main-beaker-header strong {
  display: block;
  margin: 0;
}

.main-beaker-header h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 950;
}

.main-beaker-header strong {
  margin-top: 5px;
  color: #7dffd7;
  font-size: 22px;
  font-weight: 950;
}

.science-feedback-box {
  grid-column: 1 / 2;
  padding: 14px 16px;
  display: grid;
  align-items: center;
  color: #ffe875;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
}

.science-feedback-box.good {
  color: #7dffd7;
}

.science-feedback-box.bad {
  color: #ff8c99;
}

.science-final-panel {
  grid-column: 1 / 3;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 14px;
}

.science-final-panel.success {
  border-color: rgba(127, 255, 224, 0.9);
}

.science-final-panel h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 950;
}

.science-answer-row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 140px;
  gap: 8px;
  align-items: center;
}

.science-answer-row input {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(127, 220, 255, 0.46);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(1, 9, 18, 0.92);
  font-size: 23px;
  font-weight: 950;
  text-align: center;
  outline: none;
}

.science-answer-row input:focus {
  border-color: rgba(127, 255, 224, 0.86);
  box-shadow: 0 0 16px rgba(127, 255, 224, 0.22);
}

.science-answer-row b {
  color: #ffffff;
  font-size: 25px;
  text-align: center;
}

.science-success-btn {
  margin-top: 10px;
  width: 190px;
  background: linear-gradient(180deg, #74f1bd, #14a26f);
}

.science-lock {
  position: relative;
  width: 58px;
  height: 68px;
}

.science-lock span {
  position: absolute;
  left: 12px;
  top: 0;
  width: 34px;
  height: 34px;
  border: 7px solid #dff9ff;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  transition: transform 0.22s ease;
}

.science-lock i {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 50px;
  height: 42px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe977, #ec9729);
  box-shadow: 0 0 18px rgba(255, 232, 119, 0.32);
}

.science-lock.open span {
  transform: translateX(14px) rotate(18deg);
}

.science-vessel-ui {
  width: 104px;
  height: 192px;
}

.science-vessel-ui.main {
  width: 170px;
  height: 260px;
}

.science-vessel-glass {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 4px solid rgba(213, 252, 255, 0.75);
  border-top: 0;
  border-radius: 0 0 34px 34px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 24% 76%, rgba(255, 255, 255, 0.11)),
    rgba(6, 24, 41, 0.76);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.12),
    0 0 22px rgba(91, 219, 255, 0.22);
}

.science-vessel-ui.main .science-vessel-glass {
  border-top: 4px solid rgba(213, 252, 255, 0.75);
  border-radius: 16px 16px 42px 42px;
}

.science-vessel-ui.faint {
  opacity: 0.38;
}

.science-vessel-cell {
  flex: 1 1 0;
  border-top: 1px solid rgba(221, 254, 255, 0.58);
  background: transparent;
}

.science-vessel-cell:first-child {
  border-top: 0;
}

.science-vessel-cell.blue {
  background: linear-gradient(180deg, rgba(121, 232, 255, 0.96), rgba(37, 118, 255, 0.92));
  box-shadow: inset 0 0 18px rgba(159, 243, 255, 0.34);
}

.science-vessel-cell.yellow {
  background: linear-gradient(180deg, rgba(255, 243, 118, 0.98), rgba(244, 170, 35, 0.94));
  box-shadow: inset 0 0 18px rgba(255, 249, 170, 0.34);
}

.science-drop {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 8;
  color: #fff;
  font-size: 26px;
  font-weight: 950;
  pointer-events: none;
  animation: scienceDrop 0.72s ease-out forwards;
}

.science-drop.blue {
  color: #7eeaff;
}

.science-drop.yellow {
  color: #ffe875;
}

.pulse-wrong {
  animation: scienceShake 0.32s ease;
}

@keyframes scienceDrop {
  0% {
    opacity: 0;
    transform: translateY(-120px) scale(0.75);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(120px) scale(1.15);
  }
}

/* =========================
   STAGE 3 FRACTION ADDITION RUSH
========================= */

.science-main-area.science-rush-main {
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
  padding: 72px 42px 20px;
}

.science-rush-board {
  position: relative;
  box-sizing: border-box;
  width: min(1120px, 100%);
  min-height: 0;
  justify-self: center;
  display: grid;
  grid-template-rows: auto 12px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 20px 26px;
  overflow: hidden;
  border: 1px solid rgba(101, 238, 255, 0.46);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(60, 242, 255, 0.11), transparent 42%),
    linear-gradient(145deg, rgba(4, 20, 33, 0.94), rgba(2, 10, 19, 0.92));
  box-shadow:
    0 0 44px rgba(0, 213, 255, 0.18),
    inset 0 0 34px rgba(83, 246, 255, 0.06);
  transition: filter 220ms ease, opacity 220ms ease;
}

.science-rush-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(89, 255, 240, 0.05) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgba(89, 255, 240, 0.04) 50%, transparent 50.2%);
  background-size: 72px 72px;
}

.science-rush-board.result-dimmed {
  filter: brightness(0.46) saturate(0.72) blur(1px);
}

.rush-status-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rush-status-card {
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(119, 255, 241, 0.26);
  border-radius: 16px;
  background: rgba(2, 13, 23, 0.8);
  box-shadow: inset 0 0 18px rgba(89, 255, 240, 0.04);
}

.rush-status-card span {
  color: #a8dfe8;
  font-size: 16px;
  font-weight: 850;
}

.rush-status-card strong {
  color: #83fff3;
  font-size: 27px;
  font-weight: 1000;
  text-shadow: 0 0 14px rgba(91, 255, 238, 0.54);
}

.rush-timer-track,
.rush-overheat-track {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(122, 235, 255, 0.28);
  border-radius: 999px;
  background: rgba(1, 8, 15, 0.86);
  box-shadow: inset 0 0 13px rgba(0, 0, 0, 0.72);
}

.rush-timer-track span,
.rush-overheat-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 70ms linear, background 180ms ease, box-shadow 180ms ease;
}

.rush-timer-track span {
  background: linear-gradient(90deg, #55ffe8, #80ff9e);
  box-shadow: 0 0 18px rgba(88, 255, 224, 0.62);
}

.rush-timer-track span.warning {
  background: linear-gradient(90deg, #ffe566, #ffb13d);
  box-shadow: 0 0 18px rgba(255, 210, 75, 0.62);
}

.rush-timer-track span.danger {
  background: linear-gradient(90deg, #ff7b64, #ff3d63);
  box-shadow: 0 0 20px rgba(255, 62, 96, 0.72);
}

.rush-reactor {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 12px 34px 16px;
  border: 1px solid rgba(115, 239, 255, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(39, 222, 255, 0.1), transparent 50%),
    rgba(2, 12, 21, 0.7);
  box-shadow: inset 0 0 40px rgba(65, 240, 255, 0.04);
}

.rush-progress {
  position: absolute;
  right: 22px;
  top: 18px;
  min-width: 78px;
  padding: 7px 13px;
  border: 1px solid rgba(116, 255, 237, 0.28);
  border-radius: 999px;
  color: #b9f7ff;
  background: rgba(3, 17, 28, 0.82);
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

.rush-kicker {
  margin: 0;
  color: #73fff0;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.rush-reactor h2 {
  margin: 0;
  color: #ffffff;
  font-size: 44px;
  font-weight: 1000;
  text-shadow:
    0 0 18px rgba(101, 255, 240, 0.44),
    0 0 42px rgba(45, 170, 255, 0.28);
}

.rush-problem {
  min-height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #ffffff;
  font-size: 67px;
  font-weight: 1000;
  text-shadow: 0 0 22px rgba(110, 244, 255, 0.48);
}

.rush-problem.flash {
  animation: rushProblemFlash 420ms ease-out;
}

.rush-problem .fraction,
.rush-problem .textbook-math {
  min-width: 70px;
}

.rush-choice-btn .textbook-math {
  font-size: 48px;
  font-weight: 1000;
}

.rush-operation,
.rush-question-mark {
  color: #bffcff;
  line-height: 1;
}

.rush-question-mark {
  color: #ffe96b;
  text-shadow: 0 0 20px rgba(255, 226, 80, 0.65);
}

.rush-choice-grid {
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.rush-choice-btn {
  position: relative;
  min-height: 126px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(103, 229, 255, 0.46);
  border-radius: 20px;
  color: #f5feff;
  background:
    linear-gradient(180deg, rgba(11, 38, 57, 0.96), rgba(4, 20, 33, 0.96));
  box-shadow:
    0 0 22px rgba(0, 205, 255, 0.12),
    inset 0 0 22px rgba(112, 250, 255, 0.04);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.rush-choice-btn:hover:not(:disabled),
.rush-choice-btn:focus-visible:not(:disabled) {
  transform: translateY(-4px);
  border-color: rgba(112, 255, 236, 0.92);
  box-shadow:
    0 0 30px rgba(73, 255, 231, 0.3),
    inset 0 0 24px rgba(112, 250, 255, 0.08);
  outline: none;
}

.rush-choice-btn:disabled {
  cursor: default;
}

.rush-choice-btn .fraction,
.rush-choice-btn .textbook-math {
  font-size: 48px;
  font-weight: 1000;
}

.rush-choice-key {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 248, 255, 0.34);
  border-radius: 9px;
  color: #bffcff;
  background: rgba(2, 13, 23, 0.88);
  font-size: 17px;
  font-weight: 950;
}

.rush-choice-btn.correct,
.rush-choice-btn.reveal {
  border-color: rgba(117, 255, 169, 0.96);
  background: linear-gradient(180deg, rgba(20, 82, 67, 0.98), rgba(4, 39, 35, 0.98));
  box-shadow:
    0 0 36px rgba(88, 255, 174, 0.5),
    inset 0 0 28px rgba(124, 255, 194, 0.12);
}

.rush-choice-btn.correct {
  animation: rushCorrectGlow 520ms ease-out;
}

.rush-choice-btn.wrong {
  border-color: rgba(255, 103, 125, 0.98);
  background: linear-gradient(180deg, rgba(88, 25, 42, 0.98), rgba(42, 8, 18, 0.98));
  box-shadow:
    0 0 34px rgba(255, 67, 101, 0.48),
    inset 0 0 26px rgba(255, 111, 133, 0.1);
  animation: rushWrongShake 380ms ease;
}

.rush-feedback {
  min-height: 28px;
  margin: 0;
  color: #d8faff;
  font-size: 19px;
  font-weight: 900;
  text-align: center;
  word-break: keep-all;
}

.rush-combo-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  color: #ffe96b;
  font-size: 36px;
  font-weight: 1000;
  text-shadow:
    0 0 16px rgba(255, 229, 91, 0.92),
    0 0 34px rgba(255, 190, 48, 0.56);
  opacity: 0;
  pointer-events: none;
}

.rush-combo-pop.show {
  animation: rushComboPop 680ms ease-out;
}

.rush-overheat-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.rush-overheat-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c3edf4;
  font-size: 17px;
  font-weight: 900;
}

.rush-overheat-copy strong {
  color: #ffbd75;
  font-size: 18px;
  text-shadow: 0 0 12px rgba(255, 151, 82, 0.42);
}

.rush-overheat-track {
  height: 18px;
}

.rush-overheat-track span {
  background: linear-gradient(90deg, #68dbff, #60ffe4);
  box-shadow: 0 0 18px rgba(89, 244, 255, 0.54);
}

.rush-overheat-track span.warning {
  background: linear-gradient(90deg, #ffd45f, #ff9b45);
  box-shadow: 0 0 18px rgba(255, 184, 73, 0.58);
}

.rush-overheat-track span.danger {
  background: linear-gradient(90deg, #ff9b5f, #ff395d);
  box-shadow: 0 0 22px rgba(255, 54, 88, 0.72);
}

.rush-overheat-track.shake {
  animation: rushGaugeShake 420ms ease;
}

.science-next-btn.rush-next-btn {
  min-height: 46px;
  justify-self: center;
}

.rush-result {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 48%;
  width: min(650px, calc(100% - 120px));
  padding: 34px 42px;
  border: 1px solid rgba(122, 255, 218, 0.86);
  border-radius: 24px;
  color: #efffff;
  background:
    radial-gradient(circle at 50% 0, rgba(93, 255, 221, 0.16), transparent 45%),
    rgba(1, 12, 21, 0.97);
  box-shadow:
    0 0 54px rgba(52, 255, 211, 0.32),
    inset 0 0 36px rgba(103, 255, 226, 0.07);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}

.rush-result[aria-hidden="true"] {
  display: none;
}

.rush-result.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  animation: rushResultOpen 320ms ease-out;
}

.rush-result p,
.rush-result h3 {
  margin: 0;
}

.rush-result #rush-result-kicker {
  color: #7dffe8;
  font-size: 18px;
  font-weight: 950;
}

.rush-result h3 {
  margin-top: 10px;
  color: #ffffff;
  font-size: 37px;
  font-weight: 1000;
  text-shadow: 0 0 18px rgba(107, 255, 226, 0.48);
}

.rush-result #rush-result-message {
  margin-top: 14px;
  color: #d5f7fb;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 850;
  word-break: keep-all;
}

.rush-result button {
  min-width: 180px;
  min-height: 50px;
  margin-top: 24px;
  border: 1px solid rgba(137, 255, 225, 0.9);
  border-radius: 15px;
  color: #06221d;
  background: linear-gradient(90deg, #54ffe7, #7eff9f);
  box-shadow: 0 0 24px rgba(84, 255, 231, 0.36);
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.science-lab-stage.rush-success .rush-reactor {
  animation: rushSuccessGlow 900ms ease-out forwards;
}

.science-lab-stage.rush-fail-flash::after {
  content: "";
  position: absolute;
  z-index: 11;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 24, 62, 0.34);
  animation: rushFailFlash 700ms ease-out forwards;
}

@keyframes rushProblemFlash {
  0% {
    opacity: 0.2;
    filter: brightness(2.2);
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes rushCorrectGlow {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.04);
  }
}

@keyframes rushWrongShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-9px);
  }
  50% {
    transform: translateX(8px);
  }
  75% {
    transform: translateX(-5px);
  }
}

@keyframes rushGaugeShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

@keyframes rushComboPop {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.72);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -48px) scale(1);
  }
}

@keyframes rushResultOpen {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes rushSuccessGlow {
  0% {
    box-shadow: inset 0 0 40px rgba(65, 240, 255, 0.04);
  }
  100% {
    border-color: rgba(126, 255, 159, 0.94);
    box-shadow:
      0 0 54px rgba(91, 255, 148, 0.38),
      inset 0 0 46px rgba(111, 255, 213, 0.12);
  }
}

@keyframes rushFailFlash {
  0%,
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .science-main-area.science-rush-main {
    padding: 76px 14px 18px;
  }

  .science-rush-board {
    min-height: 650px;
    padding: 16px;
  }

  .rush-choice-grid {
    gap: 10px;
  }

  .rush-choice-btn {
    min-height: 110px;
  }

  .rush-result {
    width: calc(100% - 32px);
  }
}

/* =========================
   STAGE 3-3: 시약 안정화 러시
========================= */

.s33-viewport {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #030912;
}

.s33-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  overflow: hidden;
}

.s33-stabilization-stage {
  --s33-safe-left: 124px;
  --s33-safe-right: 124px;
  --s33-safe-top: 64px;
  --s33-safe-bottom: 230px;
  --s33-support-clearance: 48px;
  --s33-main-width: 1152px;
  --s33-panel-width: 560px;
  --s33-panel-height: 536px;
  --s33-panel-gap: 32px;
  --s33-inner-max: 440px;
  --s33-main-top: 127px;
  --s33-hud-width: var(--s33-main-width);
  --s33-play-gauge-gap: 6px;
  --s33-frac-num-size: 30px;
  --s33-frac-line-w: 46px;
  --s33-frac-line-h: 3px;
  --s33-frac-gap: 3px;
  --s33-input-w: 56px;
  --s33-input-h: 34px;
  --s33-input-font: 26px;

  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  color: #eafcff;
}

.s33-stabilization-stage .s33-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
  align-content: start;
  justify-self: center;
  box-sizing: border-box;
  width: var(--s33-main-width);
  max-width: var(--s33-main-width);
  max-height: calc(1080px - var(--s33-main-top) - var(--s33-safe-bottom));
  margin: var(--s33-main-top) auto 0;
  padding: 0;
  overflow: hidden;
}

.s33-status-row {
  width: var(--s33-hud-width);
  max-width: var(--s33-hud-width);
  margin: 0 auto 22px;
}

.s33-status-bar {
  --s33-hud-meter-width: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  box-sizing: border-box;
  min-height: 86px;
  padding: 14px 22px;
  border-radius: 10px;
  border: 1px solid rgba(101, 238, 255, 0.36);
  background: rgba(4, 18, 30, 0.88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 0 28px rgba(55, 201, 255, 0.08);
}

.s33-hud-meters {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
  margin-right: 16px;
}

.s33-score-pack {
  margin-left: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-width: 100px;
  width: 100px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: right;
  box-sizing: border-box;
  white-space: nowrap;
  flex: 0 0 100px;
}

.s33-hud-gauge {
  display: grid;
  gap: 7px;
  width: var(--s33-hud-meter-width);
  min-width: var(--s33-hud-meter-width);
  max-width: var(--s33-hud-meter-width);
  flex: 0 0 var(--s33-hud-meter-width);
}

.s33-round-pack {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* s64 기준보다 약간 키움 */
.s33-round-label {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(200, 222, 240, 0.88);
  white-space: nowrap;
  line-height: 1;
}

.s33-round-label b {
  color: #9bedff;
  font-size: 18px;
  margin-left: 3px;
  font-weight: 900;
}

.s33-round-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.s33-round-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(38, 52, 72, 0.85);
  border: 1px solid rgba(70, 92, 118, 0.55);
  box-sizing: border-box;
}

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

.s33-round-dot.is-pending {
  background: rgba(32, 44, 62, 0.9);
  border-color: rgba(58, 78, 102, 0.5);
}

.s33-round-dot.is-done {
  background: rgba(95, 224, 255, 0.42);
  border-color: rgba(126, 224, 255, 0.62);
}

.s33-hud-gauge-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.s33-hud-gauge.stabilization .s33-hud-gauge-copy {
  color: #9ee9ff;
}

.s33-hud-gauge.stabilization .s33-hud-gauge-copy strong {
  color: #7dffe8;
  font-size: 15px;
  font-weight: 950;
}

.s33-hud-gauge.overheat .s33-hud-gauge-copy {
  color: #ffc9a8;
}

.s33-hud-gauge.overheat .s33-hud-gauge-copy strong {
  color: #ff8f5c;
  font-size: 15px;
  font-weight: 950;
}

.s33-time-pack .s33-hud-gauge-copy {
  color: #8eddf0;
}

.s33-time-pack .s33-hud-gauge-copy strong {
  color: #f4feff;
  font-size: 15px;
  font-weight: 950;
  min-width: 0;
  text-align: right;
}

.s33-score-pack span {
  color: #8eddf0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.s33-score-pack strong {
  color: #f4feff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.s33-status-row .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.s33-timer-track {
  position: relative;
  width: 100%;
  max-width: none;
  height: 14px;
  margin: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(6, 20, 34, 0.92);
  border: 1px solid rgba(120, 200, 230, 0.18);
}

.s33-timer-track span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #68dbff, #60ffe4);
  transition: width 80ms linear;
}

.s33-timer-track span.warning {
  background: linear-gradient(90deg, #ffd45f, #ff9b45);
}

.s33-timer-track span.danger {
  background: linear-gradient(90deg, #ff9b5f, #ff395d);
}

.s33-play-grid {
  display: grid;
  grid-template-columns: var(--s33-panel-width) var(--s33-panel-width);
  gap: var(--s33-panel-gap);
  justify-content: center;
  align-items: stretch;
  min-height: var(--s33-panel-height);
  margin-bottom: 0;
  overflow: hidden;
}

.s33-reactor-zone {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-content: stretch;
  justify-items: center;
  width: var(--s33-panel-width);
  max-width: var(--s33-panel-width);
  min-height: var(--s33-panel-height);
  height: var(--s33-panel-height);
  box-sizing: border-box;
  padding: 10px 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(114, 226, 255, 0.28);
  background:
    radial-gradient(circle at 50% 0, rgba(93, 255, 221, 0.06), transparent 42%),
    #030e18;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.s33-title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #f7feff;
}

.s33-problem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 260px);
  min-height: 108px;
  max-height: 168px;
  padding: 10px 12px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(114, 226, 255, 0.2);
}

.s33-problem-hero .s33-fraction-hero {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  width: 52px;
  min-width: 52px;
}

.s33-problem-hero .s33-fraction-hero .eq-fraction-num,
.s33-problem-hero .s33-fraction-hero .eq-fraction-den,
.s33-problem-hero .s33-fraction-hero .tm-num,
.s33-problem-hero .s33-fraction-hero .tm-den {
  display: block;
  width: 100%;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.s33-problem-hero .s33-fraction-hero .eq-fraction-line,
.s33-problem-hero .s33-fraction-hero .tm-bar {
  display: block;
  width: 48px;
  min-width: 48px;
  height: 3px;
  margin: 4px 0;
  border-radius: 2px;
  background: #9ef7ff;
  opacity: 1;
  box-shadow: 0 0 6px rgba(158, 247, 255, 0.28);
}

.s33-equation-symbol.hero,
.s33-equation-question.hero {
  font-size: 36px;
  font-weight: 900;
  color: #e8fbff;
}

.s33-problem-hint {
  margin: 0;
  width: min(100%, 260px);
  text-align: center;
  color: #8eddf0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  align-self: start;
  justify-self: center;
}

.s33-flow-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s33-flow-steps li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(114, 226, 255, 0.2);
  background: rgba(0, 0, 0, 0.18);
  color: #8ebfd0;
  font-size: 13px;
  font-weight: 800;
}

.s33-flow-steps li.active {
  color: #042018;
  border-color: rgba(126, 255, 198, 0.5);
  background: linear-gradient(180deg, #8dffe0, #49d7ff);
  box-shadow: 0 0 16px rgba(72, 255, 198, 0.24);
}

.s33-flow-steps li.done {
  color: #9ef7ff;
  border-color: rgba(114, 226, 255, 0.34);
}

.s33-step-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s33-step-track-flow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.s33-step-track-flow li {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(114, 226, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
  color: #6f9fb0;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
}

.s33-step-track-flow li:not(:first-child)::before {
  content: none;
  display: none;
}

.s33-step-track-flow li.active {
  color: #042018;
  border-color: rgba(126, 255, 198, 0.5);
  background: linear-gradient(180deg, #8dffe0, #49d7ff);
  box-shadow: 0 0 10px rgba(72, 255, 198, 0.2);
}

.s33-step-track-flow li.done {
  color: #9ef7ff;
  border-color: rgba(114, 226, 255, 0.28);
  background: rgba(8, 32, 44, 0.62);
}

.s33-step-track-flow li.pending {
  opacity: 0.42;
}

.s33-step-track li {
  padding: 6px 5px;
  border-radius: 8px;
  border: 1px solid rgba(114, 226, 255, 0.16);
  background: rgba(0, 0, 0, 0.16);
  color: #6f9fb0;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}

.s33-step-track li.active {
  color: #042018;
  border-color: rgba(126, 255, 198, 0.5);
  background: linear-gradient(180deg, #8dffe0, #49d7ff);
}

.s33-step-track li.done {
  color: #9ef7ff;
  border-color: rgba(114, 226, 255, 0.28);
  background: rgba(8, 32, 44, 0.62);
}

.s33-step-track li.pending {
  opacity: 0.45;
}

.s33-step-track-compact {
  gap: 4px;
}

.s33-step-track-compact li.active {
  box-shadow: 0 0 10px rgba(72, 255, 198, 0.2);
}

.s33-step-track.s33-step-track-flow {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  justify-content: center;
}

.s33-step-panel {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  justify-items: center;
  align-content: center;
  width: 100%;
  max-width: var(--s33-inner-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.s33-work-step-pour {
  justify-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 2px 0;
}

.s33-pour-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.s33-pour-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: 100%;
  max-width: 100%;
  padding: 4px 2px;
  box-sizing: border-box;
}

.s33-pour-equation-part {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.s33-pour-equation .s33-equation-symbol {
  color: #edf8fa;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.s33-mixed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.s33-mixed .tm-whole {
  color: #f7feff;
  font-size: var(--s33-frac-num-size, 30px);
  font-weight: 900;
  line-height: 1;
}

.s33-pour-title {
  display: none;
}

.s33-pour-capsule-wrap {
  display: flex;
  justify-content: center;
}

.s33-work-step-pour .s33-capsule-card-title {
  display: none;
}

.s33-work-step-pour .s33-capsule-card {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.s33-work-step-pour .s33-capsule-card-num,
.s33-work-step-pour .s33-capsule-card-den {
  font-size: 36px;
}

.s33-work-step-pour .s33-capsule-card-line {
  width: 52px;
  height: 3px;
}

.s33-factory-footer.is-pour-step {
  gap: 0;
}

.s33-factory-footer.is-pour-step .s33-capsule-display {
  display: none;
}

.s33-work-step {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: var(--s33-inner-max);
  margin: 0 auto;
  padding: 6px 4px;
  border-radius: 0;
  border: none;
  background: none;
  box-sizing: border-box;
}

.s33-work-step h4 {
  display: none;
}

.s33-input-label {
  color: #b7e8f4;
  font-size: 12px;
  font-weight: 800;
}

.s33-work-step-copy {
  margin: 0;
  color: #b7e8f4;
  font-size: 13px;
  line-height: 1.45;
}

.s33-work-step-hint {
  margin: -4px 0 0;
  color: #8eddf0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.s33-same-denom-note {
  color: #9ef7d8;
  font-weight: 800;
}

.s33-craft-label {
  color: #d7f5ff;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.s33-step-track.s33-step-track-flow {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  justify-content: center;
}

.s33-work-step-common {
  justify-items: center;
  gap: 8px;
  padding: 4px 0;
}

.s33-common-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s33-common-input-label {
  color: #d7f5ff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.s33-frac-input,
.s33-common-denom-input {
  box-sizing: border-box;
  width: var(--s33-input-w);
  min-width: var(--s33-input-w);
  min-height: var(--s33-input-h);
  max-height: var(--s33-input-h);
  padding: 0 4px;
  border: 1px solid rgba(126, 255, 198, 0.3);
  border-radius: 6px;
  background: rgba(2, 12, 18, 0.94);
  color: #f7feff;
  font-size: var(--s33-input-font);
  font-weight: 900;
  text-align: center;
  line-height: 1;
}

.s33-common-input-row .s33-factory-btn.common {
  min-width: 100px;
  max-width: 112px;
  min-height: 34px;
  max-height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

.s33-common-done-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(126, 255, 198, 0.35);
  background: rgba(72, 255, 198, 0.1);
  color: #9ef7d8;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.s33-denom-preview-board {
  display: grid;
  gap: 6px;
  width: min(100%, 220px);
  padding: 8px 4px 4px;
  border-radius: 0;
  border: none;
  background: none;
}

.s33-denom-preview-row {
  display: grid;
  grid-template-columns: 52px 20px 52px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
}

.s33-denom-preview-row .s33-fraction .eq-fraction-num,
.s33-denom-preview-row .s33-fraction .eq-fraction-den {
  font-size: 20px;
  font-weight: 900;
}

.s33-denom-preview-row .s33-fraction .eq-fraction-line {
  width: 32px;
  height: 3px;
  margin: 3px 0;
  background: #9ef7ff;
  border-radius: 2px;
}

.s33-preview-src,
.s33-preview-target {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s33-preview-fraction {
  display: inline-grid;
  justify-items: center;
  width: 52px;
  color: #eafcff;
}

.s33-preview-num,
.s33-preview-den {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.s33-preview-den {
  color: #9ef7ff;
}

.s33-preview-line {
  display: block;
  width: 36px;
  height: 3px;
  margin: 3px 0;
  border-radius: 2px;
  background: #9ef7ff;
}

.s33-preview-arrow {
  color: #7cecff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.s33-common-input-wrap {
  display: grid;
  gap: 6px;
  width: min(120px, 100%);
  justify-self: start;
}

.s33-common-input-wrap input {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(126, 255, 198, 0.3);
  border-radius: 6px;
  background: rgba(2, 12, 18, 0.94);
  color: #f7feff;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.s33-convert-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: var(--s33-inner-max);
  margin: 0 auto;
}

.s33-work-step-convert {
  justify-items: center;
  gap: 10px;
}

.s33-convert-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid rgba(114, 226, 255, 0.14);
  background: rgba(0, 0, 0, 0.08);
}

.s33-convert-flow-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  color: #eafcff;
}

.s33-mini-fraction {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  width: var(--s33-frac-line-w);
  gap: var(--s33-frac-gap);
}

.s33-mini-fraction-stack {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  width: var(--s33-input-w);
  gap: var(--s33-frac-gap);
}

.s33-mini-fraction .eq-fraction-num,
.s33-mini-fraction .eq-fraction-den,
.s33-mini-fraction .tm-num,
.s33-mini-fraction .tm-den,
.s33-mini-fraction-stack .s33-convert-target-den {
  font-size: var(--s33-frac-num-size);
  font-weight: 900;
  line-height: 1;
  color: #f7feff;
}

.s33-mini-fraction-stack .s33-convert-target-den {
  color: #9ef7ff;
}

.s33-mini-fraction .eq-fraction-line,
.s33-mini-fraction .tm-bar,
.s33-mini-fraction-stack .s33-convert-target-line {
  display: block;
  width: var(--s33-frac-line-w);
  height: var(--s33-frac-line-h);
  margin: 0;
  border-radius: 2px;
  background: #9ef7ff;
}

.s33-convert-arrow {
  color: #7cecff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 auto;
}

.s33-convert-target-num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: var(--s33-frac-num-size);
}

.s33-convert-num-input {
  box-sizing: border-box;
  width: var(--s33-input-w);
  min-width: var(--s33-input-w);
  min-height: var(--s33-input-h);
  max-height: var(--s33-input-h);
  padding: 0;
  border: 1px solid rgba(88, 196, 255, 0.34);
  border-radius: 6px;
  background: rgba(2, 12, 18, 0.94);
  color: #f7feff;
  font-size: var(--s33-input-font);
  font-weight: 900;
  text-align: center;
  line-height: 1;
}

.s33-factory-btn.convert {
  min-width: 108px;
  max-width: 120px;
  min-height: 34px;
  max-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.s33-work-step-craft {
  justify-items: center;
  gap: 0;
  max-width: var(--s33-inner-max);
  padding: 2px 0;
}

.s33-craft-flow {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: var(--s33-inner-max);
  margin: 0 auto;
}

.s33-craft-recap-block {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.s33-craft-recap-rows {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.s33-craft-recap-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s33-craft-denom-note {
  margin: 0;
  color: #8eddf0;
  font-size: 14px;
  font-weight: 800;
}

.s33-craft-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.s33-craft-capsule-col {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: start;
}

.s33-craft-calc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s33-craft-calc-equation {
  color: #f4feff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.s33-craft-calc-input {
  box-sizing: border-box;
  width: var(--s33-input-w);
  min-width: var(--s33-input-w);
  min-height: var(--s33-input-h);
  max-height: var(--s33-input-h);
  padding: 0 4px;
  border: 1px solid rgba(126, 255, 198, 0.3);
  border-radius: 6px;
  background: rgba(2, 12, 18, 0.94);
  color: #f7feff;
  font-size: var(--s33-input-font);
  font-weight: 900;
  text-align: center;
  line-height: 1;
}

.s33-craft-calc-row.is-mixed {
  align-items: center;
}

.s33-craft-calc-row.is-improper {
  align-items: center;
}

.s33-craft-improper-fraction {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  gap: var(--s33-frac-gap, 4px);
}

.s33-craft-improper-fraction .s33-craft-calc-input {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0;
}

.s33-craft-improper-fraction .s33-craft-mixed-line {
  width: 36px;
}

.s33-craft-mixed-flow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.s33-craft-mixed-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.s33-craft-mixed-fraction {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  gap: var(--s33-frac-gap, 4px);
}

.s33-craft-mixed-fraction .s33-craft-calc-input {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-left: 0;
  padding-right: 0;
}

.s33-craft-mixed-den-wrap {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  width: 36px;
  min-width: 36px;
  gap: var(--s33-frac-gap);
}

.s33-craft-mixed-line {
  display: block;
  width: var(--s33-frac-line-w, 48px);
  height: var(--s33-frac-line-h);
  border-radius: 2px;
  background: #9ef7ff;
}

.s33-craft-mixed-fraction .s33-craft-mixed-line {
  width: 36px;
}

.s33-craft-mixed-den {
  color: #9ef7ff;
  font-size: var(--s33-frac-num-size);
  font-weight: 900;
  line-height: 1;
}

.s33-craft-preview-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.s33-work-step-craft .s33-capsule-card {
  width: 140px;
  height: 105px;
  padding: 6px 8px;
  gap: 3px;
  border-color: rgba(126, 255, 198, 0.2);
  background: rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

.s33-work-step-craft .s33-capsule-card-num,
.s33-work-step-craft .s33-capsule-card-den {
  font-size: 32px;
}

.s33-work-step-craft .s33-capsule-card-line {
  width: 54px;
  height: 3px;
}

.s33-work-step-craft .s33-capsule-card-title {
  font-size: 10px;
  color: #9eddf0;
}

.s33-craft-summary {
  display: grid;
  gap: 8px;
  padding: 8px 0;
}

.s33-craft-summary-same {
  gap: 10px;
}

.s33-craft-summary-title,
.s33-craft-summary-denom {
  margin: 0;
  color: #9ef7ff;
  font-size: 13px;
  font-weight: 900;
}

.s33-craft-summary-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: #eafcff;
}

.s33-craft-summary-line .s33-fraction .eq-fraction-num,
.s33-craft-summary-line .s33-fraction .eq-fraction-den {
  font-size: 17px;
  font-weight: 900;
}

.s33-craft-summary-line .s33-fraction .eq-fraction-line {
  width: 28px;
  height: 2px;
  margin: 3px 0;
  background: #9ef7ff;
}

.s33-summary-arrow {
  color: #7cecff;
  font-size: 16px;
  font-weight: 900;
}

.s33-craft-calc {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
}

.s33-craft-calc-label {
  color: #9ef7ff;
  font-size: 12px;
  font-weight: 900;
}

.s33-craft-calc-equation {
  color: #f4feff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.s33-craft-calc-equation-hero {
  font-size: 24px;
}

.s33-craft-answer {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.s33-craft-answer-title {
  margin: 0;
  color: #d7f5ff;
  font-size: 12px;
  font-weight: 900;
}

.s33-craft-answer-fields {
  display: grid;
  gap: 6px;
  width: min(168px, 100%);
}

.s33-craft-field-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.s33-slot-label {
  color: #7cecff;
  font-size: 10px;
  font-weight: 800;
}

.s33-craft-slot {
  width: 100%;
  max-width: 68px;
  min-height: 34px;
  border: 1px solid rgba(126, 255, 198, 0.3);
  border-radius: 6px;
  background: rgba(2, 12, 18, 0.94);
  color: #f7feff;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.s33-craft-slot.bottom {
  border-color: rgba(88, 196, 255, 0.36);
}

.s33-craft-slot[readonly] {
  opacity: 0.82;
  background: rgba(2, 12, 18, 0.55);
  cursor: default;
}

.s33-craft-fraction-line {
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: #9ef7ff;
}

.s33-convert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(114, 226, 255, 0.18);
  background: rgba(0, 0, 0, 0.16);
  color: #eafcff;
  font-weight: 800;
  font-size: 13px;
}

.s33-convert-row .s33-fraction .eq-fraction-num,
.s33-convert-row .s33-fraction .eq-fraction-den {
  font-size: 20px;
}

.s33-convert-row input {
  width: 60px;
  min-height: 40px;
  border: 2px solid rgba(88, 196, 255, 0.4);
  border-radius: 8px;
  background: rgba(2, 12, 18, 0.94);
  color: #f7feff;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

.s33-convert-eq {
  font-size: 16px;
  font-weight: 900;
}

.s33-convert-den {
  font-size: 14px;
  font-weight: 900;
  color: #9ef7ff;
}

.s33-action-hint-compact {
  margin: 0;
  text-align: left;
  color: #b7e8f4;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  padding: 0;
  background: none;
  border: none;
}

.s33-beaker {
  justify-self: center;
  align-self: end;
  width: min(260px, 100%);
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-top: 0;
}

.s33-beaker-asset {
  --s33-beaker-base-width: 132px;
  --s33-beaker-base-height: 172px;
  --s33-beaker-scale: 1.8;
  --s33-beaker-liquid-mask-bottom: 24px;
  --s33-beaker-liquid-mask-width: 78%;
  --s33-beaker-liquid-mask-height: 62%;
  position: relative;
  width: calc(var(--s33-beaker-base-width) * var(--s33-beaker-scale));
  height: calc(var(--s33-beaker-base-height) * var(--s33-beaker-scale));
  transform-origin: bottom center;
  isolation: isolate;
  will-change: transform;
}

.s33-beaker-floor-shadow {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 72%;
  height: 12%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  filter: blur(9px);
  opacity: 0.7;
  transform: translate(-50%, 48%) scaleX(1);
  transform-origin: center;
  z-index: -1;
  pointer-events: none;
}

.s33-beaker-liquid-mask {
  position: absolute;
  left: 50%;
  bottom: var(--s33-beaker-liquid-mask-bottom);
  width: var(--s33-beaker-liquid-mask-width);
  height: var(--s33-beaker-liquid-mask-height);
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 0 0 34px 34px;
  z-index: 1;
  pointer-events: none;
}

.s33-beaker-bubble-mask {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 88%;
  height: 88%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.s33-bubbles-back {
  z-index: 0;
  opacity: 0.5;
  filter: blur(0.7px);
}

.s33-bubbles-front {
  z-index: 3;
}

.s33-beaker-liquid {
  position: absolute;
  left: 50%;
  bottom: 0;
  --liquid-width: 100%;
  --liquid-shift-x: 0px;
  --liquid-scale-x: 1;
  width: var(--liquid-width);
  height: 100%;
  transform: translateX(calc(-50% + var(--liquid-shift-x))) scaleX(var(--liquid-scale-x));
  object-fit: fill;
  object-position: center bottom;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform, filter, opacity;
}

.s33-beaker-asset.beaker-normal .s33-beaker-liquid {
  --liquid-width: 106%;
  --liquid-shift-x: 4px;
  --liquid-scale-x: 1.02;
}

.s33-beaker-asset.beaker-warning .s33-beaker-liquid,
.s33-beaker-asset.beaker-danger .s33-beaker-liquid {
  --liquid-width: 102%;
  --liquid-shift-x: 2px;
  --liquid-scale-x: 1;
  bottom: -6px;
}

.s33-beaker-asset.beaker-stable .s33-beaker-liquid {
  --liquid-width: 102%;
  --liquid-shift-x: 2px;
  --liquid-scale-x: 1;
}

.s33-beaker-bubbles {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 95%;
  height: 110%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.s33-bubbles-back .s33-beaker-bubbles {
  width: 88%;
  opacity: 0;
}

.s33-bubbles-front .s33-beaker-bubbles {
  width: 96%;
  opacity: 0;
}

.s33-liquid-surface {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 91%;
  height: 9%;
  border-radius: 50%;
  border-top: 2px solid rgba(255, 255, 255, 0.44);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  box-shadow: inset 0 4px 5px rgba(255, 255, 255, 0.1);
  opacity: 0.72;
  transform: translateX(-50%) scaleX(1) rotate(0deg);
  transform-origin: center;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
  animation: s33LiquidSurfaceIdle 3.8s ease-in-out infinite;
}

.s33-liquid-refraction {
  position: absolute;
  left: 29%;
  top: 16%;
  width: 16%;
  height: 68%;
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  filter: blur(1px);
  opacity: 0.46;
  transform: skewX(-8deg) translateX(0);
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
  animation: s33RefractionDrift 5.2s ease-in-out infinite;
}

.s33-beaker-stable-glow {
  display: none;
  position: absolute;
  left: 50%;
  top: 55%;
  width: 82%;
  height: 82%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

.s33-beaker-asset.beaker-normal .bubble-layer-a {
  animation: s33BubbleRiseBack 3.6s infinite linear;
}

.s33-beaker-asset.beaker-normal .bubble-layer-b {
  animation: s33BubbleRiseFront 4.2s infinite linear;
  animation-delay: -2.1s;
  opacity: 0.55;
}

.s33-beaker-asset.beaker-warning .bubble-layer-a {
  animation: s33BubbleRiseBack 2.4s infinite linear;
}

.s33-beaker-asset.beaker-warning .bubble-layer-b {
  animation: s33BubbleRiseFront 3.1s infinite linear;
  animation-delay: -1.4s;
  opacity: 0.68;
}

.s33-beaker-asset.beaker-danger .bubble-layer-a {
  animation: s33BubbleRiseBack 1.45s infinite linear;
}

.s33-beaker-asset.beaker-danger .bubble-layer-b {
  animation: s33BubbleRiseFront 1.85s infinite linear;
  animation-delay: -0.9s;
  opacity: 0.82;
}

.s33-beaker-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  opacity: 1;
}

.s33-glass-reflection {
  position: absolute;
  left: 24%;
  top: 18%;
  width: 11%;
  height: 58%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 54%, rgba(255, 255, 255, 0));
  filter: blur(0.7px);
  opacity: 0.52;
  transform: rotate(4deg) scaleY(1);
  transform-origin: top center;
  z-index: 6;
  pointer-events: none;
  will-change: transform, opacity;
  animation: s33GlassReflection 4.6s ease-in-out infinite;
}

.s33-beaker-danger-burst {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 92%;
  height: 82%;
  transform: translateX(-50%) scale(0.75);
  object-fit: contain;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.s33-beaker-effect,
.s33-beaker-effect.smoke-effect,
.s33-beaker-effect.burst-effect,
.s33-beaker-stable-glow {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

.s33-beaker-asset img.asset-missing {
  display: none !important;
}

.s33-beaker-asset.asset-failed .s33-beaker-glass,
.s33-beaker-asset.asset-failed .s33-beaker-liquid,
.s33-beaker-asset.asset-failed .s33-beaker-bubbles,
.s33-beaker-asset.asset-failed .s33-beaker-stable-glow,
.s33-beaker-asset.asset-failed .s33-beaker-danger-burst,
.s33-beaker-asset.asset-failed .s33-beaker-effect,
.s33-beaker-asset.asset-failed .s33-liquid-surface,
.s33-beaker-asset.asset-failed .s33-liquid-refraction,
.s33-beaker-asset.asset-failed .s33-glass-reflection {
  display: none;
}

.s33-beaker-fallback {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.s33-beaker-fallback.visible,
.s33-beaker-asset.asset-failed .s33-beaker-fallback {
  opacity: 1;
  visibility: visible;
}

.s33-beaker-fallback-glass {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(154, 240, 255, 0.68);
  border-top: none;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(8, 24, 38, 0.2), rgba(8, 24, 38, 0.72));
  overflow: hidden;
  box-shadow:
    inset 0 -14px 28px rgba(72, 214, 255, 0.16),
    0 0 20px rgba(72, 214, 255, 0.14);
}

.s33-beaker-fallback-liquid {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 68%;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(255, 118, 88, 0.72), rgba(255, 52, 96, 0.88));
  animation: s33LiquidPulse 2.4s ease-in-out infinite;
}

.s33-beaker-fallback-bubbles::before,
.s33-beaker-fallback-bubbles::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  animation: s33BubbleRise 2.8s ease-in infinite;
}

.s33-beaker-fallback-bubbles::before {
  width: 12px;
  height: 12px;
  left: 28%;
  bottom: 24%;
}

.s33-beaker-fallback-bubbles::after {
  width: 8px;
  height: 8px;
  right: 30%;
  bottom: 36%;
  animation-delay: 1.1s;
}

.s33-beaker-asset.beaker-normal .s33-liquid-red,
.s33-beaker-asset.beaker-warning .s33-liquid-red,
.s33-beaker-asset.beaker-danger .s33-liquid-red,
.s33-beaker-asset.beaker-stable .s33-liquid-red {
  opacity: 1;
}

.s33-beaker-asset .s33-liquid-orange,
.s33-beaker-asset .s33-liquid-blue {
  opacity: 0;
}

.s33-beaker-asset.beaker-normal .s33-beaker-bubbles,
.s33-beaker-asset.beaker-warning .s33-beaker-bubbles,
.s33-beaker-asset.beaker-danger .s33-beaker-bubbles {
  opacity: 1;
}

.s33-beaker-asset.beaker-normal .s33-beaker-liquid {
  animation: s33LiquidBodyIdle 4.8s ease-in-out infinite;
}

.s33-beaker.common-done .s33-liquid-surface {
  animation: s33LiquidSurfaceConfirm 1.15s ease-in-out infinite;
}

.s33-beaker.convert-done .s33-liquid-surface {
  animation: s33LiquidSurfaceReady 1.5s ease-in-out infinite;
}

.s33-beaker.waiting .s33-beaker-asset {
  animation: s33BeakerWaiting 1.8s ease-in-out infinite;
}

.s33-beaker.waiting .s33-liquid-surface {
  animation: s33LiquidSurfaceWaiting 1.25s ease-in-out infinite;
}

.s33-beaker-asset.beaker-warning .s33-liquid-surface {
  animation: s33LiquidSurfaceWarning 0.92s ease-in-out infinite;
}

.s33-beaker-asset.beaker-danger .s33-liquid-surface {
  animation: s33LiquidSurfaceDanger 0.48s ease-in-out infinite;
}

.s33-beaker-asset.beaker-danger {
  animation: s33BeakerDangerShake 2.4s ease-in-out infinite;
}

.s33-beaker-asset.beaker-stable .s33-liquid-orange,
.s33-beaker-asset.beaker-stable .s33-beaker-bubbles {
  opacity: 0;
  animation: none;
}

.s33-beaker-asset.beaker-stable .s33-beaker-liquid {
  animation: s33LiquidBodyStable 3.6s ease-in-out infinite;
}

.s33-beaker-asset.beaker-stable .s33-liquid-surface {
  opacity: 0.88;
  animation: s33LiquidSurfaceStable 3.2s ease-in-out infinite;
}

.s33-beaker-asset.beaker-stable .s33-liquid-refraction {
  opacity: 0.62;
  animation-duration: 6.2s;
}

.s33-beaker-asset.beaker-stable .s33-beaker-stable-glow {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.s33-beaker-asset.beaker-wrong .s33-beaker-danger-burst {
  animation: s33BurstInsideBeaker 420ms ease-out;
}

.s33-beaker-asset.beaker-wrong .s33-liquid-surface {
  animation: s33LiquidSurfaceWrong 420ms ease-out;
}

.s33-beaker-asset.beaker-wrong .s33-beaker-bubbles {
  animation-duration: 420ms;
}

#s33-beaker .s33-beaker-asset.is-pouring {
  animation: s33BeakerPour 720ms cubic-bezier(0.2, 0.78, 0.25, 1);
}

.s33-beaker-asset.is-pouring .s33-liquid-surface {
  animation: s33LiquidSurfacePour 720ms cubic-bezier(0.2, 0.78, 0.25, 1);
}

.s33-beaker-asset.is-pouring .s33-liquid-refraction {
  animation: s33RefractionPour 720ms ease-out;
}

.s33-beaker-asset.is-pouring .s33-glass-reflection {
  animation: s33GlassPour 720ms ease-out;
}

.s33-beaker-asset.is-pouring .s33-beaker-floor-shadow {
  animation: s33FloorShadowPour 720ms ease-out;
}

.s33-beaker-status {
  margin: 0;
  color: #ffd0a1;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.s33-beaker.stable .s33-beaker-status {
  color: #8ef7ff;
}

.s33-beaker.waiting .s33-beaker-status {
  color: #9ef7d8;
}

.s33-beaker.common-done .s33-beaker-status {
  color: #ffe2a8;
}

.s33-beaker.convert-done .s33-beaker-status {
  color: #b8ffe8;
}

.s33-beaker.warning .s33-beaker-status,
.s33-beaker.danger .s33-beaker-status {
  color: #ffb0b8;
}

.s33-beaker.shake .s33-beaker-asset {
  animation: rushWrongShake 420ms ease;
}

.s33-capsule-factory {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) 44px;
  gap: 10px;
  align-content: stretch;
  width: var(--s33-panel-width);
  max-width: var(--s33-panel-width);
  min-height: var(--s33-panel-height);
  height: var(--s33-panel-height);
  box-sizing: border-box;
  padding: 10px 12px 60px;
  border-radius: 14px;
  border: 1px solid rgba(126, 255, 198, 0.24);
  background: #041018;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.s33-factory-head {
  display: grid;
  gap: 2px;
}

.s33-factory-badge {
  display: inline-flex;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(88, 244, 255, 0.1);
  border: 1px solid rgba(88, 244, 255, 0.22);
  color: #8ef7ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.s33-factory-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #f4fffe;
  line-height: 1.25;
}

.s33-factory-head p,
.s33-factory-prompt {
  margin: 0;
  color: #b7e8f4;
  font-size: 14px;
  line-height: 1.5;
}

.s33-factory-prompt {
  color: #d7f5ff;
  font-size: 15px;
  font-weight: 800;
}

.s33-capsule-machine {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(114, 226, 255, 0.22);
  background: rgba(0, 0, 0, 0.2);
}

.s33-machine-frame {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(126, 255, 198, 0.24);
  background:
    radial-gradient(circle at 50% 0, rgba(126, 255, 198, 0.06), transparent 55%),
    rgba(0, 0, 0, 0.22);
}

.s33-machine-label {
  color: #7cecff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.s33-machine-label.bottom {
  margin-top: 0;
}

.s33-capsule-slot-input {
  width: min(104px, 100%);
  min-height: 42px;
  border: 2px solid rgba(126, 255, 198, 0.38);
  border-radius: 10px;
  background: rgba(2, 12, 18, 0.94);
  color: #f7feff;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(72, 255, 198, 0.06);
}

.s33-capsule-slot-input.top {
  border-color: rgba(126, 255, 198, 0.48);
}

.s33-capsule-slot-input.bottom {
  border-color: rgba(88, 196, 255, 0.48);
}

.s33-capsule-fraction-line {
  display: block;
  width: min(96px, 72%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #8ef7ff, transparent);
  box-shadow: 0 0 8px rgba(126, 255, 198, 0.28);
}

.s33-factory-btn {
  justify-self: center;
  width: auto;
  min-width: 112px;
  max-width: 156px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid rgba(114, 226, 255, 0.24);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-sizing: border-box;
}

.s33-factory-btn.craft {
  color: #042018;
  background: linear-gradient(180deg, #8dffe0, #49d7ff);
}

.s33-factory-btn.pour {
  color: #fff8f2;
  background: linear-gradient(180deg, #ff9d5d, #ff4d67);
  border-color: rgba(255, 120, 100, 0.45);
  box-shadow: 0 0 10px rgba(255, 90, 90, 0.18);
}

.s33-factory-btn:disabled {
  cursor: not-allowed;
}

.s33-factory-btn.craft:disabled {
  opacity: 0.45;
}

.s33-factory-btn.pour:disabled {
  opacity: 1;
  color: #8a9aa8;
  background: rgba(28, 36, 46, 0.72);
  border-color: rgba(80, 100, 120, 0.22);
  box-shadow: none;
}

.s33-factory-footer {
  display: grid;
  place-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--s33-inner-max);
  height: 44px;
  min-height: 44px;
  margin: 0 auto;
  align-self: end;
  box-sizing: border-box;
  position: relative;
}

.s33-factory-action {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.s33-factory-action .s33-factory-btn.craft-capsule,
.s33-factory-action .s33-factory-btn.pour {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 145px;
  height: 44px;
  min-width: 145px;
  max-width: 145px;
  min-height: 44px;
  max-height: 44px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  justify-self: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: auto;
}

/* display:grid 가 [hidden] 기본 숨김을 덮어쓰지 않게 강제 */
.s33-factory-action .s33-factory-btn.craft-capsule[hidden],
.s33-factory-action .s33-factory-btn.pour[hidden],
.s33-factory-action .s33-factory-btn.is-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.s33-capsule-display {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  width: 100%;
}

.s33-capsule-display.empty {
  display: none;
  border: none;
  background: none;
}

.s33-capsule-empty-text {
  display: none;
}

.s33-capsule-display.ready {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  max-height: none;
}

.s33-capsule-card {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 140px;
  height: 105px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(126, 255, 198, 0.22);
  background: rgba(0, 0, 0, 0.1);
  box-shadow: none;
  animation: none;
}

.s33-capsule-card.placeholder {
  opacity: 0.82;
}

.s33-capsule-card.ready {
  border-color: rgba(126, 255, 198, 0.38);
  background: rgba(72, 255, 198, 0.07);
}

.s33-capsule-card-title {
  display: none;
}

.s33-capsule-card-fraction {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 0;
}

.s33-capsule-card-num,
.s33-capsule-card-den {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #f7feff;
}

.s33-capsule-card-den {
  color: #9ef7ff;
}

.s33-capsule-card-line {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: #9ef7ff;
}

.s33-capsule-card-mixed {
  width: 152px;
}

.s33-capsule-card-mixed-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 58px;
}

.s33-capsule-card-whole {
  color: #f7feff;
  font-size: var(--s33-frac-num-size);
  font-weight: 900;
  line-height: 1;
  align-self: center;
}

.s33-work-step-craft .s33-capsule-card-mixed,
.s33-work-step-pour .s33-capsule-card-mixed {
  width: 152px;
}

.s33-work-step-craft .s33-capsule-card-whole,
.s33-work-step-pour .s33-capsule-card-whole {
  font-size: 30px;
}

.s33-work-step-craft .s33-capsule-card-mixed .s33-capsule-card-fraction,
.s33-work-step-pour .s33-capsule-card-mixed .s33-capsule-card-fraction {
  gap: 2px;
}

.s33-capsule-card.placeholder.mixed .s33-capsule-card-whole,
.s33-capsule-card.placeholder.mixed .s33-capsule-card-num {
  color: #7dffe8;
}

@keyframes s33CapsuleReady {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 0 28px rgba(72, 255, 198, 0.24);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 0 36px rgba(72, 255, 198, 0.38);
  }
}

.s33-gauge-row {
  display: none;
}

.s33-gauge-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.s33-status-bar .s33-gauge-track {
  height: 14px;
  background: rgba(6, 20, 34, 0.92);
  border: 1px solid rgba(120, 200, 230, 0.18);
}

.s33-gauge-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 220ms ease;
}

/* 안정화: 시원한 청록 (회복/성공) */
.s33-gauge-track.stabilization span {
  background: linear-gradient(90deg, #3ec8ff, #6ef7d8);
  box-shadow: 0 0 16px rgba(78, 230, 255, 0.45);
}

/* 폭주: 처음부터 따뜻한 주황 → 위험할수록 빨강 */
.s33-gauge-track.overheat span {
  background: linear-gradient(90deg, #ffb347, #ff7a3d);
  box-shadow: 0 0 16px rgba(255, 140, 70, 0.4);
}

.s33-gauge-track.overheat span.warning {
  background: linear-gradient(90deg, #ff9a3d, #ff5a3a);
  box-shadow: 0 0 16px rgba(255, 90, 60, 0.45);
}

.s33-gauge-track.overheat span.danger {
  background: linear-gradient(90deg, #ff6a45, #ff2d55);
  box-shadow: 0 0 18px rgba(255, 50, 80, 0.55);
}

.s33-gauge-track.shake {
  animation: rushGaugeShake 420ms ease;
}

.s33-result {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 48%;
  width: min(650px, calc(100% - 120px));
  padding: 34px 42px;
  border: 1px solid rgba(122, 255, 218, 0.86);
  border-radius: 24px;
  color: #efffff;
  background:
    radial-gradient(circle at 50% 0, rgba(93, 255, 221, 0.16), transparent 45%),
    rgba(1, 12, 21, 0.97);
  box-shadow:
    0 0 54px rgba(52, 255, 211, 0.32),
    inset 0 0 36px rgba(103, 255, 226, 0.07);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}

.s33-result.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 220ms ease, transform 220ms ease;
}

.s33-result button {
  margin-top: 18px;
  min-width: 140px;
  min-height: 44px;
  border: 1px solid rgba(114, 226, 255, 0.34);
  border-radius: 12px;
  background: linear-gradient(180deg, #8dffe0, #49d7ff);
  color: #042018;
  font-weight: 900;
  cursor: pointer;
}

@keyframes s33LiquidPulse {
  0%,
  100% {
    transform: scaleY(1);
    filter: brightness(1);
  }
  50% {
    transform: scaleY(1.04);
    filter: brightness(1.08);
  }
}

@keyframes s33StableGlow {
  0%,
  100% {
    box-shadow: inset 0 0 18px rgba(120, 255, 240, 0.18);
  }
  50% {
    box-shadow: inset 0 0 28px rgba(120, 255, 240, 0.34);
  }
}

@keyframes s33BubbleRise {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-120px);
    opacity: 0;
  }
}

@keyframes s33BubbleRise {
  0% {
    transform: translateX(-50%) translateY(12px) scale(0.95);
    opacity: 0.08;
  }
  25% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(-50%) translateY(-48px) scale(1.05);
    opacity: 0.05;
  }
}

@keyframes s33BeakerDangerShake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(1px, 1px);
  }
}

@keyframes s33BurstInsideBeaker {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
  }
  35% {
    opacity: 0.9;
    transform: translateX(-50%) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes s33BeakerGlowPulse {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(1);
  }
  50% {
    opacity: 0.62;
    filter: brightness(1.06);
  }
}

@keyframes s33BeakerBurstFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

@keyframes s33LiquidBodyIdle {
  0%,
  100% {
    transform: translateX(calc(-50% + var(--liquid-shift-x))) scaleX(var(--liquid-scale-x)) scaleY(1);
    filter: brightness(1);
  }
  50% {
    transform: translateX(calc(-50% + var(--liquid-shift-x) + 1px)) scaleX(var(--liquid-scale-x)) scaleY(1.012);
    filter: brightness(1.035);
  }
}

@keyframes s33LiquidBodyStable {
  0%,
  100% {
    transform: translateX(calc(-50% + var(--liquid-shift-x))) scaleX(var(--liquid-scale-x)) scaleY(1);
    filter: brightness(1.04);
  }
  50% {
    transform: translateX(calc(-50% + var(--liquid-shift-x))) scaleX(var(--liquid-scale-x)) scaleY(1.004);
    filter: brightness(1.08);
  }
}

@keyframes s33LiquidSurfaceIdle {
  0%,
  100% { transform: translateX(-50%) scaleX(0.985) rotate(-0.45deg); }
  50% { transform: translateX(-50%) scaleX(1.015) rotate(0.45deg); }
}

@keyframes s33LiquidSurfaceConfirm {
  0%,
  100% { transform: translateX(-50%) scaleX(0.99) rotate(-0.35deg); opacity: 0.72; }
  50% { transform: translateX(-50%) scaleX(1.025) rotate(0.35deg); opacity: 0.9; }
}

@keyframes s33LiquidSurfaceReady {
  0%,
  100% { transform: translateX(-50%) scaleX(0.98) translateY(0); }
  50% { transform: translateX(-50%) scaleX(1.02) translateY(-2px); }
}

@keyframes s33LiquidSurfaceWaiting {
  0%,
  100% { transform: translateX(-50%) scaleX(0.975) rotate(-0.7deg); }
  50% { transform: translateX(-50%) scaleX(1.025) rotate(0.7deg); }
}

@keyframes s33LiquidSurfaceWarning {
  0%,
  100% { transform: translateX(-50%) scaleX(0.96) rotate(-1.4deg) translateY(1px); }
  50% { transform: translateX(-50%) scaleX(1.04) rotate(1.4deg) translateY(-2px); }
}

@keyframes s33LiquidSurfaceDanger {
  0%,
  100% { transform: translateX(-50%) scaleX(0.93) rotate(-2.4deg) translateY(2px); }
  50% { transform: translateX(-50%) scaleX(1.07) rotate(2.4deg) translateY(-3px); }
}

@keyframes s33LiquidSurfaceStable {
  0%,
  100% { transform: translateX(-50%) scaleX(0.995) rotate(-0.12deg); }
  50% { transform: translateX(-50%) scaleX(1.005) rotate(0.12deg); }
}

@keyframes s33LiquidSurfaceWrong {
  0% { transform: translateX(-50%) scaleX(1) translateY(0); opacity: 0.75; }
  34% { transform: translateX(-50%) scaleX(0.86) rotate(-4deg) translateY(6px); opacity: 1; }
  68% { transform: translateX(-50%) scaleX(1.12) rotate(3deg) translateY(-7px); opacity: 0.92; }
  100% { transform: translateX(-50%) scaleX(1) translateY(0); opacity: 0.72; }
}

@keyframes s33BubbleRiseBack {
  0% { transform: translateX(-50%) translateY(14px) scale(0.88); opacity: 0.04; }
  24% { opacity: 0.42; }
  100% { transform: translateX(-50%) translateY(-42px) scale(1.02); opacity: 0; }
}

@keyframes s33BubbleRiseFront {
  0% { transform: translateX(-50%) translateY(18px) scale(0.94); opacity: 0.06; }
  20% { opacity: 0.72; }
  100% { transform: translateX(-50%) translateY(-58px) scale(1.1); opacity: 0; }
}

@keyframes s33RefractionDrift {
  0%,
  100% { transform: skewX(-8deg) translateX(-2px); opacity: 0.38; }
  50% { transform: skewX(-4deg) translateX(7px); opacity: 0.58; }
}

@keyframes s33GlassReflection {
  0%,
  100% { transform: rotate(4deg) scaleY(0.97); opacity: 0.46; }
  50% { transform: rotate(3deg) scaleY(1.025); opacity: 0.6; }
}

@keyframes s33BeakerWaiting {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes s33BeakerPour {
  0%,
  100% { transform: translateY(0) scale(1); }
  26% { transform: translateY(4px) scaleX(1.018) scaleY(0.982); }
  58% { transform: translateY(-5px) scaleX(0.99) scaleY(1.018); }
}

@keyframes s33LiquidSurfacePour {
  0%,
  100% { transform: translateX(-50%) scaleX(1) rotate(0deg) translateY(0); }
  24% { transform: translateX(-50%) scaleX(0.86) rotate(-3deg) translateY(6px); }
  58% { transform: translateX(-50%) scaleX(1.11) rotate(2.4deg) translateY(-7px); }
  82% { transform: translateX(-50%) scaleX(0.97) rotate(-0.8deg) translateY(1px); }
}

@keyframes s33RefractionPour {
  0%,
  100% { transform: skewX(-8deg) translateX(0); opacity: 0.46; }
  42% { transform: skewX(4deg) translateX(14px); opacity: 0.72; }
}

@keyframes s33GlassPour {
  0%,
  100% { transform: rotate(4deg) scaleY(1); opacity: 0.52; }
  48% { transform: rotate(2deg) scaleY(1.06); opacity: 0.72; }
}

@keyframes s33FloorShadowPour {
  0%,
  100% { transform: translate(-50%, 48%) scaleX(1); opacity: 0.7; }
  52% { transform: translate(-50%, 48%) scaleX(0.82); opacity: 0.48; }
}

@media (prefers-reduced-motion: reduce) {
  .s33-beaker-asset,
  .s33-beaker-asset *,
  .s33-beaker-fallback-liquid,
  .s33-beaker-fallback-bubbles::before,
  .s33-beaker-fallback-bubbles::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .s33-beaker-asset.is-pouring {
    transform: none;
  }
}

body.s33-fixed-viewport-active .s33-stabilization-stage {
  --s33-safe-left: 124px;
  --s33-safe-right: 124px;
  --s33-safe-top: 64px;
  --s33-safe-bottom: 230px;
  --s33-main-top: 127px;
  --s33-hud-width: var(--s33-main-width);
  --s33-panel-height: 536px;
  --s33-play-gauge-gap: 6px;
}

body.s33-fixed-viewport-active .s33-stabilization-stage .s33-main {
  width: 1152px;
  max-width: 1152px;
  max-height: calc(1080px - var(--s33-main-top) - var(--s33-safe-bottom));
  margin: var(--s33-main-top) auto 0;
}

body.s33-fixed-viewport-active .s33-play-grid {
  grid-template-columns: 560px 560px;
  gap: 32px;
  justify-content: center;
  min-height: 536px;
  margin-bottom: 6px;
}

body.s33-fixed-viewport-active .s33-status-row {
  width: var(--s33-hud-width);
  max-width: var(--s33-hud-width);
}

body.s33-fixed-viewport-active.stage3-ui-active .stage-chrome-inventory {
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
}

body.s33-fixed-viewport-active.stage3-ui-active #scene-root .stage-chrome-support-actions{
  display:none !important;
}

/* =========================
   STAGE 4-3 / 4-4: 체육관 마루판 복구
========================= */

.s4-puzzle-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #effcff;
  background: #06101a;
}

.s4-gym-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 10, 18, .06), rgba(3, 10, 18, .34)),
    url("../assets/images/s4.png") center / cover no-repeat;
  filter: saturate(.94) brightness(.9);
}

.s4-gym-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(103, 226, 255, .16) 50%, transparent 50.2%),
    radial-gradient(circle at 50% 42%, rgba(65, 224, 255, .17), transparent 42%);
}

.s4-puzzle-main {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 286px 780px;
  gap: 26px;
  width: 1092px;
  margin: 122px auto 0;
}

.s4-floor-board,
.s4-workbench {
  box-sizing: border-box;
  border: 1px solid rgba(119, 220, 255, .3);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 25, 38, .86), rgba(3, 13, 23, .82));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34), inset 0 0 42px rgba(72, 212, 255, .05);
}

.s4-floor-board {
  align-self: start;
  padding: 26px 24px;
}

.s4-floor-head {
  display: grid;
  gap: 7px;
  margin-bottom: 22px;
}

.s4-floor-head span,
.s4-problem-head > span {
  color: #75e9ff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12em;
}

.s4-floor-head strong { font-size: 22px; }

.s4-floor-track {
  display: grid;
  gap: 11px;
}

.s4-floor-track span {
  position: relative;
  display: grid;
  place-items: center;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  color: rgba(255, 255, 255, .38);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%),
    repeating-linear-gradient(90deg, #684427 0 38px, #4f311c 39px 42px);
  font-weight: 950;
}

.s4-floor-track span.repaired {
  color: #fff1d0;
  border-color: rgba(241, 188, 112, .64);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 48%),
    repeating-linear-gradient(90deg, #9a6637 0 38px, #714522 39px 42px);
  box-shadow: 0 0 22px rgba(222, 158, 79, .18);
}

.s4-floor-track span.active {
  border-color: rgba(255, 165, 91, .72);
  color: #ffd7a8;
  box-shadow: 0 0 24px rgba(255, 130, 70, .2);
}

.s4-floor-track span.installing { animation: s4FloorInstall 850ms ease both; }

.s4-workbench {
  min-height: 610px;
  padding: 22px 30px 26px;
}

.s4-problem-head {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(120, 218, 255, .14);
}

.s4-problem-head h1 {
  margin: 0;
  font-size: 29px;
  line-height: 1.2;
}

.s4-problem-expression,
.s4-final-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 58px;
  font-size: 25px;
  font-weight: 950;
}

.s4-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  justify-items: center;
  align-items: center;
  gap: 0;
  min-width: 0;
  vertical-align: middle;
  line-height: .82;
}

/* legacy strong/i — tm-frac 미사용 시에만; 신규 분수는 textbook-math tm-* */
.s4-fraction:not(.tm-frac) strong { min-width: .86em; padding: 0; font-size: .78em; line-height: .78; text-align: center; }
.s4-fraction:not(.tm-frac) i { width: .7em; min-width: .7em; height: 2px; border-radius: 2px; background: #bcefff; }
.s4-mixed { display: inline-flex; align-items: center; gap: .04em; white-space: nowrap; line-height: 1; }
.s4-mixed > strong { font-size: .95em; line-height: 1; }

.s4-problem-head.compact { gap: 4px; padding-bottom: 10px; }
.s4-problem-expression.compact { min-height: 44px; opacity: .78; transform: scale(.82); }

.s4-process-panel {
  display: grid;
  place-content: center;
  gap: 18px;
  min-height: 268px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 15px;
  background: rgba(0, 5, 11, .32);
}

.s4-process-guide,
.s4-piece-note {
  margin: 0;
  color: #c7e9f2;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
}

.s4-equation-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 270px;
  min-height: 112px;
  padding: 12px 24px;
  border: 1px solid rgba(95, 224, 255, .24);
  border-radius: 13px;
  background: rgba(13, 39, 53, .74);
}

.s4-equation-card.complete { border-color: rgba(104, 255, 205, .42); }
.s4-conversion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.s4-grid-badge,
.s4-method-label {
  justify-self: center;
  padding: 7px 15px;
  border-radius: 999px;
  color: #95ffe2;
  background: rgba(64, 255, 198, .1);
  border: 1px solid rgba(85, 255, 208, .24);
  font-weight: 950;
}

.s4-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  margin-top: 13px;
}

.s4-primary-btn,
.s4-choice-btn,
.s4-method-btn {
  border: 1px solid rgba(109, 226, 255, .4);
  border-radius: 11px;
  color: #f5feff;
  background: linear-gradient(180deg, #17698b, #0b405f);
  font-weight: 950;
  cursor: pointer;
}

.s4-primary-btn { min-width: 220px; min-height: 50px; padding: 0 24px; font-size: 17px; }
.s4-primary-btn.install { color: #06231c; background: linear-gradient(180deg, #98ffe4, #46d6c2); }
.s4-primary-btn.wood {
  color: #fff6df;
  border-color: rgba(239, 184, 110, .56);
  background: linear-gradient(180deg, #93613a, #5d381f);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 5px 16px rgba(39,20,8,.28);
}
.s4-choice-btn { min-width: 150px; min-height: 48px; font-size: 16px; }
.s4-primary-btn:hover,
.s4-choice-btn:hover,
.s4-method-btn:hover { filter: brightness(1.14); transform: translateY(-1px); }

.s4-action-row.two-methods { min-height: 132px; }
.s4-method-btn {
  display: grid;
  gap: 5px;
  width: 310px;
  min-height: 112px;
  padding: 15px 20px;
  text-align: left;
}
.s4-method-btn span { color: #79eaff; font-size: 12px; }
.s4-method-btn strong { font-size: 20px; }
.s4-method-btn small { color: #c5e4ec; font-size: 13px; }
.s4-method-btn.pieces { background: linear-gradient(180deg, #28646c, #16464e); }

.s4-process-panel.method-progress { align-content: center; }
.s4-method-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s4-method-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 8px;
  border: 1px dashed rgba(255,255,255,.13);
  border-radius: 9px;
  color: #6f8893;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
}
.s4-method-steps li.done { color: #eaffff; border-style: solid; border-color: rgba(104,255,205,.3); background: rgba(72,255,198,.06); }
.s4-method-steps .s4-fraction { min-width: 30px; margin: 0 3px; }
.s4-method-steps .s4-fraction strong { font-size: 15px; }
.s4-method-steps .s4-mixed > strong { font-size: 18px; }

.s4-repair-process { grid-template-rows: auto auto auto; align-content: center; }

.s4-repair-visual {
  display: grid;
  grid-template-columns: 260px minmax(260px, 1fr);
  gap: 22px;
  align-items: center;
  width: min(680px, 100%);
  margin: 0 auto;
}

.s4-repair-visual.compact { grid-template-columns: 220px minmax(220px, 1fr); width: min(600px, 100%); }

.s4-floor-gap {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  height: 152px;
  border: 5px solid rgba(92, 60, 34, .88);
  border-radius: 5px;
  color: rgba(217, 238, 243, .58);
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(0,0,0,.26) 39px 42px),
    linear-gradient(180deg, #071018, #02070a);
  box-shadow: inset 0 18px 38px rgba(0,0,0,.9), 0 0 0 1px rgba(230,183,119,.18);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
}

.s4-floor-gap::before,
.s4-floor-gap::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  height: 7px;
  background: #a06a39;
  box-shadow: inset 0 1px rgba(255,255,255,.2);
}
.s4-floor-gap::before { top: -8px; }
.s4-floor-gap::after { bottom: -8px; }

.s4-wood-pieces {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 9px;
  min-height: 152px;
}

.s4-wood-plank,
.s4-wood-piece {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid #d09a5e;
  border-radius: 5px;
  color: #fff1d2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 35%),
    repeating-linear-gradient(90deg, #9b6537 0 34px, #754622 35px 38px);
  box-shadow: inset 0 -8px 14px rgba(53,25,7,.2), 0 7px 13px rgba(0,0,0,.24);
  font-weight: 950;
  text-shadow: 0 1px 2px #3a1d0a;
}

.s4-wood-plank { width: 132px; height: 58px; transform: rotate(calc((var(--plank-index, 1) - 1.5) * 1deg)); }
.s4-wood-piece { min-width: 82px; height: 48px; padding: 0 12px; background-color: #87552d; }
.s4-wood-plank.locked { filter: saturate(.45) brightness(.72); }
.s4-wood-plank.locked::after { content: "LOCK"; position: absolute; right: 5px; bottom: 3px; color: #ffd28d; font-size: 8px; letter-spacing: .08em; }
.s4-piece-shadow { display: grid; place-items: center; width: 120px; height: 58px; border: 2px dashed rgba(225,183,128,.34); color: #c9a777; font-size: 25px; }
.s4-repair-visual.overflow .s4-wood-pieces { box-shadow: 24px 0 26px -20px rgba(255, 151, 70, .8); }

.s4-repair-note {
  margin: 0;
  color: #d9eef2;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

.s4-mini-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 13px;
  border: 1px solid rgba(110, 206, 232, .15);
  border-radius: 8px;
  color: #d8eef5;
  background: rgba(3, 13, 20, .48);
  font-size: 17px;
  font-weight: 900;
}
.s4-mini-equation .s4-fraction { min-width: 30px; }
.s4-mini-equation .s4-fraction strong { font-size: 16px; }
.s4-mini-equation .s4-mixed > strong { font-size: 20px; }
.s4-conversion-grid.compact { gap: 10px; }

.s4-installed-floor {
  display: flex;
  align-items: stretch;
  width: min(600px, 100%);
  height: 180px;
  margin: auto;
  overflow: hidden;
  border: 6px solid #5d391f;
  border-radius: 6px;
  background: #392317;
  box-shadow: 0 0 34px rgba(229, 169, 91, .22);
  animation: s4FloorInstall .85s ease both;
}
.s4-installed-floor span { flex: 1; border-right: 3px solid #5f371a; background: linear-gradient(90deg, #8f5b31, #b47a43 55%, #8a542c); }
.s4-installed-floor span.partial { flex: .72; border-right: 0; }
.s4-result-label { display: flex; align-items: center; justify-content: center; gap: 8px; color: #ffe5b5; font-size: 21px; font-weight: 950; }

.s4-action-row.interactive {
  flex-direction: column;
  gap: 10px;
  min-height: 104px;
  margin-top: 8px;
}

.s4-interactive-process {
  align-content: center;
  gap: 10px;
  min-height: 286px;
}

.s4-learning-step {
  display: grid;
  gap: 7px;
  width: min(680px, 100%);
  margin: 0 auto;
}

.s4-step-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.s4-step-meta span {
  padding: 4px 9px;
  border-radius: 999px;
  color: #8be8ff;
  background: rgba(70, 194, 231, .1);
  border: 1px solid rgba(91, 218, 255, .2);
  font-size: 11px;
  font-weight: 900;
}

.s4-step-meta strong { color: #ffe8bd; font-size: 16px; }

.s4-question-prompt {
  margin: 0;
  color: #f3fcff;
  font-size: 19px;
  font-weight: 950;
  text-align: center;
}

.s4-solved-trail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.s4-solved-trail span {
  padding: 4px 8px;
  border-radius: 6px;
  color: #e8d5b5;
  background: rgba(126, 83, 46, .25);
  border: 1px solid rgba(206, 154, 94, .2);
  font-size: 11px;
  font-weight: 800;
}

.s4-answer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  width: min(680px, 100%);
}

.s4-answer-choice {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(226, 180, 116, .38);
  border-radius: 9px;
  color: #f8ead2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(180deg, #76502f, #4f301c);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.s4-answer-choice:hover { filter: brightness(1.14); transform: translateY(-1px); }
.s4-answer-choice.selected {
  color: #fff7df;
  border-color: #ffd08a;
  background: linear-gradient(180deg, #ae7440, #76451f);
  box-shadow: 0 0 18px rgba(245, 179, 91, .28), inset 0 0 0 2px rgba(255, 228, 176, .12);
}

.s4-answer-choice.wrong {
  border-color: #ff9d7d;
  animation: s4WrongShake .42s ease;
}

.s4-primary-btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.4); }

.s4-overflow-model {
  display: grid;
  gap: 12px;
  width: min(640px, 100%);
  padding: 14px;
  border: 1px solid rgba(255, 217, 149, .24);
  border-radius: 14px;
  background: rgba(3, 12, 18, .44);
}

.s4-overflow-piece-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}

.s4-overflow-piece-grid span {
  display: grid;
  place-items: center;
  min-height: 28px;
  border: 1px solid rgba(255, 229, 181, .3);
  border-radius: 5px;
  color: #3b220d;
  background: linear-gradient(180deg, #f6c781, #c3813e);
  font-size: 11px;
  font-weight: 950;
}

.s4-overflow-piece-grid span.grouped {
  border-color: rgba(126, 255, 220, .52);
  box-shadow: 0 0 14px rgba(92, 255, 205, .18);
}

.s4-overflow-piece-grid span.leftover {
  border-color: rgba(255, 231, 166, .7);
  background: linear-gradient(180deg, #ffd88f, #dd9d4e);
}

.s4-overflow-caption {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.s4-overflow-caption span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #ffe8bd;
  background: rgba(111, 70, 32, .34);
  font-size: 13px;
  font-weight: 950;
}

.s4-improper-trail .s4-equation-line {
  min-width: 150px;
  min-height: 50px;
  padding: 6px 9px;
  gap: 7px;
  font-size: 18px;
}

.s4-improper-step-card {
  gap: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.s4-improper-step-card .s4-answer-grid {
  gap: 7px;
}

.s4-improper-step-card .s4-answer-choice {
  min-height: 54px;
}

.s4-improper-step-card .s4-fraction {
  min-width: 34px;
}

.s4-improper-step-card .s4-fraction strong {
  font-size: 20px;
}

.s4-improper-step-card .s4-mixed > strong {
  font-size: 26px;
}

@keyframes s4WrongShake {
  0%,
  100% { transform: translateX(0); }
  22% { transform: translateX(-7px); }
  44% { transform: translateX(7px); }
  66% { transform: translateX(-4px); }
  82% { transform: translateX(4px); }
}

.s4-method-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: min(650px, 100%);
}

.s4-answer-form {
  display: grid;
  grid-template-columns: auto minmax(180px, 270px) auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(680px, 100%);
}

.s4-answer-form label {
  color: #d8eef5;
  font-size: 14px;
  font-weight: 900;
}

.s4-answer-form input {
  box-sizing: border-box;
  height: 50px;
  padding: 0 14px;
  border: 2px solid rgba(108, 215, 244, .34);
  border-radius: 9px;
  outline: none;
  color: #fff;
  background: rgba(2, 12, 20, .88);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.s4-answer-form input:focus { border-color: #8ceaff; box-shadow: 0 0 15px rgba(77, 211, 247, .22); }
.s4-answer-form input.wrong { border-color: #ff9d7d; animation: rushWrongShake .36s ease; }
.s4-answer-form .s4-primary-btn { min-width: 130px; min-height: 50px; }

.s4-feedback {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 102px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #eefcff;
  background: rgba(4, 18, 28, .94);
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: .2s ease;
  pointer-events: none;
}
.s4-feedback.show { opacity: 1; transform: translate(-50%, 0); }
.s4-feedback[data-type="success"] { color: #9affe1; }
.s4-feedback[data-type="error"] { color: #ffc0ad; }

.s4-ending {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(1, 8, 14, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.s4-ending[hidden] { display: none; }
.s4-ending.show { opacity: 1; pointer-events: auto; }
.s4-ending-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(83,255,215,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,255,215,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  animation: s4EndingGrid 1.8s ease both;
}
.s4-ending-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 680px;
  padding: 42px;
  border: 1px solid rgba(99, 255, 211, .62);
  border-radius: 22px;
  background: rgba(4, 24, 31, .96);
  box-shadow: 0 0 80px rgba(63, 255, 204, .22);
  animation: s4EndingCard .7s .15s ease both;
}
.s4-system-line { color: #8affe0; font-size: 18px; font-weight: 950; letter-spacing: .05em; }
.s4-ending-card h2 { margin: 0; color: #fff; font-size: 52px; text-shadow: 0 0 24px rgba(92,255,212,.45); }
.s4-ending-card p { margin: 0; color: #cdeff0; font-size: 20px; }

@keyframes s4FloorInstall {
  0% { transform: translateY(-24px) rotate(-1deg); filter: brightness(1.8); }
  55% { transform: translateY(4px); }
  100% { transform: translateY(0); filter: brightness(1); }
}
@keyframes s4EndingGrid { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes s4EndingCard { from { opacity: 0; transform: scale(.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* =========================
   STAGE 4: 체육관 보관 레일 1차 구현
========================= */

.s4-stage4-main {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  width: min(1620px, calc(100% - 300px));
  min-height: 720px;
  margin: 110px auto 0;
}

.s4-center-panel {
  display: grid;
  place-items: center;
  min-height: 680px;
}

.s4-intro-card,
.s4-game-board {
  box-sizing: border-box;
  width: min(920px, 100%);
  border: 1px solid rgba(140, 228, 255, .34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 29, 42, .8), rgba(4, 16, 25, .74)),
    radial-gradient(circle at 50% 0, rgba(255, 208, 128, .1), transparent 45%);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .32), inset 0 0 42px rgba(112, 223, 255, .05);
  backdrop-filter: blur(2px);
}

.s4-workbench-card {
  box-sizing: border-box;
  width: min(1620px, 100%);
  min-height: 680px;
  border: 1px solid rgba(140, 228, 255, .34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 29, 42, .84), rgba(4, 16, 25, .78)),
    radial-gradient(circle at 50% 0, rgba(255, 208, 128, .1), transparent 45%);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .32), inset 0 0 42px rgba(112, 223, 255, .05);
  backdrop-filter: blur(2px);
}

.s4-intro-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 46px 56px;
  text-align: center;
}

.s4-kicker {
  margin: 0;
  color: #7eefff;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .16em;
}

.s4-intro-card h1,
.s4-panel-header h1 {
  margin: 0;
  color: #fff8e6;
  font-size: 38px;
  line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.s4-intro-card p {
  max-width: 640px;
  margin: 0;
  color: #d8f2f6;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.6;
}

.s4-workbench-card {
  display: grid;
  gap: 22px;
  padding: 28px 34px 32px;
}

.s4-panel-header {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(139, 220, 255, .16);
  text-align: center;
}

.s4-panel-header > span {
  color: #7eefff;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .12em;
}

.s4-equation-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  color: #f9feff;
  font-size: 25px;
  font-weight: 950;
}

.s4-equation-line.s4-problem-expression {
  min-height: 66px;
}

.s4-learning-zone {
  display: grid;
  place-items: center;
  min-height: 450px;
}

.s4-learning-step-card,
.s4-learning-complete {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(760px, 100%);
  padding: 26px;
  border: 1px solid rgba(238, 190, 119, .28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(80, 50, 28, .42), rgba(23, 26, 29, .42)),
    rgba(4, 12, 18, .52);
}

.s4-direct-plank-step {
  width: min(800px, 100%);
  gap: 10px;
  padding: 16px 18px;
  justify-items: stretch;
}

.s4-learning-one-workbench {
  font-family: var(--edu-worksheet-font, "Pretendard", "Noto Sans KR", sans-serif);
  position: relative;
  display: block;
  padding: 20px 34px 22px;
}

.s4-learning-one-header {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  width: auto;
  text-align: left;
}

.s4-learning-one-header > span {
  color: rgba(126, 239, 255, .78);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.s4-learning-one-header h1 {
  margin: 0;
  color: #fff3d8;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.s4-learning-one-zone {
  box-sizing: border-box;
  min-height: 620px;
  padding: 102px 18px 0;
}

.s4-learning-one-layout {
  display: grid;
  grid-template-columns: 600px minmax(0, 640px);
  align-items: center;
  gap: 24px;
  width: min(1304px, 100%);
}

.s4-learning-one-layout.s4-textbook-layout {
  grid-template-columns: 760px minmax(0, 520px);
}

.s4-learning-one-layout.s4-lesson1-merge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: min(920px, 100%);
  margin: 0 auto;
}

.s4-lesson1-merge-zone {
  padding-top: 96px;
}

.s4-lesson1-merge-panel {
  width: min(900px, 100%);
  padding: 22px 28px;
}

.s4-lesson1-merge-panel .s4-lesson1-build-area {
  gap: 12px;
}

.s4-combined-plank-row.waiting {
  opacity: .72;
}

.s4-lesson1-build-area.is-merged .s4-source-plank-row {
  opacity: .58;
  transform: translateY(-2px);
  transition: opacity .35s ease, transform .35s ease;
}

.s4-lesson1-build-area.is-merged .s4-combined-plank-row {
  opacity: 1;
  transform: translateY(0);
  animation: s4Lesson1MergeReveal .45s ease;
}

@keyframes s4Lesson1MergeReveal {
  from {
    opacity: .2;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.s4-textbook-layout .s4-direct-plank-step {
  width: min(760px, 100%);
}

.s4-textbook-layout .s4-sequence-calculation {
  width: min(520px, 100%);
}

.s4-calculation-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 430px;
  padding: 28px 32px;
  border: 1px solid rgba(126, 232, 255, .28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(5, 28, 42, .82), rgba(4, 15, 23, .74));
  box-shadow: inset 0 0 28px rgba(91, 220, 255, .05), 0 16px 32px rgba(0, 0, 0, .2);
}

.s4-calculation-panel h2 {
  margin: 0;
  color: #a8efff;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .04em;
}

.s4-calculation-problem {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 218, 155, .22);
  border-radius: 10px;
  background: rgba(58, 38, 22, .22);
}

.s4-calculation-problem > span {
  color: #ffe1ad;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
}

.s4-calculation-problem-equation {
  justify-content: flex-start;
  min-height: 60px;
  gap: 12px;
  color: #fff8e8;
  font-size: 36px;
}

.s4-calculation-panel.wholes-ready .s4-calculation-problem-equation .s4-mixed > strong {
  color: #9affe1;
  text-shadow: 0 0 12px rgba(91, 255, 211, .34);
}

.s4-calculation-arrow {
  color: rgba(132, 242, 219, .72);
  font-size: 22px;
  font-weight: 950;
  text-align: center;
}

.s4-calculation-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  min-height: 110px;
  padding: 20px 18px;
  border: 1px dashed rgba(146, 214, 233, .22);
  border-radius: 10px;
  background: rgba(2, 13, 20, .4);
}

.s4-calculation-step.active {
  border-style: solid;
  border-color: rgba(143, 255, 225, .34);
  background: rgba(45, 126, 105, .1);
}

.s4-calculation-step.complete {
  border-style: solid;
  border-color: rgba(143, 255, 225, .22);
  background: rgba(30, 72, 64, .14);
}

.s4-calculation-panel.is-multi-step {
  gap: 10px;
  min-height: 460px;
}

.s4-calculation-panel.is-multi-step .s4-calculation-step {
  min-height: 88px;
  padding: 14px 12px;
}

.s4-calculation-sub-equations {
  display: grid;
  gap: 8px;
}

.s4-calculation-equation.sub {
  min-height: 36px;
  font-size: 22px;
}

.s4-learning-plank-piece.is-static {
  cursor: default;
  pointer-events: none;
}

.s4-tick-align-bench,
.s4-sum-choice-bench {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 2px dashed rgba(255, 218, 155, .32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(98, 59, 28, .28), rgba(27, 18, 12, .48)),
    repeating-linear-gradient(90deg, rgba(174, 111, 54, .12) 0 46px, transparent 47px 52px);
}

.s4-tick-align-bench > p,
.s4-sum-choice-bench > p {
  margin: 0;
  color: #ffe4b1;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.s4-tick-choice-grid,
.s4-sum-choice-grid {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s4-tick-choice-grid .s4-answer-choice,
.s4-sum-choice-grid .s4-answer-choice {
  min-height: 58px;
  font-size: 14px;
}

.s4-alignment-visual {
  display: grid;
  gap: 10px;
  width: 100%;
}

.s4-alignment-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 183, 118, .22);
  border-radius: 12px;
  background: rgba(4, 12, 18, .42);
}

.s4-alignment-row > span {
  color: #ffe4b1;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.s4-equation-line.s4-alignment-equation {
  justify-content: flex-start;
  min-height: 44px;
  gap: 10px;
  color: #fff6df;
  font-size: 24px;
}

.s4-mini-summary.compact {
  min-height: 52px;
  font-size: 26px;
}

.s4-calculation-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #08201b;
  background: #91f4dc;
  font-size: 12px;
  font-weight: 950;
}

.s4-calculation-step > div {
  display: grid;
  align-content: start;
  gap: 12px;
}

.s4-calculation-step strong {
  color: #ffe4b1;
  font-size: 14px;
}

.s4-calculation-step p {
  margin: 0;
  color: rgba(205, 232, 237, .58);
  font-size: 14px;
  line-height: 1.45;
}

.s4-calculation-equation {
  justify-content: flex-start;
  min-height: 50px;
  gap: 10px;
  color: #f3fffb;
  font-size: 28px;
}

.s4-calculation-equation.complete {
  color: #9affe1;
  text-shadow: 0 0 16px rgba(91, 255, 211, .32);
}

.s4-calculation-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.s4-calculation-progress span {
  height: 6px;
  border-radius: 999px;
  background: rgba(170, 221, 231, .14);
}

.s4-calculation-progress span.filled {
  background: #78e7d0;
  box-shadow: 0 0 10px rgba(91, 255, 211, .28);
}

.s4-sequence-calculation {
  align-content: start;
  min-height: 440px;
  padding: 22px 24px;
}

.s4-sequence-equations {
  display: grid;
  gap: 8px;
}

.s4-sequence-equation {
  justify-content: flex-start;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid rgba(126, 232, 255, .13);
  border-radius: 9px;
  gap: 6px;
  color: rgba(226, 244, 247, .64);
  background: rgba(2, 13, 20, .32);
  font-size: 20px;
}

.s4-sequence-equation.current {
  color: #f5fffc;
  border-color: rgba(143, 255, 225, .42);
  background: rgba(45, 126, 105, .14);
  box-shadow: 0 0 18px rgba(91, 255, 211, .1);
}

.s4-sequence-equation.done {
  border-color: rgba(126, 232, 255, .2);
}

.s4-sequence-equation .s4-fraction strong {
  font-size: .76em;
}

.s4-lesson1-build-area {
  gap: 9px;
}

.s4-textbook-plank-row {
  min-height: 64px;
}

.s4-lesson1-build-area.is-separated .s4-textbook-plank-row:not(.s4-combined-plank-row) .s4-lesson1-whole-block {
  border-color: rgba(143, 255, 225, .68);
  box-shadow: 0 0 15px rgba(91, 255, 211, .18), inset 0 -10px 16px rgba(56, 27, 8, .2);
}

.s4-lesson1-build-area.is-separated .s4-textbook-plank-row:not(.s4-combined-plank-row) .s4-lesson1-fraction-unit {
  border-color: rgba(255, 220, 147, .82);
  box-shadow: 0 0 16px rgba(255, 202, 114, .22);
}

.s4-combined-plank-row {
  border-style: dashed;
  border-color: rgba(126, 232, 255, .2);
  background: rgba(3, 17, 25, .34);
}

.s4-combined-plank-row.revealed {
  border-style: solid;
  border-color: rgba(143, 255, 225, .36);
  background: rgba(45, 126, 105, .08);
}

.s4-result-waiting {
  color: rgba(205, 232, 237, .48);
  font-size: 12px;
  font-weight: 800;
}

.s4-combined-piece-track {
  min-height: 50px;
}

.s4-combined-empty-rail {
  display: block;
  width: 100%;
  height: 46px;
  border: 2px dashed rgba(126, 232, 255, .14);
  border-radius: 8px;
  background: rgba(0, 0, 0, .1);
}

.s4-lesson1-fraction-unit {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 4px 6px 2px;
  border: 2px solid rgba(232, 184, 111, .42);
  border-radius: 8px;
  background: rgba(20, 14, 10, .28);
}

.s4-lesson1-fraction-model {
  position: relative;
  width: 132px;
  height: 46px;
  overflow: hidden;
  border: 2px solid rgba(232, 184, 111, .5);
  border-radius: 6px;
  background: #2f2118;
  box-shadow: inset 0 -8px 14px rgba(24, 12, 5, .3);
}

.s4-lesson1-fraction-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.s4-lesson1-fraction-grid span {
  border-right: 1px solid rgba(255, 229, 173, .38);
  background: rgba(29, 22, 18, .72);
}

.s4-lesson1-fraction-grid span:last-child {
  border-right: 0;
}

.s4-lesson1-fraction-grid span.filled {
  background:
    repeating-linear-gradient(135deg, rgba(255, 239, 190, .34) 0 5px, rgba(255, 190, 94, .09) 5px 10px),
    linear-gradient(180deg, #aa713d, #7b4c27);
}

.s4-l1-cell-grid .s4-l1-cell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 229, 173, .38);
  background: rgba(29, 22, 18, .72);
  transition: background .25s ease, box-shadow .25s ease, filter .2s ease;
}

.s4-l1-cell-grid .s4-l1-cell:last-child {
  border-right: 0;
}

.s4-l1-cell-grid button.s4-l1-cell {
  cursor: pointer;
}

.s4-l1-cell-grid button.s4-l1-cell:hover:not(.filled) {
  background: rgba(86, 64, 42, .7);
  box-shadow: inset 0 0 12px rgba(255, 205, 123, .3);
  filter: brightness(1.1);
}

.s4-l1-cell-grid .s4-l1-cell.filled {
  background:
    repeating-linear-gradient(135deg, rgba(255, 239, 190, .34) 0 5px, rgba(255, 190, 94, .09) 5px 10px),
    linear-gradient(180deg, #aa713d, #7b4c27);
  box-shadow: inset 0 -8px 12px rgba(56, 27, 8, .26);
  animation: s4L1CellFill .28s ease;
}

@keyframes s4L1CellFill {
  from { opacity: .35; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

.s4-lesson1-fraction-unit.is-interactive {
  position: relative;
  border-color: rgba(255, 220, 147, .6);
  box-shadow: 0 0 14px rgba(255, 202, 114, .14);
}

.s4-l1-caption {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffe4b1;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.s4-l1-caption .s4-fraction strong {
  font-size: 12px;
}

.s4-l1-caption .s4-fraction i {
  width: .58em;
  min-width: .58em;
  height: 2px;
  background: #ffe1a1;
}

.s4-lesson1-fraction-label {
  color: #fff8e8;
  line-height: 1;
}

.s4-lesson1-fraction-label strong {
  font-size: 14px;
}

.s4-lesson1-fraction-label i {
  width: .62em;
  min-width: .62em;
  height: 2px;
  background: #ffe1a1;
}

.s4-lesson1-whole-block {
  position: relative;
  width: 132px;
  height: 46px;
  overflow: hidden;
  border: 2px solid rgba(232, 184, 111, .48);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 35%),
    repeating-linear-gradient(90deg, #a66d3a 0 42px, #774824 43px 48px);
  box-shadow: inset 0 -8px 14px rgba(56, 27, 8, .28), 0 6px 12px rgba(0, 0, 0, .2);
}

.s4-lesson1-model-track {
  align-items: flex-end;
  gap: 10px;
}

.s4-lesson1-row-label .s4-lesson1-mixed {
  gap: .03em;
}

.s4-lesson1-row-label .s4-lesson1-mixed > strong {
  font-size: 20px;
  line-height: 1;
}

.s4-lesson1-row-label .s4-lesson1-mixed .s4-fraction strong {
  font-size: 14px;
}

.s4-lesson1-row-label .s4-lesson1-mixed .s4-fraction i {
  width: .62em;
  min-width: .62em;
}

.s4-sequence-equation .s4-mixed {
  gap: .03em;
}

.s4-sequence-equation .s4-mixed > strong {
  font-size: .9em;
}

.s4-sequence-equation .s4-mixed .s4-fraction strong {
  font-size: .72em;
}

.s4-sequence-equation .s4-mixed .s4-fraction i {
  width: .58em;
  min-width: .58em;
}

.s4-lesson1-result-preview {
  display: grid;
  gap: 8px;
  width: min(720px, 100%);
  padding: 10px 12px;
  border: 1px solid rgba(143, 255, 225, .28);
  border-radius: 10px;
  background: rgba(45, 126, 105, .08);
}

.s4-lesson1-result-preview > span {
  color: #9affe1;
  font-size: 13px;
  font-weight: 950;
}

.s4-lesson1-result-pieces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.s4-lesson1-whole-mini {
  display: grid;
  place-items: center;
  width: 92px;
  height: 42px;
  border: 2px solid rgba(232, 184, 111, .48);
  border-radius: 7px;
  color: #fff0cf;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 35%),
    repeating-linear-gradient(90deg, #a66d3a 0 30px, #774824 31px 35px);
  font-size: 12px;
  font-weight: 900;
}

.s4-lesson1-result-pieces .s4-lesson1-fraction-model {
  width: 132px;
  height: 42px;
}

.s4-lesson1-action-row {
  display: flex;
  justify-content: center;
  width: 100%;
  flex: 0 0 auto;
  pointer-events: none;
}

.s4-lesson1-action-row .s4-primary-btn {
  pointer-events: auto;
}

.s4-lesson1-action-row .s4-primary-btn {
  min-width: 270px;
}

.s4-lesson1-action-row {
  margin-top: -50px;
  position: relative;
  z-index: 10;
}

.s4-lesson1-action-row #s4-l1-try-combine {
  min-width: 140px;
  min-height: calc(34px * 1.3);
  padding: 0 22px;
  font-size: 14px;
  transform: translateY(-3cm);
}

.s4-learning-one-workbench .s4-lesson1-merge-panel:has(.is-combined-step) .s4-lesson1-action-row #s4-l1-same-size,
.s4-learning-one-workbench .s4-lesson1-merge-panel:has(.is-common-grid-step) .s4-lesson1-action-row #s4-l1-same-size {
  min-width: 140px;
  min-height: calc(34px * 1.3);
  padding: 0 22px;
  font-size: 14px;
  transform: translateY(-3cm);
}

.s4-lesson1-build-area.is-preview-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.s4-l1-preview-pair {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
  width: 100%;
}

.s4-l1-preview-card {
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 20px 24px 18px;
  border: 1px solid rgba(226, 183, 118, .22);
  border-radius: 12px;
  background: rgba(4, 12, 18, .42);
}

.s4-l1-preview-planks {
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-end;
  min-height: 162px;
}

.s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-l1-preview-planks .s4-lesson1-fraction-model {
  width: 76px;
  height: 154px;
  border-radius: 10px;
}

.s4-l1-preview-planks .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
  box-shadow: inset 0 -13px 18px rgba(56, 27, 8, .28), inset 0 0 0 1px rgba(255, 232, 178, .1), 0 8px 16px rgba(0, 0, 0, .24);
}

.s4-l1-preview-planks .s4-lesson1-fraction-model {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #8b542c, #6d4022);
  box-shadow: inset 0 -12px 18px rgba(24, 12, 5, .34), 0 8px 16px rgba(0, 0, 0, .22);
}

.s4-l1-preview-planks .s4-lesson1-fraction-grid {
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-auto-columns: unset;
}

.s4-l1-preview-planks .s4-lesson1-fraction-grid span {
  border-right: 0;
  border-bottom: 2px solid rgba(255, 229, 173, .48);
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(58, 35, 20, .74), rgba(35, 22, 14, .82));
}

.s4-l1-preview-planks .s4-lesson1-fraction-grid span:last-child {
  border-bottom: 0;
}

.s4-l1-preview-planks .s4-lesson1-fraction-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
}

.s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-l1-preview-planks .s4-lesson1-fraction-unit,
.s4-l1-preview-planks .s4-lesson1-fraction-model {
  flex-shrink: 0;
}

.s4-l1-preview-card .s4-lesson1-fraction-unit {
  padding: 0;
  border: 0;
  background: transparent;
}

.s4-l1-preview-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff8e8;
  line-height: 1;
}

.s4-l1-preview-label .s4-mixed {
  gap: .1em;
}

.s4-l1-preview-label .s4-mixed > strong {
  font-size: 28px;
  font-weight: 950;
}

.s4-l1-preview-label .s4-fraction strong {
  font-size: 24px;
  line-height: .92;
}

.s4-l1-preview-label .s4-fraction i {
  width: 1.35em;
  min-width: 1.35em;
  height: 2px;
  margin: 2px 0;
  background: #ffe1a1;
}

.s4-lesson1-build-area.is-preview-step + .s4-lesson1-action-row,
.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) + .s4-lesson1-action-row {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* 4-1 빨간 프레임 — 제목 아래 ~ 버튼·로복 사이 */
.s4-learning-one-workbench {
  --s41-l1-frame-top: 112px;
  --s41-l1-frame-bottom: 20px;
  --s41-l1-frame-height: 680px;
  --s41-l1-action-height: 86px;
}

.s4-lesson1-build-area.is-preview-step,
.s4-lesson1-build-area.is-diagram-step {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.s4-lesson1-build-area.is-preview-step {
  justify-content: center;
}

.s4-lesson1-build-area.is-preview-step .s4-l1-preview-pair {
  margin-top: 0;
}

.s4-lesson1-build-area.is-diagram-step {
  justify-content: flex-start;
  padding-top: 0;
}

.s4-l1-diagram {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 920px;
  height: auto;
  max-height: 100%;
  flex: 0 1 auto;
  min-height: 0;
  margin: 0 auto;
  box-sizing: border-box;
  align-content: start;
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  gap: 10px;
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-sources {
  flex: 0 0 auto;
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined {
  box-sizing: border-box;
  align-items: flex-start;
  align-self: center;
  flex: 0 0 auto;
  width: fit-content;
  max-width: calc(100% - 24px);
  min-height: 0;
  height: auto;
  margin-top: auto;
  margin-bottom: 0;
  margin-inline: auto;
  padding: 4px 14px 6px;
  overflow: visible;
  transform: translateY(-1cm);
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-preview-card {
  padding: 14px 18px 12px;
  gap: 12px;
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-preview-planks {
  min-height: 126px;
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-preview-planks .s4-lesson1-fraction-model,
.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-lesson1-whole-block,
.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot,
.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit,
.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-model,
.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot.is-interactive .s4-lesson1-fraction-unit {
  width: 76px;
  height: 154px;
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-self: auto;
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  padding-top: 14px;
  box-sizing: border-box;
}

.s4-l1-diagram-sources {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  margin-top: 0;
  transform: none;
}

.s4-l1-diagram-plus {
  align-self: center;
  color: #f3fbff;
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 255, 255, .18);
  user-select: none;
}

.s4-l1-diagram-combined {
  display: flex;
  justify-content: center;
  padding: 24px 16px 12px;
  border: 1px dashed rgba(143, 255, 225, .28);
  border-radius: 12px;
  background: rgba(45, 126, 105, .06);
}

.s4-l1-diagram-combined-track {
  justify-content: center;
  align-items: flex-end;
  min-height: 176px;
}

.s4-l1-diagram-combined-track .s4-lesson1-whole-block,
.s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot,
.s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit,
.s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-model {
  width: 76px;
  height: 154px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot {
  display: flex;
  align-items: stretch;
}

.s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit,
.s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit.is-interactive {
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-model {
  width: 100%;
  height: 100%;
}

.s4-l1-diagram-combined-track .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
  box-shadow: inset 0 -13px 18px rgba(56, 27, 8, .28), inset 0 0 0 1px rgba(255, 232, 178, .1), 0 8px 16px rgba(0, 0, 0, .24);
}

.s4-l1-diagram-combined-track .s4-lesson1-fraction-model,
.s4-l1-diagram-fraction-slot.is-interactive .s4-lesson1-fraction-model {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #8b542c, #6d4022);
  box-shadow: inset 0 -12px 18px rgba(24, 12, 5, .34), 0 8px 16px rgba(0, 0, 0, .22);
}

.s4-l1-diagram-combined-track .s4-lesson1-fraction-grid,
.s4-l1-diagram-fraction-slot.is-interactive .s4-l1-cell-grid {
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-auto-columns: unset;
}

.s4-l1-diagram-combined-track .s4-lesson1-fraction-grid span,
.s4-l1-diagram-fraction-slot.is-interactive .s4-l1-cell {
  border-right: 0;
  border-bottom: 2px solid rgba(255, 229, 173, .48);
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(58, 35, 20, .74), rgba(35, 22, 14, .82));
}

.s4-l1-diagram-combined-track .s4-lesson1-fraction-grid span:last-child,
.s4-l1-diagram-fraction-slot.is-interactive .s4-l1-cell:last-child {
  border-bottom: 0;
}

.s4-l1-diagram-combined-track .s4-lesson1-fraction-grid span.filled,
.s4-l1-diagram-fraction-slot.is-interactive .s4-l1-cell.filled {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
}

.s4-l1-diagram-fraction-slot {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit {
  padding: 0;
  border: 0;
  background: transparent;
}

.s4-l1-diagram-fraction-slot.has-tick-half::before,
.s4-l1-diagram-fraction-slot.has-tick-third::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  height: 8px;
  pointer-events: none;
}

.s4-l1-diagram-fraction-slot.has-tick-half::before {
  width: 34px;
  background:
    radial-gradient(circle, #ff6b5a 2px, transparent 2.5px) 0 50% / 17px 8px repeat-x;
}

.s4-l1-diagram-fraction-slot.has-tick-third::before {
  width: 48px;
  background:
    radial-gradient(circle, #6ec8ff 2px, transparent 2.5px) 0 50% / 16px 8px repeat-x;
}

.s4-l1-diagram.is-coloring-row3 .s4-l1-diagram-combined {
  border-style: solid;
  border-color: rgba(255, 220, 147, .32);
  background: rgba(42, 27, 14, .22);
}

.s4-l1-diagram-fraction-slot.is-interactive.is-complete .s4-lesson1-fraction-unit {
  outline: 2px solid rgba(143, 255, 225, .45);
  outline-offset: 2px;
  border-radius: 10px;
}

.s4-l1-diagram.is-result {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  height: auto;
  flex: 0 1 auto;
}

.s4-l1-diagram.is-result .s4-l1-diagram-sources {
  opacity: .78;
}

.s4-l1-diagram-result-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch;
  gap: 12px;
  box-sizing: border-box;
  width: auto;
  min-height: 0;
  margin-top: 14px;
  margin-inline: 0;
  padding: 18px 12px 8px;
  border-style: solid;
  border-color: rgba(143, 255, 225, .34);
  background: rgba(45, 126, 105, .1);
  transform: translateY(-0.5cm);
  transform-origin: center bottom;
}

.s4-l1-diagram-result-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: auto;
}

.s4-l1-diagram-result-input .stage4-convert-input {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.s4-l1-result-mixed {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #fff8e8;
}

.s4-l1-result-mixed.s4-l1-input-mixed {
  gap: 0;
}

.s4-l1-result-mixed.s4-l1-input-mixed .s4-l1-result-whole-input {
  margin-right: 1px;
}

.s4-l1-result-mixed.is-confirmed .s4-mixed {
  gap: .08em;
}

.s4-l1-result-mixed.is-confirmed .s4-mixed > strong {
  font-size: 28px;
  color: #fff8e8;
}

.s4-l1-result-mixed.is-confirmed .s4-fraction strong {
  font-size: 24px;
  color: #fff8e8;
}

.s4-l1-result-mixed:not(.is-confirmed) .s4-fraction {
  display: inline-grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
}

.s4-l1-result-mixed .s4-fraction strong {
  color: #fff8e8;
  font-size: 24px;
  line-height: 1;
}

.s4-l1-result-mixed .s4-fraction i {
  width: 1.2em;
  min-width: 1.2em;
  height: 2px;
  background: #ffe1a1;
}

.s4-l1-diagram-result-input .stage4-convert-input {
  color: #fff8e8;
  background: rgba(3, 13, 20, .88);
}

.s4-l1-result-whole-input,
.s4-l1-result-mixed .s4-l1-input-fraction .stage4-convert-input {
  width: 34px;
  height: 32px;
  font-size: 22px;
}

.s4-lesson1-build-area.is-result-step + .s4-lesson1-action-row {
  margin-top: 0;
  justify-content: center;
  padding-right: 0;
}

.s4-lesson1-build-area.is-result-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
}

.s4-l1-result-confirm-inline,
.s4-lesson1-action-row #s4-l1-result-confirm {
  min-width: 88px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 14px;
  flex: 0 0 auto;
}

.s4-lesson1-action-row #s4-l1-same-size,
.s4-lesson1-action-row #s4-l1-combine {
  min-width: 200px;
  min-height: 34px;
  padding: 0 16px;
  font-size: 14px;
}

.s4-lesson1-build-area.is-merge-blocked .s4-l1-merge-attempt {
  animation: s4Lesson1MergeReveal .45s ease;
}

.s4-l1-mismatch-group {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 4px;
  animation: s4L1MismatchShake .7s ease-in-out infinite alternate;
}

.s4-l1-mismatch-group .s4-lesson1-fraction-unit {
  position: relative;
}

.s4-l1-mismatch-group .s4-lesson1-fraction-unit::after {
  content: "";
  position: absolute;
  inset: -4px -2px auto;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 130, 100, .9) 0 6px, transparent 6px 10px);
  opacity: .85;
  pointer-events: none;
}

.s4-l1-mismatch-group .s4-lesson1-fraction-unit:nth-child(2)::after {
  background: repeating-linear-gradient(90deg, rgba(120, 210, 255, .9) 0 4px, transparent 4px 8px);
}

@keyframes s4L1MismatchShake {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

.s4-l1-color-activities {
  display: grid;
  gap: 18px;
  width: 100%;
}

.s4-l1-color-activity {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(226, 183, 118, .24);
  border-radius: 12px;
  background: rgba(4, 12, 18, .38);
}

.s4-l1-color-activity.is-complete {
  border-color: rgba(143, 255, 225, .42);
  background: rgba(45, 126, 105, .1);
}

.s4-l1-color-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: #f3fbff;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.s4-l1-color-heading .s4-fraction strong {
  font-size: 16px;
}

.s4-l1-color-heading .s4-fraction i {
  width: .62em;
  min-width: .62em;
  height: 2px;
  background: #ffe1a1;
}

.s4-l1-color-done {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  color: #d8fff2;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  background: rgba(72, 168, 140, .32);
  border: 1px solid rgba(143, 255, 225, .38);
}

.s4-lesson1-build-area.is-coloring {
  gap: 14px;
}

.s4-l1-final-row .s4-plank-row-value {
  align-self: center;
}

.s4-lesson1-build-area.is-merged + .s4-lesson1-action-row {
  position: static;
  z-index: 3;
  justify-content: center;
  margin-top: 0;
  padding-right: 0;
}

.s4-lesson1-action-row #s4-next-learning {
  min-width: 147px;
  min-height: 34px;
  padding: 0 18px;
  font-size: 14px;
}

.s4-lesson1-choice-panel {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(226, 183, 118, .22);
  border-radius: 12px;
  background: rgba(4, 12, 18, .42);
}

.s4-denom-question {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #f3fbff;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}

.s4-lesson1-choice-panel #s4-l1-denom-confirm {
  min-width: 110px;
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

.stage4-denom-input {
  box-sizing: border-box;
  width: 92px;
  height: 56px;
  padding: 0 10px;
  border: 2px solid rgba(255, 221, 158, .62);
  border-radius: 12px;
  outline: none;
  color: #fff8e8;
  background: rgba(3, 13, 20, .9);
  box-shadow: inset 0 0 18px rgba(255, 213, 137, .08);
  font-size: 28px;
  font-weight: 950;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.stage4-denom-input:focus {
  border-color: #ffe1a1;
  box-shadow: 0 0 18px rgba(255, 205, 123, .26), inset 0 0 18px rgba(255, 213, 137, .08);
}

.stage4-denom-input.wrong {
  border-color: #ff9d7d;
  animation: s4WrongShake .42s ease;
}

.stage4-denom-input::-webkit-outer-spin-button,
.stage4-denom-input::-webkit-inner-spin-button,
.stage4-convert-input::-webkit-outer-spin-button,
.stage4-convert-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.s4-direct-plank-step:has(.s4-lesson1-build-area) {
  align-content: center;
  min-height: 440px;
}

.s4-plank-build-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}

.s4-plank-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid rgba(226, 183, 118, .22);
  border-radius: 12px;
  background: rgba(4, 12, 18, .42);
}

.s4-plank-row-label {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #ffe4b1;
  font-size: 15px;
  font-weight: 900;
}

.s4-plank-row-label .s4-mixed > strong {
  font-size: 22px;
}

.s4-plank-row-label .s4-fraction strong {
  font-size: 16px;
}

.s4-plank-piece-track {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.s4-lesson1-top-equation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  color: #ffe4b1;
}

.s4-lesson1-expression {
  min-height: 0;
  gap: 10px;
  color: #fff8e8;
  font-size: 24px;
}

.s4-lesson1-expression .s4-mixed {
  gap: .06em;
}

.s4-lesson1-expression .s4-mixed {
  gap: .12em;
}

.s4-lesson1-expression .s4-mixed > strong {
  font-size: 24px;
}

.s4-lesson1-expression .s4-fraction strong {
  font-size: 24px;
  line-height: .92;
}

.s4-lesson1-expression .s4-fraction i {
  width: 1.35em;
  min-width: 1.35em;
  background: #ffe1a1;
}

.s4-lesson1-merge-zone {
  padding-top: 84px;
}

.s4-lesson1-merge-panel {
  width: min(980px, 100%);
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 10px;
}

.s4-lesson1-merge-panel .s4-plank-row {
  grid-template-columns: 470px minmax(0, 1fr);
  gap: 24px;
  min-height: 158px;
  padding: 10px 22px;
}

/* 4-1 제작대 — 빨간 박스 크기에 맞춘 와이드 카드 */
.s4-learning-one-workbench.s4-workbench-card {
  width: min(1220px, calc(100% - 80px));
  min-height: 720px;
  gap: 14px;
  padding: 22px 34px 26px;
  margin: 0 auto;
}

.s4-learning-one-workbench .s4-learning-one-zone.s4-lesson1-merge-zone {
  min-height: 0;
  padding: 96px 18px 0;
  align-content: center;
}

.s4-learning-one-workbench .s4-learning-one-layout.s4-lesson1-merge-layout {
  width: 100%;
  max-width: none;
}

.s4-learning-one-workbench .s4-lesson1-merge-panel {
  width: 100%;
  max-width: none;
  padding: 0;
}

.s4-learning-one-workbench .s4-direct-plank-step:has(.s4-lesson1-build-area) {
  display: grid;
  align-content: start;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  width: 100%;
  padding: 0;
}

.s4-learning-one-workbench .s4-learning-one-zone.s4-lesson1-merge-zone:has(.is-preview-step),
.s4-learning-one-workbench .s4-learning-one-zone.s4-lesson1-merge-zone:has(.is-diagram-step) {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  min-height: var(--s41-l1-frame-height);
  height: var(--s41-l1-frame-height);
  max-height: var(--s41-l1-frame-height);
  padding: var(--s41-l1-frame-top) 18px var(--s41-l1-frame-bottom);
}

.s4-learning-one-workbench .s4-lesson1-merge-layout:has(.is-preview-step),
.s4-learning-one-workbench .s4-lesson1-merge-layout:has(.is-diagram-step) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  max-width: none;
}

.s4-learning-one-workbench .s4-lesson1-merge-panel:has(.is-preview-step),
.s4-learning-one-workbench .s4-lesson1-merge-panel:has(.is-diagram-step) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--s41-l1-action-height);
  row-gap: 12px;
  align-content: stretch;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  transform: none;
}

.s4-learning-one-workbench .s4-lesson1-merge-panel:has(.is-diagram-step:not(.is-result-step)) {
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 10px;
}

.s4-learning-one-workbench .s4-lesson1-merge-panel:has(.is-diagram-step:not(.is-result-step)) .s4-lesson1-action-row {
  align-self: start;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 4px;
}

.s4-learning-one-workbench .s4-lesson1-merge-panel:has(.is-result-step):not(:has(.s4-lesson1-action-row .s4-primary-btn)) {
  grid-template-rows: minmax(0, 1fr);
}

.s4-learning-one-workbench .s4-lesson1-merge-panel .s4-lesson1-action-row {
  position: static;
  align-self: end;
  justify-self: stretch;
  width: 100%;
  margin-top: 8px;
  padding-bottom: 8px;
}

.s4-lesson1-build-area.is-diagram-step:not(.is-result-step) {
  overflow: visible;
  max-height: 100%;
  justify-content: flex-start;
  padding-bottom: 0;
  box-sizing: border-box;
}

.s4-learning-one-workbench .s4-learning-one-header {
  top: 22px;
  left: 32px;
}

/* Stage 4-1 worksheet refresh */
.s4-learning-one-workbench.s4-workbench-card {
  width: min(1220px, calc(100% - 80px));
  min-height: calc(720px - 1.5cm);
  height: calc(720px - 1.5cm);
  max-height: calc(720px - 1.5cm);
  margin-top: 0;
  border: 1px solid rgba(220, 220, 220, 0.9);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.975), rgba(244, 235, 222, 0.965)),
    radial-gradient(circle at 18% 20%, rgba(207, 162, 112, 0.08), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(173, 123, 76, 0.06), transparent 36%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
}

.s4-learning-one-workbench.has-s41-card-next .s41-card-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;
  margin-top: 0;
  padding-right: 0;
  pointer-events: none;
}

.s4-learning-one-workbench.has-s41-card-next .s41-card-next-slot .s4-primary-btn.wood {
  pointer-events: auto;
  min-width: 96px;
  width: auto;
  min-height: auto;
  height: auto;
  padding: 10px 22px;
  font-size: 15px;
  border-radius: 6px;
}

.s4-learning-one-workbench .s4-learning-one-header.s41-sheet-header {
  position: static;
  display: block;
  width: auto;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(184, 145, 98, 0.42);
  text-align: left;
}

.s4-learning-one-workbench .s41-sheet-title {
  margin: 0;
  color: #7a4a24;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.s4-learning-one-workbench .s41-sheet-subtitle {
  margin: 8px 0 0;
  color: rgba(77, 52, 28, 0.78);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

/* s41 큰 박스: 하단 2cm 자르고 2cm 아래로 (하단 y 유지) */
#s4-center-panel .s4-learning-one-workbench.s4-workbench-card {
  min-height: calc(720px - 3.5cm);
  height: calc(720px - 3.5cm);
  max-height: calc(720px - 3.5cm);
  margin-top: 2cm;
}

#s4-center-panel .s4-learning-one-workbench {
  --s41-l1-frame-height: calc(620px - 3.5cm);
}

.s4-learning-one-workbench .s4-learning-one-zone.s4-lesson1-merge-zone {
  padding: 18px 10px 0;
}

.s4-learning-one-workbench {
  --s41-l1-frame-top: 14px;
  --s41-l1-frame-bottom: 8px;
  --s41-l1-frame-height: calc(620px - 1.5cm);
  --s41-l1-action-height: 82px;
}

.s4-learning-one-workbench .s4-learning-one-zone.s4-lesson1-merge-zone:has(.is-preview-step),
.s4-learning-one-workbench .s4-learning-one-zone.s4-lesson1-merge-zone:has(.is-diagram-step) {
  padding: var(--s41-l1-frame-top) 18px var(--s41-l1-frame-bottom);
}

.s4-learning-one-workbench .s4-l1-preview-pair {
  gap: 76px;
}

.s4-learning-one-workbench .s4-l1-preview-card,
.s4-learning-one-workbench .s4-l1-color-activity,
.s4-learning-one-workbench .s4-lesson1-choice-panel,
.s4-learning-one-workbench .s4-plank-row {
  border: 1px solid rgba(210, 218, 226, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 234, 0.96));
  box-shadow: 0 10px 22px rgba(24, 34, 45, 0.08);
}

.s4-learning-one-workbench .s4-l1-preview-card {
  gap: 18px;
  padding: 24px 26px 20px;
}

.s4-learning-one-workbench .s4-l1-preview-planks,
.s4-learning-one-workbench .s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-preview-planks {
  min-height: 150px;
}

.s4-learning-one-workbench .s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-preview-planks .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot,
.s4-learning-one-workbench .s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit,
.s4-learning-one-workbench .s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-lesson1-build-area.is-diagram-step:not(.is-result-step) .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot.is-interactive .s4-lesson1-fraction-unit {
  width: 72px;
  height: 148px;
  border-radius: 10px;
}

.s4-learning-one-workbench .s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(99, 61, 28, 0.05) 80%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 214, 0.46), 0 6px 12px rgba(72, 50, 29, 0.12);
}

.s4-learning-one-workbench .s4-l1-preview-planks .s4-lesson1-whole-block .s4-plank-grain,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-lesson1-whole-block .s4-plank-grain {
  display: none;
}

.s4-learning-one-workbench .s4-l1-preview-planks .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-l1-diagram-fraction-slot.is-interactive .s4-lesson1-fraction-model {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 30%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, #eed8bb, #dbbf9c);
  box-shadow: inset 0 0 0 1px rgba(197, 148, 94, 0.38), 0 6px 12px rgba(72, 50, 29, 0.08);
}

.s4-learning-one-workbench .s4-l1-preview-planks .s4-lesson1-fraction-grid span,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-lesson1-fraction-grid span,
.s4-learning-one-workbench .s4-l1-diagram-fraction-slot.is-interactive .s4-l1-cell {
  border-bottom: 2px solid rgba(217, 188, 150, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 28%, rgba(131, 92, 54, 0.04)),
    linear-gradient(180deg, rgba(246, 231, 210, 0.98), rgba(224, 202, 172, 0.96));
}

.s4-learning-one-workbench .s4-l1-preview-planks .s4-lesson1-fraction-grid span.filled,
.s4-learning-one-workbench .s4-l1-diagram-combined-track .s4-lesson1-fraction-grid span.filled,
.s4-learning-one-workbench .s4-l1-diagram-fraction-slot.is-interactive .s4-l1-cell.filled {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(99, 61, 28, 0.08) 78%, rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
}

.s4-learning-one-workbench .s4-l1-preview-label,
.s4-learning-one-workbench .s4-plank-row-label,
.s4-learning-one-workbench .s4-l1-color-heading,
.s4-learning-one-workbench .s4-denom-question {
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-preview-label .textbook-math,
.s4-learning-one-workbench .s4-l1-result-mixed .textbook-math,
.s4-learning-one-workbench .s4-plank-row-label .textbook-math,
.s4-learning-one-workbench .s4-l1-color-heading .textbook-math {
  --math-fs: 30px;
  --game-math-color: #111111;
  --game-math-bar: #111111;
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-preview-label .textbook-math .tm-num,
.s4-learning-one-workbench .s4-l1-preview-label .textbook-math .tm-den,
.s4-learning-one-workbench .s4-l1-result-mixed .textbook-math .tm-num,
.s4-learning-one-workbench .s4-l1-result-mixed .textbook-math .tm-den,
.s4-learning-one-workbench .s4-plank-row-label .textbook-math .tm-num,
.s4-learning-one-workbench .s4-plank-row-label .textbook-math .tm-den {
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-preview-label .textbook-math .tm-bar,
.s4-learning-one-workbench .s4-l1-result-mixed .textbook-math .tm-bar,
.s4-learning-one-workbench .s4-plank-row-label .textbook-math .tm-bar,
.s4-learning-one-workbench .s4-l1-color-heading .textbook-math .tm-bar {
  background: #111111;
}

.s4-learning-one-workbench .s4-l1-preview-label .s4-mixed,
.s4-learning-one-workbench .s4-l1-result-mixed.is-confirmed .s4-mixed {
  gap: 0.08em;
  align-items: center;
}

.s4-learning-one-workbench .s4-l1-preview-label .textbook-math .tm-whole,
.s4-learning-one-workbench .s4-l1-preview-label .s4-mixed > strong,
.s4-learning-one-workbench .s4-l1-result-mixed.is-confirmed .textbook-math .tm-whole,
.s4-learning-one-workbench .s4-l1-result-mixed.is-confirmed .s4-mixed > strong,
.s4-learning-one-workbench .s4-plank-row-label .textbook-math .tm-whole,
.s4-learning-one-workbench .s4-plank-row-label .s4-mixed > strong {
  font-size: var(--math-fs);
  font-weight: 900;
  color: #111111;
  line-height: 1;
}

.s4-learning-one-workbench .s4-l1-preview-label .s4-fraction strong,
.s4-learning-one-workbench .s4-l1-result-mixed .s4-fraction strong,
.s4-learning-one-workbench .s4-plank-row-label .s4-fraction strong,
.s4-learning-one-workbench .s4-l1-color-heading .s4-fraction strong {
  font-size: 22px;
  line-height: 0.96;
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-preview-label .s4-lesson1-mixed,
.s4-learning-one-workbench .s4-l1-preview-label .s4-lesson1-mixed > strong,
.s4-learning-one-workbench .s4-l1-preview-label .s4-lesson1-mixed .s4-fraction,
.s4-learning-one-workbench .s4-l1-preview-label .s4-lesson1-mixed .s4-fraction strong,
.s4-learning-one-workbench .s4-l1-preview-label .s4-lesson1-mixed .s4-fraction i {
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-preview-label .s4-fraction i,
.s4-learning-one-workbench .s4-l1-result-mixed .s4-fraction i,
.s4-learning-one-workbench .s4-plank-row-label .s4-fraction i,
.s4-learning-one-workbench .s4-l1-color-heading .s4-fraction i {
  width: 1.1em;
  min-width: 1.1em;
  height: 2px;
  margin: 1px 0;
  background: #222222;
}

.s4-learning-one-workbench .s4-l1-diagram-plus {
  color: #33506a;
  text-shadow: none;
}

.s4-learning-one-workbench .s4-l1-diagram-combined,
.s4-learning-one-workbench .s4-l1-diagram-result-row {
  border: 1px solid rgba(188, 203, 219, 0.95);
  border-radius: 18px;
  background: rgba(246, 249, 252, 0.98);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.s4-learning-one-workbench .s4-l1-diagram.is-coloring-row3 .s4-l1-diagram-combined {
  border-color: rgba(154, 178, 205, 0.95);
  background: rgba(243, 247, 251, 0.98);
}

.s4-learning-one-workbench .s4-l1-diagram-result-row {
  padding: 18px 16px 12px;
}

.s4-learning-one-workbench .s4-l1-color-activity.is-complete {
  border-color: rgba(142, 174, 208, 0.95);
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(238, 245, 252, 0.98));
}

.s4-learning-one-workbench .s4-l1-color-done {
  color: #2b5273;
  background: rgba(232, 242, 252, 0.98);
  border: 1px solid rgba(167, 191, 217, 0.95);
}

.s4-learning-one-workbench .s4-l1-diagram-fraction-slot.is-interactive.is-complete .s4-lesson1-fraction-unit {
  outline: 2px solid rgba(117, 149, 188, 0.9);
}

.s4-learning-one-workbench .s4-l1-result-mixed,
.s4-learning-one-workbench .s4-l1-result-mixed .s4-fraction strong {
  color: #17384d;
}

.s4-learning-one-workbench .s4-l1-diagram-result-input .stage4-convert-input,
.s4-learning-one-workbench .stage4-denom-input,
.s4-learning-one-workbench .s4-l1-result-whole-input,
.s4-learning-one-workbench .s4-l1-result-mixed .s4-l1-input-fraction .stage4-convert-input {
  color: #17384d;
  border: 2px solid rgba(143, 180, 214, 0.95);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.s4-learning-one-workbench .stage4-denom-input:focus,
.s4-learning-one-workbench .s4-l1-diagram-result-input .stage4-convert-input:focus {
  border-color: #5da5d8;
  box-shadow: 0 0 0 3px rgba(93, 165, 216, 0.18);
}

.s4-learning-one-workbench .s4-lesson1-action-row {
  margin-top: 0;
  padding-bottom: 0;
}

.s4-learning-one-workbench .s4-primary-btn.wood,
.s4-learning-one-workbench .s4-primary-btn.install {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid rgba(143, 102, 62, 0.55);
  color: #fffdf8;
  background: linear-gradient(180deg, #c79059, #a86c3c);
  box-shadow: 0 8px 16px rgba(89, 58, 33, 0.18);
}

.s4-learning-one-workbench .s4-primary-btn:hover:not(:disabled),
.s4-learning-one-workbench .s4-primary-btn:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(89, 58, 33, 0.22);
}

.s4-learning-one-workbench .s4-primary-btn:disabled {
  opacity: 0.42;
}

.s4-learning-one-workbench .s4-lesson1-build-area.is-flow-step {
  display: grid;
  place-items: center;
  min-height: 500px;
  padding: 0 10px;
}

.s4-l1-flow-stage {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
}

.s4-l1-persistent-stage {
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
}

.s4-l1-start-stage {
  place-items: center;
  min-height: 0;
}

.s4-learning-one-workbench .s4-lesson1-build-area.is-start-step .s4-l1-start-stage {
  transform: translateY(-1cm);
}

.s4-l1-flow-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: auto;
}

.s4-l1-persistent-stage .s4-l1-flow-source {
  gap: 34px;
}

.s4-learning-one-workbench .s4-l1-persistent-stage .s4-l1-preview-card {
  gap: 10px;
  padding: 14px 20px 12px;
}

.s4-learning-one-workbench .s4-l1-persistent-stage .s4-l1-preview-planks {
  min-height: 112px;
}

.s4-learning-one-workbench .s4-l1-persistent-stage .s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-persistent-stage .s4-l1-preview-planks .s4-lesson1-fraction-model {
  width: 56px;
  height: 112px;
  border-radius: 9px;
}

.s4-learning-one-workbench .s4-l1-persistent-stage .s4-l1-preview-label .textbook-math {
  --math-fs: 28px;
}

.s4-learning-one-workbench .s4-l1-persistent-stage .s4-l1-preview-label .textbook-math .tm-whole,
.s4-learning-one-workbench .s4-l1-persistent-stage .s4-l1-preview-label .s4-mixed > strong {
  font-size: var(--math-fs);
}

.s4-l1-equation-stage {
  width: 100%;
}

.s4-learning-one-workbench .s4-lesson1-build-area.is-combined-step .s4-l1-equation-stage,
.s4-learning-one-workbench .s4-lesson1-build-area.is-common-grid-step .s4-l1-equation-stage {
  transform: translateY(-1.5cm);
}

.s4-l1-equation-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-preview-card {
  gap: 12px;
  padding: 16px 18px 14px;
}

.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-flow-source .s4-l1-preview-card:first-of-type {
  width: 184px;
}

.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-flow-source .s4-l1-preview-card:last-of-type {
  width: 222px;
}

.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-preview-planks {
  min-height: 118px;
}

.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-preview-planks .s4-lesson1-fraction-model {
  width: 54px;
  height: 112px;
  border-radius: 9px;
}

.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-preview-label .textbook-math {
  --math-fs: 28px;
}

.s4-learning-one-workbench .s4-l1-equation-stage .s4-l1-preview-label .s4-mixed > strong {
  font-size: 28px;
}

.s4-l1-flow-plus {
  color: #111111;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.s4-l1-workbench-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  width: 100%;
  min-height: 260px;
}

.s4-l1-workbench-equals {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  color: #111111;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  transform: none;
}

.s4-l1-work-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px 28px 20px;
  border: 1px solid rgba(210, 218, 226, 0.95);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(247, 242, 234, 0.965));
  box-shadow: 0 10px 22px rgba(24, 34, 45, 0.08);
}

.s4-l1-result-card {
  width: 360px;
  min-width: 360px;
  min-height: 320px;
}

.s4-l1-placeholder-card {
  align-content: center;
  gap: 18px;
}

.s4-l1-placeholder-mark {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 176px;
  border: 1px dashed rgba(192, 157, 115, 0.48);
  border-radius: 16px;
  color: rgba(122, 85, 48, 0.82);
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(243, 234, 221, 0.9));
  font-size: 74px;
  font-weight: 700;
  line-height: 1;
}

.s4-l1-combined-card {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 18px;
  width: 360px;
  max-width: 360px;
  margin: 0 auto;
  padding: 18px 20px 20px;
}

.s4-l1-combined-section {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.s4-l1-combined-card .s4-l1-combined-section + .s4-l1-combined-section {
  border-left: 0;
  border-top: 1px solid rgba(215, 203, 186, 0.9);
  padding-top: 16px;
  padding-left: 0;
}

.s4-l1-work-label,
.s4-l1-guide-text,
.s4-l1-selected-count {
  margin: 0;
  color: #3f2a16;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.s4-l1-subcopy {
  margin: 0;
  color: #6a4927;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.s4-l1-work-label-with-fraction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s4-learning-one-workbench .s4-l1-work-label-with-fraction .textbook-math {
  --math-fs: 28px;
  --game-math-color: #111111;
  --game-math-bar: #111111;
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-work-label-with-fraction .tm-num,
.s4-learning-one-workbench .s4-l1-work-label-with-fraction .tm-den {
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-work-label-with-fraction .tm-bar {
  background: #111111;
}

.s4-l1-guide-text {
  color: #6a4927;
  font-size: 17px;
}

.s4-l1-selected-count {
  color: #17384d;
  font-size: 17px;
}

.s4-l1-whole-collection,
.s4-l1-combined-pieces,
.s4-l1-final-planks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 128px;
}

.s4-l1-combined-pieces {
  gap: 10px;
  flex-wrap: nowrap;
}

.s4-l1-combined-wholes {
  min-height: 122px;
}

.s4-learning-one-workbench .s4-l1-whole-collection .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-combined-pieces .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-combined-pieces .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-l1-final-planks .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-final-planks .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-l1-combined-fraction-plank .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-l1-common-grid-wrap .s4-lesson1-fraction-model,
.s4-learning-one-workbench .s4-l1-small-piece .s4-lesson1-fraction-model {
  width: 56px;
  height: 118px;
  border-radius: 9px;
}

.s4-learning-one-workbench .s4-l1-whole-collection .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-combined-pieces .s4-lesson1-whole-block,
.s4-learning-one-workbench .s4-l1-final-planks .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(99, 61, 28, 0.05) 80%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 214, 0.46), 0 6px 12px rgba(72, 50, 29, 0.12);
}

.s4-learning-one-workbench .s4-l1-whole-collection .s4-plank-grain,
.s4-learning-one-workbench .s4-l1-combined-pieces .s4-plank-grain,
.s4-learning-one-workbench .s4-l1-final-planks .s4-plank-grain {
  display: none;
}

.s4-l1-small-piece-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  flex-wrap: nowrap;
}

.s4-l1-small-piece {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.s4-l1-small-piece-plus {
  align-self: center;
  color: #111111;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.s4-l1-piece-label,
.s4-l1-question-line,
.s4-l1-equation-reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #111111;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
  flex-wrap: wrap;
}

.s4-l1-question-line {
  font-size: 22px;
}

.s4-l1-equation-reveal {
  min-height: 52px;
  padding: 8px 18px;
  border: 1px solid rgba(184, 145, 98, 0.36);
  border-radius: 14px;
  background: rgba(255, 250, 242, 0.92);
}

.s4-l1-equation-reveal.is-small {
  min-height: 42px;
  padding: 6px 14px;
  font-size: 18px;
}

.s4-learning-one-workbench .s4-l1-piece-label .textbook-math,
.s4-learning-one-workbench .s4-l1-question-line .textbook-math,
.s4-learning-one-workbench .s4-l1-equation-reveal .textbook-math,
.s4-learning-one-workbench .s4-l1-result-mixed .textbook-math {
  --math-fs: 28px;
  --game-math-color: #111111;
  --game-math-bar: #111111;
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-piece-label .tm-num,
.s4-learning-one-workbench .s4-l1-piece-label .tm-den,
.s4-learning-one-workbench .s4-l1-question-line .tm-num,
.s4-learning-one-workbench .s4-l1-question-line .tm-den,
.s4-learning-one-workbench .s4-l1-equation-reveal .tm-num,
.s4-learning-one-workbench .s4-l1-equation-reveal .tm-den {
  color: #111111;
}

.s4-learning-one-workbench .s4-l1-piece-label .tm-bar,
.s4-learning-one-workbench .s4-l1-question-line .tm-bar,
.s4-learning-one-workbench .s4-l1-equation-reveal .tm-bar {
  background: #111111;
}

.s4-l1-common-grid-wrap,
.s4-l1-combined-fraction-plank {
  display: grid;
  justify-items: center;
  min-height: 122px;
}

.s4-l1-fraction-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.s4-l1-combined-result-arrow {
  color: #7b5530;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.s4-learning-one-workbench .s4-l1-common-grid-wrap .s4-l1-cell,
.s4-learning-one-workbench .s4-l1-combined-pieces .s4-lesson1-fraction-grid span,
.s4-learning-one-workbench .s4-l1-combined-fraction-plank .s4-lesson1-fraction-grid span,
.s4-learning-one-workbench .s4-l1-final-planks .s4-lesson1-fraction-grid span,
.s4-learning-one-workbench .s4-l1-small-piece .s4-lesson1-fraction-grid span {
  border-bottom: 2px solid rgba(194, 151, 98, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent 28%, rgba(131, 92, 54, 0.04)),
    linear-gradient(180deg, rgba(248, 235, 216, 0.98), rgba(229, 207, 178, 0.96));
}

.s4-learning-one-workbench .s4-l1-common-grid-wrap .s4-l1-cell.filled,
.s4-learning-one-workbench .s4-l1-combined-pieces .s4-lesson1-fraction-grid span.filled,
.s4-learning-one-workbench .s4-l1-combined-fraction-plank .s4-lesson1-fraction-grid span.filled,
.s4-learning-one-workbench .s4-l1-final-planks .s4-lesson1-fraction-grid span.filled,
.s4-learning-one-workbench .s4-l1-small-piece .s4-lesson1-fraction-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(99, 61, 28, 0.08) 78%, rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
}

.s4-learning-one-workbench .s4-l1-common-grid-wrap button.s4-l1-cell:hover:not(.filled),
.s4-learning-one-workbench .s4-l1-common-grid-wrap button.s4-l1-cell:focus-visible {
  outline: 3px solid rgba(196, 142, 72, 0.45);
  outline-offset: -3px;
}

.s4-l1-color-question-card.is-warning {
  border-color: rgba(224, 169, 58, 0.9);
  box-shadow: 0 0 0 4px rgba(224, 169, 58, 0.18), 0 10px 22px rgba(24, 34, 45, 0.08);
  animation: s4-l1-warning-shake 0.34s ease;
}

@keyframes s4-l1-warning-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-6px);
  }
  65% {
    transform: translateX(6px);
  }
}

.s4-l1-complete-card {
  width: 360px;
  min-width: 360px;
}

.s4-l1-complete-card .s4-l1-result-mixed {
  margin-top: 2px;
}

/* =========================
   STAGE 4-2: 두 가지 계산 방법
========================= */

.s4-lesson2-workbench {
  position: relative;
  display: block;
  width: min(1280px, calc(100% - 60px));
  min-height: 700px;
  padding: 24px 36px 28px;
  margin: 0 auto;
}

.s4-lesson2-workbench .s4-learning-one-header {
  position: static;
  margin-bottom: 6px;
}

.s4-lesson2-zone {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  width: 100%;
  padding-top: 6px;
}

.s4-lesson2-subtitle {
  margin: 0;
  color: #ffe4b1;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .01em;
}

.s4-lesson2-body {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.s4-lesson2-body.is-summary {
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
}

.s4-lesson2-left {
  display: grid;
  gap: 10px;
  align-content: center;
  min-height: 320px;
  padding: 14px 16px;
  border: 1px solid rgba(226, 183, 118, .16);
  border-radius: 12px;
  background: rgba(4, 12, 18, .28);
  opacity: .92;
}

.s4-lesson2-body.is-method2 .s4-lesson2-left {
  border-color: rgba(140, 228, 255, .18);
  background: rgba(6, 18, 28, .32);
}

.s4-lesson2-plank-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.s4-lesson2-plank-row.is-compact .s4-lesson1-whole-block,
.s4-lesson2-plank-row.is-compact .s4-lesson1-fraction-model {
  width: 34px;
  height: 68px;
}

.s4-lesson2-row-tag {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(255, 248, 232, .78);
  font-size: 16px;
  font-weight: 900;
}

.s4-lesson2-row-tag .s4-mixed > strong {
  font-size: 16px;
}

.s4-lesson2-row-tag .s4-fraction strong {
  font-size: 14px;
  line-height: .92;
}

.s4-lesson2-row-tag .s4-fraction i {
  width: 1.2em;
  min-width: 1.2em;
  height: 2px;
  background: #ffe1a1;
}

.s4-lesson2-tag-text {
  font-size: 13px;
  font-weight: 900;
  color: #ffe4b1;
}

.s4-lesson2-plank-row .s4-lesson1-model-track {
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  flex-wrap: wrap;
}

.s4-lesson2-plank-row .s4-lesson1-whole-block,
.s4-lesson2-plank-row .s4-lesson1-fraction-model {
  width: 40px;
  height: 80px;
  border-radius: 6px;
}

.s4-lesson2-plank-row .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
  box-shadow: inset 0 -9px 14px rgba(56, 27, 8, .28), inset 0 0 0 1px rgba(255, 232, 178, .1), 0 4px 10px rgba(0, 0, 0, .2);
}

.s4-lesson2-plank-row .s4-lesson1-fraction-unit {
  padding: 0;
  border: 0;
  background: transparent;
}

.s4-lesson2-plank-row .s4-lesson1-fraction-model {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #8b542c, #6d4022);
  box-shadow: inset 0 -8px 14px rgba(24, 12, 5, .34), 0 4px 10px rgba(0, 0, 0, .2);
}

.s4-lesson2-plank-row .s4-lesson1-fraction-grid {
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-auto-columns: unset;
}

.s4-lesson2-plank-row .s4-lesson1-fraction-grid span {
  border-right: 0;
  border-bottom: 2px solid rgba(255, 229, 173, .42);
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(58, 35, 20, .74), rgba(35, 22, 14, .82));
}

.s4-lesson2-plank-row .s4-lesson1-fraction-grid span:last-child {
  border-bottom: 0;
}

.s4-lesson2-plank-row .s4-lesson1-fraction-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
}

.s4-lesson2-plank-row .is-emphasis,
.s4-l2-eighth-grid.is-emphasis {
  outline: 2px solid rgba(143, 255, 225, .65);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(91, 255, 211, .22);
  border-radius: 6px;
}

.s4-lesson2-plank-row .is-dim,
.s4-l2-eighth-grid.is-dim,
.s4-lesson2-split-row.is-dim {
  opacity: .38;
}

.s4-lesson2-result-row {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed rgba(143, 255, 225, .24);
}

.s4-lesson2-split-row .s4-plank-piece-track {
  align-items: center;
}

.s4-l2-eighth-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 168px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(8, 20, 30, .35);
}

.s4-l2-eighth-cell {
  width: 14px;
  height: 28px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(58, 35, 20, .74), rgba(35, 22, 14, .82));
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .22);
}

.s4-l2-eighth-cell.filled {
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
}

.s4-lesson2-note {
  margin: 0;
  color: rgba(255, 213, 138, .82);
  font-size: 12px;
  font-weight: 800;
}

.s4-lesson2-right {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 320px;
  padding: 22px 28px;
  border: 1px solid rgba(140, 228, 255, .32);
  border-radius: 14px;
  background: rgba(6, 28, 42, .58);
  box-shadow: inset 0 0 28px rgba(112, 223, 255, .06);
}

.s4-lesson2-equations {
  display: grid;
  gap: 16px;
}

.s4-lesson2-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #f3fbff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35;
}

.s4-lesson2-eq.is-level-hero {
  font-size: 34px;
  color: #9affe1;
  text-shadow: 0 0 16px rgba(91, 255, 211, .32);
}

.s4-lesson2-eq.is-level-focus {
  font-size: 28px;
  color: #d8fbff;
}

.s4-lesson2-eq.is-level-secondary {
  font-size: 22px;
  color: rgba(220, 240, 255, .72);
}

.s4-lesson2-eq.is-level-dim {
  font-size: 20px;
  color: rgba(200, 225, 240, .42);
}

.s4-lesson2-eq .s4-mixed > strong,
.s4-lesson2-eq .s4-fraction strong {
  font-size: inherit;
  line-height: .92;
}

.s4-lesson2-eq .s4-fraction i {
  width: 1.35em;
  min-width: 1.35em;
  height: 3px;
  background: #bcefff;
}

.s4-lesson2-eq-part.is-focus-part {
  color: #9affe1;
  text-shadow: 0 0 12px rgba(91, 255, 211, .28);
}

.s4-lesson2-eq-part.is-dim-part {
  opacity: .38;
}

.s4-lesson2-summary {
  display: grid;
  gap: 14px;
}

.s4-lesson2-summary-card {
  padding: 14px 18px;
  border: 1px solid rgba(140, 228, 255, .24);
  border-radius: 12px;
  background: rgba(8, 26, 38, .55);
}

.s4-lesson2-summary-card.is-method2 {
  border-color: rgba(255, 220, 147, .28);
  background: rgba(42, 27, 14, .34);
}

.s4-lesson2-summary-card h3 {
  margin: 0 0 8px;
  color: #ffe4b1;
  font-size: 17px;
  font-weight: 950;
}

.s4-lesson2-summary-card p {
  margin: 0 0 4px;
  color: #e7f6ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.s4-lesson2-summary-card p:last-child {
  margin-bottom: 0;
}

.s4-lesson2-summary-answer {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.s4-lesson2-action {
  display: flex;
  justify-content: center;
}

.s4-lesson2-action .s4-primary-btn {
  min-width: 200px;
}

.s4-lesson1-merge-panel .s4-lesson1-model-track {
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  min-height: 144px;
}

.s4-lesson1-merge-panel .s4-lesson1-whole-block,
.s4-lesson1-merge-panel .s4-lesson1-fraction-model {
  width: 68px;
  height: 138px;
  border-radius: 9px;
}

.s4-lesson1-merge-panel .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
  box-shadow: inset 0 -13px 18px rgba(56, 27, 8, .28), inset 0 0 0 1px rgba(255, 232, 178, .1), 0 8px 16px rgba(0, 0, 0, .24);
}

.s4-lesson1-merge-panel .s4-lesson1-fraction-unit {
  padding: 0;
  border: 0;
  background: transparent;
}

.s4-lesson1-merge-panel .s4-lesson1-fraction-model {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #8b542c, #6d4022);
  box-shadow: inset 0 -12px 18px rgba(24, 12, 5, .34), 0 8px 16px rgba(0, 0, 0, .22);
}

.s4-lesson1-merge-panel .s4-lesson1-fraction-grid {
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-auto-columns: unset;
}

.s4-lesson1-merge-panel .s4-lesson1-fraction-grid span,
.s4-lesson1-merge-panel .s4-l1-cell-grid .s4-l1-cell {
  border-right: 0;
  border-bottom: 2px solid rgba(255, 229, 173, .48);
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(58, 35, 20, .74), rgba(35, 22, 14, .82));
}

.s4-lesson1-merge-panel .s4-lesson1-fraction-grid span:last-child,
.s4-lesson1-merge-panel .s4-l1-cell-grid .s4-l1-cell:last-child {
  border-bottom: 0;
}

.s4-lesson1-merge-panel .s4-lesson1-fraction-grid span.filled,
.s4-lesson1-merge-panel .s4-l1-cell-grid .s4-l1-cell.filled {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
}

.s4-lesson1-merge-panel .s4-l1-preview-planks .s4-lesson1-whole-block,
.s4-lesson1-merge-panel .s4-l1-preview-planks .s4-lesson1-fraction-model,
.s4-lesson1-merge-panel .s4-l1-diagram-combined-track .s4-lesson1-whole-block,
.s4-lesson1-merge-panel .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot,
.s4-lesson1-merge-panel .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-unit,
.s4-lesson1-merge-panel .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-model {
  width: 76px;
  height: 154px;
  border-radius: 10px;
}

.s4-lesson1-merge-panel .s4-l1-diagram-combined-track .s4-l1-diagram-fraction-slot .s4-lesson1-fraction-model {
  width: 100%;
  height: 100%;
}

.s4-lesson1-row-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff8e8;
}

.s4-lesson1-row-value .s4-mixed {
  gap: .06em;
}

.s4-lesson1-row-value .s4-mixed {
  gap: .12em;
}

.s4-lesson1-row-value .s4-mixed > strong {
  font-size: 28px;
  line-height: 1;
}

.s4-lesson1-row-value .s4-fraction strong {
  font-size: 28px;
  line-height: .92;
}

.s4-lesson1-row-value .s4-fraction i {
  width: 1.35em;
  min-width: 1.35em;
  height: 3px;
  background: #ffe1a1;
}

.s4-lesson1-conversion-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(174, 231, 196, .28);
  border-radius: 14px;
  background: rgba(219, 246, 188, .08);
}

.s4-lesson1-conversion-lines {
  display: grid;
  gap: 4px;
  width: 100%;
}

.s4-l1-conversion-line {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(112px, auto);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 5px 10px;
  border-bottom: 1px dashed rgba(213, 239, 171, .34);
  color: #fff8e8;
  font-size: 24px;
}

.s4-l1-conversion-line:last-child {
  border-bottom: 0;
}

.s4-l1-conversion-line.is-total {
  border-radius: 10px;
  background: rgba(211, 244, 169, .08);
}

.s4-l1-conversion-line.is-inline {
  grid-template-columns: auto auto auto;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

.s4-l1-total-plank-row,
.s4-l1-total-plank-row.s4-combined-plank-row.revealed {
  border-style: solid;
  border-color: rgba(226, 183, 118, .22);
  background: rgba(4, 12, 18, .42);
}

.s4-l1-total-plank-row .s4-l1-conversion-line.is-total {
  background: transparent;
}

.s4-l1-convert-actions-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.s4-l1-convert-actions-row .s4-primary-btn {
  min-width: 156px;
  min-height: 46px;
  white-space: nowrap;
}

.s4-l1-conversion-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.s4-l1-conversion-equals {
  font-weight: 950;
}

.s4-l1-conversion-line .s4-mixed {
  gap: .05em;
}

.s4-l1-conversion-line .s4-mixed {
  gap: .12em;
}

.s4-l1-conversion-line .s4-mixed > strong {
  font-size: 28px;
  line-height: 1;
}

.s4-l1-conversion-line .s4-fraction strong {
  font-size: 28px;
  line-height: .92;
}

.s4-l1-conversion-line .s4-fraction i {
  width: 1.35em;
  min-width: 1.35em;
  height: 3px;
  background: #ffe1a1;
}

.s4-l1-input-fraction {
  min-width: 54px;
}


.stage4-convert-input {
  box-sizing: border-box;
  width: 34px;
  height: 32px;
  padding: 0 2px;
  border: 2px solid #42bfff;
  border-radius: 7px;
  outline: none;
  color: #072033;
  background: #f7ffff;
  box-shadow: 0 0 10px rgba(71, 198, 255, .18);
  font-size: 24px;
  font-weight: 950;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.s4-l1-conversion-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.s4-lesson1-conversion-panel .s4-primary-btn {
  min-width: 132px;
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}

.stage4-convert-input:focus {
  border-color: #8ceaff;
  box-shadow: 0 0 18px rgba(71, 198, 255, .36);
}

.stage4-convert-input.wrong {
  border-color: #ff9d7d;
  animation: s4WrongShake .42s ease;
}

.s4-learning-plank-piece {
  position: relative;
  display: grid;
  place-content: center;
  gap: 3px;
  width: 132px;
  min-height: 50px;
  overflow: hidden;
  border: 2px solid rgba(232, 184, 111, .48);
  border-radius: 8px;
  color: #fff2d7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 35%),
    repeating-linear-gradient(90deg, #a66d3a 0 42px, #774824 43px 48px);
  box-shadow: inset 0 -12px 18px rgba(56, 27, 8, .28), 0 8px 16px rgba(0, 0, 0, .24);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.s4-learning-plank-piece.fraction.half {
  width: 132px;
}

.s4-learning-plank-piece.fraction.third {
  width: 132px;
}

.s4-learning-plank-piece.fraction {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 35%),
    repeating-linear-gradient(90deg, #3f2d21 0 42px, #302118 43px 48px);
}

.s4-learning-plank-piece.fraction::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 235, 177, .34) 0 5px, rgba(255, 190, 94, .08) 5px 10px),
    linear-gradient(180deg, #aa713d, #7b4c27);
  box-shadow: inset -2px 0 rgba(255, 229, 173, .32);
}

.s4-learning-plank-piece.fraction.half::before {
  width: 50%;
}

.s4-learning-plank-piece.fraction.third::before {
  width: 33.333%;
}

.s4-learning-plank-piece.fraction::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.s4-learning-plank-piece.fraction.half::after {
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 229, 173, .48) 50%, transparent calc(50% + 1px));
}

.s4-learning-plank-piece.fraction.third::after {
  background: linear-gradient(
    90deg,
    transparent calc(33.333% - 1px),
    rgba(255, 229, 173, .48) 33.333%,
    transparent calc(33.333% + 1px) calc(66.666% - 1px),
    rgba(255, 229, 173, .48) 66.666%,
    transparent calc(66.666% + 1px)
  );
}

.s4-learning-plank-piece strong,
.s4-learning-plank-piece small {
  position: relative;
  z-index: 1;
}

.s4-learning-plank-piece strong {
  font-size: 18px;
}

.s4-learning-plank-piece small {
  color: #ffe3b2;
  font-size: 13px;
  font-weight: 900;
}

.s4-learning-plank-piece:hover {
  border-color: #ffe1a1;
  filter: brightness(1.16);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(255, 196, 105, .34), inset 0 -12px 18px rgba(56, 27, 8, .24);
}

.s4-learning-plank-piece.drag-source {
  opacity: .32;
}

.s4-learning-plank-piece.dropped {
  border-style: dashed;
  border-color: rgba(143, 255, 225, .42);
  color: rgba(190, 255, 235, .72);
  background: rgba(30, 72, 64, .3);
  box-shadow: inset 0 0 18px rgba(91, 255, 211, .08);
}

.s4-learning-plank-piece:disabled {
  cursor: default;
}

.s4-learning-plank-piece.wrong {
  border-color: #ff9d7d;
  animation: s4WrongShake .42s ease;
}

.s4-learning-plank-piece .s4-fraction {
  position: relative;
  z-index: 1;
  color: #fff7dc;
}

.s4-learning-plank-piece .s4-fraction i {
  background: #ffe1a1;
}

.s4-plank-assembly-bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 22px;
  width: min(740px, 100%);
  min-height: 78px;
  padding: 9px 16px;
  border: 2px dashed rgba(255, 218, 155, .32);
  border-radius: 10px;
  color: rgba(255, 235, 200, .7);
  background:
    linear-gradient(180deg, rgba(98, 59, 28, .28), rgba(27, 18, 12, .48)),
    repeating-linear-gradient(90deg, rgba(174, 111, 54, .12) 0 46px, transparent 47px 52px);
  font-size: 15px;
  font-weight: 850;
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  animation: s4DropPulse 1.4s ease-in-out infinite;
}

.s4-plank-assembly-bench.drag-over {
  border-color: #8fffe1;
  background: rgba(38, 105, 84, .34);
  box-shadow: 0 0 26px rgba(91, 255, 211, .28), inset 0 0 22px rgba(91, 255, 211, .1);
  animation: none;
}

.s4-plank-assembly-bench.complete {
  grid-template-columns: minmax(0, 1fr) auto;
  animation: none;
}

.s4-drop-complete-label {
  color: #9affe1;
  font-size: 18px;
  font-weight: 950;
}

.s4-dropped-planks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s4-dropped-plank,
.s4-drop-slot {
  position: relative;
  display: grid;
  place-content: center;
  width: 136px;
  height: 48px;
  border-radius: 6px;
}

.s4-dropped-plank {
  overflow: hidden;
  border: 2px solid rgba(143, 255, 225, .62);
  color: #fff1d4;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 35%),
    repeating-linear-gradient(90deg, #a66d3a 0 34px, #774824 35px 39px);
  box-shadow: 0 0 16px rgba(91, 255, 211, .2), inset 0 -8px 12px rgba(56, 27, 8, .22);
  cursor: pointer;
}

.s4-dropped-plank strong,
.s4-dropped-plank small {
  position: relative;
  z-index: 1;
}

.s4-dropped-plank small {
  color: #ffe3b2;
  font-size: 11px;
  font-weight: 900;
}

.s4-drop-slot {
  border: 2px dashed rgba(255, 220, 165, .2);
  background: rgba(0, 0, 0, .12);
}

.s4-plank-assembly-bench > small {
  color: #9affe1;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.s4-drag-ghost {
  position: fixed;
  z-index: 9999;
  margin: 0;
  pointer-events: none;
  cursor: grabbing;
  opacity: .94;
  filter: brightness(1.14);
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 18px 32px rgba(0, 0, 0, .46), 0 0 24px rgba(255, 205, 123, .24);
}

body.s4-plank-dragging,
body.s4-plank-dragging * {
  cursor: grabbing !important;
}

@keyframes s4DropPulse {
  0%, 100% { border-color: rgba(255, 218, 155, .4); box-shadow: 0 0 0 rgba(255, 210, 120, 0); }
  50% { border-color: rgba(255, 218, 155, .78); box-shadow: 0 0 18px rgba(255, 210, 120, .32); }
}

.s4-collected-planks {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.s4-collected-planks span {
  width: 122px;
  height: 46px;
  border: 2px solid rgba(255, 219, 159, .5);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 36%),
    repeating-linear-gradient(90deg, #a66d3a 0 34px, #774824 35px 39px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  animation: s4CollectWholePlank .72s ease both;
}

.s4-collected-planks span:nth-child(2) {
  animation-delay: .08s;
}

.s4-collected-planks span:nth-child(3) {
  animation-delay: .16s;
}

.s4-collected-equation {
  min-width: 190px;
  color: #9affe1;
  font-size: 30px;
  text-shadow: 0 0 16px rgba(96, 255, 216, .28);
}

@keyframes s4CollectWholePlank {
  from { opacity: 0; transform: translateY(-62px) scale(.84); filter: brightness(1.5); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

.s4-step-pill {
  padding: 7px 14px;
  border-radius: 999px;
  color: #331c08;
  background: linear-gradient(180deg, #ffe3a6, #dba45e);
  font-size: 13px;
  font-weight: 950;
}

.s4-learning-step-card p,
.s4-learning-complete p {
  margin: 0;
  color: #f3fbff;
  font-size: 20px;
  font-weight: 850;
  text-align: center;
}

.s4-piece-choice-grid .s4-answer-choice,
.s4-tick-grid .s4-answer-choice {
  min-height: 74px;
}

.s4-answer-choice .s4-fraction,
.s4-plank-card .s4-fraction,
.s4-selected-slot .s4-fraction {
  color: #fff7dc;
}

.s4-answer-choice .s4-fraction i,
.s4-plank-card .s4-fraction i,
.s4-selected-slot .s4-fraction i {
  background: #ffe1a1;
}

.s4-mini-summary,
.s4-conversion-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.s4-mini-summary {
  min-height: 72px;
  color: #fff6df;
  font-size: 30px;
  font-weight: 950;
}

.s4-mini-result {
  min-height: 54px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 216, 150, .24);
  border-radius: 12px;
  color: #ffe7b8;
  background: rgba(111, 70, 32, .22);
}

.s4-conversion-row {
  width: 100%;
}

.s4-conversion-row .s4-equation-line {
  min-width: 230px;
  min-height: 82px;
  padding: 12px 18px;
  border: 1px solid rgba(142, 238, 255, .2);
  border-radius: 12px;
  background: rgba(1, 10, 17, .42);
}

.s4-big-question {
  min-height: 82px;
  padding: 10px 24px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .22);
}

.s4-final-equation {
  min-height: 100px;
  padding: 18px 28px;
  border: 1px solid rgba(126, 255, 220, .32);
  border-radius: 16px;
  background: rgba(46, 255, 194, .07);
}

.s4-game-board {
  display: grid;
  gap: 20px;
  padding: 28px 34px 34px;
}

.s4-game-board .s4-panel-header h1 {
  font-size: 32px;
}

.s4-route-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.s4-route-track span {
  display: grid;
  place-items: center;
  min-height: 64px;
  border: 1px solid rgba(235, 196, 128, .24);
  border-radius: 10px;
  color: rgba(255, 246, 223, .64);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%),
    repeating-linear-gradient(90deg, #6a4527 0 34px, #50321d 35px 38px);
  font-size: 17px;
  font-weight: 950;
}

.s4-route-track span.open {
  color: #ffd5c3;
  border-color: rgba(255, 137, 103, .72);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.84), rgba(10, 12, 14, .72) 55%, transparent 56%),
    repeating-linear-gradient(90deg, #6a4527 0 34px, #50321d 35px 38px);
}

.s4-route-track span.active {
  color: #fff4d6;
  border-color: rgba(255, 218, 147, .76);
  box-shadow: 0 0 20px rgba(255, 194, 103, .18);
}

.s4-route-track span.repaired {
  color: #fff4d6;
  border-color: rgba(132, 255, 213, .58);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%),
    repeating-linear-gradient(90deg, #a36a38 0 34px, #764923 35px 38px);
  animation: s4FloorInstall .85s ease both;
}

.s4-route-track span.exit-open {
  color: #91ffe4;
  border-color: rgba(132, 255, 213, .76);
  box-shadow: 0 0 24px rgba(86, 255, 204, .24);
}

.s4-hole-panel {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 22px;
  border: 1px solid rgba(130, 229, 255, .22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(2, 16, 25, .78), rgba(3, 10, 15, .68)),
    radial-gradient(circle at 18% 50%, rgba(0,0,0,.62), transparent 34%);
}

.s4-hole-panel.repaired {
  border-color: rgba(133, 255, 213, .5);
  box-shadow: inset 0 0 34px rgba(85, 255, 205, .08);
}

.s4-game-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.s4-needed-length {
  margin-top: 8px;
}

.s4-needed-length > strong {
  font-size: 46px;
}

.s4-needed-length .s4-fraction strong {
  font-size: 32px;
}

.s4-selected-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  font-size: 28px;
  font-weight: 950;
}

.s4-selected-slot {
  display: grid;
  place-items: center;
  min-width: 170px;
  min-height: 86px;
  padding: 10px 14px;
  border: 2px dashed rgba(255, 215, 150, .38);
  border-radius: 12px;
  color: rgba(255, 241, 214, .74);
  background: rgba(0, 0, 0, .22);
  text-align: center;
}

.s4-storage-rail {
  display: grid;
  gap: 12px;
  min-height: 154px;
  padding: 16px 22px 22px;
  border: 1px solid rgba(224, 184, 123, .34);
  border-radius: 16px 16px 4px 4px;
  background:
    linear-gradient(180deg, rgba(30, 20, 15, .84), rgba(9, 8, 8, .9)),
    repeating-linear-gradient(90deg, rgba(176, 116, 58, .16) 0 42px, rgba(78, 48, 24, .2) 43px 48px);
  box-shadow: inset 0 14px 28px rgba(0, 0, 0, .45), 0 -10px 30px rgba(0, 0, 0, .2);
}

.s4-storage-rail:empty {
  display: none;
}

.s4-storage-label {
  color: #ffdca6;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .08em;
}

.s4-rail-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.s4-rail-cards.wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.s4-plank-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 92px;
  overflow: hidden;
  border: 2px solid rgba(226, 173, 100, .44);
  border-radius: 10px;
  color: #fff2d7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 36%),
    repeating-linear-gradient(90deg, #9e6636 0 34px, #744722 35px 39px);
  box-shadow: inset 0 -12px 18px rgba(56, 27, 8, .25), 0 8px 18px rgba(0, 0, 0, .28);
  cursor: pointer;
}

.s4-plank-card.selected {
  border-color: #ffe1a1;
  box-shadow: 0 0 26px rgba(255, 191, 103, .36), inset 0 0 0 2px rgba(255, 238, 190, .16);
  filter: brightness(1.08);
}

.s4-plank-card:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.s4-plank-grain {
  position: absolute;
  inset: 10px;
  border-top: 1px solid rgba(255, 235, 190, .16);
  border-bottom: 1px solid rgba(56, 25, 8, .22);
  pointer-events: none;
}

.s4-ending-inline {
  width: min(720px, 100%);
  text-align: center;
}

.s4-install-animation {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(170px, .7fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 218, 147, .28);
  border-radius: 12px;
  background: rgba(55, 31, 13, .42);
  box-shadow: inset 0 0 22px rgba(255, 211, 144, .06);
}

.s4-install-merge {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  animation: s4PlankMerge .86s ease both;
}

.s4-install-plank,
.s4-install-target {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 7px 14px;
  border: 2px solid rgba(255, 218, 147, .46);
  border-radius: 8px;
  color: #fff2d7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 35%),
    repeating-linear-gradient(90deg, #a66d3a 0 34px, #774824 35px 39px);
  box-shadow: inset 0 -8px 14px rgba(56, 27, 8, .22), 0 8px 16px rgba(0, 0, 0, .24);
}

.s4-install-arrow {
  color: #9ffff0;
  font-size: 28px;
  font-weight: 950;
  text-shadow: 0 0 14px rgba(86, 255, 220, .42);
}

.s4-install-target {
  border-color: rgba(133, 255, 213, .62);
  box-shadow: 0 0 24px rgba(86, 255, 204, .18), inset 0 -8px 14px rgba(56, 27, 8, .22);
  animation: s4PlankSettle .86s ease both;
}

.s4-result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.s4-result-stat {
  display: grid;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid rgba(126, 255, 220, .22);
  border-radius: 12px;
  background: rgba(2, 14, 22, .46);
}

.s4-result-stat span {
  color: #bdeef0;
  font-size: 14px;
  font-weight: 850;
}

.s4-result-stat strong {
  color: #fff6df;
  font-size: 28px;
  font-weight: 950;
}

.s4-star-row strong {
  color: #ffe18a;
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(255, 209, 104, .28);
}

.s4-ending-inline h2 {
  font-size: 42px;
}

@keyframes s4PlankMerge {
  0% { opacity: 0; transform: translateX(-36px) scale(.94); filter: brightness(1.4); }
  55% { opacity: 1; transform: translateX(12px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}

@keyframes s4PlankSettle {
  0% { transform: translateY(-18px); filter: brightness(1.7); }
  60% { transform: translateY(4px); }
  100% { transform: translateY(0); filter: brightness(1); }
}

/* =========================
   STAGE 4-2: 방법 1 — 자연수·분수 나누어 계산
========================= */

/* 4-2 / 4-3 전용: workbench 위치·높이 */
body.stage4-ui-active .s4-stage4-main:has(#s42-center-panel) {
  margin-top: calc(86px + 1.5cm);
  min-height: 680px;
  margin-bottom: 12px;
}

body.stage4-ui-active .s4-stage4-main:has(#s43-center-panel) {
  margin-top: 86px;
  min-height: 680px;
  margin-bottom: 12px;
}

#s42-center-panel,
#s43-center-panel {
  align-content: start;
  justify-items: center;
  min-height: 0;
  width: 100%;
  padding-bottom: 32px;
}

.s4-l2m-workbench {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(1280px, calc(100% - 48px));
  min-height: 700px;
  padding: 26px 34px 30px;
  margin: 0 auto;
  transform: translateY(calc(-24px + 1cm));
}

.s4-l2m-workbench.s4-workbench-card {
  gap: 0;
}

/* 4-1 공통 .s4-learning-one-header absolute 를 4-2에서만 해제 */
.s4-l2m-workbench .s4-learning-one-header,
.s4-l2m-workbench .s4-l2m-header {
  position: static;
  top: auto;
  left: auto;
  z-index: 2;
  flex-shrink: 0;
  margin: 0 0 30px;
  padding-right: 8px;
}

.s4-l2m-header h1 {
  font-size: 22px;
  line-height: 1.35;
}

.s4-l2m-zone {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  gap: 0;
  width: 100%;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
}

.s4-l2m-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  min-height: 470px;
}

.s4-l2m-left,
.s4-l2m-right {
  box-sizing: border-box;
  min-height: 470px;
  padding: 20px 22px;
  border: 1px solid rgba(143, 255, 225, .18);
  border-radius: 12px;
  background: rgba(4, 12, 18, .34);
}

.s4-l2m-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  justify-content: center;
  min-height: 540px;
  --l2m-visual-scale: 1.4;
  --l2m-plank-w: calc(52px * var(--l2m-visual-scale));
  --l2m-plank-h: calc(100px * var(--l2m-visual-scale));
  --l2m-track-min-h: calc(100px * var(--l2m-visual-scale));
  --l2m-plank-gap: calc(8px * var(--l2m-visual-scale));
  --l2m-card-label-size: calc(16px * var(--l2m-visual-scale));
  --l2m-split-label-size: calc(15px * var(--l2m-visual-scale));
  --l2m-plus-size: calc(28px * var(--l2m-visual-scale));
}

.s4-l2m-visual-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(320px * var(--l2m-visual-scale, 1));
  max-height: calc(430px * var(--l2m-visual-scale, 1));
  padding: 12px 8px 16px;
  gap: 14px;
  overflow: hidden;
}

.s4-l2m-decompose-layout {
  gap: 8px;
  justify-content: center;
}

.s4-l2m-visual-caption {
  margin: 0;
  color: rgba(205, 232, 237, .78);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.s4-l2m-split-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

.s4-l2m-split-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.s4-l2m-split-group .s4-l2m-plank-track {
  justify-content: center;
  min-height: var(--l2m-track-min-h, 100px);
  gap: var(--l2m-plank-gap, 8px);
}

.s4-l2m-split-group .s4-l2m-whole,
.s4-l2m-split-group .s4-l2m-fraction {
  width: var(--l2m-plank-w, 52px);
  height: var(--l2m-plank-h, 100px);
}

.s4-l2m-split-group .s4-l2m-fraction-model {
  height: 100%;
}

.s4-l2m-split-label {
  margin: 0;
  color: rgba(255, 248, 232, .9);
  font-size: var(--l2m-split-label-size, 15px);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.s4-l2m-split-label .s4-fraction strong {
  font-size: calc(13px * var(--l2m-visual-scale, 1));
  line-height: .92;
}

.s4-l2m-split-label .s4-fraction i {
  width: 1.1em;
  min-width: 1.1em;
  height: 2px;
  margin: 2px 0;
  background: #ffe1a1;
}

.is-split-layout.is-highlight-whole .is-whole-group,
.is-decompose-layout.is-highlight-whole .is-whole-group {
  filter: brightness(1.06);
}

.is-split-layout.is-highlight-frac .is-frac-group,
.is-split-layout.is-highlight-merged .is-frac-group,
.is-decompose-layout.is-highlight-frac .is-frac-group,
.is-decompose-layout.is-highlight-merged .is-frac-group {
  filter: brightness(1.06);
}

.s4-l2m-reference-row {
  width: 100%;
  padding: 4px 0 2px;
}

.s4-l2m-reference-row.is-settled {
  opacity: .82;
}

.s4-l2m-reference-row .s4-l2m-source-row {
  padding-bottom: 0;
}

.s4-l2m-decompose-arrow {
  color: rgba(143, 255, 225, .72);
  font-size: calc(22px * var(--l2m-visual-scale, 1));
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 10px rgba(91, 255, 211, .16);
}

.s4-l2m-split-row.is-drop-row .s4-l2m-drop-zone {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: calc(6px * var(--l2m-visual-scale, 1));
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.s4-l2m-drop-zone[data-l2-drop="whole-drop"] {
  width: min(100%, calc(var(--l2m-plank-w) * 3 + var(--l2m-plank-gap) * 2 + 20px));
  min-height: calc(var(--l2m-plank-h) + 16px);
  max-height: calc(var(--l2m-plank-h) + 16px);
  height: calc(var(--l2m-plank-h) + 16px);
}

.s4-l2m-drop-zone[data-l2-drop="whole-drop"] .s4-l2m-whole {
  width: calc(var(--l2m-plank-w) * 0.9);
  height: calc(var(--l2m-plank-h) * 0.9);
  flex-shrink: 1;
}

.s4-l2m-drop-zone[data-l2-drop="frac-drop"] {
  width: min(100%, calc(var(--l2m-plank-w) * 2 + var(--l2m-plank-gap) + 20px));
  min-height: calc(var(--l2m-plank-h) + 16px);
  max-height: calc(var(--l2m-plank-h) + 16px);
  height: calc(var(--l2m-plank-h) + 16px);
}

.s4-l2m-drop-zone[data-l2-drop="frac-drop"] .s4-l2m-fraction {
  width: calc(var(--l2m-plank-w) * 0.9);
  height: calc(var(--l2m-plank-h) * 0.9);
  flex-shrink: 1;
}

.s4-l2m-split-row.is-drop-row .s4-l2m-split-group {
  min-width: calc(150px * var(--l2m-visual-scale, 1));
  max-width: calc(210px * var(--l2m-visual-scale, 1));
}

.s4-l2m-left-benches {
  display: none;
}

.s4-l2m-source-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  padding: 4px 0 8px;
}

.s4-l2m-source-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.s4-l2m-source-plus {
  flex-shrink: 0;
  color: rgba(255, 248, 232, .88);
  font-size: var(--l2m-plus-size, 28px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px rgba(126, 232, 255, .16);
}

.s4-l2m-source-card .s4-l2m-plank-track {
  justify-content: center;
  min-height: var(--l2m-track-min-h, 100px);
  gap: calc(10px * var(--l2m-visual-scale, 1));
}

.s4-l2m-source-card .s4-l2m-whole,
.s4-l2m-source-card .s4-l2m-fraction {
  width: var(--l2m-plank-w, 52px);
  height: var(--l2m-plank-h, 100px);
}

.s4-l2m-source-card .s4-l2m-fraction-model {
  height: 100%;
}

.s4-l2m-source-card .s4-l2m-plank-label {
  text-align: center;
  color: rgba(255, 248, 232, .92);
  font-size: var(--l2m-card-label-size, 16px);
  font-weight: 900;
}

.s4-l2m-source-card .s4-l2m-plank-label .s4-mixed > strong {
  font-size: calc(16px * var(--l2m-visual-scale, 1));
}

.s4-l2m-source-card .s4-l2m-plank-label .s4-fraction strong {
  font-size: calc(13px * var(--l2m-visual-scale, 1));
}

.s4-l2m-left .s4-l2m-drop-zone .s4-l2m-fraction-model {
  height: 100%;
}

.s4-l2m-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px 26px 20px 10px;
  overflow: visible;
  --l2m-eq-scale: 1.4;
}

.s4-l2m-plank-group {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(100%, 360px);
}

.s4-l2m-plank-label {
  color: rgba(255, 248, 232, .86);
  font-size: 15px;
  font-weight: 900;
}

.s4-l2m-plank-label .s4-mixed > strong {
  font-size: 16px;
}

.s4-l2m-plank-label .s4-fraction strong {
  font-size: 13px;
  line-height: .92;
}

.s4-l2m-plank-label .s4-fraction i {
  width: 1.15em;
  min-width: 1.15em;
  height: 2px;
  margin: 2px 0;
  background: #ffe1a1;
}

.s4-l2m-plank-track {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
}

.s4-l2m-bench-track {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  min-height: 96px;
}

.s4-l2m-bench.is-whole-bench .s4-l2m-bench-track {
  gap: 14px;
  padding: 18px 24px;
  min-height: 108px;
}

.s4-l2m-bench.is-frac-bench .s4-l2m-bench-track {
  gap: 20px;
  padding: 20px 24px;
  min-height: 108px;
}

.s4-l2m-bench.is-frac-bench.is-merging .s4-l2m-bench-track {
  gap: 0;
  justify-content: center;
}

.s4-l2m-frac-merge-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.s4-l2m-frac-merge-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
}

.s4-l2m-frac-merge-plus {
  flex-shrink: 0;
  color: rgba(255, 248, 232, .88);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  align-self: center;
}

.s4-l2m-frac-merge-glow {
  flex-shrink: 0;
  color: #fff8e8;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  align-self: center;
  text-shadow: 0 0 10px rgba(255, 220, 147, .92), 0 0 22px rgba(91, 255, 211, .48);
  animation: s4-l2m-merge-pulse 0.45s ease-in-out infinite alternate;
}

.s4-l2m-merge-add-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(143, 255, 225, .42);
  background: rgba(8, 32, 40, .62);
  color: rgba(255, 248, 232, .92);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
  box-shadow: inset 0 0 10px rgba(91, 255, 211, .06);
}

.s4-l2m-merge-add-btn:hover {
  border-color: rgba(143, 255, 225, .62);
  background: rgba(12, 42, 52, .78);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(91, 255, 211, .14);
}

.s4-l2m-frac-merge-stage.is-animating .s4-l2m-frac-merge-row {
  gap: 10px;
  transition: gap 0.35s ease;
}

.s4-l2m-frac-merge-stage.is-animating .s4-l2m-fraction.is-merge-six {
  animation: s4-l2m-merge-shift-right 0.65s ease forwards;
}

.s4-l2m-frac-merge-stage.is-animating .s4-l2m-fraction.is-merge-one {
  animation: s4-l2m-merge-shift-left 0.65s ease forwards;
}

.s4-l2m-frac-merge-stage.is-animating .s4-l2m-frac-merge-row .s4-l2m-fraction {
  animation: s4-l2m-merge-fade-out 0.65s ease forwards;
}

@keyframes s4-l2m-merge-pulse {
  from {
    opacity: 0.72;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.14);
  }
}

@keyframes s4-l2m-merge-shift-right {
  0%,
  40% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(10px);
  }
}

@keyframes s4-l2m-merge-shift-left {
  0%,
  40% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-10px);
  }
}

@keyframes s4-l2m-merge-fade-out {
  0%,
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
}

.s4-l2m-bench.is-whole-bench .s4-l2m-whole {
  margin: 0 4px;
}

.s4-l2m-bench.is-frac-bench .s4-l2m-fraction,
.s4-l2m-frac-merge-btn.s4-l2m-fraction {
  margin: 0 6px;
}

.s4-l2m-fraction.is-in-bench,
.s4-l2m-frac-merge-btn.s4-l2m-fraction {
  width: 48px;
  height: 96px;
  flex-shrink: 0;
}

.s4-l2m-frac-merge-btn.s4-l2m-fraction {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.s4-l2m-fraction.is-in-bench.is-mergeable {
  cursor: pointer;
}

.s4-l2m-fraction.is-in-bench.is-selected,
.s4-l2m-frac-merge-btn.s4-l2m-fraction.is-selected {
  outline: 2px solid rgba(255, 220, 147, .72);
  outline-offset: 2px;
  border-radius: 7px;
  box-shadow: 0 0 14px rgba(255, 220, 147, .18);
}

.s4-l2m-fraction.is-in-bench.is-merged-result {
  transform: scale(1.06);
}

.s4-l2m-fraction.is-in-bench .s4-l2m-fraction-model {
  border: 1px solid rgba(255, 232, 178, .12);
}

.s4-l2m-fraction.has-eighth-grid .s4-l2m-fraction-grid span {
  border-bottom: 1px solid rgba(255, 229, 173, .36);
}

.s4-l2m-fraction.has-fourth-grid .s4-l2m-fraction-grid span {
  border-bottom: 2px solid rgba(255, 229, 173, .42);
}

.s4-l2m-left-hint {
  width: 100%;
  text-align: center;
}

.s4-l2m-left-hint-text {
  margin: 0;
  color: rgba(255, 220, 147, .82);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.s4-l2m-lcd-denom-label {
  color: rgba(255, 248, 232, .88);
  font-size: calc(16px * var(--l2m-eq-scale, 1));
  font-weight: 800;
}

.s4-l2m-right .s4-l2m-lcd-denom-label {
  font-size: calc(16px * var(--l2m-eq-scale, 1));
}

.s4-l2m-bench {
  margin-top: 4px;
  padding-top: 14px;
  width: 100%;
  border-top: 1px dashed rgba(143, 255, 225, .24);
}

.s4-l2m-bench-label {
  margin: 0 0 8px;
  color: rgba(205, 232, 237, .72);
  font-size: 12px;
  font-weight: 800;
}

.s4-l2m-whole,
.s4-l2m-fraction,
.s4-l2m-whole-btn,
.s4-l2m-frac-btn {
  position: relative;
  flex-shrink: 0;
}

.s4-l2m-whole,
.s4-l2m-whole-btn {
  width: 48px;
  height: 96px;
  border: 0;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
  box-shadow: inset 0 -10px 16px rgba(56, 27, 8, .28), inset 0 0 0 1px rgba(255, 232, 178, .1), 0 4px 10px rgba(0, 0, 0, .2);
}

.s4-l2m-whole-btn,
.s4-l2m-frac-btn {
  padding: 0;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.s4-l2m-whole-btn:hover:not(.is-selected),
.s4-l2m-frac-btn:hover:not(.is-selected) {
  transform: translateY(-2px);
}

.s4-l2m-fraction,
.s4-l2m-frac-btn {
  width: 48px;
  height: 96px;
}

.s4-l2m-fraction-model {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #8b542c, #6d4022);
  box-shadow: inset 0 -10px 16px rgba(24, 12, 5, .34), 0 4px 10px rgba(0, 0, 0, .2);
}

.s4-l2m-fraction-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  height: 100%;
}

.s4-l2m-fraction-grid span {
  border-bottom: 2px solid rgba(255, 229, 173, .42);
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 26%, rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(58, 35, 20, .74), rgba(35, 22, 14, .82));
}

.s4-l2m-fraction-grid span:last-child {
  border-bottom: 0;
}

.s4-l2m-fraction-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0,0,0,.14)),
    linear-gradient(180deg, #ad7240, #8b542c 54%, #6f4120);
}

.s4-l2m-fraction.has-eighth-ticks::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: 40px;
  height: 6px;
  background:
    radial-gradient(circle, rgba(110, 200, 255, .95) 2px, transparent 2.5px) 0 50% / 10px 6px repeat-x;
  pointer-events: none;
}

.s4-l2m-whole.is-emphasis,
.s4-l2m-fraction.is-emphasis:not(.is-in-bench),
.s4-l2m-whole-btn.is-emphasis,
.s4-l2m-frac-btn.is-emphasis {
  outline: 2px solid rgba(143, 255, 225, .62);
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(91, 255, 211, .22);
}

.s4-l2m-whole.is-dim,
.s4-l2m-fraction.is-dim {
  opacity: .34;
}

.s4-l2m-whole-btn.is-selected,
.s4-l2m-frac-btn.is-selected,
.s4-l2m-whole.is-selected {
  outline: 2px solid rgba(255, 220, 147, .72);
  outline-offset: 2px;
  box-shadow: 0 0 16px rgba(255, 220, 147, .28);
}

.s4-l2m-result-left {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.s4-l2m-bench-track.is-result {
  justify-content: center;
  min-height: 96px;
}

.s4-l2m-result-tag {
  color: #fff8e8;
  font-size: 18px;
  font-weight: 950;
}

.s4-l2m-equations {
  display: grid;
  gap: 14px;
  width: 100%;
  flex: 1;
  align-content: start;
}

.s4-l2m-eq-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .28em .34em;
  color: rgba(238, 246, 255, .72);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.s4-l2m-eq-line.is-level-hero,
.s4-l2m-eq-line.is-active {
  color: #eef6ff;
  font-size: 28px;
  text-shadow: 0 0 16px rgba(126, 232, 255, .18);
}

.s4-l2m-eq-line.is-level-dim,
.s4-l2m-eq-line.is-secondary {
  color: rgba(238, 246, 255, .48);
  font-size: 17px;
}

.s4-l2m-eq-line.is-focus {
  color: #fff8e8;
  font-size: 24px;
}

.s4-l2m-eq-line .s4-mixed > strong {
  font-size: 1em;
}

.s4-l2m-eq-line .s4-fraction strong {
  font-size: .88em;
  line-height: .92;
}

.s4-l2m-eq-line .s4-fraction i {
  width: 1.1em;
  min-width: 1.1em;
  height: 2px;
  margin: 2px 0;
  background: #ffe1a1;
}

.s4-l2m-blank {
  width: 34px !important;
  height: 30px !important;
  font-size: 20px !important;
}

.s4-l2m-filled {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 4px;
  border-radius: 6px;
  color: #fff8e8;
  background: rgba(45, 126, 105, .28);
  font-size: 22px;
  font-weight: 950;
}

.s4-l2m-blank-slot {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 30px;
  border: 2px dashed rgba(143, 255, 225, .42);
  border-radius: 6px;
  color: rgba(143, 255, 225, .55);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.s4-l2m-confirm-row {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

.s4-l2m-confirm {
  min-width: 88px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 14px;
}

.s4-l2m-action {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.s4-l2m-placeholder {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 360px;
  padding: 40px 24px;
  text-align: center;
  color: #eef6ff;
}

.s4-l2m-placeholder-note {
  margin: 0;
  color: rgba(205, 232, 237, .68);
  font-size: 14px;
  font-weight: 700;
}

/* ── 4-2 drag & workbench ── */

.s4-l2m-drag-item.is-draggable {
  cursor: grab;
  touch-action: none;
}

.s4-l2m-drag-item.is-dragging {
  opacity: .55;
  cursor: grabbing;
}

.s4-l2m-whole.is-ghost,
.s4-l2m-fraction.is-ghost {
  opacity: .18;
  pointer-events: none;
}

.s4-l2m-drop-zone {
  min-height: 108px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px dashed rgba(143, 255, 225, .22);
  background: rgba(8, 20, 28, .28);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.s4-l2m-drop-zone.is-active.is-drop-hover,
.s4-l2m-bench.is-active .s4-l2m-drop-zone.is-drop-hover {
  border-color: rgba(143, 255, 225, .62);
  background: rgba(24, 58, 52, .32);
  box-shadow: inset 0 0 18px rgba(91, 255, 211, .12);
}

.s4-l2m-bench.is-active .s4-l2m-bench-label {
  color: rgba(205, 248, 237, .92);
}

.s4-l2m-whole.is-placed {
  animation: s4-l2m-pop .28s ease;
}

@keyframes s4-l2m-pop {
  0% { transform: scale(.88); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.s4-l2m-tool-rail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.s4-l2m-tool-hint {
  margin: 0;
  color: rgba(205, 232, 237, .62);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.s4-l2m-ruler {
  display: grid;
  gap: 4px;
  justify-items: center;
  flex-shrink: 0;
}

.s4-l2m-ruler-body {
  display: block;
  width: 52px;
  height: 14px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(110, 200, 255, .95) 2px, transparent 2px) 0 50% / 8px 100% repeat-x,
    linear-gradient(180deg, #5a8fb8, #3d6f96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.s4-l2m-ruler-label {
  color: rgba(205, 232, 237, .78);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* ── 4-2 aligned equations ── */

.s4-l2m-eq-aligned {
  padding-left: 4px;
}

.s4-l2m-eq-row {
  display: grid;
  grid-template-columns: minmax(7.5em, auto) 1.1em minmax(0, 1fr);
  align-items: center;
  gap: .35em .45em;
  color: rgba(238, 246, 255, .72);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  text-align: left;
}

.s4-l2m-eq-row.is-level-hero {
  color: #eef6ff;
  font-size: 24px;
}

.s4-l2m-eq-row.is-level-focus,
.s4-l2m-eq-row.is-state-active {
  color: #fff8e8;
  font-size: 20px;
}

.s4-l2m-eq-row.is-level-secondary,
.s4-l2m-eq-row.is-state-done {
  color: rgba(238, 246, 255, .46);
  font-size: 16px;
}

.s4-l2m-eq-row.is-state-active .s4-l2m-blank {
  border-color: rgba(255, 220, 147, .72);
  box-shadow: 0 0 12px rgba(255, 220, 147, .18);
}

.s4-l2m-eq-lhs {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.s4-l2m-eq-sign {
  text-align: center;
  color: rgba(205, 232, 237, .82);
}

.s4-l2m-eq-rhs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28em .34em;
}

.s4-l2m-inline-confirm {
  margin-left: 6px;
  padding: 2px 10px;
  border: 1px solid rgba(143, 255, 225, .34);
  border-radius: 6px;
  background: rgba(24, 58, 52, .42);
  color: rgba(220, 248, 240, .9);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.s4-l2m-inline-confirm:hover {
  background: rgba(36, 88, 76, .55);
  border-color: rgba(143, 255, 225, .55);
}

.s4-l2m-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(45, 126, 105, .34);
  color: rgba(205, 248, 237, .88);
  font-size: 11px;
  font-weight: 800;
}

.s4-l2m-input-frac {
  display: inline-grid;
  justify-items: center;
  vertical-align: middle;
  gap: 1px;
}

.s4-l2m-input-frac .s4-l2m-blank {
  width: 30px !important;
  height: 26px !important;
  font-size: 16px !important;
  margin: 0;
}

.s4-l2m-input-frac i {
  display: block;
  width: 1.1em;
  min-width: 1.1em;
  height: 2px;
  margin: 1px 0;
  background: #ffe1a1;
}

.s4-l2m-input-frac strong {
  font-size: .88em;
  line-height: .92;
}

.s4-l2m-final-mixed {
  display: inline-flex;
  align-items: center;
  gap: .28em;
}

.s4-l2m-eq-row .s4-mixed > strong,
.s4-l2m-eq-row .s4-fraction strong {
  font-size: inherit;
}

.s4-l2m-eq-row .s4-fraction strong {
  font-size: .88em;
  line-height: .92;
}

.s4-l2m-eq-row .s4-fraction i {
  width: 1.1em;
  min-width: 1.1em;
  height: 2px;
  margin: 2px 0;
  background: #ffe1a1;
}

.s4-l2m-slot {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 26px;
  border: 2px dashed rgba(143, 255, 225, .52);
  border-radius: 5px;
  color: rgba(255, 248, 232, .82);
  font-size: 16px;
  font-weight: 900;
}

.s4-l2m-frac-given {
  display: inline-flex;
  align-items: center;
}

.s4-l2m-whole-aux {
  width: min(100%, 420px);
  margin: 4px 0 2px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(143, 255, 225, .2);
  background: rgba(8, 22, 30, .38);
}

.s4-l2m-whole-aux.is-active {
  border-color: rgba(143, 255, 225, .46);
  box-shadow: inset 0 0 14px rgba(91, 255, 211, .08);
}

.s4-l2m-whole-aux.is-done {
  border-color: rgba(143, 255, 225, .28);
  opacity: .92;
}

.s4-l2m-whole-aux-title {
  margin: 0 0 8px;
  color: rgba(205, 232, 237, .78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.s4-l2m-whole-aux.is-active .s4-l2m-whole-aux-title,
.s4-l2m-whole-aux.is-done .s4-l2m-whole-aux-title {
  color: rgba(220, 248, 240, .9);
}

.s4-l2m-whole-aux-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.s4-l2m-whole-aux-expr {
  color: rgba(255, 248, 232, .88);
  font-size: calc(18px * var(--l2m-eq-scale, 1));
  font-weight: 900;
}

.s4-l2m-whole-aux-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.s4-l2m-frac-slot .s4-l2m-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  font-size: 13px;
}

.s4-l2m-frac-slot i {
  display: block;
  width: 100%;
  height: 2px;
  margin: 2px 0;
  background: rgba(255, 225, 161, .72);
}

.s4-l2m-eq-row.is-main-equation,
.s4-l2m-eq-row.is-main-equation .s4-mixed,
.s4-l2m-eq-row.is-main-equation .s4-fraction strong {
  color: #fff8e8;
}

.s4-l2m-eq-row.is-main-equation .s4-fraction i {
  background: #ffe1a1;
}

.s4-l2m-frac-slot.is-disabled .s4-l2m-slot {
  border-style: dotted;
}

.s4-l2m-input-frac.is-disabled {
  opacity: .42;
}

.s4-l2m-lcd-prompt {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(143, 255, 225, .22);
  background: rgba(8, 22, 30, .42);
}

.s4-l2m-lcd-prompt.is-active {
  border-color: rgba(143, 255, 225, .48);
  box-shadow: inset 0 0 14px rgba(91, 255, 211, .08);
}

.s4-l2m-lcd-question,
.s4-l2m-eq-question p {
  margin: 0 0 8px;
  color: rgba(220, 248, 240, .88);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.s4-l2m-lcd-input-row,
.s4-l2m-eq-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.s4-l2m-eq-question {
  padding: 4px 0 2px;
}

.s4-l2m-eq-question.is-active p {
  color: #fff8e8;
}

.s4-l2m-eq-note {
  padding: 2px 0 6px;
}

.s4-l2m-eq-note p {
  margin: 0;
  color: rgba(205, 232, 237, .82);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.s4-l2m-eq-note.is-active p {
  color: rgba(255, 248, 232, .92);
}

.s4-l2m-eq-note.is-done p {
  color: rgba(205, 232, 237, .58);
  font-size: 14px;
}

.s4-l2m-eq-note .s4-fraction strong {
  font-size: 13px;
  line-height: .92;
}

.s4-l2m-eq-note .s4-fraction i {
  width: 1.1em;
  min-width: 1.1em;
  height: 2px;
  margin: 2px 0;
  background: #ffe1a1;
}

.s4-l2m-eq-row.is-convert-done {
  margin-bottom: 2px;
}

.s4-l2m-lcd-unit {
  color: rgba(205, 232, 237, .78);
  font-size: 15px;
  font-weight: 800;
}

.s4-l2m-merge-hint {
  width: 100%;
  text-align: center;
}

.s4-l2m-merge-hint-text {
  margin: 0;
  color: rgba(255, 220, 147, .82);
  font-size: 12px;
  font-weight: 800;
}

/* 4-2 오른쪽 수식 — 단계마다 크기 통일 (확인 버튼 왼쪽 기준) */
.s4-l2m-right .s4-l2m-eq-row.is-eq-uniform,
.s4-l2m-right .s4-l2m-eq-row.is-eq-uniform.is-level-secondary,
.s4-l2m-right .s4-l2m-eq-row.is-eq-uniform.is-state-done,
.s4-l2m-right .s4-l2m-eq-row.is-problem-only.is-eq-uniform {
  font-size: calc(20px * var(--l2m-eq-scale));
  color: #fff8e8;
}

.s4-l2m-right .s4-l2m-eq-row.is-eq-uniform.is-state-done {
  color: rgba(255, 248, 232, .9);
}

.s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-mixed > strong,
.s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-fraction strong {
  font-size: 1em;
  line-height: .92;
}

.s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-fraction i {
  width: 1.1em;
  min-width: 1.1em;
}

/* 4-2 오른쪽 수식·입력 1.4× (--l2m-eq-scale on .s4-l2m-right) */
.s4-l2m-right .s4-l2m-eq-row {
  font-size: calc(18px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-eq-row.is-level-hero {
  font-size: calc(24px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-eq-row.is-level-focus,
.s4-l2m-right .s4-l2m-eq-row.is-state-active {
  font-size: calc(20px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-eq-row.is-level-secondary,
.s4-l2m-right .s4-l2m-eq-row.is-state-done {
  font-size: calc(16px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-blank {
  width: calc(34px * var(--l2m-eq-scale)) !important;
  height: calc(30px * var(--l2m-eq-scale)) !important;
  font-size: calc(20px * var(--l2m-eq-scale)) !important;
}

.s4-l2m-right .s4-l2m-filled {
  min-width: calc(28px * var(--l2m-eq-scale));
  min-height: calc(28px * var(--l2m-eq-scale));
  font-size: calc(22px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-slot {
  min-width: calc(28px * var(--l2m-eq-scale));
  min-height: calc(26px * var(--l2m-eq-scale));
  font-size: calc(16px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-input-frac .s4-l2m-blank {
  width: calc(30px * var(--l2m-eq-scale)) !important;
  height: calc(26px * var(--l2m-eq-scale)) !important;
  font-size: calc(16px * var(--l2m-eq-scale)) !important;
}

.s4-l2m-right .s4-l2m-lcd-question,
.s4-l2m-right .s4-l2m-eq-question p {
  font-size: calc(13px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-lcd-unit {
  font-size: calc(15px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-inline-confirm {
  font-size: calc(12px * var(--l2m-eq-scale));
  padding: calc(2px * var(--l2m-eq-scale)) calc(10px * var(--l2m-eq-scale));
}

.s4-l2m-right .s4-l2m-badge {
  font-size: calc(11px * var(--l2m-eq-scale));
}

/* 4-2 오른쪽 수식 — 잘림 방지·왼쪽 정렬 */
.s4-l2m-right .s4-l2m-equations,
.s4-l2m-right .s4-l2m-eq-aligned {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-top: 1.5cm;
  padding-left: 1.5cm;
  padding-right: 4px;
}

.s4-l2m-right .s4-l2m-eq-row {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, auto) 0.85em minmax(0, 1fr);
  column-gap: 0.32em;
}

.s4-l2m-right .s4-l2m-eq-rhs {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.s4-l2m-right .s4-l2m-eq-row.is-problem-only {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  width: 100%;
}

.s4-l2m-right .s4-l2m-eq-row.is-problem-only .s4-l2m-eq-sign,
.s4-l2m-right .s4-l2m-eq-row.is-problem-only .s4-l2m-eq-rhs {
  display: none;
}

.s4-l2m-right .s4-l2m-eq-row.is-problem-only .s4-l2m-eq-lhs {
  justify-self: start;
  text-align: left;
  width: auto;
}

.s4-l2m-eq-row.is-problem-only,
.s4-l2m-eq-row.is-problem-only .s4-mixed,
.s4-l2m-eq-row.is-problem-only .s4-fraction strong {
  color: #fff8e8;
}

.s4-l2m-eq-row.is-problem-only .s4-fraction i {
  background: #ffe1a1;
}

.s4-l2m-right .s4-l2m-eq-row.is-main-equation {
  width: 100%;
  max-width: 100%;
}

.s4-l2m-right .s4-l2m-eq-row.is-main-equation .s4-l2m-eq-rhs {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.s4-l2m-complete-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.s4-l2m-next-method-btn {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(143, 255, 225, .34);
  border-radius: 8px;
  color: #eef6ff;
  background: rgba(28, 72, 88, .42);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.s4-l2m-next-method-btn:hover {
  border-color: rgba(143, 255, 225, .58);
  background: rgba(36, 92, 108, .52);
}

/* s42 — s41 학습지 스타일 통일 (s42 전용) */
#s42-center-panel .s42-learning-workbench.s4-l2m-workbench {
  width: min(1220px, calc(100% - 80px));
  transform: none;
}

#s42-center-panel .s42-learning-workbench.s4-workbench-card {
  --s42-panel-inset: 34px;
  width: min(1220px, calc(100% - 80px));
  min-height: calc(720px - 1.5cm + var(--s42-panel-inset));
  height: calc(720px - 1.5cm + var(--s42-panel-inset));
  max-height: calc(720px - 1.5cm + var(--s42-panel-inset));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px var(--s42-panel-inset) var(--s42-panel-inset);
  margin: 0 auto;
  border: 1px solid rgba(220, 220, 220, 0.9);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.975), rgba(244, 235, 222, 0.965)),
    radial-gradient(circle at 18% 20%, rgba(207, 162, 112, 0.08), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(173, 123, 76, 0.06), transparent 36%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

#s42-center-panel .s42-learning-workbench .s42-sheet-header {
  position: static;
  display: block;
  width: auto;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(184, 145, 98, 0.42);
  text-align: left;
}

#s42-center-panel .s42-learning-workbench .s42-sheet-title {
  margin: 0;
  color: #7a4a24;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: none;
}

#s42-center-panel .s42-learning-workbench .s42-learning-zone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-body {
  min-height: 0;
  gap: 20px;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-left,
#s42-center-panel .s42-learning-workbench .s4-l2m-right {
  min-height: 0;
  padding: 18px 20px;
  border: 1px solid rgba(210, 218, 226, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 234, 0.96));
  box-shadow: 0 10px 22px rgba(24, 34, 45, 0.08);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-left {
  --l2m-visual-scale: 1;
  --s42-plank-w: 76px;
  --s42-plank-h: 154px;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-plank-track.s4-l1-preview-planks,
#s42-center-panel .s42-learning-workbench .s42-plank-stage .s4-l1-preview-planks {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
  min-height: var(--s42-plank-h);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-split-group .s4-l2m-plank-track {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
  min-height: var(--s42-plank-h);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-whole,
#s42-center-panel .s42-learning-workbench .s4-l2m-fraction,
#s42-center-panel .s42-learning-workbench .s4-l2m-whole-btn,
#s42-center-panel .s42-learning-workbench .s4-l2m-frac-btn {
  width: var(--s42-plank-w, 76px);
  height: var(--s42-plank-h, 154px);
  border: 0;
  background: transparent;
  box-shadow: none;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-unit {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-whole-block,
#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-model {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(99, 61, 28, 0.05) 80%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
  box-shadow: 0 6px 12px rgba(72, 50, 29, 0.12);
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-whole-block .s4-plank-grain {
  display: none;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-model {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 30%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, #eed8bb, #dbbf9c);
  box-shadow: 0 6px 12px rgba(72, 50, 29, 0.08);
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  height: 100%;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid span {
  border-right: 0;
  border-bottom: 2px solid rgba(217, 188, 150, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 28%, rgba(131, 92, 54, 0.04)),
    linear-gradient(180deg, rgba(246, 231, 210, 0.98), rgba(224, 202, 172, 0.96));
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid span:last-child {
  border-bottom: 0;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(99, 61, 28, 0.08) 78%, rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
}

#s42-center-panel .s42-learning-workbench .is-mixed-layout .s4-l2m-whole.is-source-muted,
#s42-center-panel .s42-learning-workbench .is-mixed-layout .s4-l2m-fraction.is-source-muted {
  opacity: 1;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-plank-label.s4-l1-preview-label .textbook-math {
  --math-fs: 30px;
  --game-math-color: #111111;
  --game-math-bar: #111111;
  color: #111111;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-plank-label.s4-l1-preview-label .textbook-math .tm-whole,
#s42-center-panel .s42-learning-workbench .s4-l2m-plank-label.s4-l1-preview-label .textbook-math .s4-mixed > strong {
  font-size: var(--math-fs);
  font-weight: 900;
  line-height: 1;
  color: #111111;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-plank-label.s4-l1-preview-label .textbook-math .tm-bar {
  background: #111111;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-visual-caption,
#s42-center-panel .s42-learning-workbench .s4-l2m-split-label,
#s42-center-panel .s42-learning-workbench .s4-l2m-left-hint-text,
#s42-center-panel .s42-learning-workbench .s4-l2m-lcd-denom-label,
#s42-center-panel .s42-learning-workbench .s4-l2m-lcd-question,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-question p,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-note p,
#s42-center-panel .s42-learning-workbench .s4-l2m-merge-hint-text {
  color: #17384d;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-source-plus,
#s42-center-panel .s42-learning-workbench .s4-l2m-decompose-arrow,
#s42-center-panel .s42-learning-workbench .s4-l2m-frac-merge-plus {
  color: #111111;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-source-card.s4-l1-preview-card {
  gap: 12px;
  padding: 16px 18px 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-fraction.has-eighth-ticks::before {
  display: none;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-plank-label.s4-l1-preview-label,
#s42-center-panel .s42-learning-workbench .s4-l2m-plank-label.s4-l1-preview-label .textbook-math {
  color: #111111;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-drop-zone {
  border: 1px dashed rgba(192, 157, 115, 0.48);
  border-radius: 16px;
  background: rgba(255, 252, 247, 0.72);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-drop-zone.is-active.is-drop-hover,
#s42-center-panel .s42-learning-workbench .s4-l2m-bench.is-active .s4-l2m-drop-zone.is-drop-hover {
  border-color: rgba(199, 144, 89, 0.88);
  background: rgba(255, 248, 238, 0.96);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line {
  color: #17384d;
  text-shadow: none;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row.is-level-hero,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row.is-state-active,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row.is-level-focus,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line.is-level-hero,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line.is-active,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line.is-focus {
  color: #111111;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row.is-level-secondary,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row.is-state-done,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line.is-level-dim,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line.is-secondary {
  color: rgba(23, 56, 77, 0.72);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row .textbook-math,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line .textbook-math {
  --math-fs: 1em;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row .textbook-math .tm-whole,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row .textbook-math .tm-num,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row .textbook-math .tm-den {
  font-size: var(--math-fs);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row .s4-fraction i,
#s42-center-panel .s42-learning-workbench .s4-l2m-input-frac i {
  background: rgba(194, 151, 98, 0.92);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-filled {
  color: #17384d;
  background: rgba(255, 248, 238, 0.96);
  border: 1px solid rgba(194, 151, 98, 0.42);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-blank,
#s42-center-panel .s42-learning-workbench .s4-l2m-input-frac .s4-l2m-blank {
  border: 1px solid rgba(194, 151, 98, 0.55);
  background: #fffdf8;
  color: #17384d;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-inline-confirm {
  border: 1px solid rgba(143, 102, 62, 0.55);
  background: linear-gradient(180deg, #c79059, #a86c3c);
  color: #fffdf8;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-inline-confirm:hover {
  filter: brightness(1.05);
  border-color: rgba(143, 102, 62, 0.72);
  background: linear-gradient(180deg, #d09a63, #b07442);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-badge {
  color: #7a4a24;
  background: rgba(255, 241, 214, 0.72);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-next-method-btn.s4-primary-btn.wood {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid rgba(143, 102, 62, 0.55);
  color: #fffdf8;
  background: linear-gradient(180deg, #c79059, #a86c3c);
  box-shadow: 0 8px 16px rgba(89, 58, 33, 0.18);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-next-method-btn.s4-primary-btn.wood:hover {
  transform: translateY(-1px);
  filter: none;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-whole.is-emphasis:not(.is-placed),
#s42-center-panel .s42-learning-workbench .s4-l2m-fraction.is-emphasis:not(.is-placed),
#s42-center-panel .s42-learning-workbench .s4-l2m-whole.is-emphasis,
#s42-center-panel .s42-learning-workbench .s4-l2m-fraction.is-emphasis {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-whole.is-source-muted,
#s42-center-panel .s42-learning-workbench .s4-l2m-fraction.is-source-muted {
  opacity: 0.42;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-split-label .s4-fraction i,
#s42-center-panel .s42-learning-workbench .s4-l2m-plank-label .s4-fraction i,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-line .s4-fraction i,
#s42-center-panel .s42-learning-workbench .s4-l2m-eq-row .s4-fraction i {
  background: rgba(194, 151, 98, 0.92);
}

#s42-center-panel .s42-learning-workbench .s4-l2m-complete-actions,
#s42-center-panel .s42-learning-workbench .s42-complete-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

/* s42 v3 — 배치 교정: 왼쪽 그림만 / 오른쪽 수식·질문 분리 / 패널 overflow */
#s42-center-panel .s42-learning-workbench .s42-split-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  flex: 0 0 calc(100% - 27px);
  width: 100%;
  min-height: 0;
  height: calc(100% - 27px);
  max-height: calc(100% - 27px);
  margin-top: -5px;
  overflow: visible;
}

#s42-center-panel .s42-learning-workbench .s42-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  max-width: 100%;
  padding: 18px 14px;
  border: 1px solid rgba(210, 218, 226, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 234, 0.96));
  box-shadow: 0 10px 22px rgba(24, 34, 45, 0.08);
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

#s42-center-panel .s42-learning-workbench {
  --s42-math-color: #16212a;
  --s42-math-bar: #000000;
  --s42-plank-w: 68px;
  --s42-plank-h: 142px;
}

#s42-center-panel .s42-learning-workbench .s42-panel-visual {
  --s42-plank-w: 68px;
  --s42-plank-h: 142px;
  justify-content: center;
}

#s42-center-panel .s42-learning-workbench .s42-left-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  max-width: 100%;
  min-height: 300px;
  max-height: 100%;
  overflow: hidden;
}

#s42-center-panel .s42-learning-workbench .s42-source-area {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding-bottom: 6px;
  display: flex;
  justify-content: center;
}

#s42-center-panel .s42-learning-workbench .s42-source-area .s42-plank-track {
  --s42-plank-w: 68px;
  --s42-plank-h: 142px;
}

#s42-center-panel .s42-learning-workbench .s42-workbench {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 160px;
  padding-top: 4px;
  position: relative;
}

#s42-center-panel .s42-learning-workbench .s42-bench-floor {
  width: min(100%, 320px);
  height: 2px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(184, 145, 98, 0.42), transparent);
}

#s42-center-panel .s42-learning-workbench .s42-bench-slot {
  width: var(--s42-plank-w, 68px);
  height: var(--s42-plank-h, 142px);
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#s42-center-panel .s42-learning-workbench .s42-bench-slot.is-empty {
  opacity: 0;
  pointer-events: none;
}

#s42-center-panel .s42-learning-workbench .s42-bench-slot.is-filled .s42-plank,
#s42-center-panel .s42-learning-workbench .s42-bench-slot.is-filled .s4-lesson1-whole-block,
#s42-center-panel .s42-learning-workbench .s42-bench-slot.is-frac-slot .s42-plank {
  width: 100%;
  height: 100%;
}

#s42-center-panel .s42-learning-workbench .s42-bench-slot.is-arriving .s42-plank,
#s42-center-panel .s42-learning-workbench .s42-bench-slot.is-arriving .s4-lesson1-whole-block {
  animation: s42-plank-arrive 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#s42-center-panel .s42-learning-workbench .s42-frac-piece.is-converting .s4-lesson1-fraction-grid,
#s42-center-panel .s42-learning-workbench [data-s42-anim="bench-frac-a"].is-converting .s4-lesson1-fraction-grid {
  animation: s42-grid-convert 320ms ease-out;
}

#s42-center-panel .s42-learning-workbench .s42-bench-fracs.is-merging,
#s42-center-panel .s42-learning-workbench [data-s42-anim="bench-fracs"].is-merging {
  animation: s42-frac-merge 450ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes s42-plank-arrive {
  0% {
    transform: translateY(-120px) scale(0.98);
    opacity: 1;
    box-shadow: 0 10px 18px rgba(72, 50, 29, 0.08);
  }
  78% {
    transform: translateY(2px) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 241, 214, 0.46), 0 6px 12px rgba(72, 50, 29, 0.12);
  }
}

@keyframes s42-grid-convert {
  0% {
    filter: brightness(1);
    transform: scaleY(1);
  }
  45% {
    filter: brightness(1.08);
    transform: scaleY(1.03);
  }
  100% {
    filter: brightness(1);
    transform: scaleY(1);
  }
}

@keyframes s42-frac-merge {
  0% {
    gap: 8px;
    transform: translateX(0);
  }
  55% {
    gap: 2px;
    transform: translateX(-6px);
  }
  100% {
    gap: 0;
    transform: translateX(0);
  }
}

#s42-center-panel .s42-learning-workbench .s42-bench-layout.is-wholes-only .s42-bench-wholes {
  gap: 8px;
}

#s42-center-panel .s42-learning-workbench .s42-bench-layout.is-final-row .s42-bench-wholes {
  gap: 6px;
}

#s42-center-panel .s42-learning-workbench .s42-bench-layout.is-wholes-only {
  justify-content: center;
}

#s42-center-panel .s42-learning-workbench .s42-panel-visual .is-source-only {
  --s42-plank-w: 58px;
  --s42-plank-h: 118px;
}

#s42-center-panel .s42-learning-workbench .s42-panel-equation {
  overflow: hidden;
}

#s42-center-panel .s42-learning-workbench .s42-visual-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 260px;
  overflow: hidden;
}

#s42-center-panel .s42-learning-workbench .s42-source-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 42px;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8px;
}

#s42-center-panel .s42-learning-workbench #source-a {
  margin-left: 0;
  transform: translateX(19px);
}

#s42-center-panel .s42-learning-workbench #source-b {
  margin-right: 0;
  transform: translateX(-19px);
}

#s42-center-panel .s42-learning-workbench .s42-bench-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
}

#s42-center-panel .s42-learning-workbench .s42-bench-layout.is-inline {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}

#s42-center-panel .s42-learning-workbench .s42-bench-wholes,
#s42-center-panel .s42-learning-workbench .s42-bench-fracs {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 14px;
  max-width: 100%;
}

#s42-center-panel .s42-learning-workbench .s42-bench-fracs {
  gap: 10px;
}

#s42-center-panel .s42-learning-workbench .s42-plus,
#s42-center-panel .s42-learning-workbench .s42-frac-plus {
  flex: 0 0 auto;
  color: var(--s42-math-color, #16212a);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

#s42-center-panel .s42-learning-workbench .s42-plus {
  align-self: flex-start;
  margin-top: 56px;
}

#s42-center-panel .s42-learning-workbench .s42-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

#s42-center-panel .s42-learning-workbench .s42-plank-track {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
  max-width: 100%;
}

#s42-center-panel .s42-learning-workbench .s42-plank,
#s42-center-panel .s42-learning-workbench .s42-plank .s4-lesson1-whole-block,
#s42-center-panel .s42-learning-workbench .s42-plank .s4-lesson1-fraction-model {
  width: var(--s42-plank-w, 68px);
  height: var(--s42-plank-h, 142px);
  flex: 0 0 auto;
  border-radius: 10px;
}

#s42-center-panel .s42-learning-workbench .s42-plank.s4-lesson1-fraction-unit {
  width: var(--s42-plank-w, 68px);
  height: var(--s42-plank-h, 142px);
  padding: 0;
  border: 0;
  background: transparent;
}

#s42-center-panel .s42-learning-workbench .s42-plank .s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(99, 61, 28, 0.05) 80%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 214, 0.46), 0 6px 12px rgba(72, 50, 29, 0.12);
}

#s42-center-panel .s42-learning-workbench .s42-plank .s4-lesson1-whole-block .s4-plank-grain {
  display: none;
}

#s42-center-panel .s42-learning-workbench .s42-plank .s4-lesson1-fraction-model {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 30%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, #eed8bb, #dbbf9c);
  box-shadow: inset 0 0 0 1px rgba(197, 148, 94, 0.38), 0 6px 12px rgba(72, 50, 29, 0.08);
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  height: 100%;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid span {
  border-bottom: 2px solid rgba(217, 188, 150, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 28%, rgba(131, 92, 54, 0.04)),
    linear-gradient(180deg, rgba(246, 231, 210, 0.98), rgba(224, 202, 172, 0.96));
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid span:last-child {
  border-bottom: 0;
}

#s42-center-panel .s42-learning-workbench .s4-lesson1-fraction-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(99, 61, 28, 0.08) 78%, rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
}

#s42-center-panel .s42-learning-workbench .s42-card-label .textbook-math,
#s42-center-panel .s42-learning-workbench .s42-bench-result .textbook-math {
  --math-fs: 30px;
  --game-math-color: var(--s42-math-color, #16212a);
  --game-math-bar: var(--s42-math-bar, #000000);
  color: var(--s42-math-color, #16212a);
}

#s42-center-panel .s42-learning-workbench .s42-bench-result {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

#s42-center-panel .s42-learning-workbench .s42-bench-result .textbook-math {
  --math-fs: 30px;
}

#s42-center-panel .s42-learning-workbench .s42-right-layout {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  row-gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 388px;
  max-width: 100%;
  overflow: hidden;
  padding-top: 12px;
  margin-top: 6px;
}

#s42-center-panel .s42-learning-workbench .s42-equations-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-height: 300px;
  width: 100%;
}

#s42-center-panel .s42-learning-workbench .s42-question-area {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  min-height: 44px;
  padding-top: 0;
  border-top: 0;
}

#s42-center-panel .s42-learning-workbench .s42-question-area.is-hidden {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

#s42-center-panel .s42-learning-workbench .s42-question-area.is-complete {
  visibility: visible;
  pointer-events: auto;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--s42-math-color, #16212a);
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-note {
  color: var(--s42-math-color, #16212a);
  font-size: 22px;
  opacity: 0.88;
}

#s42-center-panel .s42-learning-workbench .s42-side-sum {
  font-weight: 900;
  color: var(--s42-math-color, #16212a);
}

#s42-center-panel .s42-learning-workbench .s42-static-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
}

#s42-center-panel .s42-learning-workbench .s42-question-hint {
  margin: 0 0 8px;
  color: rgba(22, 33, 42, 0.72);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

#s42-center-panel .s42-learning-workbench .s42-locked-val,
#s42-center-panel .s42-learning-workbench .s42-locked-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(194, 151, 98, 0.48);
  border-radius: 8px;
  background: rgba(255, 248, 238, 0.98);
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

#s42-center-panel .s42-learning-workbench .s42-locked-input {
  appearance: textfield;
  -moz-appearance: textfield;
  padding: 0;
  box-shadow: none;
  cursor: default;
}

#s42-center-panel .s42-learning-workbench .s42-locked-input::-webkit-outer-spin-button,
#s42-center-panel .s42-learning-workbench .s42-locked-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#s42-center-panel .s42-learning-workbench .s42-input-frac .s42-locked-input,
#s42-center-panel .s42-learning-workbench .s42-input-frac .s42-locked-val {
  border-width: 2px;
}

#s42-center-panel .s42-learning-workbench .s42-blank.wrong {
  animation: s42-blank-wrong 300ms ease;
  border-color: rgba(220, 170, 40, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(220, 170, 40, 0.22) !important;
  background: rgba(255, 252, 240, 0.98);
}

@keyframes s42-blank-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-hero-active {
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-hero-done {
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  opacity: 0.92;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-active {
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-done {
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  opacity: 0.9;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-final.is-hero-done {
  font-size: 30px;
  color: var(--s42-math-color, #16212a);
  opacity: 1;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-final .s42-eq-body-col {
  transform: translateX(0.25cm);
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-placeholder {
  visibility: hidden;
}

#s42-center-panel .s42-learning-workbench .s42-eq-sign-col {
  text-align: center;
}

#s42-center-panel .s42-learning-workbench .s42-eq-body-col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line .textbook-math,
#s42-center-panel .s42-learning-workbench .s42-eq-body .textbook-math,
#s42-center-panel .s42-learning-workbench .s42-question-area .textbook-math {
  --math-fs: 1em;
  --game-math-color: var(--s42-math-color, #16212a);
  --game-math-bar: var(--s42-math-bar, #000000);
  color: var(--s42-math-color, #16212a);
}

#s42-center-panel .s42-learning-workbench .textbook-math .tm-bar,
#s42-center-panel .s42-learning-workbench .textbook-math .eq-fraction-line,
#s42-center-panel .s42-learning-workbench .s42-input-frac .tm-bar,
#s42-center-panel .s42-learning-workbench .s42-input-frac .eq-fraction-line {
  background: var(--s42-math-bar, #000000);
  background-color: var(--s42-math-bar, #000000);
  border-color: var(--s42-math-bar, #000000);
  opacity: 1;
}

#s42-center-panel .s42-learning-workbench .textbook-math:not(.is-disabled) .tm-bar,
#s42-center-panel .s42-learning-workbench .textbook-math:not(.is-disabled) .eq-fraction-line,
#s42-center-panel .s42-learning-workbench .s42-input-frac:not(.is-disabled) .tm-bar,
#s42-center-panel .s42-learning-workbench .s42-input-frac:not(.is-disabled) .eq-fraction-line {
  background: #000000;
  background-color: #000000;
  border-color: #000000;
  opacity: 1;
}

#s42-center-panel .s42-learning-workbench .textbook-math .tm-num,
#s42-center-panel .s42-learning-workbench .textbook-math .tm-den,
#s42-center-panel .s42-learning-workbench .textbook-math .tm-whole,
#s42-center-panel .s42-learning-workbench .s42-eq-sign {
  color: var(--s42-math-color, #16212a);
}

#s42-center-panel .s42-learning-workbench .s4-mixed,
#s42-center-panel .s42-learning-workbench .s4-l2m-mixed {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#s42-center-panel .s42-learning-workbench .s4-l2m-mixed .tm-whole,
#s42-center-panel .s42-learning-workbench .s4-lesson1-mixed .tm-whole {
  font-size: 0.94em;
  line-height: 1;
}

#s42-center-panel .s42-learning-workbench .textbook-math.tm-frac,
#s42-center-panel .s42-learning-workbench .s42-input-frac {
  gap: 1px;
}

#s42-center-panel .s42-learning-workbench .textbook-math .tm-bar {
  margin: 1px 0;
  width: calc(100% + 6px);
  max-width: none;
  align-self: center;
  background: #000000;
  background-color: #000000;
  border-color: #000000;
  opacity: 1;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-hero-active .textbook-math {
  --math-fs: 30px;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-active .textbook-math {
  --math-fs: 30px;
}

#s42-center-panel .s42-learning-workbench .s42-eq-line.is-done .textbook-math,
#s42-center-panel .s42-learning-workbench .s42-eq-line.is-hero-done .textbook-math {
  --math-fs: 30px;
}

#s42-center-panel .s42-learning-workbench .s42-question-card {
  padding: 14px 12px 10px;
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.96);
  border: 1px solid rgba(188, 203, 219, 0.9);
}

#s42-center-panel .s42-learning-workbench .s42-question-card.is-active {
  border-color: rgba(93, 165, 216, 0.65);
  box-shadow: 0 0 0 3px rgba(93, 165, 216, 0.12);
}

#s42-center-panel .s42-learning-workbench .s42-question-text {
  margin: 0 0 6px;
  color: var(--s42-math-color, #16212a);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

#s42-center-panel .s42-learning-workbench .s42-question-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#s42-center-panel .s42-learning-workbench .s42-question-input-row--convert {
  margin-top: 2px;
}

#s42-center-panel .s42-learning-workbench .s42-blank {
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 2px solid rgba(194, 151, 98, 0.55);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

#s42-center-panel .s42-learning-workbench .s42-blank.is-active {
  border-color: rgba(167, 118, 68, 0.92);
  box-shadow: 0 0 0 3px rgba(199, 144, 89, 0.16);
  background: rgba(255, 252, 246, 0.98);
}

#s42-center-panel .s42-learning-workbench .s42-blank:disabled {
  opacity: 1;
  border-color: rgba(205, 198, 186, 0.92);
  background: rgba(252, 250, 244, 0.98);
  color: rgba(22, 33, 42, 0.96);
  box-shadow: none;
}

#s42-center-panel .s42-learning-workbench .s42-disabled-blank {
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 1.5px solid rgba(205, 198, 186, 0.92);
  border-radius: 8px;
  background: rgba(252, 250, 244, 0.98);
  vertical-align: middle;
}

#s42-center-panel .s42-learning-workbench .s42-input-frac.is-disabled .tm-bar {
  background: #000000;
  background-color: #000000;
  border-color: #000000;
  opacity: 1;
}

#s42-center-panel .s42-learning-workbench .s42-eq-body .textbook-math,
#s42-center-panel .s42-learning-workbench .s42-eq-body .s4-mixed {
  vertical-align: middle;
}

#s42-center-panel .s42-learning-workbench .s42-lcd-label {
  color: var(--s42-math-color, #16212a);
  font-size: 15px;
  font-weight: 800;
}

#s42-center-panel .s42-learning-workbench .s42-inline-confirm {
  display: none !important;
}

#s42-center-panel .s42-learning-workbench .s42-next-method-btn.s4-primary-btn.wood {
  pointer-events: auto;
  min-width: 96px;
  width: auto;
  min-height: auto;
  height: auto;
  padding: 10px 22px;
  font-size: 15px;
  border-radius: 6px;
}

#s42-center-panel .s42-learning-workbench .s42-complete-actions.s41-card-next-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-width: 96px;
  min-height: 44px;
  margin-top: 0;
  padding-right: 0;
}

/* =========================
   STAGE 4-2: 방법 2 — 가분수 변환
========================= */

.s4-l2m-workbench.is-improper-method .s4-l2m-visual-panel.is-improper-layout {
  gap: 12px;
}

.s4-l2m-imp-transform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.s4-l2m-imp-from.is-muted {
  opacity: .55;
}

.s4-l2m-imp-bundle-row,
.s4-l2m-imp-sum-board {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: calc(8px * var(--l2m-visual-scale, 1));
  width: 100%;
}

.s4-l2m-imp-bundle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.s4-l2m-imp-bundle-label {
  color: rgba(205, 232, 237, .82);
  font-size: calc(13px * var(--l2m-visual-scale, 1));
  font-weight: 800;
}

.s4-l2m-imp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(143, 255, 225, .28);
  border-radius: 8px;
  color: #eef6ff;
  background: rgba(18, 48, 58, .5);
  font-size: 16px;
  font-weight: 900;
}

.s4-l2m-imp-badge.is-result {
  border-color: rgba(143, 255, 225, .48);
  background: rgba(28, 72, 88, .55);
}

.s4-l2m-imp-eq {
  color: rgba(238, 246, 255, .72);
  font-size: calc(22px * var(--l2m-visual-scale, 1));
  font-weight: 900;
}

.s4-l2m-imp-sum-note {
  margin: 0;
  color: rgba(205, 232, 237, .76);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.s4-l2m-imp-action {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}

.s4-l2m-right .s4-l2m-eq-row.is-imp-row.is-state-done {
  opacity: .72;
}

.s4-l2m-right .s4-l2m-eq-row.is-imp-row.is-state-active {
  opacity: 1;
}

.s4-l2m-right .s4-l2m-eq-row.is-imp-mixed-row .s4-mixed {
  display: inline-flex;
  align-items: center;
  gap: .2em;
}

.s4-l2m-gym-btn {
  min-width: 168px;
}

/* =========================
   STAGE 4-3: 방법 3 — 카드형 요약
========================= */

.s43-subtitle {
  margin: 6px 0 0;
  color: rgba(205, 232, 237, .82);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.s43-card-workbench.s4-l2m-workbench {
  overflow: hidden;
}

.s43-card-workbench .s4-l2m-left,
.s43-card-workbench .s4-l2m-right {
  min-height: 0;
}

.s43-card-workbench .s4-l2m-left {
  --l2m-visual-scale: 1;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: visible;
  overflow-y: hidden;
}

.s43-card-workbench .s4-l2m-right {
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.s43-card-workbench .s4-l2m-body {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.s43-card-workbench .s43-dual-count-stack {
  --s43-plank-w: 72px;
  --s43-plank-h: 148px;
  --s43-plank-gap: 10px;
  width: 100%;
  max-width: 100%;
  gap: 12px;
  align-items: flex-start;
  overflow: visible;
}

.s43-card-workbench .s43-dual-count-stack.is-has-sum {
  --s43-plank-w: 60px;
  --s43-plank-h: 122px;
  --s43-plank-gap: 8px;
  gap: 8px;
}

.s43-card-workbench .s43-count-stack-item {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

.s43-card-workbench .s43-count-stack-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

.s43-card-workbench .s43-left-conversion-eq {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.12em;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.55;
  color: rgba(220, 244, 248, .92);
}

.s43-card-workbench .s43-left-conversion-eq.is-active {
  color: rgba(255, 248, 232, .96);
}

.s43-card-workbench .s43-left-conversion-eq .s4-mixed {
  align-items: center;
  gap: 0.1em;
  vertical-align: middle;
}

.s43-card-workbench .s43-left-conversion-eq .s4-mixed > strong {
  font-size: 1.06em;
  line-height: 1;
}

.s43-card-workbench .s43-left-conversion-eq .s4-fraction {
  gap: 2px;
  vertical-align: middle;
}

.s43-card-workbench .s43-left-conversion-eq .s4-fraction strong {
  font-size: 0.94em;
  line-height: 1;
  min-width: 1.05em;
}

.s43-card-workbench .s43-left-conversion-eq .s4-fraction i {
  width: 1.35em;
  min-width: 1.35em;
  height: 3px;
  margin: 1px 0;
  background: rgba(255, 225, 170, .92);
}

.s43-card-workbench .s43-left-conversion-eq .s4-l2m-input-frac {
  grid-template-rows: auto 3px auto;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}

.s43-card-workbench .s43-left-conversion-eq .s4-l2m-input-frac i {
  width: 1.35em;
  min-width: 1.35em;
  height: 3px;
  margin: 1px 0;
}

.s43-card-workbench .s43-left-conversion-eq .s4-l2m-input-frac strong {
  font-size: 0.94em;
  line-height: 1;
}

.s43-card-workbench .s43-left-conversion-eq .stage4-convert-input.s4-l2m-blank {
  box-sizing: border-box;
  width: 1.35em !important;
  min-width: 30px !important;
  max-width: 2.4em;
  height: 1.05em !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(143, 255, 225, .34) !important;
  border-radius: 5px !important;
  background: rgba(247, 255, 255, .94) !important;
  box-shadow: none !important;
  color: #072033 !important;
  font-size: 0.88em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.s43-card-workbench .s43-left-conversion-eq .s4-l2m-input-frac.is-idle .stage4-convert-input.s4-l2m-blank {
  border-color: rgba(143, 255, 225, .34) !important;
  background: rgba(247, 255, 255, .94) !important;
}

.s43-card-workbench .s43-left-conversion-eq .s4-l2m-input-frac.is-disabled .stage4-convert-input.s4-l2m-blank,
.s43-card-workbench .s43-left-conversion-eq .stage4-convert-input.s4-l2m-blank:disabled {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(220, 244, 248, .28) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

.s43-card-workbench .s43-left-conversion-eq .stage4-convert-input.s4-l2m-blank.is-focus-blank,
.s43-card-workbench .s43-left-conversion-eq .s4-l2m-input-frac.is-active .stage4-convert-input.s4-l2m-blank.is-focus-blank {
  border-color: rgba(255, 220, 147, .82) !important;
  background: #fff8ef !important;
  color: #072033 !important;
  box-shadow: 0 0 0 2px rgba(255, 220, 147, .2) !important;
}

.s43-card-workbench .s43-left-conversion-eq .stage4-convert-input.s4-l2m-blank:focus {
  outline: none;
}

.s43-card-workbench .s43-left-confirm {
  margin-left: 8px;
  flex-shrink: 0;
  font-size: 16px;
  padding: 6px 14px;
  border-radius: 999px;
}

.s43-card-workbench .s43-dual-count-stack .s43-count-board,
.s43-card-workbench .s43-count-board.is-sum-result {
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
}

.s43-card-workbench .s4-l2m-zone,
.s43-card-workbench .s4-l2m-body {
  overflow: visible;
  min-height: 0;
}

.s43-card-workbench .s43-visual-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.s43-visual-board {
  --s43-plank-w: 76px;
  --s43-plank-h: 162px;
  --s43-grid-line: rgba(255, 220, 150, 0.88);
  --s43-plank-wood-top: #c8844f;
  --s43-plank-wood-bottom: #9a5f34;
  --s43-plank-empty-top: #3a2516;
  --s43-plank-empty-bottom: #4d3220;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}

.s43-visual-board.is-count-phase .s43-visual-title {
  font-size: 24px;
  font-weight: 800;
}

.s43-visual-title {
  margin: 0;
  color: rgba(220, 244, 248, .92);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.s43-visual-title .s4-fraction,
.s43-visual-title .s4-mixed {
  font-size: 1em;
}

.s43-visual-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
}

.s43-dual-count-stack {
  --s43-plank-w: 58px;
  --s43-plank-h: 124px;
  --s43-plank-gap: 8px;
  --s43-grid-line: rgba(255, 220, 150, 0.88);
  --s43-whole-grid-line: rgba(255, 244, 214, 0.98);
  --s43-whole-grid-shadow: rgba(38, 20, 6, 0.62);
  --s43-plank-wood-top: #c8844f;
  --s43-plank-wood-bottom: #9a5f34;
  --s43-plank-empty-top: #3a2516;
  --s43-plank-empty-bottom: #4d3220;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: min(100%, 520px);
  padding: 4px 2px;
  overflow: hidden;
}

.s43-count-stack-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

.s43-count-stack-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.s43-left-conversion-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: rgba(220, 244, 248, .92);
}

.s43-dual-count-stack.is-has-sum {
  --s43-plank-w: 60px;
  --s43-plank-h: 122px;
  gap: 8px;
}

.s43-count-board.is-sum-result {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--s43-plank-gap, 8px);
}

.s43-count-stack-item.is-sum .s43-count-board > .s43-mini-whole {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0, 0, 0, .14)),
    linear-gradient(180deg, var(--s43-plank-wood-top, #c8844f), var(--s43-plank-wood-bottom, #9a5f34) 54%, #8b542c);
}

.s43-count-stack-item.is-eighth-mode .s43-count-plank {
  box-shadow:
    inset 0 -12px 18px rgba(56, 27, 8, .28),
    inset 0 0 0 2px rgba(143, 255, 225, .36),
    0 4px 12px rgba(91, 255, 211, .12);
}

.s43-dual-count-stack .s43-visual-hint,
.s43-dual-count-stack .s43-visual-recap {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.s43-dual-count-stack > .s43-visual-hint,
.s43-dual-count-stack > .s43-visual-recap,
.s43-regroup-footer {
  width: 100%;
  text-align: center;
}

.s43-regroup-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.s43-regroup-footer .s43-count-board {
  --s43-plank-w: 48px;
  --s43-plank-h: 100px;
}

.s43-visual-board.is-count-phase {
  gap: 14px;
  width: min(100%, 380px);
  padding: 12px 8px 8px;
}

.s43-count-track {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.s43-count-plank {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--s43-plank-w);
  height: var(--s43-plank-h);
  min-height: var(--s43-plank-h);
  max-height: var(--s43-plank-h);
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    inset 0 -12px 18px rgba(56, 27, 8, .28),
    inset 0 0 0 2px rgba(255, 232, 178, .14),
    0 4px 12px rgba(0, 0, 0, .22);
}

.s43-count-plank-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  height: 100%;
}

.s43-count-plank-grid span {
  border-bottom: 2px solid rgba(255, 229, 173, .55);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 26%, rgba(0, 0, 0, .12)),
    linear-gradient(180deg, rgba(58, 35, 20, .74), rgba(35, 22, 14, .82));
}

.s43-count-plank-grid span:last-child {
  border-bottom: 0;
}

.s43-count-plank-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 24%, rgba(55, 26, 8, .08) 78%, rgba(0, 0, 0, .14)),
    linear-gradient(180deg, var(--s43-plank-wood-top, #c8844f), var(--s43-plank-wood-bottom, #9a5f34) 54%, #8b542c);
}

.s43-dual-count-stack .s43-mini-track {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.s43-dual-count-stack .s43-count-board {
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--s43-plank-gap);
  padding: 8px 4px;
}

.s43-dual-count-stack .s43-count-board > .s43-mini-whole,
.s43-dual-count-stack .s43-count-board > .s43-count-plank {
  flex-shrink: 0;
}

.s43-dual-count-stack .s43-count-plank,
.s43-dual-count-stack .s43-count-board > .s43-mini-whole {
  box-sizing: border-box;
  width: var(--s43-plank-w);
  height: var(--s43-plank-h);
  min-height: var(--s43-plank-h);
  max-height: var(--s43-plank-h);
  flex-shrink: 0;
}

.s43-dual-count-stack .s43-mini-whole {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--s43-plank-wood-top) 0%, var(--s43-plank-wood-bottom) 100%);
  border: 1.5px solid rgba(255, 232, 178, .16);
  box-shadow:
    inset 0 -10px 16px rgba(56, 27, 8, .22),
    0 4px 12px rgba(0, 0, 0, .22);
}

.s43-dual-count-stack .s43-mini-whole .s4-plank-grain {
  display: none;
}

.s43-dual-count-stack .s43-mini-whole-grid {
  position: absolute;
  inset: 2px 2px 3px 2px;
  pointer-events: none;
}

.s43-dual-count-stack .s43-mini-whole.has-fourth-grid .s43-mini-whole-grid {
  background-image:
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line));
  background-size: 100% 2px;
  background-position: 0 25%, 0 50%, 0 75%;
  background-repeat: no-repeat;
}

.s43-dual-count-stack .s43-mini-whole.has-eighth-grid .s43-mini-whole-grid {
  background-image:
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line)),
    linear-gradient(var(--s43-whole-grid-line), var(--s43-whole-grid-line));
  background-size: 100% 2px;
  background-position: 0 12.5%, 0 25%, 0 37.5%, 0 50%, 0 62.5%, 0 75%, 0 87.5%;
  background-repeat: no-repeat;
}

.s43-dual-count-stack .s43-mini-plank.is-partial {
  background: linear-gradient(
    180deg,
    var(--s43-plank-empty-top) 0%,
    var(--s43-plank-empty-bottom) calc((1 - var(--s43-fill-ratio, 0)) * 100%),
    var(--s43-plank-wood-top) calc((1 - var(--s43-fill-ratio, 0)) * 100%),
    var(--s43-plank-wood-bottom) 100%
  );
}

.s43-dual-count-stack .s43-count-plank.has-fourth-grid,
.s43-dual-count-stack .s43-count-plank.has-eighth-grid {
  box-shadow:
    inset 0 -12px 18px rgba(56, 27, 8, .28),
    inset 0 0 0 2px rgba(143, 255, 225, .36),
    0 4px 12px rgba(91, 255, 211, .12);
}

.s43-dual-count-stack .s43-count-board {
  align-items: stretch;
}

.s43-count-board {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 8px 4px;
}

.s43-count-board.is-regroup-result {
  align-items: center;
  gap: 16px;
}

.s43-count-board .s43-visual-arrow {
  margin-bottom: 0;
  font-size: 34px;
}

.s43-visual-board.is-count-phase.is-done .s43-visual-main {
  gap: 12px;
}

.s43-visual-recap .is-count-note {
  color: rgba(205, 232, 237, .78);
  font-size: 13px;
}

.s43-visual-recap .is-result-small {
  color: rgba(220, 244, 248, .88);
  font-size: 16px;
}

.s43-visual-flow.is-problem-single {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
}

.s43-visual-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 4px 2px;
  width: 100%;
  max-width: 100%;
}

.s43-visual-flow.is-dual.is-problem {
  align-items: center;
  gap: 10px 8px;
}

.s43-visual-flow.is-dual.is-problem .s43-visual-frac.is-source {
  font-size: 38px;
}

.s43-visual-hint-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.s43-visual-hint-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.s43-visual-hint-arrow {
  color: rgba(255, 220, 147, .78);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.s43-visual-planks.is-hero {
  gap: 8px;
  min-height: var(--s43-plank-h);
}

.s43-visual-planks.is-bundle-hint {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.s43-visual-label.is-large .s43-visual-frac.is-source {
  font-size: 42px;
}

.s43-visual-board.is-count-phase .s43-visual-main {
  width: 100%;
  align-items: stretch;
}

.s43-count-stack-item .s43-visual-main {
  width: 100%;
  align-items: stretch;
}

.s43-visual-board.is-count-phase .s43-visual-hint {
  color: rgba(228, 246, 250, .9);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}

.s43-visual-board.is-count-phase .s43-visual-hint .s4-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  vertical-align: middle;
  margin: 0 5px;
  min-width: 1.4em;
}

.s43-visual-board.is-count-phase .s43-visual-hint .s4-fraction strong {
  font-size: 17px;
  line-height: 1;
}

.s43-visual-board.is-count-phase .s43-visual-hint .s4-fraction i {
  width: 100%;
  min-width: 1.2em;
  height: 2px;
}

.s43-visual-board.is-count-phase .s43-visual-hint .s4-mixed {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
  gap: 0.12em;
}

.s43-visual-hint {
  margin: 0;
  padding: 0 8px;
  color: rgba(205, 232, 237, .72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.s43-visual-hint .s4-fraction {
  font-size: 1em;
}

.s43-visual-recap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 4px;
}

.s43-visual-recap p {
  margin: 0;
  color: rgba(205, 232, 237, .82);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.s43-visual-recap .s4-fraction,
.s43-visual-recap .s4-mixed {
  font-size: 1em;
}

.s43-mini-whole.is-bundle-hint {
  opacity: .55;
  border-style: dashed;
  border-width: 2px;
  box-shadow: none;
}

.s43-visual-flow.is-dual,
.s43-visual-flow.is-regroup {
  gap: 6px 4px;
}

.s43-visual-col {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 34%;
}

.s43-visual-flow.is-dual .s43-visual-col {
  max-width: 42%;
}

.s43-visual-planks {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  min-height: var(--s43-plank-h);
}

.s43-visual-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 38px;
  text-align: center;
}

.s43-visual-label .s43-visual-frac {
  font-size: 22px;
}

.s43-visual-col.is-result .s43-visual-label .s43-visual-frac.is-hero {
  font-size: 36px;
}

.s43-visual-stage {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.s43-visual-stage.is-eq-row {
  align-items: center;
}

.s43-visual-stage.is-result {
  align-items: center;
}

.s43-visual-arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-bottom: 42px;
  color: rgba(255, 220, 147, .92);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.s43-visual-op {
  color: rgba(205, 232, 237, .82);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  padding-bottom: 4px;
}

.s43-visual-frac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eef6ff;
  font-size: 26px;
  line-height: 1;
}

.s43-visual-frac.is-hero {
  color: #fff8e8;
  font-size: 40px;
}

.s43-visual-frac.is-hero .s4-fraction strong,
.s43-visual-frac.is-hero .s4-mixed > strong {
  font-size: 1em;
}

.s43-visual-frac.is-source {
  font-size: 36px;
}

.s43-visual-aside {
  margin: 0;
  color: rgba(205, 232, 237, .68);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.s43-visual-caption {
  margin: 0;
  padding: 0 4px;
  color: rgba(205, 232, 237, .78);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.s43-visual-caption .s4-fraction,
.s43-visual-aside .s4-fraction {
  font-size: 1em;
}

.s43-visual-board .s43-mini-whole {
  position: relative;
  overflow: hidden;
  display: block;
  width: var(--s43-plank-w);
  height: var(--s43-plank-h);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--s43-plank-wood-top) 0%, var(--s43-plank-wood-bottom) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 230, 190, .28),
    0 2px 8px rgba(0, 0, 0, .22);
}

.s43-visual-board .s43-mini-plank.is-partial {
  background: linear-gradient(
    180deg,
    var(--s43-plank-empty-top) 0%,
    var(--s43-plank-empty-bottom) calc((1 - var(--s43-fill-ratio, 0)) * 100%),
    var(--s43-plank-wood-top) calc((1 - var(--s43-fill-ratio, 0)) * 100%),
    var(--s43-plank-wood-bottom) 100%
  );
}

.s43-visual-board .s43-mini-whole .s4-plank-grain {
  display: none;
}

.s43-visual-board .s43-mini-whole-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s43-visual-board .s43-mini-whole.has-fourth-grid .s43-mini-whole-grid,
.s43-visual-board .s43-mini-plank.is-partial.has-fourth-grid .s43-mini-whole-grid {
  background-image:
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line));
  background-size: 100% 2px;
  background-position: 0 25%, 0 50%, 0 75%;
  background-repeat: no-repeat;
}

.s43-visual-board .s43-mini-track {
  gap: 8px;
}

.s43-visual-board .s43-mini-whole.has-eighth-grid .s43-mini-whole-grid,
.s43-visual-board .s43-mini-plank.is-partial.has-eighth-grid .s43-mini-whole-grid {
  background-image:
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line)),
    linear-gradient(var(--s43-grid-line), var(--s43-grid-line));
  background-size: 100% 2px;
  background-position: 0 12.5%, 0 25%, 0 37.5%, 0 50%, 0 62.5%, 0 75%, 0 87.5%;
  background-repeat: no-repeat;
}

.s43-visual-board .s43-mini-frac-grid {
  gap: 2px;
}

.s43-visual-board .s43-mini-frac-grid span {
  border: 2px solid rgba(255, 220, 150, 0.78);
  border-radius: 2px;
  background: rgba(18, 38, 46, 0.72);
}

.s43-visual-board .s43-mini-frac-grid span.filled {
  background: linear-gradient(180deg, #e0a066 0%, #b06a38 100%);
  border-color: rgba(255, 235, 190, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.35);
}

.s43-card-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-height: 100%;
  padding: 4px 2px;
}

.s43-card-panel.is-single-step {
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 4px 2px;
}

.s43-summary-card.is-step-focus {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 22px 24px;
  border: 1px solid rgba(143, 255, 225, .52);
  border-radius: 14px;
  background: rgba(18, 48, 58, .62);
  box-shadow: 0 0 22px rgba(91, 255, 211, .1);
  opacity: 1;
}

.s43-summary-card.is-step-focus .s43-card-title {
  margin-bottom: 16px;
  font-size: 20px;
  text-align: center;
}

.s43-step-layout {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
}

.s43-step-layout.is-regroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.s43-step-layout.is-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.s43-card-arrow.is-down {
  font-size: 22px;
  line-height: 1;
}

.s43-mini-whole-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s43-mini-whole.has-fourth-grid .s43-mini-whole-grid {
  background-image: linear-gradient(to bottom, rgba(255, 232, 190, .55) 1px, transparent 1px);
  background-size: 100% 25%;
}

.s43-mini-whole.has-eighth-grid .s43-mini-whole-grid {
  background-image: linear-gradient(to bottom, rgba(255, 232, 190, .55) 1px, transparent 1px);
  background-size: 100% 12.5%;
}

.s43-lcd-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.s43-lcd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(143, 255, 225, .28);
  border-radius: 12px;
  background: rgba(12, 34, 42, .42);
}

.s43-lcd-row.is-same {
  opacity: .92;
}

.s43-lcd-note {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(45, 126, 105, .28);
  color: rgba(205, 248, 237, .82);
  font-size: 12px;
  font-weight: 800;
}

.s43-piece-badge.is-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.s43-badge-label {
  color: rgba(220, 244, 248, .88);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.s43-badge-eq {
  color: rgba(205, 232, 237, .72);
  font-size: 14px;
  font-weight: 800;
}

.s43-card-workbench .s4-l2m-right.is-textbook-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-equations.is-textbook-stack,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-aligned.is-textbook-stack {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 1cm 0 0 0.55cm;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row {
  justify-content: flex-start;
  width: 100%;
  font-size: 29px;
  line-height: 1.55;
  color: rgba(220, 244, 248, .92);
  opacity: 1;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-rhs {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-row {
  display: flex;
  align-items: center;
  grid-template-columns: none;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-row .s4-l2m-eq-lhs,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-row .s4-l2m-eq-sign {
  display: none;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-row .s4-l2m-eq-rhs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42em 0.52em;
  width: 100%;
  min-width: 0;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-step-recap,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-step-equation,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-step-equation.is-level-focus,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-row.is-state-done,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-level-secondary,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-state-done {
  font-size: 29px;
  line-height: 1.55;
  color: rgba(220, 244, 248, .92);
  opacity: 1;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-mixed {
  align-items: center;
  gap: 0.1em;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-mixed > strong,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-fraction strong {
  font-size: 0.94em;
  line-height: 1;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-mixed > strong {
  font-size: 1.06em;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-fraction {
  gap: 2px;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-fraction strong {
  min-width: 1.05em;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-eq-uniform .s4-fraction i {
  width: 1.35em;
  min-width: 1.35em;
  height: 3px;
  margin: 1px 0;
  background: rgba(255, 225, 170, .92);
}

.s43-card-workbench .s4-l2m-right .s4-l2m-input-frac {
  gap: 2px;
  vertical-align: middle;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-input-frac i {
  width: 1.35em;
  min-width: 1.35em;
  height: 3px;
  margin: 1px 0;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-input-frac strong {
  font-size: 0.94em;
  line-height: 1;
}

.s43-card-workbench .s4-l2m-right .stage4-convert-input.s4-l2m-blank {
  box-sizing: border-box;
  width: 1.35em !important;
  min-width: 30px !important;
  max-width: 2.4em;
  height: 1.05em !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(143, 255, 225, .34) !important;
  border-radius: 5px !important;
  background: rgba(247, 255, 255, .94) !important;
  box-shadow: none !important;
  color: #072033 !important;
  font-size: 0.88em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-mixed-row .stage4-convert-input.s4-l2m-blank {
  width: 1.1em !important;
  min-width: 28px !important;
  height: 1.06em !important;
  min-height: 28px !important;
}

.s43-card-workbench .s4-l2m-right .stage4-convert-input.s4-l2m-blank:disabled {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(220, 244, 248, .28) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-input-frac.is-idle .stage4-convert-input.s4-l2m-blank {
  border-color: rgba(143, 255, 225, .34) !important;
  background: rgba(247, 255, 255, .94) !important;
  color: #072033 !important;
  opacity: 1 !important;
}

.s43-card-workbench .s4-l2m-right .stage4-convert-input.s4-l2m-blank.is-focus-blank,
.s43-card-workbench .s4-l2m-right .s4-l2m-input-frac.is-active .stage4-convert-input.s4-l2m-blank.is-focus-blank {
  border-color: rgba(255, 220, 147, .82) !important;
  background: #fff8ef !important;
  color: #072033 !important;
  box-shadow: 0 0 0 2px rgba(255, 220, 147, .2) !important;
  opacity: 1 !important;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-inline-confirm {
  margin-left: 0.2em;
  align-self: center;
  flex-shrink: 0;
  font-size: 15px;
  padding: 5px 14px;
  border-radius: 999px;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row .s4-l2m-eq-rhs {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.16em 0.24em;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row {
  font-size: 26px;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row .s4-mixed {
  gap: 0.04em;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row .s4-l2m-inline-confirm {
  margin-left: 0.28em;
  font-size: 12px;
  padding: 3px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.s43-card-workbench .s4-l2m-right .stage4-convert-input.s4-l2m-blank:focus {
  outline: none;
}

.s43-step-visual,
.s43-final-planks {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.s43-step-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s43-regroup-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.s43-sum-card-row.is-step-sum {
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.s43-piece-badge.is-line {
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  font-size: 14px;
}

.s43-card-workbench .s4-l2m-right.is-step-active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-step-equation {
  width: 100%;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-step-equation.is-level-focus {
  font-size: 29px;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-step-equation .s4-l2m-eq-rhs {
  flex-wrap: wrap;
  gap: 0.42em 0.52em;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row.is-step-equation .s4-l2m-eq-rhs,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row.is-step-equation.is-level-focus .s4-l2m-eq-rhs {
  flex-wrap: nowrap;
  gap: 0.16em 0.24em;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row.is-step-equation,
.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-lcd-row.is-step-equation.is-level-focus {
  font-size: 26px;
}

.s43-summary-card {
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(143, 255, 225, .16);
  border-radius: 10px;
  background: rgba(8, 22, 28, .42);
  transition: opacity .2s ease, border-color .2s ease, background .2s ease;
}

.s43-summary-card.is-intro {
  border-color: rgba(143, 255, 225, .28);
  background: rgba(14, 36, 44, .48);
}

.s43-summary-card.is-active {
  border-color: rgba(143, 255, 225, .52);
  background: rgba(18, 48, 58, .62);
  box-shadow: 0 0 18px rgba(91, 255, 211, .08);
  opacity: 1;
}

.s43-summary-card.is-done {
  opacity: .58;
}

.s43-card-title {
  margin: 0 0 8px;
  color: #eef6ff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}

.s43-card-title .s4-mixed > strong,
.s43-card-title .s4-fraction strong {
  font-size: 1em;
}

.s43-card-lead {
  margin: 0 0 8px;
  color: rgba(205, 232, 237, .84);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.s43-intro-problem {
  color: #fff8e8;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
}

.s43-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s43-card-mini-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.s43-card-mini-row.is-final {
  align-items: flex-end;
}

.s43-mini-track {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.s43-mini-whole {
  position: relative;
  overflow: hidden;
  display: block;
  width: 28px;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(180deg, #c8844f 0%, #9a5f34 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 190, .18);
}

.s43-mini-whole .s4-plank-grain {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.s43-mini-fraction {
  display: block;
  width: 28px;
  height: 52px;
  padding: 2px;
  border: 1px solid rgba(143, 255, 225, .28);
  border-radius: 4px;
  background: rgba(12, 32, 38, .55);
}

.s43-mini-frac-grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  width: 100%;
  height: 100%;
}

.s43-mini-fraction.has-eighth .s43-mini-frac-grid {
  grid-template-rows: repeat(8, 1fr);
}

.s43-mini-frac-grid span {
  border-radius: 1px;
  background: rgba(255, 255, 255, .06);
}

.s43-mini-frac-grid span.filled {
  background: linear-gradient(180deg, #d89558 0%, #a86538 100%);
}

.s43-card-arrow,
.s43-card-plus {
  color: rgba(143, 255, 225, .72);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.s43-badge-group,
.s43-sum-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.s43-piece-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid rgba(143, 255, 225, .24);
  border-radius: 8px;
  color: #eef6ff;
  background: rgba(18, 48, 58, .5);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.s43-piece-badge.is-large {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 16px;
}

.s43-piece-badge.is-total {
  border-color: rgba(143, 255, 225, .48);
  background: rgba(28, 72, 88, .58);
  color: #fff8e8;
}

.s43-piece-badge.is-pending {
  opacity: .72;
}

.s43-piece-badge.is-dim {
  opacity: .52;
}

.s43-piece-badge.is-lit,
.s43-piece-badge.is-focus {
  border-color: rgba(255, 220, 147, .62);
  background: rgba(36, 88, 76, .48);
  box-shadow: 0 0 12px rgba(255, 220, 147, .14);
  opacity: 1;
}

.s43-step-visual.is-split .s43-mini-whole {
  box-shadow: inset 0 0 0 1px rgba(255, 232, 190, .35), 0 0 10px rgba(143, 255, 225, .12);
}

.s43-step-visual.is-combined .s43-mini-fraction {
  box-shadow: 0 0 10px rgba(255, 220, 147, .2);
}

.s43-card-plus.is-lit {
  color: rgba(255, 220, 147, .92);
}

.s43-left-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.s43-left-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(143, 255, 225, .28);
  border-radius: 8px;
  background: rgba(16, 42, 50, .55);
  color: rgba(205, 232, 237, .72);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.s43-left-action-btn.is-active {
  border-color: rgba(255, 220, 147, .62);
  background: rgba(36, 88, 76, .5);
  color: #fff8e8;
  box-shadow: 0 0 12px rgba(255, 220, 147, .12);
}

.s43-left-action-btn.is-done {
  border-color: rgba(143, 255, 225, .38);
  background: rgba(24, 58, 52, .42);
  color: rgba(205, 248, 237, .78);
  cursor: default;
}

.s43-left-action-btn.is-disabled,
.s43-left-action-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.s43-left-action-btn:not(:disabled):not(.is-done):hover {
  border-color: rgba(143, 255, 225, .48);
  background: rgba(28, 68, 62, .55);
}

.s43-action-check {
  color: rgba(143, 255, 225, .88);
  font-size: 12px;
  font-weight: 900;
}

.s43-lcd-card {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
}

.s43-lcd-card.is-focus {
  border: 1px solid rgba(255, 220, 147, .42);
  background: rgba(36, 88, 76, .28);
}

.s43-lcd-card.is-lit,
.s43-lcd-row.is-lit {
  border-color: rgba(255, 220, 147, .42);
}

.s43-lcd-card.is-done {
  opacity: .88;
}

.s43-sum-card-row.is-added .s43-piece-badge.is-lit {
  transform: scale(1.02);
}

.s43-add-sum-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.s43-num-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(143, 255, 225, .28);
  border-radius: 8px;
  color: #eef6ff;
  background: rgba(18, 48, 58, .5);
  font-size: 16px;
  font-weight: 900;
}

.s43-num-chip.is-lit {
  border-color: rgba(255, 220, 147, .62);
  background: rgba(36, 88, 76, .48);
  color: #fff8e8;
}

.s43-num-chip.is-total {
  border-color: rgba(143, 255, 225, .48);
  background: rgba(28, 72, 88, .58);
  color: #fff8e8;
  font-size: 18px;
}

.s43-card-notes {
  margin: 0;
  padding-left: 18px;
  color: rgba(205, 232, 237, .78);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.s43-card-notes.is-single {
  padding-left: 0;
  list-style: none;
}

.s43-card-hint {
  color: rgba(205, 232, 237, .72);
  font-size: 14px;
  font-weight: 800;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-state-active {
  opacity: 1;
}

.s43-card-workbench .s43-dual-count-stack .s43-count-plank,
.s43-card-workbench .s43-dual-count-stack .s43-mini-whole {
  width: var(--s43-plank-w);
  height: var(--s43-plank-h);
  min-height: var(--s43-plank-h);
  max-height: var(--s43-plank-h);
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-row .s4-l2m-input-frac {
  grid-template-rows: auto 3px auto;
  align-items: center;
  vertical-align: middle;
}

.s43-card-workbench .s4-l2m-right .s4-l2m-eq-row.is-imp-row .s4-l2m-input-frac .stage4-convert-input.s4-l2m-blank {
  height: 0.92em !important;
  min-height: 24px !important;
  margin: 0;
}

/* s43 worksheet rebuild — s42 학습지 구조를 s43 범위에서만 재사용 */
body.stage4-ui-active .s4-stage4-main:has(#s43-center-panel) {
  margin-top: calc(86px + 1.5cm);
  min-height: 680px;
  margin-bottom: 12px;
}

#s43-center-panel {
  align-content: start;
  justify-items: center;
  min-height: 0;
  width: 100%;
  padding-bottom: 32px;
}

#s43-center-panel .s43-learning-workbench {
  --s42-math-color: #16212a;
  --s42-math-bar: #000000;
  --s42-plank-w: 68px;
  --s42-plank-h: 142px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(1280px, calc(100% - 48px));
  min-height: 700px;
  padding: 26px 34px 30px;
  margin: 0 auto;
  overflow: hidden;
  transform: translateY(calc(-24px + 1cm));
}

#s43-center-panel .s43-sheet-header {
  position: static;
  flex-shrink: 0;
  margin: 0 0 30px;
  padding-right: 8px;
}

#s43-center-panel .s43-sheet-title {
  font-size: 31px;
  line-height: 1.25;
}

#s43-center-panel .s43-learning-zone {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

#s43-center-panel .s43-split-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  height: calc(100% - 27px);
  max-height: calc(100% - 27px);
  margin-top: -5px;
  overflow: visible;
}

#s43-center-panel .s43-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  max-width: 100%;
  padding: 18px 14px;
  border: 1px solid rgba(210, 218, 226, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 234, 0.96));
  box-shadow: 0 10px 22px rgba(24, 34, 45, 0.08);
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

#s43-center-panel .s43-left-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  max-width: 100%;
  min-height: 300px;
  max-height: 100%;
  overflow: hidden;
}

#s43-center-panel .s43-source-area {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding-bottom: 6px;
}

#s43-center-panel .s43-source-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 42px;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8px;
}

#s43-center-panel .s43-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

#s43-center-panel .s43-source-row .s43-preview-card:first-child {
  transform: translateX(19px);
}

#s43-center-panel .s43-source-row .s43-preview-card:last-child {
  transform: translateX(-19px);
}

#s43-center-panel .s43-plank-track,
#s43-center-panel .s43-transform-planks,
#s43-center-panel .s43-sum-board {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
  max-width: 100%;
}

#s43-center-panel .s43-plus,
#s43-center-panel .s43-frac-plus {
  flex: 0 0 auto;
  color: var(--s42-math-color, #16212a);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

#s43-center-panel .s43-plus {
  align-self: flex-start;
  margin-top: 56px;
}

#s43-center-panel .s43-plank,
#s43-center-panel .s43-plank .s4-lesson1-fraction-model {
  width: var(--s42-plank-w, 68px);
  height: var(--s42-plank-h, 142px);
  flex: 0 0 auto;
  border-radius: 10px;
}

#s43-center-panel .s43-plank.s4-lesson1-whole-block {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(99, 61, 28, 0.05) 80%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 214, 0.46), 0 6px 12px rgba(72, 50, 29, 0.12);
}

#s43-center-panel .s43-plank.s4-lesson1-whole-block .s4-plank-grain {
  display: none;
}

#s43-center-panel .s43-plank.s4-lesson1-fraction-unit {
  width: var(--s42-plank-w, 68px);
  height: var(--s42-plank-h, 142px);
  padding: 0;
  border: 0;
  background: transparent;
}

#s43-center-panel .s43-plank .s4-lesson1-fraction-model {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 30%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, #eed8bb, #dbbf9c);
  box-shadow: inset 0 0 0 1px rgba(197, 148, 94, 0.38), 0 6px 12px rgba(72, 50, 29, 0.08);
}

#s43-center-panel .s43-plank.is-whole-grid .s4-lesson1-fraction-model {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(99, 61, 28, 0.05) 80%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 214, 0.46), 0 6px 12px rgba(72, 50, 29, 0.12);
}

#s43-center-panel .s43-plank .s4-lesson1-fraction-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  height: 100%;
}

#s43-center-panel .s43-plank .s4-lesson1-fraction-grid span {
  border-right: 0;
  border-bottom: 2px solid rgba(217, 188, 150, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 28%, rgba(131, 92, 54, 0.04)),
    linear-gradient(180deg, rgba(246, 231, 210, 0.98), rgba(224, 202, 172, 0.96));
}

#s43-center-panel .s43-plank .s4-lesson1-fraction-grid span:last-child {
  border-bottom: 0;
}

#s43-center-panel .s43-plank .s4-lesson1-fraction-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(99, 61, 28, 0.08) 78%, rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
}

#s43-center-panel .s43-card-label .textbook-math,
#s43-center-panel .s43-transform-label .textbook-math {
  --math-fs: 30px;
  --game-math-color: var(--s42-math-color, #16212a);
  --game-math-bar: var(--s42-math-bar, #000000);
  color: var(--s42-math-color, #16212a);
}

#s43-center-panel .s43-workbench {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 190px;
  padding-top: 4px;
}

#s43-center-panel .s43-bench-floor {
  width: min(100%, 320px);
  height: 2px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(184, 145, 98, 0.42), transparent);
}

#s43-center-panel .s43-visual-stage,
#s43-center-panel .s43-transform-row,
#s43-center-panel .s43-transform-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

#s43-center-panel .s43-visual-stage {
  min-height: 178px;
  gap: 8px;
}

#s43-center-panel .s43-transform-group {
  gap: 8px;
}

#s43-center-panel .s43-transform-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  color: var(--s42-math-color, #16212a);
  font-size: 26px;
  font-weight: 900;
}

#s43-center-panel .s43-sum-board {
  gap: 6px;
}

#s43-center-panel .s43-sum-board .s43-plank {
  --s42-plank-w: 54px;
  --s42-plank-h: 112px;
}

#s43-center-panel .s43-sum-board.is-final .s43-plank {
  --s42-plank-w: 58px;
  --s42-plank-h: 118px;
}

#s43-center-panel [data-s43-anim].is-arriving,
#s43-center-panel .s43-visual-stage.is-arriving {
  animation: s43-plank-arrive 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes s43-plank-arrive {
  0% {
    transform: translateY(-18px) scale(0.98);
    opacity: 0.42;
  }
  78% {
    transform: translateY(2px) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

#s43-center-panel .s43-right-layout {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  row-gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 388px;
  max-width: 100%;
  overflow: hidden;
  padding-top: 12px;
  margin-top: 6px;
}

#s43-center-panel .s43-equations-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-height: 300px;
  width: 100%;
}

#s43-center-panel .s43-eq-line {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  color: var(--s42-math-color, #16212a);
  font-weight: 900;
  line-height: 1.3;
}

#s43-center-panel .s43-eq-line.is-hero-active,
#s43-center-panel .s43-eq-line.is-hero-done,
#s43-center-panel .s43-eq-line.is-active,
#s43-center-panel .s43-eq-line.is-final.is-hero-done {
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
}

#s43-center-panel .s43-eq-line.is-done {
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  opacity: 0.9;
}

#s43-center-panel .s43-eq-line.is-placeholder-visible {
  opacity: 0.62;
}

#s43-center-panel .s43-eq-sign-col {
  text-align: center;
}

#s43-center-panel .s43-eq-body-col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#s43-center-panel .s43-eq-line .textbook-math,
#s43-center-panel .s43-eq-body .textbook-math,
#s43-center-panel .s43-question-area .textbook-math {
  --math-fs: 1em;
  --game-math-color: var(--s42-math-color, #16212a);
  --game-math-bar: var(--s42-math-bar, #000000);
  color: var(--s42-math-color, #16212a);
}

#s43-center-panel .s43-eq-line.is-hero-active .textbook-math,
#s43-center-panel .s43-eq-line.is-hero-done .textbook-math,
#s43-center-panel .s43-eq-line.is-active .textbook-math,
#s43-center-panel .s43-eq-line.is-done .textbook-math {
  --math-fs: 30px;
}

#s43-center-panel .s43-eq-line .textbook-math .tm-bar,
#s43-center-panel .s43-input-frac .tm-bar {
  background: #000000;
  background-color: #000000;
  border-color: #000000;
  opacity: 1;
}

#s43-center-panel .s43-eq-line .textbook-math .tm-num,
#s43-center-panel .s43-eq-line .textbook-math .tm-den,
#s43-center-panel .s43-eq-line .textbook-math .tm-whole,
#s43-center-panel .s43-eq-sign {
  color: var(--s42-math-color, #16212a);
}

#s43-center-panel .s43-static-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
}

#s43-center-panel .s43-blank,
#s43-center-panel .s43-locked-input {
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 2px solid rgba(194, 151, 98, 0.55);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--s42-math-color, #16212a);
  font-size: 30px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

#s43-center-panel .s43-blank.is-active {
  border-color: rgba(167, 118, 68, 0.92);
  box-shadow: 0 0 0 3px rgba(199, 144, 89, 0.16);
  background: rgba(255, 252, 246, 0.98);
}

#s43-center-panel .s43-blank:disabled,
#s43-center-panel .s43-locked-input {
  opacity: 1;
  border-color: rgba(205, 198, 186, 0.92);
  background: rgba(252, 250, 244, 0.98);
  color: rgba(22, 33, 42, 0.96);
  box-shadow: none;
}

#s43-center-panel .s43-disabled-blank {
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 1.5px solid rgba(205, 198, 186, 0.92);
  border-radius: 8px;
  background: rgba(252, 250, 244, 0.98);
  vertical-align: middle;
}

#s43-center-panel .s43-blank.wrong {
  animation: s43-blank-wrong 300ms ease;
  border-color: rgba(220, 170, 40, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(220, 170, 40, 0.22) !important;
  background: rgba(255, 252, 240, 0.98);
}

@keyframes s43-blank-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#s43-center-panel .s43-question-area {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  min-height: 44px;
  padding-top: 0;
  border-top: 0;
}

#s43-center-panel .s43-question-area.is-hidden {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

#s43-center-panel .s43-question-area.is-complete {
  visibility: visible;
  pointer-events: auto;
}

#s43-center-panel .s43-next-method-btn.s4-primary-btn.wood {
  pointer-events: auto;
  min-width: 96px;
  width: auto;
  min-height: auto;
  height: auto;
  padding: 10px 22px;
  border: 1px solid rgba(143, 102, 62, 0.55);
  border-radius: 6px;
  color: #fffdf8;
  background: linear-gradient(180deg, #c79059, #a86c3c);
  box-shadow: 0 8px 16px rgba(89, 58, 33, 0.18);
  font-size: 15px;
}

/* s43 final worksheet skin — s41/s42 밝은 학습지 구조에 맞춤 */
#s43-center-panel .s43-learning-workbench .s43-panel-visual,
#s43-center-panel .s43-learning-workbench .s43-panel-equation {
  border: 1px solid rgba(210, 218, 226, 0.95);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 234, 0.96));
  box-shadow: 0 10px 22px rgba(24, 34, 45, 0.08);
}

#s43-center-panel .s43-learning-workbench .s43-panel-visual {
  justify-content: center;
}

#s43-center-panel .s43-learning-workbench .s43-panel-equation {
  justify-content: flex-start;
  padding: 24px 26px 20px 22px;
}

#s43-center-panel .s43-learning-workbench .s43-visual-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 430px;
  overflow: hidden;
}

#s43-center-panel .s43-learning-workbench .s43-dual-count-stack {
  --s43-plank-w: 64px;
  --s43-plank-h: 132px;
  --s43-plank-gap: 8px;
  width: 100%;
  max-width: 100%;
  align-items: center;
  gap: 16px;
}

#s43-center-panel .s43-learning-workbench .s43-count-stack-item,
#s43-center-panel .s43-learning-workbench .s43-count-stack-row {
  justify-content: center;
}

#s43-center-panel .s43-learning-workbench .s43-count-stack-row {
  gap: 14px;
}

#s43-center-panel .s43-learning-workbench .s43-dual-count-stack.is-has-sum {
  --s43-plank-w: 50px;
  --s43-plank-h: 104px;
  gap: 10px;
}

#s43-center-panel .s43-learning-workbench .s43-count-board,
#s43-center-panel .s43-learning-workbench .s43-count-board.is-sum-result {
  justify-content: center;
  width: auto;
  max-width: 100%;
}

#s43-center-panel .s43-learning-workbench .s43-count-plank {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 241, 214, 0.46), 0 6px 12px rgba(72, 50, 29, 0.12);
}

#s43-center-panel .s43-learning-workbench .s43-count-plank-grid span {
  border-bottom: 2px solid rgba(217, 188, 150, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 28%, rgba(131, 92, 54, 0.04)),
    linear-gradient(180deg, rgba(246, 231, 210, 0.98), rgba(224, 202, 172, 0.96));
}

#s43-center-panel .s43-learning-workbench .s43-count-plank-grid span.filled {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(99, 61, 28, 0.08) 78%, rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, #d6a56f, #b97b49 58%, #996039);
}

#s43-center-panel .s43-learning-workbench .s43-left-conversion-eq {
  color: #16212a;
  font-size: 24px;
  font-weight: 900;
  text-shadow: none;
}

#s43-center-panel .s43-learning-workbench .s43-left-conversion-eq.is-active,
#s43-center-panel .s43-learning-workbench .s43-left-conversion-eq.is-done {
  color: #16212a;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-equations,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-aligned {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 28px 0 0 18px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-step-recap,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-step-equation,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-level-secondary,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-state-done,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-level-focus,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-state-active {
  color: #16212a;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.45;
  opacity: 1;
  text-shadow: none;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-state-done:not(.is-problem-only) {
  opacity: 0.86;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-lhs,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-sign,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-rhs {
  color: #16212a;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-rhs {
  align-items: center;
  gap: 0.42em 0.52em;
}

#s43-center-panel .s43-learning-workbench .textbook-math,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row .textbook-math {
  --math-fs: 1em;
  --game-math-color: #16212a;
  --game-math-bar: #000000;
  color: #16212a;
}

#s43-center-panel .s43-learning-workbench .textbook-math .tm-num,
#s43-center-panel .s43-learning-workbench .textbook-math .tm-den,
#s43-center-panel .s43-learning-workbench .textbook-math .tm-whole {
  color: #16212a;
}

#s43-center-panel .s43-learning-workbench .textbook-math .tm-bar,
#s43-center-panel .s43-learning-workbench .s4-l2m-input-frac .tm-bar {
  background: #000000;
  background-color: #000000;
  border-color: #000000;
  opacity: 1;
}

#s43-center-panel .s43-learning-workbench .stage4-convert-input.s4-l2m-blank {
  box-sizing: border-box;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 48px;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 2px solid rgba(194, 151, 98, 0.55) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #16212a !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center;
  box-shadow: none !important;
  opacity: 1 !important;
}

#s43-center-panel .s43-learning-workbench .stage4-convert-input.s4-l2m-blank.is-focus-blank {
  border-color: rgba(167, 118, 68, 0.92) !important;
  background: rgba(255, 252, 246, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(199, 144, 89, 0.16) !important;
}

#s43-center-panel .s43-learning-workbench .stage4-convert-input.s4-l2m-blank:disabled {
  border-color: rgba(205, 198, 186, 0.92) !important;
  background: rgba(252, 250, 244, 0.98) !important;
  color: rgba(22, 33, 42, 0.96) !important;
}

#s43-center-panel .s43-learning-workbench .s43-conversion-formula-frac .tm-num,
#s43-center-panel .s43-learning-workbench .s43-conversion-formula-frac .tm-den {
  font-size: 0.76em;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-complete-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 8px;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-next-method-btn {
  min-height: auto;
  padding: 10px 22px;
  border: 1px solid rgba(143, 102, 62, 0.55);
  border-radius: 6px;
  color: #fffdf8;
  background: linear-gradient(180deg, #c79059, #a86c3c);
  box-shadow: 0 8px 16px rgba(89, 58, 33, 0.18);
  font-size: 15px;
}

/* s43 learning-flow polish: compact completed rows, one-line formulas, visual links */
#s43-center-panel .s43-learning-workbench .s4-l2m-equations,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-aligned {
  padding: 12px 0 0 6px;
  gap: 8px;
  justify-content: flex-start;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-step-recap,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-step-equation,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-level-secondary,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-state-done,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-level-focus,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-state-active {
  min-height: 38px;
  font-size: 27px;
  line-height: 1.18;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-problem-only {
  min-height: 46px;
  margin-bottom: 0;
  font-size: 29px;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-compact-summary {
  min-height: 34px;
  font-size: 25px;
  opacity: 0.92;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-one-line-formula,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-lcd-detail-row {
  font-size: 23px;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-final-answer {
  font-size: 29px;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-rhs {
  flex-wrap: nowrap;
  gap: 0.28em;
  white-space: nowrap;
}

#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-one-line-formula .s4-l2m-eq-rhs,
#s43-center-panel .s43-learning-workbench .s4-l2m-eq-row.is-lcd-detail-row .s4-l2m-eq-rhs {
  transform: scale(0.96);
  transform-origin: left center;
}

#s43-center-panel .s43-learning-workbench .s43-conversion-formula-frac {
  flex: 0 0 auto;
  --math-fs: 0.9em;
}

#s43-center-panel .s43-learning-workbench .s43-conversion-formula-frac .tm-num,
#s43-center-panel .s43-learning-workbench .s43-conversion-formula-frac .tm-den {
  font-size: 0.72em;
  white-space: nowrap;
}

#s43-center-panel .s43-learning-workbench .stage4-convert-input.s4-l2m-blank {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  font-size: 27px !important;
}

#s43-center-panel .s43-learning-workbench .s43-eq-separator {
  width: min(330px, 88%);
  height: 2px;
  margin: 0 0 0 44px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(22, 33, 42, 0.58), rgba(22, 33, 42, 0.08));
}

#s43-center-panel .s43-learning-workbench .s43-count-stack-item.is-linked-focus .s43-count-plank {
  box-shadow:
    inset 0 0 0 2px rgba(255, 241, 214, 0.72),
    0 0 0 4px rgba(199, 144, 89, 0.18),
    0 10px 18px rgba(112, 72, 35, 0.18);
  filter: saturate(1.1) brightness(1.04);
}

#s43-center-panel .s43-learning-workbench .s43-count-stack-item.is-linked-focus .s43-left-conversion-eq {
  color: #8d5725;
}