/* ==========================================================================
   実測スキン（1,900+ サイトを 1440px / 390px で CDP 実測した結果から生成）
   - 生成元: ops/skin_survey/skins.json ／ 生成: ops/skin_survey/gen_css.py
   - 外部画像・JavaScript に依存しない（テクスチャは勾配か data:image/svg+xml のみ）
   - 色は --pi-* だけを参照する（プリセット側で上書きできる）
   - 使い方: <body class="pattern-indie preset-<name> layout-<name>">
   ========================================================================== */


/* --------------------------------------------------------------------------
   cardstock — カードストック（方眼カード紙）
   出典: ponkotufamily.com / poke30.com / supika-burogu.com（同系テンプレ 3サイトで一致）
   なぜ別物に見えるか: 15px 方眼の方眼紙に、二重線の角丸カードが『紙を貼った』ように乗る。h2 は二重線の丸枠で、見出し自体がラベルになる。
   -------------------------------------------------------------------------- */
body.preset-cardstock {
  --pi-bg: #f4f5f7;
  --pi-panel: #ffffff;
  --pi-paper: #41403e;
  --pi-muted: #6f6d69;
  --pi-line: #c9c6bf;
  --pi-green: #3f7a52;
  --pi-red: #b03a2e;
  --pi-accent-sub: #847558;
  --pi-accent-text: #6b5c40;
  --pi-accent-border: #8c8880;
  --pi-shadow: #dcd8cf;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-cardstock {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--pi-line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--pi-line) 55%, transparent) 1px, transparent 1px);
  background-size: 15px 15px;
}

body.layout-cardstock .hero-img.hero-wide {
  padding: 7px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 6px;
  box-shadow: inset 0 0 0 6px var(--pi-panel), 0 3px 0 var(--pi-shadow, rgba(0, 0, 0, .12));
  object-fit: cover;
}


body.layout-cardstock .article h2 {
  position: relative;
  margin: 34px 0 16px;
  padding: 9px 18px;
  background: var(--pi-panel);
  color: var(--pi-paper);
  border: 1px solid color-mix(in srgb, var(--pi-paper) 45%, transparent);
  border-radius: 48px 168px 120px 24px / 48px 72px 48px 24px;
  box-shadow: 0 0 0 3px var(--pi-panel), 0 0 0 4px color-mix(in srgb, var(--pi-paper) 28%, transparent);
}
body.layout-cardstock .article h2::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed color-mix(in srgb, var(--pi-paper) 30%, transparent);
  border-radius: inherit;
  pointer-events: none;
}


body.layout-cardstock .p-card {
  position: relative;
  padding: 12px 13px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--pi-panel) 88%, var(--pi-line)),
              3px 3px 0 var(--pi-shadow, rgba(0, 0, 0, .12));
  transition: transform .12s ease, box-shadow .12s ease;
}
body.layout-cardstock .p-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--pi-panel) 88%, var(--pi-line)),
              4px 4px 0 var(--pi-accent-sub);
}
body.layout-cardstock .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 6px solid var(--pi-accent-sub);
  border-radius: 4px;
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--pi-panel) 88%, var(--pi-line));
}


@media (max-width: 640px) {
  body.layout-cardstock .article h2 { margin-top: 26px; }
  body.layout-cardstock .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   scanline — 走査線ダーク（放送局の素材）
   出典: www.giantbomb.com
   なぜ別物に見えるか: 6px/12px 周期の横縞（走査線）を全面に敷き、カードは 1px 枠＋10px 角丸。見出しは英字大文字＋字間で『放送素材』の顔になる。
   -------------------------------------------------------------------------- */
body.preset-scanline {
  --pi-bg: #111111;
  --pi-panel: #1a1a1a;
  --pi-paper: #f8fafc;
  --pi-muted: #a8b0bd;
  --pi-line: #3a3a44;
  --pi-green: #7ee787;
  --pi-red: #ff6b6b;
  --pi-accent-sub: #a78bfa;
  --pi-accent-text: #c4b5fd;
  --pi-accent-border: #5b4b8a;
  --pi-shadow: #000000;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-scanline {
  background-image: repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--pi-bg) 100%, #000) 0 6px,
      color-mix(in srgb, var(--pi-bg) 55%, #000) 6px 12px
    );
}

body.layout-scanline .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-scanline .article h2 {
  margin: 40px 0 14px;
  padding: 0 0 8px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-bottom: 1px solid var(--pi-line);
  border-radius: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}


body.layout-scanline .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 10px;
  transition: border-color .15s ease;
}
body.layout-scanline .p-card:hover { border-color: var(--pi-accent-border); }
body.layout-scanline .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 3px solid var(--pi-accent-sub);
  border-radius: 10px;
}


@media (max-width: 640px) {
  body.layout-scanline .article h2 { margin-top: 26px; }
  body.layout-scanline .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   cutcorner — 角落ち（ニュースポートレート）
   出典: www.polygon.com / www.wizards.com
   なぜ別物に見えるか: 画像の左上だけを斜めに落とす clip-path。カードも同じ角度で落とすので、面の輪郭が全部同じ方向を向く。
   -------------------------------------------------------------------------- */
body.preset-cutcorner {
  --pi-bg: #1c1a1a;
  --pi-panel: #262324;
  --pi-paper: #ffffff;
  --pi-muted: #b9b3b3;
  --pi-line: #3d3838;
  --pi-green: #66ff75;
  --pi-red: #ff5c5c;
  --pi-accent-sub: #66ff75;
  --pi-accent-text: #8dffa0;
  --pi-accent-border: #2f6b36;
  --pi-shadow: #0d0c0c;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-cutcorner {
}

body.layout-cutcorner .hero-img.hero-wide {
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
  border-radius: 0;
}
body.layout-cutcorner .hero .wrap { position: relative; }
body.layout-cutcorner .hero .wrap::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  background: linear-gradient(225deg, var(--pi-accent-sub) 0 50%, transparent 50%);
  pointer-events: none;
  z-index: 2;
}


body.layout-cutcorner .article h2 {
  margin: 44px 0 16px;
  padding: 0;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
}


