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

/* 結果値はタブ幅数字で桁を揃える */
.sg-result__value {
  font-variant-numeric: tabular-nums;
}

/* 数値入力 + スライダーの横並び */
.di-inputrow {
  display: flex;
  align-items: center;
  gap: var(--sg-space-3, 12px);
}
.di-inputrow .di-num {
  width: 7em;
  flex: 0 0 auto;
}
.di-inputrow .di-range {
  flex: 1 1 auto;
  min-width: 120px;
}

/* 補助ラベルを入力直下に詰める */
.sg-field .sg-help {
  margin-top: var(--sg-space-1);
}

/* バンド配色（結果値の下線色・早見表セル・凡例スウォッチで共通利用） */
[data-band="0"] { --di-color: #4c6ef5; } /* 寒い */
[data-band="1"] { --di-color: #4dabf7; } /* 肌寒い */
[data-band="2"] { --di-color: #38d9a9; } /* 何も感じない */
[data-band="3"] { --di-color: #51cf66; } /* 快適 */
[data-band="4"] { --di-color: #94d82d; } /* 暑くない */
[data-band="5"] { --di-color: #fcc419; } /* やや暑い */
[data-band="6"] { --di-color: #ff922b; } /* 暑くて汗が出る */
[data-band="7"] { --di-color: #fa5252; } /* 暑くてたまらない */

.sg-result__value[data-band] {
  border-bottom: 4px solid var(--di-color, transparent);
  display: inline-block;
  padding-bottom: 2px;
}

/* 不快指数 早見表 */
.di-table-wrap {
  overflow-x: auto;
}
.di-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.di-table th,
.di-table td {
  border: 1px solid var(--sg-border, #e5e7eb);
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}
.di-table thead th,
.di-table th[scope="row"],
.di-table .di-corner {
  background: var(--sg-surface-2, #f4f6fb);
  font-weight: 600;
}
.di-table td[data-band] {
  border-left: 4px solid var(--di-color, transparent);
}
.di-table td.is-current {
  outline: 3px solid var(--sg-primary, #3b5bdb);
  outline-offset: -3px;
  font-weight: 700;
}

/* 判定バンドの凡例 */
.di-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.di-legend-row {
  display: flex;
  align-items: center;
  gap: var(--sg-space-3, 12px);
  padding: 4px 0;
}
.di-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--di-color, #ccc);
  flex: 0 0 auto;
}
.di-legend-range {
  font-variant-numeric: tabular-nums;
  color: var(--sg-muted, #777);
  min-width: 5em;
}
.di-legend-label {
  font-weight: 600;
}