/* ============================================================
   AI Heartland — Redesign (note.com top + zenn.dev article-detail hybrid)
   --------------------------------------------------------------
   Source: awesome-design-md-jp/{note,zenn}/DESIGN.md (実測値ベース)
   - Top / listing pages   → note flavor
   - Article detail pages  → zenn flavor (.article-body / .post-body / .news-body)
   - Brand: #1D9E75 (primary, overrides note's teal & zenn's blue)
   - Sub:   #3EA8FF (zenn blue) — for code tags / table-header tint
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand (AI Heartland green — replaces note's teal & zenn's blue) */
  --brand-50:  #f0fdf4;
  --brand-100: #dcfce7;
  --brand-200: #bbf7d0;
  --brand-300: #86efac;
  --brand-500: #1D9E75;
  --brand-600: #178661;
  --brand-700: #126B4F;
  --brand-800: #0E5740;

  /* Sub: zenn blue */
  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;
  --blue-200:  #d6e3ed;        /* zenn border */
  --blue-500:  #3EA8FF;        /* zenn primary */
  --blue-600:  #0f83fd;        /* zenn primary hover */
  --blue-700:  #1d4ed8;
  --blue-surface: #f1f5f9;     /* zenn surface */

  /* note neutrals (for top/listing) */
  --note-text:        #08131a;
  --note-text-2:      rgba(8,19,26,0.66);
  --note-text-3:      rgba(8,19,26,0.50);
  --note-bg:          #ffffff;
  --note-bg-section:  #f5f8fa;
  --note-border:      rgba(8,19,26,0.14);
  --note-border-strong: rgba(8,19,26,0.22);

  /* zenn neutrals (for article body) */
  --zenn-text:    rgba(0,0,0,0.82);
  --zenn-text-2:  rgba(0,0,0,0.55);
  --zenn-text-3:  rgba(0,0,0,0.36);
  --zenn-bg:      #ffffff;
  --zenn-surface: #f1f5f9;
  --zenn-border:  #d6e3ed;

  /* Code palette (zenn dark code blocks per user request) */
  --code-bg:   #1e1e2e;
  --code-bg-2: #252535;
  --code-text: #cdd6f4;

  /* Site-wide semantic (default = note flavor for top/global chrome) */
  --bg:          var(--note-bg);
  --bg2:         var(--note-bg);
  --bg3:         var(--note-bg-section);
  --bg-muted:    var(--note-bg-section);
  --bg-section:  var(--note-bg-section);
  --surface:     #ffffff;
  --surface2:    var(--note-bg-section);
  --surface-toc: #ffffff;
  --border:      var(--note-border);
  --border2:     var(--note-border-strong);
  --border-strong: var(--note-border-strong);
  --header-bg:   rgba(255,255,255,0.96);
  --menu-bg:     rgba(255,255,255,0.99);
  --text:        var(--note-text);
  --text2:       var(--note-text-2);
  --text3:       var(--note-text-3);
  --link:        var(--brand-600);
  --link-hover:  var(--brand-800);
  --accent:      var(--brand-500);
  --claude:      var(--brand-500);
  --claude2:     var(--brand-600);
  --green:       var(--brand-500);

  /* Typography stacks */
  --sans:   -apple-system, BlinkMacSystemFont, "Helvetica Neue",
            "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            Arial, "Noto Sans JP", Meiryo, sans-serif;
  --sans-zenn: -apple-system, "system-ui", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", Meiryo, sans-serif;
  --en:     "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:   "JetBrains Mono", SFMono-Regular, Consolas, Menlo,
            "Courier New", monospace;

  /* Layout */
  --reading-max: 720px;
  --header-h: 64px;
  --article-side-w: 240px;
  --listing-aside-w: 280px;

  /* Effects */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card:    0 1px 3px 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12);    /* note elevation-1 */
  --shadow-hover:   0 2px 4px rgba(0,0,0,0.08);                                    /* zenn hover */
  --shadow-pop:     0 4px 12px rgba(0,0,0,0.10);                                   /* zenn elevation-2 */
  --shadow-modal:   0 8px 24px rgba(0,0,0,0.12);                                   /* zenn elevation-3 */
  --shadow-card-img:0 1px 3px rgba(0,0,0,0.05);
}

/* Dark mode (slate-tinted, never pure black; WCAG AA contrast) */
html.dark {
  --bg:        #0f172a;          /* slate-900: softer than #000 */
  --bg2:       #0f172a;
  --bg3:       #1e293b;          /* slate-800 */
  --bg-muted:  #1e293b;
  --bg-section:#1e293b;
  --surface:   #1e293b;
  --surface2:  #334155;          /* slate-700 */
  --surface-toc: #1e293b;
  --border:    rgba(226,232,240,0.14);   /* slate-200 / 0.14 */
  --border2:   rgba(226,232,240,0.22);
  --border-strong: rgba(226,232,240,0.32);
  --header-bg: rgba(15,23,42,0.92);
  --menu-bg:   rgba(15,23,42,0.98);
  --text:      #f1f5f9;          /* slate-100 — high contrast on slate-900 (~13.8:1) */
  --text2:     #cbd5e1;          /* slate-300 (~9.4:1) */
  --text3:     #94a3b8;          /* slate-400 (~5.5:1, AA for normal text) */
  --link:      #6FCBA1;
  --link-hover:#9be4bf;
  /* zenn flavors in dark */
  --zenn-text:    #f1f5f9;
  --zenn-text-2:  #cbd5e1;
  --zenn-text-3:  #94a3b8;
  --zenn-bg:      var(--bg);
  --zenn-surface: #1e293b;
  --zenn-border:  rgba(226,232,240,0.14);
  /* note flavors in dark */
  --note-text:        #f1f5f9;
  --note-text-2:      #cbd5e1;
  --note-text-3:      #94a3b8;
  --note-bg:          var(--bg);
  --note-bg-section:  #1e293b;
  --note-border:      rgba(226,232,240,0.14);
  --note-border-strong: rgba(226,232,240,0.22);
  --shadow-card:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-hover:   0 2px 6px rgba(0,0,0,0.5);
  --shadow-pop:     0 4px 12px rgba(0,0,0,0.55);
  --shadow-modal:   0 8px 24px rgba(0,0,0,0.6);
  --shadow-card-img:0 2px 8px rgba(0,0,0,0.45);
}

/* Body baseline (note flavor for top/listing) */
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--text);
  background: var(--bg);
  word-wrap: break-word;                          /* note global */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}
@media (max-width: 600px) {
  body { font-size: 15px; }
}

/* English/code text — Inter */
.en, [lang="en"] { font-family: var(--en); }

/* Page wrap */
.page-wrap {
  max-width: 1200px;
  padding: 0 16px 80px;
}
@media (min-width: 1080px) {
  .page-wrap { padding: 0 24px 96px; max-width: 1280px; }
}
@media (min-width: 1440px) {
  .page-wrap { max-width: 1320px; padding: 0 32px 96px; }
}

/* ---------- 2. Header (note-style: 64px white, soft border) ---------- */
header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner {
  max-width: 1280px !important;
  height: 64px !important;
  padding: 0 16px !important;
}
@media (min-width: 768px) {
  .header-inner { padding: 0 24px !important; height: 64px !important; }
}
.logo {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--text) !important;
  gap: 10px !important;
}
.logo-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)) !important;
  box-shadow: 0 2px 6px rgba(29,158,117,0.25) !important;
  font-size: 16px !important;
}
.desktop-nav a {
  font-size: 14px !important;
  color: var(--text2) !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.desktop-nav a:hover {
  color: var(--brand-600) !important;
  background: var(--brand-50) !important;
}
.header-btn:hover, .header-btn:active {
  color: var(--brand-600) !important;
  background: var(--brand-50) !important;
}

/* Reading progress bar */
#reading-progress {
  background: linear-gradient(90deg, var(--brand-500), var(--blue-500)) !important;
  height: 3px !important;
}

