.topbar{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 32px;
  border-bottom:1px solid var(--topbar-border);
  background:var(--topbar-bg);
  backdrop-filter:blur(8px);
  position:sticky;
  top:0;
  z-index:9;
}

.wh-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.wh-actions .wh-apply{
  white-space:nowrap;
}

.ticker{
  display:flex;
  align-items:center;
  gap:24px;
  /* 남는 폭을 전부 쓰되 0 까지 줄어들 수 있어야 넘칠 때 마퀴로 전환된다.
     (예전 flex:1 은 .topbar-stats 와 공간을 반씩 나눠 칩을 2줄로 접히게 했다) */
  flex:1 1 0;
  min-width:0;
  flex-wrap:nowrap;
  overflow:hidden;
  color:var(--text-dim);
  font-size:13px;
}
.ticker .tag{
  font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif !important;
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--gold);
  text-transform:uppercase;
  padding:3px 8px;
  border:1px solid var(--line-strong);
  border-radius:4px;
}
.ticker .dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:var(--topbar-dot-shadow);
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.balance{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 14px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--topbar-balance-bg);
}
.balance .lbl{
  font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif !important;
  font-size:10.5px;
  color:var(--text-mute);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.balance .amt{
  font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif !important;
  font-size:14px;
  color:var(--gold-soft);
  font-weight:600;
}
.topbar-li{
  gap:24px;
}
.topbar-li .ticker{
  flex:0 0 auto;
  gap:18px;
}
.topbar-stats{
  display:flex;
  align-items:center;
  gap:8px;
  /* 칩은 제 폭만 차지하고 줄바꿈하지 않는다. 남는 폭은 티커가 가져가고,
     티커가 모자라면 마퀴로 흘러 전문이 보인다(줄바꿈 대신). */
  flex:0 0 auto;
  justify-content:flex-end;
  flex-wrap:nowrap;
}
.stat{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--topbar-stat-bg);
  transition:border-color .15s, background .15s;
}
.stat:hover{
  border-color:var(--line-strong);
  background:var(--topbar-stat-bg-hover);
}

.bd-table tr.bd-row-link{
  cursor:pointer;
}

