/* 解決ガイド（mockups/kaiketsu.html）の頁固有 CSS。
   設計の正本: docs/design/kaiketsu-redesign-20260930/Main.dc.html（デスクトップ 1280）と
   Mobile.dc.html（モバイル 390）。比率の約束（φ=1.618）は下の :root に一度だけ書き、
   各所へ数値を撒かない——運用手順 docs/operations/2026-09-30-kaiketsu-redesign-maintenance.md 第 6 節。

   読み込み順: karuzip-type.css → site-shell.css → この file。
   header / footer の規則は site-shell.css が唯一の正本。ここに写しを置かない。 */

/* ==== 比率の変数（運用手順 第 6 節） ============================== */
:root{
  /* 黄金比 φ=1.618。欄割は 1.618fr 1fr、余白はフィボナッチ、文字は √φ 倍。 */
  --k-8:8px; --k-13:13px; --k-21:21px; --k-34:34px; --k-55:55px; --k-89:89px;
  --k-fs-11:11px; --k-fs-14:14px; --k-fs-18:18px; --k-fs-23:23px; --k-fs-29:29px; --k-fs-47:47px; --k-fs-59:59px;
  --k-r-8:8px; --k-r-13:13px; --k-r-21:21px;
  --k-card-ratio:1.618;          /* 症状カード aspect-ratio */
  /* 設計は上の階梯だけを使う。実装で必要な中間値も同じ比（フィボナッチ／√φ）から取る。 */
  --k-11:11px; --k-16:16px; --k-18:18px; --k-29:29px;
  --k-fs-13:13px; --k-fs-16:16px; --k-fs-19:19px; --k-fs-21:21px;
  /* 節の上下 --k-89、見出し→本文 --k-34、カード間 --k-21、カード内 --k-21、行内 --k-13。 */
  --k-section:var(--k-89);
  --k-head-gap:var(--k-34);
  --k-card-gap:var(--k-21);
  --k-h1:var(--k-fs-47);
  --k-h2:var(--k-fs-29);
  --k-h3:var(--k-fs-18);
}
/* 頁のトークン。site-shell.css の header / footer と同じ値を使い、地の色だけ頁で決める。 */
.kzp{
  --blue:#2B6FD6; --blue-d:#225BB0; --blue-l:#4A90E2; --tint:#F2F7FE;
  --ink:#1D2632; --ink2:#4A5564; --note:#627184; --mute:#8893A3;
  --line:#E6EBF1; --line-strong:#cdd6e2; --bg:#FAFBFC; --soft:#F4F6F9;
  --ok:#18794E; --ok-bg:#EAF6EF; --warn:#8A5A00; --warn-bg:#FFF6E5;
  --shadow:0 8px 24px rgba(20,40,80,.06); --shadow-h:0 13px 34px rgba(43,111,214,.09);
  --ez:cubic-bezier(.2,0,0,1);
  --font-mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
  color:var(--ink);
  background:#fff;
  /* 設計の画板は行送りを指定しない（normal）。部品ごとの行送りは各規則に書く。 */
  line-height:normal;
}
/* 設計の画板は box-sizing を既定（content-box）のまま組んでいる（min-height 76 ＋ padding ＋ 枠 = 104）。
   site-shell.css の全体 border-box をこの頁の本文でだけ既定へ戻し、border-box が要る所は個別に書く。 */
.kzp :where(*){box-sizing:revert;}
.kzp [hidden]{display:none!important;}
/* 地の link 色は特異度 0 で置く（部品の color が常に勝つように。.kzp a だと部品の文字まで青くなる）。 */
:where(.kzp) a{color:var(--blue);text-decoration:none;}
:where(.kzp) a:hover{color:var(--blue-d);}
.kzp .kz-i{stroke-width:1.75;}
.kzp .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ==== 版面 ======================================================== */
.kzp-wrap{box-sizing:border-box;max-width:1080px;margin:0 auto;padding:0 24px;}
.kzp-sec{padding:var(--k-section) 0;}
.kzp-sec--line{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);}
.kzp-head{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--k-head-gap);align-items:end;}
.kzp-head__l{display:flex;flex-direction:column;gap:var(--k-8);}
.kzp-head__l--narrow{max-width:640px;}
.kzp-head__r{display:flex;justify-content:flex-end;}
.kzp-body{display:flex;flex-direction:column;gap:var(--k-head-gap);}

