/*
Theme Name: overseas-fx
Theme URI: https://overseas-fx.local
Author: takato
Description: Block theme for the overseas-fx rebuild. Design tokens live in theme.json.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.2
Text Domain: overseas-fx
*/

/*
 * 色・フォント・幅は theme.json だけが持つ。ここで再宣言すると正本が二つに
 * なり、片方だけ直したときに崩れる。参照は var(--wp--preset--*) を使う。
 */

body {
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
  min-height: 100vh;
}

/* ヘッダーの高さ。追従するレールの開始位置と、見出しへ飛んだときの余白が
   これを参照する。ヘッダーの余白を変えたらこの値も合わせる。 */
:root {
  --ofx-header-height: 4.5rem;
}

/* ヘッダーは画面上端へ固定する。
   固定するのは中の <header> ではなくテンプレートパーツの包み。WordPress は
   パーツを `.wp-block-template-part` で包むため、中を sticky にしても包みの
   高さぶんしか動けず、貼り付かずに流れていく。
   隠す切り替えは assets/js/header.js が担当し、ここは見た目だけを持つ。
   スクリプトが落ちても固定表示のヘッダーとして成立する。 */
.wp-site-blocks > .wp-block-template-part:has(.ofx-header) {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform 0.25s ease;
}

.wp-site-blocks > .wp-block-template-part.ofx-header--hidden {
  transform: translateY(-100%);
}

/* サイト名と同じホームリンク内にマークを添える。装飾画像なので読み上げ名は
   サイト名だけに保ち、フッター等に置かれた site-title には影響させない。 */
.ofx-header .wp-block-site-title a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  vertical-align: middle;
}

.ofx-header .wp-block-site-title a::before {
  content: "";
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  background: var(--ofx-site-mark, url("assets/brand/site-icon-192.png")) center / contain no-repeat;
}

/* コアのモバイルメニューと同じ境界。狭い画面でもマーク・サイト名・開閉
   ボタンを1行に保ち、既存のインライン余白だけを上書きする。 */
@media (max-width: 599px) {
  .ofx-header {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .ofx-header > .wp-block-group {
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  .ofx-header > .wp-block-group > .wp-block-group {
    min-width: 0;
  }

  .ofx-header .wp-block-site-title a {
    gap: 0.5rem;
    font-size: clamp(0.9375rem, 4vw, 1.0625rem);
    letter-spacing: 0.04em;
  }

  .ofx-header .wp-block-site-title a::before {
    flex-basis: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
  }

  .ofx-header .wp-block-navigation {
    flex-shrink: 0;
  }
}

/* 見出しへのアンカーと「先頭へ戻る」を滑らかにする。 */
html {
  scroll-behavior: smooth;
}

/* 動きを減らす設定の読者には、隠す挙動そのものは残しつつ遷移を切る。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wp-site-blocks > .wp-block-template-part:has(.ofx-header) {
    transition: none;
  }
}

/* 記事本文だけ明朝にする。UI・ラベル・表はゴシックのまま。 */
.ofx-prose {
  font-family: var(--wp--preset--font-family--mincho);
  line-height: 2.05;
}

/* 画面からは外し、読み上げには残す。アイコンはCSSの擬似要素で描くため支援技術へ
   届かない。「公開」「更新」「著者」のような、アイコンが担う意味をここへ預ける。
   display:none や visibility:hidden は読み上げからも消えるので使えない。
   ブロックテーマではコアの common.css が来ないことがあり、テーマ側で持つ。 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 小さいラベル。真鍮色・字間広め。 */
.ofx-label {
  font-size: 0.65625rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--wp--preset--color--brass);
}

/* 罫線つきのカード面。ポジションと記事カードで共有する。 */
.ofx-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 高さを揃えるのは、カードをグリッドへ並べる文脈だけに限る。
   `.ofx-card` そのものへ `height: 100%` を置くと、本文中へ単独で置かれる
   ポジションカードまで親いっぱいに伸びる。記事ページでは右レールが2行に
   またがって行の高さを決めるため、本文の高さが引き上げられ、カードが
   1,500px超まで伸びてフッターに重なった。 */
.wp-block-post-template .ofx-card {
  height: 100%;
}

/* サムネイルはカード幅いっぱいに敷く。figure の既定余白が残ると、画像の
   左右に地の色が出てカードの角が破綻する。 */
.ofx-card .wp-block-post-featured-image {
  margin: 0;
}

.ofx-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* カード本文は最後の要素（日付）を下端へ寄せる。タイトルの行数が違っても
   カードの下辺が揃う。
   グリッドへ並べる記事カードだけに限る。`.ofx-card` 全体へ掛けると、カード面を
   共有しているだけの器（著者ボックスなど）の中身まで縦へ倒れる。 */
.wp-block-post-template .ofx-card > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ofx-card .wp-block-post-date {
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid var(--wp--preset--color--line-soft);
}

/* タイトルは本文色。リンク既定の真鍮色のままだと、カード全体がリンク色に
   なってモックアップの見え方から外れる。 */
.ofx-card .wp-block-post-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.ofx-card .wp-block-post-title a:hover {
  text-decoration: underline;
}

/* 記事タイプのラベル。post-terms はリンクを出すので、下線を外して字間を
   ラベルの見た目へ揃える。 */
.ofx-label a {
  color: inherit;
  text-decoration: none;
}

.ofx-label a:hover {
  text-decoration: underline;
}

/* 「もっと見る」の行。 */
.ofx-more {
  margin: 0;
  text-align: right;
  font-size: 0.78125rem;
}

.ofx-more a {
  color: var(--wp--preset--color--brass);
  text-decoration: none;
}

.ofx-more a:hover {
  text-decoration: underline;
}

.ofx-hash {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.65625rem;
}

/* 検証ポジションのカード。 */
.ofx-position__head {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
  padding: 0.9375rem 1.375rem 0.8125rem;
  border-bottom: 1px solid var(--wp--preset--color--line-soft);
}

.ofx-position__side {
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.125rem 0.5625rem;
}

.ofx-position__pair {
  font-family: var(--wp--preset--font-family--mincho);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}

.ofx-position__state {
  margin-left: auto;
  font-size: 0.71875rem;
  color: var(--wp--preset--color--muted);
}

/* 水準は項目単位のセルで並べる。保有中は4項目、決済済みは決済と損益が
   加わって6項目になるので、4列で2段へ折り返る形にする。 */
/* 区切りは罫線ではなく1pxの隙間で描く。地色を敷いた grid の隙間から下地が
   覗く形なので、列数や項目数が変わっても、端に余分な線が残らない。 */
.ofx-position__levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--wp--preset--color--line-soft);
  margin: 0;
}

/* 決済済みは決済と損益が加わって6項目になる。4列のままだと2段目に空セルが
   2つ残るので、6項目のときだけ3列にして2段を埋める。 */
.ofx-position__levels--6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ofx-position__level {
  background: var(--wp--preset--color--surface);
  padding: 0.9375rem 1.375rem;
}

.ofx-position__level dt {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--muted);
  margin-bottom: 0.3125rem;
}

.ofx-position__level dd {
  margin: 0;
  font-size: 1.0625rem;
}

.ofx-position__void {
  margin: 0;
  padding: 0.8125rem 1.375rem;
  border-top: 1px solid var(--wp--preset--color--line-soft);
  font-size: 0.78125rem;
  line-height: 1.8;
  color: var(--wp--preset--color--ink-muted);
}

