/* 細胞膜を通る分子・通らない分子の動く図（public/widgets/membrane.js）。yamlab.jp 用の写し（2026-10-21）。元は slides/widgets/membrane.css。
 * スライドの section .membrane … を .yw .membrane … に置きかえた。字の大きさは px。
 * 本文 736 px では canvas 720×310 がほぼ等倍。置き場所が 600 px 未満なら、JS が root に membrane-narrow を付けて canvas を 330×320 にする。
 * 分子の名前（上）と結果・送りこむボタン（下）は、canvas と同じ幅の 3 列の段（.membrane-row）。列の真ん中が分子の道すじ */
.yw .widget.membrane { box-sizing: border-box; width: 738px; max-width: 100%; padding: 14px 8px 10px; border-radius: 0.8em; background: var(--ac-paper); box-shadow: 0 4px 18px rgba(30,85,115,0.13); border: 1.5px solid var(--ac-blue-pale); line-height: 1.4; }
.yw .membrane .membrane-fig { max-width: 100%; margin: 0 auto; }
.yw .membrane .membrane-canvas { display: block; border-radius: 8px; }
.yw .membrane .membrane-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yw .membrane .membrane-names { margin-bottom: 6px; align-items: end; }
.yw .membrane .membrane-res { margin-top: 6px; align-items: stretch; }
.yw .membrane .membrane-res .membrane-col { justify-content: space-between; }   /* 結果の行数がちがっても、ボタンの高さをそろえる */
.yw .membrane .membrane-col { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: 0 4px; }
.yw .membrane .membrane-ph { display: inline-block; }
.yw .membrane .membrane-name { font-family: var(--ac-round); font-weight: 900; font-size: 18px; line-height: 1.3; }
.yw .membrane .membrane-sub { font-size: 14px; font-weight: 700; line-height: 1.3; }
.yw .membrane .membrane-res-txt { font-family: var(--ac-round); font-weight: 700; font-size: 17px; line-height: 1.3; }
.yw .membrane .membrane-col button { margin-top: 6px; font-size: 15px; padding: 3px 12px; white-space: nowrap; }
.yw .membrane .membrane-k-oil { color: #8c672f; }
.yw .membrane .membrane-k-small { color: var(--ac-green); }
.yw .membrane .membrane-k-hydro { color: var(--ac-blue-dark); }
.yw .membrane .membrane-dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-right: 0.35em; vertical-align: -0.02em; }
.yw .membrane .membrane-dot-oil { background: var(--ac-amber); }
.yw .membrane .membrane-dot-small { background: var(--ac-green); }
.yw .membrane .membrane-dot-hydro { background: var(--ac-blue-dark); box-shadow: 0 0 0 2px var(--ac-paper), 0 0 0 3.5px var(--ac-blue); }

/* スマホ（置き場所が 600 px 未満で JS が membrane-narrow を付ける）：列が 110 px ほどなので字を小さめに */
.yw .widget.membrane.membrane-narrow { padding: 14px 6px 8px; }
.yw .membrane.membrane-narrow .membrane-col { padding: 0 2px; }
.yw .membrane.membrane-narrow .membrane-name { font-size: 15px; }
.yw .membrane.membrane-narrow .membrane-sub { font-size: 12px; }
.yw .membrane.membrane-narrow .membrane-res-txt { font-size: 14px; }
.yw .membrane.membrane-narrow .membrane-col button { font-size: 13px; padding: 3px 6px; }