/* 고객지원 채팅 위젯(docs/SUPPORT_CHAT_DESIGN.md 4절 · 8절). 색·그림자·모서리는 admin.css 토큰을 쓴다.
   소개 화면(public.css)에는 그 토큰이 없어 .sp-visitor 가 같은 이름으로 채운다(주색은 --point 남색) — 아래 규칙은 두 화면 공용.
   z-index: 저장 바(30) 위, 모바일 사이드바 서랍(55·60) 아래. */
.sp {
  position: fixed; right: 24px; bottom: 24px; z-index: 45; font-family: inherit;
  --sp-glow: 59, 70, 176;                                                       /* 버튼 그림자에 번지는 주색(r, g, b) */
  --sp-rim: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px rgba(255, 255, 255, .92);   /* 안쪽 얇은 밝은 테 + 바깥 흰 테 */
}

/* 소개 화면(public/_layout.html): admin.css 변수를 public.css 토큰으로 채운다. 주색은 --point(남색, 신청 · 약관 화면).
   소개 · 요금 계열 화면은 public-landing.css 가 인디고(--lp-point, 로고 · 머리글 버튼 색)를 주색으로 쓰므로 그 변수가 있으면 그것을 쓴다.
   글자 크기 · 행간은 본문(16.5px · 1.75)을 물려받지 않게 */
.sp-visitor {
  --sp-glow: 28, 52, 110;                                                        /* 남색 · 인디고 어느 쪽에도 어울리는 짙은 청색 */
  --brand: var(--lp-point, #2E3BB0); --brand-dark: var(--lp-point-dark, #242F91);           /* 신청 · 약관 화면도 소개 화면과 같은 인디고 */
  --brand-softer: var(--lp-point-soft, var(--point-soft));
  --surface: #fff; --bg: var(--tint); --line: var(--line-2); --line-soft: var(--line-2);
  --faint: #8b94a1; --ok: #17824a; --off: var(--muted); --off-bg: var(--tint);
  --r-lg: 16px; --r-sm: 9px;
  --sh-1: 0 1px 2px rgba(31, 41, 55, .05); --sh-3: 0 12px 32px rgba(31, 41, 55, .12);
  --focus: 0 0 0 3px rgba(28, 52, 110, .2);
  font-size: 14px; line-height: 1.5; color: var(--ink); text-align: left;
}

/* ── 버튼: 헤드셋 아이콘. 관리자 화면은 원형 → 올리면 왼쪽으로 "고객지원", 소개 화면은 아이콘 + "문의하기" 알약 ── */
.sp-fab {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 56px; min-width: 56px; padding: 0; border: 0; border-radius: 28px; cursor: pointer;
  font: inherit; background: var(--brand); color: #fff; -webkit-tap-highlight-color: transparent;
  /* 테(--sp-rim) + 바닥에 닿는 짧은 그림자 + 주색이 번지는 그림자 하나 */
  box-shadow: var(--sp-rim), 0 2px 5px rgba(23, 26, 43, .16), 0 10px 24px rgba(var(--sp-glow), .24);
  transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
}
.sp-admin .sp-fab { flex-direction: row-reverse; }      /* 아이콘은 오른쪽에 그대로, 글자가 왼쪽으로 펼쳐진다 */
.sp-fab:hover {
  background: var(--brand-dark); transform: translateY(-2px);
  box-shadow: var(--sp-rim), 0 3px 6px rgba(23, 26, 43, .16), 0 14px 30px rgba(var(--sp-glow), .3);
}
.sp-fab:active { transform: translateY(0); box-shadow: var(--sp-rim), 0 1px 3px rgba(23, 26, 43, .18), 0 5px 12px rgba(var(--sp-glow), .22); }
.sp-fab:focus-visible { outline: none; box-shadow: var(--sp-rim), 0 0 0 5px rgba(var(--sp-glow), .42), 0 10px 24px rgba(var(--sp-glow), .24); }
.sp.is-open .sp-fab { background: var(--brand-dark); }

.sp-fab-ico { position: relative; flex: none; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }
.sp-fab-ico svg { display: block; transition: opacity .16s ease, transform .22s ease; }
.sp-ico-close { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; opacity: 0; transform: rotate(-45deg) scale(.6); }
.sp.is-open .sp-fab-ico .sp-headset { opacity: 0; transform: rotate(45deg) scale(.6); }      /* 열리면 헤드셋 → 닫기(×) */
.sp.is-open .sp-ico-close { opacity: 1; transform: none; }

/* 버튼 글자 — 평소 접혀 있다(폭 0). 접근성 이름은 버튼의 aria-label 하나(이 글자는 aria-hidden) */
.sp-fab-text {
  display: block; box-sizing: border-box; max-width: 0; padding: 0; margin: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 56px;
  transition: max-width .26s cubic-bezier(.2, .7, .2, 1), padding .26s cubic-bezier(.2, .7, .2, 1),
              margin .26s cubic-bezier(.2, .7, .2, 1), opacity .16s ease;
}
@media (min-width: 641px) {
  .sp-visitor:not(.is-open) .sp-fab-text { max-width: 112px; padding-right: 22px; margin-left: -8px; opacity: 1; font-size: 15px; }
  .sp-admin:not(.is-open) .sp-fab:focus-visible .sp-fab-text { max-width: 96px; padding-left: 20px; margin-right: -8px; opacity: 1; }
}
@media (hover: hover) and (min-width: 641px) {            /* 터치 화면에서는 눌린 뒤 hover 가 남아 펼쳐진 채로 있지 않게 */
  .sp-admin:not(.is-open) .sp-fab:hover .sp-fab-text { max-width: 96px; padding-left: 20px; margin-right: -8px; opacity: 1; }
}

.sp-badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.sp-badge[hidden] { display: none; }

/* 닫혀 있는데 새 답이 오면 버튼이 두 번 커졌다 작아진다(support.js pop) — 배지도 같이 뛴다 */
@keyframes sp-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.22); }
  55% { transform: scale(.94); }
  75% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.sp-fab.is-pop { animation: sp-pop .7s cubic-bezier(.2, .8, .2, 1) 2; }