.ofx-position__void span {
  display: inline-block;
  margin-right: 0.625rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--muted);
}

.ofx-position__foot {
  margin: 0;
  padding: 0.6875rem 1.375rem;
  border-top: 1px solid var(--wp--preset--color--line-soft);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--wp--preset--color--muted);
}

/* ヘッダーと本体を密着させる。コアは `.wp-site-blocks` の子へ既定で
   1.5rem の上余白を与え、最初の子だけ0にする。ヘッダーが最初の子なので、
   その次に来る main に24pxの隙間が出る。帯の境目は罫線で表すので、この
   余白は要らない。 */
.wp-site-blocks > main {
  margin-block-start: 0;
}

/* 記事のカバー。帯は画面幅いっぱい、前景の画像は記事の器と同じ 1352px。
   広い画面で余る左右は、同じ画像をぼかして引き伸ばしたもので埋める。
   単色で埋めるより記事の色に馴染み、画像の主張も強くならない。 */
.ofx-cover {
  position: relative;
  isolation: isolate;
}

/* 背景。前景と同じ画像を帯いっぱいに広げ、ぼかして沈める。装飾なので
   支援技術へは渡さない（ブロック側で aria-hidden を付けている）。 */
.ofx-cover__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  /* ぼかすと縁に地の色が滲むので、外へはみ出させてから切り落とす。 */
  transform: scale(1.15);
  filter: blur(28px) saturate(0.85) brightness(0.92);
}

.ofx-cover__frame {
  max-width: 1352px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 前景。比率はブロックが属性から渡す。 */
.ofx-cover__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ofx-cover-ratio, 1200 / 630);
  object-fit: contain;
}

/* ぼかした背景がヘッダーの下や次の節へ滲まないよう、帯の外へ出さない。 */
.ofx-band--cover {
  overflow: hidden;
}

/* サムネイルは 1200x630 の原寸比率で表示する。生成画像には文字やチャートを
   含むため、固定高で切り抜くと見出しや注釈が欠ける。object-position は過去記事
   との互換用に残すが、contain 表示では画像全体が常に見える。 */
.ofx-has-generated-cover .ofx-cover__image {
  object-position: center;
}

/* 記事ページの3カラム。器の合計はカバー画像の幅と一致させる。

     220px（左・目次） + 56px（間隔） + 720px（本文） + 56px + 300px（右・サイド） = 1352px

   本文は 720px（仕様 §2.3）。間隔を 20px から 56px へ広げたのは、20px だと
   3つの列が1枚の板に押し込まれて見えたため。
   この数値を動かすと、カバー画像の左右と3カラムの左右がずれる。
   中央だけ minmax(0, 720px) にしてあるので、器が 1352px に満たない幅では
   本文だけが痩せ、左右のレールの幅は保たれる。 */
.ofx-single {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px) 300px;
  grid-template-areas:
    "toc head side"
    "toc body side";
  column-gap: 56px;
  row-gap: 1.5rem;
}

/* コアの flow レイアウトは子へ 1.5rem の上余白を与える。grid の中では行が
   その分ずれて、左右のレールが本文より下から始まる。器の中では余白を持たない。 */
.ofx-single > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.ofx-single__head {
  grid-area: head;
}

.ofx-single__body {
  grid-area: body;
}

/* 左のレール。JavaScriptを使わず position: sticky だけで追従させる。
   grid アイテムの既定は align-self: stretch で、領域（2行ぶん）の高さいっぱいに
   伸びてしまい sticky が動く余地を失う。start で自然な高さに戻す。
   見出しの多い記事でも画面を越えないよう、レールの中だけで縦スクロールさせる。 */
.ofx-single__rail--toc {
  grid-area: toc;
  align-self: start;
  position: sticky;
  top: calc(var(--ofx-header-height) + 1.25rem);
  max-height: calc(100vh - var(--ofx-header-height) - 2.5rem);
  overflow-y: auto;
}

/* 右のレール。レール自体は追従させず、記事の高さいっぱいに伸ばす。
   固定するのは最後のCTAだけで、その挙動は .ofx-rail__pin が決める。 */
/* 右のレール。並ぶ3つ（著者・新着記事・CTA）はすべて同じカード面に載せる。
   1つだけ地色と枠を持たないと、そこだけ台紙から剥がれて見える。
   間隔は2remから詰めた。器が面を持つと境目が枠で分かるので、離す必要が減る。 */
