/* shell.css — 모든 탭(카지노·스포츠·프로필) 공용 상단 셸 + 기준선 토큰.
   우팀장 지시(2026-07-29): "버튼 위치는 어떤 탭이든 고정. 디자인도 동일. 하드코딩 금지."
   기준: 카지노 그리드. 헤더선(로고~언어버튼)과 모든 탭의 컨텐츠선이 같은 값을 쓴다.
   px 는 아래 :root 토큰에만 존재한다. 페이지/주입 CSS에서 다시 쓰지 말 것.
   반드시 마지막 <link> 로 로드(페이지 <style> · mca/*.js 주입 CSS보다 뒤). */

:root {
  --mh-h: 64px;        /* 헤더 높이 */
  --mh-pad: 40px;      /* 헤더 안쪽 좌우 여백 */
  --ct-pad: 40px;      /* 컨텐츠 안쪽 좌우 여백(헤더와 같은 값) */
  --mh-max: 1440px;    /* 기준선 최대폭 — 헤더와 모든 탭 컨텐츠가 공유 */
  --mh-btn: 34px;      /* 헤더 버튼 공통 높이 */
  --mh-gap: 10px;      /* 헤더 버튼 간격 */
  --mh-radius: 8px;    /* 헤더 버튼 모서리 */
  --mh-logo: 44px;     /* 브랜드 로고 높이 */
  --mh-fs: 13px;       /* 헤더 버튼 글자 */
  --sp-brand-h: 28px;  /* 스포츠북 브랜드 로고 높이 */
}

/* ── 헤더 틀 ───────────────────────────────────────────── */
.main-header { height: var(--mh-h) !important; padding-left: var(--mh-pad) !important; padding-right: var(--mh-pad) !important; }
.main-header .header-inner {
  width: 100% !important; max-width: var(--mh-max) !important;
  margin-left: auto !important; margin-right: auto !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: nowrap !important;   /* 줄바꿈되면 버튼줄이 아래로 떨어져 본문을 덮는다 */
}
.main-header .header-right { display: flex !important; align-items: center !important; gap: var(--mh-gap) !important; flex-wrap: nowrap !important; }
.main-header .header-left { display: flex !important; align-items: center !important; }

/* ── 브랜드 로고 (여러 장이면 아랫선 정렬) ───────────────── */
.main-header .brand-logo { display: flex !important; align-items: flex-end !important; gap: 14px !important; }
.main-header .brand-logo img { height: var(--mh-logo) !important; width: auto !important; display: block !important; object-fit: contain !important; }
.main-header .brand-logo img[alt="Pinnacle"] { height: calc(var(--mh-logo) * 0.6) !important; margin-bottom: 2px !important; }
.main-header .brand-logo > i { align-self: center !important; }

/* ── 헤더 버튼 공통 규격 (어떤 탭에서도 동일) ─────────────── */
.main-header .header-icon-btn,
.main-header .wallet-btn,
.main-header .mca-lgn,
.main-header .mca-sgn,
.main-header .mca-lang-btn {
  height: var(--mh-btn) !important;
  min-height: var(--mh-btn) !important;
  border-radius: var(--mh-radius) !important;
  font-size: var(--mh-fs) !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.main-header .header-icon-btn { width: var(--mh-btn) !important; padding: 0 !important; }
.main-header .wallet-btn { padding: 0 12px !important; }
.main-header .mca-lgn { padding: 0 14px !important; }
.main-header .mca-sgn { padding: 0 16px !important; }
.main-header .mca-lang-btn { padding: 0 9px !important; }
.main-header .mca-authbtns { display: flex !important; align-items: center !important; gap: var(--mh-gap) !important; }
.main-header .mca-lang { display: flex !important; align-items: center !important; }
.main-header .wallet-widget { height: var(--mh-btn) !important; padding: 0 3px 0 11px !important; display: flex !important; align-items: center !important; }

/* ── 값이 채워지기 전에는 보이지 않는다(가짜 숫자 노출 방지) ── */
.main-header .wallet-balance { visibility: hidden; }
.main-header .wallet-balance.is-ready { visibility: visible; }

/* ── 컨텐츠 기준선: 헤더와 동일 ──────────────────────────
   content-container 는 바깥 여백, 그 직계 래퍼가 최대폭을 헤더와 공유한다.
   스포츠(pinnacle-layout)만 캡이 없어 넓은 모니터에서 헤더 밖으로 나가 있었다. */
.content-container { padding-left: var(--ct-pad) !important; padding-right: var(--ct-pad) !important; }
.content-container > .content-inner,
.content-container > .pinnacle-layout {
  max-width: var(--mh-max) !important;
  margin-left: auto !important; margin-right: auto !important;
}

/* ── 모바일 ─────────────────────────────────────────────
   래퍼(html/body)가 페이지마다 제각각 16px 를 넣거나 안 넣어서 탭마다 선이 달랐다.
   래퍼 여백은 0 으로 눕히고, 좌우 여백은 --mh-pad 한 곳에서만 준다. */
@media (max-width: 768px) {
  :root { --mh-pad: 16px; --ct-pad: 16px; --mh-logo: 34px; --sp-brand-h: 22px; }
  html, body { padding-left: 0 !important; padding-right: 0 !important; }
  .content-container > .content-inner,
  .content-container > .pinnacle-layout {
    max-width: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  /* 배당표는 좁은 폭에서 벳슬립과 나란히 설 수 없다 → 한 줄로 세우고 슬립은 접는다 */
  .sp-cols { grid-template-columns: 1fr !important; }
  .sp-slip { display: none !important; }
}

/* 스포츠북 브랜드 로고(제목 자리). 높이는 위 토큰만 사용 */
.sp-title .sp-brand { height: var(--sp-brand-h) !important; width: auto !important; display: block !important; flex: none !important; }

/* ── 모바일 헤더는 한 줄에 다 들어가는 것만 남긴다 ──────────
   폭이 모자라면 줄바꿈이 아니라 '덜 중요한 것부터 감춤'이 정답.
   잔액 위젯은 실제 값이 올 때만(is-ready) 나온다. */
@media (max-width: 768px) {
  .main-header .header-icon-btn { display: none !important; }
  /* wallet-widget 안에 로그인/가입 버튼이 들어 있으므로 통째로 숨기면 안 된다.
     감출 것은 잔액 표시(값 오기 전)와 알림 아이콘뿐. */
  .main-header .wallet-widget { padding-left: 0 !important; }
}

/* VIP 진행도 카드: 서버 데이터가 채워지기 전엔 아예 안 보인다.
   (리터럴 제거 후 빈 껍데기가 남던 문제) */
.vip-progress-card { display: none !important; }
.vip-progress-card.is-ready { display: flex !important; }

/* 로비 카드 접속자 수: 값이 비면 표시하지 않는다(지어낸 숫자 금지).
   실제 산출 소스가 백엔드에 생기면 그때 채우면 된다. */
.lobby-card-playcount:empty { display: none !important; }