/* ============================================================
   CUBE — 카테고리 탭 · 페이지네이션
   ============================================================ */


/* ============================================================
   1. 카테고리 기본
   ============================================================ */

.cube-cats {
	display: block;

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

	margin: 4px 0 4px;

	padding-top: 0;
	padding-bottom: 0;

	box-sizing: border-box;
}


/* ============================================================
   2. 카테고리 탭
   ============================================================ */

.cube-cat-tabs {
	display: flex;

	align-items: center;

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

	gap: 5px;

	margin: 0;

	padding: 4px 0;

	box-sizing: border-box;

	overflow-x: auto;
	overflow-y: hidden;

	white-space: nowrap;

	scroll-snap-type: x proximity;

	scrollbar-width: none;
	-ms-overflow-style: none;

	-webkit-overflow-scrolling: touch;
}

.cube-cat-tabs::-webkit-scrollbar {
	display: none;
}


/* ============================================================
   3. 카테고리 버튼
   ============================================================ */

.cube-cat-tab {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: auto;
	min-width: 0;

	padding: 9px 16px;

	margin: 0;

	box-sizing: border-box;

	border-radius: 999px;

	font-size: 15px;
	font-weight: 600;

	line-height: 1.1;

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

	background: var(--cube-bg-sub);

	white-space: nowrap;

	text-decoration: none;

	scroll-snap-align: start;
}

.cube-cat-tab:hover {
	background: var(--cube-bg-hover);
}

.cube-cat-tab.is-active {
	background: var(--cube-text);

	color: var(--cube-bg);

	font-weight: 700;
}


/* ============================================================
   4. 모바일 Select
   ============================================================ */

.cube-cat-select {
	display: none;

	width: 100%;

	padding: 10px 12px;

	border-radius: 8px;

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

	background: var(--cube-bg);

	box-sizing: border-box;
}


/* ============================================================
   5. 페이지네이션
   ============================================================ */

.cube-pager-wrap {
	margin: 24px 0;
}

.cube-pagination {
	display: flex;

	justify-content: center;
	align-items: center;

	gap: 2px;

	flex-wrap: wrap;
}

.cube-page-link {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 44px;
	min-height: 44px;

	padding: 0 8px;

	border-radius: 6px;

	font-size: 14px;

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

.cube-page-link:hover {
	background: var(--cube-bg-hover);
}

.cube-page-link.is-active {
	background: var(--cube-text);

	color: var(--cube-bg);

	font-weight: 700;
}

.cube-page-link svg {
	width: 16px;
	height: 16px;
}


/* ============================================================
   6. 더보기
   ============================================================ */

.cube-loadmore-btn {
	display: block;

	width: 100%;
	max-width: 320px;

	margin: 24px auto;

	padding: 12px;

	text-align: center;

	border-radius: 8px;

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

	font-weight: 600;

	min-height: 44px;

	box-sizing: border-box;
}

.cube-loadmore-btn:hover {
	background: var(--cube-bg-hover);
}


/* ============================================================
   7. 무한 스크롤
   ============================================================ */

.cube-sentinel {
	height: 1px;
}


/* ============================================================
   8. 모바일 카테고리
   ============================================================ */

@media (max-width: 768px) {

	/*
		중요:
		카테고리 자체만 화면 안에 가둔다.
		부모 cube-wrap의 폭은 여기서 수정하지 않는다.
	*/

	.cube-cats {
		display: block !important;

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

		margin: 4px 0 6px !important;

		padding-top: 0 !important;
		padding-bottom: 0 !important;

		box-sizing: border-box;

		overflow: hidden !important;
	}


	/*
		실제 가로 스크롤은 이 부분만 담당
	*/

	.cube-cat-tabs {
		display: flex !important;

		align-items: center !important;

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

		height: auto !important;

		gap: 6px !important;

		margin: 0 !important;

		padding: 4px 0 6px !important;

		box-sizing: border-box;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		white-space: nowrap !important;

		scroll-snap-type: x proximity;

		scrollbar-width: none;

		-webkit-overflow-scrolling: touch;
	}


	.cube-cat-tabs::-webkit-scrollbar {
		display: none;
	}


	/*
		분류 버튼
	*/

	.cube-cat-tab {
		display: inline-flex !important;

		align-items: center !important;
		justify-content: center !important;

		flex: 0 0 auto !important;

		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;

		min-height: 42px !important;

		padding: 9px 16px !important;

		margin: 0 !important;

		box-sizing: border-box;

		border-radius: 999px !important;

		font-size: 15px !important;
		font-weight: 600 !important;

		line-height: 1 !important;

		white-space: nowrap !important;

		text-align: center !important;

		visibility: visible !important;
		opacity: 1 !important;

		scroll-snap-align: start;
	}


	.cube-cat-tab.is-active {
		font-weight: 700 !important;
	}


	/*
		Select는 사용하지 않음
	*/

	.cube-cat-select {
		display: none !important;
	}
}


/* ============================================================
   9. 480px 이하
   ============================================================ */

@media (max-width: 480px) {

	.cube-cats {
		margin: 3px 0 5px !important;
	}


	.cube-cat-tabs {
		gap: 5px !important;

		padding: 3px 0 5px !important;
	}


	.cube-cat-tab {
		min-height: 40px !important;

		padding: 8px 15px !important;

		font-size: 15px !important;
	}
}