/* 道具の一覧「絵の札」の色・厚み・絵の線（社長の決定 追記58）。extra.css の後に読む（一覧のページだけ）。
   正: 08_design/deliverables/assets/2026-09-27_tool-cards/pic.css（デザイン大臣の確定値をそのまま写した）、
       見た目の規則 第3版 1-3章（厚み）・1-4章（絵） */

:root {
  /* 厚み（押せる物の下の、ぼかしの無い単色の縁）。見た目の規則 1-3章 */
  --edge-card:  #D0D5CE;  /* 紙の白のタイルの厚み（紙の白80%＋墨みどり20%） */
  --edge-field: #BAC7C1;  /* 薄い卓色のタイルの厚み（薄い卓色78%＋墨みどり22%） */
  --edge-w: 4px;          /* 厚み。密な格子（タギロン）は 3px */

  /* 部品の色の暗い版（絵の中の立体の側面・くぼみ、タギロンのタイルの厚みだけに使う） */
  --part-red-edge:    #902B29;
  --part-blue-edge:   #1A4E82;
  --part-yellow-edge: #A88A15;
  --part-green-edge:  #266730;

  /* 絵の札の地（夜）と、絵の線 */
  --pic-night: #12332A;   /* 明るい表示では墨みどりの面 */
  --pic-line:  #12332A;   /* 絵の輪郭（明るい・暗いとも墨みどり） */

  --press-in: 60ms;
  --press-out: 180ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --edge-card:  #0B1F19;  /* 墨みどり60%＋黒。暗い表示の厚みは2つとも同じ色 */
    --edge-field: #0B1F19;
    --pic-night:  #0B1F19;  /* 夜の札の地も同じ色（新しい色を増やさない） */
    --part-red-edge:   #AF7168;
    --part-blue-edge:  #668DBA;
    --part-green-edge: #609C75;
  }
}
:root[data-theme="dark"] {
  --edge-card: #0B1F19; --edge-field: #0B1F19; --pic-night: #0B1F19;
  --part-red-edge: #AF7168; --part-blue-edge: #668DBA; --part-green-edge: #609C75;
}

/* ---- 押すと沈む厚み（押せる物だけ） ---- */
.press {
  box-shadow: 0 var(--edge-w) 0 var(--edge, var(--edge-card)); /* ぼかし0・広がり0。影ではなく「側面」 */
  transition: transform var(--press-out) var(--ease-out), box-shadow var(--press-out) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.press:active, .press.is-pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge, var(--edge-card));
  transition-duration: var(--press-in);
}
@media (prefers-reduced-motion: reduce) {
  .press, .press:active, .press.is-pressed { transition: none; transform: none; }
  .press:active, .press.is-pressed { box-shadow: 0 var(--edge-w) 0 var(--edge, var(--edge-card)); filter: brightness(.94); }
}

/* ---- 絵の札の地（道具ごと） ---- */
.bg-mint  { --bg: var(--mint); }
.bg-felt  { --bg: var(--felt); }
.bg-night { --bg: var(--pic-night); }
.bg-field { --bg: var(--c-field); }
.bg-red   { --bg: var(--part-red-tint); }
.bg-blue  { --bg: var(--part-blue-tint); }
.bg-yel   { --bg: var(--part-yellow-tint); }
.bg-grn   { --bg: var(--part-green-tint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-mint { --bg: var(--part-green-tint); } }
:root[data-theme="dark"] .bg-mint { --bg: var(--part-green-tint); }

/* ---- 絵の線と面（HTMLに埋め込んだ9枚の絵で共通。各SVGにあった同じ<style>を1か所にまとめた） ---- */
.lp-l{stroke:var(--pic-line,#12332A);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.lp-t{stroke-width:2}
.lp-no{fill:none}
.lp-ink{fill:var(--ink,#12332A)}
.lp-paper{fill:var(--paper,#FFFDF7)}
.lp-mint{fill:var(--mint,#BFE3D0)}
.lp-felt{fill:var(--felt,#1F6B53)}.lp-felt-s{stroke:var(--felt,#1F6B53);stroke-width:2.5;stroke-linejoin:round}
.lp-red{fill:var(--part-red,#C62828)}.lp-red-e{fill:var(--part-red-edge,#902B29)}
.lp-blue{fill:var(--part-blue,#1E5AA8)}.lp-blue-e{fill:var(--part-blue-edge,#1A4E82)}
.lp-yel{fill:var(--part-yellow,#E8B00C)}.lp-yel-e{fill:var(--part-yellow-edge,#A88A15)}
.lp-grn{fill:var(--part-green,#2E7D32)}
.lp-white{fill:var(--part-white,#E4E1D6)}
.lp-tg5{fill:var(--tg-5-green,#81C995)}
.lp-num{font-family:"Louise Num","Dela Gothic One",sans-serif;text-anchor:middle}
.lp-on-red{fill:var(--on-part-red,#FFFDF7)}.lp-on-blue{fill:var(--on-part-blue,#FFFDF7)}.lp-on-ink{fill:var(--ink,#12332A)}