/* ==========================================================================
   라이브 카지노 — 갈래 탭 (시안 casino.css .cz-types)

   ⚠ 칩 줄과 <층위가 다르다>. 칩은 카지노 · 슬롯 · 라이브를 오가는 줄이고,
     이쪽은 라이브 안에서 바카라 · 블랙잭을 고르는 줄이다 — 그래서 모양을 달리한다.
   ========================================================================== */
.cz-types{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line);
}
.cz-types::-webkit-scrollbar{ display:none; }
.cz-type{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  height:48px; padding:0 16px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
  color:var(--text-3); font-weight:500; white-space:nowrap;
  transition:color var(--t-color), border-color var(--t-color);
}
.cz-type svg{ width:18px; height:18px; }
.cz-type:hover{ color:var(--text); }
/* 옆 숫자 — 서버가 센 값이다. 화면이 세면 쪽을 넘길 때마다 흔들린다 */
.cz-type em{ font-style:normal; font-size:var(--fs-xs); color:var(--text-5); font-variant-numeric:tabular-nums; }
.cz-type[aria-selected="true"]{ color:var(--text); font-weight:800; border-bottom-color:var(--primary); }
.cz-type[aria-selected="true"] em{ color:var(--primary); }

/* 게임사 줄 — 라이브 첫 화면에서 늘 위에 선다 */
.cz-vend{ scroll-margin-top:calc(var(--header-h) + 16px); }

@media (max-width:1023px){
  .cz-type{ height:42px; padding:0 12px; font-size:13px; }
}

/* ==========================================================================
   슬롯 게임사 카드 — 시안 casino.css 160~183 (레드 2026-09-26)
     ┌───────────────┐
     │  [정사각 그림]  │  .provider__pic   aspect-ratio:1 · cover
     ├───────────────┤
     │ 이름  14개   › │  .provider__body  높이 40 · 0 8px 0 12px · gap 6
     └───────────────┘
   ⚠ 썸네일이 없는 게임사는 이름 첫 글자 배지(.provider__mark)로 떨어진다.
   ========================================================================== */
.provider{
  position:relative; display:grid; overflow:hidden;
  /* ★★ 높이를 아래 게임 줄과 <같게> 잡는다 (레드 2026-09-26
       「인기게임사 카드 크기 하단에 게임크기랑 맞추기 / 이미지 + 게임사명 높이
       = 게임카드 높이」). 게임 카드는 .gamecard 가 aspect-ratio:3/4 다.
     전에는 <정사각 그림 + 40> 이라 칸 폭이 같아도 12px 쯤 짧았다.
   ★ 1fr auto — 이름 줄이 제 높이를 먼저 가져가고 그림이 나머지를 다 먹는다.
   ⚠ 그래서 그림 칸은 더 이상 정사각이 아니다. cover 가 좌우를 조금 자른다 —
     게임사 썸네일은 로고가 가운데라 잘려도 로고는 남는다. */
  grid-template-rows:auto auto;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-1);
  transition:border-color .15s, transform .2s ease;
}
.provider:hover{ border-color:var(--primary); transform:translateY(-3px); }
/* 폭에 맞춰 높이가 선다 — 높이를 못박으면 넓은 칸에서 그림 아래 로고가 잘린다 */
.provider__pic{ position:relative; aspect-ratio:1; min-height:0; overflow:hidden;
  background:var(--surface-2); }
