/* kaikei.cc 無料計算ツール 共通デザイントークン & コンポーネント (260728)
   index.html の :root トークンをツールページ側でも単体で使えるように再宣言したもの。
   iframe内でも新規タブでも単独で成立する必要があるため @import ではなく複製。 */

:root {
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-dim: #f5f5f7;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #86868b;
  --line: #d2d2d7;
  --accent: #ff4d34;
  --accent-ink: #d63c22;
  --accent-soft: #ffe4dc;
  --on-accent: #fff8f6;
  --focus: #d63c22;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-full: 980px;
  --tk-topgap: 20px;   /* 上の帯から中身までの間隔(全ツール共通) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md: 0 20px 48px -22px rgba(0,0,0,.22);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --surface: #1d1d1f; --surface-dim: #000000; --ink: #f5f5f7; --ink-soft: #a1a1a6; --ink-faint: #6e6e73;
    --line: #333336; --accent: #ff6a52; --accent-ink: #ff8a72; --accent-soft: #3a2019; --on-accent: #1b0d09; --focus: #ff6a52;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 24px 60px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1d1d1f; --surface-dim: #000000; --ink: #f5f5f7; --ink-soft: #a1a1a6; --ink-faint: #6e6e73;
  --line: #333336; --accent: #ff6a52; --accent-ink: #ff8a72; --accent-soft: #3a2019; --on-accent: #1b0d09; --focus: #ff6a52;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 24px 60px -24px rgba(0,0,0,.7);
}
:root[data-theme="light"] {
  --bg: #fbfbfd; --surface: #ffffff; --surface-dim: #f5f5f7; --ink: #1d1d1f; --ink-soft: #6e6e73; --ink-faint: #86868b;
  --line: #d2d2d7; --accent: #ff4d34; --accent-ink: #d63c22; --accent-soft: #ffe4dc; --on-accent: #fff8f6; --focus: #d63c22;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md: 0 20px 48px -22px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "palt" 1;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ★上の帯(.tk-topbar)から中身までの間隔。**ここが唯一の定義元**。
   tools/2/ の画面も _tk_override.css の .main で同じ値を使う(260805 亀山さん指示で統一) */
.tk-page { padding: var(--tk-topgap) 20px 20px; max-width: 640px; margin: 0 auto 40px; }
.tk-page--wide { max-width: 860px; }

.tk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.tk-card + .tk-card { margin-top: 16px; }

.tk-title { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
/* 261017 SEO(A3): 最初の見出しを <h1 class="tk-title">、小見出しを <h2 class="tk-title"> にしても
   div.tk-title と同じ見た目にする(h1/h2 は既定で太字になるため)。余白・大きさは上の .tk-title が決める。
   ★ページごとに同じ打ち消しを書かないこと(261017 以前の6ページ・_seikyu.php・hyo/_hyo.php には写しが残っている)。
   ミッション「ma kaikei.cc 一般公開ページ SEO改善策の検討と今後追加する機能の提案」／発信者: mask（亀山） */
h1.tk-title, h2.tk-title { font-weight: inherit; }
.tk-desc { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-soft); }

.tk-field { margin-bottom: 16px; }
.tk-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.tk-field .tk-row { display: flex; align-items: center; gap: 8px; }
.tk-field .tk-unit { font-size: 13px; color: var(--ink-faint); white-space: nowrap; min-width: 1.4em; }

/* 2つの.tk-fieldを横並びにする(社会保険+年齢区分、雇用保険+扶養人数 等) */
.tk-field-row { display: flex; gap: 12px; margin-bottom: 16px; }
.tk-field-row .tk-field { flex: 1; min-width: 0; margin-bottom: 0; }
@media (max-width: 420px) { .tk-field-row { flex-direction: column; gap: 16px; } }

.tk-input {
  flex: 1; min-width: 0; font-size: 16px; padding: 11px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}
.tk-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }

.tk-select {
  width: 100%; appearance: none; -webkit-appearance: none; font-size: 16px; padding: 11px 30px 11px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%2386868b"/></svg>') no-repeat right 12px center;
  color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; cursor: pointer;
}
.tk-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.tk-select:disabled { opacity: .45; cursor: not-allowed; }

