/* ==========================================================================
   notes.imutaro.com — Obsidian Publish カスタムCSS
   --------------------------------------------------------------------------
   ブランドの正本: ~/repos/imutaakihiro/imutaro/DESIGN.md（食い違ったら向こうが勝つ）
   原則:
     1. 面で塗らない。色は「線」と「文字」に使う。淡い面は --imu-surface だけ
     2. アクセント（シアン）は1画面に点在させすぎない
     3. 影・グラデーション禁止。ヘアライン罫線で構造を作る
   ========================================================================== */

body {
  /* --- imutaro ブランドトークン（globals.css と同値） --- */
  --imu-bg:            #fafbfc;
  --imu-ink:           #1a2330;
  --imu-sub:           #5b6572;
  --imu-accent:        #0087a8;
  --imu-accent-bright: #00add8;
  --imu-line:          #e3e8ed;
  --imu-surface:       #f0f3f6;
  --imu-current:       #e8eef2;
  --imu-border-dark:   #c4ccd4;

  /* --- Obsidian Publish の変数へ流し込む --- */
  --background-primary:       var(--imu-bg);
  --background-primary-alt:   var(--imu-surface);
  --background-secondary:     var(--imu-bg);
  --background-secondary-alt: var(--imu-surface);

  --text-normal:       var(--imu-ink);
  --text-title-h1:     var(--imu-ink);
  --text-muted:        var(--imu-sub);
  --text-faint:        var(--imu-sub);
  --text-accent:       var(--imu-accent);
  --text-accent-hover: var(--imu-accent-bright);
  --text-selection:    var(--imu-current);
  --text-highlight-bg: var(--imu-current);

  --interactive-accent:       var(--imu-accent);
  --interactive-accent-hover: var(--imu-accent-bright);

  --background-modifier-border:       var(--imu-line);
  --background-modifier-border-hover: var(--imu-border-dark);
  --background-modifier-hover:        var(--imu-surface);
  --background-modifier-active-hover: var(--imu-current);

  --code-background: var(--imu-surface);
  --code-normal:     var(--imu-ink);
  --blockquote-border-color: var(--imu-line);
  --hr-color: var(--imu-line);

  /* --- グラフの線（2026-08-24: 線が濃すぎたので薄く） ---
     未指定だと Obsidian のデフォルト（中間グレー）が出て、
     「面で塗らない・ヘアラインで構造を作る」原則から浮く。
     濃さの調整はこの1行だけ触ればよい:
       もっと薄く → var(--imu-line)        #e3e8ed（罫線と同値・ほぼ消える）
       いまの値   → #d5dce3
       濃くする   → var(--imu-border-dark) #c4ccd4
     ⚠️ 線の「太さ」は Publish 側の CSS では変えられない
       （太さは .obsidian/graph.json の lineSizeMultiplier ＝ 手元アプリ専用）。 */
  --graph-line: #d5dce3;

  --radius-s: 4px;
  --radius-m: 4px;
  --radius-l: 4px;

  /* --- タイポグラフィ ---
     2026-08-19: --font-text の上書きを撤去し、Publish デフォルト
     （--font-default = ui-sans-serif / -apple-system …）に戻した＝たぬさんと同値。
     根拠: 旧スタックの先頭 "IBM Plex Sans JP" は @font-face も @import も無く
     どこからも読み込まれていない。ローカルにも未インストール（system_profiler で確認）
     なので、実際にはご主人様の画面でも 2 番目の Hiragino Sans に落ちていた。
     デフォルトに戻すと和文はヒラギノのまま、欧文・数字だけが SF Pro になる。
     Plex に戻すなら Google Fonts の @import を先に足すこと（DESIGN.md の Body 指定）:
       @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;700&display=swap");
       --font-text: "IBM Plex Sans JP", "Hiragino Sans", system-ui, sans-serif; */
  --font-monospace:
    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-text-size: 16px;
  /* 2026-08-18: 1.85 → 1.5（たぬさん＝Publish デフォルト同値へ。窮屈なら 1.6 に戻す） */
  --line-height-normal: 1.5;
}

