/* 상담 챗봇 "지오" 위젯 (홈메이드 위젯 재사용, 이름만 오에스용) */
/* =========================================================
   상담 챗봇 (규칙형)
   모바일에는 하단 고정 CTA 바가 있어 그 위로 띄운다.
   ========================================================= */

.hmc { position: fixed; z-index: 70; }
.hmc__launch {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px 9px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  text-align: left;
  box-shadow: 0 12px 30px rgb(18 42 84 / 0.34);
  transition: background .18s ease, transform .18s ease;
}
.hmc__launch:hover { background: var(--navy-deep); transform: translateY(-2px); }
.hmc__launch-txt b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hmc__launch-txt i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: rgb(255 255 255 / 0.62);
  margin-top: 1px;
}
.hmc.is-open .hmc__launch { display: none; }
/* 상담사 아바타 + 접속 표시 */
.hmc__ava {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  flex: none;
  display: block;
}
.hmc__ava--lg { width: 42px; height: 42px; }
.hmc__ava svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.hmc__dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--navy);
}
.hmc__ava--lg .hmc__dot { width: 13px; height: 13px; }
.hmc__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgb(34 197 94 / 0.5);
  animation: hmcPulse 2s infinite ease-out;
}
.hmc__panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgb(10 23 48 / 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* .hmc__panel 의 display:flex 가 브라우저 기본 [hidden]{display:none}
을 이겨서
   닫아도 계속 보이던 문제. 명시적으로 다시 눌러준다. */
.hmc__panel[hidden] { display: none; }
.hmc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--navy);
  color: #fff;
  flex: none;
}
.hmc__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hmc__id b { display: block; font-size: 15px; letter-spacing: -0.02em; }
.hmc__id b span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy-deep);
  background: var(--gold);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 5px;
  vertical-align: 2px;
}
.hmc__id i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: rgb(255 255 255 / 0.6);
}
.hmc__close {
  border: 0;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  flex: none;
}
.hmc__close:hover { background: rgb(255 255 255 / 0.22); }
.hmc__log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overscroll-behavior: contain;
}
.hmc__msg { display: flex; }
.hmc__msg--bot { justify-content: flex-start; }
.hmc__msg--me { justify-content: flex-end; }
.hmc__bub {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.65;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.hmc__bub b { color: var(--navy); font-weight: 700; }
.hmc__msg--me .hmc__bub {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.hmc__cta {
  display: inline-block;
  margin: 9px 6px 0 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 13px;
  font-weight: 700;
}
.hmc__cta--ghost { background: var(--panel-2); color: var(--navy); }
.hmc__typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.hmc__typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray-light);
  animation: hmcDot 1s infinite ease-in-out;
}
.hmc__typing i:nth-child(2) { animation-delay: .15s; }
.hmc__typing i:nth-child(3) { animation-delay: .3s; }
.hmc__quick {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  max-height: 132px;
  overflow-y: auto;
}
.hmc__chip {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease;
  text-align: left;
}
.hmc__chip:hover { background: var(--panel-2); border-color: var(--blue); }
.hmc__form {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 12px 14px 6px;
  background: var(--white);
}
.hmc__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.hmc__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(61 111 196 / 0.15); }
.hmc__send {
  flex: none;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
}
.hmc__send svg { width: 19px; height: 19px; }
.hmc__send:hover { background: var(--navy-deep); }
.hmc__foot {
  flex: none;
  padding: 0 14px 12px;
  background: var(--white);
  font-size: 11.5px;
  color: var(--gray-light);
  text-align: center;
}
.hmc__foot a { color: var(--blue); font-weight: 700; }
@media (max-width: 860px) {
  /* 하단 고정 CTA 바(약 74px) 위로 올린다. */
  .hmc__launch { right: 14px; bottom: 84px; padding: 12px 16px 12px 14px; font-size: 13.5px; }
  .hmc__launch { transition: background .18s ease, transform .22s ease, opacity .22s ease; }
  .hmc--wait .hmc__launch { opacity: 0; transform: translateY(14px); pointer-events: none; }
  .hmc__panel {
    right: 10px; left: 10px;
    bottom: 82px;
    width: auto;
    max-width: none;
    height: min(74vh, 540px);
  }
}
@media (max-width: 400px) {
  /* 간판 문구는 좁아도 남긴다 — 이게 없으면 무슨 버튼인지 모른다. */
  .hmc__launch { padding: 7px 16px 7px 7px; gap: 9px; }
  .hmc__launch-txt b { font-size: 13px; }
  .hmc__launch-txt i { display: none; }
  .hmc__ava--lg { width: 38px; height: 38px; }
  .hmc__id b span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hmc__typing i { animation: none; }
  .hmc__dot::after { animation: none; }
  .hmc__launch:hover { transform: none; }
}

/* 2026-09-19 사이트 전역 header{position:fixed} 가 챗봇 머리까지 화면 맨 위로 끌어내던 것 */
.hmc__head { position: relative; top: auto; left: auto; right: auto; z-index: auto; transition: none; }
/* 주제 버튼 */
/* (옆으로 밀기는 불편하다는 의견 → 다시 여러 줄, 대신 높이를 줄이고 위아래로 넘김) */
.hmc__quick { flex-wrap: wrap; overflow-y: auto; overflow-x: hidden; max-height: 104px; padding-bottom: 10px; }
.hmc__chip { flex: none; white-space: normal; text-align: left; line-height: 1.35; padding: 6px 11px; font-size: 12.5px; }
/* 챗봇 창이 열려 있으면 맨 위로 버튼 숨김 (창 위에 겹침) */
body.hmc-open #backToTop { opacity: 0 !important; pointer-events: none !important; }
/* 챗봇 창은 <section> 이라 사이트의 section{padding:110px 0} 을 받아 위아래가 비던 것 */
.hmc__panel { padding: 0; }