/* ==========================================================================
   MODULE: pages/timeline — 검색 목업 섹션 (홈 3번 "해결법은 인터넷에 없습니다")
   마크업: template-parts/hero/timeline.php

   원래 이 자리에는 연도 점 3개짜리 타임라인이 함께 있었다. 지금은 회사소개 글로
   옮겨 갔고(components/newsline.css + template-parts/components/newsline.php),
   홈에는 "검색해도 답이 없다"를 보여주는 브라우저 창 목업만 남는다.
   클래스 접두사(.wzs-newsline-sec / -inner / -close / -more)는 그대로 두었다 —
   이름을 바꾸면 preview-hero.html 까지 같이 훑어야 하는데, 예전에 그 일괄 치환으로
   무관한 블록(업무보고서 모달)까지 망가뜨린 적이 있다.

   창 껍데기(신호등 바, 모서리, 그림자)는 components/window.css 가 그린다.
   여기서는 폭과 안쪽 내용만 맡는다.
   ========================================================================== */

.wzs-newsline-sec {
	padding: var(--wzs-space-7) var(--wzs-space-4);
	background: var(--wzs-white);
}

.wzs-newsline-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

/* --- 검색 목업 --- */
.wzs-search {
	margin: 0 auto var(--wzs-space-6);
	max-width: 560px;
}

.wzs-search-field {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-2);
	padding: 10px 14px;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
}

/* 돋보기 — 원 하나에 손잡이 하나. 특정 검색엔진 아이콘을 흉내내지 않는다. */
.wzs-search-icon {
	position: relative;
	flex: none;
	width: 13px;
	height: 13px;
	border: 2px solid var(--wzs-ink-muted);
	border-radius: 999px;
}

.wzs-search-icon::after {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 6px;
	height: 2px;
	background: var(--wzs-ink-muted);
	transform: rotate(45deg);
}

.wzs-search-q {
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink);
	word-break: keep-all;
}

/* --- AI 요약 블록 ---
   요즘 검색은 결과 위에 요약이 먼저 붙는다. 그 요약이 "지금 무슨 일이 벌어지는가"만
   설명하고 "내 화물을 어떻게 하나"에는 답하지 않는다는 게 이 섹션의 요점이라,
   눈에 잘 띄되 답처럼 보이지는 않는 톤으로 둔다(옅은 보라 계열 판 + 작은 글씨). */
.wzs-search-ai {
	margin-top: var(--wzs-space-4);
	padding: var(--wzs-space-3);
	border-radius: 10px;
	background: #f4f3fb;
	border: 1px solid #e3e0f2;
}

.wzs-search-ai-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: #6c5ce7;
	color: var(--wzs-white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wzs-search-ai p {
	margin: var(--wzs-space-2) 0 0;
	font-size: var(--wzs-fs-sm);
	line-height: 1.65;
	color: var(--wzs-ink-soft);
	word-break: keep-all;
}

/* 생성형 답변에 으레 붙는 고지 문구. 이게 있어야 "요약일 뿐"이라는 게 읽힌다. */
.wzs-search-ai-note {
	display: block;
	margin-top: var(--wzs-space-2);
	font-size: 10px;
	color: var(--wzs-ink-muted);
}

/* 결과 목록.
   선택자를 두 겹으로 쓰는 이유: base/reset.css 의 `ul[class]`(특정성 0,1,1)가
   클래스 하나(0,1,0)를 이겨 padding/margin 이 0으로 눌린다. */
.wzs-window-body .wzs-search-results {
	margin: var(--wzs-space-4) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
}

.wzs-window-body .wzs-search-results li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wzs-search-t {
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: #2b57c4; /* 검색 결과 링크 느낌의 파랑 */
	word-break: keep-all;
}

.wzs-search-s {
	font-size: 11px;
	color: var(--wzs-ink-muted);
}

/* --- 마무리 한 줄 --- */
/* 줄 전체를 굵게 두지 않는다 — messages.css 의 맺음 문장과 같은 규칙이다. */
.wzs-newsline-close {
	margin: 0;
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

.wzs-newsline-close strong {
	font-weight: 700;
	color: var(--wzs-ink);
}

.wzs-newsline-more {
	margin-top: var(--wzs-space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	font-weight: 700;
	color: var(--wzs-blue);
	text-decoration: none;
	transition: gap var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-newsline-more:hover {
	gap: var(--wzs-space-2);
}

.wzs-newsline-more:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wzs-newsline-more {
		transition: none;
	}
}