/* stepper: text input flanked by -/+ buttons */
.tk-stepper { flex: 1; display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--bg); }
.tk-stepper .tk-input { border: none; border-radius: 0; background: transparent; } /* 261028 角丸だと左の区切り線が曲がる */
.tk-stepper .tk-input:focus-visible { outline: none; background: var(--surface-dim); }
.tk-step-btn {
  flex: 0 0 38px; border: none; background: var(--surface-dim); color: var(--ink-soft);
  font-size: 17px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 金額欄の「++」「--」(大きい刻み)ボタン。「+」「-」より一回り狭く、2文字を詰めて表示 */
.tk-step-btn-double { flex-basis: 34px; font-size: 13px; letter-spacing: -1px; }
.tk-stepper > * + *, .tk-stepper > .tk-input { border-left: 1px solid var(--line); } /* 261028 入力欄の左の線: .tk-stepper .tk-input の border:none に負けて消えていた */
.tk-step-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.tk-step-btn:active { background: var(--accent); color: var(--on-accent); }

.tk-result { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 9px; }
.tk-result-hero {
  background: var(--accent-soft); margin: 0 -24px; padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.tk-result-hero span { color: var(--accent-ink); font-weight: 700; font-size: 12.5px; }
.tk-result-hero b { color: var(--accent-ink); font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 700; }
.tk-result-line { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-soft); }
.tk-result-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.tk-table-scroll { max-height: 480px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.tk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tk-table th, table.tk-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
table.tk-table th { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; background: var(--surface-dim); position: sticky; top: 0; }
table.tk-table td.num, table.tk-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tk-table tr:last-child td { border-bottom: none; }
table.tk-table td.grp-end, table.tk-table th.grp-end { border-right: 2px solid var(--line); }

.tk-note { font-size: 12px; color: var(--ink-faint); margin-top: 16px; }

/* ------------------------------------------------------------------
   画面切り替え式のツール画面ナビ (260731)
   トップページのサブウィンドウ(モーダル+iframe)をやめ、ツールを選んだら
   そのページへ画面ごと切り替える方式にした。切り替えた先で迷子にならないよう
   上部に戻るバー、下部に関連ツールを置く。中身は tools/_tool_list.php が生成。
   tools/2/_tk_override.css の `a:hover{background-color:...}` に負けないよう、
   ホバー時の背景は各クラス側で明示する。
   ------------------------------------------------------------------ */
.tk-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(12px, 3vw, 24px);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.tk-topbar-back {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface-dim);
  color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tk-topbar-back:hover, .tk-topbar-back:focus-visible { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.tk-topbar-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 画面の中に見出しが無いページは帯のツール名を h1 にする(tools/_tool_list.php の topbar_h1)。span と同じ見た目に */
h1.tk-topbar-title { margin: 0; line-height: inherit; }
.tk-topbar-home { flex: none; font-size: 12px; color: var(--ink-faint); text-decoration: none; white-space: nowrap; background: transparent; }
.tk-topbar-home:hover { color: var(--accent-ink); background: transparent; }
@media (max-width: 620px) {
  .tk-topbar-home { display: none; }
  .tk-topbar-title { font-size: 13.5px; }
  .tk-topbar-back { padding: 8px 13px; font-size: 13px; }
}

.tk-related-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 40px; }
.tk-related { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.tk-related-head { margin: 0 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-faint); }
.tk-related-sep { margin-top: 24px; }
.tk-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 10px; }
.tk-related-card {
  display: block; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.tk-related-card:hover { border-color: var(--accent); background: var(--surface-dim); }
.tk-related-card .n { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14px; }
.tk-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 600; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.tk-related-card .n .arrow { font-size: 11px; color: var(--ink-faint); }
.tk-related-card:hover .n, .tk-related-card:hover .n .arrow { color: var(--accent-ink); }
.tk-related-card .d { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
  font-size: 12.5px; color: var(--ink-soft); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.tk-chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--surface); }
.tk-chip .c { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.tk-backrow { margin-top: 26px; text-align: center; }
.tk-btn-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
  border-radius: var(--r-full); background: var(--accent); color: var(--on-accent);
  font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background .15s ease;
}
.tk-btn-back:hover { background: var(--accent-ink); color: var(--on-accent); }