/* AI副業レポート専用CSS（report/index.php からインラインstyleブロックを分離・2026-06-11）
   このファイルは report ページの $extra_head から <link> でのみ読み込まれる。
   全セレクタは .rep-* / .report-page にスコープ済み＝他ページには影響しない。 */
  .report-page main { padding-block: var(--space-4) var(--space-6); }
  .report-page .container { max-width: calc(700px + var(--gutter-mobile) * 2); }

  /* ヒーロー */
  .rep-eyebrow {
    display: inline-block; margin-bottom: var(--space-3);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .08em;
    color: var(--color-accent); background: var(--color-accent-soft);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  }
  .rep-hero { text-align: center; margin-bottom: var(--space-5); }
  .rep-hero h1 { font-size: clamp(31px, 7vw, 47px); line-height: var(--lh-tight); }
  .rep-hero__sub { display: block; margin-top: var(--space-2); font-size: .56em; font-weight: var(--fw-medium); color: var(--color-text-sub); line-height: var(--lh-normal); }
  .rep-hero__lead { max-width: 600px; margin: var(--space-4) auto 0; color: var(--color-text-sub); font-size: var(--fs-base); line-height: var(--lh-loose); text-align: left; }
  .rep-byline { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; color: var(--color-text-mute); font-size: var(--fs-sm); }
  .rep-byline__name { font-weight: var(--fw-bold); color: var(--color-text); }
  .rep-byline__logo { height: 28px; width: auto; }

  /* セクション */
  .rep-section { margin-top: var(--space-6); }
  .rep-section > h2 { margin-bottom: var(--space-3); }
  .rep-section p { line-height: var(--lh-loose); margin-bottom: var(--space-3); }
  .rep-lead { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-normal); }

  .rep-note { margin: var(--space-3) 0; font-size: var(--fs-sm); color: var(--color-text-sub); }
  .rep-note p { margin: 0; line-height: var(--lh-normal); }

  /* 2つの収入タイプは共通部品 .steps（番号丸＝緑）を使用（2026-06-11 統一）。専用CSS不要。 */

  /* 比較表：全幅でカード表示に統一（<table>のセマンティクスは維持）。PCは2列グリッド */
  .rep-table-wrap { margin-top: var(--space-4); }
  table.rep-table { display: block; width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  table.rep-table colgroup, table.rep-table thead { display: none; }
  table.rep-table tbody { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
  table.rep-table tr { display: block; box-sizing: border-box; border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
  table.rep-table tbody th { display: block; width: 100%; box-sizing: border-box; background: var(--color-bg-dark); color: var(--color-text-invert); font-size: var(--fs-base); font-weight: var(--fw-bold); padding: var(--space-2) var(--space-3); text-align: left; border: none; }
  table.rep-table td { display: grid; box-sizing: border-box; grid-template-columns: 8.5em 1fr; gap: var(--space-2); align-items: start; border-bottom: var(--border-thin); padding: 9px var(--space-3); }
  table.rep-table tr td:last-child { border-bottom: none; }
  table.rep-table td::before { content: attr(data-label); font-weight: var(--fw-bold); color: var(--color-text-sub); font-size: var(--fs-xs); }
  table.rep-table td .range-bar { grid-column: 2; margin-top: var(--space-1); max-width: none; }
  table.rep-table td .type-badge { justify-self: start; }
  @media (min-width: 600px) {
    /* 本文幅のまま2カラム。小見出し(h3)と表カードの左端が揃う */
    table.rep-table tbody { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); align-items: stretch; }
  }

  /* アコーディオン（各副業の詳細） */
  .rep-acc { margin-top: var(--space-3); padding: 0; border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); transition: background var(--duration-fast) var(--ease-out); }
  .rep-acc + .rep-acc { margin-top: var(--space-3); }
  .rep-acc > summary { list-style: none; cursor: pointer; padding: var(--space-3) calc(var(--space-5) + var(--space-2)) var(--space-3) var(--space-4); display: block; position: relative; background: transparent; transition: background var(--duration-fast) var(--ease-out); }
  .rep-acc > summary::-webkit-details-marker { display: none; }
  .rep-acc > summary::marker { content: ""; }
  .rep-acc:not([open]):hover { background: var(--color-bg-soft); }
  .rep-acc__head { display: flex; align-items: center; gap: var(--space-2); }
  .rep-acc__num { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-text-invert); background: var(--color-accent); border-radius: var(--radius-full); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .rep-acc__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
  .rep-acc > summary::after { content: "+"; position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); font-size: var(--fs-xl); color: var(--color-accent); font-weight: var(--fw-normal); line-height: 1; transition: color var(--duration-fast) var(--ease-out); }
  .rep-acc[open] > summary { background: var(--color-bg-soft); border-bottom: var(--border-thin); }
  .rep-acc[open] > summary::after { content: "−"; }
  .rep-acc__teaser { display: block; margin-top: 6px; padding-left: 38px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-sub); }
  .rep-acc__body { padding: var(--space-4); }
  /* 小見出しの上に余白を確保（詰まり緩和・2026-06-11） */
  .rep-section > h3 { margin-top: var(--space-5); }
  .rep-acc__body h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
  .rep-acc__body > h3:first-child { margin-top: 0; }
  .rep-section ul:not(.rep-facts) > li { margin-bottom: var(--space-3); line-height: var(--lh-loose); }
  /* 目次→アンカー移動時、移動先(main.jsがtabindex=-1+focus付与)のUA既定フォーカス枠を抑制。キーボード操作時(:focus-visible)は維持・2026-06-11 */
  /* 目次→アンカー移動時、main.jsが移動先に tabindex=-1 + .focus() を付与。
     スクリプトによるフォーカスはブラウザが :focus-visible 扱いする場合があり、
     :not(:focus-visible)では枠が残る。スクロール先は非操作要素なので無条件で枠を消す。 */
  .report-page [tabindex="-1"]:focus { outline: none; box-shadow: none; }
  .rep-acc__what { margin: 0 0 var(--space-3); font-size: var(--fs-base); line-height: var(--lh-loose); }
  .rep-acc__real { margin: 0 0 var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--color-text-sub); }
  ul.rep-facts { list-style: none; margin: 0; padding: 0; border-top: var(--border-thin); }
  ul.rep-facts li { display: grid; grid-template-columns: 7em 1fr; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border-thin); font-size: var(--fs-sm); line-height: var(--lh-normal); }
  ul.rep-facts b { color: var(--color-accent); font-weight: var(--fw-bold); }
  ul.rep-facts li.is-key b { color: var(--color-accent-hover); }
  ul.rep-facts li.is-key span { font-weight: var(--fw-bold); }
  .rep-fit { margin-top: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-normal); }
  .rep-fit b { color: var(--color-accent-hover); }

  /* 型バッジ（.type-badge）と収入レンジバー（.range-bar）は components.css の汎用部品へ昇格（2026-06-11）。色は --color-type-stock/labor。 */
  .rep-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--color-text-mute); flex-wrap: wrap; }

  /* 選び方は共通部品 .steps（番号丸＝カタログ標準の緑）を使用（2026-06-11 統一）。専用CSS不要。 */

  /* 出典 */
  .rep-sources { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-thin); }
  .rep-sources h2 { text-align: left; font-size: var(--fs-lg); }
  .rep-sources h2::after { display: none; }
  .rep-sources ol { margin: var(--space-3) 0 0; padding-left: 1.4em; }
  .rep-sources li { font-size: var(--fs-xs); color: var(--color-text-sub); line-height: var(--lh-normal); margin-bottom: var(--space-2); }
  .rep-sources a { word-break: break-all; }
  .rep-sources .rep-note { margin-top: var(--space-4); }

  /* 目次 */
  .rep-toc { max-width: var(--measure); margin: var(--space-5) auto 0; padding: var(--space-4); border: var(--border-thin); border-radius: var(--radius-md); background: var(--color-bg-soft); }
  .rep-toc__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-mute); margin-bottom: var(--space-2); letter-spacing: .06em; }
  .rep-toc ol { margin: 0; padding-left: 1.3em; }
  .rep-toc li { margin-bottom: 6px; line-height: var(--lh-normal); }
  .rep-toc a { text-decoration: none; }

  .rep-divider { border: none; border-top: var(--border-thin); margin: var(--space-5) 0; }


  /* 数字の階段（積み上げイメージのグラフ）—— 今さらブログ入門で使用。色はトークンのみ */
  .rep-stairs { display: flex; align-items: flex-end; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); }
  .rep-stairs__col { flex: 1; text-align: center; }
  .rep-stairs__val { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-accent); margin-bottom: 4px; }
  .rep-stairs__bar { display: block; height: var(--h); background: var(--color-accent-soft); border-top: 3px solid var(--color-accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .rep-stairs__label { display: block; font-size: var(--fs-xs); color: var(--color-text-mute); margin-top: 6px; }
  .rep-stairs__col--top .rep-stairs__val { color: var(--color-accent-hover); }
  .rep-stairs__col--top .rep-stairs__bar { background: var(--color-accent); border-top-color: var(--color-accent-hover); }

  /* 各章末「目次へ戻る」リンク（今さらブログ入門）。控えめ・右寄せ */
  .rep-backtoc { margin-top: var(--space-4); text-align: right; font-size: var(--fs-sm); }
  .rep-backtoc a { color: var(--color-text-mute); text-decoration: none; }
  .rep-backtoc a:hover { color: var(--color-accent); text-decoration: underline; }

  /* スマホ可読性（今さらブログ入門 = .page-imasara のみ。ai-fukugyo無影響）*/
  .rep-totop { position: fixed; right: var(--space-3); bottom: var(--space-3); z-index: 900; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-bg-dark); color: var(--color-text-invert); display: none; align-items: center; justify-content: center; text-decoration: none; font-size: var(--fs-lg); box-shadow: var(--shadow-2); }
  @media (max-width: 600px) {
    .page-imasara .rep-totop { display: flex; }
    .page-imasara .rep-section p { margin-bottom: var(--space-4); }
    .page-imasara main { padding-block: var(--space-3) var(--space-5); }
    .page-imasara .rep-hero { margin-bottom: var(--space-4); }
    .page-imasara .rep-hero__lead { margin-top: var(--space-3); }
  }