/* ===== 真夜中のテーブル — Hugo theme（読みやすさ改善案 B）=====
   オフホワイト地 + 濃グレー本文、差し色は深緑を一色。
   本文・見出し・リンクすべて BIZ UDPGothic に統一。 */

:root{
  --bg:#fafbf8;
  --bg-trans:rgba(250,251,248,.94);
  --ink:#1e221d;          /* 見出し・タイトル */
  --body:#3b3f38;         /* 本文テキスト */
  --ink2:#2a2e28;
  --accent:#355e43;       /* 深緑：リンク・日付 */
  --accent-hover:#284a34;
  --muted:#6a6f64;
  --muted2:#4e5349;
  --muted3:#8a9085;
  --faint:#b7bcb0;
  --rule:#ebede6;         /* 記事間の仕切り線 */
  --rule2:#f0f2ec;
  --hdr:#e6e8e1;          /* ヘッダー下線 */
  --tag:#9aa096;          /* タグ文字（小さく薄く） */
  --tag-border:#e3e6dd;
  --code-bg:#1e221d;      /* コードブロック背景 */
  --code-text:#ded8cf;    /* コードブロック文字色 */
  --inline-code-bg:#f1ede4; /* インラインコード背景 */
  --serif:'BIZ UDPGothic', sans-serif;
  --sans:'BIZ UDPGothic', sans-serif;
}

html[data-theme="dark"] {
  --bg:#0f120f;
  --bg-trans:rgba(15,18,15,.94);
  --ink:#eef2eb;
  --body:#c6ccc0;
  --ink2:#dae0d4;
  --accent:#5ca376;
  --accent-hover:#7bb893;
  --muted:#91968c;
  --muted2:#a5aba0;
  --muted3:#7a8075;
  --faint:#20251d;
  --rule:#252a22;
  --rule2:#151814;
  --hdr:#252a22;
  --tag:#8b9086;
  --tag-border:#2a3027;
  --code-bg:#151814;
  --code-text:#c6ccc0;
  --inline-code-bg:#20251d;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg:#0f120f;
    --bg-trans:rgba(15,18,15,.94);
    --ink:#eef2eb;
    --body:#c6ccc0;
    --ink2:#dae0d4;
    --accent:#5ca376;
    --accent-hover:#7bb893;
    --muted:#91968c;
    --muted2:#a5aba0;
    --muted3:#7a8075;
    --faint:#20251d;
    --rule:#252a22;
    --rule2:#151814;
    --hdr:#252a22;
    --tag:#8b9086;
    --tag-border:#2a3027;
    --code-bg:#151814;
    --code-text:#c6ccc0;
    --inline-code-bg:#20251d;
  }
}

