/* =========================================================
   GIL 실시간 상담창 (모든 공개 페이지 공통 — js/chat.js 와 짝)
   목차
     1. 색 · 크기 (자주 바꾸는 값)
     2. 상담 버튼 (오른쪽 아래)
     3. 상담창 틀
     4. 말풍선
     5. 버튼 선택지
     6. 연락처 입력칸
     7. 입력칸 · 아래 안내
     8. 다른 버튼과 겹치지 않게
     9. 화면 폭별 조정
   ========================================================= */

/* ========== 1. 색 · 크기 (자주 바꾸는 값) ========== */
:root {
  --gc-road: #1f6b4e;        /* 대표 초록 — 버튼 · 담당자 말풍선 */
  --gc-road-soft: #e6f0eb;   /* 연한 초록 — 자동 안내 말풍선 */
  --gc-ink: #161616;         /* 기본 글자색 */
  --gc-ink-2: #55554f;       /* 보조 글자색 */
  --gc-ink-3: #8c8c85;       /* 흐린 글자색 (시간 · 안내) */
  --gc-line: #e2e2dc;        /* 구분선 */
  --gc-paper: #ffffff;       /* 상담창 바탕 */
  --gc-bg: #f6f6f2;          /* 대화 영역 바탕 */
  --gc-ai: #4c5bd4;          /* 'AI 답변' 표시 색 */
  --gc-on: #2fbf71;          /* 담당자 접속 중 표시 점 */
  --gc-hot: #c2410c;         /* 안 읽은 개수 · 오류 글자 */
  --gc-font: "Pretendard Variable", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;   /* 글꼴 */
  --gc-gap: 28px;            /* 화면 오른쪽 · 아래 여백 (맨 위로 버튼과 같은 줄) */
  --gc-w: 380px;             /* 상담창 폭 */
  --gc-h: 600px;             /* 상담창 최대 높이 */
}

/* ========== 2. 상담 버튼 (오른쪽 아래) ========== */
.gc-btn {
  position: fixed;
  right: var(--gc-gap);
  bottom: var(--gc-gap);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 99px;
  background: var(--gc-road);
  color: #fff;
  font: 600 15px/1 var(--gc-font);
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(31, 107, 78, .6);
  transition: transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}

.gc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(31, 107, 78, .7);
}

.gc-btn:focus-visible {
  outline: 2px solid var(--gc-road);
  outline-offset: 4px;
}

.gc-ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* 담당자 접속 중일 때 버튼 오른쪽 위 초록 점 */
.gc-dot {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gc-on);
  box-shadow: 0 0 0 2px var(--gc-road);
  display: none;
}

.gc-btn.online .gc-dot {
  display: block;
}

/* 상담창이 닫혀 있을 때 새 답장 개수 */
.gc-badge {
  position: absolute;
  top: -6px;
  left: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--gc-hot);
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
}

.gc-badge[hidden] {
  display: none;
}

/* 상담창이 열리면 버튼은 숨김 (창 안의 X로 닫음) */
.gc-open .gc-btn {
  opacity: 0;
  pointer-events: none;
}

/* ========== 3. 상담창 틀 ========== */
.gc-panel {
  position: fixed;
  right: var(--gc-gap);
  bottom: var(--gc-gap);
  z-index: 100;
  width: var(--gc-w);
  height: min(var(--gc-h), calc(100vh - 2 * var(--gc-gap)));
  display: flex;
  flex-direction: column;
  background: var(--gc-paper);
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(22, 22, 22, .35), 0 0 0 1px rgba(22, 22, 22, .06);
  overflow: hidden;
  font: 400 14px/1.55 var(--gc-font);
  color: var(--gc-ink);
}

.gc-panel[hidden] {
  display: none;
}

.gc-panel * {
  box-sizing: border-box;
}

/* 맨 위 제목 줄 */
.gc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  background: var(--gc-road);
  color: #fff;
}

.gc-title {
  display: block;
  font-size: 16px;
}

/* 제목 아래 '지금 담당자와 바로 상담할 수 있습니다' 같은 안내 */
.gc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: .85;
}

.gc-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
}

.gc-panel.online .gc-status::before {
  background: var(--gc-on);
}

.gc-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.gc-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.gc-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ========== 4. 말풍선 ========== */
.gc-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--gc-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}

.gc-m {
  max-width: 85%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 방문자가 쓴 글은 오른쪽 */
.gc-m.visitor {
  align-self: flex-end;
  align-items: flex-end;
}

.gc-m.system {
  align-self: center;
  max-width: 95%;
}

.gc-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--gc-paper);
  border: 1px solid var(--gc-line);
  white-space: pre-wrap;
  word-break: break-word;
}

.gc-m.bot .gc-bubble {
  background: var(--gc-road-soft);
  border-color: var(--gc-road-soft);
}

.gc-m.visitor .gc-bubble {
  background: var(--gc-road);
  border-color: var(--gc-road);
  color: #fff;
}

.gc-m.ai .gc-bubble {
  background: #eef0fc;
  border-color: #dde1f8;
}

.gc-m.system .gc-bubble {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--gc-ink-3);
  font-size: 12px;
  text-align: center;
}

