/* =====================================================================
   soukyo-ui.css — 蒼鏡 共有デザインシステム（製品磨きテーマ層・2026-07-18）
   使い方＝各画面の </head> 直前に <link rel="stylesheet" href="soukyo-ui.css"> を1行。
   各ページ内蔵<style>より後に読み込む＝同名クラス/変数を「後勝ち」で上書きする磨き専用層。
   方針（ユーザー決定）＝白×蒼天ブルーの現ブランドを製品級に磨く・Noto Sans JP。
   挙動には触れない（見た目トークン・質感・状態演出の部品だけ）。
   ⚠フォント読み込みは /tools CSP の style-src/font-src 許可とセット（main.py）。
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

:root{
  /* 色トークン（各ページの:rootを上書き＝1箇所で調律） */
  /* 2026-10-02 案A「月白と藍」へ（👤決定・設計＝00-設計/配色A_適用_設計_2026-10-02.md）。計算値＝地#F3F2EE／面#FBFAF7 に対し
     ink 12.16/13.05・muted 5.55/5.96・sky 4.42/4.75・sky-light 3.09/3.32（押せる枠＝3:1 以上を保つ最も淡い藍）・ok 7.39・warn 7.12・bad 7.25（地）。 */
  --sky-deep:#2A5A78; --sky:#4A7590; --sky-light:#668FA8;
  --ink:#2B2E33; --muted:#5E6166; --line:#D9D7D0;
  --bg:#F3F2EE; --card:#FBFAF7; --panel:#F7F6F2;
  /* 2026-10-02 便2＝画面の直書きを寄せる先。淡い地（状態・押せないチップ・選択中の面）の上で ink 11.0〜11.6・muted 5.03〜5.29・
     sky-deep 6.00〜6.31・状態色 6.45〜7.05（4.5 以上）。⚠ 各画面の :root が同名を持っていても、後から読むここが勝つ。 */
  --ok-bg:#E5EFE7; --warn-bg:#F7EBDC; --bad-bg:#F6E3E0; --chip:#ECEAE4; --sky-pale:#E4E9EC;
  /* 2026-10-02 便3＝押している間の淡い面（--chip に藍を8%）。面に 1.30・--chip に 1.13＝ホバーより一段濃い。
     この上で ink 10.07・muted 4.59・sky-deep 5.48・状態色 5.89〜6.12（4.5 以上）。 */
  --press:#DCDEDB;
  --ok:#25583A; --warn:#7A430A; --bad:#8E2F28; --idle:#8C8A84;  /* ⚠ 2026-09-02＝**状態色を3つとも読める濃さへ**（ユーザー「個々の文字が見ずらい」）。実測＝この製品が実際に使う5つの地（白／薄青#EEF3F8／琥珀#FBF3E3／緑#EAF7F1／赤#FBEDE7）の上で、旧 ok #178A66=3.78〜4.32・warn #B26A0B=3.70〜4.23・bad #CC4A26=4.02〜4.59＝**3色とも基準4.5を割っていた**（12pxなので「大きな文字」の緩和3:1は使えない）。新＝ok 4.64〜5.30／warn 4.74〜5.42／bad 4.72〜5.40。⚠ 背景として使う所（●・ピル・帯）は白文字が載るので、**濃くなる向きは安全側**。⚠ 色そのものの見分け（緑/橙/赤）は変えていない＝濃さだけを1段上げた。 */  /* ⚠ 2026-09-02＝橙を少し濃く（#B26A0B→#9A5B08）＝「要注意 N」のチップが薄い地（#EEF3F8）の上で **3.79:1** で読めなかった（実測）→ 4.86:1。背景として使う所（●・帯・ピル）は白文字が載るので、濃くなる向きは安全側。 */
  --radius:8px;
  --shadow-1:none;                               /* 2026-10-02 案A＝カードは影でなく線で */
  --shadow-2:0 4px 14px rgba(0,0,0,.08);         /* 浮く物だけ・中立の薄い影 */
  --ring:0 0 0 3px rgba(42,90,120,.25);
  /* ボタンの塗り（2026-09-01 ユーザー「ちょっとだけ薄く」）＝**ここだけで濃さを変えられる**。
     ⚠ --sky-deep は見出し・数字・枠にも使うので動かさない（画面全体が変わる）。
     いま＝平常 **4.61** → ホバー 6.58 → 選択中 8.06（白文字・濃くなる向き。6.19/7.81/9.82 → 5.18/6.58/8.06 と2度薄くした）。
     ⚠⚠ 2026-09-12（3度目の「淡く」）は**ふだんの塗りだけ**明るくした＝ホバーと選択中は**据え置き**。
       3つまとめて動かすと平常→ホバーの差が 1.27 → **1.12**（ΔL* 6.5→3.2）まで縮み**触った合図がほぼ消える**
       （第三者レビューで捕まえて是正／番犬は「順に濃くなる」しか見ないので緑のまま通る）。
     ★ **打ち止め**＝この色相で白文字を保てる最明色は #277AC3（4.51・#277AC4 は 4.4995 で割る）＝いまの
       #2778C2 は余裕 0.11。12〜13px なので『大きな文字』の緩和 3:1 は使えない（#3182CB=4.05 は不可）。
       さらに淡くするなら色相をずらすか**文字を濃紺へ反転**する。⚠ 2026-09-02 の「#2A76BE だから不可」は
       **誤り**（4.74 は基準内）＝数字は書き写さず計算し直す。
     2026-10-02 案Aへ＝藍 平常 7.41 → ホバー 9.30 → 選択中 11.44（白文字・段の比 1.26／1.23＝触った合図は残る）。 */
  --btn-bg:#2A5A78; --btn-hover:#224B64; --btn-on:#1B3D52;
}

/* ---- タイポグラフィ（Noto Sans JP・階層をはっきり） ---- */
body{
  font-family:"Noto Sans JP","Meiryo","Segoe UI",sans-serif;
  color:var(--ink); letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.pagetitle{font-size:15.5px; font-weight:700; letter-spacing:.02em;}
.secttl b{font-size:15px;}
.card .v,.cc-val,.chip b{font-variant-numeric:tabular-nums;}
::selection{background:rgba(102,143,168,.35);}

/* ---- カードの質感（影・ホバーの持ち上がり） ---- */
.card,.catcard,.trendcard,.drill,.menucard,.src2{box-shadow:var(--shadow-1);}
.catcard,.menucard{transition:border-color .15s,box-shadow .18s,transform .18s;}
.catcard:hover,.menucard:hover{box-shadow:var(--shadow-2); transform:translateY(-1px);}

/* ---- ボタン（押せる感・フォーカス可視） ---- */
.btn{
  font-size:13px; padding:6px 14px; border-color:var(--line); font-weight:500;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;
}
/* ⚠ ホバーの色は下の「第3弾＝ボタン（2026-09-01）」へ移した。ここで全画面に background を
   塗ると**既定が塗りの8画面で白地＋白文字**になる（実測 1.13:1＝押した瞬間に文字が消える）。 */
.btn:active{transform:translateY(1px);}
/* ボタンが続く時の間（2026-10-30 👤「ボタンが全体的に近い」）＝空白1つの並びは約3px・詰めた並び（gap 4〜6px）で
   押し間違えやすかった。次のボタンの左に 6px 足す（空白の並び≈9px・gap 6px の並び≈12px）。折り返した段の上下にも 4px。
   ⚠ 詳細度0（:where）＝各画面が自前で margin を書いた所はそちらが勝つ。 */
:where(.btn) + :where(.btn){margin-left:6px;}
:where(.btn){margin-block:2px;}
.btn.primary{background:var(--sky-deep); border-color:var(--sky-deep);}
.btn.primary:hover{background:var(--btn-hover);}
.btn:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--sky); outline-offset:2px;}

/* ---- 入力部品（統一の枠・フォーカスリング） ---- */
input[type=text],input[type=password],input[type=email],input[type=date],select,textarea{
  border:1px solid var(--line); border-radius:8px; padding:7px 10px;
  font-family:inherit; font-size:13px; color:var(--ink); background:var(--card);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--sky); box-shadow:var(--ring); outline:none;}

/* ---- テーブル（見出しの声を落とす） ---- */
th{font-size:11px; letter-spacing:.06em; color:var(--muted); padding:7px 10px;}
td{padding:7px 10px;}

/* ---- 押せる／押せないの見た目を全画面で統一（2026-07-31 ユーザー指摘）----
   「クリックできる所とできない所が見た目で区別できない・ページによって同じ見た目なのに
   挙動が違う」への答え。約束＝**押せる行は tr に onclick（または class="clickable"）**
   （全画面がこの形であることを実測済み・新しい画面もこの約束に乗せる）。
   ⚠ 以前はここで全行にホバーを塗っていた（tbody tr:hover>td）＝押せない行まで
     「押せそう」に見えた張本人。押せる行だけに変更した。 */
