/* ==========================================================================
   components — 여러 화면에서 되풀이 쓰는 부품
   근거: ../05-컴포넌트/ · ../04-페이지/
   ========================================================================== */

/* ---- 코인 심볼 ---- */
/*
  ⚠ line-height 를 <1 로 못 박는다>. 기본값(normal)이면 글자 칸이 글꼴이 정한 만큼
    (대략 1.2배) 커지고, 그 칸 안에서 글자는 baseline 에 앉는다 —
    place-items:center 는 <칸>을 가운데 두지만 칸 안의 글자는 여전히 아래로 쏠린다.
    지름 16px 에 글자 8px 처럼 작은 자리일수록 그 어긋남이 눈에 띈다
    (레드 2026-09-16 「슬롯 실행 페이지 아이콘 밑으로 쏠림」).
*/
.coinmark{
  display:inline-grid; place-items:center; flex:none;
  border-radius:var(--r-full);
  background:var(--c,#444); color:#fff; font-weight:900;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ---- 버튼 --------------------------------------------------------------
   루벳은 버튼에 테두리를 쓰지 않는다. 배경색 차이로만 구분한다.
   ------------------------------------------------------------------------ */
.btn{
  height:40px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r);
  background:var(--surface-2); color:var(--text);
  font-size:var(--fs-sm); font-weight:700;
  transition:background var(--t-bg);
}
.btn:hover{ background:var(--surface-3); }
.btn--sm{ height:32px; padding:0 12px; }

/* ---- 돈이 <어느 쪽으로> 가는가 (레드 2026-09-15) ------------------------
   ★ 들어오는 돈이 초록, 나가는 돈이 빨강. 글자를 읽기 전에 손이 먼저 안다.
   ★ 면을 칠하지 않고 <테두리와 글자>에만 색을 준다. 헤더 지갑 메뉴에서
     두 단추가 나란히 서는데 둘 다 꽉 찬 면이면 줄이 신호등이 된다.
   ⚠ .btn--gold 는 #walletModal 안에서만 정의돼 있어 이 자리에서는 아무
     색도 안 입었다 — 「금색 입금 단추」는 화면에 없던 것이다. */
.btn--in{
  background:color-mix(in srgb, var(--success) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--success) 55%, transparent);
  color:var(--success);
}
.btn--in:hover{
  background:color-mix(in srgb, var(--success) 26%, transparent);
  border-color:var(--success);
}
.btn--out{
  background:color-mix(in srgb, var(--danger) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  color:var(--danger);
}
.btn--out:hover{
  background:color-mix(in srgb, var(--danger) 26%, transparent);
  border-color:var(--danger);
}
.btn--lg{ height:44px; padding:0 18px; border-radius:var(--r-lg); }
.btn--primary{ background:var(--primary); }
.btn--primary:hover{ background:#2A63C4; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---- 칩 (카테고리 탭) ---- */
.chip{
  height:36px; padding:0 16px; flex:none;
  display:inline-flex; align-items:center; gap:4px;
  border-radius:var(--r-tab);
  background:var(--surface-1); color:var(--text);
  font-size:var(--fs-sm); font-weight:700;
  transition:background var(--t-bg);
}
.chip:hover{ background:var(--surface-2); }
.chip.is-active{ background:var(--primary); }
.chip svg{ width:20px; height:20px; }
.chip-row{ display:flex; gap:8px; }

/* ---- 섹션 제목 줄 ---- */
/* ★ 제목과 내용 사이 (레드 2026-09-15 「너무붙었다 · 조금 띄우자」).
     모바일에서 --gap-card 가 8px 이라 24px 짜리 제목 바로 밑에 카드가 붙었다.
     제목은 <덩이의 머리>지 목록의 첫 줄이 아니다 — 숨 쉴 자리를 준다. */
.sec{ display:flex; flex-direction:column; gap:var(--gap-card); }
@media (max-width:1024px){
  .sec{ gap:12px; }
}
.sec__head{
  display:flex; align-items:center; gap:8px;
  min-height:40px;
}
.sec__title{
  font-size:var(--fs-sec); font-weight:700; line-height:1.28;
  margin-right:auto;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
/* 좌우 화살표 — 두 개가 붙어 하나의 알약처럼 보인다 */
.sec__navs{ display:flex; gap:2px; flex:none; }
.sec__nav{
  width:40px; height:40px;
  display:grid; place-items:center;
  background:var(--surface-2); color:var(--text);
  transition:background var(--t-bg);
}
.sec__nav:first-child{ border-radius:var(--r) 0 0 var(--r); }
.sec__nav:last-child { border-radius:0 var(--r) var(--r) 0; }
.sec__nav[disabled]{ background:var(--surface-1); color:var(--text-6); opacity:1; }
@media (max-width:1024px){
  .sec__navs{ display:none; }             /* 모바일은 손가락으로 민다 */
  .sec__head .btn{ height:32px; }
}

/* ---- 게임 카드 ---------------------------------------------------------
   PC 7열 · 모바일 3열. 폭은 그리드가 정하고 비율만 3:4 로 고정한다.
   ------------------------------------------------------------------------ */
.game-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:var(--gap-card);
}
.gamecard{
  position:relative;
  aspect-ratio:3 / 4;
  border-radius:var(--r);
  overflow:clip;
  background:var(--surface-2) center/cover no-repeat;
  display:block;
}
/* 호버 — 흰 테두리만. 확대도 그림자도 없다 */
.gamecard:hover{ outline:2px solid var(--text); }
.gamecard__art{
  position:absolute; inset:0;
  display:grid; align-content:end; justify-items:center; gap:2px;
  padding:12px 8px;
  text-align:center;
}
.gamecard__name{ font-size:var(--fs-base); font-weight:900; line-height:1.1; }
.gamecard__vendor{ font-size:9px; font-weight:700; color:rgba(255,255,255,.72); letter-spacing:.06em; }

.gamecard__badge{
  position:absolute; top:8px; left:8px;
  height:24px; padding:4px 8px;
  display:inline-flex; align-items:center;
  border-radius:var(--r-chip);
  font-size:var(--fs-sm); font-weight:700;
}
.gamecard__badge--new  { background:var(--success); color:var(--text-on-cta); }
.gamecard__badge--excl { background:var(--cta);     color:var(--text-on-cta); }
.gamecard__badge--early{ background:var(--primary); color:#fff; }

/* ---- 라이브 게임사 카드 (레드 2026-09-11) ------------------------------
   바탕은 딜러 사진, 아래에 게임사 이름을 <글자로> 얹는다(루벳 Originals 처럼).
   ★ 아래 60% 까지 <색이 올라온다> (레드 2026-09-11 「그라데이션을 밑에서 이미지 높이
     60%까지」 — 슬롯 카드 참고 이미지의 투명도 느낌). 맨 아래는 거의 색 면, 위로 갈수록
     <완만하게> 비쳐 사진과 섞인다. 끊기는 층이 보이지 않게 여섯 단으로 푼다 —
     아래는 짧게 진하고, 위로 올라가는 꼬리를 길게 둔다.
     색은 사파이어 계열(#1C48A0) — 참고 이미지처럼 <색으로> 읽히되 사진의 파랑과 한 벌이다.
   ★ 배지·이름이 색막 위로 올라와야 해서 z-index 를 준다.
   ------------------------------------------------------------------------ */
.vendorcard{ background-position:center top; --vc-tint:28,72,160; }   /* #1C48A0 */
.vendorcard::after{
  content:""; position:absolute; inset:0;
  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%);
  pointer-events:none;
}
.vendorcard .gamecard__badge{ z-index:2; }
/* 사진 색으로 띠를 맞춘다 (레드 2026-09-11 「해당 이미지들 색감으로 하단에 그라데이션 색 맞춰줄래」)
   — 색은 HomePage LiveVendorCard 가 사진 아래쪽에서 뽑아 --vc-tint 로 준다.
   ★ 뽑기 전엔 띠를 숨긴다. 기본 사파이어가 먼저 비쳤다 바뀌면 깜빡여 보인다. */
.vendorcard--art::after{ opacity:0; transition:opacity .25s ease; }
.vendorcard--art.is-ready::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .vendorcard--art::after{ transition:none; } }

/* 호버 — 카드가 <살짝 들린다> (레드 2026-09-11 「카드가 살짝 들리는 느낌」)
   ★ 게임 카드의 흰 테두리 호버 대신 쓴다 — 들림과 테두리가 겹치면 무겁다.
     키보드로 올 때는 테두리를 그대로 보여 준다(focus-visible).
   ★ 레일이 가로 스크롤이라 세로로 넘친 것을 자른다(overflow-y:hidden). 들린 카드 윗부분과
     그림자가 잘리지 않게 vendor-rail 에 위아래 여유를 주고, 같은 만큼 바깥 여백을 빼 자리는 그대로 둔다.
   ★ 손가락 기기에서는 호버가 눌린 채로 남으니 들지 않는다. 움직임 줄인 기기도 마찬가지. */
.vendor-rail{ padding-block:10px 18px; margin-block:-10px -18px; }
.vendorcard{ transition:transform .2s ease, box-shadow .2s ease; }
.vendorcard:hover{
  outline:none;
  transform:translateY(-6px);
  box-shadow:0 14px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10);
}
.vendorcard:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }
@media (hover:none), (prefers-reduced-motion:reduce){
  .vendorcard{ transition:none; }
  .vendorcard:hover{ transform:none; box-shadow:none; }
}

/* 빨간 LIVE + 깜빡이는 점 (레드 2026-09-11 「LIVE마크 레드계열 · on아이콘 깜빡이게」)
   ★ 이 카드에만 쓴다 — 다른 LIVE 배지(게임 목록)는 그대로 사파이어다.
   ★ 움직임을 줄인 기기(prefers-reduced-motion)에서는 깜빡이지 않고 켜진 채로 둔다. */
.vendorcard__live{
  gap:5px;
  background:#E11D3F; color:#fff;
  letter-spacing:.04em;
  box-shadow:0 2px 8px rgba(225,29,63,.35);
}
.vendorcard__dot{
  width:7px; height:7px; border-radius:50%;
  background:#fff;
  animation:vc-live-blink 1.1s ease-in-out infinite;
}
@keyframes vc-live-blink{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%     { opacity:.15; transform:scale(.8); }
}
@media (prefers-reduced-motion:reduce){
  .vendorcard__dot{ animation:none; }
}

