/* ==========================================================================
   AI Value-Up Exit LP — 案件追加コンポーネント
   ==========================================================================
   ハーネス(beyondge-inc/lp-design-harness)の components.css に無い見た目を、
   場当たりの <style> ではなくクラスとして定義する(CLAUDE.md「新しい見た目は
   先にコンポーネントを定義してから使う」)。
   - セマンティックトークンのみ参照。生HEX・px直書きなし
   - ブレークポイントは 768px / 1024px の2つだけ
   - ハーネス本体への取り込み候補。汎用化できたら components.css へ移設する
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 数式ブロック(譲渡価値 = EBITDA × マルチプル)
   このLPのビジュアルコンセプト「数式と対比で語る」の主役。
   ヒーローの図版として使う(実プロダクトの画面が無い商材のため、案件固有の図版で置く)
   -------------------------------------------------------------------------- */

.formula {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.formula__caption {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.formula__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}

.formula__term {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.formula__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.formula__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.formula__unit {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.formula__op {
  align-self: flex-end;
  padding-bottom: 0.15em;
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text-muted);
}

/* 改善前の行は控えめに、改善後の行をブランド色で立てる */
.formula__row--before .formula__value {
  color: var(--color-text-muted);
}

.formula__row--after .formula__value {
  color: var(--color-primary);
}

.formula__row--after .formula__value--result {
  font-size: var(--text-3xl);
}

/* 行間の「↓ AI業務改革」ラベル */
.formula__between {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.formula__between::before,
.formula__between::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.formula__delta {
  display: inline-block;
  padding: 0.15em 0.8em;
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.formula__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   B. 論点 → 提案 の対比行(提案書の「論点｜弊社のご提案」レイアウト)
   左にラベル、中に論点、右に提案。モバイルでは縦積み
   -------------------------------------------------------------------------- */

.issues {
  display: grid;
  gap: var(--space-4);
}

.issue {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .issue {
    grid-template-columns: 11rem 1fr 1fr;
    gap: var(--space-6);
    padding: var(--space-6);
  }
}

.issue__label {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: center;
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
}

.issue__head {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.issue__problem,
.issue__answer {
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.issue__answer {
  font-weight: var(--weight-medium);
}

.issue__answer .issue__head {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   C. 前提の転換(従来 → いま)
   3つの前提が同時に変わったことを、数字・短句の対比だけで見せる
   -------------------------------------------------------------------------- */

.shifts {
  display: grid;
  gap: var(--space-5);
}

/* 3カラムは 1024px 以上のみ(768px では本文が窮屈になるため1カラム) */
@media (min-width: 1024px) {
  .shifts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.shift {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.shift__title {
  font-size: var(--text-lg);
}

.shift__from {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.shift__from strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
  color: var(--color-text-muted);
}

.shift__to {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.shift__to strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--color-primary);
}

.shift__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   D. 既存コンポーネントの小さな拡張
   -------------------------------------------------------------------------- */

/* .contrast を常に縦積みにする(ジグザグ行の片側に入れるとき) */
.contrast--stack {
  grid-template-columns: 1fr;
}

.contrast__head--no {
  color: var(--color-text-muted);
}

.contrast__head--go {
  color: var(--color-primary);
}

/* .ticks の「×」版(効かないケース・従来の限界) */
.ticks--no li::before {
  content: "×";
  color: var(--color-danger);
}

/* .ticks の本文色: 淡色背景の上でもAAを満たすよう本文色を使う */
.ticks--body {
  color: var(--color-text);
}

/* 比較表: 自社行を立てる。中央揃えセル */
.table--compare th:not(:first-child),
.table--compare td:not(:first-child) {
  text-align: left;
  min-width: 7rem;
}

.table--compare th {
  color: var(--color-text);
  white-space: normal; /* 見出しセルを折り返し可にして 768px でも表を収める */
  border-bottom: 2px solid var(--color-border);
}

.table--compare tr.is-us td {
  background-color: var(--color-primary-soft);
  font-weight: var(--weight-bold);
}

.table--compare tr.is-us td:first-child {
  color: var(--color-primary);
}

.table--compare .mark {
  display: inline-block;
  margin-right: var(--space-2);
  font-weight: var(--weight-black);
}

.table--compare .mark--go {
  color: var(--color-primary);
}

.table--compare .mark--no {
  color: var(--color-text-muted);
}

/* フェーズカード: 期間ラベルとゴールを持つカード。.card の派生 */
.phase__period {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0.2em 0.9em;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-full);
}

.phase__goal {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  font-weight: var(--weight-medium);
  border-bottom: 1px solid var(--color-border);
}

/* フェーズ間の関係を1行で示す帯 */
.phase-flow {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
  color: var(--color-on-primary);
  background-color: var(--color-cta);
  border-radius: var(--radius-md);
}

/* セクション末尾のCTA導線(中央寄せ・上余白) */
.section-cta {
  margin-top: var(--space-7);
  text-align: center;
}

/* フォームの select も .input と同じ見た目に */
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25em) 50%,
    calc(100% - 1.25em + 0.4em) 50%;
  background-size: 0.4em 0.4em;
  background-repeat: no-repeat;
  padding-right: 3em;
}

/* --------------------------------------------------------------------------
   E. 見出しの折り返し制御ユーティリティ
   日本語見出しの1文字孤立行を防ぐ。<br class="u-br-md"> は 768px 以上でだけ改行
   -------------------------------------------------------------------------- */

.u-balance {
  text-wrap: balance;
}

.u-br-md {
  display: none;
}

@media (min-width: 768px) {
  .u-br-md {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   F. 追加修正(モバイルQAの結果)
   -------------------------------------------------------------------------- */

/* 数式: 「= 結果 +Δ」をひとまとまりで折り返す(= が行末に孤立しないように) */
.formula__result {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}

/* ジグザグ行: DOMは常に「本文 → メディア」の順(モバイルの読み順を優先)。
   768px 以上で --lead を付けた行だけメディアを左に出す */
@media (min-width: 768px) {
  .media-row--lead .media-row__media {
    order: -1;
  }
}

/* 比較表がモバイルで横スクロールできることの案内(768px 以上では非表示) */
.table-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .table-hint {
    display: none;
  }
}

/* 3カラムだが 1024px 未満では1カラムにするグリッド(.grid--3 の代替。
   本文量が多いカードで 768px の3分割が窮屈になるときに使う) */
.grid--3-lg {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .grid--3-lg {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ヒーローのボタン列: 幅が足りないときはボタン文言を折り返さず、2つ目のボタンを次行へ */
.hero__actions--wrap {
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   G. 譲渡価格の簡易試算ツール(ヒーローの図版として使う。数式カードの後継)
   JS(js/simulator.js)が無い環境では入力フォームとして表示され、結果欄は出ない
   -------------------------------------------------------------------------- */

.sim {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sim__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.sim__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sim__form {
  display: grid;
  gap: var(--space-4);
}

/* 金額3項目は横並び(狭い幅では1カラム) */
.sim__row {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .sim__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sim .label {
  font-size: var(--text-xs);
}

.sim .input {
  padding: 0.6em 0.9em;
  font-size: var(--text-sm);
}

.sim .btn {
  width: 100%;
}

.sim__result {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sim__result[hidden] {
  display: none;
}

.sim__values {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .sim__values {
    grid-template-columns: 1fr 1fr;
  }
}

.sim__item {
  display: grid;
  gap: var(--space-1);
}

.sim__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.sim__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1.1;
  color: var(--color-text-muted);
}

.sim__item--after .sim__value {
  color: var(--color-primary);
}

.sim__unit {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.sim__delta {
  display: inline-block;
  justify-self: start;
  padding: 0.1em 0.8em;
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.sim__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 前提の開閉(FAQと同じ details だが、小さく) */
.sim__assump {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.sim__assump summary {
  cursor: pointer;
  font-weight: var(--weight-bold);
}

.sim__assump p {
  margin-top: var(--space-2);
}

/* 試算結果の引き渡し: 要約テキスト + コピー + 外部フォームへの導線 */
.sim__handoff {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sim__summary {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sim__handoff-actions {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .sim__handoff-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* ステートメント型ヒーローの見出しを一段小さく(text-5xl は 375px で1行8文字になり、
   「イグジットの前に、」が2行に割れるため)。幅制限も外して2行ロックアップを保つ */
.hero--statement .hero__title--md {
  font-size: var(--text-4xl);
  max-width: none;
}