:root {
  --bg-color: #f2f8f5;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --primary-color: var(--ss-brand, #2F6B57);
  --text-color: #2f3542;
  --correct-bg: #e8f5e9;
  --wrong-bg: #fff0f0;
  --header-badge-bg: var(--ss-ink, #26332E);
  --mission-bg: #fff3cd;
  --mission-text: #856404;

  /* 상단 + / - 줌 컨트롤 변수 */
  --user-scale: 1.2;

  /* 기기의 가로(vw)와 세로(vh) 너비를 모두 고려하여 화면에 쏙 들어가게 자동 조정 */
  --base-cell: clamp(25px, min(8vw, 10vh), 100px);
  --cell-size: calc(var(--base-cell) * var(--user-scale));

  --font-size: calc(var(--cell-size) * 0.7);
  --operator-size: calc(var(--cell-size) * 0.6);
  --input-font-size: calc(var(--cell-size) * 0.75);
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

body {
  font-family: "Nanum Gothic", sans-serif;
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-color);
  transition: background-color 0.3s;
}

/* === 집중 모드 === */
body.focus-mode header,
body.focus-mode #mission-bar {
  display: none !important;
}
.exit-focus-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 1000;
  display: none;
  backdrop-filter: blur(5px);
}
body.focus-mode .exit-focus-btn {
  display: block;
}

/* === 헤더 & 미션바 === */
header {
  width: 100%;
  height: 70px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--header-bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  z-index: 100;
  flex-shrink: 0;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}
/* 아이패드 등 좁은 화면에서 헤더 글자가 줄바꿈되며 헤더 높이가 무너지는 것 방지 */
.back-btn, .brand, .mode-opt, .status-badge { white-space: nowrap; }
.icon-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #555;
  padding: 5px;
  transition: color 0.2s;
}
.icon-btn:hover {
  color: var(--primary-color);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-badge {
  background-color: var(--header-badge-bg);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.2s;
}
.zoom-controls {
  display: flex;
  background: #f1f2f6;
  border-radius: 20px;
  padding: 4px;
  margin-right: 10px;
}
.zoom-btn {
  border: none;
  background: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.zoom-btn:hover {
  background: #dfe4ea;
}
.mode-switch-container {
  display: flex;
  gap: 5px;
  background: #f1f2f6;
  padding: 4px;
  border-radius: 12px;
  margin-right: 10px;
}
.mode-opt {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  color: #777;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mode-opt.active {
  background: white;
  color: var(--primary-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#mission-bar {
  width: 100%;
  background-color: var(--mission-bg);
  color: var(--mission-text);
  padding: 10px 20px;
  display: none;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ffeeba;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  z-index: 90;
  font-size: 0.95rem;
  font-weight: bold;
  transition: all 0.3s ease;
}
#mission-bar.active {
  display: flex;
}
#mission-bar.complete {
  background-color: #d4edda;
  color: #155724;
  border-bottom-color: #c3e6cb;
}
.mission-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.mission-timer {
  color: #d32f2f;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mission-progress {
  display: flex;
  gap: 5px;
  align-items: center;
}
.m-circle {
  width: 28px;
  height: 28px;
  border: 2px solid #856404;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.5);
  font-weight: bold;
}
.m-circle.done {
  background: #28a745;
  border-color: #28a745;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.mission-complete-badge {
  display: none;
  background: #28a745;
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* === 사이드 메뉴 === */
#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;
  background: #ffffff;
  z-index: 200;
  transform: translateX(-100%);
  transition: 0.3s;
  padding: 20px;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}
#side-menu.open {
  transform: translateX(0);
}
.menu-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 15px;
}
.level-btn {
  width: 100%;
  padding: 15px;
  margin-bottom: 12px;
  text-align: left;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 12px;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
  font-family: inherit;
}
.level-btn:hover {
  background: #eef2f5;
}
.level-btn.active {
  background: var(--header-badge-bg);
  color: white;
  border-color: var(--header-badge-bg);
  box-shadow: 0 4px 6px rgba(26, 31, 80, 0.2);
}
.level-btn small {
  display: block;
  font-size: 0.8rem;
  margin-top: 4px;
  opacity: 0.8;
}
.record-btn {
  width: 100%;
  padding: 15px;
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  border-radius: 12px;
  color: #2e7d32;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  font-size: 1rem;
  text-align: center;
}
.record-btn:hover {
  background: #c8e6c9;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 150;
  display: none;
  backdrop-filter: blur(2px);
}
.overlay.show {
  display: block;
}

