@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/outfit-latin-600-normal-B7SfZ07L.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/outfit-latin-700-normal-Cu9v6i1X.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/figtree-latin-400-normal-g7Dtegnw.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/figtree-latin-600-normal-Cv_xCTDl.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2) format('woff2')}

/*
 * Pixmend design tokens
 *
 * Claude Design プロジェクト "App UI review and working prototype" の
 * `Pixmend App.dc.html` に定義された値をそのまま持ち込んだもの。
 *
 * 方向性: tech-minimal workshop tool / dark (画像作業用の面)。
 * AI っぽさを出さない — 決定論的なタイル進捗、数値は等幅、淡々としたコピー。
 * アクセントは walnut 1 色に固定。紫系の "AI カラー" は使わない。
 * 角丸は全面的に 0。
 */

:root {
  /* --- surfaces (warm near-black) --- */
  --pm-bg: #1e1c18; /* base */
  --pm-bg-raised: #26231e; /* cards, popovers, segmented active bg */
  --pm-bg-hover: #2e2b24; /* hover fill */
  --pm-bg-sunken: #15130f; /* image box backing */
  --pm-bg-seg-active: #3a362e; /* segmented control: selected */
  --pm-bg-track: #383429; /* progress track */
  --pm-bg-panel: #232019; /* LP のビジュアル枠 */

  /* --- borders --- */
  --pm-border: #3b372f; /* default control border */
  --pm-border-subtle: #33302a; /* structural rules (bars, footer) */
  --pm-border-strong: #45413a; /* raised buttons */
  --pm-border-strong-hover: #524e45;

  /* --- text --- */
  --pm-text: #d5d6d1; /* primary */
  --pm-text-bright: #e9eae5; /* selected segmented label */
  --pm-text-dim: #a8a69d; /* secondary */
  --pm-text-muted: #918f86; /* tertiary / metadata */
  --pm-text-on-accent: #fff;
  --pm-text-overlay: #c7c8c1; /* BEFORE badge */
  --pm-text-faint: #757269; /* フッタの著作権表示など */

  /* --- accent (walnut, fixed) --- */
  --ac: #8f6a48;
  --acH: #9e7854;
  --pm-link: #b08a63;
  --pm-link-hover: #c49e76;

  /* --- logo mark --- */
  --pm-mark-a: #5c594f;
  --pm-mark-b: #423e36;

  /* --- texture (pixel mosaic) --- */
  --pm-dot-bar: #302c25; /* over the top bar */
  --pm-dot-bar-float: #332f27; /* 縮んで浮いた状態のバー */
  --pm-dot-stage: #2e2b24; /* behind the empty state */
  --pm-dot-body: #262319; /* ページ全面 (LP v3) */
  --pm-dot-statement: #33302a; /* statement セクション */

  /* --- type --- */
  --pm-font-display: Outfit, ui-sans-serif, system-ui, sans-serif;
  --pm-font-ui: Figtree, ui-sans-serif, system-ui, sans-serif;
  --pm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- layout --- */
  --pm-content-max: 1160px;
  --pm-content-pad: 24px;

  /* LP v3 の幅 (原典どおり) */
  --pm-story-max: 1060px; /* story ブロック */
  --pm-prose-max: 760px; /* features / FAQ */

  /* トップバー。固定配置なので .page の padding-top と一致させる */
  --pm-topbar-h: 60px;
  --pm-topbar-h-float: 56px;
  --pm-topbar-max-float: 1000px;
}


/*
 * トップバーの見た目。**アプリ (TopBar.vue) / `/crop` (CropBar.vue) /
 * `/compress` (CompressBar.vue) / 生成ページ (scripts/content/assets.ts) の
 * 4 か所が同じこのファイルを読む。**
 *
 * 中身の定義元は src/nav.ts、見た目の定義元がここ。SFC の scoped style に戻すと
 * 「同じバーなのに gap と padding だけ違う」が再発する (2026-08-20 に統合)。
 *
 * 動きの出し方だけは面によって違う:
 *   アプリ / crop / compress … JS (usePageScroll) が `.bar--float` を付け外しする
 *   生成ページ                … JS を載せないので scroll-driven animation で同じ値へ送る
 *                   (scripts/content/assets.ts の @keyframes pm-bar*)
 * どちらも到達点は下の `.bar--float` と同じ値にしてある。
 *
 * 総称的なクラス (.btn / .nav / .brand) は他の面にもあるので **`.bar` の中だけ**に効かせる。
 */

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0;
  background: rgba(30, 28, 24, 0.62);
  backdrop-filter: blur(12px);
  transition:
    padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.45s;
}

