/* ===================
   FluxHub 마이페이지 "대시보드" 요약 패널 (탭 병합, 1.2.0)
   ------------------------------------------------------------
   결함 수정(2026-09-01): 처음에 대시보드(main.css) 전용 다크 토큰(flux 접두사)을
   썼는데, /mypage/ 는 page-plugin.php 템플릿이라 fluxhub_is_marketing_page()가
   site.css(소비자용 라이트)를 로드하고 main.css 는 아예 로드하지 않는다
   (테마 functions.php 261~380행). flux 접두사 토큰이 미정의라 var()의 어두운 리터럴
   폴백이 그대로 그려져 짙은 남색 패널 위에 회색 글자가 거의 안 보였다.
   site.css 가 실제로 정의하는 라이트 토큰(--fs-*)으로 전부 교체하고, 그
   토큰마저 없는 극단적 상황을 대비해 리터럴 폴백도 같은 라이트 값을 쓴다.

   대비 실측(WCAG 2.1 상대휘도 공식, 눈대중 아님):
     --fs-ink(#000000)   / --fs-bg(#ffffff)      = 21.00:1
     --fs-ink-2(#5d5f6d) / --fs-bg(#ffffff)      =  6.32:1
     --fs-ink-2(#5d5f6d) / --fs-bg-soft(#f5f5f5) =  5.80:1
     --fs-accent(#047857)/ --fs-bg(#ffffff)      =  5.48:1
     흰 글자(#ffffff)     / --fs-accent(#047857)  =  5.48:1
   전부 AA(4.5:1) 이상. --fs-ink-3(#727582)는 흰 배경에선 4.58:1로 통과하지만
   --fs-bg-soft(#f5f5f5) 위에서는 4.20:1로 AA 미달이라 이 파일에서는 쓰지
   않고 --fs-ink-2 로 통일했다(두 표면 모두에서 안전).
   =================== */

/* ══════════════════════════════════════════════════════
   마이페이지 레이아웃 정렬 (1.3.0, 리드 실측 대응)
   — mypage-sites.css 와 동일 근거·동일 값. "내 사이트" 탭에서는 sites.css 만,
   "대시보드" 탭에서는 이 파일만 로드되므로(조건부 로드 — 각 탭 enqueue_assets
   참고) 두 파일에 각각 넣어야 두 탭 모두에서 적용된다.

   .fluxmember-mypage 자체 padding(0 16px)이 .fs-wrap(x120 w1040) 안에서
   사이드바·본문을 기준선(x144~x1136)보다 16px씩 더 안쪽으로 밀었다(실측:
   nav x160, 본문 우측 x1120). .fluxmember-mypage 는 FluxMember 마이페이지
   템플릿 전용 클래스라 다른 화면에 없지만, body 페이지ID로 한 번 더 좁혀
   안전하게만 오버라이드한다. .fs-section--tight 의 기본 120px 여백과
   .fs-head 의 720px 중앙정렬(전역, 다른 페이지 그대로 유지)도 마이페이지
   화면(body.page-id-19)에서만 본문 폭(992px)·좌측정렬에 맞춘다. ══════════════════════════════════════════════════════ */
body.page-id-19 .fluxmember-mypage {
	padding: 0;
	margin: 24px auto;
}

body.page-id-19 .fs-section.fs-section--tight {
	padding: 48px 0;
}

body.page-id-19 .fs-head {
	max-width: 992px;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}
body.page-id-19 .fs-head .fs-actions {
	justify-content: flex-start;
}

.fhb-home {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 8px;
}