/* ① 押せる行＝ポインター＋ホバーで色＋左端に青いバー（サイドバー現在地と同じ言葉） */
tbody tr[onclick], tbody tr.clickable{cursor:pointer;}
tbody tr[onclick]>td, tbody tr.clickable>td{transition:background .12s;}
/* 2026-10-02 便3＝ホバーの面を --panel（面に 1.04＝見分けにくい）から --chip（1.15）へ。押している間は --press（下の節）。 */
tbody tr[onclick]:hover>td, tbody tr.clickable:hover>td{background:var(--chip);}
tbody tr[onclick]:hover>td:first-child, tbody tr.clickable:hover>td:first-child{
  box-shadow:inset 3px 0 0 var(--sky);}
/* ①-B ★**触る前から**押せると分かるようにする（2026-09-01・ユーザー指摘
   「クリックできるところがわかりずらいからはっきりとクリックできる部分をわかりやすくしてほしい」）。
   ⚠ 上の①は**ホバーしたときだけ**バーと色が出る＝**手を置くまで分からない**のが残っていた。
     実測（ブラウザで計算後のスタイルを全数）＝指カーソルの漏れは**0件**で、足りないのは
     **手を置く前の見た目**だった（押せる行が普通の行と1pxも違わない）。
   ⚠ ホバー時は上の①（より詳しい選び方）が勝つ＝**平常は薄く・触ると濃く**の順に見える。
   ⚠ **大きさを1pxも変えない**＝バーは内側の影・記号は絶対配置（枠線や余白でやると行が揺れる）。 */
tbody tr[onclick]>td:first-child, tbody tr.clickable>td:first-child{
  box-shadow:inset 3px 0 0 var(--sky);}   /* 2026-09-01 ユーザー「ここもだよ？」＝60%の薄墨から実色へ */
tbody tr[onclick]>td:last-child, tbody tr.clickable>td:last-child{
  position:relative; padding-right:18px;}
tbody tr[onclick]>td:last-child::after, tbody tr.clickable>td:last-child::after{
  content:"\203A"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--sky); font-size:17px; font-weight:bold; line-height:1; pointer-events:none;}
/* ⚠ 最終列が操作ボタンの列のときは記号を出さない（機器台帳の「操作」列＝ボタンと重なる）。
   `:has()` が効かない古い器では**記号が出るだけ**＝壊れない側に倒れる。 */
tbody tr[onclick]>td:last-child:has(button)::after,
tbody tr.clickable>td:last-child:has(button)::after{content:none;}
/* ①-C ★選んでいないタブも「押せる形」に（同日・実測で `.atab`/`.ctab` の非選択はただの文字だった）。
   この製品の約束「押せる＝白地＋枠線＋指カーソル」に合わせる。
   ⚠ **選択中にも透明の枠を置く**＝枠を足した側だけ1px動いてタブの高さが揃わなくなるのを防ぐ
     （`test_ui_affordance` の「border:none にすると1px縮んでレイアウトが動く」と同じ理由）。 */
.atab, .ctab{border:1px solid transparent; border-radius:8px 8px 0 0;}
.atab:not(.cur), .ctab:not(.cur){background:var(--card); border-color:var(--line,#DCE5EF);}
/* ② 押せない行＝ホバーで光らせない（各ページが独自に塗っていても後勝ちで打ち消す） */
tbody tr:not([onclick]):not(.clickable):hover{background:transparent;}
tbody tr:not([onclick]):not(.clickable):hover>td{background:none; cursor:default;}
/* ③ 押せる部品にはポインター（飾りのチップには出さない＝.badgeは文脈に従う） */
a,button,summary,select,[onclick],[role=button],label{cursor:pointer;}
.badge{cursor:inherit;}
/* ④ 文字なのに押せるもの＝ホバーで下線（押せる字だと分かる） */
a[href="#"]:hover{text-decoration:underline;}
b[onclick]:hover,span[onclick]:hover{text-decoration:underline dotted;}

/* ---- サイドバー（現在地アクセント・遷移） ---- */
.sb-item{transition:background .13s,color .13s;}
.sb-item.cur{box-shadow:inset 3px 0 0 var(--sky-deep);}
.sb-brand{border-bottom:1px solid var(--line); margin-bottom:6px;}

/* ---- ナビピル・バッジ類 ---- */
.pagenav .pn,.tg,.conn,.chip{transition:background .13s,border-color .13s,color .13s;}
.sev,.badge{font-weight:500;}

/* ---- スクロールバー（うるさくしない） ---- */
*{scrollbar-width:thin; scrollbar-color:#C3D3E3 transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:#C3D3E3;border-radius:999px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-track{background:transparent;}

/* =====================================================================
   状態部品（読み込み中・空・通知）— 各画面のJSから使う共有部品。
   まだ使っていない画面に置いても無害（クラスが無ければ何も起きない）。
   ===================================================================== */

/* スケルトン：<div class="sk" style="width:60%"></div> 等。テキスト行なら .sk.t */
.sk{position:relative;overflow:hidden;background:var(--chip);border-radius:6px;min-height:12px;}
.sk.t{height:13px;margin:6px 0;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:sk-sh 1.3s infinite;}
@keyframes sk-sh{100%{transform:translateX(100%);}}

/* 空状態：<div class="empty"><div class="ei">🗂</div>まだデータがありません<small>…案内…</small></div> */
.empty{text-align:center;color:var(--muted);padding:26px 12px;font-size:13px;}
.empty .ei{font-size:26px;opacity:.55;margin-bottom:6px;}
.empty small{display:block;font-size:11.5px;margin-top:4px;color:var(--idle);}

/* トースト：右下通知。SkUI.toast() が .sktoastbox>.sktoast を生成。
   ※名前空間を sk* にしているのは、各画面が独自に持つ #toast/.toast（例＝機器台帳の上部中央トースト）と
     クラス名が衝突しないようにするため（2026-07-19）。.sk / .empty も汎用名のため新画面配線時は既存要素との衝突に注意。 */
.sktoastbox{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:8px;}
.sktoast{background:var(--btn-on);color:#fff;border-radius:10px;padding:10px 16px;font-size:13px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);animation:toast-in .22s ease-out;max-width:360px;}
.sktoast.ok{background:var(--ok);} .sktoast.err{background:var(--bad);}
/* save＝当てはまる部品が無い一括処理だけ（SkUI.act の印と同じ薄さ・2秒）。地と字は必ず対で書く。 */
.sktoast.save{background:var(--card);color:var(--muted);border:1px solid var(--line);font-size:12px;
  box-shadow:var(--shadow-2);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 入力の手応え（SkUI.act / SkUI.hint・2026-09-06）＝押した部品のその場に出る小さな印。
   ⚠ 色は状態色のトークンだけ（--muted／--bad）＝新しい体系を作らない。
   ⚠ :empty で畳む＝まだ使っていない印が margin だけ残して桁をずらすのを防ぐ。 */
.sk-save{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:12px;color:var(--muted);
  opacity:0;transition:opacity .25s ease;white-space:nowrap;}
.sk-save.on{opacity:.75;}
.sk-save.err{color:var(--bad);opacity:1;white-space:normal;}   /* 残る赤は折り返してよい（理由つきで長くなる） */
.sk-save.busy{opacity:.6;}
.sk-save:empty{display:none;}

/* CSVの書き出しダイアログ（SkUI.csvExport・2026-08-26）
   ＝どのCSVの口でも「出す項目・期間・区分」を選んでから保存する1枚。
   ※ 色・影・角丸は既存のトークン（--sky-deep / --shadow-2 / --radius）だけを使う＝新しい体系を作らない。
   ※ 項目のチェック行は列ツールと同じ .skcrow を借りる（見え方を2つ持たない）。 */
.skdlg{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;}
.skdlg-bg{position:absolute;inset:0;background:rgba(20,40,70,.42);}
.skdlg-panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-2);padding:16px 18px;width:min(420px,92vw);max-height:86vh;overflow:auto;text-align:left;}
.skdlg-ttl{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--sky-deep);}
.skdlg-note{margin:8px 0 0;font-size:11.5px;color:var(--muted);line-height:1.65;}
.skdlg-h{display:flex;align-items:center;gap:8px;margin:12px 0 5px;font-size:11.5px;font-weight:bold;color:var(--ink);}
/* ⚠ `font:11px/1.6 inherit` とは書かない＝**そのひとかたまりが丸ごと無効になる**（CSSの
   全体キーワードは font 短縮形の中では使えない）。実測でボタン既定の13.3px/Arialのまま出た。 */
.skdlg-lnk{border:0;background:none;padding:0;font-family:inherit;font-size:11px;line-height:1.6;
  color:var(--sky-deep);cursor:pointer;text-decoration:underline;}
.skdlg-w{display:flex;flex-direction:column;gap:1px;max-height:34vh;overflow:auto;}
.skdlg-d{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
.skdlg-d input[type=date]{font-size:12px;padding:5px 8px;}
.skdlg-sub{font-size:11px;color:var(--idle);}
.skdlg-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:11px;border-top:1px solid var(--line);}
.skdlg-cnt{margin-right:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.skdlg-panel .btn[disabled]{opacity:.45;cursor:not-allowed;}
.skdlg-panel :focus-visible{outline:2px solid var(--sky);outline-offset:2px;}
@media print{.skdlg{display:none;}}

/* 列の表示/非表示・幅調整（SkUI.colview・第3弾 2026-07-19）
   .skcols＝表示項目チップの列／.colgrip＝見出し右端の幅つまみ／.skcolt＝列管理された表。
   ※ sk* 名前空間で各画面の .cvchip（機器台帳カード）や .logtools と衝突しない。 */
/* 常時出るのは ⚙ ボタン1個だけ。項目チップは押したときにポップオーバーで開く。 */
.skcolsbox{position:relative;display:inline-block;}
.skcbtn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--card);
  border-radius:8px;padding:3px 10px;font:12px/1.6 inherit;color:var(--muted);cursor:pointer;white-space:nowrap;}
.skcbtn:hover{background:var(--panel);color:var(--sky-deep);border-color:var(--sky-deep);}
.skcbtn.on{background:var(--sky-pale);border-color:var(--sky-deep);color:var(--sky-deep);font-weight:bold;}
.skcbtn .skcn{background:var(--sky-deep);color:#fff;border-radius:999px;font-size:10px;font-weight:bold;
  min-width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
/* 既定は左端そろえで右へ開く。画面からはみ出す場合は SkUI 側が left をずらして収める。 */
.skcpanel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:11px 13px;min-width:250px;max-width:340px;
  text-align:left;white-space:normal;}
.skcpanel .skct{font-size:11.5px;color:var(--ink);font-weight:bold;margin-bottom:7px;}
.skcpanel .skch{display:block;font-size:10.5px;color:var(--muted);font-weight:normal;margin-top:2px;}
/* 項目の入/切＝チェックボックス（色だけに頼らず状態が明示される） */
.skcpanel .skcw{display:flex;flex-direction:column;gap:1px;max-height:52vh;overflow:auto;}
.skcrow{display:flex;align-items:center;gap:7px;padding:3px 6px;border-radius:6px;cursor:pointer;
  font-size:12.5px;color:var(--ink);user-select:none;}
.skcrow:hover{background:var(--panel);}
.skcrow input{margin:0;cursor:pointer;accent-color:var(--sky-deep);flex:none;}
.skcrow.lock{cursor:default;color:var(--muted);}
.skcrow.lock:hover{background:none;}
.skcrow.lock input{cursor:default;}
.skcreset{margin-top:9px;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:3px 9px;
  font:11.5px/1.6 inherit;color:var(--muted);cursor:pointer;}
.skcreset:hover{background:var(--panel);color:var(--sky-deep);}

/* 幅つまみ＝見出しセルの右端。掴んでドラッグ／ダブルクリックで既定に戻す。 */
table.skcolt th{position:relative;}
/* 列の並び替え（2026-07-21）＝見出しをつかんで左右へ。落とし先の側に青い縁で合図 */
table.skcolt th[draggable]{cursor:grab;}
table.skcolt th.skdropl{box-shadow:inset 3px 0 0 var(--sky-deep);}
table.skcolt th.skdropr{box-shadow:inset -3px 0 0 var(--sky-deep);}
table.skcolt th .colgrip{position:absolute;top:0;right:0;bottom:0;width:7px;cursor:col-resize;user-select:none;}
table.skcolt th .colgrip:hover{background:var(--sky-deep);opacity:.35;}
/* 固定幅レイアウトのはみ出しは省略記号に（全文は title 属性で読める）。<br>を含むセルは従来どおり2行で出る。 */
table.skcolt td,table.skcolt th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 複数列にまたがるセル＝明細パネル・空状態・スケルトンなので、折り返しも高さも制限しない */
table.skcolt td[colspan]{white-space:normal;overflow:visible;text-overflow:clip;}
/* 折り返したいセルの逃げ道＝<td class="wrap">（例＝タグが複数並ぶ列）。列の幅調整はそのまま効く。 */
table.skcolt td.wrap{white-space:normal;}
/* 幅の自動調整（ダブルクリック）中だけ使う計測モード＝本来の中身の幅をブラウザに計算させる。
   またがるセル（明細パネル等）は列幅の計算に混ぜない。 */
table.skmeasure td,table.skmeasure th{white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important;}
table.skmeasure tr.ldetail,table.skmeasure td[colspan]{display:none !important;}
/* ドラッグ中は画面全体の文字選択を止め、カーソルを保つ */
body.skcolresizing{cursor:col-resize;user-select:none;}
body.skcolresizing *{cursor:col-resize !important;}
/* 横スクロールの受け皿（列を広げても表がはみ出さない）。
   contain:inline-size＝中の表の固定幅を「外側の幅の計算」に伝えない。
   これが無いと、グリッド/フレックスの列（1fr等）は中身の最小幅より縮めない仕様のため、
   幅の広い表がカードごと画面外へ押し出す（運用コンソールの grid2 で実際に発生・2026-07-21）。 */
.colscroll{overflow-x:auto;contain:inline-size;}

/* 動きを抑えたい利用者への配慮 */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
  .btn:active{transform:none;}   /* 押した瞬間は色だけ（沈みは末尾の節で no-preference の時だけ） */
}

