/* ============================================================
 * shinejs-custom.css — 자체 커스텀 스타일
 *
 * 이 파일은 코어/모듈/템플릿 업데이트의 영향을 받지 않는
 * public/css/ 에 위치합니다. URL: /css/shinejs-custom.css
 *
 * upstream sirsoft-basic 의 dist/css/components.css 를
 * 직접 수정하지 않고, 여기서 override 합니다.
 *
 * 필요 시 우선순위 문제 해결을 위해 선택자 specificity 를
 * 충분히 높이거나 !important 를 사용하세요.
 * ============================================================ */

@import url('./shinejs-font.css');

body {
  font-family: 'Pretendard';
}

/* index page */
.index {
  background: url(../img/bg_hero.jpg) no-repeat center top / cover;
}

.index #main_content .px-8 {
  padding: clamp(80px, 8.07vw, 155px) 0 clamp(30px, 3.28vw, 63px);
}

.index #main_content h1 {
  font-size: clamp(36px, 4.17vw, 80px);
  line-height: clamp(32px, 3.91vw, 75px);
}

.index #main_content h1+p {
  font-size: 20px;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 300;
  margin-bottom: clamp(48px, 10vw, 115px);
}

.index #main_content .bg-white.rounded-lg.shadow-md.p-8.grid.grid-cols-2.gap-12 {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 40px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.index #main_content .bg-white .text-sm { /* LATEST POSTS, COMMENTS */
  font-size: 16px;
  font-weight: 500;
}

.index #main_content .bg-white .text-sm+button { /* 더보기 */
  font-size: 14px;
  font-weight: 500;
  color: #696969;
}

.index #main_content .bg-white .text-xs { /* 사진 제목 */
  font-size: 14px;
}

.index .py-2 { /* 코멘트 내용 */
  padding: 4px 0;
}

.index+#footer {
  margin-top: 0;
}

/* common & sub page */
#main_content h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}

#main_content>.py-8.max-w-4xl.mx-auto { /* 게시판 VIEW PAGE */
  max-width: var(--container-7xl);
}

.py-2.max-h-60.overflow-auto { /* 카테고리 박스 */
  max-height: calc(var(--spacing) * 76);
}

#main_content .mb-6.border-b.border-gray-200.px-6.pt-4,
#main_content .flex.justify-end.gap-2.px-6.py-4.border-t.border-gray-200 { /* 첨부파일 */
  border: none;
}

div[aria-label="common.pagination"].gap-2 {
  gap: calc(var(--spacing) * 1);
}

div[aria-label="common.pagination"] button.px-3 {
  padding-inline: calc(var(--spacing) * 2)
}

#footer .max-w-7xl.mx-auto {
  padding-inline: calc(var(--spacing) * 8);
}

/* mobile */
@media all and (max-width: 768px) {
  .index {
    background: url(../img/bg_hero.jpg) no-repeat left top / cover;
  }
  .index .grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #footer .max-w-7xl.mx-auto {
    padding: 0;
  }
}