/* =========================================================
   FluxShop — 마이페이지 쇼핑 화면 모양 (UI·UX 통일 P2, S3b)
   =========================================================
   · 의존: fhc-ui-tokens(--fx-*) · fhc-ui(.fxu-* 부품). 클래스를 지우지 않고 .fx-ui / .fxu-* 를 더해 모양만 바꾼다.
   · 색은 --fx-* 토큰만 쓴다(리터럴 금지). 사용자 콘텐츠 색(상품 이미지 등)은 건드리지 않는다.
   · 로드 위치: Fluxshop_Mypage_Tabs::enqueue_ui() (fluxshop·fhc-mypage-content 뒤)
   ========================================================= */

/* ---------- 0. 공통: 상태 칩 (F5) — 클래스 fhs-badge--{status} 이름 유지, 파스텔 제거 ---------- */
.fx-ui .fhs-badge,
.fhs-account .fhs-badge {
	display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--fx-radius-pill);
	border: 1px solid var(--fx-line-strong); background: transparent; color: var(--fx-ink-2);
	font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.fx-ui .fhs-badge--paid, .fx-ui .fhs-badge--processing, .fx-ui .fhs-badge--shipped, .fx-ui .fhs-badge--delivered,
.fx-ui .fhs-badge--approved, .fx-ui .fhs-badge--requested, .fx-ui .fhs-badge--active {
	background: var(--fx-lime); border-color: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111));
}
.fx-ui .fhs-badge--cancelled, .fx-ui .fhs-badge--refunded, .fx-ui .fhs-badge--partial_refunded,
.fx-ui .fhs-badge--completed, .fx-ui .fhs-badge--done, .fx-ui .fhs-badge--rejected {
	background: var(--fx-ink); border-color: var(--fx-ink); color: var(--fx-on-accent);
}
.fx-ui .fhs-badge--failed, .fx-ui .fhs-badge--payment_failed, .fx-ui .fhs-badge--error {
	background: var(--fx-danger-soft); border-color: var(--fx-danger-soft); color: var(--fx-danger);
}

/* ---------- 1. 쇼핑 대시보드 ---------- */
.fhs-dash.fx-ui { color: var(--fx-ink); font-family: var(--fx-font); }
.fhs-dash .fhs-dash__hello { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--fx-ink); }
.fhs-dash .fhs-dash__hello-sub { font-size: 14px; color: var(--fx-ink-2); }
.fhs-dash .fhs-dash__subtitle { font-size: 13px; font-weight: 700; color: var(--fx-ink-2); margin: 0 0 12px; padding: 0; border: 0; }
.fhs-dash .fhs-dash__subtitle--links { margin-top: 32px; }