/* 썸네일이 정사각이라 칸도 정사각 — 어느 쪽도 잘리지 않는다 */
.provider__pic img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.provider:hover .provider__pic img{ transform:scale(1.06); }
.provider__mark{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--surface-3), var(--surface-1));
  font-family:var(--font); font-size:40px; font-weight:800; color:rgba(255,255,255,.85);
}
.provider__body{ display:flex; align-items:center; gap:6px; height:40px; padding:0 8px 0 12px; }
.provider__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--fs-sm); font-weight:700; }
.provider__count{ flex:none; font-size:var(--fs-xs); color:var(--text-5); }
.provider__go{
  flex:none; display:grid; place-items:center; width:26px; height:26px; margin-left:auto;
  border-radius:var(--r); background:var(--surface-2); color:var(--text-3);
  transition:background-color .15s, color .15s;
}
.provider__go svg{ width:14px; height:14px; }
.provider:hover .provider__go{ background:var(--primary); color:#fff; }

/* 로비 줄 — 일곱 장이 줄 폭에 딱 맞게 (폭을 못박으면 일곱째가 잘린다) */
/* ★★ 게임 줄과 <똑같은 칸·똑같은 사이> (레드 2026-09-26 「간격도맞춰주고」).

     ⚠ 기준을 두 번 틀렸다. 게임 줄은 .game-rail 도 --gap-card 도 아니라
       <.ex-rail> 이고, 그 값은 exit.css 에 있다 — 152px 고정 · gap 12px.
       7등분으로 잡으면 화면 폭마다 칸이 달라져 두 줄이 절대 안 맞는다.
     ⚠ 고칠 일이 생기면 .ex-rail <한 곳만> 고치고 여기는 따라오게 둔다. */
.cz-rail--providers{ display:grid; grid-auto-flow:column;
  grid-auto-columns:152px; gap:12px; }
/* ⚠ grid item 의 기본 min-width 는 auto — 안쪽이 칸보다 크면 칸을 밀어낸다 */
.cz-rail--providers .provider{ width:auto; min-width:0; }
.provider__pic, .provider__body{ min-width:0; }

@media (max-width:1023px){
  .cz-rail--providers{ grid-auto-columns:152px; gap:12px; }
  .provider__body{ height:34px; padding:0 6px 0 8px; }
  .provider__go, .provider__count{ display:none; }
}

/* ==========================================================================
   카지노 · 슬롯 — 시안 치수 (레드 2026-09-26 「디자인만 똑같이」)
   시안 casino.css 토큰: bar-h 48 · chip-h 36 · promo-h 216 · gap 16 · copy 340
   ⚠ 데이터(프로모 장수 · 게임사 수)는 우리 것이다. 치수만 맞춘다.
   ========================================================================== */
.casino-page, .cz{
  --cz-gap:16px; --cz-bar-h:48px; --cz-promo-h:216px; --cz-promo-copy:340px;
}

/* 프로모 — 한 줄에 두 장, 옆으로 넘김. 높이는 고정 */
.promo-row{ display:flex; gap:16px; 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% - 8px); scroll-snap-align:start;
  min-height:0; height:216px; padding:20px; }
/* ⚠ 글 칸 폭은 px 로 못박는다 — padding % 는 <줄 폭> 기준이라 두 장짜리 줄에서
     두 배로 잡혀 글이 한 글자씩 꺾인다 (시안 주석과 같은 함정) */
.promo > *:not(.promo__art){ max-width:340px; }
.promo-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.promo-dots button{ width:7px; height:7px; border-radius:var(--r-full);
  background:var(--line-2, var(--line)); transition:width .2s, background-color .2s; }

/* 검색줄 — 검색칸 + 랜덤 + 고르개 둘. 높이 48 */
.filterbar{ display:flex; align-items:center; gap:16px; }
.filterbar .searchbox{ height:48px; padding:0 8px 0 20px; gap:12px; }
.filterbar .searchbox input{ font-size:var(--fs-lg); }
/* 랜덤 — 검색칸 <안> 오른쪽 */
.cz-search__btn{ flex:none; display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); color:var(--text-2); font-size:var(--fs-sm); font-weight:700; }
.cz-search__btn:hover{ border-color:var(--primary); color:var(--text); }
/* 고르개 — 「정렬 | 인기순 ⌄」 */
.filterbar .picker{ flex:none; }
.filterbar .picker__btn{ height:48px; padding:0 40px 0 16px; font-size:var(--fs-lg); }

