/* おかね — グローバル最小スタイル（レイアウト/装飾は各要素のインラインstyleに準拠） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #FBF6EC;
  color: #4a4038;
  font-family: 'Zen Maru Gothic', -apple-system, BlinkMacSystemFont, "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: #3EA083; text-decoration: none; }
a:hover { color: #2f8069; }
::selection { background: rgba(62, 160, 131, .2); }
select { font-family: 'Zen Maru Gothic', sans-serif; cursor: pointer; }
button { font-family: inherit; }
/* iOS Safari のタップ確実化：遅延・ハイライト・ジェスチャ調整 */
button, a, select, input, label, [data-sec], [data-act], [data-toggle] {
  touch-action: manipulation;
  cursor: pointer;
}
* { -webkit-tap-highlight-color: rgba(62, 160, 131, .18); }

/* スライダー */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 6px; background: #EDE4D2; accent-color: #3EA083;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #3EA083; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(62, 160, 131, .4); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #3EA083; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(62, 160, 131, .4); cursor: pointer;
}

/* フッターの折りたたみ（計算ロジック／出典）：三角は開くと回転 */
.okFoot summary::-webkit-details-marker { display: none; }
.okFoot[open] .okFootTri { transform: rotate(180deg); }
.okFoot summary:hover { color: #5f564a; }

/* パネルのスクロールバー */
.ok-scroll::-webkit-scrollbar { width: 8px; }
.ok-scroll::-webkit-scrollbar-thumb { background: #e6dcc6; border-radius: 8px; }

/* フォーカス可視化（アクセシビリティ） */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #3EA083; outline-offset: 2px;
}

@keyframes okStep { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes okReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* アクセシビリティ配慮 */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: .01ms !important; } button:active { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .ok-scroll { background: #fff; } }
@media (prefers-contrast: more) { body { color: #2a231c; } .ok-scroll, [style*="background:#fff"] { border-color: #c9bfa8 !important; } }

/* スマホ（≤720px）：結果→入力→逆算の縦積み、入力パネルは全幅・非sticky */
@media (max-width: 720px) {
  .okApp { padding: 14px 12px 30px !important; }
  .okResults { order: 1; }
  .okInput { position: static !important; top: auto !important; max-width: none !important; flex: 1 1 100% !important; order: 2; }
  .okInput .ok-scroll { max-height: none !important; overflow: visible !important; }
  .okInputMini { order: 2; }
  .okInputMini button { width: 100% !important; height: auto !important; flex-direction: row !important; padding: 12px !important; }
  .okInputMini button span[style*="vertical"] { writing-mode: horizontal-tb !important; }
  .okRail { order: 3; max-width: none !important; }
  .okWizard { padding: 22px 18px 20px !important; border-radius: 22px !important; }
  .okHero { flex-direction: column !important; align-items: flex-start !important; }
  .okHeroNum { font-size: 34px !important; }
  /* ヘッダー：長い世帯サマリchipは隠し、判定＋「はじめから」を横並びに */
  .okHeadline { display: none !important; }
  /* スマホは常に開いておく＝閉じるボタンは不要 */
  .okClose { display: none !important; }
  /* タイムライン見出しと「今の物価（実質）」を改行（縦積み） */
  .okTLHead { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  /* iOS：入力欄が16px未満だとフォーカスで自動ズームする → 16pxに上げて防ぐ（ピンチズームは維持） */
  input:not([type=range]), select { font-size: 16px !important; }
  /* 16pxで数値が窮屈にならないよう横幅を少し確保（子どもカードの100%幅入力は除く） */
  input[data-num-field] { width: 82px !important; }
}

/* iPhone SE 等の小さい画面：タイムラインの余白と左溝を詰めてグラフを広げる */
@media (max-width: 480px) {
  .okTimeline { padding: 16px 12px 14px !important; }
  /* 費目レーンの左溝は50pxに（見出しが1行で揃うよう確保） */
  .okTimeline [style*="flex:0 0 62px"] { flex: 0 0 50px !important; }
  /* 費目見出し（住宅ローン/教育費/NISA/年金 等）を1行・小さめに揃える */
  .okTimeline [style*="font-size:10.5px"][style*="font-weight:700"] { font-size: 9px !important; white-space: nowrap !important; }
  /* ライフの点ラベルは重なるので小画面では非表示（点＋タップで確認） */
  .okEvLabel { display: none !important; }
}