.ofx-single__rail--side {
  grid-area: side;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* CTAを包む器。記事一覧の直後から始まり、レールの下端まで伸びる。
   中のCTAは sticky; bottom で留まるが、sticky が動ける範囲はこの器の中だけ。
   器の上端が一覧の直後にあるので、一覧を読み終えるまでCTAは画面へ出てこない。

   レール全体を包み親にすると、器の上端が記事の先頭になり、CTAが最初から
   画面下端に貼り付く。「そこまでスクロールしたら固定」にはならない。 */
/* CTAは器の先頭に置き、目次と同じく画面の上端へ貼り付ける。
   器は記事一覧の直後から始まり、レールの下端まで伸びる。器の上端が一覧の
   直後にあるので、一覧を読み終えたところでCTAが現れ、そこから先は上端に
   留まる。記事の終わりで器も終わり、自然に流れる。

   器をレール全体にすると上端が記事の先頭になり、CTAが最初から貼り付いて
   一覧より前に出てしまう。 */
.ofx-rail__pin {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

.ofx-rail__pin > * {
  position: sticky;
  top: calc(var(--ofx-header-height) + 1.25rem);
  flex: 0 0 auto;
}

/* 記事一覧は自然な高さのまま置く。レールを画面の高さで止めるのをやめたので、
   一覧を内側でスクロールさせる必要はなくなった。全件がそのまま並ぶ。 */
.ofx-single__rail--side > .ofx-popular {
  flex: 0 0 auto;
}

/* 見出しが2個未満の記事では目次ブロックが何も返さず、左の列が空のまま残る。
   ここで列を畳むと、記事によって本文の左端の位置が変わる。位置は動かさない。 */

/* 固定ページの2カラム。

     220px（左・目次） + 56px（間隔） + 720px（本文） = 996px

   列幅と間隔は記事ページと同じ値にする。運営者情報から記事へ移ったときに
   目次の縦線が横へ跳ねない。右のサイドバーは持たない。方針や免責のページに
   人気記事やCTAを添える理由が無く、幅だけ合わせて空の列を置くと右に356pxの
   死んだ余白が残る。 */
.ofx-page {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  grid-template-areas:
    "toc head"
    "toc body";
  column-gap: 56px;
  row-gap: 1.5rem;
}

/* 見出しが2つ未満のページでは目次ブロックが何も返さない。列を残すと左に220pxの
   空白だけができて、ページ全体が右へ寄る。記事では位置を揃えるためにあえて列を
   残しているが、固定ページは数が少なく互いに独立しているので、揃える相手がいない。
   目次が無いときは1カラムにして中央へ戻す。 */
.ofx-page:not(:has(.ofx-toc)) {
  grid-template-columns: minmax(0, 720px);
  grid-template-areas:
    "head"
    "body";
  justify-content: center;
}

/* 器そのものも畳む。中身が空でも grid アイテムには変わりなく、割り当てる領域が
   無くなったぶん自動配置に回って暗黙の列を作る。実測では列が
   `720px 0px 0px` になり、間隔2本ぶん（112px）の半分だけ本文が左へずれた。 */
.ofx-page:not(:has(.ofx-toc)) .ofx-page__rail--toc {
  display: none;
}

/* .ofx-single と同じ理由。コアの flow レイアウトが子へ与える 1.5rem の上余白は
   grid の行をずらし、目次が本文より下から始まってしまう。 */
.ofx-page > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.ofx-page__head {
  grid-area: head;
}

.ofx-page__body {
  grid-area: body;
}

.ofx-page__rail--toc {
  grid-area: toc;
  align-self: start;
  position: sticky;
  top: calc(var(--ofx-header-height) + 1.25rem);
  max-height: calc(100vh - var(--ofx-header-height) - 2.5rem);
  overflow-y: auto;
}

/* 表題。記事の見出しより一段大きくする。方針や運営者情報は本文に h2 が並ぶので、
   表題が h2 と同じ大きさだと、どこからが本文なのか分からなくなる。 */
.ofx-page__title {
  margin: 0;
  font-size: 1.9375rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* 更新日。本文との境に罫を1本引いて、頭と本文を切る。 */
.ofx-page__meta {
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 1.375rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: 0.71875rem;
  color: var(--wp--preset--color--muted);
}

.ofx-page__meta p,
.ofx-page__meta time,
.ofx-page__meta .wp-block-post-date {
  margin: 0;
}

/* 「最終更新」の側だけ字間を空けて小さくし、日付を読ませる。 */
.ofx-page__meta > p:first-child {
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
}

/* 導入の1段落。本文より少し大きく、行間を広く取る。ページを開いた人が
   何のページかを1行で掴めるようにする。 */
.ofx-page__body > p:first-child {
  font-size: 1.0625rem;
  line-height: 2.1;
  color: var(--wp--preset--color--ink-muted);
}

/* 本文の最初の見出しは、導入の直後に来るので上の余白を詰める。 */
.ofx-page__body > h2:first-child {
  margin-top: 0;
}

/* 目次。枠も背景も持たせない。罫線で囲った箱を左へ置くと、本文と張り合う面が
   2つできて画面が詰まって見える。階層は字の大きさと行間だけで示す。 */
.ofx-toc {
  font-size: 0.8125rem;
  line-height: 1.9;
}

.ofx-toc__box {
  border: 0;
  background: none;
  padding: 0;
}

.ofx-toc__summary {
  cursor: pointer;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--muted);
}

.ofx-toc__list,
.ofx-toc__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 目次の左に1本の縦線を通し、いま読んでいる節の位置をその線の上で示す。
   線そのものは薄く、現在位置だけが真鍮色で太る。 */
.ofx-toc__list {
  border-left: 1px solid var(--wp--preset--color--line);
  padding-left: 0.9375rem;
}

.ofx-toc__link {
  position: relative;
}

/* 現在位置の印。縦線の上に重ねるので、線の太さぶん左へずらす。
   印の付け外しは assets/js/header.js が行う。スクリプトが落ちても、
   目次は通常のリンク一覧として成立する。 */
.ofx-toc__link.is-current::before {
  content: "";
  position: absolute;
  left: -0.9375rem;
  top: 0.125rem;
  bottom: 0.125rem;
  width: 2px;
  transform: translateX(-1px);
  background: var(--wp--preset--color--brass);
}

.ofx-toc__link.is-current {
  color: var(--wp--preset--color--brass);
}

/* 第2階層。罫線ではなく字下げで下位を示す。細い縦罫を何本も引くと、
   目次そのものが図表のように見えて本文から浮く。 */
.ofx-toc__sub {
  padding-left: 0.875rem;
  margin: 0;
}

.ofx-toc__link {
  display: block;
  padding: 0.3125rem 0;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.ofx-toc__link:hover {
  color: var(--wp--preset--color--brass);
}

.ofx-toc__item--h2 + .ofx-toc__item--h2 {
  margin-top: 0.375rem;
}

/* 下位の見出しは一段落として、拾い読みのときに上位だけが目に入るようにする。 */
.ofx-toc__item--h3 > .ofx-toc__link {
  font-size: 0.75rem;
  color: var(--wp--preset--color--muted);
  padding: 0.1875rem 0;
}

/* 著者。レールの先頭に置くので、記事一覧より前に目へ入る。器はポジションや
   累計成績と同じ罫線つきのカード面（.ofx-card）。

   ただし地色だけは白（surface）から地の紙（base）へ落とす。レールに並ぶ3つは
   どれも記事に添える情報で、本文中のポジションカードのように読ませる中身では
   ない。白のまま3つ積むと記事の右に本文より明るい帯が縦へ通り、そこだけ紙が
   違って見える。器の切れ目は罫線が持っているので、面の白さで示す必要はない。 */
.ofx-author {
  padding: 1rem 1.125rem;
  gap: 0.75rem;
  background: var(--wp--preset--color--base);
}

.ofx-author__head {
  align-items: center;
  flex-wrap: nowrap;
}

/* アバターは丸く抜く。器の幅はブロックの size 属性が決める。 */
.ofx-author__avatar img {
  display: block;
  border-radius: 50%;
}

.ofx-author__name {
  min-width: 0;
}

.ofx-author .wp-block-post-author-name a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.ofx-author .wp-block-post-author-name a:hover {
  text-decoration: underline;
}

.ofx-author .wp-block-post-author-biography {
  margin: 0;
  color: var(--wp--preset--color--ink-muted);
}

/* 略歴が未記入のうちは空の段落が残り、カードの中に理由のない余白が居座る。
   中身が入ったときだけ場所を取らせる。 */
.wp-block-post-author-biography:empty {
  display: none;
}

/* サイドバーの記事一覧。300px のレールに合わせた横組みのカード。
   器は著者ボックスとCTAに揃えたカード面。内側の余白も同じ値にする。
   地色もレールの他の2つと同じ base。ここだけ白いと一覧が浮く。 */
.ofx-popular {
  margin: 0;
  padding: 1rem 1.125rem;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
}

/* 見出しと最初の記事の間隔は、記事同士の間隔（罫線の上下 0.875rem）と同じに
   なるよう詰める。ここだけ広いと、見出しが一覧から離れて宙に浮く。 */
.ofx-popular__heading {
  position: relative;
  margin: 0 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

/* 罫の左端だけ真鍮で太らせる。本文の h2 が縦罫で節の始まりを示すのと同じ印を、
   横に寝かせてレールへ持ち込む。器が3つ並ぶ中で、どれが記事の一覧なのかが
   枠の色ではなく印で分かる。 */
.ofx-popular__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  border-bottom: 2px solid var(--wp--preset--color--brass);
}

.ofx-popular__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

/* 記事同士は細い罫線で切る。間隔だけで切ると、横組みでは行が詰まって
   どこまでが1件か分からなくなる。 */
.ofx-popular__item + .ofx-popular__item {
  border-top: 1px solid var(--wp--preset--color--line-soft);
}

/* 1件ずつの枠と地色は持たせない。器がすでにカード面なので、その中でさらに
   箱を積むと枠が二重になる。1件の区切りは上の細い罫線だけで足りる。
   サムネイルを左へ寄せた横組みにするのは縦の長さのため。1200x630 を縦に積むと
   5件でレールが1000pxを超え、記事を読んでいる横に記事より長い列が伸びる。 */
/* サムネイルの幅は88px。器がカード面になって左右に余白が付いたぶん、本文の列は
   262pxしかない。104pxのままだとカテゴリと日付の行が146pxに収まらず、「AIトレード
   …」のように category が行末で切れる。88pxなら実測で最長のカテゴリ（88px）と
   日付（61px）が並んでも余る。

   絵柄は 1200:630 なので、3行の見出しより背が低い。上端で揃えると余りがすべて
   下に溜まって列が抜けて見えるため、中央で合わせて上下へ振り分ける。 */
.ofx-popular__link {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem 0;
  color: inherit;
  text-decoration: none;
}

/* 下線ではなく色で反応させる。3行に折り返した見出しへ下線が入ると、細い罫が
   何本も走って一覧全体がざらつく。 */
.ofx-popular__link:hover .ofx-popular__title {
  color: var(--wp--preset--color--brass);
}

/* サムネイルは薄い罫で囲う。地色に近い絵柄（クリーム地のコラムなど）は、罫が
   無いと縁が背景へ溶けて、画像の四角が崩れて見える。 */
.ofx-popular__thumb {
  display: block;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px;
  overflow: hidden;
}

/* サムネイルは見出しの文字を焼き込んだ絵柄なので、原寸の比率のまま縮める。
   正方形へ切ると左右が落ちて、文字が枠の外へ出る。 */
.ofx-popular__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* 触れたときだけ絵柄をわずかに寄せる。枠は動かさないので、列の位置は変わらない。
   この指定は必ず上の比率の指定より後ろへ置く。前に置くと `.ofx-popular__image`
   の最初の出現がこちらになり、比率をここから読み取る側が空振りする。 */
.ofx-popular__link:hover .ofx-popular__image {
  transform: scale(1.04);
}

.ofx-popular__body {
  display: block;
  min-width: 0;
}

/* カテゴリと日付の行。左右へ振り分けて1行に収める。両端の間に何も置かないの
   は、区切りの記号を足すと10pxの行に要素が3つ並んで読み取りが遅くなるため。 */
.ofx-popular__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

/* カテゴリ名は折り返さない。折り返すとこの行だけ2段になり、右端の日付が
   宙に浮く。長い名前は行末で打ち切る。 */
.ofx-popular__category {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--brass);
}

/* タイトルは3行で打ち切る。長い見出しが1件で5行を取ると、横組みにした
   意味が消える。全文はリンク先にある。 */
/* 見出しは本文と同じ明朝で組む。記事のタイトルはサイトのどこでも明朝なので、
   ここだけゴシックだと一覧が UI の部品に見えて、記事の並びとして読まれない。 */
.ofx-popular__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 0.3125rem;
  font-family: var(--wp--preset--font-family--mincho);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink);
  transition: color 0.2s ease;
}