/* ⚠⚠ 칸·사이는 <위 한 곳에서만> 정한다 (레드 2026-09-26).
     여기에 7등분 · 16px 이 또 있어서, 위에서 152px · 12px 로 고쳐도
     <뒤에 있는 이것이 이겨> 화면이 그대로였다. 실측으로 잡았다
     (게임사 157.7×210.3 vs 게임 152×202.7).
   ★ 여기는 넘칠 때 옆으로 미는 것만 맡는다. */
.cz-rail--providers{ overflow-x:auto; scrollbar-width:none; }
.cz-rail--providers::-webkit-scrollbar{ display:none; }

/*
   ★ PC 홈 슬롯 줄 = 위 라이브 카지노 줄과 <같은 칸 · 같은 사이> (레드 2026-09-30 「PC 홈화면 슬롯 게임사 카드
     사이즈 위에 카지노 게임사 카드 사이즈로 맞춰줄래」).
     라이브 줄(.game-rail .gamecard)은 한 줄에 일곱 장을 꽉 채우고(간격 --gap-card), 이 줄은 152px · 12px 고정이라
     넓은 화면에서 폭 · 간격이 어긋나고 여덟째가 잘려 보였다.
   ⚠ 홈에만 건다(.home-slotrail). 카지노 화면 슬롯 줄은 게임 줄(.ex-rail 152px)에 맞춘 값 그대로 둔다(09-26 결정).
   ⚠ 모바일은 손대지 않는다.
*/
@media (min-width:1024px){
  .home-slotrail .cz-rail--providers{
    grid-auto-columns:calc((100% - 6 * var(--gap-card)) / 7);
    gap:var(--gap-card);
  }
}

@media (max-width:1023px){
  .promo-row > .promo{ flex:0 0 86%; height:auto; min-height:140px; padding:12px; }
  .promo > *:not(.promo__art){ max-width:none; }
  .filterbar{ gap:10px; }
  .filterbar .searchbox{ height:44px; }
  .filterbar .picker__btn{ height:44px; }
  .cz-rail--providers{ grid-auto-columns:152px; gap:12px; }
}

/*
   ⚠ 라이브 게임사는 <격자가 아니라 일곱 칸 가로 줄>이다 (레드 2026-09-26 「7개로 맞추고 <> 넣자」).
     업체마다 수가 다르다(WC 8 · SKY 7) — 열 수를 박으면 업체를 바꿀 때 카드 크기가 달라진다.
     .cz-rail--providers 가 칸을 일곱으로 고정하고, 넘치면 ‹ › 로 민다.
*/

/* ==========================================================================
   카지노 — 글자 · 둥글기를 시안 값으로 (레드 2026-09-26 화면 대조)
   ⚠ 시안은 html{zoom:.9} 라 재 보이는 값이 다르다. <지정값>끼리 맞춘다.
   ========================================================================== */
/* 갈래 탭 — [아이콘][이름][개수] */
.cz-type{ height:48px; font-size:14px; }
.cz-type svg{ width:16px; height:16px; }
.cz-type em{ font-size:12px; }

/* 검색칸 · 고르개 — 시안은 둘 다 r14 · 16px */
.filterbar .searchbox{ border-radius:14px; }
.filterbar .searchbox input{ font-size:16px; }
.filterbar .searchbox > svg{ width:22px; height:22px; }
.filterbar .picker__btn{ border-radius:14px; font-size:16px; }

