/* **中で作業する画面**の地色（`body.work`）。

   入口4ページ（`/` `/slides` `/tools` `/quiz`）は**濃紺で見せる**画面。
   その1つ奥、**実際に手を動かす画面**はここ:

     /tools/{種目}           計算機
     /tools/{種目}/equilibrium  解いてある答え
     /tools/board            盤の型の出やすさ
     /quiz/{種目}…            テスト

   **薄い水色の地に黒い字**。長く見るものなので、濃紺より目が疲れず、
   紙（白いカード）がよく浮く。読み込むのは
   `templates/element/hub/work.php` を呼んだ画面だけ。

   **変えるのは地と字の色だけ。**部品の見た目（`tools.css` / `quiz.css`）
   には触らない——触ると、どの画面が何を決めているのか分からなくなる。 */

/* **地と字の色はここに無い。**濃紺でない画面は全部おなじ色なので、
   `deck2.css` の `:root` に置いてある（スライドも計算機も同じ地）。
   ここに残っているのは**この画面だけの部品の作り**。 */

/* 上のバーは紙と同じ白。**地より明るい**ので、上端がはっきり切れる。 */
body.work .appbar{background:rgba(255,255,255,.94)}

/* ---------- 面の作り方。**枠線をやめて、影と余白で区切る** ----------
   灰色の1px 枠が画面じゅうに走っていると、古い社内システムに見える。
   白い面を**広くやわらかい影**で浮かせ、角を丸めて、境目は余白で示す。
   （`tools.css` / `quiz.css` の部品はそのまま。ここで上から当て直す） */
body.work .calc,
body.work .box,
body.work .hero{
  border:0;border-radius:15px;background:var(--paper);
  box-shadow:0 10px 30px rgba(15,32,62,.055),0 1px 2px rgba(15,32,62,.04)}
/* 箱の左の色帯は**意味を持つ**ので残す（key / warn / good の区別）。 */
body.work .box{border-left:3px solid var(--navy2);padding:16px 18px}
body.work .box.key{border-left-color:var(--navy)}
body.work .box.warn{border-left-color:var(--acc)}
body.work .box.good{border-left-color:var(--pos)}
body.work .calc{padding:22px 24px}
body.work .hero{padding:26px 28px}

/* 見出しは**太く濃く、ひとまわり大きく**。 */
/* ---------- 題まわり。**入口（`body.hub`）と同じ形にする** ----------
   骨組みは元から同じ（kicker → 題 → 棒 → リード）だったのに、書体・棒の本数・
   字間が全部違っていて、同じサイトに見えなかった。
   **形はそろえ、地と字の色だけ変える。**本文と表はゴシックのまま。 */
body.work .hero h1{
  font-family:var(--h-min);font-size:clamp(26px,3.4vw,38px);line-height:1.35;
  color:var(--navy);font-weight:600;letter-spacing:.04em}
/* 棒は入口と同じ**3本**。濃紺では淡い順だったので、水色では**濃い順**——
   どちらも地から一番遠い色が先頭に来る。 */
body.work .hero h1::after{
  width:52px;height:5px;border-radius:3px;background:var(--navy);
  box-shadow:62px 0 0 0 var(--navy2),124px 0 0 0 var(--navy3);margin:18px 0 0}
body.work .hero .kicker{
  font-family:var(--h-en);color:#5E6D83;letter-spacing:.34em;
  font-size:11px;font-weight:700;margin:0}
/* 真鍮の ♠。**作業画面にはこれまで暖色が1滴も無かった。** */
body.work .hero .kicker::before{
  content:"♠";margin-right:9px;letter-spacing:0;color:var(--brass)}
