/* #region zone:finance.images.style — รูปหลายใบและหน้าตรวจข้อมูลทุกขนาด */
.finance-images {
  display: grid;
  gap: var(--sp-4);
  margin-block: var(--sp-6);
  min-width: 0;
}
.finance-image-drop {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg, 16px);
  background: var(--panel);
  min-width: 0;
}
.finance-image-drop.is-dragging {
  outline: 2px solid var(--accent);
}
.finance-image-drop input {
  width: 100%;
  min-width: 0;
  font: inherit;
}
.finance-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--sp-4);
}
.finance-image-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  background: var(--panel);
}
.finance-image-card h3,
.finance-image-card p {
  overflow-wrap: anywhere;
  margin-block: var(--sp-2);
}
.finance-image-thumb {
  width: 80px;
  max-height: 120px;
  object-fit: contain;
  border-radius: var(--radius-md, 12px);
}
.finance-image-no-thumb {
  font-size: var(--t-body);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.finance-image-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.finance-image-actions button {
  border-radius: var(--radius-md, 12px);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
}
.finance-image-actions button:hover {
  border-radius: var(--radius-md, 12px);
}
dialog.finance-image-dialog {
  font-family: Anuphan, sans-serif;
  font-size: var(--t-body);
  max-width: min(760px, calc(100vw - var(--sp-6)));
  margin: auto;
  width: min(760px, calc(100% - var(--sp-6)));
  max-height: 88dvh;
  padding: var(--sp-5);
  color: var(--ink);
  background: var(--u-sheet);
  border: 1px solid var(--line);
  border-radius: var(--u-radius-dialog);
  overflow-y: auto;
}
.finance-image-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}
.finance-image-dialog form {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}
.finance-image-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-4);
}
.finance-image-fields label {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}
.finance-image-fields input,
.finance-image-fields select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--t-body);
  padding: var(--sp-3);
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-sizing: border-box;
}
.finance-image-check {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.finance-image-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
@media (max-width: 480px) {
  .finance-image-card {
    grid-template-columns: 1fr;
  }
}
.finance-image-dialog [hidden] {
  display: none;
}
.finance-image-drop input::file-selector-button {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  padding: var(--sp-2) var(--sp-3);
  margin-inline-end: var(--sp-3);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.finance-image-drop input::file-selector-button:hover {
  filter: brightness(0.97);
}
/* #endregion */