/* ============================================================
   publish.css — bootopia
   ============================================================ */

/* ── Google Fonts: Noto Serif JP (--font-serif), Noto Sans JP (--font-sans) ──
   wght@400..700 の範囲指定は可変フォント1本を配信させるための指定。
   静的4ウェイト（400;500;600;700）指定より転送量が大幅に減り、描画は同一。
   このURLは Worker（bootopia-robots/src/worker.js の fontsCssUrl）が
   HTML配信時に先行注入する。URLを変えたら Worker 側も揃えて deploy する。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400..700&family=Noto+Sans+JP:wght@400..700&display=swap');

/* ============================================================
   0a. CSS Custom Properties — override Obsidian Publish defaults
   ============================================================ */

:root,
.published-container {
  /* Accent */
  --brand-yellow: #DCBE00;
  --interactive-accent: var(--brand-yellow);
  --text-accent: var(--brand-yellow);
  --color-accent: var(--brand-yellow);

  /* Page */
  --page-width: 720px;
  --page-side-padding: 56px;
  --body-indent: 1em;
  --list-indent: 0.5em;
  --list-padding-start: 0;
  --list-spacing: 0.05em;
  --list-bullet-size: 0;
  --list-bullet-radius: 50%;
  --list-bullet-transform: none;
  --list-bullet-end-padding: 0.45em;
  --list-marker-color: var(--text-normal);

  /* Sidebar (nav) */
  --sidebar-left-width: 270px;
  --sidebar-left-background: #fff;
  --sidebar-left-border-width: 0;
  --sidebar-left-border-color: transparent;
  --nav-left-padding-min: 24px;

  /* Nav items */
  --nav-item-color: var(--text-muted, #555);
  --nav-item-color-hover: var(--nav-item-color);
  --nav-item-color-active: var(--nav-item-color);
  --nav-item-border-color: var(--brand-yellow);
  --nav-item-border-color-hover: var(--brand-yellow);
  --nav-item-border-color-active: var(--brand-yellow);
  --nav-item-border-width: 1px;
  --nav-item-background-hover: transparent;
  --nav-item-background-active: transparent;
  --nav-item-padding: 4px 8px 4px 16px;
  --nav-item-radius: 0;
  --nav-item-weight: 400;
  --nav-item-weight-hover: 400;
  --nav-item-weight-active: 400;
  --nav-item-size: 13.6px;
  --nav-letter-spacing: 0;

  /* Nav parent (folder) items */
  --nav-parent-item-color: var(--text-muted, #555);
  --nav-parent-item-color-active: var(--nav-parent-item-color);
  --nav-parent-item-weight: 400;

  /* Nav heading / indentation */
  --nav-indentation-guide-width: 0;
  --nav-indentation-guide-color: transparent;
  --nav-item-children-padding-start: 4px;
  --nav-item-children-margin-start: 8px;

  /* Nav heading */
  --nav-heading-color: var(--text-normal, #222);
  --nav-heading-weight: 600;

  /* Typography — font families */
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho',
    serif;
  --font-sans: 'Noto Sans JP', sans-serif;

  /* Typography — serif kerning（現在は意図的に無効）
     太田さんへ: 下記2行は 2026-06-27 08:15 版にあった定義です。同日
     15:50 のリファクタで、var() 参照側（本文・navの4箇所）を残したまま
     定義だけ消えていました。復元を検討しましたが、Google Fonts 配信の
     Noto Serif JP では pwid / palt の詰めが機能しない（実測で幅がむしろ
     微増、静的4ウェイト版・可変版とも同じ）ため、いったん効かせない
     まま元の値をコメントで保存しています。有効化する場合はコメントを
     外してください（letter-spacing は確実に効きます。約物詰めが必要
     なら halt は機能することを確認済み）。
     経緯の詳細: pub-filtered/publish-css字詰めの経緯メモ.md */
  /* --font-serif-features: 'pwid'; */
  /* --font-serif-letter-spacing: -0.01em; */

  /* Typography — heading weights */
  --h1-weight: 400;
  --h2-weight: 400;
  --h3-weight: 400;
  --h4-weight: 400;

  /* Heading sizes */
  --h1-size: 1.5em;
  --h2-size: 1.35em;
  --h3-size: 1.15em;
  --h4-size: 1.025em;
  --h5-size: 1em;
  --h5-weight: 400;

  /* Heading spacing */
  --heading-margin-top-h2: 1.5em;
  --heading-margin-top-h3: 1.5em;
  --heading-margin-top-h4: 1.5em;
  --heading-margin-top-h5: 1.5em;
  --heading-padding-bottom: 0.3em;

  /* Links (shared colors) */
  --link-color: var(--brand-yellow);
  --link-decoration: underline dotted 2px var(--brand-yellow);
  --link-decoration-hover: underline solid 2px var(--brand-yellow);
  --link-underline-offset: 0.2em;
  --link-external-color: var(--brand-yellow);

  /* Plain a:link / a:hover colors */
  --a-link-color: var(--text-muted, #555);
  --a-visited-color: var(--text-muted, #555);
  --a-hover-color: var(--brand-yellow);

  /* Blockquote */
  --blockquote-border-thickness: 2px;
  --blockquote-border-color: var(--brand-yellow);
  --blockquote-background-color: transparent;
  --blockquote-color: var(--text-muted, #555);

  /* Faint text — same in light and dark */
  --text-faint: #ababab;

  /* Code */
  --code-background: var(--background-secondary, #f5f5f5);
  --code-radius: 3px;
  --code-size: 0.875em;

  /* HR */
  --hr-color: var(--brand-yellow);
  --hr-thickness: 1px;

  /* Site name */
  --site-name-font: var(--font-sans);
  --site-name-size: 20px;
  --site-name-weight: 400;
  --site-name-color: var(--text-normal, #222);
  --site-name-color-hover: var(--text-muted, #555);

  /* Image placeholders — undimensioned embeds (CLS mitigation) */
  --image-intrinsic-width: var(--page-width);
  --image-intrinsic-height: calc(var(--page-width) * 0.75);
}

.theme-light,
.theme-dark {
  --text-faint: #ababab;
}

/* ============================================================
   0b. Link rules — fixed
   ============================================================ */

/* Base plain links */
a:link,
a:visited,
a:active {
  color: var(--a-link-color);
}

/* Hover / focus for plain links */
a:hover,
a:focus {
  color: var(--a-hover-color);
}

/* Obsidian rendered links */
.published-container .markdown-rendered a,
.published-container .markdown-rendered .internal-link,
.published-container .markdown-rendered .external-link {
  color: var(--a-link-color);
  text-decoration: var(--link-decoration);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* Keep visited links same as normal */
.published-container .markdown-rendered a:visited,
.published-container .markdown-rendered .internal-link:visited,
.published-container .markdown-rendered .external-link:visited {
  color: var(--a-visited-color);
  text-decoration: var(--link-decoration);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
}

/* Active in rendered content */
.published-container .markdown-rendered a:active,
.published-container .markdown-rendered .internal-link:active,
.published-container .markdown-rendered .external-link:active {
  color: var(--a-link-color);
  text-decoration: var(--link-decoration);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
}

/* Hover / focus in rendered content */
.published-container .markdown-rendered a:hover,
.published-container .markdown-rendered a:focus-visible,
.published-container .markdown-rendered .internal-link:hover,
.published-container .markdown-rendered .internal-link:focus-visible,
.published-container .markdown-rendered .external-link:hover,
.published-container .markdown-rendered .external-link:focus-visible {
  color: var(--a-link-color);
  text-decoration: var(--link-decoration-hover);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
  outline: none;
}

/* External link icon 非表示 */
.external-link {
  background-image: none !important;
  padding-right: 0 !important;
}

/* Footer links */
.site-footer a {
  color: var(--text-muted, #888);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--text-normal, #222);
}

/* Property/tag links */
.property-value .tag {
  color: var(--link-color, goldenrod);
  text-decoration: none;
  font-size: 0.95em;
  transition: color 0.15s ease;
}

.property-value .tag:hover,
.property-value .tag:focus {
  color: var(--text-accent, goldenrod);
  text-decoration: underline;
}

/* ============================================================
   1. Navigation — desktop
   ============================================================ */

/* Nav links — タップ時の黒下線を抑止 */
.nav-view-outer a,
.nav-view-outer .tree-item-inner,
.nav-view-outer .tree-item-self.is-clickable {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  -webkit-text-decoration-color: transparent;
  outline: none;
}

.nav-view-outer a:link,
.nav-view-outer a:visited,
.nav-view-outer a:active {
  color: inherit;
  text-decoration: none;
  -webkit-text-decoration-color: transparent;
}

.nav-view-outer a:hover,
.nav-view-outer a:focus-visible,
.nav-view-outer
  .tree-item-self.is-clickable:not(.mod-collapsible):not([data-static-nav-folder='true']).mod-active
  a,
.nav-view-outer
  .tree-item.is-active
  > .tree-item-self.is-clickable:not(.mod-collapsible):not([data-static-nav-folder='true'])
  a,
.nav-view-outer
  .tree-item-self.is-clickable:not(.mod-collapsible):not([data-static-nav-folder='true']):hover
  a,
.nav-view-outer
  .tree-item-self.is-clickable:not(.mod-collapsible):not([data-static-nav-folder='true']):focus-within
  a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand-yellow);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
  color: inherit;
}

@media (hover: none) and (pointer: coarse) {
  .nav-view-outer .tree-item-self:not(.mod-active) a:focus:not(:hover),
  .nav-view-outer .tree-item-self:not(.mod-active) a:active:not(:hover),
  .nav-view-outer .tree-item-inner:focus:not(:hover),
  .nav-view-outer .tree-item-inner:active:not(:hover),
  .nav-view-outer
    .tree-item-self.is-clickable:not(.mod-collapsible):not(.mod-active):focus,
  .nav-view-outer
    .tree-item-self.is-clickable:not(.mod-collapsible):not(.mod-active):active {
    text-decoration: none;
    -webkit-text-decoration-color: transparent;
    color: inherit;
    outline: none;
  }
}

/* Sidebar container */
.site-body-left-column {
  border-right: var(--sidebar-left-border-width) solid var(--sidebar-left-border-color);
  background-color: var(--sidebar-left-background);
  padding: 28px 0 0 0;
}

/* Inner wrapper — tighten width */
.site-body-left-column .site-body-left-column-inner {
  width: var(--sidebar-left-width);
  padding: 0 0 0 max(32px, var(--nav-left-padding-min));
}

/* Nav scroll area */
.nav-view-outer {
  padding-top: 4px;
  padding-bottom: 24px;
}

/* Hide the root tree-item wrapper (Obsidian's default) */
.nav-view-outer .nav-view > .tree-item > .tree-item-self {
  display: none;
}

/* ── First-level items (home, about, archive, project) ────── */

.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self {
  font-family: var(--font-serif) !important;
  font-size: 0.85em;
  font-weight: var(--nav-parent-item-weight);
  color: var(--nav-parent-item-color);
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
  padding: 6px 8px 6px 0;
  border-radius: 0;
  line-height: 1.65;
  letter-spacing: var(--nav-letter-spacing);
  font-feature-settings: var(--font-serif-features);
  transition: color 0.15s ease;
}

.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self:hover:not(.mod-collapsible.is-clickable),
.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self.mod-active:not(.mod-collapsible.is-clickable):not([data-static-nav-folder='true']) {
  color: var(--nav-item-color-hover);
}

.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self:hover:not(.mod-collapsible.is-clickable)
  a,
.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self.mod-active:not(.mod-collapsible.is-clickable):not([data-static-nav-folder='true'])
  a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand-yellow);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
}

/* Obsidian app.css sets opacity: 0.85 on first-level hover (filter-like fade) */
.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self:hover {
  opacity: 1;
}

.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self.mod-active:not([data-static-nav-folder='true']),
.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self.mod-active:not([data-static-nav-folder='true']):hover {
  color: var(--nav-parent-item-color-active);
}

.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self.mod-active:not([data-static-nav-folder='true'])
  a,
.nav-view-outer
  .nav-view
  > .tree-item
  > .tree-item-children
  > .tree-item
  > .tree-item-self.mod-active:not([data-static-nav-folder='true']):hover
  a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand-yellow);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
}

.nav-view-outer .tree-item-self {
  margin-left: 5px;
}

.nav-view-outer .tree-item-self[data-static-nav-folder='true'],
.nav-view-outer .tree-item-self[data-static-nav-folder='true']:hover,
.nav-view-outer .tree-item-self[data-static-nav-folder='true'].mod-active,
.nav-view-outer .tree-item-self[data-static-nav-folder='true'].mod-active:hover,
.nav-view-outer .tree-item.is-active > .tree-item-self[data-static-nav-folder='true'],
.nav-view-outer .tree-item.is-active > .tree-item-self[data-static-nav-folder='true']:hover {
  color: var(--nav-parent-item-color) !important;
  text-decoration: none !important;
  -webkit-text-decoration-color: transparent !important;
  cursor: default;
}

/* ── Always expanded — force open all levels ──────────────── */
/* Obsidian may set inline display states; !important keeps the nav tree open. */

.nav-view-outer .tree-item-children {
  display: block !important;
  padding-left: 0;
  padding-top: 1px;
  padding-bottom: 2px;
}

.nav-view-outer .tree-item-children .tree-item-children {
  border-left: none;
  padding-left: 10px;
}

/* Hide collapse/expand icons entirely */
.nav-view-outer .tree-item-self .tree-item-icon {
  display: none !important;
}

/* Remove indentation guide lines */
.nav-view-outer .tree-item-children::before {
  display: none;
}

/* ── Second-level items (amane, geshuku, imin) ────────────── */

.nav-view-outer .tree-item-children .tree-item-self {
  font-family: var(--font-serif) !important;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--nav-item-color);
  padding: 4px 8px 4px 12px;
  border-radius: 0;
  line-height: 1.65;
  letter-spacing: var(--nav-letter-spacing);
  font-feature-settings: var(--font-serif-features);
  transition: color 0.15s ease;
}

.nav-view-outer .tree-item-children .tree-item-self.is-clickable:not(.mod-collapsible):hover,
.nav-view-outer
  .tree-item-children
  .tree-item-self.is-clickable:not(.mod-collapsible):not([data-static-nav-folder='true']).mod-active {
  color: var(--nav-item-color-hover);
}

.nav-view-outer .tree-item-children .tree-item-self.is-clickable:not(.mod-collapsible):hover a,
.nav-view-outer
  .tree-item-children
  .tree-item-self.is-clickable:not(.mod-collapsible):not([data-static-nav-folder='true']).mod-active
  a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand-yellow);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
}

/* Folder headers (archive, home, etc.) — no hover decoration */
.nav-view-outer .tree-item-self.mod-collapsible.is-clickable:hover {
  color: var(--nav-parent-item-color);
  text-decoration: none;
  font-weight: var(--nav-parent-item-weight);
  background-color: transparent;
  opacity: 1;
  transition: none;
}

.nav-view-outer .tree-item-self:not(.mod-active):not(.mod-collapsible.is-clickable):hover {
  border-left-color: var(--brand-yellow) !important;
  box-shadow: none !important;
}

.nav-view-outer .tree-item-self.mod-active,
.nav-view-outer .tree-item-self.mod-active:hover,
.nav-view-outer .tree-item.is-active > .tree-item-self,
.nav-view-outer .tree-item.is-active > .tree-item-self:hover {
  border-left-color: var(--brand-yellow) !important;
}

.nav-view-outer .tree-item-children .tree-item-self.mod-active:not([data-static-nav-folder='true']),
.nav-view-outer .tree-item-children .tree-item-self.mod-active:not([data-static-nav-folder='true']):hover {
  color: var(--nav-item-color-active);
  font-weight: var(--nav-item-weight-active, 500);
}

.nav-view-outer .tree-item-children .tree-item-self.mod-active:not([data-static-nav-folder='true']) a,
.nav-view-outer
  .tree-item-children
  .tree-item-self.mod-active:not([data-static-nav-folder='true']):hover
  a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand-yellow);
  -webkit-text-decoration-color: var(--brand-yellow);
  text-underline-offset: var(--link-underline-offset);
}

