/* 画像リサイズツール固有の見た目（共通部分は assets/image-tool.css） */
.stage-size {
  font-size: 0.85rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* 等倍より大きく表示しないので、小さな画像は枠の中央に実寸で出る */
.panes.is-invalid canvas { opacity: 0.35; }

.size-original {
  font-size: 0.85rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.size-original span { color: var(--color-text); font-weight: 600; }

@media (max-width: 860px) {
  /* リサイズは数値入力が主役なので、プレビューを少し低くして入力欄と保存ボタンを近づける */
  .stage { height: 30vh; min-height: 180px; }
  .stage-size { display: none; } /* サイズは設定欄に出ているので、狭い画面では省く */
}
.stage-toolbar .btn { white-space: nowrap; }

.size-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
  margin-top: 6px;
}
.size-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.size-field label { font-size: 0.82rem; font-weight: 600; color: var(--color-muted); }
.size-field .number-field { display: flex; width: 100%; }
.size-field .number-field input { flex: 1; width: auto; min-width: 0; }
.size-times { padding-bottom: 8px; color: var(--color-muted); }

.size-inputs + .check { margin-top: 10px; }

.field-error {
  margin: 8px 0 0;
  color: var(--color-danger);
  font-size: 0.85rem;
  line-height: 1.55;
}

.control .btn-ghost { margin-top: 8px; padding-left: 0; padding-right: 0; }

/* 保存形式（2択のボタン） */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: block;
  padding: 8px 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
}
.segmented label + label span { border-left: 1px solid var(--color-border); }
.segmented input:checked + span { background: var(--color-primary-soft); color: var(--color-primary); }
.segmented input:focus-visible + span { outline: 3px solid rgba(79, 70, 229, 0.35); outline-offset: -3px; }