/* yamlab.jp 用の写し（2026-10-21）。元は応用化学概論のスライドのテーマ slides/theme/applchem.css の .logp …（log P 計算アプリ、widgets/logp.js）。
 * 共通の枠・ボタン・札は yw.css（.yw）にある。単独ページ public/iac/logp.html は自分の中に CSS を持つ（.yw の外なので、ここは効かない）。
 * スライドでは［構造式｜log P の値・目盛り／二層の絵］の 2 列だったのを、サイトでは
 *   広い（置き場所 600 px 以上。本文 736 px）：［構造式｜log P の値／二層の絵］／［目盛り（全幅。JS が横 680 で作る）］／［操作］
 *   せまい（600 px 未満、JS が logp-narrow）：1 列。目盛りは JS が横 340 で作り直す。書き換えのボタンは 1 列
 * 字の大きさは em（.yw の 26px、スマホでは 24px が基準） */
.yw .widget.logp { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "mol right" "mol beaker" "scale scale" "ctrl ctrl"; gap: 0.2em 1.2em; align-items: start; border-radius: 0.8em; padding: 0.6em 0.9em 0.45em; 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.5; }
.yw .logp .logp-loading { grid-column: 1 / -1; font-size: 0.65em; color: var(--ac-mute); text-align: center; padding: 2em 0; }

/* 構造式・名前・いま変えたところ */
.yw .logp .logp-mol { grid-area: mol; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.yw .logp .logp-mol > div:first-child { width: 100%; }
.yw .logp .logp-mol svg { display: block; width: 100%; height: auto; max-height: 240px; }
.yw .logp[data-mode="presets"] .logp-mol svg { max-height: 220px; }
.yw .logp .logp-name { font-family: var(--ac-round); font-size: 0.78em; font-weight: 700; color: var(--ac-navy); text-align: center; min-height: 1.5em; line-height: 1.4; }
.yw .logp .logp-chg { min-height: 1.5em; margin-top: 0.15em; font-size: 0.6em; color: var(--ac-ink); text-align: center; line-height: 1.5; }
.yw .logp .logp-chg .logp-chg-tag { display: inline-block; font-weight: 700; color: #fff; background: var(--ac-rose); border-radius: 1em; padding: 0 0.7em; margin-right: 0.3em; }
.yw .logp .logp-chg b { font-family: var(--ac-round); font-weight: 900; font-size: 1.25em; }
.yw .logp .logp-chg b.up { color: var(--ac-amber); }
.yw .logp .logp-chg b.down { color: var(--ac-blue-dark); }
.yw .logp .logp-chg .logp-chg-hint { color: var(--ac-mute); }

/* log P の値と二層の絵（右の欄。2 つで縦のまん中に寄せる） */
.yw .logp .logp-right { grid-area: right; align-self: end; min-width: 0; }
.yw .logp .logp-val { display: flex; align-items: baseline; gap: 0.4em; font-size: 0.7em; color: var(--ac-mute); }
.yw .logp .logp-val b { font-family: var(--ac-round); font-weight: 900; font-size: 2.3em; color: var(--ac-navy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; }
.yw .logp .logp-beaker { grid-area: beaker; align-self: start; min-width: 0; display: flex; gap: 0.6em; align-items: center; }
.yw .logp .logp-beaker svg { display: block; flex: 0 0 45%; width: 45%; height: auto; }
.yw .logp .logp-beaker p { font-size: 0.6em; margin: 0; line-height: 1.5; min-width: 0; }
.yw .logp .logp-beaker p b { white-space: nowrap; }

/* 目盛り（全幅） */
.yw .logp .logp-scale { grid-area: scale; min-width: 0; margin-top: 0.1em; }
.yw .logp .logp-scale svg { display: block; width: 100%; height: auto; }

/* 操作 */
.yw .logp .logp-ctrl { grid-area: ctrl; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.25em 0.35em; align-items: center; border-top: 1.5px dashed var(--ac-blue-soft); padding-top: 0.4em; }
.yw .logp .logp-ctrl .lab { font-size: 0.55em; font-weight: 700; color: var(--ac-mute); margin-right: 0.2em; }
.yw .logp .logp-ctrl input[type=text] { font: inherit; font-size: 0.6em; padding: 0.15em 0.5em; border: 2px solid var(--ac-blue-soft); border-radius: 0.5em; flex: 1 1 12em; min-width: 0; max-width: 22em; box-sizing: border-box; }
.yw .logp .logp-msg { flex-basis: 100%; font-size: 0.55em; color: var(--ac-rose-dark); min-height: 1.4em; }
.yw .logp .logp-msg:empty { display: none; }
/* 書き換えの 4 つは 2 列（1 行目にラベル）。「元に戻す」は右に */
.yw .logp[data-mode="design"] .logp-ctrl .lab { flex-basis: 100%; }
.yw .widget.logp button.logp-mod { flex: 1 1 calc(50% - 0.35em); min-width: 0; text-align: left; }
.yw .widget.logp button.logp-reset { margin-left: auto; }

/* スマホ（置き場所 600 px 未満で JS が logp-narrow）：1 列 */
.yw .widget.logp.logp-narrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mol" "right" "beaker" "scale" "ctrl"; gap: 0.15em 0; padding: 14px 10px 8px; }
.yw .logp.logp-narrow .logp-mol svg { max-height: 220px; }
.yw .logp.logp-narrow[data-mode="presets"] .logp-mol svg { max-height: 190px; }
.yw .logp.logp-narrow .logp-right { align-self: auto; margin-top: 0.1em; }
.yw .logp.logp-narrow .logp-val { justify-content: center; }
.yw .logp.logp-narrow .logp-beaker { justify-content: center; }
.yw .logp.logp-narrow .logp-beaker svg { flex-basis: 44%; width: 44%; max-width: 170px; }
.yw .logp.logp-narrow .logp-scale svg { max-width: 420px; margin: 0 auto; }   /* 横 340 の目盛りを、横向きのスマホで大きくしすぎない */
.yw .logp.logp-narrow .logp-beaker p { font-size: 0.62em; }
.yw .logp.logp-narrow .logp-ctrl .lab { flex-basis: 100%; font-size: 0.58em; }
.yw .widget.logp.logp-narrow button.logp-mod { flex-basis: 100%; }
.yw .logp.logp-narrow .logp-ctrl input[type=text] { font-size: 16px; max-width: none; }   /* 16 px 未満だと iPhone が拡大する */