/* ============================================================
   2. Site header (mobile — visible when nav is present)
   ============================================================ */

.site-header {
  border-bottom: 1px solid var(--background-modifier-border, #e8e8e8);
}

.site-body-left-column-site-name {
  margin-bottom: 28px;
}

.site-header .site-name {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--font-serif-letter-spacing);
  font-feature-settings: var(--font-serif-features);
}

/* サイトタイトルテキストを非表示（ロゴのみ表示） */
.site-body-left-column-site-name,
.site-header-text {
  display: none !important;
}

/* ロゴ画像のサイズ指定 */
.site-header-logo img,
.site-body-left-column-site-logo img {
  max-height: 24px;
  max-width: 100%;
  width: 185px;
  height: auto;
  aspect-ratio: 1000 / 130;
  vertical-align: middle;
}

.site-body-left-column-site-logo {
  text-align: left;
  margin-top: 20px;
  margin-bottom: 24px;
}

/* ============================================================
   3. Content area — readability first
   ============================================================ */

/* Content wrapper */
.published-container .markdown-preview-view {
  padding: 40px 0 80px;
}

.published-container .markdown-preview-sizer {
  max-width: var(--page-width);
  padding: 0 var(--page-side-padding);
}

/* Body font — Noto Serif JP */
.published-container .markdown-rendered {
  font-family: var(--font-serif);
  font-feature-settings: var(--font-serif-features);
  letter-spacing: var(--font-serif-letter-spacing);
}