/* ---------- 3. Article shell (zenn detail layout) ---------- */
.article-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--sans-zenn);
  color: var(--zenn-text);
}
@media (min-width: 1080px) {
  .article-shell {
    display: grid;
    grid-template-columns: var(--article-side-w) minmax(0, 1fr) var(--article-side-w);
    gap: 48px;
    align-items: flex-start;
  }
  .article-main { grid-column: 2; }
  .article-side--right { grid-column: 3; }
}
@media (min-width: 1300px) {
  .article-shell {
    gap: 56px;
  }
}

.article-side--left { display: none; }

.article-side--right { display: none; }
@media (min-width: 1080px) {
  .article-side--right {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    padding-left: 4px;
    scroll-behavior: smooth;
    /* fade gradients top/bottom to hint at scrollability */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .article-side--right::-webkit-scrollbar { width: 4px; }
  .article-side--right::-webkit-scrollbar-thumb { background: var(--zenn-border); border-radius: 4px; }
  .article-side--right::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }
}

.article-main {
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 1080px) {
  .article-main { max-width: var(--reading-max); }
}

/* TOC sticky (zenn-style: rail with current-position highlight) */
.toc-sticky {
  background: transparent;
  border: none;
  padding: 8px 0;
  font-size: 13px;
  font-family: var(--sans-zenn);
}
.toc-sticky__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--zenn-text-2);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 12px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-sticky__label::before {
  content: "";
  width: 14px; height: 2px;
  background: var(--brand-500);
  border-radius: 2px;
}
.toc-sticky ul {
  list-style: none;
  padding: 0; margin: 0;
  border-left: 2px solid var(--zenn-border);
}
.toc-sticky li { position: relative; }
.toc-sticky li + li { margin-top: 2px; }
.toc-sticky li.toc-h3 a { padding-left: 28px; font-size: 12.5px; color: var(--zenn-text-3); }
.toc-sticky a {
  display: block;
  color: var(--zenn-text-2);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  padding: 6px 12px;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.toc-sticky a:hover {
  color: var(--brand-600);
  background: var(--brand-50);
  border-radius: 0 6px 6px 0;
}
.toc-sticky a.is-active {
  color: var(--brand-600);
  font-weight: 700;
  border-left-color: var(--brand-500);
  background: var(--brand-50);
  border-radius: 0 6px 6px 0;
}

/* Mobile foldable TOC */
.toc-mobile {
  display: block;
  background: var(--zenn-surface);
  border: 1px solid var(--zenn-border);
  border-radius: var(--radius);
  margin: 16px 0 24px;
  overflow: hidden;
}
.toc-mobile > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--zenn-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary::after {
  content: "▾";
  font-size: 12px;
  color: var(--zenn-text-3);
  transition: transform 0.2s;
}
.toc-mobile[open] > summary::after { transform: rotate(180deg); }
.toc-mobile .toc-mobile__inner {
  padding: 4px 18px 14px;
  border-top: 1px solid var(--zenn-border);
}
.toc-mobile ul { list-style: none; padding: 0; margin: 8px 0 0; }
.toc-mobile li { padding: 4px 0; }
.toc-mobile a { color: var(--zenn-text-2); font-size: 13.5px; text-decoration: none; line-height: 1.6; }
.toc-mobile a:hover { color: var(--brand-600); }
.toc-mobile li.toc-h3 { padding-left: 16px; }
.toc-mobile li.toc-h3 a { font-size: 12.5px; color: var(--zenn-text-3); }
@media (min-width: 1080px) { .toc-mobile { display: none; } }

/* ---------- 4. Article header ---------- */
.article-head { margin: 0 0 32px; }
.article-head__categories {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Pill tag (zenn-flavor: 8px radius pill, soft green) */
.cat-badge, .pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-100);
  text-decoration: none;
  transition: all 0.15s;
}
.cat-badge:hover, .pill-tag:hover {
  background: var(--brand-100);
  color: var(--brand-700);
  transform: translateY(-1px);
}
.cat-badge--llm     { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.cat-badge--ai-agent{ background: #EEF2FF; color: #4338CA; border-color: #C7D2FE; }
.cat-badge--mcp     { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.cat-badge--rag     { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.cat-badge--ai-coding { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.cat-badge--claude-code { background: #FFF7ED; color: #9A3412; border-color: #FED7AA; }
.cat-badge--security { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.cat-badge--news    { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }

.article-head__date {
  font-family: var(--en);
  font-size: 13px;
  color: var(--zenn-text-3);
  letter-spacing: 0.02em;
}
.article-head__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zenn-text);
  margin: 12px 0 16px;
  letter-spacing: normal;        /* zenn: no letter-spacing on headings */
}
@media (min-width: 768px)  { .article-head__title { font-size: 28px; } }
@media (min-width: 1080px) { .article-head__title { font-size: 32px; } }

.article-head__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--zenn-text-2);
  margin-top: 16px;
}
.article-head__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-head__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- 5. Article body typography (zenn flavor) ---------- */
.article-body, .post-body, .news-body {
  font-family: var(--sans-zenn);
  font-size: 16px;
  line-height: 1.85;                                   /* user spec; zenn is 1.8 */
  color: var(--zenn-text);
  letter-spacing: normal;                              /* zenn */
  word-break: break-word;                              /* zenn-style break behavior */
  overflow-wrap: break-word;
  font-feature-settings: normal;                       /* zenn: palt none */
}

.article-body p, .post-body p, .news-body p {
  margin: 0 0 24px;
}
.article-body strong, .post-body strong, .news-body strong {
  font-weight: 700;
  color: var(--zenn-text);
  background: linear-gradient(transparent 65%, var(--brand-100) 65%);
  padding: 0 1px;
}

/* Links (zenn: soft underline + brand color) */
.article-body a, .post-body a, .news-body a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(29,158,117,0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.article-body a:hover, .post-body a:hover, .news-body a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--brand-700);
}

/* H1 (rare in body) */
.article-body h1, .post-body h1, .news-body h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  margin: 56px 0 24px;
  color: var(--zenn-text);
  letter-spacing: normal;
}

/* H2 — left 3px green border (user spec, overrides zenn 16.8px) */
.article-body h2, .post-body h2, .news-body h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--zenn-text) !important;
  line-height: 1.5 !important;
  margin: 56px 0 24px !important;
  padding: 4px 0 4px 14px !important;
  border-left: 3px solid var(--brand-500) !important;
  border-bottom: none !important;
  background: none !important;
  letter-spacing: normal !important;
}
@media (min-width: 1080px) {
  .article-body h2, .post-body h2, .news-body h2 {
    font-size: 24px !important;
    margin: 64px 0 28px !important;
  }
}

/* H3 — 18px / 600 (user spec) */
.article-body h3, .post-body h3, .news-body h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--zenn-text) !important;
  line-height: 1.55 !important;
  margin: 40px 0 16px !important;
  padding: 0 0 8px !important;
  border: none !important;
  border-bottom: 1px solid var(--zenn-border) !important;
  background: none !important;
  letter-spacing: normal !important;
}
.article-body h3::before, .post-body h3::before, .news-body h3::before {
  content: none !important;
}
@media (min-width: 1080px) {
  .article-body h3, .post-body h3, .news-body h3 {
    font-size: 20px !important;
    margin: 48px 0 20px !important;
  }
}

/* H4 */
.article-body h4, .post-body h4, .news-body h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--zenn-text) !important;
  margin: 32px 0 12px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
@media (min-width: 1080px) {
  .article-body h4, .post-body h4, .news-body h4 { font-size: 17px !important; }
}

/* Lists */
.article-body ul, .article-body ol,
.post-body ul, .post-body ol,
.news-body ul, .news-body ol {
  margin: 0 0 24px 28px;
  padding: 0;
}
.article-body li, .post-body li, .news-body li {
  margin-bottom: 8px;
  line-height: 1.85;
}
.article-body ul > li::marker, .post-body ul > li::marker, .news-body ul > li::marker {
  color: var(--brand-500);
}
.article-body ol > li::marker, .post-body ol > li::marker, .news-body ol > li::marker {
  color: var(--brand-600);
  font-weight: 700;
}

