/* ==========================================================================
   cards — 게임 카드 한 벌 (whaley vendorcard · featurecard) + 실시간 베팅 표
   메인 · 카지노 · 슬롯 · 게임 화면이 함께 쓴다.
   ★ home.css 아래쪽(.vcard · .feed)을 그대로 옮겨 온 것 + 카지노용 덧붙임.
     home.css 의 같은 규칙은 이 파일을 index.html 에 걸고 나면 지워도 된다(값이 같다).
   근거: ../_분석/whaley/components-latest.css vendorcard · featurecard · feed
   ========================================================================== */

/* ---- 카드 공통 (home.css 에서 옮김) -------------------------------------- */
/* 들린 카드와 그림자가 잘리지 않게 위아래 여유 — 같은 만큼 바깥 여백을 빼 자리는 그대로 */
.rail--vendor .rail__track{ padding-block:10px 18px; margin-block:-10px -18px; }

.vcard{
  position:relative; display:block; aspect-ratio:3 / 4; overflow:hidden; border-radius:var(--r);
  background:var(--surface-2) center top / cover no-repeat;
  transition:transform .2s ease, box-shadow .2s ease;
}
.vcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgb(var(--vc-tint)) 0%, rgba(var(--vc-tint),.95) 10%, rgba(var(--vc-tint),.82) 20%,
    rgba(var(--vc-tint),.58) 32%, rgba(var(--vc-tint),.30) 45%, rgba(var(--vc-tint),0) 60%);
}
.vcard:hover{ transform:translateY(-6px); box-shadow:0 14px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10); }
.vcard:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }
@media (hover:none), (prefers-reduced-motion:reduce){ .vcard{ transition:none; } .vcard:hover{ transform:none; box-shadow:none; } }

.vcard__badge{
  position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:4px 8px; border-radius:var(--r); font-size:12px; font-weight:700; letter-spacing:.04em;
}
.vcard__badge--best{ background:var(--accent); color:var(--accent-ink); }