/* 주문 처리 현황: 알약 5단계, 숫자가 곧 링크 */
.fhs-dash .fhs-dash__orders { display: block; padding: 20px; overflow: visible; background: var(--fx-surface); border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius); }
.fhs-dash .fhs-dash__flow { display: flex; flex-wrap: wrap; gap: 8px 14px; flex: none; }
.fhs-dash .fhs-dash__stat {
	flex: none; flex-direction: row; gap: 8px; min-width: 0; min-height: 40px; padding: 0 14px; margin: 0;
	background: var(--fx-surface); color: var(--fx-ink-2); text-decoration: none; font-size: 13px; font-weight: 600;
	transition: border-color var(--fx-ease), background var(--fx-ease);
}
.fhs-dash .fhs-dash__stat:hover { border-color: var(--fx-ink); }
.fhs-dash .fhs-dash__stat:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 2px; }
.fhs-dash .fhs-dash__stat .fhs-dash__num { order: 2; font-size: 16px; font-weight: 800; color: var(--fx-ink-3); font-variant-numeric: tabular-nums; }
.fhs-dash .fhs-dash__stat .fhs-dash__num.is-active { color: var(--fx-ink); }
.fhs-dash .fhs-dash__stat .fhs-dash__label { order: 1; font-size: 13px; font-weight: 600; color: inherit; }
.fhs-dash .fhs-dash__stat.is-current { color: var(--fx-ink); }
.fhs-dash .fhs-dash__arrow { display: none; }
.fhs-dash .fhs-dash__claims {
	flex-direction: row; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--fx-line);
}
.fhs-dash .fhs-dash__claim { min-width: 0; min-height: 44px; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-dash .fhs-dash__claim b { color: var(--fx-ink-3); font-variant-numeric: tabular-nums; }
.fhs-dash .fhs-dash__claim b.is-active { color: var(--fx-ink); }

/* 혜택 카드: hero 1(적립금) + 작은 카드 */
.fhs-dash .fhs-dash__cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.fhs-dash .fhs-dash__cards .fxu-card--hero { grid-column: 1 / -1; }
.fhs-dash .fhs-dash__card { background: var(--fx-surface); padding: 18px 20px; gap: 6px; text-decoration: none; transform: none; transition: border-color var(--fx-ease); }
.fhs-dash .fhs-dash__card:hover { border-color: var(--fx-ink); transform: none; }
.fhs-dash .fhs-dash__card:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 2px; }
.fhs-dash .fhs-dash__card-label { font-size: 13px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-dash .fhs-dash__card-value { font-size: 24px; font-weight: 800; color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fhs-dash .fhs-dash__card-value em { font-size: 14px; font-weight: 600; color: var(--fx-ink-3); }
.fhs-dash .fhs-dash__card.fxu-card--hero { background: var(--fx-ink); border-color: var(--fx-ink); box-shadow: none; padding: 20px 24px; }
.fhs-dash .fhs-dash__card.fxu-card--hero .fhs-dash__card-label { color: var(--fx-lime-lite, var(--fh-accent-lite, #c8f05a)); }
.fhs-dash .fhs-dash__card.fxu-card--hero .fhs-dash__card-value { font-size: 32px; color: var(--fx-on-accent); }
.fhs-dash .fhs-dash__card.fxu-card--hero .fhs-dash__card-value em { color: var(--fx-on-accent); }

/* 최근 주문 */
.fhs-dash .fhs-dash__more { font-size: 13px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-dash .fhs-dash__recent-list { padding: 4px 20px; background: var(--fx-surface); border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius); }
.fhs-dash .fhs-dash__order { flex-wrap: wrap; row-gap: 4px; border-top: 1px solid var(--fx-line); color: var(--fx-ink); }
.fhs-dash .fhs-dash__order:first-child { border-top: 0; }
.fhs-dash .fhs-dash__order-name { flex: 1 1 140px; }
.fhs-dash .fhs-dash__order-date { color: var(--fx-ink-3); }
.fhs-dash .fhs-dash__order-qty { color: var(--fx-ink-3); }
.fhs-dash .fhs-dash__order-total { font-variant-numeric: tabular-nums; font-weight: 700; }
.fhs-dash .fhs-dash__order:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 2px; }
.fhs-dash .fhs-dash__empty { background: var(--fx-surface); border: 1px dashed var(--fx-line-strong); border-radius: var(--fx-radius-lg); padding: 40px 24px; color: var(--fx-ink-2); }

/* 바로가기: 선 아이콘 + 글자, 카드 한 판 안의 줄 */
.fhs-dash .fhs-dash__links { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fhs-dash .fhs-dash__links a {
	min-height: 44px; flex-direction: row; justify-content: center; gap: 8px; padding: 0 12px;
	border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-pill); background: var(--fx-surface);
	color: var(--fx-ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color var(--fx-ease);
}
.fhs-dash .fhs-dash__links a::after { display: none; }
.fhs-dash .fhs-dash__links a:hover { border-color: var(--fx-ink); color: var(--fx-ink); }
.fhs-dash .fhs-dash__links a:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 2px; }
.fhs-dash .fhs-dash__links .fxu-ico { color: var(--fx-ink-2); flex: none; }

@media (max-width: 768px) {
	.fhs-dash .fhs-dash__order-name { flex-basis: calc(100% - 100px); }
}

/* ---------- 2. 주문 내역·상세·시트 공용 변수 (--fhs-od-* 를 토큰에 잇는다) ---------- */
.fhs-od, .fhs-oc, .fhs-sheet, .fhs-pts, .fhs-track-modal {
	--fhs-od-ink: var(--fx-ink);
	--fhs-od-sub: var(--fx-ink-2);
	--fhs-od-line: var(--fx-line);
	--fhs-od-soft: var(--fx-sunken);
	--fhs-od-card: var(--fx-surface);
	--fhs-od-accent: var(--fx-accent);
	--fhs-od-accent-ink: var(--fx-ink);
	--fhs-od-accent-soft: var(--fx-sunken);
	--fhs-od-minus: var(--fx-danger);
	--fhs-od-radius: var(--fx-radius);
	--fhs-track-accent: var(--fx-ink);
	font-family: var(--fx-font);
}

/* 버튼 F1 — 마크업은 그대로 두고 .fhs-od-btn 을 키트 알약 버튼 모양으로 */
.fhs-od-btn {
	min-height: 40px; padding: 0 20px; border: 1px solid var(--fx-ink); border-radius: var(--fx-radius-pill);
	background: var(--fx-surface); color: var(--fx-ink); font-family: inherit; font-size: 14px; font-weight: 700;
	transition: background var(--fx-ease), border-color var(--fx-ease), transform var(--fx-ease);
}
.fhs-od-btn:hover { background: var(--fx-canvas); }
.fhs-od-btn:active { transform: scale(.98); }
.fhs-od-btn:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 2px; }
.fhs-od-btn--primary, .fhs-od-btn--solid { border-color: var(--fx-ink); background: var(--fx-ink); color: var(--fx-on-accent); font-size: 15px; filter: none; }
.fhs-od-btn--primary:hover, .fhs-od-btn--solid:hover { background: var(--fx-accent-hover); filter: none; }
.fhs-od-btn--solid { min-height: 52px; font-size: 16px; }
.fhs-od-btn--sm { min-height: 44px; padding: 0 14px; font-size: 13px; }
.fhs-od-btn:disabled, .fhs-od-btn[disabled] { opacity: 1; background: var(--fx-sunken); border-color: var(--fx-line-strong); color: var(--fx-ink-3); }
.fhs-od__grid .fhs-od-btn { background: var(--fx-surface); border-color: var(--fx-line-strong); }
.fhs-od__grid .fhs-od-btn:hover { background: var(--fx-canvas); border-color: var(--fx-ink); }
.fhs-track-inquiry { border-color: var(--fx-ink); color: var(--fx-ink); }
.fhs-od-copy.fxu-btn { min-height: 28px; padding: 0 10px; font-size: 12px; }
.fhs-od-copy.is-copied { background: var(--fx-lime); border-color: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); text-decoration: none; }

/* 주문 카드(F5 칩) */
.fhs-oc.fxu-card { padding: 20px; margin-bottom: 12px; }
.fhs-oc__status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fhs-oc__status > strong.fhs-badge { font-weight: 600; }
.fhs-oc__total strong, .fhs-od__item-price, .fhs-od__sum strong { font-variant-numeric: tabular-nums; }
.fhs-od__thumb { border-radius: var(--fx-radius-xs); background: var(--fx-sunken); }
.fhs-od__opt::before { border-color: var(--fx-line-strong); color: var(--fx-ink-3); }
.fhs-od__item-claim { color: var(--fx-ink-2); font-weight: 600; }
.fhs-od__item-claim.is-open { color: var(--fx-ink); }
.fhs-od__item-claim.is-open::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--fx-lime-2); vertical-align: middle; }

