/* ============================================================
   shared/components.css — 画面をまたいで使う部品（カード・ピル・バッジ等）
   ------------------------------------------------------------
   出典: map-merge/index.html の <style> から抽出。中身は移動元と1バイトも変えていない。
   base.css との違い：base.css=シェル・骨格／components.css=繰り返し使う部品。
   .rangebox/.checks は現状①③④で使われているのを目視確認できたが、③map専用に見える
   クラスとの線引きは3d実装時に最終grep確認する（40_再利用資産の設計書 §6 留保どおり）。
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.card h2{font-size:15px;font-weight:600;margin:0 0 2px;color:var(--brand)}
.card h3{font-size:12px;font-weight:600;margin:0 0 8px}
.todo{font-size:12px;color:var(--brand);background:var(--brand-l);border-radius:8px;padding:7px 10px;margin:0 0 12px;display:inline-block}
.lead{font-size:12px;color:var(--muted);margin:0 0 12px}
.ctlbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lab{font-size:12px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--line2);color:var(--muted);background:none;cursor:pointer;font-family:inherit}
.pill.on{background:var(--brand-l);color:var(--brand);border-color:transparent}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:1px;margin-right:4px}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:5px 0}
.badge{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--brand-l);color:var(--brand)}
.note{font-size:11px;color:var(--hint);margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.chk .mk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;flex:none}
.chk.on .mk{background:var(--accent);border-color:var(--accent)}
.chk .pc{color:var(--hint);font-size:11px;margin-left:auto}
.rangebox{background:var(--brand-l);border-radius:10px;padding:14px;text-align:center;margin-bottom:6px}
.rangebox .big{font-size:26px;font-weight:600;color:var(--brand)}
.decide{border:2px solid var(--accent);background:var(--accent-l);border-radius:10px;padding:14px;margin:14px 0}
.decide .ttl{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:8px}
.nextbtn{display:inline-flex;align-items:center;gap:6px;border:none;background:var(--accent);color:#fff;
  border-radius:8px;padding:10px 18px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;margin-top:8px}
/* クリックできるバッジ（osugi 652-659 由来）。予算バッジ（②③の「予算（①より）」）等で使う */
.badge.link{cursor:pointer}
.badge.link:hover{background:var(--accent-l);color:var(--accent)}

/* ============================================================
   以下 money/mock.html の<style>から統合（①②④の複数画面で使う部品）。
   出典コメントは各グループの直前に残す。
   ============================================================ */

/* 先輩の声（①②④で使用。色は base.css の --good-d と同じ値） */
.voice{background:var(--good-l);border-radius:10px;padding:12px;margin-top:12px}
.voice .who{font-size:13px;font-weight:500;color:var(--good)}
.voice .txt{font-size:12px;color:var(--good-d);margin-top:4px}

/* MTG2改修（7/1）：用語解説ポップアップ・出典バッジ（①④両方の「？」ボタンで使用） */
.q{display:inline-flex;width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);color:var(--hint);
  font-size:10px;font-weight:600;align-items:center;justify-content:center;cursor:pointer;background:var(--surface);
  vertical-align:1px;padding:0;font-family:inherit}
.q:hover{border-color:var(--accent);color:var(--accent)}
.pop{position:absolute;z-index:3000;max-width:290px;background:var(--surface);border:1px solid var(--line2);
  border-radius:10px;box-shadow:0 6px 24px rgba(20,30,50,.18);padding:12px;font-size:12px;display:none}
.pop .pt{font-weight:600;color:var(--brand);margin-bottom:4px}
.pop .px{color:var(--muted)}
.src{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:600;vertical-align:1px;white-space:nowrap}
.src.s{background:var(--accent-l);color:var(--accent)}
.src.g{background:var(--brand-l);color:var(--brand)}
/* .pop内の「さらに詳しく見る」展開（showPop()のmoreHtmlが挿入。POPS辞書にurlがある項目だけ表示） */
.demo-more-details{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--muted);animation:fadeInDown .3s ease}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.demo-more-details.show{display:block}

