/* mdBook カスタムテーマ
   catppuccin.css (latte) の変数を上書きして使う。
   ライト配色固定・本文の読みやすさ優先。 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
    --font-sans:
        "Inter", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
    --font-display:
        "Space Grotesk", "Zen Kaku Gothic New", "Inter", -apple-system,
        BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
    --font-mono:
        "JetBrains Mono", "Cascadia Mono", "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --accent: #0e7490;
    --radius: 8px;
    --content-max: 780px;

    /* サイトのモチーフ：矩形波の中に 1 本だけ細いパルス（グリッチ）が
       アクセント色で混ざった波形。区切り線と記事末尾に使う。 */
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='14' viewBox='0 0 220 14'%3E%3Cpath d='M0 12H14V2H28V12H42V2H56V12H70V2H84V12H98' fill='none' stroke='%2394a3b8' stroke-width='1.5'/%3E%3Cpath d='M98 12V2H103V12H108' fill='none' stroke='%230e7490' stroke-width='1.5'/%3E%3Cpath d='M108 12H122V2H136V12H150V2H164V12H178V2H192V12H206V2H220' fill='none' stroke='%2394a3b8' stroke-width='1.5'/%3E%3C/svg%3E");

    /* サイドバーのリサイズハンドルは使わない */
    --sidebar-resize-indicator-width: 0px;
}

/* ---------------------------------------------------------
   配色 — ほぼ白のスレート背景・濃紺の文字・深いシアンのアクセント
   --------------------------------------------------------- */

.latte {
    --bg: #f8fafc;
    --fg: #0f172a;
    --sidebar-bg: #f1f5f9;
    --sidebar-fg: #0f172a;
    --sidebar-non-existant: #94a3b8;
    --sidebar-active: #0e7490;
    --sidebar-spacer: #e2e8f0;
    --scrollbar: #cbd5e1;
    --icons: #64748b;
    --icons-hover: #0e7490;
    --links: #0e7490;
    --inline-code-color: #0e7490;
    --theme-hover: #f1f5f9;
    --quote-bg: #f1f5f9;
    --quote-border: #0e7490;
    --table-border-color: #e2e8f0;
    --table-header-bg: #f1f5f9;
    --table-alternate-bg: #f3f6fb;
    --searchbar-border-color: #e2e8f0;
    --search-mark-bg: #0891b2;
    --color-scheme: light;
}

/* ---------------------------------------------------------
   ベース
   --------------------------------------------------------- */

body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 和文の詰め・禁則・長い識別子の折り返し */
    font-feature-settings: "palt" 1;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------
   本文レイアウト
   --------------------------------------------------------- */

.content {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.content main {
    padding-top: 1rem;
    padding-bottom: 4rem;
}

.content p,
.content ul,
.content ol {
    margin: 1.1rem 0;
}

.content p,
.content li {
    text-wrap: pretty;
}

.content li {
    margin: 0.35rem 0;
}

/* ---------------------------------------------------------
   見出し
   ルートは 10px なので rem 指定（h1: 30px 〜 h5: 本文サイズ）
   --------------------------------------------------------- */

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font-family: var(--font-display);
    font-feature-settings: "palt" 1;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.02em;
    scroll-margin-top: 4.5rem;
    text-wrap: balance;
}

.content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0.5rem 0 1.75rem;
    letter-spacing: -0.03em;
}

.content h2 {
    font-size: 2.4rem;
    margin: 3rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}

.content h3 {
    font-size: 2rem;
    margin: 2.25rem 0 0.75rem;
}

.content h4 {
    font-size: 1.8rem;
    margin: 1.75rem 0 0.5rem;
}

.content h5 {
    font-size: 1.7rem;
    margin: 1.5rem 0 0.5rem;
}

.content h6 {
    font-size: 1.7rem;
    font-style: italic;
    opacity: 0.85;
    margin: 1.25rem 0 0.5rem;
}

.content a.header {
    color: inherit;
    text-decoration: none;
}

