/* ══════════════════════════════════════════════════════════════
   PRIX AI 상담봇 위젯 — 제공받은 시안(AI_chatbot_UI_assets) 적용
   ★사이트 공통 CSS 가 html{font-size} 를 840↓6.5px / 480↓5.5px 로 내리므로
     위젯 치수는 전부 px 로 고정한다
   ══════════════════════════════════════════════════════════════ */
#prixCb, #prixCb * { box-sizing: border-box; }
#prixCb { font-family: 'Pretendard Variable', Pretendard, 'SUIT Variable', -apple-system, sans-serif; }

/* ── 여는 버튼 ── */
#prixCbBtn{position:fixed; right:22px; bottom:22px; z-index:9500; width:86px; height:91px; padding:0;
	background:transparent; border:0; cursor:pointer; line-height:0;
	filter:drop-shadow(0 8px 18px rgba(13,126,253,.28));
	transition:transform .25s cubic-bezier(.22,.61,.36,1), filter .25s;
	animation:prixCbFloat 3.4s ease-in-out infinite;}
#prixCbBtn img{width:100%; height:100%; display:block; pointer-events:none;}
#prixCbBtn:hover{transform:translateY(-4px) scale(1.04); filter:drop-shadow(0 14px 26px rgba(13,126,253,.4)); animation:none;}
#prixCbBtn:active{transform:translateY(-1px) scale(.99);}
#prixCbBtn.on{animation:none; opacity:0; pointer-events:none;}
@keyframes prixCbFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}

/* ── 패널 ── */
#prixCbPanel{position:fixed; right:22px; bottom:22px; z-index:9501; width:396px; max-width:calc(100vw - 32px);
	height:min(640px, calc(100vh - 60px)); background:#F7FAFF; border-radius:18px; overflow:hidden;
	box-shadow:0 24px 60px rgba(13,90,180,.26); display:none; flex-direction:column;
	opacity:0; transform:translateY(16px) scale(.98); transition:opacity .24s, transform .24s;}
#prixCbPanel.open{display:flex; opacity:1; transform:none;}

