/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

* {
	/* (모든 요소)에 대해 "절대 부모보다 커지지 마라"는 규칙을 전역으로 강제하는 코드입니다. */
	min-width: 0;
	box-sizing: border-box;
}

/* == Pagy 페이지네이션 ================================ */

.pagy.series-nav {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
}
.pagy.series-nav a {
	padding: 2px 10px;
	/* 사각형 박스 크기 조절: font-padding, font-weight*/
	font-size: 14px;
	font-weight: 400;
	color: var(--color-gray-950);
	background-color: var(--color-gray-200);
	border: 1px solid var(--color-gray-400);
	border-radius: 4px;
}
.pagy.series-nav a:hover {
	background-color: var(--color-gray-100);
}
/* 현재 페이지 */
.pagy.series-nav a[aria-current="page"] {
	background-color: var(--color-gray-500);
	color: white;
	font-weight: bold;
	border-color: var(--color-gray-900);
}
/* ------------------------------ */
/* [role="separator"] */
/* 페이지 수가 많아서 중간이 생략될 때 나타나는 …(말줄임표)를 꾸미는 용도입니다. */
/* 예: 1 2 3 4 … 20에서 …가 separator입니다. 클릭할 수 없으므로 테두리를 없애고 연한 색으로 표시한 것입니다. */
/* 페이지 수가 적어 …가 안 나타나면 적용될 일이 없습니다. */
*/
/* ------------------------------ */
.pagy.series-nav a[role="separator"] {
	border: none;
	color: #9ca3af;
}

/* Pagy: 좌.우 화살표 변경 */
/* ------------------------------ */
.pagy.series-nav a:first-child,
.pagy.series-nav a:last-child {
	font-size: 0;
	width: 27px;
	height: 27px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pagy.series-nav a:first-child::before {
	content: "◀";
	font-size: 12px;
}
.pagy.series-nav a:last-child::before {
	content: "▶";
	font-size: 12px;
}
/* 비활성 화살표를 흐리게 */
.pagy.series-nav a:first-child[aria-disabled="true"],
.pagy.series-nav a:last-child[aria-disabled="true"] {
	opacity: 0.4;
}