/* =========================================================
   FluxHub Common — 통합 마이페이지 디자인 토큰 (--fxm-*)
   =========================================================

   회원이 보는 통합 마이페이지(FHC_Mypage, P3)의 색·글꼴·모서리를 여기 한 곳에서
   변수로 노출한다. mypage.css 는 리터럴 색을 쓰지 않고 이 변수만 참조한다.

   ── 관리자 키트(--fxa-*)와 다른 점 ──
   (2026-10 변경) 예전에는 마이페이지 색이 템플릿마다 달랐지만, 대표 결정 D4 로
   고객 화면 색은 검정 + 라임으로 고정했다. 템플릿 매니페스트의 `colors`·사이트 대표 색을
   읽어 이 값을 덮어쓰던 인라인 출력(FHC_Mypage::enqueue)은 껐다(옵션 값은 DB 에 남아 있다).

   ── 템플릿·테마에서 쓰는 법 ──
   매니페스트 colors 를 안 쓰는 사이트(또는 테마가 더 세밀하게 바꾸고 싶을 때)는
   테마 style.css 에 필요한 것만 재정의하면 된다. fluxhub-common 은 플러그인이라
   테마보다 먼저 로드되므로, 같은 :root 선택자면 테마가 이긴다.

       :root {
           --fxm-accent: #1a3a5c;
           --fxm-radius: 12px;
       }
   ========================================================= */

:root {
	/* 2026-10 UI 통일(P1): 값은 고객 공통 토큰(--fx-*, ui-tokens.css)에 잇는다(쉼표 뒤 값은 폴백 — tokens.css 머리 참고).
	   색은 사이트 대표 색·템플릿 매니페스트 colors 를 따르지 않는다(검정 + 라임 고정, 대표 결정 D4). */

	/* 면 */
	--fxm-surface: var(--fx-surface, #ffffff);          /* 카드·패널 바탕 */
	--fxm-surface-2: var(--fx-canvas, #f5f5f5);         /* 옅은 배경(내비 등) */
	--fxm-surface-hover: var(--fx-sunken, #f2f3f5);     /* hover 행 */

	/* 글자 */
	--fxm-ink: var(--fx-ink, #111111);                  /* 본문 */
	--fxm-muted: var(--fx-ink-2, #5d5f6d);              /* 보조 설명 */
	--fxm-faint: var(--fx-ink-3, #6b6e7b);              /* 캡션·빈 상태(글자라 ink-3) */

	/* 선 */
	--fxm-line: var(--fx-line-strong, #dcdee3);         /* 바깥 테두리 */
	--fxm-line-2: var(--fx-line, #ededf0);              /* 표 구분선 */

	/* 강조 */
	--fxm-accent: var(--fx-accent, #111111);
	--fxm-accent-hover: var(--fx-accent-hover, #2b2b29);
	--fxm-on-accent: var(--fx-on-accent, #ffffff);      /* 강조면 위 글자 */

	/* 배지 — 알림 수는 위험색이 아니라 ink 원 + 흰 숫자 */
	--fxm-badge-bg: var(--fx-sunken, #f2f3f5);
	--fxm-badge-ink: var(--fx-ink-2, #5d5f6d);
	--fxm-badge-accent-bg: var(--fx-ink, #111111);
	--fxm-badge-accent-ink: var(--fx-on-accent, #ffffff);

	/* 입력 */
	--fxm-field-bg: var(--fx-surface, #ffffff);
	--fxm-field-line: var(--fx-line-strong, #dcdee3);

	/* 상태 — 성공·주의는 글자(ink)로 전하고 면은 연라임·회색, 위험만 위험색 */
	--fxm-ok: var(--fx-ink, #111111);
	--fxm-ok-bg: var(--fx-lime-soft, var(--fh-accent-fill-soft, #eef9cf));
	--fxm-warn: var(--fx-ink, #111111);
	--fxm-warn-bg: var(--fx-sunken, #f2f3f5);
	--fxm-danger: var(--fx-danger, #c2352b);
	--fxm-danger-bg: var(--fx-danger-soft, #fbecea);

	/* 형태 */
	--fxm-radius: var(--fx-radius, 16px);               /* 카드 */
	--fxm-radius-sm: var(--fx-radius-xs, 8px);          /* 배지·입력·작은 버튼 */
	--fxm-shadow: var(--fx-shadow-card, 0 4px 24px rgba(0, 0, 0, 0.06));

	/* 글꼴 — 실제 웹폰트 이름은 'Pretendard Variable'(class-fhc-mypage.php 가 싣는다). 고객 공통 글꼴과 같은 순서. */
	--fxm-font: var(--fx-font, 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif);
}

/* 다크 폴백 — **테마가 스스로 어두운 사이트일 때만**(html[data-theme="dark"] · html.fh-dark).
   예전에는 방문자 OS 설정(prefers-color-scheme)만 보고 켰는데, 밝은 사이트에서 OS 가 다크면 면만 어두워지고
   글자는 테마의 검은색 그대로라 알림·쪽지·마이페이지 목록이 「어두운 배경에 어두운 글자」로 안 보였다. */
@media all {
	html[data-theme="dark"],
	html.fh-dark {
		--fxm-surface: #23252e;
		--fxm-surface-2: #2b2d37;
		--fxm-surface-hover: #2f313c;

		--fxm-ink: #e6e6e6;
		--fxm-muted: #b9bcc6;
		--fxm-faint: #8e919b;

		--fxm-line: #34363f;
		--fxm-line-2: #2c2e37;

		/* 어두운 면 위에서는 검정 강조가 안 보이므로 라임 면 + ink 글자로 뒤집는다 */
		--fxm-accent: #c8f05a;
		--fxm-accent-hover: #b5e03c;
		--fxm-on-accent: #111111;
		--fxm-badge-accent-bg: #c8f05a;
		--fxm-badge-accent-ink: #111111;

		--fxm-badge-bg: #2c2e37;
		--fxm-badge-ink: #d7d9e0;

		--fxm-field-bg: #23252e;
		--fxm-field-line: #3d3f4a;

		--fxm-ok: #6fc494;
		--fxm-ok-bg: #16281f;
		--fxm-warn: #e0b84d;
		--fxm-warn-bg: #2e2712;
		--fxm-danger: #e88b91;
		--fxm-danger-bg: #2e1a1c;

		--fxm-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	}
}