/* Opt-in: load after main.css and place components inside .bc. */
:root {
  --bc-bg: #fff;
  --bc-surface: #f6f9fa;
  --bc-border: #d5dde1;
  --bc-text: #222;
  --bc-muted: #555;
  --bc-faint: #666;
  --bc-source-text: #444;
  --bc-brand: #176b87;
  --bc-brand-strong: #10516a;
  --bc-sun: #c62828;
  --bc-sat: #1565c0;
  --bc-good-bg: #edf5ee;
  --bc-good-text: #285b38;
  --bc-warn-bg: #5f6368;
  --bc-warn-text: #fff;
  --bc-caution-bg: #fff4e0;
  --bc-caution-text: #5d3a00;
  --bc-caution-line: #b26a00;
  --bc-info-bg: #edf4f8;
  --bc-info-text: #24536b;
  --bc-current-bg: #e7f2f5;
  --bc-current-text: #14566d;
  --bc-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --bc-text-body: 1rem;
  --bc-text-small: .9rem;
  --bc-text-note: .85rem;
  --bc-text-source: .9375rem;
  --bc-text-h1: 1.5rem;
  --bc-text-h1-mobile: 1.3rem;
  --bc-text-h2: 1.25rem;
  --bc-text-h3: 1.1rem;
  --bc-leading: 1.7;
  --bc-leading-heading: 1.4;
  --bc-leading-table: 1.5;
  --bc-space-1: .25rem;
  --bc-space-2: .5rem;
  --bc-space-3: .75rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.5rem;
  --bc-space-6: 2rem;
  --bc-space-7: 3rem;
  --bc-radius-input: .25rem;
  --bc-radius-card: .5rem;
  --bc-radius-chip: 62.4375rem;
  --bc-target: 2.75rem;
  --bc-line: .0625rem;
  --bc-focus: .125rem;
}

.bc {
  color: var(--bc-text);
  background: var(--bc-bg);
  font: var(--bc-text-body)/var(--bc-leading) var(--bc-font);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: left;
}
.bc *, .bc *::before, .bc *::after { box-sizing: border-box; }
.bc .bc-nowrap { white-space: nowrap; } /* 数字と単位（67日・12.2 など）を折り返さない */
.bc h1, .bc h2, .bc h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bc-text);
  font-weight: 700;
  line-height: var(--bc-leading-heading);
  letter-spacing: .025rem;
}
.bc h1 { font-size: var(--bc-text-h1); }
.bc h2 { font-size: var(--bc-text-h2); }
.bc h3 { font-size: var(--bc-text-h3); }
.bc p, .bc ul, .bc ol, .bc dl { margin: 0; }
.bc p + p { margin-top: var(--bc-space-2); }
.bc small { font-size: var(--bc-text-note); }
.bc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bc-target);
  max-width: 100%;
  color: var(--bc-brand);
  text-decoration: underline;
  text-underline-offset: .2rem;
  text-decoration-thickness: var(--bc-line);
}
.bc a:hover { text-decoration-thickness: var(--bc-focus); }
.bc :focus-visible {
  outline: var(--bc-focus) solid var(--bc-brand);
  outline-offset: var(--bc-space-1);
}
.bc code {
  font-size: var(--bc-text-note);
  color: var(--bc-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: normal;
}

/* 01 Answer: use immediately after the page h1. */
.bc .bc-answer {
  margin-top: var(--bc-space-4);
  padding: var(--bc-space-5);
  border: var(--bc-line) solid var(--bc-border);
  border-left: var(--bc-space-1) solid var(--bc-brand);
  border-radius: var(--bc-radius-card);
  background: var(--bc-surface);
}
.bc .bc-answer__value { font-size: var(--bc-text-h1); font-weight: 700; line-height: var(--bc-leading-heading); }
.bc .bc-answer__detail { margin-top: var(--bc-space-2); color: var(--bc-muted); font-size: var(--bc-text-small); }

/* 02 Tables: row states may also be applied to individual cells. */
.bc .bc-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: var(--bc-line) solid var(--bc-border);
  border-radius: var(--bc-radius-card);
  overscroll-behavior-inline: contain;
}
.bc .bc-table {
  width: 100%;
  min-width: 36rem;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: var(--bc-text-body);
  line-height: var(--bc-leading-table);
  text-align: left;
}
.bc .bc-table caption { padding: var(--bc-space-4); text-align: left; color: var(--bc-text); font-weight: 700; }
.bc .bc-table th, .bc .bc-table td {
  padding: var(--bc-space-3) var(--bc-space-4);
  border: 0;
  border-top: var(--bc-line) solid var(--bc-border);
  background: transparent;
  text-align: left;
  vertical-align: middle;
}
.bc .bc-table thead th { background: var(--bc-surface); color: var(--bc-text); font-weight: 700; }
.bc .bc-table tbody th { font-weight: 500; }
.bc .bc-table .bc-num { text-align: right; white-space: nowrap; }
.bc .bc-table .is-today { background: var(--bc-current-bg); color: var(--bc-current-text); }
/* セルは既定で折り返さない（SP で「赤/口」のように 1 字ずつ割れるのを防ぐ）。長い文の列だけ .bc-wrap で折り返す */
.bc .bc-table th, .bc .bc-table td { white-space: nowrap; }
.bc .bc-table .bc-wrap { white-space: normal; min-width: 12rem; }
.bc .bc-table .is-today > :first-child { box-shadow: inset var(--bc-space-1) 0 var(--bc-brand); }
.bc .bc-table .is-current { background: var(--bc-current-bg); color: var(--bc-current-text); font-weight: 700; }
.bc .bc-table .is-current > :first-child { box-shadow: inset var(--bc-space-1) 0 var(--bc-brand); }
.bc .bc-table .is-mark { background: var(--bc-good-bg); color: var(--bc-good-text); }
.bc .bc-table .is-dim { color: var(--bc-faint); }
.bc .bc-table .is-sun, .bc .bc-table .is-holiday, .bc .is-sun, .bc .is-holiday { color: var(--bc-sun); }
.bc .bc-table .is-sat, .bc .is-sat { color: var(--bc-sat); }
.bc .bc-table .is-sat.is-holiday, .bc .is-sat.is-holiday { color: var(--bc-sun); } /* 土曜の祝日は祝日の色 */
.bc .bc-table--compact th, .bc .bc-table--compact td { padding: var(--bc-space-2) var(--bc-space-3); }
/* 2〜4 列の短い表は画面幅に収める（SP でも横スクロールにしない） */
.bc .bc-table--fit { min-width: 0; }

