.photo-upload-status {
  display: block;
  margin: 3px 8px 3px auto;
  padding: 4px 9px;
  min-height: 30px;
  width: auto;
  border-radius: 8px;
  background: #fff7e2;
  color: #584500;
  border: 1px solid #bba34d;
  font-size: 12px;
  box-shadow: 0 1px 4px #0002;
}
.photo-upload-status[hidden] { display: none; }
.photo-upload-status.has-error { color: #922323; background: #fff0ee; border-color: #b64747; }
.photo-upload-dialog {
  max-width: min(480px, calc(100vw - 24px));
  max-height: 75dvh;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid #cbbcb0;
  border-radius: 12px;
  padding: 18px;
  color: #443c36;
  background: #fffaf6;
}
.photo-upload-dialog::backdrop { background: #0006; }
.photo-upload-dialog p, .photo-upload-dialog li { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.photo-upload-dialog button { width: auto; margin: 6px; font-size: 14px; padding: 8px 12px; }

.photo-upload-overlay-host { position: relative; }
.photo-upload-badge {
  position: absolute;
  transform: translateY(-100%);
  box-sizing: border-box;
  margin: 0;
  padding: 2px;
  border-radius: 0 0 4px 4px;
  background: rgba(34, 39, 43, 0.86);
  color: #fff;
  font: 11px/1.25 sans-serif;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.photo-upload-badge[hidden] { display: none; }
/* 枚数表示は残し、下部の送信状態と重ならない場所へ。 */
.has-photo-upload-overlay > .product-photo-count { top: 6px; left: 6px; right: auto; bottom: auto; }
@media print { .photo-upload-badge { display: none; } }