/* ========== viewer-share.css — V2 공유 오버레이 (2026-05-23) ========== */
.vz-share-overlay { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; background: rgba(0, 0, 0, 0.8); z-index: 200; display: none; overflow-y: auto; }
.vz-share-overlay.is-open { display: block; }
.vz-share-orbit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; height: 350px; }
.vz-share-orbit-items { position: relative; width: 100%; height: 100%; }
.vz-share-orbit-item { position: absolute; width: 80px; height: 80px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; transform: translate(-50%, -80%) scale(0); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); border: 2px solid #fdf2f2; padding: 0; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.vz-share-orbit-items.is-animate .vz-share-orbit-item { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vz-share-orbit-item img { width: 40px; height: 40px; margin-bottom: 4px; transition: all 0.3s ease; pointer-events: none; }
.vz-share-orbit-label { font-size: 12px; color: #fff; font-weight: 700; text-align: center; line-height: 1; transition: all 0.3s ease; pointer-events: none; }
.vz-share-orbit-item--kakao { top: 10%; left: 50%; background-color: #FCE000; transition-delay: 0.1s; }
.vz-share-orbit-item--sms { top: 25%; left: 75%; background-color: #007BB6; transition-delay: 0.15s; }
.vz-share-orbit-item--email { top: 50%; left: 90%; background-color: #F36523; transition-delay: 0.2s; }
.vz-share-orbit-item--band { top: 75%; left: 75%; background-color: #30B87A; transition-delay: 0.25s; }
.vz-share-orbit-item--facebook { top: 90%; left: 50%; background-color: #324e97; transition-delay: 0.3s; }
.vz-share-orbit-item--blog { top: 75%; left: 25%; background-color: #33a936; transition-delay: 0.35s; }
.vz-share-orbit-item:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 202; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.vz-share-orbit-item:hover img { transform: scale(1.1) rotate(10deg); filter: brightness(1.2) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.vz-share-orbit-item:hover .vz-share-orbit-label { transform: translateY(-3px) scale(1.1); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); letter-spacing: 0.5px; }
.vz-share-orbit-item--kakao:hover { background: linear-gradient(135deg, #FFE066, #FFC107); border-color: #FFD700; }
.vz-share-orbit-item--sms:hover { background: linear-gradient(135deg, #42A5F5, #1976D2); border-color: #64B5F6; }
.vz-share-orbit-item--email:hover { background: linear-gradient(135deg, #FF8A65, #F4511E); border-color: #FF7043; }
.vz-share-orbit-item--band:hover { background: linear-gradient(135deg, #66BB6A, #2E7D32); border-color: #4CAF50; }
.vz-share-orbit-item--facebook:hover { background: linear-gradient(135deg, #5C6BC0, #303F9F); border-color: #3F51B5; }
.vz-share-orbit-item--blog:hover { background: linear-gradient(135deg, #81C784, #388E3C); border-color: #4CAF50; }
.vz-share-orbit-item:active { transform: translate(-50%, -50%) scale(1.05); transition: transform 0.1s ease; }
.vz-share-orbit-item.is-grayed { filter: grayscale(0.35); opacity: 0.85; }
.vz-share-url-box { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 300px; background: #fff; border-radius: 15px; padding: 20px; opacity: 0; transition: all 0.5s ease; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); z-index: 210; box-sizing: border-box; }
.vz-share-orbit-items.is-animate + .vz-share-url-box { opacity: 1; bottom: -180px; }
.vz-share-url-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; margin-bottom: 10px; box-sizing: border-box; color: #2c2c2c; background: #fff; }
.vz-share-url-copy { width: 100%; padding: 12px; background-color: #2291ff; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; font-family: inherit; font-weight: 600; transition: background-color 0.3s ease; }
.vz-share-url-copy:hover { background-color: #1a7ce8; }
.vz-share-close-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; color: #fff; transition: all 0.3s ease; z-index: 203; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); border: 3px solid #fff; padding: 0; }
.vz-share-close-btn:hover { background: linear-gradient(135deg, #5a67d8, #553c9a); transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6); }
.vz-share-close-btn:active { transform: translate(-50%, -50%) scale(0.95); }
.vz-share-close-btn i { transition: transform 0.2s ease; pointer-events: none; }
.vz-share-close-btn:hover i { transform: rotate(90deg); }
@media (max-width: 480px) {
  .vz-share-orbit { width: 280px; height: 280px; top: 35%; }
  .vz-share-orbit-item { width: 70px; height: 70px; }
  .vz-share-orbit-item img { width: 32px; height: 32px; }
  .vz-share-orbit-label { font-size: 9px; }
  .vz-share-url-box { width: 260px; padding: 15px; bottom: auto; top: 105%; }
  .vz-share-orbit-items.is-animate + .vz-share-url-box { bottom: auto; top: 105%; }
  .vz-share-close-btn { top: 35%; width: 55px; height: 55px; font-size: 22px; border-width: 2px; }
}
/* ========== viewer-share.css end ========== */