@charset "utf-8";
/* 상담 챗봇 위젯 */

/*
 * display:flex 가 hidden 속성을 이긴다.
 * (hidden 은 UA 스타일시트의 display:none 이라 우선순위가 낮다)
 * 이걸 빼면 동의 화면과 대화 입력창이 동시에 보인다.
 */
.nabeChat [hidden], .nabeChat-panel[hidden]{display:none !important;}

.nabeChat{position:fixed; right:20px; bottom:20px; z-index:40; font-size:14px;}
/*
 * 챗봇은 본문용 고딕(Noto Sans KR)으로 쓴다.
 *
 * common.css 의 body 와 p/a/h1~h5 가 'Binggrae'(둥근 제목용 서체)를 1순위로
 * 두고 있어 챗봇도 그걸 물려받았다. 상담 대화는 읽을 글이 길고 숫자·영문이
 * 섞이므로 제목용 서체는 읽기 부담이 크다.
 *
 * p·a 는 common.css 에서 직접 선택자로 잡혀 있다. 직접 매칭은 상속을 이기므로
 * .nabeChat 하나에만 걸면 말풍선(p)·버튼(a)은 그대로 빙그레체로 남는다.
 * 그래서 하위 전체에 건다.
 */
.nabeChat, .nabeChat *{font-family:'Noto Sans KR', sans-serif;}


.nabeChat-launcher{display:flex; align-items:center; gap:6px; height:52px; padding:0 20px;
	border:none; border-radius:26px; background-color:#6A75CA; color:#fff; cursor:pointer;
	box-shadow:0 4px 14px rgba(0,0,0,0.18); font-size:15px; font-weight:600;}
.nabeChat-launcher:hover{background-color:#5b66bd;}
.nabeChat.is-open .nabeChat-launcher{display:none;}

.nabeChat-panel{width:360px; max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 100px);
	background-color:#fff; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,0.22);
	display:flex; flex-direction:column; overflow:hidden;}

.nabeChat-head{display:flex; align-items:center; justify-content:space-between;
	padding:14px 16px; background-color:#6A75CA; color:#fff;}
.nabeChat-title{font-weight:700; font-size:15px;}
.nabeChat-close{background:none; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer;}

/* 동의 화면 */
.nabeChat-agree{padding:18px 18px 20px; overflow-y:auto;}
.nabeChat-agree-title{font-weight:700; color:#000; margin-bottom:10px;}
.nabeChat-agree-list{margin:0 0 12px 0; padding:0; list-style:none;}
.nabeChat-agree-list li{position:relative; padding-left:12px; margin-bottom:8px;
	line-height:1.6; color:#495057; font-size:13px;}
.nabeChat-agree-list li:before{content:"\00B7"; position:absolute; left:2px;}
.nabeChat-agree-link{margin-bottom:14px; font-size:13px;}
.nabeChat-agree-link a{color:#6A75CA; text-decoration:underline;}
.nabeChat-agree-btn{width:100%; height:44px; border:none; border-radius:8px;
	background-color:#6A75CA; color:#fff; font-size:15px; font-weight:600; cursor:pointer;}
.nabeChat-agree-des{margin-top:10px; font-size:12px; color:#868E96; text-align:center;}
.nabeChat-agree-des a{color:#6A75CA; text-decoration:underline;}

/* 대화 */
.nabeChat-body{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;}
.nabeChat-log{flex:1 1 auto; overflow-y:auto; padding:16px; background-color:#F5F6FA;}
.nabeChat-turn{margin-bottom:12px; display:flex; flex-direction:column;}
.nabeChat-turn.me{align-items:flex-end;}
.nabeChat-turn.bot{align-items:flex-start;}
.nabeChat-bubble{max-width:82%; padding:10px 13px; border-radius:12px; line-height:1.65;
	white-space:pre-wrap; word-break:break-word;}
.nabeChat-turn.me .nabeChat-bubble{background-color:#6A75CA; color:#fff; border-bottom-right-radius:3px;}
.nabeChat-turn.bot .nabeChat-bubble{background-color:#fff; color:#212529;
	border:1px solid #E3E5EE; border-bottom-left-radius:3px;}
.nabeChat-turn.waiting .nabeChat-bubble{color:#868E96;}
.nabeChat-src{margin-top:5px; font-size:11px; color:#868E96; max-width:82%;}
.nabeChat-cta{display:inline-block; margin-top:2px; padding:9px 16px; border-radius:20px;
	background-color:#fff; border:1px solid #6A75CA; color:#6A75CA; font-weight:600; text-decoration:none;}

/*
 * 입력 영역: 입력창 위, 보내기 버튼 아래.
 *
 * 예전에는 버튼을 입력창 옆에 뒀다. 폭 360px 패널에서 버튼이 가로를 먹어
 * 입력창이 좁아지고, 입력창이 세로로 자랄 때 버튼만 아래에 붙어 어긋나 보였다.
 */
.nabeChat-form{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-top:1px solid #E3E5EE;}

/*
 * 입력창은 쓰는 동안만 커진다.
 *
 * 포커스가 없으면 한 줄(최대 96px)로 둬서 대화 영역을 넓게 쓰고, 포커스가
 * 들어오면 두 줄을 먼저 보여주고 상한을 150px(약 여섯 줄)까지 올린다.
 * 패널이 520px 이고 버튼이 한 줄을 더 쓰므로 그 이상 키우면 대화가 가려진다.
 *
 * 상한을 --cap 으로 둔 이유: 높이는 chatbot.js 의 autoGrow() 가 넣는데, 그쪽이
 * max-height 를 직접 읽으면 아래 transition 때문에 '96 에서 150 으로 가는 중'
 * 인 중간값(97.6px 같은 것)을 읽어 상한이 엉뚱하게 잡혔다. 커스텀 속성은
 * 보간되지 않으므로 언제 읽어도 96 또는 150 이다.
 *
 * transition 을 다시 적는 이유: 전역에 transition:all .5s 가 걸려 있어 JS 가
 * 타이핑마다 넣는 height 까지 0.5초씩 따라오느라 입력이 끈적했다. 테두리 색만
 * 남기고 크기 변화는 즉시 반영한다.
 */
.nabeChat-form textarea{width:100%; box-sizing:border-box; resize:none;
	border:1px solid #D8DBE8; border-radius:8px;
	padding:9px 11px; font-size:14px; line-height:1.5; font-family:inherit;
	--cap:96px; max-height:var(--cap); transition:border-color .2s ease;}
.nabeChat-form textarea:focus{--cap:150px; min-height:62px; border-color:#6A75CA; outline:none;}

/* 버튼은 아래 줄 오른쪽. 전역 transition:all .5s 는 색 변화만 남긴다. */
.nabeChat-form button{align-self:flex-end; height:38px; padding:0 20px; border:none; border-radius:8px;
	background-color:#6A75CA; color:#fff; font-weight:600; cursor:pointer; white-space:nowrap;
	transition:background-color .2s ease;}
.nabeChat-form button:disabled{background-color:#B9BEE4; cursor:default;}
.nabeChat-note{padding:0 12px 10px; font-size:11px; color:#868E96;}

@media only screen and (max-width:480px){
	.nabeChat{right:12px; bottom:12px;}
	.nabeChat-panel{width:calc(100vw - 24px); height:calc(100vh - 90px);}
}