/* 부력 검토 — 변수 칸 **안**의 모양.

   3단 틀(`shell.css`)은 손대지 않는다. 절·입력칸·요약·배지·범례는 전부
   본의 것이고, 여기 있는 것은 모드 단추 · 계산서 · 물빛 세 가지다.

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

/* ── 입력 방식 두 단추 ───────────────────────────────────────────────
   **절 안이 아니라 절보다 위**다. 모드를 바꾸면 입력도 결과도 다 바뀌므로
   한쪽 절에 딸린 것처럼 보이면 안 된다. 계산기 판의 `.mtabs` 와 같은 자리
   (창 맨 위 왼쪽)를 3단 틀의 어휘로 옮긴 것이다. */
.bo-mode{display:flex;gap:0;margin:0 0 4px;border:1px solid var(--line);border-radius:3px;
  overflow:hidden}
.bo-mode button{flex:1;padding:6px 8px;cursor:pointer;border:0;background:var(--bg);
  font-family:inherit;font-size:12.5px;color:var(--ink-2);
  transition:background .15s ease,color .15s ease}
.bo-mode button+button{border-left:1px solid var(--line)}
.bo-mode button:hover{color:var(--ink)}
.bo-mode button[aria-selected=true]{background:var(--ink);color:#fff}
.bo-mode button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.bo-alert{margin:0}

/* ── 층별 슬래브 두께 ────────────────────────────────────────────────
   `.ofield` 를 그대로 쓰되 라벨 오른쪽에 그 층의 바닥 면적을 잔글씨로 붙인다
   — 두께를 넣는 손이 "얼마짜리 바닥인가" 를 같이 봐야 한다. */
.ofield .ar{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* ── 계산서 ──────────────────────────────────────────────────────────
   값 하나가 자기 이력을 갖는다(OPTRA.md 2절). 이름·값 한 줄 아래 식과 대입을
   모노 두 줄로 — 도구 2(모델 보기)의 `.ov-eq` 와 같은 결이다. */
.bo-trace{font-size:12.5px}
.bo-step+.bo-step{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.bo-step > .h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:4px}
.bo-step > .h b{font-weight:500;color:var(--ink-2)}
.bo-step > .h em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--ink)}
.bo-step pre{margin:0;padding-left:10px;border-left:2px solid var(--line-2);
  font-family:var(--mono);font-size:10.5px;line-height:1.65;color:var(--ink-3);
  white-space:pre-wrap;word-break:break-all}

/* ── 물빛 ────────────────────────────────────────────────────────────
   **캔버스가 쓰는 색을 여기 토큰으로 둔다.** 범례와 그림이 같은 값을 읽어야
   갈라지지 않는다(`shell.css` 범례 주석과 같은 규칙). 물은 부재 색 넷·하중
   주황 어느 것도 아닌 자리가 필요해서 **옅은 청**을 새로 둔다 — 면으로만
   칠하고 선으로는 안 쓴다. 아직 안 친 부분은 색이 아니라 **투명도**로
   가른다(친 것과 같은 회색을 옅게) — 색을 하나 더 들이면 물과 싸운다. */
:root{
  --bo-water:#8fb6c9;
  --bo-cast:var(--ink-3);
}
.olegend i.bo-w{background:var(--bo-water);opacity:.55}
.olegend i.bo-c{background:var(--bo-cast)}
.olegend i.bo-g{background:var(--bo-cast);opacity:.22}

/* ── 잔글씨 ────────────────────────────────────────────────────────── */
.bo-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}
.bo-note:empty{display:none}
.bo-note b{font-weight:500;color:var(--ink-2)}
.bo-note code{font-family:var(--mono);font-size:11px;color:var(--ink-2)}

body.bo-dragover .opick .btn{background:var(--brand-d);border-color:var(--brand-d);
  outline:2px dashed var(--brand);outline-offset:3px}