.bar--float {
  padding: 10px 16px;
  background: transparent;
  backdrop-filter: none;
}

.bar__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: conic-gradient(
    from 0deg at 8px 8px,
    #0000 75%,
    var(--pm-dot-bar) 0
  );
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(#000 0 calc(100% - 12px), #0000 100%);
  mask-image: linear-gradient(#000 0 calc(100% - 12px), #0000 100%);
}

.bar__texture--inner {
  background-image: conic-gradient(
    from 0deg at 8px 8px,
    #0000 75%,
    var(--pm-dot-bar-float) 0
  );
  background-color: rgba(30, 28, 24, 0.55);
  -webkit-mask-image: none;
  mask-image: none;
}

.bar__inner {
  position: relative;
  width: 100%;
  max-width: var(--pm-content-max);
  height: var(--pm-topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--pm-content-pad);
  box-sizing: border-box;
  transition:
    max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s,
    padding 0.45s;
}

.bar--float .bar__inner {
  max-width: var(--pm-topbar-max-float);
  height: var(--pm-topbar-h-float);
  padding: 0 20px;
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

/* --- brand --- */
.bar .brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--pm-text);
}

.bar .brand:hover {
  text-decoration: none;
  color: var(--pm-text);
}

.bar .brand__mark {
  display: grid;
  grid-template-columns: 5px 5px;
  grid-template-rows: 5px 5px;
  gap: 2px;
}

.bar .brand__px {
  display: block;
}
.bar .brand__px--a {
  background: var(--pm-mark-a);
}
.bar .brand__px--b {
  background: var(--pm-mark-b);
}
.bar .brand__px--ac {
  background: var(--ac);
}

.bar .brand__word {
  font-family: var(--pm-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* --- nav --- */
.bar .nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 26px;
}

.bar .nav__link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pm-text-dim);
  text-decoration: none;
}

.bar .nav__link:hover {
  color: var(--pm-text);
  text-decoration: none;
}

/* 現在地。生成ページは aria-current で同じ姿になる */
.bar .nav__link--on,
.bar .nav__link[aria-current] {
  color: var(--pm-text);
  border-bottom: 2px solid var(--ac);
  padding-bottom: 2px;
}

.bar__spacer {
  flex: 1;
}

/* --- actions --- */
.bar__actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.bar__note {
  font-size: 12px;
  color: var(--pm-text-muted);
}

/* 言語切替。押すものではなく「もう 1 つの版がある」の表示なので、控えめに置く */
.bar__lang {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pm-text-dim);
  text-decoration: none;
  padding: 7px 6px;
  white-space: nowrap;
}

.bar__lang:hover {
  color: var(--pm-text);
  text-decoration: none;
}

/*
 * 設定。アプリではパネルを開くボタン、それ以外の面では `/#settings` へのリンク
 * (src/nav.ts)。**どちらも同じ姿にする**ので button と a の両方に効かせる。
 */
.bar__gear {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--pm-text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 7px 8px;
  text-decoration: none;
  transition: color 120ms ease;
}

.bar__gear:hover {
  color: var(--pm-text);
  text-decoration: none;
}

.bar__cta {
  display: inline-block;
  background: var(--ac);
  color: var(--pm-text-on-accent);
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.bar__cta:hover {
  background: var(--acH);
  color: var(--pm-text-on-accent);
  text-decoration: none;
}

.bar .btn {
  cursor: pointer;
  font-family: var(--pm-font-ui);
  transition:
    background 120ms ease,
    color 120ms ease;
}

.bar .btn--ghost {
  border: 1px solid var(--pm-border);
  background: transparent;
  color: var(--pm-text-dim);
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
}

.bar .btn--ghost:hover {
  background: #2a2721;
  color: var(--pm-text);
}

.bar .btn--primary {
  border: none;
  background: var(--ac);
  color: var(--pm-text-on-accent);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bar .btn--primary:hover {
  background: var(--acH);
}

.bar .btn--primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.bar .btn__glyph {
  font-family: var(--pm-font-mono);
  font-size: 12px;
}

/*
 * --- ハンバーガー ---------------------------------------------------------
 *
 * 中身は `.bar__menu` (details) 1 つ。**アプリ (BarMenu.vue) も生成ページ
 * (scripts/content/page.ts) も同じ markup** で、開閉は details に任せている
 * — 生成ページが JS を持たないので、JS で開く作りにすると記事だけ開かなくなる。
 *
 * 広い画面では出さない (下の @media で display を入れ替える)。
 */
.bar__menu {
  position: relative;
  display: none;
}

.bar__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 指で押す面。文字 (17px) より広く取り、44px 角を確保する */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--pm-text-dim);
  cursor: pointer;
  list-style: none;
}

