/* ==========================================================================
   MODULE: components/newsline — 가로선 위의 연도 점 + 신문 헤드라인 팝업
   마크업: template-parts/components/newsline.php, 동작: assets/js/modules/timeline.js

   원래 홈 3번 섹션 안에 있었고 CSS 도 pages/timeline.css 에 같이 들어 있었다.
   회사소개 글(#reality-story)이 같은 세 사건을 이미 문장으로 설명하고 있어 그쪽으로
   옮기면서, 홈 전용 CSS 를 벗어났으므로 컴포넌트로 승격했다.
   홈에는 이제 검색 목업만 남는다(pages/timeline.css).

   클래스 이름이 "timeline" 이 아니라 "newsline" 인 이유:
   components/report-preview.css 가 이미 .wzs-timeline / -item / -dot / -line 을
   업무보고서 진행 타임라인용으로 쓰고 있다. 같은 이름을 쓰면 어느 쪽이 이길지가
   파일 로드 순서에 달리게 되고, 실제로 이 섹션이 세로로 눌리고 마무리 문장이 2px 로
   찌그러졌다. 이름을 겹치지 말 것 — 특정성을 올려 덮는 방식으로 때우지도 말 것.

   어두운 사진 배경 위에서의 색 보정은 pages/services.css 가 맡는다
   (이 파일은 밝은 배경 기준값만 정의한다).
   ========================================================================== */

/* --- 타임라인 ---
   선택자에 요소명(ol)을 붙이는 이유: base/reset.css 의 `ol[class]`(특정성 0,1,1)가
   클래스 하나(0,1,0)를 이겨 padding/margin 이 0으로 눌린다. `ol.wzs-newsline` 은
   특정성이 같고(0,1,1) 컴포넌트 CSS 가 reset 뒤에 로드되므로 순서로 이긴다.
   이 프로젝트에서 같은 함정으로 목록이 두 번 깨졌다 — 특정성을 낮추지 말 것.

   가로선은 ::before 로 한 줄 긋고, 점 3개를 space-between 으로 벌린다.
   양 끝 점이 선 끝에 딱 붙지 않도록 선을 안쪽으로 들여 그린다.

   아래 margin 이 큰 이유: 신문 팝업은 absolute 라 문서 흐름에서 빠져 있어, 여백을
   비워 두지 않으면 바로 아래 내용을 덮는다(실제로 2020 팝업이 다음 블록을 가렸다).
   팝업 높이(아래 .wzs-news 의 min-height)와 위 간격을 합친 값이라 한쪽을 바꾸면
   다른 쪽도 같이 봐야 한다.
   흐름 안에 넣으면(absolute 해제) 팝업을 열고 닫을 때마다 아래 내용이 통째로
   밀려 올라갔다 내려가므로 그 방법은 쓰지 않는다. */
ol.wzs-newsline {
	position: relative;
	margin: 0 0 calc(232px + var(--wzs-space-6));
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

ol.wzs-newsline::before {
	content: '';
	position: absolute;
	left: 8%;
	right: 8%;
	top: 11px;
	height: 2px;
	background: var(--wzs-border);
}

.wzs-newsline-item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --- 연도 점(버튼) --- */
.wzs-newsline-dot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wzs-space-2);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--wzs-ink-muted);
	font-weight: 700;
}

.wzs-newsline-dot::before {
	content: '';
	width: 16px;
	height: 16px;
	margin-top: 4px;
	border-radius: 999px;
	background: var(--wzs-white);
	border: 3px solid var(--wzs-ink-muted);
	transition: transform var(--wzs-duration-fast) var(--wzs-ease),
		border-color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-newsline-dot:hover::before,
.wzs-newsline-dot[aria-expanded='true']::before {
	transform: scale(1.25);
	border-color: var(--wzs-blue);
}

.wzs-newsline-dot:hover,
.wzs-newsline-dot[aria-expanded='true'] {
	color: var(--wzs-ink);
}

.wzs-newsline-dot:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 4px;
	border-radius: 6px;
}

.wzs-newsline-year {
	font-size: var(--wzs-fs-sm);
}

/* 마지막 점(2026)만 앰버로 두고 은은하게 깜빡인다 — 진행 중이라는 신호.
   깜빡임은 자동 재생 모션이라 모션 감소 설정에서는 끈다(맨 아래). */
.wzs-newsline-item.is-now .wzs-newsline-dot::before {
	border-color: var(--wzs-amber);
	background: var(--wzs-amber);
	animation: wzs-pulse 2.4s ease-in-out infinite;
}

.wzs-newsline-item.is-now .wzs-newsline-dot {
	color: var(--wzs-amber-ink);
}

