/* ================================
   Floating Messengers (component)
   - 공통 배치/사이즈/반응형
   - 탭바/노치 안전영역 고려
   ================================ */

.floating-messengers{
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
}

.floating-messengers .fm-btn{
  width: 52px; height: 52px;
  display: flex; justify-content: center; align-items: center;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  background: #fff;
}
.floating-messengers .fm-btn img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.floating-messengers .fm-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* 태블릿 약간 축소 */
@media (max-width: 1024px){
  .floating-messengers .fm-btn{ width: 48px; height: 48px; }
  .floating-messengers{ gap: 14px; }
}

/* 모바일: 우하단으로 이동 (탭바 피해서) */
@media (max-width: 768px){
  .floating-messengers{
    top: auto; bottom: calc(90px + env(safe-area-inset-bottom, 0));
    transform: none;
    right: max(16px, env(safe-area-inset-right, 0));
  }
  .floating-messengers .fm-btn{ width: 44px; height: 44px; }
  .floating-messengers{ gap: 12px; }
}
@media (max-width: 480px){
  .floating-messengers{
    bottom: calc(100px + env(safe-area-inset-bottom, 0));
    right: max(12px, env(safe-area-inset-right, 0));
    gap: 10px;
  }
  .floating-messengers .fm-btn{ width: 40px; height: 40px; }
}

/* ==== (선택) WeChat QR 오버레이 ==== */
.fm-qr-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none; place-items: center;
  z-index: 1100;
}
.fm-qr-overlay.is-open{ display: grid; }

.fm-qr{
  position: relative;
  width: 280px; max-width: 86vw;
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
  padding: 16px;
}
.fm-qr img{ width: 100%; height: auto; display: block; }
.fm-qr .fm-qr-close{
  position: absolute; right: 8px; top: 8px;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: #f4f4f4; font-size: 18px; cursor: pointer;
}

/* (optional) unify base size & feel with other messenger buttons */
.floating .fm-btn{
  width: 48px; height: 48px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Back-to-top: green circle + white icon (cover both .btn-top and .fm-top) */
.floating .btn-top,
.floating .fm-btn.fm-top{
  position: relative;
  width: 48px; height: 48px;
  border: 0 !important;
  background: transparent !important;     /* remove any default white bg */
  border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
}

/* green disk as pseudo-element (ignores any background conflicts) */
.floating .btn-top::before,
.floating .fm-btn.fm-top::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background:#06C160;                    /* green background */
  z-index:0;
}

/* white icon over the green disk */
.floating .btn-top svg,
.floating .fm-btn.fm-top svg{
  position: relative; z-index: 1;
  width: 22px; height: 22px;
  fill: #fff !important;
}
.floating .btn-top svg *,
.floating .fm-btn.fm-top svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* if <img> is used as icon, make it white by filter */
.floating .btn-top img,
.floating .fm-btn.fm-top img{
  position: relative; z-index: 1;
  width: 22px; height: 22px;
  filter: brightness(0) invert(1);
}

/* hover / active feedback (same as other buttons) */
.floating .btn-top:hover,
.floating .fm-btn.fm-top:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.10);
}
.floating .btn-top:active,
.floating .fm-btn.fm-top:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}

/* hide state */
.floating .fm-btn[hidden]{ display:none !important; }

/* (optional) spacing/safe-area with bottom UI */
.floating{ gap: 10px; }
@media (max-width: 640px){
  .floating{ bottom: calc(84px + env(safe-area-inset-bottom)); }
}