/* /calc/member-list 의 스타일. 공통은 `/shared/chrome.css` 가 든다. */

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── 두 칸으로 가른다 ────────────────────────────────────────────────
   왼쪽은 모델 요약(안 움직인다), 오른쪽은 일람표(길고 스크롤한다).
   다른 도구는 셋으로 가르는데 여기는 **표가 주인공**이라 둘이다. */
.mlsplit{display:grid;grid-template-columns:262px minmax(0,1fr)}
.mlsplit .pane{padding:18px 18px 22px}
.mlsplit .pane + .pane{border-left:1px solid var(--line)}
/* 표 칸은 세로 flex — 표가 남는 키를 다 받고 스스로 스크롤한다.
   숫자로 못 박으면 화면 높이마다 틀린다(계산서에서 한 번 겪은 자리). */
.mlsplit .main{display:flex;flex-direction:column;min-height:520px}
.tablebox{flex:1 1 auto;min-height:0;overflow:auto}

/* ── 일람표 ──────────────────────────────────────────────────────── */
table.t{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:12.5px}
table.t th{text-align:right;font-weight:400;color:var(--ink-3);font-size:10.5px;
  letter-spacing:.08em;padding:0 8px 8px;border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;background:#fff;z-index:1}
table.t th:first-child,table.t th.l{text-align:left}
table.t td{text-align:right;padding:3px 8px;border-bottom:1px solid var(--line-2);
  white-space:nowrap;color:var(--ink-2)}
table.t td.n{text-align:left;color:var(--ink)}
table.t td.sub{text-align:left;color:var(--ink-3);font-size:11.5px}
/* 층은 여러 개면 접힌다. 배근은 **안 접는다** — 한 줄로 읽어야 배근이다.
   대신 표 상자가 가로로 스크롤한다. */
table.t td.stories{white-space:nowrap}
table.t td.rebar{white-space:nowrap}
/* 값 칸은 좁게 잡는다 — 안 그러면 이름 칸이 남는 폭을 다 먹는다. */
table.t th.w,table.t td.w{width:1%}
table.t input[type=number]{min-width:64px}
/* 안 쓰이는 단면 — 파일에는 있는데 부재가 안 물린 줄. **숨기지 않는다.** */
table.t tr.unused td{color:var(--ink-3)}
/* 고쳐진 줄. 원래 값을 같이 보여 준다 — 무엇을 바꿨는지 잊지 않게. */
table.t tr.edited td{background:var(--bg-2)}
table.t tr.edited td.was{color:var(--ink-3);font-size:11px}
.was s{text-decoration:line-through;opacity:.7}

/* 표 안의 입력칸. 잠긴 줄은 `input` 자체를 안 만든다 — `disabled` 로만
   두면 마우스로는 못 눌러도 눌러 보고 나서야 안 되는 걸 안다. */
table.t input{width:100%;padding:2px 5px;font-family:var(--mono);font-size:12.5px;
  text-align:right;border:1px solid transparent;border-radius:3px;
  background:transparent;color:var(--ink)}
table.t input:hover{border-color:var(--line)}
table.t input:focus{outline:2px solid var(--brand);outline-offset:-1px;
  border-color:var(--brand);background:#fff}
table.t input.name{text-align:left}
table.t input.bad{outline:2px solid var(--ng);outline-offset:-1px}
table.t td.locked{color:var(--ink-3)}
.lockmark{font-size:10.5px;color:var(--warn);margin-left:5px}

/* ── 부재 탭 ─────────────────────────────────────────────────────── */
.mtabs{display:flex;gap:2px;padding:0 0 0 18px;background:var(--bg-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.mtab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:6px 14px 9px;font-size:13.5px;color:var(--ink-3);cursor:pointer;
  font-family:inherit}
.mtab:hover{color:var(--ink)}
.mtab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.mtab i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  margin-left:5px}

/* ── 파일 고르기 · 내보내기 ──────────────────────────────────────── */
.pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg)}
.pick .btn{cursor:pointer;padding:6px 13px;font-size:13px}
.pick span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
#editcount{margin-left:auto;color:var(--brand)}
.obtn{appearance:none;font-family:inherit;font-size:13px;padding:6px 13px;
  border:1px solid var(--brand);border-radius:3px;background:#fff;color:var(--brand);
  cursor:pointer}