/* details の三角は出さない (自前の ☰ を描く) */
.bar__menu-btn::-webkit-details-marker {
  display: none;
}

.bar__menu-btn:hover {
  color: var(--pm-text);
}

.bar__menu-glyph {
  position: relative;
  display: block;
  width: 17px;
  height: 2px;
  background: currentColor;
  transition: background 120ms ease;
}

.bar__menu-glyph::before,
.bar__menu-glyph::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  background: currentColor;
  transition: transform 160ms ease;
}

.bar__menu-glyph::before {
  top: -6px;
}
.bar__menu-glyph::after {
  top: 6px;
}

/* 開いている間は × にする。閉じ方が分かるように */
.bar__menu[open] .bar__menu-glyph {
  background: transparent;
}
.bar__menu[open] .bar__menu-glyph::before {
  transform: translateY(6px) rotate(45deg);
}
.bar__menu[open] .bar__menu-glyph::after {
  transform: translateY(-6px) rotate(-45deg);
}

.menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  z-index: 1;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: rgba(30, 28, 24, 0.96);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--pm-border);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.48);
}

.menu__link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: none;
  background: transparent;
  font-family: var(--pm-font-ui);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  color: var(--pm-text-dim);
  text-decoration: none;
  cursor: pointer;
}

.menu__link:hover {
  background: #2a2721;
  color: var(--pm-text);
  text-decoration: none;
}

/* 現在地。生成ページは aria-current で同じ姿になる (nav__link と揃える) */
.menu__link--on,
.menu__link[aria-current] {
  color: var(--pm-text);
  box-shadow: inset 2px 0 0 var(--ac);
}

.menu__sep {
  height: 1px;
  margin: 6px 0;
  border: none;
  background: var(--pm-border);
}

/*
 * 狭い画面ではバーの中身を折り返させない。**入らないものは消すのではなく
 * ☰ に入れる** — 2026-08-20 以前はナビを display:none にするだけで、
 * スマホから /crop や /compress に行けなかった。
 */
@media (max-width: 720px) {
  .bar .nav,
  .bar__lang,
  .bar__gear,
  .bar__note {
    display: none;
  }

  .bar__menu {
    display: block;
  }

  .bar__inner {
    gap: 10px;
  }
}



:root {
  /* 和文は OS の書体に落とす。ここだけ記事ページ固有 */
  --pm-font-ja: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
    'Yu Gothic Medium', 'Yu Gothic', Meiryo, sans-serif;
  --pm-read-max: 720px;
}

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: var(--pm-font-ui), var(--pm-font-ja);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--pm-link); text-decoration: none; }
a:hover { color: var(--pm-link-hover); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: rgba(143, 106, 72, 0.35); }
:focus-visible { outline: 1px solid var(--ac); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ac); color: var(--pm-text-on-accent); padding: 10px 16px;
}
.skip:focus { left: 0; text-decoration: none; }

.wrap { max-width: var(--pm-content-max); margin: 0 auto; padding: 0 var(--pm-content-pad); }

/*
 * --- top bar ---
 *
 * **姿は src/styles/topbar.css をそのまま読む** (上の tokens.css と同じく
 * ビルド時に連結している)。アプリ (TopBar.vue) と /crop (CropBar.vue) も
 * 同じファイルを読むので、面を移ってもバーは変わらない。
 * ここに書き足してよいのは、**この面だけの動かし方**だけ。
 *
 * ::: tip 動きは JS ではなく scroll-driven animation で出す
 * 記事ページに JS を 1 行も載せない (docs/4_marketing/02-seo-aio §7.1)。
 * animation-timeline: scroll() はスクロール量そのものを進行度にするので、
 * リスナを張らずに TopBar の floated (= .bar--float) 相当が書ける。
 * 到達点の値は topbar.css の .bar--float と揃えてあること。
 * **対応していないブラウザでは上端の姿のまま**で、これは以前と同じ見え方に落ちるだけ。
 * :::
 */