.fhb-home__section {
	/* 18px 20px 는 4px 배수 스케일(8/12/16/24/32/48/64) 밖의 값이었다 */
	padding: 16px 24px;
	border: 1px solid var(--fs-line, #ededf0);
	border-radius: var(--fs-r, 12px);
	background: var(--fs-bg, #ffffff);
}

.fhb-home__title {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--fs-ink, #000000);
	display: flex;
	align-items: center;
	gap: 6px;
}

.fhb-home__count {
	font-size: 12px;
	font-weight: 400;
	color: var(--fs-ink-2, #5d5f6d);
}

.fhb-home__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--fs-ink-2, #5d5f6d);
}

.fhb-home__sites {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fhb-home__site-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 16px;
	padding: 12px 14px;
	border: 1px solid var(--fs-line, #ededf0);
	border-radius: 8px;
	background: var(--fs-bg-soft, #f5f5f5);
}

.fhb-home__site-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fs-ink-2, #5d5f6d);
}

.fhb-home__site-name {
	font-weight: 600;
	color: var(--fs-ink, #000000);
	text-decoration: none;
}
.fhb-home__site-name:hover {
	text-decoration: underline;
}

/* 사이트명·플랜·상태·결제일이 평문으로 한 줄에 이어져 위계가 없던 문제 —
   플랜/상태는 알약 배지로, 결제일은 옅은 보조 텍스트로 구분한다.
   .fs-plugin span 이 이미 color:var(--fs-ink) 를 직접 걸어 두므로(plugin-light.css,
   specificity 0,1,1) 조상 클래스를 하나 더 얹어 (0,2,+)로 확실히 이긴다.
   상태값은 PHP 쪽에 성공/실패 구분 클래스가 없어(sub_status_label 텍스트만
   내려온다) 색으로 단정하지 않고 중립 배지로만 구분한다. */
.fhb-home__site-main .fhb-home__site-plan {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--fs-bg, #ffffff);
	border: 1px solid var(--fs-line, #ededf0);
	color: var(--fs-ink-2, #5d5f6d); /* 6.32:1 */
	font-size: 11px;
	font-weight: 600;
}
.fhb-home__site-main .fhb-home__site-status {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--fs-bg, #ffffff);
	border: 1px solid var(--fs-line, #ededf0);
	color: var(--fs-ink-2, #5d5f6d);
	font-size: 11px;
	font-weight: 600;
}
.fhb-home__site-main .fhb-home__site-next {
	/* site-row 배경이 --fs-bg-soft 라 --fs-ink-3(4.20:1, AA 미달)는 쓰지 않는다 */
	color: var(--fs-ink-2, #5d5f6d); /* --fs-bg-soft 위 5.80:1 */
	font-size: 12px;
}

.fhb-home__site-usage {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: var(--fs-ink-2, #5d5f6d);
}

.fhb-home__site-usage-pending {
	font-style: italic;
}

.fhb-home__site-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fhb-home__more {
	margin-top: 10px;
}
.fhb-home__more summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--fs-accent, #047857); /* --fs-bg(#fff) 대비 5.48:1 */
	padding: 4px 0;
}
.fhb-home__more > .fhb-home__sites {
	margin-top: 10px;
}

.fhb-home__subs {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.fhb-home__sub-row {
	padding: 12px 14px;
	border: 1px solid var(--fs-line, #ededf0);
	border-radius: 8px;
	background: var(--fs-bg-soft, #f5f5f5);
}
.fhb-home__sub-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fs-ink-2, #5d5f6d);
	margin-bottom: 6px;
}
.fhb-home__sub-main strong {
	color: var(--fs-ink, #000000);
}
.fhb-home__payments {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: var(--fs-ink-2, #5d5f6d);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fhb-home__payments-empty {
	margin: 0;
	font-size: 12px;
	color: var(--fs-ink-2, #5d5f6d);
}

.fhb-home__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* "빠른 이동" 섹션 — flux-btn 본체는 테마(plugin-light.css)가 스타일링한다.
   여기서는 섹션 자체가 다른 카드와 톤이 다르지 않게(맨 아래 여백만) 정리한다. */
.fhb-home__quicklinks {
	margin-bottom: 0;
}

.fhb-home-divider {
	margin: 28px 0;
	border-top: 1px solid var(--fs-line, #ededf0);
}

/* ─── E: 주문/개통 처리 현황 · 적립금·쿠폰 · 최근 주문(1.2.0) ───
   같은 --fs-* 라이트 토큰 체계. 대비: 라벨 --fs-ink-2(#5d5f6d)/--fs-bg 6.32:1,
   활성 숫자 --fs-accent(#047857)/--fs-bg 5.48:1, 비활성(0) 숫자는 --fs-ink-2 로
   눈에 띄지 않게(0 을 강조하지 않는다 — 리드 지시). */
.fhb-home__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.fhb-home__title-row .fhb-home__title {
	margin-bottom: 0;
}
.fhb-home__more-link {
	font-size: 12px;
	color: var(--fs-accent, #047857); /* 5.48:1 */
	text-decoration: none;
}
.fhb-home__more-link:hover {
	text-decoration: underline;
}

.fhb-order-status__flow {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 14px;
}
.fhb-order-status__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 14px;
	border-radius: 8px;
	text-decoration: none;
	min-width: 76px;
}
.fhb-order-status__num {
	font-size: 20px;
	font-weight: 700;
	color: var(--fs-ink-2, #5d5f6d); /* 기본(0건) — 강조하지 않음, 6.32:1 */
}
.fhb-order-status__stat.is-active .fhb-order-status__num {
	color: var(--fs-accent, #047857); /* 5.48:1 */
}
.fhb-order-status__label {
	font-size: 12px;
	color: var(--fs-ink-2, #5d5f6d);
}
.fhb-order-status__arrow {
	/* 4단계 숫자 줄(padding-top 8px + num 높이 절반)에 시각적으로 맞춘다 —
	   중간 높이에 뜬 채로 어색해 보이던 것을 숫자 흐름의 일부처럼 정리 */
	margin-top: 14px;
	color: var(--fs-ink-4, #9298a6);
	font-size: 16px;
	padding: 0 2px;
}
.fhb-order-status__aside {
	padding-top: 10px;
	border-top: 1px solid var(--fs-line, #ededf0);
}
.fhb-order-status__claim {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-size: 13px;
	color: var(--fs-ink-2, #5d5f6d);
}
.fhb-order-status__claim strong {
	color: var(--fs-ink-2, #5d5f6d);
	font-size: 15px;
}
.fhb-order-status__claim.is-active strong {
	color: #8a1c1c; /* --fs-bg(#fff) 대비 9.28:1, 오류 팔레트와 통일 */
}
.fhb-order-status__physical-note {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--fs-line, #ededf0);
	font-size: 12px;
	color: var(--fs-ink-2, #5d5f6d);
}
.fhb-order-status__physical-note a {
	color: var(--fs-accent, #047857);
}

.fhb-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}
.fhb-benefits__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border-radius: 8px;
	border: 1px solid var(--fs-line, #ededf0);
	background: var(--fs-bg-soft, #f5f5f5);
	text-decoration: none;
}
.fhb-benefits__label {
	font-size: 12px;
	color: var(--fs-ink-2, #5d5f6d);
}
.fhb-benefits__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--fs-ink, #000000);
}
.fhb-benefits__value em {
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	color: var(--fs-ink-2, #5d5f6d);
	margin-left: 2px;
}

.fhb-recent-orders {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fhb-recent-orders__row {
	display: grid;
	grid-template-columns: 80px 1fr 70px 90px;
	gap: 10px;
	align-items: center;
	padding: 10px 4px;
	border-top: 1px solid var(--fs-line, #ededf0);
	text-decoration: none;
	font-size: 13px;
	color: var(--fs-ink, #000000);
}
.fhb-recent-orders__row:first-child {
	border-top: none;
}
.fhb-recent-orders__date,
.fhb-recent-orders__status {
	color: var(--fs-ink-2, #5d5f6d);
	font-size: 12px;
}
.fhb-recent-orders__total {
	text-align: right;
	font-weight: 600;
}

/* ─── 현황판 — 에메랄드 그라데이션 패널 (2026-09-15 웹쟁이 톤, spec C-GRAD-PANEL) ───
   대시보드 맨 위 "주문 · 개통 처리 현황"만 짙은 면으로 올려 첫눈에 들어오게 한다.
   나머지 패널은 흰 카드 그대로. 짙은 녹색 위에서는 에메랄드 숫자·#8a1c1c 가
   4.5:1 이 안 나와 전부 흰 글자로 두고, 0건은 흐리게(.62 → 5.1:1)만 구분한다.
   글자색은 plugin-light.css 의 .fs-plugin span/strong/a(0,1,1)를 이겨야 해서
   클래스 두 단계로 쓴다. */
.fhb-home .fhb-home__section--status {
	border: 0;
	padding: 24px 28px;
	background: var(--fs-accent-grad, linear-gradient(135deg, #04241a, #0c5c40));
	color: #fff;
}
.fhb-home__section--status .fhb-home__title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
}
.fhb-home__section--status .fhb-home__title,
.fhb-home__section--status .fhb-order-status__num,
.fhb-home__section--status .fhb-order-status__stat.is-active .fhb-order-status__num,
.fhb-home__section--status .fhb-order-status__label,
.fhb-home__section--status .fhb-order-status__arrow,
.fhb-home__section--status .fhb-order-status__claim,
.fhb-home__section--status .fhb-order-status__claim span,
.fhb-home__section--status .fhb-order-status__claim strong,
.fhb-home__section--status .fhb-order-status__claim.is-active strong,
.fhb-home__section--status .fhb-order-status__physical-note,
.fhb-home__section--status .fhb-order-status__physical-note a,
.fhb-home .fhb-home__section--status a:hover {
	color: #fff;
}
.fhb-home__section--status .fhb-order-status__num { font-variant-numeric: tabular-nums; }
.fhb-home__section--status .fhb-order-status__stat:not(.is-active) .fhb-order-status__num { opacity: .62; }
.fhb-home__section--status .fhb-order-status__arrow { opacity: .55; }
.fhb-home__section--status .fhb-order-status__stat:hover { background: rgba(255, 255, 255, .08); }
.fhb-home__section--status .fhb-order-status__aside,
.fhb-home__section--status .fhb-order-status__physical-note { border-top-color: rgba(255, 255, 255, .16); }
.fhb-home__section--status .fhb-order-status__physical-note a { text-decoration: underline; }
/* 짙은 면 위 포커스 링은 흰색 — 에메랄드는 1.5:1 로 안 보인다 */
.fhb-home__section--status a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ─── 히어로 하단 혜택 줄 (1.3.0, 2026-09-16 — 옛 별도 "적립금·쿠폰" 흰 카드를 접었다) ───
   대시보드가 같은 무게의 흰 카드로만 나열되던 문제(전역 CLAUDE.md AI 금지 목록)를
   줄이려고, 성격이 가까운 정보(적립금·쿠폰도 "지금 주문 상태"의 일부)를 한 패널에 묶었다. */
.fhb-hero__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.fhb-home .fhb-hero__benefits a.fhb-hero__benefit {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}
.fhb-home .fhb-hero__benefits a.fhb-hero__benefit:hover {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}
.fhb-hero__benefit-label {
	font-size: 13px;
	color: rgba(255, 255, 255, .78); /* #0c5c40 위 5.3:1 */
}
.fhb-hero__benefit-value {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.fhb-hero__benefit-value em {
	margin-left: 1px;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	color: rgba(255, 255, 255, .78);
}

/* ─── 내 사이트 카드 (1.3.0, 2026-09-16 리뉴얼) ───────────────────────────
   옛 .fhb-home__site-row(균일한 회색 박스, 정기결제는 별도 흰 카드)를 대체한다.
   상태별 왼쪽 색 띠 + 실제 값 막대로, 대시보드에서 가장 무거운 콘텐츠 카드로 세운다.
   옛 클래스(.fhb-home__site-row 등)는 다른 화면에서 쓰지 않아 죽은 규칙으로 남긴다. */
.fhb-home__section--sites {
	padding: 24px;
}
.fhb-home__section--sites .fhb-home__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}
.fhb-home__sites {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.fhb-site {
	position: relative;
	padding: 18px 20px 18px 24px;
	border: 1px solid var(--fs-line, #ededf0);
	border-radius: 10px;
	background: var(--fs-bg-soft, #f5f5f5);
}
.fhb-site::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 4px;
	border-radius: 4px;
	background: var(--fs-ink-4, #9298a6); /* 중립 — 상태를 단정할 수 없을 때 */
}
.fhb-site--ok::before {
	background: var(--fs-accent, #047857);
}

.fhb-site__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 16px;
}
.fhb-site__name {
	font-size: 17px;
	font-weight: 700;
	color: var(--fs-ink, #000000);
	text-decoration: none;
}
.fhb-site__name:hover {
	text-decoration: underline;
}
.fhb-site__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 13px;
	color: var(--fs-ink-2, #5d5f6d);
}
.fhb-site__plan,
.fhb-site__status {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--fs-bg, #ffffff);
	border: 1px solid var(--fs-line, #ededf0);
	color: var(--fs-ink-2, #5d5f6d); /* 6.32:1 */
	font-size: 11.5px;
	font-weight: 600;
}
.fhb-site__status--ok {
	background: var(--fs-accent-soft, #e9f7f1);
	border-color: transparent;
	color: var(--fs-accent, #047857); /* 4.97:1 */
}
.fhb-site__next {
	color: var(--fs-ink-2, #5d5f6d); /* --fs-bg-soft 위 5.80:1 */
}
.fhb-site__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fhb-site__usage {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 16px;
}
.fhb-site__bar {
	height: 6px;
	border-radius: 999px;
	background: var(--fs-line, #ededf0);
	overflow: hidden;
}
.fhb-site__bar-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--fs-accent, #047857);
	transition: width .3s ease;
}
.fhb-site__bar-fill.is-warn { background: #f59e0b; }
.fhb-site__bar-fill.is-danger { background: #ef4444; }
.fhb-site__usage-text {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: var(--fs-ink-2, #5d5f6d);
}

.fhb-site__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--fs-line, #ededf0);
	font-size: 13px;
	color: var(--fs-ink-2, #5d5f6d);
}
.fhb-site__sub-label {
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--fs-bg, #ffffff);
	color: var(--fs-ink-3, #727582);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}
.fhb-site__sub-last {
	color: var(--fs-ink-3, #727582);
}

/* ─── 최근 주문 — 참고 정보, 히어로·사이트 카드보다 가볍게 (1.3.0) ─── */
.fhb-home__section--minor {
	padding: 16px 24px;
	border: 0;
	background: transparent;
}
.fhb-home__title--minor {
	font-size: 13px;
	font-weight: 600;
	color: var(--fs-ink-2, #5d5f6d);
}

/* 사이트 행 첫 버튼("관리자 접속") — 에메랄드 채움 알약 (spec AC-57).
   테마의 보조 버튼 규칙 `.fs-plugin button:not([class*="primary"]):not(…):not(…)`이
   (0,4,1)이라 .fs-plugin 을 붙여 (0,5,0)으로 이긴다. */
.fs-plugin .fhb-home .fhb-home__site-actions > .flux-btn:first-child {
	background: var(--fs-accent, #047857);
	border-color: var(--fs-accent, #047857);
	color: #fff; /* 5.48:1 */
}
.fs-plugin .fhb-home .fhb-home__site-actions > .flux-btn:first-child:hover {
	background: var(--fs-accent-ink, #0c5c40);
	border-color: var(--fs-accent-ink, #0c5c40);
	color: #fff;
}

/* ─── 반응형: 360px 가로 스크롤 방지 ─── */
@media (max-width: 480px) {
	.fhb-home__site-row {
		grid-template-columns: 1fr;
	}
	.fhb-home__section {
		padding: 14px;
	}
	.fhb-order-status__stat {
		min-width: 64px;
		padding: 6px 8px;
	}
	/* 360px 에서 4단계가 한 줄에 안 들어가 "정지/만료"만 다음 줄로 떨어졌다 —
	   화살표를 빼고 4칸 격자로 한 줄에 맞춘다(순서가 곧 흐름이다). */
	.fhb-home__section--status .fhb-order-status__flow {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 4px;
	}
	.fhb-home__section--status .fhb-order-status__arrow { display: none; }
	.fhb-home__section--status .fhb-order-status__stat { min-width: 0; padding: 6px 2px; }
	.fhb-recent-orders__row {
		grid-template-columns: 1fr 70px;
		grid-template-areas:
			"name total"
			"date status";
	}
	.fhb-recent-orders__name { grid-area: name; }
	.fhb-recent-orders__total { grid-area: total; }
	.fhb-recent-orders__date { grid-area: date; }
	.fhb-recent-orders__status { grid-area: status; text-align: right; }
}