/* ===================================================
   FluxCS 상담 위젯

   설계 원칙
   - 브랜드 색(--fcs-w-accent)은 사장님이 고른 값이다. 어떤 색이 와도 무너지지
     않도록 헤더를 단색으로 칠하지 않고 옅은 틴트 + 진한 잉크로 간다.
     색은 전송 버튼, 사용자 말풍선, 포커스 링에만 쓴다.
   - 테마 충돌을 막기 위해 모든 선언을 .fcs-w 스코프 안에 둔다.
   - 외부 라이브러리 없음.
   =================================================== */

.fcs-w,
.fcs-w *,
.fcs-w *::before,
.fcs-w *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.fcs-w {
	--fcs-w-accent: #6C5CE7;
	--fcs-w-accent-ink: #ffffff;

	--fcs-w-ink:     #16182A;
	--fcs-w-ink2:    #4E5468;
	/* 보조 텍스트. 흰 배경에서 4.5:1을 넘겨야 해서 회색을 밝게 두지 않는다. */
	--fcs-w-muted:   #676D82;
	/* 장식용(구분선·점·화살표) — 대비 기준을 적용하지 않는 요소에만 쓴다. */
	--fcs-w-faint:   #A8AEC0;
	--fcs-w-line:    #ECEEF4;
	--fcs-w-surface: #FFFFFF;
	--fcs-w-canvas:  #F7F8FB;

	/* accent에서 파생한 틴트. color-mix 미지원 브라우저는 아래 폴백을 쓴다. */
	--fcs-w-tint:    #F4F2FE;
	--fcs-w-tint-2:  #EBE8FC;

	--fcs-w-radius:  20px;
	--fcs-w-ease:    cubic-bezier(0.16, 1, 0.3, 1);

	position: fixed;
	/* FluxHub 공용 독(알림 벨 등)이 우측 하단을 점유하면 그만큼 위로 올라가 겹침을 피한다.
	   독이 없거나 비로그인 상태면 변수가 없어 기존 24px 그대로 동작한다. */
	bottom: calc(24px + var(--fhc-dock-bottom-offset, 0px));
	z-index: 99998;
	font-family: "Pretendard", "Pretendard Variable", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--fcs-w-ink);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

@supports (color: color-mix(in srgb, red 10%, white)) {
	.fcs-w {
		--fcs-w-tint:   color-mix(in srgb, var(--fcs-w-accent) 7%, #ffffff);
		--fcs-w-tint-2: color-mix(in srgb, var(--fcs-w-accent) 14%, #ffffff);
	}
}

.fcs-w--right { right: 24px; }
.fcs-w--left  { left: 24px; }

/* ===================================================
   런처
   =================================================== */
.fcs-w__launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border: none;
	border-radius: 50%;
	background: var(--fcs-w-accent);
	color: var(--fcs-w-accent-ink);
	cursor: pointer;
	box-shadow:
		0 2px 6px rgba(22, 24, 42, .10),
		0 10px 28px rgba(22, 24, 42, .16);
	transition: transform .32s var(--fcs-w-ease), box-shadow .32s var(--fcs-w-ease);
}
.fcs-w__launcher:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow:
		0 4px 10px rgba(22, 24, 42, .12),
		0 16px 36px rgba(22, 24, 42, .22);
}
.fcs-w__launcher:active { transform: translateY(0) scale(.97); }
.fcs-w__launcher:focus-visible {
	outline: 3px solid var(--fcs-w-accent);
	outline-offset: 3px;
}

/* 아이콘 교차 페이드 — 열림/닫힘이 같은 자리에서 바뀐다 */
.fcs-w__launcher svg {
	position: absolute;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity .22s var(--fcs-w-ease), transform .32s var(--fcs-w-ease);
}
.fcs-w__ico-close { opacity: 0; transform: rotate(-90deg) scale(.7); }
.fcs-w.is-open .fcs-w__ico-chat { opacity: 0; transform: rotate(90deg) scale(.7); }
.fcs-w.is-open .fcs-w__ico-close { opacity: 1; transform: rotate(0) scale(1); }

.fcs-w__dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #FF5A4E;
	border: 2px solid #fff;
}

/* ===================================================
   패널
   =================================================== */
.fcs-w__panel {
	position: absolute;
	bottom: 74px;
	width: 384px;
	max-width: calc(100vw - 32px);
	height: 620px;
	max-height: calc(100vh - 130px);
	background: var(--fcs-w-surface);
	border-radius: var(--fcs-w-radius);
	box-shadow:
		0 0 0 1px rgba(22, 24, 42, .05),
		0 8px 24px rgba(22, 24, 42, .10),
		0 24px 60px rgba(22, 24, 42, .16);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition:
		opacity .26s var(--fcs-w-ease),
		transform .26s var(--fcs-w-ease),
		visibility .26s;
	visibility: hidden;
}
.fcs-w--right .fcs-w__panel { right: 0; }
.fcs-w--left  .fcs-w__panel { left: 0; transform-origin: bottom left; }

