:root{
  --bg:#f3f4f6; --card:#fff; --ink:#1f2937; --line:#d1d5db;
  --brand:#0f766e; --brand-d:#0b5c55; --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/* ---------- 入力UI ---------- */
.app{max-width:640px; margin:0 auto; padding:12px 12px 96px}
.app-header{padding:8px 4px 4px}
.app-header h1{font-size:20px; margin:0}
.app-header .sub{margin:2px 0 0; color:var(--muted); font-size:13px}

.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0}
.card h2{font-size:15px; margin:0 0 10px}

label{display:block; font-size:13px; color:var(--muted); margin:10px 0 0}
label:first-of-type{margin-top:0}
input,textarea,select{
  width:100%; font-size:16px; padding:11px 12px; margin-top:5px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
textarea{resize:vertical}
.suffix-note,.hint{display:block; color:var(--muted); font-size:12px; margin-top:5px}

/* セグメント（粒剤/液剤プリセット） */
.seg{display:flex; gap:0; border:1px solid var(--brand); border-radius:10px; overflow:hidden}
.seg-btn{flex:1; padding:12px; font-size:14px; background:#fff; color:var(--brand); border:none; font-weight:600}
.seg-btn + .seg-btn{border-left:1px solid var(--brand)}
.seg-btn:active{background:var(--brand); color:#fff}

/* 明細行 */
.line{border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:10px; background:#fafafa}
.line-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.line-head b{font-size:13px; color:var(--muted)}
.line-del{background:none; border:none; color:#b91c1c; font-size:13px; padding:4px}
.line-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.line-grid .full{grid-column:1 / -1}
.line .calc{grid-column:1 / -1; text-align:right; font-size:14px; color:var(--ink); padding-top:2px}
.line .calc b{font-size:16px}

/* ボタン */
.btn{display:inline-block; width:100%; padding:13px; font-size:15px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600}
.btn.ghost{background:#fff; color:var(--brand); border-color:var(--brand)}
.btn.small{width:auto; padding:8px 12px; font-size:13px; margin-top:8px}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn.primary:active{background:var(--brand-d)}
.actions{position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px 12px; background:rgba(243,244,246,.96); border-top:1px solid var(--line); max-width:640px; margin:0 auto}
.actions .btn{margin:0}
.totals-preview{text-align:center; color:var(--brand-d); font-weight:700; font-size:15px; margin:8px 0 0}

details summary{cursor:pointer; font-size:14px; font-weight:600; color:var(--brand)}

/* ---------- 請求書プレビュー ---------- */
.invoice{
  background:#fff; color:#111; max-width:760px; margin:8px auto 40px;
  padding:28px 30px; border:1px solid var(--line); border-radius:6px;
  font-size:13px;
}
.inv-head{display:flex; justify-content:space-between; gap:20px; align-items:flex-start}
.inv-head-left{flex:1}
.inv-title{font-size:24px; margin:0 0 14px; font-weight:700}
.inv-customer{font-size:18px; font-weight:700; margin-top:4px}

.inv-head-right{min-width:280px}
.inv-date{display:flex; gap:14px; justify-content:flex-end; font-size:13px; margin-bottom:14px}
.inv-date span{color:#333}
.inv-date b{background:#fff7c0; padding:0 8px}
.inv-issuer{font-size:11.5px; text-align:left; line-height:1.65}
.inv-issuer .issuer-name{font-weight:700; font-size:12.5px}
.inv-issuer .reg{font-size:10.5px}

.inv-lead{font-size:13px; margin:18px 0 12px; line-height:1.5}

.inv-billed{display:flex; align-items:baseline; gap:10px; margin:6px 0 6px}
.inv-billed span{font-weight:700; font-size:15px}
.inv-billed b{font-size:20px; color:#111; letter-spacing:.02em}

.unit-note{text-align:right; font-size:12px; margin:8px 0 2px}

.inv-table{width:100%; border-collapse:collapse; margin-top:2px}
.inv-table th,.inv-table td{border:1px solid #555; padding:6px 8px; font-size:12px; height:24px}
.inv-table thead th{background:#fff; text-align:left; font-weight:700}
.inv-table .c-no{width:56px} .inv-table .c-unit{width:84px} .inv-table .c-qty{width:74px} .inv-table .c-amt{width:96px}
.inv-table td.num{text-align:right}
.inv-table td.center{text-align:center}

/* フッター（小計・合計）：表の数量/小計列に合わせて右寄せ */
.inv-foot{margin-top:6px}
.foot-row{display:flex; justify-content:flex-end; font-size:13px; padding:3px 0}
.foot-row .fl{font-weight:700; margin-right:8px}
.foot-row .fq{width:74px; text-align:right; padding-right:8px}
.foot-row .fa{width:96px; text-align:right; padding-right:8px; font-weight:700}
.foot-row.grand{border-top:3px double #111; margin-top:2px; padding-top:6px}
.foot-row.grand .fa{font-size:14px}

.inv-note2{font-size:13px; margin:14px 0 8px}

.inv-remarks{border:1px solid #999; background:#fcfcf0; min-height:150px; padding:8px 10px; margin-top:4px}
.inv-remarks .rm-label{font-size:12px; color:#333; margin-bottom:4px}
.inv-remarks div#pvRemarks{white-space:pre-wrap}

/* ---------- 印刷 ---------- */
@media screen{ .invoice{box-shadow:0 1px 6px rgba(0,0,0,.08)} }

@media print{
  @page{size:A4 portrait; margin:12mm}
  html,body{height:auto}
  body{background:#fff; font-size:11pt}
  .no-print{display:none !important}
  .invoice{
    max-width:none; margin:0; padding:0; border:none; border-radius:0;
    box-shadow:none; font-size:10.5pt;
    page-break-inside:avoid; break-inside:avoid;
  }
  /* 1ページに収めるための余白圧縮（画面表示は変えない） */
  .inv-title{margin:0 0 10px}
  .inv-lead{margin:12px 0 8px}
  .inv-table th,.inv-table td{padding:4px 8px; height:20px}
  .inv-note2{margin:10px 0 6px}
  .inv-remarks{min-height:96px}
  .inv-date{margin-bottom:10px}
  .inv-date b{background:#fff7c0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .inv-remarks{background:#fcfcf0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}