/* バーコード生成 — ツール固有 */
.bc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; margin-top: 12px; }
@media (min-width: 620px) { .bc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.bc-ctl { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--sg-muted,#555); }
.bc-ctl input[type="range"] { width: 100%; }
.bc-ctl--check { flex-direction: row; align-items: center; gap: 8px; }

.bc-stage { text-align: center; }
.bc-canvas-wrap {
  background: #fff; border-radius: 8px; padding: 12px; display: inline-block; max-width: 100%; overflow-x: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.bc-canvas-wrap svg { max-width: 100%; height: auto; display: block; }
.bc-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }

.bc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.bc-presets__label { font-size: .8rem; color: var(--sg-muted,#777); }
.bc-preset {
  font: inherit; font-size: .8rem; line-height: 1; cursor: pointer;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--sg-border,#d5d5dd); background: var(--sg-card,#fff); color: var(--sg-fg,#333);
}
.bc-preset:hover { border-color: var(--sg-accent,#3b5bdb); color: var(--sg-accent,#3b5bdb); }