.member-page main {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.member-card {
  max-width: 880px;
  margin: clamp(28px, 6vw, 72px) auto;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 24px;
  background: var(--surface, #fff);
  box-shadow: 0 18px 50px rgb(32 17 37 / 8%);
}

.member-card > h1 {
  margin-block: 8px 12px;
}

.member-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}

.member-profile-grid > div {
  min-width: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgb(64 38 75 / 6%);
}

.member-profile-grid dt {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.member-profile-grid dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.member-preferences-form {
  display: grid;
  gap: 14px;
  max-width: 560px;
  min-width: 0;
}

.member-preferences-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
}

.member-preferences-form input,
.member-preferences-form select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.member-preferences-form input[type="number"] {
  max-width: 160px;
}

.member-preferences-form select {
  max-width: 260px;
}

.member-course-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 2px 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 16px;
}

.member-course-times legend {
  padding-inline: 5px;
  font-weight: 800;
}

.member-course-times input[type="time"] {
  min-height: 44px;
}

.member-notice,
.member-sync-status[data-state="synced"] {
  color: #356a46;
  font-weight: 700;
}

.member-sync-status[data-state="unsynced"] {
  color: #8a4c13;
  font-weight: 700;
}

.member-favorites {
  max-width: 1120px;
}

.member-favorites-grid {
  margin-top: 24px;
}

.member-empty {
  margin-top: 24px;
  padding: 22px;
  border-radius: 16px;
  background: rgb(64 38 75 / 6%);
}

.member-favorite-control.is-favorite {
  background: rgb(133 66 130 / 12%);
}

.member-favorite-control.is-favorite img {
  transform: scale(1.08);
}

@media (max-width: 640px) {
  .member-page main {
    width: min(100% - 20px, 1120px);
  }
  .member-card {
    margin-block: 18px 32px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .member-profile-grid,
  .member-course-times {
    grid-template-columns: 1fr;
  }
  .member-preferences-form select,
  .member-preferences-form input[type="number"] {
    max-width: none;
  }
}