/* 自作ツール ハブ 共通スタイル（一覧 index.html と解説 explain/*.html の両方で読む）
   方針: 白地・黒文字・色は 1 つ（--accent はリンク・選択中・フォーカスだけ）。
   区切りは余白と細い罫線で作り、箱・影・丸いバッジ・すりガラスは使わない。実画面（スクリーンショット）を主役にする。
   罫線は本文の左右端に揃える（.bar / .page / .foot は同じ幅の箱にする）。 */

:root{
  --paper:#ffffff;
  --ink:#111316;        /* 見出し・本文 */
  --ink-2:#464b53;      /* 補足文（白地でコントラスト約 8.8:1） */
  --ink-3:#686d76;      /* メタ情報（約 5.2:1・小さい文字だけに使う） */
  --rule:#e3e5e8;       /* 罫線 */
  --wash:#f4f5f7;       /* 画像の読み込み前の下地 */
  --accent:#1d43d0;     /* 唯一の色 */
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  --wide:1160px;        /* 一覧・図版の最大幅 */
  --text:680px;         /* 本文の最大幅（1 行 40 字前後） */
  --gutter:clamp(16px,4vw,40px);
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* 絞り込みで隠した作品（.work の display:flex に負けないように） */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.85;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
h1,h2,h3{font-feature-settings:"palt"; letter-spacing:.01em; word-break:auto-phrase}
h1,h2{text-wrap:balance}
/* 日本語の本文は文節で折り返し、1 字だけの行を作らない（非対応ブラウザでは無視される） */
p,dd,figcaption,li{word-break:auto-phrase; text-wrap:pretty}

/* ---------- 3 つの箱を同じ幅に（罫線が本文の端と揃う） ---------- */
.bar,.page,.foot{width:min(var(--wide), calc(100% - 2 * var(--gutter))); margin-inline:auto}

/* ---------- サイト共通の上端バー ---------- */
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; border-bottom:1px solid var(--rule)}
.bar a{text-decoration:none}
.bar .who{font-weight:700; font-size:15px; letter-spacing:.02em; min-height:44px; display:inline-flex; align-items:center}
.bar .crumb{font-size:14px; color:var(--ink-3)}
.bar .crumb a{color:var(--ink-2); min-height:44px; display:inline-flex; align-items:center}
.bar a:hover{color:var(--accent)}

/* ---------- 一覧ページ ---------- */
.intro{padding:clamp(36px,5vw,64px) 0 clamp(24px,3vw,36px)}
.intro h1{font-size:clamp(30px,4.2vw,46px); line-height:1.2; font-weight:700; margin:0 0 14px}
.intro .lead{font-size:clamp(15.5px,1.4vw,17px); color:var(--ink-2); margin:0; max-width:36em; text-wrap:balance}

/* 絞り込み: 文字のタブ＋下線だけの検索欄 */
.filter{
  position:sticky; top:0; z-index:5; background:var(--paper);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 24px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
}
.tabs{display:flex; gap:4px}
.tabs button{
  font:inherit; font-size:15px; color:var(--ink-2); background:none; border:0; cursor:pointer;
  min-height:52px; padding:0 12px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs button:first-child{padding-left:0}
.tabs button .n{font-size:12px; color:var(--ink-3); margin-left:6px}
.tabs button:hover{color:var(--ink); border-bottom-color:var(--rule)}
.tabs button[aria-pressed="true"]{color:var(--ink); font-weight:700; border-bottom-color:var(--ink)}
.search{flex:0 1 300px; min-width:200px; display:flex; align-items:center}
.search input{
  width:100%; font:inherit; font-size:15px; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--ink-3); border-radius:0; padding:10px 2px; min-height:44px;
}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none; border-bottom-color:var(--accent); box-shadow:0 1px 0 var(--accent)}

.group{padding:clamp(40px,6vw,80px) 0 0}
.filter+.group{padding-top:clamp(32px,4vw,44px)}
.group-head{margin:0 0 24px}
.group-head h2{font-size:clamp(21px,2.2vw,26px); line-height:1.3; margin:0 0 4px}
.group-head p{margin:0; font-size:15px; color:var(--ink-2)}

