/* 期限の数え方の図（templates/_kigen_count.html）。出生・死亡・車の手続き・パスポートの面で共有。色・余白・字は bc の値（--bc-*）だけ。ds の部品（migration.json の state ds） */
.bc .kc-fig { margin: 0 0 var(--bc-space-3); }
.bc .kc-title { margin: 0 0 var(--bc-space-2); font-size: var(--bc-text-body); line-height: var(--bc-leading); font-weight: 700; color: var(--bc-text); }
.bc .kc-bar { display: block; width: 100%; height: 1.25rem; border-radius: var(--bc-radius-chip); background: var(--bc-bg); }
.bc .kc-seg { stroke: var(--bc-bg); stroke-width: 1; vector-effect: non-scaling-stroke; fill: var(--bc-bg); }
.bc .kc-seg--skip { fill: var(--bc-border); }
.bc .kc-seg--count { fill: var(--bc-brand); }
.bc .kc-seg--last { fill: var(--bc-brand-strong); }
.bc .kc-seg--last-moved { fill: var(--bc-brand-strong); }
.bc .kc-seg--closed { fill: var(--bc-muted); }
.bc .kc-seg--due { fill: var(--bc-sun); }
.bc .kc-cells { list-style: none; margin: var(--bc-space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--bc-space-2); }
.bc .kc-cell { display: flex; flex-direction: column; padding: var(--bc-space-2); background: var(--bc-surface); border: var(--bc-line) solid var(--bc-border); border-radius: var(--bc-radius-input); font-size: var(--bc-text-body); line-height: var(--bc-leading-table); color: var(--bc-text); overflow-wrap: anywhere; }
.bc .kc-date { font-weight: 700; }
.bc .kc-count, .bc .kc-mark { color: var(--bc-muted); }
.bc .kc-cell--skip { background: var(--bc-bg); border-style: dashed; }
.bc .kc-cell--last, .bc .kc-cell--last-moved { background: var(--bc-current-bg); border-color: var(--bc-brand-strong); }
.bc .kc-cell--last .kc-mark, .bc .kc-cell--last-moved .kc-mark { color: var(--bc-current-text); font-weight: 700; }
.bc .kc-cell--closed { background: var(--bc-caution-bg); border-color: var(--bc-caution-line); }
.bc .kc-cell--closed .kc-mark { color: var(--bc-caution-text); }
.bc .kc-cell--due { background: var(--bc-brand-strong); border-color: var(--bc-brand-strong); }
.bc .kc-cell--due .kc-date, .bc .kc-cell--due .kc-mark { color: var(--bc-warn-text); }
.bc .kc-fig figcaption { margin-top: var(--bc-space-2); font-size: var(--bc-text-body); line-height: var(--bc-leading); color: var(--bc-muted); max-width: 43rem; }
.bc .kc-bullets { margin: 0; padding-left: 1.25em; max-width: 43rem; font-size: 1rem; line-height: 1.8; }
.bc .kc-bullets li + li { margin-top: var(--bc-space-1); }
/* 月の並び（ねんきん定期便・国民年金保険料・算定基礎届）。印の無い月は plain、段が続くときは図の間に余白 */
.bc .kc-seg--plain { fill: var(--bc-border); }
.bc .kc-fig--months .kc-cells { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.bc .kc-fig--months .kc-cell--count { background: var(--bc-current-bg); border-color: var(--bc-brand); }
.bc .kc-fig--months .kc-cell--count .kc-mark { color: var(--bc-current-text); font-weight: 700; }
.bc .kc-fig--months + .kc-fig--months { margin-top: var(--bc-space-4); }
/* 印の並ぶ時間の帯（失業給付・育休・未払い賃金）。帯は日数に比例、印は帯の下にマスで並べる（字が重ならない） */
.bc .kc-fig--marks .kc-cells { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.bc .kc-fig--marks .kc-cell--last { background: var(--bc-current-bg); border-color: var(--bc-brand-strong); }