/* 계산기 장 전용 — 빵부스러기 · 왼쪽 트리 · 앱 3칸 · 입력 · 계산서.

   배너·바닥글·색 토큰은 여기 없다. 그것은 `web/shared/chrome.css` 이고
   도구 장과 한 벌이다 — **계산기 장은 둘 다 읽는다.**

   ## 2026-09-10 — `tools/tool.css` 에서 갈라져 나왔다

   가를 때 줄을 옮기기만 하고 고쳐 쓰지 않았다. 자세한 것은 `chrome.css`
   머리말에 적었다. */


/* 배너에서 내려온 크럼. 여기가 "지금 어디인가" 를 말하는 자리다. */
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-3);
  margin-bottom:12px}
.crumb a{color:var(--brand);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.head{padding:44px 0 26px}
/* ── 왼쪽 트리 ──────────────────────────────────────────────────────
   도구 하나에 들어오면 나가는 길이 차림표뿐이었다. 옆 도구로 가려면
   목록으로 돌아갔다가 다시 들어와야 했다. 트리를 왼쪽에 늘 두면
   **다섯이 한눈에 보이고 한 번에 건너간다.**

   준비 중인 것도 그린다 — 감추면 이 도구 하나가 전부인 줄로 읽힌다.
   대신 눌리지 않게 두고 왜 안 눌리는지를 옆에 적는다. */
.worksplit{display:grid;grid-template-columns:232px minmax(0,1fr);gap:32px;
  align-items:start}
/* ── 왼쪽 목록은 **따로 구른다** ────────────────────────────────────
   본문과 같이 굴러서, 도구 목록을 보려면 계산기를 지나쳐야 했다. 두 칸이
   나뉘어 각자 굴러야 한다(2026-08-28, 정현님).

   `overscroll-behavior:contain` 이 있어야 목록 끝에서 계속 굴려도 뒤의 장이
   따라 구르지 않는다 — 없으면 "따로" 가 절반만 된다. */
.tree{position:sticky;top:80px;padding:44px 0 0;
  max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.treeh{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--ink-3);
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.tree ul{list-style:none;margin:0;padding:0}
.tree li{margin:0}
.tree a,.tree span{display:block;padding:9px 10px;border-radius:4px;text-decoration:none;
  font-size:13.5px;line-height:1.45}
.tree b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  font-weight:400;color:var(--ink-3);margin-bottom:2px}
.tree a{color:var(--ink-2)}
.tree a:hover{background:var(--bg-2);color:var(--ink)}
.tree a:hover b{color:var(--brand)}
.tree .on{background:var(--bg-3);color:var(--ink);font-weight:500}
.tree .on b{color:var(--brand)}
.tree .off{color:var(--ink-3);cursor:default}
.tree i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--ink-3);margin-top:3px}
.treefoot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  padding-left:10px}
.treefoot a{display:block;padding:0;font-size:13.5px;color:var(--brand);text-decoration:none}
.treefoot a:hover{text-decoration:underline}
.treefoot span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* 좁아지면 트리를 위로 눕힌다. 세로로 쌓으면 계산기가 화면 밖으로 밀린다 —
   이 화면의 주인공은 계산기다. */
@media(max-width:900px){
  .worksplit{grid-template-columns:1fr;gap:0}
  .tree{position:static;padding:28px 0 0}
  .tree ul{display:flex;flex-wrap:wrap;gap:6px}
  .tree li{flex:0 1 auto}
  .tree a,.tree span{padding:7px 11px;border:1px solid var(--line);border-radius:3px}
  .tree i{display:inline;margin-left:6px}
  .treefoot{padding-left:0}
  .head{padding-top:28px}
}

.head h1{font-size:clamp(23px,3vw,31px);font-weight:600;letter-spacing:-.025em;margin:0 0 10px}
/* **`balance` 를 되돌렸다 — `pretty` 다**(2026-09-16, 정현님: "끝까지 안 가고
   너무 빨리 줄바꿈 되어있어").

   2026-09-10 에는 두 줄짜리 설명의 둘째 줄이 뭉텅 짧아 손으로 엔터를 친 것처럼
   읽혀 `balance` 로 바꿨다. 그런데 `balance` 는 **두 줄을 고르게 만들려고 첫 줄도
   같이 줄인다** — OPT-05 의 설명은 쓸 수 있는 폭이 1,042px 인데 612 / 652px 에서
   접혔다. 오른쪽 400px 가 빈 채 두 줄 다 일찍 끊기니, 고치려던 그 증상이 두 배로
   보인다(재어 본 값이다 — `getClientRects()`).

   `pretty` 는 줄을 끝까지 채우고 **마지막 줄에 낱말 하나만 떨어지는 것**만 막는다.
   낱말 한가운데서 갈리는 것은 CSS 로 못 막아 `registry.js` 의 knitLede() 가 한다.
   설명이 짧아 한 줄에 드는 계산기(아홉 중 여덟)는 어느 쪽이든 차이가 없다. */
