/* 소상공인 페이지 공통 — 고정 상담(데스크톱 카드 · 접힌 「상담 신청」 버튼)과 기존 플로팅 버튼 자리
   (2026-10-08 · session/consult-card-overlap · 대표 승인 — 보류항목 「데스크톱 상담 카드가 본문을 가림」)
   싣는 곳: business/ index · highorder · robot · cctv · package · aiphone · tossplace · pos — 각 전용 css **뒤에**.
   폭 구간(본문은 1200px 가운데 · Step 0 실측 — 260px 카드는 화면 1720px 미만이면 반드시 본문을 가린다):
     ① 1720px 이상   데스크톱 카드(.biz-float-card) — 플로팅 버튼 4개는 카드 위.
     ② 1024~1719px   접힌 「상담 신청」 버튼(.biz-float-pill · 빨강 세로 알약 52px — 플로팅 버튼 세로줄 맨 아래).
                     52px 폭인 이유: 1280 에서 본문 오른쪽 끝(1216px)과 화면 끝 사이가 64px 뿐이라 가로 알약은 본문을 가린다.
     ③ 1024px 미만   카드·접힌 버튼 끔 — 각 페이지 전용 css 의 하단 바(.xx-mbar)가 맡는다(하단 바 규칙은 전용 css 에 그대로).
     1304px 미만은 오른쪽 여백 24 → 12px(1280 에서 버튼 왼쪽 끝이 본문 오른쪽 끝 1216px 에 맞닿는다).
   숨김은 js/biz-float.js 가 붙인다: .biz-float.is-hidden + body.biz-float-off
     (상담 신청서가 보이는 동안 · 페이지 옵션 data-hide-also) — PC 는 플로팅 버튼이 아래로, 1024px 미만은 플로팅 버튼도 숨김.
   ⛔ 빨강은 #E60012. ⛔ 페이지 전용 css 에 같은 규칙을 다시 만들지 말 것(이 파일로 옮기고 지웠다). */
.biz-float { --bf-red: #E60012; --bf-red-hover: #C00010; position: fixed; right: 24px; bottom: 24px; z-index: 890; transition: opacity .2s, transform .2s; }
.biz-float.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }

/* ① 데스크톱 카드 */
.biz-float-card { width: 260px; background: #fff; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.16); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.biz-float-title { display: flex; flex-direction: column; gap: 2px; }
.biz-float-title span { font-size: 13px; font-weight: 700; color: var(--bf-red); }
.biz-float-title strong { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.biz-float-card a { min-height: 48px; padding: 12px; font-size: 16px; }
.biz-float-card .biz-float-go { font-weight: 800; }
.biz-float-card .biz-float-tel { font-size: 15px; }

/* ② 접힌 「상담 신청」 버튼 */
.biz-float-pill { display: none; }
@media (max-width: 1719.98px) {
  .biz-float-card { display: none; }
  .biz-float-pill {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 52px; min-height: 88px; padding: 12px 0; border-radius: 26px;
    background: var(--bf-red); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; text-align: center; text-decoration: none;
  }
  .biz-float-pill:hover { background: var(--bf-red-hover); color: #fff; }
  .biz-float-pill:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
}

/* 기존 플로팅 버튼 4개(전화·카카오·WhatsApp·TOP — 마크업은 공통 그대로)의 자리 */
body.biz-float-page .floating-cta { bottom: 268px; transition: bottom .2s, opacity .2s, visibility .2s; }   /* ① 카드 위 */
body.biz-float-page .floating-cta .floating-btn { width: 52px; height: 52px; }
@media (max-width: 1719.98px) {
  body.biz-float-page .floating-cta { bottom: 124px; }   /* ② 접힌 버튼(24 + 88) 위 12px */
}
body.biz-float-page.biz-float-off .floating-cta { bottom: 24px; }   /* 카드·버튼이 숨으면 원래 자리로 */
@media (min-width: 1024px) and (max-width: 1303.98px) {
  .biz-float, body.biz-float-page .floating-cta { right: 12px; }
}

/* ③ 1024px 미만(폰·태블릿) — 하단 바 위로 · 전화 버튼은 하단 바 「전화 상담」(같은 tel)과 겹쳐 숨김 */
@media (max-width: 1023.98px) {
  .biz-float { display: none; }
  body.biz-float-page .floating-cta,
  body.biz-float-page.biz-float-off .floating-cta { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); gap: 8px; }
  body.biz-float-page .floating-cta .floating-btn { width: 44px; height: 44px; font-size: 18px; }
  body.biz-float-page .floating-cta .floating-btn svg { width: 24px; height: 24px; }
  body.biz-float-page .floating-cta .phone-btn { display: none; }
  /* 상담 신청서가 보이는 동안 플로팅 버튼도 숨긴다 — 폼 안 「전화 상담」·「카카오톡 상담」 버튼을 가리던 것(대표 지시 2026-10-08) */
  body.biz-float-page.biz-float-off .floating-cta { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .biz-float, body.biz-float-page .floating-cta { transition: none; }
}