/* --------------------------------------------------------------------------
   本文の左右パディング（2026-08-19・たぬさん方式）
   Publish デフォルトは 48px。40px に詰めて 1 行あたりの文字数を稼ぐ。
   ⚠️ body で上書きしても効かない。Publish が .publish-renderer のスコープで
   --page-side-padding を再定義しているため、同じスコープで上書きする必要がある。
   -------------------------------------------------------------------------- */
.publish-renderer {
  --page-side-padding: 40px;
}

/* --------------------------------------------------------------------------
   本文 — 2026-08-19: letter-spacing 0.02em → 0（たぬさん＝Publish デフォルト同値）。
   DESIGN.md の 0.02em は「Plex は字面がやや締まるため」という補正だが、
   その Plex は Publish 側で一度も読み込まれていない（上の --font-text 参照）。
   ヒラギノに 0.02em を足すと和文が間延びして「散文が薄く」感じる原因になるので撤去。
   等幅の 0 遮断は残す（数字の桁揃えのため）。
   -------------------------------------------------------------------------- */
.markdown-preview-view,
.markdown-rendered {
  letter-spacing: 0;
  color: var(--imu-ink);
}

code, pre, .markdown-rendered code {
  letter-spacing: 0;
  font-feature-settings: normal;
}

/* --------------------------------------------------------------------------
   見出し — 2026-08-19: サイズ・ウェイト・字送りの上書きを撤去し Publish デフォルトへ。
   たぬさんは見出しに一切サイズ指定をしておらず、h2 の帯だけを足している。
   デフォルトの階段は h1 1.618em/700・h2 1.462em/680・h3 1.318em/660 で、
   旧設定（h2 1.35rem/600・h3 1.1rem/600）より一段強い。本文 16px との差が開き、
   長いノートを流し読みしたときのセクションの立ち上がりがはっきりする。
   色だけブランドのインクに揃える。palt も撤去（たぬさんは掛けていない）。
   -------------------------------------------------------------------------- */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6,
.page-header {
  color: var(--imu-ink);
}

/* h1 のサイズはデフォルトのまま。直下の status 行との間だけ確保する */
.markdown-rendered h1,
.page-header {
  margin-bottom: 1.6rem;
}

/* h2 は帯見出し（2026-08-18 改修・Publish 限定の翻案）
   淡い面の帯 + 左のアクセント縦線でセクションの切れ目を「面」で示す。
   ⚠️ 原則2「アクセントを点在させすぎない」より縦線の分だけシアンが増えるが、
   157本の原液ノートを流し読みする際のセクション認知を優先した意図的な逸脱。
   DESIGN.md（ブランド正本）に寄せ直すときは旧・下線罫（border-bottom 1px --imu-line）に戻す。
   2026-08-19: サイズ・上下マージンの指定を落とし、装飾（帯とアクセント線）だけ残した。
   Publish のデフォルト下線用 padding-bottom が specificity で勝ち文字が上に寄るため、
   たぬさん同様 padding は !important で上下均等にする */
.markdown-rendered h2 {
  background: var(--imu-surface);
  border-left: 4px solid var(--imu-accent);
  border-radius: 0 4px 4px 0;
  padding: 0.35em 0.65em !important;
}

/* --------------------------------------------------------------------------
   成熟度ステータス行（2026-08-18・デジタルガーデン運用）
   frontmatter の cssclasses: [garden-tended] / [garden-evergreen] を持つノートだけ、
   タイトル直下に mono のステータス行を表示する（Gwern 風の翻案・D-lite）。
   無印＝育成中は何も表示しない（トピックページ・Welcome に余計な行を出さない）。
   ⚠️ 日付付き（planted / last tended）は CSS では不可能。publish.js 拡張の保留案件。
   -------------------------------------------------------------------------- */
/* 全ページのデフォルト＝育成中（growing・薄め）。昇格クラスが上書きし、
   トピックページ・Welcome は garden-none で行ごと消す */