/* Inline code */
.article-body p code, .article-body li code, .article-body td code,
.post-body p code, .post-body li code, .post-body td code,
.news-body p code, .news-body li code, .news-body td code {
  background: var(--brand-50);
  color: var(--brand-800);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.92em;
  font-weight: 500;
  border: 1px solid var(--brand-100);
  word-break: break-all;
}
html.dark .article-body p code, html.dark .article-body li code,
html.dark .post-body p code, html.dark .post-body li code,
html.dark .news-body p code, html.dark .news-body li code {
  background: rgba(29,158,117,0.18);
  color: #9be4bf;
  border-color: rgba(29,158,117,0.3);
}

/* Code blocks (zenn-style: dark, rounded, copy button) */
.article-body div.highlight, .article-body pre.highlight,
.post-body div.highlight, .post-body pre.highlight,
.news-body div.highlight, .news-body pre.highlight {
  position: relative;
  margin: 28px 0;
  border-radius: var(--radius);
  border: 1px solid #2a2a3e;
  background: var(--code-bg);
  overflow: hidden;
}
.article-body pre, .post-body pre, .news-body pre {
  margin: 0;
  background: transparent;
  overflow-x: auto;
}
.article-body pre code, .post-body pre code, .news-body pre code {
  background: transparent !important;
  color: var(--code-text) !important;
  border: none !important;
  font-size: 13.5px;
  line-height: 1.7;
  padding: 18px 20px;
  display: block;
  font-family: var(--mono);
  font-weight: 500;
}
@media (min-width: 1080px) {
  .article-body pre code, .post-body pre code, .news-body pre code {
    font-size: 14px;
    padding: 20px 24px;
  }
}

.code-copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--code-text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--en);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.code-copy-btn:hover { background: rgba(255,255,255,0.16); }
.code-copy-btn.copied { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* Blockquote (note-style soft, zenn surface) */
.article-body blockquote, .post-body blockquote, .news-body blockquote {
  margin: 28px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--brand-500);
  background: var(--brand-50);
  color: var(--zenn-text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
html.dark .article-body blockquote, html.dark .post-body blockquote, html.dark .news-body blockquote {
  background: rgba(29,158,117,0.08);
}
.article-body blockquote p:last-child,
.post-body blockquote p:last-child,
.news-body blockquote p:last-child { margin-bottom: 0; }

/* Tables (rounded with header tint) */
.article-body table, .post-body table, .news-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 28px 0;
  font-size: 14.5px;
  border: 1px solid var(--zenn-border);
  border-radius: var(--radius);
  background: #fff;
}
/* Mobile: keep native display: table so width: 100% actually fills the
   container (display: block leaves the inner table grid at its intrinsic
   width, making the table look narrower than the conclusion-box / box-tip
   below it). Cells wrap aggressively so long content breaks instead of
   forcing horizontal overflow. */
@media (max-width: 768px) {
  .article-body table, .post-body table, .news-body table {
    display: table;
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    font-size: 13px;
    margin: 24px 0;
  }
  .article-body th, .post-body th, .news-body th,
  .article-body td, .post-body td, .news-body td {
    padding: 8px 10px;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}
@media (max-width: 480px) {
  .article-body table, .post-body table, .news-body table {
    font-size: 12px;
  }
  .article-body th, .post-body th, .news-body th,
  .article-body td, .post-body td, .news-body td {
    padding: 7px 8px;
  }
}
html.dark .article-body table, html.dark .post-body table, html.dark .news-body table {
  background: var(--surface);
  border-color: var(--border);
}
.article-body thead, .post-body thead, .news-body thead {
  background: var(--brand-50);
}
html.dark .article-body thead, html.dark .post-body thead, html.dark .news-body thead {
  background: rgba(29,158,117,0.12);
}
.article-body th, .post-body th, .news-body th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--brand-700);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--brand-100);
}
html.dark .article-body th, html.dark .post-body th, html.dark .news-body th {
  color: #9be4bf;
  border-bottom-color: rgba(29,158,117,0.3);
}
.article-body td, .post-body td, .news-body td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--zenn-border);
  color: var(--zenn-text);
  vertical-align: top;
}
html.dark .article-body td, html.dark .post-body td, html.dark .news-body td {
  border-bottom-color: var(--border);
  color: var(--text);
}
.article-body tbody tr:nth-child(even) td,
.post-body tbody tr:nth-child(even) td,
.news-body tbody tr:nth-child(even) td {
  background: #f9fafb;
}
html.dark .article-body tbody tr:nth-child(even) td,
html.dark .post-body tbody tr:nth-child(even) td,
html.dark .news-body tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.025);
}
.article-body tbody tr:last-child td,
.post-body tbody tr:last-child td,
.news-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody tr:hover td,
.post-body tbody tr:hover td,
.news-body tbody tr:hover td { background: var(--brand-50); }
html.dark .article-body tbody tr:hover td,
html.dark .post-body tbody tr:hover td,
html.dark .news-body tbody tr:hover td { background: rgba(29,158,117,0.10); }

/* Article body images */
.article-body img, .post-body img, .news-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 28px 0;
  display: block;
  border: 1px solid var(--zenn-border);
}

/* Modern task list — Kramdown / GFM `- [ ]` checkboxes */
.article-body ul.task-list,
.post-body ul.task-list,
.news-body ul.task-list,
.article-body .task-list,
.post-body .task-list,
.news-body .task-list {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}
.article-body li.task-list-item,
.post-body li.task-list-item,
.news-body li.task-list-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 6px 0;
  background: var(--zenn-surface);
  border: 1px solid var(--zenn-border);
  border-radius: var(--radius-sm);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  list-style: none;
}
.article-body li.task-list-item:hover,
.post-body li.task-list-item:hover,
.news-body li.task-list-item:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  transform: translateX(2px);
}
html.dark .article-body li.task-list-item,
html.dark .post-body li.task-list-item,
html.dark .news-body li.task-list-item {
  background: var(--surface);
  border-color: var(--border);
}
html.dark .article-body li.task-list-item:hover,
html.dark .post-body li.task-list-item:hover,
html.dark .news-body li.task-list-item:hover {
  background: rgba(29,158,117,0.10);
  border-color: rgba(29,158,117,0.30);
}
.article-body li.task-list-item input[type="checkbox"],
.post-body li.task-list-item input[type="checkbox"],
.news-body li.task-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 2px solid var(--brand-500);
  border-radius: 6px;
  background: #fff;
  cursor: default;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
