/* ============================================================
   経審戦略シミュレーター UI（Step3）
   トーン: トップ刷新 .knk- 系（深緑 #0F6E56・白カード・細線）
   すべて .knk-sim 配下にスコープ。スマホ390px優先。
   ============================================================ */
.knk-sim { --knk-accent:#0F6E56; --knk-accent-bg:#E9F5F0; --knk-line:#e3e1da;
  --knk-warn:#B45309; --knk-warn-bg:#FEF7EC; --knk-ng:#B91C1C; --knk-ng-bg:#FDF1F1;
  color:#333; line-height:1.7; font-size:16px; }
.knk-sim * { box-sizing:border-box; }
.knk-sim h2,.knk-sim h3 { border:none; padding:0; background:none; }

/* --- 基準バッジ・注記 --- */
.knk-sim-basis { display:inline-block; font-size:.74em; color:var(--knk-accent);
  background:var(--knk-accent-bg); border-radius:99px; padding:2px 10px; margin-left:8px; vertical-align:middle; }
.knk-sim-note { font-size:.82em; color:#777; margin:.3em 0 .8em; }
.knk-sim-disclaimer { font-size:.8em; color:#777; border:1px solid var(--knk-line);
  border-radius:8px; padding:10px 14px; background:#fafaf8; margin-top:1.6em; }

/* --- タブ --- */
.knk-sim-tabs { display:flex; gap:6px; margin:0 0 14px; }
.knk-sim-tab { flex:1; appearance:none; cursor:pointer; border:1px solid var(--knk-line);
  background:#fff; border-radius:10px; padding:10px 8px; font-size:.92em; color:#555; text-align:center; }
.knk-sim-tab small { display:block; font-size:.76em; color:#999; }
.knk-sim-tab.is-active { background:var(--knk-accent); border-color:var(--knk-accent); color:#fff; }
.knk-sim-tab.is-active small { color:#cfe8df; }
.knk-sim-panel { display:none; }
.knk-sim-panel.is-active { display:block; }

/* --- カード・フォーム --- */
.knk-sim-card { border:1px solid var(--knk-line); border-radius:10px; background:#fff;
  padding:16px 14px; margin:0 0 14px; }
.knk-sim-card-title { font-weight:700; font-size:.95em; color:#222; margin:0 0 10px; }
.knk-sim-grid { display:grid; grid-template-columns:1fr; gap:10px 14px; }
@media (min-width:640px) { .knk-sim-grid { grid-template-columns:1fr 1fr; }
  .knk-sim-grid .is-wide { grid-column:1 / -1; } }
.knk-sim-field label { display:block; font-size:.82em; color:#555; margin-bottom:3px; }
.knk-sim-field label b { color:#222; }
.knk-sim-field input[type=number], .knk-sim-field input[type=date], .knk-sim-field select {
  width:100%; border:1px solid var(--knk-line); border-radius:8px; padding:9px 10px;
  font-size:16px; background:#fff; color:#222; }
.knk-sim-field input:focus, .knk-sim-field select:focus { outline:2px solid var(--knk-accent-bg);
  border-color:var(--knk-accent); }
.knk-sim-field .knk-sim-hint { font-size:.74em; color:#999; margin-top:2px; }

/* --- チェックリスト --- */
.knk-sim-checks { display:grid; grid-template-columns:1fr; gap:6px; }
@media (min-width:640px) { .knk-sim-checks { grid-template-columns:1fr 1fr; } }
.knk-sim-check { display:flex; align-items:center; gap:8px; border:1px solid var(--knk-line);
  border-radius:8px; padding:8px 10px; font-size:.88em; background:#fff; cursor:pointer; }
.knk-sim-check:hover { border-color:var(--knk-accent); }
.knk-sim-check input { width:17px; height:17px; accent-color:var(--knk-accent); flex:none; }
.knk-sim-check .pts { margin-left:auto; font-size:.82em; color:var(--knk-accent); white-space:nowrap; }
.knk-sim-check.is-minus .pts { color:var(--knk-ng); }

/* --- ボタン --- */
.knk-sim-btn { appearance:none; cursor:pointer; width:100%; border:none; border-radius:10px;
  background:var(--knk-accent); color:#fff; font-size:1.05em; font-weight:700; padding:13px; margin-top:4px; }
.knk-sim-btn:hover { opacity:.92; }

/* --- 結果 --- */
.knk-sim-result { border:2px solid var(--knk-accent); border-radius:12px; background:#fff;
  padding:18px 16px; margin:14px 0; }
.knk-sim-p { text-align:center; margin:0 0 6px; }
.knk-sim-p .lbl { display:block; font-size:.82em; color:#555; }
.knk-sim-p .val { font-size:2.6em; font-weight:700; color:var(--knk-accent); line-height:1.2; }
.knk-sim-p .unit { font-size:.5em; color:#777; font-weight:400; }
.knk-sim-match { border-radius:8px; padding:10px 12px; font-size:.88em; margin:10px 0 0; }
.knk-sim-match.ok { background:var(--knk-accent-bg); color:var(--knk-accent); }
.knk-sim-match.ng { background:var(--knk-ng-bg); color:var(--knk-ng); }
.knk-sim-warn { border-radius:8px; padding:10px 12px; font-size:.85em; margin:10px 0 0;
  background:var(--knk-warn-bg); color:var(--knk-warn); }
.knk-sim-detail { width:100%; border-collapse:collapse; font-size:.85em; margin-top:12px; }
.knk-sim-detail th, .knk-sim-detail td { border:1px solid var(--knk-line); padding:6px 9px; text-align:right; }
.knk-sim-detail th { background:#f7f6f2; color:#555; font-weight:600; text-align:left; }
.knk-sim-detail td .sub { color:#999; font-size:.86em; }

/* --- セクション切替（基準で表示が変わる項目） --- */
.knk-sim-only-current, .knk-sim-only-r8 { display:none; }
.knk-sim.basis-current .knk-sim-only-current { display:flex; }
.knk-sim.basis-r8 .knk-sim-only-r8 { display:flex; }