@charset "UTF-8";
/* ============================================================
   마이두레·풋터 연결화면 공유 디자인 시스템 — 신 초안 공유 레이어
   파일 목적 : 마이두레(마이페이지) 서브 화면 약 30종이 공유하는
     1) 디자인 토큰(§1) 2) 공유 컴포넌트 13종(§2) 3) 유형별 보조 컴포넌트(§3) 를 담는다.
   근거 문서 : DureShop/설계_마이두레_풋터_공유디자인시스템.md (§1~§3, W1 기반 웨이브)
   스코프    : .mpdz (모든 규칙은 .mpdz 하위에서만 동작 → style_v2.css 무충돌)
   계승 원칙 : 토큰 정본 = mydure_draft.css(.mydz) 값 그대로 재선언(신규 발명 0).
     마이두레 메인 draft JSP는 `.mpdz > .mydz` 로 중첩 적용(마이두레 메인 컴포넌트는
     mydure_draft.css가 계속 담당 — 이 파일은 그 확장 세트).
   게이트    : ?draft=1 (세션 플래그, include/comm/draftGate.jspf) 전용. 인라인 스타일 0건.
   버전 관리 : draft 단계에서는 각 JSP <link ...?v=1.0> 로 직접 관리.
   v1.0 (2026-07-11)
   v1.1 (2026-07-11) — 유형7(허브: 조합원센터) 대응. 히어로 경량판+검색(mpz-hub-*),
     FAQ 아코디언(mpz-faq) 추가. §1 토큰만 사용, 신규 색·폰트 없음.
   v1.2 (2026-07-11) — 유형6(게시판: 공지사항·안전성검사 목록/상세) 대응.
     단일컬럼 래퍼(mpz-wrap), 목록 검색인풋(mpz-search, rvdz_search 패턴 계승),
     PC paging.js 페이지번호 스킨(mpz-pager 내 page_num/page_current/arrow_*),
     상세 문서 헤더(mpz-doc-title/-meta/-rule/-attach) 추가. §1 토큰만 사용, 신규 색·폰트 없음.
   v1.3 (2026-07-12) — 유형2 보강(W2b). 공유 렌더 JS override 대상 3화면 전용:
     매장구매 결제단위 그룹카드(mpz-ordgroup-*), 관심/최근본 상품카드(mpz-prods/mpz-prod).
     이용후기는 기존 mpz-row.is-goods 재사용(신규 컴포넌트 없음). §1 토큰만, 신규 색·폰트 없음.
   v1.4 (2026-07-12) — 유형3(상세형) 주문상세 품목행 mpz-oditem(+수량/삭제 편집바). §1 토큰만.
   v1.5 (2026-07-12) — 유형4(폼형) 배송지 관리 카드 mpz-addr(+팝업 주소검색 톤). §1 토큰만.
   v1.6 (2026-07-12) — 유형4 충전금 요청 금액입력/은행 select(mpz-select/mpz-amount). §1 토큰만.
   v1.7 (2026-07-12 QC) — 자립화: mydz-empty/mydz-stats·stat* 를 .mpdz 스코프+--md-* 로 재정의
     (mydure_draft.css 미링크·.mydz 조상 없는 draft의 잔액카드·빈상태 무스타일 해결).
     + 터치 44px 하한 정비(mpz-prod-check/ordgroup·oditem·addr 버튼/mpz-toc). §1 토큰만.
   v1.8 (2026-07-12) — 카테고리 칩 밴드 mpz-catchips(가로 Swiper 대체·wrap 전량노출).
   v1.9 (2026-07-12) — 모바일 고정헤더 아래 본문 오프셋(상단 잘림 방지).
   v2.0 (2026-07-12) — 쿠폰함 실물 티켓형 mpz-ticket(그린 스텁·점선 절취선·노치·D-day). §1 토큰만.
   v2.1 (2026-07-12) — 모바일 상단정리: mydz-stats.is-solo(단일 잔액 전폭)·mpz-periodbtn
     (공급/재주문 조회기간 버튼)·mpz-catchips.is-oneline(관심생활재 카테고리 1줄). §1 토큰만.
   ============================================================ */

/* ============================================================
   §1. 디자인 토큰
   ============================================================ */
.mpdz{
  /* 1.1 색 — 전부 mydure_draft.css(.mydz)에서 그대로 추출, 신규 발명 0 */
  --md-green:      #3D6041;   /* 딥그린. 주버튼·강조·선택 상태 */
  --md-green-deep: #2F4B33;   /* 딥그린 hover/짙은 타이틀 톤 */
  --md-green-soft: #EAF0EA;   /* 연그린 배경. 배지·안내 밴드 */
  --md-green-sub:  #5f8253;   /* 예비 저강조 그린(아이콘 라인 등) — 컴포넌트 기본값 미사용 */
  --md-ink:        #1F241E;   /* 본문 잉크 */
  --md-sub:        #4F554B;   /* 보조 텍스트 — 14px 하한과 세트 */
  --md-line:       #E4E7E0;   /* 카드 테두리 */
  --md-accent:     #F8A31E;   /* 주황 포인트. D-day·할인 배지. 흰 글자 금지(§1.4) */
  --md-red:        #D8352A;   /* 위험·마감임박·삭제 */
  --md-gold:       #B48A34;   /* 쿠폰·등급 골드 */
  --md-cream:      #FBFAF6;   /* 히어로 그라데이션 하단·빈상태 배경 */
  --md-line-soft:  #EEF0EA;   /* 이미지 플레이스홀더·게이지 트랙 */

  /* 1.2 서체 */
  --md-serif: 'Maru Buri','Noto Serif KR','Nanum Myeongjo',serif;  /* 히어로·큰 제목만 */
  --md-sans:  'Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --md-num:   'Roboto','Pretendard',sans-serif;                    /* 숫자 전용, tabular-nums */

  /* 1.3 간격(4 기반) · 라운드 · 그림자 */
  --md-sp-1: 4px;  --md-sp-2: 8px;  --md-sp-3: 12px; --md-sp-4: 16px;
  --md-sp-5: 20px; --md-sp-6: 26px; --md-sp-7: 34px;
  --md-radius:    15px;   /* 카드 기본 */
  --md-radius-sm: 12px;   /* 버튼·입력·배지 */
  --md-radius-lg: 18px;   /* 히어로 */
  --md-shadow:       0 2px 10px rgba(31, 42, 24, .05);
  --md-shadow-hover: 0 6px 20px rgba(31, 42, 24, .10);
  --md-wrap: 1180px;      /* 본문 최대폭 */

  color: var(--md-ink);
  font-family: var(--md-sans);
  letter-spacing: -.01em;
  word-break: keep-all;   /* §1.4-5 전역 */
}
.mpdz *,
.mpdz *::before,
.mpdz *::after { box-sizing: border-box; }
.mpdz a { color: inherit; text-decoration: none; }
.mpdz button { font-family: inherit; }
.mpdz .num { font-family: var(--md-num); font-variant-numeric: tabular-nums; }