/* 小見出しは日本語＋21×2px の短線。英字大文字の眉題は使わない。 */
.kzp-eyebrow{display:inline-flex;align-items:center;gap:var(--k-8);margin:0;font-size:var(--k-fs-13);font-weight:700;letter-spacing:.04em;color:var(--blue-d);}
.kzp-eyebrow::before{content:"";display:block;width:21px;height:2px;border-radius:2px;background:var(--blue);}
/* 見出し・本文・リンク */
.kzp h1{margin:0;font-family:var(--font-brand);font-size:var(--k-h1);line-height:1.3;font-weight:900;letter-spacing:-.8px;}
.kzp h2{margin:0;font-size:var(--k-h2);line-height:1.35;font-weight:700;letter-spacing:-.4px;color:var(--ink);text-wrap:pretty;}
.kzp h3{margin:0;font-size:var(--k-h3);font-weight:700;}
.kzp-lead{margin:0;font-size:var(--k-fs-14);line-height:1.85;color:var(--ink2);text-wrap:pretty;}
.kzp-more{display:inline-flex;align-items:center;gap:5px;min-height:34px;font-size:var(--k-fs-14);font-weight:700;white-space:nowrap;}
.kzp-note{margin:0;font-size:var(--k-fs-13);line-height:1.7;color:var(--note);}
.kzp-nowrap{white-space:nowrap;}

/* ==== 部品（設計 Main.dc.html の kz-* をそのまま kzp-* にした） ======= */
.kzp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--k-8);min-height:44px;padding:0 var(--k-21);border:0;border-radius:var(--k-r-8);background:var(--blue);color:#fff;font-family:inherit;font-size:var(--k-fs-14);font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 6px 16px rgba(43,111,214,.28);transition:.15s;}
.kzp-btn:hover{background:var(--blue-d);color:#fff;transform:translateY(-1px);}
.kzp-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--k-21);border:1px solid var(--line-strong);border-radius:var(--k-r-8);background:#fff;color:var(--blue-d);font-family:inherit;font-size:var(--k-fs-14);font-weight:700;white-space:nowrap;cursor:pointer;}
.kzp-ghost:hover{border-color:var(--blue);background:var(--tint);}
.kzp-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 var(--k-13);border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink2);font-family:inherit;font-size:var(--k-fs-13);font-weight:500;white-space:nowrap;cursor:pointer;}
.kzp-chip:hover{border-color:var(--blue);color:var(--blue-d);}
.kzp-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}
.kzp-tile{display:flex;align-items:center;justify-content:center;flex:none;width:var(--k-55);height:var(--k-55);border-radius:var(--k-r-13);background:var(--tint);color:var(--blue);}
.kzp-tile svg{display:block;width:26px;height:26px;}
.kzp-tile--s{width:var(--k-34);height:var(--k-34);border-radius:var(--k-r-8);}
.kzp-tile--s svg{width:20px;height:20px;}
.kzp-tag{display:inline-flex;align-items:center;min-height:21px;padding:0 var(--k-8);border-radius:999px;background:var(--tint);color:var(--blue-d);font-size:var(--k-fs-11);font-weight:700;}
.kzp-prio{display:inline-flex;align-items:center;align-self:flex-start;min-height:21px;padding:0 var(--k-8);border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:var(--k-fs-11);font-weight:700;}
.kzp-chev{margin-left:auto;color:var(--mute);font-size:var(--k-fs-18);}

