/* えびツール — サイト共通スタイル
   ツール本体（tools/*.html）は各自のCSSを持つので、ここは読み込まない。 */

:root{
  --bg:oklch(0.965 0.004 250);
  --panel:#fff;
  --fg:oklch(0.28 0.012 260);
  --muted:oklch(0.42 0.012 260);
  --sub:oklch(0.48 0.015 260);
  --faint:oklch(0.6 0.012 260);
  --accent:oklch(0.46 0.09 255);
  --accent-dark:oklch(0.36 0.09 255);
  --line:oklch(0.89 0.006 250);
  --dark:oklch(0.25 0.015 260);
  --serif:'Shippori Mincho B1',serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--fg);
  font-family:"Zen Kaku Gothic New",-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-text-size-adjust:100%;
  text-wrap:pretty;
}

a{color:var(--accent)}
a:hover{color:var(--accent-dark)}

.page{min-height:100vh;display:flex;flex-direction:column}

/* ---- ヘッダー ---- */
.sitebar{background:var(--dark);position:sticky;top:0;z-index:10}
.sitebar .inner{
  max-width:820px;margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.sitebar .brand{
  color:oklch(0.96 0.004 250);text-decoration:none;
  font-weight:700;letter-spacing:.2em;font-size:14px;
}
.sitebar .brand:hover{color:#fff}
.sitebar .tag{font-size:10px;letter-spacing:.22em;color:oklch(0.68 0.02 255)}
.sitebar .back{
  color:oklch(0.84 0.015 255);text-decoration:none;font-size:12px;letter-spacing:.08em;
  border:1px solid oklch(0.5 0.02 255);border-radius:4px;padding:6px 12px;
}
.sitebar .back:hover{background:oklch(0.32 0.015 260);color:#fff}

/* ---- 本文の器 ---- */
.wrap{max-width:820px;margin:0 auto;width:100%;padding:0 20px}
.wrap.narrow{max-width:760px}
.main{flex:1;width:100%}

/* ---- 見出し ---- */
.eyebrow{font-size:12px;letter-spacing:.26em;color:var(--accent);font-weight:700}
h1.title{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(30px,6vw,42px);line-height:1.3;margin:12px 0 14px;
}
h1.title.sm{font-size:clamp(25px,5vw,34px);line-height:1.4;margin:10px 0 6px}
h2.sec{font-family:var(--serif);font-weight:800;font-size:20px;margin:44px 0 10px}
.lede{margin:0;font-size:14.5px;line-height:1.9;color:var(--sub);max-width:38em}

/* ---- ツールカード ---- */
.cards{display:grid;gap:18px;padding:32px 0 0}
.card{
  background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:clamp(20px,4vw,30px);
  display:flex;flex-direction:column;gap:13px;
  box-shadow:0 1px 3px oklch(0.25 0.015 260 / .06);
}
.card .meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card .no{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:700;
}
/* 版表記。更新履歴へのリンクだが、主張させたくないので控えめに */
.card .ver{font-size:11px;color:var(--faint);text-decoration:none;border-bottom:1px dotted oklch(0.78 0.01 260)}
.card a.ver:hover{color:var(--accent);border-bottom-color:var(--accent)}
.card h2{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(21px,4vw,26px);margin:0;line-height:1.4;
}
.card p{margin:0;font-size:14px;line-height:1.9;color:var(--muted)}
.card .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* ---- ボタン ---- */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;text-decoration:none;border-radius:4px;
}
.btn{
  padding:10px 26px;background:var(--accent);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.06em;
}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn-ghost{
  padding:10px 22px;background:transparent;color:oklch(0.4 0.05 255);
  font-size:13.5px;border:1px solid oklch(0.84 0.02 255);
}
.btn-ghost:hover{background:#fff;color:var(--accent-dark)}

/* ---- 使い方の手順 ---- */
.steps{display:flex;flex-direction:column;gap:14px}
.step{
  background:var(--panel);border:1px solid var(--line);
  padding:18px 20px;display:flex;gap:15px;
}
.step .num{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
}
.step h2{margin:3px 0 7px;font-size:16px}
.step p{margin:0;font-size:13.5px;line-height:1.9;color:var(--muted)}
.body-text{margin:0;font-size:13.5px;line-height:2;color:var(--muted)}

/* ---- 更新履歴のタイムライン（index と changelog で共用） ---- */
.tl{border-left:2px solid oklch(0.86 0.02 255);margin-left:6px}
.tl .item{padding:0 0 30px 22px;position:relative}
.tl .item:last-child{padding-bottom:0}
.tl .dot{
  position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid oklch(0.66 0.05 255);
}
/* いちばん新しい項目だけ塗りつぶす */
.tl .item.now .dot{background:var(--accent);border-color:var(--bg)}
.tl .date{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.12em;color:oklch(0.55 0.012 260);font-weight:700;
}
.tl .item.now .date{color:var(--accent)}
.tl h2{margin:6px 0 6px;font-size:16px}
.tl p{margin:0;font-size:13.5px;line-height:1.9;color:var(--muted)}

/* トップに出す短縮版（日付と見出しを1行に並べる） */
.tl.compact .item{padding-bottom:9px}
.tl.compact .dot{top:3px}
.tl.compact .date{font-size:11.5px}
.tl.compact .label{font-size:13px;margin-left:10px}
.tl.compact .item:not(.now) .label{color:var(--muted)}

/* 節の見出し（「更新履歴」＋「すべて見る →」） */
.sectionhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;
}
.sectionhead .ttl{font-size:12px;letter-spacing:.26em;color:var(--accent);font-weight:700}
.sectionhead a{font-size:12px;text-decoration:none}

/* ---- 配色見本（使い方ページ）----
   ツール本体の THEMES の実際の色を、各カードに --sw-* として直接書いている。
   ツール側の配色を変えたら、ここの値も合わせること。 */
.swatches{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px;margin:16px 0 0;
}
.sw{
  display:block;text-decoration:none;
  border:1px solid var(--line);background:var(--panel);padding:10px;
  transition:box-shadow .15s,transform .15s;
}
.sw:hover{box-shadow:0 2px 10px oklch(0.25 0.015 260 / .12);transform:translateY(-1px)}
.sw .prev{
  height:74px;overflow:hidden;background:var(--sw-bg);
  display:flex;flex-direction:column;border:1px solid var(--line);
}
.sw .prev .topbar{height:15px;background:var(--sw-ink);flex:none}
.sw .prev .lines{flex:1;padding:8px 9px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.sw .prev .l{height:4px;border-radius:2px;background:var(--sw-fg);opacity:.72}
.sw .prev .l.short{width:56%}
.sw .prev .l.accent{background:var(--sw-accent);opacity:1;width:34%}
.sw .nm{margin-top:9px;font-size:12.5px;color:var(--fg);font-weight:700}
.sw .hint{font-size:11px;color:var(--faint)}

/* 「くわしく編集」でだけ出る手順につける印 */
.step .only{
  display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.08em;font-weight:400;
  color:var(--accent);border:1px solid oklch(0.86 0.03 255);border-radius:3px;
  padding:2px 6px;vertical-align:middle;white-space:nowrap;
}

/* 補足の囲み */
.callout{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:15px 18px;margin:16px 0 0;
}
.callout h3{margin:0 0 6px;font-size:14px}
.callout p{margin:0;font-size:13.5px;line-height:1.9;color:var(--muted)}

/* ---- フッター ---- */
.foot{
  border-top:1px solid var(--line);
  padding:22px 20px 28px;text-align:center;
  font-size:11.5px;line-height:1.9;color:oklch(0.55 0.012 260);
}