.vendorcard__art{
  position:absolute; inset:0; z-index:1;
  display:grid; align-content:end; justify-items:center;
  padding:18px 10px;   /* 참고 이미지처럼 이름을 색 띠 안쪽으로 조금 올린다 */
  text-align:center;
}
.vendorcard__name{
  font-size:var(--fs-lg); font-weight:900; line-height:1.15;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35);
  word-break:keep-all; overflow-wrap:anywhere;   /* 「프라그마틱 플레이 라이브」가 낱말째 줄바꿈되게 */
}
@media (max-width:768px){
  .vendorcard__name{ font-size:var(--fs-base); }
  .vendorcard__art{ padding:10px 6px; }
}
/* 게임사 로고 — 이름 글자 자리에 얹는다 (레드 2026-09-11 「글자부분 각 게임사 로고로」, 에볼루션·프라그마틱 먼저).
   ★ 로고마다 가로세로비가 달라(에볼루션 3.1 · 프라그마틱 2.2 왕관 포함) 폭과 높이를 둘 다 묶는다 —
     넓은 것은 폭에, 높은 것은 높이에 걸린다. 띠 색 위에서 가장자리가 서게 그림자를 조금 준다. */
.vendorcard__logo{
  display:block; width:auto; height:auto;
  max-width:78%; max-height:46px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
/* 꽉 채우기 — 위로 솟은 로고(프라그마틱 왕관, 가로세로비 2.2)는 높이 한도에 먼저 걸려 작아진다.
   폭 86% 까지 가도록 높이 한도를 푼다 (레드 「프라그마틱만 로고가 좀 작은데 꽉차게 키워서」) */
.vendorcard__logo--fill{ max-width:86%; max-height:64px; }
@media (max-width:768px){
  .vendorcard__logo{ max-height:38px; }
  .vendorcard__logo--fill{ max-height:54px; }
}

/* ---- 슬롯 게임 카드 (레드 2026-09-11 「슬롯도 같은 카드 스타일로」 + 샘플 이미지) ------
   라이브 게임사 카드와 한 벌(아래 60% 색 띠 · 들림)이다. 다른 점은 셋.
   ★ 띠 색이 <카드마다 다르다> — 그림 아래쪽 색을 뽑아 --vc-tint 로 준다(parts.tsx sampleTint).
     색이 정해지기 전엔 띠를 숨겨 두고(is-ready 로 나타남) 기본 색이 먼저 비치지 않게 한다.
   ★ 그림은 배경이 아니라 img 다 — 색을 뽑으려면 그림 요소가 있어야 한다.
   ★ 하단 띠는 <라이브 게임사 카드와 같은 것>을 쓴다 — .vendorcard::after 그대로, 여기서 덮지 않는다
     (레드 2026-09-11 「슬롯 그라데이션을 카지노 그라데이션처럼 · 하단 그라데이션」).
     그동안 슬롯만 따로 짙게(26% .86) → 옅게(32% .42) 바꿔 봤는데 결국 라이브와 한 벌이 맞았다.
   ------------------------------------------------------------------------ */
/* ★ 그림은 <위에서 75% 까지만> 깐다 (레드 2026-09-11 「top에서 70%까지만」 → 「75%정도로」).
     썸네일은 가로 그림(210×157)이다. 세로 카드(3:4) 전체를 cover 로 채우면 높이에 맞춰 1.34 배
     <키워서> 흐려지고 좌우가 크게 잘린다. 75% 칸(158 카드면 158×158)이면 1.0 배라 선명하다.
   ★ 그 아래 25% 는 띠 색 면이다(.is-ready 의 바탕색). 그림 아래 끝은 마스크로 녹여 경계선이 안 보이게 한다 —
     녹는 구간을 짧게(아래 14%) 둬 그림이 글자 바로 위까지 또렷하다. */
.featurecard__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 100%);
          mask-image:linear-gradient(to bottom, #000 86%, transparent 100%);
}
.featurecard.is-ready{ background-color:rgb(var(--vc-tint)); }
/* 띠 모양은 .vendorcard::after 의 것(아래 60% 여섯 단). 여기서는 <나타나는 때>만 정한다 */
.featurecard::after{
  opacity:0;
  transition:opacity .25s ease;
}
.featurecard.is-ready::after{ opacity:1; }
.featurecard__art{ padding:12px 8px 10px; gap:6px; }
/* 게임명 — 크게. 긴 이름(「마법사는 전설의 상어를 원한다」)은 두 줄에서 자른다 */
.featurecard__name{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  /* ⚠⚠ 게임 이름은 <낱말째 줄바꿈>이 안 된다. 위 .vendorcard__name 의
       word-break:keep-all 을 함께 입는데, 그것은 <게임사 이름>을 위한 값이다
       (「프라그마틱 플레이 라이브」를 낱말 단위로 끊으려고).

       게임 타일은 폰에서 폭이 115px 다 — 「랍스터 밥 크레이지 크랩 하우스」의
       한 낱말이 칸보다 길어져 옆으로 3px 삐져나갔다(실측 103/106).
       칸이 이만큼 좁으면 낱말을 지킬 수가 없다. 여기서만 푼다. */
  word-break:break-word;
  /* ⚠ 줄 자르기만으로는 부족하다. 띄어쓰기 없는 긴 낱말은 <한 줄이 칸보다
       길어져> 옆으로 잘렸다 — 「랍스터 밥 크레이지 크랩 하우스」가 106px 를
       썼는데 칸은 103px 이었다. 낱말 안에서도 줄을 바꾸게 둔다. */
  overflow-wrap:anywhere;
}
/* 게임사명 — 맨 아래 가운데, 작게 (레드 「완전하단 가운데 작게 게임사명」) */
.featurecard__vendor{
  font-size:11px; font-weight:600; line-height:1.2;
  color:rgba(255,255,255,.82); letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
@media (max-width:768px){
  .featurecard__art{ padding:8px 6px; gap:4px; }
  .featurecard__vendor{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  .featurecard::after{ transition:none; }
}

@media (max-width:1024px){
  .game-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---- 3열 카드 (프로모 배너 · 프로모션 · 예측) ---- */
/* ---- 프로모 배너 ---- */
/* 카드 폭은 컨테이너를 3등분한 값이라 창 크기에 따라 달라진다.
   그래서 글 자리도 고정하지 않고, 그림이 차지하고 남은 만큼만 쓴다. */
.promo{
  position:relative; overflow:hidden;
  min-height:180px;
  background:var(--surface-1);
  border-radius:var(--r);
  padding:20px;
  padding-right:calc(25% + 20px);      /* 오른쪽 그림 자리를 비워 둔다 */
  display:grid; align-content:start; gap:8px;
}
.promo__badge{
  height:36px; padding:8px 12px; width:max-content;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg); border-radius:var(--r);
  font-size:var(--fs-sm); font-weight:700;
}
.promo__badge svg{ width:16px; height:16px; color:var(--cta); }
.promo__title{ font-size:var(--fs-base); font-weight:900; }
.promo__desc{
  font-size:var(--fs-base); font-weight:500; color:var(--text-5);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;                     /* 두 줄까지만 보이고 나머지는 줄인다 */
}
/* 그림은 카드 배경 위에 그대로 얹힌다. 따로 색을 깔면 카드가
   좌우 두 칸으로 갈라져 보인다. */
.promo__art{
  position:absolute; right:8px; top:0; bottom:0; width:25%;
  display:grid; place-items:center; font-size:64px;
  pointer-events:none;
}
/*
  ⚠ 그림이 들어오면서 이모지 자리(25%)가 <너무 좁아졌다>. 그림일 때만 넓히고,
    글자를 가리지 않게 오른쪽 끝으로 밀어 살짝 흐리게 둔다.
  ⚠ 카드 모서리를 넘지 않도록 .promo 에 overflow:hidden 이 필요하다.
*/
/*
  ★★ 그림을 <가운데까지> 끌어온다 (레드 2026-09-15
     「가운데까지 그라데이션주고 뒤에 이미지 잘보이게」).

     44% 에 opacity .9 라 그림이 오른쪽 구석에 <조각>으로 앉아 있었다.
     무엇을 주는 프로모션인지 그림이 말해 주지 못했다.

   ★ 셋을 함께 바꾼다 —
       · 폭 44% → 62% 로 넓히고
       · 흐리기를 걷어 제 색으로 두고(opacity 1)
       · 사라지는 자리를 38% → 50% 로 옮겨 <가운데에서> 녹아들게 한다.

   ⚠ 그림이 진해진 만큼 글자가 묻힌다. 아래 .promo::before 가 <왼쪽 절반만>
     가라앉혀 글자를 살린다 — 히어로 배너와 같은 수법이다.
*/
img.promo__art{
  width:60%; height:100%; right:0; top:0; bottom:0;
  object-fit:cover; object-position:center;
  opacity:1;
  /* 왼쪽 끝에서 <절반 자리>까지 녹아든다 — 거기서부터는 그림이 온전하다 */
  mask-image:linear-gradient(90deg, transparent, #000 50%);
}
/* ⚠ 글자보다 아래, 그림보다 위. 그림을 <덮는> 것이 아니라 <가라앉힌다>.

   ★★ 옅게 고쳤다 (레드 2026-09-15 「50%부터 그라데이션 너무 찐해서
      뒤에 잘 안 보인다」). .78 로 시작하니 왼쪽 절반이 <검은 판>이 되어
      그림이 거기서 통째로 지워졌다.

   ★ 글자가 실제로 앉는 자리(왼쪽 40%)만 가라앉히고, 그 뒤로는 빠르게 걷는다.
     글자 뒤는 아래 text-shadow 가 한 번 더 받쳐 준다 — 막을 옅게 해도 읽힌다. */
.promo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(5,8,15,.62) 0%, rgba(5,8,15,.30) 40%, rgba(5,8,15,0) 56%);
  pointer-events:none;
}
/* 막을 옅게 한 만큼 글자 자체를 받쳐 준다 — 막을 진하게 하는 것보다 그림이 산다 */
.promo__title,
.promo__desc{ text-shadow:0 1px 4px rgba(5,8,15,.85); }
/* ⚠⚠ 그림은 <빼야> 한다. img.promo__art 는 position:absolute 로 카드 오른쪽에
     걸려 있는데, 여기서 relative 로 덮으면 <흐름 안으로 들어와> 카드가 세로로
     길어진다 — 실제로 그렇게 깨졌다(2026-09-15). 글자 칸만 위로 올린다. */
.promo > *:not(.promo__art){ position:relative; z-index:2; }
.promo .btn{ margin-top:auto; width:max-content; border-radius:var(--r-lg); height:44px; }

/* ★ 폰에서는 키를 줄인다 (레드 2026-09-15 「세로 높이 작게」).
     180px 짜리 카드가 옆으로 미는 줄에 서니 첫 화면이 배너만으로 찼다.
   ⚠ 글자 크기는 안 건드린다 — 줄이면 두 줄짜리 소개가 세 줄이 되어
     오히려 키가 도로 는다. 빈 자리만 걷는다. */
@media (max-width:1024px){
  /* ★ 실측 182px 이었다 (레드 「세로 길이좀 줄여줘 너무 큰 편」).
       소개가 두 줄이라 min-height 를 내려도 안 줄어든다 — <한 줄로 자른다>.
     ⚠ 글자 크기는 안 건드린다. 줄이면 읽기만 나빠지고 키는 그대로다. */
  .promo{ min-height:0; padding:12px; padding-right:calc(34% + 12px); gap:4px; }

  /* ★★ 폰에서는 <고른 검정 0.3>으로 (레드 2026-09-15).

       기울기 막은 왼쪽이 짙고 오른쪽이 없다. 폰은 카드가 좁아 글자가
       그 「없는 쪽」까지 밀려 들어가, 같은 줄인데 앞은 읽히고 뒤는 묻혔다.

     ★ 고르게 깔면 어디에 글자가 앉든 같은 만큼 받쳐 준다. 0.3 이라
       뒤 그림은 그대로 보인다 — 덮는 것이 아니라 한 겹 눌러 두는 것이다. */
  .promo::before{ background:rgba(0,0,0,.3); }
  .promo__badge{ height:26px; padding:3px 9px; font-size:var(--fs-xs); }
  .promo__desc{ -webkit-line-clamp:1; line-clamp:1; }
  .promo .btn{ height:34px; }
}


/* ---- 표 ---- */
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; }
/* 머리 줄에는 배경 띠가 깔린다. 배경이 없으면 본문 행과 구분되지 않는다. */
.table thead tr{ background:var(--surface-2); }
.table thead th:first-child{ border-radius:var(--r) 0 0 var(--r); }
.table thead th:last-child { border-radius:0 var(--r) var(--r) 0; }
.table th{
  height:48px; padding:0; font-size:var(--fs-sm); font-weight:700; color:var(--text);
  text-align:left; white-space:nowrap;
}
.table th:first-child,.table td:first-child{ padding-left:28px; }
.table th:last-child, .table td:last-child { padding-right:28px; }
.table td{ height:40px; font-size:var(--fs-sm); font-weight:500; }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.table .mid{ text-align:center; }

