/* 문의(채팅) — 자사몰 공통
 * ═══════════════════════════════════════════════════════════════════════
 * 홈에만 있던 것을 떼어 왔다. 예약대행처럼 장바구니에 담지 않고 물어서
 * 진행하는 상품이 생기면서, 상품 상세와 목록에서도 이 창이 열려야 한다.
 * 색과 크기는 index.html 안에 있던 것을 그대로 옮긴 것이다.
 *
 * 쓰는 쪽은 <link rel="stylesheet" href="chat.css"> 한 줄만 더 달면 된다.
 * ═══════════════════════════════════════════════════════════════════════ */

/* 값은 홈(index.html)의 것을 그대로 쓰되, 그 변수를 안 들고 있는 화면
   (상품 상세·목록은 tw.css 를 쓴다)에서도 같은 색이 나오게 기본값을 적는다. */
.chatbtn,.chatwrap{
  --c-green:#17A548; --c-green-h:#14903F; --c-red:#FC1D01;
  --c-ink:#000; --c-body:#333; --c-gray:#666; --c-lgray:#888;
  --c-bg:#F5F5F7; --c-line:#E4E8F1; --c-line2:#E2E2E5;
  --c-r2:7.2px; --c-r3:10.8px;
}
/* 화면 아래에 붙박이 띠가 있는 곳(상품 상세의 담기 바)은 그 높이만큼
   단추를 올린다. 화면이 --chat-lift 를 정해 주면 단추와 창이 함께 올라간다.
   안 정하면 0 이라 지금까지와 같다.
   ※ 같은 일을 하는 단추가 둘이면(담기 바가 이미 '예약 문의하기' 일 때)
     화면이 body 에 .askinline 을 달아 떠 있는 단추를 감춘다 — 창은 그대로
     열린다(EDMCHAT.ask). */
body.askinline .chatbtn{display:none}

/* ── 문의 채팅 ────────────────────────────────────────────────────────
   떠 있는 단추는 오른쪽 아래에. 장바구니가 헤더에 있어 자리가 겹치지 않는다.
   패널은 넓은 화면에서 모서리에, 좁은 화면에서는 화면을 거의 채운다 —
   휴대폰에서 작은 상자에 글을 쓰게 하면 오타가 난다. */
.chatbtn{position:fixed;right:18px;bottom:calc(18px + var(--chat-lift, 0px));z-index:60;display:inline-flex;
  align-items:center;gap:8px;padding:13px 18px;border-radius:999px;border:0;
  background:var(--c-green);color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.22);cursor:pointer}
.chatbtn:hover{background:var(--c-green-h)}
.chatbtn .dot{position:absolute;top:8px;right:10px;width:11px;height:11px;
  border-radius:50%;background:var(--c-red);border:2px solid #fff;display:none}
.chatbtn.new .dot{display:block}

.chatwrap{position:fixed;right:18px;bottom:calc(18px + var(--chat-lift, 0px));z-index:61;width:min(380px,calc(100vw - 36px));
  max-height:min(620px,calc(100vh - 36px));display:none;flex-direction:column;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--c-r3);
  box-shadow:0 20px 60px rgba(0,0,0,.26);overflow:hidden}
.chatwrap.on{display:flex}
.chatwrap .ch{display:flex;align-items:center;gap:9px;padding:13px 15px;
  background:var(--c-green);color:#fff}
.chatwrap .ch b{font-size:15px;font-weight:700}
.chatwrap .ch .sp{flex:1 1 auto}
.chatwrap .ch small{font-size:12px;opacity:.9}
.chatwrap .ch button{background:none;border:0;color:#fff;font-size:20px;line-height:1;
  cursor:pointer;padding:2px 4px}
.chatwrap .cb{flex:1 1 auto;overflow-y:auto;padding:14px 15px;background:var(--c-bg);
  min-height:180px}
.chatwrap .cf{border-top:1px solid var(--c-line);padding:11px 12px;background:#fff}

.chatwrap .intro{font-size:13.5px;line-height:1.75;color:var(--c-body);word-break:keep-all;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--c-r2);padding:12px 13px;
  margin-bottom:12px}
.chatwrap .intro b{color:var(--c-ink)}
.chatwrap .fld{margin-bottom:10px}
.chatwrap .fld > span{display:block;font-size:12px;font-weight:700;color:var(--c-body);
  margin-bottom:4px}
.chatwrap .fld > span em{color:var(--c-red);font-style:normal}
.chatwrap input[type=text],.chatwrap input[type=tel],.chatwrap textarea{
  width:100%;padding:9px 11px;font:inherit;font-size:14px;border:1px solid var(--c-line2);
  border-radius:var(--c-r2);background:#fff;color:var(--c-ink)}
.chatwrap textarea{min-height:78px;resize:vertical;line-height:1.6}
.chatwrap input:focus,.chatwrap textarea:focus{outline:2px solid var(--c-green);
  outline-offset:-2px}
.chatwrap .go{width:100%;padding:12px;border:0;border-radius:var(--c-r2);
  background:var(--c-green);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.chatwrap .go:hover{background:var(--c-green-h)}
.chatwrap .go:disabled{background:var(--c-lgray);cursor:default}
.chatwrap .link{background:none;border:0;color:var(--c-green);font-size:12.5px;
  font-weight:700;cursor:pointer;padding:8px 0 0;text-decoration:underline}
.chatwrap .err{margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--c-red);
  word-break:keep-all;line-height:1.6}
/* 회원 정보를 채웠다는 알림 — 오류가 아니라 사실을 알리는 줄이라
   빨강이 아니라 회색으로 둔다. 고쳐도 된다는 것까지 적는다. */
.chatwrap .mineNote{margin:8px 0 0;font-size:12px;color:var(--c-gray);
  word-break:keep-all;line-height:1.6}
.chatwrap .mineNote[hidden]{display:none}
.chatwrap .no{font-size:12px;color:var(--c-gray);margin:0 0 10px}
.chatwrap .no b{color:var(--c-ink);font-variant-numeric:tabular-nums}

/* 말풍선 — 손님은 오른쪽, 담당자는 왼쪽. 누가 한 말인지 색보다 자리로 안다. */
.msg{display:flex;margin-bottom:10px}
.msg.me{justify-content:flex-end}
.msg .bub{max-width:82%;padding:9px 12px;border-radius:var(--c-r3);font-size:14px;
  line-height:1.65;white-space:pre-wrap;word-break:break-word}
.msg.you .bub{background:#fff;border:1px solid var(--c-line);color:var(--c-body);
  border-top-left-radius:4px}
.msg.me .bub{background:var(--c-green);color:#fff;border-top-right-radius:4px}
.msg .at{display:block;margin-top:4px;font-size:10.5px;opacity:.72}
.chatwrap .waiting{font-size:12.5px;color:var(--c-gray);text-align:center;padding:6px 0}
.chatwrap .sendrow{display:flex;gap:8px;align-items:flex-end}
.chatwrap .sendrow textarea{min-height:44px;max-height:120px}
.chatwrap .sendrow button{flex:0 0 auto;padding:11px 15px;border:0;border-radius:var(--c-r2);
  background:var(--c-green);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.chatwrap .sendrow button:disabled{background:var(--c-lgray);cursor:default}

@media (max-width:520px){
  .chatwrap{right:8px;left:8px;bottom:calc(8px + var(--chat-lift, 0px));width:auto;max-height:calc(100vh - 16px)}
  .chatbtn{right:12px;bottom:calc(12px + var(--chat-lift, 0px));padding:12px 16px;font-size:14px}
}
@media print{ .chatbtn,.chatwrap{display:none!important} }