.page-header::after {
  content: "status: growing";
  display: block;
  font-family: var(--font-monospace);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 0.6rem;
  color: var(--imu-sub);
  opacity: 0.7;
}

.garden-tended .page-header::after {
  content: "status: tended";
  opacity: 1;
}

/* 完成だけアクセント色＝庭の中で「育ちきった株」が一目でわかる報酬シグナル */
.garden-evergreen .page-header::after {
  content: "status: evergreen";
  color: var(--imu-accent);
  opacity: 1;
}

.garden-none .page-header::after {
  content: none;
}

/* --------------------------------------------------------------------------
   リンク — 面で塗らず、下線と色で示す
   -------------------------------------------------------------------------- */
.markdown-rendered a,
.markdown-rendered .internal-link {
  color: var(--imu-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--imu-line);
  transition: color 0.12s ease, border-color 0.12s ease;
}

.markdown-rendered a:hover,
.markdown-rendered .internal-link:hover {
  color: var(--imu-accent-bright);
  border-bottom-color: var(--imu-accent-bright);
  background: transparent;
}

/* 未公開ノートへのリンクは目立たせず、しかし判別できるように */
.markdown-rendered .internal-link.is-unresolved {
  color: var(--imu-sub);
  border-bottom-style: dotted;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   引用・callout — 枠線1本で。塗りは surface のみ
   -------------------------------------------------------------------------- */
.markdown-rendered blockquote {
  border-left: 2px solid var(--imu-line);
  padding-left: 1.1rem;
  margin-left: 0;
  color: var(--imu-sub);
  font-style: normal;
}

.markdown-rendered .callout {
  border: 1px solid var(--imu-line);
  border-radius: 4px;
  background: var(--imu-bg);
  padding: 0.9rem 1.1rem;
  mix-blend-mode: normal;
}

.markdown-rendered .callout[data-callout="info"]    { --callout-color: 0, 135, 168; }
.markdown-rendered .callout[data-callout="warning"] { --callout-color: 191, 122,  0; }
.markdown-rendered .callout[data-callout="success"] { --callout-color:  22, 128, 90; }

/* warning だけ「止まれ」の深刻度階調（2026-08-18 改修）
   info / success の静かなトーンから一段上げ、背景の淡い琥珀 + 左ボーダーで
   読み手を止める。info / success は現行の枠線1本のまま */
.markdown-rendered .callout[data-callout="warning"] {
  background: rgba(var(--callout-color), 0.07);
  border-inline-start: 3px solid rgb(var(--callout-color));
}

.markdown-rendered .callout-title {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* callout の上下に息つきの余白（2026-08-18 改修・視覚リズム強化。
   表の余白はテーブルセクションの .el-table 側で持つ） */
.markdown-rendered .callout {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}

/* 2026-08-19: li の margin-block: 0.25em を撤去（たぬさん＝Publish デフォルト）。
   1項目1行の箇条書きが多い Notes では、行間 1.5 に加えて 0.25em を足すと
   リストが段落と同じ密度まで緩み、「箇条書きの塊」として見えなくなるため。 */

/* --------------------------------------------------------------------------
   コード — 淡い面 + ヘアライン
   -------------------------------------------------------------------------- */
.markdown-rendered pre {
  background: var(--imu-surface);
  border: 1px solid var(--imu-line);
  border-radius: 4px;
  font-size: 0.9rem;
}

.markdown-rendered :not(pre) > code {
  background: var(--imu-surface);
  color: var(--imu-ink);
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   テーブル — ヘアライン罫線リスト（DESIGN.md モチーフ3）
   2026-08-18 改修: セルを折り返さず横スクロール（たぬさん方式の翻案）。
   セル内で「メソッ/ド」のような中途半端な折り返しが起きるのを止め、
   はみ出す分は右端フェード + スクロールで逃がす。
   ⚠️ 長文セル中心の「文章型の表」は nowrap だと表幅が1000px超になり
   本文を読むのにスクロール必須になる。そのノートだけ frontmatter に
   cssclasses: [wrap-tables] を付けて折り返しに戻す（下の opt-out）
   -------------------------------------------------------------------------- */
.markdown-rendered .el-table {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  overflow-x: auto;
  /* iOS Safari の font boosting 対策: nowrap の長いセルで文字が勝手に拡大されるのを止める */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* コンテナ幅を超えたら右端をフェードして「続きがある」ことを示す */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  /* スクロールバーはホバー時のみ表示（macOS native 風） */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s;
}

.markdown-rendered .el-table:hover {
  scrollbar-color: var(--imu-border-dark) transparent;
}

.markdown-rendered .el-table::-webkit-scrollbar { height: 8px; }
.markdown-rendered .el-table::-webkit-scrollbar-track { background: transparent; }
.markdown-rendered .el-table::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s;
}
.markdown-rendered .el-table:hover::-webkit-scrollbar-thumb {
  background: var(--imu-border-dark);
}

.markdown-rendered table {
  border-collapse: collapse;
  font-size: 0.94rem;
  width: max-content;
  max-width: none;
  /* フェードの透過域（右端 32px）と揃え、右端までスクロールしたとき
     表の右端が不透明域に入るようにする */
  margin: 0 32px 0 0;
}

.markdown-rendered th,
.markdown-rendered td {
  white-space: nowrap;
}

/* opt-out: 文章型の表は従来どおり折り返す（frontmatter: cssclasses: [wrap-tables]） */
.wrap-tables .el-table {
  -webkit-mask-image: none;
  mask-image: none;
}

.wrap-tables .el-table table {
  width: 100%;
  margin-right: 0;
}

.wrap-tables .el-table th,
.wrap-tables .el-table td {
  white-space: normal;
}

.markdown-rendered th {
  text-align: left;
  font-weight: 600;
  color: var(--imu-sub);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--imu-border-dark);
  padding: 0.5rem 0.8rem;
}

.markdown-rendered td {
  border-bottom: 1px solid var(--imu-line);
  padding: 0.6rem 0.8rem;
}

.markdown-rendered tbody tr:hover {
  background: var(--imu-surface);
}

/* --------------------------------------------------------------------------
   Mermaid — デフォルトの紫を imutaro トークンに置き換える（2026-08-18 改修）
   ⚠️ Mermaid は SVG 内部の <style> でインラインに配色するため、上書きには
   !important が必須（たぬさん方式の翻案）。配色統制は部分的にしか効かないので、
   図は「1ノート1個・ノード7個以内」の運用ルール（Notes/CLAUDE.md）で小さく保つ
   -------------------------------------------------------------------------- */
.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* 図の上下に息つきの余白 + 中央寄せ */
.mermaid {
  margin: 1.6em auto;
  text-align: center;
}

/* フローチャートのノード（角丸矩形・菱形・円）: 塗りは淡い面、枠はヘアライン濃色 */
.mermaid .node rect,
.mermaid .node polygon,
.mermaid .node circle {
  fill: var(--imu-surface) !important;
  stroke: var(--imu-border-dark) !important;
}

/* ノード・エッジのラベル文字は本文インクに揃える */
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .label text,
.mermaid text {
  color: var(--imu-ink) !important;
  fill: var(--imu-ink) !important;
}

/* エッジラベルの背景はページ背景に溶かす */
.mermaid .edgeLabel,
.mermaid .edgeLabel p,
.mermaid .edgeLabel .labelBkg {
  background-color: var(--imu-bg) !important;
}

/* 矢印・線はサブ文字色（黒い線の主張を一段抑える） */
.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: var(--imu-sub) !important;
}

