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

/* 로봇 그림 — 처음 뜰 때 톡 나타난다. 갈색 그림 위에서도 떨어져 보이게 흰 외곽 그림자 */
.chatbot-launcher__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 16px; background: none; filter: drop-shadow(0 0 1.5px #FFFFFF) drop-shadow(0 6px 10px rgba(150, 80, 20, 0.28)); transition: transform 0.2s; animation: chatbot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.chatbot-launcher__open:hover { transform: scale(1.06); }
.chatbot-launcher__open:focus-visible { outline: 3px solid #2E7FDB; outline-offset: 2px; }
.chatbot-launcher__bot { display: block; width: 100%; height: 100%; overflow: visible; }
/* 얼굴·손은 4초에 한 번 숨 쉬듯 1.5px 오르내리고, 그림자는 그만큼 옅어진다. 말풍선은 제자리, 빛 띠만 왼쪽 → 오른쪽으로 지나간다 */
.chatbot-launcher__bot-body { transform-box: view-box; transform-origin: 56px 76px; animation: chatbot-breathe 2.6s ease-in-out infinite; }
.chatbot-launcher__bot-shadow { transform-box: view-box; transform-origin: 56px 79px; animation: chatbot-shadow 2.6s ease-in-out infinite; }
.chatbot-launcher__bot-eye { transform-box: view-box; transform-origin: 56px 51px; animation: chatbot-blink 4s ease-in-out infinite; }
.chatbot-launcher__bot-shine { animation: chatbot-shine 4s ease-in-out infinite; }
@keyframes chatbot-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes chatbot-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes chatbot-shadow { 0%, 100% { transform: scale(1); opacity: 0.22; } 50% { transform: scale(0.94); opacity: 0.18; } }
@keyframes chatbot-blink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.1); } }
@keyframes chatbot-shine { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(64px); } }
@media (prefers-reduced-motion: reduce) {
	.chatbot-launcher__open, .chatbot-launcher__bot-body, .chatbot-launcher__bot-shadow,
	.chatbot-launcher__bot-eye, .chatbot-launcher__bot-shine { animation: none; }
	.chatbot-launcher__bot-shine { opacity: 0; }
}
/* 말풍선 문구 — 마우스가 있으면 긴 문구, 없으면 짧은 문구(아래 hover: none) */
.chatbot-launcher__say-touch { display: none; }

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

/* 말풍선과 아이콘 사이 틈을 메워, 마우스가 말풍선으로 옮겨 가는 동안 꺼지지 않게 */
.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; }
}

/* 숨기기 × — 로봇 왼쪽 아래(왼손 옆). 누르는 자리는 ::after 로 사방 6px 넓힌다 */
.chatbot-launcher__hide { position: absolute; left: -12px; bottom: 2px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid #FFD3A0; border-radius: 50%; background: #FFFFFF; color: #9A5A22; 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: #E8590C; }

/* 모달 — PC : 오른쪽 아래 창. 높이 680 = 챗봇 첫 화면(인사·타일·자주 묻는 질문) 내용이 380 폭에서 스크롤 없이 다 보이는 높이(2026-10-30 실측 644)에 여유. 작은 화면은 100vh − 48 로 줄인다 */
.chatbot-modal { position: fixed; right: 24px; bottom: 24px; z-index: 10001; display: flex; flex-direction: column; width: 380px; height: min(680px, 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: 10px; bottom: 16px; width: 92px; height: 83px; }
	.chatbot-launcher__bubble { right: 96px; bottom: 22px; 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; }