*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f2f1ef;--card:#ffffff;--code-bg:#f5f5f4;--fail:#991b1b;--fg:#1c1c1e;--line:#807b75;--muted-fg:#57534e;--pass:#166534;--warn:#92400e;--accent:#7b1418;--accent-fg:#ffffff;--sw-maroon:#7b1418;--sw-navy:#1b3a5c;--sw-sumi:#3f3a36;}
:root[data-accent="navy"]{--accent:#1b3a5c;--accent-fg:#ffffff;}
:root[data-accent="sumi"]{--accent:#3f3a36;--accent-fg:#ffffff;}

body{background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.7;padding:0 20px 80px}
.wrap{max-width:1100px;margin:0 auto}
a{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== サイト共通ヘッダー（sticky）===== */
/* body の左右余白（20px）ちょうど外へ出して帯を画面端まで広げる（中身は .sh-inner で 1100 に戻す）。
   50vw トリックは縦スクロールバー幅ぶん溢れるので使わない。body の padding と必ず一致させること。
   color-mix 非対応の古い環境では 1行目のベタ塗りにフォールバックし、スクロール時も文字が地に負けない */
.site-header{position:sticky;top:0;z-index:50;margin:0 -20px 20px;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:2px solid var(--fg)}
.sh-inner{max-width:1100px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:18px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg);flex:none}
.brand svg{width:22px;height:22px;display:block}
.brand b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.brand .dex{color:var(--accent)}
.sh-menu{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.gnav{display:flex;gap:4px}
.gnav a{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-fg);
  text-decoration:none;padding:6px 11px;border-radius:999px}
.gnav a:hover{color:var(--fg);background:var(--card)}
.gnav a[aria-current]{color:var(--fg);font-weight:700}
.menu-toggle{display:none;font:inherit;font-size:18px;line-height:1;background:none;border:0;
  color:var(--fg);cursor:pointer;padding:6px 8px;border-radius:8px}
.menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 差し色トグルの跡地に置く SNS。売名が目的なので差し色ピルで確実に目へ入れる。
   accent／地は verify_theme で全配色 4.5:1 を検算済み（枠線の非文字3:1 も満たす） */
.sh-social{display:flex;align-items:center;gap:8px;margin:0}
.sh-social .sns-follow{display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--accent);white-space:nowrap}
.sh-social .sns-follow::after{content:"";width:14px;height:1px;background:var(--accent)}
.sh-sns-a{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;
  border:1px solid var(--accent);border-radius:999px;
  font-size:12px;font-weight:700;text-decoration:none;color:var(--accent);
  transition:background .15s,color .15s}
.sh-sns-a:hover{background:var(--accent);color:var(--accent-fg)}
/* アンカー（#styleidx / #parts）へ飛んだとき、見出しが sticky ヘッダーに隠れないよう逃がす */
#styleidx,#parts{scroll-margin-top:64px}

/* ヘッダーの空きスペースに置くサイト説明文。狭い画面では省略し、ハンバーガーに畳む */
.sh-desc{flex:1;min-width:0;margin:0;font-size:12.5px;color:var(--muted-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* モバイル：ナビをハンバーガーに畳む */
@media (max-width:760px){
  .sh-inner{position:relative}
  .sh-desc{display:none}
  .menu-toggle{display:inline-flex;margin-left:auto}
  .sh-menu{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:flex-start;gap:14px;
    background:var(--bg);border-bottom:2px solid var(--fg);padding:14px 20px}
  .sh-menu.open{display:flex}
  .gnav{flex-direction:column;gap:2px;width:100%}
  .gnav a{padding:8px 6px}
}

.crumb{font-size:13px;color:var(--muted-fg);margin-bottom:18px}
.masthead{border-bottom:2px solid var(--fg);padding-bottom:20px;margin-bottom:20px}
.masthead h1{font-size:clamp(28px,5vw,44px);letter-spacing:-.02em;line-height:1.15}
/* 和文の行長は em で取る。ch は半角基準なので全角では約半分の文字数で折り返す */
.masthead p{color:var(--muted-fg);margin-top:8px;font-size:14px;max-width:32em}
.count{font-size:13px;color:var(--muted-fg);margin-bottom:20px}

.styleidx{margin-bottom:28px}
.styleidx h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-fg);margin-bottom:10px}
.styleidx ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.styleidx li{border:1px solid var(--line);border-radius:999px;background:var(--card)}
.styleidx a{display:inline-block;padding:4px 6px 4px 12px;font-size:13px;text-decoration:none}
.styleidx .n{font-size:11px;color:var(--muted-fg);padding-right:12px}

.page-head{border-bottom:2px solid var(--fg);padding-bottom:18px;margin-bottom:20px}
.page-head h1{font-size:clamp(24px,4vw,36px);letter-spacing:-.02em;line-height:1.2}
.style-name{font-size:13px;color:var(--muted-fg);margin-top:6px}
.style-name b{color:var(--fg)}
.cat{color:var(--muted-fg)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:11px;border:1px solid var(--line);border-radius:999px;
  padding:2px 10px;color:var(--muted-fg);white-space:nowrap}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:10px}
.lcard-link{text-decoration:none;color:inherit;display:block}
.lcard-link:hover h2{text-decoration:underline}
.lcard h2{font-size:16px;letter-spacing:-.01em;margin-top:10px}

