/*
	cube — 콘텐츠 폭 · 공통 여백.
	.cube-wrap 자체에는 padding을 두지 않는다 — 대신 바로 아래 자식 섹션마다 좌우 여백을 준다.
	이렇게 하면 헤더 텍스트·카드 그리드·본문이 전부 같은 기준선에 정렬된다.

	좌우값은 스킨이 직접 px로 갖지 않고 --cube-gutter 하나만 본다(00-tokens.css). 데스크톱은 0 —
	레이아웃 컨테이너가 이미 좌우 거터를 갖고 있으므로 스킨이 여기에 자기 여백을 더하면 게시판만
	안쪽으로 밀려 들어가 레이아웃과 어긋난다. 값이 실제로 들어가는 곳은 모바일뿐이고, 그 값도
	90-responsive.css가 .cube에 건 음수 마진(전체 폭 배출)을 되돌리는 용도다.

	주의: 자식이 padding 단축 속성을 쓰면 좌우값이 0으로 덮인다(.cube-head가 실제로 그랬다).
	개별 컴포넌트는 반드시 top/bottom만 지정할 것 — 50-comment.css의 .cube-comments 처럼.
*/
.cube-wrap {
	width: 100%;
}
.cube-wrap > * {
	padding-left: var(--cube-gutter);
	padding-right: var(--cube-gutter);
}

.cube-head {
	/* padding-top: 24px; */
	padding-bottom: 12px;
}
.cube-head-title {
	font-size: 22px;
	font-weight: 800;
	margin: 0;
}
.cube-head-desc {
	margin: 6px 0 0;
	color: var(--cube-text-muted);
	font-size: 14px;
}

.cube-empty {
	padding-top: 80px;
	padding-bottom: 80px;
	text-align: center;
	color: var(--cube-text-faint);
}

.cube-search {
	display: flex;
	gap: 8px;
	margin: 24px 0 8px;
}
.cube-search-target {
	flex: 0 0 auto;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid var(--cube-border-strong);
	background: var(--cube-bg);
}
.cube-search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid var(--cube-border-strong);
	background: var(--cube-bg);
}
.cube-search-btn {
	flex: 0 0 auto;
	width: 44px;
	border-radius: 6px;
	border: 1px solid var(--cube-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cube-text-muted);
}
.cube-search-btn:hover {
	background: var(--cube-bg-hover);
}

.cube-loadend {
	text-align: center;
	color: var(--cube-text-faint);
	font-size: 13px;
	padding: 24px 0;
}

.cube-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px;
	padding-bottom: 16px;
}
.cube-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/*
	관리 도구(전체 선택 · 설정 · 게시물 관리). 글쓰기와 위계를 확실히 갈라야 하므로
	.cube-btn 을 쓰지 않는다 — 테두리·최소높이 44px·14px 글자를 그대로 물려받으면
	기본 버튼과 같은 무게로 보인다. 정렬 링크(.cube-sort-link)와 같은 급의 작은 텍스트 버튼으로 둔다.
*/
.cube-manage-tools {
	display: flex;
	align-items: center;
	gap: 2px;
}
.cube-manage-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--cube-text-faint);
	cursor: pointer;
}
.cube-manage-btn svg {
	width: 14px;
	height: 14px;
}
.cube-manage-btn:hover {
	background: var(--cube-bg-hover);
	color: var(--cube-text);
}
.cube-checkall input {
	width: 14px;
	height: 14px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--cube-primary);
}

.cube-sort {
	display: flex;
	gap: 4px;
}
.cube-sort-link {
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--cube-text-muted);
}
.cube-sort-link:hover {
	background: var(--cube-bg-hover);
}
.cube-sort-link.is-active {
	color: var(--cube-text);
	font-weight: 700;
	background: var(--cube-bg-sub);
}