/* ============================================================
   플럭스허브 디자인 토큰 (D0, 2026-10-12)
   근거: docs/plans/2026-10-12-fluxhub-growth-plan.md §2-4,
         C:\work\fluxhub\specs\2026-10-12-hub-growth-plan\review-design.md ⑤
   문구 규칙: docs/standards/VOICE.md

   새 CSS 는 색·글자 크기·반경·간격을 여기 --fx-* 로만 쓴다.
   - 글자 크기 10단계(비정수 금지), 반경 4종, 면 3단, 회색은 따뜻한 회색 한 벌.
   - 청회색(Tailwind gray: #9298a6 #9ca3af #d1d5db #374151 #f3f4f6 #5d5f6d)은 쓰지 않는다.
   - 라임은 포인트로 조금씩(VOICE.md §8): 핵심 버튼 1개·선택 상태·짧은 형광펜·칩·숫자 강조.
     큰 면적 전면 칠하기는 피한다. 흰 바탕 위 라임 글자 금지.
   - 기존 --v2-* · --fs-* 는 그대로 두고, 화면을 고칠 때 --fx-* 로 옮긴다.
   ============================================================ */

:root {
	/* ── 색: 잉크·라임 ── */
	--fx-ink:          #111111;   /* 글자·주 버튼·잉크 면 */
	--fx-ink-hover:    #2a2a28;
	--fx-lime:         #c8f05a;   /* 포인트 */
	--fx-lime-hover:   #b5e03c;
	--fx-lime-ink:     #2c3a00;   /* 라임 면 위 보조 글자 */
	--fx-danger:       #c2352b;

	/* ── 글자색 (흰 면 기준 대비) ── */
	--fx-text:         #111111;   /* 18.9:1 */
	--fx-text-2:       #3a3a37;   /* 본문 보조 11.4:1 */
	--fx-text-3:       #6b6b66;   /* 메타 5.3:1 */
	--fx-text-inverse: #ffffff;
	--fx-text-inverse-2: rgba(255, 255, 255, .7);

	/* ── 면 3단 + 잉크 면 ── */
	--fx-surface-0:    #ffffff;
	--fx-surface-1:    #f7f7f5;   /* 구획 */
	--fx-surface-2:    #efefec;   /* 눌림·호버 */
	--fx-surface-ink:  #111111;

	/* ── 선 ── */
	--fx-line:         #e4e4df;
	--fx-line-2:       #d3d3cc;   /* 입력 테두리 */
	--fx-line-strong:  #111111;   /* 표 머리 */

	/* ── 글자 크기 10단계 ── */
	--fx-fs-13: 13px;   /* 캡션·메타 */
	--fx-fs-14: 14px;
	--fx-fs-15: 15px;   /* 메뉴 항목·보조 */
	--fx-fs-17: 17px;   /* 본문 */
	--fx-fs-20: 20px;   /* 카드 제목 */
	--fx-fs-24: 24px;   /* H3 */
	--fx-fs-32: 32px;   /* H2 */
	--fx-fs-40: 40px;   /* 문서·상세 H1 */
	--fx-fs-56: 56px;   /* 랜딩 H1 */
	--fx-fs-72: 72px;   /* 숫자 강조(화면당 1회) */

	/* 제목 단계 — 768·390 에서는 아래 미디어쿼리가 한 단계씩 낮춘다 */
	--fx-h1-landing: var(--fx-fs-56);
	--fx-h1-list:    44px;          /* 목록·허브 H1 (768 → 32, 390 → 28) */
	--fx-h1-doc:     var(--fx-fs-40);
	--fx-h2:         var(--fx-fs-32);
	--fx-h3:         var(--fx-fs-24);
	--fx-card-title: var(--fx-fs-20);

	--fx-fw-body:    500;
	--fx-fw-strong:  700;           /* 카드 제목·항목 이름 */
	--fx-fw-heading: 800;           /* 제목 */

	--fx-lh-body:    1.7;
	--fx-lh-long:    1.8;           /* 긴 글 */
	--fx-lh-heading: 1.3;
	--fx-lh-display: 1.2;

	--fx-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans KR', sans-serif;
	--fx-num: tabular-nums;         /* font-variant-numeric 값 */

	/* ── 간격 (4 배수) ── */
	--fx-space-4:   4px;
	--fx-space-8:   8px;
	--fx-space-12:  12px;
	--fx-space-16:  16px;
	--fx-space-24:  24px;
	--fx-space-32:  32px;
	--fx-space-48:  48px;
	--fx-space-64:  64px;
	--fx-space-96:  96px;
	--fx-space-128: 128px;
	--fx-section:   96px;           /* 섹션 위아래 (768 → 64, 390 → 48) */

	/* ── 반경 4종 ── */
	--fx-r-sm:   8px;               /* 작은 칩·입력 안 요소·트리 항목 */
	--fx-r:      12px;              /* 버튼·입력·카드·이미지 */
	--fx-r-lg:   16px;              /* 떠 있는 판: 헤더·고정 바·모달·메가메뉴 */
	--fx-r-full: 999px;             /* 알약·아바타 */

	/* ── 그림자 2단 ── */
	--fx-shadow-float: 0 8px 24px rgba(17, 17, 17, .12);    /* 헤더·고정 바·알약 */
	--fx-shadow-pop:   0 12px 40px rgba(17, 17, 17, .14), 0 2px 6px rgba(17, 17, 17, .06);   /* 메가메뉴·모달 */

	/* ── 모션 ── */
	--fx-ease:     cubic-bezier(.2, .7, .2, 1);
	--fx-dur-fast: 200ms;
	--fx-dur:      240ms;
	--fx-dur-slow: 300ms;

	/* ── 레이아웃 ── */
	--fx-container:  1200px;        /* 바깥 폭 (안쪽 1152) */
	--fx-inner:      1152px;
	--fx-text-col:   760px;
	--fx-doc-col:    700px;
	--fx-gutter:     24px;          /* 좌우 여백 (1200 미만 화면) — 768 → 32, 390 → 20 은 아래 */
	--fx-header-h:   88px;          /* 떠 있는 헤더가 차지하는 위 영역(틈 16 + 헤더 72) */

	/* ── 초점 ── */
	--fx-focus: 0 0 0 2px var(--fx-surface-0), 0 0 0 4px var(--fx-ink);
}

@media (max-width: 1024px) {
	:root {
		--fx-gutter: 32px;
	}
}

@media (max-width: 768px) {
	:root {
		--fx-h1-landing: 44px;
		--fx-h1-list:    var(--fx-fs-32);
		--fx-h1-doc:     var(--fx-fs-32);
		--fx-h2:         28px;
		--fx-section:    var(--fx-space-64);
	}
}

@media (max-width: 480px) {
	:root {
		--fx-h1-landing: var(--fx-fs-32);
		--fx-h1-list:    28px;
		--fx-h1-doc:     28px;
		--fx-h2:         var(--fx-fs-24);
		--fx-h3:         var(--fx-fs-20);
		--fx-section:    var(--fx-space-48);
		--fx-gutter:     20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--fx-dur-fast: 0ms;
		--fx-dur:      0ms;
		--fx-dur-slow: 0ms;
	}
}