/* ビジュアル理解：文の書きかえ（transform_movie.js と組）。4階層 = iPhone縦（基本）/ iPhone横 / iPad縦 / iPad横 */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #172033;
  --muted: #657184;
  --line: #d9e0e8;
  --blue: #2463c8;
  --blue-soft: #e8f0ff;
  --green: #16845d;
  --green-soft: #e7f6ef;
  --red: #b72a14;
  --red-soft: #fdecea;
  --amber: #b66b00;
  --amber-soft: #fff3d6;
  --tk-fs: 18px;
  --his-fs: 13px;
  --cap-fs: 17px;
  --btn-h: 50px;
  --btn-fs: 15px;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: var(--ink); cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 9px; }
button:disabled { opacity: .38; cursor: default; }

#tm { max-width: 640px; margin: 0 auto; padding: 10px 10px calc(var(--btn-h) + 34px); }
.tm-head { margin-bottom: 8px; }
.tm-head .vs-nav { margin-bottom: 4px; }
.tm-back { color: var(--muted); text-decoration: none; font-size: 13px; }
.tm-title { margin: 0; font-size: 17px; font-weight: 800; }
.tm-body { display: flex; flex-direction: column; gap: 10px; }
.tm-side { display: contents; }

/* 例文の選択 */
.tm-pick { order: 0; display: flex; gap: 6px; align-items: stretch; }
.tm-sel { flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 15px; font-weight: 700; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
.tm-ex-btn { flex: none; min-width: 44px; min-height: 44px; font-size: 14px; color: var(--muted); }

/* 図 */
/* ポップアップが弾んで大きくなる一瞬に、ページが横に広がらないようにする */
.tm-stage { overflow-x: clip; }
.tm-stage { order: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 32, 51, .07); padding: 12px; }
.tm-capbox { background: var(--panel); }
.tm-cap { display: flex; align-items: baseline; gap: 10px; }
.tm-cap-no { flex: none; font-size: calc(var(--cap-fs) * .66); font-weight: 700; color: var(--muted); }
.tm-cap-text { font-size: var(--cap-fs); font-weight: 800; line-height: 1.4; }
.tm-note { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #f2f5f9; color: #34404f; font-size: calc(var(--cap-fs) * .82); line-height: 1.55; min-height: 2.2em; }

.tm-lines { position: relative; margin-top: 8px; }
.tm-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 4; }
.tm-line { padding: 8px 0; }
.tm-line + .tm-line { border-top: 1px dashed #e1e7ee; }
.tm-kind { display: inline-block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--muted); line-height: 1.3; }
.k-mid .tm-kind { color: var(--amber); }
.k-ok .tm-kind { color: var(--blue); }
.k-done .tm-kind { color: var(--green); }
.tm-rows { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tm-line.his .tm-rows { font-size: var(--his-fs); }
.tm-line.cur .tm-rows { font-size: var(--tk-fs); padding: 1.15em .5em 1.25em; border-radius: 10px; }
.tm-line.cur .tm-row { gap: 1.45em .4em; }
.tm-line.cur .tm-rows { gap: 1.3em; }
.tm-line.cur .tm-row + .tm-row { border-top: 1px dotted #d5dde6; padding-top: .55em; }
.tm-line, .tm-extra { scroll-margin-top: 10px; scroll-margin-bottom: calc(var(--btn-h) + 30px); }
.tm-line.cur.k-orig .tm-rows { background: #fafbfc; outline: 1.5px solid #e1e7ee; }
.tm-line.cur.k-mid .tm-rows { background: repeating-linear-gradient(135deg, #fffaf0 0 12px, #fff5e2 12px 24px); outline: 1.5px dashed #e3b45f; }
.tm-line.cur.k-ok .tm-rows { background: #f6f9ff; outline: 1.5px solid #c8d8f5; }
.tm-line.cur.k-done .tm-rows { background: #f2faf6; outline: 2px solid #9fd3bb; }

/* 語のカード */
.tk { position: relative; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: var(--mono); font-weight: 700; line-height: 1.3; padding: .2em .45em;
  border: 1px solid #b8c3d1; border-radius: 7px; background: #fff; color: #182235; }
.tm-line.cur .tk { box-shadow: 0 3px 10px rgba(23, 32, 51, .08); }
.tm-line.his .tk { border-color: #e0e6ed; background: #fbfcfd; color: #4d5a6b; padding: .12em .35em; }
.tm-line.cur .tk[data-role]::after { content: attr(data-role); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px;
  font: 700 max(11px, .5em)/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.tm-line.cur .tk[data-from]::before { content: attr(data-from); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px;
  font: 700 max(11px, .52em)/1.2 var(--mono); color: var(--red); white-space: nowrap; }
.tk.hl { border-color: var(--blue); background: var(--blue-soft); color: #153f86; }
.tm-line.cur .tk.hl { box-shadow: 0 0 0 2px rgba(36, 99, 200, .32), 0 3px 10px rgba(23, 32, 51, .08); }
.tm-line.cur .tk.hl[data-role]::after { color: #2c5db0; }
.tk.add { border-color: var(--amber); background: var(--amber-soft); color: #7a4a00; }
.tm-line.cur .tk.add[data-role]::after { color: var(--amber); }
.tk.chg { border-color: var(--red); background: var(--red-soft); color: #8f2924; }
.tm-line.cur .tk.chg[data-role]::after { color: var(--red); }
.tk.del { border-style: dashed; opacity: .55; text-decoration: line-through; text-decoration-color: #c2413a; text-decoration-thickness: 2px; }
.tm-line.cur .tk.del { box-shadow: none; }
.tk.opt { border-style: dashed; border-color: #8c99aa; background: transparent; color: #4d5a6b; }
.tm-line.cur .tk.opt { box-shadow: none; }
.tk.dim { color: #93a0b0; border-color: #e3e8ee; }
.tk.wait { visibility: hidden; }
.tk.pop { animation: tmPop .45s ease both; }
@keyframes tmPop { 0% { opacity: 0; transform: translateY(-6px) scale(.9); } 70% { opacity: 1; transform: translateY(0) scale(1.05); } 100% { opacity: 1; transform: none; } }
.tk.del.pop { animation: tmDel .5s ease both; }
@keyframes tmDel { 0% { opacity: 1; transform: scale(1.06); } 100% { opacity: .55; transform: none; } }
.tm-fly { position: absolute; z-index: 6; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-weight: 700; border: 1px solid #9bb7ea; border-radius: 7px; background: var(--blue-soft); color: #153f86;
  box-shadow: 0 10px 22px rgba(23, 32, 51, .18); }

/* 段階の要所のポップアップ（今の行の下・しっぽは注目している語へ） */
.tm-pop-wrap { margin: 2px 0 4px; }
.tm-pop { --pop-bg: var(--blue); position: relative; display: inline-block; max-width: 100%; margin-top: 12px; padding: .42em .95em;
  border-radius: 12px; background: var(--pop-bg); color: #fff; font-weight: 800; font-size: var(--cap-fs); line-height: 1.4;
  box-shadow: 0 8px 18px rgba(23, 32, 51, .2); transform-origin: var(--tail, 50%) -10px;
  animation: tmPopIn .55s cubic-bezier(.2, 1.5, .4, 1) var(--pop-delay, 0s) both; }
.tm-pop::before { content: ""; position: absolute; top: -9px; left: var(--tail, 50%); transform: translateX(-50%);
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--pop-bg); }
.tm-pop.k-ok { --pop-bg: var(--green); }
.tm-pop.k-warn { --pop-bg: var(--red); }
.tm-pop.still { animation: none; }
@keyframes tmPopIn { 0% { opacity: 0; transform: scale(.35); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }

/* 節の枠 */
.grp { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: inherit; padding: .3em .35em; border: 1.5px dashed #9bb7ea; border-radius: 9px; background: rgba(232, 240, 255, .4); }
.tm-line.cur .grp { padding: .9em .45em 1.1em; }
/* 枠のすぐ中に「変わる前の語」の小さなラベルがあるときは、枠の見出しと重ならないよう上を空ける */
.tm-line.cur .grp:has(> .tk[data-from]) { padding-top: 1.75em; }
.grp-label { position: absolute; top: -.1em; left: .55em; font: 700 max(10px, .46em)/1.6 var(--sans); color: #2c5db0; white-space: nowrap; }
.tm-line.his .grp { padding: .15em .25em; border-width: 1px; }
/* 入れ子の枠（名詞のかたまりの中の形容詞節）は色を変える */
.grp .grp { border-color: #e3b45f; background: rgba(255, 243, 214, .55); }
.grp .grp > .grp-label { color: var(--amber); }
.tm-line.his .grp-label { display: none; }

/* 結ぶ線 */
.tm-link { fill: none; stroke-width: 2.2; }
.tm-link.same { stroke: var(--green); }
.tm-link.diff { stroke: var(--red); stroke-dasharray: 6 4; }
.tm-link-label { font: 700 12px var(--sans); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.tm-link-label.same { fill: var(--green); }
.tm-link-label.diff { fill: var(--red); }

/* 訳・時の線・完成文・意味 */
.tm-ja { display: none; margin-top: .5em; font: 600 max(13px, .6em)/1.5 var(--sans); color: var(--muted); }
.show-ja .tm-line.cur .tm-ja { display: block; }
.tm-extra:empty { display: none; }
.tm-extra { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.tm-time { padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.tm-tl { position: relative; height: 70px; margin: 0 6%; }
.tl-axis { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: #c5cfdb; }
.tl-axis::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid #c5cfdb; border-right: 0; }
.tl-dot { position: absolute; top: 26px; width: 0; }
.tl-dot i { position: absolute; left: -9px; top: 0; width: 18px; height: 18px; border-radius: 50%; }
.tl-dot.sub i { border: 3px solid var(--blue); background: #fff; }
.tl-dot.main i { left: -6px; top: 3px; width: 12px; height: 12px; background: var(--ink); }
.tl-dot b { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12px; }
.tl-dot.sub b { bottom: 6px; color: var(--blue); }
.tl-dot.main b { top: 22px; }
.tl-now { position: absolute; right: 0; top: 40px; font-size: 11px; color: var(--muted); }
.tm-tl-text { text-align: center; font-size: calc(var(--cap-fs) * .82); }
.tm-final { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 12px; border-radius: 10px; background: #f2faf6; border: 1px solid #c9e7d8; }
.tm-final-label { font-size: 12px; font-weight: 800; color: var(--green); }
.tm-final-en { font-size: calc(var(--tk-fs) * .82); font-weight: 700; }
.tm-final-en b { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tm-final-ja { flex-basis: 100%; font-size: calc(var(--cap-fs) * .82); color: var(--muted); }
.tm-mean { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); border: 1px solid #f0d49a; }
.tm-mean-label { font-size: 12px; font-weight: 800; color: var(--amber); }
.tm-mean-val { font-size: calc(var(--cap-fs) * 1.05); font-weight: 800; color: #6d4c00; }
.tm-mean-ja { flex-basis: 100%; font-size: calc(var(--cap-fs) * .82); color: #4d5a6b; }

/* 手順の一覧（スマホ・iPad縦は番号だけ） */
.tm-steps { order: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tm-steps button { min-width: 40px; min-height: 40px; padding: 0 8px; border-radius: 999px; font-weight: 800; color: var(--muted); }
.tm-steps span { display: none; }
.tm-steps li.done button { background: var(--blue-soft); border-color: #c8d8f5; color: #2c5db0; }
.tm-steps li.on button { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 操作（スマホ・iPad縦は画面の下に固定） */
.tm-ctrl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr 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); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tm-ctrl button { min-height: var(--btn-h); font-size: var(--btn-fs); font-weight: 700; padding: 4px 6px; }
.tm-ctrl .tm-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
#tmPlay.on { background: var(--amber-soft); border-color: var(--amber); color: #7a4a00; }
.tm-toggle.on { background: var(--blue-soft); border-color: var(--blue); color: #153f86; }
.tm-ja-long { display: none; }

/* ===== iPhone 横：図(左)＋操作(右)で1画面 ===== */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --tk-fs: 17px; --his-fs: 12px; --cap-fs: 15px; --btn-h: 40px; --btn-fs: 13px; }
  #tm { max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  .tm-head { margin-bottom: 4px; }
  .tm-title { font-size: 14px; }
  .tm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 8px; }
  .tm-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
  .tm-stage { order: 0; min-height: 0; overflow: auto; padding: 0 10px 8px; }
  .tm-capbox { position: sticky; top: 0; z-index: 7; padding: 8px 0 6px; box-shadow: 0 6px 8px -8px rgba(23, 32, 51, .25); }
  .tm-line, .tm-extra { scroll-margin-top: 5.5em; scroll-margin-bottom: 8px; }
  .tm-ja-long { display: inline; }
  .tm-sel { min-height: 38px; font-size: 13px; }
  .tm-ex-btn { min-width: 36px; min-height: 38px; }
  .tm-steps button { min-width: 32px; min-height: 32px; font-size: 13px; }
  .tm-ctrl { position: static; grid-template-columns: 1fr 1fr; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tm-ctrl .tm-primary { grid-column: span 2; }
}

/* ===== iPad 共通（文字・ボタンの大きさ） ===== */
@media (min-width: 768px) and (min-height: 600px) {
  :root { --tk-fs: 26px; --his-fs: 17px; --cap-fs: 23px; --btn-h: 72px; --btn-fs: 17px; }
  .tm-back { font-size: 15px; }
  .tm-ja-long { display: inline; }
  .tm-title { font-size: 22px; }
  .tm-sel { min-height: 52px; font-size: 17px; }
  .tm-ex-btn { min-width: 56px; min-height: 52px; font-size: 16px; }
  .tm-kind { font-size: 13px; }
  .tm-link-label { font-size: 14px; }
  .tl-dot b, .tm-final-label, .tm-mean-label { font-size: 14px; }
  .tl-now { font-size: 13px; }
  .tm-line { display: grid; grid-template-columns: 6.2em 1fr; gap: 12px; align-items: start; }
  .tm-kind { margin: 0; padding-top: .45em; text-align: right; }
  .tm-line.cur .tm-kind { padding-top: 1.4em; }
  .tm-pop-wrap { grid-column: 2; }
}

/* ===== iPad 縦：列 880px・操作は下に固定 ===== */
@media (min-width: 768px) and (min-height: 600px) and (orientation: portrait) {
  #tm { max-width: 880px; padding: 18px 20px calc(var(--btn-h) + 40px); }
  .tm-body { gap: 14px; }
  .tm-stage { padding: 18px 22px; }
  .tm-steps button { min-width: 52px; min-height: 52px; font-size: 18px; }
  .tm-ctrl { gap: 10px; padding: 10px max(20px, calc((100vw - 880px) / 2 + 20px)) calc(10px + env(safe-area-inset-bottom)); }
}

/* ===== iPad 横：図(左)＋例文・手順・操作(右)の2ペイン・縦スクロールなし ===== */
@media (min-width: 1000px) and (min-height: 600px) and (orientation: landscape) {
  :root { --tk-fs: 28px; }
  #tm { max-width: 1240px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 14px 22px; }
  .tm-head { margin-bottom: 10px; }
  .tm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
  .tm-stage { order: 0; min-height: 0; overflow: auto; padding: 0 26px 20px; }
  .tm-capbox { position: sticky; top: 0; z-index: 7; padding: 20px 0 8px; box-shadow: 0 6px 8px -8px rgba(23, 32, 51, .25); }
  .tm-line, .tm-extra { scroll-margin-top: 7em; scroll-margin-bottom: 12px; }
  .tm-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .tm-steps { flex: 1; min-height: 0; overflow: auto; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .tm-steps button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; border-radius: 10px; text-align: left; font-size: 15px; font-weight: 700; color: #3a4658; }
  .tm-steps b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef2f7; color: var(--muted); font-size: 14px; }
  .tm-steps span { display: inline; line-height: 1.35; }
  .tm-steps li.done button { background: #fff; border-color: var(--line); color: #3a4658; }
  .tm-steps li.done b { background: var(--blue-soft); color: #2c5db0; }
  .tm-steps li.on button { background: var(--blue-soft); border-color: var(--blue); color: #153f86; }
  .tm-steps li.on b { background: var(--blue); color: #fff; }
  .tm-ctrl { position: static; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tm-ctrl .tm-primary { grid-column: span 2; }
}