/* 福牛 FukuUshi — 高齢の方が読める・押せる を最優先 */
/* テーマカラー＝黄色（金色）。黄色の上の文字は読みやすいよう濃い茶色にする */
:root {
  --brand: #F5B300;        /* 主役の黄色（ヘッダー・ボタン・番号の丸） */
  --brand-dark: #C98F00;   /* 影・枠・押した時 */
  --on-brand: #3D2E00;     /* 黄色の上に乗せる文字色（濃い茶） */
  --brand-ink: #8A6100;    /* 白背景の上のアクセント文字（濃い金） */
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 20px; }
body {
  font-family: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  background: #F5F2EA;
  color: #1B1B1B;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; }

/* ===== 画面骨格 ===== */
#app { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; padding-bottom: 96px; }

header.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; gap: 10px;
  /* iPhoneのホーム画面起動でステータスバーに潜らないよう上に余白 */
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
header.bar .applogo {
  width: 36px; height: 36px; flex-shrink: 0;
  object-fit: contain; background: transparent;
}
header.bar .title { font-size: 1.15rem; font-weight: 900; flex: 1; }
header.bar .who { font-size: .75rem; opacity: .9; }
header.bar button {
  background: rgba(0,0,0,.10); color: var(--on-brand); border: 1px solid rgba(61,46,0,.35);
  border-radius: 10px; padding: 8px 14px; font-size: .95rem; font-weight: 800;
  min-height: 48px;
}
header.bar button:disabled { opacity: .4; }

main.body { flex: 1; padding: 14px 14px 8px; }

/* 下のタブ */
nav.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: #fff; border-top: 2px solid #D8D2C4;
  max-width: 640px; margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
nav.tabs button {
  flex: 1; background: none; border: none; padding: 8px 0 10px;
  font-size: .85rem; font-weight: 800; color: #6B6455;
}
nav.tabs button .ic { display: block; font-size: 1.5rem; line-height: 1.2; }
nav.tabs button.on { color: var(--brand-ink); }
nav.tabs button.on .ic { transform: scale(1.12); }

/* ===== 部品 ===== */
.card {
  background: #fff; border-radius: 16px; padding: 14px;
  margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.card h3 { font-size: .95rem; color: #5B5342; margin-bottom: 8px; }

.btn {
  display: block; width: 100%; border: none; border-radius: 16px;
  min-height: 64px; font-size: 1.15rem; font-weight: 800;
  background: var(--brand); color: var(--on-brand); cursor: pointer;
  box-shadow: 0 3px 0 var(--brand-dark);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brand-dark); }
.btn.sub { background: #fff; color: var(--brand-ink); border: 3px solid var(--brand-dark); box-shadow: none; }
/* ★赤ボタンは文字色を白で上書きする。--on-brand（濃茶）のままだと
   赤地×濃茶＝コントラスト2.35:1 でほぼ読めなかった（2026-08-11 修正）。
   全ての確認ダイアログの決定ボタンがこれ。 */
.btn.warn { background: #C62828; color: #fff; box-shadow: 0 3px 0 #8E1B1B; }
.btn.gray { background: #EDEAE0; color: #444; box-shadow: 0 3px 0 #CFC9B8; }
.btn + .btn { margin-top: 12px; }
.btn:disabled { opacity: .4; }

.rowbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rowbtns3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.rowbtns .btn, .rowbtns3 .btn { margin: 0; }

/* 一覧の行 */
.rowitem {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px; padding: 14px;
  margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: none; width: 100%; text-align: left; cursor: pointer; font-size: 1rem;
}
.rowitem .nm { font-size: 1.2rem; font-weight: 800; }
.rowitem .sub { font-size: .8rem; color: #6B6455; }
.rowitem .right { margin-left: auto; text-align: right; flex-shrink: 0; }

.badge {
  display: inline-block; border-radius: 999px; padding: 4px 12px;
  font-size: .8rem; font-weight: 800; white-space: nowrap;
}
.b-green { background: #E3F2E4; color: #1B5E20; }
.b-orange { background: #FFE9D6; color: #B54708; }
.b-red { background: #FDE3E3; color: #B42318; }
.b-blue { background: #E0ECFB; color: #175CD3; }
.b-gray { background: #EDEAE0; color: #6B6455; }

/* お知らせカード */
.alert {
  border-left: 8px solid #999; background: #fff; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.alert .t { font-weight: 800; font-size: 1.02rem; }
.alert .d { font-size: .85rem; color: #555; margin-top: 2px; }
.alert.red { border-color: #C62828; }
.alert.orange { border-color: #EF6C00; }
.alert.blue { border-color: #1565C0; }
.alert.green { border-color: #2E7D32; }
.alert .acts { display: flex; gap: 10px; margin-top: 10px; }
.alert .acts button {
  flex: 1; min-height: 52px; border-radius: 12px; border: 2px solid var(--brand-dark);
  background: #fff; color: var(--brand-ink); font-size: .95rem; font-weight: 800;
}
.alert .acts button.fill { background: var(--brand); color: var(--on-brand); }

/* フォーム */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .9rem; font-weight: 800; color: #5B5342; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-size: 1.15rem; padding: 14px; border: 2px solid #C9C2B2;
  border-radius: 12px; background: #fff; font-family: inherit; color: #1B1B1B;
  min-height: 58px;
}
.field textarea { min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--brand-dark); border-color: var(--brand-dark);
}
.field .hint { font-size: .78rem; color: #8A8271; margin-top: 4px; }
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.datequick { display: flex; gap: 8px; margin-top: 8px; }
.datequick button {
  flex: 1; min-height: 46px; border-radius: 10px; border: 2px solid #C9C2B2;
  background: #fff; font-size: .9rem; font-weight: 700; color: #333;
}

/* 保存バー（画面下に固定） */
.savebar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  max-width: 640px; margin: 0 auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to top, #F5F2EA 75%, rgba(245,242,234,0));
  display: flex; gap: 12px;
}
.savebar .btn { flex: 1; margin: 0; }
.screen.hasform { padding-bottom: 110px; }

/* トースト（保存しました＋元に戻す） */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 104px; z-index: 60; display: none;
  background: #333; color: #fff; border-radius: 14px; padding: 12px 16px;
  font-size: 1rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  display: none; align-items: center; gap: 14px; max-width: 92%;
}
#toast button {
  background: #FFD54F; border: none; color: #333; border-radius: 10px;
  min-height: 48px; padding: 0 16px; font-size: 1rem; font-weight: 800; white-space: nowrap;
}

/* 確認ダイアログ */
#dlg {
  position: fixed; inset: 0; z-index: 70; display: none;
  background: rgba(0,0,0,.5); align-items: center; justify-content: center; padding: 20px;
}
#dlg .box { background: #fff; border-radius: 18px; padding: 20px; max-width: 480px; width: 100%; }
#dlg .msg { font-size: 1.1rem; font-weight: 700; margin-bottom: 18px; white-space: pre-wrap; }
#dlg .btns { display: flex; gap: 12px; }
#dlg .btns .btn { margin: 0; flex: 1; }

/* ===== ログイン ===== */
.login {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}
.login .hlp {
  font-size: .82rem; color: #6B6455; margin-top: 14px; text-align: center;
  line-height: 1.6; max-width: 330px;
}
/* お試し（見学）の案内・ボタン */
.login .demohint {
  margin-top: 14px; font-size: .82rem; color: #6b5c1e; text-align: center;
  background: #fbe58a; border: 1px solid #e0bf3d; border-radius: 12px;
  padding: 10px 14px; max-width: 330px; line-height: 1.7;
}
.login .demohint b { font-size: 1.15rem; color: #3D2E00; letter-spacing: .05em; }
.login .demolink {
  margin-top: 16px; background: #fff; border: 2px solid var(--brand-dark);
  color: var(--brand-ink); border-radius: 999px; padding: 10px 22px;
  font-size: .95rem; font-weight: 800; min-height: 48px; cursor: pointer;
}
.login .loginlogo {
  width: 128px; height: 128px; object-fit: contain;
  background: transparent; margin-bottom: 6px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.18));
}
.login .logo { font-size: 3.2rem; font-weight: 900; color: var(--brand-ink); letter-spacing: .08em; }
.login .yomi { font-size: .95rem; color: #6B6455; margin: 2px 0 4px; }
.login .desc { font-size: .9rem; color: #6B6455; margin-bottom: 18px; }
.pinshow { display: flex; gap: 10px; margin: 10px 0 6px; }
.pinshow span {
  width: 40px; height: 52px; border-bottom: 4px solid #C9C2B2;
  font-size: 1.7rem; font-weight: 800; text-align: center; line-height: 48px;
}
.pinshow span.f { border-color: var(--brand-dark); }
.loginerr { color: #C62828; font-weight: 800; min-height: 32px; font-size: .95rem; padding-top: 6px; }
/* 合言葉（招待コード）の入力欄。初回に1回だけ使う */
.joininput {
  width: 100%; max-width: 320px; margin: 10px 0 4px; padding: 16px 14px;
  font-size: 1.3rem; font-weight: 800; letter-spacing: .08em; text-align: center;
  border: 3px solid var(--brand-dark); border-radius: 14px; text-transform: uppercase;
}
.pad { display: grid; grid-template-columns: repeat(3, 84px); gap: 12px; margin-top: 6px; }
.pad button {
  height: 76px; border-radius: 18px; border: none; background: #fff;
  font-size: 1.8rem; font-weight: 800; color: #1B1B1B;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.pad button:active { background: #E3F2E4; }
.pad button.fn { font-size: 1rem; color: #6B6455; background: #EDEAE0; }
.foot { text-align: center; color: #A39A85; font-size: .75rem; padding: 18px 0 12px; }

/* ===== 詳細画面 ===== */
.pagehead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pagehead .back {
  min-width: 92px; min-height: 52px; border-radius: 12px; border: 2px solid #C9C2B2;
  background: #fff; font-size: 1rem; font-weight: 800; color: #333;
}
.pagehead h2 { font-size: 1.3rem; flex: 1; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .95rem; }
.kv dt { color: #8A8271; font-weight: 700; white-space: nowrap; }
.kv dd { font-weight: 700; }
.bigstat { font-size: 1.5rem; font-weight: 900; }

/* 履歴行 */
.ev {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid #EFEBE0; width: 100%; background: none; border-radius: 0;
  border-left: none; border-right: none; border-top: none; text-align: left;
  font-size: .95rem; cursor: pointer;
}
.ev:last-child { border-bottom: none; }
.ev .kd { font-weight: 800; min-width: 4.2em; }
.ev .dt2 { color: #6B6455; min-width: 7em; }
.ev .ex { flex: 1; color: #444; }

/* 集計 */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.statbox { background: #F7F5EE; border-radius: 12px; padding: 10px 12px; }
.statbox .n { font-size: 1.6rem; font-weight: 900; color: var(--brand-ink); }
.statbox .l { font-size: .78rem; color: #6B6455; font-weight: 700; }
table.tb { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tb th { text-align: left; color: #8A8271; font-size: .78rem; padding: 6px 6px; border-bottom: 2px solid #EFEBE0; white-space: nowrap; }
table.tb td { padding: 8px 6px; border-bottom: 1px solid #F2EFE6; font-weight: 700; }
table.tb td.r, table.tb th.r { text-align: right; }
.chart { width: 100%; height: auto; margin-top: 6px; }

.empty { text-align: center; color: #A39A85; padding: 26px 0; font-weight: 700; }
.seg { display: flex; gap: 8px; margin-bottom: 12px; }
.seg button {
  flex: 1; min-height: 50px; border-radius: 12px; border: 2px solid #C9C2B2;
  background: #fff; font-size: .92rem; font-weight: 800; color: #6B6455;
}
.seg button.on { background: var(--brand); border-color: var(--brand-dark); color: var(--on-brand); }
.search input {
  width: 100%; font-size: 1.05rem; padding: 12px 14px; border: 2px solid #C9C2B2;
  border-radius: 999px; margin-bottom: 12px; background: #fff;
}
.h-day { font-size: 1.25rem; font-weight: 900; margin-bottom: 12px; }
.h-day .small { font-size: .85rem; color: #6B6455; font-weight: 700; }

/* ダッシュボード（今日の状態） */
.secttl { font-size: .95rem; color: #5B5342; font-weight: 800; margin: 18px 4px 8px; }
.dashrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #fff; border-radius: 14px; padding: 12px 12px;
  margin-bottom: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: none; text-align: left;
}
.dashrow.tap { cursor: pointer; }
.dashrow.tap:active { transform: scale(.99); background: #F7F5EE; }
.dashrow .num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.dashrow .num.warn { background: #EF6C00; color: #fff; }
.dashrow .ic { font-size: 1.4rem; width: 1.7rem; text-align: center; flex-shrink: 0; }
.dashrow .lb { font-size: 1rem; font-weight: 800; flex-shrink: 0; }
.dashrow .vl { flex: 1; text-align: right; font-size: 1.05rem; font-weight: 800; color: var(--brand-ink); }
.dashrow .vl small { color: #6B6455; font-weight: 700; font-size: .78rem; }
.dashrow .bd { flex-shrink: 0; }
.srcnote { font-size: .72rem; color: #A39A85; text-align: right; margin: -2px 6px 4px; }

/* 先読みカレンダー */
.calmon { font-size: .85rem; font-weight: 800; color: var(--brand-ink); margin: 10px 0 2px; }
.ev .when { margin-left: auto; font-size: .8rem; font-weight: 800; color: var(--brand-ink); white-space: nowrap; }
.ev .when.late { color: #C62828; }

/* ===================== ことばの説明（? 印） ===================== */
.term { border-bottom: 2px dotted #B8860B; cursor: pointer; }
/* 指で押せる大きさにする。?印は小さいので、上下に余白を持たせて当たり判定を広げる
   （2026-08-11 修正：実測13〜24pxで44px基準の半分以下だった） */
.term-q {
  display: inline-block; min-width: 26px; height: 26px; line-height: 26px;
  margin-left: 4px; padding: 0 2px; border-radius: 13px;
  background: var(--brand); color: var(--on-brand);
  font-size: .82rem; font-weight: 900; text-align: center; vertical-align: middle;
}
.term { padding: 6px 0; }

/* ヘッダーのロゴ＝ホームに戻るボタン（迷子対策） */
.homebtn {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  padding: 4px 6px 4px 0; margin: -4px 0;
}
.homebtn:active { opacity: .6; }

/* ===================== しばらくおまちください ===================== */
#busy {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(61, 46, 0, .55);
}
#busy .busybox {
  background: #fff; border-radius: 18px; padding: 26px 30px; text-align: center;
  max-width: 82%; box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
#busy .spin {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  border: 5px solid #EDEAE0; border-top-color: var(--brand);
  animation: buspin 0.9s linear infinite;
}
@keyframes buspin { to { transform: rotate(360deg); } }
#busymsg { font-size: 1.15rem; font-weight: 900; color: var(--brand-ink); }
#busy .busysub { font-size: .85rem; color: #6B6455; font-weight: 700; margin-top: 6px; }

/* ===================== 牧場の管理（BicTree用） ===================== */
/* 招待リンクは長いので折り返して全部見せる。長押しでコピーもできるように */
.codebox {
  margin: 10px 0; padding: 10px 12px; border-radius: 10px;
  background: #F7F5EE; border: 2px dashed #DCD5C4;
  font-size: .82rem; word-break: break-all; user-select: all; -webkit-user-select: all;
  color: #5B5342; font-weight: 700;
}

/* ===================== ほかの市場の子牛相場 ===================== */
.mkwrap { margin: 4px 0 10px; }
.mktoggle {
  width: 100%; padding: 11px; border-radius: 12px; border: 2px dashed #DCD5C4;
  background: #fff; font-size: .92rem; font-weight: 800; color: #5B5342;
}
.mktoggle:active { background: #F7F5EE; }
.mkrow {
  background: #fff; border: 2px solid #E7E1D3; border-radius: 12px;
  padding: 10px 12px; margin-top: 10px;
}
.mkrow.me { border-color: var(--brand-dark); background: #FFFBF0; }
.mkhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mkhead b { font-size: 1.05rem; }
.mkhead .mkday { font-size: .75rem; color: #8A8271; font-weight: 700; margin-left: auto; }
.mkval { font-size: .95rem; margin-top: 6px; font-weight: 700; }
.mkval b { color: var(--brand-ink); font-size: 1.1rem; }
.mkval.none { color: #A39A85; font-weight: 700; }
.mksub { font-size: .82rem; color: #6B6455; margin-top: 2px; }
.mkfoot { display: flex; align-items: center; margin-top: 8px; }
.mkgot { font-size: .75rem; color: #A39A85; font-weight: 700; }
.mkbtn {
  margin-left: auto; padding: 13px 20px; border-radius: 10px;
  border: 2px solid var(--brand-dark); background: #fff;
  font-size: .95rem; font-weight: 800; color: var(--brand-ink);
}
.mkbtn:active { background: var(--brand); color: var(--on-brand); }
.mkbtn:disabled { opacity: .45; }

/* ===================== 生産履歴書 ===================== */
.card.tight { padding: 10px 12px; }
/* 履歴書まわりの2つ並びボタンは、狭い画面で折り返さないよう少し小さく */
.rowbtns .btn.sub { font-size: .98rem; padding-left: 8px; padding-right: 8px; }
.hint { font-size: .85rem; color: #5B5342; line-height: 1.6; }
.hint b { color: var(--brand-ink); }
.warnbox { border: 3px solid #EF6C00; background: #FFF6EC; }
.warnbox .sub { font-size: .85rem; color: #B54708; margin-top: 4px; font-weight: 700; }
.listhead { font-size: .82rem; color: #8A8271; font-weight: 800; margin: 12px 4px 6px; }
.fieldlbl { font-size: .9rem; font-weight: 800; color: #5B5342; margin: 18px 0 6px; }

/* しぼり込みのボタン列（横スクロール） */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; }
.chips .chiplbl { font-size: .78rem; color: #8A8271; font-weight: 800; align-self: center;
  white-space: nowrap; padding-right: 2px; }
.chip {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; border: 2px solid #DCD5C4;
  background: #fff; font-size: .88rem; font-weight: 800; color: #5B5342; white-space: nowrap;
}
.chip.on { background: var(--brand); border-color: var(--brand-dark); color: var(--on-brand); }

/* まだ入っていない所は色を変えて促す */
.needbox { background: #FFF6D8 !important; border-color: #E9A800 !important; }
.need { color: #B42318; font-weight: 800; background: #FDE3E3; padding: 0 6px; border-radius: 6px; }

details.fold { margin: 18px 0 6px; border: 2px dashed #DCD5C4; border-radius: 12px; padding: 10px 12px; }
details.fold summary { font-weight: 800; color: #5B5342; cursor: pointer; font-size: .95rem; }
details.fold .hint { margin: 8px 0 12px; }

.feededit { display: flex; flex-direction: column; gap: 10px; }
.feedrow {
  display: grid; grid-template-columns: auto 5.5em 1fr; gap: 6px;
  border-bottom: 1px dashed #E0D9C8; padding-bottom: 10px;
}
.feedrow input { padding: 10px; font-size: .95rem; border: 2px solid #DCD5C4; border-radius: 10px; width: 100%; }
.feedrow input[name^="f_maker"] { grid-column: 1 / -1; }
.feedrow .cb { display: flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 800; color: #5B5342; }
.feedrow .cb input { width: 26px; height: 26px; }

/* ------- 紙面そのもの（画面プレビュー＝印刷と同じ見た目） ------- */
.cert-sheet {
  background: #fff; color: #000; border: 1px solid #999; border-radius: 4px;
  padding: 14px 16px; margin: 12px 0; font-size: .82rem; line-height: 1.5;
}
.cert-title {
  text-align: center; font-size: 1.15rem; font-weight: 900; letter-spacing: .18em;
  border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px;
}
.cert-tbl { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.cert-tbl th, .cert-tbl td { border: 1px solid #666; padding: 5px 7px; vertical-align: middle; }
.cert-tbl th { background: #F2F0EA; text-align: left; width: 9.5em; font-weight: 800; white-space: nowrap; }
.cert-tbl td.bignum { font-size: 1.05rem; font-weight: 900; letter-spacing: .12em; }
.cert-tbl .dim { color: #666; font-size: .78rem; }
.cert-tbl.feed th.vhead { width: 6.5em; text-align: center; }
.cert-tbl.feed .catrow td { background: #F7F5EE; font-weight: 800; }
.cert-tbl.feed td.chk { width: 3.4em; text-align: center; white-space: nowrap; }
.cert-tbl.feed td.fname { width: 42%; }
.cert-tbl.feed td.fmaker { color: #333; }
.cert-oath { border: 1px solid #666; padding: 8px 10px; margin-bottom: 10px; }
.cert-sign { text-align: right; line-height: 2; }
.cert-sign .seal { border: 1px solid #999; border-radius: 50%; padding: 2px 7px; color: #999; font-size: .75rem; }

/* 画面では2枚めを出さない（同じ内容なので邪魔になる）。印刷のときだけ出す */
.cert-copy { display: none; }

/* ===== 国への届出 ===== */
.tdlead {
  background: #FFFDF5; border: 2px solid var(--brand-ink); border-radius: 10px;
  padding: 12px 14px; margin: 4px 4px 10px; font-size: .82rem; line-height: 1.6;
}
.tdwarn {
  background: #FFF4EC; border-left: 6px solid #EF6C00; border-radius: 6px;
  padding: 10px 12px; margin: 0 4px 14px; font-size: .78rem; line-height: 1.6;
  color: #7A3B00;
}
.tdsum { font-size: .82rem; font-weight: 800; color: #5B5342; margin-bottom: 8px; }
.tdsum b { font-size: 1.05rem; color: var(--brand-ink); }
.tdsum b.warn { color: #B54708; }
.tdrow {
  display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
  border-left: 6px solid #7CB342; background: #F7F5EE;
}
.tdrow.ng { border-left-color: #E57373; background: #FFF4EC; }
.tdrow .tdn { font-weight: 800; font-size: .9rem; }
.tdrow .tdd { font-size: .76rem; color: #6B6455; }
.tdrow .tdc {
  font-size: .8rem; color: #5B5342; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.tdrow .tdw { flex: 1 0 100%; font-size: .76rem; color: #B54708; font-weight: 700; }
.tdcfg { font-size: .8rem; color: #5B5342; line-height: 1.7; }
.tdcfg b.warn { color: #B54708; }

/* ------- 印刷 -------
 * 生産履歴書は元のExcelどおり **A4よこ に同じものを2枚ならべる**（切って使う）。
 * 履歴書の一覧を刷るときは、これまでどおり たて でよい。
 * どちらの用紙になるかは、履歴書のページを開いているかで切り替える（body.printpair）。
 */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, body { background: #fff !important; }
  .noprint, .tabs, .bar, .savebar, .pagehead, #toast, #dlg, #busy { display: none !important; }
  .screen { padding: 0 !important; }
  .body { padding: 0 !important; }
  .cert-sheet {
    border: none; margin: 0; padding: 0; font-size: 10.5pt;
    page-break-after: always; break-after: page;
  }
  .cert-sheet:last-child { page-break-after: auto; break-after: auto; }
  .need { background: none; color: #000; }
  /* 一覧を印刷するときは行を詰めて出す */
  .rowitem { border: none; border-bottom: 1px solid #999; border-radius: 0; padding: 6px 0; box-shadow: none; }
  .card, .chips, .search { display: none !important; }
  .listhead { display: block; font-size: 11pt; color: #000; }
}

/* 生産履歴書のページを印刷するとき（A4よこ・2枚ならべ）
   用紙の向き（@page）は、印刷ボタンを押したときに JS が差し替える。
   名前付き @page はブラウザによって効かないことがあるため。 */
@media print {
  /* ★#app の max-width:640px(約169mm) が効いたままだと、A4よこでも紙面が
     半分以下（実測77mm）にしかならない。印刷のときは幅の制限を外す。 */
  body.printpair #app,
  body.printpair .screen,
  body.printpair .body { max-width: none !important; width: 100% !important; padding: 0 !important; }

  body.printpair .cert-pair {
    display: flex; gap: 6mm; align-items: stretch;
    page-break-inside: avoid; break-inside: avoid;
  }
  body.printpair .cert-copy { display: block; }
  /* 2枚を左右に半分ずつ。まん中の点線が切る位置の目印 */
  body.printpair .cert-pair > .cert-sheet,
  body.printpair .cert-pair > .cert-copy {
    flex: 0 0 calc(50% - 3mm); width: calc(50% - 3mm); min-width: 0;
    page-break-after: auto; break-after: auto;
  }
  body.printpair .cert-pair > .cert-copy { border-left: 1px dashed #999; padding-left: 6mm; }
  /* よこ向きの紙に2枚入れるので、少しだけ詰める */
  body.printpair .cert-sheet { font-size: 8.6pt; line-height: 1.35; }
  body.printpair .cert-title { font-size: 1rem; letter-spacing: .1em; padding-bottom: 4px; margin-bottom: 7px; }
  body.printpair .cert-tbl th, body.printpair .cert-tbl td { padding: 3px 5px; }
  body.printpair .cert-tbl th { width: 8.2em; }
  body.printpair .cert-tbl td.bignum { font-size: .95rem; letter-spacing: .08em; }
  body.printpair .cert-oath { padding: 5px 7px; margin-bottom: 7px; }
  body.printpair .cert-sign { line-height: 1.8; }
}