/* =====================================
   Gazolab - Image Resizer 専用CSS
   Dimensions 行（Gridで安定レイアウト）
===================================== */

/* Dimensions 行はラベルの下に入力ブロックを置く */
.gz-tool-resize .gz-settings-row--dimensions {
  display: block;
  width: 100%;
}

/* ラベル部分（"Dimensions"）の下に少し余白 */
.gz-tool-resize .gz-settings-row--dimensions .gz-settings-label-wrap {
  margin-bottom: 0.4rem;
}

/* 入力＋×＋入力を 1fr auto 1fr の3列グリッドで配置 */
.gz-tool-resize .gz-settings-row--dimensions .gz-settings-control {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左input / × / 右input */
  column-gap: 0.5rem;
  align-items: center;
  width: 100%;
}

/* 各 input はセルいっぱいに広がるだけ（はみ出さない） */
.gz-tool-resize .gz-settings-row--dimensions .gz-settings-control input[type=number] {
  width: 100%;
  box-sizing: border-box;
}
.gz-settings-help {
  margin-top: 4px;
}
.gz-help-text {
  margin: 2px 0;
  font-size: 11px;
  color: #888;
}

.gz-help-text--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.gz-settings-row--options {
  margin-top: 0.3rem;
}

.gz-settings-control--inline {
  flex: 1;
}

.gz-settings-label-inline {
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.gz-settings-label-inline input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.gz-download-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 170px;
}

.gz-settings-label-small {
  font-size: 0.8rem;
  color: #4b5563;
}

.gz-filename-input {
  width: 100%;
  max-width: 200px;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
}
@media (max-width: 768px) {
  .gz-download-block {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

 /* ラベル + input を1行目で横並びに */
  .gz-settings-label-small {
    flex: 0 0 auto;           /* 必要な分だけ幅を取る */
    margin: 0;
  }
.gz-filename-input {
    flex: 1 1 0;
    min-width: 0;             /* はみ出し防止 */
  }

  .gz-download-block .gz-primary-btn {
flex: 0 0 100%;
    align-self: flex-end;
  }
}
@media (max-width: 768px) {
  .gz-card.gz-settings-card[style] {
    margin-top: 0 !important;
  }
}

.gz-diff {
  margin-top: 1.35rem;
    font-size: 18px;
    color: #059669;
    font-weight: 600;
}

.gz-diff-block {
  margin-top: 1rem;
}

.gz-diff-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
}

.gz-diff-arrow {
  font-size: 1.1rem;
}

.gz-diff-percent {
  color: #059669; /* green */
}

.gz-diff-label {
  font-weight: 600;
}

.gz-diff-description {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
}
/* ▼ Diff color unified across tools */

/* size up = green */
.gz-diff--up .gz-diff-arrow,
.gz-diff--up .gz-diff-percent,
.gz-diff--up .gz-diff-label {
  color: #059669; /* green */
}

/* size down = red */
.gz-diff--down .gz-diff-arrow,
.gz-diff--down .gz-diff-percent,
.gz-diff--down .gz-diff-label {
  color: #dc2626; /* red */
}