/* Mobile-first responsive styles */

/* 콘텐츠 중앙 정렬 */
#quarto-content > * {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* 네비게이션 바 */
.navbar {
  padding: 1rem 2rem 0.5rem;
}

.navbar-container {
  flex-direction: row !important;
  align-items: center !important;
}

.navbar-brand-container {
  flex: 0 0 auto !important;
  margin: 0 !important;
  order: 1;
}

#navbarCollapse {
  flex: 1 !important;
  order: 2;
  justify-content: center !important;
}

.navbar-nav.navbar-nav-scroll.me-auto {
  flex: 1 !important;
  justify-content: center !important;
  margin: 0 !important;
}

.navbar-nav.navbar-nav-scroll.ms-auto {
  margin-left: auto !important;
}

#quarto-search {
  order: 3;
}

.navbar-logo {
  height: 36px !important;
  width: auto !important;
  max-height: none !important;
}

.navbar {
  min-height: 60px !important;
}

.navbar-nav .nav-link {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 1rem !important;
}

/* About me 페이지 */
.quarto-about-jolla .about-entity {
  text-align: center;
}

.quarto-about-jolla h2 {
  text-align: center;
}

.quarto-about-jolla p,
.quarto-about-jolla ul,
.quarto-about-jolla ol,
.quarto-about-jolla table,
.quarto-about-jolla blockquote {
  text-align: left;
}

/* 홈 배너 */
.quarto-title-banner {
  background-color: #1e293b !important;
  text-align: center;
  padding: 3rem 1rem !important;
}

.quarto-title-banner .quarto-title {
  text-align: center !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.quarto-title-banner .quarto-title h1,
.quarto-title-banner .quarto-title .subtitle {
  text-align: center !important;
}

.quarto-title-banner h1,
.quarto-title-banner .subtitle {
  color: #ffffff !important;
  text-align: center;
}

.quarto-title-banner h1 {
  font-size: 2.8rem;
}

.quarto-title-banner .subtitle::after {
  content: "Rescued by RhoGAM, Researching for next RhoGAM";
  display: block;
  color: #ffffff;
  font-style: italic;
  font-size: 1rem;
  margin-top: 0.4rem;
  text-align: center;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  .quarto-title-banner h1 {
    font-size: 1.8rem;
  }

  .quarto-title-banner .subtitle {
    font-size: 0.95rem;
  }

  .navbar-container {
    flex-wrap: wrap !important;
    padding: 0.5rem 0;
  }

  .navbar-brand-container {
    width: 100%;
    text-align: center;
    margin-bottom: 0.3rem !important;
  }

  #navbarCollapse {
    width: 100%;
  }

  .navbar-nav.navbar-nav-scroll.me-auto {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .quarto-title h1.title {
    font-size: 1.6rem;
  }

  .quarto-about-jolla {
    padding: 0 1rem;
  }
}

/* 포스트 헤더 레이아웃 */

#title-block-header {
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

.quarto-title h1.title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* description 숨기기 */
.description {
  display: none;
}

/* "Published" 라벨 숨기기 */
.quarto-title-meta-heading {
  display: none;
}

/* 날짜 + 카테고리 한 줄, 중앙 정렬 */
.quarto-title-meta {
  display: flex !important;
  justify-content: center !important;
  padding: 0 !important;
}

.quarto-title-meta > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.quarto-title-meta-contents {
  display: flex !important;
  align-items: center;
}

.date {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
  margin: 0 !important;
}

/* 카테고리 스타일 (날짜 옆에 / Theme) */
.quarto-title .quarto-categories,
.quarto-title-meta .quarto-categories {
  display: inline-flex;
  gap: 0.2rem;
  margin: 0;
}

.quarto-category {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

.quarto-category::before {
  content: "/ ";
}

/* 그리드 카드: 제목과 카테고리 사이 간격 */
.quarto-grid-item .listing-categories {
  margin-top: 0.6rem;
}

/* 기본 폰트 및 가독성 */
body {
  font-size: 16px;
  line-height: 1.7;
}

/* 모바일에서 테이블 스크롤 가능하게 */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 모바일에서 이미지 넘침 방지 */
img {
  max-width: 100%;
  height: auto;
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }

  /* 네비게이션 패딩 조정 */
  .navbar {
    padding: 0.5rem 1rem;
  }

  /* 본문 여백 조정 */
  .page-columns .column-body {
    padding: 0 1rem;
  }

  /* About 페이지 프로필 중앙 정렬 */
  .about-entity {
    text-align: center;
  }

  /* 블로그 카드 간격 */
  .quarto-post {
    margin-bottom: 1.5rem;
  }
}

/* 태블릿 (768px ~ 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 15.5px;
  }
}