/* 日付は縮ませない。カテゴリ名が長い件でも、右端の桁の位置は動かさない。
   大きさはカテゴリと揃える。同じ行に並ぶ2つで字の大きさが違うと、どちらかが
   見出しに見えてしまう。区別は色で付ける。 */
.ofx-popular__date {
  flex: 0 0 auto;
  font-size: 0.625rem;
  color: var(--wp--preset--color--muted);
}

/* 動きを減らす設定では、サムネイルの寄りをやめる。遷移を切るだけだと、触れた
   瞬間に絵柄が飛ぶので、拡大そのものを外す。
   この節をファイル冒頭の同じ問い合わせへまとめないのは、そちらへ置くと
   `.ofx-popular__image` の指定が原寸の比率を持つ本体より前に現れ、比率を
   読み取る側（テストも人も）が先に空の指定へ当たるため。 */
@media (prefers-reduced-motion: reduce) {
  .ofx-popular__link:hover .ofx-popular__image {
    transform: none;
  }
}

/* 並び順の注記。閲覧の実績を記録していないことをそのまま書く行なので、
   小さくはするが隠さない。 */
.ofx-popular__note {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--wp--preset--color--line);
  font-size: 0.625rem;
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
}

/* XM CTA。本文中の通常案内と、記事先頭のキャンペーン版で同じ骨格を使う。 */
.ofx-xm-cta {
  margin: 1.5rem 0;
}

.ofx-single__rail--side .ofx-xm-cta {
  font-size: 0.875rem;
  line-height: 1.65;
}

.ofx-xm-cta__card {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 0.75rem;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ofx-xm-cta__card:hover {
  background: var(--wp--preset--color--line-soft);
  border-color: var(--wp--preset--color--brass);
}

.ofx-xm-cta__visual {
  display: grid;
  place-items: center;
}

.ofx-xm-cta__logo {
  width: 100%;
  max-width: 7rem;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0.5rem;
}

.ofx-xm-cta__copy {
  display: grid;
  gap: 0.3rem;
}

.ofx-xm-cta__copy strong {
  color: var(--wp--preset--color--brass);
}

.ofx-xm-cta__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--ink-muted);
}

.ofx-xm-cta__description {
  color: var(--wp--preset--color--ink-muted);
}

.ofx-xm-cta__button {
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* A案：赤から深いボルドーへ落ちるキャンペーンカード。金色のボタンと白いロゴ面で
   情報の優先順位を作り、画像の中へ文字を焼き込まない。 */
.ofx-xm-cta--campaign .ofx-xm-cta__card {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(6.25rem, 8.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  padding: clamp(1.15rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 211, 109, 0.22), transparent 32%),
    linear-gradient(125deg, #9f111b 0%, #6f0b16 48%, #270813 100%);
  border: 1px solid rgba(255, 214, 128, 0.72);
  border-radius: 1.125rem;
  box-shadow: 0 1rem 2.5rem rgba(73, 7, 16, 0.24);
  color: #fffaf0;
}

.ofx-xm-cta--campaign .ofx-xm-cta__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -5rem;
  right: -3rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgba(255, 225, 158, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5rem rgba(255, 225, 158, 0.05), 0 0 0 5rem rgba(255, 225, 158, 0.035);
}

.ofx-xm-cta--campaign .ofx-xm-cta__card:hover {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 221, 139, 0.3), transparent 34%),
    linear-gradient(125deg, #ac1420 0%, #780d18 48%, #310916 100%);
  border-color: #ffe09b;
  box-shadow: 0 1.2rem 2.8rem rgba(73, 7, 16, 0.31);
  transform: translateY(-2px);
}

.ofx-xm-cta--campaign .ofx-xm-cta__visual {
  padding: 0.65rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 224, 153, 0.84);
  border-radius: 1rem;
  box-shadow: 0 0.65rem 1.4rem rgba(43, 3, 9, 0.22);
}

.ofx-xm-cta--campaign .ofx-xm-cta__logo {
  border-radius: 0.55rem;
}

.ofx-xm-cta--campaign .ofx-xm-cta__eyebrow {
  color: #ffd98c;
  text-transform: uppercase;
}

.ofx-xm-cta--campaign .ofx-xm-cta__copy strong {
  max-width: 28ch;
  color: var(--wp--preset--color--surface);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  line-height: 1.35;
}

.ofx-xm-cta--campaign .ofx-xm-cta__description {
  max-width: 42rem;
  color: rgba(255, 250, 240, 0.84);
  line-height: 1.75;
}