.fcs-w.is-open .fcs-w__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	visibility: visible;
}

/* ===================================================
   브랜드 존
   =================================================== */
.fcs-w__head {
	flex-shrink: 0;
	padding: 20px 20px 14px;
	background: var(--fcs-w-tint);
	border-bottom: 1px solid var(--fcs-w-line);
}
.fcs-w__head-top {
	display: flex;
	align-items: center;
	gap: 11px;
}
.fcs-w__avatar {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--fcs-w-accent);
	color: var(--fcs-w-accent-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.02em;
}
.fcs-w__ident { flex: 1; min-width: 0; }
.fcs-w__title {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--fcs-w-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 시그니처 — 지금 무슨 일이 일어나는지 항상 문장으로 말한다 */
.fcs-w__status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--fcs-w-ink2);
	margin-top: 1px;
}
.fcs-w__status-led {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22C55E;
	flex-shrink: 0;
}
.fcs-w--busy .fcs-w__status-led { background: var(--fcs-w-accent); animation: fcs-pulse 1.4s ease-in-out infinite; }
.fcs-w--halted .fcs-w__status-led { background: #F59E0B; }

@keyframes fcs-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.8); }
}

.fcs-w__close {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--fcs-w-ink2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s ease, color .18s ease;
}
.fcs-w__close:hover { background: rgba(22, 24, 42, .06); color: var(--fcs-w-ink); }
.fcs-w__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.fcs-w__preview {
	flex-shrink: 0;
	padding: 7px 20px;
	background: #FEF6E7;
	color: #92610A;
	font-size: 11.5px;
	font-weight: 600;
	border-bottom: 1px solid #FBEBCB;
}

/* ===================================================
   대화 영역
   =================================================== */
.fcs-w__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 18px 10px;
	background: var(--fcs-w-surface);
	display: flex;
	flex-direction: column;
	gap: 3px;
	scrollbar-width: thin;
	scrollbar-color: #D8DCE6 transparent;
}
.fcs-w__body::-webkit-scrollbar { width: 6px; }
.fcs-w__body::-webkit-scrollbar-thumb { background: #D8DCE6; border-radius: 3px; }
.fcs-w__body::-webkit-scrollbar-track { background: transparent; }

/* 웰컴 */
.fcs-w__welcome {
	padding: 6px 2px 16px;
	animation: fcs-rise .4s var(--fcs-w-ease) both;
}
.fcs-w__welcome-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.4;
	color: var(--fcs-w-ink);
	margin-bottom: 6px;
}
.fcs-w__welcome-sub {
	font-size: 13.5px;
	color: var(--fcs-w-muted);
	line-height: 1.6;
}

/* 추천 질문 — 한국어 문장은 길어서 칩보다 세로 리스트가 읽힌다 */
.fcs-w__suggest {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 4px 0 8px;
}
.fcs-w__suggest-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid var(--fcs-w-line);
	border-radius: 13px;
	background: var(--fcs-w-surface);
	color: var(--fcs-w-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s var(--fcs-w-ease);
}
.fcs-w__suggest-item:hover {
	border-color: var(--fcs-w-accent);
	background: var(--fcs-w-tint);
	transform: translateX(2px);
}
.fcs-w__suggest-item:focus-visible {
	outline: 2px solid var(--fcs-w-accent);
	outline-offset: 2px;
}
.fcs-w__suggest-item svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--fcs-w-faint);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .18s ease, transform .18s var(--fcs-w-ease);
}
.fcs-w__suggest-item:hover svg { stroke: var(--fcs-w-accent); transform: translateX(2px); }

/* 메시지 행 */
.fcs-w__row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	animation: fcs-rise .28s var(--fcs-w-ease) both;
}
.fcs-w__row--bot  { justify-content: flex-start; }
.fcs-w__row--user { justify-content: flex-end; }

/* 같은 발신자가 이어질 때 간격을 줄여 덩어리로 읽히게 한다 */
.fcs-w__row + .fcs-w__row { margin-top: 3px; }
.fcs-w__row--start { margin-top: 14px !important; }
.fcs-w__row:first-child { margin-top: 0 !important; }

