.site-float{
  position:fixed;right:24px;bottom:24px;z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}

/* ===== 그룹 (SNS · 상담 공용) ===== */
.site-float__group{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.site-float__list{
  position:absolute;right:100%;bottom:0;
  margin-right:12px;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;

  opacity:0;visibility:hidden;
  transform:translateX(12px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.site-float__group.is-open .site-float__list{
  opacity:1;visibility:visible;transform:none;
}

/* ===== 항목 ===== */
.site-float__item{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  min-width:170px;
  padding:8px 8px 8px 18px;
  border-radius:100px;
  background:var(--c-bg);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  text-decoration:none;
  transition:var(--tr);
}
.site-float__item:hover{transform:translateX(-3px);box-shadow:0 6px 22px rgba(0,0,0,.2)}

.site-float__label{
  font-size:var(--fs-sm);font-weight:var(--fw-head);
  color:var(--c-text);white-space:nowrap;
}

.site-float__icon{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
}
.site-float__icon svg{width:19px;height:19px}

/* 상담 채널 */
.site-float__item--inquiry .site-float__icon{background:var(--c-primary);color:#fff}
.site-float__item--kakao   .site-float__icon{background:#fee500;color:#3c1e1e}
.site-float__item--naver   .site-float__icon{background:#03c75a;color:#fff}

/* SNS */
.site-float__item--blog      .site-float__icon{background:#03c75a;color:#fff}
.site-float__item--cafe      .site-float__icon{background:#03c75a;color:#fff}
.site-float__item--instagram .site-float__icon{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff}
.site-float__item--youtube   .site-float__icon{background:#ff0000;color:#fff}
.site-float__item--facebook  .site-float__icon{background:#1877f2;color:#fff}

/* ===== 토글 버튼 ===== */
.site-float__toggle{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  width:60px;height:60px;padding:0;
  border:0;border-radius:50%;
  background:var(--c-primary);color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  cursor:pointer;transition:var(--tr);
}
.site-float__toggle:hover{background:var(--c-primary-d)}

.site-float__toggle--sns{background:var(--c-text)}
.site-float__toggle--sns:hover{background:#000}

.site-float__toggle-ico svg{width:22px;height:22px}
.site-float__toggle-text{font-size:11px;font-weight:var(--fw-head);line-height:1}

/* 열렸을 때 X 로 전환 */
.site-float__toggle-close{
  position:absolute;inset:0;
  opacity:0;transition:opacity var(--tr);
}
.site-float__toggle-close::before,
.site-float__toggle-close::after{
  content:'';position:absolute;top:50%;left:50%;
  width:20px;height:2px;background:#fff;
}
.site-float__toggle-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.site-float__toggle-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

.site-float__group.is-open .site-float__toggle-ico,
.site-float__group.is-open .site-float__toggle-text{opacity:0}
.site-float__group.is-open .site-float__toggle-close{opacity:1}

/* ===== 전화 (모바일 전용, 독립 버튼) ===== */
.site-float__call{
  display:none;
  align-items:center;justify-content:center;
  width:60px;height:60px;
  border-radius:50%;
  background:var(--c-point);color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  text-decoration:none;
  transition:var(--tr);
}
.site-float__call:hover{filter:brightness(.9)}
.site-float__call svg{width:24px;height:24px}

/* ===== 등록 신청 (/apply) ===== */
.site-float__apply{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  width:60px;height:60px;
  border:1px solid var(--c-line);border-radius:50%;
  background:var(--c-bg);color:var(--c-primary);
  box-shadow:0 4px 14px rgba(0,0,0,.1);
  text-decoration:none;transition:var(--tr);
}
.site-float__apply:hover{border-color:var(--c-primary);background:var(--c-primary);color:#fff}
/* ===== 빠른 추천 — 알약 · 그라데이션 · 글자 상시 노출 (다른 동그라미와 구분) ===== */
.site-float__quick{
  position:relative;
  display:flex;align-items:center;gap:7px;
  height:56px;padding:0 20px 0 17px;
  border:0;border-radius:28px;
  background:linear-gradient(135deg,#6c3be4 0%,var(--c-primary) 100%);
  color:#fff;font:inherit;cursor:pointer;
  box-shadow:0 8px 22px rgba(108,59,228,.35);
  overflow:visible;transition:transform .2s,box-shadow .2s;
}
/* ⚠️ hover 에 transform 을 쓰지 않는다 — 쌓임 맥락이 생겨 z-index:-1 인 펼침 문구가 알약 위로 올라와 버튼을 덮었다 */
.site-float__quick:hover{box-shadow:0 12px 28px rgba(108,59,228,.5)}
.site-float__quick svg{flex:none;width:21px;height:21px}
.site-float__quick em{font-style:normal;font-size:15px;font-weight:var(--fw-head);white-space:nowrap}
/* 몇 초에 한 번 빛이 스친다 — ⚠️ 알약 안쪽만 (span 이 아닌 ::after, 둥근 모서리 밖으로 안 나가게 mask) */
.site-float__quick::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%) no-repeat;
  background-size:250% 100%;background-position:150% 0;
  animation:quickShine 6s ease-in-out 2s infinite;
}
@keyframes quickShine{0%,75%{background-position:150% 0}100%{background-position:-60% 0}}
/* 펼침 문구 — 알약 높이에 맞춘다 */
.site-float__quick .site-float__apply-tip{height:56px;top:0;right:0;border-radius:28px;padding-right:150px;background:#2a1f55}
.site-float__quick:hover .site-float__apply-tip,
.site-float__quick:focus-visible .site-float__apply-tip,
.site-float__quick.is-hint .site-float__apply-tip{clip-path:inset(0 0 0 0 round 28px)}

/* 등록 신청 — 상담·SNS 와 같은 크기, 짙은 남보라로 구분 (흰 버튼은 배경에 묻혔다) */
.site-float__apply{border-color:#2a1f55;background:#2a1f55;color:#fff}
.site-float__apply:hover{border-color:#3d2d78;background:#3d2d78;color:#fff}
.site-float__apply .site-float__apply-tip{background:#2a1f55}
.site-float__apply svg{width:20px;height:20px}
.site-float__apply em{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:9px;font-style:normal;font-weight:var(--fw-head);line-height:1.1;
  letter-spacing:-.02em;white-space:nowrap;
}

/* 마우스를 올리면 동그라미 뒤에서 왼쪽으로 알약이 펼쳐진다
   ⚠️ z-index:-1 로 동그라미 배경 뒤에 깐다 — 펼쳐진 오른쪽 끝이 동그라미와 한 덩어리로 보이게 */
.site-float__apply-tip{
  position:absolute;right:-1px;top:-1px;z-index:-1;
  display:flex;align-items:center;
  height:60px;padding:0 74px 0 22px;
  border-radius:30px;
  background:var(--c-primary);color:#fff;
  font-size:var(--fs-sm, 14px);font-weight:var(--fw-head);white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
  clip-path:inset(0 0 0 100% round 30px);
  transition:clip-path .38s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.site-float__apply:hover .site-float__apply-tip,
.site-float__apply:focus-visible .site-float__apply-tip{clip-path:inset(0 0 0 0 round 30px)}

/* 터치 기기는 hover 가 없다 — 눌렀다 떼면 펼침이 남아 버리므로 아예 숨긴다 */
@media (hover:none){
  .site-float__apply-tip{display:none}
  /* 첫 방문 자동 안내는 휴대폰에서도 보여 준다 (누르는 것과 상관없이 시간이 지나면 접힌다) */
  .site-float__quick.is-hint .site-float__apply-tip{display:flex}
}

/* ===== TOP ===== */
.site-float__top{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  width:60px;height:60px;padding:0;
  border:1px solid var(--c-line);border-radius:50%;
  background:var(--c-bg);color:var(--c-text-sub);
  box-shadow:0 4px 14px rgba(0,0,0,.1);
  cursor:pointer;transition:var(--tr);

  opacity:0;visibility:hidden;transform:translateY(10px);
}
.site-float.is-scrolled .site-float__top{
  opacity:1;visibility:visible;transform:none;
}
.site-float__top:hover{border-color:var(--c-primary);color:var(--c-primary)}

.site-float__top span{
  width:8px;height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(-45deg);
}
.site-float__top em{font-size:9px;font-style:normal;font-weight:var(--fw-head);line-height:1}


/* ============================================================
   B — 일체형 카드
   ⚠️ 숨은 .site-float__call 이 첫 자식이다.
      :first-child · > * + * 를 쓰면 안 된다
   ============================================================ */
.float-b .site-float{
  align-items:stretch;gap:0;
  width:76px;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.13);
}

/* 구분선 — 숨은 요소는 선을 안 그린다 */
.float-b .site-float > *:not(:last-child){border-bottom:1px solid var(--c-line)}

.float-b .site-float__group{align-items:stretch}

.float-b .site-float__toggle,
.float-b .site-float__top,
.float-b .site-float__apply,
.float-b .site-float__call{
  width:100%;height:66px;
  border:0;border-radius:0;
  background:none;box-shadow:none;
}

.float-b .site-float__toggle--sns{color:var(--c-text)}
.float-b .site-float__toggle--sns:hover{background:rgba(0,0,0,.04);color:var(--c-primary)}

.float-b .site-float__toggle--chat{background:var(--c-primary);color:#fff}
.float-b .site-float__toggle--chat:hover{background:var(--c-primary-d)}

.float-b .site-float__call{color:var(--c-point)}
.float-b .site-float__call:hover{background:rgba(0,0,0,.04);filter:none}

.float-b .site-float__top{color:var(--c-text-sub)}
.float-b .site-float__top:hover{background:rgba(0,0,0,.04);color:var(--c-primary)}

/* 카드형은 TOP 이 숨으면 아래 칸이 비므로 항상 노출 */
.float-b .site-float__top{opacity:1;visibility:visible;transform:none}

.float-b .site-float__toggle-close::before,
.float-b .site-float__toggle-close::after{background:currentColor}

/* 모서리 — :first-of-type 은 div 기준이라 a(전화)를 건너뛴다 */
.float-b .site-float__group:first-of-type .site-float__toggle{border-radius:15px 15px 0 0}
.float-b .site-float__top{border-radius:0 0 15px 15px}

.float-b .site-float__list{margin-right:14px}


/* ============================================================
   C — 아웃라인 (a 구조 그대로, 스타일만)
   ============================================================ */
.float-c .site-float__toggle{
  border:1.5px solid var(--c-primary);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.float-c .site-float__toggle--sns{background:var(--c-bg);color:var(--c-primary)}
.float-c .site-float__toggle--sns:hover{background:var(--c-primary);color:#fff}

.float-c .site-float__toggle--chat{background:var(--c-primary);color:#fff}
.float-c .site-float__toggle--chat:hover{background:var(--c-primary-d)}

.float-c .site-float__toggle-close::before,
.float-c .site-float__toggle-close::after{background:currentColor}

/* 글자를 빼고 아이콘만 크게 */
.float-c .site-float__toggle-text{display:none}
.float-c .site-float__toggle--sns .site-float__toggle-ico svg{width:28px;height:28px}
.float-c .site-float__toggle--chat .site-float__toggle-ico svg{width:36px;height:36px}

/* 말풍선 안 눈 2개 — 깜빡임
   ⚠️ svg path 에 점이 없다. 가상요소로 직접 그린다 */
.float-c .site-float__toggle--chat .site-float__toggle-ico{
  position:relative;display:flex;
}
.float-c .site-float__toggle--chat .site-float__toggle-ico::before,
.float-c .site-float__toggle--chat .site-float__toggle-ico::after{
  content:'';position:absolute;top:50%;
  width:5px;height:5px;margin-top:-3px;
  border-radius:50%;background:currentColor;
  animation:floatBlink 3.4s infinite;
}
.float-c .site-float__toggle--chat .site-float__toggle-ico::before{left:calc(50% - 7px)}
.float-c .site-float__toggle--chat .site-float__toggle-ico::after{left:calc(50% + 2px)}

@keyframes floatBlink{
  0%,90%,100%{transform:scaleY(1)}
  94%{transform:scaleY(.12)}
  98%{transform:scaleY(1)}
}

/* TOP — 글자 위, 긴 화살표 아래 */
.float-c .site-float__top{
  flex-direction:column-reverse;gap:4px;
  border:1.5px solid var(--c-primary);
  color:var(--c-primary);
}
.float-c .site-float__top:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.float-c .site-float__top em{font-size:11px;letter-spacing:.08em}

/* ⚠️ 기본 span 은 border 로 그린 꺾쇠다. 전부 무력화하고 다시 그린다 */
.float-c .site-float__top span{
  position:relative;
  width:14px;height:17px;
  border:0;transform:none;
}
.float-c .site-float__top span::before{
  content:'';position:absolute;left:50%;top:1px;
  width:9px;height:9px;margin-left:-4.5px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(-45deg);
}
.float-c .site-float__top span::after{
  content:'';position:absolute;left:50%;top:2px;
  width:1.5px;height:15px;margin-left:-.75px;
  background:currentColor;
}

@media (prefers-reduced-motion: reduce){
  .float-c .site-float__toggle--chat .site-float__toggle-ico::before,
  .float-c .site-float__toggle--chat .site-float__toggle-ico::after{animation:none}
}

/* ===== 반응형 ===== */
@media (max-width:1024px){
  .site-float{right:14px;bottom:14px;gap:10px}

  /* 모바일에서만 전화 버튼 노출 */
  .site-float__call{display:flex;width:54px;height:54px}

  .site-float__toggle{width:54px;height:54px}
  .site-float__top{width:54px;height:54px}
  .site-float__apply{width:54px;height:54px}
  .site-float__apply .site-float__apply-tip{height:54px}
  .site-float__quick{height:52px;padding:0 17px 0 15px}
  .site-float__quick em{font-size:14px}
  .site-float__quick .site-float__apply-tip{height:52px}

  .float-b .site-float{right:14px;bottom:14px;width:66px}
  .float-b .site-float__toggle,
  .float-b .site-float__top,
  .float-b .site-float__call{width:100%;height:58px}

  /* 전화가 나타나면 그쪽이 맨 위가 된다 */
  .float-b .site-float__call{border-radius:15px 15px 0 0}
  .float-b .site-float__group:first-of-type .site-float__toggle{border-radius:0}
}

@media (max-width:768px){
  .site-float__item{padding:7px 7px 7px 15px}
  .site-float__label{font-size:13px}
  .site-float__icon{width:31px;height:31px}
  .site-float__icon svg{width:17px;height:17px}
}