/* ---- 画面 ---- */
:root { --line: #c9ccd3; --ink: #1c1e22; --muted: #666; --red: #c62828; --ok: #2e7d32; --accent: #1a5fb4; --bg: #f6f7f9; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Yu Gothic UI", "Meiryo", "Hiragino Sans", sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; }
.top { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.top .sp { flex: 1; }
.top .trial { font-size: 12px; color: #8a5a00; background: #fff4d6; padding: 2px 6px; border-radius: 4px; }
main { padding: 12px 14px 60px; max-width: 1400px; margin: 0 auto; }
h2 { margin: 6px 0 10px; } h3 { margin: 18px 0 6px; font-size: 16px; }
a { color: var(--accent); }
.btn { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; font: inherit; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.small { padding: 3px 8px; font-size: 13px; }
.btn:disabled { opacity: .5; }
.bar { display: flex; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; align-items: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); text-decoration: none; }
.card .k { font-weight: bold; font-size: 18px; } .card .meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.tag { font-size: 11px; background: #e8eefc; color: var(--accent); padding: 1px 5px; border-radius: 3px; }
.ok { color: var(--ok); } .red, li.red { color: var(--red); } li.info { color: var(--muted); }
.note { color: var(--muted); font-size: 13px; }
input, select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; max-width: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
.grid2 label, .grid3 label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 2px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; margin: 8px 0; }
.sheethead { display: flex; flex-wrap: wrap; gap: 8px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.sheethead > div { display: flex; flex-direction: column; } .lbl { font-size: 12px; color: var(--muted); } .big { font-size: 20px; }
details.press, details.warn { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
details.warn { border-color: #f0b3b3; }
details.press li.old { opacity: .55; }
.procs { border-collapse: collapse; background: #fff; } .procs td, .procs th { border: 1px solid var(--line); padding: 3px 5px; font-size: 13px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0 6px; border-bottom: 2px solid var(--line); }
.tabs a { padding: 7px 12px; border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; background: #eef0f3; text-decoration: none; color: var(--ink); }
.tabs a.on { background: #fff; font-weight: bold; border-color: var(--accent); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid1, .grid2t, .itemsed { border-collapse: collapse; background: #fff; width: 100%; }
.grid1 td, .grid1 th, .grid2t td, .itemsed td, .itemsed th { border: 1px solid var(--line); padding: 4px 6px; vertical-align: middle; }
.grid1 th { background: #eef0f3; font-size: 13px; position: sticky; top: 46px; }
.grid1 td.grp { font-weight: bold; white-space: nowrap; font-size: 13px; }
.grid1 td.txt, .grid2t td.txt { min-width: 240px; }
.grid1 td.refs { min-width: 120px; }
button.mk { width: 46px; height: 42px; font-size: 22px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
button.mk.m0 { color: var(--ok); } button.mk.m1 { color: var(--muted); } button.mk.m2 { color: #fff; background: var(--red); } button.mk.m3 { background: #fff4d6; }
i.dot { color: var(--red); font-size: 10px; font-style: normal; }
.seg { display: inline-flex; } .seg button { width: 42px; height: 38px; font-size: 18px; border: 1px solid var(--line); background: #fff; cursor: pointer; margin-left: -1px; }
.seg button:first-child { border-radius: 6px 0 0 6px; } .seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on.m0 { background: var(--ok); color: #fff; } .seg button.on.m1 { background: #777; color: #fff; } .seg button.on.m2 { background: var(--red); color: #fff; } .seg button.on.m3 { background: #f2c94c; }
.grid2t tr.sechead td { background: #eef0f3; font-weight: bold; }
.grid2t td.sub { font-size: 13px; color: var(--muted); white-space: nowrap; } .grid2t td.no { text-align: center; width: 30px; }
.rateline { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.chip { display: inline-block; font-size: 12px; padding: 1px 6px; margin: 1px 2px; border: 1px solid #b7c7ea; border-radius: 10px; background: #f1f5fd; text-decoration: none; white-space: nowrap; }
.chip.up { border-color: #e6a23c; background: #fff4e0; } .chip em { color: #b35c00; font-style: normal; font-size: 11px; }
.chip.miss { color: var(--muted); border-style: dashed; background: #fafafa; }
.aprs { display: flex; gap: 20px; flex-wrap: wrap; }
.pdfbar { position: sticky; bottom: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pdfbar .fname { font-family: Consolas, monospace; font-size: 13px; }
.stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border: 2px solid #d32f2f; border-radius: 50%; color: #d32f2f; line-height: 1.1; }
.stamp .sd { font-size: 10px; } .stamp .sn { font-size: 16px; font-weight: bold; }
.stamp.sm { width: 54px; height: 54px; vertical-align: middle; } .stamp.sm .sn { font-size: 14px; }
/* 日越併記 */
.ja { display: block; } .vi { display: block; color: #0b6b4f; font-size: .88em; font-family: "Segoe UI", Arial, sans-serif; }
ruby rt { font-size: .55em; color: #555; }
#print { display: none; }

/* ---- 紙面（印刷）: ① A3 横・② A4 縦。名前つきの頁で 1 本の PDF に混ぜる ---- */
@page form1 { size: A3 landscape; margin: 9mm 12mm; }
@page form2 { size: A4 portrait; margin: 8mm 10mm; }
@media print {
  body { background: #fff; font-size: 10pt; }
  .top, main { display: none !important; }
  #print { display: block !important; }
}
body.printonly .top, body.printonly main { display: none; }
body.printonly #print { display: block; background: #fff; }
.pg1 { page: form1; break-after: page; font-family: "Yu Gothic", "Meiryo", sans-serif; }
.pg2 { page: form2; break-after: page; font-family: "MS PGothic", "Yu Gothic", sans-serif; }
.pg1:last-child, .pg2:last-child { break-after: auto; }
@media screen { body.printonly #print section { background: #fff; margin: 10px auto; padding: 8mm; box-shadow: 0 0 6px #aaa; }
  body.printonly .pg1 { width: 420mm; } body.printonly .pg2 { width: 210mm; } }
.pg1 table, .pg2 table { border-collapse: collapse; }
.pg1 td, .pg1 th, .pg2 td, .pg2 th { border: 1px solid #000; }
/* ① */
.f1top { display: grid; grid-template-columns: 60mm 1fr 50mm 52mm; align-items: start; margin-bottom: 1mm; }
.f1top h1 { text-align: center; font-size: 20pt; margin: 2mm 0; }
.f1top .upd { font-size: 9pt; padding-top: 6mm; }
.kbox { width: 52mm; } .kbox th { font-size: 10pt; font-weight: normal; } .kbox td { height: 9mm; font-size: 14pt; text-align: center; }
.stamps { display: flex; } .stampbox { width: 26mm; border: 1px solid #000; text-align: center; } .stamplabel { border-bottom: 1px solid #000; font-size: 9pt; }
.stampbox .stamp { margin: 1mm auto; width: 17mm; height: 17mm; } .stampempty { height: 19mm; }
.stampbox .stamp .sd { font-size: 7pt; } .stampbox .stamp .sn { font-size: 11pt; }
table.carrow { width: 132mm; margin-bottom: 1mm; } table.carrow th { width: 18mm; font-weight: normal; } table.carrow td { height: 9mm; font-size: 13pt; padding: 0 2mm; }
table.f1.body { width: 100%; table-layout: fixed; font-size: 8.6pt; }
.c-grp { width: 19mm; } .c-ja { width: 92mm; } .c-vi { width: 95mm; } .c-fis { width: 19mm; } .c-lab { width: 20mm; } .c-st { width: 22mm; }
.pg1 th.h { font-size: 11pt; } .pg1 th.small, .pg1 td.small { font-size: 7.5pt; } .pg1 th.lab { font-size: 7pt; font-weight: normal; }
.pg1 td.st { text-align: center; height: 5.8mm; }
.pg1 td.grp { text-align: center; } .pg1 td.cja, .pg1 td.cvi { padding: 0 1.2mm; height: 5.9mm; } .pg1 td.cvi { font-size: 7.6pt; font-family: "Segoe UI", Arial, sans-serif; }
.pg1 td.fis { text-align: center; font-size: 6.5pt; } .pg1 td.mk { text-align: center; font-size: 12pt; } td.ng { color: #c00; font-weight: bold; }
/* ② */
.f2top { display: grid; grid-template-columns: 1fr 22mm 52mm; align-items: center; border: 1px solid #000; border-bottom: none; padding: 1mm 2mm; }
.f2top h2 { font-size: 15pt; margin: 0; } .f2top .kind { font-size: 12pt; } .f2top .mt { font-size: 8pt; text-align: center; }
.circ { border: 1px solid #000; border-radius: 50%; padding: 0 1mm; }
.tiny { font-size: 6.5pt; }
table.f2h { width: 100%; table-layout: fixed; font-size: 8.5pt; } .f2h th { font-weight: normal; font-size: 8pt; } .f2h td { height: 9mm; text-align: center; font-size: 10pt; } .f2h td.small { font-size: 7pt; }
.f2cols, .f2bottom { display: grid; grid-template-columns: 1fr 1fr; }
table.f2 { width: 100%; font-size: 7.8pt; table-layout: fixed; } .f2 th { font-weight: normal; font-size: 8pt; }
.f2 td { height: 4.25mm; padding: 0 1mm; } .f2 td.sec { width: 7mm; text-align: center; font-size: 7pt; } .f2 td.sec b { font-size: 10pt; }
.f2 td.sub { width: 23mm; text-align: center; font-size: 7.5pt; } .f2 td.no { width: 5mm; text-align: center; } .f2 td.jd { width: 12mm; text-align: center; font-size: 10pt; }
.f2 th:nth-child(1) { width: 30mm; } .f2 th:nth-child(2) { width: 5mm; } .f2 th:nth-child(4) { width: 12mm; }
td.slash { background: linear-gradient(to top right, transparent calc(50% - .5px), #000 50%, transparent calc(50% + .5px)); }
.rcol { display: flex; flex-direction: column; }
table.rate { width: 100%; font-size: 8pt; } .rate td { height: 12mm; } .rate .rl { width: 30mm; text-align: center; } .rate .rv { font-size: 13pt; text-align: center; } .rate .rp { width: 14mm; text-align: right; } .rate .rs { width: 18mm; text-align: center; font-size: 10pt; }
.chk { text-align: center; font-size: 12pt; padding-top: 6mm; }
table.trial td { height: 8mm; } table.trial td.num { text-align: right; font-size: 11pt; width: 30mm; }
.maker { display: flex; justify-content: center; gap: 12mm; align-items: center; margin-top: 6mm; }
.maker table { width: 62mm; text-align: center; } .maker td { height: 12mm; font-size: 11pt; }
.mstamp { width: 48mm; height: 26mm; border: 1px solid #000; border-radius: 6mm; text-align: center; }
.mstamp .stamp { width: 19mm; height: 19mm; margin-top: 1mm; } .mstamp .stamp .sd { font-size: 7pt; } .mstamp .stamp .sn { font-size: 11pt; }
.foot { display: flex; justify-content: space-between; font-size: 8pt; margin-top: 3mm; }
@media (max-width: 700px) {
  main { padding: 8px; } .grid1 th { top: 88px; } .grid1 td.txt, .grid2t td.txt { min-width: 200px; }
  button.mk { width: 40px; height: 40px; } .seg button { width: 36px; height: 36px; font-size: 16px; }
  .pdfbar { position: static; }
}
.btn.primary .vi { color: #dff3ea; }
/* 「チェックしない（－）」の候補（工程の種類から自動で入れた値。押すと確かめた値になる） */
button.mk.cand { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #eef0f3 4px, #eef0f3 8px); color: #999; border-style: dashed; }
.seg.cand button.on { opacity: .55; outline: 1px dashed #777; }

/* DB につないだ画面（2026-11-15）: ログイン・読み込み中・隠す */
[hidden] { display: none !important; }
.login { max-width: 560px; margin: 32px auto; padding: 0 16px; }
.login input { font-size: 16px; padding: 6px 8px; min-width: 240px; }
.loading { position: fixed; right: 14px; bottom: 14px; z-index: 20; background: #1f2937; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 13px; }
#who select { max-width: 12em; }
/* 日越の国旗のボタン（ゼロエンドと同じ）: 日本の旗だけ＝日本語・ベトナムの旗も＝日越 */
#lang { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
#lang .flag { width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(128, 128, 128, .6); }
#lang:not(.vi-on) .flag-vn { display: none; }