/* 호객꾼 위젯(강태서 실장) 스타일 — 사이트 팔레트(괘선·인주·서류)를 그대로 쓴다.
   ⚠ 클래스 접두어는 반드시 .hk- 다. 이 사이트는 .wrap 을 헤더·푸터·섹션에서 이미 쓰고 있어서
     정본(React JianChat)의 .wrap 컨테이너 이름을 그대로 가져오면 사이트 레이아웃이 깨진다.
   ⚠ 컨테이너는 pointer-events:none, 보이는 자식만 auto — 말풍선 폭에 맞춰 늘어난 투명 영역이
     아래 페이지의 상담 버튼 클릭을 삼키는 사고를 막는다(부산회생프로 실사고). */

.hk-root {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none; /* ★ 투명 영역이 클릭을 삼키지 않게 */
  font-family: var(--sans, system-ui, sans-serif);
}
.hk-root > * { pointer-events: auto; } /* 실제로 보이는 요소만 클릭을 받는다 */

@media (max-width: 860px) {
  .hk-root { right: 12px; bottom: 68px; } /* 하단 콜바(56px) 위로 */
}

/* ---------- 아바타 ---------- */
.hk-avatar {
  width: 128px; height: 128px;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  animation: hk-in .62s cubic-bezier(.18,1.5,.4,1) both, hk-float 4.6s ease-in-out .8s infinite;
  filter: drop-shadow(0 10px 20px rgba(26,28,33,.24));
}
@media (max-width: 860px) { .hk-avatar { width: 106px; height: 106px; } }
/* 휴대폰(390px)에서 106px 는 화면 폭의 27%다 — 첫 화면의 "지금 전화 상담" 단추 오른쪽을 덮어 번호가 잘렸다
   (2026-09-14 촬영). 얼굴은 알아볼 만큼만 남기고 줄인다. */
@media (max-width: 480px) { .hk-avatar { width: 64px; height: 64px; } } /* 2026-09-25 80→64 — 가이드·칼럼 본문 글자를 덮었다. 없애지는 않는다(대표 지시) */