/*
   섹션 제목 — 아이콘 + 22px, 개수 14px.
   ⚠ 카지노 화면에는 .cz 도 .casino-page 도 <없다>. 처음에 그 이름으로 썼다가
     규칙이 아무 데도 안 걸렸다 — 실측이 잡아 줬다.
   ⚠ 슬롯 · 라이브 · 게임 페이지가 같은 .sec__head 를 쓴다. 카지노 줄에만 걸리게
     .cz-vend · .cz-rail · [data-rail] 안쪽으로 좁힌다.
*/
.cz-vend .sec__title,
.cz-rail .sec__title,
[data-rail] .sec__head h2,
.sec__head > .sec__title{ font-size:22px; font-weight:700; }
.cz-vend .sec__count,
.cz-rail .sec__count,
[data-rail] .sec__count,
.sec__head > .sec__title > .sec__count{ font-size:14px; }

/* 고르개 — 라벨과 값 사이에 구분선 (시안 .cz-picker__label::after) */
.filterbar .picker__label{ font-weight:700; color:var(--text); }
.filterbar .picker__label::after{ content:"|"; margin-left:8px; color:var(--text-5); font-weight:400; }
.filterbar .picker__now{ max-width:220px; overflow:hidden; text-overflow:ellipsis; color:var(--text-3); }

/*
   섹션 제목 — 아이콘과 글자를 <한 줄>에 (시안 .cz-sec__title).
   ⚠ display:flex 가 없으면 svg 가 블록처럼 <아이콘이 줄을 먹는다> — 윗줄로 떨어진다.
   ⚠ 아이콘 색은 브랜드색이다. 안 주면 글자색(흰색)을 물려받아 시안과 달라진다.
*/
.cz-vend .sec__title,
.cz-rail .sec__title,
[data-rail] .sec__head h2,
.sec__head > .sec__title{ display:flex; align-items:center; gap:8px; }
.cz-vend .sec__title svg,
.cz-rail .sec__title svg,
[data-rail] .sec__head h2 svg,
.sec__head > .sec__title svg{ flex:none; width:22px; height:22px; color:var(--primary); }
/* 갈래 탭 아이콘도 브랜드색 — 시안 .cz-type svg */
.cz-type svg{ flex:none; color:var(--text-4); }
.cz-type[aria-selected="true"] svg{ color:var(--primary); }

/*
   개수는 제목 바로 옆 (시안 .cz-sec__title > .cz-sec__count).
   ⚠ 머리줄이 flex 라 제목에 margin-right:auto 가 없으면 개수가 <오른쪽 끝>으로 밀린다.
*/
.cz-vend .sec__head, .cz-rail .sec__head, [data-rail] .sec__head{ display:flex; align-items:center; gap:8px; }
.cz-vend .sec__title, .cz-rail .sec__title, [data-rail] .sec__head h2{ margin-right:0; }
.cz-vend .sec__count, .cz-rail .sec__count, [data-rail] .sec__count{ margin-right:auto; }

/* ⚠ ‹ › 는 오른쪽 끝이다 (레드 2026-09-26). 개수가 남은 자리를 밀어낸다 */
/* ★★ 줄 제목은 시안 .rail__head 그대로다 (레드 2026-09-26
     「디자인시안처럼 개수는 없애고 전체보기는 오른쪽으로 맞추기」).

     시안    [아이콘 제목] ······················ [모두보기] [‹] [›]
     우리(전) [아이콘 제목] [개수] ····· [전체보기] ····· [‹] [›]

   ⚠ 밀어내는 auto 가 <‹ › 에> 걸려 있어서, 전체보기가 제목과 ‹ › 사이
     한가운데 떠 있었다. 시안은 auto 를 <제목에> 건다 — 그러면 뒤의 것이
     전부 오른쪽 끝에 붙어 선다.
   ⚠ 개수는 시안에 없다. 목록 제목과 고르개가 이미 말한다. */
.cz-vend .sec__head > h2, .cz-rail .sec__head > h2, [data-rail] .sec__head > h2{ margin-right:auto; }
.cz-vend .sec__head .sec__count,
.cz-rail .sec__head .sec__count,
[data-rail] .sec__head .sec__count{ display:none; }

