/* 全站設計（2026-09-24 design_handoff_site_pages）の頁部品。首页 v5 の視覚体系を子頁へ広げる共通の型。
   header / footer は site-shell.css（全頁同一）、ここは本文の型だけを持つ。頁ごとの差は各頁の <style>
   （オンラインツールは CSP で <style> を置けないので /tools/_ui/*.css）で足す。
   取値は原型の内联 style を写したもの。半端な字号・clamp()・影・角丸は意図的なので丸めない。
   原型の cqw は全幅容器の単位なので、ここでは同値の vw を使う（body に container-type を付けると
   position:fixed の部品が壊れるため）。 */

/* 色は頁の :root から切り離す（子頁の --mute 上書き等の影響を受けない＝どの頁でも同じ色） */
.kzp{--blue:#2B6FD6;--blue-d:#225BB0;--blue-l:#4A90E2;--tint:#F2F7FE;--ink:#1D2632;--ink2:#4A5564;--mute:#8893A3;--line:#E6EBF1;--line-strong:#cdd6e2;--bg:#FAFBFC;
  font-family:var(--font-body);color:var(--ink);line-height:1.75;}
/* 箱の寸法は原型と同じ content-box（原型は box-sizing を書かない＝ブラウザ既定）。
   「max-width:1080px ＋ 外側の padding」で本文の幅が header の玻璃栏（border-box の 1080px）と揃う。
   頁側の `* {box-sizing:border-box}`（道具頁の tools.css 等）をここで打ち消す。フォーム部品は
   ブラウザ既定どおり border-box（原型の Button も <button> なので border-box）。
   2026-09-24: 最初は border-box にしていて、/tools/ の標題卡と区块が header より左右 24px 内側へずれていた。 */
.kzp,.kzp *,.kzp ::before,.kzp ::after{box-sizing:content-box;}
.kzp :where(button,input,select,textarea){box-sizing:border-box;}
.kzp a{color:inherit;text-decoration:none;}
.kzp h1,.kzp h2,.kzp h3,.kzp p{margin:0;}

/* 方格紙の帯（header の方格と同じ起点・44px。header の高さが 44 の倍数なので線が揃う） */
.kzp-band{background-color:#F6F8FB;background-image:linear-gradient(rgba(29,38,50,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(29,38,50,.06) 1px,transparent 1px);background-size:44px 44px;background-position:center top;}

/* 標題区の玻璃卡 */
.kzp-glass{border-radius:20px;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);box-shadow:0 1px 0 rgba(29,38,50,.06),0 12px 32px rgba(29,38,50,.06);}
.kzp-crumb{margin:0;font-size:12px;color:var(--mute);}
.kzp .kzp-crumb a:hover{color:var(--blue);}
.kzp-stripe{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--ink2);padding:2px 10px;border-radius:6px;background:repeating-linear-gradient(135deg,#E3E8EF 0 5px,#F0F3F7 5px 10px);}

/* 区块: 白地・1080px・左栏 250px（見出し）＋右栏 480px〜 */
.kzp-line{border-top:1px solid var(--line);}
.kzp-sec__in{max-width:1080px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(18px,2vw,24px);display:flex;flex-wrap:wrap;gap:16px 56px;}
.kzp-sec__l{flex:0 1 250px;min-width:0;}
.kzp-sec__r{flex:1 1 480px;min-width:0;}
.kzp-h2{margin:0;font-family:var(--font-display);font-size:clamp(20px,2vw,24px);line-height:1.5;}

/* 深色帯（1 頁に 1 か所まで） */
.kzp-dark{background:#1A212B;color:#E7EBF0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 8px,transparent 8px 16px);}
.kzp-dark__in{max-width:1080px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(18px,2vw,24px);}
.kzp-dark .kzp-h2{font-size:clamp(20px,2.1vw,25px);color:#fff;}

/* 浅いカード（悬停で #EAEFF5 ＋ 2px 上がる） */
.kzp .kzp-card{background:#F4F6F9;transition:background .15s,transform .15s;}
.kzp .kzp-card:hover{background:#EAEFF5;transform:translateY(-2px);color:var(--blue);}

/* 按钮（設計システム Button。頁内は影なしの flat） */
.kzp .kzp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border:0;border-radius:9px;background:var(--blue);color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;transition:.15s;}
.kzp .kzp-btn:hover{background:var(--blue-d);color:#fff;transform:translateY(-1px);}
.kzp .kzp-btn:active{transform:none;}
.kzp .kzp-btn--lg{padding:15px 32px;border-radius:11px;font-size:16px;}
.kzp .kzp-btn--full{box-sizing:border-box;width:100%;height:52px;}
.kzp .kzp-btn--ghost{min-height:44px;padding:0 18px;border:1px solid #3A4554;border-radius:10px;background:transparent;font-size:14px;font-weight:400;}
.kzp .kzp-btn--ghost:hover{background:rgba(255,255,255,.06);transform:none;}

/* 胶囊（ほかのツール 等） */
.kzp .kzp-chip{position:relative;min-height:36px;display:flex;align-items:center;padding:0 12px;border-radius:999px;background:#F4F6F9;font-size:13px;color:var(--ink2);}

/* 手機・桌面の出し分け（下載の操作は ≤720px で出さない＝サイト全体の約束） */
.kzp .kzp-m{display:none;}
@media (max-width:720px){
  .kzp .kzp-d{display:none;}
  .kzp .kzp-m{display:flex;}
  /* 見た目は設計の 36px のまま、指の命中区を 44px にする */
  .kzp .kzp-chip::after{content:"";position:absolute;inset:-4px 0;}
  .kzp .kzp-crumb a{position:relative;}
  .kzp .kzp-crumb a::after{content:"";position:absolute;inset:-14px -6px;}
}

/* ほかのツール（道具頁の末尾）。並びは registry の索引頁から現算（web-tools/ui/check.mjs が検査） */
.kzp-others{border-top:1px solid var(--line);}
.kzp-others .kzp-sec__in{padding:clamp(32px,4vw,48px) clamp(18px,2vw,24px);gap:10px 56px;}
.kzp-others .kzp-sec__l b{font-size:14px;}
.kzp-others__list{display:flex;flex-wrap:wrap;gap:6px;}