/* 会社の給与計算 261031 ／ ミッション「ma kaikei.cc pub 会社の給与計算(登録なし・CSV往復)の設計検討」の実装 ／ 発信者: mask（亀山）
   色・角丸は tools/_toolkit.css のトークンを使う（ダーク対応もそちら任せ）。 */
.kk-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.kk-h { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
.kk-h:first-child { margin-top: 0; }
.kk-h small { font-weight: 400; color: var(--ink-faint); font-size: 12.5px; margin-left: 6px; }
.kk-priv { font-size: 13.5px; line-height: 1.7; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); background: var(--surface-dim); color: var(--ink); }
.kk-priv summary { cursor: pointer; margin-top: 6px; color: var(--accent-ink); font-weight: 600; }
.kk-priv ol { margin: 8px 0 4px; padding-left: 1.4em; }
.kk-priv li + li { margin-top: 4px; }
.kk-priv code { font-size: 12px; }
.kk-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.kk-cond label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); min-width: 0; }
.kk-cond .tk-input, .kk-cond .tk-select { min-width: 0; }
.kk-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--ink); white-space: nowrap; }
.kk-inline select { min-width: 5.6em; width: auto; }
.kk-cond .tk-select { width: auto; }
.kk-btn { font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.4; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-full, 999px); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-block; }
.kk-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.kk-btn:focus-visible, .kk-hidden:focus-visible + .kk-btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.kk-btn-main { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.kk-btn-main:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent, #fff); }
.kk-btn:disabled { opacity: .5; cursor: default; }
.kk-msg { margin-top: 10px; font-size: 13px; line-height: 1.6; }
.kk-msg:empty { display: none; }
.kk-msg .kk-err { color: #b3261e; }
.kk-msg .kk-note { color: var(--ink-soft, inherit); font-size: .94em; }
.kk-msg .kk-ok { color: var(--accent-ink); }
.kk-msg ul { margin: 4px 0 0; padding-left: 1.3em; }
:root[data-theme="dark"] .kk-msg .kk-err { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kk-msg .kk-err { color: #ff8a80; } }
.kk-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.kk-t { border-collapse: collapse; width: 100%; font-size: 13px; }
.kk-t th, .kk-t td { border: 1px solid var(--line); padding: 4px 6px; text-align: right; white-space: nowrap; }
.kk-t thead th { background: var(--surface-dim); font-weight: 600; text-align: center; font-size: 12px; }
.kk-t thead th.kk-g2 { background: #fff6cc; color: #5f4b00; }
:root[data-theme="dark"] .kk-t thead th.kk-g2 { background: #4a3d00; color: #ffe8a0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kk-t thead th.kk-g2 { background: #4a3d00; color: #ffe8a0; } }
.kk-t td.l, .kk-t th.l { text-align: left; }
.kk-t td.kk-r { background: var(--surface-dim); font-variant-numeric: tabular-nums; }
.kk-t td.kk-net { font-weight: 700; color: var(--accent-ink); }
.kk-t input.kk-n { width: 86px; text-align: right; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg, #fff); color: var(--ink); font-variant-numeric: tabular-nums; }
.kk-t input.kk-v { background: var(--kk-var); }
.kk-t input.kk-s { width: 100%; min-width: 90px; text-align: left; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg, #fff); color: var(--ink); }
.kk-t input:focus-visible, .kk-t select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.kk-t input.bad { border-color: #b3261e; }
:root[data-theme="dark"] .kk-t input.bad { border-color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kk-t input.bad { border-color: #ff8a80; } }
.kk-t tfoot td { font-weight: 700; background: var(--surface-dim); }
.kk-t tr.warn td.kk-nm { box-shadow: inset 3px 0 0 #d9822b; }
/* ▸: 261031 22:5x mask指摘「三角表示が小さい」で 36px 四方に（✕ は ▸ の中の「この社員を画面から外す」へ移した） */
.kk-t .kk-tog { border: 0; background: transparent; cursor: pointer; font-size: 18px; min-width: 36px; min-height: 36px; padding: 4px 8px; border-radius: 8px; color: var(--accent-ink); }
.kk-t .kk-tog:hover, .kk-t .kk-tog:focus-visible { background: var(--surface-dim); }
.kk-t tr.kk-d td { text-align: left; white-space: normal; background: var(--surface-dim); padding: 10px 12px; }
.kk-d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.kk-d-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.kk-d-grid select, .kk-d-grid input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg, #fff); color: var(--ink); }
.kk-basis { margin: 10px 0 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.kk-basis li::before { content: "・"; }
.kk-list { margin: 0; padding-left: 1.3em; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.kk-list li + li { margin-top: 4px; }
@media (max-width: 640px) { .kk-btn { width: 100%; text-align: center; } }

/* 261031 給与仕訳CSV（会計ソフトへ渡す） */
.kk-sw-kamoku { margin: 4px 0 10px; }
.kk-sw-kamoku summary { cursor: pointer; font-size: 13px; color: var(--ink-soft, inherit); padding: 4px 0; }
.kk-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0; }
.kk-chk input { width: auto; }
.kk-sw-kamoku .tk-input { text-align: left; }

/* 261031 14:5x ／ ミッション「ma kaikei.cc pub 会社の給与計算: CSVドラッグ&ドロップ・支給/控除項目の追加・ページ離脱時の警告」／ 発信者: mask（亀山） */
.kk-drop { margin-top: 12px; padding: 16px 14px; border: 2px dashed var(--line); border-radius: var(--r-md); text-align: center; font-size: 13.5px; color: var(--ink-soft); background: var(--surface-dim); cursor: pointer; }
.kk-drop:hover { border-color: var(--accent); color: var(--accent-ink); }
.kk-drop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kk-drop-i { font-size: 18px; margin-right: 4px; }
.kk-drop-over { display: none; }
body.kk-dragging .kk-drop-over { display: flex; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); pointer-events: none; }
body.kk-dragging .kk-drop-over span { padding: 28px 40px; border: 3px dashed var(--on-accent, #fff); border-radius: var(--r-md); background: var(--accent); color: var(--on-accent, #fff); font-size: 18px; font-weight: 700; }
body.kk-dragging .kk-drop { border-color: var(--accent); }
.kk-items { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.kk-items > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); padding: 2px 0; }
.kk-items .kk-row { margin-top: 10px; }
.kk-items .kk-list { margin-top: 10px; font-size: 12.5px; }
.kk-cond label.kk-chk { flex-direction: row; align-items: center; font-weight: 400; color: var(--ink); padding-bottom: 8px; }
.kk-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.kk-chips:empty { display: none; }
.kk-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: var(--r-full, 999px); font-size: 12.5px; background: var(--surface); }
.kk-chip-del { border: 0; background: transparent; cursor: pointer; color: var(--ink-faint); font-size: 12px; padding: 2px 6px; border-radius: var(--r-full, 999px); }
.kk-chip-del:hover { color: #b3261e; }
:root[data-theme="dark"] .kk-chip-del:hover { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kk-chip-del:hover { color: #ff8a80; } }
.kk-chip-del:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.kk-t thead th small.kk-kind { font-weight: 400; font-size: 10.5px; opacity: .8; }
.kk-dirty { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #a35200; }
:root[data-theme="dark"] .kk-dirty { color: #ffb870; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kk-dirty { color: #ffb870; } }
@media (max-width: 640px) { .kk-drop { display: none; } }

/* 261031 15:21 ／ ミッション「ma kaikei.cc pub 会社の給与計算: …」の続き（mask指示「手当と控除を分けて表示・1人分を2行に」「都道府県は地図のポップアップ」）／ 発信者: mask（亀山）
   この画面だけ横幅を広げる（2段の表が、パソコンでは横に送らずに収まるように） */
.tk-page--wide:has(#kkT) { max-width: 1240px; }
.kk-t input.kk-n { width: 76px; padding: 4px 5px; }
.kk-t input.kk-no { min-width: 0; width: 56px; }
.kk-t td.kk-nm input.kk-s { min-width: 96px; }
.kk-t tbody tr.kk-r1 > td { border-top: 2px solid var(--ink-faint); }
.kk-t tbody tr.kk-r1:first-child > td { border-top-width: 1px; }
.kk-t td.kk-ctl { vertical-align: middle; text-align: center; padding: 2px; }
.kk-t td.kk-ctl .kk-tog { display: block; margin: 0 auto; }
.kk-t th.kk-kb, .kk-t td.kk-kb { width: 2.6em; padding: 4px 2px; text-align: center; font-size: 12px; font-weight: 700; white-space: nowrap; }
.kk-t .kk-kb-pay { color: var(--accent-ink); }
.kk-t .kk-kb-ded { color: var(--ink-soft); }
/* 261031 16:30 mask指示「（灰色を）分ける」: 灰色は「計算した金額」だけ。入力欄の見出しは白、その段に無い欄は斜線。
   ダークの --surface-dim は黒に近いので、計算の灰色は明暗どちらでも灰色に見える半透明にする */
/* 色の名前はこの画面全体で1つ（表・賞与の表・凡例が同じ名前を使う） */
:root { --kk-calc: rgba(128, 128, 128, .16); --kk-none: repeating-linear-gradient(135deg, transparent 0 6px, rgba(128, 128, 128, .22) 6px 7px); --kk-var: #fffbe0; }
:root[data-theme="dark"] { --kk-var: #3a3200; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kk-var: #3a3200; } }
.kk-t thead th { background: var(--surface); }
.kk-t td.kk-r, .kk-t tfoot td { background: var(--kk-calc); }
/* 見出しは下へ送ると貼り付くので、地を不透明に（半透明だと下の明細が透ける。部品は透明度0しか「透明」と見ない） */
.kk-t thead th.kk-g3 { background: linear-gradient(var(--kk-calc), var(--kk-calc)) var(--surface); }
.kk-t th.kk-blank { background: var(--kk-none) var(--surface); }
.kk-t td.kk-blank, .kk-t tfoot td.kk-blank { background: var(--kk-none); }
.kk-t tr.kk-flash > td { animation: kk-flash 2.4s ease-out 1; }
@keyframes kk-flash { from { box-shadow: inset 0 0 0 999px rgba(255, 196, 0, .35); } to { box-shadow: none; } }
.kk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; color: var(--ink-soft); }
.kk-legend i { display: inline-block; width: 14px; height: 12px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--line); border-radius: 3px; }
.kk-legend .lg-fix { background: var(--bg, var(--surface)); }
.kk-legend .lg-var { background: var(--kk-var); }
.kk-legend .lg-calc { background: var(--kk-calc); }
.kk-legend .lg-none { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(128, 128, 128, .35) 3px 4px); }
.kk-t td.kk-sum, .kk-t th.kk-sum { font-weight: 700; }
.kk-t td.kk-net { vertical-align: middle; font-size: 14px; }
.kk-t tfoot td.kk-net { color: var(--accent-ink); }
.kk-t tfoot td.kk-kb { font-weight: 700; }
.kk-t tfoot tr.kk-r1 > td { border-top: 2px solid var(--ink-faint); }
.kk-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kk-fld-lab { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.kk-pref-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.kk-pref-btn span { font-size: 12px; font-weight: 600; color: var(--accent-ink); text-decoration: underline; }
.kk-pref-btn:hover { border-color: var(--accent); }
.kk-pref-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kk-pref-btn .ksel-map-ico { color: var(--accent-ink); }
/* 地図のポップアップの見た目は tools/2/_kyuyo_sel.php の ksel_pop_css()（かんたん給与計算と共用）を kaisha_kyuyo.php が出す */
.kk-one { margin-top: 10px; }
.kk-btn.kk-btn-sm { padding: 6px 14px; font-size: 12.5px; }

/* 261031 賞与の計算（段階2） */
.kk-fy { align-self: flex-end; font-size: 12.5px; color: var(--ink-soft); padding-bottom: 10px; }
#kkBnT input.kk-n { width: 104px; }
#kkBnT tr.warn td:first-child { box-shadow: inset 3px 0 0 #d9822b; }
.kk-inline .kk-left { text-align: left; }

/* 261031 ミッション「ma kaikei.cc pub 会社の給与計算 段階3＝検算モード」／ 発信者: mask（亀山） */
#kkKsT td.ks-c { text-align: right; vertical-align: top; min-width: 7.5em; }
#kkKsT .ks-a { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
#kkKsT input.kk-n { width: 100%; box-sizing: border-box; }
#kkKsT .ks-d { font-size: 12px; min-height: 1.4em; font-weight: 600; }
#kkKsT .ks-d.ok { color: var(--accent-ink); }
#kkKsT .ks-d.near { color: #a85a00; }
#kkKsT .ks-d.ng { color: #b3261e; }
:root[data-theme="dark"] #kkKsT .ks-d.ng { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #kkKsT .ks-d.ng { color: #ff8a80; } }

/* 261031 22:1x ミッション「ma kaikei.cc pub 給与台帳 スマホ実機の指摘」／ 発信者: mask（亀山）
   スマホ: 見出しを残す（kaisha_sp.js が th をずらす） */
.kk-t thead.kk-sp-on th { position: relative; z-index: 4; box-shadow: 0 1px 0 var(--line); }
/* 横スクロールバーはパソコンだけ（261101 10:2x mask指示「スマホタブレットでは表示しなくて良い・パソコンでは表示」）。
   共通部品 tk_hyo_kotei() は幅761px以上ならタブレットにもバーを出すので、指で触る機械（マウスが無い）ではここで消す。
   共通部品（bk/_init/_hyo_kotei.php）はほかの画面に響くので直さない */
@media (hover: none) and (pointer: coarse) {
  html .kc-hk-xbar { display: none !important; }
  html .kk-wrap::-webkit-scrollbar { display: none; }
}
/* 「この社員を画面から外す」＝戻せない取消。/tools/ の主操作は赤橙の塗りなので、塗らずに枠線と字を赤にする（スマホには「指したとき」が無いので、いつも色を付ける） */
:root { --kk-dan: #b3261e; }
:root[data-theme="dark"] { --kk-dan: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kk-dan: #ff8a80; } }
.kk-one .kk-btn.kk-del-btn { color: var(--kk-dan); border-color: var(--line); background: var(--surface); margin-left: auto; }   /* 隣の PDF（赤橙の枠）と見分けるため、枠は灰色・字だけ赤・先頭に ✕ */
@media (max-width: 640px) { .kk-one { gap: 18px; } .kk-one .kk-btn.kk-del-btn { margin-left: 0; } }
/* 毎月の給与／賞与の形（body.kk-m-shoyo は kaisha_shoyo_ui.js の setMode が付ける） */
body:not(.kk-m-shoyo) .kk-m-s, body:not(.kk-m-shoyo) #kkBn { display: none !important; }
body.kk-m-shoyo .kk-m-k, body.kk-m-shoyo #kkKs { display: none !important; }
.kk-steps { margin: 0 0 8px; padding-left: 1.4em; font-size: 13.5px; line-height: 1.8; }
/* ▸ の中身: 表が横に長いと、中身も表の幅に広がって画面の外へ出る（ボタンの文字が見えない）。スマホでは見えている幅に収めて左に留める */
/* 年末調整の .nc-detail もこれで収める（パソコン幅でも。表が横に長いと同じことが起きるため） */
@media all {
  .kk-t tr.kk-d > td > * { position: sticky; left: 12px; width: calc(var(--kk-wrapw, 100vw) - 26px); max-width: calc(var(--kk-wrapw, 100vw) - 26px); box-sizing: border-box; }
}