/* ============================================================
   ANZAS v2 — figures.css
   研究カードと図(inc/figures.php の av2_gx_figure())の装飾。
   新コース(/course/global-experience/)と「3ヶ月で英語を身につけるために」(/three-months/)で共用する。
   共通シャーシ(pages.css)の後、ページ専用 CSS の前に読み込む(inc/figures.php の av2_enqueue_figures())。
   クラス名の gx は、最初に図を載せた新コースのページ(global-experience)に由来する。
   BP: 900 / 560(共通シャーシと共通部品に合わせる)
   ============================================================ */

/* カードの見出しは h3。theme.json の h3 と同じ大きさなので、UA の margin だけ消す。
   研究カードの見出し(.av2-gx-ev h3)の margin-top と同じ詳細度なので、その前(ここ)に置く。 */
.av2-main h3.av2-box__title { margin: 0; }
/* ---------- 図表の共通(キャプション) ---------- */

.av2-gx-fig { margin: 20px 0 18px; }
.av2-gx-fig__cap { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--av2-cap); word-break: auto-phrase; text-wrap: balance; }
/* キャプションの <span> は折り返しの単位(Safari でも語の途中で割らない)。 */
.av2-gx-fig__cap > span { display: inline-block; }

/* ---------- 02 研究でわかっていること ─ 研究 4 本(図つき)・まとめの表・出典 ---------- */

.av2-gx-ev-grid { margin-top: 56px; }
.av2-gx-ev { display: flex; flex-direction: column; padding: 28px 28px 24px; }
.av2-gx-ev__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.av2-gx-ev__no { font-family: var(--av2-en); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--av2-brand); }
.av2-gx-ev__when { padding: 5px 11px; border-radius: 999px; background: var(--av2-yellow); font-size: 11px; font-weight: 700; line-height: 1; color: var(--av2-ink); }
.av2-gx-ev h3.av2-box__title { margin-top: 14px; font-size: 18px; line-height: 1.6; }
.av2-gx-ev .av2-box__text { margin-top: 0; font-size: 14px; line-height: 1.95; }
.av2-gx-ev__here { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--av2-tint); font-size: 13.5px; line-height: 1.85; color: var(--av2-ink); word-break: auto-phrase; text-wrap: balance; }
.av2-gx-ev__here-label { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--av2-brand); }
/* 出典はカードの下端にそろえる。 */
/* 見出し・「このプログラムでは」・まとめの表・グラフのラベルは、<span> の単位で折り返す(Safari でも語の途中で割らない)。 */
.av2-gx-ev__title > span, .av2-gx-ev__txt > span, .av2-gx-sum__do > span, .av2-gx-sum__t > span, .av2-gx-vbar__label > span { display: inline-block; }
.av2-gx-ev__src { margin: auto 0 0; padding-top: 16px; font-size: 12px; line-height: 1.6; color: var(--av2-cap); }
.av2-gx-ev__src a { margin-left: 2px; font-weight: 700; color: var(--av2-brand); text-decoration: none; }

/* 研究 01: 縦棒(1 週間後に覚えていた割合)。棒の高さ = (枠の高さ − 数値の欄 40px) × 値 / 100 */
.av2-gx-vbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.av2-gx-vbar__plot { display: flex; flex-direction: column; justify-content: flex-end; height: 200px; border-bottom: 2px solid var(--av2-line); }
.av2-gx-vbar__val { margin-bottom: 6px; text-align: center; font-family: var(--av2-en); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--av2-cap); }
.av2-gx-vbar__bar { display: block; flex: none; height: calc((100% - 40px) * var(--v) / 100); min-height: 3px; border-radius: 8px 8px 0 0; background: #CFD8DD; }
.av2-gx-vbar__col.is-main .av2-gx-vbar__val { font-size: 28px; color: var(--av2-brand); }
.av2-gx-vbar__col.is-main .av2-gx-vbar__bar { background: var(--av2-brand); }
.av2-gx-vbar__label { display: block; margin-top: 10px; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--av2-ink); word-break: auto-phrase; text-wrap: balance; }

