/*
 * CommuBoard - comment sticker picker.
 *
 * Layout follows the cube skin's picker: 40px title bar, a 70px pack column on
 * the left (56px cells, 44px thumbnails) and a 90px grid on the right.
 *
 * Colors are taken from the skin's own tokens (css/theme.css) rather than the
 * sticker module's dark palette, so the panel follows the site color scheme
 * instead of turning into a black box inside a light board.
 */

/*
 * The button sits on the footer row next to 등록; the panel takes a full row of
 * its own underneath. The footer is a single flex line, so wrapping is allowed
 * here and only the panel is given a 100% basis to break onto the next line.
 */
.cb-comment-form__footer { flex-wrap: wrap; }

.cb-sticker-btn[aria-expanded="true"] {
	border-color: var(--cb-accent);
	color: var(--cb-accent);
	font-weight: 600;
}

.cb-sticker {
	flex: 0 0 100%;
	order: 1;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg);
	overflow: hidden;
}
.cb-sticker[hidden] { display: none; }
/* While a sticker is being posted the whole panel is inert. */
.cb-sticker.is-busy { opacity: 0.55; pointer-events: none; }

.cb-sticker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 34px;
	padding: 0 6px 0 10px;
	background: var(--cb-bg-sub);
	border-bottom: 1px solid var(--cb-border);
}
.cb-sticker__title {
	font-size: var(--cb-fs-meta);
	color: var(--cb-text);
}

.cb-sticker__main {
	display: flex;
	height: 290px;
}

/* Pack column. Paging buttons cap the list at both ends because the module
   itself returns packs one page at a time (PC 12 / mobile 5). */
.cb-sticker__packs {
	flex: 0 0 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 5px 0;
	background: var(--cb-bg-sub);
	border-right: 1px solid var(--cb-border);
	overflow-y: auto;
	scrollbar-width: thin;
}
.cb-sticker__pack {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}
.cb-sticker__pack img,
.cb-sticker__pack video {
	width: 44px;
	height: 44px;
	object-fit: cover;
}
.cb-sticker__pack:hover { background: var(--cb-bg-hover); }
.cb-sticker__pack.is-active {
	background: var(--cb-bg-hover);
	box-shadow: inset 0 0 0 2px var(--cb-accent);
}

.cb-sticker__page {
	flex: 0 0 auto;
	width: 56px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cb-text-muted);
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
}
.cb-sticker__page:hover:not(:disabled) {
	background: var(--cb-bg-hover);
	color: var(--cb-text);
}
.cb-sticker__page:disabled { opacity: 0.3; cursor: default; }

/* Sticker grid. The pack name stays pinned while the grid scrolls. */
.cb-sticker__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 8px 10px;
	overflow-y: auto;
	background: var(--cb-bg);
}
.cb-sticker__pack-title {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	padding: 7px 0 5px;
	background: var(--cb-bg);
	font-size: var(--cb-fs-meta);
	color: var(--cb-text-sub);
}
.cb-sticker__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.cb-sticker__item {
	width: 90px;
	height: 90px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}
.cb-sticker__item img,
.cb-sticker__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.12s ease;
}
.cb-sticker__item:hover img,
.cb-sticker__item:hover video { transform: scale(1.08); }

/* Links out to the sticker module's own pages. */
.cb-sticker__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding: 5px 8px;
	background: var(--cb-bg-sub);
	border-top: 1px solid var(--cb-border);
}
.cb-sticker__link {
	padding: 4px 8px;
	color: var(--cb-text-muted);
	font-size: var(--cb-fs-small);
}
.cb-sticker__link:hover {
	background: var(--cb-bg-hover);
	color: var(--cb-text);
	text-decoration: none;
}

.cb-sticker__msg {
	margin: 0;
	padding: 36px 12px;
	text-align: center;
	font-size: var(--cb-fs-meta);
	color: var(--cb-text-muted);
}

@media (max-width: 767px) {
	.cb-sticker__main { height: 240px; }
	.cb-sticker__packs { flex-basis: 56px; }
	.cb-sticker__pack { width: 46px; height: 46px; }
	.cb-sticker__pack img,
	.cb-sticker__pack video { width: 38px; height: 38px; }
	.cb-sticker__page { width: 46px; }
	.cb-sticker__item { width: 72px; height: 72px; }
}