/* =========================================================
   FluxHub Common — 내 계정(마이페이지) 디자인 토큰 (--acct-*)
   =========================================================

   회원이 보는 내 계정 화면 전체(통합 틀 .fxm-*, 회원 기본 틀 .fluxmember-mypage__*, 상품·주문·쿠폰·
   적립금 화면 .fhs-*, 게시판 활동 탭 .fbmp)가 **한 벌의 토큰**으로 그려진다.
   화면 CSS(파일 이름에 mypage 가 들어간 것)는 색 리터럴을 쓰지 않고 이 변수만 참조한다
   (scripts/validate.sh 13번). 색 값은 전부 이 파일에만 있다.

   문법: 흰 바탕 + 검정 + 얇은 선. 강조는 검정, 선택·켜짐 면에만 라임(2026-10 변경 — 사이트 대표색을 따르지 않는다).

   ── 대표색 ──
   (2026-10 변경) 아래 --acct-brand* 는 더 이상 --fh-brand 계열을 읽지 않는다. FHC_Mypage 가
   대표색에서 글자색을 다시 계산해 덮어쓰던 인라인 출력도 껐다(옵션 값은 DB 에 남아 있다).
     --acct-brand        선·막대·아이콘·화살표(글자로 쓰지 않는다)
     --acct-brand-ink    흰/옅은 바탕 위 **글자**(4.5:1 이상 — FHC_Mypage 가 대표색에 맞춰 다시 계산해 덮어쓴다)
     --acct-brand-lite   검정 바탕 위 글자·선(4.5:1 이상 — 같은 방식으로 계산)
     --acct-on-brand     대표색 면 위 글자
   ========================================================= */

:root {
	/* 2026-10 UI 통일(P1): 값은 고객 공통 토큰(--fx-*, ui-tokens.css)에 잇는다(쉼표 뒤 값은 폴백 — tokens.css 머리 참고).
	   따뜻한 회색(#f5f3ee 계열)은 무채색 canvas/line-strong 으로, 대표 색은 검정 + 라임으로 바꿨다. */

	/* 면 */
	--acct-white: var(--fx-surface, #ffffff);
	--acct-warm: var(--fx-canvas, #f5f5f5);          /* 보조 면(빈 상태·티켓 금액칸·호버) */
	--acct-hover: var(--fx-canvas, #f5f5f5);         /* 행 호버 */
	--acct-dark: var(--fx-ink, #111111);             /* 주(主) 면 — 적립금·첫 카드 */
	--acct-on-dark: var(--fx-on-accent, #ffffff);
	--acct-black: var(--fx-ink, #111111);

	/* 글자 */
	--acct-ink: var(--fx-ink, #111111);
	--acct-ink-2: var(--fx-ink-2, #5d5f6d);          /* 메뉴 글자(비활성) */
	--acct-muted: var(--fx-ink-2, #5d5f6d);          /* 보조 설명 */
	--acct-faint: var(--fx-ink-3, #6b6e7b);          /* 0 값·비활성·캡션 */

	/* 선 */
	--acct-line: var(--fx-line, #ededf0);            /* 얇은 구분선 */
	--acct-line-strong: var(--fx-line-strong, #dcdee3); /* 버튼·뱃지 테두리 */
	--acct-field-line: var(--fx-line-strong, #dcdee3);  /* 입력칸 테두리 */
	--acct-arrow: var(--fx-line-strong, #dcdee3);    /* 흐린 화살표(장식) */

	/* 위험 — 삭제·탈퇴 (글자도 「삭제」「탈퇴」로 쓰여 색만으로 전하지 않는다) */
	--acct-danger: var(--fx-danger, #c2352b);
	--acct-danger-line: var(--fx-danger, #c2352b);
	--acct-danger-bg: var(--fx-danger-soft, #fbecea);

	/* 모양·효과 */
	--acct-radius: var(--fx-radius-xs, 8px);
	--acct-radius-pill: var(--fx-radius-pill, 999px);
	--acct-shadow-hover: var(--fx-shadow-pop, 0 12px 40px rgba(0, 0, 0, 0.14));
	--acct-focus-ring: var(--fx-focus, 0 0 0 3px rgba(17, 17, 17, 0.12));

	/* 글꼴 */
	--acct-font-en: var(--fx-font, 'Pretendard Variable', 'Pretendard', sans-serif);

	/* 대표색 자리 — 사이트 대표색(--fh-brand)을 따르지 않고 검정 + 라임으로 고정한다.
	   brand 는 선·막대·아이콘·화살표(글자 아님) = ink, 대표색 글자 = ink, 어두운 면 위 글자·선 = 라임 */
	--acct-brand: var(--fx-ink, #111111);
	--acct-on-brand: var(--fx-on-accent, #ffffff);
	--acct-brand-soft: var(--fx-lime-soft, #eef9cf);
	--acct-brand-ink: var(--fx-ink, #111111);
	--acct-brand-lite: var(--fx-lime, #c8f05a);
}