/* ==========================================================================
   상담 챗봇 위젯(fluxcs .fcs-w) — 플럭스허브 본 사이트 전용 (테마 1.0.14, 첫 화면·내 문의 1.0.16)
   시안: design-refs/chat-widget-1024 (mock.html 1부 + spec.md). 마크업·JS 변경 없음.
   - 핸들 fluxcs-widget 에 의존해 그 뒤에 실린다(같은 우선순위에서 뒤가 이긴다).
   - 플러그인(widget.css)은 고객 사이트 공용이므로 건드리지 않고 여기서만 덮는다.
   - 면은 검정 고정, accent(라임)는 검정 위 아이콘·글자 색. widget.js 가 accent 를
     인라인 변수로 박으므로 그 한 줄만 !important.
   ========================================================================== */

/* 1. Variables */
body .fcs-w {
	--fcs-w-accent: #c8f05a !important;
	--fcs-w-solid: #111113;
	--fcs-w-solid-2: #25252b;
	--fcs-w-on-solid: #f7f7f5;
	--fcs-w-on-solid-2: rgba(247, 247, 245, .66);
	--fcs-w-on-solid-3: rgba(247, 247, 245, .5);
	--fcs-w-ink: #111111;
	--fcs-w-ink2: #3a3a37;
	--fcs-w-muted: #6b6b66;
	--fcs-w-faint: #a3a39c;
	--fcs-w-line: #e4e4df;
	--fcs-w-line-strong: #cfcfc8;
	--fcs-w-surface: #ffffff;
	--fcs-w-canvas: #f7f7f5;
	--fcs-w-canvas-2: #efefec;
	--fcs-w-halt: #f5b84a;
	--fcs-w-radius: 16px;
	--fcs-w-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 24px 56px -24px rgba(17, 17, 17, .42);
	font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	word-break: keep-all;
}

/* 2. 런처 */
.fcs-w__launcher {
	width: 56px;
	height: 56px;
	background: var(--fcs-w-solid);
	color: var(--fcs-w-accent);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 28px -12px rgba(17, 17, 17, .55);
	transition: transform .24s var(--fcs-w-ease), background .2s ease;
}
.fcs-w__launcher:hover {
	transform: translateY(-2px);
	background: #000;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 28px -12px rgba(17, 17, 17, .55);
}
.fcs-w__launcher:active { transform: scale(.96); }
.fcs-w__launcher:focus-visible {
	outline: 2px solid var(--fcs-w-solid);
	outline-offset: 3px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 6px var(--fcs-w-accent);
}
.fcs-w__launcher svg { width: 24px; height: 24px; }
.fcs-w.is-open .fcs-w__ico-close { transform: none; }

/* 3. 패널 */
.fcs-w__panel {
	/* 크기·위치는 흔한 상담 위젯(채널톡·인터콤) 기준: 오른쪽 아래, 폭 390, 높이 최대 680(화면이 낮으면 위 여백 확보) */
	bottom: 72px;
	width: 390px;
	max-width: calc(100vw - 48px);
	height: min(680px, calc(100vh - 120px));
	max-height: calc(100vh - 120px);
	border-radius: var(--fcs-w-radius);
	box-shadow: var(--fcs-w-shadow);
	transform: translateY(8px) scale(.98);
	transition: opacity .24s var(--fcs-w-ease), transform .24s var(--fcs-w-ease), visibility .24s;
}
.fcs-w.is-open .fcs-w__panel { transform: none; }

/* 4. 머리 */
.fcs-w__head {
	padding: 16px 12px 16px 20px;
	background: var(--fcs-w-solid);
	color: var(--fcs-w-on-solid);
	border-bottom: 0;
}
.fcs-w__head-top { gap: 12px; }
.fcs-w__avatar {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--fcs-w-solid-2);
	color: var(--fcs-w-accent);
	font-size: 15px;
}
.fcs-w__title {
	font-size: 15px;
	line-height: 1.4;
	color: var(--fcs-w-on-solid);
}
.fcs-w__status {
	margin-top: 0;
	line-height: 1.5;
	color: var(--fcs-w-on-solid-2);
}
.fcs-w__status-led { background: var(--fcs-w-accent); }
.fcs-w--busy .fcs-w__status-led { background: var(--fcs-w-accent); }
.fcs-w--halted .fcs-w__status-led { background: var(--fcs-w-halt); animation: none; }
.fcs-w__close {
	width: 36px;
	height: 36px;
	color: var(--fcs-w-on-solid-2);
	transition: background .2s ease, color .2s ease;
}
.fcs-w__close:hover { background: rgba(255, 255, 255, .08); color: var(--fcs-w-on-solid); }
.fcs-w__close:focus-visible { outline: 2px solid var(--fcs-w-accent); outline-offset: -2px; }