/* §1.4-5 prefers-reduced-motion 대응 (전역) */
@media (prefers-reduced-motion: reduce) {
  .mpdz *,
  .mpdz *::before,
  .mpdz *::after { transition: none !important; animation: none !important; }
}

/* §1.4-4 초점 표시(공통) — 링크형/버튼형 상호작용 요소 */
.mpdz a:focus-visible,
.mpdz button:focus-visible,
.mpdz input:focus-visible {
  outline: none;
  border-color: var(--md-green);
  box-shadow: 0 0 0 3px rgba(61, 96, 65, .12);
}

/* ============================================================
   공통 셸 (§3 "공통 셸 규칙") — PC 사이드+본문 2단 / 모바일 1단
   ============================================================ */
.mpz-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--md-sp-7);
  max-width: var(--md-wrap);
  margin: 0 auto;
  padding: 30px 20px 80px;
}
.mpz-main { min-width: 0; max-width: 900px; }
@media (max-width: 1024px) {
  .mpz-layout { grid-template-columns: 1fr; padding: 18px 14px 60px; gap: var(--md-sp-6); }
  .mpz-sidemenu { display: none; }
  .mpz-main { max-width: none; }
}

/* ============================================================
   §2.1 페이지 타이틀바 mpz-titlebar
   ============================================================ */
