/* ==========================================================================
   casino — 카지노 로비 · 라이브 카지노 · 슬롯 · 슬롯 게임사 화면
   whaley /casino 구도를 스카이시티 색으로 — whaley 파란 강조(--primary)는 골드로 옮겼다.
   클래스 접두어 cz-  (components.css 의 .filterbar · .select · .chips 와 겹치지 않게)
   근거: ../04-페이지/카지노로비.md · 라이브카지노.md · 슬롯.md · 슬롯게임사.md
         ../_분석/whaley/components-latest.css promo · chip · filterbar · picker · provider · seo
   ========================================================================== */
.cz{
  /* whaley 실측값 — 이 화면들에서만 쓰는 크기 */
  --cz-gap: 16px;           /* 카드 · 칸 사이 (whaley --gap-card) */
  --cz-bar-h: 48px;         /* 검색칸 · 고르개 높이 */
  --cz-chip-h: 36px;        /* 칩 높이 */
  --cz-promo-h: 216px;      /* 프로모 배너 높이 (592×216) */
  --cz-promo-copy: 340px;   /* 프로모 글 칸 폭 — whaley 252 + 여유. 나머지는 3D 그림 자리 */
  --cz-provider-w: 176px;   /* 슬롯 게임사 카드 176×128 */
  --cz-provider-h: 128px;
  --cz-cols: 7;             /* 게임 격자 열 수 (1200 폭에서 카드 158) */
  --cz-vendor-cols: 8;      /* 라이브 게임사 8곳 — 한 줄에 다 선다 */
}
.cz-page{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-xl); }   /* ⚠ 열 폭을 못박아야 가로 줄(rail)이 화면 밖으로 늘어나지 않는다 */
.cz-page > .feed{ margin-top:var(--gap-sm); }
.cz-stack{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-xl); }   /* ★ minmax(0,1fr) — 없으면 카드 그림 폭에 밀려 모바일에서 구역이 1900px 로 늘어난다 (2026-09-30) */   /* 로비 본문 묶음 (검색 중엔 통째로 숨긴다) */
.cz-rail{ margin-top:0; }                       /* 줄 사이는 .cz-stack gap 이 준다 */

