/* =========================================================
   FluxHub Common — 내 계정 본문 공용 디자인 (대시보드 · 주문 · 쿠폰 · 적립금 · 회원정보 …)
   =========================================================

   두 틀이 같은 본문 마크업을 쓴다 — 이 파일 하나로 둘 다 그린다:
     · 통합 틀      .fxm-content                  (FHC_Mypage)
     · 회원 기본 틀 .fluxmember-mypage__content   (fluxmember)
   본문은 회원 모듈(.fluxmember-*)과 쇼핑 모듈(.fhs-*)의 마크업을 그대로 쓴다. 그 CSS 는 건드리지 않고
   여기서 위에 덮어 그린다.

   색은 쓰지 않는다 — 전부 var(--acct-*) (account-tokens.css). scripts/validate.sh 13번.

   ── 문법 ──
   흰 바탕 + 검정 + 얇은 선. 카드 나열 대신 굵은 위선·얇은 아래선과 크기 위계로 나눈다.
   숫자가 주인공(tabular-nums). 강조색(사이트 대표색)은 활성 표시·화살표·선에만 좁게.
   버튼은 알약, 기본=검정 채움 / 보조=흰 바탕+테두리 / 위험=흰 바탕+위험색 글자.

   ── 우선순위 ──
   선택자는 (0,2,0) — 모듈 기본 CSS(0,1,0)보다 세고, 사이트 테마가 같은 자리를 다시 디자인한
   경우(.is-mypage … 등)에는 테마가 이기도록 이 파일을 테마보다 먼저 싣는다.

   1. 공통 바탕  2. 대시보드  3. 표·폼·버튼·서브탭  4. 뱃지·빈 상태
   5. 주문  6. 쿠폰  7. 적립금  8. 페이지 번호  9. 반응형  10. 모션 줄이기
   ========================================================= */

/* ===================
   1. 공통 바탕
   =================== */
:is(.fluxmember-mypage__content, .fxm-content) {
	word-break: keep-all;
	overflow-wrap: break-word;
	color: var(--acct-ink);
}

:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-title,
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-mypage__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0 0 28px;
	color: var(--acct-ink);
}