.demo{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.demo iframe{display:block;width:100%;height:340px;border:0}
/* 一覧のデモは「見る」だけ。iframe はマウスイベントを吸うので、
   これが無いとデモの上をクリックしてもカードのリンクが反応しない */
.lcard .demo iframe{pointer-events:none}
/* 枠を固定比にして全カードの高さを揃える。縦に長いデモは上端だけ見せる
   （一覧の目的は「形が分かる」ことなので、全部見せる必要はない。全体は詳細ページで見る） */
.lcard .demo{aspect-ratio:16/10;overflow:hidden}
.demo-lg iframe{height:400px}

.viewer{margin-bottom:28px}
.vbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.vgrp{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.vb{font:inherit;font-size:12px;line-height:1;padding:7px 12px;cursor:pointer;
  background:var(--card);color:var(--muted-fg);border:0;border-left:1px solid var(--line)}
.vb:first-child{border-left:0}
.vb:hover{color:var(--fg)}
.vb.on{background:var(--accent);color:var(--accent-fg)}
.vb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vopen{margin-left:auto;font-size:12px}
.vnote{font-size:12px;color:var(--muted-fg);margin-top:8px}
/* 幅を絞ったときも枠は中央に置く。デモは640px前後で組んであるので、
   フル幅で見ると意図した比率と違って見える */
.demo-lg{margin:0 auto;transition:max-width .18s ease}
/* デモは幅640px前後で組んである。スマホ幅ではそのままだと窮屈なので、
   横スクロールさせず縮小して全体を見せる（レイアウトの評価が目的なので、
   読めることより「形が分かること」を優先する） */
@media (max-width:640px){
  .demo-lg iframe{width:640px;height:400px;transform:scale(var(--demo-scale,.52));
    transform-origin:top left}
  .demo-lg{height:calc(400px * var(--demo-scale,.52))}
}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:720px){.cols{grid-template-columns:1fr}}
.blk{margin-bottom:24px}
.blk h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-fg);margin-bottom:8px}
.blk ul{padding-left:1.1em}
.blk li{font-size:14px;margin-bottom:6px}
.blk.anti h2{color:var(--fail)}
.rel{list-style:none;padding-left:0;display:flex;gap:10px;flex-wrap:wrap}

.tablewrap{overflow-x:auto}
.ct{border-collapse:collapse;font-size:13px;min-width:560px}
.ct th,.ct td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.ct th{background:var(--code-bg);font-size:12px;color:var(--muted-fg)}
.ct .num{text-align:right;font-variant-numeric:tabular-nums}
.ct .pass{color:var(--pass);font-weight:600}
.ct .warn{color:var(--warn);font-weight:600}
.ct .fail{color:var(--fail);font-weight:600}

details{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:600;
  padding:4px;border-radius:4px}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;
  padding:14px;margin-top:10px;overflow-x:auto}
code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:12px;
  line-height:1.6;white-space:pre}
.src{margin-top:12px;font-size:12px;color:var(--muted-fg)}

.pagenav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:32px;border-top:1px solid var(--line);padding-top:16px;font-size:14px}
.pagenav .next{margin-left:auto}
/* フッター：コピーライトと大きめロゴ＋ワードマークだけの簡潔な構成。中央寄せ（2026-07-31） */
.foot{max-width:1100px;margin:56px auto 0;border-top:1px solid var(--line);
  padding-top:28px;font-size:12px;color:var(--muted-fg);text-align:center}
.foot-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.foot-brand svg{width:40px;height:40px;display:block}
.foot-brand b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--fg)}
.foot-brand .dex{color:var(--accent)}
.foot-copy{font-size:12px;color:var(--muted-fg)}
/* Follow me：図鑑の静けさは保ちつつ、差し色のピルで確実に目に入れる。
   差し色は verify_theme で 6配色すべて 4.5:1 を再計算済みなので、枠線（非文字3:1）も満たす */
.sns-follow{display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--accent)}
.sns-follow::after{content:"";width:18px;height:1px;background:var(--accent)}
.about-sns-a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 20px;border:1px solid var(--accent);border-radius:999px;
  font-size:13px;font-weight:700;text-decoration:none;
  transition:background .15s,color .15s}
.about-sns-a:hover{background:var(--accent);color:var(--accent-fg)}

.credit-box{margin-top:12px;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:12px 14px}
.credit-label{font-size:12px;color:var(--muted-fg);margin-bottom:6px}
.credit-line code{white-space:normal;overflow-wrap:anywhere;color:var(--fg);font-size:13px}
.about-sns{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* このサイトについて／お問い合わせ */
.wrap.narrow{max-width:680px}
.prose{font-size:14px;line-height:1.9;max-width:40em}
.prose b{color:var(--fg)}
.prose.muted{color:var(--muted-fg);font-size:12.5px}
.blk .opt{color:var(--muted-fg);font-weight:400;font-size:12px}
.blk .req{color:var(--accent);font-weight:700;font-size:11px;margin-left:4px}

/* フォーム：ラベル常時表示・枠は非文字3:1・タップ44px（22_accessible_form の原則を自サイトでも守る） */
.cform{margin-top:14px;max-width:520px}
.cfield{margin-bottom:14px;display:flex;flex-direction:column;gap:5px}
.cfield label{font-size:13px;font-weight:600}
.cinput,.cselect,.ctextarea{
  font:inherit;font-size:14px;color:var(--fg);background:var(--card);
  border:1.5px solid var(--muted-fg);border-radius:8px;padding:10px 12px;width:100%}
.ctextarea{min-height:120px;resize:vertical;line-height:1.7}
.cinput:focus-visible,.cselect:focus-visible,.ctextarea:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.chp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.csubmit{font:inherit;font-size:14px;font-weight:700;color:var(--accent-fg);
  background:var(--accent);border:0;border-radius:9px;padding:12px 22px;
  min-height:44px;cursor:pointer;margin-top:2px}
.csubmit:hover{filter:brightness(1.08)}
.csubmit:disabled{opacity:.6;cursor:default}
.csubmit:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cstatus{margin-top:10px;font-size:13px;font-weight:600;min-height:1.2em}
.cstatus.ok{color:var(--pass)}
.cstatus.err{color:var(--fail)}