/* 03 Buttons: the same rules apply to a and button. */
.bc .bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  min-height: var(--bc-target);
  margin: 0;
  padding: var(--bc-space-2) var(--bc-space-4);
  border: var(--bc-line) solid var(--bc-brand);
  border-radius: var(--bc-radius-input);
  background: var(--bc-bg);
  color: var(--bc-brand);
  font: 600 var(--bc-text-body)/var(--bc-leading-table) var(--bc-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bc .bc-btn:hover { background: var(--bc-current-bg); text-decoration: underline; text-underline-offset: .2rem; }
.bc .bc-btn:active { background: var(--bc-info-bg); }
.bc .bc-btn--primary { background: var(--bc-brand); color: var(--bc-bg); }
.bc .bc-btn--primary:hover, .bc .bc-btn--primary:active { background: var(--bc-brand-strong); }
.bc .bc-btn--text { border-color: transparent; background: transparent; text-decoration: underline; }
.bc .bc-btn:disabled, .bc .bc-btn[aria-disabled="true"] {
  background: var(--bc-surface);
  border-color: var(--bc-border);
  color: var(--bc-faint);
  cursor: not-allowed;
  text-decoration: none;
}

/* 04 Chips: spans are status labels; anchors are navigation. */
.bc .bc-chips { display: flex; flex-wrap: wrap; gap: var(--bc-space-2); padding: 0; list-style: none; }
.bc .bc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-1);
  min-height: var(--bc-target);
  padding: var(--bc-space-2) var(--bc-space-4);
  border: var(--bc-line) solid var(--bc-border);
  border-radius: var(--bc-radius-chip);
  background: var(--bc-bg);
  color: var(--bc-muted);
  font-size: var(--bc-text-small);
  font-weight: 600;
  line-height: var(--bc-leading-table);
  text-decoration: none;
}
.bc a.bc-chip { color: var(--bc-brand); border-color: var(--bc-brand); }
.bc a.bc-chip:hover { background: var(--bc-surface); text-decoration: underline; }
.bc .bc-chip[aria-current], .bc .bc-chip--current { background: var(--bc-current-bg); color: var(--bc-current-text); border-color: var(--bc-brand); }
.bc .bc-chip--good { background: var(--bc-good-bg); color: var(--bc-good-text); border-color: var(--bc-good-text); }
.bc .bc-chip--warn { background: var(--bc-warn-bg); color: var(--bc-warn-text); border-color: var(--bc-warn-bg); }
.bc .bc-chip--info { background: var(--bc-info-bg); color: var(--bc-info-text); border-color: var(--bc-info-text); }
/* 未確定の値（「12月上旬予定」「時刻未定」など）の札。点線で「決まっていない」を示す */
.bc .bc-chip--tentative { background: var(--bc-bg); color: var(--bc-muted); border-style: dashed; border-color: var(--bc-faint); }
/* 絞り込みのボタン版（aria-pressed）。選択は色と ✓ の両方で示す */
.bc button.bc-chip { font-family: inherit; cursor: pointer; }
.bc button.bc-chip[aria-pressed="true"] { background: var(--bc-current-bg); color: var(--bc-current-text); border-color: var(--bc-brand); }
.bc button.bc-chip[aria-pressed="true"]::before { content: "✓"; }

