/* 切手あわせ 専用スタイル（共通の base.css の後に読む） */
.calc { margin: 8px 0 24px; }
.calc h2 { font-size: 1rem; margin: 18px 0 8px; padding: 0; border: 0; }
.calc h2:first-child { margin-top: 0; }
.field label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 2px; }
.calc select, .calc input {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink);
}
.calc select { width: 100%; max-width: 420px; }
.calc input:focus, .calc select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.grid label { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; }
.grid label span { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.grid input { width: 4.2em; text-align: right; }
.extra-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.extra-row input { width: 5.5em; text-align: right; }
.row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.row label { display: inline-flex; align-items: center; gap: 6px; }
.buttons { display: flex; gap: 10px; margin-top: 10px; }
.buttons button { font: inherit; font-size: 0.9rem; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); padding: 4px 12px; cursor: pointer; }
.hint { color: var(--muted); }
.warn { color: var(--accent); }
.result { padding: 14px 18px; }
.result.best { border: 2px solid var(--accent); }
.result-title { font-weight: 700; margin: 0 0 10px; }
.stamps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stamp { border: 2px dashed var(--roof-1); border-radius: 6px; padding: 6px 12px; background: var(--bg); }
.stamp .face { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stamp .times { margin-left: 6px; color: var(--muted); }
.detail { margin: 10px 0 0; font-size: 0.9rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table.diff { border-collapse: collapse; font-size: 0.9rem; min-width: 420px; }
table.diff th, table.diff td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums; }
table.diff th:first-child, table.diff td:first-child { text-align: left; }
.row select { width: auto; }
table.diff th, table.diff td:first-child { white-space: nowrap; }