.mpz-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-bottom: var(--md-sp-5);
}
.mpz-back {
  display: none;                 /* PC 미노출 */
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: 2px;
  flex: 0 0 auto;
  color: var(--md-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.mpz-back::before { content: '\2039'; }
.mpz-title {
  font-family: var(--md-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--md-ink);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.mpz-title-sub {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 15px;
  color: var(--md-sub);
  line-height: 1.6;
}
.mpz-title-aside { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 1024px) {
  .mpz-back { display: flex; }
  .mpz-title { font-size: 20px; }
}

/* ============================================================
   §2.2 섹션 카드 mpz-card
   ============================================================ */
.mpz-card {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  padding: 20px;
}
.mpz-card + .mpz-card { margin-top: var(--md-sp-4); }
.mpz-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.mpz-card-title {
  font-family: var(--md-sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--md-ink);
  letter-spacing: -.02em;
}
.mpz-card-more { font-size: 14px; color: var(--md-sub); font-weight: 500; }
.mpz-card-more::after { content: ' \203A'; color: var(--md-green); font-weight: 700; }
a.mpz-card {
  display: block;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.mpz-card:hover { box-shadow: var(--md-shadow-hover); transform: translateY(-2px); border-color: rgba(61, 96, 65, .3); }
@media (max-width: 1024px) {
  .mpz-card { padding: 16px; }
}

/* ============================================================
   §2.3 목록 행 mpz-row (테이블 대체)
   PC = 그리드 4컬럼(date/main/amt/badge) · 모바일 = 2단 스택
   ============================================================ */
.mpz-row {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  align-items: center;
  gap: var(--md-sp-3);
  min-height: 64px;              /* 터치 여유 */
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius-sm);
  box-shadow: var(--md-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.mpz-row + .mpz-row { margin-top: 10px; }
a.mpz-row:hover { box-shadow: var(--md-shadow-hover); border-color: rgba(61, 96, 65, .3); }
.mpz-row-date { font-size: 14px; color: var(--md-sub); font-weight: 600; }
.mpz-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mpz-row-kicker { font-style: normal; font-size: 14px; color: var(--md-green); font-weight: 700; }
.mpz-row-name {
  font-size: 15px; color: var(--md-ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpz-row-amt { font-size: 15px; font-weight: 500; color: var(--md-ink); text-align: right; white-space: nowrap; }
.mpz-row-amt b.num { font-size: 17px; font-weight: 700; color: var(--md-ink); }
.mpz-row > .mpz-badge { justify-self: end; }

/* 변형: is-plusminus — 포인트/충전금/출자금 (적립=딥그린 / 차감=빨강) */
.mpz-row.is-plusminus .mpz-row-amt.is-plus b.num { color: var(--md-green); }
.mpz-row.is-plusminus .mpz-row-amt.is-minus b.num { color: var(--md-red); }

/* 변형: is-goods — 주문상세 상품행(썸네일 슬롯) */
.mpz-row.is-goods { grid-template-columns: 64px 1fr auto; }
.mpz-row-thumb {
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 10px; overflow: hidden;
  background: var(--md-line-soft);
}
.mpz-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 변형: is-board — 게시판 목록 행(말머리 배지 + 우측 날짜) */
.mpz-row.is-board { grid-template-columns: auto 1fr auto; }
.mpz-row.is-board .mpz-row-kicker {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 2px 10px;
  border-radius: 999px;
  background: var(--md-green-soft); color: var(--md-green-deep);
  font-size: 14px; font-weight: 700;
}
.mpz-row.is-board .mpz-row-date { text-align: right; }

@media (max-width: 720px) {
  .mpz-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date badge"
      "main main"
      "amt  amt";
    row-gap: 6px;
    padding: 14px 16px;
  }
  .mpz-row-date { grid-area: date; }
  .mpz-row > .mpz-badge { grid-area: badge; justify-self: end; }
  .mpz-row-main { grid-area: main; }
  .mpz-row-amt { grid-area: amt; display: flex; align-items: center; justify-content: space-between; }
  .mpz-row.is-goods {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "thumb main" "thumb amt";
  }
  .mpz-row.is-goods .mpz-row-thumb { grid-area: thumb; width: 56px; height: 56px; }
  .mpz-row.is-board { grid-template-columns: 1fr auto; grid-template-areas: "main date" "main date"; }
}

/* ============================================================
   §2.4 요약 스탯칩 — mydz-stats/mydz-stat 계승, 14px 하한만 오버라이드
   (신규 컴포넌트 정의 없음 — mydure_draft.css 원본 그대로 재사용)
   ============================================================ */
.mpdz .mydz-stat-label { font-size: 14px; }
.mpdz .mydz-quick-label { font-size: 14px; }

/* ============================================================
   §2.5 탭 mpz-tabs (rvdz_tabtop 계승 — 밑줄형, 3개 초과 시 줄바꿈)
   ============================================================ */
.mpz-tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--md-sp-5);
  padding: 0;
  border-bottom: 1px solid var(--md-line);
}
.mpz-tabs li { margin: 0; }
.mpz-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
  color: #9aa09b;
  padding: 10px 4px 13px;
  position: relative;
}
.mpz-tabs li.on a { color: var(--md-ink); }
.mpz-tabs li.on a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2.5px; border-radius: 2px;
  background: var(--md-green);
}

/* ============================================================
   §2.6 필터바 mpz-filter + 칩 (rvdz_cat 관례 계승)
   ============================================================ */
.mpz-filter { display: flex; flex-direction: column; gap: var(--md-sp-4); }
.mpz-filter-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sp-2) var(--md-sp-3); }
.mpz-filter-label { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--md-ink); min-width: 40px; }
.mpz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mpz-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border: 1.5px solid #d7ddd2;
  border-radius: var(--md-radius-sm);
  background: #fff;
  color: var(--md-sub);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mpz-chip:hover { border-color: #9dc4a5; color: var(--md-ink); }
.mpz-chip.on { background: var(--md-green); border-color: var(--md-green); color: #fff; }
.mpz-filter-range { font-size: 15px; color: var(--md-sub); font-weight: 600; margin-left: auto; }
.mpz-filter-go { align-self: flex-end; }
@media (max-width: 720px) {
  .mpz-filter-go { align-self: stretch; width: 100%; }
}

/* ============================================================
   §2.7 폼 필드 mpz-field / input / readonly / seg
   ============================================================ */
.mpz-field { margin-bottom: var(--md-sp-4); }
.mpz-field:last-child { margin-bottom: 0; }
.mpz-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--md-ink); }
.mpz-input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid #d7ddd2;
  border-radius: var(--md-radius-sm);
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  color: var(--md-ink);
  font-family: inherit;
}
.mpz-input::placeholder { color: #9aa09b; font-weight: 500; }
.mpz-input:focus { outline: none; border-color: var(--md-green); box-shadow: 0 0 0 3px rgba(61, 96, 65, .12); }
.mpz-help { margin-top: 8px; font-size: 14px; color: var(--md-sub); line-height: 1.5; }

/* 읽기전용 — 조합/ID/이름/주소 등 변경불가 필드 */
.mpz-field.is-readonly .mpz-input,
.mpz-readonly-val { background: var(--md-cream); color: var(--md-sub); }
.mpz-readonly-val {
  display: flex; align-items: center;
  min-height: 52px; padding: 0 16px;
  border: 1.5px solid var(--md-line);
  border-radius: var(--md-radius-sm);
  font-size: 16px;
}
.mpz-field.is-error .mpz-input { border-color: var(--md-red); }
.mpz-field.is-error .mpz-help { color: var(--md-red); }

/* 전화·생일 3분할 등 그룹 입력 */
.mpz-input-group { display: flex; align-items: center; gap: 8px; }
.mpz-input-group .mpz-input { text-align: center; }

/* 세그먼트(2버튼) — 양력/음력 등 라디오 대체, 칩과 동일 시각 */
.mpz-seg { display: inline-flex; border: 1.5px solid #d7ddd2; border-radius: var(--md-radius-sm); overflow: hidden; }
.mpz-seg input[type="radio"],
.mpz-seg input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mpz-seg label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  font-size: 15px; font-weight: 700; color: var(--md-sub);
  background: #fff; cursor: pointer;
}
.mpz-seg label + input + label,
.mpz-seg input + label { border-left: 1.5px solid #d7ddd2; }
.mpz-seg label:first-of-type { border-left: 0; }
.mpz-seg input:checked + label { background: var(--md-green); color: #fff; }
.mpz-seg input:focus-visible + label { box-shadow: 0 0 0 3px rgba(61, 96, 65, .12); }

/* 라디오/체크박스 네이티브 확대(20px) + 라벨 전체 클릭 영역화 */
.mpz-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.mpz-check input[type="checkbox"],
.mpz-check input[type="radio"] { width: 20px; height: 20px; accent-color: var(--md-green); flex: 0 0 auto; }
.mpz-check span { font-size: 15px; color: var(--md-ink); }

/* ============================================================
   §2.8 버튼 mpz-btn (4변형) + mpz-actions
   ============================================================ */
.mpz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--md-radius-sm);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mpz-btn.is-primary { background: var(--md-green); border-color: var(--md-green); color: #fff; }
.mpz-btn.is-primary:hover { background: var(--md-green-deep); border-color: var(--md-green-deep); }
.mpz-btn.is-secondary { background: #fff; border-color: var(--md-green); color: var(--md-green); }
.mpz-btn.is-secondary:hover { background: var(--md-green-soft); }
.mpz-btn.is-danger { background: #fff; border-color: var(--md-red); color: var(--md-red); }
.mpz-btn.is-danger:hover { background: var(--md-red); color: #fff; }
.mpz-btn.is-ghost { background: #fff; border-color: var(--md-line); color: var(--md-sub); }
.mpz-btn.is-ghost:hover { border-color: #c7cdc1; color: var(--md-ink); }

.mpz-actions { display: flex; align-items: center; gap: 10px; margin-top: var(--md-sp-5); justify-content: flex-end; }
.mpz-actions .mpz-btn.is-danger { margin-right: auto; }
@media (max-width: 1024px) {
  .mpz-btn { min-height: 48px; }
  .mpz-actions { flex-direction: column; align-items: stretch; }
  .mpz-actions .mpz-btn { width: 100%; }
  .mpz-actions .mpz-btn.is-danger { margin-right: 0; }
}

/* ============================================================
   §2.9 배지 mpz-badge (5변형)
   ============================================================ */
.mpz-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.mpz-badge.is-green  { background: var(--md-green-soft); color: var(--md-green-deep); }
.mpz-badge.is-orange { background: var(--md-accent); color: #3a2408; }         /* 주황 배경엔 잉크글자(흰글자 금지) */
.mpz-badge.is-red    { background: var(--md-red); color: #fff; }
.mpz-badge.is-gold    { background: var(--md-cream); color: var(--md-gold); border: 1px solid var(--md-gold); }
.mpz-badge.is-gray   { background: var(--md-line-soft); color: var(--md-sub); }

/* ============================================================
   §2.10 빈 상태 — mydz-empty 계승(신규 정의 없음).
   확장: 안내문 아래 .mpz-btn.is-secondary 1개(다음 행동 제시)용 여백 헬퍼만 추가.
   ============================================================ */
.mpz-empty-cta { margin-top: 14px; }

/* ============================================================
   §2.11 더보기 · 페이지네이션
   ============================================================ */
.mpz-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: var(--md-sp-5);
  background: var(--md-green-soft);
  color: var(--md-green-deep);
  border: 0;
  border-radius: var(--md-radius-sm);
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.mpz-pager { display: flex; justify-content: center; gap: 6px; margin-top: var(--md-sp-6); }
.mpz-pager a,
.mpz-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  border-radius: 10px;
  font-size: 15px; font-weight: 700;
  color: var(--md-sub);
  font-family: var(--md-num);
}
.mpz-pager .on { background: var(--md-green); color: #fff; }
@media (max-width: 1024px) {
  .mpz-pager { display: none; }   /* 모바일 = mpz-more 전용 */
}

/* ============================================================
   §2.12 뒤로가기 — .mpz-back 은 §2.1 titlebar에서 정의(중복 정의 없음)
   ============================================================ */

/* ============================================================
   §2.13 PC 좌측메뉴 mpz-sidemenu (main_left 신판)
   ============================================================ */
.mpz-sidemenu-title {
  display: flex; align-items: center;
  min-height: 44px;
  font-family: var(--md-serif);
  font-size: 20px; font-weight: 700; color: var(--md-ink);
  padding: 8px 14px 14px;
  border-bottom: 1px solid var(--md-line);
  margin-bottom: 10px;
}
.mpz-sidemenu-group { margin-bottom: 18px; }
.mpz-sidemenu-group:last-child { margin-bottom: 0; }
.mpz-sidemenu-label { padding: 0 14px; margin-bottom: 6px; font-size: 14px; color: var(--md-sub); font-weight: 700; }
.mpz-sidemenu-item {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px; color: var(--md-ink); font-weight: 500;
}
.mpz-sidemenu-item:hover { background: var(--md-line-soft); }
.mpz-sidemenu-item.on { background: var(--md-green-soft); color: var(--md-green-deep); font-weight: 800; }

/* ============================================================
   유형별 보조 컴포넌트
   ============================================================ */

/* ---- 유형5(정적문서) 목차 칩 + 본문 타이포 mpz-doc ---- */
.mpz-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--md-sp-5); }
.mpz-toc a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--md-line);
  border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--md-sub);
}
.mpz-toc a:hover { border-color: #9dc4a5; color: var(--md-green); }

.mpz-doc { max-width: 820px; }
.mpz-doc h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; color: var(--md-ink); }
.mpz-doc h3:first-child { margin-top: 0; }
.mpz-doc p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--md-ink); word-break: keep-all; }
.mpz-doc ul, .mpz-doc ol { margin: 0 0 14px; padding-left: 22px; }
.mpz-doc li { font-size: 15.5px; line-height: 1.75; color: var(--md-ink); word-break: keep-all; margin-bottom: 4px; }
.mpz-doc img { max-width: 100%; height: auto; border-radius: var(--md-radius-sm); display: block; margin: 16px 0; }
.mpz-doc .mpz-doc-summary { margin-top: 10px; font-size: 15px; color: var(--md-sub); line-height: 1.7; }

/* ---- 유형3(상세형) 골격만 미리 — mpz-sumrow(결제 합계행) · mpz-dl(정보 정의목록) ---- */
.mpz-sumrow { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; font-size: 15px; color: var(--md-sub); }
.mpz-sumrow .num { color: var(--md-ink); font-weight: 700; }
.mpz-sumrow.is-minus .num { color: var(--md-red); }
.mpz-sumrow.is-total {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--md-line);
  font-size: 17px; font-weight: 800; color: var(--md-ink);
}
.mpz-sumrow.is-total .num { color: var(--md-green-deep); font-size: 22px; }

.mpz-dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; }
.mpz-dl dt { font-size: 14px; color: var(--md-sub); font-weight: 600; }
.mpz-dl dd { font-size: 15px; color: var(--md-ink); margin: 0; }
@media (max-width: 1024px) {
  .mpz-dl { grid-template-columns: 90px 1fr; }
}

/* ---- §6 A안: 마이두레 메인 하단 "안내·정보" 링크 묶음 mpz-infolinks ---- */
.mpz-infolinks { margin-top: var(--md-sp-7); }
.mpz-infolinks-title { font-family: var(--md-sans); font-size: 19px; font-weight: 700; color: var(--md-ink); margin-bottom: 14px; }
.mpz-infolinks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.mpz-infolinks-grid a {
  display: flex; align-items: center;
  min-height: 44px; padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius-sm);
  font-size: 15px; color: var(--md-ink); font-weight: 500;
}
.mpz-infolinks-grid a:hover { border-color: #9dc4a5; color: var(--md-green); }
.mpz-infolinks-tel {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 14px; padding: 16px 18px;
  background: var(--md-green-soft);
  border-radius: var(--md-radius-sm);
}
.mpz-infolinks-tel a { font-family: var(--md-num); font-size: 22px; font-weight: 800; color: var(--md-green-deep); }
.mpz-infolinks-tel span { font-size: 14px; color: var(--md-sub); }
@media (max-width: 720px) {
  .mpz-infolinks-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   유형7(허브: 조합원센터) 전용 — v1.1
   ============================================================ */

/* ---- 히어로 경량판(허브 첫 화면 전용) + 검색 mpz-hub-* ---- */
.mpz-hub-hero { text-align: center; padding: 4px 0 var(--md-sp-6); }
.mpz-hub-hero-title {
  font-family: var(--md-serif); font-size: 32px; font-weight: 700;
  color: var(--md-ink); letter-spacing: -.01em; line-height: 1.32;
}
.mpz-hub-hero-sub { margin-top: 8px; font-size: 16px; color: var(--md-sub); }
.mpz-hub-search { position: relative; max-width: 520px; margin: 20px auto 0; }
.mpz-hub-search .mpz-input { padding-left: 46px; }
/* 돋보기 아이콘(원+손잡이, CSS만 — rvdz_search 관례 계승) */
.mpz-hub-search::before {
  content: ""; position: absolute; left: 17px; top: 50%; width: 16px; height: 16px;
  margin-top: -11px; border: 2px solid #7d8a76; border-radius: 50%; pointer-events: none;
}
.mpz-hub-search::after {
  content: ""; position: absolute; left: 29px; top: 50%; width: 8px; height: 2px;
  margin-top: 2px; background: #7d8a76; border-radius: 2px;
  transform: rotate(45deg); transform-origin: left center; pointer-events: none;
}
@media (max-width: 1024px) {
  .mpz-hub-hero { padding-bottom: var(--md-sp-5); }
  .mpz-hub-hero-title { font-size: 25px; }
}

.mpz-hub-faq-cats { margin: 0 0 var(--md-sp-4); }

/* ---- FAQ 아코디언 mpz-faq (허브·FAQ 목록 공용) ---- */
.mpz-faq { display: flex; flex-direction: column; }
.mpz-faq-item { border-bottom: 1px solid var(--md-line); }
.mpz-faq-item:last-child { border-bottom: 0; }
.mpz-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 12px 4px;
  font-size: 15.5px; font-weight: 700; color: var(--md-ink);
  cursor: pointer;
}
.mpz-faq-q::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--md-sub); border-bottom: 2px solid var(--md-sub);
  transform: rotate(45deg); transition: transform .15s ease;
}
.mpz-faq-item.is-open .mpz-faq-q { color: var(--md-green-deep); }
.mpz-faq-item.is-open .mpz-faq-q::after { transform: rotate(-135deg); margin-top: 4px; }
.mpz-faq-a { display: none; margin: 0 -4px 6px; padding: 0 14px; background: var(--md-green-soft); border-radius: 10px; }
.mpz-faq-item.is-open .mpz-faq-a { display: block; padding: 12px 14px 16px; }
.mpz-faq-a p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--md-ink); word-break: keep-all; }

