.equipment-market {
  --em-ink: #172b45;
  --em-muted: #60758d;
  --em-blue: #1767c2;
  --em-blue-dark: #0d4f9d;
  --em-blue-soft: #eaf3ff;
  --em-line: #d8e3ef;
  --em-card: #fff;
  --em-page: #f4f8fc;
  --em-danger: #a92e36;
  --em-danger-soft: #fff0f0;
  --em-success: #176b4a;
  color: var(--em-ink);
  background: var(--em-page);
  border: 1px solid var(--em-line);
  border-radius: 20px;
  box-sizing: border-box;
  font: 400 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin-inline: auto;
  max-width: 1240px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: clamp(12px, 3vw, 28px);
  width: 100%;
}

.equipment-market *,
.equipment-market *::before,
.equipment-market *::after { box-sizing: border-box; }
.equipment-market h1,
.equipment-market h2,
.equipment-market h3,
.equipment-market p { margin-top: 0; }
.equipment-market h1 { font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.2; margin-bottom: 0; }
.equipment-market h2 { font-size: 1.12rem; line-height: 1.3; margin-bottom: 14px; }
.equipment-market h3 { font-size: 1rem; line-height: 1.35; margin: 0; }
.equipment-market button,
.equipment-market input,
.equipment-market select,
.equipment-market textarea { font: inherit; }
.equipment-market button { cursor: pointer; }
.equipment-market button:disabled { cursor: not-allowed; opacity: .58; }
.equipment-market :focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }
.equipment-market [hidden] { display: none !important; }