/* ===================
   2. 대시보드 (쇼핑)
   =================== */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash .fhs-mypage-title { display: none; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__greet { margin: 0 0 40px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__hello {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.3;
	color: var(--acct-ink);
	margin: 0;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__hello strong { font-weight: 700; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__hello-sub { font-size: 15px; color: var(--acct-muted); margin: 8px 0 0; }

:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__subtitle {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--acct-ink);
	margin: 0 0 14px;
}

/* 주문 처리 현황: 상자 없이 굵은 위선 + 얇은 아래선. 숫자가 주인공, 0 은 흐리게 */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__orders {
	background: transparent;
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--acct-ink);
	border-bottom: 1px solid var(--acct-line);
	padding: 0;
	align-items: stretch;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__flow { padding: 8px 0; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__stat { padding: 22px 8px; gap: 12px; min-height: 44px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__num {
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 300;
	line-height: 1;
	color: var(--acct-faint);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__num.is-active { color: var(--acct-ink); font-weight: 700; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__label { font-size: 14px; color: var(--acct-muted); font-weight: 500; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__stat:hover .fhs-dash__label { color: var(--acct-ink); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__arrow { color: var(--acct-arrow); font-size: 18px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__claims {
	border-left: 1px solid var(--acct-line);
	padding: 0 0 0 clamp(16px, 2.4vw, 32px);
	margin: 12px 0 12px clamp(8px, 1.6vw, 24px);
	gap: 10px;
	min-width: 96px;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__claim { font-size: 14px; color: var(--acct-muted); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__claim b { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--acct-faint); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__claim b.is-active { color: var(--acct-ink); font-weight: 700; }

/* 적립금·쿠폰: 같은 흰 카드 나열을 피한다 — 첫 칸은 검정 면(주), 나머지는 따뜻한 회색 면(보조) */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 32px 0 0;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 26px 24px;
	border: 0;
	border-radius: var(--acct-radius);
	background: var(--acct-warm);
	color: var(--acct-ink);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card:first-child { background: var(--acct-dark); color: var(--acct-on-dark); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card:hover { transform: translateY(-2px); box-shadow: var(--acct-shadow-hover); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card-label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--acct-muted); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card:first-child .fhs-dash__card-label { color: var(--acct-brand-lite); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card-value {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: inherit; /* 검정 카드 위에서 글자가 사라지지 않게(모듈 기본 규칙은 색을 고정해 둠) */
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card-value em { font-style: normal; font-size: 15px; font-weight: 500; margin-left: 4px; opacity: 0.7; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card:focus-visible { outline: 2px solid var(--acct-ink); outline-offset: 3px; }

/* 최근 주문: 카드 대신 행 목록 */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__recent { margin-top: 48px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__recent-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0;
	border-bottom: 1px solid var(--acct-ink);
	padding-bottom: 12px;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__recent-head .fhs-dash__subtitle { margin: 0; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__more {
	font-size: 13px;
	color: var(--acct-muted);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__more:hover { color: var(--acct-ink); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__recent-list { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto 100px;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border: 0;
	border-bottom: 1px solid var(--acct-line);
	background: transparent;
	text-decoration: none;
	color: var(--acct-ink);
	transition: background-color 0.2s ease;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order:hover { background: var(--acct-hover); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order-date { font-size: 13px; color: var(--acct-muted); font-variant-numeric: tabular-nums; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order-name { font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order-qty { font-size: 13px; color: var(--acct-muted); font-weight: 400; margin-left: 8px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order-total { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* 상태 뱃지: 색 대신 글자 + 얇은 테두리 (색만으로 정보를 전달하지 않는다) */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order .fhs-badge {
	background: transparent;
	color: var(--acct-ink);
	border: 1px solid var(--acct-line);
	border-radius: var(--acct-radius-pill);
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

/* 빈 상태: 글자만 두지 않고 다음 행동(쇼핑)으로 이어지는 블록 */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	margin: 0;
	padding: 48px 16px;
	background: var(--acct-warm);
	border-radius: var(--acct-radius);
	color: var(--acct-muted);
	font-size: 15px;
}

/* 바로가기: 아이콘 카드 대신 굵은 위선 아래 글자 격자 */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash .fhs-dash__subtitle[style] { margin-top: 48px !important; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0 24px;
	border-top: 1px solid var(--acct-ink);
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	gap: 8px;
	min-height: 56px;
	padding: 0 2px;
	border: 0;
	border-bottom: 1px solid var(--acct-line);
	border-radius: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	color: var(--acct-ink);
	text-decoration: none;
	transition: padding 0.2s ease, color 0.2s ease;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a .dashicons { display: none; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a::after { content: '→'; font-family: var(--acct-font-en); color: var(--acct-brand); transition: transform 0.2s ease; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a:hover { color: var(--acct-black); padding-left: 6px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a:hover::after { transform: translateX(4px); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a:focus-visible { outline: 2px solid var(--acct-ink); outline-offset: -2px; }

/* 회원 모듈 자체 대시보드(쇼핑이 없는 사이트): 그라디언트 인사 대신 큰 글씨 + 위선 */
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-dashboard__greeting {
	padding: 0 0 28px;
	margin: 0 0 32px;
	background: transparent;
	background-image: none;
	border-radius: 0;
	border-bottom: 1px solid var(--acct-ink);
	color: var(--acct-ink);
}
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-dashboard__greeting p {
	margin: 0;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.3;
}
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-dashboard__greeting strong { font-weight: 700; }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-dashboard__widgets { display: grid; grid-template-columns: 1fr; gap: 32px; }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-widget {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	overflow: visible;
}
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-widget__title {
	padding: 0 0 12px;
	margin: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--acct-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--acct-ink);
}
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-widget__body { padding: 0; }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-table--summary th { width: 120px; }

/* ===================
   3. 표 · 폼 · 버튼 · 서브탭
   =================== */
:is(.fluxmember-mypage__content, .fxm-content) table:not(:where(.fbmp *)) { width: 100%; border-collapse: collapse; }
:is(.fluxmember-mypage__content, .fxm-content) th:not(:where(.fbmp *)) {
	background: transparent;
	color: var(--acct-muted);
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	padding: 12px 8px;
	border-top: 1px solid var(--acct-ink);
	border-bottom: 1px solid var(--acct-line);
}
:is(.fluxmember-mypage__content, .fxm-content) td:not(:where(.fbmp *)) { padding: 16px 8px; border-bottom: 1px solid var(--acct-line); font-size: 15px; }

:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__group { margin-bottom: 20px; }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__label { font-size: 14px; font-weight: 600; color: var(--acct-ink); margin-bottom: 8px; display: block; }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__input,
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__textarea,
:is(.fluxmember-mypage__content, .fxm-content) select {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	font-size: 15px;
	color: var(--acct-ink);
	background: var(--acct-white);
	border: 1px solid var(--acct-field-line);
	border-radius: var(--acct-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__textarea { padding: 12px 14px; }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__input:focus,
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__textarea:focus,
:is(.fluxmember-mypage__content, .fxm-content) select:focus {
	outline: 0;
	border-color: var(--acct-ink);
	box-shadow: var(--acct-focus-ring);
}

:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-subtabs {
	display: flex;
	gap: 24px;
	border-bottom: 1px solid var(--acct-line);
	margin-bottom: 28px;
	overflow-x: auto;
	overflow-y: hidden;
}
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-subtab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 12px 0;
	min-height: 44px;
	font-size: 15px;
	font-weight: 500;
	color: var(--acct-faint);
	cursor: pointer;
	white-space: nowrap;
}
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-subtab:hover { color: var(--acct-ink); }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-subtab.is-active { color: var(--acct-ink); font-weight: 700; border-bottom-color: var(--acct-brand); }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-subtab:focus-visible { outline: 2px solid var(--acct-ink); outline-offset: -2px; }

/* 회원정보 주소 검색 줄 — 인라인 스타일의 파랑 링크를 글자 색으로, 글자가 세로로 쌓이지 않게 */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-address-manual { color: var(--acct-ink) !important; font-size: 14px !important; white-space: nowrap; flex: 0 0 auto; min-height: 44px; padding: 0 8px; }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-address-search { white-space: nowrap; flex: 0 0 auto; width: auto; padding: 0 18px; }
/* 짧은 입력칸(우편번호)은 100% 폭 규칙에 덮이지 않게 — 옆의 버튼 두 개와 한 줄에 들어가야 한다 */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__input.fluxmember-form__input--short { width: auto; flex: 1 1 96px; min-width: 0; max-width: 200px; }

/* 안내·알림 상자: 색 면 대신 왼쪽 선 (문구가 뜻을 전한다) */
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-notice,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__message {
	background: var(--acct-warm);
	color: var(--acct-ink);
	border: 0;
	border-left: 2px solid var(--acct-ink);
	border-radius: 0;
}
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form__message.is-error { border-left-color: var(--acct-danger); color: var(--acct-danger); background: var(--acct-danger-bg); }

/* ---------------------------------------------------------------
   버튼 — 내 계정의 모든 버튼은 한 문법으로
   모양: 알약 · 폭: 글자에 맞춤(폼 전체 폭으로 늘어나지 않는다, --full 포함)
   크기: 기본 48px(폼 저장·비밀번호 변경·주소 검색·빈 상태 안내) / 작게 44px(주문 카드·목록 안의 행동)
   색  : 기본=검정 채움, 보조=흰 바탕 + 얇은 테두리, 위험=흰 바탕 + 위험색 글자(삭제·탈퇴)
   --------------------------------------------------------------- */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm,
:is(.fluxmember-mypage__content, .fxm-content) .mp-empty__cta,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__empty a,
:is(.fluxmember-mypage__content, .fxm-content) .fxm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	max-width: 100%;
	min-width: 96px;
	min-height: 48px;
	padding: 0 28px;
	margin: 0;
	border-radius: var(--acct-radius-pill);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm { min-width: 0; min-height: 44px; padding: 0 20px; font-size: 14px; }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn--full { width: auto; }
/* 빈 상태 안내 버튼은 위 문구와 간격을 둔다(위 공통 규칙의 margin:0 보다 우선) */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-empty .mp-empty__cta { margin-top: 20px; }
/* 폼이 세로 flex·그리드여도 버튼이 늘어나지 않게 */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm { align-self: flex-start; justify-self: start; flex: 0 0 auto; }
/* 폼 맨 아래 제출 버튼은 입력칸 아래 왼쪽에 놓고, 위에 여유를 둔다 */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form > .fluxmember-btn,
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-form .fluxmember-btn[type="submit"] { margin-top: 12px; }

/* 기본(검정 채움) */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn--primary,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm--primary,
:is(.fluxmember-mypage__content, .fxm-content) .fxm-btn--primary,
:is(.fluxmember-mypage__content, .fxm-content) .mp-empty__cta,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__empty a { background: var(--acct-ink); color: var(--acct-white); border: 1px solid var(--acct-ink); }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn--primary:hover,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm--primary:hover,
:is(.fluxmember-mypage__content, .fxm-content) .fxm-btn--primary:hover,
:is(.fluxmember-mypage__content, .fxm-content) .mp-empty__cta:hover,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__empty a:hover { background: var(--acct-black); border-color: var(--acct-black); color: var(--acct-white); }
/* 보조(흰 바탕 + 테두리) */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn--secondary,
:is(.fluxmember-mypage__content, .fxm-content) .fxm-btn:not(.fxm-btn--primary),
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm:not(.fhs-btn-sm--primary) { background: var(--acct-white); color: var(--acct-ink); border: 1px solid var(--acct-line-strong); }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn--secondary:hover,
:is(.fluxmember-mypage__content, .fxm-content) .fxm-btn:not(.fxm-btn--primary):hover,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm:not(.fhs-btn-sm--primary):hover { border-color: var(--acct-ink); background: var(--acct-white); }
/* 위험(탈퇴·삭제) — 색만으로 전하지 않도록 글자도 「탈퇴」「삭제」로 쓰이고 있다 */
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn--danger { background: var(--acct-white); color: var(--acct-danger); border: 1px solid var(--acct-danger-line); }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn--danger:hover { background: var(--acct-danger-bg); border-color: var(--acct-danger); color: var(--acct-danger); }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn:disabled { opacity: 0.5; cursor: not-allowed; }
:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn:focus-visible,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm:focus-visible,
:is(.fluxmember-mypage__content, .fxm-content) .fxm-btn:focus-visible,
:is(.fluxmember-mypage__content, .fxm-content) .mp-empty__cta:focus-visible,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__empty a:focus-visible { outline: 2px solid var(--acct-ink); outline-offset: 3px; }

/* ===================
   4. 뱃지 · 빈 상태
   =================== */
/* 상태 뱃지(주문·대시보드 공통): 색 알약 대신 글자 + 얇은 테두리. 상태는 글자로 전달한다 */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-badge,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-badge {
	background: transparent;
	color: var(--acct-ink);
	border: 1px solid var(--acct-line-strong);
	border-radius: var(--acct-radius-pill);
	padding: 3px 11px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-badge--shipped,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-badge--delivered,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-badge--success { border-color: var(--acct-ink); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-badge--cancelled,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-badge--refunded,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-badge--failed { color: var(--acct-faint); }

/* 빈 상태: 따뜻한 회색 면으로 */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 16px 0 0;
	padding: 56px 16px;
	background: var(--acct-warm);
	border: 0;
	border-radius: var(--acct-radius);
	text-align: center;
	color: var(--acct-muted);
	font-size: 15px;
}

:is(.fluxmember-mypage__content, .fxm-content) .mp-empty__cta { margin-top: 20px; }

/* ===================
   5. 주문내역 — 겹겹의 회색 띠 대신 굵은 위선 + 얇은 선
   =================== */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-orders { display: block; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--acct-ink);
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 40px;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 0 14px;
	background: transparent;
	border: 0;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__no { white-space: nowrap; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--acct-ink); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__date { font-size: 13px; color: var(--acct-muted); font-variant-numeric: tabular-nums; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__items { background: transparent; border: 0; padding: 0; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 108px auto;
	align-items: center;
	gap: 12px 16px;
	padding: 16px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--acct-line);
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__name { font-size: 15px; font-weight: 500; color: var(--acct-ink); min-width: 0; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__opt { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--acct-muted); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__qty { font-size: 13px; color: var(--acct-muted); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__price { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__reviewed { font-size: 13px; color: var(--acct-faint); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__ship {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 12px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--acct-line);
	font-size: 13px;
	color: var(--acct-muted);
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--acct-line);
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__total { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===================
   6. 쿠폰 — 검정 블록 대신 연한 면의 티켓
   =================== */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-subtitle {
	font-size: 15px;
	font-weight: 700;
	color: var(--acct-ink);
	letter-spacing: -0.01em;
	margin: 28px 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--acct-radius-pill);
	background: var(--acct-ink);
	color: var(--acct-white);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-list,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupons__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card {
	display: flex;
	align-items: stretch;
	min-height: 120px;
	background: var(--acct-white);
	border: 1px solid var(--acct-line);
	border-radius: var(--acct-radius);
	overflow: hidden;
}
/* 선택자를 한 단계 더 세운다 — 일부 테마의 `.fs-plugin .fhs-coupon-card__amount { color:#fff }` 가 같은 특이도로 뒤에 실려 흰 글자가 밝은 면 위에 얹혔다(2026-09-30 원장 마이페이지 실측). */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card .fhs-coupon-card__amount,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card .fhs-coupon-card__amount * {
	color: var(--acct-ink);
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card__amount {
	flex: 0 0 132px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 12px;
	background: var(--acct-warm);
	color: var(--acct-ink);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	border-right: 1px dashed var(--acct-line-strong);
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card__info { flex: 1 1 auto; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card__info strong { font-size: 15px; font-weight: 700; color: var(--acct-ink); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card__info p { margin: 0; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-code { font-family: var(--acct-font-en); font-size: 12px; letter-spacing: 0.06em; color: var(--acct-brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-cond { font-size: 13px; color: var(--acct-muted); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-expiry { font-size: 12px; color: var(--acct-faint); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card--expired { opacity: 0.6; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card--expired .fhs-coupon-card__amount,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card--expired .fhs-coupon-card__amount * { color: var(--acct-faint); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-expiry.expired { color: var(--acct-faint); }

/* 회원 모듈 자체 쿠폰 카드(쇼핑이 없는 사이트) — 같은 티켓 문법 */
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card {
	border: 1px solid var(--acct-line);
	border-radius: var(--acct-radius);
	padding: 20px;
	background: var(--acct-white);
}
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card:hover { border-color: var(--acct-ink); }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card__discount { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--acct-ink); margin-bottom: 8px; }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card__info p,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card__min,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card__expire { color: var(--acct-muted); }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card__code { border-top: 1px solid var(--acct-line); }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupon-card__code code { background: var(--acct-warm); border-radius: var(--acct-radius); color: var(--acct-brand-ink); font-family: var(--acct-font-en); }

/* ===================
   7. 적립금 — 대시보드와 같은 검정 면 + 대표색 라벨
   =================== */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-points-balance,
:is(.fluxmember-mypage__content, .fxm-content) .fhs-deposit-balance,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-points__balance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 28px 30px;
	margin: 0 0 24px;
	background: var(--acct-dark);
	background-image: none;
	color: var(--acct-on-dark);
	border: 0;
	border-radius: var(--acct-radius);
}
:is(.fluxmember-mypage__content, .fxm-content) .fhs-points-label,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-points__label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--acct-brand-lite); }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-points-amount,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-points__value { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.02em; color: var(--acct-on-dark); font-variant-numeric: tabular-nums; }
/* 증감 색(초록·주황 인라인)은 +/− 기호가 이미 뜻을 전한다 → 글자 색으로 */
:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td[style*="color"] { color: var(--acct-ink) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td { font-variant-numeric: tabular-nums; }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-text--primary { color: var(--acct-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-text--danger { color: var(--acct-danger); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===================
   8. 페이지 번호
   =================== */
:is(.fluxmember-mypage__content, .fxm-content) .page-numbers,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-pagination a,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	height: auto;
	margin: 24px 2px 0;
	padding: 0 8px;
	color: var(--acct-ink-2);
	text-decoration: none;
	border: 0;
	border-radius: var(--acct-radius);
	background: transparent;
}
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-pagination { gap: 0; }
:is(.fluxmember-mypage__content, .fxm-content) .page-numbers.current,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-pagination__current { background: var(--acct-ink); color: var(--acct-white); font-weight: 700; }
:is(.fluxmember-mypage__content, .fxm-content) a.page-numbers:hover,
body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-pagination a:hover { background: var(--acct-warm); color: var(--acct-ink); }

/* ===================
   9. 반응형
   =================== */
@media (max-width: 768px) {
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__orders { flex-direction: column; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__claims {
		flex-direction: row;
		justify-content: space-between;
		border-left: 0;
		border-top: 1px solid var(--acct-line);
		margin: 0;
		padding: 14px 4px;
	}
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__stat { padding: 18px 4px; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__arrow { display: none; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: 'date badge' 'name total';
		gap: 6px 12px;
		padding: 16px 0;
	}
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order-date { grid-area: date; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order .fhs-badge { grid-area: badge; justify-self: end; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order-name { grid-area: name; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order-total { grid-area: total; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__cards { grid-template-columns: 1fr 1fr; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card { padding: 20px 18px; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links { grid-template-columns: 1fr 1fr; }

	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__claim { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name price' 'qty review'; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__name { grid-area: name; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__price { grid-area: price; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__qty { grid-area: qty; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line .fhs-btn-sm,
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-line__reviewed { grid-area: review; justify-self: end; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__foot { flex-direction: column; align-items: stretch; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-order-card__actions { justify-content: flex-start; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-list,
	body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-coupons__grid { grid-template-columns: 1fr; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card__amount { flex-basis: 104px; font-size: 19px; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-points-balance,
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-deposit-balance,
	body:not(.is-mypage) :is(.fluxmember-mypage__content, .fxm-content) .fluxmember-points__balance { padding: 22px 20px; }
}

@media (max-width: 480px) {
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__stat { padding: 18px 0; min-width: 0; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__label { font-size: 12px; letter-spacing: -0.03em; white-space: nowrap; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card__amount { flex-basis: 92px; padding: 12px 6px; font-size: 17px; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-card__info { padding: 14px 12px; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-coupon-code { font-size: 11px; letter-spacing: 0.02em; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__cards { grid-template-columns: 1fr; }
	:is(.fluxmember-mypage__content, .fxm-content) table:not(.fhs-mypage-table):not(:where(.fbmp *)) { display: block; overflow-x: auto; }
}

/* 적립금·내역 표: 좁은 화면에서는 4칸 표 대신 2줄 행 (날짜·금액 / 내역·잔액) */
@media (max-width: 600px) {
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table,
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table tbody { display: block; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table thead { display: none; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: 'desc amt' 'date bal';
		gap: 4px 12px;
		padding: 16px 0;
		border-bottom: 1px solid var(--acct-line);
	}
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td { display: block; padding: 0; border: 0; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td:nth-child(1) { grid-area: date; font-size: 13px; color: var(--acct-muted); white-space: nowrap; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td:nth-child(2) { grid-area: desc; font-size: 15px; font-weight: 500; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td:nth-child(3) { grid-area: amt; text-align: right; white-space: nowrap; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td:nth-child(4) { grid-area: bal; text-align: right; font-size: 13px; color: var(--acct-muted); white-space: nowrap; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table td:nth-child(4)::before { content: '잔액 '; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-mypage-table { border-top: 1px solid var(--acct-ink); }
}

/* ===================
   10. 모션 줄이기
   =================== */
@media (prefers-reduced-motion: reduce) {
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card,
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a,
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__links a::after,
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__order,
	:is(.fluxmember-mypage__content, .fxm-content) .fluxmember-btn,
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-btn-sm,
	:is(.fluxmember-mypage__content, .fxm-content) .fxm-btn { transition: none; }
	:is(.fluxmember-mypage__content, .fxm-content) .fhs-dash__card:hover { transform: none; }
}

/* 게시판 포인트 합계 라벨 — 검은 면 위에서 브랜드색(어두운 초록·남색)이 흐려 「현재 포인트」가 잘 안 보였다. */
:is(.fluxmember-mypage__content, .fxm-content) .fbmp .fluxboard-my-points__total-label {
	color: var(--acct-on-dark);
	opacity: 0.8;
}
