/* ===== 마이페이지 ===== */
.mypage-wrap { max-width: 1000px; margin: 0 auto; padding: 0 6% 80px; }

.profile-card {
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  color: white;
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.profile-card::after {
  content: '';
  position: absolute;
  /* 티켓 카드와 겹치지 않도록 더 바깥쪽으로 */
  right: -50px; bottom: -50px;
  width: 220px; height: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4 8 H28 Q30 8 30 10 V13.5 A3 3 0 0 0 30 18.5 V22 Q30 24 28 24 H4 Q2 24 2 22 V18.5 A3 3 0 0 0 2 13.5 V10 Q2 8 4 8 Z' fill='%23FF4081'/><rect x='5' y='10.5' width='22' height='11' rx='1.2' fill='%23fff'/><line x1='16' y1='11' x2='16' y2='21' stroke='%23FF4081' stroke-width='0.6' stroke-dasharray='1.2 1.4'/><path d='M9.5 13.7 L10.3 15.4 L12.1 15.7 L10.8 16.95 L11.15 18.7 L9.5 17.85 L7.85 18.7 L8.2 16.95 L6.9 15.7 L8.7 15.4 Z' fill='%23FFC93C' stroke='%23FF4081' stroke-width='0.5' stroke-linejoin='round'/><path d='M22.5 13.7 L23.3 15.4 L25.1 15.7 L23.8 16.95 L24.15 18.7 L22.5 17.85 L20.85 18.7 L21.2 16.95 L19.9 15.7 L21.7 15.4 Z' fill='%23FFC93C' stroke='%23FF4081' stroke-width='0.5' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}
.profile-card > * { position: relative; z-index: 1; }
.profile-avatar {
  width: 96px; height: 96px;
  border-radius: 22px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  line-height: 1;
  border: 4px solid rgba(255,255,255,.5);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.profile-avatar[role="button"] { cursor: pointer; }
.profile-avatar[role="button"]:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.profile-avatar[role="button"]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.profile-avatar .pf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar .pf-emoji {
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  /* 이모지의 baseline 보정 — 정중앙 */
  padding-bottom: 6px;
}
/* ===== 프로필 사진 변경 버튼 ===== */
.pf-edit-btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  background: rgba(255,255,255,.22);
  color: white;
  border: 1px solid rgba(255,255,255,.4);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Pretendard', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  height: 26px;
  cursor: pointer;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.pf-edit-btn:hover { background: rgba(255,255,255,.36); }
.pf-edit-btn:active { transform: scale(.96); }
.pf-edit-btn.ghost { background: transparent; color: rgba(255,255,255,.85); }
.pf-edit-btn.ghost:hover { background: rgba(255,255,255,.18); color: white; }

/* ===== 프로필 사진 확대 모달 ===== */
.pf-zoom-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 30, .82);
  backdrop-filter: blur(8px);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .18s ease;
}
.pf-zoom-overlay.open { opacity: 1; }
.pf-zoom-card {
  background: white;
  border-radius: 24px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: min(92vh, 720px);  /* 절대 픽셀 캡으로 무한 비례 차단 */
  overflow: auto;
  position: relative;
  transform: scale(.96);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pf-zoom-overlay.open .pf-zoom-card { transform: scale(1); }
.pf-zoom-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-2);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.pf-zoom-close:hover { background: var(--pink); color: white; }
.pf-zoom-img {
  width: 100%;
  aspect-ratio: 1;
  max-height: 420px;  /* 고정 — vh 비례 제거 */
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
}
.pf-zoom-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-zoom-info { text-align: center; padding: 4px 0 6px; }
.pf-zoom-info b { display: block; font-family: 'Jua'; font-size: 22px; color: var(--text); margin-bottom: 4px; }
.pf-zoom-info small { color: var(--text-soft); font-size: 13px; }
.profile-info h2 { font-family: 'Jua'; font-size: 26px; margin-bottom: 4px; }
.profile-info p { font-size: 13px; opacity: .9; }
.profile-info .level {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.4);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Pretendard', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  height: 26px;
}
.profile-tickets {
  background: white;
  color: var(--pink-deep);
  padding: 16px 26px;
  border-radius: 18px;
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  min-width: 120px;
}
.profile-tickets .num { font-family: 'Jua'; font-size: 30px; line-height: 1; }
.profile-tickets .lab { font-size: 12px; color: var(--text-soft); margin-top: 6px; font-weight: 700; }

