/* ビジュアル理解の共通の枠（上の帯・図と操作の並べ方・ボタン）。各ページの図の見た目は各ページの CSS。
   4階層 = iPhone縦（基本）/ iPhone横 / iPad縦 / iPad横。
   <main class="vs"><div id="vsNav"></div><div class="vs-body"><section class="vs-stage">図</section>
   <aside class="vs-side"><div class="vs-opts">条件</div><div class="vs-ctrl">ボタン</div></aside></div></main> */
:root {
  --vs-btn-h: 50px;
  --vs-btn-fs: 15px;
  --vs-chip-h: 42px;
  --vs-chip-fs: 15px;
}
main.vs { max-width: 640px; margin: 0 auto; padding: 10px 10px calc(var(--vs-btn-h) + 34px); }

/* 上の帯 */
.vs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.vs-nav-back { color: var(--muted, #657184); text-decoration: none; font-size: 13px; white-space: nowrap; }
.vs-nav-back:hover, .vs-nav-next:hover { color: var(--blue, #2463c8); }
.vs-nav-list li { flex: none; }
.vs-nav-list { order: 3; flex-basis: 100%; display: flex; gap: 6px; list-style: none; margin: 0; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: thin; }
.vs-nav-list a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line, #d9e0e8); border-radius: 999px; background: #fff; color: #3a4658; text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vs-nav-list b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #eef2f7; color: var(--muted, #657184); font-size: 11px; }
.vs-nav-list li.vs-on a { border-color: var(--blue, #2463c8); background: var(--blue-soft, #e8f0ff); color: #153f86; }
.vs-nav-list li.vs-on b { background: var(--blue, #2463c8); color: #fff; }
.vs-nav-next { margin-left: auto; color: var(--blue, #2463c8); text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* 並べ方 */
.vs-body { display: flex; flex-direction: column; gap: 10px; }
.vs-side { display: contents; }
.vs-stage { order: 1; min-width: 0; }
.vs-opts { order: 2; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line, #d9e0e8); border-radius: 8px; background: #fff; }
.vs-opts:empty { display: none; }
.vs-group-title { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--muted, #657184); }
.vs-group-title small { font-weight: 600; margin-left: 6px; }
.vs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 見えない input（position:absolute）が条件の枠の外に出てページを伸ばさないよう、枠とチップを基準にする */
.vs-opts { position: relative; }
.vs-opts .chip, .vs-opts .choice-chip { position: relative; min-height: var(--vs-chip-h); font-size: var(--vs-chip-fs); padding: 0 12px; width: auto; min-width: 0; }
.vs-opts select, .vs-opts input[type="text"] { min-height: var(--vs-chip-h); font-size: var(--vs-chip-fs); }
.vs-opts .select-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vs-opts .scenario-select { flex: 1; min-width: 0; }

/* ボタン（スマホ・iPad縦は画面の下に固定） */
.vs-ctrl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  padding: 8px max(10px, calc((100vw - 640px) / 2 + 10px)) calc(8px + env(safe-area-inset-bottom));
  background: rgba(244, 246, 248, .96); border-top: 1px solid var(--line, #d9e0e8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vs-ctrl button { min-height: var(--vs-btn-h); font-size: var(--vs-btn-fs); font-weight: 700; padding: 4px 6px; border-radius: 9px; }
.vs-ctrl .vs-primary { grid-column: span 2; border-color: var(--blue, #2463c8); background: var(--blue, #2463c8); color: #fff; }
.vs-ctrl .vs-primary:hover { background: #1e55ad; }
.vs-ctrl .vs-toggle.on, .vs-ctrl button.active { border-color: var(--blue, #2463c8); background: var(--blue-soft, #e8f0ff); color: #153f86; }
/* 狭いスマホでは記号と長い言い方を省く（「◀ 戻る」→「戻る」、「日本語訳」→「訳」） */
@media (max-width: 480px) { .vs-ico, .vs-long { display: none; } }
.vs-ctrl .vs-play.on { border-color: var(--amber, #b66b00); background: var(--amber-soft, #fff3d6); color: #7a4a00; }

/* ===== iPhone 横：図(左)＋条件・ボタン(右) ===== */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --vs-btn-h: 38px; --vs-btn-fs: 13px; --vs-chip-h: 34px; --vs-chip-fs: 13px; }
  main.vs { max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 4px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  .vs-nav { margin-bottom: 4px; flex-wrap: nowrap; }
  .vs-nav-list { order: 0; flex: 1; flex-basis: auto; min-width: 0; }
  .vs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 8px; }
  .vs-stage { order: 0; min-height: 0; overflow: auto; }
  .vs-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .vs-opts { order: 0; flex: 1; min-height: 0; overflow: auto; padding: 8px; gap: 8px; }
  .vs-ctrl { order: 1; }
  .vs-ctrl { position: static; grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===== iPad 共通（文字・ボタンの大きさ） ===== */
@media (min-width: 768px) and (min-height: 600px) {
  :root { --vs-btn-h: 72px; --vs-btn-fs: 17px; --vs-chip-h: 52px; --vs-chip-fs: 17px; }
  .vs-nav-back, .vs-nav-next { font-size: 15px; }
  .vs-nav-list a { font-size: 14px; padding: 7px 12px; }
  .vs-nav-list b { width: 22px; height: 22px; font-size: 12px; }
  .vs-group-title { font-size: 14px; }
  .vs-opts { padding: 16px; gap: 14px; }
}

/* ===== iPad 縦：列 880px・ボタンは下に固定 ===== */
@media (min-width: 768px) and (min-height: 600px) and (orientation: portrait) {
  main.vs { max-width: 880px; padding: 16px 20px calc(var(--vs-btn-h) + 40px); }
  .vs-body { gap: 14px; }
  .vs-ctrl { gap: 10px; padding: 10px max(20px, calc((100vw - 880px) / 2 + 20px)) calc(10px + env(safe-area-inset-bottom)); }
}

/* ===== iPad 横：図(左)＋条件・ボタン(右)・ページは縦にスクロールしない ===== */
@media (min-width: 1000px) and (min-height: 600px) and (orientation: landscape) {
  main.vs { max-width: 1240px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 12px 22px 14px; }
  .vs-nav { flex-wrap: nowrap; margin-bottom: 10px; }
  .vs-nav-list { order: 0; flex: 1; flex-basis: auto; min-width: 0; }
  .vs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
  .vs-stage { order: 0; min-height: 0; overflow: auto; }
  .vs-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .vs-opts { order: 0; flex: 1; min-height: 0; overflow: auto; }
  .vs-ctrl { order: 1; }
  .vs-ctrl { position: static; grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 8px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}