/* 薬の候補をしぼりこむ動く図（public/widgets/screen.js）。yamlab.jp 用の写し（2026-10-21）。元は slides/widgets/screen.css。
 * スライドの section .screen … を .yw .screen … に置きかえた。字の大きさは px（スライドと同じ値）。
 * virtual：本文 736 px では canvas 720×392 がほぼ等倍。置き場所が 600 px 未満なら、JS が root に screen-narrow を付けて
 * canvas を 330×384 に組みかえる。ボタンと説明の文は canvas の下（スマホでは 2 段） */
.yw .widget.screen { box-sizing: border-box; width: 738px; max-width: 100%; padding: 12px 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 .screen .screen-canvas { display: block; margin: 0 auto; }
.yw .screen .screen-foot,
.yw .screen .screen-ctrl { display: flex; align-items: center; gap: 6px 12px; margin-top: 8px; min-height: 34px; padding: 0 4px; }
.yw .screen .screen-foot { justify-content: space-between; }
.yw .screen .screen-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.yw .screen .screen-ctrl button,
.yw .screen .screen-foot button { font-size: 16px; padding: 4px 14px; white-space: nowrap; }
.yw .screen .screen-ph { display: inline-block; }
.yw .screen .screen-src { font-size: 13px; color: var(--ac-mute); line-height: 1.4; }
.yw .screen .screen-cap { flex: 1; min-width: 0; text-align: right; font-family: var(--ac-round); font-weight: 700; font-size: 17px; color: var(--ac-navy); line-height: 1.35; }

/* スマホ（置き場所が 600 px 未満で JS が screen-narrow を付ける）：ボタンを上、説明の文を下に */
.yw .widget.screen.screen-narrow { padding: 12px 6px 8px; }
.yw .screen.screen-narrow .screen-ctrl { flex-direction: column; align-items: stretch; gap: 6px; }
.yw .screen.screen-narrow .screen-btns button { flex: 1; }
.yw .screen.screen-narrow .screen-cap { text-align: center; font-size: 15px; }
@media (max-width: 600px) {
  .yw .screen .screen-foot { flex-wrap: wrap; }
}