@charset "utf-8";
/* ============================================================
   quickbar.css
   대상: quickbar-1.html ~ quickbar-4.html (퀵바 1~4)
   포함 영역:
   - 플로팅 도크 공통 (.floating-dock, .fd-*)
   - 퀵바 Type 1~4 변형 (.floating-dock--type1 ~ --type4)
   - 퀵바 관련 반응형
   ============================================================ */

/* === 플로팅 도크 공통 (기본) === */

/* ----- 우측 플로팅 도크 (빠른연락) ----- */
.floating-dock {position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; width: 76px;}

/* 퀵바 상태 복원 시 초기 애니메이션(슬라이드) 방지 — JS가 로드 순간에만 부여 */
.floating-dock.qb-no-anim .fd-inner,
.floating-dock.qb-no-anim .fd-panel,
.floating-dock.qb-no-anim .fd-show,
.floating-dock.qb-no-anim .fd-scrolltop,
.floating-dock.qb-no-anim .fd-trigger,
.floating-dock.qb-no-anim .fd-menu,
.floating-dock.qb-no-anim .fd-stack {transition: none;}
.floating-dock .fd-item {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-m); font-size: 14px; font-weight: 600; color: var(--c-text); text-align: center; transition: transform .15s, box-shadow .15s, border-color .15s; cursor: pointer; line-height: 1.3;}
.floating-dock .fd-item:hover {transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: var(--c-primary); color: var(--c-primary);}
.floating-dock .fd-icon {width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px;}
.floating-dock .fd-item--talk .fd-icon {background: #fee500; color: #3c1e1e;}
.floating-dock .fd-item--card1 .fd-icon {background: #ffe082;}
.floating-dock .fd-item--card2 .fd-icon {background: #fff59d;}
.floating-dock .fd-item--ask .fd-icon {background: #ce93d8; color: #fff;}
.floating-dock .fd-item--phone {padding: 14px 6px;}
.floating-dock .fd-tel {display: block; font-weight: 700; color: var(--c-primary); font-size: 13px; margin-top: 2px;}
.floating-dock .fd-top {margin-top: 6px; background: var(--c-text); color: #fff; border-color: var(--c-text);}
.floating-dock .fd-top:hover {background: var(--c-primary); border-color: var(--c-primary); color: #fff;}

@media (max-width: 767px) {
	.floating-dock {right: 12px; width: 56px; gap: 4px;}
	.floating-dock .fd-item {padding: 8px 4px; font-size: 11px;}
	.floating-dock .fd-icon {width: 22px; height: 22px; font-size: 12px;}
	.floating-dock .fd-item--phone, .floating-dock .fd-tel {display: none;}
}

/* ============================================================
   QUICK BAR 3종 (디자인 변형)
   ============================================================ */

/* ----------------------------------------------------------
   Type 1 — 가로 정렬 알약형 카드 (Horizontal pill cards · 우측 하단)
   ---------------------------------------------------------- */
.floating-dock--type1 {right: 20px; bottom: 20px; left: auto; top: auto; transform: none; flex-direction: column; gap: 10px; width: auto; align-items: flex-end;}
.floating-dock--type1 .fd-item {flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-width: 180px; padding: 12px 16px; background: #fff; border: 1px solid rgba(41, 98, 255, .18); border-radius: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); text-align: left; line-height: 1.3; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;}
.floating-dock--type1 .fd-item:hover {transform: translateY(-3px); box-shadow: 0 10px 24px rgba(41, 98, 255, .22); border-color: var(--c-primary); color: var(--c-primary);}
.floating-dock--type1 .fd-icon {flex: 0 0 36px;}
.floating-dock--type1 .fd-label {flex: 1; display: flex; flex-direction: column; gap: 1px;}
.floating-dock--type1 .fd-tel {display: block; color: var(--c-primary); font-weight: 700; font-size: 13px; margin-top: 1px;}
.floating-dock--type1 .fd-top {background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent, #5a35d1) 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(41, 98, 255, .35);}
.floating-dock--type1 .fd-top:hover {color: #fff; box-shadow: 0 10px 24px rgba(41, 98, 255, .5); border-color: transparent;}
.floating-dock--type1 .fd-top .fd-icon {background: rgba(255, 255, 255, .18); color: #fff;}

/* Type 1 — 펼침/닫기 버튼 (펼침 상태로 시작, TOP·닫기 한 행 정렬) */
.floating-dock--type1 .fd-stack {display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 220px;}
.floating-dock--type1 .fd-row {display: flex; gap: 8px; align-items: stretch; height: 44px;}
.floating-dock--type1 .fd-row .fd-top {flex: 1; min-width: 0; min-height: 0; padding: 6px 14px; border-radius: 14px;}
.floating-dock--type1 .fd-row .fd-top .fd-icon {width: 28px; height: 28px; flex: 0 0 28px;}
.floating-dock--type1 .fd-hide {flex: 0 0 44px; width: 44px; min-width: 44px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .08); background: #fff; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;}
.floating-dock--type1 .fd-hide:hover {background: var(--c-text); color: #fff; border-color: var(--c-text); transform: translateY(-2px);}
.floating-dock--type1 .fd-show {width: 56px; height: 56px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent, #5a35d1) 100%); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 6px 20px rgba(41, 98, 255, .35); display: none; align-items: center; justify-content: center; transition: transform .25s ease, box-shadow .25s ease;}
.floating-dock--type1 .fd-show:hover {transform: scale(1.05); box-shadow: 0 8px 24px rgba(41, 98, 255, .5);}
.floating-dock--type1:not(.is-open) .fd-stack {display: none;}
.floating-dock--type1:not(.is-open) .fd-show {display: flex;}

/* Type 1 — 닫힘(메뉴버튼) 상태에서 스크롤 시, 메뉴버튼 위에 TOP 원형 버튼 노출 (PC 전용) */
.floating-dock--type1 .fd-scrolltop {display: none; width: 56px; height: 56px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; align-items: center; justify-content: center; font-size: 18px;}
.floating-dock--type1:not(.is-open).is-scrolled .fd-scrolltop {display: flex;}

/* ----------------------------------------------------------
   Type 2 — 슬라이드 패널 (Slide-out panel · 우측 토글)
   ---------------------------------------------------------- */
.floating-dock--type2 {right: 0; bottom: 80px; left: auto; top: auto; transform: none; flex-direction: row; align-items: flex-end; gap: 0; width: auto; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none;}

/* 우측 트리거 탭 (펼침 버튼) */
.floating-dock--type2 .fd-show {order: 2; width: 36px; height: 96px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent, #5a35d1) 100%); color: #fff; border: 0; border-radius: 14px 0 0 14px; cursor: pointer; box-shadow: -4px 8px 24px rgba(41, 98, 255, .3); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; z-index: 2; overflow: hidden; transition: width .35s cubic-bezier(.4, .14, .3, 1), opacity .25s ease, box-shadow .25s ease;}
.floating-dock--type2 .fd-show:hover {box-shadow: -6px 12px 32px rgba(41, 98, 255, .42);}
.floating-dock--type2.is-open .fd-show {opacity: 0; width: 0; pointer-events: none;}

/* 슬라이드 패널 (white card) */
.floating-dock--type2 .fd-panel {order: 1; position: relative; width: 240px; background: #fff; border-radius: 16px 0 0 16px; box-shadow: -10px 16px 48px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .04); padding: 48px 12px 14px; display: flex; flex-direction: column; gap: 4px; transform: translateX(calc(100% + 36px)); opacity: 0; pointer-events: none; transition: transform .4s cubic-bezier(.4, .14, .3, 1), opacity .3s ease;}
.floating-dock--type2.is-open .fd-panel {transform: translateX(0); opacity: 1; pointer-events: auto;}

/* 패널 내 닫기 버튼 */
.floating-dock--type2 .fd-hide {position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #999; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background .2s ease, color .2s ease;}
.floating-dock--type2 .fd-hide:hover {background: rgba(0, 0, 0, .06); color: var(--c-text);}

/* 패널 내 아이템 — 가로 정렬 (icon · label) */
.floating-dock--type2 .fd-item {flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-width: 0; padding: 10px 12px; background: transparent; border: 0; border-radius: 10px; color: var(--c-text); font-size: 14px; font-weight: 600; text-align: left; line-height: 1.3; transition: background .2s ease, color .2s ease;}
.floating-dock--type2 .fd-item:hover {background: rgba(41, 98, 255, .08); color: var(--c-primary); transform: none; box-shadow: none; border-color: transparent;}
.floating-dock--type2 .fd-icon {flex: 0 0 36px; width: 36px; height: 36px; font-size: 18px;}
.floating-dock--type2 .fd-label {flex: 1; display: flex; flex-direction: column; gap: 1px;}
.floating-dock--type2 .fd-tel {display: block; color: var(--c-primary); font-weight: 700; font-size: 13px; margin-top: 1px;}
.floating-dock--type2 .fd-top {background: var(--c-text); color: #fff; margin-top: 6px;}
.floating-dock--type2 .fd-top:hover {background: var(--c-primary); color: #fff;}
.floating-dock--type2 .fd-top .fd-icon {background: rgba(255, 255, 255, .15); color: #fff;}

/* Type 2 — 패널이 우측으로 슬라이드 아웃(숨김)된 상태 + 스크롤 시, 우측 탭 위에 TOP 원형 버튼 노출 */
.floating-dock--type2 .fd-scrolltop {position: fixed; right: 14px; bottom: 188px; width: 48px; height: 48px; min-width: 0; padding: 0; margin: 0; border-radius: 50%; background: var(--c-text); color: #fff; border: 0; display: none; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); cursor: pointer; z-index: 3; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;}
.floating-dock--type2 .fd-scrolltop:hover {background: var(--c-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(41, 98, 255, .4);}
.floating-dock--type2:not(.is-open).is-scrolled .fd-scrolltop {display: flex;}

/* ----------------------------------------------------------
   Type 3 — 단일 FAB + 확장 메뉴 (Speed dial · 우측 하단)
   ---------------------------------------------------------- */
.floating-dock--type3 {position: fixed; right: 20px; bottom: 20px; left: auto; top: auto; transform: none; flex-direction: column-reverse; align-items: flex-end; gap: 12px; width: auto; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-top: 0;}
.floating-dock--type3 .fd-trigger {width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent, #5a35d1) 100%); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-size: 24px; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: transform .35s cubic-bezier(.4, .14, .3, 1), box-shadow .25s ease; z-index: 2; animation: fdType3Pulse 2.4s ease-out infinite;}
.floating-dock--type3 .fd-trigger:hover {box-shadow: 0 8px 28px rgba(0, 0, 0, .25);}
.floating-dock--type3.is-open .fd-trigger {transform: rotate(135deg); animation: none;}

@keyframes fdType3Pulse {
	0% {box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 0 0 rgba(41, 98, 255, .45);}
	70% {box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 0 20px rgba(41, 98, 255, 0);}
	100% {box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 0 0 rgba(41, 98, 255, 0);}
}
.floating-dock--type3 .fd-menu {display: flex; flex-direction: column; gap: 10px; align-items: flex-end; opacity: 0; visibility: hidden; transform: translateY(15px) scale(.95); transform-origin: bottom right; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s;}
.floating-dock--type3.is-open .fd-menu {opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;}
.floating-dock--type3 .fd-menu .fd-item {width: 76px; height: 76px; padding: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); border: 1px solid rgba(0, 0, 0, .04); flex-direction: column; gap: 4px; color: var(--c-text); transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;}
.floating-dock--type3 .fd-menu .fd-item:hover {transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); color: var(--c-primary); border-color: rgba(41, 98, 255, .25);}
.floating-dock--type3 .fd-menu .fd-item .fd-icon {background: transparent; color: inherit;}

/* 문의 / 전화 — 가로 알약형 (좌우만 둥글게) */
.floating-dock--type3 .fd-menu .fd-item--ask, .floating-dock--type3 .fd-menu .fd-item--call {width: auto; min-width: 180px; height: 76px; border-radius: 38px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 22px 0 18px; text-align: left;}
.floating-dock--type3 .fd-menu .fd-item--ask .fd-label, .floating-dock--type3 .fd-menu .fd-item--call .fd-label {flex: 1; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; font-size: 15px; font-weight: 600;}
.floating-dock--type3 .fd-menu .fd-item--ask .fd-tel, .floating-dock--type3 .fd-menu .fd-item--call .fd-tel {display: block; color: var(--c-primary); font-weight: 700; font-size: 15px;}

/* Type 3 — FAB 메뉴가 접힌(닫힘) 상태 + 스크롤 시, FAB(닫기 버튼) 위에 TOP 원형 버튼 노출 */
.floating-dock--type3 .fd-scrolltop {position: fixed; right: 30px; bottom: 108px; width: 56px; height: 56px; min-width: 0; padding: 0; margin: 0; border-radius: 50%; background: var(--c-text); color: #fff; border: 0; display: none; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; z-index: 3; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;}
.floating-dock--type3 .fd-scrolltop:hover {background: var(--c-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(41, 98, 255, .4);}
.floating-dock--type3:not(.is-open).is-scrolled .fd-scrolltop {display: flex;}
.floating-dock--type3 .fd-menu .fd-top {background: var(--c-text); color: #fff; border-color: transparent;}
.floating-dock--type3 .fd-menu .fd-top:hover {background: var(--c-primary); color: #fff; border-color: transparent;}
.floating-dock--type3 .fd-menu .fd-top .fd-icon {background: transparent; color: #fff;}

/* ----------------------------------------------------------
   Type 4 — 하단 풀폭 컴팩트 다크 바 + 숨김/보이기 토글
   ---------------------------------------------------------- */
.floating-dock--type4 {position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: auto; padding: 0; background: transparent; box-shadow: none; border: 0; pointer-events: none; flex-direction: column; align-items: stretch; gap: 0;}
.floating-dock--type4 > * {pointer-events: auto;}

/* 메인 바 (.fd-inner) — 다크 글래스모피즘 */
.floating-dock--type4 .fd-inner {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 10px 20px; background: rgba(15, 23, 42, .94); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -2px 0 rgba(255, 255, 255, .06) inset, 0 -12px 36px rgba(0, 0, 0, .4); transition: transform .35s cubic-bezier(.4, .14, .3, 1);}
.floating-dock--type4.is-hidden .fd-inner {transform: translateY(100%);}

/* 아이템 — 가로 레이아웃 (icon · label) */
.floating-dock--type4 .fd-item {flex: 0 1 auto; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; background: transparent; border: 0; border-radius: 12px; color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; line-height: 1; min-width: 0; transition: background .2s ease, color .2s ease, transform .2s ease;}
.floating-dock--type4 .fd-item:hover {background: rgba(255, 255, 255, .1); color: #fff; transform: translateY(-2px); box-shadow: none; border-color: transparent;}

/* 아이콘 컨테이너 + 아이템별 액센트 컬러 */
.floating-dock--type4 .fd-icon {width: 34px; height: 34px; font-size: 16px; border-radius: 10px; background: rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center;}
.floating-dock--type4 .fd-item--talk .fd-icon {color: #fde047; background: rgba(253, 224, 71, .14);}
.floating-dock--type4 .fd-item--card1 .fd-icon {color: #fbbf24; background: rgba(251, 191, 36, .14);}
.floating-dock--type4 .fd-item--card2 .fd-icon {color: #fb923c; background: rgba(251, 146, 60, .14);}
.floating-dock--type4 .fd-item--ask .fd-icon {color: #c084fc; background: rgba(192, 132, 252, .14);}
.floating-dock--type4 .fd-item--call .fd-icon {color: #4ade80; background: rgba(74, 222, 128, .14);}
.floating-dock--type4 .fd-label {font-size: 14px;}

/* TOP 버튼 — 화이트 라운드 */
.floating-dock--type4 .fd-top {flex: 0 0 auto; width: 40px; height: 40px; padding: 0; margin-left: 8px; gap: 0; border-radius: 50%; background: #fff; color: var(--c-text); display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, transform .2s ease;}
.floating-dock--type4 .fd-top:hover {background: var(--c-primary); color: #fff; transform: translateY(-2px);}
.floating-dock--type4 .fd-top .fd-icon {width: auto; height: auto; font-size: 16px; background: transparent; border-radius: 0;}
.floating-dock--type4 .fd-top .fd-label {display: none;}

/* 숨김 버튼 (메인 바 내 우측) */
.floating-dock--type4 .fd-hide {flex: 0 0 auto; width: 40px; height: 40px; margin-left: 6px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background .2s ease, color .2s ease;}
.floating-dock--type4 .fd-hide:hover {background: rgba(248, 113, 113, .35); color: #fff;}

/* 보이기 탭 (숨김 상태에서만 표시) */
.floating-dock--type4 .fd-show {position: absolute; right: 20px; bottom: 0; padding: 8px 16px; border: 0; border-radius: 12px 12px 0 0; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent, #5a35d1) 100%); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 -4px 14px rgba(0, 0, 0, .18); display: flex; align-items: center; gap: 6px; transform: translateY(100%); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.4, .14, .3, 1) .05s, opacity .25s ease;}
.floating-dock--type4 .fd-show i {font-size: 12px;}

/* Type 4 — 하단 바가 아래로 슬라이드(숨김)된 상태 + 스크롤 시, 보이기 탭 위에 TOP 원형 버튼 노출 */
.floating-dock--type4 .fd-scrolltop {position: fixed; right: 20px; bottom: 56px; width: 48px; height: 48px; min-width: 0; padding: 0; margin: 0; border-radius: 50%; background: #0f172a; color: #fff; border: 0; display: none; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); cursor: pointer; z-index: 3; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;}
.floating-dock--type4 .fd-scrolltop .fd-label {display: none;}
.floating-dock--type4 .fd-scrolltop:hover {background: var(--c-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(41, 98, 255, .45);}
.floating-dock--type4.is-hidden.is-scrolled .fd-scrolltop {display: flex;}

/* Type 4 — 하단 고정 바(높이 75px)가 푸터 하단 텍스트를 가리므로, 퀵바 type4가 있을 때만 푸터 하단에 바 높이만큼 여백 추가.
   모바일(≤767)은 .fd-inner가 display:none 이라 바가 없으므로 제외(TOP 버튼만 남음). 기존 푸터 padding-bottom 28px + 바 75px = 103px */
@media (min-width: 768px) {
	body:has(.floating-dock--type4) .site-footer {padding-bottom: 103px;}
}

/* 모바일 — type4 연락 바 숨김, TOP(맨위로) 원형 버튼만 (스크롤 시 노출) */
@media (max-width: 767px) {
	.floating-dock--type4 .fd-inner,
	.floating-dock--type4 .fd-show,
	.floating-dock--type4 .fd-wechat-popover {display: none;}
	.floating-dock--type4 .fd-scrolltop {right: 16px; bottom: 16px;}
	.floating-dock--type4.is-scrolled .fd-scrolltop {display: flex;}
}
.floating-dock--type4.is-hidden .fd-show {transform: translateY(0); opacity: 1; pointer-events: auto;}

/* ============================================================
   위쳇 QR 팝업 (퀵바 공통)
   ============================================================ */
/* .floating-dock {position: relative;} 제거 — 운영에서 fixed 고정 유지 (팝오버는 fixed 조상 기준으로 정상 배치됨) */
.fd-wechat-popover {position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: 200px; padding: 18px 16px 14px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2); z-index: 1000; border: 1px solid #e2e8f0;}
.fd-wechat-popover[hidden] {display: none;}
.fd-wechat-popover::after {content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left-color: #fff; filter: drop-shadow(2px 0 2px rgba(15, 23, 42, 0.08));}
.fd-wechat-close {position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0; background: none; border: 0; color: #94a3b8; font-size: 14px; cursor: pointer; transition: color .2s;}
.fd-wechat-close:hover {color: #0f172a;}
.fd-wechat-title {font-size: 14px; font-weight: 700; color: #1e293b; text-align: center; margin: 0 0 10px;}
.fd-wechat-qr {width: 150px; height: 150px; margin: 0 auto; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 80px; color: #475569;}
.fd-wechat-hint {margin: 8px 0 0; font-size: 13px; color: #64748b; text-align: center;}

@media (max-width: 768px) {
	.fd-wechat-popover {width: 170px;}
	.fd-wechat-qr {width: 130px; height: 130px; font-size: 64px;}
}

/* 1280 이하 전체 — 연락 퀵바 대신 TOP(맨위로) 원형 버튼만, 스크롤 후 자동 등장 (큰 데스크톱 ≥1281 만 퀵바 노출) */
@media (max-width: 1280px) {
	.floating-dock--type1 {right: 16px; bottom: 16px; gap: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s;}
	.floating-dock--type1.is-scrolled {opacity: 1; visibility: visible; transform: translateY(0);}
	.floating-dock--type1 .fd-stack {display: flex; width: auto; background: transparent; gap: 0;}
	.floating-dock--type1 .fd-stack > .fd-item {display: none;}
	.floating-dock--type1 .fd-show, .floating-dock--type1 .fd-hide {display: none;}
	.floating-dock--type1:not(.is-open).is-scrolled .fd-scrolltop {display: none;}
	.floating-dock--type1 .fd-row {display: block; height: auto;}
	.floating-dock--type1 .fd-row .fd-top {display: flex; width: 48px; height: 48px; min-width: 0; padding: 0; border-radius: 50%; justify-content: center;}
	.floating-dock--type1 .fd-top .fd-label {display: none;}
	.floating-dock--type1 .fd-top .fd-icon {width: auto; height: auto; flex: none;}
}

/* === 카카오톡 버튼 컬러 강조 === */
.fd-item--kakao .fd-icon {color: #ffe812;}
.floating-dock--type1 .fd-item--kakao .fd-icon,
.floating-dock--type2 .fd-item--kakao .fd-icon,
.floating-dock--type3 .fd-item--kakao .fd-icon,
.floating-dock--type4 .fd-item--kakao .fd-icon {color: #ffe812;}

/* === 위쳇 버튼 컬러 강조 === */
.fd-item--wechat .fd-icon {color: #07c160;}

/* === 카카오톡/위쳇 fd-item 기본 fa 아이콘 폰트 사이즈 === */
.fd-item--kakao .fd-icon i, .fd-item--wechat .fd-icon i {font-size: inherit;}

/* === [재설계] 위쳇 QR 팝업 — 첨부 이미지 스타일 === */
.fd-wechat-popover {width: 200px; padding: 28px 16px 16px; text-align: center;}
.fd-wechat-popover .fd-wechat-qr {width: 168px; height: 168px; margin: 0 auto 14px; background: #f1f5f9; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 80px; color: #475569;}
.fd-wechat-logo {width: 56px; height: 56px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #09b83e;}
.fd-wechat-hint {margin: 0; line-height: 1.5;}
.fd-wechat-hint strong {display: block; font-size: 15px; font-weight: 700; color: #1e293b;}
.fd-wechat-hint-em {display: block; font-size: 15px; font-weight: 700; color: #3b82f6; margin-top: 2px;}

/* === [수정] type4 위쳇 팝업 — 하단 가로띠 위쪽 우측에 배치 + 화살표 방향 변경 === */
.floating-dock--type4 .fd-wechat-popover {right: 20px; left: auto; bottom: calc(100% + 12px); top: auto; transform: none;}
.floating-dock--type4 .fd-wechat-popover::after {right: 24px; left: auto; top: auto; bottom: -8px; transform: none; border: 8px solid transparent; border-top-color: #fff; border-left-color: transparent; filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.08));}

/* === [수정] type4 위쳇 팝업 — 위쳇 버튼 위로 (JS가 left 동적 계산) === */
.floating-dock--type4 .fd-wechat-popover {right: auto; left: 0; bottom: calc(100% + 12px); top: auto; transform: none;}
.floating-dock--type4 .fd-wechat-popover::after {right: auto; left: var(--arrow-left, calc(50% - 8px)); top: auto; bottom: -8px; transform: none; border: 8px solid transparent; border-top-color: #fff; border-left-color: transparent;}

/* === [강화] 위쳇 팝업 닫기 버튼 — 우측 상단 정렬 강제 === */
.fd-wechat-popover > .fd-wechat-close {position: absolute; top: 8px; right: 8px; left: auto; bottom: auto; margin: 0; width: 24px; height: 24px; padding: 0; background: none; border: 0; color: #94a3b8; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2;}
.fd-wechat-popover > .fd-wechat-close:hover {color: #0f172a;}

/* === [수정] type4 — TOP + 닫기 두 버튼 우측 정렬 (다른 버튼은 가운데/좌측) === */
.floating-dock--type4 .fd-inner {justify-content: flex-start;}
.floating-dock--type4 .fd-inner .fd-top {margin-left: auto;}

/* === [수정] type4 — 일반 버튼 센터 정렬 + TOP/닫기는 우측 고정 === */
.floating-dock--type4 .fd-inner {position: relative; justify-content: center;}
.floating-dock--type4 .fd-inner .fd-top {position: absolute; top: 50%; right: 56px; transform: translateY(-50%); margin: 0;}
.floating-dock--type4 .fd-inner .fd-hide {position: absolute; top: 50%; right: 16px; transform: translateY(-50%); margin: 0;}