/* Readable line width mode */
.published-container.is-readable-line-width .markdown-preview-sizer {
  max-width: var(--page-width);
}

/* ── Hide article heading icon ────────────────────────────── */

.publish-article-heading .clickable-icon {
  display: none !important;
}

.published-container .markdown-rendered h3.publish-article-heading {
  margin-top: var(--heading-margin-top-h3);
}

/* ── Headings (sans-serif + palt kerning) ──────────────────── */

.published-container .markdown-rendered h1.page-header,
.published-container .markdown-rendered h1 {
  font-family: var(--font-sans);
  font-weight: var(--h1-weight) !important;
  font-size: var(--h1-size);
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-bottom: var(--heading-padding-bottom);
  border-bottom: 1px solid var(--brand-yellow) !important;
  font-feature-settings: 'palt';
}

.published-container .markdown-rendered h2 {
  font-family: var(--font-sans);
  font-weight: var(--h2-weight) !important;
  font-size: var(--h2-size);
  letter-spacing: 0;
  line-height: 1.35;
  margin-top: var(--heading-margin-top-h2);
  padding-bottom: var(--heading-padding-bottom);
  border-bottom: 1px solid var(--hr-color);
  font-feature-settings: 'palt';
}

.published-container .markdown-rendered h3 {
  font-family: var(--font-sans);
  font-weight: var(--h3-weight) !important;
  font-size: var(--h3-size);
  line-height: 1.4;
  margin-top: var(--heading-margin-top-h3);
  border-left: none;
  padding-left: 0;
  font-feature-settings: 'palt';
}