/* ホバーで「#」アンカーを出す */
.content :is(h1, h2, h3, h4) a.header::after {
    content: "#";
    margin-left: 0.4em;
    color: var(--accent);
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.content :is(h1, h2, h3, h4):hover a.header::after {
    opacity: 0.55;
}

.content :is(h1, h2, h3, h4) a.header:hover::after {
    opacity: 1;
}

/* ---------------------------------------------------------
   リンク
   --------------------------------------------------------- */

.content a:not(.header):not(.mobile-nav-chapters):not(.nav-chapters) {
    color: var(--links);
    text-decoration: none;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1.5px;
}

.content a:not(.header):not(.mobile-nav-chapters):not(.nav-chapters):hover {
    text-decoration: underline;
}

/* 外部リンクには ↗ を付ける（mdBook 内部リンクは相対パス） */
.content a[href^="http"]:not(:has(img))::after {
    content: "↗";
    font-size: 0.75em;
    margin-left: 0.15em;
    vertical-align: 0.2em;
    color: color-mix(in srgb, var(--links) 70%, transparent);
}

/* ---------------------------------------------------------
   コード
   --------------------------------------------------------- */

.content code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 0.1em 0.4em;
    border-radius: 5px;
    background: color-mix(in srgb, var(--fg) 6%, transparent);
}

.content pre {
    /* rem だとルート 10px 基準で小さすぎるため em 指定 */
    font-size: 0.9em;
    line-height: 1.7;
    padding: 1.25rem 1.4rem;
    margin: 1.75rem 0;
    border: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--fg) 5%, var(--bg));
    overflow-x: auto;
}

.content pre > code {
    font-family: var(--font-mono);
    font-size: 1em;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* コードブロック直前の <div class="code-filename">path</div> でファイル名を表示 */
.code-filename {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8em;
    padding: 0.35rem 0.85rem;
    background: var(--quote-bg);
    color: var(--fg);
    opacity: 0.8;
    border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -1px;
}

.code-filename + pre {
    border-top-left-radius: 0;
    margin-top: 0;
}

/* ---------------------------------------------------------
   サイドバー — ハンバーガーから開くオーバーレイ
   --------------------------------------------------------- */

.sidebar {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    line-height: 1.7;
    z-index: 1000;
    background: #fff;
    border-right: 1px solid var(--table-border-color);
}

.sidebar .sidebar-scrollbox {
    padding: 1.6rem 1.2rem 2rem;
}

.sidebar .sidebar-scrollbox::before {
    content: "目次";
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: color-mix(in srgb, var(--fg) 45%, transparent);
    padding: 0 0.85rem 0.9rem;
    border-bottom: 1px solid var(--table-border-color);
    margin-bottom: 0.9rem;
}

.chapter li.chapter-item {
    line-height: 1.5;
    margin: 0;
}

.chapter li a,
.chapter li .spacer {
    padding: 0.55rem 0.85rem;
    font-size: 1.35rem;
    color: var(--sidebar-fg);
}

.chapter li a:hover {
    color: var(--accent);
    text-decoration: none;
}

.chapter li a.active {
    color: var(--accent);
    font-weight: 600;
}

/* 章番号 */
.chapter li strong {
    font-family: var(--font-mono);
    font-size: 0.82em;
    font-weight: 500;
    opacity: 0.45;
    margin-right: 0.55rem;
    font-variant-numeric: tabular-nums;
}

/* 開いている章の見出し一覧 */
.sidebar .on-this-page {
    border-inline-start: none;
    margin-left: 0.85rem;
    padding-left: 0.85rem;
    font-size: 0.9em;
}

.sidebar .on-this-page a {
    color: color-mix(in srgb, var(--sidebar-fg) 55%, transparent);
}

.sidebar .on-this-page a:hover,
.sidebar .on-this-page a.current-header {
    color: var(--accent);
}

/* リサイズハンドルは非表示（DOM は book.js が参照するので残す） */
.sidebar .sidebar-resize-handle,
.js .sidebar .sidebar-resize-handle {
    display: none !important;
}

/* 開いてもページを押し出さず、上に重ねる */
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
    transform: none !important;
    margin-inline-start: 0 !important;
}

/* 背面を薄く暗くし、クリックで閉じる */
#mdbook-sidebar-backdrop {
    display: none;
}

#mdbook-sidebar-toggle-anchor:checked ~ #mdbook-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: color-mix(in srgb, #0f172a 22%, transparent);
    cursor: pointer;
}

