.market-role-user {
  --market-border: #d4e2fb;
  --market-soft: #f4f8ff;
  --market-text: #1f3558;
  --market-subtext: #556b8a;
  --market-accent: #2457f5;
}

.member-profile.member-role-user {
  border-color: #d4e2fb;
  box-shadow: inset 0 0 0 1px rgba(46, 106, 255, .04);
}

.user-market-profile {
  border: 1px solid var(--market-border);
  /*border-radius: 18px;*/
  background: var(--market-surface);
  /*padding: 16px;*/
  margin-bottom: 14px;
}

.user-market-profile-sticky {
  position: sticky;
  top: calc(var(--app-safe-top) + 12px);
  z-index: 4;
}

.user-market-profile-head,
.user-market-profile-main,
.user-market-profile-actions,
.user-market-tabs,
.user-market-exp-head,
.user-market-info-row,
.user-market-banner-actions,
.user-market-product-top,
.user-market-product-actions,
.user-market-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-market-profile-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf3ff;
  color: #34589a;
  font-weight: 700;
}

.user-market-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-market-profile-text h1 {
  margin: 0;
  font-size: 1.08rem;
}

.user-market-profile-text p {
  margin: 4px 0 0;
  color: var(--market-subtext);
}

.user-market-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--market-border);
  background: var(--market-soft);
  color: var(--market-text);
  font-size: .8rem;
  font-weight: 700;
}

.user-market-chip.is-link {
  text-decoration: none;
}

.user-market-tabs {
  gap: 28px;
  padding: 0 28px;
  border-bottom: 1px solid #eceff4;
  overflow-x: auto;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.user-market-tabs a {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.04rem;
  white-space: nowrap;
  height: 52px;
  display: inline-flex;
  align-items: center;
  color: #2d3340;
  border-bottom: 3px solid transparent;
}

.user-market-tabs a.is-active {
  color: #9b4df4;
  border-bottom-color: #9b4df4;
}

.user-market-exp-card {
  padding: 30px;
  background: var(--market-soft);
}

.user-market-exp-track {
  height: 10px;
  background: #e7edf8;
  border-radius: 999px;
  margin: 8px 0;
  overflow: hidden;
}

.user-market-exp-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3d6fff 0%, #28b0ff 100%);
}

.user-market-stepper {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.user-market-step {
  border: 1px solid var(--market-border);
  border-radius: 12px;
  background: var(--market-surface);
  overflow: hidden;
}

.user-market-step[open] {
  border-color: var(--market-accent);
}

.user-market-step summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.user-market-step summary::-webkit-details-marker {
  display: none;
}

.user-market-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--market-border);
  background: var(--market-soft);
  color: var(--market-text);
  font-weight: 800;
  flex: 0 0 auto;
}

.user-market-step-title {
  flex: 1;
  min-width: 0;
}

.user-market-step-title strong {
  display: block;
  color: var(--market-text);
  font-size: .95rem;
}

.user-market-step-title span {
  display: block;
  margin-top: 2px;
  color: var(--market-subtext);
  font-size: .82rem;
}

.user-market-step-chevron {
  color: var(--market-subtext);
  flex: 0 0 auto;
  transition: transform .15s ease;
}

.user-market-step[open] .user-market-step-chevron {
  transform: rotate(180deg);
}

.user-market-step-body {
  padding: 0 12px 12px;
  display: grid;
  gap: 10px;
}

.user-market-step-body ul {
  margin: 0;
  padding-left: 18px;
  color: var(--market-subtext);
  font-size: .88rem;
  display: grid;
  gap: 6px;
}

.user-market-step-body b {
  color: var(--market-text);
}

.user-market-step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.user-market-profile-info {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.user-market-info-row {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--market-border);
  background: #fff;
  font-size: .86rem;
}