.cz-vend .sec__count, .cz-rail .sec__count, [data-rail] .sec__count{ margin-right:0; }

/* 목록 아래 「더 보기」 — 가운데 (레드 2026-09-26) */
.ex-more{ display:flex; justify-content:center; margin-top:20px; }

/* ==========================================================================
   폰 — 검색 줄을 <두 줄로> 편다 (레드 2026-09-26)

     「모바일 검색시 하단칩제거 / 그리고 게임사선택은 2번째줄로 가로 100%로가자
       / 검색바가 아예사라지네(카지노도 동일)」

     ┌──────────────────────────┐
     │ [🔍 검색............] [인기순 ▾] │  1줄
     ├──────────────────────────┤
     │ [게임사 — 가로 100% ▾]          │  2줄
     └──────────────────────────┘
       (칩 줄 없음)

   ⚠ 원인은 flex-wrap:nowrap 이었다. 셋을 한 줄에 억지로 밀어넣어
     검색칸이 0 까지 찌부러졌다 — 돋보기만 남아 <검색바가 사라진> 것처럼 보였다.
   ⚠ 슬롯·카지노(라이브) 둘 다 같은 .filterbar 를 쓴다 — 한 번에 고쳐진다.
   ========================================================================== */
@media (max-width:1023px){
  .filterbar{ flex-wrap:wrap; row-gap:10px; }
  /* 검색칸이 1줄을 차지하고 정렬이 옆에 붙는다. min-width:0 이라야 실제로 줄어든다 */
  .filterbar .searchbox{ flex:1 1 200px; min-width:0; }
  /* ★ 게임사는 <마지막> 고르개다. 2줄로 내려 가로를 다 쓴다 */
  .filterbar .picker:last-child{ flex:1 0 100%; }
  .filterbar .picker:last-child .picker__btn{ width:100%; }
  /* ★ 칩 줄은 폰에서 걷는다 — 바로 위 고르개가 같은 일을 한다 */
  .vendor-chips-wrap{ display:none; }
}

/* ★★ 카드 높이는 <로비 줄 안에서만> 게임 카드와 같다 (레드 2026-09-26).

   ⚠⚠ 처음에 .provider 전체에 aspect-ratio:3/4 를 걸었다가
     <게임사 목록 페이지(/casino/slot/vendors)를 깨뜨렸다.> 그 화면은
     .provider-row(flex) 라 칸 폭이 정해져 있지 않아, 높이가 폭에 묶이자
     카드 40장이 <세로 막대기>로 찌부러졌다.
   ★ 그래서 줄 안(.cz-rail--providers)에서만 건다. 거기는 칸 폭이 152px 로
     못박혀 있어 높이가 따라올 수 있다. */
.cz-rail--providers .provider{
  aspect-ratio:3 / 4; grid-template-rows:1fr auto;
  /* ⚠⚠ <폰에서 높이를 못박는 규칙이 따로 있다> — components.css 의
       @media (max-width:1024px){ .provider{ flex:0 0 140px; height:112px } }.
     그래서 폰에서만 게임사 카드가 112px 로 눌려 게임 카드보다 작았다.
     PC 에는 이 규칙이 없어 데스크톱 실측은 계속 통과했다 —
     레드가 폰 화면으로 네 번 짚어 준 뒤에야 찾았다 (2026-09-26).
   ★ 여기서 <풀어> 준다. height 는 비율이 정하고, flex 는 grid 칸이 정한다. */
  height:auto; flex:none;
}

/* ★ 아주 좁은 폰 — 게임 줄(.ex-rail)이 520px 아래에서 124px 로 준다(exit.css 716행).
     게임사 줄만 152px 로 남아 <폰에서만> 두 줄이 다시 어긋났다
     (레드 2026-09-26 「모바일 게임사카드 아직 그대로임」). */
