/* ==========================================================================
   CENTRAS Web Kit — chat 모듈 (AI 에이전트 위젯). 계약: SPEC.md §7·§8
   - 모든 선택자 .cwk-chat* (+ 공용 .cwk-fab-stack). 색·반경·글꼴·z-index 는 --cwk-* 토큰만.
   - 토큰 기본값은 :where(:root) — 명시도 0 이라 cwk-tokens.css 가 언제 읽히든 그 값이 이긴다.
   - 시각 언어: NS 에이전트 화면(agent-ui.css) — 그라데이션 NS 표식, AI 고지 줄, 출처 칩, 접힌 작업 흔적, 사람 연결 카드.
   ========================================================================== */
:where(:root){
  --cwk-ink:#1d1d1f; --cwk-ink2:#424245; --cwk-grey:#6e6e73; --cwk-line:#d2d2d7; --cwk-light:#f5f5f7;
  --cwk-g1:#34d1a8; --cwk-g2:#2f8cff; --cwk-accent:#067a62; --cwk-grad:linear-gradient(90deg,#34d1a8,#2f8cff);
  --cwk-r-sm:10px; --cwk-r:18px; --cwk-r-lg:28px;
  --cwk-font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --cwk-z-fab:60; --cwk-z-panel:70;
  --cwk-fab-right:20px; --cwk-fab-bottom:20px; --cwk-fab-gap:12px;
  --cwk-shadow:0 30px 80px rgba(0,0,0,.20),0 6px 20px rgba(0,0,0,.08);
  --cwk-err:#c4301c; --cwk-warn:#9a4f06; --cwk-fab-size:52px;
  --cwk-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 떠 있는 단추 묶음 (맨 위로 단추는 이 묶음의 앞쪽 = 위에 쌓인다) ---------- */
.cwk-fab-stack{position:fixed;right:calc(var(--cwk-fab-right) + env(safe-area-inset-right,0px));bottom:calc(var(--cwk-fab-bottom) + env(safe-area-inset-bottom,0px));z-index:var(--cwk-z-fab);display:flex;flex-direction:column;align-items:flex-end;gap:var(--cwk-fab-gap);pointer-events:none}
.cwk-fab-stack>*{pointer-events:auto}

/* ---------- 여는 단추 ---------- */
.cwk-chat-fab{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;height:var(--cwk-fab-size);padding:0 20px 0 8px;border-radius:999px;background:var(--cwk-ink);color:#fff;font:700 15px/1 var(--cwk-font);letter-spacing:-.01em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.06) inset;transition:transform .25s var(--cwk-ease),box-shadow .25s var(--cwk-ease),background .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.cwk-chat-fab:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.08) inset}
.cwk-chat-fab:active{transform:translateY(0) scale(.98)}
.cwk-chat-fab:focus-visible{outline:3px solid var(--cwk-g2);outline-offset:3px}
.cwk-chat-fab .cwk-chat-mk{width:36px;height:36px;border-radius:12px;font-size:12.5px}
.cwk-chat-fab-t{display:inline-block;max-width:15em;overflow:hidden;transition:max-width .32s var(--cwk-ease),opacity .2s ease}
/* 접힌 단추(≤760px, 맨 위 근처가 아닐 때): NS 표식만 — 이름은 aria-label 로 (QA P3-21) */
.cwk-chat-fab{transition:transform .25s var(--cwk-ease),box-shadow .25s var(--cwk-ease),background .2s,padding .32s var(--cwk-ease),gap .32s var(--cwk-ease)}
.cwk-chat-fab.cwk-chat-fab-mini{padding:0 8px;gap:0}
.cwk-chat-fab.cwk-chat-fab-mini .cwk-chat-fab-t{max-width:0;opacity:0}
/* 바닥 여유: 단추 묶음 높이만큼 페이지 마지막 바닥 아래를 비운다(값은 스크립트가 --cwk-fab-safe 로, QA P2-10) */
.cwk-fab-safe::after{content:"";display:block;height:var(--cwk-fab-safe,0px)}
html.cwk-chat-on .cwk-chat-fab{opacity:0;transform:scale(.9);pointer-events:none}

/* NS 표식 */
.cwk-chat-mk{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--cwk-g1) 0%,var(--cwk-g2) 100%);color:#fff;font:800 12px/1 var(--cwk-font);letter-spacing:-.03em}

/* ---------- 패널 ---------- */
.cwk-chat{position:fixed;z-index:var(--cwk-z-panel);right:calc(var(--cwk-fab-right) + env(safe-area-inset-right,0px));bottom:calc(var(--cwk-fab-bottom) + env(safe-area-inset-bottom,0px));width:400px;height:min(640px,calc(100vh - var(--cwk-fab-bottom) - 88px));height:min(640px,calc(100dvh - var(--cwk-fab-bottom) - 88px));min-height:min(420px,calc(100dvh - 24px));display:flex;flex-direction:column;background:#fff;color:var(--cwk-ink);border-radius:var(--cwk-r-lg);box-shadow:var(--cwk-shadow),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;font:400 14.5px/1.55 var(--cwk-font);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;text-align:left;-webkit-font-smoothing:antialiased;transform-origin:100% 100%;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .22s ease,transform .32s var(--cwk-ease);visibility:hidden}
.cwk-chat[hidden]{display:none}
.cwk-chat.cwk-open{opacity:1;transform:none;visibility:visible}
.cwk-chat *,.cwk-chat *::before,.cwk-chat *::after{box-sizing:border-box}
.cwk-chat button,.cwk-chat textarea{font:inherit;color:inherit;letter-spacing:inherit}
.cwk-chat svg{display:block;flex:none}
.cwk-chat :focus-visible{outline:2px solid var(--cwk-g2);outline-offset:2px}
.cwk-chat .cwk-chat-ta:focus-visible{outline:none}
.cwk-chat a{color:inherit}

/* 머리 */
.cwk-chat-hd{flex:none;display:flex;align-items:center;gap:11px;padding:16px 12px 14px 18px}
.cwk-chat-id{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.cwk-chat-nm{margin:0;font:800 16px/1.2 var(--cwk-font);letter-spacing:-.025em;color:var(--cwk-ink)}
.cwk-chat-st{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;color:var(--cwk-grey);font-weight:500}
.cwk-chat-live{position:relative;width:7px;height:7px;border-radius:50%;background:var(--cwk-g1);flex:none}
.cwk-chat-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cwk-g1);opacity:0}
.cwk-chat-ib{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--cwk-ink2);cursor:pointer;flex:none;transition:background .15s}
.cwk-chat-ib:hover{background:var(--cwk-light)}
.cwk-chat-ib:focus-visible{outline:2px solid var(--cwk-g2);outline-offset:0}
.cwk-chat-ib svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cwk-chat-ib[disabled]{opacity:.35;cursor:default;background:none}