.vcard__art{ position:absolute; inset:0; z-index:1; display:grid; align-content:end; justify-items:center; gap:6px; padding:18px 10px; text-align:center; }
.vcard__logo{ width:auto; height:auto; max-width:78%; max-height:46px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.vcard__logo--fill{ max-width:86%; max-height:64px; }

/* 슬롯 — 그림은 위 75% 만(원본 300×400 을 1배로 써 선명), 아래는 띠 색 면 */
.vcard--slot{ background-color:rgb(var(--vc-tint)); }
.vcard__img{
  position:absolute; top:0; left:0; width:100%; height:75%; object-fit:cover; object-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent); mask-image:linear-gradient(to bottom,#000 86%,transparent);
}
.vcard--slot .vcard__art{ padding:12px 8px 10px; }
.vcard__name{
  width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:var(--fs-lg); font-weight:900; line-height:1.15; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.vcard__vendor{ font-size:11px; font-weight:600; line-height:1.2; color:rgba(255,255,255,.82); text-shadow:0 1px 3px rgba(0,0,0,.35); }


/* LIVE 알약 — 빨간 바탕 · 흰 글자 · 연분홍 점(깜빡임). home.css .live__tag 와 같은 값 */
.vcard__badge.vcard__badge--live{
  flex:none; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 11px 0 9px;
  border-radius:var(--r-full); background:var(--live); color:#fff;
  font-size:12px; font-weight:900; letter-spacing:.06em; line-height:1;
  box-shadow:0 2px 10px rgba(215,55,75,.35);
}
.vcard__badge--live i{ width:7px; height:7px; border-radius:50%; background:#ffc2cb; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }

/* ---- 실시간 베팅 표 ------------------------------------------------------ */
.feed{ margin-top:var(--gap-2xl); overflow-anchor:none; }   /* 새 줄이 들어올 때 브라우저가 스크롤을 따라 내리지 않게 */
.feed__tabs{ display:flex; margin-bottom:var(--gap-sm); }
.feed__tab{
  height:48px; padding:0 24px; font-size:var(--fs-sm); font-weight:500; color:var(--text-sub);
  border-bottom:2px solid transparent; transition:color var(--t-fast), border-color var(--t-fast);
}
.feed__tab:hover{ color:var(--text); }
.feed__tab.is-active{ color:var(--text); font-weight:700; border-bottom-color:var(--accent-line); }
/* 아래로 갈수록 흐려진다 — 더 있다는 신호 */
.feed__scroll{
  max-height:420px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 78%,transparent); mask-image:linear-gradient(#000 78%,transparent);
}
.feed__table{ font-size:12px; font-variant-numeric:tabular-nums; }
.feed__table thead{ position:relative; z-index:2; }
.feed__table thead tr{ background:var(--surface-2); }
.feed__table th{ height:48px; padding:0; font-size:var(--fs-sm); font-weight:700; text-align:left; white-space:nowrap; }
.feed__table th:first-child{ border-radius:var(--r) 0 0 var(--r); }
.feed__table th:last-child{ border-radius:0 var(--r) var(--r) 0; }
.feed__table :is(th, td):first-child{ padding-left:28px; }
.feed__table :is(th, td):last-child{ padding-right:28px; }
.feed__table td{ height:46px; font-weight:500; white-space:nowrap; }
.feed__table .num{ text-align:right; }
.feed__table .mid{ text-align:center; }
.feed__table .t-dim{ color:var(--text-mute); }
.feed__table .t-win{ color:var(--success); font-weight:700; }
.feed__table tr.is-new td{ animation:feedNew 1.6s ease-out; }
@keyframes feedNew{ from{ background:color-mix(in srgb, var(--accent) 10%, transparent); } }
.feed__game{ display:flex; align-items:center; gap:12px; }
.feed__thumb{ width:40px; height:40px; flex:none; border-radius:var(--r); object-fit:cover; object-position:center top; background:var(--surface-2); }
.feed__user{ display:flex; align-items:center; gap:10px; }
.feed__user .is-hidden{ color:var(--text-mute); }
.feed__avatar{ width:24px; height:24px; flex:none; border-radius:var(--r-full); background:linear-gradient(140deg,color-mix(in srgb, var(--text-sub) 30%, #fff),color-mix(in srgb, var(--text-sub) 85%, var(--line-strong))); }
.feed__coin{
  display:inline-grid; place-items:center; width:20px; height:20px; margin-left:8px; vertical-align:middle;
  border-radius:var(--r-full); background:var(--c); color:#fff; font-size:11px; font-weight:900;
}
.feed__table td.feed__empty{ height:240px; text-align:center; vertical-align:middle; font-size:var(--fs-sm); color:var(--text-sub); }

/* ==========================================================================
   카지노 덧붙임 — 게임 카드(.fcard) : 링크 · ♡ · NEW · 대체 그림 · 라이브 테이블
   ========================================================================== */
:root{
  --fcard-fav: 32px;          /* ♡ 단추 (whaley 32×32) */
  --fcard-new: #1fb46a;       /* NEW 배지 — 초록 "새로 왔다". --success(#19d600)는 너무 형광이라 한 톤 누름 */
}
/* 카드 전체가 링크다. a 안에 button 을 넣을 수 없어 링크를 카드 위에 펼쳐 깔고 ♡ 만 그 위로 올린다 */
.fcard__link{ position:absolute; inset:0; z-index:3; border-radius:inherit; }
.fcard__link:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }
.fcard:has(.fcard__link:focus-visible){ transform:translateY(-6px); }
.fcard .vcard__art{ z-index:2; pointer-events:none; }
.fcard .vcard__badge{ z-index:4; }

.fcard__fav{
  position:absolute; top:6px; right:6px; z-index:4;
  display:grid; place-items:center; width:var(--fcard-fav); height:var(--fcard-fav);
  border-radius:var(--r-full); background:color-mix(in srgb, var(--bg-deep) 55%, transparent); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.fcard__fav svg{ width:18px; height:18px; }
.fcard__fav:hover{ background:color-mix(in srgb, var(--bg-deep) 80%, transparent); }
/* 담은 게임은 늘 보인다 · 호버/초점 때만 빈 ♡ 가 나타난다 — 카드 그림을 덜 가린다 */
.fcard:hover .fcard__fav, .fcard:focus-within .fcard__fav, .fcard__fav[aria-pressed="true"]{ opacity:1; }
.fcard__fav[aria-pressed="true"]{ color:var(--danger); }
.fcard__fav[aria-pressed="true"] svg{ fill:currentColor; }
@media (hover:none){ .fcard__fav{ opacity:1; } }

.vcard__badge--new{ background:var(--fcard-new); color:#fff; }
/* 배지 두 겹 — 안쪽 흰 실선은 어두운 그림 위에서, 바깥 그림자는 밝은 그림 위에서 일한다 (whaley) */
.fcard .vcard__badge--best, .fcard .vcard__badge--new{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.42); }

/* 그림이 없는 게임 — 게임사 색 바탕에 머리글자 (그림 자리 75% 를 똑같이 채운다) */
.fcard__ph{
  position:absolute; top:0; left:0; width:100%; height:75%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.16), transparent 60%);
  font-family:var(--font-display); font-size:64px; font-weight:800; color:rgba(255,255,255,.28);
}
/* 띠 색이 정해지면 부드럽게 바뀐다 (그림을 읽은 뒤 색이 바뀌는 순간이 튀지 않게) */
.vcard--slot{ transition:transform .2s ease, box-shadow .2s ease, background-color var(--t); }

/* 라이브 테이블 — 딜러 사진 전체 + 게임사 색 띠. 이름 아래 베팅 한도 */
.fcard--live{ background-size:cover; background-position:center top; }
.fcard--live .vcard__art{ padding:12px 8px 10px; gap:4px; }
.fcard__limit{ font-size:11px; font-weight:700; color:var(--accent-fg); font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* 휴대폰 — 실시간 표는 게임 · 배율 · 지급금만 (home.css 와 같다) */
@media (max-width:1023px){
  .feed__tab{ padding:0 14px; height:42px; }
  .feed__table :is(th, td):nth-child(2), .feed__table :is(th, td):nth-child(3), .feed__table :is(th, td):nth-child(4){ display:none; }
  .feed__table :is(th, td):first-child{ padding-left:12px; }
  .feed__table :is(th, td):last-child{ padding-right:12px; }
  .feed__table td:first-child{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  .feed__thumb{ width:32px; height:32px; }
}

/* 태블릿 세로 — 실시간 표는 칸을 다 보인다 */
@media (min-width:600px) and (max-width:1023px){
  .feed__table :is(th, td):nth-child(2), .feed__table :is(th, td):nth-child(3), .feed__table :is(th, td):nth-child(4){ display:table-cell; }
}

/* 휴대폰 — 게임 카드가 작아지므로 글 · 로고도 줄인다 */
@media (max-width:1023px){
  .vcard__badge{ top:5px; left:5px; height:20px; padding:2px 6px; font-size:10px; }
  .vcard__art{ padding:10px 6px; gap:2px; }
  .vcard__logo{ max-height:30px; }
  .vcard__logo--fill{ max-height:40px; }
  .vcard__name{ font-size:12px; }
  .vcard__vendor{ font-size:10px; }
}
@media (max-width:1023px){
  .feed{ margin-top:var(--gap-xl); }
  .feed__table th{ height:36px; font-size:12px; }
  .feed__table td{ height:38px; }
  .feed__scroll{ max-height:300px; }
}