/* 入力（ヒーロー・目録・一覧の検索で同じ形） */
.kzp-input{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:var(--k-55);padding:0 var(--k-18);border:1px solid var(--line-strong);border-radius:var(--k-r-13);background:#fff;color:var(--mute);font-size:var(--k-fs-14);}
.kzp-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.kzp-input svg{display:block;flex:none;width:21px;height:21px;}
.kzp-input input{flex:1;min-width:0;padding:revert;border:0;outline:0;background:transparent;font:inherit;color:var(--ink);}
.kzp-input input::placeholder{color:var(--mute);opacity:1;}

/* ==== ヒーロー（欄割 1.618 : 1） ================================== */
/* 三つの入口の背景は -55px 張り出すので、節で切る（切らないと 390px で 42px 横に流れる）。 */
.kzp-hero{overflow:hidden;padding:var(--k-section) 0;background:linear-gradient(180deg,#fff,var(--tint));border-bottom:1px solid var(--line);}
.kzp-hero__in{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--k-head-gap);align-items:center;}
.kzp-hero__l{display:flex;flex-direction:column;gap:var(--k-21);}
.kzp-hero__l .kzp-lead{max-width:560px;font-size:var(--k-fs-18);line-height:1.75;}
.kzp-hero__form{display:flex;gap:var(--k-13);max-width:560px;margin:var(--k-13) 0 0;}
.kzp-hero__form .kzp-btn{flex:none;min-height:var(--k-55);padding:0 var(--k-29);border-radius:var(--k-r-13);font-size:15px;}
.kzp-hero__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k-8);font-size:var(--k-fs-13);color:var(--note);}
.kzp-hero__chips b{margin-right:5px;font-weight:700;white-space:nowrap;}
.kzp-hero__chips .kzp-chip{min-height:29px;padding:0 var(--k-11);font-size:12px;}
/* 三つの入口。背景の格子は radial-gradient の mask で中心だけ見せる。 */
.kzp-routes{position:relative;display:flex;flex-direction:column;gap:var(--k-13);}
.kzp-routes::before{content:"";position:absolute;inset:-34px -55px;z-index:0;background-image:repeating-linear-gradient(0deg,rgba(43,111,214,.06) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(43,111,214,.06) 0 1px,transparent 1px 26px);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 100%);}
.kzp-route{position:relative;z-index:1;display:flex;align-items:center;gap:var(--k-16);padding:var(--k-21);border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--ink);box-shadow:var(--shadow);transition:.15s;}
.kzp-route:hover{border-color:#bcd2f3;box-shadow:0 13px 34px rgba(43,111,214,.12);transform:translateY(-2px);color:var(--ink);}
.kzp-route .kzp-route__paper{width:38px;height:38px;}
.kzp-route__t{flex:1;min-width:0;}
.kzp-route b{display:block;font-size:var(--k-fs-18);font-weight:700;line-height:1.4;}
.kzp-route small{display:block;margin-top:2px;font-size:var(--k-fs-13);color:var(--note);line-height:1.6;}
.kzp-route .kzp-chev{font-size:var(--k-fs-21);}

/* ==== 症状（3 × 3 の黄金矩形カード 330 × 204） ===================== */
.kzp-gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-card-gap);}
.kzp-gcard{box-sizing:border-box;display:flex;gap:var(--k-16);padding:var(--k-21);aspect-ratio:var(--k-card-ratio)/1;border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--ink);transition:.15s;}
.kzp-gcard:hover{border-color:#bcd2f3;box-shadow:var(--shadow-h);transform:translateY(-3px);color:var(--ink);}
.kzp-gcard .kzp-tile{width:47px;height:47px;}
.kzp-gcard .kzp-tile svg{width:24px;height:24px;}
.kzp-gcard__t{display:flex;flex-direction:column;gap:var(--k-8);flex:1;min-width:0;}
.kzp-gcard h3{font-size:17px;line-height:1.4;text-wrap:pretty;line-break:strict;}
.kzp-gcard p{margin:0;font-size:var(--k-fs-14);line-height:1.7;color:var(--ink2);text-wrap:pretty;}
.kzp-gcard .read{margin-top:auto;font-size:var(--k-fs-13);font-weight:700;color:var(--blue);}

/* ==== 操作（欄割 1.618 : 1） ====================================== */
.kzp-actions{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--k-head-gap);align-items:start;}
.kzp-actions__l,.kzp-actions__r{display:flex;flex-direction:column;gap:var(--k-13);}
.kzp-actions__r .kzp-more{align-self:flex-start;}
.kzp-agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-13);}
/* 書庫の操作は題・補足・圖標とも note 色（設計の画板どおり。hover で青へ）。 */
.kzp-action{display:flex;align-items:center;gap:10px;min-height:76px;padding:var(--k-13);border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--note);transition:.15s;}
.kzp-action:hover{border-color:var(--blue);background:var(--tint);color:var(--blue-d);}
.kzp-action .kzp-tile{color:inherit;}
.kzp-action__t{display:block;font-size:12px;line-height:1.5;white-space:nowrap;}
.kzp-action b{display:block;font-size:var(--k-fs-14);font-weight:700;line-height:1.4;white-space:nowrap;}
.kzp-action__sub{display:block;font-size:12px;line-height:1.5;white-space:nowrap;}
.kzp-action:hover .kzp-action__sub{color:var(--ink2);}
.kzp-row{display:flex;align-items:center;gap:var(--k-13);min-height:76px;padding:var(--k-13) var(--k-16);border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--ink);transition:.15s;}
.kzp-row:hover{border-color:#bcd2f3;background:var(--tint);color:var(--ink);}
.kzp-row b{display:block;font-size:var(--k-fs-14);font-weight:700;line-height:1.4;}
.kzp-row small{display:block;font-size:12px;color:var(--note);line-height:1.5;}

/* ==== 形式（大数値・12 常用形式・目録／検証レベル） ================= */
.kzp-total{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--k-13);line-height:1;}
.kzp-total strong{font-size:var(--k-fs-59);font-weight:700;letter-spacing:-2px;color:var(--blue);}
.kzp-total span{font-size:var(--k-fs-14);font-weight:700;color:var(--ink2);}
.kzp-fmt-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--k-13);}
.kzp-fmt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:var(--k-13) var(--k-8) 10px;border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--ink2);transition:.15s;}
.kzp-fmt:hover{border-color:#bcd2f3;background:var(--tint);color:var(--blue-d);}
.kzp-fmt svg{display:block;width:47px;height:47px;}
.kzp-fmt b{font-size:12px;font-weight:700;}
.kzp-fsplit{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--k-head-gap);align-items:start;}
/* 目録パネル（FORMAT_DIRECTORY は generate-format-pages.mjs が書く）。 */
.kzp-dir{display:flex;flex-direction:column;gap:var(--k-13);min-width:0;padding:var(--k-21);border:1px solid var(--line);border-radius:var(--k-r-21);background:var(--bg);}
.kzp-dir__h{display:flex;flex-direction:column;gap:2px;}
.kzp-dir__h b{font-size:var(--k-fs-18);font-weight:700;}
.kzp-dir__h small{font-size:var(--k-fs-13);color:var(--note);}
.kzp-dir__search{display:flex;gap:var(--k-8);}
.kzp-dir__search .kzp-input{min-height:44px;padding:0 var(--k-13);border-radius:var(--k-r-8);}
.kzp-dir__search .kzp-input svg{width:18px;height:18px;}
.kzp-dir__filters{display:flex;flex-wrap:wrap;gap:var(--k-8);}
.kzp-dir__filters .kzp-chip{min-height:29px;padding:0 var(--k-11);font-size:12px;}
.kzp-dir__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--k-8);}
.kzp-dir__grid .format-group{display:contents;}
.kzp-dir .format-item{display:flex;align-items:center;justify-content:space-between;gap:var(--k-8);min-height:44px;padding:0 var(--k-13);border:1px solid var(--line);border-radius:var(--k-r-8);background:#fff;color:var(--ink);font-size:var(--k-fs-13);font-weight:700;transition:.15s;}
.kzp-dir .format-item:hover{border-color:var(--blue);background:var(--tint);color:var(--blue-d);}
.kzp-dir .format-item b{font-weight:700;}
.kzp-dir .format-item span{flex:none;width:8px;height:8px;border-radius:50%;background:var(--mute);}
.kzp-dir .format-item span[data-level="verified"]{background:var(--blue);}
.kzp-dir .format-item span:is([data-level="tested"],[data-level="container"]){background:var(--blue-l);}
.kzp-dir__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--k-13);}
.kzp-dir__foot .format-result{margin:0;font-size:12px;color:var(--note);}
.kzp-dir .site-search-zero{align-self:flex-start;font-size:var(--k-fs-13);font-weight:700;}
/* 検証レベルの三段と「作成できる形式」。数値は生成器が config から埋める。 */
.kzp-fsplit__r{display:flex;flex-direction:column;gap:var(--k-13);}
.kzp-fsplit__r h3{margin:0 0 -5px;}
.kzp-tier{display:flex;align-items:center;gap:var(--k-13);padding:var(--k-13) var(--k-16);border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;}
.kzp-tier i{flex:none;width:10px;height:10px;border-radius:50%;}
.kzp-tier__t{min-width:0;}
.kzp-tier b{font-size:var(--k-fs-14);font-weight:700;white-space:nowrap;}
.kzp-tier small{display:block;font-size:12px;line-height:1.5;color:var(--note);}
.kzp-tier strong{margin-left:auto;font-size:var(--k-fs-23);font-weight:700;letter-spacing:-.5px;line-height:1;}
.kzp-make{display:flex;flex-direction:column;gap:10px;margin-top:var(--k-8);padding:var(--k-16);border:1px solid var(--line);border-radius:var(--k-r-13);background:var(--bg);}
.kzp-make__h{display:flex;align-items:baseline;justify-content:space-between;}
.kzp-make__h b{font-size:var(--k-fs-14);font-weight:700;}
.kzp-make__h strong{font-size:var(--k-fs-23);font-weight:700;letter-spacing:-.5px;line-height:1;}
.kzp-make__tags{display:flex;flex-wrap:wrap;gap:5px;}
.kzp-make small{font-size:12px;line-height:1.6;color:var(--note);}

