/* 우측 연락 버튼 (2026-09-21 디에이성형외과 방식으로 재설계)
   · 색 원 + 그 아래 같은 색 알약 라벨. 라벨은 원에서 4px 떨어진다(디에이와 같게). 늘 펼쳐 둔다 — 접기 없음.
   · 위치는 오른쪽 아래. 네 번째 칸이 맨 위로(TOP) 버튼.
   · 순서(위→아래): 비용 계산 · 카톡 상담 · 전화 상담 · TOP. 항목은 data/site.json 의 floating.items.
   · 색은 사이트 팔레트 밖 — 일부러. 튀어야 하는 버튼이다(사용자).
     계산 = 코랄 #FF5A36, 카카오톡 = 카카오 노랑 #FEE500, 전화 = 파랑 #2F7BF5. */

.fc { position: fixed; right: 6px; bottom: 18px; z-index: 45; width: 64px; pointer-events: none; }
.fc[hidden] { display: none; }
.fc-items { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fc-items > li { pointer-events: auto; }

.fc-btn { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform .14s ease; }
.fc-btn:hover { transform: translateY(-2px); }
.fc-dot {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--fc-bg); color: var(--fc-fg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.fc-dot svg { width: 38px; height: 38px; }
.fc-label {
  position: relative; margin-top: 4px; padding: 4px 8px 2px; border-radius: 999px;
  background: var(--fc-bg); color: var(--fc-fg);
  font-family: var(--pz-font-logo); font-size: 11.5px; font-weight: 400; line-height: 1.3; letter-spacing: .01em;   /* 고도 M — 가늘어도 획이 또렷하다. 헤더 워드마크용으로 이미 받는 글꼴 */ white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.fc-btn--calc  { --fc-bg: #FF5A36; --fc-fg: #fff; }
.fc-btn--kakao { --fc-bg: #FFE812; --fc-fg: #191600; }
.fc-btn--kakao .fc-dot { background: #FFE812 url(/assets/img/kakaotalk.png?v=2) center 56% / 72% no-repeat; }   /* 공식 로고 그대로 */
/* 네 번째 칸 — 맨 위로. 스크롤을 내려야 나타난다(site.js 가 is-on). 자리는 늘 차지해 위 버튼이 안 밀린다 */
.fc-btn--top { --fc-bg: #17212b; --fc-fg: #fff; }
.fc .rk-totop { position: static; width: auto; height: auto; background: none; display: flex; }
.fc-btn--tel   { --fc-bg: #2F7BF5; --fc-fg: #fff; }
.fc-btn--tel .fc-dot svg { width: 45px; height: 45px; }

.fc-btn:focus-visible { outline: 3px solid var(--pz-ink); outline-offset: 3px; border-radius: 12px; }

@media (max-width: 600px) {
  .fc { right: 10px; bottom: 14px; width: 56px; }
  .fc-dot { width: 48px; height: 48px; }
  .fc-dot svg { width: 32px; height: 32px; }
  .fc-btn--tel .fc-dot svg { width: 37px; height: 37px; }
  .fc-items { gap: 9px; }
  .fc-label { font-size: 10px; padding: 3px 6px 1px; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .fc-btn { transition: none; } }
@media print { .fc { display: none; } }

/* 지역 랜딩(생성기 159장)의 폰 하단 고정 바(.cj2-floatbar: 비용 계산기 · 전화 상담 · 견적 문의)는 숨긴다.
   플로팅 버튼과 겹쳐 TOP 을 덮었고, 홈에서 하단 바를 뺀 것과 맞춘다 (2026-09-22 사용자). 생성기 본문은 그대로. */
.cj2-floatbar { display: none !important; }
body:has(.cj2-floatbar) { padding-bottom: 0 !important; background: var(--pz-white) !important; }   /* 바 자리로 비워 두던 아래 74~80px(짙은 바탕)도 거둔다 */
/* 지역 랜딩 폰 히어로는 '화면 높이 − 하단 바 높이(52~58px)'로 맞춰져 있었다 → 바를 뺐으니 화면 높이를 꽉 채운다.
   큰 폰에서 720px 에 막혀 아래가 비던 것도 푼다 (2026-09-22 사용자) */
@media (max-width: 700px) {
  .cj2-hero { height: 100svh !important; max-height: none !important; }
  /* 포지맨 칸: 215px 고정이라 큰 폰에서 공중에 떠 잘렸다 → 글·버튼 아래 남는 높이를 다 채우고, 캐릭터를 그 높이의 135% 로 키워
     배쯤에서 히어로 바닥에 잘리게(홈 히어로와 같은 방식) */
  /* 생성기 본문 안의 !important 규칙이 뒤에 있어 선택자를 한 단계 더 구체적으로 쓴다 */
  body .cj2-hero > .cj2-wrap { height: 100% !important; }
  body .cj2-hero .cj2-hero__card { flex: 1 1 auto !important; height: auto !important; min-height: 190px !important; max-height: none !important;
                    align-items: flex-start !important; justify-content: center !important; overflow: hidden !important; }
  body .cj2-hero .cj2-hero__card img { height: 135% !important; width: auto !important; max-width: none !important; object-fit: contain !important;
                    object-position: center top !important; transform: none !important; }
}