/* /calc/hook-anchorage 의 스타일. rebar-table.css 와 같은 뼈대(입력 · 표 ·
   근거)이고 부재 탭만 없다. 인라인이 아니다 — CSP `style-src 'self'`. */

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

/* ── 표 — 이 장에만 있는 것 ──────────────────────────────────────────
   OPT-02 와 같은 세 칸(입력 · 표 · 근거). 가운데 칸이 표를 담고 스스로
   구른다 — 창 하나에 세 칸이 나란히 있는 모양을 유지하려고 격자에 키를 준다. */
.appgrid{grid-template-columns:288px minmax(0,1fr) 320px;
  height:calc(100vh - 250px);min-height:520px;max-height:860px}
.pane{overflow-y:auto}
.tables{padding:0;overflow-y:auto}
.tsec{padding:18px 18px 22px}
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}
table.t th:first-child{text-align:left}
table.t td{text-align:right;padding:5px 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.v{color:var(--ink);font-weight:500}
/* 보정을 못 쓰는 굵기(D35 초과)도 지우지 않는다 — 흐리게 두고 이유를 단다. */
table.t tr.no td{color:var(--ink-3)}
table.t tr.no td.v{color:var(--ink-3);font-weight:400}
/* **비고 칸이 60px 로 눌려 글자가 한두 자씩 세로로 쌓였다**(2026-09-10).
   `부재의 불연속단` 을 고르면 줄 높이가 **187px** 까지 갔다. 큰 원인은
   모든 줄에 같은 문장이 붙던 것이라 그쪽을 먼저 고쳤고(`hook-anchorage.js`
   의 OPTRA_SHARED_WHY), 남은 사유가 한 줄에 들어가게 폭을 준다 — 32px.

   **표는 어차피 가로로 구른다.** 숫자 열 열두 개만으로 이미 칸을 넘는다
   (639 > 594). 그러니 여기서 폭을 아껴도 값을 안 한다. 구르는 것을 표
   안에 가둔다 — 안 그러면 근거 칸까지 같이 밀린다(배근 성능표와 같은 방식). */
table.t{display:block;overflow-x:auto;min-width:100%}
table.t td.why,table.t th:last-child{min-width:14em}
table.t td.why{text-align:left;font-family:var(--sans);font-size:11.5px;
  color:var(--warn);white-space:normal}
table.t td.bad{color:var(--ng)}
table.t td.cap{text-decoration:underline;text-underline-offset:3px}
.tnote{font-size:11.5px;color:var(--ink-3);line-height:1.75;margin-top:12px}
.tnote b{color:var(--ink-2);font-weight:500}
.tnote .bad{color:var(--ng)}
.tnote .cap{text-decoration:underline;text-underline-offset:3px}
.ref{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--brand);
  border:1px solid var(--line);padding:0 5px;border-radius:2px;margin-left:4px}

/* 입력 칸 — OPT-02 와 같은 모양이되 이 장이 스스로 그린다 */
#inputs .g{font-size:11px;font-family:var(--mono);letter-spacing:.1em;
  color:var(--ink-3);margin:16px 0 6px}
#inputs .g:first-child{margin-top:0}
#inputs .f{display:grid;grid-template-columns:1fr 84px 40px;align-items:center;
  gap:8px;padding:5px 0;font-size:13.5px}
#inputs input,#inputs select{width:100%;padding:5px 7px;font-family:var(--mono);
  font-size:13px;text-align:right;border:1px solid var(--line);border-radius:3px;
  background:#fff;color:var(--ink)}
#inputs select{text-align:left}
#inputs input:focus,#inputs select:focus{outline:2px solid var(--brand);
  outline-offset:-1px;border-color:var(--brand)}
#inputs .u{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* 근거 칸 */
.bstep{border-bottom:1px solid var(--line-2);padding:10px 0}
.bstep:last-child{border-bottom:0}
.bh{font-size:13px;font-weight:500;color:var(--ink)}
.bstep pre{font-family:var(--mono);font-size:11.5px;line-height:1.8;
  color:var(--ink-2);margin:5px 0 4px;white-space:pre-wrap;word-break:break-word}
@media(max-width:1000px){
  /* 세로로 쌓이면 칸마다 구르게 둘 이유가 없다 — 창 키를 풀고 장이 구른다. */
  .appgrid{grid-template-columns:1fr;height:auto;max-height:none}
  .pane,.tables{overflow-y:visible}
  .pane:nth-child(3){height:auto;min-height:0}
  .pane + .pane{border-left:0;border-top:1px solid var(--line)}
  .tables{overflow-x:auto}
}

/* ── JS 가 짓던 인라인 대신 쓰는 규칙 — rebar-table.css 와 같다 ───────
   `!important` 는 "인라인이던 것" 이라는 한 가지 뜻만 갖는다. */
.treefoot a.qna{margin-top:12px !important}