@charset "utf-8";

/* Printbench
 *
 * 見た目の方針：白い検査票。工場の検査端末を、暗い盤面ではなく
 * 「机の上に置かれた測定記録」として組む。版下工房（和紙・明朝・朱・縦の情緒）
 * とは、素材も温度も揃えない。
 *   - 冷たい白と細い罫線。面ではなく線で区切る
 *   - 数値はすべて等幅・タブラー。計器の読み取り値として並べる
 *   - 見出しは太い大文字＋字間。工業規格票の硬さ
 *   - 差し色はインクブルー1色。合否だけ緑/赤/琥珀
 *   - グラデーション・角丸・影・絵文字は使わない
 */

:root {
  color-scheme: light;

  --bg:      #ffffff;
  --panel:   #fafafa;   /* 面ではなくごく薄い地。白との差は罫線で足す */
  --panel-2: #f2f3f5;
  --line:    #e2e4e8;
  --line-2:  #c7cbd2;

  --ink:     #14161a;
  --ink-2:   #4d545e;
  --ink-3:   #858c96;

  --accent:  #1b3fa0;   /* インクブルー。判子ではなく製図ペンの色 */
  --pass:    #1c7c47;
  --warn:    #9a6200;   /* 白地では琥珀そのままだと読めないので落とす */
  --fail:    #c02218;

  --pass-bg: #eaf5ee;
  --warn-bg: #fdf4e3;
  --fail-bg: #fdeeed;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --w: 1180px;
}

* { box-sizing: border-box; }

/* hidden 属性は UA 側の display:none で効いているだけなので、
 * こちらで display を指定した要素（.readout は grid、.unlock は flex）では
 * 著者スタイルが勝って hidden が無視される。JS で hidden を立てても消えない。
 * 属性で隠すやりかたを全体で通すために、ここで一度だけ強く指定する。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 見出し部 ---------------- */

.head { border-bottom: 2px solid var(--ink); }

.head__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--w);
  margin: 0 auto;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line);
}
.mark {
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 14px;
  color: var(--accent);
}
.head__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--ink-3);
}

.head__body { max-width: var(--w); margin: 0 auto; padding: 40px 24px 34px; }

h1 {
  margin: 0 0 18px;
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.022em;
}

.lede {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.75;
}

.privacy {
  margin: 20px 0 0;
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 11px;
}

/* ---------------- 本体 ---------------- */

.main { max-width: var(--w); margin: 0 auto; padding: 30px 24px 70px; }

/* 投入口 */
.drop {
  border: 1px dashed var(--line-2);
  background: var(--panel);
  padding: 52px 24px;
  text-align: center;
  cursor: pointer;
  display: grid;
  gap: 8px;
  transition: border-color .12s linear, background .12s linear;
}
.drop:hover, .drop:focus-visible { border-color: var(--accent); background: var(--panel-2); outline: none; }
.drop.is-over { border-color: var(--accent); border-style: solid; background: var(--panel-2); }
.drop__key {
  font-weight: 800;
  letter-spacing: .2em;
  font-size: 15px;
}
.drop__hint { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }

/* 計器のような読み取り行 */
.readout {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--line-2);
  border-top: 0;
  background: var(--bg);
}
.readout > div { padding: 12px 16px; border-right: 1px solid var(--line); min-width: 0; }
.readout > div:last-child { border-right: 0; }
.readout dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-3);
  margin: 0 0 4px;
}
.readout dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* 合否の集計バー */
.tally { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 16px; }
.tally__item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  padding: 9px 15px;
}
.tally__n {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tally__l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink-3); }
.tally__item[data-s="pass"] .tally__n { color: var(--pass); }
.tally__item[data-s="warn"] .tally__n { color: var(--warn); }
.tally__item[data-s="fail"] .tally__n { color: var(--fail); }

/* ---------------- 複数まとめての一覧 ---------------- */