/* ---------------------------------------------------------
   メニューバー
   --------------------------------------------------------- */

#mdbook-menu-bar.menu-bar {
    background: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}

.menu-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--fg);
    opacity: 1;
}

/* ワードマークの反転文字（custom.js が 1 文字を .bitflip で包む） */
.menu-title .bitflip {
    background: var(--fg);
    color: var(--bg);
    padding: 0 0.05em;
}

.icon-button {
    border-radius: 5px;
}

.icon-button:hover {
    background: var(--theme-hover);
    color: var(--icons-hover);
}

/* ---------------------------------------------------------
   表
   --------------------------------------------------------- */

.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.content table th,
.content table td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--table-border-color);
    text-align: left;
}

.content table th {
    font-weight: 600;
    background: transparent;
    border-bottom: 2px solid var(--table-border-color);
}

.content table tr:last-child td {
    border-bottom: none;
}

/* ---------------------------------------------------------
   引用と GFM アラート（> [!NOTE] など）
   --------------------------------------------------------- */

.content blockquote {
    margin: 1.5rem 0;
    padding: 0.2rem 0 0.2rem 1.25rem;
    border: none;
    border-left: 2px solid color-mix(in srgb, var(--fg) 18%, transparent);
    border-radius: 0;
    color: color-mix(in srgb, var(--fg) 65%, var(--bg));
    background: transparent;
}

.content blockquote p:first-child {
    margin-top: 0;
}
.content blockquote p:last-child {
    margin-bottom: 0;
}

blockquote.blockquote-tag {
    border-left: 2px solid var(--fg);
    border-image: none;
    padding: 0.6rem 1.25rem;
    margin: 1.5rem 0;
    background: transparent;
    border-radius: 0;
    color: var(--fg);
}

.blockquote-tag-title {
    font-size: 0.9em;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.blockquote-tag-title svg {
    display: none;
}

.blockquote-tag-note {
    border-left-color: #0e7490;
}
.blockquote-tag-note .blockquote-tag-title {
    color: #0e7490;
}

.blockquote-tag-tip {
    border-left-color: #15803d;
}
.blockquote-tag-tip .blockquote-tag-title {
    color: #15803d;
}

.blockquote-tag-important {
    border-left-color: #7e22ce;
}
.blockquote-tag-important .blockquote-tag-title {
    color: #7e22ce;
}

.blockquote-tag-warning {
    border-left-color: #b45309;
}
.blockquote-tag-warning .blockquote-tag-title {
    color: #b45309;
}

.blockquote-tag-caution {
    border-left-color: #b91c1c;
}
.blockquote-tag-caution .blockquote-tag-title {
    color: #b91c1c;
}

/* ---------------------------------------------------------
   画像・罫線
   --------------------------------------------------------- */

.content img {
    max-width: 100%;
    height: auto;
    border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    border-radius: var(--radius);
    margin: 1.25rem auto;
    display: block;
}

/* 画像直後の斜体をキャプションとして中央に */
.content img + em,
.content p > img + em {
    display: block;
    text-align: center;
    margin-top: 0.4rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
    font-style: italic;
}

/* 水平線（---）は波形モチーフで描く */
.content hr {
    border: none;
    height: 14px;
    background: var(--wave) center / auto 14px no-repeat;
    margin: 3rem 0;
}

/* ---------------------------------------------------------
   ページ送り
   mdBook 標準の画面端の矢印は消し、ページ下部のカードで前後移動する
   --------------------------------------------------------- */

.nav-wide-wrapper,
.nav-wrapper {
    display: none !important;
}

.bottom-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3.5rem;
}

/* 記事末尾の区切りは罫線ではなく波形 */
.bottom-nav::before {
    content: "";
    flex-basis: 100%;
    height: 14px;
    background: var(--wave) center / auto 14px no-repeat;
    margin-bottom: 1rem;
}

.bottom-nav .bottom-nav-link {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    padding: 0.85rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    border-radius: var(--radius);
    color: var(--fg);
    text-decoration: none;
}

.bottom-nav .bottom-nav-link.next {
    justify-content: flex-end;
    text-align: right;
}