/* ============================================================
   유형6(게시판: 공지사항·안전성검사) 전용 — v1.2
   ============================================================ */

/* ---- 단일컬럼 래퍼(사이드메뉴 없는 서브 화면 공용) mpz-wrap ---- */
.mpz-wrap { max-width: 900px; margin: 0 auto; padding: 30px 20px 80px; }
@media (max-width: 1024px) {
  .mpz-wrap { padding: 18px 14px 60px; }
}

/* ---- 목록 검색인풋 mpz-search (rvdz_search 패턴 계승) ---- */
.mpz-search { position: relative; width: 100%; margin-bottom: var(--md-sp-4); }
.mpz-titlebar .mpz-title-aside .mpz-search { width: 260px; margin-bottom: 0; }
.mpz-search .mpz-q {
  width: 100%; height: 52px;
  padding: 0 18px 0 46px;
  border: 1.5px solid #d7ddd2;
  border-radius: var(--md-radius-sm);
  background: #fff;
  font-size: 16px; font-weight: 500; color: var(--md-ink);
  font-family: inherit;
}
.mpz-search .mpz-q::placeholder { color: #9aa09b; font-weight: 500; }
.mpz-search .mpz-q:focus { outline: none; border-color: var(--md-green); box-shadow: 0 0 0 3px rgba(61, 96, 65, .12); }
.mpz-search::before {
  content: ""; position: absolute; left: 17px; top: 50%; width: 16px; height: 16px;
  margin-top: -10px; border: 2px solid #7d8a76; border-radius: 50%; pointer-events: none;
}
.mpz-search::after {
  content: ""; position: absolute; left: 29px; top: 50%; width: 8px; height: 2px;
  margin-top: 3px; background: #7d8a76; border-radius: 2px;
  transform: rotate(45deg); transform-origin: left center; pointer-events: none;
}
@media (max-width: 1024px) {
  .mpz-titlebar .mpz-title-aside .mpz-search { width: 100%; }
  .mpz-search .mpz-q { height: 48px; }
}

/* ---- 목록 컨테이너(JS가 mpz-row.is-board 를 append) ---- */
.mpz-boardlist { margin-bottom: var(--md-sp-2); }

/* ---- PC paging.js 페이지번호 스킨 (기존 page_num/page_current/arrow_* 클래스는
   paging.js가 그대로 생성 — 여기서는 .mpz-pager 안의 해당 클래스만 외형 오버라이드,
   paging.js 무수정) ---- */
.mpz-pager .page_current { background: var(--md-green); color: #fff; }
.mpz-pager .arrow_prev,
.mpz-pager .arrow_next { color: var(--md-sub); }
.mpz-pager .arrow_prev i.icon,
.mpz-pager .arrow_next i.icon { display: inline-block; width: 1em; line-height: 1; }
.mpz-pager .arrow_prev i.icon::before { content: '\2039'; }
.mpz-pager .arrow_next i.icon::before { content: '\203A'; }

/* ---- 상세 문서 헤더(제목 serif + 날짜 메타 + 구분선 + 첨부칩) ---- */
.mpz-doc-title { margin: 0 0 8px; font-family: var(--md-serif); font-size: 20px; font-weight: 700; color: var(--md-ink); line-height: 1.4; }
.mpz-doc-meta { margin: 0; font-size: 14px; color: var(--md-sub); font-weight: 600; }
.mpz-doc-rule { height: 1px; background: var(--md-line); margin: 16px 0 20px; }
.mpz-doc-attach { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.mpz-doc-back { width: 100%; margin-top: var(--md-sp-5); }

/* ============================================================
   유형2 보강(W2b) — 공유 렌더 JS override 대상 3화면 전용 컴포넌트
   (매장구매 결제단위 그룹카드 · 관심/최근본 상품카드)
   각 draft JSP 하단에서 원본 렌더함수를 동명 재정의(comm 무수정)하고
   아래 마크업을 뿌린다. 전부 .mpdz 스코프 + §1 토큰만(신규 색·폰트 0).
   v1.3 (2026-07-12)
   ============================================================ */

/* ---- 매장구매(receipt) 결제단위 그룹카드 : mpz-card 안 헤더 + mpz-row.is-goods 품목행 ---- */
.mpz-ordgroup + .mpz-ordgroup { margin-top: var(--md-sp-4); }
.mpz-ordgroup-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--md-line);
}
.mpz-ordgroup-info { min-width: 0; }
.mpz-ordgroup-date { font-size: 16px; font-weight: 800; color: var(--md-ink); font-family: var(--md-num); }
.mpz-ordgroup-meta { margin-top: 4px; font-size: 14px; color: var(--md-sub); line-height: 1.6; }
.mpz-ordgroup-meta .amt { color: var(--md-green-deep); font-weight: 700; }
.mpz-ordgroup-meta .cls { color: var(--md-red); font-weight: 700; }
.mpz-ordgroup-head .mpz-btn { min-height: 44px; padding: 0 16px; font-size: 14px; flex: 0 0 auto; }
.mpz-ordgroup .mpz-row { box-shadow: none; }               /* 그룹 카드 안 품목행은 그림자 생략 */
.mpz-ordgroup .mpz-row + .mpz-row { margin-top: 8px; }
.mpz-ordgroup .mpz-row-amt .qty { font-size: 14px; color: var(--md-sub); font-weight: 500; margin-right: 8px; }

/* ---- 관심/최근본(my_goods) 상품카드 mpz-prods/mpz-prod (체크박스 담기·삭제 포함) ---- */
.mpz-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md-sp-4); }
.mpz-prod {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--md-line); border-radius: var(--md-radius);
  box-shadow: var(--md-shadow); overflow: hidden;
}
.mpz-prod.is-soldout { opacity: .78; }
.mpz-prod-img { position: relative; aspect-ratio: 1 / 1; background: var(--md-line-soft); display: block; }
.mpz-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpz-prod-tags { position: absolute; left: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.mpz-prod-tags span {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px;
  border-radius: 6px; font-size: 14px; font-weight: 700;
}
.mpz-prod-tags .t-dc { background: var(--md-accent); color: #3a2408; font-family: var(--md-num); }
.mpz-prod-tags .t-gift { background: var(--md-green); color: #fff; }
.mpz-prod-tags .t-cp { background: var(--md-gold); color: #fff; }
.mpz-prod-halt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(31, 42, 24, .45); color: #fff; font-size: 16px; font-weight: 800;
}
/* 선택(담기/삭제용) 체크박스 오버레이 */
/* 터치 44px 하한(QC): 래퍼를 44 히트영역으로, 시각 체크박스는 28 유지 */
.mpz-prod-check { position: absolute; right: 4px; top: 4px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.mpz-prod-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mpz-prod-check label {
  position: relative; display: block; width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .92); border: 1.5px solid var(--md-line); cursor: pointer;
}
.mpz-prod-check input:checked + label { background: var(--md-green); border-color: var(--md-green); }
.mpz-prod-check input:checked + label::after {
  content: ''; position: absolute; left: 9px; top: 4px; width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.mpz-prod-check input:disabled + label { opacity: .35; cursor: not-allowed; }
.mpz-prod-body { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mpz-prod-name { font-size: 15px; font-weight: 600; color: var(--md-ink); line-height: 1.4; min-height: 42px; }
.mpz-prod-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.mpz-prod-old { font-size: 14px; color: var(--md-sub); text-decoration: line-through; font-family: var(--md-num); }
.mpz-prod-now { color: var(--md-ink); font-weight: 700; }
.mpz-prod-now .num { font-size: 19px; }
.mpz-prod-now .won { font-size: 14px; font-weight: 600; }
.mpz-prod-comf { font-size: 14px; color: var(--md-green-deep); font-weight: 600; }
.mpz-prod-btns { display: flex; gap: 8px; padding: 6px 14px 14px; }
.mpz-prod-cart {
  flex: 1; min-height: 46px; border-radius: var(--md-radius-sm);
  background: var(--md-green); color: #fff; border: 0;
  font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.mpz-prod-cart:hover { background: var(--md-green-deep); }
.mpz-prod-cart:disabled { background: var(--md-line-soft); color: var(--md-sub); cursor: not-allowed; }
.mpz-prod-del {
  flex: 0 0 auto; min-height: 46px; width: 52px; border-radius: var(--md-radius-sm);
  background: #fff; border: 1.5px solid var(--md-line); color: var(--md-sub);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.mpz-prod-del:hover { border-color: var(--md-red); color: var(--md-red); }
@media (max-width: 720px) {
  .mpz-prods { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mpz-prod-name { min-height: 40px; font-size: 14.5px; }
}

/* ---- 유형3(상세형) 주문상세 품목행 mpz-oditem (mpz-row.is-goods + 선택적 수량/삭제 편집바) ----
   v1.4 (2026-07-12). 수량 스피너(.spinner_box)는 기존 style_v2 전역 스타일 재사용. */
.mpz-oditem + .mpz-oditem { margin-top: 10px; }
.mpz-oditem .mpz-row { box-shadow: none; }
.mpz-oditem .mpz-row-kicker { color: var(--md-sub); font-weight: 600; }
.mpz-oditem .mpz-row-kicker .ts { color: var(--md-red); font-weight: 700; }
.mpz-oditem .mpz-row-kicker .gift { color: var(--md-green); font-weight: 700; }
.mpz-oditem-edit { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; padding: 0 4px 2px; }
.mpz-oditem-edit .mpz-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* ---- 유형4(폼형) 배송지 관리 카드 리스트 mpz-addr (FnAddrList override 대상) ----
   v1.5 (2026-07-12). */
.mpz-addr { background: #fff; border: 1px solid var(--md-line); border-radius: var(--md-radius); box-shadow: var(--md-shadow); padding: 16px 18px; }
.mpz-addr + .mpz-addr { margin-top: 10px; }
.mpz-addr.is-active { border-color: var(--md-green); box-shadow: 0 0 0 1px var(--md-green) inset, var(--md-shadow); }
.mpz-addr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.mpz-addr-name { font-size: 16px; font-weight: 700; color: var(--md-ink); }
.mpz-addr-line { font-size: 15px; color: var(--md-sub); line-height: 1.6; word-break: keep-all; margin: 0; }
.mpz-addr-line.num { font-family: var(--md-num); }
.mpz-addr-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mpz-addr-btns .mpz-btn { min-height: 44px; padding: 0 14px; font-size: 14px; flex: 1; min-width: 88px; }
.mpz-addpanel { margin-bottom: var(--md-sp-4); }

/* 배송지 팝업(레이어) 내부 주소검색 블록의 레거시 인풋도 .mpdz 안에서 mpz 톤으로 */
.mpz-addr-search { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mpz-addr-search .mpz-input { flex: 1; }
.mpz-addr-search .mpz-btn { flex: 0 0 auto; min-height: 52px; }
.mpz-addr-basic { margin-bottom: 8px; }

/* ---- 유형4 충전금 요청 : 금액 입력 + 프리셋 + 은행 select mpz-select ----
   v1.6 (2026-07-12). */
.mpz-select {
  display: block; width: 100%; min-height: 52px; padding: 0 14px;
  border: 1.5px solid #d7ddd2; border-radius: var(--md-radius-sm);
  background: #fff; font-size: 16px; font-weight: 500; color: var(--md-ink); font-family: inherit;
}
.mpz-select:focus { outline: none; border-color: var(--md-green); box-shadow: 0 0 0 3px rgba(61, 96, 65, .12); }
.mpz-amount { display: flex; align-items: center; gap: 10px; }
.mpz-amount .mpz-input { flex: 1; text-align: right; font-family: var(--md-num); font-size: 20px; font-weight: 700; }
.mpz-amount .unit { flex: 0 0 auto; font-size: 16px; font-weight: 700; color: var(--md-ink); }
.mpz-amount-presets { display: flex; gap: 8px; margin-top: 10px; }
.mpz-amount-presets .mpz-btn { flex: 1; min-height: 44px; padding: 0 8px; font-size: 15px; }

/* ---- 카테고리 칩 밴드 mpz-catchips (가로 Swiper 대체 · wrap 전량노출, 시니어) v1.8 ---- */
.mpz-catchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--md-sp-4); }
.mpz-catchips .mpz-chip { min-height: 44px; padding: 9px 16px; font-size: 15px; }

/* ---- 모바일 고정헤더(.sub_head_def/.sub_head_close_def, 59px) 아래로 본문 오프셋 — 상단 잘림 방지 v1.9 ----
   sub_head 가 앞설 때만 적용(마이두레 메인 GNB 헤더 등은 미해당). PC(.mpz-layout 중첩)는 .mpdz>.mpz-main 미매칭. */
.sub_head_def ~ .mpdz > .mpz-main,
.sub_head_def ~ .mpdz > .mpz-wrap,
.sub_head_close_def ~ .mpdz > .mpz-main,
.sub_head_close_def ~ .mpdz > .mpz-wrap { padding-top: 68px; }

/* ============================================================
   자립화(v1.7 · QC 2026-07-12) — mydz-empty / mydz-stats·stat* 를 .mpdz 스코프 + --md-* 로 재정의.
   근거: 다수 draft(point/deposit/invest 잔액카드, receipt/review/delivery 등 빈상태)가
   mydure_draft.css 를 링크하지 않거나 .mydz 조상이 없어 mydz-* 의 변수(--green 등)가 미해결→무스타일.
   이제 .mpdz 만 있으면 정상 스타일. mydure_draft.css 를 함께 링크한 화면은 후행 로드로 이 규칙이 이겨 동일 시각.
   ============================================================ */
.mpdz .mydz-empty {
  background: var(--md-cream); border: 1px dashed var(--md-line); border-radius: var(--md-radius);
  padding: 40px 20px; text-align: center; color: var(--md-sub); font-size: 14.5px;
}
.mpdz .mydz-empty .em-mark {
  display: block; width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--md-green-soft); color: var(--md-green); font-size: 22px; line-height: 42px;
  font-weight: 700; font-family: var(--md-serif);
}
.mpdz .mydz-empty p { margin: 0; }
.mpdz .mydz-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mpdz a.mydz-stat, .mpdz .mydz-stat {
  display: block; background: #fff; border: 1px solid var(--md-line); border-radius: var(--md-radius);
  padding: 18px 16px 16px; box-shadow: var(--md-shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mpdz a.mydz-stat:hover { box-shadow: var(--md-shadow-hover); transform: translateY(-2px); border-color: rgba(61, 96, 65, .35); }
.mpdz .mydz-stat-label { font-size: 14px; color: var(--md-sub); font-weight: 500; }
.mpdz .mydz-stat-val { margin-top: 10px; display: flex; align-items: baseline; gap: 3px; color: var(--md-ink); }
.mpdz .mydz-stat-val .num { font-size: 24px; font-weight: 700; line-height: 1; font-family: var(--md-num); }
.mpdz .mydz-stat-val .unit { font-size: 14px; color: var(--md-sub); font-weight: 600; }
.mpdz .mydz-stat-cta { margin-top: 12px; display: inline-block; font-size: 14px; font-weight: 700; color: var(--md-green); }
.mpdz .mydz-stat.is-accent { border-color: rgba(61, 96, 65, .3); background: linear-gradient(180deg, #fff 0%, #F6FAF5 100%); }
.mpdz .mydz-stat.is-accent .mydz-stat-val .num { color: var(--md-green-deep); }
@media (max-width: 1024px) { .mpdz .mydz-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .mpdz .mydz-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mpdz .mydz-stat { padding: 14px 13px; }
  .mpdz .mydz-stat-val .num { font-size: 21px; }
}

/* ============================================================
   §3.x 쿠폰 티켓 mpz-ticket (v2.0 · 2026-07-12) — 쿠폰함 실물 티켓형
   왼쪽 그린 스텁(할인값 크게) + 점선 절취선(perforation) + 오른쪽 본문(조건·이름·기간·D-day).
   근거: mpz-row 목록형이 "쿠폰답게 안 보인다"는 리뷰 → 실물 쿠폰/티켓 시각.
   시니어: 할인값 26px·이름 16px 래핑허용·기간 14px·터치여유 min-height. §1 토큰만, 신규 색·폰트 0.
   ============================================================ */
.mpz-tickets { display: block; }
.mpz-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  overflow: hidden;
  min-height: 118px;
}
.mpz-ticket + .mpz-ticket { margin-top: 12px; }

/* 왼쪽 스텁 — 할인값 */
.mpz-ticket-stub {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 16px 12px;
  background: var(--md-green);
  color: #fff; text-align: center;
}
.mpz-ticket-amt {
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  font-family: var(--md-num); font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
}
.mpz-ticket-amt b.num { font-size: 27px; font-weight: 800; }
.mpz-ticket-amt .unit { font-size: 16px; font-weight: 700; }
.mpz-ticket-amt.is-ship b.num { font-size: 20px; letter-spacing: -.03em; }
.mpz-ticket-stub-label { font-size: 13px; font-weight: 600; opacity: .9; }

/* 절취선 — 스텁과 본문 사이 점선 */
.mpz-ticket-body {
  position: relative;
  min-width: 0;
  padding: 16px 18px 15px;
  border-left: 2px dashed var(--md-line);
  display: flex; flex-direction: column; gap: 5px;
}
/* 절취선 양끝 노치(반원) — 티켓 느낌 강화 */
.mpz-ticket-body::before,
.mpz-ticket-body::after {
  content: ""; position: absolute; left: -8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--md-line-soft); border: 1px solid var(--md-line);
}
.mpz-ticket-body::before { top: -8px; }
.mpz-ticket-body::after  { bottom: -8px; }

.mpz-ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mpz-ticket-cond {
  font-style: normal; font-size: 14px; font-weight: 700; color: var(--md-green);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpz-ticket-name {
  font-size: 16px; font-weight: 700; color: var(--md-ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mpz-ticket-meta { font-size: 13.5px; color: var(--md-sub); line-height: 1.5; margin: 0; }
.mpz-ticket-valid { margin: 2px 0 0; font-size: 14px; color: var(--md-sub); font-weight: 600; }
.mpz-ticket-valid::before { content: "사용기간 "; font-weight: 500; color: var(--md-sub); }

/* 다운로드쿠폰 담기 버튼(원본 img#id_downcp{n} 무수정, 클래스만 부여) — 44px 터치 */
.mpz-ticket-down {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 8px; margin: -6px -6px 0 0;
  cursor: pointer; border-radius: 50%; transition: background .15s ease;
}
.mpz-ticket-down:hover { background: var(--md-green-soft); }

/* 사용완료 — 전체 흐리게 + 스텁 회색 */
.mpz-ticket.is-used { opacity: .7; }
.mpz-ticket.is-used .mpz-ticket-stub { background: var(--md-sub); }
.mpz-ticket.is-used .mpz-ticket-body::before,
.mpz-ticket.is-used .mpz-ticket-body::after { background: var(--md-line); }

@media (max-width: 720px) {
  .mpz-ticket { grid-template-columns: 104px 1fr; min-height: 108px; }
  .mpz-ticket-stub { padding: 14px 8px; }
  .mpz-ticket-amt b.num { font-size: 23px; }
  .mpz-ticket-amt .unit { font-size: 15px; }
  .mpz-ticket-amt.is-ship b.num { font-size: 18px; }
  .mpz-ticket-body { padding: 14px 14px 13px; }
  .mpz-ticket-name { font-size: 15.5px; }
}

/* ============================================================
   v2.1 (2026-07-12) — 모바일 상단/레이아웃 정리
   1) 단일 잔액 카드 full-width(mydz-stats.is-solo) — 출자금·외상잔액 상단이
      다열 그리드라 반쪽 너비로 뜨던 문제 방지.
   2) 조회기간 필터 버튼(mpz-periodbtn) — 공급내역·재주문 상단에 날짜만 홀로 떠 보이던
      바 대체(라벨 "조회기간" + 값 + 펼침 화살표로 필터임을 명시). 기존 filter_on() 재사용.
   3) 카테고리 1줄 가로스크롤(mpz-catchips.is-oneline) — 관심생활재 카테고리.
   §1 토큰만, 신규 색·폰트 0.
   ============================================================ */
.mpdz .mydz-stats.is-solo { grid-template-columns: 1fr; }

.mpz-periodbtn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; margin-bottom: 14px; padding: 0 16px;
  background: #fff; border: 1px solid var(--md-line); border-radius: var(--md-radius-sm);
  box-shadow: var(--md-shadow); cursor: pointer;
  font-family: inherit; font-size: 15px; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mpz-periodbtn:hover { border-color: rgba(61, 96, 65, .3); box-shadow: var(--md-shadow-hover); }
.mpz-periodbtn .lbl { flex: 0 0 auto; color: var(--md-sub); font-weight: 600; }
.mpz-periodbtn .val { flex: 1 1 auto; color: var(--md-green-deep); font-weight: 700; font-family: var(--md-num); }
.mpz-periodbtn .caret {
  flex: 0 0 auto; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--md-sub);
}

.mpz-catchips.is-oneline {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.mpz-catchips.is-oneline::-webkit-scrollbar { display: none; }
.mpz-catchips.is-oneline .mpz-chip { flex: 0 0 auto; white-space: nowrap; }