/* FetchWhen List — 글목록 바.
 *
 * ★ 모든 선택자를 .fw-list-root 아래로 한정한다.
 *   fw-tools 2.0.4 때 범위를 안 좁힌 .fw-body 규칙이 글 본문 레이아웃을 바꿔
 *   라이브에서 본문 폭이 틀어진 적이 있다. 같은 실수를 되풀이하지 않는다.
 *
 * 폭·정렬은 테마의 본문 칸에 맞춘다 — 헤더 카테고리 메뉴와 같은 alignwide 폭이다.
 */

.fw-list-root {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin: 0 auto;
	/* 1.0.1: 좌우 padding 을 뺐다. 테마의 alignwide 상자는 홈·카테고리에서 패딩이
	   없어(폭 960 이 곧 최종 폭) 여기서 더하면 좌우가 50px 씩 안으로 밀린다 —
	   목록 바가 글 목록보다 좁아 보이던 원인이다. 글 페이지에 필요한 패딩은
	   헤더의 --fw-w 규칙이 준다(그 셀렉터 목록에 .fw-list-root 를 넣었다). */
	font-size: 13px;
	color: #333;
}

.fw-list-root *,
.fw-list-root *::before,
.fw-list-root *::after { box-sizing: border-box; }

/* ── 바 ── */
.fw-list-root .fw-list-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
}

.fw-list-root .fw-list-total {
	font-size: 13px;
	color: #555;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fw-list-root .fw-list-ctl {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.fw-list-root .fw-list-q {
	font: inherit;
	font-size: 12px;
	padding: 4px 8px;
	width: 130px;
	max-width: 40vw;
	border: 1px solid #ddd;
	border-radius: 4px;
	outline: none;
	background: #fff;
	color: inherit;
}

.fw-list-root .fw-list-q:focus { border-color: #bbb; }

.fw-list-root .fw-list-toggle {
	font: inherit;
	font-size: 12px;
	padding: 4px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
}

.fw-list-root .fw-list-toggle:hover { background: #f8fafc; }

/* ── 목록 ── */
.fw-list-root .fw-list { padding: 8px 0 0; }
.fw-list-root .fw-list[hidden] { display: none; }

.fw-list-root .fw-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	font-size: 12px;
	color: #888;
}

.fw-list-root .fw-list-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 7px 0;
	border-bottom: 1px solid #f4f4f4;
	min-width: 0;
}

/* 제목은 한 줄로 자르고 넘치면 … 로 끝낸다. 줄바꿈하지 않는다. */
.fw-list-root .fw-list-tt {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333;
	text-decoration: none;
}

.fw-list-root .fw-list-tt:hover { color: #111; text-decoration: underline; }

.fw-list-root .fw-list-cm {
	flex: 0 0 auto;
	font-size: 12px;
	color: #2563eb;
}

.fw-list-root .fw-list-dt {
	flex: 0 0 auto;
	font-size: 12px;
	color: #aaa;
	white-space: nowrap;
}

/* 지금 보고 있는 글 */
.fw-list-root .fw-list-row.is-current .fw-list-tt { font-weight: 700; color: #111; }

.fw-list-root .fw-list-empty {
	padding: 14px 0;
	font-size: 12px;
	color: #bbb;
}

/* ── 하단 컨트롤 줄 — 왼쪽 쪽 버튼, 오른쪽 줄 수 ──
   목록을 접어도 계속 보인다. 그래서 목록 밖(.fw-list-foot)에 따로 있다. */
/* 1.0.4: flex + space-between 이면 쪽 버튼이 왼쪽 끝에 붙는다.
   1fr auto 1fr 격자로 두어 가운데 칸이 진짜 가운데에 오게 한다.
   왼쪽 칸은 비워 두고, 줄 수 풀다운만 오른쪽 칸에 붙인다. */
.fw-list-root .fw-list-foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 10px 0 14px;
	border-top: 1px solid #f0f0f0;
}

/* 줄 수 풀다운 — 오른쪽 칸 (1.0.4) */
.fw-list-root .fw-list-rows {
	grid-column: 3;
	display: flex;
	justify-content: flex-end;
}

.fw-list-root .fw-list-sel {
	font: inherit;
	font-size: 12px;
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: inherit;
	cursor: pointer;
}

/* ── 쪽 버튼 — 하단 줄 가운데 (1.0.4) ── */
.fw-list-root .fw-list-pager {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

.fw-list-root .fw-list-pg,
.fw-list-root .fw-list-prev,
.fw-list-root .fw-list-next {
	font: inherit;
	font-size: 12px;
	min-width: 26px;
	padding: 4px 8px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #555;
	cursor: pointer;
	text-align: center;
}

.fw-list-root .fw-list-pg:hover,
.fw-list-root .fw-list-prev:hover,
.fw-list-root .fw-list-next:hover { background: #f3f4f6; color: #111; }

.fw-list-root span.fw-list-pg.is-cur {
	font-weight: 700;
	color: #111;
	cursor: default;
}

.fw-list-root .fw-list-gap {
	font-size: 12px;
	color: #bbb;
	padding: 0 2px;
}

/* ── 좁은 화면 ── */
@media (max-width: 600px) {
	.fw-list-root .fw-list-q { width: 96px; }
	.fw-list-root .fw-list-bar { gap: 8px; }
}

/* ── 아래 바 (1.3.0) ──────────────────────────────────────────
 * 글 목록 밑에 위와 같은 모양의 바를 한 벌 더 둔다.
 * 목록은 위쪽 한 곳에서만 그린다 — 같은 글을 두 번 보여 주지 않는다.
 * 폭·정렬은 위와 같다(헤더의 .fw-list-root 규칙을 그대로 물려받는다).
 */
.fw-list-root.is-bottom { margin-top: 20px; }

/* 위 바는 목록을 안고 있어 바 아래에 목록이 붙는다. 아래 바는 목록이 없으니
   바와 쪽 버튼 사이 간격을 위와 같게 맞춘다. */
.fw-list-root.is-bottom .fw-list-foot { padding-top: 8px; }

/* 글목록 안에 놓인 아래 바는 이미 본문 여백 안이다. 폭은 부모가 정한다 —
   헤더의 .wp-site-blocks > .fw-list-root 규칙은 여기에 닿지 않는다. */
.fw-list-root.is-bottom {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* 기댈 상자 없이 본문 끝에 붙은 아래 바 (1.4.0).
   고정페이지가 이 경우다. main 은 화면 전체 폭이라 그대로 두면 바가 좌우로
   퍼진다(1920 에서 50~1870 이었다). 다른 요소와 같이 960 가운데로 맞춘다.
   좁은 창에서는 main 이 이미 가장자리 여백을 갖고 있어 그 폭을 그대로 쓴다. */
.fw-list-root.is-bottom.is-loose {
	max-width: var(--fw-w, 960px);
	margin-left: auto;
	margin-right: auto;
}