/**
 * 본문 아래 시리즈 목록. 시리즈에 속한 글에서만 불러온다.
 *
 * 한 벌의 유동 레이아웃(flex-wrap)이다. 데스크톱(style.css), 모바일(style_mobile.css),
 * ?mode=pcinmobile 모두 같은 규칙이 적용되므로 테마 CSS를 따로 고치지 않는다.
 * 상태는 색이 아니라 텍스트(연재 중/완결, 현재 글)로 알리고, 터치 영역은 44px 이상으로 둔다.
 */

/*
 * 본문 아래 시리즈 목록. 테두리·배경 없이 본문과 구분하는 위쪽 선만 둔다.
 * 글자 크기는 본문과 같다. 본문 크기는 zhengjian-font-size 플러그인이 독자의 선택(작게~크게)에
 * 따라 정하므로, 그 플러그인이 내보내는 --zj-body-font-size 를 그대로 쓴다. 변수가 없으면
 * (플러그인이 꺼져 있으면) 테마 기본 본문 크기(.entry-content, 1.0625rem)를 쓴다.
 * 안쪽 요소는 rem 이 아니라 em 이라서 이 크기를 따라간다.
 */
.single .zj-series {
	clear: both;
	font-size: var(--zj-body-font-size, 1.0625rem);
	box-sizing: border-box;
	margin: 2em 0 1.5em;
	padding: 1em 0 0;
	border: 0;
	border-top: 1px solid #ccc;
	background: none;
	color: #333;
}

/*
 * 제목줄: 왼쪽에 시리즈 이름·편 수·연재 상태, 오른쪽 끝에 시리즈 전체 목록 링크.
 * 제목은 남는 폭을 차지하고(좁으면 이름과 편 수가 두 줄로 접힌다), 링크는 줄바꿈 없이 오른쪽 끝에 둔다.
 * 제목이 최소 폭(6em)도 못 얻을 만큼 좁을 때(320px에서 큰 글자 등)만 링크가 다음 줄 오른쪽으로 내려간다.
 */
.single .zj-series .zj-series-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 1em;
	margin: 0 0 0.4em;
}

.single .zj-series .zj-series-title {
	display: flex;
	flex: 1 1 6em;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
	gap: 0.2em 0.6em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #333;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
}

.single .zj-series .zj-series-summary {
	color: #555;
	font-size: 0.9em;
	font-weight: 400;
}

/*
 * 현재 편 주변 목록. 번호를 브라우저 기본 목록 번호로 그리면 자릿수가 늘 때(9 → 10) 번호가 왼쪽으로
 * 삐져나가 제목 시작점이 어긋난다. 번호는 왼쪽 정렬한 고정 폭 칸에 직접 그리고, 칸 폭은
 * 목록이 지정하는 --zj-digits(전체 편 수의 자릿수)로 정해서 제목이 항상 같은 x 에서 시작한다.
 *
 * 행간(항목 사이 간격)은 한 줄 높이(line-height 1.4em) + 위아래 여백이다. 처음에는 여백이
 * 0.7em 씩이라 한 항목이 2.8em 이었고, 이를 2/3(약 1.867em)로 줄여 위아래 여백을 0.2333em 으로 둔다.
 * 항목이 여러 줄로 접힐 때 줄 사이 간격(line-height)은 그대로다.
 */
.single .zj-series .zj-series-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single .zj-series .zj-series-item {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

.single .zj-series .zj-series-num {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: calc((var(--zj-digits, 2) + 1) * 0.65em);
	padding: 0.2333em 0.5em 0.2333em 0;
	color: #555;
	font-variant-numeric: tabular-nums;
	text-align: left;
}

.single .zj-series .zj-series-label {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.2333em 0;
	overflow-wrap: anywhere;
}

.single .zj-series .zj-series-item a.zj-series-label {
	color: #03c;
	text-decoration: none;
}

.single .zj-series .zj-series-item a.zj-series-label:hover,
.single .zj-series .zj-series-item a.zj-series-label:focus {
	color: #d6781c;
	text-decoration: underline;
}

/* 현재 글은 본문 제목(.content-area .contents-title > .entry-title, 테마 style.css)과 같은 색이다. */
.single .zj-series .zj-series-item.is-current .zj-series-num,
.single .zj-series .zj-series-item.is-current .zj-series-label {
	color: #996601;
	font-weight: 700;
}

.single .zj-series .zj-series-current-text {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0 0.5em;
	border: 1px solid #555;
	border-radius: 3px;
	font-size: 0.75em;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
}

.single .zj-series .zj-series-gap {
	margin: 0;
	padding: 0.2em 0;
	color: #777;
	line-height: 1.4;
}

/* 시리즈 전체 목록 링크(제목줄 오른쪽 끝) */
.single .zj-series .zj-series-all {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 44px;
	margin-left: auto;
	color: #03c;
	font-weight: 400;
	text-decoration: underline;
	white-space: nowrap;
}

.single .zj-series .zj-series-all:hover,
.single .zj-series .zj-series-all:focus {
	color: #d6781c;
}

/* 키보드 포커스는 어떤 링크에서도 보이게 유지한다. */
.single .zj-series a:focus {
	outline: 2px solid #3b6ff5;
	outline-offset: 2px;
}