/* ==========================================================================
   MODULE: components/tiers (.wzs-tiers)
   요금 목록. 마크업: template-parts/components/tiers.php, 데이터: inc/data/pricing.php

   가로 3열 카드가 아니라 "세로 목록형"이다. 항목마다 포함 범위를 2~4줄 적어야 해서
   가로 배치로는 설명이 들어갈 자리가 나오지 않기 때문. 레이아웃을 다시 가로로 바꾸려면
   .wzs-tiers 의 grid-template-columns 만 고치면 된다.

   한 항목은 "이름 — 가격" 한 줄과 그 아래 포함 범위 목록, 두 덩어리로만 이루어진다.
   이름 밑에 설명 문단을 하나 더 두던 구조(.wzs-tier-desc)는 없앴다 — 목록과 같은 말을
   반복해서 첫 줄이 지저분했다.

   구조
     .wzs-tier-group     그룹 (도와주소 / 출장와주소)
       .wzs-tier-group-head   그룹 머리글 (이름 + 한 줄 설명)
       .wzs-tiers        세로 스택 컨테이너 (저가 → 고가 순)
         .wzs-tier       항목 카드
           .wzs-tier-head  아이콘 + 이름 + 가격, 한 줄 배치
           .wzs-list       포함 범위 목록
       ul.wzs-tier-group-notes  그 그룹에만 걸리는 안내 (출장의 교통비 등)
   ========================================================================== */

/* 카드 사이 간격. 24px 이었을 때 다섯 장이 한 덩어리로 붙어 보인다는 지적을 받고 키웠다.
   카드가 세로로 길어(포함 범위 4줄) 사이가 좁으면 어디서 항목이 갈리는지 안 보인다. */
.wzs-tiers {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-5);
	max-width: 820px;
	margin: 0 auto;
}

/* --- 그룹 (도와주소 / 출장와주소) ---
   탭으로 감추지 않고 세로로 이어 붙이므로, 카드가 5장이 되어도 어디서 갈리는지
   보여야 한다. 그 일을 머리글과 그룹 사이 여백이 한다.
   두 번째 그룹부터만 위 여백을 주는 이유: 첫 그룹 위에는 이미 섹션 리드 문단이 있어
   여기서 또 벌리면 제목과 카드가 따로 놀아 보인다. */
.wzs-tier-group + .wzs-tier-group {
	margin-top: var(--wzs-space-8);
}

.wzs-tier-group-head {
	max-width: 820px;
	margin: 0 auto var(--wzs-space-5);
	display: flex;
	align-items: baseline;
	gap: var(--wzs-space-2);
	text-align: left;
	/* 섹션 헤드는 가운데 정렬인데 그룹 머리글은 카드 왼쪽 끝에 맞춘다 —
	   카드 목록의 머리글이라는 게 위치로 읽혀야 한다. */
}

.wzs-tier-group-name {
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wzs-ink);
}

.wzs-tier-group-desc {
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
}

/* 출장 그룹 아래 이용 조건. 공통 주석(※)과 생김새를 달리해 둔 이유:
   저건 요금표 전체에 걸리는 말이고 이건 출장에만 걸리는 말이다.
   `ul[class]` 특정성 함정(base/reset.css) 때문에 요소명을 같이 쓴다. */
ul.wzs-tier-group-notes {
	max-width: 820px;
	margin: var(--wzs-space-4) auto 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
	text-align: left;
}

ul.wzs-tier-group-notes li {
	position: relative;
	padding-left: var(--wzs-space-4);
	font-size: var(--wzs-fs-sm);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
	word-break: keep-all;
}

/* 글머리는 당구장 표시(※). 아래 공통 주석과 같은 기호·같은 들여쓰기를 쓴다 —
   같은 성격의 안내가 두 서식으로 갈리면 읽는 사람이 위계를 오해한다.
   기호를 마크업이 아니라 여기서 붙이는 이유: 두 곳의 들여쓰기를 한 값으로 맞추기 위함이다
   (마크업에 "※ "를 직접 쓰면 두 번째 줄이 기호 아래로 들어와 걸려 보인다). */
ul.wzs-tier-group-notes li::before {
	content: '※';
	position: absolute;
	left: 0;
	color: var(--wzs-ink-muted);
}

@media (max-width: 640px) {
	.wzs-tier-group-head {
		flex-direction: column;
		gap: 2px;
	}
}

.wzs-tier {
	padding: var(--wzs-space-6);
	background: var(--wzs-white);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-lg);
	box-shadow: var(--wzs-shadow-sm);
}