/* 05 Notes */
.bc .bc-note { padding: var(--bc-space-4); border-radius: var(--bc-radius-card); font-size: var(--bc-text-body); }
.bc .bc-note--info { color: var(--bc-info-text); background: var(--bc-info-bg); border-left: var(--bc-space-1) solid var(--bc-info-text); }
/* 注記の注意は読みものの地。濃い灰色（--bc-warn-*）は不成就日などの札だけに使う */
.bc .bc-note--warn { color: var(--bc-caution-text); background: var(--bc-caution-bg); border-left: var(--bc-space-1) solid var(--bc-caution-line); }
.bc .bc-note a { color: inherit; }

/* 左の帯（border-left）を持つ部品は、帯の側の角を丸めない。帯を持つ部品を足したらここに並べる */
.bc .bc-answer, .bc .bc-note--info, .bc .bc-note--warn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* 06 FAQ: native disclosure and keyboard behavior. */
.bc .bc-faq { border-top: var(--bc-line) solid var(--bc-border); }
.bc .bc-faq details { border-bottom: var(--bc-line) solid var(--bc-border); }
.bc .bc-faq summary { min-height: var(--bc-target); padding: var(--bc-space-4); font-weight: 700; cursor: pointer; }
.bc .bc-faq summary::marker { color: var(--bc-brand); }
.bc .bc-faq summary:hover { background: var(--bc-surface); }
.bc .bc-faq details[open] summary { color: var(--bc-brand); }
.bc .bc-faq__answer { padding: 0 var(--bc-space-4) var(--bc-space-5); font-size: var(--bc-text-body); }

/* 07 Source: only immediately below a table/calendar. */
.bc .bc-source, .bc .data-source-note { margin: .375rem 0 .625rem; font-size: var(--bc-text-source); color: var(--bc-source-text); line-height: var(--bc-leading); }

/* 08 Related links */
.bc .bc-related { padding-top: var(--bc-space-5); border-top: var(--bc-line) solid var(--bc-border); }
.bc .bc-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--bc-space-2) var(--bc-space-5); padding: var(--bc-space-3) 0 0; list-style: none; }
.bc .bc-related a { display: flex; justify-content: space-between; gap: var(--bc-space-3); padding: var(--bc-space-2) 0; }