/* ---- 프로모 배너 : 2장씩 · 옆으로 넘김 ------------------------------------ */
.cz-promo__row{
  display:flex; gap:var(--cz-gap); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.cz-promo__row::-webkit-scrollbar{ display:none; }
.cz-promo__card{
  /* gap 의 절반을 뺀다 — 안 빼면 둘째 장 끝이 잘려 다음 장이 비쳐 보인다 */
  flex:0 0 calc(50% - var(--cz-gap) / 2); scroll-snap-align:start;
  position:relative; overflow:hidden; height:var(--cz-promo-h);
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:var(--gap-lg);
  border:1px solid color-mix(in srgb, var(--promo-c) 22%, var(--line)); border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse 55% 90% at 82% 60%, color-mix(in srgb, var(--promo-c) 26%, transparent), transparent 70%),
    linear-gradient(110deg, var(--surface) 30%, color-mix(in srgb, var(--promo-c) 10%, var(--surface)));
  transition:border-color var(--t-fast);
}
.cz-promo__card:hover{ border-color:color-mix(in srgb, var(--promo-c) 60%, transparent); }
.cz-promo__card > *:not(.cz-promo__art){ position:relative; z-index:1; max-width:var(--cz-promo-copy); }
/* ⚠ 글 칸 폭은 %를 padding 에 쓰지 않는다 — padding % 는 <부모(줄) 폭> 기준이라 카드 두 장짜리 줄에서 두 배로 잡혀 글이 한 글자씩 꺾였다 */
.cz-promo__badge{
  display:inline-flex; align-items:center; gap:8px; width:max-content; height:36px; padding:0 12px;
  border-radius:var(--r); background:var(--bg-deep); font-size:var(--fs-sm); font-weight:var(--fw-bold);
}
.cz-promo__badge svg{ width:16px; height:16px; color:var(--promo-c); }
.cz-promo__title{ font-size:var(--fs-2xl); font-weight:900; line-height:1.3; }
.cz-promo__desc{
  font-size:var(--fs-md); font-weight:500; line-height:24px; color:var(--text-sub); word-break:keep-all; white-space:pre-line;   /* 줄바꿈은 데이터의 \n */
}
.cz-promo__btn{
  white-space:nowrap; margin-top:auto; display:inline-flex; align-items:center; flex:none; height:44px;  /* 세로 flex 라야 auto 여백이 버튼을 바닥으로 민다 */
  padding:0 18px;
  border-radius:var(--r-lg); background:var(--promo-c); color:var(--accent-ink); font-weight:var(--fw-bold);
  box-shadow:0 6px 20px color-mix(in srgb, var(--promo-c) 30%, transparent);
}
/* 3D 그림 — 오른쪽에서 살짝 넘쳐 입체감. 투명 PNG 라 바탕을 따로 깔지 않는다 */
.cz-promo__art{
  position:absolute; right:3%; top:50%; z-index:0; width:auto; height:90%; max-width:44%; object-fit:contain;   /* 틀 안에서만 — 넘치면 위아래가 잘렸다 */
  transform:translateY(-50%); filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.cz-promo__card:hover .cz-promo__art{ transform:translateY(-50%) scale(1.05); }
.cz-promo__dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.cz-promo__dots button{ width:7px; height:7px; border-radius:var(--r-full); background:var(--line-strong); transition:width var(--t), background-color var(--t); }
.cz-promo__dots button:hover{ background:var(--text-sub); }
/* 켜진 점은 길어진다 — 색만 바꾸면 어두운 판에서 잘 안 보인다 */
.cz-promo__dots button.is-on{ width:18px; background:var(--promo-c); }

/* ---- 칩 줄 ---------------------------------------------------------------- */
.cz-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.cz-chips::-webkit-scrollbar{ display:none; }
.cz-chip{
  flex:none; display:inline-flex; align-items:center; gap:6px; height:var(--cz-chip-h); padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text-sub);
  transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cz-chip svg{ width:18px; height:18px; }
.cz-chip:hover{ background:var(--surface-2); color:var(--text); }
.cz-chip.is-active{ background:var(--accent); border-color:var(--accent-line); color:var(--accent-ink); }   /* 예전 --promo-c(프로모 카드 전용 값)가 칩에는 없어 비어 보였다 — 테마 채움으로 */

/* ---- 검색 줄 : 검색칸 + 고르개 ------------------------------------------- */
.cz-filter{ display:flex; align-items:center; gap:var(--cz-gap); }
.cz-search{
  flex:1; min-width:0; height:var(--cz-bar-h); display:flex; align-items:center; gap:12px; padding:0 8px 0 20px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); cursor:text;
  transition:border-color var(--t-fast);
}
.cz-search:focus-within{ border-color:var(--accent-line); box-shadow:0 0 0 2px var(--accent-soft); }
.cz-search > svg{ flex:none; width:22px; height:22px; color:var(--text-mute); }
.cz-search input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:var(--text); font-size:var(--fs-lg); }
.cz-search input::placeholder{ color:var(--text-mute); }
.cz-search input::-webkit-search-cancel-button{ filter:invert(.6); }
.cz-search__btn{ flex:none; border-color:var(--line); background:var(--surface-2); }