/* ==== 深掘り・解決ガイドのカード ================================== */
.kzp-deep-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-13);}
.kzp-deep{display:flex;align-items:center;gap:var(--k-13);padding:var(--k-13) var(--k-16);border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--ink);transition:.15s;}
.kzp-deep:hover{border-color:#bcd2f3;background:var(--tint);color:var(--ink);}
.kzp-deep svg{display:block;flex:none;width:34px;height:34px;}
.kzp-deep .kzp-deep__i{box-sizing:border-box;padding:5px;color:var(--blue);}
.kzp-deep span{display:block;font-size:var(--k-fs-14);font-weight:500;line-height:1.55;text-wrap:pretty;}
.kzp-deep b{display:block;margin-bottom:2px;font-size:var(--k-fs-11);font-weight:700;letter-spacing:.08em;color:var(--blue-d);}
.kzp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-card-gap);}
.kzp-card{display:flex;flex-direction:column;gap:var(--k-8);padding:var(--k-21);border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--ink);transition:.15s;}
.kzp-card:hover{border-color:#bcd2f3;box-shadow:var(--shadow-h);transform:translateY(-3px);color:var(--ink);}
.kzp-card__tags{display:flex;align-items:center;gap:5px;}
.kzp-card h3{font-size:var(--k-fs-18);line-height:1.45;text-wrap:pretty;line-break:strict;}
.kzp-card p{margin:0;font-size:var(--k-fs-14);line-height:1.75;color:var(--ink2);text-wrap:pretty;}
.kzp-card .read{margin-top:auto;padding-top:5px;font-size:var(--k-fs-13);font-weight:700;color:var(--blue);}
.kzp-filters{display:flex;flex-wrap:wrap;gap:var(--k-8);margin-top:calc(-1 * var(--k-13));}
.kzp-count{margin:0;font-size:var(--k-fs-13);color:var(--note);text-align:right;}
/* 解決ガイド一覧の頁内検索（旧版からの契約：scripts/tests/site-search.test.mjs）。件数表示の上に置く。 */
.kzp-gsearch{display:flex;flex-direction:column;gap:var(--k-8);min-width:0;margin:0;}
.kzp-gsearch .kzp-input{min-height:40px;padding:0 var(--k-13);border-radius:var(--k-r-8);}
.kzp-gsearch .kzp-input svg{width:18px;height:18px;}
.kzp-empty{margin:0;padding:var(--k-21);border:1px solid var(--line);border-radius:var(--k-r-13);background:var(--bg);font-size:var(--k-fs-14);color:var(--ink2);}
.kzp-center{display:flex;justify-content:center;}

/* ==== 下載と導線 ================================================= */
.kzp-sec--dl{position:relative;background:linear-gradient(180deg,var(--tint),#fff);border-top:1px solid var(--line);}
.kzp-dl__grid{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(43,111,214,.05) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(43,111,214,.05) 0 1px,transparent 1px 26px);-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);}
.kzp-dl{position:relative;display:grid;grid-template-columns:1.618fr 1fr;gap:var(--k-21);align-items:stretch;}
.kzp-dl__card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--k-r-21);background:#fff;box-shadow:var(--shadow);overflow:hidden;}
.kzp-dl__top{display:flex;align-items:center;gap:var(--k-16);padding:var(--k-34) var(--k-29);}
.kzp-dl__mark{display:block;flex:none;width:55px;height:55px;}
.kzp-dl__title{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.kzp .kzp-dl__title h2{font-size:var(--k-fs-19);letter-spacing:-.2px;line-height:1.4;white-space:nowrap;}
.kzp-dl__title p{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink2);}
.kzp-dl__desktop{flex:none;min-height:47px;padding:0 var(--k-21);border-radius:10px;}
.kzp-dl__desktop svg{display:block;width:19px;height:19px;}
.kzp-dl__ok{display:flex;flex-wrap:wrap;gap:var(--k-8) var(--k-21);margin:0;padding:0 var(--k-29) var(--k-29);list-style:none;font-size:var(--k-fs-13);color:var(--ink2);}
.kzp-dl__ok li{display:flex;align-items:center;gap:6px;}
.kzp-dl__ok svg{display:block;flex:none;width:18px;height:18px;color:var(--ok);}
.kzp-dl__facts{display:grid;grid-template-columns:1.1fr 1.618fr 1fr;margin:auto 0 0;border-top:1px solid var(--line);}
.kzp-dl__facts > div{display:flex;flex-direction:column;gap:3px;padding:var(--k-16) var(--k-21);border-right:1px solid var(--line);}
.kzp-dl__facts > div:first-child{padding-left:var(--k-29);padding-right:var(--k-29);}
.kzp-dl__facts > div:last-child{border-right:0;}
.kzp-dl__facts dt{font-size:11.5px;font-weight:700;color:var(--note);}
.kzp-dl__facts dd{margin:0;font-size:13.5px;font-weight:500;white-space:nowrap;}
.kzp-dl__facts > div:nth-child(2){min-width:0;}
.kzp-dl__facts .hash{display:flex;align-items:center;gap:var(--k-8);min-width:0;font-weight:400;}
.kzp-dl__facts code{min-width:0;overflow:hidden;font-family:var(--font-mono);font-size:12.5px;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;}
.kzp-dl__facts .hash a{font-size:12.5px;font-weight:700;white-space:nowrap;}
.kzp-dl__side{display:flex;flex-direction:column;gap:var(--k-21);}
.kzp-dl__side .kzp-row{flex:1;padding:var(--k-21);box-shadow:var(--shadow);}
.kzp-row__t{min-width:0;}
.kzp-dl__side b{font-size:var(--k-fs-16);}
.kzp-dl__side small{margin-top:2px;font-size:var(--k-fs-13);}
.kzp-dl__mobile{display:none;}