/* 미리보기: 노란 띠 대신 머리 안 캡션 한 줄(상태 글자와 같은 x = 68px) */
.fcs-w__preview {
	margin-top: -8px;
	padding: 0 20px 14px 68px;
	background: var(--fcs-w-solid);
	color: var(--fcs-w-on-solid-3);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	border-bottom: 0;
}

/* 5. 대화 영역 */
.fcs-w__body {
	padding: 20px 16px 12px;
	gap: 0;
	scrollbar-color: var(--fcs-w-line-strong) transparent;
}
.fcs-w__body::-webkit-scrollbar-thumb { background: var(--fcs-w-line-strong); }
.fcs-w__welcome { padding: 4px 4px 20px; animation-duration: .36s; }
.fcs-w__welcome-title {
	margin-bottom: 0;
	letter-spacing: -.025em;
}
.fcs-w__welcome-sub { margin-top: 6px; font-size: 14px; }

/* 추천 질문: 상자 대신 선으로 나눈 목록 */
.fcs-w__suggest { gap: 0; margin: 0 4px 8px; }
.fcs-w__suggest::before {
	content: attr(aria-label);
	content: attr(aria-label) / "";
	padding-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fcs-w-muted);
}
.fcs-w__suggest-item {
	gap: 12px;
	min-height: 48px;
	padding: 12px 4px;
	border: 0;
	border-top: 1px solid var(--fcs-w-line);
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	transition: color .2s ease;
}
.fcs-w__suggest-item:last-child { border-bottom: 1px solid var(--fcs-w-line); }
.fcs-w__suggest-item:hover { border-color: var(--fcs-w-line); background: transparent; transform: none; color: #000; }
.fcs-w__suggest-item:focus-visible { outline: 2px solid var(--fcs-w-solid); outline-offset: -2px; border-radius: 6px; }
.fcs-w__suggest-item svg { width: 16px; height: 16px; transition: stroke .2s ease, transform .2s var(--fcs-w-ease); }
.fcs-w__suggest-item:hover svg { stroke: var(--fcs-w-ink); transform: translateX(2px); }

/* 말풍선 */
.fcs-w__row + .fcs-w__row { margin-top: 4px; }
.fcs-w__row--start { margin-top: 16px !important; }
.fcs-w__pic {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--fcs-w-solid);
	color: var(--fcs-w-accent);
	font-size: 12px;
}
.fcs-w__pic--ghost { background: transparent; }
.fcs-w__bubble { max-width: 260px; word-break: keep-all; }
.fcs-w__row--bot .fcs-w__bubble { background: var(--fcs-w-canvas-2); }
.fcs-w__row--user .fcs-w__bubble { background: var(--fcs-w-solid); color: var(--fcs-w-on-solid); }
.fcs-w__time { font-size: 12px; line-height: 1.4; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.fcs-w__typing { background: var(--fcs-w-canvas-2); border-radius: 16px 16px 16px 4px; }
.fcs-w__typing i { background: var(--fcs-w-muted); }

/* 6. 입력 */
.fcs-w__foot { padding: 12px 16px 14px; }
.fcs-w__form { border: 1px solid var(--fcs-w-line-strong); border-radius: 14px; }
.fcs-w__form:focus-within { border-color: var(--fcs-w-ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, .08); }
.fcs-w__input { min-height: 40px; padding: 9px 0; font-size: 15px; line-height: 1.5; }
/* 입력칸 테두리·포커스 표시는 바깥 .fcs-w__form 한 겹만 — 안쪽 입력에 사이트 공통 테두리·포커스선이 겹쳐 두 겹으로 보이던 것 */
.fcs-w .fcs-w__input, .fcs-w .fcs-w__input:focus, .fcs-w .fcs-w__input:focus-visible { border: 0; outline: 0; box-shadow: none; background: transparent; }
.fcs-w__send {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--fcs-w-solid);
	color: var(--fcs-w-accent);
	transition: background .2s ease, color .2s ease, transform .2s var(--fcs-w-ease);
}
.fcs-w__send:hover:not(:disabled) { background: #000; transform: translateY(-1px); }
.fcs-w__send:focus-visible { outline: 2px solid var(--fcs-w-ink); outline-offset: 2px; }
.fcs-w__send:disabled { opacity: 1; background: var(--fcs-w-canvas-2); color: var(--fcs-w-faint); }
.fcs-w__send svg { width: 18px; height: 18px; }
.fcs-w__note { font-size: 12px; }

/* 7. 연락처 양식 */
.fcs-w__lead {
	margin: 16px 0 4px 36px;
	background: var(--fcs-w-surface);
	border: 1px solid var(--fcs-w-line-strong);
	border-radius: 14px;
}
.fcs-w__lead-title { font-size: 15px; line-height: 1.4; margin-bottom: 0; }
.fcs-w__lead-desc { margin: 4px 0 12px; font-size: 13px; }
.fcs-w__field {
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--fcs-w-canvas);
	font-size: 14px;
	transition: border-color .2s ease, background .2s ease;
}
.fcs-w__field::placeholder { color: var(--fcs-w-muted); }
.fcs-w__field:focus { border-color: var(--fcs-w-ink); background: var(--fcs-w-surface); }
textarea.fcs-w__field { min-height: 72px; }
.fcs-w__consent { font-size: 13px; }
.fcs-w__consent input { accent-color: var(--fcs-w-solid); }
.fcs-w__lead-actions { gap: 8px; }
.fcs-w__btn {
	min-height: 44px;
	border-radius: 10px;
	border-color: var(--fcs-w-line-strong);
	font-size: 14px;
	transition: background .2s ease, border-color .2s ease;
}
.fcs-w__btn--primary { background: var(--fcs-w-solid); border-color: var(--fcs-w-solid); color: var(--fcs-w-on-solid); }
.fcs-w__btn--primary:hover { background: #000; transform: none; }
.fcs-w__btn:focus-visible { outline: 2px solid var(--fcs-w-ink); outline-offset: 2px; }

/* 8. 터치 기기: 닫기·보내기 44 */
@media (pointer: coarse) {
	.fcs-w__close { width: 44px; height: 44px; margin-right: 0; }
	.fcs-w__send { width: 44px; height: 44px; }
	.fcs-w__form { padding-right: 6px; }
}

/* 9. Responsive — 모바일은 전체 화면(대표 결정 2026-10-24). 열리면 런처 숨김, 뒤 화면 스크롤 잠금 */
@media (max-width: 600px) {
	.fcs-w { bottom: calc(16px + var(--fhc-dock-bottom-offset, 0px)); }
	.fcs-w--right { right: 16px; }
	.fcs-w--left { left: 16px; }
	.fcs-w__launcher { width: 52px; height: 52px; }
	.fcs-w.is-open .fcs-w__launcher { opacity: 0; pointer-events: none; }
	html:has(.fcs-w.is-open),
	html:has(.fcs-w.is-open) body { overflow: hidden; }

	.fcs-w__panel {
		inset: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		box-shadow: none;
		transform: translateY(24px);
	}
	.fcs-w.is-open .fcs-w__panel { transform: none; }
	.fcs-w__head {
		padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
	}
	.fcs-w__preview {
		padding-left: calc(48px + max(20px, env(safe-area-inset-left)));
		padding-right: max(20px, env(safe-area-inset-right));
	}
	.fcs-w__close { width: 44px; height: 44px; }
	.fcs-w__body { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
	.fcs-w__foot {
		padding: 12px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	}
	.fcs-w__send { width: 44px; height: 44px; }
	.fcs-w__bubble { max-width: min(240px, 78vw); }
	.fcs-w__welcome-title { font-size: 20px; }
}

@media (prefers-contrast: more) {
	.fcs-w { --fcs-w-line: #b7b7b0; --fcs-w-muted: #4a4a46; }
}

/* 10. 첫 화면 · 최근 문의 · 뒤로 (1.0.16). 면은 검정, 라임은 검정 위 글자·포인트에만 */
.fcs-w__back { margin-left: -10px; color: var(--fcs-w-on-solid-2); transition: background .2s ease, color .2s ease; }
.fcs-w__back:hover { background: rgba(255, 255, 255, .08); color: var(--fcs-w-on-solid); }
.fcs-w__back:focus-visible { outline: 2px solid var(--fcs-w-accent); outline-offset: -2px; }
.fcs-w__start {
	min-height: 52px;
	margin: 0 4px 20px;
	width: calc(100% - 8px);
	border-radius: 12px;
	background: var(--fcs-w-solid);
	color: var(--fcs-w-on-solid);
	transition: background .2s ease;
}
.fcs-w__start svg { stroke: var(--fcs-w-accent); transition: transform .2s var(--fcs-w-ease); }
.fcs-w__start:hover { background: #000; filter: none; }
.fcs-w__start:hover svg { transform: translateX(2px); }
.fcs-w__start:focus-visible { outline: 2px solid var(--fcs-w-ink); outline-offset: 3px; }
.fcs-w__recent { margin: 24px 4px 0; }
.fcs-w__recent-title { padding-bottom: 4px; }
.fcs-w__row-btn { padding: 10px 4px; border-top-color: var(--fcs-w-line); }
.fcs-w__row-btn:hover { background: var(--fcs-w-canvas); }
.fcs-w__row-title { font-size: 14px; }
.fcs-w__row-state { color: var(--fcs-w-ink); }
.fcs-w__list-title { margin: 0 4px 8px; font-size: 18px; letter-spacing: -.02em; }
.fcs-w__list-wrap { margin: 0 4px; }
.fcs-w__more { color: var(--fcs-w-ink2); }
.fcs-w__caption { color: var(--fcs-w-muted); }
@media (pointer: coarse) {
	.fcs-w__back { min-width: 44px; min-height: 44px; }
}
@media (max-width: 600px) {
	.fcs-w__back { margin-left: -12px; }
}