/* テキスト入力（①の額面・手取り欄、④のこだわり条件セレクトで使用） */
.txtin{width:74px;border:1px solid var(--line2);border-radius:8px;padding:7px 9px;font:inherit;font-size:14px;text-align:right}
.txtin:focus{outline:2px solid var(--accent-l);border-color:var(--accent)}

/* 右カラム・コラムカードのアコーディオン（①④のasideで使用） */
aside .card.acc>h3{cursor:pointer;user-select:none;font-size:13.5px}
aside .card.acc>h3:hover{color:var(--accent)}
aside .card.acc>h3::before{content:'▾ ';color:var(--hint);font-size:11px}
aside .card.acc.closed>h3{margin-bottom:0}
aside .card.acc.closed>h3::before{content:'▸ '}
aside .card.acc.closed .cbody{display:none}

/* ===== ③SUUMO風条件指定テーブル（鈴木版 7/14移植）。①の初期費用テーブル(#secInit)と
   ④の各種条件テーブルの両方で使う共通部品——money/mock.html上は④専用に見えるが、
   ①のsecInit（家賃・初期費用）でも .suumo-table / .suumo-grid を使っているためshared扱い（要grep確認済み） ===== */
.suumo-table{width:100%;border-collapse:collapse;margin-bottom:20px;border:1px solid var(--line);font-size:13px}
.suumo-table tr{border-bottom:1px solid var(--line)}
.suumo-table tr:last-child{border-bottom:none}
.suumo-table th{width:140px;background-color:var(--suumo-gray);color:var(--text);text-align:left;padding:12px 16px;
  font-weight:600;vertical-align:middle;border-right:1px solid var(--line)}
.suumo-table td{padding:12px 16px;background-color:var(--surface);vertical-align:middle}
.suumo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px 14px}
/* SUUMO互換テーブル内のチェックは鈴木版の見た目（inline-flex・％は文字直後）。①②の既存.chkに影響させないため.suumo-tableに限定 */
.suumo-table .chk{display:inline-flex;gap:6px;user-select:none}
.suumo-table .chk:not(.on) .mk{background:var(--surface)}
.suumo-table .chk .pc{margin-left:4px;font-weight:600}

/* SUUMOチューザー（shared/suumo.js が body へ挿入する右下のパネル）。
   複数県にまたがるとき／エリア未選択のときに出す。出典: money/mock.html:1095-1178 */
.schooser{position:fixed;right:24px;bottom:86px;z-index:2100;background:var(--surface);
  border:1.5px solid var(--accent);border-radius:12px;box-shadow:0 12px 32px rgba(20,30,50,.25);padding:16px;width:340px;
  animation:schooserPopIn .28s cubic-bezier(0.16,1,0.3,1)}
@keyframes schooserPopIn{from{opacity:0;transform:translateY(14px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.schooser .sc-t{font-size:14px;font-weight:700;color:var(--brand)}
.schooser .sc-x{font-size:11.5px;color:var(--muted);margin:5px 0 3px;line-height:1.4}
.schooser .sc-btn{display:block;width:100%;box-sizing:border-box;text-align:left;border:1px solid var(--line2);
  background:var(--surface);border-radius:9px;padding:10px 36px 10px 12px;font:inherit;font-size:13px;
  cursor:pointer;margin-top:8px;position:relative;text-decoration:none;color:var(--text);transition:all .15s ease}
.schooser .sc-btn:hover{border-color:var(--accent);background:var(--accent-l)}
.schooser .sc-btn b{color:var(--accent)}
.schooser .sc-btn .sc-st{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.schooser .sc-btn .sc-open{position:absolute;right:12px;top:10px;color:var(--hint)}
.schooser .sc-btn.done{border-color:var(--good);background:var(--good-l)}
.schooser .sc-btn.done b,.schooser .sc-btn.done .sc-open{color:var(--good)}
.schooser .sc-hint{font-size:10.5px;color:var(--hint);margin-top:10px}