/* yamlab.jp 用の写し（2026-10-21）。元は応用化学概論のスライドの slides/widgets/mol3d.css。
 * 立体の分子（widgets/mol3d.js）。スライドでは canvas 1 枚（横 1100）に 2 つの分子を並べ、下に名札の段を置いていた。
 * サイトでは分子ごとに枠（.mol3d-pane：canvas ＋ 名札、うすい色の地）を作る。本文 736 px では 2 つを横に並べ（canvas 約 351 px、等倍）、
 * 置き場所が 600 px 未満（スマホ）なら JS が root に mol3d-narrow を付けて縦に重ねる。色の見本・ボタン・①〜④ は枠の下。
 * セレクタは .yw .widget.mol3d …（yw.css の .yw .widget button より強くするため）。字の大きさは px（スライドと同じ値） */
.yw .widget.mol3d {
  box-sizing: border-box; width: 100%; max-width: 900px; padding: 14px 10px 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;
}

/* 分子ごとの枠。地の色はスライドの canvas の地と同じ（--ac-blue-pale を 55%、diff は rose・amber の pale を 75%、白に重ねた色） */
.yw .mol3d .mol3d-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.yw .mol3d .mol3d-pane { min-width: 0; border-radius: 18px; background: #f2f8fb; padding-bottom: 7px; }
.yw .mol3d.mol3d-diff .mol3d-pane0 { background: #fcf0f4; }
.yw .mol3d.mol3d-diff .mol3d-pane1 { background: #faf4ee; }
/* 指で縦になぞるとページがスクロールし、横になぞると分子が回る（pan-y） */
.yw .mol3d .mol3d-canvas {
  display: block; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; border-radius: 18px 18px 0 0;
}
.yw .mol3d .mol3d-canvas.mol3d-grab { cursor: grabbing; }

/* 名札（canvas の下） */
.yw .mol3d .mol3d-lab { text-align: center; min-width: 0; padding: 0 6px; }
.yw .mol3d .mol3d-name { font-family: var(--ac-round); font-weight: 900; font-size: 24px; line-height: 1.25; color: var(--ac-navy); }
.yw .mol3d .mol3d-sub { display: inline-block; font-family: inherit; font-weight: 700; font-size: 16px; color: var(--ac-mute); margin-left: 0.5em; white-space: nowrap; }

/* 色の見本とボタン */
.yw .mol3d .mol3d-row2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; margin-top: 9px; }
.yw .mol3d .mol3d-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--ac-ink); }
.yw .mol3d .mol3d-leg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.yw .mol3d .mol3d-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; }
.yw .mol3d .mol3d-leg-C .mol3d-dot { background: radial-gradient(circle at 34% 30%, #e3e6e9, #8a9199 70%, #565a5f); }
.yw .mol3d .mol3d-leg-O .mol3d-dot { background: radial-gradient(circle at 34% 30%, #fadad7, #e0453a 70%, #8b2b24); }
.yw .mol3d .mol3d-leg-N .mol3d-dot { background: radial-gradient(circle at 34% 30%, #d9e2f6, #3f6fd1 70%, #274582); }
.yw .mol3d .mol3d-leg-H .mol3d-dot { background: radial-gradient(circle at 34% 30%, #fff, #e4e9ed 75%, #b0bac3); box-shadow: 0 0 0 1px rgba(104,116,128,0.55); }
.yw .mol3d .mol3d-ctrl { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.yw .mol3d .mol3d-ctrl:empty { display: none; }
.yw .widget.mol3d button { font-size: 16px; padding: 4px 12px; line-height: 1.4; white-space: nowrap; }

/* hydration：くっついた水の数 */
.yw .mol3d .mol3d-count { font-size: 18px; font-weight: 700; color: var(--ac-navy); line-height: 1.3; }
.yw .mol3d .mol3d-count b { font-family: var(--ac-round); font-weight: 900; font-size: 24px; color: var(--ac-blue-dark); font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.2em; }
.yw .mol3d .mol3d-verdict { font-size: 16px; font-weight: 900; line-height: 1.3; min-height: 1.3em; }
.yw .mol3d .mol3d-verdict.good { color: var(--ac-green); }
.yw .mol3d .mol3d-verdict.bad { color: var(--ac-amber); }

/* diff：log P と飲み方、改良のボタン、説明 */
.yw .mol3d .mol3d-logp { font-size: 18px; font-weight: 700; color: var(--ac-ink); line-height: 1.35; }
.yw .mol3d .mol3d-logp b { font-family: var(--ac-round); font-weight: 900; font-size: 24px; }
.yw .mol3d .mol3d-logp0 b { color: var(--ac-rose-dark); }
.yw .mol3d .mol3d-logp1 b { color: var(--ac-amber); }
.yw .mol3d .mol3d-route { display: inline-block; margin-left: 0.6em; font-size: 15px; padding: 0 0.7em; border-radius: 1em; vertical-align: 2px; }
.yw .mol3d .mol3d-logp0 .mol3d-route { background: var(--ac-rose-pale); color: var(--ac-rose-dark); box-shadow: inset 0 0 0 1.5px var(--ac-rose); }
.yw .mol3d .mol3d-logp1 .mol3d-route { background: var(--ac-amber-pale); color: #8a6020; box-shadow: inset 0 0 0 1.5px var(--ac-amber); }
.yw .mol3d .mol3d-chips { display: flex; flex-wrap: wrap; gap: 6px; row-gap: 6px; justify-content: center; align-items: center; margin-top: 8px; }
.yw .widget.mol3d button.mol3d-chip { color: var(--ac-rose-dark); padding: 4px 10px; }
.yw .widget.mol3d button.mol3d-chip.on { background: var(--ac-rose); border-color: var(--ac-rose); color: #fff; }
.yw .mol3d .mol3d-caprow { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; align-items: center; margin-top: 8px; }
.yw .mol3d .mol3d-cap {
  font-family: var(--ac-round); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--ac-rose-dark);
  background: var(--ac-rose-pale); border-radius: 10px; padding: 3px 12px; text-align: center;
}
.yw .mol3d .mol3d-note { font-size: 16px; font-weight: 900; color: var(--ac-green); text-align: center; }

/* スマホ（置き場所が 600 px 未満で JS が mol3d-narrow を付ける）：2 つの枠を縦に重ね、ボタンは押しやすく大きめに */
.yw .widget.mol3d.mol3d-narrow { padding: 14px 6px 8px; }
.yw .mol3d.mol3d-narrow .mol3d-panes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.yw .mol3d.mol3d-narrow .mol3d-name { font-size: 22px; }
.yw .mol3d.mol3d-narrow .mol3d-row2 { flex-direction: column; gap: 6px; }
.yw .widget.mol3d.mol3d-narrow button { padding: 6px 12px; }
.yw .widget.mol3d.mol3d-narrow button.mol3d-chip { padding: 6px 10px; }
.yw .mol3d.mol3d-narrow .mol3d-caprow { flex-direction: column; }
/* 説明は、文の途中ではなく空白のところで折り返す */
.yw .mol3d.mol3d-narrow .mol3d-cap, .yw .mol3d.mol3d-narrow .mol3d-note { word-break: keep-all; overflow-wrap: anywhere; }
.yw .mol3d.mol3d-narrow .mol3d-cap { font-size: 17px; }