/* 피드는 아래로 갈수록 흐려진다 — 더 있다는 신호다 (루벳과 같다) */
.feed .table-wrap{
  -webkit-mask-image:linear-gradient(#000 78%, transparent 100%);
          mask-image:linear-gradient(#000 78%, transparent 100%);
}

/* ---- 빈 상태 ---- */
.empty{
  padding:48px 20px; text-align:center;
  display:grid; gap:8px; justify-items:center;
  background:var(--surface-1); border-radius:var(--r);
}
.empty b{ font-size:var(--fs-lg); }
.empty p{ font-size:var(--fs-sm); color:var(--text-5); }

/* ---- 검색 줄 ---- */
/* 검색 상자와 고르개는 각각 배경이 있는 별개 상자다.
   배경 없이 두면 본문과 색이 같아 어디가 입력란인지 보이지 않는다. */
.filterbar{
  display:flex; align-items:center; gap:var(--gap-card);
  min-height:48px;
}
.searchbox{
  flex:1; min-width:0; height:48px;
  display:flex; align-items:center; gap:12px;
  padding:0 10px 0 20px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  cursor:text;
}
.searchbox svg{ width:24px; height:24px; color:var(--text-5); flex:none; }
.searchbox input{
  flex:1; min-width:0; height:100%;
  background:none; border:0; outline:0;
  font-size:var(--fs-base); font-weight:500; color:var(--text);
}
.searchbox input::placeholder{ color:var(--text-5); }
.searchbox .btn{ flex:none; }


/* ==========================================================================
   메인 화면 부품 — 전부 roobet 실측값
   기준 창 1352 · 컨테이너 1084 (= 창 − 사이드바 220 − 여백 48)
   ========================================================================== */

/* ---- 1. 상단 배너 -------------------------------------------------------
   가로로 긴 한 장짜리다. 배경은 .hero 하나에만 깔고 안쪽 블록은 투명하게 둔다.
   안쪽에 따로 배경을 주면 경계선이 생겨 두 장처럼 갈라져 보인다.
   ------------------------------------------------------------------------ */
.hero{
  position:relative; display:block;
  height:240px; border-radius:var(--r); overflow:hidden;
    /* WHALEY — 서피스에서 사파이어로 흐른다. 원본은 보라→금빛이었다 */
  /*
    ★ WHALEY 배너 (2172×724, 가로세로비 3.0).
      히어로는 240px 이라 <위아래가 잘린다> — cover + center 로 가운데(로고·고래꼬리)를 남긴다.
    ⚠ 배경색을 함께 둔다. 이미지가 늦게 오거나 못 오면 그 사이 <흰 판>이 뜬다.
  */
  /*
    ⚠⚠ 파일 이름에 <판>이 박혀 있다 — 지우지 마라.

      AssetVersion 이 CSS·JS 주소에는 ?v= 를 붙이지만, <CSS 안에서 부르는
      이미지>에는 안 붙는다. 그래서 그림을 갈아 끼워도 Cloudflare 가
      옛것을 4시간(max-age=14400) 동안 계속 내준다 — 실제로 겪었다(2026-09-10):
      서버는 17KB 를 주는데 밖에서는 1,202KB 짜리 옛 그림이 왔다.

    ★ 그림을 바꾸면 <이름의 판도 함께 올린다>. 그래야 주소가 달라져
      캐시를 비우지 않아도 새것이 나간다.
  */
  background:#0C1220 url("/assets/design/img/hero-whaley-20260910b.jpg") center / cover no-repeat;
}
/*
  ★ 글자 뒤에 <어둠막>을 깐다.

    배너는 그 자체로 밝은 그림이라, 「첫 입금 보너스」를 그냥 올리면
    물결·거품 위에서 흰 글자가 흩어진다. 왼쪽만 살짝 어둡게 해서
    <글자 쪽만> 가라앉히고 오른쪽 그림(고래꼬리·달)은 그대로 둔다.

  ⚠ 배경에 그라데이션을 <겹쳐> 넣지 않는다. 그러면 이미지가 지워진다 —
    background 는 한 줄이 통째로 이긴다. 그래서 가짜 요소(::before)로 덮는다.
*/
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(5,8,15,.82) 0%, rgba(5,8,15,.62) 34%, rgba(5,8,15,0) 58%);
}
.hero__body{
  position:relative; z-index:2;
  width:554px; max-width:60%; height:100%;
  padding:32px;
  display:flex; flex-direction:column; justify-content:center; gap:20px;
}
.hero__title{ font-size:var(--fs-2xl); font-weight:900; line-height:36px; }
.hero__title em{ font-style:normal; color:var(--cta); }
.hero__cta{                         /* 버튼 + 남은시간이 한 알약 234 × 44 */
  width:max-content; height:44px; padding:4px;
  border-radius:var(--r-lg);
  /* ★ 배너 그림이 비쳐야 한다 (레드 2026-09-13 「투명도 0.3정도 뒤에 배경 잘보이게」).
     검은 알약이 꽉 차 있으면 배너 위에 딴 판을 얹은 것처럼 보인다.
     ⚠ --bg 를 그대로 쓰면 투명도를 못 준다 — 색 이름이라 알파가 없다.
       같은 색(#05080F)을 알파와 함께 적는다. */
  background:rgba(5, 8, 15, .3);
  /* 흐린 판 위의 흰 글자가 배너 무늬에 묻히지 않게 <뒤만> 흐린다 */
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center;
}
.hero__btn{
  height:36px; padding:6px 14px 10px;
  border-radius:var(--r);
  background:var(--cta); color:var(--text-on-cta);
  font-size:var(--fs-sm); font-weight:900;
  box-shadow: inset 0 -3px 0 0 var(--cta-lo), inset 0 2px 0 0 var(--cta-hi);
}
.hero__timer{
  height:36px; padding:10px 16px;
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-sm); font-weight:700;
}
.hero__timer svg{ width:16px; height:16px; color:var(--cta); }
/* ★ 배너에 이미 그림이 있다. 이모지를 겹치면 두 그림이 싸운다 */
.hero__art{ display:none; }
.hero__tag{
  position:absolute; right:24px; top:24px; z-index:3;
  height:36px; padding:10px 16px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg); border-radius:var(--r);
  font-size:var(--fs-sm); font-weight:700;
}

