/* 作り方タイプ診断 第3版の見た目（2026-09-26 公開用・shindan/seikaku.html だけが読む）
   中身・文・動きの正本は mockup/shindan_v3_見本.html。

   見た目：成形色（ランナーの灰）＋カッティングマットの方眼・角は四角・文字は 4＋BIZ（決定ログ 2026-09-25 夜）。
   明るい表示・暗い表示の切り替えはしない。いつもこの1つで出す（ユーザー「ライトモードとかダークモードの切り替え対応しなくていいよ」・53ec524）。
   当て方は総指令室から渡された完成見本（見本に上から当てた <style>）に合わせた。

   🔴 色・角・書体は、下の :root の1ブロックからだけ引く。ここより下に #色 や rgb() を直に書かない。
      見た目を変えるときは、この1ブロックと、seikaku.html の <head> の「書体の読み込み」の1行を差し替える。
      確かめ方：:root の外に #…… が無いこと（判子の円 50% は角でなく判子の形なので --r を使わない） */

:root{
  /* 地と面（成形色） */
  --bg:#c9ccc6; --panel:#e3e5df; --panel-2:#d3d6cf;
  /* 方眼（線の色と、升目の大きさ） */
  --grid:rgba(27,30,28,.07); --grid-size:16px;
  /* 硬い影 */
  --shadow:#8d9189;
  /* 文字（--dim は地 #c9ccc6 の上で 4.6:1） */
  --ink:#1b1e1c; --dim:#50554f;
  /* 線（--edge＝面の区切り／--edge-hi＝面の外枠／--edge-act＝押せる物の輪郭。押せる物は地との差 3:1 以上＝地の上で 3.7:1） */
  --edge:#9ea39b; --edge-hi:#7f857c; --edge-act:#5f655d;
  /* 操作（主ボタン・選んだ所・針・今の問いの目盛り）。上の字は白（10.4:1） */
  --act:#2a3f6b; --on-act:#ffffff;
  /* 強調（ぶつかりやすい相手の枠）。完成見本では操作と同じ紺。限定・強調の赤は判子の赤で使う */
  --accent:#2a3f6b;
  /* 真鍮（四隅の印・済んだ目盛り・シークレット）。金色の小さい字（「あなたの答え」「タイプ番号」）が
     地と 4.5:1 を切っていたので濃くした（2026-09-26 点検で直した。#8a6d1f→#6a4f10。地#e3e5dfで6.04:1・地#c9ccc6で4.72:1）。
     帯の上の字は白（7.67:1） */
  --brass:#6a4f10; --on-brass:#ffffff;
  /* 判子（機体の色）。--stamp-*-fill は円の中の地。白は濃い円の上に白で押す（明るい面に白い線では灰色に見えた） */
  --stamp-red:#c2352b; --stamp-blue:#245e9e;
  --stamp-white:#ffffff; --stamp-white-fill:#3d423e;
  --stamp-black:#1b1e1c; --stamp-black-fill:var(--panel);
  /* おすすめキットの紙の表紙 */
  --kit-paper:#edede8; --kit-ink:#1b1f24; --kit-dim:#5c636b; --kit-kind:#6b6358; --kit-spine:#333a42;
  --kit-btn:#1b1f24; --kit-on-btn:#edede8; --kit-edge:#6b7178;
  --gb:#333a42; --gb-mg:#27364f; --gb-hg:#27412f; --gb-rg:#3a2b4c; --gb-pg:#47391f; --gb-eg:#1e4247; --on-gb:#edede8;
  /* 角（四角。判子は除く） */
  --r:0;
  /* 書体：本文 BIZ UDPゴシック／数字 B612 Mono／英字の札 Chakra Petch（日本語は本文の字に落ちる）／一行と判子は明朝 */
  --font-body:"BIZ UDPGothic",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --font-num:"B612 Mono","BIZ UDPGothic",ui-monospace,Menlo,Consolas,monospace;
  --font-mono:"B612 Mono","BIZ UDPGothic",ui-monospace,Menlo,Consolas,monospace;
  --font-tag:"Chakra Petch","BIZ UDPGothic",sans-serif;
  --font-mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  color-scheme:light}