/* AI 고지 줄 */
.cwk-chat-ai{flex:none;display:flex;align-items:center;gap:6px;margin:0 14px;padding:8px 12px;border-radius:var(--cwk-r-sm);background:var(--cwk-light);font-size:12px;line-height:1.35;color:var(--cwk-ink2)}
.cwk-chat-ai svg{width:14px;height:14px;fill:none;stroke:var(--cwk-accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cwk-chat-ai span{flex:1;min-width:0}
.cwk-chat-ai a{flex:none;font-weight:700;color:var(--cwk-accent);text-decoration:none;white-space:nowrap}
.cwk-chat-ai a:hover{text-decoration:underline;text-underline-offset:2px}

/* 대화 */
.cwk-chat-th{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.cwk-chat-th:focus{outline:none}
.cwk-chat-u{align-self:flex-end;max-width:84%;background:var(--cwk-ink);color:#fff;padding:9px 14px 10px;border-radius:20px 20px 6px 20px;white-space:pre-wrap;line-height:1.5}
.cwk-chat-a{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.cwk-chat-tx{white-space:pre-line;color:var(--cwk-ink);font-size:14.5px;line-height:1.62}
.cwk-chat-greet .cwk-chat-tx{font-size:15px}

/* 작업 흔적 — 접힌 한 줄, 출처보다 약하게 (설득이 아니라 검토용) */
.cwk-chat-tr{display:inline-flex;align-items:center;gap:5px;min-height:16px;font-size:11.5px;font-weight:500;line-height:1.2;color:#8e8e93;white-space:nowrap}
.cwk-chat-tr svg{width:13px;height:13px}
.cwk-chat-tr svg circle{fill:#c7c7cc}
.cwk-chat-tr svg path{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cwk-chat-tr .cwk-chat-sep{color:#c7c7cc}
.cwk-chat-tr .cwk-chat-tm{color:#aeaeb2;margin-left:2px}
.cwk-chat-tr.cwk-chat-wn svg circle{fill:#ff9f0a}
.cwk-chat-tr.cwk-chat-wn{color:var(--cwk-warn)}
.cwk-chat-tr.cwk-chat-dg svg circle{fill:var(--cwk-err)}
.cwk-chat-tr.cwk-chat-dg{color:var(--cwk-err)}
.cwk-chat-sp{width:13px;height:13px;border-radius:50%;border:1.7px solid #e0e0e5;border-top-color:var(--cwk-accent);flex:none;animation:cwk-chat-spin .8s linear infinite}
.cwk-chat-step{transition:opacity .2s ease}
.cwk-chat-step.cwk-chat-fade{opacity:0}

/* 응급 안내 */
.cwk-chat-em{align-self:stretch;display:flex;gap:10px;align-items:flex-start;padding:11px 13px 12px;border-radius:14px;background:color-mix(in srgb,var(--cwk-err) 8%,#fff);border:1px solid color-mix(in srgb,var(--cwk-err) 24%,#fff);color:var(--cwk-err);font-size:13.5px;font-weight:600;line-height:1.5}
.cwk-chat-em svg{width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* 출처 — 실제로 열리는 홈페이지 위치 */
.cwk-chat-srcs{display:flex;flex-wrap:wrap;gap:6px}
.cwk-chat-src{display:inline-flex;align-items:center;gap:7px;min-height:30px;max-width:100%;padding:3px 10px 3px 4px;border:1px solid #e3e3e8;border-radius:10px;background:#fff;font-size:12px;line-height:1.25;text-decoration:none;color:var(--cwk-ink);transition:border-color .15s,background .15s}
.cwk-chat-src:hover{border-color:color-mix(in srgb,var(--cwk-accent) 45%,#fff);background:color-mix(in srgb,var(--cwk-accent) 4%,#fff)}
.cwk-chat-dc{width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--cwk-accent) 11%,#fff);display:flex;align-items:center;justify-content:center;flex:none}
.cwk-chat-dc svg{width:13px;height:13px;fill:none;stroke:var(--cwk-accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cwk-chat-src b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cwk-chat-src .cwk-chat-ext{width:11px;height:11px;fill:none;stroke:var(--cwk-grey);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 사람 연결 카드 — 오류가 아니라 일급 기능 */
.cwk-chat-ho{align-self:stretch;display:flex;align-items:center;gap:11px;padding:11px 11px 11px 12px;border-radius:16px;border:1px solid #e3e3e8;background:#fff}
.cwk-chat-hoa{position:relative;width:36px;height:36px;border-radius:50%;background:var(--cwk-ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.cwk-chat-hoa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cwk-chat-hob{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cwk-chat-hob b{font-size:13.5px;font-weight:700;line-height:1.3}
.cwk-chat-hob span{font-size:12px;line-height:1.35;color:var(--cwk-accent);font-weight:600}
.cwk-chat-hobtn{flex:none;display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 14px;border-radius:999px;background:var(--cwk-ink);color:#fff!important;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:filter .15s}
.cwk-chat-hobtn:hover{filter:brightness(1.25)}

/* 추천·이어서 묻기 */
.cwk-chat-sugs{display:flex;flex-direction:column;align-items:flex-start;gap:7px;align-self:stretch}
.cwk-chat-sl{font-size:11.5px;font-weight:700;color:var(--cwk-grey);letter-spacing:.01em;margin-bottom:1px}
.cwk-chat-chips{display:flex;flex-wrap:wrap;gap:6px}
.cwk-chat-chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:34px;max-width:100%;padding:6px 13px 6px 11px;border-radius:999px;border:1px solid #e3e3e8;background:#fff;font:500 13px/1.3 var(--cwk-font);color:var(--cwk-ink2);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.cwk-chat-chip svg{width:13px;height:13px;fill:none;stroke:var(--cwk-accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cwk-chat-chip:hover{border-color:var(--cwk-ink2);color:var(--cwk-ink)}
.cwk-chat-chip:focus-visible{outline:2px solid var(--cwk-g2);outline-offset:2px}
.cwk-chat-chip[disabled]{opacity:.45;cursor:default}
.cwk-chat-greet .cwk-chat-chips{flex-direction:column;align-items:flex-start}

/* 오류 */
.cwk-chat-err{color:var(--cwk-ink2)}
.cwk-chat-retry{all:unset;cursor:pointer;margin-left:6px;font-weight:700;color:var(--cwk-accent);text-decoration:underline;text-underline-offset:2px}
.cwk-chat-retry:focus-visible{outline:2px solid var(--cwk-g2)}

/* 나중에 나타나는 부분(출처·카드·칩) */
.cwk-chat-late{transition:opacity .35s ease,transform .45s var(--cwk-ease)}
.cwk-chat-late.cwk-chat-hide{opacity:0;transform:translateY(6px)}

/* 입력창 */
.cwk-chat-cp{flex:none;padding:10px 14px 12px;border-top:1px solid #ededf0;background:#fff;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.cwk-chat-in{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 16px;border-radius:24px;background:var(--cwk-light);border:1px solid transparent;transition:border-color .15s,background .15s}
.cwk-chat-in:focus-within{background:#fff;border-color:color-mix(in srgb,var(--cwk-g2) 55%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--cwk-g2) 14%,transparent)}
.cwk-chat-ta{flex:1;min-width:0;border:0;outline:0;background:transparent;resize:none;padding:7px 0 6px;max-height:132px;font-size:15px!important;line-height:1.45!important;color:var(--cwk-ink)}
.cwk-chat-ta::placeholder{color:#8e8e93}
.cwk-chat-send{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:50%;background:var(--cwk-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:opacity .15s,transform .15s}
.cwk-chat-send svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cwk-chat-send:focus-visible{outline:2px solid var(--cwk-g2);outline-offset:2px}
.cwk-chat-send[disabled]{opacity:.25;cursor:default}
.cwk-chat-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 4px 0;font-size:11px;line-height:1.3;color:#8e8e93}
.cwk-chat-cnt{flex:none;font-variant-numeric:tabular-nums}
.cwk-chat-cnt.cwk-chat-max{color:var(--cwk-err);font-weight:700}

/* 화면 낭독기 전용 */
.cwk-chat-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 모바일: 전체 화면 시트 ---------- */
@media (max-width:560px){
  /* 전체 화면 모달 시트 — 사이트의 고정 머리 막대(NS 홈페이지 z-index 100)보다 위 */
  .cwk-chat{z-index:calc(var(--cwk-z-panel) + 1000);inset:0;right:0;bottom:0;width:100%;height:100%;min-height:0;border-radius:0;box-shadow:none;transform:translateY(24px);transform-origin:50% 100%;padding-top:env(safe-area-inset-top,0px)}
  .cwk-chat.cwk-open{transform:none}
  .cwk-chat-hd{padding:12px 8px 12px 16px}
  .cwk-chat-th{padding:14px 16px 16px}
  html.cwk-chat-lock,html.cwk-chat-lock body{overflow:hidden!important}
  html.cwk-chat-on .cwk-fab-stack{visibility:hidden}
}
@media (max-width:380px){
  .cwk-chat-fab{padding:0;width:var(--cwk-fab-size);justify-content:center}
  .cwk-chat-fab-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- 동작 ---------- */
@keyframes cwk-chat-spin{to{transform:rotate(360deg)}}
@keyframes cwk-chat-ping{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.8)}}
@keyframes cwk-chat-breath{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.92)}}
@media (prefers-reduced-motion:no-preference){
  .cwk-chat-live::after{animation:cwk-chat-ping 2.4s var(--cwk-ease) infinite}
  .cwk-chat.cwk-chat-busy .cwk-chat-hd .cwk-chat-mk{animation:cwk-chat-breath 1.1s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  .cwk-chat,.cwk-chat-fab,.cwk-chat-fab-t,.cwk-chat-late,.cwk-chat-step{transition:none!important}
  .cwk-chat-th{scroll-behavior:auto}
  .cwk-chat-sp{animation-duration:2.4s}
}

/* ---------- 인쇄: 숨김 ---------- */
@media print{
  .cwk-chat,.cwk-chat-fab,.cwk-fab-stack{display:none!important}
  .cwk-fab-safe::after{display:none}
}