.batch {
  border: 1px solid var(--ink);
  border-left: 3px solid var(--accent);
  padding: 18px;
  margin: 26px 0 22px;
}
.batch__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.batch__title { margin: 0 0 6px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.batch__lede { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

/* 列が多いので、狭い画面では表だけを横に流す。本文は流さない */
.matrix__scroll { overflow-x: auto; margin-top: 16px; }

.matrix { border-collapse: collapse; width: 100%; }
.matrix th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--ink-3);
  font-weight: 400;
  text-align: center;
  padding: 0 8px 7px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.matrix th:first-child { text-align: left; padding-left: 0; }

.matrix__row { cursor: pointer; }
.matrix__row:hover td, .matrix__row:focus-visible td { background: var(--panel-2); }
.matrix__row:focus-visible { outline: 1px solid var(--accent); }

.matrix td { border-bottom: 1px solid var(--line); padding: 9px 8px; }
.matrix__name {
  font-size: 13px;
  color: var(--ink);
  padding-left: 0 !important;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matrix__cell {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  width: 1%;
}
.matrix__cell[data-s="pass"] { color: var(--line-2); }
.matrix__cell[data-s="warn"] { color: var(--warn); background: var(--warn-bg); }
.matrix__cell[data-s="fail"] { color: var(--fail); background: var(--fail-bg); }
.matrix__err { font-family: var(--mono); font-size: 11.5px; color: var(--fail); }

.matrix__legend {
  margin: 11px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.matrix__legend b { color: var(--ink-2); }

/* ---------------- 一括書き出し ---------------- */

.build {
  border: 1px solid var(--ink);
  border-left: 3px solid var(--accent);
  padding: 18px;
  margin: 0 0 22px;
}
.build__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.build__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.build__lede {
  margin: 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  padding: 11px 18px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  flex: none;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: #142f79; border-color: #142f79; }
.btn:disabled { background: var(--line-2); border-color: var(--line-2); cursor: default; }
.btn--quiet { background: var(--bg); color: var(--accent); }
.btn--quiet:hover { background: var(--panel-2); border-color: var(--accent); }

/* 解錠 */
.unlock {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.unlock label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-3);
}
.unlock input {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--ink);
  width: 21ch;
}
.unlock input:focus { outline: none; border-color: var(--accent); }
.unlock__msg { font-family: var(--mono); font-size: 11px; color: var(--fail); }

.build__out { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.build__status { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* 書き出し結果の表。数値は等幅・タブラーで縦に揃える */
.built {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.built th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ink-3);
  text-align: left;
  font-weight: 400;
  padding: 0 12px 7px 0;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.built td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}
.built td:first-child { color: var(--ink); font-weight: 600; }
.built td:nth-child(2), .built td:nth-child(4) {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.built tr[data-s="fail"] td { color: var(--fail); }
.built tr[data-s="warn"] td:last-child { color: var(--warn); }

.build__dl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.build__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--ink-3); }

/* ベンダーごとの結果 */
.cards { display: grid; gap: 12px; }

.card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  background: var(--bg);
}
.card[data-s="pass"] { border-left-color: var(--pass); }
.card[data-s="warn"] { border-left-color: var(--warn); }
.card[data-s="fail"] { border-left-color: var(--fail); }

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.card[data-s="fail"] .card__top { background: var(--fail-bg); }
.card[data-s="warn"] .card__top { background: var(--warn-bg); }
.card[data-s="pass"] .card__top { background: var(--pass-bg); }

.card__name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.card__spec { font-family: var(--mono); font-size: 11px; color: var(--ink-2); letter-spacing: .03em; }

.card__right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 4px 10px 3px;
  color: #fff;
}
.badge[data-s="pass"] { background: var(--pass); }
.badge[data-s="warn"] { background: var(--warn); }
.badge[data-s="fail"] { background: var(--fail); }

/* 出典が公式でない数値の印。判定バッジと同じ強さにはしない */
.flag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 3px 7px 2px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  background: var(--bg);
  cursor: help;
}

.card__body { padding: 4px 18px 14px; }
.card__clean {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  padding: 10px 0 4px;
  letter-spacing: .04em;
}

.finding { padding: 13px 0; border-bottom: 1px dotted var(--line-2); }
.finding:last-child { border-bottom: 0; }
.finding__head { display: flex; align-items: baseline; gap: 10px; }
.finding__tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  padding: 2px 6px 1px;
  border: 1px solid;
  flex: none;
}
.finding[data-l="fail"] .finding__tag { color: var(--fail); border-color: var(--fail); }
.finding[data-l="warn"] .finding__tag { color: var(--warn); border-color: var(--warn); }
.finding__title { font-weight: 600; font-size: 14px; line-height: 1.5; }
.finding__detail { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.finding__fix {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 11px;
}
.finding__fix b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--accent);
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
}

/* ベンダー自身が書いている注意点 */
.notes {
  margin: 12px 0 2px;
  padding: 11px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.notes li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.notes li + li { margin-top: 5px; }
.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--line-2);
}

/* まだ何も入れていないときの説明 */
.empty { margin-top: 44px; border-top: 1px solid var(--line-2); padding-top: 30px; }
.empty h2 {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink-3);
  font-family: var(--mono);
}
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.checks li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.checks li:last-child { border-bottom: 0; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.checks b { color: var(--ink); font-weight: 700; }

/* ---------------- 仕様比較ページ ---------------- */

.specs { border-collapse: collapse; width: 100%; font-size: 13px; }
.specs th[scope="col"] {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ink-3);
  font-weight: 400;
  text-align: left;
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.specs th[scope="row"] {
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 14px 13px 0;
  vertical-align: top;
  white-space: nowrap;
}
.specs td {
  padding: 13px 14px 13px 0;
  vertical-align: top;
  color: var(--ink-2);
  line-height: 1.6;
}
.specs tbody tr { border-bottom: 1px solid var(--line); }
.specs b { color: var(--ink); }
.specs .flag { display: inline-block; margin-top: 5px; }

.vendor { padding: 20px 0; border-bottom: 1px solid var(--line); }
.vendor:last-child { border-bottom: 0; }
.vendor h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.vendor .caution {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  border-left: 2px solid var(--warn);
  padding-left: 11px;
}
.vendor .notes { margin: 0; }
.vendor .sources {
  margin: 11px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.vendor .sources a { color: var(--ink-3); }

a { color: var(--accent); }
a:hover { color: #142f79; }
.mark { text-decoration: none; }

/* ---------------- 脚 ---------------- */

.foot { border-top: 1px solid var(--ink); }
.foot p {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-3);
  line-height: 1.8;
}
.foot p:first-child { padding-top: 18px; }
.foot p:last-child { padding-bottom: 20px; }
.foot__note:empty { display: none; }

/* ---------------- 狭い画面 ---------------- */

@media (max-width: 640px) {
  .head__body { padding: 30px 20px 26px; }
  .main { padding: 24px 20px 50px; }
  .head__bar { padding: 12px 20px; }
  .foot p { padding-left: 20px; padding-right: 20px; }
  .readout > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .card__top { align-items: flex-start; }
}