/* ==== ここから下は変数だけを使う ==== */
*{box-sizing:border-box}
body{margin:0;color:var(--ink);line-height:1.7;background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);font-family:var(--font-body)}
a{color:inherit}
button,a{border-radius:var(--r)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.top{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--edge)}
/* トップへのリンクの押せる高さを帯いっぱい（48px）にする。align-items:center のままだと文字の高さ分しか押せなかった（点検の指摘） */
.top a{display:flex;align-items:center;height:100%;font-weight:800;letter-spacing:.08em;text-decoration:none}
.top span{font:700 11px/1 var(--font-tag);letter-spacing:.08em;color:var(--dim)}
main{max-width:560px;margin:0 auto;padding:20px 16px 40px}
.lbl{font:700 11px/1 var(--font-tag);letter-spacing:.08em;color:var(--dim)}
.sec{margin:30px 0 10px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--edge)}
.go{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 18px;margin:16px 0 0;
  background:var(--act);color:var(--on-act);border:0;box-shadow:4px 4px 0 var(--shadow);
  font:inherit;font-size:14px;font-weight:800;letter-spacing:.06em;text-decoration:none;cursor:pointer}
.go i{font-style:normal;font-family:var(--font-mono)}
.sub{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;margin:10px 0 0;padding:0 16px;
  background:transparent;color:var(--ink);border:1px solid var(--edge-act);
  font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}

/* ---- 四隅の印（計器の枠） ---- */
.form,.dossier{position:relative;background:var(--panel);border:1px solid var(--edge-hi);box-shadow:4px 4px 0 var(--shadow);border-radius:var(--r)}
.crn{position:absolute;width:10px;height:10px;border-color:var(--brass);border-style:solid;pointer-events:none}
.crn.tl{left:-5px;top:-5px;border-width:2px 0 0 2px}.crn.tr{right:-5px;top:-5px;border-width:2px 2px 0 0}
.crn.bl{left:-5px;bottom:-5px;border-width:0 0 2px 2px}.crn.br{right:-5px;bottom:-5px;border-width:0 2px 2px 0}

