/* ============================================================
   テーマ: aidev（AI開発メモ）— 「ドット方眼の技術手帳」
   方眼グリッド → ドット方眼 / 赤ペン → インディゴ / 蛍光一筆 → 選択範囲ハイライト /
   見出し → コードコメント調（# / >） / 書体: M PLUS 1 ＋ JetBrains Mono
   ============================================================ */
:root {
  --paper:    #F8F8FB;
  --ink:      #1A1B24;
  --ink-soft: #5A5C70;
  --grid:     #DDE0EC;
  --rule:     #D7DAE8;
  --pen:      #4F46E5;  /* インディゴ */
  --pen-deep: #3730A3;
  --marker:   #C7CCFB;  /* ハイライト＝淡インディゴ */
  --disp: "M PLUS 1", "Noto Sans JP", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
/* 地：ドット方眼 */
body {
  background-image: radial-gradient(var(--grid) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}
.masthead, .site-header { border-bottom: 1px solid var(--ink); border-top: none; background: var(--paper); }
.site-footer { border-top: 1px solid var(--ink); }
/* ブランド：蛍光一筆 → 選択範囲ハイライト（矩形・無回転）*/
.swipe::before {
  top: 14%; bottom: 8%; left: -.05em; right: -.05em;
  background: var(--marker); transform: none; border-radius: 2px; mix-blend-mode: multiply;
}
/* 見出し：コードコメント調 */
h2 { border-left: none; padding-left: 0; }
.article-body h2 { border-left: none; padding-left: 0; }
.article-body h2::before { content: "# "; font-family: var(--mono); font-weight: 700; color: var(--pen); }
h3::before { content: "> "; font-family: var(--mono); color: var(--pen); }

/* ── 変数化されていない黄/赤tintを媒体色へ ── */
blockquote { background: color-mix(in srgb, var(--marker) 45%, transparent); border-left-color: var(--pen); }
.toc__list a:hover, .toc__list a:focus-visible { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.topicnav__item:hover, .topicnav__item.is-active { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.tokushu-cta__link { background: color-mix(in srgb, var(--marker) 35%, transparent); }
.tokushu-cta__link:hover { background: color-mix(in srgb, var(--marker) 55%, transparent); }
a.tk-item:hover { background: color-mix(in srgb, var(--marker) 28%, transparent); }
.thumb__mark { background: color-mix(in srgb, var(--marker) 85%, transparent); }
.calc-tab:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }
.calc-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 14%, transparent); }
.cta__btn--ghost:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }