/* QUICK_floating/simple_sns - 심플 SNS 아이콘 메뉴 */

.quick_floating.simple_sns {
  position: fixed;
  right: 4rem;
  bottom: 4rem;
  z-index: 2147483646; /* customer2 모달(2147483647) 바로 아래, 그 외 모든 요소 위 */

  /* 톱니 설정 기본값 */
  --ss-circle: 4.4rem;
  --ss-icon: 2rem;
  --ss-gap: 0.8rem;
  --ss-hover-scale: 1.1;
  --ss-radius: 50%;       /* 버튼 박스 모서리 둥글기 */
  --ss-mask-radius: 50%;  /* 아이콘 마스크 모서리 둥글기 (이미지 자르기) */

  --ss-icon-off: #222222;
  --ss-icon-hover: var(--primary, #2563eb);
  --ss-bg-off: #ffffff;
  --ss-bg-hover: #ffffff;
  --ss-border-off: var(--border-color, #ddd);
  --ss-border-hover: var(--primary, #2563eb);

  --ss-top-icon-size: var(--ss-icon, 2rem); /* TOP 화살표 아이콘 크기 (기본: 공통 아이콘 크기 따름) */
  --ss-top-icon-off: #222222;
  --ss-top-icon-hover: #ffffff;
  --ss-top-bg-off: #ffffff;
  --ss-top-bg-hover: var(--primary, #2563eb);
  --ss-top-border-off: var(--border-color, #ddd);
  --ss-top-border-hover: var(--primary, #2563eb);
}

.quick_floating.simple_sns .contents-container {
  max-width: 100%;
}

.quick_floating.simple_sns .sns-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--ss-gap, 0.8rem);
}

.quick_floating.simple_sns .sns-list li {
  list-style: none;
}

.quick_floating.simple_sns .sns-list .sns-asset {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ss-circle, 4.4rem);
  height: var(--ss-circle, 4.4rem);
  color: var(--ss-icon-off, #222);
  background: var(--ss-bg-off, #fff);
  border: 1px solid var(--ss-border-off, var(--border-color, #ddd));
  border-radius: var(--ss-radius, 50%);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  overflow: hidden;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* hover — 살짝 커지기만 */
.quick_floating.simple_sns .sns-list .sns-asset:hover {
  transform: scale(var(--ss-hover-scale, 1.1));
  color: var(--ss-icon-hover, var(--primary, #2563eb));
  background: var(--ss-bg-hover, #fff);
  border-color: var(--ss-border-hover, var(--primary, #2563eb));
}

/* 이미지/아이콘 영역 — 마스크 적용 (사각 이미지가 모서리값에 맞춰 잘림) */
.quick_floating.simple_sns .sns-list .wg_img_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ss-icon, 2rem);
  height: var(--ss-icon, 2rem);
  border-radius: var(--ss-mask-radius, 50%);
  overflow: hidden;
}

.quick_floating.simple_sns .sns-list .wg_img_box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.2s;
}

.quick_floating.simple_sns .sns-list .wg_img_box i,
.quick_floating.simple_sns .sns-list .wg_img_box .ff-ico {
  font-size: var(--ss-icon, 2rem);
  line-height: 1;
}

.quick_floating.simple_sns .sns-list .sns-asset i {
  font-size: var(--ss-icon, 2rem);
  line-height: 1;
}

/* 텍스트는 항상 blind 처리 (글씨 안 나옴) */
.quick_floating.simple_sns .sns-list span.blind {
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
}

/* TOP 버튼 — 별도 변수 */
.quick_floating.simple_sns .sns-list .sns-top .sns-asset {
  color: var(--ss-top-icon-off, #222);
  background: var(--ss-top-bg-off, #fff);
  border-color: var(--ss-top-border-off, var(--border-color, #ddd));
}
.quick_floating.simple_sns .sns-list .sns-top .sns-asset:hover {
  color: var(--ss-top-icon-hover, #fff);
  background: var(--ss-top-bg-hover, var(--primary, #2563eb));
  border-color: var(--ss-top-border-hover, var(--primary, #2563eb));
}
.quick_floating.simple_sns .sns-list .sns-top .sns-asset i {
  font-size: var(--ss-top-icon-size, var(--ss-icon, 2rem));
  line-height: 1;
}

/* ===========================
   심플 모드 — 배경/테두리 제거, 아이콘만
   =========================== */
.quick_floating.simple_sns .sns-list.is-simple .sns-asset {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.quick_floating.simple_sns .sns-list.is-simple .sns-asset:hover {
  background: transparent !important;
  border: none !important;
}

/* ===========================
   테두리 제거 — 배경은 유지, 테두리만 없앰
   =========================== */
.quick_floating.simple_sns .sns-list.no-border .sns-asset,
.quick_floating.simple_sns .sns-list.no-border .sns-asset:hover {
  border: none !important;
}

/* 반응형 */
@media (max-width: 992px) {
  .quick_floating.simple_sns {
    right: 1.6rem;
    bottom: 1.6rem;
  }
}