/* yamlab.jp 用の写し（2026-10-21）。元は応用化学概論のスライドの slides/widgets/partition.css。
 * 分配係数 log P の定義を体験する動く図（widgets/partition.js）。共通の枠・ボタン・札は yw.css（.yw）にある。
 * スライドでは「分液ろうと｜計算の欄」を横に並べた全体 1127 px だったのを、サイトでは
 *   広い（置き場所 700 px 以上。本文 736 px）：上の段に［分液ろうと 440×300｜油と水の数・ヒント］、その下に計算の式・目盛り・操作を全幅
 *   中くらい（600〜700 px、JS が pt-stack）：数の札を分液ろうとの下に横 2 つ
 *   せまい（600 px 未満、JS が pt-narrow と pt-stack）：1 列。式は折り返し、物質のボタンは 2×2、目盛りは横 340 で作り直す
 * 字の大きさは px（スライドと同じ値を基本に、せまいときは少し小さく） */
.yw .widget.partition { box-sizing: border-box; width: 100%; padding: 14px 14px 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.35; }

/* 上の段：grid で並べる */
.yw .partition .pt-top { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "fig side" "calc calc" "scale scale"; gap: 4px 18px; align-items: center; }
.yw .partition .pt-left { grid-area: fig; width: 440px; max-width: 100%; }
.yw .partition .pt-canvas { display: block; margin: 0 auto; }
.yw .partition .pt-shake-row { width: 70.45%; text-align: center; margin-top: 4px; }   /* 310 / 440：ろうとの真下 */
.yw .widget.partition button.pt-shake { font-size: 20px; padding: 2px 26px; background: var(--ac-rose); border-color: var(--ac-rose); color: #fff; }
.yw .widget.partition button.pt-shake:hover { background: var(--ac-rose-dark); border-color: var(--ac-rose-dark); }
.yw .partition.pt-busy button.pt-shake { opacity: 0.6; }

/* 分液ろうとの右：油と水の数・ヒント */
.yw .partition .pt-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.yw .partition .pt-counts { display: flex; flex-direction: column; gap: 10px; }
.yw .partition .pt-chip { flex: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 6px 12px 20px; border-radius: 12px; font-family: var(--ac-round); font-weight: 700; height: 76px; box-sizing: border-box; align-content: flex-start; position: relative; }
.yw .partition .pt-oil { background: var(--ac-amber-pale); color: #9a6c27; }
.yw .partition .pt-water { background: var(--ac-blue-pale); color: var(--ac-blue-dark); }
.yw .partition .pt-k { font-size: 20px; }
.yw .partition .pt-n { font-size: 40px; font-weight: 900; line-height: 1.1; min-width: 1.3em; text-align: right; font-variant-numeric: tabular-nums; }
.yw .partition .pt-u { font-size: 20px; }
.yw .partition .pt-note { position: absolute; left: 12px; bottom: 4px; font-size: 14px; line-height: 1.2; }
.yw .partition .pt-note:empty { display: none; }
.yw .partition .pt-hint { align-self: flex-start; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--ac-navy); background: var(--ac-rose-pale); border-radius: 8px; padding: 3px 12px; }
.yw .partition .pt-hint span { display: inline-block; white-space: nowrap; }

/* 下：計算の式 */
.yw .partition .pt-panel { grid-area: calc; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 8px 4px 0; border-top: 1.5px dashed var(--ac-blue-pale); }
.yw .partition .pt-eq { display: flex; align-items: baseline; gap: 0 10px; font-family: var(--ac-round); font-weight: 700; font-size: 26px; color: var(--ac-navy); white-space: nowrap; }
.yw .partition .pt-sym { color: var(--ac-navy); }
.yw .partition .pt-op { color: var(--ac-mute); }
.yw .partition .pt-word { color: var(--ac-ink); }
.yw .partition .pt-mid { font-variant-numeric: tabular-nums; color: var(--ac-ink); }
.yw .partition .pt-res { font-size: 38px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.yw .partition .pt-res-p { color: var(--ac-navy); }
.yw .partition .pt-res-l { color: var(--ac-rose-dark); }
.yw .partition.pt-busy .pt-res, .yw .partition.pt-busy .pt-mid { color: var(--ac-mute); }
.yw .partition .pt-msg { font-size: 15px; font-weight: 700; color: var(--ac-mute); min-height: 20px; line-height: 1.35; }
.yw .partition .pt-msg-busy { color: var(--ac-rose); }

/* 目盛り（JS が横 700 または 340 で作る。枠の幅いっぱいに伸ばす） */
.yw .partition .pt-scale-box { grid-area: scale; min-width: 0; }
.yw .partition .pt-scale { display: block; width: 100%; height: auto; overflow: visible; }
.yw .partition .pt-marker { transition: transform 0.45s ease, opacity 0.3s; }
.yw .partition.pt-busy .pt-marker { opacity: 0.3; }

/* 操作の段：［実測の目安｜ボタン 4 つ］／［log P のつまみ］ */
.yw .partition .pt-ctrl { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; gap: 7px; margin-top: 6px; padding-top: 8px; border-top: 1.5px dashed var(--ac-blue-pale); }
.yw .partition .pt-lab { font-size: 16px; font-weight: 700; color: var(--ac-mute); white-space: nowrap; }
.yw .widget.partition button.pt-preset { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; font-size: 16px; padding: 2px 4px; line-height: 1.3; }
.yw .partition .pt-pn { white-space: nowrap; }
.yw .partition .pt-pv { font-size: 0.9em; color: var(--ac-mute); font-variant-numeric: tabular-nums; }
.yw .partition button.pt-preset.on .pt-pv { color: #fff; }
.yw .partition .pt-range { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 2px; }
.yw .partition .pt-lab-lp { color: var(--ac-navy); font-size: 18px; }
.yw .partition .pt-sval { font-family: var(--ac-round); font-weight: 900; font-size: 22px; color: var(--ac-rose-dark); min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.yw .partition input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 80px; height: 12px; margin: 0; border-radius: 6px; background: linear-gradient(to right, var(--ac-blue), var(--ac-amber)); cursor: pointer; }
.yw .partition input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--ac-navy); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.yw .partition input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--ac-navy); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

/* 中くらい（置き場所 700 px 未満で JS が pt-stack）：数の札を分液ろうとの下に横 2 つ、ヒントは目盛りの下 */
.yw .partition.pt-stack .pt-top { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.yw .partition.pt-stack .pt-left { width: 440px; max-width: 100%; margin: 0 auto; order: 1; }
.yw .partition.pt-stack .pt-side { display: contents; }
.yw .partition.pt-stack .pt-counts { order: 2; flex-direction: row; gap: 8px; }
.yw .partition.pt-stack .pt-panel { order: 3; }
.yw .partition.pt-stack .pt-scale-box { order: 4; }
.yw .partition.pt-stack .pt-hint { order: 5; align-self: center; text-align: center; }

/* スマホ（置き場所 600 px 未満で JS が pt-narrow）：1 列。字を少し小さくし、式は折り返す */
.yw .widget.partition.pt-narrow { padding: 14px 8px 8px; }
.yw .partition.pt-narrow .pt-left { width: 100%; }
.yw .partition.pt-narrow .pt-shake-row { margin-top: 2px; }
.yw .widget.partition.pt-narrow button.pt-shake { font-size: 18px; padding: 2px 22px; }
.yw .partition.pt-narrow .pt-chip { height: auto; min-height: 0; padding: 4px 10px 6px; gap: 0 5px; }
.yw .partition.pt-narrow .pt-k { flex-basis: 100%; font-size: 15px; }
.yw .partition.pt-narrow .pt-n { font-size: 30px; }
.yw .partition.pt-narrow .pt-u { font-size: 15px; }
.yw .partition.pt-narrow .pt-note { position: static; flex-basis: 100%; font-size: 12px; }
.yw .partition.pt-narrow .pt-panel { margin-top: 2px; padding: 6px 2px 0; }
.yw .partition.pt-narrow .pt-eq { flex-wrap: wrap; white-space: normal; gap: 0 7px; font-size: 19px; }
.yw .partition.pt-narrow .pt-res { font-size: 28px; }
.yw .partition.pt-narrow .pt-msg { font-size: 13px; min-height: 18px; }
.yw .partition.pt-narrow .pt-hint { font-size: 14px; padding: 3px 10px; }
.yw .partition.pt-narrow .pt-scale { max-width: 420px; margin: 0 auto; }   /* 横 340 の目盛りを、横向きのスマホで大きくしすぎない */
.yw .partition.pt-narrow .pt-ctrl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.yw .partition.pt-narrow .pt-ctrl > .pt-lab { grid-column: 1 / -1; font-size: 14px; }
.yw .widget.partition.pt-narrow button.pt-preset { font-size: 15px; padding: 3px 4px; }
.yw .partition.pt-narrow .pt-lab-lp { font-size: 16px; }
.yw .partition.pt-narrow .pt-sval { font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .yw .partition .pt-marker { transition: none; } }