/* === 메인 영역 & 카드 === */
.main-container {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.problem-grid {
  display: contents;
}
.problem-wrapper {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.problem-card {
  /* ★문제 카드는 흰 종이 한 장으로 — 그라데이션과 짙은 그림자를 걷어 냈다.
     아이가 봐야 할 것은 식과 답 칸이지 카드 자체가 아니다. */
  background: var(--ss-surface, #ffffff);
  border-radius: 20px;
  padding: 30px 20px;
  box-shadow: 0 2px 8px rgba(38, 51, 46, 0.06);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  width: 97%;
  height: 97%;
  justify-content: center;
  overflow: hidden;
}

/* === 카드 애니메이션 === */
@keyframes cardFocus {
  0%   { transform: translateY(100vh); }
  100% { transform: translateY(0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX( 7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX( 4px); }
}

.problem-card.card-enter {
  animation: cardFocus 0.24s ease both;
}
.problem-card.wrong-shake {
  animation: shake 0.45s ease both;
}

.problem-card.horizontal-card {
  /* 세로셈 카드와 동일한 크기 (width/height: 95%) */
}
.problem-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 6px;
  background: var(--primary-color);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  opacity: 0.9;
}

/* === 받아올림 필기장 투명화 === */
.full-scratchpad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  touch-action: none;
  cursor: crosshair;
  border-radius: 24px;
  background-color: transparent !important;
  pointer-events: all;
}

/* === 우측 상단 도구 모음 === */
.card-tools {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
}
.clear-pad-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #dfe4ea;
  background: #ffffff;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}
.clear-pad-btn:hover {
  background: #ff7675;
  color: white;
  border-color: #ff7675;
}
.hint-toggle-btn {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  padding: 10px 18px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}
/* 💡 그림도 힌트로(vis-hint, 2026-10-06) — «힌트 보기» 전에는 그림 자리에 빈 점선 상자만. 자리는 그대로라 열어도 카드가 안 흔들린다 */
.problem-card:not(.show-hints) .ss-card.vis-hint .ss-vis > * { visibility: hidden; }
.problem-card:not(.show-hints) .ss-card.vis-hint .ss-vis::before { content: '💡 힌트 보기를 누르면 그림이 나와요'; position: absolute; inset: 6px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; border: 2px dashed #e2e8f0; border-radius: 14px;
  color: #94a3b8; font-weight: 700; font-size: calc(1rem * var(--user-scale, 1)); }
/* 힌트 글 — «힌트 보기» 를 눌러야(카드에 show-hints) 보인다. 과목 공용(술술수학 원칙) */
.q-tip { display: none; font-size: calc(1.2rem * var(--user-scale, 1)); color: #b45309; text-align: center; font-weight: 700; pointer-events: none; }
.problem-card.show-hints .q-tip { display: block; }
/* ★힌트 글은 카드 몸의 왼쪽 위에(2026-10-05 «오른손잡이 — 힌트는 왼쪽에»). 예전에는 답 칸 아래라 쓰는 손에 가렸다. 켜면 본문이 한 줄만큼 내려간다 */
.problem-card .ss-card > .q-tip { position: absolute; left: 4px; top: 0; max-width: 100%; text-align: left; line-height: 1.3; }
.problem-card.show-hints .ss-card.has-tip { padding-top: calc(2.3rem * var(--user-scale, 1)); }
.hint-toggle-btn:hover {
  background: #ffeeba;
}
.hint-toggle-btn.active {
  background: var(--mission-text);
  color: white;
  border-color: var(--mission-text);
}

/* =========================================
   Safari 터치 오류(zoom) 방지를 위한 공통 스케일링
========================================= */
.problem-card {
  /* 카드 자신을 크기 기준(컨테이너)으로 삼아, 문제 내용이 화면(카드)에 맞춰 계산되게 함 (cqw/cqh) */
  container-type: size;
  /* --fit-scale: 내용이 카드보다 크면 잘리지 않도록 JS가 자동으로 낮추는 값 (기본 1) */
  --current-scale: calc(var(--user-scale) * var(--level-scale, 1) * var(--fit-scale, 1));
  --cell-size: calc(var(--base-cell) * var(--current-scale));
  --font-size: calc(var(--cell-size) * 0.7);
  --operator-size: calc(var(--cell-size) * 0.6);
  --input-font-size: calc(var(--cell-size) * 0.75);
}
/* 최소 배율(0.55)로도 다 안 들어가는 극단적인 경우엔 카드 안에서 스크롤 허용 (잘림 방지) */
.problem-card.fit-scroll { overflow: auto; }

/* =========================================
   수학 문제 영역 (공통)
========================================= */
.math-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  margin: 20px auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.math-grid {
  display: grid;
  gap: calc(9px * var(--current-scale, 1));
  justify-content: center;
  width: max-content;
}

/* === 가로형 문제 레이아웃 === */
.math-grid.horizontal-layout {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.horizontal-layout .problem-line,
.horizontal-layout .answer-line {
  display: flex;
  align-items: center;
}
.horizontal-layout .num-group {
  display: flex;
  align-items: center;
}
/* 가로형: 숫자 표시 셀만 폭을 좁게 (입력 셀은 정사각 유지) */
.horizontal-layout .num-group .cell:not(.input-cell) {
  width: calc(var(--cell-size) * 0.58);
}
/* 가로형: 연산자 셀 좌우 여백 축소 */
.horizontal-layout .cell.operator {
  padding-right: 0;
  width: calc(var(--cell-size) * 0.75);
}

.problem-idx {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  /* ★문제 줄(술술수학 원칙 5) — 오른쪽 지우개·힌트 단추 자리는 비운다. 폭은 엔진(fitHeader)이 단추 크기를 재서 넣는다 */
  right: var(--idx-right, 80px);
}
.idx-badge {
  position: relative;
  background: var(--primary-color);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 112, 74, 0.3);
  transition: background 0.3s, box-shadow 0.3s;
}
/* 채점 결과 — 문항 번호 칸에 O(정답)·X(오답) 표시 */
.idx-badge.idx-correct { background: #22c55e; box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4); }
.idx-badge.idx-wrong   { background: #ef4444; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4); }
/* 정답의 작은 ○ 딱지는 뺐다(2026-10-04 선생님: 빨간펜 채점 동그라미가 있으니까) — 번호 칸이 초록으로 바뀌는 것은 그대로 */
.idx-badge.idx-wrong::after {
  position: absolute;
  top: -9px; right: -9px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; line-height: 1;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  animation: idxPop 0.3s ease both;
}
.idx-badge.idx-wrong::after   { content: "✕"; background: #dc2626; color: #fff; }
@keyframes idxPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.idx-label {
  /* ★글자 크기는 엔진(GameEngine.fitHeader)이 화면 폭과 글 길이에 맞춰 정한다 — 짧으면 크게, 길면 두 줄에 들어가게 줄인다 */
  font-size: var(--idx-fs, 1.7rem);
  font-weight: 700;
  color: #334155;
  word-break: keep-all;
  line-height: 1.35;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 700;
  color: #333;
  position: relative;
  font-size: var(--font-size);
}
.cell:empty {
  border: none;
}

.operator {
  justify-content: flex-end;
  padding-right: 10px;
  color: #777;
  font-size: var(--operator-size);
}

.divider {
  grid-column: 1 / -1;
  height: 4px;
  background: #333;
  margin: 4px 0;
}

/* =========================================
   정답 입력 칸 (공통)
========================================= */
.canvas-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.canvas-wrapper {
  width: 100%;
  height: 100%;
  border: 3px solid #b2bec3 !important;     /* 오리엔테이션과 동일한 회색 테두리 */
  border-radius: 14px !important;            /* 오리엔테이션 14px */
  background: #fff;
  position: relative;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05) !important; /* 오리엔테이션 inset 그림자 */
}

.canvas-wrapper div {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: var(--primary-color) !important;
  font-size: var(--input-font-size) !important;
}

/* ── 다자리 입력: 오리엔테이션과 동일한 스타일 ── */
.multi-canvas-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: center;
}
.multi-canvas-row .canvas-wrapper {
  border-color: #b2bec3 !important;
  border-radius: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 1px !important;
  border-right-style: dashed !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.05) !important;
}
.multi-canvas-row .canvas-wrapper:first-child {
  border-radius: 14px 0 0 14px !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
}
.multi-canvas-row .canvas-wrapper:last-child {
  border-radius: 0 14px 14px 0 !important;
  border-right-width: 3px !important;
  border-right-style: solid !important;
}
/* 시계·무게 dashed-row: 파란 점선 유지 */
.multi-canvas-row.dashed-row .canvas-wrapper {
  border-color: #3498db !important;
  border-style: dashed !important;
  border-right-width: 1px !important;
}
.multi-canvas-row.dashed-row .canvas-wrapper:first-child {
  border-left-width: 3px !important;
  border-left-style: dashed !important;
}
.multi-canvas-row.dashed-row .canvas-wrapper:last-child {
  border-right-width: 3px !important;
  border-right-style: dashed !important;
}

.canvas-wrapper.wrong-cell {
  background-color: var(--wrong-bg) !important;
  border-color: #f87171 !important;
}

/* ── 인터렉티브 선택형 버튼 (모든 베타 프로그램 공통) ── */
.choices-row {
  display: flex;
  gap: calc(10px * var(--user-scale, 1));
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
  margin-top: 4px;
}
.choice-btn {
  padding: calc(13px * var(--user-scale, 1)) calc(22px * var(--user-scale, 1));
  font-size: calc(1.25rem * var(--user-scale, 1));
  font-weight: 800;
  border-radius: 14px;
  border: 3px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  min-width: calc(90px * var(--user-scale, 1));
  line-height: 1.3;
}
.choice-btn:hover {
  background: #eef2ff;
  border-color: #818cf8;
  color: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.18);
}
.choice-btn.selected {
  background: #22c55e !important;
  border-color: #16a34a !important;
  color: white !important;
  pointer-events: none;
  transform: none;
}
.choice-btn.wrong {
  background: #fef2f2 !important;
  border-color: #f87171 !important;
  color: #dc2626 !important;
  animation: choice-shake 0.5s ease;
}
.choice-btn:disabled {
  opacity: 0.65;
  cursor: default;
  pointer-events: none;
  transform: none;
}
@keyframes choice-shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.canvas-wrapper.hint-wrong-shade {
  background-color: var(--wrong-bg) !important;
  transition: background-color 0.3s;
}

.mark-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: calc(var(--cell-size) * 2.5);
  opacity: 0.9;
  pointer-events: none;
  z-index: 20;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mark-img.show {
  transform: translate(-50%, -50%) scale(1);
}

.floating-btn {
  display: none;
  padding: 10px 20px;
  background: #ff9f43;
  color: white;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 159, 67, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.floating-btn.visible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.floating-btn.finish-mode {
  background: var(--primary-color);
  box-shadow: 0 4px 14px rgba(0, 112, 74, 0.35);
}
.floating-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 159, 67, 0.5);
}
.floating-btn.finish-mode:hover {
  box-shadow: 0 6px 16px rgba(0, 112, 74, 0.5);
}

/* 줄 힌트(곱셈 부분곱) — 줄의 왼쪽에 둔다(오른손으로 쓰면 줄의 오른쪽이 손에 가린다). 줄의 첫 칸에 붙는다 */
.row-hint {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(var(--font-size) * 0.5);
  color: #888;
  background: #fff3cd;
  padding: 5px 15px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  white-space: nowrap;
  font-weight: bold;
}
.show-hints .row-hint {
  opacity: 1;
  transform: translateY(-50%) translateX(-5px);
  color: var(--mission-text);
}

.overlay-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.98);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}
.hidden-screen {
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.big-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-color);
  margin-bottom: 10px;
}
.start-btn {
  background: var(--primary-color);
  color: white;
  font-size: 1.3rem;
  padding: 15px 50px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 10px 20px rgba(0, 112, 74, 0.3);
  transition: 0.2s;
}
.start-btn:hover {
  background: #005c3d;
  transform: scale(1.05);
}
.result-box {
  background: white;
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 500px;
  text-align: center;
  border: 1px solid #eee;
}
.score-display {
  font-size: 4rem;
  font-weight: 900;
  color: var(--primary-color);
  margin: 10px 0;
}

