/* 지하외벽 배근 — 변수 칸 **안**의 모양과 이 도구의 색.

   3단 틀(`shell.css`)은 손대지 않는다. `[hidden]` 을 따로 막는 이유는
   `mgt-read.css` 와 같다 — `display` 를 준 요소에 `hidden` 을 걸면 작가 규칙이
   UA 의 `display:none` 을 이긴다.

   ## 색 (2026-09-12)

   **종류 색**은 벽 띠·반투명 면을 칠한다. 부재 색(`--m-*`)은 부재 **종류**
   (보·기둥·벽)를 가르는 말이라, 벽끼리를 가르는 데 빌리면 "벽이 보로" 읽힌다.
   그래서 따로 여섯을 둔다 — 채도를 본의 차분한 벌(`--m-*` 시험 중인 벌)과
   맞췄다. 일곱째부터는 처음으로 돈다.

   **철근 색**은 면 위에 가는 선으로 겹친다. 수직 남색 · 수평 밤색 — 한색↔난색
   이라 겹쳐도 방향이 갈린다. **이어지는 수평근은 `--ok`** 다: 배수로 맞아떨어진
   것은 이 도구의 "잘 됨" 이라 판정 초록을 쓴다. 이음 표시(평면의 점)도 같은
   셋(`--ok`·`--warn`·`--ng`)을 쓰되 **모양으로도 가른다**(찬 원 · 반 원 · ×) —
   적록 색각이상에서 초록과 주황이 붙기 때문이다(`shell.css` 부재 색 주석).

   ## 쟀다 (2026-09-13) — OKLab ΔE, 정상 시각 / 적록 색각이상 흉내 둘(Machado 2009)

   처음 벌(눈으로 고른 것)은 **적록 색각이상에서 두 짝이 ΔE 1.4** 였다 — 주황↔올리브,
   청록회색↔자주. 사실상 같은 색이다. 그래서 색을 **찾았다**(`scratchpad/pick_colors.py`).

   **색상만으로는 세 계열이 상한이다.** 한 밝기에서 여섯을 고르면 가장 나쁜 짝이
   3.1 을 못 넘는다(전수로 확인). 적록 색각이상은 색상을 뭉개도 **밝기 차는 보존**
   하므로, 밝기를 둘째 축으로 삼아 **황토 · 파랑 · 청록 세 계열 × 밝기 두 단계**로
   갔다. 그 결과 **가장 나쁜 짝 8.7**(1.4 → 8.7).

   그리고 벽 띠에는 **종류 이름이 같이 찍힌다**(`RW1`) — 색은 거들 뿐이고 이름이
   정체를 든다. 그래서 여섯이 색만으로 완전히 갈릴 필요는 없다.

   ## 잰 값 (정상 / 적록·D / 적록·P)

       벽 종류 여섯   가장 가까운 짝  t1 파랑진 ↔ t3 청록진   9.3 / 8.7 / 8.9
       철근 넷        가장 가까운 짝  수평 밤색 ↔ 이어짐      17.6 / 5.2 / 10.6
       철근 ↔ 종류    가장 가까운 짝  이어짐 ↔ t5 황토진      13.2 / 6.7 / 3.7
       이음 표시 셋   가장 가까운 짝  배수 ↔ 어긋남           25.0 / 5.5 / 11.3

   ⚠ **약한 짝 셋은 다 `--ok`(이어짐·배수) 초록이 낀다.** 그것은 판정 토큰
   (`DESIGN.md`)이라 여기서 못 바꾼다 — 대신 **모양으로 가른다**:

       이어지는 수평근   같은 자리의 다른 가닥보다 **굵게**(+0.6px) 그리고
                        이음 쪽 끝에만 칠한다
       이음 표시         찬 원(배수) · 반 원(공배수) · ×(어긋남)
       전단보강근        벽 두께를 **가로지르는** 짧은 선 — 방향이 다르다

   **값을 바꾸면 `scratchpad/dE.py` 로 모든 짝을 다시 잰다. 눈으로 고르지 않는다.** */