@keyframes fcs-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fcs-w__pic {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 9px;
	background: var(--fcs-w-tint-2);
	color: var(--fcs-w-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 2px;
}
.fcs-w__pic--ghost { background: transparent; }

.fcs-w__bubble {
	max-width: 264px;
	padding: 10px 14px;
	font-size: 14.5px;
	line-height: 1.65;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.fcs-w__row--bot .fcs-w__bubble {
	background: var(--fcs-w-canvas);
	color: var(--fcs-w-ink);
	border-radius: 4px 16px 16px 16px;
}
.fcs-w__row--bot.fcs-w__row--start .fcs-w__bubble { border-radius: 16px 16px 16px 4px; }
.fcs-w__row--user .fcs-w__bubble {
	background: var(--fcs-w-accent);
	color: var(--fcs-w-accent-ink);
	border-radius: 16px 4px 16px 16px;
}
.fcs-w__row--user.fcs-w__row--start .fcs-w__bubble { border-radius: 16px 16px 4px 16px; }

.fcs-w__time {
	font-size: 10.5px;
	color: var(--fcs-w-muted);
	flex-shrink: 0;
	margin-bottom: 3px;
	opacity: 0;
	transition: opacity .18s ease;
}
.fcs-w__row:hover .fcs-w__time,
.fcs-w__row--last .fcs-w__time { opacity: 1; }

/* ===================================================
   답변 꾸미기 — 관련 페이지(A) · 이어지는 질문(B)
   시안 E:/ClaudeTemp/fluxcs-rich-mock/mock.html 의 수치 그대로.
   본문 영역이 gap 3px 이라 시안의 위 간격에서 3px 씩 뺀다.
   =================================================== */
/* 본문은 세로 flex + 스크롤이라 overflow:hidden 인 상자는 줄어들 수 있다 — 줄어들지 않게 고정한다 */
.fcs-w__rich { margin-left: 34px; flex-shrink: 0; }   /* 아바타 26 + 간격 8 = 말풍선 왼쪽선에 맞춘다 */

.fcs-w__links {
	margin-top: 7px;   /* 시안 10px */
	border: 1px solid var(--fcs-w-line);
	border-radius: 13px;
	overflow: hidden;
	background: var(--fcs-w-surface);
	animation: fcs-rise .28s var(--fcs-w-ease) both;
}
.fcs-w__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 52px;
	padding: 0 14px;
	color: inherit;
	text-decoration: none;
	transition: background .18s ease;
}
.fcs-w__link + .fcs-w__link { border-top: 1px solid var(--fcs-w-line); }
.fcs-w__link:hover { background: var(--fcs-w-tint); }
.fcs-w__link:focus-visible { outline: 2px solid var(--fcs-w-accent); outline-offset: -2px; }
.fcs-w__link-txt {
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.fcs-w__link-title,
.fcs-w__link-url {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fcs-w__link-title { font-size: 13.5px; font-weight: 600; color: var(--fcs-w-ink); }
.fcs-w__link-url { font-size: 12px; color: var(--fcs-w-muted); }
.fcs-w__link svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--fcs-w-faint);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 시간 줄 — 답 말풍선 옆에 있던 시간이 A 아래로 내려온다 */
.fcs-w__meta { display: flex; align-items: center; }
.fcs-w__meta .fcs-w__time { opacity: 1; margin: 0; }

.fcs-w__next { margin-top: 9px; }   /* 시안 12px */
.fcs-w__cap { font-size: 12px; color: var(--fcs-w-muted); line-height: 1.5; }
.fcs-w__chips {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.fcs-w__chip {
	min-height: 44px;
	max-width: 100%;
	padding: 8px 16px;
	border: 0;
	border-radius: 22px;
	background: var(--fcs-w-tint);
	color: var(--fcs-w-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: background .18s ease;
}
.fcs-w__chip:hover { background: var(--fcs-w-tint-2); }
.fcs-w__chip:focus-visible { outline: 2px solid var(--fcs-w-accent); outline-offset: 2px; }

/* 입력 중 */
.fcs-w__typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 14px 16px;
	background: var(--fcs-w-canvas);
	border-radius: 4px 16px 16px 16px;
}
.fcs-w__typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fcs-w-faint);
	animation: fcs-bounce 1.3s infinite ease-in-out;
}
.fcs-w__typing i:nth-child(2) { animation-delay: .16s; }
.fcs-w__typing i:nth-child(3) { animation-delay: .32s; }

@keyframes fcs-bounce {
	0%, 65%, 100% { transform: translateY(0); opacity: .4; }
	32%           { transform: translateY(-5px); opacity: 1; }
}

/* ===================================================
   입력
   =================================================== */
.fcs-w__foot {
	flex-shrink: 0;
	padding: 12px 14px 14px;
	background: var(--fcs-w-surface);
	border-top: 1px solid var(--fcs-w-line);
}
.fcs-w__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 6px 6px 6px 14px;
	border: 1.5px solid var(--fcs-w-line);
	border-radius: 15px;
	background: var(--fcs-w-surface);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.fcs-w__form:focus-within {
	border-color: var(--fcs-w-accent);
	box-shadow: 0 0 0 3px var(--fcs-w-tint-2);
}
.fcs-w__input {
	flex: 1;
	min-height: 32px;
	max-height: 108px;
	padding: 6px 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--fcs-w-ink);
	resize: none;
}
.fcs-w__input::placeholder { color: var(--fcs-w-muted); }

