/* ==========================================================================
   MODULE: components/checklist (.wzs-checklist)
   홈 자가진단 체크리스트. 마크업: template-parts/hero/checklist.php,
   동작: assets/js/modules/checklist.js, 문구: inc/data/checklist.php

   구조
     .wzs-checklist            섹션 (배경 사진은 --wzs-checklist-photo 로 주입)
       .wzs-checklist-inner    최대폭 컨테이너 + 상태 data 속성이 붙는 루트
       .wzs-checklist-groups   절차/시간/전문성 3그룹 그리드
       .wzs-checklist-item     토글 버튼 (role="switch")
       .wzs-checklist-result   등급 카드 — data-level 값에 따라 배경색이 단계적으로 바뀜
   ========================================================================== */

.wzs-checklist {
	padding: var(--wzs-space-8) var(--wzs-space-4);
	background: var(--wzs-bg-alt);
}

/* 사진이 있을 때만 배경으로 깔고, 텍스트 가독성을 위해 어둡게 덮는다 */
.wzs-checklist--photo {
	position: relative;
	background-image:
		linear-gradient(180deg, rgba(16, 24, 40, 0.93) 0%, rgba(16, 24, 40, 0.75) 100%),
		var(--wzs-checklist-photo);
	background-size: cover;
	background-position: center;
	color: var(--wzs-white);
}

/* 흰 글씨는 사진 배경 위에 직접 얹히는 제목에만 적용한다.
   항목 라벨(.wzs-checklist-label)은 흰 카드 안에 들어가므로 흰색을 주면 글자가 사라진다. */
.wzs-checklist--photo .wzs-section-head h2 {
	color: var(--wzs-white);
}

.wzs-checklist--photo .wzs-section-head p {
	color: rgba(255, 255, 255, 0.78);
}

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

/* --- 3그룹 그리드 --- */
/* --- 창 안 배치 ---
   체크리스트 전체가 맥 창(components/window.css) 안에 들어간다.

   3열 카드에서 1열 목록으로 바꾼 이유: 그룹마다 항목 수가 달라 카드 높이가
   304~400px 로 어긋났고, 창 안에서 상자가 또 상자를 품는 모양이라 지저분했다.
   지금은 항목이 한 줄에 하나씩 이어지고 그룹은 작은 라벨 한 줄로만 나뉜다.
   창 폭을 1120 → 760px 로 줄인 것도 같은 이유다 — 한 줄짜리 항목이 너무 길면
   왼쪽 스위치와 오른쪽 글자 끝이 멀어져 읽기 나쁘다. */
.wzs-checklist-window {
	max-width: 760px;
	margin: 0 auto;
}

.wzs-checklist-groups {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-5);
}

.wzs-checklist-group {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
}

/* 그룹 라벨. 알약(.wzs-pill--blue)이 아니라 글자 한 줄인 이유: 창 안에 알약이 세 개
   더 들어가면 아래 토글 스위치들과 시각 요소가 경쟁한다. 구분만 되면 충분하다. */
.wzs-checklist-group-label {
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: var(--wzs-ink-muted);
	letter-spacing: 0.02em;
}

.wzs-checklist-items {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- 토글 항목 --- */
.wzs-checklist-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wzs-space-2);
	width: 100%;
	padding: 10px;
	background: var(--wzs-bg);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-md);
	font: inherit;
	font-size: var(--wzs-fs-sm);
	line-height: 1.6;
	color: var(--wzs-ink-soft);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--wzs-duration-fast) var(--wzs-ease),
		background var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-checklist-item:hover {
	border-color: var(--wzs-amber);
}

/* 키보드 포커스는 항상 눈에 보이게 — 마우스 클릭 시에도 흐려지지 않는 굵은 링 */
.wzs-checklist-item:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 2px;
}

/* 켜짐 상태는 파란 계열로 — 앰버 계열(--wzs-amber-ink)로 칠하면 연한 앰버 배경과 겹쳐
   전체가 탁해 보였다. 그룹 배지(.wzs-pill--blue)와도 색이 맞아 섹션이 한 덩어리로 읽힌다. */
.wzs-checklist-item[aria-checked='true'] {
	background: var(--wzs-blue-soft);
	border-color: var(--wzs-blue);
	color: var(--wzs-ink);
}

/* 토글 스위치 모양 — 켜고 끄는 동작이라 체크박스가 아니라 스위치로 보이게 한다.
   실제 상태의 진실은 버튼의 aria-checked이고, 아래는 그 시각 표현일 뿐이다.
   트랙(.wzs-checklist-switch) 안에서 손잡이(::after)가 좌우로 움직인다. */
.wzs-checklist-switch {
	flex: none;
	position: relative;
	width: 38px;
	height: 22px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--wzs-border);
	transition: background var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-checklist-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wzs-white);
	box-shadow: var(--wzs-shadow-sm);
	transition: transform var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-checklist-item[aria-checked='true'] .wzs-checklist-switch {
	background: var(--wzs-blue);
}

.wzs-checklist-item[aria-checked='true'] .wzs-checklist-switch::after {
	transform: translateX(16px);
}

/* --- 결과 카드: data-level 단계별로 배경이 강조색 → 붉은색으로 넘어간다 --- */
.wzs-checklist-result {
	margin-top: var(--wzs-space-5);
	padding: var(--wzs-space-4) var(--wzs-space-5);
	border-radius: var(--wzs-radius-lg);
	border: 1px solid var(--wzs-border);
	background: var(--wzs-white);
	transition: background var(--wzs-duration-base) var(--wzs-ease),
		border-color var(--wzs-duration-base) var(--wzs-ease);
}

/* 등급 색 사다리: 연두·초록(양호) → 노랑(주의) → 주황(경고) → 빨강(긴급).
   4단계 모두 채도를 올려 한눈에 구분되게 한다. 색을 조정하려면 아래 세 값(배경/테두리/글자)만 바꾸면 된다. */
.wzs-checklist-result[data-level='ok'] {
	background: #e8f9df;
	border-color: var(--wzs-success);
}

.wzs-checklist-result[data-level='ok'] .wzs-checklist-score {
	color: #1d7a45;
}

.wzs-checklist-result[data-level='watch'] {
	background: #fff3d6;
	border-color: #eaa93a;
}

.wzs-checklist-result[data-level='watch'] .wzs-checklist-score {
	color: #8a5410;
}

.wzs-checklist-result[data-level='warn'] {
	background: #ffe6d2;
	border-color: #f2803c;
}

.wzs-checklist-result[data-level='warn'] .wzs-checklist-score {
	color: #a8430f;
}

.wzs-checklist-result[data-level='urgent'] {
	background: #ffe0dc;
	border-color: #e04b3c;
}

.wzs-checklist-result[data-level='urgent'] .wzs-checklist-score {
	color: #a3241a;
}

.wzs-checklist-score {
	margin: 0;
	font-size: var(--wzs-fs-lg);
	font-weight: 700;
	color: var(--wzs-ink);
}

.wzs-checklist-note {
	margin: var(--wzs-space-2) 0 0;
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-soft);
}

/* 모션 감소 설정을 존중 — 색 전환도 끈다 */
@media (prefers-reduced-motion: reduce) {
	.wzs-checklist-item,
	.wzs-checklist-result {
		transition: none;
	}
}