/* bunsu.css — 分数計算機。すべて .bs 配下にスコープ（サイトのCSSと干渉しない）。
   デザインはsimeq/eqnと同じ「方眼ノートに青インク・答えは赤」の系統で計算機ファミリーの統一感を保つ。
   ダークは .bs[data-bs-theme="dark"] で切替（サイト本番は常にライト）。 */
.bs {
  --bs-paper: #ffffff;
  --bs-ground: #f3f6fc;
  --bs-ink: #1a2657;
  --bs-sub: #55618a;
  --bs-line: #d3daee;
  --bs-grid: rgba(70, 100, 190, .10);
  --bs-accent: #2f52c4;
  --bs-accent-ink: #ffffff;
  --bs-red: #d23c50;
  --bs-ok: #23784a;
  --bs-warn-bg: #fff3ef;
  --bs-warn: #a63a26;
  --bs-key: #eef2fb;
  --bs-key-op: #dfe6f8;
  --bs-font: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif;
  --bs-math: "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", "Noto Serif JP", "Times New Roman", serif;
  box-sizing: border-box;
  max-width: 680px;
  margin: 0 auto;
  color: var(--bs-ink);
  font-family: var(--bs-font);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
.bs[data-bs-theme="dark"] {
  --bs-paper: #182036;
  --bs-ground: #0f1526;
  --bs-ink: #e4e9fb;
  --bs-sub: #a2aed3;
  --bs-line: #303c66;
  --bs-grid: rgba(140, 165, 245, .09);
  --bs-accent: #8fa8ff;
  --bs-accent-ink: #0f1526;
  --bs-red: #ff7d8e;
  --bs-ok: #6fd39a;
  --bs-warn-bg: #3a2320;
  --bs-warn: #ffb4a3;
  --bs-key: #222c4a;
  --bs-key-op: #2c3861;
}
.bs *, .bs *::before, .bs *::after { box-sizing: border-box; }
:where(.bs button) { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
.bs :focus-visible { outline: 3px solid var(--bs-accent); outline-offset: 2px; }

.bs-card {
  background: var(--bs-paper);
  border: 1px solid var(--bs-line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.bs-grid {
  background-image:
    linear-gradient(var(--bs-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bs-grid) 1px, transparent 1px);
  background-size: 22px 22px;
  background-color: var(--bs-paper);
}
.bs-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--bs-sub); letter-spacing: .04em; }
.bs-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.bs-h-row .bs-h { margin: 0; }

/* ---- モード切替（四則計算／約分／通分） ---- */
.bs-modes { display: flex; gap: 4px; background: var(--bs-key); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.bs-modebtn { flex: 1; height: 40px; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--bs-sub); }
.bs-modebtn.is-active { background: var(--bs-accent); color: var(--bs-accent-ink); }

/* ---- 入力 ---- */
.bs-terms { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bs-terms--multi { gap: 14px 18px; }
.bs-countrow { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.bs-countrow[hidden] { display: none; }
.bs-countbtn {
  padding: 6px 14px; border-radius: 10px; background: var(--bs-key); color: var(--bs-sub);
  font-size: 13px; border: 1px solid var(--bs-line);
}
.bs-countbtn:disabled { opacity: .4; cursor: default; }
.bs-term { display: flex; align-items: center; gap: 6px; }
.bs-sign {
  width: 40px; height: 40px; border-radius: 10px; background: var(--bs-key);
  font-size: 20px; font-weight: 700; color: var(--bs-sub); flex: none;
}
.bs-sign.is-neg { background: var(--bs-red); color: #fff; }
.bs-wholewrap { flex: none; }
.bs-whole {
  width: 44px; height: 64px; text-align: center; border: 2px solid var(--bs-line); border-radius: 10px;
  background: var(--bs-paper); color: var(--bs-ink); font-family: var(--bs-math); font-size: 22px;
}
.bs-whole::placeholder { color: var(--bs-sub); opacity: .55; font-family: var(--bs-font); font-size: 12px; }
.bs-fracbox { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 68px; flex: none; }
.bs-fracbox input {
  width: 100%; height: 30px; text-align: center; border: 2px solid var(--bs-line); border-radius: 8px;
  background: var(--bs-paper); color: var(--bs-ink); font-family: var(--bs-math); font-size: 20px; padding: 0 4px;
}
.bs-fracbox input::placeholder { color: var(--bs-sub); opacity: .55; font-family: var(--bs-font); font-size: 11px; }
.bs-bar { height: 2px; background: var(--bs-ink); border-radius: 1px; margin: 0 2px; }

.bs-optoggle { display: flex; gap: 4px; background: var(--bs-key); border-radius: 12px; padding: 4px; flex: none; }
.bs-opbtn { width: 36px; height: 36px; border-radius: 9px; font-size: 20px; font-weight: 700; color: var(--bs-sub); }
.bs-opbtn.is-active { background: var(--bs-accent); color: var(--bs-accent-ink); }

.bs-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bs-chip {
  padding: 6px 12px; border-radius: 999px; background: var(--bs-key); color: var(--bs-sub);
  font-size: 13px; border: 1px solid var(--bs-line);
}
.bs-chip:hover { background: var(--bs-key-op); }

.bs-error {
  background: var(--bs-warn-bg); color: var(--bs-warn); border-radius: 10px; padding: 10px 14px;
  font-size: 14px; margin-bottom: 12px;
}
.bs-solve {
  display: block; width: 100%; height: 52px; border-radius: 14px; background: var(--bs-accent);
  color: var(--bs-accent-ink); font-size: 20px; font-weight: 700; letter-spacing: .05em;
}
.bs-solve:active { transform: translateY(1px); }

/* ---- 答え ---- */
.bs-answer-card { text-align: center; }
.bs-answer-badge {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--bs-math); font-size: 40px; font-weight: 700; color: var(--bs-red);
  min-height: 56px;
}
.bs-inline-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; vertical-align: middle; }
.bs-inline-num { border-bottom: 3px solid var(--bs-red); padding: 0 6px 2px; }
.bs-inline-den { padding: 2px 6px 0; }
.bs-inline-int { padding: 0 4px; }
.bs-answer-sub { margin-top: 10px; font-size: 14px; color: var(--bs-sub); }

/* ---- とき方 ---- */
.bs-hint-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bs-sub); }
.bs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bs-step { border: 1px solid var(--bs-line); border-radius: 10px; overflow: hidden; }
.bs-step-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bs-ground); }
.bs-step-badge {
  flex: none; padding: 2px 10px; border-radius: 999px; background: var(--bs-accent); color: var(--bs-accent-ink);
  font-size: 12px; font-weight: 700;
}
.bs-step-title { font-weight: 700; font-size: 14px; }
.bs-step[data-hint] .bs-step-head { cursor: pointer; }
.bs-step-body { padding: 10px 14px 14px; }
.bs-step-note { font-size: 13px; color: var(--bs-sub); margin-bottom: 6px; }
.bs-step-line { font-family: var(--bs-math); font-size: 17px; margin-bottom: 4px; }

/* ---- 共有 ---- */
.bs-share-card { display: flex; align-items: center; gap: 10px; }
.bs-copylink {
  padding: 8px 14px; border-radius: 10px; background: var(--bs-key); color: var(--bs-sub);
  font-size: 13px; border: 1px solid var(--bs-line);
}
.bs-copymsg { font-size: 13px; color: var(--bs-ok); }

/* ---- モバイル: 1つ目の分数／演算／2つ目の分数を縦に積む（横に並べると折り返しで読みにくい） ---- */
@media (max-width: 560px) {
  .bs-terms { flex-direction: column; align-items: center; gap: 10px; }
  .bs-terms.bs-terms--multi { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
  .bs-modebtn { font-size: 14px; }
  .bs-optoggle { width: 100%; max-width: 280px; justify-content: space-between; }
  .bs-opbtn { flex: 1; height: 44px; font-size: 22px; }
  .bs-answer-badge { font-size: 34px; }
}