/**
 * lobby-mobile.css (v10)
 * 모바일(≤768px) — scale 해제 · 세로 스택 · KPI · 터치 스크롤
 */

@media (max-width: 768px) {
  html.lobby-mobile-active,
  html.lobby-mobile-active body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100dvh;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  html.lobby-mobile-active .lobby-wrap,
  html.lobby-mobile-active .lobby-stage,
  html.lobby-mobile-active .lobby,
  html.lobby-mobile-active .kpi-bar,
  html.lobby-mobile-active .rooms-zone,
  html.lobby-mobile-active .rooms-head,
  html.lobby-mobile-active .lobby-chat-card,
  html.lobby-mobile-active .lobby-tx-feed {
    touch-action: pan-y;
  }

  html.lobby-mobile-active .rooms-zone--carousel {
    touch-action: pan-y;
  }

  /* 캐러셀 — 네이티브 가로·세로 스크롤 (JS pointer 캡처 없음) */
  html.lobby-mobile-active .rooms-track,
  html.lobby-mobile-active .rooms-track.is-dragging,
  html.lobby-mobile-active .rooms-track.is-animating {
    touch-action: pan-x pan-y !important;
    cursor: default;
  }

  html.lobby-mobile-active .rooms-zone .rsc-card-unit,
  html.lobby-mobile-active .rooms-zone .rsc-card {
    touch-action: pan-x pan-y;
  }

  .lobby-wrap.lobby-wrap--fullscreen {
    height: auto !important;
    min-height: 100dvh;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .lobby-stage {
    height: auto !important;
    overflow: visible !important;
  }

  .lobby-wrap--fullscreen .lobby,
  .lobby {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    padding: 0 12px 20px !important;
    margin: 0 !important;
  }

  /* ── GNB 컴팩트 (게임방 #premiumRebuildHeader 동일 클래스) ── */
  .lobby-header {
    display: flex !important;
    flex-wrap: wrap;
    grid-template-columns: none !important;
    align-items: center;
    height: auto !important;
    min-height: 44px;
    margin: 0 -12px !important;
    padding: 8px 10px !important;
    gap: 6px 8px !important;
  }

  .lobby-header__brand {
    flex: 0 0 auto;
    min-width: 0;
  }

  .lobby-header__brand .brand-txt {
    display: none;
  }

  .lobby-header__brand .brand-emblem,
  .lobby-header__brand .brand-emblem__img {
    width: 32px !important;
    height: 28px !important;
  }

  .lobby-header__right {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    gap: 6px !important;
  }

  .lobby-nav {
    flex: 1 1 100%;
    order: 10;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 2px 0 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.rebuild-has-mobnav .lobby-nav {
    display: none !important;
  }

  .lobby-nav::-webkit-scrollbar {
    display: none;
  }

  .lobby-nav button {
    flex-shrink: 0;
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .lobby-header .balance {
    height: auto;
    min-height: 26px;
    max-width: min(46vw, 168px);
    padding-left: 8px;
  }

  .lobby-header .balance--dual {
    max-width: min(52vw, 190px);
  }

  .lobby-header .balance__rows {
    gap: 0;
  }

  .lobby-header .balance__row {
    font-size: 10px !important;
    line-height: 1.15;
  }

  .lobby-header .balance__amt {
    font-size: 12px !important;
    padding-right: 4px;
  }

  .lobby-header .balance__add {
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
  }

  .lobby-header .profile {
    padding: 1px 6px 1px 1px;
    max-width: 88px;
  }

  .lobby-header .profile__av {
    width: 24px !important;
    height: 24px !important;
  }

  .lobby-header .profile__vip {
    font-size: 8px !important;
  }

  .lobby-header .profile__name {
    font-size: 9px !important;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lobby-header .profile__chev {
    display: none;
  }

  .lobby-header .icon-btn.mail {
    display: none;
  }

  .lobby-header .icon-btn.lang {
    padding: 0 6px !important;
    font-size: 10px !important;
    min-width: 0;
  }

  /* 언어 드롭다운 — KPI·방 카드 위로 (형제 stacking 순서 덮임 방지) */
  html.lobby-mobile-active .lobby-header,
  html.lobby-mobile-active #appLobbyHeader.lobby-header {
    position: relative;
    z-index: 200;
  }

  html.lobby-mobile-active .lobby-header .lang-sel {
    position: relative;
    z-index: 210;
  }

  html.lobby-mobile-active .lobby-header .lang-sel.open {
    z-index: 10050;
  }

  html.lobby-mobile-active .lobby-header .lang-menu {
    z-index: 10051;
  }

  html.lobby-mobile-active .lobby > .kpi-bar,
  html.lobby-mobile-active .rooms-panel {
    position: relative;
    z-index: 1;
  }

  /* ── KPI 2×2 컴팩트 (v4 — kpi-master 72px 아이콘 덮어씀) ── */
  html.lobby-mobile-active .lobby > .kpi-bar,
  html.lobby-mobile-active .lobby-wrap--fullscreen .kpi-bar {
    width: 100% !important;
    margin: 8px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 8px 6px !important;
    gap: 6px 4px !important;
    border-radius: 8px !important;
  }

  html.lobby-mobile-active .lobby > .kpi-bar .stats-item {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left;
    gap: 6px !important;
    padding: 5px 6px !important;
    min-height: 0;
    overflow: visible !important;
  }

  html.lobby-mobile-active .lobby > .kpi-bar .stats-item:not(:last-child)::after {
    display: none;
  }

  html.lobby-mobile-active .lobby > .kpi-bar .stat-icon,
  html.lobby-mobile-active .lobby > .kpi-bar .part-kpi-ico {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  html.lobby-mobile-active .lobby > .kpi-bar .kpi__copy {
    min-width: 0;
    flex: 1 1 auto !important;
    max-width: none !important;
    overflow: hidden;
  }

  html.lobby-mobile-active .lobby > .kpi-bar label {
    font-size: 7px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    display: block;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: keep-all;
  }

  html.lobby-mobile-active .lobby > .kpi-bar .kpi-value,
  html.lobby-mobile-active .lobby > .kpi-bar .kpi strong {
    font-size: 13px !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
  }

  html.lobby-mobile-active .lobby > .kpi-bar em {
    font-size: 7px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    display: block;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: keep-all;
  }

  /* ── 방 카드 캐러셀 ── */
  .rooms-head {
    margin-top: 10px;
    height: auto;
  }

  .rooms-head h2 {
    font-size: 13px;
  }

  .rooms-zone {
    height: auto;
    min-height: 340px;
    margin-top: 4px;
  }

  .rooms-track {
    padding: 0 40px 8px;
    min-height: 300px;
  }

  .rooms-fab {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .rooms-fab--prev {
    left: 0;
    right: auto;
  }

  /* ── 하단 패널 세로 스택 ── */
  .lower {
    height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .lower-comm {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .panel {
    min-height: 0;
  }

  .panel--chat .chat-feed {
    max-height: 140px;
  }

  .mj-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .notice-list {
    max-height: 160px;
    overflow-y: auto;
  }

  /* ── 푸터 — parts display:contents 해제 · 패널 밖으로 삐져나옴 방지 ── */
  html.lobby-mobile-active .lobby--parts .lobby-footer,
  html.lobby-mobile-active .lobby-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 10px 0 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1;
  }

  html.lobby-mobile-active .lobby--parts .lobby-footer__inner,
  html.lobby-mobile-active .lobby-footer__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  html.lobby-mobile-active .lobby--parts .lobby-footer__links,
  html.lobby-mobile-active .lobby-footer__links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
  }

  html.lobby-mobile-active .lobby-footer__links a {
    margin-right: 0 !important;
    white-space: nowrap;
    flex: 0 1 auto;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  html.lobby-mobile-active .lobby-footer__time {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 9px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  html.lobby-mobile-active .lobby-footer .signal {
    display: none !important;
  }

  html.lobby-mobile-active .lobby-wrap--fullscreen .lobby-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 지갑·마이페이지 등 서브페이지 — 100vw·가로 넘침 방지 */
  .mypage-wrap.lobby-wrap--fullscreen,
  .wallet-wrap.lobby-wrap--fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .mypage-wrap .lobby,
  .wallet-wrap .lobby,
  body.rebuild-has-mobnav .wallet-wrap .lobby,
  body.rebuild-has-mobnav .mypage-wrap .lobby,
  body.rebuild-has-mobnav .partner-wrap .lobby,
  body.rebuild-has-mobnav .support-wrap .lobby {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    transform: none !important;
    height: auto !important;
    padding: 0 12px calc(72px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    flex: none !important;
    min-height: auto !important;
    box-sizing: border-box;
  }

  .mypage-wrap .wallet-scroll,
  .wallet-wrap .wallet-scroll,
  body.rebuild-has-mobnav .wallet-scroll {
    overflow-x: hidden !important;
    overflow-y: visible;
    max-height: none;
    flex: none !important;
    min-height: auto !important;
    width: 100%;
    max-width: 100%;
  }

  .mypage-wrap .wallet-main,
  .mypage-wrap .mypage-main,
  .wallet-wrap .wallet-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  .mypage-wrap .lobby-header,
  .wallet-wrap .lobby-header {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .lobby-footer__time {
    font-size: 9px;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .lobby-header .balance--dual {
    max-width: 46vw;
  }

  .lobby-header .profile {
    max-width: 72px;
  }
}