.works{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 32px}
.work{display:flex; flex-direction:column; min-width:0}
.work-media{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--wash); border:1px solid var(--rule); border-radius:2px; transition:border-color .15s ease}
.work-media img{width:100%; height:100%; object-fit:cover; object-position:top center}
.work:hover .work-media{border-color:var(--ink-3)}
.work-meta{display:flex; flex-wrap:wrap; gap:0 12px; margin:14px 0 2px; font-size:13px; color:var(--ink-3); line-height:1.6}
.work h3{font-size:19px; line-height:1.45; margin:0 0 4px; text-wrap:pretty}
.work h3 a{text-decoration:none}
.work:hover h3 a,.work h3 a:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.work-tag{font-size:14.5px; line-height:1.7; color:var(--ink-2); margin:0 0 4px}
.work-act{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; font-size:14px}
.work-act a{color:var(--accent); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; min-height:44px}
.work-act a:hover{text-decoration:underline; text-underline-offset:4px}
.work-act a+a{color:var(--ink-2); font-weight:400}   /* 色付きの行き先は 1 作品に 1 つだけ */
.work-act .plain{color:var(--ink-3); min-height:44px; display:inline-flex; align-items:center}

.empty{display:none; padding:64px 0; color:var(--ink-2)}

/* ---------- 解説ページ ---------- */
.doc-head{padding:clamp(36px,6vw,80px) 0 36px; max-width:820px}
.doc-meta{font-size:13px; color:var(--ink-3); margin:0 0 12px; display:flex; flex-wrap:wrap; gap:0 16px}
.doc-head h1{font-size:clamp(28px,4vw,42px); line-height:1.25; margin:0 0 18px}
.doc-lead{font-size:clamp(16px,1.6vw,18.5px); line-height:1.85; color:var(--ink-2); margin:0; max-width:34em}
.doc-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin:28px 0 0}
.btn{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 22px;
  background:var(--ink); color:#fff; text-decoration:none; font-weight:700; font-size:15px;
  border-radius:2px; transition:background .15s ease;
}
.btn:hover{background:var(--accent)}
.textlink{color:var(--accent); text-decoration:none; font-size:15px; font-weight:500; min-height:44px; display:inline-flex; align-items:center}
.textlink:hover{text-decoration:underline; text-underline-offset:4px}
.doc-note{font-size:14px; color:var(--ink-3); margin:16px 0 0; max-width:var(--text)}

.hero{margin:0 0 clamp(40px,6vw,64px)}
/* 拡大でぼやけさせず、縦長の画像も 1 画面に収める */
.hero img{width:auto; max-width:100%; max-height:min(78vh,760px); border:1px solid var(--rule); border-radius:2px; background:var(--wash)}
figcaption,.cap{font-size:14px; line-height:1.75; color:var(--ink-3); margin:12px 0 0; max-width:var(--text)}

/* リードに入りきらなかった概要の続き */
.overview{max-width:var(--text); margin:0 0 clamp(40px,6vw,64px)}
.overview p{font-size:16px; color:var(--ink-2); margin:0 0 1em}

.toc{display:flex; flex-wrap:wrap; gap:0 24px; margin:0 0 clamp(40px,6vw,64px); padding:6px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-size:14px}
.toc span{color:var(--ink-3); align-self:center}
.toc a{text-decoration:none; color:var(--ink-2); min-height:44px; display:inline-flex; align-items:center}
.toc a:hover{color:var(--accent)}

.sec{padding:0 0 clamp(56px,8vw,96px)}
.sec>h2{font-size:clamp(22px,2.6vw,28px); line-height:1.35; margin:0 0 28px; padding-top:20px; border-top:1px solid var(--ink)}
.prose{max-width:var(--text)}

/* 使い方: 番号つきの図版を縦に並べる */
.steps{list-style:none; margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:clamp(40px,6vw,64px)}
.step{counter-increment:step}
.step h3{font-size:18px; line-height:1.5; margin:0 0 14px; display:flex; gap:12px; align-items:baseline}
.step h3::before{content:counter(step); font-size:14px; font-weight:500; color:var(--ink-3); min-width:1.2em}
/* 拡大した切り抜き画像が画面を占領しないよう、高さに上限を付けて縦横比のまま縮める */
.step img{width:auto; max-height:min(78vh,760px); border:1px solid var(--rule); border-radius:2px; background:var(--wash)}
.step.compact img{max-width:min(420px,100%)}
.step p{font-size:16px; color:var(--ink-2); margin:12px 0 0; max-width:var(--text)}

