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

/* 単価などの数字は桁を揃える */
.sg-result__value,
.vc-rank__unit {
  font-variant-numeric: tabular-nums;
}

/* --- 商品リスト --- */
.vc-items {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3, 12px);
  margin-top: var(--sg-space-2, 8px);
}

.vc-item {
  border: 1px solid var(--sg-border, #e2e4ea);
  border-radius: var(--sg-radius, 10px);
  padding: var(--sg-space-3, 12px);
  background: var(--sg-surface, #fff);
}

.vc-item__name {
  margin-bottom: var(--sg-space-2, 8px);
}

.vc-item__row {
  display: flex;
  align-items: flex-end;
  gap: var(--sg-space-3, 12px);
}

.vc-item__field {
  flex: 1 1 0;
  min-width: 0;
}

.vc-item .sg-input {
  width: 100%;
}

/* 削除ボタン */
.vc-del {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sg-border, #e2e4ea);
  border-radius: var(--sg-radius, 10px);
  background: transparent;
  color: var(--sg-muted, #777);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.vc-del:hover:not(:disabled) {
  border-color: #e03131;
  color: #e03131;
}
.vc-del:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 追加ボタン */
.vc-add {
  margin-top: var(--sg-space-3, 12px);
}

/* --- ランキング --- */
.vc-ranking {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-2, 8px);
  margin-top: var(--sg-space-3, 12px);
  text-align: left;
}

.vc-rank {
  border: 1px solid var(--sg-border, #e2e4ea);
  border-radius: var(--sg-radius, 10px);
  padding: var(--sg-space-3, 12px);
  background: var(--sg-surface, #fff);
}

.vc-rank.is-best {
  border-color: #2f9e44;
  border-width: 2px;
  background: rgba(47, 158, 68, 0.06);
}

.vc-rank__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vc-rank__no {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sg-muted, #777);
}

.vc-rank__name {
  font-weight: 700;
  font-size: 1.02rem;
}

.vc-badge {
  display: inline-block;
  background: #2f9e44;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.vc-rank__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
}

.vc-rank__unit {
  font-size: 1.15rem;
  font-weight: 700;
}
.vc-rank.is-best .vc-rank__unit {
  color: #2f9e44;
}

.vc-rank__total {
  font-size: 0.85rem;
  color: var(--sg-muted, #777);
}

.vc-rank__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 0.85rem;
}

.vc-rank__over {
  color: #e8590c;
  font-weight: 600;
}

.vc-rank__diff {
  color: var(--sg-muted, #777);
}

.vc-rank__best {
  color: #2f9e44;
  font-weight: 600;
}

/* --- 解説リスト --- */
.vc-tips {
  margin: var(--sg-space-2, 8px) 0 0;
  padding-left: 1.2em;
  line-height: 1.9;
}
.vc-tips li {
  margin-bottom: var(--sg-space-2, 8px);
}

/* 狭幅では価格・数量・削除を縦積みに */
@media (max-width: 480px) {
  .vc-item__row {
    flex-wrap: wrap;
  }
  .vc-item__field {
    flex: 1 1 40%;
  }
  .vc-del {
    flex: 0 0 40px;
    align-self: flex-end;
  }
}