*{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:2;
  letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:#cfe0d4; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-hover); }

/* ---- layout shells ---- */
.wrap{ max-width:880px; margin:0 auto; padding:0 56px 72px; }
.wrap--article{ max-width:880px; }

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  min-height:58px; padding:26px 0; border-bottom:1px solid var(--hdr); margin-bottom:48px;
  background:var(--bg-trans); backdrop-filter:blur(10px);
  transition:transform .25s ease;
}
.topbar .brand{ text-decoration:none; display:block; }
.brand-eyebrow{ font-size:10px; letter-spacing:.2em; color:var(--accent); font-weight:700; margin-bottom:8px; }
.brand-name{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:.08em; color:var(--ink); }
.nav{ display:flex; gap:16px; align-items:center; font-size:13px; }
.nav a{
  color:var(--muted); text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  transition:all 0.2s ease;
}
.nav a:hover, .nav a.active{
  background:var(--rule2);
}
.nav a .nav-icon{
  stroke:var(--muted);
  flex-shrink:0;
  transition:stroke 0.2s ease;
}
.nav a:hover .nav-icon,
.nav a.active .nav-icon{
  stroke:var(--ink);
}
.nav .nav-text{
  display:none;
}
.nav .search{
  appearance:none; border:0; background:transparent; padding:0; cursor:pointer;
  display:flex; align-items:center; gap:6px; color:var(--muted); font:inherit;
}
.nav .search:hover{ color:var(--ink); }
.nav .search .icon{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--tag-border);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.theme-toggle {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--tag-border);
  transition: all 0.2s ease;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.theme-toggle svg {
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.theme-toggle:active svg {
  transform: scale(0.85);
}

/* テーマ別アイコン切り替え */
html[data-theme="light"] .theme-toggle .sun-icon { display: none; }
html[data-theme="light"] .theme-toggle .moon-icon { display: block; }
html[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
html[data-theme="dark"] .theme-toggle .moon-icon { display: none; }

/* OSダークモード時のデフォルト挙動用（localStorage未設定時） */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle .sun-icon { display: block; }
  html:not([data-theme="light"]) .theme-toggle .moon-icon { display: none; }
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .theme-toggle .sun-icon { display: none; }
  html:not([data-theme="dark"]) .theme-toggle .moon-icon { display: block; }
}

.menu-toggle{
  display:none; appearance:none; width:38px; height:38px; border:0; background:transparent;
  padding:8px; cursor:pointer;
}
.menu-toggle span{
  display:block; width:20px; height:2px; margin:4px auto; background:var(--ink);
  transition:transform .18s ease, opacity .18s ease;
}
.topbar.nav-open .menu-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.topbar.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
.topbar.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---- search ---- */
.search-open{ overflow:hidden; }
.search-overlay{
  position:fixed; inset:0; z-index:20; display:flex; align-items:flex-start; justify-content:center;
  padding:88px 22px 22px;
}
.search-overlay[hidden]{ display:none; }
.search-backdrop{ position:absolute; inset:0; background:rgba(43,39,35,.32); }
.search-panel{
  position:relative; z-index:1; width:min(680px,100%); max-height:min(72vh,720px);
  overflow:hidden; border:1px solid var(--ink); background:var(--bg);
  box-shadow:0 24px 60px rgba(43,39,35,.22);
}
.search-box{
  display:grid; grid-template-columns:42px 1fr 42px; align-items:center;
  border-bottom:1px solid var(--rule); min-height:58px;
}
.search-box-icon{ display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:18px; }
.search-input{
  width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font-family:var(--serif); font-size:20px; line-height:1.4;
}
.search-input::placeholder{ color:var(--muted3); }
.search-close{
  appearance:none; width:42px; height:42px; border:0; background:transparent; color:var(--muted);
  cursor:pointer; font-size:22px; line-height:1;
}
.search-close:hover{ color:var(--accent); }
.search-status{
  min-height:36px; padding:10px 18px 0; color:var(--muted3);
  font-size:12px; letter-spacing:.08em;
}
.search-results{ max-height:calc(min(72vh,720px) - 94px); overflow:auto; padding:4px 18px 18px; }
.search-result{
  display:block; padding:15px 12px 16px; border-top:1px solid var(--rule);
  color:var(--ink); text-decoration:none;
}
.search-result:first-child{ border-top:0; }
.search-result:hover .search-result-title,.search-result.is-active .search-result-title{ color:var(--accent); }
.search-result.is-active{ background:#f5efe9; outline:1px solid #d9c3b8; outline-offset:-1px; }
.search-result-title{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.5;
}
.search-result-meta{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-top:4px; color:var(--muted3); font-size:11px; letter-spacing:.04em;
}
.search-result-summary{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:8px; color:var(--muted); font-size:13px; line-height:1.75;
}

/* ---- section label ---- */
.section-label{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:12px; letter-spacing:.2em; color:var(--muted2);
  padding-top:26px; border-top:1px solid var(--rule); margin:0 0 28px;
}
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- featured posts (home) ---- */
.featured-posts{ margin-bottom:44px; padding:22px 26px 24px; background:var(--rule2); border:1px solid var(--rule); border-radius:6px; }
.featured-posts .section-label{ border-top:0; padding-top:0; margin-bottom:18px; }
.featured-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.featured-list a{ font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); }
.featured-list a:hover{ color:var(--accent); }
.featured-date{ margin-left:10px; font-size:12px; color:var(--muted3); letter-spacing:.04em; white-space:nowrap; }

/* ---- archive CTA (home) ---- */
.archive-cta{ margin-top:32px; text-align:center; }
.archive-cta a{ display:inline-block; padding:12px 28px; border:1px solid var(--accent); border-radius:6px; color:var(--accent); font-size:14px; letter-spacing:.08em; }
.archive-cta a:hover{ background:var(--accent); color:var(--bg); }

/* ---- list month heading ---- */
.list-month-head{
  font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:.08em;
  color:var(--muted2); margin:0 0 24px; padding-top:6px;
}
.list-month-head:not(:first-of-type){ margin-top:8px; }

/* ---- post list rows (top / section / taxonomy) ---- */
.post-row{ padding:0 0 38px; margin-bottom:38px; border-bottom:1px solid var(--rule); }
.post-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:0 4px; font-size:13px; color:var(--muted3); letter-spacing:.04em; margin-bottom:8px; }
.post-meta .meta-separator{ color:var(--faint); margin:0 2px; }
.post-reading-time,
.article-reading-time{ display:inline-flex; align-items:center; gap:3px; }
.post-reading-time svg,
.article-reading-time svg{ stroke:var(--faint); }
.post-tags{ display:flex; flex-wrap:wrap; gap:6px 8px; }
.post-tags .tag{ color:var(--tag); font-size:12px; font-weight:400; letter-spacing:.04em; text-decoration:none; border:1px solid var(--tag-border); border-radius:4px; padding:1px 8px; }
.post-tags .tag:hover{ color:var(--accent); border-color:var(--accent); }
.post-title{ font-family:var(--serif); font-size:24px; font-weight:700; line-height:1.55; margin:0; }
.post-title a{ color:var(--ink); text-decoration:none; }
.post-title a:hover{ color:var(--accent); }
.post-excerpt{ font-size:15px; line-height:1.95; color:var(--muted); margin:10px 0 0; }