/* 09 Fields: labels always remain visible. Checkbox/radio labels own the 44px target. */
.bc .bc-field { display: grid; align-content: start; gap: var(--bc-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.bc .bc-field > label, .bc .bc-field legend { color: var(--bc-text); font-size: var(--bc-text-body); font-weight: 600; }
.bc .bc-field legend { padding: 0; margin-bottom: var(--bc-space-2); }
.bc .bc-field input:not([type="checkbox"]):not([type="radio"]), .bc .bc-field select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--bc-target);
  margin: 0;
  padding: var(--bc-space-2) var(--bc-space-3);
  border: var(--bc-line) solid var(--bc-faint);
  border-radius: var(--bc-radius-input);
  background: var(--bc-bg);
  color: var(--bc-text);
  font: var(--bc-text-body)/var(--bc-leading-table) var(--bc-font);
}
.bc .bc-field input::placeholder { color: var(--bc-faint); opacity: 1; }
.bc .bc-field input:disabled, .bc .bc-field select:disabled { color: var(--bc-faint); background: var(--bc-surface); opacity: 1; cursor: not-allowed; }
.bc .bc-field input[readonly] { background: var(--bc-surface); }
.bc .bc-field input[aria-invalid="true"] { border: var(--bc-focus) solid var(--bc-sun); }
.bc .bc-field__help { font-size: var(--bc-text-small); color: var(--bc-muted); }
.bc .bc-field__error, .bc .bc-field__required { font-size: var(--bc-text-small); color: var(--bc-sun); }
.bc .bc-field .bc-field__choice { display: flex; align-items: center; gap: var(--bc-space-3); min-height: var(--bc-target); font-weight: 400; cursor: pointer; }
.bc .bc-field__choice input { appearance: none; position: relative; flex: 0 0 var(--bc-target); width: var(--bc-target); height: var(--bc-target); margin: 0; padding: 0; border: 0; background: transparent; cursor: inherit; }
.bc .bc-field__choice input::before { content: ""; position: absolute; top: .75rem; left: .75rem; width: 1.25rem; height: 1.25rem; border: var(--bc-line) solid var(--bc-faint); border-radius: var(--bc-radius-input); background: var(--bc-bg); }
.bc .bc-field__choice input:checked::before { background: var(--bc-brand); border-color: var(--bc-brand); }
.bc .bc-field__choice input[type="checkbox"]:checked::after { content: ""; position: absolute; top: .9375rem; left: 1.1875rem; width: .375rem; height: .6875rem; border: solid var(--bc-bg); border-width: 0 var(--bc-focus) var(--bc-focus) 0; transform: rotate(45deg); }
.bc .bc-field__choice input[type="radio"]::before { border-radius: var(--bc-radius-chip); }
.bc .bc-field__choice input[type="radio"]:checked::after { content: ""; position: absolute; top: 1.0625rem; left: 1.0625rem; width: .625rem; height: .625rem; border-radius: var(--bc-radius-chip); background: var(--bc-bg); }
.bc .bc-field__choice input:disabled::before { background: var(--bc-surface); border-style: dashed; }
.bc .bc-field__choice input:disabled:checked::before { background: var(--bc-faint); }
.bc .bc-field__choice:has(input:disabled) { color: var(--bc-faint); cursor: not-allowed; }

/* 10 Cards: no nested interactive element inside a whole-card link. */
.bc .bc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--bc-space-4); }
.bc .bc-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--bc-space-3); min-width: 0; padding: var(--bc-space-5); border: var(--bc-line) solid var(--bc-border); border-radius: var(--bc-radius-card); color: var(--bc-text); background: var(--bc-bg); text-decoration: none; }
.bc .bc-card p { color: var(--bc-muted); }
.bc .bc-card__link { margin-top: auto; color: var(--bc-brand); text-decoration: underline; text-underline-offset: .2rem; }
.bc a.bc-card:hover { border-color: var(--bc-brand); background: var(--bc-surface); text-decoration: none; }