html.dark .article-body li.task-list-item input[type="checkbox"],
html.dark .post-body li.task-list-item input[type="checkbox"],
html.dark .news-body li.task-list-item input[type="checkbox"] {
  background: var(--bg);
  border-color: rgba(29,158,117,0.55);
}
.article-body li.task-list-item input[type="checkbox"]:checked,
.post-body li.task-list-item input[type="checkbox"]:checked,
.news-body li.task-list-item input[type="checkbox"]:checked {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.article-body li.task-list-item input[type="checkbox"]:checked::after,
.post-body li.task-list-item input[type="checkbox"]:checked::after,
.news-body li.task-list-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.article-body li.task-list-item input[type="checkbox"]:disabled,
.post-body li.task-list-item input[type="checkbox"]:disabled,
.news-body li.task-list-item input[type="checkbox"]:disabled {
  opacity: 1;
  cursor: default;
}

/* Mermaid */
.article-body div.mermaid, .post-body div.mermaid, .news-body div.mermaid {
  display: block;
  margin: 28px auto;
  padding: 20px;
  background: var(--zenn-surface);
  border: 1px solid var(--zenn-border);
  border-radius: var(--radius);
  text-align: center;
  overflow-x: auto;
}
html.dark .article-body div.mermaid, html.dark .post-body div.mermaid, html.dark .news-body div.mermaid {
  background: var(--surface);
}

/* Mermaid dark-mode SVG overrides
   Mermaid initializes its theme based on html.dark at page load. If the user
   toggles theme after load, or if Mermaid's dark theme still emits light node
   fills (rect/polygon/path) for some node types, the text becomes unreadable.
   Force readable node backgrounds and text colors in dark mode. */
html.dark div.mermaid svg .node rect,
html.dark div.mermaid svg .node polygon,
html.dark div.mermaid svg .node circle,
html.dark div.mermaid svg .node ellipse,
html.dark div.mermaid svg .node path,
html.dark div.mermaid svg rect.actor,
html.dark div.mermaid svg .actor {
  fill: #1e293b !important;
  stroke: #64748b !important;
}
html.dark div.mermaid svg .cluster rect {
  fill: #0f172a !important;
  stroke: #334155 !important;
}
html.dark div.mermaid svg .nodeLabel,
html.dark div.mermaid svg .nodeLabel *,
html.dark div.mermaid svg .nodeLabel span,
html.dark div.mermaid svg .nodeLabel p,
html.dark div.mermaid svg foreignObject div,
html.dark div.mermaid svg foreignObject span,
html.dark div.mermaid svg .label,
html.dark div.mermaid svg .label *,
html.dark div.mermaid svg text,
html.dark div.mermaid svg text tspan,
html.dark div.mermaid svg .messageText,
html.dark div.mermaid svg .actor-line + text,
html.dark div.mermaid svg .titleText,
html.dark div.mermaid svg .loopText,
html.dark div.mermaid svg .noteText,
html.dark div.mermaid svg .sectionTitle,
html.dark div.mermaid svg .taskText {
  fill: #e2e8f0 !important;
  color: #e2e8f0 !important;
}
/* Edge labels (text on arrows) — give them a dark backing so light text reads */
html.dark div.mermaid svg .edgeLabel,
html.dark div.mermaid svg .edgeLabel *,
html.dark div.mermaid svg .edgeLabel rect,
html.dark div.mermaid svg .edgeLabel foreignObject {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  fill: #e2e8f0 !important;
}
html.dark div.mermaid svg .edgeLabel rect {
  fill: #0f172a !important;
}
/* Edge / arrow lines */
html.dark div.mermaid svg .flowchart-link,
html.dark div.mermaid svg .edgePath .path,
html.dark div.mermaid svg .messageLine0,
html.dark div.mermaid svg .messageLine1,
html.dark div.mermaid svg line.actor-line {
  stroke: #94a3b8 !important;
}
html.dark div.mermaid svg .arrowheadPath,
html.dark div.mermaid svg .marker {
  fill: #94a3b8 !important;
  stroke: #94a3b8 !important;
}
/* Sequence diagram notes */
html.dark div.mermaid svg .note {
  fill: #334155 !important;
  stroke: #64748b !important;
}

/* HR */
.article-body hr, .post-body hr, .news-body hr {
  border: none;
  height: 1px;
  background: var(--zenn-border);
  margin: 48px 0;
}

/* ---------- 6. Callout boxes ---------- */
.conclusion-box {
  position: relative;
  margin: 32px 0;
  padding: 22px 24px 18px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius);
  color: var(--zenn-text);
}
.conclusion-box::before {
  content: "結論";
  position: absolute;
  left: 18px; top: 0;
  transform: translateY(-50%);
  background: var(--brand-500);
  color: #fff;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
}
.conclusion-box p:last-child, .conclusion-box ul:last-child { margin-bottom: 0; }

.box-tip, .point-box, .callout-info {
  position: relative;
  margin: 28px 0;
  padding: 20px 22px 16px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius);
  color: var(--zenn-text);
}
.box-tip::before, .point-box::before, .callout-info::before {
  content: "ポイント";
  position: absolute;
  left: 16px; top: 0;
  transform: translateY(-50%);
  background: #fff;
  color: var(--brand-600);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-pill);
}

/* Dark-mode overrides for green callout boxes — without these, the
   light-mode --brand-50 background bleeds through and white text on
   near-white green becomes unreadable. */
html.dark .conclusion-box,
html.dark .box-tip,
html.dark .point-box,
html.dark .callout-info {
  background: rgba(29,158,117,0.10);
  border-color: rgba(29,158,117,0.30);
  color: var(--text);
}
html.dark .conclusion-box *,
html.dark .box-tip *,
html.dark .point-box *,
html.dark .callout-info * {
  color: inherit;
}
html.dark .conclusion-box a,
html.dark .box-tip a,
html.dark .point-box a,
html.dark .callout-info a { color: var(--link); }
html.dark .conclusion-box strong,
html.dark .box-tip strong,
html.dark .point-box strong,
html.dark .callout-info strong { color: #9be4bf; }
html.dark .box-tip::before,
html.dark .point-box::before,
html.dark .callout-info::before {
  background: var(--bg);
  color: #9be4bf;
  border-color: rgba(29,158,117,0.55);
}

.box-warning, .callout-warn {
  position: relative;
  margin: 28px 0;
  padding: 20px 22px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
}
.box-warning::before, .callout-warn::before {
  content: "注意";
  position: absolute;
  left: 16px; top: 0;
  transform: translateY(-50%);
  background: #fff;
  color: #dc2626;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #dc2626;
  border-radius: var(--radius-pill);
}
html.dark .box-warning, html.dark .callout-warn {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.3);
}

