/* ============================================================
 * NB_5100 — 마이페이지군 (허브·구매 이력·리워드 이력·email 수정)
 * Figma 172:1599 참고 — 프로필 헤더/메뉴 리스트/포인트 표시 위계를
 * 4화면에 일관 적용. 백엔드에 없는 항목(팔로우·리뷰·배송지·설정)은 제외.
 * ============================================================ */

/* 하단 탭(bottom-nav) 예약 여백 — 앱 공통 규약(home.css .home-content)과 동일하게
   size-bottomnav + safe-bottom만 예약. 구 값은 +space-6(24px)이 더 붙어 마이 탭만
   네비 위 여백이 홈·상품 탭보다 넓어 '탭마다 하단 네비 위치가 달라 보이는' 원인이었다
   (TASK-059 #15 — home.css는 058 소유·편집 금지라 마이 쪽을 공통값에 맞춰 통일). */
.mypage-content {
  background: var(--color-bg);
  /* 헤더-본문 간격 = 래퍼 padding-top 단일 소유 — 첫 블록(profile-card·order-list·
     reward-balance-card·mypage-form·mypage-empty)의 top 성분은 0 (TASK-099) */
  padding-top: var(--space-content-top);
  padding-bottom: calc(var(--size-bottomnav) + var(--safe-bottom));
}

/* 허브·하위 화면 헤더는 대형 배너 표준(shared/_page_header, home.css .page-header)으로
   통합 — TASK-092. 구 .mypage-header(허브 루트, TASK-088)·구 shared/_back_header
   (.back-header, TASK-044 ④) 규칙 모두 이관 제거. */

/* flash 표시는 전역 토스트로 이관 (TASK-051 ② — 구 .mypage-flash 제거) */

/* 프로필 카드 */
.profile-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* top 간격은 .mypage-content 소유 (TASK-099 — 구 space-2 8px) */
  padding: 0 var(--space-page) var(--space-5);
}
.profile-card__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}
.profile-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* __email·__edit 규칙 제거 (TASK-120) — 이메일 노출·수정 진입은 계정 관리
   "이메일 변경" menu-row로 이동, 프로필 카드는 아바타+이름만. */

/* 통계 행 (백엔드 보유 지표만: 총 주문·진행중 공모) */
.profile-stats {
  display: flex;
  padding: 0 var(--space-page) var(--space-5);
}
.profile-stats__item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.profile-stats__item + .profile-stats__item::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: var(--border-width);
  background: var(--color-border);
}
.profile-stats__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-fg);
  line-height: var(--line-height-tight);
}
.profile-stats__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-subtle);
}

/* 리워드 카드 */
.reward-card {
  display: block;
  margin: 0 var(--space-page) var(--space-2);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.reward-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--color-fg-brand-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.reward-card__chevron { margin-left: auto; color: var(--color-fg-subtle); }
.reward-card__amount {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-fg);
  letter-spacing: -0.2px;
}
.reward-card__unit {
  margin-left: 2px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-muted);
}

/* 섹션 */
.mypage-section { padding-top: var(--space-5); }
.mypage-section__title {
  margin: 0;
  padding: 0 var(--space-page) var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-fg);
}

/* 메뉴 리스트 행 (아이콘 + 제목/부제 + 쉐브런) */
.menu-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-page);
  text-decoration: none;
  color: inherit;
  border-bottom: var(--border-width) solid var(--color-border);
}
.menu-row:last-child { border-bottom: none; }
.menu-row__icon {
  flex-shrink: 0;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-muted);
}
.menu-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-row__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
}
.menu-row__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-tight);
}
.menu-row__badge { flex-shrink: 0; }
.menu-row__chevron { flex-shrink: 0; color: var(--color-gray-500); }

/* 접이 행 (TASK-120 — 공모 참여 현황·약관 및 정책). 네이티브 details/summary —
   summary는 menu-row 시각 공유, chevron은 하향→[open] 상향 회전(inquiries.css 관용구).
   행 구분선은 details 쪽 단독 소유 — summary 뒤에 콘텐츠 div가 항상 따라와
   :last-child가 summary를 못 지우므로, summary의 .menu-row border는 명시로 끈다
   (안 끄면 닫힘 = 이중선, 펼침 = 요약행-콘텐츠 사이 불청객 선). */