.cz-picker{ position:relative; flex:none; }
.cz-picker__btn{
  position:relative; height:var(--cz-bar-h); display:flex; align-items:center; gap:8px; padding:0 40px 0 16px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  font-size:var(--fs-lg); white-space:nowrap; transition:border-color var(--t-fast);
}
.cz-picker__btn:hover{ border-color:var(--line-strong); }
.cz-picker__label{ font-weight:var(--fw-bold); }
.cz-picker__label::after{ content:"|"; margin-left:8px; color:var(--text-mute); font-weight:var(--fw-regular); }
.cz-picker__now{ max-width:220px; overflow:hidden; text-overflow:ellipsis; color:var(--text-sub); }
.cz-picker__btn svg{ position:absolute; right:12px; width:18px; height:18px; color:var(--text-sub); transition:transform var(--t); }
.cz-picker.is-open .cz-picker__btn{ border-color:var(--accent-line); }
.cz-picker.is-open .cz-picker__btn svg{ transform:rotate(180deg); }
.cz-picker__menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:var(--z-drop);
  min-width:100%; max-height:min(52 * var(--vh), 420px); overflow-y:auto; padding:6px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); box-shadow:var(--shadow-pop);
  display:grid; gap:2px;
}
.cz-picker__item{
  display:flex; align-items:center; height:40px; padding:0 12px; border-radius:6px;
  font-size:var(--fs-sm); font-weight:500; color:var(--text-sub); white-space:nowrap; cursor:pointer;
  transition:background-color var(--t-fast), color var(--t-fast);
}
.cz-picker__item:hover, .cz-picker__item:focus{ outline:none; background:var(--surface-3); color:var(--text); }
.cz-picker__item.is-on{ color:var(--accent-fg); font-weight:var(--fw-bold); }
.cz-picker__item.is-on::after{ content:"✓"; margin-left:auto; padding-left:16px; }

/* ---- 섹션 머리 · 격자 ----------------------------------------------------- */
.cz-sec{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--cz-gap); scroll-margin-top:calc(var(--header-h) + var(--gap-lg)); }
.cz-sec__head{ display:flex; align-items:center; gap:var(--gap-sm); min-height:40px; }
.cz-sec__title{ display:flex; align-items:center; gap:8px; margin-right:auto; font-size:var(--fs-2xl); font-weight:var(--fw-bold); }
.cz-sec__title svg{ width:22px; height:22px; color:var(--accent-fg); }
.cz-sec__count{ font-size:var(--fs-sm); color:var(--text-mute); font-variant-numeric:tabular-nums; }
/* 격자 — 7열 · 3:4 카드. 호버 때 들리는 카드가 잘리지 않게 여유는 카드 쪽이 아닌 격자 위에서 준다 */
.cz-grid{ display:grid; grid-template-columns:repeat(var(--cz-cols), minmax(0, 1fr)); gap:var(--cz-gap); }
.cz-grid--vendors{ grid-template-columns:repeat(var(--cz-vendor-cols), minmax(0, 1fr)); }
/* 게임사 < > — 휴대폰에서만 보인다 */
.cz-vnavs{ display:none; gap:4px; }
.cz-vnav{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--surface-2); color:var(--text-sub); transition:color var(--t-fast), background-color var(--t-fast); }
.cz-vnav:hover{ color:var(--accent-fg); }
.cz-vnav:disabled{ opacity:.35; pointer-events:none; }
.cz-vnav svg{ width:14px; height:14px; }
.cz-results .state, .cz-sec .state{ border:1px dashed var(--line); border-radius:var(--r-lg); }

/* 라이브 갈래 탭 — 밑줄형 (칩 줄과 다른 층위라 모양을 달리한다) */
.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-sub); font-weight:500; transition:color var(--t-fast), border-color var(--t-fast);
}
.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-mute); font-variant-numeric:tabular-nums; }
.cz-type[aria-selected="true"]{ color:var(--text); font-weight:var(--fw-bold); border-bottom-color:var(--accent-line); }
.cz-type[aria-selected="true"] em{ color:var(--accent-fg); }