.marker-yellow {
  background: linear-gradient(transparent 60%, #fef3c7 60%);
  font-weight: 700;
  padding: 0 2px;
}
/* インライン蛍光ペン（span / mark）— ダークモードでは読みやすい単色背景に統一。
   linear-gradient だと低alphaで判読困難になるため background-color のみ使用。
   marker-yellow / marker-green / marker-pink / mark すべて黄色で統一。
   ライトモードは既存の linear-gradient（.marker-yellow）と layout 側の rgba 黄色を維持。 */
html.dark span.marker-yellow,
html.dark span.marker-green,
html.dark span.marker-pink,
html.dark mark {
  background: rgba(255,243,130,0.25) !important;
  background-image: none !important;
  color: inherit !important;
  padding: 0 2px;
  border-radius: 2px;
}

/* When marker-* classes are used on a block-level <div>, render as a
   callout box so multi-line content is readable instead of a flat
   highlight (which is designed for inline <span> usage). */
div.marker-yellow,
div.marker-green,
div.marker-pink {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
  font-weight: 400;
  line-height: 1.8;
  color: var(--zenn-text);
}
div.marker-yellow > strong:first-child,
div.marker-green > strong:first-child,
div.marker-pink > strong:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  color: #92400E;
}
div.marker-green {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left-color: var(--brand-500);
}
div.marker-green > strong:first-child { color: var(--brand-700); }
div.marker-pink {
  background: #fdf2f8;
  border-color: #fbcfe8;
  border-left-color: #ec4899;
}
div.marker-pink > strong:first-child { color: #9d174d; }
html.dark div.marker-yellow {
  background: rgba(254,243,199,0.06);
  border-color: rgba(254,243,199,0.18);
  color: var(--text);
}
html.dark div.marker-yellow > strong:first-child { color: #fde68a; }
html.dark div.marker-green {
  background: rgba(29,158,117,0.08);
  border-color: rgba(29,158,117,0.24);
  color: var(--text);
}
html.dark div.marker-green > strong:first-child { color: #6FCBA1; }
html.dark div.marker-pink {
  background: rgba(236,72,153,0.08);
  border-color: rgba(236,72,153,0.24);
  color: var(--text);
}
html.dark div.marker-pink > strong:first-child { color: #f9a8d4; }

/* ---------- 7. Share bar ---------- */
.share-bar {
  background: var(--zenn-surface);
  border: 1px solid var(--zenn-border);
  border-left: 3px solid var(--brand-500);
  padding: 14px 18px;
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
html.dark .share-bar { background: var(--surface); border-color: var(--border); border-left-color: var(--brand-500); }
.share-bar--top    { margin: 0 0 32px; }
.share-bar--bottom { margin: 56px 0 0; }
.share-bar__header {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: var(--zenn-text);
  letter-spacing: 0.02em;
}
.share-bar__label-ja { color: var(--zenn-text); font-size: 14px; font-weight: 700; }
html.dark .share-bar__label-ja { color: var(--text); }
.share-bar__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-btn-pill {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zenn-border);
  background: #fff;
  color: var(--zenn-text-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
html.dark .share-btn-pill { background: var(--surface); border-color: var(--border); color: var(--text2); }
.share-btn-pill:hover {
  color: #fff;
  background: var(--brand-500);
  border-color: var(--brand-500);
  transform: translateY(-1px);
}
.share-btn-pill svg { width: 17px; height: 17px; fill: currentColor; }
.share-btn-pill--x:hover { background: #000; border-color: #000; }
.share-btn-pill--hatena { color: #00A4DE; }
.share-btn-pill--hatena:hover { background: #00A4DE; border-color: #00A4DE; }
.share-btn-pill--line { color: #06C755; }
.share-btn-pill--line:hover { background: #06C755; border-color: #06C755; }
.share-btn-pill--linkedin { color: #0A66C2; }
.share-btn-pill--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.share-btn-pill .b-mark { font-size: 13px; font-weight: 900; letter-spacing: -0.5px; line-height: 1; }
.share-toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--note-text);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 300;
  box-shadow: var(--shadow-modal);
}
.share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
  .share-bar { grid-template-columns: 1fr; gap: 10px; }
  .share-bar__label-ja { font-size: 13px; }
}

/* ---------- 8. Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--zenn-text-2);
  margin: 0 0 24px;
  border-top: 1px solid var(--zenn-border);
  border-bottom: 1px solid var(--zenn-border);
}
.breadcrumb--bottom { margin: 64px 0 24px; }
.breadcrumb ol {
  list-style: none;
  padding: 0 4px; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  align-items: baseline;
}
.breadcrumb a {
  color: var(--zenn-text-2);
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb__sep { color: var(--zenn-text-3); }
.breadcrumb__current {
  color: var(--zenn-text);
  font-weight: 600;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 9. Listing pages (note flavor) ---------- */
.listing-shell {
  background: var(--note-bg-section);
  margin: -16px -16px 0;
  padding: 32px 16px 64px;
}
@media (min-width: 1080px) {
  .listing-shell { margin: -24px -24px 0; padding: 48px 32px 96px; }
}

.listing-hero {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 24px 0 8px;
}
.listing-hero__eyebrow {
  font-family: var(--en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--brand-600);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.listing-hero__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--note-text);
  letter-spacing: 0.04em;            /* note headings: palt-like */
  font-feature-settings: "palt";
}
@media (min-width: 1080px) { .listing-hero__title { font-size: 32px; } }
.listing-hero__desc {
  font-size: 15px;
  color: var(--note-text-2);
  line-height: 1.85;
  margin-top: 12px;
  max-width: 720px;
}

/* Category card grid (note-style, soft elevation-1) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 auto 48px;
  max-width: 1200px;
}
@media (min-width: 600px) {
  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
}

.category-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 22px;
  background: #fff;
  border: 1px solid var(--note-border);
  border-radius: var(--radius);
  min-height: 110px;
  text-decoration: none;
  color: var(--note-text);
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-card);
}
html.dark .category-card { background: var(--surface); border-color: var(--border); color: var(--text); }
@media (min-width: 1080px) {
  .category-card {
    flex-direction: column;
    min-height: 200px;
    padding: 20px 20px 26px;
  }
}
.category-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-300);
  box-shadow: var(--shadow-pop);
}
.category-card__icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--brand-50);
}
@media (min-width: 1080px) {
  .category-card__icon { width: 56px; height: 56px; font-size: 30px; border-radius: 12px; }
}
.category-card__body { flex: 1; min-width: 0; }
.category-card__title {
  font-size: 16px;
  font-weight: 600;                    /* note top: weight 600 */
  margin: 0 0 6px;
  color: var(--note-text);
  line-height: 1.5;
  letter-spacing: 0.04em;              /* note headings */
  font-feature-settings: "palt";
}
@media (min-width: 1080px) { .category-card__title { font-size: 17px; } }
.category-card__desc {
  font-size: 12.5px;
  color: var(--note-text-2);
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-card__count {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--en);
  font-size: 11px;
  font-weight: 700;
  min-width: 32px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

/* Listing grid (main + aside) */
.listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1080px) {
  .listing-grid {
    grid-template-columns: 1fr var(--listing-aside-w);
    gap: 48px;
  }
}

/* Article cards (note-style: white, thin border, soft shadow) */
.card-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
}

.card-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--note-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
html.dark .card-item { background: var(--surface); border-color: var(--border); }
.card-item:hover {
  transform: translateY(-3px);
  border-color: var(--brand-300);
  box-shadow: var(--shadow-pop);
}
.card-item > a {
  position: absolute; inset: 0;
  z-index: 1;
}
.card-item__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--note-bg-section);
}
.card-item__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}
.card-item:hover .card-item__image img { transform: scale(1.04); }
.card-item__image-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, var(--brand-50), var(--note-bg-section));
}
.card-item__text {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-item__cluster {
  font-family: var(--en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.card-item__title {
  font-size: 16px;
  font-weight: 600;                  /* note top: weight 600 */
  line-height: 1.5;
  color: var(--note-text);
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-item__desc {
  font-size: 12px;
  font-weight: 600;                  /* note caption: 12px/600 */
  color: var(--note-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-item__date {
  font-family: var(--en);
  font-size: 11.5px;
  color: var(--note-text-3);
  margin-top: auto;
  letter-spacing: 0.02em;
}

/* Listing aside (popular / tags side box) */
.side-box {
  background: #fff;
  border: 1px solid var(--note-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
html.dark .side-box { background: var(--surface); border-color: var(--border); }
.side-box__title {
  font-family: var(--en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--note-text);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--note-border);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-box__title::before {
  content: "";
  width: 12px; height: 2px;
  background: var(--brand-500);
  border-radius: 2px;
}
.side-box__list { list-style: none; padding: 0; margin: 0; }
.side-box__list li + li {
  border-top: 1px solid var(--note-border);
  margin-top: 12px;
  padding-top: 12px;
}
.side-box__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.side-box__thumb {
  border-radius: var(--radius-sm);
  width: 64px;
  height: 48px;
  object-fit: cover;
  background: var(--note-bg-section);
  border: 1px solid var(--note-border);
}
.side-box__item-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--note-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-box__item-date {
  font-family: var(--en);
  font-size: 10.5px;
  color: var(--note-text-3);
  margin-top: 4px;
}

/* ---------- 10. Search overlay ---------- */
.search-overlay-v2 {
  position: fixed;
  inset: 0;
  z-index: 250;
  background:
    linear-gradient(135deg, rgba(29,158,117,0.96) 0%, rgba(62,168,255,0.96) 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 64px 20px 64px;
  display: none;
  animation: searchFadeIn 0.25s ease;
}
.search-overlay-v2.is-open { display: block; }
@keyframes searchFadeIn { from { opacity: 0; } to { opacity: 1; } }
.search-overlay-v2__inner { max-width: 960px; margin: 0 auto; }
.search-overlay-v2__close {
  position: fixed;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  cursor: pointer;
  z-index: 260;
  transition: background 0.15s;
}
.search-overlay-v2__close:hover { background: rgba(255,255,255,0.32); }
.search-overlay-v2__title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-overlay-v2__title::before {
  content: "";
  width: 36px; height: 2px;
  background: #fff;
  border-radius: 2px;
}

.search-box-v2 {
  position: relative;
  margin-bottom: 32px;
}
.search-box-v2__icon {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  color: var(--brand-600);
  pointer-events: none;
  z-index: 1;
}
.search-box-v2__input {
  width: 100%;
  height: 56px;
  padding: 0 60px;
  border-radius: var(--radius-pill);
  border: none;
  background: #fff;
  color: var(--note-text);
  font-size: 15px;
  font-family: var(--sans);
  outline: none;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
.search-box-v2__input::placeholder { color: var(--note-text-3); }
.search-box-v2__input:focus { box-shadow: 0 0 0 4px rgba(255,255,255,0.4), 0 6px 24px rgba(0,0,0,0.18); }

.search-overlay-v2__heading {
  color: rgba(255,255,255,0.95);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 32px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--en);
}
.search-overlay-v2__heading::before {
  content: "";
  width: 16px; height: 2px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
}

.cat-chip-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 600px) {
  .cat-chip-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
}

.cat-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 14px 0 16px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.2s;
}
.cat-chip:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-1px);
  color: #fff;
}
.cat-chip__title { font-size: 14px; font-weight: 700; line-height: 1; color: #fff; z-index: 1; }
.cat-chip__count {
  font-family: var(--en);
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  color: var(--brand-700);
  min-width: 32px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  z-index: 1;
}
.cat-chip__en {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 12px 6px;
  font-family: var(--en);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.08;
  pointer-events: none;
  text-transform: uppercase;
}
.cat-chip.is-disabled { pointer-events: none; opacity: 0.35; }
.cat-chip.is-disabled .cat-chip__count { background: rgba(255,255,255,0.5); color: var(--note-text); }

.search-results-v2 {
  margin-top: 16px;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-modal);
  display: none;
}
.search-results-v2.is-visible { display: block; }
.search-results-v2 a {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid var(--note-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.search-results-v2 a:hover { background: var(--note-bg-section); }
.search-results-v2 a:last-child { border-bottom: none; }
.search-results-v2 .r-title { font-size: 14px; font-weight: 600; color: var(--note-text); }
.search-results-v2 .r-desc { font-size: 12px; color: var(--note-text-3); margin-top: 4px; }

/* FAB search button */
.fab-search {
  position: fixed;
  right: 20px; bottom: 24px;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-500), var(--blue-500));
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(29,158,117,0.40);
  cursor: pointer;
  z-index: 90;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fab-search:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(29,158,117,0.55);
}
.fab-search:active { transform: scale(0.96); }
.fab-search svg { width: 22px; height: 22px; stroke: currentColor; }
@media (min-width: 1300px) {
  .fab-search {
    right: auto; bottom: auto;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
  .fab-search:hover { transform: translateY(-50%) scale(1.08); }
}

/* ---------- 11. Cluster CTA / ToC card ---------- */
.cluster-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 24px;
  padding: 18px 22px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--zenn-text);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cluster-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  color: var(--zenn-text);
}
.cluster-cta__icon { font-size: 28px; }
.cluster-cta__name { font-size: 15px; font-weight: 700; color: var(--zenn-text); }
.cluster-cta__desc { font-size: 12px; color: var(--zenn-text-2); line-height: 1.55; margin-top: 2px; }

/* ---------- 12. Footer ---------- */
footer {
  background: var(--note-bg-section) !important;
  padding: 64px 16px 32px !important;
  border-top: 1px solid var(--note-border) !important;
  text-align: center;
}
.footer-inner {
  max-width: 1100px !important;
  color: var(--note-text-2) !important;
}
.footer-inner a:hover { color: var(--brand-600) !important; }
@media (min-width: 1080px) {
  footer { padding: 80px 16px 40px !important; }
}

/* ---------- 13. Override existing post-header ---------- */
.post-header {
  border-bottom: 1px solid var(--zenn-border) !important;
  padding: 32px 0 24px !important;
  margin-bottom: 28px !important;
  font-family: var(--sans-zenn);
  color: var(--zenn-text);
}
.post-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  color: var(--zenn-text) !important;
}
@media (min-width: 768px)  { .post-title { font-size: 28px !important; } }
@media (min-width: 1080px) { .post-title { font-size: 32px !important; } }

.post-screenshot img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-img);
  border: 1px solid var(--zenn-border);
}

/* Author bar (zenn-style author chip) */
.post-author {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--zenn-border);
  font-size: 13px !important;
  color: var(--zenn-text-2) !important;
}
.post-author-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700;
}
.post-author-name {
  color: var(--brand-700) !important;
  font-weight: 700 !important;
  text-decoration: none;
}
.post-author-name:hover { color: var(--brand-800) !important; }

