/* 상담 플로팅 버튼 — 우측 하단 고정 (PC: 아이콘+라벨 알약 / 모바일: 원형 아이콘) */

/*
 * 하단 고정 CTA 바와의 겹침 회피 (#472)
 * LMS 플러그인이 모바일 하단 CTA 바를 띄울 때 body 에 `--lms-cta-bar-height` 를 세팅한다
 * (lms-plugin#950). 바가 없으면 변수가 0px 이라 지금 위치 그대로다.
 * 바 표시 구간(900px 이하)과 이 버튼의 원형 전환 지점(768px 이하)이 달라도,
 * 변수가 "바가 실제로 보일 때만" 살아 있으므로 두 구간을 테마가 알 필요가 없다.
 *
 * 값은 다른 저장소가 넣으므로 테마가 강제할 수 없다. 방어는 세 겹이고, 순서가 중요하다. (#473)
 *
 * 1. **변수를 `bottom` 이 아니라 `margin-bottom` 에 쓴다.** 이게 핵심이다.
 *    변수가 길이가 아니면 그 선언은 IACVT 로 통째로 무효가 된다. `bottom` 에 쓰면
 *    `bottom: auto` 가 되고, `position: fixed` 의 기준이 static 위치로 바뀌어 버튼이
 *    화면 밖으로 사라진다(IACVT 는 캐스케이드 이후라 앞선 선언으로 폴백되지도 않는다).
 *    `margin-bottom` 에 쓰면 죽어도 initial `0` 일 뿐이고 `bottom` 은 그대로 살아남는다.
 *    (`bottom` 도 `var(--hc-fab-base)` 이지만 테마가 자기 요소에 직접 선언하는 값이고,
 *    아래에서 `<length>` 로 등록해 뒀으므로 IACVT 가 될 수 없다.)
 *    → 최악이 "안 비켜섬"(= 고치기 전 상태)이지 "버튼 실종" 이 아니다.
 * 2. `clamp()` — 음수·과대값을 가둔다. 경계값이 리터럴이라 변수로 뚫리지 않는다.
 * 3. `@property` — 단위 없는 값(`64`)·쓰레기값을 `0px` 로 되돌린다. 다만 미지원 브라우저
 *    (Chrome<85 / Safari<16.4 / Firefox<128 — iOS 15·16 포함)가 있고, 같은 이름을
 *    재등록하면 무력화되므로 **이것에만 기대면 안 된다.** 1번이 그 구멍을 메운다.
 *
 * `hover` 의 `transform` 과는 속성이 달라 충돌하지 않는다.
 */
@property --lms-cta-bar-height {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

/*
 * `bottom` 에 들어가는 유일한 변수라 타입을 못박는다.
 * 테마 내부 리터럴로만 쓰지만, 등록해 두면 어떤 경로로 잘못된 값이 와도 `20px` 로 되돌아가
 * `bottom` 이 IACVT 로 `auto` 가 되는 일(= #473 이 고친 버튼 실종)이 원천 차단된다.
 * `inherits: false` — 이 버튼의 자기 값이지 물려받는 값이 아니다.
 */
@property --hc-fab-base {
	syntax: "<length>";
	inherits: false;
	initial-value: 20px;
}

.hc-consult-fab {
	/* 화면 하단 여백. CTA 바가 없을 때의 위치다. */
	--hc-fab-base: 20px;

	position: fixed;
	right: 20px;
	bottom: var(--hc-fab-base);
	margin-bottom: clamp(0px, var(--lms-cta-bar-height, 0px), 200px);
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 18px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	border: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hc-consult-fab:hover,
.hc-consult-fab:focus {
	color: #111;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.hc-consult-fab__icon {
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.hc-consult-fab {
		--hc-fab-base: 16px;

		right: 16px;
		width: 54px;
		height: 54px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.hc-consult-fab__label {
		display: none;
	}
}