/* ---------- brand ---------- */
:root{
  --brand:#0b157a;
  --brand-weak:#cfd0e6;
  --ink:#111;
  --bg:#fff;
  --accent:#2bb5a1;
  --sm-line:1.6rem;
}

/* 本文 */
body{color:var(--ink);background:var(--bg);line-height:1.85;}

/* ---------- グローバルヘッダー（sticky） ---------- */
.header{
  position: sticky; top: 0; z-index: 100; background:#f5f6f8;
  border-bottom:2px solid var(--brand); box-shadow:0 2px 6px rgba(0,0,0,.06);
  overflow: visible; /* ← 展開が見切れない */
}
.fixed-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0; padding-right:280px;} /* 検索分の余白 */
@media (max-width:768px){ .fixed-table{ padding-right:280px; } }
@media (min-width: 900px){
  .fixed-table{
    width: auto;                                  /* 100%をやめる */
    max-width: calc(100% - 450px);/* 右端の検索ぶんを差し引く */
    display: block;                                /* max-width を効かせる */
    overflow-x: auto;                              /* 横スクロールはテーブルに */
    -webkit-overflow-scrolling: touch;
    padding-right: 0;                              /* 右パディングは不要 */
  }
  .fixed-table thead{ display: table; width: auto; }
  .fixed-table th{ white-space: nowrap; }          /* ボタンの折返し防止 */
}

