/* =====================================================================
   오빠두 색·타이포·간격 토큰 — 정본(single source of truth)

   2026-09-21 style.css 에서 떼어냈다. 이유: 테마 CSS 가 안 실리는 화면
   (독립문서 /biz/*, 정적 SPA)들이 색 정의를 자기 파일에 복사해 갖고 있어서,
   정본을 고쳐도 따라오지 않았다. 이 파일 하나만 물려주면 그 문제가 사라진다.

   ⚠️ 거는 순서 — 이 파일이 style.css 보다 먼저 와야 한다.
      style.css 의 @media(max-width:768px) :root 가 여기 값을 덮어쓰기 때문.
      (var() 자체는 순서와 무관하게 풀리지만, 재정의는 순서가 정한다)
   ⛔ 미정의 토큰은 그 선언을 통째로 무효로 만든다 — 오류도 안 난다.
      여기서 토큰을 지울 때는 쓰는 곳을 먼저 확인할 것.
   ⛔ 메일 템플릿은 이 파일을 쓸 수 없다 — 메일 클라이언트가 외부 CSS 를
      읽지 않는다. 메일은 언제나 인라인 리터럴(운영자 지시 2026-09-21).

   쓰는 곳: 테마(wp_enqueue_scripts 우선순위 1) · /biz/* 독립문서 · 정적 SPA
   ===================================================================== */
	:root {
		/* -- Existing Colors (in use) -- */
		--color-navy-white-10: #f0f2f5;
		--color-navy-white-20: #ebeff3;
		--color-black-40: rgba(0,0,0,.04);
		--color-black-60: rgba(0,0,0,.06);
		--color-black-100: rgba(0,0,0,.1);
		--color-blue: #296df4;
		--color-blue-purple-1: #576fff;
		--color-navy: #01377D;
		--color-skyblue: #009DD1;
		--color-aqua: #97E7F5;
		--color-aqua-1: #D2EFEF;
		--color-chartreuse: #7ED348;
		--color-green: #26B170;
		--color-green-1: #5fac88;

		/* -- Brand / Primary (Warm Canvas 디자인 시스템 v1.0 · 2026.05) -- */
		/* 원칙: 화면의 90%는 따뜻한 백색(Surface), 5%만 그린(Forest)이 책임진다 */
		--primary: #217346;       /* CTA, 헤드라인 강조 */
		--primary-dark: #134026;  /* 호버, 더 짙은 강조 */

		/* Forest accents — 작은 영역 강조 전용 */
		--primary-50: #ECF2EE;    /* 장식 도형, 작은 강조 영역 */
		--primary-300: #6FA17F;   /* 호버 보더, 중간 톤 */
		/* legacy alias: 기존 코드 호환용. 신규 코드는 --primary-50 사용 권장 */
		--primary-light: #ECF2EE;

		/* Surface — 따뜻한 백색 (화면의 90%) */
		--bg-subtle:   #FDFDFB;   /* 페이지 기본 배경 */
		--surface-100: #F7F6F1;   /* 카드, 대체 섹션 배경 */
		--surface-200: #EFEDE6;   /* 보더, 미세 구분 */
		--surface-300: #DDDAD0;   /* 디바이더, 윤곽선 */
		--canvas-warm: #F1EEE5;   /* surface-100 보다 한 톤 더 따뜻한 cream — Editorial 카드 그라디언트 끝점 */

		/* Ink — 깊은 웜톤 텍스트 */
		--t-main:  #1A1916;       /* 헤딩, 핵심 텍스트 */
		--t-body:  #3A3933;       /* 본문 텍스트 */
		--t-muted: #807E73;       /* 보조 텍스트 (그린 틴트 제거) */

		--bg-dark: #131f18;

		/* -- Gray Scale — 순수 무채색(채도 0). 2026-09-21 운영자 채용 「B안」:
		   명도는 그대로 두고 Tailwind 쿨그레이의 푸른 기운만 제거했다.
		   ⛔ 여기에 색기운 있는 회색을 도로 넣지 말 것 — 토대가 무채색이어야
		      나중에 다른 코너를 열어도 브랜드색을 물려받지 않는다.
		   대비는 변동 없음(모든 단계 ±0.03, 기준선 통과 여부 동일). -- */
		--gray-100: #f4f4f4;
		--gray-200: #e7e7e7;
		--gray-300: #d5d5d5;
		--gray-400: #a2a2a2;
		--gray-500: #727272;
		--gray-600: #545454;
		--gray-700: #404040;
		--gray-800: #282828;
		/* 900 은 헤더 개편(2026-08-13)에 필요해 스케일을 끝으로 늘린 값.
		   ⚠️ v3 정본의 --gray-500(#8A8A85)과 이름은 같고 값이 다르다 — 라이브는 여기 값이 정본. */
		--gray-900: #181818;

		/* -- Text Colors -- */
		--text-primary: #333;
		--text-secondary: #555;
		--text-muted: #888;
		--text-light: #aaa;
		--text-white: #fff;

		/* -- Semantic Colors -- */
		--color-success: #26B170;
		--color-warning: #f59e0b;
		--color-danger: #ef4444;
		--color-info: #009DD1;

		/* -- 좌측 사이드 내비 (커뮤니티·실무위키·무료강의 공통) --
		   핸드오프 "사이드바 활성 탭 강조" 4c안. 세 페이지가 각자 스코프 토큰을 쓰지만
		   이 값만은 한 곳에서 관리한다 → 색 변경은 여기 6줄만 고치면 전부 따라온다.
		   ※ `--nav-height`(사이트 상단 바)와 구분하려고 접두사는 `--sidenav-`.
		   ※ 커뮤니티는 플러그인(테마 미로드 시 대비)이라 var() 폴백을 함께 쓴다. */
		--sidenav-active-bg:   #E4EFEA;
		--sidenav-active-text: #151B1B;
		--sidenav-active-icon: #036546;
		--sidenav-text:        #5A6663;
		--sidenav-icon:        #98A3A0;
		--sidenav-hover-bg:    #F6F8F7;

		/* -- Layout -- */
		--max-w: 1200px;
		--max-w-narrow: 900px;
		--px: 30px;

		/* -- Spacing -- */
		--space-xs: 4px;
		--space-2xs: 6px;
		--space-sm: 8px;
		--space-nm: 12px;
		--space-md: 16px;
		--space-lg: 24px;
		--space-xl: 32px;
		--space-2xl: 48px;
		--space-3xl: 64px;

		/* -- Border Radius -- */
		--radius-sm: 3px;
		--radius-md: 5px;
		--radius-nm: 10px;
		--radius-lg: 16px;
		--radius-xl: 20px;
		--radius-full: 9999px;

		/* -- Shadows -- */
		--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
		--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
		--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
		--shadow-card: 0 4px 24px rgba(0,0,0,0.06);

		/* -- Transitions -- */
		--transition-fast: 0.15s ease;
		--transition-base: 0.3s ease;
		--transition-slow: 0.5s ease;

		/* -- Z-Index Scale -- */
		--z-dropdown: 100;
		--z-sticky: 200;
		--z-overlay: 300;
		--z-modal: 400;
		--z-toast: 500;

		/* -- Font Size Scale -- */
		--font-2xs: 0.625rem;   /* 10px */
		--font-xs: 0.75rem;     /* 12px */
		--font-2sm: 0.8rem;		/* 13px */
		--font-sm: 0.85rem;    /* 14px */
		--font-md: 0.925rem;   /* 15px */
		--font-base: 1rem;      /* 16px */
		--font-md-lg: 1.0625rem; /* 17px */
		--font-lg: 1.125rem;    /* 18px */
		--font-xl: 1.25rem;     /* 20px */
		--font-2xl: 1.5rem;     /* 24px */
		--font-3xl: 2rem;       /* 32px */

		/* 색상 설계 v2: 신규 역할 정의만 추가. 기존 선언·사용처는 다음 차수에서 검토한다. */
		/* 별칭은 새 이름에만 정의하며, 참조하는 기존 토큰의 현재 값을 그대로 따른다. */
		--surface-white: #ffffff; /* 카드·패널·모달의 흰 바탕 */
		--text-disabled: var(--gray-400); /* 비활성 상태 전용 글자색 */
		--border-hairline: var(--gray-200); /* 장식 구분선 */
		--overlay: rgba(0,0,0,.6); /* 모달 뒤 배경 차폐 */
		--overlay-strong: rgba(0,0,0,.8); /* 미디어 뒤 짙은 배경 차폐 */
		--brand-accent: #3d8b5c; /* 작은 아이콘·표식·배지 강조; 흰 글자 면 금지 */
		--brand-action: #217346; /* 브랜드 기본 액션 */
		--brand-hover: #036136; /* 브랜드 액션 호버 */
		--brand-active: #004f2a; /* 브랜드 액션 눌림 */
		--brand-tint: #eef3ef; /* 브랜드 소면적 연한 바탕 */
		--brand-focus: #217346; /* 브랜드 단일 포커스 윤곽선 */
		--brand-on-action: #ffffff; /* 브랜드 액션 위 글자 */
		--primary-active: var(--brand-active); /* 브랜드 눌림 역할의 호환 별칭 */
		--primary-on: var(--brand-on-action); /* 브랜드 액션 위 글자의 호환 별칭 */
		--color-success-text: #166534; /* 완료·채택·해결 글자 */
		--color-success-bg: #e7f3ed; /* 완료·채택·해결 안내 바탕 */
		--color-warning-text: #8e5f00; /* 주의 안내 글자 */
		--color-warning-bg: #faf2e1; /* 주의 안내 바탕 */
		--color-danger-text: #b32d2e; /* 오류 안내 글자 */
		--color-danger-bg: #fbe6e6; /* 오류 안내 바탕 */
		--color-info-text: #1e40af; /* 정보 안내 글자 */
		--color-info-bg: #eaf1f8; /* 정보 안내 바탕 */
		--color-pending: #616161; /* 대기 상태 아이콘 */
		--color-pending-text: #616161; /* 대기 상태 글자 */
		--color-pending-bg: #f0f0f0; /* 대기 상태 바탕 */
		--chart-1: #1e40af; /* 데이터 계열 첫째 색 */
		--chart-2: #b45309; /* 데이터 계열 둘째 색 */
		--chart-3: #be185d; /* 데이터 계열 셋째 색 */
		--chart-4: #7c3aed; /* 데이터 계열 넷째 색 */
		--chart-5: #047857; /* 데이터 계열 다섯째 색 */
		--recognition-gold: #c9a84c; /* 예우·수상 기본 금색 */
		--recognition-gold-light: #f7d77b; /* 예우 장식의 밝은 금색 */
		--recognition-gold-dark: #947e62; /* 희귀 등급의 짙은 금색 */
		--recognition-ink: #1a1a1a; /* 밝은 금색 위 글자 */
		--brand-selected: #eef3ef; /* 브랜드 선택 상태의 소면적 바탕 */
		--brand-seed: oklch(0.4947054652 0.1062719286 154.9349060213); /* 향후 공통 계산기용 브랜드 기준색 */
		--brand-on-accent: #000000; /* 작은 강조 배지 위 검정 글자; 흰 글자 면 금지 */
		--surface-page: var(--gray-100); /* 페이지 바탕의 기존 회색 별칭 */
		--surface-card: var(--surface-white); /* 카드 흰 바탕의 별칭 */
		--text-strong: var(--text-primary); /* 강조 글자의 기존 기본색 별칭 */
		--text-default: var(--text-secondary); /* 본문 글자의 기존 보조색 별칭 */
		--text-on-dark: var(--text-white); /* 어두운 바탕 위 기존 흰 글자 별칭 */
		--text-on-dark-muted: #b4b4b4; /* 어두운 바탕 위 보조 글자 */
		--chrome-inverse-control: #d2d2d2; /* 어두운 공용 영역의 컨트롤 면 */
		--chrome-inverse-on-control: #1a1a1a; /* 밝은 공용 컨트롤 위 글자 */
		--chrome-inverse-focus: #b4b4b4; /* 어두운 공용 영역의 포커스 윤곽선 */
		--chrome-surface: var(--surface-card); /* 공용 영역의 카드 바탕 별칭 */
		--chrome-subtle: var(--gray-100); /* 공용 영역의 옅은 바탕 별칭 */
		--chrome-text: var(--gray-900); /* 공용 영역의 기본 글자 별칭 */
		--chrome-muted: var(--gray-600); /* 공용 영역의 보조 글자 별칭 */
		--chrome-border: var(--gray-200); /* 공용 영역의 구분선 별칭 */
		--chrome-control: var(--gray-800); /* 공용 컨트롤 면의 별칭 */
		--chrome-control-hover: var(--gray-900); /* 공용 컨트롤 호버 면의 별칭 */
		--chrome-on-control: var(--text-white); /* 공용 컨트롤 위 흰 글자 별칭 */
		--chrome-selected: var(--gray-900); /* 공용 영역 선택 표시의 별칭 */
		--chrome-focus: var(--gray-700); /* 공용 영역 단일 포커스 윤곽선의 별칭 */
		--chrome-footer: var(--gray-900); /* 공용 푸터 바탕의 별칭 */
		--chrome-footer-text: var(--text-white); /* 공용 푸터 기본 글자의 별칭 */
		--chrome-footer-muted: var(--text-on-dark-muted); /* 공용 푸터 보조 글자의 별칭 */
		--chrome-footer-border: var(--gray-700); /* 공용 푸터 구분선의 별칭 */
		--secondary-action: #1e40af; /* 중립 링크·보조 액션 */
		--secondary-hover: #112c9b; /* 보조 액션 호버 */
		--secondary-active: #071687; /* 보조 액션 눌림 */
		--secondary-tint: #f0f2f4; /* 보조 액션의 소면적 연한 바탕 */
		--secondary-selected: #f0f2f4; /* 보조 액션 선택 바탕 */
		--secondary-focus: #1e40af; /* 보조 액션 단일 포커스 윤곽선 */
		--secondary-on-action: #ffffff; /* 보조 액션 위 글자 */
		--secondary-accent: #3259ca; /* 보조 계열 작은 표식 강조; 흰 글자 면 금지 */
		--secondary-seed: oklch(0.4244450004 0.1808688386 265.6377104828); /* 향후 공통 계산기용 보조 기준색 */
		--secondary-50: var(--secondary-tint); /* 보조 계열 연한 바탕 별칭 */
		--secondary-300: var(--secondary-accent); /* 보조 계열 작은 표식 별칭; 흰 글자 면 금지 */
		--secondary-500: var(--secondary-action); /* 보조 액션 기본색 별칭 */
		--secondary-600: var(--secondary-hover); /* 보조 액션 호버 별칭 */
		--secondary-700: var(--secondary-active); /* 보조 액션 눌림 별칭 */
		--secondary-link: var(--secondary-action); /* 중립 링크의 보조 액션 별칭 */
	}