/* 주문 상세: 위 흐름(F4), 카드, 금액 요약(.fxu-sum) */
.fhs-od__flow { margin: 4px 0 8px; }
.fhs-od__flow .fxu-flow__step { cursor: default; }
.fhs-od__title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.fhs-od__card.fxu-card { padding: 20px; box-shadow: none; }
.fhs-od__seller { border-bottom-color: var(--fx-line); }
.fhs-od__item + .fhs-od__item { border-top: 1px solid var(--fx-line); }
.fhs-od__sum { font-weight: 700; }
.fhs-od__rows.fxu-sum { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--fx-line); border-left: 0; }
.fhs-od__rows .fxu-sum__row { min-height: 32px; color: var(--fx-ink-2); }
.fhs-od__rows .fxu-sum__row.is-minus dd { color: var(--fx-ink-2); }
.fhs-od__method.fxu-sum__row { margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 600; min-height: 36px; }
.fhs-od__method.fxu-sum__row--total { margin-top: 8px; padding: 0 12px; border-top: 1px solid var(--fx-ink); background: var(--fx-lime-row); font-size: 16px; font-weight: 800; }
.fhs-od__method.fxu-sum__row--total strong { font-size: 20px; }
.fhs-od__method.is-minus { color: var(--fx-ink-2); }
.fhs-od__reviewed { color: var(--fx-ink-3); }

/* 시트 — 모바일 하단 시트(.fxu-sheet), 데스크탑은 가운데 모달 */
.fhs-sheet .fhs-sheet__panel.fxu-sheet { max-width: 100%; padding: 0; border-radius: var(--fx-radius-lg) var(--fx-radius-lg) 0 0; box-shadow: var(--fx-shadow-pop); }
.fhs-sheet .fhs-sheet__panel.fxu-sheet::before { content: ""; flex: none; width: 36px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--fx-line-strong); }
.fhs-sheet__close { color: var(--fx-ink-2); }
.fhs-sheet__close:hover { color: var(--fx-ink); }
.fhs-sheet__title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.fhs-sheet__notice, .fhs-pts__rule, .fhs-sheet__lead { border-radius: var(--fx-radius-sm); background: var(--fx-sunken); }
.fhs-sheet__lead .fhs-sheet__lead-title { color: var(--fx-ink); }
.fhs-sheet__warn { border-left-color: var(--fx-danger); background: var(--fx-danger-soft); color: var(--fx-danger); border-radius: 0 var(--fx-radius-xs) var(--fx-radius-xs) 0; }
.fhs-sheet__err { color: var(--fx-danger); }
.fhs-sheet .fhs-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .fhs-sheet .fhs-field select, .fhs-sheet .fhs-field textarea {
	display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-sm);
	background: var(--fx-surface); color: var(--fx-ink); font: inherit; font-size: 14px; font-weight: 400; box-sizing: border-box;
}
.fhs-sheet .fhs-field input:focus, .fhs-sheet .fhs-field select:focus, .fhs-sheet .fhs-field textarea:focus { outline: 0; border-color: var(--fx-ink); box-shadow: var(--fx-focus); }
.fhs-sheet .fhs-field [aria-invalid="true"] { border-color: var(--fx-danger); }
.fhs-cs-reason input, .fhs-cs-all input, .fhs-cs-item-input { accent-color: var(--fx-ink); }
.fhs-cs-reason:has(input:checked) { background: var(--fx-lime-soft); border-radius: var(--fx-radius-sm); }
.fhs-cs-reason:focus-within { outline-color: var(--fx-ink); }
.fhs-cs-item.is-disabled { opacity: .6; }
.fhs-cs-item__state { display: inline-flex; align-self: flex-start; padding: 2px 8px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-pill); font-size: 12px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-cs-item__state.is-open { background: var(--fx-lime); border-color: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); }
.fhs-cs-refund.fxu-sum { margin: 0; }
.fhs-sheet .fhs-od__method.fxu-sum__row--total { margin-top: 4px; }
.fhs-cs-photo-add { border-style: dashed; }
.fhs-sheet__link { color: var(--fx-ink); }
.fhs-sheet__more div, .fhs-sheet__check, .fhs-sheet__check li { color: var(--fx-ink-2); }
.fhs-sheet__check-title { color: var(--fx-ink); }
.fhs-sheet__pt strong { color: var(--fx-ink); }

