/* ★로그인 유도 모달 — 여기(wish_fx)에도 둠. 찜 하트가 있는 모든 페이지(shop·홈·사이드바·추천줄)가
   이 파일을 로드하므로, community_actions 를 안 부르는 페이지(shop.php·index.php)에서도 모달이 뜬다.
   community_actions 것과 겹쳐도 JS 가드(window.needLogin 이미 있으면 skip)로 안전. */
.nlog-back{position:fixed;inset:0;z-index:2147483000;background:rgba(40,26,10,.42);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s ease;-webkit-tap-highlight-color:transparent}
.nlog-back.on{opacity:1}
.nlog-card{width:100%;max-width:320px;background:#fff;border:1px solid #ffe0c2;border-radius:18px;box-shadow:0 12px 34px rgba(90,60,25,.28);padding:26px 22px 20px;text-align:center;transform:scale(.82);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.nlog-back.on .nlog-card{transform:scale(1)}
.nlog-ic{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:#fff3e0;display:flex;align-items:center;justify-content:center;color:#e8730c}
.nlog-ic svg{width:28px;height:28px}
.nlog-ttl{font-size:17px;font-weight:800;color:#5a402a;margin:0 0 5px}
.nlog-txt{font-size:13.5px;color:#9a7d54;line-height:1.5;margin:0 0 18px}
.nlog-btns{display:flex;flex-direction:column;gap:9px}
.nlog-go{display:block;padding:12px;border-radius:12px;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(160deg,#fb923c,#e8730c);box-shadow:0 3px 0 #c9610f;text-decoration:none}
.nlog-go:active{transform:translateY(2px);box-shadow:0 1px 0 #c9610f}
.nlog-close{background:none;border:none;color:#a89680;font-size:13px;cursor:pointer;font-family:inherit;padding:6px}
.shopcard-heart{position:absolute;font-size:14px;color:#ff5b73;pointer-events:none;opacity:0;z-index:6;will-change:transform,opacity}
/* ❤ 서리 후원 버튼 별 반짝 — 하트처럼 위로 올라오며 반짝(카테고리바·게임 공용) */
.donate-star{position:absolute;pointer-events:none;opacity:0;z-index:6;will-change:transform,opacity}
@keyframes donateStarRise{0%{transform:translateY(0) scale(.5);opacity:0}25%{opacity:.95}100%{transform:translateY(-34px) scale(1);opacity:0}}
/* translate(-50%,..) — left 를 하트 '중앙' 기준으로(끝에서도 카드 밖으로 안 삐짐) + 위로 --rise 만큼 */
@keyframes shopCardHeartRise{0%{transform:translate(-50%,0) scale(.5);opacity:0}25%{opacity:.95}100%{transform:translate(-50%,calc(var(--rise,40px) * -1)) scale(1.1);opacity:0}}

/* 찜 하트 — 쿠팡·에어비앤비 방식: ★속이 찬 하트 + 흰 테두리★ (흰 동그라미 없음)
   안 찜함 = 진한 회색 / 찜함 = 빨강. 글자는 양쪽 다 '❤'(속 찬 하트), 색으로만 구분.

   🔴🔴 색은 반드시 '불투명'으로 할 것 (반투명 금지) — 여기서 사고 남:
     흰 테두리는 text-shadow 라서 '하트 뒤'에 깔린다. 하트 색을 rgba(0,0,0,.42) 같은
     반투명으로 두면 뒤의 흰 테두리가 하트 속으로 비쳐서 **속이 빈 하트처럼 하얗게 뜬다**.
     (회장님이 껐을 때 이상하다고 지적한 게 이것 — 켰을 땐 빨강이 불투명이라 멀쩡했음)
   ※ 예전엔 안 찜함을 '♡'(속 빈 하트)로 했는데, 그건 그려지는 게 '가는 흰 선' 하나뿐이라
     번지는 검은 그림자에 선이 먹혀서 회색으로 죽어 보였음. 그래서 속을 채움.
   ※ 흰 테두리 = text-shadow 를 사방으로 여러 겹 깔아서 만듦(어떤 사진 위에서도 또렷). */
.wishbtn{
  --ring:#232323;                /* 테두리색 — 안 찜함=검정 / 찜함(.on)=흰색 */
  border:0; background:transparent; padding:0; cursor:pointer;
  line-height:1; font-size:19px;
  color:#fff;                    /* ★하트 속=흰색. 불투명이어야 함(반투명이면 뒤 테두리가 비침) */
  text-shadow:
    -2px 0 0 var(--ring),  2px 0 0 var(--ring),  0 -2px 0 var(--ring),  0 2px 0 var(--ring),
    -1.4px -1.4px 0 var(--ring), 1.4px -1.4px 0 var(--ring), -1.4px 1.4px 0 var(--ring), 1.4px 1.4px 0 var(--ring),
    -1px -2px 0 var(--ring), 1px -2px 0 var(--ring), -1px 2px 0 var(--ring), 1px 2px 0 var(--ring),
    0 2px 6px rgba(0,0,0,.4);    /* 테두리 바깥 옅은 그림자 — 배경과 안 붙게 */
  -webkit-tap-highlight-color:transparent;
  transition:color .16s;
  display:inline-flex; align-items:center; justify-content:center;
}
/* ★hover 시 '버튼'이 아니라 '안의 하트(SVG)만' 커짐 — 버튼(마우스 영역) 크기는 고정이라
   커진 하트가 마우스 밖으로 밀려 hover 가 풀렸다 걸렸다 하며 떨리던 문제 해결(추천상품처럼 작은 하트에서 심했음). */
.wishbtn svg{ transform-origin:center; display:block; transition:transform .15s ease; }
.wishbtn:hover svg{ transform:scale(1.15); }
.wishbtn:active svg{ transform:scale(.9); }
/* 찜하면 = 빨간 하트 + 흰 테두리 (테두리색만 바꾸면 위 text-shadow 가 통째로 따라옴) */
.wishbtn.on{ --ring:#fff; color:#ff2f45; }
.wishbtn:disabled{ opacity:.55; cursor:default; }

/* ★모바일에서 하트를 누르면 '상품 카드 전체'가 하늘색 반투명 박스로 번쩍이던 것 (회장님 지적).
   원인: 파랗게 칠하는 건 하트가 아니라 '하트를 감싼 상품 카드 <a>' 다.
         그래서 위 .wishbtn 의 -webkit-tap-highlight-color 만으로는 절대 안 없어진다.
   ※ 카드 <a> 는 7곳에 흩어져 있어 하나씩 못 고침 → :has() 로 '하트를 품은 링크'만 골라서 끔.
     하트를 눌러도 링크가 안 열리는 건 원래 JS(e.preventDefault)가 막고 있음 = 기능 변화 없음.
     카드의 '빈 곳'을 눌러 상품으로 가는 건 그대로 동작함(하이라이트 색만 안 뜸). */
a:has(.wishbtn){ -webkit-tap-highlight-color:transparent; }

/* 누를 때 톡 뛰는 느낌 */
.wishbtn.pop{ animation:wishbeat .36s ease-out; }
@keyframes wishbeat{
  0%{ transform:scale(1); } 35%{ transform:scale(1.38); }
  62%{ transform:scale(.92); } 100%{ transform:scale(1); }
}

/* 물방울처럼 퍼지는 작은 하트들
   ★화면 맨 위 레이어(position:fixed)에 그림 — 상품 카드가 overflow:hidden 이라
     버튼 안에 넣으면 하트가 카드 밖으로 못 나가고 잘림. */
.wishfx-layer{
  position:fixed; left:0; top:0; width:0; height:0;
  pointer-events:none; z-index:2147483000;
}
.wishfx{
  position:absolute; left:-5px; top:-5px; width:10px; height:10px;
  font-size:11px; line-height:10px; text-align:center; color:#ff3b4e;
  text-shadow:none; pointer-events:none; opacity:0;
  animation:wishpop .66s ease-out forwards; will-change:transform,opacity;
}
@keyframes wishpop{
  0%{ transform:translate(0,0) scale(.25); opacity:0; }
  22%{ opacity:1; }
  100%{ transform:translate(var(--dx), var(--dy)) scale(var(--sc)); opacity:0; }
}
/* 애니메이션 싫어하는 기기·설정은 존중(멀미 방지) */
@media (prefers-reduced-motion: reduce){
  .wishbtn, .wishbtn:hover, .wishbtn:active{ transition:none; transform:none; }
  .wishbtn.pop{ animation:none; }
  .wishfx{ display:none; }
}