.user-market-banner-actions {
  padding:30px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.user-market-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.user-market-theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-market-product-card {
  border: 1px solid var(--market-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.user-market-product-cover {
  aspect-ratio: 16 / 10;
  background: #eef3fb;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.user-market-product-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-market-estimate-form .user-market-product-cover {
  height: 150px;
  aspect-ratio: auto;
  background: var(--market-soft);
}

.user-market-estimate-form .user-market-product-cover img {
  object-fit: contain;
  padding: 10px;
}

.user-market-product-cover-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}

.user-market-preview-btn {
  min-height: 34px;
  border-radius: 10px;
  padding: 0 12px;
}

.user-market-preview-modal .mypage-app-modal-dialog {
  width: 100%;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  transform: none;
  transition: none;
}

.user-market-preview-modal .mypage-app-modal-body {
  padding: 0;
  min-height: calc(100vh - 58px);
}

.user-market-preview-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-market-preview-viewport.is-active {
  border-color: rgba(155, 77, 244, .42);
  background: rgba(155, 77, 244, .12);
  color: #2d3340;
}

.user-market-preview-sub {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--market-border);
  background: var(--market-soft);
  color: var(--market-subtext);
  font-size: .8rem;
  font-weight: 800;
}

.user-market-preview-body {
  min-height: calc(100vh - 58px);
}

.user-market-preview-stage {
  height: calc(100vh - 58px);
  padding: 14px;
  background: var(--market-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-market-preview-device {
  width: min(1200px, 100%);
  height: 100%;
  border: 1px solid var(--market-border);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(13, 27, 53, .14);
}

.user-market-preview-device.is-tablet {
  width: min(900px, 100%);
}

.user-market-preview-device.is-mobile {
  width: min(420px, 100%);
}

.user-market-preview-device iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.user-market-thumb-placeholder {
  color: #6f809e;
  font-size: .78rem;
}

.user-market-product-body {
  padding: 10px;
}

.user-market-product-price {
  font-weight: 700;
  color: var(--market-accent);
}

.user-market-product-desc {
  margin: 6px 0 0;
  color: var(--market-subtext);
  font-size: .9rem;
}

.user-market-theme-option {
  cursor: pointer;
  position: relative;
}

.user-market-theme-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-market-theme-option:hover {
  transform: translateY(-1px);
}

.user-market-theme-option:focus-within {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(36, 87, 245, .16);
}

.user-market-theme-option.is-selected {
  border-color: #2b62ff;
  box-shadow: 0 0 0 2px rgba(43, 98, 255, .12);
}

.user-market-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-market-panel {
  border: 1px solid var(--market-border);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.user-market-estimate-intro {
  border: 1px solid var(--market-border);
  border-radius: 14px;
  background: var(--market-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.user-market-estimate-lead {
  margin: 0;
  color: var(--market-text);
}

.user-market-estimate-bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--market-subtext);
  display: grid;
  gap: 6px;
}

.user-market-estimate-bullets b {
  color: var(--market-text);
}

.user-market-estimate-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-market-estimate-modal .mypage-app-modal-body {
  gap: 12px;
}

.user-market-estimate-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--market-border);
  background: var(--market-soft);
  color: var(--market-subtext);
  font-size: .78rem;
  font-weight: 800;
}

.user-market-estimate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}

.user-market-estimate-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.user-market-estimate-aside {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 10px;
}

.user-market-estimate-block {
  border: 1px solid var(--market-border);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.user-market-estimate-block-head {
  display: grid;
  gap: 2px;
}

.user-market-estimate-block-head h4 {
  margin: 0;
  color: var(--market-text);
  font-size: 1rem;
}

.user-market-estimate-block-head p {
  margin: 0;
  color: var(--market-subtext);
  font-size: .86rem;
}

.user-market-estimate-submit {
  display: grid;
  gap: 8px;
}

.user-market-estimate-submit .btn {
  min-height: 42px;
  border-radius: 12px;
}

.user-market-item-title {
  margin: 0 0 8px;
  color: var(--market-text);
  font-weight: 700;
}

.user-market-item-sub {
  margin: 0 0 8px;
  color: var(--market-subtext);
  font-size: .9rem;
}

.user-market-estimate-box {
  margin-top: 10px;
  border: 1px solid var(--market-border);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.user-market-estimate-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.user-market-estimate-list li,
.user-market-history-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-market-estimate-list li {
  padding: 8px 10px;
  border: 1px solid var(--market-border);
  border-radius: 10px;
  background: var(--market-soft);
}

.user-market-estimate-list li span {
  color: var(--market-text);
  font-weight: 700;
}

.user-market-estimate-list li strong {
  color: var(--market-accent);
}

.user-market-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.user-market-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--market-border);
  border-radius: 10px;
  padding: 10px;
}

@media (max-width: 900px) {
  .user-market-product-grid,
  .user-market-theme-grid,
  .user-market-profile-info,
  .user-market-grid.two {
    grid-template-columns: 1fr;
  }

  .user-market-estimate-layout {
    grid-template-columns: 1fr;
  }

  .user-market-estimate-aside {
    position: static;
  }
}