/* ==========================================================================
   (주)투어수다 - 하트(찜) 버튼·안내 (js/suda_zzim.js, extend/suda_zzim.lib.extend.php). SUDA CUSTOM (2026-10-24), 신규 파일.
   ========================================================================== */

.suda-zzim-btn{ cursor: pointer; }
.suda-zzim-btn svg{ fill: none; transition: transform .15s ease; }
.suda-zzim-btn.is-on{ color: var(--suda-red) !important; }
.suda-zzim-btn.is-on svg{ fill: currentColor; }
.suda-zzim-btn:active svg{ transform: scale(.85); }

/* 상품 카드 하트 (기존 .suda-product-cart 모양 그대로) */
.suda-product-cart.suda-zzim-btn:hover{ background: rgba(251,44,54,.08); color: var(--suda-red); }

/* 상품 상세: 제목 옆 하트(숫자) / 예약 버튼 옆 하트 - 장바구니 버튼이 빠진 자리는 예약하기가 채운다 */
#btn_wish.suda-zzim-btn{ display: inline-flex; align-items: center; gap: 2px; width: auto; height: 25px; padding: 0; border: 0; background: none; font-size: 22px; color: #4b5259; }
#btn_wish.suda-zzim-btn .suda-zzim-count{ position: static; font-size: 12px; font-weight: 700; color: inherit; }
#sit_ov_btn .sit_btn_buy{ width: calc(100% - 75px); }
#sit_ov_btn .sit_btn_wish.suda-zzim-btn{ display: inline-flex; align-items: center; justify-content: center; width: 65px; margin-right: 0; padding: 0; background: #fff; font-size: 24px; line-height: 1; }
#sit_ov_btn .sit_btn_wish.suda-zzim-btn:hover{ color: var(--suda-red); }

/* 상단바·오른쪽 아이콘 찜 개수 */
.suda-icon-btn .suda-zzim-total{ position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--suda-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

/* 화면 아래 짧은 안내 */
.suda-zzim-toast{ position: fixed; left: 50%; bottom: 40px; z-index: 10000; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px; background: rgba(17,24,39,.92); color: #fff; font-size: 14px; font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
.suda-zzim-toast.is-show{ opacity: 1; transform: translate(-50%, 0); }

@media screen and (max-width:1024px){
    #btn_wish.suda-zzim-btn{ height: 2.44vw; font-size: 2.15vw; }
    #btn_wish.suda-zzim-btn .suda-zzim-count{ font-size: 1.17vw; }
    #sit_ov_btn .sit_btn_buy{ width: calc(100% - 7.32vw); }
    #sit_ov_btn .sit_btn_wish.suda-zzim-btn{ width: 6.35vw; font-size: 2.34vw; }
    .suda-zzim-toast{ bottom: 3.91vw; padding: 1.17vw 1.95vw; font-size: 1.37vw; }
}
@media screen and (max-width:768px){
    #btn_wish.suda-zzim-btn{ height: 3.26vw; font-size: 2.86vw; }
    #btn_wish.suda-zzim-btn .suda-zzim-count{ font-size: 1.56vw; }
    #sit_ov_btn .sit_btn_buy{ width: calc(100% - 9.77vw); }
    #sit_ov_btn .sit_btn_wish.suda-zzim-btn{ width: 8.46vw; font-size: 3.13vw; }
    .suda-zzim-toast{ bottom: 5.21vw; padding: 1.56vw 2.6vw; font-size: 1.82vw; }
}
@media screen and (max-width:480px){
    #btn_wish.suda-zzim-btn{ height: 5.21vw; font-size: 4.58vw; }
    #btn_wish.suda-zzim-btn .suda-zzim-count{ font-size: 2.5vw; }
    #sit_ov_btn .sit_btn_buy{ width: calc(100% - 15.63vw); }
    #sit_ov_btn .sit_btn_wish.suda-zzim-btn{ width: 13.54vw; font-size: 5vw; }
    .suda-zzim-toast{ bottom: 20vw; padding: 2.5vw 4.17vw; font-size: 2.92vw; }
}