/* ============================================================
   features/money/money.css — ①予算・お金 画面専用
   ------------------------------------------------------------
   出典: money/mock.html の <style> のうち①（#kane）に関わる部分を1対1で移植。
   共通部品（.card/.ctlbar/.decide/.nextbtn/.chk 等）は shared/base.css と
   shared/components.css にあるのでここには持ち込まない。

   ★クラス名は money/mock.html のまま（.statrow / .stat-v / .dyn / .adv / .g-only /
     .v2-only など）。AGENTS.md 規約5の機能名プレフィックスからは外れるが、
     このファイルは money.html からしか読まれず、mock と行単位で突き合わせて
     検証できることを優先した（step4は「mockの完全移植」が目的）。
   ============================================================ */

/* ============================================================
   表示モードの出し分け
   ------------------------------------------------------------
   money.html の #kane は kane-simple / kane-guide / kane-v2 の3クラスを同時に持つ。
   これが mock で実際に画面に出ていた組み合わせ（案2）。
   DOMには全要素を置いたうえで、ここで隠す／並べ替える。
   ============================================================ */

/* シンプル⇄詳細切替：シンプル時は .adv を隠す
   （入力モード切替ピル・手取り直接入力・家賃にあてる割合・補足注記がこれで消える） */
.kane-simple .adv{display:none!important}

/* 並び順：給与→上限→（ガイド用Step2ボタン）→分布→初期費用→決定。
   DOM順は mock と同じ（上限が先）なので、表示順はここで作る */
.kane-v2 .grid>.card{display:flex;flex-direction:column}
.kane-v2 #secSalary{order:1}
.kane-v2 #secDecide{order:2}
.kane-v2 #gStep2{order:3}
.kane-v2 #secChart{order:4}
.kane-v2 #secInit{order:5}
.kane-v2 #nextKane{order:6}

/* ガイド用「上限を決める」誘導ボタン（.kane-guide の時だけ出す） */
.g-only{display:none!important}
.kane-guide .g-only{display:inline-flex!important}
/* Step2に進んだら消す。.kane-guide .g-only の !important に勝つため !important 必須 */
.kane-v2 .g-only.gdone{display:none!important}

/* v2専用要素の出し分け（#whyHintV2 / #tedoriV2） */
.v2-only{display:none}
.kane-v2 .v2-only{display:block}

/* v2のみ：おすすめ確定ボタンと理由の長文は出さない。手取り1/3は #whyHintV2 に集約 */
.kane-v2 #applySuggest{display:none}
.kane-v2 #whySuggest{display:none}
/* v2のみ：見出しの🌐一般タグ・インライン手取りは隠し、手取りは #tedoriV2 に集約 */
.kane-v2 #salarySrcTag{display:none}
.kane-v2 #netOutInline{display:none}
.kane-v2 #tedoriQ{display:none}
/* v2：額面は入力欄のみ（500/600/700ボタンは廃止・初期値600万）。
   .kane-guide .g-only の !important に勝つため !important 必須 */
.kane-v2 #grossPresets{display:none!important}

/* v2用の出し分けヘルパー（現状①には該当要素なし。mock と同じものを置いておく） */
.kane-v2 .notv2{display:none!important}
.v2i{display:none}
.kane-v2 .v2i{display:inline}

/* ============================================================
   数字の見せ方
   ============================================================ */

/* 重要な動的数字は同格で大きく：上限⇄残るお金の2枚看板（この2つで意思決定するため） */
.statrow{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:2px 0 8px}
.stat-l{font-size:11px;color:var(--muted);margin-bottom:2px}
.stat-v{font-size:22px;font-weight:600;line-height:1.15}
.stat-arrow{font-size:15px;color:var(--hint);padding-bottom:6px}

/* 動く数字は統一：太字＋ピンク文字＋薄ピンクのマーカー。
   インライン色より優先させるため !important */
.kane-v2 .dyn{display:inline-block;background:linear-gradient(transparent 60%,var(--accent-l) 60%);
  padding:0 2px;border-radius:2px;color:var(--accent)!important;font-weight:700!important}
/* 残るお金がマイナスのときだけ赤 */
.kane-v2 .dyn.over{color:var(--red)!important}

/* ============================================================
   先輩の家賃分布×コスパ満足度チャート（#histBox）
   ============================================================ */

/* ヒストグラムの棒＝クリックで上限セット。hoverで枠を出して「押せる」を伝える */
.histbar{cursor:pointer}
.histbar:hover .histbar-fill{outline:2px solid var(--accent);outline-offset:1px}
.histbar:hover{filter:brightness(1.04)}