.result-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.result-btn {
  flex: 1;
  padding: 16px 10px;
  border-radius: 16px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  font-family: inherit;
}
.result-btn:hover  { transform: translateY(-2px); filter: brightness(1.06); }
.result-btn:active { transform: scale(0.96); }
.result-btn-ghost {
  background: #f1f2f6;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
}
.result-btn-warn {
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #fcd34d;
}
.result-btn-primary {
  flex: 1.5;
  background: var(--primary-color);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(61, 90, 254, 0.35);
  letter-spacing: -0.01em;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.s-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #eee;
}
.s-item.correct {
  background: var(--correct-bg);
  color: var(--correct-text);
  border-color: var(--correct-bg);
}
.s-item.wrong {
  background: #eee;
  color: #777;
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* =========================================
   시작 화면 (Start Screen) 디자인 개선
========================================= */
#start-screen {
  background: rgba(240, 246, 250, 0.95);
  backdrop-filter: blur(5px);
}
.start-card {
  background: white;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 550px;
  text-align: center;
  border: 1px solid #e2e8f0;
  max-height: 90dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.start-card .big-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-card .subtitle {
  color: #64748b;
  margin-bottom: 30px;
  font-weight: 500;
  font-size: 1.1rem;
}

.setting-section {
  text-align: left;
  margin-bottom: 25px;
  background: #f8fafc;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
}

.setting-label {
  display: block;
  font-weight: 800;
  color: #334155;
  margin-bottom: 15px;
  font-size: 1.1rem;
}
.setting-label i {
  color: var(--primary-color);
  margin-right: 8px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.level-pill {
  padding: 12px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  color: #475569;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.level-pill:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: #f0f6fa;
}
.level-pill.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  box-shadow: 0 4px 10px rgba(0, 112, 74, 0.3);
}
.level-pill small {
  font-size: 0.75rem;
  opacity: 0.8;
  font-weight: normal;
}

.count-selector {
  display: flex;
  gap: 10px;
}
.count-radio {
  flex: 1;
  cursor: pointer;
  margin: 0;
}
.count-radio input {
  display: none;
}
.count-btn {
  display: block;
  padding: 12px 5px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  text-align: center;
  font-weight: bold;
  color: #475569;
  transition: 0.2s;
  font-size: 0.95rem;
}
.count-radio input:checked + .count-btn {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.2);
}

