/*
	cube — 콘텐츠 폭 · 공통 여백.

	주의:
	카테고리(.cube-cats)는 30-list.css에서 별도로 처리한다.
	이 파일에서는 카테고리의 가로폭이나 overflow를 건드리지 않는다.
*/

.cube-wrap {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}


/*
	게시판 내부 직계 섹션의 좌우 기준선.
	기존 구조를 유지한다.
*/

.cube-wrap > * {
	padding-left: var(--cube-gutter);
	padding-right: var(--cube-gutter);

	box-sizing: border-box;
}


/* ============================================================
   게시판 제목
   ============================================================ */

.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;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin: 24px 0 8px;

	box-sizing: border-box;
}

.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;
	width: 100%;

	padding: 8px 12px;

	border-radius: 6px;
	border: 1px solid var(--cube-border-strong);

	background: var(--cube-bg);

	box-sizing: border-box;
}

.cube-search-btn {
	flex: 0 0 auto;

	width: 44px;
	height: 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;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	gap: 12px;

	padding-top: 8px;
	padding-bottom: 16px;

	box-sizing: border-box;
}


/*
	툴바 내부 요소가 모바일에서
	부모 폭을 강제로 늘리지 않도록 한다.
*/

.cube-toolbar > * {
	min-width: 0;
}

.cube-toolbar-actions {
	display: flex;

	align-items: center;

	gap: 12px;

	min-width: 0;

	flex-shrink: 0;
}


/* ============================================================
   관리 도구
   ============================================================ */

.cube-manage-tools {
	display: flex;

	align-items: center;

	gap: 2px;

	min-width: 0;
}

.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;

	flex: 0 0 auto;
}

.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;

	min-width: 0;
}

.cube-sort-link {
	padding: 6px 10px;

	border-radius: 6px;

	font-size: 13px;

	color: var(--cube-text-muted);

	white-space: nowrap;
}

.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);
}


/* ============================================================
   모바일 레이아웃
   ============================================================ */

@media (max-width: 768px) {

	/*
		레이아웃만 제한한다.
		분류는 30-list.css에서 별도 처리.
	*/

	.cube-wrap {
		width: 100%;
		max-width: 100%;
		min-width: 0;

		box-sizing: border-box;
	}


	.cube-wrap > * {
		max-width: 100%;
		min-width: 0;

		box-sizing: border-box;
	}


	/* 툴바 */

	.cube-toolbar {
		width: 100%;
		max-width: 100%;

		gap: 8px;

		padding-top: 6px;
		padding-bottom: 14px;

		box-sizing: border-box;
	}


	.cube-toolbar-actions {
		min-width: 0;

		gap: 8px;

		flex-shrink: 1;
	}


	.cube-manage-tools {
		min-width: 0;

		flex-shrink: 1;
	}


	.cube-sort {
		flex-shrink: 1;
	}
}


/* ============================================================
   작은 모바일
   ============================================================ */

@media (max-width: 480px) {

	.cube-toolbar {
		gap: 6px;

		padding-top: 5px;
		padding-bottom: 12px;
	}

	.cube-manage-btn {
		padding: 5px 6px;

		font-size: 11px;
	}

	.cube-sort-link {
		padding: 6px 8px;

		font-size: 12px;
	}
}