.mermaid .arrowheadPath,
.mermaid marker path {
  fill: var(--imu-sub) !important;
  stroke: var(--imu-sub) !important;
}

/* サブグラフ（囲い）は中身より薄く: 背景色のまま枠だけヘアライン */
.mermaid .cluster rect {
  fill: var(--imu-bg) !important;
  stroke: var(--imu-line) !important;
}

.mermaid .cluster-label text,
.mermaid .cluster text {
  fill: var(--imu-ink) !important;
}

/* シーケンス図: 参加者ボックスとライフライン */
.mermaid rect.actor {
  fill: var(--imu-surface) !important;
  stroke: var(--imu-border-dark) !important;
}

.mermaid line.actor-line {
  stroke: var(--imu-line) !important;
}

.mermaid .messageText {
  fill: var(--imu-ink) !important;
}

.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: var(--imu-sub) !important;
}

/* --------------------------------------------------------------------------
   サイドバー・ナビゲーション
   -------------------------------------------------------------------------- */
.site-body-left-column,
.site-body-right-column {
  border-color: var(--imu-line);
}

.site-body-left-column-site-name {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--imu-ink);
}

/* 右カラムの見出し（INTERACTIVE GRAPH / TABLE OF CONTENTS）を mono ラベルに */
.site-body-right-column-heading {
  font-family: var(--font-monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--imu-sub);
  text-transform: uppercase;
}