.start-btn {
  width: 100%;
  margin-top: 10px;
  padding: 18px;
  font-size: 1.3rem;
  border-radius: 16px;
}

/* =========================================
   로고 아이콘 디자인
========================================= */
.title-icon {
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.header-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.start-icon {
  width: 50px;
  height: 50px;
  margin-right: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* =========================================
   아이패드/모바일 스크롤 간섭 방지
========================================= */
.canvas-wrapper canvas {
  touch-action: none !important;
  outline: none;
  -webkit-user-select: none;
  /* ★손글씨 캔버스는 **제 칸을 꼭 채운다.**
     🔴이 두 줄이 없었다. <canvas> 는 크기를 안 적어 주면 브라우저 기본값
       **300×150** 으로 그려진다 — 칸이 72~132px 인데 캔버스만 300×150 이었다.
       칸에는 overflow:hidden 이 걸려 있어 눈에는 안 보였지만, 캔버스 자체는
       칸 밖으로 사방에 삐져나가 **옆 칸·윗칸을 덮고 손을 가로챘다.**
       분수는 분자 위에 분모가 세로로 붙어 있어 이 일이 그대로 드러났다 —
       DOM 에서 나중인 분모 캔버스가 분자 칸을 덮어, 분자에 아무리 써도
       분모 캔버스가 손을 먼저 받았다("분모는 되는데 분자는 안 된다" · 선생님 신고).
       화면이 좁을수록 칸이 작아져 더 심했다(재어 보니 폭 480px 에서는
       분자 칸 스물다섯 곳이 **모두** 분자에 안 닿았다).
     ★크기가 맞아야 획 굵기·읽은 글자 크기도 제대로 잡힌다 —
       InputCanvas 는 칸 크기를 재어 그 둘을 정한다. */
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .brand span { display: none; }
  .header-right .status-badge:not(#timer-badge) { display: none; }
  #mission-bar { flex-direction: column; gap: 10px; align-items: flex-start; }
  .mission-info { width: 100%; justify-content: space-between; }
  .problem-wrapper { padding: 6px; }
  .problem-card { padding: 12px 10px; }
  .card-tools { top: 10px; right: 10px; gap: 4px; }
  .hint-toggle-btn { font-size: 0.85rem; padding: 6px 10px; }
  .clear-pad-btn { width: 36px; height: 36px; font-size: 1rem; }
  .problem-idx { top: 12px; left: 14px; gap: 10px; }
  .idx-badge { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
  .idx-label { font-size: var(--idx-fs, 0.82rem); }
}

@media (max-height: 850px) {
  .start-card { padding: 20px 30px; }
  .start-card .big-title { font-size: 2rem; }
  .start-icon { width: 38px; height: 38px; margin-right: 8px; }
  .start-card .subtitle { font-size: 0.95rem; margin-bottom: 15px; }
  .setting-section { padding: 12px 15px; margin-bottom: 12px; }
  .setting-label { font-size: 0.95rem; margin-bottom: 8px; }
  .level-pill { padding: 8px; }
  .level-pill span { font-size: 0.95rem; }
  .count-btn { padding: 8px 5px; font-size: 0.9rem; }
  .start-btn { margin-top: 5px; padding: 12px; font-size: 1.1rem; }
}

/* === 세로방향(portrait) 헤더 오버플로우 방지 === */
@media (orientation: portrait) {
  /* 바로가기 드롭다운 숨김 — 사이드 메뉴(☰)에서 사용 */
  .play-quick-nav { display: none !important; }
}

@media (orientation: portrait) and (max-width: 900px) {
  /* 즉시/다풀고: 텍스트 숨기고 아이콘만 표시 */
  .mode-opt { font-size: 0; padding: 6px 8px; gap: 0; }
  .mode-opt i { font-size: 0.88rem; }
  .mode-switch-container { padding: 3px; margin-right: 4px; }
  /* 줌 버튼 마진 축소 */
  .zoom-controls { margin-right: 4px; }
  /* 대부분의 아이패드 세로모드(810~834px)는 768px 기준을 벗어나 있어 따로 압축 필요 */
  .brand span { display: none; }
  .header-right .status-badge:not(#timer-badge) { display: none; }
}
/* =========================================
   문제 카드 표준 규격 (사칙연산 제외 전 과목 공통)
   기준: 공간과 입체(blocks.js) — ① 내용이 카드의 약 80%를 차지,
   ② 질문 박스(상단) + 시각자료(중앙) + 정답 입력(하단) 구조,
   ③ 카드 컨테이너 단위(cqw/cqh)로 화면 크기에 비례해 확대.
   새 과목을 만들 때도 이 규격을 따를 것. (덧셈·뺄셈·곱셈·나눗셈
   세로셈과 구구단 게임은 자체 cqw 체계라 제외)
========================================= */
.problem-card .est-card, .problem-card .prob-card, .problem-card .cbd-card,
.problem-card .prm-card, .problem-card .gr3-card, .problem-card .blk-card,
.problem-card .sld-card, .problem-card .geo-card, .problem-card .crc-card,
.problem-card .clock-card, .problem-card .dec-card, .problem-card .graph-card,
.problem-card .large-num-card, .problem-card .len-card, .problem-card .ratio-card,
.problem-card .tri-card, .problem-card .vl-card, .problem-card .wt-card,
.problem-card .fraction-card {
  min-height: 76cqh;
  justify-content: center;
  justify-content: safe center;
  gap: clamp(14px, 2.6cqh, 32px);
}
/* 질문 박스: 카드 폭에 비례한 글자 크기 */
.problem-card .question-text, .problem-card .est-q, .problem-card .prob-text,
.problem-card .cbd-q, .problem-card .prm-q, .problem-card .gr3-q,
.problem-card .blk-q, .problem-card .sld-q, .problem-card .group-text,
.problem-card .plain-text {
  font-size: calc(clamp(1.5rem, 2.9cqw, 2.4rem) * var(--user-scale, 1));
  max-width: 86%;
  line-height: 1.55;
}
/* 시각자료 이미지: 카드 높이를 넘지 않게 (채점 도장 제외) */
.problem-card [class*="-card"] img:not(.mark-img) {
  max-height: 38cqh;
  object-fit: contain;
}

/* =========================================
   ★술술수학 입력·그림 표준 — 한 벌 (2026-10-03 선생님: «입력 패턴의 통일화가 안 되고 있어 — 한 기준으로»)
   과목 파일은 답 칸·점선 칸·소수점·분수 칸·그림 크기를 **여기 것만** 쓴다(math/configs/_ui_common.js 가 이 클래스를 만든다).
   과목 파일에 칸 크기·테두리·점선·소수점 CSS 를 새로 쓰지 않는다 — 쓰면 또 어긋난다.
     ① 답 칸      .ss-box            한 칸에 숫자 하나. 90×110(본보기 5-1-6)
     ② 여러 자리  .multi-canvas-row  칸을 이어 붙이고 사이를 점선으로(원칙 2). 칸 80×110
     ③ 소수점     .ss-dotslot > .ss-dot  칸 사이 ○ 를 눌러 찍는다(원칙 3, 본보기 5-2-4)
     ④ 분수       .ss-frac           자연수 칸 + (분자 칸 / 가로줄 / 분모 칸)
     ⑤ 답 줄      .ss-ans            «정답 [칸] 단위» 한 줄
     ⑥ 그림       .ss-vis            남는 자리를 다 쓴다(본디 크기의 2배까지 — _ui_common.js paintVis)
     ⑦ 고르기     .ss-choices        ①~⑤ 보기 글(답은 번호를 손글씨로)
========================================= */
:root {
  --ss-box-w: calc(90px * var(--user-scale, 1));
  --ss-box-h: calc(110px * var(--user-scale, 1));
  --ss-row-w: calc(80px * var(--user-scale, 1));
}
/* ★카드 본문은 «머리(문제 줄) 아래 ~ 카드 바닥» 을 꽉 채우는 상자 — 머리가 두 줄이 되어도 그림이 머리를 덮지 않는다.
   --hdr-bottom 은 엔진(GameEngine.fitHeader)이 문제 줄 높이를 재서 넣는다.
   세로로 긴 카드: 그림(남는 높이를 다 씀) 위 · 보기와 답 아래.   가로로 넓은 카드(태블릿 가로·모니터): 그림 왼쪽 | 보기와 답 오른쪽.
   답 칸 크기는 어느 쪽이든 같다(기기별로 줄이지 않는다) — 달라지는 것은 그림이 차지하는 자리뿐. */
.problem-card .ss-card { position: absolute; left: 20px; right: 20px; top: calc(var(--hdr-bottom, 76px) + 10px); bottom: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.4cqh, 26px); pointer-events: none; }
/* ★쌓는 차례: 그림(0) < 필기장(1) < 답 칸·보기(10). 예전에는 카드 통째가 필기장 위(10)여서 도형 위에 그은 선이 그림에 가려졌다
   (2026-10-04 선생님: «도형 위에 선을 그려 보면 대각선 찾기가 쉬울 텐데 필기가 도형 위에는 안 됨»). */
.problem-card .ss-side { position: relative; z-index: 10; flex: 0 0 auto; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2cqh, 22px); pointer-events: none; }
.problem-card .ss-card:not(.has-vis) .ss-side { width: 100%; }
@container (min-aspect-ratio: 5/4) {
  .problem-card .ss-card.has-vis { flex-direction: row; gap: clamp(16px, 3cqw, 40px); }
  .problem-card .ss-card.has-vis .ss-vis { height: 100%; width: auto; }
  .problem-card .ss-card.has-vis .ss-side { flex: 0 0 auto; max-width: 62%; }      /* 답 줄은 줄어들지 않는다(단위가 아랫줄로 떨어지지 않게) — 모자라면 그림이 줄어든다 */
  /* 답 줄이 길어 그림 자리가 너무 좁아지면(_ui_common.js 가 재서 .stack 을 붙인다) 넓은 카드에서도 위아래로 쌓는다 */
  .problem-card .ss-card.has-vis.stack { flex-direction: column; gap: clamp(10px, 2.4cqh, 26px); }
  .problem-card .ss-card.has-vis.stack .ss-vis { height: auto; width: 100%; }
  .problem-card .ss-card.has-vis.stack .ss-side { flex: 0 0 auto; max-width: 100%; }
}
.problem-card .ss-box { width: var(--ss-box-w) !important; height: var(--ss-box-h) !important; flex: 0 0 auto; background: #fff; pointer-events: auto; }
.problem-card .multi-canvas-row .ss-box,
.problem-card .ss-decrow .ss-box { width: var(--ss-row-w) !important; }
.problem-card .ss-box canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.problem-card .ss-ans { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; pointer-events: none; }
.problem-card .ss-label { font-size: calc(1.5rem * var(--user-scale, 1)); color: #4338ca; font-weight: 900; background: #eef2ff; padding: 4px 12px; border-radius: 10px; white-space: nowrap; }
.problem-card .ss-unit { font-size: calc(1.8rem * var(--user-scale, 1)); font-weight: 800; color: #334155; white-space: nowrap; }
/* ③ 소수 답 줄 — 숫자 칸 사이에 좁은 «점 칸». ○ 가 필기 칸 위에 겹치면 획을 삼키므로 반드시 따로 열 */
.problem-card .ss-decrow { display: flex; align-items: stretch; justify-content: center; gap: 0; }
.problem-card .ss-dotslot { width: calc(var(--ss-row-w) * 0.36); height: var(--ss-box-h); display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--ss-box-h) * 0.08); box-sizing: border-box; pointer-events: auto; }
.problem-card .ss-dot { width: 100%; height: 55%; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; }
.problem-card .ss-dot::before { content: ''; width: calc(var(--ss-row-w) * 0.24); height: calc(var(--ss-row-w) * 0.24); border-radius: 50%; border: 3px dashed #f59e0b; background: transparent; box-sizing: border-box; }
.problem-card .ss-dot.on::before { border: 0; background: #e74c3c; }
.problem-card .ss-dot:hover::before { background: #fde68a; }
.problem-card .ss-decrow.wrong-dot .ss-dot::before { border-color: #ef4444; }
.problem-card .ss-dot-tip { font-size: calc(1.15rem * var(--user-scale, 1)); color: #b45309; text-align: center; font-weight: 700; }
/* ④ 분수 */
.problem-card .ss-frac { display: flex; align-items: center; gap: 6px; }
.problem-card .ss-frac-v { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.problem-card .ss-frac-line { width: 100%; height: 4px; background: #333; margin: 5px 0; border-radius: 2px; }
/* 분수 칸은 «작은 칸»(표준의 0.78배) 한 가지 — 분자·분모가 위아래로 놓이고, 셈하는 식에서는 중간 값까지 한 줄에 늘어서기 때문이다 */
.problem-card .ss-frac { --ss-box-w: calc(70px * var(--user-scale, 1)); --ss-box-h: calc(86px * var(--user-scale, 1)); --ss-row-w: calc(62px * var(--user-scale, 1)); }
.problem-card .ss-frac .ss-eq { line-height: 1.12; }
/* ⑨ 식 줄 — 주어진 수·기호·답 칸을 한 줄에. 넘치면 «= □» 덩어리(.ss-chunk)째 다음 줄로 */
.problem-card .ss-eqrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; max-width: 100%; pointer-events: none; }
.problem-card .ss-chunk { display: inline-flex; align-items: center; gap: 14px; }
.problem-card .ss-scratch { width: calc(300px * var(--user-scale, 1)); height: calc(150px * var(--user-scale, 1)); border: 3px dashed #cbd5e1; border-radius: 12px; position: relative; flex: 0 1 auto; }
.problem-card .ss-scratch::after { content: '풀이 공간'; position: absolute; top: 8px; right: 12px; color: #94a3b8; font-size: 0.85rem; font-weight: 700; }
/* 둥근 칸 — 부등호(> = <)를 쓰는 자리 */
.problem-card .ss-box.ss-round { width: var(--ss-box-h) !important; border-radius: 50% !important; margin: 0 6px; }
/* ⑥ 그림 */
.problem-card .ss-vis { position: relative; z-index: 0; flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; pointer-events: none; }
.problem-card .ss-card .ss-vis img:not(.mark-img) { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
/* 조작판(끌어다 놓기) — 그림 자리에 살아 있는 SVG 를 둔다. 필기장보다 위라야 손가락이 닿는다 */
.problem-card .ss-vis.live { z-index: 5; pointer-events: auto; touch-action: none; }
.problem-card .ss-vis.live > svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
/* 그림 여러 장 — 옆으로 나란히, 자리를 똑같이 나눈다 */
.problem-card .ss-vis.multi { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
.problem-card .ss-vis.multi .ss-vcell { position: relative; flex: 1 1 0; min-width: 0; }
.problem-card .ss-card .ss-vis.multi .ss-vcell.cap img:not(.mark-img) { bottom: calc(2.2rem * var(--user-scale, 1)); height: auto; }
.problem-card .ss-vcap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: calc(1.5rem * var(--user-scale, 1)); font-weight: 800; color: #334155; }
/* ⑦ 고르기 */
/* ⑧ 식 한 줄 — «식 = [칸]». 식을 계산하는 문제의 가운데 줄(문제 글은 머리에) */
.problem-card .ss-eq { font-size: calc(3.6rem * var(--user-scale, 1)); font-weight: 800; color: #334155; white-space: nowrap; letter-spacing: 1px; }
/* ★보기 글은 문제 줄 글자와 같은 무게로(2026-10-03 선생님: «①②③④ 글씨가 작아져») */
/* 머리 줄 — 작은 아이패드(1024)·크롬북에서 단추 글자가 세로로 꺾이지 않게(2026-10-05). 자리가 모자라면 «바로가기»와 기준 시간부터 감춘다 */
.header-right, .header-right * { white-space: nowrap; }
.header-right > * { flex-shrink: 0; }
/* 과목 이름이 길면(«다각형의 둘레와 넓이») 1024 폭에서 오른쪽 끝 단추(전체 화면)가 화면 밖으로 밀렸다 — 이름이 줄어들며 … 로 끊기게 한다(2026-10-05) */
.header-left { min-width: 0; flex: 1 1 auto; }
.header-left > * { flex-shrink: 0; }
.header-left > .brand { flex: 0 1 auto; min-width: 0; }
#header-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-level-badge { flex-shrink: 0; }
@media (max-width: 1100px) { .play-quick-nav { display: none !important; } #timer-badge small, #timer-badge .base-time, #stopwatch-time > span { display: none; } }

/* 두 걸음 문제 — ① 식 세우기 → ② 계산하기(②는 ①을 맞혀야 열린다) */
.problem-card .ss-steps { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(14px * var(--user-scale, 1)) calc(34px * var(--user-scale, 1)); pointer-events: none; max-width: 100%; }
.problem-card .ss-step { display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--user-scale, 1)); pointer-events: none; transition: opacity .3s, filter .3s; }
.problem-card .ss-step-tag { align-self: flex-start; font-size: calc(1.15rem * var(--user-scale, 1)); font-weight: 800; color: var(--ss-brand, #2F6B57); background: #EEF4F0; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.problem-card .ss-step-row { display: flex; align-items: center; justify-content: center; gap: calc(16px * var(--user-scale, 1)); flex-wrap: nowrap; }
.problem-card .ss-step-list { font-size: calc(1.7rem * var(--user-scale, 1)) !important; white-space: nowrap; }
.problem-card .ss-step2.locked { opacity: .22; filter: grayscale(1); }
.problem-card .ss-step2.locked * { pointer-events: none !important; }
.problem-card .ss-choices { display: flex; flex-direction: column; gap: calc(10px * var(--user-scale, 1)); font-size: calc(1.8rem * var(--user-scale, 1)); line-height: 1.35; font-weight: 700; color: #334155; text-align: left; }