/* 2026-07-28: html{scroll-behavior:smooth} を撤去。テーマ function.js の jQuery .animate({scrollTop}) と競合し、
   サブナビを押しても最初の約0.5秒ほぼ動かない（実測 170ms:22px→488ms:143px・目標11425px／auto なら 180ms:4119px で490ms着地）。
   金型4本(airpods/aquos/apple-machine/ipad)とテーマ原典 style.css は scroll-behavior を1つも宣言していない。 */
/* ============================================================
   beginners-guide / extra.css
   theme-porter 追加分のみ。テーマ css/style.css は編集しない。
   使用トークン（theme-tokens.md）:
     --color9 #224995 / --color4 #14355D / --color10 #EBF0F6
     角丸 5px（最頻）/ ボタンのみピル999px / Noto Sans JP
   色は #224995 / #14355D / #EBF0F6 + 白 + #333 + 補助罫(#C8D4E4) + 強調赤#E94F4F + LINE緑#06C755 に限定。

   方針:
   ・delivery-purchase/extra.css の crafted 器（worry / compare-table / compare-pick /
     network-popup(box/grey-box/imei) / info-list / apply-nudge / cta-band / section-todo / 共通スケール）
     を「class/CSS（視覚の器）だけ」流用。本文は wireframe-content の beginners 固有コピー。
   ・beginners 固有の追加は最小:
       .topbanner.fv-todo（FVプレースホルダ枠・作り込まない）
       .bg-feat .fc（選ばれる理由 特長4カード）
       .matrix（やること順番 早見表）
       .branch（トラブル別分岐カード／❌→craft）
       .dual（二重消去の2列図解／❌新規）

   ── bg-v3（?v=bg-v3 / 捏造ゲート是正・CSS変更なし） ──
   ・index.html のみ更新。法人カード・法人買取の流れの「データ消去（の）証明に対応します」断定を是正。
     消去（行為）は断定可だが証明書発行可否は本番未掲載のため「証明書の発行有無は［要確認］」を付与し、line619 の既存表現に統一。
     extra.css のスタイルは無変更。
   ============================================================ */

/* ============================================================
   統一スペーシングスケール（delivery と同値）
   ============================================================ */
:root{
  --sp-1: 8px;
  --sp-2: 10px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 30px;
  --card-board: #EBF0F6;
}

.main.guide-broken:where(.guide-broken) .info-list .il-num, .main.guide-broken:where(.guide-broken) .compare-table td{
  font-variant-numeric: tabular-nums;
}

