/* 마이다스 mgt 읽기 — 변수 칸 **안**의 모양.

   3단 틀(`shell.css`)은 손대지 않는다. 여기 있는 것은 전부 왼쪽 변수 칸
   안에서 끝난다 — 파일 단추 · 모델 요약 · 층 고르기 · 범례. 평면과 3D 는
   캔버스라 CSS 가 없다.

   ## `[hidden]` 을 따로 막는 이유

   `display:flex` 를 준 요소에 `hidden` 을 걸면 **작가 규칙이 UA 의
   `display:none` 을 이긴다** — 이 저장소에서 네 번 겪었다. 그래서 display
   를 준 요소마다 `[hidden]{display:none}` 을 옆에 붙인다. */

/* ── 파일 단추 ───────────────────────────────────────────────────────
   모양은 본(`shell.css` 의 `.opick`)이 갖는다 — 2026-09-12 에 도구 다섯이
   같은 단추를 쓰게 되어 올렸다. 여기 남는 것은 **이 도구만의 일**,
   끌어 놓을 때의 강조뿐이다(무엇을 받는지가 도구마다 다르다). */
body.mr-dragover .opick .btn{background:var(--brand-d);border-color:var(--brand-d);
  outline:2px dashed var(--brand);outline-offset:3px}

/* ── 차례 넷 (2026-09-11) ────────────────────────────────────────────
   절(`.osec`)에 상태 셋을 얹는다. 상태는 JS(`setStep`)가 원천이고 여기는
   그것을 비춘다.

       is-locked   아직 못 하는 단계 — 흐리고 열리지 않는다
       is-current  지금 할 것 — 번호가 청록
       is-done     끝난 것 — 번호가 판정 초록, 접어도 머리 오른쪽에 요약

   잠긴 것을 `disabled` 로 두지 않는다(`<details>` 에 그 속성이 없다) —
   손을 막고(`pointer-events`) 몸을 숨긴다. */
.mr-step.is-locked > summary{pointer-events:none;opacity:.45}
.mr-step.is-locked > .osec-body{display:none}
.mr-step.is-current > summary .osec-n{background:var(--brand)}
.mr-step.is-done > summary .osec-n{background:var(--ok)}
.mr-step > .osec-body{gap:10px}
/* 단계 안의 알림은 절 여백에 맞춘다 — 절 밖에 있을 때의 아래 여백은 뺀다. */
.mr-step .mr-alert{margin:0}

/* 2단계 — 왜 찍는가 한 줄, 어떻게 찍는가 몇 줄, 조합 목록. */
.mr-why{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2);word-break:keep-all}
.mr-howto{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--ink-2);
  word-break:keep-all}
.mr-howto li+li{margin-top:3px}
.mr-howto b{font-weight:500;color:var(--ink)}
/* 조합 이름은 복사해 쓰는 것이라 모노로, 줄바꿈은 이름 사이에서만. */
.mr-combos{padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--bg-2)}
.mr-combos code{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink);
  word-break:break-word}
.mr-combos code:empty::before{content:'—';color:var(--ink-3)}

/* 3단계 — 진행. 브라우저 `<progress>` 를 그대로 쓴다(CSP 아래서 그냥 돈다). */
.mr-prog{display:flex;flex-direction:column;gap:6px}
.mr-prog[hidden]{display:none}
.mr-prog progress{width:100%;height:6px;accent-color:var(--brand)}
.mr-prog-t{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-prog .obtn{width:auto;align-self:flex-start;padding:4px 10px;font-size:12px}

/* ── 막힌 것 ─────────────────────────────────────────────────────────
   읽다 실패한 이유를 **단추 바로 아래**에 띄운다. 캔버스에 적으면 빈 칸과
   구분이 안 된다 — 빈 것과 고장을 갈라 말하는 것이 3단 틀의 규칙이다. */
.mr-alert{margin:0 0 14px;padding:9px 11px;border:1px solid var(--ng);
  border-radius:3px;font-size:12.5px;line-height:1.7;color:var(--ng);
  word-break:keep-all}
.mr-alert[hidden]{display:none}
.mr-alert.warn{border-color:var(--warn);color:var(--warn)}

/* 요약(`.mr-sum`)은 2026-09-11 에 걷었다 — 본의 `.okpi` 와 한 벌이었다.
   이제 "모델 정보" 접는 절 안의 `.okpi` 다. */

/* ── 덧그림의 가정 목록 (2026-09-11) ─────────────────────────────────
   파이썬이 JSON 에 실어 준 가정을 **그대로 다 적는다.** 자중 밀도·분배
   규칙·부호 규약 — 숨기면 근거 없는 값이 된다. */
.ov-assume{margin:0;padding-left:16px;font-size:11.5px;line-height:1.65;
  color:var(--ink-3);word-break:keep-all}
.ov-assume li+li{margin-top:3px}

/* ── 범례 ────────────────────────────────────────────────────────────
   모양과 색은 본(`shell.css` 의 `.olegend`·`--m-*`)이 갖는다. 2026-09-11
   까지 여기 한 벌이 따로 있어 부재 색이 이 도구 안에만 살았다. 여기는
   이 도구의 자리 잡기만 둔다. */
#mgtLegend{margin-top:14px}

/* ── 잔글씨 ──────────────────────────────────────────────────────────
   "브라우저 안에서만 읽는다" 는 다른 도구가 다 적어 두는 한 줄이다. */
.mr-note{margin:16px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3);
  border-top:1px solid var(--line-2);padding-top:12px;word-break:keep-all}
.mr-note b{font-weight:500;color:var(--ink-2)}
.mr-note kbd{font-family:var(--mono);font-size:11px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:2px;padding:0 4px}

/* 캔버스의 손 모양(`grab`·`grabbing`)은 본(`shell.css`)으로 올렸다 —
   둘째 도구(모델 보기)가 같은 캔버스를 끈다(2026-09-11). */