/* /calc/flexure-shear 의 스타일.

   2026-08-28 까지 장 안에 <style> 로 있었다. CSP 의
   `style-src 'self'`(unsafe-inline 없이)가 인라인 <style> 을 막는다 —
   스크립트와 같다. **한 글자도 안 바꿨다.** */

/* 부재 탭 — 보 · 슬래브. 창 맨 위, 왼쪽 끝에서 시작한다. */
.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)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── 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` 를 쓰지 않는다.** 이 블록은
    "인라인이던 것" 이라는 한 가지 뜻만 갖는다. */

/* 슬래브 안의 방향 고르개. 부재 탭 아래 한 단 들어간다 —
   1방향·2방향은 다른 부재가 아니라 같은 부재를 보는 두 방법이다. */
.wtabs{display:flex;align-items:center;gap:6px;padding:7px 18px;
  background:var(--bg-2);border-bottom:1px solid var(--line);font-size:13px}
/* **`hidden` 이 안 먹던 자리.** `display:flex` 가 브라우저 기본
   `[hidden]{display:none}` 보다 세서, 보 탭에서도 방향 고르개가 보였다. */
.wtabs[hidden]{display:none}
.wlab{color:var(--muted);font-size:12px;margin-right:2px}
.wtab{appearance:none;border:1px solid var(--line);background:var(--bg);
  color:var(--muted);border-radius:999px;padding:3px 12px;font:inherit;
  font-size:12px;cursor:pointer}
.wtab:hover{color:var(--ink)}
.wtab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);
  color:#fff;font-weight:600}
.whint{color:var(--muted);font-size:12px;margin-left:8px}

/* 단면 스케치와 다른 종류의 그림(지금은 기둥 P-M 곡선)을 접어 두는 단추.
   기본은 접힘 — 늘 펴 두면 검토 결과 칸이 매번 길어진다.
   `[hidden]` 이 이겨야 한다(`.wtabs[hidden]` 과 같은 자리). */
.fig2toggle[hidden]{display:none}
.fig2toggle{appearance:none;border:1px solid var(--line);background:var(--bg);
  color:var(--brand);border-radius:4px;padding:5px 12px;font:inherit;
  font-size:12px;cursor:pointer;margin-top:14px}
.fig2toggle:hover{border-color:var(--brand);background:var(--bg-2)}
.fig2toggle[aria-expanded="true"]{background:var(--brand);border-color:var(--brand);color:#fff}