/* ---- 슬롯 게임사 카드 176×128 — 위 그림(로고가 든 자리) + 아래 이름 줄 ---- */
.cz-providers{ display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--cz-provider-w), 1fr)); gap:var(--cz-gap); }
.provider{
  position:relative; display:grid; grid-template-rows:auto auto; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:border-color var(--t-fast), transform .2s ease;
}
.provider:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.provider__pic{ position:relative; aspect-ratio:1; min-height:0; overflow:hidden;   /* 폭에 맞춰 높이가 선다 — 높이를 못박으면 넓은 칸에서 그림 아래 로고가 잘렸다 */ background:hsl(var(--h) 45% 18%); }
/* 대표 그림은 정사각(170)이다. 칸은 가로로 길어 위아래가 잘리므로 로고가 있는 아래쪽(62%)을 기준으로 맞춘다 */
.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, hsl(var(--h) 60% 36%), hsl(var(--h) 65% 14%));
  font-family:var(--font-display); 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:var(--fw-bold); }
.provider__count{ flex:none; font-size:var(--fs-xs); color:var(--text-mute); }
.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-sub); transition:background-color var(--t-fast), color var(--t-fast);
}
.provider__go svg{ width:14px; height:14px; }
.provider:hover .provider__go{ background:var(--promo-c); color:var(--accent-ink); }

/* ---- 안내 상자 · 사이트 소개 --------------------------------------------- */
.cz-guide{ display:flex; align-items:center; gap:var(--gap-sm); padding:var(--gap-lg); border-radius:var(--r-lg); background:var(--surface); color:var(--text-sub); }
.cz-guide svg{ flex:none; width:20px; height:20px; color:var(--accent-fg); }

