Merge branch 'develop'

Author: y-yamasaki

WebSite/assets/css/blog.css

@@ -320,13 +320,12 @@
 .markdown-body h3 {
     font-size: 1.5rem;
     padding-bottom: 0.4rem;
-    border-bottom: 2px solid var(--color-border-soft);
 }
 .markdown-body h3::after {
     /* アクセントの下線を追加 */
     content: "";
     display: block;
-    width: 60px;
+    width: auto;
     height: 2px;
     background: var(--color-accent);
     margin-top: 0.4rem;
@@ -339,12 +338,12 @@
 
 /* 段落・リスト */
 .markdown-body p {
-    margin: 1.5rem 0;
+    margin: 1rem 0;
 }
 .markdown-body ul,
 .markdown-body ol {
     padding-left: 1.5rem;
-    margin: 1.5rem 0;
+    margin: 0rem 0;
 }
 .markdown-body ul {
     list-style: disc;
@@ -353,7 +352,7 @@
     list-style: decimal;
 }
 .markdown-body li {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.1rem;
     padding-left: 0.2rem;
 }
 .markdown-body li::marker {
@@ -433,7 +432,7 @@
 
 .markdown-body pre {
     position: relative;
-    background: #0d1117; /* GitHub Dark Dimmed 風 */
+    background: #0d1117;
     padding: 1.25rem;
     border-radius: var(--radius-md);
     overflow-x: auto;
@@ -443,11 +442,230 @@
     border: 1px solid var(--color-border);
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
 }
-.markdown-body pre code {
+
+/* コードブロック上部に表示する言語ラベルと Mermaid 用コンテナ */
+.code-block {
+    position: relative;
+    margin: 1rem 0;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: inherit;
+    border: 1px solid var(--color-border);
+}
+
+/* 言語ラベル（右上） */
+.code-block .code-header {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.45);
+    color: #fff;
+    padding: 0.18rem 0.5rem;
+    font-size: 12px;
+    line-height: 1;
+    border-radius: 4px;
+    z-index: 2;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    display: inline-flex;
+    align-items: center;
+}
+
+/* 言語アイコン */
+.code-header .lang-icon,
+.code-block .lang-icon {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    margin-right: 0.4rem;
+    line-height: 1;
+    vertical-align: middle;
+}
+
+/* ラベルテキスト */
+.code-header .lang-label {
+    display: inline-block;
+    font-weight: 600;
+    font-size: 12px;
+}
+
+/* code-block 内の pre を調整してヘッダー分の余白を確保 */
+.code-block pre {
+    margin: 0;
+    padding-top: 2.2rem; /* space for header */
     background: transparent;
-    padding: 0;
-    color: #c9d1d9; /* 標準的なコード色 */
     border-radius: 0;
+    overflow-x: auto;
+}
+
+/* 内部の code 要素はブロック表示にしてパディングを調整 */
+.code-block pre code {
+    display: block;
+    padding: 0.8rem 1rem 1rem 1rem;
+    background: transparent;
+}
+
+/* Mermaid コンテナラッパー（スクロールとドラッグ対応） */
+.mermaid-wrapper {
+    margin: 1.25rem 0;
+    overflow: hidden;
+    background: var(--color-panel);
+    cursor: grab;
+    /* JS制御のためブラウザ標準の操作を無効化 */
+    touch-action: none;
+    -webkit-overflow-scrolling: touch;
+    /* ページ全体へのオーバースクロール伝播を抑制（UX向上） */
+    overscroll-behavior: contain;
+    /* 図の選択を防ぐ（ドラッグ時の余分な選択を抑制） */
+    user-select: none;
+    /* 図の領域が分かるように枠・背景・陰影を付与 */
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 0.75rem;
+    box-shadow: var(--shadow-md);
+    position: relative;
+}
+.mermaid-wrapper:active {
+    cursor: grabbing;
+}
+.mermaid-wrapper .mermaid {
+    display: block;
+    /* transform を使う場合に備え、変換の起点と最適化を指定 */
+    transform-origin: 0 0;
+    will-change: transform;
+    transition: transform 180ms
+        cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.mermaid-wrapper .mermaid svg {
+    max-width: none;
+    width: auto;
+    display: block;
+    /* SVG 内のタッチアクションは個別に扱う（ピンチ操作はラッパーで処理） */
+    touch-action: none;
+    user-select: none;
+}
+
+/* Mermaid toolbar (右上に縦並び) */
+.mermaid-toolbar {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    /* 高いスタッキングで常にコンテンツより前面に表示 */
+    z-index: 9999;
+    /* 右端に寄せてボタン群がコンテンツの右上に揃うようにする */
+    align-items: flex-end;
+    /* ツールバー自身でポインターイベントを受け取る（親で無効化していたため有効化） */
+    pointer-events: auto;
+    /* レイヤーを分離してアニメーション時の描画安定化を助ける */
+    transform: translateZ(0);
+}
+.mermaid-toolbar .btn {
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    /* 少し濃いめの背景で見やすくする（ダーク/ライト両対応の調整はここで可能） */
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: var(--shadow-sm);
+    cursor: pointer;
+    transition:
+        transform 120ms ease,
+        background 120ms ease;
+    font-size: 14px;
+    /* ボタンを前面にしてクリックを確実化 */
+    position: relative;
+    z-index: 10000;
+}
+.mermaid-toolbar .btn:hover {
+    transform: translateY(-2px);
+    background: rgba(0, 0, 0, 0.75);
+}
+.mermaid-toolbar .btn:active {
+    transform: translateY(0);
+}
+
+/* Scale badge */
+.mermaid-toolbar .scale-badge {
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    height: 28px;
+    padding: 0 8px;
+    border-radius: 14px;
+    background: rgba(0, 0, 0, 0.45);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+/* Mermaid 内タイトルの見やすさ改善 */
+.mermaid-wrapper .mermaid svg text.title,
+.mermaid-wrapper .mermaid svg .title,
+.mermaid-wrapper .mermaid svg .label {
+    fill: var(--color-heading);
+    font-weight: 700;
+    font-size: 1.05em;
+    paint-order: stroke fill;
+    stroke: rgba(0, 0, 0, 0.02);
+    stroke-width: 0.4px;
+}
+
+/* mermaid SVG 最大高さの制限（縦長すぎるのを防ぐ） */
+.mermaid-wrapper {
+    max-height: 60vh;
+    overflow: auto;
+}
+
+/* SVG 本体にも制限をかけて縦長表示を防ぐ（アスペクトを維持） */
+.mermaid-wrapper .mermaid svg {
+    max-height: 120vh;
+    height: auto;
+    max-width: 100%;
+    display: block;
+    box-sizing: content-box;
+}
+
+/* small responsive tweaks */
+@media (max-width: 680px) {
+    .mermaid-toolbar {
+        top: 6px;
+        right: 6px;
+        gap: 6px;
+    }
+    .mermaid-toolbar .btn {
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        font-size: 13px;
+    }
+    .mermaid-toolbar .scale-badge {
+        min-width: 40px;
+        height: 24px;
+        font-size: 11px;
+    }
+}
+
+/* モバイルでヘッダーが重ならないように調整 */
+@media (max-width: 680px) {
+    .code-block .code-header {
+        top: 6px;
+        right: 6px;
+        font-size: 11px;
+        padding: 0.12rem 0.4rem;
+    }
+    .code-block pre {
+        padding-top: 2rem;
+    }
 }
 
 /* 画像 */