/* ========================================================================== wpflow SNS 공유 버튼 (본문 끝) ========================================================================== */ .wf-share { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 48px 0 8px; padding: 28px 16px; border-top: 1px solid var(--wp-line, #eff0f2); border-bottom: 1px solid var(--wp-line, #eff0f2); } .wf-share-label { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--wp-light-muted, #8b95a1); } .wf-share-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* 아이콘 색은 !important — 테마의 a/a:hover/a:visited 링크색이 svg의 currentColor를 덮어써 아이콘이 파랗게 물드는 문제 방지(테마 불문 동작). */ .wf-share-btn, .wf-share-btn:hover, .wf-share-btn:focus, .wf-share-btn:visited { color: #fff !important; } .wf-share-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: #6b7684; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; -webkit-tap-highlight-color: transparent; } .wf-share-btn svg { width: 21px; height: 21px; display: block; } .wf-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16); filter: brightness(1.05); } .wf-share-btn:focus-visible { outline: 2px solid var(--wp-accent, #3182f6); outline-offset: 2px; } .wf-share-btn:active { transform: translateY(0); } /* 브랜드 색 */ .wf-share-native { background: var(--wp-accent, #3182f6); display: none; /* navigator.share 지원 시 JS가 표시 */ } .wf-share-kakao, .wf-share-kakao:hover, .wf-share-kakao:focus, .wf-share-kakao:visited { color: #191919 !important; } .wf-share-kakao { background: #fee500; } .wf-share-naver { background: #03c75a; } /* 밴드 — 공식 앱 아이콘처럼 흰 바탕에 초록 라인 'b' */ .wf-share-band, .wf-share-band:hover, .wf-share-band:focus, .wf-share-band:visited { color: #41b64a !important; } .wf-share-band { background: #ffffff; border: 1px solid #e2e5e9; } .wf-share-x { background: #0f1419; } .wf-share-facebook { background: #1877f2; } .wf-share-copy { background: #6b7684; } /* 링크 복사 토스트 */ .wf-share-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 8px); z-index: 9999; padding: 11px 20px; border-radius: 999px; background: rgba(25, 31, 40, 0.92); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .wf-share-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* 다크모드 — WPFlow 테마는 로 전환 */ html[scheme="dark"] .wf-share { border-color: rgba(255, 255, 255, 0.12); } html[scheme="dark"] .wf-share-label { color: rgba(255, 255, 255, 0.55); } html[scheme="dark"] .wf-share-x { background: #2f3336; } html[scheme="dark"] .wf-share-band { border-color: transparent; } html[scheme="dark"] .wf-share-btn:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); } html[scheme="dark"] .wf-share-toast { background: rgba(255, 255, 255, 0.92); color: #191f28; }