.fcs-w__send {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: none;
	border-radius: 11px;
	background: var(--fcs-w-accent);
	color: var(--fcs-w-accent-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .18s ease, transform .18s var(--fcs-w-ease);
}
.fcs-w__send:hover:not(:disabled) { transform: scale(1.06); }
.fcs-w__send:disabled { opacity: .3; cursor: default; }
.fcs-w__send svg { width: 17px; height: 17px; fill: currentColor; }

.fcs-w__note {
	margin-top: 9px;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--fcs-w-muted);
	text-align: center;
}

/* 허니팟 — 사람에게 보이면 안 된다 */
.fcs-w__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ===================================================
   연락처 폼
   =================================================== */
.fcs-w__lead {
	margin: 12px 0 4px;
	padding: 16px;
	background: var(--fcs-w-tint);
	border: 1px solid var(--fcs-w-line);
	border-radius: 16px;
	animation: fcs-rise .3s var(--fcs-w-ease) both;
}
.fcs-w__lead-title {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--fcs-w-ink);
	margin-bottom: 3px;
}
.fcs-w__lead-desc {
	font-size: 12.5px;
	color: var(--fcs-w-ink2);
	margin-bottom: 12px;
	line-height: 1.6;
}
.fcs-w__field {
	width: 100%;
	min-height: 42px;
	margin-bottom: 8px;
	padding: 10px 13px;
	border: 1px solid var(--fcs-w-line);
	border-radius: 11px;
	background: var(--fcs-w-surface);
	font-family: inherit;
	font-size: 13.5px;
	color: var(--fcs-w-ink);
	outline: none;
	transition: border-color .18s ease;
}
.fcs-w__field:focus { border-color: var(--fcs-w-accent); }
textarea.fcs-w__field { min-height: 76px; resize: vertical; line-height: 1.6; }

.fcs-w__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 4px 0 12px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fcs-w-ink2);
	cursor: pointer;
}
.fcs-w__consent input {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--fcs-w-accent);
	cursor: pointer;
}

.fcs-w__lead-actions { display: flex; gap: 7px; }
.fcs-w__btn {
	flex: 1;
	min-height: 42px;
	border-radius: 11px;
	border: 1px solid var(--fcs-w-line);
	background: var(--fcs-w-surface);
	color: var(--fcs-w-ink2);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, transform .18s var(--fcs-w-ease);
}
.fcs-w__btn:hover { background: var(--fcs-w-canvas); }
.fcs-w__btn--primary {
	background: var(--fcs-w-accent);
	border-color: var(--fcs-w-accent);
	color: var(--fcs-w-accent-ink);
}
.fcs-w__btn--primary:hover { transform: translateY(-1px); }
.fcs-w__btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ===================================================
   모바일 — 전체화면
   =================================================== */
@media (max-width: 600px) {
	.fcs-w { bottom: 18px; }
	.fcs-w--right { right: 18px; }
	.fcs-w--left  { left: 18px; }

	.fcs-w__panel {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		transform: translateY(16px);
	}
	.fcs-w.is-open .fcs-w__panel { transform: translateY(0); }

	/* 주소창이 접혔다 펴져도 입력창이 가리지 않게 */
	.fcs-w__head { padding-top: max(20px, env(safe-area-inset-top)); }
	.fcs-w__foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

	.fcs-w__bubble { max-width: 78vw; }
	.fcs-w__welcome-title { font-size: 19px; }
}

/* 모바일에서는 패널이 화면 전체를 덮으므로, 열린 동안 띄움 버튼이 입력칸·보내기를 가리지 않게 숨긴다(닫기는 머리말의 닫기 버튼). */
@media (max-width: 600px) {
	.fcs-w.is-open .fcs-w__launcher { display: none; }
}

/* ===================================================
   접근성
   =================================================== */
