/* 커뮤니티 페이지 전용 CSS입니다. 이 파일을 수정하면 커뮤니티 화면에만 적용됩니다. */
/* 선택자 주석은 어느 화면 요소인지, 속성 주석은 어떤 값을 바꾸는지 설명합니다. */

/* 커뮤니티: .community-page 선택자의 화면 요소에 적용됩니다. */
.community-page,
/* 커뮤니티: .community-layout 선택자의 배치 영역에 적용됩니다. */
.community-layout {
  /* 이 값보다 커지지 않도록 최대 너비를 100%로 지정합니다. */
  max-width: 100%;
}

/* 커뮤니티: .community-main 선택자의 화면 요소에 적용됩니다. */
.community-main {
  /* 이 값보다 작아지지 않도록 최소 너비를 0로 지정합니다. */
  min-width: 0;
}

/* 커뮤니티: .community-side 선택자의 화면 요소에 적용됩니다. */
.community-side {
  /* 이 값보다 작아지지 않도록 최소 너비를 280px로 지정합니다. */
  min-width: 280px;
}

/* 커뮤니티: .community-quick-menu 선택자의 화면 요소에 적용됩니다. */
.community-quick-menu {
  /* 표시 방식을 none로 설정합니다. */
  display: none;
}

/* 커뮤니티: .community-post-dialog 선택자의 팝업창에 적용됩니다. */
.community-post-dialog,
/* 커뮤니티: .community-view-dialog 선택자의 팝업창에 적용됩니다. */
.community-view-dialog {
  /* 기본 너비를 min(1100px, calc(100vw - 48px))로 지정합니다. */
  width: min(1100px, calc(100vw - 48px));
}

/* 커뮤니티 보조 정보도 모바일에서 읽을 수 있는 최소 크기를 유지합니다. */
.community-side-item small,
.community-side-mark {
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 780px) {
  .community-pagination button,
  .community-side-item,
  .community-tab {
    min-height: 44px;
  }
}