/* =============================================================
   chatGPT‑like Light Theme for Markdown Articles
   ============================================================= */

/* ---- Base --------------------------------------------------- */
body {
  margin : 0 ;
  font-family : 'Inter' , 'Noto Sans TC' , sans-serif ;
  background : #f9fafb ;
  color : #1f2937 ;
  line-height : 1.7 ;
  font-size : 1rem ;
}

a { color : #2563eb ; text-decoration : none ; }
a:hover { text-decoration : underline ; }

/* ---- Layout : constrain width & side paddings --------------- */
main , .main-container {
  max-width : 960px ;
  margin    : 0 auto ;
  padding   : 0 24px ;
}
article , .markdown-body {
  max-width : 860px ;
  margin    : 0 auto ;
  padding   : 0 16px ;
}

/* ---- Header -------------------------------------------------- */
.site-header {
  padding        : 14px 28px ;
  background     : #ffffff ;
  border-bottom  : 1px solid #e5e7eb ;
  display        : flex ;
  align-items    : center ;
}

/* ---- Hot article grid --------------------------------------- */
.hot {
  display : grid ;
  grid-template-columns : repeat( auto-fill , minmax( 200px , 1fr ) ) ;
  gap      : 18px ;
  padding  : 28px ;
}
.hot-item img {
  width        : 100% ;
  aspect-ratio : 1 / 1 ;
  object-fit   : cover ;
  border-radius: 8px ;
}

/* ---- Recent list -------------------------------------------- */
.post-card {
  display       : flex ;
  gap           : 14px ;
  padding       : 14px 0 ;
  border-bottom : 1px solid #e5e7eb ;
}
.post-card img {
  width        : 180px ;
  height       : 120px ;
  object-fit   : cover ;
  border-radius: 6px ;
}

/* =============================================================
   chatGPT‑style Markdown Enhancements
   ============================================================= */
.markdown-body {
  counter-reset : h2 ;
}

/* Headings */
.markdown-body h1 {
  font-size : 1.75rem ;
  font-weight : 700 ;
  margin : 1.4rem 0 1rem ;
}
.markdown-body h2 {
  font-size : 1.5rem ;
  font-weight : 600 ;
  margin : 1.3rem 0 0.9rem ;
  position : relative ;
}
.markdown-body h2::before {
  counter-increment : h2 ;
  content : counter(h2) '. ';
  color : #2563eb ;
  font-weight : 700 ;
  margin-right : 4px ;
}

/* Blockquote */
.markdown-body blockquote {
  margin : 1rem 0 ;
  padding : 10px 16px ;
  background : #f3f4f6 ;
  border-left : 4px solid #d1d5db ;
  border-radius : 6px ;
  color : #4b5563 ;
  font-style : italic ;
}

/* Lists */
.markdown-body ul , .markdown-body ol {
  margin : 0.8rem 0 0.8rem 1.25rem ;
}
.markdown-body li + li {
  margin-top : 0.35rem ;
}

/* Tables */
.markdown-body table {
  width : 100% ;
  border-collapse : collapse ;
  margin : 1rem 0 ;
  font-size : 0.96rem ;
}
.markdown-body th ,
.markdown-body td {
  border : 1px solid #d1d5db ;
  padding : 10px 12px ;
  text-align : left ;
}
.markdown-body th {
  background : #f3f4f6 ;
  font-weight : 600 ;
}

/* Inline Code */
.markdown-body code {
  background : #f3f4f6 ;
  color : #d6336c ;
  padding : 2px 4px ;
  border-radius : 4px ;
  font-size : 0.95rem ;
}

/* Code Block */
.markdown-body pre {
  background : #202123 ;
  color : #e2e8f0 ;
  padding : 16px 20px ;
  border-radius : 8px ;
  overflow-x : auto ;
  line-height : 1.6 ;
  font-size : 0.9rem ;
}
.markdown-body pre code {
  background : transparent ;
  padding : 0 ;
  color : inherit ;
}

/* highlight.js 重新配色 (github + brand) */
.hljs-comment , .hljs-quote { color : #9ca3af ; font-style : italic ; }
.hljs-keyword , .hljs-selector-tag , .hljs-section { color : #3b82f6 ; }
.hljs-string , .hljs-title , .hljs-name { color : #f43f5e ; }
.hljs-number , .hljs-literal , .hljs-tag { color : #f59e0b ; }
.hljs-attribute { color : #0ea5e9 ; }

/* ---- Buttons ------------------------------------------------- */
.btn-primary {
  background : #2563eb ;
  color : #ffffff ;
  padding : 10px 22px ;
  border : none ;
  border-radius : 6px ;
  cursor : pointer ;
  font-size : 1rem ;
}
.btn-primary:hover { background : #1e40af ; }

/* ---- Utilities ---------------------------------------------- */
.mt-4  { margin-top : 1rem ; }
.text-sm { font-size : 0.85rem ; }
/* ---- Responsive Images ------------------------------------- */
.markdown-body img {
  display : block ;
  max-width : 90% ;          /* 不超過螢幕 90% */
  height : auto ;
  margin : 1.2rem auto ;     /* 置中 */
}

/* ---- Utilities ---------------------------------------------- */
.mt-4  { margin-top : 1rem ; }
.text-sm { font-size : 0.85rem ; }
.badge {
  display : inline-block ;
  padding : 2px 6px ;
  background : #e5e7eb ;
  border-radius : 4px ;
  font-size : 0.75rem ;
  color : #374151 ;
}