.bar, .bar__inner, .bar__texture {
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: scroll(root);
  animation-range: 0 90px;
}
.bar { animation-name: pm-bar; }
.bar__inner {
  /* 0 から補間させるために初期値を置く。none とは補間できない */
  backdrop-filter: blur(0px) saturate(100%);
  animation-name: pm-bar-inner;
}
/* 上端の面はフェードアウト、浮いた後の面はフェードインする (JS の v-if の代わり) */
.bar__texture--outer { animation-name: pm-fade-out; }
.bar__texture--inner { opacity: 0; animation-name: pm-fade-in; }

@keyframes pm-bar {
  to { padding: 10px 16px; background: rgba(30, 28, 24, 0); backdrop-filter: blur(0px); }
}
@keyframes pm-bar-inner {
  to {
    max-width: var(--pm-topbar-max-float);
    height: var(--pm-topbar-h-float);
    padding: 0 20px;
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
  }
}
@keyframes pm-fade-out { to { opacity: 0; } }
@keyframes pm-fade-in { to { opacity: 1; } }

/* 動きを求めていない人には出さない。アプリの prefersReducedMotion と同じ扱い */
@media (prefers-reduced-motion: reduce) {
  .bar, .bar__inner, .bar__texture { animation-name: none; }
  .bar__texture--inner { opacity: 0; }
}

/* バーが fixed になったぶん、本文を下げる */
body { padding-top: var(--pm-topbar-h); }

/* --- 一覧の絞り込み (JS なし。ラジオ + :checked ~ で切り替える) --- */
.filter { margin: 22px 0 26px; }
/*
 * ラジオ本体は見せない。display: none にすると当たり判定ごと消えて
 * キーボードで選べなくなるので、**版面から出すだけ**にする。
 */
.filter__radio {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter__chip {
  cursor: pointer; user-select: none;
  font-size: 12.5px; font-weight: 500; line-height: 1;
  color: var(--pm-text-dim);
  border: 1px solid var(--pm-border);
  padding: 8px 13px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.filter__chip:hover { color: var(--pm-text); border-color: var(--pm-text-muted); }
/* 選択中の chip。ラジオは chips の前に並んでいるので ~ で届く */
#pm-f-all:checked ~ .filter__chips [for="pm-f-all"],
#pm-f-blog:checked ~ .filter__chips [for="pm-f-blog"],
#pm-f-compare:checked ~ .filter__chips [for="pm-f-compare"],
#pm-f-guide:checked ~ .filter__chips [for="pm-f-guide"] {
  color: var(--pm-text-on-accent); background: var(--ac); border-color: var(--ac);
}
/* キーボード操作が見えるように。:focus-visible はラジオに来る */
.filter__radio:focus-visible ~ .filter__chips [for="pm-f-all"],
.filter__radio:focus-visible + .filter__chips [for] { outline: 2px solid var(--ac); outline-offset: 2px; }
/* 絞り込み本体。.filter の外にある .cards に効かせるので、親から辿る */
.list:has(#pm-f-blog:checked) .card:not([data-section='blog']),
.list:has(#pm-f-compare:checked) .card:not([data-section='compare']),
.list:has(#pm-f-guide:checked) .card:not([data-section='guide']) {
  display: none;
}

/* --- article --- */
.doc { max-width: var(--pm-read-max); margin: 0 auto; padding: 56px var(--pm-content-pad) 0; }

.crumb {
  font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--pm-text-muted); text-transform: uppercase; margin-bottom: 18px;
}
.crumb a { color: var(--pm-text-muted); }
.crumb a:hover { color: var(--pm-text-dim); }
.crumb span { opacity: 0.55; margin: 0 6px; }

h1 {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 700; font-size: clamp(30px, 5vw, 42px); line-height: 1.18;
  letter-spacing: -0.02em; margin: 0 0 16px;
}

/*
 * ja の見出しを文節で折り返す。「〜させないの / か」のような切れ方を避ける。
 * 未対応のブラウザは normal のまま (見た目が少し悪くなるだけで壊れない)。
 */
h1, h2, h3, .card__title {
  word-break: auto-phrase;
}

.lede { font-size: 17.5px; line-height: 1.65; color: var(--pm-text-dim); margin: 0 0 22px; }

.meta {
  font-family: var(--pm-font-mono); font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--pm-text-faint); display: flex; flex-wrap: wrap; gap: 14px;
  padding-bottom: 26px; border-bottom: 1px solid var(--pm-border-subtle);
}

/* 競合情報の確認時点。比較ページは必ず出す (02-seo-aio §3.3) */
.checked { color: var(--pm-text-muted); }

.toc {
  margin: 28px 0 0; padding: 18px 20px;
  background: var(--pm-bg-raised); border: 1px solid var(--pm-border-subtle);
}
.toc__label {
  font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--pm-text-muted); text-transform: uppercase; margin-bottom: 10px;
}
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin: 5px 0; font-size: 14px; }
.toc li.lv3 { margin-left: 14px; font-size: 13.5px; }
.toc a { color: var(--pm-text-dim); }