body.layout-cutcorner .p-card {
  padding: 12px 14px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 10px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: background .15s ease;
}
body.layout-cutcorner .p-card:hover { background: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-accent-sub)); }
body.layout-cutcorner .c-answer {
  background: var(--pi-panel);
  border: 0;
  border-left: 4px solid var(--pi-accent-sub);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}


@media (max-width: 640px) {
  body.layout-cutcorner .article h2 { margin-top: 26px; }
  body.layout-cutcorner .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   hud — HUD（四隅ブラケット）
   出典: www.streetfighter.com / www.cyberpunk.net（帯と点）
   なぜ別物に見えるか: 枠を線で閉じず、四隅だけ 2px のブラケットで示す。中身は黒、文字は蛍光黄。『計器の中』に見える。
   -------------------------------------------------------------------------- */
body.preset-hud {
  --pi-bg: #000000;
  --pi-panel: #0d0d0d;
  --pi-paper: #ffffff;
  --pi-muted: #9a9a9a;
  --pi-line: #333333;
  --pi-green: #ffea61;
  --pi-red: #e2ca23;
  --pi-accent-sub: #ffea61;
  --pi-accent-text: #ffe97a;
  --pi-accent-border: #8a7c1f;
  --pi-shadow: #000000;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-hud {
  background-image: radial-gradient(color-mix(in srgb, var(--pi-line) 85%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
}

body.layout-hud .hero-img.hero-wide {
  border: 0;
  border-radius: 0;
  outline: 1px solid color-mix(in srgb, var(--pi-accent-sub) 60%, transparent);
  outline-offset: 4px;
}


body.layout-hud .article h2 {
  position: relative;
  margin: 40px 0 16px;
  padding: 10px 0;
  background: none;
  color: var(--pi-accent-text);
  border: 0;
  border-radius: 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.layout-hud .article h2::before,
body.layout-hud .article h2::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--pi-accent-sub);
}
body.layout-hud .article h2::before { top: 0; }
body.layout-hud .article h2::after {
  bottom: 0;
  width: 34%;
  background: color-mix(in srgb, var(--pi-accent-sub) 45%, transparent);
}


body.layout-hud .p-card {
  position: relative;
  padding: 13px 14px;
  background: var(--pi-panel);
  border: 1px solid color-mix(in srgb, var(--pi-line) 70%, transparent);
  border-radius: 0;
}
body.layout-hud .p-card::before,
body.layout-hud .p-card::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid var(--pi-accent-sub);
  pointer-events: none;
}
body.layout-hud .p-card::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
}
body.layout-hud .p-card::after {
  bottom: -1px; right: -1px;
  border-left: 0; border-top: 0;
}
body.layout-hud .p-card:hover { border-color: var(--pi-accent-border); }
body.layout-hud .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 4px solid var(--pi-accent-sub);
  border-radius: 0;
}


@media (max-width: 640px) {
  body.layout-hud .article h2 { margin-top: 26px; }
  body.layout-hud .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   sectionplate — セクションプレート（番号付き台紙）
   出典: g-soragundam.com
   なぜ別物に見えるか: h2 が『台紙』になり、右上に SECTION 01 の通し番号、左上に小さな角マークが乗る。見出しが章の扉になる。
   -------------------------------------------------------------------------- */
body.preset-sectionplate {
  --pi-bg: #f7f7f7;
  --pi-panel: #f0e9e7;
  --pi-paper: #2b2f34;
  --pi-muted: #656970;
  --pi-line: #d9cfcc;
  --pi-green: #3d6b53;
  --pi-red: #a65b61;
  --pi-accent-sub: #9d555b;
  --pi-accent-text: #8d4a50;
  --pi-accent-border: #c9b6b3;
  --pi-shadow: #e2dcda;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-sectionplate {
}

body.layout-sectionplate .hero-img.hero-wide {
  padding: 6px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
}


body.layout-sectionplate .article h2 {
  position: relative;
  margin: 40px 0 16px;
  padding: 12px 16px;
  background: var(--pi-panel);
  color: var(--pi-paper);
  border: 0;
  border-left: 4px solid var(--pi-accent-sub);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
body.layout-sectionplate .article h2::after {
  content: "SECTION";
  position: absolute;
  top: 6px; right: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: color-mix(in srgb, var(--pi-accent-sub) 80%, transparent);
}


body.layout-sectionplate .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
}
body.layout-sectionplate .p-card:hover { border-color: var(--pi-accent-border); }
body.layout-sectionplate .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 4px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-sectionplate .article h2 { margin-top: 26px; }
  body.layout-sectionplate .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   checker — チェッカー（個人サイトのタイル）
   出典: nekoweb.org
   なぜ別物に見えるか: 10px の市松を帯に敷き、カードは 2px の二重枠。90年代の個人ページの質感をそのまま持つ。
   -------------------------------------------------------------------------- */
body.preset-checker {
  --pi-bg: #fff9e6;
  --pi-panel: #f5e9d6;
  --pi-paper: #634c53;
  --pi-muted: #7c646a;
  --pi-line: #c9a9a2;
  --pi-green: #3f6b52;
  --pi-red: #a8433f;
  --pi-accent-sub: #875f6b;
  --pi-accent-text: #6f4b56;
  --pi-accent-border: #a8858c;
  --pi-shadow: #d8c3b4;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-checker {
  background-image: repeating-conic-gradient(
      color-mix(in srgb, var(--pi-line) 30%, transparent) 0% 25%,
      transparent 0% 50%
    );
  background-size: 10px 10px;
}

body.layout-checker .hero-img.hero-wide {
  border: 2px solid var(--pi-panel);
  outline: 2px solid var(--pi-line);
  outline-offset: 2px;
}


body.layout-checker .article h2 {
  margin: 34px 0 14px;
  padding: 0 0 7px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-bottom: 3px double var(--pi-line);
  border-radius: 0;
  font-size: 21px;
  font-weight: 700;
}


body.layout-checker .p-card {
  padding: 12px 13px;
  background: var(--pi-panel);
  border: 3px double var(--pi-line);
  border-radius: 2px;
}
body.layout-checker .p-card:hover { border-color: var(--pi-accent-sub); }
body.layout-checker .c-answer {
  background: var(--pi-panel);
  border: 3px double var(--pi-line);
  border-left: 6px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-checker .article h2 { margin-top: 26px; }
  body.layout-checker .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   retroplate — レトロ台紙（太枠＋段組み）
   出典: cupheadgame.com / factorio.com
   なぜ別物に見えるか: 6px/4px の太枠と、紙色の地。角丸ゼロ。線の太さだけで『印刷物』になる。
   -------------------------------------------------------------------------- */
body.preset-retroplate {
  --pi-bg: #fff9e6;
  --pi-panel: #fdf3d8;
  --pi-paper: #433851;
  --pi-muted: #796985;
  --pi-line: #433851;
  --pi-green: #2f6b4f;
  --pi-red: #b63832;
  --pi-accent-sub: #d32f00;
  --pi-accent-text: #c22f06;
  --pi-accent-border: #433851;
  --pi-shadow: #433851;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-retroplate {
  background-image: radial-gradient(color-mix(in srgb, var(--pi-paper) 22%, transparent) 0.6px, transparent 0.7px);
  background-size: 6px 6px;
}

body.layout-retroplate .hero-img.hero-wide {
  border: 4px solid var(--pi-line);
  border-radius: 0;
}


body.layout-retroplate .article h2 {
  margin: 34px 0 14px;
  padding: 0 0 6px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-bottom: 6px solid var(--pi-accent-sub);
  border-radius: 0;
  font-size: 22px;
  font-weight: 800;
}


body.layout-retroplate .p-card {
  padding: 12px 13px;
  background: var(--pi-panel);
  border: 3px solid var(--pi-line);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--pi-accent-sub);
  transition: transform .1s ease, box-shadow .1s ease;
}
body.layout-retroplate .p-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--pi-accent-sub);
}
body.layout-retroplate .c-answer {
  background: var(--pi-panel);
  border: 3px solid var(--pi-line);
  border-left: 8px solid var(--pi-accent-sub);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--pi-shadow, rgba(0, 0, 0, .2));
}


