/* ============================================================
   마이페이지 (MeScreen) — 인라인 style에서 분리한 공용 스타일.
   색/여백/모서리 등은 여기서 바로 수정하면 됩니다.
   ============================================================ */

/* ----- 섹션 카드 (내 활동 · 알림 설정 · 프로필 편집 등) ----- */
.cp-me-card {
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #15151E;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-me-card__title {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.68); 
}

/* ----- 내 활동 통계 그리드 ----- */
.cp-me-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cp-me-stat {
  display: block;
  flex: 1;
  min-width: 0;
  width: 100%;
  cursor: pointer;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  transition: background 140ms ease, border-color 140ms ease;
}
.cp-me-stat.is-on {
  background: rgba(255, 16, 119, 0.12);
  border-color: rgba(255, 16, 119, 0.35);
}
.cp-me-stat.is-on .cp-me-stat__label {
  color: #ffb8da;
}
.cp-me-stat__num {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
}
.cp-me-stat__label {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.42);
}

/* ----- MD · 입점 신청 승인 현황 (내 활동 카드 하단) ----- */
.cp-md-apps {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cp-md-apps__title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.cp-md-apps__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-md-apps__row + .cp-md-apps__row {
  margin-top: 6px;
}
.cp-md-apps__info {
  min-width: 0;
}
.cp-md-apps__name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-md-apps__meta {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}
.cp-md-apps__badge {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.cp-md-apps__badge.is-approved {
  background: rgba(45, 227, 142, 0.14);
  color: #3DE0A0;
  border: 1px solid rgba(45, 227, 142, 0.3);
}
.cp-md-apps__badge.is-pending {
  background: rgba(255, 176, 32, 0.13);
  color: #FFB020;
  border: 1px solid rgba(255, 176, 32, 0.3);
}
.cp-md-apps__badge.is-rejected {
  background: rgba(255, 60, 90, 0.12);
  color: #FF6B81;
  border: 1px solid rgba(255, 60, 90, 0.28);
}

/* ----- 고객센터 / 문의하기 팝업 (SupportInquirySheet) ----- */
.cp-support {
  position: fixed;
  inset: 0;
  z-index: 5500;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cp-support__card {
  width: min(100%, 420px);
  box-sizing: border-box;
  border-radius: 22px;
  background: #0E0E14;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.cp-support__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-support__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 122, 184, 0.9);
}
.cp-support__title {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
.cp-support__close {
  all: unset;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  color: #fff;
}
.cp-support__body {
  padding: 16px;
  display: grid;
  gap: 12px;
}
.cp-support__field {
  display: grid;
  gap: 6px;
}
.cp-support__field span {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
}
.cp-support__field input,
.cp-support__field textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  padding: 12px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
}
.cp-support__typeBtns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cp-support__typeBtn {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 850;
}
.cp-support__typeBtn.is-active {
  border-color: rgba(255, 16, 119, 0.75);
  background: rgba(255, 16, 119, 0.18);
  color: #fff;
}
.cp-support__field textarea {
  resize: vertical;
  line-height: 1.5;
  font-weight: 600;
}
.cp-support__error {
  color: #FF9AAF;
  font-size: 12px;
  font-weight: 700;
}
.cp-support__submit {
  all: unset;
  cursor: pointer;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #FF1077, #7B49FF);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.cp-support__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
.cp-support__done {
  padding: 22px 18px;
  display: grid;
  gap: 12px;
  text-align: center;
}
.cp-support__check {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  background: rgba(200, 255, 26, 0.14);
  border: 1px solid rgba(200, 255, 26, 0.32);
  color: #C8FF1A;
}
.cp-support__donetitle {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
.cp-support__donedesc {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}
.cp-support__okbtn {
  all: unset;
  cursor: pointer;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* ----- 회사 정보 + 약관 (회원탈퇴 하단) ----- */
.cp-me-legal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-me-legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-bottom: 14px;
}
.cp-me-legal__link {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}
.cp-me-legal__link:active {
  color: #fff;
}
/* 개인정보처리방침 링크는 좀 더 하얗게 강조 */
.cp-me-legal__link--bright {
  color: rgba(255, 255, 255, 0.92);
}
.cp-me-legal__biz {
  display: grid;
  gap: 5px;
}
.cp-me-legal__row {
  display: flex;
  gap: 8px;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}
.cp-me-legal__row span {
  flex-shrink: 0;
  min-width: 92px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 700;
}
.cp-me-legal__copy {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.28);
}

/* ----- 저장 섹션 라벨 (FAVORITES · COMPARE · RECENT) ----- */
.cp-me-seclabel {
  margin: 2px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

/* ----- 저장 리스트 한 줄 (항목 + 삭제버튼) ----- */
.cp-me-listrow {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ----- 저장 섹션 묶음 (즐겨찾기/비교/최근) ----- */
.cp-me-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-me-sec--gap {
  margin-top: 10px;
}
.cp-me-sechead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ----- 내 활동 카드 (문의/후기/신고 항목) ----- */
.cp-me-actcard {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px;
  border-radius: 14px;
  background: #15151e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
.cp-me-actcard__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cp-me-actcard__title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-me-actcard__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.cp-me-actcard__sub--1line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-me-actcard__body {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.cp-me-actcard__meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'JetBrains Mono', monospace;
}
.cp-me-actstars {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
}
.cp-me-actbadge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.cp-me-actbadge--info {
  background: rgba(31, 210, 255, 0.12);
  color: #9cf0ff;
}
.cp-me-actbadge--warn {
  background: rgba(255, 16, 119, 0.12);
  color: #ffb8da;
}

/* ----- 저장 항목 클릭 버튼 (기본 / 변형) ----- */
.cp-me-item {
  all: unset;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 14px;
  background: #15151E;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-me-item--between { justify-content: space-between; }
.cp-me-item--compare {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.20);
}

/* ----- 저장 비어있음 안내 ----- */
.cp-me-empty {
  padding: 22px 14px;
  border-radius: 14px;
  background: #15151E;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  line-height: 1.55;
}

/* ----- 삭제 X(휴지통) 버튼 ----- */
.cp-del-x {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 60, 90, 0.12);
  color: #FF9AAF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- 프로필 헤더 ----- */
.cp-me-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.cp-me-name {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-top: 2px;
  letter-spacing: -0.02em;
}
.cp-me-handle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* ----- 프로필 저장 / 고스트(비활성화) 버튼 ----- */
.cp-me-savebtn {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #FF1077, #7B49FF);
  color: #fff;
  min-width: 104px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.cp-me-ghostbtn {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 800;
}

/* ----- 관심 칩 (지역=시안 / 장르=마젠타 / 가격=라임) ----- */
.cp-me-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cp-me-chips--gap { margin-top: 8px; }
.cp-me-pricegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.cp-me-chip {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 900;
}
.cp-me-chip--price {
  padding: 8px 6px;
  border-radius: 10px;
  text-align: center;
}
.cp-me-chip--area.is-on { background: rgba(31, 210, 255, 0.14); border-color: rgba(31, 210, 255, 0.28); color: #9CF0FF; }
.cp-me-chip--genre.is-on { background: rgba(255, 16, 119, 0.14); border-color: rgba(255, 16, 119, 0.28); color: #FFB8DA; }
.cp-me-chip--price.is-on { background: rgba(200, 255, 26, 0.13); border-color: rgba(200, 255, 26, 0.25); color: #DFFF72; }

/* ----- 설정 단축 행 묶음(언어/지역 · 로그아웃 등) + 각 행 ----- */
.cp-me-srows {
  border-radius: 14px;
  overflow: hidden;
  background: #15151e;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-me-srow {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.cp-me-srow:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-me-srow__label { flex: 1; font-size: 13px; color: #fff; font-weight: 600; }
.cp-me-srow__meta  { font-size: 11px; color: rgba(255, 255, 255, 0.4); font-weight: 500; }

/* ----- 프로필 카드 헤더 + 폼 ----- */
.cp-me-profhead {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cp-me-proflabel { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.68); }
.cp-me-profid    { font-size: 10px; color: rgba(255, 255, 255, 0.38); font-family: 'JetBrains Mono', monospace; }
.cp-me-formgrid  { display: grid; gap: 8px; }
.cp-me-savewrap  { display: grid; margin-top: 8px; }

/* ----- 설정 섹션 헤더 (설정) ----- */
.cp-me-profile-card {
  padding: 14px;
  background: radial-gradient(circle at top right, rgba(255, 16, 119, 0.10), transparent 52%), #15151E;
}
.cp-me-profhead__copy {
  min-width: 0;
}
.cp-me-profdesc {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
}
.cp-me-proficon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.74);
}
.cp-me-collapse-btn {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.74);
}
.cp-me-srow-toggle {
  flex-shrink: 0;
  min-width: 42px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.cp-me-srow-toggle.is-on {
  background: rgba(200, 255, 26, 0.14);
  border-color: rgba(200, 255, 26, 0.32);
  color: #DFFF72;
}
.cp-me-srow-toggle--chat.is-on {
  background: rgba(31, 210, 255, 0.14);
  border-color: rgba(31, 210, 255, 0.32);
  color: #9CF0FF;
}
.cp-me-srow-toggle--chat:not(.is-on) { color: rgba(255, 255, 255, 0.48); }
.cp-me-collapse-btn:active { transform: scale(0.96); }
.cp-me-profile-card.is-collapsed .cp-me-profhead { margin-bottom: 0; }
.cp-me-collapsible { display: grid; gap: 10px; }
.cp-me-collapsible[hidden] { display: none; }
.cp-me-field {
  display: grid;
  gap: 6px;
}
.cp-me-field__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.44);
}
.cp-me-profile-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 360px) {
  .cp-me-profile-actions { grid-template-columns: 1fr; }
  .cp-me-savebtn { width: 100%; }
}

.cp-me-section-h {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ----- 프로필 입력칸 ----- */
.cp-me-input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 0 10px;
  outline: none;
  font-size: 12px;
  font-weight: 700;
}

/* ----- 알림 토글 버튼 (기본 / .is-on 켜짐) ----- */
.cp-me-toggle {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.cp-me-toggle.is-on {
  background: rgba(255, 16, 119, 0.14);
  border-color: rgba(255, 16, 119, 0.28);
  color: #FFB8DA;
}

/* ----- 전체 삭제 버튼 ----- */
.cp-clear-btn {
  all: unset;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  color: #FF9AAF;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 60, 90, 0.12);
}