/* 웹 채팅 위젯 — 채널톡 대체(자체 구축). 4개 페이지 공통이고 상담원 화면(agent.html)도 같은 조각을 쓴다.
   토큰(--ink·--green 류)은 site.css 가 이미 정의한 것을 그대로 쓴다 — 이 파일은 site.css 뒤에 온다.
   한국어 규칙: 글자가 놓이는 곳마다 word-break:keep-all, flex 자식은 min-width:0. */

/* ── 런처 ────────────────────────────────────────────────────────────── */
.chat-launch{
  position:fixed;left:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:80;
  display:inline-flex;align-items:center;gap:9px;min-width:0;
  padding:13px 19px 13px 16px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;border-radius:999px;
  font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 10px 28px rgba(11,15,13,.28);
  transition:background .2s var(--ease),box-shadow .2s var(--ease),opacity .2s var(--ease);
}
.chat-launch:hover{background:#1B2621;box-shadow:0 14px 34px rgba(11,15,13,.34)}
.chat-launch:focus-visible{outline:2.5px solid var(--green);outline-offset:3px}
.chat-launch svg{flex:none;color:var(--green-on-ink)}
.chat-launch[hidden]{display:none}
/* 모바일 하단 CTA 바(.dock)가 올라오면 그 위로 비켜선다 — 겹치면 둘 다 못 누른다 */
.chat-launch.above-dock{bottom:66px}
/* 안 읽은 답장 개수 */
.chat-launch .badge{
  display:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--green);color:#06110B;font-size:12px;font-weight:800;
  align-items:center;justify-content:center;
}
.chat-launch.unread .badge{display:inline-flex}

/* ── 패널 ────────────────────────────────────────────────────────────── */
/* padding:0 을 반드시 박는다 — site.css 의 `section{padding:clamp(64px,7.5vw,112px) 0}` 이 본문 섹션용인데
   위젯도 <section> 이라 그대로 먹는다(실측: 1440px 에서 위아래 109px 이 생겨 헤더가 밀리고 아래가 잘렸다).
   위젯은 어느 페이지에나 얹히므로 바깥 규칙에 기대지 않고 스스로 막는다. */