/* 말풍선 위 작은 이름표 (담당자 · 자동 안내 · AI 답변) */
.gc-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--gc-ink-2);
}

.gc-tag.ai {
  color: var(--gc-ai);
}

.gc-tag.op {
  color: var(--gc-road);
}

.gc-time {
  font-size: 11px;
  color: var(--gc-ink-3);
}

.gc-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--gc-road);
  font-weight: 600;
}

/* ========== 5. 버튼 선택지 ========== */
.gc-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gc-choices button {
  padding: 8px 14px;
  border: 1px solid var(--gc-road);
  border-radius: 99px;
  background: var(--gc-paper);
  color: var(--gc-road);
  font: 600 13px/1.2 var(--gc-font);
  cursor: pointer;
}

.gc-choices button:hover {
  background: var(--gc-road-soft);
}

.gc-choices button:disabled {
  opacity: .5;
  cursor: default;
}

/* ========== 6. 연락처 입력칸 ========== */
.gc-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--gc-line);
  border-radius: 14px;
  background: var(--gc-paper);
}

.gc-contact input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gc-line);
  border-radius: 10px;
  font: 400 14px/1.3 var(--gc-font);
  color: var(--gc-ink);
}

.gc-consent p {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--gc-ink-2);
}

.gc-consent label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.gc-consent input {
  accent-color: var(--gc-road);
  width: 16px;
  height: 16px;
  margin: 0;
}

.gc-err {
  margin: 0;
  min-height: 1em;
  font-size: 12px;
  color: var(--gc-hot);
}

.gc-err:empty {
  display: none;
}

.gc-contact button,
.gc-restart {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--gc-road);
  color: #fff;
  font: 600 14px/1.2 var(--gc-font);
  cursor: pointer;
}

.gc-contact button:disabled {
  opacity: .6;
}

.gc-restart {
  margin: 12px 16px 0;
}

.gc-restart[hidden],
.gc-form[hidden] {
  display: none;
}

/* 입력칸 위 바로가기 (요금 보기 · 의뢰서 쓰기 · 카카오톡으로 상담) */
.gc-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 0 16px;
  border-top: 1px solid var(--gc-line);
  background: var(--gc-paper);
}

.gc-q {
  padding: 6px 12px;
  border: 1px solid var(--gc-line);
  border-radius: 99px;
  background: var(--gc-paper);
  color: var(--gc-ink-2);
  font: 600 12.5px/1.2 var(--gc-font);
  text-decoration: none;
}

.gc-q:hover {
  border-color: var(--gc-road);
  color: var(--gc-road);
}

.gc-q.main {
  border-color: var(--gc-road);
  background: var(--gc-road);
  color: #fff;
}

.gc-q.main:hover {
  color: #fff;
  opacity: .9;
}

.gc-q.kakao {
  border-color: #fee500;
  background: #fee500;
  color: #191919;
}

.gc-q:focus-visible {
  outline: 2px solid var(--gc-road);
  outline-offset: 2px;
}

/* ========== 7. 입력칸 · 아래 안내 ========== */
.gc-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  background: var(--gc-paper);
}

.gc-input {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 10px 0;
  border: 0;
  background: none;
  font: 400 15px/1.45 var(--gc-font);
  color: var(--gc-ink);
  outline: none;
}

.gc-send {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--gc-road);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.gc-send svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.gc-send:focus-visible,
.gc-choices button:focus-visible,
.gc-contact button:focus-visible {
  outline: 2px solid var(--gc-road);
  outline-offset: 2px;
}

/* 맨 아래 '대화 내용은 상담에만 쓰고…' 한 줄 */
.gc-foot {
  margin: 0;
  padding: 4px 16px 12px;
  background: var(--gc-paper);
  font-size: 11px;
  color: var(--gc-ink-3);
}

.gc-foot a {
  color: var(--gc-ink-2);
}

/* ========== 8. 다른 버튼과 겹치지 않게 ========== */
/* 상담 버튼이 있으면 '맨 위로' 버튼을 그 위로 올림 */
.gc-on .gt-btn {
  bottom: calc(var(--gc-gap) + 72px);
}

/* 관리자 수정 모드 · 인쇄할 때는 상담 버튼 숨김 */
html.ae-on .gc-btn,
html.ae-on .gc-panel {
  display: none;
}

@media print {
  .gc-btn,
  .gc-panel {
    display: none;
  }
}

/* ========== 9. 화면 폭별 조정 ========== */
/* 화면 폭 640px 이하 = 휴대폰: 버튼은 동그랗게, 상담창은 화면 전체 */
@media (max-width: 640px) {
  :root {
    --gc-gap: 16px;
  }

  .gc-btn {
    width: 56px;
    padding: 0;
    justify-content: center;
  }

  .gc-btn-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .gc-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .gc-on .gt-btn {
    bottom: calc(var(--gc-gap) + 68px);
  }

  /* 상담창을 연 동안 뒤 화면이 같이 움직이지 않게 */
  html.gc-open,
  html.gc-open body {
    overflow: hidden;
  }
}

/* 움직임 줄이기를 켠 사용자에게는 버튼 움직임 없음 */
@media (prefers-reduced-motion: reduce) {
  .gc-btn {
    transition: none;
  }
}