.stat .stat-icon{
  display:grid;
  place-items:center;
  width:14px;
  height:14px;
  color:var(--text-mute);
}
.stat .stat-icon svg{
  width:13px;
  height:13px;
}
.stat .stat-label{
  font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif !important;
  font-size:11px;font-weight:900;
  letter-spacing:.16em;
  color:var(--text-mute);
  text-transform:uppercase;
}
.stat .stat-val{
  font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif !important;
  font-size:13px;
  color:var(--gold-soft);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.stat .stat-val.accent{
  color:var(--purple-soft);
}

@media (max-width:860px){
  .topbar{
    padding:12px 16px;
  }
  .ticker{
    gap:10px;
    font-size:12px;
  }
  .ticker span:last-child{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .balance{
    padding:7px 10px;
  }
  .balance .lbl{
    display:none;
  }
  .topbar-stats{
    gap:6px;
  }
  .stat{
    padding:7px 10px;
    gap:6px;
  }
  .stat .stat-label{
    font-size:9px;
  }
  .stat .stat-val{
    font-size:12px;
  }
}

/* === Joyworld responsive layout === */

html,
body {
  max-width: 100%;
  /* clip: 가로 넘침만 잘라내고 '스크롤 컨테이너'는 만들지 않는다.
     hidden 이면 overflow-y 가 auto 로 계산돼 html/body 가 스크롤 컨테이너가 되고,
     그 순간 .sidebar 의 position:sticky 가 무력화돼 사이드바가 같이 스크롤된다. */
  overflow-x: clip;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.nav-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 100;
  width: 40px;
  height: 40px;
  background: var(--mobile-nav-toggle-bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--gold-soft);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 90;
}

body.nav-open .nav-overlay {
  display: block;
}

@media (min-width: 1280px) {
  .provider-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* 슬롯: 카드 폭 ~220px 고정, 화면 넓어지면 카드 수가 늘어남 (auto-fill) */
  .provider-grid.provider-grid--slot {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }

  /* 가로형 썸네일은 슬롯 로비만 해당 — 카지노는 세로(232/337)라 여기서 16/9 를 강제하면
     subgrid 의 이미지 행과 충돌한다. 대상 한정. */
  .provider-grid--slot .provider-box img {
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (max-width: 1279px) {
  .app {
    grid-template-columns: 200px 1fr !important;
  }

  .sidebar {
    padding: 18px 12px 14px !important;
  }

  .nav-item {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  .content,
  .bd-content,
  .sports-layout,
  .md-layout,
  .provider-page {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .live-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .big-cards {
    grid-template-columns: 1fr !important;
  }

  .grid-prov {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .provider-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* 가로형 썸네일은 슬롯 로비만 해당 — 카지노는 세로(232/337)라 여기서 16/9 를 강제하면
     subgrid 의 이미지 행과 충돌한다. 대상 한정. */
  .provider-grid--slot .provider-box img {
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (max-width: 1023px) {
  .app {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: calc(100vw - 56px) !important;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 95 !important;
    /* 드로어는 세로로만 스크롤한다. overflow-y:auto 만 주면 overflow-x 가 auto 로 계산돼,
       .sidebar::after(장식 라인, right:-1px) 가 패딩 박스 밖으로 1px 나간 것 때문에
       가로 스크롤바가 생겼다(clientW 279 vs scrollW 280). 가로는 명시적으로 잘라낸다. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
  }

  .main {
    min-width: 0 !important;
    /* 예전엔 고정 햄버거(.nav-toggle) 자리를 여기서 64px 비웠는데, .topbar 가 sticky(top:0)라
       스크롤하면 탑바가 그 여백 위로 올라와 햄버거와 겹쳤다. 여백을 없애 탑바를 맨 위에 두고,
       햄버거 자리는 아래 .topbar-stats 의 padding-left 로 탑바 안에 확보한다. */
    padding-top: 0 !important;
  }

  .topbar,
  .topbar-li {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* 1행: 햄버거 자리(padding-left) + 잔액 칩 / 2행: LIVE + 티커.
     칩이 위로 와야 스크롤 시 sticky 탑바 첫 줄과 햄버거가 같은 줄에 자연스럽게 놓인다. */
  .topbar-li .topbar-stats {
    order: 1;
    padding-left: 52px;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  .topbar-li .ticker {
    order: 2;
  }

  .topbar-li .stat {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .topbar-right {
    justify-content: space-between !important;
  }

  .nav-toggle {
    top: 8px;
  }

  .ticker {
    min-width: 0;
  }

  .notice-grid,
  .hero,
  .welcome,
  .sports-layout,
  .md-layout {
    grid-template-columns: 1fr !important;
  }

  .grid-prov {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bd-bar,
  .sports-toolbar,
  .md-top {
    flex-wrap: wrap !important;
  }

  .bd-search,
  .sports-search {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 13px;
  }

  .nav-item {
    font-size: 12px !important;
  }

  .topbar .balance .amt {
    font-size: 15px !important;
  }

  .content,
  .bd-content,
  .sports-layout,
  .md-layout,
  .provider-page {
    padding: 16px 12px 44px !important;
    gap: 18px !important;
  }

  /* .welcome-text 는 제외 — 기본 padding(42px 48px)을 유지한다.
     ≤767 에서 24/18 로 눌러버리면 로그인 대시보드 웰컴 카드가 답답해진다. */
  .hero-text,
  .provider-hero {
    padding: 24px 18px !important;
  }

  .hero h2,
  .welcome h2 {
    font-size: 31px !important;
  }

  .sec-h {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .live-row,
  .grid-prov,
  .big-cards {
    grid-template-columns: 1fr !important;
  }

  .provider-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  /* height 고정은 subgrid 이미지 행(aspect-ratio)과 충돌 → 슬롯만 한정 */
  .provider-grid--slot .provider-box img {
    height: 92px !important;
  }

  /* 풀스크린 모달(≤767): 아래 다이얼로그 목록에 .money-dialog 가 min-height:100vh 로 들어가 있는데
     오버레이 목록에서 .money-overlay 만 누락돼 padding:24px 가 남아 있었다.
     그래서 좌우 24px 여백은 남고 다이얼로그는 패딩 박스를 넘어 상하 여백만 사라졌다. */
  .money-overlay,
  .njw-modal-backdrop,
  .pc-overlay,
  .provider-coming-overlay {
    padding: 0 !important;
  }

  .njw-modal-stub,
  .money-dialog,
  .pc-dialog,
  .provider-coming-dialog,
  [role="dialog"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
  }

  .wallet-table thead {
    display: none;
  }

  .wallet-table tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--mobile-table-card-bg);
  }

  .wallet-table td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0 !important;
    border: 0 !important;
    text-align: right !important;
  }

  .wallet-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-mute);
    text-align: left;
  }

  .wh-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .wh-tabs,
  .wh-actions {
    width: 100%;
  }

  .wh-tabs {
    overflow-x: auto;
  }

  .wh-actions .wh-apply {
    flex: 1 1 120px;
  }

  .bd-table-wrap {
    overflow-x: auto;
  }

  .bd-table {
    min-width: 680px;
  }

  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 22px 14px !important;
  }
}

@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .sidebar {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* ─── Bet history tab (wallet-history page) ─────────────────────── */
.bh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  background: var(--bg-2, rgba(255,255,255,0.03));
}
.bh-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.bh-filters label > span:first-child {
  color: var(--text-muted, #888);
  font-weight: 600;
}
.bh-filters input[type="date"],
.bh-filters select {
  padding: 6px 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 6px;
  background: var(--bg-1, rgba(0,0,0,0.2));
  color: var(--text, inherit);
  font-size: 13px;
}
.bh-sep { color: var(--text-muted, #888); }
.bh-search {
  padding: 7px 16px;
  border: 1px solid var(--gold-2, #caa050);
  border-radius: 6px;
  background: var(--gold-2, #caa050);
  color: var(--bg-0, #0a0518);
  font-weight: 700;
  cursor: pointer;
}
.bh-search:hover { filter: brightness(1.1); }

.bh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.bh-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  background: var(--bg-2, rgba(255,255,255,0.03));
}
.bh-stats span {
  font-size: 12px;
  color: var(--text-muted, #888);
}
.bh-stats strong {
  font-size: 16px;
  font-weight: 700;
}
.bh-stat-win { color: #4caf50; }
.bh-stat-lose { color: #ef5350; }

.bh-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted, #888);
}
.bh-view {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--gold-2, #caa050);
  background: transparent;
  color: var(--gold-2, #caa050);
  cursor: pointer;
}
.bh-view:hover { background: var(--gold-2, #caa050); color: var(--bg-0, #0a0518); }

.wh-pill--prematch { background: rgba(76,175,80,0.18); color: #4caf50; }
.wh-pill--live     { background: rgba(244,67,54,0.18); color: #ef5350; }
.wh-pill--bh-ing     { background: rgba(255,193,7,0.18); color: #ffc107; }
.wh-pill--bh-cancel  { background: rgba(158,158,158,0.18); color: #9e9e9e; }
.wh-pill--bh-win     { background: rgba(76,175,80,0.18); color: #4caf50; }
.wh-pill--bh-lose    { background: rgba(239,83,80,0.18); color: #ef5350; }
.wh-pill--bh-special { background: rgba(33,150,243,0.18); color: #2196f3; }
.wh-pill--bg-win     { background: rgba(76,175,80,0.18); color: #4caf50; }
.wh-pill--bg-lose    { background: rgba(239,83,80,0.18); color: #ef5350; }
.wh-pill--bg-cancel  { background: rgba(158,158,158,0.18); color: #9e9e9e; }
.wh-pill--bg-pending { background: rgba(255,193,7,0.18); color: #ffc107; }

/* ─── Bet detail modal ─────────────────────── */
.bd-mask {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bd-modal {
  width: min(880px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-1, #15102b);
  color: var(--text, #eee);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 18px 20px;
}
.bd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.bd-head strong { font-size: 16px; }
.bd-close {
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border, rgba(255,255,255,0.18));
  background: transparent;
  color: var(--text, inherit);
  cursor: pointer;
}
.bd-loading, .bd-error { padding: 30px; text-align: center; }
.bd-error { color: #ef5350; }
.bd-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
  margin-bottom: 14px;
}
.bd-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: var(--bg-2, rgba(255,255,255,0.03));
}
.bd-summary span {
  font-size: 11px;
  color: var(--text-muted, #888);
}
.bd-summary strong { font-size: 14px; }
.bd-status--win  { color: #4caf50; }
.bd-status--lose { color: #ef5350; }
.bd-status--ing  { color: #ffc107; }
.bd-folders-head {
  font-weight: 700;
  margin-bottom: 8px;
}
.bd-games {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bd-games th, .bd-games td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  text-align: left;
}
.bd-games thead th {
  font-size: 12px;
  color: var(--text-muted, #888);
}
.bd-vs { color: var(--text-muted, #888); margin: 0 4px; }

@media (max-width: 720px) {
  .bh-filters { flex-direction: column; align-items: stretch; }
  .bh-filters label { justify-content: space-between; }
  .bh-stats { grid-template-columns: repeat(2, 1fr); }
  .bd-summary { grid-template-columns: repeat(2, 1fr); }
  .bd-modal { padding: 12px 14px; }
}

/* 와이드 화면 레이아웃 중앙 정렬 (좌측 쏠림 해소, 전 페이지 공통) */
.app { max-width: 1744px; margin-inline: auto; }
.app > .main { min-width: 0; }

/* ── 사이드바 위젯(프로필카드/지갑) — Main(Logged in).html 전용이던 CSS 를 전 페이지 공유 (vanilla 사이드바 통일) ── */
  .profile-card{
    display:flex;align-items:center;gap:12px;
    padding:12px 12px;border-radius:11px;margin-bottom:10px;
    background:linear-gradient(135deg, rgba(124,58,237,.16) 0%, rgba(230,192,103,.08) 100%);
    border:1px solid var(--line-strong);
    position:relative;
  }
  .profile-card::before{
    content:"";position:absolute;inset:0;border-radius:11px;
    background:linear-gradient(135deg, rgba(230,192,103,.04), transparent);
    pointer-events:none;
  }
  .profile-card .avatar{
    width:40px;height:40px;border-radius:50%;flex-shrink:0;
    background:#0a0518;display:grid;place-items:center;
    box-shadow:0 0 0 1px rgba(230,192,103,.32), 0 4px 14px rgba(230,192,103,.18);
  }
  .profile-info{flex:1;min-width:0}
  .profile-name{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .profile-name .suffix{color:var(--text-dim);font-weight:500;margin-left:1px}
  .profile-vip{
    display:flex;align-items:center;gap:5px;margin-top:3px;
    font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif !important;font-size:11px;font-weight:900;
    letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  }

  /* ── Wallet block ───────────────────── */
  .wallet-block{
    display:flex;flex-direction:column;gap:2px;
    padding:6px 4px 10px;margin-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  .wallet-row{
    display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;
    transition:background .15s;
  }
  .wallet-row:hover{background:rgba(124,58,237,.08)}
  .wallet-icon{color:var(--text-mute);display:grid;place-items:center;width:16px;height:16px}
  .wallet-icon svg{width:14px;height:14px}
  .wallet-label{font-size:11.5px;color:var(--text-dim);flex:1;letter-spacing:-.005em}
  .wallet-amount{
    font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif !important;
    font-size:12.5px;color:var(--gold-soft);font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .wallet-refresh{
    background:transparent;border:0;color:var(--text-mute);cursor:pointer;
    padding:2px;border-radius:4px;display:grid;place-items:center;
    transition:color .15s, background .15s;
  }
  .wallet-refresh:hover{color:var(--gold);background:rgba(230,192,103,.08)}

/* ── 사이드바 알림 badge (쪽지/고객센터 미확인 수) ── */
.nav-item .badge{
  margin-left:auto;
  min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;
  border-radius:9px;
  background:#e11d48;color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px rgba(225,29,72,.25);
}

/* 모바일 드로어가 열리면 고정 햄버거(.nav-toggle: left:14px/40px, z-index:100)가
   드로어 상단 브랜드 로고 위에 겹친다. 열린 동안 토글을 감춰 브랜드를 원래 자리에 둔다
   (브랜드를 밀면 로고가 드로어 우측 끝에 붙어 답답하고, 테두리 박스가 2개로 보인다).
   닫기는 오버레이 탭 / 메뉴 선택으로 동작 — wireNav 가 둘 다 처리한다. */
@media (max-width:1023px){
  body.nav-open .nav-toggle{ display:none; }
}

/* ── .hero 고정높이(인라인 height:340px) → 내용 기반 ────────────────────
   인라인은 .hero{height:340px; overflow:hidden; grid-template-columns:1.2fr 1fr}.
   ≤1023 에서 위 반응형이 .hero 를 1컬럼으로 바꾸는데 높이는 340px 그대로라
   2행(일러스트)이 340px 밖으로 밀려 overflow:hidden 에 통째로 잘렸다.
   .hero-illu 안 SVG 는 position:absolute;inset:0 라 부모의 '실제 높이'가 필요하므로
   align-self:stretch(데스크톱) + min-height(모바일 1컬럼)로 높이를 보장한다.
   (인라인 .hero 는 align-items:center 라 자식이 stretch 되지 않는다) */
.hero{ height:auto; min-height:340px; }
.hero-illu{ align-self:stretch; height:auto; min-height:240px; }
/* ══════════════════════════════════════════════════════════════════
   반응형 보정 — 좁은 사이드바(1024~1279) / 스택 탑바(≤1023) / 폰(≤600)
   ══════════════════════════════════════════════════════════════════ */

/* 로그인 상태 사이드바의 auth-row 는 layout.js 가 'auth-row single'(자식=로그아웃 1개)로
   렌더하는데 .single 규칙이 없어 .auth-row{grid-template-columns:1fr 1fr} 이 그대로 걸려
   버튼이 절반 폭에 갇히고 "로그아/웃" 으로 줄바꿈됐다. (마크업만 있고 CSS 가 빠져 있던 건) */
.auth-row.single{ grid-template-columns:1fr; }

/* 로고 mark 는 flex 자식이라 기본 flex-shrink:1 로 눌리면 육각형이 납작해진다. 전 폭에서 금지. */
.brand .mark{ flex-shrink:0; }
.profile-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 좁은 사이드바 구간(248→200px) ──
   사이드바가 펼쳐져 있어 지갑(보유머니/포인트)이 이미 보이므로 탑바의 중복 칩을 숨기고
   사이드바에 없는 접속시간(마지막 칩)만 남긴다. 덕분에 티커/칩이 한 줄에 여유롭게 들어간다. */
@media (min-width:1024px) and (max-width:1279px){
  .brand h1{ font-size:16px; }
  .profile-vip{ white-space:nowrap; letter-spacing:.10em; }

  .topbar-li .topbar-stats .stat:not(:last-child){ display:none; }
  .topbar-li .topbar-stats{ justify-content:flex-end; flex-wrap:nowrap; }
  .topbar-li .stat{ flex-shrink:0; white-space:nowrap; }
}

/* ── 모바일/태블릿(≤1023): 탑바가 column + align-items:stretch 로 쌓이는 구간 ── */
/* 탑바 로그아웃 전면 제거 — 로그아웃은 이미 다른 곳에 있어 중복이다.
   · skin01/03/04: 사이드바 하단(데스크톱) / 드로어 하단(모바일)
   · skin02/05   : 탑네비 우측(데스크톱) / 드로어 하단(모바일)
   게다가 ≤1023 에선 .topbar-li 가 column+stretch 라 전체 폭 바로 늘어나 레이아웃을 어지럽혔다.
   (로그인 전 .topbar-right 의 로그인/가입은 유지 — .topbar-li 는 로그인 상태 전용) */
.topbar-li > .btn{ display:none; }

/* ── 티커 마퀴 (전 폭 공통) ──
   본문이 남는 폭보다 길면 layout.js 의 syncTickerScroll() 이 .ticker--scroll 을 붙인다.
   말줄임("...") 대신 공지처럼 가로로 흘려 전문을 노출한다.
   표준 CSS 마퀴: padding-left:100% 로 우측 밖에서 시작 → translateX(-100%) 로 좌측으로 빠져나감.
   흐르는 본문이 LIVE 태그/점을 침범하지 않도록 클리핑 박스(.ticker-msg) 안에서만 움직인다. */
.ticker-msg{ flex:1 1 auto; min-width:0; overflow:hidden; }
.ticker-msg-in{ display:inline-block; white-space:nowrap; }
.ticker--scroll .ticker-msg-in{
  padding-left:100%;
  animation:njw-ticker-scroll 18s linear infinite;
}
@keyframes njw-ticker-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-100%); }
}
/* 모션 최소화 선호 시: 흐르지 않고 말줄임으로 폴백 */
@media (prefers-reduced-motion:reduce){
  .ticker--scroll .ticker-msg-in{ animation:none; padding-left:0; }
  .ticker-msg{ text-overflow:ellipsis; white-space:nowrap; }
}

/* ── 폰(≤600): 칩 라벨 숨김 ── */
@media (max-width:600px){
  .topbar-li .stat .stat-label{ display:none; }
}

/* 사이드바 메뉴가 서로 딱 붙어 활성 배경끼리 맞닿는다. .sidebar 는 flex 컬럼이지만 gap 이 없고
   .nav-item 에도 margin 이 없어서다. .sidebar 에 gap 을 주면 브랜드/프로필/지갑/섹션까지 벌어지므로
   연속된 메뉴 사이에만 간격을 준다. */
.nav-item + .nav-item{ margin-top:4px; }