:root{
  /* 황토 · 파랑 · 청록 × 진한/옅은. 차례는 **가까운 짝이 멀어지도록** — RW1·RW2 가
     이웃 벽이 되는 일이 가장 많다. 흰 바탕 대비 3.1~4.9:1. */
  --bw-t1:#5272a6;
  --bw-t2:#ac894c;
  --bw-t3:#507b73;
  --bw-t4:#6f90c6;
  --bw-t5:#8d6b2d;
  --bw-t6:#6d9a90;
  --bw-v:#2f4a78;
  --bw-h:#8a4a24;
  --bw-link:var(--ok);
  /* 전단보강근 — 자두(2026-09-13). 수직 남색과 적록 색각이상에서 4.1 로 붙던 보라를
     옮겼다: 남색·밤색·이어짐(--ok)·선택(--brand) 넷을 고정하고 찾은 가장 먼 색이
     이것이다(가장 나쁜 짝 5.2 · 흰 바탕 대비 9.6:1). **5.2 는 여전히 낮다** —
     그래서 전단은 색만으로 가르지 않는다: 벽 두께를 가로지르는 **짧은 선**이라
     방향과 자리가 다르고, 안 맞는 것은 판정 빨강으로 따로 운다. */
  --bw-tie:#643555;
}

/* ── 파일 단추 — mgt 읽기의 `.mr-pick` 과 같은 결 ───────────────────── */
.bw-pick{display:flex;flex-direction:column;gap:8px}
.bw-pick .btn{text-align:center;padding:8px 14px;font-size:13.5px}
.bw-pick .btn:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.bw-name{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.bw-dragover .bw-pick .btn{background:var(--brand-d);border-color:var(--brand-d);
  outline:2px dashed var(--brand);outline-offset:3px}
/* .dxf · .mgt 는 **같은 위계**라 둘 다 채운 단추다(2026-09-14, 정현님). 옛 판은 MGT 를
   테두리 단추로 두어 버금 길처럼 보였다 — 저장한 작업은 이제 위쪽 띠에 있어 1절에 없다. */

/* ── 레이어 고르기 ────────────────────────────────────────────────── */
.bw-layers{border:1px solid var(--line);border-radius:3px;padding:8px 10px;
  max-height:180px;overflow:auto}
.bw-layers[hidden]{display:none}
.bw-lh{margin:0 0 6px;font-size:11px;color:var(--ink-3)}
/* 레이어 한 줄 = 고르기 + **그 레이어의 층**. 층 칸이 비면 층을 안 가른다. */
.bw-lrow{display:grid;grid-template-columns:1fr 56px;gap:6px;align-items:center}
.bw-lstory{font-family:var(--mono);font-size:11px;padding:3px 5px;min-width:0;
  border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink)}
.bw-lstory:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.bw-layer{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:12.5px;cursor:pointer}
.bw-layer input{margin:0;accent-color:var(--brand)}
.bw-layer span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-layer em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* ── 층 ───────────────────────────────────────────────────────────── */
.bw-stories{display:flex;flex-direction:column;gap:6px}
.bw-story{display:grid;grid-template-columns:1fr 92px 18px 22px;align-items:center;gap:6px}
.bw-story input{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);
  border-radius:3px;padding:4px 6px;background:var(--bg);color:var(--ink);min-width:0;width:100%}
.bw-story input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.bw-story .u{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.bw-x{width:22px;height:22px;padding:0;cursor:pointer;border:1px solid var(--line);
  border-radius:2px;background:var(--bg);color:var(--ink-3);font-size:13px;line-height:1}
.bw-x:hover{border-color:var(--ng);color:var(--ng)}
.bw-x:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.bw-x:disabled{opacity:.35;cursor:default}
.bw-x:disabled:hover{border-color:var(--line);color:var(--ink-3)}

/* ── 벽 종류 카드 ───────────────────────────────────────────────────
   종류 하나가 한 덩어리. 머리에 색 · 이름 · 지우기, 아래에 칸 두 줄씩. */
.bw-type{border:1px solid var(--line);border-left:4px solid var(--ink-3);border-radius:3px;
  padding:9px 10px 10px;margin-bottom:10px}
.bw-type.c1{border-left-color:var(--bw-t1)} .bw-type.c2{border-left-color:var(--bw-t2)}
.bw-type.c3{border-left-color:var(--bw-t3)} .bw-type.c4{border-left-color:var(--bw-t4)}
.bw-type.c5{border-left-color:var(--bw-t5)} .bw-type.c6{border-left-color:var(--bw-t6)}
.bw-type.bad{border-color:var(--ng)}
.bw-th{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bw-th input{flex:1;min-width:0;font-weight:600;font-size:13.5px;border:1px solid transparent;
  border-radius:3px;padding:2px 5px;background:transparent;color:var(--ink)}
.bw-th input:hover{border-color:var(--line)}
.bw-th input:focus{outline:2px solid var(--brand);outline-offset:-1px;background:var(--bg)}
.bw-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.bw-f{display:flex;flex-direction:column;gap:2px;min-width:0}
.bw-f.wide{grid-column:1 / -1}
.bw-f > span{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.bw-f input{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:3px;
  padding:4px 6px;background:var(--bg);color:var(--ink);min-width:0;width:100%}
.bw-f input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.bw-f.bad input{border-color:var(--ng);color:var(--ng)}
.bw-f em{font-style:normal;font-size:10.5px;line-height:1.4;color:var(--ng);word-break:keep-all}
.bw-f em:empty{display:none}
.bw-sub{grid-column:1 / -1;margin:4px 0 0;font-size:10.5px;letter-spacing:.08em;color:var(--ink-3)}
.bw-chk{grid-column:1 / -1;display:flex;align-items:center;gap:7px;margin-top:4px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer}
.bw-chk input{margin:0;accent-color:var(--brand)}
.bw-shear{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.bw-shear[hidden]{display:none}
.bw-note{grid-column:1 / -1;margin:0;font-size:11.5px;line-height:1.6;color:var(--ink-2);word-break:keep-all}
.bw-note.ok{color:var(--ok)}
.bw-note.warn{color:var(--warn)}
.bw-note:empty{display:none}

/* ── 일람표 — 층마다 값이 다를 때 (2026-09-13) ───────────────────────
   이름은 수직으로 하나이고 값만 층마다 갈린다. 층 행은 파선으로 갈라 한
   종류 안의 묶음으로 읽히게 한다. */
.bw-per{margin:0 0 8px}
.bw-story-row{border-top:1px dashed var(--line);padding-top:7px;margin-top:7px}
.bw-story-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2)}
.bw-copy{padding:1px 6px;cursor:pointer;border:1px solid var(--line);border-radius:2px;
  background:var(--bg);font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.bw-copy:hover{border-color:var(--ink-3);color:var(--ink)}
.bw-copy:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ── 배치 ─────────────────────────────────────────────────────────── */
.bw-selinfo{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2);word-break:keep-all}
.bw-selinfo b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.bw-selinfo kbd,.bw-f kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);
  border-radius:2px;padding:0 4px}