/* Hide legacy floating sidebar in favor of share-bar */
@media (max-width: 1299px) {
  .float-sidebar { display: none !important; }
}

/* Tag chip (legacy `.tag-*` classes) — green soft pill */
.tag {
  background: var(--brand-50) !important;
  color: var(--brand-700) !important;
  border: 1px solid var(--brand-100) !important;
  font-family: var(--en) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}
html.dark .tag {
  background: rgba(29,158,117,0.16) !important;
  color: #9be4bf !important;
  border-color: rgba(29,158,117,0.3) !important;
}

/* Existing share CTA — recolor */
.share-btn-x { background: #000 !important; color: #fff !important; }
.share-btn-hatena { background: #00A4DE !important; color: #fff !important; }

/* Cookie consent — recolor */
#cookieBanner button {
  background: var(--brand-500) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}

/* ---------- 14. Cluster page existing classes recolor ---------- */
.cl-hero {
  border-bottom: 1px solid var(--note-border) !important;
  padding: 32px 0 24px !important;
}
.cl-hero-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}
@media (min-width: 1080px) { .cl-hero-title { font-size: 32px !important; } }
.cl-hero-desc { font-size: 15px !important; color: var(--note-text-2) !important; line-height: 1.85; }
.cl-body h2 {
  background: none !important;
  border-left: 3px solid var(--brand-500) !important;
  color: var(--note-text) !important;
}
.cl-body h3 {
  background: none !important;
  border-left: 3px solid var(--blue-500) !important;
  color: var(--note-text) !important;
}
.cl-body strong {
  background: linear-gradient(transparent 65%, var(--brand-100) 65%) !important;
  border-bottom: none !important;
  color: var(--note-text) !important;
}
.cl-pick-card, .cl-item {
  background: #fff !important;
  border-color: var(--note-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
html.dark .cl-pick-card, html.dark .cl-item { background: var(--surface) !important; border-color: var(--border) !important; }
.cl-pick-card:hover, .cl-item:hover {
  transform: translateY(-3px) !important;
  border-color: var(--brand-300) !important;
  box-shadow: var(--shadow-pop) !important;
}
.cl-nav-link {
  background: var(--brand-50) !important;
  border-color: var(--brand-100) !important;
  color: var(--brand-700) !important;
}

/* Hero (top page) */
.hero { padding: 28px 0 16px !important; }
.hero-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: var(--note-text) !important;
  font-feature-settings: "palt";
}
@media (min-width: 1080px) { .hero-title { font-size: 32px !important; } }
.hero-desc { font-size: 15px !important; color: var(--note-text-2) !important; line-height: 1.85; }

/* Popular section, news slider etc. */
.popular-section-label { color: var(--brand-600) !important; }
.popular-card-rank.gold   { color: #f59e0b !important; }
.popular-card-rank.silver { color: var(--note-text-2) !important; }
.popular-card-rank.bronze { color: #b45309 !important; }
.popular-card, .popular-hero, .news-card, .cluster-card {
  background: #fff !important;
  border-color: var(--note-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
html.dark .popular-card, html.dark .popular-hero, html.dark .news-card, html.dark .cluster-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.popular-card:hover, .news-card:hover, .cluster-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--brand-300) !important;
  box-shadow: var(--shadow-pop) !important;
}

/* Mobile menu */
.mobile-nav-link { color: var(--note-text) !important; }
.mobile-nav-link:active { background: var(--brand-50) !important; }
.mobile-tag-link { background: var(--brand-50) !important; color: var(--brand-700) !important; border-color: var(--brand-100) !important; }
.mobile-tag-link:active { border-color: var(--brand-500) !important; }

/* Mermaid container softer in light mode */
html:not(.dark) div.mermaid {
  background: #fff !important;
  border: 1px solid var(--zenn-border);
}

/* Mermaid light-mode SVG overrides
   Forces readable node fills/text in light mode regardless of which Mermaid
   theme variant was initialized (covers cases where the user toggles from
   dark→light after page load, or where Mermaid emits dark fills for some
   node shapes in the default theme). */
html:not(.dark) div.mermaid svg .node rect,
html:not(.dark) div.mermaid svg .node polygon,
html:not(.dark) div.mermaid svg .node circle,
html:not(.dark) div.mermaid svg .node ellipse,
html:not(.dark) div.mermaid svg .node path,
html:not(.dark) div.mermaid svg rect.actor,
html:not(.dark) div.mermaid svg .actor {
  fill: #ffffff !important;
  stroke: #94a3b8 !important;
}
html:not(.dark) div.mermaid svg .cluster rect {
  fill: #f8fafc !important;
  stroke: #cbd5e1 !important;
}
html:not(.dark) div.mermaid svg .nodeLabel,
html:not(.dark) div.mermaid svg .nodeLabel *,
html:not(.dark) div.mermaid svg .nodeLabel span,
html:not(.dark) div.mermaid svg .nodeLabel p,
html:not(.dark) div.mermaid svg foreignObject div,
html:not(.dark) div.mermaid svg foreignObject span,
html:not(.dark) div.mermaid svg .label,
html:not(.dark) div.mermaid svg .label *,
html:not(.dark) div.mermaid svg text,
html:not(.dark) div.mermaid svg text tspan,
html:not(.dark) div.mermaid svg .messageText,
html:not(.dark) div.mermaid svg .actor-line + text,
html:not(.dark) div.mermaid svg .titleText,
html:not(.dark) div.mermaid svg .loopText,
html:not(.dark) div.mermaid svg .noteText,
html:not(.dark) div.mermaid svg .sectionTitle,
html:not(.dark) div.mermaid svg .taskText {
  fill: #1e293b !important;
  color: #1e293b !important;
}
html:not(.dark) div.mermaid svg .edgeLabel,
html:not(.dark) div.mermaid svg .edgeLabel *,
html:not(.dark) div.mermaid svg .edgeLabel rect,
html:not(.dark) div.mermaid svg .edgeLabel foreignObject {
  background-color: #ffffff !important;
  color: #1e293b !important;
  fill: #1e293b !important;
}
html:not(.dark) div.mermaid svg .edgeLabel rect {
  fill: #ffffff !important;
}
html:not(.dark) div.mermaid svg .flowchart-link,
html:not(.dark) div.mermaid svg .edgePath .path,
html:not(.dark) div.mermaid svg .messageLine0,
html:not(.dark) div.mermaid svg .messageLine1,
html:not(.dark) div.mermaid svg line.actor-line {
  stroke: #64748b !important;
}
html:not(.dark) div.mermaid svg .arrowheadPath,
html:not(.dark) div.mermaid svg .marker {
  fill: #64748b !important;
  stroke: #64748b !important;
}
html:not(.dark) div.mermaid svg .note {
  fill: #fef3c7 !important;
  stroke: #fbbf24 !important;
}

/* Ensure node labels (foreignObject) are not clipped — give text room to
   wrap and breathe so labels like "永続化レイヤ PERSIST_STATE=1の時" fit. */
div.mermaid svg .nodeLabel,
div.mermaid svg .label {
  white-space: normal !important;
  line-height: 1.4 !important;
}
div.mermaid svg foreignObject {
  overflow: visible !important;
}
div.mermaid svg foreignObject > div {
  display: inline-block !important;
  white-space: normal !important;
  text-align: center;
  padding: 2px 4px;
}

/* ============================================================
   17. CTA Trio (top page hero CTAs)
   ============================================================ */
.cta-trio {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
  margin: 16px 0 28px;
  max-width: 1200px;
}
@media (min-width: 600px) {
  .cta-trio {
    gap: 16px;
    margin: 24px 0 40px;
  }
}

.cta-trio__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 14px;
  background: #fff;
  border: 1px solid var(--note-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--note-text);
  min-height: 96px;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
@media (min-width: 600px) {
  .cta-trio__card {
    gap: 16px;
    padding: 22px 22px 24px;
    min-height: 132px;
  }
}
html.dark .cta-trio__card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Subtle brand watermark in the corner (per-card variant) */
.cta-trio__card::after {
  content: "";
  position: absolute;
  inset: auto -8px -8px auto;
  width: 48px; height: 48px;
  background: radial-gradient(circle at center, var(--brand-50) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}
@media (min-width: 600px) {
  .cta-trio__card::after {
    inset: auto -10px -10px auto;
    width: 80px; height: 80px;
  }
}
html.dark .cta-trio__card::after {
  background: radial-gradient(circle at center, rgba(29,158,117,0.18) 0%, transparent 70%);
}
.cta-trio__card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-500);
  box-shadow: var(--shadow-pop);
  color: var(--note-text);
}
html.dark .cta-trio__card:hover { color: var(--text); }
.cta-trio__card:hover::after { opacity: 1; }

.cta-trio__sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--note-text-2);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}
.cta-trio__sub::before {
  content: "";
  width: 10px; height: 2px;
  background: var(--brand-500);
  border-radius: 2px;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .cta-trio__sub { font-size: 12px; gap: 8px; letter-spacing: 0.04em; }
  .cta-trio__sub::before { width: 18px; }
}
@media (min-width: 768px) { .cta-trio__sub { font-size: 13px; } }

