/* 메인 앱 공통 고정 로고 줄·떠 있는 하단 메뉴, 홈 전용 스크롤 공지/배너. */
.tournament-page-body,
.store-page,
.my-info-page,
.home-page {
  --home-side-space: 30px;
  --home-top-space: calc(34px + env(safe-area-inset-top));
  --bottom-tabbar-height: calc(93px + env(safe-area-inset-bottom));
}

.tournament-page-body .tournament-workspace,
.store-page .store-workspace,
.my-info-page .my-info-workspace,
.home-page .home-workspace {
  padding-top: var(--home-top-space);
}

.tournament-page-body .home-topbar,
.store-page .home-topbar,
.my-info-page .home-topbar,
.home-page .home-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
  justify-self: center;
  width: calc(100% + 2 * var(--home-side-space));
  margin-top: calc(-1 * var(--home-top-space));
  margin-bottom: 0;
  padding: var(--home-top-space) var(--home-side-space) 24px;
  /* 흐림 경계는 헤더 안쪽에 둬 바로 아래 공지의 둥근 윗부분을 덮지 않는다. */
  background: linear-gradient(var(--bg) calc(100% - 16px), transparent);
}

.home-page .home-scroll-intro {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 24px;
  /* 레이아웃 높이는 그대로 둬 스크롤 높이 변경/위치 튐을 막는다. */
  opacity: var(--home-intro-opacity, 1);
  filter: blur(var(--home-intro-blur, 0px));
  transform: translateY(var(--home-intro-offset, 0px));
}

.home-page .home-scroll-intro[inert] {
  visibility: hidden;
  pointer-events: none;
}

.home-page .home-clubs-section {
  position: relative;
}

.tournament-page-body .app::after,
.store-page .app::after,
.my-info-page .app::after,
.home-page .app::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: calc(117px + env(safe-area-inset-bottom));
  z-index: 999;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}

.tournament-page-body .bottom-tabbar,
.store-page .bottom-tabbar,
.my-info-page .bottom-tabbar,
.home-page .bottom-tabbar {
  width: min(calc(100% - 32px), 700px);
  min-height: 72px;
  margin: 0 auto;
  bottom: calc(21px + env(safe-area-inset-bottom));
  padding: 8px 12px;
  border: 1px solid var(--surface);
  border-radius: 999px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 12%, transparent);
}

.tournament-page-body .bottom-tab,
.store-page .bottom-tab,
.my-info-page .bottom-tab,
.home-page .bottom-tab {
  min-height: 54px;
  padding: 4px 0;
  gap: 4px;
  color: var(--mute);
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.tournament-page-body .bottom-tab.is-active,
.tournament-page-body .bottom-tab.menu-open,
.store-page .bottom-tab.is-active,
.store-page .bottom-tab.menu-open,
.my-info-page .bottom-tab.is-active,
.my-info-page .bottom-tab.menu-open,
.home-page .bottom-tab.is-active,
.home-page .bottom-tab.menu-open {
  color: var(--primary);
  background: transparent;
}

/* 각 페이지의 기존 grid 간격을 상단 줄 내부 여백으로 옮긴다. */
.tournament-page-body .home-topbar,
.store-page .home-topbar { margin-bottom: -24px; }
.my-info-page { --home-side-space: 16px; }
.my-info-page .home-topbar { margin-bottom: -12px; }
.my-info-page .home-brand-logo { width: 70px; height: 70px; }
.my-info-page .home-profile-link { width: 62px; height: 62px; border: 0; box-shadow: none; }

/* 대회 참가신청 줄은 캡슐의 바닥 여백까지 포함한 높이 위에 둔다. */
.tournament-page-body .te-apply-bar {
  bottom: max(var(--te-nav-height, 0px), var(--bottom-tabbar-height));
}
.tournament-page-body .app::after { z-index: 998; }

@media (max-width: 640px) {
  .tournament-page-body,
  .store-page,
  .my-info-page,
  .home-page {
    --home-side-space: 16px;
    --home-top-space: calc(26px + env(safe-area-inset-top));
  }
  .store-page .home-topbar { margin-bottom: -22px; }
  .my-info-page .home-brand-logo { width: 58px; height: 58px; }
  .my-info-page .home-profile-link { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-scroll-intro {
    filter: none;
    transform: none;
  }
}