.ofx-xm-cta--campaign .ofx-xm-cta__button {
  padding: 0.58rem 1rem;
  background: linear-gradient(180deg, #ffe2a2, #dca84a);
  border-color: rgba(255, 237, 195, 0.9);
  color: #351105;
  box-shadow: 0 0.35rem 0.9rem rgba(41, 5, 10, 0.25);
}

/* 記事末尾は紙色と真鍮の大型カード。先頭の赤いキャンペーン版とは分ける。 */
.ofx-xm-cta--article-bottom {
  margin: 2.5rem 0 0;
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(6.75rem, 9rem) minmax(0, 1fr);
  gap: clamp(1.1rem, 3.2vw, 2.4rem);
  min-height: 19rem;
  box-sizing: border-box;
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--brass) 18%, transparent), transparent 40%),
    linear-gradient(180deg, var(--wp--preset--color--surface), var(--wp--preset--color--line-soft));
  border: 1px solid var(--wp--preset--color--brass);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wp--preset--color--ink) 9%, transparent);
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.45rem;
  background: var(--wp--preset--color--brass);
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__card:hover {
  border-color: var(--wp--preset--color--ink-muted);
  box-shadow: 0 1.2rem 2.8rem color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__card:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 4px;
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__visual {
  padding: 0.85rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 1rem;
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__copy {
  gap: 0.45rem;
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--ink-muted);
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__copy strong {
  color: var(--wp--preset--color--ink);
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__description {
  max-width: 42rem;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--wp--preset--color--ink-muted);
}

.ofx-xm-cta--article-bottom .ofx-xm-cta__button {
  margin-top: 0.6rem;
  padding: 0.7rem 1.2rem;
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--surface);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  .ofx-xm-cta--campaign .ofx-xm-cta__card {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 0.9rem;
  }

  .ofx-xm-cta--campaign .ofx-xm-cta__visual {
    padding: 0.4rem;
    border-radius: 0.7rem;
  }

  .ofx-xm-cta--campaign .ofx-xm-cta__copy strong {
    font-size: 1.05rem;
  }

  .ofx-xm-cta--campaign .ofx-xm-cta__description {
    grid-column: 1 / -1;
    font-size: 0.85rem;
  }

  .ofx-xm-cta--campaign .ofx-xm-cta__button {
    font-size: 0.72rem;
  }

  .ofx-xm-cta--article-bottom .ofx-xm-cta__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1rem;
  }

  .ofx-xm-cta--article-bottom .ofx-xm-cta__visual {
    justify-self: start;
    width: 4.5rem;
    padding: 0.45rem;
    border-radius: 0.8rem;
  }

  .ofx-xm-cta--article-bottom .ofx-xm-cta__copy strong {
    font-size: 1.5rem;
  }

  .ofx-xm-cta--article-bottom .ofx-xm-cta__description {
    font-size: 0.875rem;
  }

  .ofx-xm-cta--article-bottom .ofx-xm-cta__button {
    justify-self: stretch;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ofx-xm-cta__card {
    transition: none;
  }

  .ofx-xm-cta--campaign .ofx-xm-cta__card:hover {
    transform: none;
  }
}

/* 本文の見出し。h2 は真鍮色の縦罫で節の始まりを示し、h3 は罫を持たず一段
   小さくする。移行記事は h2 と h3 が交互に来るので、太さだけの差では段の
   深さが読み取れない。 */
.ofx-prose h2 {
  margin: 2.75rem 0 1rem;
  padding-left: 0.8125rem;
  border-left: 2px solid var(--wp--preset--color--brass);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.ofx-prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-muted);
}

/* h4 と h5。h2 は縦罫、h3 は色で段を示したが、この2段には同じ手が使えない。
   さらに小さくするだけだと本文（1rem・明朝）と見分けが付かなくなるので、
   書体をゴシックへ替えて、見出しであることを字面の違いで示す。 */
.ofx-prose h4 {
  margin: 1.875rem 0 0.625rem;
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--wp--preset--color--ink);
}

/* 頭へ短い真鍮の罫を寝かせて置く。h2 の縦罫と同じ印なので、深い段でも節の
   始まりだと読み取れる。飾りなので擬似要素で描き、読み上げへは渡さない。 */
.ofx-prose h4::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  margin-right: 0.5rem;
  border-top: 2px solid var(--wp--preset--color--brass);
  vertical-align: 0.28em;
}

/* h5 はラベルとして置く。字を小さくして字間を開け、真上の h4 と同じ大きさに
   見えないようにする。 */
.ofx-prose h5 {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--wp--preset--color--muted);
}

/* 見出しへ振った id へ飛んだとき、ヘッダーの下へ潜らせない。目次のリンクは
   すべてこの id を指すので、飛び先の見出しが画面の上端に貼り付かないだけの
   余白をここで確保する。 */
.ofx-prose h2[id],
.ofx-prose h3[id] {
  scroll-margin-top: calc(var(--ofx-header-height) + 1.25rem);
}

/* ここから本文の要素（リスト・表・引用・区切り・コード）。
   コアのブロックライブラリCSSはこのサイトへ配信していないため、字下げも罫も
   テーマが持たないと素のまま出る。ファイル末尾の「移行記事の受け皿」は崩れを
   止めるだけの指定で、見た目を決めるのはこの節。

   本文の器は記事が `.ofx-prose .wp-block-post-content`、固定ページが
   `.wp-block-post-content` だけ。両方へ当てるので `:is()` でまとめる。
   `:is()` の詳細度は引数の最大（クラス1つぶん）なので、既存の指定との
   強さの関係は、クラスを直接書いたときと変わらない。 */

/* 本文中のリンク。既定の下線は字に近く、明朝だと字画と混ざって読みにくい。
   色は theme.json の真鍮のままで、線の位置と太さだけを整える。 */
:is(.ofx-prose, .wp-block-post-content) a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

:is(.ofx-prose, .wp-block-post-content) a:hover {
  text-decoration-thickness: 2px;
}

/* 明朝の太字は環境によって合成される。700まで上げると小さい字が潰れる。 */
:is(.ofx-prose, .wp-block-post-content) strong {
  font-weight: 600;
}

/* リスト。印を真鍮にして、項目の頭が本文の黒から分かれるようにする。 */
:is(.ofx-prose, .wp-block-post-content) :is(ul, ol) {
  margin: 1.5rem 0;
  padding-left: 1.625rem;
  line-height: 1.9;
}

:is(.ofx-prose, .wp-block-post-content) li + li {
  margin-top: 0.5rem;
}

/* ::marker は色と書体しか受け付けない。字の位置は list-style が決めたままな
   ので、印だけを塗り替えても行頭の揃いは動かない。 */
:is(.ofx-prose, .wp-block-post-content) li::marker {
  color: var(--wp--preset--color--brass);
}

/* 番号は明朝のままだと本文へ溶けて、項目の切れ目が見えない。ゴシックで一段
   小さくし、字ではなく記号として読ませる。 */
:is(.ofx-prose, .wp-block-post-content) ol > li::marker {
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 0.875em;
  font-weight: 600;
}

/* 入れ子。字を落として親の項目に属することを大きさで示し、印も真鍮から下ろす。
   同じ真鍮のままだと、階層が2つあることが印から読み取れない。 */
:is(.ofx-prose, .wp-block-post-content) li > :is(ul, ol) {
  margin: 0.5rem 0 0;
  padding-left: 1.375rem;
  font-size: 0.9375em;
}

:is(.ofx-prose, .wp-block-post-content) li > :is(ul, ol) > li::marker {
  color: var(--wp--preset--color--muted);
}

/* 表。列が何を並べているかは罫の太さではなく地色の差で示し、行の区切りだけを
   細い罫で引く。数値の桁揃えは body の tabular-nums がそのまま効く。
   表をゴシックのまま置くのは、明朝の数字が細くて桁の並びを追いにくいため
   （本文だけ明朝、という上の方針と同じ理由）。 */