/* --- 강조 배지 ("추천") ---
   inc/data/pricing.php 의 badge 키가 있는 항목에만 붙는다.
   오른쪽 위 모서리에 놓이는데 그 자리는 원래 가격이 쓰는 줄이라, 배지가 달린 카드는
   위 여백을 넉넉히 줘서 가격과 겹치지 않게 한다. 배지를 옮기려면 이 두 값을 같이 볼 것.
   (.wzs-card 가 이미 position:relative — assets/css/components/card.css) */
.wzs-tier-badge {
	position: absolute;
	top: var(--wzs-space-3);
	right: var(--wzs-space-3);
	padding: 5px 12px;
	border-radius: var(--wzs-radius-sm);
	background: var(--wzs-blue);
	color: var(--wzs-white);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.wzs-tier--badged {
	padding-top: var(--wzs-space-7);
}

/* 아이콘 · 이름 · 가격을 한 줄에 놓고, 가격만 오른쪽 끝으로 민다.
   이름 아래 설명 문단이 있던 시절에는 flex-start 로 위를 맞췄지만, 이제 한 줄뿐이라
   가운데 정렬이 맞다 — 아이콘 · 이름 · 금액의 중심선이 하나로 떨어진다. */
.wzs-tier-head {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-3);
	margin-bottom: var(--wzs-space-5);
}

.wzs-tier-heading {
	flex: 1;
	min-width: 0;
}

/* 카드 안에서는 배지 자체 여백 대신 .wzs-tier-head 의 gap 이 간격을 잡는다 */
.wzs-tier .wzs-icon-badge {
	margin-bottom: 0;
}

.wzs-tier-name {
	font-size: var(--wzs-fs-lg);
	font-weight: 700;
}

/* 포함 범위 목록의 줄 간격. components/list.css 의 기본값(8px)은 본문 안 짧은 목록
   기준이라, 한 줄이 두 줄로 넘어가는 요금 카드에서는 줄끼리 붙어 보였다.
   .wzs-tier 안에서만 벌린다 — list.css 를 건드리면 사이트 전체 목록이 같이 움직인다. */
.wzs-tier .wzs-list {
	gap: var(--wzs-space-3);
}

/* "30,000원부터" — 숫자만 고정폭(.wzs-nums)이고 '원부터'는 본문 서체 그대로.
   정찰가가 아니라 최소 금액이라는 뜻이므로 '원부터'를 작게 죽이지 않는다. */
/* 이 섹션의 시각적 주인공은 금액이다 — 방문자가 스크롤하다 멈추는 이유가 숫자이므로
   이름·설명보다 확실히 커야 한다. clamp 를 쓰는 이유: 고정값으로 키우면 좁은 화면에서
   "149,000원부터"가 줄바꿈되거나 이름 칸을 밀어낸다. */
