/* 一括再計算の「お試し」（2026-10-07）。
   プラグインのコードは使わず、サイト用に一から書いた縮小版。kintone の一覧画面と、本物の文言に合わせている */
.bd-wide { padding: 0 4%; position: relative; z-index: 2; }
.bd { font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px; color: #333; letter-spacing: 0; }
.bd *, .bd *::before, .bd *::after { box-sizing: border-box; }

.bd-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; font-size: 13px; color: #5a6468; }
.bd-ctl b { color: #34495e; }
.bd-seg { display: inline-flex; border: 1px solid #c9d2d6; border-radius: 6px; }
.bd-seg button { border: 0; background: #fff; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: #5a6468; }
.bd-seg button:first-child { border-radius: 6px 0 0 6px; } .bd-seg button:last-child { border-radius: 0 6px 6px 0; }
.bd-seg button + button { border-left: 1px solid #c9d2d6; }
.bd-seg button.is-on { background: #34495e; color: #fff; }
.bd-ctl .sp { flex: 1; }
.bd-reset { border: 1px solid #c9d2d6; background: #fff; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #5a6468; }
.bd-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #5a6468; }
.bd-steps li { display: flex; align-items: center; gap: 6px; }
.bd-steps li i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #e8eef1; color: #34495e; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }
.bd-steps li.is-done i { background: #3498db; color: #fff; }
.bd-steps li.is-next { color: #7c2d12; font-weight: 700; }
.bd-steps li.is-next i { background: #f59e0b; color: #fff; }

/* kintone の一覧画面 */
.bd-k { position: relative; background: #fff; border: 1px solid #e3e7e8; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(31, 45, 61, .08); }
.bd-top { display: flex; align-items: center; height: 48px; padding: 0 16px; background: #fc0; }
.bd-top .logo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; color: #333; }
.bd-top .logo svg { width: 26px; height: 20px; }
.bd-app { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: #d8dcdd; font-weight: 700; font-size: 14px; }
.bd-app i { width: 30px; height: 30px; border-radius: 6px; background: #6aa5d8; }
.bd-viewbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.bd-view { display: flex; align-items: center; gap: 10px; height: 40px; min-width: 200px; padding: 0 12px; border: 2px solid #3498db; border-radius: 4px; color: #3498db; background: #fff; }
.bd-view small { margin-left: auto; }
.bd-kicon { width: 40px; height: 40px; border: 1px solid #e3e7e8; border-radius: 4px; display: grid; place-items: center; color: #8a9296; background: #f7f9fa; }
.bd-kicon svg { width: 20px; height: 20px; }
.bd-run { height: 36px; padding: 0 16px; border: 0; border-radius: 4px; background: #1d4ed8; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.bd-run:hover { background: #1a43bf; }
.bd-run:disabled { opacity: .6; cursor: default; }
.bd-status { font-size: 13px; color: #1d4ed8; font-weight: 700; }
.bd-filter { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; font-size: 13px; color: #5a6468; }
.bd-filter select { height: 30px; border: 1px solid #d0d5d8; border-radius: 4px; padding: 0 6px; font: inherit; font-size: 13px; background: #fff; }
.bd-filter b { color: #333; }
.bd-host { max-height: 420px; overflow: auto; border-top: 1px solid #e3e7e8; }
.bd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; }
.bd-table th { position: sticky; top: 0; z-index: 1; background: #f0f4f8; text-align: left; padding: 8px 12px; border-bottom: 1px solid #e4e7eb; font-weight: 700; color: #333; }
.bd-table td { padding: 8px 12px; border-bottom: 1px solid #eef1f4; }
.bd-table .num { text-align: right; }
.bd-table tbody tr:nth-child(even) td { background: #fafbfc; }
.bd-stale { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: #fde2e1; color: #9b2c2c; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.bd-table tr.is-fresh td { animation: bd-flash 1.6s ease; }
.bd-table tr.is-fresh td.upd { color: #1d4ed8; font-weight: 700; }
@keyframes bd-flash { 0% { background: #dbeafe; } 100% { background: transparent; } }
.bd-lock { font-size: 10px; opacity: .5; }

/* 確認（ブラウザの確認の見た目に合わせる） */
.bd-back { position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, .3); display: grid; place-items: center; padding: 16px; }
.bd-dlg { width: min(460px, 100%); background: #fff8f6; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); padding: 22px 24px 20px; font-size: 14px; line-height: 1.7; color: #333; }
.bd-dlg p { margin: 0 0 14px; }
.bd-dlg .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.bd-dlg button { min-width: 96px; height: 42px; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; border: 0; }
.bd-dlg .ok { background: #8b4a2f; color: #fff; box-shadow: 0 0 0 2px #fff8f6, 0 0 0 3px #8b4a2f; }
.bd-dlg .cancel { background: #fde3d6; color: #8b4a2f; }

/* 次にやる操作を光らせる（最終確定ロックのお試しと同じ） */
.bd .hl { position: relative; z-index: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #f59e0b !important; animation: bd-ring 1.4s ease-in-out infinite; }
.bd-seg button.hl { background: #fff7e0; color: #7c2d12; font-weight: 700; }
@keyframes bd-ring { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #f59e0b, 0 0 0 13px rgba(245, 158, 11, .25); } }
@media (prefers-reduced-motion: reduce) { .bd .hl, .bd-table tr.is-fresh td { animation: none; } }
.bd-msg { font-size: 13px; color: #5a6468; margin-top: 10px; min-height: 1.6em; }
.bd-msg b { color: #7c2d12; }

/* 余白を大きめに（2026-10-07） */
.bd-ctl { margin-bottom: 18px; }
.bd-steps { margin-bottom: 22px; gap: 10px 26px; }
.bd-viewbar { padding: 20px 24px; gap: 14px; }
.bd-filter { padding: 0 24px 16px; gap: 10px; }
.bd-table th { padding: 12px 18px; }
.bd-table td { padding: 12px 18px; }
.bd-host { max-height: 480px; }
.bd-msg { margin-top: 18px; }
.bd-dlg { padding: 28px 30px 24px; }