/* UX009: デザイントークンの正本は tokens.css。UX053(2026-08-22) で @import をやめ、
   HTML 側から <link href="assets/tokens.css?v=hash"> で直接読む（順序は tokens → style）。
   UX111(2026-09-21): 明朝は別名 --serif をやめて --font-serif に一本化した（値は同じ）。 */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* UX087（2026-09-02）動きを減らす設定の尊重。ポータル index.html L59 と同じ1行の書き方をそのまま複製した。
   ★@keyframes 3点は既に `@media screen and (prefers-reduced-motion: no-preference)`（L370）で
   ゲート済みなので、ここで足りていないのは scroll-behavior と transition の2つだけ。
   通常時（no-preference）の見た目は1pxも変わらない。新色・新変数ゼロ。 */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.85;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.hb-top{position:sticky;top:0;z-index:40;background:var(--navy);color:#eef3f8;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.hb-top-in{display:flex;align-items:center;gap:16px;padding:13px 20px;flex-wrap:wrap}
.hb-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:700;font-size:1.06rem;color:#fff;white-space:nowrap}
.hb-logo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.02em}
.hb-search-wrap{position:relative;flex:1;min-width:200px}
#hbsearch{width:100%;font-family:var(--sans);font-size:.88rem;padding:9px 14px;border-radius:30px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff}
#hbsearch::placeholder{color:#b9c6d4}
#hbsearch:focus{background:#fff;color:var(--ink);border-color:var(--teal)}
.hb-board{font-size:.8rem;color:#cfe0ef;border:1px solid rgba(255,255,255,.22);padding:6px 12px;border-radius:30px;white-space:nowrap}
.hb-board:hover{background:rgba(255,255,255,.1)}
.hb-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 34px rgba(15,30,50,.22);overflow:hidden;max-height:62vh;overflow-y:auto}
.hb-results .sr{display:block;padding:11px 15px;border-top:1px solid var(--line);color:var(--ink)}
.hb-results .sr:first-child{border-top:none}
.hb-results .sr:hover{background:var(--a-bg)}
.sr-t{display:block;font-weight:600;font-size:.9rem;color:var(--head)}
.sr-g{display:inline-block;font-size:.68rem;color:var(--acc);background:var(--a-bg);border-radius:20px;padding:1px 9px;margin:3px 0}
.sr-s{display:block;font-size:.78rem;color:var(--ink-2);line-height:1.6}
.hb-results .nores{padding:16px;color:var(--ink-2);font-size:.85rem;text-align:center}
.hb-nav{background:var(--navy-2)}
.hb-nav-in{display:flex;gap:4px;overflow-x:auto;padding:0 20px}
.hb-nav a{font-size:.82rem;color:#d4e0ec;padding:11px 13px;white-space:nowrap;border-bottom:2px solid transparent}
.hb-nav a:hover{color:#fff}
.hb-nav a.on{color:#fff;border-bottom-color:var(--teal);font-weight:600}
.hb-main{padding:22px 20px 50px}
.crumb{font-size:.78rem;color:var(--ink-2);margin:4px 0 18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb a{color:var(--acc)}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:var(--faint)}
h1,h2,h3,h4{line-height:1.5}
.g-title{font-family:var(--font-serif);font-size:1.7rem;font-weight:700;margin:8px 0 4px;color:var(--head)}
.g-emoji{margin-right:8px}
.g-sub{color:var(--ink-2);font-size:.85rem;margin:0 0 20px}
.hub-hero{position:relative;background:#10243a;border-radius:14px;padding:26px 26px 20px;margin-bottom:14px;overflow:hidden}
.hub-hero h1,.hub-hero p{position:relative}
.hub-hero h1{font-family:var(--font-serif);font-size:1.95rem;font-weight:700;color:#fff;margin:8px 0 8px}
.hub-hero p{color:#c9d6e4;font-size:.92rem;margin:0 0 6px}
/* UX001: トップの入口3つ（既存トークンのみ使用） */
.entry3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:16px 0 8px}
.e3{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 8px}
.e3.lead{border-left:4px solid var(--teal)}
.e3-lab{display:block;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2);margin-bottom:8px}
.e3 a{display:block;font-size:.86rem;font-weight:600;color:var(--head);padding:8px 0;border-top:1px solid var(--line);line-height:1.6}
.e3 a:first-of-type{border-top:none}
.e3 a:hover{color:var(--acc)}
.hub-sec{margin:30px 0}
.hub-sec h2{font-family:var(--font-serif);font-size:1.25rem;color:var(--head);border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:16px}
.principles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.principles li{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
.principles .pn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.principles b{display:block;font-size:.95rem;color:var(--head);margin-bottom:2px}
.principles div>span{font-size:.82rem;color:var(--ink-2)}
.hub-gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.hub-gcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 0 8px;overflow:hidden;border-top:4px solid var(--teal)}
.hub-gcard.g-A{border-top-color:#2f6f9f}.hub-gcard.g-B{border-top-color:#c0533f}.hub-gcard.g-C{border-top-color:#8a6d2f}.hub-gcard.g-D{border-top-color:#0E8074}
.hub-gh{display:flex;gap:11px;align-items:center;padding:13px 16px 11px}
.hub-gemoji{font-size:1.4rem}
.hub-gh b{display:block;font-family:var(--font-serif);font-size:1.06rem;color:var(--head)}
.hub-gtype{font-size:.72rem;color:var(--ink-2)}
.hub-glist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.hub-glist a{font-size:.83rem;color:var(--ink);padding:8px 16px;border-top:1px solid var(--line)}
.hub-glist a:first-child{border-top:none}
.hub-glist a:hover{background:var(--a-bg);color:var(--acc)}
.hub-sec.links{display:block}
.hub-sec.links a{display:inline-block;font-size:.86rem;color:var(--head);background:var(--card);border:1px solid var(--line);border-radius:30px;padding:8px 15px;margin:0 8px 8px 0}
.hub-sec.links a:hover{border-color:var(--teal)}
.g-note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:var(--r);padding:6px 16px;margin:0 0 18px;color:var(--ink-2);font-size:.9rem}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.sc-card{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;transition:.15s}
.sc-card:hover{border-color:var(--teal);transform:translateY(-2px)}
.sc-id{flex:none;font-weight:700;font-size:.74rem;border-radius:7px;padding:3px 8px}
.sc-t{font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.5}
.s-head{margin:2px 0 14px}
.s-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.gtag{font-size:.74rem;font-weight:600;color:#fff;border-radius:30px;padding:4px 12px}
.gtag.g-A{background:#2f6f9f}.gtag.g-B{background:#c0533f}.gtag.g-C{background:#8a6d2f}.gtag.g-D{background:#0E8074}
.ttag{font-size:.74rem;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);border-radius:30px;padding:4px 12px}
.s-head h1{font-family:var(--font-serif);font-size:1.55rem;font-weight:700;color:var(--head);margin:0;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.s-id{font-size:1rem;color:#fff;background:var(--navy);border-radius:8px;padding:3px 11px;font-family:var(--sans);font-weight:700}
.purpose{background:var(--a-bg);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--r);padding:12px 16px;margin:0 0 20px}
.purpose .p-tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--acc);margin-bottom:2px}
.purpose p{margin:0;font-size:.92rem;color:var(--ink)}
.s-body{font-size:.92rem}
/* UX002: 本文の行長を最大42em（日本語で約42字）に制限。表(.tbl-wrap)は除外 */
.s-body p,.s-body ul,.s-body ol,.s-body blockquote,.purpose{max-width:42em}
.s-body h3{font-family:var(--font-serif);font-size:1.16rem;color:var(--head);margin:28px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.s-body h4{font-size:.96rem;color:var(--navy-2);margin:20px 0 8px;font-weight:700}
/* ===== UX095（2026-09-07）ダークの小見出しが地に沈んでいた =====
   ダーク時 --navy-2(#1a2438) は .s-body の地 --bg(#141821) に対して 1.14:1 で、ほぼ不可視だった。
   ダーク側だけ本文色 --ink へ寄せる（09-07 司令の裁定＝新しい色値・新変数は作らない）。
   ・ライト側の宣言は1バイトも変えていない（ライトは --navy-2 のままで足りている）
   ・階層は色ではなくサイズ(.96rem)とウェイト(700)が担うので、本文と同色でも段は残る */
@media (prefers-color-scheme: dark){.s-body h4{color:var(--ink)}}
.s-body p{color:var(--ink);margin:8px 0}
.s-body ul,.s-body ol{margin:8px 0;padding-left:22px}
.s-body ol li{margin:5px 0}
blockquote{margin:12px 0;padding:8px 15px;border-left:3px solid var(--line-2);color:var(--ink-2);background:var(--card);border-radius:0 8px 8px 0;font-size:.88rem}
.checklist{list-style:none;padding:0;margin:10px 0}
.checklist li{display:flex;gap:11px;align-items:flex-start;padding:8px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;background:var(--card)}
.checklist li .cb{flex:none;width:18px;height:18px;margin-top:3px;border:2px solid var(--line-2);border-radius:5px;background:var(--card)}
.checklist li .t{flex:1;font-size:.9rem;line-height:1.7}
.checklist li.star{border-color:var(--star);background:var(--star-bg)}
.checklist li.star .cb{background:var(--star);border-color:var(--star);position:relative}
.checklist li.star .cb::after{content:"\2605";position:absolute;top:-4px;left:1px;font-size:13px;color:#fff;line-height:1}
.star-badge{flex:none;align-self:center;font-size:.66rem;font-weight:700;color:var(--star);background:var(--card);border:1px solid var(--star);border-radius:20px;padding:1px 8px;white-space:nowrap}
.callout.review{display:flex;gap:10px;align-items:flex-start;background:var(--rev-bg);border:1px solid var(--rev-line);border-radius:10px;padding:11px 14px;margin:12px 0;font-size:.86rem;color:var(--rev)}
.rev-badge{flex:none;font-size:.66rem;font-weight:700;color:#fff;background:var(--rev);border-radius:20px;padding:2px 9px;margin-top:2px}
/* UX023（2026-08-13）チェックリスト内で .rev-badge を再利用するときの位置合わせのみ。
   色・サイズ・角丸は .rev-badge の既存値をそのまま使い、star-badge と同じ垂直中央に揃える。 */
.checklist li .rev-badge{align-self:center;margin-top:0}
.ic-rev{font-size:.78rem;font-weight:700;color:var(--rev);background:var(--rev-bg);border:1px solid var(--rev-line);border-radius:5px;padding:0 5px}
/* UX005（2026-08-08）本文末尾の「関連する場面」が埋もれる問題。
   ・見出しのウェイトを1段上げる（h3 既定の 700 → 800。サイズ・色は据え置き＝階層はウェイトで作る）
   ・リンクカードの高さを 44px に揃える（UX003 がモバイルに入れている既存値を全幅へ広げただけで、
     新しい数値は作らない）。余白は 4px 刻みへ統一（gap 7→8 / padding 9-13 → 8-12）。
   ・色は一切変えないため、ライト／ダークとも見え方の差は生じない。 */
.rel{margin:32px 0 8px;border-top:1px dashed var(--line-2);padding-top:20px}
.rel h3{font-family:var(--font-serif);font-size:1rem;font-weight:800;color:var(--head);margin:0 0 12px}
.rel-list{display:flex;flex-direction:column;gap:8px}
.rel-list.idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.rel-list a,.rel a{display:flex;gap:10px;align-items:center;min-height:44px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:.85rem;color:var(--ink)}
.rel-list a:hover,.rel a:hover{border-color:var(--teal);color:var(--acc)}
/* UX025（2026-08-13）同じグループの関連場面が長大（最大18件）になる問題。
   先頭8件だけ既定表示し、残りは <details> に畳む。開閉記号・文字色は .side-sum の既存定義をそのまま使う。 */
.rel-more{margin-top:8px}
.rel-more>.rel-list{margin-top:8px}
/* ===== UX042（2026-08-20）長い一覧の段階的開示 =====
   data-fold="N" を持つ一覧は app.js が先頭 N 件だけ残して畳み、直後に開閉ボタンを差し込む。
   HTML には全件が出力されているので、JS 無効時は畳まれず全件表示のまま（プログレッシブエンハンスメント）。
   隠す規則を @media screen で囲うため、印刷時はこの規則自体が効かず全件が紙に出る（UX011/UX026 を壊さない）。
   ボタンの見た目は UX025 の .side-sum（「残り N 件を表示」）と同じ定義を流用し、新しい色・変数・角丸は作らない。 */
@media screen{.fold-hidden{display:none}}
.fold-more{margin-top:8px;width:100%;background:none;border:0;font-family:var(--sans);cursor:pointer;font-size:.83rem;font-weight:600;color:var(--head);text-align:left;padding:7px 10px;border-radius:8px;display:flex;align-items:center;gap:6px}
.fold-more::after{content:"\203a";margin-left:auto;color:var(--faint);transform:rotate(90deg);transition:.15s;font-size:1.05rem;font-weight:700}
.fold-more[aria-expanded="true"]::after{transform:rotate(-90deg)}
.fold-more:hover{background:var(--a-bg)}
.rel-id{flex:none;font-size:.72rem;font-weight:700;color:#fff;background:var(--navy);border-radius:6px;padding:2px 8px}
.s-meta{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-2)}
.s-meta a{color:var(--acc);font-weight:500}
.src-link{font-size:.74rem;color:var(--acc);font-weight:500;margin-left:8px}
.tbl-wrap{overflow-x:auto;margin:12px 0}
/* ===== UX017（2026-08-11）表の横スクロールに気づけない問題 =====
   スクロールできる表の右端に、罫色（--line-2）へ溶けるフェードを出す。
   ・新しい色・角丸・影は作らない（既存トークン --line-2 のみ）。表の列幅・文字サイズは変えない（UX002 の裁定どおり対象外）。
   ・app.js が overflow を実測して .can-scroll / .at-end を付ける＝収まっている表・末尾まで見た表には出さない。
   ・JS が無効な環境では単に何も出ない（表そのものの見え方は従来どおり）。 */
.tbl-scroll{position:relative;margin:12px 0}
.tbl-scroll>.tbl-wrap{margin:0}
.tbl-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .15s;background:linear-gradient(to right,rgba(0,0,0,0),var(--line-2))}
.tbl-scroll.can-scroll::after{opacity:.75}
.tbl-scroll.can-scroll.at-end::after{opacity:0}
table{border-collapse:collapse;width:100%;font-size:.86rem;background:var(--card)}
th,td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
th{background:var(--a-bg);color:var(--head);font-weight:700}
.hb-foot{border-top:1px solid var(--line);background:var(--card);margin-top:30px;padding:22px 0;color:var(--ink-2);font-size:.8rem}
.hb-foot b{color:var(--ink)}
.hb-foot-sub{margin-top:6px;font-size:.76rem;color:var(--faint)}
.hb-foot a{color:var(--acc)}
@media(max-width:620px){
  .hb-top-in{gap:10px}
  .hb-brand span:last-child{display:none}
  .g-title,.hub-hero h1{font-size:1.5rem}
  .s-head h1{font-size:1.3rem}
}
.hub-gcard.g-sales{border-top-color:#c06a2f}.hub-gcard.g-tech{border-top-color:#7a5cb8}.hub-gcard.g-mfg{border-top-color:#2f8f5f}
.gtag.g-sales{background:#c06a2f}.gtag.g-tech{background:#7a5cb8}.gtag.g-mfg{background:#2f8f5f}

/* ===== sidebar layout (v2) ===== */
.hb-top-in{max-width:1240px;margin:0 auto}
.hb-burger{display:none;background:transparent;border:0;color:#eef3f8;font-size:1.35rem;cursor:pointer;padding:2px 6px;line-height:1}
.hb-shell{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:262px minmax(0,1fr)}
.hb-side{position:sticky;top:58px;align-self:start;max-height:calc(100vh - 58px);overflow-y:auto;border-right:1px solid var(--line);background:var(--card);padding:14px 8px 44px}
.hb-main{padding:20px 30px 60px;min-width:0}
.side-nav a{display:block;font-size:.82rem;color:var(--ink);padding:6px 10px;border-radius:8px;line-height:1.5}
.side-nav a:hover{background:var(--a-bg);color:var(--acc)}
.side-nav a.on{font-weight:700}
.side-home{font-weight:700;color:var(--head);margin-bottom:2px}
.side-item{font-weight:600;color:var(--head)}
.side-cap{font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--faint);margin:15px 10px 4px}
.side-grp{margin:0}
.side-sum{list-style:none;cursor:pointer;font-size:.83rem;font-weight:600;color:var(--head);padding:7px 10px;border-radius:8px;display:flex;align-items:center;gap:6px}
.side-sum::-webkit-details-marker{display:none}
.side-sum::after{content:"›";margin-left:auto;color:var(--faint);transform:rotate(90deg);transition:.15s;font-size:1.05rem;font-weight:700}
details[open]>.side-sum::after{transform:rotate(-90deg)}
.side-sum:hover{background:var(--a-bg)}
.side-grp>a{padding-left:26px;font-size:.79rem;color:var(--ink-2)}
.side-grp>a.on{color:#fff}
.sd{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block}
.sd-A{background:#2f6f9f}.sd-B{background:#c0533f}.sd-C{background:#8a6d2f}.sd-D{background:#0E8074}
.sd-sales{background:#c06a2f}.sd-tech{background:#7a5cb8}.sd-mfg{background:#2f8f5f}
.sd-buy{background:#b0518f}.sd-vendor{background:#5f7488}.sd-ts{background:#c0392b}
.gtag.g-buy{background:#b0518f}.gtag.g-vendor{background:#5f7488}.gtag.g-ts{background:#c0392b}
.hub-gcard.g-buy{border-top-color:#b0518f}.hub-gcard.g-vendor{border-top-color:#5f7488}.hub-gcard.g-ts{border-top-color:#c0392b}
.hb-ov{display:none}
@media (max-width:860px){
  .hb-burger{display:inline-flex;align-items:center}
  .hb-brand-t{display:none}
  .hb-shell{display:block;max-width:none}
  .hb-side{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;max-height:none;height:100vh;z-index:70;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.side-open .hb-side{transform:none}
  .hb-ov{position:fixed;inset:0;background:rgba(10,20,30,.45);z-index:60}
  body.side-open .hb-ov{display:block}
  .hb-main{padding:16px 16px 54px}
}

/* UX003: モバイル(<=860px)のタップ領域を最小44pxに揃える */
@media (max-width:860px){
  .hb-burger{min-width:44px;min-height:44px;padding:0;justify-content:center}
  .hb-search-wrap{min-width:160px}
  #hbsearch{min-height:44px;padding:10px 16px;font-size:16px}
  .ptabs nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px}
  .side-nav a{display:flex;align-items:center;min-height:44px;padding:8px 12px}
  .side-sum,.fold-more{min-height:44px;padding:8px 12px}
  .side-grp>a{padding-left:28px}
  .hub-glist a{display:flex;align-items:center;min-height:44px;padding:8px 16px}
  .hub-sec.links a{display:inline-flex;align-items:center;min-height:44px}
  .e3 a{min-height:44px;padding:12px 0}
  .rel-list a,.rel a{min-height:44px}
  .hb-results .sr{padding:12px 16px}
}

/* --- What's new / changelog + hub updated banner (added 2026-07-03) --- */
/* UX008: ハードコード色を既存トークンへ。バナーの緑をやめ、強調はテキスト色ではなく
   地色＋罫で出す（1画面の強調色を減らし、ダークモードで浮く／沈む問題を解消） */
.hub-updated{display:inline-block;margin:0 0 14px;padding:8px 14px;border-radius:8px;background:var(--a-bg);border:1px solid var(--line-2);color:var(--head);font-weight:700;text-decoration:none;font-size:14px}
.hub-updated:hover{border-color:var(--teal)}
.wn{margin-top:8px}
.wn-day{margin:0 0 22px;border-left:3px solid var(--line-2);padding:0 0 6px 16px}
.wn-date{font-size:16px;margin:0 0 10px;color:var(--head)}
.wn-count{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:2px 8px;margin-left:6px}
.wn-list{list-style:none;margin:0;padding:0}
.wn-item{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line)}
.wn-tag{flex:0 0 auto;font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;color:#fff;white-space:nowrap}
.t-add{background:#2f8f63}.t-imp{background:#3b7fb0}.t-brand{background:#a6772f}.t-new{background:#7a6fc0}.t-fix{background:#b0518f}.t-other{background:#8895a3}

/* --- portal tabs (共通ナビ) --- */
/* ===== UX113（2026-09-17・masaki確定③）共通ナビを紺帯に載せる（3系統一斉） =====
   地を --card から --navy へ。帯に載る文字は、ヘッダー（.hb-top・同じ --navy 地）が
   すでに使っている #eef3f8（本文相当）と #fff（強調）をそのまま使う＝新色・新変数はゼロ。
   下の境界は --line（明色の細線）だと紺面の下で浮くため --navy-2 へ。寸法は 1px のまま。
   到達値（実測）: #eef3f8 対 --navy ＝ ライト 11.9:1／ダーク 15.4:1、
   #fff 対 --navy ＝ ライト 13.29:1／ダーク 17.19:1（いずれも AA 4.5:1 を満たす）。 */
.ptabs{background:var(--navy);border-bottom:1px solid var(--navy-2)}
.ptabs-in{display:flex;align-items:center;gap:10px;padding:10px 20px;flex-wrap:wrap;max-width:1400px;margin:0 auto}
.pbrand{font-size:.8rem;font-weight:800;color:#fff;letter-spacing:.06em;margin-right:auto}
.ptabs nav{display:flex;gap:6px;flex-wrap:wrap;row-gap:4px;max-width:100%}
.ptabs nav a{white-space:nowrap;font-size:.8rem;font-weight:500;color:#eef3f8;padding:6px 13px;border-radius:30px}
/* UX030: 共通ナビ(ptabs)の絵文字→SVGアイコン（handbook 全ページ・check/*.html 共通）。
   新色は作らず currentColor を継承＝ライト/ダーク/選択中(.on)/hover いずれも既存の文字色に自動追従する。 */
.ptabs nav a svg{width:1.05em;height:1.05em;margin-right:5px;vertical-align:-.16em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* UX113: hover は紺面の上で使える既存トークン --navy-2（ライト #28374d／ダーク #1a2438）。
   選択中（.on）は UX022 の塗りバッジ群から外し、ライト・ダークとも同じ「白文字＋白の1px枠」に揃えた。
   理由＝紺帯の上では、ライトの「--acc 塗り × 白文字」もダークの「--teal-d アウトライン」も
   帯との関係が変わり、しかも2つのモードで選択中の形が違っていた（09-16 UX報告 提案2）。
   枠は outline（offset -1px）で描き、ライト↔ダークで箱の寸法が変わらないようにする。 */
.ptabs nav a:hover{color:#fff;background:var(--navy-2)}
.ptabs nav a.on{background:transparent;color:#fff;outline:1px solid #fff;outline-offset:-1px}
.ptabs nav a.on:hover{background:var(--navy-2);color:#fff}
@media(max-width:560px){.ptabs-in{justify-content:center}.pbrand{width:100%;text-align:center;margin-right:0}}

/* ===== UX022（2026-08-06）「白抜きの塗りバッジ」の共通定義 =====
   同じ見た目（--teal 地 × 白文字）を共有していた .hb-logo / .sc-id / .gtag / .side-nav a.on /
   .ck-btn の色指定をここ1箇所へ集約する。今後のコントラスト調整はこのブロックだけを触ればよい。
   ・UX113(2026-09-17) で .ptabs nav a.on はこの群から抜けた（紺帯の上の「白文字＋白枠」へ）。
   ・.pill-on は今後の新規要素が使うための別名。既存クラス名はそのまま残してある（HTML側は未変更）。
   ・形・寸法（角丸・余白・文字サイズ）は各コンポーネント側に残す＝ここは色だけを持つ。
   ・.gtag.g-A 〜 .g-ts は分類識別色を持つため対象外（:not で除外。文字色 #fff は .gtag 側に残置）。
   ・.ck-btn は handbook/check/ck1〜13.html のインライン style から色指定を引き上げたもの
     （インライン側には border-width/border-style だけを残し、色はここが正）。 */
.pill-on,
.hb-logo,
.sc-id,
.gtag:not(.g-A):not(.g-B):not(.g-C):not(.g-D):not(.g-sales):not(.g-tech):not(.g-mfg):not(.g-buy):not(.g-vendor):not(.g-ts),
.side-nav a.on,
.ck-btn{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ===== UX013（2026-08-06）ダークモードのコントラストAA対応 =====
   ダークの「--teal(#3b82f6) 地 × 白文字」は 3.678:1 で AA(4.5:1) 未達。
   ダーク時のみ、透明地＋--teal-d 文字＋1px --teal-d の枠（アウトライン表示）へ切り替える。
   ・ライトモードは変更しない／新しい色・変数は作らない（--teal-d はダーク既存トークン #5e8cf0）
   ・枠は outline（offset -1px）で描き、ライト↔ダークで箱の寸法が変わらないようにする
     （.ck-btn だけは元から 1px の border を持つため border-color の差し替えで揃える）
   到達値: --card 4.558 / --bg 5.485 / --navy 5.448（いずれも AA 達成） */
@media (prefers-color-scheme: dark){
  .pill-on,
  .hb-logo,
  .sc-id,
  .gtag:not(.g-A):not(.g-B):not(.g-C):not(.g-D):not(.g-sales):not(.g-tech):not(.g-mfg):not(.g-buy):not(.g-vendor):not(.g-ts),
  .side-nav a.on,
  .ck-btn{background:transparent;color:var(--acc);border-color:var(--acc)}
  /* border を持たない4要素の枠は outline で描く（.ck-btn は元から 1px の border を持つので不要。
     UX113 で .ptabs nav a.on が抜けたため 5→4） */
  .pill-on,
  .hb-logo,
  .sc-id,
  .gtag:not(.g-A):not(.g-B):not(.g-C):not(.g-D):not(.g-sales):not(.g-tech):not(.g-mfg):not(.g-buy):not(.g-vendor):not(.g-ts),
  .side-nav a.on{outline:1px solid var(--acc);outline-offset:-1px}
  /* hover の地色 --a-bg 上では 4.314 で AA 未達になるため、選択中の項目だけ --card に留める（4.558）。
     UX113(2026-09-17): .ptabs nav a.on は紺帯へ移したのでこの群から外した（上の UX113 ブロックが正）。 */
  .side-nav a.on:hover{background:var(--card);color:var(--acc)}
  /* UX097 の付随修正（2026-09-07）: 診断の「優先度N」バッジ（check/*.html の .ck-plan-item .prio）は
     ダークでも白文字×--teal 地のままで、UX013 の切り替え群から漏れていた（差し替え前 3.68:1／
     差し替え後 2.87:1 でどちらも AA 未達＝コントラスト不足の明白な崩れ）。同じアウトライン方式へ揃える。
     ページ側 <style>（.ck-plan-item .prio）より後ろに置けないため、h5 を挟んで詳細度で勝たせている。
     ダーク時のみ・ライトは1バイトも変えない・新色ゼロ（到達 6.34:1 / --card 上）。 */
  .ck-plan-item h5 .prio{background:transparent;color:var(--acc);
    outline:1px solid var(--acc);outline-offset:-1px}
}

/* 2026-08-10 広告枠プレースホルダー（中身が入るまで視覚要素なし・高さのみ確保） */
.ad-slot{display:block;width:100%;max-width:728px;margin:28px auto 0;min-height:90px}
@media(max-width:760px){.ad-slot{min-height:100px;max-width:336px}}
/* UX038（2026-08-19）診断14本の枠は、コード未挿入の間だけ予約高さを0にする。
   ページ最下部に空の90pxが残り、注意書き（.ck-note）と footer の間が間延びして見えたため。
   対象は data-slot="check-bottom" のみ＝index/soudan と同じ扱い（記事下の handbook-article は現状維持）。
   コード挿入時はこの1行を消せば上の .ad-slot（90px／モバイル100px）に戻る。 */
.ad-slot[data-slot="check-bottom"]{min-height:0}
/* UX050（2026-08-20）記事下枠も同じ扱いへ揃える（司令 08-20 裁定・提案1採用）。
   UX038 で診断14本だけ予約高さを0にした結果、同じ「コード未挿入の空枠」の見え方が
   サイト内で2通りに割れていた。枠・class・DOM位置・PR表記テンプレ（.pr-note）は消さない＝
   コード挿入時はこの1行を消せば上の .ad-slot（90px／モバイル100px）に戻る。 */
.ad-slot[data-slot="handbook-article"]{min-height:0}
/* UX037（2026-08-18）紹介枠のPR表記テンプレ。枠だけ先に用意する段階なので既定は非表示。
   掲載時にこの display:none を外す＝PR表記なしでアフィリンクが出る状態を作らないための保険。
   色・余白は既存トークンのみ（--ink-2／.ad-slot と同じ 728px 幅・4px刻みの余白）。
   ★UX117(2026-09-23): 別名 --muted は削除済み。以後は正式名 --ink-2 を書く。 */
.pr-note{display:none;width:100%;max-width:728px;margin:28px auto 0;font-size:.78rem;color:var(--ink-2)}

/* ===== UX010（2026-08-11）検索候補のキーボード操作と可視フォーカス =====
   ・↑↓ で移動中の候補は hover と同じ地色（--a-bg）で示す＝新しい色は作らない。
   ・:focus-visible の輪郭は強調色 --teal（tokens.css の #2563eb／ダークは #3b82f6）。
     ★UX113(2026-09-17) で .ptabs nav a の輪郭は下の白系ブロックへ移動した（帯が --navy になったため）。
   ・マウス操作（hover・クリック）の挙動と見え方は変更しない。
   ・UX027(2026-08-15): #hbsearch:focus の outline:none を撤去した。:focus-visible 非対応の環境では
     ブラウザ既定のフォーカス輪郭がそのまま出る＝キーボード操作が見える望ましい状態である。 */
.hb-results .sr.active{background:var(--a-bg)}
#hbsearch:focus-visible,
.hb-results .sr:focus-visible,
.side-nav a:focus-visible,
.hb-burger:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ===== UX073b（2026-08-30・masaki確定「白系の輪郭で承認」）ヘッダー（--navy 地）のフォーカス輪郭 =====
   UX073 で残した 272 個（.hb-brand）と、上の規則で --teal が当たっていた .hb-burger を、
   navy 地に合う白系の輪郭へ差し替える。--teal は navy 上でライト 2.83:1 と 3:1 に届かないため。
   ・色は新設していない。#fff は同じヘッダー内の .hb-brand の文字色として既に使われている値。
   ・コントラストは #fff 対 --navy でライト 14.63:1／ダーク 17.64:1（どちらも 3:1 を大きく満たす）。
   ・本文側（--bg / --card 地）の --teal 輪郭は変更しない＝この規則はヘッダー内の2要素だけに効く。
   ・上の UX010 の規則より後に置くことで .hb-burger を後勝ちで上書きする（詳細度は同じ）。
   ・focus 中だけ描く輪郭なので、通常表示・印刷・レイアウトへの差分はゼロ。 */
/* UX113(2026-09-17): 共通ナビが --navy 地になったので、.ptabs nav a の輪郭も同じ理由で白系へ移した
   （--teal は navy 上でライト 2.83:1＝3:1 未達）。#fff 対 --navy は実測 13.29／17.19:1。 */
.hb-brand:focus-visible,
.ptabs nav a:focus-visible,
.hb-burger:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===== UX073（2026-08-29）:focus-visible の網羅 =====
   UX010/UX027 の輪郭は7件あったが、キーボードで到達できる要素 80,581個のうち 11,625個が
   外れていた（272本を機械走査）。内訳は本文 <main class="hb-main"> の中 7,383個（関連する場面・
   パンくず・ハブの一覧・場面カード・診断14本のボタン／戻る導線／自由記述欄／選択肢のラジオ）／
   サイドバーと本文の開閉 <summary class="side-sum"> 3,182個／フッターのリンク 788個。
   いずれもブラウザ既定の輪郭任せで、サイト共通の見え方から外れていた。この追加で残りは 272個
   （後述の .hb-brand のみ）になる。
   ・宣言は上の UX010 と同一（--teal 2px / outline-offset 2px）。新しい色・変数・角丸・余白は作らない。
   ・地色はいずれも --bg か --card で、--teal との比は 4.01〜5.17:1（ライト 4.82／5.17、
     ダーク 4.83／4.01）＝WCAG の非文字 3:1 をライト・ダークとも満たす。
   ・★ヘッダー（--navy 地）の .hb-brand は入れていない。--teal は navy 上でライト 2.83:1 と 3:1 に届かず、
     ブラウザ既定の輪郭を上書きすると かえって見えにくくなるため。裁量案件として報告書の提案欄へ。
   ・focus 中だけ描く輪郭なので、通常表示・印刷・レイアウトへの差分はゼロ。 */
.side-sum:focus-visible,
.hb-main a:focus-visible,
.hb-main button:focus-visible,
.hb-main input:focus-visible,
.hb-main textarea:focus-visible,
.hb-foot a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ===== UX011（2026-08-11）印刷（A4）レイアウト =====
   紙に必要なのは「本文＋関連する場面」だけ。ヘッダー・検索・サイドバー・共通ナビ・
   フッター・広告枠は落とし、1カラムで流す。URLの脚注表示は付けない（司令どおり）。
   ・ダークモードのまま印刷しても紙が黒くならないよう、:root をライト値（tokens.css と同値）に固定する。
     ここで新しい色は作らず、tokens.css のライト値をそのまま再掲している。
   ・モバイル用 @media(max-width:860px) は A4幅（約794px）でも一致してしまうため、
     44px の最小高さなど紙面を膨らませる指定を印刷時だけ解除する。 */
/* ===== UX031（KD3 展開・2026-08-16）index.html の KD01 を handbook / check へ展開 =====
   ・見出しの明朝化は tokens.css の --serif が既存の見出しセレクタに効くため、ここでは字詰め(palt)だけを足す。
   ・控えめなスクロール出現。外部ライブラリなし・prefers-reduced-motion 尊重・
     animation-timeline 非対応ブラウザは静的表示のまま。
   ・@media screen で囲うため UX011/UX026 の印刷CSS には干渉しない（印刷では常に静的・不透明）。
   ・新しい色・変数・角丸は作らない。 */
.hb-brand,.g-title,.hub-hero h1,.hub-sec h2,.hub-gh b,.s-head h1,.s-body h3,.ck-title,
.rel h3,.pol-sec>h2,.rule-section{font-feature-settings:"palt"}
@media screen and (prefers-reduced-motion: no-preference){
  .hub-hero h1,.hub-hero p,.s-head{animation:kdIn .6s ease both}
  .hub-hero p{animation-delay:.07s}
  @supports (animation-timeline: view()){
    .hub-sec h2,.s-body h3{animation:kdRise .6s ease both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .hub-gcard,.e3,.ck-note{animation:kdFade .5s ease both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes kdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kdRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kdFade{from{opacity:0}to{opacity:1}}

/* ===== UX032（2026-08-16）社内版（HANDBOOK_MODE=internal）だけが出力する2ページの可読性 =====
   ここで定義するクラスは policy.html / review.html にしか現れないため、公開ビルドの見た目は不変。
   既存トークン（--card / --line / --r / --ink-2 / --head）のみを使い、新しい色・角丸は作らない。
   ★UX117(2026-09-23): 旧名 --radius / --muted は削除済み＝正式名に書き替えた（実コードは元から正式名）。 */
.pol-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px 8px;margin:16px 0}
.pol-sec>h2{font-family:var(--font-serif);margin-top:0}
.pol-sec>:last-child{margin-bottom:0}
.rev-cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:12px 0}
.rev-cat>.side-sum{padding:12px 16px;font-size:.92rem}
.rev-cat[open]>.side-sum{border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.rev-cat[open]>.side-sum::after{transform:rotate(270deg)}
.rev-n{margin-left:auto;font-size:.8rem;font-weight:500;color:var(--ink-2)}
.rev-cat>.side-sum::after{margin-left:8px}
.rev-cat-b{padding:4px 16px 14px}

@media print{
  /* UX097(2026-09-07): この :root は「ダークOSで印刷しても紙は明るい配色にする」ための打ち消しで、
     tokens.css のダークブロックが上書きする項目をライト値に戻すためだけに在る。
     tokens.css を仕様§2 の値へ差し替えたので、ここも同じライト値へ揃えた（ここだけ旧配色が残ると
     画面と紙で色が食い違う）。別名はここでは書かない（tokens.css の :root で var() 参照のまま
     解決されるため）。★残っている別名は --sans の1行だけ＝UX111 で --serif、
     UX117(2026-09-23) で --muted/--a/--teal-d/--radius を削除した。 */
  :root{
    --bg:#f6f7f9; --card:#ffffff; --ink:#1b2431; --ink-2:#5b6675;
    --line:#e4e8ee; --line-soft:#eef0f4; --acc:#2563eb; --navy:#16314D; --teal:#0E8074;
    --badge-warn-bg:#fdeceb; --badge-warn-ink:#a3241c;
    --badge-info-bg:#eef3fd; --badge-info-ink:#1a4bbd;
    --navy-2:#28374d; --head:#1e293b; --faint:#8b94a3; --line-2:#d3d9e2; --a-bg:#e9f0fe;
    --star:#b54708; --star-bg:#fff4e8;
    --rev:#9a6a00; --rev-bg:#fff8e6; --rev-line:#f0dca8;
  }
  @page{margin:14mm}
  .ptabs,.hb-top,.hb-side,.hb-ov,.hb-foot,.ad-slot,.pr-note,.hb-burger,.hb-results,.hb-nav,.fold-more{display:none!important}
  body{background:#fff;color:var(--ink)}
  .hb-shell{display:block;max-width:none}
  .hb-main{padding:0;min-width:0}
  .crumb{margin:0 0 12px}
  .rel-list a,.rel a,.hub-glist a,.hub-sec.links a,.e3 a,.side-nav a{min-height:0}
  .rel-list a,.rel a{padding:6px 10px}
  .tbl-scroll::after{display:none}
  .tbl-wrap{overflow:visible}
  th,td{overflow-wrap:anywhere}
  table,.checklist li,.rel-list a,.rel a,.sc-card,.purpose,.callout.review,blockquote{break-inside:avoid}
  /* UX040(2026-08-19): 体系図が紙のページ境界で分断されるのを防ぐ（図と説明を一緒に送る）。
     @media print の中だけ＝画面表示は1pxも変わらない。 */
  figure.diagram{break-inside:avoid}
  h2,h3,h4{break-after:avoid}
  .rel{break-inside:auto}
  .rel-more[open]>.side-sum{display:none}
  .rel-more>.rel-list{margin-top:0}
  .sc-card:hover{transform:none}
}

/* 図解（体系図）ブロック（2026-08-13 masaki確定・md画像記法 ![alt](assets/...) 用）
   UX098(2026-09-08) 検討結果＝変更なし。仕様§3 は「figure.diagram に枠1px＋角丸4px」と書いているが、
   現物の SVG 90点すべてが自前で <rect x=0 y=0 rx=12 fill=#ffffff stroke=#dbe2ea> の枠を描いている（実測 90/90）。
   figure 側に枠を足すと枠が二重（外4px＋内12px）になり、ダークでは白いSVGの周りに暗い輪が付く。
   仕様と現物の食い違い＝実装せず報告する（[[ux-report-latest]] の提案欄）。 */
figure.diagram{margin:20px 0;text-align:center}
figure.diagram img{max-width:100%;height:auto;border-radius:var(--r)}
figure.diagram figcaption{margin-top:8px;font-size:.85rem;color:var(--ink-2)}

/* ===== UX067（2026-08-27）本文へのスキップリンク =====
   サイドバーが長いため、キーボード／スクリーンリーダーでは本文に着くまで全ナビを通過していた。
   ・既定は視覚的に隠し（transform で画面外へ退避）、フォーカスされたときだけ左上に出る。
     display:none / visibility:hidden は支援技術からも消えるため使わない。
   ・色・角丸・輪郭は既存トークンのみ（--card / --ink / --teal / --line / --r）。
     ★UX117(2026-09-23): 旧名 --radius は削除済み＝正式名 --r に書き替えた（実コードは元から --r）。
     4つとも tokens.css のダークブロックで再定義済み＝ダーク両対応。
   ・余白は既存の 4px 刻み（8px/12px）。印刷では出さない。 */
.skip-link{position:absolute;top:8px;left:8px;z-index:90;
  padding:8px 12px;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  font-size:.9rem;font-weight:700;text-decoration:none;
  transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
.skip-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media print{.skip-link{display:none}}


/* ===== UX098（2026-09-08）[[ポータル_デザイン仕様]]§3「部品（style.css に置く型）」=====
   仕様§4② の単位。ここで足すのは "型（語彙）" であり、既存ページのマークアップは差し替えていない。
   使う側（③index の並び＝UX099／⑦soudan＝UX101／⑤場面インデックス＝Q311／⑥場面ページ＝Q312）が
   これらの class を当てていく。したがって本ブロック単体では、既存280本の見た目は変わらない。
   ・値はすべて tokens.css の §2 トークン参照。新しい色・角丸・影・フォントは1つも作っていない。
     var() は使う側で解決されるため、ダーク用の再定義は不要（ライト／ダーク両対応）。
   ・余白は --sp-1〜8（4px 刻み）。角丸は --r / --r-badge。罫は --rule / --rule-strong。影なし。
   ・.row の上下 11px と .step-no の 24px、.badge の 20px/11px は仕様が px 指定のため px で書く。 */

/* 見出し行＋下罫 2px teal（各セクション見出し・章見出し） */
.rule-section{display:flex;align-items:baseline;gap:var(--sp-3);
  font-family:var(--font-serif);font-size:1.19rem;font-weight:600;color:var(--ink);
  border-bottom:var(--rule-strong) solid var(--teal);
  padding:0 2px var(--sp-2);margin:0 0 var(--sp-4)}
.rule-section .cnt{margin-left:auto;font-family:var(--font-sans);
  font-size:.76rem;font-weight:500;color:var(--ink-2)}

/* 一覧行（今日の情報の一覧・締切一覧・読者別ガイド）＝grid 1fr auto・上下11px・下罫1px */
.row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--sp-3);
  padding:11px 0;border-bottom:var(--rule) solid var(--line)}
.row:last-child{border-bottom:0}
.row-t{font-size:.9rem;line-height:1.6;color:var(--ink)}
.row-m{font-size:.78rem;color:var(--ink-2);white-space:nowrap}
a.row:hover .row-t{color:var(--acc)}

/* 場面ページの手順＝grid 40px 1fr・番号は明朝24px navy・右寄せ・等幅数字 */
.step{display:grid;grid-template-columns:40px 1fr;gap:var(--sp-4);align-items:start;
  margin:var(--sp-4) 0}
.step-no{font-family:var(--font-serif);font-size:24px;line-height:1.3;font-weight:600;
  color:var(--navy);text-align:right;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.step-b>:first-child{margin-top:0}
.step-b>:last-child{margin-bottom:0}

/* 締切・状態のバッジ＝高さ20px・11px 700・角丸3px */
.badge{display:inline-flex;align-items:center;height:20px;padding:0 var(--sp-2);
  border-radius:var(--r-badge);font-family:var(--font-sans);
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em;white-space:nowrap}
.badge-warn{background:var(--badge-warn-bg);color:var(--badge-warn-ink)}
.badge-info{background:var(--badge-info-bg);color:var(--badge-info-ink)}

/* タップ標的の最小高さ（診断・チップ・アコーディオン見出し） */
.tap{min-height:44px;display:flex;align-items:center}

/* チップ（関連場面・症状・よく引かれる場面）＝枠1px・角丸4px・文字 --acc・44px */
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-3);
  margin:0 var(--sp-2) var(--sp-2) 0;background:var(--card);
  border:var(--rule) solid var(--line);border-radius:var(--r);
  font-size:.85rem;color:var(--acc)}
.chip:hover{border-color:var(--acc)}
.chip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ダーク側の追補（★実測に基づく・UX095 の裁定をそのまま当てた）
   仕様§2 は --navy の用途を「上帯・手順番号」としているが、ダークの --navy(#0f1c2b) は
   "白文字を載せる面の色" であって文字色ではない。文字として地(--bg #141821)に置くと
   実測 1.03:1、面(--card)の上でも 1.17:1 で、UX095 で直した .s-body h4（1.14:1）と同じ壊れ方になる。
   → 09-07 司令の裁定②「新しい色値・新変数は作らず既存トークンへ寄せる」を同じ形で適用し、
     ダーク側だけ本文色 --ink へ寄せる（実測 14.87:1）。ライト側は --navy のまま（12.39:1）。
   ・上帯など --navy を "面" として使う既存箇所には触れていない＝そちらの用途は仕様どおり有効。
   ・この1行だけ司令塔の裁定と食い違う可能性があるため、レポートに明記した。不要なら1行 revert 可。 */
@media (prefers-color-scheme: dark){.step-no{color:var(--ink)}}

@media print{
  /* 紙では teal の下罫だけ残し、チップ・タップの 44px は紙面を膨らませるので解除する
     （UX011 が .rel-list a などに対して既に同じ扱いをしている）。 */
  .chip,.tap{min-height:0}
  .step,.row{break-inside:avoid}
}

@media (max-width:760px){
  /* 一覧行は狭幅で右カラムが潰れるため1列へ。仕様の「上下11px・下罫1px」は保つ。 */
  .row{grid-template-columns:1fr;gap:var(--sp-1)}
  .row-m{white-space:normal}
  .step{grid-template-columns:32px 1fr;gap:var(--sp-3)}
  .step-no{font-size:20px}
}