@charset "utf-8";
/* 떠 있는 챗봇 아이콘 + iframe 모달 (시안 A · js/chatbot-launcher.js 가 그린다)
 * 모든 선택자를 .chatbot-launcher / .chatbot-modal / html.chatbot-open 아래로 묶어 다른 화면에 새지 않게 한다.
 * z-index : 첫 화면 팝업(.popup_new 10000) 아래에 아이콘(9000)을 두어 팝업이 덮는다.
 *           모달(10001)은 아이콘을 눌러야 열리므로 팝업이 닫힌 뒤에만 뜨고, 헤더(9999)보다 위에 둔다.
 */
.chatbot-launcher { position: fixed; right: 32px; bottom: 32px; z-index: 9000; width: 72px; height: 72px; font-family: inherit; }
.chatbot-launcher[hidden] { display: none; }
.chatbot-launcher button { margin: 0; font: inherit; cursor: pointer; }

/* 캐릭터 동그라미 — 갈색 그림 위에서도 떨어져 보이게 흰 테두리 4px + 진한 그림자 */
.chatbot-launcher__open { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 0; border: 4px solid #FFFFFF; border-radius: 999px; background: #744F19; box-shadow: 0 6px 20px rgba(40, 25, 5, 0.45), 0 0 0 1px rgba(60, 40, 10, 0.12); box-sizing: border-box; transition: transform 0.2s; }
.chatbot-launcher__open:hover { transform: scale(1.05); }
.chatbot-launcher__open img { display: block; flex: none; width: 64px; height: 64px; border-radius: 50%; }
/* 말풍선 문구 — 마우스가 있으면 긴 문구, 없으면 짧은 문구(아래 hover: none) */
.chatbot-launcher__say-touch { display: none; }

/* 말풍선 한 줄 — 평소엔 숨기고, 마우스를 올렸을 때(또는 키보드 포커스)만 보인다. 터치 기기(hover 없음)에선 안 띄운다 */
.chatbot-launcher__bubble { position: absolute; right: 80px; bottom: 12px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s, visibility 0s linear 0.15s; padding: 10px 16px; border: 1px solid #E2C99A; border-radius: 18px 18px 4px 18px; background: #FFFFFF; color: #3B2A10; font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 18px rgba(60, 40, 10, 0.12); }

/* 말풍선과 아이콘 사이 틈을 메워, 마우스가 말풍선으로 옮겨 가는 동안 꺼지지 않게 */
.chatbot-launcher__bubble::after { position: absolute; top: 0; bottom: 0; left: 100%; width: 10px; content: ""; }
@media (hover: hover) {
	.chatbot-launcher:hover .chatbot-launcher__bubble,
	.chatbot-launcher:has(.chatbot-launcher__open:focus-visible) .chatbot-launcher__bubble { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.15s, visibility 0s; }
}

/* 24h 표지 */
.chatbot-launcher__badge { position: absolute; left: -10px; top: -10px; padding: 2px 7px; border-radius: 10px; background: #E8590C; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.4; pointer-events: none; }

/* 숨기기 × — 아이콘 동그라미 오른쪽 위에 붙는다(24h 는 왼쪽 위). 누르는 자리는 ::after 로 사방 6px 넓힌다 */
.chatbot-launcher__hide { position: absolute; right: -6px; top: -6px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid #D9CBB2; border-radius: 50%; background: #FFFFFF; color: #6B5B45; box-sizing: border-box; }
.chatbot-launcher__hide svg { width: 10px; height: 10px; }
.chatbot-launcher__hide::after { position: absolute; inset: -6px; content: ""; }
.chatbot-launcher__hide:hover { color: #744F19; }

/* 모달 — PC : 오른쪽 아래 창 */
.chatbot-modal { position: fixed; right: 24px; bottom: 24px; z-index: 10001; display: flex; flex-direction: column; width: 380px; height: min(600px, calc(100vh - 48px)); overflow: hidden; border: 1px solid #EFE4D2; border-radius: 16px; background: #FAF5EC; box-shadow: 0 16px 48px rgba(60, 40, 10, 0.28); }
.chatbot-modal[hidden] { display: none; }
.chatbot-modal:focus { outline: none; }
.chatbot-modal__frame { display: block; flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #FAF5EC; }
/* 비상 닫기 × — 챗봇이 ready 를 보내면 숨긴다. 챗봇 머리 오른쪽 위 구석만 덮는 28px */
.chatbot-modal__close { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 1px solid #D9CBB2; border-radius: 50%; background: #FFFFFF; color: #6B5B45; box-shadow: 0 2px 6px rgba(60, 40, 10, 0.18); box-sizing: border-box; cursor: pointer; }
.chatbot-modal__close[hidden] { display: none; }
.chatbot-modal__close:hover { color: #744F19; }

/* 모바일(좁은 화면) */
@media (max-width: 768px) {
	.chatbot-launcher { right: 20px; bottom: 20px; width: 60px; height: 60px; }
	.chatbot-launcher__open { width: 60px; height: 60px; }
	.chatbot-launcher__open img { width: 52px; height: 52px; }
	.chatbot-launcher__bubble { right: 68px; bottom: 9px; padding: 8px 12px; font-size: 13px; }
	/* 전체 화면 모달 */
	.chatbot-modal { inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
	html.chatbot-open, html.chatbot-open body { overflow: hidden; }
}
/* 마우스 없는 기기(폭 기준 아님): 같은 말풍선을 짧은 문구로 처음부터 띄워 둔다. 40px 넘게 내리면 말풍선만 사라진다(JS 가 is-compact) */
@media (hover: none) {
	.chatbot-launcher__say-hover { display: none; }
	.chatbot-launcher__say-touch { display: inline; }
	.chatbot-launcher__bubble { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.25s ease, visibility 0s; }
	.chatbot-launcher.is-compact .chatbot-launcher__bubble { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
}
/* 모바일 메뉴(서랍)를 연 동안은 아이콘을 숨긴다 */
body.menu-on .chatbot-launcher { display: none; }