.published-container .markdown-rendered h4 {
  font-family: var(--font-sans);
  font-weight: var(--h4-weight) !important;
  font-size: var(--h4-size);
  line-height: 1.4;
  margin-top: var(--heading-margin-top-h4);
  border-left: var(--nav-item-border-width) solid var(--nav-item-border-color);
  padding-left: 12px;
  font-feature-settings: 'palt';
}

.published-container .markdown-rendered .el-ul + .el-h4 h4,
.published-container .markdown-rendered .el-ol + .el-h4 h4,
.published-container .markdown-rendered ul + h4,
.published-container .markdown-rendered ol + h4 {
  margin-top: 1.25em;
}

.published-container .markdown-rendered h5 {
  font-family: var(--font-sans);
  font-weight: var(--h5-weight) !important;
  font-size: var(--h5-size);
  line-height: 1.4;
  margin-top: var(--heading-margin-top-h5);
  font-feature-settings: 'palt';
  text-decoration: underline;
}

/* ── Body text ────────────────────────────────────────────── */

.published-container .markdown-rendered p {
  font-family: var(--font-serif);
  line-height: 1.8;
  margin-left: var(--body-indent);
  margin-bottom: 1.2em;
}

.published-container .markdown-rendered .el-p:has(+ .el-ul) p,
.published-container .markdown-rendered .el-p:has(+ .el-ol) p,
.published-container .markdown-rendered p:has(+ ul),
.published-container .markdown-rendered p:has(+ ol) {
  margin-bottom: 0;
}