.fixed-table th{vertical-align:top;text-align:left;padding:.25rem .5rem;border-right:1px solid #e5e7eb}
.fixed-table th:last-child{border-right:none}
.header thead tr{background:#f5f6f8;border-bottom:1px solid #e5e7eb}
.header details{margin:.25rem 0; position:relative; z-index:90;}
.header a{text-decoration:none;border-bottom:1px dotted rgba(0,0,0,.25);}
.header a:hover{border-bottom-color:var(--brand);}

/* トップレベル summary = ボタン風 */
.header th > details > summary{
  display:inline-block; cursor:pointer;
  padding:.4rem .75rem; margin:.25rem .35rem;
  border:1px solid #d9dde5; border-radius:.45rem;
  background:#fff; color:#204db3; font-weight:700;
}
.header th > details[open] > summary{
  background:#eaf0ff; border-color:#c4d2f7; color:#0b157a;
}

/* 下位 summary = ▶ プルダウン風 */
.header ul.gnav, .header .index{list-style:none;margin:.25rem 0 0;padding-left:1rem}
.header ul.gnav > details > summary{
  display:flex; align-items:center; gap:.4rem;
  padding:.2rem 0; margin:.15rem 0; cursor:pointer;
  border:0; background:transparent; color:#333; font-weight:700;
}
.header ul.gnav > details > summary::before{
  content:"▸"; color:#0b157a; transition:transform .2s ease;
}
.header ul.gnav > details[open] > summary::before{ transform:rotate(90deg); }

/* サイトマップのプルダウン: 10行で打ち止め＋中だけスクロール */
.header details > ul,
.header details > .index,
.header details > .gnav{
  max-height: calc(var(--sm-line) * 10);
  min-width: 200px;
  max-width: 400px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid #e5e7eb; border-radius:.5rem;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:.5rem .75rem; margin-top:.35rem;
}
.header ul.gnav > details > ul,
.header ul.gnav > details > .index{
  max-height: calc(var(--sm-line) * 10);
  overflow:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid #e5e7eb; border-radius:.4rem;
  padding:.4rem .6rem; margin:.35rem 0 .25rem .25rem;
}
@media (max-width:768px){
  .header details > ul,
  .header details > .index,
  .header ul.gnav > details > ul,
  .header ul.gnav > details > .index{
    max-height:min(60vh, calc(var(--sm-line) * 10));
  }
}
/* スクロールバー控えめ */
.header details ul::-webkit-scrollbar{width:8px}
.header details ul::-webkit-scrollbar-thumb{background:#c8d0e6;border-radius:8px}
.header details ul{scrollbar-width:thin;scrollbar-color:#c8d0e6 transparent}

/* 右端検索：タイトルも横並びで */
.header-search-fixed{
  position:absolute; right:12px; top:8px; z-index:110;
  display:flex; align-items:center; gap:.65rem;
}
.header-search-fixed .site-title{
  font-weight:800; color:#0b157a; white-space:nowrap;
}

/* 入力と結果 */
.header-search-fixed #search-input{
  width:240px; max-width:38vw;
  padding:.35rem .55rem; font-size:.9rem;
  border:1px solid #e5e7eb; border-radius:.45rem; background:#fff;
}
.header-search-fixed #search-results{
  position:absolute; right:0; top:calc(100% + .35rem); z-index:120;
  min-width:240px; max-width:60vw;
  margin:0; background:#fff; border:1px solid #e5e7eb; border-radius:.5rem;
  padding:.35rem .5rem;
  max-height:min(60vh, 520px);       /* ← PC でも上限高さ */
  overflow-y:auto;                   /* ← 常に縦スクロール許可 */
  overflow-x:hidden;
  overscroll-behavior:contain;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.header-search-fixed #search-results[hidden]{ display:none; }
.header-search-fixed #search-results .hits{ list-style:none; margin:0; padding:0; }
.header-search-fixed #search-results li{ margin:.25rem 0; }
.header-search-fixed #search-results a{ text-decoration:none; color:#0b157a; }
.header-search-fixed #search-results .s{ font-size:.85rem; color:#444; opacity:.9; }

@media (max-width:768px){
  .header-search-fixed{ position:static; padding:.4rem .5rem; }
  .header-search-fixed #search-results{ position:static; max-width:100%; }
}

/* 「目次」ラベル（右サイド） */
.toc-side-title{position:relative;padding-left:1.75rem;font-weight:800;margin:.25rem 0 .5rem;border-bottom:1px solid #e5e7eb;padding-bottom:.25rem;}
.toc-side-title::before{content:"📑";position:absolute;left:.25rem;top:50%;transform:translateY(-50%);font-size:1.1rem;opacity:.9}

/* ---------- H1 / H2 ---------- */
main{counter-reset:h1;}
main h1{counter-increment:h1;counter-reset:h2;}

h1{
  position:relative; margin:1.25rem 0 .75rem;
  padding:1.1rem 1rem 1.1rem 8.5rem;
  border:0; border-top:3px solid var(--brand); border-right:3px solid var(--brand); border-bottom:2px solid #e5e7eb;
  font-size:clamp(1.6rem,2.2vw,2.2rem); font-weight:800;
}
h1::before{
  content:""; position:absolute; left:.7rem; top:.5rem; bottom:.5rem;
  width:6.2rem; display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; font-weight:800; font-size:2.2rem;
}
h1::after{
  content:""; position:absolute; left:6.9rem; top:.5rem; bottom:.5rem; width:2rem;
  background:linear-gradient(75deg, var(--brand) 0 50%, transparent 50% 100%);
}

h2{
  position:relative; margin:1.2rem 0 .6rem; padding:.6rem 1rem;
  background:#cfd0e6; border-left:8px solid var(--brand); border-bottom:3px solid var(--brand);
  font-size:clamp(1.25rem,1.6vw,1.6rem); font-weight:800;
}

/* ---------- 情報ボックス ---------- */
.box{
  margin:1rem 0; padding:1rem 1.1rem;
  background:#f7fbff; border:2px solid #87d1e5; border-radius:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
}
.box .title{font-weight:800;color:#d53535;display:block;margin-bottom:.5rem;}
.box.note{background:#fffdf7;border-color:#f2cf66;}
.box.tip{ background:#f4fffb;border-color:#7ad9c2;}
.em-red{color:#d53535;font-weight:700;}

/* ---------- 本文幅/余白 ---------- */
main.content{max-width:1024px;margin:0 auto;padding:1rem;}
main p{margin:.6rem 0;}
main ul,main ol{margin:.5rem 0 .8rem 1.4rem}

/* ===================== レイアウト（本文 + 右TOC） ===================== */
#layout .page-wrap{
  max-width:1200px; margin:0 auto; padding:0 1rem;
  display:grid; grid-template-columns:1fr; gap:1.25rem;
}
@media (min-width:1100px){
  #layout .page-wrap{ grid-template-columns:minmax(0,1fr) 300px; }
}

/* コンテンツ列：横はみ出しは列の中で止める（右TOCは影響なし） */
#layout .content{min-width:0;max-width:100%;overflow-x:hidden;position:relative;}

/* 画像/表/コードは個別で横スクロール許可 */
img, video { max-width:100%; height:auto; display:block; }
table{ display:block; max-width:100%; overflow-x:auto; }
pre{ max-width:100%; overflow:auto; }

/* 右サイド TOC（PCのみ表示、sticky） */
.toc-side{
  display:none; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.04); padding:.75rem .75rem 1rem; overflow:auto;
}
@media (min-width:1100px){
  .toc-side{ display:block; position:sticky; top:72px; height:calc(100vh - 120px); }
}

/* 目次リスト */
.toc-box{margin:.75rem 0 1rem;padding:.75rem 1rem;border:1px solid #e5e7eb;border-radius:10px;background:#fafcff;}
.toc-list{list-style:none;padding-left:.25rem;margin:0;}
.toc-list>li{margin:.35rem 0;}
.toc-list a{text-decoration:none;color:#0b157a;border-bottom:1px dashed rgba(11,21,122,.35);}
.toc-list a:hover{border-bottom-color:#0b157a;}
.toc-list li ul{list-style:none;margin:.25rem 0 .35rem .9rem;padding-left:0;border-left:2px solid rgba(11,21,122,.15);padding-left:.6rem;}

/* ===================== MathJax：数式だけ横スクロール ===================== */
.math-scroll{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position;}
.math-scroll mjx-container[display="true"]{display:inline-block;max-width:none;padding:.25rem 0;}
.math-scroll mjx-container[display="true"] mjx-math{white-space:nowrap;}
mjx-container{max-width:100%;}
mjx-container:not([display="true"]){max-width:100%;}

details summary{ cursor:pointer; }
details[open]{ padding-bottom:.25rem; }
details pre{ margin:.5rem 0; }

/* 最終更新 */
.article-head{ position:relative; }
.last-updated{ font-size:.85rem; color:#6b7280; margin-top:.2rem; }
@media (max-width:768px){
  .last-updated{ position:static; display:block; text-align:right; margin-top:.25rem; }
}

/* 検索なし時のメッセージ */
.nohit{ padding:.5rem .45rem; color:#666; }

.site-title {
  font-weight:800;
  font-size:1.05rem;
  color:#0b157a;
  text-decoration:none; /* 下線なし */
  margin-right:.75rem;
}
.site-title:hover {
  color:#204db3;
  text-decoration:underline;
}

.contact-form {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.contact-form label {
  font-weight: 600;
}
.contact-form input,
.contact-form textarea {
  padding: .6rem .8rem;
  border: 1px solid #d1d5db;
  border-radius: .45rem;
  font-size: .95rem;
  width: 100%;
}
.contact-form button {
  padding: .7rem 1rem;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: .45rem;
  cursor: pointer;
}
.contact-form button:hover {
  background: #1522b5;
}

/* ===== blockquote ===== */
blockquote{
  background:#f9f9fb; margin:1rem 0; padding:.6rem 1rem;
  color:#444; font-style:italic;
}
blockquote p{ margin:.3rem 0; }

/* ===== inline code ===== */
p code, li code, td code, th code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code{
  display:inline; padding:.1em .25em; background:#f3f4f6;
  border:1px solid #e5e7eb; border-radius:.25rem; font-size:.95em;
}

/* ===== code block (Rouge) ===== */
.highlight{
  background:#616161; color:#e6e6e6;
  overflow:auto;               /* 横スクロール */
  padding:.25rem;            /* 上下だけ薄く */
}
.highlight pre{ margin:0; }    /* 余白をゼロに */
.highlight code{
  -webkit-text-size-adjust:none; text-size-adjust:none; /* iOS拡大停止 */
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px; line-height:1.55;
}

/* 行番号テーブル（Rougeのデフォ出力） */
.highlight table{ border-spacing:0; width:100%; }
.highlight td{ padding:0; vertical-align:top; }

/* ← “pre”に余白を入れる（ここに効かせるのがコツ） */
.highlight td.gutter > pre { 
  padding: 0 .85rem 0 .35rem !important;  /* 右側にゆとり */
}

.highlight td.code > pre { 
  padding: 0 .9rem 0 .75rem !important;   /* 左側にもゆとり */
}
.highlight .gutter{
  color:#9ca3af; user-select:none; text-align:right; opacity:.85;
  border-right:1px solid rgba(255,255,255,.18);
  padding:0 .9rem 0 .4rem;     /* 数字側の余白 */
}
.highlight .code{ padding:0 .8rem; } /* 本文左右の余白 */

@media (max-width: 768px){
  .highlight td.gutter { width: 2.6em; }
  .highlight td.gutter > pre { padding: 0 1rem 0 .4rem !important; }
  .highlight td.code   > pre { padding: 0 1rem 0 .85rem !important; }
}

/* ---- Rouge token colors (必要最小限) ---- */
.highlight .c,.highlight .c1,.highlight .cm{ color:#9ca3af; font-style:italic; } /* コメント */
.highlight .k,.highlight .o{ color:#93c5fd; }                                   /* keyword, operator */
.highlight .nf{ color:#a7f3d0; }                                                /* 関数名 */
.highlight .nn,.highlight .nc{ color:#fde68a; }                                 /* 名前空間/クラス */
.highlight .na{ color:#fca5a5; }                                                /* 属性名 */
.highlight .nt{ color:#60a5fa; }                                                /* タグ名 */
.highlight .m,.highlight .mi{ color:#fcd34d; }                                   /* 数値 */
.highlight .s,.highlight .s1,.highlight .s2{ color:#86efac; }                   /* 文字列 */
.highlight .bp{ color:#e5e7eb; }
.highlight .gd{ background:#7f1d1d; color:#fee2e2; }
.highlight .gi{ background:#064e3b; color:#d1fae5; }

/* 言語プリフィクス（保険） */
pre.highlight, code.language-python, code.language-javascript, code.language-bash { color: inherit; }

/* ================= 行番号とコードの間隔を“必ず”空ける ================= */

/* 1) Rouge が <span class="lineno"> を各行の前に置く（プレフィックス）パターン */
.highlight .lineno{
  display: inline-block;     /* 数字を“箱”にする */
  width: 2.4em;              /* 桁ぶんの横幅を確保（2〜3桁対応） */
  text-align: right;
  margin-right: .7rem;       /* ← ここがコードとの“すき間” */
  padding-right: .45rem;     /* 見切れ防止の余白 */
  border-right: 1px solid rgba(255,255,255,.18); /* 仕切り（任意） */
  opacity: .7;
  user-select: none;
}
@media (max-width:768px){
  .highlight .lineno{ width: 2.8em; margin-right: .8rem; padding-right: .55rem; }
}

/* 2) Rouge が <table class="rouge-table"> で行番号列を作る（gutter）パターン */
.highlight td.gutter{
  width: 2.4em;
  text-align: right;
  color: #9ca3af;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.18);
}
.highlight td.gutter > pre { padding: 0 .85rem 0 .35rem !important; }
.highlight td.code   > pre { padding: 0 .9rem  0 .75rem !important; }
@media (max-width:768px){
  .highlight td.gutter{ width: 2.8em; }
  .highlight td.gutter > pre { padding: 0 1rem 0 .4rem !important; }
  .highlight td.code   > pre { padding: 0 1rem 0 .85rem !important; }
}