/* ===========================================================================
   「なぜこの形にしたか」の説明レイヤー（プレビュー限定・公開ビルドには出ない）

   目的: 先生が一人で画面を見たときに、お送りいただいた原稿がどこへ行ったのか、
   なぜその置き方にしたのかを、こちらに聞かずに確かめられるようにする。
   先生が出した条件は「伝わる内容は変わらないように」の一点なので、
   このレイヤーの本体はデザインの説明ではなく、その条件を満たしている証明。

   書くことは2つだけ:
     1. 原稿のどこから来たか
     2. 読み手（お客様）に何が起きるか
   「白い面にして余白を広げ」のような作りの話は書かない。先生には関係がない。

   見た目の原則: サイトの配色（藍 #252a57 / 地 #f6f5f2）とは別の青緑を使い、
   先生の原稿の一部に見えないようにする。説明は必ず本文の「外」に見えること。
   =========================================================================== */

:root {
  --why-ink: #0f6f8c;
  --why-bg: #f0f7f9;
  --why-line: #c5dde4;
  --why-add-ink: #9a6508;
  --why-add-bg: #fdf6e8;
  --why-add-line: #ead9b4;
}

/* 既定では出さない。レイアウトを1pxも動かさないよう display で消す。 */
[data-why] { display: none; }
body.why-on [data-why] { display: block; }


/* ── 1. ページの先頭に出る要約 ──────────────────────────────── */

body.why-on .why-top {
  border: 1px solid var(--why-line);
  border-left: 3px solid var(--why-ink);
  border-radius: 10px;
  background: var(--why-bg);
  padding: 22px 24px;
  margin-bottom: 36px;
}
body.why-on .why-top-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--why-ink);
  margin: 0 0 12px;
}
body.why-on .why-top-head svg { width: 16px; height: 16px; flex: none; }
body.why-on .why-top p {
  font-size: 15px;
  line-height: 1.9;
  color: #2b3a3f;
  margin: 0;
  max-width: 40em;
}
body.why-on .why-top p + p { margin-top: 0.7em; }

/* 要約の中の内訳（原稿のまま / 置き方 / 言い換え / 補い の件数） */
body.why-on .why-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--why-line);
}
body.why-on .why-counts > span {
  font-size: 12px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--why-line);
  color: #2b3a3f;
}
body.why-on .why-counts > span b {
  font-weight: 700;
  color: var(--why-ink);
  font-feature-settings: "tnum";
}
body.why-on .why-counts > span.is-add {
  background: var(--why-add-bg);
  border-color: var(--why-add-line);
}
body.why-on .why-counts > span.is-add b { color: var(--why-add-ink); }


/* ── 2. ブロックごとの説明 ──────────────────────────────────── */

/* 説明は「この次に来るブロック」の話なので、上を広く下を狭く取る。
   均等にすると直前のブロックに付いて見え、どれの説明か読み違える。
   閉じているときは display:none なので、この余白は一切効かない。

   ここだけ lead.css の4つの段（--gap-*）を使わない。段は寄せ方ごとに値が動くが、
   説明はこちらからの注記であって先生の面の一部ではないので、4つの寄せ方の
   どれでも同じ見た目にする（下の「3. 寄せ方による差を打ち消す」と同じ理由）。 */
body.why-on .why {
  border-left: 3px solid var(--why-line);
  background: var(--why-bg);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 34px 0 14px;
  max-width: 44em;
}
/* 章の先頭に来るときは、帯の padding が既に上の間隔を作っている。 */
body.why-on .inheritance-section > .why:first-child { margin-top: 0; }
/* こちらで補った箇所は色を変える。先生に判断してほしいのはここだけ。 */
body.why-on .why.is-add {
  border-left-color: var(--why-add-ink);
  background: var(--why-add-bg);
}

/* 印（原稿のまま / 置き方を変えました / 言い換えました / こちらで補いました） */
body.why-on .why-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--why-line);
  color: var(--why-ink);
}
body.why-on .why-tag.is-same { color: #5c6b70; border-color: #d4dcde; }
body.why-on .why-tag.is-add {
  color: var(--why-add-ink);
  border-color: var(--why-add-line);
}

/* 原稿の出どころ。先生が自分の資料を辿れる言い方で書く。 */
body.why-on .why-src {
  font-size: 12.5px;
  line-height: 1.7;
  color: #5c6b70;
  margin: 0 0 8px;
}
body.why-on .why-src b { font-weight: 700; color: #2b3a3f; }

/* 本体。なぜこの形か＝読み手に何が起きるか。 */
body.why-on .why-txt {
  font-size: 14.5px;
  line-height: 1.9;
  color: #2b3a3f;
  margin: 0;
}
body.why-on .why-txt + .why-txt { margin-top: 0.7em; }

/* 先生に確認してほしい一言。補った箇所にだけ置く。 */
body.why-on .why-ask {
  font-size: 13.5px;
  line-height: 1.8;
  font-weight: 700;
  color: var(--why-add-ink);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--why-add-line);
}


/* ── 3. 寄せ方による差を打ち消す ────────────────────────────
   説明は「こちらからの注記」なので、4つの寄せ方のどれでも同じ見た目にする。
   寄せ方は先生の面の話であって、説明の話ではない。 */
body.why-on :is(.why, .why-top) :is(p, span, b) {
  font-family: inherit;
  letter-spacing: 0.01em;
}
/* 中身が「新」のとき、相続・顧問の各章は画面幅いっぱいの帯になり、左右のアキは
   chapters.css が .sec-label / .sec-title / .inheritance-section の3つにだけ与える。
   要約は .inner の直下に置くので、同じ式を margin で持たないと画面の端まで広がる。
   箱に枠と地色があるので padding ではなく margin で寄せる。 */
body.why-on.content-new.theme-b .access.inheritance > .inner > .why-top {
  margin-inline: max(var(--chap-gutter), calc((100% - var(--chap-measure)) / 2));
}


/* ── 4. 狭い画面 ─────────────────────────────────────────── */
@media (max-width: 720px) {
  body.why-on .why-top { padding: 18px 16px; border-radius: 8px; }
  body.why-on .why { padding: 14px 14px; margin-bottom: 16px; }
  body.why-on .why-txt { font-size: 14px; }
  body.why-on .why-top p { font-size: 14.5px; }
}