/* 幅の広い表はページ本体ではなく表の中で横スクロールさせる（仕様 §2.2）。
   引き受けるのは表ではなく包みのほう。表自身をスクロール箱にすると、中身が
   無名の表ボックスへ落ちてセルが器の幅まで伸びなくなる。 */
figure.wp-block-table {
  margin: 1.75rem 0;
  overflow-x: auto;
}

/* 末尾の受け皿が素の <table> を `display: block` のスクロール箱にしている。
   包みを持つコア形式の表だけ、ここで表へ戻す。横スクロールは包み側の
   `overflow-x` が引き受けるので、表は表のまま組めて、セルが器の幅まで伸びる。
   セレクタに要素名を足して、受け皿より強くしてある（順序に依存しない）。 */
figure.wp-block-table > table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 0.8125rem;
  line-height: 1.7;
}

figure.wp-block-table :is(th, td) {
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--wp--preset--color--line);
  text-align: left;
  vertical-align: top;
}

figure.wp-block-table thead th {
  background: var(--wp--preset--color--line-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* 列見出しは折り返さない。折り返すと見出し行だけ背が高くなり、そのぶん
     表全体が縦に伸びる。狭い画面でははみ出すが、包みが横へスクロールする。 */
  white-space: nowrap;
}

/* 行の縞。罫だけで区切ると、列の多い表で目が隣の行へ乗り移る。 */
figure.wp-block-table tbody tr:nth-child(even) {
  background: var(--wp--preset--color--base);
}

/* 行頭の見出しセル。列見出しより弱く、本文のセルより強い位置に置く。 */
figure.wp-block-table tbody th {
  background: var(--wp--preset--color--base);
  font-weight: 600;
}

/* 図表の注記。図の中身ではなく外からの説明なので、一段落として置く。
   コアの全体スタイルが注記を中央寄せにするが、本文も見出しも表のセルもすべて
   左揃えなので、ここだけ中央だと図の外の1行が浮く。左へ戻す。 */
:is(.ofx-prose, .wp-block-post-content) figcaption {
  text-align: left;
  margin-top: 0.625rem;
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--wp--preset--color--muted);
}

/* figure の左右余白はブラウザ既定で40px。コアのCSSが来ないぶん、ここで戻す。 */
:is(.ofx-prose, .wp-block-post-content) figure {
  margin-left: 0;
  margin-right: 0;
}

/* 引用。線の位置は h2 の縦罫と同じなので、色は真鍮ではなく淡い罫にする。
   同じ真鍮だと、引用が節の始まりに見えてしまう。 */
:is(.ofx-prose, .wp-block-post-content) blockquote {
  margin: 1.75rem 0;
  padding: 0.125rem 0 0.125rem 1.25rem;
  border-left: 2px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink-muted);
}

/* 引用の中の段落は本文の直下ではないので、コアの blockGap が届かず、
   ブラウザ既定の上下余白が残る。枠の内側で上下が空くのを止める。 */
:is(.ofx-prose, .wp-block-post-content) blockquote > *:first-child {
  margin-top: 0;
}

:is(.ofx-prose, .wp-block-post-content) blockquote > *:last-child {
  margin-bottom: 0;
}

:is(.ofx-prose, .wp-block-post-content) blockquote cite {
  display: block;
  margin-top: 0.625rem;
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 0.75rem;
  font-style: normal;
  color: var(--wp--preset--color--muted);
}

/* 区切り。全幅で引くと h2 の節の切れ目より強く見えるので、短く中央へ置く。
   全幅が要る場面はブロック側で is-style-wide を選んでもらう。 */
:is(.ofx-prose, .wp-block-post-content) hr {
  height: 1px;
  margin: 2.75rem auto;
  border: 0;
  background: var(--wp--preset--color--line);
}

:is(.ofx-prose, .wp-block-post-content) hr.wp-block-separator:not(.is-style-wide) {
  max-width: 5rem;
}

/* コード。式や識別子を本文から切り出すための最小限の飾りで、色は付けない。 */
:is(.ofx-prose, .wp-block-post-content) code {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  background: var(--wp--preset--color--line-soft);
  border-radius: 3px;
}

:is(.ofx-prose, .wp-block-post-content) pre {
  margin: 1.75rem 0;
  padding: 1rem 1.125rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  line-height: 1.8;
  overflow-x: auto;
}

/* 塊のコードの中では、地色も内側の余白も外側の枠が持つ。 */
:is(.ofx-prose, .wp-block-post-content) pre code {
  padding: 0;
  background: none;
  font-size: 1em;
}

/* ヒーローの帯。背景色そのものはブロック側が surface で敷く。ここではその上
   へごく薄い階調を重ね、真っ白な板が下の地色へ落ちる境目を和らげる。色は
   トークンから作り、16進数を書かない。 */
.ofx-band--hero {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 45%,
    color-mix(in srgb, var(--wp--preset--color--base) 75%, transparent) 100%
  );
}

/* 累計pips推移のカードも、周りの白から浮かせずになじませる。 */
.ofx-chart {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent) 0%,
    transparent 60%
  );
}

/* 見出しと説明は成績表のカラムから切り離し、帯の幅を使って読ませる。 */
.ofx-hero__intro > .wp-block-heading {
  text-wrap: balance;
}

.ofx-hero__intro > p:not(.ofx-label) {
  max-width: 64em;
  text-wrap: pretty;
}

/* トップでは数値とグラフを同じ枠に載せ、集計の注記を全幅の下段へ送る。
   ブロック本体は変えず、このグループ内だけ表示上の親を共有させる。
   dl・figure の意味づけと、単独で置かれる成績ブロックの表示は保つ。 */
.wp-block-group.ofx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  margin-top: 1.5rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  overflow: hidden;
}

.ofx-hero > .ofx-summary {
  display: contents;
}

.ofx-hero .ofx-summary__header {
  grid-column: 1 / -1;
  grid-row: 1;
}

.ofx-hero .ofx-summary__items {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.ofx-hero .ofx-summary__note {
  grid-column: 1 / -1;
  grid-row: 3;
}

.ofx-hero > .ofx-chart {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  margin: 0;
  padding: 1.25rem 1.375rem 1rem;
  border: 0;
  border-left: 1px solid var(--wp--preset--color--line-soft);
  border-radius: 0;
}

/* 件数がゼロでも空白のカードにしない。全件ゼロなら説明を縦に並べ、
   未決済のみならグラフの位置に未集計の説明を置く。 */
.ofx-hero > .ofx-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.25rem 1.375rem;
}

.ofx-hero > .ofx-summary + .ofx-empty {
  grid-column: 2;
  grid-row: 2;
  border-left: 1px solid var(--wp--preset--color--line-soft);
}

/* 累計成績。器は検証ポジションと同じ罫線つきのカード面（.ofx-card）で、
   中の項目もポジションの水準と同じ組み方にする。読者から見ればどちらも
   「項目名と値の組を並べた記録」なので、区切りの描き方まで揃える。 */
.ofx-summary {
  margin: 0;
}

.ofx-summary__header {
  padding: 0.75rem 1.375rem 0.8125rem;
  border-bottom: 1px solid var(--wp--preset--color--line-soft);
}

/* 本文の .ofx-prose h2 の段落余白をカード内へ持ち込まない。 */
.ofx-summary .ofx-summary__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.ofx-summary__description {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
}