/* 補足は**小さく薄く**。太字を減らした分、ここで濃淡を付ける。 */
body.work .hero p{color:#475569;font-size:13.5px;line-height:1.95}
body.work .hero p b{color:#1E293B;font-weight:600}
body.work .hero .note{color:#5E6D83;font-size:12px;margin-top:10px}
body.work .hero .note b{color:#475569}

/* ---------- 手札の枠。**選んでいる枠は青く光らせる**（橙をやめる） ---------- */
body.work .calc .slot{border-radius:10px}
body.work .calc .slot.on{background:#EEF3FF}
body.work .calc .slot.on .card,
body.work .calc .slot.on .hole{
  box-shadow:0 0 0 2px #2F55D6,0 0 0 6px rgba(47,85,214,.18)}
body.work .calc .slot.on .hole{border-color:#2F55D6;background:var(--paper)}
body.work .calc .slot.on .pn{color:#2F55D6;font-weight:700}
body.work .calc a.slot .pn{color:#475569}
body.work .calc a.slot:hover{background:#F1F5FF}
body.work .calc a.slot:hover .card,
body.work .calc a.slot:hover .hole{box-shadow:0 0 0 2px #7C9BFF}
body.work .calc .hole{border-radius:8px}

/* ---------- Dead Card。**地の色を抜いて白基調になじませる** ---------- */
body.work .calc .deadbox{
  background:none;border:0;border-top:1px solid #E8EEF6;border-radius:0;
  margin:18px 0 0;padding:16px 2px 0}
body.work .calc .deadbox .lbl{color:#475569}

/* ---------- デッキ。**押せる部品に見せる** ---------- */
body.work .calc .deck{
  background:#F7FAFE;border:0;border-radius:15px;padding:16px 17px}
body.work .calc .dhead b{color:#1E293B}
body.work .calc .pk{border-radius:6px;
  transition:transform .12s ease,filter .12s ease}
body.work .calc .pk .card{transition:box-shadow .12s ease}
body.work .calc a.pk:hover{transform:translateY(-4px)}
body.work .calc a.pk:hover .card{box-shadow:0 8px 16px rgba(15,32,62,.22)}
body.work .calc a.pk:active{transform:translateY(-1px)}
body.work .calc .pk.inhand .card{box-shadow:0 0 0 2px #2F55D6}

/* ---------- 送るボタン。**塗りつぶして、ここを押すと分かるようにする** ---------- */
body.work .calc .acts{border-top:1px solid #E8EEF6;margin-top:20px;padding-top:16px}
body.work .calc .acts .btn[type=submit]{
  background:var(--navy);border:0;border-radius:10px;color:#fff;
  font-weight:700;font-size:13.5px;padding:11px 32px;
  box-shadow:0 6px 16px rgba(30,39,97,.22);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
body.work .calc .acts .btn[type=submit]:hover{
  background:#2B3A7A;transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(30,39,97,.28)}
body.work .calc .clear{color:#5E6D83}

/* ---------- 表と注記 ----------
   補足の灰は **#5E6D83**。指示の #64748B は白いカードの上なら足りるが
   （4.76）、薄い水色の地に直に置くと 4.08 で届かない。
   同じ色みのまま、地の上でも 4.5 を超えるところまで落としてある。 */
body.work table.t{border-radius:12px;overflow:hidden}
body.work .foot,body.work .hint,body.work .cap{color:#5E6D83}
body.work .sect{color:#5E6D83;letter-spacing:.14em}
body.work .note{color:#5E6D83}

@media (max-width:760px){
  body.work .calc{padding:16px 15px}
  /* **上の枠は薄く。**スマホでは中身（卓や札）を見せたいので、
     見出しの箱に縦を使わない。説明も1行に収まる字の大きさにする。 */
  body.work .hero{padding:13px 15px}
  body.work .hero h1{font-size:20px;line-height:1.3}
  body.work .hero h1::after{margin:8px 0 0;width:34px;height:2px}
  body.work .hero .kicker{font-size:9.5px;letter-spacing:.16em}
  body.work .hero p{font-size:12px;line-height:1.6;margin-top:7px}
  body.work .hero .note{font-size:11px;margin-top:5px}
  body.work .hero .hchips{margin-top:8px;gap:4px}
  body.work .hero .hchips span{font-size:9.5px;padding:2px 6px}
}

/* もっと狭い画面。**説明を1行に収める。**全角26字なので、
   字の大きさ × 26 が「使える幅」を超えないところまで落とす。 */
@media (max-width:400px){
  body.work .hero{padding:11px 13px}
  body.work .hero h1{font-size:18px}
  body.work .hero p{font-size:11.5px;letter-spacing:-.01em}
}
@media (max-width:360px){
  body.work .hero{padding:10px 11px}
  body.work .hero p{font-size:10.5px}
}

/* ---------- テストの入口（/quiz/{種目}） ----------
   遊び方の2枚と、条件をえらぶ列。ここも枠線をやめて、影で浮かせる。 */
body.work .modes{gap:16px}
body.work .modes .m{
  border:0;border-radius:15px;background:var(--paper);padding:20px 22px;
  box-shadow:0 10px 30px rgba(15,32,62,.055),0 1px 2px rgba(15,32,62,.04);
  transition:transform .12s ease,box-shadow .12s ease}
body.work .modes .m:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(15,32,62,.10),0 1px 2px rgba(15,32,62,.05)}
body.work .modes .m b{color:#1E293B;font-size:18px}
body.work .modes .m .en{color:#5E6D83;letter-spacing:.16em}
body.work .modes .m p{color:#475569}
body.work .modes .m li{background:#EEF3FF;color:var(--navy2)}
/* **説明の行は塗らない。**札（下の丸い印）と同じ色を敷くと、
   押せるものに見える。区切りは下線だけにする。 */
body.work .modes .m ul.mlead li{
  background:none;color:#475569;border-bottom:1px solid #E6EDF8}
body.work .modes .m ul.mlead li:last-child{border-bottom:0}
/* 「そのまま始める」ボタンも塗りつぶし。 */
body.work .modes .m .go{
  border:0;border-radius:9px;padding:8px 18px;font-size:12.5px;
  box-shadow:0 5px 14px rgba(30,39,97,.20)}

/* 条件をえらぶ列。**押せる札**に見せる（丸くして、選ぶと濃紺）。 */
body.work .pickrow .pname{color:#5E6D83}
body.work .pickrow .btn,
body.work .lvrow .btn{
  border:0;border-radius:999px;background:#EDF2FB;color:#334155;
  padding:6px 14px;font-size:11.5px;
  transition:transform .1s ease,background .1s ease,box-shadow .1s ease}
body.work .pickrow .btn:hover,
body.work .lvrow .btn:hover{background:#DCE6F9;transform:translateY(-1px)}
body.work .pickrow .btn.on,
body.work .lvrow .btn.on{
  background:var(--navy);color:#fff;box-shadow:0 5px 14px rgba(30,39,97,.20)}
body.work .pickrow .btn .n{color:#5E6D83}
body.work .pickrow .btn.on .n{color:#C8CEE6}
body.work .startrow{border-top-color:#E8EEF6;padding-top:16px}
body.work .startrow .hit{color:#5E6D83}
body.work .startrow .btn.go{
  border:0;border-radius:10px;padding:11px 28px;font-size:13.5px;
  box-shadow:0 6px 16px rgba(30,39,97,.22)}

/* ---------- 盤の型のページ（/tools/board） ----------
   軸（Hi / Lo）の見出しと、持ち方 × 行き先の表。 */
body.work .axis{
  font-size:23px;font-weight:700;color:#1E293B;letter-spacing:.04em;
  gap:12px;margin:34px 0 14px}
body.work .axis i{color:#5E6D83;font-size:12px}
body.work .axis::after{background:#DCE6F2;height:1px}
body.work .kindbox .sub{
  border-top-color:#E8EEF6;color:#1E293B;font-size:12.5px}
/* 表は**縦線を引かない**。行の区切りだけで読ませる。 */
body.work .kindbox .grid th,
body.work .kindbox .grid td{border-left:0}
body.work .kindbox .grid thead th{border-bottom:1px solid #E2E9F3}
body.work .kindbox .grid tbody tr{border-top:1px solid #EEF2F8}
body.work .kindbox .grid tbody tr:nth-child(even){background:#F7FAFE}
body.work .kindbox .grid th b{color:#1E293B}
body.work .kindbox .grid th i,
body.work .kindbox .grid td i{color:#5E6D83}
body.work .twrap{border-radius:12px}