/*
 * bar-chart.css  ―  セル塗りつぶし式 横棒グラフ（共通CSS）
 *
 * 使い方（各ページ側）:
 *   <link rel="stylesheet" href="bar-chart.css">
 *   <table class="bc bc--a"> ... </table>
 *
 * 各行は <td style="--v:90.5%"> のように、バーの長さを --v で指定します。
 *
 * カラーパターン : .bc--a / .bc--b / .bc--c   （指定なしはA相当）
 * 任意の色       : style="--bc-color:#3b82f6; --bc-caption:#1d4ed8"
 * 数値の位置     : 既定=バーの外側 / .bc--inside=バーの内側（右端）
 * バーの高さ     : style="--bc-h:2.6em"
 */

.bc {
  --bc-color: #ffbc5c;     /* バーの塗り色 */
  --bc-caption: #f58f4a;   /* 外側キャプションの文字色 */
  --bc-inside-text: #fff;  /* 内側キャプションの文字色 */
  --bc-h: 2.2em;           /* バーの高さ */
  --bc-gap: 6px;           /* 行間 */

  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--bc-gap);
  border-style: none;
  font-size: 1rem;
  line-height: 1.3;
}

/* 単位表示 (%) など */
.bc caption {
  caption-side: top;
  text-align: right;
  color: #666;
  padding-bottom: .4em;
}

/* 項目名 */
.bc th {
  width: 1%;
  padding: 0 1em 0 0;
  text-align: right;
  font-weight: normal;
  white-space: nowrap;
  border-style: none;
}

/* バー本体: セルの背景をグラデーションで「塗りつぶし」 */
.bc td {
  position: relative;
  height: var(--bc-h);
  padding: 0;
  border-style: none;
  background: linear-gradient(
    to right,
    var(--bc-color) 0,
    var(--bc-color) var(--v, 0%),
    transparent var(--v, 0%)
  );
}

/* 数値キャプション（バーの外側・先端の右） */
.bc td span {
  position: absolute;
  left: var(--v, 0%);
  top: 50%;
  transform: translateY(-50%);
  padding-left: .6em;
  color: var(--bc-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 数値キャプションをバーの内側（右端）に置く */
.bc--inside td span {
  transform: translate(-100%, -50%);
  padding: 0 .6em 0 0;
  color: var(--bc-inside-text);
}

/* ---- カラーパターン ---- */
.bc--a { --bc-color: #ffbc5c; --bc-caption: #f58f4a; } /* オレンジ */
.bc--b { --bc-color: #5aa9e6; --bc-caption: #2f7fc0; } /* ブルー   */
.bc--c { --bc-color: #6cc496; --bc-caption: #36975f; } /* グリーン */

/* スマホ幅 */
@media (max-width: 600px) {
  .bc { font-size: .875rem; }
  .bc th { padding-right: .6em; }
}