/* Specimen layout, kept in this opt-in stylesheet. */
.bc.bc-design { max-width: 58rem; margin: 0 auto; padding: var(--bc-space-7) var(--bc-space-4); }
.bc .bc-design__header { display: grid; gap: var(--bc-space-4); padding-bottom: var(--bc-space-6); }
.bc .bc-eyebrow { color: var(--bc-brand); font-size: var(--bc-text-note); font-weight: 700; letter-spacing: .1rem; }
.bc .bc-lead { max-width: 43rem; color: var(--bc-muted); }
.bc .bc-section { margin-top: var(--bc-space-6); padding-top: var(--bc-space-6); border-top: var(--bc-line) solid var(--bc-border); scroll-margin-top: var(--bc-space-6); }
.bc .bc-section > h2 { display: flex; gap: var(--bc-space-3); align-items: baseline; }
.bc .bc-section__number { color: var(--bc-brand); font-size: var(--bc-text-small); font-weight: 600; }
.bc .bc-usage { margin: var(--bc-space-2) 0 var(--bc-space-4); color: var(--bc-muted); font-size: var(--bc-text-small); }
.bc .bc-stack { display: grid; gap: var(--bc-space-4); }
/* grid の子は min-width:auto だと中の表（横スクロール）が親を押し広げる */
.bc .bc-stack > * { min-width: 0; }
.bc .bc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-2); }
.bc .bc-example { padding: var(--bc-space-5); border: var(--bc-line) solid var(--bc-border); border-radius: var(--bc-radius-card); }
.bc .bc-class-list { margin-top: var(--bc-space-4); padding-top: var(--bc-space-3); border-top: var(--bc-line) dashed var(--bc-border); }
.bc .bc-token-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--bc-space-3); }
.bc .bc-token { border: var(--bc-line) solid var(--bc-border); border-radius: var(--bc-radius-card); overflow: hidden; }
.bc .bc-token__sample { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; padding: var(--bc-space-4); font-weight: 600; }
.bc .bc-token__meta { padding: var(--bc-space-3) var(--bc-space-4); font-size: var(--bc-text-note); color: var(--bc-muted); }
.bc .bc-token__meta code { display: block; }
.bc .bc-type-scale { display: grid; gap: var(--bc-space-4); }
.bc .bc-type-scale > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bc-space-2) var(--bc-space-4); padding-bottom: var(--bc-space-3); border-bottom: var(--bc-line) solid var(--bc-border); }
.bc .bc-space-scale { display: flex; flex-wrap: wrap; align-items: end; gap: var(--bc-space-5); }
.bc .bc-space-scale > div { display: grid; justify-items: start; gap: var(--bc-space-2); font-size: var(--bc-text-note); }
.bc .bc-space-scale span { display: block; background: var(--bc-brand); width: var(--bc-space-6); }
.bc .bc-radius-sample { padding: var(--bc-space-3) var(--bc-space-4); border: var(--bc-line) solid var(--bc-brand); font-size: var(--bc-text-small); }
.bc .bc-scroll-hint { color: var(--bc-muted); font-size: var(--bc-text-note); }
.bc .bc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--bc-space-5); }
.bc .bc-token__sample--bg { background: var(--bc-bg); }
.bc .bc-token__sample--surface { background: var(--bc-surface); }
.bc .bc-token__sample--border { background: var(--bc-border); }
.bc .bc-token__sample--text { color: var(--bc-text); }
.bc .bc-token__sample--muted { color: var(--bc-muted); }
.bc .bc-token__sample--faint { color: var(--bc-faint); }
.bc .bc-token__sample--source-text { color: var(--bc-source-text); }
.bc .bc-token__sample--brand { color: var(--bc-brand); }
.bc .bc-token__sample--brand-strong { color: var(--bc-brand-strong); }
.bc .bc-token__sample--sun { color: var(--bc-sun); }
.bc .bc-token__sample--sat { color: var(--bc-sat); }
.bc .bc-token__sample--good { background: var(--bc-good-bg); color: var(--bc-good-text); }
.bc .bc-token__sample--warn { background: var(--bc-warn-bg); color: var(--bc-warn-text); }
.bc .bc-token__sample--info { background: var(--bc-info-bg); color: var(--bc-info-text); }
.bc .bc-token__sample--current { background: var(--bc-current-bg); color: var(--bc-current-text); }
.bc .bc-type-sample { font-weight: 700; line-height: var(--bc-leading-heading); }
.bc .bc-type-sample--h1 { font-size: var(--bc-text-h1); }
.bc .bc-type-sample--h2 { font-size: var(--bc-text-h2); }
.bc .bc-type-sample--h3 { font-size: var(--bc-text-h3); }
.bc .bc-type-sample--source { font-size: var(--bc-text-source); color: var(--bc-source-text); }
.bc .bc-space-sample--1 { height: var(--bc-space-1); }
.bc .bc-space-sample--2 { height: var(--bc-space-2); }
.bc .bc-space-sample--3 { height: var(--bc-space-3); }
.bc .bc-space-sample--4 { height: var(--bc-space-4); }
.bc .bc-space-sample--5 { height: var(--bc-space-5); }
.bc .bc-space-sample--6 { height: var(--bc-space-6); }
.bc .bc-space-sample--7 { height: var(--bc-space-7); }
.bc .bc-radius-sample--input { border-radius: var(--bc-radius-input); }
.bc .bc-radius-sample--card { border-radius: var(--bc-radius-card); }
.bc .bc-radius-sample--chip { border-radius: var(--bc-radius-chip); }
/* 11 期限の一覧（.bc-table の変種）。行の状態: .is-open 受付中 / .is-soon まもなく締め切り / .is-closed 受付終了 / .is-upcoming 未開始。
   状態は札（文字）で出し、色は補助。SP では行をカードに畳む（td の data-label を見出しにする） */
