/* ============================================================
   floating.css — 우하단 플로팅 버튼 (전 페이지 공통)
   ============================================================ */
.floating-btns{
  align-items:flex-end;
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;               /* 헤더(100)·모달보다 아래 */
  display:flex;
  flex-direction:column;
  gap:8px;
}
.floating-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(36,50,71,.12);
  transition:background .15s ease, color .15s ease;
}
.floating-btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.floating-btn svg{ width:18px; height:18px; }

@media (max-width: 640px){
  .floating-btns{ right:12px; bottom:12px; }
  .floating-btn{ width:36px; height:36px; }
}
/* ── 고객센터 버튼 ───────────────────── */
/* a 태그라 button 과 렌더가 다름 → flex 로 아이콘 정중앙 맞춤 */
.floating-btn--cs {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.floating-btn--cs:hover { background: var(--accent2); border-color: var(--accent2); }


/* 툰 버튼 — 다른 버튼과 구분되게 accent 배경 */
.floating-btn--toon{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.floating-btn--toon:hover{
  background:#fff;
  color:var(--accent);
  border-color:var(--accent);
}

/* 글자 버전 */
.floating-btn--text{
  font-size:24px;
  line-height:.71;
}

/* ============================================================
   플로팅 장식 (bookmark)
   콘텐츠(--container=중앙 고정폭) 오른쪽 여백에 못 박는다.
   left 기준: 화면중앙(50vw) + 콘텐츠 절반 + 20px
   → 화면이 넓으면 여백 안에 전체가 보이고,
     좁아지면 그 자리 그대로라 오른쪽부터 연속적으로 잘린다.
   크기는 절대 안 변함.
   ============================================================ */
/* after — 기준을 화면이 아니라 콘텐츠 오른쪽 끝(+16px)에 고정.
   화면 넓음   → 여백 안에 전체 표시
   여백 부족   → 그 자리 그대로라 오른쪽부터 잘림
   여백 없음   → left 가 화면 밖 = 저절로 안 보임 (별도 숨김 불필요) */
/* after — 두 기준 중 오른쪽 승자를 따름
   ① 화면 오른쪽 끝 - 130px (이미지 110 + 여유 20) ← 넓을 때
   ② 콘텐츠 오른쪽 끝 + 16px                        ← 좁을 때 (밀려나며 잘림) */
.floating-deco{
  position:fixed;
  left: max(calc(50vw + var(--container) / 2 + 16px), calc(100vw - 130px));
  bottom: 240px;
  width:110px;
  height:auto;
  z-index:40;
  user-select:none;
  filter: drop-shadow(0 8px 18px rgba(36,50,71,.18));
  transition: transform .25s ease;
}

/* 잘린 상태에서 호버 → 모자란 만큼만 왼쪽으로 나옴. 다 보일 땐 안 움직임 */
.floating-deco:hover{
  transform: translateX(calc(-1 * max(0px, 130px - (50vw - var(--container) / 2 - 16px))));
}

@media (max-width: 760px){
  .floating-deco{ display:none; }
}

/* 잘린 상태에서 호버 → 왼쪽으로 나와 전체 표시
   전체가 이미 보이는 넓은 화면에선 살짝 움직일 뿐이라 무해 */
.floating-deco:hover{
  transform: translateX(calc(-1 * max(0px, 130px - (100vw - 50vw - var(--container) / 2 - 20px))));
}

@media (max-width: 760px){
  .floating-deco{ display:none; }
}