@media (max-width: 640px) {
  body.layout-retroplate .article h2 { margin-top: 26px; }
  body.layout-retroplate .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   plateau — 高原（4px の重い枠＋内側の影）
   出典: factorio.com
   なぜ別物に見えるか: 4px の暗い枠に、内側 3px の影。パネルが『金属板』になる。角丸ゼロ・字は太く。
   -------------------------------------------------------------------------- */
body.preset-plateau {
  --pi-bg: #201810;
  --pi-panel: #313031;
  --pi-paper: #ffffff;
  --pi-muted: #b9b2a8;
  --pi-line: #2e2623;
  --pi-green: #5eb663;
  --pi-red: #d9534f;
  --pi-accent-sub: #7dcaed;
  --pi-accent-text: #a8e0f7;
  --pi-accent-border: #3a5a68;
  --pi-shadow: #0f0d0c;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-plateau {
}

body.layout-plateau .hero-img.hero-wide {
  border: 4px solid var(--pi-line);
  border-radius: 0;
  box-shadow: inset 0 0 3px var(--pi-shadow, #000), 0 2px 0 color-mix(in srgb, var(--pi-bg) 60%, #000);
}


body.layout-plateau .article h2 {
  margin: 34px 0 12px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--pi-panel) 80%, #000);
  color: var(--pi-accent-text);
  border: 3px solid var(--pi-line);
  border-radius: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .04em;
}


body.layout-plateau .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 4px solid var(--pi-line);
  border-radius: 0;
  box-shadow: inset 0 0 3px var(--pi-shadow, #000);
  transition: border-color .12s ease;
}
body.layout-plateau .p-card:hover { border-color: var(--pi-accent-border); }
body.layout-plateau .c-answer {
  background: var(--pi-panel);
  border: 4px solid var(--pi-line);
  border-left: 6px solid var(--pi-accent-sub);
  border-radius: 0;
  box-shadow: inset 0 0 3px var(--pi-shadow, #000);
}


@media (max-width: 640px) {
  body.layout-plateau .article h2 { margin-top: 26px; }
  body.layout-plateau .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   blackboard — 黒板（緑地×チョーク枠）
   出典: www.cavesofqud.com
   なぜ別物に見えるか: 深緑の地に 8px の白枠。中身が『掲示』に見える。等幅フォントと組むと一気に別物になる。
   -------------------------------------------------------------------------- */
body.preset-blackboard {
  --pi-bg: #061c17;
  --pi-panel: #0d2a22;
  --pi-paper: #c1d3d6;
  --pi-muted: #8fa8a4;
  --pi-line: #2c4a42;
  --pi-green: #5dc125;
  --pi-red: #bb3234;
  --pi-accent-sub: #58cabc;
  --pi-accent-text: #8fe0d6;
  --pi-accent-border: #2f6b62;
  --pi-shadow: #030f0c;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-blackboard {
  background-image: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--pi-panel) 92%, #fff) 0%, var(--pi-bg) 72%);
}

body.layout-blackboard .hero-img.hero-wide {
  border: 4px solid var(--pi-line);
  border-radius: 0;
}


body.layout-blackboard .article h2 {
  margin: 34px 0 14px;
  padding: 0 0 8px;
  background: none;
  color: var(--pi-green);
  border: 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--pi-paper) 45%, transparent);
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
}


body.layout-blackboard .p-card {
  padding: 12px 13px;
  background: var(--pi-bg);
  border: 8px solid color-mix(in srgb, var(--pi-paper) 78%, var(--pi-bg));
  border-radius: 0;
}
body.layout-blackboard .p-card:hover { border-color: var(--pi-accent-sub); }
body.layout-blackboard .c-answer {
  background: var(--pi-bg);
  border: 6px solid color-mix(in srgb, var(--pi-paper) 70%, var(--pi-bg));
  border-left: 10px solid var(--pi-accent-sub);
  border-radius: 0;
}