.bc .bc-deadlines { min-width: 0; }
.bc .bc-deadlines th[scope="row"] { min-width: 8em; font-weight: 700; }
.bc .bc-deadlines td.bc-num { text-align: left; }
.bc .bc-deadlines th, .bc .bc-deadlines td { white-space: normal; } /* 6 列を画面に収める。日時の中の数字と単位は .bc-nowrap で */
.bc .bc-deadlines td .bc-btn--text { min-height: var(--bc-target); padding-inline: 0; }
.bc .bc-deadlines .bc-chip, .bc .bc-deadlines td a { white-space: nowrap; } /* 札とリンクは割らない。折り返すのは主体・区分だけ */
.bc .bc-deadlines .bc-deadlines__note { display: block; margin-top: var(--bc-space-1); color: var(--bc-muted); font-size: var(--bc-text-note); font-weight: 400; white-space: normal; }
.bc .bc-deadlines td .bc-chip { min-height: 0; padding: var(--bc-space-1) var(--bc-space-3); }
.bc .bc-deadlines .is-closed { color: var(--bc-faint); }
.bc .bc-deadlines .is-closed th[scope="row"] { font-weight: 600; }
.bc .bc-deadlines .is-soon .bc-chip { background: var(--bc-caution-bg); color: var(--bc-caution-text); border-color: var(--bc-caution-line); }
.bc .bc-deadlines tr[hidden] { display: none; }

/* 12 日並びの帯（年末年始の連休など）。li の状態: .is-off 休 / .is-leave 有休 / .is-work 出勤。曜日 .is-sat .is-sun .is-holiday を併記。
   連休の区間は .is-run-start / .is-run / .is-run-end で 1 本の帯に囲む。月の始まりは .is-month-start（data-month を小見出しに） */
.bc .bc-daystrip { display: flex; gap: 0; margin: 0; padding: var(--bc-space-5) 0 var(--bc-space-2); list-style: none; overflow-x: auto; overscroll-behavior-inline: contain; }
.bc .bc-daystrip > li {
  position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: .125rem;
  min-width: 2.75rem; padding: var(--bc-space-2) var(--bc-space-1);
  border-top: .1875rem solid transparent; border-bottom: .1875rem solid transparent;
  background: var(--bc-bg); color: var(--bc-text); font-variant-numeric: tabular-nums; line-height: 1.3;
}
.bc .bc-daystrip__d { font-size: var(--bc-text-body); font-weight: 700; }
.bc .bc-daystrip__w { font-size: var(--bc-text-note); color: var(--bc-muted); }
.bc .bc-daystrip__s { min-width: 1.75rem; padding: .0625rem var(--bc-space-1); border-radius: var(--bc-radius-input); font-size: var(--bc-text-note); font-weight: 700; text-align: center; }
.bc .bc-daystrip .is-off .bc-daystrip__s { background: var(--bc-good-bg); color: var(--bc-good-text); }
.bc .bc-daystrip .is-leave .bc-daystrip__s { background: var(--bc-info-bg); color: var(--bc-info-text); }
.bc .bc-daystrip .is-work .bc-daystrip__s { background: var(--bc-surface); color: var(--bc-muted); border: var(--bc-line) solid var(--bc-border); }
.bc .bc-daystrip .is-sat .bc-daystrip__d, .bc .bc-daystrip .is-sat .bc-daystrip__w { color: var(--bc-sat); }
.bc .bc-daystrip .is-sun .bc-daystrip__d, .bc .bc-daystrip .is-sun .bc-daystrip__w,
.bc .bc-daystrip .is-holiday .bc-daystrip__d, .bc .bc-daystrip .is-holiday .bc-daystrip__w { color: var(--bc-sun); }
.bc .bc-daystrip .is-run, .bc .bc-daystrip .is-run-start, .bc .bc-daystrip .is-run-end { background: var(--bc-current-bg); border-top-color: var(--bc-brand); border-bottom-color: var(--bc-brand); }
.bc .bc-daystrip .is-run-start { border-left: .1875rem solid var(--bc-brand); border-radius: var(--bc-radius-card) 0 0 var(--bc-radius-card); }
.bc .bc-daystrip .is-run-end { border-right: .1875rem solid var(--bc-brand); border-radius: 0 var(--bc-radius-card) var(--bc-radius-card) 0; }
.bc .bc-daystrip .is-month-start { box-shadow: inset .0625rem 0 0 var(--bc-border); } /* 月の境は細い線。連休の帯は切らない */
.bc .bc-daystrip .is-month-start::before { content: attr(data-month); position: absolute; top: calc(-1 * var(--bc-space-5)); left: 0; color: var(--bc-muted); font-size: var(--bc-text-note); font-weight: 700; white-space: nowrap; }
.bc .bc-daystrip .is-today { outline: var(--bc-focus) solid var(--bc-brand); outline-offset: -.125rem; }
.bc .bc-daystrip__run { margin: var(--bc-space-2) 0 0; font-weight: 700; color: var(--bc-current-text); }