/* 目次 — ヘアラインで柱を立てる */
.site-body-right-column-outline .outline-view-item {
  border-left: 1px solid var(--imu-line);
  padding-left: 0.7rem;
}

.site-body-right-column-outline .outline-view-item:hover {
  border-left-color: var(--imu-accent);
  color: var(--imu-accent);
}

/* グラフ — 枠は消し、紙に溶かす */
.graph-view-container {
  border: 1px solid var(--imu-line);
  border-radius: 4px;
  background: var(--imu-bg);
}

/* --------------------------------------------------------------------------
   バックリンク — 罫線リストに
   -------------------------------------------------------------------------- */
.embedded-backlinks .backlink-pane {
  border-top: 1px solid var(--imu-line);
  padding-top: 1rem;
}

.embedded-backlinks .tree-item-self:hover {
  background: var(--imu-surface);
  color: var(--imu-accent);
}

/* --------------------------------------------------------------------------
   フッター — mono 12px（DESIGN.md のラベル段）
   -------------------------------------------------------------------------- */
.site-footer {
  font-family: var(--font-monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--imu-sub);
  border-top: 1px solid var(--imu-line);
}

/* ライト／ダーク切替は表示しない。
   2026-08-24: Pages 一覧（.nav-view-outer）の非表示を撤去した。
   ⚠️ Publish のナビは遅延初期化で、display:none のままマウントされると
      nav.init() が走らず空箱（<div class="nav-view"></div>）で固まる。
      再び隠すときは display ではなく別の手段を検討すること。 */
.site-body-left-column-site-theme-toggle {
  display: none !important;
}

/* ==========================================================================
   左サイドバー — プロフィール（publish.js が注入）
   ========================================================================== */

/* 既定のロゴ／サイト名は、プロフィールと重複するので控えめに */
.site-body-left-column-site-logo {
  display: none;
}

/* サイト名 = ブランドロゴ。DESIGN.md の .logo（0.95rem）に倣い mono で組む */
.site-body-left-column-site-name {
  font-family: var(--font-monospace);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--imu-ink);
  padding-bottom: 0.5rem;
  transition: color 0.12s ease;
}

.site-body-left-column-site-name:hover {
  color: var(--imu-accent);
}

.imu-profile {
  padding: 1.4rem 0 1.2rem;
  border-top: 1px solid var(--imu-line);
  border-bottom: 1px solid var(--imu-line);
  margin-bottom: 1.2rem;
  text-align: center;
}

/* サイドバーは 280px（app.css の --sidebar-left-width）。scrollbar-gutter を
   引いた実効幅は約 265px なので、160px で左右に 50px 強の余白が残る。
   元画像は 512px 四方あるため Retina でも劣化しない。
   ⚠️ これ以上（例 256px）に上げると余白が数 px まで詰まり、プロフィールが
      不自然に縦長になる。 */
.imu-profile-avatar {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--imu-surface);
  border: 1px solid var(--imu-line);
  transition: border-color 0.15s ease;
}

.imu-profile-avatar:hover {
  border-color: var(--imu-accent);
}

.imu-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* ドット絵を補間させない（DESIGN.md モチーフ8） */
  image-rendering: pixelated;
  display: block;
}