.cz-seo{ position:relative; padding:28px 64px 28px 28px; border-radius:var(--r-lg); background:var(--surface); }
.cz-seo h2{ margin-bottom:var(--gap-md); font-size:var(--fs-xl); font-weight:var(--fw-bold); }
.cz-seo p{ font-size:var(--fs-md); line-height:24px; color:var(--text-sub); word-break:keep-all; }
.cz-seo p + p{ margin-top:14px; }
/* 접혔을 때 — 첫 문단 첫 줄만. 줄 수로 자른다(px 로 박으면 글자 크기가 바뀔 때 반쯤 잘린다) */
.cz-seo__body{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
.cz-seo.is-open .cz-seo__body{ display:block; }
.cz-seo__toggle{
  position:absolute; top:22px; right:20px; display:grid; place-items:center; width:32px; height:32px;
  border-radius:var(--r-full); color:var(--text-sub); transition:background-color var(--t-fast), color var(--t-fast), transform var(--t);
}
.cz-seo__toggle svg{ width:18px; height:18px; }
.cz-seo__toggle:hover{ background:var(--surface-2); color:var(--text); }
.cz-seo.is-open .cz-seo__toggle{ transform:rotate(180deg); }

/* 라이브 카지노 화면 — 전부 라이브라 카드 위 빨간 LIVE 표시는 뺀다 (카지노 로비 · 홈에는 그대로) */
.cz-page--live .vcard__badge--live{ display:none; }

@media (prefers-reduced-motion:reduce){
  .cz-promo__art, .provider, .provider__pic img{ transition:none; }
  .cz-promo__card:hover .cz-promo__art{ transform:translateY(-50%); }
  .provider:hover, .provider:hover .provider__pic img{ transform:none; }
}

/* ---- 슬롯 로비 — 인기 게임사 줄은 게임사 카드(176 폭)로, 줄 사이는 40 ----------------- */
[data-list] > .rail{ margin-top:0; }
[data-list]:has(> .rail){ gap:var(--gap-2xl); }
.cz-rail--providers .rail__track{ grid-auto-columns:calc((100% - 6 * var(--gap-md)) / 7); }   /* 7장이 줄 폭에 딱 맞게 — 176 고정이면 7번째가 잘렸다 */
.cz-rail--providers .provider{ width:auto; }
.cz-rail__n{ margin-left:4px; font-size:var(--fs-sm); font-style:normal; font-weight:700; color:var(--text-sub); }

/* ==========================================================================
   휴대폰 (1023px 이하) — 프로모는 한 장씩, 게임사는 4칸, 게임 격자는 2칸 반이 아닌 3칸
   ========================================================================== */
@media (max-width:1023px){
  .cz{
    --cz-gap: 10px;
    --cz-bar-h: 44px;
    --cz-promo-h: 124px;
    --cz-chip-h: 32px;
    --cz-promo-copy: 62%;
    --cz-provider-w: 104px;
    --cz-cols: 3;
    --cz-vendor-cols: 4;
  }
  .cz-page, .cz-stack{ gap:14px; }
  /* 프로모 — 한 장 + 다음 장이 조금 보인다 */
  .cz-promo__row{ margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; }
  .cz-promo__card{ flex-basis:88%; padding:12px 14px; gap:4px; }
  .cz-promo__badge{ font-size:11px; }
  .cz-promo__title{ font-size:16px; line-height:1.25; }
  .cz-promo__desc{ font-size:11px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
  .cz-promo__btn{ height:28px; padding:0 12px; font-size:11px; }
  .cz-promo__dots{ margin-top:6px; }
  .cz-promo__art{ max-width:40%; height:74%; }
  /* 칩 · 탭 — 옆으로 민다 */
  .cz-chips, .cz-types{ margin-inline:-16px; padding-inline:16px; }
  .cz-chip{ flex:none; }
  /* 검색 줄 — 검색칸 한 줄, 고르개 둘은 다음 줄 반씩 */
  .cz-filter{ flex-wrap:wrap; gap:8px; }
  .cz-search{ flex-basis:100%; padding-left:14px; }
  .cz-search input{ font-size:var(--fs-sm); }
  .cz-picker{ flex:1 1 0; min-width:0; }
  .cz-picker__btn{ width:100%; padding:0 34px 0 12px; font-size:var(--fs-sm); }
  .cz-picker__now{ max-width:none; min-width:0; }
  .cz-picker__menu{ max-width:calc(100 * var(--vw) - 32px); }
  /* 섹션 */
  .cz-sec__title{ font-size:17px; }
  .cz-sec__head{ min-height:32px; }
  .cz-sec__head .btn{ height:30px; padding:0 12px; font-size:12px; }
  /* 게임사 — 한 줄 4장, 옆으로 넘긴다 (두 줄로 내려가지 않게) */
  .cz-vend .cz-grid--vendors{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * var(--cz-gap)) / 4);
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .cz-vend .cz-grid--vendors::-webkit-scrollbar{ display:none; }
  .cz-vend .cz-grid--vendors > *{ scroll-snap-align:start; }
  .cz-vend .cz-sec__count{ margin-right:4px; }
  .cz-vnavs{ display:inline-flex; }
  .cz-type{ height:40px; }
  .cz-guide{ padding:12px; font-size:12px; }
  .cz-rail--providers .rail__track{ grid-auto-columns:calc((100% - 2 * var(--gap-sm)) / 3.2); }
  .provider__body{ height:34px; padding:0 6px 0 8px; }
  .provider__go, .provider__count{ display:none; }
  .cz-seo{ padding:20px 52px 20px 18px; }
  .cz-seo p{ font-size:var(--fs-sm); line-height:22px; }
}

/* 태블릿 세로 (600~1023px) — 프로모 두 장, 게임 5칸, 게임사 8곳 한 줄 */
@media (min-width:600px) and (max-width:1023px){
  .cz{ --cz-cols: 5; --cz-vendor-cols: 8; --cz-promo-h: 190px; }
  .cz-promo__card{ flex-basis:calc(50% - var(--cz-gap) / 2); }
  .cz-filter{ flex-wrap:nowrap; }
  .cz-search{ flex-basis:auto; }
  .cz-picker{ flex:none; }
  .cz-rail--providers .rail__track{ grid-auto-columns:calc((100% - 4 * var(--gap-sm)) / 5.2); }
  .cz-vend .cz-grid--vendors{ grid-auto-columns:calc((100% - 7 * var(--cz-gap)) / 8); }   /* 8곳이 한 줄에 다 선다 → < > 필요 없음 */
  .cz-vnavs{ display:none; }
}