/* 4列を基準に項目を並べる。判定済み・保有中・最古の保有・勝率・累計pips・
   最大DD pips・PF・見送り・未発注・判定不能の10があり、成績をよく見せる
   ために項目を隠すことはしない（仕様 §4.1）。件数は今後も増える見込みが
   あるため、総項目数を前提にした値をここへ書かない。段の埋め方は
   `.ofx-summary__item` 側の flex-grow に任せる。
   区切りは罫線ではなく1pxの隙間で描く。地色を敷いた flex の隙間から下地が
   覗く形なので、列数や項目数が変わっても端に余分な線が残らない
   （.ofx-position__levels と同じ作り）。 */
.ofx-summary__items {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--wp--preset--color--line-soft);
  margin: 0;
}

/* モックアップは数値が上、ラベルが下。dl は用語が先でなければ意味が崩れる
   ので、DOMの並びは dt → dd のまま、見た目だけを入れ替える。読み上げは
   DOM順のままで、用語と値の対応は保たれる。 */
/* 左右の余白はポジションカードより詰める。累計成績が載るヒーローの左カラムは
   460px ほどで、4列に割ると1セルが115pxしかない。ポジションと同じ 1.375rem を
   取ると内側が70pxまで痩せ、「最大DD pips」が2行へ折れる。 */
/* 基準幅は flex-basis で持ち、flex-grow は殺さない。grid で列トラックを
   共有すると、最終段の項目数が列数の倍数に満たないとき（例: 7項目なら4+3で
   3段目が1つ余る）総項目数に応じた `grid-column: span` や `nth-child` の
   出し分けが要る。flex-wrap は行ごとに独立して余白を伸縮できるため、最終段
   が何項目でも総数をCSSへ書かずに段の右端まで埋まる（基準幅は列数=4を
   前提にした値のままで、項目の総数は関係しない）。
   基準幅を単純に25%にすると、flexの行送り判定はgapを幅に加算するため
   `25%×4 + gap×3 > 100%` になり、4つ目が同じ段に入りきらず3列に落ちる
   （grid の fr はgapを差し引いてから割るが、flexの%基準は差し引かない）。
   calc()でgap分（列数-1本ぶんの1px）を先に引いてから4等分し、4項目が
   ちょうど100%に収まる幅にする。
   box-sizing を border-box にする必要もある。既定の content-box のままだと
   flex-basis は左右パディング（0.875rem×2＝28px）を含まない内容幅を指すため、
   セルの実際の占有幅は「flex-basisの値＋28px」まで膨らみ、calc()で揃えた
   はずの4等分がまた壊れて3列に落ちる（実機検証で発覚。grid 版は
   `minmax(0, 1fr)` のトラック幅いっぱいにストレッチしてから内側へ
   パディングを取るため、この問題が起きなかった）。border-box にして
   flex-basis をパディング込みの占有幅として扱わせる。 */
.ofx-summary__item {
  background: var(--wp--preset--color--surface);
  padding: 0.9375rem 0.875rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  box-sizing: border-box;
  flex: 1 1 calc((100% - 3px) / 4);
  /* 数値が収まらないときはセルごと折り返し、桁の途中では分断しない。 */
  min-width: min-content;
}

.ofx-summary__item dt {
  font-size: 0.65625rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
}

.ofx-summary__item dd {
  margin: 0 0 0.25rem;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* 色の担当は修飾子だけで決める。以前は4番目を最大DDとみなして
   `nth-child(4)` で赤くしていたが、保有中と最古の保有を足したとき最大DDが
   6番目へ動き、代わりに勝率が赤くなった。並び順に意味を持たせると、項目を
   増やすたびに無関係な項目が塗られる。最大DDは定義上つねに0以下なので
   ブロック側が `--negative` を付ける。累計pipsは符号が入れ替わるため
   付けない。 */
.ofx-summary__item--negative dd {
  color: var(--wp--preset--color--negative);
}

.ofx-summary__item--positive dd {
  color: var(--wp--preset--color--positive);
}

/* 母数の但し書きはカードの脚注。ポジションカードの `__foot` と同じ扱いにする。 */
.ofx-summary__note {
  padding: 0.875rem 1.375rem;
  border-top: 1px solid var(--wp--preset--color--line-soft);
  background: var(--wp--preset--color--base);
}

.ofx-summary__note-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--wp--preset--color--ink-muted);
}

.ofx-empty {
  color: var(--wp--preset--color--muted);
  font-size: 0.8125rem;
}

/* 累計pips推移。折れ線はPHPが組み立てたSVGで、色はすべてここが持つ。SVGへ
   16進数を書くと theme.json と正本が二つになる。 */
.ofx-chart {
  margin: 0;
  padding: 0.875rem 1rem 0.5rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
}

.ofx-chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ofx-chart__range {
  font-size: 0.6875rem;
  color: var(--wp--preset--color--muted);
}

.ofx-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 折れ線と終点は色を持たず、SVG根の `color` を継ぐ。累計の符号で塗り分ける
   のは根のクラス1つだけで済む。 */
.ofx-chart__svg--positive {
  color: var(--wp--preset--color--positive);
}

.ofx-chart__svg--negative {
  color: var(--wp--preset--color--negative);
}

.ofx-chart__grid line {
  stroke: var(--wp--preset--color--line-soft);
  stroke-width: 1;
}

.ofx-chart__zero {
  stroke: var(--wp--preset--color--line);
  stroke-width: 1;
}

.ofx-chart__stop--from {
  stop-color: var(--wp--preset--color--brass);
  stop-opacity: 0.22;
}

.ofx-chart__stop--to {
  stop-color: var(--wp--preset--color--brass);
  stop-opacity: 0;
}

.ofx-chart__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ofx-chart__point {
  fill: currentColor;
  stroke: none;
}

.ofx-chart__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.375rem 0 0.25rem;
  font-size: 0.6875rem;
}

.ofx-chart__drawdown {
  color: var(--wp--preset--color--muted);
}

.ofx-chart__total--positive {
  color: var(--wp--preset--color--positive);
}

.ofx-chart__total--negative {
  color: var(--wp--preset--color--negative);
}

/* 幅の広い表は、ページ本体ではなく表の中で横スクロールさせる。 */
.ofx-scroll-x {
  overflow-x: auto;
}

/* ここから下は移行記事の受け皿。旧テーマが持っていた表示層が無いままだと、
   幅を持った画像・表・長い文字列がページ本体を横へ広げる。 */

/* 移行記事の画像は width 属性つきで入っている。1行で本体のはみ出しが消える。 */
img {
  max-width: 100%;
  height: auto;
}

/* コア形式（figure.wp-block-table）の表は、上の「本文の要素」の節が引き受ける。
   包みで横スクロールさせる指定も見た目もそちらが正本で、ここには置かない。 */

/* 移行記事の表の多くは figure.wp-block-table に包まれていない素の <table> か、
   旧テーマの div.scroll の中にある。包みの有無に関わらず、表は本体ではなく表
   の中で横スクロールさせる。375px実測で /hestia-front/ が 405px → 375px。 */
.ofx-prose table,
.wp-block-post-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* 初期の生成記事には、Gutenberg の figure.wp-block-table を持たず素の table が
   本文直下へ保存されたものがある。包みを正規化するのは保存境界の担当だが、既存
   記事まで表示を崩したままにはしない。正規形と同じ罫線・余白・見出し背景を当て、
   横に広い場合だけ table 自身のスクロール受け皿を使う。 */
