/* =====================================================================
   수학 문제 풀기 (M049). Loaded only on the math solve pages, through asset_url(). Site tokens (site.css :root) are read,
   never edited; every class here is prefixed .ms. The question markup is the shared partial _math_q.html.j2 (the PDF's
   own markup), so its classes (.qq .head .no .stem .lv .body .fig .data .opts .opt .resp .blank .frac .mixed) are styled
   here for the screen, scoped under .ms. Corners 0-4px, no gradients; the grading marks are red AND words (never colour alone).
   ===================================================================== */
.ms-head{margin:14px 0 8px}
.ms-h1{margin:0;font-size:20px;line-height:1.35;font-weight:800;color:var(--navy-deep)}
.ms-noscript{margin:0 0 12px;padding:10px 12px;background:var(--hl-pale);border:1px solid var(--line-2);font-size:15px}
.ms-privacy{margin:14px 0 4px;font-size:13px;color:var(--muted)}

.ms{--ms-ink:var(--ink);--ms-line:var(--line-2);--ms-red:var(--red);--ms-ok:#1E7A4C;--ms-bad:#B42318;
  --ms-serif:"Noto Serif","Times New Roman",Georgia,serif;color:var(--ink);font-size:17px;line-height:1.7;margin-bottom:8px}
.ms *{box-sizing:border-box}
.ms button{font:inherit;cursor:pointer;color:inherit}
.ms button:focus-visible,.ms input:focus-visible,.ms .opt:focus-visible,.ms-pad-svg:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ---------- the question markup on the screen ---------- */
.ms i{font-family:var(--ms-serif);font-style:italic}
.ms .nw{white-space:nowrap}
.ms .qq{margin:0}
.ms .qq .head{display:flex;gap:10px;align-items:flex-start}
.ms .qq .no{flex:none;min-width:34px;font-size:26px;font-weight:800;line-height:1.15;color:var(--navy-deep)}
.ms .qq .stem{font-weight:700;font-size:17px;line-height:1.75;min-width:0}
.ms .lv{display:inline-block;font-size:12px;font-weight:800;line-height:1.5;padding:0 6px;margin-right:6px;border:1px solid;border-radius:2px;vertical-align:2px}
.ms .lv.l1{background:#fff;color:var(--navy);border-color:var(--navy-pale-bd)}
.ms .lv.l2{background:var(--navy-pale);color:var(--navy);border-color:var(--navy-pale-bd)}
.ms .lv.l3{background:var(--navy);color:#fff;border-color:var(--navy)}
.ms .pts{font-weight:700;font-size:14px;color:var(--ink-2);white-space:nowrap}
.ms .body{background:var(--bg-2);border:1px solid var(--line);border-radius:2px;padding:8px 12px;margin:8px 0 8px 44px}
.ms .opts{margin:8px 0 0 44px;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.ms .opts.one{grid-template-columns:1fr}
.ms .opts.three{grid-template-columns:1fr 1fr 1fr}
.ms .opts .opt{display:flex;align-items:baseline;gap:4px;min-width:0}
.ms .opts .cn{flex:none;width:1.5em}
.ms .opts .ot{flex:1;min-width:0}
.ms .resp{margin:8px 0 0 44px}
.ms .blank{display:inline-block;min-width:62px;border-bottom:1px solid var(--ink);height:1em}
.ms .blank.w{min-width:110px}.ms .blank.l{min-width:150px}.ms .blank.xl{min-width:200px}.ms .blank.full{min-width:100%}
.ms .lines{margin:6px 0 0 44px}
.ms .line{border-bottom:1.2px dotted var(--line-3);height:28px}
.ms table.data{border-collapse:collapse;margin:8px 0 8px 44px;max-width:calc(100% - 44px);font-size:15px;background:#fff}
.ms table.data th,.ms table.data td{border:1px solid var(--line-2);padding:4px 10px;text-align:center}
.ms table.data th{background:var(--navy-pale)}
/* figures: about 1.5x their print size (the viewBox width in px), never wider than the column */
.ms .fig{margin:8px 0 6px 44px;color:var(--ink);line-height:0}
.ms .fig svg{display:block;width:min(100%,calc(var(--fig-w,160px)*1.5));max-width:100%;height:auto;overflow:visible;font-family:var(--ms-serif)}
.ms .frac{display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:middle;text-align:center;font-size:.9em;line-height:1.15;margin:-.3em .14em -.2em;white-space:nowrap}
.ms .frac>.fn{padding:0 .18em;border-bottom:.08em solid currentColor}
.ms .frac>.fd{padding:0 .18em}
.ms .fneg,.ms .mixed{white-space:nowrap}
.ms .fneg>.sign{margin-right:.05em}

/* ---------- without JavaScript: a plain list ---------- */
.ms-item{padding:16px 0;border-bottom:1px solid var(--line)}
.ms-meta{display:flex;gap:8px;align-items:center;margin:0 0 6px;font-size:13px;color:var(--ink-2)}
.ms-chip{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--navy);border-radius:2px;padding:1px 8px}
.ms-pointer{display:none}
.ms-pointer-h{font-size:13px;font-weight:700;color:var(--navy);margin:0 0 4px}

/* ---------- with JavaScript (class ms-js on #ms) ---------- */
.ms-js .ms-item{display:none;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:4px}
.ms-js .ms-item.is-cur{display:block}
.ms-js .ms-pointer{display:block;margin:0 0 12px;padding:8px 12px 10px;background:var(--tint);border:1px solid var(--navy-pale-bd);border-radius:2px}
.ms-js .ms-pointer .fig,.ms-js .ms-pointer table.data{margin-left:0}
.ms-js .ms-pointer table.data{max-width:100%}
.ms-pointer-text{margin:2px 0;font-size:16px}

.ms-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 0 10px}
.ms-bar-title{font-size:15px;font-weight:700;color:var(--ink-2);min-width:0;flex:1 1 220px}
.ms-prog{font-size:18px;font-weight:800;color:var(--navy-deep);white-space:nowrap}
.ms-score{font-size:15px;color:var(--ink-2);white-space:nowrap}
.ms-btn{min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--line-3);background:#fff;border-radius:4px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ms-btn[aria-pressed="true"],.ms-btn.is-on{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.ms-btn.primary{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.ms-btn.ghost{border-color:var(--navy);color:var(--navy)}
.ms-btn[disabled]{opacity:.45;cursor:default}
.ms-retry{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 10px;padding:8px 12px;background:var(--hl-pale);border:1px solid var(--line-2);border-radius:2px;font-size:15px}
.ms-notice{margin:0 0 10px;padding:8px 12px;background:var(--hl-pale);border:1px solid var(--line-2);border-radius:2px;font-size:14px}

.ms-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.ms-left{min-width:0;display:flex;flex-direction:column;gap:12px}
.ms-ctl{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:10px}
.ms-ctl[hidden]{display:none}
.ms-js .ms-item.is-mc .opt{cursor:pointer;border:1px solid transparent;border-radius:2px;padding:6px 6px;margin:-6px}
.ms-js .ms-item.is-mc .opt:hover{background:var(--navy-pale)}
.ms-js .ms-item .opt.is-pick{background:var(--navy-pale);border-color:var(--navy)}
.ms-js .ms-item .opt.is-right{border:2px solid var(--ms-ok);background:#EAF6EF}
.ms-js .ms-item .opt.is-wrong{border:2px solid var(--ms-bad);background:#FDECEA}
.ms-js .ms-item.is-locked .opt{cursor:default}
.ms-js .ms-item.is-short .resp,.ms-js .ms-item.is-short .lines,.ms-js .ms-item.is-written .lines,.ms-js .ms-item.is-written .resp{display:none}
.ms-mark{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:var(--ms-red)}
.ms-mark .sym{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:3px solid var(--ms-red);border-radius:50%;font-size:20px;line-height:1}
.ms-mark.bad .sym{border-radius:0;border:0;font-size:34px;font-weight:400}
.ms-sol{background:var(--bg-2);border:1px solid var(--line);border-radius:2px;padding:10px 14px;font-size:16px}
.ms-sol .ms-ok{font-weight:800;color:var(--ms-red);margin-right:6px}
.ms-sol-h{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:2px}
.ms-inputs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ms-inputs input{min-height:48px;min-width:0;flex:1 1 180px;max-width:360px;padding:0 12px;border:1px solid var(--line-3);border-radius:2px;font:inherit;font-size:18px;background:#fff;color:var(--ink)}
.ms-keys{display:flex;flex-wrap:wrap;gap:6px}
.ms-keys button{min-height:44px;min-width:44px;border:1px solid var(--line-3);background:#fff;border-radius:2px;font-size:18px;font-weight:700}
.ms-selfrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ms-selfrow button{min-height:48px;border:2px solid var(--line-2);background:#fff;border-radius:4px;font-weight:700;font-size:16px}
.ms-selfrow .ok{color:var(--ms-ok)}.ms-selfrow .bad{color:var(--ms-bad)}
.ms-selfrow button[aria-pressed="true"]{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.ms-pager{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ms-pager .ms-btn{min-height:48px}
.ms-small{font-size:13px;color:var(--ink-2)}
.ms-note{font-size:15px;font-weight:700;color:var(--ms-bad)}
.ms-reset{align-self:flex-start;min-height:44px;border:0;background:none;color:var(--navy);font-weight:700;text-decoration:underline;padding:0 4px}

/* ---------- navigator (dialog) ---------- */
.ms-nav{position:fixed;z-index:60;inset:0;background:rgba(15,30,70,.35);display:flex;justify-content:center;align-items:flex-start;padding:70px 12px 12px}
.ms-nav[hidden],.ms-confirm[hidden]{display:none}
.ms-nav-box{background:#fff;border:1px solid var(--line-3);border-radius:4px;max-width:760px;width:100%;max-height:calc(100vh - 90px);overflow:auto;padding:14px 16px 16px}
.ms-nav-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ms-nav-title{font-size:16px;font-weight:800;color:var(--navy-deep)}
.ms-nav-unit{margin:12px 0 6px;font-size:14px;font-weight:700;color:var(--navy)}
.ms-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.ms-nav-grid button{min-height:48px;border:1px solid var(--line-3);background:#fff;border-radius:2px;font-weight:700;font-size:15px;line-height:1.1;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ms-nav-grid button small{font-size:12px;font-weight:700;min-height:14px}
.ms-nav-grid button[aria-current="true"]{background:var(--hl);border-color:var(--navy-deep);border-width:2px}
.ms-nav-grid button.s-ok small{color:var(--ms-red)}
.ms-nav-grid button.s-bad small{color:var(--ms-red)}
.ms-nav-grid button.s-pending{border-style:dashed}
.ms-nav-grid button.s-none{color:var(--ink-2)}
.ms-nav-legend{margin-top:12px;font-size:13px;color:var(--ink-2)}

/* ---------- result view and confirm ---------- */
.ms-result{background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px 22px}
.ms-result h2{margin:0 0 6px;font-size:20px;color:var(--navy-deep)}
.ms-total{font-size:28px;font-weight:800;color:var(--navy-deep);margin:4px 0 12px}
.ms-units{border-collapse:collapse;width:100%;max-width:560px;margin:0 0 16px;font-size:16px}
.ms-units th,.ms-units td{border:1px solid var(--line-2);padding:6px 10px;text-align:left}
.ms-units th{background:var(--navy-pale)}
.ms-units td.n{text-align:right;white-space:nowrap}
.ms-res-actions{display:flex;flex-wrap:wrap;gap:8px}
.ms-confirm{position:fixed;z-index:70;inset:0;background:rgba(15,30,70,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.ms-confirm-box{background:#fff;border:1px solid var(--line-3);border-radius:4px;padding:18px;max-width:420px;width:100%}
.ms-confirm-box p{margin:0 0 12px;font-size:16px}
.ms-confirm-box .row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- the 연습장 ---------- */
.ms-pad{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--navy-pale-bd);border-radius:4px;overflow:hidden}
.ms-pad[hidden]{display:none}
.ms-pad-title{padding:8px 12px 0;font-size:15px;font-weight:800;color:var(--navy-deep)}
.ms-pad-title span{font-weight:500;font-size:13px;color:var(--ink-2)}
.ms-bar-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.ms-bar-tools .sep{width:1px;height:28px;background:var(--line-2)}
.ms-bar-tools .grow{flex:1 1 auto}
.ms-tool{min-height:44px;min-width:44px;padding:0 10px;border:1px solid var(--line-2);background:#fff;border-radius:4px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.ms-tool[aria-pressed="true"]{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.ms-tool.color{padding:0;justify-content:center;border:2px solid transparent}
.ms-tool.color[aria-pressed="true"]{background:#fff;border-color:var(--navy-deep);color:inherit}
.ms-tool.color i{display:block;width:20px;height:20px;border-radius:50%}
.ms-tool.armed{background:var(--hl);border-color:var(--navy-deep)}
.ms-pad-wrap{position:relative;background:#E9EDF4;line-height:0}
.ms-pad-svg{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}
.ms-pad-svg.is-eraser{cursor:cell}

/* ---------- wide: the question left, that question's 연습장 right (C_tablet) ---------- */
@media (min-width:900px){
  .ms-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
  .ms-pad{position:sticky;top:8px;height:calc(100vh - 16px);min-height:480px}
  .ms-pad-wrap{flex:1 1 auto;min-height:0}
  .ms-padtoggle{display:none}
}
/* ---------- narrow: the pad opens under the question (A_portrait, A_phone) ---------- */
@media (max-width:899px){
  .ms-pad-wrap{aspect-ratio:800/960}
}
@media (max-width:599px){
  .ms{font-size:16px}
  .ms-js .ms-item{padding:14px 12px}
  .ms .qq .no{font-size:22px;min-width:30px}
  .ms .qq .stem{font-size:16px}
  .ms .body,.ms .opts,.ms .resp,.ms .lines,.ms .fig,.ms table.data{margin-left:0}
  .ms table.data{max-width:100%}
  .ms .opts.three{grid-template-columns:1fr 1fr}
  .ms .opts.two{grid-template-columns:1fr 1fr}
  .ms .opts.has-svg{grid-template-columns:1fr 1fr}        /* graphs as choices: two columns, never five in a row */
  .ms-bar-tools .ms-tool{padding:0 8px;font-size:13px}
  .ms-nav{align-items:flex-end;padding:0}
  .ms-nav-box{max-width:none;border-radius:4px 4px 0 0;max-height:75vh}
  .ms-result{padding:16px 14px}
}
@media (max-width:899px){.ms .opts.has-svg{grid-template-columns:1fr 1fr}}
.ms [hidden]{display:none !important}