/* 印刷＝画面装飾を落とす（各ページの@media printに追加で効く）。
   ⚠ margin-left は !important 必須＝auth.js のサイドバー幅ドラッグが
   body の style 属性（インライン）に margin-left を書くため、!important 無しの
   各ページ print 指定では勝てず「印刷が右に寄る」（2026-07-24 ユーザー報告・根治）。
   サイドバー・👁ピル・トーストなど固定オーバーレイも紙には出さない。 */
@media print{
  .card,.catcard,.trendcard,.drill{box-shadow:none;}
  body{-webkit-font-smoothing:auto;margin-left:0 !important;}
  aside.sidebar,#sokyoAuthPill,#sokyoSbResize,.sktoastbox{display:none !important;}
}


/* ── サイドバー（共通ナビ）の見た目（2026-07-26 集約）────────────────
   以前は同じ規則を全10画面が持っていた。描画は auth.js、見た目はここ、が正。
   ⚠ .sidebar と .sb-item の本体は画面ごとに @media 側と値が違うため各HTMLに残してある。 */
.sb-brand{display:flex;align-items:center;gap:9px;padding:2px 4px 14px;}
.sb-brand .mk{width:42px;height:42px;flex:none;}
.sb-brand .nm b{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;letter-spacing:2px;font-weight:600;line-height:1.1;color:var(--sky-deep);}
.sb-brand .nm small{display:block;font-family:"Segoe UI",sans-serif;font-size:8px;letter-spacing:2px;color:var(--muted);}
.sb-grp{color:var(--muted);font-size:10.5px;letter-spacing:1px;padding:10px 8px 4px;}
.sb-item .ic{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;}
.sb-item .ic svg{width:19px;height:19px;}
.sb-item:hover{background:var(--chip);color:var(--sky-deep);}  /* 2026-10-02 手応え＝--panel は面との差 1.04 で見えない→ --chip（1.15）・押している間は --press（1.30） */
.sb-item.cur{background:var(--sky-pale);color:var(--sky-deep);font-weight:bold;}
.sb-foot{margin-top:auto;padding:10px 8px 2px;font-size:10.5px;color:var(--muted);line-height:1.5;border-top:1px solid var(--line);}

/* ── 説明の畳み込み（2026-07-31）────────────────────────────
   「文字量（説明）をUIの工夫で」＝消さずに畳む。動きは soukyo-ui.js の hints()。
   ⚠ を含む説明（.sk-keep）は畳まない＝安全に関わる注意は常に見える。 */
.sk-hintbtn{margin-left:10px;padding:2px 10px;font-size:11.5px;line-height:1.7;
  color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;
  cursor:pointer;vertical-align:middle;transition:background .16s ease,color .16s ease,border-color .16s ease;}
.sk-hintbtn:hover{background:var(--panel);color:var(--sky-deep);border-color:var(--sky-light);}
.sk-hintbtn[aria-pressed="true"]{background:var(--sky-pale);color:var(--sky-deep);border-color:var(--sky-light);}
.sk-hintbtn:focus-visible{outline:2px solid var(--sky);outline-offset:1px;}
/* ⚠ 畳む対象は soukyo-ui.js が読み込み時に印（.sk-hint）を付けたものだけ。
   クラス名（.note 等）で畳んでいた頃は、あとから描かれる**読み込み失敗や空状態の
   メッセージまで消えていた**（2026-08-05 実測＝「データを取得できませんでした」が
   display:none で、失敗しても白いカードが残るだけだった）。印は最初の1回しか付かない
   ＝あとから描かれた文は必ず見える側に倒れる。 */
