/* 수학 학습 플랫폼 demo — the activity page as students see it at math.hsorbit.uk */
.hd-math { --mp-blue: #2563eb; --mp-text: #18181b; --mp-muted: #71717a; --mp-line: #e4e4e7; --mp-field: #d4d4d8; }
.hd-math[data-layout="wide"] .mp-win { left: 40px; top: 36px; width: 640px; height: 640px; }
.hd-math[data-layout="compact"] .mp-win { left: 16px; top: 16px; width: 326px; height: 700px; }
.mp-view { position: relative; flex: 1; overflow: hidden; background: #fafafa; }
.mp-page { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.hd-math[data-layout="compact"] .mp-page { padding: 12px 12px 20px; gap: 10px; }
.mp-crumb { font-size: 11.5px; line-height: 1.3; color: var(--mp-muted); }
.mp-title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--mp-text); margin-top: -8px; }
.mp-card { background: #fff; border: 1px solid var(--mp-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.hd-math[data-layout="compact"] .mp-card { padding: 12px; }
.mp-steps { display: flex; gap: 6px; }
.mp-steps span { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--mp-line); font-size: 10.5px; line-height: 1; display: grid; place-items: center; color: var(--mp-muted); flex: none; }
.mp-steps span:first-child { background: var(--mp-blue); border-color: var(--mp-blue); color: #fff; font-weight: 700; }
.hd-math[data-layout="compact"] .mp-steps span:nth-child(n+7) { display: none; }
.mp-kicker { font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--mp-blue); }
.mp-h { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--mp-text); margin-top: -2px; }
.mp-board { border: 1px solid var(--mp-line); border-radius: 10px; height: 104px; padding: 4px 0; }
.hd-math[data-layout="compact"] .mp-board { height: 84px; }
.mp-board svg { width: 100%; height: 100%; display: block; }
.mp-slider { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.mp-sl-top { display: flex; justify-content: space-between; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--mp-text); }
.mp-sl-top b { font-variant-numeric: tabular-nums; }
.mp-track { position: relative; height: 6px; border-radius: 3px; background: var(--mp-line); margin: 0 7px; }
.mp-fillbar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--mp-blue); }
.mp-thumb { position: absolute; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--mp-blue); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3); }
.mp-thumb[data-active] { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(37,99,235,.18), 0 1px 3px rgba(0,0,0,.3); }
.mp-read { border: 1px solid var(--mp-line); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.65; color: #3f3f46; }
.mp-read b { color: var(--mp-blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-read sub { font-size: .75em; }
.hd-math[data-layout="compact"] .mp-read { font-size: 12px; padding: 8px 10px; }

.mp-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--mp-text); }
.mp-sub svg.ic { width: 14px; height: 14px; color: #52525b; }
.mp-ta { min-height: 64px; border: 1px solid var(--mp-field); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.6; color: var(--mp-text); }
.mp-ta[data-focus], .mp-input[data-focus] { border-color: var(--mp-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.mp-tt i { opacity: 0; }
.mp-caret { display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--mp-blue); animation: hd-caret 1.06s steps(1) .5s infinite; }
@keyframes hd-caret { 50% { opacity: 0; } }
.mp-saved { display: flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.3; color: #2f7a4f; }
.mp-saved svg.ic { width: 13px; height: 13px; }

.mp-msgs { display: grid; border: 1px solid var(--mp-line); border-radius: 8px; padding: 10px; min-height: 96px; }
.mp-empty, .mp-thread { grid-area: 1 / 1; }
.mp-empty { font-size: 12.5px; line-height: 1.6; color: var(--mp-muted); }
.mp-thread { display: flex; flex-direction: column; gap: 8px; }
.mp-msg { max-width: 85%; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; line-height: 1.55; }
.mp-msg.me { align-self: flex-end; background: var(--mp-blue); color: #fff; }
.mp-slot { display: grid; align-self: flex-start; max-width: 85%; }
.mp-slot > .mp-msg { grid-area: 1 / 1; max-width: 100%; }
.mp-msg.ai { background: #f4f4f5; color: #27272a; }
.mp-thinking { justify-self: start; align-self: start; color: #a1a1aa !important; }
.mp-ans i { opacity: 0; }
.mp-compose { display: flex; gap: 8px; }
.mp-input { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--mp-field); border-radius: 6px; padding: 7px 10px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.mp-ph { position: absolute; left: 10px; color: #a1a1aa; }
.mp-q i { opacity: 0; }
.mp-send { flex: none; display: grid; place-items: center; padding: 0 14px; border-radius: 6px; background: var(--mp-blue); color: #fff; font-size: 12.5px; font-weight: 500; }
.mp-send[data-press] { background: #1d4ed8; }
.mp-left { font-size: 11px; line-height: 1.3; color: #a1a1aa; }