/* ---- pagination ---- */
.pager{
  border-top:1px solid var(--rule); padding-top:36px; margin-top:8px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;
  font-family:var(--serif); font-variant-numeric:tabular-nums; font-size:14px;
}
.pager a,.pager span{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink2); text-decoration:none;
}
.pager .active{ background:var(--accent); color:var(--bg); }
.pager .prev,.pager .next{ width:auto; font-family:var(--sans); font-size:12px; letter-spacing:.1em; padding:0 8px; }
.pager a.prev,.pager a.next{ color:var(--accent); }
.pager .disabled{ color:var(--faint); }
.pager .dots{ width:20px; color:var(--faint); }

/* ---- article (single) ---- */
.article-eyebrow{ text-align:center; font-size:11px; letter-spacing:.2em; color:var(--accent); font-weight:700; margin-bottom:20px; }
.article-title{ font-family:var(--serif); font-size:30px; font-weight:700; line-height:1.6; color:var(--ink); text-align:center; letter-spacing:.015em; margin:0; }
.article-meta{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 4px; text-align:center; font-size:12px; color:var(--muted2); margin-top:22px; letter-spacing:.08em; }
.article-meta .meta-separator{ color:var(--faint); margin:0 2px; }
.article-taxonomy{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:18px 0 36px; font-family:var(--sans); font-size:12px; line-height:1.8; }
.article-taxonomy-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:6px 10px; }
.article-taxonomy-label{ color:var(--muted3); font-weight:700; letter-spacing:.12em; }
.article-taxonomy-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; }
.article-taxonomy a{ color:var(--accent); text-decoration:none; border-bottom:1px solid #d9c3b8; }
.article-audio{ text-align:center; margin:18px 0 40px; }
.about-prose{ margin-top:40px; }
.article-audio a{ font-size:12px; color:var(--accent); border-bottom:1px solid #d9c3b8; padding-bottom:3px; text-decoration:none; }

.summary{ border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); padding:24px 0 26px; margin-bottom:40px; }
.summary .label{ font-size:12px; letter-spacing:.2em; color:var(--muted2); margin-bottom:14px; }
.summary ul{ list-style:none; margin:0; padding:0; font-family:var(--serif); font-size:15px; line-height:2.0; }
.summary li::before{ content:"・ "; color:var(--accent); }

/* ---- markdown body (.prose) — mirrors article 案A ---- */
.prose{ font-family:var(--serif); font-size:17px; line-height:1.95; letter-spacing:.015em; color:var(--body); }
.prose > *:first-child{ margin-top:0; }
.prose p{ margin:0 0 22px; }
.prose h2{
  font-family:var(--serif); font-size:20px; font-weight:700; line-height:1.6; letter-spacing:.015em; color:var(--ink);
  margin:48px 0 22px; padding-bottom:12px; border-bottom:1px solid var(--hdr);
}
.prose h3{ font-family:var(--serif); font-size:18px; font-weight:700; line-height:1.6; color:var(--ink); margin:40px 0 14px; }
.prose h3::before{ content:"—"; color:var(--accent); margin-right:12px; }
.prose blockquote{
  margin:32px 0; padding:8px 0 8px 24px; border-left:3px solid var(--accent);
  color:var(--muted); font-size:16px; line-height:2.0;
}
.prose blockquote p{ margin:0; }
.prose img{ display:block; max-width:100%; height:auto; margin:28px auto; }
.prose pre{
  font-family:'SFMono-Regular',Menlo,Consolas,monospace; font-size:13px; line-height:1.85;
  background:var(--code-bg) !important; color:var(--code-text); padding:22px 24px; border-radius:8px; margin:28px 0;
  overflow-x:auto; white-space:pre; letter-spacing:0;
}
.prose :not(pre) > code{
  font-family:'SFMono-Regular',Menlo,Consolas,monospace; font-size:.85em;
  background:var(--inline-code-bg); padding:2px 6px; border-radius:4px;
  color:var(--ink);
}
.prose table{
  display:block; width:100%; max-width:100%; overflow-x:auto; border-collapse:collapse;
  font-family:var(--serif); margin:28px 0; -webkit-overflow-scrolling:touch;
  scrollbar-color:#c9b8aa #f3efe8;
}
.prose table > :where(thead,tbody,tfoot){
  display:table; width:100%; min-width:680px; table-layout:fixed; border-collapse:collapse;
}
.prose table:has(th:nth-child(3)) > :where(thead,tbody,tfoot),
.prose table:has(td:nth-child(3)) > :where(thead,tbody,tfoot){ min-width:760px; }
.prose table:has(th:nth-child(4)) > :where(thead,tbody,tfoot),
.prose table:has(td:nth-child(4)) > :where(thead,tbody,tfoot){ min-width:960px; }
.prose th{
  text-align:left; vertical-align:bottom; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.12em;
  line-height:1.7; color:var(--muted2); padding:0 18px 12px 0; border-bottom:2px solid var(--ink);
  overflow-wrap:anywhere;
}
.prose td{
  vertical-align:top; font-size:14.5px; line-height:1.85; padding:14px 18px 14px 0;
  border-bottom:1px solid var(--rule); overflow-wrap:anywhere;
}
.prose th:last-child,.prose td:last-child{ padding-right:0; }
.prose tr td:last-child{ font-variant-numeric:tabular-nums; white-space:normal; }
.prose ul,.prose ol{ padding-left:1.4em; margin:0 0 22px; }
.prose li{ margin-bottom:8px; }
.prose a{ color:var(--accent); text-decoration:none; }
.prose a:hover{ color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
.prose hr{ border:none; border-top:1px solid var(--rule); margin:40px 0; }

.article-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:56px 0 0; padding-top:24px;
  border-top:1px solid var(--ink);
}
.article-nav-link{ min-width:0; color:var(--ink); text-decoration:none; }
.article-nav-next{ text-align:right; }
.article-nav-label{
  display:block; margin-bottom:8px; color:var(--muted3); font-family:var(--sans);
  font-size:11px; font-weight:700; letter-spacing:.14em;
}
.article-nav-title{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--serif); font-size:16px; font-weight:600; line-height:1.6;
}
.article-nav-link:hover .article-nav-title{ color:var(--accent); }