.published-container .markdown-rendered .el-p:has(+ .el-ul),
.published-container .markdown-rendered .el-p:has(+ .el-ol) {
  margin-bottom: 0;
}

/* ── Horizontal rule ──────────────────────────────────────── */

.published-container .markdown-rendered hr {
  border: none;
  border-top: var(--hr-thickness) solid var(--hr-color);
  margin: 2em 0;
}

/* ── Blockquote ───────────────────────────────────────────── */

.published-container .markdown-rendered blockquote {
  border-left: var(--blockquote-border-thickness) solid var(--blockquote-border-color);
  background: var(--blockquote-background-color);
  color: var(--blockquote-color);
  padding: 0.2em 0 0.2em 1em;
  margin: 1.2em 0;
  font-style: normal;
}

/* Publish wraps blockquotes in .el-blockquote — apply the line on the wrapper */
.published-container .markdown-rendered .el-blockquote {
  border-left: 1px solid var(--blockquote-border-color);
  background: var(--blockquote-background-color);
  color: var(--blockquote-color);
  padding: 0 0 1px 1em;
  margin: 1.2em 0;
}

.published-container .markdown-rendered .el-blockquote blockquote {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font-style: normal;
}

/* ── Images — reduce CLS while loading ────────────────────── */

/*
 * Publish renders wikilink images as <span class="internal-embed image-embed">
 * wrapping <img width height>. Reserve horizontal space on the span; let img
 * attrs drive aspect-ratio (web.dev/optimize-cls).
 */