@media (prefers-reduced-motion: reduce) {
  .sp-fab.is-pop { animation: none; }
  .sp-fab, .sp-fab-ico svg, .sp-fab-text, .sp-send { transition: none; }
  .sp-fab:hover { transform: none; }
}

.sp-panel {
  position: absolute; right: 0; bottom: 68px; width: 360px; height: 520px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.sp-panel[hidden] { display: none; }

.sp-head { display: flex; align-items: center; gap: 10px; padding: 13px 12px 12px 16px; border-bottom: 1px solid var(--line); background: var(--brand-softer); }
/* 머리의 작은 헤드셋 표식 — 버튼과 한 벌 */
.sp-mark {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.sp-mark svg { display: block; }
.sp-head-text { flex: 1; min-width: 0; }
.sp-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); letter-spacing: -.01em; }
.sp-sub { margin: 1px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sp-sound .sp-snd-off { display: none; }
.sp-sound[aria-pressed="false"] .sp-snd-on { display: none; }
.sp-sound[aria-pressed="false"] .sp-snd-off { display: block; }
.sp-x {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-x + .sp-x { margin-left: -6px; }
.sp-x:hover { background: var(--line-soft); color: var(--ink); }
.sp-x:focus-visible { outline: none; box-shadow: var(--focus); }

.sp-list { flex: 1; overflow-y: auto; padding: 16px 14px 8px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.sp-intro { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px dashed var(--line);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.sp-msg { display: flex; flex-direction: column; max-width: 82%; }
.sp-msg.me { align-self: flex-end; align-items: flex-end; }
.sp-msg.them { align-self: flex-start; align-items: flex-start; }
.sp-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.sp-msg.me .sp-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.sp-msg.them .sp-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: var(--sh-1); }
.sp-who { font-size: 11.5px; color: var(--muted); margin: 0 2px 3px; }
.sp-at { font-size: 11px; color: var(--faint); margin: 3px 2px 0; }
.sp-closed { margin: 0; padding: 8px 14px; font-size: 12px; color: var(--off); background: var(--off-bg); border-top: 1px solid var(--line); }
.sp-closed[hidden] { display: none; }

.sp-form { border-top: 1px solid var(--line); padding: 10px 12px 12px; background: var(--surface); }
.sp-input {
  display: block; width: 100%; box-sizing: border-box; resize: none; min-height: 44px; max-height: 140px; padding: 9px 11px;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.sp-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
/* 방문자 모드: 첫 문의 때만 보이는 이메일 칸 + 안내 */
.sp-email { margin-bottom: 8px; }
.sp-email[hidden] { display: none; }
.sp-field {
  display: block; width: 100%; box-sizing: border-box; height: 38px; padding: 0 11px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.sp-field:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.sp-note { margin: 5px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.sp-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sp-note a:hover { color: var(--brand); }
.sp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* 봇 함정 — 사람에게는 안 보인다 */
.sp-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sp-status { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.sp-status.is-bad { color: var(--bad); }
.sp-status.is-ok { color: var(--ok); }
/* 보내기 — admin.css 의 .btn 을 쓰지 않는다(소개 화면에는 없다). 모양은 .btn-primary.btn-sm 과 같게 */
.sp-send {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px;
  border: 1px solid var(--brand); border-radius: 8px; background: var(--brand); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--sp-glow), .25);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.sp-send:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.sp-send:focus-visible { outline: none; box-shadow: var(--focus); }
.sp-send:disabled { opacity: .6; cursor: default; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 긴 설정 폼의 저장 바가 버튼 뒤에 가리지 않게(저장 바의 버튼은 왼쪽부터 놓인다 — 올려서 펼친 글자는 그 위를 덮지 않는다) */
body:has(.sp) .save-bar { padding-right: 84px; }

@media (max-width: 640px) {
  .sp { right: 16px; bottom: 16px; }
  .sp-fab { height: 52px; min-width: 52px; border-radius: 26px; }     /* 폰에서는 두 화면 모두 아이콘만 있는 원형 */
  .sp-fab-ico { width: 52px; height: 52px; }
  .sp.is-open .sp-fab { display: none; }
  .sp-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: min(560px, 88vh); height: min(560px, 88dvh);
    max-height: none; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
  }
  .sp-input, .sp-field { font-size: 16px; }   /* iOS 확대 방지 */
}

/* 운영자 [고객 문의] 목록 · 스레드 화면(ops_support*.html) — 말풍선은 위젯과 같은 모양 */
.spo-table tr.spo-unread td { background: var(--brand-softer); }
.spo-table tr.spo-unread .ev-name { color: var(--brand); }
.spo-last a { color: var(--ink-2); }
.spo-last a:hover { color: var(--brand); }
.spo-last .pill { margin-left: 6px; }
.spo-dir { display: inline-block; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--line-soft); border-radius: 5px; padding: 1px 6px; }
.spo-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; background: var(--bg); border-top: 1px solid var(--line); max-height: 60vh; overflow-y: auto; }
.spo-list .sp-msg { max-width: 72%; }
.spo-fail { color: var(--bad); font-weight: 600; }

@media print { .sp { display: none; } }