/*
	cube — 댓글 스티커 선택기.
	제목줄 40px / 왼쪽 팩 목록 70px(항목 60px, 썸네일 44px) / 오른쪽 격자 90px 셀 + 4px 간격.

	색만 arca 를 그대로 쓰지 않는다. 원본은 다크 단색(#333 / #222)이라 라이트 모드에서 그대로 쓰면
	게시판 안에서 이 패널만 검게 뜬다. 그래서 형태는 유지하고 색은 cube 토큰(00-tokens.css)으로 바꿔
	사이트 다크모드 토글을 그대로 따라가게 했다.

	반응형 규칙은 여기 두지 않는다 — 90-responsive.css 한 곳에만 둔다.
*/

.cube-sticker-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: auto;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid var(--cube-border-strong);
	font-size: 13px;
	font-weight: 600;
	color: var(--cube-text-muted);
	min-height: 36px;
}
.cube-sticker-btn svg {
	width: 16px;
	height: 16px;
}
.cube-sticker-btn:hover {
	background: var(--cube-bg-hover);
	color: var(--cube-text);
}
.cube-sticker-btn[aria-expanded="true"] {
	border-color: var(--cube-primary);
	color: var(--cube-primary);
}

.cube-sticker {
	margin-top: 10px;
	border: 1px solid var(--cube-border-strong);
	border-radius: 6px;
	overflow: hidden;
}
.cube-sticker.is-busy {
	opacity: .6;
	pointer-events: none;
}

.cube-sticker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	padding: 0 8px 0 14px;
	background: var(--cube-bg-sub);
	border-bottom: 1px solid var(--cube-border);
}
.cube-sticker-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--cube-text);
}
.cube-sticker-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	color: var(--cube-text-muted);
}
.cube-sticker-close svg {
	width: 14px;
	height: 14px;
}
.cube-sticker-close:hover {
	background: var(--cube-bg-hover);
	color: var(--cube-text);
}

.cube-sticker-main {
	display: flex;
	height: 300px;
}

/* 왼쪽 팩 목록. 페이지 이동 버튼이 목록의 위아래 끝에 붙는다 — 팩 목록 자체가 페이지 단위라서 그렇다. */
.cube-sticker-packs {
	flex: 0 0 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 0;
	background: var(--cube-bg-sub);
	border-right: 1px solid var(--cube-border);
	overflow-y: auto;
	scrollbar-width: thin;
}
.cube-sticker-pack {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
}
.cube-sticker-pack img,
.cube-sticker-pack video {
	width: 44px;
	height: 44px;
	border-radius: 4px;
	object-fit: cover;
}
.cube-sticker-pack:hover {
	background: var(--cube-bg-hover);
}
.cube-sticker-pack.is-active {
	background: var(--cube-bg-hover);
	box-shadow: inset 0 0 0 2px var(--cube-primary);
}
.cube-sticker-page {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 28px;
	border-radius: 4px;
	color: var(--cube-text-muted);
}
.cube-sticker-page svg {
	width: 16px;
	height: 16px;
}
.cube-sticker-page:hover:not(:disabled) {
	background: var(--cube-bg-hover);
	color: var(--cube-text);
}
.cube-sticker-page:disabled {
	opacity: .3;
	cursor: default;
}

/* 오른쪽 스티커 격자. 팩 이름은 스크롤해도 위에 붙어 있게 둔다(원본과 동일). */
.cube-sticker-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 8px 12px;
	overflow-y: auto;
	background: var(--cube-bg);
}
.cube-sticker-pack-title {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	padding: 8px 0 6px;
	background: var(--cube-bg);
	font-size: 13px;
	font-weight: 600;
	color: var(--cube-text-muted);
}
.cube-sticker-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.cube-sticker-item {
	width: 90px;
	height: 90px;
	border-radius: 4px;
	overflow: hidden;
}
.cube-sticker-item img,
.cube-sticker-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .12s ease;
}
.cube-sticker-item:hover img,
.cube-sticker-item:hover video {
	transform: scale(1.08);
}

/* 격자 아래 링크줄. 스티커 모듈 쪽 화면으로 나가는 통로라 패널 안에서 시각적으로 한 단 낮춘다. */
.cube-sticker-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding: 6px 8px;
	background: var(--cube-bg-sub);
	border-top: 1px solid var(--cube-border);
}
.cube-sticker-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cube-text-muted);
}
.cube-sticker-link svg {
	width: 14px;
	height: 14px;
}
.cube-sticker-link:hover {
	background: var(--cube-bg-hover);
	color: var(--cube-text);
	text-decoration: none;
}

.cube-sticker-msg {
	margin: 0;
	padding: 40px 12px;
	text-align: center;
	font-size: 13px;
	color: var(--cube-text-faint);
}