.published-container .markdown-rendered span.internal-embed.image-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: 0;
  /* Prevent layout shift during loading */
  min-height: 1px;
}

/* width/height 属性付き img は height: auto でもブラウザが属性から
   アスペクト比を自動計算するため、専用ルールは不要。 */
.published-container .markdown-rendered img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* No dimensions: reserve a content-box before intrinsic size is known */
.published-container .markdown-rendered img:not([width]):not([height]) {
  content-visibility: auto;
  contain-intrinsic-size: var(--image-intrinsic-width) var(--image-intrinsic-height);
  background-color: var(--background-secondary, #f5f5f5);
  /* Prevent layout shift */
  min-height: 200px;
}

/* 読み込み中のプレースホルダは静的な背景色のみ。
   以前のシマーは img:not([complete]) が全imgに常時マッチし
   （complete はDOMプロパティで属性には存在しない）、ロード完了後も
   全画像で無限アニメーションが走り続けていた。背景は不透明画像の
   下に隠れるので、この変更で見た目は変わらない。 */
.published-container .markdown-rendered img[loading="lazy"] {
  background-color: var(--background-secondary, #f5f5f5);
}

/* Ensure images don't cause horizontal overflow */
.published-container .markdown-rendered .image-embed,
.published-container .markdown-rendered figure {
  overflow: hidden;
  margin: 1em 0;
}

/* Prevent text reflow around images */
.published-container .markdown-rendered .image-embed + p,
.published-container .markdown-rendered figure + p {
  clear: both;
}

/* ── Code ─────────────────────────────────────────────────── */

.published-container .markdown-rendered code {
  background: var(--code-background);
  border-radius: var(--code-radius);
  font-size: var(--code-size);
  padding: 0.15em 0.4em;
}

.published-container .markdown-rendered pre code {
  padding: 1em;
  line-height: 1.6;
}

/* ── Lists ────────────────────────────────────────────────── */

.published-container .markdown-rendered ul,
.published-container .markdown-rendered ol {
  font-size: 0.95em;
  line-height: 1.8;
  margin-left: var(--list-indent);
  padding-left: var(--list-padding-start);
}

.published-container .markdown-rendered .el-p + .el-ul ul,
.published-container .markdown-rendered .el-p + .el-ol ol,
.published-container .markdown-rendered p + ul,
.published-container .markdown-rendered p + ol {
  margin-top: 0.25em !important;
}

.published-container .markdown-rendered ul {
  list-style: none;
}

.published-container .markdown-rendered ul > li::marker {
  content: none;
  color: transparent;
  font-size: 0;
}

/* Hanging indent + absolute bullet. Do not use display: flex on li:
   Publish renders tight list items without a <p> wrapper, so inline
   <a>/<strong> become separate flex items and break out of the text flow. */
.published-container .markdown-rendered ul li {
  position: relative;
  padding-left: 1em;
}

.published-container .markdown-rendered ul li > p {
  margin-top: 0;
  margin-bottom: 0;
}

.published-container .markdown-rendered ul li > ul {
  margin-left: 0;
}

.published-container .markdown-rendered ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.52lh - 0.125em + 0.1em);
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background-color: var(--text-normal, #222);
}

.published-container .markdown-rendered li {
  margin-bottom: var(--list-spacing);
}

/* ── Tables ───────────────────────────────────────────────── */

.published-container .markdown-rendered table {
  font-size: 0.9em;
  line-height: 1.6;
  border-collapse: collapse;
  margin: 1.5em 0;
}

.published-container .markdown-rendered table th {
  font-weight: 600;
  border-bottom: 2px solid var(--hr-color);
  padding: 0.5em 0.8em;
  text-align: left;
}

.published-container .markdown-rendered table td {
  border-bottom: 1px solid var(--hr-color);
  padding: 0.5em 0.8em;
}

/* ============================================================
   4. Footer
   ============================================================ */

.site-footer {
  display: none;
}

/* ============================================================
   5. Mobile — max-width: 750px
   ============================================================ */

@media screen and (max-width: 750px) {
  .published-container {
    --page-side-padding: 20px;
    --sidebar-left-width: 300px;
    --site-name-size: 17px;
    --image-intrinsic-width: calc(100vw - 2 * var(--page-side-padding));
    --image-intrinsic-height: calc((100vw - 2 * var(--page-side-padding)) * 0.75);
  }

  .published-container.has-navigation .site-header .clickable-icon {
    color: var(--brand-yellow);
  }

  /* Sidebar logo — header logo is shown on mobile instead */
  .site-body-left-column-site-logo {
    display: none !important;
  }

  /* Sidebar (nav) — overlay on mobile */
  .published-container.has-navigation .site-body-left-column {
    background-color: var(--background-primary, #fff);
    border-right: none;
    padding-top: 16px;
  }

  .published-container.has-navigation
    .site-body-left-column
    .site-body-left-column-inner {
    width: 100%;
    padding: 0 32px;
  }

  /* Nav items — slightly larger tap targets... */
  .nav-view-outer
    .nav-view
    > .tree-item
    > .tree-item-children
    > .tree-item
    > .tree-item-self {
    font-size: 1.0625em;
    padding: 8px 8px 8px 0px;
    margin-left: 5px;
  }

  .nav-view-outer .tree-item-children .tree-item-children .tree-item-self.is-clickable:not(.mod-collapsible) .tree-item-inner {
    padding-left: 5px;
  }

  .nav-view-outer .tree-item-children .tree-item-self {
    font-size: 0.85em;
    padding: 6px 8px 6px 12px;
  }

  /* Nav search */
  .site-body-left-column .search-bar {
    margin-bottom: 16px;
  }

  /* Content */
  .published-container .markdown-preview-view {
    padding: 20px 0 40px;
  }

  .published-container .markdown-preview-sizer {
    padding: 0 var(--page-side-padding);
  }

  .published-container .markdown-rendered h1.page-header {
    font-size: 1.5em;
  }

  .published-container .markdown-rendered h1 {
    font-size: 1.5em;
    margin-top: 1.5em;
  }

  .published-container .markdown-rendered h2 {
    font-size: 1.5em;
    margin-top: 1.4em;
  }

  .published-container .markdown-rendered h3 {
    font-size: 1.25em;
  }

  .published-container .markdown-rendered h4 {
    font-size: var(--h4-size);
  }

  .published-container .markdown-rendered h5 {
    font-size: 1em;
  }

  .published-container .markdown-rendered p {
    line-height: 1.75;
    font-size: 0.9375em;
    margin-left: 1.1em;
  }

  .published-container .markdown-rendered ul,
  .published-container .markdown-rendered ol {
    font-size: 0.95em;
    margin-left: 1.5em;
    padding-left: 0;
  }

  .published-container .markdown-rendered .internal-link {
    font-size: inherit;
  }

  /* タップ時の :focus をデスクトップ通常表示に揃える（黒下線フラッシュ防止） */
  @media (hover: none) and (pointer: coarse) {
    .published-container .markdown-rendered a:focus,
    .published-container .markdown-rendered .internal-link:focus,
    .published-container .markdown-rendered .external-link:focus {
      color: var(--a-link-color);
      text-decoration: var(--link-decoration);
      -webkit-text-decoration-color: var(--brand-yellow);
      text-underline-offset: var(--link-underline-offset);
      outline: none;
    }
  }

  /* Blockquote — no indent on mobile */

  .published-container .markdown-rendered .el-blockquote {
    margin-left: 0;
    padding-left: 0.1em;
    padding-top: 0;
  }

  /* Footer hidden on mobile (default Obsidian behavior) */
  .site-footer {
    display: var(--footer-display, none);
  }
}

/* ============================================================
   6. Caption　
   ============================================================ */

.image-caption,
p .image-caption,
.markdown-rendered .image-caption {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85em;
  line-height: 1.5em !important;
  color: var(--text-muted);
  margin-top: -10px;
  margin-bottom: -20px;
}