/* ==========================================================================
   MODULE: pages/messages — 메신저 목업 (홈 4번 섹션)
   마크업: template-parts/hero/messages.php

   화면 안에 화면이 있는 목업이다. 이미지가 아니라 전부 CSS 로 그린다.
   제3자 상표는 쓰지 않는다 — 초록/노랑 말풍선과 배치만으로 어느 메신저인지 읽힌다.
   ========================================================================== */

/* 배경이 흰색인 이유: 홈은 섹션마다 배경을 번갈아 깐다.
   지금 순서(front-page.php)는 히어로(사진) → 타임라인(흰) → 출장와주소(먹) →
   메신저 → 요금(회색)이라, 여기가 회색이면 바로 아래 요금 섹션과 같은 색이 되어
   두 섹션 사이 경계가 사라진다. 회색(--wzs-bg-alt)으로 되돌리려면 요금 섹션 배경도
   같이 바꿔야 한다.
   채팅 화면(.wzs-chat-screen)은 자기 그림자가 짙어서 흰 배경 위에서도 떠 보인다. */
.wzs-messages {
	padding: var(--wzs-space-7) var(--wzs-space-4);
	background: var(--wzs-white);
}

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

/* 세 화면을 나란히. 좁아지면 옆으로 넘기는 캐러셀이 된다(맨 아래 미디어쿼리)

   align-items 를 start 가 아니라 stretch(기본값)로 두는 이유: 두 화면의 대사 수가
   다르면 높이가 제각각이 돼 한쪽만 짧게 떠 있는 것처럼 보인다. 아래 flex 사슬
   (.wzs-chat → -screen → -body 가 모두 늘어남)과 짝이라, 하나만 빼면 다시 어긋난다.
   대사를 늘리거나 줄여도 세 화면 높이는 자동으로 맞는다(기준은 대화목록 화면). */
.wzs-chat-pair {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wzs-space-3);
	align-items: stretch;
}

/* .wzs-card 의 떠오르기·선택 표시·포커스 링을 그대로 쓴다(components/card.css).
   여기서는 그 규칙과 겹치는 속성을 다시 쓰지 않는다 — 겹치면 어느 쪽이 이길지가
   파일 로드 순서에 달린다. 카드는 기본 흰 배경이라 이 섹션(회색 바탕)에서는
   배경만 지워 화면 프레임이 그대로 보이게 한다. */
.wzs-chat {
	margin: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	background: none;
	border-radius: 18px;
}

/* --- 화면 프레임 ---
   폰처럼 보이게 모서리를 크게 굴리고 그림자를 준다.

   높이는 "대화목록 화면(.wzs-chat--list)의 내용 높이"가 정한다. 마지막 줄(통관 담당)까지가
   기준이고, 나머지 두 화면은 거기에 맞춰 늘어난다(바로 아래 규칙).
   9/16 비율로 못 박아 봤지만, 폭이 넓어질수록 상자가 세로로 길어져서 대화목록 아래에
   빈 칸이 200px 넘게 남았다. 비율보다 "여백 없이 꽉 찬 화면"이 이 목업에는 맞다.

   넘치는 대사는 overflow:hidden 으로 아래에서 잘린다 — 실제 대화창도 그렇게 보이므로
   자연스럽고, "아래에 더 있다"는 인상까지 준다. */
.wzs-chat-screen {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--wzs-shadow-lg);
	background: var(--wzs-white);
}

/* 위챗·카톡 화면은 자기 대사로 높이를 밀지 않는다 — 높이를 정하는 화면은 대화목록 하나뿐이다.
   absolute 로 띄우면 이 두 화면의 내용이 부모(figure)의 높이 계산에서 완전히 빠지고,
   inset:0 이 대화목록 높이에 맞춰 늘어난 자리를 그대로 채운다.
   (부모의 position:relative 는 .wzs-card 가 이미 갖고 있다 — components/card.css)

   height:0 으로도 될 것 같지만 안 된다: 플렉스 아이템의 크기는 height 가 아니라
   flex-basis 가 정하는데, flex:1 의 basis 0% 는 부모 높이가 정해지지 않은 상황에서
   내용 크기로 되돌아간다. 실제로 카톡 화면이 715px 까지 행을 밀어 올려서,
   대화목록 아래에 163px 이 다시 비었다. 이 규칙을 지우면 그 증상이 돌아온다.

   이 두 화면은 대사를 넉넉히 채워 두고(남는 자리보다 넘치면 아래에서 잘림) 높이는 신경 쓰지 않는다. */
.wzs-chat--cn .wzs-chat-screen,
.wzs-chat--kr .wzs-chat-screen {
	position: absolute;
	inset: 0;
}