.wzs-tier-price {
	flex: none;
	align-self: center;
	font-size: clamp(1.75rem, 4.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* "원부터"는 숫자를 키운 만큼 따라 키우지 않는다 — 정찰가가 아니라 최소 금액이라는
   뜻이라 작게 죽이지도, 숫자만큼 세우지도 않는다. */
.wzs-tier-price small {
	margin-left: 3px;
	font-family: var(--wzs-font-base);
	font-size: var(--wzs-fs-base);
	font-weight: 600;
	color: var(--wzs-ink-soft);
}

/* 금액 앞의 단위('건당') — 뒤쪽 '원부터'와 같은 크기·색이라 한 덩어리로 읽힌다.
   margin 을 왼쪽에서 오른쪽으로 옮기는 게 이 규칙의 존재 이유다: 위 .wzs-tier-price small
   이 margin-left 를 주는데, 앞에 붙는 이 조각은 숫자와 붙어야 할 쪽이 오른쪽이다. */
.wzs-tier-price-unit {
	margin-left: 0;
	margin-right: 5px;
}

/* 마우스를 올렸을 때 가격까지 같이 반응하게 — 카드만 떠오르면 눈이 안 간다.
   떠오름/그림자/아이콘 반응은 components/card.css 가 공통으로 처리한다
   (.wzs-tier 에 .wzs-card 가 같이 붙어 있음). */
.wzs-tier .wzs-tier-price {
	transition: color var(--wzs-duration-base) var(--wzs-ease);
}

.wzs-tier:hover .wzs-tier-price {
	color: var(--wzs-blue);
}

/* ==========================================================================
   단조로움을 깨는 장치들
   요금 카드 다섯 장이 전부 [파스텔 아이콘 칩][이름][가격] + [불릿 4줄] 이라는
   같은 골격이라, 위 섹션까지 합치면 같은 모양이 아홉 번 이어졌다.
   색만 바꾸는 것으로는 부족하다 — 세 가지를 같이 손봤다.

     1) 아이콘 칩을 없애고 선 아이콘만 남긴다 (반복되는 파스텔 사각형 제거)
     2) 넓은 화면에서 카드를 가로 2단으로 — 위아래로 쌓이던 골격 자체가 바뀐다
     3) 그룹마다 '추천' 카드 하나를 다크로 뒤집어 시선이 걸리는 지점을 만든다

   1·2 가 모양을 바꾸고 3 이 강약을 만든다. 셋 중 하나만 하면 다시 밋밋해진다.
   ========================================================================== */

/* --- 1) 아이콘: 칩을 벗기고 선만 ---
   components/card.css 의 .wzs-icon-badge 는 연파랑 사각형 판이다. 카드마다 같은 판이
   붙으니 다섯 개가 한 줄로 반복되는 무늬가 됐다. 판을 지우고 선 아이콘만 남기면
   위 출장 섹션(같은 처리)과도 같은 언어가 된다. */
.wzs-tier .wzs-icon-badge {
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--wzs-blue);
}

.wzs-tier .wzs-icon-badge svg {
	width: 26px;
	height: 26px;
	stroke-width: 1.6;
}

/* --- 2) 넓은 화면에서는 가로 2단 ---
   왼쪽에 이름·금액, 오른쪽에 포함 범위. 위아래로 쌓던 것을 좌우로 펴면
   카드 높이가 눈에 띄게 낮아지고(다섯 장이 이어지는 구간이라 중요하다)
   "머리 → 목록"이 다섯 번 반복되던 리듬이 사라진다.

   출장 그룹은 2열이라 카드 폭이 절반이다. 거기서 또 2단으로 나누면 양쪽 다
   좁아지므로 이 규칙은 도와주소 그룹(폭 전체)에만 건다. 두 그룹의 카드 모양이
   달라지는 것 자체가 구분을 만든다. */
@media (min-width: 721px) {
	.wzs-tier-group--remote .wzs-tier {
		display: grid;
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		gap: var(--wzs-space-6);
		align-items: start;
	}

	.wzs-tier-group--remote .wzs-tier-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wzs-space-2);
		margin-bottom: 0;
	}

	/* 세로로 쌓이면 금액이 이름 아래로 온다 — 가운데 정렬이던 것을 왼쪽으로 맞춘다 */
	.wzs-tier-group--remote .wzs-tier-price {
		align-self: flex-start;
	}
}

/* ==========================================================================
   3) 추천 카드는 다크
   그룹당 하나씩만 둘 것. 둘 이상이면 강조가 흩어져 다시 밋밋해진다
   (배지는 inc/data/pricing.php 의 badge 키가 정한다). */
.wzs-tier--badged {
	background: var(--wzs-ink);
	border-color: var(--wzs-ink);
	color: var(--wzs-white);
}

.wzs-tier--badged .wzs-tier-name,
.wzs-tier--badged .wzs-tier-price {
	color: var(--wzs-white);
}

/* 금액 뒤 '원부터'와 앞 단위는 흰 바탕에서 쓰던 회색이라 다크에서 읽히지 않는다 */
.wzs-tier--badged .wzs-tier-price small {
	color: rgba(255, 255, 255, 0.72);
}

/* 다크 카드의 아이콘도 선만 남긴다(위 1번과 같은 처리). 색만 흰색으로 뒤집는다. */
.wzs-tier--badged .wzs-icon-badge {
	color: var(--wzs-white);
}

.wzs-tier--badged .wzs-list > li {
	color: rgba(255, 255, 255, 0.82);
}

.wzs-tier--badged .wzs-list > li::before {
	background: rgba(255, 255, 255, 0.55);
}

/* 배지 자체는 파랑을 유지한다 — 다크 카드 위에서 유일한 색이라 여기가 눈에 걸린다 */
.wzs-tier--badged .wzs-tier-badge {
	background: var(--wzs-blue);
}

/* 마우스를 올렸을 때 금액이 파랑으로 바뀌는 규칙(위)은 다크에서 묻힌다 — 앰버로 바꾼다 */
.wzs-tier--badged:hover .wzs-tier-price {
	color: var(--wzs-amber);
}