/* 研究 02: 3 つのグループの比較表。授業の外も使ったグループの列を地色で強調する。 */
.av2-gx-cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.av2-gx-cmp thead td { width: 34%; }
.av2-gx-cmp thead th { padding: 10px 4px; text-align: center; vertical-align: bottom; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--av2-cap); }
.av2-gx-cmp tbody th { padding: 11px 8px 11px 0; text-align: left; font-weight: 700; line-height: 1.5; color: var(--av2-ink); border-top: 1px solid var(--av2-line); }
.av2-gx-cmp tbody td { padding: 11px 4px; text-align: center; border-top: 1px solid var(--av2-line); }
.av2-gx-cmp .is-main { background: var(--av2-tint); }
.av2-gx-cmp thead th.is-main { color: var(--av2-brand); border-radius: 10px 10px 0 0; }
.av2-gx-cmp tbody tr:last-child td.is-main { border-radius: 0 0 10px 10px; }
.av2-gx-cmp__yes { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--av2-brand); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.av2-gx-cmp__no { font-weight: 700; color: #BFC8CD; }
/* 見出しは語の単位で折る(「プログラム」「話す長さ」の途中で割らない)。 */
.av2-gx-cmp__nb, .av2-gx-cmp tbody th > span { display: inline-block; }

/* 研究 03: 話す → 気づく → 考え直す → 言い直す、を 2×2 の循環で見せる(1 左上・2 右上・3 右下・4 左下)。 */
.av2-gx-cycle { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; margin: 0; padding: 0; list-style: none; }
.av2-gx-cycle__step { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 12px 14px; border-radius: 12px; background: var(--av2-surface); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--av2-ink); }
.av2-gx-cycle__step:nth-child(2) { background: var(--av2-yellow); }
.av2-gx-cycle__step:nth-child(3) { grid-column: 2; grid-row: 2; }
.av2-gx-cycle__step:nth-child(4) { grid-column: 1; grid-row: 2; }
.av2-gx-cycle__txt > span { display: inline-block; }
.av2-gx-cycle__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--av2-brand); color: #fff; font-family: var(--av2-en); font-size: 12px; font-weight: 700; }
.av2-gx-cycle__step::after { position: absolute; font-family: var(--av2-en); font-size: 15px; font-weight: 700; line-height: 1; color: var(--av2-brand); }
.av2-gx-cycle__step:nth-child(1)::after { content: '→'; top: 50%; right: -22px; translate: 0 -50%; }
.av2-gx-cycle__step:nth-child(2)::after { content: '↓'; bottom: -21px; left: 50%; translate: -50% 0; }
.av2-gx-cycle__step:nth-child(3)::after { content: '←'; top: 50%; left: -22px; translate: 0 -50%; }
.av2-gx-cycle__step:nth-child(4)::after { content: '↑'; top: -21px; left: 50%; translate: -50% 0; }

/* 研究 04: まとめて分析した研究の数と人数、要旨に書かれた 3 つの結果。 */
.av2-gx-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.av2-gx-meta__num { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--av2-surface); }
.av2-gx-meta__num b { font-family: var(--av2-en); font-weight: 600; font-size: 40px; line-height: 1; color: var(--av2-brand); }
.av2-gx-meta__num span { font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--av2-ink); }
.av2-gx-meta__points { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.av2-gx-meta__points li { position: relative; padding: 10px 12px 10px 40px; border-radius: 10px; background: var(--av2-tint); font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--av2-ink); }
.av2-gx-meta__points li::before { content: ''; position: absolute; top: 50%; left: 15px; width: 12px; height: 6px; border-left: 2.5px solid var(--av2-brand); border-bottom: 2.5px solid var(--av2-brand); translate: 0 -75%; rotate: -45deg; }

