/* AI 숏폼 — 전체 목록 전용(검색/정렬/페이지네이션). shortform.css 뒤에 링크한다.
   토큰과 카드/그리드는 shortform.css 에 있다. */

/* ================================================================ 목록 툴바 */

.sf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--sf-line);
	font-family: var(--fn-sans);
}

.sf-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 320px;
	max-width: 460px;
	min-width: 0;
}

.sf-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 18px;
	border: 1px solid var(--sf-line);
	border-radius: 25px;
	background-color: var(--sf-paper);
	font-family: var(--fn-sans);
	font-size: 16px;
	color: var(--sf-ink);
	transition: border-color var(--duration-fast) linear, box-shadow var(--duration-fast) linear;
}

.sf-search input[type="text"]::placeholder {
	color: var(--sf-ink-sub);
}

.sf-search input[type="text"]:focus {
	outline: none;
	border-color: var(--sf-blue);
	box-shadow: 0 0 0 3px rgba(0, 118, 206, 0.18);
}

.sf-search-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: 25px;
	background-color: var(--sf-blue);
	color: var(--sf-paper);
	font-family: var(--fn-sans);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-out-expo),
		box-shadow var(--duration-fast) linear;
}

.sf-search-btn:hover {
	box-shadow: 0 6px 16px rgba(0, 118, 206, 0.32);
}

.sf-search-btn:active {
	transform: scale(0.96);
}

.sf-search-btn:focus-visible {
	outline: var(--sf-focus-ring);
	outline-offset: var(--sf-focus-offset);
}

/* header.css 의 전역 `nav { width: 73%; height: 100% }` 를 되돌린다.
   사이트 전체 CSS 에 요소 선택자가 있어 신규 <nav> 가 그대로 영향을 받는다. */
.sf-sort,
.sf-pager {
	position: relative;
	width: auto;
	height: auto;
}

.sf-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.sf-sort-link {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 20px;
	border: 1px solid var(--sf-line);
	border-radius: 21px;
	background-color: var(--sf-paper);
	font-size: 15px;
	color: var(--sf-ink-sub);
	transition: transform var(--duration-fast) var(--ease-out-expo),
		background-color var(--duration-fast) linear, color var(--duration-fast) linear;
}

.sf-sort-link:hover {
	background-color: var(--sf-surface);
	color: var(--sf-ink);
}

.sf-sort-link:active {
	transform: scale(0.96);
}

.sf-sort-link:focus-visible {
	outline: var(--sf-focus-ring);
	outline-offset: 2px;
}

.sf-sort-link.is-current {
	border-color: var(--sf-blue);
	background-color: var(--sf-blue);
	color: var(--sf-paper);
	font-weight: 700;
}

.sf-count {
	margin: 0;
	padding: 26px 0 var(--sf-block-gap) 0;
	font-family: var(--fn-sans);
	font-size: 17px;
	color: var(--sf-ink-sub);
}

.sf-count strong {
	font-weight: 700;
	color: var(--sf-blue);
}

.subBottom .sf-inner .emptyList {
	margin-bottom: 20px;
}

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

.sf-pager {
	padding-top: calc(var(--sf-block-gap) + 8px);
}

.sf-pager ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sf-pager-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	border: 1px solid var(--sf-line);
	border-radius: 22px;
	background-color: var(--sf-paper);
	font-family: var(--fn-sans);
	font-size: 16px;
	color: var(--sf-ink-sub);
	transition: transform var(--duration-fast) var(--ease-out-expo),
		background-color var(--duration-fast) linear, color var(--duration-fast) linear;
}

.sf-pager-link:hover {
	background-color: var(--sf-surface);
	color: var(--sf-ink);
}

.sf-pager-link:active {
	transform: scale(0.94);
}

.sf-pager-link:focus-visible {
	outline: var(--sf-focus-ring);
	outline-offset: 2px;
}

.sf-pager-link.is-current {
	border-color: var(--sf-blue);
	background-color: var(--sf-blue);
	color: var(--sf-paper);
	font-weight: 700;
}

.sf-pager-arrow {
	font-size: 22px;
	line-height: 1;
}

/* ================================================================== 반응형 */

@media all and (max-width: 768px) {
	.sf-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	/* 세로 배치에서는 flex-basis 가 '높이'가 되므로 가로용 flex 값을 되돌린다. */
	.sf-search,
	.sf-sort {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.sf-sort {
		justify-content: center;
	}

	.sf-sort-link {
		flex: 1 1 0;
		justify-content: center;
		padding: 0 12px;
	}

	.sf-count {
		padding-bottom: 24px;
		text-align: center;
	}

	.sf-pager ul {
		flex-wrap: wrap;
	}

	.sf-pager-link {
		min-width: 40px;
		height: 40px;
	}
}

/* ============================================================ 모션 최소화 */

@media (prefers-reduced-motion: reduce) {
	.sf-search input[type="text"],
	.sf-search-btn,
	.sf-sort-link,
	.sf-pager-link {
		transition: none;
	}

	.sf-search-btn:active,
	.sf-sort-link:active,
	.sf-pager-link:active {
		transform: none;
	}
}