@media (max-width: 640px) {
  body.layout-blackboard .article h2 { margin-top: 26px; }
  body.layout-blackboard .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   tablabel — 耳タブ見出し（フォルダ）
   出典: www.sega.jp / game-best.jp（帯見出し）
   なぜ別物に見えるか: h2 の上に 9px の帯が乗り、右端に 108px の耳が付く。見出しが『ファイルの見出し』になる。
   -------------------------------------------------------------------------- */
body.preset-tablabel {
  --pi-bg: #f3f3f3;
  --pi-panel: #ffffff;
  --pi-paper: #333333;
  --pi-muted: #6b6b6b;
  --pi-line: #d5d5d5;
  --pi-green: #1f6f43;
  --pi-red: #c0392b;
  --pi-accent-sub: #2a5ea8;
  --pi-accent-text: #1d4a86;
  --pi-accent-border: #9fb4cf;
  --pi-shadow: #dcdcdc;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-tablabel {
}

body.layout-tablabel .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-tablabel .article h2 {
  position: relative;
  margin: 44px 0 16px;
  padding: 12px 16px 10px;
  background: var(--pi-panel);
  color: var(--pi-paper);
  border: 1px solid var(--pi-line);
  border-radius: 0;
  font-size: 19px;
}
body.layout-tablabel .article h2::before {
  content: "";
  position: absolute;
  top: -9px; left: -1px;
  width: calc(100% + 2px); height: 9px;
  background: var(--pi-accent-sub);
}
body.layout-tablabel .article h2::after {
  content: "";
  position: absolute;
  top: -9px; right: -28px;
  width: 28px; height: 9px;
  background: color-mix(in srgb, var(--pi-accent-sub) 55%, transparent);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}


body.layout-tablabel .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-tablabel .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-tablabel .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-tablabel .article h2 { margin-top: 26px; }
  body.layout-tablabel .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   ribbon — リボン帯（斜めの帯見出し）
   出典: game-best.jp / gameslife.jp / outstandingsteps.com（Cocoon 系テンプレ）
   なぜ別物に見えるか: h2 の後ろに -4px ずらした 69px の帯（::before）を敷く。文字は白。帯の端が少しはみ出して『貼った』感じになる。
   -------------------------------------------------------------------------- */
body.preset-ribbon {
  --pi-bg: #f9f7d2;
  --pi-panel: #ffffff;
  --pi-paper: #333333;
  --pi-muted: #6a6a6a;
  --pi-line: #dcd7b8;
  --pi-green: #1f6f43;
  --pi-red: #c0392b;
  --pi-accent-sub: #021458;
  --pi-accent-text: #021458;
  --pi-accent-border: #8f97b8;
  --pi-shadow: #c9c4a6;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-ribbon {
}

body.layout-ribbon .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-ribbon .article h2 {
  position: relative;
  margin: 40px 0 18px;
  padding: 12px 18px;
  background: none;
  color: var(--pi-accent-text);
  border: 0;
  border-radius: 0;
  font-size: 19px;
  isolation: isolate;
}
body.layout-ribbon .article h2::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  background: var(--pi-accent-sub);
  border-radius: 3px;
  z-index: -1;
  transform: skewX(-2deg);
}
body.layout-ribbon .article h2::after {
  content: "";
  position: absolute;
  left: -4px; bottom: -10px;
  width: 40%; height: 6px;
  background: color-mix(in srgb, var(--pi-accent-sub) 45%, transparent);
  z-index: -1;
}


body.layout-ribbon .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-ribbon .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-ribbon .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-ribbon .article h2 { margin-top: 26px; }
  body.layout-ribbon .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   bracketcorner — 四隅マーク（小さな角の点）
   出典: skyparadaisu.com
   なぜ別物に見えるか: h2 の左上と右上に 20px/15px の小さな四角を置くだけ。線を引かずに『区切られている』感を作る最短手。
   -------------------------------------------------------------------------- */
body.preset-bracketcorner {
  --pi-bg: #f4f5f7;
  --pi-panel: #ffffff;
  --pi-paper: #333333;
  --pi-muted: #6b7280;
  --pi-line: #dde1e6;
  --pi-green: #28855b;
  --pi-red: #d9534f;
  --pi-accent-sub: #077faf;
  --pi-accent-text: #06719b;
  --pi-accent-border: #9fc9da;
  --pi-shadow: #e3e6ea;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-bracketcorner {
}