/* 작업 열기 · 저장 — 위쪽 띠(`.otop`) 오른쪽 끝(2026-09-14, 정현님). 파일 이름은
   틀(`shell.css`)이 오른쪽으로 미는데, 이 도구는 버튼에 그 자리를 주고 이름을
   도구 이름 옆으로 당긴다. */
.otop .bw-now{margin-left:0;min-width:0;flex:0 1 auto}
.bw-work{margin-left:auto;display:flex;gap:6px;flex:none}
.bw-wbtn{display:inline-flex;align-items:center;height:28px;padding:0 12px;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line);border-radius:3px;white-space:nowrap}
.bw-wbtn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.bw-wbtn:focus-visible,.bw-work label.bw-wbtn:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.bw-wbtn:disabled{opacity:.45;cursor:default}
.obtn:disabled{opacity:.45;cursor:default}

/* ── 나누기 (2026-09-13) ─────────────────────────────────────────────
   평면에서 벽을 누르면 켜진다. 청록 테두리로 **지금 그 자리를 다루고 있다**는
   것을 말한다 — 평면의 치수선·나눌 자리 표시와 같은 색이다. */
/* 나누기 작은 창 — 벽을 누른 칸(평면 · 3D) 위, 누른 자리 옆(2026-09-14). */
.bw-split{position:absolute;z-index:4;width:240px;padding:8px 10px 6px;background:var(--bg);
  border:1px solid var(--brand);border-radius:3px;box-shadow:0 6px 18px rgba(11,26,33,.16)}
.bw-split[hidden]{display:none}
.bw-split-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 7px;
  font-size:12.5px;color:var(--ink-2)}
.bw-split-h b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.bw-split-x{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--ink-3);padding:2px 4px}
.bw-split-x:hover{color:var(--ink)}
.bw-split-f{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;margin-bottom:7px;font-size:12px;color:var(--ink-2)}
.bw-split-f input{width:100%;min-width:0;border:1px solid var(--line);border-radius:3px;padding:4px 6px;
  font:inherit;font-family:var(--mono);background:var(--bg);color:var(--ink)}
.bw-split-n{margin:6px 0 0;font-size:11.5px;color:var(--ink-3)}

/* ── 이음 목록 ──────────────────────────────────────────────────────
   한 줄이 이음 하나. 누르면 그 층 평면에서 그 이음을 고른다. */
.bw-joints{display:flex;flex-direction:column;gap:4px}
.bw-jrow{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;
  padding:5px 7px;border:1px solid var(--line-2);border-radius:3px;background:var(--bg);
  cursor:pointer;text-align:left;font-family:inherit;font-size:12px;color:var(--ink-2)}