/* 배송 조회 타임라인(F4, 세로) */
.fhs-tracking-timeline__item { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--fx-line); }
.fhs-tracking-timeline__item::before { left: 3px; top: 18px; width: 9px; height: 9px; background: var(--fx-line-strong); box-shadow: 0 0 0 3px var(--fx-surface); }
.fhs-tracking-timeline__item:first-child::before { background: var(--fx-lime); box-shadow: 0 0 0 2px var(--fx-ink), 0 0 0 4px var(--fx-surface); }
.fhs-tracking-timeline__item::after { left: 7px; top: 28px; bottom: -12px; background: var(--fx-line-strong); }
.fhs-tracking-timeline__time { color: var(--fx-ink-3); }
.fhs-tracking-timeline__where, .fhs-tracking-timeline__kind { color: var(--fx-ink); }
.fhs-track-empty { background: var(--fx-surface); border: 1px dashed var(--fx-line-strong); border-radius: var(--fx-radius-lg); color: var(--fx-ink-2); }
.fhs-track-copy { border-color: var(--fx-line-strong); border-radius: var(--fx-radius-pill); color: var(--fx-ink); background: var(--fx-surface); }
.fhs-track-copy:hover { background: var(--fx-canvas); border-color: var(--fx-ink); }
.fhs-track-copy.is-copied { background: var(--fx-lime); border-color: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); }
.fhs-track-prod { border-color: var(--fx-line-strong); border-radius: var(--fx-radius-sm); }
.fhs-tracking-timeline--folded .fhs-tracking-timeline__where { color: var(--fx-ink-2); }

@media (min-width: 768px) {
	.fhs-sheet .fhs-sheet__panel.fxu-sheet { width: 480px; max-width: 92vw; border-radius: var(--fx-radius-lg); }
}

/* ---------- 3. 쿠폰 ---------- */
.fhs-cp.fx-ui { font-family: var(--fx-font); color: var(--fx-ink); }
.fhs-cp__top { border-bottom-color: var(--fx-line); }
.fhs-cp__tab { color: var(--fx-ink-2); font-family: inherit; }
.fhs-cp__tab.is-active { color: var(--fx-ink); font-weight: 700; }
.fhs-cp__tab.is-active::after { height: 3px; background: var(--fx-lime); box-shadow: 0 1px 0 var(--fx-ink); }
.fhs-cp__tab:focus-visible, .fhs-cp__chip:focus-visible, .fhs-cp__scope:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 2px; }
.fhs-cp__search input { border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-pill); background: var(--fx-surface); padding: 0 18px; font-family: inherit; }
.fhs-cp__search input:focus-visible { outline: 0; border-color: var(--fx-ink); box-shadow: var(--fx-focus); }
.fhs-cp__chip.fxu-chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-pill); background: var(--fx-surface); color: var(--fx-ink-2); font-size: 13px; font-weight: 600; }
.fhs-cp__chip.fxu-chip.is-active { border: 1px solid var(--fx-lime); background: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); padding: 0 12px; }
@media (pointer: coarse) { .fhs-cp__chip.fxu-chip { min-height: 44px; } }
.fhs-cp__count { color: var(--fx-ink-2); }
.fhs-cp__card.fxu-card { border-radius: var(--fx-radius); background: var(--fx-surface); border: 1px solid var(--fx-line-strong); box-shadow: none; }
.fhs-cp__head { border-bottom: 1px dashed var(--fx-line-strong); }
.fhs-cp__amount { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fhs-cp__tag { border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-pill); background: transparent; color: var(--fx-ink-2); font-weight: 600; padding: 2px 8px; }
.fhs-cp__stack { color: var(--fx-ink); font-weight: 700; }
.fhs-cp__cond, .fhs-cp__when { color: var(--fx-ink-2); }
.fhs-cp__when.is-soon { color: var(--fx-ink); font-weight: 700; background: var(--fx-lime-row); padding: 0 6px; border-radius: var(--fx-radius-xs); }
.fhs-cp__scope { color: var(--fx-ink); }
.fhs-cp__scope.is-all { color: var(--fx-ink-3); }
.fhs-cp__head .fhs-od-btn.is-done, .fhs-cp__head .fxu-btn.is-done { background: var(--fx-lime); border-color: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); }
.fhs-cp__card.is-used { opacity: .6; }
.fhs-cp__empty { color: var(--fx-ink-2); }
.fhs-cp__past { border-top-color: var(--fx-line); }
.fhs-cp .fxu-btn.fhs-od-btn { min-height: 44px; }
.fhs-cp .fxu-btn .fxu-ico { margin-right: 4px; }
.fhs-sheet.fx-ui .fhs-sheet__foot--split .fhs-od-btn { min-height: 48px; }