.hk-avatar img, .hk-avatar video {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--paper-dim, #F4F3EE);
  border: 3px solid var(--paper, #FBFAF7);
  box-shadow: 0 0 0 1px var(--line, #DCD9D0);
}
.hk-avatar video { position: absolute; inset: 0; }
.hk-avatar .hk-face { position: relative; z-index: 1; transition: opacity .22s ease; }
/* 기본 표정일 때만 idle 영상이 보인다.
   ⚠ 영상이 실제로 재생될 때만 얼굴을 숨긴다 — 예전에는 영상 로드 여부와 상관없이 숨겨서,
   영상이 안 뜨면 손님에게 얼굴 없는 빈 흰 원만 보였다(실제로 그랬다). */
.hk-avatar.hk-idle.hk-video-ok .hk-face { opacity: 0; }
.hk-avatar:not(.hk-video-ok) video { opacity: 0; }

/* 인주 도장 느낌의 상태 점 */
.hk-avatar::after {
  content: ''; position: absolute; right: 6px; bottom: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--stamp, #C22F2E);
  border: 3px solid var(--paper, #FBFAF7);
  z-index: 2;
}

@keyframes hk-in {
  from { opacity: 0; transform: translateY(26px) scale(.72) rotate(-7deg); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.12) rotate(3deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes hk-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-12px) rotate(2.4deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(-7px) rotate(-2.4deg); }
}

/* ---------- 말풍선 ---------- */
.hk-bubble {
  position: relative;             /* 접기 단추 기준 */
  max-width: min(300px, calc(100vw - 48px));
  max-height: 46vh;               /* 본문을 절반 넘게 덮지 않는다 */
  overflow-y: auto;
  padding-right: 46px;            /* 접기 단추(44px) 자리 */
  background: var(--paper, #FBFAF7);
  color: var(--ink, #1A1C21);
  border: 1px solid var(--line, #DCD9D0);
  border-left: 4px solid var(--stamp, #C22F2E);
  border-radius: 12px 12px 4px 12px;
  padding: 13px 15px 12px;
  /* 사이트 본문이 17px이다. 15px은 60대 손님에게 더 작다(2026-09-13 실측) */
  font-size: 16px;
  line-height: 1.7;
  box-shadow: 0 12px 28px rgba(26,28,33,.16);
  animation: hk-pop .34s cubic-bezier(.2,1.3,.4,1) both;
  word-break: keep-all;
}
.hk-bubble .hk-name {
  display: block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--stamp-deep, #9E2020);
  margin-bottom: 4px;
}
/* 접기 단추 — 손님이 읽던 글을 마저 읽을 수 있게. 아바타는 남으므로 대화는 언제든 다시 열린다 */
.hk-bubble .hk-close {
  position: absolute; top: 4px; right: 6px;
  /* 44px 미만이면 손가락이 굵은 손님이 못 누른다. 못 닫으면 17초를 기다리거나 나간다 */
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-soft, #4A4D55);
  border-radius: 8px;
}
.hk-bubble .hk-close:hover { background: var(--paper-dim, #F4F3EE); }
.hk-bubble .hk-cta {
  display: inline-block; margin-top: 9px;
  font-size: 13.5px; font-weight: 800;
  color: var(--stamp, #C22F2E);
  border-bottom: 1.5px solid currentColor;
  cursor: pointer;
}
@keyframes hk-pop {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 대화 패널 (우하단 고정 — 화면 가운데 모달 금지) ---------- */
.hk-panel {
  width: min(376px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 120px));
  background: var(--paper, #FBFAF7);
  border: 1px solid var(--line-strong, #B8B4A8);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(26,28,33,.3);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: hk-pop .3s cubic-bezier(.2,1.2,.4,1) both;
}
@media (max-width: 860px) {
  /* 키보드가 올라오면 vh 는 줄지 않아 입력칸이 화면 밖으로 밀린다. dvh 는 줄어든 높이를 따라간다.
     (사무실 콘솔 live/index.html 은 이미 이렇게 하고 있다 — 손님용 위젯만 빠져 있었다) */
  .hk-panel { height: min(72vh, calc(100vh - 150px)); }
  @supports (height: 100dvh) {
    .hk-panel { height: min(72dvh, calc(100dvh - 150px)); }
  }
}

.hk-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  background: var(--ink-hero, #14161B);
  color: var(--paper, #FBFAF7);
  flex: 0 0 auto;
}
.hk-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.hk-head .hk-who { flex: 1 1 auto; min-width: 0; }
.hk-head .hk-who b { display: block; font-size: 14.5px; font-weight: 800; }
.hk-head .hk-who small { display: block; font-size: 11.5px; color: #A6A9B0; }
.hk-head.hk-live .hk-who small { color: #FFC9A8; }
.hk-head button {
  background: none; border: 0; color: #A6A9B0; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 4px 6px; border-radius: 6px;
  min-width: 44px; min-height: 44px;
}
.hk-head button:hover { color: var(--paper, #FBFAF7); background: rgba(255,255,255,.08); }

.hk-log {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 9px;
  background:
    linear-gradient(var(--paper-dim, #F4F3EE), var(--paper-dim, #F4F3EE)) 0 0 / 100% 100%,
    repeating-linear-gradient(transparent 0 27px, rgba(184,180,168,.35) 27px 28px);
}
.hk-msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: keep-all;
}
.hk-msg.hk-bot   { align-self: flex-start; background: var(--paper, #FBFAF7); border: 1px solid var(--line, #DCD9D0); border-bottom-left-radius: 4px; }
.hk-msg.hk-me    { align-self: flex-end;   background: var(--navy, #232F47); color: #fff; border-bottom-right-radius: 4px; }
.hk-msg.hk-staff { align-self: flex-start; background: #FFF3EC; border: 1px solid #F0C8B4; border-bottom-left-radius: 4px; }
.hk-msg.hk-note  { align-self: center; background: transparent; border: 0; color: var(--ink-soft, #4A4D55); font-size: 12.5px; text-align: center; }
.hk-msg .hk-tag  { display: block; font-size: 11px; font-weight: 800; color: var(--stamp-deep, #9E2020); margin-bottom: 3px; }

.hk-typing { display: flex; gap: 4px; align-self: flex-start; padding: 12px 14px; }
.hk-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong, #B8B4A8);
  animation: hk-dot 1.1s ease-in-out infinite;
}
.hk-typing i:nth-child(2) { animation-delay: .16s; }
.hk-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes hk-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* 긴급 카드 */
.hk-urgent {
  align-self: stretch;
  background: var(--stamp, #C22F2E); color: #fff;
  border-radius: 10px; padding: 11px 13px; font-size: 13.5px; line-height: 1.6; font-weight: 600;
}
.hk-urgent a { color: #fff; font-weight: 800; }

/* 퀵리플라이 칩 */
.hk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; flex: 0 0 auto; }
.hk-chips button {
  border: 1px solid var(--line-strong, #B8B4A8);
  background: var(--paper, #FBFAF7);
  color: var(--ink, #1A1C21);
  border-radius: 999px; padding: 7px 13px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.hk-chips button:hover { border-color: var(--stamp, #C22F2E); color: var(--stamp, #C22F2E); }

/* 입력줄 */
.hk-input {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px; border-top: 1px solid var(--line, #DCD9D0);
  background: var(--paper, #FBFAF7); flex: 0 0 auto;
}
.hk-input textarea {
  flex: 1 1 auto; resize: none;
  border: 1px solid var(--line-strong, #B8B4A8); border-radius: 9px;
  padding: 9px 11px; font-size: 16px; line-height: 1.45;   /* 16px 미만이면 iOS가 화면을 확대한다 */
  font-family: inherit; color: var(--ink, #1A1C21);
  background: #fff; max-height: 96px; min-height: 40px;
}
.hk-input textarea:focus { outline: 2px solid var(--stamp, #C22F2E); outline-offset: -1px; border-color: transparent; }
.hk-input button {
  flex: 0 0 auto; border: 0; border-radius: 9px;
  background: var(--stamp, #C22F2E); color: #fff;
  font-size: 14px; font-weight: 800; padding: 11px 15px; cursor: pointer;
  font-family: inherit;
}
.hk-input button:disabled { background: var(--stamp-deep, #9E2020); color: #fff; opacity: .7; cursor: default; }
.hk-shake { animation: hk-shake .34s ease; }
@keyframes hk-shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* 접수 버튼 줄 */
.hk-lead-open {
  flex: 0 0 auto; display: block; width: calc(100% - 20px); margin: 0 10px 10px;
  border: 1px solid var(--stamp, #C22F2E); background: var(--paper, #FBFAF7); color: var(--stamp, #C22F2E);
  border-radius: 9px; padding: 10px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.hk-lead-open:hover { background: var(--stamp, #C22F2E); color: #fff; }

/* ---------- 인챗 접수 폼 ---------- */
.hk-form { padding: 12px; border-top: 1px solid var(--line, #DCD9D0); background: var(--paper-dim, #F4F3EE); flex: 0 0 auto; max-height: 62%; overflow-y: auto; }
.hk-form h4 { font-size: 14.5px; margin: 0 0 3px; font-weight: 800; }
.hk-form p.hk-sub { font-size: 12.5px; color: var(--ink-soft, #4A4D55); margin: 0 0 10px; line-height: 1.55; }
.hk-form label.hk-f { display: block; font-size: 12.5px; font-weight: 700; margin: 0 0 4px; }
.hk-form input[type=text], .hk-form input[type=tel] {
  width: 100%; border: 1px solid var(--line-strong, #B8B4A8); border-radius: 8px;
  padding: 9px 11px; font-size: 16px; font-family: inherit; background: #fff; margin-bottom: 9px;   /* iOS 자동 확대 방지 */
  color: var(--ink, #1A1C21);
}
.hk-form input:focus { outline: 2px solid var(--stamp, #C22F2E); outline-offset: -1px; border-color: transparent; }
.hk-form .hk-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; margin-bottom: 8px; color: var(--ink-soft, #4A4D55); }
.hk-form .hk-check input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--stamp, #C22F2E); }
.hk-form .hk-check a { color: var(--stamp, #C22F2E); }
.hk-form .hk-actions { display: flex; gap: 8px; }
.hk-form .hk-actions button {
  flex: 1 1 auto; border: 0; border-radius: 9px; padding: 11px;
  font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.hk-form .hk-submit { background: var(--stamp, #C22F2E); color: #fff; }
.hk-form .hk-submit:disabled { background: var(--stamp-deep, #9E2020); color: #fff; opacity: .85; }
.hk-form .hk-cancel { background: transparent; color: var(--ink-soft, #4A4D55); border: 1px solid var(--line-strong, #B8B4A8) !important; flex: 0 0 auto; }
.hk-form .hk-msg-out { font-size: 12.5px; margin-top: 8px; line-height: 1.55; }
.hk-form .hk-msg-out.hk-err { color: var(--stamp-deep, #9E2020); font-weight: 700; }
.hk-form .hk-msg-out.hk-ok { color: #1F6B3A; font-weight: 700; }
.hk-privacy { margin: 0; padding: 8px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft, #4A4D55); background: var(--paper-dim, #F4F3EE); border-bottom: 1px solid var(--line, #DCD9D0); }
.hk-privacy a { font-weight: 700; }
.hk-form .hk-hp { display: none; } /* 자동완성이 채우지 못하게 아예 그리지 않는다 */

/* ---------- 접근성: 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hk-avatar, .hk-bubble, .hk-panel { animation: none !important; }
  .hk-typing i { animation: none !important; opacity: .6; }
}

/* 상담 칸이 화면에 있는 동안에는 아바타가 비켜 준다.
   오른쪽 아래 고정이라 입력칸 위에 얹히고, 그 자리를 누르면 대화창이 열려 버린다.
   숨기지 않고 비활성만 하면 투명한 단추가 그대로 남아 같은 일이 생긴다 — display 로 뺀다. */
body.hk-form-near .hk-avatar,
body.hk-form-near .hk-bubble { display: none; }