/* 2개의 액션 카드 (멤버십 / 쿠폰함) — 클릭 시 패널 토글
   기존 4개 KPI 박스를 대체. button.my-stat-card 로 클릭 가능. */
.my-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; }
.my-stat {
  background: white; border-radius: 18px; padding: 20px;
  text-align: left; box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.my-stat-card {
  border: 1.5px solid transparent;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s;
  font-family: inherit;
}
.my-stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,64,129,.12); border-color: rgba(255,64,129,.25); }
.my-stat-card .ms-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,107,157,.14), rgba(255,201,60,.14));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--pink-deep);
}
.my-stat-card .ms-ico .kj-svg-icon { width: 22px; height: 22px; }
.my-stat-card .ms-body { flex: 1; min-width: 0; }
.my-stat-card .ms-arrow {
  font-family: 'Jua'; font-size: 22px; color: var(--pink);
  margin-left: auto; flex-shrink: 0;
}
.my-stat .n { font-family: 'Jua'; font-size: 26px; color: var(--pink-deep); line-height: 1.1; }
.my-stat .l { font-size: 12.5px; color: var(--text-soft); margin-top: 4px; font-weight: 600; }

/* 멤버십 / 쿠폰함 패널 */
.my-panel {
  background: white; border-radius: 18px; padding: 22px 24px;
  margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.04);
  animation: mpFadeIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mpFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.my-panel .mp-title {
  font-family: 'Jua'; font-size: 18px; color: var(--text);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.my-panel .mp-tickets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 18px 0;
}
.my-panel .mp-tk {
  background: var(--bg-2);
  border-radius: 12px; padding: 14px 16px;
  text-align: center;
  border: 1.5px solid rgba(255,64,129,.08);
}
.my-panel .mp-tk-name { font-size: 12px; color: var(--text-soft); font-weight: 700; margin-bottom: 6px; }
.my-panel .mp-tk-n { font-family: 'Jua'; font-size: 22px; color: var(--pink-deep); }

.my-panel .mp-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.my-panel .mp-cta {
  flex: 1; min-width: 180px;
  text-align: center;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: 'Pretendard';
  font-weight: 800; font-size: 14px;
  background: white; color: var(--pink-deep);
  border: 1.5px solid var(--pink);
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.my-panel .mp-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(255,64,129,.18); }
.my-panel .mp-cta.primary { background: var(--pink); color: white; border-color: var(--pink); }
.my-panel .mp-cta.primary:hover { background: var(--pink-deep); }

