/* ==========================================================================
   MODULE: pages/lineup — 홈 5번 "와주소가 하는 일" (다크 인덱스)
   마크업: template-parts/hero/lineup.php   그림: assets/icons/art/lineup-*.svg
   홈에서만 로드된다(inc/enqueue.php is_front_page).

   목차
     1) 섹션 틀 · 머리
     2) 줄 목록 (번호 · 이름 · 설명 · 그림 · 화살표)
     3) 그림판
     4) 화면 폭 (넓은 화면 → 태블릿 → 폰)
     5) 모션 줄이기

   왜 어두운 바탕인가: 앞 섹션(메신저 목업)이 흰색, 뒤 섹션(요금)이 회색이다. 여기가 밝으면
   요금표와 경계가 사라진다. 출장와주소도 어둡지만 사이에 흰 화면이 하나 있어 붙지 않는다.

   왜 카드가 아니라 줄인가: (1) 다음 요금 섹션이 카드 다섯 장이라 카드가 아홉 개 연달아 나온다.
   (2) 폰에서 카드를 세로로 쌓으면 섹션이 2,000px 을 넘는다(실측) — 줄 목록은 1,300px 안쪽이다.
   한 섹션이 한 화면인 홈 구조(pages/hero.css 스냅)에서는 이 차이가 크다.
   카드 디자인으로 되돌리려면 위 두 가지를 먼저 풀 것.
   ========================================================================== */


/* ==========================================================================
   1) 섹션 틀 · 머리
   ========================================================================== */

/* 위아래 여백이 96px 이면 네 줄짜리 섹션이 노트북 화면(세로 900px 안팎) 하나를 넘어
   마지막 줄이 잘린다. 홈은 한 섹션이 한 화면인 구조라(pages/hero.css 스냅) 64px 로 줄인다. */
.wzs-lineup {
	padding: var(--wzs-space-7) var(--wzs-space-4);
	background: var(--wzs-ink);
}

.wzs-lineup-inner {
	max-width: var(--wzs-container);
	margin: 0 auto;
}

/* 머리는 옆 섹션(pages/timeline.css)과 같은 .wzs-section-head 를 쓴다 — 제목 크기를 여기서 따로
   건드리지 말 것. 스크롤로 바로 이어지는 자리라 한쪽만 커지면 티가 난다. 어두운 바탕이라 색만 덮는다. */
.wzs-lineup-head {
	margin-bottom: var(--wzs-space-6);
}

.wzs-lineup-head h2 {
	color: var(--wzs-white);
}

/* 제목 아래 영문 한 줄. 문장이 아니라 표기라서 본문 글꼴이 아닌 전시용 글꼴로, 자간을 넓혀
   한 덩어리로 보이게 한다. .wzs-section-head p 의 본문 색·행간을 덮어쓴다. */