/* ---- 入口 ---- */
.formbody{padding:18px 14px 16px}
.form h1{font-size:30px;line-height:1.2;margin:4px 0 14px;letter-spacing:.01em;font-weight:900}
.lead{font-size:14px;color:var(--ink);margin:0}
.spec{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0;border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
.spec div{padding:9px 10px;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.spec dt{font:700 11px/1 var(--font-tag);letter-spacing:.08em;color:var(--dim)}
.spec dd{margin:6px 0 0;font:800 20px/1 var(--font-num)}
.spec dd small{font-size:11px;font-weight:700;color:var(--dim);margin-left:2px}
.tiny{font-size:12px;color:var(--dim);margin:10px 0 0}

/* ---- 設問の見出し・進み具合 ---- */
.qhead{display:flex;align-items:flex-end;gap:10px}
.qno{font:800 44px/0.9 var(--font-num);letter-spacing:-.02em}
.qno small{font-size:14px;color:var(--dim);margin-right:4px;letter-spacing:.1em}
.qof{font:700 12px/1 var(--font-num);color:var(--dim);padding-bottom:4px}
.ticks{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin:12px 0 16px}
.ticks i{height:6px;background:var(--edge)}
.ticks i.done{background:var(--brass)}
.ticks i.now{background:var(--accent)}

/* ---- スワイプのカード（払って答える＝押せる物なので、枠は --edge-act） ---- */
.swhint{font:700 12px/1 var(--font-body);letter-spacing:.06em;color:var(--dim);margin:0 0 8px;text-align:center}
.swipewrap{position:relative;height:260px;margin:0 0 14px}
.scard{position:absolute;left:0;top:0;width:100%;min-height:260px;padding:20px 16px;
  background:var(--panel);border:1px solid var(--edge-act);box-shadow:4px 4px 0 var(--shadow);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  touch-action:none;user-select:none;-webkit-user-select:none;z-index:2;cursor:grab}
.scard.dragging{cursor:grabbing}
.scard .q{margin:0;font-size:20px;font-weight:800;line-height:1.5;text-align:center;word-break:keep-all}
.scard .q .nowrap{white-space:nowrap}
.scard .qsub{margin:8px 0 0;font-size:12px;color:var(--dim);text-align:center;max-width:90%}
/* 払っている間に出る答えの札。塗った札にして、細い字でも読める差にする */
.slabel{position:absolute;left:50%;top:10px;transform:translateX(-50%);min-width:64px;text-align:center;
  padding:5px 10px;background:var(--act);color:var(--on-act);font:800 12px/1 var(--font-body);border-radius:var(--r);
  opacity:0;pointer-events:none}
/* 本番の1問目だけ、表示から少し置いてカードが左右に揺れる（斜めを残す＝B案の伝え方。デザインマスター案の次善策） */
.wob{animation:wob .9s ease-in-out 1}
@keyframes wob{0%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(10px,0) rotate(2deg)}55%{transform:translate(-9px,0) rotate(-2deg)}80%{transform:translate(3px,0) rotate(0deg)}100%{transform:translate(0,0) rotate(0deg)}}

/* ---- 扇の計器：右・右下・左下・左（4段階）／左・下・右（3択）。押しても払っても答えられる ---- */
.fanbox{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel-2);border:1px solid var(--edge);padding:6px 0 8px;margin:0 0 10px;border-radius:var(--r)}
.fan{width:100%;max-width:340px;height:auto;display:block}
.fan path.sec{fill:var(--panel);stroke:var(--edge-act);stroke-width:1;cursor:pointer;outline:none}
.fan path.sec.on{fill:var(--act)}
/* キーボードで来たときだけ、扇形の縁を太くして示す（四角い枠は扇に合わないので出さない） */
.fan path.sec:focus-visible{stroke:var(--ink);stroke-width:3}
.fan text{fill:var(--ink);font-size:11px;font-weight:700;font-family:var(--font-body);pointer-events:none}
.fan text.on{fill:var(--on-act)}
/* 針と軸は押せない（押すと下の扇形に届かず、答えにならなかった。見本にもあった不具合） */
.fan .nd{stroke:var(--act);stroke-width:3;stroke-linecap:round;pointer-events:none}
.fan .hub{fill:var(--act);pointer-events:none}
.fanside{display:flex;justify-content:space-between;width:100%;max-width:340px;padding:0 8px;font:700 12px/1 var(--font-body);color:var(--dim)}
.abtns{position:sticky;bottom:0;left:0;right:0;background:var(--bg);padding:10px 0 4px;margin:0 -16px;border-top:1px solid var(--edge)}
.back{background:none;border:0;color:var(--dim);font:inherit;font-size:14px;min-height:44px;margin:0 16px;padding:0 4px;cursor:pointer}

/* ---- 結果：判定書 ---- */
.secret{border:2px solid var(--brass)!important;box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px var(--brass),4px 4px 0 var(--shadow)!important}
.secretbar{display:flex;justify-content:space-between;padding:8px 14px;background:var(--brass);color:var(--on-brass);font:800 11px/1 var(--font-tag);letter-spacing:.18em}
.dbar{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--edge)}
.dbar .code{font:800 12px/1 var(--font-tag);letter-spacing:.16em;color:var(--ink)}
.dbody{position:relative;padding:18px 14px 16px}
.shared{font-size:12px;color:var(--dim);margin:0 0 8px}
.dossier h1{font-size:30px;line-height:1.3;margin:8px 84px 16px 0;letter-spacing:.01em;font-weight:900;word-break:keep-all}
/* 判子：機体の色で押す。--sc＝線と字の色／--sf＝円の中の地。判子の円（50%）は角ではないので --r を使わない */
.stamp{--sc:var(--stamp-red);--sf:var(--panel);
  position:absolute;right:12px;top:14px;width:72px;height:72px;border-radius:50%;background:var(--sf);
  border:2px solid var(--sc);box-shadow:inset 0 0 0 3px var(--sf),inset 0 0 0 4px var(--sc);color:var(--sc);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg)}
