/* 플로팅 문의 메신저 위젯 — 디자인 톤은 handoff 와 동일 팔레트/트랜지션 사용
   (#08080A / #0D0D10 / #EDEAE4 / #9B99A3 / rgba(255,255,255,.14), cubic-bezier(.16,1,.3,1)) */

/* ── 플로팅 버튼 ── */
#cw-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #EDEAE4;
  color: #08080A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 26px rgba(237,234,228,0.10);
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease;
}
#cw-fab:hover { background: #FFFFFF; transform: translateY(-3px) scale(1.03); }

/* ── 패널 (데스크톱: 우하단 앵커 카드) ── */
#cw-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 71;
  width: 380px;
  max-width: calc(100vw - 48px);
  max-height: min(680px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  background: #0D0D10;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  pointer-events: none;
  transition: opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
html.cw-open #cw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.cw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cw-title { margin: 0; font-size: 17px; font-weight: 600; color: #EDEAE4; }
.cw-sub { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: #5F5E67; }
#cw-close {
  flex: none;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #5F5E67;
  transition: color .25s ease;
}
#cw-close:hover { color: #EDEAE4; }

.cw-body { padding: 20px 22px 22px; overflow-y: auto; }

/* ── 입력 필드 (Contact 페이지 언더라인 입력과 동일 값) ── */
.cw-field { display: flex; flex-direction: column; gap: 0; }
.cw-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding: 13px 2px;
  font-size: 15px;
  color: #EDEAE4;
  outline: none;
}
.cw-input:focus { border-bottom-color: #EDEAE4; }

.cw-label { margin: 22px 0 10px; font-size: 13px; color: #5F5E67; }

.cw-types { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-type-chip {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: #9B99A3;
  transition: border-color .25s ease, color .25s ease;
}
.cw-type-chip[data-selected] { border-color: #EDEAE4; background: #EDEAE4; color: #08080A; }

.cw-textarea {
  margin-top: 4px;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 13px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #EDEAE4;
  outline: none;
  resize: vertical;
  min-height: 110px;
}
.cw-textarea:focus { border-color: #EDEAE4; }

/* Turnstile 슬롯 (M3에서 위젯 렌더) */
.cw-turnstile { margin-top: 16px; min-height: 0; }
.cw-turnstile:not(:empty) { min-height: 65px; }

.cw-error { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #E5766B; }
.cw-error:empty { display: none; }

.cw-submit {
  margin-top: 16px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: #EDEAE4;
  color: #08080A;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, opacity .3s ease;
}
.cw-submit:hover { background: #FFFFFF; }
.cw-submit:disabled { opacity: .55; cursor: default; }

/* ── 전송 중 스피너 ── */
.cw-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(8,8,10,0.25);
  border-top-color: #08080A;
  border-radius: 50%;
  animation: cwSpin .7s linear infinite;
}
@keyframes cwSpin { to { transform: rotate(360deg); } }

/* ── 성공 뷰 ── */
.cw-success { text-align: center; padding: 36px 8px 20px; }
.cw-success svg { color: #EDEAE4; }
.cw-success-title { margin: 18px 0 0; font-size: 17px; font-weight: 600; color: #EDEAE4; }
.cw-success-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #9B99A3; }
.cw-success-close {
  margin-top: 26px;
  padding: 12px 28px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: transparent;
  color: #EDEAE4;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .25s ease;
}
.cw-success-close:hover { border-color: #EDEAE4; }

/* ── 모바일: 전체화면에 가까운 시트 ── */
@media (max-width: 640px) {
  #cw-panel {
    right: 0;
    left: 0;
    bottom: 0;
    top: 48px;
    width: auto;
    max-width: none;
    max-height: none;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(24px);
  }
  html.cw-open #cw-panel { transform: translateY(0); }
  /* 시트가 열려 있는 동안 배경 스크롤 잠금 */
  html.cw-open body { overflow: hidden; }
}