@charset "utf-8";
/* =====================================================================
   쇼핑몰 주변 (손님 화면) · pages/community.css   (2026-10-29 JR-TCG 에서 옮김 — 담당: 쇼핑몰 주변)
   불러오는 곳: 상품 목록 · 상품 상세 · 마이 홈 · 찜한 상품 (head 블록)
   - .wish · .wish__btn      찜 하트 (상품 카드 = 사진 칸 오른쪽 아래 둥근 단추 · 상세 = 장바구니 왼쪽 네모 단추 · 폰 하단 바)
                             꺼짐 = 흰 줄 하트 / 켜짐 = 금색 꽉 찬 하트 + 금빛 테두리 (빨강은 LIVE 에만 쓰므로 하트도 금색)
   - .mywish                 찜 목록 (하트를 끄면 카드가 흐려진다 — 다시 누르면 되살림)
   - .mygrade                마이 홈 '내 등급' 한 줄 (등급 = 카드 희귀도 이름 · services/crm.py)
   색은 tokens.css 의미 토큰만.
   ===================================================================== */

/* ---- 찜 하트 ---- */
.wish{margin:0}
.wish__btn .ico{width:20px;height:20px}
.wish__btn.is-on{color:var(--gold-hi)}
.wish__btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* 상품 카드: 사진 칸 오른쪽 위 (사진 칸 비율이 화면마다 달라서 위쪽에 고정 — 오른쪽 위 순위 배지는 하트 왼쪽으로 비킨다)
   누르는 칸 44px · 보이는 동그라미 34px(::before) */
.pcard__wish{position:absolute;z-index:2;right:1px;top:1px}
.pcard__wish .wish__btn,a.pcard__wish{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pcard__wish .wish__btn{position:relative;z-index:0}
.pcard__wish .wish__btn::before,a.pcard__wish::before{content:"";position:absolute;inset:5px;z-index:-1;border-radius:50%;
  background:rgba(10,10,10,.66);border:1px solid var(--gold-line-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform var(--t-fast),border-color var(--t-fast),background-color var(--t-fast)}
.pcard__wish .wish__btn .ico,a.pcard__wish .ico{width:18px;height:18px}
.pcard__wish .wish__btn:hover::before,a.pcard__wish:hover::before{border-color:var(--gold);background:rgba(10,10,10,.85)}
.pcard__wish .wish__btn:active::before,a.pcard__wish:active::before{transform:scale(.9)}
.pcard__wish .wish__btn.is-on::before{border-color:var(--gold-line)}
.pcard:has(>.pcard__wish) .pcard__rank{right:46px}
@media (min-width:900px){.pcard__wish{right:3px;top:3px}.pcard:has(>.pcard__wish) .pcard__rank{right:50px}}

/* 상품 상세: [♡][장바구니][바로 구매] — 하트는 금 테두리 네모 (PC 본문 · 폰 하단 바) */
.pdp .pd__btns .pd__wish,.pd-bar .btn.pd-bar__wish{padding:0;gap:0;justify-content:center}
.pdp .pd__btns .pd__wish .ico,.pd-bar .pd-bar__wish .ico{flex:none;width:20px;height:20px}
.pdp .pd__wish.is-on,.pd-bar .pd-bar__wish.is-on{color:var(--gold-hi);border-color:var(--gold-hi);background:var(--gold-wash)}
.pdp .pd__wish.is-on .ico,.pd-bar .pd-bar__wish.is-on .ico{color:var(--gold-hi)}
.pd-bar:has(.pd-bar__wish){grid-template-columns:50px minmax(0,1fr) minmax(0,1fr)}
.pd-bar .pd-bar__wish{width:50px}
.pd-wishf{display:none}
@media (min-width:900px){
  .pdp .pd__btns--wish{grid-template-columns:44px repeat(2,minmax(150px,170px))}
  .pdp .pd__wish{width:44px}
}
@media (min-width:900px) and (max-width:1199px){.pdp .pd__btns--wish{grid-template-columns:44px repeat(2,minmax(0,1fr))}}

/* ---- 찜 목록 ---- */
.mywish>li{transition:opacity var(--t)}
.mywish>li.is-unwished{opacity:.45}
.mywish>li.is-unwished .pcard__link{filter:grayscale(.6)}
.my--wishes .mywish{margin-top:16px}

/* ---- 마이 홈 '내 등급' ---- */
.mygrade{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--gold-line-2);font-size:13px;line-height:1.45;color:var(--text-2)}
.mygrade__b{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:var(--r-pill);font-weight:700;
  color:var(--gold-hi);border:1px solid var(--gold-line);background:var(--gold-wash);white-space:nowrap}
.mygrade__b .ico{color:var(--gold)}
.mygrade__t b{font-weight:700;color:var(--text)}
.mygrade--sec .mygrade__b,.mygrade--sr .mygrade__b{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.mygrade--sec .mygrade__b .ico,.mygrade--sr .mygrade__b .ico{color:var(--on-gold)}