body.layout-bracketcorner .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-bracketcorner .article h2 {
  position: relative;
  margin: 34px 0 14px;
  padding: 8px 16px;
  background: var(--pi-panel);
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 19px;
}
body.layout-bracketcorner .article h2::before,
body.layout-bracketcorner .article h2::after {
  content: "";
  position: absolute;
}
body.layout-bracketcorner .article h2::before {
  top: 6px; left: 6px;
  width: 20px; height: 20px;
  background: var(--pi-accent-sub);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
body.layout-bracketcorner .article h2::after {
  top: 6px; right: 6px;
  width: 15px; height: 15px;
  background: var(--pi-green);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}


body.layout-bracketcorner .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-bracketcorner .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-bracketcorner .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-bracketcorner .article h2 { margin-top: 26px; }
  body.layout-bracketcorner .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   verticalbar — 極太バー（6px の縦線）
   出典: www.gamer.ne.jp
   なぜ別物に見えるか: h2 の左に 6px×28px のバー。色を章ごとに変える（青→紫）。線の太さで強度を出す。
   -------------------------------------------------------------------------- */
body.preset-verticalbar {
  --pi-bg: #f5f5f7;
  --pi-panel: #ffffff;
  --pi-paper: #333333;
  --pi-muted: #6b7280;
  --pi-line: #e2e4e9;
  --pi-green: #1f6f43;
  --pi-red: #c0392b;
  --pi-accent-sub: #2854f1;
  --pi-accent-text: #1f43c4;
  --pi-accent-border: #a9b7f0;
  --pi-shadow: #e5e7ec;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-verticalbar {
}

body.layout-verticalbar .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-verticalbar .article h2 {
  position: relative;
  margin: 34px 0 14px;
  padding: 2px 0 2px 18px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 20px;
  font-weight: 700;
}
body.layout-verticalbar .article h2::before {
  content: "";
  position: absolute;
  top: 2px; left: 0;
  width: 6px; height: calc(100% - 4px);
  background: var(--pi-accent-sub);
}


body.layout-verticalbar .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-verticalbar .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-verticalbar .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-verticalbar .article h2 { margin-top: 26px; }
  body.layout-verticalbar .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   inkframe — 墨枠（細い縦線＋太い下線）
   出典: sakon6172.com
   なぜ別物に見えるか: h2 の右端に 5px×30px の縦マーク、h3 は左 3px の斜めカット。細い線を『点』として置く。
   -------------------------------------------------------------------------- */
body.preset-inkframe {
  --pi-bg: #f2f2f2;
  --pi-panel: #ffffff;
  --pi-paper: #222428;
  --pi-muted: #6c6f75;
  --pi-line: #d8d8d8;
  --pi-green: #1f6f43;
  --pi-red: #b03a2e;
  --pi-accent-sub: #222428;
  --pi-accent-text: #222428;
  --pi-accent-border: #9a9da3;
  --pi-shadow: #dedede;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-inkframe {
}

body.layout-inkframe .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-inkframe .article h2 {
  position: relative;
  margin: 34px 0 14px;
  padding: 4px 0;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 20px;
  font-weight: 700;
}
body.layout-inkframe .article h2::after {
  content: "";
  position: absolute;
  top: 50%; right: 0;
  width: 5px; height: 30px;
  margin-top: -15px;
  background: var(--pi-paper);
}


body.layout-inkframe .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-inkframe .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-inkframe .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-inkframe .article h2 { margin-top: 26px; }
  body.layout-inkframe .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   lightcard — 淡色カード（面で区切る）
   出典: tannbura.com
   なぜ別物に見えるか: h2 の地を淡いピンクにし、文字を緑にする。線を引かず面の色だけで区切る。
   -------------------------------------------------------------------------- */
body.preset-lightcard {
  --pi-bg: #fafafa;
  --pi-panel: #fedfe1;
  --pi-paper: #2b2b2b;
  --pi-muted: #676767;
  --pi-line: #e6d3d5;
  --pi-green: #3b734d;
  --pi-red: #b03a2e;
  --pi-accent-sub: #3a7254;
  --pi-accent-text: #3d7d5a;
  --pi-accent-border: #bcd9c8;
  --pi-shadow: #e8e8e8;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-lightcard {
}

body.layout-lightcard .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-lightcard .article h2 {
  margin: 34px 0 14px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--pi-accent-sub) 22%, var(--pi-panel));
  color: var(--pi-green);
  border: 0;
  border-radius: 2px;
  font-size: 20px;
  font-weight: 700;
}


body.layout-lightcard .p-card {
  padding: 11px 12px;
  background: color-mix(in srgb, var(--pi-accent-sub) 12%, var(--pi-panel));
  border: 1px solid color-mix(in srgb, var(--pi-accent-sub) 30%, var(--pi-line));
  border-radius: 8px;
  transition: background .12s ease;
}
body.layout-lightcard .p-card:hover { background: color-mix(in srgb, var(--pi-accent-sub) 20%, var(--pi-panel)); }
body.layout-lightcard .c-answer {
  background: color-mix(in srgb, var(--pi-accent-sub) 14%, var(--pi-panel));
  border: 0;
  border-left: 5px solid var(--pi-green);
  border-radius: 8px;
}


@media (max-width: 640px) {
  body.layout-lightcard .article h2 { margin-top: 26px; }
  body.layout-lightcard .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   doubleline — 二重罫（上下の細線）
   出典: kojin-kara-houjin.com
   なぜ別物に見えるか: h2 の上下に 5px の線を左右に振り分けて置く。見出しの天地が『挟まれて』見える。
   -------------------------------------------------------------------------- */
body.preset-doubleline {
  --pi-bg: #d8eeff;
  --pi-panel: #ffffff;
  --pi-paper: #333333;
  --pi-muted: #5f7284;
  --pi-line: #b8d4e8;
  --pi-green: #1f6f43;
  --pi-red: #b03a2e;
  --pi-accent-sub: #2f6f9f;
  --pi-accent-text: #255a82;
  --pi-accent-border: #a8c8dd;
  --pi-shadow: #c3dced;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-doubleline {
}

body.layout-doubleline .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-doubleline .article h2 {
  position: relative;
  margin: 34px 0 14px;
  padding: 12px 0;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 20px;
  font-weight: 700;
}
body.layout-doubleline .article h2::before,
body.layout-doubleline .article h2::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 5px;
  background: var(--pi-accent-sub);
}
body.layout-doubleline .article h2::before { top: 0; }
body.layout-doubleline .article h2::after { bottom: 0; width: 62%; }


body.layout-doubleline .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-doubleline .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-doubleline .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-doubleline .article h2 { margin-top: 26px; }
  body.layout-doubleline .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   asphalt — アスファルト（暗い地に細い罫）
   出典: www.neogaf.com
   なぜ別物に見えるか: 暗い地に 1px の細い罫だけ。色数を落として、写真の彩度だけが浮く。
   -------------------------------------------------------------------------- */
body.preset-asphalt {
  --pi-bg: #222325;
  --pi-panel: #141414;
  --pi-paper: #dedede;
  --pi-muted: #9a9a9a;
  --pi-line: #333333;
  --pi-green: #7fb069;
  --pi-red: #e05c5c;
  --pi-accent-sub: #ff9900;
  --pi-accent-text: #ffb347;
  --pi-accent-border: #7a5200;
  --pi-shadow: #0a0a0a;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-asphalt {
}

body.layout-asphalt .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-asphalt .article h2 {
  margin: 34px 0 14px;
  padding: 10px 14px;
  background: linear-gradient(0deg, var(--pi-panel), color-mix(in srgb, var(--pi-panel) 55%, #000));
  color: var(--pi-paper);
  border: 0;
  border-radius: 6px;
  font-size: 19px;
  font-weight: 700;
}


body.layout-asphalt .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 10px;
  transition: border-color .15s ease;
}
body.layout-asphalt .p-card:hover { border-color: var(--pi-accent-border); }
body.layout-asphalt .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 3px solid var(--pi-accent-sub);
  border-radius: 10px;
}


