/* /calc/rebar-table 의 스타일. 2026-08-28 까지 장 안에 인라인이었다(CSP). */

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

/* ── 표 — 이 장에만 있는 것 ──────────────────────────────────────────
   OPT-01 은 세 칸(입력·검토 결과·계산서)이다. 여기는 **입력 · 표 · 근거**다.
   가운데 칸이 표 둘(휨·전단)을 세로로 담고 스스로 구른다. */
.appgrid{grid-template-columns:288px minmax(0,1fr) 320px;
/* **표는 칸 안에서 구른다.** 그냥 두면 18줄짜리 휨 표가 카드 키를 끌고 가
   창이 3,000px 이 되고, 옆의 입력 칸과 근거 칸은 그만큼 빈 채로 늘어난다.
   창 하나에 세 칸이 나란히 있는 모양을 유지하려면 격자에 키를 줘야 한다 —
   `.trace` 를 폈을 때(2026-08-28)와 같은 문제이고, 거기는 옆 칸이 키를
   정해 주었지만 여기는 정해 줄 칸이 없어 화면 높이로 잡는다. */
  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}
.tsec + .tsec{border-top:1px solid var(--line)}
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:nth-child(-n+2){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,table.t td.lay{text-align:left;color:var(--ink)}
table.t td.v{color:var(--ink);font-weight:500}
/* 못 쓰는 배근도 지우지 않는다 — 지우면 "그런 배근은 없다" 로 읽힌다.
   흐리게 두고 왜 못 쓰는지를 옆에 단다. */
table.t tr.no td{color:var(--ink-3)}
table.t tr.no td.v{color:var(--ink-3);font-weight:400}
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}

/* ── 휨 격자 — 압축철근을 켰을 때 ──────────────────────────────────
   행=인장 본수, 열=압축 본수. 전단표(가닥수 × 간격)와 같은 모양이다.
   `display:block` 은 열이 많을 때(넓은 보는 한 단 10본까지 간다) **표만**
   가로로 구르게 하려는 것이다 — 안 걸면 `.tables` 가 대신 굴러 이음·전단
   표까지 같이 밀린다. */
/* `min-width:100%` 가 짝이다 — `display:block` 이 되면서 표가 내용 너비로
   줄어 칸 오른쪽이 빈다. 좁으면 칸을 채우고, 넓으면 구른다. */
table.t.grid{display:block;overflow-x:auto;min-width:100%}
table.t.grid th.sep,table.t.grid td.sep{border-left:1px solid var(--line)}
/* 넓은 보는 압축 본수 열이 15개까지 간다 — 가로로 구르는 동안 어느 인장
   본수를 보고 있는지 놓치므로 첫 열만 붙여 둔다. 배경을 안 주면 밑으로
   지나가는 칸이 비쳐 보인다. */
table.t.grid th:first-child,table.t.grid td.n{position:sticky;left:0;
  background:var(--bg);z-index:1;box-shadow:1px 0 0 var(--line)}
/* 열이 많아지면 자동 너비가 **비고를 먼저 짓누른다** — 폭 1,000 에서 85px
   로 눌려 사유 한 줄이 넉 줄로 접히고 그 줄만 키가 세 배가 됐다(2026-09-10).
   **12em 이 상한이다** — 13em 부터는 폭 400(열 다섯)에서도 없던 가로
   스크롤이 생긴다. 좁은 단면은 이 값에 안 걸린다(이미 더 넓게 잡힌다). */
table.t.grid td.why,table.t.grid th:last-child{min-width:12em}
/* 압축 본수는 인장 본수를 못 넘는다 — 오른쪽 위 빈 칸을 지우지 않고
   `·` 로 남긴다. 비워 두면 값이 0 인지 그런 배근이 없는 것인지 안 갈린다. */
table.t.grid td.gap{color:var(--line);font-weight:400}
/* 못 쓰는 칸 — 목록의 `tr.no` 와 같은 뜻인데 격자에서는 줄이 아니라 칸마다
   갈린다(연성·최소철근은 압축 본수에 따라 켜졌다 꺼진다). */
table.t.grid td.cellno{color:var(--ink-3);font-weight:400}
/* 그 칸에만 걸린 사유가 있다는 표시 — 마우스를 올리라는 뜻이다. */
table.t.grid td.mark{text-decoration:underline dotted;text-underline-offset:3px}
/* Δ 색 — **판정색이 아니다.** --ok/--ng 를 쓰면 칸의 사용 가능 여부와
   헷갈리므로 브랜드색(--brand #0C6B70)의 농도만 쓴다. */
table.t.grid td.h1{background:rgba(12,107,112,.07)}
table.t.grid td.h2{background:rgba(12,107,112,.14)}
table.t.grid td.h3{background:rgba(12,107,112,.24)}
table.t.grid td.h4{background:rgba(12,107,112,.36)}
.tnote .hk{display:inline-block;padding:0 6px;border-radius:2px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.tnote .hk.h1{background:rgba(12,107,112,.07)}
.tnote .hk.h2{background:rgba(12,107,112,.14)}
.tnote .hk.h3{background:rgba(12,107,112,.24)}
.tnote .hk.h4{background:rgba(12,107,112,.36)}
.tnote .cellno{color:var(--ink-3)}
.tnote .mark{text-decoration:underline dotted;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}
/* 부재 탭 — 보 · 슬래브. 창 맨 위, 왼쪽 끝에서 시작한다. */
.mtabs{display:flex;gap:2px;padding:0 0 0 18px;background:var(--bg-2);
  border-bottom:1px solid var(--line)}
.mtab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:8px 16px 10px;font-size:14px;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)}

/* 입력 칸 — OPT-01 의 `.f` 와 같은 모양이되 이 장이 스스로 그린다 */
#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)}
/* enable_if 로 꺼진 칸 — 값은 안 지워도(다시 켜면 그대로 남는다) 눈에
   안 켜져 보여야 헷갈리지 않는다. disabled 만으로는 이 장 다른 칸과
   똑같아 보였다(2026-09-02, 정현님이 발견). */
#inputs input:disabled,#inputs select:disabled{background:var(--bg-2);
  color:var(--ink-3);cursor:not-allowed}
#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 가 짓던 인라인 대신 쓰는 규칙 ─────────────────────────
   2026-08-28 까지 스크립트가 이 값들을 style 속성으로 지어 붙였다.
   CSP 의 style-src 'self'(unsafe-inline 없이)가 그것을 막는다.
   **값은 하나도 안 바꿨다** — 자리만 옮겼다. */
.treefoot a.qna{margin-top:12px !important}

/*  ↑ 위 규칙들에 `!important` 가 붙어 있다. **일부러다.**

    이 값들은 2026-08-28 까지 `style="…"` 로 그 요소에 직접 붙어 있었다.
    인라인은 어떤 선택자보다 세다 — 그대로 옮기려면 그 우선순위도 옮겨야 한다.

    처음엔 클래스를 두 번 적어(`.u-mt44.u-mt44`) 특이도를 올렸는데,
    `.panel .body p` 같은 더 센 규칙에 또 밀렸다. 자리마다 다시 재야 하고
    새 규칙이 생기면 조용히 또 밀린다. 계산된 스타일 지문이 두 번 잡아 줬다
    (`h3.u-mt44` 의 여백, `p.u-foot` 의 글자 크기·색).

    **여기 말고 다른 데서는 `!important` 를 쓰지 않는다.** 이 블록은
    "인라인이던 것" 이라는 한 가지 뜻만 갖는다. */