@media (max-width: 37.5rem) {
  .bc .bc-deadlines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bc .bc-deadlines, .bc .bc-deadlines tbody, .bc .bc-deadlines tr, .bc .bc-deadlines th, .bc .bc-deadlines td { display: block; width: 100%; }
  .bc .bc-deadlines tr { padding: var(--bc-space-3) var(--bc-space-4); border-bottom: var(--bc-line) solid var(--bc-border); }
  .bc .bc-deadlines th[scope="row"], .bc .bc-deadlines td { padding: var(--bc-space-1) 0; border: 0; white-space: normal; text-align: left; }
  .bc .bc-deadlines caption { display: block; width: 100%; }
  .bc .bc-deadlines td[data-label] { display: grid; grid-auto-flow: column; grid-template-columns: 4.5em; justify-content: start; gap: var(--bc-space-2); align-items: center; }
  .bc .bc-deadlines td[data-label] > .bc-chip { justify-self: start; }
  .bc .bc-deadlines td[data-label]::before { content: attr(data-label); color: var(--bc-muted); font-size: var(--bc-text-note); font-weight: 600; }
  .bc h1, .bc .bc-answer__value, .bc .bc-type-sample--h1 { font-size: var(--bc-text-h1-mobile); }
  .bc.bc-design { padding: var(--bc-space-6) var(--bc-space-1); }
  .bc .bc-example { padding: var(--bc-space-4); }
}
@media print {
  /* Only this opt-in page hides inherited site chrome. */
  .bc-design-page > :not(.content-wrap), .bc-design-page .content-wrap > :not(.bc) { display: none !important; }
  body.bc-design-page, .bc-design-page .content-wrap { min-width: 0; max-width: none; margin: 0; padding: 0; }
  .bc *:not(h1):not(.bc-answer):not(.bc-answer *):not(.bc-table-wrap):not(.bc-table-wrap *):not(:has(.bc-answer, .bc-table-wrap)) { display: none !important; }
  .bc.bc-design, .bc .bc-section, .bc .bc-example, .bc .bc-stack { display: block; max-width: none; margin: 0; padding: 0; border: 0; }
  .bc .bc-answer { margin: 0 0 var(--bc-space-4); break-inside: avoid; }
  .bc .bc-table-wrap { overflow: visible; margin: 0 0 var(--bc-space-4); border: 0; border-radius: 0; box-shadow: none; }
  .bc .bc-table { min-width: 0; width: 100%; }
  .bc .bc-table thead { display: table-header-group; }
  .bc .bc-table tr { break-inside: avoid; page-break-inside: avoid; }
  .bc .bc-table caption { break-after: avoid; }
  .bc .bc-table th, .bc .bc-table td { padding: var(--bc-space-2); }
}