/* ---- 2. 진입 카드 ------------------------------------------------------ */
.entry-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); }
.entry{
  /* ⚠ overflow 를 자르지 않는다 — 오른쪽 그림이 칸 위아래로 튀어나와야 한다(아래 .entry__art).
       바탕 그라디언트는 border-radius 로 둥글게 잘리므로 칸 모양은 그대로다. */
  position:relative; overflow:visible;
  height:132px; padding:20px 24px;
  border-radius:var(--r);
  display:flex; flex-direction:column; justify-content:flex-end; gap:0;
}
/* ★ 두 칸이 <서로 달라야> 한다. 카지노=사파이어, 스포츠=플래티넘 */
.entry--casino{ background:linear-gradient(115deg,#2A63C4 0%,#10306B 100%); }
.entry--sports{ background:linear-gradient(115deg,#E8EEF4 0%,#9AA9BB 100%); color:#05080F; }
.entry__title{ font-size:var(--fs-2xl); font-weight:900; line-height:36px; }
.entry__desc { font-size:var(--fs-md); font-weight:500; line-height:24px; opacity:.9; }
/* 오른쪽 그림 (레드 2026-09-11 샘플 — 룰렛·카드 / 공 모음). 배경이 투명한 PNG 다.
   ★ 칸 밖으로 <튀어나온다> — 위로 16px, 아래로 12px (레드 「배너 조금 튀어나가게 입체감있게」).
     그림자를 그림 모양대로(drop-shadow) 떨궈 칸 위에 떠 있는 느낌을 준다.
     위 배너와는 24px(섹션 사이) 떨어져 있어 8px 가 남는다.
   ★ 마우스를 올리면 조금 커진다(레드 「scale좀늘려서 약간커지는 효과」). 그림자도 같이 깊어진다.
     축은 가운데보다 조금 아래(60%) — 아래(85%)로 두면 위로만 자라 공 모음이 위 배너에 닿는다
     (16 + 11 = 27px > 섹션 사이 24px). 60% 면 위로 16 + 8 = 24px 에서 멈춘다.
   ★ 글자를 그림 위로 올린다. 좁은 폰에서는 설명 글이 공 모음 가장자리에 걸린다. */
.entry__title, .entry__desc{ position:relative; z-index:1; }
.entry__art{
  position:absolute; right:12px; top:-16px;
  height:calc(100% + 28px); width:auto; max-width:none;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.42));
  transform-origin:50% 60%;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
}
.entry:hover .entry__art{
  transform:scale(1.08);
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.5));
}
/* 좁은 화면 — 두 칸이 8px 사이로 위아래로 붙는다. 크게 튀어나오면 옆 칸 그림과 부딪혀
   위로만 조금 올린다. 손가락 기기·움직임 줄인 기기는 커지지 않는다. */
@media (max-width:1024px){
  .entry__art{ top:-8px; height:calc(100% + 8px); }
}
/* 폰 — 스포츠 칸의 공 모음(가로 그림)이 「응원하는 팀에 베팅하세요」를 60px 덮었다(390 폭 실측).
   설명 글을 한 단계 줄이고(16→14), 공 모음을 조금 작게 오른쪽 끝으로 붙인다(오른쪽 6px 는 칸 밖
   빛번짐 — 화면 여백 16px 안이라 가로 스크롤은 안 생긴다). 카지노 칸은 겹치지 않아 그대로. */
@media (max-width:480px){
  .entry__desc{ font-size:var(--fs-base); line-height:20px; }
  .entry--sports .entry__art{ top:-6px; height:100px; right:-6px; }
}
@media (hover:none), (prefers-reduced-motion:reduce){
  .entry__art{ transition:none; }
  .entry:hover .entry__art{ transform:none; filter:drop-shadow(0 10px 12px rgba(0,0,0,.42)); }
}

/* ---- 3. 게임 레일 ------------------------------------------------------
   PC 는 컨테이너를 7등분한다. 카드 폭이 창 크기에 따라 달라진다.
   ------------------------------------------------------------------------ */
.game-rail{ gap:var(--gap-card); }
.game-rail .gamecard{
  flex:0 0 calc((100% - 6 * var(--gap-card)) / 7);
}
@media (max-width:1024px){
  .game-rail .gamecard{ flex:0 0 158px; }
}

/* ---- 4. 스포츠 종목 카드  227 × 72 ------------------------------------- */
.sport-row{ display:flex; gap:var(--gap-card); overflow-x:auto; }
.sport-row::-webkit-scrollbar{ display:none; }
.sport{
  flex:0 0 calc((100% - 4 * var(--gap-card)) / 5);
  height:72px; padding:4px;
  display:flex; align-items:center; gap:8px;
  background:var(--surface-1); border-radius:var(--r);
  transition:background var(--t-bg);
}
.sport:hover{ background:var(--surface-2); }
.sport__ico{
  width:64px; height:64px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-chip);
  background:linear-gradient(140deg,#2A63C4,#10306B);
  font-size:32px;
}
.sport__name{ font-size:var(--fs-md); font-weight:500; }
@media (max-width:1024px){ .sport{ flex:0 0 180px; } }

/* ---- 5. 파트너 카드  390 × 104 ----------------------------------------- */
.partner-row{ display:flex; gap:var(--gap-card); overflow-x:auto; padding:24px 0; }
.partner-row::-webkit-scrollbar{ display:none; }
.partner{
  position:relative; flex:0 0 390px;
  height:104px; padding:28px;
  background:var(--surface-1); border-radius:var(--r);
  display:flex; flex-direction:column; justify-content:center;
}
.partner__label{ font-size:var(--fs-base); font-weight:500; color:var(--text-5); }
.partner__name { font-size:var(--fs-xl); font-weight:900; line-height:32px; }
.partner__art{
  position:absolute; right:8px; top:-13px;
  width:117px; height:117px;
  display:grid; place-items:center; font-size:64px;
  pointer-events:none;
}
@media (max-width:1024px){ .partner{ flex:0 0 300px; } }