body.sk-hints-off .sk-hint{display:none;}
/* ★紙では必ず出す（2026-08-29・既定を「畳む」に変えたのと同じ便）。
   理由＝**読む人が紙の上でボタンを押せない**＝畳んだまま印刷すると説明が失われる。
   `.sk-help`（(?)ヘルプ）を印刷時に開くのと同じ考え方。⚠ ボタン自体は紙に出さない。 */
@media print{ .sk-hintbtn{display:none;} body.sk-hints-off .sk-hint{display:revert;} }

/* ── (?)ヘルプ＝説明は既定で畳んでおく（2026-08-05）────────────────
   ユーザー指摘「AIぽくて文字が多い」への共通の受け皿。
   方針＝画面には**動詞と数字**だけを置き、初見の1回しか読まない説明はこの中へ入れる。
   使い方＝<details class="sk-help"><summary>ラベル</summary><div class="sk-helpbody">…</div></details>
   ⚠ 上の「💬 説明を畳む」（全画面の切り替え）とは別物＝あちらは利用者の任意、
     こちらは**既定が畳んだ状態**。紙に出すときだけ soukyo-ui.js が開く
     （読む人がその場で開けないため）。 */
.sk-help{display:block;margin:6px 0 0;}
.sk-help>summary{
  display:inline-flex;align-items:center;gap:5px;width:auto;list-style:none;
  cursor:pointer;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:1px 11px 1px 8px;
  font-size:11.5px;line-height:1.8;
  transition:background .16s ease,color .16s ease,border-color .16s ease;}