/* 헤더 */
.prixCbHd{flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:15px 16px;
	background:linear-gradient(180deg,#1192FD 0%,#0D7EFD 100%); color:#fff;}
.prixCbHd .av{flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.18); overflow:hidden;}
.prixCbHd .av img{width:100%; height:100%; display:block;}
.prixCbHd .tx{flex:1 1 auto; min-width:0; line-height:1.3;}
.prixCbHd .tx b{display:block; font-size:17px; font-weight:800; letter-spacing:-.02em;}
.prixCbHd .tx span{display:block; margin-top:2px; font-size:12.5px; color:#D6E9FF;}
.prixCbHd button{flex:0 0 30px; width:30px; height:30px; border:0; background:transparent; color:#fff; cursor:pointer;
	border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background .18s;}
.prixCbHd button:hover{background:rgba(255,255,255,.2);}
.prixCbHd button svg{width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round;}

/* 본문 */
.prixCbBody{position:relative; flex:1 1 auto; overflow-y:auto; padding:18px 16px 10px;}
.prixCbBody::-webkit-scrollbar{width:6px;}
.prixCbBody::-webkit-scrollbar-thumb{background:#CBDCF2; border-radius:3px;}
/* 바닥 우측에 앉아 있는 캐릭터 (배경 장식) */
.prixCbChar{position:absolute; right:8px; bottom:2px; z-index:0; width:118px; height:127px;
	background:url('/chat/images/char.png') center/contain no-repeat; pointer-events:none; opacity:.95;}
.prixCbMsg, .prixCbFaq, .prixCbLead{position:relative; z-index:1;}

.prixCbMsg{display:flex; align-items:flex-start; gap:8px; margin-bottom:14px;}
.prixCbMsg .av{flex:0 0 34px; width:34px; height:34px; border-radius:50%; overflow:hidden; background:#DCEBFC;}
.prixCbMsg .av img{width:100%; height:100%; display:block;}
.prixCbMsg .bubble{max-width:78%; padding:12px 15px; border-radius:16px; font-size:14px; line-height:1.72;
	white-space:pre-wrap; word-break:break-word;}
.prixCbMsg.bot .bubble{background:#E8F0FA; color:#243B55; border-bottom-left-radius:5px;}
.prixCbMsg.me{justify-content:flex-end;}
.prixCbMsg.me .bubble{background:#0D7EFD; color:#fff; border-bottom-right-radius:5px;}
.prixCbMsg .bubble a{color:#0D6BE8; text-decoration:underline; word-break:break-word;}
.prixCbMsg .bubble a.tel{white-space:nowrap;}
.prixCbMsg.me .bubble a{color:#DCEBFF;}

.prixCbTyping{display:inline-flex; gap:4px; padding:15px;}
.prixCbTyping i{width:6px; height:6px; border-radius:50%; background:#9BB8DA; animation:prixCbDot 1.1s infinite ease-in-out;}
.prixCbTyping i:nth-child(2){animation-delay:.16s;} .prixCbTyping i:nth-child(3){animation-delay:.32s;}
@keyframes prixCbDot{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

/* 자주 묻는 질문 (퀵 리플라이)
   ★질문을 보내도 없애지 않고 접어 둔다 — 다른 질문을 다시 고를 수 있게 */
.prixCbFaq{margin:0 0 12px 42px;}
.prixCbFaqTg{display:none; align-items:center; gap:8px; width:100%; padding:12px 15px; border:1.5px solid #CFE2FA;
	border-radius:22px; background:#fff; cursor:pointer; font-size:13.5px; font-weight:700; color:#4A6684; text-align:left;}
.prixCbFaqTg:hover{border-color:#A9CCFB; color:#0D6BE8;}
.prixCbFaqTg .ic{flex:0 0 16px; width:16px; height:16px; fill:none; stroke:#7FB0EE; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.prixCbFaqTg .ar{flex:0 0 14px; width:14px; height:14px; margin-left:auto; fill:none; stroke:#9CC2F2; stroke-width:2.2;
	stroke-linecap:round; stroke-linejoin:round; transition:transform .2s;}
.prixCbFaq.fold .prixCbFaqTg{display:flex;}
.prixCbFaq.fold .prixCbFaqBd{display:none;}
.prixCbFaq.fold.open .prixCbFaqBd{display:block; margin-top:8px;}
.prixCbFaq.fold.open .prixCbFaqTg .ar{transform:rotate(180deg);}
.prixCbFaqBd > p{margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em; color:#8AA3BF;}
/* 접힌 뒤에는 입구 버튼이 제목 역할을 하므로 안쪽 제목은 감춘다 */
.prixCbFaq.fold .prixCbFaqBd > p{display:none;}
.prixCbFaqBd button{display:block; margin-bottom:8px; padding:11px 17px; border:1.5px solid #A9CCFB;
	border-radius:22px; background:#fff; font-size:13.5px; font-weight:600; color:#0D6BE8; cursor:pointer;
	transition:background .16s, border-color .16s, transform .16s;}
.prixCbFaqBd button:hover{background:#0D7EFD; border-color:#0D7EFD; color:#fff; transform:translateX(2px);}

/* 문의 폼 */
.prixCbLead{margin:0 0 14px 42px; border:1.5px solid #C6DEFB; border-radius:14px; background:#fff; overflow:hidden;}
/* 접힌 상태 : 한 줄짜리 입구 (답변을 밀어내지 않는다) */
.prixCbLeadTg{display:flex; align-items:center; gap:8px; width:100%; padding:13px 15px; border:0;
	background:transparent; cursor:pointer; font-size:13.5px; font-weight:700; color:#0D6BE8; text-align:left;}
.prixCbLeadTg:hover{background:#F4F9FF;}
.prixCbLeadTg .ic{flex:0 0 17px; width:17px; height:17px; fill:none; stroke:#0D7EFD; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.prixCbLeadTg .ar{flex:0 0 14px; width:14px; height:14px; margin-left:auto; fill:none; stroke:#7FB0EE; stroke-width:2.2;
	stroke-linecap:round; stroke-linejoin:round; transition:transform .2s;}
.prixCbLead.open .prixCbLeadTg .ar{transform:rotate(180deg);}
.prixCbLeadBd{display:none; padding:0 14px 13px;}
.prixCbLead.open .prixCbLeadBd{display:block;}
.prixCbLead p{margin:0 0 10px; font-size:12.5px; line-height:1.65; color:#33506F;}
/* ★프론트 공통 CSS 가 input[type=...]·textarea 에 height:5rem 을 걸어 둔다(특이도 0,1,1).
     클래스만으로는 못 이기므로 type 을 함께 써서 높이를 다시 잡는다 */
.prixCbForm input[type="text"], .prixCbForm input[type="tel"], .prixCbForm input[type="email"],
.prixCbForm textarea{width:100%; height:40px; margin-bottom:7px; padding:9px 12px; border:1px solid #DCE7F5;
	border-radius:10px; font-size:13px; line-height:1.5; font-family:inherit; background:#F8FBFF; color:#243B55;
	outline:0; resize:none; box-sizing:border-box;}
.prixCbForm textarea{height:60px; padding-top:10px;}
.prixCbForm input[type="text"]:focus, .prixCbForm input[type="tel"]:focus,
.prixCbForm input[type="email"]:focus, .prixCbForm textarea:focus{border-color:#0D7EFD; background:#fff;}
.prixCbForm .lagree{display:flex; align-items:flex-start; gap:6px; margin:4px 0 9px; font-size:12px; color:#5A738F; cursor:pointer;}
.prixCbForm .lagree input{width:auto !important; margin:2px 0 0 !important; display:inline-block !important;}
.prixCbForm .lsend{width:100%; height:40px; border:0; border-radius:11px; background:#0D7EFD; color:#fff;
	font-size:14px; font-weight:700; cursor:pointer; transition:background .18s;}
.prixCbForm .lsend:hover{background:#0B6ADB;}
.prixCbForm .lsend:disabled{background:#B9CCE4; cursor:default;}
.prixCbForm .lmsg{margin-bottom:7px; font-size:12px; line-height:1.6; color:#5A738F;}
.prixCbForm .lmsg.err{color:#D93A3A;}
.prixCbForm .lmsg:empty{display:none;}
.prixCbLead .ldone{margin:0 0 8px; font-size:13.5px; font-weight:700; line-height:1.7; color:#0D6BE8;}
.prixCbAlt{margin-top:9px; padding-top:9px; border-top:1px solid #E4EEFA; font-size:12px; color:#7690AC;}
.prixCbAlt a{color:#0D6BE8; font-weight:700; text-decoration:underline;}

/* 입력 */
.prixCbFt{flex:0 0 auto; padding:12px 14px 14px; background:#F7FAFF;}
.prixCbIn{display:flex; gap:9px; align-items:flex-end;}
/* ★한 줄이 딱 들어가도록 계산해서 맞춘다 : 46(높이) = 20(한 줄) + 24(패딩 12×2) + 2(테두리).
     line-height 를 1.5(=21px) 로 두면 안쪽 높이 18px 보다 커서 **빈 칸에도 스크롤바가 상시 노출**된다.
     늘어나는 높이를 정하는 widget.js 의 기준값(46)·보정값(+2 테두리)과 반드시 같이 움직일 것. */
.prixCbIn textarea{flex:1; height:46px; max-height:110px; padding:12px 16px; border:1px solid #DCE7F5; border-radius:23px;
	font-size:14px; line-height:20px; resize:none; outline:0; overflow-y:auto; font-family:inherit; background:#fff; color:#243B55;}
.prixCbIn textarea::placeholder{color:#A8BDD6;}
.prixCbIn textarea:focus{border-color:#0D7EFD;}
.prixCbIn button{flex:0 0 46px; width:46px; height:46px; border:0; border-radius:14px; background:#0D7EFD; cursor:pointer;
	display:flex; align-items:center; justify-content:center; transition:background .18s, transform .18s;}
.prixCbIn button:hover{background:#0B6ADB; transform:translateY(-1px);}
.prixCbIn button:disabled{background:#B9CCE4; cursor:default; transform:none;}
.prixCbIn button svg{width:20px; height:20px; fill:#fff;}
.prixCbNote{margin-top:9px; font-size:11px; line-height:1.6; color:#9AB0C8; text-align:center;}

/* 닫기 확인 모달 */
.prixCbAsk{position:absolute; inset:0; z-index:5; display:none; align-items:center; justify-content:center;
	padding:24px; background:rgba(15,45,85,.42); backdrop-filter:blur(2px);}
.prixCbAsk.on{display:flex;}
.prixCbAskBox{width:100%; max-width:290px; padding:24px 22px 18px; border-radius:16px; background:#fff;
	box-shadow:0 18px 40px rgba(13,60,120,.28); text-align:center;
	animation:prixCbPop .2s cubic-bezier(.22,.61,.36,1);}
@keyframes prixCbPop{from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:none;}}
.prixCbAskBox b{display:block; font-size:16px; font-weight:800; color:#1D3350; letter-spacing:-.01em;}
.prixCbAskBox p{margin:9px 0 18px; font-size:13px; line-height:1.72; color:#6A829E;}
.prixCbAskBtn{display:flex; gap:8px;}
.prixCbAskBtn button{flex:1; height:42px; border:0; border-radius:11px; font-size:13.5px; font-weight:700; cursor:pointer;
	transition:background .16s;}
.prixCbAskBtn .no{background:#EDF3FA; color:#4A6684;}
.prixCbAskBtn .no:hover{background:#E1EAF6;}
.prixCbAskBtn .yes{background:#0D7EFD; color:#fff;}
.prixCbAskBtn .yes:hover{background:#0B6ADB;}

@media only screen and (max-width:640px){
	#prixCbBtn{right:14px; bottom:14px; width:70px; height:74px;}
	#prixCbPanel{right:0; left:0; bottom:0; width:100%; max-width:none; height:90vh; border-radius:18px 18px 0 0;}
	.prixCbChar{width:96px; height:103px;}
	.prixCbFaq, .prixCbLead{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
	#prixCbBtn{animation:none;}
	.prixCbAskBox{animation:none;}
	.prixCbTyping i{animation:none;}
	#prixCbPanel{transition:none;}
}