/* **`56ch` 는 DESIGN.md 가 적어 둔 그 실수였다**(2026-09-10). `ch` 는 숫자
   `0` 한 글자 폭이라 한글의 절반쯤이고, 56ch 는 521px — 한글 28자에서
   접힌다. 쓸 수 있는 폭이 1,256px 인데 절반에서 끊기니 오른쪽이 텅 빈 채
   손으로 엔터를 친 것처럼 읽혔다. DESIGN.md "ch 를 한글에 쓰지 않는다" 의
   처방대로 2N 으로 잡는다 — 112ch = 1,042px, 계산기 여섯 중 다섯의 설명이
   한 줄에 들어간다(가장 긴 OPT-05 만 두 줄 — 124자). */
.head p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:112ch;
  text-wrap:pretty}

.app{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;margin-bottom:64px;
  box-shadow:0 1px 2px rgba(11,26,33,.04),0 18px 44px -18px rgba(11,26,33,.22)}
.appbar{display:flex;align-items:center;gap:14px;padding:0 16px;height:46px;background:var(--ink);color:#CBDBDD}
.appbar .t{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.appbar .t b{color:#fff;font-weight:500}
.appbar .meta{margin-left:auto;font-size:12px;color:#7D989D}
.appgrid{display:grid;grid-template-columns:288px minmax(0,1fr) 300px}
.pane{padding:18px 18px 22px}
.pane + .pane{border-left:1px solid var(--line)}
/* **계산서 칸만 다르게 잰다.** 안쪽 `.trace` 가 머리(`.paneh`) 아래 남는
   키를 전부 먹게 하려는 것이다 — 아래 `.trace` 주석 참고.

   `height:0` + `min-height:100%` 가 핵심이다. 격자는 줄 키를 **칸들의
   내용 키 중 가장 큰 것**으로 잡는데, 계산서는 내용이 1,300px 을 넘어서
   그냥 늘리면 **이 칸이 줄 키를 끌고 가** 카드가 1,400px 짜리가 된다
   (옆 칸은 800px 이 빈 채로). `height:0` 으로 줄 재기에서 빠지고,
   `min-height:100%` 로 정해진 줄 키를 도로 받는다. */
.pane:nth-child(3){display:flex;flex-direction:column;height:0;min-height:100%}
.paneh{font-size:11px;font-family:var(--mono);letter-spacing:.13em;color:var(--ink-3);
  padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:14px;
  display:flex;justify-content:space-between}

.grp{font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.04em;margin:16px 0 7px}
.grp.first{margin-top:0}
.f{display:grid;grid-template-columns:1fr 84px 40px;align-items:center;gap:8px;padding:5px 0;font-size:13.5px}
.f label{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f input,.f select{font-family:var(--mono);font-size:13.5px;text-align:right;border:1px solid var(--line);
  border-radius:3px;padding:5px 7px;width:100%;background:#fff;color:var(--ink)}
.f select{text-align:left;padding:5px 4px}
.f input:focus,.f select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.f .u{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.optbtn{width:100%;margin-top:18px;border:1px solid var(--brand);background:#fff;color:var(--brand);
  padding:9px;font-size:13.5px;font-weight:500;border-radius:3px;cursor:pointer}
.optbtn:hover{background:var(--brand);color:#fff}

.verdict{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.verdict .big{font-family:var(--mono);font-size:42px;font-weight:600;letter-spacing:-.03em;line-height:1}
.pill{font-family:var(--mono);font-size:12px;font-weight:500;padding:3px 10px;border-radius:2px;color:#fff}
.gov{font-size:12.5px;color:var(--ink-3);margin:0 0 20px}
.check{margin-bottom:15px}
.crow{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:5px}
.crow .vs{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.bar{height:7px;background:var(--bg-3);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:2px;transition:width .35s ease}
.summary{font-size:11.5px;color:var(--ink-3);font-family:var(--mono);margin-top:14px;
  border-top:1px solid var(--line-2);padding-top:12px}
.figcap{text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:6px}
/* 칸 크기는 부재가 정한다(`FIG`·`SLAB_FIG`). 좁은 화면에서 넘치지만 않게
   막아 둔다 — 넓힌 1방향 그림이 470 이라 그대로 두면 삐져나온다. */
#figure{display:block;margin:18px auto 0;max-width:100%;height:auto}
/* 두 번째 그림 자리 — 일부 탭에만 있다(지금은 기둥의 P-M 상관곡선).
   `[hidden]` 을 **명시적으로 감춘다**(2026-09-07 에 잡음) — SVG 는
   브라우저 기본 스타일시트의 `[hidden]{display:none}` 을 안 받는다
   (HTML 엘리먼트만 받는다). 그래서 속성을 지워도 `display:inline`
   그대로였다. `:not([hidden])` 만으로는 안 되고, 감출 때 쓸 규칙을
   따로 걸어야 한다. */
#figure2[hidden]{display:none}
#figure2:not([hidden]){display:block;margin:18px auto 0;max-width:100%;height:auto}

/* ── 계산서는 **칸이 주는 키를 다 쓴다** ────────────────────────────
   `max-height:352px` 로 못 박혀 있었다. 옆 칸(검토 결과)이 도해까지 얹어
   600px 가까이 되는데 계산서만 352 에서 끊기고 **아래 240px 가 빈 채로
   남았다**(2026-08-28, 정현님이 보셨다). 스크롤이 있으니 내용이 없어지진
   않았지만, 있는 자리를 안 쓰면서 계속 굴려야 했다.

   숫자를 키우지 않고 **줄에서 뺀다.** 칸이 세로 flex 이므로 `flex:1` 이
   머리 아래 남는 키를 그대로 받는다. 도구마다 계산서 길이가 다르고
   화면 높이도 다르므로, 어떤 숫자를 새로 박아도 언젠가는 또 틀린다.

   `min-height:0` 이 있어야 flex 항목이 내용보다 작아질 수 있다 — 없으면
   안 줄어들고 카드가 계산서 길이만큼 늘어난다. */
.trace{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px}
.tstep{border-bottom:1px solid var(--line-2);padding:10px 0}
.tstep:last-child{border-bottom:0}
.tstep .th{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px}
.tstep .th b{font-weight:500}
.tstep .th em{font-style:normal;font-family:var(--mono);color:var(--brand);white-space:nowrap;font-size:12.5px}
.tstep pre{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink-2);
  margin:7px 0 0;white-space:pre-wrap;word-break:break-word}
.ref{display:inline-block;font-family:var(--mono);font-size:10.5px;color:var(--brand);
  border:1px solid var(--line);padding:0 5px;border-radius:2px;margin-top:6px}

@media(max-width:1000px){
  .appgrid{grid-template-columns:1fr 1fr}
  .pane:nth-child(3){border-left:0;border-top:1px solid var(--line);grid-column:1/-1}
  /* 아래로 내려가면 옆 칸이 키를 안 정해 준다 — 위의 `height:0` 을 풀고
     그때만 상한을 둔다. 안 풀면 칸이 0 이 되고, 안 두면 계산서 길이만큼
     카드가 늘어나 화면 밖으로 나간다. */
  .pane:nth-child(3){height:auto;min-height:0}
  .trace{flex:0 1 auto;max-height:420px}
}
@media(max-width:700px){
  .appgrid{grid-template-columns:1fr}
  .pane + .pane{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  .head{padding:32px 0 20px}
  .app{margin-bottom:44px}
  /* 앱 창 타이틀바 — 46px 에 두 줄이 눌려 들어가 겹쳤다. 키를 글에 맡긴다 */
  .appbar{height:auto;min-height:46px;padding:10px 14px;align-items:baseline;
    flex-wrap:wrap;gap:3px 12px}
  .appbar .meta{margin-left:0;flex:1 0 100%}
}

/* 적용 제한 — 2방향 슬래브 탭. 막지 않고 적어서 보여 준다. */
.limits { margin-top: 14px; }
.limits h3 { font-size: 13px; margin: 0 0 6px; font-weight: 600; }
.limits .lrow {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px;
  align-items: baseline; padding: 3px 0; font-size: 13px;
}
.limits .lmark { font-weight: 700; text-align: center; }
.limits .lrow em { font-style: normal; color: var(--muted); font-size: 12px; }
.limits .lnote { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

/* 제한 표를 **갈림길 ② 위에 올리면 뜨는 창**으로 옮겼다(2026-08-29, 정현님).
   검토 결과 칸에서 그림 밑을 차지하고 있었는데, 정작 자주 보는 것은 그림이다.
   표는 "지금 어디가 걸리나" 를 확인할 때만 필요하다.

   마우스만으로는 키보드 쓰는 사람이 못 연다 — `:focus-within` 을 같이 걸고
   칸에 `tabindex` 를 준다. 좁은 화면에서는 떠 있는 창이 잘리므로 그냥 편다. */
.fstep.haspop { position: relative; cursor: help; }
.fstep.haspop > b::after { content: ' ⓘ'; font-size: 11px; color: var(--brand); }
/* 계산서 칸이 좁아(약 260px) 그 폭에 맞추면 표가 낱말 단위로 접힌다.
   **왼쪽으로 넓힌다** — 떠 있는 창이라 옆 칸을 잠깐 덮어도 된다.
   길면 창 안에서 스크롤한다. */
.fstep .pop {
  display: none; position: absolute; right: 0; left: auto; top: calc(100% + 6px);
  width: 360px; max-width: 86vw; max-height: 320px; overflow-y: auto;
  z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 6px 20px rgba(11,26,33,.13);
}
.fstep.haspop:hover .pop, .fstep.haspop:focus-within .pop { display: block; }
.fstep .pop h3 { font-size: 12.5px; margin: 0 0 6px; font-weight: 600; }
/* 창이 좁아 값을 오른쪽에 붙이면 긴 설명이 낱말 단위로 접힌다. 아랫줄로 내린다. */
.fstep .pop .lrow { grid-template-columns: 18px 1fr; }
.fstep .pop .lrow em { grid-column: 2; }
@media(max-width:760px){
  .fstep .pop { display: block; position: static; box-shadow: none; border: 0;
    width: auto; max-height: none; padding: 8px 0 0; }
  .fstep.haspop > b::after { content: none; }
}

/* 설계 방법 갈림길 — 제한이 뜨면 "못 쓴다" 로 읽히는데 기준은
   그렇게 안 말한다. 길이 셋이고 제한은 그중 하나의 입장권이다. */
.flow { margin: 6px 0 14px; }
.flow .fstep {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.flow .fstep b { font-size: 13px; }
.flow .fstep span { font-size: 12px; color: var(--muted); }
.flow .farrow { text-align: center; color: var(--muted); font-size: 13px; padding: 2px 0; }
/* 세 길을 나란히 두었더니 계산서 칸이 좁아 글자가 넘쳤다 — 세로로 쌓는다. */
.flow .frow { display: grid; grid-template-columns: 1fr; gap: 8px; }
.flow .fgood { border-color: var(--ok); }
.flow .fbad { border-color: var(--warn); }
.flow .fpick { border-color: var(--brand); background: var(--bg-2); }

/* 계산서 머리로 옮겨 접어 두었다 — 입력에 따라 안 바뀌는 설명이라
   결과 옆의 그림 자리를 차지할 이유가 없었다. **제목이 상태를 말한다.** */
details.flow > summary {
  cursor: pointer; font-size: 13px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--muted);
  list-style: none; display: flex; gap: 6px; align-items: baseline;
  flex-wrap: wrap;   /* 좁은 칸에서 "설계 방법" 이 두 줄로 쪼개졌다 */
}
details.flow > summary::-webkit-details-marker { display: none; }
details.flow > summary::before { content: '\25B8'; font-size: 10px; color: var(--muted); }
details.flow[open] > summary::before { content: '\25BE'; }
details.flow[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.flow > summary b { color: var(--fg); font-weight: 600; white-space: nowrap; }
details.flow > .fstep:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; }
.flow .bad { color: var(--warn); }
.flow .lnote, .lnote { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.lnote.bad { color: var(--warn); }

/* ── 긴 선택칸은 제 줄을 쓴다 ────────────────────────────────────────
   값 칸 84px 은 숫자 입력(`40` mm) 기준 폭인데, 선택칸에는 "에폭시 ·
   아연-에폭시 (β 1.2)" 처럼 221px 짜리가 들어온다(2026-09-10, OPT-04 에서
   `부재의 불연속단` 이 `부재의` 로 잘려 있었다). **라벨과 나란히 두는 한
   어떤 배치로도 안 들어간다** — 행 전체가 252px 이다. 그래서 안 들어가는
   행만 라벨을 위로 올리고 선택칸이 폭을 다 쓰게 한다. 짧은 것(fck·fy·90°)은
   그대로 나란히 둔다.

   `#inputs .f` 격자 자체는 도구마다 자기 CSS 에 있고, 여기서는 덧쓰기만
   한다. 어느 행이 안 들어가는지는 CSS 가 못 잰다 — `registry.js` 의
   fitSelects() 가 재서 `.wide` 를 붙인다. 단위 칸은 `auto` 라 비어 있으면
   0 이 되어 선택칸이 그만큼 더 쓴다. */
#inputs .f.wide{grid-template-columns:1fr auto;row-gap:3px}
#inputs .f.wide > label{grid-column:1 / -1}
#inputs .f.wide select{width:100%;text-align:left}

/* 보고서 출력 단추 — 계산서 칸 머리 오른쪽. **계산기 두 장이 같이 쓴다**(OPT-01 · OPT-03). 보조 단추(DESIGN.md 5.7: 테두리만). */
.reportbtn{appearance:none;background:none;border:1px solid var(--brand);color:var(--brand);
  border-radius:3px;padding:3px 10px;font:500 12px var(--sans);letter-spacing:0;cursor:pointer;
  margin-top:-4px}
.reportbtn:hover{background:var(--brand);color:#fff}
.reportbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.reportbtn:disabled{opacity:.6;cursor:progress}