@charset "UTF-8";

/* 元件設定：色彩、尺寸與位置集中管理；底部預留既有 TOP 按鈕空間 */
:root {
  --social-float-color: #0c2c34;
  --social-float-size: 56px;
  --social-float-link-size: 48px;
  --social-float-gap: 12px;
  --social-float-right: 24px;
  --social-float-bottom: 96px;
}

/* 固定位置與圓形按鈕：獨立命名，避免影響全站元件 */
.social-float {
  position: fixed;
  right: calc(var(--social-float-right) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--social-float-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: var(--social-float-size);
  font: 400 14px/1.4 Arial, "Microsoft JhengHei", sans-serif;
  letter-spacing: normal;
}
.social-float *, .social-float *::before, .social-float *::after { box-sizing: border-box; }
.social-float .social-float__toggle, .social-float .social-float__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  padding: 0;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.social-float .social-float__toggle { position: relative; width: var(--social-float-size); height: var(--social-float-size); background: var(--social-float-color); }
.social-float svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.social-float__toggle svg { transition: transform .3s ease, opacity .2s ease; }
.social-float__close { position: absolute; font: 300 32px/1 Arial, sans-serif; opacity: 0; transform: rotate(-90deg); transition: transform .3s ease, opacity .2s ease; }
.social-float.is-open .social-float__toggle svg { opacity: 0; transform: rotate(90deg); }
.social-float.is-open .social-float__close { opacity: 1; transform: rotate(0); }
.social-float .social-float__toggle:focus-visible, .social-float .social-float__link:focus-visible { outline: 2px solid var(--social-float-color); outline-offset: 4px; }

/* 社群圓鈕依序向上滾出；收合時不攔截頁面點擊 */
.social-float__links { position: absolute; bottom: calc(100% + var(--social-float-gap)); right: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--social-float-gap); pointer-events: none; }
.social-float .social-float__link {
  position: relative;
  width: var(--social-float-link-size);
  height: var(--social-float-link-size);
  visibility: hidden;
  opacity: 0;
  transform: translateY(24px) rotate(-45deg) scale(.65);
  transition: opacity .2s ease, transform .3s ease, visibility .3s;
}
.social-float.is-open .social-float__link { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: calc(var(--social-float-order) * 55ms); }
.social-float .social-float__link--line { background: #06a94f; }
.social-float .social-float__link--instagram { background: linear-gradient(35deg, #f9a23b, #d52a78 55%, #7441c8); }
.social-float .social-float__link--facebook { background: #1877f2; }
.social-float__label { position: absolute; right: calc(100% + 12px); padding: 6px 10px; border-radius: 4px; color: #fff; background: var(--social-float-color); font-size: 14px; white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s; }
.social-float__link:hover .social-float__label, .social-float__link:focus-visible .social-float__label { visibility: visible; opacity: 1; }

/* 手機安全區與主選單遮罩 */
html.has-overlay .social-float { visibility: hidden; pointer-events: none; }
html.has-overlay .social-float .social-float__link { visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
  .social-float { --social-float-size: 52px; --social-float-right: 16px; --social-float-bottom: 96px; }
}
@media (max-height: 420px) {
  .social-float { --social-float-bottom: 16px; --social-float-gap: 8px; }
}

/* 尊重系統減少動態效果設定 */
@media (prefers-reduced-motion: reduce) {
  .social-float .social-float__link, .social-float__toggle svg, .social-float__close, .social-float__label { transition: none; }
}