/* ============================================
   ③ 損益分岐シミュレーター 専用CSS (break-even.css)
   ============================================ */

/* 入力側の補足ボックス（②と共通の見た目） */
.hint-box{
  font-size:.8rem;background:#F7FAF7;border:1px dashed var(--line);border-radius:10px;
  padding:10px 13px;color:var(--muted);line-height:1.7;
}

/* ===== 判定カード（黒字/トントン/赤字で色が変わる） ===== */
.result-be{border-radius:12px;padding:20px;text-align:center;margin-bottom:14px;transition:background .4s,border-color .4s}
.result-be .label{font-size:.8rem;font-weight:900;letter-spacing:.03em}
.result-be .value{font-family:var(--num);font-size:3rem;font-weight:600;line-height:1.25}
.result-be .value small{font-size:1.2rem;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;margin-left:3px}
.result-be .verdict{font-size:.85rem;font-weight:900;margin-top:8px}

.result-be.safe{background:#EAF6EF;border:2.5px solid var(--leaf)}
.result-be.safe .label,.result-be.safe .verdict,.result-be.safe .value{color:var(--leaf-dark)}

.result-be.warn{background:var(--sand-bg);border:2.5px solid var(--sand)}
.result-be.warn .label,.result-be.warn .verdict{color:#8A6410}
.result-be.warn .value{color:#B07E14}

.result-be.bad{background:var(--danger-bg);border:2.5px solid var(--danger)}
.result-be.bad .label,.result-be.bad .verdict{color:#A33028}
.result-be.bad .value{color:var(--danger)}

/* サマリー一文 */
.summary-line{
  font-size:.88rem;font-weight:700;background:#F2F7F3;border-radius:10px;padding:12px 14px;margin-bottom:14px;line-height:1.7;
}
.summary-line em{font-style:normal;color:var(--leaf-dark)}
.summary-line em.red{color:var(--danger)}

/* サブ情報 */
.result-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:420px){.result-rows{grid-template-columns:1fr}}
.rrow{background:#F7FAF7;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.rrow .k{font-size:.7rem;font-weight:700;color:var(--muted);line-height:1.4}
.rrow .v{font-family:var(--num);font-size:1.05rem;font-weight:600;color:var(--shell)}
.rrow .v.minus{color:var(--danger)}
.rrow .diff{font-size:.72rem;font-weight:700;margin-top:2px}
.rrow .diff.ok{color:var(--leaf-dark)}
.rrow .diff.ng{color:var(--danger)}
.rrow .diff a{color:var(--leaf-dark)}

/* ===== グラフ ===== */
.tbl-note{font-size:.8rem;color:var(--muted);margin:-6px 0 12px}
.chart-box{position:relative;width:100%;height:340px}
@media(max-width:480px){.chart-box{height:280px}}