.math-grid-drawing{color:#24344b;width:100%;max-width:560px;margin-inline:auto;text-align:left}
.math-grid-drawing>p{font:inherit;line-height:1.5;margin:0 0 10px}
.math-grid-drawing-stage{box-sizing:border-box;position:relative;width:100%;aspect-ratio:1;background:#fff;border:1px solid #cbd5e1;border-radius:12px;overflow:hidden}
.math-grid-drawing-stage svg{display:block;width:100%;height:100%;overflow:hidden}
.drawing-grid-line{stroke:#dce4ed;stroke-width:1}
.drawing-given{stroke:#334155;stroke-width:4;stroke-linecap:round}
.drawing-axis{stroke:#be123c;stroke-width:3;stroke-dasharray:8 5}
.drawing-center{fill:#be123c;stroke:#fff;stroke-width:2}
.drawing-label{font:600 22px Pretendard,sans-serif;fill:#334155}
.drawing-student{stroke:#2563eb;stroke-width:4;stroke-linecap:round}
.drawing-student-point{fill:#2563eb;stroke:#fff;stroke-width:2}
.math-grid-drawing-point{position:absolute;transform:translate(-50%,-50%);padding:0;min-width:0!important;min-height:0!important;border:0;background:transparent;border-radius:50%;touch-action:manipulation;cursor:crosshair}
.math-grid-drawing-point::after{content:'';position:absolute;width:5px;height:5px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#94a3b8}
.math-grid-drawing-point:is(:hover,:focus-visible,.is-start)::after{width:12px;height:12px;background:#2563eb;box-shadow:0 0 0 5px #2563eb25}
.math-grid-drawing-point:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.math-grid-drawing-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.math-grid-drawing-tools button{font:inherit;font-size:14px;padding:10px 12px;min-height:44px;background:#f1f5f9;color:#24344b;border:1px solid #cbd5e1;border-radius:8px;cursor:pointer}
.math-grid-drawing-tools button[aria-pressed=true]{background:#dbeafe;border-color:#2563eb}
.math-grid-drawing-tools button:disabled{opacity:.5;cursor:default}
.math-grid-drawing-status{display:block;min-height:1.5em;margin-top:8px;font-size:14px;color:#475569}
@media(max-width:480px){.math-grid-drawing-tools{gap:5px}.math-grid-drawing-tools button{flex:1;padding:9px 6px}.math-grid-drawing>p{font-size:14px}}
.student-math-response-surface:has(.student-math-response-drawing){padding:0;border:0;box-shadow:none;gap:0}
.student-math-response-drawing .math-grid-drawing-stage{width:min(100%,max(300px,calc(100dvh - 560px)));max-width:560px;margin-inline:auto}

.drawing-guide{stroke:#64748b;stroke-width:2;stroke-dasharray:5 5}
.drawing-vertex{fill:#334155;stroke:#fff;stroke-width:1.5}
.drawing-dimension{fill:none;stroke:#64748b;stroke-width:1.2}
.drawing-measure{font-size:19px;paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round;dominant-baseline:middle}

.drawing-angle{fill:none;stroke:#7c3aed;stroke-width:2}

.student-math-question-workspace:has(> #studentMathQuestionVisual > .math-grid-drawing){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
#studentMathQuestionVisual:has(> .math-grid-drawing){min-height:0;height:100%;display:grid;place-items:center;container-type:size}
#studentMathQuestionVisual>.math-grid-drawing{height:auto;width:min(560px,100cqw,100cqh);max-width:100%;aspect-ratio:1}
#studentMathQuestionVisual>.math-grid-drawing .math-grid-drawing-stage{width:100%;height:100%}
.math-result-sheet-visual:has(.math-grid-drawing)>strong,.math-result-sheet-visual:has(.math-grid-drawing)>div>strong{display:block;color:#24344b;padding:10px 12px;font-size:14px}