@keyframes wzs-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(217, 140, 31, 0.5); }
	50% { box-shadow: 0 0 0 8px rgba(217, 140, 31, 0); }
}

/* --- 신문 헤드라인 팝업 ---
   실제 지면이 아니라 지면의 "형식"만 흉내낸다. 사진은 자체 촬영분을 흑백으로 깔아
   신문 느낌을 낸다(저작권 때문에 보도사진은 쓰지 않는다 — 마크업 주석 참고). */
.wzs-news {
	position: absolute;
	top: calc(100% + var(--wzs-space-3));
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: min(260px, 78vw);
	/* 세 팝업의 헤드라인 줄 수가 달라 높이가 제각각이면, 위에서 비워 둔 여백과 어긋난다.
	   가장 긴 것(2줄) 기준으로 맞춰 어느 걸 열어도 같은 자리에 같은 크기로 뜬다. */
	min-height: 232px;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
	padding: var(--wzs-space-3);
	background: #fbfaf7; /* 신문 용지 느낌의 미색 */
	border: 1px solid var(--wzs-border);
	border-top: 3px solid var(--wzs-ink);
	border-radius: 4px;
	box-shadow: var(--wzs-shadow-lg);
	text-align: left;
}

.wzs-news[hidden] {
	display: none;
}

/* --- 양 끝 팝업은 안쪽으로 붙인다 ---
   가운데 정렬(left:50% + translateX(-50%))만 쓰면 첫 점의 팝업이 왼쪽으로 130px 삐져나가
   좁은 화면에서 잘렸다(창 폭 800px 대에서 재현). 첫 점은 왼쪽 맞춤, 마지막 점은 오른쪽
   맞춤으로 두면 어느 폭에서도 타임라인 안에 들어온다. 가운데 점만 원래대로 가운데.
   점 개수가 3개가 아니게 되면 이 규칙도 다시 볼 것. */
.wzs-newsline-item:first-child .wzs-news {
	left: 0;
	transform: none;
}

.wzs-newsline-item:last-child .wzs-news {
	left: auto;
	right: 0;
	transform: none;
}

.wzs-news-photo {
	display: block;
	height: 96px;
	border-radius: 2px;
	background-size: cover;
	background-position: center;
	filter: grayscale(1) contrast(1.1);
}

.wzs-news-head {
	font-size: var(--wzs-fs-base);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wzs-ink);
	word-break: keep-all;
}

.wzs-news-meta {
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
}

/* --- 좁은 화면: 세로 타임라인 ---
   점 3개가 가로로 붙으면 손가락으로 누르기 어렵다. 세로로 세우고 팝업은
   점 오른쪽이 아니라 아래에 붙여 화면 밖으로 밀려나지 않게 한다. */
@media (max-width: 640px) {
	/* 좁은 화면에서는 팝업이 흐름 안(static)에 들어가므로, 위에서 비워 둔
	   데스크톱용 여백(232px)을 되돌린다 — 그대로 두면 빈 공간만 커진다. */
	ol.wzs-newsline {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wzs-space-4);
		padding-left: var(--wzs-space-2);
		margin-bottom: var(--wzs-space-6);
	}

	.wzs-news {
		min-height: 0;
	}

	ol.wzs-newsline::before {
		left: 11px;
		right: auto;
		top: 12px;
		bottom: 12px;
		width: 2px;
		height: auto;
	}

	.wzs-newsline-item {
		flex: none;
		width: 100%;
		align-items: flex-start;
	}

	/* 손가락이 닿는 높이(44px)를 확보한다 — 점만 16px 이라 그대로 두면 누르기 어렵다.
	   가로 폭도 넓혀서 연도 글자 옆 빈 곳을 눌러도 열리게 한다. */
	.wzs-newsline-dot {
		flex-direction: row;
		align-items: center;
		gap: var(--wzs-space-3);
		width: 100%;
		min-height: 44px;
		padding: var(--wzs-space-2) 0;
		justify-content: flex-start;
	}

	.wzs-newsline-dot::before {
		margin-top: 0;
	}

	.wzs-news {
		position: static;
		transform: none;
		margin-top: var(--wzs-space-2);
		margin-left: calc(16px + var(--wzs-space-3));
		width: calc(100% - 16px - var(--wzs-space-3));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wzs-newsline-item.is-now .wzs-newsline-dot::before {
		animation: none;
	}

	.wzs-newsline-dot::before {
		transition: none;
	}

	.wzs-newsline-dot:hover::before,
	.wzs-newsline-dot[aria-expanded='true']::before {
		transform: none;
	}
}