/* VE 물량 산출 — 변수 칸 **안**의 모양.

   3단 틀(`shell.css`)은 손대지 않는다. 파일 단추(`.opick`)·절(`.osec`)·
   요약(`.okpi`)·범례(`.olegend`)는 전부 본의 것이다 — 여기 있는 것은 이
   도구만의 몇 줄뿐이다.

   `[hidden]` 을 따로 막는 이유는 `mgt-read.css` 와 같다 — `display` 를 준
   요소에 `hidden` 을 걸면 작가 규칙이 UA 의 `display:none` 을 이긴다. */

/* ── 차례 셋 ─────────────────────────────────────────────────────────
   mgt 읽기의 `.mr-step` 과 같은 상태 셋이다. 여기서는 잠금이 한 가지뿐 —
   변경 전을 넣어야 변경 후를, 둘 다 넣어야 단가를 묻는다. */
.qt-step.is-locked > summary{pointer-events:none;opacity:.45}
.qt-step.is-locked > .osec-body{display:none}
.qt-step.is-current > summary .osec-n{background:var(--brand)}
.qt-step.is-done > summary .osec-n{background:var(--ok)}
.qt-step > .osec-body{gap:10px}

.qt-alert{margin:0 0 14px}

/* ── 늘고 줄고 ───────────────────────────────────────────────────────
   **판정 색을 쓰지 않는다.** 물량이 는 것은 나쁜 것이 아니고 준 것이 좋은
   것도 아니다 — VE 는 값을 견주는 일이지 합·부를 가리는 일이 아니다.
   그래서 `--ok`/`--ng` 대신 먹과 청록으로 방향만 말한다. */
.okpi .r b.up{color:var(--ink)}
.okpi .r b.down{color:var(--brand)}
/* 금액 한 줄은 크게 — 이 도구가 내놓는 답이 이것 하나다. */
.qt-money{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.qt-money b{font-family:var(--mono);font-size:19px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink)}
.qt-money b.down{color:var(--brand)}
.qt-money span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--ink-3);text-transform:uppercase;white-space:nowrap}

/* 한쪽 모델에만 있는 층 — 서로 다른 건물을 견주고 있다는 뜻일 수 있다. */
.okpi .r.only b{color:var(--warn)}

/* ── 잔글씨 ────────────────────────────────────────────────────────── */
.qt-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}
.qt-note:empty{display:none}
.qt-note b{font-weight:500;color:var(--ink-2)}
.qt-note kbd{font-family:var(--mono);font-size:11px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:2px;padding:0 4px}
.qt-note code{font-family:var(--mono);font-size:11px;color:var(--ink-2)}

/* 파일을 끌어 올 때. **어느 단추로 가는지는 화면이 말한다** — 변경 전이
   비었으면 전으로, 아니면 후로 간다(`quantity.js` 의 `drop`). */
body.qt-dragover .opick .btn{background:var(--brand-d);border-color:var(--brand-d);
  outline:2px dashed var(--brand);outline-offset:3px}