@media (prefers-reduced-motion: reduce) {
	.fcs-w *,
	.fcs-w *::before,
	.fcs-w *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

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

/* 터치 기기에서는 손가락 기준(44px)으로 키운다. 마우스에서는 그대로 둔다. */
@media (pointer: coarse) {
	.fcs-w__close {
		width: 44px;
		height: 44px;
		margin-right: -6px;
	}
	.fcs-w__send {
		width: 44px;
		height: 44px;
	}
	.fcs-w__form { padding-right: 4px; }
}

/* ===================================================
   첫 화면 · 지난 문의 · 뒤로 (0.15.0)
   =================================================== */
.fcs-w__back {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	margin-left: -8px;
	padding: 0 8px 0 4px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fcs-w-ink2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.fcs-w__back[hidden] { display: none; }
.fcs-w__back:hover { background: rgba(22, 24, 42, .06); color: var(--fcs-w-ink); }
.fcs-w__back:focus-visible { outline: 2px solid var(--fcs-w-ink); outline-offset: -2px; }
.fcs-w__back:disabled { opacity: .4; cursor: default; }
.fcs-w__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 첫 화면·목록에서는 입력창을 숨긴다 */
.fcs-w--v-home .fcs-w__foot,
.fcs-w--v-list .fcs-w__foot { display: none; }

.fcs-w__start {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--fcs-w-accent);
	color: var(--fcs-w-accent-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: filter .18s ease;
}
.fcs-w__start:hover { filter: brightness(.94); }
.fcs-w__start:focus-visible { outline: 2px solid var(--fcs-w-ink); outline-offset: 2px; }
.fcs-w__start svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fcs-w__recent { margin-top: 20px; }
.fcs-w__recent-title,
.fcs-w__list-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--fcs-w-muted);
	margin: 0 0 4px;
}
.fcs-w__list-title { font-size: 18px; color: var(--fcs-w-ink); margin-bottom: 8px; }
.fcs-w__rows { list-style: none; }
.fcs-w__row-btn {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title state" "date state";
	column-gap: 12px;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding: 10px 4px;
	border: 0;
	border-top: 1px solid var(--fcs-w-line);
	background: transparent;
	color: var(--fcs-w-ink);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.fcs-w__rows-li:last-child .fcs-w__row-btn { border-bottom: 1px solid var(--fcs-w-line); }
.fcs-w__row-btn:hover { background: var(--fcs-w-canvas); }
.fcs-w__row-btn:focus-visible { outline: 2px solid var(--fcs-w-ink); outline-offset: -2px; }
.fcs-w__row-title { grid-area: title; font-size: 14px; font-weight: 500; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcs-w__row-date { grid-area: date; font-size: 12px; color: var(--fcs-w-muted); font-variant-numeric: tabular-nums; }
.fcs-w__row-state { grid-area: state; font-size: 12px; font-weight: 600; color: var(--fcs-w-ink2); white-space: nowrap; }
.fcs-w__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--fcs-w-ink2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.fcs-w__more:hover { color: var(--fcs-w-ink); }
.fcs-w__more:focus-visible { outline: 2px solid var(--fcs-w-ink); outline-offset: 2px; }
.fcs-w__caption { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--fcs-w-muted); }
.fcs-w__caption--center { text-align: center; margin: 24px 0; }

/* ===================================================
   담당자 연결 (0.18.0)
   =================================================== */
.fcs-w__live {
	margin: 8px 0 0 34px;
}
.fcs-w__live-btn {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--fcs-w-line);
	border-radius: 16px;
	background: var(--fcs-w-surface);
	color: var(--fcs-w-ink2);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.fcs-w__live-btn:hover { border-color: var(--fcs-w-accent); background: var(--fcs-w-tint); color: var(--fcs-w-ink); }
.fcs-w__live-btn:focus-visible { outline: 2px solid var(--fcs-w-accent); outline-offset: 2px; }
.fcs-w__live-btn:disabled { opacity: .5; cursor: default; }

/* 담당자 말풍선 — 봇과 배경으로 구분하고 이름을 붙인다 */
.fcs-w__row--staff .fcs-w__bubble { background: var(--fcs-w-tint-2); }
.fcs-w__pic--staff { background: var(--fcs-w-ink); color: var(--fcs-w-surface); }
.fcs-w__who {
	display: block;
	margin-bottom: 2px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--fcs-w-ink2);
}
.fcs-w__txt { display: block; }

/* 연결 상태 안내 — 상자 없이 캡션 한 줄 */
.fcs-w__live-note { margin: 10px 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--fcs-w-muted); }

@media (pointer: coarse) {
	.fcs-w__live-btn { min-height: 44px; padding: 0 16px; }
}