/* ==============================================
   main-layout.css
   전체 배경색 = var(--grey-900) = #292929
   ============================================== */

/* ✅ body/html 전체 통일 */
html, body {
  background-color: var(--grey-900);
  margin: 0;
  padding: 0;
}

/* ✅ Header 높이(74px)만큼 아래로 밀기 */
.app-layout {
  display: flex;
  padding-top: 74px;
  min-height: 100vh;
  background-color: var(--grey-900);
}

/* ✅ Sidebar 너비(156px)만큼 왼쪽 여백 */
.app-main {
  margin-left: 156px;
  flex: 1;
  min-width: 0;
  background-color: var(--grey-900);
  transition: margin-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ✅ page-container: 내부 콘텐츠 영역 */
.page-container {
  background-color: var(--grey-900);
}

/* ✅ sport/casino/bottom 배경 영역도 통일 */
.sport-background,
.casino-background,
.bottom-bg {
  background-color: var(--grey-900);
}

/* ✅ Footer: 전체 너비 */
.site-footer {
  width: 100%;
  padding: 64px 0;
  background-color: var(--grey-900);
  box-sizing: border-box;
}

.footer-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ✅ Slot section: 좌측 정렬 맞추기 */
.slot-section {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto 80px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: var(--grey-900);
}

/* ✅ withdrawal section도 동일 */
.withdrawal-section {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.withdrawal-window {
  width: 100%;
  overflow: hidden;
}

/* ✅ Tablet */
@media screen and (min-width: 769px) and (max-width: 1399px) {
  .app-layout { padding-top: 90px; }
  /* app-main margin is handled by the default styles now */
}

/* ✅ Mobile */
@media screen and (max-width: 768px) {
  .app-layout { padding-top: 100px; }
  .app-main   { margin-left: 0; }
}