/* os.html の図の器（D-2434）。
   TOP（/）から移してきた 4 図 ── 譜面・24H 文字盤・検証の関門・3D 双円錐 ── を
   紙色の面の上で描くための、**その器だけの**系統。

   決まりごと
   ・:root には 1 つも書かない。os.html の既存の節は 1 ピクセルも変えない
     （redesign.css の --ink / --paper と名前が衝突するため、上書きすると
      ページ全体の配色が変わってしまう）。トークンは .figs の中だけに置く。
   ・図を描く /assets/os-figures.js も、色を documentElement ではなく
     .figs から読む。読む場所と定義する場所を必ず一致させる。
   ・値は TOP の配色 A（深宙）から写した。TOP 側を変えてもここは追随しない ──
     追随させたければ、写すのではなく 1 本の CSS を両方から読ませること。
   ────────────────────────────────────────────────────────────── */
.figs{
  --mi:"Shippori Mincho",serif;
  --jp:"Zen Kaku Gothic New",sans-serif;
  --mo:"JetBrains Mono",monospace;
  --r:24px; --rs:14px;
  /* 2026-09-15: 全体を白地にしたので、ここも TOP の配色 A（白地）から写し直した。 */
  --obs:#2F78AE; --kno:#8E6310; --cir:#10785A;
  --orc:#B23C74; --jud:#6A4FD0; --hum:#EFE3D5; --no:#C0392E; --biz:#4550C8;
  --paper:#FFFFFF; --card:#FFFFFF;
  --ink:#14161C; --mute:#4A5266; --dim:#5C6477;
  --hair:rgba(20,30,60,.14); --hair2:rgba(20,30,60,.08);
  --pa:#0B7FA6; --pb:#7B55D9; --pc:#0F8A64;
  --ac:#0A6F94; --ac2:#7A45C9;
  --glow:rgba(10,111,148,.22);
  --sh:0 24px 60px rgba(20,30,60,.12); --shs:0 8px 24px rgba(20,30,60,.08);

  background:var(--paper);
  color:var(--ink);
  font-family:var(--jp);
  line-height:1.95;
  border-radius:var(--r);
  padding:clamp(24px,4vw,46px);
  margin:0 0 34px;
}
.figs *{box-sizing:border-box}
.figs a{color:var(--ac)}
.figs canvas,.figs svg,.figs img{display:block;max-width:100%}
.figs .fighead{margin-bottom:18px}
.figs .fighead .k{font-family:var(--mo);font-size:.58rem;letter-spacing:.22em;color:var(--ac);display:block}
.figs .fighead h3{font-family:var(--mi);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--ink);margin:8px 0 8px;line-height:1.5}
.figs .fighead p{font-size:.82rem;color:var(--mute);max-width:62ch;margin:0}
.figs .figpart{margin-top:44px}
.figs .figpart:first-of-type{margin-top:0}

