@charset "UTF-8";

:root {
  --top-nav-h: 56px;
  --bottom-nav-h: 52px;
}
body {
  margin: 0;
  padding-bottom: 4rem;
}
.page-wrapper {
  padding-top: var(--top-nav-h);
  padding-bottom: var(--bottom-nav-h);   /* 하단 nav 가 fixed 면 추가 */
  min-height: 100vh;                     /* 푸터 밀려 내려가지 않도록 */
  box-sizing: border-box;
}
.content {
/*  width: 327px;*/
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;       /* 높이 확장 */
  margin: 0 auto;       /* 가운데 정렬 */
}
/* 공통 컨테이너 */
.container {
  width: 100%;          /* 모바일에서는 화면 전체 차지 */
  margin: 0 auto;       /* 가운데 정렬 */
  padding: 0 16px;      /* 양쪽 여백 */
  box-sizing: border-box;
}

/* PC 화면 (768px 이상)일 때는 최대 768px 로 제한 */
@media (min-width: 768px) {
  .page-wrapper {
    max-width: 768px;
    margin: 0 auto;
  }
}