/* ==== 幅 720px 以下だけの部品（設計 Mobile.dc.html） ================= */
/* 同じ位置で設計の画板ごとに違う文言・部品は両方を出し、ここで切り替える。 */
@media (min-width:721px){
  .kzp .kzp-only-m{display:none!important;}
}
.kzp-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-8);}
.kzp-act{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:var(--k-13) 6px;border:1px solid var(--line);border-radius:var(--k-r-13);background:#fff;color:var(--ink);text-align:center;}
.kzp-act:hover{border-color:var(--blue);background:var(--tint);color:var(--blue-d);}
.kzp-act svg{display:block;width:24px;height:24px;color:var(--blue);}
.kzp-act .kzp-acts__paper{width:30px;height:30px;}
/* 線の圖標はペーパーラベル（30px）と題の位置を揃えるため 27px＋上下 1.5px。 */
.kzp-act svg.kz-i{width:27px;height:27px;margin:1.5px 0;}
.kzp-act b{font-size:var(--k-fs-13);font-weight:700;line-height:1.35;white-space:nowrap;}
.kzp-winnote{display:flex;align-items:flex-start;gap:10px;padding:var(--k-13);border:1px solid #cfe0f7;border-radius:var(--k-r-13);background:#fff;font-size:12.5px;line-height:1.6;color:var(--ink2);}
.kzp-winnote svg{display:block;flex:none;width:18px;height:18px;margin-top:2px;color:var(--blue);}
.kzp-winnote b{color:var(--ink);}
.kzp-legend{display:flex;flex-wrap:wrap;gap:5px var(--k-13);font-size:11.5px;color:var(--ink2);}
.kzp-legend span{display:inline-flex;align-items:center;gap:5px;}
.kzp-legend i{width:7px;height:7px;border-radius:50%;}
.kzp-tiers{display:flex;flex-direction:column;gap:var(--k-13);}

/* ==== 断点（1080 / 880 / 720） ===================================== */
/* 二欄（1.618 : 1）が窮屈になる幅で一欄へ。 */
@media (max-width:1080px){
  .kzp-hero__in,.kzp-actions,.kzp-dl,.kzp-head,.kzp-fsplit{grid-template-columns:1fr;}
  .kzp-head__r,.kzp-total{justify-content:flex-start;}
  .kzp-fmt-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (max-width:880px){
  .kzp-gcards,.kzp-cards,.kzp-deep-grid,.kzp-agrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kzp-dir__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .kzp-total strong{font-size:var(--k-fs-47);}
}

/* ≤720: 設計 Mobile.dc.html（390）。節 55 / 左右 21 / 節内の間 21 / 見出しの間 6。下載はボタンを出さない。 */
@media (max-width:720px){
  .kzp .kzp-only-d{display:none!important;}
  :root{--k-section:var(--k-55);--k-head-gap:var(--k-21);--k-h1:27px;--k-h2:var(--k-fs-23);}
  .kzp-wrap{padding:0 21px;}
  .kzp h2{line-height:1.4;letter-spacing:-.3px;}
  .kzp-head__l{gap:6px;}
  .kzp-head{display:block;}
  .kzp-more{min-height:44px;}
  .kzp-btn{min-height:48px;font-size:15px;}
  .kzp-tile{width:47px;height:47px;border-radius:var(--k-r-13);}
  .kzp-tile svg{width:24px;height:24px;}
  /* 横に流れる行：スクロールバーを隠し、右端 42px をぼかす。 */
  .kzp-hero__chips,.kzp-fmt-grid,.kzp-dir__filters,.kzp-filters{display:flex;flex-wrap:nowrap;gap:var(--k-8);overflow-x:auto;overflow-y:hidden;margin-left:-21px;margin-right:-21px;padding:0 21px 4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);}
  .kzp-hero__chips::-webkit-scrollbar,.kzp-fmt-grid::-webkit-scrollbar,.kzp-dir__filters::-webkit-scrollbar,.kzp-filters::-webkit-scrollbar{display:none;width:0;height:0;}
  .kzp-hero__chips .kzp-chip,.kzp-dir__filters .kzp-chip,.kzp-filters .kzp-chip{flex:none;min-height:34px;padding:0 var(--k-13);font-size:var(--k-fs-13);}
  .kzp-row{min-height:68px;}
  .kzp-row .kzp-tile{width:47px;height:47px;border-radius:var(--k-r-13);}
  .kzp-row .kzp-tile svg{width:24px;height:24px;}
  .kzp-row b{font-size:15px;line-height:1.45;}
  .kzp-row .kzp-chev{flex:none;}

  /* ヒーロー */
  .kzp-hero{padding:var(--k-34) 0;}
  .kzp-hero__in{display:block;}
  .kzp-hero__l{gap:var(--k-16);}
  .kzp h1{line-height:1.4;letter-spacing:-.5px;}
  .kzp-hero__l .kzp-lead{font-size:var(--k-fs-14);line-height:1.85;}
  .kzp-hero__form{gap:var(--k-8);margin:0;}
  .kzp-hero__form .kzp-input{min-height:48px;padding:0 var(--k-13);border-radius:var(--k-r-8);}
  .kzp-hero__form .kzp-input svg{width:18px;height:18px;}
  .kzp-hero__form .kzp-btn{min-height:48px;padding:0 var(--k-18);border-radius:var(--k-r-8);font-size:15px;}
  .kzp-hero__chips b{display:none;}

  /* 症状：1 列の行部品 */
  .kzp-gcards{display:flex;flex-direction:column;gap:10px;}
  .kzp-gcard{box-sizing:content-box;aspect-ratio:auto;align-items:center;gap:var(--k-13);min-height:68px;padding:var(--k-13) var(--k-16);}
  .kzp-gcard:hover{box-shadow:none;transform:none;background:var(--tint);}
  .kzp-gcard__t{flex:0 1 auto;gap:0;}
  .kzp-gcard__t .kzp-prio,.kzp-gcard__t p,.kzp-gcard__t .read{display:none;}
  .kzp-gcard h3{font-size:15px;line-height:1.45;}
  .kzp-gcard small{display:block;font-size:12px;line-height:1.5;color:var(--note);}
  .kzp-gcard .kzp-chev{flex:none;}

  /* 操作：書庫は 3 × 3 の小さな方塊、書庫以外は行部品 */
  .kzp-actions{display:contents;}
  .kzp-actions__l{gap:10px;}
  .kzp-actions__r{gap:var(--k-8);}
  .kzp-actions h3{font-size:16px;}
  .kzp-actions__r h3{margin:0 0 2px;}
  .kzp-agrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-8);}
  .kzp-action{flex-direction:column;gap:6px;min-height:44px;padding:var(--k-13) 6px;color:var(--ink);text-align:center;}
  .kzp-action .kzp-tile{width:auto;height:auto;background:none;color:var(--blue);}
  .kzp-action .kzp-tile svg{width:24px;height:24px;}
  .kzp-action__t{font-size:inherit;}
  .kzp-action b{font-size:var(--k-fs-13);line-height:1.35;}
  .kzp-action__sub{display:none;}
  .kzp-actions__l .kzp-note{font-size:12.5px;}

  /* 形式：見出しの右に大数値、検証レベル 3 段 → 常用形式 → 目録 → 作成できる形式 */
  #formats .kzp-head{display:grid;grid-template-columns:1fr auto;column-gap:var(--k-13);row-gap:6px;align-items:end;}
  #formats .kzp-head__l{display:contents;}
  #formats .kzp-head .kzp-eyebrow{grid-column:1/-1;}
  #formats .kzp-head .kzp-lead{display:none;}
  .kzp-total{flex-direction:column;align-items:flex-end;gap:0;}
  .kzp-total strong{font-size:38px;letter-spacing:-1.2px;}
  .kzp-total span{margin-top:5px;font-size:11px;}
  #formats .kzp-fsplit,#formats .kzp-dir,#formats .kzp-fsplit__r,#formats .kzp-dir__search,#formats .kzp-dir__foot{display:contents;}
  #formats .kzp-head{order:1;}
  #formats .kzp-tiers{order:2;gap:6px;}
  #formats .kzp-fmt-h{order:3;font-size:16px;}
  #formats .kzp-fmt-grid{order:4;margin-top:-10px;}
  #formats .kzp-dir__search .kzp-input{order:5;min-height:48px;}
  #formats .kzp-dir__filters{order:6;margin-top:-8px;}
  #formats .kzp-dir__grid{order:7;margin-top:-8px;}
  #formats .site-search-zero{order:7;}
  #formats .kzp-legend{order:8;margin-top:-8px;}
  #formats #format-more{order:9;}
  #formats .kzp-make{order:10;}
  #formats .kzp-dir__h,#formats #format-clear,#formats .kzp-fsplit__r > h3,#formats .kzp-fsplit__r > .kzp-note,#formats .kzp-fsplit__r > .kzp-more,#formats .format-result{display:none;}
  .kzp-tier{gap:10px;padding:10px var(--k-13);font-size:var(--k-fs-13);}
  .kzp-tier i{width:9px;height:9px;}
  .kzp-tier b{font-size:var(--k-fs-13);}
  .kzp-tier small{display:none;}
  .kzp-tier strong{font-size:18px;letter-spacing:0;line-height:normal;}
  .kzp-fmt{flex:none;width:72px;padding:var(--k-13) 6px 10px;}
  .kzp-fmt svg{width:44px;height:44px;}
  .kzp-dir__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .kzp-dir .format-item{gap:6px;padding:0 10px;font-size:12.5px;}
  .kzp-dir .format-item span{width:7px;height:7px;}
  .kzp-make{gap:var(--k-8);margin-top:0;padding:var(--k-13);}
  .kzp-make__h strong{font-size:21px;letter-spacing:0;}

  /* 深掘り：1 列、先頭 5 本（台帳 mobile:false は開くまで隠す） */
  .kzp-deep-grid{grid-template-columns:1fr;gap:6px;}
  #deep-guides:not(.is-open) .kzp-deep--wide{display:none;}
  .kzp-deep{min-height:56px;padding:10px var(--k-13);}
  .kzp-deep svg{width:29px;height:29px;}
  .kzp-deep span{font-size:var(--k-fs-13);}
  .kzp-deep b{margin-bottom:0;}

  /* 解決ガイド：絞り込みは横に流れる行、先頭 4 件 */
  #guide-list .kzp-head,#guide-list .kzp-gsearch{display:contents;}
  #guide-list .kzp-head__l{order:1;}
  /* 設計 Mobile.dc.html の一覧は検索欄を持たない（header の検索を使う）。検索の挙動と契約は残す。 */
  #guide-list .kzp-gsearch .kzp-input{display:none;}
  #guide-list .kzp-filters{order:3;margin-top:-8px;}
  #guide-list .kzp-count{order:4;margin:-8px 0 0;font-size:12.5px;text-align:left;}
  #guide-list .kzp-cards{order:5;}
  #guide-list .kzp-empty{order:5;}
  #guide-list .kzp-center{order:6;}
  .kzp-center .kzp-ghost{flex:1;}
  .kzp-cards{grid-template-columns:1fr;gap:10px;}
  #guide-list:not(.is-open) [data-kzp-guides] > :nth-child(n+5){display:none;}
  .kzp-card:hover{transform:none;}
  .kzp-card__tags{align-items:normal;}
  .kzp-card h3{font-size:16px;line-height:1.5;}
  .kzp-card p{font-size:var(--k-fs-13);}
  .kzp-card .read{margin-top:0;padding-top:0;}

  /* 下載：ボタンは置かず、ツール／PC へ送る */
  .kzp-dl__grid{display:none;}
  .kzp-dl{display:flex;flex-direction:column;gap:var(--k-13);}
  .kzp-dl__m{display:flex;flex-direction:column;gap:var(--k-13);padding:var(--k-21);}
  .kzp-dl__mhead{display:flex;align-items:center;gap:var(--k-13);}
  .kzp-dl__mhead .kzp-dl__mark{width:47px;height:47px;}
  .kzp-dl__m .kzp-dl__title{flex:1;min-width:0;gap:2px;}
  .kzp .kzp-dl__m h2{font-size:17px;letter-spacing:-.3px;line-height:1.4;white-space:nowrap;}
  .kzp-dl__m .kzp-dl__title p{line-height:1.6;}
  .kzp-dl__note{margin:0;padding:10px var(--k-13);border:1px solid #cfe0f7;border-radius:var(--k-r-8);background:var(--tint);font-size:12.5px;line-height:1.6;color:var(--ink2);}
  .kzp-dl__note b{color:var(--ink);}
  .kzp-dl__mfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line);}
  .kzp-dl__mfacts > div{display:flex;flex-direction:column;gap:2px;padding:var(--k-13) var(--k-21);}
  .kzp-dl__mfacts > div:first-child{border-right:1px solid var(--line);}
  .kzp-dl__mfacts dt{font-size:11px;font-weight:700;color:var(--note);}
  .kzp-dl__mfacts dd{margin:0;font-size:var(--k-fs-13);font-weight:500;}
  .kzp-dl__mfacts > div:last-child dd{font-size:12.5px;white-space:nowrap;}
  .kzp-dl__side{gap:var(--k-13);}
  .kzp-dl__side .kzp-row{flex:none;padding:var(--k-13) var(--k-16);box-shadow:none;}
  .kzp-dl__side b{font-size:15px;}
  .kzp-dl__side small{margin-top:0;font-size:12px;}
}

/* 390px 未満では h1 の 3 行目（13 字）が入らないので、行内の折り返しを許す。 */
@media (max-width:389px){
  .kzp-hero h1 .kzp-nowrap{white-space:normal;}
}

/* 動きを減らす設定では hover の持ち上げを止める。 */
@media (prefers-reduced-motion:reduce){
  .kzp-btn,.kzp-route,.kzp-gcard,.kzp-action,.kzp-row,.kzp-card,.kzp-fmt,.kzp-deep,.kzp-act{transition:none;}
  .kzp-btn:hover,.kzp-route:hover,.kzp-gcard:hover,.kzp-card:hover{transform:none;}
}