/* 상단 바 — 프로필과 안 읽은 개수 */
.wzs-chat-bar {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-2);
	padding: var(--wzs-space-3);
	background: var(--wzs-ink);
	color: var(--wzs-white);
}

.wzs-chat-avatar {
	flex: none;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.16);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
}

.wzs-chat-who {
	flex: 1;
	min-width: 0;
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 안 읽은 개수 — 이 목업에서 "쌓여 있다"를 말해 주는 유일한 숫자라 눈에 띄어야 한다 */
/* "999+" 처럼 자릿수가 늘어도 눌리지 않게 폭은 내용에 맡긴다 —
   min-width 는 한 자리 숫자일 때 동그랗게 보이라고 두는 최소값이다. */
.wzs-chat-badge {
	flex: none;
	min-width: 22px;
	padding: 2px 8px;
	white-space: nowrap;
	border-radius: 999px;
	/* 흰 글씨 대비 4.5:1 을 넘기려고 한 단계 어둡게 잡은 빨강 — 앞 값 #e5484d 는 3.91:1 로
	   미달이었다. 개수는 이 목업에서 "쌓여 있다"를 말하는 유일한 숫자라 읽혀야 한다. */
	background: #cf2c31;
	color: var(--wzs-white);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}

.wzs-chat-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wzs-space-2);
	padding: var(--wzs-space-3);
	overflow: hidden;
}

/* --- 말풍선 ---
   전부 상대방(왼쪽) 말이다. 내 답장이 없다는 것 자체가 이 화면의 메시지다. */
.wzs-msg {
	position: relative;
	max-width: 88%;
	padding: 10px 14px;
	border-radius: 4px 14px 14px 14px;
	font-size: var(--wzs-fs-sm);
	line-height: 1.55;
	color: var(--wzs-ink);
	word-break: keep-all;
}

.wzs-msg-time {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--wzs-ink-muted);
}

.wzs-chat--cn .wzs-chat-body {
	background: #ededed;
}

.wzs-chat--cn .wzs-msg {
	background: var(--wzs-white);
}

.wzs-chat--kr .wzs-chat-body {
	background: #b2c7d9;
}

.wzs-chat--kr .wzs-msg {
	background: var(--wzs-white);
}

/* --- 내가 보낸 말 ---
   오른쪽에 붙이고 노란 말풍선으로 갈라 놓는다. 꼬리 방향(모서리 굴림)도 반대다.
   상대 말은 왼쪽 흰색, 내 말은 오른쪽 노랑 — 이 대비가 있어야 "받기만 하는 쪽"과
   "떠안은 쪽"이 한 화면에서 읽힌다. 상표가 아니라 배치와 색만 빌린다. */
.wzs-chat--kr .wzs-msg--mine {
	align-self: flex-end;
	background: #fae100;
	border-radius: 14px 4px 14px 14px;
}

.wzs-chat--kr .wzs-msg--mine .wzs-msg-time {
	text-align: right;
	color: rgba(16, 24, 40, 0.55);
}

/* --- 음성 말풍선 ---
   이 목업의 핵심. 재생 버튼과 길이(초)만 보이고 내용은 알 수 없다 —
   텍스트는 번역기에 붙여넣기라도 하지만 음성은 그것도 안 된다.
   길이를 제각각으로 둔 것은 마크업 쪽 의도다(균일하면 가짜로 보인다). */
/* 선택자를 .wzs-chat--cn 으로 두 겹 쓰는 이유: 위의 `.wzs-chat--cn .wzs-msg`(0,2,0)가
   뒤에 오면서 클래스 하나짜리(0,1,0)를 이겨 초록 배경이 흰색으로 덮였다.
   말풍선 색을 바꿀 때는 이 명시도를 맞춰서 쓸 것. */
.wzs-chat--cn .wzs-msg--voice {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-2);
	/* 폭은 말풍선마다 마크업에서 정한다(--wzs-voice-w) — 녹음 길이에 따라 바가
	   길고 짧아야 진짜처럼 보인다. px 로 고정하면 화면이 좁아질수록 비율이 커져서,
	   모바일에서는 세 개가 전부 화면 폭을 꽉 채웠다. % 는 화면 폭을 따라가므로
	   어느 크기에서든 같은 비율로 보인다. 값이 없으면 예전 기본값으로 떨어진다. */
	width: var(--wzs-voice-w, 148px);
	background: #95ec69; /* 중국 메신저 계열의 초록 — 상표가 아니라 색만 빌린다 */
}