.bw-jrow:hover{border-color:var(--ink-3)}
.bw-jrow:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.bw-jrow.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.bw-jrow b{font-family:var(--mono);font-weight:500;font-size:11.5px;color:var(--ink)}
.bw-jrow small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.bw-jrow .st{font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.bw-jrow .st.ok{color:var(--ok)} .bw-jrow .st.warn{color:var(--warn)} .bw-jrow .st.ng{color:var(--ng)}
.bw-empty{margin:0;font-size:12px;color:var(--ink-3)}

/* ── 이음 표시 모양 — 범례와 목록. 캔버스는 같은 모양을 손으로 그린다. */
i.bw-j{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;
  border:0;box-sizing:border-box}
i.bw-j.ok{background:var(--ok)}
i.bw-j.warn{border:2px solid var(--warn);background:linear-gradient(90deg,var(--warn) 50%,transparent 50%)}
i.bw-j.ng{border-radius:0;background:linear-gradient(45deg,transparent 42%,var(--ng) 42%,var(--ng) 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,var(--ng) 42%,var(--ng) 58%,transparent 58%)}
i.bw-j.same{width:6px;height:6px;background:var(--ink-3)}

/* ── 범례 ─────────────────────────────────────────────────────────── */
#legTypes{display:contents}
.olegend i.bw-t{width:12px;height:9px;border:0;opacity:.75}
.olegend i.bw-t.c1{background:var(--bw-t1)} .olegend i.bw-t.c2{background:var(--bw-t2)}
.olegend i.bw-t.c3{background:var(--bw-t3)} .olegend i.bw-t.c4{background:var(--bw-t4)}
.olegend i.bw-t.c5{background:var(--bw-t5)} .olegend i.bw-t.c6{background:var(--bw-t6)}
.olegend i.bw-v{border-color:var(--bw-v)}
.olegend i.bw-h{border-color:var(--bw-h)}
.olegend i.bw-link{border-color:var(--bw-link);border-top-width:2.5px}
.olegend i.bw-tie{border-color:var(--bw-tie);width:8px}
.olegend i.bw-j{margin-right:6px}

/* 도면 보고 안의 눈에 띄는 한 마디 — "두 줄로 그린 벽 같다" 처럼 **그냥
   넘기면 틀린 채로 쓰게 되는** 것. 오류는 아니라 `.oalert` 를 안 쓴다. */
.ofoot b.bw-hi{color:var(--warn)}

/* ── 3D 투명도 ────────────────────────────────────────────────────── */
.bw-op{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--ink-3)}

/* Shift+끌기 상자(2026-09-14) — 캔버스를 다시 그리지 않고 위에 띄운다.
   왼쪽→오른쪽(창: 전체가 들어와야)은 실선, 오른쪽→왼쪽(걸침)은 파선 — CAD 의 손짓. */
.bw-rubber{position:absolute;z-index:3;pointer-events:none;border:1px solid var(--brand);
  background:color-mix(in srgb,var(--brand) 8%,transparent)}
.bw-rubber.cross{border-style:dashed;border-color:var(--ok);
  background:color-mix(in srgb,var(--ok) 8%,transparent)}

/* 배치 단추 두 칸 — 2026-09-14 에 「작업 저장」 을 띠로 옮기며 안 쓰는 줄 알고 지웠다가
   배치 칸 단추가 세로로 쌓였다(정현님 화면). 여기서 아직 쓴다. */
.bw-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bw-btns .obtn{padding:6px 8px}
/* 종류마다 쓰는 곳(층 · 벽 수) */
.bw-use{margin:-4px 0 8px;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}

/* 조작줄에서 한 일의 결과 — 칸 위 가운데에 잠깐(2026-09-14). */
.bw-toast{position:absolute;z-index:5;left:50%;top:10px;transform:translateX(-50%);max-width:80%;
  padding:6px 12px;background:var(--ink);color:var(--bg);font-size:12.5px;border-radius:3px;
  pointer-events:none;box-shadow:0 4px 14px rgba(11,26,33,.18)}
.bw-toast[hidden]{display:none}

/* 3절 머리 — 새 종류 기본값 · fy (2026-09-14) */
.bw-defs{margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid var(--line-2)}

/* 입력칸 줄의 단위 칸 — **최소 폭을 준다**(2026-09-14, 정현님: 피복 칸은 맞는데 철근 fy 칸이
   틀어졌다). `.ofield` 는 줄마다 제 격자라 단위가 `mm` 인 줄과 `MPa` 인 줄의 마지막 칸 폭이
   달라, fy 입력칸만 7 px 왼쪽으로 밀렸다. 모든 단위가 이 폭 안에 들면 입력칸이 한 줄로 선다. */
#vars .ofield > .u{min-width:2.4em}