/* =========================================================
   Auth / account pages – login, register, mypage, withdraw, etc.
   Scoped so .upload-form modal on my-products is not affected.
   ========================================================= */

.page-auth-content .user-form,
.user-form {
  padding: var(--space-xl);
}

.page-auth-content .user-form__title,
.user-form__title {
  padding-bottom: var(--space-md);
  font-size: var(--text-lg);
}

.page-auth-content .user-form__link,
.user-form__link {
  font-size: var(--text-sm);
}

.page-auth-content .user-form__link:hover,
.page-auth-content .user-form__link:focus-visible,
.user-form__link:hover,
.user-form__link:focus-visible {
  text-decoration: underline;
}

.page-auth-content .user-form__link--danger,
.user-form__link--danger {
  color: #c00;
}

.page-auth-content .user-form__lead,
.user-form__lead {
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: #666;
}

.page-auth-content .user-form__actions,
.user-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.page-auth-content .user-form__btn--danger,
.user-form__btn--danger {
  background: #c00;
  color: var(--fg-inverse);
  border: none;
  padding: var(--space) var(--space-md);
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--ease);
}

.page-auth-content .user-form__btn--danger:hover,
.user-form__btn--danger:hover {
  opacity: 0.9;
}

.page-auth-content .user-form__footer,
.user-form__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}

.page-auth-content .user-form__links,
.user-form__links {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

.page-auth-content .user-form__sep,
.user-form__sep {
  color: #666;
}

.page-auth-content .user-form__label,
.user-form__label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-auth-content .user-form__hint,
.user-form__hint {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  color: var(--fg, #333);
  opacity: 0.85;
  line-height: 1.35;
}

.page-auth-content .user-form__table-wrap,
.user-form__table-wrap {
  overflow-x: auto;
  margin-top: var(--space-md);
}

.page-auth-content .user-form__table,
.user-form__table {
  width: 100%;
  font-size: var(--text-sm);
}

/* My products – thumbnail cell */
.page-auth-content .user-form__table-cell--thumb img,
.user-form__table-cell--thumb img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
}

/* Div-based table (My products) */
.page-auth-content .user-form__table--products,
.user-form__table--products {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-auth-content .user-form__table-head,
.page-auth-content .user-form__table-row,
.user-form__table-head,
.user-form__table-row {
  display: grid;
  gap: var(--space-md);
  padding: var(--space) var(--space-md);
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.page-auth-content .user-form__table-head,
.user-form__table-head {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-overlay);
}

.page-auth-content .user-form__table-cell,
.user-form__table-cell {
  padding: 0;
  text-align: left;
}

.page-auth-content .user-form__table-cell:last-child,
.user-form__table-cell:last-child {
  text-align: right;
}

/* Real table (All members) */
.page-auth-content table.user-form__table--members,
table.user-form__table--members {
  border-collapse: collapse;
}

.page-auth-content table.user-form__table--members thead th,
.page-auth-content table.user-form__table--members tbody td,
table.user-form__table--members thead th,
table.user-form__table--members tbody td {
  padding: var(--space) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.page-auth-content table.user-form__table--members thead th,
table.user-form__table--members thead th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-overlay);
}

.page-auth-content table.user-form__table--members .user-form__table-cell--end,
table.user-form__table--members .user-form__table-cell--end {
  text-align: right;
}

.page-auth-content .user-form__inline-form,
.user-form__inline-form {
  display: inline;
  margin: 0;
  padding: 0;
}

.page-auth-content .user-form__inline-form button,
.user-form__inline-form button {
  padding: var(--space-sm) var(--space);
  font-size: var(--text-sm);
}

.page-auth-content .user-form__muted,
.user-form__muted {
  color: #666;
  font-size: var(--text-sm);
}

.page-auth-content .user-form__subtitle,
.user-form__subtitle {
  margin-top: var(--space-xl);
  margin-bottom: var(--space);
  font-size: var(--text-lg);
}

.page-auth-content .user-form__product-list,
.user-form__product-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space);
}

.page-auth-content .user-form__product-item,
.user-form__product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space);
  cursor: pointer;
  transition: background var(--ease);
}

.page-auth-content .user-form__product-item:hover,
.page-auth-content .user-form__product-item:focus,
.user-form__product-item:hover,
.user-form__product-item:focus {
  background: var(--bg-overlay);
  outline: none;
}

.page-auth-content .user-form__product-item img,
.user-form__product-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.page-auth-content .user-form__product-item span,
.user-form__product-item span {
  font-size: var(--text-sm);
  text-align: center;
  word-break: break-word;
}

.page-auth-content .user-form--compact input,
.page-auth-content .user-form--compact select,
.user-form--compact input,
.user-form--compact select {
  margin-bottom: var(--space);
}

.page-auth-content .user-form__skill-row,
.user-form__skill-row {
  display: flex;
  gap: var(--space);
  margin-bottom: var(--space-md);
}

.page-auth-content .user-form__skill-list,
.user-form__skill-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.page-auth-content .user-form__email--readonly,
.user-form__email--readonly {
  background-color: #b4aabe;
  color: var(--fg);
  pointer-events: none;
  cursor: not-allowed;
}

.page-auth-content .card,
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.page-auth-content .card__title,
.card__title {
  font-weight: 600;
  font-size: var(--text);
}

.page-auth-content .card__value,
.card__value {
  font-size: var(--text-lg);
  font-weight: 500;
}

.page-auth-content .mypage-grid,
.mypage-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* My products table */
.page-auth-content .user-form__table--products,
.user-form__table--products {
  overflow: hidden;
  min-width: 320px;
}

.page-auth-content .user-form__table--products .user-form__table-head,
.user-form__table--products .user-form__table-head {
  grid-template-columns: 52px 1fr 110px 72px 100px;
}

.page-auth-content .user-form__table--products .user-form__table-row,
.user-form__table--products .user-form__table-row {
  grid-template-columns: 52px 1fr 110px 72px 100px;
  cursor: pointer;
  transition: background var(--ease);
}

.page-auth-content .user-form__table--products .user-form__table-row:hover,
.page-auth-content .user-form__table--products .user-form__table-row:focus,
.user-form__table--products .user-form__table-row:hover,
.user-form__table--products .user-form__table-row:focus {
  outline: none;
}

.page-auth-content .user-form__table--products .user-form__table-cell--thumb img,
.user-form__table--products .user-form__table-cell--thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.page-auth-content .user-form__table--products .user-form__table-cell--title,
.user-form__table--products .user-form__table-cell--title {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-auth-content .user-form__table--products .user-form__table-cell--category,
.page-auth-content .user-form__table--products .user-form__table-cell--date,
.user-form__table--products .user-form__table-cell--category,
.user-form__table--products .user-form__table-cell--date {
  font-size: var(--text-sm);
  color: var(--fg);
}