.wzs-lineup-head .wzs-lineup-en {
	margin-top: var(--wzs-space-3);
	color: rgba(255, 255, 255, 0.45);
	font-family: var(--wzs-font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1;
	/* 자간을 주면 마지막 글자 뒤에도 빈칸이 생겨 가운데가 왼쪽으로 밀려 보인다 */
	text-indent: 0.22em;
}


/* ==========================================================================
   2) 줄 목록
   한 줄 = 번호 · 이름(+한 줄 분류) · 설명 · 그림 · 화살표. 줄 전체가 링크다.
   칸 너비를 1fr 로 나누지 않고 그림·번호·화살표를 고정폭으로 두는 이유: 네 줄의 번호와
   화살표가 세로로 딱 맞아떨어져야 "목차"로 읽힌다. 글 길이에 따라 흔들리면 안 된다.
   ========================================================================== */

/* ul 을 붙이는 이유: base/reset.css 의 ul[class](0,1,1)가 클래스 하나를 이긴다 */
ul.wzs-lineup-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wzs-lineup-row {
	display: grid;
	grid-template-columns: 60px minmax(180px, 1fr) minmax(0, 1.2fr) 160px 20px;
	align-items: center;
	gap: var(--wzs-space-4);
	padding: var(--wzs-space-3) var(--wzs-space-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-lineup-row:hover {
	background: rgba(255, 255, 255, 0.05);
}

/* 어두운 바탕에서는 파란 외곽선(--wzs-blue)이 거의 안 보여 앰버로 둔다.
   앰버를 장식에 쓰지 않는다는 규칙(base/variables.css)의 예외 — 키보드 초점은 장식이 아니다. */
.wzs-lineup-row:focus-visible {
	outline: 2px solid var(--wzs-amber);
	outline-offset: -2px;
}

.wzs-lineup-num {
	font-family: var(--wzs-font-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.38);
}

.wzs-lineup-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wzs-lineup-title {
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
	color: var(--wzs-white);
}

.wzs-lineup-kicker {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
}

.wzs-lineup-desc {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}

.wzs-lineup-arrow {
	justify-self: end;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.45);
	transition: transform var(--wzs-duration-fast) var(--wzs-ease),
		color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-lineup-row:hover .wzs-lineup-arrow {
	transform: translateX(4px);
	color: var(--wzs-white);
}


/* ==========================================================================
   3) 그림판
   그림 안 도형이 먹색이라 어두운 바탕에 그대로 두면 사라진다 — 밝은 파랑 판을 깔고 그 위에 그린다.
   ========================================================================== */

.wzs-lineup-art {
	display: block;
	/* 그림 폭이 줄 높이를 정한다(그림 비율 4:3). 160px → 120px 높이 → 줄 하나 약 160px.
	   키우면 네 줄이 한 화면을 넘는다 — 위 섹션 여백 주석과 같이 볼 것. */
	width: 160px;
	border-radius: var(--wzs-radius-md);
	background: var(--wzs-blue-soft);
	overflow: hidden;
}

.wzs-lineup-art svg {
	display: block;
	width: 100%;
	height: auto;
}


/* ==========================================================================
   4) 화면 폭
   1000px 아래: 설명을 이름 밑으로 내리고 그림을 줄 높이만큼 작게(두 줄을 세로로 덮는다).
   620px 아래: 그림을 뺀다 — 128px 짜리 그림이 글자를 밀어내고 줄이 세 겹으로 접힌다.
   ========================================================================== */

@media (max-width: 1000px) {
	/* 칸을 네 개로 줄이고 설명을 이름 밑으로 내린다. 칸 위치를 하나도 빠짐없이 적어 주는 이유:
	   grid-row 만 주고 grid-column 을 비워 두면 자동 배치가 글 상자를 번호 칸(36px)으로 밀어 넣어
	   "업무대행"이 두 줄로 쪼개진다 — 실제로 그랬다. 한 칸이라도 지우지 말 것. */
	.wzs-lineup-row {
		grid-template-columns: 48px minmax(0, 1fr) 128px 20px;
	}

	/* 번호는 두 줄(이름+설명)을 세로로 덮지만, 가운데에 두면 이름과 설명 사이에 끼어 어정쩡하다.
	   위로 붙이고 글자 높이만큼 내려 이름과 같은 줄에 보이게 한다. */
	.wzs-lineup-num {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: start;
		padding-top: 5px;
	}

	.wzs-lineup-text {
		grid-column: 2;
		grid-row: 1;
	}

	.wzs-lineup-desc {
		grid-column: 2;
		grid-row: 2;
		margin-top: 6px;
	}

	.wzs-lineup-art {
		grid-column: 3;
		grid-row: 1 / 3;
		width: 128px;
	}

	.wzs-lineup-arrow {
		grid-column: 4;
		grid-row: 1 / 3;
	}
}

@media (max-width: 620px) {
	.wzs-lineup {
		padding: var(--wzs-space-7) var(--wzs-space-3);
	}

	/* 그림을 뺀다 — 128px 짜리 그림이 글자를 밀어내 줄이 세 겹으로 접힌다. */
	.wzs-lineup-row {
		grid-template-columns: 36px minmax(0, 1fr) 18px;
		gap: var(--wzs-space-3);
		padding: var(--wzs-space-3) 0;
	}

	.wzs-lineup-art {
		display: none;
	}

	.wzs-lineup-arrow {
		grid-column: 3;
		grid-row: 1 / 3;
	}

	.wzs-lineup-title {
		font-size: var(--wzs-fs-lg);
	}
}


/* ==========================================================================
   5) 모션 줄이기
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wzs-lineup-row,
	.wzs-lineup-arrow {
		transition: none;
	}

	.wzs-lineup-row:hover .wzs-lineup-arrow {
		transform: none;
	}
}