.bottom-nav a.bottom-nav-link:hover {
    border-color: var(--accent);
    text-decoration: none;
}

/* 片方向しかないときの位置合わせ用 */
.bottom-nav .bottom-nav-link.placeholder {
    border: none;
    background: none;
    pointer-events: none;
}

.bottom-nav .bottom-nav-dir {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
}

/* ---------------------------------------------------------
   トップに戻るボタン（表示制御は custom.js）
   --------------------------------------------------------- */

#back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid color-mix(in srgb, #000 12%, transparent);
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s linear;
}

#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

#back-to-top:hover {
    background: color-mix(in srgb, var(--accent) 85%, #000);
}

#back-to-top svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* ---------------------------------------------------------
   その他
   --------------------------------------------------------- */

kbd {
    font-family: var(--font-mono);
    background: var(--quote-bg);
    border: 1px solid var(--table-border-color);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.85em;
}

.content details {
    margin: 1.25rem 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--table-border-color);
    border-radius: var(--radius);
}

.content details summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.3rem 0;
}

.content details[open] {
    padding-bottom: 0.75rem;
}

.skip-to-content {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: var(--bg);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-to-content:focus {
    top: 0.75rem;
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 細いスクロールバー */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 999px;
}

/* ---------------------------------------------------------
   表紙（src/cover.md）
   タイトル・概要・目次だけのシンプルな扉ページ
   --------------------------------------------------------- */

.content:has(.cover) main {
    padding-top: 0;
}

.content:has(.cover) .bottom-nav {
    display: none;
}

/* 表紙自体はサイドバーの目次に出さない */
.chapter li.chapter-item:has(> .chapter-link-wrapper > a[href$="cover.html"]),
.chapter li.chapter-item:has(> a[href$="cover.html"]) {
    display: none;
}

.cover {
    min-height: calc(100dvh - 11rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 0 2rem;
}

.cover-title {
    margin: 0 0 2rem;
    font-size: clamp(3.2rem, 5.5vw, 4.8rem);
    line-height: 1.25;
}

.cover-toc {
    padding-top: 2.4rem;
    border-top: 1px solid var(--table-border-color);
}

.content .cover-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cover-toc;
    columns: 2;
    column-gap: 4.5rem;
}

.content .cover-toc li {
    counter-increment: cover-toc;
    margin: 0;
    padding: 0.5rem 0;
    break-inside: avoid;
    font-size: 1.6rem;
}

.content .cover-toc li::before {
    content: counter(cover-toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.82em;
    color: color-mix(in srgb, var(--fg) 40%, transparent);
    margin-right: 1em;
    font-variant-numeric: tabular-nums;
}

/* 本文リンク色より地の色を優先（ベースのリンク規則より詳細度が
   低いので !important で上書き） */
.content .cover-toc a {
    color: var(--fg) !important;
    text-decoration: none !important;
}

.content .cover-toc a:hover {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.25em;
}

/* 表紙フッター：著者リンクと注記を控えめに */
.cover-foot {
    margin-top: 4rem;
    font-size: 1.25rem;
    color: color-mix(in srgb, var(--fg) 42%, transparent);
}

.content .cover-foot a {
    color: inherit !important;
    text-decoration: none !important;
}

.content .cover-foot a:hover {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 0.25em;
}

.cover-foot-note::before {
    content: "・";
    margin: 0 0.5em;
}

/* ---------------------------------------------------------
   モバイル
   --------------------------------------------------------- */

@media (max-width: 1080px) {
    body {
        font-size: 16px;
    }

    .content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .content h1 {
        font-size: 2.6rem;
    }
    .content h2 {
        font-size: 2.1rem;
    }
    .content h3 {
        font-size: 1.8rem;
    }

    .content pre {
        padding: 1rem 1.1rem;
    }
}

@media (max-width: 700px) {
    .bottom-nav {
        flex-direction: column;
    }
    .bottom-nav::before {
        flex-basis: auto;
        width: 100%;
    }
    .bottom-nav .bottom-nav-link.placeholder {
        display: none;
    }

    .cover {
        padding-top: 2rem;
        justify-content: flex-start;
    }
    .content .cover-toc ol {
        columns: 1;
    }
}