.wzs-voice-play {
	flex: none;
	width: 0;
	height: 0;
	border-left: 9px solid rgba(16, 24, 40, 0.55);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

/* 파형은 반복 그라데이션으로 그린다 — 막대를 하나씩 두면 마크업만 늘어난다 */
.wzs-voice-wave {
	flex: 1;
	height: 14px;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(16, 24, 40, 0.4) 0 2px,
		transparent 2px 5px
	);
	-webkit-mask-image: linear-gradient(90deg, #000 0 60%, rgba(0, 0, 0, 0.35) 100%);
	mask-image: linear-gradient(90deg, #000 0 60%, rgba(0, 0, 0, 0.35) 100%);
}

.wzs-voice-len {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	color: rgba(16, 24, 40, 0.6);
}

/* 사진 첨부 — 무엇이 왔는지 알 수 없는 회색 판. 내용을 그리지 않는 게 의도다. */
.wzs-chat--cn .wzs-msg--image {
	width: 116px;
	height: 84px;
	padding: 0;
	background:
		linear-gradient(135deg, #d7dae0 25%, #c9cdd4 25% 50%, #d7dae0 50% 75%, #c9cdd4 75%);
	background-size: 16px 16px;
	border-radius: 10px;
}

/* ==========================================================================
   대화목록 화면 (.wzs-chat--list)
   앞 두 장이 "한 건이 이렇게 굴러간다"면 이 장은 "이런 게 동시에 여러 개다"이다.
   그래서 말풍선이 아니라 목록이고, 각 줄에 안 읽은 개수가 붙는다.
   ========================================================================== */

.wzs-chat--list .wzs-chat-bar {
	justify-content: space-between;
}

/* `ul[class]`(base/reset.css, 특정성 0,1,1)가 클래스 하나를 이겨 padding 이 눌린다 —
   선택자를 두 겹으로 쓴다. 이 프로젝트에서 반복된 함정이라 낮추지 말 것. */
.wzs-chat--list .wzs-chat-list {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wzs-white);
}

.wzs-chat-row {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-2);
	padding: 10px var(--wzs-space-3);
	border-bottom: 1px solid var(--wzs-border);
}

.wzs-chat-row:last-child {
	border-bottom: 0;
}

.wzs-chat-thumb {
	flex: none;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: var(--wzs-bg-alt);
	color: var(--wzs-ink-soft);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
}

.wzs-chat-row-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.wzs-chat-name {
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: var(--wzs-ink);
}

/* 마지막 메시지는 한 줄로 자른다 — 목록이 길어지면 "쌓여 있다"는 인상이 흐려진다 */
.wzs-chat-last {
	font-size: 11px;
	color: var(--wzs-ink-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wzs-chat-meta {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}

.wzs-chat-time {
	font-size: 10px;
	color: var(--wzs-ink-muted);
}

.wzs-chat-count {
	min-width: 18px;
	padding: 1px 5px;
	border-radius: 999px;
	background: #cf2c31;
	color: var(--wzs-white);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

/* --- 좌우 이동 버튼 ---
   넓은 화면에서는 세 장이 한눈에 보이므로 숨긴다. 동작은 assets/js/modules/carousel.js(이용후기와 공용).
   삐져나온 세 번째 장 가장자리만으로는 넘길 수 있다는 걸 모를 수 있어 같이 둔다. */
.wzs-chat-nav {
	display: none;
	justify-content: center;
	gap: var(--wzs-space-3);
	margin-top: var(--wzs-space-3);
}

.wzs-chat-arrow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
	background: var(--wzs-white);
	color: var(--wzs-ink);
	font-size: var(--wzs-fs-lg);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--wzs-duration-fast) var(--wzs-ease),
		opacity var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-chat-arrow:hover:not(:disabled) {
	border-color: var(--wzs-ink);
}

/* 더 갈 곳이 없으면 흐리게 — 사라지게 하지 않는 이유는 버튼 위치가 움직이면
   손가락이 헛도는 탓이다. */
.wzs-chat-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.wzs-chat-arrow:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 2px;
}

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

/* --- 화면을 잇는 한 줄 --- */
/* 줄 전체를 굵게 두지 않는다 — 어디가 핵심인지 안 보인다.
   본문 굵기로 두고 마크업의 <strong> 만 세운다(template-parts/hero/messages.php). */
.wzs-messages-line {
	margin: var(--wzs-space-6) 0 0;
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

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

.wzs-messages-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-messages-more:hover {
	gap: var(--wzs-space-2);
}

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

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

/* --- 좁은 화면: 두 장씩 보이고 옆으로 넘긴다 ---
   폰에서는 세 장을 다 욱여넣으면 한 장 폭이 110px 대로 내려가 아무 형태도 안 읽힌다.
   두 장만 화면에 두고 나머지는 오른쪽 밖에 둔 뒤 손가락으로 밀어 볼 수 있게 한다.
   display:none 으로 지우지 않는 이유가 여기 있다 — 안 보일 뿐 갈 수는 있어야 한다.

   폭을 46% 로 잡은 건 계산된 값이다: 두 장(2×46%)에 간격을 빼면 오른쪽에 세 번째 장의
   가장자리가 20px 쯤 남는다. 그 삐져나온 조각이 "옆에 더 있다"는 유일한 신호라
   50% 로 올려 딱 맞추지 말 것 — 딱 맞으면 넘길 수 있다는 걸 아무도 모른다.

   넘기는 동작은 CSS 만으로 한다(overflow-x + scroll-snap). 드래그를 JS 로 흉내내면
   관성과 튕김이 OS 기본과 달라진다.

   글자·여백·말풍선은 한 단계씩 줄여 형태만 남긴다. 이 목업은 읽히려고 있는 게 아니라
   "연락이 이만큼 온다"는 인상만 주면 된다. 내용을 지우지는 않는다 —
   지우면 쌓여 있다는 인상 자체가 사라진다. */
@media (max-width: 720px) {
	.wzs-chat-pair {
		display: flex;
		gap: var(--wzs-space-2);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		/* 컨테이너 좌우 여백만큼 넘겨 칠해야 첫 장·끝 장이 화면 가장자리에 딱 붙지 않는다 */
		scroll-padding-inline: var(--wzs-space-4);
		padding-inline: var(--wzs-space-4);
		margin-inline: calc(var(--wzs-space-4) * -1);
		/* 스크롤바는 감춘다 — 삐져나온 세 번째 장 가장자리가 이미 신호 역할을 한다 */
		scrollbar-width: none;
	}

	.wzs-chat-pair::-webkit-scrollbar {
		display: none;
	}

	/* min-width:0 이 반드시 있어야 한다. flex 자식의 기본값(min-width:auto)은 "내용이
	   최소한 들어갈 폭"을 보장하므로, 46% 를 줘도 실제 폭이 내용에 따라 각각 달라진다
	   (실측: 221 / 164 / 153px 로 세 장이 다 달랐다). 0 으로 풀어야 셋 다 정확히 46% 가 된다. */
	.wzs-chat {
		flex: 0 0 46%;
		min-width: 0;
		scroll-snap-align: start;
	}

	.wzs-chat-nav {
		display: flex;
	}

	.wzs-chat-screen {
		border-radius: 12px;
	}

	.wzs-chat-bar {
		gap: 6px;
		padding: 8px;
	}

	.wzs-chat-avatar {
		width: 20px;
		height: 20px;
		font-size: 10px;
		border-radius: 6px;
	}

	.wzs-chat-who {
		font-size: 10px;
	}

	.wzs-chat-badge {
		min-width: 16px;
		padding: 1px 5px;
		font-size: 9px;
	}

	.wzs-chat-body {
		gap: 5px;
		padding: 8px;
	}

	.wzs-msg {
		max-width: 94%;
		padding: 5px 7px;
		font-size: 10px;
		line-height: 1.4;
		border-radius: 3px 9px 9px 9px;
	}

	.wzs-msg-time {
		font-size: 8px;
		margin-top: 2px;
	}

	/* 선택자를 두 겹으로 쓰는 이유: 위 `.wzs-chat--cn .wzs-msg--voice`(0,2,0)가
	   클래스 하나짜리(0,1,0)를 이겨, 미디어쿼리 안에 있어도 적용되지 않았다.
	   (미디어쿼리는 명시도를 올려주지 않는다.) */
	.wzs-chat--cn .wzs-msg--voice {
		gap: 5px;
	}

	.wzs-voice-play {
		border-left-width: 7px;
		border-top-width: 5px;
		border-bottom-width: 5px;
	}

	.wzs-voice-wave {
		height: 10px;
	}

	.wzs-voice-len {
		font-size: 8px;
	}

	.wzs-chat--cn .wzs-msg--image {
		width: 64px;
		height: 46px;
	}

	/* 대화목록도 같이 줄인다 — 줄 수(=연락처 수)가 인상을 만드는 부분이라 줄이지 않는다 */
	.wzs-chat-row {
		gap: 6px;
		padding: 7px 8px;
	}

	.wzs-chat-thumb {
		width: 20px;
		height: 20px;
		border-radius: 6px;
		font-size: 9px;
	}

	.wzs-chat-name {
		font-size: 10px;
	}

	.wzs-chat-last {
		font-size: 8px;
	}

	.wzs-chat-time {
		font-size: 8px;
	}

	.wzs-chat-count {
		min-width: 14px;
		padding: 0 4px;
		font-size: 8px;
	}
}