/* comn svg */
.svgIco svg {width:100%; height:100%; display:block; overflow:visible;}
.svgIco svg * {stroke:currentColor; transition: stroke .2s ease, fill .2s ease;}
.svgIco svg path:not([fill]),
.svgIco svg rect:not([fill]),
.svgIco svg circle:not([fill]),
.svgIco svg ellipse:not([fill]),
.svgIco svg polygon:not([fill]) {fill:none;}
.svgIco svg [fill]:not([fill="none"]) {fill: currentColor;}
.svgIco svg [stroke]{stroke: currentColor;}
.svgIco svg [fill]:not([fill="none"]){fill: currentColor;}
/* 혹시 fill만 있는 요소에 stroke가 묻는걸 확실히 차단 */
.svgIco svg :not([stroke]){stroke: none;}

.assistWrap {position:fixed; right:-100%; bottom:40px; width:420px; height:620px; display:flex; flex-direction:column; background:#fff; border-radius:28px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden; opacity:0; z-index:55000; transition:.8s ease;}
.assistWrap.on {right:130px; opacity:1.0;}
.assistTop {height:72px; padding:0 24px; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg, #5C4335 0%, #b57049 100%); color:#fff; flex:0 0 auto;}
.assistTitle {font-size:18px; font-weight:700; letter-spacing:-.04em;}
.assistClose {width:36px; height:36px; position:relative; display:block; border-radius:50%; cursor:pointer;}
.assistClose:before, .assistClose:after {content:''; width:18px; height:2px; position:absolute; left:50%; top:50%; background:#fff; border-radius:2px; transform-origin:center;}
.assistClose:before {transform:translate(-50%, -50%) rotate(45deg);}
.assistClose:after {transform:translate(-50%, -50%) rotate(-45deg);}
.assistClose:hover {background:rgba(255,255,255,.16);}

.assistBody {flex:1 1 auto; min-height:0; padding:24px; display:flex; flex-direction:column; gap:16px; background:#f6f8fb; overflow-y:auto;}

.questBox, .ansBox {display:flex; width:100%;}
.questBox {justify-content:flex-end;}
.ansBox {justify-content:flex-start;}
.questBox .inTxt, .ansBox .inTxt {max-width:82%; padding:15px 18px; font-size:15px; line-height:1.6; letter-spacing:-.035em; word-break:keep-all; box-sizing:border-box;}
.questBox .inTxt {background:#b57049; color:#fff; border-radius:22px 22px 6px 22px; box-shadow:0 8px 18px rgba(31,124,255,.2);}
.ansBox .inTxt {background:#fff; color:#222; border:1px solid rgba(0,0,0,.06); border-radius:22px 22px 22px 6px; box-shadow:0 8px 18px rgba(0,0,0,.05);}

.assistEdit {position:relative; padding:18px 20px 20px; display:flex; gap:12px; align-items:flex-end; background:#fff; border-top:1px solid rgba(0,0,0,.07); flex:0 0 auto;}
.assistEdit textarea {width:100%; height:120px; max-height:90px; padding:15px 92px 15px 18px; font-size:15px; line-height:1.45; color:#222; background:#f3f5f8; border:1px solid transparent; border-radius:18px; resize:none; outline:none; box-sizing:border-box;}
.assistEdit textarea::placeholder {color:#999;}
.assistEdit textarea:focus {background:#fff; border-color:#1f7cff;}
.assistEdit .btns {position:absolute; right:30px; bottom:30px; display:flex; gap:6px;}
.assistEdit button {width:36px; height:36px; position:relative; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.06);}
.assistEdit button:hover {background:#f0f5ff;}
.assistEdit button .svgIco {width:16px; height:16px; color:#b57049;}
.assistEdit button.btnReset .svgIco {color:#777;}


@media all and (max-width:768px) {
	.assistWrap {bottom:15px; width:calc(100% - 30px); height:70vh; border-radius:22px;}
	.assistWrap.on {right:15px;}
	.assistTop {height:62px; padding:0 18px;}
	.assistTitle {font-size:16px;}
	.assistBody {padding:18px; gap:12px;}
	.questBox .inTxt, .ansBox .inTxt {max-width:88%; padding:13px 15px; font-size:14px;}
	.assistEdit {padding:14px 15px 16px;}
	.assistEdit textarea {height:50px; padding:14px 86px 14px 15px; font-size:14px;}
	.assistEdit .btns {right:23px; bottom:24px;}
}