.mypage-fold { border-bottom: var(--border-width) solid var(--color-border); }
.mypage-fold:last-child { border-bottom: none; }
.mypage-fold__summary { cursor: pointer; list-style: none; border-bottom: none; }
.mypage-fold__summary::-webkit-details-marker { display: none; }
.mypage-fold__chevron {
  flex-shrink: 0;
  color: var(--color-gray-500);
  transition: transform 0.15s ease;
}
.mypage-fold[open] > .mypage-fold__summary .mypage-fold__chevron { transform: rotate(180deg); }
/* 펼침 콘텐츠 — 공모 카드 리스트 래퍼 */
.mypage-fold__content { padding: var(--space-1) 0 var(--space-4); }
/* 약관 링크 리스트 — 아이콘 폭+간격만큼 들여써 summary 제목과 좌측 정렬 */
.mypage-fold__link {
  display: flex;
  align-items: center;
  min-height: var(--size-touch-min);
  padding: var(--space-1) var(--space-page) var(--space-1)
    calc(var(--space-page) + var(--size-icon-lg) + var(--space-3));
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
}

/* 진행중인 공모 카드 (달성률·D-day·내 참여·예상 리워드) */
.participation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0 var(--space-page);
  list-style: none; /* 구 인라인 style 이관 (TASK-120) */
}
.participation-card {
  display: block;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.participation-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2-5);
}
.participation-card__farm {
  min-width: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.participation-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2-5);
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
}
.participation-card__meta strong { color: var(--color-fg); font-weight: var(--font-weight-semibold); }

/* 구매 이력 카드 */
.order-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* top 간격은 .mypage-content 소유 (TASK-099 — 구 space-4), 하단 space-4 유지 */
  padding: 0 var(--space-page) var(--space-4);
}
.order-card {
  display: block;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.order-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.order-card__id {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-subtle);
}
.order-card__farm {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  margin: 0 0 var(--space-2-5);
}
.order-card__meta {
  margin: 0 0 var(--space-2-5);
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
}
.order-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }

/* 리워드 이력 */
.reward-balance-card {
  margin: 0 var(--space-page) var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-brand);
  text-align: center;
}
.reward-balance-card__label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-muted);
}
.reward-balance-card__value {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-fg-brand);
  letter-spacing: -0.2px;
}
/* 리워드 이력 정렬 토글 (TASK-047 — 필터 팝업·칩 제거, 헤더 trailing 링크 1개.
   현재 상태 라벨 + 방향 화살표, 쿼리 파라미터 링크라 JS 없음) */
.reward-sort-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-touch-min);
  padding: 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  text-decoration: none;
}

.reward-history-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-page);
}
.reward-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3-5) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.reward-history-item:last-child { border-bottom: none; }
.reward-history-item__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reward-history-item__reason {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reward-history-item__date { font-size: var(--font-size-xs); color: var(--color-fg-subtle); }
.reward-history-item__amount {
  flex-shrink: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.reward-history-item__amount.is-positive { color: var(--color-fg-brand-strong); }
.reward-history-item__amount.is-negative { color: var(--color-fg-muted); }

/* 빈 상태 */
.mypage-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-fg-subtle);
}
.mypage-empty__icon {
  display: flex;
  width: calc(var(--space-8) * 2);
  height: calc(var(--space-8) * 2);
  margin: 0 auto var(--space-4);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-fg-brand);
}
.mypage-empty p { margin: 0; font-size: var(--font-size-sm); }
/* 본문 첫 블록일 때만(구매 이력 0건) top을 래퍼에 넘긴다 — 비첫 위치
   (리워드 이력 잔액 카드 뒤·허브 참여 섹션 내부)의 32px 간격은 보존 (TASK-099) */
.mypage-content > .mypage-empty:first-child { padding-top: 0; }

/* 로그아웃 */
.mypage-logout { text-align: center; padding: var(--space-6) var(--space-page) 0; }
.mypage-logout__btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--space-2);
}

/* email 수정 폼 */
/* top 간격은 .mypage-content 소유 (TASK-099 — 구 space-5 20px), 하단 space-5 유지 */
.mypage-form { padding: 0 var(--space-page) var(--space-5); }
.mypage-form__error {
  margin: 0 0 var(--space-4);
  padding: var(--space-2-5) var(--space-3);
  background: var(--color-bg-critical);
  color: var(--color-fg-critical);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}
.mypage-form__field { margin-bottom: var(--space-5); }
.mypage-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}
.mypage-form__input {
  width: 100%;
  height: 52px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-fg);
  outline: none;
  box-sizing: border-box;
}
.mypage-form__input:focus { border-color: var(--color-fg-brand); }
.mypage-form__submit {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-solid);
  color: var(--color-fg-on-brand);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}