.ofx-prose > table,
.wp-block-post-content > table {
  display: table;
  width: 100%;
  margin: 1.75rem 0;
  overflow-x: visible;
  border: 1px solid var(--wp--preset--color--line);
  border-collapse: collapse;
  font-family: var(--wp--preset--font-family--gothic);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.ofx-prose > table :is(th, td),
.wp-block-post-content > table :is(th, td) {
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--wp--preset--color--line);
  text-align: left;
  vertical-align: top;
}

.ofx-prose > table thead th,
.wp-block-post-content > table thead th {
  background: var(--wp--preset--color--line-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ofx-prose > table tbody tr:nth-child(even),
.wp-block-post-content > table tbody tr:nth-child(even) {
  background: var(--wp--preset--color--base);
}

.ofx-prose .scroll,
.wp-block-post-content .scroll {
  overflow-x: auto;
}

/* 折り返せない長い文字列（URL、区切りのない英数字の並び）が本文の幅を決めて
   しまうのを止める。本文コンテナだけに当て、UIの字送りへは触れない。 */
.ofx-prose,
.wp-block-post-content {
  overflow-wrap: anywhere;
}

/* 旧エディタが残した `white-space: pre` のインライン指定は、折り返しそのもの
   を止めるので overflow-wrap では届かない。折り返せる pre-wrap / pre-line は
   意図があるので触らず、折り返せない pre と nowrap だけを戻す。
   本来は移行時にインライン指定を落とすのが筋で、これは表示層の受け皿。
   375px実測で /20200808_3accounts/ が 906px → 375px。 */
.ofx-prose span[style*="white-space"]:not([style*="pre-wrap"]):not([style*="pre-line"]),
.wp-block-post-content span[style*="white-space"]:not([style*="pre-wrap"]):not([style*="pre-line"]) {
  white-space: normal !important;
}

/* 旧ショートコードの変換先。凝った装飾はせず、崩れて見えないことだけを担う。 */
.ofx-legacy-box {
  margin: 1.5rem 0;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  background: var(--wp--preset--color--surface);
}

.ofx-legacy-box__title {
  margin: 0 0 0.625rem;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink);
}

.ofx-legacy-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--wp--preset--color--brass);
  background: var(--wp--preset--color--line-soft);
  color: var(--wp--preset--color--ink-muted);
}

.ofx-legacy-list {
  margin: 1.25rem 0;
  padding-left: 1.25rem;
}

.ofx-legacy-list > li {
  margin-bottom: 0.5rem;
}

.ofx-legacy-balloon {
  margin: 1.5rem 0;
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink-muted);
}

.ofx-legacy-button {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--wp--preset--color--brass);
  border-radius: 4px;
  color: var(--wp--preset--color--brass);
  font-size: 0.875rem;
  text-decoration: none;
}

.ofx-legacy-button:hover {
  background: var(--wp--preset--color--line-soft);
  text-decoration: none;
}

/* 3カラムが成立する幅では、目次の折りたたみを解除して常に開いた状態で見せる。
   details の open 属性は付けずに、表示だけをCSSで開く。開閉の切り替えに
   JavaScriptを使わないための指定で、狭い画面では閉じた状態のまま残る。
   ::details-content が効かない古いブラウザ向けに display も併記する。 */
@media (min-width: 1101px) {
  .ofx-toc__summary {
    display: none;
  }

  .ofx-toc__box::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .ofx-toc__box > .ofx-toc__list {
    display: block;
  }
}

/* 1100px以下では3カラムを畳む。目次は本文の直前へ、サイドバーは記事の下へ
   送る。目次は details のまま閉じた状態で始まるので、開いたまま画面を占有
   することはない。 */
@media (max-width: 1100px) {
  .ofx-single {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "toc"
      "body"
      "side";
    gap: 1.5rem;
  }

  /* 1カラムでは追従させない。画面の高さを左右のレールが奪う意味が無くなる。 */
  .ofx-single__rail--toc,
  .ofx-single__rail--side {
    position: static;
    align-self: auto;
    max-height: none;
    overflow: visible;
  }

  .ofx-single__rail--side .ofx-popular__list {
    overflow-y: visible;
  }

  .ofx-single__rail--side > .ofx-xm-cta {
    margin-top: 0;
  }

  /* サイドバーのカードは1カラムでは横に並べる。縦一列のままだと、記事の下に
     細長い列が延々と続く。横組みのカード1枚が入る幅で折り返す。 */
  .ofx-popular__list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.25rem 1.5rem;
  }

  /* 列が2本以上に分かれると、行の頭に引いた罫線が列をまたいでずれる。
     複数列のときは隙間だけで切る。 */
  .ofx-popular__item + .ofx-popular__item {
    border-top: 0;
  }
}

/* 固定ページは器が 996px + 左右2rem で 1060px。記事の3カラム（1100px）より
   狭いので、折り返す幅もそこへ合わせる。1100px で一律に落とすと、1060〜1100px
   の間で本文が 720px より痩せる。 */
@media (max-width: 1060px) {
  .ofx-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "toc"
      "body";
    gap: 1.5rem;
  }

  /* 1カラムでは追従させない。画面の高さを目次が奪う意味が無くなる。 */
  .ofx-page__rail--toc {
    position: static;
    align-self: auto;
    max-height: none;
    overflow: visible;
  }
}

/* 数値とグラフが窮屈になる幅では縦に並べ、注記は両方の下に置く。 */
@media (max-width: 900px) {
  .wp-block-group.ofx-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .ofx-hero > .ofx-chart,
  .ofx-hero > .ofx-summary + .ofx-empty {
    grid-column: 1;
    grid-row: 3;
    border-left: 0;
    border-top: 1px solid var(--wp--preset--color--line-soft);
  }

  .ofx-hero .ofx-summary__note {
    grid-row: 4;
  }

  .ofx-hero .ofx-chart__head {
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
  }
}

/* 縦積みでも幅のあるタブレットでは4列を使い、数値表を縦に間延びさせない。 */
@media (min-width: 640px) and (max-width: 900px) {
  .ofx-hero .ofx-summary__item {
    flex-basis: calc((100% - 3px) / 4);
  }
}

@media (max-width: 782px) {
  .ofx-position__levels,
  .ofx-position__levels--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 基準幅を2列へ上書きするだけでよい。最終段の埋め方はflex-growが
     デスクトップと同じ仕組みのまま面倒を見るので、ここに項目数を前提に
     した調整は要らない。gap1本ぶんの1pxを差し引いてから2等分するのは
     デスクトップと同じ理由（flexの%基準はgapを加算した上で行送りを
     判定するため）。 */
  .ofx-summary__item {
    flex-basis: calc((100% - 1px) / 2);
  }

  /* 表は狭い画面でも列を畳まない。畳むと列同士の比較という表の役目が消える。
     字とセルの余白を詰めて、横スクロールの量だけを減らす。 */
  figure.wp-block-table > table {
    font-size: 0.75rem;
  }

  figure.wp-block-table :is(th, td) {
    padding: 0.5rem 0.625rem;
  }

  /* 包みのない旧表だけは、狭い幅で表自身をスクロール箱へ戻す。desktopでは
     display:tableで列幅を均等に使い、mobileでは比較列を潰さず横へ送れる。 */
  .ofx-prose > table,
  .wp-block-post-content > table {
    display: block;
    overflow-x: auto;
    font-size: 0.75rem;
  }

  .ofx-prose > table :is(th, td),
  .wp-block-post-content > table :is(th, td) {
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
  }
}