.cta-trio__main {
  font-size: 13px;
  font-weight: 800;
  color: var(--note-text);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 1;
  font-feature-settings: "palt";
  min-width: 0;
}
html.dark .cta-trio__main { color: var(--text); }
@media (min-width: 600px) { .cta-trio__main { font-size: 22px; gap: 10px; letter-spacing: 0.02em; flex-wrap: nowrap; } }
@media (min-width: 768px) { .cta-trio__main { font-size: 26px; } }

.cta-trio__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 11px;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
@media (min-width: 600px) {
  .cta-trio__arrow { width: 28px; height: 28px; font-size: 14px; }
}
html.dark .cta-trio__arrow {
  background: rgba(29,158,117,0.18);
  color: #9be4bf;
}
.cta-trio__card:hover .cta-trio__arrow {
  transform: translateX(4px);
  background: var(--brand-500);
  color: #fff;
}

/* Per-card accent variants */
.cta-trio__card--tools::before    { content: "🧰"; position: absolute; top: 8px; right: 8px; font-size: 14px; opacity: 0.55; z-index: 1; }
.cta-trio__card--security::before { content: "🛡️"; position: absolute; top: 8px; right: 8px; font-size: 14px; opacity: 0.55; z-index: 1; }
.cta-trio__card--learn::before    { content: "🧠"; position: absolute; top: 8px; right: 8px; font-size: 14px; opacity: 0.55; z-index: 1; }
@media (min-width: 600px) {
  .cta-trio__card--tools::before,
  .cta-trio__card--security::before,
  .cta-trio__card--learn::before { top: 18px; right: 18px; font-size: 22px; }
}

/* ============================================================
   18. Dark-mode lockdown — defensive overrides
   ------------------------------------------------------------
   Some legacy inline styles in post.html / news.html / cluster.html
   were authored when dark was the default. They now hardcode dark
   text colors that get washed out on dark slate backgrounds.
   This block forces theme-aware text on every common selector.
   ============================================================ */

/* Body always reads from --text */
body { color: var(--text); }