/* --- prose --- */
.prose { font-size: 16.5px; line-height: 1.85; padding-top: 8px; }
.prose > * { max-width: 100%; }
.prose p { margin: 0 0 1.35em; }
.prose h2 {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 600; font-size: 25px; line-height: 1.3; letter-spacing: -0.01em;
  margin: 2.2em 0 0.7em; padding-top: 0.6em; border-top: 1px solid var(--pm-border-subtle);
  scroll-margin-top: calc(var(--pm-topbar-h) + 16px);
}
.prose h3 {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 600; font-size: 19px; margin: 1.9em 0 0.6em;
  scroll-margin-top: calc(var(--pm-topbar-h) + 16px);
}
.prose h4 { font-size: 16px; font-weight: 600; margin: 1.6em 0 0.5em; color: var(--pm-text-bright); }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.prose li { margin: 0.4em 0; }
.prose li::marker { color: var(--pm-text-muted); }
.prose strong { color: var(--pm-text-bright); font-weight: 600; }
.prose hr { border: none; border-top: 1px solid var(--pm-border-subtle); margin: 2.4em 0; }

.prose blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--ac); color: var(--pm-text-dim);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-family: var(--pm-font-mono); font-size: 0.88em;
  background: var(--pm-bg-raised); border: 1px solid var(--pm-border-subtle);
  padding: 1px 5px; color: var(--pm-text-bright);
}
.prose pre {
  background: var(--pm-bg-sunken); border: 1px solid var(--pm-border-subtle);
  padding: 16px 18px; overflow-x: auto; margin: 1.6em 0;
  font-size: 13.5px; line-height: 1.7;
}
.prose pre code { background: none; border: none; padding: 0; font-size: inherit; }

.prose figure { margin: 1.8em 0; }
.prose img { display: block; background: var(--pm-bg-sunken); }
.prose figcaption, .prose img + em {
  display: block; font-size: 13px; color: var(--pm-text-muted); margin-top: 8px;
}

/* 比較表。狭い画面では枠の中だけが横に動く (版面は動かさない) */
.tbl { overflow-x: auto; margin: 1.7em 0; border: 1px solid var(--pm-border-subtle); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tbl th, .tbl td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--pm-border-subtle);
  vertical-align: top;
}
.tbl th {
  background: var(--pm-bg-raised); font-weight: 600; color: var(--pm-text-bright);
  white-space: nowrap;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl td strong { color: var(--ac); }

/* --- howto の手順。JSON-LD に入れるものは版面にも出す (render.ts の注記) --- */
.steps { margin: 2.6em 0 0; padding: 22px 24px; background: var(--pm-bg-raised); border-left: 2px solid var(--ac); }
.steps h2 {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 600; font-size: 18px; margin: 0 0 12px;
}
.steps ol { margin: 0; padding-left: 20px; }
.steps li { margin: 0 0 12px; line-height: 1.7; font-size: 15px; color: var(--pm-text-dim); }
.steps li:last-child { margin-bottom: 0; }
.steps strong { color: var(--pm-text-bright); }

/* --- faq --- */
.faq { margin: 3em 0 0; }
.faq h2 {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 600; font-size: 25px; margin: 0 0 18px;
}
.faq details { border-top: 1px solid var(--pm-border-subtle); }
.faq details:last-of-type { border-bottom: 1px solid var(--pm-border-subtle); }
.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-family: var(--pm-font-mono); color: var(--pm-text-muted); flex: none;
}
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 0 18px; color: var(--pm-text-dim); line-height: 1.8; }

