/**
 * FROZEN v2 (2026-06-03) — LOBBY-VIEWPORT-FIT.md
 * UI 가로 100% + lobby.js?v=93 fit() scale 보정. 사용자 확인 후 변경 금지.
 */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.lobby-wrap.lobby-wrap--fullscreen {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
}

.lobby-stage {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100vw;
  overflow: visible;
}

.lobby-wrap--fullscreen .lobby {
  --lobby-pad-x: clamp(14px, 2vw, 28px);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100vw;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 var(--lobby-pad-x);
  margin: 0;
  box-sizing: border-box;
  transform-origin: top left;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}

.lobby-wrap--fullscreen .lobby-header {
  flex-shrink: 0;
  margin-left: calc(-1 * var(--lobby-pad-x));
  margin-right: calc(-1 * var(--lobby-pad-x));
  padding-left: var(--lobby-pad-x);
  padding-right: var(--lobby-pad-x);
}

.lobby-wrap--fullscreen .kpi-bar {
  flex-shrink: 0;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  box-sizing: border-box;
}

.lobby-wrap--fullscreen .lower,
.lobby-wrap--fullscreen .lobby-footer {
  flex-shrink: 0;
}

.lobby-wrap--fullscreen .lobby-footer {
  margin-left: calc(-1 * var(--lobby-pad-x));
  margin-right: calc(-1 * var(--lobby-pad-x));
  padding-left: var(--lobby-pad-x);
  padding-right: var(--lobby-pad-x);
}