/* Headings inside articles, news, cluster bodies — always var-driven */
.article-body, .article-body p, .article-body li,
.post-body, .post-body p, .post-body li,
.news-body, .news-body p, .news-body li,
.cl-body, .cl-body p, .cl-body li {
  color: var(--zenn-text);
}
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6,
.post-body h1, .post-body h2, .post-body h3,
.post-body h4, .post-body h5, .post-body h6,
.news-body h1, .news-body h2, .news-body h3,
.news-body h4, .news-body h5, .news-body h6,
.cl-body h1, .cl-body h2, .cl-body h3, .cl-body h4 {
  color: var(--text) !important;
}
.article-body strong, .post-body strong, .news-body strong, .cl-body strong {
  color: var(--text) !important;
}

/* Article hero / title areas — must adapt to theme */
.zenn-article-title { color: var(--text) !important; }
.zenn-article-en    { color: var(--text3); }
.zenn-article-tags  .tag { color: var(--brand-700) !important; }
html.dark .zenn-article-tags .tag { color: #9be4bf !important; }
.zenn-article-meta  { color: var(--text2); }
.zenn-article-meta__item { color: var(--text2); }

.zenn-author-chip__name { color: var(--text); }
.zenn-author-chip { color: var(--text); }
.zenn-author-footer__name { color: var(--text); }
.zenn-author-footer__bio  { color: var(--text2); }

/* Legacy post-* / news-* — force theme-aware where they used --text inherited from legacy :root */
.post-title, .news-title, .post-en, .news-en,
.post-meta, .news-meta, .post-author, .post-readtime, .post-date {
  color: var(--text);
}
.post-en, .news-en, .post-readtime, .post-date { color: var(--text3) !important; }
.post-meta, .news-meta, .post-author { color: var(--text2) !important; }
.post-title, .news-title { color: var(--text) !important; }

/* Cluster page hero / labels */
.cl-hero-title { color: var(--text) !important; }
.cl-hero-desc  { color: var(--text2) !important; }
.cl-list-label, .cl-tag-label, .cl-pick-label, .cl-pick-title, .cl-item-title { color: var(--text) !important; }
.cl-pick-desc, .cl-item-meta, .cl-nav-pre { color: var(--text2) !important; }

/* Top page hero / popular / cluster cards */
.hero-title { color: var(--text) !important; }
.hero-desc  { color: var(--text2) !important; }
.popular-section-sub { color: var(--text2) !important; }
.popular-hero-title, .popular-card-title, .news-card-title, .cluster-card-body * {
  color: var(--text);
}
.popular-hero-desc { color: var(--text2); }

/* CTA trio (defensive) */
.cta-trio__main { color: var(--text) !important; }
.cta-trio__sub  { color: var(--text2) !important; }

/* Listing card text */
.card-item__title { color: var(--text) !important; }
.card-item__desc  { color: var(--text2) !important; }
.card-item__date  { color: var(--text3) !important; }
.card-item__cluster { color: var(--brand-600) !important; }
html.dark .card-item__cluster { color: #6FCBA1 !important; }

/* Category card text */
.category-card { color: var(--text) !important; }
.category-card__title { color: var(--text) !important; }
.category-card__desc  { color: var(--text2) !important; }

/* Side box */
.side-box__title    { color: var(--text) !important; }
.side-box__item-title { color: var(--text) !important; }
.side-box__item-date  { color: var(--text3) !important; }

/* TOC */
.toc-sticky a, .toc-mobile a { color: var(--text2); }
.toc-sticky a.is-active { color: var(--brand-600); }
html.dark .toc-sticky a.is-active { color: #6FCBA1; }
.toc-sticky__label { color: var(--text2); }
.toc-mobile > summary { color: var(--text); }

/* Breadcrumb */
.breadcrumb { color: var(--text2); }
.breadcrumb a { color: var(--text2); }
.breadcrumb__current { color: var(--text); }

/* Share bar */
.share-bar__header { color: var(--text2); }
.share-bar__label-ja { color: var(--text); }
.share-btn-pill { color: var(--text2); }

/* Suppress legacy html.light rules in post-body strong and cl-body strong:
   they hardcode #111820 which is unsafe if user toggles light then dark.
   The above .article-body strong / .cl-body strong { color: var(--text) !important }
   already covers them. */

/* ============================================================
   15. Zenn-style article head (replaces legacy .post-meta etc.)
   ============================================================ */
.zenn-article-head {
  font-family: var(--sans-zenn);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--zenn-border);
}

.zenn-article-emoji {
  width: 80px; height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  background: var(--zenn-surface);
  border: 1px solid var(--zenn-border);
  border-radius: 16px;
  margin: 0 0 20px;
  line-height: 1;
}
@media (min-width: 768px) {
  .zenn-article-emoji {
    width: 96px; height: 96px;
    font-size: 64px;
    border-radius: 20px;
  }
}

.zenn-article-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  color: var(--zenn-text) !important;
  margin: 0 0 16px !important;
  word-break: break-word;
}
@media (min-width: 768px)  { .zenn-article-title { font-size: 28px !important; } }
@media (min-width: 1080px) { .zenn-article-title { font-size: 32px !important; line-height: 1.45 !important; } }

.zenn-article-en {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--zenn-text-3);
  margin: -8px 0 16px;
  letter-spacing: 0.02em;
}

.zenn-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}
.zenn-article-tags .pill-tag,
.zenn-article-tags .cat-badge,
.zenn-article-tags .tag {
  font-family: var(--sans-zenn) !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

.zenn-article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--zenn-text-2);
  margin-bottom: 18px;
}
.zenn-article-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.zenn-article-meta__item svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.zenn-article-meta__date {
  font-family: var(--en);
  letter-spacing: 0.02em;
}
.zenn-article-meta__update {
  color: var(--brand-600);
  font-weight: 600;
}
.zenn-article-meta__update::before {
  content: "🔄 ";
}

/* Author chip (zenn-style: small avatar + name inline) */
.zenn-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--zenn-surface);
  border: 1px solid var(--zenn-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--zenn-text);
  transition: all 0.15s;
  font-size: 13px;
}
.zenn-author-chip:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--zenn-text);
}
.zenn-author-chip__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.zenn-author-chip__name { font-weight: 700; }
.zenn-author-chip__sep { color: var(--zenn-text-3); }

/* Footer author card (zenn-style profile card after content) */
.zenn-author-footer {
  margin: 56px 0 32px;
  padding: 24px;
  background: var(--zenn-surface);
  border: 1px solid var(--zenn-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.zenn-author-footer__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}
.zenn-author-footer__body { flex: 1; min-width: 200px; }
.zenn-author-footer__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--zenn-text);
  margin: 0 0 4px;
}
.zenn-author-footer__bio {
  font-size: 13px;
  color: var(--zenn-text-2);
  line-height: 1.7;
  margin: 0 0 12px;
}
.zenn-author-footer__follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--brand-500);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.zenn-author-footer__follow:hover {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-1px);
}
.zenn-author-footer__follow svg {
  width: 14px; height: 14px;
  fill: currentColor;
}

/* Hide legacy .post-meta/.post-en/.post-badges/.post-author when zenn head is present */
.zenn-article-head + .post-screenshot { margin-top: 16px; }

/* Article hero image (zenn doesn't usually have huge banner — make it less dominant) */
.post-screenshot {
  margin: 0 0 24px;
}
.post-screenshot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-img);
  border: 1px solid var(--zenn-border);
  display: block;
}

/* ---------- 16. Related posts (zenn-style cards at bottom) ---------- */
.related-posts {
  margin: 64px 0 32px !important;
  padding-top: 48px !important;
  border-top: 1px solid var(--zenn-border) !important;
}
.related-posts-title {
  font-family: var(--en) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: var(--zenn-text-2) !important;
  text-transform: uppercase !important;
  margin: 0 0 20px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.related-posts-title::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--brand-500);
  border-radius: 2px;
}
.related-card {
  border: 1px solid var(--zenn-border) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
html.dark .related-card { background: var(--surface) !important; border-color: var(--border) !important; }
.related-card:hover {
  border-color: var(--brand-300) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-pop) !important;
}
.related-card-title {
  color: var(--zenn-text) !important;
  font-weight: 700 !important;
}
.related-card-date {
  font-family: var(--en) !important;
}