/* zaslon.info スタイルシート
   旧WordPressテーマ Whity（zaslon.info で使用）のデザインを、この新システムの
   マークアップ（common/header.php・footer.php・sidebar.php・index.php）に移植したもの。

   Whity の骨格:
   - 灰色の地色(#E5E5E0)の上に、幅1100pxの明るい紙面(#F6F6F8)を左右1px罫で立てる
   - 見出しは「左の太い縦棒＋下罫」（h1=10px / h2=5px / h3=下罫のみ、色は#999）
   - ボタン・タグ・チップの類はすべて 背景#EEE / 枠1px #CCC / 角丸3px、hoverで#CCC
   - 装飾色は持たず、#111 の文字と灰色の罫だけで構成する

   原本から変えている点（読みやすさのため）:
   - 行間を1.6→1.85、段落・見出しの余白を字送りに合わせた比率(em)で取り直した
   - 罫の濃さを役割で使い分けた（見出し#999 / 区切り#ddd / 枠#ccc）
   - 引用・表・コードの内側の余白を広げ、表は偶数行にごく薄い地色を敷いた
*/

/* 色はここだけ変えれば全体に反映される */
:root {
  --page-bg:     #E5E5E0;   /* 紙面の外側 */
  --paper:       #F6F6F8;   /* 紙面 */
  --text:        #111;
  --muted:       #777;      /* 日付・件数など補助情報 */
  --rule:        #999;      /* 見出しの罫・縦棒 */
  --rule-light:  #ddd;      /* 一覧の区切り線 */
  --border:      #ccc;      /* 枠線（ボタン・入力欄・引用） */
  --chip:        #EEE;      /* ボタン・タグの地色 */
  --chip-hover:  #CCC;      /* 同・hover */
  --tint:        #F0EFEB;   /* 引用・表の縞など、ごく薄い地色 */
  --link:        #1a5fb4;   /* 本文中のリンク */
}

/* ============ 基本 ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 100%;
  line-height: 1.85;           /* 和文主体なので原本(1.6)より広め */
  color: var(--text);
  background: var(--page-bg);
  text-align: justify;
  overflow-y: scroll;          /* ページ長で横位置がずれないよう常にスクロールバーを出す */
  overflow-wrap: anywhere;     /* 長いURL等での横スクロール防止 */
}

/* 両端揃えは地の文だけに効かせる。一覧行やメタ情報に効くと、折り返した行の
   文字間が間延びして読みにくくなるため左揃えに戻す。 */
.post-list, .post-meta, .entry-meta, .search-count,
.index-nav, .index-group > summary,
.sidebar, .entry ul, .entry ol { text-align: left; }

a { color: var(--text); }
a:hover { text-decoration: underline; }
/* 本文中のリンクだけは下線付きの青にして、地の文と区別する */
.entry a, .section-intro a, .snippet a { color: var(--link); text-decoration: underline; }

/* キーボード操作時に今どこにいるかが分かるように（マウス操作では出ない） */
:focus-visible { outline: 2px solid #555; outline-offset: 2px; }

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

hr {
  height: 1px; margin: 2em 0;
  border: none; border-top: 1px solid var(--border);
}

/* コード・表は内部スクロールにして画面の横スクロールを防ぐ */
pre {
  margin: 1.4em 0;
  padding: 0.9em 1.1em;
  background: var(--chip); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  line-height: 1.55; overflow-x: auto;
}
code {
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0;
  background: #EAEAE6; border-radius: 3px;
  padding: 0.1em 0.35em; font-size: 0.92em;
}
pre code { background: none; border: none; padding: 0; font-size: 1em; }

blockquote {
  margin: 1.6em 0;
  padding: 0.9em 1.3em;
  background: var(--tint);
  border: 1px solid #E2E0DA; border-left: 5px solid var(--border);
  color: #333;
}
/* 引用の中身は上下に余白を作らない（枠の内側の余白だけで見せる） */
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }

table {
  /* 幅の広い表は表自体を横スクロールさせる（display:block）。
     ただし width:fit-content を併せないと枠線が本文幅いっぱいに伸びてしまう。 */
  display: block; overflow-x: auto;
  width: fit-content; max-width: 100%; margin: 1.6em auto;
  border-collapse: collapse;
  border: 1px solid var(--rule);
  text-align: left; line-height: 1.6;
}
th, td { padding: 0.4em 0.9em; border: 1px solid var(--rule); }
th { font-weight: bold; background: #DDD; }
/* 行数の多い表を横に目で追えるように。縞は「あるとわずかに助かる」程度の濃さに留め、
   マウスで指した行だけはっきり出す。 */
tbody tr:nth-child(even) { background: #F4F3F0; }
tbody tr:hover { background: #E9E8E3; }

/* ============ 見出し ============
   左の縦棒の太さで階層を示す（Whity の h1/h2/h3 をそのまま踏襲）。
   下の余白より上の余白を大きく取り、見出しが次の本文に属して見えるようにする。 */
h1, .archive-title {
  margin: 0 0 0.7em;
  padding: 0 0 0.15em 0.5em;
  border: solid var(--rule); border-width: 0 0 1px 10px;
  font-size: 1.7rem; line-height: 1.4;
}
h2, .archive-subtitle {
  margin: 2em 0 0.6em;
  padding: 0 0 0.15em 0.5em;
  border: solid var(--rule); border-width: 0 0 1px 5px;
  font-size: 1.35rem; line-height: 1.4;
}
h3 {
  margin: 1.7em 0 0.5em;
  padding: 0 0 0.15em 0.5em;
  border: solid var(--rule); border-width: 0 0 1px;
  font-size: 1.15rem; line-height: 1.4;
}
h4, h5, h6 {
  margin: 1.5em 0 0.4em;
  padding: 0 0 0.1em 0.5em;
  border: solid var(--rule); border-width: 0 0 1px;
  font-size: 1.05rem; line-height: 1.4;
}
/* 本文・記事の先頭に来た見出しの上余白は不要 */
.entry > :first-child, .section-intro > :first-child, .content > :first-child { margin-top: 0; }

/* ============ ヘッダ・トップメニュー ============ */
.site-header { padding: 0; }
.site-title { margin: 0; padding: 0; line-height: 1.3; }
.site-title a {
  margin-left: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 60px; color: var(--text); text-decoration: none;
}
.site-title a:hover { text-decoration: none; }
.site-tagline {
  margin: 0;
  padding: 0 10px 8px;
  font-size: 90%; line-height: 1.5; color: #555;
}

.site-nav {
  margin: 0 5px 0 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.site-nav ul { list-style: none; margin: 0; padding: 0.15em 0; text-align: center; }
.site-nav li {
  display: inline-block;
  margin: 0 10px;
  font-size: 1.25rem; line-height: 1.6; letter-spacing: 2px;
}
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* ============ レイアウト（PC: 本文＋右サイドバーの2カラム） ============
   ヘッダ・本文・フッタを同じ幅・同じ地色・同じ左右罫にすることで、
   Whity の「1本の紙面が縦に通っている」見え方を再現する。 */
.site-header, .wrap, .site-footer {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--paper);
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
}
.wrap {
  display: flex;
  /* align-items は既定の stretch のまま。本文が短いページでも本文とサイドバーの
     区切り線（.content の右罫）が下まで通るようにするため。 */
  padding: 1.6em 0 0;
}
.content {
  flex: 1; min-width: 0;
  padding: 0 2.5em 2.5em;
  border-right: 1px solid var(--border);   /* 本文とサイドバーの区切り */
}
.sidebar { width: 230px; flex-shrink: 0; padding: 0 0.9em 2.5em; }

/* ============ 記事本文 ============ */
p { margin: 0 0 1.15em; }
.entry ul, .entry ol { margin: 0 0 1.15em; padding-left: 1.7em; }
.entry li { margin: 0.35em 0; }
.entry li > ul, .entry li > ol { margin: 0.35em 0 0; }
/* 図版は中央に置く。画像だけの行は markdown_to_html() が地の文から抜き出して
   <figure> にするので、原稿で画像を改行だけで地の文につないでいても中央に揃う。
   <caption> を書いた行だけが <figcaption> になり、画像と一緒に中央に乗る。 */
.entry figure { margin: 1.5em 0; text-align: center; }
.entry figcaption { margin-top: 0.4em; }
/* 原稿に生HTMLで <p><img></p> と書いた場合の保険（:has が無いブラウザでは左寄せ） */
.entry p:has(> img:only-child),
.entry p:has(> a:only-child > img:only-child) { text-align: center; margin: 1.5em 0; }

.entry-header h1 { margin-bottom: 0.5em; }
/* 日付・タグの帯（Whity の .blog_info） */
.entry-meta {
  margin: 0 0 2em;
  padding: 0.4em 0.7em;
  background: var(--chip);
  font-size: 0.85rem; line-height: 1.7; color: #444;
}
/* 初版・更新（front matter の date: / updated:）は縦に並べる */
.entry-meta .date-first, .entry-meta .date-updated { display: block; }
.entry-meta .tag, .post-meta .tag {
  display: inline-block;
  margin: 0.15em 0.3em 0.15em 0; padding: 0.05em 0.5em;
  background: var(--chip); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 3px;
  font-size: 0.9em; line-height: 1.6;
}
.entry-meta .tag:hover, .post-meta .tag:hover { background: var(--chip-hover); text-decoration: none; }

/* ============ 一覧 ============ */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
  padding: 0.6em 0.4em;
  border-bottom: 1px solid var(--rule-light);
  line-height: 1.6;   /* 一覧は地の文ほど行間を空けず、件数が見渡せる高さにする */
}
.post-list li:hover { background: var(--tint); }   /* 行単位で目を追えるように */
.post-list .post-link { color: var(--text); text-decoration: none; }
.post-list .post-link:hover { text-decoration: underline; }
.post-meta { margin-left: 0.7em; color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.snippet { margin: 0.3em 0 0; color: #666; font-size: 0.85em; line-height: 1.7; }
.search-count { color: #666; }

/* セクション一覧の冒頭に出すインデックスページ（config の 'index'） */
.section-intro { margin-bottom: 2.5em; }

/* ---- 目次表示の一覧（config の 'list_style' => 'index' / 'order' の章分け） ---- */
/* タイトルだけの詰めた行 */
.post-list-index { line-height: 1.6; }
.post-list-index li { padding: 0.3em 0.4em; border-bottom: none; }

/* 章へのジャンプリンク */
.index-nav { margin: 0 0 1.5em; font-size: 0.9em; }
.index-nav a {
  display: inline-block;
  margin: 0 0.4em 0.4em 0; padding: 0.15em 0.8em;
  background: var(--chip); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 3px;
}
.index-nav a:hover { background: var(--chip-hover); text-decoration: none; }

/* 章ブロックを多段組みにして縦の長さを抑える（幅に応じて2列以上）。
   grid ではなく段組み（multicol）にしているのは、章ごとの件数差があっても
   全体が均等な高さに分かれるため。章の途中で段が変わらないよう break-inside で止める。 */
.index-groups { column-width: 19em; column-gap: 2.5em; }
.index-group {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 1.6em;
}
.index-group > summary {
  cursor: pointer; list-style-position: inside;   /* 開閉の三角を見出しの帯の中に入れる */
  padding: 0.25em 0.4em; margin-bottom: 0.4em;
  background: var(--chip);
  border: solid var(--rule); border-width: 0 0 1px 8px;
  font-weight: bold;
}
.index-group > summary:hover { background: #E6E6E2; }
.index-group .count { color: var(--muted); font-weight: normal; font-size: 0.85em; }
/* ジャンプで飛んだ章が見出しごと見えるように余白を取る */
.index-group[id] { scroll-margin-top: 0.8em; }

/* ============ サイドバー ============ */
.sidebar section { margin-bottom: 1.8em; }
.sidebar h2 {
  margin: 0 0 0.6em;
  padding: 0.2em 0 0.2em 0.5em;
  background: var(--chip);
  border: solid var(--rule); border-width: 0 0 1px 8px;
  font-size: 1.1rem; line-height: 1.5;
}
.recent-posts, .link-list { list-style: none; margin: 0; padding: 0; font-size: 0.95em; }
.recent-posts li, .link-list li { border-bottom: 1px solid var(--rule-light); }
.recent-posts li:last-child, .link-list li:last-child { border-bottom: none; }
.recent-posts a, .link-list a {
  display: block;
  padding: 0.35em 0.4em;
  color: var(--text); text-decoration: none; border-radius: 3px;
  line-height: 1.6;
}
.recent-posts a:hover, .link-list a:hover { background: #E6E6E2; text-decoration: none; }
.recent-posts .date {
  display: block;
  padding: 0 0.4em 0.3em;
  color: var(--muted); font-size: 0.8em; text-align: right; line-height: 1.2;
}

.tag-cloud { margin: 0; }
.tag-cloud a {
  display: inline-block;
  margin: 0 0.35em 0.4em 0; padding: 0 0.4em;
  color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 3px;
  line-height: 1.8;
}
.tag-cloud a:hover { background: var(--chip-hover); text-decoration: none; }

/* ============ フォーム ============ */
.search-form { display: flex; gap: 0.4em; }
.search-form input[type="search"] {
  flex: 1; min-width: 0;
  padding: 0.4em 0.6em;
  border: 1px solid var(--border); border-radius: 3px;
  font: inherit; color: var(--text); background: #fff;
}
.search-form button {
  padding: 0.4em 0.9em;
  background: var(--chip); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  font: inherit; font-weight: bold; cursor: pointer;
}
.search-form button:hover { background: var(--chip-hover); }
.search-form-main { max-width: 480px; margin-bottom: 2em; }
select, textarea, input { font: inherit; }

/* ============ フッタ ============ */
.site-footer {
  clear: both;
  padding: 0 10px;
  line-height: 1.5;
}
.site-footer p {
  margin: 0; padding: 1em 0;
  border-top: 1px solid var(--border);
  text-align: center; color: #8A8A8A; font-size: 0.85rem;
}

/* ============ モバイル（〜768px） ============
   768px は index.php の章折りたたみスクリプト（matchMedia）と同じ値。変えるなら両方直すこと。 */
@media (max-width: 768px) {
  body { font-size: 108%; line-height: 1.8; letter-spacing: 0.02em; }

  /* 紙面の左右罫と幅の制限を外して全画面に広げる */
  .site-header, .wrap, .site-footer { max-width: 100%; border-left: none; border-right: none; }

  /* 1カラム化: サイドバー（メニュー）は本文の下＝フッタ領域へ移動 */
  .wrap { flex-direction: column; padding: 1em 0 0; }
  .content { width: 100%; padding: 0 1.1em 2em; border-right: none; }
  /* 本文の下に続くので、どこからがメニューなのか分かるよう罫で区切る */
  .sidebar {
    width: 100%; padding: 1.5em 1.1em 2em; text-align: center;
    border-top: 1px solid var(--border);
  }

  /* トップメニューをタッチ向けの2列ボタンに */
  .site-nav { margin: 0; border: none; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0 10px 0.6em; }
  .site-nav li {
    flex: 1 1 calc(50% - 0.5em);
    margin: 0; letter-spacing: 0;
    background: var(--chip);
    border: 1px solid var(--border); border-radius: 3px;
  }
  .site-nav a {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 0.5em;
  }
  .site-nav a:hover { background: var(--chip-hover); text-decoration: none; }

  /* サイドバー・一覧内のリンクをボタン化（44px以上のタップ領域） */
  .recent-posts li, .link-list li, .post-list li { padding: 0; border: none; }
  .post-list li:hover { background: none; }
  .recent-posts a, .link-list a, .post-list .post-link {
    display: block;
    margin: 0.35em 0; padding: 0.6em 0.8em; min-height: 44px;
    background: var(--chip);
    border: 1px solid var(--border); border-radius: 3px;
  }
  .recent-posts a:hover, .link-list a:hover, .post-list .post-link:hover {
    background: var(--chip-hover); text-decoration: none;
  }
  /* ボタン化したタイトルの直下に小さく添える */
  .recent-posts .date { padding: 0; margin: -0.2em 0.3em 0.6em 0; }
  .post-meta { display: block; margin: 0 0 0.8em 0.3em; white-space: normal; }
  .tag-cloud a { padding: 0.4em 0.7em; margin: 0 0.4em 0.5em 0; line-height: 1.7; }
  .entry-meta { text-align: left; }
  .entry-meta .tag, .post-meta .tag { padding: 0.2em 0.7em; }
  .search-form button { min-height: 44px; }

  /* 本文の要素は画面が狭いぶん余白を詰める */
  blockquote { margin: 1.3em 0; padding: 0.8em 1em; }
  pre { padding: 0.8em; }
  th, td { padding: 0.35em 0.7em; }

  /* 目次表示: 段組みをやめ、章はJSで折りたたんだ状態から始める（index.php） */
  .index-groups { column-width: auto; columns: 1; }
  .index-group { margin-bottom: 0.5em; }
  .index-group > summary {
    display: flex; align-items: center; gap: 0.4em;
    min-height: 44px; padding: 0.5em 0.8em; margin-bottom: 0;
    background: var(--chip);
    border: 1px solid var(--border); border-radius: 3px;
    text-align: left;
  }
  .index-group[open] > summary { margin-bottom: 0.3em; }
  .index-group > summary:hover { background: var(--chip-hover); }
  /* flex にすると既定の三角が消えるブラウザがあるため、開閉の目印を自前で出す */
  .index-group > summary::after { content: '＋'; margin-left: auto; }
  .index-group[open] > summary::after { content: '−'; }
  .index-nav { display: none; }   /* 折りたたみ見出しがそのまま目次になる */
}

/* サイトタイトルは狭い画面で1行に収まらないので段階的に縮める */
@media (max-width: 512px) {
  .site-title { text-align: center; }
  .site-title a { margin-left: 0; font-size: 36px; }
  .site-tagline { text-align: center; }
}