@media (max-width: 640px) {
  body.layout-asphalt .article h2 { margin-top: 26px; }
  body.layout-asphalt .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   stripe45 — 斜めストライプ（45度の細縞）
   出典: ponkotufamily.com（hero 帯）
   なぜ別物に見えるか: 45度・3px/6px の細い縞をヒーロー帯にだけ敷く。地は無地のまま、帯だけ『布』になる。
   -------------------------------------------------------------------------- */
body.preset-stripe45 {
  --pi-bg: #ffffff;
  --pi-panel: #f7f7f7;
  --pi-paper: #2e2e2e;
  --pi-muted: #707070;
  --pi-line: #dcdcdc;
  --pi-green: #1f6f43;
  --pi-red: #b03a2e;
  --pi-accent-sub: #5a5a5a;
  --pi-accent-text: #3f3f3f;
  --pi-accent-border: #b5b5b5;
  --pi-shadow: #e4e4e4;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-stripe45 {
  background-image: repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--pi-line) 34%, transparent) 0 3px,
      transparent 3px 6px
    );
}

body.layout-stripe45 .hero .wrap {
  padding: 10px;
  background-image: repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--pi-line) 34%, transparent) 0 3px,
      transparent 3px 6px
    );
  background-color: var(--pi-panel);
  border: 1px solid var(--pi-line);
}
body.layout-stripe45 .hero-img.hero-wide { border: 1px solid var(--pi-line); }


body.layout-stripe45 .article h2 {
  margin: 34px 0 14px;
  padding: 0 0 6px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-bottom: 1px solid var(--pi-line);
  border-radius: 0;
  font-size: 20px;
  font-weight: 700;
}


body.layout-stripe45 .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-stripe45 .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-stripe45 .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-stripe45 .article h2 { margin-top: 26px; }
  body.layout-stripe45 .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   hologrid — ホログリッド（50px の方眼＋円）
   出典: ponkotufamily.com（目次ブロック）
   なぜ別物に見えるか: 50px 方眼の上に円（radial-gradient）を重ねる。目次や要点ボックスに敷くと『図面』になる。
   -------------------------------------------------------------------------- */
body.preset-hologrid {
  --pi-bg: #fafafa;
  --pi-panel: #ffffff;
  --pi-paper: #2b2b2b;
  --pi-muted: #6b6b6b;
  --pi-line: #e0e0e0;
  --pi-green: #1f6f43;
  --pi-red: #b03a2e;
  --pi-accent-sub: #4a6fa5;
  --pi-accent-text: #3a5885;
  --pi-accent-border: #b8c6d8;
  --pi-shadow: #e6e6e6;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-hologrid {
  background-image: radial-gradient(circle, transparent 20%, color-mix(in srgb, var(--pi-panel) 92%, transparent) 20% 80%, transparent 80%),
    linear-gradient(to right, color-mix(in srgb, var(--pi-line) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--pi-line) 60%, transparent) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 50px 50px;
}

body.layout-hologrid .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-hologrid .article h2 {
  margin: 34px 0 14px;
  padding: 0 0 6px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-bottom: 1px solid var(--pi-line);
  border-radius: 0;
  font-size: 20px;
  font-weight: 700;
}


body.layout-hologrid .p-card {
  padding: 11px 12px;
  background-color: var(--pi-panel);
  background-image: linear-gradient(to right, color-mix(in srgb, var(--pi-line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--pi-line) 55%, transparent) 1px, transparent 1px);
  background-size: 12px 12px;
  border: 1px solid var(--pi-line);
  border-radius: 2px;
}
body.layout-hologrid .p-card:hover { border-color: var(--pi-accent-sub); }
body.layout-hologrid .c-answer {
  background-color: var(--pi-panel);
  background-image: linear-gradient(to right, color-mix(in srgb, var(--pi-line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--pi-line) 55%, transparent) 1px, transparent 1px);
  background-size: 12px 12px;
  border: 1px solid var(--pi-line);
  border-left: 6px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-hologrid .article h2 { margin-top: 26px; }
  body.layout-hologrid .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   chalkpaper — 紙のノイズ（SVG feTurbulence）
   出典: www.resetera.com（data:image/svg のグラデ帯）／一般則としての紙ノイズ
   なぜ別物に見えるか: 外部画像を持たずに紙の粒子を出すには、SVG の feTurbulence を data URI で敷くのが最短。粒子は 3〜6% の不透明度に抑える。
   -------------------------------------------------------------------------- */
body.preset-chalkpaper {
  --pi-bg: #f9f9f9;
  --pi-panel: #ffffff;
  --pi-paper: #333333;
  --pi-muted: #6f6f6f;
  --pi-line: #e0e0e0;
  --pi-green: #1f6f43;
  --pi-red: #b03a2e;
  --pi-accent-sub: #7f1eff;
  --pi-accent-text: #6a19d6;
  --pi-accent-border: #c9b0f0;
  --pi-shadow: #e8e8e8;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-chalkpaper {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body.layout-chalkpaper .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-chalkpaper .article h2 {
  margin: 34px 0 14px;
  padding: 0 0 6px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-bottom: 1px solid var(--pi-line);
  border-radius: 0;
  font-size: 20px;
  font-weight: 700;
}


body.layout-chalkpaper .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-chalkpaper .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-chalkpaper .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-chalkpaper .article h2 { margin-top: 26px; }
  body.layout-chalkpaper .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   pixel — ピクセル（2px 実線・角丸ゼロ）
   出典: deltarune.com
   なぜ別物に見えるか: 2px の実線を角丸ゼロで置くだけ。地は純黒、アクセントは蛍光黄。線の『硬さ』と色数だけで別物になる。
   -------------------------------------------------------------------------- */
body.preset-pixel {
  --pi-bg: #000000;
  --pi-panel: #0a0a0a;
  --pi-paper: #ffffff;
  --pi-muted: #b0b0b0;
  --pi-line: #0000ff;
  --pi-green: #f9ff10;
  --pi-red: #e40016;
  --pi-accent-sub: #f9ff10;
  --pi-accent-text: #f9ff10;
  --pi-accent-border: #0000ff;
  --pi-shadow: #0000ff;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-pixel {
}

body.layout-pixel .hero-img.hero-wide {
  border: 4px solid var(--pi-line);
  border-radius: 0;
}


body.layout-pixel .article h2 {
  margin: 34px 0 14px;
  padding: 0 0 8px;
  background: none;
  color: var(--pi-green);
  border: 0;
  border-bottom: 2px solid var(--pi-accent-border);
  border-radius: 0;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--pi-accent-border) 70%, transparent);
}