/* ---- 汎用: section 内 補助本文（line-content 補完） -------- */
.main.guide-broken:where(.guide-broken) .part .sub-note{
  font-size: 11px;
  color: #5A7386;
  line-height: 1.8;
  margin-top: 10px;
}
.main.guide-broken:where(.guide-broken) .part .sub-note a{ color: #224995; }

                                           
.main.guide-broken:where(.guide-broken) .part .info-list + .line-btitle, .main.guide-broken:where(.guide-broken) .part .compare-table + .line-btitle, .main.guide-broken:where(.guide-broken) .part .compare-note + .line-btitle{
  margin-top: 20px;
}

/* ============================================================
   01 FV（🔶 topbanner 土台 ／ 作り込まない＝.fv-todo プレースホルダ）
   100点鉄則2：FVは先方デザイン前提。bespoke 偽装せず想定要素のラベルのみ。
   token: bg --color4・見出し白・アクセント淡青#9DB8E6・破線枠
   ============================================================ */
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo > .thisinner{
  width: calc(100% - 30px);
}
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-inner{
  background: #14355D;
  border: 2px dashed #9DB8E6;
  border-radius: 5px;
  padding: 24px 18px;
  color: #fff;
}
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #9DB8E6;
  margin-bottom: 8px;
}
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-title{
  font-size: 22px; /* 2026-08-27: clamp→gold接地(下部 retrofit ブロック参照) */
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-slots{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-slots li{
  font-size: 12px;
  line-height: 1.6;
  color: #CFE0F4;
  padding-left: 14px;
  position: relative;
}
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-slots li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9DB8E6;
}
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-slots li b{ color: #fff; }

/* ============================================================
   02b reasons（🔶 特長4カード ／ delivery .feat .fc を beginners 用 .bg-feat .fc に翻訳）
   board に白カードを2×2で載せる（テーマ .point-list 作法・影なし・締めpadding）。
   token: radius5・見出し--color4・本文#333・地--color10
   ============================================================ */
.main.guide-broken:where(.guide-broken) .bg-feat{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  background: var(--card-board);
  border-radius: 5px;
  padding: var(--sp-3);
}
.main.guide-broken:where(.guide-broken) .bg-feat .fc{
  background: #fff;
  border-radius: 5px;
  padding: var(--sp-3);
}
.main.guide-broken:where(.guide-broken) .bg-feat .fc .ft{
  font-size: 13px;
  font-weight: 700;
  color: #14355D;
  line-height: 1.45;
  margin-bottom: 6px;
}
.main.guide-broken:where(.guide-broken) .bg-feat .fc .fd{
  font-size: 12px;
  line-height: 1.65;
  color: #333;
}
.main.guide-broken:where(.guide-broken) .bg-feat .fc .fd a{ color: #224995; }

/* ============================================================
   03 methods / 09 後半（🔶 ／ delivery extra.css「A04 compare」器を流用）
   ============================================================ */
/* 2026-08-27 撤去: grid型 compare-table のページ実装
   ＝ build/_shared/components.css が唯一の実体（_INDEX §3「共通部品はページ extra.css に複製しない」）。 */

.main.guide-broken:where(.guide-broken) .compare-note{
  font-size: 11px;
  color: #5A7386;
  line-height: 1.6;
  margin-bottom: 14px;
}
.main.guide-broken:where(.guide-broken) .compare-note a{ color: #224995; }

/* ============================================================
   汎用 info-list（02b補助 / 05 prepare / 07 docs / 08 tips / 10 glossary / 10b voices）
   delivery extra.css「汎用 info-list」器を流用。
     ・既定         : 番号ピル付き（順序のある手順）
     ・--accent     : 左ネイビーバー（順不同の項目）
   ============================================================ */
.main.guide-broken:where(.guide-broken) .info-list{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  background: var(--card-board);
  border-radius: 5px;
  padding: var(--sp-3);
}
.main.guide-broken:where(.guide-broken) .info-list .il{
  background: #fff;
  border-radius: 5px;
  padding: var(--sp-3);
}
.main.guide-broken:where(.guide-broken) .info-list--accent .il{
  border-left: 4px solid #224995;
  border-radius: 0 5px 5px 0;
}
.main.guide-broken:where(.guide-broken) .info-list .il .il-head{
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: 6px;
}
.main.guide-broken:where(.guide-broken) .info-list .il .il-num{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #224995;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.main.guide-broken:where(.guide-broken) .info-list .il .il-t{
  font-size: 13px;
  font-weight: 700;
  color: #14355D;
  line-height: 1.5;
}
.main.guide-broken:where(.guide-broken) .info-list .il .il-d{
  font-size: 12px;
  line-height: 1.6;
  color: #333;
}
.main.guide-broken:where(.guide-broken) .info-list .il .il-d a{ color: #224995; }
.main.guide-broken:where(.guide-broken) .info-list .il .il-d b{ color: #14355D; }

/* ============================================================
   帯CTA cta-band（各節内インライン帯／delivery extra.css「cta-band」器を流用）
   独立 section 化しない。テーマ画像CTA（linktouch）を2カラムで。
   ============================================================ */
.main.guide-broken:where(.guide-broken) .cta-band{
  background: #224995;
  border-radius: 5px;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  margin: var(--sp-4) 0 0;
}
.main.guide-broken:where(.guide-broken) .cta-band .t{
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--sp-2);
}
.main.guide-broken:where(.guide-broken) .cta-band .b{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  max-width: 400px;
  margin: 0 auto;
}
.main.guide-broken:where(.guide-broken) .cta-band .b .linktouch{ display: block; transition: opacity .3s; }
.main.guide-broken:where(.guide-broken) .cta-band .b .linktouch:hover{ opacity: .7; }
.main.guide-broken:where(.guide-broken) .cta-band .b .linktouch img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

/* ============================================================
   ch-nudge インライン帯（apply-nudge器を流用／delivery extra.css「C15 form」の .apply-nudge）
   worry前倒し・prepare末・trouble末で使用。電話/LINE 近道（淡青破線ボード）。
   ============================================================ */
.main.guide-broken:where(.guide-broken) .apply-nudge{
  background: var(--card-board);
  border: 1px dashed #224995;
  border-radius: 5px;
  padding: var(--sp-3);
  margin: var(--sp-4) 0;
}
.main.guide-broken:where(.guide-broken) .apply-nudge .an-t{
  font-size: 13px;
  font-weight: 700;
  color: #14355D;
  line-height: 1.6;
  margin-bottom: var(--sp-2);
}
.main.guide-broken:where(.guide-broken) .apply-nudge .an-b{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
}
.main.guide-broken:where(.guide-broken) .apply-nudge .an-b a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  padding: 13px 8px;
  min-height: 46px;
  text-align: center;
  transition: opacity .3s;
}
.main.guide-broken:where(.guide-broken) .apply-nudge .an-b a:hover{ opacity: .7; }
.main.guide-broken:where(.guide-broken) .apply-nudge .an-b a.tel{ background: #224995; color: #fff; }
.main.guide-broken:where(.guide-broken) .apply-nudge .an-b a.line{ background: #06C755; color: #fff; }
.main.guide-broken:where(.guide-broken) .apply-nudge .an-b a .iconarrow{ width: 0.8em; height: 0.8em; display: inline-flex; }
.main.guide-broken:where(.guide-broken) .apply-nudge .an-b a .iconarrow svg{ width: 100%; height: 100%; }
.main.guide-broken:where(.guide-broken) .apply-nudge .an-note{
  font-size: 11px;
  color: #5A7386;
  line-height: 1.6;
  margin: var(--sp-2) 0 0;
}

/* ============================================================
   PC（≥751）— 特長カード/早見表の間延び防止（テーマ流儀の控えめ拡張）
   ============================================================ */
@media (min-width: 751px){
  .main.guide-broken:where(.guide-broken) .bg-feat{ gap: var(--sp-3); }
}

/* ============================================================
   unlockingsimlock 追加分（clone元=beginners-guide kit / 2026-06-28）
   landmine是正: line-height 1.7→1.6 / line-btitle上30→20 / off-scale 11.5・10.5→整数 /
                 compare-table th=13(golden th≧td) / promise-card de-scope /
                 .nowrap util / scroll-hint(theme ScrollHint) / PC本文拡大
   ============================================================ */
.main.guide-broken:where(.guide-broken) .nowrap{ white-space: nowrap; }

/* ============================================================
   PC（≥751）本文拡大（memory pc-typography-bespoke-scaling-golden）
   bespoke 12/13px固定→PCで本文15・カードタイトル16・補足13・td14/th15 に拡大（テーマPC golden）
   ============================================================ */
@media (min-width: 751px){
  .main.guide-broken:where(.guide-broken) .info-list .il .il-d{ font-size: 15px; }
  .main.guide-broken:where(.guide-broken) .info-list .il .il-t{ font-size: 16px; }
  .main.guide-broken:where(.guide-broken) .part .sub-note, .main.guide-broken:where(.guide-broken) .compare-note, .main.guide-broken:where(.guide-broken) .apply-nudge .an-note{ font-size: 13px; }
}

/* ============================================================
   harness 是正 v2（2026-06-28）
   - .line-btitle 行間 = 見出しtier 1.3（テーマは line-height未指定で1.6継承＝heading標準1.3へ）
   - 明地の inline 強調(b/strong/.kw)は color9(#224995)一色（V-1）。navy地(promise/pivot/cta)は白維持。
   ============================================================ */
.main.guide-broken:where(.guide-broken) .line-btitle{ line-height: 1.3; }
.main.guide-broken:where(.guide-broken) .part b, .main.guide-broken:where(.guide-broken) .part strong{ color: #224995 !important; }
.main.guide-broken:where(.guide-broken) .cta-band b, .main.guide-broken:where(.guide-broken) .cta-band strong{ color: #fff !important; }

/* === fix1 2026-06-29: テーブル不可視バグ修正 ===
   素のデータ td が ScrollHint 注入の .scroll-hint-shadow-wrap{color:#FFF} を継承し
   白文字on白セル＝不可視（=「空欄」の正体）になっていた。金型 airpods は td{color:#333} を持つ。
   td に明示色を与えて継承を上書き（td.ok の navy は (0,3,1) で優先され不変／th は thead/tbody th の明示色が優先）。 */
/* 2026-08-27 撤去（canon= build/_shared/components.css が唯一の実体・_INDEX §3）: td{color:#333} は canon:85、td.ok は canon:88（beginners-guide 正本より color9+700）と同値 */
/* FVプレースホルダの参照リンク（lin.ee / 電話）が紺地に暗色で不可視だったので淡青に */
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-slots a{ color: #9DB8E6; text-decoration: underline; }

/* === 図解強化 fig1 2026-06-29: 金型(aquos/airpods)の worry-board 概念グリフ＋figure を流用(clone-first・発明なし)。.main 汎用scope === */
.main.guide-broken:where(.guide-broken) .worry-board{ position:relative; background:transparent; padding:0; margin-top:20px; }
.main.guide-broken:where(.guide-broken) .worry-board .board-head{ margin:0 0 14px; line-height:1.3; word-break:break-word; text-align:center; color:#14355D; font-size:16px; font-weight:bold; }
.main.guide-broken:where(.guide-broken) .worry-board .wl{ display:flex; flex-direction:column; gap:16px; }
.main.guide-broken:where(.guide-broken) .worry-board .wi{ position:relative; width:88%; background:#fff; border-radius:5px; padding:12px 16px 12px 12px; display:flex; align-items:center; gap:11px; font-size:13px; line-height:1.6; color:#333; box-shadow:0 0 10px rgba(18,77,137,.16); }
.main.guide-broken:where(.guide-broken) .worry-board .wi:after{ content:""; position:absolute; bottom:-5px; left:30px; width:12px; height:12px; background:#fff; transform:rotate(45deg); box-shadow:5px 5px 7px -3px rgba(18,77,137,.12); }
.main.guide-broken:where(.guide-broken) .worry-board .wi:nth-child(even){ margin-left:auto; }
.main.guide-broken:where(.guide-broken) .worry-board .wi:nth-child(even):after{ left:auto; right:30px; }
.main.guide-broken:where(.guide-broken) .worry-board .wi .wic{ width:42px; min-width:42px; height:42px; }
.main.guide-broken:where(.guide-broken) .worry-board .wi .wic svg{ width:100%; height:100%; display:block; }
.main.guide-broken:where(.guide-broken) .worry-board .wi .wi-t{ min-width:0; }
.main.guide-broken:where(.guide-broken) .worry-board .wi .wi-t strong{ color:#224995; }
.main.guide-broken:where(.guide-broken) figure.safe-fig{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #C8D4E4; border-radius:5px; padding:11px 13px; margin:20px 0 0; text-align:left; }
.main.guide-broken:where(.guide-broken) figure.safe-fig svg{ width:84px; height:84px; flex:0 0 auto; display:block; }
.main.guide-broken:where(.guide-broken) figure.safe-fig figcaption{ min-width:0; font-size:13px; color:#14355D; line-height:1.6; margin:0; font-weight:600; }
@media(min-width:751px){
  .main.guide-broken:where(.guide-broken) .worry-board .wl{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
  .main.guide-broken:where(.guide-broken) .worry-board .wi{ width:auto; }
  .main.guide-broken:where(.guide-broken) .worry-board .wi:nth-child(even){ margin-left:0; }
  .main.guide-broken:where(.guide-broken) .worry-board .board-head{ font-size:20px; }
}

/* ledger#36 (2026-07-10): theme `.connection p{color:#DE4A9B}`(style.css:5470 ピンク) の native漏れ打ち消し。
   gold canon = navy #14355D（corporate extra.css:160 corp-clone3 と同手本・airpods/aquos/delivery も全打ち消し済）。
   検出器 = page-qa-audit.js K_palette。 */
.main.guide-broken:where(.guide-broken) .connection p{ color:#14355D; }

/* ============================================================
   2026-08-27 retrofit（欠陥クラス横断一括・harness 4幅）
   ------------------------------------------------------------
   [1] closing CTA の自己区切り（harness A_divider「白×白・自己区切りなし」）
       白節の直後に置かれた非 partbg の closing CTA は白×白で境目が消える
       （refer/spacing-divider-craft-rules.md §1・線色は節区切りの var(--color7)。.line-title 左罫 #8DB0D0 とは別物）。
       罫と呼吸はセットで持つ＝罫だけ足すと帯先頭が線にびた付く（ledger#26⑤ の実害）。
       出典: 非移行 gold build/airpods-reset/extra.css:882(border-top) + :885(padding-top:30px !important) の2行を1クラスへ溶接。
             canon build/_shared/components.css:56 `.main .connection.divided` と同値（本頁は _shared 未移行＝ledger#61）。
       !important の理由: テーマ SP 段 `.connection:not(.partbg){padding:0 !important}`
             （refer/linxas-sp-0407/css/style.css:5592-5594）に通常宣言では必ず負けて呼吸が消えるため。
   [2] FV プレースホルダのトークン是正（harness C_font / K_palette）
       - .fv-todo-title は clamp(20px,6vw,24px) で 375→22.5px / 390→23.4px＝FONT_SCALE 外だった。
         gold の同役割 build/airpods-reset/extra.css:146-148（SP 22px）/ :161-163（PC 26px）へ接地。
       - .fv-todo-slots li の #E7EEF8 は「トークンに似た手打ち色」＝allowlist 外（_INDEX §3 文字色の確定）。
         濃地の明文字は gold fv-sub の #CFE0F4（page-qa-audit.js K_palette allowlist 収載）へ統一。
   ============================================================ */
.main.guide-broken:where(.guide-broken) .connection.divided{ border-top:1px solid var(--color7); padding-top:30px !important; }
.main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-title{ font-size:22px; }
@media (min-width:751px){
  .main.guide-broken:where(.guide-broken) .topbanner.fv-todo .fv-todo-title{ font-size:26px; }
}

/* [3] line-title 入れ子 .nowrap の装飾二重適用 guard（harness I_craft・ledger#26③）
   テーマ `.line-title span{border-left:2px solid #8DB0D0; padding-left:7px}`（refer/linxas-sp-0407/css/style.css:3442）が
   入れ子の <span class="nowrap"> にも当たり、見出し語中に縦罫が混入する／帯が分裂する。
   出典: gold aquos extra.css:632-634 ＝ canon build/_shared/components.css:29 と同値（本頁は _shared 未移行＝ledger#61）。 */
.main.guide-broken:where(.guide-broken) .line-title .nowrap{ border-left:0; padding-left:0; display:inline; line-height:inherit; }

/* ============================================================================
   2026-08-31 r2 ── guide系12ページ引き上げパイロット（台帳#109-1 ユーザー決定）
   critic r1 = 34/100・HARD-CAP 3件（密度比22% / svg密度比16% / 視覚アンカー0節=8）の解除。
   ★このブロックの [R1][R2][R5] は **12ページ共通で使う語彙＝本来は build/_shared/components.css が置き場**。
     本ラウンドでページ側に置いた理由（記録・横展開レシピにも記載）:
       `_shared/components.css` を1バイトでも編集すると refer/gate-evidence-check.mjs の鮮度検査が
       **31ページ全部の critique/gate/log-regression 成果物を stale** にする（buildFiles に _shared を含むため）。
       走行中の他ラウンドを巻き込むので、_shared 昇格は「12ページ一括の移行ラウンド」で
       （31ページの ?v= bump ＋ cross-page-consistency-gate ＋ shared-dead-rule 全ページ）まとめて行う。
   ============================================================================ */

/* ---- [R1] 概念アイコン ci-ic / tl-ic の受け皿 ------------------------------
   白円＋navy3トーンの「塗り」語彙（線画禁止＝ledger#34）を全カード/リスト節へ横展開（ledger#37 手1）。
   出典 = build/beginners-guide/extra.css:1056-1065,1338-1349（critic 92.1 の実装）／
          build/airpods-reset/extra.css:679-680,843（.tl-ic 40px→PC48px）。 */
.main.guide-broken:where(.guide-broken) .ci-ic svg{ width:100%; height:100%; display:block; }
.main.guide-broken:where(.guide-broken) .info-list .il .il-head .ci-ic{ flex-shrink:0; width:38px; height:38px; }
.main.guide-broken:where(.guide-broken) .bg-feat .fc .ci-ic{ display:block; width:38px; height:38px; margin:0 0 8px; }
.main.guide-broken:where(.guide-broken) .why-extra.trust .tc .tl .tl-ic{ flex:0 0 auto; width:40px; height:40px; margin-right:3px; }
.main.guide-broken:where(.guide-broken) .why-extra.trust .tc .tl .tl-ic svg{ width:100%; height:100%; display:block; }

/* ---- [R2] 判定チップ .jd（○／△／× と「付きやすい」等の3段判定）--------------
   出典 = build/beginners-guide/extra.css:374-387（critic 92.1 の `.nw-judge .jd` 語彙）。
   色は _INDEX §3 の公認拡張色のみ＝navy(可)／淡青#E2EFFF+navy罫(条件付き)／coral #E94F4F(不可)。
   critic r1 D「△ と × が同じ rgb(51,51,51) fw500 で可否が色で読めない」＋
   構成案 wireframe-content.html:429「凡例の記号は下の表の『買取可否』列と同じ色で表しています」の実装。 */
.main.guide-broken:where(.guide-broken) .jd{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:16px; font-weight:700; line-height:1; }
.main.guide-broken:where(.guide-broken) .jd-o{ background:#224995; color:#fff; }
.main.guide-broken:where(.guide-broken) .jd-t{ background:#E2EFFF; color:#14355D; box-shadow:inset 0 0 0 2px #224995; }
.main.guide-broken:where(.guide-broken) .jd-x{ background:#E94F4F; color:#fff; }
.main.guide-broken:where(.guide-broken) .jd-w{ width:auto; min-width:28px; border-radius:999px; padding:0 10px; font-size:12px; white-space:nowrap; }
.main.guide-broken:where(.guide-broken) .compare-table td.jcol{ text-align:center; white-space:nowrap; }
/* 凡例（本文中のインライン版・20px） */
.main.guide-broken:where(.guide-broken) .jd-lg{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.main.guide-broken:where(.guide-broken) .jd-lg + .jd-lg{ margin-left:8px; }
.main.guide-broken:where(.guide-broken) .jd-lg .jd{ width:20px; height:20px; font-size:12px; }

/* ---- [R3] 3列表の min-width（コンテキスト差分＝ページ側に残す） --------------
   実測（@375/390）: gold の3列表は build/mac-reset #sell = 480px（列 134/173/173）・
   build/ipad-reset #highsell = 480px（134/179/166）。
   ★`wide5`=560px は **5列表の canon**（build/kaitori-state-grade #grade の最小セル93px）＝値は変更していない。
     本ページの3表は3列なので `wide3`(480) を新設して当てた（560 のままだと gold より80px 余分にスワイプさせる）。 */
.main.guide-broken:where(.guide-broken) .compare-table-scroll.wide3 .compare-table{ min-width: 480px; }
/* 判定列の明示幅（critic r1 P4: 59px で「○〜△」が2行に割れていた） */
.main.guide-broken:where(.guide-broken) #table .compare-table th:nth-child(2){ width:86px; white-space:nowrap; }
.main.guide-broken:where(.guide-broken) #price .compare-table th:nth-child(2){ width:120px; white-space:nowrap; }
/* 行見出し（症状名）は canon `_shared/components.css:182` が nowrap（＝行見出しが縦に伸びるのを防ぐ意図）だが、
   本ページの症状名は最長17字で **1列目が 256px を占有** し、480px の残り139px に説明列が潰れていた。
   @390 実測の4案比較:
     A 480+nowrap: 列[256,86,139] 最長行125px 表高1087   B 560+nowrap: 列[256,86,219] 最長行84 表高842
     C 480+折返し : 列[143,86,251] 最長行 84px 表高 716   D 520+折返し: 列[156,86,278] 最長行64 表高678
   → C を採用（gold 3列表と同じ 480px の横スクロール量のまま、表高が A の2/3・B より小さい）。
   canon の意図「行見出しが縦に伸びない」は満たしている（最長行 125→84px）。gold の行ラベル `td.lbl` も折返す。
   ★2026-08-31（critic r2 §5-F）: 旧版は `.main #table … , .main #price …` の **id セレクタ**で canon を打ち消していた。
   ユーザー恒久指示「共通は同じクラス・似ているなら派生クラス」に従い **派生クラス `.compare-table.rowhead-wrap`** へ載せ替え。
   HTML 側はクラス名を1つ足すだけ＝11ページへ展開しても id が増殖しない（`_shared` 昇格の対象＝§3-3）。 */
.main.guide-broken:where(.guide-broken) .compare-table.rowhead-wrap tbody th[scope="row"]{ white-space:normal; }

/* ---- [R4] .sec-photo 派生 .sp-strip（コンテキスト差分） ----------------------
   canon `_shared/components.css:218-220` の .sec-photo は 16/9 クロップ。
   横長ストリップ（iphoneseries 1000x120 = 8.3:1／flow-mail2-pic 960x270 = 3.6:1）は
   クロップすると拡大されてしまうので、この派生だけ比率固定を外す。 */
.main.guide-broken:where(.guide-broken) .sec-photo.sp-strip img{ aspect-ratio:auto; }

/* ---- [R5] w-arrow ＋ promise-board（canon・_shared 昇格候補） ---------------
   出典 = build/galaxy-reset/extra.css:413-421,432-434,440-441（13ページで使用）。
   critic r1 T9/T10: 旧 `.promise-card`＋緑 iconcheck.svg 画像は台帳#79 が廃止した形。 */
.main.guide-broken:where(.guide-broken) .w-arrow{ display:block; width:22px; height:15px; margin:20px auto 0; background:url(../images/guide-broken/icon/select.svg) center/contain no-repeat; }
.main.guide-broken:where(.guide-broken) .promise-board{ position:relative; background:var(--color10); padding:60px 16px 18px; border-radius:5px; overflow:hidden; margin-top:24px; }
.main.guide-broken:where(.guide-broken) .promise-board .board-head{ position:absolute; left:0; top:0; background:var(--color9); color:#fff; padding:6px 20px; display:inline-flex; align-items:center; font-size:16px; font-weight:bold; border-bottom-right-radius:5px; margin:0; line-height:1.3; }
.main.guide-broken:where(.guide-broken) .promise-board .promise-list{ display:flex; flex-direction:column; gap:14px; }
.main.guide-broken:where(.guide-broken) .promise-board .pi{ position:relative; background:#fff; border-radius:5px; padding:14px 14px 14px 52px; }
.main.guide-broken:where(.guide-broken) .promise-board .pi .pic{ position:absolute; left:13px; top:13px; width:38px; height:38px; }
.main.guide-broken:where(.guide-broken) .promise-board .pi .pic svg{ width:100%; height:100%; display:block; }
.main.guide-broken:where(.guide-broken) .promise-board .pi .px{ display:block; font-size:12px; color:#333; line-height:1.6; }
.main.guide-broken:where(.guide-broken) .promise-board .pi .px b{ display:block; font-size:15px; color:var(--color4) !important; line-height:1.3; margin-bottom:4px; word-break:break-word; }/* カードタイトルは color4（_shared .dt と同 tier）。ページの `.part b{color:#224995!important}`（V-1 の inline 強調ルール）に負けないよう !important */
.main.guide-broken:where(.guide-broken) .promise-board .pi .px .pd{ display:block; font-size:12px; line-height:1.6; color:#333; }

/* ---- [R6] §1-B 節地色・余白・区切り線（台帳#94: 地色を変えたら前後2境界を再判定）-----
   節順（DOM・構成案 output/guide-broken/wireframe-content.html と同順）:
     price(白) → why(色) → reasons(白) → table(白) → symptoms(色) → junk(色) → devices(白)
     → data(色) → trust(色) → shitadori(白) → ship(白) → flow(色) → related(白) → faq(白) → closing(白 .connection.divided)
   規則（refer/spacing-divider-craft-rules.md §1/§2・出典 gold build/kaitoriten-erabikata/extra.css:343-378／
         build/before-shipping/extra.css:286-295 の同型改修）:
     ・色節 = background:var(--color10); margin:0; padding:30px 0（padding と .part margin の二重は禁止）
     ・白節 = テーマ標準 .part{margin:30px auto}。**直前が色節のときだけ margin-top:0**
       （色節の padding-bottom:30 が breathing を出す。両方効かせると60px の二重／消すと呼吸が0＝台帳#94 の回帰）
     ・区切り線は「同色が接する側」だけ＝色×色の #junk・#trust の上端に border-top:1px solid var(--color7)。
       色↔白は色差で境目が見えるので線なし。白×白は各節頭の濃紺 h2 バンドが自己区切りするので線なし。
   ── 境界ごとの判定（前後2境界を必ず見る）
     price(白)  → why(色)      : 色差 → 線なし。gap = price margin-bottom30 ＋ why padding-top30
     why(色)    → reasons(白)  : 色差 → 線なし。reasons margin-top:0（why padding-bottom30 が breathing）
     reasons(白)→ table(白)    : 白×白＋濃紺バンド → 線なし。margin collapse 30
     table(白)  → symptoms(色) : table 末尾は inset の navy .cta-band → 実隣接面は白。色差 → 線なし
     symptoms(色)→ junk(色)    : **同色** → junk に border-top（上下 breathing は両節の padding30）
     junk(色)   → devices(白)  : 色差 → 線なし。devices margin-top:0
     devices(白)→ data(色)     : 色差 → 線なし
     data(色)   → trust(色)    : **同色** → trust に border-top
     trust(色)  → shitadori(白): 色差 → 線なし。shitadori margin-top:0
     shitadori(白)→ ship(白)   : 白×白＋濃紺バンド → 線なし。margin collapse 30
     ship(白)   → flow(色)     : 色差 → 線なし
     flow(色)   → related(白)  : 色差 → 線なし。related margin-top:0
     related(白)→ faq(白)      : 白×白＋濃紺バンド → 線なし。margin collapse 30
     faq(白)    → closing(白)  : 白×白だが closing は濃紺バンドを持たない締めCTA → 既存の
                                 `.connection.divided`（border-top + padding-top30）が自己区切り（変更なし） */
.main.guide-broken.guide-broken .worry#why,
.main.guide-broken.guide-broken #symptoms,
.main.guide-broken.guide-broken #junk,
.main.guide-broken.guide-broken #data,
.main.guide-broken.guide-broken #trust,
.main.guide-broken.guide-broken #flow{ background:var(--color10); margin:0; padding:30px 0; }
.main.guide-broken.guide-broken #junk{ border-top:1px solid var(--color7); }   /* prev=#symptoms（同色）→ 線は同色が接する側＝上 */
.main.guide-broken.guide-broken #trust{ border-top:1px solid var(--color7); }  /* prev=#data（同色）→ 同上 */
.main.guide-broken.guide-broken #reasons{ margin-top:0; }                      /* prev=#why（色・padding-bottom30 が breathing） */
.main.guide-broken.guide-broken #devices{ margin-top:0; }                      /* prev=#junk（色） */
.main.guide-broken.guide-broken #shitadori{ margin-top:0; }                    /* prev=#trust（色） */
.main.guide-broken.guide-broken #related{ margin-top:0; }                      /* prev=#flow（色） */

/* 色節の中の箱は #fff で分離（spacing-divider-craft-rules §2.6「色地節の中の box は白＝埋もれ禁止」）。
   白節では canon のまま（.info-list 器 = color10 ／ .tc = color10）。 */
.main.guide-broken.guide-broken #symptoms .info-list,
.main.guide-broken.guide-broken #junk .info-list,
.main.guide-broken.guide-broken #data .info-list{ background:transparent; padding:0; }
.main.guide-broken.guide-broken #trust .trust-grid .tc{ background:#fff; }
/* canon `_shared:207` の 2列は「短文4枚」(airpods) 前提。本ページは長文3枚で @390 の1カラム幅が165px しかなく
   見出しが3行に割れるため、SP のみ1列にする（列数はコンテキスト差分＝_INDEX §3 で page 側に残してよい項目）。 */
.main.guide-broken.guide-broken #trust .trust-grid{ grid-template-columns:1fr; }
@media (min-width: 751px){
  .main.guide-broken.guide-broken #trust .trust-grid{ grid-template-columns:1fr 1fr 1fr; }
}
/* `.related .board` の余白（コホート canon・build/mac-reset/extra.css:156 ほか10ページ同値。_shared 昇格候補）。
   theme `.board{padding:50px 15px 5px}` は board-head ラベル前提で、ラベルなしだと上に50pxの空白が出る。 */
.main.guide-broken.guide-broken .related .board{ padding:6px 16px; margin-top:14px; }

/* ---- [R7] PC タイポの拡大漏れ（critic r1 F・_INDEX §3「PCは本文15／カードタイトル16／補足13」）----
   既存の @media(min-width:751px) 列挙に `.wi-t`（コホート6/6 が15px）・`.bg-feat .fc .fd`（15）・
   `.bg-feat .fc .ft`（16）・`.cta-band .t`（16＝.pc-t と同 tier）が入っていなかった。 */
@media (min-width: 751px){
  .main.guide-broken.guide-broken .worry .wi .wi-t,
  .main.guide-broken.guide-broken .bg-feat .fc .fd,
  .main.guide-broken.guide-broken .promise-board .pi .px,
  .main.guide-broken.guide-broken .promise-board .pi .px .pd{ font-size: 15px; }
  .main.guide-broken.guide-broken .bg-feat .fc .ft,
  .main.guide-broken.guide-broken .promise-board .pi .px b,
  .main.guide-broken.guide-broken .cta-band .t{ font-size: 16px; }
  .main.guide-broken.guide-broken .promise-board .board-head{ font-size:18px; }
  .main.guide-broken.guide-broken .promise-board{ padding:72px 22px 22px; }
  .main.guide-broken.guide-broken .promise-board .promise-list{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }/* 2026-09-06 再ゲート r3（critic r3 手②）: 3 枚＝3 列（2 列だと 3 枚目が孤児行）＝金型 airpods extra.css:378 同値 */
  /* 概念アイコンの PC 拡大（beginners critic N-2 と同値） */
  .main.guide-broken.guide-broken .info-list .il .il-head .ci-ic,
  .main.guide-broken.guide-broken .bg-feat .fc .ci-ic{ width:42px; height:42px; }
  .main.guide-broken.guide-broken .why-extra.trust .tc .tl .tl-ic{ width:48px; height:48px; }
}

/* ---- [R8] .wic のコホート合わせ（critic r1 T11: 12ページが42px・コホート canon は38px）----
   出典 = build/beginners-guide/extra.css:1087（SP 42→PCで拡大）ではなく
          build/mac-reset/extra.css:711-713 の「SP 38 / PC 42」＝コホート4/4 の @390 実測値 38。 */
.main.guide-broken:where(.guide-broken) .worry-board .wi .wic{ width:38px; min-width:38px; height:38px; }
@media (min-width: 751px){
  .main.guide-broken.guide-broken .worry-board .wi .wic{ width:42px; min-width:42px; height:42px; }
}

/* ==========================================================================
   [R9] #flow — 写経元 build/before-shipping/extra.css:733-737 の「3ステップ適応」2ブロックを移植
   （critic r2 §5-A・レシピ §2-手2 の「追加CSS 0行」は誤りだった）。
   theme 原典 style.css:5953 は `.flow .flow-step .step-block{width:calc(25% - 20px)}` ＝**4ステップ前提**。
   3ステップのまま使うと PC で最終ブロックの右に穴が空く（本ページ実測 @751:183 / @768:187 / @1024:251 / @1280:255px）。
   写経元 before-shipping（同じ3ステップ）は穴 0。ステップ数別の値 = 3:33.333% / 4:25%(theme既定) / 5:20%。
   .ttl は theme の clamp(16-18px) → コホート canon のカードタイトル tier（SP15 / PC16）へ pin
   （airpods / before-shipping / kaitoriten の3ページが 15/16 で一致）。
   ========================================================================== */
.main.guide-broken.guide-broken .flow .flow-step .step-block .ttl{ font-size:15px; }
@media (min-width: 751px){
  .main.guide-broken.guide-broken .flow .flow-step .step-block{ width:calc(33.333% - 20px); }
  .main.guide-broken.guide-broken .flow .flow-step .step-block .ttl{ font-size:16px; }
}

/* ---- [R9-b] #related を mac 作法の2群へ（critic r2 §5-D／写経元 build/mac-reset/extra.css:155・
   build/before-shipping/extra.css:302）。h3.line-btitle の上余白＝20px（golden「h3 上 margin は実効 ≤20px」）。
   .board 側の margin-top:14px は上の canon 行がそのまま効く。 */
.main.guide-broken.guide-broken .related .line-btitle{ margin-top:20px; }
/* 2026-09-06 再ゲート r3（critic r3 手①）: #symptoms/#junk/#data/#ship の白カード上では .ci-ic の白円（svg 内 fill #fff）が地に溶けて
   24〜28px の小 glyph にしか見えなかった → svg の円を #EBF0F6（mac/ipad の .tl-ic・proof-cert と同じ「白地では淡青円」canon）へ。
   glyph・サイズ（38/42px）・語彙は不変。CSS 側は変更なし（HTML の fill 差替のみ・本コメントは出典記録）。 */


/* ==== WP統合(port_page.py 自動追加) ==== */
.main.guide-broken{ background:#fff; }
/* 自前FVがあるためテーマ自動FV(page-bg)とタイトル帯(.pages)を隠す。無スコープだが mu-plugin の is_page() ゲートでこのページのみ読込 */
.page-bg.bg-photo, .pages{ display:none !important; }