/*
 * 고집이 FAQ 위젯 — 파트너 사이트 전 페이지에 뜨는 떠 있는 상담창.
 *
 * ★★★<b>원본 데모 HTML 에 있던 전역 규칙은 걷어냈다.</b> 그대로 가져오면 파트너 사이트
 *   전체가 흔들린다 — 원본에는 다음이 들어 있었다.
 *     body{margin:0;font-family:...;background:#eef2ef;color:...}   ← 사이트 배경·글꼴을 덮는다
 *     *{box-sizing:border-box} · button,textarea{font:inherit}      ← Tailwind 가 이미 한다
 *     :focus-visible{outline:3px solid ...}                          ← 사이트 전체 포커스 테두리를 바꾼다
 *     @media(prefers-reduced-motion){*{transition:none!important}}   ← 사이트 전체 애니메이션을 끈다
 *   아래에서 <b>위젯 안으로만</b> 범위를 좁혀 되살렸다.
 *
 * ★수정할 것이 생기면 원본이 아니라 이 파일을 고친다. FAQ 내용은 gojibi-faq-widget.js 의
 *   FAQ_DATA 에 있다.
 */
  :root{--gj-green:#1f8a4c;--gj-green-dark:#166b3a;--gj-bg:#f4f7f5;--gj-bot:#fff;--gj-text:#1a2b22;--gj-muted:#52685c;--gj-border:#dbe6df;--gj-focus:#ffb020}

  /* ★위젯 안으로 좁힌 것들 — 원본에서는 전역이었다. */
  .gj-launcher,.gj-window{box-sizing:border-box}
  .gj-window *,.gj-window *::before,.gj-window *::after{box-sizing:border-box}
  .gj-launcher,.gj-window button,.gj-window textarea{touch-action:manipulation}
  /* ★글꼴은 <b>사이트 것을 물려받는다</b>. 원본은 body 에 자기 글꼴을 깔았지만 그건 걷어냈고,
     버튼·textarea 는 두지 않으면 브라우저 기본 글꼴(작은 명조)로 저기만 따로 뜬다. */
  .gj-launcher,.gj-window button,.gj-window textarea{font:inherit}
  .gj-launcher:focus-visible,.gj-window :focus-visible{outline:3px solid var(--gj-focus);outline-offset:2px}
  @media(prefers-reduced-motion:reduce){.gj-launcher,.gj-window,.gj-window *{transition:none!important}}
  .gj-launcher{position:fixed;right:24px;bottom:24px;z-index:9998;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;background:var(--gj-green);box-shadow:0 6px 20px rgba(31,138,76,.35);display:grid;place-items:center;transition:background-color .2s,transform .2s}
  .gj-launcher:hover{background:var(--gj-green-dark)}.gj-launcher:active{transform:scale(.96)}
  .gj-launcher img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
  .gj-window{position:fixed;right:24px;bottom:96px;z-index:9999;width:372px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100dvh - 120px);background:var(--gj-bg);border-radius:18px;overflow:hidden;display:none;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.18);border:1px solid var(--gj-border)}
  .gj-window.open{display:flex}
  .gj-header{background:var(--gj-green);color:#fff;padding:12px 12px 12px 16px;display:flex;align-items:center;gap:10px}
  .gj-ava{width:40px;height:40px;flex:0 0 auto}.gj-ava img{width:100%;height:100%;display:block}
  .gj-title{font-weight:700;font-size:15px}.gj-sub{font-size:11px;opacity:.9}
  .gj-close{margin-left:auto;width:44px;height:44px;background:transparent;border:0;border-radius:10px;color:#fff;font-size:25px;line-height:1;cursor:pointer}.gj-close:hover{background:rgba(255,255,255,.14)}
  .gj-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
  .gj-row{display:flex;gap:8px;align-items:flex-end}.gj-row.user{flex-direction:row-reverse}
  .gj-bubble{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
  .gj-row.bot .gj-bubble{background:var(--gj-bot);border:1px solid var(--gj-border);border-bottom-left-radius:4px}.gj-row.user .gj-bubble{background:var(--gj-green);color:#fff;border-bottom-right-radius:4px}
  .gj-mini{width:28px;height:28px;border-radius:50%;background:var(--gj-green);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}.gj-mini img{width:100%;height:100%;display:block;object-fit:cover}
  .gj-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px;max-height:164px;overflow-y:auto}
  .gj-chip{min-height:44px;background:#fff;border:1px solid var(--gj-green);color:var(--gj-green-dark);border-radius:18px;padding:8px 12px;font-size:12.5px;cursor:pointer;text-align:left;transition:background-color .18s,color .18s,border-color .18s}
  .gj-chip:hover{background:var(--gj-green);color:#fff}.gj-chip.back{border-color:var(--gj-muted);color:var(--gj-muted)}.gj-chip.search{border-style:dashed}
  /* ★<b>기본은 감춰 둔다</b> — 첫 화면은 카테고리 목록이라 검색을 못 쓴다(마크업의 textarea 도
     disabled 로 시작한다). 켜는 것은 setInputOn(true) 가 display:flex 를 직접 적어 넣는다.
     여기를 flex 로 두면 JS 가 돌기 전 한 순간 죽은 칸이 비쳤다 사라진다. */
  .gj-input{display:none;gap:8px;padding:12px;background:#fff;border-top:1px solid var(--gj-border)}
  .gj-input textarea{flex:1;resize:none;min-height:44px;border:1px solid var(--gj-border);border-radius:12px;padding:10px 12px;font-size:16px;font-family:inherit;max-height:90px;outline:none;line-height:1.45}.gj-input textarea:focus{border-color:var(--gj-green);box-shadow:0 0 0 3px rgba(31,138,76,.14)}.gj-input textarea:disabled{background:#f1f4f2;color:#8a9890}
  .gj-send{min-width:58px;min-height:44px;background:var(--gj-green);color:#fff;border:0;border-radius:12px;padding:0 14px;cursor:pointer;font-weight:700}.gj-send:hover{background:var(--gj-green-dark)}.gj-send:disabled{opacity:.5;cursor:not-allowed}
  /* ★안내 문구를 뺀 뒤로 <b>여백만 남은 줄</b>이다 — 창이 입력칸·칩에서 뚝 끊기지 않게 받쳐 준다.
     글자가 없으므로 읽어 줄 것도 없다(aria-hidden). 종전의 font-size·color·strong 규칙은 지웠다.
     ★★<b>경계선은 검색창이 감춰졌을 때만</b> 그린다. 검색 화면에서는 바로 위 .gj-input 이 이미
     같은 선을 그리고 있어, 여기도 그리면 <b>흰 칸 안에 줄이 두 개</b>로 보인다.
     (gj-searching 은 setInputOn 이 붙였다 뗀다 — 검색창 표시와 <b>같은 한 자리</b>다.) */
  .gj-foot{padding:6px 8px 8px;background:#fff;border-top:1px solid var(--gj-border)}
  .gj-window.gj-searching .gj-foot{border-top:0}
  @media(max-width:480px){.gj-launcher{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}.gj-window{right:16px;bottom:88px;height:min(640px,calc(100dvh - 112px))}}