/* @import must always be at the top of your publish.css file */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
  --font-text-theme: "Noto Sans JP", sans-serif;
  --font-interface-theme: "Noto Sans JP", sans-serif;
}

.published-container {
  --page-title-font: "Noto Sans JP", sans-serif;
}

/* ==========================================
   1. ページ全体の配置（PCでの上部余白をvhで最適化）
========================================== */
.top-page.markdown-rendered {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 10vh 20px 5vh 20px !important; /* 上の余白を画面の10%に設定し、自然な文書のバランスに */
    box-sizing: border-box !important;
}

/* ==========================================
   2. リンクの統一と見出しアイコンの非表示
========================================== */
/* 通常のリンク（トップページ用） */
.top-page.markdown-rendered a,
.top-page.markdown-rendered a.internal-link,
.top-page.markdown-rendered a.internal-link.is-unresolved {
    color: #333 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}
.top-page.markdown-rendered a:hover {
    text-decoration: underline !important;
}

/* ==========================================
   3. テーブル（表）を箱型グリッドに変換
========================================== */
.top-page.markdown-rendered thead {
    display: none !important;
}
.top-page.markdown-rendered table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 15px !important;
    border: none !important;
    margin: 0 0 40px 0 !important; /* タイルから下の水平線までの距離（上と完全対称） */
}
.top-page.markdown-rendered td {
    border: 1px solid #333 !important;
    padding: 0 !important;
    width: 33.33% !important;
    background: transparent !important;
}
.top-page.markdown-rendered td a,
.top-page.markdown-rendered td a.internal-link,
.top-page.markdown-rendered td a.internal-link.is-unresolved {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 110px !important;
    font-size: 24px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: background-color 0.2s !important;
}
.top-page.markdown-rendered td a:hover {
    background-color: #f0f0f0 !important;
    text-decoration: none !important; 
}

/* ==========================================
   4. ホームページ専用：水平線を黒色にする
========================================== */
.top-page.markdown-rendered hr {
    border: none !important;
    border-top: 2px solid #333 !important;
    background: transparent !important;
    margin: 0 0 40px 0 !important; /* 水平線から下のコールアウトまでの距離 */
}

/* ==========================================
   5. スマホ表示時の最適化（1画面スクロールなし）
========================================== */
@media screen and (max-width: 480px) {
    /* 画面の高さにきっちり収めるためのベース設定 */
    body, html {
        overscroll-behavior-y: none !important; /* スマホ特有のバウンススクロールを無効化 */
    }
    .top-page.markdown-rendered {
        padding: 5vh 15px !important; 
        min-height: 100dvh !important; /* 最新スマホの画面枠に完全固定 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 縦幅が狭いスマホ時のみ画面中央に配置 */
    }

    /* 各セクション間の余白を圧縮して画面内に収める */
    .top-page.markdown-rendered h1:first-of-type {
        margin-bottom: 20px !important; 
    }
    .top-page.markdown-rendered table {
        margin: 0 0 20px 0 !important;
        border-spacing: 0 !important;
        display: block !important;
    }
    .top-page.markdown-rendered hr {
        margin: 0 0 20px 0 !important;
    }

    /* テーブルの2列化とタイルのサイズ圧縮 */
    .top-page.markdown-rendered tbody {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .top-page.markdown-rendered tr {
        display: contents !important;
    }
    .top-page.markdown-rendered td {
        width: 100% !important;
        display: block !important;
    }
    .top-page.markdown-rendered td a,
    .top-page.markdown-rendered td a.internal-link,
    .top-page.markdown-rendered td a.internal-link.is-unresolved {
        height: 75px !important; /* 押しやすさを保ちつつ高さを圧縮 */
        font-size: 20px !important;
    }
    
    /* コールアウト内の余白を微調整 */
    .top-page.markdown-rendered .callout {
        padding: 12px !important;
    }
}

/* ==========================================
   6. 全ページ共通：見出し（H1〜H6）の自動下線を消す
========================================== */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
    border-bottom: none !important;
}

/* ==========================================
   7. スマホ表示時の上部バー制御（トップページのみ表示）
========================================== */
@media screen and (max-width: 768px) {
    /* 1. 原則として、すべてのページでヘッダーを完全に非表示にする */
    .site-header {
        display: none !important;
    }

    /* 2. 例外として、プロパティに「top-page」を持つトップページだけ表示させる */
    body:has(.top-page) .site-header {
        display: flex !important; 
    }
}

/* ==========================================
   8. コールアウトのカスタマイズ（アイコン非表示・グレー枠タイトル非表示）
========================================== */
/* 1. 全てのコールアウトのアイコンを一括で非表示にする */
.callout-icon {
    display: none !important;
}

/* 2. グレー枠（quote）のうち、「折り畳みではないもの」のタイトルだけを非表示にする */
.callout[data-callout="quote"]:not(.is-collapsible) .callout-title {
    display: none !important;
}

/* ==========================================
   9. コードブロックの背景色を水色に変更（編集モード対応）
========================================== */
/* 閲覧モード・Publish用 */
.markdown-rendered pre,
/* 編集モード（ライブプレビュー）用 */
.cm-s-obsidian .HyperMD-codeblock {
    background-color: #e8f4f8 !important; 
}

/* ==========================================
   10. 標準ハイライト（==）の色を紫に変更
========================================== */
mark, .cm-highlight {
    background-color: #f0e6fa !important; /* 背景色を薄紫に変更 */
    color: inherit !important;            /* 文字色は元のテキスト色をそのまま維持 */
}