/* 문자 상담 위젯. 몰 테마 CSS 와 섞이지 않게 모든 규칙을 .zsms 아래에 둔다. */
.zsms {
	--zsms-color: #2f6fed;
	--zsms-x: 20px;
	--zsms-y: 120px;
	position: fixed;
	z-index: 990;   /* 실시간 상담 버튼과 같은 층: 테마 퀵메뉴(980) 위, AI 추천 패널(1000)·모달·굿즈 디자이너보다 아래 */
	display: none;
	font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #1f2633;
	letter-spacing: -0.01em;
}
.zsms.is-ready { display: block; }
/* 모달이나 AI 추천이 열려 있는 동안은 창째로 감춘다. 모바일 테마의 AI 추천 패널은 .pusher(z-index 2) 안에 있어 z-index 로는 못 덮는다 */
body.dimmed .zsms, body:has(.ai-reco-backdrop.open) .zsms { display: none; }
.zsms *, .zsms *::before, .zsms *::after { box-sizing: border-box; }
.zsms button { font-family: inherit; }

/* 네 모서리: 위쪽은 화면 위에서, 아래쪽은 화면 아래에서 떨어진 거리 */
.zsms--right-top { right: var(--zsms-x); top: var(--zsms-y); }
.zsms--right-bottom { right: var(--zsms-x); bottom: var(--zsms-y); }
.zsms--left-top { left: var(--zsms-x); top: var(--zsms-y); }
.zsms--left-bottom { left: var(--zsms-x); bottom: var(--zsms-y); }

.zsms .zsms-launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 26px;
	background: var(--zsms-color);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(20, 30, 60, .22);
	transition: transform .15s ease, box-shadow .15s ease;
}
.zsms .zsms-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 30, 60, .28); }
.zsms .zsms-launcher svg { flex: none; }
.zsms.is-open .zsms-launcher { display: none; }

.zsms .zsms-panel {
	display: none;
	width: 320px;
	max-height: calc(100vh - var(--zsms-y) - 16px);
	overflow: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(20, 30, 60, .22);
	animation: zsms-pop .18s ease-out;
}
.zsms.is-open .zsms-panel { display: block; }
@keyframes zsms-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.zsms .zsms-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 10px 12px 16px;
	background: var(--zsms-color);
	color: #fff;
}
.zsms .zsms-head-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zsms .zsms-close {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.zsms .zsms-close:hover { background: rgba(255, 255, 255, .16); }
.zsms .zsms-close::before, .zsms .zsms-close::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 14px;
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
}
.zsms .zsms-close::before { transform: rotate(45deg); }
.zsms .zsms-close::after { transform: rotate(-45deg); }

.zsms .zsms-body, .zsms .zsms-done { padding: 14px 16px 16px; }
.zsms .zsms-body[hidden], .zsms .zsms-done[hidden], .zsms .zsms-privacy[hidden] { display: none; }
.zsms .zsms-guide { margin: 0 0 12px; font-size: 13px; color: #5b6472; white-space: pre-line; }
.zsms .zsms-label { display: block; margin: 0 0 10px; font-size: 12px; font-weight: 600; color: #5b6472; }
.zsms .zsms-input {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	padding: 8px 10px;
	border: 1px solid #d9dee8;
	border-radius: 8px;
	background: #fff;
	color: #1f2633;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	outline: 0;
	box-shadow: none;
	transition: border-color .15s ease;
}
.zsms .zsms-input:focus { border-color: var(--zsms-color); }
.zsms .zsms-message { height: 110px; resize: none; }
.zsms .zsms-counter { margin: -6px 0 10px; text-align: right; font-size: 12px; color: #8a93a3; }
.zsms .zsms-counter b { color: var(--zsms-color); font-weight: 700; }
.zsms .zsms-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.zsms .zsms-agree { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 0 8px; font-size: 12px; color: #5b6472; }
.zsms .zsms-agree-box.ui.checkbox label { font-size: 12px; color: #5b6472; cursor: pointer; }
.zsms .zsms-agree-view { flex: none; padding: 0; border: 0; background: none; color: #5b6472; font-size: 12px; text-decoration: underline; cursor: pointer; }
.zsms .zsms-privacy { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #f4f6fa; font-size: 12px; color: #5b6472; white-space: pre-line; }

.zsms .zsms-notice { display: none; margin: 0 0 8px; font-size: 12px; color: #d63939; }
.zsms .zsms-notice.is-shown { display: block; }

.zsms .zsms-submit, .zsms .zsms-again {
	display: block;
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: 10px;
	background: var(--zsms-color);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.zsms .zsms-submit:disabled { opacity: .6; cursor: default; }
.zsms .zsms-done-text { margin: 6px 0 14px; font-size: 14px; color: #1f2633; text-align: center; }

@media (max-width: 768px) {
	.zsms.zsms--hide-mobile { display: none !important; }
	/* 모바일 버튼은 아이콘만 둔다 */
	.zsms .zsms-launcher { width: 52px; padding: 0; justify-content: center; }
	.zsms .zsms-launcher-text { display: none; }
	.zsms .zsms-panel { width: calc(100vw - var(--zsms-x) * 2); max-width: 360px; min-width: 260px; }
}