/* まとめの表(1 日の流れ × 研究)。900px 以下は 1 行ずつ縦に積む。 */
.av2-gx-sum { margin-top: 40px; border: 1px solid var(--av2-line); border-radius: 16px; overflow: hidden; background: #fff; }
.av2-gx-sum__head, .av2-gx-sum__row { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 0 28px; padding: 20px 28px; }
.av2-gx-sum__head { padding-top: 12px; padding-bottom: 12px; background: var(--av2-surface); font-size: 12px; font-weight: 700; color: var(--av2-ink-mid); }
.av2-gx-sum__row { border-top: 1px solid var(--av2-line); }
.av2-gx-sum__when { display: flex; flex-direction: column; gap: 4px; }
.av2-gx-sum__when b { font-size: 15px; color: var(--av2-ink); }
.av2-gx-sum__do { font-size: 14px; line-height: 1.85; }
.av2-gx-sum__why { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.av2-gx-sum__why li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; line-height: 1.75; color: var(--av2-ink); }
.av2-gx-sum__no { flex: none; font-family: var(--av2-en); font-size: 12px; font-weight: 700; color: var(--av2-brand); }
.av2-gx-sum__do, .av2-gx-sum__why li { word-break: auto-phrase; text-wrap: balance; }

/* 注記と出典 */
.av2-gx-ev-note { margin-top: 28px; }
.av2-gx-refs__title { margin: 24px 0 0; font-size: 12px; font-weight: 700; color: var(--av2-ink); }
.av2-gx-refs { margin: 8px 0 0; padding-left: 1.5em; font-size: 11.5px; line-height: 1.8; color: var(--av2-cap); overflow-wrap: anywhere; }
.av2-gx-refs li + li { margin-top: 6px; }
.av2-gx-refs a { color: var(--av2-brand); }

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
  /* まとめの表は見出し行を消し、1 行ずつ縦に積む。 */
  .av2-gx-sum__head { display: none; }
  .av2-gx-sum__row { grid-template-columns: 1fr; gap: 10px; padding: 20px 22px; }
  .av2-gx-sum__head + .av2-gx-sum__row { border-top: 0; }
}
@media (max-width: 560px) {
  .av2-gx-ev-grid { margin-top: 40px; }
  .av2-gx-ev { padding: 22px 18px 20px; }
  .av2-gx-vbar { gap: 8px; }
  .av2-gx-vbar__plot { height: 180px; }
  .av2-gx-vbar__val { font-size: 17px; }
  .av2-gx-vbar__col.is-main .av2-gx-vbar__val { font-size: 22px; }
  .av2-gx-vbar__label { font-size: 11px; }
  .av2-gx-cmp thead td { width: 30%; }
  .av2-gx-cmp thead th { padding: 8px 2px; font-size: 11px; }
  .av2-gx-cmp tbody th { font-size: 12px; }
  .av2-gx-cmp__yes { min-width: 0; height: 24px; padding: 0 7px; font-size: 10.5px; }
  .av2-gx-cycle { gap: 22px 24px; }
  /* 箱が狭いので、番号を上に置いて文字の幅を確保する。 */
  .av2-gx-cycle__step { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; font-size: 12px; }
  .av2-gx-cycle__step:nth-child(1)::after { right: -19px; }
  .av2-gx-cycle__step:nth-child(2)::after { bottom: -19px; }
  .av2-gx-cycle__step:nth-child(3)::after { left: -19px; }
  .av2-gx-cycle__step:nth-child(4)::after { top: -19px; }
  .av2-gx-meta__num { flex-direction: column; align-items: flex-start; gap: 4px; }
  .av2-gx-meta__num b { font-size: 34px; }
}

/* ---------- 図表の動き ----------
   .av2-chart は main.js がスクロール連動の表示の対象にし、画面に入ると .is-inview が付く。
   縦棒は下から伸び、印や手順は順に出る。
   .av2-reveal が付かない環境(JS 無効・動きを減らす設定)では、すべて最初から出ている。 */
@media (prefers-reduced-motion: no-preference) {
  .av2-chart.av2-reveal .av2-gx-vbar__bar { transform-origin: bottom; transition: scale .9s cubic-bezier(.22,.61,.36,1) calc(.3s + var(--i, 0) * .15s); }
  .av2-chart.av2-reveal:not(.is-inview) .av2-gx-vbar__bar { scale: 1 0; }
  .av2-chart.av2-reveal .av2-gx-vbar__val { transition: opacity .5s ease calc(.85s + var(--i, 0) * .15s); }
  .av2-chart.av2-reveal:not(.is-inview) .av2-gx-vbar__val { opacity: 0; }
  .av2-chart.av2-reveal .av2-gx-cmp__yes { transition: scale .45s cubic-bezier(.34,1.56,.64,1) calc(.35s + var(--i, 0) * .12s), opacity .3s ease calc(.35s + var(--i, 0) * .12s); }
  .av2-chart.av2-reveal:not(.is-inview) .av2-gx-cmp__yes { scale: 0; opacity: 0; }
  .av2-chart.av2-reveal :is(.av2-gx-cycle__step, .av2-gx-meta__points li) { transition: opacity .5s ease calc(.3s + var(--i, 0) * .16s), translate .5s cubic-bezier(.22,.61,.36,1) calc(.3s + var(--i, 0) * .16s); }
  .av2-chart.av2-reveal:not(.is-inview) :is(.av2-gx-cycle__step, .av2-gx-meta__points li) { opacity: 0; translate: 0 10px; }
}