/* /lead 用：使い方導線（ヘッダー右側） */
.tp-helpNav{
  display: flex;
  justify-content: flex-end;
}
.tp-helpNav__btn{
  white-space: nowrap;
}

/* SPでは右寄せより“押しやすさ”優先 */
@media (max-width: 720px){
  .tp-helpNav{
    justify-content: stretch;
  }
  .tp-helpNav__btn{
    width: 100%;
  }
}
.tp-helpInline{
  margin-top: -6px;
  padding: 0 6px;
  font-size: 13px;
  color: var(--tp-muted);
}
/* =========================================================
  Lead tool /lead/ : Mobile-only layout fixes
  - PCは維持、スマホだけ整える
========================================================= */

@media (max-width: 720px){

  /* -----------------------------
    基本：はみ出し根絶
  ----------------------------- */
  .tp-container,
  .tp-card,
  .tp-stack,
  .tp-header,
  .tp-header__side{
    min-width: 0;
  }

  /* “切れて見えない”原因になりやすい overflow をスマホだけ緩める */
  .tp-card{
    overflow: visible;
  }

  /* 長い文字が原因の横はみ出しを抑える（必要時だけ折り返し） */
  .tp-meta,
  .tp-sub,
  .tp-help{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* -----------------------------
    Header：左右2カラム → 1カラム
  ----------------------------- */
  .tp-header{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tp-header__side{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  /* 汎用CTR表（バッジ/メタ）を見切れさせない */
  .tp-meta{
    white-space: normal;
  }

  /* 使い方ボタンは幅100% */
  .tp-helpNav__btn{
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }

  /* select + 初期化：横並びをやめて縦積み */
  .tp-toolbar__row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #roundingMode,
  #resetAll{
    width: 100%;
  }

  /* -----------------------------
    Stepper：3つを縦に積む（押しやすく）
  ----------------------------- */
  .tp-stepper{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tp-step{
    width: 100%;
  }

  /* ステッパー下のヘルプリンクを“カード外”でも自然に */
  .tp-helpInline{
    margin-top: 2px;
  }

  /* -----------------------------
    入力ブロック：tp-local-row（2カラム）→ 1カラム
  ----------------------------- */
  .tp-local-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* “想定順位（CTR）”の中の2列（select + input）も縦に */
  .tp-local-row .tp-local-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ラベル右の「CTRを手入力」が窮屈なら改行許可 */
  .tp-rowBetween{
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 入力類は幅100%（テーマが変でも崩れにくい） */
  .tp-input,
  .tp-select,
  .tp-btn{
    max-width: 100%;
  }

  /* -----------------------------
    セクション見出し：右上ボタン群を折り返す
  ----------------------------- */
  .tp-sectionHead{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tp-sectionHead__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  /* 複数比較のボタン3つは縦積み（タップしやすさ優先） */
  .tp-actionsWrap{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tp-actionsWrap .tp-btn{
    width: 100%;
  }

  /* -----------------------------
    KPI：2カラム → 1カラム
  ----------------------------- */
  .tp-kpi{
    min-width: 0;
  }
  .tp-local-row .tp-kpi{
    width: 100%;
  }

  /* -----------------------------
    テーブル：横スクロールを“テーブルラッパー内だけ”で許可
    （ページ全体は横スクロールさせない）
  ----------------------------- */
  .tp-tableWrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .tp-table{
    min-width: 980px; /* 列が多いのでテーブル自体は縮めない */
  }

  /* もし親で横を隠してしまっている場合に備えて */
  .tp-tableWrap *{
  }

  /* -----------------------------
    Toast：スマホで画面外に出ない
  ----------------------------- */
  .tp-toast{
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
  }

}