.caution{max-width:var(--text); margin:48px 0 0; padding:2px 0 2px 20px; border-left:2px solid var(--ink); font-size:15.5px; color:var(--ink-2)}
.caution strong{display:block; color:var(--ink); font-size:13px; letter-spacing:.06em; margin-bottom:2px}

/* 設定項目・用語: 名前と説明の 2 列（狭い画面では 1 列） */
.defs{margin:0; max-width:900px}
.defs>div{display:grid; grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:6px 32px; padding:16px 0; border-bottom:1px solid var(--rule)}
.defs>div:first-child{border-top:1px solid var(--rule)}
.defs dt{font-weight:700; font-size:15.5px; line-height:1.7}
.defs dd{margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.85}

.downloads{list-style:none; margin:0; padding:0; max-width:var(--text)}
.downloads li{padding:0 0 24px}
.downloads p{font-size:14.5px; color:var(--ink-2); margin:6px 0 0}

/* 仕組み（使い方があるページでは既定で閉じる） */
details.more{border-top:1px solid var(--ink); margin:0 0 56px}
details.more>summary{
  list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:14px;
  font-size:clamp(22px,2.6vw,28px); font-weight:700; line-height:1.35; padding:20px 0 0; min-height:64px;
}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary .hint{margin-left:auto; font-size:14px; font-weight:400; color:var(--accent)}
details.more[open]>summary .hint::after{content:"閉じる"}
details.more:not([open])>summary .hint::after{content:"開く"}
details.more>summary:hover .hint{text-decoration:underline; text-underline-offset:4px}
.more-body{padding:28px 0 0}
.sub{margin:0 0 48px}
.sub h3{font-size:16px; margin:0 0 16px; color:var(--ink)}
ol.flow{margin:0; padding:0; list-style:none; counter-reset:f; max-width:var(--text)}
ol.flow li{counter-increment:f; display:grid; grid-template-columns:2.2em 1fr; padding:10px 0; border-bottom:1px solid var(--rule); font-size:15.5px; color:var(--ink-2)}
ol.flow li::before{content:counter(f); font-size:13px; color:var(--ink-3); padding-top:3px}
ul.points{margin:0; padding:0 0 0 1.1em; max-width:var(--text); font-size:15.5px; color:var(--ink-2)}
ul.points li{margin:0 0 10px; padding-left:4px}
ul.points li::marker{color:var(--ink-3)}

/* 前後のツール */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid var(--rule); padding:24px 0 0}
.pager a{text-decoration:none; display:block; min-height:44px}
.pager .dir{display:block; font-size:13px; color:var(--ink-3); margin-bottom:2px}
.pager .t{font-weight:700; font-size:16px}
.pager a:hover .t{color:var(--accent)}
.pager .next{text-align:right; grid-column:2}

/* ---------- 共通フッター ---------- */
.foot{margin-top:clamp(72px,10vw,120px); padding:16px 0 40px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 24px; font-size:13px; color:var(--ink-3)}
.foot a{color:var(--ink-2); text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.foot a:hover{color:var(--accent)}
.foot .links{display:flex; gap:0 20px; flex-wrap:wrap}

/* 404 */
.notfound{padding:clamp(64px,12vw,160px) 0}
.notfound h1{font-size:clamp(28px,4vw,40px); margin:0 0 16px}
.notfound p{color:var(--ink-2); margin:0 0 28px}

/* ---------- 画面幅ごとの調整 ---------- */
@media (max-width:1023px){
  .works{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px}
}
@media (max-width:639px){
  body{font-size:16px}
  .works{grid-template-columns:minmax(0,1fr); gap:40px}
  .filter{position:static}
  .search{flex:1 1 100%}
  .search input{border-bottom:0; padding:10px 0}   /* バー下の罫線と 2 本並ばないように */
  .defs>div{grid-template-columns:minmax(0,1fr)}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1; text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}
@media print{
  .filter,.pager{display:none}
}