/* ---- related posts ---- */
.related-posts{ margin-top:56px; padding-top:24px; border-top:1px solid var(--rule); }
.related-title{ font-size:12px; letter-spacing:.2em; color:var(--muted2); margin-bottom:18px; }
.related-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.related-list a{ font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); }
.related-list a:hover{ color:var(--accent); }
.related-date{ margin-left:10px; font-size:12px; color:var(--muted3); letter-spacing:.04em; white-space:nowrap; }

/* ---- tag cloud (タグ一覧) ---- */
.tagcloud{ display:flex; flex-wrap:wrap; align-items:baseline; gap:16px 26px; font-family:var(--serif); }
.tagcloud a{ color:var(--muted); text-decoration:none; }
.tagcloud a:hover{ color:var(--accent); }
.tagcloud .n{ font-family:var(--sans); font-size:11px; color:var(--faint); margin-left:4px; }
.tagcloud-note{ margin-top:28px; font-size:12px; color:var(--muted3); letter-spacing:.06em; }

/* ---- archive (アーカイブ) ---- */
.year-head{ display:flex; align-items:baseline; gap:16px; margin:0 0 8px; }
.year-head .y{ font-family:var(--serif); font-size:30px; font-weight:600; }
.year-head .c{ font-size:11px; color:var(--muted3); letter-spacing:.08em; }
.year-head + .month-row{ border-top:1px solid var(--ink); }
.month-row{ display:grid; grid-template-columns:84px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--rule); }
.month-row .m{ font-family:var(--serif); font-size:18px; color:var(--ink2); }
.month-row .mc{ font-size:11px; color:var(--muted3); letter-spacing:.08em; margin-top:5px; }
.month-list{ display:flex; flex-direction:column; gap:13px; min-width:0; }
.month-list .t{
  display:flex; align-items:baseline; min-width:0; white-space:nowrap;
  font-family:var(--serif); font-size:18px; font-weight:500; line-height:1.6;
}
.month-list .t a{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); text-decoration:none;
}
.month-list .t a:hover{ color:var(--accent); }
.month-list .d{
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--sans); font-size:12px; color:var(--muted3); font-weight:400; margin-left:8px; letter-spacing:.04em;
}