/* ---------- 4. 적립금(잔액 큰 숫자 + 내역) ---------- */
.fhs-pts.fx-ui { font-family: var(--fx-font); }
.fhs-pts__hero.fxu-card--hero { margin: 4px 0 16px; padding: 24px 28px; border: 1px solid var(--fx-line-strong); background: var(--fx-surface); box-shadow: none; }
.fhs-pts__label { color: var(--fx-ink-2); font-size: 13px; }
.fhs-pts__info { border-color: var(--fx-line-strong); color: var(--fx-ink-2); }
.fhs-pts__balance { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.fhs-pts__balance span { font-size: 18px; font-weight: 700; color: var(--fx-ink-2); }
.fhs-pts__sub { padding-top: 12px; border-top: 1px solid var(--fx-line); }
.fhs-pts__sub dt { color: var(--fx-ink-2); font-size: 14px; }
.fhs-pts__sub dd { font-weight: 700; }
.fhs-pts__tabs { gap: 8px; border-bottom: 0; margin: 0 0 12px; flex-wrap: wrap; overflow: visible; }
.fhs-pts__tab.fxu-chip { min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--fx-ink-2); text-decoration: none; }
.fhs-pts__tab.fxu-chip.is-active { color: var(--fx-on-lime, var(--fh-accent-on, #111111)); background: var(--fx-lime); border-color: var(--fx-lime); font-weight: 700; }
.fhs-pts__tab.fxu-chip.is-active::after { display: none; }
@media (pointer: coarse) { .fhs-pts__tab.fxu-chip { min-height: 44px; } }
.fhs-pts__list.fxu-card { padding: 0 20px; box-shadow: none; }
.fhs-pts__row { padding: 16px 0; border-bottom: 1px solid var(--fx-line); }
.fhs-pts__row:last-child { border-bottom: 0; }
.fhs-pts__row-link { margin: -16px 0; padding: 16px 0; }
.fhs-pts__row-desc { color: var(--fx-ink-2); }
.fhs-pts__row-when { color: var(--fx-ink-3); }
.fhs-pts__amt { color: var(--fx-ink-2); }
.fhs-pts__amt.is-plus { color: var(--fx-ink); font-weight: 800; }
.fhs-pts__pager a { border-radius: var(--fx-radius-xs); color: var(--fx-ink-2); }
.fhs-pts__pager a.is-active { background: var(--fx-ink); color: var(--fx-on-accent); }
.fhs-pts__empty.fxu-empty p { color: var(--fx-ink-2); }

/* ---------- 5. 취소·교환·반품 내역 ---------- */
.fhs-cl.fx-ui { font-family: var(--fx-font); }
.fhs-cl__item.fxu-card { padding: 20px; margin-bottom: 12px; box-shadow: none; }
.fhs-cl__state.fxu-badge { font-size: 12px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-cl__state.is-rejected { color: var(--fx-danger); }
.fhs-cl__meta { color: var(--fx-ink-3); }
.fhs-cl__steps.fxu-flow { display: flex; margin: 14px 0 6px; padding: 0; }
.fhs-cl__steps .fxu-flow__step { padding: 0 12px; text-align: left; font-size: 13px; color: var(--fx-ink-3); }
.fhs-cl__steps .fxu-flow__step::before { display: none; }
.fhs-cl__steps .fxu-flow__step.is-done { border-color: var(--fx-ink); color: var(--fx-ink); background: var(--fx-surface); }
.fhs-cl__steps .fxu-flow__step.is-current { background: var(--fx-lime); border-color: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); }
.fhs-cl__refund { color: var(--fx-ink-2); }
.fhs-cl__refund strong { color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fhs-cl__note { color: var(--fx-danger); background: var(--fx-danger-soft); padding: 8px 12px; border-radius: var(--fx-radius-xs); }

/* ---------- 6. 표·빈 상태(위시리스트·다운로드·주문 표·클레임 표) ---------- */
.fx-ui .fxu-table { font-family: var(--fx-font); }
.fx-ui .fluxshop-empty.fxu-empty { grid-column: 1 / -1; }
.fx-ui .fxu-empty .fxu-btn, .fx-ui .fxu-empty .fhs-od-btn { margin-top: 4px; }
.fluxshop-wishlist .fhs-wishlist-actions .fxu-btn { min-height: 32px; }

/* ---------- 7. 정기구독 관리 ---------- */
.fluxshop-my-subscription.fx-ui { font-family: var(--fx-font); color: var(--fx-ink); }
.fhs-sub-card.fxu-card { margin-bottom: 12px; padding: 20px; box-shadow: none; background: var(--fx-surface); border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius); }
.fhs-sub-card--active.fxu-card { border-color: var(--fx-ink); }
.fhs-sub-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fhs-sub-card__header h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--fx-ink); }
.fhs-sub-card__body p { margin: 0 0 6px; font-size: 14px; color: var(--fx-ink-2); }
.fhs-sub-card__body strong { color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fhs-sub-card .fhs-sub-term { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-pill); font-size: 12px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-sub-card__footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fx-line); }
.fluxshop-my-subscription .fxu-btn.fluxshop-btn { min-height: 32px; border-radius: var(--fx-radius-pill); }
.fluxshop-my-subscription .fxu-btn--ghost { background: var(--fx-surface); border: 1px solid var(--fx-ink); color: var(--fx-ink); }
.fluxshop-my-subscription .fxu-btn--danger { background: var(--fx-danger); border-color: var(--fx-danger); color: var(--fx-on-accent); }
.fx-ui .fhs-badge--expired, .fx-ui .fhs-badge--cancelled { background: var(--fx-ink); border-color: var(--fx-ink); color: var(--fx-on-accent); }
.fx-ui .fhs-badge--paused { background: transparent; }

