/* =====================================================================
   style.css — 点字変換 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   ===================================================================== */

/* 結果の点字列は大きめ＆折り返し */
.sg-result__value {
  font-size: 1.9rem;
  line-height: 1.5;
  word-break: break-word;
  letter-spacing: 0.04em;
}

/* 1マス（2×3）の点字図 */
.bc-cell {
  display: inline-grid;
  grid-template-columns: repeat(2, 12px);
  grid-template-rows: repeat(3, 12px);
  gap: 3px;
  padding: 5px;
  border-radius: 8px;
  background: var(--sg-surface-2, #f1f3f9);
  vertical-align: middle;
}
.bc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid var(--sg-border, #cdd3e0);
  background: transparent; /* ○ = 点なし */
}
.bc-dot.is-on {
  background: var(--sg-accent, #3b5bdb); /* ● = 点あり */
  border-color: var(--sg-accent, #3b5bdb);
}

/* 1文字ごとの内訳（マス＋説明） */
.bc-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sg-space-3, 12px);
  padding-top: var(--sg-space-3, 12px);
  border-top: 1px solid var(--sg-border, #e5e7eb);
}
.bc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 76px;
  padding: 8px;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: 10px;
  background: var(--sg-surface, #fff);
}
.bc-unit.is-unknown {
  opacity: 0.7;
  border-style: dashed;
}
.bc-src {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
}
.bc-cells {
  display: flex;
  gap: 4px;
}
.bc-desc {
  font-size: 0.72rem;
  color: var(--sg-muted, #666);
  text-align: center;
  line-height: 1.35;
}

/* 早見表・参考リスト */
.bc-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px;
}
.bc-chart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: 10px;
}
.bc-chart-item.is-empty {
  border: none;
}
.bc-chart-label {
  font-size: 0.8rem;
  color: var(--sg-muted, #555);
  text-align: center;
  line-height: 1.25;
}