/* ---- footer ---- */
.site-footer{ margin-top:72px; padding-top:24px; border-top:1px solid var(--rule); text-align:center; font-size:12px; color:var(--muted2); letter-spacing:.1em; }
.site-footer a{ color:var(--accent); text-decoration:none; }

/* ---- responsive ---- */
@media (max-width:640px){
  .wrap{ padding:0 22px 56px; }
  .topbar{ min-height:56px; margin-bottom:38px; padding:10px 0; }
  /* auto-hide on scroll down, reveal on scroll up (see js/header-autohide.js) */
  .topbar.is-hidden{ transform:translateY(-100%); }
  .brand-name{ font-size:22px; }
  .menu-toggle{ display:block; margin-left:auto; }
  .nav{
    position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch;
    gap:0; padding:6px 0 12px; border-bottom:1px solid var(--hdr);
    background:var(--bg); box-shadow:0 18px 36px rgba(15,18,15,.25);
  }
  .topbar.nav-open .nav{ display:flex; }
  .nav a,.nav .theme-toggle,.nav .search{
    width:100%; min-height:44px; justify-content:flex-start; padding:0 2px;
    border-top:1px solid var(--rule); color:var(--ink2);
  }
  .nav a{
    border-radius:0;
    justify-content:flex-start;
    padding-left:8px;
    gap:10px;
    background:transparent !important;
  }
  .nav a.active{
    color:var(--accent);
  }
  .nav a.active .nav-icon{
    stroke:var(--accent);
  }
  .nav .nav-text{
    display:inline;
    font-size:13px;
    font-weight:500;
  }
  .nav .theme-toggle {
    border: 0;
    border-radius: 0;
    justify-content: flex-start;
    padding-left: 8px;
  }
  .nav .search .icon{ margin-left:0; }
  .article-title{ font-size:26px; }
  /* archives: stack the month label above the titles; titles stay one line */
  .month-row{ display:block; padding:18px 0; }
  .month-row .m{ display:inline; }
  .month-row .mc{ display:inline; margin:0 0 0 8px; }
  .month-row > div:first-child{ margin-bottom:12px; }
}