/* ---- 6. 실시간 베팅 ---------------------------------------------------- */
.feed__tabs{ display:flex; }
.feed__tab{
  height:48px; padding:0 24px;
  font-size:var(--fs-base); font-weight:500; color:var(--text-4);
  border-bottom:2px solid transparent;
  transition:color var(--t-color);
}
.feed__tab.is-active{ color:var(--text); font-weight:700; border-bottom-color:var(--cta); }
.feed__game{ display:flex; align-items:center; gap:12px; }
.feed__thumb{
  width:40px; height:40px; flex:none;
  border-radius:var(--r-chip);
  background:linear-gradient(140deg,#2A63C4,#10306B);
}
.feed__user{ display:flex; align-items:center; gap:10px; }
.feed__avatar{
  width:24px; height:24px; flex:none;
  border-radius:var(--r-full);
  background:linear-gradient(140deg,var(--cta),#8E9CAE);
}
.feed__coin{
  width:20px; height:20px; flex:none; margin-left:8px;
  display:inline-grid; place-items:center;
  border-radius:var(--r-full);
  background:var(--c,#26A17B); color:#fff;
  font-size:11px; font-weight:900;
}
.feed .table td{ height:46px; }

/* ---- 7. SEO 카드  1084 × 252 ------------------------------------------- */
/*
  ★ 접었다 펴는 덩이 (레드 2026-09-14 「첫줄보유주고 오른쪽 상단에 펼치고 접는
    아이콘 추가해서 펼치면 모든내용보여주고 닫으면 다시 기본 보여주기」).

  ⚠ 안 보이는 문단을 <지우지 않는다>. 높이로 가릴 뿐이라 검색엔진과 브라우저
    찾기(Ctrl+F)에는 그대로 잡힌다 — 이 덩이가 있는 까닭이 그것이다.

  ⚠ 첫 줄 높이를 px 로 박지 않는다. 글자 크기가 바뀌면 줄이 반쯤 잘린다.
    -webkit-line-clamp 가 <줄 수>로 자른다.
*/
.seo{
  position:relative;
  padding:28px 64px 28px 28px;   /* 오른쪽은 단추 자리 */
  background:var(--surface-1); border-radius:var(--r);
}
.seo h2{ font-size:var(--fs-xl); font-weight:700; line-height:32px; margin-bottom:16px; }
.seo p{ font-size:var(--fs-md); font-weight:500; line-height:24px; color:var(--text-4); }
.seo p + p{ margin-top:14px; }

/* 접혔을 때 — 첫 문단의 첫 줄만 */
.seo__body{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;
  overflow:hidden;
}
.seo.is-open .seo__body{ display:block; overflow:visible; }

.seo__toggle{
  position:absolute; top:22px; right:20px;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:var(--r-full); color:var(--text-4);
  transition:background var(--t-bg), color var(--t-color), transform var(--t-bg);
}
.seo__toggle:hover{ background:var(--surface-2); color:var(--text); }
.seo__toggle:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* 펴면 화살표가 돌아 <접힌다>는 뜻이 된다 */
.seo.is-open .seo__toggle{ transform:rotate(180deg); }

@media (max-width:1024px){
  .hero{ height:auto; }
  .hero__body{ width:100%; max-width:none; }
  .hero__art,.hero__tag{ display:none; }
  .entry-row{ grid-template-columns:1fr; }
  .entry{ height:112px; }
  .entry__title{ font-size:var(--fs-xl); }

  /* 실시간 피드 — 루벳 모바일은 [게임][지급금] 두 열만 남긴다.
     여섯 열을 그대로 두면 글자가 줄바꿈되어 표가 세로로 길어진다. */
  .table th:nth-child(2), .table td:nth-child(2),
  .table th:nth-child(3), .table td:nth-child(3),
  .table th:nth-child(4), .table td:nth-child(4),
  .table th:nth-child(5), .table td:nth-child(5){ display:none; }
  .table th:first-child,.table td:first-child{ padding-left:16px; }
  .table th:last-child, .table td:last-child { padding-right:16px; }
  .feed__game{ gap:10px; }
  .feed__tabs{ overflow-x:auto; scrollbar-width:none; }
  .feed__tabs::-webkit-scrollbar{ height:0; }
  .feed__tab{ flex:none; }
}

/* 폰 — 큰 배너 글자가 그림 속 Whaley 로고와 겹쳤다 (레드 2026-09-11 모바일 체크 「둘 다 고쳐줘」).
   ★ 로고는 그림 가로 47~69% 에 있다. 폰 배너(358×164)는 가운데 기준으로 잘려 로고가 162px 부터 — 제목(~206px)
     끝과 겹쳤다. 그림을 왼쪽 쪽(12%)으로 맞추면 로고가 약 220px 부터로 밀려 제목 오른쪽에 선다.
     (360 폭 폰에서도 로고 끝이 배너 안에 든다)
   ★ 제목은 진입 칸과 같은 한 단계(24px)로 줄이고, 긴 제목은 어둠막(왼쪽 58%) 안에서 줄바꿈되게 폭을 묶는다. */
@media (max-width:480px){
  .hero{ background-position:12% center; }
  .hero__title{ font-size:var(--fs-xl); line-height:30px; max-width:62%; }
}

/* ==========================================================================
   카지노 — 프로모 배너 · 게임사 · 고르개 · 더 보기
   수치 근거: ../04-페이지/카지노로비.md
   ========================================================================== */

/* ---- 프로모 배너 389 × 204, 3장 나란히 -------------------------------- */
/* 배너는 두 장이다. 카드 폭은 컨테이너를 반으로 나눈 값이다. */
/*
  프로모션 띠 — <둘씩 보이고 옆으로 넘긴다> (레드 2026-09-14).

  ⚠ 예전에는 2열 그리드라 넷이 <두 줄>로 쌓여 화면 위쪽을 다 먹었다.
    게임 목록이 첫 화면에서 밀려났다.

  ★ 넘기는 것은 <스크롤>이 한다. transform 으로 밀면 폭 계산을 우리가 지고,
    창 크기가 바뀔 때마다 어긋난다. scroll-snap 은 브라우저가 맞춰 준다.
*/
.promo-slider{ position:relative; }
.promo-row{
  display:flex; gap:var(--gap-card);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.promo-row::-webkit-scrollbar{ display:none; }
/* ⚠ gap 의 절반을 뺀다. 안 빼면 둘째 칸이 조금 잘려 다음 장이 비쳐 보인다 */
.promo-row > .promo{
  flex:0 0 calc(50% - var(--gap-card) / 2);
  scroll-snap-align:start;
}

/* 쪽 점 */
.promo-dots{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin-top:10px;
}
.promo-dots button{
  width:7px; height:7px; padding:0;
  border:0; border-radius:var(--r-full);
  background:var(--text-6); cursor:pointer;
  transition:width var(--t-bg), background var(--t-color);
}
.promo-dots button:hover{ background:var(--text-4); }
/* 켜진 점은 <길어진다>. 색만 바꾸면 어두운 판에서 잘 안 보인다 */
.promo-dots button.is-on{ width:18px; background:var(--primary); }
.promo-dots button:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }

/* ---- 게임사 줄 높이 128 ------------------------------------------------ */
.provider-row{ display:flex; gap:var(--gap-card); }
.provider{
  flex:0 0 176px; height:128px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color var(--t-bg), background var(--t-bg);
}
.provider:hover{ background:var(--surface-2); border-color:var(--nav-caret); }
.provider__mark{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:var(--r);
  font-size:20px; font-weight:900; color:#fff;
}
.provider__name{ font-size:var(--fs-base); font-weight:700; color:var(--text-3); }

/* ---- 정렬 · 게임사 고르개 ----------------------------------------------
   배경도 테두리도 없다. 라벨은 굵게, 값은 보통으로 두어 굵기로만 구분한다.
   ------------------------------------------------------------------------ */
.select{
  position:relative; flex:none;
  height:48px; display:flex; align-items:center; gap:6px;
  padding:0 12px 0 16px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  color:var(--text);
}
.select__label{ font-size:var(--fs-base); font-weight:700; white-space:nowrap; }
.select select{
  appearance:none; -webkit-appearance:none;
  height:48px; padding:0 24px 0 0;
  background:none; border:0;
  font:inherit; font-size:var(--fs-base); font-weight:500;
  color:var(--text); cursor:pointer;
}
.select select option{ background:var(--surface-1); color:var(--text); }
.select svg{
  position:absolute; right:12px; pointer-events:none;
  width:20px; height:20px; color:var(--text-4);
}

/* ── 고르개 포커스 (레드 2026-09-13 「테두리 어색」) ────────────────────
   base.css 의 :focus-visible 이 <안쪽 select> 에 걸려, 둥근 알약 안에
   네모 테두리가 겹쳐 그려지고 있었다. 알약이 rounded 인데 테두리는 각져서
   두 줄이 어긋나 보였다.

   ★ 테두리를 <바깥 알약>에 건다. 안쪽 것은 끈다 — 둘 다 두면 겹친다.
   ★ :focus-within 이라야 한다. .select 는 label 이라 스스로 포커스를 못 받는다.
   ------------------------------------------------------------------ */
.select:focus-within{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.select select:focus,
.select select:focus-visible{ outline:none; }

/* ---- 레일 제목 옆 개수 ------------------------------------------------- */
.sec__count{
  margin-left:auto; flex:none;
  font-size:var(--fs-sm); font-weight:500; color:var(--text-5);
}

/* ---- 더 보기 ----------------------------------------------------------- */
.loadmore{ display:flex; justify-content:center; }

@media (max-width:1024px){
  /* 배너는 한 장씩 가로로 민다 (카지노로비.md §10.1) */
  .promo-row{
    display:flex; grid-template-columns:none;
    gap:8px;
  }
  .promo-row > .promo{ flex:0 0 100%; }
  .provider{ flex:0 0 140px; height:112px; }
  .select__label{ display:none; }        /* 좁은 화면에서는 값만 남긴다 */
  /* ★★ 검색·정렬·게임사를 <한 줄>로 (레드 2026-09-15 「1줄 변경」).

       예전에는 검색이 100% 를 먹어 셋이 <세 줄>로 섰다. 목록을 보러 온
       화면인데 고르개만 화면의 1/3 을 차지했다.

     ⚠ 좁은 화면에서는 고르개의 <이름표를 뺀다>. 「정렬 인기순」·
       「게임사 프로그마틱 플레이 슬롯」을 그대로 두면 셋이 못 선다.
       고른 값만 남겨도 무엇인지 안다 — 순서가 바뀌지 않기 때문이다.
     ⚠ 랜덤 단추도 글자를 줄인다. 「랜덤」 두 글자가 검색칸을 밀어냈다. */
  .filterbar{ flex-wrap:nowrap; gap:6px; }
  .searchbox{ flex:1 1 0; min-width:0; height:44px; padding:0 6px 0 12px; gap:6px; }
  .searchbox .btn{ flex:none; padding:0 8px; font-size:var(--fs-xs); }
  .select{ height:44px; flex:1 1 0; }

  .picker{ flex:0 1 auto; min-width:0; }
  .picker__btn{ height:44px; padding:0 30px 0 10px; gap:0; }
  .picker__label{ display:none; }
  .picker__now{ max-width:none; }
  .picker__btn svg{ right:8px; }
}

/* ==========================================================================
   게임 실행 화면
   수치 근거: ../04-페이지/게임실행화면.md
   ========================================================================== */

/* 게임 프레임은 밝은 패널 안에 액자처럼 들어간다.
   패널 1084 × 664 · padding 28 28 0 · 라운드 위쪽만 12 (실측, 창 1352)
   그래서 프레임 폭은 컨테이너에서 좌우 28씩 뺀 값이 된다. */
/* 게임 프레임 · 툴바 · 정보가 한 상자에 들어간다. 네 모서리 모두 둥글다. */
.game-shell{
  display:flex; flex-direction:column;
  padding:28px 28px 0;
  background:var(--surface-1);
  border-radius:var(--r);
  overflow:hidden;
}
.game-frame{
  aspect-ratio:16 / 9;                 /* 높이를 고정하지 않는다. 창을 따라 줄어든다 */
  background:var(--bg);
  border-radius:var(--r) var(--r) 0 0;
  overflow:hidden;
  display:grid; place-items:center;
}
.game-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* 연동 전 자리 채움 */
.game-frame__demo{
  width:100%; height:100%;
  display:grid; align-content:center; justify-items:center; gap:8px;
  text-align:center; padding:24px;
}
.game-frame__demo b{ font-size:var(--fs-2xl); font-weight:900; letter-spacing:.04em; }
.game-frame__demo span{ font-size:var(--fs-sm); color:rgba(255,255,255,.72); }

/* 게임을 못 열었을 때 — 상자 안에서만 처리한다 (§6) */
.game-frame__error{
  display:grid; justify-items:center; gap:12px; text-align:center; padding:24px;
}
.game-frame__error b{ font-size:var(--fs-lg); font-weight:700; }
.game-frame__error p{ font-size:var(--fs-sm); color:var(--text-5); }

/* 모바일 전용 — 썸네일과 플레이 버튼. PC 에서는 감춘다. */
.game-poster{ display:none; }
.game-poster__thumb{
  width:128px; height:128px;
  display:grid; place-items:center;
  border-radius:var(--r);
  font-size:36px; font-weight:900; color:#fff;
}
.game-poster__btns{ display:flex; gap:4px; }
.game-poster__btn{
  width:128px; height:36px;
  display:grid; place-items:center;
  padding:0; border-radius:var(--r);
  font-size:var(--fs-sm); font-weight:700;
}
.game-poster__btn.btn--cta{ font-weight:900; }

/* ---- 툴바 56 ----------------------------------------------------------- */
.game-toolbar{
  height:56px; flex:none;
  padding:0 16px;
  background:var(--bg);
  border-radius:0 0 var(--r) var(--r);
  display:flex; align-items:center; gap:16px;
  /* 게임사명을 <툴바 한가운데>에 두려고 기준점을 만든다 — 아래 __mid 참고 */
  position:relative;
}
.game-toolbar__modes{ display:flex; align-items:center; gap:10px; flex:none; }

/* 활성 쪽 글자를 굵게 해서 지금 어느 모드인지 알린다. 색은 바꾸지 않는다. */
.mode{
  font-size:var(--fs-sm); font-weight:500; color:var(--text-4);
  transition:color var(--t-color);
}
.mode.is-on{ font-weight:700; color:var(--text); }

.switch{
  width:36px; height:20px; flex:none;
  display:block; position:relative;
  background:var(--surface-2);
  border-radius:var(--r-full);
  cursor:pointer;
  transition:background var(--t-bg);
}
.switch i{
  position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:var(--r-full);
  background:var(--text-4);
  transition:transform var(--t-bg), background var(--t-bg);
}
.switch.is-on{ background:var(--primary); }
.switch.is-on i{ transform:translateX(16px); background:#fff; }

/* ── 게임사명 (레드 2026-09-13 「가운데 정렬」) ──────────────────────────
   ★ flex 로는 가운데가 안 나온다.

     체험/실제 스위치를 뺀 뒤로 왼쪽이 비었다. flex:1 은 <남은 자리 안에서>
     가운데일 뿐이라, 오른쪽 도구 넷이 자리를 차지하는 만큼 왼쪽으로 밀린다.

   ★ 그래서 툴바 기준으로 못 박는다. 도구와 겹치지 않게 너비 상한을 둔다 —
     겹치면 이름 끝이 아이콘 밑으로 들어가 <읽을 수가 없다>.
   ★ pointer-events:none — 글자가 도구 위를 덮어도 누름은 도구가 받는다.
   ------------------------------------------------------------------ */
.game-toolbar__mid{
  position:absolute; left:50%; transform:translateX(-50%);
  /* ★ 오른쪽 도구 넷(≈180px)과 겹치지 않을 만큼만. 겹치면 글자 끝이 아이콘 밑으로
       들어가 <읽을 수가 없다>. 지갑 배지가 돌아와 칸이 둘이므로 조금 더 준다. */
  max-width:calc(100% - 220px);
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-width:0;
  pointer-events:none;
}
.game-toolbar__mid > *{ pointer-events:auto; }
.game-toolbar__vendor{
  font-size:var(--fs-sm); font-weight:700; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  /* ★ 자리가 모자라면 <게임사명부터> 줄인다. 지갑 배지는 무엇이 깎이는지를
       말하는 자리라 잘리면 안 된다. */
  min-width:0; flex:0 1 auto;
}
.game-toolbar__asset{ flex:none; }
.game-toolbar__asset{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px;
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:700; color:var(--text-3);
  white-space:nowrap;
}

/* 모바일에서만 보이는 전체화면 토글 */
.game-toolbar__fs{ display:none; align-items:center; gap:8px; flex:none; }
.game-toolbar__fslabel{ font-size:var(--fs-sm); font-weight:700; color:var(--text); }

/* 헤더 아이콘 버튼과 달리 배경칩이 없다. 아이콘만 놓인다. (§4.3) */
.game-toolbar__tools{ display:flex; align-items:center; gap:24px; flex:none; }
.iconbtn{
  width:24px; height:24px;
  display:grid; place-items:center;
  color:var(--text-4);
  transition:color var(--t-color);
}
.iconbtn:hover{ color:var(--text); }
.iconbtn.is-on{ color:var(--cta); }
.iconbtn svg{ width:24px; height:24px; display:block; }


/* 게임 중에는 잔액 숫자 대신 안내 글이 흐리게 들어간다 */
.in-game .balance__amount{ color:var(--text-4); font-weight:500; }

/* 노란 CTA 버튼 — 헤더 입금 버튼과 같은 입체 처리 */
.btn--cta{
  background:var(--cta); color:var(--text-on-cta); font-weight:900;
  box-shadow: inset 0 -3px 0 0 var(--cta-lo), inset 0 2px 0 0 var(--cta-hi);
}
.btn--cta:hover{ background:var(--cta-hi); }

@media (max-width:1024px){
  /* 상자가 화면 전체 폭을 쓴다. 좌우가 화면에 붙으므로 라운드도 없앤다. */
  .game-shell{
    padding:0;
    margin:0 calc(var(--gutter) * -1);
    border-radius:0;
  }
  /* 게임을 심지 않으므로 16:9 를 버리고 높이를 고정한다 (실측 220) */
  .game-frame{
    aspect-ratio:auto; height:220px;
    border-radius:0;
  }
  .game-frame__demo{ display:none; }
  .game-poster{
    display:grid; justify-items:center; align-content:center; gap:20px;
    width:100%; height:100%;
  }
  .game-toolbar{ border-radius:0; }
  /* 툴바가 통째로 바뀐다 — 전체화면 토글 하나와 하트 하나뿐이다.
     체험/실제는 플레이 버튼이 대신하고, 자산은 위 헤더에서 본다. (실측 546 × 56) */
  .game-toolbar{ height:56px; padding:0 16px; gap:8px; flex-wrap:nowrap; }
  .game-toolbar__modes,
  .game-toolbar__mid{ display:none; }
  .game-toolbar__fs{ display:flex; }
  /*
    ★★ 폰에서도 <PC 와 같은 옵션 단추 넷>을 둔다 (레드 2026-09-17
       「모바일 슬롯 창 PC처럼 옵션 버튼 넣어주기」).

       전에는 여기 이런 줄이 있어 넷을 통째로 감췄다 —
         .game-toolbar__tools .iconbtn:not(#favBtn){ display:none }
       하트만 남기려던 선택자인데 마크업에 그 id 가 없어 <하트까지> 사라졌었다.
       이제 id 를 달아 두었고(GamePage.tsx), 레드가 넷 다 넣으라 해서 규칙을 걷는다.

     ⚠ 한 줄(56px · nowrap)에 <토글 + 글자 + 아이콘 넷>이 들어가야 한다.
       그래서 사이를 좁힌다 — 아주 좁은 폰에서는 아래에서 글자를 뺀다.
     ⚠ 툴바는 <흐름 안에> 있다(fixed 가 아니다). 본문이 이미 --tabbar-h 만큼
       아래 여백을 두므로 <탭바와 겹치지 않는다> — 확인하고 넣었다.
  */
  .game-toolbar__tools{ gap:10px; margin-left:auto; }

}

/* 아주 좁은 폰 — 아이콘 넷을 지키려고 <글자>를 뺀다 (레드 2026-09-17).
   ⚠ 스위치는 남긴다. 글자가 없어도 스위치는 눌러서 뜻이 통하지만,
     아이콘이 잘리면 그 기능 자체가 사라진다. */
@media (max-width:400px){
  .game-toolbar__fslabel{ display:none; }
  .game-toolbar__tools{ gap:8px; }
}

/* ---- 게임 정보 패널 ----------------------------------------------------
   게임 상자와 붙어 하나의 큰 상자가 된다. 라운드는 아래쪽만 갖는다.
   실측 1084 × 482 · padding 28 · 배경 #191939
   ------------------------------------------------------------------------ */
.game-info{
  padding:28px 28px 0;
  margin:0 -28px;                      /* 패널 좌우 여백을 상쇄해 폭을 채운다 */
  display:grid; gap:12px;
}
.game-info__head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.game-info__name{
  font-size:var(--fs-sec); font-weight:700; line-height:36px;
  margin:0; min-width:0;
}
.game-info__vendor{
  font-size:var(--fs-lg); font-weight:400; color:var(--text);
  width:max-content;
  transition:color var(--t-color);
}
.game-info__vendor:hover{ color:var(--text-3); }
.game-info__desc{
  margin:0; font-size:var(--fs-base); font-weight:500; line-height:20px;
  color:var(--text);
}

/* 태그 칩 — 게임사만 초록, 나머지는 보라 (실측 106 × 36, r12, 14/700) */
.tag-row{ margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  height:36px; padding:0 14px;
  display:inline-flex; align-items:center;
  border-radius:var(--r);
  font-size:var(--fs-base); font-weight:700; color:#fff;
  white-space:nowrap;
  transition:filter var(--t-bg);
}
.tag:hover{ filter:brightness(1.15); }
.tag--cat   { background:#1E4FA8; }
.tag--vendor{ background:var(--tag-sports); color:#0B2000; }

/* 분류 색 — 화면 어디서든 같다. 필터 · 히어로 · 카드 안 태그 (프로모션 문서 §3).
   반드시 .tag 본체 뒤에 둔다. 앞에 두면 본체의 color:#fff 에 덮인다. */
.tag--all   { background:var(--primary); }
.tag--casino{ background:var(--tag-casino); }
.tag--sports{ background:var(--tag-sports); }
.tag--vip   { background:var(--tag-vip); color:var(--text-on-cta); }
.tag--mini  { background:var(--tag-mini); color:var(--text-on-cta); }

/* ---- 최고 당첨 · 행운의 당첨 ------------------------------------------ */
.wins{ margin-top:4px; }
.wins__head{ display:flex; align-items:center; gap:16px; }
.wins__tabs{ display:flex; }
.wins__tab{
  height:48px; padding:0 16px;
  font-size:var(--fs-sm); font-weight:500; color:var(--text-4);
  border-bottom:2px solid transparent;
  transition:color var(--t-color), border-color var(--t-bg);
}
.wins__tab.is-active{ font-weight:700; color:var(--text); border-bottom-color:var(--primary); }
/* 기간 고르개는 표 위에 얹히는 작은 상자다. 카테고리 화면의 고르개보다 작다. */
.wins__head .select{
  margin-left:auto; height:36px;
  padding:0 8px 0 12px;
  border-radius:var(--r);
}
.wins__head .select select{ height:36px; font-size:var(--fs-sm); padding-right:20px; }
.wins__head .select svg{ right:8px; width:16px; height:16px; }

/* 위 여백이 없으면 기간 고르개와 첫 줄의 테두리가 맞닿아 겹쳐 보인다 */
.wins__list{ padding:12px 0 28px; display:grid; gap:8px; }
/* 한 줄 = 유저 · 베팅 · 지급금 · 배율 네 칸 (실측 각 257 × 72) */
.win{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  align-items:center;
  min-height:72px; padding:0 20px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.win__who{ display:flex; align-items:center; gap:12px; min-width:0; }
.win__who b{ font-size:var(--fs-lg); font-weight:700; }
.hexa--sm{ width:24px; height:28px; font-size:var(--fs-xs); }
.win__cell{ display:grid; gap:2px; min-width:0; }
.win__cell span{ font-size:var(--fs-sm); font-weight:500; color:var(--text-5); }
.win__cell b{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-lg); font-weight:700;
  font-variant-numeric:tabular-nums;
}

@media (max-width:1024px){
  /* 상자는 화면 폭을 다 쓰지만 글은 좌우 여백을 지켜야 읽힌다.
     PC 의 여백 상쇄(margin:0 -28px)를 여기서 되돌린다. */
  .game-info{ padding:16px var(--gutter) 0; margin:0; }
  .game-info__head{ gap:10px; }
  .game-info__name{ font-size:var(--fs-xl); line-height:1.2; }
  .game-info__vendor{ font-size:var(--fs-base); }
  .tag-row{ margin-left:0; flex-basis:100%; }
  .tag{ height:32px; padding:0 12px; font-size:var(--fs-sm); }

  /* 기간 고르개는 좁은 화면에서도 내용만큼만 차지한다.
     아래 .select 규칙이 늘리지 않도록 여기서 다시 고정한다. */
  .wins__head{ flex-wrap:wrap; }
  .wins__head .select{ flex:none; width:max-content; }
  .wins__tab{ padding:0 12px; }
  .win{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px; padding:12px 14px;
  }
  .wins__list{ padding-bottom:16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   인기게임 (레드 2026-09-12 「Exit TOP GAMELIST 기준으로 … 인기게임 페이지 구성하자」)
     머리 — 제목 · 한 줄 · 게임사 바로가기 칩(누르면 그 줄로 내려간다)
     줄   — 게임사마다 TOP N, 카드 왼쪽 위에 순위 배지(1·2·3 은 금·은·동)
   순위는 서버(casino_games.popular_rank) — CasinoPage PopularHead · parts Rail ranked
   ═══════════════════════════════════════════════════════════════════════ */
.pop-head{
  display:grid; gap:14px; padding:20px 22px; border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(255,120,60,.22) 0%, transparent 55%),
    radial-gradient(70% 120% at 100% 100%, color-mix(in srgb, var(--primary) 40%, transparent) 0%, transparent 60%),
    var(--surface-1);
}
.pop-head__text{ min-width:0; }
.pop-head__title{
  margin:0; display:flex; align-items:center; gap:10px;
  font-size:var(--fs-2xl); line-height:var(--lh-2xl); font-weight:900; color:#fff;
}
.pop-head__title svg{ color:#FF8A4C; filter:drop-shadow(0 0 8px rgba(255,120,60,.55)); }
.pop-head__sub{ margin:4px 0 0; font-size:var(--fs-base); color:var(--text-4); word-break:keep-all; }
.pop-jump{ display:flex; gap:8px; padding-bottom:2px; }
.pop-jump__chip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 14px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-2);
  font-size:var(--fs-sm); font-weight:800; white-space:nowrap; cursor:pointer;
  transition:border-color var(--t-color, .15s), color var(--t-color, .15s);
}
.pop-jump__chip:hover, .pop-jump__chip:focus-visible{ border-color:color-mix(in srgb, var(--primary) 75%, var(--line)); color:#fff; }
.pop-jump__chip em{ font-style:normal; font-size:11px; color:var(--text-5); font-variant-numeric:tabular-nums; }

/* 순위 줄 — 제목 옆 「TOP 20」 · 바로가기로 내려올 때 헤더에 안 가리게 */
.sec--ranked{ scroll-margin-top:84px; }
.sec__top{
  font-style:normal; margin-left:8px; padding:2px 8px; border-radius:var(--r-full); vertical-align:middle;
  font-size:var(--fs-sm); font-weight:900; letter-spacing:.04em; color:#FFD8C2;
  background:linear-gradient(90deg, rgba(255,110,50,.35), rgba(255,110,50,.12));
  border:1px solid rgba(255,140,90,.35);
}

/* 순위 배지 — 카드 왼쪽 위(LIVE 배지 자리 — 인기 줄은 슬롯뿐이라 겹치지 않는다) */
.gamecard__rank{
  position:absolute; top:8px; left:8px; z-index:3;
  min-width:30px; height:30px; padding:0 8px; box-sizing:border-box;
  display:grid; place-items:center; border-radius:10px;
  font-size:15px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums;
  background:rgba(8,12,22,.74); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.65);
}
.gamecard__rank.is-top1{ color:#2B1A00; border-color:rgba(255,236,170,.9); background:linear-gradient(160deg, #FFF0A8 0%, #F2C037 45%, #A9740F 100%); }
.gamecard__rank.is-top2{ color:#17202C; border-color:rgba(240,245,250,.9); background:linear-gradient(160deg, #FFFFFF 0%, #C9D2DD 45%, #7F8A99 100%); }
.gamecard__rank.is-top3{ color:#2A1405; border-color:rgba(255,210,170,.85); background:linear-gradient(160deg, #FFD7B0 0%, #D08A52 45%, #7E4523 100%); }
.gamecard__rank[class*="is-top"]{ box-shadow:0 0 14px -2px rgba(255,200,90,.45), 0 4px 12px -4px rgba(0,0,0,.65); }

@media (max-width:640px){
  .pop-head{ padding:16px; }
  .pop-head__title{ font-size:var(--fs-xl); line-height:var(--lh-xl); }
  .gamecard__rank{ min-width:26px; height:26px; font-size:13px; border-radius:8px; }
}


/* ── 고르개 (레드 2026-09-13) ──────────────────────────────────────────
   ★ 네이티브 <select> 를 그만뒀다.

     열리는 목록을 꾸밀 수가 없다. appearance:none 은 <닫힌 모습만> 바꾼다 —
     펼친 목록은 운영체제가 그리므로 어두운 화면에 흰 네모가 남의 것처럼 떴다.

     자리도 어긋났다. 네이티브 목록은 <안쪽 select 요소>에 붙는데 그 요소는
     「게임사」 라벨 <뒤에서> 시작한다. 그래서 알약 왼쪽 끝이 아니라 글자 중간에서 열렸다.

   ★ 닫힌 모습은 .select 알약과 <같게> 둔다. 한 줄에 나란히 서므로
     둘이 조금만 달라도 눈에 띈다.
   ------------------------------------------------------------------ */
.picker{ position:relative; flex:none; }

.picker__btn{
  height:48px; display:flex; align-items:center; gap:6px;
  padding:0 40px 0 16px;          /* 오른쪽은 갈매기 자리 */
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  color:var(--text);
  font:inherit; font-size:var(--fs-base); font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:border-color var(--t-bg);
}
.picker__btn:hover{ border-color:var(--line2, var(--line)); }
.picker__btn:disabled{ opacity:.5; cursor:default; }

.picker__label{ font-size:var(--fs-base); font-weight:700; }
.picker__now{
  /* ★ 게임사 이름이 길다(「프라그마틱 플레이 슬롯 (706)」). 알약이 줄을 밀어내지
       않도록 상한을 두고, 넘치면 …으로 자른다. */
  max-width:min(46vw, 260px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.picker__btn svg{
  position:absolute; right:12px; pointer-events:none;
  width:20px; height:20px; color:var(--text-4);
  transition:transform var(--t-bg);
}
.picker.is-open .picker__btn svg{ transform:rotate(180deg); }

/* 테두리는 알약 바깥에 그린다 — 안쪽에 그리면 둥근 모서리와 어긋난다 */
.picker__btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.picker__menu{
  position:absolute; left:0; top:calc(100% + 6px); z-index:40;
  min-width:100%; max-height:min(52vh, 420px); overflow-y:auto;
  padding:6px; border-radius:var(--r);
  background:var(--surface-2);
  border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  display:grid; gap:2px;
}
.picker__item{
  height:44px; padding:0 12px; border-radius:var(--r-chip);
  display:flex; align-items:center;
  font:inherit; font-size:var(--fs-base); font-weight:600;
  color:var(--text-3); text-align:left; white-space:nowrap;
  background:none; border:0; cursor:pointer;
  transition:background var(--t-bg), color var(--t-color);
}
.picker__item:hover{ background:var(--surface-3); color:var(--text); }
.picker__item.is-on{ background:var(--surface-3); color:var(--text); font-weight:800; }

/* 폰에서는 목록이 화면을 넘지 않게 — 오른쪽 끝 고르개가 밖으로 삐져나간다 */
@media (max-width:640px){
  .picker__menu{ left:auto; right:0; }
  .picker__now{ max-width:40vw; }
}

/* ── 실시간 베팅 피드 — 몸통만 스크롤 (레드 2026-09-13) ─────────────────
   ★ 머리줄(게임·사용자·시간·베팅·배율·지급금)은 붙어 있어야 한다.
     같이 흘러가면 몇 줄만 내려도 어느 칸이 무엇인지 놓친다.
   ★ 높이를 못 박는다. 줄 수에 맡기면 새 줄이 들어올 때마다 아래 내용이
     밀려 내려가 <화면 전체가 출렁인다>.
   ------------------------------------------------------------------ */
.feed__scroll{
  max-height:420px;
  /* ★ 스스로 흐르므로 회원이 밀 일이 없다. 막대도 없앤다 (레드 2026-09-13). */
  overflow:hidden;
}
.feed__scroll thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-1);
}

/* ── 스스로 흐르는 몸통 ──────────────────────────────────────────────
   ★ 같은 목록을 두 벌 깔고 <절반만큼> 밀어 올린다. 첫 벌이 다 빠지는 순간
     둘째 벌이 꼭 그 자리에 있어 되돌아가는 것이 안 보인다.
   ★ 한 바퀴 도는 시간은 화면이 넘긴다(--feed-spin) — 줄 수가 달라도 속도가 같다.
   ⚠ 읽으려고 마우스를 올리면 멈춘다. 안 멈추면 읽던 줄이 달아난다.
   ⚠ 움직임을 싫어하는 설정이면 흐르지 않는다. 그때는 손으로 밀 수 있어야 하므로
     막대를 되살린다 — 안 그러면 뒷줄을 <볼 방법이 없다>.
   ------------------------------------------------------------------ */
.feed__marquee{
  animation:feed-roll var(--feed-spin, 60s) linear infinite;
  will-change:transform;
}
.feed__scroll:hover .feed__marquee{ animation-play-state:paused; }

@keyframes feed-roll{
  from{ transform:translateY(0); }
  to  { transform:translateY(-50%); }
}

@media (prefers-reduced-motion:reduce){
  .feed__marquee{ animation:none; }
  .feed__scroll{ overflow-y:auto; }
}

/* 피드 썸네일 — 빈 칸과 그림이 <같은 크기>여야 줄이 안 어긋난다 */
.feed__thumb{ object-fit:cover; }

/* 빈 탭 안내 — 한 줄 높이면 표가 <잘린 것>처럼 보인다.

   ⚠⚠ 선택자를 <.feed .table td.feed__empty> 로 적는다.
     571행의 `.feed .table td{ height:46px }` 가 선택자 셋이라
     `.feed__empty` 하나짜리를 이긴다. 160 을 적어 두고도 46 으로 그려졌다 —
     오류도 경고도 없이 조용히 진다 (레드 2026-09-13 「너무 좁아서」).

   ★ 240 이다. 목록이 있을 때(420)의 절반쯤 — 빈 칸이 그 자리를 대신한다는
     것이 보이면서도 화면을 통째로 먹지는 않는 높이다. */
.feed .table td.feed__empty,
.feed__empty{
  height:240px; text-align:center; vertical-align:middle;
  color:var(--text-5); font-size:var(--fs-sm);
}

@media (max-width:768px){
  .feed__scroll{ max-height:340px; }
}

/* 파트너 카드의 그림 (레드 2026-09-13 「파트너자리 이렇게처리해줄래」)
   ★ 카드 <위로 넘겨> 자른다. 전달본이 그렇게 그린다 — 인물 사진의 머리가
     카드 밖으로 나와야 납작한 배너가 아니라 한 장면처럼 보인다.
   ⚠ 그림이 없을 때는 이름 첫 글자로 떨어진다. 깨진 아이콘을 두면
     회원에게는 사이트가 고장 난 것으로 보인다(오늘 슬롯 썸네일에서 겪었다). */
.partner__img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.partner__art--mark{
  font-size:44px; font-weight:900;
  color:var(--text-6, var(--text-5));
  opacity:.5;
  letter-spacing:-.02em;
}

/* 로고 타입은 <세로 가운데>다 (f3 지적, 2026-09-13).
   인물은 아래(어깨·발)를 기준으로 앉혀야 자연스럽지만, 로고에 같은 규칙을
   먹이면 아래로 처진다 — 로고는 제 캔버스 안에서 이미 가운데에 있다. */
.partner__img--logo{ object-position:center; }

/* 로고 칸은 <카드와 같은 높이>다 (레드 2026-09-13 「오른쪽에서 좀더띄워주고 수직좀맞춰줄래」).

   ⚠ 기본 칸(.partner__art)은 top:-13px · height:117px 이다 —
     인물 사진이 카드 위로 삐져나오게 하려고 일부러 올려 둔 값이다.
     그 자리에 로고를 넣으면 <세로 가운데가 6.5px 위로> 뜬다.
     카드가 104 인데 칸의 가운데가 45.5 에 있기 때문이다.

   ★ 로고는 삐져나올 이유가 없다. 칸을 카드에 맞추면 가운데가 저절로 맞는다.
   ★ 오른쪽 여백도 넉넉히 — 로고는 글자라 가장자리에 붙으면 잘린 것처럼 보인다. */
.partner__art--logo{
  top:0;
  height:104px;          /* .partner 와 같은 높이 */
  right:24px;            /* 기본 8 → 24 */
  width:104px;
}

/* ★★ 파트너 그림을 크게. (레드 2026-09-13 「파트너이미지 이렇게 크게좀 부탁해」)

   카드는 390×104 인데 그림 칸이 117 이라 인물이 작게 앉아 있었다.
   칸을 키우고 위로 더 올린다 — 머리가 카드 밖으로 나갈수록 한 장면처럼 보인다.

   ⚠ 왼쪽 글자(이름)를 덮으면 안 된다. 그래서 <오른쪽으로만> 키운다.
     카드 폭 390 에서 이름이 쓰는 자리를 빼면 오른쪽 절반이 남는다. */
.partner__art{
  width:170px; height:170px;
  top:-56px;            /* 104 짜리 카드 위로 56 나간다 */
  right:6px;
}

/* ★★ 그림은 <카드 밑선에 앉힌다> (레드 2026-09-13 「하단 이렇게 맞춰주고」)

   전에는 칸이 top:-56 + height:170 이라 밑이 114 였다 — 카드(104)보다 10 아래다.
   세 장 모두 같은 10 이라 <서로는 맞았지만> 셋 다 카드 밖으로 발이 나와,
   카드에 앉은 것이 아니라 카드를 밟고 선 것처럼 보였다.

   위(top) 대신 <아래(bottom)를 못 박는다.> 그래야 칸 크기를 나중에 바꿔도
   밑선이 따라 흔들리지 않는다 — 위를 못 박으면 높이를 고칠 때마다 발이 뜬다.

   ⚠ .partner-row 는 overflow-x:auto 다. 그러면 세로도 auto 가 되어(명세)
     <위아래로도 잘린다.> 그림이 2px 올라가므로 행의 위 여백을 그만큼 넉넉히 준다 —
     안 그러면 머리 끝이 잘린다. */
.partner__art{ top:auto; bottom:0; }
.partner-row{ padding-top:28px; }

/* ★★ 글자가 그림보다 앞에 온다 (레드 2026-09-13 「글자가 이미지보다 앞으로」)

   그림 칸은 글자보다 <뒤에> 있다. DOM 순서로는 그림이 나중이라 저절로 위에 깔려
   「ONE Championship」의 끝 글자를 벨트가, 「Black Mountain」을 트로피가 덮었다.

   ⚠ 글자에 z-index 를 주려면 <자리를 잡아야> 한다(static 에는 안 먹는다).
   ⚠ 흰 글자가 밝은 그림 위에 올라앉으므로 <그림자를 깐다.> 없으면 트로피의
     흰 면 위에서 글자가 사라진다 — 앞으로 보낸 뜻이 없어진다. */
.partner__label,
.partner__name{
  position:relative; z-index:1;
  text-shadow:0 1px 6px rgba(5, 8, 15, .75), 0 0 2px rgba(5, 8, 15, .9);
}

/* 로고는 그대로 카드 안에 둔다 — 글자라 잘리면 안 읽힌다.
   ⚠ .partner__art 를 키웠으니 여기서 다시 못 박는다. */
.partner__art--logo{
  width:120px; height:104px;
  top:0;
  right:24px;
}


/* ==========================================================================
   프로필 아바타 — 시안 그대로 (레드 2026-09-15 avatar.html)

   ★ 이미지 0장. 육각형도 테두리도 CSS 로 그린다 — 파일이 없으니 등급이
     늘어도 올릴 것이 없다.
   ⚠ 시안의 <미리보기 부분>(body · .demo · h1 …)은 안 가져왔다. 그것은
     시안을 홀로 띄우기 위한 것이라, 우리 앱에 넣으면 전역을 물들인다.
   ⚠ 크기는 --wav-size 하나로 정한다. 머리글은 아래에서 우리 값을 준다.
   ========================================================================== */
/* ═══════════ 아바타 컴포넌트 ═══════════ */
.wav{
  --wav-size:40px;
  --wav-edge-1:#F2F6FC;   /* 테두리 밝은 쪽 */
  --wav-edge-2:#AFBDD1;
  --wav-edge-3:#5F718B;   /* 테두리 어두운 쪽 */
  --wav-face-1:#1A3055;   /* 안쪽 위 */
  --wav-face-2:#0A1728;   /* 안쪽 아래 */
  --wav-ink:#EAF1FF;

  position:relative;
  flex:none;
  display:inline-grid;
  place-items:center;
  width:var(--wav-size);
  height:var(--wav-size);
  /* 육각형 — 위아래가 뾰족한 형태 */
  clip-path:polygon(50% 0.5%, 93.5% 25.25%, 93.5% 74.75%, 50% 99.5%, 6.5% 74.75%, 6.5% 25.25%);
  background:linear-gradient(155deg,
    var(--wav-edge-1) 0%,
    var(--wav-edge-2) 42%,
    var(--wav-edge-3) 100%);
  vertical-align:middle;
  user-select:none;
}

/* 안쪽 면 — 테두리 두께는 inset 값 (기본 = 크기의 6%) */
.wav::before{
  content:"";
  position:absolute;
  inset:calc(var(--wav-size) * .06);
  clip-path:polygon(50% 0.5%, 93.5% 25.25%, 93.5% 74.75%, 50% 99.5%, 6.5% 74.75%, 6.5% 25.25%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 46%),
    linear-gradient(165deg, var(--wav-face-1) 0%, var(--wav-face-2) 100%);
}

/* 등급 표기 : Lv + 숫자 */
.wav__lv{
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  gap:calc(var(--wav-size) * .015);
  font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:900;
  font-size:calc(var(--wav-size) * .215);   /* "Lv" 크기 */
  line-height:1;
  letter-spacing:-.01em;
  color:var(--wav-ink);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.wav__num{                                /* 숫자 — 조금 더 크게 */
  font-style:normal;
  font-size:calc(var(--wav-size) * .33);
  letter-spacing:-.03em;
}

/* 프로필 사진이 있을 때 */
.wav__img{
  position:relative;
  z-index:1;
  width:calc(100% - var(--wav-size) * .12);
  height:calc(100% - var(--wav-size) * .12);
  object-fit:cover;
  clip-path:polygon(50% 0.5%, 93.5% 25.25%, 93.5% 74.75%, 50% 99.5%, 6.5% 74.75%, 6.5% 25.25%);
}

/* 작은 크기에서는 테두리가 뭉개지지 않게 살짝 얇게 */
@media (max-width:640px){
  .wav{--wav-size:36px}
}


/* ---- 우리 머리글에 앉히기 ------------------------------------------------ */
/*
  ⚠ .profile__tier 가 이미 제 크기와 모양을 들고 있다. 둘이 겹치면 육각형이
    찌그러지므로, 여기서 <아바타 쪽 규칙만 남기고> 옛 것을 눌러 둔다.
*/
.profile__tier.wav{
  --wav-size:34px;
  background-image:linear-gradient(155deg,
    var(--wav-edge-1) 0%, var(--wav-edge-2) 42%, var(--wav-edge-3) 100%);
  border:0;
  border-radius:0;
}
@media (max-width:640px){
  .profile__tier.wav{ --wav-size:30px; }
}