/* ==========================================================================
   MODULE: components/window (.wzs-window)
   맥 창 모양 프레임. 안에 무엇을 넣든 "화면 안의 화면"으로 읽히게 하는 껍데기다.

   쓰는 곳
     홈 3번 검색 목업 (template-parts/hero/timeline.php)
     홈 자가진단      (template-parts/hero/checklist.php)

   왜 컴포넌트로 뺐나: 창 모양을 두 곳에서 각자 그리면 신호등 크기·바 높이·모서리
   굴림이 조금씩 갈라진다. 한 곳에서 정의하고 안쪽 내용만 각 페이지 CSS 가 맡는다.

   구조
     .wzs-window
       .wzs-window-bar     신호등 + 제목
       .wzs-window-body    내용 (여백은 쓰는 쪽에서 조정)
   ========================================================================== */

.wzs-window {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wzs-border);
	box-shadow: var(--wzs-shadow-md);
	background: var(--wzs-white);
	text-align: left;
}

.wzs-window-bar {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-3);
	padding: 10px var(--wzs-space-3);
	background: var(--wzs-bg-alt);
	border-bottom: 1px solid var(--wzs-border);
}

.wzs-window-dots {
	display: inline-flex;
	gap: 5px;
	flex: none;
}

.wzs-window-dots i {
	width: 10px;
	height: 10px;
	border-radius: 999px;
}

/* 맥 창 버튼 색. 회색 점 세 개일 때는 "브라우저 창"으로 안 읽혔다.
   특정 회사 로고가 아니라 OS 관례라 상표 문제는 없다. */
.wzs-window-dots i:nth-child(1) {
	background: #ff5f57;
}

.wzs-window-dots i:nth-child(2) {
	background: #febc2e;
}

.wzs-window-dots i:nth-child(3) {
	background: #28c840;
}

.wzs-window-title {
	font-size: 11px;
	color: var(--wzs-ink-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wzs-window-body {
	padding: var(--wzs-space-4);
}