/* --- cta --- */
.cta {
  margin: 3.5em 0 0; padding: 32px var(--pm-content-pad);
  background: var(--pm-bg-panel); border: 1px solid var(--pm-border-subtle); text-align: center;
}
.cta h2 {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 600; font-size: 23px; margin: 0 0 10px;
}
/* 中央揃えの ja は文節で折り返さないと行末が汚れる */
.cta p {
  margin: 0 auto 20px; max-width: 46ch; color: var(--pm-text-dim); font-size: 15px;
  word-break: auto-phrase;
}
.cta a {
  display: inline-block; background: var(--ac); color: var(--pm-text-on-accent);
  padding: 12px 26px; font-weight: 600; font-size: 15px;
}
.cta a:hover { background: var(--acH); color: var(--pm-text-on-accent); text-decoration: none; }

/* --- index / related --- */
.list { max-width: var(--pm-content-max); margin: 0 auto; padding: 56px var(--pm-content-pad) 0; }
.list h1 { margin-bottom: 10px; }
.list__lede { font-size: 17px; color: var(--pm-text-dim); margin: 0 0 40px; max-width: 60ch; }

/*
 * 枠線は各カードが持つ。gap を 1px にして下地を透かす手だと、
 * 記事が奇数本のときに**空のセルがカードのように見える**
 */
.cards { display: grid; gap: 16px; align-items: start; }
.card {
  background: var(--pm-bg); border: 1px solid var(--pm-border-subtle);
  padding: 24px; display: block; color: inherit;
}
.card:hover { background: var(--pm-bg-raised); text-decoration: none; color: inherit; }
.card__meta {
  font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--pm-text-faint); margin-bottom: 8px; text-transform: uppercase;
}
.card__title {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 600; font-size: 20px; line-height: 1.35; margin: 0 0 8px; color: var(--pm-text);
}
.card:hover .card__title { color: var(--pm-link-hover); }
.card__desc { margin: 0; font-size: 14.5px; color: var(--pm-text-muted); line-height: 1.65; }
.card__tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 10px;
  border: 1px solid var(--pm-border); color: var(--pm-text-muted); letter-spacing: 0.06em;
}
.empty { color: var(--pm-text-muted); padding: 40px 0; }

@media (min-width: 780px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.related { margin: 3.5em 0 0; }
.related__label {
  font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--pm-text-muted); text-transform: uppercase; margin-bottom: 14px;
}

/* --- legal --- */
.legal { max-width: var(--pm-read-max); margin: 0 auto; padding: 56px var(--pm-content-pad) 0; }
.legal h2 {
  font-family: var(--pm-font-display), var(--pm-font-ja);
  font-weight: 600; font-size: 22px; margin: 2em 0 0.6em;
}
.legal p { margin: 0 0 1.2em; line-height: 1.8; }
.legal__note { font-size: 13px; color: var(--pm-text-faint); }
.legal pre {
  background: var(--pm-bg-sunken); border: 1px solid var(--pm-border-subtle);
  padding: 16px 18px; overflow-x: auto; font-size: 12px; line-height: 1.65;
  font-family: var(--pm-font-mono); white-space: pre-wrap; color: var(--pm-text-muted);
}
.legal__credit { margin-top: 2.4em; }
.legal__credit dl { margin: 0 0 10px; font-size: 13.5px; }
.legal__credit dt {
  font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--pm-text-muted); text-transform: uppercase;
}
.legal__credit dd { margin: 0 0 6px; }

/* --- footer --- */
.foot {
  margin-top: 88px; border-top: 1px solid var(--pm-border-subtle);
  padding: 36px var(--pm-content-pad);
}
.foot__inner {
  max-width: var(--pm-content-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: baseline;
}
.foot a { color: var(--pm-text-muted); font-size: 13.5px; }
.foot a:hover { color: var(--pm-text); text-decoration: none; }
.foot__copy {
  width: 100%; font-size: 12.5px; color: var(--pm-text-faint); margin-top: 4px;
}