.stamp b{font:800 20px/1 var(--font-mincho);letter-spacing:.06em}
.stamp small{font:700 11px/1 var(--font-tag);letter-spacing:.12em;margin-top:5px}
.stamp small:empty{display:none}
.stamp.blue{--sc:var(--stamp-blue)}
.stamp.white{--sc:var(--stamp-white);--sf:var(--stamp-white-fill)}
.stamp.black{--sc:var(--stamp-black);--sf:var(--stamp-black-fill)}
.stamp.gold{--sc:var(--brass);--sf:var(--panel)}
.axes{width:100%;border-collapse:collapse;table-layout:fixed}
.axes th,.axes td{border:1px solid var(--edge);padding:7px 6px;text-align:left;vertical-align:top}
.axes th{font:700 12px/1.2 var(--font-body);letter-spacing:.08em;color:var(--dim)}
.axes td{font-size:14px;font-weight:800}
.axes td b{font:800 14px/1 var(--font-num);margin-left:2px}
.mind{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--edge)}
.mind p{margin:8px 0 0;font:700 20px/1.65 var(--font-mincho);text-indent:-.5em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.tags span{font-size:12px;padding:3px 8px;border:1px solid var(--edge-hi)}
.reasons{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.reasons li{font-size:14px;line-height:1.6;padding:8px 10px;background:var(--panel-2);border:1px solid var(--edge)}
.fine{font-size:11px;color:var(--dim);margin:26px 0 0;line-height:1.7}
.note{font-size:12px;color:var(--dim);margin:10px 0 0}

/* ---- 相性・好みの結果 ---- */
.aisho{display:grid;gap:10px}
.aisho .card{background:var(--panel);border:1px solid var(--edge-hi);box-shadow:4px 4px 0 var(--shadow);padding:12px 14px;border-radius:var(--r)}
.aisho .card b{display:block;font-size:14px;font-weight:800}
.aisho .card p{margin:6px 0 0;font-size:12px;color:var(--ink)}
.aisho.bad .card{border-color:var(--accent)}
.frame-mini{background:var(--panel);border:1px solid var(--edge-hi);box-shadow:4px 4px 0 var(--shadow);padding:14px;border-radius:var(--r)}
.frame-mini b{display:block;font-size:17px;font-weight:900}
.frame-mini p{margin:8px 0 0;font:700 14px/1.6 var(--font-mincho)}

/* ---- 記事への案内（WITH_DOCK のときだけ出る） ---- */
.tech{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tech a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:10px 14px;background:var(--panel);border:1px solid var(--edge-act);
  box-shadow:4px 4px 0 var(--shadow);text-decoration:none}
.tech a span{font:700 11px/1 var(--font-tag);letter-spacing:.14em;color:var(--brass)}
.tech a b{flex:1;font-size:14px}
.tech a i{font-style:normal;font-size:12px;font-weight:700;color:var(--dim)}

/* ---- おすすめキット：紙の表紙（部品は common.js の machineCard・secretCard） ---- */
.kits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kcard{position:relative;background:var(--kit-paper);color:var(--kit-ink);padding:12px 12px 12px 22px;box-shadow:4px 4px 0 var(--shadow);border-radius:var(--r)}
.kcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--kit-spine)}
.kcard .kind{font:700 11px/1 var(--font-tag);letter-spacing:.12em;color:var(--kit-kind)}
.kcard .kn{font-size:17px;font-weight:900;line-height:1.35;margin-top:6px}
.kcard .ks{font-size:12px;color:var(--kit-dim);margin-top:2px}
.kcard .km{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;font-size:11px;color:var(--kit-dim);align-items:center}
.kcard .acts{display:grid;grid-template-columns:1.4fr 1fr;gap:6px;margin-top:12px}
.kcard .acts a{min-height:44px;display:flex;align-items:center;justify-content:flex-start;padding:0 12px;font-size:14px;font-weight:800;text-decoration:none}
.kcard .plan{background:var(--kit-btn);color:var(--kit-on-btn)}
.kcard .amz{border:1px solid var(--kit-edge);color:var(--kit-ink)}
.kwait{font-size:12px;color:var(--dim)}
.gb{display:inline-flex;height:18px;overflow:hidden;font-size:11px;font-weight:800;line-height:18px}
.gb b{padding:0 5px;color:var(--on-gb);background:var(--gb);max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-mg b{background:var(--gb-mg)}.gb-hg b{background:var(--gb-hg)}.gb-rg b{background:var(--gb-rg)}.gb-pg b{background:var(--gb-pg)}.gb-eg b{background:var(--gb-eg)}

@media (prefers-reduced-motion: reduce){ .scard{transition:none!important} .wob{animation:none} }
