/* =====================================================================
   style.css — レシピ分量スケーラー ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   材料行（名前・数量・単位・削除）はこのツール固有のレイアウト。
   ===================================================================== */

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

/* 材料行: 名前(可変) / 数量(固定) / 単位(固定) / 削除ボタン */
.sg-ingredient-row {
  display: grid;
  grid-template-columns: 1fr 5rem 3.5rem auto;
  gap: var(--sg-space-2);
  align-items: center;
  margin-bottom: var(--sg-space-2);
}

.sg-ingredient-row .sg-input {
  width: 100%;
}

/* 削除ボタン（丸い × ボタン） */
.sg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--sg-muted);
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: 999px;
  cursor: pointer;
}
.sg-icon-btn:hover:not(:disabled) {
  color: var(--sg-fg);
  background: var(--sg-accent);
}
.sg-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 追加ボタンが無効なときは目立たせない */
#add-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 狭い画面では数量・単位をやや詰める */
@media (max-width: 420px) {
  .sg-ingredient-row {
    grid-template-columns: 1fr 4.5rem 3rem auto;
  }
}