.imu-profile-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--imu-ink);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* handle と bio は mono ラベル段（DESIGN.md タイポ規則） */
.imu-profile-handle {
  font-family: var(--font-monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--imu-accent);
  margin-top: 0.15rem;
}

.imu-profile-bio {
  font-size: 0.8rem;
  color: var(--imu-sub);
  margin-top: 0.5rem;
  line-height: 1.6;
  padding: 0 0.4rem;
}

.imu-profile-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

/* mono ピル（DESIGN.md モチーフ5） */
.imu-profile-link {
  font-family: var(--font-monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--imu-sub);
  text-decoration: none;
  border: 1px solid var(--imu-line);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.imu-profile-link:hover {
  color: var(--imu-accent);
  border-color: var(--imu-accent);
  background: transparent;
}

/* ==========================================================================
   コードブロックのコピーボタン
   ========================================================================== */

.markdown-rendered pre {
  position: relative;
}

.imu-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--font-monospace);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--imu-sub);
  background: var(--imu-bg);
  border: 1px solid var(--imu-line);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.markdown-rendered pre:hover .imu-copy { opacity: 1; }
.imu-copy:hover { color: var(--imu-accent); border-color: var(--imu-accent); }
.imu-copy.is-done { color: var(--imu-accent); border-color: var(--imu-accent); opacity: 1; }

/* タッチデバイスは hover が無いので常時表示 */
@media (hover: none) {
  .imu-copy { opacity: 1; }
}

/* 検索ボックスをプロフィールの下に馴染ませる */
.search-view-outer input {
  border: 1px solid var(--imu-line);
  border-radius: 4px;
  background: var(--imu-bg);
  font-size: 0.85rem;
}

.search-view-outer input:focus {
  border-color: var(--imu-accent);
  outline: none;
}

/* ==========================================================================
   ホバープレビューのタイトル（publish.js が注入する .imu-popover-title）
   ========================================================================== */

/* ⚠️ Publish の popover は display: flex（row）。タイトル div を挿入すると
   「タイトル｜本文」が横並びになり、幅が max-width（80vw）まで膨張して
   画面を覆う巨大プレビューになる（2026-08-19 発生）。縦積みに直す */
.popover.hover-popover {
  flex-direction: column;
}

/* 2026-08-19: 参考例（タイトル直下に本文が即続くコンパクト型）に寄せた。
   罫線は引かず、タイトルを一段大きくして「ページの顔」にする */
.popover.hover-popover .imu-popover-title {
  flex-shrink: 0;
  padding: 1.1rem 1.5rem 0;
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.4;
  color: var(--imu-ink);
}

/* popover 内の本文はページ用の 32px パディングだと間延びするので詰める */
.popover.hover-popover .markdown-preview-view {
  padding: 14px 24px 24px;
}

/* popover 内では frontmatter とヘッダ領域（空でも高さを食う）を消し、
   直後の最初の要素の上マージンも落としてタイトル→本文を直結する */
.popover.hover-popover .mod-header,
.popover.hover-popover .mod-frontmatter {
  display: none;
}

.popover.hover-popover .mod-frontmatter + div > :first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   モバイル
   -------------------------------------------------------------------------- */
@media (max-width: 750px) {
  /* 2026-08-19: 本文サイズと見出しサイズの縮小をやめ、Publish デフォルトのまま
     左右パディングだけ 20px に詰める（たぬさん方式）。見出しは em 指定なので
     本文サイズを触らなければ自動で比率が保たれる。
     ⚠️ sizer 側は Publish が padding を直接当てているため !important が要る */
  .publish-renderer {
    --page-side-padding: 20px;
  }

  .markdown-preview-sizer {
    padding-left: var(--page-side-padding) !important;
    padding-right: var(--page-side-padding) !important;
  }

  /* スマホではプロフィールを圧縮（本文を先に見せる） */
  .imu-profile { padding: 1rem 0; }
  .imu-profile-avatar { width: 72px; height: 72px; margin-bottom: 0.6rem; }
  .imu-profile-bio { display: none; }
}