: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);
}
.hint{display:block; color:var(--muted); font-size:12px; margin-top:5px}

/* 明細行 */
.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; 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)}

/* ---------- 発注書プレビュー ---------- */
.order{
  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;
}
.ord-top{display:flex; justify-content:space-between; font-size:12px; gap:20px}
.ord-top span{color:#111}
.ord-top b{font-weight:400; margin-left:8px}

.ord-title{font-size:22px; text-align:center; margin:6px 0 18px; font-weight:700; letter-spacing:.15em}

.ord-amount{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:1px solid #111; padding-bottom:6px; margin-bottom:22px;
}
.ord-amount .amt-label{font-size:12px; white-space:nowrap}
.ord-amount .amt-value{flex:1; text-align:left; padding-left:40px}
.ord-amount .amt-value b{font-size:24px; font-weight:700}
.ord-amount .amt-tax{font-size:11px; align-self:flex-end}

.ord-table{width:100%; border-collapse:collapse; margin-bottom:20px}
.ord-table th,.ord-table td{border:1px solid #555; padding:5px 8px; font-size:12px; height:24px}
.ord-table thead th{text-align:center; font-weight:400; background:#fff}
.ord-table .c-code{width:76px} .ord-table .c-price{width:86px}
.ord-table .c-tax{width:80px} .ord-table .c-qty{width:60px} .ord-table .c-amt{width:96px}
.ord-table td.num{text-align:right}
.ord-table td.center{text-align:center}
.ord-table td.blank{border:none}
.ord-table td.f-label{text-align:center}
.ord-table td.f-label.small{font-size:10.5px}
.ord-table td.bold, .ord-table td.f-label.bold{font-weight:700}

.ord-party{margin-bottom:16px}
.party-title{font-size:13px; font-weight:700; margin-bottom:4px}
.party-table{width:100%; border-collapse:collapse}
.party-table th,.party-table td{border:1px solid #555; padding:5px 8px; font-size:12px; height:26px}
.party-table th{width:80px; text-align:center; font-weight:400; background:#fff}

.ord-vendor{margin-top:24px; font-size:11.5px; line-height:1.7}
.ord-vendor .vendor-name{font-weight:700; font-size:14px; margin-bottom:2px}
.ord-vendor .reg{margin-top:8px}

/* ---------- 印刷 ---------- */
@media screen{ .order{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}
  .no-print{display:none !important}
  .order{
    max-width:none; margin:0; padding:0; border:none; border-radius:0;
    box-shadow:none; font-size:10.5pt;
  }
  .ord-table tr, .party-table tr, .ord-vendor{ page-break-inside:avoid; break-inside:avoid; }
  .ord-title{margin:4px 0 14px}
  .ord-amount{margin-bottom:16px}
  .ord-table{margin-bottom:16px}
  .ord-party{margin-bottom:12px}
  .ord-vendor{margin-top:18px}
}