/* =====================================================================
   style.css — 年収の壁 ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

.sg-result__value {
  font-variant-numeric: tabular-nums;
}

.sg-field .sg-help {
  margin-top: var(--sg-space-1);
}

/* 壁の一覧 */
.sg-walls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-wall {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sg-surface-2, rgba(0, 0, 0, 0.03));
  border: 1px solid transparent;
}
.sg-wall.is-over {
  background: rgba(224, 49, 49, 0.08);
  border-color: rgba(224, 49, 49, 0.35);
}
.sg-wall.is-next {
  background: rgba(59, 91, 219, 0.08);
  border-color: rgba(59, 91, 219, 0.35);
}
.sg-wall__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sg-wall__body {
  flex: 1;
}
.sg-wall__title {
  font-weight: 600;
}
.sg-wall__desc {
  font-size: 0.85rem;
  color: var(--sg-muted, #777);
  line-height: 1.6;
  margin-top: 2px;
}
.sg-wall__badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.sg-wall.is-over .sg-wall__badge {
  background: #e03131;
  color: #fff;
}
.sg-wall.is-next .sg-wall__badge {
  background: #3b5bdb;
  color: #fff;
}