:root {
	--cf-bg: #f6f7f9;
	--cf-card: #ffffff;
	--cf-text: #111827;
	--cf-muted: #6b7280;
	--cf-line: #e5e7eb;
	--cf-shadow: 0 8px 24px rgba(0,0,0,.06);
	--cf-radius: 14px;
	--cf-gap: 12px;
	--cf-user: #111827;
	--cf-user-text: #ffffff;
	--cf-input-bg: #f9fafb;
}

.cf-head { margin-top: 30px; width: 100%; max-width: 400px; place-self: center; padding: 0 2px; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif; color: var(--cf-text); }
.cf-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.cf-sub { margin: 6px 0 0 0; font-size: 12px; color: var(--cf-muted); }

#chatFaq { margin-top: 10px; width: 100%; max-width: 400px; height: 550px; place-self: center; background: var(--cf-bg); color: var(--cf-text); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif; }
#chatFaq * { box-sizing: border-box; }

.cf-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); background: var(--cf-card); box-shadow: var(--cf-shadow); overflow: hidden; }

.cf-body { flex: 1; overflow: auto; padding: 14px 12px; background: var(--cf-bg); }
.cf-body::-webkit-scrollbar { width: 10px; }
.cf-body::-webkit-scrollbar-thumb { background: rgba(17,24,39,.12); border-radius: 999px; border: 2px solid rgba(0,0,0,0); background-clip: padding-box; }

.cf-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--cf-gap); }

.cf-item { display: flex; }
.cf-item.bot { justify-content: flex-start; }
.cf-item.user { justify-content: flex-end; }

.cf-bubble { max-width: 78%; padding: 12px 12px 10px 12px; border-radius: var(--cf-radius); border: 1px solid var(--cf-line); background: #fff; box-shadow: var(--cf-shadow); }
.cf-item.user .cf-bubble { background: var(--cf-user); border-color: rgba(255,255,255,.12); }

.cf-text { margin: 0; font-size: 13px; line-height: 1.55; word-break: break-word; }
.cf-item.user .cf-text { color: var(--cf-user-text); }

.cf-time { display: block; margin-top: 6px; font-size: 11px; color: var(--cf-muted); text-align: right; }
.cf-item.user .cf-time { color: rgba(255,255,255,.6); }

.cf-foot { padding: 12px 12px 12px 12px; border-top: 1px solid var(--cf-line); background: var(--cf-card); }
.cf-input { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--cf-line); border-radius: 16px; background: var(--cf-card); box-shadow: var(--cf-shadow); }
.cf-inp { flex: 1; height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; outline: none; font-size: 13px; background: var(--cf-input-bg); }
.cf-inp:focus { border-color: #d1d5db; background: #fff; }
.cf-btn { height: 42px; padding: 0 14px; border: 1px solid #111827; background: #111827; color: #fff; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 700; }
.cf-btn:active { transform: translateY(1px); }

.cf-hint { margin: 8px 6px 0 6px; font-size: 12px; color: var(--cf-muted); }

@media (max-width: 420px) {
	.cf-head { max-width: 100%; padding: 0 12px; }

	#chatFaq { max-width: 100%; height: 520px; }

	.cf-body { padding: 12px 10px; }

	.cf-bubble { max-width: 86%; }

	.cf-input { padding: 8px; border-radius: 14px; }

	.cf-inp { height: 40px; }

	.cf-btn { height: 40px; }
}