/* 구독 모달 3개: 모바일 하단 시트, 데스크탑 가운데 (열고 닫기는 JS 가 display 로) */
.fhs-modal--sub.fx-ui { background: color-mix(in srgb, var(--fx-ink) 45%, transparent); align-items: flex-end; padding: 0; }
.fhs-modal--sub.fx-ui .fhs-modal__body.fxu-sheet { width: 100%; max-width: 480px; margin: 0 auto; max-height: 90vh; overflow-y: auto; padding: 8px 20px 24px; border-radius: var(--fx-radius-lg) var(--fx-radius-lg) 0 0; background: var(--fx-surface); box-shadow: var(--fx-shadow-pop); box-sizing: border-box; }
.fhs-modal--sub.fx-ui h3 { font-size: 18px; font-weight: 800; color: var(--fx-ink); }
.fhs-modal--sub.fx-ui .description, .fhs-extend-bank__note { color: var(--fx-ink-2); }
.fhs-modal--sub.fx-ui .fhs-modal__actions { display: flex; gap: 8px; }
.fhs-modal--sub.fx-ui .fhs-modal__actions .fxu-btn { flex: 1; min-height: 48px; }
.fhs-extend-method, .fhs-autorenew-pg { border: 0; margin: 0 0 12px; padding: 0; }
.fhs-extend-method legend, .fhs-autorenew-pg legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--fx-ink-2); }
.fhs-inline-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: 16px; font-size: 14px; }
.fhs-inline-opt input { accent-color: var(--fx-ink); }
.fhs-extend-bank__acct { margin: 8px 0 4px; }
.fhs-extend-bank__note { margin: 4px 0 0; }
.fhs-modal--sub.fx-ui .fhs-field input[type=text] { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-sm); font: inherit; box-sizing: border-box; }
.fhs-modal--sub.fx-ui .fhs-field input[type=text]:focus { outline: 0; border-color: var(--fx-ink); box-shadow: var(--fx-focus); }
.fhs-cancel-reasons__item input { accent-color: var(--fx-ink); }
@media (min-width: 768px) {
	.fhs-modal--sub.fx-ui { align-items: center; padding: 16px; }
	.fhs-modal--sub.fx-ui .fhs-modal__body.fxu-sheet { border-radius: var(--fx-radius-lg); padding: 24px; }
	.fhs-modal--sub.fx-ui .fhs-modal__body.fxu-sheet::before { display: none; }
}

/* b3:start 결제 수단 화면 · 자동 연장 카드 고르기 (색은 토큰만, 그림자 없음) */
.fhs-pm.fx-ui { font-family: var(--fx-font); color: var(--fx-ink); }
.fhs-pm__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.fhs-pm__head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--fx-ink); }
.fhs-pm__help { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--fx-ink-2); }
.fhs-pm-row { flex-wrap: wrap; row-gap: 8px; }
.fhs-pm-row__main { flex: 1 1 100%; min-width: 0; }
.fhs-pm-row__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }
.fhs-pm-row__num { font-variant-numeric: tabular-nums; color: var(--fx-ink-2); }
.fhs-pm-row .fhs-pm-row__desc { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--fx-ink-2); }
.fhs-pm-row__acts { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
@media (min-width: 768px) {
	.fhs-pm-row__main { flex: 1 1 0; }
	.fhs-pm-row__acts { flex-wrap: nowrap; margin-left: auto; }
}
.fhs-pm .fxu-btn, .fhs-ar-cards .fxu-btn { min-height: 44px; border-radius: var(--fx-radius-pill); }
.fhs-pm .fxu-btn--ghost { background: var(--fx-surface); border: 1px solid var(--fx-ink); color: var(--fx-ink); }
.fhs-ar-cards { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.fhs-ar-cards legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--fx-ink-2); }
.fhs-ar-card { min-width: 0; }
.fhs-ar-card__label { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.fhs-ar-cards .fxu-btn { justify-self: start; }
.fluxshop-my-subscription .fhs-ar-cards .fxu-btn.fhs-ar-add { min-height: 44px; }
.fhs-ar-nocards { margin: 0 0 12px; }
.fhs-ar-agree { margin: 0 0 4px; }
.fhs-ar-agree .fxu-check { align-items: flex-start; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--fx-ink-2); }
.fhs-ar-agree .fxu-check__box { margin-top: 2px; }
/* b3:end */

/* ---------- 8. 예치금 ---------- */
.fhs-dep.fx-ui { font-family: var(--fx-font); }
.fhs-dep .fhs-points-balance.fxu-card--hero { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 16px; padding: 24px 28px; border: 1px solid var(--fx-line-strong); background: var(--fx-surface); box-shadow: none; }
.fhs-dep .fhs-points-label { font-size: 13px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-dep .fhs-points-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fx-ink); }
.fhs-dep__table { margin-top: 0; }
.fhs-dep__amt.is-plus { color: var(--fx-ink); font-weight: 800; }
.fhs-dep__amt.is-minus { color: var(--fx-ink-2); font-weight: 600; }
.fhs-dep .fxu-table { background: var(--fx-surface); border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius); overflow: hidden; }