.sk-help>summary::-webkit-details-marker{display:none;}
.sk-help>summary::marker{content:"";}
.sk-help>summary::before{
  content:"?";flex:none;width:14px;height:14px;border-radius:50%;
  background:var(--panel);color:var(--muted);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.sk-help>summary:hover{background:var(--panel);color:var(--sky-deep);border-color:var(--sky-light);}
.sk-help>summary:hover::before,
.sk-help[open]>summary::before{background:var(--sky-deep);color:#fff;}
.sk-help>summary:focus-visible{outline:2px solid var(--sky);outline-offset:1px;}
.sk-help[open]>summary{color:var(--sky-deep);background:var(--sky-pale);border-color:var(--sky-light);}
.sk-helpbody{margin:8px 0 2px;color:var(--muted);font-size:12px;line-height:1.7;}
.sk-helpbody ul{margin:0;padding-left:1.2em;}
.sk-helpbody li{margin-bottom:3px;}
.sk-helpbody p{margin:0 0 5px;}
@media print{
  .sk-help>summary{display:none;}
  .sk-helpbody{margin-top:0;}
}

/* ── 吹き出し（2026-10-05・👤「もっと目立つ形で、文字も大きめに」）──────────
   ブラウザ標準の title の吹き出しの代わり＝動きは soukyo-ui.js の tips()。
   ⚠ 効くのは印 body.sk-tips がある時だけ（鍵 ui-tips と出荷フラグ UI_TIPS_ENABLED がそろった会社）。
   ⚠ 地は淡い月白に黒字（10/6 👤「ふんわり柔らかく・白抜きではなく黒字で」）＝縁と影で地から浮かせる。
   ⚠ 出るまで0.6秒（素通りで出さない・10/5 👤「気持ち長く」で0.25→0.6）・消えるのはすぐ。紙には出さない。 */
.sk-tip{position:fixed;left:0;top:0;z-index:10000;max-width:360px;box-sizing:border-box;
  padding:10px 14px;border-radius:12px;background:#FBFCFE;color:#1A1A1A;border:1px solid #D9E3EE;
  font-size:14px;line-height:1.7;font-weight:400;text-align:left;letter-spacing:.01em;
  white-space:pre-line;overflow-wrap:anywhere;pointer-events:none;
  box-shadow:0 8px 24px rgba(21,48,77,.10),0 2px 6px rgba(21,48,77,.06);
  opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s;}
.sk-tip.on{opacity:1;visibility:visible;transform:none;transition-delay:.6s;}
.sk-tip::before{content:"";position:absolute;left:var(--sk-tip-arrow,50%);width:10px;height:10px;
  margin-left:-5px;background:inherit;border:inherit;transform:rotate(45deg);}
.sk-tip[data-pos="below"]::before{top:-6px;border-right:0;border-bottom:0;}
.sk-tip[data-pos="above"]::before{bottom:-6px;border-left:0;border-top:0;}
.sk-tip[data-pos="float"]::before{display:none;}
body.sk-tips .sk-helpbody{font-size:13.5px;}
@media print{ .sk-tip{display:none !important;} }

/* 用語の言い換えは本文に書かず、点線＋ホバー（title 属性）で読ませる。
   例＝<span class="sk-term" title="重複のため登録しなかった件数">重複</span> */
.sk-term{border-bottom:1px dotted var(--idle);cursor:help;}

/* ── ナビの磨き層（2026-07-31）──────────────────────────────
   ねらい＝「見やすく・スタイリッシュに」（ユーザー要望）。実測で分かった実害は
   **項目が2行に折り返して高さ56pxになっていた**こと（本来34px前後）＝長いラベルが原因。
   ここは soukyo-ui.css が各HTMLのインライン<style>より後に読まれる（後勝ち）性質を使い、
   **各HTMLを1枚も触らずに**見た目だけ差し替える（.sidebar本体は各HTML持ちのまま＝番犬テスト維持）。 */

/* ① 1行に収める＝折り返し禁止＋あふれは「…」。長い正式名称は title（ホバー）で読める。 */
.sb-item{min-height:34px;line-height:1.3;white-space:nowrap;}
.sb-item .lb{overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* ② 触れたときの反応をなめらかに（0.13s→0.16s・色と背景に加えて位置も） */
.sb-item{transition:background .16s ease,color .16s ease,transform .16s ease;}
.sb-item:hover{transform:translateX(1px);}

/* ③ 現在地＝左の短いアクセントバー＋淡い面。いままでの inset影より輪郭が締まる。 */
.sb-item{position:relative;}
.sb-item.cur{background:linear-gradient(90deg,var(--sky-pale),var(--panel) 70%);font-weight:600;}
.sb-item.cur::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:3px;height:17px;border-radius:2px;background:var(--sky-deep);}
.sb-item.cur{box-shadow:none;}          /* 旧 inset 3px は ::before に置き換え */
.sb-item.cur .ic{color:var(--sky-deep);}

/* ④ グループ見出し＝字間を広げて塊を分ける。2つ目以降には細い区切り線。
   ⚠ 色は薄くしない（--muted のまま）＝10pxの小さい文字で薄くすると読めない
   （試しに #8494A6 にしたらコントラスト3.1:1でWCAG AA 4.5:1を下回った・2026-07-31実測）。 */
.sb-grp{font-size:10px;letter-spacing:1.6px;padding:12px 8px 5px;color:var(--muted);}
.sb-grp + .sb-item{margin-top:1px;}
.sidebar .sb-grp:not(:first-of-type){border-top:1px solid var(--line);margin-top:6px;}

/* ⑤ ブランドの下に区切り＝頭が締まる */
.sb-brand{border-bottom:1px solid var(--line);margin-bottom:4px;}

/* ⑥ キーボード操作でも現在位置が分かる（アクセシビリティ） */
.sb-item:focus-visible{outline:2px solid var(--sky);outline-offset:-2px;border-radius:8px;}

/* ⑦ 狭い画面（横並びナビ）
   ⚠ ここで既存の崩れを直した（2026-07-31）＝`.sidebar` は row+wrap になるのに、
   **中の `<nav id="sidenav">` が block のままだった**ので項目が縦1列に積まれ、
   ブランドが左下へ押しやられていた（2026-07-25にナビを nav へ集約したときの積み残し）。
   nav 自身も横並びにして、本来の「上部に並ぶメニュー」に戻す。 */
@media(max-width:760px){
  #sidenav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 auto;min-width:0;}
  .sb-item.cur::before{display:none;}
  .sidebar .sb-grp:not(:first-of-type){border-top:none;margin-top:0;}
  .sb-brand{border-bottom:none;margin-bottom:0;padding-bottom:0;}
  .sb-item{min-height:0;}
}

/* ⑧ ロゴ＝ホームへのリンク・畳む・画鋲（2026-10-17 ユーザー要望・動きは soukyo-side.js）
   ⚠ 畳むのは広い幅だけ（761px 以上）＝スマホの横並びナビと印刷は今のまま（ボタンも出さない）。
   ⚠ body の margin-left は !important＝幅のドラッグ（auth.js）が style 属性に書くので、それより勝たせる。
   ⚠ ロゴの下線の色を戻す＝押せる要素の枠を一括で青にする規則（a[href]）がロゴの区切り線まで青くする。 */
a.sb-brand{text-decoration:none;color:inherit;border-radius:8px;}
aside.sidebar a.sb-brand{border-bottom-color:var(--line);}
a.sb-brand:focus-visible{outline:2px solid var(--sky);outline-offset:-2px;}
.sb-tools,#skSideOpen{display:none;}
@media screen and (min-width:761px){
  .sb-brand{padding-right:30px;}
  .sb-brand .mk{width:52px;height:52px;}
  .sb-brand .nm b{font-size:21px;}
  .sb-brand .nm small{font-size:9.5px;}
  .sb-tools{display:flex;flex-direction:column;gap:2px;position:absolute;top:12px;right:8px;z-index:1;}
  .sb-tools button,#skSideOpen{align-items:center;justify-content:center;padding:0;cursor:pointer;
    background:var(--card);color:var(--muted);font:inherit;font-size:11px;}
  .sb-tools button{display:flex;width:26px;height:26px;border:1px solid var(--line);border-radius:7px;}
  .sb-tools button:hover,#skSideOpen:hover{background:var(--chip);color:var(--sky-deep);}
  /* 固定中は塗り（押したか分からない・10/21 メモ#43）＝薄い色の差では見分けられなかった */
  .sb-tools button.on,.sb-tools button.on:hover{background:var(--sky-deep);color:#fff;border-color:var(--sky-deep);}
  .sb-tools .sk-ic,#skSideOpen .sk-ic{width:15px;height:15px;}
  html.sk-fold{--sbw:18px !important;}
  html.sk-fold aside.sidebar,html.sk-fold .sb-resize{display:none !important;}
  html.sk-fold body{margin-left:18px !important;}
  html.sk-fold #skSideOpen{display:flex;align-items:flex-start;padding-top:16px;position:fixed;left:0;top:0;bottom:0;
    width:18px;z-index:31;border:none;border-right:1px solid var(--line);border-radius:0;}
}
@media print{ .sb-tools,#skSideOpen{display:none !important;} }

/* ── 押せる/押せない 第2弾＝ピル・チップ・バッジ（2026-08-05 ユーザー指摘）────────
   「すべてのページで、押せるボタンと押せないボタンをしっかり分かるように」。
   実測＝静的な状態表示（.chip/.maruhi/健診の.tag）が、押せるピル（.btn/.tg/.pn）と
   **同じ白地＋枠線＋角丸**で7定義あった＝これが混同の正体。
   onclick付きのピル系クラスは全26画面で0件＝この5クラスは常に「状態表示」と確定できた。
   **見分けの約束（行の約束 2026-07-31 の続き）**＝
     ・押せる＝白地＋枠線＋指カーソル＋ホバーで反応（.btn/.tg/.pn/(?)ヘルプ/⚙列）
     ・押せない状態表示＝色ベタ＋枠なし＋普通のカーソル（.conn/.badge/.chip/.tag/.maruhi）
   ⚠ 枠は「消す」のではなく透明にする（border-color:transparent）＝幅1px分の
   レイアウトが動かない。⚠ 将来ピルを押せるようにするときは .clickable を付けるか
   onclick を書く＝その要素だけ約束の外に出て枠が残る（行と同じ流儀）。 */
.conn,.maruhi,.chip:not(.clickable):not([onclick]),.tag:not(.clickable):not([onclick]),.badge:not(.clickable):not([onclick]){border-color:transparent;}
.conn,.maruhi,.chip:not(.clickable):not([onclick]){cursor:default;}
/* ⚠ .badge/.tag の cursor はここで触らない（既定 cursor:inherit のまま）＝押せる行の
   中に置かれることが多く、default にすると行ホバーの指カーソルが途中で途切れる。 */
/* 白地で枠だけが頼りだった静的チップは淡色ベタへ（枠が透明でも背景から浮く） */
.chip:not(.clickable):not([onclick]),.maruhi{background:var(--chip);}
.act .tag{background:var(--chip);}   /* 健診の優先度ラベル＝枠が消えても読める下地 */
/* 押せるものには必ず指カーソル（画面ごとの書き忘れをここで拾う） */
[onclick],button:not(:disabled),a[href],summary{cursor:pointer;}
/* 押せる親（行・カード）の中の状態ピルは親のカーソルを継ぐ＝行の途中で矢印に戻さない */
[onclick] .conn,[onclick] .chip,[onclick] .maruhi{cursor:inherit;}
/* 押せないボタン＝はっきり不活性に */
button:disabled{cursor:not-allowed;opacity:.55;}

/* ★マウスを合わせたら必ず何かが変わる＝押せることが「触る前に」分かる（2026-08-29・ユーザー指摘
   「クリックすると反応するところは、マウスを合わせると反応がないと分かりづらい」）。
   ⚠ 指カーソルは上の規則で既に全部に出ていた＝足りなかったのは**見た目の変化**。
   ⚠ 実測（全38画面）＝ボタン197個のうち **24個** に :hover 規則が無かった（12%）。
     画面ごとに書き足すと必ずまた漏れるので、上の「書き忘れをここで拾う」と同じ**安全網**にする。
   ⚠ **`:where()` ＝詳細度0**＝画面や部品が自前の :hover を持っていれば**必ずそちらが勝つ**
     （既存のデザインを1つも上書きしない）。
   ⚠ 内側に敷く影なので**大きさが1pxも変わらない**（枠線や余白で表現すると行が揺れる）。
     角丸にも自動で沿う。色は地の明暗どちらでも効く薄い墨。
   ⚠ **`[onclick]` は入れない**＝モーダルの覆い（`onclick` で閉じるだけの全面 div）が
     押せる見た目になってしまう。押せる div は画面側で :hover を書く。
   ⚠ 自前の :hover を持つ部品には**重ねてわずかに濃くなるだけ**＝既存の意匠は壊れない
     （実測で色を決めた＝薄すぎると24個が今までどおり無反応・濃すぎると既存の173個が別物になる）。 */
:where(button:not(:disabled), [role=button], summary, a[href]):hover{
  box-shadow:inset 0 0 0 999px rgba(15,23,42,.045);
}

/* ── 押せる/押せない 第3弾＝ボタンそのものを「はっきり」（2026-09-01 ユーザー指摘
   「押せるボタンははっきりと強調しよう」）──────────────────────────
   ★先に数えた（この共有CSSを読む37画面のボタンを**計算後のスタイル**で全数）＝
     **131個のうち86個（66%）**が「縁が地と見分けられない」＝枠 #D5DFEA と白地の
     コントラストが **1.35:1**（WCAG 1.4.11「押せる部品の境界は 3:1 以上」の半分以下）。
     白いカードの上の白いボタン＝文字が浮いているだけに見えていた。
   ★同じ実測で**バグも1つ出た**＝既定ボタンが「塗り」の8画面（操縦席／配布盤／取り込み／
     導入ガイド／導入コード／EOL／ICT編集／守護）は、共有の
     `.btn:hover{background:#F4F9FE}`（0,2,0）が各画面の `.btn`（0,1,0）に勝ち、
     **押そうとした瞬間に白地＋白文字**になっていた（実測 1.13:1＝文字が消える）。
   直し＝**段を3つに揃える**（大きさは1pxも変えない＝色だけ）：
     主 `.primary`＝塗り ／ 既定 `.btn`＝淡い青の下地＋青枠 ／ 控えめ `.ghost`＝白地＋青枠。
   ⚠ **既定が塗りの8画面は塗りのまま**＝白抜き文字が読めなくなる。`<body class="sk-btn-solid">`
     で名乗ってもらい、そこだけ別の段を当てる（どの画面が塗りかは `test_ui_affordance` が
     **各画面のCSSから機械で導いて**照合＝新しい画面で付け忘れると落ちる）。
   ⚠ `:where()`＝詳細度0＝body側の条件は重みを持たない＝`.btn.primary` など既存の変種
     （0,2,0）は1つも上書きしない。
   ⚠ **白い肌の変種（.ghost/.danger/.ms）は「塗り」の扱いから外す**＝外し忘れると
     塗りの画面で「白地＋白文字＋透明の枠」＝完全に見えないボタンになる（実測で捕まえた）。
   ⚠ **平常時に box-shadow を置かない**＝2026-08-29 の安全網（詳細度0のホバー影）が
     効かなくなる（自前のホバーを持たない `.on`/`.amber`/直書きの赤ボタンが無反応に戻る）。 */
/* A. 全画面共通＝縁を必ず見える濃さに（--sky＝地に 4.42:1・面に 4.75:1＝2026-10-02 案A） */
.btn{border-color:var(--sky);}
/* 控えめ .ghost も塗る（2026-09-01 ユーザー「背景青は全てのボタンに適応して」＝白いボタンを残さない）。
   ⚠ 月報ツール2枚は `--brand`（テラコッタ）＝**その画面の色**で塗る＝あればブランド色・無ければ蒼。 */
.btn.ghost{background:var(--brand, var(--btn-bg)); color:#fff; border-color:var(--brand, var(--btn-bg));}
.btn.ghost:hover{background:var(--btn-hover); border-color:var(--btn-hover);}
.btn.primary{box-shadow:0 1px 3px rgba(42,90,120,.30);}   /* 主役だけ少し浮かせる */
.btn.danger{background:var(--bad); color:#fff; border-color:var(--bad);}   /* 2026-09-01 白地はやめて塗りへ。⚠ただし**赤**＝取り消し・失効を他と同じ色にしない（白文字 5.40:1 → 2026-10-02 案A 8.12:1） */
.btn.danger:hover{background:#74261F; border-color:#74261F;}   /* 2026-10-02 案A＝塗りより濃く（白文字 10.30:1）*/
.btn.ms{background:var(--btn-bg); color:#fff; border-color:var(--btn-bg);}   /* 2026-09-01 ユーザー指示で塗りへ（旧＝白地＋灰枠のMicrosoft流） */
.btn.ms:hover{background:var(--btn-hover); border-color:var(--btn-hover);}
/* B. 既定ボタン＝**蒼の塗り＋白文字**（2026-09-01 ユーザー案「ボタンを蒼背景の白文字にしたら？」）。
   ⇒ これで**37画面すべてでボタンの見た目が1つ**になる（塗りが既定の8画面は元からこの姿＝
     `.btn` の意味が画面で2つに割れていたねじれが解消する）。白文字は 8.0:1・縁は 7.33:1（2026-10-02 案A＝7.41:1）。
   ⚠ 白い肌の変種（`.ghost`/`.danger`/`.ms`）は**塗らない**＝控えめ・危険・Microsoftの区別が消える。
   ⚠ 詳細度を `body …` で1つ上げてある＝下の安全網E（押せるものの枠を青にする）に負けて
     濃紺の上に薄い青の輪が出るのを防ぐ。 */
body:not(.sk-btn-solid) .btn:not(:where(.danger)){
  background:var(--btn-bg); color:#fff; border-color:var(--btn-bg);}
body:not(.sk-btn-solid) .btn:not(:where(.danger)):hover{
  background:var(--btn-hover); border-color:var(--btn-hover);}
/* C. 既定ボタンが塗りの画面＝枠は地に溶かし（大きさは変えない）、触ると「濃く」なる */
:where(body.sk-btn-solid) .btn:not(.danger){border-color:transparent;}
:where(body.sk-btn-solid) .btn:not(.danger):hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.18);}
/* D. 小さな押しピル（⚙列・説明の開閉・絞り込みの解除）＝第4弾で「青い枠＝押せる」に一本化した
   （灰の枠 #8194A8 では“押せる”と読めず、色の意味が2つに割れるため）。 */

/* ── 👁閲覧中は「お客様が見ている画面」をそのまま再現する（2026-08-08 ユーザー要望）──
   auth.js が body に .sk-acting を付ける（切替中だけ）。運用者向けUIはここで一括して隠す。
   ⚠ 隠すのは**見た目だけ**＝本物のアクセス制御はサーバー側（require_admin / require_feature）。
   ⚠ 👁ピル（#sokyoPill 等）は**絶対に隠さない**＝切替を解除する唯一の口で、消すと戻れなくなる。
   ⚠ 対象は「運用者にしか出ない印」＝`.adminui`（機器台帳の✎管理など）と管理キーの入力欄。
     画面に新しい運用者向けUIを足すときは `.adminui` を付ければここで自動的に閲覧から外れる。 */
body.sk-acting .adminui{display:none !important;}
body.sk-acting #f_token,
body.sk-acting label[for="f_token"]{display:none !important;}

/* ── 左ナビのツリー（制度センターの中身を直接開く・2026-08-12 ユーザー要望）──
   親の▸で開閉（auth.js initNavTree）。開閉は端末に記憶し、中の画面を開いている間は自動で開く。
   子も普通のリンク＝機能の出し分け（applyFeatureNav）が自動で効く。 */
/* ▸は**ボタンに見える大きさ**にする（2026-08-12 ユーザー指摘「矢印が小さすぎる」＝枠と余白で押せる物だと分かるように） */
/* ⚠⚠ **2026-09-01「押せるボタンは塗りで統一」の唯一の例外**（2026-09-09 ユーザー指示
   「▼は大きさはそのままで中抜きにして」）＝開閉の印がメニューの項目名より目立っていたため。
   ⇒ **大きさ（24px）は変えず**、塗りをやめて**枠と字だけ青**にする（押せる合図＝青い枠は保つ）。
   ⚠ 下の一括の塗りから `.sb-tw` を**わざと外している**＝統一の見直しで**ここを戻さない**（戻すと同じ指摘に戻る）。
   地と字は対で書く（9/1の約束）。 */
.sb-tw{margin-left:auto;flex:none;width:24px;height:24px;line-height:22px;text-align:center;
       color:var(--sky-deep);cursor:pointer;border:1px solid var(--sky);background:var(--card);
       border-radius:7px;font-size:14px;}
.sb-tw:hover{background:var(--sky-pale);color:var(--sky-deep);border-color:var(--sky-deep);}
.sb-sub{display:flex;flex-direction:column;gap:1px;margin-bottom:2px;}
.sb-sub .sb-child{padding:4px 10px 4px 33px;font-size:12px;color:var(--muted);}
.sb-sub .sb-child.cur{color:var(--sky-deep);font-weight:bold;background:var(--sky-pale);border-radius:8px;}
/* 横並びになる小画面ではツリーを出さない（親項目から開けば足りる） */
@media(max-width:760px){ .sb-tw,.sb-sub{display:none !important;} }

/* ── 表の並べ替え＋列絞り込み（colview tools・opt-in・2026-08-12 機器台帳の要望）── */
.skcolt thead th.sksorted{color:var(--sky-deep);font-weight:bold;}
.skfrow th{padding:3px 6px 5px;background:var(--panel);}
.skfin{width:100%;box-sizing:border-box;font-family:inherit;font-size:11px;padding:2px 7px;
       border:1px solid var(--line);border-radius:6px;color:var(--ink);background:var(--card);}
.skfin::placeholder{color:#B6C0CC;}
.skfin:focus{outline:none;border-color:var(--sky);}
.chip.sktools{color:var(--sky-deep);border-color:var(--line);background:var(--panel);}
.sktclear{margin-left:6px;font-size:11px;border:1px solid var(--line);background:var(--card);color:var(--sky-deep);
          border-radius:6px;padding:0 7px;cursor:pointer;}
.sktclear:hover{border-color:var(--sky);}
@media print{ .skfrow{display:none;} }

/* ── 共有アイコン（線画SVG・2026-08-13）＝画面内の絵文字アイコンの置き換え ──
   絵文字はOSのカラーフォント任せ＝環境で見た目が変わり、色も文脈に合わせられない。
   SVGは currentColor＝置いた場所の文字色に自動で染まる（警告なら赤・チップなら青）。
   使い方＝静的HTML: <span data-ic="gear"></span>（soukyo-ui.js が読み込み時に注入）
          動的JS  : SkUI.icon("gear") が '<svg class="sk-ic">…</svg>' を返す。
   大きさは文字サイズ追従（em）＝ボタン・チップ・見出しのどこに置いても揃う。 */
.sk-ic{width:1.08em;height:1.08em;display:inline-block;vertical-align:-.18em;flex:none;}
/* ナビのアイコン＝ホバーでわずかに拡大（押せる合図。transformはGPU合成＝軽い） */
.sb-item .ic svg{transition:transform .18s ease;}
.sb-item:hover .ic svg{transform:scale(1.1);}
/* ── 押せる/押せない 第4弾＝**箱**も「触る前に」分かるように（2026-09-01 ユーザー指摘
   「サインインとかネットワーク機器は行になってるのに、いまの状態がラムネなのが…
     映せている範囲も押せないのにラムネなのが違う気がする」
   「クリックできるところとできないところを、カーソルを合わせる前からしっかり見た目で分かるように」）
   ★実測（17画面を**データごと開いて**計算後のスタイル）＝
     ① 押せる箱（タブ `.atab`／トグル `.tg`／ページピル `.pn`／導線カード `.golink`・`.menucard`・
        `.catcard[onclick]`／▸ `.sb-tw`／(?)ヘルプ `summary`）は**平常時の枠が 1.1〜1.3:1**＝地と見分けられない。
        （例＝制度センターの `.golink` は**13枚すべて**が「押せるのに枠が見えない」状態だった）
     ② そのほぼ全部が**ホバーでは `--sky` の枠**になる＝**「押せる＝青い枠」という言葉は既にあり、
        手を置くまで出していなかっただけ**（2026-07-31 の行・2026-09-01 のタブとまったく同じ構図）。
     ③ 逆に**押せない**「映せている範囲」のタイル `.src2` は `--panel`（#FAFCFF）＝ボタンと同じ
        淡い青の面で、**押せそうに見えていた**（ユーザーの言う「ラムネ」）。
   ⇒ 約束を1つにする＝**青い枠＝押せる／薄い枠・枠なし＝押せない**。
   ⚠ **大きさは1pxも変えない**（枠の幅は既存のまま・色だけ）。
   ⚠ 濃さは**この2行**で上げ下げできる（うるさければ `--sky` を `--sky-light` に落とすだけ）。 */
/* A. 押せる箱＝平常時から青い枠（--sky＝地に 4.42:1・2026-10-02 案A） */
.atab:not(.cur), .ctab:not(.cur), .tg:not(.on), .pagenav .pn:not(.cur), .sb-tw,
.sk-help>summary, .golink, .menucard, .catcard[onclick], .chip[onclick], .chip.clickable,
.skcbtn, .sk-hintbtn, .sk-hintbtn[aria-pressed="true"], .sktclear, .todo a.go,
/* ★番犬（第4弾）が「押せるのにしか使わないクラスなのに枠が薄い」と見つけた4つ */
.tab:not(.on), .starbtn:not(.active), .evbtn:not(.on), .gitem{border-color:var(--sky);}
/* B. 触ると一段濃く（平常＝--sky ／ ホバー＝--sky-deep）＝段が付いて「反応した」と分かる */
.atab:not(.cur):hover, .ctab:not(.cur):hover, .tg:not(.on):hover, .pagenav a.pn:hover,
.sb-tw:hover, .sk-help>summary:hover, .golink:hover, .menucard:hover,
.catcard[onclick]:hover, .skcbtn:hover, .sk-hintbtn:hover, .sktclear:hover,
.todo a.go:hover, .tab:not(.on):hover, .starbtn:not(.active):hover,
.evbtn:not(.on):hover, .gitem:hover{border-color:var(--sky-deep);}
/* C. 押せない「眺めるだけ」のタイルからは青みを抜く＝淡い青の面はボタン（押せる）専用にする */
.src2{background:#F5F6F8;}
/* D. 文字だけの操作（トピックスの「確認済みにする」）＝平常時から**点線の下線**で押せると分かる。
   ⚠ 色も `--muted` へ＝#93A2B3 は白地に **2.60:1**（本文AAの 4.5:1 に届かない）。
     memory の「10pxの小さい文字を薄くしない（#8494A6=3.1:1 は不足）」と同じ型。
   ⚠ `.todo a.ackbtn` の要素名は、当時ホームだけ `<style>` が共有CSSより後ろだった名残（同じ詳細度で負けた）。
     ⇒ 2026-09-01 に link の前へ移して根治（前後を全数突き合わせ＝**370要素×20項目で差0**）。保険として残す。 */
.todo a.ackbtn{color:var(--muted); text-decoration:underline dotted; text-underline-offset:2px;}
/* E. ★**取りこぼしを作らない安全網**（2026-09-01 ユーザー「今の状態や監視カテゴリーも押せるんだからやってよ」）
   ＝クラスを1つずつ数える限り必ず漏れる（実際に**ホームの「いまの状態」カード（`.card[onclick]`）を
   取りこぼした**＝押せる2枚と押せない2枚が同じ見た目のままだった）。⇒**枠を持つ押せるものは全部**この色。
   ⚠ **枠を持たないものには何も起きない**（border-color は幅0の枠には見えない）＝モーダルの覆い・
     文中のリンクを押せる見た目にしない（2026-08-29 の約束を破らない）。
   ⚠ 四辺の色が違う「左の色帯」を持つ押せる要素は**実測0件**＝border-color で潰す心配が無いことを
     確かめてから入れた（帯を持つ .todo は押せない）。
   ⚠ ホバーはここで足さない＝各部品が自分のホバーを持ち、持たないものは 2026-08-29 の安全網が効く。 */
button:not(:disabled), summary, a[href], [onclick], [role=button], .clickable{border-color:var(--sky);}
/* ── 押せる部品を**1つの姿**に揃える（2026-09-01 ユーザー「押せるボタンは全てにおいて統一感を
   持たせてください。徹底して！」）─────────────────────────────────
   ★きっかけ＝iPhoneの実機で「色が変」＝**`<button>` に文字色を書いていないと iOS Safari が
     自分の青で文字を塗る**（手元のChromeでは黒＝ブラウザで違う）。⇒ **地と字は必ず対で書く**。
   約束＝**押せる操作部品は蒼の塗り＋白文字／選んでいるものは内側に白い輪／危険だけ赤**。
   ⚠ 選択中は**塗りを濃くし、内側に白い2pxの輪**（`box-shadow`）＝**大きさは1pxも変わらない**
     （枠を太くすると1px動く＝2026-08-05からの約束）。
   ⚠ 押せる**カード**（制度カード `.catcard`・導線カード `.golink`/`.menucard`・いまの状態 `.card[onclick]`）は
     **白地＋青枠のまま**＝面の中に色つきの数字やグラフが載るので塗ると読めなくなる。枠の色は同じ青＝言葉は揃える。
   ⚠ この節は安全網E（押せるものの枠を青にする）より**後ろ**に置き、`body ` を1つ付けて詳細度を勝たせる。 */
/* ⚠ `.btn` もここに入れる＝**塗りが既定だった8画面**（操縦席など）も同じ色になる＝37画面で1つ。
   `var(--brand, …)` ＝月報ツール2枚（テラコッタ）は**その画面の色**のまま。`.amber` は独自色なので外す。 */
body .btn:not(:where(.danger,.amber)), body .catbtn, body .tg, body .pagenav .pn, body .atab,
body .ctab, body .skcbtn, body .sk-hintbtn, body .sktclear, body .todo a.go,
body .sk-help>summary{
  background:var(--brand, var(--btn-bg)); color:#fff; border-color:var(--brand, var(--btn-bg));}
body .btn:not(:where(.danger,.amber)):hover, body .catbtn:hover, body .tg:hover,
body .pagenav a.pn:hover, body .atab:hover, body .ctab:hover, body .skcbtn:hover,
body .sk-hintbtn:hover, body .sktclear:hover, body .todo a.go:hover,
body .sk-help>summary:hover{background:var(--btn-hover); border-color:var(--btn-hover); color:#fff;}
/* 選んでいるもの＝濃い蒼＋内側の白い輪（色だけで見分けさせない） */
body .btn.on, body .btn.primary, body .catbtn.sel, body .tg.on, body .pagenav .pn.cur,
body .atab.cur, body .ctab.cur, body .skcbtn.on, body .sk-hintbtn[aria-pressed="true"],
body .sk-help[open]>summary{
  background:var(--btn-on); border-color:var(--btn-on); color:#fff;}
/* 「いま選んでいる」ものだけ内側に白い輪＝主ボタン(.primary)は選択ではないので輪を出さない */
body .catbtn.sel, body .tg.on, body .pagenav .pn.cur, body .atab.cur, body .ctab.cur,
body .skcbtn.on, body .sk-hintbtn[aria-pressed="true"], body .btn.on,
body .sk-help[open]>summary{box-shadow:inset 0 0 0 2px #fff;}
/* 塗りの上で読める色へ（数字・補助文字・状態の●） */
body .catbtn .cb-n b, body .catbtn .cb-a, body .catbtn .cb-src{color:#fff;}
body .catbtn .cb-a b{color:#FFCF8E;} body .catbtn .cb-a b.z{color:rgba(255,255,255,.55);}
body .catbtn .dot2.d-ok{background:#5FD3A6;} body .catbtn .dot2.d-warn{background:#FFCF8E;}
body .catbtn .dot2.d-idle{background:#B9C6D4;}
/* (?)ヘルプの丸い「?」＝塗りの上なので白抜きへ */
body .sk-help>summary::before{background:#fff; color:var(--sky-deep);}
/* ── 制度の道のり6段（2026-09-23・蒼鏡_道のり.js）＝自社ルールの先頭のカードとホームの1行 ──────
   丸数字と件数の印は制度センターの .stno／.kchip と同じ見た目（共有へ寄せた）。1行＝まるごと1つの<a>（押せる＝青い枠）。 */
.jr-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.jr-st{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--card);}
.jr-st.cur{border-color:var(--sky-deep);background:var(--panel);}
.jr-st>summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;cursor:pointer;list-style:none;font-size:13.5px;}
.jr-st>summary::-webkit-details-marker{display:none;}
.jr-st>summary::after{content:"▸";color:var(--muted);font-size:12px;} .jr-st[open]>summary::after{content:"▾";}
.jr-head{display:flex;align-items:center;gap:8px;} .jr-head .sk-help{margin:0;}
.jr-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--sky-deep);color:#fff;font-size:12.5px;font-weight:bold;}
.jr-chip{display:inline-block;background:var(--chip);border-radius:6px;padding:1px 8px;font-size:11.5px;margin:1px 4px 1px 0;font-weight:normal;}
.jr-state{margin-left:auto;font-size:12px;color:var(--muted);}
.jr-state.jr-todo,.jr-state.jr-partial{color:var(--warn);font-weight:bold;} .jr-state.jr-done{color:var(--ok);font-weight:bold;}
.jr-sub,.jr-more{font-size:12px;color:var(--muted);margin:6px 0 0 30px;}
.jr-it{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin:6px 0 0 30px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;color:var(--ink);text-decoration:none;}
a.jr-it:hover{border-color:var(--sky-deep);background:var(--panel);}
.jr-t{flex:1 1 240px;} .jr-t .jr-chip{margin-left:6px;} .jr-go{flex:none;margin-left:auto;color:var(--sky-deep);white-space:nowrap;}
@media(max-width:760px){ .jr-it,.jr-sub,.jr-more,.jr-links{margin-left:0;} }
.jr-links{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 30px;}
.jr-home{display:inline-flex;align-items:center;margin:0 0 12px;padding:6px 14px;border:1px solid var(--sky);border-radius:999px;background:var(--card);color:var(--sky-deep);font-weight:bold;font-size:13px;text-decoration:none;}
.jr-home:hover{border-color:var(--sky-deep);background:var(--panel);} .jr-home[hidden]{display:none;}

/* ── 押した瞬間の手応え（:active・2026-10-02 便3＝👤「ほかの製品と違ってクリックしたときの反応が浅いというか軽い」）──
   実測＝押している間に変わるのは `.btn` の1px沈みだけ（色は不変）。行・サイドバー・タブ・ピル・カード・summary は何も起きなかった。
   約束＝**平常 → ホバー → 押している間**の順に一段ずつ濃く＋1px沈む（沈みは末尾の no-preference の中だけ）。
   ⚠ 押した瞬間は即（.05s）・離した後は各部品のホバーの速さ＝transition-duration は :active の側にだけ書く。
   ⚠ **地と字は対で書く**＝塗りの部品は背景と白文字を一緒に／淡い面・中身の分からない部品は内側の影で
     「今の地より濃く」するだけ＝塗りの8画面（sk-btn-solid）で白地＋白文字になる型（第3弾の事故）を作らない。
   ⚠ 大きさは1pxも変えない（色・内側の影・transform だけ）。
   ⚠ この節は統一の節より**後ろ**＝同じ詳細度ならホバー・選択中に勝つ。 */
/* A. 安全網＝押せる要素は押している間、今の地より一段濃く（詳細度0＋:active＝自前の影を持つ部品はそちらが勝つ）。
   ⚠ `[onclick]` は入れない＝モーダルの覆いは中を押すたびに :active になる（祖先にも付く）＝覆い全体が明滅する。 */
:where(button:not(:disabled), [role=button], summary, a[href]):active{
  box-shadow:inset 0 0 0 999px rgba(15,23,42,.09); transition-duration:.05s;}
/* B. 塗りの部品＝ホバー（--btn-hover）より一段濃い --btn-on＋白文字（白文字 11.44:1）。
   ⚠ `:not(.danger,.amber)` は詳細度 (0,1,0) を持つ＝非塗り画面のホバー (0,3,1) と並び、後ろに置いて勝つ。 */
body .btn:not(.danger,.amber):active, body .catbtn:active, body .tg:active, body .pagenav a.pn:active,
body .atab:active, body .ctab:active, body .skcbtn:active, body .sk-hintbtn:active, body .sktclear:active,
body .todo a.go:active, body .sk-help>summary:active{
  background:var(--btn-on); border-color:var(--btn-on); color:#fff; transition-duration:.05s;}
/* 元から --btn-on の物（選択中・主ボタン）＝さらに内側を暗く（白文字 13.74:1）。選択中の白い輪は残す。 */
body .btn.on:active, body .catbtn.sel:active, body .tg.on:active, body .pagenav a.pn.cur:active,
body .atab.cur:active, body .ctab.cur:active, body .skcbtn.on:active, body .sk-hintbtn[aria-pressed="true"]:active,
body .sk-help[open]>summary:active{box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 999px rgba(0,0,0,.22);}
body .btn.primary:not(.on):active{box-shadow:inset 0 0 0 999px rgba(0,0,0,.22);}
body .btn.danger:active{background:#5E1F1A; border-color:#5E1F1A; color:#fff; transition-duration:.05s;}   /* 赤も一段濃く（8.12→10.30→12.45） */
/* 琥珀（画面の独自色）＝塗りの画面ではホバーが内側の影 .18（第3弾 C）＝押している間はそれより濃く。白地の画面は A の安全網。 */
:where(body.sk-btn-solid) .btn.amber:active{box-shadow:inset 0 0 0 999px rgba(0,0,0,.28);}
/* C. 押せる箱・カード（白地＋青枠・中に色つきの数字）＝塗らずに内側の影で一段濃く（面の上で muted 4.98）。 */
.catcard[onclick]:active, .card[onclick]:active, .menucard:active, .golink:active, .gitem:active,
.chip[onclick]:active, .chip.clickable:active, .sb-tw:active, .tab:active, .starbtn:active, .evbtn:active,
.skcreset:active, .jr-it:active, .jr-home:active{
  box-shadow:inset 0 0 0 999px rgba(15,23,42,.09); border-color:var(--sky-deep); transition-duration:.05s;}
/* D. 押せる行＝ホバー --chip より一段濃い --press＋左のバーを藍へ（td の左端の影はバーなので背景で示す）。 */
tbody tr[onclick]:active>td, tbody tr.clickable:active>td{background:var(--press); transition-duration:.05s;}
tbody tr[onclick]:active>td:first-child, tbody tr.clickable:active>td:first-child{box-shadow:inset 3px 0 0 var(--sky-deep);}
/* E. サイドバー・列の選択肢＝ホバー（--panel）・現在地（--sky-pale）より濃い --press。
   ⚠ 項目は a[href]＝A の内側の影を消す（重ねると --press の上の字が 4.5 を割る）。 */
.sb-item:active, .sb-sub .sb-child:active{background:var(--press); color:var(--sky-deep); box-shadow:none; transition-duration:.05s;}
.skcrow:not(.lock):active{background:var(--press); transition-duration:.05s;}
/* F. 1px 沈む＝動きを抑えたい利用者には出さない（色の段だけ残る）。
   ⚠ 行（td）は沈めない＝表の線が1px隣の行へ重なり、横長の行全体が揺れて見える。
   ⚠ ホバーで1px浮くカード（.catcard/.menucard）は元の高さへ戻す＝合わせて1px沈む。
   ⚠ サイドバーはホバーで右へ1px＝押すと下へも1px。 */
@media (prefers-reduced-motion: no-preference){
  .tg:active, .pagenav .pn:active, .atab:active, .ctab:active, .catbtn:active, .skcbtn:active,
  .sk-hintbtn:active, .sktclear:active, .todo a.go:active, .sk-help>summary:active, .sb-tw:active,
  .tab:active, .starbtn:active, .evbtn:active, .chip[onclick]:active, .chip.clickable:active,
  .skcreset:active, .jr-home:active, .jr-it:active, .golink:active, .gitem:active, .card[onclick]:active{
    transform:translateY(1px);}
  .catcard[onclick]:active, .menucard:active{transform:none;}
  .sb-item:active{transform:translate(1px,1px);}
}

/* ── ページの移り変わり（2026-10-02 便3）──────────────────────────────
   44枚の別ページを移るたびに白く抜けてから描き直していた＝同じオリジンの移動を滑らかにつなぐ
   （Chrome/Edge 126+。対応しないブラウザは今のまま＝何も起きない）。
   ⚠ サイドバーは名前を付けて本文のフェードから外す＝同じ場所に留まって見える（中身は auth.js の renderNav）。
   ⚠ 名前は1画面に1つだけ＝重なると移り変わりごと取り消される（aside.sidebar は各画面に1つ）。
   ⚠ 動きを抑えたい利用者には付けない（今までどおり普通に切り替わる）。 */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
  aside.sidebar{view-transition-name:sk-sidebar;}
  ::view-transition-group(*){animation-duration:.18s;}
}