.obtn:hover:not(:disabled){background:var(--brand);color:#fff}
.obtn:disabled{border-color:var(--line);color:var(--ink-3);cursor:default}
.obtn.ghost{border-color:var(--line);color:var(--ink-2)}
.obtn.ghost:hover:not(:disabled){background:var(--bg-3);color:var(--ink);border-color:var(--line)}

/* ── 왼쪽 요약 ───────────────────────────────────────────────────── */
.sum{font-family:var(--mono);font-size:12.5px}
.sum .r{display:flex;justify-content:space-between;gap:10px;padding:4px 0;
  border-bottom:1px solid var(--line-2)}
.sum .r span:first-child{color:var(--ink-3)}
.sum .r b{font-weight:500;color:var(--ink)}
.sum .warn{color:var(--warn)}

.tnote{font-size:12px;color:var(--ink-2);line-height:1.8;margin-top:14px;
  border-top:1px solid var(--line-2);padding-top:12px;word-break:keep-all}
.tnote p{margin:0 0 9px}
.tnote p:last-child{margin-bottom:0}
.tnote b{font-weight:500;color:var(--ink)}
.tnote code{font-family:var(--mono);font-size:11.5px;background:var(--bg-3);
  padding:1px 4px;border-radius:2px}
/* **잠긴 줄이 왜 잠겼는지**를 감추지 않는다. */
.caution{margin-top:14px;border:1px solid var(--warn);border-radius:4px;
  padding:11px 13px;font-size:12px;line-height:1.75;color:var(--ink-2);background:#fff}

.empty{padding:44px 18px;text-align:center;color:var(--ink-3);font-size:13.5px}

@media(max-width:1000px){
  .mlsplit{grid-template-columns:1fr}
  .mlsplit .pane + .pane{border-left:0;border-top:1px solid var(--line)}
  .mlsplit .main{min-height:0}
  .tablebox{max-height:none;overflow-x:auto}
}
@media(max-width:760px){
  .pick{padding:10px 14px}
  #editcount{margin-left:0;flex:1 0 100%}
}

/* ── 막지 못한 것 ────────────────────────────────────────────────────
   내보내기 직전에 **다시 읽어** 확인한다. 어긋나면 파일을 안 내주고 여기
   적는다 — 조용히 틀린 모델이 나가는 것보다 시끄럽게 멈추는 것이 낫다. */
.alert{margin:0;padding:12px 18px;background:#FDF3F2;border-bottom:1px solid var(--ng);
  font-size:13px;line-height:1.7;color:var(--ink)}
.alert[hidden]{display:none}
.alert b{color:var(--ng);font-weight:600}
.alert ul{margin:6px 0 0;padding-left:20px}
.alert li{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* ── 배근 고치기 ─────────────────────────────────────────────────────
   줄을 펼치면 그 단면의 배근이 나온다. 기둥은 한 뭉치, 보는 **공통 + 구간
   셋**(단부 i · 중앙 m · 단부 j)이다 — 미다스가 그렇게 담고, 단부와 중앙의
   배근이 다른 것이 실무다. */
.rtoggle{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font-family:inherit;font-size:11.5px;color:var(--ink-3);text-align:left}
.rtoggle:hover{color:var(--brand)}
.rtoggle i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--brand);
  border:1px solid var(--line);border-radius:2px;padding:0 4px;margin-left:6px}
.rtoggle:hover i{border-color:var(--brand)}
.rmark{font-size:10px;color:#fff;background:var(--brand);border-radius:2px;padding:1px 5px;
  margin-left:4px;font-family:var(--mono)}

/* ⚠ **지문(specificity)을 이겨야 한다.** 위의 `table.t input{width:100%}` 은
   (0,1,2)라 `.rf input`(0,1,1)을 이긴다 — 그래서 배근 칸이 167px 로 늘어나
   한 줄에 셋밖에 안 들어갔다. `tr.rpanel` 을 앞에 붙여 (0,1,3)으로 만든다.
   이 장에서 오늘 두 번째로 겪는 자리다(`/qna` 의 검은 단추가 같은 모양이었다). */
tr.rpanel > td{background:var(--bg-2);padding:12px 14px;border-bottom:1px solid var(--line);
  white-space:normal;text-align:left}
.rgrp{margin-bottom:10px}
.rgrp:last-of-type{margin-bottom:0}
.rgrp > b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-3);font-weight:400;margin-bottom:5px}
.rrow{display:flex;flex-wrap:wrap;gap:6px 10px}
.rf{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3)}
.rf > span{white-space:nowrap}
tr.rpanel .rf input{width:64px;padding:3px 6px;font-family:var(--mono);font-size:12px;
  text-align:right;border:1px solid var(--line);border-radius:3px;background:#fff;
  color:var(--ink)}
tr.rpanel .rf input:focus{outline:2px solid var(--brand);outline-offset:-1px;
  border-color:var(--brand);background:#fff}
tr.rpanel .rf input.bad{outline:2px solid var(--ng);outline-offset:-1px}
/* 고쳐진 칸은 눈에 띄어야 한다 — 펼친 칸이 스물이라 안 그러면 못 찾는다. */
tr.rpanel .rf.on input{border-color:var(--brand);background:#F2F8F8;font-weight:500}
.rf.on > span{color:var(--brand)}
.rf i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.rnote{margin:10px 0 0;font-size:11.5px;line-height:1.75;color:var(--ink-2);
  word-break:keep-all;border-top:1px solid var(--line-2);padding-top:9px}
.rnote code{font-family:var(--mono);font-size:11px;background:var(--bg-3);
  padding:1px 4px;border-radius:2px}
.rnote b{font-weight:500;color:var(--ink)}