/* ---------- 9. 내 리뷰·내 문의 ---------- */
.fhs-review-item.fxu-card, .fhs-myqna-item.fxu-card { margin-bottom: 12px; padding: 18px 20px; list-style: none; box-shadow: none; }
.fhs-review-item .fhs-stars { color: var(--fx-ink); letter-spacing: 1px; }
.fhs-review-product, .fhs-myqna-item__product { color: var(--fx-ink); font-weight: 700; }
.fhs-review-date, .fhs-myqna-item__date { color: var(--fx-ink-3); font-size: 12px; }
.fhs-review-reply, .fhs-myqna-item__a { margin-top: 12px; padding: 12px 14px; border-radius: var(--fx-radius-sm); background: var(--fx-sunken); color: var(--fx-ink-2); }
.fhs-review-reply strong, .fhs-myqna-item__a strong { color: var(--fx-ink); }
.fhs-myqna-item__lock { font-size: 12px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-myqna-list { list-style: none; margin: 0; padding: 0; }
.fx-ui .fhs-qna-badge.fxu-badge { font-size: 12px; }
.fx-ui .fhs-qna-badge.fxu-badge--active { background: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); }

/* ---------- 10. 배송지 관리·세금계산서(증빙) ---------- */
.fhs-addr-card { padding: 16px 18px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius); background: var(--fx-surface); }
.fhs-addr-card.is-default { border-color: var(--fx-ink); }
.fhs-addr-card__label { border-radius: var(--fx-radius-pill); background: var(--fx-sunken); color: var(--fx-ink-2); padding: 1px 8px; }
.fhs-addr-card__badge.fxu-badge { padding: 2px 8px; font-size: 11px; font-weight: 700; background: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); }
.fhs-addr-card__phone, .fhs-addr-card__addr { color: var(--fx-ink-2); }
.fhs-addr-card__actions button.fxu-btn { min-height: 32px; padding: 0 12px; border: 1px solid var(--fx-ink); border-radius: var(--fx-radius-pill); background: var(--fx-surface); color: var(--fx-ink); font-size: 13px; font-weight: 700; }
.fhs-addr-card__actions button.fxu-btn:hover { background: var(--fx-canvas); border-color: var(--fx-ink); }
.fhs-addr-add-toggle { margin-top: 14px; }
.fhs-addr-form.fxu-card { margin-top: 16px; padding: 20px; box-shadow: none; }
.fhs-addr-form[hidden] { display: none; }
.fhs-addr-form .fhs-form-row { margin-bottom: 14px; }
.fhs-addr-form .fhs-form-row > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--fx-ink-2); }
.fhs-addr-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]), .fhs-invoice-profile-form input:not([type=hidden]):not([type=submit]):not([type=button]) {
	display: block; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius-sm); background: var(--fx-surface); color: var(--fx-ink); font: inherit; font-size: 14px; box-sizing: border-box;
}
.fhs-addr-form input:focus, .fhs-invoice-profile-form input:focus { outline: 0; border-color: var(--fx-ink); box-shadow: var(--fx-focus); }
.fhs-addr-form .fhs-form-row button { margin-right: 8px; }
.fhs-invoice-profile-form label { color: var(--fx-ink-2); font-weight: 600; }
.fhs-invoice-profile-form .fxu-btn { height: auto; min-height: 44px; margin-top: 6px; padding: 0 28px; border: 0; border-radius: var(--fx-radius-pill); background: var(--fx-ink); color: var(--fx-on-accent); font-weight: 700; }
.fhs-invoice-profile-form .fxu-btn:hover { background: var(--fx-accent-hover); }
.fhs-invoice-list { margin-top: 20px; }
.fhs-invoice-list .fxu-table { border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius); overflow: hidden; }

/* 카드 테두리·반경은 마이페이지 틀 CSS(mypage-content)가 지우므로 여기서 다시 정한다 */
.fhs-oc.fxu-card, .fhs-od__card.fxu-card, .fhs-cl__item.fxu-card, .fhs-sub-card.fxu-card {
	border: 1px solid var(--fx-line-strong); border-radius: var(--fx-radius); background: var(--fx-surface); box-shadow: none;
}
.fhs-oc__total { white-space: nowrap; }
.fhs-oc__foot { flex-wrap: wrap; }
.fhs-addr-book .fhs-btn.fxu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border: 1px solid var(--fx-ink); border-radius: var(--fx-radius-pill); background: var(--fx-ink); color: var(--fx-on-accent); font-size: 14px; font-weight: 700; cursor: pointer; }
.fhs-addr-book .fhs-btn.fxu-btn--ghost { background: var(--fx-surface); color: var(--fx-ink); }
.fhs-addr-book .fhs-btn.fxu-btn--ghost:hover { background: var(--fx-canvas); }
.fluxshop-my-subscription .fluxshop-btn.fxu-btn.fxu-btn--danger, .fhs-modal--sub.fx-ui .fluxshop-btn.fxu-btn.fxu-btn--danger { background: var(--fx-danger); border-color: var(--fx-danger); color: var(--fx-on-accent); }
.fhs-modal--sub.fx-ui .fluxshop-btn.fxu-btn--ghost { background: var(--fx-surface); border: 1px solid var(--fx-ink); color: var(--fx-ink); }
.fhs-modal--sub.fx-ui .fluxshop-btn.fxu-btn:not(.fxu-btn--ghost):not(.fxu-btn--danger) { background: var(--fx-ink); border: 1px solid var(--fx-ink); color: var(--fx-on-accent); }
.fhs-modal--sub.fx-ui .fluxshop-btn.fxu-btn[disabled] { background: var(--fx-sunken); border-color: var(--fx-line-strong); color: var(--fx-ink-3); }

