/* ============================================================================
   LiverStats 公式サイト — 下層ページのスマホ仕上げ（renewal.css の後に読む）
   CEO 2026-10-25「スマホでも正確に見やすく表示されるように細かく確認して修正してください」

   対象: about / features / contact / advertise / 404 / terms / privacy / commerce / legal
   renewal.css（CTO 管理）は触らず、この 1 枚で上書きする。ヘッダー・フッターは共通部品なので
   ここでは触らない（問題は CTO へ報告する）。

   直すもの（390px / 360px の 1 画面ずつの撮影で見つけたもの）:
     1. 語の途中の折返し（「マネー / ジャー」「分 / 析サービス」「TikTokログ / インで」）
     2. 本文が 15px 未満（法務 4 頁の本文 14.4px・表 14.08px・連絡枠の注記 13.6px・運営欄 14.08px）
     3. タップ領域が 44px 未満（連絡枠のメールリンク 26px・カード内の文中リンク）
     4. 余白の不揃い（帯の中のカードだけ幅が狭い・法務の枠が画面端に貼り付く）
     5. 404 の下に地色だけの空き（本文が短くフッターが途中で終わる）
   ============================================================================ */

/* ---------- 1. 折返し ---------- */
/* 短い文（見出し下の説明・カード・連絡枠・運営欄）は語の途中で折らない。
   keep-all: 日本語の文字間で折らず 空白や括弧の前で折る（iOS Safari を含め全ブラウザ）
   overflow-wrap: anywhere: 1 行に収まらない語だけは途中で折って横はみ出しを防ぐ
   auto-phrase: 対応ブラウザ（Chrome / Android）は文節で折る（非対応は keep-all のまま） */
.page-hero p,
.section__desc,
.card__text,
.contact-box__note,
.contact-box > p,
.section--alt > .container > p,
main.container > p {
  word-break: keep-all;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
/* 見出しは balance（renewal.css）を残し 文節で折れるブラウザだけ文節で折る */
main h1,
main h2,
main h3,
.card__title,
.section__title {
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
/* カード見出しは短いので語の途中で折らない（WebKit 360px で「スク｜リプト」が出た） */
.card__title { word-break: keep-all; word-break: auto-phrase; }
/* 法務 4 頁は「、」「。」のある長文なので keep-all にしない（句読点でしか折れず行末が揃わない）。
   文節で折れるブラウザだけ文節で折り 長い URL・メールは途中で折って横はみ出しを防ぐ */
main.legal p,
main.legal li,
main.legal td,
main.legal th {
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
main.legal a,
.card__text a,
.contact-box__email a { overflow-wrap: anywhere; }
/* 404 の見出し「404 — ページが見つかりません」は <wbr> の位置（ページが｜見つかりません）でだけ折る */
main.container > h1 { word-break: keep-all; }

/* ---------- 2. 文字の大きさ（本文は 15px 以上） ---------- */
.contact-box__note { font-size: 0.96rem; line-height: 1.75; }
.contact-box > p[style] { font-size: 0.95rem !important; }
.section--alt > .container[style] { font-size: 0.95rem !important; line-height: 1.8; }
main.legal p,
main.legal li { font-size: 0.96rem; line-height: 1.8; }
main.legal .updated { font-size: 0.94rem; }
main.legal .legal-table { font-size: 0.95rem; }
main.legal p[style] { font-size: 0.95rem !important; }
main.legal code { font-size: 1em; }
main .btn:not(.btn--sm) { font-size: 1rem; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- 3. タップ領域（44px 以上） ---------- */
.contact-box__email a {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  margin: -0.2rem 0;
  min-height: 44px;
  line-height: 1.5;
  border-radius: 12px;
}
.contact-box__email a:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
/* 文中リンクは行の高さを変えずに当たり判定だけ広げる（inline-block の padding は行送りに乗らないよう負の margin で相殺） */
.card__text a,
.contact-box__note a,
.section--alt > .container a,
main.legal p a,
main.legal li a,
main.legal td a {
  display: inline-block;
  padding: 0.55em 0;
  margin: -0.55em 0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------- 4. 余白をそろえる ---------- */
@media (max-width: 767px) {
  /* 帯（section--alt）は画面端まで伸ばし 中のカードを他のカードと同じ幅にする */
  .container > .section--alt {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0;
  }
  .section--alt { border-radius: 0; }
  /* 帯が container の外にある形（features）は帯の左右 padding を外し 中のカードを他と同じ 1rem の位置にそろえる */
  main > .section--alt { padding-left: 0; padding-right: 0; }
  /* 帯の中の運営欄（container の入れ子）は左右の余白をカードの文字位置にそろえる */
  .container > .section--alt > .container { width: 100%; padding: 0 1.05rem; box-sizing: border-box; }
  .container > .section--alt > .container > p { margin: 0; }

  /* 法務 4 頁: 枠を画面端から離し 上にも間を空ける */
  main.legal { margin: 0.75rem 0.75rem 0; }
  main.legal .container { width: calc(100% - 1.6rem); }
  main.legal h2 { font-size: 1.2rem !important; line-height: 1.35; }
  main.legal h3 { font-size: 1.05rem; line-height: 1.4; }
  main.legal .legal-table th { padding: 0.7rem 0.85rem 0.3rem; }
  main.legal .legal-table td { padding: 0.5rem 0.85rem 0.85rem; }

  /* 連絡枠: 幅いっぱいを使う */
  .contact-box { padding: 1.5rem 1.1rem; }

  /* ページ下の CTA（about）: 2 つのボタンを縦に並べ 幅をそろえる */
  main > .container > p[style*="text-align:center"] { display: grid; gap: 0.6rem; justify-items: center; }
  main > .container > p[style*="text-align:center"] .btn { width: min(100%, 20rem); }
}

/* ---------- 5. 本文が短いページ（404）でもフッターを画面の下に置く ---------- */
body { min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: auto; }
body > main.container { width: min(100% - 2rem, var(--max-w)); }
body > .site-footer { flex-shrink: 0; }