/*
	cube — 디자인 토큰. 값 정의만 한다. 레이아웃 규칙은 다른 파일에 둔다.

	사이트 전역 다크모드 토글(body.color_scheme_dark, common/js/common.js:38-61)을 그대로 따른다.
	skin.xml에는 독립된 colorset(light/dark/auto) 옵션을 두지 않는다 — layouts/root와 동일한 방식.

	색은 layouts/root/layout.scss의 전역 토큰(--bg-body, --text-primary 등)을 var(..., fallback)으로
	그대로 흡수해 같은 값을 쓴다. 다른 레이아웃에 이 스킨을 붙였을 때는 fallback이 대신 적용된다.
	--cube-link/--cube-focus는 root의 브랜드색 #5865f2 계열을 쓰되, 라이트는 그대로(4.61:1),
	다크는 밝게 올려(#8e9aff, 6.95:1) AA(4.5:1)를 통과시켰다 — root 자체는 다크에서 3.85:1로 미달이었다.
	--cube-text-faint는 root의 --text-placeholder(라이트 3.32:1, 다크 3.09:1 — AA 미달)를 쓰지 않고
	메타 텍스트에 쓸 수 있도록 별도로 계산한 값을 쓴다(라이트 4.68:1, 다크 6.41:1).
*/

.cube {
	--cube-text: var(--text-primary, #222222);
	--cube-text-muted: var(--text-secondary, #6b6d76);
	--cube-text-faint: #727478;
	--cube-border: var(--border-color, #eeeeee);
	--cube-border-strong: var(--border-color, #dcdee3);
	--cube-bg: var(--bg-body, #ffffff);
	--cube-bg-sub: var(--bg-sidebar, #f8f8f8);
	--cube-bg-hover: var(--bg-hover, #fafbfc);
	--cube-bg-skeleton: #e7e7e7;
	--cube-link: #5865f2;
	--cube-primary: #5865f2;
	--cube-primary-hover: #4751d6;
	--cube-primary-contrast: #ffffff;
	--cube-accent: #da3238;
	--cube-accent-contrast: #ffffff;
	--cube-badge-new-bg: var(--text-primary, #222222);
	--cube-badge-new-fg: var(--bg-body, #ffffff);
	--cube-focus: #5865f2;

	/*
		--cube-gutter: 스킨 좌우 여백. 데스크톱은 0 — 레이아웃 컨테이너(.container의 좌우 padding)가
		이미 거터 역할을 하므로 스킨이 여기에 자기 여백을 얹으면 게시판만 안쪽으로 밀린다.
		모바일에서만 90-responsive.css가 값을 주고, 같은 값만큼 .cube에 음수 마진을 걸어
		목록이 화면 좌우 끝까지 닿게 한다.
		--cube-col-pad: 2열일 때 가운데 구분선 양옆 안여백. 열 사이를 column-gap으로 벌리면
		카드의 아래 테두리가 끊겨 표처럼 보이지 않는다(01문서 §3.2 실측도 gap 없이 안여백만 쓴다).
	*/
	--cube-gutter: 0px;
	--cube-col-pad: 20px;

	/* skin.xml extra_vars가 layout/open.blade.php의 인라인 style로 아래 2개를 덮어쓴다 */
	--cube-max: 1100px;
	--cube-thumb: 80px;

	color: var(--cube-text);
	background: var(--cube-bg);
}

/* 사이트 다크모드 토글이 켜졌을 때만 전환. .cube가 body 아래 어디에 있어도 걸리도록 자손 선택자로 둔다. */
body.color_scheme_dark .cube {
	--cube-text: var(--text-primary, #e0e0e0);
	--cube-text-muted: var(--text-secondary, #a7a9b0);
	--cube-text-faint: #9a9ba1;
	--cube-border: var(--border-color, #33343a);
	--cube-border-strong: var(--border-color, #45464d);
	--cube-bg: var(--bg-body, #181818);
	--cube-bg-sub: var(--bg-sidebar, #1e1e1e);
	--cube-bg-hover: var(--bg-hover, #333333);
	--cube-bg-skeleton: #2b2c31;
	--cube-link: #8e9aff;
	--cube-primary: #8e9aff;
	--cube-primary-hover: #a3adff;
	--cube-primary-contrast: #181818;
	--cube-accent: #ef5a5f;
	--cube-accent-contrast: #181818;
	--cube-badge-new-bg: var(--text-primary, #e0e0e0);
	--cube-badge-new-fg: var(--bg-body, #181818);
	--cube-focus: #8e9aff;
}