@media (max-width:520px){
  .cz-rail--providers{ grid-auto-columns:124px; }
}
/* ★ 폰 홈 — 라이브 카지노(158px)가 슬롯 게임사(124px)보다 훨씬 컸다. 기획팀 요청으로 <둘 다 중간 140px> 로 맞춘다
     (레드 2026-09-28 「카지노 슬롯 중간사이즈로 둘다 맞춰」). 게임사 카드 줄 전부에 걸어 카지노 화면도 같은 크기가 된다.
     ⚠ 게임 카드 줄은 건드리지 않는다 — .game-rail.vendor-rail 은 look="feature" 게임 줄(카지노 인기 게임 등)도
       같은 클래스라, 게임사 카드(.vendorcard)에만 건다. */
@media (max-width:520px){
  .cz-rail--providers{ grid-auto-columns:140px; }
  .game-rail.vendor-rail .vendorcard{ flex:0 0 140px; }
}

/* ==========================================================================
   게임사 목록 — 시안 .cz-providers (레드 2026-09-26 「제대로 안노옴」)

     시안 casino.css 159행 : repeat(auto-fill, minmax(176px, 1fr)) · gap 16
     폰(1023 아래)         : minmax(104px, 1fr)

   ⚠ 여기 카드는 <정사각 그림 + 이름 줄>이다. 로비 줄의 3/4 비율을 여기까지
     끌고 오지 않는다 — 그 규칙은 .cz-rail--providers 안에서만 건다.
   ========================================================================== */