.chat-panel{
  padding:0;
  position:fixed;left:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:81;
  width:min(384px,calc(100vw - 28px));max-height:min(624px,calc(100vh - 40px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 24px 60px rgba(11,15,13,.26);
}
.chat-panel.open{display:flex}
@media (prefers-reduced-motion:no-preference){
  .chat-panel.open{animation:chat-in .22s var(--ease) both}
  @keyframes chat-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
}

.chat-head{
  flex:none;background:var(--ink);color:#fff;padding:16px 16px 15px 18px;
  display:flex;align-items:flex-start;gap:12px;
}
.chat-head .ht{min-width:0;flex:1}
.chat-head h2{
  font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.02em;
  line-height:1.35;word-break:keep-all;
}
.chat-head p{
  margin-top:5px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.62);word-break:keep-all;
}
.chat-head .live{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:11.5px;font-weight:700;color:var(--green-on-ink);letter-spacing:.01em;
}
.chat-head .live i{width:6px;height:6px;border-radius:50%;background:var(--green-on-ink);flex:none}
.chat-x{
  flex:none;width:34px;height:34px;border:0;cursor:pointer;border-radius:8px;
  background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;
  transition:background .18s var(--ease);
}
.chat-x:hover{background:rgba(255,255,255,.2)}
.chat-x:focus-visible{outline:2.5px solid var(--green-on-ink);outline-offset:2px}

/* ── 대화 ────────────────────────────────────────────────────────────── */
.chat-log{
  flex:1;min-height:190px;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px;background:var(--paper-2);
  display:flex;flex-direction:column;gap:10px;
}
.chat-note{
  align-self:center;max-width:92%;text-align:center;
  font-size:12.5px;line-height:1.65;color:var(--ink-45);word-break:keep-all;
  padding:10px 12px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;
}
.msg{max-width:84%;min-width:0;padding:11px 14px;border-radius:14px;
  font-size:14.5px;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;white-space:pre-wrap}
.msg.visitor{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg.agent{align-self:flex-start;background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-bottom-left-radius:4px}
.msg .t{display:block;margin-top:5px;font-size:11px;color:var(--ink-45)}
.msg.visitor .t{color:rgba(255,255,255,.55)}
.msg.pending{opacity:.55}

/* ── 자동응답 버튼 ────────────────────────────────────────────────────
   한국어 규칙: 버튼 하나가 창보다 넓어지면 글자가 한 자씩 접힌다. max-width 로 가두고
   keep-all 로 어절에서만 끊는다(360px 실측 기준). 줄바꿈은 flex-wrap 이 맡는다. */
.chat-quick{
  flex:none;display:flex;flex-wrap:wrap;gap:7px;
  padding:0 14px 13px;background:var(--paper-2);
}
.chat-quick[hidden]{display:none}
.chat-quick .qr{
  min-width:0;max-width:100%;
  padding:9px 14px;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:999px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.4;letter-spacing:-.01em;
  text-align:left;word-break:keep-all;overflow-wrap:break-word;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.chat-quick .qr:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.chat-quick .qr:focus-visible{outline:2.5px solid var(--green);outline-offset:2px}
/* 사람에게 넘어가는 버튼만 색으로 구분한다 — 다른 것과 무게가 다르다 */
.chat-quick .qr-live{background:var(--green);border-color:var(--green);color:#06110B;font-weight:700}
.chat-quick .qr-live:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

/* ── 입력 ────────────────────────────────────────────────────────────── */
.chat-foot{flex:none;border-top:1px solid var(--rule);background:var(--paper);padding:12px 12px 12px 14px}
.chat-id{display:flex;gap:8px;margin-bottom:9px}
/* hidden 속성만으로는 안 숨는다 — 바로 위 display:flex 가 이긴다. 8/14 부터 있던 구멍이라
   첫 발송 뒤 이름칸을 접는 코드가 여태 헛돌았다(8/20 발견·수리). */
.chat-id[hidden]{display:none}
.chat-id input{
  flex:1;min-width:0;padding:9px 11px;border:1px solid var(--rule);border-radius:8px;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--paper-2);
}
.chat-id input::placeholder{color:var(--ink-35)}
.chat-id input:focus{outline:2px solid var(--green);outline-offset:-1px;background:var(--paper)}
.chat-row{display:flex;align-items:flex-end;gap:9px}
.chat-row textarea{
  flex:1;min-width:0;resize:none;max-height:112px;
  padding:11px 12px;border:1px solid var(--rule-2);border-radius:10px;
  font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--ink);
  word-break:keep-all;overflow-wrap:break-word;
}
.chat-row textarea::placeholder{color:var(--ink-35)}
.chat-row textarea:focus{outline:2px solid var(--green);outline-offset:-1px}
.chat-send{
  flex:none;width:44px;height:44px;border:0;border-radius:10px;cursor:pointer;
  background:var(--green-deep);color:#fff;display:grid;place-items:center;
  transition:background .18s var(--ease),opacity .18s var(--ease);
}
.chat-send:hover:not(:disabled){background:var(--green-darker)}
.chat-send:disabled{opacity:.4;cursor:default}
.chat-send:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.chat-legal{
  margin-top:9px;font-size:11.5px;line-height:1.6;color:var(--ink-45);word-break:keep-all;
}
.chat-legal a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

/* ── 모바일 ──────────────────────────────────────────────────────────
   좁은 화면에서는 카드가 아니라 화면 아래에서 올라오는 시트가 된다.
   360px 에서도 말풍선·버튼이 한 글자씩 세로로 쌓이지 않아야 한다(실측 기준). */
@media (max-width:520px){
  .chat-panel{
    right:0;left:0;bottom:0;width:100%;max-height:86vh;height:86vh;
    border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;
  }
  .chat-launch{padding:12px 16px 12px 14px;font-size:14px}
  .msg{max-width:88%}
  .chat-quick{padding:0 12px 12px;gap:6px}
  .chat-quick .qr{padding:8px 12px;font-size:13px}
}
@media (max-width:360px){
  .chat-launch .lb{display:none}          /* 아이콘만 남긴다 — 라벨을 억지로 밀어넣으면 글자가 접힌다 */
  .chat-launch{padding:13px;border-radius:50%}
}

/* ── 상담원 화면(agent.html)에서만 쓰는 조각 ─────────────────────────── */
.agent-wrap{max-width:940px;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(14px,4vw,28px)}
.agent-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.agent-head h1{font-family:var(--display);font-size:clamp(19px,3vw,25px);letter-spacing:-.02em;word-break:keep-all}
.agent-head .who{font-size:13px;color:var(--ink-45);min-width:0}
.agent-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.agent-grid{grid-template-columns:minmax(0,1fr)}}
.room-list{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper)}
.room-list .rl-h{padding:12px 14px;border-bottom:1px solid var(--rule);background:var(--paper-2);
  font-size:12.5px;font-weight:700;color:var(--ink-45);letter-spacing:.02em}
.room{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--rule);
  background:var(--paper);padding:13px 14px;cursor:pointer;font-family:var(--sans);min-width:0}
.room:hover{background:var(--paper-2)}
.room[aria-current="true"]{background:var(--green-wash);box-shadow:inset 3px 0 0 var(--green)}
.room:focus-visible{outline:2.5px solid var(--green);outline-offset:-2px}
.room .rn{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;color:var(--ink);word-break:keep-all}
.room .rt{margin-top:4px;font-size:12.5px;color:var(--ink-45);word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.room .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.agent-room{padding:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--paper);min-height:min(70vh,560px)}   /* padding:0 이유는 .chat-panel 주석과 같다 */
.agent-room .chat-log{min-height:0;flex:1}
.agent-empty{padding:44px 20px;text-align:center;color:var(--ink-45);font-size:14px;word-break:keep-all}
.agent-gate{max-width:440px;margin:12vh auto;padding:24px;border:1px solid var(--rule);border-radius:12px;
  background:var(--paper);text-align:center}
.agent-gate h1{font-family:var(--display);font-size:19px;margin-bottom:10px;word-break:keep-all}
.agent-gate p{font-size:14px;color:var(--ink-45);line-height:1.7;word-break:keep-all}