/* ===== 記事の目次 (TOC) ===== */

/* スマホ用アコーディオン目次 */
.toc-inline {
  margin-bottom: 38px;
  background-color: var(--rule2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 18px 22px;
}

.toc-inline-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* detailsのデフォルトの黒い三角形（矢印）を消す */
.toc-inline-title::-webkit-details-marker {
  display: none;
}
.toc-inline-title::marker {
  display: none;
}

/* 独自の矢印アイコンを表示 */
.toc-inline-title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 4px;
}

.toc-inline[open] .toc-inline-title::after {
  transform: rotate(-135deg);
}

.toc-inline-content {
  margin-top: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.toc-inline-content nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-inline-content nav ul ul {
  padding-left: 18px;
  margin-top: 6px;
}

.toc-inline-content nav li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.toc-inline-content nav a {
  color: var(--body);
  transition: color 0.15s ease;
}

.toc-inline-content nav a:hover {
  color: var(--accent);
}

/* PC用サイドバー目次（初期状態はスマホなので非表示） */
.toc-sidebar {
  display: none;
}

/* PC表示でのグリッドレイアウト & スクロール追従 */
@media (min-width: 1024px) {
  /* スマホ用目次を非表示に */
  .toc-inline {
    display: none;
  }

  /* 目次がある場合、wrap自体の最大幅を少し広げて窮屈さを防ぐ */
  .wrap--article:has(.has-toc) {
    max-width: 1140px;
  }

  .article-body-container.has-toc {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 64px;
    align-items: start;
  }

  /* サイドバー目次を表示 */
  .toc-sidebar {
    display: block;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-bottom: 24px;
  }

  .toc-sidebar-container {
    border-left: 1px solid var(--rule);
    padding-left: 24px;
  }

  .toc-sidebar-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  .toc-sidebar-content nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .toc-sidebar-content nav ul ul {
    padding-left: 12px;
    margin-top: 8px;
  }

  .toc-sidebar-content nav li {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
  }

  .toc-sidebar-content nav a {
    color: var(--muted);
    transition: all 0.2s ease;
    display: block;
  }

  .toc-sidebar-content nav a:hover,
  .toc-sidebar-content nav a.active {
    color: var(--accent);
  }
  
  .toc-sidebar-content nav a.active {
    font-weight: 700;
  }
}

/* ===== Overrides for Sticky Archives and Dark Mode Contrast ===== */

/* Sticky year headers in archives */
.year-head {
  position: -webkit-sticky;
  position: sticky;
  top: 86px;
  z-index: 9;
  background-color: var(--bg);
  margin: 0;
  padding: 16px 0 8px;
}
@media (max-width: 640px) {
  .year-head {
    top: 56px;
    padding: 12px 0 6px;
  }
  .topbar.is-hidden ~ .year-head {
    top: 0;
  }
}

/* Tag cloud colors for light and dark modes */
.tagcloud a.tag-medium {
  color: #2b2723;
}
.tagcloud a.tag-heavy {
  color: #b5462f;
}
html[data-theme="dark"] .tagcloud a.tag-medium {
  color: #dae0d4;
}
html[data-theme="dark"] .tagcloud a.tag-heavy {
  color: #e67a63;
}

/* Dark mode contrast improvements */
html[data-theme="dark"] {
  --faint: #636b5d;
  --accent: #72ba8b;
  --accent-hover: #90d3a7;
  --rule: #363c32;
  --code-bg: #1a1e19;
}