/* ─────────────────────────────────────────────
   츄구미 공용 챗봇 스타일 (assets/bot.css)
   2026-09-04 — index.html 안에 다섯 군데로 흩어져 있던
   챗봇 CSS 를 순서 그대로 한 파일로 모았습니다.
   규칙 순서를 바꾸면 겹쳐쓰기 결과가 달라지므로
   원본 순서(본문 → 음성버튼 → 지우기 → 보내기)를 지킵니다.
   ───────────────────────────────────────────── */

/* ① 주문 도우미 카드 */
.cgbot-order{margin:8px 0;padding:14px 15px;border-radius:14px;
  background:rgba(255,233,35,.16);border:1px solid rgba(216,37,88,.18)}
.cgbot-order .o-nm{font-size:13.5px;font-weight:700}
.cgbot-order .o-pr{margin-top:7px;font-size:12.5px;line-height:1.8;color:#555}
.cgbot-order .o-pr b{color:var(--main)}
.cgbot-order .o-bt{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.cgbot-order .ob{flex:1;min-width:110px;padding:11px 12px;border-radius:999px;font-family:inherit;
  font-size:12px;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.9);border:1px solid var(--line);color:var(--ink)}
.cgbot-order .ob.primary{background:linear-gradient(135deg,#E95073,#D82558);color:#fff;border-color:transparent}


/* ② 챗봇 본체 — 버튼·창·말풍선 */
.cgbot-fab{position:fixed;right:18px;bottom:20px;z-index:2000;width:58px;height:58px;border-radius:50%;
  border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#E95073,#D82558);box-shadow:0 10px 26px rgba(216,37,88,.4)}
.cgbot-fab svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cgbot-fab .dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;
  background:#FFE923;border:2px solid #fff}
.cgbot-win{position:fixed;right:18px;bottom:88px;z-index:2001;width:min(360px,calc(100vw - 36px));
  height:min(520px,calc(100vh - 130px));border-radius:22px;overflow:hidden;display:none;
  flex-direction:column;background:#fff;box-shadow:0 22px 54px rgba(0,0,0,.24)}
.cgbot-win.on{display:flex}
.cgbot-hd{padding:15px 18px;background:linear-gradient(135deg,#E95073,#D82558);color:#fff;
  display:flex;align-items:center;justify-content:space-between}
.cgbot-hd b{font-size:15px}
.cgbot-hd small{display:block;font-size:11px;opacity:.9;margin-top:2px;font-weight:400}
.cgbot-hd button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:0 2px}
.cgbot-body{flex:1;overflow-y:auto;padding:16px;background:#FDF3F5}
.cgbot-msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.75;
  margin-bottom:10px;white-space:pre-wrap;word-break:break-word}
.cgbot-msg.bot{background:#fff;border:1px solid rgba(0,0,0,.06);border-bottom-left-radius:5px}
.cgbot-msg.me{background:linear-gradient(135deg,#E95073,#D82558);color:#fff;margin-left:auto;
  border-bottom-right-radius:5px}
.cgbot-kakao{display:block;margin:2px 0 12px;padding:13px 0;border-radius:14px;text-align:center;
  font-size:13.5px;font-weight:700;background:#FEE500;color:#191600;text-decoration:none}
.cgbot-quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cgbot-quick button{padding:8px 12px;border-radius:999px;font-size:11.5px;font-weight:600;cursor:pointer;
  background:#fff;border:1px solid rgba(0,0,0,.09);color:#555;font-family:inherit}
.cgbot-ft{padding:12px;border-top:1px solid rgba(0,0,0,.07);display:flex;gap:8px;background:#fff}
.cgbot-ft input{flex:1;padding:12px 14px;border-radius:999px;font-size:13.5px;font-family:inherit;
  border:1px solid rgba(0,0,0,.1);background:#fafafa}
.cgbot-ft button{padding:0 18px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#E95073,#D82558)}
.cgbot-ft button:disabled{opacity:.5;cursor:not-allowed}
.cgbot-note{font-size:11px;color:#999;text-align:center;padding:0 16px 10px;background:#FDF3F5;line-height:1.6}
@media(max-width:480px){.cgbot-win{right:12px;left:12px;width:auto;bottom:82px}}

/* ③ 음성 버튼 */
/* 챗봇 음성 버튼 */
.cgbot-ft{gap:6px !important;align-items:center}
.cgbot-ft .cg-ic{flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid rgba(216,37,88,.2);background:rgba(255,255,255,.92);
  transition:transform .2s,background .2s,border-color .2s}
.cgbot-ft .cg-ic svg{width:19px;height:19px;fill:none;stroke:#D82558;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cgbot-ft .cg-ic:hover{background:#FFF1F4;transform:translateY(-1px)}
.cgbot-ft .cg-ic:active{transform:scale(.92)}
.cgbot-ft .cg-ic.on{background:linear-gradient(135deg,#E95073,#D82558);border-color:transparent}
.cgbot-ft .cg-ic.on svg{stroke:#fff}
/* 듣는 중 */
.cgbot-ft .cg-ic.rec{background:linear-gradient(135deg,#E95073,#D82558);border-color:transparent}
.cgbot-ft .cg-ic.rec svg{stroke:#fff}
.cgbot-ft .cg-ic.rec::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(216,37,88,.5);animation:micPulse 1.3s ease-out infinite}
.cgbot-ft .cg-ic{position:relative}
@keyframes micPulse{0%{transform:scale(.9);opacity:.8}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.cgbot-ft input{flex:1;min-width:0}
@media(max-width:400px){.cgbot-ft .cg-ic{width:36px;height:36px}}
/* 통합 음성 버튼 (cgVoiceBtn) */
.cgbot-ft .cg-ic{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.cgbot-ft .cg-ic .cg-spk{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;
  border-radius:50%;background:#22B573;border:2px solid #fff;display:none}
.cgbot-ft .cg-ic.on .cg-spk{display:block}
.cgbot-ft .cg-ic.cancel{background:#F1F2F4;border-color:rgba(0,0,0,.14)}

/* ④ 대화 지우기 (1차) */
.cgbot-hd .cgbot-clr{
  margin-left:auto; margin-right:6px;
  min-height:32px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.16);
  color:#fff; font-family:inherit; font-size:11.5px; font-weight:700;
  cursor:pointer; line-height:1; white-space:nowrap;
}
.cgbot-hd .cgbot-clr:active{ transform:scale(.94) }

/* ⑤ 보내기 단추 · 대화 지우기 (최종) */
/* 보내기 단추 — 츄구미 젤리 아이콘 (2026-09-03) */
.cgbot-ft #cgbotBtn{
  width:46px;height:46px;min-width:46px;padding:0;border:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(216,37,88,.2);
  box-shadow:0 8px 22px rgba(216,37,88,.18);
  font-size:17px;line-height:1;transition:transform .15s,filter .15s;
}
.cgbot-ft #cgbotBtn:hover{ transform:translateY(-1px);filter:brightness(1.06) }
.cgbot-ft #cgbotBtn:active{ transform:none }
.cgbot-ft #cgbotBtn .send-logo{
  width:34px !important;height:34px !important;object-fit:contain !important;
  display:block !important;pointer-events:none !important }
.cgbot-ft #cgbotBtn.busy .send-logo{ animation:cg-think 1.1s ease-in-out infinite }
@keyframes cg-think{
  0%,100%{ transform:scale(1) rotate(0) }
  35%    { transform:scale(1.1) rotate(-7deg) }
  70%    { transform:scale(1.04) rotate(6deg) }
}
@media (prefers-reduced-motion:reduce){ .cgbot-ft #cgbotBtn.busy .send-logo{ animation:none } }
.cgbot-ft #cgbotBtn:disabled{ opacity:.5;cursor:default;transform:none }
/* 대화 지우기 */
.cgbot-hd .cgbot-clr{
  margin-left:auto;margin-right:6px;padding:5px 10px;border:1px solid rgba(255,255,255,.45);
  border-radius:999px;background:transparent;color:inherit;
  font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;opacity:.85
}
.cgbot-hd .cgbot-clr:hover{ opacity:1;background:rgba(255,255,255,.16) }

/* ══════════════════════════════════════════════════════════════
   떠 있는 버튼 두 개가 겹치지 않게 (2026-09-12)

   무슨 일이 있었나
     카카오톡 문의 버튼(.kko-fab)과 상담 버튼(.cgbot-fab)이 화면 오른쪽 아래
     같은 자리에 포개져 있었습니다. 상담 버튼이 위에 있어서,
     **카카오톡 문의 버튼을 눌러도 상담창이 열렸습니다** — 상품·결제 화면에서
     카카오톡 문의가 아예 안 되는 상태였습니다.

     화면마다 bottom 값을 따로 적어 둔 탓이라, 어느 폭에서는 비껴가고
     어느 폭에서는 정확히 포개졌습니다. 폭을 320~1440 까지 훑어서 찾았습니다.

   어떻게 고쳤나
     두 버튼의 자리를 한 곳에서 정합니다. 상담 버튼이 맨 아래,
     카카오톡 버튼은 그 위로 58+16px 띄웁니다.
   ══════════════════════════════════════════════════════════════ */
.cgbot-fab{ bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
.kko-fab{  bottom: calc(94px + env(safe-area-inset-bottom)) !important; }