/* ---------- 11. 배송 조회(목록·모달) ---------- */
.fluxshop-order-tracking.fx-ui { font-family: var(--fx-font); }
.fhs-tracking-card.fxu-card { padding: 20px; margin-bottom: 12px; box-shadow: none; border-radius: var(--fx-radius); }
.fhs-tracking-card p { margin: 0 0 8px; font-size: 14px; color: var(--fx-ink-2); }
.fhs-tracking-card .fhs-order-num { color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fhs-tracking-card .fxu-btn { margin-left: 8px; min-height: 32px; border: 1px solid var(--fx-ink); border-radius: var(--fx-radius-pill); background: var(--fx-surface); color: var(--fx-ink); font-size: 13px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; padding: 0 14px; }
.fhs-track-open.fxu-btn { min-height: 32px; border: 1px solid var(--fx-ink); border-radius: var(--fx-radius-pill); background: var(--fx-surface); color: var(--fx-ink); font-size: 13px; font-weight: 700; padding: 0 14px; cursor: pointer; }
.fhs-track-modal__panel.fxu-sheet { border-radius: var(--fx-radius-lg) var(--fx-radius-lg) 0 0; box-shadow: var(--fx-shadow-pop); }
.fhs-track-modal__close { color: var(--fx-ink-2); }
.fhs-track-confirm.fxu-btn { width: 100%; }
@media (min-width: 768px) { .fhs-track-modal__panel.fxu-sheet { border-radius: var(--fx-radius-lg); } }

/* F3a: 좁은 화면에서 상태 흐름이 두 줄로 꺾여 연결선이 매달리지 않게 —
   주문 상세(4단계)는 한 줄에 맞추고, 숫자가 붙는 대시보드(4칸)는 꺾이되 연결선을 숨긴다 */
@media (max-width: 480px) {
	.fhs-od__flow.fxu-flow { flex-wrap: nowrap; row-gap: 0; }
	.fhs-od__flow .fxu-flow__step { flex: 0 1 auto; min-width: 0; gap: 4px; padding: 0 8px; margin-right: 10px; font-size: 12px; white-space: nowrap; }
	.fhs-od__flow .fxu-flow__step::after { width: 10px; }
	.fhs-od__flow .fxu-flow__step:last-child { margin-right: 0; }
	.fhs-dash .fhs-dash__flow.fxu-flow { flex-wrap: wrap; gap: 8px; }
	.fhs-dash .fhs-dash__stat.fxu-flow__step { margin-right: 0; }
	.fhs-dash .fhs-dash__stat.fxu-flow__step::after { display: none; }
	.fhs-dash .fhs-dash__orders { padding: 16px; }
}
@media (max-width: 359px) {
	.fhs-od__flow.fxu-flow { flex-wrap: wrap; row-gap: 8px; }
	.fhs-od__flow .fxu-flow__step::after { display: none; }
	.fhs-od__flow .fxu-flow__step { margin-right: 0; }
	.fhs-od__flow.fxu-flow { column-gap: 8px; }
}

/* F3a: 대시보드 최근 주문 칩 — fluxmember 의 `.fhs-dash__order .fhs-badge` 투명 규칙에 눌려 상태 색이 안 나오던 것을 같은 상태 색으로 */
.fhs-dash.fx-ui .fhs-dash__order .fhs-badge--paid, .fhs-dash.fx-ui .fhs-dash__order .fhs-badge--processing, .fhs-dash.fx-ui .fhs-dash__order .fhs-badge--shipped,
.fhs-dash.fx-ui .fhs-dash__order .fhs-badge--delivered, .fhs-dash.fx-ui .fhs-dash__order .fhs-badge--active { background: var(--fx-lime); border-color: var(--fx-lime); color: var(--fx-on-lime, var(--fh-accent-on, #111111)); }
.fhs-dash.fx-ui .fhs-dash__order .fhs-badge--cancelled, .fhs-dash.fx-ui .fhs-dash__order .fhs-badge--refunded, .fhs-dash.fx-ui .fhs-dash__order .fhs-badge--completed { background: var(--fx-ink); border-color: var(--fx-ink); color: var(--fx-on-accent); }
.fhs-dash.fx-ui .fhs-dash__order .fhs-badge--failed, .fhs-dash.fx-ui .fhs-dash__order .fhs-badge--payment_failed { background: var(--fx-danger-soft); border-color: var(--fx-danger-soft); color: var(--fx-danger); }

/* 1.36.1 — 대시보드 숫자 링크도 누르는 면 44px */
.fhs-dash .fhs-dash__stat { min-height: 44px; box-sizing: border-box; }