body.layout-pixel .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 2px solid var(--pi-line);
  border-radius: 0;
  transition: border-color .1s steps(2), transform .1s steps(2);
}
body.layout-pixel .p-card:hover {
  border-color: var(--pi-accent-sub);
  transform: translate(-2px, -2px);
}
body.layout-pixel .c-answer {
  background: var(--pi-panel);
  border: 2px solid var(--pi-line);
  border-left: 8px solid var(--pi-accent-sub);
  border-radius: 0;
}


@media (max-width: 640px) {
  body.layout-pixel .article h2 { margin-top: 26px; }
  body.layout-pixel .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   roughedge — ラフエッジ（手で切った輪郭）
   出典: slayersclub.bethesda.net
   なぜ別物に見えるか: clip-path の polygon を 1〜3px ずつ揺らして、紙を手で切ったような輪郭にする。直線の枠より『印刷物』に見える。
   -------------------------------------------------------------------------- */
body.preset-roughedge {
  --pi-bg: #000000;
  --pi-panel: #101010;
  --pi-paper: #ffffff;
  --pi-muted: #999999;
  --pi-line: #2e2e2e;
  --pi-green: #00a499;
  --pi-red: #c0392b;
  --pi-accent-sub: #00a499;
  --pi-accent-text: #2fd6c8;
  --pi-accent-border: #0a5c56;
  --pi-shadow: #000000;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-roughedge {
}

body.layout-roughedge .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-roughedge .article h2 {
  margin: 34px 0 14px;
  padding: 0;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 19px;
  font-weight: 500;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, .6);
}


body.layout-roughedge .p-card {
  padding: 13px 14px;
  background: var(--pi-panel);
  border: 0;
  border-radius: 0;
  clip-path: polygon(3px 0, 40% 2%, 100% 0, 100% 98%, 65% 100%, 45% 97%, 0 97%);
  box-shadow: 0 0 5px color-mix(in srgb, var(--pi-paper) 25%, transparent);
  transition: box-shadow .15s ease;
}
body.layout-roughedge .p-card:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--pi-accent-sub) 55%, transparent); }
body.layout-roughedge .c-answer {
  background: var(--pi-panel);
  border: 0;
  border-left: 4px solid var(--pi-accent-sub);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 1%, 100% 100%, 2% 99%);
}


@media (max-width: 640px) {
  body.layout-roughedge .article h2 { margin-top: 26px; }
  body.layout-roughedge .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   glowamber — アンバーグロウ（丸＋発光）
   出典: www.orithegame.com
   なぜ別物に見えるか: 25px の大きな角丸に、文字は 8px の黒い発光（text-shadow）。地は黒。柔らかい輪郭と硬い発光の対比で別物になる。
   -------------------------------------------------------------------------- */
body.preset-glowamber {
  --pi-bg: #000000;
  --pi-panel: #0c0c0c;
  --pi-paper: #ffffff;
  --pi-muted: #a8a8a8;
  --pi-line: #2a2a2a;
  --pi-green: #feb72f;
  --pi-red: #d94f3d;
  --pi-accent-sub: #feb72f;
  --pi-accent-text: #ffd27a;
  --pi-accent-border: #7a5a1c;
  --pi-shadow: #000000;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-glowamber {
  background-image: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--pi-panel) 92%, #fff) 0%, var(--pi-bg) 72%);
}

body.layout-glowamber .hero-img.hero-wide {
  border: 0;
  border-radius: 25px;
  box-shadow: 0 18px 50px -20px var(--pi-shadow, #000);
}


body.layout-glowamber .article h2 {
  margin: 44px 0 18px;
  padding: 0;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(0, 0, 0, .8);
}


body.layout-glowamber .p-card {
  padding: 13px 15px;
  background: var(--pi-panel);
  border: 0;
  border-radius: 25px;
  transition: background .15s ease, transform .15s ease;
}
body.layout-glowamber .p-card:hover {
  background: color-mix(in srgb, var(--pi-panel) 85%, var(--pi-accent-sub));
  transform: translateY(-2px);
}
body.layout-glowamber .c-answer {
  background: var(--pi-panel);
  border: 0;
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 25px;
}


@media (max-width: 640px) {
  body.layout-glowamber .article h2 { margin-top: 26px; }
  body.layout-glowamber .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   neoncut — ネオンカット（極細＋蛍光）
   出典: www.cyberpunk.net / www.tekken-official.jp
   なぜ別物に見えるか: 地は黒、アクセントは蛍光黄。枠は 2px の実線で角丸ゼロ、ホバーで発光。色を2色に絞ると『機械の画面』になる。
   -------------------------------------------------------------------------- */
body.preset-neoncut {
  --pi-bg: #000000;
  --pi-panel: #0a0a0a;
  --pi-paper: #ffffff;
  --pi-muted: #9a9a9a;
  --pi-line: #ffea00;
  --pi-green: #00f0ff;
  --pi-red: #ff003c;
  --pi-accent-sub: #ffea00;
  --pi-accent-text: #ffea00;
  --pi-accent-border: #ffea00;
  --pi-shadow: #000000;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-neoncut {
  background-image: repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      color-mix(in srgb, var(--pi-line) 10%, transparent) 3px 4px
    );
}

body.layout-neoncut .hero-img.hero-wide {
  border: 2px solid var(--pi-accent-sub);
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--pi-bg), 0 0 18px -6px var(--pi-accent-sub);
}


body.layout-neoncut .article h2 {
  margin: 34px 0 14px;
  padding: 10px 14px;
  background: var(--pi-accent-sub);
  color: var(--pi-bg);
  border: 0;
  border-radius: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
}