.em-header,
.em-detail__heading { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.em-eyebrow { color: var(--em-blue); font-size: .76rem; font-weight: 750; letter-spacing: .08em; margin: 0 0 5px; text-transform: uppercase; }
.em-tabs { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0; }
.equipment-market .em-button,
.equipment-market .em-tab { align-items: center; border: 1px solid transparent; border-radius: 12px; display: inline-flex; justify-content: center; box-sizing: border-box; height: 44px; min-height: 44px; min-width: 44px; padding: 4px 14px; font-size: 14px; line-height: 17px; text-align: center; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.em-button--primary { background: var(--em-blue); color: #fff; font-weight: 700; }
.em-button--primary:hover:not(:disabled) { background: var(--em-blue-dark); }
.em-button--quiet,
.em-tab { background: #fff; border-color: var(--em-line); color: var(--em-ink); }
.em-button--quiet:hover:not(:disabled),
.em-tab:hover { background: var(--em-blue-soft); border-color: #a9c9ec; }
.em-tab.is-active { background: var(--em-blue-soft); border-color: #8ab6e6; color: var(--em-blue-dark); font-weight: 700; }
.em-button--danger { background: var(--em-danger-soft); border-color: #efc5c8; color: var(--em-danger); }
.em-button--tiny { font-size: 14px; padding-inline: 9px; }
.em-content { min-width: 0; }
.em-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.em-section,
.em-card,
.em-detail,
.em-draft-card,
.em-preview-card { background: var(--em-card); border: 1px solid var(--em-line); border-radius: 16px; min-width: 0; padding: clamp(14px, 2vw, 20px); }
.em-section { align-self: start; }
.em-field { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.em-field:last-child { margin-bottom: 0; }
.em-field > label,
.em-status-control > span { font-size: .92rem; font-weight: 650; }
.em-input { background: #fff; border: 1px solid #b9c9d9; border-radius: 10px; color: var(--em-ink); min-height: 46px; min-width: 0; padding: 10px 12px; width: 100%; }
.em-input:focus { border-color: var(--em-blue); outline: 2px solid #1767c233; }
.em-textarea { min-height: 118px; resize: vertical; }
.em-field.is-invalid .em-input { border-color: var(--em-danger); }
.em-field__error { color: var(--em-danger); font-size: .88rem; margin: 0; }
.em-help,
.em-card__meta { color: var(--em-muted); font-size: .9rem; }
.em-help { margin-bottom: 12px; }
.em-check { align-items: center; display: flex; gap: 10px; margin: 4px 0 16px; min-height: 44px; }
.em-check input { height: 22px; margin: 0; width: 22px; }
.em-dropzone { background: #f8fbff; border: 1px dashed #92b4d7; border-radius: 14px; padding: 14px; }
.em-dropzone.is-active { background: var(--em-blue-soft); border-color: var(--em-blue); }
.em-dropzone p { color: var(--em-muted); font-size: .9rem; margin-bottom: 10px; }
.em-dropzone .em-button { margin: 0 8px 8px 0; }
.em-visually-hidden { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.em-photo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); list-style: none; margin: 14px 0 0; padding: 0; }
.em-photo { background: #f8fbff; border: 1px solid var(--em-line); border-radius: 12px; min-width: 0; overflow: hidden; }
.em-photo > img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.em-photo__empty { align-items: center; aspect-ratio: 4 / 3; background: #eef4fa; color: var(--em-muted); display: flex; justify-content: center; padding: 10px; text-align: center; }
.em-photo__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; padding: 8px 9px 0; }
.em-photo__state { color: var(--em-muted); font-size: .78rem; }
.em-photo__state--error { color: var(--em-danger); }
.em-photo progress { display: block; height: 8px; margin: 8px 9px; width: calc(100% - 18px); }
.em-photo__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px 9px; }
.em-location-options { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.em-location-option { background: #fff; border: 1px solid var(--em-line); border-radius: 9px; color: var(--em-ink); min-height: 44px; padding: 8px 11px; text-align: left; }
.em-location-option:hover { background: var(--em-blue-soft); }
.em-location-selected { background: #eef8f3; border-radius: 9px; color: var(--em-success); padding: 9px 11px; }
.em-form-actions { align-items: center; background: linear-gradient(180deg, #f4f8fcdd, #f4f8fc 25%); border-top: 1px solid var(--em-line); bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px calc(-1 * clamp(12px, 3vw, 28px)) calc(-1 * clamp(12px, 3vw, 28px)); padding: 12px clamp(12px, 3vw, 28px) calc(12px + env(safe-area-inset-bottom, 0px)); position: sticky; z-index: 2; }
.em-form-actions .em-button--primary { margin-left: auto; }
.em-preview-card { display: grid; gap: 10px; grid-column: 1 / -1; }
.em-preview-card h2,
.em-preview-card p { margin-bottom: 0; }
.em-preview-card__image { aspect-ratio: 16 / 9; background: #eef4fa; border-radius: 12px; max-height: 360px; object-fit: cover; width: 100%; }
.em-inline-error { background: var(--em-danger-soft); border: 1px solid #efc5c8; border-radius: 10px; color: var(--em-danger); padding: 10px 12px; }
.em-inline-warning { background: #fff7e6; border: 1px solid #edd399; border-radius: 10px; color: #72500e; margin: 0; padding: 9px 11px; }
.em-inline-error p { margin: 0 0 8px; }
.em-success { background: #edf8f2; border-radius: 10px; color: var(--em-success); padding: 10px 12px; }
.em-empty,
.em-loading { color: var(--em-muted); padding: 22px 10px; text-align: center; }
.em-card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.em-card { overflow: hidden; padding: 0; }
.em-card__image { aspect-ratio: 4 / 3; background: #eef4fa; display: block; object-fit: cover; width: 100%; }
.em-card__image--empty { align-items: center; color: var(--em-muted); display: flex; justify-content: center; }
.em-card__body { padding: 14px; }
.em-card__heading { align-items: flex-start; display: flex; gap: 8px; justify-content: space-between; }
.em-card__price { color: var(--em-blue-dark); font-size: 1.12rem; font-weight: 750; margin: 10px 0 6px; }
.em-card__description { margin: 10px 0; white-space: pre-wrap; }
.em-card__actions { align-items: end; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.em-status { background: #edf2f7; border-radius: 999px; color: var(--em-ink); flex: 0 0 auto; font-size: .78rem; font-weight: 700; padding: 4px 9px; }
.em-status--active { background: #e7f6ec; color: #176b3b; }
.em-status--reserved { background: #fff4dd; color: #80520a; }
.em-status--sold,
.em-status--withdrawn { background: #edf0f4; color: #596776; }
.em-status-control { display: grid; flex: 1 1 150px; gap: 4px; min-width: 0; }
.em-status-control select { background: #fff; border: 1px solid var(--em-line); border-radius: 9px; min-height: 44px; padding: 8px; width: 100%; }
.em-detail,
.em-draft-card { margin-top: 16px; }
.em-detail__image { border-radius: 12px; display: block; margin: 12px 0; max-height: 440px; object-fit: contain; width: 100%; }
.em-confirm { background: #fff8f0; border-radius: 10px; margin-top: 10px; padding: 12px; }
.em-card__meta { margin: 6px 0; }
.em-leave-overlay { position: fixed; inset: 0; z-index: 2147483590; background: #172b4570; display: grid; place-items: center; padding: 16px; }
.em-leave-dialog { position: relative; width: min(560px, 100%); max-height: 90dvh; overflow: auto; background: #fff; border-radius: 18px; padding: 64px 20px 20px; }
.em-leave-close { position: absolute; right: 12px; top: 12px; background: var(--em-blue-soft); }
.em-leave-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.em-leave-actions .em-button { flex: 1 1 130px; }

/* Keep the form actions above the existing 78px native mobile tabbar. */
@media (max-width: 959px) {
  .equipment-market { margin-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .em-form-actions { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  .equipment-market { border-radius: 14px; padding: 12px; }
  .em-header { align-items: flex-start; }
  .em-header > .em-button { flex: 0 1 auto; }
  .em-tabs { gap: 6px; margin: 16px 0; }
  .em-tab { font-size: 14px; padding-inline: 5px; }
  .em-form-grid { grid-template-columns: minmax(0, 1fr); }
  .em-form-actions { margin-inline: -12px; padding-inline: 12px; }
  .em-form-actions .em-button { flex: 1 1 auto; }
  .em-form-actions .em-button--primary { margin-left: 0; }
  .em-card__heading { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .equipment-market { padding: 10px; }
  .em-header { align-items: stretch; flex-direction: column; }
  .em-header > .em-button { width: 100%; }
  .em-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .em-tab { font-size: 14px; }
  .em-form-actions { margin-inline: -10px; padding-inline: 10px; }
  .em-photo__actions { gap: 4px; padding-inline: 6px; }
  .em-button--tiny { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .equipment-market *,
  .equipment-market *::before,
  .equipment-market *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}