/* ══════════ 04 譜面 ══════════ */
.figs .stage{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.figs #roll{display:block;width:100%;height:min(46vh,380px)}
.figs .keys{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.figs .key{font-family:var(--mo);font-size:.62rem;letter-spacing:.1em;color:var(--mute);display:inline-flex;align-items:center;gap:6px}
.figs .key i{width:14px;height:6px;border-radius:3px;background:var(--c,var(--ac))}
.figs .voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:24px}
.figs .voice{background:var(--card);border:1px solid var(--hair);border-radius:var(--rs);padding:18px 18px 14px;box-shadow:var(--shs);border-top:4px solid var(--vc,var(--pa))}
.figs .voice .nm{font-family:var(--mi);font-weight:700;font-size:.95rem}
.figs .voice .nm em{display:block;font-family:var(--mo);font-style:normal;font-size:.54rem;letter-spacing:.22em;color:var(--dim);margin-top:2px}
.figs .voice .tx{font-size:.75rem;color:var(--mute);margin:10px 0 12px;line-height:1.8}
.figs .voice .ct{font-family:var(--mo);font-weight:600;font-size:1.3rem}
.figs .voice .ct em{font-style:normal;font-size:.65rem;color:var(--dim);margin-left:3px}

/* ══════════ 05 自動化 ── 文字盤＋実測ボード ══════════ */
.figs .chrono{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:28px;align-items:start;margin-bottom:26px}
@media(max-width:860px){.figs .chrono{grid-template-columns:1fr}}
.figs .dial-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh);padding:22px;position:relative}
.figs .dial{position:relative}
.figs #dial{display:block;width:100%;height:auto}
.figs .tno{font-family:var(--mo);font-size:15.7px;fill:var(--dim)}
.figs .core{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.figs .core .big{font-family:var(--mo);font-weight:600;font-size:2rem}
.figs .core .cap{font-family:var(--mo);font-size:.55rem;letter-spacing:.2em;color:var(--dim)}
.figs .core .sub{font-size:.66rem;color:var(--mute);margin-top:2px}
.figs .bands{display:grid;gap:10px}
.figs .band{display:grid;grid-template-columns:76px 1fr 44px;gap:14px;align-items:center;background:var(--card);border:1px solid var(--hair);border-radius:var(--rs);padding:13px 16px;box-shadow:var(--shs)}
.figs .band .t{font-family:var(--mo);font-weight:600;font-size:.8rem}
.figs .band .t small{display:block;font-weight:400;font-size:.55rem;letter-spacing:.12em;color:var(--dim)}
.figs .band .d{font-size:.72rem;color:var(--mute)}
.figs .band .g{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-top:7px;overflow:hidden}
.figs .band .g i{display:block;height:100%;width:var(--w);background:var(--gc);border-radius:3px}
.figs .band .n{font-family:var(--mo);font-weight:600;text-align:right}
.figs .fnote{font-family:var(--mo);font-size:.58rem;letter-spacing:.1em;color:var(--dim);line-height:2;margin-top:12px}
.figs .board{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(24px,4vw,44px)}
.figs .board .bh{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--hair);padding-bottom:16px;margin-bottom:24px}
.figs .board .bh .tt{font-family:var(--mi);font-weight:700;font-size:1.1rem}
.figs .board .bh .dt{font-family:var(--mo);font-size:.62rem;letter-spacing:.16em;color:var(--mute)}
.figs .board .bh .dt i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cir);margin-right:7px;animation:figspulse 2.4s infinite}
@keyframes figspulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.figs .board .bh .dt i{animation:none}}
.figs .bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 28px}
.figs .stat b{font-family:var(--mo);font-weight:600;font-size:clamp(1.5rem,2.6vw,1.95rem)}
.figs .stat b small{font-size:.85rem;color:var(--mute);font-weight:400;margin-left:2px}
.figs .stat .l{font-size:.72rem;color:var(--mute);margin-top:2px;line-height:1.7}
.figs .stat .bar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-top:10px;overflow:hidden}
.figs .stat .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--pa),var(--ac));width:var(--w,50%)}
.figs .bsplit{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-top:26px}
@media(max-width:820px){.figs .bsplit{grid-template-columns:1fr}}
.figs .mini{background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 40%,var(--card)),var(--card));border:1px solid var(--hair);border-radius:var(--rs);padding:20px}
.figs .mini h4{font-family:var(--mi);font-weight:700;font-size:.9rem;margin-bottom:12px}
.figs .mini .li{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;color:var(--mute);padding:7px 0;border-bottom:1px solid var(--hair)}
.figs .mini .li:last-child{border:0}
.figs .mini .li b{font-family:var(--mo);color:var(--ink);font-weight:600;white-space:nowrap}
.figs .mini .li small{display:block;font-size:.62rem;color:var(--dim);line-height:1.7}
.figs .bnote{margin-top:26px;padding-top:16px;border-top:1px dashed var(--hair);font-family:var(--mo);font-size:.6rem;letter-spacing:.1em;color:var(--dim);line-height:2}

/* ══════════ 06 検証 ══════════ */
.figs .gates{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.figs #sieve{display:block;width:100%;height:min(40vh,320px)}
.figs .tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.figs .ty{background:var(--card);border:1px solid var(--hair);border-radius:var(--rs);padding:16px 18px;box-shadow:var(--shs)}
.figs .ty b{font-family:var(--mo);font-weight:600;font-size:1.35rem;color:var(--tc,var(--ink))}
.figs .ty span{display:block;font-size:.66rem;color:var(--mute);line-height:1.7;margin-top:4px}
.figs .creed{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:26px}
.figs .creed>div{background:var(--card);border:1px solid var(--hair);border-radius:var(--rs);padding:22px;font-size:.8rem;color:var(--mute);box-shadow:var(--shs);border-top:4px solid var(--cc,var(--pb));line-height:1.9}
.figs .creed b{display:block;font-family:var(--mi);color:var(--ink);font-size:.95rem;margin-bottom:10px;font-weight:700}

/* ══════════ 07 3D双円錐 ══════════ */
.figs .cone3d{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh);position:relative;overflow:hidden}
.figs #cone3d{display:block;width:100%;height:min(66vh,560px);cursor:grab;touch-action:pan-y}
.figs #cone3d:active{cursor:grabbing}
.figs .cone-hint{position:absolute;left:18px;bottom:14px;font-family:var(--mo);font-size:.56rem;letter-spacing:.16em;color:var(--dim);line-height:1.9;pointer-events:none}
.figs .cone-legend{position:absolute;right:18px;top:16px;display:grid;gap:6px;font-family:var(--mo);font-size:.6rem;letter-spacing:.1em;color:var(--mute);background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(8px);border:1px solid var(--hair);border-radius:12px;padding:12px 14px}
.figs .cone-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:-1px;background:var(--c)}
.figs .sheetp{position:absolute;top:0;right:0;bottom:0;width:min(320px,86%);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);border-left:1px solid var(--hair);padding:22px;transform:translateX(105%);transition:transform .35s;overflow:auto;z-index:5}
.figs .sheetp.on{transform:none}
@media(prefers-reduced-motion:reduce){.figs .sheetp{transition:none}}
.figs .sheetp .cls{font-family:var(--mo);font-size:.6rem;letter-spacing:.14em;border:1px solid var(--hair);background:var(--card);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--mute)}
.figs .sheetp .lay{font-family:var(--mo);font-size:.56rem;letter-spacing:.24em;color:var(--acp,var(--ac));margin:16px 0 4px}
.figs .sheetp h4{font-family:var(--mi);font-weight:700;font-size:1.05rem}
.figs .sheetp .big{font-family:var(--mo);font-weight:600;font-size:1.7rem;margin:6px 0 10px}
.figs .sheetp p{font-size:.78rem;color:var(--mute);line-height:1.9}
.figs .sheetp dl{margin-top:14px;font-size:.72rem}
.figs .sheetp dt{font-family:var(--mo);font-size:.55rem;letter-spacing:.2em;color:var(--dim);margin-top:10px}
.figs .sheetp dd{color:var(--mute)}