body.layout-neoncut .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 2px solid var(--pi-line);
  border-radius: 0;
  transition: box-shadow .15s ease, border-color .15s ease;
}
body.layout-neoncut .p-card:hover {
  border-color: var(--pi-accent-sub);
  box-shadow: 0 0 12px -2px var(--pi-accent-sub);
}
body.layout-neoncut .c-answer {
  background: var(--pi-panel);
  border: 2px solid var(--pi-accent-border);
  border-left: 8px solid var(--pi-accent-sub);
  border-radius: 0;
}


@media (max-width: 640px) {
  body.layout-neoncut .article h2 { margin-top: 26px; }
  body.layout-neoncut .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   starnight — 星夜（SVG星屑＋硬い影）
   出典: ojicra.tokyo
   なぜ別物に見えるか: 星屑の SVG を 320px で敷き、その上に深い青のグラデ。ヒーローは 3px 黒枠＋6px の硬い影。暗い地でも『紙の切り貼り』の質感が残る。
   -------------------------------------------------------------------------- */
body.preset-starnight {
  --pi-bg: #0d1220;
  --pi-panel: #121a2e;
  --pi-paper: #ece8da;
  --pi-muted: #9aa7bd;
  --pi-line: #2a3550;
  --pi-green: #7cc14e;
  --pi-red: #d9534f;
  --pi-accent-sub: #f6b238;
  --pi-accent-text: #ffc861;
  --pi-accent-border: #6b4f1c;
  --pi-shadow: #05070d;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-starnight {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23ffffff' opacity='0.5'%3E%3Ccircle cx='12' cy='40' r='1'/%3E%3Ccircle cx='88' cy='18' r='0.8'/%3E%3Ccircle cx='160' cy='72' r='1.2'/%3E%3Ccircle cx='240' cy='30' r='0.7'/%3E%3Ccircle cx='300' cy='96' r='1'/%3E%3Ccircle cx='44' cy='140' r='0.9'/%3E%3Ccircle cx='128' cy='180' r='1.1'/%3E%3Ccircle cx='212' cy='150' r='0.8'/%3E%3Ccircle cx='288' cy='200' r='1'/%3E%3Ccircle cx='24' cy='250' r='1.2'/%3E%3Ccircle cx='104' cy='290' r='0.7'/%3E%3Ccircle cx='196' cy='262' r='1'/%3E%3Ccircle cx='268' cy='300' r='0.9'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(var(--pi-bg), color-mix(in srgb, var(--pi-bg) 72%, #000));
  background-size: 320px 320px, 100% 100%;
}

body.layout-starnight .hero-img.hero-wide {
  border: 3px solid color-mix(in srgb, var(--pi-bg) 40%, #000);
  border-radius: 0;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--pi-shadow, #000) 80%, transparent);
}


body.layout-starnight .article h2 {
  margin: 34px 0 16px;
  padding: 14px 18px;
  background: var(--pi-panel);
  color: var(--pi-paper);
  border: 0;
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}


body.layout-starnight .p-card {
  padding: 12px 13px;
  background: var(--pi-panel);
  border: 2px solid var(--pi-line);
  border-radius: 2px;
  box-shadow: 5px 5px 0 var(--pi-shadow, #000);
  transition: transform .12s ease, box-shadow .12s ease;
}
body.layout-starnight .p-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--pi-accent-sub);
}
body.layout-starnight .c-answer {
  background: var(--pi-panel);
  border: 2px solid var(--pi-line);
  border-left: 6px solid var(--pi-accent-sub);
  border-radius: 2px;
  box-shadow: 5px 5px 0 var(--pi-shadow, #000);
}


@media (max-width: 640px) {
  body.layout-starnight .article h2 { margin-top: 26px; }
  body.layout-starnight .hero-img.hero-wide { max-height: 220px; }
}


/* --------------------------------------------------------------------------
   wavecut — 波形セクション（SVG の波で面を割る）
   出典: www.fc-osaka.com（Wix のセクション区切り）
   なぜ別物に見えるか: 見出しや枠を飾るのではなく、セクションの境目そのものを波・斜めの SVG で割る。面の色が変わる位置が曲線になるので、ブロックの積み上げに見えない。
   -------------------------------------------------------------------------- */
body.preset-wavecut {
  --pi-bg: #ffffff;
  --pi-panel: #f3f3f3;
  --pi-paper: #1a1a1a;
  --pi-muted: #6b6b6b;
  --pi-line: #dcdcdc;
  --pi-green: #0b6b3a;
  --pi-red: #c0392b;
  --pi-accent-sub: #0b4f9e;
  --pi-accent-text: #0b3f80;
  --pi-accent-border: #a8bdd6;
  --pi-shadow: #e6e6e6;
  --pi-input: color-mix(in srgb, var(--pi-panel) 88%, var(--pi-bg));
  --pi-hover: color-mix(in srgb, var(--pi-panel) 80%, var(--pi-accent-sub));
  --pi-card: var(--pi-panel);
  --c-tint: var(--pi-panel);
  --c-surface: var(--pi-panel);
}

body.layout-wavecut {
}

body.layout-wavecut .hero-img.hero-wide {
  border: 1px solid var(--pi-line);
  border-radius: 10px;
}


body.layout-wavecut .article h2 {
  position: relative;
  margin: 34px 0 18px;
  padding: 0 0 12px;
  background: none;
  color: var(--pi-paper);
  border: 0;
  border-radius: 0;
  font-size: 21px;
  font-weight: 700;
}
body.layout-wavecut .article h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 40px 8px;
  opacity: .9;
}


body.layout-wavecut .p-card {
  padding: 11px 12px;
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-radius: 2px;
  transition: border-color .12s ease, background .12s ease;
}
body.layout-wavecut .p-card:hover {
  border-color: var(--pi-accent-sub);
  background: color-mix(in srgb, var(--pi-panel) 92%, var(--pi-accent-sub));
}
body.layout-wavecut .c-answer {
  background: var(--pi-panel);
  border: 1px solid var(--pi-line);
  border-left: 5px solid var(--pi-accent-sub);
  border-radius: 2px;
}


@media (max-width: 640px) {
  body.layout-wavecut .article h2 { margin-top: 26px; }
  body.layout-wavecut .hero-img.hero-wide { max-height: 220px; }
}