.cz-providers{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr));
  gap:var(--gap-card);
}
@media (max-width:1023px){
  .cz-providers{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
}

/* ⚠⚠ 그림 칸의 정사각(aspect-ratio:1)은 <시안 기본값>이다 — 걷으면 안 된다.
     한 번 걷었다가 게임사 목록 페이지에서 카드 높이가 58px(이름 줄만)이 됐다.
     그 화면은 grid-template-rows:auto auto 라 그림 칸이 제 높이를 스스로 말해야 한다.
   ★ 로비 줄에서만 푼다. 거기는 1fr 이 남은 높이를 주므로 정사각이 방해가 된다. */
.cz-rail--providers .provider__pic{ aspect-ratio:auto; }

/* ==========================================================================
   게임사 새 썸네일 (레드 2026-09-28) — PC 정사각 · 모바일 3:4
   ★ <picture> 가 폭에 따라 그림을 고른다(VendorsPage ProviderCard). 칸을 꽉 채우게 한다.
   ★ 모바일(1023↓)은 <카드 전체가 그림>이다 — 레드 선택 「카드 전체를 그림으로」.
     로고가 그림 안에 있어 이름 줄은 숨긴다. 로비 줄 카드(124×165, 3:4)와 그림 비율이 같아 잘리지 않는다.
   ⚠ components.css 의 폰 규칙(.provider{ height:112px })을 여기서 푼다 — 안 풀면 3:4 그림이 112px 에서 잘린다.
   ⚠ 그림이 없는 게임사(.has-art 없음)는 예전처럼 글자 배지 + 이름 줄 그대로다.
   ========================================================================== */
.provider__pic picture{ display:block; width:100%; height:100%; }
@media (max-width:1023px){
  .provider.has-art{ grid-template-rows:1fr; height:auto; flex:none; }
  .provider.has-art .provider__body{ display:none; }
  .provider.has-art .provider__pic{ aspect-ratio:3 / 4; }
}

/* ==========================================================================
   안내 상자 위아래 여백 (레드 2026-09-26 「이거 위아래 여백최대한 줄이자
   / 앞으로도 기억해두고」)

   ⚠ 시안도 28px 이지만 레드는 <그보다 더> 줄이라고 했다. 한 줄만 보이는
     접힌 상자라 28+28 이면 글자보다 빈 자리가 더 컸다.
   ★ 좌우는 그대로 둔다 — 오른쪽 64px 은 펴기 단추 자리다.
   ★ 이 선호는 <이 상자만>이 아니다. 레드는 화면의 위아래 빈 자리를 싫어한다.
   ========================================================================== */
.seo{ padding-block:14px; }
@media (max-width:1023px){ .seo{ padding-block:12px; } }

/* ★ 한 줄짜리 안내(.seo--lead) — 폰에서 <한 줄에> 맞춘다
     (레드 2026-09-26 「2줄되닌깐 한줄로 맞추자 / 여백줄이고 폰트사이즈 줄여서」).

   ⚠ 오른쪽 64px 은 <펴기 단추 자리>다. 이 안내에는 단추가 없으므로 그 자리를 걷는다.
     그것만으로 글자 폭이 60px 넘게 살아난다.
   ⚠ nowrap 은 글자 크기를 먼저 줄인 뒤에 건다. 순서가 바뀌면 말줄임이 먹는다. */
.seo--lead{ padding-inline:16px; }
@media (max-width:1023px){
  .seo--lead{
    padding:10px 14px; font-size:13px; line-height:20px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}

/* ★★ 라이브 · 슬롯 가운데 줄이 <손가락을 따라 움직였다> (레드 2026-09-27 「누르고 움직이면 돔이 따라 움직임」).
     overflow-x:auto 만 주면 명세상 세로도 auto 가 된다. 탭의 margin-bottom:-1px 때문에 내용이 상자보다 1px 커서
     줄이 <위아래로도> 구르고(글자가 밑줄 위로 밀려 올라간 스크린샷), 끝에 닿으면 바깥 쪽까지 끌려갔다.
   ① 세로 굴림을 끈다  ② 가로 끝에서 바깥으로 번지지 않게 한다. 쪽 전체의 세로 스크롤은 그대로 된다. */
.cz-types,
.cz-rail--providers,
.chip-row.scroll-x{
  overflow-y:hidden; overscroll-behavior-x:contain;
}

/* ==========================================================================
   ★★ 모바일 카지노 · 슬롯 검색줄 — [🔍][게임사 ▾][정렬 ▾] 한 줄 (레드 2026-09-27)
     ① 돋보기 단추 → 검색 모달   ② 검색칸 자리에 게임사 고르개(폭은 비율, 이름 길이와 무관)   ③ 정렬 그대로
     아래 줄로 내려가던 게임사(「전체」 가로 100%) 줄은 없어진다 — 위로 올라갔다.
   ⚠ 게임사 고르개가 <있을 때만>(.has-vendor) 이 모양이다. 없는 화면(즐겨찾기 · 신규 등)은 검색칸 그대로.
   ⚠ 격자 칸을 <이름으로> 잡는다. 전에는 .picker:last-child 로 게임사를 찾았는데, 고르개 순서가 바뀌면 틀린다.
   ========================================================================== */
.filterbar__search{ display:none; }
@media (max-width:1023px){
  .filterbar.has-vendor{
    display:grid; grid-template-columns:44px minmax(0,1fr) 32%; grid-template-areas:"s v o"; gap:8px;
  }
  .filterbar.has-vendor > .searchbox{ display:none; }
  .filterbar.has-vendor > .filterbar__search{
    grid-area:s; display:grid; place-items:center; width:44px; height:44px;
    border:1px solid var(--line); border-radius:14px; background:var(--surface-1); color:var(--text-3);
  }
  .filterbar.has-vendor > .filterbar__search:active{ background:var(--surface-2); }
  .filterbar.has-vendor > .picker{ grid-area:o; min-width:0; flex:none; }
  .filterbar.has-vendor > .picker--vendor{ grid-area:v; }
  .filterbar.has-vendor > .picker .picker__btn{ width:100%; min-width:0; padding:0 30px 0 12px; }
  .filterbar.has-vendor > .picker .picker__label{ display:none; }
  .filterbar.has-vendor > .picker .picker__now{ max-width:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}