/* Custom Styles for Better Readability */

/* =========================
   Code Block Styles
   ========================= */

/* Light Mode Code Block */
.post-content pre {
  position: relative;
  margin: 2rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Light mode code block background */
body:not(.dark) .post-content pre,
body:not(.dark) .highlight {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%) !important;
  border: 1px solid #e0e4e8 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark) .post-content pre code {
  display: block;
  padding: 1.5rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  color: #1a1a2e;
  background: transparent !important;
}

/* Dark mode code block background */
body.dark .post-content pre,
body.dark .highlight,
.dark .post-content pre,
.dark .highlight {
  background: #050507 !important;  /* 매우 진한 검은색 */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 1);
}

body.dark .post-content pre code,
.dark .post-content pre code {
  display: block;
  padding: 1.5rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.7;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: #f8f8f2;
  background: transparent !important;
}

/* 줄 번호 완전히 숨기기 */
.highlight .lineno,
.highlight .gutter,
.highlight .rouge-gutter,
.rouge-gutter,
.lineno {
  display: none !important;
}

/* 줄 번호 테이블 제거 */
.highlight table {
  display: block !important;
}

.highlight table tbody {
  display: block !important;
}

.highlight table tr {
  display: block !important;
}

.highlight table td.code,
.highlight table td {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 코드 블록 패딩 조정 */
.highlight pre {
  padding: 1.5rem !important;
}

.highlight {
  overflow-x: auto !important;
}

/* Inline code */
.post-content :not(pre) > code {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-weight: 400;
}

body:not(.dark) .post-content :not(pre) > code {
  background: #f1f3f5 !important;
  color: #d63384 !important;
  border: 1px solid #dee2e6;
}

body.dark .post-content :not(pre) > code,
.dark .post-content :not(pre) > code {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ff79c6 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =========================
   Syntax Highlighting - Light Mode
   ========================= */

body:not(.dark) .highlight .c { color: #6a737d; font-style: italic } /* Comment */
body:not(.dark) .highlight .err { color: #d73a49; background-color: #ffeef0 } /* Error */
body:not(.dark) .highlight .k { color: #d73a49; font-weight: 600 } /* Keyword */
body:not(.dark) .highlight .o { color: #d73a49 } /* Operator */
body:not(.dark) .highlight .cm { color: #6a737d; font-style: italic } /* Comment.Multiline */
body:not(.dark) .highlight .cp { color: #d73a49; font-weight: 600 } /* Comment.Preproc */
body:not(.dark) .highlight .c1 { color: #6a737d; font-style: italic } /* Comment.Single */
body:not(.dark) .highlight .cs { color: #6a737d; font-weight: 600; font-style: italic } /* Comment.Special */
body:not(.dark) .highlight .gd { color: #d73a49; background-color: #ffeef0 } /* Generic.Deleted */
body:not(.dark) .highlight .ge { font-style: italic } /* Generic.Emph */
body:not(.dark) .highlight .gr { color: #d73a49 } /* Generic.Error */
body:not(.dark) .highlight .gh { color: #005cc5; font-weight: 600 } /* Generic.Heading */
body:not(.dark) .highlight .gi { color: #22863a; background-color: #f0fff4 } /* Generic.Inserted */
body:not(.dark) .highlight .gp { color: #6a737d; font-weight: 600 } /* Generic.Prompt */
body:not(.dark) .highlight .gs { font-weight: 600 } /* Generic.Strong */
body:not(.dark) .highlight .gu { color: #6f42c1; font-weight: 600 } /* Generic.Subheading */
body:not(.dark) .highlight .kc { color: #d73a49 } /* Keyword.Constant */
body:not(.dark) .highlight .kd { color: #d73a49 } /* Keyword.Declaration */
body:not(.dark) .highlight .kn { color: #d73a49 } /* Keyword.Namespace */
body:not(.dark) .highlight .kp { color: #d73a49 } /* Keyword.Pseudo */
body:not(.dark) .highlight .kr { color: #d73a49 } /* Keyword.Reserved */
body:not(.dark) .highlight .kt { color: #d73a49 } /* Keyword.Type */
body:not(.dark) .highlight .m { color: #005cc5 } /* Literal.Number */
body:not(.dark) .highlight .s { color: #032f62 } /* Literal.String */
body:not(.dark) .highlight .na { color: #e36209 } /* Name.Attribute */
body:not(.dark) .highlight .nb { color: #005cc5 } /* Name.Builtin */
body:not(.dark) .highlight .nc { color: #6f42c1 } /* Name.Class */
body:not(.dark) .highlight .no { color: #005cc5 } /* Name.Constant */
body:not(.dark) .highlight .nd { color: #6f42c1; font-weight: 600 } /* Name.Decorator */
body:not(.dark) .highlight .ni { color: #005cc5 } /* Name.Entity */
body:not(.dark) .highlight .ne { color: #d73a49 } /* Name.Exception */
body:not(.dark) .highlight .nf { color: #6f42c1 } /* Name.Function */
body:not(.dark) .highlight .nl { color: #005cc5 } /* Name.Label */
body:not(.dark) .highlight .nn { color: #005cc5 } /* Name.Namespace */
body:not(.dark) .highlight .nt { color: #22863a } /* Name.Tag */
body:not(.dark) .highlight .nv { color: #e36209 } /* Name.Variable */
body:not(.dark) .highlight .ow { color: #d73a49; font-weight: 600 } /* Operator.Word */
body:not(.dark) .highlight .w { color: #f6f8fa } /* Text.Whitespace */
body:not(.dark) .highlight .mf { color: #005cc5 } /* Literal.Number.Float */
body:not(.dark) .highlight .mh { color: #005cc5 } /* Literal.Number.Hex */
body:not(.dark) .highlight .mi { color: #005cc5 } /* Literal.Number.Integer */
body:not(.dark) .highlight .mo { color: #005cc5 } /* Literal.Number.Oct */
body:not(.dark) .highlight .sb { color: #032f62 } /* Literal.String.Backtick */
body:not(.dark) .highlight .sc { color: #032f62 } /* Literal.String.Char */
body:not(.dark) .highlight .sd { color: #032f62 } /* Literal.String.Doc */
body:not(.dark) .highlight .s2 { color: #032f62 } /* Literal.String.Double */
body:not(.dark) .highlight .se { color: #032f62 } /* Literal.String.Escape */
body:not(.dark) .highlight .sh { color: #032f62 } /* Literal.String.Heredoc */
body:not(.dark) .highlight .si { color: #005cc5 } /* Literal.String.Interpol */
body:not(.dark) .highlight .sx { color: #032f62 } /* Literal.String.Other */
body:not(.dark) .highlight .sr { color: #032f62 } /* Literal.String.Regex */
body:not(.dark) .highlight .s1 { color: #032f62 } /* Literal.String.Single */
body:not(.dark) .highlight .ss { color: #005cc5 } /* Literal.String.Symbol */
body:not(.dark) .highlight .bp { color: #005cc5 } /* Name.Builtin.Pseudo */
body:not(.dark) .highlight .vc { color: #e36209 } /* Name.Variable.Class */
body:not(.dark) .highlight .vg { color: #e36209 } /* Name.Variable.Global */
body:not(.dark) .highlight .vi { color: #e36209 } /* Name.Variable.Instance */
body:not(.dark) .highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */

/* =========================
   Syntax Highlighting - Dark Mode (Dracula Theme)
   ========================= */

body.dark .highlight .c,
.dark .highlight .c { color: #6272a4; font-style: italic } /* Comment */
body.dark .highlight .err,
.dark .highlight .err { color: #ff5555 } /* Error */
body.dark .highlight .k,
.dark .highlight .k { color: #ff79c6; font-weight: 600 } /* Keyword */
body.dark .highlight .o,
.dark .highlight .o { color: #ff79c6 } /* Operator */
body.dark .highlight .cm,
.dark .highlight .cm { color: #6272a4; font-style: italic } /* Comment.Multiline */
body.dark .highlight .cp,
.dark .highlight .cp { color: #ff79c6 } /* Comment.Preproc */
body.dark .highlight .c1,
.dark .highlight .c1 { color: #6272a4; font-style: italic } /* Comment.Single */
body.dark .highlight .cs,
.dark .highlight .cs { color: #6272a4; font-style: italic } /* Comment.Special */
body.dark .highlight .gd,
.dark .highlight .gd { color: #ff5555 } /* Generic.Deleted */
body.dark .highlight .ge,
.dark .highlight .ge { font-style: italic } /* Generic.Emph */
body.dark .highlight .gh,
.dark .highlight .gh { color: #f8f8f2; font-weight: 600 } /* Generic.Heading */
body.dark .highlight .gi,
.dark .highlight .gi { color: #50fa7b } /* Generic.Inserted */
body.dark .highlight .gp,
.dark .highlight .gp { color: #f8f8f2; font-weight: 600 } /* Generic.Prompt */
body.dark .highlight .gs,
.dark .highlight .gs { font-weight: 600 } /* Generic.Strong */
body.dark .highlight .gu,
.dark .highlight .gu { color: #8be9fd; font-weight: 600 } /* Generic.Subheading */
body.dark .highlight .kc,
.dark .highlight .kc { color: #ff79c6 } /* Keyword.Constant */
body.dark .highlight .kd,
.dark .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */
body.dark .highlight .kn,
.dark .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */
body.dark .highlight .kp,
.dark .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */
body.dark .highlight .kr,
.dark .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */
body.dark .highlight .kt,
.dark .highlight .kt { color: #8be9fd } /* Keyword.Type */
body.dark .highlight .m,
.dark .highlight .m { color: #bd93f9 } /* Literal.Number */
body.dark .highlight .s,
.dark .highlight .s { color: #f1fa8c } /* Literal.String */
body.dark .highlight .na,
.dark .highlight .na { color: #50fa7b } /* Name.Attribute */
body.dark .highlight .nb,
.dark .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */
body.dark .highlight .nc,
.dark .highlight .nc { color: #50fa7b } /* Name.Class */
body.dark .highlight .no,
.dark .highlight .no { color: #ff79c6 } /* Name.Constant */
body.dark .highlight .nd,
.dark .highlight .nd { color: #8be9fd } /* Name.Decorator */
body.dark .highlight .ni,
.dark .highlight .ni { color: #f8f8f2 } /* Name.Entity */
body.dark .highlight .ne,
.dark .highlight .ne { color: #ff79c6 } /* Name.Exception */
body.dark .highlight .nf,
.dark .highlight .nf { color: #50fa7b } /* Name.Function */
body.dark .highlight .nl,
.dark .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */
body.dark .highlight .nn,
.dark .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
body.dark .highlight .nt,
.dark .highlight .nt { color: #ff79c6 } /* Name.Tag */
body.dark .highlight .nv,
.dark .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */
body.dark .highlight .ow,
.dark .highlight .ow { color: #ff79c6 } /* Operator.Word */
body.dark .highlight .w,
.dark .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
body.dark .highlight .mf,
.dark .highlight .mf { color: #bd93f9 } /* Literal.Number.Float */
body.dark .highlight .mh,
.dark .highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */
body.dark .highlight .mi,
.dark .highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */
body.dark .highlight .mo,
.dark .highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */
body.dark .highlight .sb,
.dark .highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */
body.dark .highlight .sc,
.dark .highlight .sc { color: #f1fa8c } /* Literal.String.Char */
body.dark .highlight .sd,
.dark .highlight .sd { color: #f1fa8c } /* Literal.String.Doc */
body.dark .highlight .s2,
.dark .highlight .s2 { color: #f1fa8c } /* Literal.String.Double */
body.dark .highlight .se,
.dark .highlight .se { color: #f1fa8c } /* Literal.String.Escape */
body.dark .highlight .sh,
.dark .highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */
body.dark .highlight .si,
.dark .highlight .si { color: #f1fa8c } /* Literal.String.Interpol */
body.dark .highlight .sx,
.dark .highlight .sx { color: #f1fa8c } /* Literal.String.Other */
body.dark .highlight .sr,
.dark .highlight .sr { color: #ff5555 } /* Literal.String.Regex */
body.dark .highlight .s1,
.dark .highlight .s1 { color: #f1fa8c } /* Literal.String.Single */
body.dark .highlight .ss,
.dark .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */
body.dark .highlight .bp,
.dark .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */
body.dark .highlight .vc,
.dark .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */
body.dark .highlight .vg,
.dark .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */
body.dark .highlight .vi,
.dark .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */
body.dark .highlight .il,
.dark .highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */

/* =========================
   Better Typography
   ========================= */

.post-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  line-height: 1.75;
}

body:not(.dark) .post-content {
  color: #374151;
}

body.dark .post-content,
.dark .post-content {
  color: #e5e7eb;
}

/* Paragraph styles */
.post-content p {
  margin-bottom: 1.5rem;
}

body:not(.dark) .post-content p {
  color: #4b5563;
}

body.dark .post-content p,
.dark .post-content p {
  color: #d1d5db;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  position: relative;
  scroll-margin-top: 5rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

body:not(.dark) .post-content h1,
body:not(.dark) .post-content h2,
body:not(.dark) .post-content h3,
body:not(.dark) .post-content h4,
body:not(.dark) .post-content h5,
body:not(.dark) .post-content h6 {
  color: #111827;
}

body.dark .post-content h1,
body.dark .post-content h2,
body.dark .post-content h3,
body.dark .post-content h4,
body.dark .post-content h5,
body.dark .post-content h6,
.dark .post-content h1,
.dark .post-content h2,
.dark .post-content h3,
.dark .post-content h4,
.dark .post-content h5,
.dark .post-content h6 {
  color: #f3f4f6;
}

.post-content h1 {
  font-size: 2.5rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.post-content h2 {
  font-size: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid;
}

body:not(.dark) .post-content h2 {
  border-bottom-color: #e5e7eb;
}

body.dark .post-content h2,
.dark .post-content h2 {
  border-bottom-color: #374151;
}

.post-content h3 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.post-content h2:hover::before,
.post-content h3:hover::before {
  content: '#';
  position: absolute;
  left: -1.5rem;
  color: #0A84FF;
  opacity: 0.5;
}

/* Better Lists */
.post-content ul,
.post-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.post-content li {
  margin-bottom: 0.5rem;
}

body:not(.dark) .post-content li {
  color: #4b5563;
}

body.dark .post-content li,
.dark .post-content li {
  color: #d1d5db;
}

.post-content ul li::marker {
  color: #0A84FF;
}

.post-content ol li::marker {
  color: #0A84FF;
  font-weight: 600;
}

/* Links */
.post-content a {
  color: #0A84FF;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  transition: all 0.2s;
}

.post-content a:hover {
  color: #0066CC;
  text-decoration: none;
}

body.dark .post-content a,
.dark .post-content a {
  color: #60A5FA;
}

body.dark .post-content a:hover,
.dark .post-content a:hover {
  color: #93BBFC;
}

/* Strong text */
.post-content strong {
  font-weight: 600;
}

body:not(.dark) .post-content strong {
  color: #111827;
}

body.dark .post-content strong,
.dark .post-content strong {
  color: #f3f4f6;
}

/* =========================
   Tables
   ========================= */

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  overflow: hidden;
  border-radius: 0.5rem;
}

body:not(.dark) .post-content table {
  border: 1px solid #e5e7eb;
}

body.dark .post-content table,
.dark .post-content table {
  border: 1px solid #374151;
}

body:not(.dark) .post-content table th {
  background: #f9fafb;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  color: #111827;
}

body.dark .post-content table th,
.dark .post-content table th {
  background: #1f2937;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #374151;
  color: #f3f4f6;
}

body:not(.dark) .post-content table td {
  padding: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
}

body.dark .post-content table td,
.dark .post-content table td {
  padding: 0.75rem;
  border-bottom: 1px solid #374151;
  color: #d1d5db;
}

body:not(.dark) .post-content table tr:hover {
  background: #f9fafb;
}

body.dark .post-content table tr:hover,
.dark .post-content table tr:hover {
  background: #111827;
}

/* =========================
   Blockquotes
   ========================= */

body:not(.dark) .post-content blockquote {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #ffffff 100%) !important;
  border-left: 4px solid #0A84FF !important;
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  color: #1e3a5f !important;
  font-style: italic;
  box-shadow: 0 2px 12px rgba(10, 132, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(10, 132, 255, 0.1);
  border-left-width: 4px;
}

body:not(.dark) .post-content blockquote p {
  color: #1e3a5f !important;
  line-height: 1.7;
  margin: 0;
}

body:not(.dark) .post-content blockquote strong {
  color: #0a2540 !important;
  font-weight: 600;
}

body.dark .post-content blockquote,
.dark .post-content blockquote {
  background: #0a0a0c !important;
  border-left: 4px solid #3b82f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 2rem 0;
  color: #e5e7eb !important;
  font-style: italic;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body.dark .post-content blockquote p,
.dark .post-content blockquote p {
  color: #d1d5db !important;
}

body.dark .post-content blockquote strong,
.dark .post-content blockquote strong {
  color: #ffffff !important;
}

/* =========================
   Custom Scrollbar for Code Blocks
   ========================= */

.post-content pre::-webkit-scrollbar {
  height: 8px;
}

.post-content pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

body:not(.dark) .post-content pre::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

body:not(.dark) .post-content pre::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

body.dark .post-content pre::-webkit-scrollbar-thumb,
.dark .post-content pre::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

body.dark .post-content pre::-webkit-scrollbar-thumb:hover,
.dark .post-content pre::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* =========================
   Enhanced Code Block Styling
   ========================= */

/* Code block wrapper styling */
.code-block-wrapper {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Remove any line numbers completely */
.code-block-wrapper .line-numbers,
.line-numbers {
  display: none !important;
}

/* Reset code padding */
.code-block-wrapper pre code {
  padding-left: 1.5rem !important;
}

/* Language label styling */
.code-block-wrapper .absolute.top-2.left-3 {
  z-index: 10;
  font-size: 0.65rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* Copy button enhancements */
.copy-code-button {
  z-index: 10;
}

/* Light mode code block enhancements */
body:not(.dark) .code-block-wrapper pre {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%) !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Dark mode code block enhancements */
body.dark .code-block-wrapper pre,
.dark .code-block-wrapper pre {
  background: #0d1117 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* =========================
   Responsive adjustments
   ========================= */

/* Extra large screens */
@media (min-width: 1400px) {
  .container {
    max-width: 1200px;
  }
}

/* Large screens */
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
    padding: 0 2rem;
  }
}

/* Medium screens (tablets) */
@media (max-width: 992px) {
  .container {
    max-width: 720px;
    padding: 0 1.5rem;
  }

  .post-content {
    font-size: 1.05rem;
  }

  .post-content h1 {
    font-size: 2.25rem;
  }

  .post-content h2 {
    font-size: 1.85rem;
  }
}

/* Small screens (landscape phones) */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .post-content {
    font-size: 1rem;
  }

  .post-content h1 {
    font-size: 1.875rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }

  .post-content h2 {
    font-size: 1.5rem;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
  }

  .post-content h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
  }

  .post-content pre {
    margin: 1.5rem -1rem;
    border-radius: 0;
    width: calc(100% + 2rem);
  }

  .post-content pre code {
    font-size: 0.8rem;
    padding: 1rem !important;
  }

  .code-block-wrapper {
    margin: 1.5rem -1rem;
    border-radius: 0;
  }

  .highlighter-rouge {
    margin: 1.5rem -1rem !important;
  }

  .highlighter-rouge .highlight {
    border-radius: 0 !important;
  }

  /* Blockquote responsive */
  .post-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
  }

  /* Table responsive */
  .post-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Navigation responsive */
  nav {
    padding: 0 1rem;
  }

  nav .nav-btn {
    padding: 0.5rem;
  }

  /* Footer responsive */
  footer .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Cards responsive */
  .card {
    padding: 1rem;
  }

  /* Post item responsive */
  .post-item {
    padding: 1rem 0;
  }

  /* Tag responsive */
  .tag {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
  }

  /* Category button responsive */
  .category-btn {
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
  }


  /* Reading progress */
  #readingProgress {
    height: 3px;
  }
}

/* Extra small screens (portrait phones) */
@media (max-width: 480px) {
  .container {
    padding: 0 0.75rem;
  }

  .post-content {
    font-size: 0.95rem;
  }

  .post-content h1 {
    font-size: 1.625rem;
  }

  .post-content h2 {
    font-size: 1.375rem;
  }

  .post-content h3 {
    font-size: 1.125rem;
  }

  .post-content pre code {
    font-size: 0.75rem;
    line-height: 1.6;
  }

  /* Lists responsive */
  .post-content ul,
  .post-content ol {
    padding-left: 1.5rem;
  }

  /* Button responsive */
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  /* Copy button hide text on mobile */
  .copy-code-button .copy-text,
  .copy-code-button .copied-text {
    display: none;
  }

  .copy-code-button {
    padding: 0.5rem;
  }

  /* Language label smaller */
  .code-block-wrapper .absolute.top-2.left-3 {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Make buttons easier to tap */
  .btn, .category-btn, .nav-btn, #scrollToTop {
    min-height: 44px;
    min-width: 44px;
  }

  /* Show copy button always on touch devices */
  .copy-code-button {
    opacity: 0.8 !important;
  }

  /* Disable hover effects that don't work well on touch */
  .card:hover {
    transform: none;
  }

  .post-item:hover h2 {
    color: inherit;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body:not(.dark) .post-content pre {
    border: 2px solid #000;
  }

  body.dark .post-content pre,
  .dark .post-content pre {
    border: 2px solid #fff;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .post-content > * {
    animation: none !important;
  }
}

/* =========================
   Animation for smooth appearance
   ========================= */

.post-content > * {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.post-content > *:nth-child(1) { animation-delay: 0.1s; }
.post-content > *:nth-child(2) { animation-delay: 0.15s; }
.post-content > *:nth-child(3) { animation-delay: 0.2s; }
.post-content > *:nth-child(4) { animation-delay: 0.25s; }
.post-content > *:nth-child(5) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   Images
   ========================= */

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 2rem auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.dark .post-content img,
.dark .post-content img {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* =========================
   HR (Horizontal Rule)
   ========================= */

.post-content hr {
  margin: 3rem 0;
  border: none;
  height: 1px;
}

body:not(.dark) .post-content hr {
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
}

body.dark .post-content hr,
.dark .post-content hr {
  background: linear-gradient(90deg, transparent, #374151, transparent);
}

/* =========================
   Fix for Jekyll/Rouge generated code blocks
   ========================= */

/* Override Rouge's div.highlighter-rouge */
.highlighter-rouge {
  margin: 2rem 0 !important;
}

.highlighter-rouge .highlight {
  margin: 0 !important;
}

/* Ensure proper styling for figure elements with code */
figure.highlight {
  margin: 2rem 0 !important;
}

/* Fix table-based code blocks (some Rouge configurations) */
.highlight table {
  margin: 0 !important;
  border: none !important;
}

.highlight table td {
  padding: 0 !important;
  border: none !important;
}

.highlight table pre {
  margin: 0 !important;
}

.highlight .gutter {
  padding-right: 1rem !important;
  color: #6b7280 !important;
}