/* --- 출장 그룹은 가로 2열 ---
   항목이 둘뿐이라 세로로 쌓으면 앞 그룹과 같은 줄이 다섯 번 이어진다.
   나란히 놓으면 "여기는 다른 묶음"이 배치만으로 읽힌다.

   align-items 를 stretch(기본값)로 두는 것이 중요하다. start 로 두었더니 포함 범위
   줄 수가 다른 두 카드(4줄 / 2줄)의 아래 끝이 어긋나 보기 싫었다.
   늘려서 바닥을 맞추면 짧은 카드 안에 여백이 남지만, 들쭉날쭉한 것보다 정돈돼 보인다.
   좁은 화면에서는 아래 미디어쿼리가 다시 한 열로 되돌린다. */
@media (min-width: 721px) {
	.wzs-tier-group--onsite .wzs-tiers {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 2열이 되면 카드 폭이 절반이라 아이콘·이름·금액을 한 줄에 못 넣는다
	   (실제로 "출장 1일"이 "출장 / 1일"로 꺾였다).
	   좁은 화면에서 쓰던 방식 그대로 금액을 아랫줄로 내린다. */
	.wzs-tier-group--onsite .wzs-tier-head {
		flex-wrap: wrap;
	}

	.wzs-tier-group--onsite .wzs-tier-price {
		align-self: flex-start;
		width: 100%;
	}
}

/* 요금표 전체에 걸리는 공통 주석.
   가운데 정렬이었는데 바로 위 그룹 안내(좌측 정렬)와 서식이 갈려 따로 노는 줄처럼
   보였다. 같은 폭·같은 들여쓰기·같은 기호로 맞춰 한 덩어리로 읽히게 한다. */
.wzs-tiers-note {
	position: relative;
	max-width: 820px;
	margin: var(--wzs-space-3) auto 0;
	padding-left: var(--wzs-space-4);
	text-align: left;
	font-size: var(--wzs-fs-sm);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
	word-break: keep-all;
}

.wzs-tiers-note::before {
	content: '※';
	position: absolute;
	left: 0;
	color: var(--wzs-ink-muted);
}

.wzs-tiers-note + .wzs-tiers-note {
	margin-top: var(--wzs-space-2);
}

/* 좁은 화면에서는 가격을 아래로 내려 이름/설명이 눌리지 않게 한다.
   여백도 한 단계 줄인다: 출장와주소가 생기며 카드가 3장에서 5장이 되어,
   폰에서 요금 섹션만 3200px 가까이 됐다. 안쪽 여백과 카드 사이를 좁혀
   읽기는 그대로 두고 스크롤만 줄인다. */
@media (max-width: 640px) {
	.wzs-tier-head {
		flex-wrap: wrap;
	}

	.wzs-tier-price {
		align-self: flex-start;
		width: 100%;
	}

	.wzs-tier {
		padding: var(--wzs-space-5);
	}

	.wzs-tier--badged {
		padding-top: var(--wzs-space-6);
	}

	.wzs-tiers {
		gap: var(--wzs-space-4);
	}
}

/* --- 요금 항목별 현장 사진 (inc/data/pricing.php 의 photo 키) ---
   파일이 없으면 마크업 자체가 렌더링되지 않으므로 이 블록도 함께 사라진다.

   사진이 전부 세로(3:4)라 카드 폭을 가로로 꽉 채우면 위아래가 대부분 잘려 나간다.
   넓은 화면에서는 사진을 오른쪽 세로 칸으로 빼서 원본 비율대로 보이게 하고,
   좁은 화면에서는 아래로 떨어뜨린다. (:has 미지원 브라우저는 아래로 쌓이는 기본형) */
.wzs-tier-photo {
	margin: var(--wzs-space-4) 0 0;
}

.wzs-tier-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--wzs-radius-md);
}

@media (min-width: 900px) {
	.wzs-tier:has(.wzs-tier-photo) {
		display: grid;
		grid-template-columns: 1fr 200px;
		grid-template-areas:
			'head photo'
			'list photo';
		column-gap: var(--wzs-space-5);
	}

	.wzs-tier:has(.wzs-tier-photo) .wzs-tier-head {
		grid-area: head;
	}

	.wzs-tier:has(.wzs-tier-photo) .wzs-list {
		grid-area: list;
	}

	.wzs-tier:has(.wzs-tier-photo) .wzs-tier-photo {
		grid-area: photo;
		margin-top: 0;
		align-self: start;
	}
}

.wzs-tier-photo figcaption {
	margin-top: var(--wzs-space-1);
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
}