/* 쿠폰 리스트 */
.my-panel .mp-coupon-empty {
  text-align: center; padding: 40px 20px;
  color: var(--text-soft); font-size: 14px;
}
.my-panel .mp-coupon-empty .mp-cpn-ico { font-size: 36px; display: block; margin-bottom: 10px; color: var(--text-soft); }
.my-panel .mp-coupon-empty .mp-cpn-ico .kj-svg-icon { width: 32px; height: 32px; }
.my-panel .mp-coupon-empty p { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.my-panel .mp-coupon-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.my-panel .mp-coupon {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1.5px solid rgba(255,64,129,.1);
  border-radius: 14px;
}
.my-panel .mp-coupon.ship { background: linear-gradient(135deg, #E6F7FF, #F4FAFD); border-color: rgba(110,197,255,.3); }
.my-panel .mp-cpn-left { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.my-panel .mp-cpn-tag {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  background: var(--pink); color: white;
  margin-bottom: 4px;
}
.my-panel .mp-coupon.ship .mp-cpn-tag { background: #2A8BD8; }
.my-panel .mp-cpn-left b { font-size: 14px; color: var(--text); }
.my-panel .mp-cpn-left small { font-size: 12px; color: var(--text-soft); }
.my-panel .mp-cpn-left small.exp { color: var(--pink-deep); font-weight: 700; }
.my-panel .mp-cpn-cta {
  padding: 10px 16px; border-radius: 10px;
  background: var(--pink); color: white;
  font-weight: 800; font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.my-panel .mp-cpn-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255,64,129,.25); }
.my-panel .mp-coupon.ship .mp-cpn-cta { background: #2A8BD8; }

/* ===== 미사용 / 사용 완료 구분 ===== */
.my-panel .mp-cpn-tags { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.my-panel .mp-cpn-tags .mp-cpn-tag { margin-bottom: 0; }
.my-panel .mp-cpn-status {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(16,185,129,.12); color: #10B981;
}
.my-panel .mp-cpn-status.used { background: rgba(110,115,136,.14); color: #6E7388; }
/* 사용 완료 쿠폰 — 회색 처리로 미사용과 시각적 구분 */
.my-panel .mp-coupon.is-used { background: var(--bg-2); border-color: rgba(110,115,136,.18); opacity: .72; }
.my-panel .mp-coupon.is-used .mp-cpn-tag { background: #9aa0a6; }
.my-panel .mp-coupon.is-used .mp-cpn-left small.exp { color: var(--text-soft); font-weight: 600; }
/* X 삭제 버튼 */
.my-panel .mp-cpn-del {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1.5px solid rgba(239,68,68,.3);
  background: white; color: #EF4444;
  font-size: 15px; font-weight: 800; line-height: 1;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.my-panel .mp-cpn-del:hover { background: #EF4444; color: white; transform: translateY(-1px); }
.my-panel .mp-cpn-del:active { transform: translateY(0); }
/* 사용 완료 섹션 헤더 / 빈 안내 */
.my-panel .mp-coupon-sec-title {
  margin: 18px 0 8px;
  font-size: 13px; font-weight: 800; color: var(--text-soft);
}
.my-panel .mp-coupon-none {
  padding: 14px 4px; font-size: 13px; color: var(--text-soft); text-align: center;
}

@media (max-width: 720px) {
  .my-panel .mp-tickets { grid-template-columns: 1fr; }
  .my-panel .mp-coupon { flex-direction: column; align-items: stretch; }
  .my-panel .mp-coupon.is-used { flex-direction: row; align-items: center; }
  .my-panel .mp-cpn-del { align-self: center; }
}

.tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  padding: 6px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.tabs button:hover:not(.active) { background: var(--bg); color: var(--text); }
.tabs button.active {
  background: var(--pink);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 64, 129, .3);
}

.history-list { display: flex; flex-direction: column; gap: 10px; }
/* 빈 상태 placeholder는 부모(.history-list) 폭을 가득 채워서 위 카드들과 시각적 정렬 */
.history-list > .placeholder {
  max-width: none;
  margin: 0;
  width: 100%;
  padding: 60px 32px;
}
.hist-item { background: white; border-radius: 16px; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.04); font-size: 14px; }
.hist-item .e { font-size: 32px; }
.hist-item h4 { font-family: 'Jua'; font-size: 15px; margin-bottom: 2px; }
.hist-item small { color: var(--text-soft); font-size: 11.5px; }
.hist-item .grade-tag { font-family: 'Jua'; padding: 5px 12px; border-radius: 999px; font-size: 12px; }
.hist-item .price { font-family: 'Jua'; color: var(--pink-deep); font-size: 14px; }

/* ===== 이력 검색 바 ===== */
.hist-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border-radius: 14px;
  padding: 4px 14px 4px 16px;
  margin: 14px 0 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  border: 1.5px solid var(--bg-2);
  transition: border-color .15s, box-shadow .15s;
  /* "당첨 내역 확인하기" 버튼(white-space:nowrap)이 좁은 폭에서 줄바꿈되도록 허용 —
     안 그러면 한 줄에 강제로 붙어 가로 스크롤(우측 여백/깨짐)이 발생함 */
  flex-wrap: wrap;
}
/* flex:1 입력칸이 내용폭(min-width:auto)만큼 최소폭을 차지해 줄을 넘기는 것 방지 */
.hist-search-bar input { min-width: 0; }
.hist-search-bar:focus-within {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,64,129,.12);
}
.hist-search-bar .hs-icon { color: var(--text-soft); font-size: 15px; flex-shrink: 0; }
.hist-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 0;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: transparent;
}
.hist-search-bar input::placeholder { color: var(--text-soft); }
.hist-search-bar .hs-clear {
  background: var(--bg-2);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 16px;
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.hist-search-bar .hs-clear:hover { background: var(--pink); color: white; }

.hist-no-result {
  background: white;
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.hist-no-result b { color: var(--text); font-family: 'Jua'; font-size: 15px; display: block; margin-bottom: 4px; }

/* ===== 이력 페이지네이션 ===== */
.hist-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 14px 4px 0;
}
.hist-pager .hp-btn {
  background: white;
  border: 1.5px solid var(--bg-2);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 10px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  min-width: 36px;
  cursor: pointer;
  transition: all .12s;
}
.hist-pager .hp-btn:hover { border-color: var(--pink); color: var(--pink-deep); }
.hist-pager .hp-btn.on {
  background: var(--pink);
  border-color: var(--pink);
  color: white;
}
.hist-pager .hp-info {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .hist-pager .hp-info { display: none; }
  /* 모바일: 아이콘+입력칸+지우기는 윗줄, "당첨 내역 확인하기" 버튼은 아랫줄 가득(가로 넘침 제거) */
  .hist-search-bar .hist-csv-btn { flex: 1 1 100%; order: 3; justify-content: center; margin-top: 2px; }
}

@media (max-width: 720px) {
  .my-stats { grid-template-columns: 1fr; }
}

/* ===== 회원 정보 수정 모달 ===== */
#memberEditOverlay {
  position: fixed; inset: 0;
  background: rgba(20,20,30,.55);
  backdrop-filter: blur(6px);
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s ease;
  overflow-y: auto;
}
#memberEditOverlay.open { opacity: 1; }
.member-edit-card {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
  transform: translateY(8px) scale(.97);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  display: flex; flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}
#memberEditOverlay.open .member-edit-card { transform: translateY(0) scale(1); }
.member-edit-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.member-edit-head h2 { font-family: 'Jua'; font-size: 19px; color: var(--text); margin: 0; }
.member-edit-close {
  background: transparent; border: 0; font-size: 24px;
  cursor: pointer; color: var(--text-soft); line-height: 1;
  padding: 4px 8px; border-radius: 8px;
}
.member-edit-close:hover { background: var(--bg-2); color: var(--text); }
.member-edit-body {
  padding: 16px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 16px;
}
.me-section {
  background: var(--bg-2);
  border-radius: 14px;
  padding: 16px 18px;
}
.me-section h3 {
  font-family: 'Jua'; font-size: 14px; color: var(--text);
  margin: 0 0 12px 0;
}
.me-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.me-field:last-child { margin-bottom: 0; }
.me-field label {
  font-size: 12.5px; color: var(--text-soft); font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
.me-field label small { font-weight: 500; font-size: 11px; color: var(--text-soft); }
.me-field input {
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: 'Pretendard'; font-size: 14px;
  background: white;
  width: 100%; box-sizing: border-box;
}
.me-field input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,64,129,.1); }
.me-field input:disabled { background: var(--bg-2); color: var(--text-soft); cursor: not-allowed; }
.me-hint { font-size: 12.5px; color: var(--text-soft); line-height: 1.6; margin: 6px 0 0 0; }

.me-avatar-row { display: flex; align-items: center; gap: 16px; }
.me-avatar-prev {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFEAB0, #FFC93C);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.me-avatar-prev img { width: 100%; height: 100%; object-fit: cover; }
.me-avatar-prev .pf-emoji { font-size: 42px; }
.me-avatar-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.me-btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-family: 'Pretendard'; font-weight: 800; font-size: 13.5px;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: white; color: var(--text);
  transition: transform .12s, box-shadow .12s, background .12s;
  text-align: center;
}
.me-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.me-btn.primary { background: var(--pink); color: white; border-color: var(--pink); }
.me-btn.primary:hover { background: var(--pink-deep); }
.me-btn.gh { background: white; color: var(--text-soft); }
.me-btn.danger {
  background: white; color: #b91c1c;
  border-color: rgba(239,68,68,.4);
}
.me-btn.danger:hover { background: #b91c1c; color: white; }

.me-danger-zone { border: 1.5px solid rgba(239,68,68,.2); background: rgba(239,68,68,.04); }
.me-danger-zone h3 { color: #b91c1c; }

.member-edit-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

@media (max-width: 600px) {
  .member-edit-card { max-height: 100vh; border-radius: 18px 18px 0 0; align-self: flex-end; }
  .me-avatar-row { flex-direction: column; align-items: stretch; }
  .me-avatar-prev { align-self: center; }
}

/* 다크모드 */
body.dark-theme .member-edit-card { background: var(--surface); }
body.dark-theme .member-edit-head { border-bottom-color: var(--line); }
body.dark-theme .member-edit-foot { background: var(--bg-2); border-top-color: var(--line); }
body.dark-theme .me-section { background: var(--bg-2); }
body.dark-theme .me-field input { background: var(--surface); color: var(--text); border-color: var(--line); }
body.dark-theme .me-field input:disabled { background: var(--bg-2); }
body.dark-theme .me-btn { background: var(--surface); color: var(--text); border-color: var(--line); }
body.dark-theme .me-btn.gh { background: var(--surface); color: var(--text-soft); }
body.dark-theme .me-btn.danger { background: var(--surface); }
body.dark-theme .me-danger-zone { background: rgba(239,68,68,.08); }
@media (max-width: 900px) {
  .profile-card { grid-template-columns: 70px 1fr; gap: 14px; padding: 22px; }
  .profile-card::after { font-size: 110px; }
  .profile-tickets { grid-column: 1 / -1; }
  .hist-item { grid-template-columns: auto 1fr auto; }
  .hist-item .price { display: none; }
}

/* ===== 다크모드 ===== */
/* 프로필 카드 — 라이트는 핑크-옐로 그라데이션, 다크는 톤다운된 어두운 핑크 */
body.dark-theme .profile-card {
  background: linear-gradient(135deg, #4A1A35 0%, #5C2D14 100%);
}
body.dark-theme .profile-tickets { background: var(--surface); color: var(--pink-deep); }
body.dark-theme .profile-tickets .lab { color: var(--text-soft); }
body.dark-theme .profile-avatar { background: var(--surface); border-color: rgba(255,255,255,.18); }
body.dark-theme .my-stat { background: var(--surface); }
body.dark-theme .my-stat-card:hover { box-shadow: 0 10px 22px rgba(255,107,157,.18); border-color: rgba(255,107,157,.35); }
body.dark-theme .my-stat-card .ms-ico { background: rgba(255,107,157,.18); color: var(--pink); }
body.dark-theme .my-panel { background: var(--surface); }
body.dark-theme .my-panel .mp-title { color: var(--text); }
body.dark-theme .my-panel .mp-tk { background: var(--bg-2); border-color: rgba(255,107,157,.18); }
body.dark-theme .my-panel .mp-cta { background: var(--surface); color: var(--pink); border-color: var(--pink); }
body.dark-theme .my-panel .mp-cta.primary { background: var(--pink); color: white; }
body.dark-theme .my-panel .mp-coupon { background: var(--bg-2); border-color: rgba(255,107,157,.2); }
body.dark-theme .my-panel .mp-coupon.ship { background: rgba(110,197,255,.1); border-color: rgba(110,197,255,.3); }
body.dark-theme .my-panel .mp-cpn-left b { color: var(--text); }
body.dark-theme .my-panel .mp-coupon.is-used { background: var(--bg-2); border-color: rgba(255,255,255,.08); }
body.dark-theme .my-panel .mp-cpn-del { background: var(--surface); border-color: rgba(239,68,68,.4); }
body.dark-theme .my-panel .mp-cpn-del:hover { background: #EF4444; color: white; }
body.dark-theme .tabs { background: var(--surface); }
body.dark-theme .tabs button:hover:not(.active) { background: var(--bg-2); }
body.dark-theme .hist-item { background: var(--surface); }
body.dark-theme .hist-search-bar { background: var(--surface); border-color: var(--line); }
body.dark-theme .hist-search-bar input { color: var(--text); }
body.dark-theme .hist-no-result { background: var(--surface); }
body.dark-theme .hist-pager .hp-btn { background: var(--surface); border-color: var(--line); color: var(--text); }
body.dark-theme .hist-pager .hp-btn.on { background: var(--pink); border-color: var(--pink); color: white; }
body.dark-theme .pf-zoom-card { background: var(--surface); }
body.dark-theme .pf-zoom-close { background: var(--bg-2); color: var(--text); }
body.dark-theme .pf-zoom-info b { color: var(--text); }
/* .profile-card / .profile-avatar / .profile-tickets 는 핑크 그라데이션 위 흰 — 양쪽 동일 유지 */

/* ===== 멤버십 진행도 박스 — garapon.html 의 .gp-progress-* 와 동일 디자인 =====
   mypage.html renderMembershipPanel() 이 .gp-progress-card 마크업을 출력하므로
   해당 CSS 를 mypage 에도 포함해야 진행 바가 정상 표시됨 (없으면 텍스트만 노출). */
.gp-progress-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F8 100%);
  border: 1.5px solid var(--pink);
  border-radius: 22px;
  padding: 22px 26px;
  margin-bottom: 26px;
}
body.dark-theme .gp-progress-card { background: linear-gradient(135deg, rgba(45,27,61,.9), rgba(74,37,69,.9)); border-color: rgba(255,107,157,.4); }
.gp-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.gp-progress-head .gpp-title {
  font-family: 'Jua';
  font-size: 17px;
  color: var(--pink-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gp-progress-head .gpp-current {
  font-family: 'Jua';
  font-size: 14px;
  color: var(--text);
}
.gp-progress-head .gpp-current b { color: var(--pink-deep); font-size: 16px; margin-left: 4px; }
.gp-progress-track {
  position: relative;
  height: 10px;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  margin: 30px 0 38px;
}
body.dark-theme .gp-progress-track { background: rgba(255,255,255,.1); }
.gp-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF6B9D, #FFC93C);
  transition: width .5s ease;
}
.gp-progress-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  border: 2.5px solid #E5E7EB;
  z-index: 1;
}
.gp-progress-marker.reached { border-color: var(--pink-deep); background: linear-gradient(135deg,#FF6B9D,#FFC93C); }
.gp-progress-marker .gpm-label {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Pretendard';
  font-weight: 800;
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
}
.gp-progress-marker.reached .gpm-label { color: var(--pink-deep); }
.gp-progress-marker .gpm-amt {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Jua';
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
}
.gp-progress-foot {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  background: rgba(255,107,157,.06);
  padding: 12px 16px;
  border-radius: 12px;
}
.gp-progress-foot b { color: var(--pink-deep); }
.gp-progress-foot.maxed { background: rgba(124,58,237,.08); color: #5B21B6; }
/* 첫·마지막 마커 라벨이 카드 밖으로 잘리지 않게 트랙 좌우 여백 확보 */
.gp-progress-track { margin-left: 8px; margin-right: 8px; }