/* 狭い画面：札の文字が潰れないよう、凡例を畳んで canvas を高くする */
@media(max-width:620px){
  .figs #cone3d{height:min(72vh,480px)}
  .figs .cone-legend{right:10px;top:10px;gap:3px;font-size:.52rem;padding:8px 9px}
  .figs .cone-legend i{width:7px;height:7px;margin-right:5px}
  .figs .cone-hint{left:10px;bottom:8px;font-size:.5rem}
  .figs .sheetp{width:100%;padding:18px}
}


/* ── redesign.css との名前のぶつかりを、器の中だけで打ち消す ──────────
   os.html の既存の系統（redesign.css）にも .stat が在り、そちらは
   `background:var(--wall)`（紙色）を敷く。v3.css 側の .stat は背景を
   宣言していなかったので、**宣言していない性質だけが漏れてきて**、
   暗い器の中に白い札が並んだ（実測 2026-08-21）。

   同名クラスは「見た目が全部上書きされる」わけではない ── 書いていない
   性質は下から漏れる。だから、漏れてくる性質を名指しで打ち消す。
   ＊新しく図を足すときは、redesign.css に同じ名前が無いかを先に見ること。 */
.figs .stat{background:transparent;padding:0}

/* ── 自社サイトの実証カード（D-2433-b → D-2434 で os.html へ）─────────
   #73 では TOP の BLOCK06「実証」の中に在った。この版で 06 ごと os.html へ
   移したので、系統もここへ持ってきて .figs の下に閉じる。
   ＊--cirS（循環色の光）は .figs のトークンに無かったので、ここで足す。 */
.figs{--cirS:rgba(63,220,160,.5)}
/* 実証カード（BLOCK06）。数は data-metric で台帳を名指ししている。 */
.figs .proof-sites{margin-top:26px;background:color-mix(in srgb,var(--card) 82%,transparent);
  border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.figs .ps-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--hair)}
.figs .ps-h .tt{font-family:var(--mi);font-weight:700;font-size:.95rem}
.figs .ps-h .dt{font-family:var(--mo);font-size:.58rem;letter-spacing:.14em;color:var(--dim);
  display:inline-flex;align-items:center;gap:7px}
.figs .ps-h .dt i{width:6px;height:6px;border-radius:50%;background:var(--cir);box-shadow:0 0 10px var(--cirS)}
/* 6 枚は必ず割り切れる列数にする。auto-fit だと幅によって 5＋1 の孤立が出て、
   最後の 1 枚だけ別の行に取り残される（実測 1440px で 5 列＋1）。 */
.figs .ps-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.figs .pcard{display:block;padding:18px 20px 16px;border-right:1px solid var(--hair2);
  border-bottom:1px solid var(--hair2);text-decoration:none;color:var(--ink);transition:background .2s}
.figs .pcard:hover{background:color-mix(in srgb,var(--ac) 7%,transparent)}
.figs .pcard .pn{font-family:var(--mi);font-weight:700;font-size:.92rem;display:block}
.figs .pcard .pn i{font-style:normal;font-size:.78em;margin-left:4px;color:var(--ac)}
.figs .pcard .pw{font-size:.66rem;color:var(--dim);line-height:1.7;display:block;margin-top:3px;min-height:2.4em}
.figs .prow{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.figs .prow i{font-style:normal;font-family:var(--mo);font-size:.58rem;letter-spacing:.12em;
  color:var(--dim);width:4.6em;flex:none}
.figs .prow b{font-family:var(--mo);font-weight:600;font-size:1.15rem;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-left:auto}
.figs .prow em{font-style:normal;font-size:.6rem;color:var(--mute);width:1.6em;flex:none;text-align:right}
.figs .ps-note{padding:14px 20px 16px;font-size:.66rem;color:var(--dim);line-height:1.95}
@media(max-width:900px){.figs .ps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .figs .pcard .pw{min-height:0}
  .figs .ps-grid{grid-template-columns:1fr}
}